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

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/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 '今天'

package/NotificationCenter/NotificationCenterDrawer.js

@@ -0,0 +1,128 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { notificationClasses } from '@mezzanine-ui/core/notification-center';
+import { NotificationIcon } from '@mezzanine-ui/icons';
+import Typography from '../Typography/Typography.js';
+import NotificationCenter from './NotificationCenter.js';
+import Drawer from '../Drawer/Drawer.js';
+import Icon from '../Icon/Icon.js';
+
+const isValidTime = (timestamp) => {
+    if (!timestamp)
+        return false;
+    const date = new Date(timestamp);
+    return !Number.isNaN(date.getTime());
+};
+const getValidTime = (timestamp) => {
+    if (!isValidTime(timestamp))
+        return 0;
+    const date = new Date(timestamp);
+    return date.getTime();
+};
+const DEFAULT_TIME_GROUP_LABELS = {
+    today: '今天',
+    yesterday: '昨天',
+    past7Days: '過去七天',
+    earlier: '更早',
+};
+const TIME_GROUP_ORDER = [
+    'today',
+    'yesterday',
+    'past7Days',
+    'earlier',
+];
+const getTimeGroup = (timestamp, now) => {
+    if (!isValidTime(timestamp))
+        return 'earlier';
+    const notificationDate = new Date(timestamp);
+    const nowStartOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const notificationStartOfDay = new Date(notificationDate.getFullYear(), notificationDate.getMonth(), notificationDate.getDate());
+    // Today: same calendar day
+    if (notificationStartOfDay.getTime() === nowStartOfDay.getTime()) {
+        return 'today';
+    }
+    // Yesterday: previous calendar day
+    const yesterdayStartOfDay = new Date(nowStartOfDay);
+    yesterdayStartOfDay.setDate(yesterdayStartOfDay.getDate() - 1);
+    if (notificationStartOfDay.getTime() === yesterdayStartOfDay.getTime()) {
+        return 'yesterday';
+    }
+    // Past 7 days: within 7 days but not today or yesterday
+    const diffInDays = (now.getTime() - notificationDate.getTime()) / (1000 * 60 * 60 * 24);
+    if (diffInDays <= 7) {
+        return 'past7Days';
+    }
+    // Earlier: more than 7 days ago
+    return 'earlier';
+};
+const NotificationCenterDrawer = (props) => {
+    const { children, controlBarAllRadioLabel, controlBarCustomButtonLabel, controlBarDefaultValue, controlBarOnCustomButtonClick, controlBarOnRadioChange, controlBarReadRadioLabel, controlBarShow, controlBarShowUnreadButton, controlBarUnreadRadioLabel, controlBarValue, drawerSize = 'narrow', earlierLabel, emptyNotificationIcon = NotificationIcon, emptyNotificationTitle = '目前沒有新的通知', notificationList, onClose, open, past7DaysLabel, renderControlBar, title, todayLabel, yesterdayLabel, ...restDrawerProps } = props;
+    const isEmpty = useMemo(() => {
+        if (notificationList) {
+            return notificationList.length === 0;
+        }
+        if (Array.isArray(children)) {
+            return children.length === 0;
+        }
+        return !children;
+    }, [notificationList, children]);
+    const renderNotifications = useMemo(() => {
+        const renderEmptyNotifications = () => {
+            return (jsxs("div", { className: notificationClasses.emptyNotifications, children: [jsx(Icon, { icon: emptyNotificationIcon, size: 28 }), jsx(Typography, { children: emptyNotificationTitle })] }));
+        };
+        if (isEmpty) {
+            return renderEmptyNotifications();
+        }
+        // Check if notificationList is provided
+        if (notificationList) {
+            // Sort once by timestamp (newest first), then group while maintaining order
+            const sorted = [...notificationList].sort((a, b) => {
+                const aTime = getValidTime(a.timeStamp);
+                const bTime = getValidTime(b.timeStamp);
+                return bTime - aTime;
+            });
+            // Group sorted notifications
+            const now = new Date();
+            const grouped = sorted.reduce((acc, notification) => {
+                var _a;
+                const group = getTimeGroup(notification.timeStamp, now);
+                ((_a = acc[group]) !== null && _a !== void 0 ? _a : (acc[group] = [])).push(notification);
+                return acc;
+            }, {});
+            // Get time group labels from props or use defaults
+            const timeGroupLabels = {
+                earlier: earlierLabel !== null && earlierLabel !== void 0 ? earlierLabel : DEFAULT_TIME_GROUP_LABELS.earlier,
+                past7Days: past7DaysLabel !== null && past7DaysLabel !== void 0 ? past7DaysLabel : DEFAULT_TIME_GROUP_LABELS.past7Days,
+                today: todayLabel !== null && todayLabel !== void 0 ? todayLabel : DEFAULT_TIME_GROUP_LABELS.today,
+                yesterday: yesterdayLabel !== null && yesterdayLabel !== void 0 ? yesterdayLabel : DEFAULT_TIME_GROUP_LABELS.yesterday,
+            };
+            // Render notifications with prependTips for first item in each group
+            return TIME_GROUP_ORDER.flatMap((group) => {
+                const notifications = grouped[group];
+                if (!(notifications === null || notifications === void 0 ? void 0 : notifications.length)) {
+                    return [];
+                }
+                return notifications.map((notification, index) => {
+                    const { key, ...restNotification } = notification;
+                    return (jsx(NotificationCenter, { ...restNotification, prependTips: index === 0 ? timeGroupLabels[group] : undefined, reference: key, type: "drawer" }, key));
+                });
+            });
+        }
+        // Return children (can be single element or array)
+        return Array.isArray(children) ? children : children;
+    }, [
+        isEmpty,
+        notificationList,
+        children,
+        emptyNotificationIcon,
+        emptyNotificationTitle,
+        earlierLabel,
+        past7DaysLabel,
+        todayLabel,
+        yesterdayLabel,
+    ]);
+    return (jsx(Drawer, { className: notificationClasses.drawer, controlBarAllRadioLabel: controlBarAllRadioLabel, controlBarCustomButtonLabel: controlBarCustomButtonLabel, controlBarDefaultValue: controlBarDefaultValue, controlBarIsEmpty: isEmpty, controlBarOnCustomButtonClick: controlBarOnCustomButtonClick, controlBarOnRadioChange: controlBarOnRadioChange, controlBarReadRadioLabel: controlBarReadRadioLabel, controlBarShow: controlBarShow, controlBarShowUnreadButton: controlBarShowUnreadButton, controlBarUnreadRadioLabel: controlBarUnreadRadioLabel, controlBarValue: controlBarValue, headerTitle: title, isHeaderDisplay: Boolean(title), onClose: onClose, open: open, renderControlBar: renderControlBar, size: drawerSize, ...restDrawerProps, children: renderNotifications }));
+};
+
+export { NotificationCenterDrawer as default };

package/NotificationCenter/index.d.ts

@@ -1,3 +1,5 @@
 export type { NotificationSeverity } from '@mezzanine-ui/core/notification-center';
 export { default } from './NotificationCenter';
 export type { NotificationConfigProps, NotificationData, } from './NotificationCenter';
+export { default as NotificationCenterDrawer } from './NotificationCenterDrawer';
+export type { NotificationCenterDrawerProps } from './NotificationCenterDrawer';

package/NotificationCenter/index.js

@@ -1 +1,2 @@
 export { default } from './NotificationCenter.js';
+export { default as NotificationCenterDrawer } from './NotificationCenterDrawer.js';

package/OverflowTooltip/index.d.ts

@@ -1,2 +1,2 @@
-export { default, OverflowTooltipProps } from './OverflowTooltip';
-export { default as OverflowCounterTag, OverflowCounterTagProps, } from './OverflowCounterTag';
+export { default, type OverflowTooltipProps } from './OverflowTooltip';
+export { default as OverflowCounterTag, type OverflowCounterTagProps, } from './OverflowCounterTag';

package/Picker/RangePickerTrigger.js

@@ -69,7 +69,7 @@ const RangePickerTrigger = forwardRef(function RangePickerTrigger(props, ref) {
     const handleToBlur = useCallback((e) => {
         onToBlur === null || onToBlur === void 0 ? void 0 : onToBlur(e);
     }, [onToBlur]);
-    return (jsxs(TextField, { ...restTextFieldProps, ...defaultTextFieldProps, ref: ref, active: !!inputFromValue || !!inputToValue, className: cx(pickerClasses.host, className), clearable: !readOnly && clearable, suffix: suffix !== null && suffix !== void 0 ? suffix : defaultSuffix, children: [jsx(FormattedInput, { ...inputFromProps, ref: fromRef, "aria-disabled": disabled, "aria-label": "Start date", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesFrom, format: format, onBlur: handleFromBlur, onChange: handleFromChange, onFocus: handleFromFocus, placeholder: inputFromPlaceholder, readOnly: readOnly, required: required, validate: validateFrom, value: inputFromValue }), jsx(Icon, { icon: LongTailArrowRightIcon, className: pickerClasses.arrowIcon, "aria-hidden": "true" }), jsx(FormattedInput, { ...inputToProps, ref: toRef, "aria-disabled": disabled, "aria-label": "End date", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesTo, format: format, onBlur: handleToBlur, onChange: handleToChange, onFocus: handleToFocus, placeholder: inputToPlaceholder, readOnly: readOnly, required: required, validate: validateTo, value: inputToValue })] }));
+    return (jsxs(TextField, { ...restTextFieldProps, ...defaultTextFieldProps, ref: ref, className: cx(pickerClasses.host, className), clearable: !readOnly && clearable, suffix: suffix !== null && suffix !== void 0 ? suffix : defaultSuffix, children: [jsx(FormattedInput, { ...inputFromProps, ref: fromRef, "aria-disabled": disabled, "aria-label": "Start date", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesFrom, format: format, onBlur: handleFromBlur, onChange: handleFromChange, onFocus: handleFromFocus, placeholder: inputFromPlaceholder, readOnly: readOnly, required: required, validate: validateFrom, value: inputFromValue }), jsx(Icon, { icon: LongTailArrowRightIcon, className: pickerClasses.arrowIcon, "aria-hidden": "true" }), jsx(FormattedInput, { ...inputToProps, ref: toRef, "aria-disabled": disabled, "aria-label": "End date", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesTo, format: format, onBlur: handleToBlur, onChange: handleToChange, onFocus: handleToFocus, placeholder: inputToPlaceholder, readOnly: readOnly, required: required, validate: validateTo, value: inputToValue })] }));
 });
 
 export { RangePickerTrigger as default };

package/Section/Section.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+import { ContentHeaderProps } from '../ContentHeader';
+import { FilterAreaProps } from '../FilterArea';
+import { TabProps } from '../Tab';
+export interface SectionProps {
+    /**
+     * Additional style for the section container.
+     */
+    className?: string;
+    /**
+     * Accept `<ContentHeader />` component from `mezzanine`.
+     * Other components will trigger a warning.
+     */
+    contentHeader?: ReactElement<ContentHeaderProps>;
+    /**
+     * Accept `<FilterArea />` component from `mezzanine`.
+     * Other components will trigger a warning.
+     */
+    filterArea?: ReactElement<FilterAreaProps>;
+    /**
+     * Accept `<Tab />` component from `mezzanine`.
+     * Other components will trigger a warning.
+     */
+    tab?: ReactElement<TabProps>;
+}
+/**
+ * The react component for `mezzanine` section.
+ */
+declare const Section: import("react").ForwardRefExoticComponent<SectionProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Section;

package/Section/Section.js

@@ -0,0 +1,62 @@
+import { jsxs } from 'react/jsx-runtime';
+import { forwardRef, cloneElement, isValidElement } from 'react';
+import { sectionClasses } from '@mezzanine-ui/core/section';
+import ContentHeader from '../ContentHeader/ContentHeader.js';
+import FilterArea from '../FilterArea/FilterArea.js';
+import Tab from '../Tab/Tab.js';
+import cx from 'clsx';
+
+function getDisplayName(element) {
+    const type = element.type;
+    if (typeof type === 'string') {
+        return type;
+    }
+    return type.displayName
+        || type.name
+        || 'Unknown';
+}
+function isContentHeaderElement(element) {
+    return isValidElement(element) && element.type === ContentHeader;
+}
+function isFilterAreaElement(element) {
+    return isValidElement(element) && element.type === FilterArea;
+}
+function isTabElement(element) {
+    return isValidElement(element) && element.type === Tab;
+}
+/**
+ * The react component for `mezzanine` section.
+ */
+const Section = forwardRef(function Section(props, ref) {
+    const { children, className, contentHeader, filterArea, tab, } = props;
+    let renderedContentHeader = null;
+    let renderedFilterArea = null;
+    let renderedTab = null;
+    if (contentHeader) {
+        if (isContentHeaderElement(contentHeader)) {
+            renderedContentHeader = cloneElement(contentHeader, { size: 'sub' });
+        }
+        else if (isValidElement(contentHeader)) {
+            console.warn(`[Section] Invalid contentHeader type: <${getDisplayName(contentHeader)}>. Only <ContentHeader /> component from @mezzanine-ui/react is allowed.`);
+        }
+    }
+    if (filterArea) {
+        if (isFilterAreaElement(filterArea)) {
+            renderedFilterArea = cloneElement(filterArea, { size: 'sub' });
+        }
+        else if (isValidElement(filterArea)) {
+            console.warn(`[Section] Invalid filterArea type: <${getDisplayName(filterArea)}>. Only <FilterArea /> component from @mezzanine-ui/react is allowed.`);
+        }
+    }
+    if (tab) {
+        if (isTabElement(tab)) {
+            renderedTab = tab;
+        }
+        else if (isValidElement(tab)) {
+            console.warn(`[Section] Invalid tab type: <${getDisplayName(tab)}>. Only <Tab /> component from @mezzanine-ui/react is allowed.`);
+        }
+    }
+    return (jsxs("div", { ref: ref, className: cx(sectionClasses.host, className), children: [renderedContentHeader, renderedFilterArea, renderedTab, children] }));
+});
+
+export { Section as default };

package/Section/index.d.ts

@@ -0,0 +1,2 @@
+export type { SectionProps } from './Section';
+export { default } from './Section';

package/Select/Select.d.ts

@@ -23,10 +23,6 @@ export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'in
      * The other native props for input element.
      */
     inputProps?: Omit<SelectTriggerInputProps, 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
-    /**
-     * Whether to disable portal.
-     */
-    disablePortal?: boolean;
     /**
      * The max height of the dropdown list.
      */
@@ -60,6 +56,15 @@ export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'in
      * The size of input.
      */
     size?: SelectInputSize;
+    /**
+     * The z-index of the dropdown.
+     */
+    dropdownZIndex?: number | string;
+    /**
+     * Whether to enable portal for the dropdown.
+     * @default true
+     */
+    globalPortal?: boolean;
 }
 export type SelectMultipleProps = SelectBaseProps & {
     /**

package/Select/Select.js

@@ -14,7 +14,7 @@ import cx from 'clsx';
 
 const Select = forwardRef(function Select(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, disablePortal = false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, menuMaxHeight, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onScroll, options: optionsProp, placeholder = '', prefix, readOnly = false, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, type = 'default', value: valueProp, } = props;
+    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, menuMaxHeight, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onScroll, options: optionsProp, placeholder = '', prefix, readOnly = false, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, type = 'default', value: valueProp, dropdownZIndex, globalPortal = true, } = props;
     const [open, toggleOpen] = useState(false);
     const onOpen = useCallback(() => {
         // Prevent opening when readOnly is true
@@ -232,7 +232,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), children: jsx(Dropdown, { disabled: readOnly || disabled, disablePortal: disablePortal, maxHeight: menuMaxHeight, mode: mode, onScroll: onScroll, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: readOnly ? false : open, options: options, sameWidth: true, type: dropdownType, value: dropdownValue, 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, size: size, suffixActionIcon: suffixActionIcon, value: value === null ? undefined : 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, maxHeight: menuMaxHeight, mode: mode, onScroll: onScroll, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: readOnly ? false : open, options: options, sameWidth: true, type: dropdownType, value: dropdownValue, zIndex: dropdownZIndex, globalPortal: globalPortal, 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, size: size, suffixActionIcon: suffixActionIcon, value: value === null ? undefined : value }) }) }) }));
 });
 
 export { Select as default };