@mirohq/design-system-dropdown-menu 3.3.0-dropdown.5 → 3.3.0-dropdown.7

package/dist/main.js

@@ -46,13 +46,66 @@ 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 StyledRightSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
@@ -68,6 +121,66 @@ const StyledRightSlot = designSystemStitches.styled(designSystemPrimitive.Primit
   }
 });
 
+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 itemDefaults = {
   all: "unset",
   boxSizing: "border-box",
@@ -76,7 +189,7 @@ 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'`,
@@ -87,7 +200,7 @@ const itemDefaults = {
   userSelect: "none",
   cursor: "pointer",
   "&[data-no-left-slot]": {
-    gridTemplateColumns: "1fr auto",
+    gridTemplateColumns: "1fr minmax(auto, var(--right-slot-max-width))",
     gridTemplateRows: "auto",
     gridTemplateAreas: `'item-text right-slot'
     'item-description right-slot'`
@@ -144,53 +257,6 @@ const StyledCheckboxItem = designSystemStitches.styled(RadixDropdownMenu__namesp
   }
 });
 
-const Context = React.createContext({
-  counter: {
-    right: 0,
-    left: 0
-  },
-  increaseCounter: () => {
-  },
-  decreaseCounter: () => {
-  }
-});
-const SlotsProvider = ({
-  children
-}) => {
-  const [counter, setCounter] = React.useState({
-    right: 0,
-    left: 0
-  });
-  return /* @__PURE__ */ React__default["default"].createElement(Context.Provider, {
-    value: {
-      counter,
-      increaseCounter: (side) => {
-        setCounter((counter2) => ({
-          ...counter2,
-          [side]: counter2[side] + 1
-        }));
-      },
-      decreaseCounter: (side) => setCounter((counter2) => ({
-        ...counter2,
-        [side]: counter2[side] - 1
-      }))
-    }
-  }, children);
-};
-const useSlots = () => React.useContext(Context);
-
-const RightSlot = (props) => {
-  const { increaseCounter, decreaseCounter } = useSlots();
-  React.useEffect(() => {
-    increaseCounter("right");
-    return () => decreaseCounter("right");
-  }, []);
-  return /* @__PURE__ */ React__default["default"].createElement(StyledRightSlot, {
-    ...props
-  });
-};
-const HotkeySlot = RightSlot;
-
 const useAriaDisabled = ({ "aria-disabled": ariaDisabled, onKeyDown, onSelect }, preventDefault = false) => React.useMemo(
   () => ({
     "aria-disabled": designSystemUtils.booleanify(ariaDisabled) ? ariaDisabled : void 0,
@@ -218,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,
@@ -226,17 +292,17 @@ 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, {
-    size: "small"
+    css: { square: "$3", display: "block" }
   }), checked && /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconCheckMark, {
-    css: { width: "12px", display: "block" }
-  }))));
+    css: { square: "$3", display: "block" }
+  })))));
 });
 
 const CONTENT_GUTTER = parseInt(designSystemStitches.theme.space[150]);
 const CONTENT_OFFSET = parseInt(designSystemStitches.theme.space[50]);
 const contentDefaults = {
   maxWidth: "$125",
-  backgroundColor: "$white",
+  backgroundColor: "$background-neutrals-container",
   borderRadius: "$50",
   boxShadow: "$50",
   "@media (prefers-reduced-motion: no-preference)": {
@@ -306,7 +372,7 @@ const Content = React__default["default"].forwardRef(
     hideWhenDetached = false,
     containerSpacing = "medium",
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(SlotsProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledContent, {
+  }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(ContentProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledContent, {
     ...restProps,
     ref: forwardRef,
     loop,
@@ -335,15 +401,13 @@ const StyledItem = designSystemStitches.styled(RadixDropdownMenu__namespace.Item
 
 const Item = React__default["default"].forwardRef(
   ({ disabled = false, ...restProps }, forwardRef) => {
-    const { counter } = useSlots();
     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,
-      hasRightSlot: counter.right > 0
-    });
+      ref: forwardRef
+    }));
   }
 );
 
@@ -381,7 +445,7 @@ const StyledRadioContainer = designSystemStitches.styled(designSystemPrimitive.P
   boxSizing: "border-box",
   border: "1px solid $border-neutrals",
   borderRadius: "$half",
-  marginTop: "2px"
+  margin: "2px 4px"
 });
 const StyledPill = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
   display: "none",
@@ -391,7 +455,7 @@ const StyledPill = designSystemStitches.styled(designSystemPrimitive.Primitive.s
 });
 const StyledProhibited = designSystemStitches.styled(designSystemIcons.IconProhibit, {
   display: "none",
-  width: "$3"
+  width: "$3 !important"
 });
 const StyledRadioItem = designSystemStitches.styled(RadixDropdownMenu__namespace.RadioItem, {
   ...itemDefaults,
@@ -431,12 +495,12 @@ 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, {
@@ -468,14 +532,14 @@ 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)))));
   }
 );
 
@@ -548,7 +612,7 @@ const SubContent = React__default["default"].forwardRef(
     hideWhenDetached = false,
     sticky = "partial",
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(SlotsProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledSubContent, {
+  }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(ContentProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledSubContent, {
     ...restProps,
     ref: forwardRef,
     sideOffset,
@@ -595,6 +659,7 @@ 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 = designSystemBaseIcon.isIconComponent(child);
   const formattedChild = isIcon ? React__default["default"].cloneElement(child, {
@@ -602,6 +667,10 @@ const IconSlot = React__default["default"].forwardRef(({ children, ...restProps
     size: "small",
     weight: "thin"
   }) : child;
+  React.useEffect(() => {
+    leftSlotMount();
+    return () => leftSlotDestroy();
+  }, [leftSlotMount, leftSlotDestroy]);
   return /* @__PURE__ */ React__default["default"].createElement(StyledIconSlot, {
     ref: forwardRef,
     ...restProps,