@digital-ai/dot-components 2.11.3 → 2.12.1

package/CHANGE_LOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [2.12.1](https://www.npmjs.com/package/@digital-ai/dot-components) (08/07/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.12.0...2.12.1)
+
+**Fixed bugs:**
+
+- S-94608: Review Checkbox & Radio Button a11y issues [\#1575](https://github.com/digital-ai/dot-components/pull/1575) ([CWSites](https://github.com/CWSites))
+
+**Misc:**
+
+- S-91997: update aria-label on `DotProgress` [\#1574](https://github.com/digital-ai/dot-components/pull/1574) ([CWSites](https://github.com/CWSites))
+- S-91994: a11y updates to Drawer [\#1573](https://github.com/digital-ai/dot-components/pull/1573) ([CWSites](https://github.com/CWSites))
+- S-91996: adjust components with invalid child elements [\#1571](https://github.com/digital-ai/dot-components/pull/1571) ([CWSites](https://github.com/CWSites))
+
+## [2.12.0](https://www.npmjs.com/package/@digital-ai/dot-components) (07/27/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.11.3...2.12.0)
+
+**Features:**
+
+- S-94595: `DotTablePagination` improvements [\#1570](https://github.com/digital-ai/dot-components/pull/1570) ([dmiletic85](https://github.com/dmiletic85))
+
 ## [2.11.3](https://www.npmjs.com/package/@digital-ai/dot-components) (07/24/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.11.2...2.11.3)
@@ -666,6 +688,7 @@
 **Features:**
 
 - S-85293: `SplitButton` Improvements [\#1201](https://github.com/digital-ai/dot-components/pull/1201) ([dmiletic85](https://github.com/dmiletic85))
+- 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))
 
 **Fixed bugs:**
 
@@ -697,7 +720,6 @@
 **Features:**
 
 - 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))
-- 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))
 
 **Fixed bugs:**
 
@@ -708,10 +730,6 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.17.0...1.17.1)
 
-**Fixed bugs:**
-
-- 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))
-
 ## [1.17.0](https://www.npmjs.com/package/@digital-ai/dot-components) (05/18/2022)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.16.1...1.17.0)
@@ -722,6 +740,7 @@
 
 **Fixed bugs:**
 
+- 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))
 - 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))
 
 **Misc:**
@@ -952,7 +971,6 @@
 
 - D-19722: `Table`: Fix Storybook issues by refactoring Table's story. [\#974](https://github.com/digital-ai/dot-components/pull/974) ([dmiletic85](https://github.com/dmiletic85))
 - D-19713: Do not show alert banner close button if onClose not provided [\#973](https://github.com/digital-ai/dot-components/pull/973) ([selsemore](https://github.com/selsemore))
-- D-19474: DotDrawer fixes [\#939](https://github.com/digital-ai/dot-components/pull/939) ([selsemore](https://github.com/selsemore))
 
 **Misc:**
 
@@ -997,6 +1015,7 @@
 **Fixed bugs:**
 
 - D-19520: `AppToolbar`: Unnecessary scrollbar on the menu [\#941](https://github.com/digital-ai/dot-components/pull/941) ([dmiletic85](https://github.com/dmiletic85))
+- D-19474: DotDrawer fixes [\#939](https://github.com/digital-ai/dot-components/pull/939) ([selsemore](https://github.com/selsemore))
 
 **Misc:**
 
@@ -1031,7 +1050,6 @@
 - D-19378: `AutoComplete` doesn't have `required` property [\#914](https://github.com/digital-ai/dot-components/pull/914) ([dmiletic85](https://github.com/dmiletic85))
 - 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))
 - D-19366: `Menu`: Circular dependency [\#909](https://github.com/digital-ai/dot-components/pull/909) ([dmiletic85](https://github.com/dmiletic85))
-- D-19355: `Breadcrumbs`: invalid combination of props [\#907](https://github.com/digital-ai/dot-components/pull/907) ([dmiletic85](https://github.com/dmiletic85))
 - 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))
 
 ## [1.5.4](https://www.npmjs.com/package/@digital-ai/dot-components) (12/28/2021)
@@ -1046,6 +1064,7 @@
 
 **Fixed bugs:**
 
+- D-19355: `Breadcrumbs`: invalid combination of props [\#907](https://github.com/digital-ai/dot-components/pull/907) ([dmiletic85](https://github.com/dmiletic85))
 - D-19337: `List`: Circular dependency [\#897](https://github.com/digital-ai/dot-components/pull/897) ([dmiletic85](https://github.com/dmiletic85))
 - D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
 - 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))
@@ -1364,10 +1383,6 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.0.9...1.0.10)
 
-**Features:**
-
-- S-78487: Add agility colors for Accordion, Pill and Tabs [\#661](https://github.com/digital-ai/dot-components/pull/661) ([angel-git](https://github.com/angel-git))
-
 **Fixed bugs:**
 
 - D-18424: include breadcrumb wrapper with breadcrumb component [\#675](https://github.com/digital-ai/dot-components/pull/675) ([CWSites](https://github.com/CWSites))
@@ -1381,6 +1396,10 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.0.8...1.0.9)
 
+**Features:**
+
+- S-78487: Add agility colors for Accordion, Pill and Tabs [\#661](https://github.com/digital-ai/dot-components/pull/661) ([angel-git](https://github.com/angel-git))
+
 **Fixed bugs:**
 
 - D-18730: action toolbar support [\#671](https://github.com/digital-ai/dot-components/pull/671) ([CWSites](https://github.com/CWSites))
@@ -1476,7 +1495,6 @@
 - S-76838: address Sonarcloud code issues [\#608](https://github.com/digital-ai/dot-components/pull/608) ([CWSites](https://github.com/CWSites))
 - S-77317: Add 'height' prop to DotDrawer component [\#603](https://github.com/digital-ai/dot-components/pull/603) ([selsemore](https://github.com/selsemore))
 - Update GitHub prerelease [\#599](https://github.com/digital-ai/dot-components/pull/599) ([CWSites](https://github.com/CWSites))
-- S-76917: remove progressionBoard styles from theme provider [\#597](https://github.com/digital-ai/dot-components/pull/597) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.3](https://www.npmjs.com/package/@digital-ai/dot-components) (07/27/2021)
 
@@ -1486,12 +1504,17 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.0.1...1.0.2)
 
+**Breaking changes:**
+
+- 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))
+
 **Features:**
 
 - 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))
 
 **Misc:**
 
+- S-76917: remove progressionBoard styles from theme provider [\#597](https://github.com/digital-ai/dot-components/pull/597) ([CWSites](https://github.com/CWSites))
 - 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))
 - 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))
 - 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

@@ -80,7 +80,7 @@ const DotIcon = ({
       role: _ariaRole
     }, {
       children: jsx("i", {
-        "aria-label": ariaLabel || `${iconId} icon}`,
+        "aria-label": ariaLabel || `${iconId} icon`,
         className: `icon-${iconId} dot-i`,
         "data-testid": dataTestId && `${dataTestId}-i`,
         role: _ariaRole
@@ -1896,7 +1896,7 @@ const StyledList = styled(List).withConfig({
   componentId: "wxwqwr-0"
 })(["", ""], ({
   theme
-}) => 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)));
+}) => 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)));
 
 const getChevronIcon = (nestedListType, isOpened) => {
   if (nestedListType !== 'expandable') {
@@ -1916,7 +1916,7 @@ const StyledListItem = styled(ListItem).withConfig({
   componentId: "sc-1fawh8v-0"
 })(["", ""], ({
   theme
-}) => 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));
+}) => 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));
 
 const rootClassName$Y = 'dot-progress';
 const StyledCircularProgress = styled(CircularProgress).withConfig({
@@ -1936,11 +1936,16 @@ const DotProgress = ({
   variant: _variant = 'indeterminate'
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
+  useEffect(() => {
+    if (!ariaLabel) {
+      console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
+    }
+  }, []);
   return jsx(DotTooltip, Object.assign({
     title: _tooltip
   }, {
     children: jsx(StyledCircularProgress, {
-      "aria-label": ariaLabel,
+      "aria-label": ariaLabel || _tooltip,
       classes: {
         root: rootClasses
       },
@@ -2376,7 +2381,8 @@ const DotDrawerHeader = ({
     "aria-level": 2,
     className: rootClasses,
     "data-testid": dataTestId,
-    role: "heading"
+    role: "heading",
+    tabIndex: -1
   }, {
     children: [children, variant !== 'permanent' && jsx(DotIconButton, {
       ariaLabel: "close drawer",
@@ -2547,10 +2553,12 @@ const DotListDivider = ({
       }), void 0)
     }), void 0);
   }
-  return jsx(Divider, {
-    "aria-hidden": true,
-    "data-testid": `divider-${index}`,
-    role: "separator"
+  return jsx("li", {
+    children: jsx(Divider, {
+      "aria-hidden": true,
+      "data-testid": `divider-${index}`,
+      role: "separator"
+    }, void 0)
   }, void 0);
 };
 const DotList = ({
@@ -2671,7 +2679,7 @@ const DotListItem = ({
   const isFlyout = nestedListType === 'menu' && hasChildren;
   const [anchorEl, setAnchorEl] = useState(null);
   const showEndIcon = endIcon || hasChildren;
-  const rootClasses = useStylesWithRootClass(listItemRootClass, className, isOpened ? 'open' : '');
+  const rootClasses = useStylesWithRootClass(listItemRootClass, className, nestedListType === 'expandable' && hasChildren ? 'expandable' : '', isOpened ? 'open' : '');
   const toggleOpen = event => setAnchorEl(event.currentTarget);
   const handleClick = event => {
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
@@ -2694,47 +2702,55 @@ const DotListItem = ({
     }
     return endIcon;
   };
-  return jsxs(Fragment, {
-    children: [jsx(DotTooltip, Object.assign({
-      "data-testid": `${dataTestId}-tooltip`,
-      placement: _tooltipPlacement,
-      title: tooltip
-    }, {
-      children: jsxs(StyledListItem, Object.assign({
-        "aria-label": ariaLabel,
-        button: true,
-        classes: {
-          root: rootClasses
-        },
-        component: href && !onClick ? 'a' : _component2,
-        "data-testid": dataTestId,
-        divider: _divider,
-        href: onClick ? null : href,
-        onClick: onClick || !href ? handleClick : null,
-        role: onClick ? 'button' : _ariaRole2,
-        selected: isFlyout ? isOpened : selected,
-        target: target
+  const renderListItemLink = jsxs(DotLink, Object.assign({
+    href: href,
+    className: listItemLinkClassName,
+    underline: "none",
+    target: target
+  }, {
+    children: [startIcon && jsx(ListItemIcon, {
+      children: startIcon
+    }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
+  }), void 0);
+  return jsx(StyledListItem, Object.assign({
+    "aria-label": ariaLabel,
+    button: true,
+    classes: {
+      root: rootClasses
+    },
+    component: _component2,
+    "data-testid": dataTestId,
+    divider: _divider,
+    href: onClick ? null : href,
+    onClick: onClick || !href ? handleClick : null,
+    role: onClick ? 'button' : _ariaRole2,
+    selected: isFlyout ? isOpened : selected,
+    target: target
+  }, {
+    children: jsxs(Fragment, {
+      children: [jsx(DotTooltip, Object.assign({
+        "data-testid": `${dataTestId}-tooltip`,
+        placement: _tooltipPlacement,
+        title: tooltip
       }, {
-        children: [jsxs("span", Object.assign({
-          className: listItemLinkClassName
-        }, {
+        children: href && !onClick ? renderListItemLink : jsxs(Fragment, {
           children: [startIcon && jsx(ListItemIcon, {
             children: startIcon
-          }, void 0), renderListItemText()]
-        }), void 0), showEndIcon && renderListItemEndIcon()]
-      }), void 0)
-    }), void 0), hasChildren && jsx(NestedList, {
-      anchorEl: anchorEl,
-      ariaLabel: "nested list",
-      "data-testid": "nestedList",
-      items: _items2,
-      menuPlacement: menuPlacement,
-      nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
-      onMenuLeave: handleMenuLeave,
-      open: isOpened,
-      type: nestedListType
-    }, void 0)]
-  }, void 0);
+          }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
+        }, void 0)
+      }), void 0), hasChildren && jsx(NestedList, {
+        anchorEl: anchorEl,
+        ariaLabel: "nested list",
+        "data-testid": "nestedList",
+        items: _items2,
+        menuPlacement: menuPlacement,
+        nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
+        onMenuLeave: handleMenuLeave,
+        open: isOpened,
+        type: nestedListType
+      }, void 0)]
+    }, void 0)
+  }), void 0);
 };
 const NestedList = ({
   ariaLabel,
@@ -2777,17 +2793,17 @@ const NestedList = ({
         text
       } = item;
       return {
-        children: jsx(DotTooltip, Object.assign({
-          placement: tooltipPlacement,
-          title: tooltip
+        children: jsx(StyledListItem, Object.assign({
+          className: flyoutItemClasses,
+          component: href && !onClick ? 'a' : null,
+          "data-testid": `${dataTestId}-item-${index}`,
+          href: href,
+          onClick: onClick,
+          target: target
         }, {
-          children: jsx(StyledListItem, Object.assign({
-            className: flyoutItemClasses,
-            component: href && !onClick ? 'a' : null,
-            "data-testid": `${dataTestId}-item-${index}`,
-            href: href,
-            onClick: onClick,
-            target: target
+          children: jsx(DotTooltip, Object.assign({
+            placement: tooltipPlacement,
+            title: tooltip
           }, {
             children: jsxs("span", Object.assign({
               className: flyoutSpanClasses
@@ -2798,8 +2814,8 @@ const NestedList = ({
                 children: text
               }), void 0)]
             }), void 0)
-          }), `${parentItemIndex}-${index}`)
-        }), `${parentItemIndex}-${index}-tooltip`),
+          }), `${parentItemIndex}-${index}-tooltip`)
+        }), `${parentItemIndex}-${index}`),
         classes: '',
         key: String(index)
       };
@@ -6307,7 +6323,7 @@ const DotProgressButton = ({
   const titleClasses = useStylesWithRootClass(_isLoading ? 'hidden' : '');
   const progressCircleSize = _size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
   return jsxs(StyledProgressButton, Object.assign({
-    ariaLabel: ariaLabel,
+    ariaLabel: ariaLabel || tooltip,
     className: rootClasses,
     "data-testid": dataTestId,
     disableRipple: _disableRipple,
@@ -6339,7 +6355,7 @@ const StyledRadioButton = styled(Radio).withConfig({
 
 function DotRadioButton({
   ariaLabel,
-  checked = false,
+  checked,
   className,
   'data-testid': dataTestId,
   disabled,
@@ -6359,7 +6375,7 @@ function DotRadioButton({
   };
   // a11y: role doesn't need to be specified because it is done so automatically by the MUI component
   const radioControl = jsx(StyledRadioButton, {
-    "aria-label": ariaLabel || label,
+    "aria-checked": checked,
     checked: checked,
     classes: {
       root: rootClassName$r
@@ -6505,6 +6521,8 @@ const DotSwitch = ({
   const handleChange = event => {
     onChange && onChange(event);
   };
+  // TODO: Future version of MUI v6 will have proper role="switch" instead of role="checkbox"
+  // https://github.com/mui/material-ui/pull/17870
   const switchControl = jsx(StyledSwitch, {
     checked: checked,
     classes: {
@@ -8139,10 +8157,12 @@ const DotTablePagination = ({
   className,
   count,
   'data-testid': dataTestId,
+  labelRowsPerPage,
   onPageChange,
   onRowsPerPageChange,
   page: _page = 0,
   rowsPerPage: _rowsPerPage = 10,
+  rowsPerPageOptions: _rowsPerPageOptions = [...ROWS_PER_PAGE_OPTIONS],
   typography: _typography = 'subtitle2'
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$h, className);
@@ -8170,11 +8190,12 @@ const DotTablePagination = ({
         component: "div",
         count: count,
         "data-testid": dataTestId,
+        labelRowsPerPage: labelRowsPerPage,
         onPageChange: handlePageChange,
         onRowsPerPageChange: handleChangeRowsPerPage,
         page: _page,
         rowsPerPage: _rowsPerPage,
-        rowsPerPageOptions: [...ROWS_PER_PAGE_OPTIONS]
+        rowsPerPageOptions: _rowsPerPageOptions
       }, void 0)
     }), void 0)
   );
@@ -9557,9 +9578,8 @@ const StyledDraggableList = styled.div.withConfig({
   componentId: "sc-1nekees-0"
 })(["", ""], ({
   theme,
-  width,
   draggableHandle
-}) => 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));
+}) => 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));
 
 const getOrderedListItems = (layout, listItems) => {
   if (!listItems || !layout) return [];
@@ -9614,35 +9634,34 @@ const DotDraggableList = ({
     draggableHandle: draggableHandle,
     width: listWidth
   }, {
-    children: jsx(List, Object.assign({
-      "data-testid": dataTestId && `${dataTestId}-ul`,
+    children: jsx(ListGridLayout, Object.assign({
+      className: "layout",
+      draggableHandle: draggableHandle,
+      isDraggable: !disableDrag,
+      layout: getListItemLayout(orderedItems),
+      cols: 1,
+      margin: [0, 0],
+      onLayoutChange: onChange && handleLayoutChange(),
+      rowHeight: _rowHeight,
       style: {
         width: listWidth
       }
     }, {
-      children: jsx(ListGridLayout, Object.assign({
-        className: "layout",
-        draggableHandle: draggableHandle,
-        isDraggable: !disableDrag,
-        layout: getListItemLayout(orderedItems),
-        cols: 1,
-        margin: [0, 0],
-        onLayoutChange: onChange && handleLayoutChange(),
-        rowHeight: _rowHeight
-      }, {
-        children: orderedItems.map(({
-          id: itemId,
-          children
-        }) => {
-          return jsx(ListItem, {
-            "data-testid": dataTestId && `${dataTestId}-item`,
-            button: true,
-            children: renderNodeOrTypography(children),
-            className: listItemClasses,
-            disableRipple: true
-          }, itemId);
-        })
-      }), void 0)
+      children: orderedItems.map(({
+        id: itemId,
+        children
+      }) => {
+        return jsx(ListItem, {
+          "data-testid": dataTestId && `${dataTestId}-item`,
+          button: true,
+          children: renderNodeOrTypography(children),
+          className: listItemClasses,
+          disableRipple: true,
+          style: {
+            width: listWidth
+          }
+        }, itemId);
+      })
     }), void 0)
   }), void 0);
 };

package/index.umd.js

@@ -214,7 +214,7 @@
           role: ariaRole
         }, {
           children: jsxRuntime.jsx("i", {
-            "aria-label": ariaLabel || iconId + " icon}",
+            "aria-label": ariaLabel || iconId + " icon",
             className: "icon-" + iconId + " dot-i",
             "data-testid": dataTestId && dataTestId + "-i",
             role: ariaRole
@@ -2141,7 +2141,7 @@
       componentId: "wxwqwr-0"
     })(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      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));
+      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));
     });
     var templateObject_1$12, templateObject_2$_;
 
@@ -2163,7 +2163,7 @@
       componentId: "sc-1fawh8v-0"
     })(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      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);
+      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);
     });
     var templateObject_1$11, templateObject_2$Z;
 
@@ -2190,11 +2190,16 @@
         _f = _a.variant,
         variant = _f === void 0 ? 'indeterminate' : _f;
       var rootClasses = useStylesWithRootClass(rootClassName$Y, className);
+      React.useEffect(function () {
+        if (!ariaLabel) {
+          console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
+        }
+      }, []);
       return jsxRuntime.jsx(DotTooltip, __assign({
         title: tooltip
       }, {
         children: jsxRuntime.jsx(StyledCircularProgress, {
-          "aria-label": ariaLabel,
+          "aria-label": ariaLabel || tooltip,
           classes: {
             root: rootClasses
           },
@@ -2669,7 +2674,8 @@
         "aria-level": 2,
         className: rootClasses,
         "data-testid": dataTestId,
-        role: "heading"
+        role: "heading",
+        tabIndex: -1
       }, {
         children: [children, variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
           ariaLabel: "close drawer",
@@ -2849,10 +2855,12 @@
           }), void 0)
         }), void 0);
       }
-      return jsxRuntime.jsx(material.Divider, {
-        "aria-hidden": true,
-        "data-testid": "divider-" + index,
-        role: "separator"
+      return jsxRuntime.jsx("li", {
+        children: jsxRuntime.jsx(material.Divider, {
+          "aria-hidden": true,
+          "data-testid": "divider-" + index,
+          role: "separator"
+        }, void 0)
       }, void 0);
     };
     var DotList = function DotList(_a) {
@@ -2989,7 +2997,7 @@
         anchorEl = _g[0],
         setAnchorEl = _g[1];
       var showEndIcon = endIcon || hasChildren;
-      var rootClasses = useStylesWithRootClass(listItemRootClass, className, isOpened ? 'open' : '');
+      var rootClasses = useStylesWithRootClass(listItemRootClass, className, nestedListType === 'expandable' && hasChildren ? 'expandable' : '', isOpened ? 'open' : '');
       var toggleOpen = function toggleOpen(event) {
         return setAnchorEl(event.currentTarget);
       };
@@ -3018,47 +3026,55 @@
         }
         return endIcon;
       };
-      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(DotTooltip, __assign({
-          "data-testid": dataTestId + "-tooltip",
-          placement: tooltipPlacement,
-          title: tooltip
-        }, {
-          children: jsxRuntime.jsxs(StyledListItem, __assign({
-            "aria-label": ariaLabel,
-            button: true,
-            classes: {
-              root: rootClasses
-            },
-            component: href && !onClick ? 'a' : component,
-            "data-testid": dataTestId,
-            divider: divider,
-            href: onClick ? null : href,
-            onClick: onClick || !href ? handleClick : null,
-            role: onClick ? 'button' : ariaRole,
-            selected: isFlyout ? isOpened : selected,
-            target: target
+      var renderListItemLink = jsxRuntime.jsxs(DotLink, __assign({
+        href: href,
+        className: listItemLinkClassName,
+        underline: "none",
+        target: target
+      }, {
+        children: [startIcon && jsxRuntime.jsx(material.ListItemIcon, {
+          children: startIcon
+        }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
+      }), void 0);
+      return jsxRuntime.jsx(StyledListItem, __assign({
+        "aria-label": ariaLabel,
+        button: true,
+        classes: {
+          root: rootClasses
+        },
+        component: component,
+        "data-testid": dataTestId,
+        divider: divider,
+        href: onClick ? null : href,
+        onClick: onClick || !href ? handleClick : null,
+        role: onClick ? 'button' : ariaRole,
+        selected: isFlyout ? isOpened : selected,
+        target: target
+      }, {
+        children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(DotTooltip, __assign({
+            "data-testid": dataTestId + "-tooltip",
+            placement: tooltipPlacement,
+            title: tooltip
           }, {
-            children: [jsxRuntime.jsxs("span", __assign({
-              className: listItemLinkClassName
-            }, {
+            children: href && !onClick ? renderListItemLink : jsxRuntime.jsxs(jsxRuntime.Fragment, {
               children: [startIcon && jsxRuntime.jsx(material.ListItemIcon, {
                 children: startIcon
-              }, void 0), renderListItemText()]
-            }), void 0), showEndIcon && renderListItemEndIcon()]
-          }), void 0)
-        }), void 0), hasChildren && jsxRuntime.jsx(NestedList, {
-          anchorEl: anchorEl,
-          ariaLabel: "nested list",
-          "data-testid": "nestedList",
-          items: items,
-          menuPlacement: menuPlacement,
-          nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
-          onMenuLeave: handleMenuLeave,
-          open: isOpened,
-          type: nestedListType
-        }, void 0)]
-      }, void 0);
+              }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
+            }, void 0)
+          }), void 0), hasChildren && jsxRuntime.jsx(NestedList, {
+            anchorEl: anchorEl,
+            ariaLabel: "nested list",
+            "data-testid": "nestedList",
+            items: items,
+            menuPlacement: menuPlacement,
+            nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
+            onMenuLeave: handleMenuLeave,
+            open: isOpened,
+            type: nestedListType
+          }, void 0)]
+        }, void 0)
+      }), void 0);
     };
     var NestedList = function NestedList(_a) {
       var ariaLabel = _a.ariaLabel,
@@ -3099,17 +3115,17 @@
             tooltipPlacement = _a === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _a,
             text = item.text;
           return {
-            children: jsxRuntime.jsx(DotTooltip, __assign({
-              placement: tooltipPlacement,
-              title: tooltip
+            children: jsxRuntime.jsx(StyledListItem, __assign({
+              className: flyoutItemClasses,
+              component: href && !onClick ? 'a' : null,
+              "data-testid": dataTestId + "-item-" + index,
+              href: href,
+              onClick: onClick,
+              target: target
             }, {
-              children: jsxRuntime.jsx(StyledListItem, __assign({
-                className: flyoutItemClasses,
-                component: href && !onClick ? 'a' : null,
-                "data-testid": dataTestId + "-item-" + index,
-                href: href,
-                onClick: onClick,
-                target: target
+              children: jsxRuntime.jsx(DotTooltip, __assign({
+                placement: tooltipPlacement,
+                title: tooltip
               }, {
                 children: jsxRuntime.jsxs("span", __assign({
                   className: flyoutSpanClasses
@@ -3120,8 +3136,8 @@
                     children: text
                   }), void 0)]
                 }), void 0)
-              }), parentItemIndex + "-" + index)
-            }), parentItemIndex + "-" + index + "-tooltip"),
+              }), parentItemIndex + "-" + index + "-tooltip")
+            }), parentItemIndex + "-" + index),
             classes: '',
             key: String(index)
           };
@@ -6866,7 +6882,7 @@
       var titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
       var progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
       return jsxRuntime.jsxs(StyledProgressButton, __assign({
-        ariaLabel: ariaLabel,
+        ariaLabel: ariaLabel || tooltip,
         className: rootClasses,
         "data-testid": dataTestId,
         disableRipple: disableRipple,
@@ -6901,21 +6917,20 @@
 
     function DotRadioButton(_a) {
       var ariaLabel = _a.ariaLabel,
-        _b = _a.checked,
-        checked = _b === void 0 ? false : _b,
+        checked = _a.checked,
         className = _a.className,
         dataTestId = _a["data-testid"],
         disabled = _a.disabled,
         id = _a.id,
         inputRef = _a.inputRef,
         label = _a.label,
-        _c = _a.labelPlacement,
-        labelPlacement = _c === void 0 ? 'end' : _c,
+        _b = _a.labelPlacement,
+        labelPlacement = _b === void 0 ? 'end' : _b,
         name = _a.name,
         onChange = _a.onChange,
         required = _a.required,
-        _d = _a.size,
-        size = _d === void 0 ? 'medium' : _d,
+        _c = _a.size,
+        size = _c === void 0 ? 'medium' : _c,
         value = _a.value;
       var rootClasses = useStylesWithRootClass(rootClassName$C, className);
       var handleChange = function handleChange(event) {
@@ -6923,7 +6938,7 @@
       };
       // a11y: role doesn't need to be specified because it is done so automatically by the MUI component
       var radioControl = jsxRuntime.jsx(StyledRadioButton, {
-        "aria-label": ariaLabel || label,
+        "aria-checked": checked,
         checked: checked,
         classes: {
           root: rootClassName$r
@@ -7076,6 +7091,8 @@
       var handleChange = function handleChange(event) {
         onChange && onChange(event);
       };
+      // TODO: Future version of MUI v6 will have proper role="switch" instead of role="checkbox"
+      // https://github.com/mui/material-ui/pull/17870
       var switchControl = jsxRuntime.jsx(StyledSwitch, {
         checked: checked,
         classes: {
@@ -8854,14 +8871,17 @@
         className = _a.className,
         count = _a.count,
         dataTestId = _a["data-testid"],
+        labelRowsPerPage = _a.labelRowsPerPage,
         onPageChange = _a.onPageChange,
         onRowsPerPageChange = _a.onRowsPerPageChange,
         _b = _a.page,
         page = _b === void 0 ? 0 : _b,
         _c = _a.rowsPerPage,
         rowsPerPage = _c === void 0 ? 10 : _c,
-        _d = _a.typography,
-        typography = _d === void 0 ? 'subtitle2' : _d;
+        _d = _a.rowsPerPageOptions,
+        rowsPerPageOptions = _d === void 0 ? __spreadArray([], ROWS_PER_PAGE_OPTIONS) : _d,
+        _e = _a.typography,
+        typography = _e === void 0 ? 'subtitle2' : _e;
       var rootClasses = useStylesWithRootClass(rootClassName$h, className);
       var handlePageChange = function handlePageChange(event, newPage) {
         onPageChange && onPageChange(newPage);
@@ -8887,11 +8907,12 @@
             component: "div",
             count: count,
             "data-testid": dataTestId,
+            labelRowsPerPage: labelRowsPerPage,
             onPageChange: handlePageChange,
             onRowsPerPageChange: handleChangeRowsPerPage,
             page: page,
             rowsPerPage: rowsPerPage,
-            rowsPerPageOptions: __spreadArray([], ROWS_PER_PAGE_OPTIONS)
+            rowsPerPageOptions: rowsPerPageOptions
           }, void 0)
         }), void 0)
       );
@@ -10394,9 +10415,8 @@
       componentId: "sc-1nekees-0"
     })(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
-        width = _a.width,
         draggableHandle = _a.draggableHandle;
-      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);
+      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);
     });
     var templateObject_1$3, templateObject_2$2;
 
@@ -10468,34 +10488,33 @@
         draggableHandle: draggableHandle,
         width: listWidth
       }, {
-        children: jsxRuntime.jsx(material.List, __assign({
-          "data-testid": dataTestId && dataTestId + "-ul",
+        children: jsxRuntime.jsx(ListGridLayout, __assign({
+          className: "layout",
+          draggableHandle: draggableHandle,
+          isDraggable: !disableDrag,
+          layout: getListItemLayout(orderedItems),
+          cols: 1,
+          margin: [0, 0],
+          onLayoutChange: onChange && handleLayoutChange(),
+          rowHeight: rowHeight,
           style: {
             width: listWidth
           }
         }, {
-          children: jsxRuntime.jsx(ListGridLayout, __assign({
-            className: "layout",
-            draggableHandle: draggableHandle,
-            isDraggable: !disableDrag,
-            layout: getListItemLayout(orderedItems),
-            cols: 1,
-            margin: [0, 0],
-            onLayoutChange: onChange && handleLayoutChange(),
-            rowHeight: rowHeight
-          }, {
-            children: orderedItems.map(function (_a) {
-              var itemId = _a.id,
-                children = _a.children;
-              return jsxRuntime.jsx(material.ListItem, {
-                "data-testid": dataTestId && dataTestId + "-item",
-                button: true,
-                children: renderNodeOrTypography(children),
-                className: listItemClasses,
-                disableRipple: true
-              }, itemId);
-            })
-          }), void 0)
+          children: orderedItems.map(function (_a) {
+            var itemId = _a.id,
+              children = _a.children;
+            return jsxRuntime.jsx(material.ListItem, {
+              "data-testid": dataTestId && dataTestId + "-item",
+              button: true,
+              children: renderNodeOrTypography(children),
+              className: listItemClasses,
+              disableRipple: true,
+              style: {
+                width: listWidth
+              }
+            }, itemId);
+          })
         }), void 0)
       }), void 0);
     };

package/lib/components/table/TablePagination.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 import { TypographyVariant } from '../typography/Typography';
 export declare const ROWS_PER_PAGE_OPTIONS: readonly [10, 25, 50, 100, 150, 200];
@@ -6,6 +6,8 @@ export declare type RowsPerPageOption = typeof ROWS_PER_PAGE_OPTIONS[number];
 export interface TablePaginationProps extends CommonProps {
     /** Total number of rows (-1 if unknown) */
     count: number;
+    /** Customize the rows per page label. Default is 'Rows per page:' */
+    labelRowsPerPage?: ReactNode;
     /** Callback fired when the page is changed */
     onPageChange: (newPage: number) => void;
     /** Callback fired when the number of rows per page is changed */
@@ -13,9 +15,11 @@ export interface TablePaginationProps extends CommonProps {
     /** The zero-based index of the current page */
     page?: number;
     /** The number of rows per page */
-    rowsPerPage?: RowsPerPageOption;
+    rowsPerPage?: number;
+    /** Customizes the options of the rows per page select field. Default: [10, 25, 50, 100, 150, 200] */
+    rowsPerPageOptions?: number[];
     /** Typography variant which will be used for pagination text */
     typography: TypographyVariant;
 }
 /** This component wraps the TablePagination component from @material-ui. */
-export declare const DotTablePagination: ({ ariaLabel, className, count, "data-testid": dataTestId, onPageChange, onRowsPerPageChange, page, rowsPerPage, typography, }: TablePaginationProps) => JSX.Element;
+export declare const DotTablePagination: ({ ariaLabel, className, count, "data-testid": dataTestId, labelRowsPerPage, onPageChange, onRowsPerPageChange, page, rowsPerPage, rowsPerPageOptions, typography, }: TablePaginationProps) => JSX.Element;

package/lib/components/table/TablePagination.stories.d.ts

@@ -1,5 +1,7 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { TablePaginationProps } from './TablePagination';
-declare const _default: ComponentMeta<({ ariaLabel, className, count, "data-testid": dataTestId, onPageChange, onRowsPerPageChange, page, rowsPerPage, typography, }: TablePaginationProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, className, count, "data-testid": dataTestId, labelRowsPerPage, onPageChange, onRowsPerPageChange, page, rowsPerPage, rowsPerPageOptions, typography, }: TablePaginationProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<TablePaginationProps>;
+export declare const WithCustomRowsPerPageOptions: any;
+export declare const WithCustomRowsPerPageLabel: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.11.3",
+  "version": "2.12.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [