@digital-ai/dot-components 2.22.0 → 2.23.0

package/index.esm.js

@@ -8,8 +8,11 @@ import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 import jwt_decode from 'jwt-decode';
 import { useDropzone } from 'react-dropzone';
 import GridLayout, { WidthProvider } from 'react-grid-layout';
+import dayjs from 'dayjs';
+import updateLocale from 'dayjs/plugin/updateLocale';
 import { DatePicker, PickersDay, LocalizationProvider, TimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import utc from 'dayjs/plugin/utc';
 
 class ApiError extends Error {
   constructor(response, message) {
@@ -249,7 +252,7 @@ const StyledTextField = styled(TextField).withConfig({
 })(["", ""], ({
   theme,
   InputProps
-}) => css(["&.", "{.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-input{padding:", ";}.MuiInputBase-inputSizeSmall{padding-top:10.5px;padding-bottom:10.5px;&:not(textarea){height:19px;}}.MuiInputBase-inputMultiline{padding:0;}&.", " .MuiInputBase-root,.MuiInputBase-root.Mui-disabled{", ";}}.dot-select,.dot-input{&.", ",&.Mui-disabled{", ";}}&.", " .", "{margin-right:", ";}&.", ",&.", "{.", "{color:", ";p{font-size:", "px;margin:0;}.dot-icon i{margin-top:-2px;}}.MuiInputLabel-root.Mui-error{color:", ";}.MuiInputBase-root{background:", ";margin-bottom:0;}.MuiInputBase-inputSizeSmall:not(textarea){height:19px;padding-top:10.5px;padding-bottom:10.5px;}select.dot-select{padding-left:", ";}.MuiSelect-select:focus:not(.", "){background-color:transparent;}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;&.", " .", "{border-color:", ";}}.MuiInputBase-inputAdornedStart{padding-left:12px;}.MuiInputBase-inputAdornedEnd{padding-right:12px;}.MuiFormHelperText-root{", ";}}"], rootClassName$15, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, readOnlyClassName$1, readOnlyStyles(theme), readOnlyClassName$1, readOnlyStyles(theme), rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$15, adornmentIconClassName, theme.palette.figma.icon.black, theme.typography.body2.fontSize, theme.palette.figma.typography.black, theme.palette.figma.neutral.normal, theme.spacing(1.5), readOnlyClassName$1, InputProps.endAdornment ? `44px` : `12px`, successClassName, theme.palette.figma.success.normal, adornmentIconClassName, theme.palette.figma.success.normal, errorClassName, theme.palette.figma.destructive.normal, adornmentIconClassName, theme.palette.figma.destructive.normal, warningClassName, theme.palette.figma.warning.normal, adornmentIconClassName, theme.palette.figma.warning.normal, warningClassName, fieldsetClassName, theme.palette.figma.warning.normal, formHelperTextRootStyles(theme)));
+}) => css(["&.", "{.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-input{padding:", ";}.MuiInputBase-inputSizeSmall{padding-top:10.5px;padding-bottom:10.5px;&:not(textarea){height:19px;}}.MuiInputBase-inputMultiline{padding:0;}&.", " .MuiInputBase-root,.MuiInputBase-root.Mui-disabled{", ";}.MuiInputBase-adornedEnd .clear-icon-button.hidden{visibility:hidden;}}.dot-select,.dot-input{&.", ",&.Mui-disabled{", ";}}&.", " .", "{margin-right:", ";}&.", ",&.", "{.", "{color:", ";p{font-size:", "px;margin:0;}.dot-icon i{margin-top:-2px;}}.MuiInputLabel-root.Mui-error{color:", ";}.MuiInputBase-root{background:", ";margin-bottom:0;}.MuiInputBase-inputSizeSmall:not(textarea){height:19px;padding-top:10.5px;padding-bottom:10.5px;}select.dot-select{padding-left:", ";}.MuiSelect-select:focus:not(.", "){background-color:transparent;}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.", " .dot-icon{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;&.", " .", "{border-color:", ";}}.MuiInputBase-inputAdornedStart{padding-left:12px;}.MuiInputBase-inputAdornedEnd{padding-right:12px;}.MuiFormHelperText-root{", ";}}"], rootClassName$15, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, readOnlyClassName$1, readOnlyStyles(theme), readOnlyClassName$1, readOnlyStyles(theme), rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$15, adornmentIconClassName, theme.palette.figma.icon.black, theme.typography.body2.fontSize, theme.palette.figma.typography.black, theme.palette.figma.neutral.normal, theme.spacing(1.5), readOnlyClassName$1, InputProps.endAdornment ? `44px` : `12px`, successClassName, theme.palette.figma.success.normal, adornmentIconClassName, theme.palette.figma.success.normal, errorClassName, theme.palette.figma.destructive.normal, adornmentIconClassName, theme.palette.figma.destructive.normal, warningClassName, theme.palette.figma.warning.normal, adornmentIconClassName, theme.palette.figma.warning.normal, warningClassName, fieldsetClassName, theme.palette.figma.warning.normal, formHelperTextRootStyles(theme)));
 
 const rootClassName$14 = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar).withConfig({
@@ -3281,6 +3284,94 @@ const DotList = ({
   });
 };
 
+const rootClassName$R = 'dot-copy-button';
+const StyledCopyButton = styled.span.withConfig({
+  displayName: "CopyButtonstyles__StyledCopyButton",
+  componentId: "sc-18ff0u-0"
+})(["", ""], ({
+  theme
+}) => css(["&.", " .copied-to-clipboard{color:", ";&.MuiIcon-fontSizeSmall.button-size-small{padding:4px;}&.MuiIcon-fontSizeMedium.button-size-small{padding:3px;}&.MuiIcon-fontSizeSmall.button-size-medium{padding:11px;}&.MuiIcon-fontSizeMedium.button-size-medium{padding:10px;}}"], rootClassName$R, theme.palette.figma.success.normal));
+
+const DotCopyButton = ({
+  ariaLabel: _ariaLabel = 'Copy to clipboard',
+  ariaRole: _ariaRole = 'button',
+  className,
+  color: _color = 'inherit',
+  copiedTooltip: _copiedTooltip = 'Copied!',
+  copyTooltip: _copyTooltip = 'Copy to clipboard',
+  'data-testid': dataTestId = 'dot-copy-button',
+  disabled: _disabled = false,
+  disableRipple: _disableRipple = false,
+  iconId: _iconId = 'duplicate',
+  iconSize: _iconSize = 'small',
+  onClick: _onClick = null,
+  shape: _shape = 'circle',
+  showCopiedIcon: _showCopiedIcon = true,
+  size: _size = 'small',
+  tooltip,
+  value
+}) => {
+  const [timedShowCopiedIcon, setTimedShowCopiedIcon] = useState(false);
+  const [timedDisabled, setTimedDisabled] = useState(false);
+  // To keep backward compatibility if tooltip is not set, use copyTooltip
+  if (!tooltip) {
+    tooltip = _copyTooltip;
+  }
+  const copyToClipboard = useCallback(() => {
+    // The check for navigator.clipboard.writeText is because this function is
+    // only supported in secure contexts (https). This will always be the case in
+    // production but not when running locally.
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      console.warn('Copy to clipboard is only supported in secure context (https)', value);
+    } else {
+      navigator.clipboard.writeText(value);
+    }
+  }, [value]);
+  const copy = useCallback(event => {
+    copyToClipboard();
+    if (_showCopiedIcon) {
+      setTimedShowCopiedIcon(true);
+      setTimeout(function () {
+        setTimedShowCopiedIcon(false);
+      }, 3000);
+    } else if (!_disabled) {
+      setTimedDisabled(true);
+      setTimeout(function () {
+        setTimedDisabled(false);
+      }, 3000);
+    }
+    if (_onClick) {
+      return _onClick(event);
+    }
+    return false;
+  }, [value, _showCopiedIcon, _disabled, _onClick]);
+  return jsxs(StyledCopyButton, {
+    className: rootClassName$R,
+    "data-testid": dataTestId,
+    children: [!timedShowCopiedIcon && jsx(DotIconButton, {
+      ariaLabel: _ariaLabel,
+      ariaRole: _ariaRole,
+      className: className,
+      color: _color,
+      "data-testid": `${dataTestId}-button`,
+      disabled: _disabled || timedDisabled,
+      disableRipple: _disableRipple,
+      iconId: _iconId,
+      iconSize: _iconSize,
+      onClick: copy,
+      shape: _shape,
+      size: _size,
+      tooltip: tooltip
+    }), timedShowCopiedIcon && jsx(DotIcon, {
+      className: `copied-to-clipboard button-size-${_size}`,
+      "data-testid": `${dataTestId}-icon`,
+      fontSize: _iconSize,
+      iconId: "check-solid",
+      tooltip: _copiedTooltip
+    })]
+  });
+};
+
 const DotInputLabel = ({
   'data-testid': dataTestId,
   disabled: _disabled = false,
@@ -3335,8 +3426,8 @@ const EndAdornment = ({
     children: styledAdornment
   }) : styledAdornment;
 };
-const getInitialState = value => ({
-  inputValue: value || ''
+const getInitialState = (value, defaultValue) => ({
+  inputValue: value || defaultValue || ''
 });
 const DotInputText = ({
   autoComplete: _autoComplete = 'off',
@@ -3365,6 +3456,7 @@ const DotInputText = ({
   name,
   onBlur,
   onChange,
+  onClear,
   onFocus,
   onKeyDown,
   onMouseUp,
@@ -3384,14 +3476,13 @@ const DotInputText = ({
   const hasWarning = !_error && _warning && warningClassName;
   const hasSuccess = !_error && !_warning && success && successClassName;
   const hasEndAdornmentIcon = endIcon || _error || hasWarning || hasSuccess;
-  // This state is used only with debounce feature enabled
-  const [inputTextState, setInputTextState] = useState(hasDebounce && getInitialState(value));
+  const internalInputRef = useRef(null);
+  const textFieldInputRef = inputRef || internalInputRef;
+  const [inputTextState, setInputTextState] = useState(getInitialState(value));
   const rootStyles = useStylesWithRootClass(rootClassName$15, hasError, hasWarning, hasSuccess, _readOnly && readOnlyClassName$1);
-  // Used to control text value from the consumer component
-  // when debounce feature is enabled
   useEffect(() => {
-    if (hasDebounce && value !== inputTextState.inputValue) {
-      setInputTextState(getInitialState(value));
+    if (value !== inputTextState.inputValue) {
+      setInputTextState(getInitialState(value, defaultValue));
     }
   }, [value]);
   // Improve performance by avoiding callback execution
@@ -3406,17 +3497,21 @@ const DotInputText = ({
     return () => clearTimeout(handler);
   }, [inputTextState]);
   const handleChange = e => {
-    // We need to have control over change event and input value separately
-    // so that we can set initial state via 'value' prop (if needed)
-    hasDebounce ? setInputTextState({
+    setInputTextState({
       changeEvent: e,
       inputValue: e.target.value
-    }) : onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    });
+    !hasDebounce && (onChange === null || onChange === void 0 ? void 0 : onChange(e));
+  };
+  const handleClearButtonClick = () => {
+    setInputTextState({
+      inputValue: ''
+    });
+    if ('current' in textFieldInputRef) {
+      textFieldInputRef.current.focus();
+    }
+    onClear();
   };
-  const inputTextValue = hasDebounce ? inputTextState.inputValue : value;
-  // Don't use default value when debounce feature is enabled because
-  // in that case component is controlled
-  const defaultInputValue = hasDebounce ? undefined : defaultValue;
   const startAdornmentIcon = () => {
     if (!startIcon) return null;
     return jsx(StyledAdornment, {
@@ -3437,6 +3532,27 @@ const DotInputText = ({
       warning: _warning
     });
   };
+  const getClearIconButton = () => {
+    if (!onClear) return null;
+    const clearIconButtonClasses = useStylesWithRootClass('clear-icon-button', inputTextState.inputValue === '' ? 'hidden' : '');
+    return jsx(DotIconButton, {
+      className: clearIconButtonClasses,
+      "data-testid": dataTestId && `${dataTestId}-clear-btn`,
+      iconId: "close",
+      size: "small",
+      onClick: handleClearButtonClick
+    });
+  };
+  const getEndAdornment = () => {
+    const iconOrText = endAdornmentIconOrText();
+    const clearIconButton = getClearIconButton();
+    if (iconOrText || clearIconButton) {
+      return jsxs(Fragment, {
+        children: [iconOrText, clearIconButton]
+      });
+    }
+    return null;
+  };
   const wrapperClassName = useStylesWithRootClass(_fullWidth !== false ? 'dot-input-text--fullwidth' : '', className);
   const inputClassName = useStylesWithRootClass('dot-input', _readOnly && readOnlyClassName$1);
   return jsxs(StyledTextFieldContainer, {
@@ -3450,7 +3566,7 @@ const DotInputText = ({
     }), jsx(StyledTextField, {
       InputProps: {
         startAdornment: startAdornmentIcon(),
-        endAdornment: endAdornmentIconOrText()
+        endAdornment: getEndAdornment()
       },
       "aria-label": name || label,
       autoComplete: _autoComplete,
@@ -3458,7 +3574,6 @@ const DotInputText = ({
       classes: {
         root: rootStyles
       },
-      defaultValue: defaultInputValue,
       disabled: _disabled,
       error: _error,
       fullWidth: _fullWidth,
@@ -3477,14 +3592,14 @@ const DotInputText = ({
         readOnly: _readOnly,
         tabIndex: 0
       },
-      inputRef: inputRef,
+      inputRef: textFieldInputRef,
       label: persistentLabel ? null : label,
       maxRows: _multiline ? maxRows : null,
       minRows: _multiline ? minRows : null,
       multiline: _multiline,
       name: name,
       onBlur: onBlur,
-      onChange: hasDebounce ? handleChange : onChange,
+      onChange: handleChange,
       onFocus: onFocus,
       onKeyDown: onKeyDown,
       onMouseUp: onMouseUp,
@@ -3493,17 +3608,17 @@ const DotInputText = ({
       role: "textbox",
       size: _size,
       type: _type,
-      value: inputTextValue,
+      value: inputTextState.inputValue,
       variant: "outlined"
     })]
   });
 };
 
-const rootClassName$R = 'dot-search-input';
+const rootClassName$Q = 'dot-search-input';
 const StyledSearchInput = styled.span.withConfig({
   displayName: "SearchInputstyles__StyledSearchInput",
   componentId: "qlwzku-0"
-})(["", ""], () => css(["&.", "{}"], rootClassName$R));
+})(["", ""], () => css(["&.", "{}"], rootClassName$Q));
 
 function SearchInput({
   'data-testid': dataTestId,
@@ -3517,7 +3632,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -3568,94 +3683,6 @@ function SearchInput({
   });
 }
 
-const rootClassName$Q = 'dot-copy-button';
-const StyledCopyButton = styled.span.withConfig({
-  displayName: "CopyButtonstyles__StyledCopyButton",
-  componentId: "sc-18ff0u-0"
-})(["", ""], ({
-  theme
-}) => css(["&.", " .copied-to-clipboard{color:", ";}"], rootClassName$Q, theme.palette.figma.success.normal));
-
-const DotCopyButton = ({
-  ariaLabel: _ariaLabel = 'Copy to clipboard',
-  ariaRole: _ariaRole = 'button',
-  className,
-  color: _color = 'inherit',
-  copiedTooltip: _copiedTooltip = 'Copied!',
-  copyTooltip: _copyTooltip = 'Copy to clipboard',
-  'data-testid': dataTestId = 'dot-copy-button',
-  disabled: _disabled = false,
-  disableRipple: _disableRipple = false,
-  iconId: _iconId = 'duplicate',
-  iconSize: _iconSize = 'small',
-  onClick: _onClick = null,
-  shape: _shape = 'circle',
-  showCopiedIcon: _showCopiedIcon = true,
-  size: _size = 'small',
-  tooltip,
-  value
-}) => {
-  const [timedShowCopiedIcon, setTimedShowCopiedIcon] = useState(false);
-  const [timedDisabled, setTimedDisabled] = useState(false);
-  // To keep backward compatibility if tooltip is not set, use copyTooltip
-  if (!tooltip) {
-    tooltip = _copyTooltip;
-  }
-  const copyToClipboard = useCallback(() => {
-    // The check for navigator.clipboard.writeText is because this function is
-    // only supported in secure contexts (https). This will always be the case in
-    // production but not when running locally.
-    if (!navigator.clipboard || !navigator.clipboard.writeText) {
-      console.warn('Copy to clipboard is only supported in secure context (https)', value);
-    } else {
-      navigator.clipboard.writeText(value);
-    }
-  }, [value]);
-  const copy = useCallback(event => {
-    copyToClipboard();
-    if (_showCopiedIcon) {
-      setTimedShowCopiedIcon(true);
-      setTimeout(function () {
-        setTimedShowCopiedIcon(false);
-      }, 3000);
-    } else if (!_disabled) {
-      setTimedDisabled(true);
-      setTimeout(function () {
-        setTimedDisabled(false);
-      }, 3000);
-    }
-    if (_onClick) {
-      return _onClick(event);
-    }
-    return false;
-  }, [value, _showCopiedIcon, _disabled, _onClick]);
-  return jsxs(StyledCopyButton, {
-    className: rootClassName$Q,
-    "data-testid": dataTestId,
-    children: [!timedShowCopiedIcon && jsx(DotIconButton, {
-      ariaLabel: _ariaLabel,
-      ariaRole: _ariaRole,
-      className: className,
-      color: _color,
-      "data-testid": `${dataTestId}-button`,
-      disabled: _disabled || timedDisabled,
-      disableRipple: _disableRipple,
-      iconId: _iconId,
-      iconSize: _iconSize,
-      onClick: copy,
-      shape: _shape,
-      size: _size,
-      tooltip: tooltip
-    }), timedShowCopiedIcon && jsx(DotIcon, {
-      className: "copied-to-clipboard",
-      "data-testid": `${dataTestId}-icon`,
-      fontSize: "small",
-      iconId: "check-solid",
-      tooltip: _copiedTooltip
-    })]
-  });
-};
-
 var img$6 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M12.4332 16.3533V14.8333H11.5665V16.3533L10.7432 15.8933L9.85651 16.4033L11.9998 17.6366L14.1932 16.3733L13.3332 15.8766L12.4332 16.3533Z' fill='white'/%3e%3cpath d='M7.99328 10.1866L9.24661 10.9132L9.67995 10.1399L8.36995 9.4299L9.09328 9.01657V8.03323L7.11328 9.18323L7.11661 11.5532L7.99328 11.0566V10.1866Z' fill='white'/%3e%3cpath d='M14.6934 10.9133L15.9934 10.1733L15.99 11.0566L16.8867 11.5599V9.1766L14.81 7.98993L14.7767 8.9566L15.6167 9.45326L14.29 10.0799L14.6934 10.9133Z' fill='white'/%3e%3cpath d='M16.8801 12.5435L16.0001 12.0402V12.0935V13.7068L12.4167 11.6868V7.61015L13.9667 8.49015V7.51682L12.0001 6.35349L9.95006 7.52348V8.52348L11.4967 7.63015V11.6868L8.00006 13.8168V12.0202L7.12006 12.5235V14.8202L8.96672 15.8502L9.86672 15.3335L8.40006 14.5268L12.0001 12.4368L15.5567 14.5035L14.1301 15.3268L15.0567 15.8701L16.8701 14.8268L16.8801 12.5435Z' fill='white'/%3e%3c/svg%3e";
 
 var img$5 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M14.1867 11.2667L12.1634 10.0833L10.1367 11.2667V13.62L12.1634 14.7867L14.1867 13.62V11.2667Z' fill='white'/%3e%3cpath d='M8.43666 12.0001L7.47333 11.1501V15.1667L10.41 16.8367V15.7034L8.43666 14.5401V12.0001Z' fill='white'/%3e%3cpath d='M15.8965 12V14.5833L13.9632 15.7033V16.9367L16.8532 15.1533V11.0967L15.8965 12Z' fill='white'/%3e%3cpath d='M12.1565 8.13333L14.7165 9.61333L15.4165 8.89L12.1565 7L8.87988 8.90667L9.57988 9.63333L12.1565 8.13333Z' fill='white'/%3e%3c/svg%3e";
@@ -5514,7 +5541,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup).withConfig({
   componentId: "sc-1oh4ljv-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall){height:", ";.dot-icon{width:", ";}}.dot-icon{color:", ";display:flex;+ p{margin-left:", ";}i{height:auto;}}.dot-typography{margin-bottom:0;}.MuiToggleButton-label{color:", ";p{margin-bottom:0;}}.MuiToggleButtonGroup-groupedHorizontal{border:1px solid ", ";border-radius:0;}.dot-tooltip{&:first-child .MuiToggleButtonGroup-groupedHorizontal{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}&:last-child .MuiToggleButtonGroup-groupedHorizontal{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}&:not(:first-child) .MuiToggleButtonGroup-groupedHorizontal{margin-left:-1px;}}& > .MuiToggleButtonGroup-groupedHorizontal{:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}}}.MuiButtonBase-root{&.Mui-disabled{background:", ";.dot-typography{color:", ";}.dot-icon{color:", ";}}&.Mui-selected{&.MuiToggleButton-standard{background:", ";}.dot-icon,.dot-typography{color:", ";}}}"], rootClassName$G, theme.spacing(5), theme.spacing(2), theme.palette.figma.icon.black, theme.spacing(1), theme.palette.figma.typography.black, theme.palette.figma.border.defaultButton, theme.palette.figma.disabled.normal, theme.palette.figma.typography.gray, theme.palette.figma.icon.disabled, theme.palette.figma.toggleTabs.bckg, theme.palette.figma.toggleTabs.text));
+}) => css(["&.", "{button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall){height:", ";.dot-icon{width:", ";}}.dot-icon{color:", ";display:flex;+ p{margin-left:", ";}i{height:auto;}}.dot-typography{margin-bottom:0;}.MuiToggleButton-label{color:", ";p{margin-bottom:0;}}.MuiToggleButtonGroup-groupedHorizontal{border:1px solid ", ";border-radius:0;}.dot-tooltip{&:first-child .MuiToggleButtonGroup-groupedHorizontal{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}&:last-child .MuiToggleButtonGroup-groupedHorizontal{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}&:not(:first-child) .MuiToggleButtonGroup-groupedHorizontal{margin-left:-1px;}}& > .MuiToggleButtonGroup-groupedHorizontal{:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}}}button.MuiButtonBase-root.MuiToggleButton-root{&:not(.Mui-disabled):not(.Mui-selected){background-color:", ";}&.Mui-disabled{background-color:", ";.dot-typography{color:", ";}.dot-icon{color:", ";}}&.Mui-selected{background-color:", ";.dot-icon,.dot-typography{color:", ";}}}"], rootClassName$G, theme.spacing(5), theme.spacing(2), theme.palette.figma.icon.black, theme.spacing(1), theme.palette.figma.typography.black, theme.palette.figma.border.defaultButton, theme.palette.figma.neutral.normal, theme.palette.figma.disabled.normal, theme.palette.figma.typography.gray, theme.palette.figma.icon.disabled, theme.palette.figma.toggleTabs.bckg, theme.palette.figma.toggleTabs.text));
 
 const DotButtonToggle = ({
   ariaLabel,
@@ -7969,6 +7996,7 @@ const DotSnackbar = ({
   children,
   className,
   'data-testid': dataTestId,
+  hideOnClickAway: _hideOnClickAway = true,
   onClose,
   open,
   severity,
@@ -7980,6 +8008,11 @@ const DotSnackbar = ({
     action
   });
   const rootClasses = useStylesWithRootClass(rootClassName$m, className);
+  const handleSnackbarClose = reason => {
+    if (_hideOnClickAway || !_hideOnClickAway && reason !== 'clickaway') {
+      onClose();
+    }
+  };
   return jsx(StyledSnackbar, {
     anchorOrigin: _anchorOrigin,
     "aria-label": ariaLabel,
@@ -7988,7 +8021,7 @@ const DotSnackbar = ({
       root: rootClasses
     },
     "data-testid": dataTestId,
-    onClose: onClose,
+    onClose: (_e, r) => handleSnackbarClose(r),
     open: open,
     severity: severity,
     children: jsx(Alert, {
@@ -8017,7 +8050,9 @@ const DotSnackbarContext = /*#__PURE__*/createContext({
   enqueueMessage: (_message, _severity) => null,
   removeMessage: _id => null
 });
-const DotSnackbarContainer = () => {
+const DotSnackbarContainer = ({
+  hideOnClickAway
+}) => {
   const {
     alerts,
     removeMessage
@@ -8034,6 +8069,7 @@ const DotSnackbarContainer = () => {
       "data-testid": rootClassName$l,
       children: alerts.slice().reverse().map(alert => {
         return jsx(DotSnackbar, {
+          hideOnClickAway: hideOnClickAway,
           onClose: handleClose(alert.id),
           open: alert.open,
           severity: alert.severity,
@@ -8044,7 +8080,8 @@ const DotSnackbarContainer = () => {
   });
 };
 const DotSnackbarProvider = ({
-  children
+  children,
+  hideOnClickAway: _hideOnClickAway = true
 }) => {
   const [alerts, setAlerts] = useState([]);
   function enqueueMessage(message, severity) {
@@ -8058,6 +8095,7 @@ const DotSnackbarProvider = ({
     setAlerts(prevState => {
       return [...prevState, Object.assign({}, queue)];
     });
+    return id;
   }
   const removeMessage = id => {
     setAlerts(prev => {
@@ -8076,7 +8114,9 @@ const DotSnackbarProvider = ({
   const memoizedValues = useMemo(() => DotSnackbarValues, [alerts]);
   return jsxs(DotSnackbarContext.Provider, {
     value: memoizedValues,
-    children: [jsx(DotSnackbarContainer, {}), children]
+    children: [jsx(DotSnackbarContainer, {
+      hideOnClickAway: _hideOnClickAway
+    }), children]
   });
 };
 const useDotSnackbarContext = () => {
@@ -8555,6 +8595,65 @@ value, typographyVariant) => {
   }
   return value;
 };
+const renderAvatarWithTextCell = avatarWithText => {
+  const {
+    avatarIcon,
+    avatarImageSrc,
+    mainText,
+    secondaryText
+  } = avatarWithText;
+  return jsxs("div", {
+    className: "cell-avatar-with-text",
+    children: [(avatarImageSrc || avatarIcon) && jsx(DotAvatar, {
+      alt: mainText,
+      className: "cell-avatar",
+      "data-testid": "cell-avatar",
+      iconId: avatarIcon,
+      imageSrc: avatarImageSrc,
+      size: "small",
+      type: avatarImageSrc ? 'image' : 'icon'
+    }), jsxs("div", {
+      className: "cell-text",
+      children: [jsx(DotTypography, {
+        variant: "body1",
+        children: mainText
+      }), secondaryText && jsx(DotTypography, {
+        "data-testid": "cell-secondary-text",
+        variant: "body2",
+        children: secondaryText
+      })]
+    })]
+  });
+};
+const renderInlineEditCell = inlineEdit => {
+  return jsx(DotInlineEdit, Object.assign({}, inlineEdit, {
+    ariaLabel: "inline edit cell",
+    className: `inline-edit-cell ${inlineEdit.className ? inlineEdit.className : ''}`
+  }));
+};
+const getValuesForSort = (a, b, orderBy) => {
+  var _a, _b, _c, _d;
+  let valueA;
+  let valueB;
+  if (((_a = a.rowData[orderBy]) === null || _a === void 0 ? void 0 : _a.mainText) && ((_b = b.rowData[orderBy]) === null || _b === void 0 ? void 0 : _b.mainText)) {
+    // use mainText value for sort in case when data for the table cell is passed with AvatarWithTextCell
+    valueA = a.rowData[orderBy].mainText;
+    valueB = b.rowData[orderBy].mainText;
+  } else if (((_c = a.rowData[orderBy]) === null || _c === void 0 ? void 0 : _c.name) && ((_d = b.rowData[orderBy]) === null || _d === void 0 ? void 0 : _d.name)) {
+    // name is the only required prop from InlineEditProps, so if it is there, the cell is considered as inline edit cell
+    // use value from inline edit for sort in case when data for the table cell is passed with InlineEditProps
+    // if value is not defined, then treat it as empty string
+    valueA = a.rowData[orderBy].value || '';
+    valueB = b.rowData[orderBy].value || '';
+  } else {
+    valueA = a.rowData[orderBy];
+    valueB = b.rowData[orderBy];
+  }
+  return {
+    valueA,
+    valueB
+  };
+};
 // If maxHeight is provided, make this the max height for the
 // table container. If it is not provided but stickyHeader is true,
 // calculate a max height based on screen size.
@@ -8627,7 +8726,7 @@ const StyledTableCell = styled(TableCell).withConfig({
   componentId: "e84k25-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{padding-top:0;padding-bottom:0;&.actionItems,&.noWrap p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}&.actionItems{max-width:0;text-align:right;text-overflow:clip;}&.noWrap p{max-width:calc(100% - 1px);}.action-cell-wrapper{width:100%;}.cell-avatar-with-text{display:flex;align-items:center;.cell-avatar{margin-right:", ";}.cell-text{width:100%;}}}"], rootClassName$f, theme.spacing(1)));
+}) => css(["&.", "{padding-top:0;padding-bottom:0;&.actionItems,&.noWrap p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}&.actionItems{max-width:0;text-align:right;text-overflow:clip;}&.noWrap p{max-width:calc(100% - 1px);}.action-cell-wrapper{width:100%;}.cell-avatar-with-text{display:flex;align-items:center;.cell-avatar{margin-right:", ";}.cell-text{width:100%;}}.inline-edit-cell{input{background-color:", ";}.dot-view-mode:not(.dot-read-only):hover{background-color:", ";}}}"], rootClassName$f, theme.spacing(1), theme.palette.figma.background.level0.bckgWhiteBlack, theme.palette.figma.neutral.active));
 
 /**
  * A wrapper component around the TableCell component from @material-ui.
@@ -8702,34 +8801,10 @@ const DotBodyCell = ({
       });
     }
     if (value === null || value === void 0 ? void 0 : value.mainText) {
-      const {
-        avatarIcon,
-        avatarImageSrc,
-        mainText,
-        secondaryText
-      } = value;
-      return jsxs("div", {
-        className: "cell-avatar-with-text",
-        children: [(avatarImageSrc || avatarIcon) && jsx(DotAvatar, {
-          alt: mainText,
-          className: "cell-avatar",
-          "data-testid": "cell-avatar",
-          iconId: avatarIcon,
-          imageSrc: avatarImageSrc,
-          size: "small",
-          type: avatarImageSrc ? 'image' : 'icon'
-        }), jsxs("div", {
-          className: "cell-text",
-          children: [jsx(DotTypography, {
-            variant: "body1",
-            children: mainText
-          }), secondaryText && jsx(DotTypography, {
-            "data-testid": "cell-secondary-text",
-            variant: "body2",
-            children: secondaryText
-          })]
-        })]
-      });
+      return renderAvatarWithTextCell(value);
+    }
+    if (value === null || value === void 0 ? void 0 : value.name) {
+      return renderInlineEditCell(value);
     }
     return getFormattedTableCellValue(value, typography);
   };
@@ -9355,14 +9430,10 @@ const DotTableSelectionToolbar = ({
 };
 
 const sortComparator = (a, b, orderBy) => {
-  var _a, _b;
-  let valueA = a.rowData[orderBy];
-  let valueB = b.rowData[orderBy];
-  if (((_a = a.rowData[orderBy]) === null || _a === void 0 ? void 0 : _a.mainText) && ((_b = b.rowData[orderBy]) === null || _b === void 0 ? void 0 : _b.mainText)) {
-    // use mainText value for sort in case when data for the table cell is of type CustomCellDataWrapper
-    valueA = a.rowData[orderBy].mainText;
-    valueB = b.rowData[orderBy].mainText;
-  }
+  const {
+    valueA,
+    valueB
+  } = getValuesForSort(a, b, orderBy);
   if (valueB < valueA) {
     return -1;
   }
@@ -10279,16 +10350,6 @@ var DatePickerKeydownContext;
   DatePickerKeydownContext[DatePickerKeydownContext["Popper"] = 2] = "Popper";
 })(DatePickerKeydownContext || (DatePickerKeydownContext = {}));
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-var dayjs_min = {exports: {}};
-
-(function (module, exports) {
-!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
-}(dayjs_min));
-
-var dayjs = dayjs_min.exports;
-
 /** This returns a `boolean` indicating whether the Day.js object contains a valid date or not. */
 const checkIfValidDate = (date, format) => dayjs(date, format, true).isValid();
 const getContextEnumBasedOnTarget = (event, inputElement, contextEnum) => {
@@ -10302,14 +10363,6 @@ const getContextEnumBasedOnTarget = (event, inputElement, contextEnum) => {
   return currentContextEnum;
 };
 
-var updateLocale$1 = {exports: {}};
-
-(function (module, exports) {
-!function(e,n){module.exports=n();}(commonjsGlobal,(function(){return function(e,n,t){t.updateLocale=function(e,n){var o=t.Ls[e];if(o)return (n?Object.keys(n):[]).forEach((function(e){o[e]=n[e];})),o};}}));
-}(updateLocale$1));
-
-var updateLocale = updateLocale$1.exports;
-
 const rootClassName$2 = 'dot-date-picker';
 const popperClassName = 'dot-date-picker-popper';
 const containerClassName$1 = 'dot-date-picker-container';
@@ -10532,14 +10585,6 @@ const mockScrollIntoView = scrollIntoViewMock => {
   window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 };
 
-var utc$1 = {exports: {}};
-
-(function (module, exports) {
-!function(t,i){module.exports=i();}(commonjsGlobal,(function(){var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var o=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),o.call(this,t);};var r=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else r.call(this);};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s,o=this;if(f)return o.$offset=u,o.$u=0===s,o;if(0!==s){var r=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(u+r,t)).$offset=u,o.$x.$localOffset=r;}else o=this.utc();return o};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return !!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return "s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)};}}));
-}(utc$1));
-
-var utc = utc$1.exports;
-
 const getDayjsUtcDate = (value, timeFormat) => dayjs.utc(value, timeFormat);
 const createNumbersArray = (length, offset) => Array.from({
   length

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [
@@ -44,6 +44,7 @@
     "@emotion/styled": "^11.10.4",
     "@mui/material": "^5.2.5",
     "@mui/x-date-pickers": "^6.0.1",
+    "dayjs": "^1.11.10",
     "jwt-decode": "^3.1.2",
     "react-dropzone": "^11.4.2",
     "react-grid-layout": "^1.3.4",

package/src/lib/components/input-form-fields/InputText.d.ts

@@ -17,6 +17,11 @@ export interface InputTextProps extends InputProps {
     minRows?: number;
     /** if multiline it wil render multiple lines */
     multiline?: boolean;
+    /**
+     * If this callback is provided, a clear button will be rendered at the end of the input field.
+     * The specified handler will be invoked when the user clicks the clear button.
+     */
+    onClear?: () => void;
     /** Placeholder text always displayed inside the input field */
     placeholder?: string;
     /** value of the InputText */
@@ -31,4 +36,4 @@ export interface EndIconProps {
     success?: boolean;
     warning?: boolean;
 }
-export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,15 +7,17 @@ export interface SnackbarProps extends CommonProps {
     action?: ReactNode;
     /** The anchor of the Snackbar. On smaller screens, the component grows to occupy all the available width, the horizontal alignment is ignored. */
     anchorOrigin?: SnackbarOrigin;
-    /** The message the user sees once the alert displays */
+    /** The message the user sees once the alert displays. */
     children: ReactNode;
+    /** If false, then snackbar does not close when clicking away. True by default. */
+    hideOnClickAway?: boolean;
     /** A callback to handle closing the alert. */
     onClose?: () => void;
     /** Boolean value to switch between opening and closing the alert. */
     open: boolean;
     /** An alert level, indicating the importance of the message. */
     severity: SnackbarSeverity;
-    /** Width of the encapsulated Alert component */
+    /** Width of the encapsulated Alert component. */
     width?: string;
 }
-export declare const DotSnackbar: ({ action, anchorOrigin, ariaLabel, children, className, "data-testid": dataTestId, onClose, open, severity, width, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotSnackbar: ({ action, anchorOrigin, ariaLabel, children, className, "data-testid": dataTestId, hideOnClickAway, onClose, open, severity, width, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/src/lib/components/table/TableCell.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 import { TypographyVariant } from '../typography/Typography';
 export type TextAlignment = 'center' | 'inherit' | 'justify' | 'left' | 'right';
-export interface CustomCellDataWrapper {
+export interface AvatarWithTextCell {
     avatarIcon?: string;
     avatarImageSrc?: string;
     mainText: string;

package/src/lib/components/table/index.d.ts

@@ -1,7 +1,7 @@
 export type { DotColumnHeader, TableRowProps } from './utils/interfaces';
 export type { TableActionProps } from './TableAction';
 export type { TableActionsProps } from './TableActions';
-export type { CustomCellDataWrapper, TextAlignment } from './TableCell';
+export type { AvatarWithTextCell, TextAlignment } from './TableCell';
 export type { TableDataWithPagination } from './TableDataWithPagination';
 export type { SortDirection } from './TableHeaderCell';
 export type { RowsPerPageOption } from './TablePagination';

package/src/lib/components/table/utils/helpers.d.ts

@@ -1,7 +1,15 @@
 import { ReactNode } from 'react';
 import { TypographyVariant } from '../../typography/Typography';
 import { TableRowProps } from './interfaces';
+import { AvatarWithTextCell } from '../TableCell';
+import { InlineEditProps } from '../../inline-edit';
 export declare const getFormattedTableCellValue: (value: any, typographyVariant: TypographyVariant) => ReactNode;
+export declare const renderAvatarWithTextCell: (avatarWithText: AvatarWithTextCell) => import("react/jsx-runtime").JSX.Element;
+export declare const renderInlineEditCell: (inlineEdit: InlineEditProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getValuesForSort: (a: TableRowProps, b: TableRowProps, orderBy: string) => {
+    valueA: any;
+    valueB: any;
+};
 export declare const getContainerMaxHeightStyle: (stickyHeader?: boolean, maxHeight?: string) => string;
 export declare const getSelectedRowIds: (id: string, isChecked: boolean, selectedIds: string[]) => string[];
 export declare const getBulkSelectedRowIds: (isChecked: boolean, selectedIds: string[], pageData: TableRowProps[]) => string[];