@mezzanine-ui/react 0.13.9 → 0.13.11

package/Form/useCheckboxControlValue.js

@@ -1,29 +1,29 @@
 import { useSwitchControlValue } from './useSwitchControlValue.js';
 
-function useCheckboxControlValue(props) {
-    const { checkboxGroup, checked: checkedProp, defaultChecked, onChange: onChangeProp, value, } = props;
-    const { onChange: onChangeFromGroup } = checkboxGroup || {};
-    const [checked, setChecked] = useSwitchControlValue({
-        /**
-         * To ensure checkbox inside checkbox group, not use destructure here
-         */
-        // eslint-disable-next-line no-nested-ternary
-        checked: checkboxGroup
-            ? checkboxGroup.value && value != null
-                ? checkboxGroup.value.includes(value)
-                : false
-            : checkedProp,
-        defaultChecked,
-        onChange: (event) => {
-            if (onChangeProp) {
-                onChangeProp(event);
-            }
-            if (onChangeFromGroup) {
-                onChangeFromGroup(event);
-            }
-        },
-    });
-    return [checked, setChecked];
+function useCheckboxControlValue(props) {
+    const { checkboxGroup, checked: checkedProp, defaultChecked, onChange: onChangeProp, value, } = props;
+    const { onChange: onChangeFromGroup } = checkboxGroup || {};
+    const [checked, setChecked] = useSwitchControlValue({
+        /**
+         * To ensure checkbox inside checkbox group, not use destructure here
+         */
+        // eslint-disable-next-line no-nested-ternary
+        checked: checkboxGroup
+            ? checkboxGroup.value && value != null
+                ? checkboxGroup.value.includes(value)
+                : false
+            : checkedProp,
+        defaultChecked,
+        onChange: (event) => {
+            if (onChangeProp) {
+                onChangeProp(event);
+            }
+            if (onChangeFromGroup) {
+                onChangeFromGroup(event);
+            }
+        },
+    });
+    return [checked, setChecked];
 }
 
 export { useCheckboxControlValue };

package/Form/useControlValueState.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-export interface UseControlValueStateProps<V> {
-    defaultValue: V;
-    equalityFn?: (a: V, b: V) => boolean;
-    value?: V;
-}
-export declare function useControlValueState<V>(props: UseControlValueStateProps<V>): readonly [V, import("react").Dispatch<import("react").SetStateAction<V>>, (a: V, b: V) => boolean];
+/// <reference types="react" />
+export interface UseControlValueStateProps<V> {
+    defaultValue: V;
+    equalityFn?: (a: V, b: V) => boolean;
+    value?: V;
+}
+export declare function useControlValueState<V>(props: UseControlValueStateProps<V>): readonly [V, import("react").Dispatch<import("react").SetStateAction<V>>, (a: V, b: V) => boolean];

package/Form/useControlValueState.js

@@ -1,15 +1,15 @@
 import { useState } from 'react';
 
-function useControlValueState(props) {
-    const { defaultValue, equalityFn = (a, b) => a === b, value: valueProp, } = props;
-    const [value, setValue] = useState(() => (typeof valueProp !== 'undefined' ? valueProp : defaultValue));
-    /**
-     * To sync value while changed from uncontrolled to controlled.
-     */
-    if (typeof valueProp !== 'undefined' && !equalityFn(valueProp, value)) {
-        setValue(valueProp);
-    }
-    return [value, setValue, equalityFn];
+function useControlValueState(props) {
+    const { defaultValue, equalityFn = (a, b) => a === b, value: valueProp, } = props;
+    const [value, setValue] = useState(() => (typeof valueProp !== 'undefined' ? valueProp : defaultValue));
+    /**
+     * To sync value while changed from uncontrolled to controlled.
+     */
+    if (typeof valueProp !== 'undefined' && !equalityFn(valueProp, value)) {
+        setValue(valueProp);
+    }
+    return [value, setValue, equalityFn];
 }
 
 export { useControlValueState };

package/Form/useCustomControlValue.d.ts

@@ -1,5 +1,5 @@
-import { UseControlValueStateProps } from './useControlValueState';
-export interface UseCustomControlValueProps<V> extends UseControlValueStateProps<V> {
-    onChange?: (value: V) => void;
-}
-export declare function useCustomControlValue<V>(props: UseCustomControlValueProps<V>): readonly [V, (nextValue: V) => void, (a: V, b: V) => boolean];
+import { UseControlValueStateProps } from './useControlValueState';
+export interface UseCustomControlValueProps<V> extends UseControlValueStateProps<V> {
+    onChange?: (value: V) => void;
+}
+export declare function useCustomControlValue<V>(props: UseCustomControlValueProps<V>): readonly [V, (nextValue: V) => void, (a: V, b: V) => boolean];

package/Form/useCustomControlValue.js

@@ -1,18 +1,18 @@
 import { useLastCallback } from '../hooks/useLastCallback.js';
 import { useControlValueState } from './useControlValueState.js';
 
-function useCustomControlValue(props) {
-    const { onChange: onChangeProp } = props;
-    const [value, setValue, equalityFn] = useControlValueState(props);
-    const onChange = useLastCallback((nextValue) => {
-        if (!equalityFn(value, nextValue)) {
-            setValue(nextValue);
-            if (onChangeProp) {
-                onChangeProp(nextValue);
-            }
-        }
-    });
-    return [value, onChange, equalityFn];
+function useCustomControlValue(props) {
+    const { onChange: onChangeProp } = props;
+    const [value, setValue, equalityFn] = useControlValueState(props);
+    const onChange = useLastCallback((nextValue) => {
+        if (!equalityFn(value, nextValue)) {
+            setValue(nextValue);
+            if (onChangeProp) {
+                onChangeProp(nextValue);
+            }
+        }
+    });
+    return [value, onChange, equalityFn];
 }
 
 export { useCustomControlValue };

package/Form/useInputControlValue.d.ts

@@ -1,7 +1,7 @@
-import { ChangeEventHandler } from 'react';
-import { UseControlValueStateProps } from './useControlValueState';
-export interface UseInputControlValueProps<E extends HTMLInputElement | HTMLTextAreaElement> extends Omit<UseControlValueStateProps<string>, 'defaultValue' | 'equalityFn'> {
-    defaultValue?: string;
-    onChange?: ChangeEventHandler<E>;
-}
-export declare function useInputControlValue<E extends HTMLInputElement | HTMLTextAreaElement>(props: UseInputControlValueProps<E>): readonly [string, (event: import("react").ChangeEvent<E>) => void];
+import { ChangeEventHandler } from 'react';
+import { UseControlValueStateProps } from './useControlValueState';
+export interface UseInputControlValueProps<E extends HTMLInputElement | HTMLTextAreaElement> extends Omit<UseControlValueStateProps<string>, 'defaultValue' | 'equalityFn'> {
+    defaultValue?: string;
+    onChange?: ChangeEventHandler<E>;
+}
+export declare function useInputControlValue<E extends HTMLInputElement | HTMLTextAreaElement>(props: UseInputControlValueProps<E>): readonly [string, (event: import("react").ChangeEvent<E>) => void];

package/Form/useInputControlValue.js

@@ -1,24 +1,24 @@
 import { useLastCallback } from '../hooks/useLastCallback.js';
 import { useControlValueState } from './useControlValueState.js';
 
-const equalityFn = (a, b) => a === b;
-function useInputControlValue(props) {
-    const { defaultValue = '', onChange: onChangeProp, value: valueProp, } = props;
-    const [value, setValue] = useControlValueState({
-        defaultValue,
-        equalityFn,
-        value: valueProp,
-    });
-    const onChange = useLastCallback((event) => {
-        const nextValue = event.target.value;
-        if (!equalityFn(value, nextValue)) {
-            setValue(nextValue);
-            if (onChangeProp) {
-                onChangeProp(event);
-            }
-        }
-    });
-    return [value, onChange];
+const equalityFn = (a, b) => a === b;
+function useInputControlValue(props) {
+    const { defaultValue = '', onChange: onChangeProp, value: valueProp, } = props;
+    const [value, setValue] = useControlValueState({
+        defaultValue,
+        equalityFn,
+        value: valueProp,
+    });
+    const onChange = useLastCallback((event) => {
+        const nextValue = event.target.value;
+        if (!equalityFn(value, nextValue)) {
+            setValue(nextValue);
+            if (onChangeProp) {
+                onChangeProp(event);
+            }
+        }
+    });
+    return [value, onChange];
 }
 
 export { useInputControlValue };

package/Form/useInputWithClearControlValue.d.ts

@@ -1,6 +1,6 @@
-import { ChangeEvent, MouseEvent, RefObject } from 'react';
-import { UseInputControlValueProps } from './useInputControlValue';
-export interface UseInputWithClearControlValueProps<E extends HTMLInputElement | HTMLTextAreaElement> extends UseInputControlValueProps<E> {
-    ref: RefObject<E>;
-}
-export declare function useInputWithClearControlValue<E extends HTMLInputElement | HTMLTextAreaElement>(props: UseInputWithClearControlValueProps<E>): readonly [string, (event: ChangeEvent<E>) => void, (event: MouseEvent) => void];
+import { ChangeEvent, MouseEvent, RefObject } from 'react';
+import { UseInputControlValueProps } from './useInputControlValue';
+export interface UseInputWithClearControlValueProps<E extends HTMLInputElement | HTMLTextAreaElement> extends UseInputControlValueProps<E> {
+    ref: RefObject<E>;
+}
+export declare function useInputWithClearControlValue<E extends HTMLInputElement | HTMLTextAreaElement>(props: UseInputWithClearControlValueProps<E>): readonly [string, (event: ChangeEvent<E>) => void, (event: MouseEvent) => void];

package/Form/useInputWithClearControlValue.js

@@ -1,33 +1,33 @@
 import { useInputControlValue } from './useInputControlValue.js';
 
-function useInputWithClearControlValue(props) {
-    const { defaultValue, onChange: onChangeProp, ref, value: valueProp, } = props;
-    const [value, onChange] = useInputControlValue({
-        defaultValue,
-        onChange: onChangeProp,
-        value: valueProp,
-    });
-    const onClear = (event) => {
-        const target = ref.current;
-        if (target) {
-            const changeEvent = Object.create(event);
-            const originalValue = target.value;
-            changeEvent.target = target;
-            changeEvent.currentTarget = target;
-            /**
-             * Change target ref value cause e.target.value should be '' when clear input
-             * And then reset ref value
-             */
-            target.value = '';
-            onChange(changeEvent);
-            target.value = originalValue;
-        }
-    };
-    return [
-        value,
-        onChange,
-        onClear,
-    ];
+function useInputWithClearControlValue(props) {
+    const { defaultValue, onChange: onChangeProp, ref, value: valueProp, } = props;
+    const [value, onChange] = useInputControlValue({
+        defaultValue,
+        onChange: onChangeProp,
+        value: valueProp,
+    });
+    const onClear = (event) => {
+        const target = ref.current;
+        if (target) {
+            const changeEvent = Object.create(event);
+            const originalValue = target.value;
+            changeEvent.target = target;
+            changeEvent.currentTarget = target;
+            /**
+             * Change target ref value cause e.target.value should be '' when clear input
+             * And then reset ref value
+             */
+            target.value = '';
+            onChange(changeEvent);
+            target.value = originalValue;
+        }
+    };
+    return [
+        value,
+        onChange,
+        onClear,
+    ];
 }
 
 export { useInputWithClearControlValue };

package/Form/useInputWithTagsModeValue.d.ts

@@ -1,37 +1,37 @@
-import { ChangeEvent, KeyboardEvent, RefObject } from 'react';
-import { UseInputControlValueProps } from './useInputControlValue';
-export type TagsType = string[] | number[];
-export interface UseInputWithTagsModeValueProps<E extends HTMLInputElement | HTMLTextAreaElement> extends UseInputControlValueProps<E> {
-    /**
-     * The value of initial tags
-     */
-    initialTagsValue?: string[];
-    /**
-     * Maximum permitted length of the tags
-     * @default 3
-     */
-    maxTagsLength?: number;
-    /**
-     * The change event handler of tags
-     */
-    onTagsChange?: (tags: TagsType) => void;
-    /**
-     * The ref object of input element
-     */
-    ref: RefObject<E>;
-    /**
-     * Will skip `onKeyDown` calling if `true`
-     * @default false
-     */
-    skip?: boolean;
-    /**
-     * Maximum length of value on each tag
-     * @default 8
-     */
-    tagValueMaxLength?: number;
-}
-export declare function useInputWithTagsModeValue<E extends HTMLInputElement | HTMLTextAreaElement>(props: Omit<UseInputWithTagsModeValueProps<E>, 'onChange'>): readonly [{
-    readonly tags: string[];
-    readonly typingValue: string;
-    readonly tagsReachedMax: boolean;
-}, (event: ChangeEvent<E> | null) => void, () => void, (tag: string) => void, (e: KeyboardEvent) => void];
+import { ChangeEvent, KeyboardEvent, RefObject } from 'react';
+import { UseInputControlValueProps } from './useInputControlValue';
+export type TagsType = string[] | number[];
+export interface UseInputWithTagsModeValueProps<E extends HTMLInputElement | HTMLTextAreaElement> extends UseInputControlValueProps<E> {
+    /**
+     * The value of initial tags
+     */
+    initialTagsValue?: string[];
+    /**
+     * Maximum permitted length of the tags
+     * @default 3
+     */
+    maxTagsLength?: number;
+    /**
+     * The change event handler of tags
+     */
+    onTagsChange?: (tags: TagsType) => void;
+    /**
+     * The ref object of input element
+     */
+    ref: RefObject<E>;
+    /**
+     * Will skip `onKeyDown` calling if `true`
+     * @default false
+     */
+    skip?: boolean;
+    /**
+     * Maximum length of value on each tag
+     * @default 8
+     */
+    tagValueMaxLength?: number;
+}
+export declare function useInputWithTagsModeValue<E extends HTMLInputElement | HTMLTextAreaElement>(props: Omit<UseInputWithTagsModeValueProps<E>, 'onChange'>): readonly [{
+    readonly tags: string[];
+    readonly typingValue: string;
+    readonly tagsReachedMax: boolean;
+}, (event: ChangeEvent<E> | null) => void, () => void, (tag: string) => void, (e: KeyboardEvent) => void];

package/Form/useInputWithTagsModeValue.js

@@ -1,89 +1,89 @@
 import { useRef, useState, useCallback } from 'react';
 import { useInputControlValue } from './useInputControlValue.js';
 
-function useInputWithTagsModeValue(props) {
-    var _a;
-    const { defaultValue, initialTagsValue = [], maxTagsLength, onTagsChange: onChangeProp, ref, skip = false, tagValueMaxLength = 8, } = props;
-    const canActive = !skip;
-    const activeMaxTagsLength = maxTagsLength || Math.max(3, initialTagsValue.length);
-    const tagsSetRef = useRef(new Set(initialTagsValue.map((initialTag) => initialTag.trim())));
-    const inputTypeIsNumber = useRef(((_a = ref.current) === null || _a === void 0 ? void 0 : _a.type) === 'number');
-    const tagValueTransform = (tag) => (tag.slice(0, tagValueMaxLength).trim());
-    const transformNumberTags = (tags) => (tags.map((tag) => Number(tag)));
-    const generateUniqueTags = () => (Array
-        .from(tagsSetRef.current.values())
-        .map((initialTag) => tagValueTransform(initialTag)));
-    const [value, setValue] = useInputControlValue({
-        defaultValue: canActive ? defaultValue : undefined,
-    });
-    const [tags, setTags] = useState(generateUniqueTags()
-        .slice(0, activeMaxTagsLength));
-    const tagsWillOverflow = useCallback(() => (tagsSetRef.current.size === activeMaxTagsLength), []);
-    const clearTypingFieldValue = () => {
-        if (!canActive)
-            return;
-        const target = ref.current;
-        if (target) {
-            const changeEvent = Object.create({});
-            changeEvent.target = target;
-            changeEvent.currentTarget = target;
-            target.value = '';
-            setValue(changeEvent);
-        }
-    };
-    const onClear = () => {
-        if (!canActive)
-            return;
-        clearTypingFieldValue();
-        tagsSetRef.current.clear();
-        setTags([]);
-        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([]);
-    };
-    const onChange = (event) => {
-        if (canActive && event) {
-            setValue(event);
-        }
-    };
-    const onRemove = (tag) => {
-        tagsSetRef.current.delete(tag);
-        const numberTag = inputTypeIsNumber.current;
-        const newTags = generateUniqueTags();
-        setTags(newTags);
-        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(numberTag ? transformNumberTags(newTags) : newTags);
-    };
-    const onKeyDown = useCallback((e) => {
-        var _a;
-        if (!canActive)
-            return;
-        const element = ref.current;
-        if (element &&
-            (element === null || element === void 0 ? void 0 : element.value) &&
-            (e.key === 'Enter' || e.code === 'Enter') &&
-            !e.nativeEvent.isComposing &&
-            !tagsWillOverflow()) {
-            e.preventDefault();
-            inputTypeIsNumber.current = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.type) === 'number';
-            const tagsSet = tagsSetRef.current;
-            const isNumber = inputTypeIsNumber.current;
-            const newTagValue = tagValueTransform(element.value);
-            tagsSet.add(newTagValue);
-            const newTags = generateUniqueTags();
-            setTags(newTags);
-            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(isNumber ? transformNumberTags(newTags) : newTags);
-            clearTypingFieldValue();
-        }
-    }, [tagsWillOverflow]);
-    return [
-        {
-            tags,
-            typingValue: value,
-            tagsReachedMax: tagsWillOverflow(),
-        },
-        onChange,
-        onClear,
-        onRemove,
-        onKeyDown,
-    ];
+function useInputWithTagsModeValue(props) {
+    var _a;
+    const { defaultValue, initialTagsValue = [], maxTagsLength, onTagsChange: onChangeProp, ref, skip = false, tagValueMaxLength = 8, } = props;
+    const canActive = !skip;
+    const activeMaxTagsLength = maxTagsLength || Math.max(3, initialTagsValue.length);
+    const tagsSetRef = useRef(new Set(initialTagsValue.map((initialTag) => initialTag.trim())));
+    const inputTypeIsNumber = useRef(((_a = ref.current) === null || _a === void 0 ? void 0 : _a.type) === 'number');
+    const tagValueTransform = (tag) => (tag.slice(0, tagValueMaxLength).trim());
+    const transformNumberTags = (tags) => (tags.map((tag) => Number(tag)));
+    const generateUniqueTags = () => (Array
+        .from(tagsSetRef.current.values())
+        .map((initialTag) => tagValueTransform(initialTag)));
+    const [value, setValue] = useInputControlValue({
+        defaultValue: canActive ? defaultValue : undefined,
+    });
+    const [tags, setTags] = useState(generateUniqueTags()
+        .slice(0, activeMaxTagsLength));
+    const tagsWillOverflow = useCallback(() => (tagsSetRef.current.size === activeMaxTagsLength), []);
+    const clearTypingFieldValue = () => {
+        if (!canActive)
+            return;
+        const target = ref.current;
+        if (target) {
+            const changeEvent = Object.create({});
+            changeEvent.target = target;
+            changeEvent.currentTarget = target;
+            target.value = '';
+            setValue(changeEvent);
+        }
+    };
+    const onClear = () => {
+        if (!canActive)
+            return;
+        clearTypingFieldValue();
+        tagsSetRef.current.clear();
+        setTags([]);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([]);
+    };
+    const onChange = (event) => {
+        if (canActive && event) {
+            setValue(event);
+        }
+    };
+    const onRemove = (tag) => {
+        tagsSetRef.current.delete(tag);
+        const numberTag = inputTypeIsNumber.current;
+        const newTags = generateUniqueTags();
+        setTags(newTags);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(numberTag ? transformNumberTags(newTags) : newTags);
+    };
+    const onKeyDown = useCallback((e) => {
+        var _a;
+        if (!canActive)
+            return;
+        const element = ref.current;
+        if (element &&
+            (element === null || element === void 0 ? void 0 : element.value) &&
+            (e.key === 'Enter' || e.code === 'Enter') &&
+            !e.nativeEvent.isComposing &&
+            !tagsWillOverflow()) {
+            e.preventDefault();
+            inputTypeIsNumber.current = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.type) === 'number';
+            const tagsSet = tagsSetRef.current;
+            const isNumber = inputTypeIsNumber.current;
+            const newTagValue = tagValueTransform(element.value);
+            tagsSet.add(newTagValue);
+            const newTags = generateUniqueTags();
+            setTags(newTags);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(isNumber ? transformNumberTags(newTags) : newTags);
+            clearTypingFieldValue();
+        }
+    }, [tagsWillOverflow]);
+    return [
+        {
+            tags,
+            typingValue: value,
+            tagsReachedMax: tagsWillOverflow(),
+        },
+        onChange,
+        onClear,
+        onRemove,
+        onKeyDown,
+    ];
 }
 
 export { useInputWithTagsModeValue };

package/Form/useRadioControlValue.d.ts

@@ -1,11 +1,11 @@
-import { ChangeEventHandler } from 'react';
-import { UseSwitchControlValueProps } from './useSwitchControlValue';
-export interface RadioGroupControlContextValue {
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    value?: string;
-}
-export interface UseRadioControlValueProps extends UseSwitchControlValueProps {
-    radioGroup?: RadioGroupControlContextValue;
-    value?: string;
-}
-export declare function useRadioControlValue(props: UseRadioControlValueProps): readonly [boolean, (event: import("react").ChangeEvent<HTMLInputElement>) => void];
+import { ChangeEventHandler } from 'react';
+import { UseSwitchControlValueProps } from './useSwitchControlValue';
+export interface RadioGroupControlContextValue {
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    value?: string;
+}
+export interface UseRadioControlValueProps extends UseSwitchControlValueProps {
+    radioGroup?: RadioGroupControlContextValue;
+    value?: string;
+}
+export declare function useRadioControlValue(props: UseRadioControlValueProps): readonly [boolean, (event: import("react").ChangeEvent<HTMLInputElement>) => void];

package/Form/useRadioControlValue.js

@@ -1,24 +1,24 @@
 import { useSwitchControlValue } from './useSwitchControlValue.js';
 
-function useRadioControlValue(props) {
-    const { checked: checkedProp, defaultChecked, onChange: onChangeProp, radioGroup, value, } = props;
-    const { onChange: onChangeFromGroup } = radioGroup || {};
-    const [checked, setChecked] = useSwitchControlValue({
-        /**
-         * To ensure radio inside radio group, not use destructure here
-         */
-        checked: radioGroup ? radioGroup.value === value : checkedProp,
-        defaultChecked,
-        onChange: (event) => {
-            if (onChangeProp) {
-                onChangeProp(event);
-            }
-            if (onChangeFromGroup) {
-                onChangeFromGroup(event);
-            }
-        },
-    });
-    return [checked, setChecked];
+function useRadioControlValue(props) {
+    const { checked: checkedProp, defaultChecked, onChange: onChangeProp, radioGroup, value, } = props;
+    const { onChange: onChangeFromGroup } = radioGroup || {};
+    const [checked, setChecked] = useSwitchControlValue({
+        /**
+         * To ensure radio inside radio group, not use destructure here
+         */
+        checked: radioGroup ? radioGroup.value === value : checkedProp,
+        defaultChecked,
+        onChange: (event) => {
+            if (onChangeProp) {
+                onChangeProp(event);
+            }
+            if (onChangeFromGroup) {
+                onChangeFromGroup(event);
+            }
+        },
+    });
+    return [checked, setChecked];
 }
 
 export { useRadioControlValue };