@digital-ai/dot-components 2.8.1 → 2.9.0

package/CHANGE_LOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## [2.9.0](https://www.npmjs.com/package/@digital-ai/dot-components) (06/07/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.8.2...2.9.0)
+
+**Features:**
+
+- S-90959: `DotAvatar` support numbers [\#1515](https://github.com/digital-ai/dot-components/pull/1515) ([CWSites](https://github.com/CWSites))
+
+**Fixed bugs:**
+
+- S-90959: Update breadcrumb separator alignment [\#1517](https://github.com/digital-ai/dot-components/pull/1517) ([CWSites](https://github.com/CWSites))
+- D-25282: parse defaultValue according to multiple true/false [\#1510](https://github.com/digital-ai/dot-components/pull/1510) ([CWSites](https://github.com/CWSites))
+- D-25283: AutoComplete options should default to an empty array [\#1509](https://github.com/digital-ai/dot-components/pull/1509) ([CWSites](https://github.com/CWSites))
+
+**Misc:**
+
+- S-91984: add default ariaLabel to DotIconButton for a11y [\#1514](https://github.com/digital-ai/dot-components/pull/1514) ([CWSites](https://github.com/CWSites))
+- Refactor Autocomplete Popper to be separate file [\#1513](https://github.com/digital-ai/dot-components/pull/1513) ([CWSites](https://github.com/CWSites))
+
+## [2.8.2](https://www.npmjs.com/package/@digital-ai/dot-components) (05/26/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.11...2.8.2)
+
+**Fixed bugs:**
+
+- S-91947: DotStepper step onClick validation [\#1503](https://github.com/digital-ai/dot-components/pull/1503) ([ryangamble](https://github.com/ryangamble))
+- S-92200: Dynamic form autocomplete needs to handle free-form input [\#1490](https://github.com/digital-ai/dot-components/pull/1490) ([jmcnally](https://github.com/jmcnally))
+
+**Misc:**
+
+- S-91987: update drawer to have correct aria attributes [\#1506](https://github.com/digital-ai/dot-components/pull/1506) ([CWSites](https://github.com/CWSites))
+- S-91988: components missing focus visibility indicator [\#1504](https://github.com/digital-ai/dot-components/pull/1504) ([CWSites](https://github.com/CWSites))
+
+## [1.21.11](https://www.npmjs.com/package/@digital-ai/dot-components) (05/25/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.8.1...1.21.11)
+
+**Features:**
+
+- S-92577 `DotAutoComplete`: expose `inputValue` prop  [\#1502](https://github.com/digital-ai/dot-components/pull/1502) ([angel-git](https://github.com/angel-git))
+
 ## [2.8.1](https://www.npmjs.com/package/@digital-ai/dot-components) (05/17/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.8.0...2.8.1)
@@ -118,7 +159,6 @@
 **Features:**
 
 - S-90954: `TimePicker` component [\#1432](https://github.com/digital-ai/dot-components/pull/1432) ([dmiletic85](https://github.com/dmiletic85))
-- \[Freestyle Week\] Utilize `dot-icons` package [\#1393](https://github.com/digital-ai/dot-components/pull/1393) ([CWSites](https://github.com/CWSites))
 - S-87859: Stepper component [\#1392](https://github.com/digital-ai/dot-components/pull/1392) ([nikolinadapic](https://github.com/nikolinadapic))
 
 ## [2.5.5](https://www.npmjs.com/package/@digital-ai/dot-components) (03/31/2023)
@@ -212,6 +252,10 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.3.2...2.4.0)
 
+**Features:**
+
+- \[Freestyle Week\] Utilize `dot-icons` package [\#1393](https://github.com/digital-ai/dot-components/pull/1393) ([CWSites](https://github.com/CWSites))
+
 **Fixed bugs:**
 
 - \#1390: Addressing some SQ review items-Issue\#1390 [\#1391](https://github.com/digital-ai/dot-components/pull/1391) ([jmcnally](https://github.com/jmcnally))
@@ -445,10 +489,6 @@
 
 - D-22241: `DotFileListItem`: fix focus states and expose `onKeyPress` [\#1254](https://github.com/digital-ai/dot-components/pull/1254) ([dmiletic85](https://github.com/dmiletic85))
 
-**Misc:**
-
-- S-86694: Extract agility theme [\#1242](https://github.com/digital-ai/dot-components/pull/1242) ([CWSites](https://github.com/CWSites))
-
 ## [2.0.0-rc.1](https://www.npmjs.com/package/@digital-ai/dot-components) (08/31/2022)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.1...2.0.0-rc.1)
@@ -462,6 +502,7 @@
 
 - Release Candidate Workflow [\#1251](https://github.com/digital-ai/dot-components/pull/1251) ([CWSites](https://github.com/CWSites))
 - S-85001: add support for react 18 [\#1244](https://github.com/digital-ai/dot-components/pull/1244) ([CWSites](https://github.com/CWSites))
+- S-86694: Extract agility theme [\#1242](https://github.com/digital-ai/dot-components/pull/1242) ([CWSites](https://github.com/CWSites))
 
 ## [1.21.1](https://www.npmjs.com/package/@digital-ai/dot-components) (08/31/2022)
 
@@ -910,6 +951,7 @@
 **Fixed bugs:**
 
 - D-19337: `List`: Circular dependency [\#897](https://github.com/digital-ai/dot-components/pull/897) ([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))
 
 ## [1.5.3](https://www.npmjs.com/package/@digital-ai/dot-components) (12/17/2021)
@@ -918,7 +960,6 @@
 
 **Fixed bugs:**
 
-- D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
 - D-19321: `Breadcrumbs` - Circular dependency on `useBreadcrumbsObserver` [\#882](https://github.com/digital-ai/dot-components/pull/882) ([dmiletic85](https://github.com/dmiletic85))
 - S-79458: `Sidebar` & `List` updates [\#872](https://github.com/digital-ai/dot-components/pull/872) ([CWSites](https://github.com/CWSites))
 
@@ -1014,6 +1055,7 @@
 **Features:**
 
 - S-80473: Expose onFocus and onBlur callbacks for DotInputText and DotInputSelect components [\#832](https://github.com/digital-ai/dot-components/pull/832) ([selsemore](https://github.com/selsemore))
+- S-80268: `DotDynamicForm` improvements [\#821](https://github.com/digital-ai/dot-components/pull/821) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
 
@@ -1027,7 +1069,6 @@
 **Features:**
 
 - S-80369: Create `ProgressButton` component [\#822](https://github.com/digital-ai/dot-components/pull/822) ([dmiletic85](https://github.com/dmiletic85))
-- S-80268: `DotDynamicForm` improvements [\#821](https://github.com/digital-ai/dot-components/pull/821) ([dmiletic85](https://github.com/dmiletic85))
 - S-79696: change size of collapse icon button, add tooltip [\#819](https://github.com/digital-ai/dot-components/pull/819) ([CWSites](https://github.com/CWSites))
 - S-80264: Agility wrapper sandbox documentation [\#810](https://github.com/digital-ai/dot-components/pull/810) ([CWSites](https://github.com/CWSites))
 - S-79569: `DotTable` - ability to add classes to rows & cells [\#799](https://github.com/digital-ai/dot-components/pull/799) ([monapatel91](https://github.com/monapatel91))
@@ -1063,7 +1104,6 @@
 - S-80109: Expose built-in `leaveDelay`, `onClose`, `open` props on `DotTooltip` component [\#786](https://github.com/digital-ai/dot-components/pull/786) ([dmiletic85](https://github.com/dmiletic85))
 - S-76907: update ButtonToggle styles, update unit tests and add e2e tests [\#785](https://github.com/digital-ai/dot-components/pull/785) ([CWSites](https://github.com/CWSites))
 - S-80048: product wrapper demo [\#782](https://github.com/digital-ai/dot-components/pull/782) ([CWSites](https://github.com/CWSites))
-- Patch release [\#780](https://github.com/digital-ai/dot-components/pull/780) ([TheKeithStewart](https://github.com/TheKeithStewart))
 
 ## [1.3.2](https://www.npmjs.com/package/@digital-ai/dot-components) (11/05/2021)
 
@@ -1076,6 +1116,7 @@
 
 **Misc:**
 
+- Patch release [\#780](https://github.com/digital-ai/dot-components/pull/780) ([TheKeithStewart](https://github.com/TheKeithStewart))
 - S-79985: temporarily remove react-jsonschema-form from library [\#776](https://github.com/digital-ai/dot-components/pull/776) ([TheKeithStewart](https://github.com/TheKeithStewart))
 - Add submitButtonProps prop to DotJsonSchemaForm component [\#775](https://github.com/digital-ai/dot-components/pull/775) ([selsemore](https://github.com/selsemore))
 - S-76893: Webpack 4 - update peer dependencies [\#768](https://github.com/digital-ai/dot-components/pull/768) ([CWSites](https://github.com/CWSites))

package/index.esm.js

@@ -1634,11 +1634,22 @@ const AvatarContent = ({
   'data-testid': dataTestId,
   iconId,
   imageSrc,
+  number,
   size,
   text,
   type
 }) => {
+  const parsedNumber = () => {
+    if (!isNumber(number)) return;
+    const numberArray = number.toString().split('');
+    if (numberArray.length > 1) {
+      return `${numberArray[0]}${numberArray[1]}`;
+    } else {
+      return number;
+    }
+  };
   const parsedText = () => {
+    if (!isString$1(text)) return;
     const textArray = text.split(' ');
     if (textArray.length > 1) {
       const firstInitial = textArray[0].slice(0, 1);
@@ -1661,7 +1672,7 @@ const AvatarContent = ({
     return jsx(DotTypography, Object.assign({
       variant: size === 'small' ? 'caption' : getHeadingFromAvatarSize()
     }, {
-      children: parsedText()
+      children: parsedNumber() || parsedText()
     }), void 0);
   }
   return null;
@@ -1677,6 +1688,7 @@ const DotAvatar = ({
   iconId,
   imageSrc,
   onClick,
+  number,
   size: _size = 'medium',
   tabIndex: _tabIndex = 0,
   text: _text = alt,
@@ -1716,6 +1728,7 @@ const DotAvatar = ({
         "data-testid": dataTestId,
         iconId: iconId,
         imageSrc: imageSrc,
+        number: number,
         size: _size,
         text: _text,
         type: _type
@@ -2310,7 +2323,7 @@ const DotIconButton = ({
     title: tooltip
   }, {
     children: jsx(StyledIconButton, Object.assign({
-      "aria-label": ariaLabel,
+      "aria-label": ariaLabel || tooltip || `${iconId} icon button`,
       classes: {
         root: rootClasses
       },
@@ -2348,6 +2361,7 @@ const DotDrawerHeader = ({
     role: "heading"
   }, {
     children: [children, variant !== 'permanent' && jsx(DotIconButton, {
+      ariaLabel: "close drawer",
       className: "close-button",
       iconId: "close",
       onClick: onClose
@@ -2379,6 +2393,7 @@ const DotDrawerBody = ({
     role: _ariaRole
   }, {
     children: [children, !headerExists && variant !== 'permanent' && jsx(DotIconButton, {
+      ariaLabel: "close drawer",
       className: "dot-drawer-close-button",
       iconId: "close",
       onClick: onClose
@@ -2415,7 +2430,7 @@ const DotDrawerFooter = ({
 const DotDrawer = ({
   anchor: _anchor = 'right',
   ariaLabel,
-  ariaRole: _ariaRole = 'presentation',
+  ariaRole: _ariaRole = 'dialog',
   className,
   children,
   'data-testid': dataTestId,
@@ -2441,6 +2456,7 @@ const DotDrawer = ({
     }
   };
   const rootClasses = useStylesWithRootClass(rootClassName$U, className);
+  const backdropEnabled = _variant === 'temporary' && !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.hideBackdrop);
   const headerExists = !!drawerHeaderProps;
   const bodyTestId = drawerBodyProps ? drawerBodyProps[`data-testid`] : 'drawer-body';
   return jsxs(StyledDrawer, Object.assign({
@@ -2450,6 +2466,7 @@ const DotDrawer = ({
     }),
     anchor: _anchor,
     "aria-label": ariaLabel,
+    "aria-modal": backdropEnabled ? 'true' : 'false',
     classes: {
       root: rootClasses,
       paper: 'dot-drawer-paper'
@@ -3057,6 +3074,7 @@ function SearchInput({
     iconId: "search"
   }, void 0);
   const clearSearchIcon = jsx(DotIconButton, {
+    ariaLabel: "clear search text",
     iconId: "close",
     onClick: handleClear,
     size: "small",
@@ -3126,7 +3144,7 @@ const DotCopyButton = ({
     "data-testid": dataTestId
   }, {
     children: [!showCopiedIcon && jsx(DotIconButton, {
-      ariaLabel: _ariaLabel,
+      ariaLabel: _ariaLabel || 'copy to clipboard',
       "data-testid": `${dataTestId}-button`,
       iconId: "duplicate",
       onClick: copy,
@@ -3842,7 +3860,7 @@ const Brand = ({
     }), void 0), jsx(DotTooltip, Object.assign({
       title: "digital.ai"
     }, {
-      children: theme.palette.mode === "light" ? jsx(ForwardRef$1, {
+      children: theme.palette.mode === 'light' ? jsx(ForwardRef$1, {
         className: "company-name"
       }, void 0) : jsx(ForwardRef, {
         className: "company-name"
@@ -3948,6 +3966,7 @@ const DotSidebar = ({
       className: "go-back"
     }, {
       children: [jsx(DotIconButton, {
+        ariaLabel: "go back",
         className: "go-back-button",
         "data-testid": "back-button",
         iconId: backItem.iconId || 'back',
@@ -4323,7 +4342,9 @@ const getChipsFromAutocomplete = ({
   isReadOnly: _isReadOnly = false,
   values
 }) => {
+  if (values === undefined) return;
   return values.map((option, index) => {
+    if (!option) return null;
     const hasStringValue = isString$1(option);
     const optionAsString = option;
     const optionAsObject = option;
@@ -4378,7 +4399,7 @@ const DotAutoComplete = ({
   onInputChange,
   onOpen,
   open,
-  options,
+  options: _options = [],
   persistentLabel,
   placeholder,
   readOnly: _readOnly = false,
@@ -4390,23 +4411,21 @@ const DotAutoComplete = ({
   warning: _warning = false
 }) => {
   const [showPlaceholder, setShowPlaceholder] = useState(!value && !defaultValue);
-  const {
-    iconId: actionIconId = 'add',
-    text: actionItemText,
-    onClick: onActionItemClick,
-    preventDuplicateInsertion
-  } = actionItem || {};
-  const isActionItemDefined = onActionItemClick !== undefined;
-  let highlightedOption = null;
   const [isOpened, setIsOpened] = useState(false);
   const [inputText, setInputText] = useState('');
+  // Used for focus management while popper is opened
+  const actionItemRef = useRef();
+  const onActionItemClick = actionItem === null || actionItem === void 0 ? void 0 : actionItem.onClick;
+  const allowActionButtonClick = !_freesolo && onActionItemClick;
+  const isActionItemDefined = onActionItemClick !== undefined;
+  const popperOpen = !_readOnly && (open || isOpened);
+  const preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
   const textFieldWarningClassName = !_error && _warning && warningClassName;
   const rootClasses = useStylesWithRootClass(rootClassName$I, _size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$13, className, _readOnly ? 'read-only' : '', textFieldWarningClassName);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$13, _readOnly && 'read-only', textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !_dense && inputMediumClassName);
+  let highlightedOption = null;
   let textFieldInput;
-  // Used for focus management while popper is opened
-  const actionItemRef = useRef();
   const textFieldRef = element => {
     // We want to use this element in callback function
     textFieldInput = element;
@@ -4430,11 +4449,11 @@ const DotAutoComplete = ({
     setShowPlaceholder(parseAutoCompleteValue(val) === '');
   };
   const sortOptions = () => {
-    return _group ? options.sort((a, b) => {
+    return _group ? _options.sort((a, b) => {
       const aGroup = a.group ? a.group : '';
       const bGroup = b.group ? b.group : '';
       return -bGroup.localeCompare(aGroup);
-    }) : options;
+    }) : _options;
   };
   const handleBlur = event => {
     event.relatedTarget !== actionItemRef.current && setIsOpened(false);
@@ -4454,16 +4473,15 @@ const DotAutoComplete = ({
     }), void 0);
     // Disable action if customer explicitly enabled duplicate
     // item insertion and input text is found inside the 'options'
-    const isActionDisabled = preventDuplicateInsertion && checkIfDuplicateItem(inputText, options);
+    const isActionDisabled = preventDuplicateInsertion && checkIfDuplicateItem(inputText, _options);
     // Display warning icon if disabled
-    const actionStartIconId = isActionDisabled ? 'warning-solid' : actionIconId;
+    const actionStartIconId = isActionDisabled ? 'warning-solid' : (actionItem === null || actionItem === void 0 ? void 0 : actionItem.iconId) || 'add';
     const defaultText = inputText ? `Add "${inputText}"` : DEFAULT_ACTION_ITEM_TEXT;
-    const nonDisabledText = actionItemText ? actionItemText : defaultText;
+    const nonDisabledText = (actionItem === null || actionItem === void 0 ? void 0 : actionItem.text) || defaultText;
     const 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.
     const itemTextNode = isString$1(itemText) ? jsx("span", Object.assign({
       className: "dot-action-item-text"
     }, {
@@ -4529,10 +4547,11 @@ const DotAutoComplete = ({
   }) || undefined;
   // Create callback when action item click event handler is defined,
   // free-solo mode is NOT set and 'Enter' key has been pressed
-  const handleKeyDown = !_freesolo && onActionItemClick && (event => {
+  const handleKeyDown = allowActionButtonClick && (event => {
     if (event.key === 'Enter') {
+      const 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;
@@ -4543,7 +4562,7 @@ const DotAutoComplete = ({
     values
   });
   const handleTagsRender = () => {
-    if (!_multiple) return;
+    if (!_multiple || isString$1(defaultValue)) return;
     return renderTags || handleRenderChips;
   };
   const renderErrorOrWarningIcon = () => {
@@ -4580,7 +4599,7 @@ const DotAutoComplete = ({
       inputRoot: inputRootClasses
     },
     "data-testid": dataTestId,
-    defaultValue: defaultValue,
+    defaultValue: _multiple && isString$1(defaultValue) ? [defaultValue] : defaultValue,
     disabled: _disabled,
     filterOptions: filterOptions,
     filterSelectedOptions: _filterSelectedOptions,
@@ -4608,7 +4627,7 @@ const DotAutoComplete = ({
     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: params => {
       // InputBaseComponentProps is used here because that is the base
@@ -4668,7 +4687,7 @@ const DotAutoComplete = ({
                 (_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"
@@ -4726,7 +4745,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs).withConfig({
   componentId: "sc-7cg374-1"
 })(["", ""], ({
   theme
-}) => css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}.MuiBreadcrumbs-li:last-child{overflow:hidden;text-overflow:ellipsis;}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}}"], rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]));
+}) => css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;i{line-height:20px;}}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}.MuiBreadcrumbs-li:last-child{overflow:hidden;text-overflow:ellipsis;}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}}"], rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]));
 
 const compareWidth = (parentEl, childEl) => {
   return parentEl.getBoundingClientRect().width < childEl.getBoundingClientRect().width;
@@ -5536,6 +5555,7 @@ const DotDialog = ({
       className: "dot-dialog-title"
     }, {
       children: [renderNodeOrTypography(title, 'h2'), closeIconVisible && jsx(DotIconButton, {
+        ariaLabel: "close dialog",
         iconId: "close",
         onClick: handleCancel,
         size: "small"
@@ -6236,6 +6256,7 @@ const DotProgressButton = ({
   isSubmit: _isSubmit = false,
   onClick,
   size: _size = 'medium',
+  startIcon,
   tooltip,
   type: _type = 'primary'
 }) => {
@@ -6253,6 +6274,7 @@ const DotProgressButton = ({
     isSubmit: _isSubmit,
     onClick: onClick,
     size: _size,
+    startIcon: startIcon,
     tooltip: tooltip,
     type: _type
   }, {
@@ -6418,7 +6440,7 @@ const StyledSwitch = styled(Switch).withConfig({
   componentId: "eign2a-0"
 })(["", ""], ({
   theme
-}) => css(["{&.dot-switch{span.Mui-disabled{color:", ";}.MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled){color:", ";}}"], theme.palette.grey[200], theme.palette.background.default));
+}) => css(["{&.dot-switch{span.Mui-disabled{color:", ";}.MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled){color:", ";&.Mui-focusVisible .MuiTouchRipple-root{color:", ";}}}"], theme.palette.grey[200], theme.palette.background.default, theme.palette.grey[200]));
 
 const DotSwitch = ({
   ariaLabel,
@@ -6578,14 +6600,29 @@ const buildAutocompleteControl = ({
   index
 }) => {
   const props = controlProps;
+  const isFreeSolo = props.freesolo === undefined || props.freesolo;
   const value = getControlValue(controlName, formData) || [];
   const errorMessage = formData[controlName].errorMessage;
   const handleChangeFn = handleChange;
+  const handleFreeSoloChange = event => {
+    var _a;
+    if (event.key !== 'Enter') return;
+    const typedValue = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
+    const currentValue = value;
+    if (typedValue) {
+      checkIfDuplicateItem(typedValue, currentValue);
+      currentValue.push({
+        title: typedValue
+      });
+      handleChangeFn(controlName);
+    }
+  };
   return jsx(DotAutoComplete, Object.assign({}, props, {
     disabled: disabled,
     error: !!errorMessage,
     helperText: errorMessage || props.helperText,
     onChange: handleChangeFn(controlName),
+    onInputChange: isFreeSolo ? event => handleFreeSoloChange(event) : null,
     value: value
   }), index);
 };
@@ -6798,12 +6835,11 @@ const DotDynamicForm = ({
   const updateFormState = ({
     controlName,
     newValue,
-    formConfig,
     validate: _validate = true
   }) => {
     let fieldValidation = {};
     if (_validate && _liveValidation) {
-      fieldValidation = getControlValidation(controlName, newValue, formConfig);
+      fieldValidation = getControlValidation(controlName, newValue, config);
     }
     setFormState(prevFormState => Object.assign(Object.assign({}, prevFormState), {
       data: Object.assign(Object.assign({}, prevFormState.data), {
@@ -6838,7 +6874,6 @@ const DotDynamicForm = ({
   const handleAutocompleteChange = controlName => (_event, value) => {
     updateFormState({
       controlName,
-      formConfig: config,
       newValue: value
     });
   };
@@ -6846,7 +6881,6 @@ const DotDynamicForm = ({
     const newValue = e.target.checked;
     updateFormState({
       controlName,
-      formConfig: config,
       newValue,
       validate: false
     });
@@ -6854,7 +6888,6 @@ const DotDynamicForm = ({
   const handleCheckboxGroupChange = controlName => (e, value) => {
     updateFormState({
       controlName,
-      formConfig: config,
       newValue: value
     });
   };
@@ -6873,7 +6906,6 @@ const DotDynamicForm = ({
     const newValue = e.target.value;
     updateFormState({
       controlName,
-      formConfig: config,
       newValue
     });
   };
@@ -7753,7 +7785,7 @@ const StyledStepper = styled.div.withConfig({
   componentId: "sc-1qka0yq-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;.", "{border-left:1px solid ", ";}}&.right{flex-direction:row-reverse;.", "{border-right:1px solid ", ";}}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.dot-typography{color:", ";}.MuiStepContent-root{border-left-color:", ";margin-bottom:", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100%;height:calc(100vh - 78px);overflow-y:auto;&.center-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}.step-content-container{padding:", ";}}}"], 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)));
+}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;.", "{border-left:1px solid ", ";}}&.right{flex-direction:row-reverse;.", "{border-right:1px solid ", ";}}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.dot-typography{color:", ";}.MuiStepContent-root{border-left-color:", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100%;height:calc(100vh - 78px);overflow-y:auto;&.center-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}.step-content-container{padding:", ";}}}"], 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)));
 const StepContentWrapper = styled.div.withConfig({
   displayName: "Stepperstyles__StepContentWrapper",
   componentId: "sc-1qka0yq-1"
@@ -7801,6 +7833,7 @@ const DotStepper = ({
   onCancel,
   onSubmit,
   orientation: _orientation = 'vertical',
+  disableUncompletedStepNav: _disableUncompletedStepNav = false,
   steps,
   stepsPosition: _stepsPosition = 'left',
   submitButtonText: _submitButtonText = 'Complete'
@@ -7876,6 +7909,12 @@ const DotStepper = ({
   };
   const navigateToStep = id => {
     if (id !== currentStep) {
+      if (_disableUncompletedStepNav) {
+        const previousStep = steps.find(step => step.id === id - 1);
+        if (previousStep && !previousStep.completed) {
+          return;
+        }
+      }
       const stepSelected = steps.find(step => step.id === id);
       stepSelected.onClick && stepSelected.onClick();
       setActiveStep(id);
@@ -8430,7 +8469,7 @@ const StyledTableHeaderCell = styled(TableCell).withConfig({
   componentId: "nko9j-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{&.MuiTableCell-alignCenter > span.MuiTableSortLabel-root{padding-left:26px;}.dot-cell-typography{font-family:", ";}}"], rootClassName$b, theme.typography.h4.fontFamily));
+}) => css(["&.", "{&.MuiTableCell-alignCenter > span.MuiTableSortLabel-root{padding-left:26px;}> span.MuiTableSortLabel-root.Mui-focusVisible{.dot-cell-typography{color:", ";text-decoration:underline;}}.dot-cell-typography{font-family:", ";}}"], rootClassName$b, theme.palette.primary.main, theme.typography.h4.fontFamily));
 
 /**
  * A wrapper component around the TableCell component from @material-ui. This component should only
@@ -8972,6 +9011,7 @@ const DotTableActions = ({
       ref: wrapperRef
     }, {
       children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsx(DotIconButton, {
+        ariaLabel: "more options",
         className: "dot-table-action-icon",
         iconId: "options",
         iconSize: "small",
@@ -9134,6 +9174,7 @@ const DotFileListItem = ({
         children: errorText
       }), void 0)]
     }), void 0), jsx(DotIconButton, {
+      ariaLabel: "delete file",
       className: `${rootClassName$5}-end-icon`,
       "data-testid": dataTestId && `${dataTestId}-end-icon`,
       disabled: disableDelete,
@@ -9731,6 +9772,7 @@ const DotDatePicker = ({
               "data-testid": "dot-error-icon",
               iconId: "error-solid"
             }, void 0), jsx(DotIconButton, {
+              ariaLabel: "Open date picker",
               "data-testid": "date-picker-open-btn",
               iconId: "calendar",
               onClick: pickerButtonProps.onClick,
@@ -10161,6 +10203,7 @@ const DotTimePicker = ({
                   "data-testid": dataTestId && `${dataTestId}-input-error-icon`,
                   iconId: "error-solid"
                 }, void 0), !_disableOpenPicker && !isComponentReadOnly && !disabled && jsx(DotIconButton, {
+                  ariaLabel: "Open time picker",
                   "data-testid": dataTestId && `${dataTestId}-open-btn`,
                   iconId: "pending-clock",
                   onClick: _event => handleTimePickerButtonClick(),