@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTSelect/versions/V0/theme.js

@@ -1 +1,198 @@
-import{getIn}from"seamless-immutable";import{createTheme}from"@material-ui/core/styles";import merge from"lodash/merge";import Colors from"../../../../scss/variables/colors.module.scss";export const retrieveStyle=_ref=>{let{theme:theme}=_ref;return{container:{display:getIn(theme,["UTSelect","container","display"],"flex"),flexShrink:getIn(theme,["UTSelect","container","flexShrink"],"0"),width:getIn(theme,["UTSelect","container","width"],"100%"),margin:getIn(theme,["UTSelect","container","margin"],"0"),color:getIn(theme,["UTSelect","container","color"],"".concat(Colors.gray)),flexDirection:getIn(theme,["UTSelect","container","flexDirection"],"column"),alignItems:getIn(theme,["UTSelect","container","alignItems"])},formControl:{width:getIn(theme,["UTSelect","formControl","width"],"100%")},tooltipIcon:{color:getIn(theme,["UTSelect","tooltipIcon","color"],"currentColor")},labelIcon:{height:getIn(theme,["UTSelect","inputIcon","height"],"12px"),width:getIn(theme,["UTSelect","inputIcon","width"],"auto"),fill:getIn(theme,["UTSelect","inputIcon","fill"],"".concat(Colors.gray)),padding:getIn(theme,["UTSelect","inputIcon","padding"],"0px 5px 0px 0px")},optionIcon:{height:getIn(theme,["UTSelect","inputIcon","height"],"20px"),width:getIn(theme,["UTSelect","inputIcon","width"],"auto"),fill:getIn(theme,["UTSelect","inputIcon","fill"],"".concat(Colors.gray)),padding:getIn(theme,["UTSelect","inputIcon","padding"],"0px 10px 0px 0px")},labelContainer:{display:"flex",width:"100%",alignItems:"center"},upperTitle:{fontWeight:getIn(theme,["UTSelect","upperTitle","fontWeight"]),display:"block",marginBottom:getIn(theme,["UTSelect","upperTitle","marginBottom"])},subOption:{textIndent:getIn(theme,["UTSelect","subOption","textIndent"],15)}}};export const retrieveMuiTheme=(theme,muiTheme)=>{const mui={typography:{fontFamily:getIn(theme,["Fonts","fontFamily"])},overrides:{MuiSelect:{select:{borderRadius:getIn(theme,["UTSelect","select","borderRadius"]),padding:getIn(theme,["UTSelect","select","padding"])}},MuiOutlinedInput:{input:{fontSize:getIn(theme,["UTSelect","fontSize"],getIn(theme,["Fonts","medium"],14)),color:getIn(theme,["UTTextInput","color"])},root:{"&:hover:not($disabled):not($focused):not($error) $notchedOutline":{border:getIn(theme,["UTSelect","notchedOutline","hover","border"],"1px solid ".concat(Colors.gray)),borderColor:getIn(theme,["UTSelect","notchedOutline","hover","borderColor"],"none")},"&$focused $notchedOutline":{border:getIn(theme,["UTSelect","notchedOutline","focused","border"],"2px solid ".concat(Colors.primary)),borderColor:getIn(theme,["UTSelect","notchedOutline","hover","borderColor"],"none")},"&$disabled $notchedOutline":{border:getIn(theme,["UTSelect","notchedOutline","disabled","border"],"1px solid ".concat(Colors.gray)),borderColor:getIn(theme,["UTSelect","notchedOutline","hover","borderColor"],"none")}},notchedOutline:{border:getIn(theme,["UTSelect","notchedOutline","unfocused","border"],"1px solid ".concat(theme.Palette.error["05"])),borderColor:getIn(theme,["UTSelect","notchedOutline","hover","borderColor"],"none")}},MuiInput:{root:{top:getIn(theme,["UTSelect","top"])},input:{fontSize:getIn(theme,["UTSelect","fontSize"],getIn(theme,["Fonts","medium"],14)),color:getIn(theme,["UTSelect","color"]),border:getIn(theme,["UTSelect","border"]),padding:getIn(theme,["UTSelect","padding"]),textAlign:getIn(theme,["UTSelect","textAlign"],"left"),background:getIn(theme,["UTSelect","background"]),borderRadius:getIn(theme,["UTSelect","borderRadius"])},underline:{"&:hover:not($disabled):not($focused):not($error):before":{borderBottom:getIn(theme,["UTSelect","underline","hover","borderBottom"],"1px solid ".concat(Colors.gray))},"&:hover:not($disabled):before":{borderBottom:getIn(theme,["UTSelect","underline","hover","borderBottom"],"1px solid ".concat(Colors.gray))},"&$disabled:before":{borderBottom:getIn(theme,["UTSelect","underline","disabled","borderBottom"],"1px solid ".concat(Colors.gray))},"&:before":{borderBottom:getIn(theme,["UTSelect","underline","unfocused","borderBottom"],"1px solid ".concat(Colors.gray))},"&$focused:after":{borderBottom:getIn(theme,["UTSelect","underline","focused","borderBottom"],"2px solid ".concat(Colors.inputPrimary))},"&:after":{borderBottom:getIn(theme,["UTSelect","underline","base","borderBottom"],"2px solid ".concat(Colors.inputPrimary))},"&$error:after":{borderBottom:"2px solid ".concat(theme.Palette.error["05"]),borderBottomColor:theme.Palette.error["05"]}}},MuiFormLabel:{root:{color:getIn(theme,["UTSelect","formLabel","color"]),whiteSpace:getIn(theme,["UTSelect","formLabel","whiteSpace"],"initial"),"&$error":{color:getIn(theme,["UTSelect","formLabel","errorColor"],theme.Palette.error["05"])},"&$focused":{color:getIn(theme,["UTSelect","formLabel","focusedColor"],Colors.inputPrimary),"&$error":{color:getIn(theme,["UTSelect","formLabel","focusedErrorColor"],theme.Palette.error["05"])}},fontFamily:getIn(theme,["Fonts","fontFamily"]),fontSize:getIn(theme,["UTSelect","formLabel","fontSize"],getIn(theme,["UTSelect","fontSize"],getIn(theme,["Fonts","medium"],14))),fontWeight:getIn(theme,["UTSelect","formLabel","fontWeight"]),padding:getIn(theme,["UTSelect","formLabel","padding"])}},MuiInputLabel:{shrink:{padding:getIn(theme,["UTSelect","formLabel","shrink","padding"],0)}},MuiFormHelperText:{root:{fontSize:getIn(theme,["UTSelect","helperText","fontSize"],12),color:getIn(theme,["UTSelect","helperText","color"],Colors.inputPrimary)},contained:{marginLeft:0}},MuiCheckbox:{root:{color:getIn(theme,["UTSelect","checkbox","color"],Colors.gray)},colorPrimary:{color:getIn(theme,["UTSelect","checkbox","color"],Colors.gray),"&$checked":{color:getIn(theme,["UTSelect","checkbox","checkedColor"],Colors.inputPrimary)}}},MuiMenuItem:{root:{whiteSpace:getIn(theme,["UTSelect","menuitem","whiteSpace"],"initial"),"&:hover":{color:getIn(theme,["UTSelect","menuitem","hover","color"]),background:getIn(theme,["UTSelect","menuitem","hover","background"])},"&.Mui-selected":{color:getIn(theme,["UTSelect","menuitem","selected","color"]),background:getIn(theme,["UTSelect","menuitem","selected","background"]),"&:hover":{color:getIn(theme,["UTSelect","menuitem","selected","hover","color"]),background:getIn(theme,["UTSelect","menuitem","selected","hover","background"])}}}},MuiListSubheader:{root:{fontWeight:getIn(theme,["UTSelect","subheader","fontWeight"],400),lineHeight:getIn(theme,["UTSelect","subheader","lineHeight"],1.5),paddingBottom:getIn(theme,["UTSelect","subheader","paddingBottom"],6),paddingTop:getIn(theme,["UTSelect","subheader","paddingTop"],6)}}}};return createTheme(merge(muiTheme,mui))};
+import { getIn } from 'seamless-immutable';
+import { createTheme } from '@material-ui/core/styles';
+import merge from 'lodash/merge';
+import Colors from '../../../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      display: getIn(theme, ['UTSelect', 'container', 'display'], 'flex'),
+      flexShrink: getIn(theme, ['UTSelect', 'container', 'flexShrink'], '0'),
+      width: getIn(theme, ['UTSelect', 'container', 'width'], '100%'),
+      margin: getIn(theme, ['UTSelect', 'container', 'margin'], '0'),
+      color: getIn(theme, ['UTSelect', 'container', 'color'], "".concat(Colors.gray)),
+      flexDirection: getIn(theme, ['UTSelect', 'container', 'flexDirection'], 'column'),
+      alignItems: getIn(theme, ['UTSelect', 'container', 'alignItems'])
+    },
+    formControl: {
+      width: getIn(theme, ['UTSelect', 'formControl', 'width'], '100%')
+    },
+    tooltipIcon: {
+      color: getIn(theme, ['UTSelect', 'tooltipIcon', 'color'], 'currentColor')
+    },
+    labelIcon: {
+      height: getIn(theme, ['UTSelect', 'inputIcon', 'height'], '12px'),
+      width: getIn(theme, ['UTSelect', 'inputIcon', 'width'], 'auto'),
+      fill: getIn(theme, ['UTSelect', 'inputIcon', 'fill'], "".concat(Colors.gray)),
+      padding: getIn(theme, ['UTSelect', 'inputIcon', 'padding'], '0px 5px 0px 0px')
+    },
+    optionIcon: {
+      height: getIn(theme, ['UTSelect', 'inputIcon', 'height'], '20px'),
+      width: getIn(theme, ['UTSelect', 'inputIcon', 'width'], 'auto'),
+      fill: getIn(theme, ['UTSelect', 'inputIcon', 'fill'], "".concat(Colors.gray)),
+      padding: getIn(theme, ['UTSelect', 'inputIcon', 'padding'], '0px 10px 0px 0px')
+    },
+    labelContainer: {
+      display: 'flex',
+      width: '100%',
+      alignItems: 'center'
+    },
+    upperTitle: {
+      fontWeight: getIn(theme, ['UTSelect', 'upperTitle', 'fontWeight']),
+      display: 'block',
+      marginBottom: getIn(theme, ['UTSelect', 'upperTitle', 'marginBottom'])
+    },
+    subOption: {
+      textIndent: getIn(theme, ['UTSelect', 'subOption', 'textIndent'], 15)
+    }
+  };
+};
+export const retrieveMuiTheme = (theme, muiTheme) => {
+  const mui = {
+    typography: {
+      fontFamily: getIn(theme, ['Fonts', 'fontFamily'])
+    },
+    overrides: {
+      MuiSelect: {
+        select: {
+          borderRadius: getIn(theme, ['UTSelect', 'select', 'borderRadius']),
+          padding: getIn(theme, ['UTSelect', 'select', 'padding'])
+        }
+      },
+      MuiOutlinedInput: {
+        input: {
+          fontSize: getIn(theme, ['UTSelect', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14)),
+          color: getIn(theme, ['UTTextInput', 'color'])
+        },
+        root: {
+          '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
+            border: getIn(theme, ['UTSelect', 'notchedOutline', 'hover', 'border'], "1px solid ".concat(Colors.gray)),
+            borderColor: getIn(theme, ['UTSelect', 'notchedOutline', 'hover', 'borderColor'], 'none')
+          },
+          '&$focused $notchedOutline': {
+            border: getIn(theme, ['UTSelect', 'notchedOutline', 'focused', 'border'], "2px solid ".concat(Colors.primary)),
+            borderColor: getIn(theme, ['UTSelect', 'notchedOutline', 'hover', 'borderColor'], 'none')
+          },
+          '&$disabled $notchedOutline': {
+            border: getIn(theme, ['UTSelect', 'notchedOutline', 'disabled', 'border'], "1px solid ".concat(Colors.gray)),
+            borderColor: getIn(theme, ['UTSelect', 'notchedOutline', 'hover', 'borderColor'], 'none')
+          }
+        },
+        notchedOutline: {
+          border: getIn(theme, ['UTSelect', 'notchedOutline', 'unfocused', 'border'], "1px solid ".concat(theme.Palette.error['05'])),
+          borderColor: getIn(theme, ['UTSelect', 'notchedOutline', 'hover', 'borderColor'], 'none')
+        }
+      },
+      MuiInput: {
+        root: {
+          top: getIn(theme, ['UTSelect', 'top'])
+        },
+        input: {
+          fontSize: getIn(theme, ['UTSelect', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14)),
+          color: getIn(theme, ['UTSelect', 'color']),
+          border: getIn(theme, ['UTSelect', 'border']),
+          padding: getIn(theme, ['UTSelect', 'padding']),
+          textAlign: getIn(theme, ['UTSelect', 'textAlign'], 'left'),
+          background: getIn(theme, ['UTSelect', 'background']),
+          borderRadius: getIn(theme, ['UTSelect', 'borderRadius'])
+        },
+        underline: {
+          '&:hover:not($disabled):not($focused):not($error):before': {
+            borderBottom: getIn(theme, ['UTSelect', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&:hover:not($disabled):before': {
+            borderBottom: getIn(theme, ['UTSelect', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&$disabled:before': {
+            borderBottom: getIn(theme, ['UTSelect', 'underline', 'disabled', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&:before': {
+            borderBottom: getIn(theme, ['UTSelect', 'underline', 'unfocused', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&$focused:after': {
+            borderBottom: getIn(theme, ['UTSelect', 'underline', 'focused', 'borderBottom'], "2px solid ".concat(Colors.inputPrimary))
+          },
+          '&:after': {
+            borderBottom: getIn(theme, ['UTSelect', 'underline', 'base', 'borderBottom'], "2px solid ".concat(Colors.inputPrimary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
+          }
+        }
+      },
+      MuiFormLabel: {
+        root: {
+          color: getIn(theme, ['UTSelect', 'formLabel', 'color']),
+          whiteSpace: getIn(theme, ['UTSelect', 'formLabel', 'whiteSpace'], 'initial'),
+          '&$error': {
+            color: getIn(theme, ['UTSelect', 'formLabel', 'errorColor'], theme.Palette.error['05'])
+          },
+          '&$focused': {
+            color: getIn(theme, ['UTSelect', 'formLabel', 'focusedColor'], Colors.inputPrimary),
+            '&$error': {
+              color: getIn(theme, ['UTSelect', 'formLabel', 'focusedErrorColor'], theme.Palette.error['05'])
+            }
+          },
+          fontFamily: getIn(theme, ['Fonts', 'fontFamily']),
+          fontSize: getIn(theme, ['UTSelect', 'formLabel', 'fontSize'], getIn(theme, ['UTSelect', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14))),
+          fontWeight: getIn(theme, ['UTSelect', 'formLabel', 'fontWeight']),
+          padding: getIn(theme, ['UTSelect', 'formLabel', 'padding'])
+        }
+      },
+      MuiInputLabel: {
+        shrink: {
+          padding: getIn(theme, ['UTSelect', 'formLabel', 'shrink', 'padding'], 0)
+        }
+      },
+      MuiFormHelperText: {
+        root: {
+          fontSize: getIn(theme, ['UTSelect', 'helperText', 'fontSize'], 12),
+          color: getIn(theme, ['UTSelect', 'helperText', 'color'], Colors.inputPrimary)
+        },
+        contained: {
+          marginLeft: 0
+        }
+      },
+      MuiCheckbox: {
+        root: {
+          color: getIn(theme, ['UTSelect', 'checkbox', 'color'], Colors.gray)
+        },
+        colorPrimary: {
+          color: getIn(theme, ['UTSelect', 'checkbox', 'color'], Colors.gray),
+          '&$checked': {
+            color: getIn(theme, ['UTSelect', 'checkbox', 'checkedColor'], Colors.inputPrimary)
+          }
+        }
+      },
+      MuiMenuItem: {
+        root: {
+          whiteSpace: getIn(theme, ['UTSelect', 'menuitem', 'whiteSpace'], 'initial'),
+          '&:hover': {
+            color: getIn(theme, ['UTSelect', 'menuitem', 'hover', 'color']),
+            background: getIn(theme, ['UTSelect', 'menuitem', 'hover', 'background'])
+          },
+          '&.Mui-selected': {
+            color: getIn(theme, ['UTSelect', 'menuitem', 'selected', 'color']),
+            background: getIn(theme, ['UTSelect', 'menuitem', 'selected', 'background']),
+            '&:hover': {
+              color: getIn(theme, ['UTSelect', 'menuitem', 'selected', 'hover', 'color']),
+              background: getIn(theme, ['UTSelect', 'menuitem', 'selected', 'hover', 'background'])
+            }
+          }
+        }
+      },
+      MuiListSubheader: {
+        root: {
+          fontWeight: getIn(theme, ['UTSelect', 'subheader', 'fontWeight'], 400),
+          lineHeight: getIn(theme, ['UTSelect', 'subheader', 'lineHeight'], 1.5),
+          paddingBottom: getIn(theme, ['UTSelect', 'subheader', 'paddingBottom'], 6),
+          paddingTop: getIn(theme, ['UTSelect', 'subheader', 'paddingTop'], 6)
+        }
+      }
+    }
+  };
+  return createTheme(merge(muiTheme, mui));
+};

package/dist/esm/components/UTSelect/versions/V0/utils.js

@@ -1 +1,7 @@
-import{isEmpty}from"@widergy/web-utils/lib/array";const shouldResetMultipleSelect=(value,options,valueKey)=>!isEmpty(value)&&(isEmpty(options)||value.some(el=>!options.some(opt=>opt[valueKey]===el)&&!options.some(opt=>opt.subOptions&&opt.subOptions.some(sub=>sub[valueKey]===el)))),shouldResetSimpleSelect=(value,options,valueKey)=>value&&(isEmpty(options)||!options.some(el=>el[valueKey]===value)&&!options.some(el=>el.subOptions&&el.subOptions.some(sub=>sub[valueKey]===value)));export const shouldReset=(value,options,valueKey,isMultiple)=>isMultiple?shouldResetMultipleSelect(value,options,valueKey):shouldResetSimpleSelect(value,options,valueKey);
+import { isEmpty } from '@widergy/web-utils/lib/array';
+const shouldResetMultipleSelect = (value, options, valueKey) => !isEmpty(value) && (isEmpty(options) || value.some(el => !options.some(opt => opt[valueKey] === el) && !options.some(opt => opt.subOptions && opt.subOptions.some(sub => sub[valueKey] === el))));
+const shouldResetSimpleSelect = (value, options, valueKey) => value && (isEmpty(options) || !options.some(el => el[valueKey] === value) && !options.some(el => el.subOptions && el.subOptions.some(sub => sub[valueKey] === value)));
+export const shouldReset = (value, options, valueKey, isMultiple) => {
+  if (isMultiple) return shouldResetMultipleSelect(value, options, valueKey);
+  return shouldResetSimpleSelect(value, options, valueKey);
+};

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

@@ -0,0 +1,317 @@
+# 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.                                                                  |
+| CustomRow             | elementType                |                                        | Custom React component to render each option row. Receives `{ item, isChecked }` as props, where `item` is the option object and `isChecked` indicates if the option is selected. |
+| 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.                                                                                                  |
+| fixedBottomOption     | object                     |                                        | Option rendered below the scrollable list, always visible regardless of the search term. Shape: `{ name: string, value: string \| number }`. |
+| 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
+
+### `fixedBottomOption`
+
+`fixedBottomOption` adds a pinned option at the bottom of the dropdown list, rendered outside the scrollable area so it's always visible regardless of scroll position or active search term. Useful for "catch-all" options like "Other reason".
+
+```jsx
+<UTSelect
+  version="V1"
+  options={categorizedOptions}
+  fixedBottomOption={{ name: 'Otro motivo', value: 'other' }}
+  onChange={handleSelect}
+/>
+```
+
+- The fixed option is excluded from `filteredOptions` — if it's also present in `options`, it's automatically deduplicated by value.
+- When no options match the search term, `noMatchesText` is shown but the fixed option remains visible.
+- The option is visually separated from the list by a divider.
+- When selected, `onChange` receives the option's value (same behavior as any other 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.
+
+### 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 Custom Row Renderer
+
+```jsx
+import React, { useState } from 'react';
+import UTSelect from './UTSelect';
+
+const options = [
+  { name: 'Alice', value: '1', subtitle: 'Admin' },
+  { name: 'Bob', value: '2', subtitle: 'Editor' },
+  { name: 'Carol', value: '3', subtitle: 'Viewer' }
+];
+
+const MyCustomRow = ({ item, isChecked }) => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+    <span style={{ fontWeight: isChecked ? 'bold' : 'normal' }}>{item.name}</span>
+    <span style={{ color: 'gray', fontSize: 12 }}>{item.subtitle}</span>
+  </div>
+);
+
+const CustomRowExample = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <UTSelect
+      CustomRow={MyCustomRow}
+      onChange={setValue}
+      options={options}
+      placeholder="Select a user"
+      value={value}
+    />
+  );
+};
+```
+
+### 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

@@ -1 +1,108 @@
-import React from"react";import{arrayOf,bool,func,instanceOf,object,oneOf,oneOfType,shape,string}from"prop-types";import UTBaseInputField from"../../../../../UTBaseInputField";import{VARIANTS}from"../../constants";const InputComponent=_ref=>{let{alwaysShowPlaceholder:alwaysShowPlaceholder,dataTestId:dataTestId,disabled:disabled,error:error,inputSize:inputSize,inputRef:inputRef,leftAdornments:leftAdornments,onBlur:onBlur,onChange:onChange,onFocus:onFocus,params:params,placeholder:placeholder,readOnly:readOnly,rightAdornments:rightAdornments,value:value,variant:variant}=_ref;const{InputProps:{startAdornment:startAdornment,endAdornment:endAdornment,className:className,...restInputProps},inputProps:{onBlur:paramsOnBlur,onChange:paramsOnChange,onFocus:paramsOnFocus,value:paramsValue,...restInputPropsFromField},...restParams}=params,isPicker=variant===VARIANTS.picker,modifiedParams={...restParams,InputProps:restInputProps,inputProps:{...restInputPropsFromField,...isPicker&&{readOnly:!0,style:{cursor:"default"}}}},fieldVariant=isPicker?"transparent":"white";return 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:oneOf(Object.values(VARIANTS))};export default InputComponent;
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import { arrayOf, bool, func, instanceOf, object, oneOf, oneOfType, shape, string } from 'prop-types';
+import UTBaseInputField from '../../../../../UTBaseInputField';
+import { VARIANTS } from '../../constants';
+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 isPicker = variant === VARIANTS.picker;
+  const modifiedParams = {
+    ...restParams,
+    InputProps: restInputProps,
+    inputProps: {
+      ...restInputPropsFromField,
+      ...(isPicker && {
+        readOnly: true,
+        style: {
+          cursor: 'default'
+        }
+      })
+    }
+  };
+  const fieldVariant = isPicker ? '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: oneOf(Object.values(VARIANTS))
+};
+export default InputComponent;

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

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