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

package/dist/main.js

@@ -10,6 +10,7 @@ var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemStyles = require('@mirohq/design-system-styles');
 var designSystemBaseSwitch = require('@mirohq/design-system-base-switch');
+var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -45,23 +46,140 @@ const ItemDescription = designSystemStitches.styled(designSystemPrimitive.Primit
   color: "$text-neutrals-subtle"
 });
 
+const Context$1 = React.createContext({
+  rightSlotMount: () => 0,
+  rightSlotDestroy: () => {
+  }
+});
+const ContentProvider = ({
+  children
+}) => {
+  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
+    }
+  }, formattedChildren);
+};
+const useContent = () => React.useContext(Context$1);
+
 const LeftSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "flex",
   placeContent: "center",
   marginRight: "$100",
   gridArea: "left-slot"
 });
-const IllustrationSlot = designSystemStitches.styled(LeftSlot, {
+const StyledIllustrationSlot = designSystemStitches.styled(LeftSlot, {
   width: "$13"
 });
-const RightSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+const StyledRightSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "flex",
   alignItems: "center",
   marginLeft: "auto",
   paddingLeft: "$200",
-  gridArea: "right-slot"
+  gridArea: "right-slot",
+  minWidth: "max-content",
+  textAlign: "right",
+  "&:empty": {
+    paddingLeft: "$none"
+  }
+});
+
+const Context = React.createContext({
+  leftSlotMount: () => {
+  },
+  leftSlotDestroy: () => {
+  }
+});
+const ItemProvider = ({
+  children
+}) => {
+  const [hasSlot, setHasSlot] = React.useState(false);
+  const leftSlotMount = React.useCallback(() => {
+    setHasSlot(true);
+  }, []);
+  const leftSlotDestroy = React.useCallback(() => {
+    setHasSlot(false);
+  }, []);
+  const formattedChildren = hasSlot ? children : designSystemUtils.addPropsToChildren(children, () => true, {
+    "data-no-left-slot": ""
+  });
+  return /* @__PURE__ */ React__default["default"].createElement(Context.Provider, {
+    value: {
+      leftSlotMount,
+      leftSlotDestroy
+    }
+  }, formattedChildren);
+};
+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 HotkeySlot = RightSlot;
 
 const itemDefaults = {
   all: "unset",
@@ -71,18 +189,28 @@ const itemDefaults = {
   color: "$text-neutrals",
   borderRadius: "$50",
   display: "grid",
-  gridTemplateColumns: "auto 1fr auto",
+  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: "center",
-  minHeight: "$11",
-  padding: "$100 $150",
+  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",
@@ -110,7 +238,9 @@ const itemDefaults = {
   }
 };
 
-const StyledIndicator = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {});
+const StyledIndicator = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  padding: "4px 6px"
+});
 const StyledCheckboxItem = designSystemStitches.styled(RadixDropdownMenu__namespace.CheckboxItem, {
   ...itemDefaults,
   [`&[data-state="checked"] ${StyledIndicator}`]: {
@@ -154,7 +284,7 @@ const useAriaDisabled = ({ "aria-disabled": ariaDisabled, onKeyDown, onSelect },
 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, {
+  return /* @__PURE__ */ React__default["default"].createElement(ItemProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledCheckboxItem, {
     ...restProps,
     ...ariaDisabledProps,
     ref: forwardRef,
@@ -164,26 +294,17 @@ const CheckboxItem = React__default["default"].forwardRef(({ children, checked,
   }, 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"
-  }))));
+    css: { width: "12px", display: "block" }
+  })))));
 });
 
-const GUTTER_TOKEN = 150;
-const CONTENT_GUTTER = parseInt(designSystemStitches.theme.space[GUTTER_TOKEN]);
+const CONTENT_GUTTER = parseInt(designSystemStitches.theme.space[150]);
 const CONTENT_OFFSET = parseInt(designSystemStitches.theme.space[50]);
-const ITEM_WITHOUT_RIGHT_SLOT = `[role="menuitem"]:not(:has(${RightSlot}))`;
 const contentDefaults = {
   maxWidth: "$125",
   backgroundColor: "$white",
   borderRadius: "$50",
-  padding: `$${GUTTER_TOKEN}`,
   boxShadow: "$50",
-  [`&:has(${RightSlot}) > ${ITEM_WITHOUT_RIGHT_SLOT}`]: {
-    paddingRight: "44px"
-  },
-  [`&:has([role="switch"]) > ${ITEM_WITHOUT_RIGHT_SLOT}`]: {
-    paddingRight: "56px"
-  },
   "@media (prefers-reduced-motion: no-preference)": {
     animationDuration: "150ms",
     animationTimingFunction: "cubic-bezier(0.25, 0.5, 0.5, 0.9)",
@@ -215,7 +336,28 @@ const contentDefaults = {
   zIndex: "$dropdownMenu"
 };
 
-const StyledContent = designSystemStitches.styled(RadixDropdownMenu__namespace.Content, contentDefaults);
+const StyledContent = designSystemStitches.styled(RadixDropdownMenu__namespace.Content, {
+  ...contentDefaults,
+  variants: {
+    containerSpacing: {
+      small: {
+        '&, [role="menu"]': {
+          padding: "$50 $150"
+        }
+      },
+      medium: {
+        '&, [role="menu"]': {
+          padding: "$150"
+        }
+      },
+      large: {
+        '&, [role="menu"]': {
+          padding: "$150 $300"
+        }
+      }
+    }
+  }
+});
 
 const Content = React__default["default"].forwardRef(
   ({
@@ -228,8 +370,9 @@ const Content = React__default["default"].forwardRef(
     avoidCollisions = true,
     sticky = "partial",
     hideWhenDetached = false,
+    containerSpacing = "medium",
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledContent, {
+  }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(ContentProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledContent, {
     ...restProps,
     ref: forwardRef,
     loop,
@@ -240,21 +383,31 @@ const Content = React__default["default"].forwardRef(
     avoidCollisions,
     collisionPadding,
     sticky,
-    hideWhenDetached
-  })
+    hideWhenDetached,
+    containerSpacing
+  }))
 );
 
-const StyledItem = designSystemStitches.styled(RadixDropdownMenu__namespace.Item, itemDefaults);
+const StyledItem = designSystemStitches.styled(RadixDropdownMenu__namespace.Item, {
+  ...itemDefaults,
+  variants: {
+    hasRightSlot: {
+      true: {
+        paddingRight: "$600"
+      }
+    }
+  }
+});
 
 const Item = React__default["default"].forwardRef(
   ({ disabled = false, ...restProps }, forwardRef) => {
     const ariaDisabledProps = useAriaDisabled(restProps);
-    return /* @__PURE__ */ React__default["default"].createElement(StyledItem, {
+    return /* @__PURE__ */ React__default["default"].createElement(ItemProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledItem, {
       ...restProps,
       ...ariaDisabledProps,
       disabled,
       ref: forwardRef
-    });
+    }));
   }
 );
 
@@ -270,7 +423,9 @@ const LinkItem = React__default["default"].forwardRef(({ children, href, ...rest
   }, children));
 });
 
-const StyledRadioGroup = designSystemStitches.styled(RadixDropdownMenu__namespace.RadioGroup);
+const StyledRadioGroup = designSystemStitches.styled(RadixDropdownMenu__namespace.RadioGroup, {
+  marginY: "$50"
+});
 
 const RadioGroup = React__default["default"].forwardRef((props, forwardRef) => {
   const { onChange, ...restProps } = props;
@@ -289,7 +444,8 @@ const StyledRadioContainer = designSystemStitches.styled(designSystemPrimitive.P
   height: "$4",
   boxSizing: "border-box",
   border: "1px solid $border-neutrals",
-  borderRadius: "$half"
+  borderRadius: "$half",
+  marginTop: "2px"
 });
 const StyledPill = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
   display: "none",
@@ -339,17 +495,16 @@ const StyledRadioItem = designSystemStitches.styled(RadixDropdownMenu__namespace
 
 const RadioItem = React__default["default"].forwardRef(({ disabled = false, children, ...restProps }, forwardRef) => {
   const ariaDisabledProps = useAriaDisabled(restProps, true);
-  return /* @__PURE__ */ React__default["default"].createElement(StyledRadioItem, {
+  return /* @__PURE__ */ React__default["default"].createElement(ItemProvider, null, /* @__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))));
+  }, 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 $border-neutrals-subtle",
-  marginY: "$100"
+  borderTop: "1px solid $border-neutrals-subtle"
 });
 
 const Separator = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledSeparator, {
@@ -360,7 +515,8 @@ const Separator = React__default["default"].forwardRef((props, forwardRef) => /*
 const StyledSwitch = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
   ...designSystemBaseSwitch.styles.default,
   width: "$7",
-  height: "$4"
+  height: "$4",
+  marginTop: "2px"
 });
 const StyledSwitchItem = designSystemStitches.styled(RadixDropdownMenu__namespace.CheckboxItem, {
   ...itemDefaults,
@@ -376,30 +532,29 @@ const StyledSwitchItem = designSystemStitches.styled(RadixDropdownMenu__namespac
 const SwitchItem = React__default["default"].forwardRef(
   ({ disabled = false, checked, onChange, children, ...restProps }, forwardRef) => {
     const ariaDisabledProps = useAriaDisabled(restProps, true);
-    return /* @__PURE__ */ React__default["default"].createElement(StyledSwitchItem, {
+    return /* @__PURE__ */ React__default["default"].createElement(ItemProvider, null, /* @__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))));
+    }, 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 = {
-  boxSizing: "border-box",
-  cursor: "pointer",
-  ...designSystemStyles.focus.defaults
-};
 const StyledTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.Trigger, {
   variants: {
     unstyled: {
       true: {
         all: "unset",
-        ...defaultStyles
+        boxSizing: "border-box",
+        cursor: "pointer",
+        ...designSystemStyles.focus.defaults
       },
-      false: defaultStyles
+      false: {
+        cursor: "pointer"
+      }
     }
   }
 });
@@ -413,7 +568,8 @@ const Trigger = React__default["default"].forwardRef(({ asChild = false, onPress
 }));
 
 const StyledIconContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
-  color: "$icon-neutrals-with-text"
+  color: "$icon-neutrals-with-text",
+  marginRight: "-4px"
 });
 const StyledSubTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.SubTrigger, {
   ...itemDefaults,
@@ -456,7 +612,7 @@ const SubContent = React__default["default"].forwardRef(
     hideWhenDetached = false,
     sticky = "partial",
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledSubContent, {
+  }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(ContentProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledSubContent, {
     ...restProps,
     ref: forwardRef,
     sideOffset,
@@ -465,7 +621,7 @@ const SubContent = React__default["default"].forwardRef(
     loop,
     hideWhenDetached,
     sticky
-  })
+  }))
 );
 
 const StyledSub = designSystemStitches.styled(RadixDropdownMenu__namespace.Sub, {});
@@ -492,7 +648,7 @@ const Portal = (props) => /* @__PURE__ */ React__default["default"].createElemen
 });
 
 const StyledIconSlot = designSystemStitches.styled(LeftSlot, {
-  square: "$5",
+  paddingTop: "2px",
   variants: {
     customIcon: {
       true: {
@@ -503,13 +659,18 @@ const StyledIconSlot = designSystemStitches.styled(LeftSlot, {
 });
 
 const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
+  const { leftSlotMount, leftSlotDestroy } = useItem();
   const child = React__default["default"].Children.only(children);
-  const isIcon = designSystemIcons.isIconComponent(child);
+  const isIcon = designSystemBaseIcon.isIconComponent(child);
   const formattedChild = isIcon ? React__default["default"].cloneElement(child, {
     ...child.props,
     size: "small",
     weight: "thin"
   }) : child;
+  React.useEffect(() => {
+    leftSlotMount();
+    return () => leftSlotDestroy();
+  }, [leftSlotMount, leftSlotDestroy]);
   return /* @__PURE__ */ React__default["default"].createElement(StyledIconSlot, {
     ref: forwardRef,
     ...restProps,