@1771technologies/lytenyte-pro 1.0.14 → 1.0.16

package/dist/__play__/cell-selections/cell-selection.play.d.ts

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

package/dist/__play__/{grid-navigation/normal-layout.play.js → cell-selections/cell-selection.play.js}

@@ -1,21 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./navigation.css";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import "../../../main.css";
+import "./cell-selection.css";
+import { useClientRowDataSource } from "../../row-data-source-client/use-client-data-source.js";
 import { useLyteNyte } from "../../state/use-lytenyte.js";
-import { bankDataSmall } from "../test-utils/bank-data-smaller.js";
-import { Root } from "../../root/root.js";
-import { Viewport } from "../../viewport/viewport.js";
-import { Header } from "../../header/header.js";
-import { HeaderRow } from "../../header/header-row.js";
-import { HeaderGroupCell } from "../../header/header-group-cell.js";
-import { HeaderCell } from "../../header/header-cell.js";
-import { RowsContainer } from "../../rows/rows-container.js";
-import { RowsBottom, RowsCenter, RowsTop } from "../../rows/rows-sections.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 { useClientRowDataSource } from "../../row-data-source-client/use-client-data-source.js";
-const baseColumns = [
+import { bankDataSmall } from "../test-utils/bank-data-smaller.js";
+const columns = [
     { id: "age" },
     { id: "job" },
-    { id: "balance" },
+    { id: "balance", pin: "start" },
     { id: "education" },
     { id: "marital" },
     { id: "default" },
@@ -31,21 +33,27 @@ const baseColumns = [
     { id: "poutcome" },
     { id: "y" },
 ];
-export default function BasicRendering({ rtl, columns, pinTop, center, pinBot, floatingRow, }) {
+export default function CellSelection({ data = bankDataSmall }) {
     const ds = useClientRowDataSource({
-        data: center ? bankDataSmall.slice(0, center) : bankDataSmall,
-        topData: pinTop ? bankDataSmall.slice(0, pinTop) : [],
-        bottomData: pinBot ? bankDataSmall.slice(0, pinBot) : [],
+        data: data,
+        topData: data.slice(0, 2),
+        bottomData: data.slice(0, 2),
     });
     const g = useLyteNyte({
-        gridId: "x",
-        columns: columns ?? baseColumns,
+        gridId: useId(),
+        columns,
         rowDataSource: ds,
-        rtl: rtl,
-        floatingRowEnabled: floatingRow,
+        cellSelectionMode: "range",
+        columnBase: {
+            uiHints: {
+                movable: true,
+                resizable: true,
+            },
+        },
     });
     const view = g.view.useValue();
-    return (_jsxs("div", { children: [_jsx("button", { tabIndex: 0, onClick: () => { }, children: "Top Capture" }), _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) => {
+    const selections = g.state.cellSelections.useValue();
+    return (_jsxs("div", { children: [_jsxs("div", { children: [_jsxs("button", { onClick: () => g.state.rtl.set((prev) => !prev), children: ["RTL: ", g.state.rtl.get() ? "Yes" : "No"] }), _jsx("button", { onClick: () => g.state.columnMarkerEnabled.set((prev) => !prev), children: "Toggle Marker" }), _jsx("button", { onClick: () => g.state.cellSelectionMode.set((prev) => prev === "multi-range" ? "range" : "multi-range"), children: "Range Selection" }), _jsx("pre", { children: JSON.stringify(selections) })] }), _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: {
@@ -68,5 +76,5 @@ export default function BasicRendering({ rtl, columns, pinTop, center, pinBot, f
                                                     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 }) })] })] }) }) }), _jsx("button", { tabIndex: 0, onClick: () => { }, children: "Bottom Capture" })] }));
+                                }) }), _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__/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 { Cell } from "../../cells/cell.js";
-import { Row } from "../../rows/row/row.js";
-import { RowFullWidth } from "../../rows/row-full-width.js";
-export const RowHandler = fastDeepMemo((props) => {
+import { Row } from "../../grid/row.js";
+import { Cell } from "../../grid/cell.js";
+import { RowFullWidth } from "../../grid/row-full-width.js";
+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;
@@ -117,18 +118,21 @@ export function CellSelectionDriver() {
         const pointerDown = (event) => {
             if (!isNormalClick(event)) {
                 document.removeEventListener("pointermove", pointerMove);
-                // Prevent the default for the context menu, otherwise the cell right clicked will be focused,
-                // resulting in the cell selection changing.        if (event.button == 2) event.preventDefault();
+                // Prevent the default for the context menu, otherwise the cell
+                // right clicked will be focused,
+                // resulting in the cell selection changing.
+                if (event.button == 2)
+                    event.preventDefault();
                 return;
             }
             isAdditive = isMultiRange && (event.ctrlKey || event.metaKey);
             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/context.d.ts

@@ -1,10 +1,11 @@
 import type { Grid } from "./+types.js";
 import type { InternalAtoms } from "./state/+types.js";
+import type { Provider } from "react";
 export interface GridRootContext {
     readonly ref: (el: HTMLElement | null) => void;
     readonly grid: Grid<any> & {
         internal: InternalAtoms;
     };
 }
-export declare const RootProvider: import("react").Provider<GridRootContext>;
+export declare const RootProvider: Provider<GridRootContext>;
 export declare const useGridRoot: () => GridRootContext;

package/dist/context.js

@@ -1,4 +1,5 @@
-import { createContext, useContext } from "react";
-const context = createContext(null);
-export const RootProvider = context.Provider;
-export const useGridRoot = () => useContext(context);
+import { RootProvider as CoreProvider, useGridRoot as useCoreRoot, } from "@1771technologies/lytenyte-core/yinternal";
+// The PRO context is a superset of the Core context, but we still want to leverage some of the core
+// components to share code. Hence we share the context functionality.
+export const RootProvider = CoreProvider;
+export const useGridRoot = useCoreRoot;

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/context.d.ts

@@ -0,0 +1,12 @@
+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;
+}
+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>>;