@1771technologies/lytenyte-pro 0.0.39

package/dist/filter-manager.js

@@ -0,0 +1,1056 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, createContext, useContext, useMemo, forwardRef } from "react";
+import { I as Input, u as useGrid, C as Checkbox, G as GridProvider } from "./use-grid-DKvzGZWc.js";
+import { S as Select } from "./select-C6xOZZLq.js";
+import "@1771technologies/react-sizer";
+import "@1771technologies/react-utils";
+import "@1771technologies/grid-provider";
+import { clsx } from "@1771technologies/js-utils";
+import "@1771technologies/react-dragon";
+import "@1771technologies/grid-core";
+function isFilterComplete(c) {
+  if (!c) return false;
+  if (c.kind === "text") {
+    return c.operator;
+  }
+  if (c.kind === "number") {
+    return c.operator && typeof c.value === "number";
+  }
+  if (c.operator === "all_dates_in_the_period") return c.datePeriod;
+  if (c.operator === "after" || c.operator === "before" || c.operator === "equal") return c.value;
+  return !!c.operator;
+}
+function flattenCombinedFilter(c) {
+  const stack = [c];
+  const flat = [];
+  while (stack.length) {
+    const f = stack.pop();
+    flat.push([f.left, f.operator]);
+    flat.push([f.right, null]);
+  }
+  return flat;
+}
+function combinedToFlat(filter, column) {
+  const columnId = column.id;
+  let flat;
+  if (!filter) {
+    flat = [
+      [{ columnId, kind: column.type === "complex" ? "text" : column.type ?? "text" }, null]
+    ];
+  } else if (filter.kind === "number" || filter.kind === "text" || filter.kind === "date") {
+    flat = [
+      [filter, "and"],
+      [{ columnId, kind: filter.kind }, null]
+    ];
+  } else {
+    flat = flattenCombinedFilter(filter);
+  }
+  return flat;
+}
+function useSimpleFilters(api, column, showConditionalWhenFilterValid) {
+  const isPivot = api.columnIsPivot(column);
+  const state = api.getState();
+  const filterModel = state.filterModel.use();
+  const pivotFilterModel = state.internal.columnPivotFilterModel.use();
+  const filters = isPivot ? pivotFilterModel : filterModel;
+  const [flatFilters, setFlatFilters] = useState(() => {
+    const columnId = column.id;
+    const filter = filters[columnId];
+    return combinedToFlat(filter?.simple, column);
+  });
+  useEffect(() => {
+    const columnId = column.id;
+    const filter = filters[columnId];
+    setFlatFilters(combinedToFlat(filter?.simple, column));
+  }, [column, filters]);
+  const onFilterChange = useCallback(
+    (flat) => {
+      if (flat.length === 1 && isFilterComplete(flat[0][0]) && showConditionalWhenFilterValid) {
+        const next = [
+          [flat[0][0], "and"],
+          [{ columnId: column.id, kind: flat[0][0].kind }, null]
+        ];
+        setFlatFilters(next);
+        return;
+      }
+      setFlatFilters(flat);
+    },
+    [column.id, showConditionalWhenFilterValid]
+  );
+  return { flatFilters, onFilterChange, filters, isPivot };
+}
+const context$2 = createContext(null);
+function FilterManagerStateProvider(props) {
+  return /* @__PURE__ */ jsx(context$2.Provider, { value: props.value, children: props.children });
+}
+const useFilterManagerState = () => useContext(context$2);
+function useInFilter(api, column) {
+  const isPivot = api.columnIsPivot(column);
+  const state = api.getState();
+  const filterModel = state.filterModel.use();
+  const pivotFilterModel = state.internal.columnPivotFilterModel.use();
+  const filters = isPivot ? pivotFilterModel : filterModel;
+  const thisFilter = useMemo(() => {
+    const filter = filters[column.id]?.set;
+    if (!filter) return null;
+    return filter;
+  }, [column.id, filters]);
+  const [values, setValues] = useState(() => thisFilter ? new Set(thisFilter.set) : null);
+  useEffect(() => {
+    setValues(() => {
+      const filter = filters[column.id]?.set;
+      if (!filter) return null;
+      return new Set(filter ? new Set(filter.set) : null);
+    });
+  }, [column.id, filters]);
+  return { values, setValues };
+}
+const context$1 = createContext(
+  {}
+);
+function SimpleFilterRoot(props) {
+  const { flatFilters, onFilterChange } = useFilterManagerState();
+  const flatFilter = flatFilters[props.isAdditional ? 1 : 0];
+  const semiFilter = flatFilter?.[0];
+  const onChange = useCallback(
+    (filter) => {
+      const next = [...flatFilters];
+      const logical = flatFilter[1];
+      next[props.isAdditional ? 1 : 0] = [filter, logical];
+      onFilterChange(next);
+    },
+    [flatFilter, flatFilters, onFilterChange, props.isAdditional]
+  );
+  const value = useMemo(() => {
+    return { value: semiFilter, onChange };
+  }, [onChange, semiFilter]);
+  if (!flatFilter) return null;
+  return /* @__PURE__ */ jsx(context$1.Provider, { value, children: props.children });
+}
+const useSimpleFilterRoot = () => useContext(context$1);
+function useDateFilterCallbacks() {
+  const { value, onChange: onFilterChange } = useSimpleFilterRoot();
+  const onChange = useCallback(
+    (item) => {
+      const currentOperator = value.operator;
+      if (currentOperator === item.value) return;
+      const nextFilter = {
+        kind: "date",
+        columnId: value.columnId,
+        operator: item.value,
+        value: "",
+        datePeriod: null
+      };
+      onFilterChange(nextFilter);
+    },
+    [onFilterChange, value.columnId, value.operator]
+  );
+  const onValueChange = useCallback(
+    (c) => {
+      const current = value.value;
+      if (current === c) return;
+      const nextFilter = {
+        kind: "date",
+        columnId: value.columnId,
+        operator: value.operator,
+        value: c,
+        datePeriod: null
+      };
+      onFilterChange(nextFilter);
+    },
+    [onFilterChange, value.columnId, value.operator, value.value]
+  );
+  const onDatePeriodChange = useCallback(
+    (c) => {
+      const current = value.datePeriod;
+      if (current === c) return;
+      const nextFilter = {
+        kind: "date",
+        columnId: value.columnId,
+        operator: value.operator,
+        value,
+        datePeriod: c
+      };
+      onFilterChange(nextFilter);
+    },
+    [onFilterChange, value]
+  );
+  return { onChange, onValueChange, onDatePeriodChange };
+}
+const operatorsWithDate$1 = ["equal", "after", "before"];
+function DateOperatorSelect() {
+  const { value: v } = useSimpleFilterRoot();
+  const s = useDateFilterCallbacks();
+  const filter = v;
+  const value = useMemo(() => {
+    if (!filter.operator) return null;
+    return { label: valueToLabel$1[filter.operator], value: filter.operator };
+  }, [filter.operator]);
+  const operator = filter.operator;
+  const fullSpan = operator && !operatorsWithDate$1.includes(operator) && operator !== "all_dates_in_the_period";
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      placeholder: "Select",
+      "data-full-span": fullSpan,
+      options: dateItems,
+      selected: value,
+      onSelect: s.onChange
+    }
+  );
+}
+const valueToLabel$1 = {
+  equal: "Equal",
+  before: "Before",
+  after: "After",
+  tomorrow: "Tomorrow",
+  today: "Today",
+  yesterday: "Yesterday",
+  next_week: "Next Week",
+  this_week: "This Week",
+  last_week: "Last Week",
+  next_month: "Next Month",
+  this_month: "This Month",
+  last_month: "Last Month",
+  next_quarter: "Next Quarter",
+  this_quarter: "This Quarter",
+  last_quarter: "Last Quarter",
+  next_year: "Next Year",
+  this_year: "This Year",
+  last_year: "Last Year",
+  ytd: "Year To Date",
+  all_dates_in_the_period: "All Dates In Period"
+};
+const dateItems = [
+  { label: "Equal", value: "equal" },
+  { label: "Before", value: "before" },
+  { label: "After", value: "after" },
+  { label: "Tomorrow", value: "tomorrow" },
+  { label: "Today", value: "today" },
+  { label: "Yesterday", value: "yesterday" },
+  { label: "Next Week", value: "next_week" },
+  { label: "This Week", value: "this_week" },
+  { label: "Last Week", value: "last_week" },
+  { label: "Next Month", value: "next_month" },
+  { label: "This Month", value: "this_month" },
+  { label: "Last Month", value: "last_month" },
+  { label: "Next Quarter", value: "next_quarter" },
+  { label: "This Quarter", value: "this_quarter" },
+  { label: "Last Quarter", value: "last_quarter" },
+  { label: "Next Year", value: "next_year" },
+  { label: "This Year", value: "this_year" },
+  { label: "Last Year", value: "last_year" },
+  { label: "Year To Date", value: "ytd" },
+  { label: "All Dates In Period", value: "all_dates_in_the_period" }
+];
+function useNumberFilterCallbacks() {
+  const { value, onChange: onFilterChange } = useSimpleFilterRoot();
+  const onChange = useCallback(
+    (c) => {
+      const current = value.operator;
+      if (current === c.value) return;
+      const nextFilter = {
+        kind: "number",
+        columnId: value.columnId,
+        operator: c.value,
+        value: ""
+      };
+      onFilterChange(nextFilter);
+    },
+    [onFilterChange, value.columnId, value.operator]
+  );
+  const onValueChange = useCallback(
+    (c) => {
+      const current = value.value;
+      if (current === c) return;
+      const nextFilter = {
+        kind: "number",
+        columnId: value.columnId,
+        operator: value.operator,
+        value: c
+      };
+      onFilterChange(nextFilter);
+    },
+    [onFilterChange, value.columnId, value.operator, value.value]
+  );
+  return { onChange, onValueChange };
+}
+function NumberOperatorSelect() {
+  const { value: v } = useSimpleFilterRoot();
+  const s = useNumberFilterCallbacks();
+  const filter = v;
+  const value = useMemo(() => {
+    if (!filter.operator) return null;
+    return { label: valueToLabel[filter.operator], value: filter.operator };
+  }, [filter.operator]);
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      selected: value,
+      options: selectItems$1,
+      onSelect: s.onChange,
+      placeholder: "Select..."
+    }
+  );
+}
+const valueToLabel = {
+  equal: "Equal",
+  not_equal: "Not Equal",
+  greater_than: "Greater Than",
+  greater_than_or_equal: "Greater Than Or Equal To",
+  less_than: "Less Than",
+  less_than_or_equal: "Less Than Or Equal To"
+};
+const selectItems$1 = [
+  { value: "equal", label: "Equal" },
+  { value: "not_equal", label: "Not Equal" },
+  { value: "greater_than", label: "Greater Than" },
+  { value: "greater_than_or_equal", label: "Greater Than Or Equal To" },
+  { value: "less_than", label: "Less Than" },
+  { value: "less_than_or_equal", label: "Less Than Or Equal To" }
+];
+function useTextFilterCallbacks() {
+  const { value, onChange: onFilterChange } = useSimpleFilterRoot();
+  const onChange = useCallback(
+    (c) => {
+      const current = value.operator;
+      if (current === c.value) return;
+      const nextFilter = {
+        kind: "text",
+        columnId: value.columnId,
+        operator: c.value,
+        value: ""
+      };
+      onFilterChange(nextFilter);
+    },
+    [onFilterChange, value.columnId, value.operator]
+  );
+  const onValueChange = useCallback(
+    (c) => {
+      const current = value.value;
+      if (current === c) return;
+      const nextFilter = {
+        kind: "text",
+        columnId: value.columnId,
+        operator: value.operator,
+        value: c
+      };
+      onFilterChange(nextFilter);
+    },
+    [onFilterChange, value.columnId, value.operator, value.value]
+  );
+  return { onChange, onValueChange };
+}
+function TextOperatorSelect() {
+  const { value: v } = useSimpleFilterRoot();
+  const s = useTextFilterCallbacks();
+  const filter = v;
+  const value = useMemo(() => {
+    if (!filter.operator) return null;
+    return { label: valueToToLabel[filter.operator], value: filter.operator };
+  }, [filter.operator]);
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      placeholder: "Select...",
+      options: selectItems,
+      selected: value,
+      onSelect: s.onChange
+    }
+  );
+}
+const valueToToLabel = {
+  equal: "Equal",
+  not_equal: "Not Equal",
+  begins_with: "Begins With",
+  not_begins_with: "Does Not Begin With",
+  ends_with: "Ends With",
+  not_ends_with: "Does Not End With",
+  contains: "Contains",
+  not_contains: "Does Not Contain"
+};
+const selectItems = [
+  { value: "equal", label: "Equal" },
+  { value: "not_equal", label: "Not Equal" },
+  { value: "begins_with", label: "Begins With" },
+  { value: "not_begins_with", label: "Does Not Begin With" },
+  { value: "ends_with", label: "Ends With" },
+  { value: "not_ends_with", label: "Does Not End With" },
+  { value: "contains", label: "Contains" },
+  { value: "not_contains", label: "Does Not Contain" }
+];
+function SimpleFilterOperator() {
+  const p = useSimpleFilterRoot();
+  const kind = p.value.kind;
+  if (kind === "date") {
+    return /* @__PURE__ */ jsx(DateOperatorSelect, {});
+  }
+  if (kind === "number") {
+    return /* @__PURE__ */ jsx(NumberOperatorSelect, {});
+  }
+  if (kind === "text") {
+    return /* @__PURE__ */ jsx(TextOperatorSelect, {});
+  }
+  return null;
+}
+const operatorsWithDate = ["equal", "after", "before"];
+function DateValue() {
+  const { value } = useSimpleFilterRoot();
+  const filter = value;
+  const operator = filter.operator;
+  const { onValueChange, onDatePeriodChange } = useDateFilterCallbacks();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !operator && /* @__PURE__ */ jsx(Input, { disabled: true, type: "date" }),
+    operator && operatorsWithDate.includes(operator) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        small: true,
+        type: "date",
+        onChange: (e) => onValueChange(e.target.value),
+        value: filter.value ?? ""
+      }
+    ) }),
+    operator === "all_dates_in_the_period" && /* @__PURE__ */ jsx(
+      DatePeriodSelect,
+      {
+        value: filter.datePeriod ?? null,
+        onAllDatePeriodSelect: onDatePeriodChange
+      }
+    )
+  ] });
+}
+function DatePeriodSelect({ value, onAllDatePeriodSelect }) {
+  const item = useMemo(() => {
+    if (!value) return null;
+    return { label: allDatePeriodValueToLabel[value], value };
+  }, [value]);
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      options: allDatePeriodOptions,
+      selected: item,
+      placeholder: "Select...",
+      onSelect: (v) => {
+        onAllDatePeriodSelect(v.value);
+      }
+    }
+  );
+}
+const allDatePeriodValueToLabel = {
+  "quarter-1": "Quarter 1",
+  "quarter-2": "Quarter 2",
+  "quarter-3": "Quarter 3",
+  "quarter-4": "Quarter 4",
+  january: "January",
+  february: "February",
+  march: "March",
+  april: "April",
+  may: "May",
+  june: "June",
+  july: "July",
+  august: "August",
+  september: "September",
+  october: "October",
+  november: "November",
+  december: "December"
+};
+const allDatePeriodOptions = [
+  { label: "Quarter 1", value: "quarter-1" },
+  { label: "Quarter 2", value: "quarter-2" },
+  { label: "Quarter 3", value: "quarter-3" },
+  { label: "Quarter 4", value: "quarter-4" },
+  { label: "January", value: "january" },
+  { label: "February", value: "february" },
+  { label: "March", value: "march" },
+  { label: "April", value: "april" },
+  { label: "May", value: "may" },
+  { label: "June", value: "june" },
+  { label: "July", value: "july" },
+  { label: "August", value: "august" },
+  { label: "September", value: "september" },
+  { label: "October", value: "october" },
+  { label: "November", value: "november" },
+  { label: "December", value: "december" }
+];
+function NumberValue() {
+  const { value } = useSimpleFilterRoot();
+  const filter = value;
+  const operator = filter.operator;
+  const { onValueChange } = useNumberFilterCallbacks();
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      small: true,
+      type: "number",
+      disabled: !operator,
+      value: filter.value ?? "",
+      onChange: (e) => onValueChange(Number.parseFloat(e.target.value))
+    }
+  );
+}
+function TextValue() {
+  const { value } = useSimpleFilterRoot();
+  const filter = value;
+  const operator = filter.operator;
+  const { onValueChange } = useTextFilterCallbacks();
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      small: true,
+      disabled: !operator,
+      value: filter.value ?? "",
+      onChange: (e) => onValueChange(e.target.value)
+    }
+  );
+}
+function SimpleFilterValue() {
+  const p = useSimpleFilterRoot();
+  const kind = p.value.kind;
+  if (kind === "date") {
+    return /* @__PURE__ */ jsx(DateValue, {});
+  }
+  if (kind === "number") {
+    return /* @__PURE__ */ jsx(NumberValue, {});
+  }
+  if (kind === "text") {
+    return /* @__PURE__ */ jsx(TextValue, {});
+  }
+  return null;
+}
+function Radio({
+  onCheckChange,
+  checked,
+  disabled,
+  ...other
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "lng1771-radio",
+        !disabled && "lng1771-radio--hover",
+        disabled && "lng1771-radio--disabled",
+        checked && "lng1771-radio--checked",
+        disabled && checked && "lng1771-radio--checked-disabled"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "radio",
+          checked,
+          onChange: (e) => onCheckChange?.(e.target.checked, e),
+          ...other
+        }
+      )
+    }
+  );
+}
+const SimpleFilterAdditionalSwitch = forwardRef(function SimpleFilterAdditionalSwitch2(props, ref) {
+  const { flatFilters, onFilterChange } = useFilterManagerState();
+  const value = flatFilters[0][1];
+  if (!value) return null;
+  const onChange = (c) => {
+    const next = [...flatFilters];
+    next[0] = [flatFilters[0][0], c];
+    onFilterChange(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { ...props, className: clsx("lng1771-filter-manager__switch", props.className), ref, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "lng1771-filter-manager__switch-item",
+          "lng1771-filter-manager__switch-item--end"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Radio, { checked: value === "and", onCheckChange: () => onChange("and") }),
+          "And"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: clsx("lng1771-filter-manager__switch-item"), children: [
+      /* @__PURE__ */ jsx(Radio, { checked: value === "or", onCheckChange: () => onChange("or") }),
+      "Or"
+    ] })
+  ] });
+});
+function flatToCombined(flat) {
+  const [left, right] = flat;
+  const leftFilter = isFilterComplete(left?.[0]) ? left?.[0] : null;
+  const rightFilter = isFilterComplete(right?.[0]) ? right?.[0] : null;
+  const operator = left?.[1];
+  if (!leftFilter && rightFilter) return { ...rightFilter };
+  if (leftFilter && !rightFilter) return { ...leftFilter };
+  if (!leftFilter && !rightFilter) return null;
+  const combined = {
+    kind: "combined",
+    left: leftFilter,
+    right: rightFilter,
+    operator
+  };
+  return combined;
+}
+const FilterManagerApplyButton = forwardRef(function FilterManagerApplyButton2({ className, onClick, children, ...props }, ref) {
+  const { api } = useGrid();
+  const { flatFilters, column, isPivot, filters, inFilterValue } = useFilterManagerState();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      className: clsx("lng1771-filter-manager__button", className),
+      onClick: (ev) => {
+        const combined = flatToCombined(flatFilters);
+        const newFilters = { ...filters };
+        if (combined) {
+          newFilters[column.id] ??= {};
+          newFilters[column.id].simple = combined;
+        }
+        if (inFilterValue) {
+          newFilters[column.id] ??= {};
+          newFilters[column.id].set = inFilterValue?.size ? {
+            columnId: column.id,
+            kind: "in",
+            operator: "notin",
+            set: inFilterValue
+          } : null;
+        }
+        if (isPivot) {
+          api.columnPivotSetFilterModel(newFilters);
+        } else {
+          api.getState().filterModel.set(newFilters);
+        }
+        onClick?.(ev);
+      },
+      ref,
+      children: children ? children : "Apply"
+    }
+  );
+});
+const FilterManagerClearButton = forwardRef(function FilterManagerClearButton2({ className, onClick, children, ...props }, ref) {
+  const { api } = useGrid();
+  const { filters, column, isPivot } = useFilterManagerState();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      className: clsx("lng1771-filter-manager__button", className),
+      onClick: (ev) => {
+        const newFilters = { ...filters };
+        delete newFilters[column.id];
+        if (isPivot) {
+          api.columnPivotSetFilterModel(newFilters);
+        } else {
+          api.getState().filterModel.set(newFilters);
+        }
+        onClick?.(ev);
+      },
+      ref,
+      children: children ? children : "Clear"
+    }
+  );
+});
+function useInFilterItemLoader(getTreeFilterItems) {
+  const [treeFilterItems, setTreeFilterItems] = useState([]);
+  const [hasError, setError] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const loadItems = useCallback(() => {
+    if (!getTreeFilterItems) return [];
+    const items = getTreeFilterItems();
+    if ("then" in items) {
+      setIsLoading(true);
+      items.then((res) => {
+        setTreeFilterItems(res);
+      }).catch((error) => {
+        console.error(error);
+        setError(true);
+      }).finally(() => {
+        setIsLoading(false);
+      });
+    } else {
+      setTreeFilterItems(items);
+    }
+  }, [getTreeFilterItems]);
+  useEffect(() => {
+    loadItems();
+  }, [loadItems]);
+  return { isLoading, hasError, treeFilterItems, retry: loadItems };
+}
+const context = createContext(null);
+function InFilterRoot(props) {
+  const grid = useGrid();
+  const { column } = useFilterManagerState();
+  const getItems = useCallback(() => {
+    return grid.api.columnInFilterItems(column);
+  }, [column, grid.api]);
+  const state = useInFilterItemLoader(getItems);
+  return /* @__PURE__ */ jsx(context.Provider, { value: state, children: props.children });
+}
+const useInFilterState = () => useContext(context);
+const InFilterError = forwardRef(function InFilterError2({ children, className, ...props }, ref) {
+  const { retry, hasError } = useInFilterState();
+  if (!hasError) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: clsx("lng1771-filter-manager__in-filter-error", className),
+      ref,
+      children: children?.(retry)
+    }
+  );
+});
+const InFilterLoading = forwardRef(
+  function InFilterLoading2({ children, className, ...props }, ref) {
+    const { isLoading } = useInFilterState();
+    if (!isLoading) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        className: clsx("lng1771-filter-manager__in-filter-loading", className),
+        ref,
+        children
+      }
+    );
+  }
+);
+function getChildValues(t) {
+  const stack = [...t.children];
+  const values = /* @__PURE__ */ new Set();
+  while (stack.length) {
+    const t2 = stack.pop();
+    if (t2.kind === "leaf") values.add(t2.value);
+    else stack.push(...t2.children);
+  }
+  return values;
+}
+function flattenTreeItems(items, expansions) {
+  const stack = [...items.map((c) => [c, 0])];
+  const flat = [];
+  while (stack.length) {
+    const [item, depth] = stack.shift();
+    if (item.kind === "parent" && expansions.has(item.label)) {
+      const children = item.children.map((c) => [c, depth + 1]);
+      stack.unshift(...children);
+    }
+    flat.push({ ...item, depth });
+  }
+  return flat;
+}
+function InFilterViewport({
+  itemHeight,
+  viewportHeight,
+  searchQuery
+}) {
+  const { treeFilterItems, hasError, isLoading } = useInFilterState();
+  const { inFilterValue, setInFilterValue } = useFilterManagerState();
+  if (hasError || isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    InFilterViewportImpl,
+    {
+      treeItems: treeFilterItems,
+      itemHeight: itemHeight ?? 28,
+      viewportHeight: viewportHeight ?? 300,
+      filterValue: searchQuery ?? "",
+      onValuesChange: setInFilterValue,
+      values: inFilterValue
+    }
+  );
+}
+function InFilterViewportImpl({
+  treeItems,
+  itemHeight,
+  viewportHeight,
+  values,
+  onValuesChange,
+  filterValue
+}) {
+  const [rowStart, setRowStart] = useState(0);
+  const [rowEnd, setRowEnd] = useState(0);
+  const [vp, setVp] = useState(null);
+  const [expansions, setExpansions] = useState(() => /* @__PURE__ */ new Set());
+  const unfilteredFlat = useMemo(() => {
+    const selectAll = {
+      kind: "leaf",
+      label: "Select All",
+      value: null
+    };
+    return [selectAll, ...flattenTreeItems(treeItems, expansions)];
+  }, [expansions, treeItems]);
+  const flat = useMemo(() => {
+    if (!filterValue) return unfilteredFlat;
+    return unfilteredFlat.filter(
+      (c) => c.label.toLocaleLowerCase().includes(filterValue.toLocaleLowerCase())
+    );
+  }, [filterValue, unfilteredFlat]);
+  const allItemsAreLeafs = useMemo(() => {
+    return flat.every((c) => c.kind === "leaf");
+  }, [flat]);
+  const handleVpChange = useCallback(() => {
+    if (!vp) return;
+    const scrollTop = vp.scrollTop;
+    const height = vp.clientHeight;
+    const rowStart2 = Math.max(Math.floor(scrollTop / itemHeight) - 10, 0);
+    const rowEnd2 = Math.min(rowStart2 + Math.ceil(height / itemHeight) + 10, flat.length);
+    setRowStart(rowStart2);
+    setRowEnd(rowEnd2);
+  }, [flat.length, itemHeight, vp]);
+  useEffect(() => {
+    handleVpChange();
+  }, [expansions, handleVpChange]);
+  const indices = useMemo(() => {
+    return Array.from({ length: rowEnd - rowStart }, (_, i) => i + rowStart);
+  }, [rowEnd, rowStart]);
+  const isSelected = (c) => {
+    if (values === null) return true;
+    if (c.label === "Select All" && c.kind === "leaf" && c.value === null) {
+      return false;
+    }
+    if (c.kind === "leaf") return !values.has(c.value);
+    return c.children.every((c2) => isSelected(c2));
+  };
+  const isIndeterminate = (c) => {
+    if (c.label === "Select All" && c.kind === "leaf" && c.value === null) {
+      const allItems = new Set(
+        treeItems.flatMap(
+          (item) => item.kind === "parent" ? [...getChildValues(item)] : item.value
+        )
+      );
+      return values ? values.size > 0 && values.size !== allItems.size : false;
+    }
+    if (values === null) return false;
+    if (c.kind === "leaf") return false;
+    const childSet = [...getChildValues(c)];
+    return childSet.some((c2) => values.has(c2)) && !childSet.every((c2) => values.has(c2));
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setVp,
+      onScroll: handleVpChange,
+      style: {
+        height: viewportHeight,
+        maxHeight: viewportHeight,
+        minHeight: viewportHeight,
+        overflowY: "auto",
+        overflowX: "hidden",
+        paddingBlock: 4,
+        boxSizing: "border-box",
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsx("div", { style: { height: itemHeight * flat.length }, children: indices.map((c, i) => {
+        const item = flat[c];
+        if (!item) return null;
+        const selected = isSelected(item);
+        const indeterminate = isIndeterminate(item);
+        const handleChange = () => {
+          const allItems = new Set(
+            treeItems.flatMap(
+              (item2) => item2.kind === "parent" ? [...getChildValues(item2)] : item2.value
+            )
+          );
+          if (item.label === "Select All" && item.kind === "leaf" && item.value === null) {
+            if (!values) {
+              onValuesChange(allItems);
+            } else {
+              onValuesChange(null);
+            }
+            return;
+          }
+          if (!values) {
+            const newSet2 = item.kind === "parent" ? getChildValues(item) : /* @__PURE__ */ new Set([item.value]);
+            onValuesChange(newSet2);
+            return;
+          }
+          if (item.kind === "leaf") {
+            const newSet2 = new Set(values);
+            if (newSet2.has(item.value)) newSet2.delete(item.value);
+            else newSet2.add(item.value);
+            onValuesChange(newSet2.size ? newSet2 : null);
+            return;
+          }
+          const newSet = new Set(values);
+          const nextValues = getChildValues(item);
+          if (indeterminate || !selected) {
+            for (const i2 of nextValues) {
+              newSet.delete(i2);
+            }
+          } else {
+            for (const i2 of nextValues) {
+              newSet.add(i2);
+            }
+          }
+          onValuesChange(newSet.size ? newSet : null);
+        };
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            tabIndex: i === 0 ? 0 : -1,
+            className: "lng1771-filter-manager__in-filter-tree",
+            onClick: () => {
+              handleChange();
+            },
+            onKeyDown: (e) => {
+              if (e.key === "ArrowUp") {
+                const prev = e.currentTarget.previousElementSibling;
+                if (prev) {
+                  prev.focus();
+                  e.preventDefault();
+                }
+              } else if (e.key === "ArrowDown") {
+                const next = e.currentTarget.nextElementSibling;
+                if (next) {
+                  next.focus();
+                  e.preventDefault();
+                }
+              } else if (e.key === "Enter") {
+                handleChange();
+              } else if (e.key === " ") {
+                if (item.kind === "parent") {
+                  setExpansions((prev) => {
+                    const next = new Set(prev);
+                    if (prev.has(item.label)) {
+                      next.delete(item.label);
+                    } else next.add(item.label);
+                    return next;
+                  });
+                } else {
+                  handleChange();
+                }
+                e.preventDefault();
+              }
+            },
+            style: {
+              height: itemHeight,
+              minHeight: itemHeight,
+              maxHeight: itemHeight,
+              paddingInlineStart: (item.depth ?? 0) * 16 + 8,
+              transform: `translate3d(0px, ${itemHeight * c}px, 0px)`
+            },
+            children: [
+              item.kind !== "parent" ? allItemsAreLeafs ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx("div", { style: { width: 20, height: 20 }, role: "presentation" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                expansions.has(item.label) && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    style: {
+                      width: 20,
+                      height: 20,
+                      color: "var(--lng1771-gray-70)",
+                      fontSize: 20
+                    },
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      event.preventDefault();
+                      setExpansions((prev) => {
+                        const next = new Set(prev);
+                        if (prev.has(item.label)) {
+                          next.delete(item.label);
+                        } else next.add(item.label);
+                        return next;
+                      });
+                    },
+                    children: /* @__PURE__ */ jsx("span", { style: { position: "relative", top: "-2px", insetInlineStart: "1px" }, children: "›" })
+                  }
+                ),
+                !expansions.has(item.label) && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    style: {
+                      width: 20,
+                      height: 20,
+                      color: "var(--lng1771-gray-70)",
+                      fontSize: 20
+                    },
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      event.preventDefault();
+                      setExpansions((prev) => {
+                        const next = new Set(prev);
+                        if (prev.has(item.label)) {
+                          next.delete(item.label);
+                        } else next.add(item.label);
+                        return next;
+                      });
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          position: "relative",
+                          top: "-2px",
+                          insetInlineStart: "1px"
+                        },
+                        children: "›"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  tabIndex: -1,
+                  isChecked: selected || indeterminate,
+                  isDeterminate: indeterminate,
+                  onCheckChange: () => {
+                    handleChange();
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: item.label })
+            ]
+          },
+          c
+        );
+      }) })
+    }
+  );
+}
+const InFilterContainer = forwardRef(
+  function InFilterContainer2(props, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        className: clsx("lng1771-filter-manager__in-filter-container", props.className),
+        ref
+      }
+    );
+  }
+);
+function Root({ grid, column, children }) {
+  const simpleState = useSimpleFilters(grid.api, column, true);
+  const inFilterState = useInFilter(grid.api, column);
+  return /* @__PURE__ */ jsx(GridProvider, { value: grid, children: /* @__PURE__ */ jsx(
+    FilterManagerStateProvider,
+    {
+      value: useMemo(
+        () => ({
+          ...simpleState,
+          column,
+          inFilterValue: inFilterState.values,
+          setInFilterValue: inFilterState.setValues
+        }),
+        [column, inFilterState.setValues, inFilterState.values, simpleState]
+      ),
+      children
+    }
+  ) });
+}
+const FilterManager = {
+  Root,
+  SimpleRoot: SimpleFilterRoot,
+  SimpleOperator: SimpleFilterOperator,
+  SimpleValue: SimpleFilterValue,
+  SimpleSwitch: SimpleFilterAdditionalSwitch,
+  InFilterRoot,
+  InFilterContainer,
+  InFilterError,
+  InFilterLoading,
+  InFilterViewport,
+  ApplyButton: FilterManagerApplyButton,
+  ClearButton: FilterManagerClearButton
+};
+export {
+  FilterManager
+};