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

package/dist/main.js

@@ -44,31 +44,116 @@ const ItemDescription = designSystemStitches.styled(designSystemPrimitive.Primit
   overflow: "hidden",
   gridArea: "item-description",
   fontSize: "$150",
+  lineHeight: 1.5,
   color: "$text-neutrals-subtle"
 });
 
 const LeftSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "flex",
-  placeContent: "center",
+  alignItems: "center",
+  justifyContent: "center",
   marginRight: "$100",
   gridArea: "left-slot"
 });
+
 const StyledIllustrationSlot = designSystemStitches.styled(LeftSlot, {
   width: "$13"
 });
+
+const Context$1 = React.createContext({
+  rightSlotMount: () => 0,
+  rightSlotDestroy: () => {
+  },
+  containerSpacing: "medium"
+});
+const ContentProvider = ({
+  children,
+  containerSpacing = "medium"
+}) => {
+  const [maxWidth, setMaxWidth] = React.useState(0);
+  const maxRef = React.useRef(0);
+  const indexRef = React.useRef(0);
+  const widthMapRef = React.useRef(/* @__PURE__ */ new Map());
+  const updateMaxWith = React.useCallback((value) => {
+    maxRef.current = value;
+    setMaxWidth(value);
+  }, []);
+  const rightSlotMount = React.useCallback(
+    (width) => {
+      indexRef.current++;
+      widthMapRef.current.set(indexRef.current, width);
+      if (width > maxRef.current) {
+        updateMaxWith(width);
+      }
+      return indexRef.current;
+    },
+    [updateMaxWith]
+  );
+  const rightSlotDestroy = React.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 = designSystemUtils.addPropsToChildren(children, () => true, {
+    UNSAFE_style: {
+      "--right-slot-max-width": `${Math.ceil(maxWidth)}px`
+    }
+  });
+  return /* @__PURE__ */ React__default["default"].createElement(Context$1.Provider, {
+    value: {
+      rightSlotMount,
+      rightSlotDestroy,
+      containerSpacing
+    }
+  }, formattedChildren);
+};
+const useContent = () => React.useContext(Context$1);
+
 const StyledRightSlot = designSystemStitches.styled(designSystemPrimitive.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 = React.useRef(null);
+  React.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__default["default"].createElement(StyledRightSlot, {
+    ref,
+    ...props
+  });
+};
+
+const HotkeySlot = designSystemStitches.styled(RightSlot, {
+  color: "$text-neutrals-subtle"
+});
+
 const itemDefaults = {
   all: "unset",
   boxSizing: "border-box",
@@ -78,18 +163,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'`
   },
@@ -99,24 +182,30 @@ const itemDefaults = {
   "&:not(:first-child)": {
     marginTop: "$50"
   },
-  ...designSystemStyles.focus.defaults,
+  ...designSystemStyles.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"
@@ -127,14 +216,16 @@ const itemDefaults = {
 };
 
 const StyledIndicator = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
-  padding: "4px 6px"
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
 });
 const StyledCheckboxItem = designSystemStitches.styled(RadixDropdownMenu__namespace.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"
   },
   [`
@@ -145,61 +236,50 @@ const StyledCheckboxItem = designSystemStitches.styled(RadixDropdownMenu__namesp
   }
 });
 
-const Context$1 = React.createContext({
-  rightSlotMount: () => 0,
-  rightSlotDestroy: () => {
-  },
-  containerSpacing: "medium"
-});
-const ContentProvider = ({
-  children,
-  containerSpacing = "medium"
-}) => {
-  const [maxWidth, setMaxWidth] = React.useState(0);
-  const maxRef = React.useRef(0);
-  const indexRef = React.useRef(0);
-  const widthMapRef = React.useRef(/* @__PURE__ */ new Map());
-  const updateMaxWith = React.useCallback((value) => {
-    maxRef.current = value;
-    setMaxWidth(value);
-  }, []);
-  const rightSlotMount = React.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) => React.useMemo(
+  () => ({
+    "aria-disabled": designSystemUtils.booleanify(ariaDisabled) ? ariaDisabled : void 0,
+    onKeyDown: (e) => {
+      if (designSystemUtils.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 = React.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 (designSystemUtils.booleanify(ariaDisabled)) {
+        e.preventDefault();
+        return;
       }
+      onSelect == null ? void 0 : onSelect(e);
     },
-    [updateMaxWith]
-  );
-  const formattedChildren = designSystemUtils.addPropsToChildren(children, () => true, {
-    UNSAFE_style: {
-      "--right-slot-max-width": `${Math.ceil(maxWidth)}px`
-    }
-  });
-  return /* @__PURE__ */ React__default["default"].createElement(Context$1.Provider, {
-    value: {
-      rightSlotMount,
-      rightSlotDestroy,
-      containerSpacing
+    onPointerMove: (e) => {
+      if (designSystemUtils.booleanify(ariaDisabled)) {
+        e.preventDefault();
+        return;
+      }
+      onPointerMove == null ? void 0 : onPointerMove(e);
+    },
+    onClick: (e) => {
+      if (designSystemUtils.booleanify(ariaDisabled)) {
+        e.preventDefault();
+        return;
+      }
+      onClick == null ? void 0 : onClick(e);
     }
-  }, formattedChildren);
-};
-const useContent = () => React.useContext(Context$1);
+  }),
+  [ariaDisabled, onKeyDown, onSelect, onPointerMove, onClick, preventDefault]
+);
 
 const Context = React.createContext({
   leftSlotMount: () => {
@@ -229,62 +309,6 @@ const ItemProvider = ({
 };
 const useItem = () => React.useContext(Context);
 
-const RightSlot = (props) => {
-  const { rightSlotMount, rightSlotDestroy } = useContent();
-  const ref = React.useRef(null);
-  React.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__default["default"].createElement(StyledRightSlot, {
-    ref,
-    ...props
-  });
-};
-const HotkeySlot = designSystemStitches.styled(RightSlot, {
-  color: "$text-neutrals-subtle"
-});
-const IllustrationSlot = React__default["default"].forwardRef((props, forwardRef) => {
-  const { leftSlotMount, leftSlotDestroy } = useItem();
-  React.useEffect(() => {
-    leftSlotMount();
-    return () => leftSlotDestroy();
-  }, [leftSlotMount, leftSlotDestroy]);
-  return /* @__PURE__ */ React__default["default"].createElement(StyledIllustrationSlot, {
-    ref: forwardRef,
-    ...props
-  });
-});
-
-const useAriaDisabled = ({ "aria-disabled": ariaDisabled, onKeyDown, onSelect }, preventDefault = false) => React.useMemo(
-  () => ({
-    "aria-disabled": designSystemUtils.booleanify(ariaDisabled) ? ariaDisabled : void 0,
-    onKeyDown: (e) => {
-      if (designSystemUtils.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 (designSystemUtils.booleanify(ariaDisabled)) {
-        return;
-      }
-      onSelect == null ? void 0 : onSelect(e);
-    }
-  }),
-  [ariaDisabled, onKeyDown, onSelect, preventDefault]
-);
-
 const CheckboxItem = React__default["default"].forwardRef(({ children, checked, onChange, disabled, ...restProps }, forwardRef) => {
   const ariaDisabledProps = useAriaDisabled(restProps, true);
   const { "aria-disabled": ariaDisabled } = ariaDisabledProps;
@@ -296,6 +320,7 @@ const CheckboxItem = React__default["default"].forwardRef(({ children, checked,
     disabled,
     onCheckedChange: onChange
   }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledIndicator, null, (disabled === true || designSystemUtils.booleanify(ariaDisabled)) && !checked && /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconProhibit, {
+    weight: "thin",
     css: { square: "$3", display: "block" }
   }), checked && /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconCheckMark, {
     css: { square: "$3", display: "block" }
@@ -485,7 +510,7 @@ const RadioGroup = React__default["default"].forwardRef((props, forwardRef) => {
   });
 });
 
-const StyledRadioContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+const StyledRadioContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -493,10 +518,9 @@ const StyledRadioContainer = designSystemStitches.styled(designSystemPrimitive.P
   height: "$4",
   boxSizing: "border-box",
   border: "1px solid $border-neutrals",
-  borderRadius: "$half",
-  margin: "2px 4px"
+  borderRadius: "$half"
 });
-const StyledPill = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+const StyledPill = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "none",
   width: "$2",
   height: "$2",
@@ -516,7 +540,7 @@ const StyledRadioItem = designSystemStitches.styled(RadixDropdownMenu__namespace
       backgroundColor: "$background-primary-prominent-selected"
     }
   },
-  [`&:hover ${StyledRadioContainer}`]: {
+  [`&:hover:not([aria-disabled="true"]) ${StyledRadioContainer}`]: {
     borderColor: "$border-primary-hover",
     [`& ${StyledPill}`]: {
       backgroundColor: "$background-primary-prominent-hover"
@@ -549,7 +573,9 @@ const RadioItem = React__default["default"].forwardRef(({ disabled = false, chil
     ...ariaDisabledProps,
     disabled,
     ref: forwardRef
-  }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledRadioContainer, null, /* @__PURE__ */ React__default["default"].createElement(StyledPill, null), /* @__PURE__ */ React__default["default"].createElement(StyledProhibited, null)))));
+  }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledRadioContainer, null, /* @__PURE__ */ React__default["default"].createElement(StyledPill, null), /* @__PURE__ */ React__default["default"].createElement(StyledProhibited, {
+    weight: "thin"
+  })))));
 });
 
 const StyledSeparator = designSystemStitches.styled(RadixDropdownMenu__namespace.Separator, {
@@ -564,14 +590,13 @@ const Separator = React__default["default"].forwardRef((props, forwardRef) => /*
 const StyledSwitch = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
   ...designSystemBaseSwitch.styles.default,
   width: "$7",
-  height: "$4",
-  marginTop: "2px"
+  height: "$4"
 });
 const StyledSwitchItem = designSystemStitches.styled(RadixDropdownMenu__namespace.CheckboxItem, {
   ...itemDefaults,
   [`&[data-state="checked"] ${StyledSwitch}`]: designSystemBaseSwitch.styles.checked,
-  [`&[data-state="checked"]:hover ${StyledSwitch}`]: designSystemBaseSwitch.styles.checkedHovered,
-  [`&:hover ${StyledSwitch}`]: designSystemBaseSwitch.styles.hovered,
+  [`&[data-state="checked"]:hover:not([aria-disabled="true"]) ${StyledSwitch}`]: designSystemBaseSwitch.styles.checkedHovered,
+  [`&:hover:not([aria-disabled="true"]) ${StyledSwitch}`]: designSystemBaseSwitch.styles.hovered,
   [`
     &[aria-disabled="true"] ${StyledSwitch},
     &[data-disabled] ${StyledSwitch}
@@ -599,7 +624,10 @@ const StyledTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.T
         all: "unset",
         boxSizing: "border-box",
         cursor: "pointer",
-        ...designSystemStyles.focus.defaults
+        ...designSystemStyles.focus.css({
+          boxShadow: "$focus-small",
+          outline: "1px solid transparent"
+        })
       },
       false: {
         cursor: "pointer"
@@ -618,12 +646,13 @@ const Trigger = React__default["default"].forwardRef(({ asChild = false, onPress
 
 const StyledIconContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
   color: "$icon-neutrals-with-text",
-  marginRight: "-4px"
+  display: "flex",
+  alignItems: "center"
 });
 const StyledSubTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.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"
   }
 });
@@ -707,34 +736,47 @@ const Portal = (props) => /* @__PURE__ */ React__default["default"].createElemen
 });
 
 const StyledIconSlot = designSystemStitches.styled(LeftSlot, {
-  paddingTop: "2px",
-  variants: {
-    customIcon: {
-      true: {
-        square: "$icon-200"
-      }
-    }
+  square: "$5",
+  "& svg:not([data-icon-component]), & img:not([data-icon-component])": {
+    ...designSystemBaseIcon.styles.size.small,
+    ...designSystemBaseIcon.styles.weight.thin
   }
 });
 
 const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
   const { leftSlotMount, leftSlotDestroy } = useItem();
-  const child = React__default["default"].Children.only(children);
-  const isIcon = designSystemBaseIcon.isIconComponent(child);
-  const formattedChild = isIcon ? React__default["default"].cloneElement(child, {
-    ...child.props,
-    size: "small",
-    weight: "thin"
-  }) : child;
+  const formattedChildren = designSystemUtils.addPropsToChildren(
+    children,
+    designSystemBaseIcon.isIconComponent,
+    {
+      "data-icon-component": "",
+      size: "small",
+      weight: "thin"
+    }
+  );
   React.useEffect(() => {
     leftSlotMount();
     return () => leftSlotDestroy();
   }, [leftSlotMount, leftSlotDestroy]);
   return /* @__PURE__ */ React__default["default"].createElement(StyledIconSlot, {
     ref: forwardRef,
-    ...restProps,
-    customIcon: !isIcon
-  }, formattedChild);
+    ...restProps
+  }, /* @__PURE__ */ React__default["default"].createElement(designSystemPrimitive.Primitive.svg, {
+    asChild: true,
+    "aria-hidden": true
+  }, formattedChildren));
+});
+
+const IllustrationSlot = React__default["default"].forwardRef((props, forwardRef) => {
+  const { leftSlotMount, leftSlotDestroy } = useItem();
+  React.useEffect(() => {
+    leftSlotMount();
+    return () => leftSlotDestroy();
+  }, [leftSlotMount, leftSlotDestroy]);
+  return /* @__PURE__ */ React__default["default"].createElement(StyledIllustrationSlot, {
+    ref: forwardRef,
+    ...props
+  });
 });
 
 const DropdownMenu = ({