@digital-ai/dot-components 2.21.0 → 2.22.0

package/index.esm.js

@@ -940,10 +940,11 @@ const typographyOptions = {
 const breakpointOptions = {
   values: {
     xs: 0,
-    sm: 720,
-    md: 1024,
-    lg: 1280,
-    xl: 1920
+    sm: 540,
+    md: 720,
+    lg: 960,
+    xl: 1140,
+    xxl: 1320
   }
 };
 // light colors by default
@@ -3627,7 +3628,7 @@ const DotCopyButton = ({
       return _onClick(event);
     }
     return false;
-  }, [_showCopiedIcon, _disabled, _onClick]);
+  }, [value, _showCopiedIcon, _disabled, _onClick]);
   return jsxs(StyledCopyButton, {
     className: rootClassName$Q,
     "data-testid": dataTestId,
@@ -3934,7 +3935,7 @@ const DotAppSwitcherView = ({
         key: app.id
       });
     });
-    const keys = Array.from(newAppTypeMap.keys()).sort();
+    const keys = Array.from(newAppTypeMap.keys()).sort((a, b) => a.localeCompare(b));
     const sortedAppTypeMap = new Map();
     for (const appType of keys) {
       const appTypeApps = newAppTypeMap.get(appType);
@@ -4563,7 +4564,7 @@ const DotAppToolbar = ({
   const denseClass = _dense ? denseClassName : '';
   const rootClasses = useStylesWithRootClass(rootClassName$L, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
-  const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('md'));
+  const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
     const handleInsideMenuClick = event => {
       var _a, _b;
@@ -4707,7 +4708,7 @@ const StyledChip = styled(Chip).withConfig({
   componentId: "f1tsra-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background:", ";border-color:", ";color:", ";.dot-icon i{color:", ";height:auto;}.MuiChip-label{padding:", ";}&.MuiChip-sizeSmall{.dot-icon,.dot-avatar{width:18px;height:18px;}}&.Mui-error{background-color:", ";border-color:", ";.dot-icon i{color:", ";}.MuiChip-label{color:", ";}.MuiChip-deleteIcon{color:", ";}}&.Mui-disabled{background:", ";border-color:", " opacity:1;.dot-icon i{color:", ";}.MuiChip-deleteIcon,.MuiChip-label{color:", ";}}&:not(.Mui-error){&:hover{background-color:", ";}.MuiChip-deleteIcon:hover{color:", ";}}.MuiChip-deleteIcon{width:18px;height:18px;}}"], rootClassName$J, theme.palette.figma.neutral.normal, theme.palette.figma.border.darker, theme.palette.figma.typography.black, theme.palette.figma.icon.black, theme.spacing(0, 1.5), theme.palette.figma.overlay.alerts.error.background, theme.palette.figma.overlay.alerts.error.icon, theme.palette.figma.overlay.alerts.custom.icon, theme.palette.figma.overlay.alerts.text.black, theme.palette.figma.overlay.alerts.error.icon, theme.palette.figma.disabled.normal, theme.palette.figma.border.default, theme.palette.figma.icon.disabled, theme.palette.figma.typography.disabled, theme.palette.figma.neutral.elevated, theme.palette.figma.icon.black));
+}) => css(["&.", "{background:", ";border-color:", ";color:", ";.dot-icon i{color:", ";height:auto;}.MuiChip-label{padding:", ";}&.MuiChip-sizeSmall{.dot-icon,.dot-avatar{width:18px;height:18px;}.dot-icon{margin-left:5px;}.dot-avatar{margin-left:3px;}.MuiChip-deleteIcon{width:17px;height:17px;margin-right:3px;}.MuiChip-label{padding:", ";}}&.Mui-error{background-color:", ";border-color:", ";.dot-icon i{color:", ";}.MuiChip-label{color:", ";}.MuiChip-deleteIcon{color:", ";}}&.Mui-disabled{background:", ";border-color:", " opacity:1;.dot-icon i{color:", ";}.MuiChip-deleteIcon,.MuiChip-label{color:", ";}}&:not(.Mui-error){&:hover{background-color:", ";}.MuiChip-deleteIcon:hover{color:", ";}}.MuiChip-deleteIcon{width:", ";height:", ";margin-right:", ";}.dot-icon{margin:", ";}.dot-avatar{margin-right:", ";}}"], rootClassName$J, theme.palette.figma.neutral.normal, theme.palette.figma.border.darker, theme.palette.figma.typography.black, theme.palette.figma.icon.black, theme.spacing(0, 1.5), theme.spacing(0, 1), theme.palette.figma.overlay.alerts.error.background, theme.palette.figma.overlay.alerts.error.icon, theme.palette.figma.overlay.alerts.custom.icon, theme.palette.figma.overlay.alerts.text.black, theme.palette.figma.overlay.alerts.error.icon, theme.palette.figma.disabled.normal, theme.palette.figma.border.default, theme.palette.figma.icon.disabled, theme.palette.figma.typography.disabled, theme.palette.figma.neutral.elevated, theme.palette.figma.icon.black, theme.spacing(3), theme.spacing(3), theme.spacing(0.5), theme.spacing(0, -0.5, 0, 1), theme.spacing(-0.5)));
 
 const DEFAULT_CHARACTERS_LIMIT = 32;
 const DotChip = ({
@@ -6091,22 +6092,29 @@ const breakpointsGetter$1 = (theme, columnsBreakpoints, columnGap, rowGap) => `$
   }
   ${theme.breakpoints.up('xl')} {
     column-gap: ${`${columnGap.xl}px`};
-    grid-template-columns: ${frGetter(columnsBreakpoints.lg)};
+    grid-template-columns: ${frGetter(columnsBreakpoints.xl)};
     row-gap: ${`${rowGap.xl}px`};
+  }
+  ${theme.breakpoints.up('xxl')} {
+    column-gap: ${`${columnGap.xxl}px`};
+    grid-template-columns: ${frGetter(columnsBreakpoints.xxl)};
+    row-gap: ${`${rowGap.xxl}px`};
   }`;
 const defaultGutter = {
   xs: 16,
   sm: 16,
   md: 24,
   lg: 24,
-  xl: 24
+  xl: 24,
+  xxl: 24
 };
 const defaultColumns = {
   xs: 4,
   sm: 8,
   md: 12,
   lg: 12,
-  xl: 12
+  xl: 12,
+  xxl: 12
 };
 const Grid = ({
   className,
@@ -6229,6 +6237,9 @@ const CssGridDebug = ({
     if (getWidth() > theme.breakpoints.values.xl) {
       setColumns(defaultColumns.xl);
     }
+    if (getWidth() > theme.breakpoints.values.xxl) {
+      setColumns(defaultColumns.xxl);
+    }
     if (getWidth() < theme.breakpoints.values.sm) {
       setColumns(defaultColumns.xs);
     }
@@ -7846,7 +7857,7 @@ const StyledPill = styled(Chip).withConfig({
   componentId: "l7oxi2-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}&.MuiChip-outlined{&.error{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.success{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.warning{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.in-progress{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}}&.MuiChip-filled{&.error{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.success{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.warning{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.in-progress{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}}}"], rootClassName$o, ({
+}) => css(["&.", "{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";margin:", ";}&.MuiChip-sizeSmall .dot-icon{margin-left:5px;}&.MuiChip-outlined{&.error{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.success{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.warning{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.in-progress{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}}&.MuiChip-filled{&.error{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.success{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.warning{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}&.in-progress{background-color:", ";border-color:", ";color:", ";.dot-icon{color:", ";}}}}"], rootClassName$o, ({
   backgroundcolor
 }) => {
   return backgroundcolor || theme.palette.grey[200];
@@ -7862,7 +7873,7 @@ const StyledPill = styled(Chip).withConfig({
   labelcolor
 }) => {
   return labelcolor ? labelcolor : theme.palette.layer.n700;
-}, theme.palette.error[100], theme.palette.error.main, theme.palette.layer.n700, theme.palette.error.main, theme.palette.success[100], theme.palette.success.main, theme.palette.layer.n700, theme.palette.success.main, theme.palette.warning[100], theme.palette.warning.main, theme.palette.layer.n700, theme.palette.warning.main, theme.palette.primary[100], theme.palette.primary.main, theme.palette.layer.n700, theme.palette.primary.main, theme.palette.error.main, theme.palette.error.main, theme.palette.layer.n0, theme.palette.layer.n0, theme.palette.success.main, theme.palette.success.main, theme.palette.layer.n0, theme.palette.layer.n0, theme.palette.warning.main, theme.palette.warning.main, theme.palette.layer.n700, theme.palette.layer.n700, theme.palette.primary.main, theme.palette.primary.main, theme.palette.layer.n0, theme.palette.layer.n0));
+}, theme.spacing(0, -0.5, 0, 1), theme.palette.error[100], theme.palette.error.main, theme.palette.layer.n700, theme.palette.error.main, theme.palette.success[100], theme.palette.success.main, theme.palette.layer.n700, theme.palette.success.main, theme.palette.warning[100], theme.palette.warning.main, theme.palette.layer.n700, theme.palette.warning.main, theme.palette.primary[100], theme.palette.primary.main, theme.palette.layer.n700, theme.palette.primary.main, theme.palette.error.main, theme.palette.error.main, theme.palette.layer.n0, theme.palette.layer.n0, theme.palette.success.main, theme.palette.success.main, theme.palette.layer.n0, theme.palette.layer.n0, theme.palette.warning.main, theme.palette.warning.main, theme.palette.layer.n700, theme.palette.layer.n700, theme.palette.primary.main, theme.palette.primary.main, theme.palette.layer.n0, theme.palette.layer.n0));
 
 const DotPill = ({
   ariaLabel,
@@ -11104,4 +11115,4 @@ const DotCarousel = ({
   });
 };
 
-export { ApiError, Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };
+export { ApiError, Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };

package/package.json

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

package/src/index.d.ts

@@ -3,5 +3,6 @@ export * as lightColors from './lib/theme-provider/colors/light-theme-colors';
 export * from './lib/theme-provider/colors/figma-colors';
 export * as themeVariables from './lib/theme-provider/common/variables';
 export type { ThemeProviderProps } from './lib/theme-provider/ThemeProvider';
+export { breakpointOptions } from './lib/theme-provider/ThemeProvider';
 export { avatarColors, DotThemeProvider, typographyOptions, } from './lib/theme-provider/ThemeProvider';
 export * from './lib/theme-provider/interfaces';

package/src/lib/components/css-grid/CssGrid.d.ts

@@ -6,6 +6,7 @@ export interface GridOptions {
     sm: number;
     xl: number;
     xs: number;
+    xxl: number;
 }
 export interface CssGridProps extends CommonProps {
     /** Cells for Grid */

package/src/lib/theme-provider/ThemeProvider.d.ts

@@ -1,7 +1,12 @@
 import { ReactNode } from 'react';
 import { Theme } from '@mui/material';
 import { TypographyOptions } from '@mui/material/styles/createTypography';
-import { AvatarPaletteColorOptions, FigmaTheme, IconPaletteColorOptions, LayerPaletteColorOptions } from './interfaces';
+import { AvatarPaletteColorOptions, BreakpointOptions, FigmaTheme, IconPaletteColorOptions, LayerPaletteColorOptions } from './interfaces';
+declare module '@mui/material/styles' {
+    interface BreakpointOverrides {
+        xxl: true;
+    }
+}
 declare module '@mui/material/styles/createPalette' {
     interface Palette {
         layer: LayerPaletteColorOptions;
@@ -17,6 +22,7 @@ declare module '@mui/material/styles/createPalette' {
 }
 export type ThemeOptions = 'light' | 'dark';
 export declare const typographyOptions: TypographyOptions;
+export declare const breakpointOptions: BreakpointOptions;
 export declare const avatarColors: AvatarPaletteColorOptions;
 export declare const darkTheme: Theme;
 export declare const lightTheme: Theme;

package/src/lib/theme-provider/interfaces.d.ts

@@ -23,6 +23,7 @@ export interface BreakpointOptions {
         sm: number;
         xl: number;
         xs: number;
+        xxl: number;
     };
 }
 export interface FigmaTheme {