@bigbinary/neeto-filters-frontend 3.0.5 → 3.0.6

package/dist/index.js

@@ -1,18 +1,19 @@
 import React, { useState, useRef, useEffect, useTransition, useMemo } from 'react';
 import classnames from 'classnames';
-import { capitalize, removeBy, findBy, isNotEmpty, humanize, noop as noop$1, toLabelAndValue, replaceBy, isPresent, existsBy, filterBy } from '@bigbinary/neeto-cist';
+import i18next, { t as t$1 } from 'i18next';
+import { capitalize, removeBy, findBy, isNotEmpty, humanize, noop as noop$1, toLabelAndValue, replaceBy, isPresent, existsBy, isNotPresent, filterBy } from '@bigbinary/neeto-cist';
 import { useHotKeys, useMutationWithInvalidation, useQueryParams, useDebounce, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { getQueryParams, dateFormat, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import { Tooltip, Typography, Dropdown as Dropdown$2, Button, Pane as Pane$1, Alert, Select, DatePicker, TimePicker, Input as Input$1, Accordion, Spinner } from '@bigbinary/neetoui';
 import { groupBy, anyPass, isNil, isEmpty, any, toLower, mergeLeft, identity, omit, mergeRight, toPairs, not, pluck, either, has, concat, equals, pick, modify, prop, isNotNil, append, last } from 'ramda';
 import { useTranslation, Trans } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
-import { Close, Search, MenuHorizontal, Down, Settings } from '@bigbinary/neeto-icons';
-import i18next, { t as t$1 } from 'i18next';
-import * as yup from 'yup';
+import { Close, MenuHorizontal, Down, Search as Search$1, Settings } from '@bigbinary/neeto-icons';
 import { Form, Input, ActionBlock } from '@bigbinary/neetoui/formik';
 import { useQuery } from 'react-query';
 import axios from 'axios';
+import * as yup from 'yup';
+import Search from '@bigbinary/neeto-molecules/Search';
 import ReactDOM, { createPortal } from 'react-dom';
 import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
 import { FormikInlineInput } from '@bigbinary/neeto-molecules/InlineInput';
@@ -104,9 +105,6 @@ var SHORTCUTS = {
   }
 };
 
-var SEGMENT_VALIDATION_SCHEMA = yup.object({
-  name: yup.string().trim().required()
-});
 var SEGMENTS_BASE_URL = "/neeto_filters/segments";
 var DATE_OPTIONS = [{
   label: "Today",
@@ -750,7 +748,8 @@ var compareFilters = function compareFilters(oldFilters, newFilters) {
   return equals(formatFilters(oldFilters), formatFilters(newFilters));
 };
 var buildFilteredColumns = function buildFilteredColumns(_ref11) {
-  var searchTerm = _ref11.searchTerm,
+  var _ref11$searchTerm = _ref11.searchTerm,
+    searchTerm = _ref11$searchTerm === void 0 ? "" : _ref11$searchTerm,
     columns = _ref11.columns;
   var groupedColumsObject = groupByGroup(columns.filter(function (_ref12) {
     var label = _ref12.label,
@@ -1189,6 +1188,18 @@ var useDestroySegment = function useDestroySegment(options) {
   }, options));
 };
 
+var buildSegmentsValidationSchema = function buildSegmentsValidationSchema(defaultSegmentName) {
+  return yup.object({
+    name: yup.string().trim().required().test({
+      name: "not-default-segment-name",
+      test: function test(value) {
+        return (value === null || value === void 0 ? void 0 : value.toLocaleLowerCase()) !== defaultSegmentName.toLocaleLowerCase();
+      },
+      message: t$1("neetoFilters.segments.reservedNameErrorMessage")
+    })
+  });
+};
+
 var Menu = Dropdown$2.Menu,
   MenuItem = Dropdown$2.MenuItem;
 var Segment = function Segment(_ref) {
@@ -1196,7 +1207,8 @@ var Segment = function Segment(_ref) {
     filters = _ref.filters,
     columns = _ref.columns,
     childrenKeys = _ref.childrenKeys,
-    setIsFilterPaneOpen = _ref.setIsFilterPaneOpen;
+    setIsFilterPaneOpen = _ref.setIsFilterPaneOpen,
+    defaultSegmentName = _ref.defaultSegmentName;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSavePaneOpen = _useState2[0],
@@ -1299,7 +1311,7 @@ var Segment = function Segment(_ref) {
       },
       validateOnChange: true,
       validateOnBlur: true,
-      validationSchema: SEGMENT_VALIDATION_SCHEMA,
+      validationSchema: buildSegmentsValidationSchema(defaultSegmentName),
       onSubmit: handleSubmit
     }
   }, /*#__PURE__*/React.createElement(Pane$1.Body, null, /*#__PURE__*/React.createElement(Input, {
@@ -1350,118 +1362,123 @@ var Bar = function Bar(_ref) {
     _ref$setIsPaneOpen = _ref.setIsPaneOpen,
     setIsPaneOpen = _ref$setIsPaneOpen === void 0 ? identity : _ref$setIsPaneOpen,
     _ref$childrenKeys = _ref.childrenKeys,
-    childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var initialRenderRef = useRef(true);
-  var searchParams = useQueryParams();
-  var keywordValue = searchParams.search_term || "";
-  var keywordFilter = _objectSpread$2(_objectSpread$2({
-    type: "text",
-    rule: "contains",
-    label: t("neetoFilters.common.searchTerm")
-  }, keyword), {}, {
-    key: "search_term",
-    value: keywordValue
-  });
-  var filters = buildFiltersFromSearchParams(isKeywordFilterPresent(keywordFilter) && isNotEmpty(keywordValue) ? [keywordFilter].concat(_toConsumableArray(columns)) : columns);
-  var nonHiddenFilters = removeBy({
-    hidden: true
-  }, filters);
-  var history = useHistory();
-  var handleSubmit = function handleSubmit(newFilters, isClearAll) {
-    var params = buildUrlFromFilters(_objectSpread$2({
-      columns: columns,
-      filters: isKeywordFilterPresent(keywordFilter) && isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
-    }, isClearAll && {
-      isClearAll: true,
-      childrenKeys: childrenKeys
-    }));
-    history.push({
-      search: params
+    childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys,
+    _ref$defaultSegmentNa = _ref.defaultSegmentName,
+    defaultSegmentName = _ref$defaultSegmentNa === void 0 ? t$1("neetoFilters.common.allResults") : _ref$defaultSegmentNa;
+  return function () {
+    var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+    var initialRenderRef = useRef(true);
+    var searchParams = useQueryParams();
+    var keywordValue = searchParams.search_term || "";
+    var keywordFilter = _objectSpread$2(_objectSpread$2({
+      type: "text",
+      rule: "contains",
+      label: t("neetoFilters.common.searchTerm")
+    }, keyword), {}, {
+      key: "search_term",
+      value: keywordValue
     });
-  };
-  var handleDelete = function handleDelete(key) {
-    if (key === "search_term") {
-      var params = omit(["search_term"], getQueryParams());
+    var filters = buildFiltersFromSearchParams(isKeywordFilterPresent(keywordFilter) && isNotEmpty(keywordValue) ? [keywordFilter].concat(_toConsumableArray(columns)) : columns);
+    var nonHiddenFilters = removeBy({
+      hidden: true
+    }, filters);
+    var history = useHistory();
+    var handleSubmit = function handleSubmit(newFilters, isClearAll) {
+      var params = buildUrlFromFilters(_objectSpread$2({
+        columns: columns,
+        filters: isKeywordFilterPresent(keywordFilter) && isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
+      }, isClearAll && {
+        isClearAll: true,
+        childrenKeys: childrenKeys
+      }));
+      history.push({
+        search: params
+      });
+    };
+    var handleDelete = function handleDelete(key) {
+      if (key === "search_term") {
+        var params = omit(["search_term"], getQueryParams());
+        var pathname = window.location.pathname;
+        history.push(buildUrl(pathname, params));
+        return;
+      }
+      if (childrenKeys.includes(key)) {
+        var _params = omit([key], getQueryParams());
+        var _pathname = window.location.pathname;
+        history.push(buildUrl(_pathname, _params));
+      }
+      var newFilters = removeBy({
+        key: key
+      }, filters);
+      handleSubmit(newFilters);
+    };
+    var handleClearAll = function handleClearAll() {
+      var params = isKeywordFilterPresent(keywordFilter) ? omit(["search_term"], getQueryParams()) : getQueryParams();
       var pathname = window.location.pathname;
       history.push(buildUrl(pathname, params));
-      return;
-    }
-    if (childrenKeys.includes(key)) {
-      var _params = omit([key], getQueryParams());
-      var _pathname = window.location.pathname;
-      history.push(buildUrl(_pathname, _params));
-    }
-    var newFilters = removeBy({
-      key: key
-    }, filters);
-    handleSubmit(newFilters);
-  };
-  var handleClearAll = function handleClearAll() {
-    var params = isKeywordFilterPresent(keywordFilter) ? omit(["search_term"], getQueryParams()) : getQueryParams();
-    var pathname = window.location.pathname;
-    history.push(buildUrl(pathname, params));
-    handleSubmit([], true);
-  };
-  var childrenFiltersApplied = childrenKeys.some(function (key) {
-    return has(key, searchParams);
-  });
-  var hideClearButton = nonHiddenFilters.every(function (_ref2) {
-    var defaultValue = _ref2.defaultValue,
-      isClearable = _ref2.isClearable;
-    return defaultValue && !isClearable;
-  }) && !childrenFiltersApplied;
-  useEffect(function () {
-    if (initialRenderRef.current) {
-      initialRenderRef.current = false;
-      return noop$1;
-    }
-    var handler = setTimeout(function () {
-      handleSubmit(filters);
-    }, 500);
-    return function () {
-      return clearTimeout(handler);
+      handleSubmit([], true);
     };
-  }, [keywordValue]);
-  if (isEmpty(nonHiddenFilters) && !childrenFiltersApplied) return null;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classnames("neeto-filters-bar", _defineProperty({}, className, className))
-  }, nonHiddenFilters.map(function (filter) {
-    var _filter$suffixCompone;
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: filter.key
-    }, /*#__PURE__*/React.createElement(Block, {
-      filter: filter,
-      handleDelete: handleDelete,
-      setIsPaneOpen: setIsPaneOpen
-    }), (_filter$suffixCompone = filter.suffixComponent) === null || _filter$suffixCompone === void 0 ? void 0 : _filter$suffixCompone.call(filter), /*#__PURE__*/React.createElement("div", {
-      className: "neeto-filters-bar--separator"
-    }));
-  }), childrenKeys.filter(function (childKey) {
-    return has(childKey, searchParams);
-  }).map(function (childKey) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: childKey
-    }, /*#__PURE__*/React.createElement(ChildBlock, {
-      childKey: childKey,
-      handleDelete: handleDelete,
-      setIsPaneOpen: setIsPaneOpen
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "neeto-filters-bar--separator"
+    var childrenFiltersApplied = childrenKeys.some(function (key) {
+      return has(key, searchParams);
+    });
+    var hideClearButton = nonHiddenFilters.every(function (_ref2) {
+      var defaultValue = _ref2.defaultValue,
+        isClearable = _ref2.isClearable;
+      return defaultValue && !isClearable;
+    }) && !childrenFiltersApplied;
+    useEffect(function () {
+      if (initialRenderRef.current) {
+        initialRenderRef.current = false;
+        return noop$1;
+      }
+      var handler = setTimeout(function () {
+        handleSubmit(filters);
+      }, 500);
+      return function () {
+        return clearTimeout(handler);
+      };
+    }, [keywordValue]);
+    if (isEmpty(nonHiddenFilters) && !childrenFiltersApplied) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames("neeto-filters-bar", _defineProperty({}, className, className))
+    }, nonHiddenFilters.map(function (filter) {
+      var _filter$suffixCompone;
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: filter.key
+      }, /*#__PURE__*/React.createElement(Block, {
+        filter: filter,
+        handleDelete: handleDelete,
+        setIsPaneOpen: setIsPaneOpen
+      }), (_filter$suffixCompone = filter.suffixComponent) === null || _filter$suffixCompone === void 0 ? void 0 : _filter$suffixCompone.call(filter), /*#__PURE__*/React.createElement("div", {
+        className: "neeto-filters-bar--separator"
+      }));
+    }), childrenKeys.filter(function (childKey) {
+      return has(childKey, searchParams);
+    }).map(function (childKey) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: childKey
+      }, /*#__PURE__*/React.createElement(ChildBlock, {
+        childKey: childKey,
+        handleDelete: handleDelete,
+        setIsPaneOpen: setIsPaneOpen
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "neeto-filters-bar--separator"
+      }));
+    }), isNotNil(entity) && /*#__PURE__*/React.createElement(Segment, {
+      childrenKeys: childrenKeys,
+      columns: columns,
+      defaultSegmentName: defaultSegmentName,
+      entity: entity,
+      filters: filters,
+      setIsFilterPaneOpen: setIsPaneOpen
+    }), !hideClearButton && /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "neeto-filters-bar-clear-btn",
+      label: t("neetoFilters.common.clearFilters"),
+      style: "text",
+      onClick: handleClearAll
     }));
-  }), isNotNil(entity) && /*#__PURE__*/React.createElement(Segment, {
-    childrenKeys: childrenKeys,
-    columns: columns,
-    entity: entity,
-    filters: filters,
-    setIsFilterPaneOpen: setIsPaneOpen
-  }), !hideClearButton && /*#__PURE__*/React.createElement(Button, {
-    "data-cy": "neeto-filters-bar-clear-btn",
-    label: t("neetoFilters.common.clearFilters"),
-    style: "text",
-    onClick: handleClearAll
-  }));
+  }();
 };
 
 function _extends() {
@@ -3241,16 +3258,13 @@ var Pane = function Pane(_ref) {
     weight: "semibold"
   }, t("neetoFilters.common.filters"))), /*#__PURE__*/React.createElement(Slider.Body, {
     className: "neeto-filters-pane-filter__body neeto-ui-pt-2"
-  }, isSearchable && /*#__PURE__*/React.createElement(Input$1, {
-    autoFocus: true,
+  }, isSearchable && /*#__PURE__*/React.createElement(Search, {
     "data-cy": "neeto-filters-column-search",
-    prefix: /*#__PURE__*/React.createElement(Search, null),
-    value: searchTerm,
     placeholder: t("neetoFilters.messages.searchResources", {
       resources: t("neetoFilters.common.filters").toLocaleLowerCase()
     }),
-    onChange: function onChange(event) {
-      return setSearchTerm(event.target.value);
+    onSearch: function onSearch(value) {
+      return setSearchTerm(value);
     }
   }), ungroupedColumns.map(function (column) {
     return /*#__PURE__*/React.createElement(Item, {
@@ -3410,7 +3424,8 @@ var DeleteAlert = function DeleteAlert(_ref) {
 
 var Card = function Card(_ref) {
   var segment = _ref.segment,
-    columns = _ref.columns;
+    columns = _ref.columns,
+    defaultSegmentName = _ref.defaultSegmentName;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isEditing = _useState2[0],
@@ -3444,7 +3459,7 @@ var Card = function Card(_ref) {
       initialValues: segment,
       validateOnChange: true,
       validateOnBlur: true,
-      validationSchema: SEGMENT_VALIDATION_SCHEMA,
+      validationSchema: buildSegmentsValidationSchema(defaultSegmentName),
       onSubmit: handleRename,
       enableReinitialize: true
     }
@@ -3462,6 +3477,7 @@ var Card = function Card(_ref) {
       style: "body2"
     }, segment.name), /*#__PURE__*/React.createElement(Dropdown$2, {
       buttonStyle: "text",
+      disabled: isNotPresent(segment.id),
       icon: MenuHorizontal,
       size: "small"
     }, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
@@ -3489,7 +3505,8 @@ var ManagePane = function ManagePane(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     entity = _ref.entity,
-    columns = _ref.columns;
+    columns = _ref.columns,
+    defaultSegmentName = _ref.defaultSegmentName;
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     searchTerm = _useState2[0],
@@ -3513,25 +3530,26 @@ var ManagePane = function ManagePane(_ref) {
     style: "h2"
   }, t("neetoFilters.segments.manageSegments"))), /*#__PURE__*/React.createElement(Pane$1.Body, {
     className: "max-h-full gap-4 overflow-scroll"
-  }, /*#__PURE__*/React.createElement(Input$1, {
+  }, /*#__PURE__*/React.createElement(Search, {
     className: "w-full flex-grow-0",
     placeholder: t("neetoFilters.segments.searchSegments"),
-    prefix: /*#__PURE__*/React.createElement(Search, null),
     ref: inputRef,
-    type: "search",
-    value: searchTerm,
-    onChange: function onChange(_ref2) {
-      var value = _ref2.target.value;
+    onSearch: function onSearch(value) {
       return setSearchTerm(value);
     }
   }), isLoading ? /*#__PURE__*/React.createElement(Spinner, {
     className: "mx-auto mt-4"
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, isEmpty(segments) ? /*#__PURE__*/React.createElement(Typography, {
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card$1, {
+    segment: {
+      name: defaultSegmentName
+    }
+  }), isEmpty(segments) ? /*#__PURE__*/React.createElement(Typography, {
     className: "mx-auto",
     style: "body2"
   }, t("neetoFilters.segments.noSegmentsFound")) : segments.map(function (segment) {
     return /*#__PURE__*/React.createElement(Card$1, {
       columns: columns,
+      defaultSegmentName: defaultSegmentName,
       segment: segment,
       key: segment.id
     });
@@ -3543,7 +3561,8 @@ var ITEMS_MAX_COUNT = 20;
 var MenuBlocks = function MenuBlocks(_ref) {
   var entity = _ref.entity,
     searchTerm = _ref.searchTerm,
-    columns = _ref.columns;
+    columns = _ref.columns,
+    defaultSegmentName = _ref.defaultSegmentName;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showAll = _useState2[0],
@@ -3554,6 +3573,7 @@ var MenuBlocks = function MenuBlocks(_ref) {
     t = _useTranslation.t;
   var _Object$fromEntries = Object.fromEntries(new URLSearchParams(location.search)),
     segmentId = _Object$fromEntries.segmentId;
+  var appliedFilters = buildFiltersFromURL(columns);
   var _useFetchSegments = useFetchSegments({
       entity: entity,
       searchTerm: searchTerm
@@ -3561,27 +3581,40 @@ var MenuBlocks = function MenuBlocks(_ref) {
     _useFetchSegments$dat = _useFetchSegments.data,
     segments = _useFetchSegments$dat === void 0 ? [] : _useFetchSegments$dat,
     isLoading = _useFetchSegments.isLoading;
-  var handleSelectSegment = function handleSelectSegment(_ref2) {
+  var clearAppliedFilters = function clearAppliedFilters() {
     var _filters$, _filters$2;
-    var id = _ref2.id,
-      filters = _ref2.filters;
-    return equals(id, segmentId) ? history.push({
+    var filters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : appliedFilters;
+    history.push({
       search: buildUrlFromFilters({
         columns: columns,
         filters: [],
         isClearAll: true,
-        childrenKeys: pluck("key", filterBy({
+        childrenKeys: ((_filters$ = filters[0]) === null || _filters$ === void 0 ? void 0 : _filters$.conditions) && pluck("key", filterBy({
           node: "children"
-        }, (_filters$ = filters[0]) === null || _filters$ === void 0 ? void 0 : _filters$.conditions))
+        }, (_filters$2 = filters[0]) === null || _filters$2 === void 0 ? void 0 : _filters$2.conditions))
       })
-    }) : history.push({
+    });
+  };
+  var applySelectedSegment = function applySelectedSegment(_ref2) {
+    var _filters$3;
+    var id = _ref2.id,
+      filters = _ref2.filters;
+    history.push({
       search: buildUrlFromSegment({
         columns: columns,
-        filters: (_filters$2 = filters[0]) === null || _filters$2 === void 0 ? void 0 : _filters$2.conditions,
+        filters: (_filters$3 = filters[0]) === null || _filters$3 === void 0 ? void 0 : _filters$3.conditions,
         id: id
       })
     });
   };
+  var handleSelectSegment = function handleSelectSegment(_ref3) {
+    var id = _ref3.id,
+      filters = _ref3.filters;
+    return equals(id, segmentId) ? clearAppliedFilters(filters) : applySelectedSegment({
+      id: id,
+      filters: filters
+    });
+  };
   if (isLoading) {
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
@@ -3601,6 +3634,10 @@ var MenuBlocks = function MenuBlocks(_ref) {
         return !open;
       });
     }
+  }), /*#__PURE__*/React.createElement(MenuBar.Block, {
+    active: isEmpty(appliedFilters),
+    label: defaultSegmentName,
+    onClick: clearAppliedFilters
   }), segments.slice(0, showAll ? segments.length : ITEMS_MAX_COUNT).map(function (segment) {
     return /*#__PURE__*/React.createElement(MenuBar.Block, {
       active: segment.id === segmentId,
@@ -3619,77 +3656,83 @@ var Segments = function Segments(_ref) {
   var entity = _ref.entity,
     columns = _ref.columns,
     _ref$setIsFilterPaneO = _ref.setIsFilterPaneOpen,
-    setIsFilterPaneOpen = _ref$setIsFilterPaneO === void 0 ? noop$1 : _ref$setIsFilterPaneO;
-  var _useState = useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchTerm = _useState2[0],
-    setSearchTerm = _useState2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isSearchCollapsed = _useState4[0],
-    setIsSearchCollapsed = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isSegmentsPaneOpen = _useState6[0],
-    setIsSegmentsPaneOpen = _useState6[1];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var debouncedSearchTerm = useDebounce(searchTerm);
-  var iconProps = [{
-    icon: Search,
-    onClick: function onClick() {
-      setSearchTerm("");
-      setIsSearchCollapsed(function (collapsed) {
-        return !collapsed;
-      });
-    },
-    tooltipProps: {
-      content: t("neetoFilters.segments.searchSegments"),
-      position: "top"
-    }
-  }, {
-    icon: Settings,
-    onClick: function onClick() {
-      setIsFilterPaneOpen(false);
-      setIsSegmentsPaneOpen(true);
-    },
-    tooltipProps: {
-      content: t("neetoFilters.segments.manageSegments"),
-      position: "top"
-    }
-  }];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuBar.SubTitle, {
-    iconProps: iconProps
-  }, /*#__PURE__*/React.createElement(Typography, {
-    component: "h4",
-    style: "h5",
-    textTransform: "uppercase",
-    weight: "bold"
-  }, t("neetoFilters.common.segments"))), /*#__PURE__*/React.createElement(MenuBar.Search, {
-    autoFocus: true,
-    isCollapsed: isSearchCollapsed,
-    placeholder: t("neetoFilters.segments.searchSegments"),
-    value: searchTerm,
-    onChange: function onChange(_ref2) {
-      var value = _ref2.target.value;
-      return setSearchTerm(value);
-    },
-    onCollapse: function onCollapse() {
-      setSearchTerm("");
-      setIsSearchCollapsed(true);
-    }
-  }), /*#__PURE__*/React.createElement(MenuBlocks$1, {
-    columns: columns,
-    entity: entity,
-    searchTerm: debouncedSearchTerm
-  }), /*#__PURE__*/React.createElement(ManagePane, {
-    columns: columns,
-    entity: entity,
-    isOpen: isSegmentsPaneOpen,
-    onClose: function onClose() {
-      return setIsSegmentsPaneOpen(false);
-    }
-  }));
+    setIsFilterPaneOpen = _ref$setIsFilterPaneO === void 0 ? noop$1 : _ref$setIsFilterPaneO,
+    _ref$defaultSegmentNa = _ref.defaultSegmentName,
+    defaultSegmentName = _ref$defaultSegmentNa === void 0 ? t$1("neetoFilters.common.allResults") : _ref$defaultSegmentNa;
+  return function () {
+    var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchTerm = _useState2[0],
+      setSearchTerm = _useState2[1];
+    var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isSearchCollapsed = _useState4[0],
+      setIsSearchCollapsed = _useState4[1];
+    var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isSegmentsPaneOpen = _useState6[0],
+      setIsSegmentsPaneOpen = _useState6[1];
+    var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+    var debouncedSearchTerm = useDebounce(searchTerm);
+    var iconProps = [{
+      icon: Search$1,
+      onClick: function onClick() {
+        setSearchTerm("");
+        setIsSearchCollapsed(function (collapsed) {
+          return !collapsed;
+        });
+      },
+      tooltipProps: {
+        content: t("neetoFilters.segments.searchSegments"),
+        position: "top"
+      }
+    }, {
+      icon: Settings,
+      onClick: function onClick() {
+        setIsFilterPaneOpen(false);
+        setIsSegmentsPaneOpen(true);
+      },
+      tooltipProps: {
+        content: t("neetoFilters.segments.manageSegments"),
+        position: "top"
+      }
+    }];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuBar.SubTitle, {
+      iconProps: iconProps
+    }, /*#__PURE__*/React.createElement(Typography, {
+      component: "h4",
+      style: "h5",
+      textTransform: "uppercase",
+      weight: "bold"
+    }, t("neetoFilters.common.segments"))), /*#__PURE__*/React.createElement(MenuBar.Search, {
+      autoFocus: true,
+      isCollapsed: isSearchCollapsed,
+      placeholder: t("neetoFilters.segments.searchSegments"),
+      value: searchTerm,
+      onChange: function onChange(_ref2) {
+        var value = _ref2.target.value;
+        return setSearchTerm(value);
+      },
+      onCollapse: function onCollapse() {
+        setSearchTerm("");
+        setIsSearchCollapsed(true);
+      }
+    }), /*#__PURE__*/React.createElement(MenuBlocks$1, {
+      columns: columns,
+      defaultSegmentName: defaultSegmentName,
+      entity: entity,
+      searchTerm: debouncedSearchTerm
+    }), /*#__PURE__*/React.createElement(ManagePane, {
+      columns: columns,
+      defaultSegmentName: defaultSegmentName,
+      entity: entity,
+      isOpen: isSegmentsPaneOpen,
+      onClose: function onClose() {
+        return setIsSegmentsPaneOpen(false);
+      }
+    }));
+  }();
 };
 var index = /*#__PURE__*/React.memo(Segments);