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

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/FormattedInput.d.ts

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { type UseDateInputFormatterProps } from './useDateInputFormatter';
-export interface FormattedInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>, Pick<UseDateInputFormatterProps, 'errorMessages' | 'validate' | 'format' | 'onChange'> {
+export interface FormattedInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>, Pick<UseDateInputFormatterProps, 'errorMessages' | 'validate' | 'format' | 'onChange' | 'onPasteIsoValue'> {
     /**
      * Placeholder to show when not focused and value is empty
      */

package/Picker/FormattedInput.js

@@ -14,7 +14,7 @@ const FormattedInput = forwardRef(function FormattedInput(props, ref) {
         enabled: true,
         invalidInput: 'Input value is not valid.',
         invalidPaste: 'Pasted content is not valid.',
-    }, format, placeholder, validate, value: externalValue, onChange, onFocus, onBlur, ...inputProps } = props;
+    }, format, placeholder, validate, value: externalValue, onChange, onFocus, onBlur, onPasteIsoValue, ...inputProps } = props;
     const internalInputRef = useRef(null);
     const composedRef = useComposeRefs([ref, internalInputRef]);
     const { value, focused, handleKeyDown, handleFocus, handleBlur, handlePaste, } = useDateInputFormatter({
@@ -26,6 +26,7 @@ const FormattedInput = forwardRef(function FormattedInput(props, ref) {
         onFocus,
         onBlur,
         validate,
+        onPasteIsoValue,
     });
     const segments = useRef(parseFormatSegments(format)).current;
     const renderMixedColorDisplay = () => {

package/Picker/PickerTriggerWithSeparator.d.ts

@@ -63,6 +63,16 @@ export interface PickerTriggerWithSeparatorProps extends Omit<TextFieldProps, 'a
      * Can be used to trigger auto-focus to right input.
      */
     onLeftComplete?: () => void;
+    /**
+     * Callback when a valid ISO date is pasted into the left input.
+     * Allows parent to sync other fields (e.g., update time when date+time is pasted).
+     */
+    onPasteIsoValueLeft?: (isoValue: string) => void;
+    /**
+     * Callback when a valid ISO date is pasted into the right input.
+     * Allows parent to sync other fields (e.g., update date when date+time is pasted).
+     */
+    onPasteIsoValueRight?: (isoValue: string) => void;
     /**
      * Callback when right input is completed (all mask positions filled with valid value).
      */

package/Picker/PickerTriggerWithSeparator.js

@@ -12,7 +12,7 @@ import cx from 'clsx';
  * typically used for date-time pickers where left is date and right is time.
  */
 const PickerTriggerWithSeparator = forwardRef(function PickerTriggerWithSeparator(props, ref) {
-    const { className, clearable = true, disabled, errorMessagesLeft, errorMessagesRight, formatLeft, formatRight, inputLeftProps, inputLeftRef: inputLeftRefProp, inputRightProps, inputRightRef: inputRightRefProp, onBlurLeft, onBlurRight, onChangeLeft, onChangeRight, onFocusLeft, onFocusRight, onLeftComplete, onRightComplete, placeholderLeft, placeholderRight, readOnly, required, suffix, validateLeft, validateRight, valueLeft, valueRight, ...restTextFieldProps } = props;
+    const { className, clearable = true, disabled, errorMessagesLeft, errorMessagesRight, formatLeft, formatRight, inputLeftProps, inputLeftRef: inputLeftRefProp, inputRightProps, inputRightRef: inputRightRefProp, onBlurLeft, onBlurRight, onChangeLeft, onChangeRight, onFocusLeft, onFocusRight, onLeftComplete, onPasteIsoValueLeft, onPasteIsoValueRight, onRightComplete, placeholderLeft, placeholderRight, readOnly, required, suffix, validateLeft, validateRight, valueLeft, valueRight, ...restTextFieldProps } = props;
     const internalLeftRef = useRef(null);
     const internalRightRef = useRef(null);
     const leftRef = useComposeRefs([
@@ -74,7 +74,7 @@ const PickerTriggerWithSeparator = forwardRef(function PickerTriggerWithSeparato
     const handleRightBlur = useCallback((e) => {
         onBlurRight === null || onBlurRight === void 0 ? void 0 : onBlurRight(e);
     }, [onBlurRight]);
-    return (jsx(TextField, { ...restTextFieldProps, ...defaultTextFieldProps, ref: ref, className: cx(pickerClasses.host, className), clearable: !readOnly && clearable, suffix: suffix, children: jsxs("div", { className: pickerClasses.separatorInputs, children: [jsx("div", { className: pickerClasses.separatorInput, children: jsx(FormattedInput, { ...inputLeftProps, ref: leftRef, "aria-disabled": disabled, "aria-label": "Date input", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesLeft, format: formatLeft, onBlur: handleLeftBlur, onChange: handleLeftChange, onFocus: handleLeftFocus, placeholder: placeholderLeft, readOnly: readOnly, required: required, validate: validateLeft, value: valueLeft }) }), jsx("div", { className: pickerClasses.separator }), jsx("div", { className: pickerClasses.separatorInput, children: jsx(FormattedInput, { ...inputRightProps, ref: rightRef, "aria-disabled": disabled, "aria-label": "Time input", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesRight, format: formatRight, onBlur: handleRightBlur, onChange: handleRightChange, onFocus: handleRightFocus, placeholder: placeholderRight, readOnly: readOnly, required: required, validate: validateRight, value: valueRight }) })] }) }));
+    return (jsx(TextField, { ...restTextFieldProps, ...defaultTextFieldProps, ref: ref, className: cx(pickerClasses.host, className), clearable: !readOnly && clearable, suffix: suffix, children: jsxs("div", { className: pickerClasses.separatorInputs, children: [jsx("div", { className: pickerClasses.separatorInput, children: jsx(FormattedInput, { ...inputLeftProps, ref: leftRef, "aria-disabled": disabled, "aria-label": "Date input", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesLeft, format: formatLeft, onBlur: handleLeftBlur, onChange: handleLeftChange, onFocus: handleLeftFocus, onPasteIsoValue: onPasteIsoValueLeft, placeholder: placeholderLeft, readOnly: readOnly, required: required, validate: validateLeft, value: valueLeft }) }), jsx("div", { className: pickerClasses.separator }), jsx("div", { className: pickerClasses.separatorInput, children: jsx(FormattedInput, { ...inputRightProps, ref: rightRef, "aria-disabled": disabled, "aria-label": "Time input", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesRight, format: formatRight, onBlur: handleRightBlur, onChange: handleRightChange, onFocus: handleRightFocus, onPasteIsoValue: onPasteIsoValueRight, placeholder: placeholderRight, readOnly: readOnly, required: required, validate: validateRight, value: valueRight }) })] }) }));
 });
 
 export { PickerTriggerWithSeparator, PickerTriggerWithSeparator as default };

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/Picker/useDateInputFormatter.d.ts

@@ -38,6 +38,12 @@ export interface UseDateInputFormatterProps {
      * Called after format validation passes.
      */
     validate?: (isoDate: string) => boolean;
+    /**
+     * Callback when a valid ISO date is pasted.
+     * This allows parent components to handle cross-field updates
+     * (e.g., updating time field when date+time is pasted into date field).
+     */
+    onPasteIsoValue?: (isoValue: string) => void;
 }
 /**
  * Hook for formatting date/time input with mask format

package/Picker/useDateInputFormatter.js

@@ -12,7 +12,7 @@ function useDateInputFormatter(props) {
         enabled: true,
         invalidInput: 'Input value is not valid.',
         invalidPaste: 'Pasted content is not valid.',
-    }, format, value: externalValue = '', onChange, inputRef, onFocus: onFocusProp, onBlur: onBlurProp, validate, } = props;
+    }, format, value: externalValue = '', onChange, inputRef, onFocus: onFocusProp, onBlur: onBlurProp, validate, onPasteIsoValue, } = props;
     const { parseFormattedValue, isValid, locale, formatToString } = useCalendarContext();
     const maskFormat = useRef(new MaskFormat(format)).current;
     const [internalValue, setInternalValue] = useState(externalValue || getTemplateWithoutBrackets(format));
@@ -325,6 +325,8 @@ function useDateInputFormatter(props) {
             // If pasted data is a valid ISO date, format it accordingly
             const parsedDate = formatToString(locale, pasteData, format);
             if (parsedDate) {
+                // Notify parent about the full ISO value for cross-field sync
+                onPasteIsoValue === null || onPasteIsoValue === void 0 ? void 0 : onPasteIsoValue(pasteData);
                 triggerChange(parsedDate);
                 return;
             }
@@ -363,6 +365,7 @@ function useDateInputFormatter(props) {
         errorMessages,
         internalValue,
         maskFormat,
+        onPasteIsoValue,
         triggerChange,
         isValid,
         format,

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

@@ -1,17 +1,11 @@
 import { DropdownOption, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
 import { SelectInputSize } from '@mezzanine-ui/core/select';
-import React, { ReactElement } from 'react';
 import { FormElementFocusHandlers } from '../Form';
 import { SelectTriggerInputProps, SelectTriggerProps, SelectValue } from './typings';
 export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'mode' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onScroll' | 'type' | 'renderValue' | 'value'>, FormElementFocusHandlers {
-    /**
-     * The children of select (Option components).
-     * If `options` is provided, this will be ignored.
-     */
-    children?: ReactElement | ReactElement[];
     /**
      * Direct options array for dropdown (supports tree structure).
-     * If provided, `children` will be ignored and `type` will be automatically set.
+     * If provided, `type` will be automatically set.
      */
     options?: DropdownOption[];
     /**
@@ -23,10 +17,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 +50,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 & {
     /**
@@ -108,5 +107,5 @@ export type SelectSingleProps = SelectBaseProps & {
     value?: SelectValue | null;
 };
 export type SelectProps = SelectMultipleProps | SelectSingleProps;
-declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
+declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Select;

package/Select/Select.js

@@ -2,10 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { selectClasses } from '@mezzanine-ui/core/select';
 import isArray from 'lodash/isArray';
-import React, { forwardRef, useContext, useState, useCallback, useRef, useMemo, Children } from 'react';
+import { forwardRef, useContext, useState, useCallback, useRef, useMemo } from 'react';
 import { useSelectValueControl } from '../Form/useSelectValueControl.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
-import Option from './Option.js';
 import { SelectControlContext } from './SelectControlContext.js';
 import SelectTrigger from './SelectTrigger.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
@@ -14,7 +13,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 { 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
@@ -78,39 +77,19 @@ const Select = forwardRef(function Select(props, ref) {
         }
         return null;
     }, []);
-    // Convert children (Option components) to DropdownOption format
-    // Or use provided options directly
+    // Use provided options directly
     const options = useMemo(() => {
-        // If options prop is provided, use it directly
-        if (optionsProp) {
-            // In tree mode (multiple mode with tree structure), ensure all options have checkbox
-            if (mode === 'multiple') {
-                const hasTreeStructure = optionsProp.some((opt) => opt.children && opt.children.length > 0);
-                if (hasTreeStructure) {
-                    return addCheckboxToTreeOptions(optionsProp);
-                }
+        if (!optionsProp)
+            return [];
+        // In tree mode (multiple mode with tree structure), ensure all options have checkbox
+        if (mode === 'multiple') {
+            const hasTreeStructure = optionsProp.some((opt) => opt.children && opt.children.length > 0);
+            if (hasTreeStructure) {
+                return addCheckboxToTreeOptions(optionsProp);
             }
-            return optionsProp;
         }
-        // Otherwise, convert children to options
-        if (!children)
-            return [];
-        return Children.toArray(children)
-            .filter((child) => {
-            var _a;
-            return (React.isValidElement(child) &&
-                (child.type === Option || ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Option'));
-        })
-            .map((child) => {
-            const props = child.props;
-            return {
-                id: props.value,
-                name: props.children,
-                showCheckbox: mode === 'multiple',
-                checkSite: mode === 'multiple' ? 'prefix' : 'suffix',
-            };
-        });
-    }, [children, mode, optionsProp, addCheckboxToTreeOptions]);
+        return optionsProp;
+    }, [mode, optionsProp, addCheckboxToTreeOptions]);
     // Determine dropdown type based on options structure and mode
     // Tree mode is only available in multiple mode
     const dropdownType = useMemo(() => {
@@ -232,7 +211,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 };

package/Select/SelectTrigger.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
 import { selectClasses } from '@mezzanine-ui/core/select';
 import { ChevronDownIcon } from '@mezzanine-ui/icons';
+import { forwardRef } from 'react';
 import SelectTriggerTags from './SelectTriggerTags.js';
 import Icon from '../Icon/Icon.js';
 import TextField from '../TextField/TextField.js';
@@ -12,24 +12,36 @@ const isMultipleSelection = (props) => props.mode === 'multiple';
 function SelectTriggerComponent(props) {
     var _a, _b, _c;
     const { active, className, disabled, forceHideSuffixActionIcon, inputProps, innerRef, inputRef, isForceClearable = false, mode = 'single', onTagClose, overflowStrategy = 'counter', placeholder, readOnly, required, searchText, size = 'main', showTextInputAfterTags = false, suffixAction, suffixActionIcon: suffixActionIconProp, type = 'default', onClick, ...restTextFieldProps } = props;
+    const renderValueProp = 'renderValue' in props ? props.renderValue : undefined;
+    // Exclude renderValue to avoid leaking unknown props to DOM.
+    const sanitizedTextFieldProps = (() => {
+        if ('renderValue' in restTextFieldProps) {
+            const { renderValue: _removed, ...rest } = restTextFieldProps;
+            return rest;
+        }
+        return restTextFieldProps;
+    })();
     /** Render value to string for single selection trigger input */
     const renderValue = () => {
         var _a, _b;
         if (isMultipleSelection(props))
             return;
-        if (typeof props.renderValue === 'function') {
-            return props.renderValue(props.value);
+        if (typeof renderValueProp === 'function') {
+            return renderValueProp(props.value);
         }
         return (_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '';
     };
     /** Compute suffix action icon */
     const suffixActionIcon = suffixActionIconProp || (jsx(Icon, { icon: ChevronDownIcon, onClick: (e) => {
+            var _a;
             e.stopPropagation();
             if (suffixAction) {
                 suffixAction();
             }
             else {
-                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                // Delegate to trigger click behavior without fabricating a synthetic event.
+                (_a = e.currentTarget
+                    .closest(`.${selectClasses.trigger}`)) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent('click', { bubbles: true }));
             }
         }, className: cx(selectClasses.triggerSuffixActionIcon, {
             [selectClasses.triggerSuffixActionIconActive]: active,
@@ -43,7 +55,7 @@ function SelectTriggerComponent(props) {
         }
         return {};
     })();
-    return (jsxs(TextField, { ref: innerRef, ...interactiveProps, ...restTextFieldProps, onClick: onClick, active: active, className: cx(selectClasses.trigger, selectClasses.triggerMode(mode), selectClasses.triggerSelected(Array.isArray(props.value) ? (_a = props.value) === null || _a === void 0 ? void 0 : _a.length : props.value), {
+    return (jsxs(TextField, { ref: innerRef, ...interactiveProps, ...sanitizedTextFieldProps, onClick: onClick, active: active, className: cx(selectClasses.trigger, selectClasses.triggerMode(mode), selectClasses.triggerSelected(Array.isArray(props.value) ? (_a = props.value) === null || _a === void 0 ? void 0 : _a.length : props.value), {
             [selectClasses.triggerReadOnly]: readOnly,
             [selectClasses.triggerDisabled]: disabled,
         }, className), error: type === 'error', size: size, suffix: forceHideSuffixActionIcon ? undefined : suffixActionIcon, clearable: isForceClearable ||
@@ -53,9 +65,11 @@ function SelectTriggerComponent(props) {
 }
 const SelectTrigger = forwardRef((props, ref) => {
     if (props.mode === 'multiple') {
-        return (jsx(SelectTriggerComponent, { ...props, innerRef: ref }));
+        const { mode: _mode, value, ...multipleModeProps } = props;
+        return (jsx(SelectTriggerComponent, { ...multipleModeProps, innerRef: ref, mode: "multiple", value: Array.isArray(value) ? value : undefined }));
     }
-    return (jsx(SelectTriggerComponent, { ...props, innerRef: ref }));
+    const { mode: _mode, overflowStrategy: _overflowStrategy, value, ...singleModeProps } = props;
+    return (jsx(SelectTriggerComponent, { ...singleModeProps, innerRef: ref, mode: "single", value: Array.isArray(value) ? undefined : value }));
 });
 
 export { SelectTrigger as default };

package/Select/index.d.ts

@@ -1,13 +1,9 @@
 export { default as OptionGroup } from '../Menu/MenuItemGroup';
 export type { MenuItemGroupProps as OptionGroupProps } from '../Menu/MenuItemGroup';
-export { default as Option } from './Option';
-export type { OptionProps } from './Option';
 export { default } from './Select';
 export type { SelectProps } from './Select';
 export { SelectControlContext } from './SelectControlContext';
 export { default as SelectTrigger } from './SelectTrigger';
 export { default as SelectTriggerTags } from './SelectTriggerTags';
 export type { SelectTriggerTagsProps } from './SelectTriggerTags';
-export { default as TreeSelect } from './TreeSelect';
-export type { TreeSelectProps } from './TreeSelect';
 export * from './typings';

package/Select/index.js

@@ -1,7 +1,5 @@
 export { default as OptionGroup } from '../Menu/MenuItemGroup.js';
-export { default as Option } from './Option.js';
 export { default } from './Select.js';
 export { SelectControlContext } from './SelectControlContext.js';
 export { default as SelectTrigger } from './SelectTrigger.js';
 export { default as SelectTriggerTags } from './SelectTriggerTags.js';
-export { default as TreeSelect } from './TreeSelect.js';

package/Select/typings.d.ts

@@ -7,10 +7,6 @@ export interface SelectValue<T = string> {
     id: T;
     name: string;
 }
-export interface TreeSelectOption<T = string> extends SelectValue<T> {
-    dynamicChildrenFetching?: boolean;
-    siblings?: TreeSelectOption<T>[];
-}
 export interface SelectControl<T = string> {
     value: SelectValue<T>[] | SelectValue<T> | null;
     onChange: (v: SelectValue<T> | null) => SelectValue<T>[] | SelectValue<T> | null;

package/Select/useSelectTriggerTags.d.ts

@@ -1,5 +1,5 @@
-import { JSX, RefObject } from 'react';
 import { TagSize } from '@mezzanine-ui/core/tag';
+import { JSX, RefObject } from 'react';
 import { SelectValue } from './typings';
 export interface UseSelectTriggerTagsProps {
     /**