@1771technologies/lytenyte-pro
Version:
1,058 lines (1,057 loc) • 33.9 kB
JavaScript
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { useState, useEffect, useCallback, createContext, useContext, useMemo, forwardRef } from "react";
import { c as useGrid, G as GridProvider } from "./useScrollLock-D4UY33Sb.js";
import { S as Select } from "./select-Db5ksjoS.js";
import { I as Input, C as Checkbox } from "./drag-store-BMsDBUy_.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 || !filter.set.size) 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 || filters[column.id]?.set) {
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
};