@digital-ai/dot-components 3.6.0 → 3.7.0

package/index.esm.js

@@ -2852,18 +2852,46 @@ const DotListDivider = ({
 };
 
 const rootClassName$11 = 'dot-progress';
-const StyledCircularProgress = styled(CircularProgress)`
+const StyledProgress = styled.div`
   ${({
   theme
 }) => css`
     &.${rootClassName$11} {
-      &.MuiCircularProgress-colorPrimary {
-        color: ${theme.palette.figma.inProgress.normal};
+      line-height: 0;
+
+      .dot-progress-with-label-wrapper {
+        position: relative;
+        display: inline-flex;
+
+        .progress-label-typography {
+          position: absolute;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          inset: 0;
+        }
       }
 
-      &.MuiCircularProgress-colorSecondary {
-        color: ${theme.palette.figma.inProgress.secondary};
+      .dot-progress-background-wrapper {
+        position: relative;
+
+        .dot-progress-background {
+          color: ${theme.palette.grey[100]};
+          position: absolute;
+          left: 0;
+        }
+      }
+
+      .dot-circular-progress {
+        &.MuiCircularProgress-colorPrimary {
+          color: ${theme.palette.figma.inProgress.normal};
+        }
+
+        &.MuiCircularProgress-colorSecondary {
+          color: ${theme.palette.figma.inProgress.secondary};
+        }
       }
+    }
   `}
 `;
 
@@ -2872,6 +2900,7 @@ const DotProgress = ({
   color = 'secondary',
   className,
   'data-testid': dataTestId,
+  hasPercentageLabel = false,
   size = 40,
   thickness = 3.6,
   tooltip = 'loading data',
@@ -2884,13 +2913,10 @@ const DotProgress = ({
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
     }
   }, []);
-  return jsx(DotTooltip, {
-    title: tooltip,
-    children: jsx(StyledCircularProgress, {
+  const renderCircularProgress = (hasBackgroundProgress = false) => {
+    const circularProgress = jsx(CircularProgress, {
       "aria-label": ariaLabel || tooltip,
-      classes: {
-        root: rootClasses
-      },
+      className: "dot-circular-progress",
       color: color,
       "data-testid": dataTestId,
       role: "progressbar",
@@ -2898,6 +2924,34 @@ const DotProgress = ({
       thickness: thickness,
       value: value,
       variant: variant
+    });
+    if (hasBackgroundProgress) {
+      return jsxs("div", {
+        className: "dot-progress-background-wrapper",
+        children: [jsx(CircularProgress, {
+          "aria-label": "background progress",
+          className: "dot-progress-background",
+          size: size,
+          thickness: thickness,
+          value: 100,
+          variant: "determinate"
+        }), circularProgress]
+      });
+    }
+    return circularProgress;
+  };
+  return jsx(StyledProgress, {
+    className: rootClasses,
+    children: jsx(DotTooltip, {
+      title: tooltip,
+      children: hasPercentageLabel ? jsxs("div", {
+        className: "dot-progress-with-label-wrapper",
+        children: [renderCircularProgress(true), jsxs(DotTypography, {
+          className: "progress-label-typography",
+          variant: "caption",
+          children: [value, "%"]
+        })]
+      }) : renderCircularProgress()
     })
   });
 };
@@ -5400,7 +5454,7 @@ const StyledSidebar = styled.aside`
 
       .toggle-nav {
         border-top: 1px solid ${theme.palette.figma.border.default};
-        padding: ${theme.spacing(1)};
+        padding: ${theme.spacing(1, 2)};
         text-align: right;
 
         .dot-icon {
@@ -5612,6 +5666,7 @@ const DotSidebar = ({
   const hasBackItem = goBack && backItem;
   const displayHeader = title || hasAppLogo;
   const openClass = isOpen ? 'open' : 'collapsed';
+  const collapseKey = 'q';
   const checkPrimaryNavMissingIcons = () => navItems.some(item => !item.divider && !item.startIcon);
   useEffect(() => {
     // Incorrect usage warning
@@ -5625,10 +5680,22 @@ const DotSidebar = ({
   useEffect(() => {
     setSidebarWidth(isOpen ? width : 58);
   }, [isOpen]);
-  const collapseNav = () => {
+  const toggleNavCollapseState = () => {
     onCollapseChange && onCollapseChange(isOpen);
     setIsOpen(!isOpen);
   };
+  useEffect(() => {
+    const handleKeyPress = event => {
+      const element = event.target;
+      if (event.key === collapseKey && !['INPUT', 'TEXTAREA'].includes(element.nodeName) && !element.isContentEditable) {
+        toggleNavCollapseState();
+      }
+    };
+    window.addEventListener('keydown', handleKeyPress);
+    return () => {
+      window.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [isOpen]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
   const rootClasses = useStylesWithRootClass(rootClassName$R, openClass, className);
   return jsxs(StyledSidebar, {
@@ -5681,13 +5748,14 @@ const DotSidebar = ({
     }), collapsable && jsx("div", {
       className: "toggle-nav",
       children: jsx(DotTooltip, {
-        title: isOpen ? 'Collapse' : 'Expand',
+        title: (isOpen ? 'Collapse' : 'Expand') + ` ${collapseKey}`,
+        placement: "right",
         children: jsx(DotIconButton, {
           ariaLabel: "collapse sidebar navigation",
           "data-testid": "toggle-nav",
-          iconId: isOpen ? 'chevron-left' : 'chevron-right',
+          iconId: isOpen ? 'collapse' : 'expand',
           iconSize: "small",
-          onClick: collapseNav,
+          onClick: toggleNavCollapseState,
           size: "small"
         })
       })
@@ -6555,6 +6623,7 @@ const DotAutoComplete = ({
     getOptionLabel: option => parseAutoCompleteValue(option),
     getOptionDisabled: checkIfOptionDisabled,
     groupBy: group ? option => option.group : undefined,
+    id: inputId,
     inputValue: inputValue,
     isOptionEqualToValue: isOptionEqualToValue,
     ListboxComponent: ListboxComponent,
@@ -8190,7 +8259,7 @@ const StyledEmptyState = styled.div`
       }
 
       .empty-state-image {
-        min-height: 239px;
+        min-height: ${theme.spacing(10)};
         margin-bottom: ${theme.spacing(5)};
       }
 
@@ -8857,8 +8926,8 @@ const StyledProgressButton = styled(DotButton)`
         // button's dimensions don't change
         visibility: hidden;
       }
-      .progress-circle {
-        color: ${theme.palette.figma.typography.black};
+      .dot-circular-progress {
+        color: ${theme.palette.figma.typography.black} !important;
         position: absolute;
         top: 0;
         right: 0;
@@ -8911,6 +8980,7 @@ const DotProgressButton = ({
       className: titleClasses,
       children: children
     }), isLoading && jsx(DotProgress, {
+      ariaLabel: "loading",
       className: "progress-circle",
       size: progressCircleSize
     })]

package/package.json

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

package/src/lib/components/progress/Progress.d.ts

@@ -4,6 +4,8 @@ export type progressVariantOptions = 'determinate' | 'indeterminate';
 export interface ProgressProps extends CommonProps {
     /** color of the loading spinner border */
     color?: progressColorOptions;
+    /** If true, it will display percentage label at the center of the circle */
+    hasPercentageLabel?: boolean;
     /** controls the diameter of the loading spinner */
     size?: number | string;
     /** controls thickness of the loading spinner border */
@@ -15,4 +17,4 @@ export interface ProgressProps extends CommonProps {
     /** type of progress spinner displayed */
     variant?: progressVariantOptions;
 }
-export declare const DotProgress: ({ ariaLabel, color, className, "data-testid": dataTestId, size, thickness, tooltip, value, variant, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotProgress: ({ ariaLabel, color, className, "data-testid": dataTestId, hasPercentageLabel, size, thickness, tooltip, value, variant, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/progress/Progress.styles.d.ts

@@ -1,3 +1,2 @@
-import { CircularProgress } from '@mui/material';
 export declare const rootClassName = "dot-progress";
-export declare const StyledCircularProgress: import("styled-components").StyledComponent<typeof CircularProgress, any, {}, never>;
+export declare const StyledProgress: import("styled-components").StyledComponent<"div", any, {}, never>;

package/src/lib/components/progress-button/ProgressButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '../button/Button';
+import { ButtonProps } from '../button';
 export declare const SPINNER_DEFAULT_SIZE = 20;
 export declare const SPINNER_LARGE_SIZE = 24;
 export interface ProgressButtonProps extends ButtonProps {

package/src/lib/components/progress-button/ProgressButton.styles.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 export declare const rootClassName = "dot-progress-button";
-export declare const StyledProgressButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../button/Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const StyledProgressButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;