@mezzanine-ui/react 1.0.0-beta.5 → 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 { FormFieldCounterColor, FormFieldSize } 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';
@@ -13,6 +13,12 @@ export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'
      * @default FormFieldCounterColor.INFO
      */
     counterColor?: FormFieldCounterColor;
+    /**
+     * The layout variant for the control field slot.
+     * Controls the visual styling and appearance of the input control area.
+     * @default ControlFieldSlotLayout.MAIN
+     */
+    controlFieldSlotLayout?: ControlFieldSlotLayout;
     /**
      * To control the field passed from children whether should be disabled.
      * The form message won't appear if disabled.
@@ -34,7 +40,7 @@ export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'
     /**
      * The label text for the form field.
      */
-    label: string;
+    label?: string;
     /**
      * The icon to display next to the label.
      * When provided, displays an icon that shows a tooltip on hover.
@@ -50,6 +56,28 @@ export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'
      * Typically used to show "(optional)" or similar text.
      */
     labelOptionalMarker?: string;
+    /**
+     * 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
+     */
+    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.
@@ -59,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 { 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, disabled = false, fullWidth = false, hintText, hintTextIcon, label, labelInformationIcon, labelInformationText, labelOptionalMarker, 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: [jsx(FormLabel, { className: formFieldClasses.labelArea, htmlFor: name, informationIcon: labelInformationIcon, informationText: labelInformationText, labelText: label, optionalMarker: labelOptionalMarker }), jsxs("div", { className: cx(formFieldClasses.dataEntry), 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

@@ -8,7 +8,6 @@ import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { formatNumberWithCommas } from '../utils/format-number-with-commas.js';
 import { parseNumberWithCommas } from '../utils/parse-number-with-commas.js';
 import Icon from '../Icon/Icon.js';
-import Dropdown from '../Dropdown/Dropdown.js';
 import SelectButton from './SelectButton/SelectButton.js';
 import ActionButton from './ActionButton/ActionButton.js';
 import SpinnerButton from './SpinnerButton/SpinnerButton.js';
@@ -125,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;
             // 預設置右對齊
@@ -167,41 +167,32 @@ 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;
         }
         case 'select': {
             const selectProps = props;
-            const { selectButton, options, dropdownWidth = 120, dropdownMaxHeight = 114, } = selectProps;
-            const defaultOptions = options || [];
-            const selectedOptions = defaultOptions.length > 0
-                ? defaultOptions.map((option) => ({
-                    ...option,
-                    ...(option.id === selectProps.selectedValue
-                        ? { checkSite: 'suffix' }
-                        : {}),
-                }))
-                : [];
+            const { selectButton, options, dropdownWidth = 120, dropdownMaxHeight = 114, dropdownPlacement = 'bottom-start', } = selectProps;
             if (selectButton.position === 'both' ||
                 selectButton.position === 'prefix') {
                 const { ...restSelectButtonProps } = selectButton;
-                prefixExternalButton = (jsx(Dropdown, { options: selectedOptions, value: selectProps.selectedValue, customWidth: dropdownWidth, maxHeight: dropdownMaxHeight, placement: "bottom-start", onSelect: (option) => {
-                        var _a;
-                        (_a = selectProps.onSelect) === null || _a === void 0 ? void 0 : _a.call(selectProps, option.id);
-                    }, children: jsx(SelectButton, { ...restSelectButtonProps, disabled: restSelectButtonProps.disabled || disabled, size: size }) }));
+                prefixExternalButton = (jsx(SelectButton, { ...restSelectButtonProps, disabled: restSelectButtonProps.disabled || disabled, dropdownMaxHeight: dropdownMaxHeight, dropdownPlacement: dropdownPlacement, dropdownWidth: dropdownWidth, onSelect: selectProps.onSelect, options: options, size: size }));
             }
             if (selectButton.position === 'both' ||
                 selectButton.position === 'suffix') {
                 const { ...restSelectButtonProps } = selectButton;
-                suffixExternalButton = (jsx(Dropdown, { options: selectedOptions, value: selectProps.selectedValue, customWidth: dropdownWidth, maxHeight: dropdownMaxHeight, placement: "bottom-start", onSelect: (option) => {
-                        var _a;
-                        (_a = selectProps.onSelect) === null || _a === void 0 ? void 0 : _a.call(selectProps, option.id);
-                    }, children: jsx(SelectButton, { ...restSelectButtonProps, disabled: restSelectButtonProps.disabled || disabled, size: size }) }));
+                suffixExternalButton = (jsx(SelectButton, { ...restSelectButtonProps, disabled: restSelectButtonProps.disabled || disabled, dropdownMaxHeight: dropdownMaxHeight, dropdownPlacement: dropdownPlacement, dropdownWidth: dropdownWidth, onSelect: selectProps.onSelect, options: options, size: size }));
             }
             break;
         }

package/Input/SelectButton/SelectButton.d.ts

@@ -1,20 +1,41 @@
 import { InputSize } from '@mezzanine-ui/core/input';
+import { DropdownOption } from '@mezzanine-ui/core/dropdown/dropdown';
+import { PopperPlacement } from '../../Popper';
 import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
-export interface SelectButtonProps extends Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'type' | 'disabled'> {
+export interface SelectButtonProps extends Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'disabled' | 'onSelect' | 'type' | 'selectedValue'> {
     /**
      * Whether the select button is disabled.
      */
     disabled?: boolean;
     /**
-     * The value of select button.
+     * The custom width of the dropdown.
      */
-    value?: string;
+    dropdownWidth?: number | string;
+    /**
+     * The max height of the dropdown.
+     */
+    dropdownMaxHeight?: number | string;
+    /**
+     * The placement of the dropdown.
+     */
+    dropdownPlacement?: PopperPlacement;
+    /**
+     * The options of the dropdown.
+     */
+    options?: DropdownOption[];
+    /**
+     * Callback when an option is selected.
+     */
+    onSelect?: (value: string) => void;
     /**
      * The size of select button.
      * @default 'main'
      */
     size?: InputSize;
+    /**
+     * The value of select button.
+     */
+    value?: string;
 }
-/** @TODO dropdown menu with button */
 declare const SelectButton: import("react").ForwardRefExoticComponent<SelectButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default SelectButton;

package/Input/SelectButton/SelectButton.js

@@ -1,21 +1,33 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { inputSelectButtonClasses } from '@mezzanine-ui/core/input';
-import { forwardRef } from 'react';
+import { forwardRef, useState, useCallback } from 'react';
 import Rotate from '../../Transition/Rotate.js';
 import { ChevronDownIcon } from '@mezzanine-ui/icons';
 import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import Dropdown from '../../Dropdown/Dropdown.js';
 import Icon from '../../Icon/Icon.js';
 import cx from 'clsx';
 
-/** @TODO dropdown menu with button */
 const SelectButton = forwardRef(function SelectButton(props, ref) {
-    const { className, disabled, value, size = 'main', ...rest } = props;
-    return (jsxs("button", { ref: ref, type: "button", disabled: disabled, className: cx(inputSelectButtonClasses.host, disabled && inputSelectButtonClasses.disabled, size === 'main' ? inputSelectButtonClasses.main : inputSelectButtonClasses.sub, className), title: value, ...rest, children: [jsx("span", { className: inputSelectButtonClasses.text, children: value }), jsx(Rotate
-            /** @TODO in=true when dropdown opened */
-            , { 
-                /** @TODO in=true when dropdown opened */
-                in: false, duration: MOTION_DURATION.fast, easing: MOTION_EASING.standard, children: jsx(Icon, { className: inputSelectButtonClasses.icon, icon: ChevronDownIcon, size: 16 }) })] }));
+    const { className, disabled, dropdownMaxHeight = 114, dropdownPlacement = 'bottom-start', dropdownWidth = 120, onSelect, options = [], size = 'main', value, ...rest } = props;
+    const [open, setOpen] = useState(false);
+    const handleOpen = useCallback(() => {
+        if (!disabled) {
+            setOpen(true);
+        }
+    }, [disabled]);
+    const handleClose = useCallback(() => {
+        setOpen(false);
+    }, []);
+    const handleSelect = useCallback((option) => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(option.id);
+    }, [onSelect]);
+    const dropdownOptions = options.map((option) => ({
+        ...option,
+        ...(option.id === value ? { checkSite: 'suffix' } : {}),
+    }));
+    return (jsx(Dropdown, { customWidth: dropdownWidth, disabled: disabled, maxHeight: dropdownMaxHeight, onClose: handleClose, onOpen: handleOpen, onSelect: handleSelect, options: dropdownOptions, placement: dropdownPlacement, value: value, children: jsxs("button", { ref: ref, type: "button", disabled: disabled, className: cx(inputSelectButtonClasses.host, disabled && inputSelectButtonClasses.disabled, size === 'main' ? inputSelectButtonClasses.main : inputSelectButtonClasses.sub, className), title: value, ...rest, children: [jsx("span", { className: inputSelectButtonClasses.text, children: value }), jsx(Rotate, { in: open, duration: MOTION_DURATION.fast, easing: MOTION_EASING.standard, children: jsx(Icon, { className: inputSelectButtonClasses.icon, icon: ChevronDownIcon, size: 16 }) })] }) }));
 });
 
 export { SelectButton as default };

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

@@ -21,6 +21,17 @@ export interface MediaPreviewModalProps extends Omit<ModalContainerProps, 'child
      * @default false
      */
     disablePrev?: boolean;
+    /**
+     * Enable circular navigation (wrap around at boundaries).
+     * When enabled, navigating past the last item goes to the first,
+     * and navigating before the first item goes to the last.
+     *
+     * Note: This only applies in uncontrolled mode. In controlled mode
+     * (when onNext/onPrev are provided), you must implement circular
+     * navigation logic in your callbacks.
+     * @default false
+     */
+    enableCircularNavigation?: boolean;
     /**
      * Array of media items to display.
      * Each item should be a valid image URL or React node.

package/Modal/MediaPreviewModal.js

@@ -15,7 +15,7 @@ import cx from 'clsx';
  * Displays media items with navigation controls and a close button.
  */
 const MediaPreviewModal = forwardRef(function MediaPreviewModal(props, ref) {
-    const { className, container, currentIndex: controlledIndex, defaultIndex = 0, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disableNext = false, disablePortal = false, disablePrev = false, mediaItems, onBackdropClick, onClose, onIndexChange, onNext, onPrev, open, showPaginationIndicator = true, ...rest } = props;
+    const { className, container, currentIndex: controlledIndex, defaultIndex = 0, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disableNext = false, disablePortal = false, disablePrev = false, enableCircularNavigation = false, mediaItems, onBackdropClick, onClose, onIndexChange, onNext, onPrev, open, showPaginationIndicator = true, ...rest } = props;
     const { Container: ModalContainer } = useModalContainer();
     // Determine if component is in controlled mode
     const isControlled = controlledIndex !== undefined;
@@ -37,7 +37,13 @@ const MediaPreviewModal = forwardRef(function MediaPreviewModal(props, ref) {
         }
         else {
             // Uncontrolled mode: update internal state
-            const nextIndex = Math.min(currentIndex + 1, mediaItems.length - 1);
+            let nextIndex;
+            if (enableCircularNavigation) {
+                nextIndex = (currentIndex + 1) % mediaItems.length;
+            }
+            else {
+                nextIndex = Math.min(currentIndex + 1, mediaItems.length - 1);
+            }
             setInternalIndex(nextIndex);
             onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(nextIndex);
         }
@@ -49,14 +55,25 @@ const MediaPreviewModal = forwardRef(function MediaPreviewModal(props, ref) {
         }
         else {
             // Uncontrolled mode: update internal state
-            const prevIndex = Math.max(currentIndex - 1, 0);
+            let prevIndex;
+            if (enableCircularNavigation) {
+                prevIndex =
+                    (currentIndex - 1 + mediaItems.length) % mediaItems.length;
+            }
+            else {
+                prevIndex = Math.max(currentIndex - 1, 0);
+            }
             setInternalIndex(prevIndex);
             onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(prevIndex);
         }
     };
     // Auto-calculate disable states for uncontrolled mode
-    const isNextDisabled = disableNext || currentIndex >= mediaItems.length - 1;
-    const isPrevDisabled = disablePrev || currentIndex <= 0;
+    const isNextDisabled = enableCircularNavigation
+        ? false
+        : disableNext || currentIndex >= mediaItems.length - 1;
+    const isPrevDisabled = enableCircularNavigation
+        ? false
+        : disablePrev || currentIndex <= 0;
     const [displayedIndices, setDisplayedIndices] = useState([
         currentIndex,
     ]);
@@ -148,8 +165,8 @@ const MediaPreviewModal = forwardRef(function MediaPreviewModal(props, ref) {
                 enter: MOTION_DURATION.fast,
                 exit: MOTION_DURATION.fast,
             }, easing: {
-                enter: MOTION_EASING.entrance,
-                exit: MOTION_EASING.exit,
+                enter: MOTION_EASING.standard,
+                exit: MOTION_EASING.standard,
             }, in: isCurrent, children: mediaElement.element }, index));
     };
     return (jsxs(ModalContainer, { className: modalClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: [jsx("div", { ...rest, className: cx(modalClasses.host, modalClasses.mediaPreview, className), role: "dialog", children: jsx("div", { className: modalClasses.mediaPreviewContent, children: jsx("div", { className: modalClasses.mediaPreviewMediaContainer, children: displayedIndices.map((index) => renderMedia(index)) }) }) }), jsx(ClearActions, { className: modalClasses.mediaPreviewCloseButton, onClick: onClose, type: "embedded", variant: "contrast" }), mediaItems.length > 1 && (jsx("button", { "aria-disabled": isPrevDisabled, "aria-label": "Previous media", className: cx(modalClasses.mediaPreviewNavButton, modalClasses.mediaPreviewNavButtonPrev), disabled: isPrevDisabled, onClick: handlePrev, title: "Previous", type: "button", children: jsx(Icon, { icon: ChevronLeftIcon, size: 16, color: "fixed-light" }) })), mediaItems.length > 1 && (jsx("button", { "aria-disabled": isNextDisabled, "aria-label": "Next media", className: cx(modalClasses.mediaPreviewNavButton, modalClasses.mediaPreviewNavButtonNext), disabled: isNextDisabled, onClick: handleNext, title: "Next", type: "button", children: jsx(Icon, { icon: ChevronRightIcon, size: 16, color: "fixed-light" }) })), showPaginationIndicator && mediaItems.length > 1 && (jsxs("div", { "aria-label": `Page ${currentIndex + 1} of ${mediaItems.length}`, className: modalClasses.mediaPreviewPaginationIndicator, children: [currentIndex + 1, "/", mediaItems.length] }))] }));

package/Modal/Modal.d.ts

@@ -22,7 +22,7 @@ interface CommonModalProps extends Omit<ModalContainerProps, 'children'>, Pick<N
     modalStatusType?: ModalStatusType;
     /**
      * Controls whether or not to show dismiss button at top-end.
-     * @default false
+     * @default true
      */
     showDismissButton?: boolean;
 }

package/Modal/Modal.js

@@ -12,7 +12,7 @@ import cx from 'clsx';
  * The react component for `mezzanine` modal.
  */
 const Modal = forwardRef(function Modal(props, ref) {
-    const { actionsButtonLayout, annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, cancelButtonProps, cancelText, children, className, confirmButtonProps, confirmText, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, extendedSplitLeftSideContent, extendedSplitRightSideContent, fullScreen = false, loading = false, modalStatusType = 'info', modalType = 'standard', onBackdropClick, onCancel, onClose, onConfirm, open, passwordButtonProps, passwordButtonText, passwordChecked, passwordCheckedLabel, passwordCheckedOnChange, passwordOnClick, showCancelButton, showDismissButton = false, showModalFooter = false, showModalHeader, showStatusTypeIcon, size = 'regular', statusTypeIconLayout, supportingText, supportingTextAlign, title, titleAlign, ...rest } = props;
+    const { actionsButtonLayout, annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, cancelButtonProps, cancelText, children, className, confirmButtonProps, confirmText, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, extendedSplitLeftSideContent, extendedSplitRightSideContent, fullScreen = false, loading = false, modalStatusType = 'info', modalType = 'standard', onBackdropClick, onCancel, onClose, onConfirm, open, passwordButtonProps, passwordButtonText, passwordChecked, passwordCheckedLabel, passwordCheckedOnChange, passwordOnClick, showCancelButton, showDismissButton = true, showModalFooter = false, showModalHeader, showStatusTypeIcon, size = 'regular', statusTypeIconLayout, supportingText, supportingTextAlign, title, titleAlign, ...rest } = props;
     const modalControl = useMemo(() => ({
         loading,
         modalStatusType: modalStatusType,

package/Modal/useModalContainer.js

@@ -3,8 +3,9 @@ import { modalClasses } from '@mezzanine-ui/core/modal';
 import { forwardRef, useState } from 'react';
 import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
 import useTopStack from '../_internal/SlideFadeOverlay/useTopStack.js';
+import { MOTION_EASING } from '@mezzanine-ui/system/motion';
 import Backdrop from '../Backdrop/Backdrop.js';
-import Fade from '../Transition/Fade.js';
+import Scale from '../Transition/Scale.js';
 import cx from 'clsx';
 
 const defaultOptions = {
@@ -35,7 +36,10 @@ const ModalContainer = forwardRef(function ModalContainer(props, ref) {
     if (!open && exited) {
         return null;
     }
-    return (jsx(Backdrop, { className: cx(className), container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation", children: jsx(Fade, { in: open, onEntered: () => setExited(false), onExited: () => setExited(true), children: jsx("div", { ref: ref, children: children }) }) }));
+    return (jsx(Backdrop, { className: cx(className), container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation", children: jsx(Scale, { easing: {
+                enter: MOTION_EASING.entrance,
+                exit: MOTION_EASING.exit,
+            }, in: open, onEntered: () => setExited(false), onExited: () => setExited(true), children: jsx("div", { className: modalClasses.contentWrapper, ref: ref, children: children }) }) }));
 });
 function useModalContainer() {
     return {

package/MultipleDatePicker/MultipleDatePicker.d.ts

@@ -0,0 +1,62 @@
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { MultipleDatePickerValue } from '@mezzanine-ui/core/multiple-date-picker';
+import { CalendarProps } from '../Calendar';
+import { CalendarFooterActionsProps } from '../Calendar/CalendarFooterActions';
+import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
+import { MultipleDatePickerTriggerProps } from './MultipleDatePickerTrigger';
+export interface MultipleDatePickerProps extends Pick<MultipleDatePickerTriggerProps, 'className' | 'clearable' | 'disabled' | 'error' | 'fullWidth' | 'overflowStrategy' | 'prefix' | 'readOnly' | 'size'>, Pick<CalendarProps, 'disabledMonthSwitch' | 'disableOnNext' | 'disableOnPrev' | 'disableOnDoubleNext' | 'disableOnDoublePrev' | 'disabledYearSwitch' | 'displayMonthLocale' | 'isDateDisabled'> {
+    /**
+     * Custom action button props. Allows overriding confirm/cancel button text and behavior.
+     */
+    actions?: Partial<CalendarFooterActionsProps['actions']>;
+    /**
+     * Other calendar props you may provide to `Calendar`.
+     */
+    calendarProps?: Omit<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'disableOnDoubleNext' | 'disableOnDoublePrev' | 'displayMonthLocale' | 'isDateDisabled' | 'locale' | 'mode' | 'onChange' | 'onMonthControlClick' | 'onNext' | 'onDoubleNext' | 'onPrev' | 'onDoublePrev' | 'onYearControlClick' | 'referenceDate' | 'updateReferenceDate' | 'value'>;
+    /**
+     * The format for displaying date in tags.
+     * @default 'YYYY-MM-DD'
+     */
+    format?: string;
+    /**
+     * Maximum number of dates that can be selected.
+     */
+    maxSelections?: number;
+    /**
+     * A function that fires when calendar toggle.
+     */
+    onCalendarToggle?: (open: boolean) => void;
+    /**
+     * Change handler. Called when user confirms the selection.
+     */
+    onChange?: (value: MultipleDatePickerValue) => void;
+    /**
+     * Placeholder text when no dates are selected.
+     */
+    placeholder?: string;
+    /**
+     * Other props you may provide to `Popper` component.
+     */
+    popperProps?: Omit<InputTriggerPopperProps, 'anchor' | 'children' | 'fadeProps' | 'open'>;
+    /**
+     * The reference date for getting calendars. Default to current time.
+     */
+    referenceDate?: DateType;
+    /**
+     * Whether the input is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Controlled value - array of selected dates.
+     * @default []
+     */
+    value?: MultipleDatePickerValue;
+}
+/**
+ * The react component for `mezzanine` multiple date picker.
+ * Allows selecting multiple dates from a calendar with manual confirmation.
+ * Notice that any component related to date-picker should be used along with `CalendarContext`.
+ */
+declare const MultipleDatePicker: import("react").ForwardRefExoticComponent<MultipleDatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default MultipleDatePicker;