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

package/Select/Select.d.ts

@@ -1,33 +1,48 @@
+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 { MenuProps } from '../Menu';
-import { PopperProps } from '../Popper';
-import { SelectValue } from './typings';
-import { PickRenameMulti } from '../utils/general';
-import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
-export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'mode' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onScroll' | 'readOnly' | 'renderValue' | 'value'>, FormElementFocusHandlers, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
-    maxHeight: 'menuMaxHeight';
-    role: 'menuRole';
-    size: 'menuSize';
-}>, PickRenameMulti<Pick<PopperProps, 'options' | 'disablePortal'>, {
-    options: 'popperOptions';
-    disablePortal: 'disablePortal';
-}>, Pick<MenuProps, 'children'> {
+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.
+     */
+    options?: DropdownOption[];
+    /**
+     * The type of dropdown.
+     * @default 'default'
+     */
+    type?: DropdownType;
     /**
      * The other native props for input element.
      */
     inputProps?: Omit<SelectTriggerInputProps, 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
+    /**
+     * The max height of the dropdown list.
+     */
+    menuMaxHeight?: number | string;
     /**
      * Popup menu scroll listener
      */
-    onMenuScroll?: (computed: {
+    onScroll?: (computed: {
         scrollTop: number;
         maxScrollTop: number;
-    }, target: HTMLUListElement) => void;
+    }, target: HTMLDivElement) => void;
     /**
      * select input placeholder
      */
     placeholder?: string;
+    /**
+     * Whether the input is readonly.
+     * @default false
+     */
+    readOnly?: boolean;
     /**
      * To customize rendering select input value
      */
@@ -41,6 +56,15 @@ export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'in
      * The size of input.
      */
     size?: SelectInputSize;
+    /**
+     * The z-index of the dropdown.
+     */
+    dropdownZIndex?: number | string;
+    /**
+     * Whether to enable portal for the dropdown.
+     * @default true
+     */
+    globalPortal?: boolean;
 }
 export type SelectMultipleProps = SelectBaseProps & {
     /**
@@ -54,7 +78,7 @@ export type SelectMultipleProps = SelectBaseProps & {
     /**
      * The change event handler of input element.
      */
-    onChange?(newOptions: SelectValue[]): any;
+    onChange?(newOptions: SelectValue[]): void;
     /**
      * To customize rendering select input value
      */
@@ -77,7 +101,7 @@ export type SelectSingleProps = SelectBaseProps & {
     /**
      * The change event handler of input element.
      */
-    onChange?(newOptions: SelectValue): any;
+    onChange?(newOptions: SelectValue | null): void;
     /**
      * To customize rendering select input value
      */
@@ -89,5 +113,5 @@ export type SelectSingleProps = SelectBaseProps & {
     value?: SelectValue | null;
 };
 export type SelectProps = SelectMultipleProps | SelectSingleProps;
-declare const Select: import("react").ForwardRefExoticComponent<(Omit<SelectMultipleProps, "ref"> | Omit<SelectSingleProps, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
 export default Select;

package/Select/Select.js

@@ -1,41 +1,34 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useRef, useCallback, useMemo } from 'react';
+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 { useSelectValueControl } from '../Form/useSelectValueControl.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Option from './Option.js';
 import { SelectControlContext } from './SelectControlContext.js';
-import { useSelectValueControl } from '../Form/useSelectValueControl.js';
-import { useClickAway } from '../hooks/useClickAway.js';
 import SelectTrigger from './SelectTrigger.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
-import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
-import Menu from '../Menu/Menu.js';
+import Dropdown from '../Dropdown/Dropdown.js';
 import cx from 'clsx';
 
-const MENU_ID = 'mzn-select-menu-id';
 const Select = forwardRef(function Select(props, ref) {
-    var _a, _b;
     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, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onMenuScroll, placeholder = '', popperOptions = {}, prefix, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, value: valueProp, } = props;
+    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, menuMaxHeight, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onScroll, options: optionsProp, placeholder = '', prefix, readOnly = false, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, type = 'default', value: valueProp, dropdownZIndex, globalPortal = true, } = props;
     const [open, toggleOpen] = useState(false);
-    const onOpen = () => {
+    const onOpen = useCallback(() => {
+        // Prevent opening when readOnly is true
+        if (readOnly) {
+            return;
+        }
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
         toggleOpen(true);
-    };
-    const onClose = () => {
+    }, [onFocus, readOnly]);
+    const onClose = useCallback(() => {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
         toggleOpen(false);
-    };
-    const onToggleOpen = () => {
-        if (open) {
-            onClose();
-        }
-        else {
-            onOpen();
-        }
-    };
-    const { onChange, onClear, value } = useSelectValueControl({
+    }, [onBlur]);
+    const { onChange, onClear: onClearFromControl, value } = useSelectValueControl({
         defaultValue,
         mode,
         onChange: onChangeProp,
@@ -43,9 +36,99 @@ const Select = forwardRef(function Select(props, ref) {
         onClose,
         value: valueProp,
     });
+    // Wrap onClear and delegate to control hook
+    const onClear = useCallback((e) => {
+        onClearFromControl(e);
+    }, [onClearFromControl]);
     const nodeRef = useRef(null);
-    const controlRef = useRef(null);
-    const composedRef = useComposeRefs([ref, controlRef]);
+    const composedRef = useComposeRefs([ref, nodeRef]);
+    // Helper function to recursively add checkbox to all options in tree structure
+    const addCheckboxToTreeOptions = useCallback((opts) => {
+        return opts.map((opt) => ({
+            ...opt,
+            showCheckbox: true,
+            checkSite: 'prefix',
+            children: opt.children
+                ? addCheckboxToTreeOptions(opt.children)
+                : undefined,
+        }));
+    }, []);
+    const getAllDescendantIds = useCallback((option) => {
+        const ids = new Set();
+        const collect = (opt) => {
+            ids.add(String(opt.id));
+            if (opt.children && opt.children.length > 0) {
+                opt.children.forEach(collect);
+            }
+        };
+        collect(option);
+        return Array.from(ids);
+    }, []);
+    const findOptionById = useCallback((id, opts) => {
+        for (const opt of opts) {
+            if (String(opt.id) === id) {
+                return opt;
+            }
+            if (opt.children) {
+                const found = findOptionById(id, opt.children);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    }, []);
+    // Convert children (Option components) to DropdownOption format
+    // Or 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);
+                }
+            }
+            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]);
+    // Determine dropdown type based on options structure and mode
+    // Tree mode is only available in multiple mode
+    const dropdownType = useMemo(() => {
+        if (optionsProp && mode === 'multiple') {
+            // If options prop is provided and mode is multiple, check if it has tree structure
+            const hasTreeStructure = optionsProp.some((opt) => opt.children && opt.children.length > 0);
+            return hasTreeStructure ? 'tree' : type;
+        }
+        return type;
+    }, [optionsProp, type, mode]);
+    const dropdownValue = useMemo(() => {
+        if (!value)
+            return undefined;
+        if (Array.isArray(value)) {
+            return value.map((v) => String(v.id));
+        }
+        return String(value.id);
+    }, [value]);
     function getPlaceholder() {
         if (typeof renderValue === 'function') {
             return renderValue(value);
@@ -55,23 +138,15 @@ const Select = forwardRef(function Select(props, ref) {
         }
         return placeholder;
     }
-    useClickAway(() => {
-        if (!open)
-            return;
-        return () => {
-            onClose();
-        };
-    }, nodeRef, [nodeRef, open, toggleOpen]);
-    const onClickTextField = () => {
-        if (!disabled) {
-            onToggleOpen();
-        }
-    };
     /**
      * keyboard events for a11y
      * (@todo keyboard event map into option selection when menu is opened)
      */
     const onKeyDownTextField = (evt) => {
+        // Prevent keyboard events from opening when readOnly is true
+        if (readOnly) {
+            return;
+        }
         /** for a11y to open menu via keyboard */
         switch (evt.code) {
             case 'Enter':
@@ -94,23 +169,62 @@ const Select = forwardRef(function Select(props, ref) {
             }
         }
     };
-    /** menu onScroll listener */
-    const onMenuScrollCallback = useCallback(async (evt) => {
-        evt.stopPropagation();
-        if (onMenuScroll) {
-            const target = evt.target;
-            const maxScrollTop = target.scrollHeight - target.getBoundingClientRect().height;
-            onMenuScroll({
-                scrollTop: target.scrollTop,
-                maxScrollTop,
-            }, target);
+    const handleDropdownSelect = useCallback((option) => {
+        if (mode === 'multiple' && dropdownType === 'tree') {
+            const onChangeMultiple = onChange;
+            const currentValues = Array.isArray(value) ? value : [];
+            const allDescendantIds = getAllDescendantIds(option);
+            const allDescendantValues = allDescendantIds.map((id) => {
+                const foundOption = findOptionById(id, options);
+                return {
+                    id,
+                    name: (foundOption === null || foundOption === void 0 ? void 0 : foundOption.name) || id,
+                };
+            });
+            const selectedDescendantIds = allDescendantIds.filter((id) => currentValues.some((v) => String(v.id) === id));
+            const allSelected = selectedDescendantIds.length === allDescendantIds.length;
+            if (allSelected) {
+                // Deselect all descendants in a single update
+                const descendantIdSet = new Set(allDescendantIds.map((id) => String(id)));
+                const nextValues = currentValues.filter((v) => !descendantIdSet.has(String(v.id)));
+                onChangeMultiple(nextValues);
+            }
+            else {
+                // Select all descendants that are not yet selected in a single update
+                const existingIdSet = new Set(currentValues.map((v) => String(v.id)));
+                const valuesToAdd = allDescendantValues.filter((descValue) => !existingIdSet.has(String(descValue.id)));
+                const nextValues = [...currentValues, ...valuesToAdd];
+                onChangeMultiple(nextValues);
+            }
+        }
+        else {
+            // Normal selection logic for non-tree mode
+            const selectValue = {
+                id: String(option.id),
+                name: String(option.name),
+            };
+            if (mode === 'multiple') {
+                onChange(selectValue);
+            }
+            else {
+                onChange(selectValue);
+                onClose();
+            }
+        }
+    }, [mode, onChange, onClose, value, dropdownType, getAllDescendantIds, findOptionById, options]);
+    const handleVisibilityChange = useCallback((isOpen) => {
+        if (isOpen && readOnly) {
+            return;
+        }
+        if (isOpen) {
+            onOpen();
+        }
+        else {
+            onClose();
         }
-    }, [onMenuScroll]);
+    }, [onOpen, onClose, readOnly]);
     const resolvedInputProps = {
         ...inputProps,
-        'aria-controls': MENU_ID,
-        'aria-expanded': open,
-        'aria-owns': MENU_ID,
         placeholder: getPlaceholder(),
         role: 'combobox',
     };
@@ -118,7 +232,7 @@ const Select = forwardRef(function Select(props, ref) {
         onChange,
         value,
     }), [onChange, value]);
-    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? ((_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '') : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, onScroll: onMenuScrollCallback, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
+    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/TreeSelect.d.ts

@@ -1,11 +1,10 @@
 import { SelectInputSize } from '@mezzanine-ui/core/select';
 import { FormElementFocusHandlers } from '../Form';
 import { MenuProps } from '../Menu';
-import { PickRenameMulti } from '../utils/general';
-import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
-import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
-import { SelectValue, TreeSelectOption } from './typings';
 import { TreeProps } from '../Tree';
+import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
+import { PickRenameMulti } from '../utils/general';
+import { SelectTriggerInputProps, SelectTriggerProps, SelectValue, TreeSelectOption } from './typings';
 export interface TreeSelectProps extends Omit<SelectTriggerProps, 'active' | 'onBlur' | 'onChange' | 'onClear' | 'onClick' | 'onFocus' | 'onKeyDown' | 'readOnly' | 'searchInputProps'>, FormElementFocusHandlers, Pick<TreeProps, 'defaultExpandAll' | 'disabledValues' | 'expandControllerRef' | 'onExpand'>, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
     maxHeight: 'menuMaxHeight';
     role: 'menuRole';
@@ -38,6 +37,12 @@ export interface TreeSelectProps extends Omit<SelectTriggerProps, 'active' | 'on
      * select input placeholder
      */
     placeholder?: string;
+    /**
+     * To customize rendering select input value.
+     * For single mode, receives the first value from the array.
+     * For multiple mode, receives the full array.
+     */
+    renderValue?: (value?: SelectValue | SelectValue[] | null) => string;
     /**
      * Whether the selection is required.
      * @default false
@@ -63,5 +68,5 @@ export interface TreeSelectProps extends Omit<SelectTriggerProps, 'active' | 'on
      */
     value?: SelectValue[];
 }
-declare const TreeSelect: import("react").ForwardRefExoticComponent<Omit<TreeSelectProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TreeSelect: import("react").ForwardRefExoticComponent<TreeSelectProps & import("react").RefAttributes<HTMLDivElement>>;
 export default TreeSelect;

package/Select/TreeSelect.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useMemo, useRef, useState } from 'react';
 import { selectClasses } from '@mezzanine-ui/core/select';
-import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { forwardRef, useContext, useMemo, useRef, useState } from 'react';
 import { useClickAway } from '../hooks/useClickAway.js';
-import SelectTrigger from './SelectTrigger.js';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect.js';
+import SelectTrigger from './SelectTrigger.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
 import { traverseTree } from '../Tree/traverseTree.js';
 import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
@@ -15,6 +15,7 @@ import { toggleValue } from '../Tree/toggleValue.js';
 import cx from 'clsx';
 
 const TreeSelect = forwardRef((props, ref) => {
+    var _a;
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
     const { className, clearable = false, defaultExpandAll, depth, disabled = disabledFromFormControl || false, disabledValues, error = severity === 'error' || false, expandControllerRef, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuProps, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onExpand: onExpandProp, onFocus, options, placeholder = '', popperOptions, prefix, renderValue, required = requiredFromFormControl || false, sameWidth = false, size, suffixActionIcon, treeProps, value: valueProp, } = props;
     const { className: treeClassName, ...restTreeProps } = treeProps || {};
@@ -54,7 +55,7 @@ const TreeSelect = forwardRef((props, ref) => {
     const controllerRef = useRef(null);
     useIsomorphicLayoutEffect(() => {
         var _a, _b;
-        (_b = (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.forceUpdate) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_b = (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.update) === null || _b === void 0 ? void 0 : _b.call(_a);
     }, [valueProp]);
     /** Open control */
     const [open, toggleOpen] = useState(false);
@@ -188,7 +189,13 @@ const TreeSelect = forwardRef((props, ref) => {
         setExpandedValues(newExpandedValues);
         onExpandProp === null || onExpandProp === void 0 ? void 0 : onExpandProp(value);
     };
-    return (jsxs("div", { ref: nodeRef, className: selectClasses.treeSelect, children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, mode: mode, onClear: onClear, onClick: onTextFieldClick, onKeyDown: onTextFieldKeydown, onTagClose: onTagClose, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, size: size, suffixActionIcon: suffixActionIcon, value: valueProp }), jsx(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, controllerRef: controllerRef, open: open, options: popperOptions, sameWidth: sameWidth, children: jsx(Menu, { itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: {
+    // Convert valueProp to single value for single mode
+    const triggerValue = multiple ? valueProp : ((_a = valueProp === null || valueProp === void 0 ? void 0 : valueProp[0]) !== null && _a !== void 0 ? _a : undefined);
+    // Adapt renderValue for single mode
+    const adaptedRenderValue = renderValue && !multiple
+        ? (value) => renderValue(value !== null && value !== void 0 ? value : null)
+        : undefined;
+    return (jsxs("div", { ref: nodeRef, className: selectClasses.treeSelect, children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, mode: mode, onClear: onClear, onClick: onTextFieldClick, onKeyDown: onTextFieldKeydown, onTagClose: onTagClose, prefix: prefix, readOnly: true, ...(mode === 'single' && adaptedRenderValue ? { renderValue: adaptedRenderValue } : {}), required: required, size: size, suffixActionIcon: suffixActionIcon, value: triggerValue }), jsx(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, controllerRef: controllerRef, open: open, options: popperOptions, sameWidth: sameWidth, children: jsx(Menu, { itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: {
                         ...restStyle,
                         border: border || 0,
                         width: width || `${panelWidth}px`,

package/Select/index.d.ts

@@ -1,14 +1,13 @@
-export * from './typings';
+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 type { SelectTriggerProps, SelectTriggerInputProps, } from './SelectTrigger';
 export { default as SelectTriggerTags } from './SelectTriggerTags';
 export type { SelectTriggerTagsProps } from './SelectTriggerTags';
-export type { SelectProps } from './Select';
-export { default } from './Select';
-export { default as Option } from './Option';
-export type { OptionProps } from './Option';
-export { default as OptionGroup } from '../Menu/MenuItemGroup';
-export type { MenuItemGroupProps as OptionGroupProps } from '../Menu/MenuItemGroup';
-export type { TreeSelectProps } from './TreeSelect';
 export { default as TreeSelect } from './TreeSelect';
+export type { TreeSelectProps } from './TreeSelect';
+export * from './typings';

package/Select/index.js

@@ -1,7 +1,7 @@
+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 } from './Select.js';
-export { default as Option } from './Option.js';
-export { default as OptionGroup } from '../Menu/MenuItemGroup.js';
 export { default as TreeSelect } from './TreeSelect.js';

package/TimePanel/TimePanelColumn.js

@@ -1,33 +1,35 @@
 import { jsx } from 'react/jsx-runtime';
 import { timePanelClasses } from '@mezzanine-ui/core/time-panel';
-import { forwardRef, useRef, useEffect } from 'react';
+import { forwardRef, useRef, useCallback, useEffect } from 'react';
+import { getNumericCSSVariablePixelValue } from '../utils/get-css-variable-value.js';
+import Scrollbar from '../Scrollbar/Scrollbar.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` time panel column.
  */
 const TimePanelColumn = forwardRef(function TimePanelColumn(props, ref) {
-    const { activeUnit, cellHeight = 32, onChange, units } = props;
-    const cellsRef = useRef(null);
-    const getChangeHandler = (unit) => {
-        if (!onChange)
-            return undefined;
-        return () => {
-            onChange(unit);
-        };
-    };
+    const { activeUnit, cellHeight: cellHeightProp, onChange, units } = props;
+    const cellHeight = cellHeightProp !== null && cellHeightProp !== void 0 ? cellHeightProp : getNumericCSSVariablePixelValue('--mzn-spacing-size-element-loose');
+    const viewportRef = useRef(null);
+    const getChangeHandler = useCallback((unit) => () => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(unit);
+    }, [onChange]);
     const preferSmoothScrollRef = useRef(true);
     useEffect(() => {
         const activeIndex = units.findIndex(({ value }) => value === activeUnit);
-        if (cellsRef.current) {
-            cellsRef.current.scrollTo({
-                top: activeIndex * cellHeight, // (activeIndex - 3) * cellHeight, (center)
+        if (viewportRef.current) {
+            viewportRef.current.scrollTo({
                 behavior: preferSmoothScrollRef.current ? 'auto' : 'smooth',
+                top: activeIndex * cellHeight, // (activeIndex - 3) * cellHeight, (center)
             });
         }
         preferSmoothScrollRef.current = false;
     }, [activeUnit, cellHeight, units]);
-    return (jsx("div", { ref: ref, className: timePanelClasses.column, children: jsx("div", { ref: cellsRef, className: timePanelClasses.columnCells, children: units.map((unit) => (jsx("button", { type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnButton, {
+    const handleViewportReady = useCallback((viewport) => {
+        viewportRef.current = viewport;
+    }, []);
+    return (jsx("div", { ref: ref, className: timePanelClasses.column, children: jsx(Scrollbar, { maxHeight: cellHeight * 7, onViewportReady: handleViewportReady, children: units.map((unit) => (jsx("button", { type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnButton, {
                     [timePanelClasses.buttonActive]: unit.value === activeUnit,
                 }), onClick: getChangeHandler(unit), children: unit.label }, unit.value))) }) }));
 });

package/TimeRangePicker/TimeRangePicker.d.ts

@@ -0,0 +1,29 @@
+import { RangePickerTriggerProps } from '../Picker';
+import { TimeRangePickerValue } from './useTimeRangePickerValue';
+import { TimePickerPanelProps } from '../TimePicker/TimePickerPanel';
+export interface TimeRangePickerProps extends Pick<TimePickerPanelProps, 'fadeProps' | 'hideHour' | 'hideMinute' | 'hideSecond' | 'hourStep' | 'minuteStep' | 'popperProps' | 'secondStep'>, Pick<RangePickerTriggerProps, 'className' | 'clearable' | 'disabled' | 'error' | 'errorMessagesFrom' | 'errorMessagesTo' | 'fullWidth' | 'inputFromPlaceholder' | 'inputFromProps' | 'inputToPlaceholder' | 'inputToProps' | 'prefix' | 'readOnly' | 'required' | 'size' | 'validateFrom' | 'validateTo'> {
+    /**
+     * The format for displaying time.
+     * @default 'HH:mm:ss' or 'HH:mm' based on hideSecond
+     */
+    format?: string;
+    /**
+     * A function that fires when panel toggle. Receive open status in boolean format as props.
+     */
+    onPanelToggle?: (open: boolean) => void;
+    /**
+     * Change handler. Takes an array of your declared `DateType` which represents from and to in order.
+     */
+    onChange?: (target?: TimeRangePickerValue) => void;
+    /**
+     * Value of the range picker.
+     * It is an array of your declared `DateType` which represents from and to in order.
+     */
+    value?: TimeRangePickerValue;
+}
+/**
+ * The react component for `mezzanine` time range picker.
+ * Notice that any component related to time-range-picker should be used along with `CalendarContext`.
+ */
+declare const TimeRangePicker: import("react").ForwardRefExoticComponent<TimeRangePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TimeRangePicker;