@widergy/energy-ui 3.121.2 → 3.122.0

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryItem/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TOOLTIP_PLACEMENT = exports.TOOLTIP_OFFSET = void 0;
+var _constants = require("../../../../../../../../constants");
+const TOOLTIP_PLACEMENT = exports.TOOLTIP_PLACEMENT = {
+  [_constants.PANEL_POSITIONS.LEFT]: 'right',
+  [_constants.PANEL_POSITIONS.RIGHT]: 'left'
+};
+const TOOLTIP_OFFSET = exports.TOOLTIP_OFFSET = {
+  editButton: {
+    [_constants.PANEL_POSITIONS.LEFT]: '0, 40',
+    [_constants.PANEL_POSITIONS.RIGHT]: '0, -268'
+  },
+  deleteButton: {
+    [_constants.PANEL_POSITIONS.LEFT]: '0, 0',
+    [_constants.PANEL_POSITIONS.RIGHT]: '0, -320'
+  }
+};

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryItem/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _context = _interopRequireDefault(require("../../../../../../../../context"));
+var _utils = require("../../../../../../../../utils");
+var _layout = _interopRequireDefault(require("./layout"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ExpandedPanelContentCategoryItemContainer = _ref => {
+  var _name$toLowerCase, _name$toLowerCase$spl, _name$toLowerCase$spl2;
+  let {
+    dataTestId,
+    filter
+  } = _ref;
+  const {
+    classes,
+    closePopper,
+    handleSelectFilter,
+    openPopper,
+    position,
+    selectedFilter,
+    tooltipsContentMap: {
+      editButton,
+      deleteButton
+    },
+    handleDeleteFilterGrouping,
+    handleEditFilterGrouping
+  } = (0, _react.useContext)(_context.default);
+  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 = (0, _react.useRef)(null);
+  const editButtonTippyRef = (0, _react.useRef)(null);
+  const handleOpenItemDescription = () => {
+    const anchor = document.getElementById(id);
+    openPopper({
+      anchor,
+      title: name,
+      description
+    });
+  };
+  const handleSelectFilters = () => {
+    handleSelectFilter(filter);
+  };
+  const animationEnd = () => (0, _utils.handleAnimationEnd)(editButtonTippyRef, deleteButtonTippyRef);
+  return /*#__PURE__*/_react.default.createElement(_layout.default, {
+    animationEnd: animationEnd,
+    classes: classes,
+    closeItemDescription: closePopper,
+    dataTestId: dataTestId,
+    deleteButton: deleteButton,
+    deleteButtonTippyRef: deleteButtonTippyRef,
+    editButton: editButton,
+    editButtonTippyRef: editButtonTippyRef,
+    handleDeleteFilterGrouping: () => handleDeleteFilterGrouping(filter),
+    handleEditFilterGrouping: () => handleEditFilterGrouping(filter),
+    handleSelectFilter: handleSelectFilters,
+    id: id,
+    name: name,
+    openItemDescription: handleOpenItemDescription,
+    pinned: pinned,
+    position: position,
+    selected: (0, _isEqual.default)(selectedFilter, filter)
+  });
+};
+ExpandedPanelContentCategoryItemContainer.propTypes = {
+  dataTestId: _propTypes.string,
+  filter: _propTypes.object
+};
+var _default = exports.default = ExpandedPanelContentCategoryItemContainer;

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryItem/layout.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../../../../../../../UTButton"));
+var _UTIcon = _interopRequireDefault(require("../../../../../../../../../UTIcon"));
+var _UTLabel = _interopRequireDefault(require("../../../../../../../../../UTLabel"));
+var _UTTooltip = _interopRequireDefault(require("../../../../../../../../../UTTooltip"));
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../../../../../../../../../UTTouchableWithoutFeedback"));
+var _testIds = require("../../../../../../../../../../constants/testIds");
+var _types = require("../../../../../../../../types");
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  DELETE_BUTTON,
+  DELETE_BUTTON_TOOLTIP,
+  EDIT_BUTTON,
+  EDIT_BUTTON_TOOLTIP
+} = _testIds.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.default.createElement("article", {
+    className: "".concat(classes.expandedPanelContentCategoryItem, " ").concat(selected ? classes.expandedPanelContentCategoryItemSelected : ''),
+    id: id
+  }, /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
+    className: "".concat(classes.expandedPanelContentCategoryItemTitleContainer, " ").concat(selected ? classes.expandedPanelContentCategoryItemTitleContainerSelected : ''),
+    dataTestId: "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.NAME_CONTAINER),
+    onClick: handleSelectFilter
+  }, pinned && /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    colorTheme: selected ? 'accent' : undefined,
+    dataTestId: "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.PINNED),
+    name: "IconPin",
+    shade: selected ? '05' : undefined,
+    size: "20"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.hoverableContainer,
+    "data-testid": "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.NAME),
+    onMouseEnter: openItemDescription,
+    onMouseLeave: closeItemDescription
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: classes.expandedPanelContentCategoryItemTitleLabel,
+    colorTheme: selected ? 'accent' : undefined,
+    shade: selected ? '05' : undefined
+  }, name))), !pinned && /*#__PURE__*/_react.default.createElement("section", {
+    className: classes.expandedPanelContentCategoryItemActionsContainer,
+    onAnimationEnd: animationEnd
+  }, /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    arrow: false,
+    content: editButton,
+    dataTestId: "".concat(dataTestId, ".").concat(EDIT_BUTTON_TOOLTIP),
+    tippyProps: {
+      appendTo: () => document.body,
+      offset: _constants.TOOLTIP_OFFSET.editButton[position],
+      onCreate: instance => {
+        editButtonTippyRef.current = instance;
+      },
+      placement: _constants.TOOLTIP_PLACEMENT[position]
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classes: {
+      root: classes.expandedPanelContentCategoryItemAction
+    },
+    colorTheme: "gray",
+    dataTestId: "".concat(dataTestId, ".").concat(EDIT_BUTTON),
+    Icon: "IconPencil",
+    onClick: handleEditFilterGrouping,
+    variant: "text"
+  }))), /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    arrow: false,
+    content: deleteButton,
+    dataTestId: "".concat(dataTestId, ".").concat(DELETE_BUTTON_TOOLTIP),
+    tippyProps: {
+      appendTo: () => document.body,
+      offset: _constants.TOOLTIP_OFFSET.deleteButton[position],
+      onCreate: instance => {
+        deleteButtonTippyRef.current = instance;
+      },
+      placement: _constants.TOOLTIP_PLACEMENT[position]
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classes: {
+      root: classes.expandedPanelContentCategoryItemAction
+    },
+    colorTheme: "gray",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(DELETE_BUTTON) : undefined,
+    Icon: "IconTrash",
+    onClick: handleDeleteFilterGrouping,
+    variant: "text"
+  })))));
+};
+ExpandedPanelContentCategoryItem.propTypes = {
+  animationEnd: _propTypes.func,
+  classes: _propTypes.object,
+  closeItemDescription: _propTypes.func,
+  dataTestId: _propTypes.string,
+  deleteButton: _propTypes.string,
+  deleteButtonTippyRef: _types.refType,
+  editButton: _propTypes.string,
+  editButtonTippyRef: _types.refType,
+  handleDeleteFilterGrouping: _propTypes.func,
+  handleEditFilterGrouping: _propTypes.func,
+  handleSelectFilter: _propTypes.func,
+  id: _propTypes.string,
+  name: _propTypes.string,
+  openItemDescription: _propTypes.func,
+  pinned: _propTypes.bool,
+  position: _propTypes.string,
+  selected: _propTypes.bool
+};
+var _default = exports.default = ExpandedPanelContentCategoryItem;

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FADE_TIMEOUT = void 0;
+const FADE_TIMEOUT = exports.FADE_TIMEOUT = 600;

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _testIds = require("lib/constants/testIds");
+var _context = _interopRequireDefault(require("../../../../../../context"));
+var _layout = _interopRequireDefault(require("./layout"));
+var _utils = require("./utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  filterGrouping
+} = _testIds.TEST_IDS;
+const ExpandedPanelContentCategoryContainer = _ref => {
+  let {
+    category,
+    categoryConfig,
+    dataTestId
+  } = _ref;
+  const {
+    classes,
+    filteredValues,
+    selectedFilter
+  } = (0, _react.useContext)(_context.default);
+  const [collapsedCategory, setCollapsedCategory] = (0, _react.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
+  } = (0, _utils.getSegregatedFilters)(category.filters);
+  const shouldFadeIn = !filteredValues && !(0, _isEmpty.default)(selectedFilter) && collapsedCategory && selectedFilterIsInCategory;
+  const shouldShowEmptyState = filteredValues && (0, _isEmpty.default)(userFilters) ? null : (0, _isEmpty.default)(userFilters);
+  return /*#__PURE__*/_react.default.createElement(_layout.default, {
+    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: _propTypes.object,
+  categoryConfig: _propTypes.object,
+  dataTestId: _propTypes.string
+};
+var _default = exports.default = ExpandedPanelContentCategoryContainer;

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/layout.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _core = require("@material-ui/core");
+var _testIds = require("../../../../../../../../constants/testIds");
+var _ExpandedPanelContentCategoryEmpty = _interopRequireDefault(require("./components/ExpandedPanelContentCategoryEmpty"));
+var _ExpandedPanelContentCategoryHeader = _interopRequireDefault(require("./components/ExpandedPanelContentCategoryHeader"));
+var _ExpandedPanelContentCategoryItem = _interopRequireDefault(require("./components/ExpandedPanelContentCategoryItem"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  CLIENT_FILTER,
+  EXPANDED_PANEL_CONTENT_CATEGORY_ITEM,
+  PERSISTENT_FILTER,
+  USER_FILTER
+} = _testIds.ID_CONSTANTS;
+const ExpandedPanelContentCategory = _ref => {
+  let {
+    category,
+    categoryConfig,
+    classes,
+    clientFilters,
+    collapsedCategory,
+    dataTestId,
+    handleToggleCollapsedCategory,
+    selectedFilter,
+    shouldFadeIn,
+    shouldShowEmptyState,
+    userFilters
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("section", {
+    className: classes.expandedPanelContentCategory
+  }, /*#__PURE__*/_react.default.createElement(_ExpandedPanelContentCategoryHeader.default, {
+    category: category,
+    categoryConfig: categoryConfig,
+    collapsedCategory: collapsedCategory,
+    dataTestId: dataTestId,
+    handleToggleCollapsedCategory: handleToggleCollapsedCategory
+  }), /*#__PURE__*/_react.default.createElement("article", {
+    className: collapsedCategory ? classes.expandedPanelContentUserFiltersCollapsed : classes.expandedPanelContentUserFiltersExpanded
+  }, clientFilters.map((filter, i) => /*#__PURE__*/_react.default.createElement(_ExpandedPanelContentCategoryItem.default, {
+    dataTestId: "".concat(dataTestId, ".").concat(EXPANDED_PANEL_CONTENT_CATEGORY_ITEM, ".").concat(CLIENT_FILTER, ".").concat(i),
+    filter: filter,
+    key: filter.id
+  })), shouldShowEmptyState ? /*#__PURE__*/_react.default.createElement(_ExpandedPanelContentCategoryEmpty.default, {
+    dataTestId: dataTestId
+  }) : userFilters.map((filter, i) => /*#__PURE__*/_react.default.createElement(_ExpandedPanelContentCategoryItem.default, {
+    dataTestId: "".concat(dataTestId, ".").concat(EXPANDED_PANEL_CONTENT_CATEGORY_ITEM, ".").concat(USER_FILTER, ".").concat(i),
+    filter: filter,
+    key: filter.id
+  }))), shouldFadeIn && /*#__PURE__*/_react.default.createElement(_core.Fade, {
+    in: shouldFadeIn,
+    timeout: _constants.FADE_TIMEOUT
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ExpandedPanelContentCategoryItem.default, {
+    dataTestId: "".concat(dataTestId, ".").concat(EXPANDED_PANEL_CONTENT_CATEGORY_ITEM, ".").concat(USER_FILTER, ".").concat(PERSISTENT_FILTER),
+    filter: selectedFilter,
+    key: selectedFilter.id
+  }))));
+};
+ExpandedPanelContentCategory.propTypes = {
+  category: _propTypes.object,
+  categoryConfig: _propTypes.object,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  clientFilters: _propTypes.array,
+  collapsedCategory: _propTypes.bool,
+  dataTestId: _propTypes.string,
+  handleToggleCollapsedCategory: _propTypes.func,
+  selectedFilter: _propTypes.object,
+  shouldFadeIn: _propTypes.bool,
+  shouldShowEmptyState: _propTypes.bool,
+  userFilters: _propTypes.array
+};
+var _default = exports.default = ExpandedPanelContentCategory;

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSegregatedFilters = void 0;
+/**
+ * Segregates filters into client and user filters
+ * @param {Filters[]} filters Array of filters
+ * @returns {{clientFilters: Filters[], userFilters: Filters[]}} Object with clientFilters and userFilters
+ */
+const getSegregatedFilters = filters => filters.reduce((segregatedFilters, currentFilter) => {
+  if (currentFilter.pinned) {
+    segregatedFilters.clientFilters.push(currentFilter);
+  } else {
+    segregatedFilters.userFilters.push(currentFilter);
+  }
+  return segregatedFilters;
+}, {
+  clientFilters: [],
+  userFilters: []
+});
+exports.getSegregatedFilters = getSegregatedFilters;

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentHeader/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TOOLTIP_PLACEMENT = exports.ICON_BY_POSITION = exports.CUSTOM_SEARCH_ACTION_CONFIG = void 0;
+var _constants = require("../../../../../../constants");
+const CUSTOM_SEARCH_ACTION_CONFIG = exports.CUSTOM_SEARCH_ACTION_CONFIG = {
+  Icon: 'IconX',
+  size: 'small'
+};
+const ICON_BY_POSITION = exports.ICON_BY_POSITION = {
+  [_constants.PANEL_POSITIONS.LEFT]: 'IconChevronsLeft',
+  [_constants.PANEL_POSITIONS.RIGHT]: 'IconChevronsRight'
+};
+const TOOLTIP_PLACEMENT = exports.TOOLTIP_PLACEMENT = 'top';

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentHeader/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _context = _interopRequireDefault(require("../../../../../../context"));
+var _utils = require("../../../../../../utils");
+var _testIds = require("../../../../../../../../constants/testIds");
+var _layout = _interopRequireDefault(require("./layout"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const {
+  filterGrouping
+} = _testIds.TEST_IDS;
+const {
+  CUSTOM_SEARCH_ACTION,
+  EXPANDED_PANEL_CONTENT_HEADER
+} = _testIds.ID_CONSTANTS;
+const ExpandedPanelContentHeaderContainer = _ref => {
+  let {
+    dataTestId
+  } = _ref;
+  const {
+    classes,
+    handleAddFilterGroup,
+    handleFilterGroupSearch,
+    handleTogglePanel,
+    panelTitle,
+    position,
+    searchValue,
+    tooltipsContentMap: {
+      collapseButton,
+      searchButton
+    }
+  } = (0, _react.useContext)(_context.default);
+  const [searchOpen, setSearchOpen] = (0, _react.useState)(false);
+  const handleSearchToggle = () => {
+    handleFilterGroupSearch('');
+    setSearchOpen(!searchOpen);
+  };
+  const customSearchAction = {
+    ..._constants.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 = (0, _react.useRef)(null);
+  const collapseButtonTippyRef = (0, _react.useRef)(null);
+  const animationEnd = () => (0, _utils.handleAnimationEnd)(searchButtonTippyRef, collapseButtonTippyRef);
+  return /*#__PURE__*/_react.default.createElement(_layout.default, {
+    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,
+    panelTitle: panelTitle,
+    position: position,
+    searchButtonTippyRef: searchButtonTippyRef,
+    searchButtonTooltip: searchButton,
+    searchOpen: searchOpen,
+    searchValue: searchValue
+  });
+};
+ExpandedPanelContentHeaderContainer.propTypes = {
+  dataTestId: _propTypes.string
+};
+var _default = exports.default = ExpandedPanelContentHeaderContainer;

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentHeader/layout.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../../../../../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../../../../../../../UTLabel"));
+var _UTSearchField = _interopRequireDefault(require("../../../../../../../UTSearchField"));
+var _UTTooltip = _interopRequireDefault(require("../../../../../../../UTTooltip"));
+var _types = require("../../../../../../types");
+var _testIds = require("../../../../../../../../constants/testIds");
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const {
+  filterGrouping
+} = _testIds.TEST_IDS;
+const {
+  ADD_FILTER_BUTTON,
+  COLLAPSE_BUTTON,
+  COLLAPSE_BUTTON_TOOLTIP,
+  SEARCH_BUTTON,
+  SEARCH_BUTTON_TOOLTIP,
+  SEARCH_FIELD,
+  TITLE
+} = _testIds.ID_CONSTANTS;
+const ExpandedPanelContentHeader = _ref => {
+  let {
+    animationEnd,
+    classes,
+    collapseButtonTippyRef,
+    collapseButtonTooltip,
+    customSearchAction,
+    dataTestId,
+    handleAddFilterGroup,
+    handleFilterGroupSearch,
+    handleSearchToggle,
+    handleTogglePanel,
+    panelTitle,
+    position,
+    searchButtonTippyRef,
+    searchButtonTooltip,
+    searchOpen,
+    searchValue
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("header", {
+    className: "".concat(classes.expandedPanelContentHeader, " ").concat(searchOpen ? classes.expandedPanelContentHeaderSearchOpen : '')
+  }, searchOpen ? /*#__PURE__*/_react.default.createElement(_UTSearchField.default, {
+    customAction: customSearchAction,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(SEARCH_FIELD) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchField,
+    onChange: handleFilterGroupSearch,
+    value: searchValue,
+    variant: "white"
+  }) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    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.default.createElement("section", {
+    className: classes.expandedPanelContentActions
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.expandedPanelContentActionsContainer,
+    onAnimationEnd: animationEnd
+  }, /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    arrow: false,
+    content: searchButtonTooltip,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(SEARCH_BUTTON_TOOLTIP) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchButtonTooltip,
+    tippyProps: {
+      onCreate: instance => {
+        searchButtonTippyRef.current = instance;
+      },
+      placement: _constants.TOOLTIP_PLACEMENT
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classes: {
+      root: classes.expandedPanelContentAction
+    },
+    colorTheme: "gray",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(SEARCH_BUTTON) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchButton,
+    Icon: "IconSearch",
+    onClick: handleSearchToggle,
+    variant: "text"
+  }))), /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    arrow: false,
+    content: collapseButtonTooltip,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(COLLAPSE_BUTTON_TOOLTIP) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.collapseButtonTooltip,
+    tippyProps: {
+      onCreate: instance => {
+        collapseButtonTippyRef.current = instance;
+      },
+      placement: _constants.TOOLTIP_PLACEMENT
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classes: {
+      root: classes.expandedPanelContentAction
+    },
+    colorTheme: "gray",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(COLLAPSE_BUTTON) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.collapseButton,
+    Icon: _constants.ICON_BY_POSITION[position],
+    onClick: handleTogglePanel,
+    variant: "text"
+  })))), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classes: {
+      root: classes.expandedPanelContentAction
+    },
+    colorTheme: "dark",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ADD_FILTER_BUTTON) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.addFilterButton,
+    Icon: "IconPlus",
+    onClick: handleAddFilterGroup,
+    variant: "text"
+  }))));
+};
+ExpandedPanelContentHeader.propTypes = {
+  animationEnd: _propTypes.func,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  collapseButtonTippyRef: _types.refType,
+  collapseButtonTooltip: _propTypes.string,
+  customSearchAction: _types.customSearchActionType,
+  dataTestId: _propTypes.string,
+  handleAddFilterGroup: _propTypes.func,
+  handleFilterGroupSearch: _propTypes.func,
+  handleSearchToggle: _propTypes.func,
+  handleTogglePanel: _propTypes.func,
+  panelTitle: _propTypes.string,
+  position: _propTypes.string,
+  searchButtonTippyRef: _types.refType,
+  searchButtonTooltip: _propTypes.string,
+  searchOpen: _propTypes.bool,
+  searchValue: _propTypes.string
+};
+var _default = exports.default = ExpandedPanelContentHeader;

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentPopper/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.POPPER_PLACEMENT = void 0;
+var _constants = require("../../../../../../constants");
+const POPPER_PLACEMENT = exports.POPPER_PLACEMENT = {
+  [_constants.PANEL_POSITIONS.LEFT]: 'right',
+  [_constants.PANEL_POSITIONS.RIGHT]: 'left'
+};