@widergy/energy-ui 3.37.2 → 3.38.0

package/dist/components/UTSelect/index.js

@@ -4,196 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
-var _ListSubheader = _interopRequireDefault(require("@material-ui/core/ListSubheader"));
-var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
-var _HelpOutline = _interopRequireDefault(require("@material-ui/icons/HelpOutline"));
-var _form = require("@widergy/web-utils/lib/form");
-var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
-var _array = require("@widergy/web-utils/lib/array");
-var _clone = _interopRequireDefault(require("lodash/clone"));
-var _formTypes = require("../../types/formTypes");
-var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _classesUtils = require("../../utils/classesUtils");
-var _Option = _interopRequireDefault(require("./components/Option"));
-var _theme = require("./theme");
-var _stylesJS = _interopRequireDefault(require("./stylesJS"));
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-var _constants = require("./constants");
-var _utils = require("./utils");
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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); }
 const UTSelect = _ref => {
   let {
-    captionLabel,
-    classNames,
-    classes: themeClasses,
-    disabled,
-    disableFirstOption,
-    field,
-    iconPlaceholder: IconPlaceholder,
-    input,
-    labelKey,
-    labelProps,
-    menuPlaceholder,
-    meta,
-    options,
-    placeholder,
-    selectProps,
-    tooltip,
-    valueKey,
-    variant,
-    withAutoReset,
-    withOrder,
-    withoutFirstOption
+    version = 'V0',
+    ...props
   } = _ref;
-  const {
-    multiple: isMultiple,
-    upperTitle
-  } = (field === null || field === void 0 ? void 0 : field.configuration) || {};
-  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
-  (0, _react.useEffect)(() => {
-    if (withAutoReset && (0, _utils.shouldReset)(input.value, options, valueKey, isMultiple)) input.onChange(null);
-  }, [options]);
-  const handleChange = event => input.onChange(event.target.value);
-  const handleRenderValue = selected => {
-    const selectedOptions = options.filter(option => selected.includes(option[valueKey]));
-    return selectedOptions.map(selection => selection[labelKey]).join(', ');
-  };
-  let sortedOptions = [...options];
-  sortedOptions = withOrder ? sortedOptions.sort((a, b) => a.order < b.order ? -1 : 1) : sortedOptions;
-  const optionCommonProps = {
-    classes,
-    isMultiple,
-    labelKey,
-    value: input.value,
-    valueKey
-  };
-  const SelectInput = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, upperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: classes.upperTitle
-  }, upperTitle), /*#__PURE__*/_react.default.createElement(_FormControl.default, {
-    className: classes.formControl,
-    error: (0, _form.shouldShowErrors)(meta),
-    variant: variant
-  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, _extends({}, labelProps, {
-    disabled: disabled
-  }), IconPlaceholder ? /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.labelContainer
-  }, /*#__PURE__*/_react.default.createElement(IconPlaceholder, {
-    className: classes.labelIcon
-  }), /*#__PURE__*/_react.default.createElement("div", null, placeholder)) : placeholder), /*#__PURE__*/_react.default.createElement(_Select.default, _extends({
-    name: input.name,
-    multiple: isMultiple,
-    value: isMultiple ? (0, _array.isEmpty)(input.value) ? [] : (0, _clone.default)(input.value) : input.value,
-    onChange: handleChange,
-    disabled: disabled,
-    label: variant === 'outlined' && placeholder,
-    classes: {
-      nativeInput: _stylesModule.default.nativeInput
-    }
-  }, isMultiple ? {
-    renderValue: handleRenderValue
-  } : {}, selectProps), !withoutFirstOption && /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-    value: "",
-    disabled: isMultiple || disableFirstOption
-  }, menuPlaceholder || (isMultiple ? _constants.MENU_TITLE_MULTIPLE : _constants.MENU_TITLE)), sortedOptions.map(option => (0, _array.isEmpty)(option.subOptions) ? /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-    key: option[valueKey],
-    value: option[valueKey]
-  }, /*#__PURE__*/_react.default.createElement(_Option.default, _extends({
-    optionProps: option
-  }, optionCommonProps))) : [/*#__PURE__*/_react.default.createElement(_ListSubheader.default, {
-    className: _stylesModule.default.subHeader
-  }, option[labelKey]), option.subOptions.map(subOption => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-    className: classes.subOption,
-    key: subOption[valueKey],
-    value: subOption[valueKey]
-  }, /*#__PURE__*/_react.default.createElement(_Option.default, _extends({
-    isSuboption: true,
-    optionProps: subOption
-  }, optionCommonProps))))])), captionLabel && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, {
-    classes: {
-      ...classes.formHelperText
-    }
-  }, captionLabel), (0, _form.shouldShowErrors)(meta) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: _stylesModule.default.errorLabel,
-    colorTheme: "error",
-    variant: "small"
-  }, meta.error)));
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.container
-  }, tooltip ? /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    style: _stylesJS.default.gridContainer,
-    container: true,
-    spacing: 1,
-    alignItems: "flex-end"
-  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    item: true,
-    xs: true
-  }, SelectInput), /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    item: true,
-    style: _stylesJS.default.icon
-  }, /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
-    content: tooltip
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
-    className: classes.tooltipIcon
-  }))))) : SelectInput);
-};
-UTSelect.defaultProps = {
-  classNames: {},
-  classes: {},
-  field: {
-    configuration: {
-      multiple: false
-    }
-  },
-  labelKey: _constants.LABEL_KEY,
-  labelProps: {},
-  meta: {},
-  options: [],
-  selectProps: {},
-  valueKey: _constants.VALUE_KEY,
-  withAutoReset: true,
-  withoutFirstOption: false
+  const Component = {
+    V0: _V.default,
+    V1: _V2.default
+  }[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
 };
 UTSelect.propTypes = {
-  captionLabel: _propTypes.string,
-  classNames: (0, _propTypes.objectOf)(_propTypes.string),
-  classes: (0, _propTypes.shape)({
-    container: _propTypes.string,
-    labelContainer: _propTypes.string,
-    formControl: _propTypes.string,
-    formHelperText: (0, _propTypes.objectOf)(_propTypes.string),
-    labelIcon: _propTypes.string,
-    optionIcon: _propTypes.string,
-    tooltipIcon: _propTypes.string,
-    upperTitle: _propTypes.string
-  }),
-  disabled: _propTypes.bool,
-  disableFirstOption: _propTypes.bool,
-  field: _formTypes.fieldType,
-  iconPlaceholder: _propTypes.node,
-  input: _formTypes.inputPropTypes,
-  labelKey: _propTypes.string,
-  labelProps: _propTypes.object,
-  menuPlaceholder: _propTypes.string,
-  meta: _formTypes.metaPropTypes,
-  options: (0, _propTypes.arrayOf)(_propTypes.object),
-  placeholder: _propTypes.string,
-  selectProps: _propTypes.object,
-  tooltip: _propTypes.string,
-  valueKey: _propTypes.string,
-  variant: _propTypes.string,
-  withAutoReset: _propTypes.bool,
-  withOrder: _propTypes.bool,
-  withoutFirstOption: _propTypes.bool
+  version: _propTypes.string
 };
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTSelect);
+var _default = exports.default = UTSelect;

package/dist/components/UTSelect/versions/V0/index.js

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+var _ListSubheader = _interopRequireDefault(require("@material-ui/core/ListSubheader"));
+var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+var _propTypes = require("prop-types");
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _HelpOutline = _interopRequireDefault(require("@material-ui/icons/HelpOutline"));
+var _form = require("@widergy/web-utils/lib/form");
+var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+var _array = require("@widergy/web-utils/lib/array");
+var _clone = _interopRequireDefault(require("lodash/clone"));
+var _formTypes = require("../../../../types/formTypes");
+var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _classesUtils = require("../../../../utils/classesUtils");
+var _Option = _interopRequireDefault(require("./components/Option"));
+var _theme = require("./theme");
+var _stylesJS = _interopRequireDefault(require("./stylesJS"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _constants = require("./constants");
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
+const UTSelect = _ref => {
+  let {
+    captionLabel,
+    classNames,
+    classes: themeClasses,
+    disabled,
+    disableFirstOption,
+    field,
+    iconPlaceholder: IconPlaceholder,
+    input,
+    labelKey,
+    labelProps,
+    menuPlaceholder,
+    meta,
+    options,
+    placeholder,
+    selectProps,
+    tooltip,
+    valueKey,
+    variant,
+    withAutoReset,
+    withOrder,
+    withoutFirstOption
+  } = _ref;
+  const {
+    multiple: isMultiple,
+    upperTitle
+  } = (field === null || field === void 0 ? void 0 : field.configuration) || {};
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  (0, _react.useEffect)(() => {
+    if (withAutoReset && (0, _utils.shouldReset)(input.value, options, valueKey, isMultiple)) input.onChange(null);
+  }, [options]);
+  const handleChange = event => input.onChange(event.target.value);
+  const handleRenderValue = selected => {
+    const selectedOptions = options.filter(option => selected.includes(option[valueKey]));
+    return selectedOptions.map(selection => selection[labelKey]).join(', ');
+  };
+  let sortedOptions = [...options];
+  sortedOptions = withOrder ? sortedOptions.sort((a, b) => a.order < b.order ? -1 : 1) : sortedOptions;
+  const optionCommonProps = {
+    classes,
+    isMultiple,
+    labelKey,
+    value: input.value,
+    valueKey
+  };
+  const SelectInput = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, upperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: classes.upperTitle
+  }, upperTitle), /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    className: classes.formControl,
+    error: (0, _form.shouldShowErrors)(meta),
+    variant: variant
+  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, _extends({}, labelProps, {
+    disabled: disabled
+  }), IconPlaceholder ? /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.labelContainer
+  }, /*#__PURE__*/_react.default.createElement(IconPlaceholder, {
+    className: classes.labelIcon
+  }), /*#__PURE__*/_react.default.createElement("div", null, placeholder)) : placeholder), /*#__PURE__*/_react.default.createElement(_Select.default, _extends({
+    name: input.name,
+    multiple: isMultiple,
+    value: isMultiple ? (0, _array.isEmpty)(input.value) ? [] : (0, _clone.default)(input.value) : input.value,
+    onChange: handleChange,
+    disabled: disabled,
+    label: variant === 'outlined' && placeholder,
+    classes: {
+      nativeInput: _stylesModule.default.nativeInput
+    }
+  }, isMultiple ? {
+    renderValue: handleRenderValue
+  } : {}, selectProps), !withoutFirstOption && /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+    value: "",
+    disabled: isMultiple || disableFirstOption
+  }, menuPlaceholder || (isMultiple ? _constants.MENU_TITLE_MULTIPLE : _constants.MENU_TITLE)), sortedOptions.map(option => (0, _array.isEmpty)(option.subOptions) ? /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+    key: option[valueKey],
+    value: option[valueKey]
+  }, /*#__PURE__*/_react.default.createElement(_Option.default, _extends({
+    optionProps: option
+  }, optionCommonProps))) : [/*#__PURE__*/_react.default.createElement(_ListSubheader.default, {
+    className: _stylesModule.default.subHeader
+  }, option[labelKey]), option.subOptions.map(subOption => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+    className: classes.subOption,
+    key: subOption[valueKey],
+    value: subOption[valueKey]
+  }, /*#__PURE__*/_react.default.createElement(_Option.default, _extends({
+    isSuboption: true,
+    optionProps: subOption
+  }, optionCommonProps))))])), captionLabel && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, {
+    classes: {
+      ...classes.formHelperText
+    }
+  }, captionLabel), (0, _form.shouldShowErrors)(meta) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.errorLabel,
+    colorTheme: "error",
+    variant: "small"
+  }, meta.error)));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.container
+  }, tooltip ? /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    style: _stylesJS.default.gridContainer,
+    container: true,
+    spacing: 1,
+    alignItems: "flex-end"
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    item: true,
+    xs: true
+  }, SelectInput), /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    item: true,
+    style: _stylesJS.default.icon
+  }, /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    content: tooltip
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
+    className: classes.tooltipIcon
+  }))))) : SelectInput);
+};
+UTSelect.defaultProps = {
+  classNames: {},
+  classes: {},
+  field: {
+    configuration: {
+      multiple: false
+    }
+  },
+  labelKey: _constants.LABEL_KEY,
+  labelProps: {},
+  meta: {},
+  options: [],
+  selectProps: {},
+  valueKey: _constants.VALUE_KEY,
+  withAutoReset: true,
+  withoutFirstOption: false
+};
+UTSelect.propTypes = {
+  captionLabel: _propTypes.string,
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  classes: (0, _propTypes.shape)({
+    container: _propTypes.string,
+    labelContainer: _propTypes.string,
+    formControl: _propTypes.string,
+    formHelperText: (0, _propTypes.objectOf)(_propTypes.string),
+    labelIcon: _propTypes.string,
+    optionIcon: _propTypes.string,
+    tooltipIcon: _propTypes.string,
+    upperTitle: _propTypes.string
+  }),
+  disabled: _propTypes.bool,
+  disableFirstOption: _propTypes.bool,
+  field: _formTypes.fieldType,
+  iconPlaceholder: _propTypes.node,
+  input: _formTypes.inputPropTypes,
+  labelKey: _propTypes.string,
+  labelProps: _propTypes.object,
+  menuPlaceholder: _propTypes.string,
+  meta: _formTypes.metaPropTypes,
+  options: (0, _propTypes.arrayOf)(_propTypes.object),
+  placeholder: _propTypes.string,
+  selectProps: _propTypes.object,
+  tooltip: _propTypes.string,
+  valueKey: _propTypes.string,
+  variant: _propTypes.string,
+  withAutoReset: _propTypes.bool,
+  withOrder: _propTypes.bool,
+  withoutFirstOption: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTSelect);

package/dist/components/UTSelect/{stylesJS.js → versions/V0/stylesJS.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = exports.default = {
   icon: {

package/dist/components/UTSelect/{theme.js → versions/V0/theme.js}

@@ -7,7 +7,7 @@ exports.retrieveStyle = exports.retrieveMuiTheme = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _styles = require("@material-ui/core/styles");
 var _merge = _interopRequireDefault(require("lodash/merge"));
-var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveStyle = _ref => {
   let {

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

@@ -0,0 +1,90 @@
+# 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).
+
+| Name                  | Type                       | Default  | Description                                                                                               |
+| --------------------- | -------------------------- | -------- | --------------------------------------------------------------------------------------------------------- |
+| action                | object                      |          | Action object containing `Icon`, `onClick`, and `size` for the action button.                             |
+| alwaysShowPlaceholder | bool                       | true     | Determines if the placeholder should always be shown, even when there is a value.                         |
+| clearable             | bool                       | true     | Determines whether a button to clear the current selection should be shown.                               |
+| 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.                                                           |
+| helpText              | string                     |          | Help text displayed below the input field.                                                                |
+| multiple              | bool                       | false    | Allows multiple selection if true.                                                                        |
+| noMatchesText         | string                     |          | Text to display when no matches are found in the search.                                                  |
+| 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 `label` and `value`.      |
+| 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.                                                    |
+| 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                      |
+| ----- | -------------- | -------------------------------- |
+| label | string         | Label to display for the option. |
+| value | string, number | Value of the option.             |
+
+### `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.
+
+## 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.
+
+## Usage
+
+```jsx
+import React, { useState } from 'react';
+import UTSelect from './UTSelect';
+
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3' },
+  { label: 'Option 4', value: '4' }
+];
+
+const UTSelectExample = () => {
+  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>
+  );
+};
+
+export default UTSelectExample;
+```

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

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTBaseInputField = _interopRequireDefault(require("../../../../../UTBaseInputField"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const InputComponent = _ref => {
+  let {
+    alwaysShowPlaceholder,
+    disabled,
+    error,
+    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.default.createElement(_UTBaseInputField.default, {
+    alwaysShowPlaceholder: alwaysShowPlaceholder,
+    disabled: disabled,
+    error: error,
+    inputRef: inputRef,
+    leftAdornments: leftAdornments,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    muiProps: modifiedParams,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    rightAdornments: rightAdornments,
+    value: value,
+    variant: fieldVariant
+  });
+};
+InputComponent.propTypes = {
+  alwaysShowPlaceholder: _propTypes.bool,
+  disabled: _propTypes.bool,
+  error: _propTypes.string,
+  inputRef: (0, _propTypes.oneOfType)([_propTypes.func, (0, _propTypes.shape)({
+    current: (0, _propTypes.instanceOf)(Element)
+  })]),
+  leftAdornments: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    name: _propTypes.string,
+    props: _propTypes.object
+  })),
+  onBlur: _propTypes.func,
+  onChange: _propTypes.func,
+  onFocus: _propTypes.func,
+  params: (0, _propTypes.shape)({
+    InputProps: _propTypes.object,
+    inputProps: (0, _propTypes.shape)({
+      onChange: _propTypes.func,
+      onBlur: _propTypes.func,
+      onFocus: _propTypes.func
+    })
+  }),
+  placeholder: _propTypes.string,
+  readOnly: _propTypes.bool,
+  rightAdornments: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    name: _propTypes.string,
+    props: _propTypes.object
+  })),
+  value: _propTypes.string,
+  variant: _propTypes.string
+};
+var _default = exports.default = InputComponent;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _propTypes = require("prop-types");
+var _reactPerfectScrollbar = _interopRequireDefault(require("react-perfect-scrollbar"));
+var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
+var _UTCheckList = _interopRequireDefault(require("../../../../../UTCheckList"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ListboxComponent = _ref => {
+  let {
+    filteredOptions,
+    handleSelectionChange,
+    multiple,
+    noMatchesText,
+    value
+  } = _ref;
+  const hasNoOptions = (0, _react.useMemo)(() => (0, _isEmpty.default)(filteredOptions), [filteredOptions]);
+  return hasNoOptions ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    className: _stylesModule.default.noOptionsLabel
+  }, noMatchesText) : /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
+    className: _stylesModule.default.scrollbar
+  }, /*#__PURE__*/_react.default.createElement(_UTCheckList.default, {
+    isSimple: !multiple,
+    onChange: handleSelectionChange,
+    options: filteredOptions,
+    showSelectAll: false,
+    value: multiple ? value : [value],
+    variant: "button",
+    version: "V1"
+  }));
+};
+ListboxComponent.propTypes = {
+  filteredOptions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    label: _propTypes.string,
+    value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number])
+  })),
+  handleSelectionChange: _propTypes.func,
+  multiple: _propTypes.bool,
+  noMatchesText: _propTypes.string,
+  value: (0, _propTypes.oneOfType)([(0, _propTypes.arrayOf)((0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number])), _propTypes.string, _propTypes.number])
+};
+var _default = exports.default = ListboxComponent;