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

package/dist/main.js

@@ -9,6 +9,7 @@ var designSystemBaseTooltip = require('@mirohq/design-system-base-tooltip');
 var designSystemUsePrevious = require('@mirohq/design-system-use-previous');
 var designSystemIcons = require('@mirohq/design-system-icons');
 var designSystemUtils = require('@mirohq/design-system-utils');
+var designSystemExperiments = require('@mirohq/design-system-experiments');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemStyles = require('@mirohq/design-system-styles');
@@ -43,7 +44,37 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var RadixDropdownMenu__namespace = /*#__PURE__*/_interopNamespace(RadixDropdownMenu);
 
-const ItemDescription = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+const Context$1 = React.createContext({
+  leftSlotMount: () => {
+  },
+  leftSlotDestroy: () => {
+  }
+});
+const ItemProvider = ({ children }) => {
+  const [hasSlot, setHasSlot] = React.useState(false);
+  const leftSlotMount = React.useCallback(() => {
+    setHasSlot(true);
+  }, []);
+  const leftSlotDestroy = React.useCallback(() => {
+    setHasSlot(false);
+  }, []);
+  const formattedChildren = hasSlot ? children : designSystemUtils.addPropsToChildren(children, () => true, {
+    "data-no-left-slot": ""
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Context$1.Provider,
+    {
+      value: {
+        leftSlotMount,
+        leftSlotDestroy
+      },
+      children: formattedChildren
+    }
+  );
+};
+const useItem = () => React.useContext(Context$1);
+
+const StyledItemDescription = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "-webkit-box",
   width: "100%",
   WebkitBoxOrient: "vertical",
@@ -52,7 +83,33 @@ const ItemDescription = designSystemStitches.styled(designSystemPrimitive.Primit
   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__default["default"].forwardRef(({ ...props }, forwardRef) => {
+  const [v1] = designSystemExperiments.useNewDesignLanguage();
+  return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledItemDescription, { ...props, v1, ref: forwardRef }) });
 });
 
 const LeftSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
@@ -74,6 +131,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",
@@ -100,7 +179,7 @@ const itemDefaults = {
   }),
   '&:disabled, &[aria-disabled="true"], &[data-disabled]': {
     cursor: "default",
-    ["&, & ".concat(ItemDescription, ", & ").concat(designSystemBaseHotkey.Hotkey)]: {
+    ["&, & ".concat(StyledItemDescription, ", & ").concat(designSystemBaseHotkey.Hotkey)]: {
       color: "$text-neutrals-disabled"
     },
     ["& ".concat(StyledIllustrationSlot)]: {
@@ -110,7 +189,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",
@@ -139,6 +217,7 @@ const StyledCheckboxItem = designSystemStitches.styled(RadixDropdownMenu__namesp
     boxSizing: "border-box"
   },
   variants: {
+    ...itemVariantsDefaults,
     variant: {
       "solid-prominent": {
         ["".concat(StyledIndicator)]: {
@@ -183,7 +262,7 @@ const StyledCheckboxItem = designSystemStitches.styled(RadixDropdownMenu__namesp
   }
 });
 
-const Context$1 = React.createContext({
+const Context = React.createContext({
   rightSlotMount: () => 0,
   rightSlotDestroy: () => {
   },
@@ -230,7 +309,7 @@ const ContentProvider = ({
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Context$1.Provider,
+    Context.Provider,
     {
       value: {
         rightSlotMount,
@@ -241,7 +320,7 @@ const ContentProvider = ({
     }
   );
 };
-const useContent = () => React.useContext(Context$1);
+const useContent = () => React.useContext(Context);
 
 const StyledRightSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "flex",
@@ -313,36 +392,6 @@ const useAriaDisabled = ({ onSelect, ...restProps }, { exceptions, closeOnSelect
   };
 };
 
-const Context = React.createContext({
-  leftSlotMount: () => {
-  },
-  leftSlotDestroy: () => {
-  }
-});
-const ItemProvider = ({ children }) => {
-  const [hasSlot, setHasSlot] = React.useState(false);
-  const leftSlotMount = React.useCallback(() => {
-    setHasSlot(true);
-  }, []);
-  const leftSlotDestroy = React.useCallback(() => {
-    setHasSlot(false);
-  }, []);
-  const formattedChildren = hasSlot ? children : designSystemUtils.addPropsToChildren(children, () => true, {
-    "data-no-left-slot": ""
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Context.Provider,
-    {
-      value: {
-        leftSlotMount,
-        leftSlotDestroy
-      },
-      children: formattedChildren
-    }
-  );
-};
-const useItem = () => React.useContext(Context);
-
 const CheckboxItem = React__default["default"].forwardRef(
   ({
     children,
@@ -358,6 +407,7 @@ const CheckboxItem = React__default["default"].forwardRef(
     const iconCss = { square: "100%", display: "block" };
     const isAriaDisabled = designSystemUtils.booleanify(ariaDisabled != null ? ariaDisabled : false);
     const disabledUnchecked = (disabled === true || isAriaDisabled) && checked === false;
+    const [v1] = designSystemExperiments.useNewDesignLanguage();
     return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       StyledCheckboxItem,
       {
@@ -367,6 +417,7 @@ const CheckboxItem = React__default["default"].forwardRef(
         disabled,
         onCheckedChange: onChange,
         variant,
+        v1,
         children: [
           children,
           /* @__PURE__ */ jsxRuntime.jsx(RightSlot, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledIndicator, { children: [
@@ -394,8 +445,6 @@ const CONTENT_PADDING = {
 };
 const contentDefaults = {
   maxWidth: "$125",
-  backgroundColor: "$background-neutrals-container",
-  borderRadius: "$50",
   boxShadow: "$50",
   "@media (prefers-reduced-motion: no-preference)": {
     animationDuration: "150ms",
@@ -426,8 +475,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 = designSystemStitches.styled("div", {
@@ -526,6 +589,7 @@ const Content = React__default["default"].forwardRef(
       focusWithouAutoScroll._autoScrollPrevented = true;
       ref.focus = focusWithouAutoScroll;
     };
+    const [v1] = designSystemExperiments.useNewDesignLanguage();
     return /* @__PURE__ */ jsxRuntime.jsx(ContentProvider, { containerSpacing, children: /* @__PURE__ */ jsxRuntime.jsx(
       StyledContent,
       {
@@ -540,6 +604,7 @@ const Content = React__default["default"].forwardRef(
         collisionPadding,
         sticky,
         hideWhenDetached,
+        v1,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ScrollableContent,
           {
@@ -557,6 +622,7 @@ const Content = React__default["default"].forwardRef(
 const StyledItem = designSystemStitches.styled(RadixDropdownMenu__namespace.Item, {
   ...itemDefaults,
   variants: {
+    ...itemVariantsDefaults,
     // This is a hack for the :has() selector
     // Remove it after Firefox implements it
     hasRightSlot: {
@@ -583,12 +649,14 @@ const StyledItem = designSystemStitches.styled(RadixDropdownMenu__namespace.Item
 const Item = React__default["default"].forwardRef(
   ({ disabled = false, variant = "subtle", ...restProps }, forwardRef) => {
     const elementProps = useAriaDisabled(restProps);
+    const [v1] = designSystemExperiments.useNewDesignLanguage();
     return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
       StyledItem,
       {
         ...elementProps,
         variant,
         disabled,
+        v1,
         ref: forwardRef
       }
     ) });
@@ -645,7 +713,6 @@ const StyledRadioItem = designSystemStitches.styled(RadixDropdownMenu__namespace
     }
   },
   ['&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled]) '.concat(StyledRadioContainer)]: {
-    borderColor: "$border-primary-hover",
     ["& ".concat(StyledPill)]: {
       backgroundColor: "$background-primary-prominent-hover"
     }
@@ -661,6 +728,23 @@ const StyledRadioItem = designSystemStitches.styled(RadixDropdownMenu__namespace
     ['\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"
+        }
+      }
+    }
   }
 });
 
@@ -668,13 +752,23 @@ const RadioItem = React__default["default"].forwardRef(({ disabled, children, cl
   const elementProps = useAriaDisabled(restProps, {
     closeOnSelect
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledRadioItem, { ...elementProps, disabled, ref: forwardRef, children: [
-    children,
-    /* @__PURE__ */ jsxRuntime.jsx(RightSlot, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledRadioContainer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(StyledPill, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(StyledProhibited, { weight: "thin" })
-    ] }) })
-  ] }) });
+  const [v1] = designSystemExperiments.useNewDesignLanguage();
+  return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledRadioItem,
+    {
+      ...elementProps,
+      disabled,
+      v1,
+      ref: forwardRef,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(RightSlot, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledRadioContainer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StyledPill, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(StyledProhibited, { weight: "thin" })
+        ] }) })
+      ]
+    }
+  ) });
 });
 
 const StyledSeparator = designSystemStitches.styled(RadixDropdownMenu__namespace.Separator, {
@@ -693,7 +787,10 @@ const StyledSwitchItem = designSystemStitches.styled(RadixDropdownMenu__namespac
   ["&[aria-checked=true] ".concat(StyledSwitch)]: designSystemBaseSwitch.styles.checked,
   ['&[aria-checked=true]:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled]) '.concat(StyledSwitch)]: designSystemBaseSwitch.styles.checkedHovered,
   ['&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled]) '.concat(StyledSwitch)]: designSystemBaseSwitch.styles.hovered,
-  ['\n    &[aria-disabled="true"] '.concat(StyledSwitch, ",\n    &[data-disabled] ").concat(StyledSwitch, "\n  ")]: designSystemBaseSwitch.styles.disabled
+  ['\n    &[aria-disabled="true"] '.concat(StyledSwitch, ",\n    &[data-disabled] ").concat(StyledSwitch, "\n  ")]: designSystemBaseSwitch.styles.disabled,
+  variants: {
+    ...itemVariantsDefaults
+  }
 });
 
 const SwitchItem = React__default["default"].forwardRef(
@@ -706,10 +803,12 @@ const SwitchItem = React__default["default"].forwardRef(
     ...restProps
   }, forwardRef) => {
     const elementProps = useAriaDisabled(restProps, { closeOnSelect });
+    const [v1] = designSystemExperiments.useNewDesignLanguage();
     return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       StyledSwitchItem,
       {
         ...elementProps,
+        v1,
         disabled,
         checked,
         onCheckedChange: onChange,
@@ -786,25 +885,53 @@ const StyledIconContainer = designSystemStitches.styled(designSystemPrimitive.Pr
 });
 const StyledSubTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.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__default["default"].forwardRef(({ children, disabled = false, ...restProps }, forwardRef) => {
   let { onSelect, ...elementProps } = restProps;
   elementProps = useAriaDisabled(elementProps);
-  return /* @__PURE__ */ jsxRuntime.jsxs(StyledSubTrigger, { ...elementProps, disabled, ref: forwardRef, children: [
-    children,
-    /* @__PURE__ */ jsxRuntime.jsx(RightSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      StyledIconContainer,
-      {
-        "data-testid": process.env.NODE_ENV === "test" ? "submenu-arrow-icon" : void 0,
-        children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, { size: "small", weight: "thin" })
-      }
-    ) })
-  ] });
+  const [v1] = designSystemExperiments.useNewDesignLanguage();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledSubTrigger,
+    {
+      ...elementProps,
+      v1,
+      disabled,
+      ref: forwardRef,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(RightSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          StyledIconContainer,
+          {
+            "data-testid": process.env.NODE_ENV === "test" ? "submenu-arrow-icon" : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, { size: "small", weight: "thin" })
+          }
+        ) })
+      ]
+    }
+  );
 });
 
 const StyledSubContent = designSystemStitches.styled(
@@ -832,6 +959,7 @@ const SubContent = React__default["default"].forwardRef(
     const contentSideOffset = CONTENT_OFFSET + parseInt(designSystemStitches.theme.space[paddingToken.x]);
     const contentAlignOffset = -parseInt(designSystemStitches.theme.space[paddingToken.y]);
     const availableHeight = collisionBoundary != null ? getComputedStyle(collisionBoundary).getPropertyValue("height") : RADIX_CONTENT_AVAILABLE_HEIGHT;
+    const [v1] = designSystemExperiments.useNewDesignLanguage();
     return /* @__PURE__ */ jsxRuntime.jsx(ContentProvider, { containerSpacing, children: /* @__PURE__ */ jsxRuntime.jsx(
       StyledSubContent,
       {
@@ -844,6 +972,7 @@ const SubContent = React__default["default"].forwardRef(
         hideWhenDetached,
         sticky,
         collisionBoundary,
+        v1,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ScrollableContent,
           {