@cronocode/react-box 3.1.8 → 3.1.10

package/BOX_AI_CONTEXT.md

@@ -249,6 +249,46 @@ p={8}   // → 2rem = 32px
 | `minWidth`, `maxWidth`   | min/max-width  | number or string                                                    |
 | `minHeight`, `maxHeight` | min/max-height | number or string                                                    |
 
+**Percentage/Fraction Values:**
+
+All sizing, spacing, and positioning props accept percentage strings:
+
+```tsx
+// Sizing
+width="33%"     // → 33%
+height="50%"    // → 50%
+minWidth="20%"  // → min-width: 20%
+maxWidth="80%"  // → max-width: 80%
+minHeight="10%" // → min-height: 10%
+maxHeight="90%" // → max-height: 90%
+
+// Spacing (margin, padding, gap)
+p="5%"          // → padding: 5%
+px="10%"        // → padding-left/right: 10%
+m="10%"         // → margin: 10%
+mt="5%"         // → margin-top: 5%
+gap="2%"        // → gap: 2%
+
+// Positioning
+top="10%"       // → top: 10%
+left="50%"      // → left: 50%
+right="0%"      // → right: 0%
+bottom="20%"    // → bottom: 20%
+
+// Fraction shortcuts (width/height only)
+width="1/2"   // → 50%
+width="1/3"   // → 33.333%
+width="2/3"   // → 66.666%
+width="1/4"   // → 25%
+width="3/4"   // → 75%
+
+// Special values
+width="fit"        // → 100%
+width="fit-screen" // → 100vw
+height="fit"       // → 100%
+height="fit-screen"// → 100vh
+```
+
 ### Colors (Tailwind-like palette)
 
 | Prop          | CSS Property     |
@@ -816,6 +856,256 @@ resetStyles();
 
 ---
 
+## DataGrid Component
+
+A powerful data grid with sorting, filtering, grouping, row selection, column pinning, and virtualization.
+
+### Import and Basic Usage
+
+```tsx
+import DataGrid from '@cronocode/react-box/components/dataGrid';
+
+const data = [
+  { id: 1, name: 'John', email: 'john@example.com', age: 30 },
+  { id: 2, name: 'Jane', email: 'jane@example.com', age: 25 },
+];
+
+<DataGrid
+  data={data}
+  def={{
+    columns: [
+      { key: 'name', header: 'Name' },
+      { key: 'email', header: 'Email' },
+      { key: 'age', header: 'Age', align: 'right' },
+    ],
+  }}
+/>;
+```
+
+### GridDefinition Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `columns` | `ColumnType[]` | Column definitions (required) |
+| `rowKey` | `keyof TRow \| (row) => Key` | Unique key for each row |
+| `rowHeight` | `number` | Row height in pixels (default: 36) |
+| `visibleRowsCount` | `number` | Number of visible rows (default: 10) |
+| `showRowNumber` | `boolean \| { pinned?: boolean; width?: number }` | Show row numbers |
+| `rowSelection` | `boolean \| { pinned?: boolean }` | Enable row selection checkboxes |
+| `topBar` | `boolean` | Show top bar with title and controls |
+| `bottomBar` | `boolean` | Show bottom bar with row count |
+| `title` | `ReactNode` | Title displayed in top bar |
+| `topBarContent` | `ReactNode` | Custom content in top bar |
+| `globalFilter` | `boolean` | Enable global search filter |
+| `globalFilterKeys` | `Key[]` | Columns to search (default: all) |
+| `sortable` | `boolean` | Enable sorting globally (default: true) |
+| `resizable` | `boolean` | Enable column resizing globally (default: true) |
+| `noDataComponent` | `ReactNode` | Custom empty state component |
+
+### ColumnType Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `key` | `string \| number` | Column key matching data property (required) |
+| `header` | `string` | Column header text |
+| `width` | `number` | Column width in pixels |
+| `align` | `'left' \| 'right' \| 'center'` | Text alignment |
+| `pin` | `'LEFT' \| 'RIGHT'` | Pin column to side |
+| `columns` | `ColumnType[]` | Nested columns for grouping |
+| `sortable` | `boolean` | Override global sortable setting |
+| `resizable` | `boolean` | Override global resizable setting |
+| `flexible` | `boolean` | Participate in flex distribution (default: true) |
+| `filterable` | `boolean \| FilterConfig` | Enable column filtering |
+| `Cell` | `React.ComponentType<{ cell }>` | Custom cell renderer |
+
+### DataGridProps
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `data` | `TRow[]` | Data array (required) |
+| `def` | `GridDefinition` | Grid definition (required) |
+| `loading` | `boolean` | Show loading state |
+| `onSelectionChange` | `(event) => void` | Selection change callback |
+| `globalFilterValue` | `string` | Controlled global filter |
+| `onGlobalFilterChange` | `(value) => void` | Global filter change callback |
+| `columnFilters` | `ColumnFilters` | Controlled column filters |
+| `onColumnFiltersChange` | `(filters) => void` | Column filters change callback |
+
+### Filter Types
+
+```tsx
+// Text filter (default) - fuzzy search
+{ key: 'name', filterable: true }
+{ key: 'name', filterable: { type: 'text', placeholder: 'Search...' } }
+
+// Number filter - with comparison operators
+{ key: 'age', filterable: { type: 'number', min: 0, max: 100 } }
+
+// Multiselect filter - dropdown with checkboxes
+{ key: 'status', filterable: { type: 'multiselect' } }
+{ key: 'status', filterable: {
+  type: 'multiselect',
+  options: [
+    { label: 'Active', value: 'active' },
+    { label: 'Inactive', value: 'inactive' },
+  ]
+}}
+```
+
+### Column Grouping (Nested Headers)
+
+```tsx
+columns: [
+  {
+    key: 'personal',
+    header: 'Personal Info',
+    columns: [
+      { key: 'firstName', header: 'First Name' },
+      { key: 'lastName', header: 'Last Name' },
+    ],
+  },
+  {
+    key: 'contact',
+    header: 'Contact',
+    columns: [
+      { key: 'email', header: 'Email' },
+      { key: 'phone', header: 'Phone' },
+    ],
+  },
+]
+```
+
+### Custom Cell Renderer
+
+```tsx
+columns: [
+  {
+    key: 'status',
+    header: 'Status',
+    Cell: ({ cell }) => (
+      <Box
+        px={2}
+        py={1}
+        borderRadius={4}
+        bgColor={cell.value === 'active' ? 'green-100' : 'red-100'}
+        color={cell.value === 'active' ? 'green-800' : 'red-800'}
+      >
+        {cell.value}
+      </Box>
+    ),
+  },
+  {
+    key: 'actions',
+    header: 'Actions',
+    Cell: ({ cell }) => (
+      <Button onClick={() => handleEdit(cell.row)}>Edit</Button>
+    ),
+  },
+]
+```
+
+The `cell` object provides:
+- `cell.value` - Cell value
+- `cell.row` - Full row data
+- `cell.column` - Column model
+
+### Row Selection
+
+```tsx
+<DataGrid
+  data={data}
+  def={{
+    rowSelection: true,  // or { pinned: true } to pin checkbox column
+    columns: [...],
+  }}
+  onSelectionChange={(event) => {
+    console.log('Selected keys:', event.selectedRowKeys);
+    console.log('Action:', event.action); // 'select' | 'deselect'
+    console.log('All selected:', event.isAllSelected);
+  }}
+/>
+```
+
+### Sorting and Resizing Control
+
+```tsx
+// Disable globally
+def={{
+  sortable: false,
+  resizable: false,
+  columns: [...]
+}}
+
+// Override per column
+def={{
+  sortable: false,  // Global: no sorting
+  columns: [
+    { key: 'id', header: 'ID' },  // Not sortable (inherits global)
+    { key: 'name', header: 'Name', sortable: true },  // Sortable (override)
+  ]
+}}
+```
+
+### Flexible Column Sizing
+
+Columns automatically fill available space proportionally. Use `flexible: false` for fixed-width columns.
+
+```tsx
+columns: [
+  { key: 'id', header: 'ID', width: 60, flexible: false },  // Fixed at 60px
+  { key: 'name', header: 'Name', width: 200 },  // Flexes (200 base)
+  { key: 'email', header: 'Email', width: 300 },  // Flexes more (300 base)
+]
+```
+
+### Custom Empty State
+
+```tsx
+def={{
+  columns: [...],
+  noDataComponent: (
+    <Flex d="column" ai="center" gap={4} p={8}>
+      <Box fontSize={48}>📭</Box>
+      <Box color="gray-500">No records found</Box>
+    </Flex>
+  ),
+}}
+```
+
+### Full-Featured Example
+
+```tsx
+<DataGrid
+  data={users}
+  def={{
+    title: 'Users Table',
+    topBar: true,
+    bottomBar: true,
+    globalFilter: true,
+    rowSelection: { pinned: true },
+    showRowNumber: { pinned: true },
+    rowHeight: 40,
+    visibleRowsCount: 10,
+    columns: [
+      {
+        key: 'personal',
+        header: 'Personal',
+        columns: [
+          { key: 'name', header: 'Name', filterable: true },
+          { key: 'age', header: 'Age', width: 80, align: 'right', filterable: { type: 'number' } },
+        ],
+      },
+      { key: 'email', header: 'Email', width: 250, filterable: true },
+      { key: 'status', header: 'Status', filterable: { type: 'multiselect' } },
+      { key: 'country', header: 'Country', pin: 'RIGHT' },
+    ],
+  }}
+  onSelectionChange={(e) => setSelected(e.selectedRowKeys)}
+/>
+```
+
+---
+
 ## Debugging Tips
 
 1. **Inspect styles**: Look for `<style id="crono-box">` in document head

package/components/dataGrid/contracts/dataGridContract.d.ts

@@ -103,6 +103,8 @@ export interface GridDefinition<TRow> {
     sortable?: boolean;
     /** Enable resizing for all columns. Default is true. Individual column settings take priority. */
     resizable?: boolean;
+    /** Custom component to render when data is empty */
+    noDataComponent?: React.ReactNode;
 }
 export interface DataGridProps<TRow> {
     data: TRow[];
@@ -117,6 +119,8 @@ export interface DataGridProps<TRow> {
     columnFilters?: ColumnFilters<TRow>;
     /** Callback when column filters change */
     onColumnFiltersChange?: (filters: ColumnFilters<TRow>) => void;
+    /** External predicate filters applied before global/column filters. Memoize with useMemo for performance. */
+    filters?: ((row: TRow) => boolean)[];
 }
 interface SelectionChangeEvent<TRow, TKey = TRow[keyof TRow] | number | string> {
     action: 'select' | 'deselect';

package/components/dataGrid/models/gridModel.d.ts

@@ -41,7 +41,11 @@ export default class GridModel<TRow> {
      */
     private matchesFilter;
     /**
-     * Get filtered data (applies global filter then column filters)
+     * Apply external predicate filters from the filters prop
+     */
+    private applyExternalFilters;
+    /**
+     * Get filtered data (applies external, global, then column filters)
      */
     get filteredData(): TRow[];
     /**

package/components/dataGrid.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),h=require("react"),m=require("../box.cjs"),f=require("./flex.cjs"),ne=require("./grid.cjs"),w=require("../core.cjs"),ee=require("./checkbox.cjs"),_=require("./button.cjs"),le=require("./baseSvg.cjs"),R=require("./dropdown.cjs"),z=require("./textbox.cjs"),B=require("./semantics.cjs"),Se=require("./tooltip.cjs");function Fe(l){const{grid:e}=l,{filtered:t,total:i}=e.filterStats,r=e.hasActiveFilters;return s.jsxs(f.default,{component:"datagrid.bottomBar",children:[s.jsxs(m.default,{children:["Rows: ",r?`${t} / ${i}`:i]}),e.props.def.rowSelection&&s.jsxs(m.default,{children:["Selected: ",e.selectedRows.size]}),r&&s.jsx(m.default,{color:"blue-600",cursor:"pointer",hover:{textDecoration:"underline"},props:{onClick:e.clearAllFilters},children:"Clear filters"})]})}function oe(l){const{cell:e}=l,t=h.useCallback(()=>{e.grid.toggleRowSelection(e.row.key)},[e.grid,e.row.key]);return s.jsx(ee.default,{variant:"datagrid",checked:e.row.selected,onChange:t})}oe.displayName="DataGridCellRowSelection";const Ge="NO_PIN";class M{constructor(e,t,i){if(this.def=e,this.grid=t,this.parent=i,this.columns=e.columns?.map(r=>new M(e.pin?{...r,pin:e.pin}:r,t,this))??[],this.isLeaf){const r=this.grid.columnWidths.get(this.key);this._inlineWidth=this.key==D?void 0:r??this.def.width??this.grid.DEFAULT_COLUMN_WIDTH_PX,this._pin=e.pin}}columns=[];get visibleColumns(){return this.columns.filter(e=>e.isVisible)}get isFirstLeaf(){const{leafs:e}=this;return e.length>0&&e.at(0)===this}get isLastLeaf(){const{leafs:e}=this;return e.length>0&&e.at(-1)===this}get key(){return this.def.key}get header(){return this.def.header}get align(){return this.def.align}get isLeaf(){return this.columns.length===0}get Cell(){return this.def.Cell}get filterable(){return this.def.filterable}get sortable(){return this.def.sortable!==void 0?this.def.sortable:this.grid.props.def.sortable!==!1}get resizable(){return this.def.resizable!==void 0?this.def.resizable:this.grid.props.def.resizable!==!1}get isFlexible(){return this.def.flexible!==!1}get baseWidth(){return this._inlineWidth??this.grid.DEFAULT_COLUMN_WIDTH_PX}_pin;get pin(){if(this.isLeaf)return this._pin;const e=[...new Set(this.columns.flatMap(t=>t.pin))];if(e.length===1)return e[0]}get uniqueKey(){return`${this.key}${this.pin??""}`}getPinnedColumn(e){if(this.hasPin(e)){if(this.isLeaf)return this;const t=new M({...this.def,pin:e},this.grid,this.parent);return t.columns=this.columns.filter(i=>i.hasPin(e)).map(i=>{const r=i.getPinnedColumn(e);return r.parent=t,r}).filter(i=>!!i),t}}hasPin(e){return this.isLeaf?this._pin===e:this.columns.some(t=>t.hasPin(e))}get death(){return this.parent?this.parent.death+1:0}get flatColumns(){const e=[this];return e.push(...this.columns.flatMap(t=>t.flatColumns)),e}_inlineWidth;get inlineWidth(){if(this.isLeaf)return this.grid.getFlexWidth(this.key)??this._inlineWidth;const e=this.visibleColumns.map(t=>t.inlineWidth).filter(t=>typeof t=="number");if(e.length!==0)return e.sumBy(t=>t)}get left(){let e=0;if(this.parent){const{visibleColumns:t,left:i}=this.parent,r=t.findIndex(n=>n===this);e+=t.sumBy((n,a)=>a<r?n.inlineWidth??0:0),e+=i}else{const t=this.grid.columns.value.left.filter(r=>r.isVisible),i=t.findIndex(r=>r===this);e+=t.sumBy((r,n)=>n<i?r.inlineWidth??0:0)}return e}get right(){let e=0;if(this.parent){const{visibleColumns:t}=this.parent,i=t.reverse(),r=i.findIndex(n=>n===this);e+=i.sumBy((n,a)=>a<r?n.inlineWidth??0:0),e+=this.parent.right}else{const i=this.grid.columns.value.right.filter(n=>n.isVisible).reverse(),r=i.findIndex(n=>n===this);e+=i.sumBy((n,a)=>a<r?n.inlineWidth??0:0)}return e}get isEdge(){if(!this.pin)return!1;if(this.parent){const{visibleColumns:t}=this.parent;return(this.pin==="LEFT"?t.at(-1):t.at(0))===this&&this.parent.isEdge}return(this.pin==="LEFT"?this.grid.columns.value.left.filter(t=>t.isVisible).at(-1):this.grid.columns.value.right.filter(t=>t.isVisible).at(0))===this}get isVisible(){return this.isLeaf?!this.grid.hiddenColumns.has(this.key):this.leafs.some(e=>e.isVisible)}get leafs(){return this.isLeaf?[this]:this.visibleColumns.flatMap(e=>e.leafs)}get groupColumnWidthVarName(){return`--${this.uniqueKey}-group-width`}get widthVarName(){return`--${this.uniqueKey}-width`}get leftVarName(){return`--${this.uniqueKey}-left`}get rightVarName(){return`--${this.uniqueKey}-right`}get gridRows(){return this.isLeaf?this.grid.columns.value.maxDeath-this.death:1}resizeColumn=e=>{const t=e.pageX,{MIN_COLUMN_WIDTH_PX:i,update:r}=this.grid,n=this.leafs.toRecord(u=>[u.key,u.inlineWidth??u.baseWidth]),a=this.leafs.sumBy(u=>n[u.key])-this.leafs.length*i,d=w.FnUtils.throttle(u=>{const p=(u.pageX-t)*(this.pin==="RIGHT"?-1:1);this.leafs.forEach(g=>{const y=n[g.key],b=a>0?(y-i)/a*p:p/this.leafs.length,j=Math.round(y+b);g.setWidth(j<i?i:j)}),this.grid.flexWidths.clear(),this.grid.sizes.clear(),r()},40),c=new AbortController,o=u=>{c.abort(),r()};window.addEventListener("mousemove",d,c),window.addEventListener("mouseup",o,c)};pinColumn=e=>{this.isLeaf?this._pin=e:this.columns.forEach(t=>t.pinColumn(e)),this.grid.pinColumn(this.uniqueKey,e)};toggleGrouping=()=>{this.grid.toggleGrouping(this.key)};sortColumn=(...e)=>{this.grid.setSortColumn(this.key,...e)};setWidth=e=>{if(!this.isLeaf)throw new Error("Cannot set width for a parent column.");this._inlineWidth!==e&&(this._inlineWidth=e,this.grid.setWidth(this.key,e))};toggleVisibility=()=>{this.grid.toggleColumnVisibility(this.key)}}class Te{constructor(e,t,i){this.grid=e,this.row=t,this.column=i}get value(){return this.column.key===G?this.row.rowIndex+1:this.row.data[this.column.key]}}class te{constructor(e,t,i){this.grid=e,this.data=t,this.rowIndex=i,this.grid=e,this.data=t,this.key=this.grid.getRowKey(t)}key;parentRow;count=1;get cells(){return this.grid.columns.value.visibleLeafs.map(e=>new Te(this.grid,this,e))}get selected(){return this.grid.selectedRows.has(this.key)}get flatRows(){return this}get allRows(){return this}}const D="empty-cell",G="row-number-cell",ie=70,W="row-selection-cell",L="grouping-cell";class Le{constructor(e,t){this.props=e,this.update=t,console.debug("\x1B[32m%s\x1B[0m","[react-box]: DataGrid GridModel ctor")}sourceColumns=w.memo(()=>{const{def:e}=this.props,t=[];if(this.groupColumns.size>0&&t.push(new M({key:L},this)),t.push(...e.columns.map(i=>new M(i,this))),e.rowSelection){const i=typeof e.rowSelection=="object"&&e.rowSelection.pinned?"LEFT":void 0;t.unshift(new M({key:W,pin:i,width:50,align:"center",Cell:oe},this))}if(e.showRowNumber){let i,r=ie;typeof e.showRowNumber=="object"&&(e.showRowNumber.pinned&&(i="LEFT"),r=e.showRowNumber.width??ie),t.unshift(new M({key:G,pin:i,width:r,align:"right"},this))}return t});columns=w.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid columns memo");const e=this.sourceColumns.value.map(o=>o.getPinnedColumn("LEFT")).filter(o=>!!o),t=this.sourceColumns.value.map(o=>o.getPinnedColumn()).filter(o=>!!o),i=this.sourceColumns.value.map(o=>o.getPinnedColumn("RIGHT")).filter(o=>!!o),r=[...e,...t,...i].flatMap(o=>o.flatColumns),n=r.filter(o=>o.isLeaf),a=r.filter(o=>o.isLeaf&&o.isVisible),d=a.filter(o=>![D,G,W,L].includes(o.key)),c=r.maxBy(o=>o.death)+1;return{left:e,middle:t,right:i,flat:r,leafs:n,visibleLeafs:a,userVisibleLeafs:d,maxDeath:c}});headerRows=w.memo(()=>(console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid headerRows memo"),this.columns.value.flat.groupBy(t=>t.death).sortBy(t=>t.key).map(t=>{const i=t.values.groupBy(r=>r.pin??Ge).toRecord(r=>[r.key,r.values]);return[...i.LEFT?.filter(r=>r.isVisible)??[],...i.NO_PIN?.filter(r=>r.isVisible)??[],...i.RIGHT?.filter(r=>r.isVisible)??[]]})));gridTemplateColumns=w.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid gridTemplateColumns memo");const{visibleLeafs:e}=this.columns.value,t=e.sumBy(a=>a.pin==="RIGHT"?1:0),i=e.length-t,r=i>0?`repeat(${i}, max-content)`:"",n=t>0?`repeat(${t}, max-content)`:"";return`${r} ${n}`.trim()});_globalFilterValue="";get globalFilterValue(){return this.props.globalFilterValue??this._globalFilterValue}_columnFilters={};get columnFilters(){return this.props.columnFilters??this._columnFilters}applyGlobalFilter(e){const t=this.globalFilterValue.trim();if(!t)return e;const{globalFilterKeys:i}=this.props.def,r=i??this.columns.value.leafs.filter(n=>n.key!==D&&n.key!==G&&n.key!==W&&n.key!==L).map(n=>n.key);return e.filter(n=>r.some(a=>{const d=n[a];return d==null?!1:w.fuzzySearch(t,String(d))}))}applyColumnFilters(e){const t=this.columnFilters,i=Object.keys(t);return i.length===0?e:e.filter(r=>i.every(n=>{const a=t[n];if(!a)return!0;const d=r[n];return this.matchesFilter(d,a)}))}matchesFilter(e,t){switch(t.type){case"text":return t.value.trim()?e==null?!1:w.fuzzySearch(t.value,String(e)):!0;case"number":{if(e==null)return!1;const i=typeof e=="number"?e:parseFloat(String(e));if(isNaN(i))return!1;switch(t.operator){case"eq":return i===t.value;case"ne":return i!==t.value;case"gt":return i>t.value;case"gte":return i>=t.value;case"lt":return i<t.value;case"lte":return i<=t.value;case"between":return t.valueTo!==void 0?i>=t.value&&i<=t.valueTo:i>=t.value;default:return!0}}case"multiselect":return t.values.length===0?!0:t.values.includes(e);default:return!0}}get filteredData(){let e=this.props.data;return this.props.def.globalFilter&&(e=this.applyGlobalFilter(e)),e=this.applyColumnFilters(e),e}setGlobalFilter=e=>{this.props.onGlobalFilterChange?this.props.onGlobalFilterChange(e):this._globalFilterValue=e,this.rows.clear(),this.flatRows.clear(),this.update()};setColumnFilter=(e,t)=>{const i={...this.columnFilters};t===void 0?delete i[e]:i[e]=t,this.props.onColumnFiltersChange?this.props.onColumnFiltersChange(i):this._columnFilters=i,this.rows.clear(),this.flatRows.clear(),this.update()};clearColumnFilters=()=>{this.props.onColumnFiltersChange?this.props.onColumnFiltersChange({}):this._columnFilters={},this.rows.clear(),this.flatRows.clear(),this.update()};clearAllFilters=()=>{this.setGlobalFilter(""),this.clearColumnFilters()};getColumnUniqueValues=e=>{const t=new Set;return this.props.data.forEach(i=>{const r=i[e];r!==void 0&&t.add(r)}),Array.from(t).sort((i,r)=>i===null?1:r===null?-1:typeof i=="string"&&typeof r=="string"?i.localeCompare(r):typeof i=="number"&&typeof r=="number"?i-r:String(i).localeCompare(String(r)))};get hasActiveFilters(){return this.globalFilterValue.trim()!==""||Object.keys(this.columnFilters).length>0}get filterStats(){return{filtered:this.filteredData.length,total:this.props.data.length}}rows=w.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid rows memo");let e=this.filteredData;if(this._sortColumn&&(e=e.sortBy(t=>t[this._sortColumn],this._sortDirection)),this.groupColumns.size>0){const t=(i,r,n)=>{const a=r.values().next().value;r.delete(a);const d=this.columns.value.leafs.findOrThrow(c=>c.key===a);return this._sortColumn===L&&(i=i.sortBy(c=>c[a],this._sortDirection)),i.groupBy(c=>c[a]).map(c=>{let o;r.size>0?o=t(c.values,new Set(r),n+1):o=c.values.map((p,g)=>new te(this,p,n+1+g));const u=new ae(this,d,o,n,c.key);return n+=1,u.expanded&&(n+=o.length),u})};return t(e,new Set(this.groupColumns),0)}return e.map((t,i)=>new te(this,t,i))});flatRows=w.memo(()=>(console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid flatRows memo"),this.rows.value.flatMap(e=>e.flatRows)));get rowHeight(){return this.props.def.rowHeight??this.DEFAULT_ROW_HEIGHT_PX}sizes=w.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid sizes memo");const e=this.columns.value.flat.reduce((r,n)=>{const{inlineWidth:a}=n;return typeof a=="number"&&(r[n.widthVarName]=`${n.inlineWidth}px`),n.pin==="LEFT"&&(r[n.leftVarName]=`${n.left}px`),n.pin==="RIGHT"&&(r[n.rightVarName]=`${n.right}px`),r},{});e[this.rowHeightVarName]=`${this.rowHeight}px`,e[this.leftEdgeVarName]=`${this.leftEdge}px`;const{visibleLeafs:t}=this.columns.value,i=t.find(r=>r.key===L);if(i){const r=t.sumBy(n=>n.pin===i.pin&&n.key!==G&&n.key!==W?n.inlineWidth??0:0);e[i.groupColumnWidthVarName]=`${r}px`}return this.groupColumns.forEach(r=>{const n=this.columns.value.leafs.findOrThrow(a=>a.key===r);e[n.groupColumnWidthVarName]=`${t.sumBy(a=>a.pin===n.pin?a.inlineWidth??0:0)}px`}),e});_containerWidth=0;get containerWidth(){return this._containerWidth}setContainerWidth=e=>{this._containerWidth!==e&&(this._containerWidth=e,this.flexWidths.clear(),this.sizes.clear(),this.update())};flexWidths=w.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid flexWidths memo");const e=this._containerWidth;if(e<=0)return{};const t=this.columns.value.visibleLeafs.filter(u=>u.key!==D),i=u=>!u.isFlexible||this.columnWidths.has(u.key),r=t.filter(i).sumBy(u=>u.baseWidth),n=t.filter(u=>!i(u)),a=n.sumBy(u=>u.baseWidth),d=e-r;if(d<=a)return n.toRecord(u=>[u.key,u.baseWidth]);const c={};let o=0;return n.forEach((u,p)=>{if(p===n.length-1)c[u.key]=d-o;else{const g=Math.floor(u.baseWidth/a*d);c[u.key]=g,o+=g}}),c});getFlexWidth(e){return this.flexWidths.value[e]}DEFAULT_ROW_HEIGHT_PX=48;MIN_COLUMN_WIDTH_PX=48;DEFAULT_COLUMN_WIDTH_PX=200;expandedGroupRow=new Set;selectedRows=new Set;get leftEdge(){return this.columns.value.left.sumBy(e=>e.inlineWidth??0)}get rightEdge(){return this.columns.value.right.sumBy(e=>e.inlineWidth??0)}leftEdgeVarName="--left-edge";rowHeightVarName="--row-height";_idMap=new WeakMap;getRowKey(e){const{rowKey:t}=this.props.def;return t?typeof t=="function"?t(e):e[t]:(this._idMap.has(e)||this._idMap.set(e,crypto.randomUUID()),this._idMap.get(e))}setSortColumn=(e,...t)=>{if(t.length>0)[this._sortDirection]=t,this._sortColumn=this._sortDirection?e:void 0;else{const{_sortColumn:i,_sortDirection:r}=this;this._sortColumn=i===e&&r==="DESC"?void 0:e,this._sortDirection=i===e&&r==="ASC"?"DESC":"ASC"}this.headerRows.clear(),this.rows.clear(),this.flatRows.clear(),this.update()};pinColumn=(e,t)=>{const i=this.columns.value.flat.findOrThrow(r=>r.uniqueKey===e);i.pin!==t&&i.pinColumn(t),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.flexWidths.clear(),this.sizes.clear(),this.update()};toggleGrouping=e=>{this.groupColumns=new Set(this.groupColumns),this.hiddenColumns=new Set(this.hiddenColumns),this.groupColumns.has(e)?(this.groupColumns.delete(e),this.hiddenColumns.delete(e)):(this.groupColumns.add(e),this.hiddenColumns.add(e)),this.sourceColumns.clear(),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.flexWidths.clear(),this.sizes.clear(),this.update()};unGroupAll=()=>{const e=new Set(this.groupColumns);this.groupColumns=new Set,this.hiddenColumns=new Set(Array.from(this.hiddenColumns).filter(t=>!e.has(t))),this.sourceColumns.clear(),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.flexWidths.clear(),this.sizes.clear(),this.update()};toggleGroupRow=e=>{this.expandedGroupRow=new Set(this.expandedGroupRow),this.expandedGroupRow.has(e)?this.expandedGroupRow.delete(e):this.expandedGroupRow.add(e),this.rows.clear(),this.flatRows.clear(),this.update()};toggleRowSelection=e=>{this.toggleRowsSelection([e])};toggleRowsSelection=e=>{this.selectedRows=new Set(this.selectedRows);const t=e.every(i=>this.selectedRows.has(i));t?e.forEach(i=>this.selectedRows.delete(i)):e.forEach(i=>this.selectedRows.add(i)),this.flatRows.clear(),this.update(),this.props.onSelectionChange?.({action:t?"deselect":"select",affectedRowKeys:e,selectedRowKeys:Array.from(this.selectedRows),isAllSelected:this.selectedRows.size===this.props.data.length})};toggleSelectAllRows=()=>{this.toggleRowsSelection(this.props.data.map(e=>this.getRowKey(e)))};toggleColumnVisibility=e=>{this.hiddenColumns=new Set(this.hiddenColumns),this.hiddenColumns.has(e)?this.hiddenColumns.delete(e):this.hiddenColumns.add(e),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.flexWidths.clear(),this.sizes.clear(),this.update()};setWidth=(e,t)=>{this.columnWidths.set(e,t)};groupColumns=new Set;hiddenColumns=new Set;columnWidths=new Map;_sortColumn;get sortColumn(){return this._sortColumn}_sortDirection="ASC";get sortDirection(){return this._sortDirection}}class _e{constructor(e,t,i){this.grid=e,this.row=t,this.column=i}get value(){return this.column.key===G?this.row.rowIndex+1:this.column.key===L?`${this.row.groupValue} (${this.row.count})`:null}}class ae{constructor(e,t,i,r,n){this.grid=e,this.groupColumn=t,this.rows=i,this.rowIndex=r,this.groupValue=n,i.forEach(a=>a.parentRow=this)}get key(){return`${this.parentRow?.key??""}${this.groupColumn.key}${this.groupValue}`}parentRow;get cells(){return this.grid.columns.value.visibleLeafs.map(e=>new _e(this.grid,this,e))}get selected(){return this.allRows.every(e=>e.selected)}get indeterminate(){return!this.selected&&this.allRows.some(e=>e.selected)}get expanded(){return this.grid.expandedGroupRow.has(this.key)}get depth(){return this.parentRow?this.parentRow.depth+1:0}get count(){return this.rows.sumBy(e=>e.count,0)}get flatRows(){return this.expanded?[this,...this.rows.flatMap(e=>e.flatRows)]:[this]}get allRows(){return this.rows.flatMap(e=>e.allRows)}get groupingColumn(){return this.grid.columns.value.leafs.findOrThrow(e=>e.key===L)}get groupingColumnGridColumn(){const{visibleLeafs:e}=this.grid.columns.value,{groupingColumn:t}=this;return e.sumBy(r=>r.pin===t.pin&&r.key!==D&&r.key!==W&&r.key!==G?1:0)}toggleRow(){this.grid.toggleGroupRow(this.key)}}function A(l){const{children:e,column:t,style:i,...r}=l,{key:n,pin:a,left:d,right:c,isEdge:o,align:u,widthVarName:p,leftVarName:g,rightVarName:y,isFirstLeaf:b,isLastLeaf:j}=t;"align"in t.def&&(r.jc=u);const E=n===G,T=n===W,k=n===D,S=a==="LEFT",x=a==="RIGHT",C=S||x,v=S&&d===0,F=S&&o,V=x&&o,N=x&&c===0;return s.jsx(f.default,{component:"datagrid.body.cell",props:{role:"cell"},variant:{isPinned:C,isFirstLeftPinned:v,isLastLeftPinned:F,isFirstRightPinned:V,isLastRightPinned:N,isRowSelection:T,isRowNumber:E,isFirstLeaf:b,isLastLeaf:j,isEmptyCell:k},style:{width:`var(${p})`,height:`var(${t.grid.rowHeightVarName})`,left:S?`var(${g})`:void 0,right:x?`var(${y})`:void 0,...i},...r,children:e})}A.displayName="DataGridCell";function ue(l){const{row:e}=l,{selected:t,indeterminate:i,cells:r,groupingColumn:n,groupingColumnGridColumn:a,depth:d,expanded:c}=e,o=h.useCallback(()=>{e.grid.toggleRowsSelection(e.allRows.map(u=>u.key))},[]);return s.jsx(f.default,{className:"grid-row",selected:t,display:"contents",props:{role:"rowgroup"},children:r.map(u=>{const{key:p,pin:g,groupColumnWidthVarName:y}=u.column,b=g==="RIGHT";if(p===L)return s.jsx(A,{column:u.column,style:{width:`var(${y})`,right:b?"0":void 0},br:n.pin==="LEFT"?1:void 0,gridColumn:a,pl:4*d,overflow:"auto",children:s.jsx(m.default,{textWrap:"nowrap",px:3,children:s.jsxs(_.default,{clean:!0,onClick:()=>e.toggleRow(),cursor:"pointer",display:"flex",gap:1,ai:"center",children:[s.jsx(w.ExpandIcon,{fill:"currentColor",width:"14px",height:"14px",rotate:c?0:-90}),u.value]})})},p);if(p===W)return s.jsx(A,{column:u.column,children:s.jsx(ee.default,{variant:"datagrid",m:1,checked:t,indeterminate:i,onChange:o})},p);if(g!==n.pin||p===G||p===D)return s.jsx(A,{column:u.column,px:p===G?3:void 0,children:u.value},p)})})}ue.displayName="DataGridGroupRow";function ce(l){const{cell:e}=l;return s.jsx(f.default,{height:"fit",width:"fit",overflow:"auto",ai:"center",jc:e.column.align,children:s.jsx(m.default,{px:3,textOverflow:"ellipsis",overflow:"hidden",textWrap:"nowrap",children:e.value})})}ce.displayName="DataGridCellText";function de(l){const{row:e}=l,{selected:t}=e;return s.jsx(f.default,{className:"grid-row",selected:t,display:"contents",props:{role:"row"},children:e.cells.map(i=>s.jsx(A,{column:i.column,children:i.column.Cell?s.jsx(i.column.Cell,{cell:i}):s.jsx(ce,{cell:i})},i.column.key))})}de.displayName="DataGridRow";const We=10,se=20;function he(l){const{grid:e,scrollTop:t}=l,i=e.flatRows.value.length,r=Math.max(0,Math.floor(t/e.rowHeight)-se),n=e.props.def.visibleRowsCount??We,a=e.rowHeight*n+e.rowHeight/5,d=h.useMemo(()=>{if(console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid render rows"),e.props.data.length===0)return s.jsx(f.default,{jc:"center",ai:"center",gridColumn:"full-row",style:{height:a},children:e.props.loading?"loading...":"empty"});const c=n+se*2;return e.flatRows.value.take(c,r).map(u=>u instanceof ae?s.jsx(ue,{row:u},u.key):s.jsx(de,{row:u},u.key))},[e.flatRows.value,e.props.data.length,e.props.loading,r,a,n]);return console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid render DataGridBody"),s.jsx(m.default,{style:{height:a},children:s.jsx(m.default,{style:{height:`${i*e.rowHeight}px`},children:s.jsx(ne.default,{component:"datagrid.body",width:"max-content",minWidth:"fit",transition:"none",style:{transform:`translate3d(0, ${r*e.rowHeight}px, 0)`,willChange:"transform",gridTemplateColumns:e.gridTemplateColumns.value},children:d})})})}he.displayName="DataGridBody";function De(){return s.jsx(f.default,{d:"column",ai:"center",jc:"center",gap:4,py:16,px:6,bgColor:"gray-50",borderRadius:4,theme:{dark:{bgColor:"gray-900"}},children:s.jsxs(f.default,{d:"column",ai:"center",gap:3,children:[s.jsx(m.default,{width:16,height:16,borderRadius:999,bgColor:"gray-200",theme:{dark:{bgColor:"gray-700"}},display:"flex",ai:"center",jc:"center",children:s.jsx(le.default,{viewBox:"0 0 24 24",width:"40",fill:"currentColor",color:"gray-400",theme:{dark:{color:"gray-500"}},children:s.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm3-1a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V6a1 1 0 00-1-1H6zm2 3a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h4a1 1 0 110 2H9a1 1 0 01-1-1z"})})}),s.jsxs(f.default,{d:"column",ai:"center",gap:1,children:[s.jsx(m.default,{fontSize:18,fontWeight:600,color:"gray-900",theme:{dark:{color:"gray-50"}},children:"No Columns Selected"}),s.jsx(m.default,{fontSize:14,color:"gray-500",textAlign:"center",theme:{dark:{color:"gray-400"}},children:"Select at least one column from the columns menu to display data"})]})]})})}function re({column:l,grid:e}){const t=e.columnFilters[l.key],i=t?.type==="text"?t.value:"",[r,n]=h.useState(i),a=h.useRef(null);h.useEffect(()=>()=>{a.current&&clearTimeout(a.current)},[]);const d=h.useCallback(u=>{const p=u.target.value;n(p),a.current&&clearTimeout(a.current),a.current=setTimeout(()=>{p.trim()?e.setColumnFilter(l.key,{type:"text",value:p}):e.setColumnFilter(l.key,void 0),a.current=null},300)},[e,l.key]),c=h.useCallback(()=>{n(""),e.setColumnFilter(l.key,void 0)},[e,l.key]),o=typeof l.def.filterable=="object"?l.def.filterable:{};return s.jsxs(f.default,{ai:"center",position:"relative",width:"fit",children:[s.jsx(z.default,{width:"fit",variant:"compact",placeholder:o.placeholder??"Filter...",value:r,onChange:d}),r&&s.jsx(f.default,{position:"absolute",right:2,top:"1/2",translateY:"-1/2",cursor:"pointer",props:{onClick:c},children:s.jsx(m.default,{fontSize:10,color:"gray-400",hover:{color:"gray-600"},children:"✕"})})]})}function Ee({column:l,grid:e}){const t=e.columnFilters[l.key],i=t?.type==="number"?t.value:"",r=t?.type==="number"?t.operator:"eq",n=t?.type==="number"?t.valueTo:"",[a,d]=h.useState(i),[c,o]=h.useState(r),[u,p]=h.useState(n??""),g=h.useRef(null),y=h.useRef(null);h.useEffect(()=>()=>{g.current&&clearTimeout(g.current),y.current&&clearTimeout(y.current)},[]);const b=typeof l.def.filterable=="object"?l.def.filterable:{},j=h.useCallback((x,C,v)=>{const F=typeof C=="number"?C:parseFloat(C);if(isNaN(F)||C===""){e.setColumnFilter(l.key,void 0);return}const V={type:"number",operator:x,value:F};if(x==="between"&&v!==void 0&&v!==""){const N=typeof v=="number"?v:parseFloat(String(v));isNaN(N)||(V.valueTo=N)}e.setColumnFilter(l.key,V)},[e,l.key]),E=h.useCallback(x=>{const C=x.target.value;d(C),g.current&&clearTimeout(g.current),g.current=setTimeout(()=>{j(c,C,u),g.current=null},300)},[c,u,j]),T=h.useCallback(x=>{o(x),j(x,a,u)},[a,u,j]),k=h.useCallback(x=>{const C=x.target.value;p(C),y.current&&clearTimeout(y.current),y.current=setTimeout(()=>{j(c,a,C),y.current=null},300)},[c,a,j]),S=h.useCallback(()=>{d(""),p(""),o("eq"),e.setColumnFilter(l.key,void 0)},[e,l.key]);return s.jsxs(f.default,{ai:c==="between"?"start":"center",gap:1,width:"fit",children:[s.jsxs(R.default,{value:c,variant:"compact",onChange:x=>x&&T(x),minWidth:6,hideIcon:!0,children:[s.jsx(R.default.Item,{value:"eq",children:"="}),s.jsx(R.default.Item,{value:"ne",children:"≠"}),s.jsx(R.default.Item,{value:"gt",children:">"}),s.jsx(R.default.Item,{value:"gte",children:"≥"}),s.jsx(R.default.Item,{value:"lt",children:"<"}),s.jsx(R.default.Item,{value:"lte",children:"≤"}),s.jsx(R.default.Item,{value:"between",children:"↔"})]}),c==="between"?s.jsxs(f.default,{d:"column",gap:1,flex1:!0,children:[s.jsxs(f.default,{ai:"center",position:"relative",flex1:!0,children:[s.jsx(z.default,{type:"number",variant:"compact",placeholder:b.placeholder??"From",value:a,onChange:E,width:"fit",step:b.step}),(a!==""||u!=="")&&s.jsx(f.default,{position:"absolute",right:2,top:"1/2",translateY:"-1/2",cursor:"pointer",props:{onClick:S},children:s.jsx(m.default,{fontSize:10,color:"gray-400",hover:{color:"gray-600"},children:"✕"})})]}),s.jsx(f.default,{ai:"center",flex1:!0,children:s.jsx(z.default,{type:"number",variant:"compact",placeholder:"To",value:u,onChange:k,width:"fit",step:b.step})})]}):s.jsxs(f.default,{ai:"center",position:"relative",flex1:!0,children:[s.jsx(z.default,{type:"number",variant:"compact",placeholder:b.placeholder??"Value",value:a,onChange:E,width:"fit",step:b.step}),a!==""&&s.jsx(f.default,{position:"absolute",right:2,top:"1/2",translateY:"-1/2",cursor:"pointer",props:{onClick:S},children:s.jsx(m.default,{fontSize:10,color:"gray-400",hover:{color:"gray-600"},children:"✕"})})]})]})}function Ve({column:l,grid:e}){const t=e.columnFilters[l.key],i=t?.type==="multiselect"?t.values:[],r=typeof l.def.filterable=="object"?l.def.filterable:{},n=h.useMemo(()=>r.options?r.options:e.getColumnUniqueValues(l.key).map(c=>({label:c===null?"(empty)":String(c),value:c})),[r.options,e,l.key]),a=h.useCallback((d,c)=>{c.length===0?e.setColumnFilter(l.key,void 0):e.setColumnFilter(l.key,{type:"multiselect",values:c})},[e,l.key]);return s.jsxs(R.default,{multiple:!0,showCheckbox:!0,isSearchable:!0,searchPlaceholder:"Search...",value:i,width:"fit",minWidth:0,onChange:a,variant:"compact",children:[s.jsx(R.default.Unselect,{children:"Clear"}),s.jsx(R.default.SelectAll,{children:"Select All"}),n.map(d=>s.jsx(R.default.Item,{value:d.value,ai:"center",gap:2,children:d.label},String(d.value)))]})}function pe(l){const{column:e,grid:t}=l,{filterable:i}=e.def;if(!i)return null;switch((typeof i=="object"?i:{type:"text"}).type){case"text":return s.jsx(re,{column:e,grid:t});case"number":return s.jsx(Ee,{column:e,grid:t});case"multiselect":return s.jsx(Ve,{column:e,grid:t});default:return s.jsx(re,{column:e,grid:t})}}pe.displayName="DataGridColumnFilter";function fe(l){const{column:e,grid:t}=l,{key:i,pin:r,left:n,right:a,isEdge:d,widthVarName:c,leftVarName:o,rightVarName:u,filterable:p}=e,g=i===D,E=g||i===L||i===G||i===W,T=r==="LEFT",k=r==="RIGHT",S=T||k,x=T&&n===0,C=T&&d,v=k&&d,F=k&&a===0;return s.jsx(f.default,{component:"datagrid.filter.cell",variant:{isPinned:S,isFirstLeftPinned:x,isLastLeftPinned:C,isFirstRightPinned:v,isLastRightPinned:F},px:g?0:2,style:{width:`var(${c})`,left:T?`var(${o})`:void 0,right:k?`var(${u})`:void 0},children:!E&&p&&s.jsx(pe,{column:e,grid:t})})}fe.displayName="DataGridFilterCell";function me(l){const{grid:e}=l,{visibleLeafs:t}=e.columns.value;return t.some(r=>r.filterable)?t.map(r=>s.jsx(fe,{column:r,grid:e},r.uniqueKey)):null}me.displayName="DataGridFilterRow";function ge(l){const{column:e}=l,{key:t,pin:i,left:r,right:n,isEdge:a,isLeaf:d,align:c,header:o,grid:u}=e,[p,g,y]=w.useVisibility({hideOnScroll:!0,event:"mousedown"}),[b,j]=h.useState({top:0,left:0}),E=h.useMemo(()=>b.left>window.innerWidth/2,[b.left]),T=d&&e.sortable&&(u.sortColumn!==t||u.sortDirection==="DESC"),k=d&&e.sortable&&(u.sortColumn!==t||u.sortDirection==="ASC"),S=d&&e.sortable&&u.sortColumn===t,x=i!=="LEFT",C=i!=="RIGHT",v=!!i,F=d&&t!==L,V=d&&t===L,N=T||k||S,O=x||C||v,Y=c==="right"?2:void 0,K=c==="right"?void 0:i==="RIGHT"?2.5:4,$=t===D,q=t===G,J=t===W,P=i==="LEFT",U=i==="RIGHT",Q=P||i==="RIGHT",X=P&&r===0,Z=P&&a,I=U&&a,H=U&&n===0,ke=d&&!$&&!q&&!J&&e.sortable;return s.jsx(f.default,{position:"absolute",left:Y,right:K,top:"1/2",translateY:-3,ai:"center",children:s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu",onClick:()=>g(!p),variant:{isPinned:Q,isFirstLeftPinned:X,isLastLeftPinned:Z,isFirstRightPinned:I,isLastRightPinned:H,isSortable:ke,isRowNumber:q},children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.icon",children:s.jsx(w.DotsIcon,{fill:"currentColor"})}),p&&s.jsxs(Se.default,{component:"datagrid.header.cell.contextMenu.tooltip",onPositionChange:j,ref:y,adjustTranslateX:E?"-100%":"-21px",adjustTranslateY:"16px",children:[T&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.sortColumn("ASC"),children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:s.jsx(w.SortIcon,{width:"100%",fill:"currentColor"})}),"Sort Ascending"]}),k&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.sortColumn("DESC"),children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:s.jsx(w.SortIcon,{width:"100%",fill:"currentColor",rotate:180})}),"Sort Descending"]}),S&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.sortColumn(void 0),children:[s.jsx(m.default,{width:4}),"Clear Sort"]}),N&&(O||F||V)&&s.jsx(m.default,{bb:1,my:2,borderColor:"gray-300",component:"datagrid.header.cell.contextMenu.tooltip.item.separator"}),x&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.pinColumn("LEFT"),children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:s.jsx(w.PinIcon,{width:"100%",fill:"currentColor"})}),"Pin Left"]}),C&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.pinColumn("RIGHT"),children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:s.jsx(w.PinIcon,{width:"100%",fill:"currentColor",rotate:-90})}),"Pin Right"]}),v&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.pinColumn(),children:[s.jsx(m.default,{width:4}),"Unpin"]}),N&&O&&(F||V)&&s.jsx(m.default,{component:"datagrid.header.cell.contextMenu.tooltip.item.separator"}),F&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:e.toggleGrouping,children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:s.jsx(w.GroupingIcon,{width:"100%",fill:"currentColor"})}),s.jsxs(m.default,{textWrap:"nowrap",children:["Group by ",o??t]})]}),V&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:u.unGroupAll,children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:s.jsx(w.GroupingIcon,{width:"100%",fill:"currentColor"})}),s.jsx(m.default,{textWrap:"nowrap",children:"Un-Group All"})]})]})]})})}ge.displayName="DataGridHeaderCellContextMenu";function xe(l){const{column:e}=l;return s.jsx(f.default,{height:"fit",ai:"center",position:"absolute",right:e.pin==="RIGHT"?void 0:0,left:e.pin!=="RIGHT"?void 0:0,py:3,children:s.jsx(m.default,{cursor:"col-resize",px:.75,mt:-6,className:"resizer",height:"fit",props:{onMouseDown:e.resizeColumn,onTouchStart:e.resizeColumn},children:s.jsx(m.default,{component:"datagrid.header.cell.resizer"})})})}xe.displayName="DataGridHeaderCellResizer";function Ce(l){const{column:e}=l,{key:t,pin:i,left:r,right:n,isEdge:a,isLeaf:d,leafs:c,grid:o,header:u,gridRows:p,widthVarName:g,leftVarName:y,rightVarName:b,inlineWidth:j,isFirstLeaf:E,isLastLeaf:T}=e,k=t===D,S=t===L,x=t===G,C=t===W,v=i==="LEFT",F=i==="RIGHT",V=v||i==="RIGHT",N=v&&r===0,O=v&&a,Y=F&&a,K=F&&n===0,$=d&&!k&&!x&&!C&&e.sortable,q=d?1:c.length,J=!x&&!C&&e.resizable,P=!x&&!C,U=C?void 0:e.align==="right"?10:3,Q=C?void 0:e.align==="center"?3:void 0,X=h.useCallback(()=>{o.toggleSelectAllRows()},[]),Z=h.useMemo(()=>{if(x)return null;if(C){const I=o.selectedRows.size===o.props.data.length,H=!I&&o.selectedRows.size>0;return s.jsx(ee.default,{variant:"datagrid",m:1,indeterminate:H,checked:I,onChange:X})}if(S){if(o.groupColumns.size===1){const I=o.columns.value.leafs.findOrThrow(H=>H.key===o.groupColumns.values().next().value);return I.header??I.key}return"Group"}return u??t},[o.groupColumns,o.selectedRows,X]);return s.jsx(f.default,{props:{role:"columnheader"},component:"datagrid.header.cell",variant:{isPinned:V,isFirstLeftPinned:N,isLastLeftPinned:O,isFirstRightPinned:Y,isLastRightPinned:K,isSortable:$,isRowNumber:x,isFirstLeaf:E,isLastLeaf:T,isEmptyCell:k},gridRow:p,gridColumn:q,style:{width:`var(${g})`,left:v?`var(${y})`:void 0,right:F?`var(${b})`:void 0},children:!k&&s.jsxs(s.Fragment,{children:[s.jsx(f.default,{width:"fit",height:"fit",jc:e.align,props:{onClick:$?()=>e.sortColumn():void 0},children:s.jsxs(f.default,{overflow:"hidden",position:d?void 0:"sticky",ai:"center",transition:"none",pl:U,pr:Q,style:{left:i?void 0:`var(${o.leftEdgeVarName})`},children:[s.jsx(m.default,{overflow:"hidden",textOverflow:"ellipsis",textWrap:"nowrap",children:Z}),t===o.sortColumn&&s.jsx(m.default,{pl:(j??0)<58?0:2,children:s.jsx(w.SortIcon,{width:"16px",rotate:o.sortDirection==="ASC"?0:180,fill:"currentColor"})}),P&&s.jsx(m.default,{minWidth:e.align==="right"?4:10})]})}),J&&s.jsx(xe,{column:e}),P&&s.jsx(ge,{column:e})]})})}Ce.displayName="DataGridHeaderCell";function we(l){const{grid:e}=l;return s.jsxs(ne.default,{component:"datagrid.header",style:{gridTemplateColumns:e.gridTemplateColumns.value},children:[e.headerRows.value.map(t=>t.map(i=>s.jsx(Ce,{column:i},i.uniqueKey))),s.jsx(me,{grid:e})]})}we.displayName="DataGridHeader";function ye(l){const{grid:e}=l,[t,i]=h.useState(0),r=h.useRef(null),n=h.useCallback(d=>{r.current!==null&&cancelAnimationFrame(r.current),r.current=requestAnimationFrame(()=>{i(d.target.scrollTop),r.current=null})},[]);return e.columns.value.userVisibleLeafs.length>0?s.jsxs(m.default,{overflowX:"scroll",style:{willChange:"scroll-position"},props:{onScroll:n},children:[s.jsx(we,{grid:e}),s.jsx(he,{grid:e,scrollTop:t})]}):s.jsx(De,{})}ye.displayName="DataGridContent";function be(l){const{grid:e}=l;return e.groupColumns.size===0?null:s.jsxs(f.default,{component:"datagrid.topBar.columnGroups",children:[s.jsx(B.Span,{component:"datagrid.topBar.columnGroups.icon",children:s.jsx(w.GroupingIcon,{width:"100%",fill:"currentColor"})}),Array.from(e.groupColumns,t=>{const i=e.columns.value.leafs.findOrThrow(r=>r.key===t);return s.jsxs(h.Fragment,{children:[s.jsx(w.ExpandIcon,{fill:"currentColor",width:"14px",height:"14px",rotate:-90}),s.jsxs(f.default,{component:"datagrid.topBar.columnGroups.item",children:[i.header??i.key,s.jsx(_.default,{component:"datagrid.topBar.columnGroups.item.icon",onClick:()=>e.toggleGrouping(i.key),children:s.jsx(m.default,{fontSize:10,color:"gray-400",hover:{color:"gray-600"},children:"✕"})})]})]},t)})]})}be.displayName="DataGridColumnGroups";function Ne(l){const{grid:e}=l,[t,i]=h.useState(e.globalFilterValue),r=h.useRef(null);h.useEffect(()=>()=>{r.current&&clearTimeout(r.current)},[]);const n=h.useCallback(u=>{const p=u.target.value;i(p),r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{e.setGlobalFilter(p),r.current=null},300)},[e]),a=h.useCallback(()=>{i(""),e.setGlobalFilter("")},[e]),{filtered:d,total:c}=e.filterStats,o=e.hasActiveFilters&&d!==c;return s.jsxs(f.default,{component:"datagrid.topBar.globalFilter",children:[o&&s.jsxs(m.default,{component:"datagrid.topBar.globalFilter.stats",children:[d,"/",c]}),s.jsxs(f.default,{position:"relative",ai:"center",children:[s.jsx(f.default,{position:"absolute",left:3,pointerEvents:"none",color:"gray-400",theme:{dark:{color:"gray-500"}},children:s.jsx(w.SearchIcon,{fill:"currentColor",width:"14px"})}),s.jsx(z.default,{placeholder:"Search...",variant:"compact",value:t,onChange:n,pl:8,pr:t?8:3}),t&&s.jsx(m.default,{position:"absolute",right:2,cursor:"pointer",p:1,color:"gray-400",hover:{color:"gray-600"},theme:{dark:{color:"gray-500",hover:{color:"gray-300"}}},props:{onClick:a},children:s.jsx(m.default,{fontSize:12,fontWeight:600,children:"✕"})})]})]})}function ve(l){const{grid:e}=l,i=h.useMemo(()=>e.columns.value.leafs.filter(o=>![D,G,W,L].includes(o.key)),[e.columns.value.leafs]).map(o=>({id:String(o.key),label:o.header??o.key,leaf:o})),r=i.filter(o=>o.leaf.isVisible).map(o=>o.id),n=i.length,d=n-r.length>0,c=(o,u)=>{const p=new Set(u);i.forEach(g=>{const y=p.has(g.id);g.leaf.isVisible!==y&&g.leaf.toggleVisibility()})};return s.jsxs(R.default,{multiple:!0,showCheckbox:!0,hideIcon:!0,variant:"compact",value:r,onChange:c,isSearchable:i.length>6,searchPlaceholder:"Search columns...",display:"inline-flex",children:[s.jsx(R.default.Display,{children:o=>{const u=o.length===0;return s.jsxs(f.default,{ai:"center",gap:2,children:[s.jsxs(le.default,{viewBox:"0 0 20 20",width:"18",height:"18",children:[s.jsx("rect",{x:"2",y:"3",width:"4",height:"14",rx:"1",fill:"currentColor",opacity:.9}),s.jsx("rect",{x:"8",y:"3",width:"4",height:"14",rx:"1",fill:"currentColor",opacity:.6}),s.jsx("rect",{x:"14",y:"3",width:"4",height:"14",rx:"1",fill:"currentColor",opacity:.3})]}),d&&s.jsxs(m.default,{tag:"span",fontSize:11,lineHeight:16,fontWeight:500,px:2,py:.5,borderRadius:1,bgColor:u?"red-100":"amber-100",color:u?"red-700":"amber-700",theme:{dark:{bgColor:u?"red-900":"amber-900",color:u?"red-300":"amber-300"}},children:[o.length,"/",n]})]})}}),s.jsx(R.default.SelectAll,{children:"Show All"}),s.jsx(R.default.Unselect,{children:"Hide All"}),i.map(o=>s.jsx(R.default.Item,{value:o.id,textWrap:"nowrap",children:o.label},o.id))]})}ve.displayName="DataGridTopBarContextMenu";function Re(l){const{grid:e}=l,{title:t,topBarContent:i,globalFilter:r}=e.props.def;return s.jsxs(f.default,{component:"datagrid.topBar",position:"relative",ai:"center",jc:"space-between",gap:4,flexWrap:"wrap",children:[s.jsxs(f.default,{ai:"center",gap:3,flexWrap:"wrap",minWidth:0,children:[s.jsx(ve,{grid:e}),t&&s.jsx(m.default,{fontWeight:600,fontSize:16,color:"gray-800",theme:{dark:{color:"gray-100"}},children:t}),s.jsx(be,{grid:e})]}),s.jsxs(f.default,{ai:"center",gap:3,flexWrap:"wrap",jc:"flex-end",minWidth:0,children:[i&&s.jsx(m.default,{children:i}),r&&s.jsx(Ne,{grid:e})]})]})}Re.displayName="DataGridTopBar";function Be(l){const[e,t]=h.useState(0),i=h.useRef();return i.current||(i.current=new Le(l,()=>t(r=>r+1))),h.useEffect(()=>{i.current.props=l,i.current.rows.clear(),i.current.flatRows.clear(),i.current.update()},[l.data]),h.useEffect(()=>{i.current.props=l,i.current.sourceColumns.clear(),i.current.columns.clear(),i.current.headerRows.clear(),i.current.gridTemplateColumns.clear(),i.current.rows.clear(),i.current.flatRows.clear(),i.current.sizes.clear(),i.current.update()},[l.def]),h.useEffect(()=>{i.current.props=l,i.current.update()},[l.loading]),h.useEffect(()=>{i.current.props=l,i.current.rows.clear(),i.current.flatRows.clear(),i.current.update()},[l.globalFilterValue,l.columnFilters]),i.current}function je(l){const e=Be(l),t=h.useRef(null);return h.useLayoutEffect(()=>{const i=t.current;if(!i)return;const r=new ResizeObserver(n=>{const a=n[0]?.contentRect.width??0;e.setContainerWidth(a)});return r.observe(i),()=>r.disconnect()},[e]),console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid render"),s.jsxs(m.default,{ref:t,component:"datagrid",style:e.sizes.value,props:{role:"presentation"},children:[e.props.def.topBar&&s.jsx(Re,{grid:e}),s.jsx(ye,{grid:e}),e.props.def.bottomBar&&s.jsx(Fe,{grid:e})]})}je.displayName="DataGrid";exports.default=je;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),h=require("react"),m=require("../box.cjs"),p=require("./flex.cjs"),ne=require("./grid.cjs"),w=require("../core.cjs"),ee=require("./checkbox.cjs"),_=require("./button.cjs"),le=require("./baseSvg.cjs"),R=require("./dropdown.cjs"),z=require("./textbox.cjs"),B=require("./semantics.cjs"),Se=require("./tooltip.cjs");function Fe(o){const{grid:e}=o,{filtered:t,total:i}=e.filterStats,r=e.hasActiveFilters;return s.jsxs(p.default,{component:"datagrid.bottomBar",children:[s.jsxs(m.default,{children:["Rows: ",t!==i?`${t} / ${i}`:i]}),e.props.def.rowSelection&&s.jsxs(m.default,{children:["Selected: ",e.selectedRows.size]}),r&&s.jsx(m.default,{color:"blue-600",cursor:"pointer",hover:{textDecoration:"underline"},props:{onClick:e.clearAllFilters},children:"Clear filters"})]})}function oe(o){const{cell:e}=o,t=h.useCallback(()=>{e.grid.toggleRowSelection(e.row.key)},[e.grid,e.row.key]);return s.jsx(ee.default,{variant:"datagrid",checked:e.row.selected,onChange:t})}oe.displayName="DataGridCellRowSelection";const Ge="NO_PIN";class M{constructor(e,t,i){if(this.def=e,this.grid=t,this.parent=i,this.columns=e.columns?.map(r=>new M(e.pin?{...r,pin:e.pin}:r,t,this))??[],this.isLeaf){const r=this.grid.columnWidths.get(this.key);this._inlineWidth=this.key==D?void 0:r??this.def.width??this.grid.DEFAULT_COLUMN_WIDTH_PX,this._pin=e.pin}}columns=[];get visibleColumns(){return this.columns.filter(e=>e.isVisible)}get isFirstLeaf(){const{leafs:e}=this;return e.length>0&&e.at(0)===this}get isLastLeaf(){const{leafs:e}=this;return e.length>0&&e.at(-1)===this}get key(){return this.def.key}get header(){return this.def.header}get align(){return this.def.align}get isLeaf(){return this.columns.length===0}get Cell(){return this.def.Cell}get filterable(){return this.def.filterable}get sortable(){return this.def.sortable!==void 0?this.def.sortable:this.grid.props.def.sortable!==!1}get resizable(){return this.def.resizable!==void 0?this.def.resizable:this.grid.props.def.resizable!==!1}get isFlexible(){return this.def.flexible!==!1}get baseWidth(){return this._inlineWidth??this.grid.DEFAULT_COLUMN_WIDTH_PX}_pin;get pin(){if(this.isLeaf)return this._pin;const e=[...new Set(this.columns.flatMap(t=>t.pin))];if(e.length===1)return e[0]}get uniqueKey(){return`${this.key}${this.pin??""}`}getPinnedColumn(e){if(this.hasPin(e)){if(this.isLeaf)return this;const t=new M({...this.def,pin:e},this.grid,this.parent);return t.columns=this.columns.filter(i=>i.hasPin(e)).map(i=>{const r=i.getPinnedColumn(e);return r.parent=t,r}).filter(i=>!!i),t}}hasPin(e){return this.isLeaf?this._pin===e:this.columns.some(t=>t.hasPin(e))}get death(){return this.parent?this.parent.death+1:0}get flatColumns(){const e=[this];return e.push(...this.columns.flatMap(t=>t.flatColumns)),e}_inlineWidth;get inlineWidth(){if(this.isLeaf)return this.grid.getFlexWidth(this.key)??this._inlineWidth;const e=this.visibleColumns.map(t=>t.inlineWidth).filter(t=>typeof t=="number");if(e.length!==0)return e.sumBy(t=>t)}get left(){let e=0;if(this.parent){const{visibleColumns:t,left:i}=this.parent,r=t.findIndex(n=>n===this);e+=t.sumBy((n,a)=>a<r?n.inlineWidth??0:0),e+=i}else{const t=this.grid.columns.value.left.filter(r=>r.isVisible),i=t.findIndex(r=>r===this);e+=t.sumBy((r,n)=>n<i?r.inlineWidth??0:0)}return e}get right(){let e=0;if(this.parent){const{visibleColumns:t}=this.parent,i=t.reverse(),r=i.findIndex(n=>n===this);e+=i.sumBy((n,a)=>a<r?n.inlineWidth??0:0),e+=this.parent.right}else{const i=this.grid.columns.value.right.filter(n=>n.isVisible).reverse(),r=i.findIndex(n=>n===this);e+=i.sumBy((n,a)=>a<r?n.inlineWidth??0:0)}return e}get isEdge(){if(!this.pin)return!1;if(this.parent){const{visibleColumns:t}=this.parent;return(this.pin==="LEFT"?t.at(-1):t.at(0))===this&&this.parent.isEdge}return(this.pin==="LEFT"?this.grid.columns.value.left.filter(t=>t.isVisible).at(-1):this.grid.columns.value.right.filter(t=>t.isVisible).at(0))===this}get isVisible(){return this.isLeaf?!this.grid.hiddenColumns.has(this.key):this.leafs.some(e=>e.isVisible)}get leafs(){return this.isLeaf?[this]:this.visibleColumns.flatMap(e=>e.leafs)}get groupColumnWidthVarName(){return`--${this.uniqueKey}-group-width`}get widthVarName(){return`--${this.uniqueKey}-width`}get leftVarName(){return`--${this.uniqueKey}-left`}get rightVarName(){return`--${this.uniqueKey}-right`}get gridRows(){return this.isLeaf?this.grid.columns.value.maxDeath-this.death:1}resizeColumn=e=>{const t=e.pageX,{MIN_COLUMN_WIDTH_PX:i,update:r}=this.grid,n=this.leafs.toRecord(u=>[u.key,u.inlineWidth??u.baseWidth]),a=this.leafs.sumBy(u=>n[u.key])-this.leafs.length*i,c=w.FnUtils.throttle(u=>{const f=(u.pageX-t)*(this.pin==="RIGHT"?-1:1);this.leafs.forEach(g=>{const y=n[g.key],b=a>0?(y-i)/a*f:f/this.leafs.length,j=Math.round(y+b);g.setWidth(j<i?i:j)}),this.grid.flexWidths.clear(),this.grid.sizes.clear(),r()},40),d=new AbortController,l=u=>{d.abort(),r()};window.addEventListener("mousemove",c,d),window.addEventListener("mouseup",l,d)};pinColumn=e=>{this.isLeaf?this._pin=e:this.columns.forEach(t=>t.pinColumn(e)),this.grid.pinColumn(this.uniqueKey,e)};toggleGrouping=()=>{this.grid.toggleGrouping(this.key)};sortColumn=(...e)=>{this.grid.setSortColumn(this.key,...e)};setWidth=e=>{if(!this.isLeaf)throw new Error("Cannot set width for a parent column.");this._inlineWidth!==e&&(this._inlineWidth=e,this.grid.setWidth(this.key,e))};toggleVisibility=()=>{this.grid.toggleColumnVisibility(this.key)}}class Te{constructor(e,t,i){this.grid=e,this.row=t,this.column=i}get value(){return this.column.key===G?this.row.rowIndex+1:this.row.data[this.column.key]}}class te{constructor(e,t,i){this.grid=e,this.data=t,this.rowIndex=i,this.grid=e,this.data=t,this.key=this.grid.getRowKey(t)}key;parentRow;count=1;get cells(){return this.grid.columns.value.visibleLeafs.map(e=>new Te(this.grid,this,e))}get selected(){return this.grid.selectedRows.has(this.key)}get flatRows(){return this}get allRows(){return this}}const D="empty-cell",G="row-number-cell",ie=70,W="row-selection-cell",L="grouping-cell";class Le{constructor(e,t){this.props=e,this.update=t,console.debug("\x1B[32m%s\x1B[0m","[react-box]: DataGrid GridModel ctor")}sourceColumns=w.memo(()=>{const{def:e}=this.props,t=[];if(this.groupColumns.size>0&&t.push(new M({key:L},this)),t.push(...e.columns.map(i=>new M(i,this))),e.rowSelection){const i=typeof e.rowSelection=="object"&&e.rowSelection.pinned?"LEFT":void 0;t.unshift(new M({key:W,pin:i,width:50,align:"center",Cell:oe},this))}if(e.showRowNumber){let i,r=ie;typeof e.showRowNumber=="object"&&(e.showRowNumber.pinned&&(i="LEFT"),r=e.showRowNumber.width??ie),t.unshift(new M({key:G,pin:i,width:r,align:"right"},this))}return t});columns=w.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid columns memo");const e=this.sourceColumns.value.map(l=>l.getPinnedColumn("LEFT")).filter(l=>!!l),t=this.sourceColumns.value.map(l=>l.getPinnedColumn()).filter(l=>!!l),i=this.sourceColumns.value.map(l=>l.getPinnedColumn("RIGHT")).filter(l=>!!l),r=[...e,...t,...i].flatMap(l=>l.flatColumns),n=r.filter(l=>l.isLeaf),a=r.filter(l=>l.isLeaf&&l.isVisible),c=a.filter(l=>![D,G,W,L].includes(l.key)),d=r.maxBy(l=>l.death)+1;return{left:e,middle:t,right:i,flat:r,leafs:n,visibleLeafs:a,userVisibleLeafs:c,maxDeath:d}});headerRows=w.memo(()=>(console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid headerRows memo"),this.columns.value.flat.groupBy(t=>t.death).sortBy(t=>t.key).map(t=>{const i=t.values.groupBy(r=>r.pin??Ge).toRecord(r=>[r.key,r.values]);return[...i.LEFT?.filter(r=>r.isVisible)??[],...i.NO_PIN?.filter(r=>r.isVisible)??[],...i.RIGHT?.filter(r=>r.isVisible)??[]]})));gridTemplateColumns=w.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid gridTemplateColumns memo");const{visibleLeafs:e}=this.columns.value,t=e.sumBy(a=>a.pin==="RIGHT"?1:0),i=e.length-t,r=i>0?`repeat(${i}, max-content)`:"",n=t>0?`repeat(${t}, max-content)`:"";return`${r} ${n}`.trim()});_globalFilterValue="";get globalFilterValue(){return this.props.globalFilterValue??this._globalFilterValue}_columnFilters={};get columnFilters(){return this.props.columnFilters??this._columnFilters}applyGlobalFilter(e){const t=this.globalFilterValue.trim();if(!t)return e;const{globalFilterKeys:i}=this.props.def,r=i??this.columns.value.leafs.filter(n=>n.key!==D&&n.key!==G&&n.key!==W&&n.key!==L).map(n=>n.key);return e.filter(n=>r.some(a=>{const c=n[a];return c==null?!1:w.fuzzySearch(t,String(c))}))}applyColumnFilters(e){const t=this.columnFilters,i=Object.keys(t);return i.length===0?e:e.filter(r=>i.every(n=>{const a=t[n];if(!a)return!0;const c=r[n];return this.matchesFilter(c,a)}))}matchesFilter(e,t){switch(t.type){case"text":return t.value.trim()?e==null?!1:w.fuzzySearch(t.value,String(e)):!0;case"number":{if(e==null)return!1;const i=typeof e=="number"?e:parseFloat(String(e));if(isNaN(i))return!1;switch(t.operator){case"eq":return i===t.value;case"ne":return i!==t.value;case"gt":return i>t.value;case"gte":return i>=t.value;case"lt":return i<t.value;case"lte":return i<=t.value;case"between":return t.valueTo!==void 0?i>=t.value&&i<=t.valueTo:i>=t.value;default:return!0}}case"multiselect":return t.values.length===0?!0:t.values.includes(e);default:return!0}}applyExternalFilters(e){const t=this.props.filters;return!t||t.length===0?e:e.filter(i=>t.every(r=>r(i)))}get filteredData(){let e=this.props.data;return e=this.applyExternalFilters(e),this.props.def.globalFilter&&(e=this.applyGlobalFilter(e)),e=this.applyColumnFilters(e),e}setGlobalFilter=e=>{this.props.onGlobalFilterChange?this.props.onGlobalFilterChange(e):this._globalFilterValue=e,this.rows.clear(),this.flatRows.clear(),this.update()};setColumnFilter=(e,t)=>{const i={...this.columnFilters};t===void 0?delete i[e]:i[e]=t,this.props.onColumnFiltersChange?this.props.onColumnFiltersChange(i):this._columnFilters=i,this.rows.clear(),this.flatRows.clear(),this.update()};clearColumnFilters=()=>{this.props.onColumnFiltersChange?this.props.onColumnFiltersChange({}):this._columnFilters={},this.rows.clear(),this.flatRows.clear(),this.update()};clearAllFilters=()=>{this.setGlobalFilter(""),this.clearColumnFilters()};getColumnUniqueValues=e=>{const t=new Set;return this.props.data.forEach(i=>{const r=i[e];r!==void 0&&t.add(r)}),Array.from(t).sort((i,r)=>i===null?1:r===null?-1:typeof i=="string"&&typeof r=="string"?i.localeCompare(r):typeof i=="number"&&typeof r=="number"?i-r:String(i).localeCompare(String(r)))};get hasActiveFilters(){return this.globalFilterValue.trim()!==""||Object.keys(this.columnFilters).length>0}get filterStats(){return{filtered:this.filteredData.length,total:this.props.data.length}}rows=w.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid rows memo");let e=this.filteredData;if(this._sortColumn&&(e=e.sortBy(t=>t[this._sortColumn],this._sortDirection)),this.groupColumns.size>0){const t=(i,r,n)=>{const a=r.values().next().value;r.delete(a);const c=this.columns.value.leafs.findOrThrow(d=>d.key===a);return this._sortColumn===L&&(i=i.sortBy(d=>d[a],this._sortDirection)),i.groupBy(d=>d[a]).map(d=>{let l;r.size>0?l=t(d.values,new Set(r),n+1):l=d.values.map((f,g)=>new te(this,f,n+1+g));const u=new ae(this,c,l,n,d.key);return n+=1,u.expanded&&(n+=l.length),u})};return t(e,new Set(this.groupColumns),0)}return e.map((t,i)=>new te(this,t,i))});flatRows=w.memo(()=>(console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid flatRows memo"),this.rows.value.flatMap(e=>e.flatRows)));get rowHeight(){return this.props.def.rowHeight??this.DEFAULT_ROW_HEIGHT_PX}sizes=w.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid sizes memo");const e=this.columns.value.flat.reduce((r,n)=>{const{inlineWidth:a}=n;return typeof a=="number"&&(r[n.widthVarName]=`${n.inlineWidth}px`),n.pin==="LEFT"&&(r[n.leftVarName]=`${n.left}px`),n.pin==="RIGHT"&&(r[n.rightVarName]=`${n.right}px`),r},{});e[this.rowHeightVarName]=`${this.rowHeight}px`,e[this.leftEdgeVarName]=`${this.leftEdge}px`;const{visibleLeafs:t}=this.columns.value,i=t.find(r=>r.key===L);if(i){const r=t.sumBy(n=>n.pin===i.pin&&n.key!==G&&n.key!==W?n.inlineWidth??0:0);e[i.groupColumnWidthVarName]=`${r}px`}return this.groupColumns.forEach(r=>{const n=this.columns.value.leafs.findOrThrow(a=>a.key===r);e[n.groupColumnWidthVarName]=`${t.sumBy(a=>a.pin===n.pin?a.inlineWidth??0:0)}px`}),e});_containerWidth=0;get containerWidth(){return this._containerWidth}setContainerWidth=e=>{this._containerWidth!==e&&(this._containerWidth=e,this.flexWidths.clear(),this.sizes.clear(),this.update())};flexWidths=w.memo(()=>{console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid flexWidths memo");const e=this._containerWidth;if(e<=0)return{};const t=this.columns.value.visibleLeafs.filter(u=>u.key!==D),i=u=>!u.isFlexible||this.columnWidths.has(u.key),r=t.filter(i).sumBy(u=>u.baseWidth),n=t.filter(u=>!i(u)),a=n.sumBy(u=>u.baseWidth),c=e-r;if(c<=a)return n.toRecord(u=>[u.key,u.baseWidth]);const d={};let l=0;return n.forEach((u,f)=>{if(f===n.length-1)d[u.key]=c-l;else{const g=Math.floor(u.baseWidth/a*c);d[u.key]=g,l+=g}}),d});getFlexWidth(e){return this.flexWidths.value[e]}DEFAULT_ROW_HEIGHT_PX=48;MIN_COLUMN_WIDTH_PX=48;DEFAULT_COLUMN_WIDTH_PX=200;expandedGroupRow=new Set;selectedRows=new Set;get leftEdge(){return this.columns.value.left.sumBy(e=>e.inlineWidth??0)}get rightEdge(){return this.columns.value.right.sumBy(e=>e.inlineWidth??0)}leftEdgeVarName="--left-edge";rowHeightVarName="--row-height";_idMap=new WeakMap;getRowKey(e){const{rowKey:t}=this.props.def;return t?typeof t=="function"?t(e):e[t]:(this._idMap.has(e)||this._idMap.set(e,crypto.randomUUID()),this._idMap.get(e))}setSortColumn=(e,...t)=>{if(t.length>0)[this._sortDirection]=t,this._sortColumn=this._sortDirection?e:void 0;else{const{_sortColumn:i,_sortDirection:r}=this;this._sortColumn=i===e&&r==="DESC"?void 0:e,this._sortDirection=i===e&&r==="ASC"?"DESC":"ASC"}this.headerRows.clear(),this.rows.clear(),this.flatRows.clear(),this.update()};pinColumn=(e,t)=>{const i=this.columns.value.flat.findOrThrow(r=>r.uniqueKey===e);i.pin!==t&&i.pinColumn(t),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.flexWidths.clear(),this.sizes.clear(),this.update()};toggleGrouping=e=>{this.groupColumns=new Set(this.groupColumns),this.hiddenColumns=new Set(this.hiddenColumns),this.groupColumns.has(e)?(this.groupColumns.delete(e),this.hiddenColumns.delete(e)):(this.groupColumns.add(e),this.hiddenColumns.add(e)),this.sourceColumns.clear(),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.flexWidths.clear(),this.sizes.clear(),this.update()};unGroupAll=()=>{const e=new Set(this.groupColumns);this.groupColumns=new Set,this.hiddenColumns=new Set(Array.from(this.hiddenColumns).filter(t=>!e.has(t))),this.sourceColumns.clear(),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.flexWidths.clear(),this.sizes.clear(),this.update()};toggleGroupRow=e=>{this.expandedGroupRow=new Set(this.expandedGroupRow),this.expandedGroupRow.has(e)?this.expandedGroupRow.delete(e):this.expandedGroupRow.add(e),this.rows.clear(),this.flatRows.clear(),this.update()};toggleRowSelection=e=>{this.toggleRowsSelection([e])};toggleRowsSelection=e=>{this.selectedRows=new Set(this.selectedRows);const t=e.every(i=>this.selectedRows.has(i));t?e.forEach(i=>this.selectedRows.delete(i)):e.forEach(i=>this.selectedRows.add(i)),this.flatRows.clear(),this.update(),this.props.onSelectionChange?.({action:t?"deselect":"select",affectedRowKeys:e,selectedRowKeys:Array.from(this.selectedRows),isAllSelected:this.selectedRows.size===this.props.data.length})};toggleSelectAllRows=()=>{this.toggleRowsSelection(this.props.data.map(e=>this.getRowKey(e)))};toggleColumnVisibility=e=>{this.hiddenColumns=new Set(this.hiddenColumns),this.hiddenColumns.has(e)?this.hiddenColumns.delete(e):this.hiddenColumns.add(e),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.flexWidths.clear(),this.sizes.clear(),this.update()};setWidth=(e,t)=>{this.columnWidths.set(e,t)};groupColumns=new Set;hiddenColumns=new Set;columnWidths=new Map;_sortColumn;get sortColumn(){return this._sortColumn}_sortDirection="ASC";get sortDirection(){return this._sortDirection}}class _e{constructor(e,t,i){this.grid=e,this.row=t,this.column=i}get value(){return this.column.key===G?this.row.rowIndex+1:this.column.key===L?`${this.row.groupValue} (${this.row.count})`:null}}class ae{constructor(e,t,i,r,n){this.grid=e,this.groupColumn=t,this.rows=i,this.rowIndex=r,this.groupValue=n,i.forEach(a=>a.parentRow=this)}get key(){return`${this.parentRow?.key??""}${this.groupColumn.key}${this.groupValue}`}parentRow;get cells(){return this.grid.columns.value.visibleLeafs.map(e=>new _e(this.grid,this,e))}get selected(){return this.allRows.every(e=>e.selected)}get indeterminate(){return!this.selected&&this.allRows.some(e=>e.selected)}get expanded(){return this.grid.expandedGroupRow.has(this.key)}get depth(){return this.parentRow?this.parentRow.depth+1:0}get count(){return this.rows.sumBy(e=>e.count,0)}get flatRows(){return this.expanded?[this,...this.rows.flatMap(e=>e.flatRows)]:[this]}get allRows(){return this.rows.flatMap(e=>e.allRows)}get groupingColumn(){return this.grid.columns.value.leafs.findOrThrow(e=>e.key===L)}get groupingColumnGridColumn(){const{visibleLeafs:e}=this.grid.columns.value,{groupingColumn:t}=this;return e.sumBy(r=>r.pin===t.pin&&r.key!==D&&r.key!==W&&r.key!==G?1:0)}toggleRow(){this.grid.toggleGroupRow(this.key)}}function A(o){const{children:e,column:t,style:i,...r}=o,{key:n,pin:a,left:c,right:d,isEdge:l,align:u,widthVarName:f,leftVarName:g,rightVarName:y,isFirstLeaf:b,isLastLeaf:j}=t;"align"in t.def&&(r.jc=u);const E=n===G,T=n===W,k=n===D,S=a==="LEFT",x=a==="RIGHT",C=S||x,v=S&&c===0,F=S&&l,V=x&&l,N=x&&d===0;return s.jsx(p.default,{component:"datagrid.body.cell",props:{role:"cell"},variant:{isPinned:C,isFirstLeftPinned:v,isLastLeftPinned:F,isFirstRightPinned:V,isLastRightPinned:N,isRowSelection:T,isRowNumber:E,isFirstLeaf:b,isLastLeaf:j,isEmptyCell:k},style:{width:`var(${f})`,height:`var(${t.grid.rowHeightVarName})`,left:S?`var(${g})`:void 0,right:x?`var(${y})`:void 0,...i},...r,children:e})}A.displayName="DataGridCell";function ue(o){const{row:e}=o,{selected:t,indeterminate:i,cells:r,groupingColumn:n,groupingColumnGridColumn:a,depth:c,expanded:d}=e,l=h.useCallback(()=>{e.grid.toggleRowsSelection(e.allRows.map(u=>u.key))},[]);return s.jsx(p.default,{className:"grid-row",selected:t,display:"contents",props:{role:"rowgroup"},children:r.map(u=>{const{key:f,pin:g,groupColumnWidthVarName:y}=u.column,b=g==="RIGHT";if(f===L)return s.jsx(A,{column:u.column,style:{width:`var(${y})`,right:b?"0":void 0},br:n.pin==="LEFT"?1:void 0,gridColumn:a,pl:4*c,overflow:"auto",children:s.jsx(m.default,{textWrap:"nowrap",px:3,children:s.jsxs(_.default,{clean:!0,onClick:()=>e.toggleRow(),cursor:"pointer",display:"flex",gap:1,ai:"center",children:[s.jsx(w.ExpandIcon,{fill:"currentColor",width:"14px",height:"14px",rotate:d?0:-90}),u.value]})})},f);if(f===W)return s.jsx(A,{column:u.column,children:s.jsx(ee.default,{variant:"datagrid",m:1,checked:t,indeterminate:i,onChange:l})},f);if(g!==n.pin||f===G||f===D)return s.jsx(A,{column:u.column,px:f===G?3:void 0,children:u.value},f)})})}ue.displayName="DataGridGroupRow";function ce(o){const{cell:e}=o;return s.jsx(p.default,{height:"fit",width:"fit",overflow:"auto",ai:"center",jc:e.column.align,children:s.jsx(m.default,{px:3,textOverflow:"ellipsis",overflow:"hidden",textWrap:"nowrap",children:e.value})})}ce.displayName="DataGridCellText";function de(o){const{row:e}=o,{selected:t}=e;return s.jsx(p.default,{className:"grid-row",selected:t,display:"contents",props:{role:"row"},children:e.cells.map(i=>s.jsx(A,{column:i.column,children:i.column.Cell?s.jsx(i.column.Cell,{cell:i}):s.jsx(ce,{cell:i})},i.column.key))})}de.displayName="DataGridRow";const We=10,se=20;function he(o){const{grid:e,scrollTop:t}=o,i=e.flatRows.value.length,r=Math.max(0,Math.floor(t/e.rowHeight)-se),n=e.props.def.visibleRowsCount??We,a=e.rowHeight*n+e.rowHeight/5,c=e.props.data.length===0,d=h.useMemo(()=>{if(console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid render rows"),c)return null;const l=n+se*2;return e.flatRows.value.take(l,r).map(f=>f instanceof ae?s.jsx(ue,{row:f},f.key):s.jsx(de,{row:f},f.key))},[e.flatRows.value,c,r,n]);if(console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid render DataGridBody"),c){const{noDataComponent:l}=e.props.def,u=e.props.loading?"loading...":"empty";return s.jsx(p.default,{jc:"center",ai:"center",width:"fit",position:"sticky",left:0,style:{height:a},children:l??u})}return s.jsx(m.default,{style:{height:a},children:s.jsx(m.default,{style:{height:`${i*e.rowHeight}px`},children:s.jsx(ne.default,{component:"datagrid.body",width:"max-content",minWidth:"fit",transition:"none",style:{transform:`translate3d(0, ${r*e.rowHeight}px, 0)`,willChange:"transform",gridTemplateColumns:e.gridTemplateColumns.value},children:d})})})}he.displayName="DataGridBody";function De(){return s.jsx(p.default,{d:"column",ai:"center",jc:"center",gap:4,py:16,px:6,bgColor:"gray-50",borderRadius:4,theme:{dark:{bgColor:"gray-900"}},children:s.jsxs(p.default,{d:"column",ai:"center",gap:3,children:[s.jsx(m.default,{width:16,height:16,borderRadius:999,bgColor:"gray-200",theme:{dark:{bgColor:"gray-700"}},display:"flex",ai:"center",jc:"center",children:s.jsx(le.default,{viewBox:"0 0 24 24",width:"40",fill:"currentColor",color:"gray-400",theme:{dark:{color:"gray-500"}},children:s.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm3-1a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V6a1 1 0 00-1-1H6zm2 3a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h4a1 1 0 110 2H9a1 1 0 01-1-1z"})})}),s.jsxs(p.default,{d:"column",ai:"center",gap:1,children:[s.jsx(m.default,{fontSize:18,fontWeight:600,color:"gray-900",theme:{dark:{color:"gray-50"}},children:"No Columns Selected"}),s.jsx(m.default,{fontSize:14,color:"gray-500",textAlign:"center",theme:{dark:{color:"gray-400"}},children:"Select at least one column from the columns menu to display data"})]})]})})}function re({column:o,grid:e}){const t=e.columnFilters[o.key],i=t?.type==="text"?t.value:"",[r,n]=h.useState(i),a=h.useRef(null);h.useEffect(()=>()=>{a.current&&clearTimeout(a.current)},[]);const c=h.useCallback(u=>{const f=u.target.value;n(f),a.current&&clearTimeout(a.current),a.current=setTimeout(()=>{f.trim()?e.setColumnFilter(o.key,{type:"text",value:f}):e.setColumnFilter(o.key,void 0),a.current=null},300)},[e,o.key]),d=h.useCallback(()=>{n(""),e.setColumnFilter(o.key,void 0)},[e,o.key]),l=typeof o.def.filterable=="object"?o.def.filterable:{};return s.jsxs(p.default,{ai:"center",position:"relative",width:"fit",children:[s.jsx(z.default,{width:"fit",variant:"compact",placeholder:l.placeholder??"Filter...",value:r,onChange:c}),r&&s.jsx(p.default,{position:"absolute",right:2,top:"1/2",translateY:"-1/2",cursor:"pointer",props:{onClick:d},children:s.jsx(m.default,{fontSize:10,color:"gray-400",hover:{color:"gray-600"},children:"✕"})})]})}function Ee({column:o,grid:e}){const t=e.columnFilters[o.key],i=t?.type==="number"?t.value:"",r=t?.type==="number"?t.operator:"eq",n=t?.type==="number"?t.valueTo:"",[a,c]=h.useState(i),[d,l]=h.useState(r),[u,f]=h.useState(n??""),g=h.useRef(null),y=h.useRef(null);h.useEffect(()=>()=>{g.current&&clearTimeout(g.current),y.current&&clearTimeout(y.current)},[]);const b=typeof o.def.filterable=="object"?o.def.filterable:{},j=h.useCallback((x,C,v)=>{const F=typeof C=="number"?C:parseFloat(C);if(isNaN(F)||C===""){e.setColumnFilter(o.key,void 0);return}const V={type:"number",operator:x,value:F};if(x==="between"&&v!==void 0&&v!==""){const N=typeof v=="number"?v:parseFloat(String(v));isNaN(N)||(V.valueTo=N)}e.setColumnFilter(o.key,V)},[e,o.key]),E=h.useCallback(x=>{const C=x.target.value;c(C),g.current&&clearTimeout(g.current),g.current=setTimeout(()=>{j(d,C,u),g.current=null},300)},[d,u,j]),T=h.useCallback(x=>{l(x),j(x,a,u)},[a,u,j]),k=h.useCallback(x=>{const C=x.target.value;f(C),y.current&&clearTimeout(y.current),y.current=setTimeout(()=>{j(d,a,C),y.current=null},300)},[d,a,j]),S=h.useCallback(()=>{c(""),f(""),l("eq"),e.setColumnFilter(o.key,void 0)},[e,o.key]);return s.jsxs(p.default,{ai:d==="between"?"start":"center",gap:1,width:"fit",children:[s.jsxs(R.default,{value:d,variant:"compact",onChange:x=>x&&T(x),minWidth:6,hideIcon:!0,children:[s.jsx(R.default.Item,{value:"eq",children:"="}),s.jsx(R.default.Item,{value:"ne",children:"≠"}),s.jsx(R.default.Item,{value:"gt",children:">"}),s.jsx(R.default.Item,{value:"gte",children:"≥"}),s.jsx(R.default.Item,{value:"lt",children:"<"}),s.jsx(R.default.Item,{value:"lte",children:"≤"}),s.jsx(R.default.Item,{value:"between",children:"↔"})]}),d==="between"?s.jsxs(p.default,{d:"column",gap:1,flex1:!0,children:[s.jsxs(p.default,{ai:"center",position:"relative",flex1:!0,children:[s.jsx(z.default,{type:"number",variant:"compact",placeholder:b.placeholder??"From",value:a,onChange:E,width:"fit",step:b.step}),(a!==""||u!=="")&&s.jsx(p.default,{position:"absolute",right:2,top:"1/2",translateY:"-1/2",cursor:"pointer",props:{onClick:S},children:s.jsx(m.default,{fontSize:10,color:"gray-400",hover:{color:"gray-600"},children:"✕"})})]}),s.jsx(p.default,{ai:"center",flex1:!0,children:s.jsx(z.default,{type:"number",variant:"compact",placeholder:"To",value:u,onChange:k,width:"fit",step:b.step})})]}):s.jsxs(p.default,{ai:"center",position:"relative",flex1:!0,children:[s.jsx(z.default,{type:"number",variant:"compact",placeholder:b.placeholder??"Value",value:a,onChange:E,width:"fit",step:b.step}),a!==""&&s.jsx(p.default,{position:"absolute",right:2,top:"1/2",translateY:"-1/2",cursor:"pointer",props:{onClick:S},children:s.jsx(m.default,{fontSize:10,color:"gray-400",hover:{color:"gray-600"},children:"✕"})})]})]})}function Ve({column:o,grid:e}){const t=e.columnFilters[o.key],i=t?.type==="multiselect"?t.values:[],r=typeof o.def.filterable=="object"?o.def.filterable:{},n=h.useMemo(()=>r.options?r.options:e.getColumnUniqueValues(o.key).map(d=>({label:d===null?"(empty)":String(d),value:d})),[r.options,e,o.key]),a=h.useCallback((c,d)=>{d.length===0?e.setColumnFilter(o.key,void 0):e.setColumnFilter(o.key,{type:"multiselect",values:d})},[e,o.key]);return s.jsxs(R.default,{multiple:!0,showCheckbox:!0,isSearchable:!0,searchPlaceholder:"Search...",value:i,width:"fit",minWidth:0,onChange:a,variant:"compact",children:[s.jsx(R.default.Unselect,{children:"Clear"}),s.jsx(R.default.SelectAll,{children:"Select All"}),n.map(c=>s.jsx(R.default.Item,{value:c.value,ai:"center",gap:2,children:c.label},String(c.value)))]})}function fe(o){const{column:e,grid:t}=o,{filterable:i}=e.def;if(!i)return null;switch((typeof i=="object"?i:{type:"text"}).type){case"text":return s.jsx(re,{column:e,grid:t});case"number":return s.jsx(Ee,{column:e,grid:t});case"multiselect":return s.jsx(Ve,{column:e,grid:t});default:return s.jsx(re,{column:e,grid:t})}}fe.displayName="DataGridColumnFilter";function pe(o){const{column:e,grid:t}=o,{key:i,pin:r,left:n,right:a,isEdge:c,widthVarName:d,leftVarName:l,rightVarName:u,filterable:f}=e,g=i===D,E=g||i===L||i===G||i===W,T=r==="LEFT",k=r==="RIGHT",S=T||k,x=T&&n===0,C=T&&c,v=k&&c,F=k&&a===0;return s.jsx(p.default,{component:"datagrid.filter.cell",variant:{isPinned:S,isFirstLeftPinned:x,isLastLeftPinned:C,isFirstRightPinned:v,isLastRightPinned:F},px:g?0:2,style:{width:`var(${d})`,left:T?`var(${l})`:void 0,right:k?`var(${u})`:void 0},children:!E&&f&&s.jsx(fe,{column:e,grid:t})})}pe.displayName="DataGridFilterCell";function me(o){const{grid:e}=o,{visibleLeafs:t}=e.columns.value;return t.some(r=>r.filterable)?t.map(r=>s.jsx(pe,{column:r,grid:e},r.uniqueKey)):null}me.displayName="DataGridFilterRow";function ge(o){const{column:e}=o,{key:t,pin:i,left:r,right:n,isEdge:a,isLeaf:c,align:d,header:l,grid:u}=e,[f,g,y]=w.useVisibility({hideOnScroll:!0,event:"mousedown"}),[b,j]=h.useState({top:0,left:0}),E=h.useMemo(()=>b.left>window.innerWidth/2,[b.left]),T=c&&e.sortable&&(u.sortColumn!==t||u.sortDirection==="DESC"),k=c&&e.sortable&&(u.sortColumn!==t||u.sortDirection==="ASC"),S=c&&e.sortable&&u.sortColumn===t,x=i!=="LEFT",C=i!=="RIGHT",v=!!i,F=c&&t!==L,V=c&&t===L,N=T||k||S,O=x||C||v,Y=d==="right"?2:void 0,K=d==="right"?void 0:i==="RIGHT"?2.5:4,$=t===D,q=t===G,J=t===W,P=i==="LEFT",U=i==="RIGHT",Q=P||i==="RIGHT",X=P&&r===0,Z=P&&a,I=U&&a,H=U&&n===0,ke=c&&!$&&!q&&!J&&e.sortable;return s.jsx(p.default,{position:"absolute",left:Y,right:K,top:"1/2",translateY:-3,ai:"center",children:s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu",onClick:()=>g(!f),variant:{isPinned:Q,isFirstLeftPinned:X,isLastLeftPinned:Z,isFirstRightPinned:I,isLastRightPinned:H,isSortable:ke,isRowNumber:q},children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.icon",children:s.jsx(w.DotsIcon,{fill:"currentColor"})}),f&&s.jsxs(Se.default,{component:"datagrid.header.cell.contextMenu.tooltip",onPositionChange:j,ref:y,adjustTranslateX:E?"-100%":"-21px",adjustTranslateY:"16px",children:[T&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.sortColumn("ASC"),children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:s.jsx(w.SortIcon,{width:"100%",fill:"currentColor"})}),"Sort Ascending"]}),k&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.sortColumn("DESC"),children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:s.jsx(w.SortIcon,{width:"100%",fill:"currentColor",rotate:180})}),"Sort Descending"]}),S&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.sortColumn(void 0),children:[s.jsx(m.default,{width:4}),"Clear Sort"]}),N&&(O||F||V)&&s.jsx(m.default,{bb:1,my:2,borderColor:"gray-300",component:"datagrid.header.cell.contextMenu.tooltip.item.separator"}),x&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.pinColumn("LEFT"),children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:s.jsx(w.PinIcon,{width:"100%",fill:"currentColor"})}),"Pin Left"]}),C&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.pinColumn("RIGHT"),children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:s.jsx(w.PinIcon,{width:"100%",fill:"currentColor",rotate:-90})}),"Pin Right"]}),v&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:()=>e.pinColumn(),children:[s.jsx(m.default,{width:4}),"Unpin"]}),N&&O&&(F||V)&&s.jsx(m.default,{component:"datagrid.header.cell.contextMenu.tooltip.item.separator"}),F&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:e.toggleGrouping,children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:s.jsx(w.GroupingIcon,{width:"100%",fill:"currentColor"})}),s.jsxs(m.default,{textWrap:"nowrap",children:["Group by ",l??t]})]}),V&&s.jsxs(_.default,{component:"datagrid.header.cell.contextMenu.tooltip.item",onClick:u.unGroupAll,children:[s.jsx(B.Span,{component:"datagrid.header.cell.contextMenu.tooltip.item.icon",children:s.jsx(w.GroupingIcon,{width:"100%",fill:"currentColor"})}),s.jsx(m.default,{textWrap:"nowrap",children:"Un-Group All"})]})]})]})})}ge.displayName="DataGridHeaderCellContextMenu";function xe(o){const{column:e}=o;return s.jsx(p.default,{height:"fit",ai:"center",position:"absolute",right:e.pin==="RIGHT"?void 0:0,left:e.pin!=="RIGHT"?void 0:0,py:3,children:s.jsx(m.default,{cursor:"col-resize",px:.75,mt:-6,className:"resizer",height:"fit",props:{onMouseDown:e.resizeColumn,onTouchStart:e.resizeColumn},children:s.jsx(m.default,{component:"datagrid.header.cell.resizer"})})})}xe.displayName="DataGridHeaderCellResizer";function Ce(o){const{column:e}=o,{key:t,pin:i,left:r,right:n,isEdge:a,isLeaf:c,leafs:d,grid:l,header:u,gridRows:f,widthVarName:g,leftVarName:y,rightVarName:b,inlineWidth:j,isFirstLeaf:E,isLastLeaf:T}=e,k=t===D,S=t===L,x=t===G,C=t===W,v=i==="LEFT",F=i==="RIGHT",V=v||i==="RIGHT",N=v&&r===0,O=v&&a,Y=F&&a,K=F&&n===0,$=c&&!k&&!x&&!C&&e.sortable,q=c?1:d.length,J=!x&&!C&&e.resizable,P=!x&&!C,U=C?void 0:e.align==="right"?10:3,Q=C?void 0:e.align==="center"?3:void 0,X=h.useCallback(()=>{l.toggleSelectAllRows()},[]),Z=h.useMemo(()=>{if(x)return null;if(C){const I=l.selectedRows.size===l.props.data.length,H=!I&&l.selectedRows.size>0;return s.jsx(ee.default,{variant:"datagrid",m:1,indeterminate:H,checked:I,onChange:X})}if(S){if(l.groupColumns.size===1){const I=l.columns.value.leafs.findOrThrow(H=>H.key===l.groupColumns.values().next().value);return I.header??I.key}return"Group"}return u??t},[l.groupColumns,l.selectedRows,X]);return s.jsx(p.default,{props:{role:"columnheader"},component:"datagrid.header.cell",variant:{isPinned:V,isFirstLeftPinned:N,isLastLeftPinned:O,isFirstRightPinned:Y,isLastRightPinned:K,isSortable:$,isRowNumber:x,isFirstLeaf:E,isLastLeaf:T,isEmptyCell:k},gridRow:f,gridColumn:q,style:{width:`var(${g})`,left:v?`var(${y})`:void 0,right:F?`var(${b})`:void 0},children:!k&&s.jsxs(s.Fragment,{children:[s.jsx(p.default,{width:"fit",height:"fit",jc:e.align,props:{onClick:$?()=>e.sortColumn():void 0},children:s.jsxs(p.default,{overflow:"hidden",position:c?void 0:"sticky",ai:"center",transition:"none",pl:U,pr:Q,style:{left:i?void 0:`var(${l.leftEdgeVarName})`},children:[s.jsx(m.default,{overflow:"hidden",textOverflow:"ellipsis",textWrap:"nowrap",children:Z}),t===l.sortColumn&&s.jsx(m.default,{pl:(j??0)<58?0:2,children:s.jsx(w.SortIcon,{width:"16px",rotate:l.sortDirection==="ASC"?0:180,fill:"currentColor"})}),P&&s.jsx(m.default,{minWidth:e.align==="right"?4:10})]})}),J&&s.jsx(xe,{column:e}),P&&s.jsx(ge,{column:e})]})})}Ce.displayName="DataGridHeaderCell";function we(o){const{grid:e}=o;return s.jsxs(ne.default,{component:"datagrid.header",style:{gridTemplateColumns:e.gridTemplateColumns.value},children:[e.headerRows.value.map(t=>t.map(i=>s.jsx(Ce,{column:i},i.uniqueKey))),s.jsx(me,{grid:e})]})}we.displayName="DataGridHeader";function ye(o){const{grid:e}=o,[t,i]=h.useState(0),r=h.useRef(null),n=h.useCallback(c=>{r.current!==null&&cancelAnimationFrame(r.current),r.current=requestAnimationFrame(()=>{i(c.target.scrollTop),r.current=null})},[]);return e.columns.value.userVisibleLeafs.length>0?s.jsxs(m.default,{overflowX:"scroll",style:{willChange:"scroll-position"},props:{onScroll:n},children:[s.jsx(we,{grid:e}),s.jsx(he,{grid:e,scrollTop:t})]}):s.jsx(De,{})}ye.displayName="DataGridContent";function be(o){const{grid:e}=o;return e.groupColumns.size===0?null:s.jsxs(p.default,{component:"datagrid.topBar.columnGroups",children:[s.jsx(B.Span,{component:"datagrid.topBar.columnGroups.icon",children:s.jsx(w.GroupingIcon,{width:"100%",fill:"currentColor"})}),Array.from(e.groupColumns,t=>{const i=e.columns.value.leafs.findOrThrow(r=>r.key===t);return s.jsxs(h.Fragment,{children:[s.jsx(w.ExpandIcon,{fill:"currentColor",width:"14px",height:"14px",rotate:-90}),s.jsxs(p.default,{component:"datagrid.topBar.columnGroups.item",children:[i.header??i.key,s.jsx(_.default,{component:"datagrid.topBar.columnGroups.item.icon",onClick:()=>e.toggleGrouping(i.key),children:s.jsx(m.default,{fontSize:10,color:"gray-400",hover:{color:"gray-600"},children:"✕"})})]})]},t)})]})}be.displayName="DataGridColumnGroups";function Ne(o){const{grid:e}=o,[t,i]=h.useState(e.globalFilterValue),r=h.useRef(null);h.useEffect(()=>()=>{r.current&&clearTimeout(r.current)},[]);const n=h.useCallback(u=>{const f=u.target.value;i(f),r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{e.setGlobalFilter(f),r.current=null},300)},[e]),a=h.useCallback(()=>{i(""),e.setGlobalFilter("")},[e]),{filtered:c,total:d}=e.filterStats,l=e.hasActiveFilters&&c!==d;return s.jsxs(p.default,{component:"datagrid.topBar.globalFilter",children:[l&&s.jsxs(m.default,{component:"datagrid.topBar.globalFilter.stats",children:[c,"/",d]}),s.jsxs(p.default,{position:"relative",ai:"center",children:[s.jsx(p.default,{position:"absolute",left:3,pointerEvents:"none",color:"gray-400",theme:{dark:{color:"gray-500"}},children:s.jsx(w.SearchIcon,{fill:"currentColor",width:"14px"})}),s.jsx(z.default,{placeholder:"Search...",variant:"compact",value:t,onChange:n,pl:8,pr:t?8:3}),t&&s.jsx(m.default,{position:"absolute",right:2,cursor:"pointer",p:1,color:"gray-400",hover:{color:"gray-600"},theme:{dark:{color:"gray-500",hover:{color:"gray-300"}}},props:{onClick:a},children:s.jsx(m.default,{fontSize:12,fontWeight:600,children:"✕"})})]})]})}function ve(o){const{grid:e}=o,i=h.useMemo(()=>e.columns.value.leafs.filter(l=>![D,G,W,L].includes(l.key)),[e.columns.value.leafs]).map(l=>({id:String(l.key),label:l.header??l.key,leaf:l})),r=i.filter(l=>l.leaf.isVisible).map(l=>l.id),n=i.length,c=n-r.length>0,d=(l,u)=>{const f=new Set(u);i.forEach(g=>{const y=f.has(g.id);g.leaf.isVisible!==y&&g.leaf.toggleVisibility()})};return s.jsxs(R.default,{multiple:!0,showCheckbox:!0,hideIcon:!0,variant:"compact",value:r,onChange:d,isSearchable:i.length>6,searchPlaceholder:"Search columns...",display:"inline-flex",children:[s.jsx(R.default.Display,{children:l=>{const u=l.length===0;return s.jsxs(p.default,{ai:"center",gap:2,children:[s.jsxs(le.default,{viewBox:"0 0 20 20",width:"18",height:"18",children:[s.jsx("rect",{x:"2",y:"3",width:"4",height:"14",rx:"1",fill:"currentColor",opacity:.9}),s.jsx("rect",{x:"8",y:"3",width:"4",height:"14",rx:"1",fill:"currentColor",opacity:.6}),s.jsx("rect",{x:"14",y:"3",width:"4",height:"14",rx:"1",fill:"currentColor",opacity:.3})]}),c&&s.jsxs(m.default,{tag:"span",fontSize:11,lineHeight:16,fontWeight:500,px:2,py:.5,borderRadius:1,bgColor:u?"red-100":"amber-100",color:u?"red-700":"amber-700",theme:{dark:{bgColor:u?"red-900":"amber-900",color:u?"red-300":"amber-300"}},children:[l.length,"/",n]})]})}}),s.jsx(R.default.SelectAll,{children:"Show All"}),s.jsx(R.default.Unselect,{children:"Hide All"}),i.map(l=>s.jsx(R.default.Item,{value:l.id,textWrap:"nowrap",children:l.label},l.id))]})}ve.displayName="DataGridTopBarContextMenu";function Re(o){const{grid:e}=o,{title:t,topBarContent:i,globalFilter:r}=e.props.def;return s.jsxs(p.default,{component:"datagrid.topBar",position:"relative",ai:"center",jc:"space-between",gap:4,flexWrap:"wrap",children:[s.jsxs(p.default,{ai:"center",gap:3,flexWrap:"wrap",minWidth:0,children:[s.jsx(ve,{grid:e}),t&&s.jsx(m.default,{fontWeight:600,fontSize:16,color:"gray-800",theme:{dark:{color:"gray-100"}},children:t}),s.jsx(be,{grid:e})]}),s.jsxs(p.default,{ai:"center",gap:3,flexWrap:"wrap",jc:"flex-end",minWidth:0,children:[i&&s.jsx(m.default,{children:i}),r&&s.jsx(Ne,{grid:e})]})]})}Re.displayName="DataGridTopBar";function Be(o){const[e,t]=h.useState(0),i=h.useRef();return i.current||(i.current=new Le(o,()=>t(r=>r+1))),h.useEffect(()=>{i.current.props=o,i.current.rows.clear(),i.current.flatRows.clear(),i.current.update()},[o.data]),h.useEffect(()=>{i.current.props=o,i.current.sourceColumns.clear(),i.current.columns.clear(),i.current.headerRows.clear(),i.current.gridTemplateColumns.clear(),i.current.rows.clear(),i.current.flatRows.clear(),i.current.sizes.clear(),i.current.update()},[o.def]),h.useEffect(()=>{i.current.props=o,i.current.update()},[o.loading]),h.useEffect(()=>{i.current.props=o,i.current.rows.clear(),i.current.flatRows.clear(),i.current.update()},[o.globalFilterValue,o.columnFilters,o.filters]),i.current}function je(o){const e=Be(o),t=h.useRef(null);return h.useLayoutEffect(()=>{const i=t.current;if(!i)return;const r=new ResizeObserver(n=>{const a=n[0]?.contentRect.width??0;e.setContainerWidth(a)});return r.observe(i),()=>r.disconnect()},[e]),console.debug("\x1B[36m%s\x1B[0m","[react-box]: DataGrid render"),s.jsxs(m.default,{ref:t,component:"datagrid",style:e.sizes.value,props:{role:"presentation"},children:[e.props.def.topBar&&s.jsx(Re,{grid:e}),s.jsx(ye,{grid:e}),e.props.def.bottomBar&&s.jsx(Fe,{grid:e})]})}je.displayName="DataGrid";exports.default=je;