@mezzanine-ui/react 1.0.0-beta.5 → 1.0.0-beta.6

package/AutoComplete/AutoComplete.d.ts

@@ -148,6 +148,11 @@ export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active'
      * The z-index of the dropdown.
      */
     dropdownZIndex?: number | string;
+    /**
+     * Whether to enable portal for the dropdown.
+     * @default true
+     */
+    globalPortal?: boolean;
     /**
      * Callback fired when the dropdown list reaches the bottom.
      * Only fires when `menuMaxHeight` is set and the list is scrollable.

package/AutoComplete/AutoComplete.js

@@ -46,7 +46,7 @@ function isOptionSelected(option, value, isMultiple) {
  */
 const AutoComplete = forwardRef(function AutoComplete(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { addable = false, asyncData = false, className, createSeparators = [',', '+', '\n'], defaultValue, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, emptyText, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, id, keepSearchTextOnBlur = false, inputPosition = 'outside', inputProps, inputRef, loading = false, loadingText, menuMaxHeight, mode = 'single', name, onClear: onClearProp, onChange: onChangeProp, onInsert, onSearch, onSearchTextChange, onVisibilityChange, open: openProp, options: optionsProp, placeholder = '', prefix, required = requiredFromFormControl || false, searchDebounceTime = 300, searchTextControlRef, size, trimOnCreate = true, value: valueProp, createActionText, createActionTextTemplate = '建立 "{text}"', dropdownZIndex, onReachBottom, onLeaveBottom, } = props;
+    const { addable = false, asyncData = false, className, createSeparators = [',', '+', '\n'], defaultValue, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, emptyText, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, id, keepSearchTextOnBlur = false, inputPosition = 'outside', inputProps, inputRef, loading = false, loadingText, menuMaxHeight, mode = 'single', name, onClear: onClearProp, onChange: onChangeProp, onInsert, onSearch, onSearchTextChange, onVisibilityChange, open: openProp, options: optionsProp, placeholder = '', prefix, required = requiredFromFormControl || false, searchDebounceTime = 300, searchTextControlRef, size, trimOnCreate = true, value: valueProp, createActionText, createActionTextTemplate = '建立 "{text}"', dropdownZIndex, globalPortal = true, onReachBottom, onLeaveBottom, } = props;
     const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
     const isMultiple = mode === 'multiple';
     const isSingle = !isMultiple;
@@ -424,13 +424,14 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
     return (jsx(SelectControlContext.Provider, { value: context, children: jsx("div", { ref: nodeRef, className: cx(autocompleteClasses.host, {
                 [autocompleteClasses.hostFullWidth]: fullWidth,
                 [autocompleteClasses.hostInsideClosed]: inputPosition === 'inside' && !open,
+                [autocompleteClasses.hostMode(mode)]: mode,
             }), children: jsx(Dropdown, { actionText: shouldShowCreateAction
                     ? (createActionText
                         ? createActionText(insertText)
                         : createActionTextTemplate.replace('{text}', insertText))
                     : undefined, activeIndex: activeIndex, disabled: isInputDisabled, emptyText: emptyText, followText: searchText, inputPosition: inputPosition, isMatchInputValue: true, listboxId: menuId, loadingText: loadingText, maxHeight: menuMaxHeight, mode: mode, onActionCustom: shouldShowCreateAction
                     ? handleActionCustom
-                    : undefined, onItemHover: setActiveIndex, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: open, options: dropdownOptionsForRender, placement: "bottom", sameWidth: true, showDropdownActions: shouldShowCreateAction, showActionShowTopBar: shouldShowCreateAction, status: dropdownStatus, type: "default", value: dropdownValue, zIndex: dropdownZIndex, onReachBottom: onReachBottom, onLeaveBottom: onLeaveBottom, children: jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, isForceClearable: true, disabled: isInputDisabled, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: wrappedOnChange, onClear: handleClear, placeholder: getPlaceholder(), prefix: prefix, readOnly: false, required: required, type: error ? 'error' : 'default', inputProps: {
+                    : undefined, onItemHover: setActiveIndex, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: open, options: dropdownOptionsForRender, placement: "bottom", sameWidth: true, showDropdownActions: shouldShowCreateAction, showActionShowTopBar: shouldShowCreateAction, status: dropdownStatus, type: "default", value: dropdownValue, zIndex: dropdownZIndex, globalPortal: globalPortal, onReachBottom: onReachBottom, onLeaveBottom: onLeaveBottom, children: jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, isForceClearable: true, disabled: isInputDisabled, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: wrappedOnChange, onClear: handleClear, placeholder: getPlaceholder(), prefix: prefix, readOnly: false, required: required, type: error ? 'error' : 'default', inputProps: {
                         ...resolvedInputProps,
                         onClick: (e) => {
                             var _a;

package/Breadcrumb/BreadcrumbDropdown.js

@@ -16,7 +16,7 @@ const BreadcrumbDropdown = forwardRef(function BreadcrumbDropdown(props, ref) {
         setOpen(!open);
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (jsx("span", { className: cx(breadcrumbItemClasses.host, className), ref: ref, children: jsx(Dropdown, { onClose: () => setOpen(false), onOpen: () => handleClick(), options: options, placement: "bottom-start", ...rest, children: jsxs("button", { className: cx(breadcrumbItemClasses.trigger, open && breadcrumbItemClasses.expanded, current && breadcrumbItemClasses.current), type: "button", children: [name && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: name })), jsx(Rotate, { in: open, children: jsx(Icon, { className: breadcrumbItemClasses.icon, icon: ChevronDownIcon, size: 14 }) })] }) }) }));
+    return (jsx("span", { className: cx(breadcrumbItemClasses.host, open && breadcrumbItemClasses.expanded, current && breadcrumbItemClasses.current, className), ref: ref, children: jsx(Dropdown, { onClose: () => setOpen(false), onOpen: () => handleClick(), options: options, placement: "bottom-start", ...rest, children: jsxs("button", { className: breadcrumbItemClasses.trigger, type: "button", children: [name && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: name })), jsx(Rotate, { in: open, children: jsx(Icon, { className: breadcrumbItemClasses.icon, icon: ChevronDownIcon, size: 14 }) })] }) }) }));
 });
 
 export { BreadcrumbDropdown as default };

package/Breadcrumb/BreadcrumbItem.js

@@ -21,7 +21,7 @@ const BreadcrumbItem = forwardRef(function BreadcrumbItem(props, ref) {
     const handleClick = () => {
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (jsx("span", { ...rest, className: cx(breadcrumbItemClasses.host, className), ref: ref, children: jsx(TriggerComponent, { className: cx(breadcrumbItemClasses.trigger, current && breadcrumbItemClasses.current), href: TriggerComponent === 'a' ? href : undefined, onClick: TriggerComponent === 'a' ? handleClick : undefined, rel: TriggerComponent === 'a' ? rel : undefined, target: TriggerComponent === 'a' ? target : undefined, children: name && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: name })) }) }));
+    return (jsx("span", { ...rest, className: cx(breadcrumbItemClasses.host, current && breadcrumbItemClasses.current, className), ref: ref, children: jsx(TriggerComponent, { className: breadcrumbItemClasses.trigger, href: TriggerComponent === 'a' ? href : undefined, onClick: TriggerComponent === 'a' ? handleClick : undefined, rel: TriggerComponent === 'a' ? rel : undefined, target: TriggerComponent === 'a' ? target : undefined, children: name && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: name })) }) }));
 });
 
 export { BreadcrumbItem as default };

package/Breadcrumb/BreadcrumbOverflowMenuItem.js

@@ -21,7 +21,7 @@ const BreadcrumbOverflowMenuItem = forwardRef(function BreadcrumbOverflowMenuIte
     const handleClick = () => {
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (jsx("span", { ...rest, className: cx(breadcrumbOverflowMenuItemClasses.host, className), ref: ref, children: jsx(TriggerComponent, { className: cx(breadcrumbOverflowMenuItemClasses.trigger), href: TriggerComponent === 'a' ? href : undefined, onClick: TriggerComponent === 'a' ? handleClick : undefined, rel: TriggerComponent === 'a' ? rel : undefined, target: TriggerComponent === 'a' ? target : undefined, children: jsx(Typography, { variant: 'label-primary', children: name }) }) }));
+    return (jsx("span", { ...rest, className: cx(breadcrumbOverflowMenuItemClasses.host, className), ref: ref, children: jsx(TriggerComponent, { className: breadcrumbOverflowMenuItemClasses.trigger, href: TriggerComponent === 'a' ? href : undefined, onClick: TriggerComponent === 'a' ? handleClick : undefined, rel: TriggerComponent === 'a' ? rel : undefined, target: TriggerComponent === 'a' ? target : undefined, children: jsx(Typography, { variant: 'label-primary', children: name }) }) }));
 });
 
 export { BreadcrumbOverflowMenuItem as default };

package/DateTimePicker/DateTimePicker.js

@@ -103,7 +103,7 @@ const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
             onChangeProp(combined);
         }
     }, [combineDateTime, onChangeProp]);
-    // Handle left complete - auto focus right
+    // Handle left complete
     const onLeftComplete = useCallback(() => {
         if (timeValue) {
             onClose();
@@ -115,10 +115,14 @@ const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
             }, 0);
         }
     }, [timeValue, onClose]);
-    // Handle left complete - auto focus right
+    // Handle right complete
     const onRightComplete = useCallback(() => {
         if (dateValue) {
-            onClose();
+            /** Don't close the time panel */
+            setTimeout(() => {
+                var _a;
+                (_a = inputRightRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
         }
         else {
             setTimeout(() => {
@@ -126,7 +130,7 @@ const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
                 (_a = inputLeftRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }, 0);
         }
-    }, [dateValue, onClose]);
+    }, [dateValue]);
     // Handle date change from input
     const onChangeLeft = useCallback((isoValue) => {
         if (!isoValue) {

package/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -0,0 +1,34 @@
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { DateTimePickerProps } from '../DateTimePicker';
+export type DateTimeRangePickerValue = [
+    DateType | undefined,
+    DateType | undefined
+];
+export interface DateTimeRangePickerProps extends Omit<DateTimePickerProps, 'defaultValue' | 'onChange' | 'value' | 'ref' | 'prefix'> {
+    /**
+     * CSS class name for the host element.
+     */
+    className?: string;
+    /**
+     * The direction of the two date-time pickers.
+     * @default 'row'
+     */
+    direction?: 'row' | 'column';
+    /**
+     * Change handler for the range value.
+     * Called when either from or to value changes.
+     */
+    onChange?: (value: DateTimeRangePickerValue) => void;
+    /**
+     * Current value of date-time range picker.
+     * Array of [from, to] where each can be a DateType or undefined.
+     */
+    value?: DateTimeRangePickerValue;
+}
+/**
+ * The react component for `mezzanine` date-time range picker.
+ * This component combines two DateTimePicker components for selecting a date-time range.
+ * Notice that any component related to date-time picker should be used along with `CalendarContext`.
+ */
+declare const DateTimeRangePicker: import("react").ForwardRefExoticComponent<DateTimeRangePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DateTimeRangePicker;

package/DateTimeRangePicker/DateTimeRangePicker.js

@@ -0,0 +1,118 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { dateTimeRangePickerClasses } from '@mezzanine-ui/core/date-time-range-picker';
+import { LongTailArrowDownIcon, LongTailArrowRightIcon } from '@mezzanine-ui/icons';
+import { forwardRef, useMemo, useCallback } from 'react';
+import DateTimePicker from '../DateTimePicker/DateTimePicker.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` date-time range picker.
+ * This component combines two DateTimePicker components for selecting a date-time range.
+ * Notice that any component related to date-time picker should be used along with `CalendarContext`.
+ */
+const DateTimeRangePicker = forwardRef(function DateTimeRangePicker(props, ref) {
+    const { className, direction = 'row', onChange: onChangeProp, value: valueProp, 
+    // Shared DateTimePicker props
+    calendarProps, calendarRef, clearable, disabled, disabledMonthSwitch, disabledYearSwitch, disableOnDoubleNext, disableOnDoublePrev, disableOnNext, disableOnPrev, displayMonthLocale, error, fadeProps, formatDate, formatTime, fullWidth, hideHour, hideMinute, hideSecond, hourStep, isDateDisabled, isHalfYearDisabled, isMonthDisabled, isQuarterDisabled, isWeekDisabled, isYearDisabled, minuteStep, mode, onClear, onPanelToggle, placeholderLeft, placeholderRight, popperProps, popperPropsTime, readOnly, referenceDate, required, secondStep, size, } = props;
+    const fromValue = useMemo(() => valueProp === null || valueProp === void 0 ? void 0 : valueProp[0], [valueProp]);
+    const toValue = useMemo(() => valueProp === null || valueProp === void 0 ? void 0 : valueProp[1], [valueProp]);
+    // Handler for "from" DateTimePicker change
+    const handleFromChange = useCallback((newFrom) => {
+        if (!onChangeProp)
+            return;
+        onChangeProp([newFrom, toValue]);
+    }, [onChangeProp, toValue]);
+    // Handler for "to" DateTimePicker change
+    const handleToChange = useCallback((newTo) => {
+        if (!onChangeProp)
+            return;
+        onChangeProp([fromValue, newTo]);
+    }, [onChangeProp, fromValue]);
+    const sharedProps = useMemo(() => ({
+        calendarProps,
+        calendarRef,
+        clearable,
+        disabled,
+        disabledMonthSwitch,
+        disabledYearSwitch,
+        disableOnDoubleNext,
+        disableOnDoublePrev,
+        disableOnNext,
+        disableOnPrev,
+        displayMonthLocale,
+        error,
+        fadeProps,
+        formatDate,
+        formatTime,
+        fullWidth,
+        hideHour,
+        hideMinute,
+        hideSecond,
+        hourStep,
+        isDateDisabled,
+        isHalfYearDisabled,
+        isMonthDisabled,
+        isQuarterDisabled,
+        isWeekDisabled,
+        isYearDisabled,
+        minuteStep,
+        mode,
+        onClear,
+        onPanelToggle,
+        placeholderLeft,
+        placeholderRight,
+        popperProps,
+        popperPropsTime,
+        readOnly,
+        referenceDate,
+        required,
+        secondStep,
+        size,
+    }), [
+        calendarProps,
+        calendarRef,
+        clearable,
+        disabled,
+        disabledMonthSwitch,
+        disabledYearSwitch,
+        disableOnDoubleNext,
+        disableOnDoublePrev,
+        disableOnNext,
+        disableOnPrev,
+        displayMonthLocale,
+        error,
+        fadeProps,
+        formatDate,
+        formatTime,
+        fullWidth,
+        hideHour,
+        hideMinute,
+        hideSecond,
+        hourStep,
+        isDateDisabled,
+        isHalfYearDisabled,
+        isMonthDisabled,
+        isQuarterDisabled,
+        isWeekDisabled,
+        isYearDisabled,
+        minuteStep,
+        mode,
+        onClear,
+        onPanelToggle,
+        placeholderLeft,
+        placeholderRight,
+        popperProps,
+        popperPropsTime,
+        readOnly,
+        referenceDate,
+        required,
+        secondStep,
+        size,
+    ]);
+    const ArrowIcon = direction === 'column' ? LongTailArrowDownIcon : LongTailArrowRightIcon;
+    return (jsxs("div", { ref: ref, className: cx(dateTimeRangePickerClasses.host, direction === 'column' ? dateTimeRangePickerClasses.column : dateTimeRangePickerClasses.row, className), children: [jsx(DateTimePicker, { ...sharedProps, onChange: handleFromChange, value: fromValue }), jsx(Icon, { className: dateTimeRangePickerClasses.arrow, icon: ArrowIcon }), jsx(DateTimePicker, { ...sharedProps, onChange: handleToChange, value: toValue })] }));
+});
+
+export { DateTimeRangePicker as default };

package/DateTimeRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateTimeRangePicker } from './DateTimeRangePicker';
+export type { DateTimeRangePickerProps, DateTimeRangePickerValue, } from './DateTimeRangePicker';

package/DateTimeRangePicker/index.js

@@ -0,0 +1 @@
+export { default as DateTimeRangePicker } from './DateTimeRangePicker.js';

package/Drawer/Drawer.d.ts

@@ -1,11 +1,39 @@
+import React, { type ChangeEventHandler } from 'react';
 import { DrawerSize } from '@mezzanine-ui/core/drawer';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { ButtonIconType, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { BackdropProps } from '../Backdrop';
 export interface DrawerProps extends NativeElementPropsWithoutKeyAndRef<'div'>, Pick<BackdropProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'onBackdropClick' | 'onClose' | 'open'> {
+    /**
+     * Disabled state for the ghost action button.
+     */
+    bottomGhostActionDisabled?: boolean;
+    /**
+     * Icon for the ghost action button.
+     */
+    bottomGhostActionIcon?: IconDefinition;
+    /**
+     * Icon type for the ghost action button.
+     */
+    bottomGhostActionIconType?: ButtonIconType;
+    /**
+     * Loading state for the ghost action button.
+     */
+    bottomGhostActionLoading?: boolean;
+    /**
+     * Size for the ghost action button.
+     */
+    bottomGhostActionSize?: ButtonSize;
     /**
      * Text for the ghost action button in the bottom action area.
      */
     bottomGhostActionText?: string;
+    /**
+     * Variant for the ghost action button.
+     * @default 'base-ghost'
+     */
+    bottomGhostActionVariant?: ButtonVariant;
     /**
      * Click handler for the ghost action button in the bottom action area.
      */
@@ -18,14 +46,110 @@ export interface DrawerProps extends NativeElementPropsWithoutKeyAndRef<'div'>,
      * Click handler for the secondary action button in the bottom action area.
      */
     bottomOnSecondaryActionClick?: VoidFunction;
+    /**
+     * Disabled state for the primary action button.
+     */
+    bottomPrimaryActionDisabled?: boolean;
+    /**
+     * Icon for the primary action button.
+     */
+    bottomPrimaryActionIcon?: IconDefinition;
+    /**
+     * Icon type for the primary action button.
+     */
+    bottomPrimaryActionIconType?: ButtonIconType;
+    /**
+     * Loading state for the primary action button.
+     */
+    bottomPrimaryActionLoading?: boolean;
+    /**
+     * Size for the primary action button.
+     */
+    bottomPrimaryActionSize?: ButtonSize;
     /**
      * Text for the primary action button in the bottom action area.
      */
     bottomPrimaryActionText?: string;
+    /**
+     * Variant for the primary action button.
+     * @default 'base-primary'
+     */
+    bottomPrimaryActionVariant?: ButtonVariant;
+    /**
+     * Disabled state for the secondary action button.
+     */
+    bottomSecondaryActionDisabled?: boolean;
+    /**
+     * Icon for the secondary action button.
+     */
+    bottomSecondaryActionIcon?: IconDefinition;
+    /**
+     * Icon type for the secondary action button.
+     */
+    bottomSecondaryActionIconType?: ButtonIconType;
+    /**
+     * Loading state for the secondary action button.
+     */
+    bottomSecondaryActionLoading?: boolean;
+    /**
+     * Size for the secondary action button.
+     */
+    bottomSecondaryActionSize?: ButtonSize;
     /**
      * Text for the secondary action button in the bottom action area.
      */
     bottomSecondaryActionText?: string;
+    /**
+     * Variant for the secondary action button.
+     * @default 'base-secondary'
+     */
+    bottomSecondaryActionVariant?: ButtonVariant;
+    /**
+     * The label of the all radio in control bar.
+     */
+    controlBarAllRadioLabel?: string;
+    /**
+     * The label of the custom button in control bar.
+     */
+    controlBarCustomButtonLabel?: string;
+    /**
+     * The default value of the radio group in control bar.
+     */
+    controlBarDefaultValue?: string;
+    /**
+     * Whether the control bar content is empty (for disabling custom button).
+     */
+    controlBarIsEmpty?: boolean;
+    /**
+     * The callback function when the custom button is clicked in control bar.
+     */
+    controlBarOnCustomButtonClick?: VoidFunction;
+    /**
+     * The callback function when the radio group value changes in control bar.
+     */
+    controlBarOnRadioChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The label of the read radio in control bar.
+     */
+    controlBarReadRadioLabel?: string;
+    /**
+     * Controls whether to display the control bar.
+     * @default false
+     */
+    controlBarShow?: boolean;
+    /**
+     * Controls whether to display the unread button in control bar.
+     * @default false
+     */
+    controlBarShowUnreadButton?: boolean;
+    /**
+     * The label of the unread radio in control bar.
+     */
+    controlBarUnreadRadioLabel?: string;
+    /**
+     * The value of the radio group in control bar.
+     */
+    controlBarValue?: string;
     /**
      * Controls whether to disable closing drawer while escape key down.
      * @default false
@@ -43,11 +167,18 @@ export interface DrawerProps extends NativeElementPropsWithoutKeyAndRef<'div'>,
      * Controls whether to display the header area.
      */
     isHeaderDisplay?: boolean;
+    /**
+     * Custom render function for the control bar area.
+     * The control bar will be rendered between the header and content areas.
+     * If provided, this will override the default control bar rendering and control bar-related props.
+     * @returns ReactNode - The custom control bar element
+     */
+    renderControlBar?: () => React.ReactNode;
     /**
      * Controls the width of the drawer.
      * @default 'medium'
      */
     size?: DrawerSize;
 }
-declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
 export default Drawer;

package/Drawer/Drawer.js

@@ -1,22 +1,66 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useState, useMemo } from 'react';
 import { drawerClasses } from '@mezzanine-ui/core/drawer';
 import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
 import useTopStack from '../_internal/SlideFadeOverlay/useTopStack.js';
 import ClearActions from '../ClearActions/ClearActions.js';
 import Button from '../Button/Button.js';
+import Radio from '../Radio/Radio.js';
+import RadioGroup from '../Radio/RadioGroup.js';
 import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
 import Backdrop from '../Backdrop/Backdrop.js';
 import Slide from '../Transition/Slide.js';
 import cx from 'clsx';
 
 const Drawer = forwardRef((props, ref) => {
-    const { bottomGhostActionText, bottomOnGhostActionClick, bottomOnPrimaryActionClick, bottomOnSecondaryActionClick, bottomPrimaryActionText, bottomSecondaryActionText, children, className, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, headerTitle, isBottomDisplay, isHeaderDisplay, onBackdropClick, onClose, open, size = 'medium', ...rest } = props;
+    const { bottomGhostActionDisabled, bottomGhostActionIcon, bottomGhostActionIconType, bottomGhostActionLoading, bottomGhostActionSize, bottomGhostActionText, bottomGhostActionVariant = 'base-ghost', bottomOnGhostActionClick, bottomOnPrimaryActionClick, bottomOnSecondaryActionClick, bottomPrimaryActionDisabled, bottomPrimaryActionIcon, bottomPrimaryActionIconType, bottomPrimaryActionLoading, bottomPrimaryActionSize, bottomPrimaryActionText, bottomPrimaryActionVariant = 'base-primary', bottomSecondaryActionDisabled, bottomSecondaryActionIcon, bottomSecondaryActionIconType, bottomSecondaryActionLoading, bottomSecondaryActionSize, bottomSecondaryActionText, bottomSecondaryActionVariant = 'base-secondary', children, className, container, controlBarAllRadioLabel, controlBarCustomButtonLabel = '全部已讀', controlBarDefaultValue, controlBarIsEmpty = false, controlBarOnCustomButtonClick, controlBarOnRadioChange, controlBarReadRadioLabel, controlBarShow = false, controlBarShowUnreadButton = false, controlBarUnreadRadioLabel, controlBarValue, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, headerTitle, isBottomDisplay, isHeaderDisplay, onBackdropClick, onClose, open, renderControlBar: customRenderControlBar, size = 'medium', ...rest } = props;
     const [exited, setExited] = useState(true);
     /**
      * Escape keydown close: escape will only close the top drawer
      */
     const checkIsOnTheTop = useTopStack(open);
+    const renderControlBar = useMemo(() => {
+        // If custom renderControlBar is provided, use it
+        if (customRenderControlBar) {
+            return customRenderControlBar;
+        }
+        // Default control bar implementation
+        if (!controlBarShow) {
+            return undefined;
+        }
+        return () => {
+            const radios = [];
+            if (controlBarAllRadioLabel) {
+                radios.push(jsx(Radio, { type: "segment", value: "all", children: controlBarAllRadioLabel }, "all"));
+            }
+            if (controlBarReadRadioLabel) {
+                radios.push(jsx(Radio, { type: "segment", value: "read", children: controlBarReadRadioLabel }, "read"));
+            }
+            if (controlBarUnreadRadioLabel && controlBarShowUnreadButton) {
+                radios.push(jsx(Radio, { type: "segment", value: "unread", children: controlBarUnreadRadioLabel }, "unread"));
+            }
+            const hasRadios = radios.length > 0;
+            const hasButton = controlBarOnCustomButtonClick !== undefined;
+            // Don't render if neither radios nor button are provided
+            if (!hasRadios && !hasButton) {
+                return null;
+            }
+            return (jsxs("div", { className: cx(drawerClasses.controlBar, !hasRadios && hasButton && drawerClasses.controlBarButtonOnly), children: [hasRadios && (jsx(RadioGroup, { defaultValue: controlBarDefaultValue !== null && controlBarDefaultValue !== void 0 ? controlBarDefaultValue : 'all', onChange: controlBarOnRadioChange, size: "minor", type: "segment", value: controlBarValue, children: radios })), hasButton && (jsx(Button, { disabled: controlBarIsEmpty, onClick: controlBarOnCustomButtonClick, size: "minor", type: "button", variant: "base-ghost", children: controlBarCustomButtonLabel }))] }));
+        };
+    }, [
+        controlBarAllRadioLabel,
+        controlBarCustomButtonLabel,
+        controlBarDefaultValue,
+        controlBarIsEmpty,
+        controlBarOnCustomButtonClick,
+        controlBarOnRadioChange,
+        controlBarReadRadioLabel,
+        controlBarShow,
+        controlBarShowUnreadButton,
+        controlBarUnreadRadioLabel,
+        controlBarValue,
+        customRenderControlBar,
+    ]);
     useDocumentEscapeKeyDown(() => {
         if (!open || disableCloseOnEscapeKeyDown || !onClose) {
             return;
@@ -37,7 +81,7 @@ const Drawer = forwardRef((props, ref) => {
             }, easing: {
                 enter: MOTION_EASING.entrance,
                 exit: MOTION_EASING.exit,
-            }, in: open, onEntered: () => setExited(false), onExited: () => setExited(true), ref: ref, children: jsxs("div", { ...rest, className: cx(drawerClasses.host, drawerClasses.right, drawerClasses.size(size), className), children: [isHeaderDisplay && (jsxs("div", { className: drawerClasses.header, children: [headerTitle, jsx(ClearActions, { onClick: onClose })] })), jsx("div", { className: drawerClasses.content, children: children }), isBottomDisplay && (jsxs("div", { className: drawerClasses.bottom, children: [jsx("div", { children: bottomGhostActionText && bottomOnGhostActionClick && (jsx(Button, { onClick: bottomOnGhostActionClick, type: "button", variant: "base-ghost", children: bottomGhostActionText })) }), jsxs("div", { className: drawerClasses['bottom__actions'], children: [bottomSecondaryActionText && bottomOnSecondaryActionClick && (jsx(Button, { onClick: bottomOnSecondaryActionClick, type: "button", variant: "base-secondary", children: bottomSecondaryActionText })), bottomPrimaryActionText && bottomOnPrimaryActionClick && (jsx(Button, { onClick: bottomOnPrimaryActionClick, type: "button", variant: "base-primary", children: bottomPrimaryActionText }))] })] }))] }) }) }));
+            }, in: open, onEntered: () => setExited(false), onExited: () => setExited(true), ref: ref, children: jsxs("div", { ...rest, className: cx(drawerClasses.host, drawerClasses.right, drawerClasses.size(size), className), children: [isHeaderDisplay && (jsxs("div", { className: drawerClasses.header, children: [headerTitle, jsx(ClearActions, { onClick: onClose })] })), renderControlBar === null || renderControlBar === void 0 ? void 0 : renderControlBar(), jsx("div", { className: drawerClasses.content, children: children }), isBottomDisplay && (jsxs("div", { className: drawerClasses.bottom, children: [jsx("div", { children: bottomGhostActionText && bottomOnGhostActionClick && (jsx(Button, { disabled: bottomGhostActionDisabled, icon: bottomGhostActionIcon, iconType: bottomGhostActionIconType, loading: bottomGhostActionLoading, onClick: bottomOnGhostActionClick, size: bottomGhostActionSize, type: "button", variant: bottomGhostActionVariant, children: bottomGhostActionText })) }), jsxs("div", { className: drawerClasses['bottom__actions'], children: [bottomSecondaryActionText && bottomOnSecondaryActionClick && (jsx(Button, { disabled: bottomSecondaryActionDisabled, icon: bottomSecondaryActionIcon, iconType: bottomSecondaryActionIconType, loading: bottomSecondaryActionLoading, onClick: bottomOnSecondaryActionClick, size: bottomSecondaryActionSize, type: "button", variant: bottomSecondaryActionVariant, children: bottomSecondaryActionText })), bottomPrimaryActionText && bottomOnPrimaryActionClick && (jsx(Button, { disabled: bottomPrimaryActionDisabled, icon: bottomPrimaryActionIcon, iconType: bottomPrimaryActionIconType, loading: bottomPrimaryActionLoading, onClick: bottomOnPrimaryActionClick, size: bottomPrimaryActionSize, type: "button", variant: bottomPrimaryActionVariant, children: bottomPrimaryActionText }))] })] }))] }) }) }));
 });
 
 export { Drawer as default };

package/Dropdown/Dropdown.d.ts

@@ -163,12 +163,12 @@ export interface DropdownProps extends DropdownItemSharedProps {
      */
     emptyIcon?: IconDefinition;
     /**
-     * Whether to disable portal.
+     * Whether to enable portal.
      * This prop is only relevant when `inputPosition` is set to 'outside'.
      * Controls whether the dropdown content is rendered within the current hierarchy or portaled to the body.
-     * @default false
+     * @default true
      */
-    disablePortal?: boolean;
+    globalPortal?: boolean;
     /**
      * Callback fired when the dropdown list reaches the bottom.
      * Only fires when `maxHeight` is set and the list is scrollable.

package/Dropdown/Dropdown.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId, useMemo, useState, useRef, useCallback, useEffect, cloneElement, createElement } from 'react';
 import cx from 'clsx';
 import { dropdownClasses } from '@mezzanine-ui/core/dropdown/dropdown';
-import { size, offset, autoUpdate } from '@floating-ui/react-dom';
+import { size, offset } from '@floating-ui/react-dom';
 import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
 import { TransitionGroup } from 'react-transition-group';
 import Button from '../Button/Button.js';
@@ -14,7 +14,7 @@ import DropdownItem from './DropdownItem.js';
 import Popper from '../Popper/Popper.js';
 
 function Dropdown(props) {
-    const { activeIndex: activeIndexProp, id, children, options = [], type = 'default', maxHeight, disabled = false, showDropdownActions = false, actionCancelText, actionConfirmText, actionText, actionClearText, actionCustomButtonProps, showActionShowTopBar, isMatchInputValue = false, inputPosition = 'outside', placement = 'bottom', customWidth, sameWidth = false, listboxId: listboxIdProp, listboxLabel, onClose, onOpen, open: openProp, onVisibilityChange, onSelect, onActionConfirm, onActionCancel, onActionCustom, onActionClear, onItemHover, zIndex, status, loadingText, emptyText, emptyIcon, followText: followTextProp, disablePortal = false, onReachBottom, onLeaveBottom, onScroll, mode, value, scrollbarDefer, scrollbarDisabled, scrollbarMaxWidth, scrollbarOptions, } = props;
+    const { activeIndex: activeIndexProp, id, children, options = [], type = 'default', maxHeight, disabled = false, showDropdownActions = false, actionCancelText, actionConfirmText, actionText, actionClearText, actionCustomButtonProps, showActionShowTopBar, isMatchInputValue = false, inputPosition = 'outside', placement = 'bottom', customWidth, sameWidth = false, listboxId: listboxIdProp, listboxLabel, onClose, onOpen, open: openProp, onVisibilityChange, onSelect, onActionConfirm, onActionCancel, onActionCustom, onActionClear, onItemHover, zIndex, status, loadingText, emptyText, emptyIcon, followText: followTextProp, globalPortal = true, onReachBottom, onLeaveBottom, onScroll, mode, value, scrollbarDefer, scrollbarDisabled, scrollbarMaxWidth, scrollbarOptions, } = props;
     const isInline = inputPosition === 'inside';
     const inputId = useId();
     const defaultListboxId = `${inputId}-listbox`;
@@ -101,9 +101,7 @@ function Dropdown(props) {
         if (!customWidth) {
             return null;
         }
-        const widthValue = typeof customWidth === 'number'
-            ? `${customWidth}px`
-            : customWidth;
+        const widthValue = typeof customWidth === 'number' ? `${customWidth}px` : customWidth;
         return {
             name: 'customWidth',
             fn: ({ elements }) => {
@@ -138,7 +136,9 @@ function Dropdown(props) {
             fn: ({ elements }) => {
                 const zIndexNum = typeof zIndexValue === 'number'
                     ? zIndexValue
-                    : (typeof zIndexValue === 'string' ? parseInt(zIndexValue, 10) || zIndexValue : 1);
+                    : typeof zIndexValue === 'string'
+                        ? parseInt(zIndexValue, 10) || zIndexValue
+                        : 1;
                 Object.assign(elements.floating.style, {
                     zIndex: zIndexNum,
                 });
@@ -177,28 +177,6 @@ function Dropdown(props) {
     const anchorRef = useRef(null);
     const popperRef = useRef(null);
     const popperControllerRef = useRef(null);
-    // Auto-update popper position when anchor element size changes
-    useEffect(() => {
-        if (!isOpen || isInline || !anchorRef.current || !popperControllerRef.current) {
-            return;
-        }
-        const update = popperControllerRef.current.update;
-        if (!update) {
-            return;
-        }
-        // Get floating element from controller refs
-        // Check refs exists before accessing nested properties
-        const refs = popperControllerRef.current.refs;
-        if (!refs) {
-            return;
-        }
-        const floatingElement = refs.floating.current;
-        if (!floatingElement) {
-            return;
-        }
-        const cleanup = autoUpdate(anchorRef.current, floatingElement, update);
-        return cleanup;
-    }, [isOpen, isInline]);
     // Extract combobox props logic to avoid duplication
     const getComboboxProps = useMemo(() => {
         const childWithRef = children;
@@ -363,7 +341,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: disablePortal, options: {
+                        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: {
                     placement: popoverPlacement,
                     middleware: [
                         offsetMiddleware,