@digital-ai/dot-components 2.15.1 → 2.15.2

package/CHANGE_LOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [2.15.2](https://www.npmjs.com/package/@digital-ai/dot-components) (09/25/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.15.1...2.15.2)
+
+**Fixed bugs:**
+
+- D-26652: Use ListItemButton in DotList [\#1618](https://github.com/digital-ai/dot-components/pull/1618) ([ryangamble](https://github.com/ryangamble))
+
+**Misc:**
+
+- Master \> Develop [\#1622](https://github.com/digital-ai/dot-components/pull/1622) ([angel-git](https://github.com/angel-git))
+
 ## [2.15.1](https://www.npmjs.com/package/@digital-ai/dot-components) (09/25/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.15.0...2.15.1)
@@ -941,6 +953,7 @@
 
 **Features:**
 
+- S-82390: Configure `tsconfig.json` so that `React` imports are obsolete [\#1041](https://github.com/digital-ai/dot-components/pull/1041) ([dmiletic85](https://github.com/dmiletic85))
 - S-81800: `Badge`: Add ability to render the number [\#1037](https://github.com/digital-ai/dot-components/pull/1037) ([dmiletic85](https://github.com/dmiletic85))
 - S-82311: deprecate startIconId, endIconId ListItem props in favor of startIcon, endIcon [\#1035](https://github.com/digital-ai/dot-components/pull/1035) ([selsemore](https://github.com/selsemore))
 
@@ -1114,8 +1127,8 @@
 - 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))
+- D-19337: `List`: Circular dependency [\#897](https://github.com/digital-ai/dot-components/pull/897) ([dmiletic85](https://github.com/dmiletic85))
 
 ## [1.5.4](https://www.npmjs.com/package/@digital-ai/dot-components) (12/28/2021)
 
@@ -1129,7 +1142,7 @@
 
 **Fixed bugs:**
 
-- D-19337: `List`: Circular dependency [\#897](https://github.com/digital-ai/dot-components/pull/897) ([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-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))
 
@@ -1314,6 +1327,7 @@
 - D-19026: Missing required prop for icon button when importing it to table cell [\#761](https://github.com/digital-ai/dot-components/pull/761) ([monapatel91](https://github.com/monapatel91))
 - D-18543: proper export of type and interface [\#760](https://github.com/digital-ai/dot-components/pull/760) ([CWSites](https://github.com/CWSites))
 - D-19023: Circular Dependency in `DynamicForm` component [\#759](https://github.com/digital-ai/dot-components/pull/759) ([dmiletic85](https://github.com/dmiletic85))
+- D-19004: update readme link to be accurate [\#750](https://github.com/digital-ai/dot-components/pull/750) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
 
@@ -1331,7 +1345,6 @@
 **Fixed bugs:**
 
 - D-19011: remove default MUI min width of end icon on list item [\#754](https://github.com/digital-ai/dot-components/pull/754) ([CWSites](https://github.com/CWSites))
-- D-19004: update readme link to be accurate [\#750](https://github.com/digital-ai/dot-components/pull/750) ([CWSites](https://github.com/CWSites))
 - D-18990: allow consumers to pass custom menu item height [\#749](https://github.com/digital-ai/dot-components/pull/749) ([CWSites](https://github.com/CWSites))
 - D-18992: Missing disabled prop of icon button when importing it to tablecell [\#745](https://github.com/digital-ai/dot-components/pull/745) ([monapatel91](https://github.com/monapatel91))
 - D-18997: when specified width of sidebar, it should be applied properly [\#737](https://github.com/digital-ai/dot-components/pull/737) ([CWSites](https://github.com/CWSites))
@@ -1425,7 +1438,6 @@
 - D-18817: set mainMenuItems to `null` by default [\#688](https://github.com/digital-ai/dot-components/pull/688) ([CWSites](https://github.com/CWSites))
 - D-18664: update link to allow for keypress [\#686](https://github.com/digital-ai/dot-components/pull/686) ([CWSites](https://github.com/CWSites))
 - D-18665: AppToolbar z-index update [\#685](https://github.com/digital-ai/dot-components/pull/685) ([CWSites](https://github.com/CWSites))
-- D-18663: Update AutoComplete value typing [\#684](https://github.com/digital-ai/dot-components/pull/684) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
 
@@ -1449,6 +1461,7 @@
 
 **Fixed bugs:**
 
+- D-18663: Update AutoComplete value typing [\#684](https://github.com/digital-ai/dot-components/pull/684) ([CWSites](https://github.com/CWSites))
 - D-18424: include breadcrumb wrapper with breadcrumb component [\#675](https://github.com/digital-ai/dot-components/pull/675) ([CWSites](https://github.com/CWSites))
 - D-18536: material 4.12.3 upgrade [\#667](https://github.com/digital-ai/dot-components/pull/667) ([CWSites](https://github.com/CWSites))
 
@@ -1479,7 +1492,6 @@
 - S-78497: Add 'page' prop to DotTable [\#662](https://github.com/digital-ai/dot-components/pull/662) ([selsemore](https://github.com/selsemore))
 - Issue \#632: Add aria-label property [\#659](https://github.com/digital-ai/dot-components/pull/659) ([dmiletic85](https://github.com/dmiletic85))
 - S-78464: SonarQube [\#657](https://github.com/digital-ai/dot-components/pull/657) ([CWSites](https://github.com/CWSites))
-- S-78388: Export interfaces and types needed for table pagination and sorting [\#654](https://github.com/digital-ai/dot-components/pull/654) ([selsemore](https://github.com/selsemore))
 - S-77872: gather test coverage in sonarcloud [\#653](https://github.com/digital-ai/dot-components/pull/653) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.8](https://www.npmjs.com/package/@digital-ai/dot-components) (08/23/2021)
@@ -1488,6 +1500,7 @@
 
 **Misc:**
 
+- S-78388: Export interfaces and types needed for table pagination and sorting [\#654](https://github.com/digital-ai/dot-components/pull/654) ([selsemore](https://github.com/selsemore))
 - add export back to component library [\#652](https://github.com/digital-ai/dot-components/pull/652) ([CWSites](https://github.com/CWSites))
 - add back missing items from export [\#651](https://github.com/digital-ai/dot-components/pull/651) ([TheKeithStewart](https://github.com/TheKeithStewart))
 

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useEffect, useState, useRef, useMemo, useContext, createContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, StyledEngineProvider, Avatar, Button, Link, List, ListItem, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItemIcon, Collapse, ListSubheader, Divider, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress } from '@mui/material';
+import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, StyledEngineProvider, Avatar, Button, Link, List, ListItem, ListItemButton, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItemIcon, Collapse, ListSubheader, Divider, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress } from '@mui/material';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
 import { createTheme, ThemeProvider, alpha, useTheme } from '@mui/material/styles';
@@ -1915,12 +1915,16 @@ const getChevronIcon = (nestedListType, isOpened) => {
 const flyoutListItemClassName = 'dot-flyout-list-item';
 const flyoutItemLinkClassName = 'dot-flyout-item-link';
 const listItemLinkClassName = 'dot-list-item-link';
-const StyledListItem = styled(ListItem).withConfig({
-  displayName: "ListItemstyles__StyledListItem",
-  componentId: "sc-1fawh8v-0"
-})(["", ""], ({
-  theme
-}) => 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 styledListItemElement = elementType => {
+  return styled(elementType).withConfig({
+    displayName: "ListItemstyles",
+    componentId: "sc-1fawh8v-0"
+  })(["", ""], ({
+    theme
+  }) => 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 StyledListItem = styledListItemElement(ListItem);
+const StyledListItemButton = styledListItemElement(ListItemButton);
 
 const rootClassName$Y = 'dot-progress';
 const StyledCircularProgress = styled(CircularProgress).withConfig({
@@ -2717,7 +2721,8 @@ const DotListItem = ({
       children: startIcon
     }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
   }), void 0);
-  return jsx(StyledListItem, Object.assign({
+  const ListItem = onClick || href ? StyledListItemButton : StyledListItem;
+  return jsx(ListItem, Object.assign({
     "aria-label": ariaLabel || tooltip,
     classes: {
       root: rootClasses

package/index.umd.js

@@ -2164,13 +2164,17 @@
     var flyoutListItemClassName = 'dot-flyout-list-item';
     var flyoutItemLinkClassName = 'dot-flyout-item-link';
     var listItemLinkClassName = 'dot-list-item-link';
-    var StyledListItem = styled__default["default"](material.ListItem).withConfig({
-      displayName: "ListItemstyles__StyledListItem",
-      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      .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 styledListItemElement = function styledListItemElement(elementType) {
+      return styled__default["default"](elementType).withConfig({
+        displayName: "ListItemstyles",
+        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        .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 StyledListItem = styledListItemElement(material.ListItem);
+    var StyledListItemButton = styledListItemElement(material.ListItemButton);
     var templateObject_1$11, templateObject_2$Z;
 
     var rootClassName$Y = 'dot-progress';
@@ -3043,7 +3047,8 @@
           children: startIcon
         }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
       }), void 0);
-      return jsxRuntime.jsx(StyledListItem, __assign({
+      var ListItem = onClick || href ? StyledListItemButton : StyledListItem;
+      return jsxRuntime.jsx(ListItem, __assign({
         "aria-label": ariaLabel || tooltip,
         classes: {
           root: rootClasses

package/lib/components/file-upload/FileListItem.styles.d.ts

@@ -35,7 +35,7 @@ export declare const StyledFileListItem: ((props: {
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions>;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
     ref?: import("react").Ref<HTMLAnchorElement>;
-}, "button" | "style" | "className" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "ContainerComponent" | "ContainerProps" | "dense" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "selected" | "components" | "componentsProps" | "slotProps" | "slots">) => JSX.Element) & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ExtendButtonBaseTypeMap<import("@mui/material").ListItemTypeMap<{
+}, "button" | "style" | "className" | "tabIndex" | "children" | "autoFocus" | "disabled" | "action" | "selected" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "ContainerComponent" | "ContainerProps" | "dense" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "components" | "componentsProps" | "slotProps" | "slots">) => JSX.Element) & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ExtendButtonBaseTypeMap<import("@mui/material").ListItemTypeMap<{
     button: true;
 }, "div">>> & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ListItemTypeMap<{
     button?: false;

package/lib/components/list/ListItem.styles.d.ts

@@ -2,43 +2,5 @@
 export declare const flyoutListItemClassName = "dot-flyout-list-item";
 export declare const flyoutItemLinkClassName = "dot-flyout-item-link";
 export declare const listItemLinkClassName = "dot-list-item-link";
-export declare const StyledListItem: ((props: {
-    href: string;
-} & {
-    button: true;
-} & import("@mui/material").ListItemBaseProps & {
-    components?: {
-        Root?: import("react").ElementType<any>;
-    };
-    componentsProps?: {
-        root?: import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides;
-    };
-    slotProps?: {
-        root?: import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides;
-    };
-    slots?: {
-        root?: import("react").ElementType<any>;
-    };
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions>;
-    centerRipple?: boolean;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses>;
-    disabled?: boolean;
-    disableRipple?: boolean;
-    disableTouchRipple?: boolean;
-    focusRipple?: boolean;
-    focusVisibleClassName?: string;
-    LinkComponent?: import("react").ElementType<any>;
-    onFocusVisible?: import("react").FocusEventHandler<any>;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
-    tabIndex?: number;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps>;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions>;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
-    ref?: import("react").Ref<HTMLAnchorElement>;
-}, "button" | "style" | "className" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "ContainerComponent" | "ContainerProps" | "dense" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "selected" | "components" | "componentsProps" | "slotProps" | "slots">) => JSX.Element) & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ExtendButtonBaseTypeMap<import("@mui/material").ListItemTypeMap<{
-    button: true;
-}, "div">>> & import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ListItemTypeMap<{
-    button?: false;
-}, "li">>;
+export declare const StyledListItem: import("react").ComponentType<any> | keyof JSX.IntrinsicElements;
+export declare const StyledListItemButton: import("react").ComponentType<any> | keyof JSX.IntrinsicElements;

package/package.json

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