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

package/Dropdown/DropdownItem.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import keycode from 'keycode';
 import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
 import { dropdownClasses } from '@mezzanine-ui/core/dropdown/dropdown';
@@ -69,7 +69,7 @@ function truncateArrayDepth(input, maxDepth = 3, warn = true) {
     return truncate(input);
 }
 function DropdownItem(props) {
-    const { activeIndex, disabled = false, listboxId, listboxLabel, mode = 'single', options, value, type, maxHeight, actionConfig, onHover, onSelect, followText, headerContent, status, loadingText, emptyText, emptyIcon, onReachBottom, onLeaveBottom, onScroll, scrollbarDefer = true, scrollbarDisabled = false, scrollbarMaxWidth, scrollbarOptions, } = props;
+    const { activeIndex, disabled = false, listboxId, listboxLabel, mode = 'single', options, value, type, maxHeight, actionConfig, onHover, onSelect, followText, headerContent, status, loadingText, emptyText, emptyIcon, loadingPosition = 'full', onReachBottom, onLeaveBottom, onScroll, scrollbarDefer = true, scrollbarDisabled = false, scrollbarMaxWidth, scrollbarOptions, } = props;
     const optionsContent = truncateArrayDepth(options, 3);
     const listRef = useRef(null);
     const listWrapperRef = useRef(null);
@@ -327,8 +327,10 @@ function DropdownItem(props) {
         return renderDefaultOptions(optionList, startIndex);
     };
     const { elements: renderedOptions } = renderOptions(optionsContent, 0, -1);
-    // Show status when options are empty and status is provided
-    const shouldShowStatus = optionsContent.length === 0 && status;
+    // Show full status when options are empty and status is provided, but not when loadingPosition is 'bottom'
+    const shouldShowFullStatus = optionsContent.length === 0 && status && loadingPosition !== 'bottom';
+    // Show bottom loading when status is loading and loadingPosition is bottom
+    const shouldShowBottomLoading = status === 'loading' && loadingPosition === 'bottom';
     const listStyle = useMemo(() => {
         if (!maxHeight) {
             return undefined;
@@ -385,6 +387,34 @@ function DropdownItem(props) {
         listWrapperRef.current = viewport;
         wasAtBottomRef.current = getIsAtBottom(viewport);
     }, [getIsAtBottom]);
+    // Track previous loading state to only scroll when loading appears (not when it disappears)
+    const prevShouldShowBottomLoadingRef = useRef(false);
+    // Auto-scroll to bottom when bottom loading appears and user was at bottom
+    useEffect(() => {
+        // Only scroll when loading appears (transitions from false to true)
+        const loadingJustAppeared = shouldShowBottomLoading && !prevShouldShowBottomLoadingRef.current;
+        prevShouldShowBottomLoadingRef.current = shouldShowBottomLoading;
+        if (!loadingJustAppeared)
+            return;
+        const scrollToBottom = (element) => {
+            // Use requestAnimationFrame to ensure DOM is updated after loading element is rendered
+            requestAnimationFrame(() => {
+                element.scrollTop = element.scrollHeight;
+            });
+        };
+        if (shouldUseScrollbar) {
+            const viewport = viewportRef.current;
+            if (viewport && wasAtBottomRef.current) {
+                scrollToBottom(viewport);
+            }
+        }
+        else {
+            const listWrapperElement = listWrapperRef.current;
+            if (listWrapperElement && maxHeight && wasAtBottomRef.current) {
+                scrollToBottom(listWrapperElement);
+            }
+        }
+    }, [shouldShowBottomLoading, shouldUseScrollbar, maxHeight]);
     useEffect(() => {
         if (shouldUseScrollbar) {
             return;
@@ -455,8 +485,8 @@ function DropdownItem(props) {
         };
     }, [getIsAtBottom, shouldUseScrollbar, onReachBottom, onLeaveBottom, onScroll]);
     return (jsxs("ul", { "aria-label": listboxLabel || (optionsContent.length === 0 ? 'Dropdown options' : undefined), className: dropdownClasses.list, id: listboxId, ref: listRef, role: "listbox", style: listStyle, tabIndex: -1, children: [hasHeader && (jsx("li", { className: dropdownClasses.listHeader, role: "presentation", ref: headerRef, children: jsx("div", { className: dropdownClasses.listHeaderInner, children: headerContent }) })), maxHeight
-                ? (shouldUseScrollbar ? (jsx(Scrollbar, { className: dropdownClasses.listWrapper, defer: scrollbarDefer, disabled: false, events: scrollbarEvents, maxHeight: listWrapperStyle === null || listWrapperStyle === void 0 ? void 0 : listWrapperStyle.maxHeight, maxWidth: scrollbarMaxWidth, onViewportReady: handleViewportReady, options: scrollbarOptions, children: shouldShowStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (renderedOptions) })) : (jsx("div", { ref: listWrapperRef, className: dropdownClasses.listWrapper, style: listWrapperStyle, children: shouldShowStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (renderedOptions) })))
-                : shouldShowStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (renderedOptions), hasActions && (jsx("div", { ref: actionRef, children: jsx(DropdownAction, { ...actionConfig }) }))] }));
+                ? (shouldUseScrollbar ? (jsx(Scrollbar, { className: dropdownClasses.listWrapper, defer: scrollbarDefer, disabled: false, events: scrollbarEvents, maxHeight: listWrapperStyle === null || listWrapperStyle === void 0 ? void 0 : listWrapperStyle.maxHeight, maxWidth: scrollbarMaxWidth, onViewportReady: handleViewportReady, options: scrollbarOptions, children: shouldShowFullStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (jsxs(Fragment, { children: [renderedOptions, shouldShowBottomLoading && (jsx("li", { className: dropdownClasses.loadingMore, "aria-live": "polite", role: "status", children: jsx(DropdownStatus, { status: "loading", loadingText: loadingText }) }))] })) })) : (jsx("div", { ref: listWrapperRef, className: dropdownClasses.listWrapper, style: listWrapperStyle, children: shouldShowFullStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (jsxs(Fragment, { children: [renderedOptions, shouldShowBottomLoading && (jsx("li", { className: dropdownClasses.loadingMore, "aria-live": "polite", role: "status", children: jsx(DropdownStatus, { status: "loading", loadingText: loadingText }) }))] })) })))
+                : shouldShowFullStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (jsxs(Fragment, { children: [renderedOptions, shouldShowBottomLoading && (jsx("li", { className: dropdownClasses.loadingMore, "aria-live": "polite", role: "status", children: jsx(DropdownStatus, { status: "loading", loadingText: loadingText }) }))] })), hasActions && (jsx("div", { ref: actionRef, children: jsx(DropdownAction, { ...actionConfig }) }))] }));
 }
 
 export { DropdownItem as default };

package/Dropdown/DropdownItemCard.js

@@ -8,6 +8,7 @@ import Typography from '../Typography/Typography.js';
 import { highlightText } from './highlightText.js';
 import Icon from '../Icon/Icon.js';
 import Checkbox from '../Checkbox/Checkbox.js';
+import Separator from '../Separator/Separator.js';
 
 function DropdownItemCard(props) {
     const { active = false, appendIcon, appendContent, followText, id, label, level: levelProp, mode, name: _name, prependIcon, subTitle, validate, disabled, checked, defaultChecked, indeterminate = false, checkSite, onCheckedChange, onClick, className, onMouseEnter, showUnderline, } = props;
@@ -113,7 +114,7 @@ function DropdownItemCard(props) {
                     [dropdownClasses.cardDanger]: validate === 'danger',
                 }, className), id: id, role: "option", tabIndex: -1, onMouseEnter: onMouseEnter, onClick: handleClick, onKeyDown: handleKeyDown, children: jsxs("div", { className: dropdownClasses.cardContainer, children: [showPrependContent && (jsxs("div", { className: dropdownClasses.cardPrependContent, children: [prependIcon && jsx(Icon, { icon: prependIcon, color: iconColor }), checkSite === 'prefix' && mode === 'multiple' && (jsx(Checkbox, { checked: isChecked, disabled: disabled, indeterminate: indeterminate, onChange: handleCheckboxChange }))] })), jsxs("div", { className: dropdownClasses.cardBody, children: [cardLabel &&
                                     renderHighlightedText(labelParts, dropdownClasses.cardTitle, labelId), subTitleParts.length > 0 &&
-                                    renderHighlightedText(subTitleParts, dropdownClasses.cardDescription)] }), showAppendContent && (jsxs("div", { className: dropdownClasses.cardAppendContent, children: [appendContent && (jsx(Typography, { color: "text-neutral-light", children: appendContent })), appendIcon && jsx(Icon, { icon: appendIcon, color: iconColor }), checkSite === 'suffix' && isChecked && (jsx(Icon, { icon: CheckedIcon, color: appendIconColor, size: 16 }))] }))] }) }), showUnderline && jsx("div", { className: dropdownClasses.cardUnderline })] }));
+                                    renderHighlightedText(subTitleParts, dropdownClasses.cardDescription)] }), showAppendContent && (jsxs("div", { className: dropdownClasses.cardAppendContent, children: [appendContent && (jsx(Typography, { color: "text-neutral-light", children: appendContent })), appendIcon && jsx(Icon, { icon: appendIcon, color: iconColor }), checkSite === 'suffix' && isChecked && (jsx(Icon, { icon: CheckedIcon, color: appendIconColor, size: 16 }))] }))] }) }), showUnderline && (jsx("li", { role: "presentation", "aria-hidden": "true", children: jsx(Separator, { orientation: "horizontal", className: dropdownClasses.cardUnderline }) }))] }));
 }
 
 export { DropdownItemCard as default };

package/FloatingButton/FloatingButton.d.ts

@@ -0,0 +1,21 @@
+import { ButtonProps } from '../Button';
+export interface FloatingButtonProps extends Omit<ButtonProps, 'variant' | 'size' | 'className' | 'tooltipPosition'> {
+    /**
+     * Auto hide floating button when `open` is true.
+     * @default false
+     */
+    autoHideWhenOpen?: boolean;
+    /**
+     * The class name of the root element.
+     */
+    className?: string;
+    /**
+     * Whether the floating button is in open state.
+     */
+    open?: boolean;
+}
+/**
+ * The react component for `mezzanine` floating button.
+ */
+declare const FloatingButton: import("react").ForwardRefExoticComponent<FloatingButtonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FloatingButton;

package/FloatingButton/FloatingButton.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import Button from '../Button/Button.js';
+import { floatingButtonClasses } from '@mezzanine-ui/core/floating-button';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` floating button.
+ */
+const FloatingButton = forwardRef(function FloatingButton(props, ref) {
+    const { autoHideWhenOpen = false, children, className, open = false, ...rest } = props;
+    return (jsx("div", { ref: ref, className: cx(floatingButtonClasses.host, className), children: jsx(Button, { ...rest, className: cx(floatingButtonClasses.button, {
+                [floatingButtonClasses.buttonHidden]: autoHideWhenOpen && open,
+            }), variant: "base-primary", size: "main", tooltipPosition: "left", children: children }) }));
+});
+
+export { FloatingButton as default };

package/FloatingButton/index.d.ts

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

package/FloatingButton/index.js

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

package/Form/FormField.d.ts

@@ -1,4 +1,4 @@
-import { ControlFieldSlotLayout, FormFieldCounterColor, FormFieldSize, LabelLayout } from '@mezzanine-ui/core/form';
+import { ControlFieldSlotLayout, FormFieldCounterColor, FormFieldDensity, FormFieldLabelSpacing, FormFieldLayout } from '@mezzanine-ui/core/form';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { IconDefinition } from '@mezzanine-ui/icons';
 import { SeverityWithInfo } from '@mezzanine-ui/system/severity';
@@ -57,11 +57,27 @@ export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'
      */
     labelOptionalMarker?: string;
     /**
-     * The layout variant for the label area.
-     * Controls the visual styling and appearance of the label.
-     * @default LabelLayout.HORIZONTAL_MAIN
+     * The spacing variant for the label area.
+     * Controls the padding and min-height of the label.
+     * Only applicable when layout is 'horizontal' or 'stretch'.
+     * Ignored when layout is 'vertical'.
+     * @default FormFieldLabelSpacing.MAIN
      */
-    labelLayout?: LabelLayout;
+    labelSpacing?: FormFieldLabelSpacing;
+    /**
+     * The layout variant of the form field.
+     * Controls the arrangement direction of label and input.
+     * When set to 'vertical', density and labelSpacing are ignored.
+     * @default FormFieldLayout.HORIZONTAL
+     */
+    layout?: FormFieldLayout;
+    /**
+     * The density variant of the form field.
+     * Controls the width of label and max-width of data entry.
+     * Only applicable when layout is 'horizontal' or 'stretch'.
+     * Ignored when layout is 'vertical'.
+     */
+    density?: FormFieldDensity;
     /**
      * The name attribute for the form field.
      * Used to identify the field in form submissions and as htmlFor in the label.
@@ -71,11 +87,6 @@ export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'
      * To control the field passed from children whether should be required.
      */
     required?: boolean;
-    /**
-     * The size variant of the form field.
-     * Controls the layout and spacing of label, input, and other elements.
-     */
-    size: FormFieldSize;
     /**
      * The severity level of the form field.
      * Used to indicate the importance or urgency of the field.

package/Form/FormField.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { ControlFieldSlotLayout, LabelLayout, formFieldClasses, FormFieldCounterColor } from '@mezzanine-ui/core/form';
+import { ControlFieldSlotLayout, FormFieldLabelSpacing, FormFieldLayout, formFieldClasses, FormFieldCounterColor } from '@mezzanine-ui/core/form';
 import { FormControlContext } from './FormControlContext.js';
 import FormHintText from './FormHintText.js';
 import FormLabel from './FormLabel.js';
@@ -10,17 +10,25 @@ import cx from 'clsx';
  * The React component for `mezzanine` form field.
  */
 const FormField = forwardRef(function FormField(props, ref) {
-    const { children, className, counter, counterColor, controlFieldSlotLayout = ControlFieldSlotLayout.MAIN, disabled = false, fullWidth = false, hintText, hintTextIcon, label, labelInformationIcon, labelInformationText, labelOptionalMarker, labelLayout = LabelLayout.HORIZONTAL_MAIN, name, required = false, size, severity = 'info', ...rest } = props;
+    const { children, className, counter, counterColor, controlFieldSlotLayout = ControlFieldSlotLayout.MAIN, density, disabled = false, fullWidth = false, hintText, hintTextIcon, label, labelInformationIcon, labelInformationText, labelOptionalMarker, labelSpacing = FormFieldLabelSpacing.MAIN, layout = FormFieldLayout.HORIZONTAL, name, required = false, severity = 'info', ...rest } = props;
     const formControl = {
         disabled,
         fullWidth,
         required,
         severity,
     };
-    return (jsx("div", { ...rest, ref: ref, className: cx(formFieldClasses.host, formFieldClasses.size(size), {
+    const shouldApplyDensity = density && layout !== FormFieldLayout.VERTICAL;
+    const densityClass = shouldApplyDensity
+        ? formFieldClasses.density(density)
+        : undefined;
+    const shouldApplyLabelSpacing = layout !== FormFieldLayout.VERTICAL;
+    const labelSpacingClass = shouldApplyLabelSpacing
+        ? formFieldClasses.labelSpacing(labelSpacing)
+        : undefined;
+    return (jsx("div", { ...rest, ref: ref, className: cx(formFieldClasses.host, formFieldClasses.layout(layout), densityClass, {
             [formFieldClasses.disabled]: disabled,
             [formFieldClasses.fullWidth]: fullWidth,
-        }, className), children: jsxs(FormControlContext.Provider, { value: formControl, children: [label && (jsx(FormLabel, { className: cx(formFieldClasses.labelArea, `${formFieldClasses.labelArea}--${labelLayout}`), htmlFor: name, informationIcon: labelInformationIcon, informationText: labelInformationText, labelText: label, optionalMarker: labelOptionalMarker })), jsxs("div", { className: cx(formFieldClasses.dataEntry), children: [jsx("div", { className: cx(`${formFieldClasses.controlFieldSlot}--${controlFieldSlotLayout}`), children: children }), hintText || hintTextIcon || counter ? (jsxs("div", { className: cx(formFieldClasses.hintTextAndCounterArea, {
+        }, className), children: jsxs(FormControlContext.Provider, { value: formControl, children: [label && (jsx(FormLabel, { className: cx(formFieldClasses.labelArea, labelSpacingClass), htmlFor: name, informationIcon: labelInformationIcon, informationText: labelInformationText, labelText: label, optionalMarker: labelOptionalMarker })), jsxs("div", { className: cx(formFieldClasses.dataEntry), children: [jsx("div", { className: cx(`${formFieldClasses.controlFieldSlot}--${controlFieldSlotLayout}`), children: children }), hintText || hintTextIcon || counter ? (jsxs("div", { className: cx(formFieldClasses.hintTextAndCounterArea, {
                                 [formFieldClasses.hintTextAndCounterArea + '--align-right']: !(hintText || hintTextIcon) && counter,
                             }), children: [(hintText || hintTextIcon) && (jsx(FormHintText, { hintText: hintText, hintTextIcon: hintTextIcon, severity: severity })), counter && (jsx("span", { className: cx(formFieldClasses.counter, formFieldClasses.counterColor(counterColor || FormFieldCounterColor.INFO)), children: counter }))] })) : null] })] }) }));
 });

package/Input/Input.js

@@ -124,6 +124,7 @@ const Input = forwardRef(function Input(props, ref) {
             break;
         }
         case 'currency': {
+            // 需注意 input type 不應是 number，因為要允許輸入格式化後的字串（例如 1,000）
             const currencyProps = props;
             const { step = 1, max, min, onSpinUp, onSpinDown } = currencyProps;
             // 預設置右對齊
@@ -166,11 +167,17 @@ const Input = forwardRef(function Input(props, ref) {
             const { actionButton } = actionProps;
             if (actionButton.position === 'prefix') {
                 const { ...restActionButtonProps } = actionButton;
-                prefixExternalButton = (jsx(ActionButton, { ...restActionButtonProps, disabled: restActionButtonProps.disabled || disabled, size: size }));
+                const actionDisabled = typeof restActionButtonProps.disabled === 'boolean'
+                    ? restActionButtonProps.disabled
+                    : disabled || readonly;
+                prefixExternalButton = (jsx(ActionButton, { ...restActionButtonProps, disabled: actionDisabled, size: size }));
             }
             if (actionButton.position === 'suffix') {
                 const { ...restActionButtonProps } = actionButton;
-                suffixExternalButton = (jsx(ActionButton, { ...restActionButtonProps, disabled: restActionButtonProps.disabled || disabled, size: size }));
+                const actionDisabled = typeof restActionButtonProps.disabled === 'boolean'
+                    ? restActionButtonProps.disabled
+                    : disabled || readonly;
+                suffixExternalButton = (jsx(ActionButton, { ...restActionButtonProps, disabled: actionDisabled, size: size }));
             }
             break;
         }

package/Message/Message.js

@@ -5,8 +5,8 @@ import { messageClasses, messageIcons } from '@mezzanine-ui/core/message';
 import { messageTimerController } from './MessageTimerController.js';
 import Translate from '../Transition/Translate.js';
 import Icon from '../Icon/Icon.js';
-import { createNotifier } from '../Notifier/createNotifier.js';
 import cx from 'clsx';
+import { createNotifier } from '../Notifier/createNotifier.js';
 
 /**
  * The react component for `mezzanine` message.

package/MultipleDatePicker/MultipleDatePicker.js

@@ -1,13 +1,13 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useCallback, useEffect, useMemo, useRef } from 'react';
 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 { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { useCalendarContext } from '../Calendar/CalendarContext.js';
 import { useCalendarControls } from '../Calendar/useCalendarControls.js';
 import { usePickerDocumentEventClose } from '../Picker/usePickerDocumentEventClose.js';

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/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/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/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[];
     /**
@@ -113,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, 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 { 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(() => {

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';