@mirohq/design-system-dropdown-menu 4.5.0-new-focus-keyboard.0 → 5.0.0-v1.0

package/dist/main.js

@@ -43,7 +43,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,8 +82,16 @@ const ItemDescription = designSystemStitches.styled(designSystemPrimitive.Primit
   gridArea: "item-description",
   fontSize: "$150",
   lineHeight: 1.5,
-  color: "$text-neutrals-subtle"
+  color: "$text-neutrals-subtle",
+  '&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled])': {
+    background: "$background-neutrals-hover",
+    color: "$text-neutrals-hover",
+    '&:not([aria-disabled="true"])': {
+      boxShadow: "none"
+    }
+  }
 });
+const ItemDescription = React__default["default"].forwardRef(({ ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledItemDescription, { ...props, ref: forwardRef }) }));
 
 const LeftSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "flex",
@@ -67,13 +105,6 @@ const StyledIllustrationSlot = designSystemStitches.styled(LeftSlot, {
   width: "$13"
 });
 
-const hoverStyles = {
-  background: "$background-primary-subtle-hover",
-  color: "$text-primary-hover",
-  '&:not([aria-disabled="true"])': {
-    boxShadow: "none"
-  }
-};
 const itemDefaults = {
   all: "unset",
   boxSizing: "border-box",
@@ -95,12 +126,12 @@ const itemDefaults = {
     gridTemplateAreas: "'item-text right-slot'\n    'item-description right-slot'"
   },
   ...designSystemStyles.focus.css({
-    boxShadow: "$focus-keyboard",
+    boxShadow: "$focus",
     outline: "1px solid transparent"
   }),
   '&: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 +141,13 @@ const itemDefaults = {
   "&:disabled, &[data-disabled]": {
     pointerEvents: "none"
   },
-  '&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled])': hoverStyles,
+  '&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled])': {
+    background: "$background-neutrals-hover",
+    color: "$text-neutrals-hover",
+    '&:not([aria-disabled="true"])': {
+      boxShadow: "none"
+    }
+  },
   '&:active:not([aria-disabled="true"])': {
     background: "$background-primary-subtle-active",
     boxShadow: "none",
@@ -183,7 +220,7 @@ const StyledCheckboxItem = designSystemStitches.styled(RadixDropdownMenu__namesp
   }
 });
 
-const Context$1 = React.createContext({
+const Context = React.createContext({
   rightSlotMount: () => 0,
   rightSlotDestroy: () => {
   },
@@ -230,7 +267,7 @@ const ContentProvider = ({
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Context$1.Provider,
+    Context.Provider,
     {
       value: {
         rightSlotMount,
@@ -241,7 +278,7 @@ const ContentProvider = ({
     }
   );
 };
-const useContent = () => React.useContext(Context$1);
+const useContent = () => React.useContext(Context);
 
 const StyledRightSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "flex",
@@ -313,38 +350,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,
@@ -396,9 +401,6 @@ const CONTENT_PADDING = {
 };
 const contentDefaults = {
   maxWidth: "$125",
-  backgroundColor: "$background-neutrals-container",
-  borderRadius: "$50",
-  boxShadow: "$50",
   "@media (prefers-reduced-motion: no-preference)": {
     animationDuration: "150ms",
     animationTimingFunction: "cubic-bezier(0.25, 0.5, 0.5, 0.9)",
@@ -428,8 +430,12 @@ 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
+  borderRadius: "$100",
+  backgroundColor: "$background-neutrals-layout",
+  border: ".5px solid $border-neutrals-subtle",
+  boxShadow: "$elevation-200"
 };
 
 const StyledItemsContainer = designSystemStitches.styled("div", {
@@ -647,7 +653,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"
     }
@@ -663,6 +668,10 @@ const StyledRadioItem = designSystemStitches.styled(RadixDropdownMenu__namespace
     ['\n      &[aria-disabled="true"] '.concat(StyledProhibited, ",\n      &[data-disabled] ").concat(StyledProhibited, "\n    ")]: {
       display: "flex"
     }
+  },
+  ["".concat(StyledRadioContainer)]: {
+    borderWidth: "2px",
+    borderColor: "$border-neutrals-controls"
   }
 });
 
@@ -733,7 +742,7 @@ const StyledTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.T
         boxSizing: "border-box",
         cursor: "pointer",
         ...designSystemStyles.focus.css({
-          boxShadow: "$focus-keyboard",
+          boxShadow: "$focus",
           outline: "1px solid transparent"
         })
       },
@@ -788,9 +797,15 @@ const StyledIconContainer = designSystemStitches.styled(designSystemPrimitive.Pr
 });
 const StyledSubTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.SubTrigger, {
   ...itemDefaults,
-  '&[data-state="open"]': hoverStyles,
+  '&[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-primary-hover"
+    color: "$icon-neutrals-hover"
   }
 });
 
@@ -954,10 +969,7 @@ const Root = ({
     }
   );
 };
-const DropdownMenu = ({
-  direction = "ltr",
-  ...restProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(DropdownProvider, { direction, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseTooltip.BaseTooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Root, { direction, ...restProps }) }) });
+const DropdownMenu = ({ direction = "ltr", ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(DropdownProvider, { direction, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseTooltip.BaseTooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Root, { direction, ...restProps }) }) });
 DropdownMenu.CheckboxItem = CheckboxItem;
 DropdownMenu.Content = Content;
 DropdownMenu.Hotkey = Hotkey;