@widergy/energy-ui 3.171.3 → 3.172.1

package/CHANGELOG.md

@@ -1,9 +1,26 @@
-## [3.171.3](https://github.com/widergy/energy-ui/compare/v3.171.2...v3.171.3) (2026-06-29)
+## [3.172.1](https://github.com/widergy/energy-ui/compare/v3.172.0...v3.172.1) (2026-07-03)
 
 
 ### Bug Fixes
 
-* [CX-2712] selected marker z index google map ([#829](https://github.com/widergy/energy-ui/issues/829)) ([7a90960](https://github.com/widergy/energy-ui/commit/7a90960a618da21faf18f2e8d8fa3e3c09be321e))
+* [DIS-1108] ajustes utbutton ([#824](https://github.com/widergy/energy-ui/issues/824)) ([46b1ef8](https://github.com/widergy/energy-ui/commit/46b1ef8e07217bd75451b962236f98790c544f4b))
+
+# [3.172.0](https://github.com/widergy/energy-ui/compare/v3.171.3...v3.172.0) (2026-07-02)
+
+### Novedades y Mejoras
+
+* En los selectores desplegables, ahora es posible fijar una opción al pie de la lista que permanece siempre visible, incluso al filtrar por búsqueda o al no encontrar resultados. [#830](https://github.com/widergy/Energy-UI/pull/830) [AXCH-1900](https://widergy.atlassian.net/browse/AXCH-1900)
+
+### Correcciones
+
+* Mejoras internas de la plataforma. [`56be941`](https://github.com/widergy/Energy-UI/commit/56be941)
+
+## [3.171.3](https://github.com/widergy/energy-ui/compare/v3.171.2...v3.171.3) (2026-06-29)
+
+### Correcciones
+
+* Al tocar un marcador en el mapa, este ahora queda visible por encima de otros marcadores cercanos o superpuestos. [#829](https://github.com/widergy/Energy-UI/pull/829) [CX-2712](https://widergy.atlassian.net/browse/CX-2712)
+* Mejoras internas de la plataforma. [`caa1f1a`](https://github.com/widergy/Energy-UI/commit/caa1f1a)
 
 ## [3.171.2](https://github.com/widergy/energy-ui/compare/v3.171.1...v3.171.2) (2026-06-27)
 

package/dist/components/UTButton/constants.js

@@ -24,6 +24,8 @@ const ICON_PLACEMENTS = exports.ICON_PLACEMENTS = {
 const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
   colorTheme: 'secondary',
   disabled: false,
+  fullHeight: false,
+  fullWidth: false,
   hideTextOnResponsive: false,
   iconPlacement: ICON_PLACEMENTS.left,
   loading: false,

package/dist/components/UTButton/index.js

@@ -29,6 +29,8 @@ const UTButton = _ref => {
     count,
     dataTestId,
     disabled,
+    fullHeight,
+    fullWidth,
     hideTextOnResponsive,
     Icon,
     iconPlacement,
@@ -58,7 +60,6 @@ const UTButton = _ref => {
   } = (0, _react.useMemo)(() => (0, _utils.getIconProps)({
     className: icon,
     colorTheme,
-    hasContent: !!children,
     hideTextOnResponsive,
     Icon,
     iconPlacement,
@@ -66,7 +67,7 @@ const UTButton = _ref => {
     RightIcon,
     size,
     variant
-  }), [colorTheme, children, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
+  }), [colorTheme, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
   const LeftIconToShow = LeftIconComponent && /*#__PURE__*/_react.default.createElement(LeftIconComponent, _extends({}, leftIconBaseProps, leftIconProps));
   const RightIconToShow = RightIconComponent && /*#__PURE__*/_react.default.createElement(RightIconComponent, _extends({}, rightIconBaseProps, rightIconProps));
   const counterColorTheme = (0, _utils.getCounterColorTheme)(colorTheme, variant);
@@ -80,7 +81,7 @@ const UTButton = _ref => {
   }), children), RightIconToShow);
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
     classes: materialButtonClasses,
-    className: "\n        ".concat(_stylesModule.default["padding".concat((0, _componentUtils.capitalize)(size))], "\n        ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, "\n        ").concat(!hideTextOnResponsive && !children && _stylesModule.default.noChildren, "\n      "),
+    className: "\n        ".concat(_stylesModule.default["padding".concat((0, _componentUtils.capitalize)(size))], "\n        ").concat(fullHeight && _stylesModule.default.fullHeight, "\n        ").concat(fullWidth && _stylesModule.default.fullWidth, "\n        ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, "\n        ").concat(!hideTextOnResponsive && !children && _stylesModule.default.noChildren, "\n      "),
     "data-testid": dataTestId,
     disabled: disabled || loading,
     onClick: onClick,
@@ -98,6 +99,8 @@ UTButton.propTypes = {
   count: _propTypes.number,
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
+  fullHeight: _propTypes.bool,
+  fullWidth: _propTypes.bool,
   hideTextOnResponsive: _propTypes.bool,
   /**
    * @deprecated Use LeftIcon or RightIcon instead.

package/dist/components/UTButton/stories/UTButtonSizes.stories.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Small = exports.Medium = exports.Large = void 0;
+exports.default = exports.Small = exports.Medium = exports.Large = exports.FullHeight = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _ = _interopRequireDefault(require(".."));
 var _storiesConstants = require("./storiesConstants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -37,4 +38,18 @@ const Large = exports.Large = {
     children: 'Large Size',
     size: 'large'
   }
+};
+const FullHeight = exports.FullHeight = {
+  args: {
+    children: 'Full Height',
+    fullHeight: true
+  },
+  render: args => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      height: 80,
+      border: '1px dashed #ccc',
+      padding: 8
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.default, args))
 };

package/dist/components/UTButton/stories/storiesConstants.js

@@ -93,6 +93,30 @@ const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
       }
     }
   },
+  fullHeight: {
+    control: 'boolean',
+    description: 'Si es `true`, el botón ocupa el alto completo de su contenedor padre. Desactiva el `min-height` por tamaño.',
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.fullHeight
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  fullWidth: {
+    control: 'boolean',
+    description: 'Si es `true`, el botón ocupa el ancho completo de su contenedor padre. Desactiva el `min-width`.',
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.fullWidth
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
   hideTextOnResponsive: {
     control: 'boolean',
     description: 'Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.',
@@ -222,6 +246,8 @@ const COMMON_ARGS = exports.COMMON_ARGS = {
   colorTheme: _constants.DEFAULT_PROPS.colorTheme,
   dataTestId: 'customButtonId',
   disabled: _constants.DEFAULT_PROPS.disabled,
+  fullHeight: _constants.DEFAULT_PROPS.fullHeight,
+  fullWidth: _constants.DEFAULT_PROPS.fullWidth,
   hideTextOnResponsive: _constants.DEFAULT_PROPS.hideTextOnResponsive,
   loading: _constants.DEFAULT_PROPS.loading,
   size: _constants.DEFAULT_PROPS.size,

package/dist/components/UTButton/styles.module.scss

@@ -65,6 +65,16 @@ $small-icon: var(--UT-button-icon-size-sm, 1.25rem);
   padding: var(--UT-button-padding-xs, 0.25rem) var(--UT-button-padding-sm, 0.5rem);
 }
 
+.fullHeight {
+  min-height: unset;
+  height: 100%;
+}
+
+.fullWidth {
+  min-width: unset;
+  width: 100%;
+}
+
 .hideTextOnResponsive {
   .textContainer {
     @media #{$mobile} {

package/dist/components/UTButton/theme.js

@@ -50,7 +50,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
       }
     },
     [_constants.VARIANTS_NAMES.outlined]: {
-      border: "1px solid ".concat(actionColorName === _constants.COLORS_MAPPER.secondary ? neutralTheme['05'] : lightTheme['04']),
+      border: "1px solid ".concat(lightTheme['04']),
       fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
       '&:hover': {
         backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],

package/dist/components/UTButton/utils.js

@@ -15,7 +15,6 @@ const buildSingleIconProps = _ref => {
   let {
     className,
     colorTheme,
-    hasContent,
     hideTextOnResponsive,
     Icon,
     size,
@@ -24,7 +23,7 @@ const buildSingleIconProps = _ref => {
   if (!Icon) return null;
   return {
     IconComponent: (0, _componentUtils.isUTIcon)(Icon) ? _UTIcon.default : Icon,
-    className: "\n      ".concat(_stylesModule.default.baseIcon, "\n      ").concat(className, "\n      ").concat(hasContent ? _stylesModule.default.icon : _stylesModule.default["iconOnly".concat((0, _componentUtils.capitalize)(size))], "\n      ").concat(hideTextOnResponsive ? _stylesModule.default["adaptableIcon".concat((0, _componentUtils.capitalize)(size))] : '', "\n    "),
+    className: "\n      ".concat(_stylesModule.default.baseIcon, "\n      ").concat(className, "\n      ").concat(_stylesModule.default.icon, "\n      ").concat(hideTextOnResponsive ? _stylesModule.default["adaptableIcon".concat((0, _componentUtils.capitalize)(size))] : '', "\n    "),
     ...((0, _componentUtils.isUTIcon)(Icon) ? {
       colorTheme: getButtonElementColorTheme(colorTheme, variant),
       name: Icon
@@ -35,7 +34,6 @@ const getIconProps = _ref2 => {
   let {
     className,
     colorTheme,
-    hasContent,
     hideTextOnResponsive,
     Icon,
     iconPlacement,
@@ -49,7 +47,6 @@ const getIconProps = _ref2 => {
   const commonParams = {
     className,
     colorTheme,
-    hasContent,
     hideTextOnResponsive,
     size,
     variant

package/dist/components/UTDataCategory/theme.js

@@ -11,7 +11,7 @@ const backgroundColor = function (theme, area) {
   const colorTheme = areaProps.colorTheme || _Palette.COLOR_THEMES.light;
   const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
   const areaColor = actionPaletteColors[colorTheme];
-  const shade = areaProps.shade || (_Palette.COLOR_THEMES.light === colorTheme ? '03' : '01');
+  const shade = areaProps.shade || (_Palette.COLOR_THEMES.light === colorTheme ? _Palette.COLOR_SHADES.shade03 : _Palette.COLOR_SHADES.shade01);
   return {
     backgroundColor: area ? areaColor[shade] : 'transparent'
   };

package/dist/components/UTDataElement/README.md

@@ -134,4 +134,4 @@ If the component has any `children`, it will automatically become collapsible wi
 
 ```javascript
 <UTDataElement area title="Highlighted Item" Data="Important information" Icon="IconStar" />
-```
+```

package/dist/components/UTPaper/index.js

@@ -15,15 +15,17 @@ const UTPaper = _ref => {
   let {
     children,
     classes,
+    className,
     ...otherProps
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_core.Paper, _extends({}, otherProps, {
-    className: classes.paper
+    className: "".concat(classes.paper).concat(className ? " ".concat(className) : '')
   }), children);
 };
 UTPaper.propTypes = {
   children: _propTypes.object,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
+  className: _propTypes.string,
   otherProps: _propTypes.object
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTPaper);

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

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SeleccionMultiple = exports.ListaLarga = exports.ListaCorta = exports.ConCategorias = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _2 = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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 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] = (0, _react.useState)(multiple ? [] : null);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: wrapperStyle
+  }, /*#__PURE__*/_react.default.createElement(_2.default, _extends({}, props, {
+    multiple: multiple,
+    onChange: setValue,
+    value: value,
+    version: "V1"
+  })));
+};
+SelectWrapper.propTypes = {
+  multiple: _propTypes.bool,
+  title: _propTypes.string
+};
+var _default = exports.default = {
+  component: _2.default,
+  title: 'Energy-UI/UTSelect/Con opción fija'
+};
+const ListaLarga = exports.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.default.createElement(SelectWrapper, args)
+};
+const ListaCorta = exports.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.default.createElement(SelectWrapper, args)
+};
+const ConCategorias = exports.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.default.createElement(SelectWrapper, args)
+};
+const SeleccionMultiple = exports.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.default.createElement(SelectWrapper, args)
+};

package/dist/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/components/UTSelect/versions/V1/components/ListboxComponent/index.js

@@ -16,11 +16,13 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _constants2 = require("./constants");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 ListboxComponent = _ref => {
   let {
     CustomRow,
     dataTestId,
     filteredOptions,
+    fixedBottomOption,
     handleSelectionChange,
     horizontalSpacing = _constants.SPACING.SMALL,
     itemDataTestId,
@@ -32,28 +34,54 @@ const ListboxComponent = _ref => {
   } = _ref;
   const hasNoOptions = (0, _react.useMemo)(() => (0, _isEmpty.default)(filteredOptions), [filteredOptions]);
   const maxHeightValid = (0, _react.useMemo)(() => (0, _isFinite.default)(maxHeight) ? maxHeight : _constants2.DEFAULT_MAX_HEIGHT, [maxHeight]);
-  return hasNoOptions ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    colorTheme: "gray",
-    className: _stylesModule.default.noOptionsLabel
-  }, noMatchesText) : /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
-    style: {
-      maxHeight: maxHeightValid
+  const fixedSectionRef = (0, _react.useRef)(null);
+  const [reservedHeight, setReservedHeight] = (0, _react.useState)(0);
+  (0, _react.useLayoutEffect)(() => {
+    if (fixedSectionRef.current) {
+      setReservedHeight(fixedSectionRef.current.offsetHeight);
     }
-  }, /*#__PURE__*/_react.default.createElement(_UTCheckList.default, {
-    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.default.createElement("div", {
+    className: _stylesModule.default.listbox
+  }, hasNoOptions ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    className: _stylesModule.default.noOptionsLabel
+  }, noMatchesText) : /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
+    style: {
+      maxHeight: scrollMaxHeight
+    }
+  }, /*#__PURE__*/_react.default.createElement(_UTCheckList.default, _extends({}, checkListProps, {
+    dataTestId: dataTestId,
+    options: filteredOptions
+  }))), fixedBottomOption && /*#__PURE__*/_react.default.createElement("div", {
+    ref: fixedSectionRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.fixedOptionDivider
+  }), /*#__PURE__*/_react.default.createElement(_UTCheckList.default, _extends({}, checkListProps, {
+    onChange: handleFixedOptionChange,
+    options: [fixedBottomOption]
+  }))));
 };
 ListboxComponent.propTypes = {
   CustomRow: _propTypes.elementType,
@@ -62,6 +90,10 @@ ListboxComponent.propTypes = {
     name: _propTypes.string,
     value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number])
   })),
+  fixedBottomOption: (0, _propTypes.shape)({
+    name: _propTypes.string,
+    value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number])
+  }),
   handleSelectionChange: _propTypes.func,
   horizontalSpacing: _propTypes.string,
   itemDataTestId: _propTypes.string,

package/dist/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);
+}