@widergy/energy-ui 3.168.0 → 3.169.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.169.0](https://github.com/widergy/energy-ui/compare/v3.168.0...v3.169.0) (2026-06-18)
+
+
+### Features
+
+* custom row component ut select ([#821](https://github.com/widergy/energy-ui/issues/821)) ([1723ad0](https://github.com/widergy/energy-ui/commit/1723ad0527381f7772644a4a46dd6dbf4efdfdaa))
+
 # [3.168.0](https://github.com/widergy/energy-ui/compare/v3.167.1...v3.168.0) (2026-06-18)
 
 

package/dist/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/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']} />