@widergy/energy-ui 3.171.3 → 3.172.1

package/dist/esm/components/UTSelect/UTSelectFixedBottomOption.stories.js

@@ -0,0 +1,163 @@
+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 React, { useState } from 'react';
+import { bool, string } from 'prop-types';
+import UTSelect from '.';
+const OPTIONS = [{
+  name: 'Electricidad',
+  value: 'electricity'
+}, {
+  name: 'Gas natural',
+  value: 'gas'
+}, {
+  name: 'Agua potable',
+  value: 'water'
+}, {
+  name: 'Energía solar',
+  value: 'solar'
+}, {
+  name: 'Biomasa',
+  value: 'biomass'
+}];
+const OPTIONS_WITH_CATEGORIES = [{
+  name: 'Residencial bajo',
+  value: 'res-low',
+  category: 'Residencial'
+}, {
+  name: 'Residencial medio',
+  value: 'res-mid',
+  category: 'Residencial'
+}, {
+  name: 'Residencial alto',
+  value: 'res-high',
+  category: 'Residencial'
+}, {
+  name: 'Comercial pequeño',
+  value: 'com-sm',
+  category: 'Comercial'
+}, {
+  name: 'Comercial grande',
+  value: 'com-lg',
+  category: 'Comercial'
+}, {
+  name: 'Industrial liviano',
+  value: 'ind-sm',
+  category: 'Industrial'
+}, {
+  name: 'Industrial pesado',
+  value: 'ind-lg',
+  category: 'Industrial'
+}];
+const LONG_OPTIONS = Array.from({
+  length: 20
+}, (_, i) => ({
+  name: "Opci\xF3n ".concat(i + 1),
+  value: "opt-".concat(i + 1)
+}));
+const wrapperStyle = {
+  maxWidth: '360px',
+  padding: '1rem'
+};
+const SelectWrapper = _ref => {
+  let {
+    multiple,
+    ...props
+  } = _ref;
+  const [value, setValue] = useState(multiple ? [] : null);
+  return /*#__PURE__*/React.createElement("div", {
+    style: wrapperStyle
+  }, /*#__PURE__*/React.createElement(UTSelect, _extends({}, props, {
+    multiple: multiple,
+    onChange: setValue,
+    value: value,
+    version: "V1"
+  })));
+};
+SelectWrapper.propTypes = {
+  multiple: bool,
+  title: string
+};
+export default {
+  component: UTSelect,
+  title: 'Energy-UI/UTSelect/Con opción fija'
+};
+export const ListaLarga = {
+  name: 'Lista larga',
+  args: {
+    fixedBottomOption: {
+      name: 'Otro motivo',
+      value: 'other'
+    },
+    options: LONG_OPTIONS,
+    placeholder: 'Seleccioná una opción',
+    title: 'Con opción fija al final (lista larga)'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'La prop `fixedBottomOption` agrega una opción fija debajo del scroll, siempre visible independientemente del término de búsqueda. Útil para opciones como "Otro motivo".'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const ListaCorta = {
+  name: 'Lista corta',
+  args: {
+    fixedBottomOption: {
+      name: 'Otro motivo',
+      value: 'other'
+    },
+    options: OPTIONS,
+    placeholder: 'Seleccioná una opción',
+    title: 'Con opción fija al final (lista corta)'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'La opción fija también se muestra cuando la lista es corta y no hay scroll. Si el usuario filtra y no hay coincidencias, la opción fija permanece visible.'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const ConCategorias = {
+  name: 'Con categorías',
+  args: {
+    fixedBottomOption: {
+      name: 'Otro motivo',
+      value: 'other'
+    },
+    options: OPTIONS_WITH_CATEGORIES,
+    placeholder: 'Seleccioná una opción',
+    title: 'Con categorías y opción fija'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'La opción fija convive con opciones agrupadas por categoría. El divider y la opción fija siempre quedan por debajo de todos los grupos.'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const SeleccionMultiple = {
+  name: 'Selección múltiple',
+  args: {
+    fixedBottomOption: {
+      name: 'Otro motivo',
+      value: 'other'
+    },
+    multiple: true,
+    options: OPTIONS,
+    placeholder: 'Seleccioná una o más opciones',
+    title: 'Selección múltiple con opción fija'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `multiple={true}` la opción fija se comporta como cualquier otra: se puede seleccionar y deseleccionar de forma independiente. El valor es un array que incluye `fixedBottomOption.value` cuando está marcada.'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};

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

@@ -20,6 +20,7 @@
 | 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.                                                                                                     |
@@ -67,6 +68,24 @@ The `action` prop accepts an object with the following properties:
 
 ## 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.

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

@@ -1,5 +1,6 @@
+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 isEmpty from 'lodash/isEmpty';
-import React, { useMemo } from 'react';
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import ScrollBar from 'react-perfect-scrollbar';
 import { arrayOf, bool, elementType, func, oneOfType, shape, string, number } from 'prop-types';
 import isFinite from 'lodash/isFinite';
@@ -13,6 +14,7 @@ const ListboxComponent = _ref => {
     CustomRow,
     dataTestId,
     filteredOptions,
+    fixedBottomOption,
     handleSelectionChange,
     horizontalSpacing = SPACING.SMALL,
     itemDataTestId,
@@ -24,28 +26,54 @@ const ListboxComponent = _ref => {
   } = _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
+  const fixedSectionRef = useRef(null);
+  const [reservedHeight, setReservedHeight] = useState(0);
+  useLayoutEffect(() => {
+    if (fixedSectionRef.current) {
+      setReservedHeight(fixedSectionRef.current.offsetHeight);
     }
-  }, /*#__PURE__*/React.createElement(UTCheckList, {
-    CustomRow: CustomRow,
-    dataTestId: dataTestId,
-    horizontalSpacing: horizontalSpacing,
+  }, [fixedBottomOption]);
+  const scrollMaxHeight = maxHeightValid - reservedHeight;
+  const handleFixedOptionChange = newValues => {
+    if (!multiple && newValues.length === 0) {
+      handleSelectionChange([fixedBottomOption.value]);
+    } else {
+      handleSelectionChange(newValues);
+    }
+  };
+  const checkListProps = {
+    CustomRow,
+    horizontalSpacing,
     isSimple: !multiple,
-    itemDataTestId: itemDataTestId,
+    itemDataTestId,
     onChange: handleSelectionChange,
-    options: filteredOptions,
     reversed: true,
     showSelectAll: false,
     value: multiple ? value : [value],
-    variant: "button",
-    version: "V1",
-    verticalSpacing: verticalSpacing
-  }));
+    variant: 'button',
+    version: 'V1',
+    verticalSpacing
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.listbox
+  }, hasNoOptions ? /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    className: styles.noOptionsLabel
+  }, noMatchesText) : /*#__PURE__*/React.createElement(ScrollBar, {
+    style: {
+      maxHeight: scrollMaxHeight
+    }
+  }, /*#__PURE__*/React.createElement(UTCheckList, _extends({}, checkListProps, {
+    dataTestId: dataTestId,
+    options: filteredOptions
+  }))), fixedBottomOption && /*#__PURE__*/React.createElement("div", {
+    ref: fixedSectionRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.fixedOptionDivider
+  }), /*#__PURE__*/React.createElement(UTCheckList, _extends({}, checkListProps, {
+    onChange: handleFixedOptionChange,
+    options: [fixedBottomOption]
+  }))));
 };
 ListboxComponent.propTypes = {
   CustomRow: elementType,
@@ -54,6 +82,10 @@ ListboxComponent.propTypes = {
     name: string,
     value: oneOfType([string, number])
   })),
+  fixedBottomOption: shape({
+    name: string,
+    value: oneOfType([string, number])
+  }),
   handleSelectionChange: func,
   horizontalSpacing: string,
   itemDataTestId: string,

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

@@ -1,3 +1,14 @@
+.listbox {
+  display: flex;
+  flex-direction: column;
+}
+
 .noOptionsLabel {
   text-align: center;
 }
+
+.fixedOptionDivider {
+  background-color: var(--light04);
+  height: 1px;
+  margin: var(--padding-md) calc(var(--padding-md) * -1);
+}

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

@@ -29,7 +29,10 @@ const UTSelect = _ref => {
     disableFilterOptions = false,
     error,
     errorDataTestId,
+    fixedBottomOption,
     freeWidth = false,
+    hideSingleCategoryTitle = false,
+    paperClassName,
     helpText,
     icon,
     inputSize,
@@ -64,26 +67,38 @@ const UTSelect = _ref => {
     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 sorted = clonedOptions.sort((a, b) => categoryOrder.get(a.category) - categoryOrder.get(b.category));
+    if (hideSingleCategoryTitle && categoryOrder.size <= 1) {
+      return sorted.map(_ref2 => {
+        let {
+          category: _category,
+          ...rest
+        } = _ref2;
+        return rest;
+      });
+    }
+    return sorted;
+  }, [options, hideSingleCategoryTitle]);
+  const displayOptions = useMemo(() => fixedBottomOption ? [...optionsSortedByCategory, fixedBottomOption] : optionsSortedByCategory, [optionsSortedByCategory, fixedBottomOption]);
   const [isPopperOpen, setIsPopperOpen] = useState(false);
-  const [searchTerm, setSearchTerm] = useState(getDisplayValue(value, optionsSortedByCategory, multiple));
+  const [searchTerm, setSearchTerm] = useState(getDisplayValue(value, displayOptions, multiple));
   const [showClearButton, setShowClearButton] = useState(!!searchTerm);
   const [sortedOptions, setSortedOptions] = useState(optionsSortedByCategory);
   const inputRef = useRef(null);
   useEffect(() => {
-    if (withAutoReset && shouldReset(value, optionsSortedByCategory, multiple)) {
+    const fixedIsSelected = fixedBottomOption && (multiple ? Array.isArray(value) && value.includes(fixedBottomOption.value) : value === (fixedBottomOption === null || fixedBottomOption === void 0 ? void 0 : fixedBottomOption.value));
+    if (withAutoReset && !fixedIsSelected && shouldReset(value, optionsSortedByCategory, multiple)) {
       onChange(null);
       setSortedOptions(sortOptions(optionsSortedByCategory, null, multiple));
     }
-  }, [multiple, onChange, optionsSortedByCategory, value, withAutoReset]);
+  }, [multiple, onChange, optionsSortedByCategory, value, withAutoReset, fixedBottomOption]);
   useEffect(() => {
     if (!isPopperOpen) {
-      const displayValue = getDisplayValue(value, optionsSortedByCategory, multiple);
+      const displayValue = getDisplayValue(value, displayOptions, multiple);
       setSearchTerm(displayValue);
       setShowClearButton(displayValue);
     }
-  }, [value, optionsSortedByCategory, multiple, isPopperOpen]);
+  }, [value, displayOptions, multiple, isPopperOpen]);
   useEffect(() => {
     if (isPopperOpen) {
       setSortedOptions(sortOptions(optionsSortedByCategory, value, multiple));
@@ -97,17 +112,21 @@ const UTSelect = _ref => {
   }, [isPopperOpen]);
   const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
   const isPicker = variant === VARIANTS.picker;
-  const filteredOptions = useMemo(() => disableFilterOptions || isPicker ? sortedOptions : sortedOptions.filter(option => "".concat(option.name).toLowerCase().includes(searchTerm.toLowerCase())), [sortedOptions, searchTerm, disableFilterOptions, isPicker]);
+  const filteredOptions = useMemo(() => {
+    const base = disableFilterOptions || isPicker ? sortedOptions : sortedOptions.filter(option => "".concat(option.name).toLowerCase().includes(searchTerm.toLowerCase()));
+    if (!fixedBottomOption) return base;
+    return base.filter(opt => opt.value !== fixedBottomOption.value);
+  }, [sortedOptions, searchTerm, disableFilterOptions, isPicker, fixedBottomOption]);
   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);
+    const displayValue = getDisplayValue(inputValue, displayOptions, multiple);
     handleSearchChange(displayValue);
     setShowClearButton(displayValue !== '');
-  }, [getDisplayValue, optionsSortedByCategory, multiple, handleSearchChange]);
+  }, [getDisplayValue, displayOptions, multiple, handleSearchChange]);
   const handleSelectionChange = newValues => {
     const selectedValue = multiple ? newValues : newValues.length > 0 ? newValues[0] : '';
     onChange(selectedValue);
@@ -153,13 +172,14 @@ const UTSelect = _ref => {
     CustomRow,
     dataTestId: listDataTestId,
     filteredOptions,
+    fixedBottomOption,
     handleSelectionChange,
     itemDataTestId,
     multiple,
     noMatchesText,
     value,
     ...listProps
-  }), [CustomRow, filteredOptions, handleSelectionChange, multiple, noMatchesText, value, listProps]);
+  }), [CustomRow, filteredOptions, fixedBottomOption, handleSelectionChange, multiple, noMatchesText, value, listProps]);
   const menuWidthRef = useRef(menuWidth);
   menuWidthRef.current = menuWidth;
   const CustomPopper = useCallback(props => {
@@ -183,11 +203,15 @@ const UTSelect = _ref => {
     actions: titleActions,
     required: required,
     size: titleVariant
-  }, title), /*#__PURE__*/React.createElement(Autocomplete, _extends({}, freeWidth && !menuWidth ? {
+  }, title), /*#__PURE__*/React.createElement(Autocomplete, _extends({
     classes: {
-      popper: styles.popper
-    }
-  } : {}, {
+      ...(freeWidth && !menuWidth ? {
+        popper: styles.popper
+      } : {}),
+      ...(paperClassName ? {
+        paper: paperClassName
+      } : {})
+    },
     PopperComponent: CustomPopper,
     disabled: disabled || readOnly,
     getOptionLabel: option => "".concat(option.name),

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

@@ -18,7 +18,13 @@ export const utselectTypes = {
   disableFilterOptions: bool,
   error: string,
   errorDataTestId: string,
+  fixedBottomOption: shape({
+    name: string,
+    value: oneOfType([string, number])
+  }),
   freeWidth: bool,
+  hideSingleCategoryTitle: bool,
+  paperClassName: string,
   helpText: string,
   icon: string,
   inputSize: string,