@digital-ai/dot-components 4.5.0 → 4.6.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import { Tooltip, InputAdornment, InputLabel, TextField, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Toolbar, Fade, StyledEngineProvider, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, Snackbar, RadioGroup, Radio, Switch, Skeleton, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
+import { Tooltip, InputAdornment, InputLabel, TextField, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Toolbar, Fade, StyledEngineProvider, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Chip, Autocomplete, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, Snackbar, RadioGroup, Radio, Switch, Skeleton, ButtonGroup, Stepper, Step, StepLabel, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
@@ -231,12 +231,22 @@ const StyledTextField = styled(TextField)`
     &.${rootClassName$1l} {
       .MuiInputBase-root {
         margin-bottom: 0;
+
+        &:not(.MuiAutocomplete-inputRoot) {
+          &.MuiInputBase-adornedStart {
+            padding-left: ${theme.spacing(1.5)};
+          }
+          &.MuiInputBase-adornedEnd {
+            padding-right: ${theme.spacing(1)};
+          }
+        }
       }
       .MuiInputBase-input {
         box-sizing: content-box;
       }
       .MuiOutlinedInput-input {
-        padding: ${InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`};
+        padding: 18px ${InputProps.endAdornment ? '0px' : '12px'} 18px
+          ${InputProps.startAdornment ? '0px' : '12px'};
         &::placeholder {
           opacity: 1;
           color: ${theme.palette.figma.typography.gray};
@@ -280,6 +290,14 @@ const StyledTextField = styled(TextField)`
       .MuiInputBase-adornedEnd .clear-icon-button.hidden {
         visibility: hidden;
       }
+
+      .${adornmentIconClassName}.MuiInputAdornment-positionStart {
+        margin-right: ${theme.spacing(0.5)};
+      }
+
+      .${adornmentIconClassName}.MuiInputAdornment-positionEnd {
+        margin: ${theme.spacing(0)};
+      }
     }
 
     .dot-select,
@@ -377,12 +395,6 @@ const StyledTextField = styled(TextField)`
         }
       }
 
-      .MuiInputBase-inputAdornedStart {
-        padding-left: 12px;
-      }
-      .MuiInputBase-inputAdornedEnd {
-        padding-right: 12px;
-      }
       .MuiFormHelperText-root {
         ${formHelperTextRootStyles(theme)};
       }
@@ -6297,6 +6309,15 @@ const DotAppToolbar = ({
       }, index)
     }, index);
   });
+  const getLogoLinkComponent = (accessibilityLabel, customClass, dataTestid, linkHref, component) => {
+    return linkHref ? jsx(DotLink, {
+      ariaLabel: accessibilityLabel,
+      className: customClass,
+      "data-testid": dataTestid,
+      href: linkHref,
+      children: component
+    }) : component;
+  };
   const appToolbar = jsxs(StyledAppToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -6339,27 +6360,34 @@ const DotAppToolbar = ({
       })]
     }), jsxs("div", {
       className: "dot-branding",
-      children: [jsx(DotLink, {
-        ariaLabel: "Digital.ai Logo",
-        className: "primary-logo",
-        "data-testid": "primary-logo",
-        href: primaryLogoHref,
-        children: customLogo ? customLogo : jsx(DotTooltip, {
-          "data-testid": "logo-tooltip",
-          title: "digital.ai",
-          children: jsx(ForwardRef, {})
-        })
-      }), displayAppLogo && jsx(DotLink, {
-        ariaLabel: "Application Logo",
-        href: appLogoHref,
-        "data-testid": "app-logo",
-        children: jsx(DotAppLogo, {
-          appLogo: appLogo,
-          appLogoSmall: appLogoSmall,
-          className: "dot-app-logo",
-          smallOnly: !targetBreakpoint
+      children: [getLogoLinkComponent('Digital.ai Logo',
+      // aria-label
+      'primary-logo',
+      // class name
+      'primary-logo',
+      // data-testid
+      primaryLogoHref,
+      // href
+      customLogo ? customLogo : jsx(DotTooltip, {
+        "data-testid": "logo-tooltip",
+        title: primaryLogoHref ? 'digital.ai' : '',
+        children: jsx(ForwardRef, {
+          className: !primaryLogoHref ? 'primary-logo' : ''
         })
-      })]
+      })), displayAppLogo && getLogoLinkComponent('Application Logo',
+      // aria-label
+      '',
+      // class name
+      'app-logo',
+      // data-testid
+      appLogoHref,
+      // href
+      jsx(DotAppLogo, {
+        appLogo: appLogo,
+        appLogoSmall: appLogoSmall,
+        className: "dot-app-logo",
+        smallOnly: !targetBreakpoint
+      }))]
     }), children, jsxs("div", {
       className: "dot-right-side",
       children: [navItems.length > 0 && jsx("nav", {
@@ -6386,56 +6414,12 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$Y = 'dot-autocomplete';
-const inputRootClassName = 'dot-input-root';
-const inputMediumClassName = 'dot-input-medium';
-const StyledAutocomplete = styled(Autocomplete)`
-  ${({
-  theme
-}) => css`
-    &.${rootClassName$Y} {
-      &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
-        height: 56px;
-        padding-left: ${theme.spacing(2)};
-      }
-
-      .MuiInputBase-root.Mui-disabled,
-      .${readOnlyClassName$1} .MuiInputBase-root {
-        ${readOnlyStyles(theme)};
-      }
-
-      .${inputRootClassName} {
-        /* Override only top/bottom, but preserve left/right padding */
-        padding-top: ${theme.spacing(1)};
-        padding-bottom: ${theme.spacing(1)};
-      }
-
-      .dot-chip:first-child {
-        margin-left: ${theme.spacing(0)};
-      }
-
-      .dot-text-field {
-        .${inputRootClassName} {
-          min-height: ${theme.spacing(5)};
-        }
-
-        .warning-icon {
-          color: ${theme.palette.warning.main};
-        }
-        .error-icon {
-          color: ${theme.palette.error.main};
-        }
-      }
-    }
-  `}
-`;
-
-const rootClassName$X = 'dot-chip';
+const rootClassName$Y = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Y} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6541,7 +6525,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$X,
+  'data-pendoid': dataPendoId = rootClassName$Y,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6554,7 +6538,7 @@ const DotChip = ({
   tabIndex
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$X, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, className, errorClass);
   const getChipLabel = () => {
     if (charactersLimit <= 0 || children.length < charactersLimit) return children;
     const label = `${children.substring(0, charactersLimit)}...`;
@@ -6586,6 +6570,50 @@ const DotChip = ({
   });
 };
 
+const rootClassName$X = 'dot-autocomplete';
+const inputRootClassName = 'dot-input-root';
+const inputMediumClassName = 'dot-input-medium';
+const StyledAutocomplete = styled(Autocomplete)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$X} {
+      &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
+        height: 56px;
+        padding-left: ${theme.spacing(2)};
+      }
+
+      .MuiInputBase-root.Mui-disabled,
+      .${readOnlyClassName$1} .MuiInputBase-root {
+        ${readOnlyStyles(theme)};
+      }
+
+      .${inputRootClassName} {
+        /* Override only top/bottom, but preserve left/right padding */
+        padding-top: ${theme.spacing(1)};
+        padding-bottom: ${theme.spacing(1)};
+      }
+
+      .dot-chip:first-child {
+        margin-left: ${theme.spacing(0)};
+      }
+
+      .dot-text-field {
+        .${inputRootClassName} {
+          min-height: ${theme.spacing(5)};
+        }
+
+        .warning-icon {
+          color: ${theme.palette.warning.main};
+        }
+        .error-icon {
+          color: ${theme.palette.error.main};
+        }
+      }
+    }
+  `}
+`;
+
 // takes multiple types of data from autocomplete selection
 // parses value and returns a string which is saved to state
 const parseAutoCompleteValue = value => {
@@ -6642,6 +6670,11 @@ const isEmptyValue = value => {
     return !value;
   }
 };
+const getRootClassNames = (className, size) => useStylesWithRootClass(rootClassName$X, size === 'medium' && inputMediumClassName, className);
+const getTextFieldRootClassNames = (textFieldWarningClassName, isReadOnly) => useStylesWithRootClass(rootClassName$1l, isReadOnly && readOnlyClassName$1, textFieldWarningClassName);
+const getInputRootClassNames = isDense => useStylesWithRootClass(inputRootClassName, !isDense && inputMediumClassName);
+const getDefaultAutoCompleteValue = (hasMultiple, defaultValue) => hasMultiple && isString$2(defaultValue) ? [defaultValue] : defaultValue;
+const getAutoCompleteGroupBy = group => group ? option => option.group : undefined;
 
 function ariaLabelOrAlternates(ariaLabel, label, placeholder) {
   return ariaLabel || label || placeholder;
@@ -6654,7 +6687,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$Y,
+  'data-pendoid': dataPendoId = rootClassName$X,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -6696,12 +6729,18 @@ const DotAutoComplete = ({
   renderTags,
   required = false,
   size = 'small',
+  trimLongOptions = false,
   value,
   warning = false
 }) => {
   const [showPlaceholder, setShowPlaceholder] = useState(isEmptyValue(value) && isEmptyValue(defaultValue));
   const [isOpened, setIsOpened] = useState(false);
   const [inputText, setInputText] = useState('');
+  useEffect(() => {
+    if (trimLongOptions && renderOption) {
+      console.warn('Please use `trimLongOptions` or `renderOption`. If both are used, `trimLongOptions` is ignored.');
+    }
+  }, []);
   // Used for focus management while popper is opened
   const actionItemRef = useRef();
   const onActionItemClick = actionItem === null || actionItem === void 0 ? void 0 : actionItem.onClick;
@@ -6710,9 +6749,9 @@ const DotAutoComplete = ({
   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$Y, size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1l, readOnly && readOnlyClassName$1, textFieldWarningClassName);
-  const inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
+  const rootClasses = getRootClassNames(className, size);
+  const textFieldRootClasses = getTextFieldRootClassNames(textFieldWarningClassName, readOnly);
+  const inputRootClasses = getInputRootClassNames(dense);
   const popperClasses = useStylesWithRootClass(rootClassName$1b, popperClassName);
   let highlightedOption = null;
   let textFieldInput;
@@ -6881,6 +6920,24 @@ const DotAutoComplete = ({
       }), getInputAdornment(), nativeEndAdornment]
     });
   };
+  const renderTrimmedLongOptions = (props, option) => {
+    const key = 'id' in option ? option.id : option.title;
+    return jsx(DotTooltip, {
+      "data-testid": dataTestId && `${dataTestId}-option-tooltip-${key}`,
+      hoverVisibility: "overflow",
+      title: option.title,
+      children: jsx("li", Object.assign({}, props, {
+        children: jsx(DotTypography, {
+          noWrap: true,
+          variant: "body1",
+          children: option.title
+        })
+      }))
+    }, key);
+  };
+  const handleRenderOption = (props, option, state) => {
+    return renderOption ? renderOption(props, option, state) : renderTrimmedLongOptions(props, option);
+  };
   return jsx(StyledAutocomplete, {
     PopperComponent: DotPopper,
     "aria-label": ariaLabel,
@@ -6891,14 +6948,14 @@ const DotAutoComplete = ({
     },
     "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
-    defaultValue: multiple && isString$2(defaultValue) ? [defaultValue] : defaultValue,
+    defaultValue: getDefaultAutoCompleteValue(multiple, defaultValue),
     disabled: disabled,
     filterOptions: filterOptions,
     filterSelectedOptions: filterSelectedOptions,
     freeSolo: freesolo,
     getOptionLabel: option => parseAutoCompleteValue(option),
     getOptionDisabled: checkIfOptionDisabled,
-    groupBy: group ? option => option.group : undefined,
+    groupBy: getAutoCompleteGroupBy(group),
     id: inputId,
     inputValue: inputValue,
     isOptionEqualToValue: isOptionEqualToValue,
@@ -6989,7 +7046,7 @@ const DotAutoComplete = ({
       );
     },
     renderGroup: group ? renderGroup : undefined,
-    renderOption: renderOption,
+    renderOption: renderOption || trimLongOptions ? handleRenderOption : undefined,
     renderTags: handleTagsRender(),
     size: size,
     value: value
@@ -14804,7 +14861,8 @@ const stepListClassName = 'dot-stepper-list';
 const contentClassName = 'dot-stepper-content';
 const StyledStepper = styled.div`
   ${({
-  theme
+  theme,
+  offset
 }) => css`
     &.${rootClassName$p} {
       display: flex;
@@ -14820,22 +14878,25 @@ const StyledStepper = styled.div`
         flex-direction: row-reverse;
       }
 
-      .MuiStepConnector-root .MuiStepConnector-line {
-        border-left: 1px solid ${theme.palette.figma.border.default};
+      &.bottom {
+        flex-direction: column;
       }
 
-      .${stepListClassName} {
-        padding: ${theme.spacing(3)};
+      &.top {
+        flex-direction: column-reverse;
+      }
 
-        &.MuiStepper-horizontal {
-          padding: 0;
-          display: flex;
-          flex-direction: column;
+      .MuiStepConnector-root {
+        .MuiStepConnector-line {
+          border-left: 1px solid ${theme.palette.figma.border.default};
+        }
+        &.MuiStepConnector-vertical {
+          display: none;
         }
+      }
 
+      .${stepListClassName} {
         .MuiStep-root {
-          width: 315px;
-
           .dot-icon {
             display: flex;
             background: ${theme.palette.figma.primary.rippleLight};
@@ -14845,101 +14906,113 @@ const StyledStepper = styled.div`
             width: 28px;
           }
 
-          .MuiStepContent-root {
-            border-left: 1px solid ${theme.palette.figma.border.default};
+          .MuiStepLabel-root {
+            padding: 0px;
+            gap: 8px;
           }
 
-          &.MuiStep-horizontal {
-            padding: ${theme.spacing(1)};
+          &:hover {
+            cursor: pointer;
+          }
+
+          .MuiStepLabel-labelContainer {
+            overflow: hidden;
+            min-width: 0;
 
-            .dot-avatar i:before {
-              color: ${theme.palette.figma.icon.disabled};
-            }
-            .dot-avatar,
-            .dot-icon {
-              background: ${theme.palette.figma.neutral.active};
-            }
             .dot-typography {
-              color: ${theme.palette.figma.typography.disabled};
-            }
-            .horizontal-step-description {
-              color: ${theme.palette.figma.typography.gray};
+              white-space: nowrap;
             }
+          }
 
-            &:hover {
-              cursor: pointer;
-            }
+          .MuiStepContent-root {
+            border-left-color: transparent;
+          }
 
-            &.completed {
+          &.MuiStep-horizontal {
+            padding: ${theme.spacing(3)};
+
+            &.active:not(&.completed):not(&.in-progress) {
               .dot-avatar i:before {
-                color: ${theme.palette.figma.overlay.alerts.success.icon};
+                color: ${theme.palette.figma.icon.black};
               }
-              .dot-avatar,
-              .dot-icon {
-                background: ${theme.palette.figma.overlay.alerts.success.background};
+            }
+
+            &.active {
+              .dot-typography {
+                color: ${theme.palette.figma.primary.normal};
               }
             }
+          }
+
+          &.MuiStep-vertical {
+            width: 315px;
+            padding: 8px 4px 8px 16px;
 
             &.active {
               background: ${theme.palette.figma.border.darker};
             }
 
-            &.error {
-              .dot-avatar i:before {
-                color: ${theme.palette.figma.overlay.alerts.error.icon};
-              }
-              .dot-avatar,
-              .dot-icon {
-                background: ${theme.palette.figma.overlay.alerts.error.background};
-              }
+            .MuiStepConnector-root {
+              display: none;
             }
 
-            &.in-progress {
-              .dot-avatar i:before {
-                color: ${theme.palette.figma.primary.active};
-              }
+            .MuiStepLabel-root {
+              width: 90%;
+            }
+
+            .dot-typography {
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
             }
           }
 
-          &.MuiStep-vertical {
-            &.completed {
-              .dot-typography,
-              .dot-icon {
-                color: ${theme.palette.figma.typography.black};
-              }
+          &.inactive {
+            .step-label.dot-typography {
+              color: ${theme.palette.figma.typography.gray};
             }
+          }
 
-            &.active {
-              .dot-icon {
-                background: ${theme.palette.figma.primary.active};
-                color: ${theme.palette.figma.typography.white};
-              }
-              .step-label.dot-typography {
-                color: ${theme.palette.figma.primary.normal};
-              }
-              .dot-typography {
-                color: ${theme.palette.figma.typography.black};
-              }
+          &.active {
+            .dot-typography {
+              color: ${theme.palette.figma.typography.black};
             }
+          }
 
-            &.inactive .step-label.dot-typography {
-              color: ${theme.palette.figma.typography.gray};
+          .dot-avatar i:before {
+            color: ${theme.palette.figma.icon.disabled};
+          }
+
+          .dot-avatar,
+          .dot-icon {
+            background: ${theme.palette.figma.neutral.active};
+          }
+
+          &.completed {
+            .dot-avatar i:before {
+              color: ${theme.palette.figma.overlay.alerts.success.icon};
             }
+          }
 
-            &.error {
-              .dot-typography {
-                color: ${theme.palette.figma.destructive.normal};
-              }
+          &.error {
+            .dot-avatar i:before {
+              color: ${theme.palette.figma.overlay.alerts.error.icon};
+            }
+            .dot-typography {
+              color: ${theme.palette.figma.destructive.normal} !important;
+            }
+          }
 
-              .dot-icon {
-                background: ${theme.palette.figma.background.level0.bckgWhite};
-                border: 1px solid ${theme.palette.figma.destructive.normal};
-                color: ${theme.palette.figma.destructive.normal};
-              }
+          &.in-progress {
+            .dot-avatar i:before {
+              color: ${theme.palette.figma.primary.active};
             }
           }
 
           &.disabled {
+            &:hover {
+              cursor: default;
+            }
             .dot-icon {
               color: ${theme.palette.figma.primary.light};
             }
@@ -14947,16 +15020,28 @@ const StyledStepper = styled.div`
               color: ${theme.palette.figma.typography.disabled};
             }
           }
-
-          &:last-of-type .MuiStepContent-root {
-            border-left-color: transparent;
-          }
         }
       }
 
       .${contentClassName} {
         width: 100%;
 
+        .left {
+          border: 0;
+        }
+        .right {
+          border: 0;
+        }
+
+        .bottom {
+          height: ${`calc(100vh - ${offset}px)`};
+          border: 0;
+        }
+        .top {
+          height: ${`calc(100vh - ${offset}px)`};
+          border: 0;
+        }
+
         .step-content-container {
           padding: ${theme.spacing(3, 3, 2, 3)};
         }
@@ -14969,15 +15054,24 @@ const ScrollbarContainer = styled.div`
   theme,
   offset
 }) => css`
-    height: ${`calc(100vh - ${offset}px)`};
     overflow-y: auto;
 
     &.left {
+      height: ${`calc(100vh - ${offset}px)`};
       border-right: 1px solid ${theme.palette.figma.border.default};
     }
     &.right {
+      height: ${`calc(100vh - ${offset}px)`};
       border-left: 1px solid ${theme.palette.figma.border.default};
     }
+    &.bottom {
+      width: 100%;
+      border-bottom: 1px solid ${theme.palette.figma.border.default};
+    }
+    &.top {
+      width: 100%;
+      border-top: 1px solid ${theme.palette.figma.border.default};
+    }
     &.center-content {
       display: flex;
       flex-direction: column;
@@ -14991,13 +15085,8 @@ const StepContentWrapper = styled.div`
   flex: 1;
   display: flex;
   justify-content: center;
-`;
-const StepDescription = styled(DotTypography)`
-  ${({
-  theme
-}) => css`
-    margin-bottom: ${theme.spacing(6)};
-  `}
+  width: 100%;
+  height: 100%;
 `;
 const StepActionsContainer = styled.div`
   ${({
@@ -15071,32 +15160,47 @@ const DotStepper = ({
   submitButtonText = 'Complete'
 }) => {
   const [currentStep, setActiveStep] = useState(activeStep);
+  const [stepperOffset, setStepperOffset] = useState(activeStep);
   const [isStickyBottom, setIsStickyBottom] = useState(false);
   const actionsRef = useRef(null);
   const stepperContentRef = useRef(null);
-  const isHorizontal = orientation === 'horizontal';
+  const stepperRef = useRef(null);
   const displayInitialContent = initialContent && currentStep === 0;
   const displayFinalContent = finalContent && currentStep > steps.length;
   const displayCancelButton = !!(!displayInitialContent && !displayFinalContent && onCancel);
   const isLastStep = currentStep === steps.length && !finalContent || currentStep > steps.length && finalContent;
-  const rootClasses = useStylesWithRootClass(rootClassName$p, stepsPosition, className);
+  const getStepsPosition = () => {
+    if (orientation === 'horizontal') {
+      return ['top', 'bottom'].includes(stepsPosition) ? stepsPosition : 'bottom';
+    } else {
+      return ['left', 'right'].includes(stepsPosition) ? stepsPosition : 'left';
+    }
+  };
+  const rootClasses = useStylesWithRootClass(rootClassName$p, getStepsPosition(), className);
   const stepContentClasses = displayInitialContent || displayFinalContent ? 'center-content' : '';
   const stickyBottomClasses = useStylesWithRootClass('actions-container', isStickyBottom ? 'with-top-border' : '');
   const actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
   useEffect(() => {
     const actionsElement = actionsRef.current;
     const stepperContentElement = stepperContentRef.current;
-    let observer;
+    let intersectionObserver;
     if (actionsElement && stepperContentElement) {
-      observer = new IntersectionObserver(([e]) => setIsStickyBottom(e.intersectionRatio < 1), {
+      intersectionObserver = new IntersectionObserver(([e]) => setIsStickyBottom(e.intersectionRatio < 1), {
         root: stepperContentElement,
         rootMargin: '0px 0px -1px 0px',
         threshold: [1]
       });
-      observer.observe(actionsElement);
+      intersectionObserver.observe(actionsElement);
+    }
+    const stepperContent = stepperRef.current;
+    let resizeObserver;
+    if (stepperContent) {
+      resizeObserver = new ResizeObserver(([e]) => setStepperOffset(e.contentRect.height));
+      resizeObserver.observe(stepperContent);
     }
     return () => {
-      actionsElement && observer.unobserve(actionsElement);
+      actionsElement && intersectionObserver.unobserve(actionsElement);
+      stepperContent && resizeObserver.unobserve(stepperContent);
     };
   }, []);
   useEffect(() => {
@@ -15121,23 +15225,21 @@ const DotStepper = ({
     if (displayFinalContent) return finalContent;
     return (_a = steps.find(step => step.id === id)) === null || _a === void 0 ? void 0 : _a.content;
   };
-  const getStepIcon = (iconId, completed, error) => {
+  const getStepIcon = (iconId, completed, error, isActive) => {
     let stepIcon;
     if (completed) {
-      stepIcon = isHorizontal ? 'check-solid' : 'check-line';
+      stepIcon = 'check-solid';
     } else if (error) {
       stepIcon = 'error-solid';
-    } else if (iconId) {
+    } else if (isActive) {
       stepIcon = iconId;
     } else {
-      stepIcon = isHorizontal ? 'circle' : 'edit';
+      stepIcon = 'circle';
     }
-    return isHorizontal ? jsx(DotAvatar, {
+    return jsx(DotAvatar, {
       alt: iconId || stepIcon,
       iconId: stepIcon,
       type: "icon"
-    }) : jsx(DotIcon, {
-      iconId: stepIcon
     });
   };
   const navigateToStep = id => {
@@ -15173,7 +15275,7 @@ const DotStepper = ({
       ref: stepperContentRef,
       children: jsxs(ScrollbarContainer, {
         offset: offset,
-        className: stepContentClasses,
+        className: `${stepContentClasses} ${getStepsPosition()}`,
         children: [jsx(CssGrid, {
           className: "step-content-container",
           children: jsx(CssCell, Object.assign({}, defaultCellProps, {
@@ -15219,58 +15321,69 @@ const DotStepper = ({
       })
     });
   };
+  const memoizedSteps = useMemo(() => {
+    return steps.map((step, index) => {
+      const isActive = currentStep === step.id;
+      // Memoize step classes
+      const stepClasses = [step.className, isActive ? 'active' : 'inactive', step.completed ? 'completed' : '', step.disabled ? 'disabled' : '', step.error ? 'error' : '', step.inProgress ? 'in-progress' : ''].join(' ').trim();
+      // Memoize step description
+      const getContent = isString$2(step.description) ? step.description : null;
+      // Memoize step icon
+      const icon = getStepIcon(step.iconId, step.completed, step.error, isActive);
+      return {
+        step,
+        index,
+        isActive,
+        stepClasses,
+        getContent,
+        icon
+      };
+    });
+  }, [steps, currentStep]);
   return jsxs(StyledStepper, {
     className: rootClasses,
+    offset: stepperOffset + offset,
     children: [jsx(ScrollbarContainer, {
-      className: stepsPosition,
+      className: getStepsPosition(),
       offset: offset,
       tabIndex: 0,
+      ref: stepperRef,
       children: jsx(Stepper, {
         activeStep: currentStep,
         "aria-label": ariaLabel,
         className: stepListClassName,
         "data-testid": dataTestId,
         orientation: orientation,
-        children: steps.map((step, index) => {
-          const isActive = currentStep === step.id;
-          // TODO: use useStylesWithRootClass here
-          const stepClasses = () => {
-            return [step.className, isActive ? 'active' : 'inactive', step.completed ? 'completed' : '', step.disabled ? 'disabled' : '', step.error ? 'error' : '', step.inProgress ? 'in-progress' : ''].concat().join(' ').trim();
-          };
-          const getContent = () => {
-            return isString$2(step.description) ? jsx(StepDescription, {
-              variant: "body2",
-              children: step.description
-            }) : step.description;
-          };
-          const getHorizontalDescription = () => {
-            return isString$2(step.description) ? jsx(DotTypography, {
-              variant: "body2",
-              className: "horizontal-step-description",
-              children: step.description
-            }) : null;
-          };
-          return jsxs(Step, {
-            active: isActive,
-            classes: {
-              root: stepClasses()
-            },
-            completed: step.completed,
-            disabled: step.disabled,
-            expanded: true,
-            children: [jsxs(StepLabel, {
-              icon: getStepIcon(step.iconId, step.completed, step.error),
+        children: memoizedSteps.map(({
+          step,
+          index,
+          isActive,
+          stepClasses,
+          getContent,
+          icon
+        }) => jsx(Step, {
+          active: isActive,
+          classes: {
+            root: stepClasses
+          },
+          completed: step.completed,
+          disabled: step.disabled,
+          children: jsx(DotTooltip, {
+            title: getContent,
+            children: jsxs(StepLabel, {
+              icon: icon,
               onClick: () => navigateToStep(step.id),
               children: [jsx(DotTypography, {
                 className: "step-label",
-                variant: isHorizontal ? 'body1' : 'subtitle1',
+                variant: orientation === 'horizontal' ? 'subtitle1' : 'body1',
                 children: step.label
-              }), orientation === 'horizontal' && getHorizontalDescription()]
-            }), orientation === 'vertical' && jsx(StepContent, {
-              children: getContent()
-            })]
-          }, index);
-        })
+              }), orientation === 'vertical' && jsx(DotTypography, {
+                variant: "body2",
+                children: getContent
+              })]
+            })
+          })
+        }, index))
       })
     }), jsx(StepContentWrapper, {
       children: renderContent()

package/package.json

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

package/src/lib/components/analytics/dashboard-actions/DashboardPublishConfirm.styles.d.ts

@@ -2,5 +2,5 @@ export declare const dashboardCategoriesContainerClassName = "dashboard-categori
 export declare const InlineMessage: import("styled-components").StyledComponent<({ ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: import("../../typography/Typography").TypographyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const StyledPublishConfirmDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAppSelectDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledAppSelectDotAutoComplete: import("styled-components").StyledComponent<(<T extends import("../..").AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, popperZIndex, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, value, warning, }: import("../../auto-complete/AutoComplete").AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element), any, {}, never>;
+export declare const StyledAppSelectDotAutoComplete: import("styled-components").StyledComponent<(<T extends import("../..").AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, popperZIndex, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, trimLongOptions, value, warning, }: import("../../auto-complete/AutoComplete").AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element), any, {}, never>;
 export declare const StyledAppSelectAutoCompleteOption: import("styled-components").StyledComponent<"li", any, {}, never>;

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

@@ -95,9 +95,11 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     required?: boolean;
     /** Determines the padding within the input field 'medium' or 'small' */
     size?: inputSizeOptions;
+    /** If true, longs options won't be wrapped into multiple lines but trimmed with ellipsis and a tooltip */
+    trimLongOptions?: boolean;
     /** value if this is a controlled component */
     value?: AutoCompleteValue;
     /** If true, the label will be displayed in a warning state. */
     warning?: boolean;
 }
-export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, popperZIndex, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, popperZIndex, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, trimLongOptions, value, warning, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import { AutocompleteGetTagProps } from '@mui/material';
 import { ChipSize } from '../../chip/Chip';
 import { AutoCompleteOption, AutoCompleteValue } from './interface';
+import { inputSizeOptions } from '../../input-form-fields/InputFormFields.propTypes';
 export declare const parseAutoCompleteValue: (value: AutoCompleteValue) => string;
 export interface GetChipsFromAutocompleteProps {
     chipSize?: ChipSize;
@@ -11,3 +12,8 @@ export interface GetChipsFromAutocompleteProps {
 export declare const getChipsFromAutocomplete: ({ chipSize, getTagProps, isReadOnly, values, }: GetChipsFromAutocompleteProps) => import("react/jsx-runtime").JSX.Element[];
 export declare const checkIfDuplicateItem: (itemText: string, autocompleteOptions: AutoCompleteOption[]) => boolean;
 export declare const isEmptyValue: (value: AutoCompleteValue) => boolean;
+export declare const getRootClassNames: (className: string, size: inputSizeOptions) => string;
+export declare const getTextFieldRootClassNames: (textFieldWarningClassName: string, isReadOnly: boolean) => string;
+export declare const getInputRootClassNames: (isDense: boolean) => string;
+export declare const getDefaultAutoCompleteValue: (hasMultiple: boolean, defaultValue: AutoCompleteValue) => string | AutoCompleteOption | AutoCompleteValue[];
+export declare const getAutoCompleteGroupBy: (group: boolean) => (option: AutoCompleteOption) => string;

package/src/lib/components/stepper/Stepper.d.ts

@@ -3,7 +3,7 @@ import { CommonProps } from '../CommonProps';
 import { CssCellProps } from '../css-grid/CssCell';
 export declare const defaultCellProps: CssCellProps;
 export type StepperOrientation = 'horizontal' | 'vertical';
-export type StepsPosition = 'left' | 'right';
+export type StepsPosition = 'top' | 'bottom' | 'left' | 'right';
 export interface StepProps extends CommonProps {
     /** if set to `true` the step will display a checkmark icon */
     completed?: boolean;
@@ -57,6 +57,7 @@ export interface StepperProps extends CommonProps {
     /** array of steps to be displayed */
     steps: StepProps[];
     /** determines where to display the array of steps */
+    /** top/bottom are for horizontal orientation (bottom by default) & left/right for vertical orientation (left by default) */
     stepsPosition?: StepsPosition;
     /** if passed, will overwrite the default "submit" button text */
     submitButtonText?: string;

package/src/lib/components/stepper/Stepper.styles.d.ts

@@ -4,12 +4,11 @@ export declare const contentClassName = "dot-stepper-content";
 interface StyledStepActionsContainerProps {
     displayCancelButton?: boolean;
 }
-export declare const StyledStepper: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface StyledScrollbarContainerProps {
     offset?: number;
 }
+export declare const StyledStepper: import("styled-components").StyledComponent<"div", any, StyledScrollbarContainerProps, never>;
 export declare const ScrollbarContainer: import("styled-components").StyledComponent<"div", any, StyledScrollbarContainerProps, never>;
 export declare const StepContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StepDescription: import("styled-components").StyledComponent<({ ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: import("../typography/Typography").TypographyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const StepActionsContainer: import("styled-components").StyledComponent<"div", any, StyledStepActionsContainerProps, never>;
 export {};