@digital-ai/dot-components 4.1.1 → 4.3.0

package/index.esm.js

@@ -175,7 +175,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$1k = 'dot-text-field';
+const rootClassName$1l = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const wrapperClassName$2 = 'dot-label-wrapper';
 const labelClassName = 'dot-input-label';
@@ -228,7 +228,7 @@ const StyledTextField = styled(TextField)`
   $maxRows,
   $minRows
 }) => css`
-    &.${rootClassName$1k} {
+    &.${rootClassName$1l} {
       .MuiInputBase-root {
         margin-bottom: 0;
       }
@@ -290,7 +290,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$1k} {
+    &.${rootSelectClassName}, &.${rootClassName$1l} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -381,12 +381,12 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$1j = 'dot-icon';
+const rootClassName$1k = 'dot-icon';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1j} {
+    &.${rootClassName$1k} {
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
@@ -427,7 +427,7 @@ const DotIcon = ({
   iconId,
   tooltip
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
   return jsx(DotTooltip, {
     title: tooltip,
     children: jsx(StyledIcon, {
@@ -488,7 +488,7 @@ const DotTypography = ({
   });
 };
 
-const rootClassName$1i = 'dot-accordion';
+const rootClassName$1j = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion)`
@@ -499,7 +499,7 @@ const StyledAccordion = styled(Accordion)`
       background: ${theme.palette.figma.background.level1.white};
     }
 
-    &.${rootClassName$1i} .${summaryClassName} {
+    &.${rootClassName$1j} .${summaryClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level1.white};
       color: ${theme.palette.figma.typography.black};
@@ -544,7 +544,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1i,
+  'data-pendoid': dataPendoId = rootClassName$1j,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -555,7 +555,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -606,15 +606,15 @@ const DotAccordion = ({
   });
 };
 
-const rootClassName$1h = 'dot-action-toolbar';
+const rootClassName$1i = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1h} {
+    &.${rootClassName$1i} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$1k} .MuiInputBase-root {
+      .${rootClassName$1l} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -628,7 +628,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -1698,12 +1698,12 @@ const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
 const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
 const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
 
-const rootClassName$1g = 'dot-alert-banner';
+const rootClassName$1h = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1g} {
+    &.${rootClassName$1h} {
       align-items: center;
       box-sizing: border-box;
       min-height: 48px;
@@ -1738,7 +1738,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1g,
+  'data-pendoid': dataPendoId = rootClassName$1h,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1746,7 +1746,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1g, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1h, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$2(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -2424,7 +2424,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$1f = 'dot-avatar';
+const rootClassName$1g = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2434,7 +2434,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1f} {
+    &.${rootClassName$1g} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2546,7 +2546,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2585,12 +2585,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$1e = 'dot-button';
+const rootClassName$1f = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1e} {
+    &.${rootClassName$1f} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -2674,7 +2674,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1e,
+  'data-pendoid': dataPendoId = rootClassName$1f,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -2690,7 +2690,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
   let color;
   let variant;
   switch (type) {
@@ -2714,7 +2714,7 @@ const DotButton = forwardRef(({
   return jsx(DotTooltip, {
     placement: tooltipPlacement,
     title: tooltip,
-    "data-testid": `${dataTestId || rootClassName$1e}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$1f}-tooltip`,
     children: jsx(StyledButton, {
       "aria-label": ariaLabel,
       autoFocus: autoFocus,
@@ -2723,7 +2723,7 @@ const DotButton = forwardRef(({
       },
       color: color,
       "data-pendoid": dataPendoId,
-      "data-testid": dataTestId || rootClassName$1e,
+      "data-testid": dataTestId || rootClassName$1f,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -2742,10 +2742,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$1d = 'dot-link';
+const rootClassName$1e = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$1d} {
+    &.${rootClassName$1e} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -2761,7 +2761,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$1d,
+  'data-pendoid': dataPendoId = rootClassName$1e,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2774,7 +2774,7 @@ const DotLink = ({
   underline = 'always',
   variant = 'body1'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$2(children) && !ariaLabel) {
@@ -2825,7 +2825,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$1c = 'dot-list';
+const rootClassName$1d = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -2833,7 +2833,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$1c} {
+      &.${rootClassName$1d} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -2926,12 +2926,12 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$1b = 'dot-progress';
+const rootClassName$1c = 'dot-progress';
 const StyledProgress = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1b} {
+    &.${rootClassName$1c} {
       line-height: 0;
 
       .dot-progress-with-label-wrapper {
@@ -2982,7 +2982,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -3048,13 +3048,13 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$1a = 'dot-popper';
+const rootClassName$1b = 'dot-popper';
 const arrowClassName = 'MuiPopper-arrow';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1a} {
+    &.${rootClassName$1b} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3113,7 +3113,7 @@ const StyledPopper$1 = styled(Popper)`
       }
     }
 
-    &.${rootClassName$1a}, &.${rootClassName$1a} > .dot-popper-paper {
+    &.${rootClassName$1b}, &.${rootClassName$1b} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -3143,12 +3143,12 @@ const StyledArrow = styled('span')`
 `;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$19 = 'dot-menu';
+const rootClassName$1a = 'dot-menu';
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1a} {
+    &.${rootClassName$1b} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
 
@@ -3158,7 +3158,7 @@ const StyledPopper = styled(Popper)`
 }) => $zIndex === undefined ? `z-index: ${levelSecond};` : `z-index: ${$zIndex};`}      
       }
     }
-    &.${rootClassName$19}, &.${rootClassName$1a} {
+    &.${rootClassName$1a}, &.${rootClassName$1b} {
       .MuiPaper-root:not(:empty) {
         border: 1px solid ${theme.palette.layer.n100};
       }
@@ -3238,14 +3238,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$18 = 'dot-ul';
+const rootClassName$19 = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$18} {
+    &.${rootClassName$19} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3341,7 +3341,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3452,7 +3452,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$19, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$1a, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3540,12 +3540,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$17 = 'dot-drawer';
+const rootClassName$18 = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$17} .MuiBackdrop-root {
+    &.${rootClassName$18} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3564,12 +3564,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$16 = 'dot-drawer-header';
+const rootClassName$17 = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$17} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3580,13 +3580,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$15 = 'dot-icon-btn';
+const rootClassName$16 = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$15} {
+    &.${rootClassName$16} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -3645,7 +3645,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$15,
+  'data-pendoid': dataPendoId = rootClassName$16,
   'data-testid': dataTestId,
   disableRipple = false,
   disabled = false,
@@ -3658,7 +3658,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$15, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$16, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     "data-testid": "icon-button-tooltip",
     placement: tooltipPlacement,
@@ -3693,7 +3693,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -3710,10 +3710,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$14 = 'dot-drawer-body';
+const rootClassName$15 = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$15} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -3734,7 +3734,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3749,12 +3749,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$13 = 'dot-drawer-footer';
+const rootClassName$14 = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$14} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -3767,7 +3767,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3783,7 +3783,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$17,
+  'data-pendoid': dataPendoId = rootClassName$18,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -3806,7 +3806,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
   const backdropEnabled = variant === 'temporary' && !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.hideBackdrop);
   const headerExists = !!drawerHeaderProps;
   const bodyPendoId = drawerBodyProps ? drawerBodyProps['data-pendoid'] : 'drawer-body';
@@ -4264,7 +4264,7 @@ const DotList = ({
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef();
   const disableCloseOnClickAway = !nestedListCloseOnClickAway && nestedListType === 'expandable';
@@ -4362,12 +4362,12 @@ const DotList = ({
   });
 };
 
-const rootClassName$12 = 'dot-copy-button';
+const rootClassName$13 = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$12} .copied-to-clipboard {
+    &.${rootClassName$13} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4393,7 +4393,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$12,
+  'data-pendoid': dataPendoId = rootClassName$13,
   'data-testid': dataTestId = 'dot-copy-button',
   disabled = false,
   disableRipple = false,
@@ -4441,7 +4441,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$12,
+    className: rootClassName$13,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4545,7 +4545,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$1k,
+  'data-pendoid': dataPendoId = rootClassName$1l,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4593,7 +4593,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$1k, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1l, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -4735,10 +4735,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$11 = 'dot-search-input';
+const rootClassName$12 = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$11} {
+    &.${rootClassName$12} {
     }
   `}
 `;
@@ -4755,7 +4755,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -5011,12 +5011,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$10 = 'dot-app-switcher';
+const rootClassName$11 = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$10} {
+    &.${rootClassName$11} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -5126,7 +5126,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5504,12 +5504,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$$ = 'dot-sidebar';
+const rootClassName$10 = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$$} {
+    &.${rootClassName$10} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -5803,10 +5803,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$_ = 'dot-truncate-with-tooltip';
+const rootClassName$$ = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$_} {
+    &.${rootClassName$$} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -5837,7 +5837,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$_, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -5949,7 +5949,7 @@ const DotSidebar = ({
   };
   useKeyPress(collapsable && collapseKey, toggleNavCollapseState, [isOpen, collapsable]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$$, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$10, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -6018,12 +6018,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$Z = 'dot-badge';
+const rootClassName$_ = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Z} {
+    &.${rootClassName$_} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -6058,7 +6058,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -6080,7 +6080,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$Y = 'dot-app-toolbar';
+const rootClassName$Z = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -6120,7 +6120,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Y} {
+    &.${rootClassName$Z} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -6242,7 +6242,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -6372,14 +6372,14 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$X = 'dot-autocomplete';
+const rootClassName$Y = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Y} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -6416,12 +6416,12 @@ const StyledAutocomplete = styled(Autocomplete)`
   `}
 `;
 
-const rootClassName$W = 'dot-chip';
+const rootClassName$X = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$X} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6527,7 +6527,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$W,
+  'data-pendoid': dataPendoId = rootClassName$X,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6540,7 +6540,7 @@ const DotChip = ({
   tabIndex
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$X, className, errorClass);
   const getChipLabel = () => {
     if (charactersLimit <= 0 || children.length < charactersLimit) return children;
     const label = `${children.substring(0, charactersLimit)}...`;
@@ -6640,7 +6640,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$X,
+  'data-pendoid': dataPendoId = rootClassName$Y,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -6696,10 +6696,10 @@ 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$X, size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1k, readOnly && readOnlyClassName$1, textFieldWarningClassName);
+  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 popperClasses = useStylesWithRootClass(rootClassName$1a, popperClassName);
+  const popperClasses = useStylesWithRootClass(rootClassName$1b, popperClassName);
   let highlightedOption = null;
   let textFieldInput;
   const textFieldRef = element => {
@@ -6982,10 +6982,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$V = 'dot-avatar-group';
+const rootClassName$W = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$V} {
+      &.${rootClassName$W} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -7004,7 +7004,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -7019,6 +7019,89 @@ const DotAvatarGroup = ({
   });
 };
 
+const rootClassName$V = 'dot-avatar-with-details';
+const StyledAvatarWithDetails = styled.div`
+  ${({
+  theme,
+  $maxSubtitleLines,
+  $maxTitleLines
+}) => css`
+    &.${rootClassName$V} {
+      gap: ${theme.spacing(2)};
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .dot-avatar-with-details-title-and-subtitle {
+        overflow-x: hidden;
+        width: 100%;
+
+        .dot-avatar-with-details-title,
+        .dot-avatar-with-details-subtitle {
+          overflow-wrap: break-word;
+
+          &.max-lines-clamp {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            white-space: normal;
+            overflow: hidden;
+          }
+        }
+        .dot-avatar-with-details-title.max-lines-clamp {
+          -webkit-line-clamp: ${$maxTitleLines};
+        }
+        .dot-avatar-with-details-subtitle.max-lines-clamp {
+          -webkit-line-clamp: ${$maxSubtitleLines};
+        }
+      }
+    }
+  `}
+`;
+
+const DotAvatarWithDetails = ({
+  ariaLabel,
+  avatar,
+  className,
+  'data-pendoid': dataPendoId = rootClassName$V,
+  'data-testid': dataTestId,
+  subtitle,
+  title
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className);
+  const titleClasses = useStylesWithRootClass('dot-avatar-with-details-title', title.maxLines ? 'max-lines-clamp' : '');
+  const subtitleClasses = useStylesWithRootClass('dot-avatar-with-details-subtitle', (subtitle === null || subtitle === void 0 ? void 0 : subtitle.maxLines) ? 'max-lines-clamp' : '');
+  return jsxs(StyledAvatarWithDetails, {
+    "aria-label": ariaLabel,
+    className: rootClasses,
+    "data-pendoid": dataPendoId,
+    "data-testid": dataTestId,
+    "$maxSubtitleLines": subtitle === null || subtitle === void 0 ? void 0 : subtitle.maxLines,
+    "$maxTitleLines": title.maxLines,
+    children: [jsx(DotAvatar, Object.assign({}, avatar)), jsxs("div", {
+      className: "dot-avatar-with-details-title-and-subtitle",
+      children: [jsx(DotTooltip, {
+        hoverVisibility: "overflow",
+        title: title.text,
+        children: jsx(DotTypography, {
+          className: titleClasses,
+          "data-testid": "avatar-title",
+          variant: title.typographyVariant || 'subtitle1',
+          children: title.text
+        })
+      }), (subtitle === null || subtitle === void 0 ? void 0 : subtitle.text) && jsx(DotTooltip, {
+        hoverVisibility: "overflow",
+        title: subtitle.text,
+        children: jsx(DotTypography, {
+          className: subtitleClasses,
+          "data-testid": "avatar-subtitle",
+          variant: subtitle.typographyVariant || 'body2',
+          children: subtitle.text
+        })
+      })]
+    })]
+  });
+};
+
 const rootClassName$U = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
@@ -9832,7 +9915,7 @@ const categorySort = (a, b) => a.localeCompare(b);
 const metadataKey = isPublishedOnly => isPublishedOnly ? 'published' : 'all';
 const handleUpdateDashboard = (dashboards, updatedDashboard) => {
   updateItemInArray(dashboards, updatedDashboard, ID);
-  return dashboards;
+  return dashboards ? [...dashboards] : dashboards;
 };
 const DotMetadataApiContext = createContext(null);
 const accountHeaderKey = 'X-Digitalai-Account-ID';
@@ -9860,6 +9943,7 @@ const DotMetadataApiProvider = ({
   const [accountId, setAccountId] = useState(accountOverrideId);
   const [dashboards, setDashboards] = useState();
   const [dashboardsLoading, setDashboardsLoading] = useState(true);
+  const [dashboardSearchLoading, setDashboardSearchLoading] = useState(false);
   const [metadata, setMetadata] = useState(null);
   const [metadataLoading, setMetadataLoading] = useState(true);
   const [helpContentLoading, setHelpContentLoading] = useState(true);
@@ -9892,6 +9976,7 @@ const DotMetadataApiProvider = ({
     metadataLoading,
     dashboardsError,
     dashboardsLoading,
+    dashboardSearchLoading,
     helpContentLoading,
     openedDashboardDetails,
     platformConsoleUrl,
@@ -9921,14 +10006,16 @@ const DotMetadataApiProvider = ({
       favorite,
       returnErrors = false
     }) => {
+      if (OpenAPI.BASE === MOCK_API_URL) {
+        setDashboardsError(null);
+        return Promise.resolve([]);
+      }
       setAccountIdHeader(accountId);
-      setDashboardsLoading(true);
+      setDashboardSearchLoading(true);
       return cancelablePromise(DashboardsService.getDashboardsService(start, count, sort, filter, favorite, q, authorFullname, authorId, biType, description, id, isOotbDashboard, lifecycleState, name, targetApp)).then(response => {
         setDashboardsError(null);
-        setDashboardsLoading(false);
         return response.results;
       }).catch(error => {
-        setDashboardsLoading(false);
         if (returnErrors) {
           return {
             error: error.message
@@ -9937,7 +10024,7 @@ const DotMetadataApiProvider = ({
           setDashboardsError(error);
           return null;
         }
-      });
+      }).finally(() => setDashboardSearchLoading(false));
     },
     deleteDashboard: dashboardId => {
       setAccountIdHeader(accountId);
@@ -10015,6 +10102,12 @@ const DotMetadataApiProvider = ({
       }
     },
     updateDashboard: (dashboardId, dashboard, isSync = false) => __awaiter(void 0, void 0, void 0, function* () {
+      if (OpenAPI.BASE === MOCK_API_URL) {
+        setDashboardsError(null);
+        return Promise.resolve(Object.assign(Object.assign({}, dashboard), {
+          id: dashboardId
+        }));
+      }
       setAccountIdHeader(accountId);
       return cancelablePromise(DashboardsService.patchDashboardsService(dashboardId, dashboard, isSync)).then(response => {
         setDashboardsError(null);
@@ -10029,6 +10122,7 @@ const DotMetadataApiProvider = ({
         const appTypeMetadata = metadata[appType];
         if (key in appTypeMetadata) {
           appTypeMetadata[key]['authors'].sort(authorSort);
+          setMetadataLoading(false);
           return Promise.resolve(appTypeMetadata[key]['authors']);
         }
       } else if (OpenAPI.BASE === MOCK_API_URL) {
@@ -10047,6 +10141,7 @@ const DotMetadataApiProvider = ({
         const appTypeMetadata = metadata[appType];
         if (key in appTypeMetadata) {
           appTypeMetadata[key]['categories'].sort(categorySort);
+          setMetadataLoading(false);
           return Promise.resolve(appTypeMetadata[key]['categories']);
         }
       } else if (OpenAPI.BASE === MOCK_API_URL) {
@@ -10077,7 +10172,7 @@ const DotMetadataApiProvider = ({
         });
       }
     })
-  }), [accountId, metadata, metadataLoading, dashboardsError, dashboardsLoading, openedDashboardDetails, platformConsoleUrl, retrieveMetadata]);
+  }), [accountId, metadata, metadataLoading, dashboardsError, dashboardsLoading, dashboardSearchLoading, openedDashboardDetails, platformConsoleUrl, retrieveMetadata]);
   if (apiUrl && OpenAPI.BASE !== apiUrl) {
     OpenAPI.BASE = apiUrl;
   }
@@ -10138,7 +10233,7 @@ const StyledSnackbar = styled(Snackbar)`
       .MuiAlert-message {
         word-break: break-word;
       }
-      .${rootClassName$1g} {
+      .${rootClassName$1h} {
         align-items: flex-start;
       }
       &.MuiSnackbar-anchorOriginTopLeft,
@@ -10864,6 +10959,9 @@ const StyledDashboardDialog = styled(DotDialog)`
     .dot-input-select {
       margin-bottom: ${theme.spacing(2)};
     }
+    .disabled-fields-banner {
+      margin-bottom: ${theme.spacing(2)};
+    }
   `}
 `;
 const StyledDialogActions = styled(DialogActions)`
@@ -10905,6 +11003,10 @@ function DotDashboardDialog({
   availableCategories,
   copyDashboard,
   editDashboard,
+  fieldConfig = {
+    apptype: 'disabled'
+  },
+  messages,
   open,
   onClose,
   onSubmit,
@@ -10921,11 +11023,28 @@ function DotDashboardDialog({
     name
   } = formValues;
   const {
+    dashboardSearchLoading,
     searchDashboards
   } = useDotMetadataApiContext();
   const {
     cancelablePromise
   } = useCancelablePromise();
+  const fieldConfigWithDefault = useMemo(() => {
+    let config = fieldConfig;
+    if (!config) {
+      config = {
+        apptype: 'disabled'
+      };
+    } else if (!('apptype' in config)) {
+      config = Object.assign(Object.assign({}, config), {
+        apptype: 'disabled'
+      });
+    }
+    return config;
+  }, [fieldConfig]);
+  const isDisabled = useCallback((key, b = true) => {
+    return b && key in fieldConfigWithDefault && fieldConfigWithDefault[key] === 'disabled';
+  }, [fieldConfigWithDefault]);
   useEffect(() => {
     if (copyDashboard) {
       setFormValues(orig => Object.assign(Object.assign({}, orig), {
@@ -10945,30 +11064,23 @@ function DotDashboardDialog({
       onClose(false);
     };
   }, []);
-  const handleSubmit = useCallback(returnToList => __awaiter(this, void 0, void 0, function* () {
+  const handleSubmit = useCallback(isDone => __awaiter(this, void 0, void 0, function* () {
     setIsLoadingSubmit(true);
     const useFormValues = Object.assign(Object.assign({}, formValues), {
       id: editDashboard === null || editDashboard === void 0 ? void 0 : editDashboard.id
     });
     const validName = yield validateName(useFormValues.name);
     if (validName) {
-      yield onSubmit(useFormValues, returnToList);
+      yield onSubmit(useFormValues, isDone);
     }
     setIsLoadingSubmit(false);
   }), [formValues, editDashboard]);
   const handleSubmitCreate = useCallback(() => {
-    handleSubmit(false);
-  }, [handleSubmit]);
-  const handleSubmitEditExit = useCallback(() => {
     handleSubmit(true);
   }, [handleSubmit]);
-  const handleSubmitEditContinue = useCallback(() => {
-    if (isDirty || !onContinue) {
-      handleSubmit(false);
-    } else {
-      onContinue();
-    }
-  }, [isDirty, handleSubmit, onContinue]);
+  const handleSubmitEdit = useCallback(() => {
+    handleSubmit(false);
+  }, [handleSubmit]);
   const handleChange = useCallback(event => {
     const targetName = event.target.name;
     const value = event.target.value;
@@ -11030,12 +11142,10 @@ function DotDashboardDialog({
       validateName(newName);
     }
   }, [validateName]);
-  const validateRequiredFields = () => {
-    if (!formValues.name) {
-      return false;
-    }
-    return true;
-  };
+  const isDescriptionError = description.length > DASHBOARD_DESCRIPTION_MAX_LENGTH;
+  const validateFields = useCallback(() => {
+    return !!formValues.name && !nameError && !isDescriptionError;
+  }, [formValues.name, nameError, isDescriptionError]);
   return jsxs(StyledDashboardDialog, {
     cancelButtonProps: {
       'data-testid': 'cancel-create-dashboard-button'
@@ -11053,7 +11163,14 @@ function DotDashboardDialog({
       label: 'Continue'
     },
     title: title || 'Create dashboard',
-    children: [jsx(DotInputText, {
+    children: [messages === null || messages === void 0 ? void 0 : messages.map(message => jsx(DotAlertBanner, {
+      severity: "info",
+      className: "disabled-fields-banner",
+      "data-testid": "disabled-fields-banner",
+      children: jsx(DotTypography, {
+        children: message
+      })
+    }, message)), jsx(DotInputText, {
       autoFocus: true,
       "data-testid": "dashboard-dialog-name-input",
       error: nameError || name.length > DASHBOARD_NAME_MAX_LENGTH,
@@ -11061,20 +11178,22 @@ function DotDashboardDialog({
       id: "name",
       label: "Dashboard name",
       name: "name",
+      disabled: isDisabled('name'),
       onBlur: handleNameBlur,
       onChange: handleChange,
       required: true,
       value: name
     }), jsx(DotInputText, {
       "data-testid": "dashboard-dialog-description-input",
-      error: description.length > DASHBOARD_DESCRIPTION_MAX_LENGTH,
-      helperText: description.length > DASHBOARD_DESCRIPTION_MAX_LENGTH && `Description must be ${DASHBOARD_DESCRIPTION_MAX_LENGTH} characters or less`,
+      error: isDescriptionError,
+      helperText: isDescriptionError && `Description must be ${DASHBOARD_DESCRIPTION_MAX_LENGTH} characters or less`,
       id: "description",
       label: "Description",
       multiline: true,
       minRows: 4,
       maxRows: 4,
       name: "description",
+      disabled: isDisabled('description'),
       onChange: handleChange,
       value: description
     }), editDashboard && jsxs(Fragment, {
@@ -11087,7 +11206,7 @@ function DotDashboardDialog({
         id: "dashboard-apptype-select",
         "data-testid": "dashboard-dialog-apptype-input",
         name: "Select application",
-        disabled: true,
+        disabled: isDisabled('apptype'),
         value: editDashboard.target_apps[0]
       })]
     }), jsx(DotTypography, {
@@ -11106,6 +11225,7 @@ function DotDashboardDialog({
       placeholder: "Select categories",
       label: "Category",
       required: editDashboard && editDashboard.lifecycle_state === DashboardView.lifecycle_state.PUBLISHED,
+      disabled: isDisabled('categories'),
       value: getCategoryValues()
     }), editDashboard && jsx(Fragment, {
       children: jsxs(StyledDialogActions, {
@@ -11117,16 +11237,10 @@ function DotDashboardDialog({
           children: "Cancel"
         }), jsx(DotButton, {
           "data-testid": "save-edit-exit-dashboard-button",
-          disabled: isLoadingSubmit || !isDirty || !validateRequiredFields(),
-          onClick: handleSubmitEditExit,
-          type: "outlined",
-          children: "Save and exit"
-        }), jsx(DotButton, {
-          "data-testid": "save-edit-continue-dashboard-button",
-          disabled: isLoadingSubmit || !validateRequiredFields(),
-          onClick: handleSubmitEditContinue,
+          disabled: dashboardSearchLoading || isLoadingSubmit || !isDirty || !validateFields(),
+          onClick: handleSubmitEdit,
           type: "primary",
-          children: isDirty ? 'Save and continue' : 'Continue'
+          children: "Save"
         })]
       })
     })]
@@ -11752,6 +11866,8 @@ const StyledDotMenu = styled(DotMenu)`
   `}
 `;
 
+const disabledFieldsMessage = 'Dashboard name and description cannot be modified while the dashboard editor is active. Please save your changes and close the editor, if you need to make a name or description change.';
+const inProgressEditMessage = 'This is a published dashboard; changes will not be visible to other users until you publish the updated dashboard.';
 function DotDashboardOptionsMenu({
   dashboard,
   currentUser,
@@ -11761,12 +11877,19 @@ function DotDashboardOptionsMenu({
   onStartDuplicate,
   onStartStatusChange,
   onStartRevert,
+  onUpdatedProperties,
   onViewOriginal,
   onViewMode,
   onDetails
 }) {
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
+  const [isEditPropertiesDialogOpen, setIsEditPropertiesDialogOpen] = useState(false);
+  const [categoryOptions, setCategoryOptions] = useState();
+  const {
+    getCategories,
+    updateDashboard
+  } = useDotMetadataApiContext();
   const handleMenuClick = useCallback(event => {
     setAnchorEl(event.currentTarget);
     setOpen(orig => !orig);
@@ -11779,6 +11902,34 @@ function DotDashboardOptionsMenu({
     handleMenuClose();
     onViewMode(dashboard, 'edit');
   }, [dashboard, onViewMode]);
+  const handleEditPropertiesClick = useCallback(() => {
+    var _a;
+    handleMenuClose();
+    setIsEditPropertiesDialogOpen(true);
+    if (((_a = dashboard === null || dashboard === void 0 ? void 0 : dashboard.target_apps) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      getCategories(dashboard.target_apps[0]).then(retrievedCategories => {
+        // group categories for all app types associated with this dashboard
+        const categoryOptionSet = new Set();
+        retrievedCategories.forEach(categoryOptionSet.add, categoryOptionSet);
+        setCategoryOptions(Array.from(categoryOptionSet));
+      });
+    } else {
+      setCategoryOptions([]);
+    }
+  }, [dashboard]);
+  const handleSubmitEditProperties = useCallback((data, isDone) => __awaiter(this, void 0, void 0, function* () {
+    return updateDashboard(dashboard.id, {
+      name: data.name,
+      description: data.description,
+      categories: data.categories,
+      target_apps: data.target_apps
+    }).then(result => {
+      if (result && 'id' in result) {
+        setIsEditPropertiesDialogOpen(false);
+        onUpdatedProperties(result, isDone);
+      }
+    });
+  }), [dashboard]);
   const isDraft = dashboard.lifecycle_state === DashboardView.lifecycle_state.DRAFT;
   const isPublished = dashboard.lifecycle_state === DashboardView.lifecycle_state.PUBLISHED;
   const dashboardLocked = isPublished && currentUser && dashboard.is_being_modified && dashboard.modified_author_id !== currentUser.id;
@@ -11796,6 +11947,19 @@ function DotDashboardOptionsMenu({
       key: 'edit'
     });
   }
+  if (onUpdatedProperties && !dashboard.is_ootb_dashboard) {
+    menuItems.push({
+      children: jsx(DotButton, {
+        ariaLabel: "Edit dashboard properties",
+        type: "text",
+        startIcon: jsx(DotIcon, {
+          iconId: "edit"
+        }),
+        children: "Edit properties"
+      }),
+      key: 'edit-props'
+    });
+  }
   if (onStartStatusChange && !dashboard.is_ootb_dashboard && isDraft) {
     menuItems.push({
       key: 'publish',
@@ -11911,6 +12075,9 @@ function DotDashboardOptionsMenu({
       case 'edit':
         handleEditClick();
         break;
+      case 'edit-props':
+        handleEditPropertiesClick();
+        break;
       case 'duplicate':
         onStartDuplicate(dashboard);
         break;
@@ -11933,8 +12100,30 @@ function DotDashboardOptionsMenu({
     }
     handleMenuClose();
   }, [menuItems, handleMenuClose]);
+  const handleCloseEditProperties = useCallback(_isDone => {
+    setIsEditPropertiesDialogOpen(false);
+  }, []);
+  const messages = [];
+  if (dashboard.is_being_modified || dashboard.lifecycle_state === DashboardView.lifecycle_state.PUBLISHED) {
+    messages.push(inProgressEditMessage);
+  }
+  if (isEdit) {
+    messages.push(disabledFieldsMessage);
+  }
   return menuItems.length > 0 ? jsxs(Fragment, {
-    children: [jsx(DotIconButton, {
+    children: [jsx(DotDashboardDialog, {
+      title: "Edit dashboard properties",
+      availableCategories: categoryOptions,
+      fieldConfig: isEdit ? {
+        name: 'disabled',
+        description: 'disabled'
+      } : undefined,
+      messages: messages,
+      open: isEditPropertiesDialogOpen,
+      onClose: handleCloseEditProperties,
+      onSubmit: handleSubmitEditProperties,
+      editDashboard: dashboard
+    }), jsx(DotIconButton, {
       className: "expand-button",
       "data-testid": "card-header-action-button",
       iconId: "options",
@@ -12064,6 +12253,7 @@ function DotDashboardActions({
   onDeleted,
   onDuplicated,
   onToggleFullscreen,
+  onUpdatedProperties,
   onViewMode,
   onViewOriginal,
   onRevertChanges,
@@ -12215,6 +12405,7 @@ function DotDashboardActions({
       onStartDuplicate: handleStartDuplicateIfConfig,
       onStartDelete: handleStartDeleteIfConfig,
       onStartRevert: handleRevertChangesIfConfig,
+      onUpdatedProperties: onUpdatedProperties,
       onDetails: () => setOpenedDashboardDetails(dashboard),
       currentUser: currentUser ? currentUser : null
     }), onToggleFullscreen && jsx(FullscreenButton, {
@@ -12339,6 +12530,7 @@ function DotDashboardHeader({
   onRevertChanges,
   onViewOriginal,
   onToggleFullscreen,
+  onUpdatedProperties,
   onViewMode,
   showStatus = false,
   modifiedAuthorUser = null
@@ -12412,6 +12604,7 @@ function DotDashboardHeader({
         onDeleted: onDeleted,
         onDuplicated: onDuplicated,
         onToggleFullscreen: onToggleFullscreen,
+        onUpdatedProperties: onUpdatedProperties,
         onViewMode: onViewMode,
         onViewOriginal: onViewOriginal,
         currentUser: currentUser ? currentUser : null
@@ -12751,7 +12944,7 @@ const StyledFormContainer = styled.div`
 
       .${rootClassName$N},
         .${rootClassName$P},
-        .${rootClassName$1k},
+        .${rootClassName$1l},
         .${rootSelectClassName},
         .${rootClassName$A},
         .${rootClassName$z} {
@@ -12759,7 +12952,7 @@ const StyledFormContainer = styled.div`
       }
 
       .${wrapperClassName$2} {
-        + .${rootClassName$1k},
+        + .${rootClassName$1l},
         .${wrapperClassName$2}
         + .${rootSelectClassName},
         .${wrapperClassName$2}
@@ -17336,7 +17529,7 @@ const DotPopper = ({
   placement
 }) => {
   const [arrowRef, setArrowRef] = useState(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
@@ -18979,4 +19172,4 @@ const BoardColumnSummary = ({
   });
 };
 
-export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage };
+export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotAvatarWithDetails, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage };