npm - @widergy/energy-ui - Versions diffs - 3.158.1 → 3.159.0 - Mend

@widergy/energy-ui 3.158.1 → 3.159.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 (1116) hide show

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { objectOf, string } from 'prop-types';
+import UTIcon from '../../../../../../../../../UTIcon';
+import UTLabel from '../../../../../../../../../UTLabel';
+import { ID_CONSTANTS } from '../../../../../../../../../../constants/testIds';
+const {
+  DESCRIPTION,
+  ICON,
+  TITLE
+} = ID_CONSTANTS;
+const ExpandedPanelContentCategoryEmpty = _ref => {
+  let {
+    classes,
+    dataTestId,
+    noFiltersText,
+    noFiltersTitle
+  } = _ref;
+  return /*#__PURE__*/React.createElement("section", {
+    className: classes.expandedPanelContentCategoryEmpty
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    colorTheme: "gray",
+    dataTestId: "".concat(dataTestId, ".").concat(ICON),
+    name: "IconBookmarks"
+  }), (noFiltersTitle || noFiltersText) && /*#__PURE__*/React.createElement("div", {
+    className: classes.expandedPanelContentCategoryEmptyText
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    align: "center",
+    dataTestId: "".concat(dataTestId, ".").concat(TITLE),
+    variant: "small"
+  }, noFiltersTitle), /*#__PURE__*/React.createElement(UTLabel, {
+    align: "center",
+    colorTheme: "gray",
+    dataTestId: "".concat(dataTestId, ".").concat(DESCRIPTION),
+    variant: "small"
+  }, noFiltersText)));
+};
+ExpandedPanelContentCategoryEmpty.propTypes = {
+  classes: objectOf(string),
+  dataTestId: string,
+  noFiltersText: string,
+  noFiltersTitle: string
+};
+export default ExpandedPanelContentCategoryEmpty;

	@@ -0,0 +1,2 @@
1	+ export const MOUSE_ENTER = 'enter';
2	+ export const MOUSE_LEAVE = 'leave';

@@ -0,0 +1,53 @@
+import React, { useContext, useState } from 'react';
+import { bool, func, object, string } from 'prop-types';
+import UTShortcutPanelContext from '../../../../../../../../context';
+import ExpandedPanelContentCategoryHeader from './layout';
+import { MOUSE_ENTER, MOUSE_LEAVE } from './constants';
+const ExpandedPanelContentCategoryHeaderContainer = _ref => {
+  let {
+    category,
+    categoryConfig,
+    collapsedCategory,
+    dataTestId,
+    handleToggleCollapsedCategory
+  } = _ref;
+  const {
+    classes,
+    disableCollapsibleCategories
+  } = useContext(UTShortcutPanelContext);
+  const {
+    name
+  } = category;
+  const {
+    avatarPalette,
+    icon
+  } = categoryConfig;
+  const [hoverMode, setHoverMode] = useState(false);
+  const handleHeaderHover = action => {
+    setHoverMode(action === MOUSE_ENTER);
+  };
+  const headerEvents = disableCollapsibleCategories ? {} : {
+    onMouseEnter: () => handleHeaderHover(MOUSE_ENTER),
+    onMouseLeave: () => handleHeaderHover(MOUSE_LEAVE)
+  };
+  return /*#__PURE__*/React.createElement(ExpandedPanelContentCategoryHeader, {
+    avatarPalette: avatarPalette,
+    classes: classes,
+    collapsedCategory: collapsedCategory,
+    dataTestId: dataTestId,
+    disableCollapsibleCategories: disableCollapsibleCategories,
+    handleToggleCollapsedCategory: handleToggleCollapsedCategory,
+    headerEvents: headerEvents,
+    hoverMode: hoverMode,
+    icon: icon,
+    title: name
+  });
+};
+ExpandedPanelContentCategoryHeaderContainer.propTypes = {
+  category: object,
+  categoryConfig: object,
+  collapsedCategory: bool,
+  dataTestId: string,
+  handleToggleCollapsedCategory: func
+};
+export default ExpandedPanelContentCategoryHeaderContainer;

@@ -0,0 +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,
+  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;

@@ -0,0 +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'
+  }
+};

@@ -0,0 +1,72 @@
+import isEqual from 'lodash/isEqual';
+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,
+    onDeleteFilterGrouping,
+    onEditFilterGrouping,
+    openPopper,
+    position,
+    selectedFilter,
+    tooltipsContentMap: {
+      editButton,
+      deleteButton
+    }
+  } = useContext(UTShortcutPanelContext);
+  const {
+    description,
+    name,
+    pinned,
+    category
+  } = filter;
+  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,
+    id: id,
+    name: name,
+    openItemDescription: handleOpenItemDescription,
+    pinned: pinned,
+    position: position,
+    selected: isEqual(selectedFilter, filter)
+  });
+};
+ExpandedPanelContentCategoryItemContainer.propTypes = {
+  dataTestId: string,
+  filter: object
+};
+export default ExpandedPanelContentCategoryItemContainer;

@@ -0,0 +1,121 @@
+import React from 'react';
+import { bool, func, object, 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,
+    id,
+    name,
+    openItemDescription,
+    pinned,
+    position,
+    selected
+  } = _ref;
+  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))), !pinned && (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,
+  id: string,
+  name: string,
+  openItemDescription: func,
+  pinned: bool,
+  position: string,
+  selected: bool
+};
+export default ExpandedPanelContentCategoryItem;

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

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

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

@@ -0,0 +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
+} = 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 ADDED Viewed

@@ -0,0 +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,
+  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 ADDED Viewed

@@ -0,0 +1,16 @@
+/**
+ * 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 ADDED Viewed

@@ -0,0 +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';

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

@@ -0,0 +1,69 @@
+import React, { useContext, 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,
+    searchValue,
+    tooltipsContentMap: {
+      collapseButton,
+      searchButton
+    }
+  } = useContext(UTShortcutPanelContext);
+  const [searchOpen, setSearchOpen] = useState(false);
+  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;