@digital-ai/dot-components 2.12.0 → 2.13.0

package/CHANGE_LOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [2.13.0](https://www.npmjs.com/package/@digital-ai/dot-components) (08/13/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.12.1...2.13.0)
+
+**Features:**
+
+- S-95094: `DotTable` - Expose `rowsPerPageOptions` and `labelRowsPerPage` [\#1583](https://github.com/digital-ai/dot-components/pull/1583) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- D-26200: `DotMenu` has an extra empty space [\#1585](https://github.com/digital-ai/dot-components/pull/1585) ([dmiletic85](https://github.com/dmiletic85))
+- D-26197: `DotTable`, `DotTableActions`: Hovered action buttons are not displayed properly within list item [\#1584](https://github.com/digital-ai/dot-components/pull/1584) ([dmiletic85](https://github.com/dmiletic85))
+
+## [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)
@@ -378,10 +405,6 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.3.0...2.3.1)
 
-**Features:**
-
-- S-90007 Expose ListboxComponent [\#1358](https://github.com/digital-ai/dot-components/pull/1358) ([angel-git](https://github.com/angel-git))
-
 **Fixed bugs:**
 
 - 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 +422,15 @@
 
 - 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))
 - resolving more warnings [\#1369](https://github.com/digital-ai/dot-components/pull/1369) ([CWSites](https://github.com/CWSites))
-- Upload drip echo icon [\#1366](https://github.com/digital-ai/dot-components/pull/1366) ([pauldigitalai](https://github.com/pauldigitalai))
 
 ## [2.2.1](https://www.npmjs.com/package/@digital-ai/dot-components) (02/08/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.8...2.2.1)
 
+**Features:**
+
+- S-90007 Expose ListboxComponent [\#1358](https://github.com/digital-ai/dot-components/pull/1358) ([angel-git](https://github.com/angel-git))
+
 **Fixed bugs:**
 
 - 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 +442,7 @@
 **Misc:**
 
 - GitHub Action Troubleshooting [\#1368](https://github.com/digital-ai/dot-components/pull/1368) ([CWSites](https://github.com/CWSites))
+- Upload drip echo icon [\#1366](https://github.com/digital-ai/dot-components/pull/1366) ([pauldigitalai](https://github.com/pauldigitalai))
 - S-90007 Add missing test [\#1362](https://github.com/digital-ai/dot-components/pull/1362) ([angel-git](https://github.com/angel-git))
 - icons-pin-update-Jan-27th [\#1354](https://github.com/digital-ai/dot-components/pull/1354) ([pauldigitalai](https://github.com/pauldigitalai))
 
@@ -557,7 +584,6 @@
 **Features:**
 
 - 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))
-- S-87316 Add focus state for Inline Edit [\#1255](https://github.com/digital-ai/dot-components/pull/1255) ([nikolinadapic](https://github.com/nikolinadapic))
 
 **Fixed bugs:**
 
@@ -586,6 +612,10 @@
 
 [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)
 
+**Features:**
+
+- S-87316 Add focus state for Inline Edit [\#1255](https://github.com/digital-ai/dot-components/pull/1255) ([nikolinadapic](https://github.com/nikolinadapic))
+
 **Fixed bugs:**
 
 - D-22241: `DotFileListItem`: fix focus states and expose `onKeyPress` [\#1254](https://github.com/digital-ai/dot-components/pull/1254) ([dmiletic85](https://github.com/dmiletic85))
@@ -1026,7 +1056,6 @@
 
 **Features:**
 
-- 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))
 - S-77210: Component - Drawer [\#893](https://github.com/digital-ai/dot-components/pull/893) ([monapatel91](https://github.com/monapatel91))
 
 **Fixed bugs:**
@@ -1046,6 +1075,7 @@
 
 **Features:**
 
+- 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))
 - S-80871: `Sidebar` Changes on back arrow [\#896](https://github.com/digital-ai/dot-components/pull/896) ([dmiletic85](https://github.com/dmiletic85))
 - 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))
 
@@ -1155,7 +1185,6 @@
 
 **Features:**
 
-- S-80473: Expose onFocus and onBlur callbacks for DotInputText and DotInputSelect components [\#832](https://github.com/digital-ai/dot-components/pull/832) ([selsemore](https://github.com/selsemore))
 - S-80268: `DotDynamicForm` improvements [\#821](https://github.com/digital-ai/dot-components/pull/821) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
@@ -1169,6 +1198,7 @@
 
 **Features:**
 
+- S-80473: Expose onFocus and onBlur callbacks for DotInputText and DotInputSelect components [\#832](https://github.com/digital-ai/dot-components/pull/832) ([selsemore](https://github.com/selsemore))
 - S-80369: Create `ProgressButton` component [\#822](https://github.com/digital-ai/dot-components/pull/822) ([dmiletic85](https://github.com/dmiletic85))
 - S-79696: change size of collapse icon button, add tooltip [\#819](https://github.com/digital-ai/dot-components/pull/819) ([CWSites](https://github.com/CWSites))
 - S-80264: Agility wrapper sandbox documentation [\#810](https://github.com/digital-ai/dot-components/pull/810) ([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
       },
@@ -2046,8 +2051,7 @@ const calculateMaxHeight = ({
     height
   }) => {
     const customItemHeight = height ? height : itemHeight;
-    // + 3 is for bottom margin of menuItem
-    maxHeight += customItemHeight + 3;
+    maxHeight += customItemHeight;
   });
   return maxHeight;
 };
@@ -2376,7 +2380,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 +2552,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 +2678,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 +2701,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 +2792,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 +2813,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 +6322,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 +6354,7 @@ const StyledRadioButton = styled(Radio).withConfig({
 
 function DotRadioButton({
   ariaLabel,
-  checked = false,
+  checked,
   className,
   'data-testid': dataTestId,
   disabled,
@@ -6359,7 +6374,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 +6520,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: {
@@ -8826,6 +8843,7 @@ const DotTable = ({
   emptyMessage,
   footerTypography: _footerTypography = TABLE_TYPOGRAPHY_VARIANT,
   headerTypography: _headerTypography = TABLE_TYPOGRAPHY_VARIANT,
+  labelRowsPerPage,
   loading: _loading = false,
   maxHeight,
   multiSelect,
@@ -8835,6 +8853,7 @@ const DotTable = ({
   onUpdateData,
   page: _page = 0,
   rowsPerPage,
+  rowsPerPageOptions,
   stickyHeader: _stickyHeader = true,
   sortable: _sortable = true,
   toolbar
@@ -8989,10 +9008,12 @@ const DotTable = ({
       }), void 0)
     }), void 0), rowsPerPage && jsx(DotTablePagination, {
       count: getTotalCount(),
+      labelRowsPerPage: labelRowsPerPage,
       onPageChange: onPageChange,
       onRowsPerPageChange: onRowsPerPageChange,
       page: tablePage,
       rowsPerPage: tableRowsPerPage,
+      rowsPerPageOptions: rowsPerPageOptions,
       typography: _footerTypography
     }, void 0)]
   }), void 0);
@@ -9040,9 +9061,7 @@ const TableActionsContainer = styled.div.withConfig({
 const StyledMenu = styled(DotMenu).withConfig({
   displayName: "TableActionsstyles__StyledMenu",
   componentId: "sc-8lo813-1"
-})(["", ""], ({
-  theme
-}) => css(["&.dot-menu .table-menu-button{margin-left:0;padding-left:0;&:hover{background-color:", ";}}"], theme.palette.grey[50]));
+})(["", ""], () => css(["&.dot-menu .table-menu-button{margin-left:0;padding-left:0;&:hover{background-color:transparent;}}"]));
 
 const DotTableActions = ({
   actions,
@@ -9560,9 +9579,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 [];
@@ -9617,35 +9635,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
           },
@@ -2307,8 +2312,7 @@
       visibleItems.forEach(function (_a) {
         var height = _a.height;
         var customItemHeight = height ? height : itemHeight;
-        // + 3 is for bottom margin of menuItem
-        maxHeight += customItemHeight + 3;
+        maxHeight += customItemHeight;
       });
       return maxHeight;
     };
@@ -2669,7 +2673,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 +2854,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 +2996,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 +3025,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 +3114,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 +3135,8 @@
                     children: text
                   }), void 0)]
                 }), void 0)
-              }), parentItemIndex + "-" + index)
-            }), parentItemIndex + "-" + index + "-tooltip"),
+              }), parentItemIndex + "-" + index + "-tooltip")
+            }), parentItemIndex + "-" + index),
             classes: '',
             key: String(index)
           };
@@ -6866,7 +6881,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 +6916,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 +6937,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 +7090,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: {
@@ -9583,6 +9599,7 @@
         footerTypography = _c === void 0 ? TABLE_TYPOGRAPHY_VARIANT : _c,
         _d = _a.headerTypography,
         headerTypography = _d === void 0 ? TABLE_TYPOGRAPHY_VARIANT : _d,
+        labelRowsPerPage = _a.labelRowsPerPage,
         _e = _a.loading,
         loading = _e === void 0 ? false : _e,
         maxHeight = _a.maxHeight,
@@ -9595,6 +9612,7 @@
         _g = _a.page,
         page = _g === void 0 ? 0 : _g,
         rowsPerPage = _a.rowsPerPage,
+        rowsPerPageOptions = _a.rowsPerPageOptions,
         _h = _a.stickyHeader,
         stickyHeader = _h === void 0 ? true : _h,
         _j = _a.sortable,
@@ -9760,10 +9778,12 @@
           }), void 0)
         }), void 0), rowsPerPage && jsxRuntime.jsx(DotTablePagination, {
           count: getTotalCount(),
+          labelRowsPerPage: labelRowsPerPage,
           onPageChange: onPageChange,
           onRowsPerPageChange: onRowsPerPageChange,
           page: tablePage,
           rowsPerPage: tableRowsPerPage,
+          rowsPerPageOptions: rowsPerPageOptions,
           typography: footerTypography
         }, void 0)]
       }), void 0);
@@ -9811,9 +9831,8 @@
     var StyledMenu = styled__default["default"](DotMenu).withConfig({
       displayName: "TableActionsstyles__StyledMenu",
       componentId: "sc-8lo813-1"
-    })(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      var theme = _a.theme;
-      return styled.css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n    &.dot-menu .table-menu-button {\n      margin-left: 0;\n      padding-left: 0;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n  "], ["\n    &.dot-menu .table-menu-button {\n      margin-left: 0;\n      padding-left: 0;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n  "])), theme.palette.grey[50]);
+    })(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
+      return styled.css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n    &.dot-menu .table-menu-button {\n      margin-left: 0;\n      padding-left: 0;\n      &:hover {\n        background-color: transparent;\n      }\n    }\n  "], ["\n    &.dot-menu .table-menu-button {\n      margin-left: 0;\n      padding-left: 0;\n      &:hover {\n        background-color: transparent;\n      }\n    }\n  "])));
     });
     var templateObject_1$8, templateObject_2$7, templateObject_3$3;
 
@@ -10398,9 +10417,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;
 
@@ -10472,34 +10490,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/Table.d.ts

@@ -32,6 +32,8 @@ export interface TableProps extends CommonProps {
     footerTypography?: TypographyVariant;
     /** Typography variant which will be used for table header cell values **/
     headerTypography?: TypographyVariant;
+    /** Customize the rows per page label. Default is 'Rows per page:' */
+    labelRowsPerPage?: ReactNode;
     /** Table is loading */
     loading?: boolean;
     /** Maximum height of table container */
@@ -50,6 +52,8 @@ export interface TableProps extends CommonProps {
     page?: number;
     /** Rows per page for paginated table */
     rowsPerPage?: RowsPerPageOption;
+    /** Customizes the options of the rows per page select field. Default: [10, 25, 50, 100, 150, 200] */
+    rowsPerPageOptions?: number[];
     /** Table is sortable */
     sortable?: boolean;
     /** Table header is sticky */
@@ -64,4 +68,4 @@ export declare function stableSort<T>(array: T[], comparator: (order: T, orderBy
  * A wrapper component around the Table component from @material-ui. This component can be used for
  *  creating a common structure for tables in the system.
  */
-export declare const DotTable: ({ ariaLabel, bodyTypography, className, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element;
+export declare const DotTable: ({ ariaLabel, bodyTypography, className, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, labelRowsPerPage, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, rowsPerPageOptions, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { TableProps } from './Table';
-declare const _default: ComponentMeta<({ ariaLabel, bodyTypography, className, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, bodyTypography, className, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, labelRowsPerPage, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, rowsPerPageOptions, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story;
 export declare const LocallyPaginatedTable: Story;
@@ -8,3 +8,4 @@ export declare const RemotelyPaginatedTable: Story;
 export declare const WithActionMenu: Story;
 export declare const WithCheckboxSelection: Story;
 export declare const EmptyTable: Story;
+export declare const WithCustomPaginationOptions: Story;

package/package.json

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