@mezzanine-ui/react 0.13.10 → 0.14.0

package/Select/Option.d.ts

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-import { MenuItemProps } from '../Menu';
-export interface OptionProps extends Omit<MenuItemProps, 'children' | 'role'> {
-    /**
-     * option children (often means the option name)
-     */
-    children: string;
-    /**
-     * The role of menu item.
-     * @default 'option'
-     */
-    role?: string;
-    /**
-     * The value of option
-     */
-    value: string;
-}
-declare const Option: import("react").ForwardRefExoticComponent<OptionProps & import("react").RefAttributes<HTMLLIElement>>;
-export default Option;
+/// <reference types="react" />
+import { MenuItemProps } from '../Menu';
+export interface OptionProps extends Omit<MenuItemProps, 'children' | 'role'> {
+    /**
+     * option children (often means the option name)
+     */
+    children: string;
+    /**
+     * The role of menu item.
+     * @default 'option'
+     */
+    role?: string;
+    /**
+     * The value of option
+     */
+    value: string;
+}
+declare const Option: import("react").ForwardRefExoticComponent<OptionProps & import("react").RefAttributes<HTMLLIElement>>;
+export default Option;

package/Select/Option.js

@@ -3,43 +3,43 @@ import { forwardRef, useContext } from 'react';
 import { SelectControlContext } from './SelectControlContext.js';
 import MenuItem from '../Menu/MenuItem.js';
 
-const Option = forwardRef(function Option(props, ref) {
-    const { active: activeProp, children, role = 'option', value, ...rest } = props;
-    const selectControl = useContext(SelectControlContext);
-    const { onChange, value: selectedValue, } = selectControl || {};
-    const getActive = () => {
-        if (activeProp) {
-            return activeProp;
-        }
-        if (selectedValue) {
-            if (Array.isArray(selectedValue)) {
-                return selectedValue.find((sv) => sv.id === value);
-            }
-            return selectedValue.id === value;
-        }
-        return false;
-    };
-    const active = Boolean(getActive());
-    const onSelect = () => {
-        if (typeof onChange === 'function' && value) {
-            onChange({
-                id: value,
-                name: children,
-            });
-        }
-    };
-    const onKeyDown = (evt) => {
-        switch (evt.code) {
-            case 'Enter':
-                onSelect();
-                break;
-        }
-    };
-    return (jsx(MenuItem, { ...rest, ref: ref, active: active, "aria-selected": active, id: value, onClick: (evt) => {
-            evt.stopPropagation();
-            onSelect();
-        }, onKeyDown: onKeyDown, role: role, tabIndex: 0, children: children }));
-});
+const Option = forwardRef(function Option(props, ref) {
+    const { active: activeProp, children, role = 'option', value, ...rest } = props;
+    const selectControl = useContext(SelectControlContext);
+    const { onChange, value: selectedValue, } = selectControl || {};
+    const getActive = () => {
+        if (activeProp) {
+            return activeProp;
+        }
+        if (selectedValue) {
+            if (Array.isArray(selectedValue)) {
+                return selectedValue.find((sv) => sv.id === value);
+            }
+            return selectedValue.id === value;
+        }
+        return false;
+    };
+    const active = Boolean(getActive());
+    const onSelect = () => {
+        if (typeof onChange === 'function' && value) {
+            onChange({
+                id: value,
+                name: children,
+            });
+        }
+    };
+    const onKeyDown = (evt) => {
+        switch (evt.code) {
+            case 'Enter':
+                onSelect();
+                break;
+        }
+    };
+    return (jsx(MenuItem, { ...rest, ref: ref, active: active, "aria-selected": active, id: value, onClick: (evt) => {
+            evt.stopPropagation();
+            onSelect();
+        }, onKeyDown: onKeyDown, role: role, tabIndex: 0, children: children }));
+});
 var Option$1 = Option;
 
 export { Option$1 as default };

package/Select/Select.d.ts

@@ -1,94 +1,94 @@
-/// <reference types="react" />
-import { SelectInputSize } from '@mezzanine-ui/core/select';
-import { FormElementFocusHandlers } from '../Form';
-import { MenuProps } from '../Menu';
-import { PopperProps } from '../Popper';
-import { SelectValue } from './typings';
-import { PickRenameMulti } from '../utils/general';
-import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
-export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'mode' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onScroll' | 'readOnly' | 'renderValue' | 'value'>, FormElementFocusHandlers, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
-    maxHeight: 'menuMaxHeight';
-    role: 'menuRole';
-    size: 'menuSize';
-}>, PickRenameMulti<Pick<PopperProps, 'options' | 'disablePortal'>, {
-    options: 'popperOptions';
-    disablePortal: 'disablePortal';
-}>, Pick<MenuProps, 'children'> {
-    /**
-     * The other native props for input element.
-     */
-    inputProps?: Omit<SelectTriggerInputProps, 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
-    /**
-     * Popup menu scroll listener
-     */
-    onMenuScroll?: (computed: {
-        scrollTop: number;
-        maxScrollTop: number;
-    }, target: HTMLUListElement) => void;
-    /**
-     * select input placeholder
-     */
-    placeholder?: string;
-    /**
-     * To customize rendering select input value
-     */
-    renderValue?(values: SelectValue[] | SelectValue | null): string;
-    /**
-     * Whether the selection is required.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * The size of input.
-     */
-    size?: SelectInputSize;
-}
-export declare type SelectMultipleProps = SelectBaseProps & {
-    /**
-     * The default selection
-     */
-    defaultValue?: SelectValue[];
-    /**
-     * Controls the layout of trigger.
-     */
-    mode: 'multiple';
-    /**
-     * The change event handler of input element.
-     */
-    onChange?(newOptions: SelectValue[]): any;
-    /**
-     * To customize rendering select input value
-     */
-    renderValue?(values: SelectValue[]): string;
-    /**
-     * The value of selection.
-     * @default undefined
-     */
-    value?: SelectValue[];
-};
-export declare type SelectSingleProps = SelectBaseProps & {
-    /**
-     * The default selection
-     */
-    defaultValue?: SelectValue;
-    /**
-     * Controls the layout of trigger.
-     */
-    mode?: 'single';
-    /**
-     * The change event handler of input element.
-     */
-    onChange?(newOptions: SelectValue): any;
-    /**
-     * To customize rendering select input value
-     */
-    renderValue?(values: SelectValue | null): string;
-    /**
-     * The value of selection.
-     * @default undefined
-     */
-    value?: SelectValue | null;
-};
-export declare type SelectProps = SelectMultipleProps | SelectSingleProps;
-declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Select;
+/// <reference types="react" />
+import { SelectInputSize } from '@mezzanine-ui/core/select';
+import { FormElementFocusHandlers } from '../Form';
+import { MenuProps } from '../Menu';
+import { PopperProps } from '../Popper';
+import { SelectValue } from './typings';
+import { PickRenameMulti } from '../utils/general';
+import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
+export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'mode' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onScroll' | 'readOnly' | 'renderValue' | 'value'>, FormElementFocusHandlers, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
+    maxHeight: 'menuMaxHeight';
+    role: 'menuRole';
+    size: 'menuSize';
+}>, PickRenameMulti<Pick<PopperProps, 'options' | 'disablePortal'>, {
+    options: 'popperOptions';
+    disablePortal: 'disablePortal';
+}>, Pick<MenuProps, 'children'> {
+    /**
+     * The other native props for input element.
+     */
+    inputProps?: Omit<SelectTriggerInputProps, 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
+    /**
+     * Popup menu scroll listener
+     */
+    onMenuScroll?: (computed: {
+        scrollTop: number;
+        maxScrollTop: number;
+    }, target: HTMLUListElement) => void;
+    /**
+     * select input placeholder
+     */
+    placeholder?: string;
+    /**
+     * To customize rendering select input value
+     */
+    renderValue?(values: SelectValue[] | SelectValue | null): string;
+    /**
+     * Whether the selection is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The size of input.
+     */
+    size?: SelectInputSize;
+}
+export type SelectMultipleProps = SelectBaseProps & {
+    /**
+     * The default selection
+     */
+    defaultValue?: SelectValue[];
+    /**
+     * Controls the layout of trigger.
+     */
+    mode: 'multiple';
+    /**
+     * The change event handler of input element.
+     */
+    onChange?(newOptions: SelectValue[]): any;
+    /**
+     * To customize rendering select input value
+     */
+    renderValue?(values: SelectValue[]): string;
+    /**
+     * The value of selection.
+     * @default undefined
+     */
+    value?: SelectValue[];
+};
+export type SelectSingleProps = SelectBaseProps & {
+    /**
+     * The default selection
+     */
+    defaultValue?: SelectValue;
+    /**
+     * Controls the layout of trigger.
+     */
+    mode?: 'single';
+    /**
+     * The change event handler of input element.
+     */
+    onChange?(newOptions: SelectValue): any;
+    /**
+     * To customize rendering select input value
+     */
+    renderValue?(values: SelectValue | null): string;
+    /**
+     * The value of selection.
+     * @default undefined
+     */
+    value?: SelectValue | null;
+};
+export type SelectProps = SelectMultipleProps | SelectSingleProps;
+declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Select;

package/Select/Select.js

@@ -12,117 +12,117 @@ import Menu from '../Menu/Menu.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
 import cx from 'clsx';
 
-const MENU_ID = 'mzn-select-menu-id';
-const Select = forwardRef(function Select(props, ref) {
-    var _a, _b;
-    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, disablePortal = false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onMenuScroll, placeholder = '', popperOptions = {}, prefix, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, value: valueProp, } = props;
-    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 { onChange, onClear, value, } = useSelectValueControl({
-        defaultValue,
-        mode,
-        onChange: onChangeProp,
-        onClear: onClearProp,
-        onClose,
-        value: valueProp,
-    });
-    const nodeRef = useRef(null);
-    const controlRef = useRef(null);
-    const popperRef = useRef(null);
-    const composedRef = useComposeRefs([ref, controlRef]);
-    function getPlaceholder() {
-        if (typeof renderValue === 'function') {
-            return renderValue(value);
-        }
-        if (value && !isArray(value)) {
-            return value.name;
-        }
-        return placeholder;
-    }
-    useClickAway(() => {
-        if (!open)
-            return;
-        return () => {
-            onClose();
-        };
-    }, nodeRef, [
-        nodeRef,
-        open,
-        toggleOpen,
-    ]);
-    const onClickTextField = () => {
-        if (!disabled) {
-            onToggleOpen();
-        }
-    };
-    /**
-     * keyboard events for a11y
-     * (@todo keyboard event map into option selection when menu is opened)
-     */
-    const onKeyDownTextField = (evt) => {
-        /** for a11y to open menu via keyboard */
-        switch (evt.code) {
-            case 'Enter':
-                onClose();
-                break;
-            case 'ArrowUp':
-            case 'ArrowRight':
-            case 'ArrowLeft':
-            case 'ArrowDown': {
-                if (!open) {
-                    onOpen();
-                }
-                break;
-            }
-            case 'Tab': {
-                if (open) {
-                    onClose();
-                }
-                break;
-            }
-        }
-    };
-    /** menu onScroll listener */
-    const onMenuScrollCallback = useCallback(async (evt) => {
-        if (onMenuScroll) {
-            const target = evt.target;
-            const maxScrollTop = target.scrollHeight - target.getBoundingClientRect().height;
-            onMenuScroll({
-                scrollTop: target.scrollTop,
-                maxScrollTop,
-            }, target);
-        }
-    }, [onMenuScroll]);
-    const resolvedInputProps = {
-        ...inputProps,
-        'aria-controls': MENU_ID,
-        'aria-expanded': open,
-        'aria-owns': MENU_ID,
-        placeholder: getPlaceholder(),
-        role: 'combobox',
-    };
-    const context = useMemo(() => ({
-        onChange,
-        value,
-    }), [onChange, value]);
-    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, onScroll: onMenuScrollCallback, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
-});
+const MENU_ID = 'mzn-select-menu-id';
+const Select = forwardRef(function Select(props, ref) {
+    var _a, _b;
+    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
+    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, disablePortal = false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onMenuScroll, placeholder = '', popperOptions = {}, prefix, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, value: valueProp, } = props;
+    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 { onChange, onClear, value, } = useSelectValueControl({
+        defaultValue,
+        mode,
+        onChange: onChangeProp,
+        onClear: onClearProp,
+        onClose,
+        value: valueProp,
+    });
+    const nodeRef = useRef(null);
+    const controlRef = useRef(null);
+    const popperRef = useRef(null);
+    const composedRef = useComposeRefs([ref, controlRef]);
+    function getPlaceholder() {
+        if (typeof renderValue === 'function') {
+            return renderValue(value);
+        }
+        if (value && !isArray(value)) {
+            return value.name;
+        }
+        return placeholder;
+    }
+    useClickAway(() => {
+        if (!open)
+            return;
+        return () => {
+            onClose();
+        };
+    }, nodeRef, [
+        nodeRef,
+        open,
+        toggleOpen,
+    ]);
+    const onClickTextField = () => {
+        if (!disabled) {
+            onToggleOpen();
+        }
+    };
+    /**
+     * keyboard events for a11y
+     * (@todo keyboard event map into option selection when menu is opened)
+     */
+    const onKeyDownTextField = (evt) => {
+        /** for a11y to open menu via keyboard */
+        switch (evt.code) {
+            case 'Enter':
+                onClose();
+                break;
+            case 'ArrowUp':
+            case 'ArrowRight':
+            case 'ArrowLeft':
+            case 'ArrowDown': {
+                if (!open) {
+                    onOpen();
+                }
+                break;
+            }
+            case 'Tab': {
+                if (open) {
+                    onClose();
+                }
+                break;
+            }
+        }
+    };
+    /** menu onScroll listener */
+    const onMenuScrollCallback = useCallback(async (evt) => {
+        if (onMenuScroll) {
+            const target = evt.target;
+            const maxScrollTop = target.scrollHeight - target.getBoundingClientRect().height;
+            onMenuScroll({
+                scrollTop: target.scrollTop,
+                maxScrollTop,
+            }, target);
+        }
+    }, [onMenuScroll]);
+    const resolvedInputProps = {
+        ...inputProps,
+        'aria-controls': MENU_ID,
+        'aria-expanded': open,
+        'aria-owns': MENU_ID,
+        placeholder: getPlaceholder(),
+        role: 'combobox',
+    };
+    const context = useMemo(() => ({
+        onChange,
+        value,
+    }), [onChange, value]);
+    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, onScroll: onMenuScrollCallback, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
+});
 var Select$1 = Select;
 
 export { Select$1 as default };

package/Select/SelectControlContext.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { SelectControl } from './typings';
-export declare const SelectControlContext: import("react").Context<SelectControl<string> | undefined>;
+/// <reference types="react" />
+import { SelectControl } from './typings';
+export declare const SelectControlContext: import("react").Context<SelectControl<string> | undefined>;