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

package/dist/module.js

@@ -1,5 +1,5 @@
 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';
@@ -17,7 +17,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,8 +56,16 @@ const ItemDescription = styled(Primitive.div, {
   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.forwardRef(({ ...props }, forwardRef) => /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(StyledItemDescription, { ...props, ref: forwardRef }) }));
 
 const LeftSlot = styled(Primitive.div, {
   display: "flex",
@@ -41,13 +79,6 @@ const StyledIllustrationSlot = 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",
@@ -69,12 +100,12 @@ const itemDefaults = {
     gridTemplateAreas: "'item-text right-slot'\n    'item-description right-slot'"
   },
   ...focus.css({
-    boxShadow: "$focus-keyboard",
+    boxShadow: "$focus",
     outline: "1px solid transparent"
   }),
   '&: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 +115,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",
@@ -157,7 +194,7 @@ const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
   }
 });
 
-const Context$1 = createContext({
+const Context = createContext({
   rightSlotMount: () => 0,
   rightSlotDestroy: () => {
   },
@@ -204,7 +241,7 @@ const ContentProvider = ({
     }
   });
   return /* @__PURE__ */ jsx(
-    Context$1.Provider,
+    Context.Provider,
     {
       value: {
         rightSlotMount,
@@ -215,7 +252,7 @@ const ContentProvider = ({
     }
   );
 };
-const useContent = () => useContext(Context$1);
+const useContent = () => useContext(Context);
 
 const StyledRightSlot = styled(Primitive.div, {
   display: "flex",
@@ -287,38 +324,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,
@@ -370,9 +375,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)",
@@ -402,8 +404,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 = styled("div", {
@@ -621,7 +627,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"
     }
@@ -637,6 +642,10 @@ const StyledRadioItem = styled(RadixDropdownMenu.RadioItem, {
     ['\n      &[aria-disabled="true"] '.concat(StyledProhibited, ",\n      &[data-disabled] ").concat(StyledProhibited, "\n    ")]: {
       display: "flex"
     }
+  },
+  ["".concat(StyledRadioContainer)]: {
+    borderWidth: "2px",
+    borderColor: "$border-neutrals-controls"
   }
 });
 
@@ -707,7 +716,7 @@ const StyledTrigger = styled(RadixDropdownMenu.Trigger, {
         boxSizing: "border-box",
         cursor: "pointer",
         ...focus.css({
-          boxShadow: "$focus-keyboard",
+          boxShadow: "$focus",
           outline: "1px solid transparent"
         })
       },
@@ -762,9 +771,15 @@ const StyledIconContainer = styled(Primitive.span, {
 });
 const StyledSubTrigger = styled(RadixDropdownMenu.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"
   }
 });
 
@@ -928,10 +943,7 @@ const Root = ({
     }
   );
 };
-const DropdownMenu = ({
-  direction = "ltr",
-  ...restProps
-}) => /* @__PURE__ */ jsx(DropdownProvider, { direction, children: /* @__PURE__ */ jsx(BaseTooltipProvider, { children: /* @__PURE__ */ jsx(Root, { direction, ...restProps }) }) });
+const DropdownMenu = ({ direction = "ltr", ...restProps }) => /* @__PURE__ */ jsx(DropdownProvider, { direction, children: /* @__PURE__ */ jsx(BaseTooltipProvider, { children: /* @__PURE__ */ jsx(Root, { direction, ...restProps }) }) });
 DropdownMenu.CheckboxItem = CheckboxItem;
 DropdownMenu.Content = Content;
 DropdownMenu.Hotkey = Hotkey;