@mirohq/design-system-dropdown-menu 3.3.4-use-press.2 → 3.4.1

package/dist/module.js

@@ -80,7 +80,7 @@ const ContentProvider = ({
   );
   const formattedChildren = addPropsToChildren(children, () => true, {
     UNSAFE_style: {
-      "--right-slot-max-width": `${Math.ceil(maxWidth)}px`
+      "--right-slot-max-width": "".concat(Math.ceil(maxWidth), "px")
     }
   });
   return /* @__PURE__ */ jsx(
@@ -142,8 +142,7 @@ const itemDefaults = {
   display: "grid",
   gridTemplateColumns: "auto 1fr minmax(min-content, var(--right-slot-max-width))",
   gridTemplateRows: "auto 1fr",
-  gridTemplateAreas: `'left-slot item-text right-slot'
-    'left-slot item-description right-slot'`,
+  gridTemplateAreas: "'left-slot item-text right-slot'\n    'left-slot item-description right-slot'",
   alignItems: "start",
   padding: "10px $100",
   position: "relative",
@@ -151,8 +150,7 @@ const itemDefaults = {
   cursor: "pointer",
   "&[data-no-left-slot]": {
     gridTemplateColumns: "1fr minmax(auto, var(--right-slot-max-width))",
-    gridTemplateAreas: `'item-text right-slot'
-    'item-description right-slot'`
+    gridTemplateAreas: "'item-text right-slot'\n    'item-description right-slot'"
   },
   "&:not(:last-child)": {
     marginBottom: "$50"
@@ -166,10 +164,10 @@ const itemDefaults = {
   }),
   '&:disabled, &[aria-disabled="true"], &[data-disabled]': {
     cursor: "default",
-    [`&, & ${ItemDescription}, & ${HotkeySlot}`]: {
+    ["&, & ".concat(ItemDescription, ", & ").concat(HotkeySlot)]: {
       color: "$text-neutrals-disabled"
     },
-    [`& ${StyledIllustrationSlot}`]: {
+    ["& ".concat(StyledIllustrationSlot)]: {
       filter: "grayscale(1)"
     }
   },
@@ -200,16 +198,13 @@ const StyledIndicator = styled(Primitive.span, {
 });
 const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
   ...itemDefaults,
-  [`&[data-state="checked"] ${StyledIndicator}`]: {
+  ['&[data-state="checked"] '.concat(StyledIndicator)]: {
     color: "$icon-primary"
   },
-  [`&[data-state="checked"]:hover:not([aria-disabled="true"]) ${StyledIndicator}`]: {
+  ['&[data-state="checked"]:hover:not([aria-disabled="true"]) '.concat(StyledIndicator)]: {
     color: "$icon-primary-hover"
   },
-  [`
-    &[aria-disabled="true"] ${StyledIndicator},
-    &[data-disabled] ${StyledIndicator}
-  `]: {
+  ['\n    &[aria-disabled="true"] '.concat(StyledIndicator, ",\n    &[data-disabled] ").concat(StyledIndicator, "\n  ")]: {
     color: "$icon-neutrals-disabled"
   }
 });
@@ -220,7 +215,7 @@ const useAriaDisabled = ({
   onSelect,
   onPointerMove,
   onClick
-}, preventDefault = false) => useMemo(
+}, closeOnCheck = true) => useMemo(
   () => ({
     "aria-disabled": booleanify(ariaDisabled) ? ariaDisabled : void 0,
     onKeyDown: (e) => {
@@ -232,13 +227,13 @@ const useAriaDisabled = ({
       onKeyDown == null ? void 0 : onKeyDown(e);
     },
     onSelect: (e) => {
-      if (preventDefault) {
-        e.preventDefault();
-      }
       if (booleanify(ariaDisabled)) {
         e.preventDefault();
         return;
       }
+      if (!closeOnCheck) {
+        e.preventDefault();
+      }
       onSelect == null ? void 0 : onSelect(e);
     },
     onPointerMove: (e) => {
@@ -256,7 +251,7 @@ const useAriaDisabled = ({
       onClick == null ? void 0 : onClick(e);
     }
   }),
-  [ariaDisabled, onKeyDown, onSelect, onPointerMove, onClick, preventDefault]
+  [ariaDisabled, onKeyDown, onSelect, onPointerMove, onClick, closeOnCheck]
 );
 
 const Context = createContext({
@@ -291,34 +286,43 @@ const ItemProvider = ({
 };
 const useItem = () => useContext(Context);
 
-const CheckboxItem = React.forwardRef(({ children, checked, onChange, disabled, ...restProps }, forwardRef) => {
-  const ariaDisabledProps = useAriaDisabled(restProps, true);
-  const { "aria-disabled": ariaDisabled } = ariaDisabledProps;
-  return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(
-    StyledCheckboxItem,
-    {
-      ...restProps,
-      ...ariaDisabledProps,
-      ref: forwardRef,
-      checked,
-      disabled,
-      onCheckedChange: onChange,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(RightSlot, { children: /* @__PURE__ */ jsxs(StyledIndicator, { children: [
-          (disabled === true || booleanify(ariaDisabled)) && !checked && /* @__PURE__ */ jsx(
-            IconProhibit,
-            {
-              weight: "thin",
-              css: { square: "$3", display: "block" }
-            }
-          ),
-          checked && /* @__PURE__ */ jsx(IconCheckMark, { css: { square: "$3", display: "block" } })
-        ] }) })
-      ]
-    }
-  ) });
-});
+const CheckboxItem = React.forwardRef(
+  ({
+    children,
+    checked,
+    onChange,
+    disabled,
+    closeOnSelect = false,
+    ...restProps
+  }, forwardRef) => {
+    const ariaDisabledProps = useAriaDisabled(restProps, closeOnSelect);
+    const { "aria-disabled": ariaDisabled } = ariaDisabledProps;
+    return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(
+      StyledCheckboxItem,
+      {
+        ...restProps,
+        ...ariaDisabledProps,
+        ref: forwardRef,
+        checked,
+        disabled,
+        onCheckedChange: onChange,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(RightSlot, { children: /* @__PURE__ */ jsxs(StyledIndicator, { children: [
+            (disabled === true || booleanify(ariaDisabled)) && !checked && /* @__PURE__ */ jsx(
+              IconProhibit,
+              {
+                weight: "thin",
+                css: { square: "$3", display: "block" }
+              }
+            ),
+            checked && /* @__PURE__ */ jsx(IconCheckMark, { css: { square: "$3", display: "block" } })
+          ] }) })
+        ]
+      }
+    ) });
+  }
+);
 
 const CONTENT_GUTTER = parseInt(theme.space[150]);
 const CONTENT_OFFSET = parseInt(theme.space[50]);
@@ -334,7 +338,7 @@ const contentDefaults = {
   borderRadius: "$50",
   boxShadow: "$50",
   "& [data-radix-scroll-area-viewport]": {
-    padding: `${CONTENT_BORDER_FOCUS_ITEM} $50 ${CONTENT_BORDER_FOCUS_ITEM} ${CONTENT_BORDER_FOCUS_ITEM}`,
+    padding: "".concat(CONTENT_BORDER_FOCUS_ITEM, " $50 ").concat(CONTENT_BORDER_FOCUS_ITEM, " ").concat(CONTENT_BORDER_FOCUS_ITEM),
     boxSizing: "border-box"
   },
   "@media (prefers-reduced-motion: no-preference)": {
@@ -399,9 +403,9 @@ const ScrollableContent = ({
 }) => {
   const getOverflowMaxHeight = useCallback(() => {
     const [top, , bottom] = CONTENT_PADDING[containerSpacing].split(" ").map((value) => value.replace("$", ""));
-    const topBottom = top !== void 0 && bottom !== void 0 ? `var(--space-${top}) + var(--space-${bottom})` : `var(--space-${top}) + var(--space-${top})`;
-    const overflowMaxHeigh = overflow === "auto" ? `calc(var(--radix-dropdown-menu-content-available-height) - (${topBottom}))` : "auto";
-    const newMaxHeight = `calc(${maxHeight} - (${topBottom}))`;
+    const topBottom = top !== void 0 && bottom !== void 0 ? "var(--space-".concat(top, ") + var(--space-").concat(bottom, ")") : "var(--space-".concat(top, ") + var(--space-").concat(top, ")");
+    const overflowMaxHeigh = overflow === "auto" ? "calc(var(--radix-dropdown-menu-content-available-height) - (".concat(topBottom, "))") : "auto";
+    const newMaxHeight = "calc(".concat(maxHeight, " - (").concat(topBottom, "))");
     return {
       maxHeight: maxHeight === void 0 ? overflowMaxHeigh : newMaxHeight
     };
@@ -410,7 +414,7 @@ const ScrollableContent = ({
     return /* @__PURE__ */ jsxs(
       ScrollArea,
       {
-        css: { margin: `-${CONTENT_BORDER_FOCUS_ITEM}` },
+        css: { margin: "-".concat(CONTENT_BORDER_FOCUS_ITEM) },
         type: "always",
         children: [
           /* @__PURE__ */ jsx(ScrollArea.Viewport, { css: { ...getOverflowMaxHeight() }, children }),
@@ -529,42 +533,36 @@ const StyledProhibited = styled(IconProhibit, {
 });
 const StyledRadioItem = styled(RadixDropdownMenu.RadioItem, {
   ...itemDefaults,
-  [`&[data-state="checked"] ${StyledRadioContainer}`]: {
+  ['&[data-state="checked"] '.concat(StyledRadioContainer)]: {
     color: "$icon-primary",
     borderColor: "$border-primary",
-    [`& ${StyledPill}`]: {
+    ["& ".concat(StyledPill)]: {
       display: "block",
       backgroundColor: "$background-primary-prominent-selected"
     }
   },
-  [`&:hover:not([aria-disabled="true"]) ${StyledRadioContainer}`]: {
+  ['&:hover:not([aria-disabled="true"]) '.concat(StyledRadioContainer)]: {
     borderColor: "$border-primary-hover",
-    [`& ${StyledPill}`]: {
+    ["& ".concat(StyledPill)]: {
       backgroundColor: "$background-primary-prominent-hover"
     }
   },
-  [`
-    &[aria-disabled="true"] ${StyledRadioContainer},
-    &[data-disabled] ${StyledRadioContainer}
-  `]: {
+  ['\n    &[aria-disabled="true"] '.concat(StyledRadioContainer, ",\n    &[data-disabled] ").concat(StyledRadioContainer, "\n  ")]: {
     color: "$icon-neutrals-disabled",
     borderColor: "$border-neutrals-disabled",
-    [`& ${StyledPill}`]: {
+    ["& ".concat(StyledPill)]: {
       backgroundColor: "$icon-neutrals-disabled"
     }
   },
   '&[data-state="unchecked"]': {
-    [`
-      &[aria-disabled="true"] ${StyledProhibited},
-      &[data-disabled] ${StyledProhibited}
-    `]: {
+    ['\n      &[aria-disabled="true"] '.concat(StyledProhibited, ",\n      &[data-disabled] ").concat(StyledProhibited, "\n    ")]: {
       display: "flex"
     }
   }
 });
 
-const RadioItem = React.forwardRef(({ disabled = false, children, ...restProps }, forwardRef) => {
-  const ariaDisabledProps = useAriaDisabled(restProps, true);
+const RadioItem = React.forwardRef(({ disabled, children, closeOnSelect = false, ...restProps }, forwardRef) => {
+  const ariaDisabledProps = useAriaDisabled(restProps, closeOnSelect);
   return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(
     StyledRadioItem,
     {
@@ -596,18 +594,22 @@ const StyledSwitch = styled(Primitive.span, {
 });
 const StyledSwitchItem = styled(RadixDropdownMenu.CheckboxItem, {
   ...itemDefaults,
-  [`&[data-state="checked"] ${StyledSwitch}`]: styles.checked,
-  [`&[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}
-  `]: styles.disabled
+  ['&[data-state="checked"] '.concat(StyledSwitch)]: styles.checked,
+  ['&[data-state="checked"]:hover:not([aria-disabled="true"]) '.concat(StyledSwitch)]: styles.checkedHovered,
+  ['&:hover:not([aria-disabled="true"]) '.concat(StyledSwitch)]: styles.hovered,
+  ['\n    &[aria-disabled="true"] '.concat(StyledSwitch, ",\n    &[data-disabled] ").concat(StyledSwitch, "\n  ")]: styles.disabled
 });
 
 const SwitchItem = React.forwardRef(
-  ({ disabled = false, checked, onChange, children, ...restProps }, forwardRef) => {
-    const ariaDisabledProps = useAriaDisabled(restProps, true);
+  ({
+    disabled,
+    checked,
+    onChange,
+    children,
+    closeOnSelect = false,
+    ...restProps
+  }, forwardRef) => {
+    const ariaDisabledProps = useAriaDisabled(restProps, closeOnSelect);
     return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(
       StyledSwitchItem,
       {
@@ -680,7 +682,7 @@ const StyledIconContainer = styled(Primitive.span, {
 const StyledSubTrigger = styled(RadixDropdownMenu.SubTrigger, {
   ...itemDefaults,
   '&[data-state="open"]': itemDefaults['&:hover:not([aria-disabled="true"])'],
-  [`&[data-state="open"] ${StyledIconContainer}, &:hover:not([aria-disabled="true"]) ${StyledIconContainer}`]: {
+  ['&[data-state="open"] '.concat(StyledIconContainer, ', &:hover:not([aria-disabled="true"]) ').concat(StyledIconContainer)]: {
     color: "$icon-primary-hover"
   }
 });