@mezzanine-ui/react 1.3.1 → 1.4.1

package/Dropdown/Dropdown.d.ts

@@ -146,8 +146,12 @@ export interface DropdownProps extends DropdownItemSharedProps {
     sameWidth?: boolean;
     /**
      * Whether to enable floating-ui `flip` middleware.
-     * When `true`, the dropdown automatically flips to the opposite side
-     * (e.g. `bottom-start` → `top-start`) if it would overflow the viewport.
+     * When `true`, the dropdown automatically flips to the opposite side along
+     * the main axis (e.g. `bottom-start` → `top-start`) if it would overflow the
+     * viewport, and the enter transition slides from the resolved side. The flip
+     * is main-axis only (no `shift`/`crossAxis`), so a `sameWidth` menu stays
+     * horizontally aligned with its anchor — matching the `InputTriggerPopper`
+     * behavior used by the DatePicker/TimePicker menus.
      * Off by default to preserve existing placement behavior across consumers.
      * @default false
      */

package/Dropdown/Dropdown.js

@@ -180,6 +180,9 @@ function Dropdown(props) {
         }
         return 'bottom';
     }, [inputPosition, placement]);
+    // Tracks the placement actually resolved by floating-ui. Only meaningful when
+    // `flip` is enabled, where it may differ from `popoverPlacement` after a flip.
+    const [resolvedPlacement, setResolvedPlacement] = useState(popoverPlacement);
     const customWidthMiddleware = useMemo(() => {
         if (!customWidth) {
             return null;
@@ -214,8 +217,11 @@ function Dropdown(props) {
     const flipMiddleware = useMemo(() => {
         if (!flip$1)
             return null;
+        // Main-axis flip only (bottom <-> top), aligned with `InputTriggerPopper`.
+        // No `shift`/`crossAxis` so a sameWidth menu keeps its horizontal alignment
+        // with the anchor instead of being pushed sideways.
         return flip({
-            fallbackStrategy: 'bestFit',
+            fallbackAxisSideDirection: 'end',
             padding: 8,
         });
     }, [flip$1]);
@@ -244,9 +250,12 @@ function Dropdown(props) {
         if (isInline) {
             return 'bottom';
         }
-        const placementBase = popoverPlacement.split('-')[0];
+        // When flip is enabled, follow the placement resolved by floating-ui so the
+        // enter transition slides from the correct side after a flip. Otherwise keep
+        // the static placement to preserve existing behavior for non-flip consumers.
+        const placementBase = (flip$1 ? resolvedPlacement : popoverPlacement).split('-')[0];
         return placementBase === 'top' ? 'top' : 'bottom';
-    }, [isInline, popoverPlacement]);
+    }, [flip$1, isInline, popoverPlacement, resolvedPlacement]);
     const setOpen = useCallback((next) => {
         const nextValue = typeof next === 'function'
             ? next(isOpen)
@@ -554,7 +563,7 @@ function Dropdown(props) {
     }, [isInline, isOpen, setOpen]);
     return (jsxs("div", { id: id, ref: containerRef, className: cx(dropdownClasses.root, dropdownClasses.inputPosition(inputPosition)), children: [isInline && (jsxs(TransitionGroup, { component: null, children: [!isOpen && inlineTriggerElement && (createElement(Translate, { ...translateProps, from: translateFrom, key: "inline-trigger", in: true },
                         jsx("div", { children: inlineTriggerElement }))), isOpen && (createElement(Translate, { ...translateProps, from: translateFrom, key: "inline-list", in: true },
-                        jsx("div", { children: jsx(DropdownItem, { ...baseDropdownItemProps, headerContent: inlineTriggerElement }) })))] })), !isInline && (jsx(Popper, { ref: popperRef, anchor: anchorRef, className: dropdownClasses.popperWithPortal, controllerRef: popperControllerRef, open: isOpen, disablePortal: !globalPortal, options: {
+                        jsx("div", { children: jsx(DropdownItem, { ...baseDropdownItemProps, headerContent: inlineTriggerElement }) })))] })), !isInline && (jsx(Popper, { ref: popperRef, anchor: anchorRef, className: dropdownClasses.popperWithPortal, controllerRef: popperControllerRef, onPlacementChange: setResolvedPlacement, open: isOpen, disablePortal: !globalPortal, options: {
                     placement: popoverPlacement,
                     middleware: [
                         offsetMiddleware,

package/Navigation/NavigationOption.js

@@ -24,9 +24,6 @@ const NavigationOption = forwardRef((props, ref) => {
     const currentKey = id || title || href || uuid;
     const currentPath = useMemo(() => [...parentPath, currentKey], [parentPath, currentKey]);
     const currentPathKey = currentPath.join('::');
-    const Component = href && !children
-        ? ((_a = anchorComponent !== null && anchorComponent !== void 0 ? anchorComponent : optionsAnchorComponent) !== null && _a !== void 0 ? _a : 'a')
-        : 'div';
     const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
     const { badge, items } = useMemo(() => {
         let badgeComponent = null;
@@ -49,6 +46,12 @@ const NavigationOption = forwardRef((props, ref) => {
         });
         return { badge: badgeComponent, items };
     }, [flattenedChildren]);
+    // Group vs leaf is decided by the presence of real sub-options, not by
+    // raw `children` — a lone `Badge` child is rendered inline on a leaf.
+    const hasSubOptions = items.length > 0;
+    const Component = href && !hasSubOptions
+        ? ((_a = anchorComponent !== null && anchorComponent !== void 0 ? anchorComponent : optionsAnchorComponent) !== null && _a !== void 0 ? _a : 'a')
+        : 'div';
     // Default open if current path is activated
     useEffect(() => {
         if (activatedPathKey === currentPathKey ||
@@ -83,7 +86,7 @@ const NavigationOption = forwardRef((props, ref) => {
             resizeObserver.disconnect();
         };
     }, [title]);
-    return (jsxs("li", { ...rest, ref: ref, className: cx(navigationOptionClasses.host, open && navigationOptionClasses.open, !children && navigationOptionClasses.basic, (active !== null && active !== void 0 ? active : (activatedPath === null || activatedPath === void 0 ? void 0 : activatedPath[currentLevel - 1]) === currentKey) &&
+    return (jsxs("li", { ...rest, ref: ref, className: cx(navigationOptionClasses.host, open && navigationOptionClasses.open, !hasSubOptions && navigationOptionClasses.basic, (active !== null && active !== void 0 ? active : (activatedPath === null || activatedPath === void 0 ? void 0 : activatedPath[currentLevel - 1]) === currentKey) &&
             navigationOptionClasses.active, collapsed && navigationOptionClasses.collapsed, (collapsed && collapsedHiddenKeys.has(currentKey)) ||
             (!collapsed && !filter)
             ? navigationOptionClasses.hidden
@@ -95,16 +98,18 @@ const NavigationOption = forwardRef((props, ref) => {
                         if (collapsed) {
                             handleCollapseChange(false);
                         }
-                        if (!children)
+                        if (!hasSubOptions)
                             setActivatedPath(currentPath);
                     }, onKeyDown: (e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
                             e.preventDefault();
                             setOpen(!open);
-                            if (!children)
+                            if (!hasSubOptions)
                                 setActivatedPath(currentPath);
                         }
-                    }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipChildRef, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx("span", { className: navigationOptionClasses.titleWrapper, children: jsx(Fade, { ref: titleRef, in: collapsed === false || !icon, children: jsx("span", { className: navigationOptionClasses.title, children: collapsed && !icon ? Array.from(title).slice(0, 2).join('') : title }) }) }), badge, children && (jsx(Icon, { className: navigationOptionClasses.toggleIcon, icon: GroupToggleIcon }))] })) }), children && !collapsed && (jsx(Collapse, { lazyMount: true, className: cx(navigationOptionClasses.childrenWrapper), in: open, children: jsx(NavigationOptionLevelContext.Provider, { value: {
+                    }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipChildRef, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx("span", { className: navigationOptionClasses.titleWrapper, children: jsx(Fade, { ref: titleRef, in: collapsed === false || !icon, children: jsx("span", { className: navigationOptionClasses.title, children: collapsed && !icon
+                                        ? Array.from(title).slice(0, 2).join('')
+                                        : title }) }) }), badge, hasSubOptions && (jsx(Icon, { className: navigationOptionClasses.toggleIcon, icon: GroupToggleIcon }))] })) }), hasSubOptions && !collapsed && (jsx(Collapse, { lazyMount: true, className: cx(navigationOptionClasses.childrenWrapper), in: open, children: jsx(NavigationOptionLevelContext.Provider, { value: {
                         level: currentLevel,
                         path: currentPath,
                     }, children: jsx("ul", { className: navigationOptionClasses.group, children: items }) }) }))] }));

package/Popper/Popper.d.ts

@@ -23,6 +23,13 @@ export interface PopperProps extends Pick<PortalProps, 'container' | 'disablePor
      * Provide `controllerRef` if you need access to `useFloating` results.
      */
     controllerRef?: Ref<PopperController>;
+    /**
+     * Callback fired whenever the resolved placement changes, including when
+     * floating-ui middleware (e.g. `flip`) flips the popper to the opposite
+     * side. Receives the actual placement after all middleware run, which may
+     * differ from `options.placement`.
+     */
+    onPlacementChange?: (placement: PopperPlacement) => void;
     /**
      * The portal element will show if open=true
      * @default false

package/Popper/Popper.js

@@ -10,7 +10,7 @@ import Portal from '../Portal/Portal.js';
 
 const Popper = forwardRef(function Popper(props, ref) {
     var _a, _b, _c, _d;
-    const { anchor, arrow: arrow$1, children, container, controllerRef, disablePortal, open = false, options, style, ...rest } = props;
+    const { anchor, arrow: arrow$1, children, container, controllerRef, disablePortal, onPlacementChange, open = false, options, style, ...rest } = props;
     const arrowRef = useRef(null);
     const anchorEl = getElement(anchor);
     const floatingReturn = useFloating({
@@ -42,6 +42,11 @@ const Popper = forwardRef(function Popper(props, ref) {
             update();
         }
     }, [open, update]);
+    // Notify consumers of the resolved placement so they can react to
+    // middleware-driven flips (e.g. adjusting enter-transition direction).
+    useEffect(() => {
+        onPlacementChange === null || onPlacementChange === void 0 ? void 0 : onPlacementChange(floatingReturn.placement);
+    }, [floatingReturn.placement, onPlacementChange]);
     // 計算箭頭的位置和旋轉角度
     const arrowX = (_b = floatingReturn.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
     const arrowY = (_c = floatingReturn.middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.y;

package/Select/Select.d.ts

@@ -54,6 +54,14 @@ export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'in
      * The z-index of the dropdown.
      */
     dropdownZIndex?: number | string;
+    /**
+     * Whether to enable floating-ui `flip` middleware for the dropdown menu.
+     * When `true`, the menu flips from below to above the input (and back) along
+     * the main axis if it would overflow the viewport, keeping its width and
+     * horizontal alignment with the input. Forwarded to the underlying `Dropdown`.
+     * @default false
+     */
+    flip?: boolean;
     /**
      * Whether to enable portal for the dropdown.
      * @default true

package/Select/Select.js

@@ -45,7 +45,7 @@ import cx from 'clsx';
  */
 const Select = forwardRef(function Select(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, loading = false, loadingPosition = 'bottom', loadingText, menuMaxHeight, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onLeaveBottom, onReachBottom, onScroll, options: optionsProp, placeholder = '', prefix, readOnly = false, renderValue, required = requiredFromFormControl || false, overflowStrategy, size, suffixActionIcon, type = 'default', value: valueProp, dropdownZIndex, globalPortal = true, } = props;
+    const { className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, loading = false, loadingPosition = 'bottom', loadingText, menuMaxHeight, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onLeaveBottom, onReachBottom, onScroll, options: optionsProp, placeholder = '', prefix, readOnly = false, renderValue, required = requiredFromFormControl || false, overflowStrategy, size, suffixActionIcon, type = 'default', value: valueProp, dropdownZIndex, flip = false, globalPortal = true, } = props;
     const dropdownStatus = loading
         ? 'loading'
         : undefined;
@@ -256,7 +256,7 @@ const Select = forwardRef(function Select(props, ref) {
         onChange,
         value,
     }), [onChange, value]);
-    return (jsx(SelectControlContext.Provider, { value: context, children: jsx("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth, mode && selectClasses.hostMode(mode)), children: jsx(Dropdown, { disabled: readOnly || disabled, globalPortal: globalPortal, loadingPosition: loadingPosition, loadingText: loadingText, maxHeight: menuMaxHeight, mode: mode, onLeaveBottom: onLeaveBottom, onReachBottom: onReachBottom, onScroll: onScroll, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: readOnly ? false : open, options: options, sameWidth: true, status: dropdownStatus, type: dropdownType, value: dropdownValue, zIndex: dropdownZIndex, children: jsx(SelectTrigger, { ref: composedRef, active: !readOnly && open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: readOnly, ...(mode === 'single' && renderValue ? { renderValue } : {}), required: required, inputProps: resolvedInputProps, overflowStrategy: overflowStrategy, size: size, suffixActionIcon: suffixActionIcon, value: value === null ? undefined : value, placeholder: getPlaceholder() }) }) }) }));
+    return (jsx(SelectControlContext.Provider, { value: context, children: jsx("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth, mode && selectClasses.hostMode(mode)), children: jsx(Dropdown, { disabled: readOnly || disabled, flip: flip, globalPortal: globalPortal, loadingPosition: loadingPosition, loadingText: loadingText, maxHeight: menuMaxHeight, mode: mode, onLeaveBottom: onLeaveBottom, onReachBottom: onReachBottom, onScroll: onScroll, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: readOnly ? false : open, options: options, sameWidth: true, status: dropdownStatus, type: dropdownType, value: dropdownValue, zIndex: dropdownZIndex, children: jsx(SelectTrigger, { ref: composedRef, active: !readOnly && open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: readOnly, ...(mode === 'single' && renderValue ? { renderValue } : {}), required: required, inputProps: resolvedInputProps, overflowStrategy: overflowStrategy, size: size, suffixActionIcon: suffixActionIcon, value: value === null ? undefined : value, placeholder: getPlaceholder() }) }) }) }));
 });
 
 export { Select as default };

package/Select/SelectTrigger.js

@@ -11,7 +11,7 @@ import cx from 'clsx';
 const isMultipleSelection = (props) => props.mode === 'multiple';
 function SelectTriggerComponent(props) {
     var _a, _b, _c;
-    const { active, className, clearable: clearableProp = false, disabled, forceHideSuffixActionIcon, inputProps, innerRef, inputRef, isForceClearable = false, mode = 'single', onTagClose, overflowStrategy = 'counter', placeholder, readOnly, required, searchText, size = 'main', showTextInputAfterTags = false, suffixAction, suffixActionIcon: suffixActionIconProp, type = 'default', onClick, ...restTextFieldProps } = props;
+    const { active, className, clearable: clearableProp = false, disabled, error, forceHideSuffixActionIcon, inputProps, innerRef, inputRef, isForceClearable = false, mode = 'single', onTagClose, overflowStrategy = 'counter', placeholder, readOnly, required, searchText, size = 'main', showTextInputAfterTags = false, suffixAction, suffixActionIcon: suffixActionIconProp, type = 'default', onClick, ...restTextFieldProps } = props;
     const renderValueProp = 'renderValue' in props ? props.renderValue : undefined;
     // Exclude renderValue to avoid leaking unknown props to DOM.
     const sanitizedTextFieldProps = (() => {
@@ -60,9 +60,7 @@ function SelectTriggerComponent(props) {
     return (jsxs(TextField, { ref: innerRef, ...interactiveProps, ...sanitizedTextFieldProps, onClick: onClick, active: active, className: cx(selectClasses.trigger, selectClasses.triggerMode(mode), selectClasses.triggerSelected(Array.isArray(props.value) ? (_a = props.value) === null || _a === void 0 ? void 0 : _a.length : props.value), {
             [selectClasses.triggerReadOnly]: readOnly,
             [selectClasses.triggerDisabled]: disabled,
-        }, className), error: type === 'error', clearable: shouldEnableClearable, forceShowClearable: shouldEnableClearable, size: size, suffix: forceHideSuffixActionIcon ? undefined : suffixActionIcon, children: [jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-haspopup": "listbox", autoComplete: "off", className: cx(selectClasses.triggerInput, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), disabled: disabled, placeholder: placeholder, readOnly: (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly) !== null && _b !== void 0 ? _b : true, required: required, type: "text", value: renderValue() }), isMultipleSelection(props) && ((_c = props.value) === null || _c === void 0 ? void 0 : _c.length)
-                ? (jsx(SelectTriggerTags, { disabled: disabled, overflowStrategy: overflowStrategy, inputProps: inputProps, inputRef: inputRef, onTagClose: onTagClose, readOnly: readOnly, required: required, searchText: searchText, size: size, showTextInputAfterTags: showTextInputAfterTags, value: props.value }))
-                : null] }));
+        }, className), error: error || type === 'error', clearable: shouldEnableClearable, forceShowClearable: shouldEnableClearable, size: size, suffix: forceHideSuffixActionIcon ? undefined : suffixActionIcon, children: [jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-haspopup": "listbox", autoComplete: "off", className: cx(selectClasses.triggerInput, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), disabled: disabled, placeholder: placeholder, readOnly: (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly) !== null && _b !== void 0 ? _b : true, required: required, type: "text", value: renderValue() }), isMultipleSelection(props) && ((_c = props.value) === null || _c === void 0 ? void 0 : _c.length) ? (jsx(SelectTriggerTags, { disabled: disabled, overflowStrategy: overflowStrategy, inputProps: inputProps, inputRef: inputRef, onTagClose: onTagClose, readOnly: readOnly, required: required, searchText: searchText, size: size, showTextInputAfterTags: showTextInputAfterTags, value: props.value })) : null] }));
 }
 const SelectTrigger = forwardRef((props, ref) => {
     if (props.mode === 'multiple') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {