@bigbinary/neeto-filters-frontend 3.0.0 → 3.0.2

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.
package/dist/index.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import React, { useState, useRef, useEffect, useTransition, useMemo } from 'react';
2
2
  import classnames from 'classnames';
3
- import { curryN, isNil, complement, curry, isEmpty, either, groupBy, anyPass, any, toLower, mergeLeft, identity, omit, mergeRight, toPairs, concat, pluck, has as has$1, equals, pick, modify, prop, isNotNil, append, last, not } from 'ramda';
3
+ import { curryN, isNil, complement, isEmpty, curry, either, groupBy, anyPass, any, toLower, mergeLeft, identity, omit, mergeRight, toPairs, concat, pluck, has as has$1, equals, pick, modify, prop, isNotNil, append, last, not } from 'ramda';
4
+ import { useHotKeys, useMutationWithInvalidation, useQueryParams, useDebounce, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
5
+ import { getQueryParams, dateFormat, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
4
6
  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';
5
7
  import { useTranslation, Trans } from 'react-i18next';
6
8
  import { useHistory, useLocation } from 'react-router-dom';
7
- import { useHotKeys, useMutationWithInvalidation, useDebounce, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
8
9
  import { Close, Search, Check, MenuHorizontal, Down, Settings } from '@bigbinary/neeto-icons';
9
10
  import i18next, { t as t$1 } from 'i18next';
10
11
  import dayjs from 'dayjs';
11
- import { getQueryParams, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
12
12
  import * as yup from 'yup';
13
13
  import timezone from 'dayjs/plugin/timezone';
14
14
  import utc from 'dayjs/plugin/utc';
@@ -427,8 +427,8 @@ dayjs.extend(timezone);
427
427
  dayjs.extend(weekday);
428
428
  dayjs.Ls.en.weekStart = 1;
429
429
 
430
- function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
431
- function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
430
+ function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
431
+ function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
432
432
  var groupByGroup = groupBy(function (_ref) {
433
433
  var group = _ref.group;
434
434
  return group || "individual";
@@ -592,9 +592,9 @@ var buildFiltersFromSearchParams = function buildFiltersFromSearchParams(columns
592
592
  return mergeLeft({
593
593
  value: ""
594
594
  }, column);
595
- } else if (isNil(value) || value === "") {
595
+ } else if (isNil(value) || value === "" || column.key === "keyword") {
596
596
  return null;
597
- } else if (column.key === "keyword") {
597
+ } else if (column.key === "search_term") {
598
598
  return mergeLeft({
599
599
  value: value,
600
600
  type: "text",
@@ -721,7 +721,7 @@ var buildDatePayload = function buildDatePayload(value) {
721
721
  var buildSingleDatePayload = function buildSingleDatePayload(filter) {
722
722
  var value = filter.value;
723
723
  var filterValue = Array.isArray(value) ? value.join(",") : value;
724
- return _objectSpread$5(_objectSpread$5({}, filter), {}, {
724
+ return _objectSpread$4(_objectSpread$4({}, filter), {}, {
725
725
  value: filterValue,
726
726
  type: "date"
727
727
  });
@@ -729,7 +729,7 @@ var buildSingleDatePayload = function buildSingleDatePayload(filter) {
729
729
  var buildSingleTimePayload = function buildSingleTimePayload(filter) {
730
730
  var value = filter.value;
731
731
  var filterValue = Array.isArray(value) ? value.join(",") : value;
732
- return _objectSpread$5(_objectSpread$5({}, filter), {}, {
732
+ return _objectSpread$4(_objectSpread$4({}, filter), {}, {
733
733
  value: filterValue,
734
734
  type: "time"
735
735
  });
@@ -750,7 +750,7 @@ var buildFiltersPayload = function buildFiltersPayload(filters) {
750
750
  var payload = removeBy({
751
751
  value: ""
752
752
  }, filters).map(function (filter) {
753
- if (filter.key === "keyword" && isMultiModelFilter(filter)) {
753
+ if (filter.key === "search_term" && isMultiModelFilter(filter)) {
754
754
  return splitFilter(filter);
755
755
  }
756
756
  var filterPayload = omit(["key", "label", "values", "setValue"], filter);
@@ -784,14 +784,14 @@ var buildSegmentsPayload = function buildSegmentsPayload(filters) {
784
784
  var payload = removeBy({
785
785
  value: ""
786
786
  }, filters).map(function (filter) {
787
- if (filter.key === "keyword") {
787
+ if (filter.key === "search_term") {
788
788
  return false;
789
789
  }
790
790
  var filterPayload = omit(["label", "values", "setValue", "defaultValue"], filter);
791
791
  var _filterPayload$defaul2 = filterPayload.defaultType,
792
792
  defaultType = _filterPayload$defaul2 === void 0 ? filterPayload.type : _filterPayload$defaul2,
793
793
  value = filterPayload.value;
794
- if (filter.key !== "keyword" && isMultiModelFilter(filterPayload)) {
794
+ if (filter.key !== "search_term" && isMultiModelFilter(filterPayload)) {
795
795
  throw i18next.t("neetoFilters.errors.cannotPassMultipleModels");
796
796
  }
797
797
  if (isMulti(defaultType)) {
@@ -893,7 +893,7 @@ var createUrlParamString = function createUrlParamString(_ref15) {
893
893
  _filter$defaultType = filter.defaultType,
894
894
  defaultType = _filter$defaultType === void 0 ? filter.type : _filter$defaultType,
895
895
  rule = filter.rule;
896
- if (key === "keyword") {
896
+ if (key === "search_term") {
897
897
  return value;
898
898
  } else if (isDigit(defaultType) || isText(defaultType)) {
899
899
  return "".concat(value, "+rule-").concat(rule);
@@ -931,7 +931,7 @@ var buildUrlFromFilters = function buildUrlFromFilters(_ref16) {
931
931
  delete searchParams["segmentId"];
932
932
  }
933
933
  var defaultFilters = buildDefaultFilters(columns, filters);
934
- delete searchParams["keyword"];
934
+ delete searchParams["search_term"];
935
935
  concat(filters, defaultFilters).forEach(function (filter) {
936
936
  searchParams[filter.key] = createUrlParamString({
937
937
  filter: filter,
@@ -968,9 +968,9 @@ var buildUrlFromSegment = function buildUrlFromSegment(_ref19) {
968
968
  return !defaultValue && delete searchParams[key];
969
969
  });
970
970
  var defaultFilters = buildDefaultFilters(columns, filters);
971
- delete searchParams["keyword"];
972
- isNotEmpty(id) && (searchParams["segmentId"] = id);
971
+ delete searchParams["searchTerm"];
973
972
  concat(filters, defaultFilters).forEach(function (filter) {
973
+ isNotEmpty(id) && (searchParams["segmentId"] = id);
974
974
  searchParams[filter.key] = createUrlParamStringForSegments({
975
975
  filter: filter,
976
976
  columns: columns
@@ -978,27 +978,30 @@ var buildUrlFromSegment = function buildUrlFromSegment(_ref19) {
978
978
  });
979
979
  return new URLSearchParams(searchParams).toString();
980
980
  };
981
- var getKeywordValueFromUrl = function getKeywordValueFromUrl() {
982
- return getQueryParams()["keyword"] || "";
981
+ var getSearchTermFromUrl = function getSearchTermFromUrl() {
982
+ return getQueryParams()["search_term"] || "";
983
983
  };
984
984
  var buildFilterColumnsFromFields = function buildFilterColumnsFromFields(_ref21) {
985
985
  var fields = _ref21.fields,
986
986
  _ref21$selectedFields = _ref21.selectedFields,
987
987
  selectedFields = _ref21$selectedFields === void 0 ? [] : _ref21$selectedFields,
988
988
  _ref21$showRuleSelect = _ref21.showRuleSelector,
989
- showRuleSelector = _ref21$showRuleSelect === void 0 ? false : _ref21$showRuleSelect;
989
+ showRuleSelector = _ref21$showRuleSelect === void 0 ? false : _ref21$showRuleSelect,
990
+ groupName = _ref21.groupName;
990
991
  return fields.reduce(function (columns, field) {
991
992
  if (isEmpty(selectedFields) || selectedFields.includes(field.name)) {
992
993
  var id = field.id,
993
994
  name = field.name,
994
995
  kind = field.kind;
995
- var column = {
996
+ var column = _objectSpread$4({
996
997
  key: toLower(name),
997
998
  node: "".concat(name, ":").concat(id),
998
999
  label: capitalize(name),
999
1000
  type: "custom.".concat(kind),
1000
1001
  showRuleSelector: showRuleSelector
1001
- };
1002
+ }, groupName && {
1003
+ group: groupName
1004
+ });
1002
1005
  if (kind === "single_option" || kind === "multi_option") {
1003
1006
  column.values = field.data.map(function (item) {
1004
1007
  return {
@@ -1014,7 +1017,7 @@ var buildFilterColumnsFromFields = function buildFilterColumnsFromFields(_ref21)
1014
1017
  };
1015
1018
  var getColumnsWithStandardizedType = function getColumnsWithStandardizedType(columns) {
1016
1019
  return columns.map(function (column) {
1017
- return _objectSpread$5(_objectSpread$5({}, column), {}, {
1020
+ return _objectSpread$4(_objectSpread$4({}, column), {}, {
1018
1021
  type: standardizeColumnType(column.type)
1019
1022
  });
1020
1023
  });
@@ -1091,7 +1094,7 @@ var buildRuleValue = function buildRuleValue(_ref) {
1091
1094
  return "";
1092
1095
  };
1093
1096
  var hasOnlyKeywordFilter = function hasOnlyKeywordFilter(filters) {
1094
- return filters.length === 1 && filters[0].key === "keyword";
1097
+ return filters.length === 1 && filters[0].key === "search_term";
1095
1098
  };
1096
1099
 
1097
1100
  var Block = function Block(_ref) {
@@ -1235,8 +1238,8 @@ var QUERY_KEYS = {
1235
1238
  };
1236
1239
  var SEGMENTS_STALE_TIME = 900000; // 15 mins
1237
1240
 
1238
- function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
1239
- function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
1241
+ function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
1242
+ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
1240
1243
  var SEGMENTS_LIST = QUERY_KEYS.SEGMENTS_LIST;
1241
1244
  var useFetchSegments = function useFetchSegments(_ref) {
1242
1245
  var entity = _ref.entity,
@@ -1263,17 +1266,17 @@ var useShowSegment = function useShowSegment(id) {
1263
1266
  }, options));
1264
1267
  };
1265
1268
  var useCreateSegment = function useCreateSegment(options) {
1266
- return useMutationWithInvalidation(segmentsApi.create, _objectSpread$4({
1269
+ return useMutationWithInvalidation(segmentsApi.create, _objectSpread$3({
1267
1270
  keysToInvalidate: [SEGMENTS_LIST]
1268
1271
  }, options));
1269
1272
  };
1270
1273
  var useUpdateSegment = function useUpdateSegment(options) {
1271
- return useMutationWithInvalidation(segmentsApi.update, _objectSpread$4({
1274
+ return useMutationWithInvalidation(segmentsApi.update, _objectSpread$3({
1272
1275
  keysToInvalidate: [SEGMENTS_LIST]
1273
1276
  }, options));
1274
1277
  };
1275
1278
  var useDestroySegment = function useDestroySegment(options) {
1276
- return useMutationWithInvalidation(segmentsApi.destroy, _objectSpread$4({
1279
+ return useMutationWithInvalidation(segmentsApi.destroy, _objectSpread$3({
1277
1280
  keysToInvalidate: [SEGMENTS_LIST]
1278
1281
  }, options));
1279
1282
  };
@@ -1423,8 +1426,8 @@ var Segment = function Segment(_ref) {
1423
1426
  }));
1424
1427
  };
1425
1428
 
1426
- function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
1427
- function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
1429
+ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
1430
+ function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
1428
1431
  var Bar = function Bar(_ref) {
1429
1432
  var entity = _ref.entity,
1430
1433
  className = _ref.className,
@@ -1443,14 +1446,17 @@ var Bar = function Bar(_ref) {
1443
1446
  var _useTranslation = useTranslation(),
1444
1447
  t = _useTranslation.t;
1445
1448
  var initialRenderRef = useRef(true);
1446
- var searchParams = new URLSearchParams(window.location.search);
1447
- var keywordFilter = _objectSpread$3({
1448
- key: "keyword",
1449
+ var searchParams = useQueryParams();
1450
+ var keywordValue = searchParams.search_term || "";
1451
+ var keywordFilter = _objectSpread$2(_objectSpread$2({
1449
1452
  type: "text",
1450
1453
  rule: "contains",
1451
- label: t("neetoFilters.labels.keyword")
1452
- }, keyword);
1453
- var filters = buildFiltersFromSearchParams(keyword.value !== "" ? [keywordFilter].concat(_toConsumableArray(columns)) : columns);
1454
+ label: t("neetoFilters.common.searchTerm")
1455
+ }, keyword), {}, {
1456
+ key: "search_term",
1457
+ value: keywordValue
1458
+ });
1459
+ var filters = buildFiltersFromSearchParams(isNotEmpty(keywordValue) ? [keywordFilter].concat(_toConsumableArray(columns)) : columns);
1454
1460
  var nonHiddenFilters = removeBy({
1455
1461
  hidden: true
1456
1462
  }, filters);
@@ -1466,11 +1472,11 @@ var Bar = function Bar(_ref) {
1466
1472
  return function () {
1467
1473
  return clearTimeout(handler);
1468
1474
  };
1469
- }, [keyword.value]);
1475
+ }, [keywordValue]);
1470
1476
  var handleSubmit = function handleSubmit(newFilters, isClearAll) {
1471
- var params = buildUrlFromFilters(_objectSpread$3({
1477
+ var params = buildUrlFromFilters(_objectSpread$2({
1472
1478
  columns: columns,
1473
- filters: keyword.value !== "" ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
1479
+ filters: isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
1474
1480
  }, isClearAll && {
1475
1481
  isClearAll: true,
1476
1482
  childrenKeys: childrenKeys
@@ -1480,15 +1486,16 @@ var Bar = function Bar(_ref) {
1480
1486
  });
1481
1487
  };
1482
1488
  var handleDelete = function handleDelete(key) {
1483
- if (key === "keyword") {
1484
- keyword.setValue("");
1485
- keyword.value = "";
1489
+ if (key === "search_term") {
1490
+ var params = omit(["search_term"], getQueryParams());
1491
+ var pathname = window.location.pathname;
1492
+ history.push(buildUrl(pathname, params));
1493
+ return;
1486
1494
  }
1487
1495
  if (childrenKeys.includes(key)) {
1488
- searchParams["delete"](key);
1489
- history.push({
1490
- search: searchParams.toString()
1491
- });
1496
+ var _params = omit([key], getQueryParams());
1497
+ var _pathname = window.location.pathname;
1498
+ history.push(buildUrl(_pathname, _params));
1492
1499
  }
1493
1500
  var newFilters = removeBy({
1494
1501
  key: key
@@ -1496,12 +1503,13 @@ var Bar = function Bar(_ref) {
1496
1503
  handleSubmit(newFilters);
1497
1504
  };
1498
1505
  var handleClearAll = function handleClearAll() {
1499
- keyword.setValue("");
1500
- keyword.value = "";
1506
+ var params = omit(["search_term"], getQueryParams());
1507
+ var pathname = window.location.pathname;
1508
+ history.push(buildUrl(pathname, params));
1501
1509
  handleSubmit([], true);
1502
1510
  };
1503
1511
  var childrenFiltersApplied = childrenKeys.some(function (key) {
1504
- return searchParams.get(key);
1512
+ return searchParams.has(key);
1505
1513
  });
1506
1514
  var hideClearButton = nonHiddenFilters.every(function (_ref2) {
1507
1515
  var defaultValue = _ref2.defaultValue,
@@ -1523,7 +1531,7 @@ var Bar = function Bar(_ref) {
1523
1531
  className: "neeto-filters-bar--separator"
1524
1532
  }));
1525
1533
  }), childrenKeys.filter(function (childKey) {
1526
- return searchParams.get(childKey);
1534
+ return has$1(childKey, searchParams);
1527
1535
  }).map(function (childKey) {
1528
1536
  return /*#__PURE__*/React.createElement(React.Fragment, {
1529
1537
  key: childKey
@@ -4015,12 +4023,10 @@ Slider.Header = Header;
4015
4023
  Slider.Body = Body;
4016
4024
  Slider.Footer = Footer;
4017
4025
 
4018
- function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4019
- function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4020
4026
  var useFilters = function useFilters(_ref) {
4021
4027
  var onFiltersChange = _ref.onFiltersChange,
4022
4028
  columns = _ref.columns,
4023
- keyword = _ref.keyword,
4029
+ keywordFilter = _ref.keywordFilter,
4024
4030
  onSelectorsChange = _ref.onSelectorsChange;
4025
4031
  var _useTransition = useTransition(),
4026
4032
  _useTransition2 = _slicedToArray(_useTransition, 2);
@@ -4032,16 +4038,10 @@ var useFilters = function useFilters(_ref) {
4032
4038
  var filters = buildFiltersFromSearchParams(columns, false);
4033
4039
  var history = useHistory();
4034
4040
  var defaultValuesOfColumns = JSON.stringify(pluck("defaultValue", columns));
4035
- var keywordFilter = _objectSpread$2({
4036
- key: "keyword",
4037
- type: "text",
4038
- rule: "contains",
4039
- label: "Keyword"
4040
- }, keyword);
4041
4041
  var handlePrecenseOfDefaultFilters = function handlePrecenseOfDefaultFilters(defaultFilters) {
4042
4042
  var params = buildUrlFromFilters({
4043
4043
  columns: columns,
4044
- filters: keyword.value !== "" ? [].concat(_toConsumableArray(defaultFilters), [keywordFilter]) : defaultFilters
4044
+ filters: isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(defaultFilters), [keywordFilter]) : defaultFilters
4045
4045
  });
4046
4046
  history.replace({
4047
4047
  search: params
@@ -4061,7 +4061,7 @@ var useFilters = function useFilters(_ref) {
4061
4061
  return;
4062
4062
  }
4063
4063
  var newFilters = buildFiltersFromSearchParams(columns);
4064
- var filtersPayload = keyword.value ? append(keywordFilter, newFilters) : newFilters;
4064
+ var filtersPayload = isNotEmpty(getSearchTermFromUrl()) ? append(keywordFilter, newFilters) : newFilters;
4065
4065
  handleFiltersChange(filtersPayload);
4066
4066
  onSelectorsChange(buildSelectorsFromURL(columns));
4067
4067
  };
@@ -4079,14 +4079,12 @@ var useFilters = function useFilters(_ref) {
4079
4079
  })
4080
4080
  });
4081
4081
  filters = buildFiltersFromSearchParams(columns, false);
4082
- isNil(searchParams["keyword"]) && keyword.setValue("");
4083
4082
  }
4084
4083
  };
4085
4084
  useEffect(function () {
4086
4085
  if (initialRender.current) {
4087
4086
  initialRender.current = false;
4088
- var keywordValue = getKeywordValueFromUrl();
4089
- keyword.setValue(keywordValue);
4087
+ var keywordValue = getSearchTermFromUrl();
4090
4088
  var defaultFilters = buildDefaultFilters(columns, filters);
4091
4089
  isNotEmpty(defaultFilters) && handlePrecenseOfDefaultFilters(defaultFilters);
4092
4090
  prevFilters.current = append(mergeRight(keywordFilter, {
@@ -4798,7 +4796,7 @@ var Pane = function Pane(_ref) {
4798
4796
  childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys,
4799
4797
  children = _ref.children,
4800
4798
  otherProps = _objectWithoutProperties(_ref, _excluded);
4801
- var searchParams = getQueryParams();
4799
+ var searchParams = useQueryParams();
4802
4800
  var _useState = useState(""),
4803
4801
  _useState2 = _slicedToArray(_useState, 2),
4804
4802
  searchTerm = _useState2[0],
@@ -4821,7 +4819,7 @@ var Pane = function Pane(_ref) {
4821
4819
  var isClearAll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
4822
4820
  var params = buildUrlFromFilters(_objectSpread$1({
4823
4821
  columns: columns,
4824
- filters: keyword.value !== "" ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
4822
+ filters: isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
4825
4823
  }, isClearAll && {
4826
4824
  isClearAll: true,
4827
4825
  childrenKeys: childrenKeys
@@ -4830,21 +4828,24 @@ var Pane = function Pane(_ref) {
4830
4828
  search: params
4831
4829
  });
4832
4830
  };
4831
+ var keywordFilter = _objectSpread$1(_objectSpread$1({
4832
+ type: "text",
4833
+ rule: "contains",
4834
+ label: t("neetoFilters.common.searchTerm")
4835
+ }, keyword), {}, {
4836
+ key: "search_term",
4837
+ value: searchParams.search_term || ""
4838
+ });
4833
4839
  var filters = useFilters({
4834
4840
  onFiltersChange: onChange,
4835
4841
  columns: columns,
4836
- keyword: keyword,
4842
+ keywordFilter: keywordFilter,
4837
4843
  onSelectorsChange: onSelectorsChange
4838
4844
  });
4839
- var keywordFilter = _objectSpread$1({
4840
- key: "keyword",
4841
- type: "text",
4842
- rule: "contains",
4843
- label: t("neetoFilters.labels.keyword")
4844
- }, keyword);
4845
4845
  var handleClearAll = function handleClearAll() {
4846
- keyword.setValue("");
4847
- keyword.value = "";
4846
+ var params = omit(["search_term"], getQueryParams());
4847
+ var pathname = window.location.pathname;
4848
+ history.push(buildUrl(pathname, params));
4848
4849
  handleChange([], true);
4849
4850
  };
4850
4851
  var handleClose = function handleClose() {