@mezzanine-ui/react 0.6.4

package/Select/TreeSelect.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import { SelectInputSize } from '@mezzanine-ui/core/select';
+import { FormElementFocusHandlers } from '../Form';
+import { MenuProps } from '../Menu';
+import { PickRenameMulti } from '../utils/rename-types';
+import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
+import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
+import { SelectValue, TreeSelectOption } from './typings';
+import { TreeProps } from '../Tree';
+export interface TreeSelectProps extends Omit<SelectTriggerProps, 'active' | 'onBlur' | 'onChange' | 'onClear' | 'onClick' | 'onFocus' | 'onKeyDown' | 'readOnly' | 'searchInputProps'>, FormElementFocusHandlers, Pick<TreeProps, 'defaultExpandAll' | 'disabledValues' | 'expandControllerRef'>, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
+    maxHeight: 'menuMaxHeight';
+    role: 'menuRole';
+    size: 'menuSize';
+}>, PickRenameMulti<Pick<InputTriggerPopperProps, 'options'>, {
+    options: 'popperOptions';
+}> {
+    /**
+     * The width of options panel will be calculated based on the depth of your options.
+     * If you know how many layers in your object, pass it via this prop will have better performance.
+     */
+    depth?: number;
+    /**
+     * The other native props for input element.
+     */
+    inputProps?: Omit<SelectTriggerInputProps, 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'role' | 'value' | `aria-${'expanded'}`>;
+    /**
+     * Other props you may provide to `Menu`.
+     */
+    menuProps?: Omit<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>;
+    /**
+     * The change event handler of input element.
+     */
+    onChange?(newOptions: SelectValue[]): any;
+    /**
+     * The nested options for `TreeSelect`
+     */
+    options: TreeSelectOption[];
+    /**
+     * select input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Whether the selection is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * If true, the panel will have its min-width be same as the trigger width.
+     * @default false
+     */
+    sameWidth?: InputTriggerPopperProps['sameWidth'];
+    /**
+     * The size of input.
+     * @default 'medium'
+     */
+    size?: SelectInputSize;
+    /**
+     * Other props you may provide to `Tree`
+     */
+    treeProps?: Omit<TreeProps, 'defaultExpandAll' | 'disabledValues' | 'expandControllerRef' | 'expandedValues' | 'nodes' | 'onExpand' | 'onSelect' | 'selectMethod' | 'selectable' | 'values'>;
+    /**
+     * The value of selection.
+     * @default undefined
+     */
+    value?: SelectValue[];
+}
+declare const TreeSelect: import("react").ForwardRefExoticComponent<TreeSelectProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TreeSelect;

package/Select/TreeSelect.js

@@ -0,0 +1,198 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useMemo, useRef, useLayoutEffect, useState } from 'react';
+import { selectClasses } from '@mezzanine-ui/core/select';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { useClickAway } from '../hooks/useClickAway.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';
+import Menu from '../Menu/Menu.js';
+import Tree from '../Tree/Tree.js';
+import { toggleValue } from '../Tree/toggleValue.js';
+import cx from 'clsx';
+
+const TreeSelect = forwardRef((props, ref) => {
+    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 = 'medium', mode = 'single', onBlur, onChange: onChangeProp, onFocus, options, placeholder = '', popperOptions, prefix, renderValue, required = requiredFromFormControl || false, sameWidth = false, size = 'medium', suffixActionIcon, treeProps, value: valueProp, } = props;
+    const { className: treeClassName, ...restTreeProps } = treeProps || {};
+    const { width, border, ...restStyle } = (menuProps === null || menuProps === void 0 ? void 0 : menuProps.style) || {};
+    const multiple = mode === 'multiple';
+    /** Compute panel width */
+    const panelWidth = useMemo(() => {
+        if (width) {
+            return;
+        }
+        const base = multiple ? 224 : 208;
+        const indent = 16;
+        function getWidth(resultDepth) {
+            return (resultDepth - 1) * indent + base;
+        }
+        if (depth) {
+            return getWidth(depth);
+        }
+        function maxDepth(object, counter = 1) {
+            if (object.siblings) {
+                return Math.max(...object.siblings.map((sibling) => maxDepth(sibling, counter + 1)));
+            }
+            return counter;
+        }
+        const computedMaxDepth = options.reduce((acc, current) => {
+            const currentDepth = maxDepth(current);
+            return currentDepth > acc ? currentDepth : acc;
+        }, 0);
+        return getWidth(computedMaxDepth);
+    }, [depth, multiple, options, width]);
+    /** Popper positioning */
+    const nodeRef = useRef(null);
+    const controlRef = useRef(null);
+    const popperRef = useRef(null);
+    const composedRef = useComposeRefs([ref, controlRef]);
+    /** Make popper positioning dynamically by computing styles every time value prop changes */
+    const controllerRef = useRef(null);
+    useLayoutEffect(() => {
+        var _a, _b;
+        (_b = (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.forceUpdate) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }, [valueProp]);
+    /** Open control */
+    const [open, toggleOpen] = useState(false);
+    const onOpen = () => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+        toggleOpen(true);
+    };
+    const onClose = () => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        toggleOpen(false);
+    };
+    const onToggleOpen = () => {
+        if (open) {
+            onClose();
+        }
+        else {
+            onOpen();
+        }
+    };
+    const onTextFieldClick = disabled
+        ? undefined
+        : () => {
+            onToggleOpen();
+        };
+    const onTextFieldKeydown = disabled
+        ? undefined
+        : (event) => {
+            switch (event.code) {
+                case 'Enter':
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    onTextFieldClick();
+                    break;
+                case 'ArrowUp':
+                case 'ArrowRight':
+                case 'ArrowLeft':
+                case 'ArrowDown': {
+                    if (!open) {
+                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                        onTextFieldClick();
+                    }
+                    break;
+                }
+                case 'Tab': {
+                    if (open) {
+                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                        onTextFieldClick();
+                    }
+                    break;
+                }
+            }
+        };
+    useClickAway(() => {
+        if (!open)
+            return;
+        return (event) => {
+            var _a;
+            if (!((_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                onClose();
+            }
+        };
+    }, controlRef, [
+        open,
+        toggleOpen,
+    ]);
+    /** Trigger input props */
+    const resolvedInputProps = {
+        ...inputProps,
+        'aria-expanded': open,
+        placeholder,
+        role: 'combobox',
+    };
+    /** Tags close handler */
+    const onTagClose = onChangeProp && valueProp
+        ? (target) => {
+            onChangeProp(valueProp.filter((v) => v.id !== target.id));
+        }
+        : undefined;
+    /** Clear method */
+    const onClear = clearable && onChangeProp
+        ? () => {
+            onChangeProp([]);
+        }
+        : undefined;
+    /** Map options to tree nodes */
+    function mapOptionToNode(option) {
+        var _a;
+        return {
+            label: option.name,
+            value: option.id,
+            nodes: (_a = option.siblings) === null || _a === void 0 ? void 0 : _a.map((sibling) => mapOptionToNode(sibling)),
+        };
+    }
+    function flattenOptions(targets) {
+        const optionsMap = {};
+        function mapOptionsToSelectValue(optionsToMap) {
+            optionsToMap.forEach((optionToMap) => {
+                optionsMap[optionToMap.id] = {
+                    id: optionToMap.id,
+                    name: optionToMap.name,
+                };
+                if (optionToMap.siblings) {
+                    mapOptionsToSelectValue(optionToMap.siblings);
+                }
+            });
+        }
+        mapOptionsToSelectValue(targets);
+        return optionsMap;
+    }
+    const optionMap = flattenOptions(options);
+    const nodes = options.map((option) => mapOptionToNode(option));
+    /** Map selected values */
+    const selectedValues = valueProp === null || valueProp === void 0 ? void 0 : valueProp.map((v) => mapOptionToNode(v).value);
+    const onSelect = onChangeProp
+        ? (values) => {
+            const selectValues = values.map((currentValue) => optionMap[currentValue]);
+            onChangeProp(selectValues);
+        }
+        : undefined;
+    /** Controlled expanded value to avoid expanded values cleanup after panel toggled */
+    const [expandedValues, setExpandedValues] = useState(() => {
+        const currentExpandedValues = [];
+        if (defaultExpandAll) {
+            traverseTree(nodes, (node) => {
+                if (node.nodes) {
+                    currentExpandedValues.push(node.value);
+                }
+            });
+        }
+        return currentExpandedValues;
+    });
+    const onExpand = (value) => {
+        const newExpandedValues = toggleValue(value, expandedValues);
+        setExpandedValues(newExpandedValues);
+    };
+    return (jsxs("div", Object.assign({ 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 }, void 0),
+            jsx(InputTriggerPopper, Object.assign({ ref: popperRef, anchor: controlRef, className: selectClasses.popper, controllerRef: controllerRef, open: open, options: popperOptions, sameWidth: sameWidth }, { children: jsx(Menu, Object.assign({ itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: {
+                        ...restStyle,
+                        border: border || 0,
+                        width: width || `${panelWidth}px`,
+                    } }, { children: jsx(Tree, Object.assign({}, restTreeProps, { ref: ref, className: cx(selectClasses.tree, treeClassName), disabledValues: disabledValues, expandControllerRef: expandControllerRef, expandedValues: expandedValues, multiple: multiple, nodes: nodes, onExpand: onExpand, onSelect: onSelect, selectMethod: "target", selectable: true, values: selectedValues }), void 0) }), void 0) }), void 0)] }), void 0));
+});
+
+export default TreeSelect;

package/Select/index.d.ts

@@ -0,0 +1,8 @@
+export * from './typings';
+export { SelectControlContext, } from './SelectControlContext';
+export { SelectTriggerProps, SelectTriggerInputProps, default as SelectTrigger, } from './SelectTrigger';
+export { SelectProps, default, } from './Select';
+export { OptionProps, default as Option, } from './Option';
+export { MenuItemGroupProps as OptionGroupProps, default as OptionGroup, } from '../Menu/MenuItemGroup';
+export { TreeSelectProps, default as TreeSelect, } from './TreeSelect';
+export { AutoCompleteProps, default as AutoComplete, } from './AutoComplete';

package/Select/index.js

@@ -0,0 +1,7 @@
+export { SelectControlContext } from './SelectControlContext.js';
+export { default as SelectTrigger } from './SelectTrigger.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';
+export { default as AutoComplete } from './AutoComplete.js';

package/Select/typings.d.ts

@@ -0,0 +1,11 @@
+export interface SelectValue {
+    id: string;
+    name: string;
+}
+export interface TreeSelectOption extends SelectValue {
+    siblings?: TreeSelectOption[];
+}
+export interface SelectControl {
+    value: SelectValue[];
+    onChange: (v: SelectValue | null) => SelectValue[];
+}

package/Skeleton/Skeleton.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface SkeletonProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * Height of the skeleton.
+     */
+    height?: number | string;
+    /**
+     * Type of the skeleton.
+     * @default 'rectangle'
+     */
+    type?: 'rectangle' | 'circle';
+    /**
+     * Width of the skeleton.
+     */
+    width?: number | string;
+}
+/**
+ * The react component for `mezzanine` Skeleton.
+ */
+declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Skeleton;

package/Skeleton/Skeleton.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { skeletonClasses } from '@mezzanine-ui/core/skeleton';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` Skeleton.
+ */
+const Skeleton = forwardRef(function Skeleton(props, ref) {
+    const { className, height: skeletonHeight, style: skeletonStyle, type, width: skeletonWidth, ...rest } = props;
+    return (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(skeletonClasses.host, type === 'circle' && skeletonClasses.circle, className), style: { width: skeletonWidth, height: skeletonHeight, ...skeletonStyle } }, rest), void 0));
+});
+
+export default Skeleton;

package/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export { SkeletonProps, default } from './Skeleton';

package/Skeleton/index.js

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

package/Slider/Slider.d.ts

@@ -0,0 +1,51 @@
+import { Ref } from 'react';
+import { RangeSliderValue, SingleSliderValue } from '@mezzanine-ui/core/slider';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { UseRangeSliderProps, UseSingleSliderProps } from './useSlider';
+export interface SliderBaseProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'defaultChecked' | 'defaultValue' | 'onChange'> {
+    /**
+     * Whether the slider is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The maximum permitted value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The minimum permitted value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The stepping interval.
+     * @default 0
+     */
+    step?: number;
+    /**
+     * Will render input if `withInput` is `true`.
+     */
+    withInput?: boolean;
+    /**
+     * The ref for Slider root.
+     */
+    innerRef?: Ref<HTMLDivElement>;
+}
+export declare type SingleSliderProps = SliderBaseProps & {
+    onChange?: (value: SingleSliderValue) => void;
+    value: UseSingleSliderProps['value'];
+};
+export declare type RangeSliderProps = SliderBaseProps & {
+    onChange?: (value: RangeSliderValue) => void;
+    value: UseRangeSliderProps['value'];
+};
+export declare type SliderComponentProps = SingleSliderProps | RangeSliderProps;
+export declare type SliderProps = Omit<SliderComponentProps, 'innerRef'>;
+/**
+ * The react component for `mezzanine` slider.
+ * The outcome will be base on the type of given value.
+ * Notice that slider is a fully controlled component. Property value is always needed.
+ */
+declare const Slider: import("react").ForwardRefExoticComponent<Pick<SliderComponentProps, "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "disabled" | "max" | "min" | "step" | "withInput"> & import("react").RefAttributes<HTMLDivElement>>;
+export default Slider;

package/Slider/Slider.js

@@ -0,0 +1,172 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import { isRangeSlider, sortSliderValue, sliderClasses, roundToStep } from '@mezzanine-ui/core/slider';
+import { useSlider } from './useSlider.js';
+import Input from '../Input/Input.js';
+import Tooltip from '../Tooltip/Tooltip.js';
+import cx from 'clsx';
+
+function SliderComponent(props) {
+    const { className, disabled, innerRef, max = 100, min = 0, onChange, step = 1, style: styleProp, value, withInput, ...rest } = props;
+    const { activeHandleIndex, cssVars, handleClickTrackOrRail, handlePress, railRef, } = useSlider({
+        max,
+        min,
+        onChange,
+        step,
+        value,
+    });
+    const style = {
+        ...cssVars,
+        ...styleProp,
+    };
+    const shouldHaveInputHandlers = withInput && onChange && !disabled;
+    const getHandle = (handlerValue, index) => (jsx("div", Object.assign({ className: cx(sliderClasses.handlerPosition, index === 0 && sliderClasses.handlerStartPosition, index === 1 && sliderClasses.handlerEndPosition) }, { children: jsx(Tooltip, Object.assign({ disablePortal: true, options: {
+                placement: 'top',
+            }, title: handlerValue.toString() }, { children: ({ onMouseEnter, onMouseLeave }) => (jsx("div", { className: cx(sliderClasses.handler, index === activeHandleIndex && sliderClasses.handlerActive), "aria-disabled": disabled, "aria-label": `Slider Handler ${index}`, "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": handlerValue, onFocus: () => { }, onMouseDown: (e) => handlePress(e, index), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchStart: (e) => handlePress(e, index), role: "slider", tabIndex: index }, void 0)) }), void 0) }), void 0));
+    const inputSize = Math.max(min.toString().length, max.toString().length);
+    const [startInputValue, setStartInputValue] = useState(() => {
+        if (!isRangeSlider(value)) {
+            return '';
+        }
+        return `${value[0]}`;
+    });
+    const [endInputValue, setEndInputValue] = useState(() => {
+        if (!isRangeSlider(value)) {
+            return `${value}`;
+        }
+        return `${value[1]}`;
+    });
+    useEffect(() => {
+        if (withInput) {
+            if (isRangeSlider(value)) {
+                setStartInputValue(`${value[0]}`);
+                setEndInputValue(`${value[1]}`);
+                return;
+            }
+            setEndInputValue(value.toString());
+        }
+    }, [value, withInput]);
+    function preventValueOverflow(target) {
+        if (target > max) {
+            return max;
+        }
+        if (target < min) {
+            return min;
+        }
+        return roundToStep(target, step, min, max);
+    }
+    const onStartInputChange = shouldHaveInputHandlers ? (e) => {
+        setStartInputValue(e.target.value);
+    } : undefined;
+    const onEndInputChange = shouldHaveInputHandlers ? (e) => {
+        setEndInputValue(e.target.value);
+    } : undefined;
+    const onStartInputBlur = shouldHaveInputHandlers && isRangeSlider(value)
+        ? () => {
+            const result = sortSliderValue([
+                value[1],
+                preventValueOverflow(Number(startInputValue)),
+            ]);
+            onChange(result);
+        }
+        : undefined;
+    const onEndInputBlur = shouldHaveInputHandlers
+        ? () => {
+            if (isRangeSlider(value)) {
+                const result = sortSliderValue([
+                    value[0],
+                    preventValueOverflow(Number(endInputValue)),
+                ]);
+                onChange(result);
+                return;
+            }
+            onChange(preventValueOverflow(Number(endInputValue)));
+        }
+        : undefined;
+    const onStartInputKeydown = shouldHaveInputHandlers && isRangeSlider(value)
+        ? (e) => {
+            switch (e.code) {
+                case 'Enter': {
+                    const result = sortSliderValue([
+                        value[1],
+                        preventValueOverflow(Number(startInputValue)),
+                    ]);
+                    setStartInputValue(result[0].toString());
+                    setEndInputValue(result[1].toString());
+                    onChange(result);
+                    break;
+                }
+                case 'Escape': {
+                    setStartInputValue(value[0].toString());
+                    setEndInputValue(value[1].toString());
+                    break;
+                }
+            }
+        }
+        : undefined;
+    const onEndInputKeydown = shouldHaveInputHandlers
+        ? (e) => {
+            switch (e.code) {
+                case 'Enter': {
+                    if (isRangeSlider(value)) {
+                        const result = sortSliderValue([
+                            value[0],
+                            preventValueOverflow(Number(endInputValue)),
+                        ]);
+                        setStartInputValue(result[0].toString());
+                        setEndInputValue(result[1].toString());
+                        onChange(result);
+                        return;
+                    }
+                    const result = preventValueOverflow(Number(endInputValue));
+                    setEndInputValue(result.toString());
+                    onChange(result);
+                    break;
+                }
+                case 'Escape': {
+                    if (isRangeSlider(value)) {
+                        setStartInputValue(value[0].toString());
+                        setEndInputValue(value[1].toString());
+                        return;
+                    }
+                    setEndInputValue(value.toString());
+                    break;
+                }
+            }
+        }
+        : undefined;
+    const inputProps = {
+        max,
+        min,
+        style: {
+            width: `${inputSize}ch`,
+        },
+        type: 'number',
+    };
+    return (jsxs("div", Object.assign({}, rest, { ref: innerRef, className: cx(sliderClasses.host, disabled && sliderClasses.disabled, className), style: style }, { children: [withInput && isRangeSlider(value) ? (jsx(Input, { className: sliderClasses.input, disabled: disabled, onChange: onStartInputChange, value: startInputValue, inputProps: {
+                    ...inputProps,
+                    onKeyDown: onStartInputKeydown,
+                    onBlur: onStartInputBlur,
+                } }, void 0)) : null,
+            jsxs("div", Object.assign({ className: sliderClasses.controls }, { children: [jsx("div", { ref: railRef, className: sliderClasses.rail, role: "presentation", onMouseDown: handleClickTrackOrRail }, void 0),
+                    jsx("div", { className: sliderClasses.track, role: "presentation", onMouseDown: handleClickTrackOrRail }, void 0),
+                    isRangeSlider(value) ? (jsxs(Fragment, { children: [getHandle(value[0], 0), getHandle(value[1], 1)] }, void 0)) : getHandle(value, -1)] }), void 0),
+            withInput ? (jsx(Input, { className: sliderClasses.input, disabled: disabled, onChange: onEndInputChange, value: endInputValue, inputProps: {
+                    ...inputProps,
+                    onKeyDown: onEndInputKeydown,
+                    onBlur: onEndInputBlur,
+                } }, void 0)) : null] }), void 0));
+}
+/**
+ * The react component for `mezzanine` slider.
+ * The outcome will be base on the type of given value.
+ * Notice that slider is a fully controlled component. Property value is always needed.
+ */
+const Slider = forwardRef((props, ref) => {
+    if (isRangeSlider(props.value)) {
+        return (jsx(SliderComponent, Object.assign({}, props, { innerRef: ref }), void 0));
+    }
+    return (jsx(SliderComponent, Object.assign({}, props, { innerRef: ref }), void 0));
+});
+
+export default Slider;

package/Slider/index.d.ts

@@ -0,0 +1,3 @@
+export { SingleSliderValue, RangeSliderValue, SliderValue, SliderRect, } from '@mezzanine-ui/core/slider';
+export { UseSliderCommonProps, UseSingleSliderProps, UseRangeSliderProps, UseSliderProps, UseSliderResult, useSlider, } from './useSlider';
+export { SliderBaseProps, SingleSliderProps, RangeSliderProps, SliderComponentProps, SliderProps, default, } from './Slider';

package/Slider/index.js

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

package/Slider/useSlider.d.ts

@@ -0,0 +1,31 @@
+import { RangeSliderValue, SingleSliderValue } from '@mezzanine-ui/core/slider';
+import { CssVarInterpolation } from '@mezzanine-ui/system/css';
+import { RefObject } from 'react';
+export interface UseSliderCommonProps {
+    max: number;
+    min: number;
+    step: number;
+}
+export interface UseSingleSliderProps extends UseSliderCommonProps {
+    onChange(value: RangeSliderValue): never;
+    onChange(value: SingleSliderValue): void;
+    value: SingleSliderValue;
+}
+export interface UseRangeSliderProps extends UseSliderCommonProps {
+    onChange(value: RangeSliderValue): void;
+    onChange(value: SingleSliderValue): never;
+    value: RangeSliderValue;
+}
+export interface UseSliderProps extends UseSliderCommonProps {
+    onChange?: UseRangeSliderProps['onChange'] | UseSingleSliderProps['onChange'];
+    value: SingleSliderValue | RangeSliderValue;
+}
+export interface UseSliderResult {
+    activeHandleIndex: number | undefined;
+    cssVars: Record<string, CssVarInterpolation>;
+    handleClickTrackOrRail?: (e: any) => void;
+    handlePress: (e: any, index?: number | undefined) => void;
+    railRef: RefObject<HTMLDivElement>;
+}
+export declare function useSlider(props: UseRangeSliderProps): UseSliderResult;
+export declare function useSlider(props: UseSingleSliderProps): UseSliderResult;