@widergy/energy-ui 3.168.0 → 3.170.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/UTDotMenu/index.js

@@ -12,6 +12,7 @@ const UTDotMenu = _ref => {
   let {
     className,
     classNames = DEFAULT_PROPS.classNames,
+    dataTestId,
     disabled,
     Icon = DEFAULT_PROPS.Icon,
     menuItemProps,
@@ -21,12 +22,14 @@ const UTDotMenu = _ref => {
   } = _ref;
   const [anchorEl, setAnchorEl] = useState(null);
   return /*#__PURE__*/React.createElement("div", {
-    className: className
+    className: className,
+    "data-testid": dataTestId
   }, /*#__PURE__*/React.createElement(UTButton, {
     classNames: {
       icon: classNames.icon,
       root: classNames.button
     },
+    dataTestId: dataTestId ? "".concat(dataTestId, ".button") : undefined,
     disabled: disabled,
     Icon: Icon,
     onClick: event => setAnchorEl(event.currentTarget),
@@ -44,15 +47,18 @@ const UTDotMenu = _ref => {
       },
       ...(menuProps === null || menuProps === void 0 ? void 0 : menuProps.PaperProps)
     }
-  }), options.map(option => {
+  }), options.map((option, index) => {
     const {
       colorTheme,
+      dataTestId: optionTestId,
       icon,
       iconProps,
       name,
       onPress
     } = option;
+    const itemTestId = optionTestId !== null && optionTestId !== void 0 ? optionTestId : dataTestId ? "".concat(dataTestId, ".").concat(index) : undefined;
     return /*#__PURE__*/React.createElement(MenuItem, _extends({
+      "data-testid": itemTestId,
       key: name,
       onClick: onPress
     }, menuItemProps), icon && /*#__PURE__*/React.createElement(UTIcon, _extends({
@@ -70,12 +76,14 @@ UTDotMenu.propTypes = {
     button: string,
     icon: string
   }),
+  dataTestId: string,
   disabled: bool,
   Icon: oneOfType([elementType, string]),
   menuItemProps: object,
   menuProps: object,
   options: arrayOf(shape({
     colorTheme: string,
+    dataTestId: string,
     icon: string,
     iconProps: object,
     name: string,

package/dist/esm/components/UTDotMenu/stories/UTDotMenu.stories.js

@@ -42,6 +42,18 @@ export default {
         }
       }
     },
+    dataTestId: {
+      control: 'text',
+      description: 'Test id del contenedor raíz. El botón trigger recibe automáticamente el valor de esta prop con el sufijo `.button`. ' + 'Cada ítem del menú usa su propio `dataTestId` directamente (sin concatenación con el contenedor).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
     classNames: {
       control: false,
       description: 'Clases personalizadas para el botón trigger. Acepta `button` e `icon`.',
@@ -104,13 +116,13 @@ export default {
     },
     options: {
       control: false,
-      description: 'Array de opciones del menú. Cada opción puede incluir `icon`, `colorTheme` e `iconProps` para pasar props extra a UTIcon.',
+      description: 'Array de opciones del menú. Cada opción puede incluir `icon`, `colorTheme`, `iconProps` para props extra a UTIcon, ' + 'y `dataTestId` para identificar el ítem. El test id del ítem se usa directamente tal como se provee en la opción.',
       table: {
         defaultValue: {
           summary: 'undefined'
         },
         type: {
-          summary: 'arrayOf(shape({ name, onPress, colorTheme?, icon?, iconProps? }))'
+          summary: 'arrayOf(shape({ name, onPress, colorTheme?, dataTestId?, icon?, iconProps? }))'
         }
       }
     },
@@ -254,6 +266,33 @@ export const ConIconProps = {
     }
   }
 };
+export const ConTestIds = {
+  args: {
+    dataTestId: 'section.dotMenu',
+    options: [{
+      name: 'Editar',
+      icon: 'IconPencil',
+      dataTestId: 'section.dotMenu.edit'
+    }, {
+      name: 'Duplicar',
+      icon: 'IconCopy',
+      dataTestId: 'section.dotMenu.duplicate'
+    }, {
+      name: 'Eliminar',
+      icon: 'IconTrash',
+      colorTheme: 'error',
+      dataTestId: 'section.dotMenu.delete'
+    }]
+  },
+  name: 'Con test ids',
+  parameters: {
+    docs: {
+      description: {
+        story: 'El contenedor recibe `dataTestId="section.dotMenu"` y el botón trigger recibe `"section.dotMenu.button"` automáticamente. ' + 'Cada ítem usa su propio `dataTestId` tal como se provee, sin concatenación con el contenedor.'
+      }
+    }
+  }
+};
 export const BotonDeshabilitado = {
   args: {
     disabled: true,

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