@digital-ai/dot-components 2.12.0 → 2.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGE_LOG.md +32 -14
  2. package/index.esm.js +106 -90
  3. package/index.umd.js +109 -94
  4. package/package.json +1 -1
package/CHANGE_LOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.12.1](https://www.npmjs.com/package/@digital-ai/dot-components) (08/07/2023)
4
+
5
+ [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.12.0...2.12.1)
6
+
7
+ **Fixed bugs:**
8
+
9
+ - S-94608: Review Checkbox & Radio Button a11y issues [\#1575](https://github.com/digital-ai/dot-components/pull/1575) ([CWSites](https://github.com/CWSites))
10
+
11
+ **Misc:**
12
+
13
+ - S-91997: update aria-label on `DotProgress` [\#1574](https://github.com/digital-ai/dot-components/pull/1574) ([CWSites](https://github.com/CWSites))
14
+ - S-91994: a11y updates to Drawer [\#1573](https://github.com/digital-ai/dot-components/pull/1573) ([CWSites](https://github.com/CWSites))
15
+ - S-91996: adjust components with invalid child elements [\#1571](https://github.com/digital-ai/dot-components/pull/1571) ([CWSites](https://github.com/CWSites))
16
+
3
17
  ## [2.12.0](https://www.npmjs.com/package/@digital-ai/dot-components) (07/27/2023)
4
18
 
5
19
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.11.3...2.12.0)
@@ -378,10 +392,6 @@
378
392
 
379
393
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.3.0...2.3.1)
380
394
 
381
- **Features:**
382
-
383
- - S-90007 Expose ListboxComponent [\#1358](https://github.com/digital-ai/dot-components/pull/1358) ([angel-git](https://github.com/angel-git))
384
-
385
395
  **Fixed bugs:**
386
396
 
387
397
  - S-89896: Remove 'identity.' from host when constructing platform url [\#1379](https://github.com/digital-ai/dot-components/pull/1379) ([jmcnally](https://github.com/jmcnally))
@@ -399,12 +409,15 @@
399
409
 
400
410
  - CI: bumps version to 2.2.1 \[skip ci\] \(\#1371\) [\#1372](https://github.com/digital-ai/dot-components/pull/1372) ([CWSites](https://github.com/CWSites))
401
411
  - resolving more warnings [\#1369](https://github.com/digital-ai/dot-components/pull/1369) ([CWSites](https://github.com/CWSites))
402
- - Upload drip echo icon [\#1366](https://github.com/digital-ai/dot-components/pull/1366) ([pauldigitalai](https://github.com/pauldigitalai))
403
412
 
404
413
  ## [2.2.1](https://www.npmjs.com/package/@digital-ai/dot-components) (02/08/2023)
405
414
 
406
415
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.8...2.2.1)
407
416
 
417
+ **Features:**
418
+
419
+ - S-90007 Expose ListboxComponent [\#1358](https://github.com/digital-ai/dot-components/pull/1358) ([angel-git](https://github.com/angel-git))
420
+
408
421
  **Fixed bugs:**
409
422
 
410
423
  - S-90105 `DotAutoComplete`: fix `readOnly` input attribute [\#1357](https://github.com/digital-ai/dot-components/pull/1357) ([angel-git](https://github.com/angel-git))
@@ -416,6 +429,7 @@
416
429
  **Misc:**
417
430
 
418
431
  - GitHub Action Troubleshooting [\#1368](https://github.com/digital-ai/dot-components/pull/1368) ([CWSites](https://github.com/CWSites))
432
+ - Upload drip echo icon [\#1366](https://github.com/digital-ai/dot-components/pull/1366) ([pauldigitalai](https://github.com/pauldigitalai))
419
433
  - S-90007 Add missing test [\#1362](https://github.com/digital-ai/dot-components/pull/1362) ([angel-git](https://github.com/angel-git))
420
434
  - icons-pin-update-Jan-27th [\#1354](https://github.com/digital-ai/dot-components/pull/1354) ([pauldigitalai](https://github.com/pauldigitalai))
421
435
 
@@ -557,7 +571,6 @@
557
571
  **Features:**
558
572
 
559
573
  - S-87871 Expose callback when sidebar collapses/expands [\#1274](https://github.com/digital-ai/dot-components/pull/1274) ([angel-git](https://github.com/angel-git))
560
- - S-87316 Add focus state for Inline Edit [\#1255](https://github.com/digital-ai/dot-components/pull/1255) ([nikolinadapic](https://github.com/nikolinadapic))
561
574
 
562
575
  **Fixed bugs:**
563
576
 
@@ -586,6 +599,10 @@
586
599
 
587
600
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.0.0-rc.1...1.21.2)
588
601
 
602
+ **Features:**
603
+
604
+ - S-87316 Add focus state for Inline Edit [\#1255](https://github.com/digital-ai/dot-components/pull/1255) ([nikolinadapic](https://github.com/nikolinadapic))
605
+
589
606
  **Fixed bugs:**
590
607
 
591
608
  - D-22241: `DotFileListItem`: fix focus states and expose `onKeyPress` [\#1254](https://github.com/digital-ai/dot-components/pull/1254) ([dmiletic85](https://github.com/dmiletic85))
@@ -671,6 +688,7 @@
671
688
  **Features:**
672
689
 
673
690
  - S-85293: `SplitButton` Improvements [\#1201](https://github.com/digital-ai/dot-components/pull/1201) ([dmiletic85](https://github.com/dmiletic85))
691
+ - S-85283: `InlineEdit` component should provide a tooltip out the box [\#1181](https://github.com/digital-ai/dot-components/pull/1181) ([dmiletic85](https://github.com/dmiletic85))
674
692
 
675
693
  **Fixed bugs:**
676
694
 
@@ -702,7 +720,6 @@
702
720
  **Features:**
703
721
 
704
722
  - S-84117: As a customer admin, I want the IdP creation flow to be more intuitive, as I find the existing user flow a little overwhelming [\#1185](https://github.com/digital-ai/dot-components/pull/1185) ([ryangamble](https://github.com/ryangamble))
705
- - S-85283: `InlineEdit` component should provide a tooltip out the box [\#1181](https://github.com/digital-ai/dot-components/pull/1181) ([dmiletic85](https://github.com/dmiletic85))
706
723
 
707
724
  **Fixed bugs:**
708
725
 
@@ -713,10 +730,6 @@
713
730
 
714
731
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.17.0...1.17.1)
715
732
 
716
- **Fixed bugs:**
717
-
718
- - D-21287: `DotButtonToggle`: Button size is not respected after tooltip change [\#1171](https://github.com/digital-ai/dot-components/pull/1171) ([dmiletic85](https://github.com/dmiletic85))
719
-
720
733
  ## [1.17.0](https://www.npmjs.com/package/@digital-ai/dot-components) (05/18/2022)
721
734
 
722
735
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.16.1...1.17.0)
@@ -727,6 +740,7 @@
727
740
 
728
741
  **Fixed bugs:**
729
742
 
743
+ - D-21287: `DotButtonToggle`: Button size is not respected after tooltip change [\#1171](https://github.com/digital-ai/dot-components/pull/1171) ([dmiletic85](https://github.com/dmiletic85))
730
744
  - D-21265: `helperText` on input fields shouldn't be bold [\#1167](https://github.com/digital-ai/dot-components/pull/1167) ([dmiletic85](https://github.com/dmiletic85))
731
745
 
732
746
  **Misc:**
@@ -1026,7 +1040,6 @@
1026
1040
 
1027
1041
  **Features:**
1028
1042
 
1029
- - S-80939: `Menu`: Add option to customize item's height [\#902](https://github.com/digital-ai/dot-components/pull/902) ([dmiletic85](https://github.com/dmiletic85))
1030
1043
  - S-77210: Component - Drawer [\#893](https://github.com/digital-ai/dot-components/pull/893) ([monapatel91](https://github.com/monapatel91))
1031
1044
 
1032
1045
  **Fixed bugs:**
@@ -1037,7 +1050,6 @@
1037
1050
  - D-19378: `AutoComplete` doesn't have `required` property [\#914](https://github.com/digital-ai/dot-components/pull/914) ([dmiletic85](https://github.com/dmiletic85))
1038
1051
  - D-19376: `Menu`: `maxVisibleItems` prop does not control visible items anymore [\#911](https://github.com/digital-ai/dot-components/pull/911) ([dmiletic85](https://github.com/dmiletic85))
1039
1052
  - D-19366: `Menu`: Circular dependency [\#909](https://github.com/digital-ai/dot-components/pull/909) ([dmiletic85](https://github.com/dmiletic85))
1040
- - D-19355: `Breadcrumbs`: invalid combination of props [\#907](https://github.com/digital-ai/dot-components/pull/907) ([dmiletic85](https://github.com/dmiletic85))
1041
1053
  - D-19129: `Table`: Cells in the Table component should be wrapped by `DotTypography` [\#900](https://github.com/digital-ai/dot-components/pull/900) ([dmiletic85](https://github.com/dmiletic85))
1042
1054
 
1043
1055
  ## [1.5.4](https://www.npmjs.com/package/@digital-ai/dot-components) (12/28/2021)
@@ -1046,11 +1058,13 @@
1046
1058
 
1047
1059
  **Features:**
1048
1060
 
1061
+ - S-80939: `Menu`: Add option to customize item's height [\#902](https://github.com/digital-ai/dot-components/pull/902) ([dmiletic85](https://github.com/dmiletic85))
1049
1062
  - S-80871: `Sidebar` Changes on back arrow [\#896](https://github.com/digital-ai/dot-components/pull/896) ([dmiletic85](https://github.com/dmiletic85))
1050
1063
  - S-80855: Display tooltip on last breadcrumb item \(on hover\) when it is clipped with ellipsis [\#883](https://github.com/digital-ai/dot-components/pull/883) ([dmiletic85](https://github.com/dmiletic85))
1051
1064
 
1052
1065
  **Fixed bugs:**
1053
1066
 
1067
+ - D-19355: `Breadcrumbs`: invalid combination of props [\#907](https://github.com/digital-ai/dot-components/pull/907) ([dmiletic85](https://github.com/dmiletic85))
1054
1068
  - D-19337: `List`: Circular dependency [\#897](https://github.com/digital-ai/dot-components/pull/897) ([dmiletic85](https://github.com/dmiletic85))
1055
1069
  - D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
1056
1070
  - D-19200: `List` Nested list drawer is not rendering correctly [\#869](https://github.com/digital-ai/dot-components/pull/869) ([dmiletic85](https://github.com/dmiletic85))
@@ -1481,7 +1495,6 @@
1481
1495
  - S-76838: address Sonarcloud code issues [\#608](https://github.com/digital-ai/dot-components/pull/608) ([CWSites](https://github.com/CWSites))
1482
1496
  - S-77317: Add 'height' prop to DotDrawer component [\#603](https://github.com/digital-ai/dot-components/pull/603) ([selsemore](https://github.com/selsemore))
1483
1497
  - Update GitHub prerelease [\#599](https://github.com/digital-ai/dot-components/pull/599) ([CWSites](https://github.com/CWSites))
1484
- - S-76917: remove progressionBoard styles from theme provider [\#597](https://github.com/digital-ai/dot-components/pull/597) ([CWSites](https://github.com/CWSites))
1485
1498
 
1486
1499
  ## [1.0.3](https://www.npmjs.com/package/@digital-ai/dot-components) (07/27/2021)
1487
1500
 
@@ -1491,12 +1504,17 @@
1491
1504
 
1492
1505
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.0.1...1.0.2)
1493
1506
 
1507
+ **Breaking changes:**
1508
+
1509
+ - S-76919: cleaning up props used with various form elements [\#606](https://github.com/digital-ai/dot-components/pull/606) ([CWSites](https://github.com/CWSites))
1510
+
1494
1511
  **Features:**
1495
1512
 
1496
1513
  - S-76914: optional prop for truncating accordion summary to one line [\#590](https://github.com/digital-ai/dot-components/pull/590) ([CWSites](https://github.com/CWSites))
1497
1514
 
1498
1515
  **Misc:**
1499
1516
 
1517
+ - S-76917: remove progressionBoard styles from theme provider [\#597](https://github.com/digital-ai/dot-components/pull/597) ([CWSites](https://github.com/CWSites))
1500
1518
  - S-76905: add disablePortal prop to SplitButton and set z-index for SplitButton menu [\#596](https://github.com/digital-ai/dot-components/pull/596) ([selsemore](https://github.com/selsemore))
1501
1519
  - S-76905: fix error upon selection of split button option with non-numeric key [\#595](https://github.com/digital-ai/dot-components/pull/595) ([selsemore](https://github.com/selsemore))
1502
1520
  - updating github workflow to default to patch release [\#593](https://github.com/digital-ai/dot-components/pull/593) ([CWSites](https://github.com/CWSites))
package/index.esm.js CHANGED
@@ -80,7 +80,7 @@ const DotIcon = ({
80
80
  role: _ariaRole
81
81
  }, {
82
82
  children: jsx("i", {
83
- "aria-label": ariaLabel || `${iconId} icon}`,
83
+ "aria-label": ariaLabel || `${iconId} icon`,
84
84
  className: `icon-${iconId} dot-i`,
85
85
  "data-testid": dataTestId && `${dataTestId}-i`,
86
86
  role: _ariaRole
@@ -1896,7 +1896,7 @@ const StyledList = styled(List).withConfig({
1896
1896
  componentId: "wxwqwr-0"
1897
1897
  })(["", ""], ({
1898
1898
  theme
1899
- }) => css(["&.", "{background:", ";.dot-icon{color:", ";}&.", " .", "{padding-left:", ";}.MuiListSubheader-root{padding:0;.MuiTypography-root{padding:", ";}}}"], rootClassName$Z, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), theme.spacing(1)));
1899
+ }) => css(["&.", "{background:", ";.dot-icon{color:", ";}&.", " .", "{padding-left:", ";}.", ".expandable{flex-direction:column;.MuiCollapse-root{padding-top:", ";margin-bottom:", ";}}.MuiListSubheader-root{padding:0;.MuiTypography-root{padding:", ";}}}"], rootClassName$Z, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), listItemRootClass, theme.spacing(1), theme.spacing(-1), theme.spacing(1)));
1900
1900
 
1901
1901
  const getChevronIcon = (nestedListType, isOpened) => {
1902
1902
  if (nestedListType !== 'expandable') {
@@ -1916,7 +1916,7 @@ const StyledListItem = styled(ListItem).withConfig({
1916
1916
  componentId: "sc-1fawh8v-0"
1917
1917
  })(["", ""], ({
1918
1918
  theme
1919
- }) => css(["&.", "{&.", "{padding:0;}p.MuiTypography-root{margin-bottom:0;}.", "{align-items:center;display:flex;flex-grow:2;}.", " .MuiIcon-root{margin-right:", ";}.dot-icon i:before{color:", ";}}"], listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary));
1919
+ }) => css(["&.", "{&.", "{padding:0;}.dot-tooltip{display:flex;width:100%;}p.MuiTypography-root{flex-grow:2;margin-bottom:0;}.", "{align-items:center;display:flex;flex-grow:2;}.", " .MuiIcon-root{margin-right:", ";}.dot-icon i:before{color:", ";}}"], listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary));
1920
1920
 
1921
1921
  const rootClassName$Y = 'dot-progress';
1922
1922
  const StyledCircularProgress = styled(CircularProgress).withConfig({
@@ -1936,11 +1936,16 @@ const DotProgress = ({
1936
1936
  variant: _variant = 'indeterminate'
1937
1937
  }) => {
1938
1938
  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
1939
+ useEffect(() => {
1940
+ if (!ariaLabel) {
1941
+ console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
1942
+ }
1943
+ }, []);
1939
1944
  return jsx(DotTooltip, Object.assign({
1940
1945
  title: _tooltip
1941
1946
  }, {
1942
1947
  children: jsx(StyledCircularProgress, {
1943
- "aria-label": ariaLabel,
1948
+ "aria-label": ariaLabel || _tooltip,
1944
1949
  classes: {
1945
1950
  root: rootClasses
1946
1951
  },
@@ -2376,7 +2381,8 @@ const DotDrawerHeader = ({
2376
2381
  "aria-level": 2,
2377
2382
  className: rootClasses,
2378
2383
  "data-testid": dataTestId,
2379
- role: "heading"
2384
+ role: "heading",
2385
+ tabIndex: -1
2380
2386
  }, {
2381
2387
  children: [children, variant !== 'permanent' && jsx(DotIconButton, {
2382
2388
  ariaLabel: "close drawer",
@@ -2547,10 +2553,12 @@ const DotListDivider = ({
2547
2553
  }), void 0)
2548
2554
  }), void 0);
2549
2555
  }
2550
- return jsx(Divider, {
2551
- "aria-hidden": true,
2552
- "data-testid": `divider-${index}`,
2553
- role: "separator"
2556
+ return jsx("li", {
2557
+ children: jsx(Divider, {
2558
+ "aria-hidden": true,
2559
+ "data-testid": `divider-${index}`,
2560
+ role: "separator"
2561
+ }, void 0)
2554
2562
  }, void 0);
2555
2563
  };
2556
2564
  const DotList = ({
@@ -2671,7 +2679,7 @@ const DotListItem = ({
2671
2679
  const isFlyout = nestedListType === 'menu' && hasChildren;
2672
2680
  const [anchorEl, setAnchorEl] = useState(null);
2673
2681
  const showEndIcon = endIcon || hasChildren;
2674
- const rootClasses = useStylesWithRootClass(listItemRootClass, className, isOpened ? 'open' : '');
2682
+ const rootClasses = useStylesWithRootClass(listItemRootClass, className, nestedListType === 'expandable' && hasChildren ? 'expandable' : '', isOpened ? 'open' : '');
2675
2683
  const toggleOpen = event => setAnchorEl(event.currentTarget);
2676
2684
  const handleClick = event => {
2677
2685
  onClick === null || onClick === void 0 ? void 0 : onClick(event);
@@ -2694,47 +2702,55 @@ const DotListItem = ({
2694
2702
  }
2695
2703
  return endIcon;
2696
2704
  };
2697
- return jsxs(Fragment, {
2698
- children: [jsx(DotTooltip, Object.assign({
2699
- "data-testid": `${dataTestId}-tooltip`,
2700
- placement: _tooltipPlacement,
2701
- title: tooltip
2702
- }, {
2703
- children: jsxs(StyledListItem, Object.assign({
2704
- "aria-label": ariaLabel,
2705
- button: true,
2706
- classes: {
2707
- root: rootClasses
2708
- },
2709
- component: href && !onClick ? 'a' : _component2,
2710
- "data-testid": dataTestId,
2711
- divider: _divider,
2712
- href: onClick ? null : href,
2713
- onClick: onClick || !href ? handleClick : null,
2714
- role: onClick ? 'button' : _ariaRole2,
2715
- selected: isFlyout ? isOpened : selected,
2716
- target: target
2705
+ const renderListItemLink = jsxs(DotLink, Object.assign({
2706
+ href: href,
2707
+ className: listItemLinkClassName,
2708
+ underline: "none",
2709
+ target: target
2710
+ }, {
2711
+ children: [startIcon && jsx(ListItemIcon, {
2712
+ children: startIcon
2713
+ }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
2714
+ }), void 0);
2715
+ return jsx(StyledListItem, Object.assign({
2716
+ "aria-label": ariaLabel,
2717
+ button: true,
2718
+ classes: {
2719
+ root: rootClasses
2720
+ },
2721
+ component: _component2,
2722
+ "data-testid": dataTestId,
2723
+ divider: _divider,
2724
+ href: onClick ? null : href,
2725
+ onClick: onClick || !href ? handleClick : null,
2726
+ role: onClick ? 'button' : _ariaRole2,
2727
+ selected: isFlyout ? isOpened : selected,
2728
+ target: target
2729
+ }, {
2730
+ children: jsxs(Fragment, {
2731
+ children: [jsx(DotTooltip, Object.assign({
2732
+ "data-testid": `${dataTestId}-tooltip`,
2733
+ placement: _tooltipPlacement,
2734
+ title: tooltip
2717
2735
  }, {
2718
- children: [jsxs("span", Object.assign({
2719
- className: listItemLinkClassName
2720
- }, {
2736
+ children: href && !onClick ? renderListItemLink : jsxs(Fragment, {
2721
2737
  children: [startIcon && jsx(ListItemIcon, {
2722
2738
  children: startIcon
2723
- }, void 0), renderListItemText()]
2724
- }), void 0), showEndIcon && renderListItemEndIcon()]
2725
- }), void 0)
2726
- }), void 0), hasChildren && jsx(NestedList, {
2727
- anchorEl: anchorEl,
2728
- ariaLabel: "nested list",
2729
- "data-testid": "nestedList",
2730
- items: _items2,
2731
- menuPlacement: menuPlacement,
2732
- nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
2733
- onMenuLeave: handleMenuLeave,
2734
- open: isOpened,
2735
- type: nestedListType
2736
- }, void 0)]
2737
- }, void 0);
2739
+ }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
2740
+ }, void 0)
2741
+ }), void 0), hasChildren && jsx(NestedList, {
2742
+ anchorEl: anchorEl,
2743
+ ariaLabel: "nested list",
2744
+ "data-testid": "nestedList",
2745
+ items: _items2,
2746
+ menuPlacement: menuPlacement,
2747
+ nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
2748
+ onMenuLeave: handleMenuLeave,
2749
+ open: isOpened,
2750
+ type: nestedListType
2751
+ }, void 0)]
2752
+ }, void 0)
2753
+ }), void 0);
2738
2754
  };
2739
2755
  const NestedList = ({
2740
2756
  ariaLabel,
@@ -2777,17 +2793,17 @@ const NestedList = ({
2777
2793
  text
2778
2794
  } = item;
2779
2795
  return {
2780
- children: jsx(DotTooltip, Object.assign({
2781
- placement: tooltipPlacement,
2782
- title: tooltip
2796
+ children: jsx(StyledListItem, Object.assign({
2797
+ className: flyoutItemClasses,
2798
+ component: href && !onClick ? 'a' : null,
2799
+ "data-testid": `${dataTestId}-item-${index}`,
2800
+ href: href,
2801
+ onClick: onClick,
2802
+ target: target
2783
2803
  }, {
2784
- children: jsx(StyledListItem, Object.assign({
2785
- className: flyoutItemClasses,
2786
- component: href && !onClick ? 'a' : null,
2787
- "data-testid": `${dataTestId}-item-${index}`,
2788
- href: href,
2789
- onClick: onClick,
2790
- target: target
2804
+ children: jsx(DotTooltip, Object.assign({
2805
+ placement: tooltipPlacement,
2806
+ title: tooltip
2791
2807
  }, {
2792
2808
  children: jsxs("span", Object.assign({
2793
2809
  className: flyoutSpanClasses
@@ -2798,8 +2814,8 @@ const NestedList = ({
2798
2814
  children: text
2799
2815
  }), void 0)]
2800
2816
  }), void 0)
2801
- }), `${parentItemIndex}-${index}`)
2802
- }), `${parentItemIndex}-${index}-tooltip`),
2817
+ }), `${parentItemIndex}-${index}-tooltip`)
2818
+ }), `${parentItemIndex}-${index}`),
2803
2819
  classes: '',
2804
2820
  key: String(index)
2805
2821
  };
@@ -6307,7 +6323,7 @@ const DotProgressButton = ({
6307
6323
  const titleClasses = useStylesWithRootClass(_isLoading ? 'hidden' : '');
6308
6324
  const progressCircleSize = _size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
6309
6325
  return jsxs(StyledProgressButton, Object.assign({
6310
- ariaLabel: ariaLabel,
6326
+ ariaLabel: ariaLabel || tooltip,
6311
6327
  className: rootClasses,
6312
6328
  "data-testid": dataTestId,
6313
6329
  disableRipple: _disableRipple,
@@ -6339,7 +6355,7 @@ const StyledRadioButton = styled(Radio).withConfig({
6339
6355
 
6340
6356
  function DotRadioButton({
6341
6357
  ariaLabel,
6342
- checked = false,
6358
+ checked,
6343
6359
  className,
6344
6360
  'data-testid': dataTestId,
6345
6361
  disabled,
@@ -6359,7 +6375,7 @@ function DotRadioButton({
6359
6375
  };
6360
6376
  // a11y: role doesn't need to be specified because it is done so automatically by the MUI component
6361
6377
  const radioControl = jsx(StyledRadioButton, {
6362
- "aria-label": ariaLabel || label,
6378
+ "aria-checked": checked,
6363
6379
  checked: checked,
6364
6380
  classes: {
6365
6381
  root: rootClassName$r
@@ -6505,6 +6521,8 @@ const DotSwitch = ({
6505
6521
  const handleChange = event => {
6506
6522
  onChange && onChange(event);
6507
6523
  };
6524
+ // TODO: Future version of MUI v6 will have proper role="switch" instead of role="checkbox"
6525
+ // https://github.com/mui/material-ui/pull/17870
6508
6526
  const switchControl = jsx(StyledSwitch, {
6509
6527
  checked: checked,
6510
6528
  classes: {
@@ -9560,9 +9578,8 @@ const StyledDraggableList = styled.div.withConfig({
9560
9578
  componentId: "sc-1nekees-0"
9561
9579
  })(["", ""], ({
9562
9580
  theme,
9563
- width,
9564
9581
  draggableHandle
9565
- }) => css(["&.", " .", "{width:", " !important;.dot-icon{color:", ";}&.react-draggable-dragging{background-color:", ";}&.with-default-cursor{cursor:default;}&.with-handle-grab-cursor ", "{cursor:grab;}}"], rootClassName$3, listItemClassName, width, theme.palette.layer.n700, theme.palette.grey[50], draggableHandle));
9582
+ }) => css(["&.", "{padding:", ";.", "{.dot-icon{color:", ";}&.react-draggable-dragging{background-color:", ";}&.with-default-cursor{cursor:default;}&.with-handle-grab-cursor ", "{cursor:grab;}}}"], rootClassName$3, theme.spacing(1, 0), listItemClassName, theme.palette.layer.n700, theme.palette.grey[50], draggableHandle));
9566
9583
 
9567
9584
  const getOrderedListItems = (layout, listItems) => {
9568
9585
  if (!listItems || !layout) return [];
@@ -9617,35 +9634,34 @@ const DotDraggableList = ({
9617
9634
  draggableHandle: draggableHandle,
9618
9635
  width: listWidth
9619
9636
  }, {
9620
- children: jsx(List, Object.assign({
9621
- "data-testid": dataTestId && `${dataTestId}-ul`,
9637
+ children: jsx(ListGridLayout, Object.assign({
9638
+ className: "layout",
9639
+ draggableHandle: draggableHandle,
9640
+ isDraggable: !disableDrag,
9641
+ layout: getListItemLayout(orderedItems),
9642
+ cols: 1,
9643
+ margin: [0, 0],
9644
+ onLayoutChange: onChange && handleLayoutChange(),
9645
+ rowHeight: _rowHeight,
9622
9646
  style: {
9623
9647
  width: listWidth
9624
9648
  }
9625
9649
  }, {
9626
- children: jsx(ListGridLayout, Object.assign({
9627
- className: "layout",
9628
- draggableHandle: draggableHandle,
9629
- isDraggable: !disableDrag,
9630
- layout: getListItemLayout(orderedItems),
9631
- cols: 1,
9632
- margin: [0, 0],
9633
- onLayoutChange: onChange && handleLayoutChange(),
9634
- rowHeight: _rowHeight
9635
- }, {
9636
- children: orderedItems.map(({
9637
- id: itemId,
9638
- children
9639
- }) => {
9640
- return jsx(ListItem, {
9641
- "data-testid": dataTestId && `${dataTestId}-item`,
9642
- button: true,
9643
- children: renderNodeOrTypography(children),
9644
- className: listItemClasses,
9645
- disableRipple: true
9646
- }, itemId);
9647
- })
9648
- }), void 0)
9650
+ children: orderedItems.map(({
9651
+ id: itemId,
9652
+ children
9653
+ }) => {
9654
+ return jsx(ListItem, {
9655
+ "data-testid": dataTestId && `${dataTestId}-item`,
9656
+ button: true,
9657
+ children: renderNodeOrTypography(children),
9658
+ className: listItemClasses,
9659
+ disableRipple: true,
9660
+ style: {
9661
+ width: listWidth
9662
+ }
9663
+ }, itemId);
9664
+ })
9649
9665
  }), void 0)
9650
9666
  }), void 0);
9651
9667
  };
package/index.umd.js CHANGED
@@ -214,7 +214,7 @@
214
214
  role: ariaRole
215
215
  }, {
216
216
  children: jsxRuntime.jsx("i", {
217
- "aria-label": ariaLabel || iconId + " icon}",
217
+ "aria-label": ariaLabel || iconId + " icon",
218
218
  className: "icon-" + iconId + " dot-i",
219
219
  "data-testid": dataTestId && dataTestId + "-i",
220
220
  role: ariaRole
@@ -2141,7 +2141,7 @@
2141
2141
  componentId: "wxwqwr-0"
2142
2142
  })(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2143
2143
  var theme = _a.theme;
2144
- return styled.css(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n &.", " {\n background: ", ";\n\n .dot-icon {\n color: ", ";\n }\n\n &.", " .", " {\n padding-left: ", ";\n }\n\n .MuiListSubheader-root {\n padding: 0;\n\n .MuiTypography-root {\n padding: ", ";\n }\n }\n }\n "], ["\n &.", " {\n background: ", ";\n\n .dot-icon {\n color: ", ";\n }\n\n &.", " .", " {\n padding-left: ", ";\n }\n\n .MuiListSubheader-root {\n padding: 0;\n\n .MuiTypography-root {\n padding: ", ";\n }\n }\n }\n "])), rootClassName$Z, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), theme.spacing(1));
2144
+ return styled.css(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n &.", " {\n background: ", ";\n\n .dot-icon {\n color: ", ";\n }\n\n &.", " .", " {\n padding-left: ", ";\n }\n\n .", ".expandable {\n flex-direction: column;\n\n .MuiCollapse-root {\n padding-top: ", ";\n margin-bottom: ", ";\n }\n }\n\n .MuiListSubheader-root {\n padding: 0;\n\n .MuiTypography-root {\n padding: ", ";\n }\n }\n }\n "], ["\n &.", " {\n background: ", ";\n\n .dot-icon {\n color: ", ";\n }\n\n &.", " .", " {\n padding-left: ", ";\n }\n\n .", ".expandable {\n flex-direction: column;\n\n .MuiCollapse-root {\n padding-top: ", ";\n margin-bottom: ", ";\n }\n }\n\n .MuiListSubheader-root {\n padding: 0;\n\n .MuiTypography-root {\n padding: ", ";\n }\n }\n }\n "])), rootClassName$Z, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), listItemRootClass, theme.spacing(1), theme.spacing(-1), theme.spacing(1));
2145
2145
  });
2146
2146
  var templateObject_1$12, templateObject_2$_;
2147
2147
 
@@ -2163,7 +2163,7 @@
2163
2163
  componentId: "sc-1fawh8v-0"
2164
2164
  })(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2165
2165
  var theme = _a.theme;
2166
- return styled.css(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n &.", " {\n &.", " {\n padding: 0;\n }\n\n p.MuiTypography-root {\n margin-bottom: 0;\n }\n\n .", " {\n align-items: center;\n display: flex;\n flex-grow: 2;\n }\n\n .", " .MuiIcon-root {\n margin-right: ", ";\n }\n\n .dot-icon i:before {\n color: ", ";\n }\n }\n "], ["\n &.", " {\n &.", " {\n padding: 0;\n }\n\n p.MuiTypography-root {\n margin-bottom: 0;\n }\n\n .", " {\n align-items: center;\n display: flex;\n flex-grow: 2;\n }\n\n .", " .MuiIcon-root {\n margin-right: ", ";\n }\n\n .dot-icon i:before {\n color: ", ";\n }\n }\n "])), listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary);
2166
+ return styled.css(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n &.", " {\n &.", " {\n padding: 0;\n }\n\n .dot-tooltip {\n display: flex;\n width: 100%;\n }\n\n p.MuiTypography-root {\n flex-grow: 2;\n margin-bottom: 0;\n }\n\n .", " {\n align-items: center;\n display: flex;\n flex-grow: 2;\n }\n\n .", " .MuiIcon-root {\n margin-right: ", ";\n }\n\n .dot-icon i:before {\n color: ", ";\n }\n }\n "], ["\n &.", " {\n &.", " {\n padding: 0;\n }\n\n .dot-tooltip {\n display: flex;\n width: 100%;\n }\n\n p.MuiTypography-root {\n flex-grow: 2;\n margin-bottom: 0;\n }\n\n .", " {\n align-items: center;\n display: flex;\n flex-grow: 2;\n }\n\n .", " .MuiIcon-root {\n margin-right: ", ";\n }\n\n .dot-icon i:before {\n color: ", ";\n }\n }\n "])), listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary);
2167
2167
  });
2168
2168
  var templateObject_1$11, templateObject_2$Z;
2169
2169
 
@@ -2190,11 +2190,16 @@
2190
2190
  _f = _a.variant,
2191
2191
  variant = _f === void 0 ? 'indeterminate' : _f;
2192
2192
  var rootClasses = useStylesWithRootClass(rootClassName$Y, className);
2193
+ React.useEffect(function () {
2194
+ if (!ariaLabel) {
2195
+ console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
2196
+ }
2197
+ }, []);
2193
2198
  return jsxRuntime.jsx(DotTooltip, __assign({
2194
2199
  title: tooltip
2195
2200
  }, {
2196
2201
  children: jsxRuntime.jsx(StyledCircularProgress, {
2197
- "aria-label": ariaLabel,
2202
+ "aria-label": ariaLabel || tooltip,
2198
2203
  classes: {
2199
2204
  root: rootClasses
2200
2205
  },
@@ -2669,7 +2674,8 @@
2669
2674
  "aria-level": 2,
2670
2675
  className: rootClasses,
2671
2676
  "data-testid": dataTestId,
2672
- role: "heading"
2677
+ role: "heading",
2678
+ tabIndex: -1
2673
2679
  }, {
2674
2680
  children: [children, variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
2675
2681
  ariaLabel: "close drawer",
@@ -2849,10 +2855,12 @@
2849
2855
  }), void 0)
2850
2856
  }), void 0);
2851
2857
  }
2852
- return jsxRuntime.jsx(material.Divider, {
2853
- "aria-hidden": true,
2854
- "data-testid": "divider-" + index,
2855
- role: "separator"
2858
+ return jsxRuntime.jsx("li", {
2859
+ children: jsxRuntime.jsx(material.Divider, {
2860
+ "aria-hidden": true,
2861
+ "data-testid": "divider-" + index,
2862
+ role: "separator"
2863
+ }, void 0)
2856
2864
  }, void 0);
2857
2865
  };
2858
2866
  var DotList = function DotList(_a) {
@@ -2989,7 +2997,7 @@
2989
2997
  anchorEl = _g[0],
2990
2998
  setAnchorEl = _g[1];
2991
2999
  var showEndIcon = endIcon || hasChildren;
2992
- var rootClasses = useStylesWithRootClass(listItemRootClass, className, isOpened ? 'open' : '');
3000
+ var rootClasses = useStylesWithRootClass(listItemRootClass, className, nestedListType === 'expandable' && hasChildren ? 'expandable' : '', isOpened ? 'open' : '');
2993
3001
  var toggleOpen = function toggleOpen(event) {
2994
3002
  return setAnchorEl(event.currentTarget);
2995
3003
  };
@@ -3018,47 +3026,55 @@
3018
3026
  }
3019
3027
  return endIcon;
3020
3028
  };
3021
- return jsxRuntime.jsxs(jsxRuntime.Fragment, {
3022
- children: [jsxRuntime.jsx(DotTooltip, __assign({
3023
- "data-testid": dataTestId + "-tooltip",
3024
- placement: tooltipPlacement,
3025
- title: tooltip
3026
- }, {
3027
- children: jsxRuntime.jsxs(StyledListItem, __assign({
3028
- "aria-label": ariaLabel,
3029
- button: true,
3030
- classes: {
3031
- root: rootClasses
3032
- },
3033
- component: href && !onClick ? 'a' : component,
3034
- "data-testid": dataTestId,
3035
- divider: divider,
3036
- href: onClick ? null : href,
3037
- onClick: onClick || !href ? handleClick : null,
3038
- role: onClick ? 'button' : ariaRole,
3039
- selected: isFlyout ? isOpened : selected,
3040
- target: target
3029
+ var renderListItemLink = jsxRuntime.jsxs(DotLink, __assign({
3030
+ href: href,
3031
+ className: listItemLinkClassName,
3032
+ underline: "none",
3033
+ target: target
3034
+ }, {
3035
+ children: [startIcon && jsxRuntime.jsx(material.ListItemIcon, {
3036
+ children: startIcon
3037
+ }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
3038
+ }), void 0);
3039
+ return jsxRuntime.jsx(StyledListItem, __assign({
3040
+ "aria-label": ariaLabel,
3041
+ button: true,
3042
+ classes: {
3043
+ root: rootClasses
3044
+ },
3045
+ component: component,
3046
+ "data-testid": dataTestId,
3047
+ divider: divider,
3048
+ href: onClick ? null : href,
3049
+ onClick: onClick || !href ? handleClick : null,
3050
+ role: onClick ? 'button' : ariaRole,
3051
+ selected: isFlyout ? isOpened : selected,
3052
+ target: target
3053
+ }, {
3054
+ children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
3055
+ children: [jsxRuntime.jsx(DotTooltip, __assign({
3056
+ "data-testid": dataTestId + "-tooltip",
3057
+ placement: tooltipPlacement,
3058
+ title: tooltip
3041
3059
  }, {
3042
- children: [jsxRuntime.jsxs("span", __assign({
3043
- className: listItemLinkClassName
3044
- }, {
3060
+ children: href && !onClick ? renderListItemLink : jsxRuntime.jsxs(jsxRuntime.Fragment, {
3045
3061
  children: [startIcon && jsxRuntime.jsx(material.ListItemIcon, {
3046
3062
  children: startIcon
3047
- }, void 0), renderListItemText()]
3048
- }), void 0), showEndIcon && renderListItemEndIcon()]
3049
- }), void 0)
3050
- }), void 0), hasChildren && jsxRuntime.jsx(NestedList, {
3051
- anchorEl: anchorEl,
3052
- ariaLabel: "nested list",
3053
- "data-testid": "nestedList",
3054
- items: items,
3055
- menuPlacement: menuPlacement,
3056
- nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
3057
- onMenuLeave: handleMenuLeave,
3058
- open: isOpened,
3059
- type: nestedListType
3060
- }, void 0)]
3061
- }, void 0);
3063
+ }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
3064
+ }, void 0)
3065
+ }), void 0), hasChildren && jsxRuntime.jsx(NestedList, {
3066
+ anchorEl: anchorEl,
3067
+ ariaLabel: "nested list",
3068
+ "data-testid": "nestedList",
3069
+ items: items,
3070
+ menuPlacement: menuPlacement,
3071
+ nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
3072
+ onMenuLeave: handleMenuLeave,
3073
+ open: isOpened,
3074
+ type: nestedListType
3075
+ }, void 0)]
3076
+ }, void 0)
3077
+ }), void 0);
3062
3078
  };
3063
3079
  var NestedList = function NestedList(_a) {
3064
3080
  var ariaLabel = _a.ariaLabel,
@@ -3099,17 +3115,17 @@
3099
3115
  tooltipPlacement = _a === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _a,
3100
3116
  text = item.text;
3101
3117
  return {
3102
- children: jsxRuntime.jsx(DotTooltip, __assign({
3103
- placement: tooltipPlacement,
3104
- title: tooltip
3118
+ children: jsxRuntime.jsx(StyledListItem, __assign({
3119
+ className: flyoutItemClasses,
3120
+ component: href && !onClick ? 'a' : null,
3121
+ "data-testid": dataTestId + "-item-" + index,
3122
+ href: href,
3123
+ onClick: onClick,
3124
+ target: target
3105
3125
  }, {
3106
- children: jsxRuntime.jsx(StyledListItem, __assign({
3107
- className: flyoutItemClasses,
3108
- component: href && !onClick ? 'a' : null,
3109
- "data-testid": dataTestId + "-item-" + index,
3110
- href: href,
3111
- onClick: onClick,
3112
- target: target
3126
+ children: jsxRuntime.jsx(DotTooltip, __assign({
3127
+ placement: tooltipPlacement,
3128
+ title: tooltip
3113
3129
  }, {
3114
3130
  children: jsxRuntime.jsxs("span", __assign({
3115
3131
  className: flyoutSpanClasses
@@ -3120,8 +3136,8 @@
3120
3136
  children: text
3121
3137
  }), void 0)]
3122
3138
  }), void 0)
3123
- }), parentItemIndex + "-" + index)
3124
- }), parentItemIndex + "-" + index + "-tooltip"),
3139
+ }), parentItemIndex + "-" + index + "-tooltip")
3140
+ }), parentItemIndex + "-" + index),
3125
3141
  classes: '',
3126
3142
  key: String(index)
3127
3143
  };
@@ -6866,7 +6882,7 @@
6866
6882
  var titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
6867
6883
  var progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
6868
6884
  return jsxRuntime.jsxs(StyledProgressButton, __assign({
6869
- ariaLabel: ariaLabel,
6885
+ ariaLabel: ariaLabel || tooltip,
6870
6886
  className: rootClasses,
6871
6887
  "data-testid": dataTestId,
6872
6888
  disableRipple: disableRipple,
@@ -6901,21 +6917,20 @@
6901
6917
 
6902
6918
  function DotRadioButton(_a) {
6903
6919
  var ariaLabel = _a.ariaLabel,
6904
- _b = _a.checked,
6905
- checked = _b === void 0 ? false : _b,
6920
+ checked = _a.checked,
6906
6921
  className = _a.className,
6907
6922
  dataTestId = _a["data-testid"],
6908
6923
  disabled = _a.disabled,
6909
6924
  id = _a.id,
6910
6925
  inputRef = _a.inputRef,
6911
6926
  label = _a.label,
6912
- _c = _a.labelPlacement,
6913
- labelPlacement = _c === void 0 ? 'end' : _c,
6927
+ _b = _a.labelPlacement,
6928
+ labelPlacement = _b === void 0 ? 'end' : _b,
6914
6929
  name = _a.name,
6915
6930
  onChange = _a.onChange,
6916
6931
  required = _a.required,
6917
- _d = _a.size,
6918
- size = _d === void 0 ? 'medium' : _d,
6932
+ _c = _a.size,
6933
+ size = _c === void 0 ? 'medium' : _c,
6919
6934
  value = _a.value;
6920
6935
  var rootClasses = useStylesWithRootClass(rootClassName$C, className);
6921
6936
  var handleChange = function handleChange(event) {
@@ -6923,7 +6938,7 @@
6923
6938
  };
6924
6939
  // a11y: role doesn't need to be specified because it is done so automatically by the MUI component
6925
6940
  var radioControl = jsxRuntime.jsx(StyledRadioButton, {
6926
- "aria-label": ariaLabel || label,
6941
+ "aria-checked": checked,
6927
6942
  checked: checked,
6928
6943
  classes: {
6929
6944
  root: rootClassName$r
@@ -7076,6 +7091,8 @@
7076
7091
  var handleChange = function handleChange(event) {
7077
7092
  onChange && onChange(event);
7078
7093
  };
7094
+ // TODO: Future version of MUI v6 will have proper role="switch" instead of role="checkbox"
7095
+ // https://github.com/mui/material-ui/pull/17870
7079
7096
  var switchControl = jsxRuntime.jsx(StyledSwitch, {
7080
7097
  checked: checked,
7081
7098
  classes: {
@@ -10398,9 +10415,8 @@
10398
10415
  componentId: "sc-1nekees-0"
10399
10416
  })(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
10400
10417
  var theme = _a.theme,
10401
- width = _a.width,
10402
10418
  draggableHandle = _a.draggableHandle;
10403
- return styled.css(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n &.", " .", " {\n width: ", " !important;\n\n .dot-icon {\n color: ", ";\n }\n\n &.react-draggable-dragging {\n background-color: ", ";\n }\n\n &.with-default-cursor {\n cursor: default;\n }\n\n &.with-handle-grab-cursor ", " {\n cursor: grab;\n }\n }\n "], ["\n &.", " .", " {\n width: ", " !important;\n\n .dot-icon {\n color: ", ";\n }\n\n &.react-draggable-dragging {\n background-color: ", ";\n }\n\n &.with-default-cursor {\n cursor: default;\n }\n\n &.with-handle-grab-cursor ", " {\n cursor: grab;\n }\n }\n "])), rootClassName$3, listItemClassName, width, theme.palette.layer.n700, theme.palette.grey[50], draggableHandle);
10419
+ return styled.css(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n &.", " {\n padding: ", ";\n\n .", " {\n .dot-icon {\n color: ", ";\n }\n\n &.react-draggable-dragging {\n background-color: ", ";\n }\n\n &.with-default-cursor {\n cursor: default;\n }\n\n &.with-handle-grab-cursor ", " {\n cursor: grab;\n }\n }\n }\n "], ["\n &.", " {\n padding: ", ";\n\n .", " {\n .dot-icon {\n color: ", ";\n }\n\n &.react-draggable-dragging {\n background-color: ", ";\n }\n\n &.with-default-cursor {\n cursor: default;\n }\n\n &.with-handle-grab-cursor ", " {\n cursor: grab;\n }\n }\n }\n "])), rootClassName$3, theme.spacing(1, 0), listItemClassName, theme.palette.layer.n700, theme.palette.grey[50], draggableHandle);
10404
10420
  });
10405
10421
  var templateObject_1$3, templateObject_2$2;
10406
10422
 
@@ -10472,34 +10488,33 @@
10472
10488
  draggableHandle: draggableHandle,
10473
10489
  width: listWidth
10474
10490
  }, {
10475
- children: jsxRuntime.jsx(material.List, __assign({
10476
- "data-testid": dataTestId && dataTestId + "-ul",
10491
+ children: jsxRuntime.jsx(ListGridLayout, __assign({
10492
+ className: "layout",
10493
+ draggableHandle: draggableHandle,
10494
+ isDraggable: !disableDrag,
10495
+ layout: getListItemLayout(orderedItems),
10496
+ cols: 1,
10497
+ margin: [0, 0],
10498
+ onLayoutChange: onChange && handleLayoutChange(),
10499
+ rowHeight: rowHeight,
10477
10500
  style: {
10478
10501
  width: listWidth
10479
10502
  }
10480
10503
  }, {
10481
- children: jsxRuntime.jsx(ListGridLayout, __assign({
10482
- className: "layout",
10483
- draggableHandle: draggableHandle,
10484
- isDraggable: !disableDrag,
10485
- layout: getListItemLayout(orderedItems),
10486
- cols: 1,
10487
- margin: [0, 0],
10488
- onLayoutChange: onChange && handleLayoutChange(),
10489
- rowHeight: rowHeight
10490
- }, {
10491
- children: orderedItems.map(function (_a) {
10492
- var itemId = _a.id,
10493
- children = _a.children;
10494
- return jsxRuntime.jsx(material.ListItem, {
10495
- "data-testid": dataTestId && dataTestId + "-item",
10496
- button: true,
10497
- children: renderNodeOrTypography(children),
10498
- className: listItemClasses,
10499
- disableRipple: true
10500
- }, itemId);
10501
- })
10502
- }), void 0)
10504
+ children: orderedItems.map(function (_a) {
10505
+ var itemId = _a.id,
10506
+ children = _a.children;
10507
+ return jsxRuntime.jsx(material.ListItem, {
10508
+ "data-testid": dataTestId && dataTestId + "-item",
10509
+ button: true,
10510
+ children: renderNodeOrTypography(children),
10511
+ className: listItemClasses,
10512
+ disableRipple: true,
10513
+ style: {
10514
+ width: listWidth
10515
+ }
10516
+ }, itemId);
10517
+ })
10503
10518
  }), void 0)
10504
10519
  }), void 0);
10505
10520
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digital-ai/dot-components",
3
- "version": "2.12.0",
3
+ "version": "2.12.1",
4
4
  "private": false,
5
5
  "license": "SEE LICENSE IN <LICENSE.md>",
6
6
  "contributors": [