@cryptlex/web-components 6.6.6-alpha59 → 6.6.6-alpha61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/data-table.js +1 -1
  2. package/dist/components/data-table.js.map +1 -1
  3. package/dist/components/form.js +1 -1
  4. package/dist/components/form.js.map +1 -1
  5. package/package.json +1 -1
package/dist/components/data-table.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t,Fragment as C,jsxs as u}from"react/jsx-runtime";import{createContext as de,useState as I,useMemo as me,useEffect as ge,useContext as fe,useRef as pe}from"react";import{Button as y}from"./button.js";import{useSensors as be,useSensor as q,PointerSensor as he,KeyboardSensor as Se,DndContext as ye,closestCenter as ve,DragOverlay as Ce}from"@dnd-kit/core";import{sortableKeyboardCoordinates as xe,SortableContext as we,verticalListSortingStrategy as Te,arrayMove as Ne,useSortable as Ie}from"@dnd-kit/sortable";import{CSS as Fe}from"@dnd-kit/utilities";import{useQuery as Ae}from"@tanstack/react-query";import{createColumnHelper as Z,useReactTable as De,getCoreRowModel as Pe,flexRender as O}from"@tanstack/react-table";import{useLocalStorage as V}from"@uidotdev/usehooks";import{merge as Re}from"lodash-es";import{Badge as ze}from"./badge.js";import{TfDatePicker as Oe}from"./date-picker.js";import{EasyMenu as P,MenuItem as F}from"./menu.js";import{PopoverTrigger as Me,Popover as _e}from"./popover.js";import{useAppForm as Le}from"../utilities/form-hook.js";import{useResourceFormatter as _}from"../utilities/resources.js";import{classNames as v}from"../utilities/theme.js";import{IcInfo as $e,IcMoreVertical as je,IcRefresh as Ee,IcColumns as qe,IcGrip as Ve,IcFirst as He,IcLeft as ke,IcRight as Be,IcLast as Ue,IcSortAsc as Ke,IcSortDesc as Qe,IcSortNone as Ge,IcFilter as Xe,IcRemove as H,IcCheck as k,IcMinus as Ze,IcAccount as Je,IcLicense as We,IcDate as Ye,IcFile as et}from"./icons.js";import{TfMultipleIdSearchInput as tt}from"./id-search.js";import{Loader as nt}from"./loader.js";import{SearchField as rt}from"./searchfield.js";import{Table as ot,TableHeader as at,TableRow as B,TableHead as it,TableBody as lt,TableCell as st}from"./table.js";import{CountryName as ct}from"../utilities/countries.js";import{formatDate as ut}from"../utilities/date.js";import{formatDays as dt,formatFilesize as mt,formatNumber as gt}from"../utilities/numbers.js";import{Checkbox as U}from"./checkbox.js";import{useCtxClient as ft}from"../utilities/ctx-client.js";import{ControlledDialogProvider as pt,useControlledDialog as J}from"./dialog.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"../utilities/empty-option.js";import"./select-options.js";import"zod";import"../utilities/duration.js";function bt(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const W=Z(),ht=[W.accessor("checkbox",{header:({table:e})=>t(U,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:e})=>t(U,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],w="TableActions";function St(e){return e.length===0?[]:[W.accessor(w,{header:"Actions",id:w,enableHiding:!1,cell:({row:r})=>t(It,{label:t(je,{}),data:r.original,items:e}),enableSorting:!1})]}function In(){return Z()}function Fn({path:e,pathParameters:r,columns:n,filterConfig:l,columnsToHideByDefault:a={},allowSelection:d=!1,initialFilters:s=[],tableActions:o}){const[p,g]=I({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:S,pagination:m}=p,[c,b]=I(""),[f,h]=I({}),[A,re]=I(s),oe=me(()=>A.map(i=>Array.isArray(i.value)?{[i.property]:{[i.operator]:i.value.join(",")}}:{[i.property]:{[i.operator]:i.value}}).reduce((i,N)=>Re(i,N),{}),[A]),ae={...A,page:m.pageIndex+1,limit:m.pageSize,sort:bt(S[0]),search:c},ie=ft(),R=["get",e],[L,$]=V(`${R.join("")}_ctx_column_order_preference`,[]),[j,le]=V(`${R.join("")}_ctx_column_visibility_preference`,{id:!1,...a}),z=i=>{g(N=>({...N,...i}))},D=Ae({queryKey:R,queryFn:async()=>{const i=await ie.GET(e,{params:{query:ae,path:r}});return{data:i.data??[],total:Number.parseInt(i.response.headers.get("Pagination-Count")||"0")}}}),se=o.filter(te),ce=[...d?ht:[],...n,...St(se??[])];function ue(i){return typeof i=="function"}function T(i,N){return ue(i)?i(N):i}const E=De({data:D.data?.data??[],columns:ce,getCoreRowModel:Pe(),rowCount:D.data?.total??0,manualPagination:!0,onPaginationChange:i=>{z({pagination:T(i,m)})},manualSorting:!0,onSortingChange:i=>{h({}),z({sorting:[...T(i,S)]})},manualFiltering:!0,onColumnVisibilityChange:i=>{le(T(i,j))},onRowSelectionChange:i=>{h(T(i,f))},onColumnOrderChange:i=>{$(T(i,L))},state:{sorting:S,columnVisibility:j,pagination:m,rowSelection:f,columnOrder:L},meta:{refetch:D.refetch}});return ge(()=>{$([...E.getAllLeafColumns().map(i=>i.id)])},[]),{tableState:p,updateTableState:z,query:D,setSearchQuery:b,searchQuery:c,tanTable:E,mergedFilters:oe,filters:A,setFilters:re,filterConfig:l,tableActions:o}}const Y=de(null);function x(){const e=fe(Y);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function An({children:e,...r}){return t(Y.Provider,{value:r,children:e})}function Dn({className:e,...r}){const{query:n,tanTable:l}=x();return t(C,{children:t(pt,{children:u("section",{...r,className:v("flex flex-col bg-elevation-1",e),children:[t(xt,{}),u("div",{className:"w-full overflow-auto border-x h-table relative",tabIndex:0,children:[n.isLoading&&t(K,{className:"cursor-wait",children:t(nt,{})}),!n.isLoading&&l.getRowModel().rows.length===0&&t(K,{className:"cursor-not-allowed",children:!n.isFetching&&(n.isError?u("span",{className:"flex gap-3 justify-center items-center",children:[t($e,{}),t("span",{children:n.error.message})]}):n.data?.data?.length===0?t(C,{children:"No results found."}):t(C,{children:"Unknown error. Please contact customer support."}))}),!n.isLoading&&l.getRowModel().rows.length!==0&&t(Tt,{className:"w-full"})]}),u("div",{className:"flex w-full justify-between border gap-icon p-icon overflow-x-auto",children:[u("div",{className:"flex gap-icon",children:[t(yt,{}),t(Ct,{})]}),t(vt,{})]})]})})})}function K({children:e,className:r}){return u(C,{children:[t("span",{className:v(r,"absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center"),children:e}),t("span",{className:"relative h-full w-0 block"})]})}function yt(){const{tanTable:e}=x(),[r,n]=I(null),l=_(),a=be(q(he),q(Se,{coordinateGetter:xe}));return t(ye,{sensors:a,collisionDetection:ve,onDragStart:s=>{const{active:o}=s;n(o.id.toString())},onDragEnd:s=>{const{active:o,over:p}=s;if(p&&o.id!==p.id){const g=e.getState().columnOrder,S=g.indexOf(o.id.toString()),m=g.indexOf(p.id.toString());e.setColumnOrder([...Ne(g,S,m)])}n(null)},children:u(we,{items:e.getState().columnOrder,strategy:Te,children:[u(P,{label:u(C,{children:[t(qe,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(s=>s.id),children:[t(F,{onAction:()=>e.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),e.getState().columnOrder.map(s=>{const o=e.getAllFlatColumns().find(p=>p.id===s);return!o||o.id==="checkbox"||o.id===w?null:t(d,{column:o},o.id)})]}),t(Ce,{children:r?t("div",{className:"opacity-70 border-2 border-primary",children:l(r)}):null})]})});function d({column:s}){const{attributes:o,listeners:p,setNodeRef:g,transform:S,transition:m}=Ie({id:s.id}),c={transform:Fe.Transform.toString(S),transition:m,zIndex:"999"};return u(F,{ref:g,style:c,...o,id:s.id,onAction:()=>s.toggleVisibility(),isDisabled:!s.getCanHide(),className:"flex items-center",children:[t(Ve,{...p,className:"size-icon cursor-grab"}),M(s),s.getIsSorted()&&t(ee,{className:"size-icon",direction:s.getIsSorted()})]})}}function vt(){const{tanTable:e}=x(),r=e.getRowCount();return u("div",{className:"flex items-center gap-2",children:[t("span",{className:"whitespace-nowrap body-sm text-muted",children:`${e.getState().pagination.pageIndex*e.getState().pagination.pageSize+1} - ${Math.min((e.getState().pagination.pageIndex+1)*e.getState().pagination.pageSize,r)} of ${r?.toLocaleString()}`}),t(y,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(He,{})}),t(y,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(ke,{})}),t(y,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Be,{})}),t(y,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Ue,{})})]})}function Ct(){const{tanTable:e}=x(),r=[10,20,30,40,50];return t(P,{label:e.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[e.getState().pagination.pageSize.toString()],items:r.map(n=>({id:n.toString(),value:n})),children:n=>t(F,{onAction:()=>e.setPageSize(n.value),children:n.value})})}function xt(){const{query:e,tanTable:r,searchQuery:n,setSearchQuery:l,tableActions:a}=x(),d=r.getSelectedRowModel().rows.length>0,s=a.filter(o=>o.resourceType!=="single").filter(o=>o.resourceType==="multiple"===d);return u("section",{className:"flex bg-elevation-1 justify-between my-0 p-icon border gap-icon overflow-auto",children:[u("div",{className:"flex gap-icon",children:[t(y,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",children:t(Ee,{})}),t(Nt,{items:s,isFetching:e.isFetching})]}),u("div",{className:"flex gap-icon",children:[t(Dt,{}),t(rt,{value:n,onChange:l})]})]})}function ee({direction:e,...r}){return e==="asc"?t(Ke,{className:"size-3.5",...r}):e==="desc"?t(Qe,{className:"size-3.5",...r}):t(Ge,{className:"size-3.5",...r})}function M(e){const r=_(),n=e.columnDef.header;return typeof n=="string"?n:r(e.id)}function wt(e){const r=e.column.columnDef.meta?.displayType,n=e.getValue();if(n==null)return null;switch(r){case"date":return ut(n);case"number":return gt(n);case"boolean":case"badge":return t(ze,{className:"uppercase w-full",children:String(n)});case"country":return t(ct,{value:n});case"enum":return t("span",{className:"uppercase w-full",children:String(n)});case"fileSize":return mt(n);case"days":return dt(n);default:return String(n)}}function Q({header:e}){const r=e.column.columnDef.header;return typeof r=="string"||!r?M(e.column):typeof r=="function"?typeof r(e.getContext())=="string"?M(e.column):O(r,e.getContext()):O(r,e.getContext())}function Tt({className:e}){const{tanTable:r}=x(),n=(l,a,d="z-50")=>v("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",l&&`bg-elevation-1 sticky right-0 ${d} text-center justify-center`,a);return u(ot,{className:v("table-auto",e),children:[t(at,{className:"sticky top-0 z-10",children:r.getHeaderGroups().map(l=>t(B,{children:l.headers.map(a=>u(it,{scope:"col",colSpan:a.colSpan,className:n(a.id===w,"bg-elevation-1"),children:[!a.column.getCanSort()&&!a.isPlaceholder&&t("div",{className:v("w-full py-1 inline-flex items-center gap-1 body-sm",a.id===w?"justify-center":"justify-start"),children:t(Q,{header:a})}),a.column.getCanSort()&&u(y,{variant:"ghost",className:v("w-full p-1",a.id===w?"justify-center":"justify-start"),onPress:a.column.getToggleSortingHandler(),children:[t("span",{children:t(Q,{header:a})}),t(ee,{direction:a.column.getIsSorted()})]})]},a.id))},l.id))}),t(lt,{children:r.getRowModel().rows.map(l=>t(B,{className:v("transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":l.getIsSelected(),children:l.getVisibleCells().map(a=>{const d=a.column.id===w,s=a.column.columnDef.meta?.displayType?wt(a):O(a.column.columnDef.cell,a.getContext());return t(st,{className:v(n(d,void 0,"z-1"),d&&"flex justify-center items-center"),children:s},a.id)})},l.id))})]})}function G(e){return e.resourceType==="none"}function te(e){return e.resourceType==="single"}function X(e){return e.resourceType==="multiple"}function Nt({items:e,isFetching:r}){const{openDialog:n,closeDialog:l}=J(),{tanTable:a}=x();function d(o,p){return o.isDisabled?G(o)?o.isDisabled():X(o)?o.isDisabled(p):!1:!1}const s=a.getSelectedRowModel().rows.map(o=>o.original);return t(C,{children:e.map((o,p)=>{const g=o.icon,S=d(o,s)||r;return u(y,{"aria-label":o.label,type:"button",isDisabled:S,className:"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform",onPress:m=>{const c={event:m,openDialog:n,closeDialog:l};G(o)?o.onPress(c):X(o)&&o.onPress({...c,data:s})},variant:o.variant??"neutral",children:[g&&t(g,{"aria-hidden":!0}),t("span",{children:o.label})]},`${o.label}-${p}`)})})}function It({label:e,items:r,data:n}){const{openDialog:l,closeDialog:a}=J();return t(P,{"aria-label":"Actions",label:e,size:"icon",children:r.map(d=>{const s=d.icon;return u(F,{id:d.label,isDisabled:d.isDisabled?.(n)??!1,onAction:()=>{const o={openDialog:l,closeDialog:a};te(d)&&d.onPress({...o,data:n})},children:[t(s,{className:"size-icon"}),d.label]},d.label)})})}const Pn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],Ft={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 At(e,r){const n=`${r}-${Date.now()}`,l=ne[e][0];switch(e){case"bool":return{id:n,type:e,property:r,operator:l,value:!0};case"string":return{id:n,type:e,property:r,operator:l,value:""};case"date":return{id:n,type:e,property:r,operator:l,value:new Date().toISOString()};case"id":return{id:n,type:e,property:r,operator:l,value:""};case"id-search":return{id:n,type:e,property:r,operator:l,value:[]};case"enum":return{id:n,type:e,property:r,operator:l,value:new Set};case"number":return{id:n,type:e,property:r,operator:l,value:0}}}const ne={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 Dt({className:e,...r}){const{filters:n,query:l,setFilters:a,filterConfig:d}=x(),s=pe(null),o=_(),g=Le({defaultValues:{filters:n},onSubmit:({value:m})=>{a(m.filters)}}),S=Object.keys(d).sort();return t("section",{...r,className:v("flex gap-icon items-center",e),children:u(Me,{onOpenChange:m=>{m?s.current?.focus():g.handleSubmit()},children:[u("div",{className:"relative",children:[n.length>0&&t("div",{className:"size-2 rounded-full absolute bg-primary/90 z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5"}),t(y,{"aria-label":"Filter",isDisabled:l.isPending||S.length===0,type:"button",size:"icon",variant:"neutral",children:t(Xe,{})})]}),t(_e,{className:"w-full p-icon",children:t("form",{onSubmit:m=>{m.preventDefault()},className:"flex flex-col gap-icon max-h-table overflow-auto ",children:t(g.Field,{mode:"array",name:"filters",children:m=>u(C,{children:[m.state.value.map((c,b)=>u("div",{className:"flex gap-icon items-center justify-normal",children:[t("span",{className:"body-sm",children:o(c.property)}),t(g.AppField,{name:`filters[${b}].operator`,children:f=>t(f.TfSingleSelect,{items:ne[c.type].map(h=>({id:h,label:t(C,{children:Ft[h]})}))})},c.id),c.type==="bool"&&t(g.AppField,{name:`filters[${b}].value`,children:f=>t(f.TfCheckbox,{autoFocus:!0})}),c.type==="date"&&t(g.AppField,{name:`filters[${b}].value`,children:f=>t(Oe,{autoFocus:!0})}),c.type==="id"&&t(g.AppField,{name:`filters[${b}].value`,children:f=>t(f.TfTextField,{autoFocus:!0})}),c.type==="string"&&t(g.AppField,{name:`filters[${b}].value`,children:f=>t(f.TfTextField,{autoFocus:!0})}),c.type==="number"&&t(g.AppField,{name:`filters[${b}].value`,children:f=>t(f.TfNumberField,{autoFocus:!0})}),c.type==="enum"&&t(g.AppField,{name:`filters[${b}].value`,children:f=>{const h=d[c.property];return h.type!=="enum"?null:t(f.TfMultiSelect,{items:h.options})}}),c.type==="id-search"&&t(g.AppField,{name:`filters[${b}].value`,children:f=>{const h=d[c.property];return h.type!=="id-search"?null:t(tt,{path:h.path,accessor:h.accessor})}}),t(y,{type:"button",variant:"neutral",size:"icon",onPress:()=>m.removeValue(b),children:t(H,{})})]},c.id)),u("div",{className:"flex w-full items-center justify-end gap-2 not-first:mt-icon",children:[t(P,{label:"Add filter",autoFocus:!0,children:S.sort().map(c=>{const b=d[c].type,f=Pt[b];return u(F,{onAction:()=>{const h=At(b,c);m.pushValue(h)},children:[o(c),t(f,{})]},c)})}),m.state.value.length>0?u(y,{type:"button",variant:"neutral",onPress:()=>{m.setValue([])},children:[t(H,{}),"Reset"]}):null]})]})})})})]})})}const Pt={"id-search":et,bool:k,date:Ye,enum:We,id:Je,number:Ze,string:k};export{Ft as C,Dt as D,Dn as DataTable,Y as DataTableContext,An as DataTableProvider,Pn as F,In as getColumnHelper,x as useDataTable,Fn as useDataTableState};
1
+ "use client";import{jsx as t,Fragment as C,jsxs as u}from"react/jsx-runtime";import{createContext as de,useState as F,useMemo as me,useEffect as ge,useContext as pe,useRef as fe}from"react";import{Button as y}from"./button.js";import{useSensors as he,useSensor as H,PointerSensor as be,KeyboardSensor as Se,DndContext as ye,closestCenter as ve,DragOverlay as Ce}from"@dnd-kit/core";import{sortableKeyboardCoordinates as xe,SortableContext as we,verticalListSortingStrategy as Te,arrayMove as Ne,useSortable as Ie}from"@dnd-kit/sortable";import{CSS as Fe}from"@dnd-kit/utilities";import{useQuery as Ae}from"@tanstack/react-query";import{createColumnHelper as W,useReactTable as De,getCoreRowModel as Pe,flexRender as M}from"@tanstack/react-table";import{useLocalStorage as k}from"@uidotdev/usehooks";import{merge as Re}from"lodash-es";import{Badge as ze}from"./badge.js";import{TfDatePicker as Oe}from"./date-picker.js";import{EasyMenu as R,MenuItem as A}from"./menu.js";import{PopoverTrigger as Me,Popover as _e}from"./popover.js";import{useAppForm as Le}from"../utilities/form-hook.js";import{useResourceFormatter as L}from"../utilities/resources.js";import{classNames as v}from"../utilities/theme.js";import{IcInfo as $e,IcMoreVertical as je,IcRefresh as Ee,IcColumns as qe,IcGrip as Ve,IcFirst as He,IcLeft as ke,IcRight as Be,IcLast as Ue,IcSortAsc as Ke,IcSortDesc as Qe,IcSortNone as Ge,IcFilter as Xe,IcRemove as B,IcCheck as U,IcMinus as Ze,IcAccount as Je,IcLicense as We,IcDate as Ye,IcFile as et}from"./icons.js";import{TfMultipleIdSearchInput as tt}from"./id-search.js";import{Loader as nt}from"./loader.js";import{SearchField as rt}from"./searchfield.js";import{Table as ot,TableHeader as at,TableRow as K,TableHead as it,TableBody as lt,TableCell as st}from"./table.js";import{CountryName as ct}from"../utilities/countries.js";import{formatDate as ut}from"../utilities/date.js";import{formatDays as dt,formatFilesize as mt,formatNumber as gt}from"../utilities/numbers.js";import{Checkbox as Q}from"./checkbox.js";import{useCtxClient as pt}from"../utilities/ctx-client.js";import{ControlledDialogProvider as ft,useControlledDialog as Y}from"./dialog.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"../utilities/empty-option.js";import"./select-options.js";import"zod";import"../utilities/duration.js";function ht(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const ee=W(),bt=[ee.accessor("checkbox",{header:({table:e})=>t(Q,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:e})=>t(Q,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],w="TableActions";function St(e){return e.length===0?[]:[ee.accessor(w,{header:"Actions",id:w,enableHiding:!1,cell:({row:r})=>t(It,{label:t(je,{}),data:r.original,items:e}),enableSorting:!1})]}function In(){return W()}function Fn({path:e,pathParameters:r,columns:n,filterConfig:l,columnsToHideByDefault:a={},allowSelection:d=!1,initialFilters:s=[],tableActions:o}){const[f,g]=F({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:S,pagination:m}=f,[c,h]=F(""),[p,b]=F({}),[D,ae]=F(s),$=me(()=>D.map(i=>Array.isArray(i.value)?{[i.property]:{[i.operator]:i.value.join(",")}}:{[i.property]:{[i.operator]:i.value}}).reduce((i,I)=>Re(i,I),{}),[D]),T={...D,page:m.pageIndex+1,limit:m.pageSize,sort:ht(S[0]),search:c},ie=pt(),z=["get",e,T],[j,E]=k(`${z.join("")}_ctx_column_order_preference`,[]),[q,le]=k(`${z.join("")}_ctx_column_visibility_preference`,{id:!1,...a}),O=i=>{g(I=>({...I,...i}))},P=Ae({queryKey:z,queryFn:async()=>{const i=await ie.GET(e,{params:{query:{page:T.page,limit:T.limit,sort:T.sort,search:T.search,...$},path:r}});return{data:i.data??[],total:Number.parseInt(i.response.headers.get("Pagination-Count")||"0")}}}),se=o.filter(re),ce=[...d?bt:[],...n,...St(se??[])];function ue(i){return typeof i=="function"}function N(i,I){return ue(i)?i(I):i}const V=De({data:P.data?.data??[],columns:ce,getCoreRowModel:Pe(),rowCount:P.data?.total??0,manualPagination:!0,onPaginationChange:i=>{O({pagination:N(i,m)})},manualSorting:!0,onSortingChange:i=>{b({}),O({sorting:[...N(i,S)]})},manualFiltering:!0,onColumnVisibilityChange:i=>{le(N(i,q))},onRowSelectionChange:i=>{b(N(i,p))},onColumnOrderChange:i=>{E(N(i,j))},state:{sorting:S,columnVisibility:q,pagination:m,rowSelection:p,columnOrder:j},meta:{refetch:P.refetch}});return ge(()=>{E([...V.getAllLeafColumns().map(i=>i.id)])},[]),{tableState:f,updateTableState:O,query:P,setSearchQuery:h,searchQuery:c,tanTable:V,mergedFilters:$,filters:D,setFilters:ae,filterConfig:l,tableActions:o}}const te=de(null);function x(){const e=pe(te);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function An({children:e,...r}){return t(te.Provider,{value:r,children:e})}function Dn({className:e,...r}){const{query:n,tanTable:l}=x();return t(C,{children:t(ft,{children:u("section",{...r,className:v("flex flex-col bg-elevation-1",e),children:[t(xt,{}),u("div",{className:"w-full overflow-auto border-x h-table relative",tabIndex:0,children:[n.isLoading&&t(G,{className:"cursor-wait",children:t(nt,{})}),!n.isLoading&&l.getRowModel().rows.length===0&&t(G,{className:"cursor-not-allowed",children:!n.isFetching&&(n.isError?u("span",{className:"flex gap-3 justify-center items-center",children:[t($e,{}),t("span",{children:n.error.message})]}):n.data?.data?.length===0?t(C,{children:"No results found."}):t(C,{children:"Unknown error. Please contact customer support."}))}),!n.isLoading&&l.getRowModel().rows.length!==0&&t(Tt,{className:"w-full"})]}),u("div",{className:"flex w-full justify-between border gap-icon p-icon overflow-x-auto",children:[u("div",{className:"flex gap-icon",children:[t(yt,{}),t(Ct,{})]}),t(vt,{})]})]})})})}function G({children:e,className:r}){return u(C,{children:[t("span",{className:v(r,"absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center"),children:e}),t("span",{className:"relative h-full w-0 block"})]})}function yt(){const{tanTable:e}=x(),[r,n]=F(null),l=L(),a=he(H(be),H(Se,{coordinateGetter:xe}));return t(ye,{sensors:a,collisionDetection:ve,onDragStart:s=>{const{active:o}=s;n(o.id.toString())},onDragEnd:s=>{const{active:o,over:f}=s;if(f&&o.id!==f.id){const g=e.getState().columnOrder,S=g.indexOf(o.id.toString()),m=g.indexOf(f.id.toString());e.setColumnOrder([...Ne(g,S,m)])}n(null)},children:u(we,{items:e.getState().columnOrder,strategy:Te,children:[u(R,{label:u(C,{children:[t(qe,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(s=>s.id),children:[t(A,{onAction:()=>e.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),e.getState().columnOrder.map(s=>{const o=e.getAllFlatColumns().find(f=>f.id===s);return!o||o.id==="checkbox"||o.id===w?null:t(d,{column:o},o.id)})]}),t(Ce,{children:r?t("div",{className:"opacity-70 border-2 border-primary",children:l(r)}):null})]})});function d({column:s}){const{attributes:o,listeners:f,setNodeRef:g,transform:S,transition:m}=Ie({id:s.id}),c={transform:Fe.Transform.toString(S),transition:m,zIndex:"999"};return u(A,{ref:g,style:c,...o,id:s.id,onAction:()=>s.toggleVisibility(),isDisabled:!s.getCanHide(),className:"flex items-center",children:[t(Ve,{...f,className:"size-icon cursor-grab"}),_(s),s.getIsSorted()&&t(ne,{className:"size-icon",direction:s.getIsSorted()})]})}}function vt(){const{tanTable:e}=x(),r=e.getRowCount();return u("div",{className:"flex items-center gap-2",children:[t("span",{className:"whitespace-nowrap body-sm text-muted",children:`${e.getState().pagination.pageIndex*e.getState().pagination.pageSize+1} - ${Math.min((e.getState().pagination.pageIndex+1)*e.getState().pagination.pageSize,r)} of ${r?.toLocaleString()}`}),t(y,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(He,{})}),t(y,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(ke,{})}),t(y,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Be,{})}),t(y,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Ue,{})})]})}function Ct(){const{tanTable:e}=x(),r=[10,20,30,40,50];return t(R,{label:e.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[e.getState().pagination.pageSize.toString()],items:r.map(n=>({id:n.toString(),value:n})),children:n=>t(A,{onAction:()=>e.setPageSize(n.value),children:n.value})})}function xt(){const{query:e,tanTable:r,searchQuery:n,setSearchQuery:l,tableActions:a}=x(),d=r.getSelectedRowModel().rows.length>0,s=a.filter(o=>o.resourceType!=="single").filter(o=>o.resourceType==="multiple"===d);return u("section",{className:"flex bg-elevation-1 justify-between my-0 p-icon border gap-icon overflow-auto",children:[u("div",{className:"flex gap-icon",children:[t(y,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",children:t(Ee,{})}),t(Nt,{items:s,isFetching:e.isFetching})]}),u("div",{className:"flex gap-icon",children:[t(Dt,{}),t(rt,{value:n,onChange:l})]})]})}function ne({direction:e,...r}){return e==="asc"?t(Ke,{className:"size-3.5",...r}):e==="desc"?t(Qe,{className:"size-3.5",...r}):t(Ge,{className:"size-3.5",...r})}function _(e){const r=L(),n=e.columnDef.header;return typeof n=="string"?n:r(e.id)}function wt(e){const r=e.column.columnDef.meta?.displayType,n=e.getValue();if(n==null)return null;switch(r){case"date":return ut(n);case"number":return gt(n);case"boolean":case"badge":return t(ze,{className:"uppercase w-full",children:String(n)});case"country":return t(ct,{value:n});case"enum":return t("span",{className:"uppercase w-full",children:String(n)});case"fileSize":return mt(n);case"days":return dt(n);default:return String(n)}}function X({header:e}){const r=e.column.columnDef.header;return typeof r=="string"||!r?_(e.column):typeof r=="function"?typeof r(e.getContext())=="string"?_(e.column):M(r,e.getContext()):M(r,e.getContext())}function Tt({className:e}){const{tanTable:r}=x(),n=(l,a,d="z-50")=>v("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",l&&`bg-elevation-1 sticky right-0 ${d} text-center justify-center`,a);return u(ot,{className:v("table-auto",e),children:[t(at,{className:"sticky top-0 z-10",children:r.getHeaderGroups().map(l=>t(K,{children:l.headers.map(a=>u(it,{scope:"col",colSpan:a.colSpan,className:n(a.id===w,"bg-elevation-1"),children:[!a.column.getCanSort()&&!a.isPlaceholder&&t("div",{className:v("w-full py-1 inline-flex items-center gap-1 body-sm",a.id===w?"justify-center":"justify-start"),children:t(X,{header:a})}),a.column.getCanSort()&&u(y,{variant:"ghost",className:v("w-full p-1",a.id===w?"justify-center":"justify-start"),onPress:a.column.getToggleSortingHandler(),children:[t("span",{children:t(X,{header:a})}),t(ne,{direction:a.column.getIsSorted()})]})]},a.id))},l.id))}),t(lt,{children:r.getRowModel().rows.map(l=>t(K,{className:v("transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":l.getIsSelected(),children:l.getVisibleCells().map(a=>{const d=a.column.id===w,s=a.column.columnDef.meta?.displayType?wt(a):M(a.column.columnDef.cell,a.getContext());return t(st,{className:v(n(d,void 0,"z-1"),d&&"flex justify-center items-center"),children:s},a.id)})},l.id))})]})}function Z(e){return e.resourceType==="none"}function re(e){return e.resourceType==="single"}function J(e){return e.resourceType==="multiple"}function Nt({items:e,isFetching:r}){const{openDialog:n,closeDialog:l}=Y(),{tanTable:a}=x();function d(o,f){return o.isDisabled?Z(o)?o.isDisabled():J(o)?o.isDisabled(f):!1:!1}const s=a.getSelectedRowModel().rows.map(o=>o.original);return t(C,{children:e.map((o,f)=>{const g=o.icon,S=d(o,s)||r;return u(y,{"aria-label":o.label,type:"button",isDisabled:S,className:"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform",onPress:m=>{const c={event:m,openDialog:n,closeDialog:l};Z(o)?o.onPress(c):J(o)&&o.onPress({...c,data:s})},variant:o.variant??"neutral",children:[g&&t(g,{"aria-hidden":!0}),t("span",{children:o.label})]},`${o.label}-${f}`)})})}function It({label:e,items:r,data:n}){const{openDialog:l,closeDialog:a}=Y();return t(R,{"aria-label":"Actions",label:e,size:"icon",children:r.map(d=>{const s=d.icon;return u(A,{id:d.label,isDisabled:d.isDisabled?.(n)??!1,onAction:()=>{const o={openDialog:l,closeDialog:a};re(d)&&d.onPress({...o,data:n})},children:[t(s,{className:"size-icon"}),d.label]},d.label)})})}const Pn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],Ft={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 At(e,r){const n=`${r}-${Date.now()}`,l=oe[e][0];switch(e){case"bool":return{id:n,type:e,property:r,operator:l,value:!0};case"string":return{id:n,type:e,property:r,operator:l,value:""};case"date":return{id:n,type:e,property:r,operator:l,value:new Date().toISOString()};case"id":return{id:n,type:e,property:r,operator:l,value:""};case"id-search":return{id:n,type:e,property:r,operator:l,value:[]};case"enum":return{id:n,type:e,property:r,operator:l,value:new Set};case"number":return{id:n,type:e,property:r,operator:l,value:0}}}const oe={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 Dt({className:e,...r}){const{filters:n,query:l,setFilters:a,filterConfig:d}=x(),s=fe(null),o=L(),g=Le({defaultValues:{filters:n},onSubmit:({value:m})=>{a(m.filters)}}),S=Object.keys(d).sort();return t("section",{...r,className:v("flex gap-icon items-center",e),children:u(Me,{onOpenChange:m=>{m?s.current?.focus():g.handleSubmit()},children:[u("div",{className:"relative",children:[n.length>0&&t("div",{className:"size-2 rounded-full absolute bg-primary/90 z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5"}),t(y,{"aria-label":"Filter",isDisabled:l.isPending||S.length===0,type:"button",size:"icon",variant:"neutral",children:t(Xe,{})})]}),t(_e,{className:"w-full p-icon",children:t("form",{onSubmit:m=>{m.preventDefault()},className:"flex flex-col gap-icon max-h-table overflow-auto ",children:t(g.Field,{mode:"array",name:"filters",children:m=>u(C,{children:[m.state.value.map((c,h)=>u("div",{className:"flex gap-icon items-center justify-normal",children:[t("span",{className:"body-sm",children:o(c.property)}),t(g.AppField,{name:`filters[${h}].operator`,children:p=>t(p.TfSingleSelect,{items:oe[c.type].map(b=>({id:b,label:t(C,{children:Ft[b]})}))})},c.id),c.type==="bool"&&t(g.AppField,{name:`filters[${h}].value`,children:p=>t(p.TfCheckbox,{autoFocus:!0})}),c.type==="date"&&t(g.AppField,{name:`filters[${h}].value`,children:p=>t(Oe,{autoFocus:!0})}),c.type==="id"&&t(g.AppField,{name:`filters[${h}].value`,children:p=>t(p.TfTextField,{autoFocus:!0})}),c.type==="string"&&t(g.AppField,{name:`filters[${h}].value`,children:p=>t(p.TfTextField,{autoFocus:!0})}),c.type==="number"&&t(g.AppField,{name:`filters[${h}].value`,children:p=>t(p.TfNumberField,{autoFocus:!0})}),c.type==="enum"&&t(g.AppField,{name:`filters[${h}].value`,children:p=>{const b=d[c.property];return b.type!=="enum"?null:t(p.TfMultiSelect,{items:b.options})}}),c.type==="id-search"&&t(g.AppField,{name:`filters[${h}].value`,children:p=>{const b=d[c.property];return b.type!=="id-search"?null:t(tt,{path:b.path,accessor:b.accessor})}}),t(y,{type:"button",variant:"neutral",size:"icon",onPress:()=>m.removeValue(h),children:t(B,{})})]},c.id)),u("div",{className:"flex w-full items-center justify-end gap-2 not-first:mt-icon",children:[t(R,{label:"Add filter",autoFocus:!0,children:S.sort().map(c=>{const h=d[c].type,p=Pt[h];return u(A,{onAction:()=>{const b=At(h,c);m.pushValue(b)},children:[o(c),t(p,{})]},c)})}),m.state.value.length>0?u(y,{type:"button",variant:"neutral",onPress:()=>{m.setValue([])},children:[t(B,{}),"Reset"]}):null]})]})})})})]})})}const Pt={"id-search":et,bool:U,date:Ye,enum:We,id:Je,number:Ze,string:U};export{Ft as C,Dt as D,Dn as DataTable,te as DataTableContext,An as DataTableProvider,Pn as F,In as getColumnHelper,x as useDataTable,Fn as useDataTableState};
2
2
  //# sourceMappingURL=data-table.js.map
package/dist/components/data-table.js.map CHANGED
@@ -1 +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 { useQuery } from '@tanstack/react-query';\n\nimport {\n type Column,\n type ColumnDef,\n type ColumnOrderState,\n createColumnHelper,\n flexRender,\n getCoreRowModel,\n type Header,\n type PaginationState,\n type RowData,\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 { Badge } from '../components/badge';\n\nimport { Button } from '../components/button';\nimport { DataTableFilter, type FiltersConfig, type TableFilter } from '../components/data-table-filter';\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 { CountryName } from '../utilities/countries';\nimport { formatDate } from '../utilities/date';\nimport { formatDays, formatFilesize, formatNumber } from '../utilities/numbers';\nimport { type ApiPathParameters, type ApiResponseBody, 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\nimport type { Cell, ColumnHelper } from '@tanstack/react-table';\nimport type { ClientPathsWithMethod } from 'openapi-fetch';\nimport type { PressEvent } from 'react-aria-components';\nimport { type CtxClientType, useCtxClient } from '../utilities/ctx-client';\nimport { ControlledDialogProvider, useControlledDialog } from './dialog';\nexport type DisplayType = 'string' | 'boolean' | 'date' | 'number' | 'enum' | 'badge' | 'country' | 'fileSize' | 'days';\n\ndeclare module '@tanstack/react-table' {\n interface ColumnMeta<TData extends RowData, TValue> {\n displayType: DisplayType;\n }\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 ACTIONS_COLUMN_ID = 'TableActions';\nfunction getActionsColumn<T extends object>(rowActions: SingleResourceAction<T>[]) {\n if (rowActions.length === 0) return [];\n\n return [\n cH.accessor(ACTIONS_COLUMN_ID, {\n header: 'Actions',\n id: ACTIONS_COLUMN_ID,\n enableHiding: false,\n cell: ({ row }) => (\n <TableActionsRowMenu label={<IcMoreVertical />} data={row.original} items={rowActions} />\n ),\n enableSorting: false,\n }),\n ];\n}\n\ntype DataTableFactory<T extends object, TOperation extends keyof operations> = {\n path: NoInfer<ClientPathsWithMethod<CtxClientType, 'get'>>;\n pathParameters?: NoInfer<ApiPathParameters<TOperation>>;\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};\n\ntype DataTableState = {\n sorting: SortingState;\n pagination: PaginationState;\n};\n\nexport function getColumnHelper<O extends keyof operations>(): ColumnHelper<ApiResponseBody<O>> {\n return createColumnHelper<ApiResponseBody<O>>();\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 path,\n pathParameters,\n columns,\n filterConfig,\n columnsToHideByDefault = {},\n allowSelection = false,\n initialFilters = [],\n tableActions,\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 { sorting, pagination } = tableState;\n\n const [searchQuery, setSearchQuery] = useState('');\n\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n /** Reflect in URL in host application */\n const [filters, setFilters] = useState(initialFilters);\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 const queryParameters = {\n ...filters,\n page: pagination.pageIndex + 1,\n limit: pagination.pageSize,\n sort: generateSortParam(sorting[0]),\n search: searchQuery,\n };\n\n const client = useCtxClient();\n // TODO, this seems incorrect, verify\n const queryKey = ['get', path];\n\n const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n `${queryKey.join('')}_ctx_column_order_preference`,\n []\n );\n const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(\n `${queryKey.join('')}_ctx_column_visibility_preference`,\n {\n id: false,\n ...columnsToHideByDefault,\n }\n );\n\n // Update table state with new values\n const updateTableState = (updates: Partial<DataTableState>) => {\n _setTableState(prev => ({ ...prev, ...updates }));\n };\n\n const query = useQuery({\n queryKey,\n queryFn: async () => {\n // Hoping the above type catches the correct path parameter.\n const res = await client.GET(path, { params: { query: queryParameters, path: pathParameters as any } });\n return {\n data: (res.data ?? []) as T[],\n total: Number.parseInt(res.response.headers.get('Pagination-Count') || '0'),\n };\n },\n });\n\n const rowActions = tableActions.filter(isSingleResourceAction);\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 ...columns,\n ...getActionsColumn<T>(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 ?? 0,\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 <ControlledDialogProvider>\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 </ControlledDialogProvider>\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 // Don't show checkbox and actions columns in picker\n if (!col || col.id === 'checkbox' || col.id === ACTIONS_COLUMN_ID) 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 {getColumnHeaderText(column)}\n {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n </MenuItem>\n );\n }\n}\n\nfunction Paginator() {\n const { tanTable } = useDataTable();\n const rowCount = tanTable.getRowCount();\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 const hasSelectedRows = tanTable.getSelectedRowModel().rows.length > 0;\n\n const filteredActions = tableActions\n .filter(ta => ta.resourceType !== 'single')\n .filter(ta => (ta.resourceType === 'multiple') === hasSelectedRows);\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 items={filteredActions} isFetching={query.isFetching} />\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 getColumnHeaderText(column: Column<any, unknown>): string {\n const resourceFormatter = useResourceFormatter();\n const headerDef = column.columnDef.header;\n return typeof headerDef === 'string' ? headerDef : resourceFormatter(column.id);\n}\n\n/**\n * Renders a cell value based on the displayType metadata\n * @param cell - The cell to render\n * @returns The formatted value as a React node\n */\nfunction renderCellByDisplayType(cell: Cell<any, any>): React.ReactNode {\n const displayType = cell.column.columnDef.meta?.displayType;\n const value = cell.getValue();\n\n if (value === null || value === undefined) {\n return null;\n }\n\n switch (displayType) {\n case 'date':\n return formatDate(value);\n\n case 'number':\n return formatNumber(value);\n case 'boolean':\n case 'badge':\n return <Badge className=\"uppercase w-full\">{String(value)}</Badge>;\n case 'country':\n return <CountryName value={value} />;\n case 'enum':\n return <span className=\"uppercase w-full\">{String(value)}</span>;\n case 'fileSize':\n return formatFilesize(value);\n case 'days':\n return formatDays(value);\n default:\n return String(value);\n }\n}\n\nfunction HeaderText({ header }: { header: Header<any, unknown> }) {\n const headerDef = header.column.columnDef.header;\n\n if (typeof headerDef === 'string' || !headerDef) {\n return getColumnHeaderText(header.column);\n }\n\n if (typeof headerDef === 'function') {\n const result = headerDef(header.getContext());\n if (typeof result === 'string') {\n return getColumnHeaderText(header.column);\n }\n return flexRender(headerDef, header.getContext());\n }\n\n return flexRender(headerDef, header.getContext());\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, zIndex: string = 'z-50') =>\n classNames(\n 'px-icon py-2 text-left body-sm font-medium whitespace-nowrap',\n isSticky && `bg-elevation-1 sticky right-0 ${zIndex} text-center justify-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(header.id === ACTIONS_COLUMN_ID, 'bg-elevation-1')}\n >\n {!header.column.getCanSort() && !header.isPlaceholder && (\n <div\n className={classNames(\n 'w-full py-1 inline-flex items-center gap-1 body-sm',\n header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n )}\n >\n <HeaderText header={header} />\n </div>\n )}\n {header.column.getCanSort() && (\n <Button\n variant=\"ghost\"\n className={classNames(\n 'w-full p-1',\n header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n )}\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 const isActionsColumn = cell.column.id === ACTIONS_COLUMN_ID;\n const cellContent = cell.column.columnDef.meta?.displayType\n ? renderCellByDisplayType(cell)\n : flexRender(cell.column.columnDef.cell, cell.getContext());\n\n return (\n <TableCell\n key={cell.id}\n className={classNames(\n tableCellStyle(isActionsColumn, undefined, 'z-1'),\n isActionsColumn && 'flex justify-center items-center'\n )}\n >\n {cellContent}\n </TableCell>\n );\n })}\n </TableRow>\n ))}\n </TableBody>\n </TableComponent>\n );\n}\n\n/** Base properties shared by all table actions */\ntype ActionBase = {\n label: string;\n icon: CtxIcon;\n tooltip?: string;\n /** Optional button variant to pass through to Button (defaults to neutral) */\n variant?: React.ComponentProps<typeof Button>['variant'];\n};\n\n/** Context provided to onPress functions in TableActions */\ntype ActionPressContext = {\n event?: PressEvent;\n openDialog: (c: React.ReactNode) => void;\n closeDialog: () => void;\n};\n\nexport type NoResourceAction = ActionBase & {\n resourceType: 'none';\n isDisabled?: () => boolean;\n onPress: (c: ActionPressContext) => void;\n};\n\nexport type SingleResourceAction<T> = ActionBase & {\n resourceType: 'single';\n isDisabled?: (data: T) => boolean;\n onPress: (c: ActionPressContext & { data: T }) => void;\n};\n\nexport type BulkResourceAction<T> = ActionBase & {\n resourceType: 'multiple';\n isDisabled?: (data: T[]) => boolean;\n onPress: (c: ActionPressContext & { data: T[] }) => void;\n};\n\n/** Common table action type that works for both action and dialog types */\nexport type TableAction<T> = NoResourceAction | SingleResourceAction<T> | BulkResourceAction<T>;\n\nfunction isNoResourceAction<T>(item: TableAction<T>): item is NoResourceAction {\n return item.resourceType === 'none';\n}\n\nfunction isSingleResourceAction<T>(item: TableAction<T>): item is SingleResourceAction<T> {\n return item.resourceType === 'single';\n}\n\nfunction isBulkResourceAction<T>(item: TableAction<T>): item is BulkResourceAction<T> {\n return item.resourceType === 'multiple';\n}\n\nexport type TableActionsProps<T> = {\n /** Array of table actions to render */\n readonly items: (NoResourceAction | BulkResourceAction<T>)[];\n /** Whether the table is currently fetching data */\n readonly isFetching?: boolean;\n};\n\nfunction TableActions<T>({ items, isFetching }: TableActionsProps<T>) {\n const { openDialog, closeDialog } = useControlledDialog();\n const { tanTable } = useDataTable();\n\n function getTableActionIsDisabled<T>(item: TableAction<T>, rows: T[]): boolean {\n if (!item.isDisabled) return false;\n\n if (isNoResourceAction(item)) {\n return item.isDisabled();\n } else if (isBulkResourceAction(item)) {\n return item.isDisabled(rows);\n }\n return false;\n }\n\n const selectedRows = tanTable.getSelectedRowModel().rows.map(r => r.original);\n return (\n <>\n {items.map((item, i) => {\n const Icon = item.icon;\n const isDisabled = getTableActionIsDisabled(item, selectedRows) || isFetching;\n\n return (\n <Button\n key={`${item.label}-${i}`}\n aria-label={item.label}\n type=\"button\"\n isDisabled={isDisabled}\n className=\"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform\"\n onPress={e => {\n const context = { event: e, openDialog, closeDialog };\n if (isNoResourceAction(item)) {\n item.onPress(context);\n } else if (isBulkResourceAction(item)) {\n item.onPress({ ...context, data: selectedRows as T[] });\n }\n }}\n variant={item.variant ?? 'neutral'}\n >\n {Icon && <Icon aria-hidden />}\n <span>{item.label}</span>\n </Button>\n );\n })}\n </>\n );\n}\n\nfunction TableActionsRowMenu<T>({\n label,\n items,\n data,\n}: {\n readonly label: React.ReactNode;\n readonly items: SingleResourceAction<T>[];\n readonly data: T;\n}) {\n const { openDialog, closeDialog } = useControlledDialog();\n\n return (\n <EasyMenu aria-label=\"Actions\" label={label} size={'icon'}>\n {items.map(it => {\n const Icon = it.icon;\n return (\n <MenuItem\n key={it.label}\n id={it.label}\n isDisabled={it.isDisabled?.(data) ?? false}\n onAction={() => {\n const context = { openDialog, closeDialog };\n if (isSingleResourceAction(it)) {\n it.onPress({ ...context, data });\n }\n }}\n >\n <Icon className=\"size-icon\" />\n {it.label}\n </MenuItem>\n );\n })}\n </EasyMenu>\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<React.ComponentProps<typeof TfMultipleIdSearchInput>, 'accessor' | 'path'>)\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 path={config.path}\n accessor={config.accessor}\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":["generateSortParam","sort","cH","createColumnHelper","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","ACTIONS_COLUMN_ID","getActionsColumn","rowActions","TableActionsRowMenu","IcMoreVertical","getColumnHelper","useDataTableState","path","pathParameters","columns","filterConfig","columnsToHideByDefault","allowSelection","initialFilters","tableActions","tableState","_setTableState","useState","sorting","pagination","searchQuery","setSearchQuery","rowSelection","setRowSelection","filters","setFilters","mergedFilters","useMemo","tf","acc","current","merge","queryParameters","client","useCtxClient","queryKey","columnOrder","setColumnOrder","useLocalStorage","columnVisibility","setColumnVisibility","updateTableState","updates","prev","query","useQuery","res","isSingleResourceAction","cols","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","useEffect","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","className","Fragment","ControlledDialogProvider","jsxs","classNames","Actions","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","getColumnHeaderText","SortIcon","rowCount","Button","IcFirst","IcLeft","IcRight","IcLast","PAGE_SIZES","s","items","hasSelectedRows","filteredActions","ta","IcRefresh","TableActions","DataTableFilter","SearchField","direction","IcSortAsc","IcSortDesc","IcSortNone","headerDef","renderCellByDisplayType","cell","displayType","value","formatDate","formatNumber","Badge","CountryName","formatFilesize","formatDays","HeaderText","header","flexRender","tableCellStyle","isSticky","zIndex","TableComponent","TableHeader","headerGroup","TableRow","TableHead","TableBody","isActionsColumn","cellContent","TableCell","isNoResourceAction","item","isBulkResourceAction","isFetching","openDialog","closeDialog","useControlledDialog","getTableActionIsDisabled","rows","selectedRows","r","i","Icon","isDisabled","e","context","label","data","it","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","createNewFilter","type","property","id","operator","FilterOperations","addFilterButtonRef","useRef","form","useAppForm","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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"}
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 { useQuery } from '@tanstack/react-query';\n\nimport {\n type Column,\n type ColumnDef,\n type ColumnOrderState,\n createColumnHelper,\n flexRender,\n getCoreRowModel,\n type Header,\n type PaginationState,\n type RowData,\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 { Badge } from '../components/badge';\n\nimport { Button } from '../components/button';\nimport { DataTableFilter, type FiltersConfig, type TableFilter } from '../components/data-table-filter';\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 { CountryName } from '../utilities/countries';\nimport { formatDate } from '../utilities/date';\nimport { formatDays, formatFilesize, formatNumber } from '../utilities/numbers';\nimport { type ApiPathParameters, type ApiResponseBody, 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\nimport type { Cell, ColumnHelper } from '@tanstack/react-table';\nimport type { ClientPathsWithMethod } from 'openapi-fetch';\nimport type { PressEvent } from 'react-aria-components';\nimport { type CtxClientType, useCtxClient } from '../utilities/ctx-client';\nimport { ControlledDialogProvider, useControlledDialog } from './dialog';\nexport type DisplayType = 'string' | 'boolean' | 'date' | 'number' | 'enum' | 'badge' | 'country' | 'fileSize' | 'days';\n\ndeclare module '@tanstack/react-table' {\n interface ColumnMeta<TData extends RowData, TValue> {\n displayType: DisplayType;\n }\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 ACTIONS_COLUMN_ID = 'TableActions';\nfunction getActionsColumn<T extends object>(rowActions: SingleResourceAction<T>[]) {\n if (rowActions.length === 0) return [];\n\n return [\n cH.accessor(ACTIONS_COLUMN_ID, {\n header: 'Actions',\n id: ACTIONS_COLUMN_ID,\n enableHiding: false,\n cell: ({ row }) => (\n <TableActionsRowMenu label={<IcMoreVertical />} data={row.original} items={rowActions} />\n ),\n enableSorting: false,\n }),\n ];\n}\n\ntype DataTableFactory<T extends object, TOperation extends keyof operations> = {\n path: NoInfer<ClientPathsWithMethod<CtxClientType, 'get'>>;\n pathParameters?: NoInfer<ApiPathParameters<TOperation>>;\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};\n\ntype DataTableState = {\n sorting: SortingState;\n pagination: PaginationState;\n};\n\nexport function getColumnHelper<O extends keyof operations>(): ColumnHelper<ApiResponseBody<O>> {\n return createColumnHelper<ApiResponseBody<O>>();\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 path,\n pathParameters,\n columns,\n filterConfig,\n columnsToHideByDefault = {},\n allowSelection = false,\n initialFilters = [],\n tableActions,\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 { sorting, pagination } = tableState;\n\n const [searchQuery, setSearchQuery] = useState('');\n\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n /** Reflect in URL in host application */\n const [filters, setFilters] = useState(initialFilters);\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 const queryParameters = {\n ...filters,\n page: pagination.pageIndex + 1,\n limit: pagination.pageSize,\n sort: generateSortParam(sorting[0]),\n search: searchQuery,\n };\n\n const client = useCtxClient();\n // TODO, this seems incorrect, verify\n const queryKey = ['get', path, queryParameters];\n\n const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n `${queryKey.join('')}_ctx_column_order_preference`,\n []\n );\n const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(\n `${queryKey.join('')}_ctx_column_visibility_preference`,\n {\n id: false,\n ...columnsToHideByDefault,\n }\n );\n\n // Update table state with new values\n const updateTableState = (updates: Partial<DataTableState>) => {\n _setTableState(prev => ({ ...prev, ...updates }));\n };\n\n const query = useQuery({\n queryKey,\n queryFn: async () => {\n // Hoping the above type catches the correct path parameter.\n const res = await client.GET(path, {\n params: {\n query: {\n page: queryParameters.page,\n limit: queryParameters.limit,\n sort: queryParameters.sort,\n search: queryParameters.search,\n ...mergedFilters,\n },\n path: pathParameters as any,\n },\n });\n return {\n data: (res.data ?? []) as T[],\n total: Number.parseInt(res.response.headers.get('Pagination-Count') || '0'),\n };\n },\n });\n\n const rowActions = tableActions.filter(isSingleResourceAction);\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 ...columns,\n ...getActionsColumn<T>(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 ?? 0,\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 <ControlledDialogProvider>\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 </ControlledDialogProvider>\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 // Don't show checkbox and actions columns in picker\n if (!col || col.id === 'checkbox' || col.id === ACTIONS_COLUMN_ID) 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 {getColumnHeaderText(column)}\n {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n </MenuItem>\n );\n }\n}\n\nfunction Paginator() {\n const { tanTable } = useDataTable();\n const rowCount = tanTable.getRowCount();\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 const hasSelectedRows = tanTable.getSelectedRowModel().rows.length > 0;\n\n const filteredActions = tableActions\n .filter(ta => ta.resourceType !== 'single')\n .filter(ta => (ta.resourceType === 'multiple') === hasSelectedRows);\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 items={filteredActions} isFetching={query.isFetching} />\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 getColumnHeaderText(column: Column<any, unknown>): string {\n const resourceFormatter = useResourceFormatter();\n const headerDef = column.columnDef.header;\n return typeof headerDef === 'string' ? headerDef : resourceFormatter(column.id);\n}\n\n/**\n * Renders a cell value based on the displayType metadata\n * @param cell - The cell to render\n * @returns The formatted value as a React node\n */\nfunction renderCellByDisplayType(cell: Cell<any, any>): React.ReactNode {\n const displayType = cell.column.columnDef.meta?.displayType;\n const value = cell.getValue();\n\n if (value === null || value === undefined) {\n return null;\n }\n\n switch (displayType) {\n case 'date':\n return formatDate(value);\n case 'number':\n return formatNumber(value);\n case 'boolean':\n case 'badge':\n return <Badge className=\"uppercase w-full\">{String(value)}</Badge>;\n case 'country':\n return <CountryName value={value} />;\n case 'enum':\n return <span className=\"uppercase w-full\">{String(value)}</span>;\n case 'fileSize':\n return formatFilesize(value);\n case 'days':\n return formatDays(value);\n default:\n return String(value);\n }\n}\n\nfunction HeaderText({ header }: { header: Header<any, unknown> }) {\n const headerDef = header.column.columnDef.header;\n\n if (typeof headerDef === 'string' || !headerDef) {\n return getColumnHeaderText(header.column);\n }\n\n if (typeof headerDef === 'function') {\n const result = headerDef(header.getContext());\n if (typeof result === 'string') {\n return getColumnHeaderText(header.column);\n }\n return flexRender(headerDef, header.getContext());\n }\n\n return flexRender(headerDef, header.getContext());\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, zIndex: string = 'z-50') =>\n classNames(\n 'px-icon py-2 text-left body-sm font-medium whitespace-nowrap',\n isSticky && `bg-elevation-1 sticky right-0 ${zIndex} text-center justify-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(header.id === ACTIONS_COLUMN_ID, 'bg-elevation-1')}\n >\n {!header.column.getCanSort() && !header.isPlaceholder && (\n <div\n className={classNames(\n 'w-full py-1 inline-flex items-center gap-1 body-sm',\n header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n )}\n >\n <HeaderText header={header} />\n </div>\n )}\n {header.column.getCanSort() && (\n <Button\n variant=\"ghost\"\n className={classNames(\n 'w-full p-1',\n header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n )}\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 const isActionsColumn = cell.column.id === ACTIONS_COLUMN_ID;\n const cellContent = cell.column.columnDef.meta?.displayType\n ? renderCellByDisplayType(cell)\n : flexRender(cell.column.columnDef.cell, cell.getContext());\n\n return (\n <TableCell\n key={cell.id}\n className={classNames(\n tableCellStyle(isActionsColumn, undefined, 'z-1'),\n isActionsColumn && 'flex justify-center items-center'\n )}\n >\n {cellContent}\n </TableCell>\n );\n })}\n </TableRow>\n ))}\n </TableBody>\n </TableComponent>\n );\n}\n\n/** Base properties shared by all table actions */\ntype ActionBase = {\n label: string;\n icon: CtxIcon;\n tooltip?: string;\n /** Optional button variant to pass through to Button (defaults to neutral) */\n variant?: React.ComponentProps<typeof Button>['variant'];\n};\n\n/** Context provided to onPress functions in TableActions */\ntype ActionPressContext = {\n event?: PressEvent;\n openDialog: (c: React.ReactNode) => void;\n closeDialog: () => void;\n};\n\nexport type NoResourceAction = ActionBase & {\n resourceType: 'none';\n isDisabled?: () => boolean;\n onPress: (c: ActionPressContext) => void;\n};\n\nexport type SingleResourceAction<T> = ActionBase & {\n resourceType: 'single';\n isDisabled?: (data: T) => boolean;\n onPress: (c: ActionPressContext & { data: T }) => void;\n};\n\nexport type BulkResourceAction<T> = ActionBase & {\n resourceType: 'multiple';\n isDisabled?: (data: T[]) => boolean;\n onPress: (c: ActionPressContext & { data: T[] }) => void;\n};\n\n/** Common table action type that works for both action and dialog types */\nexport type TableAction<T> = NoResourceAction | SingleResourceAction<T> | BulkResourceAction<T>;\n\nfunction isNoResourceAction<T>(item: TableAction<T>): item is NoResourceAction {\n return item.resourceType === 'none';\n}\n\nfunction isSingleResourceAction<T>(item: TableAction<T>): item is SingleResourceAction<T> {\n return item.resourceType === 'single';\n}\n\nfunction isBulkResourceAction<T>(item: TableAction<T>): item is BulkResourceAction<T> {\n return item.resourceType === 'multiple';\n}\n\nexport type TableActionsProps<T> = {\n /** Array of table actions to render */\n readonly items: (NoResourceAction | BulkResourceAction<T>)[];\n /** Whether the table is currently fetching data */\n readonly isFetching?: boolean;\n};\n\nfunction TableActions<T>({ items, isFetching }: TableActionsProps<T>) {\n const { openDialog, closeDialog } = useControlledDialog();\n const { tanTable } = useDataTable();\n\n function getTableActionIsDisabled<T>(item: TableAction<T>, rows: T[]): boolean {\n if (!item.isDisabled) return false;\n\n if (isNoResourceAction(item)) {\n return item.isDisabled();\n } else if (isBulkResourceAction(item)) {\n return item.isDisabled(rows);\n }\n return false;\n }\n\n const selectedRows = tanTable.getSelectedRowModel().rows.map(r => r.original);\n return (\n <>\n {items.map((item, i) => {\n const Icon = item.icon;\n const isDisabled = getTableActionIsDisabled(item, selectedRows) || isFetching;\n\n return (\n <Button\n key={`${item.label}-${i}`}\n aria-label={item.label}\n type=\"button\"\n isDisabled={isDisabled}\n className=\"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform\"\n onPress={e => {\n const context = { event: e, openDialog, closeDialog };\n // TableActions only has Bulk actions and NoResource actions\n if (isNoResourceAction(item)) {\n item.onPress(context);\n } else if (isBulkResourceAction(item)) {\n item.onPress({ ...context, data: selectedRows });\n }\n }}\n variant={item.variant ?? 'neutral'}\n >\n {Icon && <Icon aria-hidden />}\n <span>{item.label}</span>\n </Button>\n );\n })}\n </>\n );\n}\n\nfunction TableActionsRowMenu<T>({\n label,\n items,\n data,\n}: {\n readonly label: React.ReactNode;\n readonly items: SingleResourceAction<T>[];\n readonly data: T;\n}) {\n const { openDialog, closeDialog } = useControlledDialog();\n\n return (\n <EasyMenu aria-label=\"Actions\" label={label} size={'icon'}>\n {items.map(it => {\n const Icon = it.icon;\n return (\n <MenuItem\n key={it.label}\n id={it.label}\n isDisabled={it.isDisabled?.(data) ?? false}\n onAction={() => {\n const context = { openDialog, closeDialog };\n if (isSingleResourceAction(it)) {\n it.onPress({ ...context, data });\n }\n }}\n >\n <Icon className=\"size-icon\" />\n {it.label}\n </MenuItem>\n );\n })}\n </EasyMenu>\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<React.ComponentProps<typeof TfMultipleIdSearchInput>, 'accessor' | 'path'>)\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 path={config.path}\n accessor={config.accessor}\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":["generateSortParam","sort","cH","createColumnHelper","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","ACTIONS_COLUMN_ID","getActionsColumn","rowActions","TableActionsRowMenu","IcMoreVertical","getColumnHelper","useDataTableState","path","pathParameters","columns","filterConfig","columnsToHideByDefault","allowSelection","initialFilters","tableActions","tableState","_setTableState","useState","sorting","pagination","searchQuery","setSearchQuery","rowSelection","setRowSelection","filters","setFilters","mergedFilters","useMemo","tf","acc","current","merge","queryParameters","client","useCtxClient","queryKey","columnOrder","setColumnOrder","useLocalStorage","columnVisibility","setColumnVisibility","updateTableState","updates","prev","query","useQuery","res","isSingleResourceAction","cols","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","useEffect","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","className","Fragment","ControlledDialogProvider","jsxs","classNames","Actions","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","getColumnHeaderText","SortIcon","rowCount","Button","IcFirst","IcLeft","IcRight","IcLast","PAGE_SIZES","s","items","hasSelectedRows","filteredActions","ta","IcRefresh","TableActions","DataTableFilter","SearchField","direction","IcSortAsc","IcSortDesc","IcSortNone","headerDef","renderCellByDisplayType","cell","displayType","value","formatDate","formatNumber","Badge","CountryName","formatFilesize","formatDays","HeaderText","header","flexRender","tableCellStyle","isSticky","zIndex","TableComponent","TableHeader","headerGroup","TableRow","TableHead","TableBody","isActionsColumn","cellContent","TableCell","isNoResourceAction","item","isBulkResourceAction","isFetching","openDialog","closeDialog","useControlledDialog","getTableActionIsDisabled","rows","selectedRows","r","i","Icon","isDisabled","e","context","label","data","it","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","createNewFilter","type","property","id","operator","FilterOperations","addFilterButtonRef","useRef","form","useAppForm","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/form.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsxs as a,Fragment as d,jsx as n}from"react/jsx-runtime";import{cva as l}from"class-variance-authority";import{Group as u,composeRenderProps as c,Label as f,Text as p,Button as g}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import{IcInfo as b,IcError as h}from"./icons.js";import"clsx";import"react";const x=l(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function F({className:t,...e}){return n(f,{className:i(x(),t),...e})}function N({className:t,children:e,...r}){return a(p,{className:i("body-sm text-muted leading-tight",t),...r,slot:"description",children:[e,n(b,{className:"inline size-2 align-text-top ms-0.5"})]})}function v({className:t,children:e,...r}){return a("label",{role:"alert",className:i("body-sm leading-tight text-destructive duration-150 animate-in transition-transform slide-in-from-top-5 fade-in",t),...r,children:[e,n(h,{className:"inline size-2 align-text-top ms-0.5"})]})}const y=l("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-elevation-2 input-dim ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function k({className:t,variant:e,...r}){return n(u,{className:c(t,o=>i(y({variant:e}),o)),...r})}function w({label:t,description:e,errorMessage:r,children:o,requiredIndicator:m,htmlFor:s}){return a(d,{children:[t&&a(F,{htmlFor:s,children:[t,m&&n("sup",{className:"text-destructive",children:"*"})]}),o,e&&n(N,{children:e}),r&&n(v,{htmlFor:s,children:r})]})}function B({className:t,...e}){return n(g,{className:c(t,r=>i("btn btn-ghost h-input px-2 -me-2",r)),...e})}function D({className:t,onSubmit:e,...r}){return n("form",{className:i(t),onSubmit:o=>{o.preventDefault(),e?.(o)},...r})}function E({className:t,...e}){return n("section",{className:i("flex flex-col gap-input border-b py-icon pb-input",t),...e})}function T({className:t,...e}){return n("h2",{className:i("heading-4",t),...e})}function A({className:t,...e}){return n("nav",{className:i("flex items-center justify-end h-header bg-glass-1 sticky bottom-0 z-50 py-icon px-input border-t",t),...e})}function P({className:t,...e}){return n("div",{className:"grid grid-cols-1 xl:grid-cols-2 gap-input mt-icon my-header",...e})}export{k as FieldGroup,D as Form,A as FormActionFooter,w as FormField,B as FormFieldButton,N as FormFieldDescription,v as FormFieldError,F as FormFieldLabel,P as FormLayout,E as FormSection,T as FormSectionTitle,y as fieldGroupVariants,x as labelVariants};
1
+ "use client";import{jsxs as a,Fragment as d,jsx as n}from"react/jsx-runtime";import{cva as l}from"class-variance-authority";import{Group as u,composeRenderProps as m,Label as f,Text as p,Button as g}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import{IcInfo as b,IcError as x}from"./icons.js";import"clsx";import"react";const h=l(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function F({className:t,...e}){return n(f,{className:i(h(),t),...e})}function N({className:t,children:e,...r}){return a(p,{className:i("body-sm text-muted leading-tight",t),...r,slot:"description",children:[e,n(b,{className:"inline size-2 align-text-top ms-0.5"})]})}function v({className:t,children:e,...r}){return a("label",{role:"alert",className:i("body-sm leading-tight text-destructive duration-150 animate-in transition-transform slide-in-from-top-5 fade-in",t),...r,children:[e,n(x,{className:"inline size-2 align-text-top ms-0.5"})]})}const y=l("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-elevation-2 input-dim ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function V({className:t,variant:e,...r}){return n(u,{className:m(t,o=>i(y({variant:e}),o)),...r})}function k({label:t,description:e,errorMessage:r,children:o,requiredIndicator:c,htmlFor:s}){return a(d,{children:[t&&a(F,{htmlFor:s,children:[t,c&&n("sup",{className:"text-destructive",children:"*"})]}),o,e&&n(N,{children:e}),r&&n(v,{htmlFor:s,children:r})]})}function B({className:t,...e}){return n(g,{className:m(t,r=>i("btn btn-ghost h-input px-2 -me-2",r)),...e})}function D({className:t,onSubmit:e,...r}){return n("form",{className:i(t),onSubmit:o=>{o.preventDefault(),e?.(o)},...r})}function E({className:t,...e}){return n("section",{className:i("flex flex-col gap-input py-icon pb-input",t),...e})}function T({className:t,...e}){return n("h2",{className:i("heading-4",t),...e})}function A({className:t,...e}){return n("nav",{className:i("flex items-center justify-end h-header bg-glass-1 sticky bottom-0 z-50 py-icon px-input border-t",t),...e})}function P({className:t,...e}){return n("div",{className:"grid grid-cols-1 gap-input mt-icon my-header max-w-3xl",...e})}export{V as FieldGroup,D as Form,A as FormActionFooter,k as FormField,B as FormFieldButton,N as FormFieldDescription,v as FormFieldError,F as FormFieldLabel,P as FormLayout,E as FormSection,T as FormSectionTitle,y as fieldGroupVariants,h as labelVariants};
2
2
  //# sourceMappingURL=form.js.map
package/dist/components/form.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"form.js","sources":["../../lib/components/form.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Button as AriaButton,\n ButtonProps as AriaButtonProps,\n Group as AriaGroup,\n GroupProps as AriaGroupProps,\n Label as AriaLabel,\n LabelProps as AriaLabelProps,\n Text as AriaText,\n TextProps as AriaTextProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { IcError, IcInfo } from './icons';\n\n/**\n * Class variance authority variants for form field labels.\n * Provides styling for different states including disabled and invalid.\n */\nexport const labelVariants = cva([\n 'select-none body-sm font-medium leading-none',\n /* Disabled */\n 'disabled-muted',\n /* Invalid */\n 'group-data-[invalid]:text-destructive',\n]);\n\n/**\n * A form field label component that extends React Aria's Label component.\n * Applies consistent styling for form labels including disabled and invalid states.\n *\n * @param className - Optional additional CSS classes to apply\n * @param props - All other props from AriaLabelProps\n * @returns A styled label element\n */\nexport function FormFieldLabel({ className, ...props }: AriaLabelProps) {\n return <AriaLabel className={classNames(labelVariants(), className)} {...props} />;\n}\n\n/**\n * A form field description component that provides additional context or help text.\n * Automatically includes an info icon and uses the \"description\" slot for accessibility.\n */\nexport function FormFieldDescription({ className, children, ...props }: AriaTextProps) {\n return (\n <AriaText className={classNames('body-sm text-muted leading-tight', className)} {...props} slot=\"description\">\n {children}\n <IcInfo className=\"inline size-2 align-text-top ms-0.5\" />\n </AriaText>\n );\n}\n/**\n * A form field error component that displays validation error messages.\n *\n * @remarks\n * Currently uses a div instead of AriaFieldError to avoid overlap with Tanstack Form.\n * This approach needs further discussion and exploration.\n *\n */\nexport function FormFieldError({ className, children, ...props }: React.ComponentPropsWithRef<'label'>) {\n return (\n <label\n role=\"alert\"\n className={classNames(\n 'body-sm leading-tight text-destructive duration-150 animate-in transition-transform slide-in-from-top-5 fade-in',\n className\n )}\n {...props}\n >\n {children}\n <IcError className=\"inline size-2 align-text-top ms-0.5\" />\n </label>\n );\n}\n\n/**\n * Class variance authority variants for field groups.\n * Provides styling variants for different types of form field containers.\n */\nexport const fieldGroupVariants = cva('', {\n variants: {\n variant: {\n default: [\n 'relative flex w-full items-center overflow-hidden border border-input bg-elevation-2 input-dim ring-offset-background placeholder:text-muted-foreground',\n /* Focus Within */\n 'focus-ring',\n /* Disabled */\n 'disabled-muted',\n ],\n ghost: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\n/**\n * Props interface for FieldGroup component.\n * Extends AriaGroupProps with variant styling options.\n */\nexport interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {}\n\n/**\n * A field group component that wraps form inputs with consistent styling.\n * Supports different variants for various use cases.\n */\nexport function FieldGroup({ className, variant, ...props }: GroupProps) {\n return (\n <AriaGroup\n className={composeRenderProps(className, className =>\n classNames(fieldGroupVariants({ variant }), className)\n )}\n {...props}\n />\n );\n}\n\n/**\n * Props for the FormField component.\n * Defines the structure for form field configuration.\n */\nexport type FormFieldProps = {\n /** Optional label text for the form field */\n label?: React.ReactNode;\n /** Optional description or help text */\n description?: React.ReactNode;\n /** Optional error message to display */\n errorMessage?: string;\n /** Show required indicator on field label */\n requiredIndicator?: boolean;\n /** Not defining the htmlFor on labels will lead to accessibilty warnings */\n htmlFor?: string;\n};\n\n/**\n * A wrapper component for form fields that provides consistent layout and styling.\n * Automatically renders label, children, description, and error message in the correct order.\n * @returns A complete form field with all associated elements\n */\nexport function FormField({\n label,\n description,\n errorMessage,\n children,\n requiredIndicator,\n htmlFor,\n}: FormFieldProps & {\n children: React.ReactNode;\n}) {\n return (\n <>\n {label && (\n <FormFieldLabel htmlFor={htmlFor}>\n {label}\n {requiredIndicator && <sup className=\"text-destructive\">*</sup>}\n </FormFieldLabel>\n )}\n {children}\n {description && <FormFieldDescription>{description}</FormFieldDescription>}\n {errorMessage && <FormFieldError htmlFor={htmlFor}>{errorMessage}</FormFieldError>}\n </>\n );\n}\n\n/**\n * A button component designed to be used within form fields.\n * Styled to fit nicely alongside form inputs with ghost styling.\n */\nexport function FormFieldButton({ className, ...props }: AriaButtonProps) {\n return (\n <AriaButton\n className={composeRenderProps(className, className =>\n classNames('btn btn-ghost h-input px-2 -me-2', className)\n )}\n {...props}\n />\n );\n}\n\n/**\n * A form component that prevents default form submission and handles submit events.\n * All forms in this application are controlled components, not pure HTML forms.\n */\nexport function Form({ className, onSubmit, ...props }: React.ComponentProps<'form'>) {\n return (\n <form\n className={classNames(className)}\n onSubmit={e => {\n // None of the forms in our applications are pure HTML forms.\n e.preventDefault();\n // If onSubmit is provided, call it.\n onSubmit?.(e);\n }}\n {...props}\n />\n );\n}\n\n/**\n * A section component for organizing form content into logical groups.\n * Provides consistent spacing and visual separation between form sections.\n */\nexport function FormSection({ className, ...props }: React.ComponentProps<'section'>) {\n return (\n <section className={classNames('flex flex-col gap-input border-b py-icon pb-input', className)} {...props} />\n );\n}\n\n/**\n * A title component for form sections.\n */\nexport function FormSectionTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n return <h2 className={classNames('heading-4', className)} {...props} />;\n}\n\nexport function FormActionFooter({ className, ...props }: React.ComponentProps<'nav'>) {\n return (\n <nav\n className={classNames(\n 'flex items-center justify-end h-header bg-glass-1 sticky bottom-0 z-50 py-icon px-input border-t',\n className\n )}\n {...props}\n />\n );\n}\n\nexport function FormLayout({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={'grid grid-cols-1 xl:grid-cols-2 gap-input mt-icon my-header'} {...props} />;\n}\n"],"names":["labelVariants","cva","FormFieldLabel","className","props","jsx","AriaLabel","classNames","FormFieldDescription","children","jsxs","AriaText","IcInfo","FormFieldError","IcError","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","requiredIndicator","htmlFor","Fragment","FormFieldButton","AriaButton","Form","onSubmit","e","FormSection","FormSectionTitle","FormActionFooter","FormLayout"],"mappings":"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"}
1
+ {"version":3,"file":"form.js","sources":["../../lib/components/form.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Button as AriaButton,\n ButtonProps as AriaButtonProps,\n Group as AriaGroup,\n GroupProps as AriaGroupProps,\n Label as AriaLabel,\n LabelProps as AriaLabelProps,\n Text as AriaText,\n TextProps as AriaTextProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { IcError, IcInfo } from './icons';\n\n/**\n * Class variance authority variants for form field labels.\n * Provides styling for different states including disabled and invalid.\n */\nexport const labelVariants = cva([\n 'select-none body-sm font-medium leading-none',\n /* Disabled */\n 'disabled-muted',\n /* Invalid */\n 'group-data-[invalid]:text-destructive',\n]);\n\n/**\n * A form field label component that extends React Aria's Label component.\n * Applies consistent styling for form labels including disabled and invalid states.\n *\n * @param className - Optional additional CSS classes to apply\n * @param props - All other props from AriaLabelProps\n * @returns A styled label element\n */\nexport function FormFieldLabel({ className, ...props }: AriaLabelProps) {\n return <AriaLabel className={classNames(labelVariants(), className)} {...props} />;\n}\n\n/**\n * A form field description component that provides additional context or help text.\n * Automatically includes an info icon and uses the \"description\" slot for accessibility.\n */\nexport function FormFieldDescription({ className, children, ...props }: AriaTextProps) {\n return (\n <AriaText className={classNames('body-sm text-muted leading-tight', className)} {...props} slot=\"description\">\n {children}\n <IcInfo className=\"inline size-2 align-text-top ms-0.5\" />\n </AriaText>\n );\n}\n/**\n * A form field error component that displays validation error messages.\n *\n * @remarks\n * Currently uses a div instead of AriaFieldError to avoid overlap with Tanstack Form.\n * This approach needs further discussion and exploration.\n *\n */\nexport function FormFieldError({ className, children, ...props }: React.ComponentPropsWithRef<'label'>) {\n return (\n <label\n role=\"alert\"\n className={classNames(\n 'body-sm leading-tight text-destructive duration-150 animate-in transition-transform slide-in-from-top-5 fade-in',\n className\n )}\n {...props}\n >\n {children}\n <IcError className=\"inline size-2 align-text-top ms-0.5\" />\n </label>\n );\n}\n\n/**\n * Class variance authority variants for field groups.\n * Provides styling variants for different types of form field containers.\n */\nexport const fieldGroupVariants = cva('', {\n variants: {\n variant: {\n default: [\n 'relative flex w-full items-center overflow-hidden border border-input bg-elevation-2 input-dim ring-offset-background placeholder:text-muted-foreground',\n /* Focus Within */\n 'focus-ring',\n /* Disabled */\n 'disabled-muted',\n ],\n ghost: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\n/**\n * Props interface for FieldGroup component.\n * Extends AriaGroupProps with variant styling options.\n */\nexport interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {}\n\n/**\n * A field group component that wraps form inputs with consistent styling.\n * Supports different variants for various use cases.\n */\nexport function FieldGroup({ className, variant, ...props }: GroupProps) {\n return (\n <AriaGroup\n className={composeRenderProps(className, className =>\n classNames(fieldGroupVariants({ variant }), className)\n )}\n {...props}\n />\n );\n}\n\n/**\n * Props for the FormField component.\n * Defines the structure for form field configuration.\n */\nexport type FormFieldProps = {\n /** Optional label text for the form field */\n label?: React.ReactNode;\n /** Optional description or help text */\n description?: React.ReactNode;\n /** Optional error message to display */\n errorMessage?: string;\n /** Show required indicator on field label */\n requiredIndicator?: boolean;\n /** Not defining the htmlFor on labels will lead to accessibilty warnings */\n htmlFor?: string;\n};\n\n/**\n * A wrapper component for form fields that provides consistent layout and styling.\n * Automatically renders label, children, description, and error message in the correct order.\n * @returns A complete form field with all associated elements\n */\nexport function FormField({\n label,\n description,\n errorMessage,\n children,\n requiredIndicator,\n htmlFor,\n}: FormFieldProps & {\n children: React.ReactNode;\n}) {\n return (\n <>\n {label && (\n <FormFieldLabel htmlFor={htmlFor}>\n {label}\n {requiredIndicator && <sup className=\"text-destructive\">*</sup>}\n </FormFieldLabel>\n )}\n {children}\n {description && <FormFieldDescription>{description}</FormFieldDescription>}\n {errorMessage && <FormFieldError htmlFor={htmlFor}>{errorMessage}</FormFieldError>}\n </>\n );\n}\n\n/**\n * A button component designed to be used within form fields.\n * Styled to fit nicely alongside form inputs with ghost styling.\n */\nexport function FormFieldButton({ className, ...props }: AriaButtonProps) {\n return (\n <AriaButton\n className={composeRenderProps(className, className =>\n classNames('btn btn-ghost h-input px-2 -me-2', className)\n )}\n {...props}\n />\n );\n}\n\n/**\n * A form component that prevents default form submission and handles submit events.\n * All forms in this application are controlled components, not pure HTML forms.\n */\nexport function Form({ className, onSubmit, ...props }: React.ComponentProps<'form'>) {\n return (\n <form\n className={classNames(className)}\n onSubmit={e => {\n // None of the forms in our applications are pure HTML forms.\n e.preventDefault();\n // If onSubmit is provided, call it.\n onSubmit?.(e);\n }}\n {...props}\n />\n );\n}\n\n/**\n * A section component for organizing form content into logical groups.\n * Provides consistent spacing and visual separation between form sections.\n */\nexport function FormSection({ className, ...props }: React.ComponentProps<'section'>) {\n return <section className={classNames('flex flex-col gap-input py-icon pb-input', className)} {...props} />;\n}\n\n/**\n * A title component for form sections.\n */\nexport function FormSectionTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n return <h2 className={classNames('heading-4', className)} {...props} />;\n}\n\nexport function FormActionFooter({ className, ...props }: React.ComponentProps<'nav'>) {\n return (\n <nav\n className={classNames(\n 'flex items-center justify-end h-header bg-glass-1 sticky bottom-0 z-50 py-icon px-input border-t',\n className\n )}\n {...props}\n />\n );\n}\n\nexport function FormLayout({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={'grid grid-cols-1 gap-input mt-icon my-header max-w-3xl'} {...props} />;\n}\n"],"names":["labelVariants","cva","FormFieldLabel","className","props","jsx","AriaLabel","classNames","FormFieldDescription","children","jsxs","AriaText","IcInfo","FormFieldError","IcError","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","requiredIndicator","htmlFor","Fragment","FormFieldButton","AriaButton","Form","onSubmit","e","FormSection","FormSectionTitle","FormActionFooter","FormLayout"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cryptlex/web-components",
3
- "version": "6.6.6-alpha59",
3
+ "version": "6.6.6-alpha61",
4
4
  "description": "React component library for Cryptlex web applications",
5
5
  "author": "Cryptlex",
6
6
  "type": "module",