@bigbinary/neeto-filters-frontend 4.0.1 → 4.1.1

package/README.md

@@ -127,6 +127,7 @@ export default App;
 - `entity`: The entity associated with the filters.
 - `defaultSegmentName`: The name of segment which results all entities without applying any filter. Default name is "All results".
 - `customFilters`: To specify the custom components specific to the host application. This should be same as `children` passed to the `Filters` component.
+- `segmentsBaseUrl`: The base url to which the segments will be appended after creating the segment. by default the current path will be used.
 
 All these props must be same as that passed to the `Filters` component. The
 option to save filters as segments will be enabled only when the entity prop is
@@ -187,6 +188,7 @@ export default App;
 - `defaultSegmentName`: The name of segment which results all entities without applying any filter. Default name is "All results".
 - `customFilters`: To specify the custom components specific to the host application. This should be same as `children` passed to the `Filters` component.
 - `childrenKeys`: The list of keys which has to be cleared from url during clear filters operation.
+- `baseUrl`: The base url to which the segments will be appended. by default the current path will be used.
 
 The "columns" prop must be same as that passed to the `Filters` component.
 

package/dist/Bar.js

@@ -0,0 +1,672 @@
+import { S as SEARCH_TERM_KEY, c as SINGLE_DATE_OPTIONS, d as SINGLE_TIME_OPTIONS, _ as _defineProperty } from './constants-8f6e851e.js';
+import React, { useRef, useState, useEffect } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import classnames from 'classnames';
+import { t } from 'i18next';
+import { findBy, humanize, removeBy, hyphenate, isPresent, isNotEmpty, noop, findById, isNotPresent } from '@bigbinary/neeto-cist';
+import { useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { reject, modify, sortBy, prop, project, has, omit, isEmpty, assoc, identity } from 'ramda';
+import { S as SegmentForm } from './index-31aaf3e4.js';
+import { u as useCreateSegment, a as useUpdateSegment, Q as QUERY_KEYS } from './useSegmentsApi-c514647d.js';
+import { dateFormat, buildUrl, showThumbsUpToastr } from '@bigbinary/neeto-commons-frontend/utils';
+import Button from '@bigbinary/neetoui/Button';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+import useHotkeys from '@bigbinary/neeto-hotkeys';
+import Close from '@bigbinary/neeto-icons/Close';
+import Tooltip from '@bigbinary/neetoui/Tooltip';
+import Typography from '@bigbinary/neetoui/Typography';
+import { i as isRuleEmpty } from './index-95fe069e.js';
+import dayjs from 'dayjs';
+import { x as isDate, q as isCustomDateRange, y as isTime, t as isCustomTimeRange, m as isMulti, n as isTreeSelect, z as isSingleDate, A as isSingleTime, B as isBoolean, E as getLabelFromBool, v as isText, F as TEXT_RULES, w as isDigit, N as NUMBER_RULES, G as isSingle, h as getSnakeCasedQueryParams, i as isKeywordFilterPresent, _ as _slicedToArray, b as buildFiltersFromSearchParams, d as _toConsumableArray, c as buildUrlFromFilters, g as getSearchTermFromUrl, H as buildSegmentsPayload, I as buildUrlFromSegment } from './utils-9ea34335.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Dropdown from '@bigbinary/neetoui/Dropdown';
+import '@bigbinary/neeto-icons/Delete';
+import '@bigbinary/neetoui/Accordion';
+import '@bigbinary/neetoui/Pane';
+import '@bigbinary/neetoui/formik/ActionBlock';
+import '@bigbinary/neetoui/formik/Form';
+import '@bigbinary/neetoui/formik/Input';
+import 'react-router-dom/cjs/react-router-dom.min';
+import '@bigbinary/neeto-icons/Plus';
+import '@bigbinary/neetoui/Select';
+import 'yup';
+import 'axios';
+import '@bigbinary/neetoui/DatePicker';
+import '@bigbinary/neetoui/TimePicker';
+import '@bigbinary/neetoui/Input';
+import '@bigbinary/neetoui/TreeSelect';
+import 'dayjs/plugin/timezone';
+import 'dayjs/plugin/utc';
+import 'dayjs/plugin/weekday';
+import '@bigbinary/neeto-icons/Help';
+
+var DEFAULT_SEGMENTS_CACHE = {
+  segments: []
+};
+var SEGMENT_ACTIONS = {
+  EDIT: "edit",
+  CREATE: "create"
+};
+
+var SHORTCUTS = {
+  closePane: {
+    sequence: "escape",
+    description: t("neetoFilters.shortcuts.closePane")
+  },
+  deleteBlock: {
+    sequence: "backspace",
+    description: t("neetoFilters.shortcuts.deleteBlock")
+  },
+  openFilterPane: {
+    sequence: "enter",
+    description: t("neetoFilters.shortcuts.openFilterPane")
+  }
+};
+
+var buildCustomDateValue = function buildCustomDateValue(value) {
+  var isBeforeOrAfter = Math.abs(dayjs(value[1]).diff(dayjs(value[0]), "year")) >= 90;
+  if (isBeforeOrAfter) {
+    var currentMoment = dayjs();
+    var diffWithStart = Math.abs(currentMoment.diff(dayjs(value[0]), "year"));
+    var diffWithEnd = Math.abs(currentMoment.diff(dayjs(value[1]), "year"));
+    return diffWithStart < diffWithEnd ? "after-".concat(dateFormat.date(dayjs(value[0]).subtract(1, "day"))) : "before-".concat(dateFormat.date(dayjs(value[1]).add(1, "day")));
+  }
+  return value.map(dateFormat.date).join(" - ");
+};
+var buildFilterValue = function buildFilterValue(filter) {
+  var _findBy2;
+  var _filter$defaultType = filter.defaultType,
+    defaultType = _filter$defaultType === void 0 ? filter.type : _filter$defaultType,
+    value = filter.value,
+    rule = filter.rule,
+    _filter$values = filter.values,
+    initialValues = _filter$values === void 0 ? [] : _filter$values;
+  var values = initialValues.map(modify("value", function (value) {
+    return value.toString();
+  }));
+  if (isDate(defaultType) && isCustomDateRange(value)) {
+    return buildCustomDateValue(value);
+  } else if (isTime(defaultType) && isCustomTimeRange(value)) {
+    return value.map(dateFormat.time).join(" - ");
+  } else if (isDate(defaultType) || isTime(defaultType)) {
+    return humanize(value);
+  } else if (isMulti(defaultType) || isTreeSelect(defaultType)) {
+    return value.map(function (value) {
+      var _findBy;
+      return ((_findBy = findBy({
+        value: value
+      }, values)) === null || _findBy === void 0 ? void 0 : _findBy.label) || value;
+    }).join(", ");
+  } else if (isSingleDate(defaultType)) {
+    return rule === "between" ? value.map(dateFormat.date).join(" - ") : dateFormat.date(value);
+  } else if (isSingleTime(defaultType)) {
+    return rule === "between" ? value.map(dateFormat.time).join(" - ") : dateFormat.time(value);
+  } else if (isBoolean(defaultType)) {
+    return getLabelFromBool({
+      value: value,
+      values: values
+    });
+  }
+  return ((_findBy2 = findBy({
+    value: value
+  }, values)) === null || _findBy2 === void 0 ? void 0 : _findBy2.label) || value;
+};
+var buildRuleValue = function buildRuleValue(_ref) {
+  var rule = _ref.rule,
+    defaultType = _ref.defaultType;
+  if (isText(defaultType)) {
+    return findBy({
+      value: rule
+    }, TEXT_RULES).label;
+  } else if (isDigit(defaultType)) {
+    return findBy({
+      value: rule
+    }, NUMBER_RULES).label;
+  } else if (isSingleDate(defaultType)) {
+    return findBy({
+      value: rule
+    }, SINGLE_DATE_OPTIONS).label;
+  } else if (isSingleTime(defaultType)) {
+    return findBy({
+      value: rule
+    }, SINGLE_TIME_OPTIONS).label;
+  } else if (isMulti(defaultType) || isSingle(defaultType) || isTreeSelect(defaultType)) {
+    return isRuleEmpty(rule) ? t("neetoFilters.rules.isEmpty") : "";
+  }
+  return "";
+};
+var hasOnlyKeywordFilter = function hasOnlyKeywordFilter(filters) {
+  return filters.length === 1 && filters[0].key === SEARCH_TERM_KEY;
+};
+var deepCompare = function deepCompare(segments, filters) {
+  var comparisonHelper = function comparisonHelper(filters) {
+    return sortBy(prop("key"), removeBy({
+      key: SEARCH_TERM_KEY
+    }, project(["key", "rule", "value", "label"], filters)));
+  };
+  return reject(function (filters) {
+    var segment = findBy({
+      key: filters.key
+    }, segments);
+    return segment && segment.value === filters.value;
+  }, comparisonHelper(filters));
+};
+
+var Block = function Block(_ref) {
+  var filter = _ref.filter,
+    handleDelete = _ref.handleDelete,
+    setIsPaneOpen = _ref.setIsPaneOpen;
+  var key = filter.key,
+    _filter$defaultType = filter.defaultType,
+    defaultType = _filter$defaultType === void 0 ? filter.type : _filter$defaultType,
+    label = filter.label,
+    rule = filter.rule,
+    defaultValue = filter.defaultValue;
+  var filterValue = buildFilterValue(filter);
+  var ruleContent = buildRuleValue({
+    rule: rule,
+    defaultType: defaultType
+  });
+  var blockLength = label.length + ruleContent.length + filterValue.length;
+  var toolTipDisabled = blockLength <= 50;
+  var blockContent = !toolTipDisabled ? "".concat(filterValue.slice(0, 50 - blockLength), "...") : filterValue;
+  var deleteBlockHotKeyRef = useHotkeys(SHORTCUTS.deleteBlock.sequence, function () {
+    return handleDelete(key);
+  }, {
+    mode: "scoped"
+  });
+  var openFilterPaneHotKeyRef = useHotkeys(SHORTCUTS.openFilterPane.sequence, function () {
+    return setIsPaneOpen(key);
+  }, {
+    mode: "scoped"
+  });
+  return /*#__PURE__*/jsx(Tooltip, {
+    content: filterValue,
+    disabled: toolTipDisabled,
+    position: "bottom",
+    theme: "light",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "neeto-filters-bar__block",
+      "data-cy": "neeto-filters-".concat(hyphenate(key), "-block"),
+      tabIndex: 0,
+      ref: function ref(node) {
+        deleteBlockHotKeyRef.current = node;
+        openFilterPaneHotKeyRef.current = node;
+      },
+      onClick: function onClick() {
+        return setIsPaneOpen(key);
+      },
+      children: [/*#__PURE__*/jsxs(Typography, {
+        style: "body2",
+        children: [label, ":"]
+      }), /*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-text-gray-600",
+        style: "body2",
+        children: ruleContent
+      }), !isRuleEmpty(rule) && /*#__PURE__*/jsx(Typography, {
+        style: "body2",
+        children: blockContent
+      }), !defaultValue && /*#__PURE__*/jsx("div", {
+        className: "neeto-filters-bar__block-close",
+        children: /*#__PURE__*/jsx(Close, {
+          "data-cy": "neeto-filters-".concat(hyphenate(key), "-block-close-btn"),
+          size: 16,
+          strokeWidth: 2,
+          onClick: function onClick(event) {
+            event.stopPropagation();
+            handleDelete(key);
+          }
+        })
+      })]
+    })
+  });
+};
+
+var ChildBlock = function ChildBlock(_ref) {
+  var childKey = _ref.childKey,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    handleDelete = _ref.handleDelete;
+  var deleteBlockHotKeyRef = useHotkeys(SHORTCUTS.deleteBlock.sequence, function () {
+    return handleDelete(childKey);
+  }, {
+    mode: "scoped"
+  });
+  var openFilterPaneHotKeyRef = useHotkeys(SHORTCUTS.openFilterPane.sequence, function () {
+    return setIsPaneOpen(childKey);
+  }, {
+    mode: "scoped"
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-filters-bar__block",
+    "data-cy": "neeto-filters-".concat(hyphenate(childKey), "-block"),
+    tabIndex: 0,
+    ref: function ref(node) {
+      deleteBlockHotKeyRef.current = node;
+      openFilterPaneHotKeyRef.current = node;
+    },
+    onClick: function onClick() {
+      return setIsPaneOpen(childKey);
+    },
+    children: [/*#__PURE__*/jsx(Typography, {
+      style: "body2",
+      weight: "medium",
+      children: childKey
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-filters-bar__block-close",
+      children: /*#__PURE__*/jsx(Close, {
+        "data-cy": "neeto-filters-".concat(hyphenate(childKey), "-block-close-btn"),
+        size: 16,
+        strokeWidth: 2,
+        onClick: function onClick(event) {
+          event.stopPropagation();
+          handleDelete(childKey);
+        }
+      })
+    })]
+  });
+};
+
+var FilterBar = function FilterBar(_ref) {
+  var entity = _ref.entity,
+    filters = _ref.filters,
+    setIsSavePaneOpen = _ref.setIsSavePaneOpen,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    childrenKeys = _ref.childrenKeys,
+    nonHiddenFilters = _ref.nonHiddenFilters,
+    childrenFiltersApplied = _ref.childrenFiltersApplied,
+    keywordFilter = _ref.keywordFilter,
+    handleApplyFilters = _ref.handleApplyFilters;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var history = useHistory();
+  var searchParams = useQueryParams({
+    toCamelCase: false
+  });
+  var handleDelete = function handleDelete(key) {
+    if (key === SEARCH_TERM_KEY) {
+      var params = omit([SEARCH_TERM_KEY], getSnakeCasedQueryParams());
+      var pathname = window.location.pathname;
+      history.push(buildUrl(pathname, params));
+      return;
+    }
+    if (childrenKeys.includes(key)) {
+      var _params = omit([key], getSnakeCasedQueryParams());
+      var _pathname = window.location.pathname;
+      history.push(buildUrl(_pathname, _params));
+    }
+    var newFilters = removeBy({
+      key: key
+    }, filters);
+    handleApplyFilters(newFilters);
+  };
+  var handleClearAll = function handleClearAll() {
+    var params = isKeywordFilterPresent(keywordFilter) ? omit([SEARCH_TERM_KEY], getSnakeCasedQueryParams()) : getSnakeCasedQueryParams();
+    var pathname = window.location.pathname;
+    history.push(buildUrl(pathname, params));
+    handleApplyFilters([], true);
+  };
+  var hideClearButton = nonHiddenFilters.every(function (_ref2) {
+    var defaultValue = _ref2.defaultValue,
+      isClearable = _ref2.isClearable;
+    return defaultValue && !isClearable;
+  }) && !childrenFiltersApplied;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [nonHiddenFilters.map(function (filter) {
+      var _filter$suffixCompone;
+      return /*#__PURE__*/jsxs(React.Fragment, {
+        children: [/*#__PURE__*/jsx(Block, {
+          filter: filter,
+          handleDelete: handleDelete,
+          setIsPaneOpen: setIsPaneOpen
+        }), (_filter$suffixCompone = filter.suffixComponent) === null || _filter$suffixCompone === void 0 ? void 0 : _filter$suffixCompone.call(filter), /*#__PURE__*/jsx("div", {
+          className: "neeto-filters-bar--separator"
+        })]
+      }, filter.key);
+    }), childrenKeys.filter(function (childKey) {
+      return has(childKey, searchParams);
+    }).map(function (childKey) {
+      return /*#__PURE__*/jsxs(React.Fragment, {
+        children: [/*#__PURE__*/jsx(ChildBlock, {
+          childKey: childKey,
+          handleDelete: handleDelete,
+          setIsPaneOpen: setIsPaneOpen
+        }), /*#__PURE__*/jsx("div", {
+          className: "neeto-filters-bar--separator"
+        })]
+      }, childKey);
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex items-center gap-x-2",
+      children: [isPresent(entity) && !hasOnlyKeywordFilter(filters) && /*#__PURE__*/jsx(Button, {
+        "data-cy": "save-segment-button",
+        label: t("neetoFilters.segments.saveAsNewSegment"),
+        style: "secondary",
+        onClick: function onClick() {
+          setIsPaneOpen(false);
+          setIsSavePaneOpen({
+            action: SEGMENT_ACTIONS.CREATE
+          });
+        }
+      }), !hideClearButton && /*#__PURE__*/jsx(Button, {
+        "data-cy": "neeto-filters-bar-clear-btn",
+        label: t("neetoFilters.common.clearFilters"),
+        style: "text",
+        onClick: handleClearAll
+      })]
+    })]
+  });
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useSegment = function useSegment(_ref) {
+  var entity = _ref.entity,
+    keyword = _ref.keyword,
+    columns = _ref.columns,
+    childrenKeys = _ref.childrenKeys,
+    segmentsBaseUrl = _ref.segmentsBaseUrl;
+  var history = useHistory();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var initialRenderRef = useRef(true);
+  var _useQueryParams = useQueryParams(),
+    segmentId = _useQueryParams.segmentId;
+  var _useState = useState({
+      action: undefined
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSavePaneOpen = _useState2[0],
+    setIsSavePaneOpen = _useState2[1];
+  var _useCreateSegment = useCreateSegment(),
+    createSegment = _useCreateSegment.mutate,
+    isCreating = _useCreateSegment.isPending;
+  var _useUpdateSegment = useUpdateSegment(),
+    updateSegment = _useUpdateSegment.mutate,
+    isUpdating = _useUpdateSegment.isPending;
+  var isSubmitting = isCreating || isUpdating;
+  var searchParams = useQueryParams({
+    toCamelCase: false
+  });
+  var keywordValue = searchParams[SEARCH_TERM_KEY] || "";
+  var isEdit = isSavePaneOpen.action === SEGMENT_ACTIONS.EDIT;
+  var keywordFilter = _objectSpread(_objectSpread({
+    type: "text",
+    rule: "contains",
+    label: t("neetoFilters.common.searchTerm")
+  }, keyword), {}, {
+    key: SEARCH_TERM_KEY,
+    value: keywordValue
+  });
+  var filters = buildFiltersFromSearchParams(isKeywordFilterPresent(keywordFilter) && isNotEmpty(keywordValue) ? [keywordFilter].concat(_toConsumableArray(columns)) : columns);
+  var nonHiddenFilters = removeBy({
+    hidden: true
+  }, filters);
+  var handleApplyFilters = function handleApplyFilters(newFilters, isClearAll) {
+    var params = buildUrlFromFilters(_objectSpread({
+      columns: columns,
+      filters: isKeywordFilterPresent(keywordFilter) && isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
+    }, isClearAll && {
+      isClearAll: true,
+      childrenKeys: childrenKeys
+    }));
+    history.push({
+      search: params
+    });
+  };
+  var childrenFiltersApplied = childrenKeys.some(function (key) {
+    return has(key, searchParams);
+  });
+  useEffect(function () {
+    if (initialRenderRef.current) {
+      initialRenderRef.current = false;
+      return noop;
+    }
+    var handler = setTimeout(function () {
+      handleApplyFilters(filters);
+    }, 500);
+    return function () {
+      return clearTimeout(handler);
+    };
+  }, [keywordValue]);
+  var handleCreateSuccess = function handleCreateSuccess(_ref2) {
+    var _filters$;
+    var _ref2$segment = _ref2.segment,
+      id = _ref2$segment.id,
+      filters = _ref2$segment.filters;
+    history.push({
+      pathname: segmentsBaseUrl,
+      search: buildUrlFromSegment({
+        columns: columns,
+        filters: (_filters$ = filters[0]) === null || _filters$ === void 0 ? void 0 : _filters$.conditions,
+        id: id
+      })
+    });
+    setIsSavePaneOpen({
+      action: undefined
+    });
+    showThumbsUpToastr();
+  };
+  var handleCreate = function handleCreate(_ref3, _ref4) {
+    var name = _ref3.name;
+    var setFieldError = _ref4.setFieldError;
+    var filtersPayload = buildSegmentsPayload(filters, childrenKeys);
+    createSegment({
+      name: name,
+      entity: entity,
+      filters: filtersPayload
+    }, {
+      onSuccess: handleCreateSuccess,
+      onError: function onError(error) {
+        return setFieldError("name", error.response.data.error);
+      }
+    });
+  };
+  var handleUpdate = function handleUpdate(_ref5, _ref6) {
+    var name = _ref5.name;
+    var setFieldError = _ref6.setFieldError;
+    var filtersPayload = buildSegmentsPayload(filters, childrenKeys);
+    updateSegment({
+      id: segmentId,
+      payload: {
+        name: name,
+        filters: filtersPayload
+      }
+    }, {
+      onSuccess: function onSuccess() {
+        setIsSavePaneOpen({
+          action: undefined
+        });
+        showThumbsUpToastr();
+      },
+      onError: function onError(error) {
+        return setFieldError("name", error.response.data.error);
+      }
+    });
+  };
+  return {
+    isEdit: isEdit,
+    filters: filters,
+    keywordFilter: keywordFilter,
+    isSubmitting: isSubmitting,
+    nonHiddenFilters: nonHiddenFilters,
+    isSavePaneOpen: isSavePaneOpen,
+    setIsSavePaneOpen: setIsSavePaneOpen,
+    handleApplyFilters: handleApplyFilters,
+    childrenFiltersApplied: childrenFiltersApplied,
+    handleSubmit: isEdit ? handleUpdate : handleCreate
+  };
+};
+
+var Menu = Dropdown.Menu,
+  MenuItem = Dropdown.MenuItem;
+var SegmentBar = function SegmentBar(_ref) {
+  var entity = _ref.entity,
+    filters = _ref.filters,
+    setIsSavePaneOpen = _ref.setIsSavePaneOpen,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    handleApplyFilters = _ref.handleApplyFilters,
+    childrenKeys = _ref.childrenKeys;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var history = useHistory();
+  var _useQueryParams = useQueryParams(),
+    segmentId = _useQueryParams.segmentId;
+  var queryClient = useQueryClient();
+  var cachedSegments = queryClient.getQueryData([QUERY_KEYS.SEGMENTS_LIST, entity, ""]) || DEFAULT_SEGMENTS_CACHE;
+  var segment = findById(segmentId, cachedSegments.segments);
+  if (isNotPresent(segment)) return null;
+  var handleDelete = function handleDelete(key) {
+    if (key === SEARCH_TERM_KEY) {
+      var params = omit([SEARCH_TERM_KEY], getSnakeCasedQueryParams());
+      var pathname = window.location.pathname;
+      history.push(buildUrl(pathname, params));
+      return;
+    }
+    if (childrenKeys.includes(key)) {
+      var _params = omit([key], getSnakeCasedQueryParams());
+      var _pathname = window.location.pathname;
+      history.push(buildUrl(_pathname, _params));
+    }
+    var newFilters = removeBy({
+      key: key
+    }, filters);
+    handleApplyFilters(newFilters);
+  };
+  var changedFilters = deepCompare(segment.filters[0].conditions, filters);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Typography, {
+      className: "neeto-ui-text-gray-600 mr-4 px-2",
+      "data-cy": "neeto-filters-segment-name",
+      style: "h4",
+      children: segment.name
+    }), isNotEmpty(changedFilters) && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Dropdown, {
+        buttonProps: {
+          className: "mr-2"
+        },
+        buttonStyle: "secondary",
+        label: t("neetoFilters.segments.updateSegment"),
+        children: /*#__PURE__*/jsxs(Menu, {
+          children: [/*#__PURE__*/jsx(MenuItem.Button, {
+            onClick: function onClick() {
+              return setIsSavePaneOpen({
+                action: SEGMENT_ACTIONS.EDIT
+              });
+            },
+            children: t("neetoFilters.segments.updateSegment")
+          }), /*#__PURE__*/jsx(MenuItem.Button, {
+            onClick: function onClick() {
+              setIsPaneOpen(false);
+              setIsSavePaneOpen({
+                action: SEGMENT_ACTIONS.CREATE
+              });
+            },
+            children: t("neetoFilters.segments.saveAsNewSegment")
+          })]
+        })
+      }), changedFilters.map(function (filter) {
+        var _filter$suffixCompone;
+        return /*#__PURE__*/jsxs(React.Fragment, {
+          children: [/*#__PURE__*/jsx(Block, {
+            filter: filter,
+            handleDelete: handleDelete,
+            setIsPaneOpen: setIsPaneOpen
+          }), (_filter$suffixCompone = filter.suffixComponent) === null || _filter$suffixCompone === void 0 ? void 0 : _filter$suffixCompone.call(filter), /*#__PURE__*/jsx("div", {
+            className: "neeto-filters-bar--separator"
+          })]
+        }, filter.key);
+      })]
+    })]
+  });
+};
+
+var Bar = function Bar(_ref) {
+  var entity = _ref.entity,
+    className = _ref.className,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    _ref$keyword = _ref.keyword,
+    keyword = _ref$keyword === void 0 ? {
+      node: "",
+      value: "",
+      setValue: noop
+    } : _ref$keyword,
+    _ref$setIsPaneOpen = _ref.setIsPaneOpen,
+    setIsPaneOpen = _ref$setIsPaneOpen === void 0 ? identity : _ref$setIsPaneOpen,
+    _ref$childrenKeys = _ref.childrenKeys,
+    childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys,
+    _ref$defaultSegmentNa = _ref.defaultSegmentName,
+    defaultSegmentName = _ref$defaultSegmentNa === void 0 ? t("neetoFilters.common.allResults") : _ref$defaultSegmentNa,
+    _ref$segmentsBaseUrl = _ref.segmentsBaseUrl,
+    segmentsBaseUrl = _ref$segmentsBaseUrl === void 0 ? window.location.pathname : _ref$segmentsBaseUrl,
+    customFilters = _ref.customFilters;
+  var queryClient = useQueryClient();
+  var _useQueryParams = useQueryParams(),
+    segmentId = _useQueryParams.segmentId;
+  var segmentFormInitialRef = useRef(null);
+  var _useSegment = useSegment({
+      entity: entity,
+      keyword: keyword,
+      columns: columns,
+      childrenKeys: childrenKeys,
+      segmentsBaseUrl: segmentsBaseUrl
+    }),
+    isEdit = _useSegment.isEdit,
+    filters = _useSegment.filters,
+    handleSubmit = _useSegment.handleSubmit,
+    isSubmitting = _useSegment.isSubmitting,
+    keywordFilter = _useSegment.keywordFilter,
+    isSavePaneOpen = _useSegment.isSavePaneOpen,
+    nonHiddenFilters = _useSegment.nonHiddenFilters,
+    setIsSavePaneOpen = _useSegment.setIsSavePaneOpen,
+    handleApplyFilters = _useSegment.handleApplyFilters,
+    childrenFiltersApplied = _useSegment.childrenFiltersApplied;
+  var BarComponent = segmentId ? SegmentBar : FilterBar;
+  var cachedSegments = queryClient.getQueryData([QUERY_KEYS.SEGMENTS_LIST, entity, ""]) || DEFAULT_SEGMENTS_CACHE;
+  var segment = findById(segmentId, cachedSegments.segments);
+  if (isEmpty(nonHiddenFilters) && !childrenFiltersApplied) return null;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      className: classnames("neeto-filters-bar", _defineProperty({}, className, className)),
+      children: /*#__PURE__*/jsx(BarComponent, {
+        childrenFiltersApplied: childrenFiltersApplied,
+        childrenKeys: childrenKeys,
+        entity: entity,
+        filters: filters,
+        handleApplyFilters: handleApplyFilters,
+        keywordFilter: keywordFilter,
+        nonHiddenFilters: nonHiddenFilters,
+        setIsPaneOpen: setIsPaneOpen,
+        setIsSavePaneOpen: setIsSavePaneOpen
+      })
+    }), /*#__PURE__*/jsx(SegmentForm, {
+      childrenKeys: childrenKeys,
+      columns: columns,
+      customFilters: customFilters,
+      defaultSegmentName: defaultSegmentName,
+      filters: filters,
+      handleSubmit: handleSubmit,
+      isEdit: isEdit,
+      isSubmitting: isSubmitting,
+      keywordFilter: keywordFilter,
+      segmentFormInitialRef: segmentFormInitialRef,
+      isOpen: isPresent(isSavePaneOpen.action),
+      initialValues: isEdit ? assoc("filters", [{
+        conditions: filters
+      }], segment) : {
+        name: "",
+        filters: [{
+          conditions: filters
+        }]
+      },
+      onClose: function onClose() {
+        return setIsSavePaneOpen({
+          action: undefined
+        });
+      }
+    })]
+  });
+};
+
+export { Bar as default };
+//# sourceMappingURL=Bar.js.map