npm - @widergy/energy-ui - Versions diffs - 3.172.3 → 3.173.0 - Mend

@widergy/energy-ui 3.172.3 → 3.173.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1476) hide show

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryHeader/layout.js CHANGED Viewed

@@ -1 +1,71 @@
-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 React from"react";import{arrayOf,bool,func,objectOf,shape,string}from"prop-types";import UTAvatar from"../../../../../../../../../UTAvatar";import UTIcon from"../../../../../../../../../UTIcon";import UTLabel from"../../../../../../../../../UTLabel";import UTTouchableWithoutFeedback from"../../../../../../../../../UTTouchableWithoutFeedback";import{ID_CONSTANTS}from"../../../../../../../../../../constants/testIds";const{AVATAR:AVATAR,COLLAPSE_BUTTON:COLLAPSE_BUTTON,LABEL:LABEL}=ID_CONSTANTS,ExpandedPanelContentCategoryHeader=_ref=>{let{avatarPalette:avatarPalette,classes:classes,collapsedCategory:collapsedCategory,dataTestId:dataTestId,disableCollapsibleCategories:disableCollapsibleCategories,handleToggleCollapsedCategory:handleToggleCollapsedCategory,headerEvents:headerEvents,hoverMode:hoverMode,icon:icon,title:title}=_ref;return React.createElement("header",_extends({className:"".concat(classes.expandedPanelContentCategoryHeader," ").concat(disableCollapsibleCategories?classes.expandedPanelContentCategoryHeaderNoCollapsible:"")},headerEvents),hoverMode?React.createElement(UTTouchableWithoutFeedback,{dataTestId:"".concat(dataTestId,".").concat(COLLAPSE_BUTTON),onClick:handleToggleCollapsedCategory},React.createElement(UTIcon,{className:collapsedCategory?classes.collapsedCategoryIcon:"",colorTheme:"gray",name:"IconChevronDown",size:"24"})):icon?React.createElement(UTAvatar,{areaShape:"rounded",className:classes.expandedPanelContentCategoryHeaderAvatar,dataTestId:"".concat(dataTestId,".").concat(AVATAR),iconProps:{name:icon},palette:avatarPalette,size:"small",type:"icon"}):null,React.createElement(UTLabel,{className:classes.expandedPanelContentCategoryHeaderLabel,colorTheme:hoverMode?"dark":"gray",dataTestId:"".concat(dataTestId,".").concat(LABEL),variant:"small",weight:"medium"},title))};ExpandedPanelContentCategoryHeader.propTypes={avatarPalette:arrayOf(shape({backgroundColor:string,color:string,colorTheme:string})),classes:objectOf(string),collapsedCategory:bool,dataTestId:string,disableCollapsibleCategories:bool,handleToggleCollapsedCategory:func,headerEvents:objectOf(func),hoverMode:bool,icon:string,title:string};export default ExpandedPanelContentCategoryHeader;
+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 React from 'react';
+import { arrayOf, bool, func, objectOf, shape, string } from 'prop-types';
+import UTAvatar from '../../../../../../../../../UTAvatar';
+import UTIcon from '../../../../../../../../../UTIcon';
+import UTLabel from '../../../../../../../../../UTLabel';
+import UTTouchableWithoutFeedback from '../../../../../../../../../UTTouchableWithoutFeedback';
+import { ID_CONSTANTS } from '../../../../../../../../../../constants/testIds';
+const {
+  AVATAR,
+  COLLAPSE_BUTTON,
+  LABEL
+} = ID_CONSTANTS;
+const ExpandedPanelContentCategoryHeader = _ref => {
+  let {
+    avatarPalette,
+    classes,
+    collapsedCategory,
+    dataTestId,
+    disableCollapsibleCategories,
+    handleToggleCollapsedCategory,
+    headerEvents,
+    hoverMode,
+    icon,
+    title
+  } = _ref;
+  return /*#__PURE__*/React.createElement("header", _extends({
+    className: "".concat(classes.expandedPanelContentCategoryHeader, " ").concat(disableCollapsibleCategories ? classes.expandedPanelContentCategoryHeaderNoCollapsible : '')
+  }, headerEvents), hoverMode ? /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    dataTestId: "".concat(dataTestId, ".").concat(COLLAPSE_BUTTON),
+    onClick: handleToggleCollapsedCategory
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    className: collapsedCategory ? classes.collapsedCategoryIcon : '',
+    colorTheme: "gray",
+    name: "IconChevronDown",
+    size: "24"
+  })) : icon ? /*#__PURE__*/React.createElement(UTAvatar, {
+    areaShape: "rounded",
+    className: classes.expandedPanelContentCategoryHeaderAvatar,
+    dataTestId: "".concat(dataTestId, ".").concat(AVATAR),
+    iconProps: {
+      name: icon
+    },
+    palette: avatarPalette,
+    size: "small",
+    type: "icon"
+  }) : null, /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.expandedPanelContentCategoryHeaderLabel,
+    colorTheme: hoverMode ? 'dark' : 'gray',
+    dataTestId: "".concat(dataTestId, ".").concat(LABEL),
+    variant: "small",
+    weight: "medium"
+  }, title));
+};
+ExpandedPanelContentCategoryHeader.propTypes = {
+  avatarPalette: arrayOf(shape({
+    backgroundColor: string,
+    color: string,
+    colorTheme: string
+  })),
+  classes: objectOf(string),
+  collapsedCategory: bool,
+  dataTestId: string,
+  disableCollapsibleCategories: bool,
+  handleToggleCollapsedCategory: func,
+  headerEvents: objectOf(func),
+  hoverMode: bool,
+  icon: string,
+  title: string
+};
+export default ExpandedPanelContentCategoryHeader;

@@ -1 +1,15 @@
-import{PANEL_POSITIONS}from"../../../../../../../../constants";export const TOOLTIP_PLACEMENT={[PANEL_POSITIONS.LEFT]:"right",[PANEL_POSITIONS.RIGHT]:"left"};export const TOOLTIP_OFFSET={editButton:{[PANEL_POSITIONS.LEFT]:"0, 40",[PANEL_POSITIONS.RIGHT]:"0, -268"},deleteButton:{[PANEL_POSITIONS.LEFT]:"0, 0",[PANEL_POSITIONS.RIGHT]:"0, -320"}};
+import { PANEL_POSITIONS } from '../../../../../../../../constants';
+export const TOOLTIP_PLACEMENT = {
+  [PANEL_POSITIONS.LEFT]: 'right',
+  [PANEL_POSITIONS.RIGHT]: 'left'
+};
+export const TOOLTIP_OFFSET = {
+  editButton: {
+    [PANEL_POSITIONS.LEFT]: '0, 40',
+    [PANEL_POSITIONS.RIGHT]: '0, -268'
+  },
+  deleteButton: {
+    [PANEL_POSITIONS.LEFT]: '0, 0',
+    [PANEL_POSITIONS.RIGHT]: '0, -320'
+  }
+};

@@ -1 +1,77 @@
-import React,{useContext,useRef}from"react";import{object,string}from"prop-types";import UTShortcutPanelContext from"../../../../../../../../context";import{handleAnimationEnd}from"../../../../../../../../utils";import ExpandedPanelContentCategoryItem from"./layout";const ExpandedPanelContentCategoryItemContainer=_ref=>{var _name$toLowerCase,_name$toLowerCase$spl,_name$toLowerCase$spl2;let{dataTestId:dataTestId,filter:filter}=_ref;const{classes:classes,closePopper:closePopper,handleSelectFilter:handleSelectFilter,invalidParamsConfig:invalidParamsConfig,onDeleteFilterGrouping:onDeleteFilterGrouping,onEditFilterGrouping:onEditFilterGrouping,openPopper:openPopper,position:position,selectedFilter:selectedFilter,showActionsOnPinned:showActionsOnPinned,tooltipsContentMap:{editButton:editButton,deleteButton:deleteButton}}=useContext(UTShortcutPanelContext),{description:description,hasInvalidParams:hasInvalidParams,name:name,pinned:pinned,category:category}=filter,resolvedHasInvalidParams=!!hasInvalidParams&&(null==invalidParamsConfig||invalidParamsConfig),id="".concat(null==name||null===(_name$toLowerCase=name.toLowerCase)||void 0===_name$toLowerCase||null===(_name$toLowerCase=_name$toLowerCase.call(name))||void 0===_name$toLowerCase||null===(_name$toLowerCase$spl=_name$toLowerCase.split)||void 0===_name$toLowerCase$spl||null===(_name$toLowerCase$spl=_name$toLowerCase$spl.call(_name$toLowerCase," "))||void 0===_name$toLowerCase$spl||null===(_name$toLowerCase$spl2=_name$toLowerCase$spl.join)||void 0===_name$toLowerCase$spl2?void 0:_name$toLowerCase$spl2.call(_name$toLowerCase$spl,"_"),"_").concat(category),deleteButtonTippyRef=useRef(null),editButtonTippyRef=useRef(null);return React.createElement(ExpandedPanelContentCategoryItem,{animationEnd:()=>handleAnimationEnd(editButtonTippyRef,deleteButtonTippyRef),classes:classes,closeItemDescription:closePopper,dataTestId:dataTestId,deleteButton:deleteButton,deleteButtonTippyRef:deleteButtonTippyRef,editButton:editButton,editButtonTippyRef:editButtonTippyRef,handleDeleteFilterGrouping:onDeleteFilterGrouping?()=>onDeleteFilterGrouping(filter):void 0,handleEditFilterGrouping:onEditFilterGrouping?()=>onEditFilterGrouping(filter):void 0,handleSelectFilter:()=>{handleSelectFilter(filter)},hasInvalidParams:resolvedHasInvalidParams,id:id,name:name,openItemDescription:()=>{const anchor=document.getElementById(id);openPopper({anchor:anchor,title:name,description:description})},pinned:pinned,position:position,showActionsOnPinned:showActionsOnPinned,selected:null!=(null==selectedFilter?void 0:selectedFilter.id)&&selectedFilter.id===(null==filter?void 0:filter.id)&&selectedFilter.category===(null==filter?void 0:filter.category)})};ExpandedPanelContentCategoryItemContainer.propTypes={dataTestId:string,filter:object};export default ExpandedPanelContentCategoryItemContainer;
+import React, { useContext, useRef } from 'react';
+import { object, string } from 'prop-types';
+import UTShortcutPanelContext from '../../../../../../../../context';
+import { handleAnimationEnd } from '../../../../../../../../utils';
+import ExpandedPanelContentCategoryItem from './layout';
+const ExpandedPanelContentCategoryItemContainer = _ref => {
+  var _name$toLowerCase, _name$toLowerCase$spl, _name$toLowerCase$spl2;
+  let {
+    dataTestId,
+    filter
+  } = _ref;
+  const {
+    classes,
+    closePopper,
+    handleSelectFilter,
+    invalidParamsConfig,
+    onDeleteFilterGrouping,
+    onEditFilterGrouping,
+    openPopper,
+    position,
+    selectedFilter,
+    showActionsOnPinned,
+    tooltipsContentMap: {
+      editButton,
+      deleteButton
+    }
+  } = useContext(UTShortcutPanelContext);
+  const {
+    description,
+    hasInvalidParams,
+    name,
+    pinned,
+    category
+  } = filter;
+  const resolvedHasInvalidParams = hasInvalidParams ? invalidParamsConfig !== null && invalidParamsConfig !== void 0 ? invalidParamsConfig : true : false;
+  const id = "".concat(name === null || name === void 0 || (_name$toLowerCase = name.toLowerCase) === null || _name$toLowerCase === void 0 || (_name$toLowerCase = _name$toLowerCase.call(name)) === null || _name$toLowerCase === void 0 || (_name$toLowerCase$spl = _name$toLowerCase.split) === null || _name$toLowerCase$spl === void 0 || (_name$toLowerCase$spl = _name$toLowerCase$spl.call(_name$toLowerCase, ' ')) === null || _name$toLowerCase$spl === void 0 || (_name$toLowerCase$spl2 = _name$toLowerCase$spl.join) === null || _name$toLowerCase$spl2 === void 0 ? void 0 : _name$toLowerCase$spl2.call(_name$toLowerCase$spl, '_'), "_").concat(category);
+  const deleteButtonTippyRef = useRef(null);
+  const editButtonTippyRef = useRef(null);
+  const handleOpenItemDescription = () => {
+    const anchor = document.getElementById(id);
+    openPopper({
+      anchor,
+      title: name,
+      description
+    });
+  };
+  const handleSelectFilters = () => {
+    handleSelectFilter(filter);
+  };
+  const animationEnd = () => handleAnimationEnd(editButtonTippyRef, deleteButtonTippyRef);
+  return /*#__PURE__*/React.createElement(ExpandedPanelContentCategoryItem, {
+    animationEnd: animationEnd,
+    classes: classes,
+    closeItemDescription: closePopper,
+    dataTestId: dataTestId,
+    deleteButton: deleteButton,
+    deleteButtonTippyRef: deleteButtonTippyRef,
+    editButton: editButton,
+    editButtonTippyRef: editButtonTippyRef,
+    handleDeleteFilterGrouping: onDeleteFilterGrouping ? () => onDeleteFilterGrouping(filter) : undefined,
+    handleEditFilterGrouping: onEditFilterGrouping ? () => onEditFilterGrouping(filter) : undefined,
+    handleSelectFilter: handleSelectFilters,
+    hasInvalidParams: resolvedHasInvalidParams,
+    id: id,
+    name: name,
+    openItemDescription: handleOpenItemDescription,
+    pinned: pinned,
+    position: position,
+    showActionsOnPinned: showActionsOnPinned,
+    selected: (selectedFilter === null || selectedFilter === void 0 ? void 0 : selectedFilter.id) != null && selectedFilter.id === (filter === null || filter === void 0 ? void 0 : filter.id) && selectedFilter.category === (filter === null || filter === void 0 ? void 0 : filter.category)
+  });
+};
+ExpandedPanelContentCategoryItemContainer.propTypes = {
+  dataTestId: string,
+  filter: object
+};
+export default ExpandedPanelContentCategoryItemContainer;

@@ -1 +1,151 @@
-import React from"react";import{bool,func,object,oneOfType,shape,string}from"prop-types";import UTButton from"../../../../../../../../../UTButton";import UTIcon from"../../../../../../../../../UTIcon";import UTLabel from"../../../../../../../../../UTLabel";import UTTooltip from"../../../../../../../../../UTTooltip";import UTTouchableWithoutFeedback from"../../../../../../../../../UTTouchableWithoutFeedback";import{ID_CONSTANTS}from"../../../../../../../../../../constants/testIds";import{refType}from"../../../../../../../../types";import{TOOLTIP_OFFSET,TOOLTIP_PLACEMENT}from"./constants";const{DELETE_BUTTON:DELETE_BUTTON,DELETE_BUTTON_TOOLTIP:DELETE_BUTTON_TOOLTIP,EDIT_BUTTON:EDIT_BUTTON,EDIT_BUTTON_TOOLTIP:EDIT_BUTTON_TOOLTIP}=ID_CONSTANTS,ExpandedPanelContentCategoryItem=_ref=>{let{animationEnd:animationEnd,classes:classes,closeItemDescription:closeItemDescription,dataTestId:dataTestId,deleteButton:deleteButton,deleteButtonTippyRef:deleteButtonTippyRef,editButton:editButton,editButtonTippyRef:editButtonTippyRef,handleDeleteFilterGrouping:handleDeleteFilterGrouping,handleEditFilterGrouping:handleEditFilterGrouping,handleSelectFilter:handleSelectFilter,hasInvalidParams:hasInvalidParams,id:id,name:name,openItemDescription:openItemDescription,pinned:pinned,position:position,selected:selected,showActionsOnPinned:showActionsOnPinned}=_ref;const isInvalidParamsObject="object"==typeof hasInvalidParams,invalidIconName=(isInvalidParamsObject?null==hasInvalidParams?void 0:hasInvalidParams.iconName:null)||"IconAlertTriangle",invalidIconSize=(isInvalidParamsObject?null==hasInvalidParams?void 0:hasInvalidParams.size:null)||"16",invalidTooltipText=isInvalidParamsObject?null==hasInvalidParams?void 0:hasInvalidParams.tooltipText:void 0;return React.createElement("article",{className:"".concat(classes.expandedPanelContentCategoryItem," ").concat(selected?classes.expandedPanelContentCategoryItemSelected:""),id:id},React.createElement(UTTouchableWithoutFeedback,{className:"".concat(classes.expandedPanelContentCategoryItemTitleContainer," ").concat(selected?classes.expandedPanelContentCategoryItemTitleContainerSelected:""),dataTestId:"".concat(dataTestId,".").concat(ID_CONSTANTS.NAME_CONTAINER),onClick:selected?void 0:handleSelectFilter},pinned&&React.createElement(UTIcon,{colorTheme:selected?"accent":void 0,dataTestId:"".concat(dataTestId,".").concat(ID_CONSTANTS.PINNED),name:"IconPin",shade:selected?"05":void 0,size:"20"}),React.createElement("div",{className:classes.hoverableContainer,"data-testid":"".concat(dataTestId,".").concat(ID_CONSTANTS.NAME),onMouseEnter:openItemDescription,onMouseLeave:closeItemDescription},React.createElement(UTLabel,{className:classes.expandedPanelContentCategoryItemTitleLabel,colorTheme:selected?"accent":void 0,shade:selected?"05":void 0},name)),hasInvalidParams&&(invalidTooltipText?React.createElement(UTTooltip,{content:invalidTooltipText,tippyProps:{appendTo:()=>document.body,placement:"top"}},React.createElement("span",{className:classes.hasInvalidParamsTooltipContainer},React.createElement(UTIcon,{colorTheme:"warning",dataTestId:"".concat(dataTestId,".").concat(ID_CONSTANTS.INVALID_PARAMS),name:invalidIconName,size:invalidIconSize}))):React.createElement(UTIcon,{colorTheme:"warning",dataTestId:"".concat(dataTestId,".").concat(ID_CONSTANTS.INVALID_PARAMS),name:invalidIconName,size:invalidIconSize}))),(!pinned||showActionsOnPinned)&&(handleEditFilterGrouping||handleDeleteFilterGrouping)&&React.createElement("section",{className:classes.expandedPanelContentCategoryItemActionsContainer,onAnimationEnd:animationEnd},handleEditFilterGrouping&&React.createElement(UTTooltip,{arrow:!1,content:editButton,dataTestId:"".concat(dataTestId,".").concat(EDIT_BUTTON_TOOLTIP),tippyProps:{appendTo:()=>document.body,offset:TOOLTIP_OFFSET.editButton[position],onCreate:instance=>{editButtonTippyRef.current=instance},placement:TOOLTIP_PLACEMENT[position]}},React.createElement("span",null,React.createElement(UTButton,{colorTheme:"gray",dataTestId:"".concat(dataTestId,".").concat(EDIT_BUTTON),Icon:"IconPencil",onClick:handleEditFilterGrouping,variant:"text",size:"small"}))),handleDeleteFilterGrouping&&React.createElement(UTTooltip,{arrow:!1,content:deleteButton,dataTestId:"".concat(dataTestId,".").concat(DELETE_BUTTON_TOOLTIP),tippyProps:{appendTo:()=>document.body,offset:TOOLTIP_OFFSET.deleteButton[position],onCreate:instance=>{deleteButtonTippyRef.current=instance},placement:TOOLTIP_PLACEMENT[position]}},React.createElement("span",null,React.createElement(UTButton,{colorTheme:"gray",dataTestId:dataTestId?"".concat(dataTestId,".").concat(DELETE_BUTTON):void 0,Icon:"IconTrash",onClick:handleDeleteFilterGrouping,variant:"text",size:"small"})))))};ExpandedPanelContentCategoryItem.propTypes={animationEnd:func,classes:object,closeItemDescription:func,dataTestId:string,deleteButton:string,deleteButtonTippyRef:refType,editButton:string,editButtonTippyRef:refType,handleDeleteFilterGrouping:func,handleEditFilterGrouping:func,handleSelectFilter:func,hasInvalidParams:oneOfType([bool,shape({iconName:string,size:string,tooltipText:string})]),id:string,name:string,openItemDescription:func,pinned:bool,position:string,selected:bool,showActionsOnPinned:bool};export default ExpandedPanelContentCategoryItem;
+import React from 'react';
+import { bool, func, object, oneOfType, shape, string } from 'prop-types';
+import UTButton from '../../../../../../../../../UTButton';
+import UTIcon from '../../../../../../../../../UTIcon';
+import UTLabel from '../../../../../../../../../UTLabel';
+import UTTooltip from '../../../../../../../../../UTTooltip';
+import UTTouchableWithoutFeedback from '../../../../../../../../../UTTouchableWithoutFeedback';
+import { ID_CONSTANTS } from '../../../../../../../../../../constants/testIds';
+import { refType } from '../../../../../../../../types';
+import { TOOLTIP_OFFSET, TOOLTIP_PLACEMENT } from './constants';
+const {
+  DELETE_BUTTON,
+  DELETE_BUTTON_TOOLTIP,
+  EDIT_BUTTON,
+  EDIT_BUTTON_TOOLTIP
+} = ID_CONSTANTS;
+const ExpandedPanelContentCategoryItem = _ref => {
+  let {
+    animationEnd,
+    classes,
+    closeItemDescription,
+    dataTestId,
+    deleteButton,
+    deleteButtonTippyRef,
+    editButton,
+    editButtonTippyRef,
+    handleDeleteFilterGrouping,
+    handleEditFilterGrouping,
+    handleSelectFilter,
+    hasInvalidParams,
+    id,
+    name,
+    openItemDescription,
+    pinned,
+    position,
+    selected,
+    showActionsOnPinned
+  } = _ref;
+  const isInvalidParamsObject = typeof hasInvalidParams === 'object';
+  const invalidIconName = (isInvalidParamsObject ? hasInvalidParams === null || hasInvalidParams === void 0 ? void 0 : hasInvalidParams.iconName : null) || 'IconAlertTriangle';
+  const invalidIconSize = (isInvalidParamsObject ? hasInvalidParams === null || hasInvalidParams === void 0 ? void 0 : hasInvalidParams.size : null) || '16';
+  const invalidTooltipText = isInvalidParamsObject ? hasInvalidParams === null || hasInvalidParams === void 0 ? void 0 : hasInvalidParams.tooltipText : undefined;
+  return /*#__PURE__*/React.createElement("article", {
+    className: "".concat(classes.expandedPanelContentCategoryItem, " ").concat(selected ? classes.expandedPanelContentCategoryItemSelected : ''),
+    id: id
+  }, /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: "".concat(classes.expandedPanelContentCategoryItemTitleContainer, " ").concat(selected ? classes.expandedPanelContentCategoryItemTitleContainerSelected : ''),
+    dataTestId: "".concat(dataTestId, ".").concat(ID_CONSTANTS.NAME_CONTAINER),
+    onClick: selected ? undefined : handleSelectFilter
+  }, pinned && /*#__PURE__*/React.createElement(UTIcon, {
+    colorTheme: selected ? 'accent' : undefined,
+    dataTestId: "".concat(dataTestId, ".").concat(ID_CONSTANTS.PINNED),
+    name: "IconPin",
+    shade: selected ? '05' : undefined,
+    size: "20"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.hoverableContainer,
+    "data-testid": "".concat(dataTestId, ".").concat(ID_CONSTANTS.NAME),
+    onMouseEnter: openItemDescription,
+    onMouseLeave: closeItemDescription
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.expandedPanelContentCategoryItemTitleLabel,
+    colorTheme: selected ? 'accent' : undefined,
+    shade: selected ? '05' : undefined
+  }, name)), hasInvalidParams && (invalidTooltipText ? /*#__PURE__*/React.createElement(UTTooltip, {
+    content: invalidTooltipText,
+    tippyProps: {
+      appendTo: () => document.body,
+      placement: 'top'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classes.hasInvalidParamsTooltipContainer
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    colorTheme: "warning",
+    dataTestId: "".concat(dataTestId, ".").concat(ID_CONSTANTS.INVALID_PARAMS),
+    name: invalidIconName,
+    size: invalidIconSize
+  }))) : /*#__PURE__*/React.createElement(UTIcon, {
+    colorTheme: "warning",
+    dataTestId: "".concat(dataTestId, ".").concat(ID_CONSTANTS.INVALID_PARAMS),
+    name: invalidIconName,
+    size: invalidIconSize
+  }))), (!pinned || showActionsOnPinned) && (handleEditFilterGrouping || handleDeleteFilterGrouping) && /*#__PURE__*/React.createElement("section", {
+    className: classes.expandedPanelContentCategoryItemActionsContainer,
+    onAnimationEnd: animationEnd
+  }, handleEditFilterGrouping && /*#__PURE__*/React.createElement(UTTooltip, {
+    arrow: false,
+    content: editButton,
+    dataTestId: "".concat(dataTestId, ".").concat(EDIT_BUTTON_TOOLTIP),
+    tippyProps: {
+      appendTo: () => document.body,
+      offset: TOOLTIP_OFFSET.editButton[position],
+      onCreate: instance => {
+        editButtonTippyRef.current = instance;
+      },
+      placement: TOOLTIP_PLACEMENT[position]
+    }
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "gray",
+    dataTestId: "".concat(dataTestId, ".").concat(EDIT_BUTTON),
+    Icon: "IconPencil",
+    onClick: handleEditFilterGrouping,
+    variant: "text",
+    size: "small"
+  }))), handleDeleteFilterGrouping && /*#__PURE__*/React.createElement(UTTooltip, {
+    arrow: false,
+    content: deleteButton,
+    dataTestId: "".concat(dataTestId, ".").concat(DELETE_BUTTON_TOOLTIP),
+    tippyProps: {
+      appendTo: () => document.body,
+      offset: TOOLTIP_OFFSET.deleteButton[position],
+      onCreate: instance => {
+        deleteButtonTippyRef.current = instance;
+      },
+      placement: TOOLTIP_PLACEMENT[position]
+    }
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "gray",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(DELETE_BUTTON) : undefined,
+    Icon: "IconTrash",
+    onClick: handleDeleteFilterGrouping,
+    variant: "text",
+    size: "small"
+  })))));
+};
+ExpandedPanelContentCategoryItem.propTypes = {
+  animationEnd: func,
+  classes: object,
+  closeItemDescription: func,
+  dataTestId: string,
+  deleteButton: string,
+  deleteButtonTippyRef: refType,
+  editButton: string,
+  editButtonTippyRef: refType,
+  handleDeleteFilterGrouping: func,
+  handleEditFilterGrouping: func,
+  handleSelectFilter: func,
+  hasInvalidParams: oneOfType([bool, shape({
+    iconName: string,
+    size: string,
+    tooltipText: string
+  })]),
+  id: string,
+  name: string,
+  openItemDescription: func,
+  pinned: bool,
+  position: string,
+  selected: bool,
+  showActionsOnPinned: bool
+};
+export default ExpandedPanelContentCategoryItem;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/constants.js CHANGED Viewed

	@@ -1 +1 @@
1	- export const FADE_TIMEOUT=600;
1	+ export const FADE_TIMEOUT = 600;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/index.js CHANGED Viewed

@@ -1 +1,54 @@
-import isEmpty from"lodash/isEmpty";import React,{useContext,useState}from"react";import{object,string}from"prop-types";import UTShortcutPanelContext from"../../../../../../context";import{TEST_IDS}from"../../../../../../../../constants/testIds";import ExpandedPanelContentCategory from"./layout";import{getSegregatedFilters}from"./utils";const{filterGrouping:filterGrouping}=TEST_IDS,ExpandedPanelContentCategoryContainer=_ref=>{let{category:category,categoryConfig:categoryConfig,dataTestId:dataTestId}=_ref;const{classes:classes,filteredValues:filteredValues,selectedFilter:selectedFilter}=useContext(UTShortcutPanelContext),[collapsedCategory,setCollapsedCategory]=useState(!1),modifiedDataTestId=dataTestId?"".concat(dataTestId,".").concat(category.category):filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentCategory,selectedFilterIsInCategory=(null==selectedFilter?void 0:selectedFilter.category)===category.category,{clientFilters:clientFilters,userFilters:userFilters}=getSegregatedFilters(category.filters),shouldFadeIn=!filteredValues&&!isEmpty(selectedFilter)&&collapsedCategory&&selectedFilterIsInCategory,shouldShowEmptyState=filteredValues&&isEmpty(userFilters)?null:isEmpty(userFilters);return React.createElement(ExpandedPanelContentCategory,{category:category,categoryConfig:categoryConfig,classes:classes,clientFilters:clientFilters,collapsedCategory:collapsedCategory,dataTestId:modifiedDataTestId,filteredValues:filteredValues,handleToggleCollapsedCategory:()=>{setCollapsedCategory(!collapsedCategory)},selectedFilter:selectedFilter,shouldFadeIn:shouldFadeIn,shouldShowEmptyState:shouldShowEmptyState,userFilters:userFilters})};ExpandedPanelContentCategoryContainer.propTypes={category:object,categoryConfig:object,dataTestId:string};export default ExpandedPanelContentCategoryContainer;
+import isEmpty from 'lodash/isEmpty';
+import React, { useContext, useState } from 'react';
+import { object, string } from 'prop-types';
+import UTShortcutPanelContext from '../../../../../../context';
+import { TEST_IDS } from '../../../../../../../../constants/testIds';
+import ExpandedPanelContentCategory from './layout';
+import { getSegregatedFilters } from './utils';
+const {
+  filterGrouping
+} = TEST_IDS;
+const ExpandedPanelContentCategoryContainer = _ref => {
+  let {
+    category,
+    categoryConfig,
+    dataTestId
+  } = _ref;
+  const {
+    classes,
+    filteredValues,
+    selectedFilter
+  } = useContext(UTShortcutPanelContext);
+  const [collapsedCategory, setCollapsedCategory] = useState(false);
+  const modifiedDataTestId = dataTestId ? "".concat(dataTestId, ".").concat(category.category) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentCategory;
+  const handleToggleCollapsedCategory = () => {
+    setCollapsedCategory(!collapsedCategory);
+  };
+  const selectedFilterIsInCategory = (selectedFilter === null || selectedFilter === void 0 ? void 0 : selectedFilter.category) === category.category;
+  const {
+    clientFilters,
+    userFilters
+  } = getSegregatedFilters(category.filters);
+  const shouldFadeIn = !filteredValues && !isEmpty(selectedFilter) && collapsedCategory && selectedFilterIsInCategory;
+  const shouldShowEmptyState = filteredValues && isEmpty(userFilters) ? null : isEmpty(userFilters);
+  return /*#__PURE__*/React.createElement(ExpandedPanelContentCategory, {
+    category: category,
+    categoryConfig: categoryConfig,
+    classes: classes,
+    clientFilters: clientFilters,
+    collapsedCategory: collapsedCategory,
+    dataTestId: modifiedDataTestId,
+    filteredValues: filteredValues,
+    handleToggleCollapsedCategory: handleToggleCollapsedCategory,
+    selectedFilter: selectedFilter,
+    shouldFadeIn: shouldFadeIn,
+    shouldShowEmptyState: shouldShowEmptyState,
+    userFilters: userFilters
+  });
+};
+ExpandedPanelContentCategoryContainer.propTypes = {
+  category: object,
+  categoryConfig: object,
+  dataTestId: string
+};
+export default ExpandedPanelContentCategoryContainer;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/layout.js CHANGED Viewed

@@ -1 +1,71 @@
-import React from"react";import{array,bool,func,object,objectOf,string}from"prop-types";import{Fade}from"@material-ui/core";import{ID_CONSTANTS}from"../../../../../../../../constants/testIds";import ExpandedPanelContentCategoryEmpty from"./components/ExpandedPanelContentCategoryEmpty";import ExpandedPanelContentCategoryHeader from"./components/ExpandedPanelContentCategoryHeader";import ExpandedPanelContentCategoryItem from"./components/ExpandedPanelContentCategoryItem";import{FADE_TIMEOUT}from"./constants";const{CLIENT_FILTER:CLIENT_FILTER,EXPANDED_PANEL_CONTENT_CATEGORY_ITEM:EXPANDED_PANEL_CONTENT_CATEGORY_ITEM,PERSISTENT_FILTER:PERSISTENT_FILTER,USER_FILTER:USER_FILTER}=ID_CONSTANTS,ExpandedPanelContentCategory=_ref=>{let{category:category,categoryConfig:categoryConfig,classes:classes,clientFilters:clientFilters,collapsedCategory:collapsedCategory,dataTestId:dataTestId,handleToggleCollapsedCategory:handleToggleCollapsedCategory,selectedFilter:selectedFilter,shouldFadeIn:shouldFadeIn,shouldShowEmptyState:shouldShowEmptyState,userFilters:userFilters}=_ref;return React.createElement("section",{className:classes.expandedPanelContentCategory},category.name&&React.createElement(ExpandedPanelContentCategoryHeader,{category:category,categoryConfig:categoryConfig,collapsedCategory:collapsedCategory,dataTestId:dataTestId,handleToggleCollapsedCategory:handleToggleCollapsedCategory}),React.createElement("article",{className:collapsedCategory?classes.expandedPanelContentUserFiltersCollapsed:classes.expandedPanelContentUserFiltersExpanded},clientFilters.map((filter,i)=>React.createElement(ExpandedPanelContentCategoryItem,{dataTestId:"".concat(dataTestId,".").concat(EXPANDED_PANEL_CONTENT_CATEGORY_ITEM,".").concat(CLIENT_FILTER,".").concat(i),filter:filter,key:filter.id})),shouldShowEmptyState?React.createElement(ExpandedPanelContentCategoryEmpty,{dataTestId:dataTestId}):userFilters.map((filter,i)=>React.createElement(ExpandedPanelContentCategoryItem,{dataTestId:"".concat(dataTestId,".").concat(EXPANDED_PANEL_CONTENT_CATEGORY_ITEM,".").concat(USER_FILTER,".").concat(i),filter:filter,key:filter.id}))),shouldFadeIn&&React.createElement(Fade,{in:shouldFadeIn,timeout:FADE_TIMEOUT},React.createElement("div",null,React.createElement(ExpandedPanelContentCategoryItem,{dataTestId:"".concat(dataTestId,".").concat(EXPANDED_PANEL_CONTENT_CATEGORY_ITEM,".").concat(USER_FILTER,".").concat(PERSISTENT_FILTER),filter:selectedFilter,key:selectedFilter.id}))))};ExpandedPanelContentCategory.propTypes={category:object,categoryConfig:object,classes:objectOf(string),clientFilters:array,collapsedCategory:bool,dataTestId:string,handleToggleCollapsedCategory:func,selectedFilter:object,shouldFadeIn:bool,shouldShowEmptyState:bool,userFilters:array};export default ExpandedPanelContentCategory;
+import React from 'react';
+import { array, bool, func, object, objectOf, string } from 'prop-types';
+import { Fade } from '@material-ui/core';
+import { ID_CONSTANTS } from '../../../../../../../../constants/testIds';
+import ExpandedPanelContentCategoryEmpty from './components/ExpandedPanelContentCategoryEmpty';
+import ExpandedPanelContentCategoryHeader from './components/ExpandedPanelContentCategoryHeader';
+import ExpandedPanelContentCategoryItem from './components/ExpandedPanelContentCategoryItem';
+import { FADE_TIMEOUT } from './constants';
+const {
+  CLIENT_FILTER,
+  EXPANDED_PANEL_CONTENT_CATEGORY_ITEM,
+  PERSISTENT_FILTER,
+  USER_FILTER
+} = ID_CONSTANTS;
+const ExpandedPanelContentCategory = _ref => {
+  let {
+    category,
+    categoryConfig,
+    classes,
+    clientFilters,
+    collapsedCategory,
+    dataTestId,
+    handleToggleCollapsedCategory,
+    selectedFilter,
+    shouldFadeIn,
+    shouldShowEmptyState,
+    userFilters
+  } = _ref;
+  return /*#__PURE__*/React.createElement("section", {
+    className: classes.expandedPanelContentCategory
+  }, category.name && /*#__PURE__*/React.createElement(ExpandedPanelContentCategoryHeader, {
+    category: category,
+    categoryConfig: categoryConfig,
+    collapsedCategory: collapsedCategory,
+    dataTestId: dataTestId,
+    handleToggleCollapsedCategory: handleToggleCollapsedCategory
+  }), /*#__PURE__*/React.createElement("article", {
+    className: collapsedCategory ? classes.expandedPanelContentUserFiltersCollapsed : classes.expandedPanelContentUserFiltersExpanded
+  }, clientFilters.map((filter, i) => /*#__PURE__*/React.createElement(ExpandedPanelContentCategoryItem, {
+    dataTestId: "".concat(dataTestId, ".").concat(EXPANDED_PANEL_CONTENT_CATEGORY_ITEM, ".").concat(CLIENT_FILTER, ".").concat(i),
+    filter: filter,
+    key: filter.id
+  })), shouldShowEmptyState ? /*#__PURE__*/React.createElement(ExpandedPanelContentCategoryEmpty, {
+    dataTestId: dataTestId
+  }) : userFilters.map((filter, i) => /*#__PURE__*/React.createElement(ExpandedPanelContentCategoryItem, {
+    dataTestId: "".concat(dataTestId, ".").concat(EXPANDED_PANEL_CONTENT_CATEGORY_ITEM, ".").concat(USER_FILTER, ".").concat(i),
+    filter: filter,
+    key: filter.id
+  }))), shouldFadeIn && /*#__PURE__*/React.createElement(Fade, {
+    in: shouldFadeIn,
+    timeout: FADE_TIMEOUT
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ExpandedPanelContentCategoryItem, {
+    dataTestId: "".concat(dataTestId, ".").concat(EXPANDED_PANEL_CONTENT_CATEGORY_ITEM, ".").concat(USER_FILTER, ".").concat(PERSISTENT_FILTER),
+    filter: selectedFilter,
+    key: selectedFilter.id
+  }))));
+};
+ExpandedPanelContentCategory.propTypes = {
+  category: object,
+  categoryConfig: object,
+  classes: objectOf(string),
+  clientFilters: array,
+  collapsedCategory: bool,
+  dataTestId: string,
+  handleToggleCollapsedCategory: func,
+  selectedFilter: object,
+  shouldFadeIn: bool,
+  shouldShowEmptyState: bool,
+  userFilters: array
+};
+export default ExpandedPanelContentCategory;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/utils.js CHANGED Viewed

@@ -1 +1,16 @@
-export const getSegregatedFilters=filters=>filters.reduce((segregatedFilters,currentFilter)=>(currentFilter.pinned?segregatedFilters.clientFilters.push(currentFilter):segregatedFilters.userFilters.push(currentFilter),segregatedFilters),{clientFilters:[],userFilters:[]});
+/**
+ * Segregates filters into client and user filters
+ * @param {Filters[]} filters Array of filters
+ * @returns {{clientFilters: Filters[], userFilters: Filters[]}} Object with clientFilters and userFilters
+ */
+export const getSegregatedFilters = filters => filters.reduce((segregatedFilters, currentFilter) => {
+  if (currentFilter.pinned) {
+    segregatedFilters.clientFilters.push(currentFilter);
+  } else {
+    segregatedFilters.userFilters.push(currentFilter);
+  }
+  return segregatedFilters;
+}, {
+  clientFilters: [],
+  userFilters: []
+});

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentHeader/constants.js CHANGED Viewed

@@ -1 +1,10 @@
-import{PANEL_POSITIONS}from"../../../../../../constants";export const CUSTOM_SEARCH_ACTION_CONFIG={Icon:"IconX",size:"small"};export const ICON_BY_POSITION={[PANEL_POSITIONS.LEFT]:"IconChevronsLeft",[PANEL_POSITIONS.RIGHT]:"IconChevronsRight"};export const TOOLTIP_PLACEMENT="top";
+import { PANEL_POSITIONS } from '../../../../../../constants';
+export const CUSTOM_SEARCH_ACTION_CONFIG = {
+  Icon: 'IconX',
+  size: 'small'
+};
+export const ICON_BY_POSITION = {
+  [PANEL_POSITIONS.LEFT]: 'IconChevronsLeft',
+  [PANEL_POSITIONS.RIGHT]: 'IconChevronsRight'
+};
+export const TOOLTIP_PLACEMENT = 'top';

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentHeader/index.js CHANGED Viewed

@@ -1 +1,73 @@
-import React,{useContext,useEffect,useRef,useState}from"react";import{string}from"prop-types";import UTShortcutPanelContext from"../../../../../../context";import{handleAnimationEnd}from"../../../../../../utils";import{ID_CONSTANTS,TEST_IDS}from"../../../../../../../../constants/testIds";import ExpandedPanelContentHeader from"./layout";import{CUSTOM_SEARCH_ACTION_CONFIG}from"./constants";const{filterGrouping:filterGrouping}=TEST_IDS,{CUSTOM_SEARCH_ACTION:CUSTOM_SEARCH_ACTION,EXPANDED_PANEL_CONTENT_HEADER:EXPANDED_PANEL_CONTENT_HEADER}=ID_CONSTANTS,ExpandedPanelContentHeaderContainer=_ref=>{let{dataTestId:dataTestId}=_ref;const{classes:classes,handleAddFilterGroup:handleAddFilterGroup,handleFilterGroupSearch:handleFilterGroupSearch,handleTogglePanel:handleTogglePanel,hideAddFilterButton:hideAddFilterButton,panelTitle:panelTitle,position:position,searchResetTrigger:searchResetTrigger,searchValue:searchValue,tooltipsContentMap:{collapseButton:collapseButton,searchButton:searchButton}}=useContext(UTShortcutPanelContext),[searchOpen,setSearchOpen]=useState(!1);useEffect(()=>{searchResetTrigger>0&&setSearchOpen(!1)},[searchResetTrigger]);const handleSearchToggle=()=>{handleFilterGroupSearch(""),setSearchOpen(!searchOpen)},customSearchAction={...CUSTOM_SEARCH_ACTION_CONFIG,onClick:()=>handleSearchToggle(),dataTestId:dataTestId?"".concat(dataTestId,".").concat(EXPANDED_PANEL_CONTENT_HEADER,".").concat(CUSTOM_SEARCH_ACTION):filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.customSearchAction},searchButtonTippyRef=useRef(null),collapseButtonTippyRef=useRef(null);return React.createElement(ExpandedPanelContentHeader,{animationEnd:()=>handleAnimationEnd(searchButtonTippyRef,collapseButtonTippyRef),classes:classes,collapseButtonTippyRef:collapseButtonTippyRef,collapseButtonTooltip:collapseButton,customSearchAction:customSearchAction,dataTestId:dataTestId?"".concat(dataTestId,".").concat(EXPANDED_PANEL_CONTENT_HEADER):void 0,handleAddFilterGroup:handleAddFilterGroup,handleFilterGroupSearch:handleFilterGroupSearch,handleSearchToggle:handleSearchToggle,handleTogglePanel:handleTogglePanel,hideAddFilterButton:hideAddFilterButton,panelTitle:panelTitle,position:position,searchButtonTippyRef:searchButtonTippyRef,searchButtonTooltip:searchButton,searchOpen:searchOpen,searchValue:searchValue})};ExpandedPanelContentHeaderContainer.propTypes={dataTestId:string};export default ExpandedPanelContentHeaderContainer;
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { string } from 'prop-types';
+import UTShortcutPanelContext from '../../../../../../context';
+import { handleAnimationEnd } from '../../../../../../utils';
+import { ID_CONSTANTS, TEST_IDS } from '../../../../../../../../constants/testIds';
+import ExpandedPanelContentHeader from './layout';
+import { CUSTOM_SEARCH_ACTION_CONFIG } from './constants';
+const {
+  filterGrouping
+} = TEST_IDS;
+const {
+  CUSTOM_SEARCH_ACTION,
+  EXPANDED_PANEL_CONTENT_HEADER
+} = ID_CONSTANTS;
+const ExpandedPanelContentHeaderContainer = _ref => {
+  let {
+    dataTestId
+  } = _ref;
+  const {
+    classes,
+    handleAddFilterGroup,
+    handleFilterGroupSearch,
+    handleTogglePanel,
+    hideAddFilterButton,
+    panelTitle,
+    position,
+    searchResetTrigger,
+    searchValue,
+    tooltipsContentMap: {
+      collapseButton,
+      searchButton
+    }
+  } = useContext(UTShortcutPanelContext);
+  const [searchOpen, setSearchOpen] = useState(false);
+  useEffect(() => {
+    if (searchResetTrigger > 0) setSearchOpen(false);
+  }, [searchResetTrigger]);
+  const handleSearchToggle = () => {
+    handleFilterGroupSearch('');
+    setSearchOpen(!searchOpen);
+  };
+  const customSearchAction = {
+    ...CUSTOM_SEARCH_ACTION_CONFIG,
+    onClick: () => handleSearchToggle(),
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(EXPANDED_PANEL_CONTENT_HEADER, ".").concat(CUSTOM_SEARCH_ACTION) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.customSearchAction
+  };
+  const searchButtonTippyRef = useRef(null);
+  const collapseButtonTippyRef = useRef(null);
+  const animationEnd = () => handleAnimationEnd(searchButtonTippyRef, collapseButtonTippyRef);
+  return /*#__PURE__*/React.createElement(ExpandedPanelContentHeader, {
+    animationEnd: animationEnd,
+    classes: classes,
+    collapseButtonTippyRef: collapseButtonTippyRef,
+    collapseButtonTooltip: collapseButton,
+    customSearchAction: customSearchAction,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(EXPANDED_PANEL_CONTENT_HEADER) : undefined,
+    handleAddFilterGroup: handleAddFilterGroup,
+    handleFilterGroupSearch: handleFilterGroupSearch,
+    handleSearchToggle: handleSearchToggle,
+    handleTogglePanel: handleTogglePanel,
+    hideAddFilterButton: hideAddFilterButton,
+    panelTitle: panelTitle,
+    position: position,
+    searchButtonTippyRef: searchButtonTippyRef,
+    searchButtonTooltip: searchButton,
+    searchOpen: searchOpen,
+    searchValue: searchValue
+  });
+};
+ExpandedPanelContentHeaderContainer.propTypes = {
+  dataTestId: string
+};
+export default ExpandedPanelContentHeaderContainer;