@1771technologies/lytenyte-pro 1.0.15 → 1.0.17-dev.0

package/dist/__play__/filter-select/filter-select.play.d.ts

@@ -0,0 +1,4 @@
+import "../../../main.css";
+export default function FilterSelection({ data }: {
+    data?: any[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/filter-select/filter-select.play.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../../../main.css";
+import { useClientRowDataSource } from "../../row-data-source-client/use-client-data-source.js";
+import { useLyteNyte } from "../../state/use-lytenyte.js";
+import { useId } from "react";
+import { Viewport } from "../../grid/viewport.js";
+import { Root } from "../../grid/root.js";
+import { Header } from "../../grid/header.js";
+import { HeaderRow } from "../../grid/header-row.js";
+import { HeaderGroupCell } from "../../grid/header-group-cell.js";
+import { HeaderCell } from "../../grid/header-cell.js";
+import { RowsContainer } from "../../grid/rows-container.js";
+import { RowsBottom, RowsCenter, RowsTop } from "../../grid/rows-sections.js";
+import { RowHandler } from "../test-utils/row-handler.js";
+import { bankDataSmall } from "../test-utils/bank-data-smaller.js";
+import { FilterSelect } from "../../filter-selects/index.js";
+const columns = [
+    { id: "age", type: "number" },
+    { id: "job", type: "date" },
+    { id: "balance", pin: "start" },
+    { id: "education" },
+    { id: "marital" },
+    { id: "default" },
+    { id: "housing" },
+    { id: "loan" },
+    { id: "contact" },
+    { id: "day" },
+    { id: "month" },
+    { id: "duration" },
+    { id: "campaign" },
+    { id: "pdays" },
+    { id: "previous" },
+    { id: "poutcome" },
+    { id: "y" },
+];
+export default function FilterSelection({ data = bankDataSmall }) {
+    const ds = useClientRowDataSource({
+        data: data,
+    });
+    const g = useLyteNyte({
+        gridId: useId(),
+        columns,
+        rowDataSource: ds,
+    });
+    const view = g.view.useValue();
+    const rootAge = FilterSelect.useFilterSelect({ grid: g, column: columns[0], maxCount: 3 });
+    const rootJob = FilterSelect.useFilterSelect({ grid: g, column: columns[1], maxCount: 3 });
+    return (_jsxs("div", { style: { display: "flex" }, children: [_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 20 }, children: [_jsx("div", { children: _jsxs(FilterSelect.Root, { root: rootAge, children: [rootAge.filters.map((c, i) => {
+                                    return (_jsxs(FilterSelect.FilterRow, { filter: c, children: [_jsx(FilterSelect.OperatorSelect, {}), _jsx(FilterSelect.ValueInput, {}), _jsx(FilterSelect.FilterCombinator, {})] }, i));
+                                }), _jsx(FilterSelect.Apply, {}), _jsx(FilterSelect.Reset, {})] }) }), _jsx("div", { children: _jsxs(FilterSelect.Root, { root: rootJob, children: [rootJob.filters.map((c, i) => {
+                                    return (_jsxs(FilterSelect.FilterRow, { filter: c, children: [_jsx(FilterSelect.OperatorSelect, {}), _jsx(FilterSelect.ValueInput, {}), _jsx(FilterSelect.FilterCombinator, {})] }, i));
+                                }), _jsx(FilterSelect.Apply, {}), _jsx(FilterSelect.Reset, {})] }) })] }), _jsx("div", { style: { width: "100%", height: "90vh", border: "1px solid black" }, children: _jsx(Root, { grid: g, children: _jsxs(Viewport, { children: [_jsx(Header, { children: view.header.layout.map((row, i) => {
+                                    return (_jsx(HeaderRow, { headerRowIndex: i, children: row.map((c) => {
+                                            if (c.kind === "group") {
+                                                return (_jsx(HeaderGroupCell, { cell: c, style: {
+                                                        paddingInline: "16px",
+                                                        background: "light-dark(rgb(200,200,200),rgb(57, 39, 39))",
+                                                        color: "light-dark(black,white)",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        borderBottom: "1px solid light-dark(gray, #444242)",
+                                                        borderRight: "1px solid light-dark(gray, #444242)",
+                                                    } }, c.idOccurrence));
+                                            }
+                                            return (_jsx(HeaderCell, { cell: c, style: {
+                                                    paddingInline: "16px",
+                                                    background: "light-dark(rgb(200,200,200),rgb(57, 39, 39))",
+                                                    color: "light-dark(black,white)",
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    borderBottom: "1px solid light-dark(gray, #444242)",
+                                                    borderRight: "1px solid light-dark(gray, #444242)",
+                                                } }, c.column.id));
+                                        }) }, i));
+                                }) }), _jsxs(RowsContainer, { children: [_jsx(RowsTop, { children: _jsx(RowHandler, { rows: view.rows.top, withStyles: true, pinned: true }) }), _jsx(RowsCenter, { children: _jsx(RowHandler, { rows: view.rows.center, withStyles: true }) }), _jsx(RowsBottom, { children: _jsx(RowHandler, { rows: view.rows.bottom, withStyles: true, pinned: true }) })] })] }) }) })] }));
+}

package/dist/__play__/test-utils/row-handler.js

@@ -1,15 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
 import { Row } from "../../grid/row.js";
 import { Cell } from "../../grid/cell.js";
 import { RowFullWidth } from "../../grid/row-full-width.js";
-export const RowHandler = fastDeepMemo((props) => {
+export const RowHandler = (props) => {
     return props.rows.map((row) => {
         if (row.kind === "full-width")
             return _jsx(RowFullWidth, { row: row }, row.id);
         return _jsx(Memo, { row: row, withStyles: props.withStyles, pinned: props.pinned }, row.id);
     });
-});
+};
 function RowFor({ row, withStyles, pinned, }) {
     const styles = withStyles
         ? {
@@ -30,4 +29,4 @@ function RowFor({ row, withStyles, pinned, }) {
             return _jsx(Cell, { cell: cell, style: styles }, cell.id);
         }) }));
 }
-const Memo = fastDeepMemo(RowFor);
+const Memo = RowFor;

package/dist/cell-selection/bound-selection-rect.js

@@ -1,4 +1,4 @@
-import { clamp } from "@1771technologies/lytenyte-js-utils";
+import { clamp } from "@1771technologies/lytenyte-shared";
 export function boundSelectionRect(grid, rect) {
     const rowCount = grid.state.rowDataStore.rowCount.get();
     const maxRow = rowCount;

package/dist/cell-selection/cell-selection-driver.js

@@ -2,9 +2,9 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useGridRoot } from "../context.js";
 import { useEdgeScroll } from "./use-edge-scroll.js";
-import { equal, getClientX, getClientY, getRelativeXPosition, getRelativeYPosition, } from "@1771technologies/lytenyte-js-utils";
+import { equal, getClientX, getClientY, getRelativeXPosition, getRelativeYPosition, } from "@1771technologies/lytenyte-shared";
 import { getNearestFocusable, getPositionFromFocusable } from "@1771technologies/lytenyte-shared";
-import { isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
+import { isHTMLElement } from "@1771technologies/lytenyte-shared";
 import { updateAdditiveCellSelection } from "./update-additive-cell-selection.js";
 import { deselectRectRange } from "./deselect-rect-range.js";
 import { isWithinSelectionRect } from "./is-within-selection-rect.js";
@@ -31,6 +31,7 @@ export function CellSelectionDriver() {
         let pointerStartY = 0;
         let lastRect = null;
         let animFrame = null;
+        const gridId = grid.state.gridId.get();
         const pointerMove = (event) => {
             if (animFrame)
                 cancelAnimationFrame(animFrame);
@@ -41,10 +42,10 @@ export function CellSelectionDriver() {
                 const target = event.target;
                 if (!isHTMLElement(target))
                     return;
-                const focusable = getNearestFocusable(target);
+                const focusable = getNearestFocusable(gridId, target);
                 if (!focusable)
                     return;
-                const position = getPositionFromFocusable(focusable);
+                const position = getPositionFromFocusable(focusable, gridId);
                 if (position.kind !== "cell" && position.kind !== "full-width")
                     return;
                 const rowIndex = position.rowIndex;
@@ -128,10 +129,10 @@ export function CellSelectionDriver() {
             const target = event.target;
             if (!isHTMLElement(target))
                 return;
-            const focusable = getNearestFocusable(target);
+            const focusable = getNearestFocusable(gridId, target);
             if (!focusable)
                 return;
-            const position = getPositionFromFocusable(focusable);
+            const position = getPositionFromFocusable(focusable, gridId);
             if (position.kind !== "cell" && position.kind !== "full-width")
                 return;
             const rowIndex = position.rowIndex;

package/dist/column-manager/branch.d.ts

@@ -1,7 +1,7 @@
 import type { CSSProperties } from "react";
 import type { Column } from "../+types";
-import type { SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 import type { PathBranch } from "@1771technologies/lytenyte-shared";
+import { type SlotComponent } from "@1771technologies/lytenyte-core/yinternal";
 export interface ColumnManagerBranchProps {
     readonly item: PathBranch<Column<any>>;
     readonly label: SlotComponent;

package/dist/column-manager/branch.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo } from "react";
 import { TreeBranch } from "../tree-view/branch/branch.js";
 import { ColumnItemContext } from "./context.js";
-import { dragState, DropWrap } from "@1771technologies/lytenyte-dragon";
 import { useGrid } from "../grid-provider/use-grid.js";
 import { useColumnsFromContext } from "./use-columns-from-context.js";
+import { dragState, DropWrap } from "@1771technologies/lytenyte-core/yinternal";
 export const Branch = forwardRef(function Branch({ item, label, labelWrapClassName, labelWrapStyle, ...props }, forwarded) {
     const grid = useGrid();
     const id = grid.state.gridId.useValue();

package/dist/column-manager/label.d.ts

@@ -1,4 +1,4 @@
-import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+import { type SlotComponent } from "@1771technologies/lytenyte-core/yinternal";
 export interface LabelProps {
     readonly as?: SlotComponent;
 }

package/dist/column-manager/label.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef, useMemo } from "react";
 import { useColumnItemContext } from "./context.js";
+import { useSlot } from "@1771technologies/lytenyte-core/yinternal";
 export const Label = forwardRef(function Label({ as, ...props }, forwarded) {
     const { item } = useColumnItemContext();
     const label = useMemo(() => {

package/dist/column-manager/leaf.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo } from "react";
 import { ColumnItemContext } from "./context.js";
 import { TreeLeaf } from "../tree-view/leaf.js";
-import { dragState, DropWrap } from "@1771technologies/lytenyte-dragon";
 import { useGrid } from "../grid-provider/use-grid.js";
 import { useColumnsFromContext } from "./use-columns-from-context.js";
+import { dragState, DropWrap } from "@1771technologies/lytenyte-core/yinternal";
 export const Leaf = forwardRef(function ColumnManagerLeaf({ item, ...props }, forwarded) {
     const context = useMemo(() => {
         return { item: item };

package/dist/column-manager/move-handle.d.ts

@@ -1,4 +1,4 @@
-import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+import { type SlotComponent } from "@1771technologies/lytenyte-core/yinternal";
 export interface MoveHandleProps {
     readonly as?: SlotComponent;
 }

package/dist/column-manager/move-handle.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useDraggable } from "@1771technologies/lytenyte-dragon";
-import { useCombinedRefs, useSlot, } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef, useMemo } from "react";
 import { useColumnItemContext } from "./context.js";
 import { useColumnsFromContext } from "./use-columns-from-context.js";
 import { useGrid } from "../grid-provider/use-grid.js";
+import { useCombinedRefs, useDraggable, useSlot, } from "@1771technologies/lytenyte-core/yinternal";
 export const MoveHandle = forwardRef(function MoveHandle({ as, ...props }, forwarded) {
     const item = useColumnItemContext().item;
     const grid = useGrid();

package/dist/column-manager/visibility-checkbox.d.ts

@@ -1,4 +1,4 @@
-import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+import { type SlotComponent } from "@1771technologies/lytenyte-core/yinternal";
 export interface VisibilityCheckbox {
     readonly as?: SlotComponent<{
         visible: boolean;

package/dist/column-manager/visibility-checkbox.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { useColumnItemContext } from "./context.js";
 import { forwardRef, useCallback, useMemo } from "react";
 import { useGrid } from "../grid-provider/use-grid.js";
 import { useColumnsFromContext } from "./use-columns-from-context.js";
+import { useSlot } from "@1771technologies/lytenyte-core/yinternal";
 export const VisibilityCheckbox = forwardRef(function VisibilityCheckbox({ as, ...props }, forwarded) {
     const { item } = useColumnItemContext();
     const grid = useGrid();

package/dist/filter-selects/apply.d.ts

@@ -0,0 +1,7 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-core/yinternal";
+export interface ApplyProps {
+    readonly as?: SlotComponent<{
+        onApply: () => void;
+    }>;
+}
+export declare const Apply: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & ApplyProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/filter-selects/apply.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlot } from "@1771technologies/lytenyte-core/yinternal";
+import { forwardRef } from "react";
+import { useFilterSelectRoot } from "./context.js";
+function ApplyImpl({ as, ...props }, ref) {
+    const ctx = useFilterSelectRoot();
+    const slot = useSlot({
+        props: [
+            {
+                onClick: ctx.apply,
+            },
+            props,
+        ],
+        ref: ref,
+        slot: as ?? _jsx("button", { children: "Apply" }),
+        state: {
+            onReset: ctx.apply,
+        },
+    });
+    return slot;
+}
+export const Apply = forwardRef(ApplyImpl);

package/dist/filter-selects/clear.d.ts

@@ -0,0 +1,7 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-core/yinternal";
+export interface ClearProps {
+    readonly as?: SlotComponent<{
+        onClear: () => void;
+    }>;
+}
+export declare const Clear: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & ClearProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/filter-selects/clear.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlot } from "@1771technologies/lytenyte-core/yinternal";
+import { forwardRef } from "react";
+import { useFilterSelectRoot } from "./context.js";
+function ClearImpl({ as, ...props }, ref) {
+    const ctx = useFilterSelectRoot();
+    const slot = useSlot({
+        props: [
+            {
+                onClick: ctx.clear,
+            },
+            props,
+        ],
+        ref: ref,
+        slot: as ?? _jsx("button", { children: "Clear" }),
+        state: {
+            onReset: ctx.clear,
+        },
+    });
+    return slot;
+}
+export const Clear = forwardRef(ClearImpl);

package/dist/filter-selects/context.d.ts

@@ -0,0 +1,13 @@
+import { type Dispatch, type SetStateAction } from "react";
+import type { FilterSelectFlat } from "./use-filter-select";
+export interface FilterSelectRoot {
+    readonly defaultFilter: FilterSelectFlat;
+    readonly filters: FilterSelectFlat[];
+    readonly setFilters: Dispatch<SetStateAction<FilterSelectFlat[]>>;
+    readonly maxCount: number;
+    readonly apply: () => void;
+    readonly reset: () => void;
+    readonly clear: () => void;
+}
+export declare const context: import("react").Context<FilterSelectRoot>;
+export declare const useFilterSelectRoot: () => FilterSelectRoot;

package/dist/filter-selects/context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from "react";
+export const context = createContext({});
+export const useFilterSelectRoot = () => useContext(context);

package/dist/filter-selects/filter-combinator.d.ts

@@ -0,0 +1,10 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-core/yinternal";
+export interface FilterCombinatorSlotProps {
+    readonly value: "AND" | "OR" | null;
+    readonly onChange: (v: "AND" | "OR" | null) => void;
+    readonly shouldShow: boolean;
+}
+export interface FilterCombinatorProps {
+    readonly as?: SlotComponent<FilterCombinatorSlotProps>;
+}
+export declare const FilterCombinator: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & FilterCombinatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/filter-selects/filter-combinator.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useSlot } from "@1771technologies/lytenyte-core/yinternal";
+import { forwardRef } from "react";
+import { useFilterRow } from "./filter-row-context.js";
+function FilterCombinatorImpl({ as, ...props }, ref) {
+    const ctx = useFilterRow();
+    const slot = useSlot({
+        props: [props],
+        ref: ref,
+        slot: as ?? (_jsx(_Fragment, { children: ctx.showExtender && (_jsxs("div", { ...props, ref: ref, children: [_jsxs("label", { children: ["AND", _jsx("input", { type: "radio", checked: ctx.extender === "AND", value: "AND", onChange: (e) => ctx.onExtenderChange(e.target.value) })] }), _jsxs("label", { children: ["OR", _jsx("input", { type: "radio", checked: ctx.extender === "OR", value: "OR", onChange: (e) => ctx.onExtenderChange(e.target.value) })] })] })) })),
+        state: {
+            onChange: ctx.onExtenderChange,
+            shouldShow: ctx.showExtender,
+            value: ctx.extender,
+        },
+    });
+    return slot;
+}
+export const FilterCombinator = forwardRef(FilterCombinatorImpl);

package/dist/filter-selects/filter-row-context.d.ts

@@ -0,0 +1,30 @@
+import type { SelectOption } from "./operator-select";
+import type { FilterSelectFlat } from "./use-filter-select";
+export declare const context: import("react").Context<{
+    readonly filter: FilterSelectFlat;
+    readonly extender: "AND" | "OR" | null;
+    readonly showExtender: boolean;
+    readonly onExtenderChange: (v: "AND" | "OR" | null) => void;
+    readonly operatorOptions: SelectOption[];
+    readonly operatorValue: SelectOption | null;
+    readonly operatorOnChange: (v: SelectOption) => void;
+    readonly value: string | number | null | undefined;
+    readonly valueDisabled: boolean;
+    readonly onValueChange: (v: string | number | null) => void;
+    readonly isNumberInput: boolean;
+    readonly filterHasNoValue: boolean;
+}>;
+export declare const useFilterRow: () => {
+    readonly filter: FilterSelectFlat;
+    readonly extender: "AND" | "OR" | null;
+    readonly showExtender: boolean;
+    readonly onExtenderChange: (v: "AND" | "OR" | null) => void;
+    readonly operatorOptions: SelectOption[];
+    readonly operatorValue: SelectOption | null;
+    readonly operatorOnChange: (v: SelectOption) => void;
+    readonly value: string | number | null | undefined;
+    readonly valueDisabled: boolean;
+    readonly onValueChange: (v: string | number | null) => void;
+    readonly isNumberInput: boolean;
+    readonly filterHasNoValue: boolean;
+};

package/dist/filter-selects/filter-row-context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from "react";
+export const context = createContext({});
+export const useFilterRow = () => useContext(context);

package/dist/filter-selects/filter-row.d.ts

@@ -0,0 +1,13 @@
+import type { FilterSelectFlat } from "./use-filter-select";
+import type { SelectOption } from "./operator-select";
+export interface SelectSlotProps {
+    readonly options: SelectOption[];
+    readonly value: SelectOption | null;
+    readonly onChange: (v: SelectOption) => void;
+}
+export interface FilterRowProps {
+    readonly filter: FilterSelectFlat;
+}
+export declare const FilterRow: import("react").ForwardRefExoticComponent<FilterRowProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/filter-selects/filter-row.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo } from "react";
+import { useFilterSelectRoot } from "./context.js";
+import { context } from "./filter-row-context.js";
+import { dateOptions, filterNeedsValue, numberOptions, operatorsThatAreNumbers, operatorToOption, stringOptions, } from "./options.js";
+function FilterRowImpl({ filter, children }, forwarded) {
+    const ctx = useFilterSelectRoot();
+    const index = ctx.filters.indexOf(filter);
+    const isLast = ctx.filters.at(-1) === filter;
+    if (index === -1)
+        throw new Error("Filter should be defined among the root filters.");
+    const onOperatorChange = useCallback((opt) => {
+        ctx.setFilters((prev) => {
+            const next = [...prev];
+            const filter = next[index];
+            if (filter.kind === "function")
+                return prev;
+            next[index] = {
+                ...filter,
+                operator: opt.value,
+            };
+            return next;
+        });
+    }, [ctx, index]);
+    const options = useMemo(() => {
+        if (filter.kind === "function")
+            return [];
+        if (filter.kind === "number")
+            return numberOptions;
+        if (filter.kind === "date")
+            return dateOptions;
+        return stringOptions;
+    }, [filter.kind]);
+    const operatorValue = useMemo(() => {
+        if (filter.kind === "function")
+            return { value: "-", label: "-" };
+        return operatorToOption[filter.operator ?? "equals"];
+    }, [filter]);
+    const value = useMemo(() => {
+        if (filter.kind === "function")
+            return null;
+        return filter.value;
+    }, [filter]);
+    const onValueChange = useCallback((v) => {
+        if (filter.kind === "function")
+            return;
+        ctx.setFilters((prev) => {
+            const next = [...prev];
+            const filter = next[index];
+            if (filter.kind === "function")
+                return prev;
+            if (filter.kind === "number") {
+                next[index] = {
+                    ...filter,
+                    value: filter.operator === "not_equals" || filter.operator === "equals"
+                        ? typeof v === "number"
+                            ? v
+                            : !v
+                                ? null
+                                : Number.parseFloat(v)
+                        : typeof v === "number"
+                            ? v
+                            : Number.parseFloat(v ?? ""),
+                };
+                return next;
+            }
+            const isNumber = operatorsThatAreNumbers.has(filter.operator);
+            next[index] = {
+                ...filter,
+                value: isNumber ? (typeof v === "number" ? v : Number.parseFloat(v)) : v,
+            };
+            return next;
+        });
+    }, [ctx, filter.kind, index]);
+    const extenderValue = useMemo(() => {
+        return filter.kind == "function" ? null : (filter.nextExtender ?? "AND");
+    }, [filter]);
+    const onExtenderChange = useCallback((v) => {
+        ctx.setFilters((prev) => {
+            const next = [...prev];
+            const filter = next[index];
+            if (filter.kind === "function")
+                return prev;
+            next[index] = {
+                ...filter,
+                nextExtender: v,
+            };
+            return next;
+        });
+    }, [ctx, index]);
+    const showExtender = useMemo(() => {
+        if (filter.kind === "function")
+            return false;
+        // If the filter isn't the last one then show the extender
+        if (!isLast)
+            return true;
+        if (filter.operator != null && filter.value != null && index + 1 < ctx.maxCount)
+            return true;
+        return false;
+    }, [ctx.maxCount, filter, index, isLast]);
+    return (_jsx(context.Provider, { value: {
+            filter,
+            extender: extenderValue,
+            onExtenderChange,
+            showExtender: showExtender,
+            operatorOnChange: onOperatorChange,
+            operatorOptions: options,
+            operatorValue: operatorValue,
+            value,
+            onValueChange,
+            isNumberInput: filter.kind === "function"
+                ? false
+                : filter.kind === "number" || operatorsThatAreNumbers.has(filter.operator),
+            filterHasNoValue: filter.kind === "function" || filterNeedsValue.has(filter.operator),
+            valueDisabled: filter.kind === "function" || !filter.operator,
+        }, children: _jsx("div", { ref: forwarded, children: children }) }));
+}
+export const FilterRow = forwardRef(FilterRowImpl);

package/dist/filter-selects/index.d.ts

@@ -0,0 +1,22 @@
+import { Root } from "./root.js";
+export declare const FilterSelect: {
+    useFilterSelect: <T>({ grid, column, maxCount }: import("./use-filter-select.js").UseFilterSelectParams<T>) => {
+        reset: () => void;
+        apply: () => void;
+        clear: () => void;
+        defaultFilter: import("./use-filter-select.js").FilterSelectFlat;
+        filters: import("./use-filter-select.js").FilterSelectFlat[];
+        setFilters: (v: import("./use-filter-select.js").FilterSelectFlat[] | ((v: import("./use-filter-select.js").FilterSelectFlat[]) => import("./use-filter-select.js").FilterSelectFlat[])) => void;
+        maxCount: number;
+    };
+    Root: typeof Root;
+    FilterRow: import("react").ForwardRefExoticComponent<import("./filter-row.js").FilterRowProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    OperatorSelect: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSelectElement> & import("react").SelectHTMLAttributes<HTMLSelectElement> & import("./operator-select.js").OperatorSelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
+    ValueInput: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & import("./value-input.js").ValueInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    FilterCombinator: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./filter-combinator.js").FilterCombinatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Apply: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("./apply.js").ApplyProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Reset: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("./reset.js").ResetProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Clear: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("./clear.js").ClearProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/dist/filter-selects/index.js

@@ -0,0 +1,20 @@
+import { Apply } from "./apply.js";
+import { Clear } from "./clear.js";
+import { FilterCombinator } from "./filter-combinator.js";
+import { FilterRow } from "./filter-row.js";
+import { OperatorSelect } from "./operator-select.js";
+import { Reset } from "./reset.js";
+import { Root } from "./root.js";
+import { useFilterSelect } from "./use-filter-select.js";
+import { ValueInput } from "./value-input.js";
+export const FilterSelect = {
+    useFilterSelect,
+    Root,
+    FilterRow,
+    OperatorSelect,
+    ValueInput,
+    FilterCombinator,
+    Apply,
+    Reset,
+    Clear,
+};

package/dist/filter-selects/is-complete-filter.d.ts

@@ -0,0 +1,2 @@
+import type { FilterSelectFlat } from "./use-filter-select";
+export declare function isCompleteFilter(c: FilterSelectFlat): boolean;

package/dist/filter-selects/is-complete-filter.js

@@ -0,0 +1,5 @@
+export function isCompleteFilter(c) {
+    if (c.kind === "function")
+        return true;
+    return c.operator != null && c.value !== undefined;
+}

package/dist/filter-selects/operator-select.d.ts

@@ -0,0 +1,14 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-core/yinternal";
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+export interface OperatorSelectSlotProps {
+    readonly options: SelectOption[];
+    readonly value: SelectOption | null;
+    readonly onChange: (v: SelectOption) => void;
+}
+export interface OperatorSelectProps {
+    readonly as?: SlotComponent<OperatorSelectSlotProps>;
+}
+export declare const OperatorSelect: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSelectElement> & import("react").SelectHTMLAttributes<HTMLSelectElement> & OperatorSelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/filter-selects/operator-select.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlot } from "@1771technologies/lytenyte-core/yinternal";
+import { forwardRef } from "react";
+import { useFilterRow } from "./filter-row-context.js";
+function OperatorSelectImpl({ as, ...props }, ref) {
+    const ctx = useFilterRow();
+    const slot = useSlot({
+        props: [props],
+        state: {
+            options: ctx.operatorOptions,
+            value: ctx.operatorValue,
+            onChange: ctx.operatorOnChange,
+        },
+        ref: ref,
+        slot: as ?? (_jsx("select", { value: ctx.operatorValue?.value ?? "", onChange: (c) => {
+                const val = c.target.value;
+                const opt = ctx.operatorOptions.find((c) => c.value === val);
+                ctx.operatorOnChange(opt);
+            }, children: ctx.operatorOptions.map((c) => {
+                return (_jsx("option", { value: c.value, children: c.label }, c.value));
+            }) })),
+    });
+    return slot;
+}
+export const OperatorSelect = forwardRef(OperatorSelectImpl);