@mezzanine-ui/react 0.13.10 → 0.13.12

package/Slider/useSlider.js

@@ -2,105 +2,105 @@ import { isRangeSlider, fixRangeSliderValue, fixSingleSliderValue, toSliderCssVa
 import { useRef, useState } from 'react';
 import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
 
-function useSlider(props) {
-    const { max, min, onChange, step, value, } = props;
-    const railRef = useRef(null);
-    const [anchorValue, setAnchorValue] = useState(undefined);
-    const [dragging, setDragging] = useState(false);
-    function getActiveIndex() {
-        if (typeof anchorValue !== 'number') {
-            return undefined;
-        }
-        return isRangeSlider(value) ? Math.abs(1 - value.indexOf(anchorValue)) : undefined;
-    }
-    const fixedValue = isRangeSlider(value) ? fixRangeSliderValue(value, min, max)
-        : fixSingleSliderValue(value, min, max);
-    const cssVars = toSliderCssVars({
-        trackWidth: getPercentage(isRangeSlider(fixedValue) ? Math.abs(fixedValue[0] - fixedValue[1]) : fixedValue - min, min, max),
-        trackPosition: getPercentage(isRangeSlider(fixedValue) ? Math.abs(Math.min(...fixedValue) - min) : 0, min, max),
-        handlerPosition: getPercentage(isRangeSlider(fixedValue) ? 0 : fixedValue - min, min, max),
-        handlerStartPosition: getPercentage(isRangeSlider(fixedValue) ? Math.abs(Math.min(...fixedValue) - min) : fixedValue, min, max),
-        handlerEndPosition: getPercentage(isRangeSlider(fixedValue) ? Math.abs(Math.max(...fixedValue) - min) : fixedValue, min, max),
-    });
-    const getRoundedNewValue = (e, railElement) => {
-        const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX;
-        const trackDims = getSliderRect(railElement);
-        const newValue = getValueFromClientX(clientX, trackDims, min, max);
-        const roundedNewValue = roundToStep(newValue, step, min, max);
-        return roundedNewValue;
-    };
-    const handlePress = (e, index) => {
-        e.preventDefault();
-        setDragging(true);
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        setAnchorValue(isRangeSlider(value) ? value[Math.abs(1 - index)] : value);
-    };
-    const handleDrag = onChange ? (e) => {
-        e.preventDefault();
-        const { current: railElement } = railRef;
-        if (!railElement)
-            return;
-        const roundedNewValue = getRoundedNewValue(e, railElement);
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const activeIndex = getActiveIndex();
-        if (isRangeSlider(value)) {
-            const newValue = [
-                ...value.slice(0, activeIndex),
-                roundedNewValue,
-                ...value.slice(activeIndex + 1),
-            ];
-            onChange(sortSliderValue(newValue));
-            return;
-        }
-        onChange(roundedNewValue);
-    } : undefined;
-    const handleDragEnd = (e) => {
-        e.preventDefault();
-        setDragging(false);
-        setAnchorValue(undefined);
-    };
-    const handleClickTrackOrRail = onChange ? (e) => {
-        setDragging(true);
-        const { current: railElement } = railRef;
-        if (!railElement)
-            return;
-        const roundedNewValue = getRoundedNewValue(e, railElement);
-        const closetHandlerIndex = findClosetValueIndex(value, roundedNewValue);
-        if (isRangeSlider(value)) {
-            setAnchorValue(value[Math.abs(1 - closetHandlerIndex)]);
-            const newValue = [
-                ...value.slice(0, closetHandlerIndex),
-                roundedNewValue,
-                ...value.slice(closetHandlerIndex + 1),
-            ];
-            onChange(sortSliderValue(newValue));
-            return;
-        }
-        onChange(roundedNewValue);
-    } : undefined;
-    useDocumentEvents(() => (dragging
-        ? {
-            mousemove: handleDrag,
-            touchmove: handleDrag,
-            mouseleave: handleDragEnd,
-            mouseup: handleDragEnd,
-            touchend: handleDragEnd,
-            touchcancel: handleDragEnd,
-        }
-        : undefined), [
-        dragging,
-        min,
-        max,
-        step,
-        onChange,
-    ]);
-    return {
-        activeHandleIndex: getActiveIndex(),
-        cssVars,
-        handleClickTrackOrRail,
-        handlePress,
-        railRef,
-    };
+function useSlider(props) {
+    const { max, min, onChange, step, value, } = props;
+    const railRef = useRef(null);
+    const [anchorValue, setAnchorValue] = useState(undefined);
+    const [dragging, setDragging] = useState(false);
+    function getActiveIndex() {
+        if (typeof anchorValue !== 'number') {
+            return undefined;
+        }
+        return isRangeSlider(value) ? Math.abs(1 - value.indexOf(anchorValue)) : undefined;
+    }
+    const fixedValue = isRangeSlider(value) ? fixRangeSliderValue(value, min, max)
+        : fixSingleSliderValue(value, min, max);
+    const cssVars = toSliderCssVars({
+        trackWidth: getPercentage(isRangeSlider(fixedValue) ? Math.abs(fixedValue[0] - fixedValue[1]) : fixedValue - min, min, max),
+        trackPosition: getPercentage(isRangeSlider(fixedValue) ? Math.abs(Math.min(...fixedValue) - min) : 0, min, max),
+        handlerPosition: getPercentage(isRangeSlider(fixedValue) ? 0 : fixedValue - min, min, max),
+        handlerStartPosition: getPercentage(isRangeSlider(fixedValue) ? Math.abs(Math.min(...fixedValue) - min) : fixedValue, min, max),
+        handlerEndPosition: getPercentage(isRangeSlider(fixedValue) ? Math.abs(Math.max(...fixedValue) - min) : fixedValue, min, max),
+    });
+    const getRoundedNewValue = (e, railElement) => {
+        const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX;
+        const trackDims = getSliderRect(railElement);
+        const newValue = getValueFromClientX(clientX, trackDims, min, max);
+        const roundedNewValue = roundToStep(newValue, step, min, max);
+        return roundedNewValue;
+    };
+    const handlePress = (e, index) => {
+        e.preventDefault();
+        setDragging(true);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        setAnchorValue(isRangeSlider(value) ? value[Math.abs(1 - index)] : value);
+    };
+    const handleDrag = onChange ? (e) => {
+        e.preventDefault();
+        const { current: railElement } = railRef;
+        if (!railElement)
+            return;
+        const roundedNewValue = getRoundedNewValue(e, railElement);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const activeIndex = getActiveIndex();
+        if (isRangeSlider(value)) {
+            const newValue = [
+                ...value.slice(0, activeIndex),
+                roundedNewValue,
+                ...value.slice(activeIndex + 1),
+            ];
+            onChange(sortSliderValue(newValue));
+            return;
+        }
+        onChange(roundedNewValue);
+    } : undefined;
+    const handleDragEnd = (e) => {
+        e.preventDefault();
+        setDragging(false);
+        setAnchorValue(undefined);
+    };
+    const handleClickTrackOrRail = onChange ? (e) => {
+        setDragging(true);
+        const { current: railElement } = railRef;
+        if (!railElement)
+            return;
+        const roundedNewValue = getRoundedNewValue(e, railElement);
+        const closetHandlerIndex = findClosetValueIndex(value, roundedNewValue);
+        if (isRangeSlider(value)) {
+            setAnchorValue(value[Math.abs(1 - closetHandlerIndex)]);
+            const newValue = [
+                ...value.slice(0, closetHandlerIndex),
+                roundedNewValue,
+                ...value.slice(closetHandlerIndex + 1),
+            ];
+            onChange(sortSliderValue(newValue));
+            return;
+        }
+        onChange(roundedNewValue);
+    } : undefined;
+    useDocumentEvents(() => (dragging
+        ? {
+            mousemove: handleDrag,
+            touchmove: handleDrag,
+            mouseleave: handleDragEnd,
+            mouseup: handleDragEnd,
+            touchend: handleDragEnd,
+            touchcancel: handleDragEnd,
+        }
+        : undefined), [
+        dragging,
+        min,
+        max,
+        step,
+        onChange,
+    ]);
+    return {
+        activeHandleIndex: getActiveIndex(),
+        cssVars,
+        handleClickTrackOrRail,
+        handlePress,
+        railRef,
+    };
 }
 
 export { useSlider };

package/Stepper/Step.d.ts

@@ -1,41 +1,41 @@
-/// <reference types="react" />
-import { IconProps } from '../Icon';
-import { TypographyProps } from '../Typography';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface StepProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title'> {
-    /**
-     * Mark the step as active. automatically set by `activeStep` of `Stepper`.
-     */
-    active?: boolean;
-    /**
-     * Mark the step as completed. automatically set by `activeStep` of `Stepper`.
-     */
-    completed?: boolean;
-    /**
-     * Step icon props. effective only when the step is completed.
-     * @default 'icon: CheckIcon'
-     */
-    completedIconProps?: IconProps;
-    /**
-     * Mark the step as disabled. automatically set by `activeStep` of `Stepper`.
-     */
-    disabled?: boolean;
-    /**
-     * Step index. automatically set by the parent <Stepper />.
-     */
-    index?: number;
-    /**
-     * The step label on the right side of the icon, visible if value is not empty.
-     */
-    title?: string;
-    /**
-     * title typography props.
-     * @default 'variant: button2'
-     */
-    titleProps?: Omit<TypographyProps, 'children'>;
-}
-/**
- * The react component for `mezzanine` step.
- */
-declare const Step: import("react").ForwardRefExoticComponent<StepProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Step;
+/// <reference types="react" />
+import { IconProps } from '../Icon';
+import { TypographyProps } from '../Typography';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface StepProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title'> {
+    /**
+     * Mark the step as active. automatically set by `activeStep` of `Stepper`.
+     */
+    active?: boolean;
+    /**
+     * Mark the step as completed. automatically set by `activeStep` of `Stepper`.
+     */
+    completed?: boolean;
+    /**
+     * Step icon props. effective only when the step is completed.
+     * @default 'icon: CheckIcon'
+     */
+    completedIconProps?: IconProps;
+    /**
+     * Mark the step as disabled. automatically set by `activeStep` of `Stepper`.
+     */
+    disabled?: boolean;
+    /**
+     * Step index. automatically set by the parent <Stepper />.
+     */
+    index?: number;
+    /**
+     * The step label on the right side of the icon, visible if value is not empty.
+     */
+    title?: string;
+    /**
+     * title typography props.
+     * @default 'variant: button2'
+     */
+    titleProps?: Omit<TypographyProps, 'children'>;
+}
+/**
+ * The react component for `mezzanine` step.
+ */
+declare const Step: import("react").ForwardRefExoticComponent<StepProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Step;

package/Stepper/Step.js

@@ -6,15 +6,15 @@ import Typography from '../Typography/Typography.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` step.
- */
-const Step = forwardRef(function Step(props, ref) {
-    const { active, children, className, completed, completedIconProps, disabled, index = -1, title, titleProps, ...rest } = props;
-    /** icon and step number */
-    const iconRender = (jsx(Typography, { className: stepClasses.iconBackground, variant: "button3", children: completed ? (jsx(Icon, { className: stepClasses.completedIcon, icon: CheckIcon, ...completedIconProps })) : index + 1 }));
-    return (jsxs("div", { className: cx(stepClasses.host, disabled && stepClasses.disabled, className), ref: ref, ...rest, children: [iconRender, /** title (optional) */ title && (jsx(Typography, { className: stepClasses.title, variant: "button2", ...titleProps, children: title })), children] }));
-});
+/**
+ * The react component for `mezzanine` step.
+ */
+const Step = forwardRef(function Step(props, ref) {
+    const { active, children, className, completed, completedIconProps, disabled, index = -1, title, titleProps, ...rest } = props;
+    /** icon and step number */
+    const iconRender = (jsx(Typography, { className: stepClasses.iconBackground, variant: "button3", children: completed ? (jsx(Icon, { className: stepClasses.completedIcon, icon: CheckIcon, ...completedIconProps })) : index + 1 }));
+    return (jsxs("div", { className: cx(stepClasses.host, disabled && stepClasses.disabled, className), ref: ref, ...rest, children: [iconRender, /** title (optional) */ title && (jsx(Typography, { className: stepClasses.title, variant: "button2", ...titleProps, children: title })), children] }));
+});
 var Step$1 = Step;
 
 export { Step$1 as default };

package/Stepper/Stepper.d.ts

@@ -1,19 +1,19 @@
-import { ReactNode } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface StepperProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * Set the active step (zero based index) and set other `<Step />` to completed or disabled depending on index.
-     * Set to -1 to disable all the steps.
-     * @default -1
-     */
-    activeStep?: number;
-    /**
-     * Two or more `<Step />` components.
-     */
-    children: ReactNode;
-}
-/**
- * The react component for `mezzanine` stepper.
- */
-declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Stepper;
+import { ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface StepperProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Set the active step (zero based index) and set other `<Step />` to completed or disabled depending on index.
+     * Set to -1 to disable all the steps.
+     * @default -1
+     */
+    activeStep?: number;
+    /**
+     * Two or more `<Step />` components.
+     */
+    children: ReactNode;
+}
+/**
+ * The react component for `mezzanine` stepper.
+ */
+declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Stepper;

package/Stepper/Stepper.js

@@ -3,32 +3,32 @@ import { forwardRef, Children, cloneElement } from 'react';
 import { stepperClasses } from '@mezzanine-ui/core/stepper';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` stepper.
- */
-const Stepper = forwardRef(function Stepper(props, ref) {
-    const { activeStep = -1, children, className, ...rest } = props;
-    const childrenArray = Children.toArray(children);
-    const stepsWithState = childrenArray.map((element, index) => {
-        const step = element;
-        const state = {
-            index,
-            active: activeStep === index,
-            completed: activeStep > index,
-            disabled: activeStep < index,
-        };
-        if (step.props.active || step.props.disabled || step.props.completed) {
-            state.active = false;
-            state.completed = false;
-            state.disabled = false;
-        }
-        return cloneElement(step, {
-            ...state,
-            ...step.props,
-        });
-    });
-    return (jsx("div", { className: cx(stepperClasses.host, className), ref: ref, ...rest, children: stepsWithState }));
-});
+/**
+ * The react component for `mezzanine` stepper.
+ */
+const Stepper = forwardRef(function Stepper(props, ref) {
+    const { activeStep = -1, children, className, ...rest } = props;
+    const childrenArray = Children.toArray(children);
+    const stepsWithState = childrenArray.map((element, index) => {
+        const step = element;
+        const state = {
+            index,
+            active: activeStep === index,
+            completed: activeStep > index,
+            disabled: activeStep < index,
+        };
+        if (step.props.active || step.props.disabled || step.props.completed) {
+            state.active = false;
+            state.completed = false;
+            state.disabled = false;
+        }
+        return cloneElement(step, {
+            ...state,
+            ...step.props,
+        });
+    });
+    return (jsx("div", { className: cx(stepperClasses.host, className), ref: ref, ...rest, children: stepsWithState }));
+});
 var Stepper$1 = Stepper;
 
 export { Stepper$1 as default };

package/Stepper/index.d.ts

@@ -1,2 +1,2 @@
-export { StepProps, default as Step, } from './Step';
-export { StepperProps, default, } from './Stepper';
+export { StepProps, default as Step, } from './Step';
+export { StepperProps, default, } from './Stepper';

package/Switch/Switch.d.ts

@@ -1,43 +1,43 @@
-import { ChangeEventHandler } from 'react';
-import { SwitchSize } from '@mezzanine-ui/core/switch';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface SwitchProps extends Omit<NativeElementPropsWithoutKeyAndRef<'span'>, 'onChange'> {
-    /**
-     * Whether the switch is checked.
-     */
-    checked?: boolean;
-    /**
-     * Whether the switch is checked by default.
-     * Only used for uncontrolled.
-     */
-    defaultChecked?: boolean;
-    /**
-     * Whether the switch is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Since at Mezzanine we use a host element to wrap our input, most derived props will be passed to the host element.
-     *  If you need direct control to the input element, use this prop to provide to it.
-     */
-    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'placeholder' | 'type' | 'value' | `aria-${'disabled' | 'checked'}`>;
-    /**
-     * Whether the switch is loading.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Invoked by input change event.
-     */
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    /**
-     * The size of switch.
-     * @default 'medium'
-     */
-    size?: SwitchSize;
-}
-/**
- * The react component for `mezzanine` switch.
- */
-declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLSpanElement>>;
-export default Switch;
+import { ChangeEventHandler } from 'react';
+import { SwitchSize } from '@mezzanine-ui/core/switch';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface SwitchProps extends Omit<NativeElementPropsWithoutKeyAndRef<'span'>, 'onChange'> {
+    /**
+     * Whether the switch is checked.
+     */
+    checked?: boolean;
+    /**
+     * Whether the switch is checked by default.
+     * Only used for uncontrolled.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the switch is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Since at Mezzanine we use a host element to wrap our input, most derived props will be passed to the host element.
+     *  If you need direct control to the input element, use this prop to provide to it.
+     */
+    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'placeholder' | 'type' | 'value' | `aria-${'disabled' | 'checked'}`>;
+    /**
+     * Whether the switch is loading.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Invoked by input change event.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The size of switch.
+     * @default 'medium'
+     */
+    size?: SwitchSize;
+}
+/**
+ * The react component for `mezzanine` switch.
+ */
+declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default Switch;

package/Switch/Switch.js

@@ -6,24 +6,24 @@ import Icon from '../Icon/Icon.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` switch.
- */
-const Switch = forwardRef(function Switch(props, ref) {
-    const { disabled: disabledFromFormControl, } = useContext(FormControlContext) || {};
-    const { checked: checkedProp, className, defaultChecked, disabled: disabledProp = disabledFromFormControl, inputProps, loading = false, onChange: onChangeProp, size = 'medium', ...rest } = props;
-    const [checked, onChange] = useSwitchControlValue({
-        checked: checkedProp,
-        defaultChecked,
-        onChange: onChangeProp,
-    });
-    const disabled = loading || disabledProp;
-    return (jsxs("span", { ref: ref, ...rest, className: cx(switchClasses.host, {
-            [switchClasses.checked]: checked,
-            [switchClasses.disabled]: disabled,
-            [switchClasses.large]: size === 'large',
-        }, className), children: [jsx("span", { className: switchClasses.control, children: loading && jsx(Icon, { icon: SwitchSpinnerIcon, spin: true }) }), jsx("input", { ...inputProps, "aria-checked": checked, "aria-disabled": disabled, checked: checked, className: switchClasses.input, disabled: disabled, onChange: onChange, type: "checkbox" })] }));
-});
+/**
+ * The react component for `mezzanine` switch.
+ */
+const Switch = forwardRef(function Switch(props, ref) {
+    const { disabled: disabledFromFormControl, } = useContext(FormControlContext) || {};
+    const { checked: checkedProp, className, defaultChecked, disabled: disabledProp = disabledFromFormControl, inputProps, loading = false, onChange: onChangeProp, size = 'medium', ...rest } = props;
+    const [checked, onChange] = useSwitchControlValue({
+        checked: checkedProp,
+        defaultChecked,
+        onChange: onChangeProp,
+    });
+    const disabled = loading || disabledProp;
+    return (jsxs("span", { ref: ref, ...rest, className: cx(switchClasses.host, {
+            [switchClasses.checked]: checked,
+            [switchClasses.disabled]: disabled,
+            [switchClasses.large]: size === 'large',
+        }, className), children: [jsx("span", { className: switchClasses.control, children: loading && jsx(Icon, { icon: SwitchSpinnerIcon, spin: true }) }), jsx("input", { ...inputProps, "aria-checked": checked, "aria-disabled": disabled, checked: checked, className: switchClasses.input, disabled: disabled, onChange: onChange, type: "checkbox" })] }));
+});
 var Switch$1 = Switch;
 
 export { Switch$1 as default };

package/Switch/index.d.ts

@@ -1,2 +1,2 @@
-export type { SwitchSize, } from '@mezzanine-ui/core/switch';
-export { SwitchProps, default } from './Switch';
+export type { SwitchSize, } from '@mezzanine-ui/core/switch';
+export { SwitchProps, default } from './Switch';