@cryptlex/web-components 6.5.2 → 6.5.3

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.
@@ -1,2 +1,2 @@
1
- import{intervalToDuration as t}from"date-fns";function s(e){if(!e)return null;const r=new Date(e);return Intl.DateTimeFormat(void 0,{dateStyle:"medium",timeStyle:"short"}).format(r)}function u(e){const r=e.expiresAt&&new Date(e.expiresAt)<new Date;switch(!0){case(e.revoked&&e.suspended&&r):return"Revoked, Suspended, Expired";case(e.revoked&&e.suspended):return"Revoked, Suspended";case(e.revoked&&r):return"Revoked, Expired";case(e.suspended&&r):return"Suspended, Expired";case e.suspended:return"Suspended";case e.revoked:return"Revoked";case r:return"Expired";default:return"Active"}}function a(e){return e===0||!e?"Lifetime":n(e)}function n(e){const r=t({start:0,end:e*1e3});return[r.years&&`${r.years}y`,r.months&&`${r.months}m`,r.days&&`${r.days}d`,r.hours&&`${r.hours}h`].filter(Boolean).join(" ").trim()}const i={windows:"Windows",macos:"macOS",linux:"Linux",ios:"iOS",android:"Android"};export{i as ALL_OS,s as formatDate,u as getLicenseStatus,a as getValidityDisplay,n as secondsToDuration};
1
+ import{intervalToDuration as t}from"date-fns";function s(e){if(!e)return null;const r=new Date(e);return Intl.DateTimeFormat(navigator.language,{dateStyle:"medium",timeStyle:"short"}).format(r)}function u(e){const r=e.expiresAt&&new Date(e.expiresAt)<new Date;switch(!0){case(e.revoked&&e.suspended&&r):return"Revoked, Suspended, Expired";case(e.revoked&&e.suspended):return"Revoked, Suspended";case(e.revoked&&r):return"Revoked, Expired";case(e.suspended&&r):return"Suspended, Expired";case e.suspended:return"Suspended";case e.revoked:return"Revoked";case r:return"Expired";default:return"Active"}}function a(e){return e===0||!e?"Lifetime":n(e)}function n(e){const r=t({start:0,end:e*1e3});return[r.years&&`${r.years}y`,r.months&&`${r.months}m`,r.days&&`${r.days}d`,r.hours&&`${r.hours}h`].filter(Boolean).join(" ").trim()}const i={windows:"Windows",macos:"macOS",linux:"Linux",ios:"iOS",android:"Android"};export{i as ALL_OS,s as formatDate,u as getLicenseStatus,a as getValidityDisplay,n as secondsToDuration};
2
2
  //# sourceMappingURL=data-table-commons.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"data-table-commons.js","sources":["../../lib/components/data-table-commons.tsx"],"sourcesContent":["import type { components, operations, paths } from '@cryptlex/web-api-types';\nimport { intervalToDuration } from 'date-fns';\nimport type createClient from 'openapi-fetch';\n\n// TODO, i18n using react-aria\nexport function formatDate(date: string | null | undefined) {\n if (!date) return null;\n const _date = new Date(date);\n return Intl.DateTimeFormat(undefined, {\n dateStyle: 'medium',\n timeStyle: 'short',\n }).format(_date);\n}\n/**\n * Format multiple license parameters (expired, suspended, revoked) into a single status\n */\nexport function getLicenseStatus(license: any): string {\n const licenseExpired = license.expiresAt && new Date(license.expiresAt) < new Date();\n // Status Column\n switch (true) {\n case license.revoked && license.suspended && licenseExpired:\n return 'Revoked, Suspended, Expired';\n case license.revoked && license.suspended:\n return 'Revoked, Suspended';\n case license.revoked && licenseExpired:\n return 'Revoked, Expired';\n case license.suspended && licenseExpired:\n return 'Suspended, Expired';\n case license.suspended:\n return 'Suspended';\n case license.revoked:\n return 'Revoked';\n case licenseExpired:\n return 'Expired';\n default:\n return 'Active';\n }\n}\n\nexport function getValidityDisplay(validity: number | undefined) {\n if (validity === 0 || !validity) {\n return 'Lifetime';\n } else {\n return secondsToDuration(validity);\n }\n}\nexport function secondsToDuration(seconds: number): string {\n //@ts-ignore\n const duration = intervalToDuration({\n start: 0,\n end: seconds * 1000,\n });\n\n const parts = [\n duration.years && `${duration.years}y`,\n duration.months && `${duration.months}m`,\n duration.days && `${duration.days}d`,\n duration.hours && `${duration.hours}h`,\n ];\n\n // Filter out undefined values and join\n return parts.filter(Boolean).join(' ').trim();\n}\n\nexport const ALL_OS: { [key: string]: string } = {\n windows: 'Windows',\n macos: 'macOS',\n linux: 'Linux',\n ios: 'iOS',\n android: 'Android',\n};\n\nexport type _CtxClient = ReturnType<typeof createClient<paths>>;\n\nexport type ApiSchema<T extends keyof components['schemas']> = components['schemas'][T];\nexport type ApiQuery<T extends keyof operations> = NonNullable<operations[T]['parameters']['query']>;\nexport type ApiGetAllParameters = {\n page: number;\n limit: number;\n search?: string;\n sort?: string;\n};\n\nexport type ApiFilter<T extends keyof operations> = Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>;\nexport type ApiFilters<T extends keyof operations> = NonNullable<\n Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>\n>;\n"],"names":["formatDate","date","_date","getLicenseStatus","license","licenseExpired","getValidityDisplay","validity","secondsToDuration","seconds","duration","intervalToDuration","ALL_OS"],"mappings":"8CAKO,SAASA,EAAWC,EAAiC,CACxD,GAAI,CAACA,EAAM,OAAO,KAClB,MAAMC,EAAQ,IAAI,KAAKD,CAAI,EAC3B,OAAO,KAAK,eAAe,OAAW,CAClC,UAAW,SACX,UAAW,OAAA,CACd,EAAE,OAAOC,CAAK,CACnB,CAIO,SAASC,EAAiBC,EAAsB,CACnD,MAAMC,EAAiBD,EAAQ,WAAa,IAAI,KAAKA,EAAQ,SAAS,EAAI,IAAI,KAE9E,OAAQ,GAAA,CACJ,KAAKA,EAAQ,SAAWA,EAAQ,WAAaC,GACzC,MAAO,8BACX,KAAKD,EAAQ,SAAWA,EAAQ,WAC5B,MAAO,qBACX,KAAKA,EAAQ,SAAWC,GACpB,MAAO,mBACX,KAAKD,EAAQ,WAAaC,GACtB,MAAO,qBACX,KAAKD,EAAQ,UACT,MAAO,YACX,KAAKA,EAAQ,QACT,MAAO,UACX,KAAKC,EACD,MAAO,UACX,QACI,MAAO,QAAA,CAEnB,CAEO,SAASC,EAAmBC,EAA8B,CAC7D,OAAIA,IAAa,GAAK,CAACA,EACZ,WAEAC,EAAkBD,CAAQ,CAEzC,CACO,SAASC,EAAkBC,EAAyB,CAEvD,MAAMC,EAAWC,EAAmB,CAChC,MAAO,EACP,IAAKF,EAAU,GAAA,CAClB,EAUD,MARc,CACVC,EAAS,OAAS,GAAGA,EAAS,KAAK,IACnCA,EAAS,QAAU,GAAGA,EAAS,MAAM,IACrCA,EAAS,MAAQ,GAAGA,EAAS,IAAI,IACjCA,EAAS,OAAS,GAAGA,EAAS,KAAK,GAAA,EAI1B,OAAO,OAAO,EAAE,KAAK,GAAG,EAAE,KAAA,CAC3C,CAEO,MAAME,EAAoC,CAC7C,QAAS,UACT,MAAO,QACP,MAAO,QACP,IAAK,MACL,QAAS,SACb"}
1
+ {"version":3,"file":"data-table-commons.js","sources":["../../lib/components/data-table-commons.tsx"],"sourcesContent":["import type { components, operations, paths } from '@cryptlex/web-api-types';\nimport { intervalToDuration } from 'date-fns';\nimport type createClient from 'openapi-fetch';\n\nexport function formatDate(date: string | null | undefined) {\n if (!date) return null;\n const _date = new Date(date);\n return Intl.DateTimeFormat(navigator.language, {\n dateStyle: 'medium',\n timeStyle: 'short',\n }).format(_date);\n}\n/**\n * Format multiple license parameters (expired, suspended, revoked) into a single status\n */\nexport function getLicenseStatus(license: any): string {\n const licenseExpired = license.expiresAt && new Date(license.expiresAt) < new Date();\n // Status Column\n switch (true) {\n case license.revoked && license.suspended && licenseExpired:\n return 'Revoked, Suspended, Expired';\n case license.revoked && license.suspended:\n return 'Revoked, Suspended';\n case license.revoked && licenseExpired:\n return 'Revoked, Expired';\n case license.suspended && licenseExpired:\n return 'Suspended, Expired';\n case license.suspended:\n return 'Suspended';\n case license.revoked:\n return 'Revoked';\n case licenseExpired:\n return 'Expired';\n default:\n return 'Active';\n }\n}\n\nexport function getValidityDisplay(validity: number | undefined) {\n if (validity === 0 || !validity) {\n return 'Lifetime';\n } else {\n return secondsToDuration(validity);\n }\n}\nexport function secondsToDuration(seconds: number): string {\n //@ts-ignore\n const duration = intervalToDuration({\n start: 0,\n end: seconds * 1000,\n });\n\n const parts = [\n duration.years && `${duration.years}y`,\n duration.months && `${duration.months}m`,\n duration.days && `${duration.days}d`,\n duration.hours && `${duration.hours}h`,\n ];\n\n // Filter out undefined values and join\n return parts.filter(Boolean).join(' ').trim();\n}\n\nexport const ALL_OS: { [key: string]: string } = {\n windows: 'Windows',\n macos: 'macOS',\n linux: 'Linux',\n ios: 'iOS',\n android: 'Android',\n};\n\nexport type _CtxClient = ReturnType<typeof createClient<paths>>;\n\nexport type ApiSchema<T extends keyof components['schemas']> = components['schemas'][T];\nexport type ApiQuery<T extends keyof operations> = NonNullable<operations[T]['parameters']['query']>;\nexport type ApiGetAllParameters = {\n page: number;\n limit: number;\n search?: string;\n sort?: string;\n};\n\nexport type ApiFilter<T extends keyof operations> = Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>;\nexport type ApiFilters<T extends keyof operations> = NonNullable<\n Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>\n>;\n"],"names":["formatDate","date","_date","getLicenseStatus","license","licenseExpired","getValidityDisplay","validity","secondsToDuration","seconds","duration","intervalToDuration","ALL_OS"],"mappings":"8CAIO,SAASA,EAAWC,EAAiC,CACxD,GAAI,CAACA,EAAM,OAAO,KAClB,MAAMC,EAAQ,IAAI,KAAKD,CAAI,EAC3B,OAAO,KAAK,eAAe,UAAU,SAAU,CAC3C,UAAW,SACX,UAAW,OAAA,CACd,EAAE,OAAOC,CAAK,CACnB,CAIO,SAASC,EAAiBC,EAAsB,CACnD,MAAMC,EAAiBD,EAAQ,WAAa,IAAI,KAAKA,EAAQ,SAAS,EAAI,IAAI,KAE9E,OAAQ,GAAA,CACJ,KAAKA,EAAQ,SAAWA,EAAQ,WAAaC,GACzC,MAAO,8BACX,KAAKD,EAAQ,SAAWA,EAAQ,WAC5B,MAAO,qBACX,KAAKA,EAAQ,SAAWC,GACpB,MAAO,mBACX,KAAKD,EAAQ,WAAaC,GACtB,MAAO,qBACX,KAAKD,EAAQ,UACT,MAAO,YACX,KAAKA,EAAQ,QACT,MAAO,UACX,KAAKC,EACD,MAAO,UACX,QACI,MAAO,QAAA,CAEnB,CAEO,SAASC,EAAmBC,EAA8B,CAC7D,OAAIA,IAAa,GAAK,CAACA,EACZ,WAEAC,EAAkBD,CAAQ,CAEzC,CACO,SAASC,EAAkBC,EAAyB,CAEvD,MAAMC,EAAWC,EAAmB,CAChC,MAAO,EACP,IAAKF,EAAU,GAAA,CAClB,EAUD,MARc,CACVC,EAAS,OAAS,GAAGA,EAAS,KAAK,IACnCA,EAAS,QAAU,GAAGA,EAAS,MAAM,IACrCA,EAAS,MAAQ,GAAGA,EAAS,IAAI,IACjCA,EAAS,OAAS,GAAGA,EAAS,KAAK,GAAA,EAI1B,OAAO,OAAO,EAAE,KAAK,GAAG,EAAE,KAAA,CAC3C,CAEO,MAAME,EAAoC,CAC7C,QAAS,UACT,MAAO,QACP,MAAO,QACP,IAAK,MACL,QAAS,SACb"}
@@ -1,2 +1,2 @@
1
- import"react/jsx-runtime";import"react";import"./button.js";import{C as z,D as G,F as H}from"./data-table.js";import"./date-picker.js";import"./id-search.js";import"./menu.js";import"./popover.js";import"../utils/form-hook.js";import"../utils/primitives.js";import"../utils/resource-names.js";import"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";import"lodash-es";import"@dnd-kit/core";import"@dnd-kit/sortable";import"@dnd-kit/utilities";import"@tanstack/react-query";import"@tanstack/react-table";import"@uidotdev/usehooks";import"./data-table-commons.js";import"date-fns";import"./searchfield.js";import"./field.js";import"./table.js";import"./checkbox.js";import"../utils/form-utils.js";import"../utils/form-context.js";import"@tanstack/react-form";import"@internationalized/date";import"./calendar.js";import"./datefield.js";import"./list-box.js";import"./select.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";export{z as COMPARISON_OPERATOR_LABELS,G as DataTableFilter,H as FILTER_COMPARISON_OPERATORS};
1
+ import"react/jsx-runtime";import"react";import"./button.js";import{C as z,D as G,F as H}from"./data-table.js";import"./date-picker.js";import"./menu.js";import"./popover.js";import"../utils/form-hook.js";import"../utils/primitives.js";import"../utils/resource-names.js";import"./icons.js";import"./id-search.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";import"lodash-es";import"@dnd-kit/core";import"@dnd-kit/sortable";import"@dnd-kit/utilities";import"@tanstack/react-query";import"@tanstack/react-table";import"@uidotdev/usehooks";import"./data-table-commons.js";import"date-fns";import"./searchfield.js";import"./field.js";import"./table.js";import"./checkbox.js";import"../utils/form-utils.js";import"../utils/form-context.js";import"@tanstack/react-form";import"@internationalized/date";import"./calendar.js";import"./datefield.js";import"./list-box.js";import"./select.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";export{z as COMPARISON_OPERATOR_LABELS,G as DataTableFilter,H as FILTER_COMPARISON_OPERATORS};
2
2
  //# sourceMappingURL=data-table-filter.js.map
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,Fragment as C,jsxs as c}from"react/jsx-runtime";import{createContext as le,useState as D,useMemo as B,useEffect as se,useContext as ce,useRef as de}from"react";import{Button as S}from"./button.js";import{useSensors as ue,useSensor as K,PointerSensor as me,KeyboardSensor as ge,DndContext as pe,closestCenter as fe,DragOverlay as he}from"@dnd-kit/core";import{sortableKeyboardCoordinates as be,SortableContext as Se,verticalListSortingStrategy as ye,arrayMove as ve,useSortable as Ce}from"@dnd-kit/sortable";import{CSS as xe}from"@dnd-kit/utilities";import{useQuery as we,keepPreviousData as Ae}from"@tanstack/react-query";import{createColumnHelper as Y,useReactTable as Ie,getCoreRowModel as Te,flexRender as $}from"@tanstack/react-table";import{useLocalStorage as Q}from"@uidotdev/usehooks";import{merge as Ne}from"lodash-es";import{formatDate as G}from"./data-table-commons.js";import{TfDatePicker as Pe}from"./date-picker.js";import{TfIdSearchInput as Fe}from"./id-search.js";import{EasyMenu as L,MenuItem as R}from"./menu.js";import{PopoverTrigger as De,Popover as Re}from"./popover.js";import{useAppForm as Oe}from"../utils/form-hook.js";import{classNames as w}from"../utils/primitives.js";import{useResourceFormatter as ee}from"../utils/resource-names.js";import{IcInfo as _e,IcMoreVertical as ze,IcRefresh as Le,IcColumns as Me,IcGrip as Ee,IcFirst as Ve,IcLeft as $e,IcRight as ke,IcLast as qe,IcSortAsc as He,IcSortDesc as Ue,IcSortNone as je,IcFilter as Be,IcRemove as Ke}from"./icons.js";import{Loader as Qe}from"./loader.js";import{SearchField as Ge}from"./searchfield.js";import{Table as We,TableHeader as Xe,TableRow as W,TableHead as Ze,TableBody as Je,TableCell as Ye}from"./table.js";import{Checkbox as X}from"./checkbox.js";import"class-variance-authority";import"react-aria-components";import"date-fns";import"@internationalized/date";import"./calendar.js";import"./field.js";import"./datefield.js";import"../utils/form-context.js";import"@tanstack/react-form";import"./list-box.js";import"./select.js";import"../utils/form-utils.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";import"clsx";function Jt(t){const n=async(o,i,g,l)=>{const u={...l,page:o.pageIndex+1,limit:o.pageSize,sort:et(i[0]),search:g},f=await t(u);return{total:Number.parseInt(f.response.headers.get("Pagination-Count")||"0"),data:f.data}},r=Y();return{callback:n,columnHelper:r}}function et(t){return t?t.desc?`-${t.id}`:`+${t.id}`:"-createdAt"}const N=Y(),tt=[N.accessor("checkbox",{header:({table:t})=>e(X,{isIndeterminate:t.getIsSomeRowsSelected()&&!t.getIsAllPageRowsSelected(),isSelected:t.getIsAllPageRowsSelected()||t.getIsSomePageRowsSelected(),onChange:()=>t.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:t})=>e(X,{isSelected:t.getIsSelected(),onChange:()=>t.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],nt=[N.accessor("id",{header:()=>"ID"})],rt=[N.accessor("createdAt",{header:()=>"Creation Date",cell:({row:t})=>{const n=t.getValue("createdAt");return G(n)},enableHiding:!1}),N.accessor("updatedAt",{header:()=>"Last Updated",cell:({row:t})=>{const n=t.getValue("updatedAt");return G(n)},enableHiding:!1})],k="TableActions",at=t=>t.length===0?[]:[N.accessor(k,{header:"",id:k,enableHiding:!1,cell:({row:n})=>e(L,{label:e(ze,{}),size:"icon",children:t.map(r=>e(R,{isDisabled:r.disabled(n.original),onPress:()=>r.onPress(n.original),children:r.label}))})})];function Yt({resourceName:t,columns:n,callback:r,filterConfig:o,columnsToHideByDefault:i={},allowSelection:g=!1,initialFilters:l=[],tableActions:u,rowActions:f}){const[d,y]=D({pagination:{pageIndex:0,pageSize:20},sorting:[]}),[m,s]=D({}),[p,h]=D(""),[x,O]=Q(`${t}_ctx_column_order_preference`,[]),[q,re]=Q(`${t}_ctx_column_visibility_preference`,{id:!1,updatedAt:!1,...i}),[M,ae]=D(l),E=B(()=>M.map(a=>Array.isArray(a.value)?{[a.property]:{[a.operator]:a.value.join(",")}}:{[a.property]:{[a.operator]:a.value}}).reduce((a,v)=>Ne(a,v),{}),[M]),V=a=>{y(v=>({...v,...a}))},{sorting:_,pagination:z}=d,I=we({queryKey:[t,z,_,p,E],queryFn:()=>r(z,_,p,E),placeholderData:Ae,retry:0,refetchOnWindowFocus:!1}),H=B(()=>{const a=I.data?.data;if(!a?.length)return[];const v=b=>b!=null&&typeof b=="object"&&"metadata"in b&&Array.isArray(b.metadata),j=a.filter(v);return j.length===0?[]:Array.from(new Set(j.flatMap(b=>b.metadata?.map(T=>T.key)??[]))).map(b=>N.accessor(T=>v(T)?T?.metadata?.find(F=>F.key===b)?.value??"":"",{id:b,header:b,enableSorting:!1,cell:T=>{const F=T.getValue();return F==null?"":String(F)}}))},[I.data?.data]),ie=[...g?tt:[],...nt,...n,...H.length?H:[],...rt,...at(f??[])];function oe(a){return typeof a=="function"}function P(a,v){return oe(a)?a(v):a}const U=Ie({data:I.data?.data??[],columns:ie,getCoreRowModel:Te(),rowCount:I.data?.total,manualPagination:!0,onPaginationChange:a=>{V({pagination:P(a,z)})},manualSorting:!0,onSortingChange:a=>{s({}),V({sorting:[...P(a,_)]})},manualFiltering:!0,onColumnVisibilityChange:a=>{re(P(a,q))},onRowSelectionChange:a=>{s(P(a,m))},onColumnOrderChange:a=>{O(P(a,x))},state:{sorting:_,columnVisibility:q,pagination:z,rowSelection:m,columnOrder:x},meta:{refetch:I.refetch}});return se(()=>{O([...U.getAllLeafColumns().map(a=>a.id)])},[]),{tableState:d,updateTableState:V,query:I,setSearchQuery:h,searchQuery:p,tanTable:U,mergedFilters:E,filters:M,setFilters:ae,filterConfig:o,tableActions:u}}const te=le(null),A=()=>{const t=ce(te);if(!t)throw Error("DataTable should be used within DataTableProvider.");return t};function en({children:t,...n}){return e(te.Provider,{value:n,children:t})}function tn({className:t,...n}){const{query:r,tanTable:o}=A();return e(C,{children:c("section",{...n,className:w("flex flex-col bg-card",t),children:[e(st,{}),c("div",{className:"w-full overflow-auto border-x grow min-h-table relative",tabIndex:0,children:[r.isLoading&&e(Z,{className:"cursor-wait",children:e(Qe,{})}),!r.isLoading&&o.getRowModel().rows.length===0&&e(Z,{className:"cursor-not-allowed",children:!r.isFetching&&(r.isError?c("span",{className:"flex gap-3 justify-center items-center",children:[e(_e,{}),e("span",{children:r.error.message})]}):r.data?.data?.length===0?e(C,{children:"No results found."}):e(C,{children:"Unknown error. Please contact customer support."}))}),!r.isLoading&&o.getRowModel().rows.length!==0&&e(ct,{className:"size-full"})]}),c("div",{className:"flex w-full justify-between border gap-icon p-icon overflow-x-auto",children:[c("div",{className:"flex gap-icon",children:[e(it,{}),e(lt,{})]}),e(ot,{})]})]})})}function Z({children:t,className:n}){return c(C,{children:[e("span",{className:w(n,"absolute top-0 bg-card z-20 size-full body-sm flex items-center justify-center"),children:t}),e("span",{className:"relative h-full w-0 block"})]})}function it(){const{tanTable:t}=A(),[n,r]=D(null),o=ee(),i=ue(K(me),K(ge,{coordinateGetter:be}));return e(pe,{sensors:i,collisionDetection:fe,onDragStart:l=>{const{active:u}=l;r(u.id.toString())},onDragEnd:l=>{const{active:u,over:f}=l;if(f&&u.id!==f.id){const d=t.getState().columnOrder,y=d.indexOf(u.id.toString()),m=d.indexOf(f.id.toString());t.setColumnOrder([...ve(d,y,m)])}r(null)},children:c(Se,{items:t.getState().columnOrder,strategy:ye,children:[c(L,{label:c(C,{children:[e(Me,{}),"Columns"]}),selectionMode:"multiple",items:t.getAllFlatColumns(),selectedKeys:t.getIsAllColumnsVisible()?"all":t.getVisibleFlatColumns().map(l=>l.id),children:[e(R,{onAction:()=>t.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),t.getState().columnOrder.map(l=>{const u=t.getAllFlatColumns().find(f=>f.id===l);return u?e(g,{column:u},u.id):null})]}),e(he,{children:n?e("div",{className:"opacity-70 border-2 border-primary",children:o(n)}):null})]})});function g({column:l}){const{attributes:u,listeners:f,setNodeRef:d,transform:y,transition:m}=Ce({id:l.id}),s={transform:xe.Transform.toString(y),transition:m,zIndex:"999"};return c(R,{ref:d,style:s,...u,id:l.id,onAction:()=>l.toggleVisibility(),isDisabled:!l.getCanHide(),className:"flex items-center",children:[e(Ee,{...f,className:"size-icon cursor-grab"}),o(l.id),l.getIsSorted()&&e(ne,{className:"size-icon",direction:l.getIsSorted()})]})}}function ot(){const{tanTable:t,query:n}=A(),r=n.data?.total??0;return c("div",{className:"flex items-center gap-2",children:[e("span",{className:"whitespace-nowrap body-sm text-muted",children:`${t.getState().pagination.pageIndex*t.getState().pagination.pageSize+1} - ${Math.min((t.getState().pagination.pageIndex+1)*t.getState().pagination.pageSize,r)} of ${r?.toLocaleString()}`}),e(S,{onPress:()=>t.firstPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(Ve,{})}),e(S,{onPress:()=>t.previousPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e($e,{})}),e(S,{onPress:()=>t.nextPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e(ke,{})}),e(S,{onClick:()=>t.lastPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e(qe,{})})]})}function lt(){const{tanTable:t}=A(),n=[10,20,30,40,50];return e(L,{label:t.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[t.getState().pagination.pageSize.toString()],items:n.map(r=>({id:r.toString(),value:r})),children:r=>e(R,{onAction:()=>t.setPageSize(r.value),children:r.value})})}function st(){const{query:t,tanTable:n,searchQuery:r,setSearchQuery:o,tableActions:i}=A();return c("section",{className:"flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto",children:[c("div",{className:"flex gap-icon",children:[e(S,{isPending:t.isFetching,onClick:()=>t.refetch(),variant:"neutral",size:"icon",children:e(Le,{})}),i.filter(g=>g.bulk===n.getSelectedRowModel().rows.length>0).map((g,l)=>{const u=g.icon;return e(S,{type:"button",isDisabled:t.isFetching,className:"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform",onPress:f=>{g.onClick(f,n.getSelectedRowModel().rows.map(d=>d.original))},size:"icon",children:e(u,{})},`${l}-${g.bulk}`)})]}),c("div",{className:"flex gap-icon",children:[e(ut,{}),e(Ge,{value:r,onChange:o})]})]})}function ne({direction:t,...n}){return t==="asc"?e(He,{...n}):t==="desc"?e(Ue,{...n}):e(je,{...n})}function ct({className:t}){const{tanTable:n}=A(),r=(o,i)=>w("animate-in fade-in slide-in-from-top-10","px-icon py-2 text-left body-sm font-medium whitespace-nowrap",o&&"bg-card sticky right-0 z-50 text-center",i);return c(We,{className:w(t),children:[e(Xe,{className:"sticky top-0 z-10",children:n.getHeaderGroups().map(o=>e(W,{className:w("h-input"),children:o.headers.map(i=>c(Ze,{className:r(!1,"bg-card"),children:[!i.column.getCanSort()&&!i.isPlaceholder&&e(C,{children:$(i.column.columnDef.header,i.getContext())}),i.column.getCanSort()&&c(S,{variant:"ghost",className:"w-full !justify-start !px-1.5",onPress:i.column.getToggleSortingHandler(),children:[$(i.column.columnDef.header,i.getContext()),e(ne,{direction:i.column.getIsSorted()})]})]},i.id))},o.id))}),e(Je,{className:"flex-1 overflow-y-auto relative",children:n.getRowModel().rows.map(o=>e(W,{className:w("h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":o.getIsSelected(),children:o.getVisibleCells().map(i=>e(Ye,{className:r(i.column.id===k),children:$(i.column.columnDef.cell,i.getContext())},i.id))},o.id))})]})}const nn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],dt={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"},J={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"]};function ut({className:t,...n}){const{filters:r,query:o,setFilters:i,filterConfig:g}=A(),l=de(null),u=ee(),d=Oe({defaultValues:{filters:r},onSubmit:({value:m})=>{i(m.filters)}}),y=Object.keys(g).sort();return e("section",{...n,className:w("flex gap-icon items-center",t),children:c(De,{onOpenChange:m=>{m?l.current?.focus():d.handleSubmit()},children:[c("div",{className:"relative",children:[r.length>0&&e("div",{className:"size-2 rounded-full absolute bg-destructive z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5"}),e(S,{isDisabled:o.isPending||y.length===0,type:"button",size:"icon",variant:"neutral",children:e(Be,{})})]}),e(Re,{className:"w-full p-icon",children:e("form",{onSubmit:m=>{m.preventDefault()},className:"flex flex-col gap-icon max-h-table overflow-auto ",children:e(d.Field,{mode:"array",name:"filters",children:m=>c(C,{children:[m.state.value.map((s,p)=>c("div",{className:"flex gap-icon items-center justify-normal",children:[e("span",{className:"body-sm",children:u(s.property)}),e(d.AppField,{name:`filters[${p}].operator`,children:h=>e(h.TfSingleSelect,{items:J[s.type].map(x=>({id:x,label:e(C,{children:dt[x]})}))})},s.id),s.type==="bool"&&e(d.AppField,{name:`filters[${p}].value`,children:h=>e(h.TfCheckbox,{})}),s.type==="date"&&e(d.AppField,{name:`filters[${p}].value`,children:h=>e(Pe,{})}),s.type==="id"&&e(d.AppField,{name:`filters[${p}].value`,children:h=>e(h.TfTextField,{})}),s.type==="string"&&e(d.AppField,{name:`filters[${p}].value`,children:h=>e(h.TfTextField,{})}),s.type==="enum"&&e(d.AppField,{name:`filters[${p}].value`,children:h=>e(h.TfMultiSelect,{items:g[s.property].options})}),s.type==="id-search"&&e(d.AppField,{name:`filters[${p}].value`,children:h=>e(Fe,{accessor:"id",searchFn:g[s.property].search})}),e(S,{type:"button",variant:"destructive",size:"icon",onPress:()=>m.removeValue(p),children:e(Ke,{})})]},s.id)),c("div",{className:"flex w-full items-center justify-end gap-2 not-first:mt-icon",children:[e(L,{label:"Add Filter",children:y.map(s=>e(R,{onAction:()=>{const p=g[s].type,h=O=>{switch(O){case"bool":return!0;case"string":return"";case"date":return new Date().toISOString();case"id":return"";case"id-search":return[];case"enum":return[]}},x={id:`${s}-${Date.now()}`,operator:J[p][0],value:h(p),type:p,property:s};m.pushValue(x)},children:u(s)},s))}),m.state.value.length>0?e(S,{type:"button",variant:"neutral",onPress:()=>{m.setValue([])},children:"Reset filters"}):null]})]})})})})]})})}export{dt as C,ut as D,tn as DataTable,te as DataTableContext,en as DataTableProvider,nn as F,Jt as getTableCallback,A as useDataTable,Yt as useDataTableState};
1
+ "use client";import{jsx as e,Fragment as C,jsxs as c}from"react/jsx-runtime";import{createContext as le,useState as D,useMemo as B,useEffect as se,useContext as ce,useRef as de}from"react";import{Button as S}from"./button.js";import{useSensors as ue,useSensor as K,PointerSensor as me,KeyboardSensor as ge,DndContext as pe,closestCenter as fe,DragOverlay as he}from"@dnd-kit/core";import{sortableKeyboardCoordinates as be,SortableContext as Se,verticalListSortingStrategy as ye,arrayMove as ve,useSortable as Ce}from"@dnd-kit/sortable";import{CSS as xe}from"@dnd-kit/utilities";import{useQuery as we,keepPreviousData as Ae}from"@tanstack/react-query";import{createColumnHelper as Y,useReactTable as Ie,getCoreRowModel as Te,flexRender as $}from"@tanstack/react-table";import{useLocalStorage as Q}from"@uidotdev/usehooks";import{merge as Ne}from"lodash-es";import{formatDate as G}from"./data-table-commons.js";import{TfDatePicker as Pe}from"./date-picker.js";import{EasyMenu as L,MenuItem as R}from"./menu.js";import{PopoverTrigger as Fe,Popover as De}from"./popover.js";import{useAppForm as Re}from"../utils/form-hook.js";import{classNames as w}from"../utils/primitives.js";import{useResourceFormatter as ee}from"../utils/resource-names.js";import{IcInfo as Oe,IcMoreVertical as _e,IcRefresh as ze,IcColumns as Le,IcGrip as Me,IcFirst as Ee,IcLeft as Ve,IcRight as $e,IcLast as ke,IcSortAsc as qe,IcSortDesc as He,IcSortNone as Ue,IcFilter as je,IcRemove as Be}from"./icons.js";import{TfMultipleIdSearchInput as Ke}from"./id-search.js";import{Loader as Qe}from"./loader.js";import{SearchField as Ge}from"./searchfield.js";import{Table as We,TableHeader as Xe,TableRow as W,TableHead as Ze,TableBody as Je,TableCell as Ye}from"./table.js";import{Checkbox as X}from"./checkbox.js";import"class-variance-authority";import"react-aria-components";import"date-fns";import"@internationalized/date";import"./calendar.js";import"./field.js";import"./datefield.js";import"../utils/form-context.js";import"@tanstack/react-form";import"./list-box.js";import"./select.js";import"../utils/form-utils.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";import"clsx";function Jt(t){const n=async(o,i,g,l)=>{const u={...l,page:o.pageIndex+1,limit:o.pageSize,sort:et(i[0]),search:g},f=await t(u);return{total:Number.parseInt(f.response.headers.get("Pagination-Count")||"0"),data:f.data}},r=Y();return{callback:n,columnHelper:r}}function et(t){return t?t.desc?`-${t.id}`:`+${t.id}`:"-createdAt"}const N=Y(),tt=[N.accessor("checkbox",{header:({table:t})=>e(X,{isIndeterminate:t.getIsSomeRowsSelected()&&!t.getIsAllPageRowsSelected(),isSelected:t.getIsAllPageRowsSelected()||t.getIsSomePageRowsSelected(),onChange:()=>t.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:t})=>e(X,{isSelected:t.getIsSelected(),onChange:()=>t.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],nt=[N.accessor("id",{header:()=>"ID"})],rt=[N.accessor("createdAt",{header:()=>"Creation Date",cell:({row:t})=>{const n=t.getValue("createdAt");return G(n)},enableHiding:!1}),N.accessor("updatedAt",{header:()=>"Last Updated",cell:({row:t})=>{const n=t.getValue("updatedAt");return G(n)},enableHiding:!1})],k="TableActions",at=t=>t.length===0?[]:[N.accessor(k,{header:"",id:k,enableHiding:!1,cell:({row:n})=>e(L,{label:e(_e,{}),size:"icon",children:t.map(r=>e(R,{isDisabled:r.disabled(n.original),onPress:()=>r.onPress(n.original),children:r.label}))})})];function Yt({resourceName:t,columns:n,callback:r,filterConfig:o,columnsToHideByDefault:i={},allowSelection:g=!1,initialFilters:l=[],tableActions:u,rowActions:f}){const[d,y]=D({pagination:{pageIndex:0,pageSize:20},sorting:[]}),[m,s]=D({}),[p,h]=D(""),[x,O]=Q(`${t}_ctx_column_order_preference`,[]),[q,re]=Q(`${t}_ctx_column_visibility_preference`,{id:!1,...i}),[M,ae]=D(l),E=B(()=>M.map(a=>Array.isArray(a.value)?{[a.property]:{[a.operator]:a.value.join(",")}}:{[a.property]:{[a.operator]:a.value}}).reduce((a,v)=>Ne(a,v),{}),[M]),V=a=>{y(v=>({...v,...a}))},{sorting:_,pagination:z}=d,I=we({queryKey:[t,z,_,p,E],queryFn:()=>r(z,_,p,E),placeholderData:Ae,retry:0,refetchOnWindowFocus:!1}),H=B(()=>{const a=I.data?.data;if(!a?.length)return[];const v=b=>b!=null&&typeof b=="object"&&"metadata"in b&&Array.isArray(b.metadata),j=a.filter(v);return j.length===0?[]:Array.from(new Set(j.flatMap(b=>b.metadata?.map(T=>T.key)??[]))).map(b=>N.accessor(T=>v(T)?T?.metadata?.find(F=>F.key===b)?.value??"":"",{id:b,header:b,enableSorting:!1,cell:T=>{const F=T.getValue();return F==null?"":String(F)}}))},[I.data?.data]),ie=[...g?tt:[],...nt,...n,...H.length?H:[],...rt,...at(f??[])];function oe(a){return typeof a=="function"}function P(a,v){return oe(a)?a(v):a}const U=Ie({data:I.data?.data??[],columns:ie,getCoreRowModel:Te(),rowCount:I.data?.total,manualPagination:!0,onPaginationChange:a=>{V({pagination:P(a,z)})},manualSorting:!0,onSortingChange:a=>{s({}),V({sorting:[...P(a,_)]})},manualFiltering:!0,onColumnVisibilityChange:a=>{re(P(a,q))},onRowSelectionChange:a=>{s(P(a,m))},onColumnOrderChange:a=>{O(P(a,x))},state:{sorting:_,columnVisibility:q,pagination:z,rowSelection:m,columnOrder:x},meta:{refetch:I.refetch}});return se(()=>{O([...U.getAllLeafColumns().map(a=>a.id)])},[]),{tableState:d,updateTableState:V,query:I,setSearchQuery:h,searchQuery:p,tanTable:U,mergedFilters:E,filters:M,setFilters:ae,filterConfig:o,tableActions:u}}const te=le(null),A=()=>{const t=ce(te);if(!t)throw Error("DataTable should be used within DataTableProvider.");return t};function en({children:t,...n}){return e(te.Provider,{value:n,children:t})}function tn({className:t,...n}){const{query:r,tanTable:o}=A();return e(C,{children:c("section",{...n,className:w("flex flex-col bg-card",t),children:[e(st,{}),c("div",{className:"w-full overflow-auto border-x grow min-h-table relative",tabIndex:0,children:[r.isLoading&&e(Z,{className:"cursor-wait",children:e(Qe,{})}),!r.isLoading&&o.getRowModel().rows.length===0&&e(Z,{className:"cursor-not-allowed",children:!r.isFetching&&(r.isError?c("span",{className:"flex gap-3 justify-center items-center",children:[e(Oe,{}),e("span",{children:r.error.message})]}):r.data?.data?.length===0?e(C,{children:"No results found."}):e(C,{children:"Unknown error. Please contact customer support."}))}),!r.isLoading&&o.getRowModel().rows.length!==0&&e(ct,{className:"size-full"})]}),c("div",{className:"flex w-full justify-between border gap-icon p-icon overflow-x-auto",children:[c("div",{className:"flex gap-icon",children:[e(it,{}),e(lt,{})]}),e(ot,{})]})]})})}function Z({children:t,className:n}){return c(C,{children:[e("span",{className:w(n,"absolute top-0 bg-card z-20 size-full body-sm flex items-center justify-center"),children:t}),e("span",{className:"relative h-full w-0 block"})]})}function it(){const{tanTable:t}=A(),[n,r]=D(null),o=ee(),i=ue(K(me),K(ge,{coordinateGetter:be}));return e(pe,{sensors:i,collisionDetection:fe,onDragStart:l=>{const{active:u}=l;r(u.id.toString())},onDragEnd:l=>{const{active:u,over:f}=l;if(f&&u.id!==f.id){const d=t.getState().columnOrder,y=d.indexOf(u.id.toString()),m=d.indexOf(f.id.toString());t.setColumnOrder([...ve(d,y,m)])}r(null)},children:c(Se,{items:t.getState().columnOrder,strategy:ye,children:[c(L,{label:c(C,{children:[e(Le,{}),"Columns"]}),selectionMode:"multiple",items:t.getAllFlatColumns(),selectedKeys:t.getIsAllColumnsVisible()?"all":t.getVisibleFlatColumns().map(l=>l.id),children:[e(R,{onAction:()=>t.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),t.getState().columnOrder.map(l=>{const u=t.getAllFlatColumns().find(f=>f.id===l);return u?e(g,{column:u},u.id):null})]}),e(he,{children:n?e("div",{className:"opacity-70 border-2 border-primary",children:o(n)}):null})]})});function g({column:l}){const{attributes:u,listeners:f,setNodeRef:d,transform:y,transition:m}=Ce({id:l.id}),s={transform:xe.Transform.toString(y),transition:m,zIndex:"999"};return c(R,{ref:d,style:s,...u,id:l.id,onAction:()=>l.toggleVisibility(),isDisabled:!l.getCanHide(),className:"flex items-center",children:[e(Me,{...f,className:"size-icon cursor-grab"}),o(l.id),l.getIsSorted()&&e(ne,{className:"size-icon",direction:l.getIsSorted()})]})}}function ot(){const{tanTable:t,query:n}=A(),r=n.data?.total??0;return c("div",{className:"flex items-center gap-2",children:[e("span",{className:"whitespace-nowrap body-sm text-muted",children:`${t.getState().pagination.pageIndex*t.getState().pagination.pageSize+1} - ${Math.min((t.getState().pagination.pageIndex+1)*t.getState().pagination.pageSize,r)} of ${r?.toLocaleString()}`}),e(S,{onPress:()=>t.firstPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(Ee,{})}),e(S,{onPress:()=>t.previousPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(Ve,{})}),e(S,{onPress:()=>t.nextPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e($e,{})}),e(S,{onClick:()=>t.lastPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e(ke,{})})]})}function lt(){const{tanTable:t}=A(),n=[10,20,30,40,50];return e(L,{label:t.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[t.getState().pagination.pageSize.toString()],items:n.map(r=>({id:r.toString(),value:r})),children:r=>e(R,{onAction:()=>t.setPageSize(r.value),children:r.value})})}function st(){const{query:t,tanTable:n,searchQuery:r,setSearchQuery:o,tableActions:i}=A();return c("section",{className:"flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto",children:[c("div",{className:"flex gap-icon",children:[e(S,{isPending:t.isFetching,onClick:()=>t.refetch(),variant:"neutral",size:"icon",children:e(ze,{})}),i.filter(g=>g.bulk===n.getSelectedRowModel().rows.length>0).map((g,l)=>{const u=g.icon;return e(S,{type:"button",isDisabled:t.isFetching,className:"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform",onPress:f=>{g.onClick(f,n.getSelectedRowModel().rows.map(d=>d.original))},size:"icon",children:e(u,{})},`${l}-${g.bulk}`)})]}),c("div",{className:"flex gap-icon",children:[e(ut,{}),e(Ge,{value:r,onChange:o})]})]})}function ne({direction:t,...n}){return t==="asc"?e(qe,{...n}):t==="desc"?e(He,{...n}):e(Ue,{...n})}function ct({className:t}){const{tanTable:n}=A(),r=(o,i)=>w("animate-in fade-in slide-in-from-top-10","px-icon py-2 text-left body-sm font-medium whitespace-nowrap",o&&"bg-card sticky right-0 z-50 text-center",i);return c(We,{className:w(t),children:[e(Xe,{className:"sticky top-0 z-10",children:n.getHeaderGroups().map(o=>e(W,{className:w("h-input"),children:o.headers.map(i=>c(Ze,{className:r(!1,"bg-card"),children:[!i.column.getCanSort()&&!i.isPlaceholder&&e(C,{children:$(i.column.columnDef.header,i.getContext())}),i.column.getCanSort()&&c(S,{variant:"ghost",className:"w-full !justify-start !px-1.5",onPress:i.column.getToggleSortingHandler(),children:[$(i.column.columnDef.header,i.getContext()),e(ne,{direction:i.column.getIsSorted()})]})]},i.id))},o.id))}),e(Je,{className:"flex-1 overflow-y-auto relative",children:n.getRowModel().rows.map(o=>e(W,{className:w("h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":o.getIsSelected(),children:o.getVisibleCells().map(i=>e(Ye,{className:r(i.column.id===k),children:$(i.column.columnDef.cell,i.getContext())},i.id))},o.id))})]})}const nn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],dt={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"},J={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"]};function ut({className:t,...n}){const{filters:r,query:o,setFilters:i,filterConfig:g}=A(),l=de(null),u=ee(),d=Re({defaultValues:{filters:r},onSubmit:({value:m})=>{i(m.filters)}}),y=Object.keys(g).sort();return e("section",{...n,className:w("flex gap-icon items-center",t),children:c(Fe,{onOpenChange:m=>{m?l.current?.focus():d.handleSubmit()},children:[c("div",{className:"relative",children:[r.length>0&&e("div",{className:"size-2 rounded-full absolute bg-destructive z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5"}),e(S,{isDisabled:o.isPending||y.length===0,type:"button",size:"icon",variant:"neutral",children:e(je,{})})]}),e(De,{className:"w-full p-icon",children:e("form",{onSubmit:m=>{m.preventDefault()},className:"flex flex-col gap-icon max-h-table overflow-auto ",children:e(d.Field,{mode:"array",name:"filters",children:m=>c(C,{children:[m.state.value.map((s,p)=>c("div",{className:"flex gap-icon items-center justify-normal",children:[e("span",{className:"body-sm",children:u(s.property)}),e(d.AppField,{name:`filters[${p}].operator`,children:h=>e(h.TfSingleSelect,{items:J[s.type].map(x=>({id:x,label:e(C,{children:dt[x]})}))})},s.id),s.type==="bool"&&e(d.AppField,{name:`filters[${p}].value`,children:h=>e(h.TfCheckbox,{})}),s.type==="date"&&e(d.AppField,{name:`filters[${p}].value`,children:h=>e(Pe,{})}),s.type==="id"&&e(d.AppField,{name:`filters[${p}].value`,children:h=>e(h.TfTextField,{})}),s.type==="string"&&e(d.AppField,{name:`filters[${p}].value`,children:h=>e(h.TfTextField,{})}),s.type==="enum"&&e(d.AppField,{name:`filters[${p}].value`,children:h=>e(h.TfMultiSelect,{items:g[s.property].options})}),s.type==="id-search"&&e(d.AppField,{name:`filters[${p}].value`,children:h=>e(Ke,{accessor:"id",searchFn:g[s.property].search})}),e(S,{type:"button",variant:"destructive",size:"icon",onPress:()=>m.removeValue(p),children:e(Be,{})})]},s.id)),c("div",{className:"flex w-full items-center justify-end gap-2 not-first:mt-icon",children:[e(L,{label:"Add Filter",children:y.map(s=>e(R,{onAction:()=>{const p=g[s].type,h=O=>{switch(O){case"bool":return!0;case"string":return"";case"date":return new Date().toISOString();case"id":return"";case"id-search":return[];case"enum":return[]}},x={id:`${s}-${Date.now()}`,operator:J[p][0],value:h(p),type:p,property:s};m.pushValue(x)},children:u(s)},s))}),m.state.value.length>0?e(S,{type:"button",variant:"neutral",onPress:()=>{m.setValue([])},children:"Reset filters"}):null]})]})})})})]})})}export{dt as C,ut as D,tn as DataTable,te as DataTableContext,en as DataTableProvider,nn as F,Jt as getTableCallback,A as useDataTable,Yt as useDataTableState};
2
2
  //# sourceMappingURL=data-table.js.map
@@ -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';\nimport {\n closestCenter,\n DndContext,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n arrayMove,\n SortableContext,\n sortableKeyboardCoordinates,\n useSortable,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n type AccessorFnColumnDef,\n type Column,\n type ColumnDef,\n type ColumnHelper,\n type ColumnOrderState,\n createColumnHelper,\n flexRender,\n getCoreRowModel,\n type PaginationState,\n type RowSelectionState,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport { useLocalStorage } from '@uidotdev/usehooks';\nimport { merge } from 'lodash-es';\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport type { PressEvent } from 'react-aria-components';\nimport { Button } from '../components/button';\nimport { type ApiSchema, formatDate } from '../components/data-table-commons';\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 { classNames } from '../utils/primitives';\nimport { useResourceFormatter } from '../utils/resource-names';\nimport type { CtxResourceName } from '../utils/resources';\nimport { Checkbox } from './checkbox';\nimport {\n type CtxIcon,\n IcColumns,\n IcFirst,\n IcGrip,\n IcInfo,\n IcLast,\n IcLeft,\n IcMoreVertical,\n IcRefresh,\n IcRight,\n IcSortAsc,\n IcSortDesc,\n IcSortNone,\n} from './icons';\n\n/** Reserved name for actions column */\n// export const ACTIONS_COLUMN_ID = 'tableActions';\n\nexport type TableAction<in TActionData> = {\n onClick: (e: PressEvent, t: TActionData[]) => void;\n bulk: boolean;\n icon: CtxIcon;\n tooltip?: string;\n};\n\nexport type TableFetchFn<in out TData extends object> = (\n p: PaginationState,\n s: SortingState,\n q: string,\n f: Record<string, any>\n) => Promise<{\n total: number;\n data: TData[] | undefined;\n}>;\nexport function getTableCallback<T extends object>(\n getter: (\n q: Record<string, any>\n ) => Promise<{ data?: T[]; error?: { code?: string | null; message: string }; response: Response }>\n): { callback: TableFetchFn<T>; columnHelper: ColumnHelper<T> } {\n const callback: TableFetchFn<T> = async (pagination, sorting, searching, filters) => {\n const query = {\n ...filters,\n page: pagination.pageIndex + 1,\n limit: pagination.pageSize,\n sort: generateSortParam(sorting[0]),\n search: searching,\n };\n\n const _f = await getter(query);\n\n return {\n total: Number.parseInt(_f.response.headers.get('Pagination-Count') || '0'),\n data: _f.data,\n };\n };\n\n const columnHelper = createColumnHelper<T>();\n\n return { callback, columnHelper };\n}\n\nfunction generateSortParam(sort: { id: string; desc: boolean } | undefined): string {\n if (sort) {\n if (sort.desc) {\n return `-${sort.id}`;\n } else {\n return `+${sort.id}`;\n }\n } else {\n return '-createdAt';\n }\n}\n\nconst cH = createColumnHelper<any>();\nconst TABLE_CHECK_BOX_COLUMN = [\n cH.accessor('checkbox', {\n header: ({ table }) => (\n <Checkbox\n isIndeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n isSelected={table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()}\n onChange={() => table.toggleAllPageRowsSelected()}\n aria-label=\"Select all\"\n />\n ),\n\n cell: ({ row }) => (\n <Checkbox isSelected={row.getIsSelected()} onChange={() => row.toggleSelected()} aria-label=\"Select row\" />\n ),\n enableSorting: false,\n enableHiding: false,\n }),\n];\n\nconst TABLE_ID_COLUMN = [\n cH.accessor('id', {\n header: () => 'ID',\n }),\n];\nconst TABLE_DEFAULT_DATE_COLUMNS = [\n cH.accessor('createdAt', {\n header: () => 'Creation Date',\n cell: ({ row }) => {\n const date = row.getValue('createdAt') satisfies string | null | undefined;\n return formatDate(date);\n },\n enableHiding: false,\n }),\n cH.accessor('updatedAt', {\n header: () => 'Last Updated',\n cell: ({ row }) => {\n const date = row.getValue('updatedAt') satisfies string | null | undefined;\n return formatDate(date);\n },\n enableHiding: false,\n }),\n];\n\nconst ACTIONS_COLUMN_ID = 'TableActions';\nconst getActionColumn = (rowActions: RowAction<any>[]) => {\n if (rowActions.length === 0) return [];\n\n return [\n cH.accessor(ACTIONS_COLUMN_ID, {\n header: '',\n id: ACTIONS_COLUMN_ID,\n enableHiding: false,\n cell: ({ row }) => (\n <EasyMenu label={<IcMoreVertical />} size={'icon'}>\n {rowActions.map(ra => (\n <MenuItem isDisabled={ra.disabled(row.original)} onPress={() => ra.onPress(row.original)}>\n {ra.label}\n </MenuItem>\n ))}\n </EasyMenu>\n ),\n }),\n ];\n};\n\ntype RowAction<T> = {\n onPress: (t: T) => void;\n label: React.ReactElement;\n disabled: (t: T) => boolean;\n};\n\ntype DataTableFactory<T extends object, TOperation extends keyof operations> = {\n resourceName: CtxResourceName;\n callback: TableFetchFn<T>;\n columns: ColumnDef<T, any>[];\n tableActions: TableAction<T>[];\n columnsToHideByDefault?: Partial<Record<keyof T, boolean>>; // Columns that are hidden by default\n allowSelection?: boolean;\n filterConfig: FiltersConfig<TOperation>;\n initialFilters: TableFilter[];\n rowActions?: RowAction<T>[];\n};\n\ntype DataTableState = {\n sorting: SortingState;\n pagination: PaginationState;\n};\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<T extends object, TOperation extends keyof operations>({\n resourceName,\n columns,\n callback,\n filterConfig,\n columnsToHideByDefault = {},\n allowSelection = false,\n initialFilters = [],\n tableActions,\n rowActions,\n}: DataTableFactory<T, TOperation>) {\n const [tableState, _setTableState] = useState<DataTableState>({\n /** TODO Reflect in URL */\n pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n sorting: [], // Sorting state\n });\n //\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n /** TODO Reflect in URL */\n const [searchQuery, setSearchQuery] = useState('');\n\n const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n `${resourceName}_ctx_column_order_preference`,\n []\n );\n const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(\n `${resourceName}_ctx_column_visibility_preference`,\n {\n id: false,\n updatedAt: false,\n ...columnsToHideByDefault,\n }\n );\n\n const [filters, setFilters] = useState(initialFilters);\n\n const mergedFilters = useMemo(() => {\n // TODO, generic transform fn\n return filters\n .map(tf => {\n if (Array.isArray(tf.value)) {\n return {\n [tf.property]: {\n [tf.operator]: tf.value.join(','),\n },\n };\n }\n return {\n [tf.property]: {\n [tf.operator]: tf.value,\n },\n };\n })\n .reduce((acc, current) => {\n return merge(acc, current);\n }, {});\n }, [filters]);\n\n // Update table state with new values\n const updateTableState = (updates: Partial<DataTableState>) => {\n _setTableState(prev => ({ ...prev, ...updates }));\n };\n\n const { sorting, pagination } = tableState;\n\n const query = useQuery({\n queryKey: [resourceName, pagination, sorting, searchQuery, mergedFilters],\n queryFn: () => callback(pagination, sorting, searchQuery, mergedFilters),\n placeholderData: keepPreviousData, // Keep previous data while loading new data\n retry: 0,\n refetchOnWindowFocus: false,\n });\n\n const metadataColumns = useMemo<AccessorFnColumnDef<any, string>[]>(() => {\n const data = query.data?.data;\n if (!data?.length) return [];\n\n type WithMeta = T & { metadata: ApiSchema<'MetadataDto'>[] };\n const rowHasMetadata = (row: Record<string, any>): row is WithMeta =>\n row != null && typeof row === 'object' && 'metadata' in row && Array.isArray(row.metadata);\n\n const rowsWithMeta = data.filter(rowHasMetadata);\n if (rowsWithMeta.length === 0) return [];\n const keys: string[] = Array.from(new Set(rowsWithMeta.flatMap(r => r.metadata?.map(m => m.key) ?? [])));\n\n return keys.map(key =>\n cH.accessor(\n row => {\n if (rowHasMetadata(row)) {\n return row?.metadata?.find(m => m.key === key)?.value ?? '';\n }\n return '';\n },\n {\n id: key,\n header: key, // tooltip header\n enableSorting: false,\n cell: info => {\n const value = info.getValue();\n // Handle null/undefined values\n if (value === null || value === undefined) return '';\n // For primitive types, return the string representation\n return String(value);\n },\n }\n )\n );\n }, [query.data?.data]);\n\n /**\n * ID,createdAt and updatedAt will be added by default for all tables\n * If selection is allowed, checkbox will be added\n * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n * If there are actions for the table, they will be placed fixed at the right side of table.\n */\n const cols: ColumnDef<any, any>[] = [\n ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n ...TABLE_ID_COLUMN,\n ...columns,\n ...(metadataColumns.length ? metadataColumns : []),\n ...TABLE_DEFAULT_DATE_COLUMNS,\n // Actions column TODO\n ...getActionColumn(rowActions ?? []),\n ];\n\n // Type-guard for updater\n function isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n return typeof updater === 'function';\n }\n // Utility function to resolve updater\n function resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n if (isUpdaterFunction(updater)) {\n return updater(currentValue);\n }\n return updater;\n }\n\n // Use react-table's hook to create the table instance\n const tanTable = useReactTable({\n data: query.data?.data ?? [],\n columns: cols,\n getCoreRowModel: getCoreRowModel(),\n rowCount: query.data?.total,\n manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n onPaginationChange: updater => {\n updateTableState({ pagination: resolveUpdater(updater, pagination) });\n },\n manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n onSortingChange: updater => {\n setRowSelection({});\n updateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n },\n manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n onColumnVisibilityChange: updater => {\n setColumnVisibility(resolveUpdater(updater, columnVisibility));\n },\n onRowSelectionChange: updater => {\n setRowSelection(resolveUpdater(updater, rowSelection));\n },\n onColumnOrderChange: updater => {\n setColumnOrder(resolveUpdater(updater, columnOrder));\n },\n state: {\n sorting: sorting,\n columnVisibility: columnVisibility,\n pagination: pagination,\n rowSelection: rowSelection,\n columnOrder: columnOrder,\n },\n meta: {\n refetch: query.refetch,\n },\n });\n\n // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n // This populates the columnIds in the columnOrder state\n useEffect(() => {\n setColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);\n }, []);\n\n return {\n tableState,\n updateTableState,\n query,\n setSearchQuery,\n searchQuery,\n tanTable,\n mergedFilters,\n filters,\n setFilters,\n filterConfig,\n tableActions,\n } as const;\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n\nexport const useDataTable = () => {\n const ctx = useContext(DataTableContext);\n if (!ctx) {\n throw Error('DataTable should be used within DataTableProvider.');\n }\n return ctx;\n};\n\nexport function DataTableProvider<T extends object, TOperation extends keyof operations>({\n children,\n ...props\n}: { children: React.ReactNode } & ReturnType<typeof useDataTableState<T, TOperation>>) {\n // @ts-expect-error, propogating the generic type further will be more complex. Since this is a tightly coupled type, it should be okay but reviewed whenever useDataTableState changes.\n return <DataTableContext.Provider value={props}>{children}</DataTableContext.Provider>;\n}\n\nexport type DataTableProps = React.ComponentProps<'section'>;\nexport function DataTable({ className, ...props }: DataTableProps) {\n const { query, tanTable } = useDataTable();\n\n return (\n <>\n {/* Table Actions Section */}\n <section {...props} className={classNames('flex flex-col bg-card', 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 grow min-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=\"size-full\" />\n )}\n </div>\n\n {/* Table Footer Section with Pagination and Column Picker */}\n <div className=\"flex w-full justify-between border gap-icon p-icon overflow-x-auto\">\n <div className=\"flex gap-icon\">\n <ColumnPicker />\n <PageSize />\n </div>\n <Paginator />\n </div>\n </section>\n </>\n );\n}\n/** Table overlay to be shown for loaders or other messages */\nfunction TableOverlay({ children, className }: { children: React.ReactNode; className?: string }) {\n return (\n <>\n <span\n className={classNames(\n className,\n 'absolute top-0 bg-card 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\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 />\n Columns\n </>\n }\n selectionMode=\"multiple\"\n items={tanTable.getAllFlatColumns()}\n selectedKeys={\n tanTable.getIsAllColumnsVisible() ? 'all' : tanTable.getVisibleFlatColumns().map(c => c.id)\n }\n >\n <MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>\n (select all)\n </MenuItem>\n {tanTable.getState().columnOrder.map(colId => {\n const col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n if (!col) return null;\n return <SortableItem key={col.id} column={col} />;\n })}\n </EasyMenu>\n <DragOverlay>\n {activeId ? (\n <div className=\"opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div>\n ) : null}\n </DragOverlay>\n </SortableContext>\n </DndContext>\n );\n\n function SortableItem({ column }: { column: Column<any, unknown> }) {\n const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n zIndex: '999',\n };\n return (\n <MenuItem\n ref={setNodeRef}\n style={style}\n {...attributes}\n id={column.id}\n onAction={() => column.toggleVisibility()}\n isDisabled={!column.getCanHide()}\n className=\"flex items-center\"\n >\n <IcGrip {...listeners} className=\"size-icon cursor-grab\" />\n {resourceFormatter(column.id)}\n {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n </MenuItem>\n );\n }\n}\n\nfunction Paginator() {\n const { tanTable, query } = useDataTable();\n const rowCount = query.data?.total ?? 0;\n return (\n <div className=\"flex items-center gap-2\">\n <span className=\"whitespace-nowrap body-sm text-muted\">\n {`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n (tanTable.getState().pagination.pageIndex + 1) * tanTable.getState().pagination.pageSize,\n rowCount\n )} of ${rowCount?.toLocaleString()}`}\n </span>\n\n <Button\n onPress={() => tanTable.firstPage()}\n isDisabled={!tanTable.getCanPreviousPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcFirst />\n </Button>\n <Button\n onPress={() => tanTable.previousPage()}\n isDisabled={!tanTable.getCanPreviousPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcLeft />\n </Button>\n <Button\n onPress={() => tanTable.nextPage()}\n isDisabled={!tanTable.getCanNextPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcRight />\n </Button>\n <Button\n onClick={() => tanTable.lastPage()}\n isDisabled={!tanTable.getCanNextPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcLast />\n </Button>\n </div>\n );\n}\n\nfunction PageSize() {\n const { tanTable } = useDataTable();\n const PAGE_SIZES = [10, 20, 30, 40, 50];\n\n return (\n <EasyMenu\n label={tanTable.getState().pagination.pageSize.toString()}\n selectionMode=\"single\"\n selectedKeys={[tanTable.getState().pagination.pageSize.toString()]}\n items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}\n >\n {items => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>}\n </EasyMenu>\n );\n}\n\nfunction Actions() {\n const { query, tanTable, searchQuery, setSearchQuery, tableActions } = useDataTable();\n\n return (\n <section className=\"flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto\">\n <div className=\"flex gap-icon\">\n <Button isPending={query.isFetching} onClick={() => query.refetch()} variant={'neutral'} size={'icon'}>\n <IcRefresh />\n </Button>\n\n {tableActions\n .filter(ta => ta.bulk === tanTable.getSelectedRowModel().rows.length > 0)\n .map((ta, i) => {\n const Icon = ta.icon;\n return (\n <Button\n key={`${i}-${ta.bulk}`}\n type=\"button\"\n isDisabled={query.isFetching}\n className=\"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform\"\n onPress={e => {\n ta.onClick(\n e,\n tanTable.getSelectedRowModel().rows.map(r => r.original)\n );\n }}\n size={'icon'}\n >\n <Icon />\n </Button>\n );\n })}\n </div>\n <div className=\"flex gap-icon\">\n <DataTableFilter />\n {<SearchField value={searchQuery} onChange={setSearchQuery} />}\n </div>\n </section>\n );\n}\n\nfunction SortIcon({\n direction,\n ...props\n}: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n if (direction === 'asc') return <IcSortAsc {...props} />;\n else if (direction === 'desc') return <IcSortDesc {...props} />;\n else return <IcSortNone {...props} />;\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n const { tanTable } = useDataTable();\n const tableCellStyle = (isSticky: boolean, className?: string) =>\n classNames(\n 'animate-in fade-in slide-in-from-top-10',\n 'px-icon py-2 text-left body-sm font-medium whitespace-nowrap',\n isSticky && 'bg-card sticky right-0 z-50 text-center',\n className\n );\n return (\n <TableComponent className={classNames(className)}>\n <TableHeader className=\"sticky top-0 z-10\">\n {tanTable.getHeaderGroups().map(headerGroup => (\n <TableRow className={classNames('h-input')} key={headerGroup.id}>\n {headerGroup.headers.map(header => (\n <TableHead key={header.id} className={tableCellStyle(false, 'bg-card')}>\n {!header.column.getCanSort() && !header.isPlaceholder && (\n <>{flexRender(header.column.columnDef.header, header.getContext())}</>\n )}\n {/* TODO Align header text with table text */}\n {header.column.getCanSort() && (\n <Button\n variant=\"ghost\"\n className=\"w-full !justify-start !px-1.5\"\n onPress={header.column.getToggleSortingHandler()}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n <SortIcon direction={header.column.getIsSorted()} />\n </Button>\n )}\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody className=\"flex-1 overflow-y-auto relative\">\n {tanTable.getRowModel().rows.map(row => (\n <TableRow\n className={classNames(\n 'h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20'\n )}\n key={row.id}\n data-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map(cell => (\n <TableCell key={cell.id} className={tableCellStyle(cell.column.id === ACTIONS_COLUMN_ID)}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n ))}\n </TableRow>\n ))}\n </TableBody>\n </TableComponent>\n );\n}\n","'use client';\nimport type { operations } from '@cryptlex/web-api-types';\nimport type { CalendarDateTime } from '@internationalized/date';\nimport { useRef } from 'react';\nimport { Button } from '../components/button';\nimport { useDataTable } from '../components/data-table';\nimport { type ApiFilters } from '../components/data-table-commons';\nimport { TfDatePicker } from '../components/date-picker';\nimport { TfIdSearchInput } from '../components/id-search';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { MultiSelectProps } from '../components/multi-select';\nimport { Popover, PopoverTrigger } from '../components/popover';\nimport { useAppForm } from '../utils/form-hook';\nimport { classNames } from '../utils/primitives';\nimport { useResourceFormatter } from '../utils/resource-names';\nimport { IcFilter, IcRemove } from './icons';\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 DateLocalFilter = BaseLocalFilter<'date', CalendarDateTime>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', Set<string | number>>;\n\n// TODO, number\nexport type TableFilter =\n | EnumLocalFilter\n | IdLocalFilter\n | BoolLocalFilter\n | StringLocalFilter\n | DateLocalFilter\n | IdSearchLocalFilter;\n\nexport type FilterConfig =\n | { type: 'enum'; options: MultiSelectProps['items'] }\n | { type: 'id-search'; search: () => Promise<{ id: string; name: string }[]> }\n | { type: 'id' }\n | { type: 'bool' }\n | { type: 'string' }\n | { type: 'date' };\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};\n\nexport type FiltersConfig<TOperation extends keyof operations> = Required<\n Record<keyof ApiFilters<TOperation>, FilterConfig>\n>;\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n const { filters, query, setFilters, filterConfig } = useDataTable();\n // TODO @mudasirpandith add focus\n // const localFilterRefs = useRef([]);\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-destructive z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5\"></div>\n )}\n <Button\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 />}\n </form.AppField>\n )}\n {lf.type === 'date' && (\n <form.AppField name={`filters[${i}].value`}>\n {_ => <TfDatePicker />}\n </form.AppField>\n )}\n {lf.type === 'id' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => <sf.TfTextField />}\n </form.AppField>\n )}\n {lf.type === 'string' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => <sf.TfTextField />}\n </form.AppField>\n )}\n {/* TODO fix @mudasirpandith */}\n {/* @ts-ignore */}\n {lf.type === 'enum' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => (\n <sf.TfMultiSelect\n // @ts-ignore\n items={filterConfig[lf.property].options}\n />\n )}\n </form.AppField>\n )}\n {/* TODO fix @mudasirpandith */}\n {/* @ts-ignore */}\n {lf.type === 'id-search' && (\n <form.AppField name={`filters[${i}].value`}>\n {_ => (\n <TfIdSearchInput\n accessor=\"id\"\n // @ts-ignore\n searchFn={filterConfig[lf.property].search}\n />\n )}\n </form.AppField>\n )}\n\n <Button\n type=\"button\"\n variant=\"destructive\"\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\">\n {filterKeys.map(k => (\n <MenuItem\n key={k}\n onAction={() => {\n // TODO @mudasirpandith\n //@ts-ignore\n const type = filterConfig[k].type as FilterType;\n\n const defaultValue = (t: FilterType) => {\n // TODO, ensure exhaustive???\n // @mudasirpandith\n switch (t) {\n case 'bool':\n return true;\n case 'string':\n return '';\n case 'date':\n return new Date().toISOString();\n case 'id':\n return '';\n case 'id-search':\n return [] as string[];\n case 'enum':\n return [] as string[];\n }\n };\n\n const newFilter: TableFilter = {\n id: `${k}-${Date.now()}`,\n operator: FilterOperations[type][0],\n // TODO\n //@ts-ignore\n value: defaultValue(type),\n type: type,\n property: k,\n };\n\n field.pushValue(newFilter);\n // TODO Focus to ref\n }}\n >\n {resourceFormatter(k)}\n </MenuItem>\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 Reset filters\n </Button>\n ) : null}\n </div>\n </>\n );\n }}\n </form.Field>\n </form>\n </Popover>\n </PopoverTrigger>\n </section>\n );\n}\n"],"names":["getTableCallback","getter","callback","pagination","sorting","searching","filters","query","generateSortParam","_f","columnHelper","createColumnHelper","sort","cH","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","TABLE_ID_COLUMN","TABLE_DEFAULT_DATE_COLUMNS","date","formatDate","ACTIONS_COLUMN_ID","getActionColumn","rowActions","EasyMenu","IcMoreVertical","ra","MenuItem","useDataTableState","resourceName","columns","filterConfig","columnsToHideByDefault","allowSelection","initialFilters","tableActions","tableState","_setTableState","useState","rowSelection","setRowSelection","searchQuery","setSearchQuery","columnOrder","setColumnOrder","useLocalStorage","columnVisibility","setColumnVisibility","setFilters","mergedFilters","useMemo","tf","acc","current","merge","updateTableState","updates","prev","useQuery","keepPreviousData","metadataColumns","data","rowHasMetadata","rowsWithMeta","r","m","key","info","value","cols","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","useEffect","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","className","Fragment","classNames","Actions","jsxs","TableOverlay","Loader","IcInfo","TableContent","ColumnPicker","PageSize","Paginator","activeId","setActiveId","resourceFormatter","useResourceFormatter","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","arrayMove","SortableContext","verticalListSortingStrategy","IcColumns","colId","col","SortableItem","DragOverlay","column","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","IcGrip","SortIcon","rowCount","Button","IcFirst","IcLeft","IcRight","IcLast","PAGE_SIZES","s","items","IcRefresh","ta","i","Icon","e","DataTableFilter","SearchField","direction","IcSortAsc","IcSortDesc","IcSortNone","tableCellStyle","isSticky","TableComponent","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","cell","TableCell","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","FilterOperations","addFilterButtonRef","useRef","form","useAppForm","filterKeys","PopoverTrigger","o","IcFilter","Popover","field","lf","sf","op","_","TfDatePicker","TfIdSearchInput","IcRemove","k","type","defaultValue","t","newFilter"],"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';\nimport {\n closestCenter,\n DndContext,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n arrayMove,\n SortableContext,\n sortableKeyboardCoordinates,\n useSortable,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n type AccessorFnColumnDef,\n type Column,\n type ColumnDef,\n type ColumnHelper,\n type ColumnOrderState,\n createColumnHelper,\n flexRender,\n getCoreRowModel,\n type PaginationState,\n type RowSelectionState,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport { useLocalStorage } from '@uidotdev/usehooks';\nimport { merge } from 'lodash-es';\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport type { PressEvent } from 'react-aria-components';\nimport { Button } from '../components/button';\nimport { type ApiSchema, formatDate } from '../components/data-table-commons';\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 { classNames } from '../utils/primitives';\nimport { useResourceFormatter } from '../utils/resource-names';\nimport type { CtxResourceName } from '../utils/resources';\nimport { Checkbox } from './checkbox';\nimport {\n type CtxIcon,\n IcColumns,\n IcFirst,\n IcGrip,\n IcInfo,\n IcLast,\n IcLeft,\n IcMoreVertical,\n IcRefresh,\n IcRight,\n IcSortAsc,\n IcSortDesc,\n IcSortNone,\n} from './icons';\n\n/** Reserved name for actions column */\n// export const ACTIONS_COLUMN_ID = 'tableActions';\n\nexport type TableAction<in TActionData> = {\n onClick: (e: PressEvent, t: TActionData[]) => void;\n bulk: boolean;\n icon: CtxIcon;\n tooltip?: string;\n};\n\nexport type TableFetchFn<in out TData extends object> = (\n p: PaginationState,\n s: SortingState,\n q: string,\n f: Record<string, any>\n) => Promise<{\n total: number;\n data: TData[] | undefined;\n}>;\nexport function getTableCallback<T extends object>(\n getter: (\n q: Record<string, any>\n ) => Promise<{ data?: T[]; error?: { code?: string | null; message: string }; response: Response }>\n): { callback: TableFetchFn<T>; columnHelper: ColumnHelper<T> } {\n const callback: TableFetchFn<T> = async (pagination, sorting, searching, filters) => {\n const query = {\n ...filters,\n page: pagination.pageIndex + 1,\n limit: pagination.pageSize,\n sort: generateSortParam(sorting[0]),\n search: searching,\n };\n\n const _f = await getter(query);\n\n return {\n total: Number.parseInt(_f.response.headers.get('Pagination-Count') || '0'),\n data: _f.data,\n };\n };\n\n const columnHelper = createColumnHelper<T>();\n\n return { callback, columnHelper };\n}\n\nfunction generateSortParam(sort: { id: string; desc: boolean } | undefined): string {\n if (sort) {\n if (sort.desc) {\n return `-${sort.id}`;\n } else {\n return `+${sort.id}`;\n }\n } else {\n return '-createdAt';\n }\n}\n\nconst cH = createColumnHelper<any>();\nconst TABLE_CHECK_BOX_COLUMN = [\n cH.accessor('checkbox', {\n header: ({ table }) => (\n <Checkbox\n isIndeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n isSelected={table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()}\n onChange={() => table.toggleAllPageRowsSelected()}\n aria-label=\"Select all\"\n />\n ),\n\n cell: ({ row }) => (\n <Checkbox isSelected={row.getIsSelected()} onChange={() => row.toggleSelected()} aria-label=\"Select row\" />\n ),\n enableSorting: false,\n enableHiding: false,\n }),\n];\n\nconst TABLE_ID_COLUMN = [\n cH.accessor('id', {\n header: () => 'ID',\n }),\n];\nconst TABLE_DEFAULT_DATE_COLUMNS = [\n cH.accessor('createdAt', {\n header: () => 'Creation Date',\n cell: ({ row }) => {\n const date = row.getValue('createdAt') satisfies string | null | undefined;\n return formatDate(date);\n },\n enableHiding: false,\n }),\n cH.accessor('updatedAt', {\n header: () => 'Last Updated',\n cell: ({ row }) => {\n const date = row.getValue('updatedAt') satisfies string | null | undefined;\n return formatDate(date);\n },\n enableHiding: false,\n }),\n];\n\nconst ACTIONS_COLUMN_ID = 'TableActions';\nconst getActionColumn = (rowActions: RowAction<any>[]) => {\n if (rowActions.length === 0) return [];\n\n return [\n cH.accessor(ACTIONS_COLUMN_ID, {\n header: '',\n id: ACTIONS_COLUMN_ID,\n enableHiding: false,\n cell: ({ row }) => (\n <EasyMenu label={<IcMoreVertical />} size={'icon'}>\n {rowActions.map(ra => (\n <MenuItem isDisabled={ra.disabled(row.original)} onPress={() => ra.onPress(row.original)}>\n {ra.label}\n </MenuItem>\n ))}\n </EasyMenu>\n ),\n }),\n ];\n};\n\ntype RowAction<T> = {\n onPress: (t: T) => void;\n label: React.ReactElement;\n disabled: (t: T) => boolean;\n};\n\ntype DataTableFactory<T extends object, TOperation extends keyof operations> = {\n resourceName: CtxResourceName;\n callback: TableFetchFn<T>;\n columns: ColumnDef<T, any>[];\n tableActions: TableAction<T>[];\n columnsToHideByDefault?: Partial<Record<keyof T, boolean>>; // Columns that are hidden by default\n allowSelection?: boolean;\n filterConfig: FiltersConfig<TOperation>;\n initialFilters: TableFilter[];\n rowActions?: RowAction<T>[];\n};\n\ntype DataTableState = {\n sorting: SortingState;\n pagination: PaginationState;\n};\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<T extends object, TOperation extends keyof operations>({\n resourceName,\n columns,\n callback,\n filterConfig,\n columnsToHideByDefault = {},\n allowSelection = false,\n initialFilters = [],\n tableActions,\n rowActions,\n}: DataTableFactory<T, TOperation>) {\n const [tableState, _setTableState] = useState<DataTableState>({\n /** Reflect in URL in host application */\n pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n sorting: [], // Sorting state\n });\n //\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n /** Reflect in URL in host application */\n const [searchQuery, setSearchQuery] = useState('');\n\n const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n `${resourceName}_ctx_column_order_preference`,\n []\n );\n const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(\n `${resourceName}_ctx_column_visibility_preference`,\n {\n id: false,\n ...columnsToHideByDefault,\n }\n );\n\n const [filters, setFilters] = useState(initialFilters);\n\n const mergedFilters = useMemo(() => {\n // TODO, generic transform fn\n return filters\n .map(tf => {\n if (Array.isArray(tf.value)) {\n return {\n [tf.property]: {\n [tf.operator]: tf.value.join(','),\n },\n };\n }\n return {\n [tf.property]: {\n [tf.operator]: tf.value,\n },\n };\n })\n .reduce((acc, current) => {\n return merge(acc, current);\n }, {});\n }, [filters]);\n\n // Update table state with new values\n const updateTableState = (updates: Partial<DataTableState>) => {\n _setTableState(prev => ({ ...prev, ...updates }));\n };\n\n const { sorting, pagination } = tableState;\n\n const query = useQuery({\n queryKey: [resourceName, pagination, sorting, searchQuery, mergedFilters],\n queryFn: () => callback(pagination, sorting, searchQuery, mergedFilters),\n placeholderData: keepPreviousData, // Keep previous data while loading new data\n retry: 0,\n refetchOnWindowFocus: false,\n });\n\n const metadataColumns = useMemo<AccessorFnColumnDef<any, string>[]>(() => {\n const data = query.data?.data;\n if (!data?.length) return [];\n\n type WithMeta = T & { metadata: ApiSchema<'MetadataDto'>[] };\n const rowHasMetadata = (row: Record<string, any>): row is WithMeta =>\n row != null && typeof row === 'object' && 'metadata' in row && Array.isArray(row.metadata);\n\n const rowsWithMeta = data.filter(rowHasMetadata);\n if (rowsWithMeta.length === 0) return [];\n const keys: string[] = Array.from(new Set(rowsWithMeta.flatMap(r => r.metadata?.map(m => m.key) ?? [])));\n\n return keys.map(key =>\n cH.accessor(\n row => {\n if (rowHasMetadata(row)) {\n return row?.metadata?.find(m => m.key === key)?.value ?? '';\n }\n return '';\n },\n {\n id: key,\n header: key, // tooltip header\n enableSorting: false,\n cell: info => {\n const value = info.getValue();\n // Handle null/undefined values\n if (value === null || value === undefined) return '';\n // For primitive types, return the string representation\n return String(value);\n },\n }\n )\n );\n }, [query.data?.data]);\n\n /**\n * ID,createdAt and updatedAt will be added by default for all tables\n * If selection is allowed, checkbox will be added\n * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n * If there are actions for the table, they will be placed fixed at the right side of table.\n */\n const cols: ColumnDef<any, any>[] = [\n ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n ...TABLE_ID_COLUMN,\n ...columns,\n ...(metadataColumns.length ? metadataColumns : []),\n ...TABLE_DEFAULT_DATE_COLUMNS,\n ...getActionColumn(rowActions ?? []),\n ];\n\n // Type-guard for updater\n function isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n return typeof updater === 'function';\n }\n // Utility function to resolve updater\n function resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n if (isUpdaterFunction(updater)) {\n return updater(currentValue);\n }\n return updater;\n }\n\n // Use react-table's hook to create the table instance\n const tanTable = useReactTable({\n data: query.data?.data ?? [],\n columns: cols,\n getCoreRowModel: getCoreRowModel(),\n rowCount: query.data?.total,\n manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n onPaginationChange: updater => {\n updateTableState({ pagination: resolveUpdater(updater, pagination) });\n },\n manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n onSortingChange: updater => {\n setRowSelection({});\n updateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n },\n manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n onColumnVisibilityChange: updater => {\n setColumnVisibility(resolveUpdater(updater, columnVisibility));\n },\n onRowSelectionChange: updater => {\n setRowSelection(resolveUpdater(updater, rowSelection));\n },\n onColumnOrderChange: updater => {\n setColumnOrder(resolveUpdater(updater, columnOrder));\n },\n state: {\n sorting: sorting,\n columnVisibility: columnVisibility,\n pagination: pagination,\n rowSelection: rowSelection,\n columnOrder: columnOrder,\n },\n meta: {\n refetch: query.refetch,\n },\n });\n\n // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n // This populates the columnIds in the columnOrder state\n useEffect(() => {\n setColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);\n }, []);\n\n return {\n tableState,\n updateTableState,\n query,\n setSearchQuery,\n searchQuery,\n tanTable,\n mergedFilters,\n filters,\n setFilters,\n filterConfig,\n tableActions,\n } as const;\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n\nexport const useDataTable = () => {\n const ctx = useContext(DataTableContext);\n if (!ctx) {\n throw Error('DataTable should be used within DataTableProvider.');\n }\n return ctx;\n};\n\nexport function DataTableProvider<T extends object, TOperation extends keyof operations>({\n children,\n ...props\n}: { children: React.ReactNode } & ReturnType<typeof useDataTableState<T, TOperation>>) {\n // @ts-expect-error, propogating the generic type further will be more complex. Since this is a tightly coupled type, it should be okay but reviewed whenever useDataTableState changes.\n return <DataTableContext.Provider value={props}>{children}</DataTableContext.Provider>;\n}\n\nexport type DataTableProps = React.ComponentProps<'section'>;\nexport function DataTable({ className, ...props }: DataTableProps) {\n const { query, tanTable } = useDataTable();\n\n return (\n <>\n {/* Table Actions Section */}\n <section {...props} className={classNames('flex flex-col bg-card', 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 grow min-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=\"size-full\" />\n )}\n </div>\n\n {/* Table Footer Section with Pagination and Column Picker */}\n <div className=\"flex w-full justify-between border gap-icon p-icon overflow-x-auto\">\n <div className=\"flex gap-icon\">\n <ColumnPicker />\n <PageSize />\n </div>\n <Paginator />\n </div>\n </section>\n </>\n );\n}\n/** Table overlay to be shown for loaders or other messages */\nfunction TableOverlay({ children, className }: { children: React.ReactNode; className?: string }) {\n return (\n <>\n <span\n className={classNames(\n className,\n 'absolute top-0 bg-card 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\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 />\n Columns\n </>\n }\n selectionMode=\"multiple\"\n items={tanTable.getAllFlatColumns()}\n selectedKeys={\n tanTable.getIsAllColumnsVisible() ? 'all' : tanTable.getVisibleFlatColumns().map(c => c.id)\n }\n >\n <MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>\n (select all)\n </MenuItem>\n {tanTable.getState().columnOrder.map(colId => {\n const col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n if (!col) return null;\n return <SortableItem key={col.id} column={col} />;\n })}\n </EasyMenu>\n <DragOverlay>\n {activeId ? (\n <div className=\"opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div>\n ) : null}\n </DragOverlay>\n </SortableContext>\n </DndContext>\n );\n\n function SortableItem({ column }: { column: Column<any, unknown> }) {\n const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n zIndex: '999',\n };\n return (\n <MenuItem\n ref={setNodeRef}\n style={style}\n {...attributes}\n id={column.id}\n onAction={() => column.toggleVisibility()}\n isDisabled={!column.getCanHide()}\n className=\"flex items-center\"\n >\n <IcGrip {...listeners} className=\"size-icon cursor-grab\" />\n {resourceFormatter(column.id)}\n {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n </MenuItem>\n );\n }\n}\n\nfunction Paginator() {\n const { tanTable, query } = useDataTable();\n const rowCount = query.data?.total ?? 0;\n return (\n <div className=\"flex items-center gap-2\">\n <span className=\"whitespace-nowrap body-sm text-muted\">\n {`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n (tanTable.getState().pagination.pageIndex + 1) * tanTable.getState().pagination.pageSize,\n rowCount\n )} of ${rowCount?.toLocaleString()}`}\n </span>\n\n <Button\n onPress={() => tanTable.firstPage()}\n isDisabled={!tanTable.getCanPreviousPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcFirst />\n </Button>\n <Button\n onPress={() => tanTable.previousPage()}\n isDisabled={!tanTable.getCanPreviousPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcLeft />\n </Button>\n <Button\n onPress={() => tanTable.nextPage()}\n isDisabled={!tanTable.getCanNextPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcRight />\n </Button>\n <Button\n onClick={() => tanTable.lastPage()}\n isDisabled={!tanTable.getCanNextPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcLast />\n </Button>\n </div>\n );\n}\n\nfunction PageSize() {\n const { tanTable } = useDataTable();\n const PAGE_SIZES = [10, 20, 30, 40, 50];\n\n return (\n <EasyMenu\n label={tanTable.getState().pagination.pageSize.toString()}\n selectionMode=\"single\"\n selectedKeys={[tanTable.getState().pagination.pageSize.toString()]}\n items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}\n >\n {items => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>}\n </EasyMenu>\n );\n}\n\nfunction Actions() {\n const { query, tanTable, searchQuery, setSearchQuery, tableActions } = useDataTable();\n\n return (\n <section className=\"flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto\">\n <div className=\"flex gap-icon\">\n <Button isPending={query.isFetching} onClick={() => query.refetch()} variant={'neutral'} size={'icon'}>\n <IcRefresh />\n </Button>\n\n {tableActions\n .filter(ta => ta.bulk === tanTable.getSelectedRowModel().rows.length > 0)\n .map((ta, i) => {\n const Icon = ta.icon;\n return (\n <Button\n key={`${i}-${ta.bulk}`}\n type=\"button\"\n isDisabled={query.isFetching}\n className=\"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform\"\n onPress={e => {\n ta.onClick(\n e,\n tanTable.getSelectedRowModel().rows.map(r => r.original)\n );\n }}\n size={'icon'}\n >\n <Icon />\n </Button>\n );\n })}\n </div>\n <div className=\"flex gap-icon\">\n <DataTableFilter />\n {<SearchField value={searchQuery} onChange={setSearchQuery} />}\n </div>\n </section>\n );\n}\n\nfunction SortIcon({\n direction,\n ...props\n}: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n if (direction === 'asc') return <IcSortAsc {...props} />;\n else if (direction === 'desc') return <IcSortDesc {...props} />;\n else return <IcSortNone {...props} />;\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n const { tanTable } = useDataTable();\n const tableCellStyle = (isSticky: boolean, className?: string) =>\n classNames(\n 'animate-in fade-in slide-in-from-top-10',\n 'px-icon py-2 text-left body-sm font-medium whitespace-nowrap',\n isSticky && 'bg-card sticky right-0 z-50 text-center',\n className\n );\n return (\n <TableComponent className={classNames(className)}>\n <TableHeader className=\"sticky top-0 z-10\">\n {tanTable.getHeaderGroups().map(headerGroup => (\n <TableRow className={classNames('h-input')} key={headerGroup.id}>\n {headerGroup.headers.map(header => (\n <TableHead key={header.id} className={tableCellStyle(false, 'bg-card')}>\n {!header.column.getCanSort() && !header.isPlaceholder && (\n <>{flexRender(header.column.columnDef.header, header.getContext())}</>\n )}\n {header.column.getCanSort() && (\n <Button\n variant=\"ghost\"\n className=\"w-full !justify-start !px-1.5\"\n onPress={header.column.getToggleSortingHandler()}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n <SortIcon direction={header.column.getIsSorted()} />\n </Button>\n )}\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody className=\"flex-1 overflow-y-auto relative\">\n {tanTable.getRowModel().rows.map(row => (\n <TableRow\n className={classNames(\n 'h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20'\n )}\n key={row.id}\n data-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map(cell => (\n <TableCell key={cell.id} className={tableCellStyle(cell.column.id === ACTIONS_COLUMN_ID)}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n ))}\n </TableRow>\n ))}\n </TableBody>\n </TableComponent>\n );\n}\n","'use client';\nimport type { operations } from '@cryptlex/web-api-types';\nimport type { CalendarDateTime } from '@internationalized/date';\nimport { useRef } from 'react';\nimport { Button } from '../components/button';\nimport { useDataTable } from '../components/data-table';\nimport { type ApiFilters } from '../components/data-table-commons';\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 '../utils/form-hook';\nimport { classNames } from '../utils/primitives';\nimport { useResourceFormatter } from '../utils/resource-names';\nimport { IcFilter, IcRemove } 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 DateLocalFilter = BaseLocalFilter<'date', CalendarDateTime>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', Set<string | number>>;\n\n// TODO, number\nexport type TableFilter =\n | EnumLocalFilter\n | IdLocalFilter\n | BoolLocalFilter\n | StringLocalFilter\n | DateLocalFilter\n | IdSearchLocalFilter;\n\nexport type FilterConfig =\n | { type: 'enum'; options: MultiSelectProps['items'] }\n | { type: 'id-search'; search: () => Promise<{ id: string; name: string }[]> }\n | { type: 'id' }\n | { type: 'bool' }\n | { type: 'string' }\n | { type: 'date' };\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};\n\nexport type FiltersConfig<TOperation extends keyof operations> = Required<\n Record<keyof ApiFilters<TOperation>, FilterConfig>\n>;\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n const { filters, query, setFilters, filterConfig } = useDataTable();\n // TODO @mudasirpandith add focus\n // const localFilterRefs = useRef([]);\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-destructive z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5\"></div>\n )}\n <Button\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 />}\n </form.AppField>\n )}\n {lf.type === 'date' && (\n <form.AppField name={`filters[${i}].value`}>\n {_ => <TfDatePicker />}\n </form.AppField>\n )}\n {lf.type === 'id' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => <sf.TfTextField />}\n </form.AppField>\n )}\n {lf.type === 'string' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => <sf.TfTextField />}\n </form.AppField>\n )}\n {/* TODO fix @mudasirpandith */}\n {/* @ts-ignore */}\n {lf.type === 'enum' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => (\n <sf.TfMultiSelect\n // @ts-ignore\n items={filterConfig[lf.property].options}\n />\n )}\n </form.AppField>\n )}\n {/* TODO fix @mudasirpandith */}\n {/* @ts-ignore */}\n {lf.type === 'id-search' && (\n <form.AppField name={`filters[${i}].value`}>\n {_ => (\n <TfMultipleIdSearchInput\n accessor=\"id\"\n // @ts-ignore\n searchFn={filterConfig[lf.property].search}\n />\n )}\n </form.AppField>\n )}\n\n <Button\n type=\"button\"\n variant=\"destructive\"\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\">\n {filterKeys.map(k => (\n <MenuItem\n key={k}\n onAction={() => {\n // TODO @mudasirpandith\n //@ts-ignore\n const type = filterConfig[k].type as FilterType;\n\n const defaultValue = (t: FilterType) => {\n // TODO, ensure exhaustive???\n // @mudasirpandith\n switch (t) {\n case 'bool':\n return true;\n case 'string':\n return '';\n case 'date':\n return new Date().toISOString();\n case 'id':\n return '';\n case 'id-search':\n return [] as string[];\n case 'enum':\n return [] as string[];\n }\n };\n\n const newFilter: TableFilter = {\n id: `${k}-${Date.now()}`,\n operator: FilterOperations[type][0],\n // TODO\n //@ts-ignore\n value: defaultValue(type),\n type: type,\n property: k,\n };\n\n field.pushValue(newFilter);\n // TODO Focus to ref\n }}\n >\n {resourceFormatter(k)}\n </MenuItem>\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 Reset filters\n </Button>\n ) : null}\n </div>\n </>\n );\n }}\n </form.Field>\n </form>\n </Popover>\n </PopoverTrigger>\n </section>\n );\n}\n"],"names":["getTableCallback","getter","callback","pagination","sorting","searching","filters","query","generateSortParam","_f","columnHelper","createColumnHelper","sort","cH","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","TABLE_ID_COLUMN","TABLE_DEFAULT_DATE_COLUMNS","date","formatDate","ACTIONS_COLUMN_ID","getActionColumn","rowActions","EasyMenu","IcMoreVertical","ra","MenuItem","useDataTableState","resourceName","columns","filterConfig","columnsToHideByDefault","allowSelection","initialFilters","tableActions","tableState","_setTableState","useState","rowSelection","setRowSelection","searchQuery","setSearchQuery","columnOrder","setColumnOrder","useLocalStorage","columnVisibility","setColumnVisibility","setFilters","mergedFilters","useMemo","tf","acc","current","merge","updateTableState","updates","prev","useQuery","keepPreviousData","metadataColumns","data","rowHasMetadata","rowsWithMeta","r","m","key","info","value","cols","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","useEffect","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","className","Fragment","classNames","Actions","jsxs","TableOverlay","Loader","IcInfo","TableContent","ColumnPicker","PageSize","Paginator","activeId","setActiveId","resourceFormatter","useResourceFormatter","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","arrayMove","SortableContext","verticalListSortingStrategy","IcColumns","colId","col","SortableItem","DragOverlay","column","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","IcGrip","SortIcon","rowCount","Button","IcFirst","IcLeft","IcRight","IcLast","PAGE_SIZES","s","items","IcRefresh","ta","i","Icon","e","DataTableFilter","SearchField","direction","IcSortAsc","IcSortDesc","IcSortNone","tableCellStyle","isSticky","TableComponent","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","cell","TableCell","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","FilterOperations","addFilterButtonRef","useRef","form","useAppForm","filterKeys","PopoverTrigger","o","IcFilter","Popover","field","lf","sf","op","_","TfDatePicker","TfMultipleIdSearchInput","IcRemove","k","type","defaultValue","t","newFilter"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{jsxs as i,jsx as e}from"react/jsx-runtime";import{DatePicker as x,composeRenderProps as c,DateRangePicker as D,Popover as v,Dialog as N}from"react-aria-components";import{parseAbsolute as P,getLocalTimeZone as k}from"@internationalized/date";import{Button as p}from"./button.js";import{Calendar as C,RangeCalendar as F}from"./calendar.js";import{DateInput as m}from"./datefield.js";import{FormField as u,FieldGroup as f}from"./field.js";import{useFieldContext as R}from"../utils/form-context.js";import{classNames as n,getFieldErrorMessage as d}from"../utils/primitives.js";import{IcDate as g}from"./icons.js";import"class-variance-authority";import"./loader.js";import"react";import"@tanstack/react-form";import"clsx";import"lodash-es";const h=({className:a,popoverClassName:r,...o})=>e(v,{className:c(r,t=>n("w-auto p-3",t)),children:e(N,{className:n("flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",a),...o})});function b({label:a,description:r,errorMessage:o,className:t,...l}){return i(x,{className:c(t,s=>n("group flex flex-col gap-2",s)),...l,children:[e(u,{label:a,description:r,errorMessage:o,children:i(f,{"aria-label":a,children:[e(m,{className:"flex-1",variant:"ghost"}),e(p,{variant:"ghost",size:"icon",className:"-me-2 ms-2",children:e(g,{"aria-hidden":!0})})]})}),e(h,{children:e(C,{})})]})}function H({...a}){const r=R();return e(b,{hideTimeZone:!0,value:r.state.value?P(r.state.value,k()):null,onChange:o=>o?r.handleChange(o.toAbsoluteString()):r.handleChange(null),onBlur:r.handleBlur,isInvalid:!!d(r),errorMessage:d(r),...a})}function J({label:a,description:r,errorMessage:o,className:t,...l}){return i(D,{className:c(t,s=>n("group flex flex-col gap-2",s)),...l,children:[e(u,{label:a,errorMessage:o,description:r,children:i(f,{children:[e(m,{variant:"ghost",slot:"start"}),e("span",{"aria-hidden":!0,className:"px-2 body-sm text-muted-foreground",children:"-"}),e(m,{className:"flex-1",variant:"ghost",slot:"end"}),e(p,{variant:"ghost",size:"icon",className:"mr-1 data-[focus-visible]:ring-offset-0",children:e(g,{"aria-hidden":!0})})]})}),e(h,{children:e(F,{})})]})}export{b as DatePicker,J as DateRangePicker,H as TfDatePicker};
1
+ import{jsxs as i,jsx as e}from"react/jsx-runtime";import{DatePicker as x,composeRenderProps as c,DateRangePicker as v,Popover as D,Dialog as N}from"react-aria-components";import{parseAbsolute as P,getLocalTimeZone as k}from"@internationalized/date";import{Button as p}from"./button.js";import{Calendar as C,RangeCalendar as b}from"./calendar.js";import{DateInput as m}from"./datefield.js";import{FormField as u,FieldGroup as f}from"./field.js";import{useFieldContext as F}from"../utils/form-context.js";import{classNames as n,getFieldErrorMessage as d}from"../utils/primitives.js";import{IcDate as g}from"./icons.js";import"class-variance-authority";import"./loader.js";import"react";import"@tanstack/react-form";import"clsx";import"lodash-es";const h=({className:a,popoverClassName:r,...o})=>e(D,{className:c(r,t=>n("w-auto p-3 bg-popover border",t)),children:e(N,{className:n("flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",a),...o})});function R({label:a,description:r,errorMessage:o,className:t,...l}){return i(x,{className:c(t,s=>n("group flex flex-col gap-2",s)),...l,children:[e(u,{label:a,description:r,errorMessage:o,children:i(f,{"aria-label":a,children:[e(m,{className:"flex-1",variant:"ghost"}),e(p,{variant:"ghost",size:"icon",className:"-me-2 ms-2",children:e(g,{"aria-hidden":!0})})]})}),e(h,{children:e(C,{})})]})}function H({...a}){const r=F();return e(R,{hideTimeZone:!0,value:r.state.value?P(r.state.value,k()):null,onChange:o=>o?r.handleChange(o.toAbsoluteString()):r.handleChange(null),onBlur:r.handleBlur,isInvalid:!!d(r),errorMessage:d(r),...a})}function J({label:a,description:r,errorMessage:o,className:t,...l}){return i(v,{className:c(t,s=>n("group flex flex-col gap-2",s)),...l,children:[e(u,{label:a,errorMessage:o,description:r,children:i(f,{children:[e(m,{variant:"ghost",slot:"start"}),e("span",{"aria-hidden":!0,className:"px-2 body-sm text-muted-foreground",children:"-"}),e(m,{className:"flex-1",variant:"ghost",slot:"end"}),e(p,{variant:"ghost",size:"icon",className:"mr-1 data-[focus-visible]:ring-offset-0",children:e(g,{"aria-hidden":!0})})]})}),e(h,{children:e(b,{})})]})}export{R as DatePicker,J as DateRangePicker,H as TfDatePicker};
2
2
  //# sourceMappingURL=date-picker.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"date-picker.js","sources":["../../lib/components/date-picker.tsx"],"sourcesContent":["import {\n DatePicker as AriaDatePicker,\n DatePickerProps as AriaDatePickerProps,\n DateRangePicker as AriaDateRangePicker,\n DateRangePickerProps as AriaDateRangePickerProps,\n DateValue as AriaDateValue,\n Dialog as AriaDialog,\n DialogProps as AriaDialogProps,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Popover,\n} from 'react-aria-components';\n\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date';\nimport { Button } from '../components/button';\nimport { Calendar, RangeCalendar } from '../components/calendar';\nimport { DateInput } from '../components/datefield';\nimport { FieldGroup, FormField, type FormFieldProps } from '../components/field';\nimport { useFieldContext } from '../utils/form-context';\nimport { classNames, getFieldErrorMessage } from '../utils/primitives';\nimport { IcDate } from './icons';\n\nconst DatePickerContent = ({\n className,\n popoverClassName,\n ...props\n}: AriaDialogProps & { popoverClassName?: AriaPopoverProps['className'] }) => (\n <Popover className={composeRenderProps(popoverClassName, className => classNames('w-auto p-3', className))}>\n <AriaDialog\n className={classNames(\n 'flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0',\n className\n )}\n {...props}\n />\n </Popover>\n);\n\ninterface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {}\n\nexport function DatePicker<T extends AriaDateValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: DatePickerProps<T>) {\n return (\n <AriaDatePicker\n className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <FieldGroup aria-label={label}>\n <DateInput className=\"flex-1\" variant=\"ghost\" />\n <Button variant=\"ghost\" size=\"icon\" className={'-me-2 ms-2'}>\n <IcDate aria-hidden />\n </Button>\n </FieldGroup>\n </FormField>\n <DatePickerContent>\n <Calendar />\n </DatePickerContent>\n </AriaDatePicker>\n );\n}\n\nexport function TfDatePicker({\n ...props\n}: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>) {\n const field = useFieldContext<string | null>();\n return (\n <DatePicker\n hideTimeZone\n value={field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null}\n onChange={v => (v ? field.handleChange(v.toAbsoluteString()) : field.handleChange(null))}\n onBlur={field.handleBlur}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n\ninterface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {}\nexport function DateRangePicker<T extends AriaDateValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: DateRangePickerProps<T>) {\n return (\n <AriaDateRangePicker\n className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n {...props}\n >\n <FormField label={label} errorMessage={errorMessage} description={description}>\n <FieldGroup>\n <DateInput variant=\"ghost\" slot={'start'} />\n <span aria-hidden className=\"px-2 body-sm text-muted-foreground\">\n -\n </span>\n <DateInput className=\"flex-1\" variant=\"ghost\" slot={'end'} />\n <Button variant=\"ghost\" size=\"icon\" className=\"mr-1 data-[focus-visible]:ring-offset-0\">\n <IcDate aria-hidden />\n </Button>\n </FieldGroup>\n </FormField>\n <DatePickerContent>\n <RangeCalendar />\n </DatePickerContent>\n </AriaDateRangePicker>\n );\n}\n"],"names":["DatePickerContent","className","popoverClassName","props","jsx","Popover","composeRenderProps","classNames","AriaDialog","DatePicker","label","description","errorMessage","jsxs","AriaDatePicker","FormField","FieldGroup","DateInput","Button","IcDate","Calendar","TfDatePicker","field","useFieldContext","parseAbsolute","getLocalTimeZone","v","getFieldErrorMessage","DateRangePicker","AriaDateRangePicker","RangeCalendar"],"mappings":"wuBAsBA,MAAMA,EAAoB,CAAC,CACvB,UAAAC,EACA,iBAAAC,EACA,GAAGC,CACP,IACIC,EAACC,EAAA,CAAQ,UAAWC,EAAmBJ,EAAkBD,GAAaM,EAAW,aAAcN,CAAS,CAAC,EACrG,SAAAG,EAACI,EAAA,CACG,UAAWD,EACP,iFACAN,CAAA,EAEH,GAAGE,CAAA,CACR,EACJ,EAKG,SAASM,EAAoC,CAChD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAAuB,CACnB,OACIU,EAACC,EAAA,CACG,UAAWR,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,GAAU,MAAAL,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAC,EAACG,EAAA,CAAW,aAAYN,EACpB,SAAA,CAAAN,EAACa,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,EAC9Cb,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAW,aAC3C,SAAAd,EAACe,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAACgB,EAAA,CAAA,CAAS,CAAA,CACd,CAAA,CAAA,CAAA,CAGZ,CAEO,SAASC,EAAa,CACzB,GAAGlB,CACP,EAAyG,CACrG,MAAMmB,EAAQC,EAAA,EACd,OACInB,EAACK,EAAA,CACG,aAAY,GACZ,MAAOa,EAAM,MAAM,MAAQE,EAAcF,EAAM,MAAM,MAAOG,EAAA,CAAkB,EAAI,KAClF,SAAUC,GAAMA,EAAIJ,EAAM,aAAaI,EAAE,kBAAkB,EAAIJ,EAAM,aAAa,IAAI,EACtF,OAAQA,EAAM,WACd,UAAW,CAAC,CAACK,EAAqBL,CAAK,EACvC,aAAcK,EAAqBL,CAAK,EACvC,GAAGnB,CAAA,CAAA,CAGhB,CAGO,SAASyB,EAAyC,CACrD,MAAAlB,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAA4B,CACxB,OACIU,EAACgB,EAAA,CACG,UAAWvB,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,EAAA,CAAU,MAAAL,EAAc,aAAAE,EAA4B,YAAAD,EACjD,WAACK,EAAA,CACG,SAAA,CAAAZ,EAACa,EAAA,CAAU,QAAQ,QAAQ,KAAM,QAAS,IACzC,OAAA,CAAK,cAAW,GAAC,UAAU,qCAAqC,SAAA,IAEjE,IACCA,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,KAAM,MAAO,EAC3Db,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAU,0CAC1C,SAAAd,EAACe,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAAC0B,EAAA,CAAA,CAAc,CAAA,CACnB,CAAA,CAAA,CAAA,CAGZ"}
1
+ {"version":3,"file":"date-picker.js","sources":["../../lib/components/date-picker.tsx"],"sourcesContent":["import {\n DatePicker as AriaDatePicker,\n DatePickerProps as AriaDatePickerProps,\n DateRangePicker as AriaDateRangePicker,\n DateRangePickerProps as AriaDateRangePickerProps,\n DateValue as AriaDateValue,\n Dialog as AriaDialog,\n DialogProps as AriaDialogProps,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n Popover,\n} from 'react-aria-components';\n\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date';\nimport { Button } from '../components/button';\nimport { Calendar, RangeCalendar } from '../components/calendar';\nimport { DateInput } from '../components/datefield';\nimport { FieldGroup, FormField, type FormFieldProps } from '../components/field';\nimport { useFieldContext } from '../utils/form-context';\nimport { classNames, getFieldErrorMessage } from '../utils/primitives';\nimport { IcDate } from './icons';\n\nconst DatePickerContent = ({\n className,\n popoverClassName,\n ...props\n}: AriaDialogProps & { popoverClassName?: AriaPopoverProps['className'] }) => (\n <Popover\n className={composeRenderProps(popoverClassName, className =>\n classNames('w-auto p-3 bg-popover border', className)\n )}\n >\n <AriaDialog\n className={classNames(\n 'flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0',\n className\n )}\n {...props}\n />\n </Popover>\n);\n\ninterface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {}\n\nexport function DatePicker<T extends AriaDateValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: DatePickerProps<T>) {\n return (\n <AriaDatePicker\n className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <FieldGroup aria-label={label}>\n <DateInput className=\"flex-1\" variant=\"ghost\" />\n <Button variant=\"ghost\" size=\"icon\" className={'-me-2 ms-2'}>\n <IcDate aria-hidden />\n </Button>\n </FieldGroup>\n </FormField>\n <DatePickerContent>\n <Calendar />\n </DatePickerContent>\n </AriaDatePicker>\n );\n}\n\nexport function TfDatePicker({\n ...props\n}: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>) {\n const field = useFieldContext<string | null>();\n return (\n <DatePicker\n hideTimeZone\n value={field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null}\n onChange={v => (v ? field.handleChange(v.toAbsoluteString()) : field.handleChange(null))}\n onBlur={field.handleBlur}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n\ninterface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {}\nexport function DateRangePicker<T extends AriaDateValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: DateRangePickerProps<T>) {\n return (\n <AriaDateRangePicker\n className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n {...props}\n >\n <FormField label={label} errorMessage={errorMessage} description={description}>\n <FieldGroup>\n <DateInput variant=\"ghost\" slot={'start'} />\n <span aria-hidden className=\"px-2 body-sm text-muted-foreground\">\n -\n </span>\n <DateInput className=\"flex-1\" variant=\"ghost\" slot={'end'} />\n <Button variant=\"ghost\" size=\"icon\" className=\"mr-1 data-[focus-visible]:ring-offset-0\">\n <IcDate aria-hidden />\n </Button>\n </FieldGroup>\n </FormField>\n <DatePickerContent>\n <RangeCalendar />\n </DatePickerContent>\n </AriaDateRangePicker>\n );\n}\n"],"names":["DatePickerContent","className","popoverClassName","props","jsx","Popover","composeRenderProps","classNames","AriaDialog","DatePicker","label","description","errorMessage","jsxs","AriaDatePicker","FormField","FieldGroup","DateInput","Button","IcDate","Calendar","TfDatePicker","field","useFieldContext","parseAbsolute","getLocalTimeZone","v","getFieldErrorMessage","DateRangePicker","AriaDateRangePicker","RangeCalendar"],"mappings":"wuBAsBA,MAAMA,EAAoB,CAAC,CACvB,UAAAC,EACA,iBAAAC,EACA,GAAGC,CACP,IACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAkBD,GAC5CM,EAAW,+BAAgCN,CAAS,CAAA,EAGxD,SAAAG,EAACI,EAAA,CACG,UAAWD,EACP,iFACAN,CAAA,EAEH,GAAGE,CAAA,CAAA,CACR,CACJ,EAKG,SAASM,EAAoC,CAChD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAAuB,CACnB,OACIU,EAACC,EAAA,CACG,UAAWR,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,GAAU,MAAAL,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAC,EAACG,EAAA,CAAW,aAAYN,EACpB,SAAA,CAAAN,EAACa,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,EAC9Cb,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAW,aAC3C,SAAAd,EAACe,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAACgB,EAAA,CAAA,CAAS,CAAA,CACd,CAAA,CAAA,CAAA,CAGZ,CAEO,SAASC,EAAa,CACzB,GAAGlB,CACP,EAAyG,CACrG,MAAMmB,EAAQC,EAAA,EACd,OACInB,EAACK,EAAA,CACG,aAAY,GACZ,MAAOa,EAAM,MAAM,MAAQE,EAAcF,EAAM,MAAM,MAAOG,EAAA,CAAkB,EAAI,KAClF,SAAUC,GAAMA,EAAIJ,EAAM,aAAaI,EAAE,kBAAkB,EAAIJ,EAAM,aAAa,IAAI,EACtF,OAAQA,EAAM,WACd,UAAW,CAAC,CAACK,EAAqBL,CAAK,EACvC,aAAcK,EAAqBL,CAAK,EACvC,GAAGnB,CAAA,CAAA,CAGhB,CAGO,SAASyB,EAAyC,CACrD,MAAAlB,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAA4B,CACxB,OACIU,EAACgB,EAAA,CACG,UAAWvB,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,EAAA,CAAU,MAAAL,EAAc,aAAAE,EAA4B,YAAAD,EACjD,WAACK,EAAA,CACG,SAAA,CAAAZ,EAACa,EAAA,CAAU,QAAQ,QAAQ,KAAM,QAAS,IACzC,OAAA,CAAK,cAAW,GAAC,UAAU,qCAAqC,SAAA,IAEjE,IACCA,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,KAAM,MAAO,EAC3Db,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAU,0CAC1C,SAAAd,EAACe,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAAC0B,EAAA,CAAA,CAAc,CAAA,CACnB,CAAA,CAAA,CAAA,CAGZ"}
@@ -15,6 +15,7 @@ export type FormFieldProps = {
15
15
  description?: React.ReactNode;
16
16
  errorMessage?: string;
17
17
  };
18
+ /** Wrapper for FormFields */
18
19
  export declare function FormField({ label, description, errorMessage, children, }: FormFieldProps & {
19
20
  children: React.ReactNode;
20
21
  }): import("react/jsx-runtime").JSX.Element;
@@ -1,2 +1,2 @@
1
- "use client";import{jsxs as a,Fragment as d,jsx as r}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";import{Group as l,composeRenderProps as m,Label as c,Text as u}from"react-aria-components";import{classNames as n}from"../utils/primitives.js";import{IcInfo as f,IcError as p}from"./icons.js";import"clsx";import"lodash-es";import"react";const g=s(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function b({className:e,...t}){return r(c,{className:n(g(),e),...t})}function v({className:e,children:t,...i}){return a(u,{className:n("body-sm text-muted leading-tight",e),...i,slot:"description",children:[t,r(f,{className:"inline size-2 align-text-top ms-0.5"})]})}function h({className:e,children:t,...i}){return a("div",{className:n("body-sm leading-tight text-destructive duration-150 animate-in transition-transform slide-in-from-top-5 fade-in",e),...i,children:[t,r(p,{className:"inline size-2 align-text-top ms-0.5"})]})}const x=s("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-popover input-dim ring-offset-background","focus-ring","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function z({className:e,variant:t,...i}){return r(l,{className:m(e,o=>n(x({variant:t}),o)),...i})}function E({label:e,description:t,errorMessage:i,children:o}){return a(d,{children:[e&&r(b,{children:e}),o,t&&r(v,{children:t}),i&&r(h,{children:i})]})}export{v as FieldDescription,h as FieldError,z as FieldGroup,b as FieldLabel,E as FormField,x as fieldGroupVariants,g as labelVariants};
1
+ "use client";import{jsxs as a,Fragment as d,jsx as r}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";import{Group as l,composeRenderProps as m,Label as c,Text as u}from"react-aria-components";import{classNames as n}from"../utils/primitives.js";import{IcInfo as f,IcError as p}from"./icons.js";import"clsx";import"lodash-es";import"react";const g=s(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function b({className:e,...t}){return r(c,{className:n(g(),e),...t})}function v({className:e,children:t,...i}){return a(u,{className:n("body-sm text-muted leading-tight",e),...i,slot:"description",children:[t,r(f,{className:"inline size-2 align-text-top ms-0.5"})]})}function x({className:e,children:t,...i}){return a("div",{className:n("body-sm leading-tight text-destructive duration-150 animate-in transition-transform slide-in-from-top-5 fade-in",e),...i,children:[t,r(p,{className:"inline size-2 align-text-top ms-0.5"})]})}const h=s("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-popover input-dim px-2 ring-offset-background","focus-ring","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function z({className:e,variant:t,...i}){return r(l,{className:m(e,o=>n(h({variant:t}),o)),...i})}function E({label:e,description:t,errorMessage:i,children:o}){return a(d,{children:[e&&r(b,{children:e}),o,t&&r(v,{children:t}),i&&r(x,{children:i})]})}export{v as FieldDescription,x as FieldError,z as FieldGroup,b as FieldLabel,E as FormField,h as fieldGroupVariants,g as labelVariants};
2
2
  //# sourceMappingURL=field.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"field.js","sources":["../../lib/components/field.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\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 '../utils/primitives';\nimport { IcError, IcInfo } from './icons';\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\nexport function FieldLabel({ className, ...props }: AriaLabelProps) {\n return <AriaLabel className={classNames(labelVariants(), className)} {...props} />;\n}\n\nexport function FieldDescription({ 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// TODO, if we were to use AriaFieldError, it would use the internal ValidationState Context object, which might be useful for composing inputs but\n// this would have significant overlap with what Tanstack Form is already doing for us. It has pros and cons, needs to be discussed and explored.\nexport function FieldError({ className, children, ...props }: React.ComponentPropsWithRef<'div'>) {\n return (\n <div\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 </div>\n );\n}\n\nexport const fieldGroupVariants = cva('', {\n variants: {\n variant: {\n default: [\n // TODO standardize the padding here\n 'relative flex w-full items-center overflow-hidden border border-input bg-popover input-dim ring-offset-background',\n /* Focus Within */\n 'focus-ring',\n /* Disabled */\n 'disabled-muted',\n ],\n ghost: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\nexport interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {}\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\nexport type FormFieldProps = {\n label?: string;\n description?: React.ReactNode;\n errorMessage?: string;\n // | ((validation: AriaValidationResult) => string)\n};\n\nexport function FormField({\n label,\n description,\n errorMessage,\n children,\n}: FormFieldProps & {\n children: React.ReactNode;\n}) {\n return (\n <>\n {label && <FieldLabel>{label}</FieldLabel>}\n {children}\n {description && <FieldDescription>{description}</FieldDescription>}\n {errorMessage && <FieldError>{errorMessage}</FieldError>}\n </>\n );\n}\n"],"names":["labelVariants","cva","FieldLabel","className","props","jsx","AriaLabel","classNames","FieldDescription","children","jsxs","AriaText","IcInfo","FieldError","IcError","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","Fragment"],"mappings":"yWAgBO,MAAMA,EAAgBC,EAAI,CAC7B,+CAEA,iBAEA,uCACJ,CAAC,EAEM,SAASC,EAAW,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CAChE,OAAOC,EAACC,GAAU,UAAWC,EAAWP,IAAiBG,CAAS,EAAI,GAAGC,EAAO,CACpF,CAEO,SAASI,EAAiB,CAAE,UAAAL,EAAW,SAAAM,EAAU,GAAGL,GAAwB,CAC/E,OACIM,EAACC,EAAA,CAAS,UAAWJ,EAAW,mCAAoCJ,CAAS,EAAI,GAAGC,EAAO,KAAK,cAC3F,SAAA,CAAAK,EACDJ,EAACO,EAAA,CAAO,UAAU,qCAAA,CAAsC,CAAA,EAC5D,CAER,CAGO,SAASC,EAAW,CAAE,UAAAV,EAAW,SAAAM,EAAU,GAAGL,GAA6C,CAC9F,OACIM,EAAC,MAAA,CACG,UAAWH,EACP,mHACAJ,CAAA,EAEH,GAAGC,EAEH,SAAA,CAAAK,EACDJ,EAACS,EAAA,CAAQ,UAAU,qCAAA,CAAsC,CAAA,CAAA,CAAA,CAGrE,CAEO,MAAMC,EAAqBd,EAAI,GAAI,CACtC,SAAU,CACN,QAAS,CACL,QAAS,CAEL,oHAEA,aAEA,gBAAA,EAEJ,MAAO,EAAA,CACX,EAEJ,gBAAiB,CACb,QAAS,SAAA,CAEjB,CAAC,EAIM,SAASe,EAAW,CAAE,UAAAb,EAAW,QAAAc,EAAS,GAAGb,GAAqB,CACrE,OACIC,EAACa,EAAA,CACG,UAAWC,EAAmBhB,EAAWA,GACrCI,EAAWQ,EAAmB,CAAE,QAAAE,CAAA,CAAS,EAAGd,CAAS,CAAA,EAExD,GAAGC,CAAA,CAAA,CAGhB,CASO,SAASgB,EAAU,CACtB,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAd,CACJ,EAEG,CACC,OACIC,EAAAc,EAAA,CACK,SAAA,CAAAH,GAAShB,EAACH,GAAY,SAAAmB,CAAA,CAAM,EAC5BZ,EACAa,GAAejB,EAACG,EAAA,CAAkB,SAAAc,CAAA,CAAY,EAC9CC,GAAgBlB,EAACQ,EAAA,CAAY,SAAAU,CAAA,CAAa,CAAA,EAC/C,CAER"}
1
+ {"version":3,"file":"field.js","sources":["../../lib/components/field.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\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 '../utils/primitives';\nimport { IcError, IcInfo } from './icons';\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\nexport function FieldLabel({ className, ...props }: AriaLabelProps) {\n return <AriaLabel className={classNames(labelVariants(), className)} {...props} />;\n}\n\nexport function FieldDescription({ 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// TODO, if we were to use AriaFieldError, it would use the internal ValidationState Context object, which might be useful for composing inputs but\n// this would have significant overlap with what Tanstack Form is already doing for us. It has pros and cons, needs to be discussed and explored.\nexport function FieldError({ className, children, ...props }: React.ComponentPropsWithRef<'div'>) {\n return (\n <div\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 </div>\n );\n}\n\nexport const fieldGroupVariants = cva('', {\n variants: {\n variant: {\n default: [\n 'relative flex w-full items-center overflow-hidden border border-input bg-popover input-dim px-2 ring-offset-background',\n /* Focus Within */\n 'focus-ring',\n /* Disabled */\n 'disabled-muted',\n ],\n ghost: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\nexport interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {}\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\nexport type FormFieldProps = {\n label?: string;\n description?: React.ReactNode;\n errorMessage?: string;\n // | ((validation: AriaValidationResult) => string)\n};\n\n/** Wrapper for FormFields */\nexport function FormField({\n label,\n description,\n errorMessage,\n children,\n}: FormFieldProps & {\n children: React.ReactNode;\n}) {\n return (\n <>\n {label && <FieldLabel>{label}</FieldLabel>}\n {children}\n {description && <FieldDescription>{description}</FieldDescription>}\n {errorMessage && <FieldError>{errorMessage}</FieldError>}\n </>\n );\n}\n"],"names":["labelVariants","cva","FieldLabel","className","props","jsx","AriaLabel","classNames","FieldDescription","children","jsxs","AriaText","IcInfo","FieldError","IcError","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","Fragment"],"mappings":"yWAgBO,MAAMA,EAAgBC,EAAI,CAC7B,+CAEA,iBAEA,uCACJ,CAAC,EAEM,SAASC,EAAW,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CAChE,OAAOC,EAACC,GAAU,UAAWC,EAAWP,IAAiBG,CAAS,EAAI,GAAGC,EAAO,CACpF,CAEO,SAASI,EAAiB,CAAE,UAAAL,EAAW,SAAAM,EAAU,GAAGL,GAAwB,CAC/E,OACIM,EAACC,EAAA,CAAS,UAAWJ,EAAW,mCAAoCJ,CAAS,EAAI,GAAGC,EAAO,KAAK,cAC3F,SAAA,CAAAK,EACDJ,EAACO,EAAA,CAAO,UAAU,qCAAA,CAAsC,CAAA,EAC5D,CAER,CAGO,SAASC,EAAW,CAAE,UAAAV,EAAW,SAAAM,EAAU,GAAGL,GAA6C,CAC9F,OACIM,EAAC,MAAA,CACG,UAAWH,EACP,mHACAJ,CAAA,EAEH,GAAGC,EAEH,SAAA,CAAAK,EACDJ,EAACS,EAAA,CAAQ,UAAU,qCAAA,CAAsC,CAAA,CAAA,CAAA,CAGrE,CAEO,MAAMC,EAAqBd,EAAI,GAAI,CACtC,SAAU,CACN,QAAS,CACL,QAAS,CACL,yHAEA,aAEA,gBAAA,EAEJ,MAAO,EAAA,CACX,EAEJ,gBAAiB,CACb,QAAS,SAAA,CAEjB,CAAC,EAIM,SAASe,EAAW,CAAE,UAAAb,EAAW,QAAAc,EAAS,GAAGb,GAAqB,CACrE,OACIC,EAACa,EAAA,CACG,UAAWC,EAAmBhB,EAAWA,GACrCI,EAAWQ,EAAmB,CAAE,QAAAE,CAAA,CAAS,EAAGd,CAAS,CAAA,EAExD,GAAGC,CAAA,CAAA,CAGhB,CAUO,SAASgB,EAAU,CACtB,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAd,CACJ,EAEG,CACC,OACIC,EAAAc,EAAA,CACK,SAAA,CAAAH,GAAShB,EAACH,GAAY,SAAAmB,CAAA,CAAM,EAC5BZ,EACAa,GAAejB,EAACG,EAAA,CAAkB,SAAAc,CAAA,CAAY,EAC9CC,GAAgBlB,EAACQ,EAAA,CAAY,SAAAU,CAAA,CAAa,CAAA,EAC/C,CAER"}
@@ -68,3 +68,4 @@ export declare const IcForum: CtxIcon;
68
68
  export declare const IcDocumentation: CtxIcon;
69
69
  export declare const IcTrial: CtxIcon;
70
70
  export declare const IcMeter: CtxIcon;
71
+ export declare const IcPassword: CtxIcon;