@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,242 @@
-import{expect,screen,userEvent,within}from"@storybook/test";import{ID_CONSTANTS}from"../../../constants/testIds";import constants from"./constants.json";import{createExistingIds,delay,idBelongsToCollapsedItem,idBelongsToHoverableItem,idBelongsToNonStartItem}from"./utils";import{filterItemsFixture}from"./fixtures";const{AVATAR:AVATAR,CLIENT_FILTER:CLIENT_FILTER,COLLAPSE_BUTTON:COLLAPSE_BUTTON,DESCRIPTION:DESCRIPTION,EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY:EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY,ICON:ICON,LABEL:LABEL,NAME:NAME,NAME_CONTAINER:NAME_CONTAINER,PERSISTENT_FILTER:PERSISTENT_FILTER,TITLE:TITLE}=ID_CONSTANTS,{CATEGORIES:CATEGORIES,MISC:MISC,TEST_IDS:TEST_IDS,TOOLTIPS_CONTENT_MAP:TOOLTIPS_CONTENT_MAP}=constants,{HOVERABLE_KEY:HOVERABLE_KEY,HOVERABLE_VALUE:HOVERABLE_VALUE,HTML_ELEMENTS:HTML_ELEMENTS,SEARCH_STRING:SEARCH_STRING,SHIELD_KEY:SHIELD_KEY,SHIELD_VALUE:SHIELD_VALUE,TESTING_SHIELD:TESTING_SHIELD}=MISC,{HEADER:HEADER}=HTML_ELEMENTS,{expandButton:expandButton,headerCollapseButton:headerCollapseButton,headerCollapseButtonTooltip:headerCollapseButtonTooltip,headerSearchButton:headerSearchButton,headerSearchButtonTooltip:headerSearchButtonTooltip,headerSearchField:headerSearchField,headerSearchFieldCustomAction:headerSearchFieldCustomAction,headerTitle:headerTitle}=TEST_IDS;export const UTShortcutPanelTests=async _ref=>{let{args:args,canvasElement:canvasElement,step:step}=_ref;const testingShield=screen.getByTestId(TESTING_SHIELD);testingShield.setAttribute(SHIELD_KEY,SHIELD_VALUE);const existingIds=createExistingIds(CATEGORIES,TEST_IDS),canvas=within(canvasElement);await delay(500),await step("Verify initial state",async()=>{const filteredIds=[...existingIds].filter(id=>!idBelongsToHoverableItem(id)&&!idBelongsToCollapsedItem(id)&&!idBelongsToNonStartItem(id));for(const id of filteredIds){const element=canvas.getByTestId(id);expect(element).toBeInTheDocument()}}),await step("Header",async()=>{const hoverableParent=canvas.getByTestId(headerTitle).closest(HEADER);hoverableParent.setAttribute(HOVERABLE_KEY,HOVERABLE_VALUE),await delay(500),await step("Hovers",async()=>{const searchTargetElement=canvas.getByTestId(headerSearchButton),collapseTargetElement=canvas.getByTestId(headerCollapseButton);await step("Main hover",async()=>{await expect(searchTargetElement).toBeVisible(),await expect(collapseTargetElement).toBeVisible()}),await step("Actions Hover",async()=>{await step("Search",async()=>{await userEvent.hover(searchTargetElement),await delay(500);const searchTargetTooltip=canvas.getByTestId(headerSearchButtonTooltip);await expect(searchTargetTooltip).toBeVisible(),await userEvent.unhover(searchTargetElement)}),await step("Collapse",async()=>{await userEvent.hover(collapseTargetElement),await delay(500);const collapseTargetTooltip=canvas.getByTestId(headerCollapseButtonTooltip);await expect(collapseTargetTooltip).toBeVisible(),await userEvent.unhover(collapseTargetElement)})})}),await step("Actions",async()=>{await step("Search action",async()=>{const randomFilterId=existingIds.find(id=>id.includes(CLIENT_FILTER)&&id.includes(NAME)),targetClientFilter=canvas.getByTestId(randomFilterId),targetClientFilterText=targetClientFilter.innerText,searchTargetElement=canvas.getByTestId(headerSearchButton);await userEvent.click(searchTargetElement);const targetField=canvas.getByTestId(headerSearchField);expect(targetField).toBeVisible(),await userEvent.type(targetField,SEARCH_STRING),await delay(500),expect(targetClientFilter).not.toBeInTheDocument(),await userEvent.clear(targetField),await userEvent.type(targetField,targetClientFilterText),expect(canvas.getByTestId(randomFilterId)).toBeInTheDocument();const customAction=canvas.getByTestId(headerSearchFieldCustomAction);await userEvent.click(customAction),expect(targetField).not.toBeInTheDocument(),expect(canvas.getByTestId(randomFilterId)).toBeInTheDocument()}),await step("Collapse action",async()=>{const collapseTargetElement=canvas.getByTestId(headerCollapseButton);await userEvent.click(collapseTargetElement);const targetExpandButton=canvas.getByTestId(expandButton);expect(targetExpandButton).toBeInTheDocument()})}),hoverableParent.removeAttribute(HOVERABLE_KEY)}),await step("Collapsed panel",async()=>{const targetExpandButton=canvas.getByTestId(expandButton);await step("Content exists",async()=>{expect(targetExpandButton).toBeInTheDocument()}),await step("Action",async()=>{await userEvent.click(targetExpandButton),await delay(500);const collapseButton=canvas.getByTestId(headerCollapseButton);expect(targetExpandButton).not.toBeInTheDocument(),expect(collapseButton).toBeInTheDocument()})});for(const{category:category,filters:filters,name:name}of CATEGORIES)await step("Category: ".concat(category),async()=>{await step("Header",async()=>{const targetAvatar=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(AVATAR))),targetTitle=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(LABEL))),targetAvatarParent=targetAvatar.closest(HEADER);await step("Initial content",async()=>{expect(targetAvatar).toBeInTheDocument(),expect(targetTitle.innerText).toBe(name),expect(targetTitle).toBeInTheDocument()}),userEvent.hover(targetAvatarParent),await delay(500);const targetCollapseCategoryButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(COLLAPSE_BUTTON)));await step("Category hover",async()=>{expect(targetCollapseCategoryButton).toBeInTheDocument()}),await step("Category collapse",async()=>{await userEvent.click(targetCollapseCategoryButton);const targetUserFilter=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(CLIENT_FILTER)&&id.includes(NAME)));await delay(500),expect(targetUserFilter).not.toBeVisible(),await userEvent.click(targetCollapseCategoryButton),await delay(500),expect(targetUserFilter).toBeVisible()}),userEvent.unhover(targetAvatarParent)});const clientFilters=filters.filter(_ref2=>{let{pinned:pinned}=_ref2;return pinned}),userFilters=filters.filter(_ref3=>{let{pinned:pinned}=_ref3;return!pinned});await filterItemsFixture({args:args,canvas:canvas,category:category,existingIds:existingIds,filters:clientFilters,step:step,suiteTitle:"Client filters",testIds:TEST_IDS,tooltipsContentMap:TOOLTIPS_CONTENT_MAP}),await filterItemsFixture({args:args,canvas:canvas,category:category,existingIds:existingIds,filters:userFilters,step:step,suiteTitle:"User filters",testIds:TEST_IDS,tooltipsContentMap:TOOLTIPS_CONTENT_MAP}),0===filters.filter(_ref4=>{let{pinned:pinned}=_ref4;return pinned}).length&&await step("Category without user filters",async()=>{const targetEmptyCategoryIcon=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY)&&id.includes(ICON))),targetEmptyCategoryTitle=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY)&&id.includes(TITLE))),targetEmptyCategoryDescription=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY)&&id.includes(DESCRIPTION)));expect(targetEmptyCategoryIcon).toBeVisible(),expect(targetEmptyCategoryTitle).toBeVisible(),expect(targetEmptyCategoryDescription).toBeVisible()}),await step("Collapsed category with selected item",async()=>{const targetAvatarParent=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(AVATAR))).closest(HEADER),selectedClientFilter=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(CLIENT_FILTER)&&id.includes(NAME_CONTAINER)&&id.includes("0")));await userEvent.click(selectedClientFilter),await userEvent.hover(targetAvatarParent),await delay(500);const targetCollapseCategoryButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(COLLAPSE_BUTTON)));await userEvent.click(targetCollapseCategoryButton),await delay(500);const persistentClientFilter=canvas.getByTestId(existingIds.find(id=>id.includes(PERSISTENT_FILTER)&&id.includes(category)));expect(selectedClientFilter).not.toBeVisible(),expect(persistentClientFilter).toBeVisible(),await userEvent.click(targetCollapseCategoryButton),await delay(500),expect(selectedClientFilter).toBeVisible(),expect(persistentClientFilter).not.toBeVisible(),await userEvent.unhover(targetAvatarParent)})});testingShield.removeAttribute(SHIELD_KEY)};
+/* eslint-disable no-await-in-loop */
+/* eslint-disable no-restricted-syntax */
+
+import { expect, screen, userEvent, within } from '@storybook/test';
+import { ID_CONSTANTS } from '../../../constants/testIds';
+import constants from './constants.json';
+import { createExistingIds, delay, idBelongsToCollapsedItem, idBelongsToHoverableItem, idBelongsToNonStartItem } from './utils';
+import { filterItemsFixture } from './fixtures';
+const {
+  AVATAR,
+  CLIENT_FILTER,
+  COLLAPSE_BUTTON,
+  DESCRIPTION,
+  EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY,
+  ICON,
+  LABEL,
+  NAME,
+  NAME_CONTAINER,
+  PERSISTENT_FILTER,
+  TITLE
+} = ID_CONSTANTS;
+const {
+  CATEGORIES,
+  MISC,
+  TEST_IDS,
+  TOOLTIPS_CONTENT_MAP
+} = constants;
+const {
+  HOVERABLE_KEY,
+  HOVERABLE_VALUE,
+  HTML_ELEMENTS,
+  SEARCH_STRING,
+  SHIELD_KEY,
+  SHIELD_VALUE,
+  TESTING_SHIELD
+} = MISC;
+const {
+  HEADER
+} = HTML_ELEMENTS;
+const {
+  expandButton,
+  headerCollapseButton,
+  headerCollapseButtonTooltip,
+  headerSearchButton,
+  headerSearchButtonTooltip,
+  headerSearchField,
+  headerSearchFieldCustomAction,
+  headerTitle
+} = TEST_IDS;
+export const UTShortcutPanelTests = async _ref => {
+  let {
+    args,
+    canvasElement,
+    step
+  } = _ref;
+  const testingShield = screen.getByTestId(TESTING_SHIELD);
+  testingShield.setAttribute(SHIELD_KEY, SHIELD_VALUE);
+  const existingIds = createExistingIds(CATEGORIES, TEST_IDS);
+  const canvas = within(canvasElement);
+  await delay(500);
+  await step('Verify initial state', async () => {
+    const filteredIds = [...existingIds].filter(id => !idBelongsToHoverableItem(id) && !idBelongsToCollapsedItem(id) && !idBelongsToNonStartItem(id));
+    for (const id of filteredIds) {
+      const element = canvas.getByTestId(id);
+      expect(element).toBeInTheDocument();
+    }
+  });
+  await step('Header', async () => {
+    const title = canvas.getByTestId(headerTitle);
+    const hoverableParent = title.closest(HEADER);
+    hoverableParent.setAttribute(HOVERABLE_KEY, HOVERABLE_VALUE);
+    await delay(500);
+    await step('Hovers', async () => {
+      const searchTargetElement = canvas.getByTestId(headerSearchButton);
+      const collapseTargetElement = canvas.getByTestId(headerCollapseButton);
+      await step('Main hover', async () => {
+        await expect(searchTargetElement).toBeVisible();
+        await expect(collapseTargetElement).toBeVisible();
+      });
+      await step('Actions Hover', async () => {
+        await step('Search', async () => {
+          await userEvent.hover(searchTargetElement);
+          await delay(500);
+          const searchTargetTooltip = canvas.getByTestId(headerSearchButtonTooltip);
+          await expect(searchTargetTooltip).toBeVisible();
+          await userEvent.unhover(searchTargetElement);
+        });
+        await step('Collapse', async () => {
+          await userEvent.hover(collapseTargetElement);
+          await delay(500);
+          const collapseTargetTooltip = canvas.getByTestId(headerCollapseButtonTooltip);
+          await expect(collapseTargetTooltip).toBeVisible();
+          await userEvent.unhover(collapseTargetElement);
+        });
+      });
+    });
+    await step('Actions', async () => {
+      await step('Search action', async () => {
+        const randomFilterId = existingIds.find(id => id.includes(CLIENT_FILTER) && id.includes(NAME));
+        const targetClientFilter = canvas.getByTestId(randomFilterId);
+        const targetClientFilterText = targetClientFilter.innerText;
+        const searchTargetElement = canvas.getByTestId(headerSearchButton);
+        await userEvent.click(searchTargetElement);
+        const targetField = canvas.getByTestId(headerSearchField);
+        expect(targetField).toBeVisible();
+        await userEvent.type(targetField, SEARCH_STRING);
+        await delay(500);
+        expect(targetClientFilter).not.toBeInTheDocument();
+        await userEvent.clear(targetField);
+        await userEvent.type(targetField, targetClientFilterText);
+        expect(canvas.getByTestId(randomFilterId)).toBeInTheDocument();
+        const customAction = canvas.getByTestId(headerSearchFieldCustomAction);
+        await userEvent.click(customAction);
+        expect(targetField).not.toBeInTheDocument();
+        expect(canvas.getByTestId(randomFilterId)).toBeInTheDocument();
+      });
+      await step('Collapse action', async () => {
+        const collapseTargetElement = canvas.getByTestId(headerCollapseButton);
+        await userEvent.click(collapseTargetElement);
+        const targetExpandButton = canvas.getByTestId(expandButton);
+        expect(targetExpandButton).toBeInTheDocument();
+      });
+    });
+    hoverableParent.removeAttribute(HOVERABLE_KEY);
+  });
+  await step('Collapsed panel', async () => {
+    const targetExpandButton = canvas.getByTestId(expandButton);
+    await step('Content exists', async () => {
+      expect(targetExpandButton).toBeInTheDocument();
+    });
+    await step('Action', async () => {
+      await userEvent.click(targetExpandButton);
+      await delay(500);
+      const collapseButton = canvas.getByTestId(headerCollapseButton);
+      expect(targetExpandButton).not.toBeInTheDocument();
+      expect(collapseButton).toBeInTheDocument();
+    });
+  });
+  for (const {
+    category,
+    filters,
+    name
+  } of CATEGORIES) {
+    await step("Category: ".concat(category), async () => {
+      await step('Header', async () => {
+        const targetAvatar = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(AVATAR)));
+        const targetTitle = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(LABEL)));
+        const targetAvatarParent = targetAvatar.closest(HEADER);
+        await step('Initial content', async () => {
+          expect(targetAvatar).toBeInTheDocument();
+          expect(targetTitle.innerText).toBe(name);
+          expect(targetTitle).toBeInTheDocument();
+        });
+        userEvent.hover(targetAvatarParent);
+        await delay(500);
+        const targetCollapseCategoryButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(COLLAPSE_BUTTON)));
+        await step('Category hover', async () => {
+          expect(targetCollapseCategoryButton).toBeInTheDocument();
+        });
+        await step('Category collapse', async () => {
+          await userEvent.click(targetCollapseCategoryButton);
+          const targetUserFilter = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(CLIENT_FILTER) && id.includes(NAME)));
+          await delay(500);
+          expect(targetUserFilter).not.toBeVisible();
+          await userEvent.click(targetCollapseCategoryButton);
+          await delay(500);
+          expect(targetUserFilter).toBeVisible();
+        });
+        userEvent.unhover(targetAvatarParent);
+      });
+      const clientFilters = filters.filter(_ref2 => {
+        let {
+          pinned
+        } = _ref2;
+        return pinned;
+      });
+      const userFilters = filters.filter(_ref3 => {
+        let {
+          pinned
+        } = _ref3;
+        return !pinned;
+      });
+      await filterItemsFixture({
+        args,
+        canvas,
+        category,
+        existingIds,
+        filters: clientFilters,
+        step,
+        suiteTitle: 'Client filters',
+        testIds: TEST_IDS,
+        tooltipsContentMap: TOOLTIPS_CONTENT_MAP
+      });
+      await filterItemsFixture({
+        args,
+        canvas,
+        category,
+        existingIds,
+        filters: userFilters,
+        step,
+        suiteTitle: 'User filters',
+        testIds: TEST_IDS,
+        tooltipsContentMap: TOOLTIPS_CONTENT_MAP
+      });
+      if (filters.filter(_ref4 => {
+        let {
+          pinned
+        } = _ref4;
+        return pinned;
+      }).length === 0) {
+        await step('Category without user filters', async () => {
+          const targetEmptyCategoryIcon = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) && id.includes(ICON)));
+          const targetEmptyCategoryTitle = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) && id.includes(TITLE)));
+          const targetEmptyCategoryDescription = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) && id.includes(DESCRIPTION)));
+          expect(targetEmptyCategoryIcon).toBeVisible();
+          expect(targetEmptyCategoryTitle).toBeVisible();
+          expect(targetEmptyCategoryDescription).toBeVisible();
+        });
+      }
+      await step('Collapsed category with selected item', async () => {
+        const targetAvatar = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(AVATAR)));
+        const targetAvatarParent = targetAvatar.closest(HEADER);
+        const selectedClientFilter = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(CLIENT_FILTER) && id.includes(NAME_CONTAINER) && id.includes('0')));
+        await userEvent.click(selectedClientFilter);
+        await userEvent.hover(targetAvatarParent);
+        await delay(500);
+        const targetCollapseCategoryButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(COLLAPSE_BUTTON)));
+        await userEvent.click(targetCollapseCategoryButton);
+        await delay(500);
+        const persistentClientFilter = canvas.getByTestId(existingIds.find(id => id.includes(PERSISTENT_FILTER) && id.includes(category)));
+        expect(selectedClientFilter).not.toBeVisible();
+        expect(persistentClientFilter).toBeVisible();
+        await userEvent.click(targetCollapseCategoryButton);
+        await delay(500);
+        expect(selectedClientFilter).toBeVisible();
+        expect(persistentClientFilter).not.toBeVisible();
+        await userEvent.unhover(targetAvatarParent);
+      });
+    });
+  }
+  testingShield.removeAttribute(SHIELD_KEY);
+};

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

@@ -1 +1,166 @@
-import{ID_CONSTANTS}from"../../../constants/testIds";import constants from"./constants.json";const{CLIENT_FILTER:CLIENT_FILTER,COLLAPSE_BUTTON:COLLAPSE_BUTTON,COLLAPSE_BUTTON_TOOLTIP:COLLAPSE_BUTTON_TOOLTIP,CUSTOM_SEARCH_ACTION:CUSTOM_SEARCH_ACTION,DELETE_BUTTON:DELETE_BUTTON,DELETE_BUTTON_TOOLTIP:DELETE_BUTTON_TOOLTIP,EDIT_BUTTON:EDIT_BUTTON,EDIT_BUTTON_TOOLTIP:EDIT_BUTTON_TOOLTIP,EXPANDED_PANEL_CONTENT_CATEGORY:EXPANDED_PANEL_CONTENT_CATEGORY,EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY:EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY,EXPAND_BUTTON:EXPAND_BUTTON,PERSISTENT_FILTER:PERSISTENT_FILTER,POPPER:POPPER,SEARCH_BUTTON:SEARCH_BUTTON,SEARCH_BUTTON_TOOLTIP:SEARCH_BUTTON_TOOLTIP,SEARCH_FIELD:SEARCH_FIELD,USER_FILTER:USER_FILTER}=ID_CONSTANTS,{MISC:MISC}=constants,{INDEX_PLACEHOLDER:INDEX_PLACEHOLDER}=MISC,testIdQuickFormat=(testId,replaceOptions)=>{const idElementsArray=testId.split(".");Object.entries(replaceOptions).forEach(_ref=>{let[key,value]=_ref;if(idElementsArray.includes("{{".concat(key,"}}"))){const keyIndex=idElementsArray.indexOf("{{".concat(key,"}}"));idElementsArray.splice(keyIndex,1,value)}});return idElementsArray.join(".")};export const delay=ms=>new Promise(resolve=>{setTimeout(resolve,ms)});export const createExistingIds=(categories,idsList)=>categories.map(_ref2=>{let{category:category,filters:filters}=_ref2;return Object.values(idsList).map(value=>{if(!value.includes(INDEX_PLACEHOLDER))return testIdQuickFormat(value,{category:category});return[...[...filters].filter(_ref3=>{let{pinned:pinned}=_ref3;return pinned}).map((_,i)=>!!value.includes(CLIENT_FILTER)&&testIdQuickFormat(value,{category:category,index:i})),...[...filters].filter(_ref4=>{let{pinned:pinned}=_ref4;return!pinned}).map((_,i)=>!!value.includes(USER_FILTER)&&testIdQuickFormat(value,{category:category,index:i}))]})}).flat(1/0).filter(Boolean);export const idBelongsToHoverableItem=item=>item.includes(POPPER)||item.includes(DELETE_BUTTON)||item.includes(EDIT_BUTTON)||item.includes(COLLAPSE_BUTTON)||item.includes(SEARCH_BUTTON)||item.includes(DELETE_BUTTON_TOOLTIP)||item.includes(EDIT_BUTTON_TOOLTIP)||item.includes(COLLAPSE_BUTTON_TOOLTIP)||item.includes(SEARCH_BUTTON_TOOLTIP)||item.includes(CUSTOM_SEARCH_ACTION)||item.includes(COLLAPSE_BUTTON)&&item.includes(EXPANDED_PANEL_CONTENT_CATEGORY);export const idBelongsToCollapsedItem=item=>item.includes(EXPAND_BUTTON);export const idBelongsToNonStartItem=item=>item.includes(SEARCH_FIELD)||item.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY)||item.includes(PERSISTENT_FILTER);
+import { ID_CONSTANTS } from '../../../constants/testIds';
+import constants from './constants.json';
+const {
+  CLIENT_FILTER,
+  COLLAPSE_BUTTON,
+  COLLAPSE_BUTTON_TOOLTIP,
+  CUSTOM_SEARCH_ACTION,
+  DELETE_BUTTON,
+  DELETE_BUTTON_TOOLTIP,
+  EDIT_BUTTON,
+  EDIT_BUTTON_TOOLTIP,
+  EXPANDED_PANEL_CONTENT_CATEGORY,
+  EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY,
+  EXPAND_BUTTON,
+  PERSISTENT_FILTER,
+  POPPER,
+  SEARCH_BUTTON,
+  SEARCH_BUTTON_TOOLTIP,
+  SEARCH_FIELD,
+  USER_FILTER
+} = ID_CONSTANTS;
+const {
+  MISC
+} = constants;
+const {
+  INDEX_PLACEHOLDER
+} = MISC;
+
+/**
+ * @fileoverview Utility functions for UTShortcutPanel stories
+ * @module UTShortcutPanel/stories/utils
+ */
+
+/**
+ * Formats a test ID string by replacing template placeholders with actual values
+ *
+ * @function testIdQuickFormat
+ * @param {string} testId - The test ID string containing placeholders in the format {{key}}
+ * @param {Object} replaceOptions - An object containing key-value pairs for replacement
+ * @returns {string} The formatted test ID with placeholders replaced by actual values
+ *
+ * @example
+ * testIdQuickFormat('filter.{{category}}.{{index}}', { category: 'energy', index: '0' })
+ * // Returns: 'filter.energy.0'
+ */
+const testIdQuickFormat = (testId, replaceOptions) => {
+  const idElementsArray = testId.split('.');
+  Object.entries(replaceOptions).forEach(_ref => {
+    let [key, value] = _ref;
+    if (idElementsArray.includes("{{".concat(key, "}}"))) {
+      const keyIndex = idElementsArray.indexOf("{{".concat(key, "}}"));
+      idElementsArray.splice(keyIndex, 1, value);
+    }
+  });
+  const finalId = idElementsArray.join('.');
+  return finalId;
+};
+
+/**
+ * Creates a promise that resolves after a specified delay
+ *
+ * @function delay
+ * @param {number} ms - The number of milliseconds to delay
+ * @returns {Promise<void>} A promise that resolves after the specified delay
+ *
+ * @example
+ * await delay(1000);
+ */
+
+export const delay = ms => new Promise(resolve => {
+  setTimeout(resolve, ms);
+});
+
+/**
+ * Creates a flattened collection of test IDs based on categories and ID templates.
+ * For each category and ID template, generates IDs with filter indices. If all generated
+ * IDs for a template are identical (no {{index}} placeholder), returns a single ID string;
+ * otherwise returns an array of indexed IDs.
+ *
+ * @function createExistingIds
+ * @param {Array<Object>} categories - Array of category objects, each containing:
+ * @param {Object<string, string>} idsList - Object containing ID template strings with placeholders
+ *   (e.g., {{category}}, {{index}})
+ * @returns {Array<string|Array<string>>} Flattened array containing single ID strings
+ *
+ * @example
+ * const categories = [
+ *   { category: 'energy', filters: [{}, {}] },
+ *   { category: 'water', filters: [{}] }
+ * ];
+ * const idsList = {
+ *   checkbox: 'filter.{{category}}.checkbox.{{index}}',
+ *   label: 'filter.{{category}}.label'
+ * };
+ * createExistingIds(categories, idsList)
+ * // Returns: [
+ * //   'filter.energy.label',
+ * //   'filter.water.checkbox.0',
+ * //   'filter.water.label'
+ * // ]
+ */
+export const createExistingIds = (categories, idsList) => {
+  const test = categories.map(_ref2 => {
+    let {
+      category,
+      filters
+    } = _ref2;
+    return Object.values(idsList).map(value => {
+      if (!value.includes(INDEX_PLACEHOLDER)) {
+        return testIdQuickFormat(value, {
+          category
+        });
+      }
+      const clientIdsWithIndex = [...filters].filter(_ref3 => {
+        let {
+          pinned
+        } = _ref3;
+        return pinned;
+      }).map((_, i) => value.includes(CLIENT_FILTER) ? testIdQuickFormat(value, {
+        category,
+        index: i
+      }) : false);
+      const userIdsWithIndex = [...filters].filter(_ref4 => {
+        let {
+          pinned
+        } = _ref4;
+        return !pinned;
+      }).map((_, i) => value.includes(USER_FILTER) ? testIdQuickFormat(value, {
+        category,
+        index: i
+      }) : false);
+      return [...clientIdsWithIndex, ...userIdsWithIndex];
+    });
+  }).flat(Infinity).filter(Boolean);
+  return test;
+};
+
+/**
+ * Determines if a test ID belongs to an item that requires hovering to be visible or interactive.
+ * This includes tooltips, poppers, and certain buttons that appear on hover.
+ *
+ * @function idBelongsToHoverableItem
+ * @param {string} item - The test ID string to check
+ * @returns {boolean} True if the item requires hovering, false otherwise
+ */
+export const idBelongsToHoverableItem = item => item.includes(POPPER) || item.includes(DELETE_BUTTON) || item.includes(EDIT_BUTTON) || item.includes(COLLAPSE_BUTTON) || item.includes(SEARCH_BUTTON) || item.includes(DELETE_BUTTON_TOOLTIP) || item.includes(EDIT_BUTTON_TOOLTIP) || item.includes(COLLAPSE_BUTTON_TOOLTIP) || item.includes(SEARCH_BUTTON_TOOLTIP) || item.includes(CUSTOM_SEARCH_ACTION) || item.includes(COLLAPSE_BUTTON) && item.includes(EXPANDED_PANEL_CONTENT_CATEGORY);
+
+/**
+ * Determines if a test ID belongs to a collapsed item that needs to be expanded.
+ * Specifically checks for expand button elements.
+ *
+ * @function idBelongsToCollapsedItem
+ * @param {string} item - The test ID string to check
+ * @returns {boolean} True if the item is an expand button, false otherwise
+ */
+export const idBelongsToCollapsedItem = item => item.includes(EXPAND_BUTTON);
+
+/**
+ * Determines if a test ID belongs to an item that is not in its initial/start state.
+ * Currently checks for search field elements which may not be visible initially.
+ *
+ * @function idBelongsToNonStartItem
+ * @param {string} item - The test ID string to check
+ * @returns {boolean} True if the item is not in start state, false otherwise
+ */
+export const idBelongsToNonStartItem = item => item.includes(SEARCH_FIELD) || item.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) || item.includes(PERSISTENT_FILTER);

package/dist/esm/components/UTShortcutPanel/theme.js

@@ -1 +1,47 @@
-import get from"lodash/get";import{PANEL_POSITIONS}from"./constants";export const retrieveStyle=_ref=>{let{theme:theme,position:position}=_ref;return{backdrop:{backgroundColor:theme.Palette.dark["05"],opacity:"0.25 !important"},expandedPanelContentCategoryEmpty:{backgroundColor:get(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentCategory","expandedPanelContentCategoryEmpty","backgroundColor"],"".concat(theme.Palette.light["03"]))},expandedPanelContentCategoryHeader:{"&:hover":{backgroundColor:get(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentCategory","expandedPanelContentCategoryHeader","backgroundColor","&:hover"],"".concat(theme.Palette.light["04"]))}},expandedPanelContentCategoryItem:{"&:hover":{backgroundColor:get(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentCategory","expandedPanelContentCategoryItem","backgroundColor","&:hover"],"".concat(theme.Palette.light["04"]))}},expandedPanelContentCategoryItemSelected:{backgroundColor:get(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentCategory","expandedPanelContentCategoryItemSelected","backgroundColor"],"".concat(theme.Palette.accent["01"])),"&:hover":{backgroundColor:get(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentCategory","expandedPanelContentCategoryItemSelected","backgroundColor","&:hover"],"".concat(theme.Palette.accent["01"]," !important"))}},expandedPanelContentHeader:{backgroundColor:get(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentCategory","expandedPanelContentCategoryHeader","backgroundColor"],"".concat(theme.Palette.light["01"]))},expandedPanelContentPopperContent:{backgroundColor:get(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentPopperContent","backgroundColor"],"".concat(theme.Palette.light["01"]))},paper:{backgroundColor:get(theme,["UTShortcutPanel","closedPanelBar","backgroundColor"],"".concat(theme.Palette.light["01"]," !important")),borderRight:position===PANEL_POSITIONS.LEFT?get(theme,["UTShortcutPanel","borderRight"],"1px solid ".concat(theme.Palette.light["04"]," !important")):"none",borderLeft:position===PANEL_POSITIONS.RIGHT?get(theme,["UTShortcutPanel","borderLeft"],"1px solid ".concat(theme.Palette.light["04"]," !important")):"none"},perfectScrollbar:{width:get(theme,["UTShortcutPanel","perfectScrollbar","width"],"100%")}}};
+import get from 'lodash/get';
+import { PANEL_POSITIONS } from './constants';
+export const retrieveStyle = _ref => {
+  let {
+    theme,
+    position
+  } = _ref;
+  return {
+    backdrop: {
+      backgroundColor: theme.Palette.dark['05'],
+      opacity: '0.25 !important'
+    },
+    expandedPanelContentCategoryEmpty: {
+      backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryEmpty', 'backgroundColor'], "".concat(theme.Palette.light['03']))
+    },
+    expandedPanelContentCategoryHeader: {
+      '&:hover': {
+        backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryHeader', 'backgroundColor', '&:hover'], "".concat(theme.Palette.light['04']))
+      }
+    },
+    expandedPanelContentCategoryItem: {
+      '&:hover': {
+        backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryItem', 'backgroundColor', '&:hover'], "".concat(theme.Palette.light['04']))
+      }
+    },
+    expandedPanelContentCategoryItemSelected: {
+      backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryItemSelected', 'backgroundColor'], "".concat(theme.Palette.accent['01'])),
+      '&:hover': {
+        backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryItemSelected', 'backgroundColor', '&:hover'], "".concat(theme.Palette.accent['01'], " !important"))
+      }
+    },
+    expandedPanelContentHeader: {
+      backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryHeader', 'backgroundColor'], "".concat(theme.Palette.light['01']))
+    },
+    expandedPanelContentPopperContent: {
+      backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentPopperContent', 'backgroundColor'], "".concat(theme.Palette.light['01']))
+    },
+    paper: {
+      backgroundColor: get(theme, ['UTShortcutPanel', 'closedPanelBar', 'backgroundColor'], "".concat(theme.Palette.light['01'], " !important")),
+      borderRight: position === PANEL_POSITIONS.LEFT ? get(theme, ['UTShortcutPanel', 'borderRight'], "1px solid ".concat(theme.Palette.light['04'], " !important")) : 'none',
+      borderLeft: position === PANEL_POSITIONS.RIGHT ? get(theme, ['UTShortcutPanel', 'borderLeft'], "1px solid ".concat(theme.Palette.light['04'], " !important")) : 'none'
+    },
+    perfectScrollbar: {
+      width: get(theme, ['UTShortcutPanel', 'perfectScrollbar', 'width'], '100%')
+    }
+  };
+};

package/dist/esm/components/UTShortcutPanel/types.js

@@ -1 +1,45 @@
-import{arrayOf,bool,func,number,objectOf,shape,string}from"prop-types";export const customSearchActionType=shape({dataTestId:string,Icon:string,onClick:func,size:string});export const refType=shape({current:shape({popperInstance:shape({update:func})})});export const filterParamsType=shape({key:string,values:arrayOf(string)});export const filtersType=arrayOf(shape({backoffice_user_id:string,category:string,description:string,filter_params:arrayOf(filterParamsType),id:number,name:string,order:number,pinned:bool,visible:bool}));export const categoryType=shape({category:string,filters:filtersType,id:number,name:string});export const categoriesType=arrayOf(categoryType);export const avatarPaletteType=shape({backgroundColor:string,color:string,colorTheme:string});export const categoryConfigType=objectOf(shape({avatarPalette:avatarPaletteType,icon:string}));
+import { arrayOf, bool, func, number, objectOf, shape, string } from 'prop-types';
+export const customSearchActionType = shape({
+  dataTestId: string,
+  Icon: string,
+  onClick: func,
+  size: string
+});
+export const refType = shape({
+  current: shape({
+    popperInstance: shape({
+      update: func
+    })
+  })
+});
+export const filterParamsType = shape({
+  key: string,
+  values: arrayOf(string)
+});
+export const filtersType = arrayOf(shape({
+  backoffice_user_id: string,
+  category: string,
+  description: string,
+  filter_params: arrayOf(filterParamsType),
+  id: number,
+  name: string,
+  order: number,
+  pinned: bool,
+  visible: bool
+}));
+export const categoryType = shape({
+  category: string,
+  filters: filtersType,
+  id: number,
+  name: string
+});
+export const categoriesType = arrayOf(categoryType);
+export const avatarPaletteType = shape({
+  backgroundColor: string,
+  color: string,
+  colorTheme: string
+});
+export const categoryConfigType = objectOf(shape({
+  avatarPalette: avatarPaletteType,
+  icon: string
+}));

package/dist/esm/components/UTShortcutPanel/utils.js

@@ -1 +1,20 @@
-export const handleAnimationEnd=(searchButtonTippyRef,collapseButtonTippyRef)=>{var _searchButtonTippyRef,_collapseButtonTippyR;null!==(_searchButtonTippyRef=searchButtonTippyRef.current)&&void 0!==_searchButtonTippyRef&&_searchButtonTippyRef.popperInstance&&searchButtonTippyRef.current.popperInstance.update(),null!==(_collapseButtonTippyR=collapseButtonTippyRef.current)&&void 0!==_collapseButtonTippyR&&_collapseButtonTippyR.popperInstance&&collapseButtonTippyRef.current.popperInstance.update()};
+/**
+ * Handles animation-end-event by updating Tippy popper instances.
+ *
+ * This function updates the popper instances for both the search button and collapse button
+ * Tippy tooltips after an animation completes. This ensures that the tooltip positions are
+ * recalculated and properly aligned after any layout changes caused by the animation.
+ *
+ * @param {React.MutableRefObject} searchButtonTippyRef - Reference to the search button's Tippy instance
+ * @param {React.MutableRefObject} collapseButtonTippyRef - Reference to the collapse button's Tippy instance
+ * @returns {void}
+ */
+export const handleAnimationEnd = (searchButtonTippyRef, collapseButtonTippyRef) => {
+  var _searchButtonTippyRef, _collapseButtonTippyR;
+  if ((_searchButtonTippyRef = searchButtonTippyRef.current) !== null && _searchButtonTippyRef !== void 0 && _searchButtonTippyRef.popperInstance) {
+    searchButtonTippyRef.current.popperInstance.update();
+  }
+  if ((_collapseButtonTippyR = collapseButtonTippyRef.current) !== null && _collapseButtonTippyR !== void 0 && _collapseButtonTippyR.popperInstance) {
+    collapseButtonTippyRef.current.popperInstance.update();
+  }
+};

package/dist/esm/components/UTSidebar/components/ListOption/index.js

@@ -1 +1,87 @@
-import React,{memo,useState,useRef,useMemo,useEffect}from"react";import{arrayOf,bool,elementType,func,object,objectOf,string}from"prop-types";import{subOptionType}from"../../types";import Option from"../Option";import styles from"./styles.module.scss";const ListOption=_ref=>{let{classes:classes,handleClose:handleClose,handleRedirect:handleRedirect,IconActive:IconActive,IconInactive:IconInactive,iconProps:iconProps,label:label,labelAlwaysVisible:labelAlwaysVisible,location:location,open:open,openDrawer:openDrawer,options:options}=_ref;const[openMenu,setOpenMenu]=useState(!1),optionRef=useRef();useEffect(()=>{open||setOpenMenu(!1)},[open]);const optionHeight=useMemo(()=>{if(!openMenu||!open||null==optionRef||!optionRef.current)return 0;const{marginTop:marginTop,marginBottom:marginBottom}=window.getComputedStyle(optionRef.current),margin=parseFloat(marginTop)+parseFloat(marginBottom);return options.length*(optionRef.current.clientHeight+margin)},[openMenu,open]),hasSelectedItem=useMemo(()=>options.some(opt=>opt.link===location),[location,options]);return React.createElement("div",null,React.createElement(Option,{classes:classes,IconActive:IconActive,IconInactive:IconInactive,iconProps:iconProps,isSelectedGroup:hasSelectedItem&&(!open||!openMenu),label:label,labelAlwaysVisible:labelAlwaysVisible,location:location,onClick:()=>{open?setOpenMenu(!openMenu):(openDrawer(),setOpenMenu(!0))},open:open,optionRef:optionRef,toggleArrowActive:openMenu,withToggleArrow:!0}),React.createElement("div",{className:styles.optionMenu,style:{height:optionHeight}},options.map(op=>React.createElement(Option,{classes:classes,handleClose:handleClose,handleRedirect:handleRedirect,key:op.key,label:op.label,labelAlwaysVisible:labelAlwaysVisible,link:op.link,location:location,open:open}))))};ListOption.propTypes={classes:objectOf(string),handleClose:func,handleRedirect:func,IconActive:elementType,IconInactive:elementType,iconProps:object,label:string,labelAlwaysVisible:bool,location:string,open:bool,openDrawer:func,options:arrayOf(subOptionType)};export default memo(ListOption);
+import React, { memo, useState, useRef, useMemo, useEffect } from 'react';
+import { arrayOf, bool, elementType, func, object, objectOf, string } from 'prop-types';
+import { subOptionType } from '../../types';
+import Option from '../Option';
+import styles from './styles.module.scss';
+const ListOption = _ref => {
+  let {
+    classes,
+    handleClose,
+    handleRedirect,
+    IconActive,
+    IconInactive,
+    iconProps,
+    label,
+    labelAlwaysVisible,
+    location,
+    open,
+    openDrawer,
+    options
+  } = _ref;
+  const [openMenu, setOpenMenu] = useState(false);
+  const optionRef = useRef();
+  useEffect(() => {
+    if (!open) setOpenMenu(false);
+  }, [open]);
+  const toogleMenu = () => {
+    if (!open) {
+      openDrawer();
+      setOpenMenu(true);
+    } else setOpenMenu(!openMenu);
+  };
+  const optionHeight = useMemo(() => {
+    if (!openMenu || !open || !(optionRef !== null && optionRef !== void 0 && optionRef.current)) return 0;
+    const {
+      marginTop,
+      marginBottom
+    } = window.getComputedStyle(optionRef.current);
+    const margin = parseFloat(marginTop) + parseFloat(marginBottom);
+    return options.length * (optionRef.current.clientHeight + margin);
+  }, [openMenu, open]);
+  const hasSelectedItem = useMemo(() => options.some(opt => opt.link === location), [location, options]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Option, {
+    classes: classes,
+    IconActive: IconActive,
+    IconInactive: IconInactive,
+    iconProps: iconProps,
+    isSelectedGroup: hasSelectedItem && (!open || !openMenu),
+    label: label,
+    labelAlwaysVisible: labelAlwaysVisible,
+    location: location,
+    onClick: toogleMenu,
+    open: open,
+    optionRef: optionRef,
+    toggleArrowActive: openMenu,
+    withToggleArrow: true
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.optionMenu,
+    style: {
+      height: optionHeight
+    }
+  }, options.map(op => /*#__PURE__*/React.createElement(Option, {
+    classes: classes,
+    handleClose: handleClose,
+    handleRedirect: handleRedirect,
+    key: op.key,
+    label: op.label,
+    labelAlwaysVisible: labelAlwaysVisible,
+    link: op.link,
+    location: location,
+    open: open
+  }))));
+};
+ListOption.propTypes = {
+  classes: objectOf(string),
+  handleClose: func,
+  handleRedirect: func,
+  IconActive: elementType,
+  IconInactive: elementType,
+  iconProps: object,
+  label: string,
+  labelAlwaysVisible: bool,
+  location: string,
+  open: bool,
+  openDrawer: func,
+  options: arrayOf(subOptionType)
+};
+export default /*#__PURE__*/memo(ListOption);

package/dist/esm/components/UTSidebar/components/LogosContainer/components/DynamicIcon/index.js

@@ -1 +1,20 @@
-import React,{memo}from"react";import{elementType,func,oneOfType,string}from"prop-types";const DynamicIcon=_ref=>{let{className:className,Icon:Icon}=_ref;return"string"==typeof Icon?React.createElement("img",{src:Icon,alt:"",className:className}):React.createElement(Icon,{className:className})};DynamicIcon.propTypes={className:string,Icon:oneOfType([elementType,func,string])};export default memo(DynamicIcon);
+import React, { memo } from 'react';
+import { elementType, func, oneOfType, string } from 'prop-types';
+const DynamicIcon = _ref => {
+  let {
+    className,
+    Icon
+  } = _ref;
+  return typeof Icon === 'string' ? /*#__PURE__*/React.createElement("img", {
+    src: Icon,
+    alt: "",
+    className: className
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    className: className
+  });
+};
+DynamicIcon.propTypes = {
+  className: string,
+  Icon: oneOfType([elementType, func, string])
+};
+export default /*#__PURE__*/memo(DynamicIcon);