@bigbinary/neeto-filters-frontend 4.0.0 → 4.1.0

package/dist/index-95fe069e.js

@@ -0,0 +1,958 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { findBy, toLabelAndValue, hyphenate, isNotEmpty, isNotPresent, noop, removeBy, replaceBy } from '@bigbinary/neeto-cist';
+import { last, omit, modify, concat, append, isEmpty, isNil, not, mergeDeepRight, equals, prop, pluck } from 'ramda';
+import { T as TIME_OPTIONS, D as DATE_OPTIONS, _ as _defineProperty, c as SINGLE_DATE_OPTIONS, d as SINGLE_TIME_OPTIONS } from './constants-8f6e851e.js';
+import Select from '@bigbinary/neetoui/Select';
+import { useTranslation } from 'react-i18next';
+import { m as isMulti, n as isTreeSelect, D as DEFAULT_HELP_ICON_PROPS, o as DEFAULT_BOOLEAN_OPTIONS, p as buildUpdatedFilter, _ as _slicedToArray, q as isCustomDateRange, M as MULTI_DROPDOWN_RULES, S as SINGLE_DROPDOWN_RULES, T as TIME_FORMAT, r as buildRuleOptions, s as isUndefinedOrEmpty, t as isCustomTimeRange, u as TREE_SELECT_RULES, v as isText, w as isDigit, x as isDate, y as isTime, z as isSingleDate, A as isSingleTime, B as isBoolean, C as isCheckbox } from './utils-9ea34335.js';
+import dayjs from 'dayjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import DatePicker from '@bigbinary/neetoui/DatePicker';
+import TimePicker from '@bigbinary/neetoui/TimePicker';
+import { useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
+import Input from '@bigbinary/neetoui/Input';
+import NeetoUITreeSelect from '@bigbinary/neetoui/TreeSelect';
+
+var buildDropdownValue = function buildDropdownValue(_ref) {
+  var defaultType = _ref.defaultType,
+    filter = _ref.filter,
+    options = _ref.options;
+  if (!filter) return null;
+  if (isMulti(defaultType) || isTreeSelect(defaultType)) {
+    return options.filter(function (_ref2) {
+      var value = _ref2.value;
+      return filter.value.includes(value);
+    });
+  }
+  return findBy({
+    value: filter.value
+  }, options);
+};
+var buildSingleTimeValue = function buildSingleTimeValue(filter) {
+  var _findBy2;
+  if (!filter) return null;
+  return (_findBy2 = findBy({
+    value: filter.value
+  }, TIME_OPTIONS)) !== null && _findBy2 !== void 0 ? _findBy2 : last(TIME_OPTIONS);
+};
+var getOtherProps = function getOtherProps(props) {
+  return omit(["key", "node", "label", "type", "values", "model", "showRuleSelector"], props);
+};
+var buildDropdownOptions = function buildDropdownOptions(_ref3) {
+  var defaultType = _ref3.defaultType,
+    filter = _ref3.filter,
+    options = _ref3.options;
+  options = options.map(modify("value", function (value) {
+    return value === null || value === void 0 ? void 0 : value.toString();
+  }));
+  if (!filter) return options;
+  if (isMulti(defaultType)) {
+    var selectedOptions = filter.value.map(function (value) {
+      return findBy({
+        value: value
+      }, options) || toLabelAndValue(value);
+    });
+    var nonSelectedOptions = options.filter(function (option) {
+      return !filter.value.includes(option.value);
+    });
+    return concat(selectedOptions, nonSelectedOptions);
+  }
+  if (!findBy({
+    value: filter.value
+  }, options)) {
+    return append(toLabelAndValue(filter.value), options);
+  }
+  return options;
+};
+var initializeDateRule = function initializeDateRule(filter) {
+  return filter ? findBy({
+    value: filter === null || filter === void 0 ? void 0 : filter.value
+  }, DATE_OPTIONS) || findDateOption(filter, DATE_OPTIONS) : {};
+};
+var getDateValue = function getDateValue(value, rule) {
+  if (isEmpty(value) || isNil(value)) {
+    return null;
+  }
+  if (rule.value === "custom-date-range") {
+    return value;
+  }
+  return rule.value === "before" ? dayjs(value[1]).add(1, "day") : dayjs(value[0]).subtract(1, "day");
+};
+var findDateOption = function findDateOption(filter, options) {
+  var value = filter.value;
+  var isBeforeOrAfter = dayjs(value[1]).diff(dayjs(value[0]), "year") >= 90;
+  if (not(isBeforeOrAfter)) {
+    return last(options);
+  }
+  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 ? findBy({
+    value: "after"
+  }, options) : findBy({
+    value: "before"
+  }, options);
+};
+var buildDateValues = function buildDateValues(dates, selectedRule) {
+  if (selectedRule.value === "after") {
+    return [dates.add(1, "day"), dates.add(100, "year")];
+  } else if (selectedRule.value === "before") {
+    return [dates.subtract(100, "year"), dates.subtract(1, "day")];
+  }
+  return dates;
+};
+var buildHelpIconProps = function buildHelpIconProps(helpIconProps) {
+  return mergeDeepRight(DEFAULT_HELP_ICON_PROPS, helpIconProps);
+};
+var hasInvalidTimes = function hasInvalidTimes(times) {
+  if (Array.isArray(times)) {
+    return times.some(function (time) {
+      return time.isValid();
+    }) === false;
+  }
+  return !times.isValid();
+};
+var areCustomTimeRangeValuesNotValid = function areCustomTimeRangeValuesNotValid(times) {
+  return !times.every(function (time) {
+    return time.isValid();
+  });
+};
+var isRuleEmpty = function isRuleEmpty(rule) {
+  return equals(rule, "is_unknown");
+};
+
+function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Boolean = function Boolean(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus;
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    label = column.label,
+    values = column.values,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var options = isNil(values) || isEmpty(values) ? DEFAULT_BOOLEAN_OPTIONS : values;
+  var otherProps = getOtherProps(column);
+  var value = buildDropdownValue({
+    defaultType: defaultType,
+    filter: filter,
+    options: options
+  });
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleChange = function handleChange(option) {
+    if (isEmpty(option) || isNil(option)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: option
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-filters-pane-filter__item-wrapper",
+    children: /*#__PURE__*/jsx(Select, _objectSpread$7(_objectSpread$7({
+      autoFocus: autoFocus,
+      label: label,
+      options: options,
+      value: value,
+      isClearable: true
+    }, isNotEmpty(helpIconProps) && {
+      labelProps: {
+        helpIconProps: buildHelpIconProps(helpIconProps)
+      }
+    }), {}, {
+      "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
+      strategy: "fixed",
+      placeholder: t("neetoFilters.messages.selectOption", {
+        resource: label
+      }),
+      onChange: handleChange
+    }, otherProps))
+  });
+};
+var Boolean$1 = /*#__PURE__*/React.memo(Boolean);
+
+function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Datetime = function Datetime(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus;
+  var _useState = useState(initializeDateRule(filter)),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRule = _useState2[0],
+    setSelectedRule = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    label = column.label,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var isDatePickerShown = filter && isCustomDateRange(filter.value);
+  var otherProps = getOtherProps(column);
+  var handleChange = function handleChange(option) {
+    if (isEmpty(option) || isNil(option)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      setSelectedRule({});
+      return;
+    }
+    setSelectedRule(option);
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: option
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var handleDateRangeChange = function handleDateRangeChange(dates) {
+    if (isEmpty(dates) || isNil(dates)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      setSelectedRule({});
+      return;
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {
+        value: pluck("$d", buildDateValues(dates, selectedRule)).map(function (date) {
+          return date.toISOString();
+        })
+      }
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  useEffect(function () {
+    isNil(filter) && setSelectedRule({});
+  }, [filter]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-filters-pane-filter__item-wrapper",
+    children: [/*#__PURE__*/jsx(Select, _objectSpread$6(_objectSpread$6({
+      autoFocus: autoFocus,
+      label: label,
+      isClearable: true,
+      "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
+      options: DATE_OPTIONS,
+      strategy: "fixed",
+      value: selectedRule,
+      placeholder: t("neetoFilters.messages.selectResource", {
+        resource: label
+      })
+    }, isNotEmpty(helpIconProps) && {
+      labelProps: {
+        helpIconProps: buildHelpIconProps(helpIconProps)
+      }
+    }), {}, {
+      onChange: handleChange
+    })), isDatePickerShown && /*#__PURE__*/jsx(DatePicker, _objectSpread$6({
+      "data-cy": "neeto-filters-".concat(hyphenate(key), "-date-range"),
+      getPopupContainer: prop("parentNode"),
+      type: (selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.value) === "custom-date-range" ? "range" : "date",
+      value: getDateValue(filter === null || filter === void 0 ? void 0 : filter.value, selectedRule),
+      onChange: handleDateRangeChange
+    }, otherProps))]
+  });
+};
+var Datetime$1 = /*#__PURE__*/React.memo(Datetime);
+
+function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Dropdown = function Dropdown(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus,
+    filters = _ref.filters;
+  var key = column.key,
+    label = column.label,
+    values = column.values,
+    defaultValue = column.defaultValue,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    _column$showRuleSelec = column.showRuleSelector,
+    showRuleSelector = _column$showRuleSelec === void 0 ? false : _column$showRuleSelec,
+    _column$isClearable = column.isClearable,
+    isClearable = _column$isClearable === void 0 ? true : _column$isClearable,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var otherProps = getOtherProps(column);
+  var options = buildDropdownOptions({
+    defaultType: defaultType,
+    filter: filter,
+    options: values
+  });
+  var dropdownRules = isMulti(defaultType) ? MULTI_DROPDOWN_RULES : SINGLE_DROPDOWN_RULES;
+  var value = buildDropdownValue({
+    defaultType: defaultType,
+    filter: filter,
+    options: options
+  });
+  var _useState = useState(findBy({
+      value: filter === null || filter === void 0 ? void 0 : filter.rule
+    }, dropdownRules) || dropdownRules[0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRule = _useState2[0],
+    setSelectedRule = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var getOption = function getOption(isSelectedRuleEmpty, options, value) {
+    if (isSelectedRuleEmpty) {
+      return isMulti(defaultType) ? [options[0]] : options[0];
+    }
+    return value;
+  };
+  var handleRuleChange = function handleRuleChange(rule) {
+    var isPreviousRuleEmpty = isRuleEmpty(selectedRule.value);
+    var isNewRuleEmpty = isRuleEmpty(rule.value);
+    setSelectedRule(rule);
+    if (isPreviousRuleEmpty || !isNewRuleEmpty && isNotPresent(filter === null || filter === void 0 ? void 0 : filter.value)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      rule: rule.value,
+      option: getOption(isNewRuleEmpty, options, value)
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var handleChange = function handleChange(option) {
+    if (isEmpty(option) || isNil(option)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: option,
+      rule: selectedRule.value
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  useEffect(function () {
+    if (!isEmpty(filters)) return;
+    isRuleEmpty(selectedRule.value) && setSelectedRule(dropdownRules[0]);
+  }, [filters]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-filters-pane-filter__item-wrapper",
+    children: [showRuleSelector && /*#__PURE__*/jsx(Select, {
+      label: label,
+      defaultValue: dropdownRules[0],
+      options: dropdownRules,
+      value: selectedRule,
+      onChange: handleRuleChange
+    }), !isRuleEmpty(selectedRule.value) && /*#__PURE__*/jsx(Select, _objectSpread$5(_objectSpread$5({
+      autoFocus: autoFocus,
+      options: options,
+      value: value,
+      "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
+      isClearable: !defaultValue && isClearable,
+      isMulti: isMulti(defaultType),
+      label: !showRuleSelector && label,
+      strategy: "fixed",
+      placeholder: t("neetoFilters.messages.selectResource", {
+        resource: label
+      })
+    }, isNotEmpty(helpIconProps) && {
+      labelProps: {
+        helpIconProps: buildHelpIconProps(helpIconProps)
+      }
+    }), {}, {
+      onChange: handleChange
+    }, otherProps))]
+  });
+};
+var Dropdown$1 = /*#__PURE__*/React.memo(Dropdown);
+
+function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SingleDatetime = function SingleDatetime(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    filters = _ref.filters,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus;
+  var _useState = useState(function () {
+      return findBy({
+        value: filter === null || filter === void 0 ? void 0 : filter.rule
+      }, SINGLE_DATE_OPTIONS) || SINGLE_DATE_OPTIONS[0];
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRule = _useState2[0],
+    setSelectedRule = _useState2[1];
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    label = column.label,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var otherProps = getOtherProps(column);
+  var datePickerType = selectedRule.value === "between" ? "range" : "date";
+  var value = filter === null || filter === void 0 ? void 0 : filter.value;
+
+  // Reset states when "Clear filters" button is clicked.
+  useEffect(function () {
+    if (!isEmpty(filters)) return;
+    setSelectedRule(SINGLE_DATE_OPTIONS[0]);
+  }, [filters]);
+  var handleRuleChange = function handleRuleChange(ruleOption) {
+    setSelectedRule(ruleOption);
+
+    // Clear value if switched between incompatable types
+    var updateValue = value;
+    if (datePickerType === "range" && ruleOption.value !== "between" || datePickerType === "date" && ruleOption.value === "between") {
+      updateValue = "";
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {},
+      rule: ruleOption.value,
+      value: updateValue
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var handleChange = function handleChange(dates) {
+    if (isEmpty(dates) || isNil(dates)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    var value = datePickerType === "range" ? pluck("$d", dates).map(function (date) {
+      return date.toISOString();
+    }) : dates["$d"];
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {},
+      rule: selectedRule.value,
+      value: value
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-filters-pane-filter__item-wrapper",
+    children: [/*#__PURE__*/jsx(Select, _objectSpread$4(_objectSpread$4({
+      label: label,
+      "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter-rule"),
+      defaultValue: SINGLE_DATE_OPTIONS[0],
+      options: SINGLE_DATE_OPTIONS,
+      strategy: "fixed",
+      value: selectedRule
+    }, isNotEmpty(helpIconProps) && {
+      labelProps: {
+        helpIconProps: buildHelpIconProps(helpIconProps)
+      }
+    }), {}, {
+      onChange: handleRuleChange
+    })), /*#__PURE__*/jsx(DatePicker, _objectSpread$4({
+      autoFocus: autoFocus,
+      value: value,
+      "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
+      getPopupContainer: prop("parentNode"),
+      type: datePickerType,
+      onChange: handleChange
+    }, otherProps))]
+  });
+};
+
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SingleTime = function SingleTime(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    filters = _ref.filters,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus;
+  var _useState = useState(function () {
+      return findBy({
+        value: filter === null || filter === void 0 ? void 0 : filter.rule
+      }, SINGLE_TIME_OPTIONS) || SINGLE_TIME_OPTIONS[0];
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRule = _useState2[0],
+    setSelectedRule = _useState2[1];
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    label = column.label,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var otherProps = getOtherProps(column);
+  var timePickerType = selectedRule.value === "between" ? "range" : "time";
+  var value = filter === null || filter === void 0 ? void 0 : filter.value;
+  useEffect(function () {
+    if (!isEmpty(filters)) return;
+    setSelectedRule(SINGLE_TIME_OPTIONS[0]);
+  }, [filters]);
+  var handleRuleChange = function handleRuleChange(ruleOption) {
+    setSelectedRule(ruleOption);
+
+    // Clear value if switched between incompatible types
+    var updateValue = value;
+    if (timePickerType === "range" && ruleOption.value !== "between" || timePickerType === "time" && ruleOption.value === "between") {
+      updateValue = "";
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {},
+      rule: ruleOption.value,
+      value: updateValue
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var handleChange = function handleChange(times) {
+    if (hasInvalidTimes(times)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    if (timePickerType === "range" && areCustomTimeRangeValuesNotValid(times)) {
+      return;
+    }
+    var value = timePickerType === "range" ? pluck("$d", times).map(function (time) {
+      return time.toISOString();
+    }) : times["$d"].toISOString();
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {},
+      rule: selectedRule.value,
+      value: value
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-filters-pane-filter__item-wrapper",
+    children: [/*#__PURE__*/jsx(Select, _objectSpread$3(_objectSpread$3({
+      label: label,
+      defaultValue: SINGLE_TIME_OPTIONS[0],
+      options: SINGLE_TIME_OPTIONS,
+      strategy: "fixed",
+      value: selectedRule
+    }, isNotEmpty(helpIconProps) && {
+      labelProps: {
+        helpIconProps: buildHelpIconProps(helpIconProps)
+      }
+    }), {}, {
+      onChange: handleRuleChange
+    })), /*#__PURE__*/jsx(TimePicker, _objectSpread$3({
+      autoFocus: autoFocus,
+      value: value,
+      className: "w-full",
+      "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
+      format: TIME_FORMAT,
+      type: timePickerType,
+      onChange: handleChange
+    }, otherProps))]
+  });
+};
+
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Text = function Text(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    filters = _ref.filters,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus,
+    onClose = _ref.onClose;
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    label = column.label,
+    _column$showRuleSelec = column.showRuleSelector,
+    showRuleSelector = _column$showRuleSelec === void 0 ? false : _column$showRuleSelec,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var otherProps = getOtherProps(column);
+  var ruleOptions = buildRuleOptions({
+    defaultType: defaultType
+  });
+  var inputType = defaultType === "text" || defaultType === "custom.text" ? "text" : "number";
+  var _useState = useState(filter === null || filter === void 0 ? void 0 : filter.value),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = useState(function () {
+      return findBy({
+        value: filter === null || filter === void 0 ? void 0 : filter.rule
+      }, ruleOptions) || ruleOptions[0];
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedRule = _useState4[0],
+    setSelectedRule = _useState4[1];
+  var debouncedInputValue = useDebounce(inputValue);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleUpdateAndApplyFilter = function handleUpdateAndApplyFilter() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : debouncedInputValue;
+    var rule = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : selectedRule;
+    if (equals(filter === null || filter === void 0 ? void 0 : filter.value, value) && equals(selectedRule, rule)) return;
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {},
+      rule: rule.value,
+      value: value.trim()
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var handleKeydown = function handleKeydown(e) {
+    if (!(e.key === "Enter")) return;
+    handleUpdateAndApplyFilter(inputValue);
+    onClose();
+  };
+  var handleRuleChange = function handleRuleChange(ruleOption) {
+    setSelectedRule(ruleOption);
+    if (!debouncedInputValue) return;
+    handleUpdateAndApplyFilter(debouncedInputValue, ruleOption);
+  };
+
+  // Reset states when "Clear filters" button is clicked.
+  useEffect(function () {
+    (isEmpty(filters) || isNil(filter)) && setInputValue("");
+  }, [filter]);
+  useEffect(function () {
+    if (!debouncedInputValue) {
+      !isUndefinedOrEmpty(filter) && handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    handleUpdateAndApplyFilter();
+  }, [debouncedInputValue]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-filters-pane-filter__item-wrapper",
+    children: [showRuleSelector && /*#__PURE__*/jsx(Select, _objectSpread$2({
+      label: label,
+      "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter-rule"),
+      defaultValue: ruleOptions[0],
+      options: ruleOptions,
+      strategy: "fixed",
+      value: selectedRule,
+      onChange: handleRuleChange
+    }, isNotEmpty(helpIconProps) && {
+      labelProps: {
+        helpIconProps: buildHelpIconProps(helpIconProps)
+      }
+    })), /*#__PURE__*/jsx(Input, _objectSpread$2(_objectSpread$2({
+      autoFocus: autoFocus,
+      "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
+      label: !showRuleSelector && label,
+      type: inputType,
+      value: inputValue
+    }, isNotEmpty(helpIconProps) && {
+      labelProps: {
+        helpIconProps: buildHelpIconProps(helpIconProps)
+      }
+    }), {}, {
+      placeholder: t("neetoFilters.messages.enterResource", {
+        resource: label
+      }),
+      onChange: function onChange(event) {
+        return setInputValue(event.target.value);
+      },
+      onKeyDown: handleKeydown
+    }, otherProps))]
+  });
+};
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Time = function Time(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus;
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    label = column.label,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var otherProps = getOtherProps(column);
+  var value = buildSingleTimeValue(filter);
+  var isCustomTimeRangeShown = filter && isCustomTimeRange(filter.value);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleChange = function handleChange(option) {
+    if (isEmpty(option) || isNil(option)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: option
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var handleTimeRangeChange = function handleTimeRangeChange(times) {
+    if (hasInvalidTimes(times)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    if (isCustomTimeRangeShown && areCustomTimeRangeValuesNotValid(times)) {
+      return;
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {
+        value: pluck("$d", times).map(function (time) {
+          return time.toISOString();
+        })
+      }
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-filters-pane-filter__item-wrapper",
+    children: [/*#__PURE__*/jsx(Select, _objectSpread$1(_objectSpread$1({
+      autoFocus: autoFocus,
+      label: label,
+      value: value,
+      isClearable: true,
+      "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
+      options: TIME_OPTIONS,
+      strategy: "fixed",
+      placeholder: t("neetoFilters.messages.selectResource", {
+        resource: label
+      })
+    }, isNotEmpty(helpIconProps) && {
+      labelProps: {
+        helpIconProps: buildHelpIconProps(helpIconProps)
+      }
+    }), {}, {
+      onChange: handleChange
+    })), isCustomTimeRangeShown && /*#__PURE__*/jsx(TimePicker, _objectSpread$1({
+      className: "w-full",
+      "data-cy": "neeto-filters-".concat(hyphenate(key), "-date-range"),
+      format: TIME_FORMAT,
+      type: "range",
+      value: filter.value,
+      onChange: handleTimeRangeChange
+    }, otherProps))]
+  });
+};
+var Time$1 = /*#__PURE__*/React.memo(Time);
+
+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 TreeSelect = function TreeSelect(_ref) {
+  var _findBy;
+  var autoFocus = _ref.autoFocus,
+    column = _ref.column,
+    filter = _ref.filter,
+    handleApplyFilter = _ref.handleApplyFilter;
+  var key = column.key,
+    label = column.label,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    defaultValue = column.defaultValue,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps,
+    _column$isClearable = column.isClearable,
+    isClearable = _column$isClearable === void 0 ? true : _column$isClearable,
+    _column$showRuleSelec = column.showRuleSelector,
+    showRuleSelector = _column$showRuleSelec === void 0 ? false : _column$showRuleSelec,
+    options = column.values;
+  var initialRule = (_findBy = findBy({
+    value: filter === null || filter === void 0 ? void 0 : filter.rule
+  }, TREE_SELECT_RULES)) !== null && _findBy !== void 0 ? _findBy : TREE_SELECT_RULES[0];
+  var _useState = useState(initialRule),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRule = _useState2[0],
+    setSelectedRule = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var selectedOption = buildDropdownValue({
+    defaultType: defaultType,
+    filter: filter,
+    options: options
+  });
+  var handleChange = function handleChange(option) {
+    if (isNotPresent(option)) return handleApplyFilter({
+      _delete: true
+    });
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: option,
+      rule: selectedRule.value
+    });
+    return handleApplyFilter(updatedFilter);
+  };
+  var handleRuleChange = function handleRuleChange(rule) {
+    var isPreviousRuleEmpty = isRuleEmpty(selectedRule.value);
+    var isNewRuleEmpty = isRuleEmpty(rule.value);
+    setSelectedRule(rule);
+    if (isPreviousRuleEmpty || !isNewRuleEmpty && isNotPresent(filter === null || filter === void 0 ? void 0 : filter.value)) {
+      return handleApplyFilter({
+        _delete: true
+      });
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: isNewRuleEmpty ? [options[0]] : selectedOption,
+      rule: rule.value
+    });
+    return handleApplyFilter(updatedFilter);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-filters-pane-filter__item-wrapper",
+    children: [showRuleSelector && /*#__PURE__*/jsx(Select, {
+      label: label,
+      defaultValue: TREE_SELECT_RULES[0],
+      options: TREE_SELECT_RULES,
+      value: selectedRule,
+      onChange: handleRuleChange
+    }), !isRuleEmpty(selectedRule.value) &&
+    /*#__PURE__*/
+    // eslint-disable-next-line @bigbinary/neeto/merge-spread-attributes
+    jsx(NeetoUITreeSelect, _objectSpread(_objectSpread({
+      autoFocus: autoFocus,
+      multiple: true,
+      showSearch: true,
+      treeDataSimpleMode: true,
+      allowClear: !defaultValue && isClearable,
+      "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
+      label: !showRuleSelector && label,
+      treeData: options,
+      value: selectedOption,
+      placeholder: t("neetoFilters.messages.selectResource", {
+        resource: label
+      }),
+      onChange: handleChange
+    }, isNotEmpty(helpIconProps) && {
+      labelProps: {
+        helpIconProps: buildHelpIconProps(helpIconProps)
+      }
+    }), getOtherProps(column)))]
+  });
+};
+var TreeSelect$1 = /*#__PURE__*/React.memo(TreeSelect);
+
+var Item = function Item(_ref) {
+  var column = _ref.column,
+    filters = _ref.filters,
+    onChange = _ref.onChange,
+    autoFocus = _ref.autoFocus,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? noop : _ref$onClose;
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType;
+  var filter = useMemo(function () {
+    return findBy({
+      key: key
+    }, filters);
+  }, [filters, key]);
+  var handleApplyFilter = function handleApplyFilter(updatedFilter) {
+    if (updatedFilter._delete) onChange(removeBy({
+      key: key
+    }, filters));else if (!filter) onChange(append(updatedFilter, filters));else onChange(replaceBy({
+      key: key
+    }, updatedFilter, filters));
+  };
+  if (isText(defaultType) || isDigit(defaultType)) {
+    return /*#__PURE__*/jsx(Text, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      filters: filters,
+      handleApplyFilter: handleApplyFilter,
+      onClose: onClose
+    });
+  }
+  if (isDate(defaultType)) {
+    return /*#__PURE__*/jsx(Datetime$1, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      handleApplyFilter: handleApplyFilter
+    });
+  }
+  if (isTime(defaultType)) {
+    return /*#__PURE__*/jsx(Time$1, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      handleApplyFilter: handleApplyFilter
+    });
+  }
+  if (isSingleDate(defaultType)) {
+    return /*#__PURE__*/jsx(SingleDatetime, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      filters: filters,
+      handleApplyFilter: handleApplyFilter
+    });
+  }
+  if (isSingleTime(defaultType)) {
+    return /*#__PURE__*/jsx(SingleTime, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      filters: filters,
+      handleApplyFilter: handleApplyFilter
+    });
+  }
+  if (isBoolean(defaultType) || isCheckbox(defaultType)) {
+    return /*#__PURE__*/jsx(Boolean$1, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      handleApplyFilter: handleApplyFilter
+    });
+  }
+  if (isTreeSelect(defaultType)) {
+    return /*#__PURE__*/jsx(TreeSelect$1, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      handleApplyFilter: handleApplyFilter
+    });
+  }
+  return /*#__PURE__*/jsx(Dropdown$1, {
+    autoFocus: autoFocus,
+    column: column,
+    filter: filter,
+    filters: filters,
+    handleApplyFilter: handleApplyFilter
+  });
+};
+
+export { Item as I, isRuleEmpty as i };
+//# sourceMappingURL=index-95fe069e.js.map