@mirohq/design-system-dropdown-menu 3.3.0-dropdown.8 → 3.3.0

package/dist/module.js

@@ -8,7 +8,7 @@ import { styled, theme } from '@mirohq/design-system-stitches';
 import { focus, animations } from '@mirohq/design-system-styles';
 import { ScrollArea } from '@mirohq/design-system-scroll-area';
 import { styles, Thumb } from '@mirohq/design-system-base-switch';
-import { isIconComponent } from '@mirohq/design-system-base-icon';
+import { styles as styles$1, isIconComponent } from '@mirohq/design-system-base-icon';
 
 const ItemDescription = styled(Primitive.div, {
   display: "-webkit-box",
@@ -18,31 +18,116 @@ const ItemDescription = styled(Primitive.div, {
   overflow: "hidden",
   gridArea: "item-description",
   fontSize: "$150",
+  lineHeight: 1.5,
   color: "$text-neutrals-subtle"
 });
 
 const LeftSlot = styled(Primitive.div, {
   display: "flex",
-  placeContent: "center",
+  alignItems: "center",
+  justifyContent: "center",
   marginRight: "$100",
   gridArea: "left-slot"
 });
+
 const StyledIllustrationSlot = styled(LeftSlot, {
   width: "$13"
 });
+
+const Context$1 = createContext({
+  rightSlotMount: () => 0,
+  rightSlotDestroy: () => {
+  },
+  containerSpacing: "medium"
+});
+const ContentProvider = ({
+  children,
+  containerSpacing = "medium"
+}) => {
+  const [maxWidth, setMaxWidth] = useState(0);
+  const maxRef = useRef(0);
+  const indexRef = useRef(0);
+  const widthMapRef = useRef(/* @__PURE__ */ new Map());
+  const updateMaxWith = useCallback((value) => {
+    maxRef.current = value;
+    setMaxWidth(value);
+  }, []);
+  const rightSlotMount = useCallback(
+    (width) => {
+      indexRef.current++;
+      widthMapRef.current.set(indexRef.current, width);
+      if (width > maxRef.current) {
+        updateMaxWith(width);
+      }
+      return indexRef.current;
+    },
+    [updateMaxWith]
+  );
+  const rightSlotDestroy = useCallback(
+    (index) => {
+      widthMapRef.current.delete(index);
+      if (widthMapRef.current.size === 0) {
+        updateMaxWith(0);
+      } else {
+        const maximum = Math.max(...Array.from(widthMapRef.current.values()));
+        updateMaxWith(maximum);
+      }
+    },
+    [updateMaxWith]
+  );
+  const formattedChildren = addPropsToChildren(children, () => true, {
+    UNSAFE_style: {
+      "--right-slot-max-width": `${Math.ceil(maxWidth)}px`
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Context$1.Provider, {
+    value: {
+      rightSlotMount,
+      rightSlotDestroy,
+      containerSpacing
+    }
+  }, formattedChildren);
+};
+const useContent = () => useContext(Context$1);
+
 const StyledRightSlot = styled(Primitive.div, {
   display: "flex",
   alignItems: "center",
+  justifyContent: "center",
   marginLeft: "auto",
   paddingLeft: "$200",
   gridArea: "right-slot",
+  height: "$5",
+  width: "$7",
   minWidth: "max-content",
   textAlign: "right",
   "&:empty": {
-    paddingLeft: "$none"
+    paddingLeft: "$0"
   }
 });
 
+const RightSlot = (props) => {
+  const { rightSlotMount, rightSlotDestroy } = useContent();
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current !== null) {
+      const width = ref.current.getBoundingClientRect().width;
+      const index = rightSlotMount(width);
+      return () => rightSlotDestroy(index);
+    }
+    return () => {
+    };
+  }, [rightSlotMount, rightSlotDestroy, ref]);
+  return /* @__PURE__ */ React.createElement(StyledRightSlot, {
+    ref,
+    ...props
+  });
+};
+
+const HotkeySlot = styled(RightSlot, {
+  color: "$text-neutrals-subtle"
+});
+
 const itemDefaults = {
   all: "unset",
   boxSizing: "border-box",
@@ -52,18 +137,16 @@ const itemDefaults = {
   borderRadius: "$50",
   display: "grid",
   gridTemplateColumns: "auto 1fr minmax(auto, var(--right-slot-max-width))",
-  gridTemplateRows: "1fr auto",
+  gridTemplateRows: "auto 1fr",
   gridTemplateAreas: `'left-slot item-text right-slot'
     'left-slot item-description right-slot'`,
   alignItems: "start",
-  minHeight: "$10",
-  padding: "$100 $100",
+  padding: "10px $100",
   position: "relative",
   userSelect: "none",
   cursor: "pointer",
   "&[data-no-left-slot]": {
     gridTemplateColumns: "1fr minmax(auto, var(--right-slot-max-width))",
-    gridTemplateRows: "auto",
     gridTemplateAreas: `'item-text right-slot'
     'item-description right-slot'`
   },
@@ -73,24 +156,30 @@ const itemDefaults = {
   "&:not(:first-child)": {
     marginTop: "$50"
   },
-  ...focus.defaults,
+  ...focus.css({
+    boxShadow: "$focus-small",
+    outline: "1px solid transparent"
+  }),
   '&:disabled, &[aria-disabled="true"], &[data-disabled]': {
-    pointerEvents: "none",
-    [`&, & ${ItemDescription}`]: {
+    cursor: "default",
+    [`&, & ${ItemDescription}, & ${HotkeySlot}`]: {
       color: "$text-neutrals-disabled"
     },
     [`& ${StyledIllustrationSlot}`]: {
       filter: "grayscale(1)"
     }
   },
-  "&:hover": {
+  "&:disabled, &[data-disabled]": {
+    pointerEvents: "none"
+  },
+  '&:hover:not([aria-disabled="true"])': {
     background: "$background-primary-subtle-hover",
     color: "$text-primary-hover",
     '&:not([aria-disabled="true"])': {
       boxShadow: "none"
     }
   },
-  "&:active": {
+  '&:active:not([aria-disabled="true"])': {
     background: "$background-primary-subtle-active",
     boxShadow: "none",
     color: "$text-primary-active"
@@ -101,14 +190,16 @@ const itemDefaults = {
 };
 
 const StyledIndicator = styled(Primitive.span, {
-  padding: "4px 6px"
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
 });
 const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
   ...itemDefaults,
   [`&[data-state="checked"] ${StyledIndicator}`]: {
     color: "$icon-primary"
   },
-  [`&[data-state="checked"]:hover ${StyledIndicator}`]: {
+  [`&[data-state="checked"]:hover:not([aria-disabled="true"]) ${StyledIndicator}`]: {
     color: "$icon-primary-hover"
   },
   [`
@@ -119,61 +210,50 @@ const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
   }
 });
 
-const Context$1 = createContext({
-  rightSlotMount: () => 0,
-  rightSlotDestroy: () => {
-  },
-  containerSpacing: "medium"
-});
-const ContentProvider = ({
-  children,
-  containerSpacing = "medium"
-}) => {
-  const [maxWidth, setMaxWidth] = useState(0);
-  const maxRef = useRef(0);
-  const indexRef = useRef(0);
-  const widthMapRef = useRef(/* @__PURE__ */ new Map());
-  const updateMaxWith = useCallback((value) => {
-    maxRef.current = value;
-    setMaxWidth(value);
-  }, []);
-  const rightSlotMount = useCallback(
-    (width) => {
-      indexRef.current++;
-      widthMapRef.current.set(indexRef.current, width);
-      if (width > maxRef.current) {
-        updateMaxWith(width);
+const useAriaDisabled = ({
+  "aria-disabled": ariaDisabled,
+  onKeyDown,
+  onSelect,
+  onPointerMove,
+  onClick
+}, preventDefault = false) => useMemo(
+  () => ({
+    "aria-disabled": booleanify(ariaDisabled) ? ariaDisabled : void 0,
+    onKeyDown: (e) => {
+      if (booleanify(ariaDisabled) && e.code !== "ArrowUp" && e.code !== "ArrowDown") {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
       }
-      return indexRef.current;
+      onKeyDown == null ? void 0 : onKeyDown(e);
     },
-    [updateMaxWith]
-  );
-  const rightSlotDestroy = useCallback(
-    (index) => {
-      widthMapRef.current.delete(index);
-      if (widthMapRef.current.size === 0) {
-        updateMaxWith(0);
-      } else {
-        const maximum = Math.max(...Array.from(widthMapRef.current.values()));
-        updateMaxWith(maximum);
+    onSelect: (e) => {
+      if (preventDefault) {
+        e.preventDefault();
+      }
+      if (booleanify(ariaDisabled)) {
+        e.preventDefault();
+        return;
       }
+      onSelect == null ? void 0 : onSelect(e);
     },
-    [updateMaxWith]
-  );
-  const formattedChildren = addPropsToChildren(children, () => true, {
-    UNSAFE_style: {
-      "--right-slot-max-width": `${Math.ceil(maxWidth)}px`
-    }
-  });
-  return /* @__PURE__ */ React.createElement(Context$1.Provider, {
-    value: {
-      rightSlotMount,
-      rightSlotDestroy,
-      containerSpacing
+    onPointerMove: (e) => {
+      if (booleanify(ariaDisabled)) {
+        e.preventDefault();
+        return;
+      }
+      onPointerMove == null ? void 0 : onPointerMove(e);
+    },
+    onClick: (e) => {
+      if (booleanify(ariaDisabled)) {
+        e.preventDefault();
+        return;
+      }
+      onClick == null ? void 0 : onClick(e);
     }
-  }, formattedChildren);
-};
-const useContent = () => useContext(Context$1);
+  }),
+  [ariaDisabled, onKeyDown, onSelect, onPointerMove, onClick, preventDefault]
+);
 
 const Context = createContext({
   leftSlotMount: () => {
@@ -203,62 +283,6 @@ const ItemProvider = ({
 };
 const useItem = () => useContext(Context);
 
-const RightSlot = (props) => {
-  const { rightSlotMount, rightSlotDestroy } = useContent();
-  const ref = useRef(null);
-  useEffect(() => {
-    if (ref.current !== null) {
-      const width = ref.current.getBoundingClientRect().width;
-      const index = rightSlotMount(width);
-      return () => rightSlotDestroy(index);
-    }
-    return () => {
-    };
-  }, [rightSlotMount, rightSlotDestroy, ref]);
-  return /* @__PURE__ */ React.createElement(StyledRightSlot, {
-    ref,
-    ...props
-  });
-};
-const HotkeySlot = styled(RightSlot, {
-  color: "$text-neutrals-subtle"
-});
-const IllustrationSlot = React.forwardRef((props, forwardRef) => {
-  const { leftSlotMount, leftSlotDestroy } = useItem();
-  useEffect(() => {
-    leftSlotMount();
-    return () => leftSlotDestroy();
-  }, [leftSlotMount, leftSlotDestroy]);
-  return /* @__PURE__ */ React.createElement(StyledIllustrationSlot, {
-    ref: forwardRef,
-    ...props
-  });
-});
-
-const useAriaDisabled = ({ "aria-disabled": ariaDisabled, onKeyDown, onSelect }, preventDefault = false) => useMemo(
-  () => ({
-    "aria-disabled": booleanify(ariaDisabled) ? ariaDisabled : void 0,
-    onKeyDown: (e) => {
-      if (booleanify(ariaDisabled) && e.code !== "ArrowUp" && e.code !== "ArrowDown") {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-      onKeyDown == null ? void 0 : onKeyDown(e);
-    },
-    onSelect: (e) => {
-      if (preventDefault) {
-        e.preventDefault();
-      }
-      if (booleanify(ariaDisabled)) {
-        return;
-      }
-      onSelect == null ? void 0 : onSelect(e);
-    }
-  }),
-  [ariaDisabled, onKeyDown, onSelect, preventDefault]
-);
-
 const CheckboxItem = React.forwardRef(({ children, checked, onChange, disabled, ...restProps }, forwardRef) => {
   const ariaDisabledProps = useAriaDisabled(restProps, true);
   const { "aria-disabled": ariaDisabled } = ariaDisabledProps;
@@ -270,6 +294,7 @@ const CheckboxItem = React.forwardRef(({ children, checked, onChange, disabled,
     disabled,
     onCheckedChange: onChange
   }, children, /* @__PURE__ */ React.createElement(RightSlot, null, /* @__PURE__ */ React.createElement(StyledIndicator, null, (disabled === true || booleanify(ariaDisabled)) && !checked && /* @__PURE__ */ React.createElement(IconProhibit, {
+    weight: "thin",
     css: { square: "$3", display: "block" }
   }), checked && /* @__PURE__ */ React.createElement(IconCheckMark, {
     css: { square: "$3", display: "block" }
@@ -459,7 +484,7 @@ const RadioGroup = React.forwardRef((props, forwardRef) => {
   });
 });
 
-const StyledRadioContainer = styled(Primitive.span, {
+const StyledRadioContainer = styled(Primitive.div, {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -467,10 +492,9 @@ const StyledRadioContainer = styled(Primitive.span, {
   height: "$4",
   boxSizing: "border-box",
   border: "1px solid $border-neutrals",
-  borderRadius: "$half",
-  margin: "2px 4px"
+  borderRadius: "$half"
 });
-const StyledPill = styled(Primitive.span, {
+const StyledPill = styled(Primitive.div, {
   display: "none",
   width: "$2",
   height: "$2",
@@ -490,7 +514,7 @@ const StyledRadioItem = styled(RadixDropdownMenu.RadioItem, {
       backgroundColor: "$background-primary-prominent-selected"
     }
   },
-  [`&:hover ${StyledRadioContainer}`]: {
+  [`&:hover:not([aria-disabled="true"]) ${StyledRadioContainer}`]: {
     borderColor: "$border-primary-hover",
     [`& ${StyledPill}`]: {
       backgroundColor: "$background-primary-prominent-hover"
@@ -523,7 +547,9 @@ const RadioItem = React.forwardRef(({ disabled = false, children, ...restProps }
     ...ariaDisabledProps,
     disabled,
     ref: forwardRef
-  }, children, /* @__PURE__ */ React.createElement(RightSlot, null, /* @__PURE__ */ React.createElement(StyledRadioContainer, null, /* @__PURE__ */ React.createElement(StyledPill, null), /* @__PURE__ */ React.createElement(StyledProhibited, null)))));
+  }, children, /* @__PURE__ */ React.createElement(RightSlot, null, /* @__PURE__ */ React.createElement(StyledRadioContainer, null, /* @__PURE__ */ React.createElement(StyledPill, null), /* @__PURE__ */ React.createElement(StyledProhibited, {
+    weight: "thin"
+  })))));
 });
 
 const StyledSeparator = styled(RadixDropdownMenu.Separator, {
@@ -538,14 +564,13 @@ const Separator = React.forwardRef((props, forwardRef) => /* @__PURE__ */ React.
 const StyledSwitch = styled(Primitive.span, {
   ...styles.default,
   width: "$7",
-  height: "$4",
-  marginTop: "2px"
+  height: "$4"
 });
 const StyledSwitchItem = styled(RadixDropdownMenu.CheckboxItem, {
   ...itemDefaults,
   [`&[data-state="checked"] ${StyledSwitch}`]: styles.checked,
-  [`&[data-state="checked"]:hover ${StyledSwitch}`]: styles.checkedHovered,
-  [`&:hover ${StyledSwitch}`]: styles.hovered,
+  [`&[data-state="checked"]:hover:not([aria-disabled="true"]) ${StyledSwitch}`]: styles.checkedHovered,
+  [`&:hover:not([aria-disabled="true"]) ${StyledSwitch}`]: styles.hovered,
   [`
     &[aria-disabled="true"] ${StyledSwitch},
     &[data-disabled] ${StyledSwitch}
@@ -573,7 +598,10 @@ const StyledTrigger = styled(RadixDropdownMenu.Trigger, {
         all: "unset",
         boxSizing: "border-box",
         cursor: "pointer",
-        ...focus.defaults
+        ...focus.css({
+          boxShadow: "$focus-small",
+          outline: "1px solid transparent"
+        })
       },
       false: {
         cursor: "pointer"
@@ -592,12 +620,13 @@ const Trigger = React.forwardRef(({ asChild = false, onPress, onClick, ...restPr
 
 const StyledIconContainer = styled(Primitive.span, {
   color: "$icon-neutrals-with-text",
-  marginRight: "-4px"
+  display: "flex",
+  alignItems: "center"
 });
 const StyledSubTrigger = styled(RadixDropdownMenu.SubTrigger, {
   ...itemDefaults,
-  '&[data-state="open"]': itemDefaults["&:hover"],
-  [`&[data-state="open"] ${StyledIconContainer}, &:hover ${StyledIconContainer}`]: {
+  '&[data-state="open"]': itemDefaults['&:hover:not([aria-disabled="true"])'],
+  [`&[data-state="open"] ${StyledIconContainer}, &:hover:not([aria-disabled="true"]) ${StyledIconContainer}`]: {
     color: "$icon-primary-hover"
   }
 });
@@ -681,34 +710,47 @@ const Portal = (props) => /* @__PURE__ */ React.createElement(Portal$1, {
 });
 
 const StyledIconSlot = styled(LeftSlot, {
-  paddingTop: "2px",
-  variants: {
-    customIcon: {
-      true: {
-        square: "$icon-200"
-      }
-    }
+  square: "$5",
+  "& svg:not([data-icon-component]), & img:not([data-icon-component])": {
+    ...styles$1.size.small,
+    ...styles$1.weight.thin
   }
 });
 
 const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
   const { leftSlotMount, leftSlotDestroy } = useItem();
-  const child = React.Children.only(children);
-  const isIcon = isIconComponent(child);
-  const formattedChild = isIcon ? React.cloneElement(child, {
-    ...child.props,
-    size: "small",
-    weight: "thin"
-  }) : child;
+  const formattedChildren = addPropsToChildren(
+    children,
+    isIconComponent,
+    {
+      "data-icon-component": "",
+      size: "small",
+      weight: "thin"
+    }
+  );
   useEffect(() => {
     leftSlotMount();
     return () => leftSlotDestroy();
   }, [leftSlotMount, leftSlotDestroy]);
   return /* @__PURE__ */ React.createElement(StyledIconSlot, {
     ref: forwardRef,
-    ...restProps,
-    customIcon: !isIcon
-  }, formattedChild);
+    ...restProps
+  }, /* @__PURE__ */ React.createElement(Primitive.svg, {
+    asChild: true,
+    "aria-hidden": true
+  }, formattedChildren));
+});
+
+const IllustrationSlot = React.forwardRef((props, forwardRef) => {
+  const { leftSlotMount, leftSlotDestroy } = useItem();
+  useEffect(() => {
+    leftSlotMount();
+    return () => leftSlotDestroy();
+  }, [leftSlotMount, leftSlotDestroy]);
+  return /* @__PURE__ */ React.createElement(StyledIllustrationSlot, {
+    ref: forwardRef,
+    ...props
+  });
 });
 
 const DropdownMenu = ({