@mirohq/design-system-dropdown-menu 4.4.26 → 4.4.28

package/dist/module.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { createContext, useState, useRef, useCallback, useContext, useEffect } from 'react';
+import React, { createContext, useState, useCallback, useContext, useRef, useEffect } from 'react';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Portal as Portal$1 } from '@radix-ui/react-dropdown-menu';
 import { BaseTooltipProvider, useBaseTooltipContext } from '@mirohq/design-system-base-tooltip';
 import { usePrevious } from '@mirohq/design-system-use-previous';
 import { IconProhibit, IconCheckMark, IconMinus, IconChevronRight } from '@mirohq/design-system-icons';
 import { addPropsToChildren, booleanify, mergeRefs } from '@mirohq/design-system-utils';
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { styled, theme } from '@mirohq/design-system-stitches';
 import { focus, animations } from '@mirohq/design-system-styles';
@@ -17,7 +18,37 @@ import { styles, Thumb } from '@mirohq/design-system-base-switch';
 import { isVirtualClick } from '@react-aria/utils';
 import { styles as styles$1, isIconComponent } from '@mirohq/design-system-base-icon';
 
-const ItemDescription = styled(Primitive.div, {
+const Context$1 = createContext({
+  leftSlotMount: () => {
+  },
+  leftSlotDestroy: () => {
+  }
+});
+const ItemProvider = ({ children }) => {
+  const [hasSlot, setHasSlot] = useState(false);
+  const leftSlotMount = useCallback(() => {
+    setHasSlot(true);
+  }, []);
+  const leftSlotDestroy = useCallback(() => {
+    setHasSlot(false);
+  }, []);
+  const formattedChildren = hasSlot ? children : addPropsToChildren(children, () => true, {
+    "data-no-left-slot": ""
+  });
+  return /* @__PURE__ */ jsx(
+    Context$1.Provider,
+    {
+      value: {
+        leftSlotMount,
+        leftSlotDestroy
+      },
+      children: formattedChildren
+    }
+  );
+};
+const useItem = () => useContext(Context$1);
+
+const StyledItemDescription = styled(Primitive.div, {
   display: "-webkit-box",
   width: "100%",
   WebkitBoxOrient: "vertical",
@@ -26,7 +57,33 @@ const ItemDescription = styled(Primitive.div, {
   gridArea: "item-description",
   fontSize: "$150",
   lineHeight: 1.5,
-  color: "$text-neutrals-subtle"
+  color: "$text-neutrals-subtle",
+  variants: {
+    v1: {
+      true: {
+        '&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled])': {
+          background: "$background-neutrals-hover",
+          color: "$text-neutrals-hover",
+          '&:not([aria-disabled="true"])': {
+            boxShadow: "none"
+          }
+        }
+      },
+      false: {
+        '&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled])': {
+          background: "$background-primary-subtle-hover",
+          color: "$text-primary-hover",
+          '&:not([aria-disabled="true"])': {
+            boxShadow: "none"
+          }
+        }
+      }
+    }
+  }
+});
+const ItemDescription = React.forwardRef(({ ...props }, forwardRef) => {
+  const [v1] = useNewDesignLanguage();
+  return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(StyledItemDescription, { ...props, v1, ref: forwardRef }) });
 });
 
 const LeftSlot = styled(Primitive.div, {
@@ -48,6 +105,28 @@ const hoverStyles = {
     boxShadow: "none"
   }
 };
+const itemVariantsDefaults = {
+  v1: {
+    true: {
+      '&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled])': {
+        background: "$background-neutrals-hover",
+        color: "$text-neutrals-hover",
+        '&:not([aria-disabled="true"])': {
+          boxShadow: "none"
+        }
+      }
+    },
+    false: {
+      '&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled])': {
+        background: "$background-primary-subtle-hover",
+        color: "$text-primary-hover",
+        '&:not([aria-disabled="true"])': {
+          boxShadow: "none"
+        }
+      }
+    }
+  }
+};
 const itemDefaults = {
   all: "unset",
   boxSizing: "border-box",
@@ -74,7 +153,7 @@ const itemDefaults = {
   }),
   '&:disabled, &[aria-disabled="true"], &[data-disabled]': {
     cursor: "default",
-    ["&, & ".concat(ItemDescription, ", & ").concat(Hotkey$1)]: {
+    ["&, & ".concat(StyledItemDescription, ", & ").concat(Hotkey$1)]: {
       color: "$text-neutrals-disabled"
     },
     ["& ".concat(StyledIllustrationSlot)]: {
@@ -84,7 +163,6 @@ const itemDefaults = {
   "&:disabled, &[data-disabled]": {
     pointerEvents: "none"
   },
-  '&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled])': hoverStyles,
   '&:active:not([aria-disabled="true"])': {
     background: "$background-primary-subtle-active",
     boxShadow: "none",
@@ -113,6 +191,7 @@ const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
     boxSizing: "border-box"
   },
   variants: {
+    ...itemVariantsDefaults,
     variant: {
       "solid-prominent": {
         ["".concat(StyledIndicator)]: {
@@ -157,7 +236,7 @@ const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
   }
 });
 
-const Context$1 = createContext({
+const Context = createContext({
   rightSlotMount: () => 0,
   rightSlotDestroy: () => {
   },
@@ -204,7 +283,7 @@ const ContentProvider = ({
     }
   });
   return /* @__PURE__ */ jsx(
-    Context$1.Provider,
+    Context.Provider,
     {
       value: {
         rightSlotMount,
@@ -215,7 +294,7 @@ const ContentProvider = ({
     }
   );
 };
-const useContent = () => useContext(Context$1);
+const useContent = () => useContext(Context);
 
 const StyledRightSlot = styled(Primitive.div, {
   display: "flex",
@@ -287,36 +366,6 @@ const useAriaDisabled = ({ onSelect, ...restProps }, { exceptions, closeOnSelect
   };
 };
 
-const Context = createContext({
-  leftSlotMount: () => {
-  },
-  leftSlotDestroy: () => {
-  }
-});
-const ItemProvider = ({ children }) => {
-  const [hasSlot, setHasSlot] = useState(false);
-  const leftSlotMount = useCallback(() => {
-    setHasSlot(true);
-  }, []);
-  const leftSlotDestroy = useCallback(() => {
-    setHasSlot(false);
-  }, []);
-  const formattedChildren = hasSlot ? children : addPropsToChildren(children, () => true, {
-    "data-no-left-slot": ""
-  });
-  return /* @__PURE__ */ jsx(
-    Context.Provider,
-    {
-      value: {
-        leftSlotMount,
-        leftSlotDestroy
-      },
-      children: formattedChildren
-    }
-  );
-};
-const useItem = () => useContext(Context);
-
 const CheckboxItem = React.forwardRef(
   ({
     children,
@@ -332,6 +381,7 @@ const CheckboxItem = React.forwardRef(
     const iconCss = { square: "100%", display: "block" };
     const isAriaDisabled = booleanify(ariaDisabled != null ? ariaDisabled : false);
     const disabledUnchecked = (disabled === true || isAriaDisabled) && checked === false;
+    const [v1] = useNewDesignLanguage();
     return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(
       StyledCheckboxItem,
       {
@@ -341,6 +391,7 @@ const CheckboxItem = React.forwardRef(
         disabled,
         onCheckedChange: onChange,
         variant,
+        v1,
         children: [
           children,
           /* @__PURE__ */ jsx(RightSlot, { children: /* @__PURE__ */ jsxs(StyledIndicator, { children: [
@@ -368,8 +419,6 @@ const CONTENT_PADDING = {
 };
 const contentDefaults = {
   maxWidth: "$125",
-  backgroundColor: "$background-neutrals-container",
-  borderRadius: "$50",
   boxShadow: "$50",
   "@media (prefers-reduced-motion: no-preference)": {
     animationDuration: "150ms",
@@ -400,8 +449,22 @@ const contentDefaults = {
   },
   position: "relative",
   zIndex: "$dropdown-menu",
-  outline: "1px solid transparent !important"
+  outline: "1px solid transparent !important",
   // important because Radix overrides outline in element styles
+  variants: {
+    v1: {
+      true: {
+        borderRadius: "$100",
+        backgroundColor: "$background-neutrals-layout",
+        border: ".5px solid $border-neutrals",
+        boxShadow: "0px 1px 8px 0px rgba(34, 36, 40, 0.05);"
+      },
+      false: {
+        borderRadius: "$50",
+        backgroundColor: "$background-neutrals-container"
+      }
+    }
+  }
 };
 
 const StyledItemsContainer = styled("div", {
@@ -500,6 +563,7 @@ const Content = React.forwardRef(
       focusWithouAutoScroll._autoScrollPrevented = true;
       ref.focus = focusWithouAutoScroll;
     };
+    const [v1] = useNewDesignLanguage();
     return /* @__PURE__ */ jsx(ContentProvider, { containerSpacing, children: /* @__PURE__ */ jsx(
       StyledContent,
       {
@@ -514,6 +578,7 @@ const Content = React.forwardRef(
         collisionPadding,
         sticky,
         hideWhenDetached,
+        v1,
         children: /* @__PURE__ */ jsx(
           ScrollableContent,
           {
@@ -531,6 +596,7 @@ const Content = React.forwardRef(
 const StyledItem = styled(RadixDropdownMenu.Item, {
   ...itemDefaults,
   variants: {
+    ...itemVariantsDefaults,
     // This is a hack for the :has() selector
     // Remove it after Firefox implements it
     hasRightSlot: {
@@ -557,12 +623,14 @@ const StyledItem = styled(RadixDropdownMenu.Item, {
 const Item = React.forwardRef(
   ({ disabled = false, variant = "subtle", ...restProps }, forwardRef) => {
     const elementProps = useAriaDisabled(restProps);
+    const [v1] = useNewDesignLanguage();
     return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(
       StyledItem,
       {
         ...elementProps,
         variant,
         disabled,
+        v1,
         ref: forwardRef
       }
     ) });
@@ -619,7 +687,6 @@ const StyledRadioItem = styled(RadixDropdownMenu.RadioItem, {
     }
   },
   ['&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled]) '.concat(StyledRadioContainer)]: {
-    borderColor: "$border-primary-hover",
     ["& ".concat(StyledPill)]: {
       backgroundColor: "$background-primary-prominent-hover"
     }
@@ -635,6 +702,23 @@ const StyledRadioItem = styled(RadixDropdownMenu.RadioItem, {
     ['\n      &[aria-disabled="true"] '.concat(StyledProhibited, ",\n      &[data-disabled] ").concat(StyledProhibited, "\n    ")]: {
       display: "flex"
     }
+  },
+  variants: {
+    v1: {
+      true: {
+        ...itemVariantsDefaults.v1.true,
+        ["".concat(StyledRadioContainer)]: {
+          borderWidth: "2px",
+          borderColor: "$border-neutrals-controls"
+        }
+      },
+      false: {
+        ...itemVariantsDefaults.v1.false,
+        ['&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled]) '.concat(StyledRadioContainer)]: {
+          borderColor: "$border-primary-hover"
+        }
+      }
+    }
   }
 });
 
@@ -642,13 +726,23 @@ const RadioItem = React.forwardRef(({ disabled, children, closeOnSelect = false,
   const elementProps = useAriaDisabled(restProps, {
     closeOnSelect
   });
-  return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(StyledRadioItem, { ...elementProps, disabled, ref: forwardRef, children: [
-    children,
-    /* @__PURE__ */ jsx(RightSlot, { children: /* @__PURE__ */ jsxs(StyledRadioContainer, { children: [
-      /* @__PURE__ */ jsx(StyledPill, {}),
-      /* @__PURE__ */ jsx(StyledProhibited, { weight: "thin" })
-    ] }) })
-  ] }) });
+  const [v1] = useNewDesignLanguage();
+  return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(
+    StyledRadioItem,
+    {
+      ...elementProps,
+      disabled,
+      v1,
+      ref: forwardRef,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(RightSlot, { children: /* @__PURE__ */ jsxs(StyledRadioContainer, { children: [
+          /* @__PURE__ */ jsx(StyledPill, {}),
+          /* @__PURE__ */ jsx(StyledProhibited, { weight: "thin" })
+        ] }) })
+      ]
+    }
+  ) });
 });
 
 const StyledSeparator = styled(RadixDropdownMenu.Separator, {
@@ -667,7 +761,10 @@ const StyledSwitchItem = styled(RadixDropdownMenu.CheckboxItem, {
   ["&[aria-checked=true] ".concat(StyledSwitch)]: styles.checked,
   ['&[aria-checked=true]:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled]) '.concat(StyledSwitch)]: styles.checkedHovered,
   ['&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled]) '.concat(StyledSwitch)]: styles.hovered,
-  ['\n    &[aria-disabled="true"] '.concat(StyledSwitch, ",\n    &[data-disabled] ").concat(StyledSwitch, "\n  ")]: styles.disabled
+  ['\n    &[aria-disabled="true"] '.concat(StyledSwitch, ",\n    &[data-disabled] ").concat(StyledSwitch, "\n  ")]: styles.disabled,
+  variants: {
+    ...itemVariantsDefaults
+  }
 });
 
 const SwitchItem = React.forwardRef(
@@ -680,10 +777,12 @@ const SwitchItem = React.forwardRef(
     ...restProps
   }, forwardRef) => {
     const elementProps = useAriaDisabled(restProps, { closeOnSelect });
+    const [v1] = useNewDesignLanguage();
     return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(
       StyledSwitchItem,
       {
         ...elementProps,
+        v1,
         disabled,
         checked,
         onCheckedChange: onChange,
@@ -760,25 +859,53 @@ const StyledIconContainer = styled(Primitive.span, {
 });
 const StyledSubTrigger = styled(RadixDropdownMenu.SubTrigger, {
   ...itemDefaults,
-  '&[data-state="open"]': hoverStyles,
-  ['&[data-state="open"] '.concat(StyledIconContainer, ', &:is(:hover,[data-hovered]):not([aria-disabled="true"]) ').concat(StyledIconContainer)]: {
-    color: "$icon-primary-hover"
+  variants: {
+    v1: {
+      true: {
+        '&[data-state="open"]': {
+          background: "$background-neutrals-hover",
+          color: "$text-neutrals-hover",
+          '&:not([aria-disabled="true"])': {
+            boxShadow: "none"
+          }
+        },
+        ['&[data-state="open"] '.concat(StyledIconContainer, ', &:is(:hover,[data-hovered]):not([aria-disabled="true"]) ').concat(StyledIconContainer)]: {
+          color: "$icon-neutrals-hover"
+        }
+      },
+      false: {
+        '&[data-state="open"]': hoverStyles,
+        ['&[data-state="open"] '.concat(StyledIconContainer, ', &:is(:hover,[data-hovered]):not([aria-disabled="true"]) ').concat(StyledIconContainer)]: {
+          color: "$icon-primary-hover"
+        }
+      }
+    }
   }
 });
 
 const SubTrigger = React.forwardRef(({ children, disabled = false, ...restProps }, forwardRef) => {
   let { onSelect, ...elementProps } = restProps;
   elementProps = useAriaDisabled(elementProps);
-  return /* @__PURE__ */ jsxs(StyledSubTrigger, { ...elementProps, disabled, ref: forwardRef, children: [
-    children,
-    /* @__PURE__ */ jsx(RightSlot, { children: /* @__PURE__ */ jsx(
-      StyledIconContainer,
-      {
-        "data-testid": process.env.NODE_ENV === "test" ? "submenu-arrow-icon" : void 0,
-        children: /* @__PURE__ */ jsx(IconChevronRight, { size: "small", weight: "thin" })
-      }
-    ) })
-  ] });
+  const [v1] = useNewDesignLanguage();
+  return /* @__PURE__ */ jsxs(
+    StyledSubTrigger,
+    {
+      ...elementProps,
+      v1,
+      disabled,
+      ref: forwardRef,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(RightSlot, { children: /* @__PURE__ */ jsx(
+          StyledIconContainer,
+          {
+            "data-testid": process.env.NODE_ENV === "test" ? "submenu-arrow-icon" : void 0,
+            children: /* @__PURE__ */ jsx(IconChevronRight, { size: "small", weight: "thin" })
+          }
+        ) })
+      ]
+    }
+  );
 });
 
 const StyledSubContent = styled(
@@ -806,6 +933,7 @@ const SubContent = React.forwardRef(
     const contentSideOffset = CONTENT_OFFSET + parseInt(theme.space[paddingToken.x]);
     const contentAlignOffset = -parseInt(theme.space[paddingToken.y]);
     const availableHeight = collisionBoundary != null ? getComputedStyle(collisionBoundary).getPropertyValue("height") : RADIX_CONTENT_AVAILABLE_HEIGHT;
+    const [v1] = useNewDesignLanguage();
     return /* @__PURE__ */ jsx(ContentProvider, { containerSpacing, children: /* @__PURE__ */ jsx(
       StyledSubContent,
       {
@@ -818,6 +946,7 @@ const SubContent = React.forwardRef(
         hideWhenDetached,
         sticky,
         collisionBoundary,
+        v1,
         children: /* @__PURE__ */ jsx(
           ScrollableContent,
           {