@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentHeader/layout.js

@@ -1 +1,121 @@
-import React from"react";import{bool,func,objectOf,string}from"prop-types";import UTButton from"../../../../../../../UTButton";import UTLabel from"../../../../../../../UTLabel";import UTSearchField from"../../../../../../../UTSearchField";import UTTooltip from"../../../../../../../UTTooltip";import{customSearchActionType,refType}from"../../../../../../types";import{ID_CONSTANTS,TEST_IDS}from"../../../../../../../../constants/testIds";import{ICON_BY_POSITION,TOOLTIP_PLACEMENT}from"./constants";const{filterGrouping:filterGrouping}=TEST_IDS,{ADD_FILTER_BUTTON:ADD_FILTER_BUTTON,COLLAPSE_BUTTON:COLLAPSE_BUTTON,COLLAPSE_BUTTON_TOOLTIP:COLLAPSE_BUTTON_TOOLTIP,SEARCH_BUTTON:SEARCH_BUTTON,SEARCH_BUTTON_TOOLTIP:SEARCH_BUTTON_TOOLTIP,SEARCH_FIELD:SEARCH_FIELD,TITLE:TITLE}=ID_CONSTANTS,ExpandedPanelContentHeader=_ref=>{let{animationEnd:animationEnd,classes:classes,collapseButtonTippyRef:collapseButtonTippyRef,collapseButtonTooltip:collapseButtonTooltip,customSearchAction:customSearchAction,dataTestId:dataTestId,handleAddFilterGroup:handleAddFilterGroup,handleFilterGroupSearch:handleFilterGroupSearch,handleSearchToggle:handleSearchToggle,handleTogglePanel:handleTogglePanel,hideAddFilterButton:hideAddFilterButton,panelTitle:panelTitle,position:position,searchButtonTippyRef:searchButtonTippyRef,searchButtonTooltip:searchButtonTooltip,searchOpen:searchOpen,searchValue:searchValue}=_ref;return React.createElement("header",{className:"".concat(classes.expandedPanelContentHeader," ").concat(searchOpen?classes.expandedPanelContentHeaderSearchOpen:"")},searchOpen?React.createElement(UTSearchField,{customAction:customSearchAction,dataTestId:dataTestId?"".concat(dataTestId,".").concat(SEARCH_FIELD):filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchField,onChange:handleFilterGroupSearch,value:searchValue,variant:"white"}):React.createElement(React.Fragment,null,React.createElement(UTLabel,{className:classes.expandedPanelContentTitle,colorTheme:"dark",dataTestId:dataTestId?"".concat(dataTestId,".").concat(TITLE):filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.title,shade:"05",variant:"subtitle1",weight:"medium"},panelTitle),React.createElement("section",{className:classes.expandedPanelContentActions},React.createElement("div",{className:classes.expandedPanelContentActionsContainer,onAnimationEnd:animationEnd},React.createElement(UTTooltip,{arrow:!1,content:searchButtonTooltip,dataTestId:dataTestId?"".concat(dataTestId,".").concat(SEARCH_BUTTON_TOOLTIP):filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchButtonTooltip,tippyProps:{onCreate:instance=>{searchButtonTippyRef.current=instance},placement:TOOLTIP_PLACEMENT}},React.createElement("span",null,React.createElement(UTButton,{colorTheme:"gray",dataTestId:dataTestId?"".concat(dataTestId,".").concat(SEARCH_BUTTON):filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchButton,Icon:"IconSearch",onClick:handleSearchToggle,variant:"text"}))),React.createElement(UTTooltip,{arrow:!1,content:collapseButtonTooltip,dataTestId:dataTestId?"".concat(dataTestId,".").concat(COLLAPSE_BUTTON_TOOLTIP):filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.collapseButtonTooltip,tippyProps:{onCreate:instance=>{collapseButtonTippyRef.current=instance},placement:TOOLTIP_PLACEMENT}},React.createElement("span",null,React.createElement(UTButton,{colorTheme:"gray",dataTestId:dataTestId?"".concat(dataTestId,".").concat(COLLAPSE_BUTTON):filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.collapseButton,Icon:ICON_BY_POSITION[position],onClick:handleTogglePanel,variant:"text"})))),!hideAddFilterButton&&React.createElement(UTButton,{colorTheme:"dark",dataTestId:dataTestId?"".concat(dataTestId,".").concat(ADD_FILTER_BUTTON):filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.addFilterButton,Icon:"IconPlus",onClick:handleAddFilterGroup,variant:"text"}))))};ExpandedPanelContentHeader.propTypes={animationEnd:func,classes:objectOf(string),collapseButtonTippyRef:refType,collapseButtonTooltip:string,customSearchAction:customSearchActionType,dataTestId:string,handleAddFilterGroup:func,handleFilterGroupSearch:func,handleSearchToggle:func,handleTogglePanel:func,hideAddFilterButton:bool,panelTitle:string,position:string,searchButtonTippyRef:refType,searchButtonTooltip:string,searchOpen:bool,searchValue:string};export default ExpandedPanelContentHeader;
+import React from 'react';
+import { bool, func, objectOf, string } from 'prop-types';
+import UTButton from '../../../../../../../UTButton';
+import UTLabel from '../../../../../../../UTLabel';
+import UTSearchField from '../../../../../../../UTSearchField';
+import UTTooltip from '../../../../../../../UTTooltip';
+import { customSearchActionType, refType } from '../../../../../../types';
+import { ID_CONSTANTS, TEST_IDS } from '../../../../../../../../constants/testIds';
+import { ICON_BY_POSITION, TOOLTIP_PLACEMENT } from './constants';
+const {
+  filterGrouping
+} = TEST_IDS;
+const {
+  ADD_FILTER_BUTTON,
+  COLLAPSE_BUTTON,
+  COLLAPSE_BUTTON_TOOLTIP,
+  SEARCH_BUTTON,
+  SEARCH_BUTTON_TOOLTIP,
+  SEARCH_FIELD,
+  TITLE
+} = ID_CONSTANTS;
+const ExpandedPanelContentHeader = _ref => {
+  let {
+    animationEnd,
+    classes,
+    collapseButtonTippyRef,
+    collapseButtonTooltip,
+    customSearchAction,
+    dataTestId,
+    handleAddFilterGroup,
+    handleFilterGroupSearch,
+    handleSearchToggle,
+    handleTogglePanel,
+    hideAddFilterButton,
+    panelTitle,
+    position,
+    searchButtonTippyRef,
+    searchButtonTooltip,
+    searchOpen,
+    searchValue
+  } = _ref;
+  return /*#__PURE__*/React.createElement("header", {
+    className: "".concat(classes.expandedPanelContentHeader, " ").concat(searchOpen ? classes.expandedPanelContentHeaderSearchOpen : '')
+  }, searchOpen ? /*#__PURE__*/React.createElement(UTSearchField, {
+    customAction: customSearchAction,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(SEARCH_FIELD) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchField,
+    onChange: handleFilterGroupSearch,
+    value: searchValue,
+    variant: "white"
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.expandedPanelContentTitle,
+    colorTheme: "dark",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(TITLE) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.title,
+    shade: "05",
+    variant: "subtitle1",
+    weight: "medium"
+  }, panelTitle), /*#__PURE__*/React.createElement("section", {
+    className: classes.expandedPanelContentActions
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.expandedPanelContentActionsContainer,
+    onAnimationEnd: animationEnd
+  }, /*#__PURE__*/React.createElement(UTTooltip, {
+    arrow: false,
+    content: searchButtonTooltip,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(SEARCH_BUTTON_TOOLTIP) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchButtonTooltip,
+    tippyProps: {
+      onCreate: instance => {
+        searchButtonTippyRef.current = instance;
+      },
+      placement: TOOLTIP_PLACEMENT
+    }
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "gray",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(SEARCH_BUTTON) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchButton,
+    Icon: "IconSearch",
+    onClick: handleSearchToggle,
+    variant: "text"
+  }))), /*#__PURE__*/React.createElement(UTTooltip, {
+    arrow: false,
+    content: collapseButtonTooltip,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(COLLAPSE_BUTTON_TOOLTIP) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.collapseButtonTooltip,
+    tippyProps: {
+      onCreate: instance => {
+        collapseButtonTippyRef.current = instance;
+      },
+      placement: TOOLTIP_PLACEMENT
+    }
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "gray",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(COLLAPSE_BUTTON) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.collapseButton,
+    Icon: ICON_BY_POSITION[position],
+    onClick: handleTogglePanel,
+    variant: "text"
+  })))), !hideAddFilterButton && /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "dark",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ADD_FILTER_BUTTON) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.addFilterButton,
+    Icon: "IconPlus",
+    onClick: handleAddFilterGroup,
+    variant: "text"
+  }))));
+};
+ExpandedPanelContentHeader.propTypes = {
+  animationEnd: func,
+  classes: objectOf(string),
+  collapseButtonTippyRef: refType,
+  collapseButtonTooltip: string,
+  customSearchAction: customSearchActionType,
+  dataTestId: string,
+  handleAddFilterGroup: func,
+  handleFilterGroupSearch: func,
+  handleSearchToggle: func,
+  handleTogglePanel: func,
+  hideAddFilterButton: bool,
+  panelTitle: string,
+  position: string,
+  searchButtonTippyRef: refType,
+  searchButtonTooltip: string,
+  searchOpen: bool,
+  searchValue: string
+};
+export default ExpandedPanelContentHeader;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentPopper/constants.js

@@ -1 +1,5 @@
-import{PANEL_POSITIONS}from"../../../../../../constants";export const POPPER_PLACEMENT={[PANEL_POSITIONS.LEFT]:"right",[PANEL_POSITIONS.RIGHT]:"left"};
+import { PANEL_POSITIONS } from '../../../../../../constants';
+export const POPPER_PLACEMENT = {
+  [PANEL_POSITIONS.LEFT]: 'right',
+  [PANEL_POSITIONS.RIGHT]: 'left'
+};

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentPopper/index.js

@@ -1 +1,32 @@
-import React,{useContext}from"react";import{string}from"prop-types";import UTShortcutPanelContext from"../../../../../../context";import ExpandedPanelContentPopper from"./layout";const ExpandedPanelContentPopperContainer=_ref=>{let{dataTestId:dataTestId}=_ref;const{classes:classes,closePopper:closePopper,popperState:{anchor:anchor,description:description,title:title}={},position:position}=useContext(UTShortcutPanelContext);return React.createElement(ExpandedPanelContentPopper,{anchor:anchor,classes:classes,dataTestId:dataTestId,description:description,onClose:closePopper,position:position,title:title})};ExpandedPanelContentPopperContainer.propTypes={dataTestId:string};export default ExpandedPanelContentPopperContainer;
+import React, { useContext } from 'react';
+import { string } from 'prop-types';
+import UTShortcutPanelContext from '../../../../../../context';
+import ExpandedPanelContentPopper from './layout';
+const ExpandedPanelContentPopperContainer = _ref => {
+  let {
+    dataTestId
+  } = _ref;
+  const {
+    classes,
+    closePopper,
+    popperState: {
+      anchor,
+      description,
+      title
+    } = {},
+    position
+  } = useContext(UTShortcutPanelContext);
+  return /*#__PURE__*/React.createElement(ExpandedPanelContentPopper, {
+    anchor: anchor,
+    classes: classes,
+    dataTestId: dataTestId,
+    description: description,
+    onClose: closePopper,
+    position: position,
+    title: title
+  });
+};
+ExpandedPanelContentPopperContainer.propTypes = {
+  dataTestId: string
+};
+export default ExpandedPanelContentPopperContainer;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentPopper/layout.js

@@ -1 +1,48 @@
-import capitalize from"lodash/capitalize";import React from"react";import{func,object,objectOf,string}from"prop-types";import UTPopper from"../../../../../../../UTPopper";import UTLabel from"../../../../../../../UTLabel";import{ID_CONSTANTS}from"../../../../../../../../constants/testIds";import{POPPER_PLACEMENT}from"./constants";const{TITLE:TITLE,LABEL:LABEL}=ID_CONSTANTS,ExpandedPanelContentPopper=_ref=>{let{anchor:anchor,classes:classes,dataTestId:dataTestId,description:description,onClose:onClose,position:position,title:title}=_ref;return React.createElement(UTPopper,{anchor:anchor,className:"".concat(classes.popper," ").concat(classes["popper".concat(capitalize(position))]),onClose:onClose,placement:POPPER_PLACEMENT[position]},React.createElement("article",{className:classes.expandedPanelContentPopperContent},React.createElement(UTLabel,{dataTestId:"".concat(dataTestId,".").concat(TITLE),variant:"small",weight:"medium"},title),React.createElement(UTLabel,{colorTheme:"gray",dataTestId:"".concat(dataTestId,".").concat(LABEL),variant:"small"},description)))};ExpandedPanelContentPopper.propTypes={anchor:object,classes:objectOf(string),dataTestId:string,description:string,onClose:func,position:string,title:string};export default ExpandedPanelContentPopper;
+import capitalize from 'lodash/capitalize';
+import React from 'react';
+import { func, object, objectOf, string } from 'prop-types';
+import UTPopper from '../../../../../../../UTPopper';
+import UTLabel from '../../../../../../../UTLabel';
+import { ID_CONSTANTS } from '../../../../../../../../constants/testIds';
+import { POPPER_PLACEMENT } from './constants';
+const {
+  TITLE,
+  LABEL
+} = ID_CONSTANTS;
+const ExpandedPanelContentPopper = _ref => {
+  let {
+    anchor,
+    classes,
+    dataTestId,
+    description,
+    onClose,
+    position,
+    title
+  } = _ref;
+  return /*#__PURE__*/React.createElement(UTPopper, {
+    anchor: anchor,
+    className: "".concat(classes.popper, " ").concat(classes["popper".concat(capitalize(position))]),
+    onClose: onClose,
+    placement: POPPER_PLACEMENT[position]
+  }, /*#__PURE__*/React.createElement("article", {
+    className: classes.expandedPanelContentPopperContent
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    dataTestId: "".concat(dataTestId, ".").concat(TITLE),
+    variant: "small",
+    weight: "medium"
+  }, title), /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    dataTestId: "".concat(dataTestId, ".").concat(LABEL),
+    variant: "small"
+  }, description)));
+};
+ExpandedPanelContentPopper.propTypes = {
+  anchor: object,
+  classes: objectOf(string),
+  dataTestId: string,
+  description: string,
+  onClose: func,
+  position: string,
+  title: string
+};
+export default ExpandedPanelContentPopper;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/index.js

@@ -1 +1,29 @@
-import React,{useContext}from"react";import{string}from"prop-types";import UTShortcutPanelContext from"../../../../context";import{ID_CONSTANTS}from"../../../../../../constants/testIds";import ExpandedPanelContent from"./layout";const{EXPANDED_PANEL_CONTENT:EXPANDED_PANEL_CONTENT}=ID_CONSTANTS,ExpandedPanelContentContainer=_ref=>{let{dataTestId:dataTestId}=_ref;const{classes:classes,categories:categories,categoriesConfig:categoriesConfig}=useContext(UTShortcutPanelContext),modifiedDataTestId=dataTestId?"".concat(dataTestId,".").concat(EXPANDED_PANEL_CONTENT):void 0;return React.createElement(ExpandedPanelContent,{categories:categories,categoriesConfig:categoriesConfig,classes:classes,modifiedDataTestId:modifiedDataTestId})};ExpandedPanelContentContainer.propTypes={dataTestId:string};export default ExpandedPanelContentContainer;
+import React, { useContext } from 'react';
+import { string } from 'prop-types';
+import UTShortcutPanelContext from '../../../../context';
+import { ID_CONSTANTS } from '../../../../../../constants/testIds';
+import ExpandedPanelContent from './layout';
+const {
+  EXPANDED_PANEL_CONTENT
+} = ID_CONSTANTS;
+const ExpandedPanelContentContainer = _ref => {
+  let {
+    dataTestId
+  } = _ref;
+  const {
+    classes,
+    categories,
+    categoriesConfig
+  } = useContext(UTShortcutPanelContext);
+  const modifiedDataTestId = dataTestId ? "".concat(dataTestId, ".").concat(EXPANDED_PANEL_CONTENT) : undefined;
+  return /*#__PURE__*/React.createElement(ExpandedPanelContent, {
+    categories: categories,
+    categoriesConfig: categoriesConfig,
+    classes: classes,
+    modifiedDataTestId: modifiedDataTestId
+  });
+};
+ExpandedPanelContentContainer.propTypes = {
+  dataTestId: string
+};
+export default ExpandedPanelContentContainer;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/layout.js

@@ -1 +1,37 @@
-import React from"react";import{array,object,objectOf,string}from"prop-types";import{ID_CONSTANTS}from"../../../../../../constants/testIds";import ExpandedPanelContentCategory from"./components/ExpandedPanelContentCategory";import ExpandedPanelContentHeader from"./components/ExpandedPanelContentHeader";import ExpandedPanelContentPopper from"./components/ExpandedPanelContentPopper";const{EXPANDED_PANEL_CONTENT_CATEGORY:EXPANDED_PANEL_CONTENT_CATEGORY,POPPER:POPPER}=ID_CONSTANTS,ExpandedPanelContent=_ref=>{let{modifiedDataTestId:modifiedDataTestId,classes:classes,categories:categories,categoriesConfig:categoriesConfig}=_ref;return React.createElement("article",{className:classes.expandedPanelContent},React.createElement(ExpandedPanelContentHeader,{dataTestId:modifiedDataTestId}),categories&&Array.isArray(categories)&&categories.map(category=>React.createElement(ExpandedPanelContentCategory,{key:category.id,category:category,dataTestId:modifiedDataTestId?"".concat(modifiedDataTestId,".").concat(EXPANDED_PANEL_CONTENT_CATEGORY):void 0,categoryConfig:categoriesConfig[category.category]})),React.createElement(ExpandedPanelContentPopper,{dataTestId:"".concat(modifiedDataTestId,".").concat(POPPER)}))};ExpandedPanelContent.propTypes={categories:array,categoriesConfig:objectOf(object),classes:objectOf(string),modifiedDataTestId:string};export default ExpandedPanelContent;
+import React from 'react';
+import { array, object, objectOf, string } from 'prop-types';
+import { ID_CONSTANTS } from '../../../../../../constants/testIds';
+import ExpandedPanelContentCategory from './components/ExpandedPanelContentCategory';
+import ExpandedPanelContentHeader from './components/ExpandedPanelContentHeader';
+import ExpandedPanelContentPopper from './components/ExpandedPanelContentPopper';
+const {
+  EXPANDED_PANEL_CONTENT_CATEGORY,
+  POPPER
+} = ID_CONSTANTS;
+const ExpandedPanelContent = _ref => {
+  let {
+    modifiedDataTestId,
+    classes,
+    categories,
+    categoriesConfig
+  } = _ref;
+  return /*#__PURE__*/React.createElement("article", {
+    className: classes.expandedPanelContent
+  }, /*#__PURE__*/React.createElement(ExpandedPanelContentHeader, {
+    dataTestId: modifiedDataTestId
+  }), categories && Array.isArray(categories) && categories.map(category => /*#__PURE__*/React.createElement(ExpandedPanelContentCategory, {
+    key: category.id,
+    category: category,
+    dataTestId: modifiedDataTestId ? "".concat(modifiedDataTestId, ".").concat(EXPANDED_PANEL_CONTENT_CATEGORY) : undefined,
+    categoryConfig: categoriesConfig[category.category]
+  })), /*#__PURE__*/React.createElement(ExpandedPanelContentPopper, {
+    dataTestId: "".concat(modifiedDataTestId, ".").concat(POPPER)
+  }));
+};
+ExpandedPanelContent.propTypes = {
+  categories: array,
+  categoriesConfig: objectOf(object),
+  classes: objectOf(string),
+  modifiedDataTestId: string
+};
+export default ExpandedPanelContent;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/index.js

@@ -1 +1,51 @@
-import React,{useContext,useRef}from"react";import"react-perfect-scrollbar/dist/css/styles.css";import{bool,func,string}from"prop-types";import UTShortcutPanelContext from"../../context";import{iconPropTypes}from"../../../../types/iconTypes";import{ID_CONSTANTS}from"../../../../constants/testIds";import{refType}from"../../../../types/commonTypes";import GroupingPanel from"./layout";const{GROUPING_PANEL:GROUPING_PANEL}=ID_CONSTANTS,GroupingPanelContainer=_ref=>{let{containerRef:containerRef,dataTestId:dataTestId,iconProps:iconProps,onClose:onClose,open:open,panelTitle:panelTitle,position:position}=_ref;const{classes:classes,scrollProps:scrollProps}=useContext(UTShortcutPanelContext),appendedDataTestId=dataTestId?"".concat(dataTestId,".").concat(GROUPING_PANEL):void 0,drawerRef=useRef(null);return React.createElement(GroupingPanel,{appendedDataTestId:appendedDataTestId,classes:classes,containerRef:containerRef,dataTestId:appendedDataTestId,drawerRef:drawerRef,iconProps:iconProps,onClose:onClose,open:open,panelTitle:panelTitle,position:position,scrollProps:scrollProps})};GroupingPanelContainer.propTypes={containerRef:refType,dataTestId:string,onClose:func,open:bool,position:string,panelTitle:string,iconProps:iconPropTypes};export default GroupingPanelContainer;
+import React, { useContext, useRef } from 'react';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import { bool, func, string } from 'prop-types';
+import UTShortcutPanelContext from '../../context';
+import { iconPropTypes } from '../../../../types/iconTypes';
+import { ID_CONSTANTS } from '../../../../constants/testIds';
+import { refType } from '../../../../types/commonTypes';
+import GroupingPanel from './layout';
+const {
+  GROUPING_PANEL
+} = ID_CONSTANTS;
+const GroupingPanelContainer = _ref => {
+  let {
+    containerRef,
+    dataTestId,
+    iconProps,
+    onClose,
+    open,
+    panelTitle,
+    position
+  } = _ref;
+  const {
+    classes,
+    scrollProps
+  } = useContext(UTShortcutPanelContext);
+  const appendedDataTestId = dataTestId ? "".concat(dataTestId, ".").concat(GROUPING_PANEL) : undefined;
+  const drawerRef = useRef(null);
+  return /*#__PURE__*/React.createElement(GroupingPanel, {
+    appendedDataTestId: appendedDataTestId,
+    classes: classes,
+    containerRef: containerRef,
+    dataTestId: appendedDataTestId,
+    drawerRef: drawerRef,
+    iconProps: iconProps,
+    onClose: onClose,
+    open: open,
+    panelTitle: panelTitle,
+    position: position,
+    scrollProps: scrollProps
+  });
+};
+GroupingPanelContainer.propTypes = {
+  containerRef: refType,
+  dataTestId: string,
+  onClose: func,
+  open: bool,
+  position: string,
+  panelTitle: string,
+  iconProps: iconPropTypes
+};
+export default GroupingPanelContainer;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/layout.js

@@ -1 +1,60 @@
-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)}import capitalize from"lodash/capitalize";import PerfectScrollbar from"react-perfect-scrollbar";import React from"react";import{bool,func,object,objectOf,refType,string}from"prop-types";import{Drawer}from"@material-ui/core";import CollapsedPanelContent from"./components/CollapsedPanelContent";import ExpandedPanelContent from"./components/ExpandedPanelContent";import"react-perfect-scrollbar/dist/css/styles.css";const GroupingPanel=_ref=>{let{appendedDataTestId:appendedDataTestId,classes:classes,containerRef:containerRef,drawerRef:drawerRef,onClose:onClose,open:open,position:position,scrollProps:scrollProps}=_ref;return React.createElement(Drawer,{anchor:position,classes:{paper:"".concat(classes.paper," ").concat(open?classes.paperOpen:""),root:classes["panelRoot".concat(capitalize(position))]},disablePortal:!0,ModalProps:{hideBackdrop:!0,disableEnforceFocus:!0,container:containerRef,keepMounted:!!containerRef},onClose:onClose,open:open,ref:drawerRef,swipeAreaWidth:0,variant:"permanent"},open?React.createElement(PerfectScrollbar,_extends({},scrollProps,{className:classes.perfectScrollbar,options:{suppressScrollX:!0}}),React.createElement(ExpandedPanelContent,{dataTestId:appendedDataTestId})):React.createElement(CollapsedPanelContent,{dataTestId:appendedDataTestId}))};GroupingPanel.propTypes={appendedDataTestId:string,classes:objectOf(string),containerRef:refType,drawerRef:refType,onClose:func,open:bool,position:string,scrollProps:object};export default GroupingPanel;
+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); }
+import capitalize from 'lodash/capitalize';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import React from 'react';
+import { bool, func, object, objectOf, refType, string } from 'prop-types';
+import { Drawer } from '@material-ui/core';
+import CollapsedPanelContent from './components/CollapsedPanelContent';
+import ExpandedPanelContent from './components/ExpandedPanelContent';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+const GroupingPanel = _ref => {
+  let {
+    appendedDataTestId,
+    classes,
+    containerRef,
+    drawerRef,
+    onClose,
+    open,
+    position,
+    scrollProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Drawer, {
+    anchor: position,
+    classes: {
+      paper: "".concat(classes.paper, " ").concat(open ? classes.paperOpen : ''),
+      root: classes["panelRoot".concat(capitalize(position))]
+    },
+    disablePortal: true,
+    ModalProps: {
+      hideBackdrop: true,
+      disableEnforceFocus: true,
+      container: containerRef,
+      keepMounted: !!containerRef
+    },
+    onClose: onClose,
+    open: open,
+    ref: drawerRef,
+    swipeAreaWidth: 0,
+    variant: "permanent"
+  }, open ? /*#__PURE__*/React.createElement(PerfectScrollbar, _extends({}, scrollProps, {
+    className: classes.perfectScrollbar,
+    options: {
+      suppressScrollX: true
+    }
+  }), /*#__PURE__*/React.createElement(ExpandedPanelContent, {
+    dataTestId: appendedDataTestId
+  })) : /*#__PURE__*/React.createElement(CollapsedPanelContent, {
+    dataTestId: appendedDataTestId
+  }));
+};
+GroupingPanel.propTypes = {
+  appendedDataTestId: string,
+  classes: objectOf(string),
+  containerRef: refType,
+  drawerRef: refType,
+  onClose: func,
+  open: bool,
+  position: string,
+  scrollProps: object
+};
+export default GroupingPanel;

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

@@ -1 +1,4 @@
-export const PANEL_POSITIONS={LEFT:"left",RIGHT:"right"};
+export const PANEL_POSITIONS = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};

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

@@ -1 +1,3 @@
-import{createContext}from"react";const UTShortcutPanelContext=createContext({});export default UTShortcutPanelContext;
+import { createContext } from 'react';
+const UTShortcutPanelContext = /*#__PURE__*/createContext({});
+export default UTShortcutPanelContext;

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

@@ -1 +1,213 @@
-import React,{useRef,useMemo,useState,useEffect}from"react";import{arrayOf,bool,func,number,object,objectOf,shape,string}from"prop-types";import WithTheme from"../WithTheme";import{iconPropTypes}from"../../types/iconTypes";import{mergeMultipleClassNames}from"../../utils/classesUtils";import styles from"./styles.module.scss";import UTShortcutPanel from"./layout";import UTShortcutPanelContext from"./context";import{PANEL_POSITIONS}from"./constants";import{retrieveStyle}from"./theme";const UTShortcutPanelContainer=_ref=>{let{categories:categories,categoriesConfig:categoriesConfig,children:children,classNames:classNames,classes:theme,dataTestId:dataTestId,disableCollapsibleCategories:disableCollapsibleCategories=!1,handleSelectFilter:handleSelectFilter,hideAddFilterButton:hideAddFilterButton=!1,iconProps:iconProps,invalidParamsConfig:invalidParamsConfig,noFiltersText:noFiltersText,noFiltersTitle:noFiltersTitle,onDeleteFilterGrouping:onDeleteFilterGrouping,onEditFilterGrouping:onEditFilterGrouping,onTogglePanel:onTogglePanel,panelTitle:panelTitle,position:position=PANEL_POSITIONS.LEFT,scrollProps:scrollProps,searchResetKey:searchResetKey,showActionsOnPinned:showActionsOnPinned=!1,selectedFilter:selectedFilter,startOpen:startOpen=!1,tooltipsContentMap:tooltipsContentMap={}}=_ref;const classes=useMemo(()=>mergeMultipleClassNames(styles,theme,classNames),[classNames,theme]),containerRef=useRef(null),[open,setOpen]=useState(startOpen),[filteredValues,setFilteredValues]=useState(!1),[searchTerm,setSearchTerm]=useState(""),handleTogglePanel=()=>{setOpen(!open),null==onTogglePanel||onTogglePanel(!open)},[filteredCategories,setFilteredCategories]=useState(categories),handleAddFilterGroup=()=>{},applySearch=(value,source)=>{const filteredResults=source.map(category=>{const filters=category.filters.filter(filter=>filter.name.toLowerCase().includes(value.toLowerCase()));return{...category,filters:filters}}).filter(category=>category.filters.length>0);setFilteredCategories(filteredResults),setFilteredValues(Boolean(value))},handleFilterGroupSearch=value=>{setSearchTerm(value),applySearch(value,categories)},[popperState,setPopperState]=useState({}),openPopper=_ref2=>{let{anchor:anchor,title:title,description:description}=_ref2;anchor&&(!description&&title.length<20||setPopperState({anchor:anchor,title:title,description:description}))},closePopper=()=>{setPopperState({})};useEffect(()=>{searchTerm?applySearch(searchTerm,categories):setFilteredCategories(categories)},[categories]);const[searchResetTrigger,setSearchResetTrigger]=useState(0);useEffect(()=>{setSearchTerm(""),setFilteredValues(!1),setFilteredCategories(categories),setSearchResetTrigger(prev=>prev+1)},[searchResetKey]);const contextValue=useMemo(()=>({categories:filteredCategories,categoriesConfig:categoriesConfig,classes:classes,closePopper:closePopper,containerRef:containerRef.current,disableCollapsibleCategories:disableCollapsibleCategories,filteredValues:filteredValues,handleAddFilterGroup:handleAddFilterGroup,handleFilterGroupSearch:handleFilterGroupSearch,handleSelectFilter:handleSelectFilter,handleTogglePanel:handleTogglePanel,hideAddFilterButton:hideAddFilterButton,iconProps:iconProps,invalidParamsConfig:invalidParamsConfig,noFiltersText:noFiltersText,noFiltersTitle:noFiltersTitle,onDeleteFilterGrouping:onDeleteFilterGrouping,onEditFilterGrouping:onEditFilterGrouping,open:open,openPopper:openPopper,panelTitle:panelTitle,popperState:popperState,position:position,scrollProps:scrollProps,searchResetTrigger:searchResetTrigger,selectedFilter:selectedFilter,showActionsOnPinned:showActionsOnPinned,theme:theme,tooltipsContentMap:tooltipsContentMap}),[categories,categoriesConfig,classes,disableCollapsibleCategories,filteredCategories,filteredValues,hideAddFilterButton,iconProps,invalidParamsConfig,noFiltersText,noFiltersTitle,onDeleteFilterGrouping,onEditFilterGrouping,showActionsOnPinned,open,popperState,position,scrollProps,searchResetTrigger,selectedFilter,theme,tooltipsContentMap]);return React.createElement(UTShortcutPanelContext.Provider,{value:contextValue},React.createElement("section",{className:classes.filterGroupingContainer,ref:containerRef},React.createElement(UTShortcutPanel,{containerRef:containerRef.current,dataTestId:dataTestId,handleTogglePanel:handleTogglePanel,iconProps:iconProps,open:open,position:position},children)))};UTShortcutPanelContainer.propTypes={categories:arrayOf(shape({id:number,category:string,name:string,filters:arrayOf(shape({id:number,name:string,category:string,description:string,order:number,pinned:bool,visible:bool,backoffice_user_id:string,filter_params:arrayOf(shape({key:string,values:arrayOf(string)}))}))})),categoriesConfig:objectOf(shape({icon:string,avatarPalette:shape({color:string,backgroundColor:string,colorTheme:string})})),classNames:objectOf(string),classes:objectOf(string),dataTestId:string,disableCollapsibleCategories:bool,handleSelectFilter:func,hideAddFilterButton:bool,iconProps:iconPropTypes,invalidParamsConfig:shape({iconName:string,size:string,tooltipText:string}),noFiltersText:string,noFiltersTitle:string,onDeleteFilterGrouping:func,onEditFilterGrouping:func,onTogglePanel:func,showActionsOnPinned:bool,panelTitle:string,position:string,scrollProps:object,searchResetKey:string,selectedFilter:shape({id:number,name:string,category:string,description:string,order:number,pinned:bool,visible:bool,backoffice_user_id:string,filter_params:arrayOf(shape({key:string,values:arrayOf(string)}))}),startOpen:bool,tooltipsContentMap:shape({collapseButton:string,searchButton:string})};export default WithTheme(retrieveStyle)(UTShortcutPanelContainer);
+import React, { useRef, useMemo, useState, useEffect } from 'react';
+import { arrayOf, bool, func, number, object, objectOf, shape, string } from 'prop-types';
+import WithTheme from '../WithTheme';
+import { iconPropTypes } from '../../types/iconTypes';
+import { mergeMultipleClassNames } from '../../utils/classesUtils';
+import styles from './styles.module.scss';
+import UTShortcutPanel from './layout';
+import UTShortcutPanelContext from './context';
+import { PANEL_POSITIONS } from './constants';
+import { retrieveStyle } from './theme';
+const UTShortcutPanelContainer = _ref => {
+  let {
+    categories,
+    categoriesConfig,
+    children,
+    classNames,
+    classes: theme,
+    dataTestId,
+    disableCollapsibleCategories = false,
+    handleSelectFilter,
+    hideAddFilterButton = false,
+    iconProps,
+    invalidParamsConfig,
+    noFiltersText,
+    noFiltersTitle,
+    onDeleteFilterGrouping,
+    onEditFilterGrouping,
+    onTogglePanel,
+    panelTitle,
+    position = PANEL_POSITIONS.LEFT,
+    scrollProps,
+    searchResetKey,
+    showActionsOnPinned = false,
+    selectedFilter,
+    startOpen = false,
+    tooltipsContentMap = {}
+  } = _ref;
+  const classes = useMemo(() => mergeMultipleClassNames(styles, theme, classNames), [classNames, theme]);
+  const containerRef = useRef(null);
+  const [open, setOpen] = useState(startOpen);
+  const [filteredValues, setFilteredValues] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const handleTogglePanel = () => {
+    setOpen(!open);
+    onTogglePanel === null || onTogglePanel === void 0 || onTogglePanel(!open);
+  };
+  const [filteredCategories, setFilteredCategories] = useState(categories);
+
+  // TODO: desarrollo en otro PR
+  const handleAddFilterGroup = () => {};
+  const applySearch = (value, source) => {
+    const filteredResults = source.map(category => {
+      const filters = category.filters.filter(filter => filter.name.toLowerCase().includes(value.toLowerCase()));
+      return {
+        ...category,
+        filters
+      };
+    }).filter(category => category.filters.length > 0);
+    setFilteredCategories(filteredResults);
+    setFilteredValues(Boolean(value));
+  };
+  const handleFilterGroupSearch = value => {
+    setSearchTerm(value);
+    applySearch(value, categories);
+  };
+  const [popperState, setPopperState] = useState({});
+  const openPopper = _ref2 => {
+    let {
+      anchor,
+      title,
+      description
+    } = _ref2;
+    if (!anchor) return;
+    if (!description && title.length < 20) return;
+    setPopperState({
+      anchor,
+      title,
+      description
+    });
+  };
+  const closePopper = () => {
+    setPopperState({});
+  };
+  useEffect(() => {
+    if (searchTerm) {
+      applySearch(searchTerm, categories);
+    } else {
+      setFilteredCategories(categories);
+    }
+  }, [categories]);
+  const [searchResetTrigger, setSearchResetTrigger] = useState(0);
+  useEffect(() => {
+    setSearchTerm('');
+    setFilteredValues(false);
+    setFilteredCategories(categories);
+    setSearchResetTrigger(prev => prev + 1);
+  }, [searchResetKey]);
+  const contextValue = useMemo(() => ({
+    categories: filteredCategories,
+    categoriesConfig,
+    classes,
+    closePopper,
+    containerRef: containerRef.current,
+    disableCollapsibleCategories,
+    filteredValues,
+    handleAddFilterGroup,
+    handleFilterGroupSearch,
+    handleSelectFilter,
+    handleTogglePanel,
+    hideAddFilterButton,
+    iconProps,
+    invalidParamsConfig,
+    noFiltersText,
+    noFiltersTitle,
+    onDeleteFilterGrouping,
+    onEditFilterGrouping,
+    open,
+    openPopper,
+    panelTitle,
+    popperState,
+    position,
+    scrollProps,
+    searchResetTrigger,
+    selectedFilter,
+    showActionsOnPinned,
+    theme,
+    tooltipsContentMap
+  }), [categories, categoriesConfig, classes, disableCollapsibleCategories, filteredCategories, filteredValues, hideAddFilterButton, iconProps, invalidParamsConfig, noFiltersText, noFiltersTitle, onDeleteFilterGrouping, onEditFilterGrouping, showActionsOnPinned, open, popperState, position, scrollProps, searchResetTrigger, selectedFilter, theme, tooltipsContentMap]);
+  return /*#__PURE__*/React.createElement(UTShortcutPanelContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("section", {
+    className: classes.filterGroupingContainer,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(UTShortcutPanel, {
+    containerRef: containerRef.current,
+    dataTestId: dataTestId,
+    handleTogglePanel: handleTogglePanel,
+    iconProps: iconProps,
+    open: open,
+    position: position
+  }, children)));
+};
+UTShortcutPanelContainer.propTypes = {
+  categories: arrayOf(shape({
+    id: number,
+    category: string,
+    name: string,
+    filters: arrayOf(shape({
+      id: number,
+      name: string,
+      category: string,
+      description: string,
+      order: number,
+      pinned: bool,
+      visible: bool,
+      backoffice_user_id: string,
+      filter_params: arrayOf(shape({
+        key: string,
+        values: arrayOf(string)
+      }))
+    }))
+  })),
+  categoriesConfig: objectOf(shape({
+    icon: string,
+    avatarPalette: shape({
+      color: string,
+      backgroundColor: string,
+      colorTheme: string
+    })
+  })),
+  classNames: objectOf(string),
+  classes: objectOf(string),
+  dataTestId: string,
+  disableCollapsibleCategories: bool,
+  handleSelectFilter: func,
+  hideAddFilterButton: bool,
+  iconProps: iconPropTypes,
+  invalidParamsConfig: shape({
+    iconName: string,
+    size: string,
+    tooltipText: string
+  }),
+  noFiltersText: string,
+  noFiltersTitle: string,
+  onDeleteFilterGrouping: func,
+  onEditFilterGrouping: func,
+  onTogglePanel: func,
+  showActionsOnPinned: bool,
+  panelTitle: string,
+  position: string,
+  scrollProps: object,
+  searchResetKey: string,
+  selectedFilter: shape({
+    id: number,
+    name: string,
+    category: string,
+    description: string,
+    order: number,
+    pinned: bool,
+    visible: bool,
+    backoffice_user_id: string,
+    filter_params: arrayOf(shape({
+      key: string,
+      values: arrayOf(string)
+    }))
+  }),
+  startOpen: bool,
+  tooltipsContentMap: shape({
+    collapseButton: string,
+    searchButton: string
+  })
+};
+export default WithTheme(retrieveStyle)(UTShortcutPanelContainer);