@oliasoft-open-source/react-ui-library 3.12.0-beta-20 → 3.12.0-beta-21

package/dist/components/select/native-select/native-select.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import cx from 'classnames';
+import styles from './native-select.module.less';
+import { Tooltip } from '../../tooltip/tooltip';
+import { isStringNumberOrNode } from '../../../helpers/types';
+import { DisabledContext } from '../../../helpers/disabled-context';
+import { GroupOrder } from "../../../common-enum";
+export const NativeSelect = ({ disabled = false, error = null, warning = null, tooltip = null, options, onChange = () => { }, onFocus = () => { }, onBlur = () => { }, right = false, small = false, tabIndex = 0, selectedOption, width = null, groupOrder = null, testId, isInTable = false, clearable, placeholder, hasNonExistentValue, maxTooltipWidth, borderRadius, }) => {
+    const disabledContext = useContext(DisabledContext);
+    const internalValue = selectedOption === null
+        ? 'unselected'
+        : selectedOption?.value === null
+            ? 'unselected'
+            : selectedOption?.value; //null not allowed as a React prop to a select input
+    const isUnselected = internalValue === 'unselected';
+    const viewOptions = (internalValue === 'unselected' || clearable
+        ? [
+            _jsx("option", { value: "unselected", disabled: !clearable, hidden: !clearable, children: placeholder || 'Select...' }, "unselected"),
+        ]
+        : [])
+        .concat(hasNonExistentValue
+        ? [
+            _jsx("option", { value: selectedOption?.value, disabled: disabled || disabledContext, children: selectedOption?.label }, "selectedNonExistentValue"),
+        ]
+        : [])
+        .concat(options.map((option, i) => {
+        return (_jsx("option", { value: option.value, "data-testid": option.testId, children: option.label }, i));
+    }));
+    const order = (() => {
+        if (groupOrder) {
+            switch (groupOrder) {
+                case GroupOrder.FIRST:
+                    return styles.groupOrderFirst;
+                case GroupOrder.LAST:
+                    return styles.groupOrderLast;
+                default:
+                    return styles.groupOrderMiddle;
+            }
+        }
+        return '';
+    })();
+    return (_jsx(Tooltip, { error: !!error, warning: !!warning, text: tooltip || error || warning, enabled: (tooltip && isStringNumberOrNode(tooltip)) ||
+            (error && isStringNumberOrNode(error)) ||
+            (warning && isStringNumberOrNode(warning)) ||
+            false, maxWidth: maxTooltipWidth, placement: "bottom-center", children: _jsx("select", { className: cx(styles.select, isUnselected ? styles.unSelected : '', error ? styles.error : warning ? styles.warning : '', right ? styles.right : '', small ? styles.small : '', isInTable ? styles.isInTable : '', order), style: {
+                width: width || '',
+                borderRadius: borderRadius || '',
+            }, onChange: (evt) => {
+                const { value } = evt.target;
+                let nextValue;
+                if (value === 'unselected') {
+                    nextValue = { value: null };
+                }
+                else {
+                    const foundOption = options.find((o) => String(o.value) === String(value));
+                    nextValue = foundOption || { value: null };
+                }
+                onChange(evt, nextValue);
+            }, onFocus: onFocus, onBlur: onBlur, tabIndex: tabIndex, value: internalValue, disabled: disabled || disabledContext, "data-testid": testId, children: viewOptions }) }));
+};

package/dist/components/select/select.d.ts

@@ -0,0 +1,2 @@
+import { ISelectProps } from './select.interface';
+export declare const Select: (props: ISelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/select/select.input.d.ts

@@ -0,0 +1,21 @@
+import { ISelectSelectedOption } from './select.interface';
+type Option = ISelectSelectedOption;
+type SimpleOption = string | number;
+type SelectedOption = Option | SimpleOption;
+export declare const isMulti: (selectedOptions: any) => boolean;
+export declare const standardizeOptions: (options: any[], simple: boolean) => Option[];
+export declare const standardizeSelectedOption: (standardizedOptions: Option[], selectedOption: SelectedOption) => Option | undefined;
+export declare const standardizeSelectedOptions: (standardizedOptions: Option[], selectedOptions: SelectedOption[] | SelectedOption) => Option[] | Option | undefined;
+export declare const isSimpleOptions: (options: Option[]) => boolean;
+export declare const isSimpleSelectedOptions: (selectedOptions: SelectedOption | SelectedOption[]) => boolean;
+export declare const getFirstSelectedOptionIndex: (options: Option[], selectedOptions: SelectedOption | SelectedOption[]) => number | null;
+export declare const nonExistentValue: (options: Option[], selectedOptions: SelectedOption | SelectedOption[]) => boolean;
+export declare const standardizeInputs: (options: Option[], selectedOptions: SelectedOption | SelectedOption[], enableAutoScroll?: boolean, checkNonExistentValues?: boolean) => {
+    options: ISelectSelectedOption[];
+    selectedOptions: ISelectSelectedOption | ISelectSelectedOption[] | undefined;
+    multi: boolean;
+    simpleInputs: boolean;
+    firstSelectedOptionIndex: number | null;
+    hasNonExistentValue: boolean;
+};
+export {};

package/dist/components/select/select.input.js

@@ -0,0 +1,114 @@
+import { MenuType } from "../menu/enum";
+export const isMulti = (selectedOptions) => selectedOptions instanceof Array;
+const isEmptyNullOrUndefined = (value) => value === null || value === undefined || value === '';
+export const standardizeOptions = (options, simple) => {
+    return simple && options instanceof Array
+        ? options.map((o) => typeof o === 'string' || typeof o === 'number'
+            ? { label: o, value: o }
+            : o)
+        : options;
+};
+export const standardizeSelectedOption = (standardizedOptions, selectedOption) => {
+    if (selectedOption !== null &&
+        typeof selectedOption === 'object' &&
+        selectedOption.hasOwnProperty('label') &&
+        selectedOption.hasOwnProperty('value')) {
+        return selectedOption;
+    }
+    else {
+        const value = selectedOption !== null &&
+            typeof selectedOption === 'object' &&
+            selectedOption.hasOwnProperty('value')
+            ? selectedOption.value
+            : selectedOption;
+        const foundFullValue = standardizedOptions instanceof Array
+            ? standardizedOptions
+                .filter((o) => o.type !== MenuType.HEADING)
+                .find((o) => o.value == value /* allow coercion */)
+            : undefined;
+        return (foundFullValue ||
+            (isEmptyNullOrUndefined(value)
+                ? undefined
+                : {
+                    value: value,
+                    label: value,
+                }));
+    }
+};
+export const standardizeSelectedOptions = (standardizedOptions, selectedOptions) => {
+    const multi = isMulti(selectedOptions);
+    if (multi) {
+        return selectedOptions
+            .map((selectedOption) => standardizeSelectedOption(standardizedOptions, selectedOption))
+            .filter((selectedOption) => selectedOption !== undefined);
+    }
+    else {
+        return selectedOptions === null
+            ? undefined
+            : standardizeSelectedOption(standardizedOptions, selectedOptions);
+    }
+};
+export const isSimpleOptions = (options) => options instanceof Array &&
+    options.some((o) => typeof o === 'string' || typeof o === 'number');
+export const isSimpleSelectedOptions = (selectedOptions) => {
+    return (typeof selectedOptions === 'string' ||
+        typeof selectedOptions === 'number' ||
+        (selectedOptions instanceof Array &&
+            isSimpleOptions(selectedOptions)));
+};
+export const getFirstSelectedOptionIndex = (options, selectedOptions) => {
+    const firstSelected = selectedOptions instanceof Array
+        ? selectedOptions.length
+            ? selectedOptions[0]
+            : null
+        : selectedOptions;
+    const firstSelectedValue = firstSelected === null || firstSelected === undefined
+        ? null
+        : typeof firstSelected === 'string' || typeof firstSelected === 'number'
+            ? firstSelected
+            : firstSelected.value;
+    const index = options
+        .filter((o) => o.type !== MenuType.HEADING)
+        .findIndex((o) => {
+        if (typeof o === 'string' || typeof o === 'number') {
+            return o == firstSelectedValue; //allow coercion
+        }
+        else {
+            return o.value == firstSelectedValue; //allow coercion
+        }
+    });
+    return index === -1 ? null : index;
+};
+export const nonExistentValue = (options, selectedOptions) => {
+    const multi = isMulti(selectedOptions);
+    const selected = multi
+        ? selectedOptions
+        : isEmptyNullOrUndefined(selectedOptions)
+            ? []
+            : [selectedOptions];
+    return !selected.every((selectedValue) => {
+        const found = options.find((o) => o.value === selectedValue.value);
+        return found !== undefined;
+    });
+};
+export const standardizeInputs = (options, selectedOptions, enableAutoScroll, checkNonExistentValues) => {
+    const cleanedOptions = options instanceof Array ? options : []; // don't crash when options is null or wrong type
+    const multi = isMulti(selectedOptions);
+    const simpleOptions = isSimpleOptions(cleanedOptions);
+    const standardizedOptions = standardizeOptions(cleanedOptions, simpleOptions);
+    const firstSelectedOptionIndex = enableAutoScroll
+        ? getFirstSelectedOptionIndex(cleanedOptions, selectedOptions)
+        : null;
+    const standardizedSelectedOptions = standardizeSelectedOptions(standardizedOptions, selectedOptions);
+    const hasNonExistentValue = checkNonExistentValues && standardizedSelectedOptions !== undefined
+        ? nonExistentValue(standardizedOptions, standardizedSelectedOptions)
+        : false;
+    return {
+        options: standardizedOptions,
+        selectedOptions: standardizedSelectedOptions,
+        multi,
+        simpleInputs: simpleOptions,
+        firstSelectedOptionIndex,
+        hasNonExistentValue,
+    };
+};

package/dist/components/select/select.interface.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+export interface ISelectSelectedOption {
+    value?: string | number | boolean;
+    label?: string | ReactNode;
+    details?: string;
+    actions?: any[];
+    icon?: boolean | ReactNode;
+    type?: string;
+    disabled?: boolean;
+    testId?: string;
+}
+export interface ISelectProps {
+    name?: string;
+    multi?: boolean;
+    options?: ISelectSelectedOption[];
+    value?: any;
+    native?: boolean;
+    onChange?: (value: any) => void;
+    deprecatedEventHandler?: boolean;
+    autoScroll?: boolean;
+    warning?: string | number | ReactNode;
+    error?: string | number | ReactNode;
+    checkNonExistentValues?: boolean;
+    closeOnOptionActionClick?: boolean;
+    small?: boolean;
+    width?: string | number | null;
+    borderRadius?: string | number;
+    onCreate?: (evt: any) => any;
+    disabled?: boolean;
+    placeholder?: string;
+    isInTable?: boolean;
+    clearable?: boolean;
+    searchable?: boolean;
+    maxTooltipWidth?: string | number;
+    autoLayerWidth?: boolean;
+    right?: boolean;
+    tabIndex?: number;
+    testId?: string;
+}

package/dist/components/select/select.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/select/select.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NativeSelect } from './native-select/native-select';
+import { CustomSelect } from './custom-select/custom-select';
+import { standardizeInputs } from './select.input';
+export const Select = (props) => {
+    const { name = '', options: rawOptions = [], value: rawSelectedOptions, native = false, onChange = () => { }, deprecatedEventHandler = false, autoScroll = true, warning, error, checkNonExistentValues = true, closeOnOptionActionClick = true, testId, } = props;
+    const enableAutoScroll = !native && autoScroll === true;
+    const { multi, simpleInputs, options, selectedOptions, firstSelectedOptionIndex, hasNonExistentValue, } = standardizeInputs(rawOptions, rawSelectedOptions, enableAutoScroll, checkNonExistentValues);
+    const canUseNative = !multi; //ignore searchable since it's on by default
+    const useNative = native && canUseNative;
+    if (native && !canUseNative) {
+        console.warn('Native select does not support provided props (see stories)');
+    }
+    const nonExistentWarning = 'Value no longer available for re-selection';
+    const fullWarning = hasNonExistentValue ? (warning ? (_jsxs("div", { children: [_jsx("div", { children: nonExistentWarning }), _jsx("div", { children: warning })] })) : (nonExistentWarning)) : (warning);
+    const fullError = hasNonExistentValue && error ? (_jsxs("div", { children: [_jsx("div", { children: nonExistentWarning }), _jsx("div", { children: error })] })) : (error);
+    const onChangeSelectedValue = (evt, selectedOptions) => {
+        if (deprecatedEventHandler) {
+            const newSelectedOptions = multi
+                ? selectedOptions.map((o) => simpleInputs ? o.value : o)
+                : simpleInputs
+                    ? selectedOptions.value
+                    : selectedOptions;
+            onChange(newSelectedOptions);
+        }
+        else {
+            /*
+             - For React synthetic events, mutate the values and forward the event
+             - For native (keyboard) events, clone the enumerable properties and forward
+             - Explanation:
+               https://gitlab.com/oliasoft-open-source/react-ui-library/-/issues/77
+           */
+            const isSyntheticEvent = !(evt instanceof Event);
+            const value = multi
+                ? selectedOptions.map((o) => o.value)
+                : selectedOptions.value;
+            if (isSyntheticEvent) {
+                evt.target.name = name;
+                evt.target.value = value;
+                if (!multi) {
+                    evt.target.label = selectedOptions.label;
+                }
+                onChange(evt);
+            }
+            else {
+                onChange({
+                    ...evt,
+                    target: {
+                        ...evt.target,
+                        name,
+                        value,
+                        ...(!multi && {
+                            label: selectedOptions.label,
+                        }),
+                    },
+                });
+            }
+        }
+    };
+    return useNative ? (_jsx(NativeSelect, { ...props, options: options, selectedOption: selectedOptions, onChange: onChangeSelectedValue, hasNonExistentValue: hasNonExistentValue, warning: fullWarning, error: fullError, testId: testId })) : (_jsx(CustomSelect, { ...props, options: options, selectedOptions: selectedOptions, onChange: onChangeSelectedValue, multi: multi, firstSelectedOptionIndex: firstSelectedOptionIndex, warning: fullWarning, error: fullError, testId: testId, closeOnOptionActionClick: closeOnOptionActionClick }));
+};

package/dist/components/select/select.stories-data.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+import { ISelectSelectedOption } from './select.interface';
+type Action = {
+    label: string;
+    icon: string | ReactElement;
+    onClick: () => void;
+};
+type Option = ISelectSelectedOption;
+type Heading = {
+    type: 'Heading';
+    label: string;
+};
+type OptionOrHeading = Option | Heading;
+export declare const options: Option[];
+export declare const optionsWithDetails: Option[];
+export declare const optionsWithHeadings: OptionOrHeading[];
+export declare const optionsNumeric: Option[];
+export declare const optionsBoolean: Option[];
+export declare const optionsWithIcons: Option[];
+export declare const actions: Action[];
+export declare const optionsWithActions: Option[];
+export declare const optionsWithEverything: Option[];
+export declare const optionsLong: Option[];
+export declare const optionsSimple: string[];
+export {};

package/dist/components/select/select.stories-data.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../icon/icon';
+import { IconType } from "../../common-enum";
+export const options = [
+    { label: 'Aardvarks', value: 'termites' },
+    { label: 'Kangaroos', value: 'grass' },
+    { label: 'Koalas', value: 'leaves' },
+    { label: 'Monkeys', value: 'bananas', disabled: true },
+    { label: 'Wombats', value: 'bark' },
+];
+export const optionsWithDetails = [
+    { label: 'Kangaroos', value: 'grass', details: '(grass)' },
+    { label: 'Monkeys', value: 'bananas', details: '(bananas)' },
+    { label: 'Possums', value: 'slugs', details: '(slugs)' },
+];
+export const optionsWithHeadings = [
+    { type: 'Heading', label: 'Large' },
+    { label: 'Aardvarks', value: 'termites' },
+    { label: 'Kangaroos', value: 'grass' },
+    { label: 'Monkeys', value: 'bananas' },
+    { type: 'Heading', label: 'Small' },
+    { label: 'Possums', value: 'slugs' },
+];
+export const optionsNumeric = [
+    { label: 1, value: 1 },
+    { label: 2, value: 2 },
+    { label: 3, value: 3 },
+    { label: 4, value: 4 },
+];
+export const optionsBoolean = [
+    { label: 'Yes', value: true },
+    { label: 'No', value: false },
+];
+export const optionsWithIcons = [
+    {
+        label: 'Aardvarks',
+        value: 'termites',
+    },
+    { label: 'Monkeys', value: 'bananas' },
+    {
+        label: 'Vampires',
+        value: 'blood',
+        icon: _jsx(Icon, { icon: IconType.WARNING, color: "var(--color-text-warning)" }),
+    },
+    {
+        label: 'Zombies',
+        value: 'brains',
+        icon: _jsx(Icon, { icon: IconType.ERROR, color: "var(--color-text-error)" }),
+    },
+];
+export const actions = [
+    {
+        label: 'Delete',
+        icon: 'delete',
+        onClick: () => { },
+    },
+    {
+        label: 'Rename',
+        icon: 'rename',
+        onClick: () => { },
+    },
+];
+export const optionsWithActions = [
+    {
+        label: 'Kangaroos',
+        value: 'grass',
+        actions,
+    },
+    {
+        label: 'Monkeys',
+        value: 'bananas',
+        actions,
+    },
+    {
+        label: 'Possums',
+        value: 'slugs',
+        actions,
+        details: '(some details)',
+    },
+];
+export const optionsWithEverything = [
+    {
+        label: 'Kangaroos',
+        value: 'grass',
+        actions,
+        icon: _jsx(Icon, { icon: IconType.WARNING, color: "var(--color-text-warning)" }),
+        details: '(grass)',
+    },
+    {
+        label: 'Monkeys',
+        value: 'bananas',
+        actions,
+        icon: _jsx(Icon, { icon: IconType.WARNING, color: "var(--color-text-warning)" }),
+        details: '(bananas)',
+    },
+    {
+        label: 'Possums',
+        value: 'slugs',
+        actions,
+        icon: _jsx(Icon, { icon: IconType.WARNING, color: "var(--color-text-warning)" }),
+        details: '(slugs)',
+    },
+];
+export const optionsLong = [...Array(10000).keys()].map((o, i) => ({
+    label: Math.random().toString(36).substring(7),
+    value: i,
+}));
+export const optionsSimple = [
+    'Aardvarks',
+    'Kangaroos',
+    'Monkeys',
+    'Possums',
+];

package/dist/components/select/select.stories.d.ts

@@ -0,0 +1,30 @@
+import { StoryFn } from '@storybook/react';
+import { ISelectProps } from './select.interface';
+import { ICustomSelectProps } from './custom-select/custom-select.interface';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+type TSelectType = ISelectProps | ICustomSelectProps;
+export declare const Default: StoryFn<TSelectType>;
+export declare const Native: StoryFn<TSelectType>;
+export declare const Multiselect: StoryFn<TSelectType>;
+export declare const Empty: StoryFn<TSelectType>;
+export declare const Clearable: StoryFn<TSelectType>;
+export declare const NonExistentValue: StoryFn<TSelectType>;
+export declare const CustomPlaceholder: StoryFn<TSelectType>;
+export declare const OptionsWithHeadings: StoryFn<TSelectType>;
+export declare const OptionsWithDetails: StoryFn<TSelectType>;
+export declare const OptionsWithIcons: StoryFn<TSelectType>;
+export declare const OptionsWithActions: StoryFn<TSelectType>;
+export declare const OptionsWithEverything: StoryFn<TSelectType>;
+export declare const NotSearchable: StoryFn<TSelectType>;
+export declare const RightAligned: StoryFn<TSelectType>;
+export declare const AutoLayerWidth: StoryFn<TSelectType>;
+export declare const Tooltip: StoryFn<TSelectType>;
+export declare const Error: StoryFn<TSelectType>;
+export declare const Warning: StoryFn<TSelectType>;
+export declare const Disabled: StoryFn<TSelectType>;
+export declare const NumericOptions: StoryFn<TSelectType>;
+export declare const BooleanOptions: StoryFn<TSelectType>;
+export declare const SimpleOptions: StoryFn<TSelectType>;
+export declare const VeryLongList: StoryFn<TSelectType>;
+export declare const DeprecatedEventHandler: StoryFn<TSelectType>;

package/dist/components/select/select.stories.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Select } from './select';
+import { Spacer } from '../layout/spacer/spacer';
+import * as storyData from './select.stories-data';
+import { Text } from '../text/text';
+export default {
+    title: 'Forms/Select',
+    component: Select,
+    args: {
+        options: storyData.options,
+        native: false,
+        multi: false,
+        disabled: false,
+        autoLayerWidth: false,
+        clearable: false,
+        searchable: true,
+        right: false,
+    },
+};
+const Template = (args) => {
+    const { multi, value } = args;
+    const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
+    const handleChange = (evt) => {
+        const { value } = evt.target;
+        setSelectedValue(multi ? value : { value });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Select, { value: selectedValue, onChange: handleChange, placeholder: "Full width", ...args }), _jsx(Spacer, {}), _jsx(Select, { value: selectedValue, onChange: handleChange, width: "200px", placeholder: "Fixed width", ...args }), _jsx(Spacer, {}), _jsx(Select, { value: selectedValue, onChange: handleChange, width: "auto", placeholder: "Auto width", ...args }), _jsx(Spacer, {}), _jsx(Select, { value: selectedValue, onChange: handleChange, width: "auto", placeholder: "Small", small: true, ...args }), _jsx(Spacer, {}), _jsx(Text, { small: true, muted: true, children: "Avoid auto width for very long lists." })] }));
+};
+export const Default = Template.bind({});
+export const Native = Template.bind({});
+Native.args = { native: true };
+export const Multiselect = Template.bind({});
+Multiselect.args = { multi: true, clearable: true };
+export const Empty = Template.bind({});
+Empty.args = { options: [] };
+export const Clearable = Template.bind({});
+Clearable.args = { clearable: true };
+export const NonExistentValue = Template.bind({});
+NonExistentValue.args = { value: { label: 'Vampires', value: 'blood' } };
+export const CustomPlaceholder = Template.bind({});
+CustomPlaceholder.args = { placeholder: 'Select the best animal...' };
+export const OptionsWithHeadings = Template.bind({});
+OptionsWithHeadings.args = { options: storyData.optionsWithHeadings };
+export const OptionsWithDetails = Template.bind({});
+OptionsWithDetails.args = { options: storyData.optionsWithDetails };
+export const OptionsWithIcons = Template.bind({});
+OptionsWithIcons.args = { options: storyData.optionsWithIcons };
+export const OptionsWithActions = Template.bind({});
+OptionsWithActions.args = { options: storyData.optionsWithActions };
+export const OptionsWithEverything = Template.bind({});
+OptionsWithEverything.args = { options: storyData.optionsWithEverything };
+export const NotSearchable = Template.bind({});
+NotSearchable.args = { searchable: false };
+export const RightAligned = Template.bind({});
+RightAligned.args = { right: true };
+export const AutoLayerWidth = Template.bind({});
+AutoLayerWidth.parameters = {
+    docs: {
+        description: {
+            story: 'Avoid autoLayerWidth for very long lists in custom selects (slow)',
+        },
+    },
+};
+AutoLayerWidth.args = { width: '70px', autoLayerWidth: true };
+export const Tooltip = Template.bind({});
+Tooltip.args = { tooltip: 'Some info' };
+export const Error = Template.bind({});
+Error.args = { error: 'Some info' };
+export const Warning = Template.bind({});
+Warning.args = { warning: 'Some info' };
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+export const NumericOptions = Template.bind({});
+NumericOptions.args = {
+    options: storyData.optionsNumeric,
+    placeholder: undefined,
+};
+export const BooleanOptions = Template.bind({});
+BooleanOptions.args = { options: storyData.optionsBoolean };
+export const SimpleOptions = Template.bind({});
+SimpleOptions.args = { options: storyData.optionsSimple };
+export const VeryLongList = Template.bind({});
+VeryLongList.parameters = {
+    docs: {
+        description: {
+            story: 'Avoid `width: auto` and autoLayerWidth for very long lists in custom selects (slow). Consider checkNonExistentValues={false}.',
+        },
+    },
+};
+VeryLongList.args = { options: storyData.optionsLong };
+export const DeprecatedEventHandler = Template.bind({});
+DeprecatedEventHandler.args = { deprecatedEventHandler: true };

package/dist/components/select/select.test.d.ts

@@ -0,0 +1 @@
+export {};