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

package/dist/module.js

@@ -1,12 +1,13 @@
-import React, { useMemo, useState } from 'react';
+import React, { createContext, useState, 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 } from '@mirohq/design-system-icons';
+import { IconProhibit, IconCheckMark, IconChevronRight } from '@mirohq/design-system-icons';
 import { 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';
 import { styles, Thumb } from '@mirohq/design-system-base-switch';
+import { isIconComponent } from '@mirohq/design-system-base-icon';
 
 const ItemDescription = styled(Primitive.div, {
   display: "-webkit-box",
@@ -25,18 +26,20 @@ const LeftSlot = styled(Primitive.div, {
   marginRight: "$100",
   gridArea: "left-slot"
 });
-const IconSlot = styled(LeftSlot, {
-  width: "$6"
-});
 const IllustrationSlot = styled(LeftSlot, {
   width: "$13"
 });
-const RightSlot = styled(Primitive.div, {
+const StyledRightSlot = styled(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 itemDefaults = {
@@ -49,16 +52,26 @@ const itemDefaults = {
   display: "grid",
   gridTemplateColumns: "auto 1fr auto",
   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 auto",
+    gridTemplateRows: "auto",
+    gridTemplateAreas: `'item-text right-slot'
+    'item-description right-slot'`
+  },
+  "&:not(:last-child)": {
+    marginBottom: "$50"
+  },
+  "&:not(:first-child)": {
+    marginTop: "$50"
+  },
   ...focus.defaults,
   '&:disabled, &[aria-disabled="true"], &[data-disabled]': {
     pointerEvents: "none",
@@ -86,7 +99,9 @@ const itemDefaults = {
   }
 };
 
-const StyledIndicator = styled(Primitive.span, {});
+const StyledIndicator = styled(Primitive.span, {
+  padding: "4px 6px"
+});
 const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
   ...itemDefaults,
   [`&[data-state="checked"] ${StyledIndicator}`]: {
@@ -103,6 +118,53 @@ 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,
@@ -140,26 +202,17 @@ const CheckboxItem = React.forwardRef(({ children, checked, onChange, disabled,
   }, children, /* @__PURE__ */ React.createElement(RightSlot, null, /* @__PURE__ */ React.createElement(StyledIndicator, null, (disabled === true || booleanify(ariaDisabled)) && !checked && /* @__PURE__ */ React.createElement(IconProhibit, {
     size: "small"
   }), checked && /* @__PURE__ */ React.createElement(IconCheckMark, {
-    size: "small"
+    css: { width: "12px", display: "block" }
   }))));
 });
 
-const GUTTER_TOKEN = 150;
-const CONTENT_GUTTER = parseInt(theme.space[GUTTER_TOKEN]);
+const CONTENT_GUTTER = parseInt(theme.space[150]);
 const CONTENT_OFFSET = parseInt(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)",
@@ -191,7 +244,28 @@ const contentDefaults = {
   zIndex: "$dropdownMenu"
 };
 
-const StyledContent = styled(RadixDropdownMenu.Content, contentDefaults);
+const StyledContent = styled(RadixDropdownMenu.Content, {
+  ...contentDefaults,
+  variants: {
+    containerSpacing: {
+      small: {
+        '&, [role="menu"]': {
+          padding: "$50 $150"
+        }
+      },
+      medium: {
+        '&, [role="menu"]': {
+          padding: "$150"
+        }
+      },
+      large: {
+        '&, [role="menu"]': {
+          padding: "$150 $300"
+        }
+      }
+    }
+  }
+});
 
 const Content = React.forwardRef(
   ({
@@ -204,8 +278,9 @@ const Content = React.forwardRef(
     avoidCollisions = true,
     sticky = "partial",
     hideWhenDetached = false,
+    containerSpacing = "medium",
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ React.createElement(StyledContent, {
+  }, forwardRef) => /* @__PURE__ */ React.createElement(SlotsProvider, null, /* @__PURE__ */ React.createElement(StyledContent, {
     ...restProps,
     ref: forwardRef,
     loop,
@@ -216,20 +291,32 @@ const Content = React.forwardRef(
     avoidCollisions,
     collisionPadding,
     sticky,
-    hideWhenDetached
-  })
+    hideWhenDetached,
+    containerSpacing
+  }))
 );
 
-const StyledItem = styled(RadixDropdownMenu.Item, itemDefaults);
+const StyledItem = styled(RadixDropdownMenu.Item, {
+  ...itemDefaults,
+  variants: {
+    hasRightSlot: {
+      true: {
+        paddingRight: "$600"
+      }
+    }
+  }
+});
 
 const Item = React.forwardRef(
   ({ disabled = false, ...restProps }, forwardRef) => {
+    const { counter } = useSlots();
     const ariaDisabledProps = useAriaDisabled(restProps);
     return /* @__PURE__ */ React.createElement(StyledItem, {
       ...restProps,
       ...ariaDisabledProps,
       disabled,
-      ref: forwardRef
+      ref: forwardRef,
+      hasRightSlot: counter.right > 0
     });
   }
 );
@@ -246,7 +333,9 @@ const LinkItem = React.forwardRef(({ children, href, ...restProps }, forwardRef)
   }, children));
 });
 
-const StyledRadioGroup = styled(RadixDropdownMenu.RadioGroup);
+const StyledRadioGroup = styled(RadixDropdownMenu.RadioGroup, {
+  marginY: "$50"
+});
 
 const RadioGroup = React.forwardRef((props, forwardRef) => {
   const { onChange, ...restProps } = props;
@@ -265,7 +354,8 @@ const StyledRadioContainer = styled(Primitive.span, {
   height: "$4",
   boxSizing: "border-box",
   border: "1px solid $border-neutrals",
-  borderRadius: "$half"
+  borderRadius: "$half",
+  marginTop: "2px"
 });
 const StyledPill = styled(Primitive.span, {
   display: "none",
@@ -324,8 +414,7 @@ const RadioItem = React.forwardRef(({ disabled = false, children, ...restProps }
 });
 
 const StyledSeparator = styled(RadixDropdownMenu.Separator, {
-  borderTop: "1px solid $border-neutrals-subtle",
-  marginY: "$100"
+  borderTop: "1px solid $border-neutrals-subtle"
 });
 
 const Separator = React.forwardRef((props, forwardRef) => /* @__PURE__ */ React.createElement(StyledSeparator, {
@@ -336,7 +425,8 @@ const Separator = React.forwardRef((props, forwardRef) => /* @__PURE__ */ React.
 const StyledSwitch = styled(Primitive.span, {
   ...styles.default,
   width: "$7",
-  height: "$4"
+  height: "$4",
+  marginTop: "2px"
 });
 const StyledSwitchItem = styled(RadixDropdownMenu.CheckboxItem, {
   ...itemDefaults,
@@ -363,19 +453,18 @@ const SwitchItem = React.forwardRef(
   }
 );
 
-const defaultStyles = {
-  boxSizing: "border-box",
-  cursor: "pointer",
-  ...focus.defaults
-};
 const StyledTrigger = styled(RadixDropdownMenu.Trigger, {
   variants: {
     unstyled: {
       true: {
         all: "unset",
-        ...defaultStyles
+        boxSizing: "border-box",
+        cursor: "pointer",
+        ...focus.defaults
       },
-      false: defaultStyles
+      false: {
+        cursor: "pointer"
+      }
     }
   }
 });
@@ -388,21 +477,18 @@ const Trigger = React.forwardRef(({ asChild = false, onPress, onClick, ...restPr
   asChild
 }));
 
+const StyledIconContainer = styled(Primitive.span, {
+  color: "$icon-neutrals-with-text",
+  marginRight: "-4px"
+});
 const StyledSubTrigger = styled(RadixDropdownMenu.SubTrigger, {
   ...itemDefaults,
-  '&[data-state="open"]': itemDefaults["&:hover"]
+  '&[data-state="open"]': itemDefaults["&:hover"],
+  [`&[data-state="open"] ${StyledIconContainer}, &:hover ${StyledIconContainer}`]: {
+    color: "$icon-primary-hover"
+  }
 });
 
-const ArrowIcon = () => /* @__PURE__ */ React.createElement("svg", {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  fill: "currentColor",
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-testid": "submenu-arrow-icon"
-}, /* @__PURE__ */ React.createElement("path", {
-  d: "M5.29289 3.29289C5.68342 2.90237 6.31658 2.90237 6.70711 3.29289L11.4142 8L6.70711 12.7071C6.31658 13.0976 5.68342 13.0976 5.29289 12.7071C4.90237 12.3166 4.90237 11.6834 5.29289 11.2929L8.58579 8L5.29289 4.70711C4.90237 4.31658 4.90237 3.68342 5.29289 3.29289Z"
-}));
 const SubTrigger = React.forwardRef(({ children, disabled = false, ...restProps }, forwardRef) => {
   const { onSelect, ...ariaDisabledProps } = useAriaDisabled({
     onKeyDown: restProps.onKeyDown,
@@ -413,7 +499,12 @@ const SubTrigger = React.forwardRef(({ children, disabled = false, ...restProps
     ...ariaDisabledProps,
     disabled,
     ref: forwardRef
-  }, children, /* @__PURE__ */ React.createElement(RightSlot, null, /* @__PURE__ */ React.createElement(ArrowIcon, null)));
+  }, children, /* @__PURE__ */ React.createElement(RightSlot, null, /* @__PURE__ */ React.createElement(StyledIconContainer, {
+    "data-testid": process.env.NODE_ENV === "test" ? "submenu-arrow-icon" : void 0
+  }, /* @__PURE__ */ React.createElement(IconChevronRight, {
+    size: "small",
+    weight: "thin"
+  }))));
 });
 
 const StyledSubContent = styled(
@@ -431,7 +522,7 @@ const SubContent = React.forwardRef(
     hideWhenDetached = false,
     sticky = "partial",
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ React.createElement(StyledSubContent, {
+  }, forwardRef) => /* @__PURE__ */ React.createElement(SlotsProvider, null, /* @__PURE__ */ React.createElement(StyledSubContent, {
     ...restProps,
     ref: forwardRef,
     sideOffset,
@@ -440,7 +531,7 @@ const SubContent = React.forwardRef(
     loop,
     hideWhenDetached,
     sticky
-  })
+  }))
 );
 
 const StyledSub = styled(RadixDropdownMenu.Sub, {});
@@ -466,6 +557,32 @@ const Portal = (props) => /* @__PURE__ */ React.createElement(Portal$1, {
   ...props
 });
 
+const StyledIconSlot = styled(LeftSlot, {
+  paddingTop: "2px",
+  variants: {
+    customIcon: {
+      true: {
+        square: "$icon-200"
+      }
+    }
+  }
+});
+
+const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const child = React.Children.only(children);
+  const isIcon = isIconComponent(child);
+  const formattedChild = isIcon ? React.cloneElement(child, {
+    ...child.props,
+    size: "small",
+    weight: "thin"
+  }) : child;
+  return /* @__PURE__ */ React.createElement(StyledIconSlot, {
+    ref: forwardRef,
+    ...restProps,
+    customIcon: !isIcon
+  }, formattedChild);
+});
+
 const DropdownMenu = ({
   defaultOpen = false,
   direction = "ltr",
@@ -491,6 +608,7 @@ const DropdownMenu = ({
 };
 DropdownMenu.CheckboxItem = CheckboxItem;
 DropdownMenu.Content = Content;
+DropdownMenu.HotkeySlot = HotkeySlot;
 DropdownMenu.IconSlot = IconSlot;
 DropdownMenu.IllustrationSlot = IllustrationSlot;
 DropdownMenu.Item = Item;