@mirohq/design-system-dropdown-menu 3.3.0-dropdown.2 → 3.3.0-dropdown.4

package/dist/main.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var RadixDropdownMenu = require('@radix-ui/react-dropdown-menu');
 var designSystemIcons = require('@mirohq/design-system-icons');
+var designSystemUtils = require('@mirohq/design-system-utils');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemStyles = require('@mirohq/design-system-styles');
@@ -44,6 +45,24 @@ const ItemDescription = designSystemStitches.styled(designSystemPrimitive.Primit
   color: "$text-neutrals-subtle"
 });
 
+const LeftSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  placeContent: "center",
+  marginRight: "$100",
+  gridArea: "left-slot"
+});
+const IllustrationSlot = designSystemStitches.styled(LeftSlot, {
+  width: "$13"
+});
+const RightSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  marginLeft: "auto",
+  paddingLeft: "$200",
+  gridArea: "right-slot"
+});
+const HotkeySlot = RightSlot;
+
 const itemDefaults = {
   all: "unset",
   boxSizing: "border-box",
@@ -64,18 +83,28 @@ const itemDefaults = {
   position: "relative",
   userSelect: "none",
   cursor: "pointer",
-  "&[data-disabled]": {
-    color: "rgba(9, 9, 9, 0.4)",
-    pointerEvents: "none"
-  },
   ...designSystemStyles.focus.defaults,
-  "&:hover": {
-    background: "rgba(232, 236, 255, 1)",
-    boxShadow: "none",
+  '&:disabled, &[aria-disabled="true"], &[data-disabled]': {
+    pointerEvents: "none",
     [`&, & ${ItemDescription}`]: {
-      color: "$text-primary-hover"
+      color: "$text-neutrals-disabled"
+    },
+    [`& ${IllustrationSlot}`]: {
+      filter: "grayscale(1)"
+    }
+  },
+  "&:hover": {
+    background: "$background-primary-subtle-hover",
+    color: "$text-primary-hover",
+    '&:not([aria-disabled="true"])': {
+      boxShadow: "none"
     }
   },
+  "&:active": {
+    background: "$background-primary-subtle-active",
+    boxShadow: "none",
+    color: "$text-primary-active"
+  },
   '&[tabindex="0"]': {
     zIndex: "1"
   }
@@ -90,48 +119,54 @@ const StyledCheckboxItem = designSystemStitches.styled(RadixDropdownMenu__namesp
   [`&[data-state="checked"]:hover ${StyledIndicator}`]: {
     color: "$icon-primary-hover"
   },
-  [`&[data-disabled] ${StyledIndicator}`]: {
+  [`
+    &[aria-disabled="true"] ${StyledIndicator},
+    &[data-disabled] ${StyledIndicator}
+  `]: {
     color: "$icon-neutrals-disabled"
   }
 });
 
-const LeftSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  display: "flex",
-  placeContent: "center",
-  marginRight: "$100",
-  gridArea: "left-slot"
-});
-const IconSlot = designSystemStitches.styled(LeftSlot, {
-  width: "$6"
-});
-const IllustrationSlot = designSystemStitches.styled(LeftSlot, {
-  width: "$13"
-});
-const RightSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  display: "flex",
-  alignItems: "center",
-  marginLeft: "auto",
-  paddingLeft: "$200",
-  gridArea: "right-slot"
-});
+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, onSelect, disabled, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledCheckboxItem, {
+const CheckboxItem = React__default["default"].forwardRef(({ children, checked, onChange, disabled, ...restProps }, forwardRef) => {
+  const ariaDisabledProps = useAriaDisabled(restProps, true);
+  const { "aria-disabled": ariaDisabled } = ariaDisabledProps;
+  return /* @__PURE__ */ React__default["default"].createElement(StyledCheckboxItem, {
     ...restProps,
+    ...ariaDisabledProps,
     ref: forwardRef,
     checked,
     disabled,
-    onCheckedChange: onChange,
-    onSelect: (event) => {
-      event.preventDefault();
-      onSelect == null ? void 0 : onSelect(event);
-    }
-  }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledIndicator, null, disabled === true && !checked && /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconProhibit, {
+    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, {
     size: "small"
   }), checked && /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconCheckMark, {
     size: "small"
-  }))))
-);
+  }))));
+});
 
 const GUTTER_TOKEN = 150;
 const CONTENT_GUTTER = parseInt(designSystemStitches.theme.space[GUTTER_TOKEN]);
@@ -212,20 +247,28 @@ const Content = React__default["default"].forwardRef(
 const StyledItem = designSystemStitches.styled(RadixDropdownMenu__namespace.Item, itemDefaults);
 
 const Item = React__default["default"].forwardRef(
-  ({ disabled = false, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledItem, {
-    ...restProps,
-    ref: forwardRef,
-    disabled
-  })
+  ({ disabled = false, ...restProps }, forwardRef) => {
+    const ariaDisabledProps = useAriaDisabled(restProps);
+    return /* @__PURE__ */ React__default["default"].createElement(StyledItem, {
+      ...restProps,
+      ...ariaDisabledProps,
+      disabled,
+      ref: forwardRef
+    });
+  }
 );
 
-const LinkItem = React__default["default"].forwardRef(({ children, href, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(Item, {
-  asChild: true,
-  ref: forwardRef,
-  ...restProps
-}, /* @__PURE__ */ React__default["default"].createElement("a", {
-  href
-}, children)));
+const LinkItem = React__default["default"].forwardRef(({ children, href, ...restProps }, forwardRef) => {
+  const ariaDisabledProps = useAriaDisabled(restProps);
+  return /* @__PURE__ */ React__default["default"].createElement(Item, {
+    asChild: true,
+    ref: forwardRef,
+    ...restProps,
+    ...ariaDisabledProps
+  }, /* @__PURE__ */ React__default["default"].createElement("a", {
+    href
+  }, children));
+});
 
 const StyledRadioGroup = designSystemStitches.styled(RadixDropdownMenu__namespace.RadioGroup);
 
@@ -274,30 +317,38 @@ const StyledRadioItem = designSystemStitches.styled(RadixDropdownMenu__namespace
       backgroundColor: "$background-primary-prominent-hover"
     }
   },
-  [`&[data-disabled] ${StyledRadioContainer}`]: {
+  [`
+    &[aria-disabled="true"] ${StyledRadioContainer},
+    &[data-disabled] ${StyledRadioContainer}
+  `]: {
     color: "$icon-neutrals-disabled",
     borderColor: "$border-neutrals-disabled",
     [`& ${StyledPill}`]: {
       backgroundColor: "$icon-neutrals-disabled"
     }
   },
-  [`&[data-state="unchecked"][data-disabled] ${StyledProhibited}`]: {
-    display: "block"
+  '&[data-state="unchecked"]': {
+    [`
+      &[aria-disabled="true"] ${StyledProhibited},
+      &[data-disabled] ${StyledProhibited}
+    `]: {
+      display: "flex"
+    }
   }
 });
 
-const RadioItem = React__default["default"].forwardRef(({ disabled = false, onSelect, children, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledRadioItem, {
-  ...restProps,
-  ref: forwardRef,
-  disabled,
-  onSelect: (event) => {
-    event.preventDefault();
-    onSelect == null ? void 0 : onSelect(event);
-  }
-}, 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)))));
+const RadioItem = React__default["default"].forwardRef(({ disabled = false, children, ...restProps }, forwardRef) => {
+  const ariaDisabledProps = useAriaDisabled(restProps, true);
+  return /* @__PURE__ */ React__default["default"].createElement(StyledRadioItem, {
+    ...restProps,
+    ...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))));
+});
 
 const StyledSeparator = designSystemStitches.styled(RadixDropdownMenu__namespace.Separator, {
-  borderTop: "1px solid rgba(235, 235, 239, 1)",
+  borderTop: "1px solid $border-neutrals-subtle",
   marginY: "$100"
 });
 
@@ -316,21 +367,24 @@ const StyledSwitchItem = designSystemStitches.styled(RadixDropdownMenu__namespac
   [`&[data-state="checked"] ${StyledSwitch}`]: designSystemBaseSwitch.styles.checked,
   [`&[data-state="checked"]:hover ${StyledSwitch}`]: designSystemBaseSwitch.styles.checkedHovered,
   [`&:hover ${StyledSwitch}`]: designSystemBaseSwitch.styles.hovered,
-  [`&[data-disabled] ${StyledSwitch}`]: designSystemBaseSwitch.styles.disabled
+  [`
+    &[aria-disabled="true"] ${StyledSwitch},
+    &[data-disabled] ${StyledSwitch}
+  `]: designSystemBaseSwitch.styles.disabled
 });
 
 const SwitchItem = React__default["default"].forwardRef(
-  ({ disabled = false, checked, onChange, onSelect, children, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledSwitchItem, {
-    ...restProps,
-    ref: forwardRef,
-    disabled,
-    checked,
-    onCheckedChange: onChange,
-    onSelect: (event) => {
-      event.preventDefault();
-      onSelect == null ? void 0 : onSelect(event);
-    }
-  }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledSwitch, null, /* @__PURE__ */ React__default["default"].createElement(designSystemBaseSwitch.Thumb, null))))
+  ({ disabled = false, checked, onChange, children, ...restProps }, forwardRef) => {
+    const ariaDisabledProps = useAriaDisabled(restProps, true);
+    return /* @__PURE__ */ React__default["default"].createElement(StyledSwitchItem, {
+      ...restProps,
+      ...ariaDisabledProps,
+      disabled,
+      checked,
+      onCheckedChange: onChange,
+      ref: forwardRef
+    }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledSwitch, null, /* @__PURE__ */ React__default["default"].createElement(designSystemBaseSwitch.Thumb, null))));
+  }
 );
 
 const defaultStyles = {
@@ -358,26 +412,34 @@ const Trigger = React__default["default"].forwardRef(({ asChild = false, onPress
   asChild
 }));
 
+const StyledIconContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  color: "$icon-neutrals-with-text"
+});
 const StyledSubTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.SubTrigger, {
   ...itemDefaults,
-  '&[data-state="open"]': itemDefaults["&:hover"]
+  '&[data-state="open"]': itemDefaults["&:hover"],
+  [`&[data-state="open"] ${StyledIconContainer}, &:hover ${StyledIconContainer}`]: {
+    color: "$icon-primary-hover"
+  }
 });
 
-const ArrowIcon = () => /* @__PURE__ */ React__default["default"].createElement("svg", {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  fill: "currentColor",
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-testid": "submenu-arrow-icon"
-}, /* @__PURE__ */ React__default["default"].createElement("path", {
-  d: "M5.29289 3.29289C5.68342 2.90237 6.31658 2.90237 6.70711 3.29289L11.4142 8L6.70711 12.7071C6.31658 13.0976 5.68342 13.0976 5.29289 12.7071C4.90237 12.3166 4.90237 11.6834 5.29289 11.2929L8.58579 8L5.29289 4.70711C4.90237 4.31658 4.90237 3.68342 5.29289 3.29289Z"
-}));
-const SubTrigger = React__default["default"].forwardRef(({ children, disabled = false, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledSubTrigger, {
-  ...restProps,
-  ref: forwardRef,
-  disabled
-}, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(ArrowIcon, null))));
+const SubTrigger = React__default["default"].forwardRef(({ children, disabled = false, ...restProps }, forwardRef) => {
+  const { onSelect, ...ariaDisabledProps } = useAriaDisabled({
+    onKeyDown: restProps.onKeyDown,
+    "aria-disabled": restProps["aria-disabled"]
+  });
+  return /* @__PURE__ */ React__default["default"].createElement(StyledSubTrigger, {
+    ...restProps,
+    ...ariaDisabledProps,
+    disabled,
+    ref: forwardRef
+  }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledIconContainer, {
+    "data-testid": process.env.NODE_ENV === "test" ? "submenu-arrow-icon" : void 0
+  }, /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconChevronRight, {
+    size: "small",
+    weight: "thin"
+  }))));
+});
 
 const StyledSubContent = designSystemStitches.styled(
   RadixDropdownMenu__namespace.SubContent,
@@ -429,6 +491,32 @@ const Portal = (props) => /* @__PURE__ */ React__default["default"].createElemen
   ...props
 });
 
+const StyledIconSlot = designSystemStitches.styled(LeftSlot, {
+  square: "$5",
+  variants: {
+    customIcon: {
+      true: {
+        square: "$icon-200"
+      }
+    }
+  }
+});
+
+const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
+  const child = React__default["default"].Children.only(children);
+  const isIcon = designSystemIcons.isIconComponent(child);
+  const formattedChild = isIcon ? React__default["default"].cloneElement(child, {
+    ...child.props,
+    size: "small",
+    weight: "thin"
+  }) : child;
+  return /* @__PURE__ */ React__default["default"].createElement(StyledIconSlot, {
+    ref: forwardRef,
+    ...restProps,
+    customIcon: !isIcon
+  }, formattedChild);
+});
+
 const DropdownMenu = ({
   defaultOpen = false,
   direction = "ltr",
@@ -454,6 +542,7 @@ const DropdownMenu = ({
 };
 DropdownMenu.CheckboxItem = CheckboxItem;
 DropdownMenu.Content = Content;
+DropdownMenu.HotkeySlot = HotkeySlot;
 DropdownMenu.IconSlot = IconSlot;
 DropdownMenu.IllustrationSlot = IllustrationSlot;
 DropdownMenu.Item = Item;