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

package/dist/module.js

@@ -1,8 +1,8 @@
-import React, { createContext, useState, useContext, useEffect, useMemo } from 'react';
+import React, { createContext, useState, useRef, useCallback, useContext, useEffect, useMemo } from 'react';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Portal as Portal$1 } from '@radix-ui/react-dropdown-menu';
 import { IconProhibit, IconCheckMark, IconChevronRight } from '@mirohq/design-system-icons';
-import { booleanify } from '@mirohq/design-system-utils';
+import { addPropsToChildren, booleanify } from '@mirohq/design-system-utils';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { styled, theme } from '@mirohq/design-system-stitches';
 import { focus, animations } from '@mirohq/design-system-styles';
@@ -20,13 +20,66 @@ const ItemDescription = styled(Primitive.div, {
   color: "$text-neutrals-subtle"
 });
 
+const Context$1 = createContext({
+  rightSlotMount: () => 0,
+  rightSlotDestroy: () => {
+  }
+});
+const ContentProvider = ({
+  children
+}) => {
+  const [maxWidth, setMaxWidth] = useState(0);
+  const maxRef = useRef(0);
+  const indexRef = useRef(0);
+  const widthMapRef = useRef(/* @__PURE__ */ new Map());
+  const updateMaxWith = useCallback((value) => {
+    maxRef.current = value;
+    setMaxWidth(value);
+  }, []);
+  const rightSlotMount = useCallback(
+    (width) => {
+      indexRef.current++;
+      widthMapRef.current.set(indexRef.current, width);
+      if (width > maxRef.current) {
+        updateMaxWith(width);
+      }
+      return indexRef.current;
+    },
+    [updateMaxWith]
+  );
+  const rightSlotDestroy = 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 = addPropsToChildren(children, () => true, {
+    UNSAFE_style: {
+      "--right-slot-max-width": `${Math.ceil(maxWidth)}px`
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Context$1.Provider, {
+    value: {
+      rightSlotMount,
+      rightSlotDestroy
+    }
+  }, formattedChildren);
+};
+const useContent = () => useContext(Context$1);
+
 const LeftSlot = styled(Primitive.div, {
   display: "flex",
   placeContent: "center",
   marginRight: "$100",
   gridArea: "left-slot"
 });
-const IllustrationSlot = styled(LeftSlot, {
+const StyledIllustrationSlot = styled(LeftSlot, {
   width: "$13"
 });
 const StyledRightSlot = styled(Primitive.div, {
@@ -42,6 +95,66 @@ const StyledRightSlot = styled(Primitive.div, {
   }
 });
 
+const Context = createContext({
+  leftSlotMount: () => {
+  },
+  leftSlotDestroy: () => {
+  }
+});
+const ItemProvider = ({
+  children
+}) => {
+  const [hasSlot, setHasSlot] = useState(false);
+  const leftSlotMount = useCallback(() => {
+    setHasSlot(true);
+  }, []);
+  const leftSlotDestroy = useCallback(() => {
+    setHasSlot(false);
+  }, []);
+  const formattedChildren = hasSlot ? children : addPropsToChildren(children, () => true, {
+    "data-no-left-slot": ""
+  });
+  return /* @__PURE__ */ React.createElement(Context.Provider, {
+    value: {
+      leftSlotMount,
+      leftSlotDestroy
+    }
+  }, formattedChildren);
+};
+const useItem = () => useContext(Context);
+
+const RightSlot = (props) => {
+  const { rightSlotMount, rightSlotDestroy } = useContent();
+  const ref = useRef(null);
+  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.createElement(StyledRightSlot, {
+    ref,
+    ...props
+  });
+};
+const HotkeySlot = styled(RightSlot, {
+  color: "$text-neutrals-subtle"
+});
+const IllustrationSlot = React.forwardRef((props, forwardRef) => {
+  const { leftSlotMount, leftSlotDestroy } = useItem();
+  useEffect(() => {
+    leftSlotMount();
+    return () => leftSlotDestroy();
+  }, [leftSlotMount, leftSlotDestroy]);
+  return /* @__PURE__ */ React.createElement(StyledIllustrationSlot, {
+    ref: forwardRef,
+    ...props
+  });
+});
+
 const itemDefaults = {
   all: "unset",
   boxSizing: "border-box",
@@ -50,7 +163,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'`,
@@ -61,7 +174,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'`
@@ -118,53 +231,6 @@ const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
   }
 });
 
-const Context = createContext({
-  counter: {
-    right: 0,
-    left: 0
-  },
-  increaseCounter: () => {
-  },
-  decreaseCounter: () => {
-  }
-});
-const SlotsProvider = ({
-  children
-}) => {
-  const [counter, setCounter] = useState({
-    right: 0,
-    left: 0
-  });
-  return /* @__PURE__ */ React.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 = () => useContext(Context);
-
-const RightSlot = (props) => {
-  const { increaseCounter, decreaseCounter } = useSlots();
-  useEffect(() => {
-    increaseCounter("right");
-    return () => decreaseCounter("right");
-  }, []);
-  return /* @__PURE__ */ React.createElement(StyledRightSlot, {
-    ...props
-  });
-};
-const HotkeySlot = RightSlot;
-
 const useAriaDisabled = ({ "aria-disabled": ariaDisabled, onKeyDown, onSelect }, preventDefault = false) => useMemo(
   () => ({
     "aria-disabled": booleanify(ariaDisabled) ? ariaDisabled : void 0,
@@ -192,7 +258,7 @@ const useAriaDisabled = ({ "aria-disabled": ariaDisabled, onKeyDown, onSelect },
 const CheckboxItem = React.forwardRef(({ children, checked, onChange, disabled, ...restProps }, forwardRef) => {
   const ariaDisabledProps = useAriaDisabled(restProps, true);
   const { "aria-disabled": ariaDisabled } = ariaDisabledProps;
-  return /* @__PURE__ */ React.createElement(StyledCheckboxItem, {
+  return /* @__PURE__ */ React.createElement(ItemProvider, null, /* @__PURE__ */ React.createElement(StyledCheckboxItem, {
     ...restProps,
     ...ariaDisabledProps,
     ref: forwardRef,
@@ -203,7 +269,7 @@ const CheckboxItem = React.forwardRef(({ children, checked, onChange, disabled,
     size: "small"
   }), checked && /* @__PURE__ */ React.createElement(IconCheckMark, {
     css: { width: "12px", display: "block" }
-  }))));
+  })))));
 });
 
 const CONTENT_GUTTER = parseInt(theme.space[150]);
@@ -280,7 +346,7 @@ const Content = React.forwardRef(
     hideWhenDetached = false,
     containerSpacing = "medium",
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ React.createElement(SlotsProvider, null, /* @__PURE__ */ React.createElement(StyledContent, {
+  }, forwardRef) => /* @__PURE__ */ React.createElement(ContentProvider, null, /* @__PURE__ */ React.createElement(StyledContent, {
     ...restProps,
     ref: forwardRef,
     loop,
@@ -309,15 +375,13 @@ const StyledItem = styled(RadixDropdownMenu.Item, {
 
 const Item = React.forwardRef(
   ({ disabled = false, ...restProps }, forwardRef) => {
-    const { counter } = useSlots();
     const ariaDisabledProps = useAriaDisabled(restProps);
-    return /* @__PURE__ */ React.createElement(StyledItem, {
+    return /* @__PURE__ */ React.createElement(ItemProvider, null, /* @__PURE__ */ React.createElement(StyledItem, {
       ...restProps,
       ...ariaDisabledProps,
       disabled,
-      ref: forwardRef,
-      hasRightSlot: counter.right > 0
-    });
+      ref: forwardRef
+    }));
   }
 );
 
@@ -405,12 +469,12 @@ const StyledRadioItem = styled(RadixDropdownMenu.RadioItem, {
 
 const RadioItem = React.forwardRef(({ disabled = false, children, ...restProps }, forwardRef) => {
   const ariaDisabledProps = useAriaDisabled(restProps, true);
-  return /* @__PURE__ */ React.createElement(StyledRadioItem, {
+  return /* @__PURE__ */ React.createElement(ItemProvider, null, /* @__PURE__ */ React.createElement(StyledRadioItem, {
     ...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, null)))));
 });
 
 const StyledSeparator = styled(RadixDropdownMenu.Separator, {
@@ -442,14 +506,14 @@ const StyledSwitchItem = styled(RadixDropdownMenu.CheckboxItem, {
 const SwitchItem = React.forwardRef(
   ({ disabled = false, checked, onChange, children, ...restProps }, forwardRef) => {
     const ariaDisabledProps = useAriaDisabled(restProps, true);
-    return /* @__PURE__ */ React.createElement(StyledSwitchItem, {
+    return /* @__PURE__ */ React.createElement(ItemProvider, null, /* @__PURE__ */ React.createElement(StyledSwitchItem, {
       ...restProps,
       ...ariaDisabledProps,
       disabled,
       checked,
       onCheckedChange: onChange,
       ref: forwardRef
-    }, children, /* @__PURE__ */ React.createElement(RightSlot, null, /* @__PURE__ */ React.createElement(StyledSwitch, null, /* @__PURE__ */ React.createElement(Thumb, null))));
+    }, children, /* @__PURE__ */ React.createElement(RightSlot, null, /* @__PURE__ */ React.createElement(StyledSwitch, null, /* @__PURE__ */ React.createElement(Thumb, null)))));
   }
 );
 
@@ -522,7 +586,7 @@ const SubContent = React.forwardRef(
     hideWhenDetached = false,
     sticky = "partial",
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ React.createElement(SlotsProvider, null, /* @__PURE__ */ React.createElement(StyledSubContent, {
+  }, forwardRef) => /* @__PURE__ */ React.createElement(ContentProvider, null, /* @__PURE__ */ React.createElement(StyledSubContent, {
     ...restProps,
     ref: forwardRef,
     sideOffset,
@@ -569,6 +633,7 @@ const StyledIconSlot = styled(LeftSlot, {
 });
 
 const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const { leftSlotMount, leftSlotDestroy } = useItem();
   const child = React.Children.only(children);
   const isIcon = isIconComponent(child);
   const formattedChild = isIcon ? React.cloneElement(child, {
@@ -576,6 +641,10 @@ const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
     size: "small",
     weight: "thin"
   }) : child;
+  useEffect(() => {
+    leftSlotMount();
+    return () => leftSlotDestroy();
+  }, [leftSlotMount, leftSlotDestroy]);
   return /* @__PURE__ */ React.createElement(StyledIconSlot, {
     ref: forwardRef,
     ...restProps,