@widergy/energy-ui 3.168.0 → 3.169.0

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

@@ -17,6 +17,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ListboxComponent = _ref => {
   let {
+    CustomRow,
     dataTestId,
     filteredOptions,
     handleSelectionChange,
@@ -38,6 +39,7 @@ const ListboxComponent = _ref => {
       maxHeight: maxHeightValid
     }
   }, /*#__PURE__*/_react.default.createElement(_UTCheckList.default, {
+    CustomRow: CustomRow,
     dataTestId: dataTestId,
     horizontalSpacing: horizontalSpacing,
     isSimple: !multiple,
@@ -53,6 +55,7 @@ const ListboxComponent = _ref => {
   }));
 };
 ListboxComponent.propTypes = {
+  CustomRow: _propTypes.elementType,
   dataTestId: _propTypes.string,
   filteredOptions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     name: _propTypes.string,

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

@@ -30,6 +30,7 @@ const UTSelect = _ref => {
     autocompleteProps = {},
     className,
     clearable = true,
+    CustomRow,
     dataTestId,
     disabled,
     disableFilterOptions = false,
@@ -172,6 +173,7 @@ const UTSelect = _ref => {
     variant: variant
   }), [alwaysShowPlaceholder, disabled, error, handleInputBlur, handleInputFocus, leftAdornments, placeholder, rightAdornments, searchTerm]);
   const listBoxProps = (0, _react.useMemo)(() => ({
+    CustomRow,
     dataTestId: listDataTestId,
     filteredOptions,
     handleSelectionChange,
@@ -180,7 +182,7 @@ const UTSelect = _ref => {
     noMatchesText,
     value,
     ...listProps
-  }), [filteredOptions, handleSelectionChange, multiple, noMatchesText, value, listProps]);
+  }), [CustomRow, filteredOptions, handleSelectionChange, multiple, noMatchesText, value, listProps]);
   const noOptionsTextComponent = /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: _stylesModule.default.noOptionsLabel,
     colorTheme: "gray"
@@ -227,6 +229,7 @@ UTSelect.propTypes = {
   autocompleteProps: _propTypes.object,
   className: _propTypes.string,
   clearable: _propTypes.bool,
+  CustomRow: _propTypes.elementType,
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   disableFilterOptions: _propTypes.bool,

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

@@ -14,6 +14,7 @@
 | 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.                                                         |
@@ -231,6 +232,40 @@ const ReadOnlyExample = () => {
 };
 ```
 
+### 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

package/dist/esm/components/UTSelect/versions/V1/UTSelectV1.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTSelectV1Stories from './UTSelectV1.stories.js';
+
+<Meta of={UTSelectV1Stories} />
+
+<Title>UTSelect V1</Title>
+
+<Description of={UTSelectV1Stories} />
+
+<Canvas of={UTSelectV1Stories.Playground} withToolbar />
+
+<ArgTypes exclude={['classes']} />