@bigbinary/neeto-filters-frontend 4.3.32 → 4.3.33

package/dist/cjs/v2/Bar.js

@@ -0,0 +1,673 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var react = require('react');
+var reactQuery = require('@tanstack/react-query');
+var classnames = require('classnames');
+var i18next = require('i18next');
+var neetoCist = require('@bigbinary/neeto-cist');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var ramda = require('ramda');
+var index$1 = require('../../index-D5wjkRUM.js');
+var useSegmentsApi = require('../../useSegmentsApi-DlvMy4A9.js');
+var neetoAtoms = require('@bigbinary/neeto-atoms');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var reactI18next = require('react-i18next');
+var reactRouterDom = require('react-router-dom');
+var constants = require('../../constants-DoHD7obf.js');
+var lucideReact = require('lucide-react');
+var useHotkeys = require('@bigbinary/neeto-hotkeys');
+var index = require('../../index-BiqUQPwR.js');
+var keyboardShortcuts = require('../../keyboardShortcuts-DcgoM1dR.js');
+var v2_utils = require('../../utils-ClTYBS1C.js');
+var jsxRuntime = require('react/jsx-runtime');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var utils$1 = require('../../utils-CzRCzZ3I.js');
+require('@bigbinary/neeto-icons/Delete');
+require('@bigbinary/neeto-molecules/HelpPopover');
+require('@bigbinary/neetoui/Accordion');
+require('@bigbinary/neetoui/Button');
+require('@bigbinary/neetoui/Pane');
+require('@bigbinary/neetoui/Typography');
+require('@bigbinary/neetoui/formik/ActionBlock');
+require('@bigbinary/neetoui/formik/Form');
+require('@bigbinary/neetoui/formik/Input');
+require('react-router-dom/cjs/react-router-dom.min');
+require('@bigbinary/neeto-icons/Plus');
+require('@bigbinary/neetoui/Select');
+require('yup');
+require('axios');
+require('../../dayjs-9rsrbiYS.js');
+require('@bigbinary/neetoui/DatePicker');
+require('@bigbinary/neetoui/TimePicker');
+require('@bigbinary/neetoui/Input');
+require('@bigbinary/neetoui/TreeSelect');
+require('@bigbinary/neeto-icons/Help');
+
+var DEFAULT_SEGMENTS_CACHE = {
+  segments: []
+};
+var SEGMENT_ACTIONS = {
+  EDIT: "edit",
+  CREATE: "create"
+};
+
+var buildCustomDateValue = function buildCustomDateValue(value) {
+  var isBeforeOrAfter = Math.abs(utils.dayjs(value[1]).diff(utils.dayjs(value[0]), "year")) >= 90;
+  if (isBeforeOrAfter) {
+    var currentMoment = utils.dayjs();
+    var diffWithStart = Math.abs(currentMoment.diff(utils.dayjs(value[0]), "year"));
+    var diffWithEnd = Math.abs(currentMoment.diff(utils.dayjs(value[1]), "year"));
+    return diffWithStart < diffWithEnd ? "after-".concat(utils.dateFormat.date(utils.dayjs(value[0]).subtract(1, "day"))) : "before-".concat(utils.dateFormat.date(utils.dayjs(value[1]).add(1, "day")));
+  }
+  return value.map(utils.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(ramda.modify("value", function (value) {
+    return value.toString();
+  }));
+  if (v2_utils.isDate(defaultType) && v2_utils.isCustomDateRange(value)) {
+    return buildCustomDateValue(value);
+  } else if (v2_utils.isTime(defaultType) && v2_utils.isCustomTimeRange(value)) {
+    return value.map(utils.dateFormat.time).join(" - ");
+  } else if (v2_utils.isDate(defaultType) || v2_utils.isTime(defaultType)) {
+    return neetoCist.humanize(value);
+  } else if (v2_utils.isMulti(defaultType) || v2_utils.isTreeSelect(defaultType)) {
+    return value.map(function (value) {
+      var _findBy;
+      return ((_findBy = neetoCist.findBy({
+        value: value
+      }, values)) === null || _findBy === void 0 ? void 0 : _findBy.label) || value;
+    }).join(", ");
+  } else if (v2_utils.isSingleDate(defaultType)) {
+    return rule === "between" ? value.map(utils.dateFormat.date).join(" - ") : utils.dateFormat.date(value);
+  } else if (v2_utils.isSingleTime(defaultType)) {
+    return rule === "between" ? value.map(utils.dateFormat.time).join(" - ") : utils.dateFormat.time(value);
+  } else if (v2_utils.isBoolean(defaultType)) {
+    return v2_utils.getLabelFromBool({
+      value: value,
+      values: values
+    });
+  }
+  return ((_findBy2 = neetoCist.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;
+  try {
+    if (v2_utils.isText(defaultType)) {
+      return neetoCist.findBy({
+        value: rule
+      }, v2_utils.TEXT_RULES).label;
+    } else if (v2_utils.isDigit(defaultType)) {
+      return neetoCist.findBy({
+        value: rule
+      }, v2_utils.NUMBER_RULES).label;
+    } else if (v2_utils.isSingleDate(defaultType)) {
+      return neetoCist.findBy({
+        value: rule
+      }, constants.SINGLE_DATE_OPTIONS).label;
+    } else if (v2_utils.isSingleTime(defaultType)) {
+      return neetoCist.findBy({
+        value: rule
+      }, constants.SINGLE_TIME_OPTIONS).label;
+    } else if (v2_utils.isMulti(defaultType) || v2_utils.isSingle(defaultType) || v2_utils.isTreeSelect(defaultType)) {
+      return index.isRuleEmpty(rule) ? i18next.t("neetoFilters.rules.isEmpty") : "";
+    }
+  } catch (_unused) {
+    // This block is to handle the cases where the user modifies the URL and adds an invalid rule.
+  }
+  return "";
+};
+var hasOnlyKeywordFilter = function hasOnlyKeywordFilter(filters) {
+  return filters.length === 1 && filters[0].key === constants.SEARCH_TERM_KEY;
+};
+var deepCompare = function deepCompare(segments, filters) {
+  var comparisonHelper = function comparisonHelper(filters) {
+    return ramda.sortBy(ramda.prop("key"), neetoCist.removeBy({
+      key: constants.SEARCH_TERM_KEY
+    }, ramda.project(["key", "rule", "value", "label"], filters)));
+  };
+  return ramda.reject(function (filters) {
+    var segment = neetoCist.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(keyboardShortcuts.SHORTCUTS.deleteBlock.sequence, function () {
+    return handleDelete(key);
+  }, {
+    mode: "scoped"
+  });
+  var openFilterPaneHotKeyRef = useHotkeys(keyboardShortcuts.SHORTCUTS.openFilterPane.sequence, function () {
+    return setIsPaneOpen(key);
+  }, {
+    mode: "scoped"
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tooltip, {
+    content: filterValue,
+    disabled: toolTipDisabled,
+    position: "bottom",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-filters-bar__block",
+      "data-testid": "neeto-filters-".concat(neetoCist.hyphenate(key), "-block"),
+      tabIndex: 0,
+      ref: function ref(node) {
+        deleteBlockHotKeyRef.current = node;
+        openFilterPaneHotKeyRef.current = node;
+      },
+      onClick: function onClick() {
+        return setIsPaneOpen(key);
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Typography, {
+        variant: "body2",
+        children: [label, ":"]
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "neeto-ui-text-gray-500",
+        variant: "body2",
+        children: ruleContent
+      }), !index.isRuleEmpty(rule) && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        variant: "body2",
+        children: blockContent
+      }), !defaultValue && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "neeto-filters-bar__block-close",
+        children: /*#__PURE__*/jsxRuntime.jsx(lucideReact.XIcon, {
+          "data-testid": "neeto-filters-".concat(neetoCist.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(keyboardShortcuts.SHORTCUTS.deleteBlock.sequence, function () {
+    return handleDelete(childKey);
+  }, {
+    mode: "scoped"
+  });
+  var openFilterPaneHotKeyRef = useHotkeys(keyboardShortcuts.SHORTCUTS.openFilterPane.sequence, function () {
+    return setIsPaneOpen(childKey);
+  }, {
+    mode: "scoped"
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "neeto-filters-bar__block",
+    "data-testid": "neeto-filters-".concat(neetoCist.hyphenate(childKey), "-block"),
+    tabIndex: 0,
+    ref: function ref(node) {
+      deleteBlockHotKeyRef.current = node;
+      openFilterPaneHotKeyRef.current = node;
+    },
+    onClick: function onClick() {
+      return setIsPaneOpen(childKey);
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      variant: "body2",
+      weight: "medium",
+      children: childKey
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-filters-bar__block-close",
+      children: /*#__PURE__*/jsxRuntime.jsx(lucideReact.XIcon, {
+        "data-testid": "neeto-filters-".concat(neetoCist.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var history = reactRouterDom.useHistory();
+  var searchParams = reactUtils.useQueryParams({
+    toCamelCase: false
+  });
+  var handleDelete = function handleDelete(key) {
+    if (key === constants.SEARCH_TERM_KEY) {
+      var params = ramda.omit([constants.SEARCH_TERM_KEY], v2_utils.getSnakeCasedQueryParams());
+      var pathname = window.location.pathname;
+      history.push(utils.buildUrl(pathname, params));
+      return;
+    }
+    if (childrenKeys.includes(key)) {
+      var _params = ramda.omit([key], v2_utils.getSnakeCasedQueryParams());
+      var _pathname = window.location.pathname;
+      history.push(utils.buildUrl(_pathname, _params));
+    }
+    var newFilters = neetoCist.removeBy({
+      key: key
+    }, filters);
+    handleApplyFilters(newFilters);
+  };
+  var handleClearAll = function handleClearAll() {
+    var params = v2_utils.isKeywordFilterPresent(keywordFilter) ? ramda.omit([constants.SEARCH_TERM_KEY], v2_utils.getSnakeCasedQueryParams()) : v2_utils.getSnakeCasedQueryParams();
+    var pathname = window.location.pathname;
+    history.push(utils.buildUrl(pathname, params));
+    handleApplyFilters([], true);
+  };
+  var hideClearButton = nonHiddenFilters.every(function (_ref2) {
+    var defaultValue = _ref2.defaultValue,
+      isClearable = _ref2.isClearable;
+    return defaultValue && !isClearable;
+  }) && !childrenFiltersApplied;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [nonHiddenFilters.map(function (filter) {
+      var _filter$suffixCompone;
+      return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Block, {
+          filter: filter,
+          handleDelete: handleDelete,
+          setIsPaneOpen: setIsPaneOpen
+        }), (_filter$suffixCompone = filter.suffixComponent) === null || _filter$suffixCompone === void 0 ? void 0 : _filter$suffixCompone.call(filter), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "neeto-filters-bar--separator"
+        })]
+      }, filter.key);
+    }), childrenKeys.filter(function (childKey) {
+      return ramda.has(childKey, searchParams);
+    }).map(function (childKey) {
+      return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(ChildBlock, {
+          childKey: childKey,
+          handleDelete: handleDelete,
+          setIsPaneOpen: setIsPaneOpen
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "neeto-filters-bar--separator"
+        })]
+      }, childKey);
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center gap-x-2",
+      children: [neetoCist.isPresent(entity) && !hasOnlyKeywordFilter(filters) && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        "data-testid": "save-segment-button",
+        label: t("neetoFilters.views.saveAsNewView"),
+        variant: "secondary",
+        onClick: function onClick() {
+          setIsPaneOpen(false);
+          setIsSavePaneOpen({
+            action: SEGMENT_ACTIONS.CREATE
+          });
+        }
+      }), !hideClearButton && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        "data-testid": "neeto-filters-bar-clear-btn",
+        label: t("neetoFilters.common.clearFilters"),
+        size: "sm",
+        variant: "secondary",
+        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), true).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 = reactRouterDom.useHistory();
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var initialRenderRef = react.useRef(true);
+  var _useQueryParams = reactUtils.useQueryParams(),
+    segmentId = _useQueryParams.segmentId;
+  var _useState = react.useState({
+      action: undefined
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSavePaneOpen = _useState2[0],
+    setIsSavePaneOpen = _useState2[1];
+  var _useCreateSegment = useSegmentsApi.useCreateSegment(),
+    createSegment = _useCreateSegment.mutate,
+    isCreating = _useCreateSegment.isPending;
+  var _useUpdateSegment = useSegmentsApi.useUpdateSegment(),
+    updateSegment = _useUpdateSegment.mutate,
+    isUpdating = _useUpdateSegment.isPending;
+  var isSubmitting = isCreating || isUpdating;
+  var searchParams = reactUtils.useQueryParams({
+    toCamelCase: false
+  });
+  var keywordValue = searchParams[constants.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: constants.SEARCH_TERM_KEY,
+    value: keywordValue
+  });
+  var filters = utils$1.buildFiltersFromSearchParams(utils$1.isKeywordFilterPresent(keywordFilter) && neetoCist.isNotEmpty(keywordValue) ? [keywordFilter].concat(_toConsumableArray(columns)) : columns);
+  var nonHiddenFilters = neetoCist.removeBy({
+    hidden: true
+  }, filters);
+  var handleApplyFilters = function handleApplyFilters(newFilters, isClearAll) {
+    var params = utils$1.buildUrlFromFilters(_objectSpread({
+      columns: columns,
+      filters: utils$1.isKeywordFilterPresent(keywordFilter) && neetoCist.isNotEmpty(utils$1.getSearchTermFromUrl()) ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
+    }, isClearAll && {
+      isClearAll: true,
+      childrenKeys: childrenKeys
+    }));
+    history.push({
+      search: params
+    });
+  };
+  var childrenFiltersApplied = childrenKeys.some(function (key) {
+    return ramda.has(key, searchParams);
+  });
+  react.useEffect(function () {
+    if (initialRenderRef.current) {
+      initialRenderRef.current = false;
+      return neetoCist.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: utils$1.buildUrlFromSegment({
+        columns: columns,
+        filters: (_filters$ = filters[0]) === null || _filters$ === void 0 ? void 0 : _filters$.conditions,
+        id: id
+      })
+    });
+    setIsSavePaneOpen({
+      action: undefined
+    });
+    utils.showThumbsUpToastr();
+  };
+  var handleCreate = function handleCreate(_ref3, _ref4) {
+    var name = _ref3.name;
+    var setFieldError = _ref4.setFieldError;
+    var filtersPayload = utils$1.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 = utils$1.buildSegmentsPayload(filters, childrenKeys);
+    updateSegment({
+      id: segmentId,
+      payload: {
+        name: name,
+        filters: filtersPayload
+      }
+    }, {
+      onSuccess: function onSuccess() {
+        setIsSavePaneOpen({
+          action: undefined
+        });
+        utils.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 SegmentBar = function SegmentBar(_ref) {
+  var entity = _ref.entity,
+    filters = _ref.filters,
+    setIsSavePaneOpen = _ref.setIsSavePaneOpen,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    handleApplyFilters = _ref.handleApplyFilters,
+    childrenKeys = _ref.childrenKeys,
+    showSegmentName = _ref.showSegmentName;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var history = reactRouterDom.useHistory();
+  var _useQueryParams = reactUtils.useQueryParams(),
+    segmentId = _useQueryParams.segmentId;
+  var queryClient = reactQuery.useQueryClient();
+  var cachedSegments = queryClient.getQueryData([useSegmentsApi.QUERY_KEYS.SEGMENTS_LIST, entity, ""]) || DEFAULT_SEGMENTS_CACHE;
+  var segment = neetoCist.findById(segmentId, cachedSegments.segments);
+  if (neetoCist.isNotPresent(segment)) return null;
+  var handleDelete = function handleDelete(key) {
+    if (key === constants.SEARCH_TERM_KEY) {
+      var params = ramda.omit([constants.SEARCH_TERM_KEY], utils$1.getSnakeCasedQueryParams());
+      var pathname = window.location.pathname;
+      history.push(utils.buildUrl(pathname, params));
+      return;
+    }
+    if (childrenKeys.includes(key)) {
+      var _params = ramda.omit([key], utils$1.getSnakeCasedQueryParams());
+      var _pathname = window.location.pathname;
+      history.push(utils.buildUrl(_pathname, _params));
+    }
+    var newFilters = neetoCist.removeBy({
+      key: key
+    }, filters);
+    handleApplyFilters(newFilters);
+  };
+  var changedFilters = deepCompare(segment.filters[0].conditions, filters);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [showSegmentName && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      className: "neeto-ui-text-gray-600 me-4 px-2",
+      "data-testid": "neeto-filters-segment-name",
+      variant: "h4",
+      children: segment.name
+    }), neetoCist.isNotEmpty(changedFilters) && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
+        buttonProps: {
+          className: "me-2"
+        },
+        buttonStyle: "secondary",
+        label: t("neetoFilters.views.updateView"),
+        children: /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.DropdownMenu.Menu, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.MenuItem, {
+            children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.MenuItem.Button, {
+              onClick: function onClick() {
+                return setIsSavePaneOpen({
+                  action: SEGMENT_ACTIONS.EDIT
+                });
+              },
+              children: t("neetoFilters.views.updateView")
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.MenuItem, {
+            children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.MenuItem.Button, {
+              onClick: function onClick() {
+                setIsPaneOpen(false);
+                setIsSavePaneOpen({
+                  action: SEGMENT_ACTIONS.CREATE
+                });
+              },
+              children: t("neetoFilters.views.saveAsNewView")
+            })
+          })]
+        })
+      }), changedFilters.map(function (filter) {
+        var _filter$suffixCompone;
+        return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(Block, {
+            filter: filter,
+            handleDelete: handleDelete,
+            setIsPaneOpen: setIsPaneOpen
+          }), (_filter$suffixCompone = filter.suffixComponent) === null || _filter$suffixCompone === void 0 ? void 0 : _filter$suffixCompone.call(filter), /*#__PURE__*/jsxRuntime.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,
+    segmentHelpPopoverProps = _ref.segmentHelpPopoverProps,
+    _ref$keyword = _ref.keyword,
+    keyword = _ref$keyword === void 0 ? {
+      node: "",
+      value: "",
+      setValue: neetoCist.noop
+    } : _ref$keyword,
+    _ref$setIsPaneOpen = _ref.setIsPaneOpen,
+    setIsPaneOpen = _ref$setIsPaneOpen === void 0 ? ramda.identity : _ref$setIsPaneOpen,
+    _ref$childrenKeys = _ref.childrenKeys,
+    childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys,
+    _ref$defaultSegmentNa = _ref.defaultSegmentName,
+    defaultSegmentName = _ref$defaultSegmentNa === void 0 ? i18next.t("neetoFilters.common.allResults") : _ref$defaultSegmentNa,
+    _ref$segmentsBaseUrl = _ref.segmentsBaseUrl,
+    segmentsBaseUrl = _ref$segmentsBaseUrl === void 0 ? window.location.pathname : _ref$segmentsBaseUrl,
+    customFilters = _ref.customFilters,
+    _ref$showSegmentName = _ref.showSegmentName,
+    showSegmentName = _ref$showSegmentName === void 0 ? true : _ref$showSegmentName;
+  var queryClient = reactQuery.useQueryClient();
+  var _useQueryParams = reactUtils.useQueryParams(),
+    segmentId = _useQueryParams.segmentId;
+  var segmentFormInitialRef = react.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([useSegmentsApi.QUERY_KEYS.SEGMENTS_LIST, entity, ""]) || DEFAULT_SEGMENTS_CACHE;
+  var segment = neetoCist.findById(segmentId, cachedSegments.segments);
+  if (ramda.isEmpty(nonHiddenFilters) && !childrenFiltersApplied) return null;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames("neeto-filters-bar", _defineProperty({}, className, className)),
+      children: /*#__PURE__*/jsxRuntime.jsx(BarComponent, {
+        childrenFiltersApplied: childrenFiltersApplied,
+        childrenKeys: childrenKeys,
+        entity: entity,
+        filters: filters,
+        handleApplyFilters: handleApplyFilters,
+        keywordFilter: keywordFilter,
+        nonHiddenFilters: nonHiddenFilters,
+        setIsPaneOpen: setIsPaneOpen,
+        setIsSavePaneOpen: setIsSavePaneOpen,
+        showSegmentName: showSegmentName
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(index$1.SegmentForm, {
+      childrenKeys: childrenKeys,
+      columns: columns,
+      customFilters: customFilters,
+      defaultSegmentName: defaultSegmentName,
+      filters: filters,
+      handleSubmit: handleSubmit,
+      isEdit: isEdit,
+      isSubmitting: isSubmitting,
+      keywordFilter: keywordFilter,
+      segmentFormInitialRef: segmentFormInitialRef,
+      segmentHelpPopoverProps: segmentHelpPopoverProps,
+      isOpen: neetoCist.isPresent(isSavePaneOpen.action),
+      initialValues: isEdit ? ramda.assoc("filters", [{
+        conditions: filters
+      }], segment) : {
+        name: "",
+        filters: [{
+          conditions: filters
+        }]
+      },
+      onClose: function onClose() {
+        return setIsSavePaneOpen({
+          action: undefined
+        });
+      }
+    })]
+  });
+};
+
+module.exports = Bar;
+//# sourceMappingURL=Bar.js.map