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

package/dist/main.js

@@ -44,12 +44,14 @@ 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"
 });
@@ -58,82 +60,6 @@ const StyledIllustrationSlot = designSystemStitches.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"
-  },
-  ...designSystemStyles.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 = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
-  padding: "4px 6px"
-});
-const StyledCheckboxItem = designSystemStitches.styled(RadixDropdownMenu__namespace.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 = React.createContext({
   rightSlotMount: () => 0,
   rightSlotDestroy: () => {
@@ -193,13 +119,16 @@ 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"
   }
 });
 
@@ -221,7 +150,99 @@ const RightSlot = (props) => {
   });
 };
 
-const useAriaDisabled = ({ "aria-disabled": ariaDisabled, onKeyDown, onSelect }, preventDefault = false) => React.useMemo(
+const HotkeySlot = designSystemStitches.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"
+  },
+  ...designSystemStyles.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 = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  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: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) => React.useMemo(
   () => ({
     "aria-disabled": designSystemUtils.booleanify(ariaDisabled) ? ariaDisabled : void 0,
     onKeyDown: (e) => {
@@ -237,12 +258,27 @@ const useAriaDisabled = ({ "aria-disabled": ariaDisabled, onKeyDown, onSelect },
         e.preventDefault();
       }
       if (designSystemUtils.booleanify(ariaDisabled)) {
+        e.preventDefault();
         return;
       }
       onSelect == null ? void 0 : onSelect(e);
+    },
+    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);
     }
   }),
-  [ariaDisabled, onKeyDown, onSelect, preventDefault]
+  [ariaDisabled, onKeyDown, onSelect, onPointerMove, onClick, preventDefault]
 );
 
 const Context = React.createContext({
@@ -284,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" }
@@ -473,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",
@@ -481,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",
@@ -504,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"
@@ -537,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, {
@@ -552,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}
@@ -587,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"
@@ -606,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"
   }
 });
@@ -695,7 +736,7 @@ const Portal = (props) => /* @__PURE__ */ React__default["default"].createElemen
 });
 
 const StyledIconSlot = designSystemStitches.styled(LeftSlot, {
-  paddingTop: "2px",
+  square: "$5",
   "& svg:not([data-icon-component]), & img:not([data-icon-component])": {
     ...designSystemBaseIcon.styles.size.small,
     ...designSystemBaseIcon.styles.weight.thin
@@ -720,11 +761,10 @@ const IconSlot = React__default["default"].forwardRef(({ children, ...restProps
   return /* @__PURE__ */ React__default["default"].createElement(StyledIconSlot, {
     ref: forwardRef,
     ...restProps
-  }, formattedChildren);
-});
-
-const HotkeySlot = designSystemStitches.styled(RightSlot, {
-  color: "$text-neutrals-subtle"
+  }, /* @__PURE__ */ React__default["default"].createElement(designSystemPrimitive.Primitive.svg, {
+    asChild: true,
+    "aria-hidden": true
+  }, formattedChildren));
 });
 
 const IllustrationSlot = React__default["default"].forwardRef((props, forwardRef) => {