@mezzanine-ui/react 0.13.9 → 0.13.11

package/Select/SelectTrigger.js

@@ -7,45 +7,50 @@ import Icon from '../Icon/Icon.js';
 import TextField from '../TextField/TextField.js';
 import cx from 'clsx';
 
-function SelectTriggerComponent(props) {
-    const { active, className, disabled, ellipsis = false, forceHideSuffixActionIcon, inputProps, innerRef, inputRef, mode, onTagClose, readOnly, renderValue: renderValueProp, required, searchText, size, showTextInputAfterTags = false, suffixAction, suffixActionIcon: suffixActionIconProp, value, ...restTextFieldProps } = props;
-    /** Render value to string for input */
-    const renderValue = () => {
-        if (typeof renderValueProp === 'function') {
-            return renderValueProp(value || (mode === 'multiple' ? [] : null));
-        }
-        if (value) {
-            if (Array.isArray(value)) {
-                return value.map((v) => v.name).join(', ');
-            }
-            return value.name;
-        }
-        return '';
-    };
-    /** Compute suffix action icon */
-    const suffixActionIcon = suffixActionIconProp || (jsx(Icon, { icon: ChevronDownIcon, onClick: (e) => {
-            e.stopPropagation();
-            suffixAction === null || suffixAction === void 0 ? void 0 : suffixAction();
-        }, className: cx(selectClasses.triggerSuffixActionIcon, {
-            [selectClasses.triggerSuffixActionIconActive]: active,
-        }) }));
-    const getTextFieldActive = () => {
-        if (value) {
-            if (Array.isArray(value)) {
-                return !!value.length;
-            }
-            return !!value;
-        }
-        return false;
-    };
-    return (jsx(TextField, { ref: innerRef, ...restTextFieldProps, active: getTextFieldActive(), className: cx(selectClasses.trigger, className), disabled: disabled, size: size, suffixActionIcon: forceHideSuffixActionIcon ? undefined : suffixActionIcon, children: mode === 'multiple' && (value === null || value === void 0 ? void 0 : value.length) ? (jsx(SelectTriggerTags, { disabled: disabled, ellipsis: ellipsis, inputProps: inputProps, inputRef: inputRef, onTagClose: onTagClose, readOnly: readOnly, required: required, searchText: searchText, size: size, showTextInputAfterTags: showTextInputAfterTags, value: value })) : (jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-disabled": disabled, "aria-haspopup": "listbox", "aria-readonly": readOnly, "aria-required": required, autoComplete: "off", disabled: disabled, readOnly: readOnly, required: required, type: "search", value: renderValue() })) }));
-}
-const SelectTrigger = forwardRef((props, ref) => {
-    if (props.mode === 'multiple') {
-        return (jsx(SelectTriggerComponent, { ...props, innerRef: ref }));
-    }
-    return (jsx(SelectTriggerComponent, { ...props, innerRef: ref }));
-});
+function SelectTriggerComponent(props) {
+    const { active, className, disabled, ellipsis = false, forceHideSuffixActionIcon, inputProps, innerRef, inputRef, mode, onTagClose, readOnly, renderValue: renderValueProp, required, searchText, size, showTextInputAfterTags = false, suffixAction, suffixActionIcon: suffixActionIconProp, value, onClick, ...restTextFieldProps } = props;
+    /** Render value to string for input */
+    const renderValue = () => {
+        if (typeof renderValueProp === 'function') {
+            return renderValueProp(value || (mode === 'multiple' ? [] : null));
+        }
+        if (value) {
+            if (Array.isArray(value)) {
+                return value.map((v) => v.name).join(', ');
+            }
+            return value.name;
+        }
+        return '';
+    };
+    /** Compute suffix action icon */
+    const suffixActionIcon = suffixActionIconProp || (jsx(Icon, { icon: ChevronDownIcon, onClick: (e) => {
+            e.stopPropagation();
+            if (suffixAction) {
+                suffixAction();
+            }
+            else {
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            }
+        }, className: cx(selectClasses.triggerSuffixActionIcon, {
+            [selectClasses.triggerSuffixActionIconActive]: active,
+        }) }));
+    const getTextFieldActive = () => {
+        if (value) {
+            if (Array.isArray(value)) {
+                return !!value.length;
+            }
+            return !!value;
+        }
+        return false;
+    };
+    return (jsx(TextField, { ref: innerRef, ...restTextFieldProps, onClick: onClick, active: getTextFieldActive(), className: cx(selectClasses.trigger, className), disabled: disabled, size: size, suffixActionIcon: forceHideSuffixActionIcon ? undefined : suffixActionIcon, children: mode === 'multiple' && (value === null || value === void 0 ? void 0 : value.length) ? (jsx(SelectTriggerTags, { disabled: disabled, ellipsis: ellipsis, inputProps: inputProps, inputRef: inputRef, onTagClose: onTagClose, readOnly: readOnly, required: required, searchText: searchText, size: size, showTextInputAfterTags: showTextInputAfterTags, value: value })) : (jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-disabled": disabled, "aria-haspopup": "listbox", "aria-readonly": readOnly, "aria-required": required, autoComplete: "off", disabled: disabled, readOnly: readOnly, required: required, type: "search", value: renderValue() })) }));
+}
+const SelectTrigger = forwardRef((props, ref) => {
+    if (props.mode === 'multiple') {
+        return (jsx(SelectTriggerComponent, { ...props, innerRef: ref }));
+    }
+    return (jsx(SelectTriggerComponent, { ...props, innerRef: ref }));
+});
 var SelectTrigger$1 = SelectTrigger;
 
 export { SelectTrigger$1 as default };

package/Select/SelectTriggerTags.d.ts

@@ -1,19 +1,19 @@
-import { Ref } from 'react';
-import { TagSize } from '@mezzanine-ui/core/tag';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { SelectValue } from './typings';
-export interface SelectTriggerTagsProps {
-    disabled?: boolean;
-    ellipsis: boolean;
-    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'autoComplete' | 'children' | 'defaultValue' | 'disabled' | 'readOnly' | 'required' | 'type' | 'value' | `aria-${'autocomplete' | 'disabled' | 'haspopup' | 'multiline' | 'readonly' | 'required'}`>;
-    inputRef?: Ref<HTMLInputElement>;
-    onTagClose?: (target: SelectValue) => void;
-    readOnly?: boolean;
-    required?: boolean;
-    searchText?: string;
-    size?: TagSize;
-    showTextInputAfterTags?: boolean;
-    value?: SelectValue[];
-}
-declare const SelectTriggerTags: import("react").ForwardRefExoticComponent<SelectTriggerTagsProps & import("react").RefAttributes<HTMLDivElement>>;
-export default SelectTriggerTags;
+import { Ref } from 'react';
+import { TagSize } from '@mezzanine-ui/core/tag';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { SelectValue } from './typings';
+export interface SelectTriggerTagsProps {
+    disabled?: boolean;
+    ellipsis: boolean;
+    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'autoComplete' | 'children' | 'defaultValue' | 'disabled' | 'readOnly' | 'required' | 'type' | 'value' | `aria-${'autocomplete' | 'disabled' | 'haspopup' | 'multiline' | 'readonly' | 'required'}`>;
+    inputRef?: Ref<HTMLInputElement>;
+    onTagClose?: (target: SelectValue) => void;
+    readOnly?: boolean;
+    required?: boolean;
+    searchText?: string;
+    size?: TagSize;
+    showTextInputAfterTags?: boolean;
+    value?: SelectValue[];
+}
+declare const SelectTriggerTags: import("react").ForwardRefExoticComponent<SelectTriggerTagsProps & import("react").RefAttributes<HTMLDivElement>>;
+export default SelectTriggerTags;

package/Select/SelectTriggerTags.js

@@ -7,27 +7,27 @@ import { useSelectTriggerTags } from './useSelectTriggerTags.js';
 import Tag from '../Tag/Tag.js';
 import cx from 'clsx';
 
-const SelectTriggerTags = forwardRef(function SelectTriggerTags(props, ref) {
-    const { disabled, ellipsis, inputProps, inputRef, onTagClose, readOnly, required, searchText, size, showTextInputAfterTags, value, } = props;
-    const controlRef = useRef();
-    const composedRef = useComposeRefs([ref, controlRef]);
-    const { renderFakeTags, takeCount, } = useSelectTriggerTags({
-        controlRef,
-        value,
-        size,
-    });
-    return (jsxs("div", { ref: composedRef, className: cx(selectClasses.triggerTagsInputWrapper, {
-            [selectClasses.triggerTagsInputWrapperEllipsis]: ellipsis,
-        }), children: [jsxs("div", { className: cx(selectClasses.triggerTags, {
-                    [selectClasses.triggerTagsEllipsis]: ellipsis,
-                }), children: [ellipsis ? (jsxs(Fragment, { children: [take(value, takeCount).map((selection) => (jsx(Tag, { closable: true, disabled: disabled, onClose: (e) => {
-                                    e.stopPropagation();
-                                    onTagClose === null || onTagClose === void 0 ? void 0 : onTagClose(selection);
-                                }, size: size, children: selection.name }, selection.id))), value && value.length > takeCount ? (jsx(Tag, { disabled: disabled, size: size, children: `+${value.length - takeCount <= 99 ? value.length - takeCount : 99}...` })) : null] })) : (value === null || value === void 0 ? void 0 : value.map((selection) => (jsx(Tag, { closable: true, disabled: disabled, onClose: (e) => {
-                            e.stopPropagation();
-                            onTagClose === null || onTagClose === void 0 ? void 0 : onTagClose(selection);
-                        }, size: size, children: selection.name }, selection.id)))), ellipsis ? renderFakeTags() : null] }), showTextInputAfterTags ? (jsx("div", { className: selectClasses.triggerTagsInput, children: jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-disabled": disabled, "aria-haspopup": "listbox", "aria-readonly": readOnly, "aria-required": required, autoComplete: "off", disabled: disabled, readOnly: readOnly, required: required, type: "search", value: searchText }) })) : null] }));
-});
+const SelectTriggerTags = forwardRef(function SelectTriggerTags(props, ref) {
+    const { disabled, ellipsis, inputProps, inputRef, onTagClose, readOnly, required, searchText, size, showTextInputAfterTags, value, } = props;
+    const controlRef = useRef();
+    const composedRef = useComposeRefs([ref, controlRef]);
+    const { renderFakeTags, takeCount, } = useSelectTriggerTags({
+        controlRef,
+        value,
+        size,
+    });
+    return (jsxs("div", { ref: composedRef, className: cx(selectClasses.triggerTagsInputWrapper, {
+            [selectClasses.triggerTagsInputWrapperEllipsis]: ellipsis,
+        }), children: [jsxs("div", { className: cx(selectClasses.triggerTags, {
+                    [selectClasses.triggerTagsEllipsis]: ellipsis,
+                }), children: [ellipsis ? (jsxs(Fragment, { children: [take(value, takeCount).map((selection) => (jsx(Tag, { closable: true, disabled: disabled, onClose: (e) => {
+                                    e.stopPropagation();
+                                    onTagClose === null || onTagClose === void 0 ? void 0 : onTagClose(selection);
+                                }, size: size, children: selection.name }, selection.id))), value && value.length > takeCount ? (jsx(Tag, { disabled: disabled, size: size, children: `+${value.length - takeCount <= 99 ? value.length - takeCount : 99}...` })) : null] })) : (value === null || value === void 0 ? void 0 : value.map((selection) => (jsx(Tag, { closable: true, disabled: disabled, onClose: (e) => {
+                            e.stopPropagation();
+                            onTagClose === null || onTagClose === void 0 ? void 0 : onTagClose(selection);
+                        }, size: size, children: selection.name }, selection.id)))), ellipsis ? renderFakeTags() : null] }), showTextInputAfterTags ? (jsx("div", { className: selectClasses.triggerTagsInput, children: jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-disabled": disabled, "aria-haspopup": "listbox", "aria-readonly": readOnly, "aria-required": required, autoComplete: "off", disabled: disabled, readOnly: readOnly, required: required, type: "search", value: searchText }) })) : null] }));
+});
 var SelectTriggerTags$1 = SelectTriggerTags;
 
 export { SelectTriggerTags$1 as default };

package/Select/TreeSelect.d.ts

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