@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/components/UTShortcutPanel/stories/UTShortcutPanel.stories.js

@@ -0,0 +1,406 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TestingSite = exports.Playground = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _test = require("@storybook/test");
+var _utils = require("stories/utils");
+var _UTBodyPlaceholder = _interopRequireDefault(require("../../UTBodyPlaceholder"));
+var _ = _interopRequireDefault(require(".."));
+var _constants = require("../constants");
+var _testIds = require("../../../constants/testIds");
+var _propsSchema = _interopRequireDefault(require("./props.schema.json"));
+var _constants2 = _interopRequireDefault(require("./constants.json"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _tests = require("./tests");
+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 {
+  filterGrouping
+} = _testIds.TEST_IDS;
+var _default = exports.default = {
+  args: {
+    categories: _constants2.default.CATEGORIES,
+    categoriesConfig: _constants2.default.CATEGORIES_CONFIG,
+    children: undefined,
+    classNames: undefined,
+    dataTestId: _constants2.default.DATA_TEST_ID,
+    disableCollapsibleCategories: false,
+    handleSelectFilter: (0, _test.fn)(),
+    hideAddFilterButton: false,
+    iconProps: undefined,
+    invalidParamsConfig: undefined,
+    noFiltersTitle: _constants2.default.NO_FILTERS_TITLE,
+    noFiltersText: _constants2.default.NO_FILTERS_TEXT,
+    onDeleteFilterGrouping: (0, _test.fn)(),
+    onEditFilterGrouping: (0, _test.fn)(),
+    onTogglePanel: (0, _test.fn)(),
+    panelTitle: _constants2.default.PANEL_TITLE,
+    position: _constants2.default.POSITION,
+    searchResetKey: undefined,
+    selectedFilter: undefined,
+    scrollProps: undefined,
+    showActionsOnPinned: false,
+    startOpen: true,
+    tooltipsContentMap: _constants2.default.TOOLTIPS_CONTENT_MAP
+  },
+  argTypes: {
+    categories: {
+      control: {
+        type: 'none'
+      },
+      description: 'Data necesaria para renderizar el contenido del panel',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'categoryType[]'
+        }
+      }
+    },
+    categoriesConfig: {
+      control: 'none',
+      description: 'Configuración de iconos y colores para el avatar de cada categoría',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Record<string, categoryConfigType>'
+        }
+      }
+    },
+    children: {
+      control: 'none',
+      description: 'Contenido wrappeado por el componente `UTShortcutPanel`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'node'
+        }
+      }
+    },
+    classNames: {
+      control: 'none',
+      description: 'Clases personalizadas.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Record<string, string>'
+        }
+      }
+    },
+    classes: {
+      control: 'none',
+      description: 'Tema personalizado. Esta prop NO debería ser usada.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Record<string, string>'
+        }
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: '`dataTestId` que se usará como base para generar los `ids` de los componentes internos.',
+      table: {
+        defaultValue: {
+          summary: filterGrouping.groupingPanel.collapsedPanelContent.expandButton
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    disableCollapsibleCategories: {
+      control: 'boolean',
+      description: 'Si es `true`, las categorías no se pueden colapsar.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    handleSelectFilter: {
+      action: 'hi',
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se selecciona un filtro.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Function'
+        }
+      }
+    },
+    hideAddFilterButton: {
+      control: 'boolean',
+      description: 'Si es `true`, el botón de agregar filtro no se muestra.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    iconProps: {
+      control: 'select',
+      options: ['default', 'IconX, gray, 18', 'IconHome, error, 30'],
+      mapping: {
+        default: undefined,
+        'IconX, gray, 18': {
+          name: 'IconX',
+          colorTheme: 'gray',
+          size: 18
+        },
+        'IconHome, error, 30': {
+          name: 'IconHome',
+          colorTheme: 'error',
+          size: 30
+        }
+      },
+      description: 'Props para renderizar un icono custom cuando el paner está cerrado.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'iconPropTypes'
+        }
+      }
+    },
+    invalidParamsConfig: {
+      control: 'object',
+      description: 'Configuración del ícono de advertencia que se muestra en ítems con `hasInvalidParams: true`. Si se pasa `tooltipText`, el ícono muestra un tooltip al hacer hover. `iconName` e `size` son opcionales (defaults: `IconAlertTriangle`, `16`).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: '{ iconName?: string; size?: string; tooltipText?: string }'
+        }
+      }
+    },
+    noFiltersTitle: {
+      control: 'text',
+      description: 'Título para el componente de filtros vacíos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    noFiltersText: {
+      control: 'text',
+      description: 'Texto para el componente de filtros vacíos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onDeleteFilterGrouping: {
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se presiona el botón de eliminar un filtro.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Function'
+        }
+      }
+    },
+    onEditFilterGrouping: {
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se presiona el botón de editar un filtro.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Function'
+        }
+      }
+    },
+    onTogglePanel: {
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se presiona el botón de toggle del panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Function'
+        }
+      }
+    },
+    panelTitle: {
+      control: 'text',
+      description: 'Título del panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    position: {
+      control: 'radio',
+      description: 'Posición del panel y la barra lateral.',
+      options: Object.values(_constants.PANEL_POSITIONS),
+      table: {
+        defaultValue: {
+          summary: 'left'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(Object.values(_constants.PANEL_POSITIONS))
+        }
+      }
+    },
+    scrollProps: {
+      control: 'none',
+      description: 'Props para el componente de scroll.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    searchResetKey: {
+      control: 'text',
+      description: 'Cuando cambia de valor, resetea el estado de búsqueda interna del panel. Útil para limpiar el input al cambiar de tab o categoría.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string | number'
+        }
+      }
+    },
+    selectedFilter: {
+      control: 'none',
+      description: 'Filtro seleccionado.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'filterType'
+        }
+      }
+    },
+    showActionsOnPinned: {
+      control: 'boolean',
+      description: 'Si es `true`, los botones de editar y eliminar se muestran también en ítems con `pinned: true`. Por defecto son ocultados en filtros pinned.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    startOpen: {
+      control: 'boolean',
+      description: 'Indica si el panel se renderiza abierto.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    tooltipsContentMap: {
+      control: 'none',
+      description: 'Mapa de contenido para los tooltips.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Record<string, string>'
+        }
+      }
+    }
+  },
+  component: _.default,
+  parameters: {
+    jsonschema: {
+      schema: _propsSchema.default
+    },
+    controls: {
+      exclude: ['categories', 'categoriesConfig', 'children', 'classNames', 'classes', 'handleSelectFilter', 'onDeleteFilterGrouping', 'onEditFilterGrouping', 'onTogglePanel', 'scrollProps', 'selectedFilter', 'tooltipsContentMap']
+    },
+    docs: {
+      description: {
+        component: 'Panel de filtros rápidos, con búsqueda y acciones de edición y eliminación de filtros y categorías colapsables.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTShortcutPanel'
+};
+const Playground = exports.Playground = {
+  name: 'Playground',
+  parameters: {
+    backgrounds: {
+      default: 'Oscuro'
+    }
+  },
+  render: args => {
+    const [selectedFilter, setSelectedFilter] = (0, _react.useState)(args.selectedFilter);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("section", {
+      className: _stylesModule.default.storyContainer
+    }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+      handleSelectFilter: filter => {
+        args.handleSelectFilter(filter);
+        setSelectedFilter(filter);
+      },
+      selectedFilter: selectedFilter
+    }), /*#__PURE__*/_react.default.createElement("section", {
+      className: _stylesModule.default.defaultContainer
+    }, /*#__PURE__*/_react.default.createElement(_UTBodyPlaceholder.default, {
+      classNames: {
+        bodyPlaceholder: _stylesModule.default.bodyPlaceholder
+      }
+    })))), /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "testingShield"
+    }));
+  }
+};
+const TestingSite = exports.TestingSite = {
+  ...Playground,
+  name: 'Test Site',
+  play: _tests.UTShortcutPanelTests
+};

package/dist/components/UTShortcutPanel/stories/fixtures.js

@@ -1 +1,162 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.filterItemsFixture=void 0;var _test=require("@storybook/test"),_testIds=require("../../../constants/testIds"),_constants=_interopRequireDefault(require("./constants.json")),_utils=require("./utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const{CLIENT_FILTER:CLIENT_FILTER,DELETE_BUTTON:DELETE_BUTTON,DELETE_BUTTON_TOOLTIP:DELETE_BUTTON_TOOLTIP,EDIT_BUTTON:EDIT_BUTTON,EDIT_BUTTON_TOOLTIP:EDIT_BUTTON_TOOLTIP,NAME:NAME,NAME_CONTAINER:NAME_CONTAINER,PINNED:PINNED,USER_FILTER:USER_FILTER}=_testIds.ID_CONSTANTS,{MISC:MISC}=_constants.default,{HOVERABLE_KEY:HOVERABLE_KEY,HOVERABLE_VALUE:HOVERABLE_VALUE,HTML_ELEMENTS:HTML_ELEMENTS}=MISC,{ARTICLE:ARTICLE,DIV:DIV}=HTML_ELEMENTS,filterItemsFixture=async _ref=>{let{args:args,canvas:canvas,category:category,existingIds:existingIds,filters:filters,step:step,suiteTitle:suiteTitle,testIds:testIds,tooltipsContentMap:tooltipsContentMap}=_ref;const{handleSelectFilter:handleSelectFilter,onDeleteFilterGrouping:onDeleteFilterGrouping,onEditFilterGrouping:onEditFilterGrouping}=args,{popperLabel:popperLabel,popperTitle:popperTitle}=testIds,{deleteButton:deleteButton,editButton:editButton}=tooltipsContentMap;await step(suiteTitle,async()=>{if(0!==filters.length)for(let index=0;index<filters.length;index++){const filter=filters[index],{description:description,name:itemName,pinned:pinned}=filter;await step("Item: ".concat(itemName),async()=>{const targetItemName=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(pinned?CLIENT_FILTER:USER_FILTER)&&id.includes(NAME)&&id.includes(index)&&!id.includes(NAME_CONTAINER)));await step("Initial content",async()=>{if(pinned){const targetPinnedIcon=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(PINNED)&&id.includes(index)));(0,_test.expect)(targetPinnedIcon).toBeInTheDocument()}(0,_test.expect)(targetItemName.innerText).toBe(itemName),(0,_test.expect)(targetItemName).toBeInTheDocument()});const targetItemNameContainer=targetItemName.closest(ARTICLE),targetItemTitleContainer=targetItemName.closest(DIV);if(await step("Select item",async()=>{await _test.userEvent.click(targetItemTitleContainer),(0,_test.expect)(handleSelectFilter).toHaveBeenCalled(),(0,_test.expect)(handleSelectFilter).toHaveBeenCalledWith(filter)}),!pinned){targetItemNameContainer.setAttribute(HOVERABLE_KEY,HOVERABLE_VALUE),await(0,_utils.delay)(500);const targetEditButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(USER_FILTER)&&id.includes(EDIT_BUTTON)&&id.includes(index))),targetDeleteButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(USER_FILTER)&&id.includes(DELETE_BUTTON)&&id.includes(index)));await step("Actions",async()=>{await step("Edit",async()=>{await _test.userEvent.click(targetEditButton),(0,_test.expect)(targetEditButton).toBeVisible(),(0,_test.expect)(onEditFilterGrouping).toHaveBeenCalled(),(0,_test.expect)(onEditFilterGrouping).toHaveBeenCalledWith(filter)}),await step("Delete",async()=>{await _test.userEvent.click(targetDeleteButton),(0,_test.expect)(targetDeleteButton).toBeVisible(),(0,_test.expect)(onDeleteFilterGrouping).toHaveBeenCalled(),(0,_test.expect)(onDeleteFilterGrouping).toHaveBeenCalledWith(filter)})})}await step("Hovers",async()=>{if((description||itemName.length>20)&&await step("Popper hover",async()=>{let targetPopperLabel;await _test.userEvent.hover(targetItemName),await(0,_utils.delay)(500),description&&(targetPopperLabel=_test.screen.getByTestId(popperLabel),(0,_test.expect)(targetPopperLabel).toBeVisible(),(0,_test.expect)(targetPopperLabel.innerText).toBe(description));const targetPopperTitle=_test.screen.getByTestId(popperTitle);(0,_test.expect)(targetPopperTitle).toBeVisible(),(0,_test.expect)(targetPopperTitle.innerText).toBe(itemName),await _test.userEvent.unhover(targetItemName),(0,_test.expect)(targetPopperTitle).not.toBeVisible(),description&&(0,_test.expect)(targetPopperLabel).not.toBeVisible()}),!pinned){const targetEditButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(USER_FILTER)&&id.includes(EDIT_BUTTON)&&id.includes(index))),targetDeleteButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(USER_FILTER)&&id.includes(DELETE_BUTTON)&&id.includes(index)));await step("Actions hover",async()=>{await step("Edit",async()=>{await _test.userEvent.hover(targetEditButton),await(0,_utils.delay)(500);const targetEditButtonTooltip=_test.screen.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(USER_FILTER)&&id.includes(EDIT_BUTTON_TOOLTIP)&&id.includes(index)));(0,_test.expect)(targetEditButtonTooltip).toBeVisible(),(0,_test.expect)(targetEditButtonTooltip.innerText).toBe(editButton),await _test.userEvent.unhover(targetEditButton),await(0,_utils.delay)(500),(0,_test.expect)(targetEditButtonTooltip).not.toBeVisible()}),await step("Delete",async()=>{await _test.userEvent.hover(targetDeleteButton),await(0,_utils.delay)(500);const targetDeleteButtonTooltip=_test.screen.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(USER_FILTER)&&id.includes(DELETE_BUTTON_TOOLTIP)&&id.includes(index)));(0,_test.expect)(targetDeleteButtonTooltip).toBeVisible(),(0,_test.expect)(targetDeleteButtonTooltip.innerText).toBe(deleteButton),await _test.userEvent.unhover(targetDeleteButton),await(0,_utils.delay)(500),(0,_test.expect)(targetDeleteButtonTooltip).not.toBeVisible()})})}}),targetItemNameContainer.removeAttribute(HOVERABLE_KEY)})}})};exports.filterItemsFixture=filterItemsFixture;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterItemsFixture = void 0;
+var _test = require("@storybook/test");
+var _testIds = require("../../../constants/testIds");
+var _constants = _interopRequireDefault(require("./constants.json"));
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  CLIENT_FILTER,
+  DELETE_BUTTON,
+  DELETE_BUTTON_TOOLTIP,
+  EDIT_BUTTON,
+  EDIT_BUTTON_TOOLTIP,
+  NAME,
+  NAME_CONTAINER,
+  PINNED,
+  USER_FILTER
+} = _testIds.ID_CONSTANTS;
+const {
+  MISC
+} = _constants.default;
+const {
+  HOVERABLE_KEY,
+  HOVERABLE_VALUE,
+  HTML_ELEMENTS
+} = MISC;
+const {
+  ARTICLE,
+  DIV
+} = HTML_ELEMENTS;
+const filterItemsFixture = async _ref => {
+  let {
+    args,
+    canvas,
+    category,
+    existingIds,
+    filters,
+    step,
+    suiteTitle,
+    testIds,
+    tooltipsContentMap
+  } = _ref;
+  const {
+    handleSelectFilter,
+    onDeleteFilterGrouping,
+    onEditFilterGrouping
+  } = args;
+  const {
+    popperLabel,
+    popperTitle
+  } = testIds;
+  const {
+    deleteButton,
+    editButton
+  } = tooltipsContentMap;
+  await step(suiteTitle, async () => {
+    if (filters.length === 0) {
+      return;
+    }
+    for (let index = 0; index < filters.length; index++) {
+      const filter = filters[index];
+      const {
+        description,
+        name: itemName,
+        pinned
+      } = filter;
+      // eslint-disable-next-line no-await-in-loop
+      await step("Item: ".concat(itemName), async () => {
+        const targetItemName = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(pinned ? CLIENT_FILTER : USER_FILTER) && id.includes(NAME) && id.includes(index) && !id.includes(NAME_CONTAINER)));
+        await step('Initial content', async () => {
+          if (pinned) {
+            const targetPinnedIcon = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(PINNED) && id.includes(index)));
+            (0, _test.expect)(targetPinnedIcon).toBeInTheDocument();
+          }
+          (0, _test.expect)(targetItemName.innerText).toBe(itemName);
+          (0, _test.expect)(targetItemName).toBeInTheDocument();
+        });
+        const targetItemNameContainer = targetItemName.closest(ARTICLE);
+        const targetItemTitleContainer = targetItemName.closest(DIV);
+        await step('Select item', async () => {
+          await _test.userEvent.click(targetItemTitleContainer);
+          (0, _test.expect)(handleSelectFilter).toHaveBeenCalled();
+          (0, _test.expect)(handleSelectFilter).toHaveBeenCalledWith(filter);
+        });
+        if (!pinned) {
+          targetItemNameContainer.setAttribute(HOVERABLE_KEY, HOVERABLE_VALUE);
+          await (0, _utils.delay)(500);
+          const targetEditButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(EDIT_BUTTON) && id.includes(index)));
+          const targetDeleteButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(DELETE_BUTTON) && id.includes(index)));
+          await step('Actions', async () => {
+            await step('Edit', async () => {
+              await _test.userEvent.click(targetEditButton);
+              (0, _test.expect)(targetEditButton).toBeVisible();
+              (0, _test.expect)(onEditFilterGrouping).toHaveBeenCalled();
+              (0, _test.expect)(onEditFilterGrouping).toHaveBeenCalledWith(filter);
+            });
+            await step('Delete', async () => {
+              await _test.userEvent.click(targetDeleteButton);
+              (0, _test.expect)(targetDeleteButton).toBeVisible();
+              (0, _test.expect)(onDeleteFilterGrouping).toHaveBeenCalled();
+              (0, _test.expect)(onDeleteFilterGrouping).toHaveBeenCalledWith(filter);
+            });
+          });
+        }
+        await step('Hovers', async () => {
+          if (description || itemName.length > 20) {
+            await step('Popper hover', async () => {
+              await _test.userEvent.hover(targetItemName);
+              await (0, _utils.delay)(500);
+              let targetPopperLabel;
+              if (description) {
+                targetPopperLabel = _test.screen.getByTestId(popperLabel);
+                (0, _test.expect)(targetPopperLabel).toBeVisible();
+                (0, _test.expect)(targetPopperLabel.innerText).toBe(description);
+              }
+              const targetPopperTitle = _test.screen.getByTestId(popperTitle);
+              (0, _test.expect)(targetPopperTitle).toBeVisible();
+              (0, _test.expect)(targetPopperTitle.innerText).toBe(itemName);
+              await _test.userEvent.unhover(targetItemName);
+              (0, _test.expect)(targetPopperTitle).not.toBeVisible();
+              if (description) {
+                (0, _test.expect)(targetPopperLabel).not.toBeVisible();
+              }
+            });
+          }
+          if (!pinned) {
+            const targetEditButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(EDIT_BUTTON) && id.includes(index)));
+            const targetDeleteButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(DELETE_BUTTON) && id.includes(index)));
+            await step('Actions hover', async () => {
+              await step('Edit', async () => {
+                await _test.userEvent.hover(targetEditButton);
+                await (0, _utils.delay)(500);
+                const targetEditButtonTooltip = _test.screen.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(EDIT_BUTTON_TOOLTIP) && id.includes(index)));
+                (0, _test.expect)(targetEditButtonTooltip).toBeVisible();
+                (0, _test.expect)(targetEditButtonTooltip.innerText).toBe(editButton);
+                await _test.userEvent.unhover(targetEditButton);
+                await (0, _utils.delay)(500);
+                (0, _test.expect)(targetEditButtonTooltip).not.toBeVisible();
+              });
+              await step('Delete', async () => {
+                await _test.userEvent.hover(targetDeleteButton);
+                await (0, _utils.delay)(500);
+                const targetDeleteButtonTooltip = _test.screen.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(DELETE_BUTTON_TOOLTIP) && id.includes(index)));
+                (0, _test.expect)(targetDeleteButtonTooltip).toBeVisible();
+                (0, _test.expect)(targetDeleteButtonTooltip.innerText).toBe(deleteButton);
+                await _test.userEvent.unhover(targetDeleteButton);
+                await (0, _utils.delay)(500);
+                (0, _test.expect)(targetDeleteButtonTooltip).not.toBeVisible();
+              });
+            });
+          }
+        });
+        targetItemNameContainer.removeAttribute(HOVERABLE_KEY);
+      });
+    }
+  });
+};
+exports.filterItemsFixture = filterItemsFixture;