@mezzanine-ui/react 0.13.10 → 0.13.12

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 };

package/Form/useSelectValueControl.d.ts

@@ -1,33 +1,33 @@
-import { MouseEvent } from 'react';
-import { SelectValue } from '../Select/typings';
-export interface UseSelectBaseValueControl {
-    onClear?(e: MouseEvent<Element>): void;
-    onChange?(newOptions: SelectValue[] | SelectValue): any;
-    onClose?(): void;
-}
-export declare type UseSelectMultipleValueControl = UseSelectBaseValueControl & {
-    defaultValue?: SelectValue[];
-    mode: 'multiple';
-    onChange?(newOptions: SelectValue[]): any;
-    value?: SelectValue[];
-};
-export declare type UseSelectSingleValueControl = UseSelectBaseValueControl & {
-    defaultValue?: SelectValue;
-    mode: 'single';
-    onChange?(newOption: SelectValue): any;
-    value?: SelectValue | null;
-};
-export declare type UseSelectValueControl = UseSelectMultipleValueControl | UseSelectSingleValueControl;
-export interface SelectBaseValueControl {
-    onClear(e: MouseEvent<Element>): void;
-}
-export declare type SelectMultipleValueControl = SelectBaseValueControl & {
-    onChange: (v: SelectValue | null) => SelectValue[];
-    value: SelectValue[];
-};
-export declare type SelectSingleValueControl = SelectBaseValueControl & {
-    onChange: (v: SelectValue | null) => SelectValue | null;
-    value: SelectValue | null;
-};
-export declare type SelectValueControl = SelectMultipleValueControl | SelectSingleValueControl;
-export declare const useSelectValueControl: (props: UseSelectValueControl) => SelectMultipleValueControl | SelectSingleValueControl;
+import { MouseEvent } from 'react';
+import { SelectValue } from '../Select/typings';
+export interface UseSelectBaseValueControl {
+    onClear?(e: MouseEvent<Element>): void;
+    onChange?(newOptions: SelectValue[] | SelectValue): any;
+    onClose?(): void;
+}
+export type UseSelectMultipleValueControl = UseSelectBaseValueControl & {
+    defaultValue?: SelectValue[];
+    mode: 'multiple';
+    onChange?(newOptions: SelectValue[]): any;
+    value?: SelectValue[];
+};
+export type UseSelectSingleValueControl = UseSelectBaseValueControl & {
+    defaultValue?: SelectValue;
+    mode: 'single';
+    onChange?(newOption: SelectValue): any;
+    value?: SelectValue | null;
+};
+export type UseSelectValueControl = UseSelectMultipleValueControl | UseSelectSingleValueControl;
+export interface SelectBaseValueControl {
+    onClear(e: MouseEvent<Element>): void;
+}
+export type SelectMultipleValueControl = SelectBaseValueControl & {
+    onChange: (v: SelectValue | null) => SelectValue[];
+    value: SelectValue[];
+};
+export type SelectSingleValueControl = SelectBaseValueControl & {
+    onChange: (v: SelectValue | null) => SelectValue | null;
+    value: SelectValue | null;
+};
+export type SelectValueControl = SelectMultipleValueControl | SelectSingleValueControl;
+export declare const useSelectValueControl: (props: UseSelectValueControl) => SelectMultipleValueControl | SelectSingleValueControl;

package/Form/useSelectValueControl.js

@@ -1,77 +1,77 @@
 import isEqual from 'lodash/isEqual';
 import { useControlValueState } from './useControlValueState.js';
 
-const equalityFn = (a, b) => isEqual(a, b);
-function useSelectBaseValueControl(props) {
-    const { defaultValue, mode, onChange, onClear: onClearProp, onClose, value: valueProp, } = props;
-    const [value, setValue] = useControlValueState({
-        defaultValue: defaultValue || (mode === 'multiple' ? [] : null),
-        equalityFn,
-        value: valueProp,
-    });
-    return {
-        value,
-        onChange: (chooseOption) => {
-            var _a;
-            if (!chooseOption) {
-                if (mode === 'multiple') {
-                    return [];
-                }
-                return null;
-            }
-            let newValue = mode === 'multiple' ? [] : null;
-            switch (mode) {
-                case 'multiple': {
-                    const existedValueIdx = ((_a = value) !== null && _a !== void 0 ? _a : []).findIndex((v) => v.id === chooseOption.id);
-                    if (~existedValueIdx) {
-                        newValue = [
-                            ...value.slice(0, existedValueIdx),
-                            ...value.slice(existedValueIdx + 1),
-                        ];
-                    }
-                    else {
-                        newValue = [
-                            ...value,
-                            chooseOption,
-                        ];
-                    }
-                    if (typeof onChange === 'function')
-                        onChange(newValue);
-                    break;
-                }
-                default: {
-                    newValue = chooseOption;
-                    if (typeof onClose === 'function') {
-                        /** single selection should close modal when clicked */
-                        onClose();
-                    }
-                    if (typeof onChange === 'function')
-                        onChange(newValue);
-                    break;
-                }
-            }
-            setValue(newValue);
-            return newValue;
-        },
-        onClear: (e) => {
-            e.stopPropagation();
-            if (mode === 'multiple') {
-                setValue([]);
-            }
-            else {
-                setValue(null);
-            }
-            if (typeof onClearProp === 'function') {
-                onClearProp(e);
-            }
-        },
-    };
-}
-const useSelectValueControl = (props) => {
-    if (props.mode === 'multiple') {
-        return useSelectBaseValueControl(props);
-    }
-    return useSelectBaseValueControl(props);
+const equalityFn = (a, b) => isEqual(a, b);
+function useSelectBaseValueControl(props) {
+    const { defaultValue, mode, onChange, onClear: onClearProp, onClose, value: valueProp, } = props;
+    const [value, setValue] = useControlValueState({
+        defaultValue: defaultValue || (mode === 'multiple' ? [] : null),
+        equalityFn,
+        value: valueProp,
+    });
+    return {
+        value,
+        onChange: (chooseOption) => {
+            var _a;
+            if (!chooseOption) {
+                if (mode === 'multiple') {
+                    return [];
+                }
+                return null;
+            }
+            let newValue = mode === 'multiple' ? [] : null;
+            switch (mode) {
+                case 'multiple': {
+                    const existedValueIdx = ((_a = value) !== null && _a !== void 0 ? _a : []).findIndex((v) => v.id === chooseOption.id);
+                    if (~existedValueIdx) {
+                        newValue = [
+                            ...value.slice(0, existedValueIdx),
+                            ...value.slice(existedValueIdx + 1),
+                        ];
+                    }
+                    else {
+                        newValue = [
+                            ...value,
+                            chooseOption,
+                        ];
+                    }
+                    if (typeof onChange === 'function')
+                        onChange(newValue);
+                    break;
+                }
+                default: {
+                    newValue = chooseOption;
+                    if (typeof onClose === 'function') {
+                        /** single selection should close modal when clicked */
+                        onClose();
+                    }
+                    if (typeof onChange === 'function')
+                        onChange(newValue);
+                    break;
+                }
+            }
+            setValue(newValue);
+            return newValue;
+        },
+        onClear: (e) => {
+            e.stopPropagation();
+            if (mode === 'multiple') {
+                setValue([]);
+            }
+            else {
+                setValue(null);
+            }
+            if (typeof onClearProp === 'function') {
+                onClearProp(e);
+            }
+        },
+    };
+}
+const useSelectValueControl = (props) => {
+    if (props.mode === 'multiple') {
+        return useSelectBaseValueControl(props);
+    }
+    return useSelectBaseValueControl(props);
 };
 
 export { useSelectValueControl };

package/Form/useSwitchControlValue.d.ts

@@ -1,7 +1,7 @@
-import { ChangeEventHandler } from 'react';
-export interface UseSwitchControlValueProps {
-    checked?: boolean;
-    defaultChecked?: boolean;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-}
-export declare function useSwitchControlValue(props: UseSwitchControlValueProps): readonly [boolean, (event: import("react").ChangeEvent<HTMLInputElement>) => void];
+import { ChangeEventHandler } from 'react';
+export interface UseSwitchControlValueProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+export declare function useSwitchControlValue(props: UseSwitchControlValueProps): readonly [boolean, (event: import("react").ChangeEvent<HTMLInputElement>) => void];

package/Form/useSwitchControlValue.js

@@ -1,24 +1,24 @@
 import { useLastCallback } from '../hooks/useLastCallback.js';
 import { useControlValueState } from './useControlValueState.js';
 
-const equalityFn = (a, b) => a === b;
-function useSwitchControlValue(props) {
-    const { checked: checkedProp, defaultChecked = false, onChange: onChangeProp, } = props;
-    const [checked, setChecked] = useControlValueState({
-        defaultValue: defaultChecked,
-        equalityFn,
-        value: checkedProp,
-    });
-    const onChange = useLastCallback((event) => {
-        const nextChecked = event.target.checked;
-        if (!equalityFn(checked, nextChecked)) {
-            setChecked(nextChecked);
-            if (onChangeProp) {
-                onChangeProp(event);
-            }
-        }
-    });
-    return [checked, onChange];
+const equalityFn = (a, b) => a === b;
+function useSwitchControlValue(props) {
+    const { checked: checkedProp, defaultChecked = false, onChange: onChangeProp, } = props;
+    const [checked, setChecked] = useControlValueState({
+        defaultValue: defaultChecked,
+        equalityFn,
+        value: checkedProp,
+    });
+    const onChange = useLastCallback((event) => {
+        const nextChecked = event.target.checked;
+        if (!equalityFn(checked, nextChecked)) {
+            setChecked(nextChecked);
+            if (onChangeProp) {
+                onChangeProp(event);
+            }
+        }
+    });
+    return [checked, onChange];
 }
 
 export { useSwitchControlValue };

package/Icon/Icon.d.ts

@@ -1,32 +1,32 @@
-/// <reference types="react" />
-import { IconDefinition } from '@mezzanine-ui/icons';
-import { IconColor } from '@mezzanine-ui/core/icon';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface IconProps extends NativeElementPropsWithoutKeyAndRef<'i'> {
-    /**
-     * Color name provided by palette.
-     */
-    color?: IconColor;
-    /**
-     * The icon provided by `@mezzanine-ui/icons` package.
-     */
-    icon: IconDefinition;
-    /**
-     * Icon size in px
-     */
-    size?: number;
-    /**
-     * Whether to spin the icon or not.
-     * @default false
-     */
-    spin?: boolean;
-    /**
-     * Icon accessible title
-     */
-    title?: string;
-}
-/**
- * The react component for `mezzanine` icon.
- */
-declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLElement>>;
-export default Icon;
+/// <reference types="react" />
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { IconColor } from '@mezzanine-ui/core/icon';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface IconProps extends NativeElementPropsWithoutKeyAndRef<'i'> {
+    /**
+     * Color name provided by palette.
+     */
+    color?: IconColor;
+    /**
+     * The icon provided by `@mezzanine-ui/icons` package.
+     */
+    icon: IconDefinition;
+    /**
+     * Icon size in px
+     */
+    size?: number;
+    /**
+     * Whether to spin the icon or not.
+     * @default false
+     */
+    spin?: boolean;
+    /**
+     * Icon accessible title
+     */
+    title?: string;
+}
+/**
+ * The react component for `mezzanine` icon.
+ */
+declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLElement>>;
+export default Icon;

package/Icon/Icon.js

@@ -3,24 +3,24 @@ import { forwardRef } from 'react';
 import { toIconCssVars, iconClasses } from '@mezzanine-ui/core/icon';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` icon.
- */
-const Icon = forwardRef(function Icon(props, ref) {
-    const { className, color, icon, size, spin = false, style: styleProp, title, ...rest } = props;
-    const { definition } = icon;
-    const cssVars = toIconCssVars({ color, size });
-    const style = {
-        '--mzn-icon-cursor': props.onClick || props.onMouseOver ? 'pointer' : 'inherit',
-        ...cssVars,
-        ...styleProp,
-    };
-    return (jsx("i", { ...rest, ref: ref, className: cx(iconClasses.host, {
-            [iconClasses.color]: color,
-            [iconClasses.spin]: spin,
-            [iconClasses.size]: size,
-        }, className), "data-icon-name": icon.name, style: style, children: jsxs("svg", { ...definition.svg, focusable: false, children: [title || definition.title ? (jsx("title", { children: title || definition.title })) : null, jsx("path", { ...definition.path })] }) }));
-});
+/**
+ * The react component for `mezzanine` icon.
+ */
+const Icon = forwardRef(function Icon(props, ref) {
+    const { className, color, icon, size, spin = false, style: styleProp, title, ...rest } = props;
+    const { definition } = icon;
+    const cssVars = toIconCssVars({ color, size });
+    const style = {
+        '--mzn-icon-cursor': props.onClick || props.onMouseOver ? 'pointer' : 'inherit',
+        ...cssVars,
+        ...styleProp,
+    };
+    return (jsx("i", { ...rest, ref: ref, className: cx(iconClasses.host, {
+            [iconClasses.color]: color,
+            [iconClasses.spin]: spin,
+            [iconClasses.size]: size,
+        }, className), "data-icon-name": icon.name, style: style, children: jsxs("svg", { ...definition.svg, focusable: false, children: [title || definition.title ? (jsx("title", { children: title || definition.title })) : null, jsx("path", { ...definition.path })] }) }));
+});
 var Icon$1 = Icon;
 
 export { Icon$1 as default };

package/Icon/index.d.ts

@@ -1,3 +1,3 @@
-export type { IconColor, } from '@mezzanine-ui/core/icon';
-export type { IconProps } from './Icon';
-export { default } from './Icon';
+export type { IconColor, } from '@mezzanine-ui/core/icon';
+export type { IconProps } from './Icon';
+export { default } from './Icon';