@digital-ai/dot-components 2.8.1 → 2.9.0

package/index.umd.js

@@ -1850,10 +1850,21 @@
       var dataTestId = _a["data-testid"],
         iconId = _a.iconId,
         imageSrc = _a.imageSrc,
+        number = _a.number,
         size = _a.size,
         text = _a.text,
         type = _a.type;
+      var parsedNumber = function parsedNumber() {
+        if (!isNumber(number)) return;
+        var numberArray = number.toString().split('');
+        if (numberArray.length > 1) {
+          return "" + numberArray[0] + numberArray[1];
+        } else {
+          return number;
+        }
+      };
       var parsedText = function parsedText() {
+        if (!isString$1(text)) return;
         var textArray = text.split(' ');
         if (textArray.length > 1) {
           var firstInitial = textArray[0].slice(0, 1);
@@ -1880,7 +1891,7 @@
         return jsxRuntime.jsx(DotTypography, __assign({
           variant: size === 'small' ? 'caption' : getHeadingFromAvatarSize()
         }, {
-          children: parsedText()
+          children: parsedNumber() || parsedText()
         }), void 0);
       }
       return null;
@@ -1898,6 +1909,7 @@
         iconId = _a.iconId,
         imageSrc = _a.imageSrc,
         onClick = _a.onClick,
+        number = _a.number,
         _d = _a.size,
         size = _d === void 0 ? 'medium' : _d,
         _e = _a.tabIndex,
@@ -1943,6 +1955,7 @@
             "data-testid": dataTestId,
             iconId: iconId,
             imageSrc: imageSrc,
+            number: number,
             size: size,
             text: text,
             type: type
@@ -2601,7 +2614,7 @@
         title: tooltip
       }, {
         children: jsxRuntime.jsx(StyledIconButton, __assign({
-          "aria-label": ariaLabel,
+          "aria-label": ariaLabel || tooltip || iconId + " icon button",
           classes: {
             root: rootClasses
           },
@@ -2640,6 +2653,7 @@
         role: "heading"
       }, {
         children: [children, variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
+          ariaLabel: "close drawer",
           className: "close-button",
           iconId: "close",
           onClick: onClose
@@ -2674,6 +2688,7 @@
         role: ariaRole
       }, {
         children: [children, !headerExists && variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
+          ariaLabel: "close drawer",
           className: "dot-drawer-close-button",
           iconId: "close",
           onClick: onClose
@@ -2714,7 +2729,7 @@
         anchor = _b === void 0 ? 'right' : _b,
         ariaLabel = _a.ariaLabel,
         _c = _a.ariaRole,
-        ariaRole = _c === void 0 ? 'presentation' : _c,
+        ariaRole = _c === void 0 ? 'dialog' : _c,
         className = _a.className,
         children = _a.children,
         dataTestId = _a["data-testid"],
@@ -2741,6 +2756,7 @@
         }
       };
       var rootClasses = useStylesWithRootClass(rootClassName$U, className);
+      var backdropEnabled = variant === 'temporary' && !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.hideBackdrop);
       var headerExists = !!drawerHeaderProps;
       var bodyTestId = drawerBodyProps ? drawerBodyProps["data-testid"] : 'drawer-body';
       return jsxRuntime.jsxs(StyledDrawer, __assign({
@@ -2750,6 +2766,7 @@
         }),
         anchor: anchor,
         "aria-label": ariaLabel,
+        "aria-modal": backdropEnabled ? 'true' : 'false',
         classes: {
           root: rootClasses,
           paper: 'dot-drawer-paper'
@@ -3404,6 +3421,7 @@
         iconId: "search"
       }, void 0);
       var clearSearchIcon = jsxRuntime.jsx(DotIconButton, {
+        ariaLabel: "clear search text",
         iconId: "close",
         onClick: handleClear,
         size: "small",
@@ -3480,7 +3498,7 @@
         "data-testid": dataTestId
       }, {
         children: [!showCopiedIcon && jsxRuntime.jsx(DotIconButton, {
-          ariaLabel: ariaLabel,
+          ariaLabel: ariaLabel || 'copy to clipboard',
           "data-testid": dataTestId + "-button",
           iconId: "duplicate",
           onClick: copy,
@@ -4236,7 +4254,7 @@
         }), void 0), jsxRuntime.jsx(DotTooltip, __assign({
           title: "digital.ai"
         }, {
-          children: theme.palette.mode === "light" ? jsxRuntime.jsx(ForwardRef$1, {
+          children: theme.palette.mode === 'light' ? jsxRuntime.jsx(ForwardRef$1, {
             className: "company-name"
           }, void 0) : jsxRuntime.jsx(ForwardRef, {
             className: "company-name"
@@ -4357,6 +4375,7 @@
           className: "go-back"
         }, {
           children: [jsxRuntime.jsx(DotIconButton, {
+            ariaLabel: "go back",
             className: "go-back-button",
             "data-testid": "back-button",
             iconId: backItem.iconId || 'back',
@@ -4765,7 +4784,9 @@
         _c = _a.isReadOnly,
         isReadOnly = _c === void 0 ? false : _c,
         values = _a.values;
+      if (values === undefined) return;
       return values.map(function (option, index) {
+        if (!option) return null;
         var hasStringValue = isString$1(option);
         var optionAsString = option;
         var optionAsObject = option;
@@ -4832,44 +4853,43 @@
         onInputChange = _a.onInputChange,
         onOpen = _a.onOpen,
         open = _a.open,
-        options = _a.options,
+        _k = _a.options,
+        options = _k === void 0 ? [] : _k,
         persistentLabel = _a.persistentLabel,
         placeholder = _a.placeholder,
-        _k = _a.readOnly,
-        readOnly = _k === void 0 ? false : _k,
+        _l = _a.readOnly,
+        readOnly = _l === void 0 ? false : _l,
         renderOption = _a.renderOption,
         renderTags = _a.renderTags,
-        _l = _a.required,
-        required = _l === void 0 ? false : _l,
-        _m = _a.size,
-        size = _m === void 0 ? 'small' : _m,
+        _m = _a.required,
+        required = _m === void 0 ? false : _m,
+        _o = _a.size,
+        size = _o === void 0 ? 'small' : _o,
         value = _a.value,
-        _o = _a.warning,
-        warning = _o === void 0 ? false : _o;
-      var _p = React.useState(!value && !defaultValue),
-        showPlaceholder = _p[0],
-        setShowPlaceholder = _p[1];
-      var _q = actionItem || {},
-        _r = _q.iconId,
-        actionIconId = _r === void 0 ? 'add' : _r,
-        actionItemText = _q.text,
-        onActionItemClick = _q.onClick,
-        preventDuplicateInsertion = _q.preventDuplicateInsertion;
+        _p = _a.warning,
+        warning = _p === void 0 ? false : _p;
+      var _q = React.useState(!value && !defaultValue),
+        showPlaceholder = _q[0],
+        setShowPlaceholder = _q[1];
+      var _r = React.useState(false),
+        isOpened = _r[0],
+        setIsOpened = _r[1];
+      var _s = React.useState(''),
+        inputText = _s[0],
+        setInputText = _s[1];
+      // Used for focus management while popper is opened
+      var actionItemRef = React.useRef();
+      var onActionItemClick = actionItem === null || actionItem === void 0 ? void 0 : actionItem.onClick;
+      var allowActionButtonClick = !freesolo && onActionItemClick;
       var isActionItemDefined = onActionItemClick !== undefined;
-      var highlightedOption = null;
-      var _s = React.useState(false),
-        isOpened = _s[0],
-        setIsOpened = _s[1];
-      var _t = React.useState(''),
-        inputText = _t[0],
-        setInputText = _t[1];
+      var popperOpen = !readOnly && (open || isOpened);
+      var preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
       var textFieldWarningClassName = !error && warning && warningClassName;
       var rootClasses = useStylesWithRootClass(rootClassName$I, size === 'medium' && inputMediumClassName, className);
-      var textFieldRootClasses = useStylesWithRootClass(rootClassName$13, className, readOnly ? 'read-only' : '', textFieldWarningClassName);
+      var textFieldRootClasses = useStylesWithRootClass(rootClassName$13, readOnly && 'read-only', textFieldWarningClassName);
       var inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
+      var highlightedOption = null;
       var textFieldInput;
-      // Used for focus management while popper is opened
-      var actionItemRef = React.useRef();
       var textFieldRef = function textFieldRef(element) {
         // We want to use this element in callback function
         textFieldInput = element;
@@ -4918,14 +4938,13 @@
         // item insertion and input text is found inside the 'options'
         var isActionDisabled = preventDuplicateInsertion && checkIfDuplicateItem(inputText, options);
         // Display warning icon if disabled
-        var actionStartIconId = isActionDisabled ? 'warning-solid' : actionIconId;
+        var actionStartIconId = isActionDisabled ? 'warning-solid' : (actionItem === null || actionItem === void 0 ? void 0 : actionItem.iconId) || 'add';
         var defaultText = inputText ? "Add \"" + inputText + "\"" : DEFAULT_ACTION_ITEM_TEXT;
-        var nonDisabledText = actionItemText ? actionItemText : defaultText;
+        var nonDisabledText = (actionItem === null || actionItem === void 0 ? void 0 : actionItem.text) || defaultText;
         var itemText = isActionDisabled ? 'Value already exists' : nonDisabledText;
-        // If simple text, we need to give it a class so that
-        // styling for displaying ellipsis on a long text
-        // can be applied. If it is custom node coming from the
-        // consumer, then leave it as it is.
+        // If simple text, we need to give it a class so that styling for
+        // displaying ellipsis on a long text can be applied. If it is
+        // custom node coming from the consumer, then leave it as it is.
         var itemTextNode = isString$1(itemText) ? jsxRuntime.jsx("span", __assign({
           className: "dot-action-item-text"
         }, {
@@ -4993,10 +5012,11 @@
       } || undefined;
       // Create callback when action item click event handler is defined,
       // free-solo mode is NOT set and 'Enter' key has been pressed
-      var handleKeyDown = !freesolo && onActionItemClick && function (event) {
+      var handleKeyDown = allowActionButtonClick && function (event) {
         if (event.key === 'Enter') {
+          var isDuplicate = checkIfDuplicateItem(inputText, options);
           // Do NOT execute callback if duplicate item or have selected an option from the dropdown
-          if (preventDuplicateInsertion && checkIfDuplicateItem(inputText, options) || highlightedOption) return;
+          if (preventDuplicateInsertion && isDuplicate || highlightedOption) return;
           onActionButtonClick();
         }
       } || undefined;
@@ -5009,7 +5029,7 @@
         });
       };
       var handleTagsRender = function handleTagsRender() {
-        if (!multiple) return;
+        if (!multiple || isString$1(defaultValue)) return;
         return renderTags || handleRenderChips;
       };
       var renderErrorOrWarningIcon = function renderErrorOrWarningIcon() {
@@ -5046,7 +5066,7 @@
           inputRoot: inputRootClasses
         },
         "data-testid": dataTestId,
-        defaultValue: defaultValue,
+        defaultValue: multiple && isString$1(defaultValue) ? [defaultValue] : defaultValue,
         disabled: disabled,
         filterOptions: filterOptions,
         filterSelectedOptions: filterSelectedOptions,
@@ -5080,7 +5100,7 @@
         onKeyDown: handleKeyDown,
         // We want to close the popper each time focus is shifted from the autocomplete
         onOpen: handleOpen,
-        open: !readOnly && (open || isOpened),
+        open: popperOpen,
         options: sortOptions(),
         renderInput: function (params) {
           // InputBaseComponentProps is used here because that is the base
@@ -5140,7 +5160,7 @@
                     (_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                   }
                 },
-                placeholder: showPlaceholder ? placeholder : undefined,
+                placeholder: showPlaceholder && placeholder,
                 required: required,
                 size: size,
                 variant: "outlined"
@@ -5205,7 +5225,7 @@
       componentId: "sc-7cg374-1"
     })(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "])), rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]);
+      return styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "])), rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]);
     });
     var templateObject_1$I, templateObject_2$F, templateObject_3$9, templateObject_4$7;
 
@@ -6057,6 +6077,7 @@
           className: "dot-dialog-title"
         }, {
           children: [renderNodeOrTypography(title, 'h2'), closeIconVisible && jsxRuntime.jsx(DotIconButton, {
+            ariaLabel: "close dialog",
             iconId: "close",
             onClick: handleCancel,
             size: "small"
@@ -6792,6 +6813,7 @@
         onClick = _a.onClick,
         _g = _a.size,
         size = _g === void 0 ? 'medium' : _g,
+        startIcon = _a.startIcon,
         tooltip = _a.tooltip,
         _h = _a.type,
         type = _h === void 0 ? 'primary' : _h;
@@ -6809,6 +6831,7 @@
         isSubmit: isSubmit,
         onClick: onClick,
         size: size,
+        startIcon: startIcon,
         tooltip: tooltip,
         type: type
       }, {
@@ -6981,7 +7004,7 @@
       componentId: "eign2a-0"
     })(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["{\n    &.dot-switch {\n      span.Mui-disabled {\n        color: ", ";\n      }\n\n      .MuiSwitch-switchBase\n        :not(.Mui-checked)\n        :not(.Mui-disabled) {\n            color: ", ";\n        }\n      }\n  "], ["{\n    &.dot-switch {\n      span.Mui-disabled {\n        color: ", ";\n      }\n\n      .MuiSwitch-switchBase\n        :not(.Mui-checked)\n        :not(.Mui-disabled) {\n            color: ", ";\n        }\n      }\n  "])), theme.palette.grey[200], theme.palette.background.default);
+      return styled.css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["{\n    &.dot-switch {\n      span.Mui-disabled {\n        color: ", ";\n      }\n\n      .MuiSwitch-switchBase\n        :not(.Mui-checked)\n        :not(.Mui-disabled) {\n            color: ", ";\n\n          /* adjusted for a11y */\n          &.Mui-focusVisible .MuiTouchRipple-root {\n              color: ", ";\n          }\n        }\n      }\n  "], ["{\n    &.dot-switch {\n      span.Mui-disabled {\n        color: ", ";\n      }\n\n      .MuiSwitch-switchBase\n        :not(.Mui-checked)\n        :not(.Mui-disabled) {\n            color: ", ";\n\n          /* adjusted for a11y */\n          &.Mui-focusVisible .MuiTouchRipple-root {\n              color: ", ";\n          }\n        }\n      }\n  "])), theme.palette.grey[200], theme.palette.background.default, theme.palette.grey[200]);
     });
     var templateObject_1$q, templateObject_2$p;
 
@@ -7137,14 +7160,31 @@
         handleChange = _a.handleChange,
         index = _a.index;
       var props = controlProps;
+      var isFreeSolo = props.freesolo === undefined || props.freesolo;
       var value = getControlValue(controlName, formData) || [];
       var errorMessage = formData[controlName].errorMessage;
       var handleChangeFn = handleChange;
+      var handleFreeSoloChange = function handleFreeSoloChange(event) {
+        var _a;
+        if (event.key !== 'Enter') return;
+        var typedValue = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
+        var currentValue = value;
+        if (typedValue) {
+          checkIfDuplicateItem(typedValue, currentValue);
+          currentValue.push({
+            title: typedValue
+          });
+          handleChangeFn(controlName);
+        }
+      };
       return jsxRuntime.jsx(DotAutoComplete, __assign({}, props, {
         disabled: disabled,
         error: !!errorMessage,
         helperText: errorMessage || props.helperText,
         onChange: handleChangeFn(controlName),
+        onInputChange: isFreeSolo ? function (event) {
+          return handleFreeSoloChange(event);
+        } : null,
         value: value
       }), index);
     };
@@ -7348,12 +7388,11 @@
       var updateFormState = function updateFormState(_a) {
         var controlName = _a.controlName,
           newValue = _a.newValue,
-          formConfig = _a.formConfig,
           _b = _a.validate,
           validate = _b === void 0 ? true : _b;
         var fieldValidation = {};
         if (validate && liveValidation) {
-          fieldValidation = getControlValidation(controlName, newValue, formConfig);
+          fieldValidation = getControlValidation(controlName, newValue, config);
         }
         setFormState(function (prevFormState) {
           var _a;
@@ -7392,7 +7431,6 @@
         return function (_event, value) {
           updateFormState({
             controlName: controlName,
-            formConfig: config,
             newValue: value
           });
         };
@@ -7402,7 +7440,6 @@
           var newValue = e.target.checked;
           updateFormState({
             controlName: controlName,
-            formConfig: config,
             newValue: newValue,
             validate: false
           });
@@ -7412,7 +7449,6 @@
         return function (e, value) {
           updateFormState({
             controlName: controlName,
-            formConfig: config,
             newValue: value
           });
         };
@@ -7433,7 +7469,6 @@
           var newValue = e.target.value;
           updateFormState({
             controlName: controlName,
-            formConfig: config,
             newValue: newValue
           });
         };
@@ -8429,7 +8464,7 @@
       componentId: "sc-1qka0yq-0"
     })(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n    &.", " {\n      display: flex;\n      align-items: flex-start;\n      padding: 0;\n      width: 100%;\n\n      &.left {\n        flex-direction: row;\n        .", " {\n          border-left: 1px solid ", ";\n        }\n      }\n\n      &.right {\n        flex-direction: row-reverse;\n        .", " {\n          border-right: 1px solid ", ";\n        }\n      }\n\n      .", " {\n        padding: ", ";\n\n        &.MuiStepper-horizontal {\n          padding: 0;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .MuiStep-root {\n          width: 315px;\n\n          .dot-icon {\n            display: flex;\n            background: ", ";\n            border-radius: 50%;\n            color: ", ";\n            height: 28px;\n            width: 28px;\n          }\n\n          .dot-typography {\n            color: ", ";\n          }\n\n          .MuiStepContent-root {\n            border-left-color: ", ";\n            margin-bottom: ", ";\n          }\n\n          &.MuiStep-horizontal {\n            padding: ", ";\n\n            .dot-avatar i:before {\n              color: ", ";\n            }\n            .dot-avatar,\n            .dot-icon {\n              background: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n            .horizontal-step-description {\n              color: ", ";\n            }\n\n            &:hover {\n              cursor: pointer;\n            }\n\n            &.completed {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.active {\n              background: ", ";\n            }\n\n            &.error {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.in-progress {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n            }\n          }\n\n          &.MuiStep-vertical {\n            &.completed {\n              .dot-typography,\n              .dot-icon {\n                color: ", ";\n              }\n            }\n\n            &.active {\n              .dot-icon {\n                background: ", ";\n                color: ", ";\n              }\n              .step-label.dot-typography {\n                color: ", ";\n              }\n              .dot-typography {\n                color: ", ";\n              }\n            }\n\n            &.error {\n              .dot-typography {\n                color: ", ";\n              }\n\n              .dot-icon {\n                background: ", ";\n                border: 1px solid ", ";\n                color: ", ";\n              }\n            }\n          }\n\n          &.disabled {\n            .dot-icon {\n              color: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n          }\n\n          &:last-of-type .MuiStepContent-root {\n            border-left-color: transparent;\n          }\n        }\n      }\n\n      .", " {\n        width: 100%;\n        height: calc(100vh - 78px);\n        overflow-y: auto;\n\n        &.center-content {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          text-align: center;\n        }\n\n        .step-content-container {\n          padding: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      display: flex;\n      align-items: flex-start;\n      padding: 0;\n      width: 100%;\n\n      &.left {\n        flex-direction: row;\n        .", " {\n          border-left: 1px solid ", ";\n        }\n      }\n\n      &.right {\n        flex-direction: row-reverse;\n        .", " {\n          border-right: 1px solid ", ";\n        }\n      }\n\n      .", " {\n        padding: ", ";\n\n        &.MuiStepper-horizontal {\n          padding: 0;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .MuiStep-root {\n          width: 315px;\n\n          .dot-icon {\n            display: flex;\n            background: ", ";\n            border-radius: 50%;\n            color: ", ";\n            height: 28px;\n            width: 28px;\n          }\n\n          .dot-typography {\n            color: ", ";\n          }\n\n          .MuiStepContent-root {\n            border-left-color: ", ";\n            margin-bottom: ", ";\n          }\n\n          &.MuiStep-horizontal {\n            padding: ", ";\n\n            .dot-avatar i:before {\n              color: ", ";\n            }\n            .dot-avatar,\n            .dot-icon {\n              background: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n            .horizontal-step-description {\n              color: ", ";\n            }\n\n            &:hover {\n              cursor: pointer;\n            }\n\n            &.completed {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.active {\n              background: ", ";\n            }\n\n            &.error {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.in-progress {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n            }\n          }\n\n          &.MuiStep-vertical {\n            &.completed {\n              .dot-typography,\n              .dot-icon {\n                color: ", ";\n              }\n            }\n\n            &.active {\n              .dot-icon {\n                background: ", ";\n                color: ", ";\n              }\n              .step-label.dot-typography {\n                color: ", ";\n              }\n              .dot-typography {\n                color: ", ";\n              }\n            }\n\n            &.error {\n              .dot-typography {\n                color: ", ";\n              }\n\n              .dot-icon {\n                background: ", ";\n                border: 1px solid ", ";\n                color: ", ";\n              }\n            }\n          }\n\n          &.disabled {\n            .dot-icon {\n              color: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n          }\n\n          &:last-of-type .MuiStepContent-root {\n            border-left-color: transparent;\n          }\n        }\n      }\n\n      .", " {\n        width: 100%;\n        height: calc(100vh - 78px);\n        overflow-y: auto;\n\n        &.center-content {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          text-align: center;\n        }\n\n        .step-content-container {\n          padding: ", ";\n        }\n      }\n    }\n  "])), rootClassName$i, contentClassName, theme.palette.layer.n200, contentClassName, theme.palette.layer.n200, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3));
+      return styled.css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n    &.", " {\n      display: flex;\n      align-items: flex-start;\n      padding: 0;\n      width: 100%;\n\n      &.left {\n        flex-direction: row;\n        .", " {\n          border-left: 1px solid ", ";\n        }\n      }\n\n      &.right {\n        flex-direction: row-reverse;\n        .", " {\n          border-right: 1px solid ", ";\n        }\n      }\n\n      .", " {\n        padding: ", ";\n\n        &.MuiStepper-horizontal {\n          padding: 0;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .MuiStep-root {\n          width: 315px;\n\n          .dot-icon {\n            display: flex;\n            background: ", ";\n            border-radius: 50%;\n            color: ", ";\n            height: 28px;\n            width: 28px;\n          }\n\n          .dot-typography {\n            color: ", ";\n          }\n\n          .MuiStepContent-root {\n            border-left-color: ", ";\n          }\n\n          &.MuiStep-horizontal {\n            padding: ", ";\n\n            .dot-avatar i:before {\n              color: ", ";\n            }\n            .dot-avatar,\n            .dot-icon {\n              background: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n            .horizontal-step-description {\n              color: ", ";\n            }\n\n            &:hover {\n              cursor: pointer;\n            }\n\n            &.completed {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.active {\n              background: ", ";\n            }\n\n            &.error {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.in-progress {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n            }\n          }\n\n          &.MuiStep-vertical {\n            &.completed {\n              .dot-typography,\n              .dot-icon {\n                color: ", ";\n              }\n            }\n\n            &.active {\n              .dot-icon {\n                background: ", ";\n                color: ", ";\n              }\n              .step-label.dot-typography {\n                color: ", ";\n              }\n              .dot-typography {\n                color: ", ";\n              }\n            }\n\n            &.error {\n              .dot-typography {\n                color: ", ";\n              }\n\n              .dot-icon {\n                background: ", ";\n                border: 1px solid ", ";\n                color: ", ";\n              }\n            }\n          }\n\n          &.disabled {\n            .dot-icon {\n              color: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n          }\n\n          &:last-of-type .MuiStepContent-root {\n            border-left-color: transparent;\n          }\n        }\n      }\n\n      .", " {\n        width: 100%;\n        height: calc(100vh - 78px);\n        overflow-y: auto;\n\n        &.center-content {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          text-align: center;\n        }\n\n        .step-content-container {\n          padding: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      display: flex;\n      align-items: flex-start;\n      padding: 0;\n      width: 100%;\n\n      &.left {\n        flex-direction: row;\n        .", " {\n          border-left: 1px solid ", ";\n        }\n      }\n\n      &.right {\n        flex-direction: row-reverse;\n        .", " {\n          border-right: 1px solid ", ";\n        }\n      }\n\n      .", " {\n        padding: ", ";\n\n        &.MuiStepper-horizontal {\n          padding: 0;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .MuiStep-root {\n          width: 315px;\n\n          .dot-icon {\n            display: flex;\n            background: ", ";\n            border-radius: 50%;\n            color: ", ";\n            height: 28px;\n            width: 28px;\n          }\n\n          .dot-typography {\n            color: ", ";\n          }\n\n          .MuiStepContent-root {\n            border-left-color: ", ";\n          }\n\n          &.MuiStep-horizontal {\n            padding: ", ";\n\n            .dot-avatar i:before {\n              color: ", ";\n            }\n            .dot-avatar,\n            .dot-icon {\n              background: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n            .horizontal-step-description {\n              color: ", ";\n            }\n\n            &:hover {\n              cursor: pointer;\n            }\n\n            &.completed {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.active {\n              background: ", ";\n            }\n\n            &.error {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.in-progress {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n            }\n          }\n\n          &.MuiStep-vertical {\n            &.completed {\n              .dot-typography,\n              .dot-icon {\n                color: ", ";\n              }\n            }\n\n            &.active {\n              .dot-icon {\n                background: ", ";\n                color: ", ";\n              }\n              .step-label.dot-typography {\n                color: ", ";\n              }\n              .dot-typography {\n                color: ", ";\n              }\n            }\n\n            &.error {\n              .dot-typography {\n                color: ", ";\n              }\n\n              .dot-icon {\n                background: ", ";\n                border: 1px solid ", ";\n                color: ", ";\n              }\n            }\n          }\n\n          &.disabled {\n            .dot-icon {\n              color: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n          }\n\n          &:last-of-type .MuiStepContent-root {\n            border-left-color: transparent;\n          }\n        }\n      }\n\n      .", " {\n        width: 100%;\n        height: calc(100vh - 78px);\n        overflow-y: auto;\n\n        &.center-content {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          text-align: center;\n        }\n\n        .step-content-container {\n          padding: ", ";\n        }\n      }\n    }\n  "])), rootClassName$i, contentClassName, theme.palette.layer.n200, contentClassName, theme.palette.layer.n200, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3));
     });
     var StepContentWrapper = styled__default["default"].div.withConfig({
       displayName: "Stepperstyles__StepContentWrapper",
@@ -8485,17 +8520,19 @@
         onSubmit = _a.onSubmit,
         _e = _a.orientation,
         orientation = _e === void 0 ? 'vertical' : _e,
+        _f = _a.disableUncompletedStepNav,
+        disableUncompletedStepNav = _f === void 0 ? false : _f,
         steps = _a.steps,
-        _f = _a.stepsPosition,
-        stepsPosition = _f === void 0 ? 'left' : _f,
-        _g = _a.submitButtonText,
-        submitButtonText = _g === void 0 ? 'Complete' : _g;
-      var _h = React.useState(activeStep),
-        currentStep = _h[0],
-        setActiveStep = _h[1];
-      var _j = React.useState(false),
-        isStickyBottom = _j[0],
-        setIsStickyBottom = _j[1];
+        _g = _a.stepsPosition,
+        stepsPosition = _g === void 0 ? 'left' : _g,
+        _h = _a.submitButtonText,
+        submitButtonText = _h === void 0 ? 'Complete' : _h;
+      var _j = React.useState(activeStep),
+        currentStep = _j[0],
+        setActiveStep = _j[1];
+      var _k = React.useState(false),
+        isStickyBottom = _k[0],
+        setIsStickyBottom = _k[1];
       var actionsRef = React.useRef(null);
       var stepperContentRef = React.useRef(null);
       var isHorizontal = orientation === 'horizontal';
@@ -8572,6 +8609,14 @@
       };
       var navigateToStep = function navigateToStep(id) {
         if (id !== currentStep) {
+          if (disableUncompletedStepNav) {
+            var previousStep = steps.find(function (step) {
+              return step.id === id - 1;
+            });
+            if (previousStep && !previousStep.completed) {
+              return;
+            }
+          }
           var stepSelected = steps.find(function (step) {
             return step.id === id;
           });
@@ -9157,7 +9202,7 @@
       componentId: "nko9j-0"
     })(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    &.", " {\n      &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n        padding-left: 26px;\n      }\n\n      .dot-cell-typography {\n        font-family: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n        padding-left: 26px;\n      }\n\n      .dot-cell-typography {\n        font-family: ", ";\n      }\n    }\n  "])), rootClassName$b, theme.typography.h4.fontFamily);
+      return styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    &.", " {\n      &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n        padding-left: 26px;\n      }\n\n      > span.MuiTableSortLabel-root.Mui-focusVisible {\n        .dot-cell-typography {\n          color: ", ";\n          text-decoration: underline;\n        }\n      }\n\n      .dot-cell-typography {\n        font-family: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n        padding-left: 26px;\n      }\n\n      > span.MuiTableSortLabel-root.Mui-focusVisible {\n        .dot-cell-typography {\n          color: ", ";\n          text-decoration: underline;\n        }\n      }\n\n      .dot-cell-typography {\n        font-family: ", ";\n      }\n    }\n  "])), rootClassName$b, theme.palette.primary.main, theme.typography.h4.fontFamily);
     });
     var templateObject_1$b, templateObject_2$a;
 
@@ -9748,6 +9793,7 @@
           ref: wrapperRef
         }, {
           children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsxRuntime.jsx(DotIconButton, {
+            ariaLabel: "more options",
             className: "dot-table-action-icon",
             iconId: "options",
             iconSize: "small",
@@ -9939,6 +9985,7 @@
             children: errorText
           }), void 0)]
         }), void 0), jsxRuntime.jsx(DotIconButton, {
+          ariaLabel: "delete file",
           className: rootClassName$5 + "-end-icon",
           "data-testid": dataTestId && dataTestId + "-end-icon",
           disabled: disableDelete,
@@ -10592,6 +10639,7 @@
                     "data-testid": "dot-error-icon",
                     iconId: "error-solid"
                   }, void 0), jsxRuntime.jsx(DotIconButton, {
+                    ariaLabel: "Open date picker",
                     "data-testid": "date-picker-open-btn",
                     iconId: "calendar",
                     onClick: pickerButtonProps.onClick,
@@ -11084,6 +11132,7 @@
                       "data-testid": dataTestId && dataTestId + "-input-error-icon",
                       iconId: "error-solid"
                     }, void 0), !disableOpenPicker && !isComponentReadOnly && !disabled && jsxRuntime.jsx(DotIconButton, {
+                      ariaLabel: "Open time picker",
                       "data-testid": dataTestId && dataTestId + "-open-btn",
                       iconId: "pending-clock",
                       onClick: function (_event) {

package/lib/components/accordion/Accordion.stories.d.ts

@@ -1,8 +1,8 @@
-import { Story, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { AccordionProps } from './Accordion';
 declare const _default: ComponentMeta<({ actions, ariaLabel, children, className, "data-testid": dataTestId, disabled, expanded, hasElevation, onChange, square, startIcon, summary, noWrap, }: AccordionProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<AccordionProps>;
-export declare const WithExpanded: Story<AccordionProps>;
-export declare const WithStartIcons: Story<AccordionProps>;
-export declare const WithNoWrap: Story<AccordionProps>;
+export declare const Default: any;
+export declare const WithExpanded: any;
+export declare const WithStartIcons: any;
+export declare const WithNoWrap: any;

package/lib/components/auto-complete/AutoComplete.d.ts

@@ -2,23 +2,8 @@ import { ChangeEvent, FocusEvent, HTMLAttributes, JSXElementConstructor, ReactNo
 import { AutocompleteCloseReason, AutocompleteGetTagProps, AutocompleteRenderOptionState, FilterOptionsState } from '@mui/material';
 import { CommonProps } from '../CommonProps';
 import { inputSizeOptions } from '../input-form-fields/InputFormFields.propTypes';
+import { ActionItem, AutoCompleteOption, AutoCompleteValue } from './utils/interface';
 export declare const DEFAULT_ACTION_ITEM_TEXT = "Add new item";
-export interface ActionItem {
-    /** The icon to display on the button */
-    iconId?: string;
-    /** Event callback */
-    onClick: (inputText?: string) => void;
-    /** If set to true, it will prevent duplicate item insertion */
-    preventDuplicateInsertion?: boolean;
-    /** Text/Node displayed */
-    text?: string | ReactNode;
-}
-export declare type AutoCompleteValue = string | string[] | AutoCompleteOption | AutoCompleteOption[] | null;
-export interface AutoCompleteOption {
-    error?: boolean;
-    group?: string;
-    title: string;
-}
 /**
  * AutoCompleteOption can be extended for the use case when customizing
  * autocomplete option rendering by using `renderOption` prop.

package/lib/components/auto-complete/AutoComplete.stories.d.ts

@@ -1,5 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
-import { AutoCompleteOption, AutoCompleteProps } from './AutoComplete';
+import { AutoCompleteProps } from './AutoComplete';
+import { AutoCompleteOption } from './utils/interface';
 import { AutoCompleteWithRenderOption } from './Autocomplete.stories.data';
 declare const _default: ComponentMeta<(<T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element)>;
 export default _default;

package/lib/components/auto-complete/Autocomplete.stories.data.d.ts

@@ -1,5 +1,6 @@
 import { ChangeEvent } from 'react';
-import { ActionItem, AutoCompleteOption, AutoCompleteProps, AutoCompleteValue } from './AutoComplete';
+import { AutoCompleteProps } from './AutoComplete';
+import { ActionItem, AutoCompleteOption, AutoCompleteValue } from './utils/interface';
 import { CommonProps } from '../CommonProps';
 export declare const movies: AutoCompleteOption[];
 export declare const handleActionItemClick: (newItem?: string) => void;

package/lib/components/auto-complete/index.d.ts

@@ -1,3 +1,4 @@
 export type { AutocompleteRenderOptionState, FilterOptionsState, } from '@mui/material';
 export * from './AutoComplete';
+export * from './utils/interface';
 export { parseAutoCompleteValue } from './utils/helpers';

package/lib/components/auto-complete/utils/helpers.d.ts

@@ -1,6 +1,6 @@
 import { AutocompleteGetTagProps } from '@mui/material';
 import { ChipSize } from '../../chip/Chip';
-import { AutoCompleteOption, AutoCompleteValue } from '../AutoComplete';
+import { AutoCompleteOption, AutoCompleteValue } from './interface';
 export declare const parseAutoCompleteValue: (value: AutoCompleteValue) => string;
 export interface GetChipsFromAutocompleteProps {
     chipSize?: ChipSize;

package/lib/components/auto-complete/utils/interface.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface ActionItem {
+    /** The icon to display on the button */
+    iconId?: string;
+    /** Event callback */
+    onClick: (inputText?: string) => void;
+    /** If set to true, it will prevent duplicate item insertion */
+    preventDuplicateInsertion?: boolean;
+    /** Text/Node displayed */
+    text?: string | ReactNode;
+}
+export declare type AutoCompleteValue = string | string[] | AutoCompleteOption | AutoCompleteOption[] | null;
+export interface AutoCompleteOption {
+    error?: boolean;
+    group?: string;
+    title: string;
+}

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

@@ -15,6 +15,8 @@ export interface AvatarProps extends CommonProps {
     iconId?: string;
     /** Source for the image used for the avatar */
     imageSrc?: string;
+    /** The number to be displayed. Only the first 2 digits will be displayed */
+    number?: number;
     /** Event callback */
     onClick?: (event: MouseEvent) => void;
     /** Size of avatar displayed */
@@ -32,4 +34,4 @@ export interface AvatarProps extends CommonProps {
     /** The shape of the avatar */
     variant?: AvatarVariant;
 }
-export declare const DotAvatar: ({ alt, ariaLabel, ariaRole, className, component, color, "data-testid": dataTestId, iconId, imageSrc, onClick, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => JSX.Element;
+export declare const DotAvatar: ({ alt, ariaLabel, ariaRole, className, component, color, "data-testid": dataTestId, iconId, imageSrc, onClick, number, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => JSX.Element;