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

package/MultipleDatePicker/MultipleDatePicker.js

@@ -0,0 +1,176 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { getDefaultModeFormat, calendarClasses } from '@mezzanine-ui/core/calendar';
+import { multipleDatePickerClasses } from '@mezzanine-ui/core/multiple-date-picker';
+import { CalendarIcon } from '@mezzanine-ui/icons';
+import { forwardRef, useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import CalendarFooterActions from '../Calendar/CalendarFooterActions.js';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import MultipleDatePickerTrigger from './MultipleDatePickerTrigger.js';
+import { useMultipleDatePickerValue } from './useMultipleDatePickerValue.js';
+import { useCalendarContext } from '../Calendar/CalendarContext.js';
+import { useCalendarControls } from '../Calendar/useCalendarControls.js';
+import { usePickerDocumentEventClose } from '../Picker/usePickerDocumentEventClose.js';
+import Icon from '../Icon/Icon.js';
+import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
+import Calendar from '../Calendar/Calendar.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` multiple date picker.
+ * Allows selecting multiple dates from a calendar with manual confirmation.
+ * Notice that any component related to date-picker should be used along with `CalendarContext`.
+ */
+const MultipleDatePicker = forwardRef(function MultipleDatePicker(props, ref) {
+    const { getNow, locale } = useCalendarContext();
+    const { actions: actionsProp, calendarProps, className, clearable = true, disabledMonthSwitch = false, disableOnDoubleNext, disableOnDoublePrev, disableOnNext, disableOnPrev, disabledYearSwitch = false, disabled = false, displayMonthLocale = locale, error = false, format: formatProp, fullWidth = false, isDateDisabled: isDateDisabledProp, maxSelections, onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, overflowStrategy = 'counter', placeholder, popperProps, prefix, required, readOnly = false, referenceDate: referenceDateProp, size = 'main', value = [], } = props;
+    const format = formatProp || getDefaultModeFormat('day');
+    const { className: calendarClassName, ...restCalendarProps } = calendarProps || {};
+    // Calendar open state
+    const [open, setOpen] = useState(false);
+    const preventOpen = readOnly || disabled;
+    const onCalendarToggle = useCallback((currentOpen) => {
+        if (!preventOpen) {
+            setOpen(currentOpen);
+            onCalendarToggleProp === null || onCalendarToggleProp === void 0 ? void 0 : onCalendarToggleProp(currentOpen);
+        }
+    }, [onCalendarToggleProp, preventOpen]);
+    // Value management hook
+    const { clearAll, formatDate, getConfirmValue, internalValue, isDateSelected, isMaxReached, removeDate, revertToValue, toggleDate, } = useMultipleDatePickerValue({
+        format,
+        maxSelections,
+        value,
+    });
+    // Manage referenceDate internally for stable value
+    const [internalReferenceDate, setInternalReferenceDate] = useState(() => referenceDateProp || getNow());
+    // Sync referenceDate when prop changes
+    useEffect(() => {
+        if (referenceDateProp) {
+            setInternalReferenceDate(referenceDateProp);
+        }
+    }, [referenceDateProp]);
+    // Calendar controls - pass stable referenceDate
+    const { currentMode, onMonthControlClick, onNext, onPrev, onDoublePrev, onDoubleNext, onYearControlClick, popModeStack, referenceDate, updateReferenceDate, } = useCalendarControls(internalReferenceDate, 'day');
+    // Handle mode switching (month/year selection) with value transformation
+    const createModeChangeHandler = useMemo(() => {
+        return (transformValue) => {
+            return (target) => {
+                const result = transformValue
+                    ? transformValue(target, referenceDate)
+                    : target;
+                updateReferenceDate(result);
+                popModeStack();
+            };
+        };
+    }, [referenceDate, updateReferenceDate, popModeStack]);
+    // Convert internalValue to DateValue[] for trigger display
+    const triggerValues = useMemo(() => internalValue.map((date) => ({
+        date,
+        id: formatDate(date),
+        name: formatDate(date),
+    })), [internalValue, formatDate]);
+    // Handle calendar date click - toggle selection (only in day mode)
+    const onCalendarDateChange = useCallback((date) => {
+        if (currentMode === 'day') {
+            toggleDate(date);
+        }
+        else {
+            // Handle month/year mode switching
+            createModeChangeHandler()(date);
+        }
+    }, [currentMode, toggleDate, createModeChangeHandler]);
+    // Handle tag close - remove date
+    const onTagClose = useCallback((date) => {
+        removeDate(date);
+    }, [removeDate]);
+    // Handle confirm action
+    const onConfirm = useCallback(() => {
+        const confirmedValue = getConfirmValue();
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(confirmedValue);
+        onCalendarToggle(false);
+    }, [getConfirmValue, onChangeProp, onCalendarToggle]);
+    // Handle cancel action
+    const onCancel = useCallback(() => {
+        revertToValue();
+        onCalendarToggle(false);
+    }, [revertToValue, onCalendarToggle]);
+    // Handle clear
+    const onClear = useCallback((e) => {
+        e.stopPropagation();
+        clearAll();
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([]);
+    }, [clearAll, onChangeProp]);
+    // Auto-generate actions
+    const actions = useMemo(() => {
+        const hasValue = internalValue.length > 0;
+        return {
+            primaryButtonProps: {
+                children: 'Confirm',
+                disabled: !hasValue,
+                onClick: onConfirm,
+                ...actionsProp === null || actionsProp === void 0 ? void 0 : actionsProp.primaryButtonProps,
+            },
+            secondaryButtonProps: {
+                children: 'Cancel',
+                onClick: onCancel,
+                ...actionsProp === null || actionsProp === void 0 ? void 0 : actionsProp.secondaryButtonProps,
+            },
+        };
+    }, [actionsProp, internalValue.length, onConfirm, onCancel]);
+    // Enhanced isDateDisabled - disable unselected dates when max is reached
+    const isDateDisabled = useCallback((date) => {
+        // Check user-provided disabled function first
+        if (isDateDisabledProp === null || isDateDisabledProp === void 0 ? void 0 : isDateDisabledProp(date)) {
+            return true;
+        }
+        // If max is reached and date is not already selected, disable it
+        if (isMaxReached && !isDateSelected(date)) {
+            return true;
+        }
+        return false;
+    }, [isDateDisabledProp, isDateSelected, isMaxReached]);
+    // Refs for popper positioning
+    const anchorRef = useRef(null);
+    const calendarRef = useRef(null);
+    const triggerComposedRef = useComposeRefs([ref, anchorRef]);
+    // Close handlers for click-away and escape
+    const onClose = useCallback(() => {
+        revertToValue();
+        onCalendarToggle(false);
+    }, [revertToValue, onCalendarToggle]);
+    const onChangeClose = useCallback(() => {
+        // In manual mode, always revert on click-away (don't auto-submit)
+        revertToValue();
+        onCalendarToggle(false);
+    }, [revertToValue, onCalendarToggle]);
+    // Use a dummy ref for lastElementRefInFlow since we don't have a focusable input
+    const dummyRef = useRef(null);
+    usePickerDocumentEventClose({
+        anchorRef,
+        lastElementRefInFlow: dummyRef,
+        onChangeClose,
+        onClose,
+        open,
+        popperRef: calendarRef,
+    });
+    // Icon click handler
+    const onIconClick = useCallback((e) => {
+        e.stopPropagation();
+        if (open) {
+            revertToValue();
+        }
+        onCalendarToggle(!open);
+    }, [open, revertToValue, onCalendarToggle]);
+    const suffixActionIcon = (jsx(Icon, { "aria-label": "Open calendar", icon: CalendarIcon, onClick: readOnly || disabled ? undefined : onIconClick }));
+    // Trigger click handler
+    const onTriggerClick = useCallback(() => {
+        if (!preventOpen && !open) {
+            onCalendarToggle(true);
+        }
+    }, [preventOpen, open, onCalendarToggle]);
+    return (jsxs(Fragment, { children: [jsx(MultipleDatePickerTrigger, { active: open, className: cx(multipleDatePickerClasses.host, className, {
+                    [multipleDatePickerClasses.hostFullWidth]: fullWidth,
+                }), clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, onClick: onTriggerClick, onClear: onClear, onTagClose: onTagClose, overflowStrategy: overflowStrategy, placeholder: placeholder, prefix: prefix, readOnly: readOnly, ref: triggerComposedRef, required: required, size: size, suffix: suffixActionIcon, value: triggerValues }), jsx(InputTriggerPopper, { ...popperProps, anchor: anchorRef, open: open, ref: calendarRef, children: jsx("div", { className: calendarClasses.host, children: jsxs("div", { className: calendarClasses.mainWithFooter, children: [jsx(Calendar, { ...restCalendarProps, className: cx(calendarClasses.noShadowHost, calendarClassName), disabledFooterControl: true, disabledMonthSwitch: disabledMonthSwitch, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, mode: currentMode, onChange: onCalendarDateChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onDoubleNext: onDoubleNext, onPrev: onPrev, onDoublePrev: onDoublePrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: internalValue }), jsx(CalendarFooterActions, { actions: actions })] }) }) })] }));
+});
+
+export { MultipleDatePicker as default };

package/MultipleDatePicker/MultipleDatePickerTrigger.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { TextFieldProps } from '../TextField';
+export interface DateValue {
+    id: string;
+    name: string;
+    date: DateType;
+}
+export interface MultipleDatePickerTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'defaultChecked' | 'disabled' | 'readonly' | 'typing'> {
+    /**
+     * Whether the panel is currently open (for styling)
+     */
+    active?: boolean;
+    /**
+     * Whether the trigger is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback when a tag is closed (date removed)
+     */
+    onTagClose?: (date: DateType) => void;
+    /**
+     * Overflow strategy for tags display
+     * @default 'counter'
+     */
+    overflowStrategy?: 'counter' | 'wrap';
+    /**
+     * Placeholder text when no dates are selected
+     */
+    placeholder?: string;
+    /**
+     * Whether the trigger is readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the input is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Custom suffix element (e.g., calendar icon)
+     */
+    suffix?: ReactNode;
+    /**
+     * The selected date values for display
+     */
+    value?: DateValue[];
+}
+/**
+ * The trigger component for MultipleDatePicker.
+ * Displays selected dates as tags within a TextField.
+ */
+declare const MultipleDatePickerTrigger: import("react").ForwardRefExoticComponent<MultipleDatePickerTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default MultipleDatePickerTrigger;

package/MultipleDatePicker/MultipleDatePickerTrigger.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useMemo, useCallback } from 'react';
+import { multipleDatePickerClasses } from '@mezzanine-ui/core/multiple-date-picker';
+import TagGroup from '../Tag/TagGroup.js';
+import { useSelectTriggerTags } from '../Select/useSelectTriggerTags.js';
+import Tag from '../Tag/Tag.js';
+import OverflowCounterTag from '../OverflowTooltip/OverflowCounterTag.js';
+import TextField from '../TextField/TextField.js';
+import cx from 'clsx';
+
+/**
+ * The trigger component for MultipleDatePicker.
+ * Displays selected dates as tags within a TextField.
+ */
+const MultipleDatePickerTrigger = forwardRef(function MultipleDatePickerTrigger(props, ref) {
+    const { active = false, className, clearable = true, disabled = false, error = false, fullWidth = false, onTagClose, overflowStrategy = 'counter', placeholder, readOnly = false, required = false, size = 'main', suffix, value = [], ...restTextFieldProps } = props;
+    const tagsContainerRef = useRef(null);
+    const tagsRef = useRef(null);
+    const tagSize = size === 'main' ? 'main' : 'sub';
+    // Convert DateValue[] to SelectValue[] for useSelectTriggerTags
+    const selectValues = useMemo(() => value.map((v) => ({ id: v.id, name: v.name })), [value]);
+    const { overflowSelections, renderFakeTags, visibleSelections } = useSelectTriggerTags({
+        containerRef: tagsContainerRef,
+        enabled: overflowStrategy === 'counter',
+        size: tagSize,
+        tagsRef,
+        value: selectValues,
+    });
+    const displaySelections = useMemo(() => (overflowStrategy === 'counter' ? visibleSelections : selectValues), [overflowStrategy, selectValues, visibleSelections]);
+    // Find the original DateValue by id
+    const findDateValue = useCallback((id) => value.find((v) => v.id === id), [value]);
+    const handleTagClose = useCallback((id) => (e) => {
+        e.stopPropagation();
+        const dateValue = findDateValue(id);
+        if (dateValue && onTagClose) {
+            onTagClose(dateValue.date);
+        }
+    }, [findDateValue, onTagClose]);
+    const tagChildren = useMemo(() => {
+        const tags = displaySelections.map((selection) => {
+            if (readOnly) {
+                return (jsx(Tag, { label: selection.name, readOnly: true, size: tagSize, type: "static" }, selection.id));
+            }
+            return (jsx(Tag, { disabled: disabled, label: selection.name, onClose: handleTagClose(selection.id), size: tagSize, type: "dismissable" }, selection.id));
+        });
+        if (overflowStrategy === 'counter' && overflowSelections.length) {
+            tags.push(jsx(OverflowCounterTag, { disabled: disabled, onClick: (e) => {
+                    e.stopPropagation();
+                }, onTagDismiss: (tagIndex) => {
+                    const target = overflowSelections[tagIndex];
+                    if (!target)
+                        return;
+                    const dateValue = findDateValue(target.id);
+                    if (dateValue && onTagClose) {
+                        onTagClose(dateValue.date);
+                    }
+                }, readOnly: readOnly, tagSize: tagSize, tags: overflowSelections.map((s) => s.name) }, "overflow-counter"));
+        }
+        return tags;
+    }, [
+        disabled,
+        displaySelections,
+        findDateValue,
+        handleTagClose,
+        onTagClose,
+        overflowSelections,
+        overflowStrategy,
+        readOnly,
+        tagSize,
+    ]);
+    const hasValue = value.length > 0;
+    // TextField requires disabled and readonly to be mutually exclusive
+    let interactiveProps = {};
+    if (disabled) {
+        interactiveProps = { disabled: true };
+    }
+    else if (readOnly) {
+        interactiveProps = { readonly: true };
+    }
+    return (jsx(TextField, { ...restTextFieldProps, ...interactiveProps, active: active, className: cx(multipleDatePickerClasses.trigger, {
+            [multipleDatePickerClasses.triggerSelected]: hasValue,
+            [multipleDatePickerClasses.triggerDisabled]: disabled,
+            [multipleDatePickerClasses.triggerReadOnly]: readOnly,
+        }, className), clearable: !readOnly && clearable && hasValue, error: error, fullWidth: fullWidth, ref: ref, size: size, suffix: suffix, children: jsx("div", { ref: tagsContainerRef, className: cx(multipleDatePickerClasses.triggerTagsWrapper, {
+                [multipleDatePickerClasses.triggerTagsWrapperEllipsis]: overflowStrategy === 'counter',
+            }), children: hasValue ? (jsxs(Fragment, { children: [jsxs("div", { className: cx(multipleDatePickerClasses.triggerTags, {
+                            [multipleDatePickerClasses.triggerTagsEllipsis]: overflowStrategy === 'counter',
+                        }), ref: tagsRef, children: [jsx(TagGroup, { children: tagChildren }), overflowStrategy === 'counter' ? renderFakeTags() : null] }), jsx("input", { "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, className: cx(multipleDatePickerClasses.triggerInput, multipleDatePickerClasses.triggerInputAbsolute), disabled: disabled, readOnly: true, tabIndex: -1, type: "text", value: "" })] })) : (jsx("input", { "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, className: multipleDatePickerClasses.triggerInput, disabled: disabled, placeholder: placeholder, readOnly: true, tabIndex: -1, type: "text", value: "" })) }) }));
+});
+
+export { MultipleDatePickerTrigger as default };

package/MultipleDatePicker/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './MultipleDatePicker';
+export type { MultipleDatePickerProps } from './MultipleDatePicker';
+export { default as MultipleDatePickerTrigger } from './MultipleDatePickerTrigger';
+export type { DateValue as MultipleDatePickerDateValue, MultipleDatePickerTriggerProps, } from './MultipleDatePickerTrigger';
+export { useMultipleDatePickerValue } from './useMultipleDatePickerValue';
+export type { UseMultipleDatePickerValueProps, UseMultipleDatePickerValueReturn, } from './useMultipleDatePickerValue';

package/MultipleDatePicker/index.js

@@ -0,0 +1,3 @@
+export { default } from './MultipleDatePicker.js';
+export { default as MultipleDatePickerTrigger } from './MultipleDatePickerTrigger.js';
+export { useMultipleDatePickerValue } from './useMultipleDatePickerValue.js';

package/MultipleDatePicker/useMultipleDatePickerValue.d.ts

@@ -0,0 +1,55 @@
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { MultipleDatePickerValue } from '@mezzanine-ui/core/multiple-date-picker';
+export interface UseMultipleDatePickerValueProps {
+    /**
+     * The format pattern for displaying dates (e.g., "YYYY-MM-DD")
+     */
+    format: string;
+    /**
+     * Maximum number of dates that can be selected
+     */
+    maxSelections?: number;
+    /**
+     * Controlled value
+     */
+    value?: MultipleDatePickerValue;
+}
+export interface UseMultipleDatePickerValueReturn {
+    /**
+     * The internal value (pending changes)
+     */
+    internalValue: MultipleDatePickerValue;
+    /**
+     * Toggle a date in/out of selection
+     */
+    toggleDate: (date: DateType) => void;
+    /**
+     * Remove a specific date from selection
+     */
+    removeDate: (date: DateType) => void;
+    /**
+     * Clear all selected dates
+     */
+    clearAll: () => void;
+    /**
+     * Check if a date is currently selected
+     */
+    isDateSelected: (date: DateType) => boolean;
+    /**
+     * Check if selection has reached max limit
+     */
+    isMaxReached: boolean;
+    /**
+     * Confirm the current selection (returns the value to be passed to onChange)
+     */
+    getConfirmValue: () => MultipleDatePickerValue;
+    /**
+     * Cancel and revert to original value
+     */
+    revertToValue: () => void;
+    /**
+     * Format a date to display string
+     */
+    formatDate: (date: DateType) => string;
+}
+export declare function useMultipleDatePickerValue({ format, maxSelections, value, }: UseMultipleDatePickerValueProps): UseMultipleDatePickerValueReturn;

package/MultipleDatePicker/useMultipleDatePickerValue.js

@@ -0,0 +1,68 @@
+'use client';
+import { useCallback, useState, useEffect } from 'react';
+import { useCalendarContext } from '../Calendar/CalendarContext.js';
+
+function useMultipleDatePickerValue({ format, maxSelections, value = [], }) {
+    const { formatToString, isBefore, isSameDate, locale } = useCalendarContext();
+    // Sort dates in chronological order
+    const sortDates = useCallback((dates) => {
+        return [...dates].sort((a, b) => {
+            if (isSameDate(a, b))
+                return 0;
+            return isBefore(a, b) ? -1 : 1;
+        });
+    }, [isBefore, isSameDate]);
+    // Internal state for pending changes
+    const [internalValue, setInternalValue] = useState(() => sortDates(value));
+    // Sync internal value when controlled value changes
+    useEffect(() => {
+        setInternalValue(sortDates(value));
+    }, [sortDates, value]);
+    const formatDate = useCallback((date) => {
+        return formatToString(locale, date, format);
+    }, [formatToString, locale, format]);
+    const isDateSelected = useCallback((date) => {
+        return internalValue.some((d) => isSameDate(d, date));
+    }, [internalValue, isSameDate]);
+    const isMaxReached = typeof maxSelections === 'number' && internalValue.length >= maxSelections;
+    const toggleDate = useCallback((date) => {
+        setInternalValue((prev) => {
+            const existingIndex = prev.findIndex((d) => isSameDate(d, date));
+            if (existingIndex >= 0) {
+                // Remove the date
+                return prev.filter((_, index) => index !== existingIndex);
+            }
+            // Check max limit before adding
+            if (typeof maxSelections === 'number' && prev.length >= maxSelections) {
+                return prev;
+            }
+            // Add the date and sort
+            return sortDates([...prev, date]);
+        });
+    }, [isSameDate, maxSelections, sortDates]);
+    const removeDate = useCallback((date) => {
+        setInternalValue((prev) => prev.filter((d) => !isSameDate(d, date)));
+    }, [isSameDate]);
+    const clearAll = useCallback(() => {
+        setInternalValue([]);
+    }, []);
+    const getConfirmValue = useCallback(() => {
+        return internalValue;
+    }, [internalValue]);
+    const revertToValue = useCallback(() => {
+        setInternalValue(sortDates(value));
+    }, [sortDates, value]);
+    return {
+        clearAll,
+        formatDate,
+        getConfirmValue,
+        internalValue,
+        isDateSelected,
+        isMaxReached,
+        removeDate,
+        revertToValue,
+        toggleDate,
+    };
+}
+
+export { useMultipleDatePickerValue };

package/Navigation/NavigationHeader.js

@@ -10,7 +10,7 @@ const NavigationHeader = forwardRef((props, ref) => {
     const { children, className, title, onBrandClick, ...rest } = props;
     const { collapsed, handleCollapseChange } = use(NavigationActivatedContext);
     const BrandComponent = onBrandClick ? 'button' : 'span';
-    return (jsxs("header", { ...rest, ref: ref, className: cx(navigationHeaderClasses.host, collapsed && navigationHeaderClasses.collapsed, className), children: [jsx(NavigationIconButton, { onClick: () => handleCollapseChange(!collapsed), icon: SiderIcon }), jsxs(BrandComponent, { type: "button", className: navigationHeaderClasses.content, onClick: onBrandClick, children: [children, jsx("span", { className: navigationHeaderClasses.title, children: title })] })] }));
+    return (jsxs("header", { ...rest, ref: ref, className: cx(navigationHeaderClasses.host, collapsed && navigationHeaderClasses.collapsed, className), children: [jsx(NavigationIconButton, { onClick: () => handleCollapseChange(!collapsed), icon: SiderIcon }), jsxs(BrandComponent, { type: "button", className: navigationHeaderClasses.content, onClick: onBrandClick, children: [children, jsx("span", { className: navigationHeaderClasses.title, children: collapsed ? title === null || title === void 0 ? void 0 : title[0] : title })] })] }));
 });
 
 export { NavigationHeader as default };

package/NotificationCenter/NotificationCenterDrawer.d.ts

@@ -1,4 +1,4 @@
-import { type ChangeEventHandler, type ComponentProps, type Key, type ReactElement } from 'react';
+import { type ComponentProps, type Key, type ReactElement } from 'react';
 import { DrawerSize } from '@mezzanine-ui/core/drawer';
 import { type IconDefinition } from '@mezzanine-ui/icons';
 import { type DrawerProps } from '../Drawer';
@@ -7,24 +7,17 @@ type NotificationDataForDrawer = NotificationData & {
     key: Key;
     type: 'drawer';
 };
-type NotificationCenterDrawerPropsBase = Pick<DrawerProps, 'open' | 'onClose'> & {
-    /**
-     * The label of the all radio.
-     */
-    allRadioLabel?: string;
-    /**
-     * The label of the custom radio.
-     */
-    customRadioLabel?: string;
-    /**
-     * The default value of the radio group.
-     */
-    defaultValue?: string;
+type NotificationCenterDrawerPropsBase = Pick<DrawerProps, 'controlBarAllRadioLabel' | 'controlBarCustomButtonLabel' | 'controlBarDefaultValue' | 'controlBarOnCustomButtonClick' | 'controlBarOnRadioChange' | 'controlBarReadRadioLabel' | 'controlBarShow' | 'controlBarShowUnreadButton' | 'controlBarUnreadRadioLabel' | 'controlBarValue' | 'onClose' | 'open' | 'renderControlBar'> & {
     /**
      * The size of the drawer.
      * @default 'narrow'
      */
     drawerSize?: DrawerSize;
+    /**
+     * The label of the "earlier" time group.
+     * @default '更早'
+     */
+    earlierLabel?: string;
     /**
      * The icon of the empty notification.
      */
@@ -34,49 +27,14 @@ type NotificationCenterDrawerPropsBase = Pick<DrawerProps, 'open' | 'onClose'> &
      */
     emptyNotificationTitle?: string;
     /**
-     * The callback function when the custom button is clicked.
-     */
-    onCustomButtonClick?: VoidFunction;
-    /**
-     * The callback function when the radio group value changes.
-     */
-    onRadioChange?: ChangeEventHandler<HTMLInputElement>;
-    /**
-     * The label of the read radio.
-     */
-    readRadioLabel?: string;
-    /**
-     * Controls whether to display the toolbar.
-     * @default true
-     */
-    showToolbar?: boolean;
-    /**
-     * Controls whether to display the unread button.
-     * @default false
+     * The label for the "past 7 days" time group.
+     * @default '過去七天'
      */
-    showUnreadButton?: boolean;
+    past7DaysLabel?: string;
     /**
      * The title of the drawer.
      */
     title?: string;
-    /**
-     * The label of the unread radio.
-     */
-    unreadRadioLabel?: string;
-    /**
-     * The value of the radio group.
-     */
-    value?: string;
-    /**
-     * The label for the "earlier" time group.
-     * @default '更早'
-     */
-    earlierLabel?: string;
-    /**
-     * The label for the "past 7 days" time group.
-     * @default '過去七天'
-     */
-    past7DaysLabel?: string;
     /**
      * The label for the "today" time group.
      * @default '今天'