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

package/dist/module.js

@@ -18,12 +18,14 @@ 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"
 });
@@ -32,82 +34,6 @@ const StyledIllustrationSlot = styled(LeftSlot, {
   width: "$13"
 });
 
-const itemDefaults = {
-  all: "unset",
-  boxSizing: "border-box",
-  fontSize: 14,
-  lineHeight: "20px",
-  color: "$text-neutrals",
-  borderRadius: "$50",
-  display: "grid",
-  gridTemplateColumns: "auto 1fr minmax(auto, var(--right-slot-max-width))",
-  gridTemplateRows: "1fr auto",
-  gridTemplateAreas: `'left-slot item-text right-slot'
-    'left-slot item-description right-slot'`,
-  alignItems: "start",
-  minHeight: "$10",
-  padding: "$100 $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'`
-  },
-  "&:not(:last-child)": {
-    marginBottom: "$50"
-  },
-  "&:not(:first-child)": {
-    marginTop: "$50"
-  },
-  ...focus.defaults,
-  '&:disabled, &[aria-disabled="true"], &[data-disabled]': {
-    pointerEvents: "none",
-    [`&, & ${ItemDescription}`]: {
-      color: "$text-neutrals-disabled"
-    },
-    [`& ${StyledIllustrationSlot}`]: {
-      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"
-  }
-};
-
-const StyledIndicator = styled(Primitive.span, {
-  padding: "4px 6px"
-});
-const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
-  ...itemDefaults,
-  [`&[data-state="checked"] ${StyledIndicator}`]: {
-    color: "$icon-primary"
-  },
-  [`&[data-state="checked"]:hover ${StyledIndicator}`]: {
-    color: "$icon-primary-hover"
-  },
-  [`
-    &[aria-disabled="true"] ${StyledIndicator},
-    &[data-disabled] ${StyledIndicator}
-  `]: {
-    color: "$icon-neutrals-disabled"
-  }
-});
-
 const Context$1 = createContext({
   rightSlotMount: () => 0,
   rightSlotDestroy: () => {
@@ -167,13 +93,16 @@ 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"
   }
 });
 
@@ -195,7 +124,99 @@ const RightSlot = (props) => {
   });
 };
 
-const useAriaDisabled = ({ "aria-disabled": ariaDisabled, onKeyDown, onSelect }, preventDefault = false) => useMemo(
+const HotkeySlot = styled(RightSlot, {
+  color: "$text-neutrals-subtle"
+});
+
+const itemDefaults = {
+  all: "unset",
+  boxSizing: "border-box",
+  fontSize: 14,
+  lineHeight: "20px",
+  color: "$text-neutrals",
+  borderRadius: "$50",
+  display: "grid",
+  gridTemplateColumns: "auto 1fr minmax(auto, var(--right-slot-max-width))",
+  gridTemplateRows: "auto 1fr",
+  gridTemplateAreas: `'left-slot item-text right-slot'
+    'left-slot item-description right-slot'`,
+  alignItems: "start",
+  padding: "10px $100",
+  position: "relative",
+  userSelect: "none",
+  cursor: "pointer",
+  "&[data-no-left-slot]": {
+    gridTemplateColumns: "1fr minmax(auto, var(--right-slot-max-width))",
+    gridTemplateAreas: `'item-text right-slot'
+    'item-description right-slot'`
+  },
+  "&:not(:last-child)": {
+    marginBottom: "$50"
+  },
+  "&:not(:first-child)": {
+    marginTop: "$50"
+  },
+  ...focus.css({
+    boxShadow: "$focus-small",
+    outline: "1px solid transparent"
+  }),
+  '&:disabled, &[aria-disabled="true"], &[data-disabled]': {
+    cursor: "default",
+    [`&, & ${ItemDescription}, & ${HotkeySlot}`]: {
+      color: "$text-neutrals-disabled"
+    },
+    [`& ${StyledIllustrationSlot}`]: {
+      filter: "grayscale(1)"
+    }
+  },
+  "&: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:not([aria-disabled="true"])': {
+    background: "$background-primary-subtle-active",
+    boxShadow: "none",
+    color: "$text-primary-active"
+  },
+  '&[tabindex="0"]': {
+    zIndex: "1"
+  }
+};
+
+const StyledIndicator = styled(Primitive.span, {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
+  ...itemDefaults,
+  [`&[data-state="checked"] ${StyledIndicator}`]: {
+    color: "$icon-primary"
+  },
+  [`&[data-state="checked"]:hover:not([aria-disabled="true"]) ${StyledIndicator}`]: {
+    color: "$icon-primary-hover"
+  },
+  [`
+    &[aria-disabled="true"] ${StyledIndicator},
+    &[data-disabled] ${StyledIndicator}
+  `]: {
+    color: "$icon-neutrals-disabled"
+  }
+});
+
+const useAriaDisabled = ({
+  "aria-disabled": ariaDisabled,
+  onKeyDown,
+  onSelect,
+  onPointerMove,
+  onClick
+}, preventDefault = false) => useMemo(
   () => ({
     "aria-disabled": booleanify(ariaDisabled) ? ariaDisabled : void 0,
     onKeyDown: (e) => {
@@ -211,12 +232,27 @@ const useAriaDisabled = ({ "aria-disabled": ariaDisabled, onKeyDown, onSelect },
         e.preventDefault();
       }
       if (booleanify(ariaDisabled)) {
+        e.preventDefault();
         return;
       }
       onSelect == null ? void 0 : onSelect(e);
+    },
+    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);
     }
   }),
-  [ariaDisabled, onKeyDown, onSelect, preventDefault]
+  [ariaDisabled, onKeyDown, onSelect, onPointerMove, onClick, preventDefault]
 );
 
 const Context = createContext({
@@ -258,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" }
@@ -447,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",
@@ -455,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",
@@ -478,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"
@@ -511,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, {
@@ -526,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}
@@ -561,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"
@@ -580,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"
   }
 });
@@ -669,7 +710,7 @@ const Portal = (props) => /* @__PURE__ */ React.createElement(Portal$1, {
 });
 
 const StyledIconSlot = styled(LeftSlot, {
-  paddingTop: "2px",
+  square: "$5",
   "& svg:not([data-icon-component]), & img:not([data-icon-component])": {
     ...styles$1.size.small,
     ...styles$1.weight.thin
@@ -694,11 +735,10 @@ const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
   return /* @__PURE__ */ React.createElement(StyledIconSlot, {
     ref: forwardRef,
     ...restProps
-  }, formattedChildren);
-});
-
-const HotkeySlot = styled(RightSlot, {
-  color: "$text-neutrals-subtle"
+  }, /* @__PURE__ */ React.createElement(Primitive.svg, {
+    asChild: true,
+    "aria-hidden": true
+  }, formattedChildren));
 });
 
 const IllustrationSlot = React.forwardRef((props, forwardRef) => {