@majoo-ui/react 2.1.3 → 2.2.1

package/components/dropdownMenu/DropdownMenu.esm.js

@@ -47,9 +47,7 @@ const slideLeftAndFade = keyframes({
     transform: 'translateX(0)'
   }
 });
-const StyledContent = styled(DropdownMenuPrimitive.Content, {
-  width: 143,
-  maxWidth: 243,
+const contentStyles = {
   backgroundColor: '$bgWhite',
   borderRadius: 4,
   padding: 8,
@@ -75,6 +73,19 @@ const StyledContent = styled(DropdownMenuPrimitive.Content, {
       }
     }
   }
+};
+const StyledContent = styled(DropdownMenuPrimitive.Content, {
+  width: 143,
+  maxWidth: 243,
+  ...contentStyles
+});
+
+// Submenus size to their own content instead of inheriting the trigger-sized width above.
+const StyledSubContent = styled(DropdownMenuPrimitive.SubContent, {
+  width: 'max-content',
+  minWidth: 180,
+  maxWidth: 320,
+  ...contentStyles
 });
 const itemStyles = {
   all: 'unset',
@@ -97,24 +108,105 @@ const itemStyles = {
   '&:active': {
     backgroundColor: '$gray150'
   },
-  '&:focus': {
+  // Radix moves focus to the highlighted item, but data-highlighted is the attribute it
+  // guarantees — keep both so hover and keyboard land on the same style.
+  '&:focus, &[data-highlighted]': {
     backgroundColor: '$gray100'
   }
 };
+const selectedItemStyles = {
+  backgroundColor: '$bgSelectedLight',
+  color: '$textBrand',
+  fontWeight: 600
+};
+
+// Space reserved for the indicator drawn in the item's left gutter.
+const INDICATOR_GUTTER = 28;
 const StyledItem = styled(DropdownMenuPrimitive.Item, {
-  ...itemStyles
+  ...itemStyles,
+  variants: {
+    selected: {
+      true: selectedItemStyles
+    }
+  }
 });
 StyledItem.propTypes = {
   asChild: PropTypes.bool,
   disabled: PropTypes.bool,
-  onSelect: PropTypes.func
+  onSelect: PropTypes.func,
+  selected: PropTypes.bool
 };
 const StyledCheckboxItem = styled(DropdownMenuPrimitive.CheckboxItem, {
-  ...itemStyles
+  ...itemStyles,
+  paddingLeft: INDICATOR_GUTTER,
+  '&[data-state="checked"]': {
+    color: '$textPrimary',
+    fontWeight: 600
+  }
 });
+
+// The ring and dot are drawn here rather than in ItemIndicator because Radix only mounts
+// ItemIndicator while checked — the unchecked ring has to come from the item itself.
 const StyledRadioItem = styled(DropdownMenuPrimitive.RadioItem, {
-  ...itemStyles
+  ...itemStyles,
+  paddingLeft: INDICATOR_GUTTER,
+  '&::before': {
+    content: '',
+    position: 'absolute',
+    left: 0,
+    top: '50%',
+    boxSizing: 'border-box',
+    width: 18,
+    height: 18,
+    borderRadius: '50%',
+    border: '1.5px solid $colors$formDefault',
+    transform: 'translateY(-50%)',
+    transition: 'border-color 120ms ease'
+  },
+  '&::after': {
+    content: '',
+    position: 'absolute',
+    left: 5,
+    top: '50%',
+    width: 8,
+    height: 8,
+    borderRadius: '50%',
+    backgroundColor: '$iconBrand',
+    transform: 'translateY(-50%) scale(0)',
+    transition: 'transform 120ms ease'
+  },
+  '&[data-state="checked"]': {
+    color: '$textPrimary',
+    fontWeight: 600,
+    '&::before': {
+      borderColor: '$formActive'
+    },
+    '&::after': {
+      transform: 'translateY(-50%) scale(1)'
+    }
+  },
+  '&[data-disabled]': {
+    '&::before': {
+      borderColor: '$formDisable'
+    },
+    '&::after': {
+      backgroundColor: '$iconDisable'
+    }
+  }
+});
+const StyledSubTrigger = styled(DropdownMenuPrimitive.SubTrigger, {
+  ...itemStyles,
+  '&[data-state="open"]': selectedItemStyles,
+  variants: {
+    selected: {
+      true: selectedItemStyles
+    }
+  }
 });
+StyledSubTrigger.propTypes = {
+  disabled: PropTypes.bool,
+  selected: PropTypes.bool
+};
 const StyledLabel = styled(DropdownMenuPrimitive.Label, {
   padding: '8px 0',
   fontSize: 12,
@@ -129,7 +221,10 @@ const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
 const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
   position: 'absolute',
   left: 0,
-  width: 25,
+  top: '50%',
+  width: 18,
+  height: 18,
+  transform: 'translateY(-50%)',
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center'
@@ -159,7 +254,7 @@ DropdownMenuContext.propTypes = {
   align: PropTypes.oneOf(['start', 'center', 'end'])
 };
 const DropdownMenuContentContext = ({
-  theme,
+  theme = 'default',
   ...props
 }) => {
   const {
@@ -191,21 +286,43 @@ DropdownMenuContentContext.propTypes = {
   alignOffset: PropTypes.number,
   asChild: PropTypes.bool
 };
-const DropdownTrigger = /*#__PURE__*/React__default.forwardRef(({
+
+// Radix positions submenus itself, so this only carries the theme class across the portal.
+const DropdownMenuSubContentContext = ({
+  theme = 'default',
   children,
   ...props
+}) => {
+  const themeProvider = useThemeProvider(theme);
+  return /*#__PURE__*/jsx(StyledSubContent, {
+    className: `dropdown-content ${themeProvider?.theme || ''}`,
+    ...props,
+    children: children
+  });
+};
+DropdownMenuSubContentContext.propTypes = {
+  sideOffset: PropTypes.number,
+  alignOffset: PropTypes.number,
+  asChild: PropTypes.bool
+};
+
+/**
+ * @type {React.ForwardRefExoticComponent<
+ *   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger> & React.RefAttributes<HTMLButtonElement>
+ * >}
+ */
+const DropdownTrigger = /*#__PURE__*/React__default.forwardRef(({
+  children,
+  asChild,
+  ...rest
 }, ref) => {
-  const {
-    asChild,
-    ...rest
-  } = props;
   return /*#__PURE__*/jsx(DropdownMenuPrimitive.Trigger, {
     ...rest,
     asChild: asChild,
     ref: ref,
-    children: children && /*#__PURE__*/React__default.cloneElement(children, {
+    children: /*#__PURE__*/React__default.isValidElement(children) ? /*#__PURE__*/React__default.cloneElement(children, {
       ...rest
-    })
+    }) : children
   });
 });
 DropdownTrigger.propTypes = {
@@ -213,11 +330,20 @@ DropdownTrigger.propTypes = {
 };
 const RightSlot = styled('div', {
   marginLeft: 'auto',
-  ':focus > &': {
-    color: 'white'
-  },
+  paddingLeft: 16,
+  display: 'inline-flex',
+  alignItems: 'center',
   '[data-disabled] &': {
     color: '$gray400'
+  },
+  variants: {
+    // Secondary text (a hint or shortcut) rather than an icon.
+    muted: {
+      true: {
+        color: '$textDisable',
+        fontSize: 12
+      }
+    }
   }
 });
 const StyledDropdown = styled(Button, {
@@ -261,7 +387,9 @@ const DropdownMenuCheckboxItem = StyledCheckboxItem;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 const DropdownMenuRadioItem = StyledRadioItem;
 const DropdownMenuItemIndicator = StyledItemIndicator;
-// export const DropdownMenuTriggerItem = StyledTriggerItem;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuSubTrigger = StyledSubTrigger;
+const DropdownMenuSubContent = DropdownMenuSubContentContext;
 const DropdownMenuLabel = StyledLabel;
 const DropdownMenuSeparator = StyledSeparator;
 const DropdownMenuArrow = StyledArrow;
@@ -273,9 +401,11 @@ DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';
 DropdownMenuRadioGroup.displayName = 'DropdownMenuRadioGroup';
 DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';
 DropdownMenuItemIndicator.displayName = 'DropdownMenuItemIndicator';
-// DropdownMenuTriggerItem.displayName = 'DropdownMenuTriggerItem';
+DropdownMenuSub.displayName = 'DropdownMenuSub';
+DropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';
+DropdownMenuSubContent.displayName = 'DropdownMenuSubContent';
 DropdownMenuLabel.displayName = 'DropdownMenuLabel';
 DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
 DropdownMenuArrow.displayName = 'DropdownMenuArrow';
 
-export { ButtonDropdown, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, RightSlot, StyledDropdown };
+export { ButtonDropdown, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, RightSlot, StyledDropdown };

package/components/form/components/InputSelect/InputSelect.esm.js

@@ -219,23 +219,17 @@ const OptionWrapper = styled('div', {
   backgroundColor: '$bgWhite',
   boxShadow: '0px 2px 12px #00000014',
   width: '100%',
-  maxHeight: '300px',
-  position: 'absolute',
-  float: 'left',
-  top: '100%',
-  left: '0',
+  // In-flow on purpose: Popover's flip/shift/size measure the floating element,
+  // which is only as tall as this wrapper. An absolute wrapper measures 0px and
+  // the dropdown never flips. The cap shrinks to the space Popover reports.
+  maxHeight: 'min(300px, var(--majoo-popover-available-height, 300px))',
+  position: 'relative',
   variants: {
+    // Kept for API compatibility only — Popover (floating-ui) owns placement now,
+    // treating it as a preference that flips when the preferred side lacks room.
     placement: {
-      bottom: {
-        top: '100%',
-        left: '0',
-        transform: 'none'
-      },
-      top: {
-        top: '0',
-        left: '0',
-        transform: 'translate(0, -100%)'
-      }
+      bottom: {},
+      top: {}
     },
     withFooter: {
       true: {
@@ -683,13 +677,8 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
                     position: 'absolute',
                     inset: 0,
                     zIndex: '$tooltip',
-                    top: item.length > 0 ? '0px' : placement === 'top' ? '-20px' : '20px',
-                    // bottom: '80px',
-                    width: '100%',
-                    height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
                     backgroundColor: '$bgWhite',
-                    opacity: 0.8,
-                    transform: placement === 'top' ? 'translate(0, -100%)' : 'none'
+                    opacity: 0.8
                   },
                   children: jsx(Text, {
                     variant: "caption",
@@ -699,9 +688,10 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
                   condition: renderFooter && typeof renderFooter === 'function',
                   wrapper: child => jsxs(Box, {
                     css: {
-                      position: 'absolute',
-                      float: 'left',
-                      display: isOpen ? 'block' : 'none',
+                      position: 'relative',
+                      display: isOpen ? 'flex' : 'none',
+                      flexDirection: 'column',
+                      maxHeight: 'var(--majoo-popover-available-height, calc(100vh - 160px))',
                       zIndex: '$popover',
                       width: '100%'
                     },
@@ -714,11 +704,16 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
                   }, {
                     suppressRefError: true
                   }), {
-                    css: Object.assign({
+                    css: Object.assign(Object.assign({
                       display: isOpen ? 'block' : 'none',
                       zIndex: '$popover',
-                      pointerEvents: 'auto'
-                    }, optionCss),
+                      pointerEvents: 'auto',
+                      minHeight: isLoading ? '40px' : undefined
+                    }, renderFooter && typeof renderFooter === 'function' ? {
+                      flex: 1,
+                      minHeight: 0,
+                      maxHeight: 'none'
+                    } : {}), optionCss),
                     withFooter: renderFooter && typeof renderFooter === 'function',
                     placement: placement,
                     children: [!search && embedSearch && isOpen && jsx(SelectContainer, {