@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,250 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.UTShortcutPanelTests=void 0;var _test=require("@storybook/test"),_testIds=require("../../../constants/testIds"),_constants=_interopRequireDefault(require("./constants.json")),_utils=require("./utils"),_fixtures=require("./fixtures");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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}=_testIds.ID_CONSTANTS,{CATEGORIES:CATEGORIES,MISC:MISC,TEST_IDS:TEST_IDS,TOOLTIPS_CONTENT_MAP:TOOLTIPS_CONTENT_MAP}=_constants.default,{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,UTShortcutPanelTests=async _ref=>{let{args:args,canvasElement:canvasElement,step:step}=_ref;const testingShield=_test.screen.getByTestId(TESTING_SHIELD);testingShield.setAttribute(SHIELD_KEY,SHIELD_VALUE);const existingIds=(0,_utils.createExistingIds)(CATEGORIES,TEST_IDS),canvas=(0,_test.within)(canvasElement);await(0,_utils.delay)(500),await step("Verify initial state",async()=>{const filteredIds=[...existingIds].filter(id=>!(0,_utils.idBelongsToHoverableItem)(id)&&!(0,_utils.idBelongsToCollapsedItem)(id)&&!(0,_utils.idBelongsToNonStartItem)(id));for(const id of filteredIds){const element=canvas.getByTestId(id);(0,_test.expect)(element).toBeInTheDocument()}}),await step("Header",async()=>{const hoverableParent=canvas.getByTestId(headerTitle).closest(HEADER);hoverableParent.setAttribute(HOVERABLE_KEY,HOVERABLE_VALUE),await(0,_utils.delay)(500),await step("Hovers",async()=>{const searchTargetElement=canvas.getByTestId(headerSearchButton),collapseTargetElement=canvas.getByTestId(headerCollapseButton);await step("Main hover",async()=>{await(0,_test.expect)(searchTargetElement).toBeVisible(),await(0,_test.expect)(collapseTargetElement).toBeVisible()}),await step("Actions Hover",async()=>{await step("Search",async()=>{await _test.userEvent.hover(searchTargetElement),await(0,_utils.delay)(500);const searchTargetTooltip=canvas.getByTestId(headerSearchButtonTooltip);await(0,_test.expect)(searchTargetTooltip).toBeVisible(),await _test.userEvent.unhover(searchTargetElement)}),await step("Collapse",async()=>{await _test.userEvent.hover(collapseTargetElement),await(0,_utils.delay)(500);const collapseTargetTooltip=canvas.getByTestId(headerCollapseButtonTooltip);await(0,_test.expect)(collapseTargetTooltip).toBeVisible(),await _test.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 _test.userEvent.click(searchTargetElement);const targetField=canvas.getByTestId(headerSearchField);(0,_test.expect)(targetField).toBeVisible(),await _test.userEvent.type(targetField,SEARCH_STRING),await(0,_utils.delay)(500),(0,_test.expect)(targetClientFilter).not.toBeInTheDocument(),await _test.userEvent.clear(targetField),await _test.userEvent.type(targetField,targetClientFilterText),(0,_test.expect)(canvas.getByTestId(randomFilterId)).toBeInTheDocument();const customAction=canvas.getByTestId(headerSearchFieldCustomAction);await _test.userEvent.click(customAction),(0,_test.expect)(targetField).not.toBeInTheDocument(),(0,_test.expect)(canvas.getByTestId(randomFilterId)).toBeInTheDocument()}),await step("Collapse action",async()=>{const collapseTargetElement=canvas.getByTestId(headerCollapseButton);await _test.userEvent.click(collapseTargetElement);const targetExpandButton=canvas.getByTestId(expandButton);(0,_test.expect)(targetExpandButton).toBeInTheDocument()})}),hoverableParent.removeAttribute(HOVERABLE_KEY)}),await step("Collapsed panel",async()=>{const targetExpandButton=canvas.getByTestId(expandButton);await step("Content exists",async()=>{(0,_test.expect)(targetExpandButton).toBeInTheDocument()}),await step("Action",async()=>{await _test.userEvent.click(targetExpandButton),await(0,_utils.delay)(500);const collapseButton=canvas.getByTestId(headerCollapseButton);(0,_test.expect)(targetExpandButton).not.toBeInTheDocument(),(0,_test.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()=>{(0,_test.expect)(targetAvatar).toBeInTheDocument(),(0,_test.expect)(targetTitle.innerText).toBe(name),(0,_test.expect)(targetTitle).toBeInTheDocument()}),_test.userEvent.hover(targetAvatarParent),await(0,_utils.delay)(500);const targetCollapseCategoryButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(COLLAPSE_BUTTON)));await step("Category hover",async()=>{(0,_test.expect)(targetCollapseCategoryButton).toBeInTheDocument()}),await step("Category collapse",async()=>{await _test.userEvent.click(targetCollapseCategoryButton);const targetUserFilter=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(CLIENT_FILTER)&&id.includes(NAME)));await(0,_utils.delay)(500),(0,_test.expect)(targetUserFilter).not.toBeVisible(),await _test.userEvent.click(targetCollapseCategoryButton),await(0,_utils.delay)(500),(0,_test.expect)(targetUserFilter).toBeVisible()}),_test.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(0,_fixtures.filterItemsFixture)({args:args,canvas:canvas,category:category,existingIds:existingIds,filters:clientFilters,step:step,suiteTitle:"Client filters",testIds:TEST_IDS,tooltipsContentMap:TOOLTIPS_CONTENT_MAP}),await(0,_fixtures.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)));(0,_test.expect)(targetEmptyCategoryIcon).toBeVisible(),(0,_test.expect)(targetEmptyCategoryTitle).toBeVisible(),(0,_test.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 _test.userEvent.click(selectedClientFilter),await _test.userEvent.hover(targetAvatarParent),await(0,_utils.delay)(500);const targetCollapseCategoryButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(COLLAPSE_BUTTON)));await _test.userEvent.click(targetCollapseCategoryButton),await(0,_utils.delay)(500);const persistentClientFilter=canvas.getByTestId(existingIds.find(id=>id.includes(PERSISTENT_FILTER)&&id.includes(category)));(0,_test.expect)(selectedClientFilter).not.toBeVisible(),(0,_test.expect)(persistentClientFilter).toBeVisible(),await _test.userEvent.click(targetCollapseCategoryButton),await(0,_utils.delay)(500),(0,_test.expect)(selectedClientFilter).toBeVisible(),(0,_test.expect)(persistentClientFilter).not.toBeVisible(),await _test.userEvent.unhover(targetAvatarParent)})});testingShield.removeAttribute(SHIELD_KEY)};exports.UTShortcutPanelTests=UTShortcutPanelTests;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UTShortcutPanelTests = void 0;
+var _test = require("@storybook/test");
+var _testIds = require("../../../constants/testIds");
+var _constants = _interopRequireDefault(require("./constants.json"));
+var _utils = require("./utils");
+var _fixtures = require("./fixtures");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable no-await-in-loop */
+/* eslint-disable no-restricted-syntax */
+
+const {
+  AVATAR,
+  CLIENT_FILTER,
+  COLLAPSE_BUTTON,
+  DESCRIPTION,
+  EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY,
+  ICON,
+  LABEL,
+  NAME,
+  NAME_CONTAINER,
+  PERSISTENT_FILTER,
+  TITLE
+} = _testIds.ID_CONSTANTS;
+const {
+  CATEGORIES,
+  MISC,
+  TEST_IDS,
+  TOOLTIPS_CONTENT_MAP
+} = _constants.default;
+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;
+const UTShortcutPanelTests = async _ref => {
+  let {
+    args,
+    canvasElement,
+    step
+  } = _ref;
+  const testingShield = _test.screen.getByTestId(TESTING_SHIELD);
+  testingShield.setAttribute(SHIELD_KEY, SHIELD_VALUE);
+  const existingIds = (0, _utils.createExistingIds)(CATEGORIES, TEST_IDS);
+  const canvas = (0, _test.within)(canvasElement);
+  await (0, _utils.delay)(500);
+  await step('Verify initial state', async () => {
+    const filteredIds = [...existingIds].filter(id => !(0, _utils.idBelongsToHoverableItem)(id) && !(0, _utils.idBelongsToCollapsedItem)(id) && !(0, _utils.idBelongsToNonStartItem)(id));
+    for (const id of filteredIds) {
+      const element = canvas.getByTestId(id);
+      (0, _test.expect)(element).toBeInTheDocument();
+    }
+  });
+  await step('Header', async () => {
+    const title = canvas.getByTestId(headerTitle);
+    const hoverableParent = title.closest(HEADER);
+    hoverableParent.setAttribute(HOVERABLE_KEY, HOVERABLE_VALUE);
+    await (0, _utils.delay)(500);
+    await step('Hovers', async () => {
+      const searchTargetElement = canvas.getByTestId(headerSearchButton);
+      const collapseTargetElement = canvas.getByTestId(headerCollapseButton);
+      await step('Main hover', async () => {
+        await (0, _test.expect)(searchTargetElement).toBeVisible();
+        await (0, _test.expect)(collapseTargetElement).toBeVisible();
+      });
+      await step('Actions Hover', async () => {
+        await step('Search', async () => {
+          await _test.userEvent.hover(searchTargetElement);
+          await (0, _utils.delay)(500);
+          const searchTargetTooltip = canvas.getByTestId(headerSearchButtonTooltip);
+          await (0, _test.expect)(searchTargetTooltip).toBeVisible();
+          await _test.userEvent.unhover(searchTargetElement);
+        });
+        await step('Collapse', async () => {
+          await _test.userEvent.hover(collapseTargetElement);
+          await (0, _utils.delay)(500);
+          const collapseTargetTooltip = canvas.getByTestId(headerCollapseButtonTooltip);
+          await (0, _test.expect)(collapseTargetTooltip).toBeVisible();
+          await _test.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 _test.userEvent.click(searchTargetElement);
+        const targetField = canvas.getByTestId(headerSearchField);
+        (0, _test.expect)(targetField).toBeVisible();
+        await _test.userEvent.type(targetField, SEARCH_STRING);
+        await (0, _utils.delay)(500);
+        (0, _test.expect)(targetClientFilter).not.toBeInTheDocument();
+        await _test.userEvent.clear(targetField);
+        await _test.userEvent.type(targetField, targetClientFilterText);
+        (0, _test.expect)(canvas.getByTestId(randomFilterId)).toBeInTheDocument();
+        const customAction = canvas.getByTestId(headerSearchFieldCustomAction);
+        await _test.userEvent.click(customAction);
+        (0, _test.expect)(targetField).not.toBeInTheDocument();
+        (0, _test.expect)(canvas.getByTestId(randomFilterId)).toBeInTheDocument();
+      });
+      await step('Collapse action', async () => {
+        const collapseTargetElement = canvas.getByTestId(headerCollapseButton);
+        await _test.userEvent.click(collapseTargetElement);
+        const targetExpandButton = canvas.getByTestId(expandButton);
+        (0, _test.expect)(targetExpandButton).toBeInTheDocument();
+      });
+    });
+    hoverableParent.removeAttribute(HOVERABLE_KEY);
+  });
+  await step('Collapsed panel', async () => {
+    const targetExpandButton = canvas.getByTestId(expandButton);
+    await step('Content exists', async () => {
+      (0, _test.expect)(targetExpandButton).toBeInTheDocument();
+    });
+    await step('Action', async () => {
+      await _test.userEvent.click(targetExpandButton);
+      await (0, _utils.delay)(500);
+      const collapseButton = canvas.getByTestId(headerCollapseButton);
+      (0, _test.expect)(targetExpandButton).not.toBeInTheDocument();
+      (0, _test.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 () => {
+          (0, _test.expect)(targetAvatar).toBeInTheDocument();
+          (0, _test.expect)(targetTitle.innerText).toBe(name);
+          (0, _test.expect)(targetTitle).toBeInTheDocument();
+        });
+        _test.userEvent.hover(targetAvatarParent);
+        await (0, _utils.delay)(500);
+        const targetCollapseCategoryButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(COLLAPSE_BUTTON)));
+        await step('Category hover', async () => {
+          (0, _test.expect)(targetCollapseCategoryButton).toBeInTheDocument();
+        });
+        await step('Category collapse', async () => {
+          await _test.userEvent.click(targetCollapseCategoryButton);
+          const targetUserFilter = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(CLIENT_FILTER) && id.includes(NAME)));
+          await (0, _utils.delay)(500);
+          (0, _test.expect)(targetUserFilter).not.toBeVisible();
+          await _test.userEvent.click(targetCollapseCategoryButton);
+          await (0, _utils.delay)(500);
+          (0, _test.expect)(targetUserFilter).toBeVisible();
+        });
+        _test.userEvent.unhover(targetAvatarParent);
+      });
+      const clientFilters = filters.filter(_ref2 => {
+        let {
+          pinned
+        } = _ref2;
+        return pinned;
+      });
+      const userFilters = filters.filter(_ref3 => {
+        let {
+          pinned
+        } = _ref3;
+        return !pinned;
+      });
+      await (0, _fixtures.filterItemsFixture)({
+        args,
+        canvas,
+        category,
+        existingIds,
+        filters: clientFilters,
+        step,
+        suiteTitle: 'Client filters',
+        testIds: TEST_IDS,
+        tooltipsContentMap: TOOLTIPS_CONTENT_MAP
+      });
+      await (0, _fixtures.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)));
+          (0, _test.expect)(targetEmptyCategoryIcon).toBeVisible();
+          (0, _test.expect)(targetEmptyCategoryTitle).toBeVisible();
+          (0, _test.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 _test.userEvent.click(selectedClientFilter);
+        await _test.userEvent.hover(targetAvatarParent);
+        await (0, _utils.delay)(500);
+        const targetCollapseCategoryButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(COLLAPSE_BUTTON)));
+        await _test.userEvent.click(targetCollapseCategoryButton);
+        await (0, _utils.delay)(500);
+        const persistentClientFilter = canvas.getByTestId(existingIds.find(id => id.includes(PERSISTENT_FILTER) && id.includes(category)));
+        (0, _test.expect)(selectedClientFilter).not.toBeVisible();
+        (0, _test.expect)(persistentClientFilter).toBeVisible();
+        await _test.userEvent.click(targetCollapseCategoryButton);
+        await (0, _utils.delay)(500);
+        (0, _test.expect)(selectedClientFilter).toBeVisible();
+        (0, _test.expect)(persistentClientFilter).not.toBeVisible();
+        await _test.userEvent.unhover(targetAvatarParent);
+      });
+    });
+  }
+  testingShield.removeAttribute(SHIELD_KEY);
+};
+exports.UTShortcutPanelTests = UTShortcutPanelTests;

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

@@ -1 +1,178 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.idBelongsToNonStartItem=exports.idBelongsToHoverableItem=exports.idBelongsToCollapsedItem=exports.delay=exports.createExistingIds=void 0;var _testIds=require("../../../constants/testIds"),_constants=_interopRequireDefault(require("./constants.json"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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}=_testIds.ID_CONSTANTS,{MISC:MISC}=_constants.default,{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(".")},delay=ms=>new Promise(resolve=>{setTimeout(resolve,ms)});exports.delay=delay;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);exports.createExistingIds=createExistingIds;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);exports.idBelongsToHoverableItem=idBelongsToHoverableItem;const idBelongsToCollapsedItem=item=>item.includes(EXPAND_BUTTON);exports.idBelongsToCollapsedItem=idBelongsToCollapsedItem;const idBelongsToNonStartItem=item=>item.includes(SEARCH_FIELD)||item.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY)||item.includes(PERSISTENT_FILTER);exports.idBelongsToNonStartItem=idBelongsToNonStartItem;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.idBelongsToNonStartItem = exports.idBelongsToHoverableItem = exports.idBelongsToCollapsedItem = exports.delay = exports.createExistingIds = void 0;
+var _testIds = require("../../../constants/testIds");
+var _constants = _interopRequireDefault(require("./constants.json"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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
+} = _testIds.ID_CONSTANTS;
+const {
+  MISC
+} = _constants.default;
+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);
+ */
+
+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'
+ * // ]
+ */
+exports.delay = delay;
+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
+ */
+exports.createExistingIds = createExistingIds;
+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
+ */
+exports.idBelongsToHoverableItem = idBelongsToHoverableItem;
+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
+ */
+exports.idBelongsToCollapsedItem = idBelongsToCollapsedItem;
+const idBelongsToNonStartItem = item => item.includes(SEARCH_FIELD) || item.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) || item.includes(PERSISTENT_FILTER);
+exports.idBelongsToNonStartItem = idBelongsToNonStartItem;

package/dist/components/UTShortcutPanel/theme.js

@@ -1 +1,55 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _get=_interopRequireDefault(require("lodash/get")),_constants=require("./constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const retrieveStyle=_ref=>{let{theme:theme,position:position}=_ref;return{backdrop:{backgroundColor:theme.Palette.dark["05"],opacity:"0.25 !important"},expandedPanelContentCategoryEmpty:{backgroundColor:(0,_get.default)(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentCategory","expandedPanelContentCategoryEmpty","backgroundColor"],"".concat(theme.Palette.light["03"]))},expandedPanelContentCategoryHeader:{"&:hover":{backgroundColor:(0,_get.default)(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentCategory","expandedPanelContentCategoryHeader","backgroundColor","&:hover"],"".concat(theme.Palette.light["04"]))}},expandedPanelContentCategoryItem:{"&:hover":{backgroundColor:(0,_get.default)(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentCategory","expandedPanelContentCategoryItem","backgroundColor","&:hover"],"".concat(theme.Palette.light["04"]))}},expandedPanelContentCategoryItemSelected:{backgroundColor:(0,_get.default)(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentCategory","expandedPanelContentCategoryItemSelected","backgroundColor"],"".concat(theme.Palette.accent["01"])),"&:hover":{backgroundColor:(0,_get.default)(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentCategory","expandedPanelContentCategoryItemSelected","backgroundColor","&:hover"],"".concat(theme.Palette.accent["01"]," !important"))}},expandedPanelContentHeader:{backgroundColor:(0,_get.default)(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentCategory","expandedPanelContentCategoryHeader","backgroundColor"],"".concat(theme.Palette.light["01"]))},expandedPanelContentPopperContent:{backgroundColor:(0,_get.default)(theme,["UTShortcutPanel","expandedPanelContent","expandedPanelContentPopperContent","backgroundColor"],"".concat(theme.Palette.light["01"]))},paper:{backgroundColor:(0,_get.default)(theme,["UTShortcutPanel","closedPanelBar","backgroundColor"],"".concat(theme.Palette.light["01"]," !important")),borderRight:position===_constants.PANEL_POSITIONS.LEFT?(0,_get.default)(theme,["UTShortcutPanel","borderRight"],"1px solid ".concat(theme.Palette.light["04"]," !important")):"none",borderLeft:position===_constants.PANEL_POSITIONS.RIGHT?(0,_get.default)(theme,["UTShortcutPanel","borderLeft"],"1px solid ".concat(theme.Palette.light["04"]," !important")):"none"},perfectScrollbar:{width:(0,_get.default)(theme,["UTShortcutPanel","perfectScrollbar","width"],"100%")}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _get = _interopRequireDefault(require("lodash/get"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const retrieveStyle = _ref => {
+  let {
+    theme,
+    position
+  } = _ref;
+  return {
+    backdrop: {
+      backgroundColor: theme.Palette.dark['05'],
+      opacity: '0.25 !important'
+    },
+    expandedPanelContentCategoryEmpty: {
+      backgroundColor: (0, _get.default)(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryEmpty', 'backgroundColor'], "".concat(theme.Palette.light['03']))
+    },
+    expandedPanelContentCategoryHeader: {
+      '&:hover': {
+        backgroundColor: (0, _get.default)(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryHeader', 'backgroundColor', '&:hover'], "".concat(theme.Palette.light['04']))
+      }
+    },
+    expandedPanelContentCategoryItem: {
+      '&:hover': {
+        backgroundColor: (0, _get.default)(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryItem', 'backgroundColor', '&:hover'], "".concat(theme.Palette.light['04']))
+      }
+    },
+    expandedPanelContentCategoryItemSelected: {
+      backgroundColor: (0, _get.default)(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryItemSelected', 'backgroundColor'], "".concat(theme.Palette.accent['01'])),
+      '&:hover': {
+        backgroundColor: (0, _get.default)(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryItemSelected', 'backgroundColor', '&:hover'], "".concat(theme.Palette.accent['01'], " !important"))
+      }
+    },
+    expandedPanelContentHeader: {
+      backgroundColor: (0, _get.default)(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryHeader', 'backgroundColor'], "".concat(theme.Palette.light['01']))
+    },
+    expandedPanelContentPopperContent: {
+      backgroundColor: (0, _get.default)(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentPopperContent', 'backgroundColor'], "".concat(theme.Palette.light['01']))
+    },
+    paper: {
+      backgroundColor: (0, _get.default)(theme, ['UTShortcutPanel', 'closedPanelBar', 'backgroundColor'], "".concat(theme.Palette.light['01'], " !important")),
+      borderRight: position === _constants.PANEL_POSITIONS.LEFT ? (0, _get.default)(theme, ['UTShortcutPanel', 'borderRight'], "1px solid ".concat(theme.Palette.light['04'], " !important")) : 'none',
+      borderLeft: position === _constants.PANEL_POSITIONS.RIGHT ? (0, _get.default)(theme, ['UTShortcutPanel', 'borderLeft'], "1px solid ".concat(theme.Palette.light['04'], " !important")) : 'none'
+    },
+    perfectScrollbar: {
+      width: (0, _get.default)(theme, ['UTShortcutPanel', 'perfectScrollbar', 'width'], '100%')
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTShortcutPanel/types.js

@@ -1 +1,51 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.refType=exports.filtersType=exports.filterParamsType=exports.customSearchActionType=exports.categoryType=exports.categoryConfigType=exports.categoriesType=exports.avatarPaletteType=void 0;var _propTypes=require("prop-types");const customSearchActionType=exports.customSearchActionType=(0,_propTypes.shape)({dataTestId:_propTypes.string,Icon:_propTypes.string,onClick:_propTypes.func,size:_propTypes.string}),refType=exports.refType=(0,_propTypes.shape)({current:(0,_propTypes.shape)({popperInstance:(0,_propTypes.shape)({update:_propTypes.func})})}),filterParamsType=exports.filterParamsType=(0,_propTypes.shape)({key:_propTypes.string,values:(0,_propTypes.arrayOf)(_propTypes.string)}),filtersType=exports.filtersType=(0,_propTypes.arrayOf)((0,_propTypes.shape)({backoffice_user_id:_propTypes.string,category:_propTypes.string,description:_propTypes.string,filter_params:(0,_propTypes.arrayOf)(filterParamsType),id:_propTypes.number,name:_propTypes.string,order:_propTypes.number,pinned:_propTypes.bool,visible:_propTypes.bool})),categoryType=exports.categoryType=(0,_propTypes.shape)({category:_propTypes.string,filters:filtersType,id:_propTypes.number,name:_propTypes.string}),categoriesType=exports.categoriesType=(0,_propTypes.arrayOf)(categoryType),avatarPaletteType=exports.avatarPaletteType=(0,_propTypes.shape)({backgroundColor:_propTypes.string,color:_propTypes.string,colorTheme:_propTypes.string}),categoryConfigType=exports.categoryConfigType=(0,_propTypes.objectOf)((0,_propTypes.shape)({avatarPalette:avatarPaletteType,icon:_propTypes.string}));
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.refType = exports.filtersType = exports.filterParamsType = exports.customSearchActionType = exports.categoryType = exports.categoryConfigType = exports.categoriesType = exports.avatarPaletteType = void 0;
+var _propTypes = require("prop-types");
+const customSearchActionType = exports.customSearchActionType = (0, _propTypes.shape)({
+  dataTestId: _propTypes.string,
+  Icon: _propTypes.string,
+  onClick: _propTypes.func,
+  size: _propTypes.string
+});
+const refType = exports.refType = (0, _propTypes.shape)({
+  current: (0, _propTypes.shape)({
+    popperInstance: (0, _propTypes.shape)({
+      update: _propTypes.func
+    })
+  })
+});
+const filterParamsType = exports.filterParamsType = (0, _propTypes.shape)({
+  key: _propTypes.string,
+  values: (0, _propTypes.arrayOf)(_propTypes.string)
+});
+const filtersType = exports.filtersType = (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+  backoffice_user_id: _propTypes.string,
+  category: _propTypes.string,
+  description: _propTypes.string,
+  filter_params: (0, _propTypes.arrayOf)(filterParamsType),
+  id: _propTypes.number,
+  name: _propTypes.string,
+  order: _propTypes.number,
+  pinned: _propTypes.bool,
+  visible: _propTypes.bool
+}));
+const categoryType = exports.categoryType = (0, _propTypes.shape)({
+  category: _propTypes.string,
+  filters: filtersType,
+  id: _propTypes.number,
+  name: _propTypes.string
+});
+const categoriesType = exports.categoriesType = (0, _propTypes.arrayOf)(categoryType);
+const avatarPaletteType = exports.avatarPaletteType = (0, _propTypes.shape)({
+  backgroundColor: _propTypes.string,
+  color: _propTypes.string,
+  colorTheme: _propTypes.string
+});
+const categoryConfigType = exports.categoryConfigType = (0, _propTypes.objectOf)((0, _propTypes.shape)({
+  avatarPalette: avatarPaletteType,
+  icon: _propTypes.string
+}));

package/dist/components/UTShortcutPanel/utils.js

@@ -1 +1,27 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.handleAnimationEnd=void 0;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()};exports.handleAnimationEnd=handleAnimationEnd;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleAnimationEnd = void 0;
+/**
+ * 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}
+ */
+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();
+  }
+};
+exports.handleAnimationEnd = handleAnimationEnd;