@mezzanine-ui/react 0.8.1 → 0.9.0

package/DatePicker/DatePicker.js

@@ -18,7 +18,7 @@ import { FormControlContext } from '../Form/FormControlContext.js';
 const DatePicker = forwardRef(function DatePicker(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
     const { defaultDateFormat, getNow, } = useCalendarContext();
-    const { calendarProps, className, clearable, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, ...restTriggerProps } = props;
+    const { calendarProps, className, clearable = true, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, ...restTriggerProps } = props;
     const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
     const formats = useMemo(() => [
         format,

package/DateRangePicker/DateRangePicker.js

@@ -18,7 +18,7 @@ import { FormControlContext } from '../Form/FormControlContext.js';
 const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
     const { defaultDateFormat, getNow, isBetween, } = useCalendarContext();
-    const { calendarProps, className, clearable, defaultValue, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputFromPlaceholder, inputFromProps, inputToPlaceholder, inputToProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, } = props;
+    const { calendarProps, className, clearable = true, defaultValue, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputFromPlaceholder, inputFromProps, inputToPlaceholder, inputToProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, } = props;
     const { onBlur: onFromBlurProp, onKeyDown: onFromKeyDownProp, onFocus: onFromFocusProp, ...restInputFromProps } = inputFromProps || {};
     const { onBlur: onToBlurProp, onKeyDown: onToKeyDownProp, onFocus: onToFocusProp, ...restInputToProps } = inputToProps || {};
     const formats = useMemo(() => [
@@ -156,7 +156,9 @@ const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
         const [from, to] = internalValue;
         if (from && to) {
             const newValue = onChange([from, to]);
-            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newValue);
+            if (onChangeProp) {
+                onChangeProp(newValue);
+            }
         }
         else {
             onChange(valueProp);

package/DateTimePicker/DateTimePicker.js

@@ -18,7 +18,7 @@ const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
     const { defaultDateFormat, defaultTimeFormat, getNow, startOf, } = useCalendarContext();
     const defaultFormat = `${defaultDateFormat} ${defaultTimeFormat}`;
-    const { calendarProps, className, clearable, confirmText, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
+    const { calendarProps, className, clearable = true, confirmText, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
     const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
     const formats = useMemo(() => [format, defaultFormat], [defaultFormat, format]);
     /** Panel open control */

package/Table/TableBodyRow.js

@@ -1,9 +1,10 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useMemo, useCallback, Fragment } from 'react';
-import { tableClasses } from '@mezzanine-ui/core/table';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { forwardRef, useContext, useState, useMemo, Fragment } from 'react';
+import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
 import get from 'lodash/get';
 import { TableContext, TableDataContext } from './TableContext.js';
 import TableCell from './TableCell.js';
+import TableExpandedTable from './TableExpandedTable.js';
 import TableRowSelection from './rowSelection/TableRowSelection.js';
 import TableExpandable from './expandable/TableExpandable.js';
 import TableEditRenderWrapper from './editable/TableEditRenderWrapper.js';
@@ -26,39 +27,17 @@ const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
         var _a, _b;
         return ((_b = (_a = expanding === null || expanding === void 0 ? void 0 : expanding.expandedRowRender) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData)) !== null && _b !== void 0 ? _b : null);
     }, [expanding, rowData]);
-    /** styling */
-    const getColumnStyle = useCallback((column) => {
-        let style = {};
-        if (column.width) {
-            style = {
-                ...style,
-                width: column.width,
-                maxWidth: column.width,
-            };
-        }
-        return style;
-    }, []);
-    const getCellStyle = useCallback((column) => {
-        let style = {};
-        if (column.align) {
-            style = {
-                ...style,
-                justifyContent: column.align === 'center' ? column.align : `flex-${column.align}`,
-            };
-        }
-        return style;
-    }, []);
     return (jsxs(Fragment, { children: [jsxs("div", Object.assign({}, rest, { ref: ref, className: cx(tableClasses.bodyRow, {
                     [tableClasses.bodyRowHighlight]: selected || expanded,
                 }, className), role: "row" }, { children: [rowSelection ? (jsx(TableRowSelection, { role: "gridcell", rowKey: (rowData.key || rowData.id), setChecked: (status) => setSelected(status), showDropdownIcon: false }, void 0)) : null,
-                    expanding ? (jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, role: "gridcell", setExpanded: setExpanded }, void 0)) : null,
+                    expanding ? (jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, role: "gridcell", setExpanded: setExpanded, onExpand: (status) => { var _a; return (_a = expanding.onExpand) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData, status); } }, void 0)) : null,
                     (columns !== null && columns !== void 0 ? columns : []).map((column, index) => {
                         var _a, _b, _c, _d;
                         const ellipsis = !!(get(rowData, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
                         const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : get(rowData, column.dataIndex));
                         return (jsx("div", Object.assign({ className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle(column) }, { children: jsx(TableEditRenderWrapper, Object.assign({}, column, { rowData: rowData }, { children: jsx(TableCell, Object.assign({ ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle }, { children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, column, rowData, index)) || get(rowData, column.dataIndex) }), void 0) }), void 0) }), `${column.dataIndex}-${column.title}`));
                     })] }), void 0),
-            renderedExpandedContent ? (jsx(AccordionDetails, Object.assign({ className: expanding.className, expanded: expanded }, { children: renderedExpandedContent }), void 0)) : null] }, void 0));
+            renderedExpandedContent ? (jsx(Fragment$1, { children: typeof renderedExpandedContent === 'string' ? (jsx(AccordionDetails, Object.assign({ className: expanding.className, expanded: expanded }, { children: renderedExpandedContent }), void 0)) : (jsx(Fragment$1, { children: renderedExpandedContent.dataSource.length > 0 ? (jsx(AccordionDetails, Object.assign({ className: cx(expanding.className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded }, { children: jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent }, void 0) }), void 0)) : null }, void 0)) }, void 0)) : null] }, void 0));
 });
 var TableBodyRow$1 = TableBodyRow;
 

package/Table/TableExpandedTable.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TableDataSource, ExpandedTableColumn } from '@mezzanine-ui/core/table';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface TableExpandedTableProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    renderedExpandedContent: {
+        dataSource: TableDataSource[];
+        columns?: ExpandedTableColumn[];
+    };
+}
+declare const TableExpandedTable: import("react").ForwardRefExoticComponent<TableExpandedTableProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TableExpandedTable;

package/Table/TableExpandedTable.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
+import get from 'lodash/get';
+import { TableDataContext } from './TableContext.js';
+import TableCell from './TableCell.js';
+import TableExpandable from './expandable/TableExpandable.js';
+import cx from 'clsx';
+
+const TableExpandedTable = forwardRef(function TableExpandedTable(props, ref) {
+    const { renderedExpandedContent, } = props;
+    const { columns, } = useContext(TableDataContext) || {};
+    return (jsx("div", Object.assign({ className: tableClasses.bodyRowExpandedTable }, { children: renderedExpandedContent.dataSource.map((source) => {
+            var _a;
+            return (jsxs("div", Object.assign({ ref: ref, className: cx(tableClasses.bodyRow, tableClasses.bodyRowExpandedTableRow), role: "row" }, { children: [jsx(TableExpandable, { showIcon: false }, void 0),
+                    ((_a = (renderedExpandedContent.columns || columns)) !== null && _a !== void 0 ? _a : [])
+                        .map((column, index) => {
+                        var _a, _b, _c, _d;
+                        const ellipsis = !!(get(source, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
+                        const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, source)) !== null && _c !== void 0 ? _c : get(source, column.dataIndex));
+                        return (jsx("div", Object.assign({ className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle((columns !== null && columns !== void 0 ? columns : [])[index]) }, { children: jsx(TableCell, Object.assign({ ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle((columns !== null && columns !== void 0 ? columns : [])[index]), tooltipTitle: tooltipTitle || '' }, { children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, column, source, index)) || get(source, column.dataIndex) }), void 0) }), `${column.dataIndex}-${index}`));
+                    })] }), (source.key || source.id)));
+        }) }), void 0));
+});
+var TableExpandedTable$1 = TableExpandedTable;
+
+export { TableExpandedTable$1 as default };

package/Table/TableHeader.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useCallback } from 'react';
-import { tableClasses } from '@mezzanine-ui/core/table';
+import { forwardRef, useContext } from 'react';
+import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
 import { TableContext, TableDataContext } from './TableContext.js';
 import { SELECTED_ALL_KEY } from './rowSelection/useTableRowSelection.js';
 import TableCell from './TableCell.js';
@@ -13,34 +13,12 @@ const TableHeader = forwardRef(function TableHeader(props, ref) {
     const { className, ...rest } = props;
     const { rowSelection, expanding, } = useContext(TableContext) || {};
     const { columns, } = useContext(TableDataContext) || {};
-    /** styling */
-    const getColumnStyle = useCallback((column) => {
-        let style = {};
-        if (column.width) {
-            style = {
-                ...style,
-                width: column.width,
-                maxWidth: column.width,
-            };
-        }
-        return style;
-    }, []);
-    const getCellStyle = useCallback((column) => {
-        let style = {};
-        if (column.align) {
-            style = {
-                ...style,
-                justifyContent: column.align === 'center' ? column.align : `flex-${column.align}`,
-            };
-        }
-        return style;
-    }, []);
     return (jsxs("div", Object.assign({ ref: ref }, rest, { className: cx(tableClasses.header, className), role: "rowgroup" }, { children: [rowSelection ? (jsx(TableRowSelection, { rowKey: SELECTED_ALL_KEY, showDropdownIcon: true }, void 0)) : null,
             expanding && !rowSelection ? (jsx(TableExpandable, { showIcon: false }, void 0)) : null,
             (columns !== null && columns !== void 0 ? columns : []).map((column) => {
                 var _a;
                 return (jsx("div", Object.assign({ className: cx(tableClasses.headerCellWrapper, column.headerClassName), style: getColumnStyle(column) }, { children: jsxs(TableCell, Object.assign({ ellipsis: false, role: "columnheader", style: getCellStyle(column) }, { children: [((_a = column.renderTitle) === null || _a === void 0 ? void 0 : _a.call(column, tableClasses)) || column.title,
-                            typeof column.sorter === 'function' ? (jsx(TableSortingIcon, { column: column }, void 0)) : null] }), void 0) }), `${column.dataIndex}-${column.title}`));
+                            typeof column.sorter === 'function' || typeof column.onSorted === 'function' ? (jsx(TableSortingIcon, { column: column }, void 0)) : null] }), void 0) }), `${column.dataIndex}-${column.title}`));
             })] }), void 0));
 });
 var TableHeader$1 = TableHeader;

package/Table/expandable/TableExpandable.d.ts

@@ -10,6 +10,10 @@ export interface TableExpandableProps extends NativeElementPropsWithoutKeyAndRef
      * whether is expanded or not
      */
     expanded?: boolean;
+    /**
+     * Invoked by expanded status changed.
+     */
+    onExpand?(status: boolean): void;
     /**
      * toggle expanded
      */

package/Table/expandable/TableExpandable.js

@@ -6,10 +6,19 @@ import Icon from '../../Icon/Icon.js';
 import cx from 'clsx';
 
 const TableExpandable = forwardRef(function TableExpandable(props, ref) {
-    const { className, expandable = true, expanded, setExpanded, showIcon = true, ...rest } = props;
+    const { className, expandable = true, expanded, onExpand, setExpanded, showIcon = true, ...rest } = props;
+    const onClick = () => {
+        if (expandable) {
+            const nextStatus = !expanded;
+            setExpanded === null || setExpanded === void 0 ? void 0 : setExpanded(nextStatus);
+            if (onExpand) {
+                onExpand(nextStatus);
+            }
+        }
+    };
     return (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(tableClasses.collapseAction, className) }, { children: jsx("div", Object.assign({ className: tableClasses.icon }, { children: showIcon ? (jsx(Icon, { className: cx(tableClasses.icon, {
                     [tableClasses.iconClickable]: expandable,
-                }), color: expandable ? 'primary' : 'disabled', icon: ChevronDownIcon, onClick: () => expandable && (setExpanded === null || setExpanded === void 0 ? void 0 : setExpanded(!expanded)), style: { transform: `rotate(${expanded ? '180deg' : '0'})` } }, void 0)) : null }), void 0) }), void 0));
+                }), color: expandable ? 'primary' : 'disabled', icon: ChevronDownIcon, onClick: onClick, style: { transform: `rotate(${expanded ? '180deg' : '0'})` } }, void 0)) : null }), void 0) }), void 0));
 });
 var TableExpandable$1 = TableExpandable;
 

package/Table/sorting/useTableSorting.js

@@ -51,15 +51,15 @@ function useTableSorting(props) {
     }, []);
     const onChange = useLastCallback((opts) => {
         const { dataIndex, sorter, onSorted } = opts;
+        const isChosenFromOneToAnother = sortedOn && dataIndex !== sortedOn;
+        const nextSortedType = getNextSortedType(isChosenFromOneToAnother ? 'none' : sortedType);
         const onMappingSources = (sources) => {
             setDataSource(sources);
-            onSorted === null || onSorted === void 0 ? void 0 : onSorted(sources);
+            onSorted === null || onSorted === void 0 ? void 0 : onSorted(dataIndex, nextSortedType);
         };
         // only apply changes when column sorter is given
-        if (typeof sorter === 'function') {
+        if (typeof sorter === 'function' || typeof onSorted === 'function') {
             // should update next sorted type first
-            const isChosenFromOneToAnother = sortedOn && dataIndex !== sortedOn;
-            const nextSortedType = getNextSortedType(isChosenFromOneToAnother ? 'none' : sortedType);
             setSortedType(nextSortedType);
             switch (nextSortedType) {
                 case 'desc':
@@ -68,10 +68,12 @@ function useTableSorting(props) {
                     setSortedOn(dataIndex);
                     // getting new source instance (when switch between sorter, should use origin dataSource)
                     let newSource = (isChosenFromOneToAnother ? dataSourceProp : dataSource).slice(0);
-                    // sort by given sorter
-                    newSource = newSource.sort((a, b) => (
-                    // reverse result when sorted type is ascending
-                    (sorter(get(a, dataIndex), get(b, dataIndex))) * (nextSortedType === 'asc' ? -1 : 1)));
+                    if (typeof sorter === 'function') {
+                        // sort by given sorter
+                        newSource = newSource.sort((a, b) => (
+                        // reverse result when sorted type is ascending
+                        (sorter(get(a, dataIndex), get(b, dataIndex))) * (nextSortedType === 'asc' ? -1 : 1)));
+                    }
                     // map back the data source
                     onMappingSources(newSource);
                     break;

package/Tabs/useTabsOverflow.js

@@ -1,26 +1,10 @@
 import { useState, useEffect } from 'react';
-import { useWindowWidth } from '../hooks/useWindowWidth.js';
 
 function useTabsOverflow(tabsRef) {
     const [isOverflowing, setIsOverflowing] = useState(false);
     const [scrollState, setScrollState] = useState('begin');
     const isScrollToBegin = scrollState === 'begin';
     const isScrollToEnd = scrollState === 'end';
-    const windowWidth = useWindowWidth();
-    function handleScrollState() {
-        if (tabsRef.current) {
-            const offsetRight = tabsRef.current.scrollWidth - tabsRef.current.clientWidth;
-            if (tabsRef.current.scrollLeft === 0) {
-                setScrollState('begin');
-            }
-            else if (tabsRef.current.scrollLeft >= offsetRight) {
-                setScrollState('end');
-            }
-            else {
-                setScrollState('middle');
-            }
-        }
-    }
     function scrollToLeft() {
         if (tabsRef.current) {
             tabsRef.current.scrollTo(0, 0);
@@ -34,16 +18,35 @@ function useTabsOverflow(tabsRef) {
     }
     useEffect(() => {
         if (tabsRef.current) {
-            const isXOverflowing = tabsRef.current.scrollWidth > tabsRef.current.clientWidth;
-            if (isOverflowing !== isXOverflowing) {
-                setIsOverflowing(isXOverflowing);
-            }
-        }
-    }, [isOverflowing, windowWidth]);
-    useEffect(() => {
-        if (tabsRef.current) {
+            const handleOverflowingState = () => {
+                if (tabsRef.current) {
+                    setIsOverflowing(tabsRef.current.scrollWidth > tabsRef.current.clientWidth);
+                }
+            };
+            const handleScrollState = () => {
+                if (tabsRef.current) {
+                    const offsetRight = tabsRef.current.scrollWidth - tabsRef.current.clientWidth;
+                    if (tabsRef.current.scrollLeft === 0) {
+                        setScrollState('begin');
+                    }
+                    else if (tabsRef.current.scrollLeft >= offsetRight) {
+                        setScrollState('end');
+                    }
+                    else {
+                        setScrollState('middle');
+                    }
+                }
+            };
+            // init isOverflowing when mounting
+            handleOverflowingState();
+            window.addEventListener('resize', handleOverflowingState);
             tabsRef.current.addEventListener('scroll', handleScrollState);
-            return () => { var _a; return (_a = tabsRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScrollState); };
+            return () => {
+                if (tabsRef.current) {
+                    window.removeEventListener('resize', handleOverflowingState);
+                    tabsRef.current.removeEventListener('scroll', handleScrollState);
+                }
+            };
         }
     }, [tabsRef.current]);
     return {

package/TimePanel/TimePanelColumn.js

@@ -20,12 +20,13 @@ const TimePanelColumn = forwardRef(function TimePanelColumn(props, ref) {
     };
     const prevetSmoothScrollTo = useRef(true);
     useEffect(() => {
-        var _a;
         const activeIndex = units.findIndex(({ value }) => value === activeUnit);
-        (_a = cellsRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-            top: activeIndex * cellHeight,
-            behavior: prevetSmoothScrollTo.current ? 'auto' : 'smooth',
-        });
+        if (cellsRef.current) {
+            cellsRef.current.scrollTo({
+                top: activeIndex * cellHeight,
+                behavior: prevetSmoothScrollTo.current ? 'auto' : 'smooth',
+            });
+        }
         prevetSmoothScrollTo.current = false;
     }, [activeUnit, cellHeight, units]);
     return (jsxs("div", Object.assign({ ref: ref, className: timePanelClasses.column }, { children: [prefix && jsx("div", Object.assign({ className: timePanelClasses.columnPrefix }, { children: prefix }), void 0),

package/TimePicker/TimePicker.js

@@ -17,7 +17,7 @@ import { FormControlContext } from '../Form/FormControlContext.js';
 const TimePicker = forwardRef(function TimePicker(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
     const { defaultTimeFormat, } = useCalendarContext();
-    const { className, clearable, confirmText, defaultValue, disabled = disabledFromFormControl, error = severity === 'error' || false, format = defaultTimeFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
+    const { className, clearable = true, confirmText, defaultValue, disabled = disabledFromFormControl, error = severity === 'error' || false, format = defaultTimeFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
     const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
     const formats = useMemo(() => [format], [format]);
     /** Panel open control */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -32,7 +32,7 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.8.1",
+    "@mezzanine-ui/core": "^0.9.0",
     "@mezzanine-ui/icons": "^0.7.3",
     "@mezzanine-ui/system": "^0.7.0",
     "@popperjs/core": "^2.9.2",