@cryptlex/web-components 6.6.6-alpha33 → 6.6.6-alpha35

package/dist/components/data-table.d.ts

@@ -2,6 +2,7 @@ import { operations } from '@cryptlex/web-api-types/develop';
 import { ColumnDef, ColumnHelper, PaginationState, SortingState } from '@tanstack/react-table';
 import { PressEvent } from 'react-aria-components';
 import { FiltersConfig, TableFilter } from '../components/data-table-filter';
+import { DialogMenuAction } from '../components/dialog-menu';
 import { CtxResourceName } from '../utilities/resources';
 import { CtxIcon } from './icons';
 /** Reserved name for actions column */
@@ -27,19 +28,6 @@ export declare function getTableCallback<T extends object>(getter: (q: Record<st
     callback: TableFetchFn<T>;
     columnHelper: ColumnHelper<T>;
 };
-type RowActionBase<T> = {
-    label: string;
-    isDisabled?: (t: T) => boolean;
-    icon: CtxIcon;
-};
-export type RowAction<T> = RowActionBase<T> & ({
-    kind: 'action';
-    onAction: (t: T) => void;
-} | {
-    kind: 'dialog';
-    component: (close: () => void, t: T) => React.ReactNode;
-    isDismissable?: boolean;
-});
 type DataTableFactory<T extends object, TOperation extends keyof operations> = {
     resourceName: CtxResourceName;
     callback: TableFetchFn<T>;
@@ -49,7 +37,7 @@ type DataTableFactory<T extends object, TOperation extends keyof operations> = {
     allowSelection?: boolean;
     filterConfig: FiltersConfig<TOperation>;
     initialFilters: TableFilter[];
-    rowActions?: RowAction<T>[];
+    rowActions?: DialogMenuAction<T>[];
 };
 type DataTableState = {
     sorting: SortingState;

package/dist/components/data-table.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,Fragment as C,jsxs as l}from"react/jsx-runtime";import{createContext as re,useState as F,useMemo as ie,useEffect as oe,useContext as le,useRef as se}from"react";import{Button as S}from"./button.js";import{useSensors as ce,useSensor as q,PointerSensor as ue,KeyboardSensor as de,DndContext as me,closestCenter as ge,DragOverlay as pe}from"@dnd-kit/core";import{sortableKeyboardCoordinates as fe,SortableContext as be,verticalListSortingStrategy as he,arrayMove as Se,useSortable as ve}from"@dnd-kit/sortable";import{CSS as Ce}from"@dnd-kit/utilities";import{useQuery as ye,keepPreviousData as xe}from"@tanstack/react-query";import{createColumnHelper as W,useReactTable as Ie,getCoreRowModel as we,flexRender as X}from"@tanstack/react-table";import{useLocalStorage as V}from"@uidotdev/usehooks";import{merge as Fe}from"lodash-es";import{TfDatePicker as Ne}from"./date-picker.js";import{EasyMenu as L,MenuItem as D}from"./menu.js";import{PopoverTrigger as Te,Popover as Ae}from"./popover.js";import{useAppForm as Pe}from"../utilities/form-hook.js";import{useResourceFormatter as M}from"../utilities/resources.js";import{classNames as x}from"../utilities/theme.js";import{IcInfo as De,IcMoreVertical as Re,IcRefresh as Oe,IcColumns as _e,IcGrip as ze,IcFirst as Le,IcLeft as Me,IcRight as Ee,IcLast as $e,IcSortAsc as ke,IcSortDesc as qe,IcSortNone as Ve,IcFilter as He,IcRemove as H,IcCheck as U,IcMinus as Ue,IcAccount as je,IcLicense as Be,IcDate as Ke,IcFile as Qe}from"./icons.js";import{TfMultipleIdSearchInput as Ge}from"./id-search.js";import{DialogMenu as We}from"./dialog-menu.js";import{Loader as Xe}from"./loader.js";import{SearchField as Ze}from"./searchfield.js";import{Table as Je,TableHeader as Ye,TableRow as j,TableHead as et,TableBody as tt,TableCell as nt}from"./table.js";import{formatDate as B}from"../utilities/date.js";import{Checkbox as K}from"./checkbox.js";import"class-variance-authority";import"react-aria-components";import"@internationalized/date";import"./calendar.js";import"./form.js";import"./datefield.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./list-box.js";import"./select.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";import"../utilities/string.js";import"clsx";import"./dialog.js";function rn(t){const a=async(r,i,d,s)=>{const m={...s,page:r.pageIndex+1,limit:r.pageSize,sort:at(i[0]),search:d},b=await t(m);return{total:Number.parseInt(b.response.headers.get("Pagination-Count")||"0"),data:b.data}},n=W();return{callback:a,columnHelper:n}}function at(t){return t?t.desc?`-${t.id}`:`+${t.id}`:"-createdAt"}const N=W(),rt=[N.accessor("checkbox",{header:({table:t})=>e(K,{isIndeterminate:t.getIsSomeRowsSelected()&&!t.getIsAllPageRowsSelected(),isSelected:t.getIsAllPageRowsSelected()||t.getIsSomePageRowsSelected(),onChange:()=>t.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:t})=>e(K,{isSelected:t.getIsSelected(),onChange:()=>t.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],it=[N.accessor("id",{header:()=>"ID"})],ot=[N.accessor("createdAt",{header:()=>"Creation Date",cell:({row:t})=>{const a=t.getValue("createdAt");return B(a)},enableHiding:!1}),N.accessor("updatedAt",{header:()=>"Last Updated",cell:({row:t})=>{const a=t.getValue("updatedAt");return B(a)},enableHiding:!1})],z="TableActions",lt=t=>t.length===0?[]:[N.accessor(z,{header:"",id:z,enableHiding:!1,cell:({row:a})=>e(We,{label:e(Re,{}),items:t.map(n=>{const r=n.isDisabled?n.isDisabled(a.original):!1,i={label:n.label,isDisabled:r,icon:n.icon};return n.kind==="action"?{...i,onPress:()=>n.onAction(a.original)}:{...i,component:d=>n.component(d,a.original),isDismissable:n.isDismissable}})})})];function on({resourceName:t,columns:a,callback:n,filterConfig:r,columnsToHideByDefault:i={},allowSelection:d=!1,initialFilters:s=[],tableActions:m,rowActions:b}){const[u,v]=F({pagination:{pageIndex:0,pageSize:20},sorting:[]}),[g,c]=F({}),[f,p]=F(""),[h,E]=V(`${t}_ctx_column_order_preference`,[]),[$,ee]=V(`${t}_ctx_column_visibility_preference`,{id:!1,...i}),[R,te]=F(s),O=ie(()=>R.map(o=>Array.isArray(o.value)?{[o.property]:{[o.operator]:o.value.join(",")}}:{[o.property]:{[o.operator]:o.value}}).reduce((o,w)=>Fe(o,w),{}),[R]),_=o=>{v(w=>({...w,...o}))},{sorting:T,pagination:A}=u,P=ye({queryKey:[t,A,T,f,O],queryFn:()=>n(A,T,f,O),placeholderData:xe,retry:0,refetchOnWindowFocus:!1}),ne=[...d?rt:[],...it,...a,...ot,...lt(b??[])];function ae(o){return typeof o=="function"}function I(o,w){return ae(o)?o(w):o}const k=Ie({data:P.data?.data??[],columns:ne,getCoreRowModel:we(),rowCount:P.data?.total,manualPagination:!0,onPaginationChange:o=>{_({pagination:I(o,A)})},manualSorting:!0,onSortingChange:o=>{c({}),_({sorting:[...I(o,T)]})},manualFiltering:!0,onColumnVisibilityChange:o=>{ee(I(o,$))},onRowSelectionChange:o=>{c(I(o,g))},onColumnOrderChange:o=>{E(I(o,h))},state:{sorting:T,columnVisibility:$,pagination:A,rowSelection:g,columnOrder:h},meta:{refetch:P.refetch}});return oe(()=>{E([...k.getAllLeafColumns().map(o=>o.id)])},[]),{tableState:u,updateTableState:_,query:P,setSearchQuery:p,searchQuery:f,tanTable:k,mergedFilters:O,filters:R,setFilters:te,filterConfig:r,tableActions:m}}const Z=re(null);function y(){const t=le(Z);if(!t)throw Error("DataTable should be used within DataTableProvider.");return t}function ln({children:t,...a}){return e(Z.Provider,{value:a,children:t})}function sn({className:t,...a}){const{query:n,tanTable:r}=y();return e(C,{children:l("section",{...a,className:x("flex flex-col bg-elevation-1",t),children:[e(dt,{}),l("div",{className:"w-full overflow-auto border-x h-table relative",tabIndex:0,children:[n.isLoading&&e(Q,{className:"cursor-wait",children:e(Xe,{})}),!n.isLoading&&r.getRowModel().rows.length===0&&e(Q,{className:"cursor-not-allowed",children:!n.isFetching&&(n.isError?l("span",{className:"flex gap-3 justify-center items-center",children:[e(De,{}),e("span",{children:n.error.message})]}):n.data?.data?.length===0?e(C,{children:"No results found."}):e(C,{children:"Unknown error. Please contact customer support."}))}),!n.isLoading&&r.getRowModel().rows.length!==0&&e(mt,{className:"w-full"})]}),l("div",{className:"flex w-full justify-between border gap-icon p-icon overflow-x-auto",children:[l("div",{className:"flex gap-icon",children:[e(st,{}),e(ut,{})]}),e(ct,{})]})]})})}function Q({children:t,className:a}){return l(C,{children:[e("span",{className:x(a,"absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center"),children:t}),e("span",{className:"relative h-full w-0 block"})]})}function st(){const{tanTable:t}=y(),[a,n]=F(null),r=M(),i=ce(q(ue),q(de,{coordinateGetter:fe}));return e(me,{sensors:i,collisionDetection:ge,onDragStart:s=>{const{active:m}=s;n(m.id.toString())},onDragEnd:s=>{const{active:m,over:b}=s;if(b&&m.id!==b.id){const u=t.getState().columnOrder,v=u.indexOf(m.id.toString()),g=u.indexOf(b.id.toString());t.setColumnOrder([...Se(u,v,g)])}n(null)},children:l(be,{items:t.getState().columnOrder,strategy:he,children:[l(L,{label:l(C,{children:[e(_e,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:t.getAllFlatColumns(),selectedKeys:t.getVisibleFlatColumns().map(s=>s.id),children:[e(D,{onAction:()=>t.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),t.getState().columnOrder.map(s=>{const m=t.getAllFlatColumns().find(b=>b.id===s);return m?e(d,{column:m},m.id):null})]}),e(pe,{children:a?e("div",{className:"opacity-70 border-2 border-primary",children:r(a)}):null})]})});function d({column:s}){const{attributes:m,listeners:b,setNodeRef:u,transform:v,transition:g}=ve({id:s.id}),c={transform:Ce.Transform.toString(v),transition:g,zIndex:"999"};return l(D,{ref:u,style:c,...m,id:s.id,onAction:()=>s.toggleVisibility(),isDisabled:!s.getCanHide(),className:"flex items-center",children:[e(ze,{...b,className:"size-icon cursor-grab"}),r(s.id),s.getIsSorted()&&e(J,{className:"size-icon",direction:s.getIsSorted()})]})}}function ct(){const{tanTable:t,query:a}=y(),n=a.data?.total??0;return l("div",{className:"flex items-center gap-2",children:[e("span",{className:"whitespace-nowrap body-sm text-muted",children:`${t.getState().pagination.pageIndex*t.getState().pagination.pageSize+1} - ${Math.min((t.getState().pagination.pageIndex+1)*t.getState().pagination.pageSize,n)} of ${n?.toLocaleString()}`}),e(S,{"aria-label":"First page",onPress:()=>t.firstPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(Le,{})}),e(S,{"aria-label":"Previous page",onPress:()=>t.previousPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(Me,{})}),e(S,{"aria-label":"Next page",onPress:()=>t.nextPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e(Ee,{})}),e(S,{"aria-label":"Last page",onClick:()=>t.lastPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e($e,{})})]})}function ut(){const{tanTable:t}=y(),a=[10,20,30,40,50];return e(L,{label:t.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[t.getState().pagination.pageSize.toString()],items:a.map(n=>({id:n.toString(),value:n})),children:n=>e(D,{onAction:()=>t.setPageSize(n.value),children:n.value})})}function dt(){const{query:t,tanTable:a,searchQuery:n,setSearchQuery:r,tableActions:i}=y();return l("section",{className:"flex bg-elevation-1 justify-between my-0 p-icon border gap-icon overflow-auto",children:[l("div",{className:"flex gap-icon",children:[e(S,{"aria-label":"Refresh",isPending:t.isFetching,onClick:()=>t.refetch(),variant:"neutral",size:"icon",children:e(Oe,{})}),i.filter(d=>d.bulk===a.getSelectedRowModel().rows.length>0).map((d,s)=>{const m=d.icon;return e(S,{"aria-label":d.label,type:"button",isDisabled:t.isFetching,className:"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform",onPress:b=>{d.onClick(b,a.getSelectedRowModel().rows.map(u=>u.original))},size:"icon",children:e(m,{})},`${s}-${d.bulk}`)})]}),l("div",{className:"flex gap-icon",children:[e(ft,{}),e(Ze,{value:n,onChange:r})]})]})}function J({direction:t,...a}){return t==="asc"?e(ke,{className:"size-3.5",...a}):t==="desc"?e(qe,{className:"size-3.5",...a}):e(Ve,{className:"size-3.5",...a})}function G({header:t}){const a=M();return t.column.columnDef.header?X(t.column.columnDef.header,t.getContext()):a(t.id)}function mt({className:t}){const{tanTable:a}=y(),n=(r,i)=>x("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",r&&"bg-elevation-1 sticky right-0 z-50 text-center",i);return l(Je,{className:x("table-auto",t),children:[e(Ye,{className:"sticky top-0 z-10",children:a.getHeaderGroups().map(r=>e(j,{children:r.headers.map(i=>l(et,{scope:"col",colSpan:i.colSpan,className:n(!1,"bg-elevation-1"),children:[!i.column.getCanSort()&&!i.isPlaceholder&&e("div",{className:"w-full justify-start p-1 inline-flex items-center gap-1 body-sm",children:e(G,{header:i})}),i.column.getCanSort()&&l(S,{variant:"ghost",className:"w-full justify-start p-1",onPress:i.column.getToggleSortingHandler(),children:[e("span",{children:e(G,{header:i})}),e(J,{direction:i.column.getIsSorted()})]})]},i.id))},r.id))}),e(tt,{children:a.getRowModel().rows.map(r=>e(j,{className:x("transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":r.getIsSelected(),children:r.getVisibleCells().map(i=>e(nt,{className:n(i.column.id===z),children:X(i.column.columnDef.cell,i.getContext())},i.id))},r.id))})]})}const cn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],gt={eq:"equal to",ne:"not equal to",cn:"contains",nc:"does not contain",sw:"starts with",ew:"ends with",in:"includes",nin:"does not include",gt:"greater than",gte:"greater than or equal to",lt:"less than",lte:"less than or equal to"};function pt(t,a){const n=`${a}-${Date.now()}`,r=Y[t][0];switch(t){case"bool":return{id:n,type:t,property:a,operator:r,value:!0};case"string":return{id:n,type:t,property:a,operator:r,value:""};case"date":return{id:n,type:t,property:a,operator:r,value:new Date().toISOString()};case"id":return{id:n,type:t,property:a,operator:r,value:""};case"id-search":return{id:n,type:t,property:a,operator:r,value:[]};case"enum":return{id:n,type:t,property:a,operator:r,value:new Set};case"number":return{id:n,type:t,property:a,operator:r,value:0}}}const Y={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"],number:["eq","ne","gt","gte","lt","lte"]};function ft({className:t,...a}){const{filters:n,query:r,setFilters:i,filterConfig:d}=y(),s=se(null),m=M(),u=Pe({defaultValues:{filters:n},onSubmit:({value:g})=>{i(g.filters)}}),v=Object.keys(d).sort();return e("section",{...a,className:x("flex gap-icon items-center",t),children:l(Te,{onOpenChange:g=>{g?s.current?.focus():u.handleSubmit()},children:[l("div",{className:"relative",children:[n.length>0&&e("div",{className:"size-2 rounded-full absolute bg-primary/90 z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5"}),e(S,{"aria-label":"Filter",isDisabled:r.isPending||v.length===0,type:"button",size:"icon",variant:"neutral",children:e(He,{})})]}),e(Ae,{className:"w-full p-icon",children:e("form",{onSubmit:g=>{g.preventDefault()},className:"flex flex-col gap-icon max-h-table overflow-auto ",children:e(u.Field,{mode:"array",name:"filters",children:g=>l(C,{children:[g.state.value.map((c,f)=>l("div",{className:"flex gap-icon items-center justify-normal",children:[e("span",{className:"body-sm",children:m(c.property)}),e(u.AppField,{name:`filters[${f}].operator`,children:p=>e(p.TfSingleSelect,{items:Y[c.type].map(h=>({id:h,label:e(C,{children:gt[h]})}))})},c.id),c.type==="bool"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>e(p.TfCheckbox,{autoFocus:!0})}),c.type==="date"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>e(Ne,{autoFocus:!0})}),c.type==="id"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>e(p.TfTextField,{autoFocus:!0})}),c.type==="string"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>e(p.TfTextField,{autoFocus:!0})}),c.type==="number"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>e(p.TfNumberField,{autoFocus:!0})}),c.type==="enum"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>{const h=d[c.property];return h.type!=="enum"?null:e(p.TfMultiSelect,{items:h.options})}}),c.type==="id-search"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>{const h=d[c.property];return h.type!=="id-search"?null:e(Ge,{resource:h.resource,accessor:h.accessor,searchFn:h.searchFn})}}),e(S,{type:"button",variant:"neutral",size:"icon",onPress:()=>g.removeValue(f),children:e(H,{})})]},c.id)),l("div",{className:"flex w-full items-center justify-end gap-2 not-first:mt-icon",children:[e(L,{label:"Add filter",autoFocus:!0,children:v.sort().map(c=>{const f=d[c].type,p=bt[f];return l(D,{onAction:()=>{const h=pt(f,c);g.pushValue(h)},children:[m(c),e(p,{})]},c)})}),g.state.value.length>0?l(S,{type:"button",variant:"neutral",onPress:()=>{g.setValue([])},children:[e(H,{}),"Reset"]}):null]})]})})})})]})})}const bt={"id-search":Qe,bool:U,date:Ke,enum:Be,id:je,number:Ue,string:U};export{gt as C,ft as D,sn as DataTable,Z as DataTableContext,ln as DataTableProvider,cn as F,rn as getTableCallback,y as useDataTable,on as useDataTableState};
+"use client";import{jsx as e,Fragment as C,jsxs as l}from"react/jsx-runtime";import{createContext as ae,useState as F,useMemo as ie,useEffect as oe,useContext as le,useRef as se}from"react";import{Button as S}from"./button.js";import{useSensors as ce,useSensor as k,PointerSensor as ue,KeyboardSensor as de,DndContext as me,closestCenter as ge,DragOverlay as pe}from"@dnd-kit/core";import{sortableKeyboardCoordinates as fe,SortableContext as he,verticalListSortingStrategy as be,arrayMove as Se,useSortable as ve}from"@dnd-kit/sortable";import{CSS as Ce}from"@dnd-kit/utilities";import{useQuery as ye,keepPreviousData as we}from"@tanstack/react-query";import{createColumnHelper as W,useReactTable as xe,getCoreRowModel as Ie,flexRender as X}from"@tanstack/react-table";import{useLocalStorage as V}from"@uidotdev/usehooks";import{merge as Fe}from"lodash-es";import{TfDatePicker as Ne}from"./date-picker.js";import{EasyMenu as L,MenuItem as D}from"./menu.js";import{PopoverTrigger as Te,Popover as Ae}from"./popover.js";import{useAppForm as Pe}from"../utilities/form-hook.js";import{useResourceFormatter as M}from"../utilities/resources.js";import{classNames as w}from"../utilities/theme.js";import{IcInfo as De,IcMoreVertical as Re,IcRefresh as Oe,IcColumns as _e,IcGrip as ze,IcFirst as Le,IcLeft as Me,IcRight as Ee,IcLast as $e,IcSortAsc as qe,IcSortDesc as ke,IcSortNone as Ve,IcFilter as He,IcRemove as H,IcCheck as U,IcMinus as Ue,IcAccount as je,IcLicense as Be,IcDate as Ke,IcFile as Qe}from"./icons.js";import{TfMultipleIdSearchInput as Ge}from"./id-search.js";import{DialogMenu as We}from"./dialog-menu.js";import{Loader as Xe}from"./loader.js";import{SearchField as Ze}from"./searchfield.js";import{Table as Je,TableHeader as Ye,TableRow as j,TableHead as et,TableBody as tt,TableCell as nt}from"./table.js";import{formatDate as B}from"../utilities/date.js";import{Checkbox as K}from"./checkbox.js";import"class-variance-authority";import"react-aria-components";import"@internationalized/date";import"./calendar.js";import"./form.js";import"./datefield.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./list-box.js";import"./select.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";import"../utilities/string.js";import"clsx";import"./dialog.js";function an(t){const n=async(a,o,g,s)=>{const d={...s,page:a.pageIndex+1,limit:a.pageSize,sort:rt(o[0]),search:g},h=await t(d);return{total:Number.parseInt(h.response.headers.get("Pagination-Count")||"0"),data:h.data}},r=W();return{callback:n,columnHelper:r}}function rt(t){return t?t.desc?`-${t.id}`:`+${t.id}`:"-createdAt"}const N=W(),at=[N.accessor("checkbox",{header:({table:t})=>e(K,{isIndeterminate:t.getIsSomeRowsSelected()&&!t.getIsAllPageRowsSelected(),isSelected:t.getIsAllPageRowsSelected()||t.getIsSomePageRowsSelected(),onChange:()=>t.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:t})=>e(K,{isSelected:t.getIsSelected(),onChange:()=>t.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],it=[N.accessor("id",{header:()=>"ID"})],ot=[N.accessor("createdAt",{header:()=>"Creation Date",cell:({row:t})=>{const n=t.getValue("createdAt");return B(n)},enableHiding:!1}),N.accessor("updatedAt",{header:()=>"Last Updated",cell:({row:t})=>{const n=t.getValue("updatedAt");return B(n)},enableHiding:!1})],z="TableActions",lt=t=>t.length===0?[]:[N.accessor(z,{header:"",id:z,enableHiding:!1,cell:({row:n})=>e(We,{label:e(Re,{}),data:n.original,items:t})})];function on({resourceName:t,columns:n,callback:r,filterConfig:a,columnsToHideByDefault:o={},allowSelection:g=!1,initialFilters:s=[],tableActions:d,rowActions:h}){const[u,v]=F({pagination:{pageIndex:0,pageSize:20},sorting:[]}),[m,c]=F({}),[f,p]=F(""),[b,E]=V(`${t}_ctx_column_order_preference`,[]),[$,ee]=V(`${t}_ctx_column_visibility_preference`,{id:!1,...o}),[R,te]=F(s),O=ie(()=>R.map(i=>Array.isArray(i.value)?{[i.property]:{[i.operator]:i.value.join(",")}}:{[i.property]:{[i.operator]:i.value}}).reduce((i,I)=>Fe(i,I),{}),[R]),_=i=>{v(I=>({...I,...i}))},{sorting:T,pagination:A}=u,P=ye({queryKey:[t,A,T,f,O],queryFn:()=>r(A,T,f,O),placeholderData:we,retry:0,refetchOnWindowFocus:!1}),ne=[...g?at:[],...it,...n,...ot,...lt(h??[])];function re(i){return typeof i=="function"}function x(i,I){return re(i)?i(I):i}const q=xe({data:P.data?.data??[],columns:ne,getCoreRowModel:Ie(),rowCount:P.data?.total,manualPagination:!0,onPaginationChange:i=>{_({pagination:x(i,A)})},manualSorting:!0,onSortingChange:i=>{c({}),_({sorting:[...x(i,T)]})},manualFiltering:!0,onColumnVisibilityChange:i=>{ee(x(i,$))},onRowSelectionChange:i=>{c(x(i,m))},onColumnOrderChange:i=>{E(x(i,b))},state:{sorting:T,columnVisibility:$,pagination:A,rowSelection:m,columnOrder:b},meta:{refetch:P.refetch}});return oe(()=>{E([...q.getAllLeafColumns().map(i=>i.id)])},[]),{tableState:u,updateTableState:_,query:P,setSearchQuery:p,searchQuery:f,tanTable:q,mergedFilters:O,filters:R,setFilters:te,filterConfig:a,tableActions:d}}const Z=ae(null);function y(){const t=le(Z);if(!t)throw Error("DataTable should be used within DataTableProvider.");return t}function ln({children:t,...n}){return e(Z.Provider,{value:n,children:t})}function sn({className:t,...n}){const{query:r,tanTable:a}=y();return e(C,{children:l("section",{...n,className:w("flex flex-col bg-elevation-1",t),children:[e(dt,{}),l("div",{className:"w-full overflow-auto border-x h-table relative",tabIndex:0,children:[r.isLoading&&e(Q,{className:"cursor-wait",children:e(Xe,{})}),!r.isLoading&&a.getRowModel().rows.length===0&&e(Q,{className:"cursor-not-allowed",children:!r.isFetching&&(r.isError?l("span",{className:"flex gap-3 justify-center items-center",children:[e(De,{}),e("span",{children:r.error.message})]}):r.data?.data?.length===0?e(C,{children:"No results found."}):e(C,{children:"Unknown error. Please contact customer support."}))}),!r.isLoading&&a.getRowModel().rows.length!==0&&e(mt,{className:"w-full"})]}),l("div",{className:"flex w-full justify-between border gap-icon p-icon overflow-x-auto",children:[l("div",{className:"flex gap-icon",children:[e(st,{}),e(ut,{})]}),e(ct,{})]})]})})}function Q({children:t,className:n}){return l(C,{children:[e("span",{className:w(n,"absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center"),children:t}),e("span",{className:"relative h-full w-0 block"})]})}function st(){const{tanTable:t}=y(),[n,r]=F(null),a=M(),o=ce(k(ue),k(de,{coordinateGetter:fe}));return e(me,{sensors:o,collisionDetection:ge,onDragStart:s=>{const{active:d}=s;r(d.id.toString())},onDragEnd:s=>{const{active:d,over:h}=s;if(h&&d.id!==h.id){const u=t.getState().columnOrder,v=u.indexOf(d.id.toString()),m=u.indexOf(h.id.toString());t.setColumnOrder([...Se(u,v,m)])}r(null)},children:l(he,{items:t.getState().columnOrder,strategy:be,children:[l(L,{label:l(C,{children:[e(_e,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:t.getAllFlatColumns(),selectedKeys:t.getVisibleFlatColumns().map(s=>s.id),children:[e(D,{onAction:()=>t.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),t.getState().columnOrder.map(s=>{const d=t.getAllFlatColumns().find(h=>h.id===s);return d?e(g,{column:d},d.id):null})]}),e(pe,{children:n?e("div",{className:"opacity-70 border-2 border-primary",children:a(n)}):null})]})});function g({column:s}){const{attributes:d,listeners:h,setNodeRef:u,transform:v,transition:m}=ve({id:s.id}),c={transform:Ce.Transform.toString(v),transition:m,zIndex:"999"};return l(D,{ref:u,style:c,...d,id:s.id,onAction:()=>s.toggleVisibility(),isDisabled:!s.getCanHide(),className:"flex items-center",children:[e(ze,{...h,className:"size-icon cursor-grab"}),a(s.id),s.getIsSorted()&&e(J,{className:"size-icon",direction:s.getIsSorted()})]})}}function ct(){const{tanTable:t,query:n}=y(),r=n.data?.total??0;return l("div",{className:"flex items-center gap-2",children:[e("span",{className:"whitespace-nowrap body-sm text-muted",children:`${t.getState().pagination.pageIndex*t.getState().pagination.pageSize+1} - ${Math.min((t.getState().pagination.pageIndex+1)*t.getState().pagination.pageSize,r)} of ${r?.toLocaleString()}`}),e(S,{"aria-label":"First page",onPress:()=>t.firstPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(Le,{})}),e(S,{"aria-label":"Previous page",onPress:()=>t.previousPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(Me,{})}),e(S,{"aria-label":"Next page",onPress:()=>t.nextPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e(Ee,{})}),e(S,{"aria-label":"Last page",onClick:()=>t.lastPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e($e,{})})]})}function ut(){const{tanTable:t}=y(),n=[10,20,30,40,50];return e(L,{label:t.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[t.getState().pagination.pageSize.toString()],items:n.map(r=>({id:r.toString(),value:r})),children:r=>e(D,{onAction:()=>t.setPageSize(r.value),children:r.value})})}function dt(){const{query:t,tanTable:n,searchQuery:r,setSearchQuery:a,tableActions:o}=y();return l("section",{className:"flex bg-elevation-1 justify-between my-0 p-icon border gap-icon overflow-auto",children:[l("div",{className:"flex gap-icon",children:[e(S,{"aria-label":"Refresh",isPending:t.isFetching,onClick:()=>t.refetch(),variant:"neutral",size:"icon",children:e(Oe,{})}),o.filter(g=>g.bulk===n.getSelectedRowModel().rows.length>0).map((g,s)=>{const d=g.icon;return e(S,{"aria-label":g.label,type:"button",isDisabled:t.isFetching,className:"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform",onPress:h=>{g.onClick(h,n.getSelectedRowModel().rows.map(u=>u.original))},size:"icon",children:e(d,{})},`${s}-${g.bulk}`)})]}),l("div",{className:"flex gap-icon",children:[e(ft,{}),e(Ze,{value:r,onChange:a})]})]})}function J({direction:t,...n}){return t==="asc"?e(qe,{className:"size-3.5",...n}):t==="desc"?e(ke,{className:"size-3.5",...n}):e(Ve,{className:"size-3.5",...n})}function G({header:t}){const n=M();return t.column.columnDef.header?X(t.column.columnDef.header,t.getContext()):n(t.id)}function mt({className:t}){const{tanTable:n}=y(),r=(a,o)=>w("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",a&&"bg-elevation-1 sticky right-0 z-50 text-center",o);return l(Je,{className:w("table-auto",t),children:[e(Ye,{className:"sticky top-0 z-10",children:n.getHeaderGroups().map(a=>e(j,{children:a.headers.map(o=>l(et,{scope:"col",colSpan:o.colSpan,className:r(!1,"bg-elevation-1"),children:[!o.column.getCanSort()&&!o.isPlaceholder&&e("div",{className:"w-full justify-start p-1 inline-flex items-center gap-1 body-sm",children:e(G,{header:o})}),o.column.getCanSort()&&l(S,{variant:"ghost",className:"w-full justify-start p-1",onPress:o.column.getToggleSortingHandler(),children:[e("span",{children:e(G,{header:o})}),e(J,{direction:o.column.getIsSorted()})]})]},o.id))},a.id))}),e(tt,{children:n.getRowModel().rows.map(a=>e(j,{className:w("transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":a.getIsSelected(),children:a.getVisibleCells().map(o=>e(nt,{className:r(o.column.id===z),children:X(o.column.columnDef.cell,o.getContext())},o.id))},a.id))})]})}const cn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],gt={eq:"equal to",ne:"not equal to",cn:"contains",nc:"does not contain",sw:"starts with",ew:"ends with",in:"includes",nin:"does not include",gt:"greater than",gte:"greater than or equal to",lt:"less than",lte:"less than or equal to"};function pt(t,n){const r=`${n}-${Date.now()}`,a=Y[t][0];switch(t){case"bool":return{id:r,type:t,property:n,operator:a,value:!0};case"string":return{id:r,type:t,property:n,operator:a,value:""};case"date":return{id:r,type:t,property:n,operator:a,value:new Date().toISOString()};case"id":return{id:r,type:t,property:n,operator:a,value:""};case"id-search":return{id:r,type:t,property:n,operator:a,value:[]};case"enum":return{id:r,type:t,property:n,operator:a,value:new Set};case"number":return{id:r,type:t,property:n,operator:a,value:0}}}const Y={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"],number:["eq","ne","gt","gte","lt","lte"]};function ft({className:t,...n}){const{filters:r,query:a,setFilters:o,filterConfig:g}=y(),s=se(null),d=M(),u=Pe({defaultValues:{filters:r},onSubmit:({value:m})=>{o(m.filters)}}),v=Object.keys(g).sort();return e("section",{...n,className:w("flex gap-icon items-center",t),children:l(Te,{onOpenChange:m=>{m?s.current?.focus():u.handleSubmit()},children:[l("div",{className:"relative",children:[r.length>0&&e("div",{className:"size-2 rounded-full absolute bg-primary/90 z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5"}),e(S,{"aria-label":"Filter",isDisabled:a.isPending||v.length===0,type:"button",size:"icon",variant:"neutral",children:e(He,{})})]}),e(Ae,{className:"w-full p-icon",children:e("form",{onSubmit:m=>{m.preventDefault()},className:"flex flex-col gap-icon max-h-table overflow-auto ",children:e(u.Field,{mode:"array",name:"filters",children:m=>l(C,{children:[m.state.value.map((c,f)=>l("div",{className:"flex gap-icon items-center justify-normal",children:[e("span",{className:"body-sm",children:d(c.property)}),e(u.AppField,{name:`filters[${f}].operator`,children:p=>e(p.TfSingleSelect,{items:Y[c.type].map(b=>({id:b,label:e(C,{children:gt[b]})}))})},c.id),c.type==="bool"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>e(p.TfCheckbox,{autoFocus:!0})}),c.type==="date"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>e(Ne,{autoFocus:!0})}),c.type==="id"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>e(p.TfTextField,{autoFocus:!0})}),c.type==="string"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>e(p.TfTextField,{autoFocus:!0})}),c.type==="number"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>e(p.TfNumberField,{autoFocus:!0})}),c.type==="enum"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>{const b=g[c.property];return b.type!=="enum"?null:e(p.TfMultiSelect,{items:b.options})}}),c.type==="id-search"&&e(u.AppField,{name:`filters[${f}].value`,children:p=>{const b=g[c.property];return b.type!=="id-search"?null:e(Ge,{resource:b.resource,accessor:b.accessor,searchFn:b.searchFn})}}),e(S,{type:"button",variant:"neutral",size:"icon",onPress:()=>m.removeValue(f),children:e(H,{})})]},c.id)),l("div",{className:"flex w-full items-center justify-end gap-2 not-first:mt-icon",children:[e(L,{label:"Add filter",autoFocus:!0,children:v.sort().map(c=>{const f=g[c].type,p=ht[f];return l(D,{onAction:()=>{const b=pt(f,c);m.pushValue(b)},children:[d(c),e(p,{})]},c)})}),m.state.value.length>0?l(S,{type:"button",variant:"neutral",onPress:()=>{m.setValue([])},children:[e(H,{}),"Reset"]}):null]})]})})})})]})})}const ht={"id-search":Qe,bool:U,date:Ke,enum:Be,id:je,number:Ue,string:U};export{gt as C,ft as D,sn as DataTable,Z as DataTableContext,ln as DataTableProvider,cn as F,an as getTableCallback,y as useDataTable,on as useDataTableState};
 //# sourceMappingURL=data-table.js.map

package/dist/components/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sources":["../../lib/components/data-table.tsx","../../lib/components/data-table-filter.tsx"],"sourcesContent":["'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport {\n    closestCenter,\n    DndContext,\n    DragOverlay,\n    KeyboardSensor,\n    PointerSensor,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport {\n    arrayMove,\n    SortableContext,\n    sortableKeyboardCoordinates,\n    useSortable,\n    verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n    type Column,\n    type ColumnDef,\n    type ColumnHelper,\n    type ColumnOrderState,\n    createColumnHelper,\n    flexRender,\n    getCoreRowModel,\n    type PaginationState,\n    type RowSelectionState,\n    type SortingState,\n    type Updater,\n    useReactTable,\n    type VisibilityState,\n} from '@tanstack/react-table';\nimport { useLocalStorage } from '@uidotdev/usehooks';\nimport { merge } from 'lodash-es';\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport type { PressEvent } from 'react-aria-components';\nimport { Button } from '../components/button';\nimport { DataTableFilter, type FiltersConfig, type TableFilter } from '../components/data-table-filter';\nimport { DialogMenu } from '../components/dialog-menu';\nimport { Loader } from '../components/loader';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport { SearchField } from '../components/searchfield';\nimport { TableBody, TableCell, Table as TableComponent, TableHead, TableHeader, TableRow } from '../components/table';\nimport { formatDate } from '../utilities/date';\nimport type { CtxResourceName } from '../utilities/resources';\nimport { useResourceFormatter } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { Checkbox } from './checkbox';\nimport {\n    type CtxIcon,\n    IcColumns,\n    IcFirst,\n    IcGrip,\n    IcInfo,\n    IcLast,\n    IcLeft,\n    IcMoreVertical,\n    IcRefresh,\n    IcRight,\n    IcSortAsc,\n    IcSortDesc,\n    IcSortNone,\n} from './icons';\n\n/** Reserved name for actions column */\n// export const ACTIONS_COLUMN_ID = 'tableActions';\n\nexport type TableAction<in TActionData> = {\n    label: string;\n    onClick: (e: PressEvent, t: TActionData[]) => void;\n    bulk: boolean;\n    icon: CtxIcon;\n    tooltip?: string;\n};\n\nexport type TableFetchFn<in out TData extends object> = (\n    p: PaginationState,\n    s: SortingState,\n    q: string,\n    f: Record<string, any>\n) => Promise<{\n    total: number;\n    data: TData[] | undefined;\n}>;\nexport function getTableCallback<T extends object>(\n    getter: (\n        q: Record<string, any>\n    ) => Promise<{ data?: T[]; error?: { code?: string | null; message: string }; response: Response }>\n): { callback: TableFetchFn<T>; columnHelper: ColumnHelper<T> } {\n    const callback: TableFetchFn<T> = async (pagination, sorting, searching, filters) => {\n        const query = {\n            ...filters,\n            page: pagination.pageIndex + 1,\n            limit: pagination.pageSize,\n            sort: generateSortParam(sorting[0]),\n            search: searching,\n        };\n\n        const _f = await getter(query);\n\n        return {\n            total: Number.parseInt(_f.response.headers.get('Pagination-Count') || '0'),\n            data: _f.data,\n        };\n    };\n\n    const columnHelper = createColumnHelper<T>();\n\n    return { callback, columnHelper };\n}\n\nfunction generateSortParam(sort: { id: string; desc: boolean } | undefined): string {\n    if (sort) {\n        if (sort.desc) {\n            return `-${sort.id}`;\n        } else {\n            return `+${sort.id}`;\n        }\n    } else {\n        return '-createdAt';\n    }\n}\n\nconst cH = createColumnHelper<any>();\nconst TABLE_CHECK_BOX_COLUMN = [\n    cH.accessor('checkbox', {\n        header: ({ table }) => (\n            <Checkbox\n                isIndeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n                isSelected={table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()}\n                onChange={() => table.toggleAllPageRowsSelected()}\n                aria-label=\"Select all\"\n            />\n        ),\n\n        cell: ({ row }) => (\n            <Checkbox isSelected={row.getIsSelected()} onChange={() => row.toggleSelected()} aria-label=\"Select row\" />\n        ),\n        enableSorting: false,\n        enableHiding: false,\n    }),\n];\n\nconst TABLE_ID_COLUMN = [\n    cH.accessor('id', {\n        header: () => 'ID',\n    }),\n];\nconst TABLE_DEFAULT_DATE_COLUMNS = [\n    cH.accessor('createdAt', {\n        header: () => 'Creation Date',\n        cell: ({ row }) => {\n            const date = row.getValue('createdAt') satisfies string | null | undefined;\n            return formatDate(date);\n        },\n        enableHiding: false,\n    }),\n    cH.accessor('updatedAt', {\n        header: () => 'Last Updated',\n        cell: ({ row }) => {\n            const date = row.getValue('updatedAt') satisfies string | null | undefined;\n            return formatDate(date);\n        },\n        enableHiding: false,\n    }),\n];\n\nconst ACTIONS_COLUMN_ID = 'TableActions';\nconst getActionColumn = (rowActions: RowAction<any>[]) => {\n    if (rowActions.length === 0) return [];\n\n    return [\n        cH.accessor(ACTIONS_COLUMN_ID, {\n            header: '',\n            id: ACTIONS_COLUMN_ID,\n            enableHiding: false,\n            cell: ({ row }) => (\n                <DialogMenu\n                    label={<IcMoreVertical />}\n                    items={rowActions.map(ra => {\n                        const disabled = ra.isDisabled ? ra.isDisabled(row.original) : false;\n                        const base = { label: ra.label, isDisabled: disabled, icon: ra.icon } as const;\n\n                        if (ra.kind === 'action') {\n                            return { ...base, onPress: () => ra.onAction(row.original) };\n                        }\n\n                        return {\n                            ...base,\n                            component: (close: () => void) => ra.component(close, row.original),\n                            isDismissable: ra.isDismissable,\n                        };\n                    })}\n                />\n            ),\n        }),\n    ];\n};\n\ntype RowActionBase<T> = {\n    label: string;\n    isDisabled?: (t: T) => boolean;\n    icon: CtxIcon;\n};\nexport type RowAction<T> = RowActionBase<T> &\n    (\n        | { kind: 'action'; onAction: (t: T) => void }\n        | { kind: 'dialog'; component: (close: () => void, t: T) => React.ReactNode; isDismissable?: boolean }\n    );\n\ntype DataTableFactory<T extends object, TOperation extends keyof operations> = {\n    resourceName: CtxResourceName;\n    callback: TableFetchFn<T>;\n    columns: ColumnDef<T, any>[];\n    tableActions: TableAction<T>[];\n    columnsToHideByDefault?: Partial<Record<keyof T, boolean>>; // Columns that are hidden by default\n    allowSelection?: boolean;\n    filterConfig: FiltersConfig<TOperation>;\n    initialFilters: TableFilter[];\n    rowActions?: RowAction<T>[];\n};\n\ntype DataTableState = {\n    sorting: SortingState;\n    pagination: PaginationState;\n};\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<T extends object, TOperation extends keyof operations>({\n    resourceName,\n    columns,\n    callback,\n    filterConfig,\n    columnsToHideByDefault = {},\n    allowSelection = false,\n    initialFilters = [],\n    tableActions,\n    rowActions,\n}: DataTableFactory<T, TOperation>) {\n    const [tableState, _setTableState] = useState<DataTableState>({\n        /** Reflect in URL in host application  */\n        pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n        sorting: [], // Sorting state\n    });\n    //\n    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n    /** Reflect in URL in host application  */\n    const [searchQuery, setSearchQuery] = useState('');\n\n    const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n        `${resourceName}_ctx_column_order_preference`,\n        []\n    );\n    const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(\n        `${resourceName}_ctx_column_visibility_preference`,\n        {\n            id: false,\n            ...columnsToHideByDefault,\n        }\n    );\n\n    const [filters, setFilters] = useState(initialFilters);\n\n    const mergedFilters = useMemo(() => {\n        // TODO, generic transform fn\n        return filters\n            .map(tf => {\n                if (Array.isArray(tf.value)) {\n                    return {\n                        [tf.property]: {\n                            [tf.operator]: tf.value.join(','),\n                        },\n                    };\n                }\n                return {\n                    [tf.property]: {\n                        [tf.operator]: tf.value,\n                    },\n                };\n            })\n            .reduce((acc, current) => {\n                return merge(acc, current);\n            }, {});\n    }, [filters]);\n\n    // Update table state with new values\n    const updateTableState = (updates: Partial<DataTableState>) => {\n        _setTableState(prev => ({ ...prev, ...updates }));\n    };\n\n    const { sorting, pagination } = tableState;\n\n    const query = useQuery({\n        queryKey: [resourceName, pagination, sorting, searchQuery, mergedFilters],\n        queryFn: () => callback(pagination, sorting, searchQuery, mergedFilters),\n        placeholderData: keepPreviousData, // Keep previous data while loading new data\n        retry: 0,\n        refetchOnWindowFocus: false,\n    });\n\n    /**\n     * ID,createdAt and updatedAt will be added by default for all tables\n     * If selection is allowed, checkbox will be added\n     * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n     * If there are actions for the table, they will be placed fixed at the right side of table.\n     */\n    const cols: ColumnDef<any, any>[] = [\n        ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n        ...TABLE_ID_COLUMN,\n        ...columns,\n        ...TABLE_DEFAULT_DATE_COLUMNS,\n        ...getActionColumn(rowActions ?? []),\n    ];\n\n    // Type-guard for updater\n    function isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n        return typeof updater === 'function';\n    }\n    // Utility function to resolve updater\n    function resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n        if (isUpdaterFunction(updater)) {\n            return updater(currentValue);\n        }\n        return updater;\n    }\n\n    // Use react-table's hook to create the table instance\n    const tanTable = useReactTable({\n        data: query.data?.data ?? [],\n        columns: cols,\n        getCoreRowModel: getCoreRowModel(),\n        rowCount: query.data?.total,\n        manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n        onPaginationChange: updater => {\n            updateTableState({ pagination: resolveUpdater(updater, pagination) });\n        },\n        manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n        onSortingChange: updater => {\n            setRowSelection({});\n            updateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n        },\n        manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n        onColumnVisibilityChange: updater => {\n            setColumnVisibility(resolveUpdater(updater, columnVisibility));\n        },\n        onRowSelectionChange: updater => {\n            setRowSelection(resolveUpdater(updater, rowSelection));\n        },\n        onColumnOrderChange: updater => {\n            setColumnOrder(resolveUpdater(updater, columnOrder));\n        },\n        state: {\n            sorting: sorting,\n            columnVisibility: columnVisibility,\n            pagination: pagination,\n            rowSelection: rowSelection,\n            columnOrder: columnOrder,\n        },\n        meta: {\n            refetch: query.refetch,\n        },\n    });\n\n    // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n    // This populates the columnIds in the columnOrder state\n    useEffect(() => {\n        setColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);\n    }, []);\n\n    return {\n        tableState,\n        updateTableState,\n        query,\n        setSearchQuery,\n        searchQuery,\n        tanTable,\n        mergedFilters,\n        filters,\n        setFilters,\n        filterConfig,\n        tableActions,\n    } as const;\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n// TODO, don't export this\nexport function useDataTable() {\n    const ctx = useContext(DataTableContext);\n    if (!ctx) {\n        throw Error('DataTable should be used within DataTableProvider.');\n    }\n    return ctx;\n}\n\nexport function DataTableProvider<T extends object, TOperation extends keyof operations>({\n    children,\n    ...props\n}: { children: React.ReactNode } & ReturnType<typeof useDataTableState<T, TOperation>>) {\n    // @ts-expect-error, propogating the generic type further will be more complex. Since this is a tightly coupled type, it should be okay but reviewed whenever useDataTableState changes.\n    return <DataTableContext.Provider value={props}>{children}</DataTableContext.Provider>;\n}\n\nexport type DataTableProps = React.ComponentProps<'section'>;\nexport function DataTable({ className, ...props }: DataTableProps) {\n    const { query, tanTable } = useDataTable();\n\n    return (\n        <>\n            {/* Table Actions Section */}\n            <section {...props} className={classNames('flex flex-col bg-elevation-1', className)}>\n                <Actions />\n                {/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n                <div className=\"w-full overflow-auto border-x h-table relative\" tabIndex={0}>\n                    {/* Table overlay with loader */}\n                    {query.isLoading && (\n                        <TableOverlay className=\"cursor-wait\">\n                            <Loader />\n                        </TableOverlay>\n                    )}\n                    {/* Table overlay for empty table */}\n                    {!query.isLoading && tanTable.getRowModel().rows.length === 0 && (\n                        // Empty table\n                        <TableOverlay className=\"cursor-not-allowed\">\n                            {!query.isFetching &&\n                                (query.isError ? (\n                                    <span className=\"flex gap-3 justify-center items-center\">\n                                        {/* TODO (mudasir-pandith) Check for 403 explicitly!! */}\n                                        {/* <span>{query.error}</span> */}\n                                        <IcInfo />\n                                        <span>{query.error.message}</span>\n                                    </span>\n                                ) : query.data?.data?.length === 0 ? (\n                                    <>No results found.</>\n                                ) : (\n                                    <>Unknown error. Please contact customer support.</>\n                                ))}\n                        </TableOverlay>\n                    )}\n                    {!query.isLoading && tanTable.getRowModel().rows.length !== 0 && (\n                        <TableContent className=\"w-full\" />\n                    )}\n                </div>\n\n                {/* Table Footer Section with Pagination and Column Picker */}\n                <div className=\"flex w-full justify-between border gap-icon p-icon overflow-x-auto\">\n                    <div className=\"flex gap-icon\">\n                        <ColumnPicker />\n                        <PageSize />\n                    </div>\n                    <Paginator />\n                </div>\n            </section>\n        </>\n    );\n}\n/** Table overlay to be shown for loaders or other messages */\nfunction TableOverlay({ children, className }: { children: React.ReactNode; className?: string }) {\n    return (\n        <>\n            <span\n                className={classNames(\n                    className,\n                    'absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center'\n                )}\n            >\n                {children}\n            </span>\n            {/* Keep something in document flow with the correct height */}\n            <span className=\"relative h-full w-0 block\" />\n        </>\n    );\n}\n\n// TODO, ?include query param on Licenses, Activations and other future resources that need this\nfunction ColumnPicker() {\n    const { tanTable } = useDataTable();\n    const [activeId, setActiveId] = useState<string | null>(null);\n\n    const resourceFormatter = useResourceFormatter();\n\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n    return (\n        <DndContext\n            sensors={sensors}\n            collisionDetection={closestCenter}\n            onDragStart={event => {\n                const { active } = event;\n                setActiveId(active.id.toString());\n            }}\n            onDragEnd={event => {\n                const { active, over } = event;\n\n                if (over && active.id !== over.id) {\n                    const columnOrder = tanTable.getState().columnOrder;\n                    const oldIndex = columnOrder.indexOf(active.id.toString());\n                    const newIndex = columnOrder.indexOf(over.id.toString());\n                    tanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);\n                }\n\n                setActiveId(null);\n            }}\n        >\n            <SortableContext items={tanTable.getState().columnOrder} strategy={verticalListSortingStrategy}>\n                <EasyMenu\n                    label={\n                        <>\n                            <IcColumns className=\"inline align-bottom me-1\" />\n                            Columns\n                        </>\n                    }\n                    selectionMode=\"multiple\"\n                    items={tanTable.getAllFlatColumns()}\n                    // Using selectedKeys = 'all' does not mark MenuItems with isDisabled=true as selected. This is not the intended behaviour in this use-case.\n                    selectedKeys={tanTable.getVisibleFlatColumns().map(c => c.id)}\n                >\n                    <MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>\n                        (select all)\n                    </MenuItem>\n                    {tanTable.getState().columnOrder.map(colId => {\n                        const col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n                        if (!col) return null;\n                        return <SortableItem key={col.id} column={col} />;\n                    })}\n                </EasyMenu>\n                <DragOverlay>\n                    {activeId ? (\n                        <div className=\"opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div>\n                    ) : null}\n                </DragOverlay>\n            </SortableContext>\n        </DndContext>\n    );\n\n    function SortableItem({ column }: { column: Column<any, unknown> }) {\n        const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });\n        const style = {\n            transform: CSS.Transform.toString(transform),\n            transition,\n            zIndex: '999',\n        };\n        return (\n            <MenuItem\n                ref={setNodeRef}\n                style={style}\n                {...attributes}\n                id={column.id}\n                onAction={() => column.toggleVisibility()}\n                isDisabled={!column.getCanHide()}\n                className=\"flex items-center\"\n            >\n                <IcGrip {...listeners} className=\"size-icon cursor-grab\" />\n                {resourceFormatter(column.id)}\n                {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n            </MenuItem>\n        );\n    }\n}\n\nfunction Paginator() {\n    const { tanTable, query } = useDataTable();\n    const rowCount = query.data?.total ?? 0;\n    return (\n        <div className=\"flex items-center gap-2\">\n            <span className=\"whitespace-nowrap body-sm text-muted\">\n                {`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n                    (tanTable.getState().pagination.pageIndex + 1) * tanTable.getState().pagination.pageSize,\n                    rowCount\n                )} of ${rowCount?.toLocaleString()}`}\n            </span>\n\n            <Button\n                aria-label=\"First page\"\n                onPress={() => tanTable.firstPage()}\n                isDisabled={!tanTable.getCanPreviousPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <IcFirst />\n            </Button>\n            <Button\n                aria-label=\"Previous page\"\n                onPress={() => tanTable.previousPage()}\n                isDisabled={!tanTable.getCanPreviousPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <IcLeft />\n            </Button>\n            <Button\n                aria-label=\"Next page\"\n                onPress={() => tanTable.nextPage()}\n                isDisabled={!tanTable.getCanNextPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <IcRight />\n            </Button>\n            <Button\n                aria-label=\"Last page\"\n                onClick={() => tanTable.lastPage()}\n                isDisabled={!tanTable.getCanNextPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <IcLast />\n            </Button>\n        </div>\n    );\n}\n\nfunction PageSize() {\n    const { tanTable } = useDataTable();\n    const PAGE_SIZES = [10, 20, 30, 40, 50];\n\n    return (\n        <EasyMenu\n            label={tanTable.getState().pagination.pageSize.toString()}\n            selectionMode=\"single\"\n            selectedKeys={[tanTable.getState().pagination.pageSize.toString()]}\n            items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}\n        >\n            {items => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>}\n        </EasyMenu>\n    );\n}\n\nfunction Actions() {\n    const { query, tanTable, searchQuery, setSearchQuery, tableActions } = useDataTable();\n\n    return (\n        <section className=\"flex bg-elevation-1 justify-between my-0 p-icon border gap-icon overflow-auto\">\n            <div className=\"flex gap-icon\">\n                <Button\n                    aria-label=\"Refresh\"\n                    isPending={query.isFetching}\n                    onClick={() => query.refetch()}\n                    variant={'neutral'}\n                    size={'icon'}\n                >\n                    <IcRefresh />\n                </Button>\n\n                {tableActions\n                    .filter(ta => ta.bulk === tanTable.getSelectedRowModel().rows.length > 0)\n                    .map((ta, i) => {\n                        const Icon = ta.icon;\n                        return (\n                            <Button\n                                aria-label={ta.label}\n                                key={`${i}-${ta.bulk}`}\n                                type=\"button\"\n                                isDisabled={query.isFetching}\n                                className=\"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform\"\n                                onPress={e => {\n                                    ta.onClick(\n                                        e,\n                                        tanTable.getSelectedRowModel().rows.map(r => r.original)\n                                    );\n                                }}\n                                size={'icon'}\n                            >\n                                <Icon />\n                            </Button>\n                        );\n                    })}\n            </div>\n            <div className=\"flex gap-icon\">\n                <DataTableFilter />\n                {<SearchField value={searchQuery} onChange={setSearchQuery} />}\n            </div>\n        </section>\n    );\n}\n\nfunction SortIcon({\n    direction,\n    ...props\n}: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n    if (direction === 'asc') return <IcSortAsc className=\"size-3.5\" {...props} />;\n    else if (direction === 'desc') return <IcSortDesc className=\"size-3.5\" {...props} />;\n    else return <IcSortNone className=\"size-3.5\" {...props} />;\n}\n\nfunction HeaderText({ header }: { header: any }) {\n    const resourceFormatter = useResourceFormatter();\n    return header.column.columnDef.header\n        ? flexRender(header.column.columnDef.header, header.getContext())\n        : resourceFormatter(header.id);\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n    const { tanTable } = useDataTable();\n    const tableCellStyle = (isSticky: boolean, className?: string) =>\n        classNames(\n            'px-icon py-2 text-left body-sm font-medium whitespace-nowrap',\n            isSticky && 'bg-elevation-1 sticky right-0 z-50 text-center',\n            className\n        );\n    return (\n        <TableComponent className={classNames('table-auto', className)}>\n            <TableHeader className=\"sticky top-0 z-10\">\n                {tanTable.getHeaderGroups().map(headerGroup => (\n                    <TableRow key={headerGroup.id}>\n                        {headerGroup.headers.map(header => (\n                            <TableHead\n                                scope=\"col\"\n                                key={header.id}\n                                colSpan={header.colSpan}\n                                className={tableCellStyle(false, 'bg-elevation-1')}\n                            >\n                                {!header.column.getCanSort() && !header.isPlaceholder && (\n                                    <div className=\"w-full justify-start p-1 inline-flex items-center gap-1 body-sm\">\n                                        <HeaderText header={header} />\n                                    </div>\n                                )}\n                                {header.column.getCanSort() && (\n                                    <Button\n                                        variant=\"ghost\"\n                                        className=\"w-full justify-start p-1\"\n                                        onPress={header.column.getToggleSortingHandler()}\n                                    >\n                                        <span>\n                                            <HeaderText header={header} />\n                                        </span>\n                                        <SortIcon direction={header.column.getIsSorted()} />\n                                    </Button>\n                                )}\n                            </TableHead>\n                        ))}\n                    </TableRow>\n                ))}\n            </TableHeader>\n            <TableBody>\n                {tanTable.getRowModel().rows.map(row => (\n                    <TableRow\n                        className={classNames(\n                            'transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20'\n                        )}\n                        key={row.id}\n                        data-selected={row.getIsSelected()}\n                    >\n                        {row.getVisibleCells().map(cell => (\n                            <TableCell key={cell.id} className={tableCellStyle(cell.column.id === ACTIONS_COLUMN_ID)}>\n                                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                            </TableCell>\n                        ))}\n                    </TableRow>\n                ))}\n            </TableBody>\n        </TableComponent>\n    );\n}\n","'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport { useRef } from 'react';\nimport { Button } from '../components/button';\nimport { useDataTable } from '../components/data-table';\nimport { TfDatePicker } from '../components/date-picker';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { MultiSelectProps } from '../components/multi-select';\nimport { Popover, PopoverTrigger } from '../components/popover';\nimport { useAppForm } from '../utilities/form-hook';\nimport { useResourceFormatter, type ApiFilters } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { IcAccount, IcCheck, IcDate, IcFile, IcFilter, IcLicense, IcMinus, IcRemove, type CtxIcon } from './icons';\nimport { TfMultipleIdSearchInput } from './id-search';\n\nexport const FILTER_COMPARISON_OPERATORS = [\n    'eq',\n    'ne',\n    'cn',\n    'nc',\n    'sw',\n    'ew',\n    'in',\n    'nin',\n    'gt',\n    'gte',\n    'lt',\n    'lte',\n] as const;\nexport type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<FilterComparisonOperator, string> = {\n    eq: 'equal to',\n    ne: 'not equal to',\n    cn: 'contains',\n    nc: 'does not contain',\n    sw: 'starts with',\n    ew: 'ends with',\n    in: 'includes',\n    nin: 'does not include',\n    gt: 'greater than',\n    gte: 'greater than or equal to',\n    lt: 'less than',\n    lte: 'less than or equal to',\n};\n\ntype BaseLocalFilter<T extends FilterType, V> = {\n    id: string;\n    type: T;\n    property: string;\n    operator: FilterComparisonOperator;\n    value: V | undefined;\n    displayValue?: string;\n};\ntype EnumLocalFilter = BaseLocalFilter<'enum', Set<string | number>>;\ntype IdLocalFilter = BaseLocalFilter<'id', string>;\ntype BoolLocalFilter = BaseLocalFilter<'bool', boolean>;\ntype StringLocalFilter = BaseLocalFilter<'string', string>;\ntype NumberLocalFilter = BaseLocalFilter<'number', number>;\n// DatePicker accepts a string,and converts it to a ZonedDateTime\ntype DateLocalFilter = BaseLocalFilter<'date', string>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', string[]>;\n// TODO, entitlementSets.productIds\nfunction createNewFilter(type: FilterType, property: string): TableFilter {\n    const id = `${property}-${Date.now()}`;\n    const operator = FilterOperations[type][0];\n\n    switch (type) {\n        case 'bool':\n            return { id, type, property, operator, value: true };\n        case 'string':\n            return { id, type, property, operator, value: '' };\n        case 'date':\n            return { id, type, property, operator, value: new Date().toISOString() };\n        case 'id':\n            return { id, type, property, operator, value: '' };\n        case 'id-search':\n            return { id, type, property, operator, value: [] };\n        case 'enum':\n            return { id, type, property, operator, value: new Set<string | number>() };\n        case 'number':\n            return { id, type, property, operator, value: 0 };\n    }\n}\n\nexport type TableFilter =\n    | EnumLocalFilter\n    | IdLocalFilter\n    | BoolLocalFilter\n    | StringLocalFilter\n    | DateLocalFilter\n    | IdSearchLocalFilter\n    | NumberLocalFilter;\n\nexport type FilterConfig =\n    | { type: 'enum'; options: MultiSelectProps['items'] }\n    | ({ type: 'id-search' } & Pick<\n          React.ComponentProps<typeof TfMultipleIdSearchInput>,\n          'accessor' | 'searchFn' | 'resource'\n      >)\n    | { type: 'id' }\n    | { type: 'bool' }\n    | { type: 'string' }\n    | { type: 'date' }\n    | { type: 'number' };\n\nexport type FilterType = FilterConfig['type'];\n\nconst FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {\n    bool: ['eq'],\n    enum: ['in', 'nin'],\n    id: ['in', 'nin'],\n    'id-search': ['in', 'nin'],\n    string: ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],\n    date: ['lt', 'gt'],\n    number: ['eq', 'ne', 'gt', 'gte', 'lt', 'lte'],\n};\n\n// TS workaround to get rid of filterConfig: Required<Record<never, FilterConfig>>\nexport type FiltersConfig<TOperation extends keyof operations> = [keyof ApiFilters<TOperation>] extends [never]\n    ? Record<string, FilterConfig>\n    : Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>;\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n    const { filters, query, setFilters, filterConfig } = useDataTable();\n\n    const addFilterButtonRef = useRef<HTMLButtonElement>(null);\n\n    const resourceFormatter = useResourceFormatter();\n\n    const DEFAULT_VALUES: { filters: TableFilter[] } = {\n        filters,\n    };\n    const form = useAppForm({\n        defaultValues: DEFAULT_VALUES,\n        onSubmit: ({ value }) => {\n            setFilters(value.filters);\n        },\n    });\n\n    // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870\n    const filterKeys = Object.keys(filterConfig).sort();\n\n    return (\n        <section {...props} className={classNames('flex gap-icon items-center', className)}>\n            <PopoverTrigger\n                onOpenChange={o => {\n                    // Set filters when the popover closes\n                    if (!o) {\n                        form.handleSubmit();\n                    } else {\n                        addFilterButtonRef.current?.focus();\n                    }\n                }}\n            >\n                <div className=\"relative\">\n                    {filters.length > 0 && (\n                        <div className=\"size-2 rounded-full absolute bg-primary/90 z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5\"></div>\n                    )}\n                    <Button\n                        aria-label=\"Filter\"\n                        isDisabled={query.isPending || filterKeys.length === 0}\n                        type=\"button\"\n                        size={'icon'}\n                        variant={'neutral'}\n                    >\n                        <IcFilter />\n                    </Button>\n                </div>\n                {/* TODO, icon maps with dynamic imports? */}\n                {/* TODO open popover with form for property specific filter */}\n                {/* TODO, icons here??? */}\n                <Popover className=\"w-full p-icon\">\n                    <form\n                        onSubmit={e => {\n                            e.preventDefault();\n                        }}\n                        className=\"flex flex-col gap-icon max-h-table overflow-auto \"\n                    >\n                        <form.Field mode=\"array\" name={'filters'}>\n                            {field => {\n                                return (\n                                    <>\n                                        {field.state.value.map((lf, i) => {\n                                            return (\n                                                <div key={lf.id} className=\"flex gap-icon items-center justify-normal\">\n                                                    <span className=\"body-sm\">{resourceFormatter(lf.property)}</span>\n                                                    <form.AppField key={lf.id} name={`filters[${i}].operator`}>\n                                                        {sf => (\n                                                            <sf.TfSingleSelect\n                                                                items={FilterOperations[lf.type].map(op => ({\n                                                                    id: op,\n                                                                    label: <>{COMPARISON_OPERATOR_LABELS[op]}</>,\n                                                                }))}\n                                                            />\n                                                        )}\n                                                    </form.AppField>\n\n                                                    {lf.type === 'bool' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfCheckbox autoFocus />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'date' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {_ => <TfDatePicker autoFocus />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'id' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfTextField autoFocus />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'string' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfTextField autoFocus />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'number' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfNumberField autoFocus />}\n                                                        </form.AppField>\n                                                    )}\n\n                                                    {lf.type === 'enum' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => {\n                                                                const config = filterConfig[lf.property];\n                                                                if (config.type !== 'enum') return null;\n                                                                return <sf.TfMultiSelect items={config.options} />;\n                                                            }}\n                                                        </form.AppField>\n                                                    )}\n\n                                                    {lf.type === 'id-search' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {_ => {\n                                                                const config = filterConfig[lf.property];\n                                                                if (config.type !== 'id-search') return null;\n                                                                return (\n                                                                    <TfMultipleIdSearchInput\n                                                                        resource={config.resource}\n                                                                        accessor={config.accessor}\n                                                                        searchFn={config.searchFn}\n                                                                    />\n                                                                );\n                                                            }}\n                                                        </form.AppField>\n                                                    )}\n\n                                                    <Button\n                                                        type=\"button\"\n                                                        variant=\"neutral\"\n                                                        size=\"icon\"\n                                                        onPress={() => field.removeValue(i)}\n                                                    >\n                                                        <IcRemove />\n                                                    </Button>\n                                                </div>\n                                            );\n                                        })}\n                                        <div className=\"flex w-full items-center justify-end gap-2 not-first:mt-icon\">\n                                            <EasyMenu label=\"Add filter\" autoFocus>\n                                                {filterKeys.sort().map(k => {\n                                                    const type = filterConfig[k].type;\n                                                    const Icon = FilterIcon[type];\n                                                    return (\n                                                        <MenuItem\n                                                            key={k}\n                                                            onAction={() => {\n                                                                const newFilter = createNewFilter(type, k);\n                                                                field.pushValue(newFilter);\n                                                            }}\n                                                        >\n                                                            {resourceFormatter(k)}\n                                                            <Icon />\n                                                        </MenuItem>\n                                                    );\n                                                })}\n                                            </EasyMenu>\n                                            {field.state.value.length > 0 ? (\n                                                <Button\n                                                    type=\"button\"\n                                                    variant=\"neutral\"\n                                                    onPress={() => {\n                                                        field.setValue([]);\n                                                    }}\n                                                >\n                                                    <IcRemove />\n                                                    Reset\n                                                </Button>\n                                            ) : null}\n                                        </div>\n                                    </>\n                                );\n                            }}\n                        </form.Field>\n                    </form>\n                </Popover>\n            </PopoverTrigger>\n        </section>\n    );\n}\n\nconst FilterIcon: Record<FilterConfig['type'], CtxIcon> = {\n    'id-search': IcFile,\n    bool: IcCheck,\n    date: IcDate,\n    enum: IcLicense,\n    id: IcAccount,\n    number: IcMinus,\n    string: IcCheck,\n};\n"],"names":["getTableCallback","getter","callback","pagination","sorting","searching","filters","query","generateSortParam","_f","columnHelper","createColumnHelper","sort","cH","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","TABLE_ID_COLUMN","TABLE_DEFAULT_DATE_COLUMNS","date","formatDate","ACTIONS_COLUMN_ID","getActionColumn","rowActions","DialogMenu","IcMoreVertical","ra","disabled","base","close","useDataTableState","resourceName","columns","filterConfig","columnsToHideByDefault","allowSelection","initialFilters","tableActions","tableState","_setTableState","useState","rowSelection","setRowSelection","searchQuery","setSearchQuery","columnOrder","setColumnOrder","useLocalStorage","columnVisibility","setColumnVisibility","setFilters","mergedFilters","useMemo","tf","acc","current","merge","updateTableState","updates","prev","useQuery","keepPreviousData","cols","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","useEffect","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","className","Fragment","classNames","Actions","jsxs","TableOverlay","Loader","IcInfo","TableContent","ColumnPicker","PageSize","Paginator","activeId","setActiveId","resourceFormatter","useResourceFormatter","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","arrayMove","SortableContext","verticalListSortingStrategy","EasyMenu","IcColumns","MenuItem","colId","col","SortableItem","DragOverlay","column","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","IcGrip","SortIcon","rowCount","Button","IcFirst","IcLeft","IcRight","IcLast","PAGE_SIZES","s","items","IcRefresh","ta","i","Icon","e","r","DataTableFilter","SearchField","direction","IcSortAsc","IcSortDesc","IcSortNone","HeaderText","header","flexRender","tableCellStyle","isSticky","TableComponent","TableHeader","headerGroup","TableRow","TableHead","TableBody","cell","TableCell","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","createNewFilter","type","property","id","operator","FilterOperations","addFilterButtonRef","useRef","form","useAppForm","value","filterKeys","PopoverTrigger","o","IcFilter","Popover","field","lf","sf","op","_","TfDatePicker","config","TfMultipleIdSearchInput","IcRemove","k","FilterIcon","newFilter","IcFile","IcCheck","IcDate","IcLicense","IcAccount","IcMinus"],"mappings":"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"}
+{"version":3,"file":"data-table.js","sources":["../../lib/components/data-table.tsx","../../lib/components/data-table-filter.tsx"],"sourcesContent":["'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport {\n    closestCenter,\n    DndContext,\n    DragOverlay,\n    KeyboardSensor,\n    PointerSensor,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport {\n    arrayMove,\n    SortableContext,\n    sortableKeyboardCoordinates,\n    useSortable,\n    verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n    type Column,\n    type ColumnDef,\n    type ColumnHelper,\n    type ColumnOrderState,\n    createColumnHelper,\n    flexRender,\n    getCoreRowModel,\n    type PaginationState,\n    type RowSelectionState,\n    type SortingState,\n    type Updater,\n    useReactTable,\n    type VisibilityState,\n} from '@tanstack/react-table';\nimport { useLocalStorage } from '@uidotdev/usehooks';\nimport { merge } from 'lodash-es';\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport type { PressEvent } from 'react-aria-components';\nimport { Button } from '../components/button';\nimport { DataTableFilter, type FiltersConfig, type TableFilter } from '../components/data-table-filter';\nimport { DialogMenu, type DialogMenuAction } from '../components/dialog-menu';\nimport { Loader } from '../components/loader';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport { SearchField } from '../components/searchfield';\nimport { TableBody, TableCell, Table as TableComponent, TableHead, TableHeader, TableRow } from '../components/table';\nimport { formatDate } from '../utilities/date';\nimport type { CtxResourceName } from '../utilities/resources';\nimport { useResourceFormatter } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { Checkbox } from './checkbox';\nimport {\n    type CtxIcon,\n    IcColumns,\n    IcFirst,\n    IcGrip,\n    IcInfo,\n    IcLast,\n    IcLeft,\n    IcMoreVertical,\n    IcRefresh,\n    IcRight,\n    IcSortAsc,\n    IcSortDesc,\n    IcSortNone,\n} from './icons';\n\n/** Reserved name for actions column */\n// export const ACTIONS_COLUMN_ID = 'tableActions';\n\nexport type TableAction<in TActionData> = {\n    label: string;\n    onClick: (e: PressEvent, t: TActionData[]) => void;\n    bulk: boolean;\n    icon: CtxIcon;\n    tooltip?: string;\n};\n\nexport type TableFetchFn<in out TData extends object> = (\n    p: PaginationState,\n    s: SortingState,\n    q: string,\n    f: Record<string, any>\n) => Promise<{\n    total: number;\n    data: TData[] | undefined;\n}>;\nexport function getTableCallback<T extends object>(\n    getter: (\n        q: Record<string, any>\n    ) => Promise<{ data?: T[]; error?: { code?: string | null; message: string }; response: Response }>\n): { callback: TableFetchFn<T>; columnHelper: ColumnHelper<T> } {\n    const callback: TableFetchFn<T> = async (pagination, sorting, searching, filters) => {\n        const query = {\n            ...filters,\n            page: pagination.pageIndex + 1,\n            limit: pagination.pageSize,\n            sort: generateSortParam(sorting[0]),\n            search: searching,\n        };\n\n        const _f = await getter(query);\n\n        return {\n            total: Number.parseInt(_f.response.headers.get('Pagination-Count') || '0'),\n            data: _f.data,\n        };\n    };\n\n    const columnHelper = createColumnHelper<T>();\n\n    return { callback, columnHelper };\n}\n\nfunction generateSortParam(sort: { id: string; desc: boolean } | undefined): string {\n    if (sort) {\n        if (sort.desc) {\n            return `-${sort.id}`;\n        } else {\n            return `+${sort.id}`;\n        }\n    } else {\n        return '-createdAt';\n    }\n}\n\nconst cH = createColumnHelper<any>();\nconst TABLE_CHECK_BOX_COLUMN = [\n    cH.accessor('checkbox', {\n        header: ({ table }) => (\n            <Checkbox\n                isIndeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n                isSelected={table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()}\n                onChange={() => table.toggleAllPageRowsSelected()}\n                aria-label=\"Select all\"\n            />\n        ),\n\n        cell: ({ row }) => (\n            <Checkbox isSelected={row.getIsSelected()} onChange={() => row.toggleSelected()} aria-label=\"Select row\" />\n        ),\n        enableSorting: false,\n        enableHiding: false,\n    }),\n];\n\nconst TABLE_ID_COLUMN = [\n    cH.accessor('id', {\n        header: () => 'ID',\n    }),\n];\nconst TABLE_DEFAULT_DATE_COLUMNS = [\n    cH.accessor('createdAt', {\n        header: () => 'Creation Date',\n        cell: ({ row }) => {\n            const date = row.getValue('createdAt') satisfies string | null | undefined;\n            return formatDate(date);\n        },\n        enableHiding: false,\n    }),\n    cH.accessor('updatedAt', {\n        header: () => 'Last Updated',\n        cell: ({ row }) => {\n            const date = row.getValue('updatedAt') satisfies string | null | undefined;\n            return formatDate(date);\n        },\n        enableHiding: false,\n    }),\n];\n\nconst ACTIONS_COLUMN_ID = 'TableActions';\nconst getActionColumn = (rowActions: DialogMenuAction<any>[]) => {\n    if (rowActions.length === 0) return [];\n\n    return [\n        cH.accessor(ACTIONS_COLUMN_ID, {\n            header: '',\n            id: ACTIONS_COLUMN_ID,\n            enableHiding: false,\n            cell: ({ row }) => <DialogMenu label={<IcMoreVertical />} data={row.original} items={rowActions} />,\n        }),\n    ];\n};\n\ntype DataTableFactory<T extends object, TOperation extends keyof operations> = {\n    resourceName: CtxResourceName;\n    callback: TableFetchFn<T>;\n    columns: ColumnDef<T, any>[];\n    tableActions: TableAction<T>[];\n    columnsToHideByDefault?: Partial<Record<keyof T, boolean>>; // Columns that are hidden by default\n    allowSelection?: boolean;\n    filterConfig: FiltersConfig<TOperation>;\n    initialFilters: TableFilter[];\n    rowActions?: DialogMenuAction<T>[];\n};\n\ntype DataTableState = {\n    sorting: SortingState;\n    pagination: PaginationState;\n};\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<T extends object, TOperation extends keyof operations>({\n    resourceName,\n    columns,\n    callback,\n    filterConfig,\n    columnsToHideByDefault = {},\n    allowSelection = false,\n    initialFilters = [],\n    tableActions,\n    rowActions,\n}: DataTableFactory<T, TOperation>) {\n    const [tableState, _setTableState] = useState<DataTableState>({\n        /** Reflect in URL in host application  */\n        pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n        sorting: [], // Sorting state\n    });\n    //\n    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n    /** Reflect in URL in host application  */\n    const [searchQuery, setSearchQuery] = useState('');\n\n    const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n        `${resourceName}_ctx_column_order_preference`,\n        []\n    );\n    const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(\n        `${resourceName}_ctx_column_visibility_preference`,\n        {\n            id: false,\n            ...columnsToHideByDefault,\n        }\n    );\n\n    const [filters, setFilters] = useState(initialFilters);\n\n    const mergedFilters = useMemo(() => {\n        // TODO, generic transform fn\n        return filters\n            .map(tf => {\n                if (Array.isArray(tf.value)) {\n                    return {\n                        [tf.property]: {\n                            [tf.operator]: tf.value.join(','),\n                        },\n                    };\n                }\n                return {\n                    [tf.property]: {\n                        [tf.operator]: tf.value,\n                    },\n                };\n            })\n            .reduce((acc, current) => {\n                return merge(acc, current);\n            }, {});\n    }, [filters]);\n\n    // Update table state with new values\n    const updateTableState = (updates: Partial<DataTableState>) => {\n        _setTableState(prev => ({ ...prev, ...updates }));\n    };\n\n    const { sorting, pagination } = tableState;\n\n    const query = useQuery({\n        queryKey: [resourceName, pagination, sorting, searchQuery, mergedFilters],\n        queryFn: () => callback(pagination, sorting, searchQuery, mergedFilters),\n        placeholderData: keepPreviousData, // Keep previous data while loading new data\n        retry: 0,\n        refetchOnWindowFocus: false,\n    });\n\n    /**\n     * ID,createdAt and updatedAt will be added by default for all tables\n     * If selection is allowed, checkbox will be added\n     * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n     * If there are actions for the table, they will be placed fixed at the right side of table.\n     */\n    const cols: ColumnDef<any, any>[] = [\n        ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n        ...TABLE_ID_COLUMN,\n        ...columns,\n        ...TABLE_DEFAULT_DATE_COLUMNS,\n        ...getActionColumn(rowActions ?? []),\n    ];\n\n    // Type-guard for updater\n    function isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n        return typeof updater === 'function';\n    }\n    // Utility function to resolve updater\n    function resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n        if (isUpdaterFunction(updater)) {\n            return updater(currentValue);\n        }\n        return updater;\n    }\n\n    // Use react-table's hook to create the table instance\n    const tanTable = useReactTable({\n        data: query.data?.data ?? [],\n        columns: cols,\n        getCoreRowModel: getCoreRowModel(),\n        rowCount: query.data?.total,\n        manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n        onPaginationChange: updater => {\n            updateTableState({ pagination: resolveUpdater(updater, pagination) });\n        },\n        manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n        onSortingChange: updater => {\n            setRowSelection({});\n            updateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n        },\n        manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n        onColumnVisibilityChange: updater => {\n            setColumnVisibility(resolveUpdater(updater, columnVisibility));\n        },\n        onRowSelectionChange: updater => {\n            setRowSelection(resolveUpdater(updater, rowSelection));\n        },\n        onColumnOrderChange: updater => {\n            setColumnOrder(resolveUpdater(updater, columnOrder));\n        },\n        state: {\n            sorting: sorting,\n            columnVisibility: columnVisibility,\n            pagination: pagination,\n            rowSelection: rowSelection,\n            columnOrder: columnOrder,\n        },\n        meta: {\n            refetch: query.refetch,\n        },\n    });\n\n    // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n    // This populates the columnIds in the columnOrder state\n    useEffect(() => {\n        setColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);\n    }, []);\n\n    return {\n        tableState,\n        updateTableState,\n        query,\n        setSearchQuery,\n        searchQuery,\n        tanTable,\n        mergedFilters,\n        filters,\n        setFilters,\n        filterConfig,\n        tableActions,\n    } as const;\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n// TODO, don't export this\nexport function useDataTable() {\n    const ctx = useContext(DataTableContext);\n    if (!ctx) {\n        throw Error('DataTable should be used within DataTableProvider.');\n    }\n    return ctx;\n}\n\nexport function DataTableProvider<T extends object, TOperation extends keyof operations>({\n    children,\n    ...props\n}: { children: React.ReactNode } & ReturnType<typeof useDataTableState<T, TOperation>>) {\n    // @ts-expect-error, propogating the generic type further will be more complex. Since this is a tightly coupled type, it should be okay but reviewed whenever useDataTableState changes.\n    return <DataTableContext.Provider value={props}>{children}</DataTableContext.Provider>;\n}\n\nexport type DataTableProps = React.ComponentProps<'section'>;\nexport function DataTable({ className, ...props }: DataTableProps) {\n    const { query, tanTable } = useDataTable();\n\n    return (\n        <>\n            {/* Table Actions Section */}\n            <section {...props} className={classNames('flex flex-col bg-elevation-1', className)}>\n                <Actions />\n                {/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n                <div className=\"w-full overflow-auto border-x h-table relative\" tabIndex={0}>\n                    {/* Table overlay with loader */}\n                    {query.isLoading && (\n                        <TableOverlay className=\"cursor-wait\">\n                            <Loader />\n                        </TableOverlay>\n                    )}\n                    {/* Table overlay for empty table */}\n                    {!query.isLoading && tanTable.getRowModel().rows.length === 0 && (\n                        // Empty table\n                        <TableOverlay className=\"cursor-not-allowed\">\n                            {!query.isFetching &&\n                                (query.isError ? (\n                                    <span className=\"flex gap-3 justify-center items-center\">\n                                        {/* TODO (mudasir-pandith) Check for 403 explicitly!! */}\n                                        {/* <span>{query.error}</span> */}\n                                        <IcInfo />\n                                        <span>{query.error.message}</span>\n                                    </span>\n                                ) : query.data?.data?.length === 0 ? (\n                                    <>No results found.</>\n                                ) : (\n                                    <>Unknown error. Please contact customer support.</>\n                                ))}\n                        </TableOverlay>\n                    )}\n                    {!query.isLoading && tanTable.getRowModel().rows.length !== 0 && (\n                        <TableContent className=\"w-full\" />\n                    )}\n                </div>\n\n                {/* Table Footer Section with Pagination and Column Picker */}\n                <div className=\"flex w-full justify-between border gap-icon p-icon overflow-x-auto\">\n                    <div className=\"flex gap-icon\">\n                        <ColumnPicker />\n                        <PageSize />\n                    </div>\n                    <Paginator />\n                </div>\n            </section>\n        </>\n    );\n}\n/** Table overlay to be shown for loaders or other messages */\nfunction TableOverlay({ children, className }: { children: React.ReactNode; className?: string }) {\n    return (\n        <>\n            <span\n                className={classNames(\n                    className,\n                    'absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center'\n                )}\n            >\n                {children}\n            </span>\n            {/* Keep something in document flow with the correct height */}\n            <span className=\"relative h-full w-0 block\" />\n        </>\n    );\n}\n\n// TODO, ?include query param on Licenses, Activations and other future resources that need this\nfunction ColumnPicker() {\n    const { tanTable } = useDataTable();\n    const [activeId, setActiveId] = useState<string | null>(null);\n\n    const resourceFormatter = useResourceFormatter();\n\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n    return (\n        <DndContext\n            sensors={sensors}\n            collisionDetection={closestCenter}\n            onDragStart={event => {\n                const { active } = event;\n                setActiveId(active.id.toString());\n            }}\n            onDragEnd={event => {\n                const { active, over } = event;\n\n                if (over && active.id !== over.id) {\n                    const columnOrder = tanTable.getState().columnOrder;\n                    const oldIndex = columnOrder.indexOf(active.id.toString());\n                    const newIndex = columnOrder.indexOf(over.id.toString());\n                    tanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);\n                }\n\n                setActiveId(null);\n            }}\n        >\n            <SortableContext items={tanTable.getState().columnOrder} strategy={verticalListSortingStrategy}>\n                <EasyMenu\n                    label={\n                        <>\n                            <IcColumns className=\"inline align-bottom me-1\" />\n                            Columns\n                        </>\n                    }\n                    selectionMode=\"multiple\"\n                    items={tanTable.getAllFlatColumns()}\n                    // Using selectedKeys = 'all' does not mark MenuItems with isDisabled=true as selected. This is not the intended behaviour in this use-case.\n                    selectedKeys={tanTable.getVisibleFlatColumns().map(c => c.id)}\n                >\n                    <MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>\n                        (select all)\n                    </MenuItem>\n                    {tanTable.getState().columnOrder.map(colId => {\n                        const col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n                        if (!col) return null;\n                        return <SortableItem key={col.id} column={col} />;\n                    })}\n                </EasyMenu>\n                <DragOverlay>\n                    {activeId ? (\n                        <div className=\"opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div>\n                    ) : null}\n                </DragOverlay>\n            </SortableContext>\n        </DndContext>\n    );\n\n    function SortableItem({ column }: { column: Column<any, unknown> }) {\n        const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });\n        const style = {\n            transform: CSS.Transform.toString(transform),\n            transition,\n            zIndex: '999',\n        };\n        return (\n            <MenuItem\n                ref={setNodeRef}\n                style={style}\n                {...attributes}\n                id={column.id}\n                onAction={() => column.toggleVisibility()}\n                isDisabled={!column.getCanHide()}\n                className=\"flex items-center\"\n            >\n                <IcGrip {...listeners} className=\"size-icon cursor-grab\" />\n                {resourceFormatter(column.id)}\n                {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n            </MenuItem>\n        );\n    }\n}\n\nfunction Paginator() {\n    const { tanTable, query } = useDataTable();\n    const rowCount = query.data?.total ?? 0;\n    return (\n        <div className=\"flex items-center gap-2\">\n            <span className=\"whitespace-nowrap body-sm text-muted\">\n                {`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n                    (tanTable.getState().pagination.pageIndex + 1) * tanTable.getState().pagination.pageSize,\n                    rowCount\n                )} of ${rowCount?.toLocaleString()}`}\n            </span>\n\n            <Button\n                aria-label=\"First page\"\n                onPress={() => tanTable.firstPage()}\n                isDisabled={!tanTable.getCanPreviousPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <IcFirst />\n            </Button>\n            <Button\n                aria-label=\"Previous page\"\n                onPress={() => tanTable.previousPage()}\n                isDisabled={!tanTable.getCanPreviousPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <IcLeft />\n            </Button>\n            <Button\n                aria-label=\"Next page\"\n                onPress={() => tanTable.nextPage()}\n                isDisabled={!tanTable.getCanNextPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <IcRight />\n            </Button>\n            <Button\n                aria-label=\"Last page\"\n                onClick={() => tanTable.lastPage()}\n                isDisabled={!tanTable.getCanNextPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <IcLast />\n            </Button>\n        </div>\n    );\n}\n\nfunction PageSize() {\n    const { tanTable } = useDataTable();\n    const PAGE_SIZES = [10, 20, 30, 40, 50];\n\n    return (\n        <EasyMenu\n            label={tanTable.getState().pagination.pageSize.toString()}\n            selectionMode=\"single\"\n            selectedKeys={[tanTable.getState().pagination.pageSize.toString()]}\n            items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}\n        >\n            {items => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>}\n        </EasyMenu>\n    );\n}\n\nfunction Actions() {\n    const { query, tanTable, searchQuery, setSearchQuery, tableActions } = useDataTable();\n\n    return (\n        <section className=\"flex bg-elevation-1 justify-between my-0 p-icon border gap-icon overflow-auto\">\n            <div className=\"flex gap-icon\">\n                <Button\n                    aria-label=\"Refresh\"\n                    isPending={query.isFetching}\n                    onClick={() => query.refetch()}\n                    variant={'neutral'}\n                    size={'icon'}\n                >\n                    <IcRefresh />\n                </Button>\n\n                {tableActions\n                    .filter(ta => ta.bulk === tanTable.getSelectedRowModel().rows.length > 0)\n                    .map((ta, i) => {\n                        const Icon = ta.icon;\n                        return (\n                            <Button\n                                aria-label={ta.label}\n                                key={`${i}-${ta.bulk}`}\n                                type=\"button\"\n                                isDisabled={query.isFetching}\n                                className=\"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform\"\n                                onPress={e => {\n                                    ta.onClick(\n                                        e,\n                                        tanTable.getSelectedRowModel().rows.map(r => r.original)\n                                    );\n                                }}\n                                size={'icon'}\n                            >\n                                <Icon />\n                            </Button>\n                        );\n                    })}\n            </div>\n            <div className=\"flex gap-icon\">\n                <DataTableFilter />\n                {<SearchField value={searchQuery} onChange={setSearchQuery} />}\n            </div>\n        </section>\n    );\n}\n\nfunction SortIcon({\n    direction,\n    ...props\n}: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n    if (direction === 'asc') return <IcSortAsc className=\"size-3.5\" {...props} />;\n    else if (direction === 'desc') return <IcSortDesc className=\"size-3.5\" {...props} />;\n    else return <IcSortNone className=\"size-3.5\" {...props} />;\n}\n\nfunction HeaderText({ header }: { header: any }) {\n    const resourceFormatter = useResourceFormatter();\n    return header.column.columnDef.header\n        ? flexRender(header.column.columnDef.header, header.getContext())\n        : resourceFormatter(header.id);\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n    const { tanTable } = useDataTable();\n    const tableCellStyle = (isSticky: boolean, className?: string) =>\n        classNames(\n            'px-icon py-2 text-left body-sm font-medium whitespace-nowrap',\n            isSticky && 'bg-elevation-1 sticky right-0 z-50 text-center',\n            className\n        );\n    return (\n        <TableComponent className={classNames('table-auto', className)}>\n            <TableHeader className=\"sticky top-0 z-10\">\n                {tanTable.getHeaderGroups().map(headerGroup => (\n                    <TableRow key={headerGroup.id}>\n                        {headerGroup.headers.map(header => (\n                            <TableHead\n                                scope=\"col\"\n                                key={header.id}\n                                colSpan={header.colSpan}\n                                className={tableCellStyle(false, 'bg-elevation-1')}\n                            >\n                                {!header.column.getCanSort() && !header.isPlaceholder && (\n                                    <div className=\"w-full justify-start p-1 inline-flex items-center gap-1 body-sm\">\n                                        <HeaderText header={header} />\n                                    </div>\n                                )}\n                                {header.column.getCanSort() && (\n                                    <Button\n                                        variant=\"ghost\"\n                                        className=\"w-full justify-start p-1\"\n                                        onPress={header.column.getToggleSortingHandler()}\n                                    >\n                                        <span>\n                                            <HeaderText header={header} />\n                                        </span>\n                                        <SortIcon direction={header.column.getIsSorted()} />\n                                    </Button>\n                                )}\n                            </TableHead>\n                        ))}\n                    </TableRow>\n                ))}\n            </TableHeader>\n            <TableBody>\n                {tanTable.getRowModel().rows.map(row => (\n                    <TableRow\n                        className={classNames(\n                            'transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20'\n                        )}\n                        key={row.id}\n                        data-selected={row.getIsSelected()}\n                    >\n                        {row.getVisibleCells().map(cell => (\n                            <TableCell key={cell.id} className={tableCellStyle(cell.column.id === ACTIONS_COLUMN_ID)}>\n                                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                            </TableCell>\n                        ))}\n                    </TableRow>\n                ))}\n            </TableBody>\n        </TableComponent>\n    );\n}\n","'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport { useRef } from 'react';\nimport { Button } from '../components/button';\nimport { useDataTable } from '../components/data-table';\nimport { TfDatePicker } from '../components/date-picker';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { MultiSelectProps } from '../components/multi-select';\nimport { Popover, PopoverTrigger } from '../components/popover';\nimport { useAppForm } from '../utilities/form-hook';\nimport { useResourceFormatter, type ApiFilters } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { IcAccount, IcCheck, IcDate, IcFile, IcFilter, IcLicense, IcMinus, IcRemove, type CtxIcon } from './icons';\nimport { TfMultipleIdSearchInput } from './id-search';\n\nexport const FILTER_COMPARISON_OPERATORS = [\n    'eq',\n    'ne',\n    'cn',\n    'nc',\n    'sw',\n    'ew',\n    'in',\n    'nin',\n    'gt',\n    'gte',\n    'lt',\n    'lte',\n] as const;\nexport type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<FilterComparisonOperator, string> = {\n    eq: 'equal to',\n    ne: 'not equal to',\n    cn: 'contains',\n    nc: 'does not contain',\n    sw: 'starts with',\n    ew: 'ends with',\n    in: 'includes',\n    nin: 'does not include',\n    gt: 'greater than',\n    gte: 'greater than or equal to',\n    lt: 'less than',\n    lte: 'less than or equal to',\n};\n\ntype BaseLocalFilter<T extends FilterType, V> = {\n    id: string;\n    type: T;\n    property: string;\n    operator: FilterComparisonOperator;\n    value: V | undefined;\n    displayValue?: string;\n};\ntype EnumLocalFilter = BaseLocalFilter<'enum', Set<string | number>>;\ntype IdLocalFilter = BaseLocalFilter<'id', string>;\ntype BoolLocalFilter = BaseLocalFilter<'bool', boolean>;\ntype StringLocalFilter = BaseLocalFilter<'string', string>;\ntype NumberLocalFilter = BaseLocalFilter<'number', number>;\n// DatePicker accepts a string,and converts it to a ZonedDateTime\ntype DateLocalFilter = BaseLocalFilter<'date', string>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', string[]>;\n// TODO, entitlementSets.productIds\nfunction createNewFilter(type: FilterType, property: string): TableFilter {\n    const id = `${property}-${Date.now()}`;\n    const operator = FilterOperations[type][0];\n\n    switch (type) {\n        case 'bool':\n            return { id, type, property, operator, value: true };\n        case 'string':\n            return { id, type, property, operator, value: '' };\n        case 'date':\n            return { id, type, property, operator, value: new Date().toISOString() };\n        case 'id':\n            return { id, type, property, operator, value: '' };\n        case 'id-search':\n            return { id, type, property, operator, value: [] };\n        case 'enum':\n            return { id, type, property, operator, value: new Set<string | number>() };\n        case 'number':\n            return { id, type, property, operator, value: 0 };\n    }\n}\n\nexport type TableFilter =\n    | EnumLocalFilter\n    | IdLocalFilter\n    | BoolLocalFilter\n    | StringLocalFilter\n    | DateLocalFilter\n    | IdSearchLocalFilter\n    | NumberLocalFilter;\n\nexport type FilterConfig =\n    | { type: 'enum'; options: MultiSelectProps['items'] }\n    | ({ type: 'id-search' } & Pick<\n          React.ComponentProps<typeof TfMultipleIdSearchInput>,\n          'accessor' | 'searchFn' | 'resource'\n      >)\n    | { type: 'id' }\n    | { type: 'bool' }\n    | { type: 'string' }\n    | { type: 'date' }\n    | { type: 'number' };\n\nexport type FilterType = FilterConfig['type'];\n\nconst FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {\n    bool: ['eq'],\n    enum: ['in', 'nin'],\n    id: ['in', 'nin'],\n    'id-search': ['in', 'nin'],\n    string: ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],\n    date: ['lt', 'gt'],\n    number: ['eq', 'ne', 'gt', 'gte', 'lt', 'lte'],\n};\n\n// TS workaround to get rid of filterConfig: Required<Record<never, FilterConfig>>\nexport type FiltersConfig<TOperation extends keyof operations> = [keyof ApiFilters<TOperation>] extends [never]\n    ? Record<string, FilterConfig>\n    : Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>;\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n    const { filters, query, setFilters, filterConfig } = useDataTable();\n\n    const addFilterButtonRef = useRef<HTMLButtonElement>(null);\n\n    const resourceFormatter = useResourceFormatter();\n\n    const DEFAULT_VALUES: { filters: TableFilter[] } = {\n        filters,\n    };\n    const form = useAppForm({\n        defaultValues: DEFAULT_VALUES,\n        onSubmit: ({ value }) => {\n            setFilters(value.filters);\n        },\n    });\n\n    // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870\n    const filterKeys = Object.keys(filterConfig).sort();\n\n    return (\n        <section {...props} className={classNames('flex gap-icon items-center', className)}>\n            <PopoverTrigger\n                onOpenChange={o => {\n                    // Set filters when the popover closes\n                    if (!o) {\n                        form.handleSubmit();\n                    } else {\n                        addFilterButtonRef.current?.focus();\n                    }\n                }}\n            >\n                <div className=\"relative\">\n                    {filters.length > 0 && (\n                        <div className=\"size-2 rounded-full absolute bg-primary/90 z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5\"></div>\n                    )}\n                    <Button\n                        aria-label=\"Filter\"\n                        isDisabled={query.isPending || filterKeys.length === 0}\n                        type=\"button\"\n                        size={'icon'}\n                        variant={'neutral'}\n                    >\n                        <IcFilter />\n                    </Button>\n                </div>\n                {/* TODO, icon maps with dynamic imports? */}\n                {/* TODO open popover with form for property specific filter */}\n                {/* TODO, icons here??? */}\n                <Popover className=\"w-full p-icon\">\n                    <form\n                        onSubmit={e => {\n                            e.preventDefault();\n                        }}\n                        className=\"flex flex-col gap-icon max-h-table overflow-auto \"\n                    >\n                        <form.Field mode=\"array\" name={'filters'}>\n                            {field => {\n                                return (\n                                    <>\n                                        {field.state.value.map((lf, i) => {\n                                            return (\n                                                <div key={lf.id} className=\"flex gap-icon items-center justify-normal\">\n                                                    <span className=\"body-sm\">{resourceFormatter(lf.property)}</span>\n                                                    <form.AppField key={lf.id} name={`filters[${i}].operator`}>\n                                                        {sf => (\n                                                            <sf.TfSingleSelect\n                                                                items={FilterOperations[lf.type].map(op => ({\n                                                                    id: op,\n                                                                    label: <>{COMPARISON_OPERATOR_LABELS[op]}</>,\n                                                                }))}\n                                                            />\n                                                        )}\n                                                    </form.AppField>\n\n                                                    {lf.type === 'bool' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfCheckbox autoFocus />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'date' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {_ => <TfDatePicker autoFocus />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'id' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfTextField autoFocus />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'string' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfTextField autoFocus />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'number' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfNumberField autoFocus />}\n                                                        </form.AppField>\n                                                    )}\n\n                                                    {lf.type === 'enum' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => {\n                                                                const config = filterConfig[lf.property];\n                                                                if (config.type !== 'enum') return null;\n                                                                return <sf.TfMultiSelect items={config.options} />;\n                                                            }}\n                                                        </form.AppField>\n                                                    )}\n\n                                                    {lf.type === 'id-search' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {_ => {\n                                                                const config = filterConfig[lf.property];\n                                                                if (config.type !== 'id-search') return null;\n                                                                return (\n                                                                    <TfMultipleIdSearchInput\n                                                                        resource={config.resource}\n                                                                        accessor={config.accessor}\n                                                                        searchFn={config.searchFn}\n                                                                    />\n                                                                );\n                                                            }}\n                                                        </form.AppField>\n                                                    )}\n\n                                                    <Button\n                                                        type=\"button\"\n                                                        variant=\"neutral\"\n                                                        size=\"icon\"\n                                                        onPress={() => field.removeValue(i)}\n                                                    >\n                                                        <IcRemove />\n                                                    </Button>\n                                                </div>\n                                            );\n                                        })}\n                                        <div className=\"flex w-full items-center justify-end gap-2 not-first:mt-icon\">\n                                            <EasyMenu label=\"Add filter\" autoFocus>\n                                                {filterKeys.sort().map(k => {\n                                                    const type = filterConfig[k].type;\n                                                    const Icon = FilterIcon[type];\n                                                    return (\n                                                        <MenuItem\n                                                            key={k}\n                                                            onAction={() => {\n                                                                const newFilter = createNewFilter(type, k);\n                                                                field.pushValue(newFilter);\n                                                            }}\n                                                        >\n                                                            {resourceFormatter(k)}\n                                                            <Icon />\n                                                        </MenuItem>\n                                                    );\n                                                })}\n                                            </EasyMenu>\n                                            {field.state.value.length > 0 ? (\n                                                <Button\n                                                    type=\"button\"\n                                                    variant=\"neutral\"\n                                                    onPress={() => {\n                                                        field.setValue([]);\n                                                    }}\n                                                >\n                                                    <IcRemove />\n                                                    Reset\n                                                </Button>\n                                            ) : null}\n                                        </div>\n                                    </>\n                                );\n                            }}\n                        </form.Field>\n                    </form>\n                </Popover>\n            </PopoverTrigger>\n        </section>\n    );\n}\n\nconst FilterIcon: Record<FilterConfig['type'], CtxIcon> = {\n    'id-search': IcFile,\n    bool: IcCheck,\n    date: IcDate,\n    enum: IcLicense,\n    id: IcAccount,\n    number: IcMinus,\n    string: IcCheck,\n};\n"],"names":["getTableCallback","getter","callback","pagination","sorting","searching","filters","query","generateSortParam","_f","columnHelper","createColumnHelper","sort","cH","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","TABLE_ID_COLUMN","TABLE_DEFAULT_DATE_COLUMNS","date","formatDate","ACTIONS_COLUMN_ID","getActionColumn","rowActions","DialogMenu","IcMoreVertical","useDataTableState","resourceName","columns","filterConfig","columnsToHideByDefault","allowSelection","initialFilters","tableActions","tableState","_setTableState","useState","rowSelection","setRowSelection","searchQuery","setSearchQuery","columnOrder","setColumnOrder","useLocalStorage","columnVisibility","setColumnVisibility","setFilters","mergedFilters","useMemo","tf","acc","current","merge","updateTableState","updates","prev","useQuery","keepPreviousData","cols","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","useEffect","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","className","Fragment","classNames","Actions","jsxs","TableOverlay","Loader","IcInfo","TableContent","ColumnPicker","PageSize","Paginator","activeId","setActiveId","resourceFormatter","useResourceFormatter","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","arrayMove","SortableContext","verticalListSortingStrategy","EasyMenu","IcColumns","MenuItem","colId","col","SortableItem","DragOverlay","column","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","IcGrip","SortIcon","rowCount","Button","IcFirst","IcLeft","IcRight","IcLast","PAGE_SIZES","s","items","IcRefresh","ta","i","Icon","e","r","DataTableFilter","SearchField","direction","IcSortAsc","IcSortDesc","IcSortNone","HeaderText","header","flexRender","tableCellStyle","isSticky","TableComponent","TableHeader","headerGroup","TableRow","TableHead","TableBody","cell","TableCell","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","createNewFilter","type","property","id","operator","FilterOperations","addFilterButtonRef","useRef","form","useAppForm","value","filterKeys","PopoverTrigger","o","IcFilter","Popover","field","lf","sf","op","_","TfDatePicker","config","TfMultipleIdSearchInput","IcRemove","k","FilterIcon","newFilter","IcFile","IcCheck","IcDate","IcLicense","IcAccount","IcMinus"],"mappings":"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"}

package/dist/components/dialog-menu.d.ts

@@ -1,20 +1,34 @@
 import { CtxIcon } from './icons';
-type DialogMenuBaseItem = {
+export type DialogMenuContentProps<T> = {
+    /** Callback to close the dialog */
+    close: () => void;
+    /** The data passed to the dialog */
+    data: T;
+};
+/** Base properties shared by all menu actions */
+export type MenuActionBase<T> = {
     label: string;
-    isDisabled: boolean;
+    /** Optional function to determine if the action is disabled. Receives the data and returns a boolean. Defaults to false if not provided */
+    isDisabled?: (data: T) => boolean;
     icon: CtxIcon;
 };
-type DialogMenuActionItem = DialogMenuBaseItem & {
-    onPress: () => void;
+/** Action that triggers a callback */
+export type MenuActionAction<T> = MenuActionBase<T> & {
+    type: 'action';
+    /** Callback triggered when the action is pressed. Receives the data as parameter */
+    onPress: (data: T) => void;
 };
-type DialogMenuDialogItem = DialogMenuBaseItem & {
-    component: (close: () => void) => React.ReactNode;
-    isDismissable?: boolean;
+/** Action that opens a dialog */
+export type MenuActionDialog<T> = MenuActionBase<T> & {
+    type: 'dialog';
+    /** Component to render in the dialog */
+    component: React.ComponentType<DialogMenuContentProps<T>>;
 };
-type DialogMenuItem = DialogMenuActionItem | DialogMenuDialogItem;
-export interface DialogMenuProps {
+/** Common menu action type that works for both DialogMenu and table row actions */
+export type DialogMenuAction<T> = MenuActionAction<T> | MenuActionDialog<T>;
+export type DialogMenuProps<T> = {
     label: React.ReactNode;
-    items: DialogMenuItem[];
-}
-export declare function DialogMenu({ label, items }: DialogMenuProps): import("react/jsx-runtime").JSX.Element;
-export {};
+    items: DialogMenuAction<T>[];
+    data: T;
+};
+export declare function DialogMenu<T>({ label, items, data }: DialogMenuProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/dialog-menu.js

@@ -1,2 +1,2 @@
-import{jsxs as m,Fragment as c,jsx as i}from"react/jsx-runtime";import{useState as u}from"react";import{DialogTrigger as f,DialogOverlay as d,DialogContent as g}from"./dialog.js";import{EasyMenu as b,MenuItem as D}from"./menu.js";import"class-variance-authority";import"react-aria-components";import"./button.js";import"../utilities/theme.js";import"clsx";import"./loader.js";import"./icons.js";import"./list-box.js";import"./select.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./form.js";import"./popover.js";function l(o){return o.trim().toLowerCase().replace(/\s+/g,"-")}function h(o){return"onPress"in o&&typeof o.onPress=="function"}function a(o){return"component"in o&&typeof o.component=="function"}function T({label:o,items:e}){const[t,p]=u(null);return m(c,{children:[i(b,{label:o,size:"icon",onAction:n=>{if(typeof n!="string")return;const r=e.find(s=>l(s.label)===n);if(r&&!r.isDisabled){if(h(r)){r.onPress();return}a(r)&&p(n)}},children:e.map(n=>{const r=l(n.label),s=n.icon;return m(D,{id:r,isDisabled:n.isDisabled,children:[i(s,{className:"size-icon"})," ",n.label]},r)})}),i(f,{isOpen:t!==null,onOpenChange:n=>{n||p(null)},children:t!==null&&(()=>{const n=e.find(r=>l(r.label)===t);return!n||!a(n)?null:i(d,{isDismissable:n.isDismissable,children:i(g,{children:({close:r})=>n.component(r)})})})()})]})}export{T as DialogMenu};
+import{jsxs as u,Fragment as d,jsx as r}from"react/jsx-runtime";import{useState as g}from"react";import{DialogTrigger as b,DialogOverlay as D,DialogContent as h}from"./dialog.js";import{EasyMenu as y,MenuItem as A}from"./menu.js";import"class-variance-authority";import"react-aria-components";import"./button.js";import"../utilities/theme.js";import"clsx";import"./loader.js";import"./icons.js";import"./list-box.js";import"./select.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./form.js";import"./popover.js";function p(i){return i.trim().toLowerCase().replace(/\s+/g,"-")}function M(i){return i.type==="action"}function a(i){return i.type==="dialog"}function f(i,t){return i.isDisabled?i.isDisabled(t):!1}function G({label:i,items:t,data:l}){const[s,m]=g(null);return u(d,{children:[r(y,{"aria-label":"Actions",label:i,size:"icon",onAction:n=>{if(typeof n!="string")return;const e=t.find(c=>p(c.label)===n);!e||f(e,l)||(M(e)?e.onPress(l):a(e)&&m(n))},children:t.map(n=>{const e=p(n.label),o=n.icon,c=f(n,l);return u(A,{id:e,isDisabled:c,children:[r(o,{className:"size-icon"})," ",n.label]},e)})}),r(b,{isOpen:s!==null,onOpenChange:n=>{n||m(null)},children:s!==null&&(()=>{const n=t.find(o=>p(o.label)===s);if(!n||!a(n))return null;const e=n.component;return r(D,{children:r(h,{children:({close:o})=>r(e,{close:o,data:l})})})})()})]})}export{G as DialogMenu};
 //# sourceMappingURL=dialog-menu.js.map

package/dist/components/dialog-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-menu.js","sources":["../../lib/components/dialog-menu.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { DialogContent, DialogOverlay, DialogTrigger } from './dialog';\nimport type { CtxIcon } from './icons';\nimport { EasyMenu, MenuItem } from './menu';\n\nfunction normalizeLabel(label: string): string {\n    return label.trim().toLowerCase().replace(/\\s+/g, '-');\n}\n\ntype DialogMenuBaseItem = {\n    label: string;\n    isDisabled: boolean;\n    icon: CtxIcon;\n};\ntype DialogMenuActionItem = DialogMenuBaseItem & {\n    onPress: () => void;\n};\n\ntype DialogMenuDialogItem = DialogMenuBaseItem & {\n    component: (close: () => void) => React.ReactNode;\n    isDismissable?: boolean;\n};\n\ntype DialogMenuItem = DialogMenuActionItem | DialogMenuDialogItem;\n\nfunction hasOnPress(item: DialogMenuItem): item is DialogMenuActionItem {\n    return 'onPress' in item && typeof item.onPress === 'function';\n}\n\nfunction hasDialog(item: DialogMenuItem): item is DialogMenuDialogItem {\n    return 'component' in item && typeof item.component === 'function';\n}\n\nexport interface DialogMenuProps {\n    label: React.ReactNode;\n    items: DialogMenuItem[];\n}\n\nexport function DialogMenu({ label, items }: DialogMenuProps) {\n    const [openKey, setOpenKey] = useState<string | null>(null);\n\n    return (\n        <>\n            <EasyMenu\n                label={label}\n                size={'icon'}\n                onAction={key => {\n                    if (typeof key !== 'string') return;\n                    const found = items.find(it => normalizeLabel(it.label) === key);\n                    if (!found) return;\n                    if (found.isDisabled) return;\n                    if (hasOnPress(found)) {\n                        found.onPress();\n                        return;\n                    }\n                    if (hasDialog(found)) {\n                        setOpenKey(key);\n                    }\n                }}\n            >\n                {items.map(it => {\n                    const id = normalizeLabel(it.label);\n                    const Icon = it.icon;\n                    return (\n                        <MenuItem key={id} id={id} isDisabled={it.isDisabled}>\n                            {<Icon className=\"size-icon\" />} {it.label}\n                        </MenuItem>\n                    );\n                })}\n            </EasyMenu>\n\n            <DialogTrigger\n                isOpen={openKey !== null}\n                onOpenChange={open => {\n                    if (!open) setOpenKey(null);\n                }}\n            >\n                {openKey !== null &&\n                    (() => {\n                        const renderItem = items.find(it => normalizeLabel(it.label) === openKey);\n                        if (!renderItem || !hasDialog(renderItem)) return null;\n                        return (\n                            <DialogOverlay isDismissable={renderItem.isDismissable}>\n                                <DialogContent>{({ close }) => renderItem.component(close)}</DialogContent>\n                            </DialogOverlay>\n                        );\n                    })()}\n            </DialogTrigger>\n        </>\n    );\n}\n"],"names":["normalizeLabel","label","hasOnPress","item","hasDialog","DialogMenu","items","openKey","setOpenKey","useState","jsxs","Fragment","jsx","EasyMenu","key","found","it","id","Icon","MenuItem","DialogTrigger","open","renderItem","DialogOverlay","DialogContent","close"],"mappings":"2jBAKA,SAASA,EAAeC,EAAuB,CAC3C,OAAOA,EAAM,OAAO,cAAc,QAAQ,OAAQ,GAAG,CACzD,CAkBA,SAASC,EAAWC,EAAoD,CACpE,MAAO,YAAaA,GAAQ,OAAOA,EAAK,SAAY,UACxD,CAEA,SAASC,EAAUD,EAAoD,CACnE,MAAO,cAAeA,GAAQ,OAAOA,EAAK,WAAc,UAC5D,CAOO,SAASE,EAAW,CAAE,MAAAJ,EAAO,MAAAK,GAA0B,CAC1D,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAwB,IAAI,EAE1D,OACIC,EAAAC,EAAA,CACI,SAAA,CAAAC,EAACC,EAAA,CACG,MAAAZ,EACA,KAAM,OACN,SAAUa,GAAO,CACb,GAAI,OAAOA,GAAQ,SAAU,OAC7B,MAAMC,EAAQT,EAAM,KAAKU,GAAMhB,EAAegB,EAAG,KAAK,IAAMF,CAAG,EAC/D,GAAKC,GACD,CAAAA,EAAM,WACV,IAAIb,EAAWa,CAAK,EAAG,CACnBA,EAAM,QAAA,EACN,MACJ,CACIX,EAAUW,CAAK,GACfP,EAAWM,CAAG,EAEtB,EAEC,SAAAR,EAAM,IAAIU,GAAM,CACb,MAAMC,EAAKjB,EAAegB,EAAG,KAAK,EAC5BE,EAAOF,EAAG,KAChB,OACIN,EAACS,EAAA,CAAkB,GAAAF,EAAQ,WAAYD,EAAG,WACrC,SAAA,CAAAJ,EAACM,EAAA,CAAK,UAAU,WAAA,CAAY,EAAG,IAAEF,EAAG,KAAA,CAAA,EAD1BC,CAEf,CAER,CAAC,CAAA,CAAA,EAGLL,EAACQ,EAAA,CACG,OAAQb,IAAY,KACpB,aAAcc,GAAQ,CACbA,GAAMb,EAAW,IAAI,CAC9B,EAEC,SAAAD,IAAY,OACR,IAAM,CACH,MAAMe,EAAahB,EAAM,KAAKU,GAAMhB,EAAegB,EAAG,KAAK,IAAMT,CAAO,EACxE,MAAI,CAACe,GAAc,CAAClB,EAAUkB,CAAU,EAAU,KAE9CV,EAACW,EAAA,CAAc,cAAeD,EAAW,cACrC,SAAAV,EAACY,EAAA,CAAe,SAAA,CAAC,CAAE,MAAAC,KAAYH,EAAW,UAAUG,CAAK,EAAE,EAC/D,CAER,GAAA,CAAG,CAAA,CACX,EACJ,CAER"}
+{"version":3,"file":"dialog-menu.js","sources":["../../lib/components/dialog-menu.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { DialogContent, DialogOverlay, DialogTrigger } from './dialog';\nimport type { CtxIcon } from './icons';\nimport { EasyMenu, MenuItem } from './menu';\n\nfunction normalizeLabel(label: string): string {\n    return label.trim().toLowerCase().replace(/\\s+/g, '-');\n}\n\nexport type DialogMenuContentProps<T> = {\n    /** Callback to close the dialog */\n    close: () => void;\n    /** The data passed to the dialog */\n    data: T;\n};\n\n/** Base properties shared by all menu actions */\nexport type MenuActionBase<T> = {\n    label: string;\n    /** Optional function to determine if the action is disabled. Receives the data and returns a boolean. Defaults to false if not provided */\n    isDisabled?: (data: T) => boolean;\n    icon: CtxIcon;\n};\n\n/** Action that triggers a callback */\nexport type MenuActionAction<T> = MenuActionBase<T> & {\n    type: 'action';\n    /** Callback triggered when the action is pressed. Receives the data as parameter */\n    onPress: (data: T) => void;\n};\n\n/** Action that opens a dialog */\nexport type MenuActionDialog<T> = MenuActionBase<T> & {\n    type: 'dialog';\n    /** Component to render in the dialog */\n    component: React.ComponentType<DialogMenuContentProps<T>>;\n};\n\n/** Common menu action type that works for both DialogMenu and table row actions */\nexport type DialogMenuAction<T> = MenuActionAction<T> | MenuActionDialog<T>;\n\nfunction isMenuActionAction<T>(item: DialogMenuAction<T>): item is MenuActionAction<T> {\n    return item.type === 'action';\n}\n\nfunction isMenuActionDialog<T>(item: DialogMenuAction<T>): item is MenuActionDialog<T> {\n    return item.type === 'dialog';\n}\n\nfunction getIsDisabled<T>(item: DialogMenuAction<T>, data: T): boolean {\n    return item.isDisabled ? item.isDisabled(data) : false;\n}\n\nexport type DialogMenuProps<T> = {\n    label: React.ReactNode;\n    items: DialogMenuAction<T>[];\n    data: T;\n};\n\nexport function DialogMenu<T>({ label, items, data }: DialogMenuProps<T>) {\n    const [openKey, setOpenKey] = useState<string | null>(null);\n\n    return (\n        <>\n            <EasyMenu\n                aria-label=\"Actions\"\n                label={label}\n                size={'icon'}\n                onAction={key => {\n                    if (typeof key !== 'string') return;\n                    const found = items.find(it => normalizeLabel(it.label) === key);\n                    if (!found) return;\n\n                    const isDisabled = getIsDisabled(found, data);\n                    if (isDisabled) return;\n\n                    if (isMenuActionAction(found)) {\n                        found.onPress(data);\n                    } else if (isMenuActionDialog(found)) {\n                        setOpenKey(key);\n                    }\n                }}\n            >\n                {items.map(it => {\n                    const id = normalizeLabel(it.label);\n                    const Icon = it.icon;\n                    const isDisabled = getIsDisabled(it, data);\n                    return (\n                        <MenuItem key={id} id={id} isDisabled={isDisabled}>\n                            {<Icon className=\"size-icon\" />} {it.label}\n                        </MenuItem>\n                    );\n                })}\n            </EasyMenu>\n\n            <DialogTrigger\n                isOpen={openKey !== null}\n                onOpenChange={open => {\n                    if (!open) setOpenKey(null);\n                }}\n            >\n                {openKey !== null &&\n                    (() => {\n                        const renderItem = items.find(it => normalizeLabel(it.label) === openKey);\n                        if (!renderItem || !isMenuActionDialog(renderItem)) return null;\n\n                        const Component = renderItem.component;\n\n                        return (\n                            <DialogOverlay>\n                                <DialogContent>{({ close }) => <Component close={close} data={data} />}</DialogContent>\n                            </DialogOverlay>\n                        );\n                    })()}\n            </DialogTrigger>\n        </>\n    );\n}\n"],"names":["normalizeLabel","label","isMenuActionAction","item","isMenuActionDialog","getIsDisabled","data","DialogMenu","items","openKey","setOpenKey","useState","jsxs","Fragment","jsx","EasyMenu","key","found","it","id","Icon","isDisabled","MenuItem","DialogTrigger","open","renderItem","Component","DialogOverlay","DialogContent","close"],"mappings":"2jBAKA,SAASA,EAAeC,EAAuB,CAC3C,OAAOA,EAAM,OAAO,cAAc,QAAQ,OAAQ,GAAG,CACzD,CAkCA,SAASC,EAAsBC,EAAwD,CACnF,OAAOA,EAAK,OAAS,QACzB,CAEA,SAASC,EAAsBD,EAAwD,CACnF,OAAOA,EAAK,OAAS,QACzB,CAEA,SAASE,EAAiBF,EAA2BG,EAAkB,CACnE,OAAOH,EAAK,WAAaA,EAAK,WAAWG,CAAI,EAAI,EACrD,CAQO,SAASC,EAAc,CAAE,MAAAN,EAAO,MAAAO,EAAO,KAAAF,GAA4B,CACtE,KAAM,CAACG,EAASC,CAAU,EAAIC,EAAwB,IAAI,EAE1D,OACIC,EAAAC,EAAA,CACI,SAAA,CAAAC,EAACC,EAAA,CACG,aAAW,UACX,MAAAd,EACA,KAAM,OACN,SAAUe,GAAO,CACb,GAAI,OAAOA,GAAQ,SAAU,OAC7B,MAAMC,EAAQT,EAAM,KAAKU,GAAMlB,EAAekB,EAAG,KAAK,IAAMF,CAAG,EAC3D,CAACC,GAEcZ,EAAcY,EAAOX,CAAI,IAGxCJ,EAAmBe,CAAK,EACxBA,EAAM,QAAQX,CAAI,EACXF,EAAmBa,CAAK,GAC/BP,EAAWM,CAAG,EAEtB,EAEC,SAAAR,EAAM,IAAIU,GAAM,CACb,MAAMC,EAAKnB,EAAekB,EAAG,KAAK,EAC5BE,EAAOF,EAAG,KACVG,EAAahB,EAAca,EAAIZ,CAAI,EACzC,OACIM,EAACU,EAAA,CAAkB,GAAAH,EAAQ,WAAAE,EACtB,SAAA,CAAAP,EAACM,EAAA,CAAK,UAAU,WAAA,CAAY,EAAG,IAAEF,EAAG,KAAA,CAAA,EAD1BC,CAEf,CAER,CAAC,CAAA,CAAA,EAGLL,EAACS,EAAA,CACG,OAAQd,IAAY,KACpB,aAAce,GAAQ,CACbA,GAAMd,EAAW,IAAI,CAC9B,EAEC,SAAAD,IAAY,OACR,IAAM,CACH,MAAMgB,EAAajB,EAAM,KAAKU,GAAMlB,EAAekB,EAAG,KAAK,IAAMT,CAAO,EACxE,GAAI,CAACgB,GAAc,CAACrB,EAAmBqB,CAAU,EAAG,OAAO,KAE3D,MAAMC,EAAYD,EAAW,UAE7B,OACIX,EAACa,EAAA,CACG,SAAAb,EAACc,EAAA,CAAe,SAAA,CAAC,CAAE,MAAAC,CAAA,IAAYf,EAACY,EAAA,CAAU,MAAAG,EAAc,KAAAvB,CAAA,CAAY,EAAG,EAC3E,CAER,GAAA,CAAG,CAAA,CACX,EACJ,CAER"}

package/dist/components/menu.d.ts

@@ -22,5 +22,5 @@ interface MenuProps<T> extends AriaMenuProps<T>, VariantProps<typeof buttonVaria
     isNonModal?: boolean;
     id?: string;
 }
-export declare function EasyMenu<T extends object>({ label, children, variant, isDisabled, size, isNonModal, id, ...props }: MenuProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function EasyMenu<T extends object>({ label, children, variant, isDisabled, size, isNonModal, id, 'aria-label': ariaLabel, ...props }: MenuProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/menu.js

@@ -1,2 +1,2 @@
-import{jsxs as u,jsx as o,Fragment as c}from"react/jsx-runtime";import{MenuTrigger as p,MenuItem as d,composeRenderProps as m,Menu as f,SubmenuTrigger as b,Header as g,Separator as M,Keyboard as y}from"react-aria-components";import{classNames as a}from"../utilities/theme.js";import{IcDot as N,IcCheck as x,IcRight as h}from"./icons.js";import{ListBoxCollection as S}from"./list-box.js";import{SelectTrigger as v,SelectPopover as I}from"./select.js";import"clsx";import"react";import"./button.js";import"class-variance-authority";import"./loader.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./form.js";import"./popover.js";const T=p,O=b,P=S;function j({className:e,...t}){return o(I,{className:m(e,r=>a(r)),...t})}function z({className:e,...t}){return o(f,{className:a("overflow-auto p-1 outline-0 body-base",e),escapeKeyBehavior:"none",...t})}function Q({children:e,className:t,...r}){return o(d,{textValue:r.textValue||(typeof e=="string"?e:void 0),className:m(t,n=>a("btn btn-ghost relative flex justify-start input-dim","data-[selection-mode]:pl-input",n)),...r,children:m(e,(n,i)=>u(c,{children:[o("span",{className:"absolute left-2 flex size-icon items-center justify-center",children:i.isSelected&&u(c,{children:[i.selectionMode=="single"&&o(N,{className:"size-icon fill-current"}),i.selectionMode=="multiple"&&o(x,{className:"size-icon"})]})}),n,i.hasSubmenu&&o(h,{className:"ml-auto size-icon"})]}))})}function U({className:e,inset:t,separator:r=!0,...n}){return o(g,{className:a("px-3 py-1.5 body font-semibold",t&&"pl-input",r&&"-mx-1 mb-1 border-b border-b-border pb-2.5",e),...n})}function W({className:e,...t}){return o(M,{className:a("-mx-1 my-1 h-px bg-muted",e),...t})}function X({className:e,...t}){return o(y,{className:a("ml-auto body-sm tracking-widest opacity-60",e),...t})}function Y({label:e,children:t,variant:r,isDisabled:n,size:i,isNonModal:w,id:l,...s}){return u(T,{...s,children:[o(v,{id:l,isDisabled:n,autoFocus:!!s.autoFocus,variant:r,size:i,children:e}),o(j,{className:"overflow-auto",children:o(z,{...s,children:t})})]})}export{Y as EasyMenu,z as Menu,P as MenuCollection,U as MenuHeader,Q as MenuItem,X as MenuKeyboard,j as MenuPopover,W as MenuSeparator,O as MenuSubTrigger,T as MenuTrigger};
+import{jsxs as u,jsx as o,Fragment as c}from"react/jsx-runtime";import{MenuTrigger as d,MenuItem as b,composeRenderProps as m,Menu as f,SubmenuTrigger as M,Header as g,Separator as y,Keyboard as N}from"react-aria-components";import{classNames as a}from"../utilities/theme.js";import{IcDot as x,IcCheck as h,IcRight as S}from"./icons.js";import{ListBoxCollection as v}from"./list-box.js";import{SelectTrigger as I,SelectPopover as T}from"./select.js";import"clsx";import"react";import"./button.js";import"class-variance-authority";import"./loader.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./form.js";import"./popover.js";const j=d,P=M,Q=v;function z({className:e,...t}){return o(T,{className:m(e,r=>a(r)),...t})}function w({className:e,...t}){return o(f,{className:a("overflow-auto p-1 outline-0 body-base",e),escapeKeyBehavior:"none",...t})}function U({children:e,className:t,...r}){return o(b,{textValue:r.textValue||(typeof e=="string"?e:void 0),className:m(t,n=>a("btn btn-ghost relative flex justify-start input-dim","data-[selection-mode]:pl-input",n)),...r,children:m(e,(n,i)=>u(c,{children:[o("span",{className:"absolute left-2 flex size-icon items-center justify-center",children:i.isSelected&&u(c,{children:[i.selectionMode=="single"&&o(x,{className:"size-icon fill-current"}),i.selectionMode=="multiple"&&o(h,{className:"size-icon"})]})}),n,i.hasSubmenu&&o(S,{className:"ml-auto size-icon"})]}))})}function W({className:e,inset:t,separator:r=!0,...n}){return o(g,{className:a("px-3 py-1.5 body font-semibold",t&&"pl-input",r&&"-mx-1 mb-1 border-b border-b-border pb-2.5",e),...n})}function X({className:e,...t}){return o(y,{className:a("-mx-1 my-1 h-px bg-muted",e),...t})}function Y({className:e,...t}){return o(N,{className:a("ml-auto body-sm tracking-widest opacity-60",e),...t})}function Z({label:e,children:t,variant:r,isDisabled:n,size:i,isNonModal:C,id:l,"aria-label":p="Menu",...s}){return u(j,{...s,children:[o(I,{id:l,isDisabled:n,autoFocus:!!s.autoFocus,variant:r,size:i,"aria-label":p,children:e}),o(z,{className:"overflow-auto",children:o(w,{...s,children:t})})]})}export{Z as EasyMenu,w as Menu,Q as MenuCollection,W as MenuHeader,U as MenuItem,Y as MenuKeyboard,z as MenuPopover,X as MenuSeparator,P as MenuSubTrigger,j as MenuTrigger};
 //# sourceMappingURL=menu.js.map

package/dist/components/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../lib/components/menu.tsx"],"sourcesContent":["import { VariantProps } from 'class-variance-authority';\nimport {\n    Header as AriaHeader,\n    Keyboard as AriaKeyboard,\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    MenuItemProps as AriaMenuItemProps,\n    MenuProps as AriaMenuProps,\n    MenuTrigger as AriaMenuTrigger,\n    MenuTriggerProps as AriaMenuTriggerProps,\n    Separator as AriaSeparator,\n    SeparatorProps as AriaSeparatorProps,\n    SubmenuTrigger as AriaSubmenuTrigger,\n    composeRenderProps,\n    PopoverProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nimport { buttonVariants } from './button';\nimport { IcCheck, IcDot, IcRight } from './icons';\nimport { ListBoxCollection } from './list-box';\nimport { SelectPopover, SelectTrigger } from './select';\n\nexport const MenuTrigger = AriaMenuTrigger;\nexport const MenuSubTrigger = AriaSubmenuTrigger;\nexport const MenuCollection = ListBoxCollection;\n\nexport function MenuPopover({ className, ...props }: PopoverProps) {\n    return <SelectPopover className={composeRenderProps(className, className => classNames(className))} {...props} />;\n}\n\nexport function Menu<T extends object>({ className, ...props }: AriaMenuProps<T>) {\n    return (\n        <AriaMenu\n            className={classNames('overflow-auto p-1 outline-0 body-base', className)}\n            escapeKeyBehavior=\"none\"\n            {...props}\n        />\n    );\n}\n\nexport function MenuItem({ children, className, ...props }: AriaMenuItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n    return (\n        <AriaMenuItem\n            textValue={props.textValue || (typeof children === 'string' ? children : undefined)}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'btn btn-ghost relative flex justify-start input-dim',\n                    /* Selection Mode */\n                    'data-[selection-mode]:pl-input',\n                    className\n                )\n            )}\n            {...props}\n        >\n            {composeRenderProps(children, (children, renderProps) => (\n                <>\n                    <span className=\"absolute left-2 flex size-icon items-center justify-center\">\n                        {renderProps.isSelected && (\n                            <>\n                                {renderProps.selectionMode == 'single' && <IcDot className=\"size-icon fill-current\" />}\n                                {renderProps.selectionMode == 'multiple' && <IcCheck className=\"size-icon\" />}\n                            </>\n                        )}\n                    </span>\n\n                    {children}\n\n                    {renderProps.hasSubmenu && <IcRight className=\"ml-auto size-icon\" />}\n                </>\n            ))}\n        </AriaMenuItem>\n    );\n}\n\ninterface MenuHeaderProps extends React.ComponentProps<typeof AriaHeader> {\n    inset?: boolean;\n    separator?: boolean;\n}\n\nexport function MenuHeader({ className, inset, separator = true, ...props }: MenuHeaderProps) {\n    return (\n        <AriaHeader\n            className={classNames(\n                'px-3 py-1.5 body font-semibold',\n                inset && 'pl-input',\n                separator && '-mx-1 mb-1 border-b border-b-border pb-2.5',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function MenuSeparator({ className, ...props }: AriaSeparatorProps) {\n    return <AriaSeparator className={classNames('-mx-1 my-1 h-px bg-muted', className)} {...props} />;\n}\n\nexport function MenuKeyboard({ className, ...props }: React.ComponentProps<typeof AriaKeyboard>) {\n    return <AriaKeyboard className={classNames('ml-auto body-sm tracking-widest opacity-60', className)} {...props} />;\n}\ninterface MenuProps<T>\n    extends AriaMenuProps<T>,\n        VariantProps<typeof buttonVariants>,\n        Omit<AriaMenuTriggerProps, 'children'> {\n    label?: React.ReactNode;\n    isDisabled?: boolean;\n    isNonModal?: boolean;\n    id?: string;\n}\n// TODO name this better\nexport function EasyMenu<T extends object>({\n    label,\n    children,\n    variant,\n    isDisabled,\n    size,\n    isNonModal,\n    id,\n    ...props\n}: MenuProps<T>) {\n    return (\n        <MenuTrigger {...props}>\n            <SelectTrigger id={id} isDisabled={isDisabled} autoFocus={!!props.autoFocus} variant={variant} size={size}>\n                {label}\n            </SelectTrigger>\n            <MenuPopover className=\"overflow-auto\">\n                <Menu {...props}>{children}</Menu>\n            </MenuPopover>\n        </MenuTrigger>\n    );\n}\n"],"names":["MenuTrigger","AriaMenuTrigger","MenuSubTrigger","AriaSubmenuTrigger","MenuCollection","ListBoxCollection","MenuPopover","className","props","jsx","SelectPopover","composeRenderProps","classNames","Menu","AriaMenu","MenuItem","children","AriaMenuItem","renderProps","jsxs","Fragment","IcDot","IcCheck","IcRight","MenuHeader","inset","separator","AriaHeader","MenuSeparator","AriaSeparator","MenuKeyboard","AriaKeyboard","EasyMenu","label","variant","isDisabled","size","isNonModal","id","SelectTrigger"],"mappings":"4qBAwBO,MAAMA,EAAcC,EACdC,EAAiBC,EACjBC,EAAiBC,EAEvB,SAASC,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAAuB,CAC/D,OAAOC,EAACC,EAAA,CAAc,UAAWC,EAAmBJ,EAAWA,GAAaK,EAAWL,CAAS,CAAC,EAAI,GAAGC,CAAA,CAAO,CACnH,CAEO,SAASK,EAAuB,CAAE,UAAAN,EAAW,GAAGC,GAA2B,CAC9E,OACIC,EAACK,EAAA,CACG,UAAWF,EAAW,wCAAyCL,CAAS,EACxE,kBAAkB,OACjB,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASO,EAAS,CAAE,SAAAC,EAAU,UAAAT,EAAW,GAAGC,GAAkE,CACjH,OACIC,EAACQ,EAAA,CACG,UAAWT,EAAM,YAAc,OAAOQ,GAAa,SAAWA,EAAW,QACzE,UAAWL,EAAmBJ,EAAWA,GACrCK,EACI,sDAEA,iCACAL,CAAA,CACJ,EAEH,GAAGC,EAEH,SAAAG,EAAmBK,EAAU,CAACA,EAAUE,IACrCC,EAAAC,EAAA,CACI,SAAA,CAAAX,EAAC,OAAA,CAAK,UAAU,6DACX,SAAAS,EAAY,YACTC,EAAAC,EAAA,CACK,SAAA,CAAAF,EAAY,eAAiB,UAAYT,EAACY,EAAA,CAAM,UAAU,yBAAyB,EACnFH,EAAY,eAAiB,YAAcT,EAACa,EAAA,CAAQ,UAAU,WAAA,CAAY,CAAA,CAAA,CAC/E,CAAA,CAER,EAECN,EAEAE,EAAY,YAAcT,EAACc,EAAA,CAAQ,UAAU,mBAAA,CAAoB,CAAA,EACtE,CACH,CAAA,CAAA,CAGb,CAOO,SAASC,EAAW,CAAE,UAAAjB,EAAW,MAAAkB,EAAO,UAAAC,EAAY,GAAM,GAAGlB,GAA0B,CAC1F,OACIC,EAACkB,EAAA,CACG,UAAWf,EACP,iCACAa,GAAS,WACTC,GAAa,6CACbnB,CAAA,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASoB,EAAc,CAAE,UAAArB,EAAW,GAAGC,GAA6B,CACvE,OAAOC,EAACoB,GAAc,UAAWjB,EAAW,2BAA4BL,CAAS,EAAI,GAAGC,EAAO,CACnG,CAEO,SAASsB,EAAa,CAAE,UAAAvB,EAAW,GAAGC,GAAoD,CAC7F,OAAOC,EAACsB,GAAa,UAAWnB,EAAW,6CAA8CL,CAAS,EAAI,GAAGC,EAAO,CACpH,CAWO,SAASwB,EAA2B,CACvC,MAAAC,EACA,SAAAjB,EACA,QAAAkB,EACA,WAAAC,EACA,KAAAC,EACA,WAAAC,EACA,GAAAC,EACA,GAAG9B,CACP,EAAiB,CACb,OACIW,EAACnB,EAAA,CAAa,GAAGQ,EACb,SAAA,CAAAC,EAAC8B,EAAA,CAAc,GAAAD,EAAQ,WAAAH,EAAwB,UAAW,CAAC,CAAC3B,EAAM,UAAW,QAAA0B,EAAkB,KAAAE,EAC1F,SAAAH,CAAA,CACL,EACAxB,EAACH,GAAY,UAAU,gBACnB,WAACO,EAAA,CAAM,GAAGL,EAAQ,SAAAQ,CAAA,CAAS,CAAA,CAC/B,CAAA,EACJ,CAER"}
+{"version":3,"file":"menu.js","sources":["../../lib/components/menu.tsx"],"sourcesContent":["import { VariantProps } from 'class-variance-authority';\nimport {\n    Header as AriaHeader,\n    Keyboard as AriaKeyboard,\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    MenuItemProps as AriaMenuItemProps,\n    MenuProps as AriaMenuProps,\n    MenuTrigger as AriaMenuTrigger,\n    MenuTriggerProps as AriaMenuTriggerProps,\n    Separator as AriaSeparator,\n    SeparatorProps as AriaSeparatorProps,\n    SubmenuTrigger as AriaSubmenuTrigger,\n    composeRenderProps,\n    PopoverProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nimport { buttonVariants } from './button';\nimport { IcCheck, IcDot, IcRight } from './icons';\nimport { ListBoxCollection } from './list-box';\nimport { SelectPopover, SelectTrigger } from './select';\n\nexport const MenuTrigger = AriaMenuTrigger;\nexport const MenuSubTrigger = AriaSubmenuTrigger;\nexport const MenuCollection = ListBoxCollection;\n\nexport function MenuPopover({ className, ...props }: PopoverProps) {\n    return <SelectPopover className={composeRenderProps(className, className => classNames(className))} {...props} />;\n}\n\nexport function Menu<T extends object>({ className, ...props }: AriaMenuProps<T>) {\n    return (\n        <AriaMenu\n            className={classNames('overflow-auto p-1 outline-0 body-base', className)}\n            escapeKeyBehavior=\"none\"\n            {...props}\n        />\n    );\n}\n\nexport function MenuItem({ children, className, ...props }: AriaMenuItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n    return (\n        <AriaMenuItem\n            textValue={props.textValue || (typeof children === 'string' ? children : undefined)}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'btn btn-ghost relative flex justify-start input-dim',\n                    /* Selection Mode */\n                    'data-[selection-mode]:pl-input',\n                    className\n                )\n            )}\n            {...props}\n        >\n            {composeRenderProps(children, (children, renderProps) => (\n                <>\n                    <span className=\"absolute left-2 flex size-icon items-center justify-center\">\n                        {renderProps.isSelected && (\n                            <>\n                                {renderProps.selectionMode == 'single' && <IcDot className=\"size-icon fill-current\" />}\n                                {renderProps.selectionMode == 'multiple' && <IcCheck className=\"size-icon\" />}\n                            </>\n                        )}\n                    </span>\n\n                    {children}\n\n                    {renderProps.hasSubmenu && <IcRight className=\"ml-auto size-icon\" />}\n                </>\n            ))}\n        </AriaMenuItem>\n    );\n}\n\ninterface MenuHeaderProps extends React.ComponentProps<typeof AriaHeader> {\n    inset?: boolean;\n    separator?: boolean;\n}\n\nexport function MenuHeader({ className, inset, separator = true, ...props }: MenuHeaderProps) {\n    return (\n        <AriaHeader\n            className={classNames(\n                'px-3 py-1.5 body font-semibold',\n                inset && 'pl-input',\n                separator && '-mx-1 mb-1 border-b border-b-border pb-2.5',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function MenuSeparator({ className, ...props }: AriaSeparatorProps) {\n    return <AriaSeparator className={classNames('-mx-1 my-1 h-px bg-muted', className)} {...props} />;\n}\n\nexport function MenuKeyboard({ className, ...props }: React.ComponentProps<typeof AriaKeyboard>) {\n    return <AriaKeyboard className={classNames('ml-auto body-sm tracking-widest opacity-60', className)} {...props} />;\n}\ninterface MenuProps<T>\n    extends AriaMenuProps<T>,\n        VariantProps<typeof buttonVariants>,\n        Omit<AriaMenuTriggerProps, 'children'> {\n    label?: React.ReactNode;\n    isDisabled?: boolean;\n    isNonModal?: boolean;\n    id?: string;\n}\n// TODO name this better\nexport function EasyMenu<T extends object>({\n    label,\n    children,\n    variant,\n    isDisabled,\n    size,\n    isNonModal,\n    id,\n    'aria-label': ariaLabel = 'Menu',\n    ...props\n}: MenuProps<T>) {\n    return (\n        <MenuTrigger {...props}>\n            <SelectTrigger\n                id={id}\n                isDisabled={isDisabled}\n                autoFocus={!!props.autoFocus}\n                variant={variant}\n                size={size}\n                aria-label={ariaLabel}\n            >\n                {label}\n            </SelectTrigger>\n            <MenuPopover className=\"overflow-auto\">\n                <Menu {...props}>{children}</Menu>\n            </MenuPopover>\n        </MenuTrigger>\n    );\n}\n"],"names":["MenuTrigger","AriaMenuTrigger","MenuSubTrigger","AriaSubmenuTrigger","MenuCollection","ListBoxCollection","MenuPopover","className","props","jsx","SelectPopover","composeRenderProps","classNames","Menu","AriaMenu","MenuItem","children","AriaMenuItem","renderProps","jsxs","Fragment","IcDot","IcCheck","IcRight","MenuHeader","inset","separator","AriaHeader","MenuSeparator","AriaSeparator","MenuKeyboard","AriaKeyboard","EasyMenu","label","variant","isDisabled","size","isNonModal","id","ariaLabel","SelectTrigger"],"mappings":"4qBAwBO,MAAMA,EAAcC,EACdC,EAAiBC,EACjBC,EAAiBC,EAEvB,SAASC,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAAuB,CAC/D,OAAOC,EAACC,EAAA,CAAc,UAAWC,EAAmBJ,EAAWA,GAAaK,EAAWL,CAAS,CAAC,EAAI,GAAGC,CAAA,CAAO,CACnH,CAEO,SAASK,EAAuB,CAAE,UAAAN,EAAW,GAAGC,GAA2B,CAC9E,OACIC,EAACK,EAAA,CACG,UAAWF,EAAW,wCAAyCL,CAAS,EACxE,kBAAkB,OACjB,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASO,EAAS,CAAE,SAAAC,EAAU,UAAAT,EAAW,GAAGC,GAAkE,CACjH,OACIC,EAACQ,EAAA,CACG,UAAWT,EAAM,YAAc,OAAOQ,GAAa,SAAWA,EAAW,QACzE,UAAWL,EAAmBJ,EAAWA,GACrCK,EACI,sDAEA,iCACAL,CAAA,CACJ,EAEH,GAAGC,EAEH,SAAAG,EAAmBK,EAAU,CAACA,EAAUE,IACrCC,EAAAC,EAAA,CACI,SAAA,CAAAX,EAAC,OAAA,CAAK,UAAU,6DACX,SAAAS,EAAY,YACTC,EAAAC,EAAA,CACK,SAAA,CAAAF,EAAY,eAAiB,UAAYT,EAACY,EAAA,CAAM,UAAU,yBAAyB,EACnFH,EAAY,eAAiB,YAAcT,EAACa,EAAA,CAAQ,UAAU,WAAA,CAAY,CAAA,CAAA,CAC/E,CAAA,CAER,EAECN,EAEAE,EAAY,YAAcT,EAACc,EAAA,CAAQ,UAAU,mBAAA,CAAoB,CAAA,EACtE,CACH,CAAA,CAAA,CAGb,CAOO,SAASC,EAAW,CAAE,UAAAjB,EAAW,MAAAkB,EAAO,UAAAC,EAAY,GAAM,GAAGlB,GAA0B,CAC1F,OACIC,EAACkB,EAAA,CACG,UAAWf,EACP,iCACAa,GAAS,WACTC,GAAa,6CACbnB,CAAA,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASoB,EAAc,CAAE,UAAArB,EAAW,GAAGC,GAA6B,CACvE,OAAOC,EAACoB,GAAc,UAAWjB,EAAW,2BAA4BL,CAAS,EAAI,GAAGC,EAAO,CACnG,CAEO,SAASsB,EAAa,CAAE,UAAAvB,EAAW,GAAGC,GAAoD,CAC7F,OAAOC,EAACsB,GAAa,UAAWnB,EAAW,6CAA8CL,CAAS,EAAI,GAAGC,EAAO,CACpH,CAWO,SAASwB,EAA2B,CACvC,MAAAC,EACA,SAAAjB,EACA,QAAAkB,EACA,WAAAC,EACA,KAAAC,EACA,WAAAC,EACA,GAAAC,EACA,aAAcC,EAAY,OAC1B,GAAG/B,CACP,EAAiB,CACb,OACIW,EAACnB,EAAA,CAAa,GAAGQ,EACb,SAAA,CAAAC,EAAC+B,EAAA,CACG,GAAAF,EACA,WAAAH,EACA,UAAW,CAAC,CAAC3B,EAAM,UACnB,QAAA0B,EACA,KAAAE,EACA,aAAYG,EAEX,SAAAN,CAAA,CAAA,EAELxB,EAACH,GAAY,UAAU,gBACnB,WAACO,EAAA,CAAM,GAAGL,EAAQ,SAAAQ,CAAA,CAAS,CAAA,CAC/B,CAAA,EACJ,CAER"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "6.6.6-alpha33",
+  "version": "6.6.6-alpha35",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",