react-gridix 0.0.0-stage → 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,305 @@
+import { ComponentType } from 'react';
+import { CSSProperties } from 'react';
+import { JSX as JSX_2 } from 'react';
+import { ReactNode } from 'react';
+
+declare type AnyRow = Record<string, any>;
+
+export declare interface CellEditableParams<T = Record<string, any>> {
+    /** The raw value stored in the row (read from nested objects for `"a.b"` fields). */
+    value: unknown;
+    /** The value as text, after `valueFormatter`. */
+    formattedValue: string;
+    row: T;
+    rowIndex: number;
+    field: string;
+    column: ColumnDef<T>;
+}
+
+export declare interface CellEditEvent<T> {
+    rowId: string | number;
+    rowIndex: number;
+    /** The column's field, for example `"contact.phone"`. */
+    field: string;
+    oldValue: unknown;
+    newValue: unknown;
+    /** The updated row. */
+    row: T;
+}
+
+/** Props received by a column's `cellEditor` component. */
+export declare interface CellEditorProps<T = Record<string, any>> {
+    /** The current draft value (starts as the cell's raw value). */
+    value: unknown;
+    row: T;
+    rowIndex: number;
+    field: string;
+    column: ColumnDef<T>;
+    /** Update the draft value without saving it. */
+    onChange: (value: unknown) => void;
+    /**
+     * Save and close the editor. Pass the value to save, or call with no value to save the
+     * current draft. `move` also starts editing the neighbouring cell ("down" and so on).
+     */
+    onCommit: (value?: unknown, move?: MoveDirection) => void;
+    /** Close the editor without saving. */
+    onCancel: () => void;
+}
+
+export declare interface CellParams<T = Record<string, any>> extends CellEditableParams<T> {
+    /** Whether this cell may be changed (the column's `editable` setting, or the grid's). */
+    editable: boolean;
+    /**
+     * Saves a new value for this cell straight away, without opening the editor. It runs `validate`
+     * and fires `onCellEdit` / `onRowsChange` like any edit. Returns false if the value was rejected
+     * or the cell is not editable.
+     */
+    updateValue: (value: unknown) => boolean;
+}
+
+export declare function Checkbox({ checked, onChange, indeterminate, variant, disabled, label, "aria-label": ariaLabel, id, name, indicator, className, style, classNames, styles, }: CheckboxProps): JSX_2.Element;
+
+export declare interface CheckboxProps {
+    checked: boolean;
+    /** Called once per click (or Space key press) with the new value. */
+    onChange: (checked: boolean) => void;
+    /**
+     * Shows the mixed ("some are selected") state, with a dash instead of a tick. Use it together
+     * with `checked={false}`. Clicking a mixed checkbox calls `onChange(true)`.
+     */
+    indeterminate?: boolean;
+    /** Default `"native"`. */
+    variant?: CheckboxVariant;
+    disabled?: boolean;
+    /** Text next to the box. Clicking it toggles the checkbox. */
+    label?: ReactNode;
+    /** Accessible name when there is no visible `label`. */
+    "aria-label"?: string;
+    id?: string;
+    /** Only used by the `"native"` variant. */
+    name?: string;
+    /** Replaces what is drawn inside the `"button"` and `"tick"` variants (for example `"★"` or your own icon). */
+    indicator?: ReactNode;
+    /** Classes for the root element (same as `classNames.root`). */
+    className?: string;
+    /** Inline styles for the root element (same as `styles.root`). */
+    style?: CSSProperties;
+    /** Classes per part. */
+    classNames?: Partial<Record<CheckboxSlot, string>>;
+    /** Inline styles per part. */
+    styles?: Partial<Record<CheckboxSlot, CSSProperties>>;
+}
+
+export declare type CheckboxSlot = "root" | "control" | "indicator" | "label";
+
+/**
+ * - `"button"`: a `<button>` box with a `<span>` inside that is shown when checked.
+ * - `"tick"`: a `<button>` box that fills in and shows a tick when checked.
+ * - `"native"`: the browser's own `<input type="checkbox">`.
+ */
+export declare type CheckboxVariant = "button" | "tick" | "native";
+
+/** Options for the checkbox drawn in a `type: "boolean"` column. */
+export declare interface ColumnCheckboxOptions {
+    /** Overrides the grid's `checkboxVariant` for this column. */
+    variant?: CheckboxVariant;
+    /** A custom character (or any node) drawn inside the box when checked, for example `"✕"` or `"★"`. */
+    indicator?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: Partial<Record<CheckboxSlot, string>>;
+    styles?: Partial<Record<CheckboxSlot, CSSProperties>>;
+}
+
+export declare interface ColumnDef<T = Record<string, any>> {
+    /**
+     * Key of the row object this column reads and writes. Use dot notation for nested objects:
+     * `"contact.phone"`. Edits to a nested field copy the objects on the way and never change your data in place.
+     */
+    field: FieldPath<T> & string;
+    /**
+     * Text shown in the header. Defaults to the field name, except for `type: "boolean"` columns,
+     * which default to an empty string.
+     */
+    headerName?: string;
+    /**
+     * "number" columns sort numerically and parse edits as numbers.
+     * "boolean" columns show a checkbox that toggles with one click (see `checkbox`).
+     */
+    type?: "text" | "number" | "boolean";
+    width?: number | string;
+    minWidth?: number | string;
+    align?: "left" | "center" | "right";
+    /** Overrides the grid-level `sortable`. */
+    sortable?: boolean;
+    /** Show a filter indicator in this column's header. Default false. Clicking it opens the filter popup. */
+    filterable?: boolean;
+    /** Placeholder of the default filter text box. */
+    filterPlaceholder?: string;
+    /** A React component drawn instead of the default dot. Receives `{ column, active, open }`. */
+    filterIndicator?: ComponentType<FilterIndicatorProps<T>>;
+    /** Classes for this column's filter indicator button (Tailwind works). */
+    filterIndicatorClassName?: string;
+    /** Inline styles for this column's filter indicator button. */
+    filterIndicatorStyle?: CSSProperties;
+    /** Classes for this column's filter popup. */
+    filterPopupClassName?: string;
+    /** Inline styles for this column's filter popup. */
+    filterPopupStyle?: CSSProperties;
+    /** A React component that replaces the filter text box inside the popup. */
+    filterRenderer?: ComponentType<FilterRendererProps<T>>;
+    /**
+     * `true` / `false`, or a function that decides per cell. Overrides the grid-level `editable`.
+     * Example: `editable: ({ row }) => row.status !== "locked"`.
+     */
+    editable?: boolean | ((params: CellEditableParams<T>) => boolean);
+    /** Text used for display, global search and filtering. */
+    valueFormatter?: (value: any, row: T) => string;
+    /** Turns the typed text into the stored value. */
+    valueParser?: (text: string, row: T) => unknown;
+    /** Return false to reject an edit. The editor stays open and is marked invalid. */
+    validate?: (value: unknown, row: T) => boolean;
+    /** Custom sort. Return a negative, zero or positive number. */
+    comparator?: (a: any, b: any, rowA: T, rowB: T) => number;
+    /** A React component that renders the cell content. Define it outside render so it keeps its identity. */
+    cellRenderer?: ComponentType<CellParams<T>>;
+    /** A React component used instead of the text box when editing this column. */
+    cellEditor?: ComponentType<CellEditorProps<T>>;
+    /** A React component that renders the header label (the filter indicator and sort arrow are still added). */
+    headerRenderer?: ComponentType<HeaderRendererProps<T>>;
+    /** Classes for the whole column: its header cell and every body cell. Tailwind works. */
+    className?: string;
+    /** Inline styles for the whole column: its header cell and every body cell. */
+    style?: CSSProperties;
+    headerClassName?: string;
+    headerStyle?: CSSProperties;
+    cellClassName?: string | ((params: CellParams<T>) => string);
+    cellStyle?: CSSProperties | ((params: CellParams<T>) => CSSProperties);
+    /** Look of the checkbox in a `type: "boolean"` column. */
+    checkbox?: ColumnCheckboxOptions;
+    /**
+     * For `type: "boolean"` columns: draws a checkbox in the header, with the header name as its
+     * label (no label when the name is empty). Clicking it checks every row that matches the current
+     * search and filters (all pages), or unchecks them all when they are already checked. It shows a
+     * mixed state when only some are checked. Ignored when the column has a `headerRenderer`.
+     */
+    headerCheckbox?: boolean;
+}
+
+export declare function DataGrid<T extends AnyRow = AnyRow>({ columns, rows, getRowId, editable, enterMovesDown, onCellEdit, onRowsChange, sortable, defaultSort, onSortChange, searchable, searchPlaceholder, pagination, paginationPosition, pageSize: initialPageSize, pageSizeOptions, onRowClick, toolbar, emptyMessage, striped, stripeColors, checkboxVariant, animateRows, theme, maxHeight, className, style, classNames, styles, rowClassName, rowStyle, }: DataGridProps<T>): JSX_2.Element;
+
+export declare interface DataGridProps<T = Record<string, any>> {
+    columns: ColumnDef<T>[];
+    rows: T[];
+    /** Stable id for each row. Defaults to the row's index in `rows`. */
+    getRowId?: (row: T, index: number) => string | number;
+    /** Allow editing cells (double-click, Enter/F2, or just start typing). Default false. */
+    editable?: boolean;
+    /**
+     * After Enter saves a cell, start editing the cell below (Shift+Enter: the cell above).
+     * Tab and Shift+Tab move across the row. Default true.
+     */
+    enterMovesDown?: boolean;
+    /** Fires after a cell edit is committed. */
+    onCellEdit?: (event: CellEditEvent<T>) => void;
+    /** Fires with the full updated array after a cell edit. Handy for `setRows`. */
+    onRowsChange?: (rows: T[]) => void;
+    /** Header click sorting. Default true. */
+    sortable?: boolean;
+    /** Uncontrolled initial sort. */
+    defaultSort?: SortModel | null;
+    onSortChange?: (sort: SortModel | null) => void;
+    /** Global search box above the grid. Default true. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Default true. */
+    pagination?: boolean;
+    /** Where the row count and page controls go: "bottom" (default), "top" or "both". */
+    paginationPosition?: PaginationPosition;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onRowClick?: (row: T, rowIndex: number) => void;
+    /** Extra content on the right side of the toolbar. */
+    toolbar?: ReactNode;
+    emptyMessage?: ReactNode;
+    /** Alternate row shading. Default false. */
+    striped?: boolean;
+    /** Two colours for the alternating rows, for example `["#ffffff", "#f1f5f9"]`. Implies `striped`. */
+    stripeColors?: [string, string];
+    /** Checkbox style for `type: "boolean"` columns: "button", "tick" or "native" (default). */
+    checkboxVariant?: CheckboxVariant;
+    /** Rows slide in smoothly when they render (new page, sort, search). Default true. Respects "reduce motion". */
+    animateRows?: boolean;
+    /**
+     * Name of a theme. Nothing changes unless you pass one: "ocean", "midnight", "sunset" or "forest",
+     * or the name of your own `[data-rk-theme="..."]` CSS.
+     */
+    theme?: GridTheme | (string & {});
+    /** Makes the body scroll with a sticky header, e.g. 400 or "60vh". */
+    maxHeight?: number | string;
+    /** Tailwind or any CSS classes for the root element. */
+    className?: string;
+    /** Inline styles for the root element. */
+    style?: CSSProperties;
+    /** Classes per part of the grid. */
+    classNames?: Partial<Record<GridSlot, string>>;
+    /** Inline styles per part of the grid. */
+    styles?: Partial<Record<GridSlot, CSSProperties>>;
+    rowClassName?: string | ((row: T, rowIndex: number) => string);
+    rowStyle?: CSSProperties | ((row: T, rowIndex: number) => CSSProperties);
+}
+
+/**
+ * Every field a column can point at: top-level keys, plus dot paths into nested objects
+ * (`"contact.phone"`). Goes up to 5 levels deep. Arrays are treated as plain values.
+ */
+export declare type FieldPath<T, D extends number = 5> = [D] extends [never] ? never : T extends Primitive | readonly unknown[] ? never : {
+    [K in keyof T & string]: NonNullable<T[K]> extends Primitive | readonly unknown[] ? K : K | `${K}.${FieldPath<NonNullable<T[K]>, Prev[D]>}`;
+}[keyof T & string];
+
+/** Props received by a column's `filterIndicator` component. */
+export declare interface FilterIndicatorProps<T = Record<string, any>> {
+    column: ColumnDef<T>;
+    /** True while a filter text is set for this column. */
+    active: boolean;
+    /** True while the filter popup is open. */
+    open: boolean;
+}
+
+/** Props received by a column's `filterRenderer` component (it is shown inside the filter popup). */
+export declare interface FilterRendererProps<T = Record<string, any>> {
+    column: ColumnDef<T>;
+    value: string;
+    onChange: (value: string) => void;
+}
+
+export declare type GridSlot = "root" | "toolbar" | "search" | "scroll" | "table" | "thead" | "headerRow" | "headerCell" | "filterIndicator" | "filterPopup" | "filterInput" | "tbody" | "row" | "cell" | "editor" | "empty" | "footer" | "rowCount" | "pageInfo" | "pageSize" | "pagination" | "pageButton" | "checkbox" | "checkboxControl" | "checkboxIndicator";
+
+/**
+ * Built-in themes. A theme only applies when you pass its name to `<DataGrid theme="..." />`.
+ * Any other string works too if you define `[data-rk-theme="name"]` CSS variables yourself.
+ */
+export declare type GridTheme = "ocean" | "midnight" | "sunset" | "forest";
+
+/** Props received by a column's `headerRenderer` component. */
+export declare interface HeaderRendererProps<T = Record<string, any>> {
+    column: ColumnDef<T>;
+    sortDirection: SortDirection | null;
+}
+
+export declare type MoveDirection = "down" | "up" | "left" | "right" | "none";
+
+export declare type PaginationPosition = "bottom" | "top" | "both";
+
+declare type Prev = [never, 0, 1, 2, 3, 4, 5];
+
+declare type Primitive = string | number | boolean | bigint | symbol | null | undefined | Date | ((...args: any[]) => any);
+
+export declare type SortDirection = "asc" | "desc";
+
+export declare interface SortModel {
+    field: string;
+    direction: SortDirection;
+}
+
+export { }

package/dist/react-gridix.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),f=require("react"),ct=require("react-dom"),oe=(...o)=>o.filter(Boolean).join(" ");function ut(){return l.jsx("svg",{viewBox:"0 0 16 16",width:"100%",height:"100%","aria-hidden":"true",focusable:"false",children:l.jsx("path",{d:"M3.5 8.5l3 3 6-7",fill:"none",stroke:"currentColor",strokeWidth:"2.2",strokeLinecap:"round",strokeLinejoin:"round"})})}function ft(){return l.jsx("svg",{viewBox:"0 0 16 16",width:"100%",height:"100%","aria-hidden":"true",focusable:"false",children:l.jsx("path",{d:"M4 8h8",fill:"none",stroke:"currentColor",strokeWidth:"2.2",strokeLinecap:"round"})})}function je({checked:o,onChange:d,indeterminate:c=!1,variant:g="native",disabled:P=!1,label:x,"aria-label":m,id:A,name:U,indicator:T,className:W,style:w,classNames:k={},styles:E={}}){const B=c?"indeterminate":o?"checked":"unchecked";return l.jsxs("label",{className:oe("rk-checkbox",`rk-checkbox--${g}`,B==="checked"&&"rk-checkbox--checked",c&&"rk-checkbox--indeterminate",P&&"rk-checkbox--disabled",k.root,W),style:{...E.root,...w},"data-state":B,children:[g==="native"?l.jsx("input",{type:"checkbox",id:A,name:U,ref:y=>{y&&(y.indeterminate=c)},className:oe("rk-checkbox__control",k.control),style:E.control,checked:o,disabled:P,"aria-label":m,"data-state":B,onChange:y=>d(y.target.checked)}):l.jsx("button",{type:"button",role:"checkbox",id:A,className:oe("rk-checkbox__control",k.control),style:E.control,"aria-checked":c?"mixed":o,"aria-label":m,disabled:P,"data-state":B,onClick:()=>d(!o),children:l.jsx("span",{className:oe("rk-checkbox__indicator",T!==void 0&&!c&&"rk-checkbox__indicator--custom",k.indicator),style:E.indicator,"data-state":B,"aria-hidden":"true",children:c?g==="tick"?l.jsx(ft,{}):null:T!==void 0?T:g==="tick"?l.jsx(ut,{}):null})}),x!=null&&x!==!1&&x!==""&&l.jsx("span",{className:oe("rk-checkbox__label",k.label),style:E.label,children:x})]})}const ve=(...o)=>o.filter(Boolean).join(" "),ht=typeof window<"u"?f.useLayoutEffect:f.useEffect;function pt({column:o,label:d,value:c,onChange:g,theme:P,indicatorClassName:x,indicatorStyle:m,popupClassName:A,popupStyle:U,inputClassName:T,inputStyle:W}){const[w,k]=f.useState(!1),[E,B]=f.useState({top:0,left:0}),y=f.useRef(null),z=f.useRef(null),O=c.trim()!=="",$=f.useCallback(()=>{var R;const b=y.current;if(!b)return;const F=b.getBoundingClientRect(),K=((R=z.current)==null?void 0:R.offsetWidth)??260,L=Math.max(8,Math.min(F.left,window.innerWidth-K-8));B({top:F.bottom+6,left:L})},[]);ht(()=>{w&&$()},[w,$]),f.useEffect(()=>{if(!w)return;const b=K=>{var R,ie;const L=K.target;(R=z.current)!=null&&R.contains(L)||(ie=y.current)!=null&&ie.contains(L)||k(!1)},F=K=>{var L;K.key==="Escape"&&(k(!1),(L=y.current)==null||L.focus())};return document.addEventListener("mousedown",b),document.addEventListener("keydown",F),window.addEventListener("resize",$),window.addEventListener("scroll",$,!0),()=>{document.removeEventListener("mousedown",b),document.removeEventListener("keydown",F),window.removeEventListener("resize",$),window.removeEventListener("scroll",$,!0)}},[w,$]);const pe=()=>{var b;k(!1),(b=y.current)==null||b.focus()};return l.jsxs(l.Fragment,{children:[l.jsx("button",{ref:y,type:"button",className:ve("rk-grid__filter-btn",O&&"rk-grid__filter-btn--active",w&&"rk-grid__filter-btn--open",x),style:m,"aria-label":`Filter ${d}`,"aria-haspopup":"dialog","aria-expanded":w,"data-active":O||void 0,onClick:b=>{b.stopPropagation(),w||$(),k(F=>!F)},children:o.filterIndicator?f.createElement(o.filterIndicator,{column:o,active:O,open:w}):l.jsx("span",{className:"rk-grid__filter-dot","aria-hidden":"true"})}),w&&typeof document<"u"&&ct.createPortal(l.jsxs("div",{ref:z,role:"dialog","aria-label":`Filter ${d}`,"data-rk-theme":P||void 0,className:ve("rk-grid-popup",A),style:{position:"fixed",top:E.top,left:E.left,...U},children:[o.filterRenderer?f.createElement(o.filterRenderer,{column:o,value:c,onChange:g}):l.jsx("input",{autoFocus:!0,type:"text",className:ve("rk-grid__filter-input",T),style:W,value:c,placeholder:o.filterPlaceholder??`Filter ${d}…`,"aria-label":`Filter text for ${d}`,onChange:b=>g(b.target.value),onKeyDown:b=>{b.key==="Enter"&&pe()}}),O&&l.jsx("button",{type:"button",className:"rk-grid__filter-clear",onClick:()=>g(""),children:"Clear"})]}),document.body)]})}const we=new Set(["__proto__","prototype","constructor"]),We=(o,d)=>Object.prototype.hasOwnProperty.call(o,d);function V(o,d){if(o===null||typeof o!="object")return;if(We(o,d))return o[d];let c=o;for(const g of d.split(".")){if(c==null||typeof c!="object"||we.has(g))return;c=c[g]}return c}function ze(o,d,c){if(Array.isArray(o)){const g=[...o];return g[d]=c,g}return{...o,[d]:c}}function Ee(o,d,c){const g=o??{};if(We(g,d)||!d.includes("."))return we.has(d)?o:ze(g,d,c);const[P,...x]=d.split(".");if(we.has(P))return o;const m=g[P];return ze(g,P,Ee(m!==null&&typeof m=="object"?m:{},x.join("."),c))}const D=(...o)=>o.filter(Boolean).join(" "),Oe=(o,d)=>`${typeof o}:${o}\0${d}`,Se=o=>o.headerName??(o.type==="boolean"?"":o.field),he=o=>Se(o)||o.field;function ye(o,d){const c=V(d,o.field);return o.valueFormatter?o.valueFormatter(c,d):o.type==="boolean"&&typeof c=="boolean"?c?"Yes":"No":c==null?"":c instanceof Date?c.toLocaleDateString():String(c)}function gt(o,d){return typeof o=="number"&&typeof d=="number"?o-d:o instanceof Date&&d instanceof Date?o.getTime()-d.getTime():typeof o=="boolean"&&typeof d=="boolean"?Number(o)-Number(d):String(o).localeCompare(String(d),void 0,{numeric:!0,sensitivity:"base"})}function bt({columns:o,rows:d,getRowId:c,editable:g=!1,enterMovesDown:P=!0,onCellEdit:x,onRowsChange:m,sortable:A=!0,defaultSort:U=null,onSortChange:T,searchable:W=!0,searchPlaceholder:w="Search…",pagination:k=!0,paginationPosition:E="bottom",pageSize:B=10,pageSizeOptions:y=[5,10,25,50],onRowClick:z,toolbar:O,emptyMessage:$="No rows to show",striped:pe=!1,stripeColors:b,checkboxVariant:F="native",animateRows:K=!0,theme:L,maxHeight:R,className:ie,style:qe,classNames:S={},styles:j={},rowClassName:ge,rowStyle:be}){const _=(e,t)=>({className:D(t,S[e]),style:j[e]}),[Ne,Ce]=f.useState(d),Y=f.useRef(d);f.useEffect(()=>{Y.current=d,Ce(d)},[d]);const De=e=>{Y.current=e,Ce(e)},[H,Ge]=f.useState(""),[Q,Je]=f.useState({}),[v,Ue]=f.useState(U),[Ye,X]=f.useState(0),[I,He]=f.useState(B),[Z,ee]=f.useState(null),q=f.useRef(0),le=f.useRef(null),ke=f.useRef(new Map),Pe=f.useMemo(()=>Ne.map((e,t)=>({row:e,index:t,id:c?c(e,t):t})),[Ne,c]),te=f.useMemo(()=>{const e=H.trim().toLowerCase(),t=Object.entries(Q).filter(([n,i])=>i.trim()!==""&&o.some(s=>s.field===n&&s.filterable));let r=Pe.filter(({row:n})=>e&&!o.some(s=>ye(s,n).toLowerCase().includes(e))?!1:t.every(([i,s])=>{const h=o.find(a=>a.field===i);return h?ye(h,n).toLowerCase().includes(s.trim().toLowerCase()):!0}));if(v){const n=o.find(i=>i.field===v.field);if(n){const i=v.direction==="asc"?1:-1;r=[...r].sort((s,h)=>{const a=V(s.row,n.field),u=V(h.row,n.field),p=a==null||a==="",N=u==null||u==="";return p||N?p===N?0:p?1:-1:(n.comparator?n.comparator(a,u,s.row,h.row):gt(a,u))*i})}}return r},[Pe,o,H,Q,v]);f.useEffect(()=>X(0),[H,Q,v,I]);const Ie=f.useRef(null),G=te.length,re=k?Math.max(1,Math.ceil(G/I)):1,C=Math.min(Ye,re-1),M=k?te.slice(C*I,C*I+I):te,Qe=G===0?0:k?C*I+1:1,Xe=k?Math.min(G,(C+1)*I):G,$e=e=>e.sortable??A,Le=`${C}|${I}|${v?`${v.field}:${v.direction}`:""}|${H}|${JSON.stringify(Q)}`,Te=f.useRef(!0);f.useEffect(()=>{if(Te.current){Te.current=!1;return}const e=Ie.current;e&&typeof e.scrollTo=="function"&&e.scrollTop>0&&e.scrollTo({top:0,behavior:"smooth"})},[Le]);const se=(e,t,r)=>({value:V(t,e.field),formattedValue:ye(e,t),row:t,rowIndex:r,field:e.field,column:e}),xe=(e,t)=>{const r=e.editable??g;return typeof r=="function"?r(t):!!r},ae=(e,t)=>xe(e,t)&&!(e.type==="boolean"&&!e.cellEditor),Ze=(e,t)=>{const r=se(e,t.row,t.index),n=xe(e,r);return{...r,editable:n,updateValue:i=>n&&Fe(t,e,{value:i})}},Be=e=>{if(!$e(e))return;let t;!v||v.field!==e.field?t={field:e.field,direction:"asc"}:v.direction==="asc"?t={field:e.field,direction:"desc"}:t=null,Ue(t),T==null||T(t)},de=(e,t)=>{var r;return(r=ke.current.get(Oe(e,t)))==null?void 0:r.focus()},J=()=>{q.current+=1,ee(null)},ce=(e,t,r={})=>{if(!ae(t,se(t,e.row,e.index)))return!1;const n=V(e.row,t.field),i=t.cellEditor?n:r.text??(n==null?"":String(n));return le.current=i,q.current+=1,ee({id:e.id,field:t.field,draft:i,session:q.current,select:r.select??"end",invalid:!1}),!0},Fe=(e,t,r)=>{const n=Y.current[e.index]??e.row,i=V(n,t.field);let s;if("value"in r)s=r.value;else if(t.valueParser)s=t.valueParser(r.text,n);else if(t.type==="number")if(r.text.trim()==="")s=null;else{const u=Number(r.text);if(!Number.isFinite(u))return!1;s=u}else s=r.text;if(Object.is(s,i))return!0;if(t.validate&&!t.validate(s,n))return!1;const h=Ee(n,t.field,s),a=Y.current.map((u,p)=>p===e.index?h:u);return De(a),x==null||x({rowId:e.id,rowIndex:e.index,field:t.field,oldValue:i,newValue:s,row:h}),m==null||m(a),!0},Me=(e,t,r)=>{const n=M.findIndex(p=>p.id===e.id),i=o.findIndex(p=>p.field===t);if(n<0||i<0)return null;const s=(p,N)=>ae(N,se(N,p.row,p.index));if(r==="down"||r==="up"){const p=r==="down"?1:-1;for(let N=n+p;N>=0&&N<M.length;N+=p)if(s(M[N],o[i]))return{entry:M[N],col:o[i]};return null}const h=r==="right"?1:-1;let a=n,u=i+h;for(;a>=0&&a<M.length;){for(;u>=0&&u<o.length;){if(s(M[a],o[u]))return{entry:M[a],col:o[u]};u+=h}a+=h,u=h>0?0:o.length-1}return null},ne=(e,t,r,n={})=>{const{move:i="none",focus:s=!0}=n;if(!Fe(e,t,r))return ee(a=>a&&{...a,invalid:!0}),!1;const h=i==="none"?null:Me(e,t.field,i);return h?ce(h.entry,h.col,{select:"all"}):(J(),s&&de(e.id,t.field)),!0},et=(e,t,r)=>{if(e.nativeEvent.isComposing)return;const n=e.currentTarget.value;if(e.key==="Enter"){e.preventDefault();const i=P?e.shiftKey?"up":"down":"none";ne(t,r,{text:n},{move:i})}else if(e.key==="Escape")e.preventDefault(),J(),de(t.id,r.field);else if(e.key==="Tab"){const i=e.shiftKey?"left":"right";Me(t,r.field,i)&&(e.preventDefault(),ne(t,r,{text:n},{move:i}))}},tt=(e,t,r,n)=>{e.target!==e.currentTarget||!ae(r,n)||(e.key==="Enter"||e.key==="F2"?(e.preventDefault(),ce(t,r)):!r.cellEditor&&e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),ce(t,r,{text:e.key})))},rt=(e,t,r)=>t.cellEditor?l.jsx("div",{className:"rk-grid__custom-editor",onBlur:n=>{n.currentTarget.contains(n.relatedTarget)||r.session===q.current&&(ne(e,t,{value:le.current},{focus:!1})||J())},onKeyDown:n=>{n.key==="Escape"&&(n.preventDefault(),n.stopPropagation(),J(),de(e.id,t.field))},children:f.createElement(t.cellEditor,{value:r.draft,row:e.row,rowIndex:e.index,field:t.field,column:t,onChange:n=>{le.current=n,ee(i=>i&&i.session===r.session?{...i,draft:n,invalid:!1}:i)},onCommit:(n,i="none")=>{r.session===q.current&&ne(e,t,{value:n===void 0?le.current:n},{move:i})},onCancel:()=>{J(),de(e.id,t.field)}})}):l.jsx("input",{autoFocus:!0,className:D("rk-grid__editor",r.invalid&&"rk-grid__editor--invalid",S.editor),style:{textAlign:t.align,...j.editor},value:r.draft===null||r.draft===void 0?"":String(r.draft),inputMode:t.type==="number"?"decimal":void 0,"aria-label":`Edit ${he(t)}`,"aria-invalid":r.invalid||void 0,onChange:n=>{const i=n.target.value;ee(s=>s&&{...s,draft:i,invalid:!1})},onFocus:n=>{const i=n.currentTarget;r.select==="all"?i.select():i.setSelectionRange(i.value.length,i.value.length)},onBlur:n=>{r.session===q.current&&(ne(e,t,{text:n.currentTarget.value},{focus:!1})||J())},onKeyDown:n=>et(n,e,t)}),Ke=e=>{var r,n,i,s,h,a,u,p;const t=e.checkbox??{};return{variant:t.variant??F,indicator:t.indicator,className:t.className,style:t.style,classNames:{root:D(S.checkbox,(r=t.classNames)==null?void 0:r.root),control:D(S.checkboxControl,(n=t.classNames)==null?void 0:n.control),indicator:D(S.checkboxIndicator,(i=t.classNames)==null?void 0:i.indicator),label:(s=t.classNames)==null?void 0:s.label},styles:{root:{...j.checkbox,...(h=t.styles)==null?void 0:h.root},control:{...j.checkboxControl,...(a=t.styles)==null?void 0:a.control},indicator:{...j.checkboxIndicator,...(u=t.styles)==null?void 0:u.indicator},label:(p=t.styles)==null?void 0:p.label}}},ue=e=>e.stopPropagation(),nt=(e,t)=>l.jsx("span",{className:"rk-grid__checkbox-cell",onClick:ue,onDoubleClick:ue,children:l.jsx(je,{...Ke(e),checked:!!t.value,disabled:!t.editable,"aria-label":`Toggle ${he(e)}`,onChange:r=>t.updateValue(r)})}),Re=e=>te.filter(t=>xe(e,se(e,t.row,t.index))),ot=(e,t)=>{const r=new Map(Re(e).map(s=>[s.index,s])),n=[],i=Y.current.map((s,h)=>{const a=r.get(h);if(!a)return s;const u=V(s,e.field);if(!!u===t||e.validate&&!e.validate(t,s))return s;const p=Ee(s,e.field,t);return n.push({rowId:a.id,rowIndex:h,field:e.field,oldValue:u,newValue:t,row:p}),p});n.length!==0&&(De(i),n.forEach(s=>x==null?void 0:x(s)),m==null||m(i))},it=e=>{const t=Re(e),r=t.length>0?t:te,n=r.filter(s=>!!V(s.row,e.field)).length,i=r.length>0&&n===r.length;return l.jsx("span",{className:"rk-grid__header-checkbox",onClick:ue,onDoubleClick:ue,children:l.jsx(je,{...Ke(e),checked:i,indeterminate:n>0&&!i,disabled:t.length===0,label:Se(e)||void 0,"aria-label":`Select all ${he(e)}`,onChange:s=>ot(e,s)})})},lt=pe||!!b,st=b?{"--rk-stripe-a":b[0],"--rk-stripe-b":b[1]}:void 0,at=k&&(E==="top"||E==="both"),dt=!k||E==="bottom"||E==="both",Ve=e=>l.jsxs("div",{className:D("rk-grid__footer",e==="top"&&"rk-grid__footer--top",S.footer),style:j.footer,"data-position":e,children:[l.jsx("span",{..._("rowCount","rk-grid__count"),children:G===0?"0 rows":`${Qe}–${Xe} of ${G}`}),k&&l.jsxs("div",{..._("pagination","rk-grid__pagination"),children:[l.jsxs("label",{className:"rk-grid__page-size-label",children:["Rows per page",l.jsx("select",{value:I,onChange:t=>He(Number(t.target.value)),..._("pageSize","rk-grid__page-size"),children:(y.includes(I)?y:[...y,I].sort((t,r)=>t-r)).map(t=>l.jsx("option",{value:t,children:t},t))})]}),l.jsx("button",{type:"button","aria-label":"First page",disabled:C===0,onClick:()=>X(0),..._("pageButton","rk-grid__page-btn"),children:"«"}),l.jsx("button",{type:"button","aria-label":"Previous page",disabled:C===0,onClick:()=>X(C-1),..._("pageButton","rk-grid__page-btn"),children:"‹"}),l.jsxs("span",{..._("pageInfo","rk-grid__page-info"),children:["Page ",C+1," of ",re]}),l.jsx("button",{type:"button","aria-label":"Next page",disabled:C>=re-1,onClick:()=>X(C+1),..._("pageButton","rk-grid__page-btn"),children:"›"}),l.jsx("button",{type:"button","aria-label":"Last page",disabled:C>=re-1,onClick:()=>X(re-1),..._("pageButton","rk-grid__page-btn"),children:"»"})]})]});return l.jsxs("div",{className:D("rk-grid",S.root,ie),style:{...st,...j.root,...qe},"data-rk-theme":L||void 0,children:[(W||O)&&l.jsxs("div",{..._("toolbar","rk-grid__toolbar"),children:[W?l.jsx("input",{type:"search",value:H,onChange:e=>Ge(e.target.value),placeholder:w,"aria-label":"Search all columns",..._("search","rk-grid__search")}):l.jsx("span",{}),O]}),at&&Ve("top"),l.jsx("div",{ref:Ie,..._("scroll","rk-grid__scroll"),style:{...j.scroll,...R!==void 0?{maxHeight:R}:null},children:l.jsxs("table",{..._("table","rk-grid__table"),role:"grid",children:[l.jsx("thead",{..._("thead","rk-grid__thead"),children:l.jsx("tr",{..._("headerRow","rk-grid__tr"),children:o.map(e=>{const t=(v==null?void 0:v.field)===e.field?v.direction:null,r=$e(e);return l.jsx("th",{scope:"col","aria-sort":t?t==="asc"?"ascending":"descending":r?"none":void 0,tabIndex:r?0:void 0,onClick:()=>Be(e),onKeyDown:n=>{r&&n.target===n.currentTarget&&(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),Be(e))},className:D("rk-grid__th",r&&"rk-grid__th--sortable",S.headerCell,e.className,e.headerClassName),style:{width:e.width,minWidth:e.minWidth,textAlign:e.align,...j.headerCell,...e.style,...e.headerStyle},children:l.jsxs("span",{className:"rk-grid__th-content",children:[e.headerRenderer?f.createElement(e.headerRenderer,{column:e,sortDirection:t}):e.headerCheckbox&&e.type==="boolean"?it(e):Se(e),e.filterable&&l.jsx(pt,{column:e,label:he(e),value:Q[e.field]??"",onChange:n=>Je(i=>({...i,[e.field]:n})),theme:L,indicatorClassName:D(S.filterIndicator,e.filterIndicatorClassName),indicatorStyle:{...j.filterIndicator,...e.filterIndicatorStyle},popupClassName:D(S.filterPopup,e.filterPopupClassName),popupStyle:{...j.filterPopup,...e.filterPopupStyle},inputClassName:S.filterInput,inputStyle:j.filterInput}),r&&l.jsx("span",{className:"rk-grid__sort","aria-hidden":"true",children:t==="asc"?"▲":t==="desc"?"▼":"↕"})]})},e.field)})})}),l.jsx("tbody",{..._("tbody","rk-grid__tbody"),children:M.length===0?l.jsx("tr",{children:l.jsx("td",{colSpan:o.length,..._("empty","rk-grid__empty"),children:$})}):M.map((e,t)=>{const{row:r,id:n,index:i}=e,s=typeof ge=="function"?ge(r,i):ge,h=typeof be=="function"?be(r,i):be;return l.jsx("tr",{onClick:z?()=>z(r,i):void 0,className:D("rk-grid__tr","rk-grid__row",lt&&(t%2===0?"rk-grid__row--stripe-a":"rk-grid__row--stripe-b"),K&&"rk-grid__row--enter",z&&"rk-grid__row--clickable",S.row,s),style:{...K?{"--rk-i":Math.min(t,24)}:null,...j.row,...h},children:o.map(a=>{const u=Ze(a,e),p=typeof a.cellClassName=="function"?a.cellClassName(u):a.cellClassName,N=typeof a.cellStyle=="function"?a.cellStyle(u):a.cellStyle,_e=Z!==null&&Z.id===n&&Z.field===a.field,me=ae(a,u);return l.jsx("td",{ref:fe=>{const Ae=Oe(n,a.field);fe?ke.current.set(Ae,fe):ke.current.delete(Ae)},tabIndex:me?0:void 0,onDoubleClick:me?()=>ce(e,a):void 0,onKeyDown:fe=>tt(fe,e,a,u),className:D("rk-grid__td",me&&"rk-grid__td--editable",_e&&"rk-grid__td--editing",S.cell,a.className,p),style:{textAlign:a.align,...j.cell,...a.style,...N},children:_e&&Z?rt(e,a,Z):a.cellRenderer?f.createElement(a.cellRenderer,u):a.type==="boolean"&&!a.cellEditor?nt(a,u):u.formattedValue},a.field)})},n)})},Le)]})}),dt&&Ve("bottom")]})}exports.Checkbox=je;exports.DataGrid=bt;