@stenajs-webui/select 14.2.0 → 15.0.0-alpha.3

package/dist/components/ui/AsyncMultiSelect.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { Props } from "react-select/async";
+import { AsyncProps } from "react-select/async";
+import { GroupBase } from "react-select/dist/declarations/src/types";
 export interface AsyncMultiSelectProps<T = {
     label: string;
     value: string;
-}> extends Props<T, true> {
+}> extends AsyncProps<T, true, GroupBase<T>> {
     variant?: "dark" | "light";
     isMulti?: true;
 }

package/dist/components/ui/AsyncSelect.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { Props } from "react-select/async";
+import { AsyncProps } from "react-select/async";
+import { GroupBase } from "react-select/dist/declarations/src/types";
 export interface AsyncSelectProps<T = {
     label: string;
     value: string;
-}> extends Props<T, false> {
+}> extends AsyncProps<T, false, GroupBase<T>> {
     variant?: "dark" | "light";
     isMulti?: false;
 }

package/dist/components/ui/ChipMultiSelect/ChipMultiSelect.d.ts

@@ -1,8 +1,8 @@
 import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import * as React from "react";
 import { MultiSelectProps } from "../MultiSelect";
-import { CommonChipMultiSelectSelectValue } from "./CommonChipMultiSelect";
-export interface ChipMultiSelectValue extends CommonChipMultiSelectSelectValue {
+import { ChipRowItem } from "./ChipRow";
+export interface ChipMultiSelectValue extends ChipRowItem {
 }
 export interface ChipMultiSelectProps extends Omit<MultiSelectProps, "value" | "onChange" | "isLoading">, ValueAndOnValueChangeProps<Array<ChipMultiSelectValue>> {
     loading?: boolean;

package/dist/components/ui/ChipMultiSelect/ChipRow.d.ts

@@ -0,0 +1,10 @@
+import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
+import { PropsWithChildren } from "react";
+export interface ChipRowItem {
+    label: string;
+    value: string;
+}
+export interface ChipRowProps<TValue> extends ValueAndOnValueChangeProps<TValue> {
+    noneSelectedLabel?: string;
+}
+export declare function ChipRow<TValue extends ChipRowItem>({ value, onValueChange, noneSelectedLabel, children, }: PropsWithChildren<ChipRowProps<Array<TValue>>>): JSX.Element;

package/dist/components/ui/GroupedMultiSelect.d.ts

@@ -1,14 +1,14 @@
 import * as React from "react";
-import { ActionMeta, GroupedOptionsType, OptionsType, SelectComponentsConfig } from "react-select";
+import { ActionMeta, OnChangeValue, Options } from "react-select";
+import { GroupedOptionsType, InternalDropdownOption } from "../../util/multiDropdownUtils";
 import { DropdownOption } from "./GroupedMultiSelectTypes";
-import { MultiSelectProps } from "./MultiSelect";
-export declare type OnChangeValue<TData> = OptionsType<DropdownOption<TData>> | undefined;
-export declare type OnChange<TData> = (value: OnChangeValue<TData>, action: ActionMeta<any>) => void;
-export interface GroupedMultiSelectProps<TData> extends Omit<MultiSelectProps<DropdownOption<TData>>, "options" | "onChange" | "value" | "components"> {
+import { MultiSelectComponentsConfig, MultiSelectProps } from "./MultiSelect";
+export declare type OnChange<TData> = (value: OnChangeValue<DropdownOption<TData>, true>, action: ActionMeta<any>) => void;
+export interface GroupedMultiSelectProps<TData> extends Omit<MultiSelectProps<InternalDropdownOption<TData>>, "options" | "onChange" | "value" | "components"> {
     /**
      * Same as Select prop `component` but without MultiValue and Option since they can not be modified
      */
-    components?: Omit<SelectComponentsConfig<DropdownOption<TData>, true>, "MultiValue" | "Option">;
+    components?: Omit<MultiSelectComponentsConfig<InternalDropdownOption<TData>>, "MultiValue" | "Option">;
     /**
      * Same as Select prop `options` but only with GroupOptionsType
      */
@@ -20,6 +20,6 @@ export interface GroupedMultiSelectProps<TData> extends Omit<MultiSelectProps<Dr
     /**
      * Same as Select prop `value` but only with GroupOptionsType
      */
-    value?: OptionsType<DropdownOption<TData>> | undefined;
+    value?: Options<DropdownOption<TData>> | undefined;
 }
-export declare const GroupedMultiSelect: <TData extends {}>({ onChange, options, value, variant, formatGroupLabel, formatOptionLabel, ...selectProps }: GroupedMultiSelectProps<TData>) => React.ReactElement<GroupedMultiSelectProps<TData>, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const GroupedMultiSelect: <TData extends {}>({ onChange, options, value, variant, formatGroupLabel, formatOptionLabel, ...selectProps }: GroupedMultiSelectProps<TData>) => React.ReactElement<GroupedMultiSelectProps<TData>, string | React.JSXElementConstructor<any>>;

package/dist/components/ui/GroupedMultiSelect.stories.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 declare const _default: {
     title: string;
-    component: <TData extends {}>({ onChange, options, value, variant, formatGroupLabel, formatOptionLabel, ...selectProps }: import("./GroupedMultiSelect").GroupedMultiSelectProps<TData>) => React.ReactElement<import("./GroupedMultiSelect").GroupedMultiSelectProps<TData>, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    component: <TData extends {}>({ onChange, options, value, variant, formatGroupLabel, formatOptionLabel, ...selectProps }: import("./GroupedMultiSelect").GroupedMultiSelectProps<TData>) => React.ReactElement<import("./GroupedMultiSelect").GroupedMultiSelectProps<TData>, string | React.JSXElementConstructor<any>>;
 };
 export default _default;
 export declare const Standard: () => JSX.Element;

package/dist/components/ui/MultiSelect.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
-import { Props } from "react-select";
-export interface MultiSelectProps<T = {
+import { Props, SelectComponentsConfig } from "react-select";
+import { GroupBase } from "react-select/dist/declarations/src/types";
+export interface MultiSelectProps<TOption = {
     label: string;
     value: string;
-}> extends Props<T, true> {
+}> extends Props<TOption, true> {
     variant?: "dark" | "light";
     isMulti?: true;
 }
-export declare const MultiSelect: <T extends {}>({ variant, styles, isMulti, ...selectProps }: MultiSelectProps<T>) => JSX.Element;
+export declare type MultiSelectComponentsConfig<TOption> = SelectComponentsConfig<TOption, true, GroupBase<TOption>>;
+export declare const MultiSelect: <TOption extends {}>({ variant, styles, isMulti, ...selectProps }: MultiSelectProps<TOption>) => JSX.Element;

package/dist/components/ui/MultiSelect.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: <T extends {}>({ variant, styles, isMulti, ...selectProps }: import("./MultiSelect").MultiSelectProps<T>) => JSX.Element;
+    component: <TOption extends {}>({ variant, styles, isMulti, ...selectProps }: import("./MultiSelect").MultiSelectProps<TOption>) => JSX.Element;
 };
 export default _default;
 export declare const Standard: () => JSX.Element;

package/dist/index.es.js

@@ -1,4 +1,5 @@
-import { useMemo, createElement, memo } from 'react';
+import * as React from 'react';
+import { useMemo } from 'react';
 import SelectComponent, { mergeStyles as mergeStyles$1, components } from 'react-select';
 import AsyncComponent from 'react-select/async';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
@@ -44,12 +45,14 @@ function __rest(s, e) {
     return t;
 }
 
-function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
 
 var defaultSelectTheme = {
@@ -285,43 +288,43 @@ var createStylesFromTheme = function (_a) {
 };
 
 var AsyncMultiSelect = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "light" : _b, styles = _a.styles, isMulti = _a.isMulti, selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
+    var _b = _a.variant, variant = _b === void 0 ? "light" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
     var selectStyles = useMemo(function () {
         var sourceStyles = createStylesFromTheme(variant === "light" ? defaultSelectTheme : selectThemeDark);
         return styles ? mergeStyles$1(sourceStyles, styles) : sourceStyles;
     }, [variant, styles]);
-    return (createElement(AsyncComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: true })));
+    return (React.createElement(AsyncComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: true })));
 };
 
 var AsyncSelect = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "light" : _b, styles = _a.styles, isMulti = _a.isMulti, selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
+    var _b = _a.variant, variant = _b === void 0 ? "light" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
     var selectStyles = useMemo(function () {
         var sourceStyles = createStylesFromTheme(variant === "light" ? defaultSelectTheme : selectThemeDark);
         return styles ? mergeStyles$1(sourceStyles, styles) : sourceStyles;
     }, [variant, styles]);
-    return (createElement(AsyncComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: false })));
+    return (React.createElement(AsyncComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: false })));
 };
 
 var MultiSelect = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "light" : _b, styles = _a.styles, isMulti = _a.isMulti, selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
+    var _b = _a.variant, variant = _b === void 0 ? "light" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
     var selectStyles = useMemo(function () {
         var sourceStyles = createStylesFromTheme(variant === "light" ? defaultSelectTheme : selectThemeDark);
         return styles ? mergeStyles$1(sourceStyles, styles) : sourceStyles;
     }, [variant, styles]);
-    return (createElement(SelectComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: true })));
+    return (React.createElement(SelectComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: true })));
 };
 
 var Select = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "light" : _b, styles = _a.styles, isMulti = _a.isMulti, selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
+    var _b = _a.variant, variant = _b === void 0 ? "light" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
     var selectStyles = useMemo(function () {
         var sourceStyles = createStylesFromTheme(variant === "light" ? defaultSelectTheme : selectThemeDark);
         return styles ? mergeStyles$1(sourceStyles, styles) : sourceStyles;
     }, [variant, styles]);
-    return (createElement(SelectComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: false })));
+    return (React.createElement(SelectComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: false })));
 };
 
-var removeGroupedOptions = function (removedValue, selectedInternalOptions) {
-    return differenceWith(selectedInternalOptions, __spreadArrays(removedValue.internalOptions, [removedValue]), isEqual).map(convertInternalOptionToDropdownOption);
+var removeGroupedOptionsType = function (removedValue, selectedInternalOptions) {
+    return differenceWith(selectedInternalOptions, __spreadArray(__spreadArray([], removedValue.internalOptions, true), [removedValue], false), isEqual).map(convertInternalOptionToDropdownOption);
 };
 var removeInternalOptions = function (selectedInternalOption) { return !("internalOptions" in selectedInternalOption); };
 var removeOptionHeaders = function (selectedInternalOptions) {
@@ -330,28 +333,18 @@ var removeOptionHeaders = function (selectedInternalOptions) {
         .map(convertInternalOptionToDropdownOption);
 };
 var createOnChange = function (onChange) { return function (incomingSelectedInternalOptions, meta) {
-    var selectedInternalOptions = (function () {
-        if (!incomingSelectedInternalOptions) {
-            return [];
-        }
-        else if ("length" in incomingSelectedInternalOptions) {
-            return incomingSelectedInternalOptions;
-        }
-        else {
-            return [incomingSelectedInternalOptions];
-        }
-    })();
+    var selectedInternalOptions = incomingSelectedInternalOptions !== null && incomingSelectedInternalOptions !== void 0 ? incomingSelectedInternalOptions : [];
     switch (meta.action) {
         case "select-option":
             if (meta.option && "internalOptions" in meta.option) {
                 var selectedOptions = uniqWith(selectedInternalOptions.reduce(function (previousValue, currentValue) {
                     if ("internalOptions" in currentValue) {
-                        return __spreadArrays(previousValue, currentValue.internalOptions);
+                        return __spreadArray(__spreadArray([], previousValue, true), currentValue.internalOptions, true);
                     }
                     else {
-                        return __spreadArrays(previousValue, [
+                        return __spreadArray(__spreadArray([], previousValue, true), [
                             convertInternalOptionToDropdownOption(currentValue),
-                        ]);
+                        ], false);
                     }
                 }, []), isEqual);
                 onChange(selectedOptions, meta);
@@ -362,7 +355,7 @@ var createOnChange = function (onChange) { return function (incomingSelectedInte
             break;
         case "deselect-option":
             if (meta.option && "internalOptions" in meta.option) {
-                onChange(removeGroupedOptions(meta.option, removeOptionHeaders(selectedInternalOptions)), meta);
+                onChange(removeGroupedOptionsType(meta.option, removeOptionHeaders(selectedInternalOptions)), meta);
             }
             else {
                 onChange(removeOptionHeaders(selectedInternalOptions), meta);
@@ -371,7 +364,7 @@ var createOnChange = function (onChange) { return function (incomingSelectedInte
         case "remove-value":
         case "pop-value":
             if (meta.removedValue && "internalOptions" in meta.removedValue) {
-                onChange(removeGroupedOptions(meta.removedValue, removeOptionHeaders(selectedInternalOptions)), meta);
+                onChange(removeGroupedOptionsType(meta.removedValue, removeOptionHeaders(selectedInternalOptions)), meta);
             }
             else {
                 onChange(removeOptionHeaders(selectedInternalOptions), meta);
@@ -387,9 +380,9 @@ var createOnChange = function (onChange) { return function (incomingSelectedInte
 }; };
 var convertGroupedDropdownOptionsToInternalOptions = function (options) {
     return options.reduce(function (previousValue, currentValue) {
-        return __spreadArrays(previousValue, [
+        return __spreadArray(__spreadArray(__spreadArray([], previousValue, true), [
             convertGroupedDropdownOptionToInternalOption(currentValue)
-        ], currentValue.options.map(convertDropdownOptionToInternalOption));
+        ], false), currentValue.options.map(convertDropdownOptionToInternalOption), true);
     }, []);
 };
 var convertValueToInternalValue = function (options, values) {
@@ -418,6 +411,7 @@ var convertDropdownOptionToInternalOption = function (option) { return ({
     label: option.label,
     value: option.value,
 }); };
+// TODO: can this be done `any` other way
 var convertGroupedDropdownOptionToInternalOption = function (option) { return ({
     data: option.label,
     label: option.label,
@@ -439,21 +433,28 @@ var GroupedMultiSelect = function (_a) {
     var onChange = _a.onChange, options = _a.options, value = _a.value, _b = _a.variant, variant = _b === void 0 ? "light" : _b, formatGroupLabel = _a.formatGroupLabel, formatOptionLabel = _a.formatOptionLabel, selectProps = __rest(_a, ["onChange", "options", "value", "variant", "formatGroupLabel", "formatOptionLabel"]);
     var theme = variant === "light" ? defaultSelectTheme : selectThemeDark;
     var Option = function (props) {
-        if (props.data.internalOptions) {
-            return (createElement(components.Option, __assign({}, props),
-                createElement(Box, { alignItems: "center", justifyContent: "space-between", flexDirection: "row" },
-                    createElement(Text, { tabIndex: -1 }, formatGroupLabel ? formatGroupLabel(props.data) : props.label),
-                    props.isSelected && (createElement(Icon, { color: resolveIconColor(theme, props.isFocused), icon: faCheck, size: 12 })))));
+        var _a;
+        if ("options" in props.data) {
+            return (React.createElement(components.Option, __assign({}, props),
+                React.createElement(Box, { alignItems: "center", justifyContent: "space-between", flexDirection: "row" },
+                    React.createElement(Text, { tabIndex: -1 }, formatGroupLabel ? formatGroupLabel(props.data) : props.label),
+                    props.isSelected && (React.createElement(Icon, { color: resolveIconColor(theme, props.isFocused), icon: faCheck, size: 12 })))));
         }
-        return (createElement(components.Option, __assign({}, props),
-            createElement(Row, null,
-                createElement(Space, null),
-                createElement(Box, { alignItems: "center", justifyContent: "space-between", flexDirection: "row", flexGrow: 1 },
-                    createElement(Text, { size: "small", tabIndex: -1, color: props.isSelected ? theme.menu.selectedItemTextColor : undefined }, formatOptionLabel ? formatOptionLabel(props.data) : props.label),
-                    props.isSelected && (createElement(Icon, { color: resolveIconColor(theme, props.isFocused), icon: faCheck, size: 12 }))))));
+        return (React.createElement(components.Option, __assign({}, props),
+            React.createElement(Row, null,
+                React.createElement(Space, null),
+                React.createElement(Box, { alignItems: "center", justifyContent: "space-between", flexDirection: "row", flexGrow: 1 },
+                    React.createElement(Text, { size: "small", tabIndex: -1, color: props.isSelected ? theme.menu.selectedItemTextColor : undefined }, formatOptionLabel
+                        ? formatOptionLabel(props.data, {
+                            context: "menu",
+                            inputValue: (_a = selectProps.inputValue) !== null && _a !== void 0 ? _a : "",
+                            selectValue: props.getValue(),
+                        })
+                        : props.label),
+                    props.isSelected && (React.createElement(Icon, { color: resolveIconColor(theme, props.isFocused), icon: faCheck, size: 12 }))))));
     };
     var MultiValue = function (props) {
-        return !("internalOptions" in props.data) ? (createElement(components.MultiValue, __assign({}, props))) : null;
+        return !("internalOptions" in props.data) ? (React.createElement(components.MultiValue, __assign({}, props))) : null;
     };
     var internalValue = options
         ? convertValueToInternalValue(options, value)
@@ -461,35 +462,37 @@ var GroupedMultiSelect = function (_a) {
     var internalOptions = options
         ? convertGroupedDropdownOptionsToInternalOptions(options)
         : undefined;
-    return (createElement(MultiSelect, __assign({}, selectProps, { onChange: onChange ? createOnChange(onChange) : undefined, hideSelectedOptions: false, components: __assign(__assign({}, selectProps.components), { MultiValue: MultiValue,
-            Option: Option }), isMulti: true, options: internalOptions, value: internalValue, variant: variant })));
+    return (React.createElement(MultiSelect, __assign({}, selectProps, { onChange: onChange ? createOnChange(onChange) : undefined, hideSelectedOptions: false, components: __assign(__assign({}, selectProps.components), { MultiValue: MultiValue, Option: Option }), isMulti: true, options: internalOptions, value: internalValue, variant: variant })));
 };
 
-function CommonChipMultiSelect(_a) {
+function ChipRow(_a) {
     var value = _a.value, onValueChange = _a.onValueChange, _b = _a.noneSelectedLabel, noneSelectedLabel = _b === void 0 ? "None" : _b, children = _a.children;
-    return (createElement(Column, null,
-        createElement(Row, { flexWrap: "wrap" }, value === null || value === void 0 ? void 0 :
-            value.map(function (v) { return (createElement(Row, { key: v.value },
-                createElement(Spacing, { num: 0.5 },
-                    createElement(Chip, { label: v.label, onClickRemove: function () { var _a; return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((_a = value === null || value === void 0 ? void 0 : value.filter(function (f) { return f.value !== v.value; })) !== null && _a !== void 0 ? _a : []); } })),
-                createElement(Space, null))); }),
-            (value === null || value === void 0 ? void 0 : value.length) ? (createElement(Spacing, { num: 0.5 },
-                createElement(FlatButton, { size: "small", label: "Clear", onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([]); } }))) : (createElement(Spacing, { num: 0.5 },
-                createElement(Chip, { variant: "secondary", label: noneSelectedLabel })))),
-        createElement(Space, { num: 0.5 }),
+    return (React.createElement(Column, { flex: 1 },
+        React.createElement(Row, { flexWrap: "wrap" }, value === null || value === void 0 ? void 0 :
+            value.map(function (v) { return (React.createElement(Row, { key: v.value },
+                React.createElement(Spacing, { num: 0.5 },
+                    React.createElement(Chip, { label: v.label, onClickRemove: function () {
+                            var _a;
+                            return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((_a = value === null || value === void 0 ? void 0 : value.filter(function (f) { return f.value !== v.value; })) !== null && _a !== void 0 ? _a : []);
+                        } })),
+                React.createElement(Space, null))); }),
+            (value === null || value === void 0 ? void 0 : value.length) ? (React.createElement(Spacing, { num: 0.5 },
+                React.createElement(FlatButton, { size: "small", label: "Clear", onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([]); } }))) : (React.createElement(Spacing, { num: 0.5 },
+                React.createElement(Chip, { variant: "secondary", label: noneSelectedLabel })))),
+        React.createElement(Space, { num: 0.5 }),
         children));
 }
 
-var ChipMultiSelect = memo(function (_a) {
+var ChipMultiSelect = React.memo(function (_a) {
     var value = _a.value, onValueChange = _a.onValueChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Type to search" : _b, loading = _a.loading, inputValue = _a.inputValue, onInputChange = _a.onInputChange, _c = _a.noneSelectedLabel, noneSelectedLabel = _c === void 0 ? "None" : _c, selectProps = __rest(_a, ["value", "onValueChange", "placeholder", "loading", "inputValue", "onInputChange", "noneSelectedLabel"]);
-    return (createElement(CommonChipMultiSelect, { noneSelectedLabel: noneSelectedLabel, onValueChange: onValueChange, value: value },
-        createElement(MultiSelect, __assign({}, selectProps, { isClearable: false, value: value, onChange: onValueChange, backspaceRemovesValue: false, hideSelectedOptions: true, controlShouldRenderValue: false, placeholder: placeholder, isLoading: loading, inputValue: inputValue, onInputChange: onInputChange }))));
+    return (React.createElement(ChipRow, { noneSelectedLabel: noneSelectedLabel, onValueChange: onValueChange, value: value },
+        React.createElement(MultiSelect, __assign({}, selectProps, { isClearable: false, value: value, onChange: onValueChange, backspaceRemovesValue: false, hideSelectedOptions: true, controlShouldRenderValue: false, placeholder: placeholder, isLoading: loading, inputValue: inputValue, onInputChange: onInputChange }))));
 });
 
-var GroupedChipMultiSelect = memo(function (_a) {
+var GroupedChipMultiSelect = React.memo(function (_a) {
     var value = _a.value, onValueChange = _a.onValueChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Type to search" : _b, loading = _a.loading, inputValue = _a.inputValue, onInputChange = _a.onInputChange, _c = _a.noneSelectedLabel, noneSelectedLabel = _c === void 0 ? "None" : _c, selectProps = __rest(_a, ["value", "onValueChange", "placeholder", "loading", "inputValue", "onInputChange", "noneSelectedLabel"]);
-    return (createElement(CommonChipMultiSelect, { noneSelectedLabel: noneSelectedLabel, onValueChange: onValueChange, value: value },
-        createElement(GroupedMultiSelect, __assign({}, selectProps, { isClearable: false, value: value, onChange: onValueChange, backspaceRemovesValue: false, hideSelectedOptions: true, controlShouldRenderValue: false, placeholder: placeholder, isLoading: loading, inputValue: inputValue, onInputChange: onInputChange }))));
+    return (React.createElement(ChipRow, { noneSelectedLabel: noneSelectedLabel, onValueChange: onValueChange, value: value },
+        React.createElement(GroupedMultiSelect, __assign({}, selectProps, { isClearable: false, value: value, onChange: onValueChange, backspaceRemovesValue: false, hideSelectedOptions: true, controlShouldRenderValue: false, placeholder: placeholder, isLoading: loading, inputValue: inputValue, onInputChange: onInputChange }))));
 });
 
 var mergeStyles = function (themeStyle, userStyle) {