@digital-ai/dot-components 2.12.1 → 2.13.0

package/CHANGE_LOG.md

@@ -1,5 +1,18 @@
 # 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)
@@ -688,7 +701,6 @@
 **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:**
 
@@ -720,6 +732,7 @@
 **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:**
 
@@ -730,6 +743,10 @@
 
 [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)
@@ -740,7 +757,6 @@
 
 **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:**
@@ -1050,6 +1066,7 @@
 - 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)
@@ -1064,7 +1081,6 @@
 
 **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))
@@ -1169,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:**
@@ -1183,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))
@@ -1495,6 +1511,7 @@
 - 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)
 
@@ -1504,17 +1521,12 @@
 
 [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

@@ -2051,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;
 };
@@ -8844,6 +8843,7 @@ const DotTable = ({
   emptyMessage,
   footerTypography: _footerTypography = TABLE_TYPOGRAPHY_VARIANT,
   headerTypography: _headerTypography = TABLE_TYPOGRAPHY_VARIANT,
+  labelRowsPerPage,
   loading: _loading = false,
   maxHeight,
   multiSelect,
@@ -8853,6 +8853,7 @@ const DotTable = ({
   onUpdateData,
   page: _page = 0,
   rowsPerPage,
+  rowsPerPageOptions,
   stickyHeader: _stickyHeader = true,
   sortable: _sortable = true,
   toolbar
@@ -9007,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);
@@ -9058,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,

package/index.umd.js

@@ -2312,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;
     };
@@ -9600,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,
@@ -9612,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,
@@ -9777,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);
@@ -9828,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;
 

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.1",
+  "version": "2.13.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [