@mezzanine-ui/react 0.6.4

package/Radio/RadioGroup.d.ts

@@ -0,0 +1,47 @@
+import { RadioGroupOption, RadioSize } from '@mezzanine-ui/core/radio';
+import { ChangeEventHandler, ReactNode } from 'react';
+import { InputCheckGroupProps } from '../_internal/InputCheck';
+export interface RadioGroupProps extends Omit<InputCheckGroupProps, 'onChange'> {
+    /**
+     * The radios in radio group.
+     */
+    children?: ReactNode;
+    /**
+     * The default value of radio group.
+     */
+    defaultValue?: string;
+    /**
+     * Whether the radio group is disabled.
+     * Control the disabled of radios in group if disabled not passed to radio.
+     */
+    disabled?: boolean;
+    /**
+     * The name of radio group.
+     * Control the name of radios in group if name not passed to radio.
+     */
+    name?: string;
+    /**
+     * The onChange of radio group.
+     * Will be passed to each radios but composing both instead of overriding.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The options of radio group.
+     * Will be ignored if children passed.
+     */
+    options?: RadioGroupOption[];
+    /**
+     * The size of radio group.
+     * Control the size of radios in group if size not passed to radio.
+     */
+    size?: RadioSize;
+    /**
+     * The value of radio group.
+     */
+    value?: string;
+}
+/**
+ * The react component for `mezzanine` radio group.
+ */
+declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default RadioGroup;

package/Radio/RadioGroup.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useInputControlValue } from '../Form/useInputControlValue.js';
+import { RadioGroupContext } from './RadioGroupContext.js';
+import Radio from './Radio.js';
+import InputCheckGroup from '../_internal/InputCheck/InputCheckGroup.js';
+
+/**
+ * The react component for `mezzanine` radio group.
+ */
+const RadioGroup = forwardRef(function RadioGroup(props, ref) {
+    const { children: childrenProp, defaultValue, disabled, name, options = [], onChange: onChangeProp, size, value: valueProp, ...rest } = props;
+    const [value, onChange] = useInputControlValue({
+        defaultValue,
+        onChange: onChangeProp,
+        value: valueProp,
+    });
+    const context = {
+        disabled,
+        name,
+        onChange,
+        size,
+        value,
+    };
+    const children = childrenProp || options.map((option) => (jsx(Radio, Object.assign({ disabled: option.disabled, value: option.value }, { children: option.label }), option.value)));
+    return (jsx(RadioGroupContext.Provider, Object.assign({ value: context }, { children: jsx(InputCheckGroup, Object.assign({}, rest, { ref: ref, role: "radiogroup" }, { children: children }), void 0) }), void 0));
+});
+
+export default RadioGroup;

package/Radio/RadioGroupContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { RadioSize } from '@mezzanine-ui/core/radio';
+import { RadioGroupControlContextValue } from '../Form/useRadioControlValue';
+export interface RadioGroupContextValue extends RadioGroupControlContextValue {
+    disabled?: boolean;
+    name?: string;
+    size?: RadioSize;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | undefined>;

package/Radio/RadioGroupContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const RadioGroupContext = createContext(undefined);
+
+export { RadioGroupContext };

package/Radio/index.d.ts

@@ -0,0 +1,3 @@
+export type { RadioSize, RadioGroupOption, RadioGroupOrientation, } from '@mezzanine-ui/core/radio';
+export { RadioProps, default, } from './Radio';
+export { RadioGroupProps, default as RadioGroup, } from './RadioGroup';

package/Radio/index.js

@@ -0,0 +1,2 @@
+export { default } from './Radio.js';
+export { default as RadioGroup } from './RadioGroup.js';

package/Select/AutoComplete.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="react" />
+import { SelectInputSize } from '@mezzanine-ui/core/select';
+import { MenuProps } from '../Menu';
+import { PopperProps } from '../Popper';
+import { PickRenameMulti } from '../utils/rename-types';
+import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
+export interface AutoCompleteProps extends Omit<SelectTriggerProps, 'active' | 'clearable' | 'forceHideSuffixActionIcon' | 'mode' | 'onClick' | 'onKeyDown' | 'onChange' | 'renderValue' | 'inputProps' | 'suffixActionIcon' | 'value'>, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
+    maxHeight: 'menuMaxHeight';
+    role: 'menuRole';
+    size: 'menuSize';
+}>, PickRenameMulti<Pick<PopperProps, 'options'>, {
+    options: 'popperOptions';
+}> {
+    /**
+     * Set to true when options can be added dynamically
+     * @default false
+     */
+    addable?: boolean;
+    /**
+     * The default selection
+     */
+    defaultValue?: string;
+    /**
+     * Should the filter rules be disabled (If you need to control options filter by yourself)
+     * @default false
+     */
+    disabledOptionsFilter?: boolean;
+    /**
+     * The other native props for input element.
+     */
+    inputProps?: Omit<SelectTriggerInputProps, 'onChange' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
+    /**
+     * The change event handler of input element.
+     */
+    onChange?(text: string): any;
+    /**
+     * insert callback whenever insert icon is clicked
+     * return `true` when insert is successfully
+     */
+    onInsert?(text: string): boolean;
+    /**
+     * The search event handler
+     */
+    onSearch?(input: string): any;
+    /**
+     * The options that mapped autocomplete options
+     */
+    options: string[];
+    /**
+     * select input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Whether the selection is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The size of input.
+     * @default 'medium'
+     */
+    size?: SelectInputSize;
+    /**
+     * The value of selection.
+     * @default undefined
+     */
+    value?: string;
+}
+/**
+ * The AutoComplete component for react. <br />
+ * Note that if you need search for ONLY given options, not included your typings,
+ * should considering using the `Select` component with `onSearch` prop.
+ */
+declare const AutoComplete: import("react").ForwardRefExoticComponent<AutoCompleteProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AutoComplete;

package/Select/AutoComplete.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext, useState, useRef } from 'react';
+import { selectClasses } from '@mezzanine-ui/core/select';
+import { PlusIcon } from '@mezzanine-ui/icons';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Option from './Option.js';
+import { SelectControlContext } from './SelectControlContext.js';
+import { useAutoCompleteValueControl } from '../Form/useAutoCompleteValueControl.js';
+import { useClickAway } from '../hooks/useClickAway.js';
+import SelectTrigger from './SelectTrigger.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
+import Menu from '../Menu/Menu.js';
+import Empty from '../Empty/Empty.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const MENU_ID = 'mzn-select-autocomplete-menu-id';
+/**
+ * The AutoComplete component for react. <br />
+ * Note that if you need search for ONLY given options, not included your typings,
+ * should considering using the `Select` component with `onSearch` prop.
+ */
+const AutoComplete = forwardRef(function Select(props, ref) {
+    var _a, _b;
+    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
+    const { addable = false, className, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, defaultValue, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputRef, inputProps, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize = 'medium', onChange: onChangeProp, onClear: onClearProp, onInsert, onSearch, options: optionsProp, popperOptions = {}, placeholder = '', prefix, required = requiredFromFormControl || false, size = 'medium', value: valueProp, } = props;
+    const [open, toggleOpen] = useState(false);
+    const { focused, onFocus, onChange, onClear, options, searchText, setSearchText, setValue, value, } = useAutoCompleteValueControl({
+        defaultValue,
+        disabledOptionsFilter,
+        onChange: onChangeProp,
+        onClear: onClearProp,
+        onClose: () => toggleOpen(false),
+        options: optionsProp,
+        value: valueProp,
+    });
+    /** insert feature */
+    const [insertText, setInsertText] = useState('');
+    const nodeRef = useRef(null);
+    const controlRef = useRef(null);
+    const popperRef = useRef(null);
+    const composedRef = useComposeRefs([ref, controlRef]);
+    useClickAway(() => {
+        if (!open || focused)
+            return;
+        return () => {
+            toggleOpen((prev) => !prev);
+        };
+    }, nodeRef, [
+        focused,
+        nodeRef,
+        open,
+        toggleOpen,
+    ]);
+    /** Trigger input props */
+    const onSearchInputChange = (e) => {
+        /** should sync both search input and value */
+        setSearchText(e.target.value);
+        setValue(e.target.value);
+        /** return current value to onSearch */
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value);
+    };
+    const onSearchInputFocus = (e) => {
+        var _a;
+        e.stopPropagation();
+        toggleOpen(true);
+        onFocus(true);
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    };
+    const onSearchInputBlur = (e) => {
+        var _a;
+        onFocus(false);
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    };
+    const resolvedInputProps = {
+        ...inputProps,
+        'aria-controls': MENU_ID,
+        'aria-expanded': open,
+        'aria-owns': MENU_ID,
+        onBlur: onSearchInputBlur,
+        onChange: onSearchInputChange,
+        onFocus: onSearchInputFocus,
+        placeholder,
+        role: 'combobox',
+    };
+    return (jsx(SelectControlContext.Provider, Object.assign({ value: {
+            onChange,
+            value,
+        } }, { children: jsxs("div", Object.assign({ ref: nodeRef, className: selectClasses.host }, { children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, disabled: disabled, error: error, forceHideSuffixActionIcon: true, fullWidth: fullWidth, inputRef: inputRef, mode: "single", onTagClose: onChange, onClear: onClear, prefix: prefix, readOnly: false, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: undefined, value: value }, void 0),
+                jsxs(InputTriggerPopper, Object.assign({ ref: popperRef, anchor: controlRef, className: selectClasses.popper, open: open, sameWidth: true, options: popperOptions }, { children: [jsxs(Menu, Object.assign({ id: MENU_ID, "aria-activedescendant": (_b = (_a = value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '', itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 } }, { children: [jsx(Option, Object.assign({ value: searchText }, { children: searchText }), void 0),
+                                options.length ? options.map((option) => (jsx(Option, Object.assign({ value: option }, { children: option }), option))) : (jsx(Empty, { children: "\u67E5\u7121\u8CC7\u6599" }, void 0))] }), void 0),
+                        addable ? (jsxs("div", Object.assign({ className: selectClasses.autoComplete }, { children: [jsx("input", { type: "text", onChange: (e) => setInsertText(e.target.value), onClick: (e) => e.stopPropagation(), onFocus: (e) => e.stopPropagation(), placeholder: "\u65B0\u589E\u9078\u9805", value: insertText }, void 0),
+                                jsx(Icon, { className: cx(selectClasses.autoCompleteIcon, {
+                                        [selectClasses.autoCompleteIconActive]: !!insertText,
+                                    }), icon: PlusIcon, onClick: (e) => {
+                                        var _a;
+                                        e.stopPropagation();
+                                        if (insertText) {
+                                            const insertSuccess = (_a = onInsert === null || onInsert === void 0 ? void 0 : onInsert(insertText)) !== null && _a !== void 0 ? _a : false;
+                                            if (insertSuccess) {
+                                                setInsertText('');
+                                            }
+                                        }
+                                    } }, void 0)] }), void 0)) : null] }), void 0)] }), void 0) }), void 0));
+});
+
+export default AutoComplete;

package/Select/Option.d.ts

@@ -0,0 +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;

package/Select/Option.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+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 active = Boolean(activeProp || (selectedValue !== null && selectedValue !== void 0 ? selectedValue : []).find((sv) => sv.id === value));
+    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, Object.assign({}, rest, { ref: ref, active: active, "aria-selected": active, id: value, onClick: (evt) => {
+            evt.stopPropagation();
+            onSelect();
+        }, onKeyDown: onKeyDown, role: role, tabIndex: 0 }, { children: children }), void 0));
+});
+
+export default Option;

package/Select/Select.d.ts

@@ -0,0 +1,57 @@
+/// <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/rename-types';
+import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
+export interface SelectProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown'>, FormElementFocusHandlers, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
+    maxHeight: 'menuMaxHeight';
+    role: 'menuRole';
+    size: 'menuSize';
+}>, PickRenameMulti<Pick<PopperProps, 'options'>, {
+    options: 'popperOptions';
+}>, Pick<MenuProps, 'children'> {
+    /**
+     * The default selection
+     */
+    defaultValue?: SelectValue[];
+    /**
+     * The other native props for input element.
+     */
+    inputProps?: Omit<SelectTriggerInputProps, 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
+    /**
+     * The change event handler of input element.
+     */
+    onChange?(newOptions: SelectValue[]): any;
+    /**
+     * The search event handler, this prop won't work when mode is `multiple`
+     */
+    onSearch?(input: string): any;
+    /**
+     * select input placeholder
+     */
+    placeholder?: string;
+    /**
+     * To customize rendering select input value
+     */
+    renderValue?(values: SelectValue[]): string;
+    /**
+     * Whether the selection is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The size of input.
+     * @default 'medium'
+     */
+    size?: SelectInputSize;
+    /**
+     * The value of selection.
+     * @default undefined
+     */
+    value?: SelectValue[];
+}
+declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Select;

package/Select/Select.js

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext, useState, useRef, useLayoutEffect } from 'react';
+import { selectClasses } from '@mezzanine-ui/core/select';
+import { SearchIcon } from '@mezzanine-ui/icons';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { SelectControlContext } from './SelectControlContext.js';
+import { useSelectValueControl } from '../Form/useSelectValueControl.js';
+import { useClickAway } from '../hooks/useClickAway.js';
+import SelectTrigger from './SelectTrigger.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import Icon from '../Icon/Icon.js';
+import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
+import Menu from '../Menu/Menu.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, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize = 'medium', mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onSearch, placeholder = '', popperOptions = {}, prefix, renderValue: renderValueProp, required = requiredFromFormControl || false, size = 'medium', suffixActionIcon: suffixActionIconProp, 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]);
+    const searchable = typeof onSearch === 'function';
+    const [searchText, changeSearchText] = useState('');
+    const [focused, setFocused] = useState(false);
+    const renderValue = focused && searchable ? () => searchText : renderValueProp;
+    function getPlaceholder() {
+        var _a;
+        if (focused && searchable) {
+            return (_a = renderValueProp === null || renderValueProp === void 0 ? void 0 : renderValueProp(value)) !== null && _a !== void 0 ? _a : value.map(({ name }) => name).join(', ');
+        }
+        return placeholder;
+    }
+    useLayoutEffect(() => {
+        if (!focused) {
+            changeSearchText('');
+            if (typeof onSearch === 'function') {
+                onSearch('');
+            }
+        }
+    }, [focused, onSearch]);
+    useClickAway(() => {
+        if (!open || focused)
+            return;
+        return () => {
+            onClose();
+        };
+    }, nodeRef, [
+        focused,
+        nodeRef,
+        open,
+        toggleOpen,
+    ]);
+    const suffixActionIcon = suffixActionIconProp || (searchable && open ? (jsx(Icon, { icon: SearchIcon }, void 0)) : undefined);
+    const onClickTextField = () => {
+        /** when searchable, should open menu when focus */
+        if (!searchable && !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;
+            }
+        }
+    };
+    /** Trigger input props */
+    const onSearchInputChange = searchable ? (e) => {
+        changeSearchText(e.target.value);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        onSearch(e.target.value);
+    } : undefined;
+    const onSearchInputFocus = searchable ? (e) => {
+        e.stopPropagation();
+        onToggleOpen();
+        setFocused(true);
+    } : undefined;
+    const onSearchInputBlur = () => setFocused(false);
+    const resolvedInputProps = {
+        ...inputProps,
+        'aria-controls': MENU_ID,
+        'aria-expanded': open,
+        'aria-owns': MENU_ID,
+        onBlur: onSearchInputBlur,
+        onChange: onSearchInputChange,
+        onFocus: onSearchInputFocus,
+        placeholder: getPlaceholder(),
+        role: 'combobox',
+    };
+    return (jsx(SelectControlContext.Provider, Object.assign({ value: {
+            onChange,
+            value,
+        } }, { children: jsxs("div", Object.assign({ 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: !searchable, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value, renderValue: renderValue }, void 0),
+                jsx(InputTriggerPopper, Object.assign({ ref: popperRef, anchor: controlRef, className: selectClasses.popper, open: open, sameWidth: true, options: popperOptions }, { children: jsx(Menu, Object.assign({ id: MENU_ID, "aria-activedescendant": (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '', itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 } }, { children: children }), void 0) }), void 0)] }), void 0) }), void 0));
+});
+
+export default Select;

package/Select/SelectControlContext.d.ts

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

package/Select/SelectControlContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const SelectControlContext = createContext(undefined);
+
+export { SelectControlContext };

package/Select/SelectTrigger.d.ts

@@ -0,0 +1,54 @@
+import { Ref } from 'react';
+import { SelectMode } from '@mezzanine-ui/core/select';
+import { TextFieldProps } from '../TextField';
+import { SelectValue } from './typings';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export declare type SelectTriggerInputProps = Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'autoComplete' | 'children' | 'defaultValue' | 'disabled' | 'readOnly' | 'required' | 'type' | 'value' | `aria-${'autocomplete' | 'disabled' | 'haspopup' | 'multiline' | 'readonly' | 'required'}`>;
+export interface SelectTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'defaultChecked' | 'suffix'> {
+    /**
+     * Controls the chevron icon layout.
+     */
+    active?: boolean;
+    /**
+     * force hide suffixAction icons
+     */
+    forceHideSuffixActionIcon?: boolean;
+    /**
+     * Other props you may provide to input element.
+     */
+    inputProps?: SelectTriggerInputProps;
+    /**
+     * The ref object for input element.
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Controls the layout of trigger.
+     */
+    mode?: SelectMode;
+    /**
+     * The click handler for the cross icon on tags
+     */
+    onTagClose?: (target: SelectValue) => void;
+    /**
+     * Whether the input is readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Provide if you have a customize value rendering logic.
+     * By default will have a comma between values.
+     */
+    renderValue?: (value: SelectValue[]) => string;
+    /**
+     * Whether the input is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The value of selection.
+     * @default undefined
+     */
+    value?: SelectValue[];
+}
+declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default SelectTrigger;

package/Select/SelectTrigger.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { selectClasses } from '@mezzanine-ui/core/select';
+import { ChevronDownIcon } from '@mezzanine-ui/icons';
+import Icon from '../Icon/Icon.js';
+import TextField from '../TextField/TextField.js';
+import Tag from '../Tag/Tag.js';
+import cx from 'clsx';
+
+const SelectTrigger = forwardRef(function SelectTrigger(props, ref) {
+    const { active, className, disabled, forceHideSuffixActionIcon, inputProps, inputRef, mode, onTagClose, readOnly, renderValue: renderValueProp, required, size, suffixActionIcon: suffixActionIconProp, value, ...restTextFieldProps } = props;
+    /** Render value to string for input */
+    const renderValue = () => {
+        var _a, _b;
+        return ((_b = (_a = renderValueProp === null || renderValueProp === void 0 ? void 0 : renderValueProp(value || [])) !== null && _a !== void 0 ? _a : value === null || value === void 0 ? void 0 : value.map((v) => v.name).join(', ')) !== null && _b !== void 0 ? _b : '');
+    };
+    /** Compute suffix action icon */
+    const suffixActionIcon = suffixActionIconProp || (jsx(Icon, { icon: ChevronDownIcon, className: cx(selectClasses.triggerSuffixActionIcon, {
+            [selectClasses.triggerSuffixActionIconActive]: active,
+        }) }, void 0));
+    return (jsx(TextField, Object.assign({ ref: ref }, restTextFieldProps, { active: !!(value === null || value === void 0 ? void 0 : value.length), 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("div", Object.assign({ className: selectClasses.triggerTags }, { children: value.map((selection) => (jsx(Tag, Object.assign({ closable: true, disabled: disabled, onClose: (e) => {
+                    e.stopPropagation();
+                    onTagClose === null || onTagClose === void 0 ? void 0 : onTagClose(selection);
+                }, size: size }, { children: selection.name }), selection.id))) }), void 0)) : (jsx("input", Object.assign({}, inputProps, { ref: inputRef, "aria-autocomplete": "list", "aria-disabled": disabled, "aria-haspopup": "listbox", "aria-readonly": readOnly, "aria-required": required, autoComplete: "false", disabled: disabled, readOnly: readOnly, required: required, type: "search", value: renderValue() }), void 0)) }), void 0));
+});
+
+export default SelectTrigger;