@mezzanine-ui/react 0.6.4

package/Tabs/Tab.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { tabsClasses } from '@mezzanine-ui/core/tabs';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` tab.
+ */
+const Tab = forwardRef(function Tab(props, ref) {
+    const { active, children, className, disabled, ...rest } = props;
+    return (jsx("button", Object.assign({}, rest, { ref: ref, type: "button", "aria-disabled": disabled, className: cx(tabsClasses.tab, {
+            [tabsClasses.tabActive]: active,
+        }, className), disabled: disabled }, { children: children }), void 0));
+});
+
+export default Tab;

package/Tabs/TabPane.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { TabProps } from './Tab';
+export interface TabPaneProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Only for tabs to control the tab pane.
+     */
+    tab: ReactElement<TabProps>;
+}
+/**
+ * The react component for `mezzanine` tab pane.
+ */
+declare const TabPane: import("react").ForwardRefExoticComponent<TabPaneProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TabPane;

package/Tabs/TabPane.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { tabsClasses } from '@mezzanine-ui/core/tabs';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` tab pane.
+ */
+const TabPane = forwardRef(function TabPane(props, ref) {
+    const { children, className, 
+    /**
+     * Ignore it
+     */
+    tab, ...rest } = props;
+    return (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(tabsClasses.pane, className) }, { children: children }), void 0));
+});
+
+export default TabPane;

package/Tabs/Tabs.d.ts

@@ -0,0 +1,39 @@
+import { Key, MouseEvent, ReactElement, ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { TabPaneProps } from './TabPane';
+export declare type TabsChild = ReactElement<TabPaneProps>;
+export interface TabsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange' | 'children'> {
+    /**
+     * Current TabPane's index
+     */
+    activeKey?: Key;
+    /**
+     * Actions on the right side of tabBar
+     */
+    actions?: ReactNode;
+    /**
+     * The tab panes in tabs
+     */
+    children: TabsChild | TabsChild[];
+    /**
+     * Initial active TabPane's key, if activeKey is not set.
+     */
+    defaultActiveKey?: Key;
+    /**
+     * The change event handler of Tabs
+     */
+    onChange?: (activeKey: Key) => void;
+    /**
+     * Callback executed when tab is clicked
+     */
+    onTabClick?: (key: Key, event: MouseEvent) => void;
+    /**
+     * The className of tabBar
+     */
+    tabBarClassName?: string;
+}
+/**
+ * The react component for `mezzanine` tabs.
+ */
+declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Tabs;

package/Tabs/Tabs.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, Children, cloneElement } from 'react';
+import { tabsClasses } from '@mezzanine-ui/core/tabs';
+import { ChevronLeftIcon, ChevronRightIcon } from '@mezzanine-ui/icons';
+import { useCustomControlValue } from '../Form/useCustomControlValue.js';
+import useTabsOverflow from './useTabsOverflow.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` tabs.
+ */
+const Tabs = forwardRef(function Tabs(props, ref) {
+    const { activeKey: activeKeyProp, actions, children, className, defaultActiveKey = 0, onChange, onTabClick, tabBarClassName, ...rest } = props;
+    const tabsRef = useRef(null);
+    const [activeKey, setActiveKey] = useCustomControlValue({
+        defaultValue: defaultActiveKey,
+        onChange,
+        value: activeKeyProp,
+    });
+    let pane;
+    const tabs = Children.map(children, (tabPane, index) => {
+        var _a;
+        const key = (_a = tabPane.key) !== null && _a !== void 0 ? _a : index;
+        const { tab } = tabPane.props;
+        const active = activeKey.toString() === key.toString();
+        if (active) {
+            pane = tabPane;
+        }
+        return cloneElement(tab, {
+            key,
+            active,
+            onClick: (event) => {
+                if (!active) {
+                    setActiveKey(key);
+                }
+                if (onTabClick) {
+                    onTabClick(key, event);
+                }
+            },
+        });
+    });
+    const { isOverflowing, isScrollToBegin, isScrollToEnd, scrollToLeft, scrollToRight, } = useTabsOverflow(tabsRef);
+    return (jsxs("div", Object.assign({}, rest, { ref: ref, className: cx(tabsClasses.host, className) }, { children: [jsxs("div", Object.assign({ className: cx(tabsClasses.tabBar, tabBarClassName) }, { children: [jsxs("div", Object.assign({ className: tabsClasses.overflow }, { children: [isOverflowing && !isScrollToBegin && (jsx("button", Object.assign({ "aria-label": "scrollToLeft", className: tabsClasses.scrollBtn, onClick: () => scrollToLeft(), type: "button" }, { children: jsx(Icon, { icon: ChevronLeftIcon }, void 0) }), void 0)),
+                            jsx("div", Object.assign({ ref: tabsRef, className: tabsClasses.tabs }, { children: tabs }), void 0),
+                            isOverflowing && !isScrollToEnd && (jsx("button", Object.assign({ "aria-label": "scrollToRight", className: tabsClasses.scrollBtn, onClick: () => scrollToRight(), type: "button" }, { children: jsx(Icon, { icon: ChevronRightIcon }, void 0) }), void 0))] }), void 0), actions] }), void 0), pane] }), void 0));
+});
+
+export default Tabs;

package/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { TabProps, default as Tab, } from './Tab';
+export { TabPaneProps, default as TabPane, } from './TabPane';
+export { TabsChild, TabsProps, default, } from './Tabs';

package/Tabs/index.js

@@ -0,0 +1,3 @@
+export { default as Tab } from './Tab.js';
+export { default as TabPane } from './TabPane.js';
+export { default } from './Tabs.js';

package/Tabs/useTabsOverflow.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+export default function useTabsOverflow(tabsRef: RefObject<HTMLElement>): {
+    isOverflowing: boolean;
+    isScrollToBegin: boolean;
+    isScrollToEnd: boolean;
+    scrollToLeft: () => void;
+    scrollToRight: () => void;
+};

package/Tabs/useTabsOverflow.js

@@ -0,0 +1,58 @@
+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);
+        }
+    }
+    function scrollToRight() {
+        if (tabsRef.current) {
+            const offsetRight = tabsRef.current.scrollWidth - tabsRef.current.clientWidth;
+            tabsRef.current.scrollTo(offsetRight, 0);
+        }
+    }
+    useEffect(() => {
+        if (tabsRef.current) {
+            const isXOverflowing = tabsRef.current.scrollWidth > tabsRef.current.clientWidth;
+            if (isOverflowing !== isXOverflowing) {
+                setIsOverflowing(isXOverflowing);
+            }
+        }
+    }, [isOverflowing, windowWidth]);
+    useEffect(() => {
+        if (tabsRef.current) {
+            tabsRef.current.addEventListener('scroll', handleScrollState);
+            return () => { var _a; return (_a = tabsRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScrollState); };
+        }
+    }, [tabsRef.current]);
+    return {
+        isOverflowing,
+        isScrollToBegin,
+        isScrollToEnd,
+        scrollToLeft,
+        scrollToRight,
+    };
+}
+
+export default useTabsOverflow;

package/Tag/Tag.d.ts

@@ -0,0 +1,29 @@
+import { MouseEventHandler } from 'react';
+import { TagSize } from '@mezzanine-ui/core/tag';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface TagProps extends NativeElementPropsWithoutKeyAndRef<'span'> {
+    /**
+     * Whether the tag can be closed.
+     * @default false
+     */
+    closable?: boolean;
+    /**
+     * Whether the tag disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback executed while tag closed.
+     */
+    onClose?: MouseEventHandler;
+    /**
+     * The size of the tag.
+     * @default 'medium'
+     */
+    size?: TagSize;
+}
+/**
+ * The react component for `mezzanine` tag.
+ */
+declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default Tag;

package/Tag/Tag.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { tagClasses } from '@mezzanine-ui/core/tag';
+import { TimesIcon } from '@mezzanine-ui/icons';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` tag.
+ */
+const Tag = forwardRef(function Tag(props, ref) {
+    const { children, className, closable = false, disabled = false, onClose, size = 'medium', ...rest } = props;
+    return (jsxs("span", Object.assign({}, rest, { ref: ref, "aria-disabled": disabled, className: cx(tagClasses.host, tagClasses.size(size), {
+            [tagClasses.disabled]: disabled,
+        }, className) }, { children: [jsx("span", Object.assign({ className: tagClasses.label }, { children: children }), void 0),
+            closable && (jsx(Icon, { className: tagClasses.closeIcon, icon: TimesIcon, onClick: (event) => {
+                    if (!disabled && onClose) {
+                        onClose(event);
+                    }
+                }, tabIndex: -1 }, void 0))] }), void 0));
+});
+
+export default Tag;

package/Tag/index.d.ts

@@ -0,0 +1,2 @@
+export type { TagSize, } from '@mezzanine-ui/core/tag';
+export { TagProps, default, } from './Tag';

package/Tag/index.js

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

package/TextField/TextField.d.ts

@@ -0,0 +1,54 @@
+import { MouseEventHandler, ReactNode, ReactElement } from 'react';
+import { TextFieldSize } from '@mezzanine-ui/core/text-field';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface TextFieldProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'defaultValue' | 'onChange' | 'prefix'> {
+    /**
+     * Whether the field is active.
+     */
+    active?: boolean;
+    children?: ReactNode;
+    className?: string;
+    /**
+     * Whether to show the clear button.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Whether the field is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is error.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * If `true`, set width: 100%.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * The callback will be fired after clear icon clicked.
+     */
+    onClear?: MouseEventHandler;
+    /**
+     * The prefix addon of the field.
+     */
+    prefix?: ReactNode;
+    /**
+     * The size of field.
+     * @default 'medium'
+     */
+    size?: TextFieldSize;
+    /**
+     * The suffix addon of the field.
+     */
+    suffix?: ReactNode;
+    suffixActionIcon?: ReactElement;
+}
+/**
+ * The react component for `mezzanine` input.
+ */
+declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TextField;

package/TextField/TextField.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, cloneElement } from 'react';
+import { TimesIcon } from '@mezzanine-ui/icons';
+import { textFieldClasses } from '@mezzanine-ui/core/text-field';
+import { useTextFieldControl } from './useTextFieldControl.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` input.
+ */
+const TextField = forwardRef(function TextField(props, ref) {
+    const { active = false, children, className, clearable = false, disabled = false, error = false, fullWidth, onClear, onClick: onClickProps, onKeyDown: onKeyDownProps, prefix, role: roleProp, size = 'medium', suffix, suffixActionIcon, ...rest } = props;
+    const { role, onClick, onKeyDown, } = useTextFieldControl({
+        onClick: onClickProps,
+        onKeyDown: onKeyDownProps,
+    });
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsxs("div", Object.assign({}, rest, { ref: ref, role: roleProp || role, onClick: onClick, onKeyDown: onKeyDown, className: cx(textFieldClasses.host, textFieldClasses.size(size), {
+            [textFieldClasses.active]: active,
+            [textFieldClasses.clearable]: clearable,
+            [textFieldClasses.disabled]: disabled,
+            [textFieldClasses.error]: error,
+            [textFieldClasses.fullWidth]: fullWidth,
+            [textFieldClasses.withPrefix]: prefix,
+            [textFieldClasses.withSuffix]: suffix || suffixActionIcon,
+        }, className) }, { children: [prefix && jsx("div", Object.assign({ className: textFieldClasses.prefix }, { children: prefix }), void 0), children, suffix && jsx("div", Object.assign({ className: textFieldClasses.suffix }, { children: suffix }), void 0), suffixActionIcon && cloneElement(suffixActionIcon, {
+                className: cx(textFieldClasses.actionIcon, suffixActionIcon.props.className),
+                role: 'button',
+                tabIndex: -1,
+            }), clearable && (jsx(Icon, { className: textFieldClasses.clearIcon, icon: TimesIcon, onClick: (event) => {
+                    if (!disabled && onClear) {
+                        onClear(event);
+                    }
+                }, onMouseDown: (event) => event.preventDefault(), role: "button", tabIndex: -1 }, void 0))] }), void 0));
+});
+
+export default TextField;

package/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export type { TextFieldSize, } from '@mezzanine-ui/core/text-field';
+export { TextFieldProps, default } from './TextField';

package/TextField/index.js

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

package/TextField/useTextFieldControl.d.ts

@@ -0,0 +1,10 @@
+import { MouseEventHandler, KeyboardEventHandler } from 'react';
+export interface UseTextFieldControlProps {
+    onClick?: MouseEventHandler;
+    onKeyDown?: KeyboardEventHandler;
+}
+export declare function useTextFieldControl(props: UseTextFieldControlProps): {
+    role: string;
+    onClick: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+    onKeyDown: ((event: import("react").KeyboardEvent<Element>) => void) | undefined;
+};

package/TextField/useTextFieldControl.js

@@ -0,0 +1,15 @@
+function useTextFieldControl(props) {
+    const { onClick = undefined, onKeyDown = undefined, } = props || {};
+    const getRole = () => {
+        if (typeof onClick !== 'undefined')
+            return 'button';
+        return 'textbox';
+    };
+    return {
+        role: getRole(),
+        onClick,
+        onKeyDown,
+    };
+}
+
+export { useTextFieldControl };

package/Textarea/Textarea.d.ts

@@ -0,0 +1,58 @@
+import { Ref, ChangeEventHandler } from 'react';
+import { TextareaSize } from '@mezzanine-ui/core/textarea';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { TextFieldProps } from '../TextField';
+export interface TextareaProps extends Omit<TextFieldProps, 'active' | 'children' | 'onClear' | 'prefix' | 'suffix'> {
+    /**
+     * The default value of textarea.
+     */
+    defaultValue?: string;
+    /**
+     * The max length of textarea.
+     */
+    maxLength?: number;
+    /**
+     * The change event handler of textarea element.
+     */
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    /**
+     * The placeholder of textarea.
+     */
+    placeholder?: string;
+    /**
+     * Whether the textarea is readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the input is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The rows of textarea.
+     */
+    rows?: number;
+    /**
+     * The size of textarea.
+     * @default 'medium'
+     */
+    size?: TextareaSize;
+    /**
+     * The react ref passed to textarea element.
+     */
+    textareaRef?: Ref<HTMLTextAreaElement>;
+    /**
+     * The other native props for textarea element.
+     */
+    textareaProps?: Omit<NativeElementPropsWithoutKeyAndRef<'textarea'>, 'defaultValue' | 'disabled' | 'maxLength' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'rows' | 'value' | `aria-${'disabled' | 'multiline' | 'readonly' | 'required'}`>;
+    /**
+     * The value of textarea.
+     */
+    value?: string;
+}
+/**
+ * The react component for `mezzanine` textarea.
+ */
+declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Textarea;

package/Textarea/Textarea.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useRef } from 'react';
+import { textareaClasses } from '@mezzanine-ui/core/textarea';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { useInputWithClearControlValue } from '../Form/useInputWithClearControlValue.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import TextField from '../TextField/TextField.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` textarea.
+ */
+const Textarea = forwardRef(function Textarea(props, ref) {
+    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
+    const { className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, maxLength, onChange: onChangeProp, placeholder, readOnly = false, required = requiredFromFormControl || false, rows, size = 'medium', textareaRef: textareaRefProp, textareaProps, value: valueProp, } = props;
+    const textareaRef = useRef(null);
+    const [value, onChange, onClear,] = useInputWithClearControlValue({
+        defaultValue,
+        onChange: onChangeProp,
+        ref: textareaRef,
+        value: valueProp,
+    });
+    const composedTextareaRef = useComposeRefs([textareaRefProp, textareaRef]);
+    const active = !!value;
+    const currentLength = value.length;
+    const upperLimit = typeof maxLength === 'number' && currentLength >= maxLength;
+    return (jsxs(TextField, Object.assign({ ref: ref, active: active, className: cx(textareaClasses.host, {
+            [textareaClasses.upperLimit]: upperLimit,
+        }, className), clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, onClear: onClear, size: size }, { children: [jsx("textarea", Object.assign({}, textareaProps, { ref: composedTextareaRef, "aria-disabled": disabled, "aria-multiline": true, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, maxLength: maxLength, onChange: onChange, placeholder: placeholder, readOnly: readOnly, required: required, rows: rows, value: value }), void 0),
+            typeof maxLength === 'number' && (jsxs("span", Object.assign({ className: textareaClasses.count }, { children: [value.length, "/", maxLength] }), void 0))] }), void 0));
+});
+
+export default Textarea;

package/Textarea/index.d.ts

@@ -0,0 +1,2 @@
+export type { TextareaSize } from '@mezzanine-ui/core/textarea';
+export { TextareaProps, default } from './Textarea';

package/Textarea/index.js

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

package/TimePanel/TimePanel.d.ts

@@ -0,0 +1,66 @@
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { TimePanelActionProps } from './TimePanelAction';
+export interface TimePanelProps extends Pick<TimePanelActionProps, 'confirmText' | 'onConfirm'>, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'value' | 'onChange' | 'children'> {
+    /**
+     * Controls whether or not to hide hours column.
+     */
+    hideHour?: boolean;
+    /**
+     * Controls whether or not to hide minutes column.
+     */
+    hideMinute?: boolean;
+    /**
+     * Controls whether or not to hide seconds column.
+     */
+    hideSecond?: boolean;
+    /**
+     * The hours column prefix.
+     * @default 'Hrs''
+     */
+    hourPrefix?: ReactNode;
+    /**
+     * The steps of hour.
+     * @default 1
+     */
+    hourStep?: number;
+    /**
+     * The minutes column prefix.
+     * @default 'Min''
+     */
+    minutePrefix?: ReactNode;
+    /**
+     * The steps of minute.
+     * @default 1
+     */
+    minuteStep?: number;
+    /**
+     * Change handler. Takes `DateType` as its argument.
+     */
+    onChange?: (target: DateType) => void;
+    /**
+     * The seconds column prefix.
+     * @default 'Sec''
+     */
+    secondPrefix?: ReactNode;
+    /**
+     * The steps of second.
+     * @default 1
+     */
+    secondStep?: number;
+    /**
+     * Display value of the panel
+     */
+    value?: DateType;
+    /**
+     * Controls whether or not to show actions.
+     */
+    withoutAction?: boolean;
+}
+/**
+ * The react component for `mezzanine` time panel.
+ * Notice that any component related to time-panel should be used along with `CalendarContext`.
+ */
+declare const TimePanel: import("react").ForwardRefExoticComponent<TimePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TimePanel;

package/TimePanel/TimePanel.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getUnits, timePanelClasses } from '@mezzanine-ui/core/time-panel';
+import { forwardRef, useMemo } from 'react';
+import TimePanelAction from './TimePanelAction.js';
+import TimePanelColumn from './TimePanelColumn.js';
+import { useCalendarContext } from '../Calendar/CalendarContext.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` time panel.
+ * Notice that any component related to time-panel should be used along with `CalendarContext`.
+ */
+const TimePanel = forwardRef(function TimePanel(props, ref) {
+    const { getHour, getMinute, getSecond, setHour, setMinute, setSecond, startOf, getNow, } = useCalendarContext();
+    const { className, confirmText, hideHour = false, hideMinute = false, hideSecond = false, hourPrefix = 'Hrs', hourStep = 1, minutePrefix = 'Min', minuteStep = 1, onChange, onConfirm, secondPrefix = 'Sec', secondStep = 1, value, withoutAction = false, ...restHostProps } = props;
+    const setters = {
+        hour: setHour,
+        minute: setMinute,
+        second: setSecond,
+    };
+    const getters = {
+        hour: getHour,
+        minute: getMinute,
+        second: getSecond,
+    };
+    const hourUnits = useMemo(() => (hideHour ? undefined : getUnits(0, 23, hourStep)), [hideHour, hourStep]);
+    const minuteUnits = useMemo(() => (hideMinute ? undefined : getUnits(0, 59, minuteStep)), [hideMinute, minuteStep]);
+    const secondUnits = useMemo(() => (hideSecond ? undefined : getUnits(0, 59, secondStep)), [hideSecond, secondStep]);
+    const activeHour = value ? getHour(value) : undefined;
+    const activeMinute = value ? getMinute(value) : undefined;
+    const activeSecond = value ? getSecond(value) : undefined;
+    function getControlHandle(granularity, units, steps) {
+        if (!onChange || !units)
+            return undefined;
+        const getter = getters[granularity];
+        const setter = setters[granularity];
+        return () => {
+            if (!value) {
+                const target = startOf(getNow(), 'day');
+                onChange(target);
+                return;
+            }
+            const nextIndex = (getter(value) + steps) / Math.abs(steps);
+            const guardedNextIndex = nextIndex >= 0 ? nextIndex : units.length + nextIndex;
+            const newUnitIndex = guardedNextIndex % units.length;
+            const newUnit = units[newUnitIndex].value;
+            const target = setter(value, newUnit);
+            onChange(target);
+        };
+    }
+    function getChangeHandle(granularity) {
+        if (!onChange)
+            return undefined;
+        const setter = setters[granularity];
+        const currentValue = value || startOf(getNow(), 'day');
+        return (target) => {
+            const result = setter(currentValue, target.value);
+            onChange(result);
+        };
+    }
+    return (jsxs("div", Object.assign({}, restHostProps, { ref: ref, className: cx(timePanelClasses.host, className) }, { children: [jsxs("div", Object.assign({ className: timePanelClasses.columns }, { children: [!hideHour && hourUnits && (jsx(TimePanelColumn, { prefix: hourPrefix, units: hourUnits, activeUnit: activeHour, onChange: getChangeHandle('hour'), onNext: getControlHandle('hour', hourUnits, hourStep), onPrev: getControlHandle('hour', hourUnits, -hourStep) }, void 0)),
+                    !hideMinute && minuteUnits && (jsx(TimePanelColumn, { prefix: minutePrefix, units: minuteUnits, activeUnit: activeMinute, onChange: getChangeHandle('minute'), onNext: getControlHandle('minute', minuteUnits, minuteStep), onPrev: getControlHandle('minute', minuteUnits, -minuteStep) }, void 0)),
+                    !hideSecond && secondUnits && (jsx(TimePanelColumn, { prefix: secondPrefix, units: secondUnits, activeUnit: activeSecond, onChange: getChangeHandle('second'), onNext: getControlHandle('second', secondUnits, secondStep), onPrev: getControlHandle('second', secondUnits, -secondStep) }, void 0))] }), void 0),
+            !withoutAction && (jsx(TimePanelAction, { onConfirm: onConfirm, confirmText: confirmText }, void 0))] }), void 0));
+});
+
+export default TimePanel;