@digital-ai/dot-components 2.25.2 → 2.26.0

package/index.esm.js

@@ -7042,6 +7042,20 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
         }
       }
 
+      .toggle-button-badge {
+        align-items: center;
+        gap: ${theme.spacing(1)};
+
+        .dot-typography {
+          margin-left: 0;
+        }
+
+        .MuiBadge-badge {
+          position: static;
+          transform: none;
+        }
+      }
+
       .dot-typography {
         margin-bottom: 0;
       }
@@ -7134,6 +7148,7 @@ const DotButtonToggle = ({
   const rootClasses = useStylesWithRootClass(rootClassName$G, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
+    badgeContent: optionBadgeContent,
     className: optionClassName,
     disabled: optionDisabled,
     iconId: optionIconId,
@@ -7150,14 +7165,25 @@ const DotButtonToggle = ({
       key,
       value: optionValue
     };
-    const children = jsxs(Fragment, {
-      children: [optionIconId && jsx(DotIcon, {
-        className: "dot-toggle-icon",
-        iconId: optionIconId
-      }), optionText && jsx(DotTypography, {
-        children: optionText
-      })]
-    });
+    const getChildren = () => {
+      if (!optionIconId && !optionText) return;
+      const optionTextTypography = jsxs(Fragment, {
+        children: [optionIconId && jsx(DotIcon, {
+          className: "dot-toggle-icon",
+          iconId: optionIconId
+        }), optionText && jsx(DotTypography, {
+          children: optionText
+        })]
+      });
+      return optionBadgeContent && !isNaN(optionBadgeContent) && optionBadgeContent > 0 && optionText ? jsx(DotBadge, {
+        "data-testid": dataTestId && `${dataTestId}-badge`,
+        className: "toggle-button-badge",
+        badgeContent: optionBadgeContent,
+        variant: "standard",
+        children: optionTextTypography
+      }) : optionTextTypography;
+    };
+    const children = getChildren();
     return optionTooltip ? jsx(TooltipToggleButton, Object.assign({}, commonProps, {
       CustomTooltipProps: {
         title: optionTooltip
@@ -10126,6 +10152,7 @@ const StyledSnackbar = styled(Snackbar)`
     }
     .MuiAlert-message {
       padding: 13px 0px;
+      word-break: break-word;
     }
     &.MuiSnackbar-anchorOriginTopRight{
       top: 0px;
@@ -10183,6 +10210,7 @@ const DotSnackbar = ({
   action,
   anchorOrigin = DEFAULT_ANCHOR_ORIGIN,
   ariaLabel,
+  autoHideDuration,
   children,
   className,
   'data-testid': dataTestId,
@@ -10192,7 +10220,7 @@ const DotSnackbar = ({
   severity,
   width
 }) => {
-  const autoHideDuration = addAutoHideDuration(severity);
+  const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
   checkForConflictingEventHandlers({
     onClose,
     action
@@ -10206,7 +10234,7 @@ const DotSnackbar = ({
   return jsx(StyledSnackbar, {
     anchorOrigin: anchorOrigin,
     "aria-label": ariaLabel,
-    autoHideDuration: autoHideDuration,
+    autoHideDuration: calculatedAutoHideDuration,
     classes: {
       root: rootClasses
     },
@@ -10247,7 +10275,7 @@ const StyledSnackbarContainer = styled.div`
 
 const DotSnackbarContext = createContext({
   alerts: [],
-  enqueueMessage: (_message, _severity) => null,
+  enqueueMessage: (_message, _severity, _autoHideDuration) => null,
   removeMessage: _id => null
 });
 const DotSnackbarContainer = ({
@@ -10269,6 +10297,7 @@ const DotSnackbarContainer = ({
       "data-testid": rootClassName$l,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
+          autoHideDuration: alert.autoHideDuration,
           hideOnClickAway: hideOnClickAway,
           onClose: handleClose(alert.id),
           open: alert.open,
@@ -10284,13 +10313,14 @@ const DotSnackbarProvider = ({
   hideOnClickAway = true
 }) => {
   const [alerts, setAlerts] = useState([]);
-  function enqueueMessage(message, severity) {
+  function enqueueMessage(message, severity, autoHideDuration) {
     const id = CreateUUID();
     const queue = {
       id,
       message,
       severity,
-      open: true
+      open: true,
+      autoHideDuration
     };
     setAlerts(prevState => {
       return [...prevState, Object.assign({}, queue)];

package/index.esm.mjs

@@ -7042,6 +7042,20 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
         }
       }
 
+      .toggle-button-badge {
+        align-items: center;
+        gap: ${theme.spacing(1)};
+
+        .dot-typography {
+          margin-left: 0;
+        }
+
+        .MuiBadge-badge {
+          position: static;
+          transform: none;
+        }
+      }
+
       .dot-typography {
         margin-bottom: 0;
       }
@@ -7134,6 +7148,7 @@ const DotButtonToggle = ({
   const rootClasses = useStylesWithRootClass(rootClassName$G, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
+    badgeContent: optionBadgeContent,
     className: optionClassName,
     disabled: optionDisabled,
     iconId: optionIconId,
@@ -7150,14 +7165,25 @@ const DotButtonToggle = ({
       key,
       value: optionValue
     };
-    const children = jsxs(Fragment, {
-      children: [optionIconId && jsx(DotIcon, {
-        className: "dot-toggle-icon",
-        iconId: optionIconId
-      }), optionText && jsx(DotTypography, {
-        children: optionText
-      })]
-    });
+    const getChildren = () => {
+      if (!optionIconId && !optionText) return;
+      const optionTextTypography = jsxs(Fragment, {
+        children: [optionIconId && jsx(DotIcon, {
+          className: "dot-toggle-icon",
+          iconId: optionIconId
+        }), optionText && jsx(DotTypography, {
+          children: optionText
+        })]
+      });
+      return optionBadgeContent && !isNaN(optionBadgeContent) && optionBadgeContent > 0 && optionText ? jsx(DotBadge, {
+        "data-testid": dataTestId && `${dataTestId}-badge`,
+        className: "toggle-button-badge",
+        badgeContent: optionBadgeContent,
+        variant: "standard",
+        children: optionTextTypography
+      }) : optionTextTypography;
+    };
+    const children = getChildren();
     return optionTooltip ? jsx(TooltipToggleButton, Object.assign({}, commonProps, {
       CustomTooltipProps: {
         title: optionTooltip
@@ -10126,6 +10152,7 @@ const StyledSnackbar = styled(Snackbar)`
     }
     .MuiAlert-message {
       padding: 13px 0px;
+      word-break: break-word;
     }
     &.MuiSnackbar-anchorOriginTopRight{
       top: 0px;
@@ -10183,6 +10210,7 @@ const DotSnackbar = ({
   action,
   anchorOrigin = DEFAULT_ANCHOR_ORIGIN,
   ariaLabel,
+  autoHideDuration,
   children,
   className,
   'data-testid': dataTestId,
@@ -10192,7 +10220,7 @@ const DotSnackbar = ({
   severity,
   width
 }) => {
-  const autoHideDuration = addAutoHideDuration(severity);
+  const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
   checkForConflictingEventHandlers({
     onClose,
     action
@@ -10206,7 +10234,7 @@ const DotSnackbar = ({
   return jsx(StyledSnackbar, {
     anchorOrigin: anchorOrigin,
     "aria-label": ariaLabel,
-    autoHideDuration: autoHideDuration,
+    autoHideDuration: calculatedAutoHideDuration,
     classes: {
       root: rootClasses
     },
@@ -10247,7 +10275,7 @@ const StyledSnackbarContainer = styled.div`
 
 const DotSnackbarContext = createContext({
   alerts: [],
-  enqueueMessage: (_message, _severity) => null,
+  enqueueMessage: (_message, _severity, _autoHideDuration) => null,
   removeMessage: _id => null
 });
 const DotSnackbarContainer = ({
@@ -10269,6 +10297,7 @@ const DotSnackbarContainer = ({
       "data-testid": rootClassName$l,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
+          autoHideDuration: alert.autoHideDuration,
           hideOnClickAway: hideOnClickAway,
           onClose: handleClose(alert.id),
           open: alert.open,
@@ -10284,13 +10313,14 @@ const DotSnackbarProvider = ({
   hideOnClickAway = true
 }) => {
   const [alerts, setAlerts] = useState([]);
-  function enqueueMessage(message, severity) {
+  function enqueueMessage(message, severity, autoHideDuration) {
     const id = CreateUUID();
     const queue = {
       id,
       message,
       severity,
-      open: true
+      open: true,
+      autoHideDuration
     };
     setAlerts(prevState => {
       return [...prevState, Object.assign({}, queue)];

package/package.json

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

package/src/lib/components/button-toggle/utils/models.d.ts

@@ -5,6 +5,7 @@ export type ButtonToggleOrientation = 'horizontal' | 'vertical';
 export type ButtonToggleValue = ButtonToggleSingleValue | Array<ButtonToggleSingleValue>;
 export interface ButtonToggleOption extends CommonProps {
     ariaLabel: string;
+    badgeContent?: number;
     disabled?: boolean;
     iconId?: string;
     text?: string;

package/src/lib/components/snackbar/Snackbar.d.ts

@@ -7,6 +7,8 @@ export interface SnackbarProps extends CommonProps {
     action?: ReactNode;
     /** The anchor of the Snackbar. On smaller screens, the component grows to occupy all the available width, the horizontal alignment is ignored. */
     anchorOrigin?: SnackbarOrigin;
+    /** The number of milliseconds to wait before automatically closing the snackbar. If null is passed, then the snackbar never automatically closes. If the prop is not passed at all, then snackbars close after 10 seconds (except error snackbar which never closes automatically). */
+    autoHideDuration?: number | null;
     /** The message the user sees once the alert displays. */
     children: ReactNode;
     /** If false, then snackbar does not close when clicking away. True by default. */
@@ -20,4 +22,4 @@ export interface SnackbarProps extends CommonProps {
     /** Width of the encapsulated Alert component. */
     width?: string;
 }
-export declare const DotSnackbar: ({ action, anchorOrigin, ariaLabel, children, className, "data-testid": dataTestId, hideOnClickAway, onClose, open, severity, width, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotSnackbar: ({ action, anchorOrigin, ariaLabel, autoHideDuration, children, className, "data-testid": dataTestId, hideOnClickAway, onClose, open, severity, width, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/snackbar/SnackbarProvider.d.ts

@@ -5,6 +5,7 @@ declare const initialState: {
     open: boolean;
     severity: string;
     id: string;
+    autoHideDuration: number;
 }[];
 export interface SnackbarProviderProps {
     /** The components or string that load inside the snackbar provider. */
@@ -16,9 +17,10 @@ interface SnackbarContainerProps {
 }
 interface DotSnackbarProps {
     alerts: typeof initialState;
-    enqueueMessage: (message: ReactNode, severity: SnackbarSeverity) => string;
+    enqueueMessage: (message: ReactNode, severity: SnackbarSeverity, autoHideDuration?: number | null) => string;
     removeMessage: (id: string) => void;
 }
+export declare const DotSnackbarContext: import("react").Context<DotSnackbarProps>;
 export declare const DotSnackbarContainer: ({ hideOnClickAway, }: SnackbarContainerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DotSnackbarProvider: ({ children, hideOnClickAway, }: SnackbarProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useDotSnackbarContext: () => DotSnackbarProps;