@bigbinary/neeto-filters-frontend 4.0.0 → 4.1.0

package/dist/Bar.js

@@ -0,0 +1,667 @@
+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;
+  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({
+      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,
+    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
+    }),
+    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