Updated the packages to latest version by devsatish05 · Pull Request #436 · HCL-TECH-SOFTWARE/enchanted-react-components

devsatish05 · 2026-08-03T11:20:10Z

https://hclsw-jirads.atlassian.net/browse/DXQ-50751
For testing the PR please follow the below steps:

rm -rf node_modules package-lock.json
npm ci
npm run build
npm run lint
npm run test

npm install git+ssh://github:devsatish05/enchanted-icon-dist#32a3171

This PR is blocked by this PR: HCL-TECH-SOFTWARE/enchanted-icons#65

kmehboob

Any reason for commenting out this code ?

kmehboob · 2026-08-05T04:59:38Z

+  //       if (nextFocusableRow) {
+  //         nextFocusableRow.focus();
+  //       } else {
+  //         // If no focusable row is found, move focus to the footer


reason for commenting this out ?

Hey @devsatish05, what is the reason here?

kmehboob · 2026-08-05T06:00:47Z

+    const generatePdf = resolveCarbonIcon('generate-pdf');
+    const softwareResource = resolveCarbonIcon('software-resource-resource') || resolveCarbonIcon('software-resource');
+
+    config.resolve.alias = {


Since we already have a helper ( resolveCarbonIcon) and multiple icon aliases, would it make sense to store the icon mappings in map/object?
This would reduce repetitive code and make it easier to add new carbon icon aliases in future if there will be any issues with icons ?

@kmehboob This function is used inside .storybook folder, it is not needed anywhere else and in storybook there is no file for helper function, so just adding a it here will be enough.

angelo-asoy

data grid, date picker, tree view are broken

HanjoHagemeierHCL

Left a review comment ...

HanjoHagemeierHCL · 2026-08-05T13:40:57Z

+  //       if (nextFocusableRow) {
+  //         nextFocusableRow.focus();
+  //       } else {
+  //         // If no focusable row is found, move focus to the footer


Hey @devsatish05, what is the reason here?

HanjoHagemeierHCL · 2026-08-05T13:57:35Z

+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      ...(changeCatalog && { '@carbon/icons/es/change-catalog/32': changeCatalog }),


Hey @devsatish05, why we have to implement an exception only for 6 icons? That make to me no sense? Could it be that something is odd in the icons package, which is leading to this problem. Other icons from the @carbon/icons/es can be load with out this exception.

HanjoHagemeierHCL · 2026-08-05T13:58:36Z

    {
      "patterns": [""],
-      "max": 294
+      "max": 380


Hey @devsatish05, we should check the reason of the increasing of the number here.

HanjoHagemeierHCL · 2026-08-05T14:01:02Z

Hey @devsatish05, the test PR check is failing as well ...

https://github.com/HCL-TECH-SOFTWARE/enchanted-react-components/actions/runs/30915453735/job/92319951586?pr=436

HanjoHagemeierHCL · 2026-08-05T14:03:50Z

data grid, date picker, tree view are broken

DataGrid seams to work ...

But TreeView and DataPicker is broken ...

HanjoHagemeierHCL

Left again a comment

HanjoHagemeierHCL · 2026-08-05T14:31:12Z

    "jest-environment-jsdom": "^29.7.0",
    "jest-image-snapshot": "^6.4.0",
    "puppeteer": "^24.9.0",
+    "react": "^19.2.7",


Hey @devsatish05, add of react and react-dom to dependencies is wrong. Should be only added to peerDependencies ...

HanjoHagemeierHCL · 2026-08-06T08:23:52Z

-      firstRow.setAttribute('aria-disabled', 'true');
-    }
-  };
+  // const handleOnHeaderFocus = (event: KeyboardEvent) => {


Hey @devsatish05, why is this comment out as well?

Copilot

Pull request overview

This PR updates the component library to newer React/MUI ecosystem versions (DXQ-50751), including MUI v7 API migrations (slots/slotProps, Grid v2 size prop, x-tree-view, x-date-pickers) and refactors across components/stories to align with the new typings and defaults behavior.

Changes:

Upgraded MUI packages (material/system/lab/x-*), TypeScript, ESLint tooling, and React typings; adjusted tsconfig output structure.
Migrated multiple components to MUI v7 APIs (e.g., DataGrid slots, x-tree-view, x-date-pickers slots, Grid size), and updated Storybook examples accordingly.
Reworked component defaults from Component.defaultProps toward exported *DefaultProps objects and explicit prop merging/default parameters.

Reviewed changes

Copilot reviewed 65 out of 67 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
tsconfig.json	Sets `rootDir` to `src` for build output consistency.
src/Typography/Typography.tsx	Moves defaults to `typographyDefaultProps` and merges props.
src/Typography/Typography.stories.tsx	Uses `typographyDefaultProps` for Storybook args.
src/TreeView/TreeView.tsx	Migrates from `@mui/lab` TreeView to `@mui/x-tree-view` slots API.
src/TreeView/TreeView.stories.tsx	Updates TreeView story props to new x-tree-view API.
src/TreeView/TreeItem.tsx	Migrates TreeItem to x-tree-view `TreeItem2` and slotProps.
src/ToggleButtonGroup/ToggleButtonGroup.stories.tsx	Migrates Grid usage to v2 `size` prop patterns.
src/ToggleButton/ToggleButton.tsx	Moves defaults to `toggleButtonDefaultProps` and merges props.
src/ToggleButton/ToggleButton.stories.tsx	Uses `toggleButtonDefaultProps` and Grid v2 patterns.
src/theme/index.ts	Updates MUI theme typings (Typography variants options).
src/TextField/TextField.tsx	Exports `textFieldDefaultProps` and merges props.
src/TextField/TextField.stories.tsx	Uses `textFieldDefaultProps` for Storybook controls/args.
src/Tabs/Tab.tsx	Removes empty `defaultProps`.
src/Snackbar/SnackbarContainer.tsx	Adjusts styled component typing for React 19 typings.
src/Snackbar/Snackbar.tsx	Replaces `JSX.Element` with `React.ReactElement` typings.
src/Select/SelectSingle.stories.tsx	Removes reliance on `Select.defaultProps` in args.
src/Select/SelectMultiple.stories.tsx	Removes reliance on `Select.defaultProps` in args.
src/Select/Select.tsx	Switches to `unstable_useId`, inlines defaults merge, removes `defaultProps`.
src/Preview/Preview.tsx	Converts defaults to parameter defaults; updates React element typings.
src/Preview/Preview.stories.tsx	Removes reliance on `Preview.defaultProps` in args.
src/prerequisite_components/InputLabelAndAction/InputLabelAndAction.tsx	Updates styled component typings + Grid v2 `size` usage; removes empty `defaultProps`.
src/PickersLocalizationProvider/PickersLocalizationProvider.tsx	Updates pickers typings/generics for Dayjs/MUI v7.
src/Paper/Paper.tsx	Adds explicit merged defaults (`paperDefaultProps`) instead of `defaultProps`.
src/Paper/Paper.stories.tsx	Removes reliance on `Paper.defaultProps` in args.
src/Panel/PanelTabs.tsx	Removes empty `defaultProps`.
src/Panel/PanelTabContent.tsx	Migrates Grid props to v2 `size`; removes empty `defaultProps`.
src/Panel/Panel.tsx	Converts defaults to parameter defaults; updates React element typings.
src/Panel/Panel.stories.tsx	Removes reliance on `Panel.defaultProps` in stories.
src/Pagination/CustomTablePaginationActions.tsx	Updates pagination action prop typing via `TablePaginationProps`.
src/List/ListItemText.tsx	Updates Grid child sizing to v2 `size` prop usage.
src/List/ListItem.tsx	Removes `defaultProps`, merges default `hasBorder`.
src/List/List.tsx	Removes `defaultProps`, merges default list props.
src/List/List.stories.tsx	Removes reliance on `List.defaultProps` in args.
src/Introduction/IntroductionPage.tsx	Removes empty `defaultProps`.
src/IconButton/IconButton.tsx	Replaces `defaultProps` with merged defaults inside component.
src/Icon/Icon.stories.tsx	Updates Grid sizing and JSX element typing.
src/hidden_components/TimePicker/TimePicker.tsx	Migrates to pickers v7 slots/slotProps API and Dayjs generics.
src/Header/sampleHeaderConfig.tsx	Stops spreading `*.defaultProps` into sample configs.
src/Header/Header.tsx	Migrates Grid layout props to v2 `size`.
src/DatePicker/DatePicker.tsx	Migrates to pickers v7 slots/slotProps and updates calendar styling selectors.
src/DatePicker/DatePicker.stories.tsx	Adjusts args parsing typing for updated Storybook/TS.
src/DataGrid/sampleData.tsx	Updates valueGetter signature to newer DataGrid API.
src/DataGrid/DataGridColumnMenu.tsx	Updates column menu props shape and container to match newer DataGrid patterns.
src/DataGrid/DataGrid.tsx	Migrates to DataGrid v7 slots/slotProps and pagination model.
src/composite_components/Tile/TileActionMenu.tsx	Updates cloneElement typing for React 19.
src/composite_components/Tile/Tile.tsx	Tightens styled Box component typing.
src/composite_components/SearchCriteria/SearchCriteria.tsx	Removes empty `defaultProps`.
src/colors/index.ts	Updates MUI palette color typing import.
src/colors/Grey.stories.tsx	Adjusts Storybook Meta/StoryFn typing.
src/Chip/Chip.tsx	Makes avatar access safer with optional chaining/`any` cast.
src/Chip/Chip.stories.tsx	Migrates Grid usage to v2 patterns.
src/Checkbox/Checkbox.tsx	Exports `checkboxDefaultProps` and merges props.
src/Checkbox/Checkbox.stories.tsx	Uses `checkboxDefaultProps` in args.
src/Button/Button.tsx	Exports `buttonDefaultProps`, merges props, avoids leaking custom props into rest.
src/Button/Button.stories.tsx	Uses `buttonDefaultProps` and Grid v2 patterns.
src/Badge/Badge.tsx	Introduces `badgeDefaultProps` and uses it as defaults.
src/Badge/Badge.stories.tsx	Uses `badgeDefaultProps` in args and Grid v2 patterns.
src/Avatar/Avatar.tsx	Updates return type to `React.ReactElement`.
src/Alert/Alert.stories.tsx	Migrates Grid usage to v2 patterns.
src/ActionButton/ActionButton.tsx	Exports `actionButtonDefaultProps`, converts to param defaults.
src/ActionButton/ActionButton.stories.tsx	Uses `actionButtonDefaultProps` in args.
package.json	Upgrades dependencies/tooling; switches icons dependency source; updates peer deps.
.storybook/main.js	Minor webpack config edits (currently includes a no-op line).
.jest-reporter-log-validator-config.json	Updates allowed log count threshold.

Suppressed comments (1)

src/DataGrid/DataGridColumnMenu.tsx:51

The hide/manage column actions should also close the column menu after executing. Calling hideMenu?.() after these clicks keeps the menu behavior consistent and avoids leaving the menu open.

  return (
    <Paper elevation={3}>
      <MenuItem onClick={() => { handleSortModelChange('asc'); }}>
        <ArrowUp />
        {' '}

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

HanjoHagemeierHCL · 2026-08-31T08:27:02Z

+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@hcl-software/enchanted-icons": "github:devsatish05/enchanted-icon-dist#32a3171",


Hey @devsatish05, this should be than replaced with the new icon package version

HanjoHagemeierHCL · 2026-08-31T08:28:12Z

  "peerDependencies": {
-    "react": "^18.2.0 || ^19.0.0"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
  },


Hey @devsatish05, let us discuss this point ...

+    config.resolve = config.resolve || {};
+
+
    return config;


HanjoHagemeierHCL · 2026-08-31T08:25:48Z

 export const ExtendedGridColumnMenu = ({
-  currentColumn, onSortModelChange, onColumnVisibilityModelChange, columnVisibilityModel, ...rest
+  colDef, onSortModelChange, onColumnVisibilityModelChange, columnVisibilityModel,
 }: GridColumnMenuProps) => {
  const apiContext = useGridApiContext();



Hey @devsatish05, please check this copilot review comment

HanjoHagemeierHCL

Hey @devsatish05, please add also a changelog entry. You had also forgotten to add this for the icon package ...

HanjoHagemeierHCL · 2026-09-24T10:22:41Z

 import { ThemeDirectionType, ThemeModeType } from '../src/theme';
 import { create } from 'storybook/theming/create';

+// const style = document.createElement('style');


Hey @devsatish05, remove this.

HanjoHagemeierHCL · 2026-09-24T10:32:54Z

+          root: ({ ownerState }) => {
+            return {
+              ...(ownerState.container && {
+                '&.legacy-grid-spacing': {


Hey @devsatish05, I do't rely like this solution. We should search afterwards for better solution ...

@HanjoHagemeierHCL Sure, I will look for better solution.

devsatish05 added 5 commits August 3, 2026 16:48

Updated the packages to latest version

25dc946

Merge branch 'main' into tech-improvement/DXQ-50751

8eed254

Fixed the lint issue

fdc8c89

Fixed the storybook issues

231de98

Updated the enchanted-package

f0debde

kmehboob reviewed Aug 5, 2026

View reviewed changes

angelo-asoy suggested changes Aug 5, 2026

View reviewed changes

HanjoHagemeierHCL self-requested a review August 5, 2026 12:19

HanjoHagemeierHCL requested changes Aug 5, 2026

View reviewed changes

devsatish05 added 4 commits August 5, 2026 21:35

Fixed the broken changes in treeview and Datagrid

d815849

Fixed the lint issues

cffafdd

Fixed the date picker issue

a9d96bc

Update package-lock.json

bfbf50b

HanjoHagemeierHCL reviewed Aug 6, 2026

View reviewed changes

devsatish05 added 3 commits August 6, 2026 18:45

Removed the unused codes

88255c3

Updated the data grid function

29fe746

Update .jest-reporter-log-validator-config.json

33b694b

devsatish05 marked this pull request as ready for review August 7, 2026 06:36

Copilot AI lite review requested due to automatic review settings August 7, 2026 06:36

Copilot started reviewing on behalf of devsatish05 August 7, 2026 06:37 View session

Copilot AI reviewed Aug 7, 2026

View reviewed changes

devsatish05 added 4 commits August 14, 2026 14:26

Merge branch 'main' into tech-improvement/DXQ-50751

1609716

Update TextField.tsx

745dea2

Update TextField.tsx

f407fdf

Fixed the accessibility Issue

790f47a

devsatish05 added 25 commits September 11, 2026 13:16

Update DatePicker.tsx

0b2d77e

Update package-lock.json

184748c

Fix the UI visual issue for mui items

c41371b

Updated the componnets

f2ec328

Fixed the UI changes in the chromatic visual

9cd6c2e

Fixed the issues of the UI diffrences.

d556043

Fixed the chips and button issue

d5e2db4

Fixed all the failing test issues

fb20a98

Removed the changes related to the back

d5804d0

Disabled additional a11y rules for MUI upstream issues in stories

dc617a1

Fixed some of the issue visual changes in chromatic

ec64e4a

Data grid column height

f3855c2

Update DataGrid.tsx

9034b7b

Updated the sample data

9d19110

Update DataGrid.tsx

2b9a8e1

Fixed the grid issue

e61263a

Fixed the button issue

c72bc80

Fixing the padding top issue of the button

faf52fb

Fixed the lint issue

cb8caae

removed commented lines

8ea7e05

Merge branch 'main' into tech-improvement/DXQ-50751

c17b885

Update DatePicker.stories.tsx

2df1172

Updated the height

1091d41

Merge branch 'main' into tech-improvement/DXQ-50751

69e4434

updated the enchanted-icons package

d52fe01

HanjoHagemeierHCL requested changes Sep 24, 2026

View reviewed changes

Added the change logs

b16cd49

HanjoHagemeierHCL self-requested a review September 24, 2026 11:13

HanjoHagemeierHCL approved these changes Sep 24, 2026

View reviewed changes

HanjoHagemeierHCL merged commit de0a92e into HCL-TECH-SOFTWARE:main Sep 24, 2026
6 checks passed

Conversation

devsatish05 commented Aug 3, 2026 • edited by HanjoHagemeierHCL Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kmehboob left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

angelo-asoy left a comment

Choose a reason for hiding this comment

Uh oh!

HanjoHagemeierHCL left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HanjoHagemeierHCL commented Aug 5, 2026

Uh oh!

HanjoHagemeierHCL commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

HanjoHagemeierHCL left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HanjoHagemeierHCL left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

devsatish05 commented Aug 3, 2026 •

edited by HanjoHagemeierHCL

Loading

HanjoHagemeierHCL commented Aug 5, 2026 •

edited

Loading