@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTSelect/versions/V1/README.md

@@ -0,0 +1,263 @@
+# UTSelect
+
+## Description
+
+`UTSelect` is a customizable dropdown select component, built on top of Material UI's `Autocomplete`. It allows users to select single or multiple options from a provided list with features like search, dynamic filtering, and adornments (prefixes, suffixes, icons, and badges).
+
+## Props
+
+| Name                  | Type                       | Default                                | Description                                                                                                                                  |
+| --------------------- | -------------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| action                | object                     |                                        | Action object containing `Icon`, `onClick`, and `size` for the action button.                                                                |
+| actions               | array                      |                                        | Array of action buttons to display in the title area.                                                                                        |
+| alwaysShowPlaceholder | bool                       | true                                   | Determines if the placeholder should always be shown, even when there is a value.                                                            |
+| autocompleteProps     | object                     | {}                                     | Additional props to pass to the underlying Material-UI Autocomplete component.                                                               |
+| className             | string                     |                                        | Additional CSS class name for the component container.                                                                                       |
+| clearable             | bool                       | true                                   | Determines whether a button to clear the current selection should be shown.                                                                  |
+| dataTestId            | string                     |                                        | Test ID for the main input component.                                                                                                        |
+| disabled              | bool                       | false                                  | Disables the select input.                                                                                                                   |
+| disableFilterOptions  | bool                       | false                                  | Disables option filtering, showing all options even when typing in the search field.                                                         |
+| error                 | string                     |                                        | Error message to display below the input field.                                                                                              |
+| errorDataTestId       | string                     |                                        | Test ID for the error validation component.                                                                                                  |
+| freeWidth             | bool                       | false                                  | Allows the dropdown to have a free width instead of matching the input width.                                                                |
+| helpText              | string                     |                                        | Help text displayed below the input field.                                                                                                   |
+| icon                  | string                     |                                        | Icon name to display in the input field.                                                                                                     |
+| inputSize             | string                     |                                        | Size of the input field. One of: `small`, `large`.                                                                                           |
+| itemDataTestId        | string                     |                                        | Test ID for individual option items in the dropdown.                                                                                         |
+| listDataTestId        | string                     |                                        | Test ID for the dropdown list container.                                                                                                     |
+| listProps             | object                     | {}                                     | Additional props to pass to the dropdown list component.                                                                                     |
+| multiple              | bool                       | false                                  | Allows multiple selection if true.                                                                                                           |
+| noMatchesText         | string                     | 'No hay coincidencias con tu búsqueda' | Text to display when no matches are found in the search.                                                                                     |
+| noOptionsText         | string                     | 'No hay opciones disponibles'          | Text to display when there are no options available.                                                                                         |
+| onChange              | func                       | () => {}                               | Function to call when the selected value(s) change.                                                                                          |
+| onChangeSearchTerm    | func                       | () => {}                               | Function to call when the search term changes.                                                                                               |
+| options               | array                      | []                                     | Array of options to be displayed in the dropdown. Each option is an object with `name`, `value`, and optionally `category` and `subOptions`. |
+| placeholder           | string                     |                                        | Placeholder text for the select field.                                                                                                       |
+| prefix                | string                     |                                        | Text to display as a prefix inside the input field.                                                                                          |
+| readOnly              | bool                       | false                                  | Makes the select field read-only, preventing changes but allowing the dropdown to open.                                                      |
+| required              | bool                       | false                                  | Indicates if the select field is required.                                                                                                   |
+| suffix                | string                     |                                        | Text to display as a suffix inside the input field.                                                                                          |
+| title                 | string                     |                                        | Title for the select field, displayed above the input.                                                                                       |
+| titleVariant          | string                     | 'large'                                | Variant for the title display. Uses `TITLE_VARIANTS` constants.                                                                              |
+| value                 | oneOfType([string, array]) | null                                   | The value of the input field. It can be a string for single selection or an array for multiple selection.                                    |
+| variant               | string                     | 'select'                               | Determines the visual variant, either `select` or `picker`.                                                                                  |
+| withAutoReset         | bool                       | true                                   | Automatically resets the select value if the current selection is no longer available in the options.                                        |
+
+### Option Object
+
+The `options` prop is an array of objects, each representing an option:
+
+| Name       | Type           | Description                                          |
+| ---------- | -------------- | ---------------------------------------------------- |
+| name       | string         | Label to display for the option.                     |
+| value      | string, number | Value of the option.                                 |
+| category   | string         | Optional category for grouping options.              |
+| subOptions | array          | Optional nested options for hierarchical structures. |
+
+### Action Object
+
+The `action` prop accepts an object with the following properties:
+
+| Name    | Type   | Description                    |
+| ------- | ------ | ------------------------------ |
+| Icon    | string | Icon name to display.          |
+| onClick | func   | Function to call when clicked. |
+| size    | string | Size of the action button.     |
+
+## Features
+
+### `withAutoReset`
+
+`withAutoReset` is a prop that controls the behavior of the `UTSelect` component when the selected value is no longer available in the current options. This prop ensures that the selected value resets to `null` if the chosen option is no longer valid. When an auto-reset occurs, the options are re-sorted to ensure the list is up-to-date with the current selections.
+
+### Option Sorting Behavior
+
+The `UTSelect` component sorts the options in a way that selected values are displayed at the top. For single selections, this sorting happens immediately after a selection is made. For multiple selections, the sorting occurs when the dropdown gains focus (opens) or loses focus (closes). This ensures that the selected options are prominently displayed when interacting with the dropdown, without disrupting the user's ongoing selection process.
+
+### `multiple` Selection Mode
+
+When using the `multiple` prop, the dropdown stays open after selecting an option, allowing users to select more items without the dropdown closing each time. The sorting behavior in this mode is controlled to ensure that reordering of options happens only when the dropdown gains or loses focus, preventing unwanted changes to the displayed options while the user is actively selecting items.
+
+### Category-based Organization
+
+Options can be organized into categories using the `category` property. When categories are present, options are automatically sorted by category, and selected options are moved to the top of their respective categories.
+
+### Search and Filtering
+
+The component provides built-in search functionality that filters options based on the `name` property. The `disableFilterOptions` prop can be used to disable this filtering behavior, showing all options regardless of the search term.
+
+## Adornments
+
+`UTSelect` allows for additional adornments, such as prefixes, suffixes, and custom action buttons. The `prefix` and `suffix` props can be used to display text or icons inside the input. You can also add a custom action button using the `action` prop.
+
+### Left Adornments
+
+- Error icon (automatically shown when there's an error)
+- Badge (shows count for multiple selections)
+- Prefix text
+- Custom icon (via `icon` prop)
+
+### Right Adornments
+
+- Suffix text
+- Clear button (when `clearable` is true and there's a value)
+- Dropdown chevron icon
+- Custom action button
+
+## Usage Examples
+
+### Basic Single Selection
+
+```jsx
+import React, { useState } from 'react';
+import UTSelect from './UTSelect';
+
+const options = [
+  { name: 'Option 1', value: '1' },
+  { name: 'Option 2', value: '2' },
+  { name: 'Option 3', value: '3' },
+  { name: 'Option 4', value: '4' }
+];
+
+const BasicExample = () => {
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  return (
+    <div style={{ padding: 20 }}>
+      <UTSelect
+        title="Select an Option"
+        noMatchesText="No matches found"
+        onChange={setSelectedOption}
+        options={options}
+        placeholder="Choose an option"
+        clearable
+        value={selectedOption}
+        variant="select"
+      />
+      <p>Selected Option: {selectedOption}</p>
+    </div>
+  );
+};
+```
+
+### Multiple Selection with Categories
+
+```jsx
+import React, { useState } from 'react';
+import UTSelect from './UTSelect';
+
+const categorizedOptions = [
+  { name: 'Apple', value: 'apple', category: 'Fruits' },
+  { name: 'Banana', value: 'banana', category: 'Fruits' },
+  { name: 'Carrot', value: 'carrot', category: 'Vegetables' },
+  { name: 'Broccoli', value: 'broccoli', category: 'Vegetables' },
+  { name: 'Chicken', value: 'chicken', category: 'Proteins' },
+  { name: 'Fish', value: 'fish', category: 'Proteins' }
+];
+
+const MultipleSelectionExample = () => {
+  const [selectedItems, setSelectedItems] = useState([]);
+
+  return (
+    <div style={{ padding: 20 }}>
+      <UTSelect
+        title="Select Multiple Items"
+        multiple
+        onChange={setSelectedItems}
+        options={categorizedOptions}
+        placeholder="Choose multiple items"
+        value={selectedItems}
+        helpText="You can select multiple items from different categories"
+      />
+      <p>Selected Items: {selectedItems.join(', ')}</p>
+    </div>
+  );
+};
+```
+
+### With Custom Action and Adornments
+
+```jsx
+import React, { useState } from 'react';
+import UTSelect from './UTSelect';
+
+const AdvancedExample = () => {
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  const customAction = {
+    Icon: 'IconPlus',
+    onClick: () => console.log('Custom action clicked'),
+    size: 'small'
+  };
+
+  return (
+    <div style={{ padding: 20 }}>
+      <UTSelect
+        title="Advanced Select"
+        onChange={setSelectedOption}
+        options={options}
+        placeholder="Choose an option"
+        prefix="$"
+        suffix="USD"
+        action={customAction}
+        error="This field is required"
+        helpText="This is a required field with custom adornments"
+        required
+        variant="picker"
+      />
+    </div>
+  );
+};
+```
+
+### Read-only Mode
+
+```jsx
+import React from 'react';
+import UTSelect from './UTSelect';
+
+const ReadOnlyExample = () => {
+  return (
+    <div style={{ padding: 20 }}>
+      <UTSelect
+        title="Read-only Select"
+        options={options}
+        value="1"
+        readOnly
+        helpText="This field cannot be modified"
+      />
+    </div>
+  );
+};
+```
+
+### With Search Term Handling
+
+```jsx
+import React, { useState } from 'react';
+import UTSelect from './UTSelect';
+
+const SearchExample = () => {
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const handleSearchChange = term => {
+    setSearchTerm(term);
+    console.log('Search term changed:', term);
+  };
+
+  return (
+    <div style={{ padding: 20 }}>
+      <UTSelect
+        title="Searchable Select"
+        onChange={setSelectedOption}
+        onChangeSearchTerm={handleSearchChange}
+        options={options}
+        placeholder="Search and select..."
+        value={selectedOption}
+      />
+      <p>Current search term: {searchTerm}</p>
+    </div>
+  );
+};
+```

package/dist/esm/components/UTSelect/versions/V1/components/InputComponent/index.js

@@ -0,0 +1,98 @@
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import { arrayOf, bool, func, instanceOf, object, oneOfType, shape, string } from 'prop-types';
+import UTBaseInputField from '../../../../../UTBaseInputField';
+const InputComponent = _ref => {
+  let {
+    alwaysShowPlaceholder,
+    dataTestId,
+    disabled,
+    error,
+    inputSize,
+    inputRef,
+    leftAdornments,
+    onBlur,
+    onChange,
+    onFocus,
+    params,
+    placeholder,
+    readOnly,
+    rightAdornments,
+    value,
+    variant
+  } = _ref;
+  const {
+    InputProps: {
+      startAdornment,
+      endAdornment,
+      className,
+      ...restInputProps
+    },
+    inputProps: {
+      onBlur: paramsOnBlur,
+      onChange: paramsOnChange,
+      onFocus: paramsOnFocus,
+      value: paramsValue,
+      ...restInputPropsFromField
+    },
+    ...restParams
+  } = params;
+  const modifiedParams = {
+    ...restParams,
+    InputProps: restInputProps,
+    inputProps: restInputPropsFromField
+  };
+  const fieldVariant = variant === 'picker' ? 'transparent' : 'white';
+  return /*#__PURE__*/React.createElement(UTBaseInputField, {
+    alwaysShowPlaceholder: alwaysShowPlaceholder,
+    dataTestId: dataTestId,
+    disabled: disabled,
+    error: error,
+    inputSize: inputSize,
+    inputRef: inputRef,
+    leftAdornments: leftAdornments,
+    muiProps: modifiedParams,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    rightAdornments: rightAdornments,
+    value: value,
+    variant: fieldVariant
+  });
+};
+InputComponent.propTypes = {
+  alwaysShowPlaceholder: bool,
+  dataTestId: string,
+  disabled: bool,
+  error: string,
+  inputSize: string,
+  inputRef: oneOfType([func, shape({
+    current: instanceOf(Element)
+  })]),
+  leftAdornments: arrayOf(shape({
+    name: string,
+    props: object
+  })),
+  onBlur: func,
+  onChange: func,
+  onFocus: func,
+  params: shape({
+    InputProps: object,
+    inputProps: shape({
+      onChange: func,
+      onBlur: func,
+      onFocus: func
+    })
+  }),
+  placeholder: string,
+  readOnly: bool,
+  rightAdornments: arrayOf(shape({
+    name: string,
+    props: object
+  })),
+  value: string,
+  variant: string
+};
+export default InputComponent;

package/dist/esm/components/UTSelect/versions/V1/components/ListboxComponent/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_MAX_HEIGHT = 260;

package/dist/esm/components/UTSelect/versions/V1/components/ListboxComponent/index.js

@@ -0,0 +1,62 @@
+import isEmpty from 'lodash/isEmpty';
+import React, { useMemo } from 'react';
+import ScrollBar from 'react-perfect-scrollbar';
+import { arrayOf, bool, func, oneOfType, shape, string, number } from 'prop-types';
+import isFinite from 'lodash/isFinite';
+import UTLabel from '../../../../../UTLabel';
+import UTCheckList from '../../../../../UTCheckList';
+import styles from './styles.module.scss';
+import { DEFAULT_MAX_HEIGHT } from './constants';
+const ListboxComponent = _ref => {
+  let {
+    dataTestId,
+    filteredOptions,
+    handleSelectionChange,
+    horizontalSpacing,
+    itemDataTestId,
+    maxHeight = DEFAULT_MAX_HEIGHT,
+    multiple,
+    noMatchesText,
+    value,
+    verticalSpacing
+  } = _ref;
+  const hasNoOptions = useMemo(() => isEmpty(filteredOptions), [filteredOptions]);
+  const maxHeightValid = useMemo(() => isFinite(maxHeight) ? maxHeight : DEFAULT_MAX_HEIGHT, [maxHeight]);
+  return hasNoOptions ? /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    className: styles.noOptionsLabel
+  }, noMatchesText) : /*#__PURE__*/React.createElement(ScrollBar, {
+    style: {
+      maxHeight: maxHeightValid
+    }
+  }, /*#__PURE__*/React.createElement(UTCheckList, {
+    dataTestId: dataTestId,
+    horizontalSpacing: horizontalSpacing,
+    isSimple: !multiple,
+    itemDataTestId: itemDataTestId,
+    onChange: handleSelectionChange,
+    options: filteredOptions,
+    reversed: false,
+    showSelectAll: false,
+    value: multiple ? value : [value],
+    variant: "button",
+    version: "V1",
+    verticalSpacing: verticalSpacing
+  }));
+};
+ListboxComponent.propTypes = {
+  dataTestId: string,
+  filteredOptions: arrayOf(shape({
+    name: string,
+    value: oneOfType([string, number])
+  })),
+  handleSelectionChange: func,
+  horizontalSpacing: string,
+  itemDataTestId: string,
+  maxHeight: number,
+  multiple: bool,
+  noMatchesText: string,
+  value: oneOfType([arrayOf(oneOfType([string, number])), string, number]),
+  verticalSpacing: string
+};
+export default ListboxComponent;

package/dist/esm/components/UTSelect/versions/V1/components/ListboxComponent/styles.module.scss

@@ -0,0 +1,3 @@
+.noOptionsLabel {
+  text-align: center;
+}

package/dist/esm/components/UTSelect/versions/V1/index.js

@@ -0,0 +1,254 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import clone from 'lodash/clone';
+import React, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { arrayOf, bool, func, number, oneOfType, shape, string, object } from 'prop-types';
+import { Autocomplete } from '@material-ui/lab';
+import UTFieldLabel from '../../../UTFieldLabel';
+import UTLabel from '../../../UTLabel';
+import UTPaper from '../../../UTPaper';
+import UTValidation from '../../../UTValidation';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+import { TITLE_VARIANTS } from '../../../../constants/inputs';
+import { buttonTypes } from '../../../../types/buttonTypes';
+import InputComponent from './components/InputComponent';
+import ListboxComponent from './components/ListboxComponent';
+import styles from './styles.module.scss';
+import { getLeftAdornments, getRightAdornments, shouldReset, getDisplayValue, sortOptions } from './utils';
+const UTSelect = _ref => {
+  let {
+    action,
+    actions: titleActions,
+    alwaysShowPlaceholder = true,
+    autocompleteProps = {},
+    className,
+    clearable = true,
+    dataTestId,
+    disabled,
+    disableFilterOptions = false,
+    error,
+    errorDataTestId,
+    freeWidth = false,
+    helpText,
+    icon,
+    inputSize,
+    itemDataTestId,
+    listDataTestId,
+    listProps = {},
+    multiple = false,
+    noMatchesText = 'No hay coincidencias con tu búsqueda',
+    noOptionsText = 'No hay opciones disponibles',
+    onChange = () => {},
+    onChangeSearchTerm = () => {},
+    options = [],
+    placeholder,
+    prefix,
+    readOnly,
+    required,
+    suffix,
+    title,
+    titleVariant = TITLE_VARIANTS.large,
+    value = multiple ? [] : null,
+    variant = 'select',
+    withAutoReset = true
+  } = _ref;
+  const optionsSortedByCategory = useMemo(() => {
+    if (!options || options.length === 0) return [];
+    const clonedOptions = clone(options).map(option => ({
+      ...option,
+      name: "".concat(option.name)
+    }));
+    const categoryOrder = new Map();
+    clonedOptions.forEach(option => {
+      if (!categoryOrder.has(option.category)) categoryOrder.set(option.category, categoryOrder.size);
+    });
+    return clonedOptions.sort((a, b) => categoryOrder.get(a.category) - categoryOrder.get(b.category));
+  }, [options]);
+  const [isPopperOpen, setIsPopperOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState(getDisplayValue(value, optionsSortedByCategory, multiple));
+  const [showClearButton, setShowClearButton] = useState(!!searchTerm);
+  const [sortedOptions, setSortedOptions] = useState(optionsSortedByCategory);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (withAutoReset && shouldReset(value, optionsSortedByCategory, multiple)) {
+      onChange(null);
+      setSortedOptions(sortOptions(optionsSortedByCategory, null, multiple));
+    }
+  }, [multiple, onChange, optionsSortedByCategory, value, withAutoReset]);
+  useEffect(() => {
+    if (!isPopperOpen) {
+      const displayValue = getDisplayValue(value, optionsSortedByCategory, multiple);
+      setSearchTerm(displayValue);
+      setShowClearButton(displayValue);
+    }
+  }, [value, optionsSortedByCategory, multiple, isPopperOpen]);
+  useEffect(() => {
+    if (isPopperOpen) {
+      setSortedOptions(sortOptions(optionsSortedByCategory, value, multiple));
+    }
+  }, [optionsSortedByCategory]);
+  useEffect(() => {
+    setSortedOptions(sortOptions(optionsSortedByCategory, value, multiple));
+  }, []);
+  useEffect(() => {
+    if (isPopperOpen) setSortedOptions(sortOptions(optionsSortedByCategory, value, multiple));
+  }, [isPopperOpen]);
+  const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
+  const filteredOptions = useMemo(() => disableFilterOptions ? sortedOptions : sortedOptions.filter(option => "".concat(option.name).toLowerCase().includes(searchTerm.toLowerCase())), [sortedOptions, searchTerm, disableFilterOptions]);
+  const handleSearchChange = useCallback(searchValue => {
+    onChangeSearchTerm === null || onChangeSearchTerm === void 0 || onChangeSearchTerm(searchValue);
+    setSearchTerm(searchValue);
+  }, [onChangeSearchTerm]);
+  const clearSearchInputValue = useCallback(inputValue => {
+    setIsPopperOpen(false);
+    const displayValue = getDisplayValue(inputValue, optionsSortedByCategory, multiple);
+    handleSearchChange(displayValue);
+    setShowClearButton(displayValue !== '');
+  }, [getDisplayValue, optionsSortedByCategory, multiple, handleSearchChange]);
+  const handleSelectionChange = newValues => {
+    const selectedValue = multiple ? newValues : newValues.length > 0 ? newValues[0] : '';
+    onChange(selectedValue);
+    if (!multiple) {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
+      clearSearchInputValue(selectedValue);
+    }
+  };
+  const handleInputFocus = () => {
+    setShowClearButton(false);
+    handleSearchChange('');
+    setIsPopperOpen(true);
+  };
+  const handleInputBlur = () => {
+    clearSearchInputValue(value);
+  };
+  const handleClearSelection = () => {
+    const clearedValue = multiple ? [] : null;
+    onChange(clearedValue);
+    handleSearchChange('');
+    setShowClearButton(false);
+    setIsPopperOpen(false);
+  };
+  const leftAdornments = useMemo(() => getLeftAdornments({
+    error,
+    multiple,
+    value,
+    prefix,
+    icon
+  }), [multiple, value, prefix, icon]);
+  const rightAdornments = useMemo(() => getRightAdornments({
+    action,
+    clearable,
+    disabled,
+    handleClearSelection,
+    readOnly,
+    showClearButton,
+    suffix,
+    variant
+  }), [suffix, showClearButton, clearable, disabled, action, handleClearSelection, variant]);
+  const InputComponentToRender = useMemo(() => params => /*#__PURE__*/React.createElement(InputComponent, {
+    alwaysShowPlaceholder: alwaysShowPlaceholder,
+    dataTestId: dataTestId,
+    disabled: disabled,
+    error: error,
+    inputSize: inputSize,
+    inputRef: inputRef,
+    leftAdornments: leftAdornments,
+    onBlur: handleInputBlur,
+    onChange: handleSearchChange,
+    onFocus: handleInputFocus,
+    params: params,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    rightAdornments: rightAdornments,
+    value: searchTerm,
+    variant: variant
+  }), [alwaysShowPlaceholder, disabled, error, handleInputBlur, handleInputFocus, leftAdornments, placeholder, rightAdornments, searchTerm]);
+  const listBoxProps = useMemo(() => ({
+    dataTestId: listDataTestId,
+    filteredOptions,
+    handleSelectionChange,
+    itemDataTestId,
+    multiple,
+    noMatchesText,
+    value,
+    ...listProps
+  }), [filteredOptions, handleSelectionChange, multiple, noMatchesText, value, listProps]);
+  const noOptionsTextComponent = /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.noOptionsLabel,
+    colorTheme: "gray"
+  }, noOptionsText);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(className)
+  }, title && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    actions: titleActions,
+    required: required,
+    size: titleVariant
+  }, title), /*#__PURE__*/React.createElement(Autocomplete, _extends({}, freeWidth ? {
+    classes: {
+      popper: styles.popper
+    }
+  } : {}, {
+    disabled: disabled || readOnly,
+    getOptionLabel: option => "".concat(option.name),
+    ListboxComponent: ListboxComponent,
+    ListboxProps: listBoxProps,
+    multiple: multiple,
+    noOptionsText: noOptionsTextComponent,
+    onClose: () => setIsPopperOpen(false),
+    onOpen: () => setIsPopperOpen(true),
+    open: isPopperOpen,
+    options: optionsSortedByCategory,
+    PaperComponent: UTPaper,
+    renderInput: InputComponentToRender
+  }, autocompleteProps)), helpText && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, helpText), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    dataTestId: errorDataTestId,
+    validationData: validationData
+  }));
+};
+UTSelect.propTypes = {
+  action: shape({
+    Icon: string,
+    onClick: func,
+    size: string
+  }),
+  actions: arrayOf(buttonTypes),
+  alwaysShowPlaceholder: bool,
+  autocompleteProps: object,
+  className: string,
+  clearable: bool,
+  dataTestId: string,
+  disabled: bool,
+  disableFilterOptions: bool,
+  error: string,
+  errorDataTestId: string,
+  freeWidth: bool,
+  helpText: string,
+  icon: string,
+  inputSize: string,
+  itemDataTestId: string,
+  listDataTestId: string,
+  listProps: object,
+  multiple: bool,
+  noMatchesText: string,
+  noOptionsText: string,
+  onChange: func,
+  onChangeSearchTerm: func,
+  options: arrayOf(shape({
+    name: string,
+    value: oneOfType([string, number])
+  })),
+  placeholder: string,
+  prefix: string,
+  readOnly: bool,
+  required: bool,
+  suffix: string,
+  title: string,
+  titleVariant: string,
+  value: oneOfType([string, arrayOf(oneOfType([string, number]))]),
+  variant: string,
+  withAutoReset: bool
+};
+export default UTSelect;