@digital-ai/dot-components 2.11.2 → 2.12.0

package/CHANGE_LOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [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)
+
+**Fixed bugs:**
+
+- S-94066: Update avatar colors [\#1565](https://github.com/digital-ai/dot-components/pull/1565) ([CWSites](https://github.com/CWSites))
+
 ## [2.11.2](https://www.npmjs.com/package/@digital-ai/dot-components) (07/18/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.11.1...2.11.2)
@@ -39,7 +55,6 @@
 - S-84554: Update typography to latest Figma [\#1551](https://github.com/digital-ai/dot-components/pull/1551) ([CWSites](https://github.com/CWSites))
 - S-91993: Address a11y issues raised by Storybook [\#1549](https://github.com/digital-ai/dot-components/pull/1549) ([CWSites](https://github.com/CWSites))
 - D-25843: update dot-icons to be greater than 1.0.11 [\#1543](https://github.com/digital-ai/dot-components/pull/1543) ([CWSites](https://github.com/CWSites))
-- `master` \> `develop` [\#1532](https://github.com/digital-ai/dot-components/pull/1532) ([angel-git](https://github.com/angel-git))
 
 ## [1.21.12](https://www.npmjs.com/package/@digital-ai/dot-components) (07/14/2023)
 
@@ -63,6 +78,7 @@
 - S-91990: LinearProgress add aria-label [\#1537](https://github.com/digital-ai/dot-components/pull/1537) ([CWSites](https://github.com/CWSites))
 - S-91989: remove default aria-label, add link label to missing link [\#1536](https://github.com/digital-ai/dot-components/pull/1536) ([CWSites](https://github.com/CWSites))
 - S-91989: update link to have aria-label [\#1534](https://github.com/digital-ai/dot-components/pull/1534) ([CWSites](https://github.com/CWSites))
+- `master` \> `develop` [\#1532](https://github.com/digital-ai/dot-components/pull/1532) ([angel-git](https://github.com/angel-git))
 
 ## [2.10.1](https://www.npmjs.com/package/@digital-ai/dot-components) (06/29/2023)
 
@@ -362,6 +378,10 @@
 
 [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))
@@ -379,15 +399,12 @@
 
 - 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))
@@ -399,7 +416,6 @@
 **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))
 
@@ -541,6 +557,7 @@
 **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:**
 
@@ -569,10 +586,6 @@
 
 [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))
@@ -1013,6 +1026,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-77210: Component - Drawer [\#893](https://github.com/digital-ai/dot-components/pull/893) ([monapatel91](https://github.com/monapatel91))
 
 **Fixed bugs:**
@@ -1032,7 +1046,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-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))
 
@@ -1083,7 +1096,6 @@
 **Fixed bugs:**
 
 - D-19294: Fix broken expand/collapse for uncontrolled accordion [\#866](https://github.com/digital-ai/dot-components/pull/866) ([selsemore](https://github.com/selsemore))
-- \#841 Fix DotDynamicForm initial form state for controls with initialValue false [\#842](https://github.com/digital-ai/dot-components/pull/842) ([selsemore](https://github.com/selsemore))
 
 **Misc:**
 
@@ -1129,8 +1141,8 @@
 
 **Fixed bugs:**
 
+- \#841 Fix DotDynamicForm initial form state for controls with initialValue false [\#842](https://github.com/digital-ai/dot-components/pull/842) ([selsemore](https://github.com/selsemore))
 - D-19189: Extended sidenav drawer should collapse when another drawer option is clicked [\#830](https://github.com/digital-ai/dot-components/pull/830) ([dmiletic85](https://github.com/dmiletic85))
-- D-19148: Input elements not displaying correctly when `border-box` is used in consumer components [\#812](https://github.com/digital-ai/dot-components/pull/812) ([dmiletic85](https://github.com/dmiletic85))
 
 **Misc:**
 
@@ -1166,6 +1178,7 @@
 
 - \#795 Address AlertBanner style issues [\#815](https://github.com/digital-ai/dot-components/pull/815) ([angel-git](https://github.com/angel-git))
 - D-19138: Remove margin-bottom from breadcrumbs [\#813](https://github.com/digital-ai/dot-components/pull/813) ([angel-git](https://github.com/angel-git))
+- D-19148: Input elements not displaying correctly when `border-box` is used in consumer components [\#812](https://github.com/digital-ai/dot-components/pull/812) ([dmiletic85](https://github.com/dmiletic85))
 - \[D-18631\]\[D-18632\]\[D-18802\]:Focus state of avatar button and sidebar list item and inaccurate count of nav item [\#804](https://github.com/digital-ai/dot-components/pull/804) ([monapatel91](https://github.com/monapatel91))
 
 **Misc:**

package/index.esm.js

@@ -639,6 +639,10 @@ const avatarColors = {
     color: n700,
     backgroundColor: n100
   },
+  inherit: {
+    color: 'inherit',
+    backgroundColor: null
+  },
   green: {
     color: n0,
     backgroundColor: g500
@@ -672,8 +676,12 @@ const avatarColors = {
     backgroundColor: n200
   },
   transparent: {
-    color: n0,
+    color: n700,
     backgroundColor: 'transparent'
+  },
+  white: {
+    color: n700,
+    backgroundColor: n0
   }
 };
 const darkTheme = createTheme({
@@ -1627,7 +1635,7 @@ const StyledAvatar = styled(Avatar).withConfig({
 }, theme.palette.layer.n0, theme.palette.layer.n900, ({
   color
 }) => {
-  return color === 'default' ? theme.palette.layer.n700 : color && theme.palette.avatarColors[color] ? theme.palette.avatarColors[color].color : theme.palette.avatarColors['default'].color;
+  return color ? theme.palette.avatarColors[color].color : theme.palette.avatarColors['default'].color;
 }, theme.spacing(avatarSpacing.small), theme.spacing(avatarSpacing.small), theme.spacing(avatarSpacing.medium), theme.spacing(avatarSpacing.medium), theme.spacing(avatarSpacing.large), theme.spacing(avatarSpacing.large)));
 
 const AvatarContent = ({
@@ -1649,7 +1657,6 @@ const AvatarContent = ({
     }
   };
   const parsedText = () => {
-    if (!isString$1(text)) return;
     const textArray = text.split(' ');
     if (textArray.length > 1) {
       const firstInitial = textArray[0].slice(0, 1);
@@ -1699,6 +1706,7 @@ const DotAvatar = ({
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$10, className);
   const getAvatarColor = () => {
+    if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
     if (_text && _text !== alt) return getAvatarColorForInputText(_text);
     return 'default';
@@ -7952,7 +7960,8 @@ const DotStepper = ({
     }
     return isHorizontal ? jsx(DotAvatar, {
       alt: iconId,
-      iconId: stepIcon
+      iconId: stepIcon,
+      type: "icon"
     }, void 0) : jsx(DotIcon, {
       iconId: stepIcon
     }, void 0);
@@ -8130,10 +8139,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);
@@ -8161,11 +8172,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)
   );

package/index.umd.js

@@ -776,6 +776,10 @@
         color: n700,
         backgroundColor: n100
       },
+      inherit: {
+        color: 'inherit',
+        backgroundColor: null
+      },
       green: {
         color: n0,
         backgroundColor: g500
@@ -809,8 +813,12 @@
         backgroundColor: n200
       },
       transparent: {
-        color: n0,
+        color: n700,
         backgroundColor: 'transparent'
+      },
+      white: {
+        color: n700,
+        backgroundColor: n0
       }
     };
     var darkTheme = styles.createTheme({
@@ -1841,7 +1849,7 @@
         return color && theme.palette.avatarColors[color] ? theme.palette.avatarColors[color].backgroundColor : theme.palette.avatarColors['default'].backgroundColor;
       }, theme.palette.layer.n0, theme.palette.layer.n900, function (_a) {
         var color = _a.color;
-        return color === 'default' ? theme.palette.layer.n700 : color && theme.palette.avatarColors[color] ? theme.palette.avatarColors[color].color : theme.palette.avatarColors['default'].color;
+        return color ? theme.palette.avatarColors[color].color : theme.palette.avatarColors['default'].color;
       }, theme.spacing(avatarSpacing.small), theme.spacing(avatarSpacing.small), theme.spacing(avatarSpacing.medium), theme.spacing(avatarSpacing.medium), theme.spacing(avatarSpacing.large), theme.spacing(avatarSpacing.large));
     });
     var templateObject_1$15, templateObject_2$11;
@@ -1864,7 +1872,6 @@
         }
       };
       var parsedText = function parsedText() {
-        if (!isString$1(text)) return;
         var textArray = text.split(' ');
         if (textArray.length > 1) {
           var firstInitial = textArray[0].slice(0, 1);
@@ -1924,6 +1931,7 @@
         style = _a.style;
       var rootClasses = useStylesWithRootClass(rootClassName$10, className);
       var getAvatarColor = function getAvatarColor() {
+        if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
         if (color) return color;
         if (text && text !== alt) return getAvatarColorForInputText(text);
         return 'default';
@@ -8657,7 +8665,8 @@
         }
         return isHorizontal ? jsxRuntime.jsx(DotAvatar, {
           alt: iconId,
-          iconId: stepIcon
+          iconId: stepIcon,
+          type: "icon"
         }, void 0) : jsxRuntime.jsx(DotIcon, {
           iconId: stepIcon
         }, void 0);
@@ -8845,14 +8854,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);
@@ -8878,11 +8890,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)
       );

package/lib/components/avatar/Avatar.d.ts

@@ -3,7 +3,7 @@ import { CommonProps } from '../CommonProps';
 export declare type AvatarSize = 'small' | 'medium' | 'large';
 export declare type AvatarType = 'image' | 'text' | 'icon';
 export declare type AvatarVariant = 'circular' | 'square';
-export declare type AvatarColor = 'default' | 'green' | 'blue' | 'orange' | 'purple' | 'yellow' | 'red' | 'darkGrey' | 'lightGrey' | 'transparent';
+export declare type AvatarColor = 'default' | 'inherit' | 'green' | 'blue' | 'orange' | 'purple' | 'yellow' | 'red' | 'darkGrey' | 'lightGrey' | 'transparent' | 'white';
 export interface AvatarProps extends CommonProps {
     /** Text displayed on hover */
     alt: string;

package/lib/components/avatar/Avatar.stories.d.ts

@@ -4,5 +4,6 @@ declare const _default: ComponentMeta<({ alt, ariaLabel, ariaRole, className, co
 export default _default;
 export declare const Default: any;
 export declare const AvatarButton: any;
+export declare const WithCustomColor: any;
 export declare const WithNumber: any;
 export declare const WithTooltip: any;

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