@eightshift/ui-components 0.0.1

package/dist/components/select/async-multi-select.js

@@ -0,0 +1,144 @@
+import { jsx } from "react/jsx-runtime";
+import { A as AsyncSelect$1 } from "../../react-select-async.esm-TFb_ZX6C.js";
+import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-CjVpCNko.js";
+import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
+import { CustomSelectDefaultMultiValueRemove, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { eightshiftSelectClasses } from "./styles.js";
+import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
+/**
+ * Multi-select menu with async loading and re-ordering.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.label] - Label of the component.
+ * @param {string} [props.help] - Help text of the component.
+ * @param {string} [props.icon] - Icon of the component.
+ * @param {string} [props.subtitle] - Subtitle of the component.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
+ * @param {boolean|{label: string, value: string, metadata: Object<string, any>?}[]>} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, fetching only happens when an user types to search.
+ * @param {Function<Promise>} props.loadOptions - Async function that returns an array of `{label: '', value: ''}`-formatted items. `loadOptions(searchText: string): Promise<{label: string, value: string, [metadata]: Array}[]>`.
+ * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.value - Current value of the select.
+ * @param {Function} props.onChange - Function to call when the value changes.
+ * @param {boolean} [props.clearable] - Whether the select is clearable.
+ * @param {boolean} [props.noSearch] - Whether the search is disabled.
+ * @param {boolean} [props.disabled] - Whether the select is disabled.
+ * @param {boolean} [props.keepMenuOpenAfterSelect] - Whether the menu stays open after an select.
+ * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
+ * @param {JSX.Element} [props.customClearIndicator] - If provided, replaces the default 'Clear all' button.
+ * @param {JSX.Element} [props.customDropdownArrow] - If provided, replaces the default dropdown arrow indicator.
+ * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`).
+ * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`).
+ * @param {JSX.Element} [props.customValueRemove] - If provided, replaces the default item remove button (react-select's `components.MultiValueRemove`.
+ * @param {JSX.Element} [props.customValueContainer] - If provided, replaces the default items container component (react-select's `components.MultiValueContainer`).
+ * @param {Function} [props.processLoadedOptions] - Allows modifying (filtering, grouping, ...) options output after the items have been dynamically fetched. Must include `label`, `value`, and `id` keys in the output, additional fields can be added as required.
+ * @param {string} [props.className] - Classes to pass to the select menu.
+ *
+ * @returns {JSX.Element} The AsyncMultiSelect component.
+ *
+ * @example
+ * const [value, setValue] = useState([]);
+ *
+ * const loadOptions = async (searchText) => {
+ * 	const response = await fetch(`https://api.example.com/items?q=${searchText}`);
+ * 	const data = await response.json();
+ *
+ * 	return data.items.map((item) => ({
+ * 		label: item.name,
+ * 		value: item.id,
+ * 	}));
+ * };
+ *
+ * <AsyncMultiSelect
+ * 	label='Select items'
+ * 	loadOptions={loadOptions}
+ * 	value={value}
+ * 	onChange={setValue}
+ * />
+ *
+ * @preserve
+ */
+const AsyncMultiSelect = (props) => {
+  const {
+    label,
+    help,
+    icon,
+    subtitle,
+    actions,
+    inline,
+    loadOptions,
+    preloadOptions = true,
+    value,
+    onChange,
+    disabled = false,
+    noSearch = false,
+    clearable = false,
+    keepMenuOpenAfterSelect = false,
+    className,
+    placeholder,
+    customMenuOption,
+    customValueRemove,
+    customValueDisplay,
+    customDropdownArrow,
+    customValueContainer,
+    customClearIndicator,
+    processLoadedOptions = (options) => options,
+    ...additionalProps
+  } = props;
+  const customLoadOptions = async (searchText) => {
+    const results = await loadOptions(searchText);
+    return processLoadedOptions((results == null ? void 0 : results.map((item) => ({ id: item.value, ...item }))) ?? []);
+  };
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      label,
+      icon,
+      subtitle,
+      actions,
+      help,
+      inline,
+      children: /* @__PURE__ */ jsx(
+        DndContext,
+        {
+          modifiers: [restrictToParentElement],
+          onDragEnd: getDragEndHandler(onChange, value),
+          children: /* @__PURE__ */ jsx(SortableContext, { items: value.map(({ id }) => id), children: /* @__PURE__ */ jsx(
+            AsyncSelect$1,
+            {
+              isMulti: true,
+              unstyled: true,
+              loadOptions: customLoadOptions,
+              defaultOptions: preloadOptions,
+              value,
+              onChange,
+              closeMenuOnSelect: !keepMenuOpenAfterSelect,
+              isClearable: clearable,
+              isSearchable: !noSearch,
+              isDisabled: disabled,
+              className,
+              placeholder,
+              classNames: eightshiftSelectClasses,
+              components: {
+                MultiValue: getMultiValue(customValueDisplay ?? components.MultiValue),
+                MultiValueContainer: customValueContainer ?? components.MultiValueContainer,
+                MultiValueRemove: getMultiValueRemove(
+                  customValueRemove ?? CustomSelectDefaultMultiValueRemove
+                ),
+                Option: customMenuOption ?? components.Option,
+                IndicatorSeparator: null,
+                DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
+                ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
+              },
+              ...additionalProps
+            }
+          ) })
+        }
+      )
+    }
+  );
+};
+export {
+  AsyncMultiSelect
+};

package/dist/components/select/async-single-select.js

@@ -0,0 +1,126 @@
+import { jsx } from "react/jsx-runtime";
+import { A as AsyncSelect$1 } from "../../react-select-async.esm-TFb_ZX6C.js";
+import { CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { eightshiftSelectClasses } from "./styles.js";
+import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
+/**
+ * Select menu with async loading.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.label] - Label of the component.
+ * @param {string} [props.help] - Help text of the component.
+ * @param {string} [props.icon] - Icon of the component.
+ * @param {string} [props.subtitle] - Subtitle of the component.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
+ * @param {boolean|{label: string, value: string, metadata: Object<string, any>?}[]>} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, fetching only happens when an user types to search.
+ * @param {Function<Promise>} props.loadOptions - Async function that returns an array of `{label: '', value: ''}`-formatted items. `loadOptions(searchText: string): Promise<{label: string, value: string, metadata: Object<string, any>?}[]>`.
+ * @param {{label: string, value: string, metadata: Object<string, any>?}} props.value - Current value of the select.
+ * @param {Function} props.onChange - Function to call when the value changes.
+ * @param {boolean} [props.clearable=false] - Whether the select is clearable.
+ * @param {boolean} [props.noSearch=false] - Whether the search is disabled.
+ * @param {boolean} [props.disabled=false] - Whether the select is disabled.
+ * @param {boolean} [props.keepMenuOpenAfterSelect=false] - Whether the menu stays open after an select.
+ * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
+ * @param {JSX.Element} [props.customDropdownIndicator] - If provided, replaces the default dropdown arrow indicator.
+ * @param {JSX.Element} [props.customClearIndicator] - If provided and `noClear` is `false`, replaces the default 'Clear all' button.
+ * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`).
+ * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.SingleValue`).
+ * @param {Function} [props.processLoadedOptions] - Allows modifying (filtering, grouping, ...) options output after the items have been dynamically fetched. Must include `label`, `value`, and `id` keys in the output, additional fields can be added as required.
+ * @param {string} props.className - Classes to pass to the select menu.
+ *
+ * @returns {JSX.Element} The AsyncSelect component.
+ *
+ * @example
+ * const [value, setValue] = useState(null);
+ *
+ * const loadOptions = async (searchText) => {
+ * 	const response = await fetch(`https://api.example.com/items?q=${searchText}`);
+ * 	const data = await response.json();
+ *
+ * 	return data.items.map((item) => ({
+ * 		label: item.name,
+ * 		value: item.id,
+ * 	}));
+ * };
+ *
+ * <AsyncMultiSelect
+ * 	label='Select items'
+ * 	loadOptions={loadOptions}
+ * 	value={value}
+ * 	onChange={setValue}
+ * />
+ *
+ * @preserve
+ */
+const AsyncSelect = (props) => {
+  const {
+    label,
+    help,
+    icon,
+    subtitle,
+    actions,
+    inline,
+    loadOptions,
+    preloadOptions = true,
+    value,
+    onChange,
+    noSearch = false,
+    disabled = false,
+    clearable = false,
+    keepMenuOpenAfterSelect = false,
+    className,
+    placeholder,
+    customMenuOption,
+    customValueDisplay,
+    customDropdownArrow,
+    customClearIndicator,
+    processLoadedOptions = (options) => options,
+    ...additionalProps
+  } = props;
+  const customLoadOptions = async (searchText) => {
+    const results = await loadOptions(searchText);
+    return processLoadedOptions((results == null ? void 0 : results.map((item) => ({ id: item.value, ...item }))) ?? []);
+  };
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      label,
+      icon,
+      subtitle,
+      actions,
+      help,
+      inline,
+      children: /* @__PURE__ */ jsx(
+        AsyncSelect$1,
+        {
+          unstyled: true,
+          loadOptions: customLoadOptions,
+          defaultOptions: preloadOptions,
+          value,
+          onChange,
+          closeMenuOnSelect: !keepMenuOpenAfterSelect,
+          isClearable: clearable,
+          isSearchable: !noSearch,
+          isDisabled: disabled,
+          className,
+          placeholder,
+          classNames: eightshiftSelectClasses,
+          components: {
+            Option: customMenuOption ?? components.Option,
+            SingleValue: customValueDisplay ?? components.SingleValue,
+            IndicatorSeparator: null,
+            DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
+            ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
+          },
+          ...additionalProps
+        }
+      )
+    }
+  );
+};
+export {
+  AsyncSelect
+};

package/dist/components/select/custom-select-default-components.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { icons } from "../../icons/icons.js";
+import { classnames } from "../../utilities/classnames.js";
+import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
+/**
+ * Default dropdown indicator for CustomSelect.
+ *
+ * @param {import('react-select').DropdownIndicatorProps} props - components.DropdownIndicator props.
+ *
+ * @preserve
+ */
+const CustomSelectDefaultDropdownIndicator = (props) => {
+  return /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props, children: React__default.cloneElement(icons.dropdownCaretAlt, {
+    className: classnames(props.selectProps.menuIsOpen && "-es-uic-scale-y-100 ")
+  }) });
+};
+/**
+ * Default clear indicator for CustomSelect.
+ *
+ * @param {import('react-select').ClearIndicatorProps} props - components.DropdownIndicator props.
+ *
+ * @preserve
+ */
+const CustomSelectDefaultClearIndicator = (props) => /* @__PURE__ */ jsx(components.ClearIndicator, { ...props, children: icons.clear });
+/**
+ * Default multiple value remove element for CustomSelect.
+ *
+ * @param {import('react-select').MultiValueRemoveProps} props - components.MultiValueRemove props.
+ *
+ * @preserve
+ */
+const CustomSelectDefaultMultiValueRemove = (props) => /* @__PURE__ */ jsx(components.MultiValueRemove, { ...props, children: React__default.cloneElement(icons.clear, { className: "es-uic-size-4" }) });
+export {
+  CustomSelectDefaultClearIndicator,
+  CustomSelectDefaultDropdownIndicator,
+  CustomSelectDefaultMultiValueRemove
+};

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

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import { g, a, b } from "../../multi-select-components-CjVpCNko.js";
+import "../../utilities/classnames.js";
+export {
+  g as getDragEndHandler,
+  a as getMultiValue,
+  b as getMultiValueRemove
+};

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

@@ -0,0 +1,134 @@
+import { jsx } from "react/jsx-runtime";
+import { S as StateManagedSelect$1 } from "../../react-select.esm-BjRWqf0E.js";
+import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-CjVpCNko.js";
+import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
+import { CustomSelectDefaultMultiValueRemove, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
+import { getValue, customOnChange } from "./shared.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { eightshiftSelectClasses } from "./styles.js";
+import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
+/**
+ * Multi-select menu with re-orderable items.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.label] - Label of the component.
+ * @param {string} [props.help] - Help text of the component.
+ * @param {string} [props.icon] - Icon of the component.
+ * @param {string} [props.subtitle] - Subtitle of the component.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
+ * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.options - Options to display in the select. `[{ label: string, value: string }]`.
+ * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.value - Current value of the select.
+ * @param {Function} props.onChange - Function to call when the value changes.
+ * @param {boolean} [props.simpleValue=false] - If `true`, instead of using a `{label: '', value: ''}` value type, a string is used (just the value).
+ * @param {boolean} [props.clearable] - Whether the select is clearable.
+ * @param {boolean} [props.noSearch] - Whether the search is disabled.
+ * @param {boolean} [props.disabled] - Whether the select is disabled.
+ * @param {boolean} [props.keepMenuOpenAfterSelect] - Whether the menu stays open after an select.
+ * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
+ * @param {JSX.Element} [props.customClearIndicator] - If provided, replaces the default 'Clear all' button.
+ * @param {JSX.Element} [props.customDropdownArrow] - If provided, replaces the default dropdown arrow indicator.
+ * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`).
+ * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`).
+ * @param {JSX.Element} [props.customValueRemove] - If provided, replaces the default item remove button (react-select's `components.MultiValueRemove`.
+ * @param {JSX.Element} [props.customValueContainer] - If provided, replaces the default items container component (react-select's `components.MultiValueContainer`).
+ * @param {string} [props.className] - Classes to pass to the select menu.
+ *
+ * @returns {JSX.Element} The MultiSelect component.
+ *
+ * @example
+ * const [value, setValue] = useState([]);
+ *
+ * const options = [
+ * 	{ label: 'Option 1', value: 'option-1' },
+ * 	{ label: 'Option 2', value: 'option-2' },
+ * 	{ label: 'Option 3', value: 'option-3' },
+ * ];
+ *
+ * <MultiSelect
+ * 	label='Select items'
+ * 	options={loadOptions}
+ * 	value={value}
+ * 	onChange={setValue}
+ * />
+ *
+ * @preserve
+ */
+const MultiSelect = (props) => {
+  const {
+    label,
+    help,
+    icon,
+    subtitle,
+    actions,
+    inline,
+    value,
+    onChange,
+    options,
+    simpleValue = false,
+    disabled = false,
+    noSearch = false,
+    clearable = false,
+    keepMenuOpenAfterSelect = false,
+    placeholder,
+    customClearIndicator,
+    customDropdownArrow,
+    customMenuOption,
+    customValueDisplay,
+    customValueRemove,
+    customValueContainer,
+    className,
+    ...additionalProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      label,
+      icon,
+      subtitle,
+      actions,
+      help,
+      inline,
+      children: /* @__PURE__ */ jsx(
+        DndContext,
+        {
+          modifiers: [restrictToParentElement],
+          onDragEnd: getDragEndHandler(onChange, value),
+          children: /* @__PURE__ */ jsx(SortableContext, { items: value.map(({ id }) => id), children: /* @__PURE__ */ jsx(
+            StateManagedSelect$1,
+            {
+              isMulti: true,
+              unstyled: true,
+              options: options.map((item) => ({ id: item.value, ...item })),
+              value: getValue(simpleValue, value, options),
+              onChange: (v) => customOnChange(simpleValue, v, onChange),
+              closeMenuOnSelect: !keepMenuOpenAfterSelect,
+              isClearable: clearable,
+              isSearchable: !noSearch,
+              isDisabled: disabled,
+              className,
+              placeholder,
+              classNames: eightshiftSelectClasses,
+              components: {
+                MultiValue: getMultiValue(customValueDisplay ?? components.MultiValue),
+                MultiValueContainer: customValueContainer ?? components.MultiValueContainer,
+                MultiValueRemove: getMultiValueRemove(
+                  customValueRemove ?? CustomSelectDefaultMultiValueRemove
+                ),
+                Option: customMenuOption ?? components.Option,
+                IndicatorSeparator: null,
+                DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
+                ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
+              },
+              ...additionalProps
+            }
+          ) })
+        }
+      )
+    }
+  );
+};
+export {
+  MultiSelect
+};

package/dist/components/select/react-select-component-wrappers.js

@@ -0,0 +1,90 @@
+import { jsx } from "react/jsx-runtime";
+import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
+/**
+ * Custom dropdown indicator for CustomSelect.
+ *
+ * (a wrapper for `components.DropdownIndicator` from `react-select`)
+ *
+ * @param {import('react-select').DropdownIndicatorProps} props - components.DropdownIndicator props.
+ *
+ * @preserve
+*/
+const RSDropdownIndicator = (props) => /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props });
+/**
+ * Custom value display for CustomSelect.
+ *
+ * (a wrapper for `components.SingleValue` from `react-select`)
+ *
+ * @param {import('react-select').SingleValueProps} props - components.SingleValue props.
+ *
+ * @preserve
+*/
+const RSSingleValue = (props) => /* @__PURE__ */ jsx(components.SingleValue, { ...props });
+/**
+ * Custom value display for multi item select.
+ *
+ * (a wrapper for `components.MultiValue` from `react-select`)
+ *
+ * @param {import('react-select').MultiValueProps} props - components.SingleValue props.
+ *
+ * @preserve
+*/
+const RSMultiValue = (props) => /* @__PURE__ */ jsx(components.MultiValue, { ...props });
+/**
+ * Custom option for CustomSelect.
+ *
+ * (a wrapper for `components.Option` from `react-select`)
+ *
+ * @param {import('react-select').OptionProps} props - components.Option props.
+ *
+ * @preserve
+*/
+const RSOption = (props) => /* @__PURE__ */ jsx(components.Option, { ...props });
+/**
+ * Custom multiple value remove button for CustomSelect.
+ *
+ * (a wrapper for `components.MultiValueRemove` from `react-select`)
+ *
+ * @param {import('react-select').MultiValueRemoveProps} props - components.MultiValueRemove props.
+ *
+ * @preserve
+*/
+const RSMultiValueRemove = (props) => /* @__PURE__ */ jsx(components.MultiValueRemove, { ...props });
+/**
+ * Custom multiple value display container for CustomSelect.
+ *
+ * (a wrapper for `components.MultiValueContainer` from `react-select`)
+ *
+ * @param {import('react-select').MultiValueGenericProps} props - components.MultiValueContainer props.
+ *
+ * @preserve
+*/
+const RSMultiValueContainer = (props) => /* @__PURE__ */ jsx(components.MultiValueContainer, { ...props });
+/**
+ * Custom multiple value display for CustomSelect.
+ *
+ * (a wrapper for `components.MultiValueLabel` from `react-select`)
+ *
+ * @param {import('react-select').MultiValueGenericProps} props - components.MultiValueLabel props.
+ *
+ * @preserve
+*/
+const RSMultiValueLabel = (props) => /* @__PURE__ */ jsx(components.MultiValueLabel, { ...props });
+/**
+ * Default clear indicator for CustomSelect.
+ *
+ * @param {import('react-select').ClearIndicatorProps} props - components.ClearIndicator props.
+ *
+ * @preserve
+*/
+const RSClearIndicator = (props) => /* @__PURE__ */ jsx(components.ClearIndicator, { ...props });
+export {
+  RSClearIndicator,
+  RSDropdownIndicator,
+  RSMultiValue,
+  RSMultiValueContainer,
+  RSMultiValueLabel,
+  RSMultiValueRemove,
+  RSOption,
+  RSSingleValue
+};

package/dist/components/select/shared.js

@@ -0,0 +1,45 @@
+/**
+ * Handles getting the current value.
+ *
+ * @param {boolean} simpleValue - Whether `simpleValue` is set.
+ * @param {string|{label: string, value: string, metadata: Object<string, any>[]}} value - Current value.
+ * @param {{label: string, value: string}[]} options - Options passed to the component.
+ *
+ * @returns Appropriate output for the given input combination.
+ *
+ * @preserve
+ */
+const getValue = (simpleValue, value, options) => {
+  if (!simpleValue) {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value.map((value2) => options == null ? void 0 : options.find(({ value: itemValue }) => itemValue === value2));
+  }
+  return options == null ? void 0 : options.find(({ value: itemValue }) => itemValue === value);
+};
+/**
+ * Handles the `onChange` callback.
+ *
+ * @param {boolean} simpleValue - Whether `simpleValue` is set.
+ * @param {string|{label: string, value: string, metadata: Object<string, any>[]}} newValue - The new value to be set.
+ * @param {Function} - onChange The `onChange` callback passed to the component.
+ * @returns {void}
+ *
+ * @preserve
+ */
+const customOnChange = (simpleValue, newValue, onChange) => {
+  if (!simpleValue) {
+    onChange(newValue);
+    return;
+  }
+  if (Array.isArray(newValue)) {
+    onChange(newValue.map((item) => item == null ? void 0 : item.value));
+    return;
+  }
+  onChange(newValue == null ? void 0 : newValue.value);
+};
+export {
+  customOnChange,
+  getValue
+};