@cryptlex/web-components 6.6.119 → 6.6.120
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.
- package/dist/components/data-table.d.ts +4 -0
- package/dist/components/data-table.js +1 -1
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/dialog.d.ts +0 -19
- package/dist/components/dialog.js +1 -1
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/form.js +1 -1
- package/dist/components/form.js.map +1 -1
- package/dist/components/sidebar.js +1 -1
- package/dist/components/sidebar.js.map +1 -1
- package/dist/components/tag-group.js +1 -1
- package/dist/components/tag-group.js.map +1 -1
- package/lib/index.css +36 -24
- package/lib/tokens.css +28 -0
- package/package.json +2 -2
|
@@ -1254,6 +1254,8 @@ export declare const DataTableContext: React.Context<{
|
|
|
1254
1254
|
id: string;
|
|
1255
1255
|
} | {
|
|
1256
1256
|
id: string;
|
|
1257
|
+
} | {
|
|
1258
|
+
id: string;
|
|
1257
1259
|
} | undefined> | undefined;
|
|
1258
1260
|
readonly queryParameters: NoInfer<Partial<ApiFilter<keyof operations>>> | undefined;
|
|
1259
1261
|
readonly viewMode: "card" | "table";
|
|
@@ -2157,6 +2159,8 @@ export declare function useDataTable(): {
|
|
|
2157
2159
|
id: string;
|
|
2158
2160
|
} | {
|
|
2159
2161
|
id: string;
|
|
2162
|
+
} | {
|
|
2163
|
+
id: string;
|
|
2160
2164
|
} | undefined> | undefined;
|
|
2161
2165
|
readonly queryParameters: NoInfer<Partial<ApiFilter<keyof operations>>> | undefined;
|
|
2162
2166
|
readonly viewMode: "card" | "table";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,Fragment as D,jsxs as g}from"react/jsx-runtime";import{parseAbsolute as Y,getLocalTimeZone as J}from"@internationalized/date";import{createContext as We,useContext as et,useState as O,useMemo as W,useEffect as ie,useRef as Te,Fragment as tt}from"react";import{Pressable as De}from"react-aria-components";import{Button as S}from"./button.js";import{useSensors as nt,useSensor as Se,PointerSensor as rt,KeyboardSensor as at,DndContext as it,closestCenter as ot,DragOverlay as lt}from"@dnd-kit/core";import{sortableKeyboardCoordinates as st,SortableContext as ct,verticalListSortingStrategy as ut,arrayMove as dt,useSortable as mt}from"@dnd-kit/sortable";import{CSS as gt}from"@dnd-kit/utilities";import{useQuery as pt,useInfiniteQuery as ft}from"@tanstack/react-query";import{createColumnHelper as Oe,useReactTable as bt,getCoreRowModel as ht,flexRender as re}from"@tanstack/react-table";import{useLocalStorage as ee}from"@uidotdev/usehooks";import{merge as vt}from"lodash-es";import{Badge as xe}from"./badge.js";import{DatePicker as te}from"./date-picker.js";import{EasyMenu as L,MenuItem as M,MenuTrigger as yt,MenuPopover as St,MenuHeader as xt,Menu as wt}from"./menu.js";import{MultiSelect as Nt}from"./multi-select.js";import{NumberField as Ct}from"./numberfield.js";import{PopoverTrigger as Pt,Popover as It}from"./popover.js";import{SelectTrigger as Ft}from"./select.js";import{TextField as At}from"./textfield.js";import{formatDate as H}from"../utilities/date.js";import{useProjectName as oe,useResourceFormatter as B,ALL_OS as Tt}from"../utilities/resources.js";import{classNames as x}from"../utilities/theme.js";import{ControlledDialogProvider as Dt,useControlledDialog as le,DialogHeader as Ot,DialogTitle as Mt,DialogBody as zt,DialogFooter as Rt}from"./dialog.js";import{IcRefresh as jt,IcMenu as _t,IcLayoutGrid as Lt,IcColumns as $t,IcGrip as Et,IcFirst as qt,IcLeft as Vt,IcRight as Ht,IcLast as Bt,IcMoreVertical as Kt,IcInfo as kt,IcSortAsc as Qt,IcSortDesc as Gt,IcSortNone as Ut,IcCheck as ne,IcMinus as Zt,IcAccount as Xt,IcLicense as Yt,IcDate as Jt,IcFile as Wt,IcFilter as se,IcClose as Me}from"./icons.js";import{MultipleIdSearchInput as en}from"./id-search.js";import{useIsMobile as K}from"../utilities/use-mobile.js";import{Loader as ze}from"./loader.js";import{SearchField as tn}from"./searchfield.js";import{Table as nn,TableHeader as rn,TableRow as we,TableHead as an,TableBody as on,TableCell as ln}from"./table.js";import{CountryName as sn}from"../utilities/countries.js";import{Duration as cn}from"../utilities/duration.js";import{formatDays as un,formatFilesize as dn,formatNumber as mn}from"../utilities/numbers.js";import{Checkbox as Ne}from"./checkbox.js";import{TooltipTrigger as gn,Tooltip as pn}from"./tooltip.js";import{getSubscriptionStartTriggerLabel as fn,ALL_LICENSE_TYPES as bn}from"./select-options.js";import{useCtxClient as hn}from"../utilities/ctx-client.js";import{ProgressBar as vn}from"./progress-bar.js";import{TagGroup as yn,Tag as Sn}from"./tag-group.js";import"class-variance-authority";import"clsx";import"@icons-pack/react-simple-icons";import"./calendar.js";import"./form.js";import"./card.js";import"./datefield.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./list-box.js";import"./kbd.js";import"../utilities/string.js";import"../utilities/empty-option.js";function xn(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const Re=Oe(),wn=[Re.accessor("checkbox",{header:({table:e})=>t(Ne,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all",size:"sm"}),cell:({row:e})=>t(Ne,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row",size:"sm"}),enableSorting:!1,enableHiding:!1})],F="TableActions";function Nn(e){return e.length===0?[]:[Re.accessor(F,{header:"Actions",id:F,enableHiding:!1,cell:({row:a})=>t(zn,{label:t(Kt,{}),data:a.original,items:e}),enableSorting:!1})]}function Vr(){return Oe()}function Hr({path:e,pathParameters:a,queryParameters:n,columns:l,filterConfig:c,columnsToHideByDefault:i={},allowSelection:r=!1,allowToolbar:d=!0,initialFilters:s=[],previewFilters:o,tableActions:m,Card:b,onRowNavigate:y,disableTableView:h,hideViewToggle:N,include:C}){const[A,$]=O({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:z,pagination:p}=A,[v,k]=O(""),[ue,de]=O({}),[Q,qe]=O(s),G=W(()=>Q.filter(u=>u.active!==!1).map(u=>{if(u.type==="derived-select"){const I=c[u.property];return I?.type==="derived-select"?I.toApiQuery(String(u.value??"")):{}}const f=u.value instanceof Set?Array.from(u.value):u.value;return u.needOperator===!1?{[u.property]:Array.isArray(f)?f.join(","):f}:u.operator==="between"&&Array.isArray(f)&&f.length===2?{[u.property]:{gte:f[0],lte:f[1]}}:Array.isArray(f)?{[u.property]:{[u.operator]:f.join(",")}}:{[u.property]:{[u.operator]:f}}}).reduce((u,f)=>vt(u,f),{}),[Q,c]),E=C?.length?C.join(","):void 0,q={...n,...G,limit:p.pageSize,sort:xn(z[0]),search:v,...E?{include:E}:{}},Ve=hn(),He=["get",e,{...q,page:p.pageIndex+1},"table"],Be=["get",e,q,"card"],U=`${e}_ctx`,[me,ge]=ee(`${U}_column_order_preference`,[]),[pe,Ke]=ee(`${U}_column_visibility_preference`,{id:!1,...i}),[ke,Qe]=ee(`${U}_view_mode_preference`,h?"card":"table"),Ge=K(),T=h||Ge&&b?"card":ke,Z=u=>{$(f=>({...f,...u}))};async function fe(u){const f=await Ve.GET(e,{params:{query:{...n,page:u,limit:p.pageSize,sort:q.sort,search:q.search,...E?{include:E}:{},...G},path:a}});return{data:f.data??[],total:Number.parseInt(f.response.headers.get("Pagination-Count")||"0"),nextPage:u+1}}const j=pt({queryKey:He,enabled:T==="table",queryFn:()=>fe(p.pageIndex+1),placeholderData:u=>u}),P=ft({queryKey:Be,enabled:T==="card",initialPageParam:1,queryFn:({pageParam:u})=>fe(u),getNextPageParam:(u,f)=>f.flatMap(V=>V.data).length<u.total?u.nextPage:void 0}),be=W(()=>T==="table"?j.data?.data??[]:P.data?.pages.flatMap(u=>u.data)??[],[T,j.data,P.data]),he=W(()=>T==="table"?j.data?.total??0:P.data?.pages[0]?.total??0,[T,j.data,P.data]),ve=T==="table"?j:{...P,data:{data:be,total:he},isLoading:P.isLoading,isFetching:P.isFetching,isError:P.isError,error:P.error,refetch:P.refetch},Ue=m.filter(ce),Ze=[...r?wn:[],...l,...Nn(Ue??[])];function Xe(u){return typeof u=="function"}function _(u,f){return Xe(u)?u(f):u}const ye=bt({data:be,columns:Ze,getCoreRowModel:ht(),rowCount:he,manualPagination:!0,onPaginationChange:u=>{Z({pagination:_(u,p)})},manualSorting:!0,onSortingChange:u=>{de({}),Z({sorting:[..._(u,z)]})},manualFiltering:!0,onColumnVisibilityChange:u=>{Ke(_(u,pe))},onRowSelectionChange:u=>{de(_(u,ue))},onColumnOrderChange:u=>{ge(_(u,me))},state:{sorting:z,columnVisibility:pe,pagination:p,rowSelection:ue,columnOrder:me},meta:{refetch:ve.refetch}});return ie(()=>{const u=ye.getAllFlatColumns().map(I=>I.id),f=u.filter(I=>I!=="checkbox"&&I!==F);ge(I=>{const V=I.filter(X=>f.includes(X)),Ye=f.filter(X=>!I.includes(X)),Je=V.length>0?[...V,...Ye]:f;return[...u.includes("checkbox")?["checkbox"]:[],...Je,...u.includes(F)?[F]:[]]})},[]),{tableState:A,updateTableState:Z,query:ve,setSearchQuery:k,searchQuery:v,tanTable:ye,mergedFilters:G,filters:Q,setFilters:qe,filterConfig:c,tableActions:m,pathParameters:a,queryParameters:n,viewMode:T,setViewMode:Qe,Card:b,allowSelection:r,allowToolbar:d,previewFilters:o,infiniteQuery:P,disableTableView:h,hideViewToggle:N,onRowNavigate:y}}const je=We(null);function w(){const e=et(je);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function Br({children:e,...a}){return t(je.Provider,{value:a,children:e})}function Cn(){const{query:e}=w();return e.isFetching?null:e.isError?g("span",{className:"flex gap-3 items-center",children:[t(kt,{}),t("span",{children:e.error?.message})]}):e.data?.data?.length===0?t(D,{children:"No results found."}):t(D,{children:"Unknown error. Please contact customer support."})}function Pn({cardGridClassName:e}){const{query:a,tanTable:n,viewMode:l,tableActions:c,Card:i}=w(),r=c.filter(ce),d=l==="card"&&!!i;return a.isLoading?t("div",{className:"body-sm flex items-center justify-center min-h-32",children:t(ze,{})}):n.getRowModel().rows.length===0?t("div",{className:"body-sm flex items-center justify-center min-h-32 text-muted",children:t(Cn,{})}):d?t(In,{Card:i,actions:r,className:e}):t(Mn,{className:"w-full"})}function Kr({className:e,cardGridClassName:a,...n}){const{viewMode:l,Card:c,allowToolbar:i}=w(),r=l==="card"&&!!c;return t(D,{children:g(Dt,{children:[i&&t(Dn,{}),g("section",{...n,className:x("z-20 flex flex-col",r?"":"border rounded-lg",e),children:[t("div",{className:"w-full overflow-auto relative rounded-lg [scrollbar-width:none]",tabIndex:0,children:t(Pn,{cardGridClassName:a})}),!r&&g("div",{className:"flex w-full justify-between border-t gap-icon py-2 px-icon bg-elevation-mid rounded-b-lg overflow-x-auto",children:[g("div",{className:"flex gap-icon",children:[t(Fn,{}),t(Tn,{})]}),t(An,{})]})]})]})})}function In({Card:e,actions:a,className:n,...l}){const{tanTable:c,allowSelection:i}=w(),{infiniteQuery:r}=w(),d=Te(null);return ie(()=>{const s=d.current;if(!s)return;const o=new IntersectionObserver(m=>{m[0].isIntersecting&&r.hasNextPage&&!r.isFetchingNextPage&&r.fetchNextPage()},{threshold:.1});return o.observe(s),()=>o.disconnect()},[r.hasNextPage,r.isFetchingNextPage]),g("div",{...l,className:x(n,"grid grid-cols-1 lg:grid-cols-2 gap-icon pb-input"),children:[c.getRowModel().rows.map((s,o)=>{const m={isSelected:s.getIsSelected(),onToggle:()=>s.toggleSelected(),allowSelection:i};return t(tt,{children:e(s.original,a,m,o)},s.id)}),t("div",{ref:d,className:"col-span-full h-4 flex items-center justify-center",children:r.isFetchingNextPage&&t(ze,{})})]})}function Fn(){if(oe()==="customer-portal")return null;const{tanTable:a}=w(),[n,l]=O(null),c=B(),i=nt(Se(rt),Se(at,{coordinateGetter:st}));return t(it,{sensors:i,collisionDetection:ot,onDragStart:d=>{const{active:s}=d;l(s.id.toString())},onDragEnd:d=>{const{active:s,over:o}=d;if(o&&s.id!==o.id){const m=a.getState().columnOrder,b=m.indexOf(s.id.toString()),y=m.indexOf(o.id.toString());a.setColumnOrder([...dt(m,b,y)])}l(null)},children:g(ct,{items:a.getState().columnOrder,strategy:ut,children:[g(L,{label:g(D,{children:[t($t,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",size:"sm",items:a.getAllFlatColumns(),selectedKeys:a.getVisibleFlatColumns().map(d=>d.id),children:[t(M,{onAction:()=>a.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),a.getState().columnOrder.map(d=>{const s=a.getAllFlatColumns().find(o=>o.id===d);return!s||s.id==="checkbox"||s.id===F?null:t(r,{column:s},s.id)})]}),t(lt,{children:n?t("div",{className:"opacity-70 border-2 border-primary",children:c(n)}):null})]})});function r({column:d}){const{attributes:s,listeners:o,setNodeRef:m,transform:b,transition:y}=mt({id:d.id}),h={transform:gt.Transform.toString(b),transition:y,zIndex:"999"};return g(M,{ref:m,style:h,...s,id:d.id,onAction:()=>d.toggleVisibility(),isDisabled:!d.getCanHide(),className:"flex items-center",children:[t(Et,{...o,className:"size-icon cursor-grab"}),ae(d),d.getIsSorted()&&t(_e,{className:"size-icon",direction:d.getIsSorted()})]})}}function An(){const{tanTable:e}=w(),a=e.getRowCount();return g("div",{className:"flex items-center gap-2",children:[t("span",{className:"whitespace-nowrap body-sm text-muted",children:`${e.getState().pagination.pageIndex*e.getState().pagination.pageSize+1} - ${Math.min((e.getState().pagination.pageIndex+1)*e.getState().pagination.pageSize,a)} of ${a?.toLocaleString()}`}),(e.getCanNextPage()||e.getCanPreviousPage())&&g(D,{children:[t(S,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon-sm",children:t(qt,{})}),t(S,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon-sm",children:t(Vt,{})}),t(S,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon-sm",children:t(Ht,{})}),t(S,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon-sm",children:t(Bt,{})})]})]})}function Tn(){if(oe()==="customer-portal")return null;const{tanTable:a}=w(),n=[10,20,30,40,50];return t(L,{label:a.getState().pagination.pageSize.toString(),selectionMode:"single",size:"sm",selectedKeys:[a.getState().pagination.pageSize.toString()],items:n.map(l=>({id:l.toString(),value:l})),children:l=>t(M,{onAction:()=>a.setPageSize(l.value),children:l.value})})}function Dn(){const{query:e,tanTable:a,searchQuery:n,setSearchQuery:l,tableActions:c,viewMode:i,setViewMode:r,Card:d,previewFilters:s,disableTableView:o,hideViewToggle:m}=w(),b=a.getSelectedRowModel().rows.length>0,y=K(),h=c.filter(N=>N.resourceType!=="single").filter(N=>N.resourceType==="multiple"===b);return g("section",{className:"flex justify-between my-0 mb-icon gap-icon overflow-x-auto py-1",children:[g("div",{className:x("flex gap-icon max-md:min-w-0 max-md:flex-1"),children:[t(S,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",className:x("max-md:shrink-0"),children:t(jt,{})}),t(tn,{value:n,onChange:l,className:x("max-md:min-w-0 max-md:flex-1")}),t(qn,{previewFilters:s,className:x("max-md:shrink-0")})]}),!y&&g("div",{className:"flex gap-icon",children:[t(Fe,{items:h,isFetching:e.isFetching}),d&&!o&&!m&&g("div",{className:"flex gap-1 bg-elevation-1 rounded-md overflow-hidden",children:[t(S,{variant:i==="table"?"primary":"neutral",size:"icon",onPress:()=>r("table"),"aria-label":"Table view",className:"border-none",children:t(_t,{})}),t(S,{variant:i==="card"?"primary":"neutral",size:"icon",onPress:()=>r("card"),"aria-label":"Card view",className:"border-none",children:t(Lt,{})})]})]}),y&&h.length>0&&t("div",{className:"fixed inset-x-0 bottom-0 z-30 flex gap-icon border-t bg-elevation-1 p-icon",children:t(Fe,{items:h,isFetching:e.isFetching,buttonClassName:"flex-1 justify-center"})})]})}function _e({direction:e,...a}){return e==="asc"?t(Qt,{className:"size-3.5",...a}):e==="desc"?t(Gt,{className:"size-3.5",...a}):t(Ut,{className:"size-3.5",...a})}function ae(e){const a=B(),n=e.columnDef.header;return typeof n=="string"?n:a(e.id)}function On(e){const a=e.column.columnDef.meta?.displayType,n=e.getValue();if(n==null)return null;switch(a){case"date":return t("span",{className:"tabular-nums",children:H(n)});case"number":return t("span",{className:"block text-right tabular-nums",children:mn(n)});case"boolean":return t(xe,{variant:n?"success":"destructive",className:"capitalize",children:String(n)});case"badge":return t(xe,{children:String(n)});case"tags":let l=Array.isArray(n)?n:[String(n)];return t(yn,{items:l.map(r=>({id:r,name:r})),className:"!flex-nowrap",children:r=>t(Sn,{children:r.name})});case"progressBar":const[c,i]=n;return t(vn,{meterClassName:"w-16",label:`${c}/${i}`,minValue:0,maxValue:i,value:c});case"country":return t(sn,{value:n});case"enum":return t("span",{className:"uppercase w-full",children:String(n)});case"fileSize":return dn(n);case"days":return un(n);case"os":return Tt[n]??n;case"licenseType":return bn[n]??n;case"subscriptionInterval":return cn.formatISODuration(n);case"subscriptionStartTrigger":return fn(n);default:return String(n)}}function Ce({header:e}){const a=e.column.columnDef.header;return typeof a=="string"||!a?ae(e.column):typeof a=="function"?typeof a(e.getContext())=="string"?ae(e.column):re(a,e.getContext()):re(a,e.getContext())}function Mn({className:e}){const{tanTable:a,onRowNavigate:n}=w(),l=(c,i,r="z-50")=>x("text-left body-sm font-medium whitespace-nowrap",c&&`sticky right-0 ${r} text-center justify-center`,i);return g(nn,{className:x("table-auto border-0 rounded-lg",e),children:[t(rn,{className:"sticky top-0 z-10 rounded-lg",children:a.getHeaderGroups().map(c=>t(we,{children:c.headers.map(i=>g(an,{scope:"col",colSpan:i.colSpan,className:l(i.id===F,"bg-elevation-mid"),children:[!i.column.getCanSort()&&!i.isPlaceholder&&t("div",{className:x("w-full flex items-center gap-1 text-xs uppercase font-semibold",i.id===F?"justify-center":"justify-start"),children:t(Ce,{header:i})}),i.column.getCanSort()&&g(S,{variant:"ghost",size:"none",className:x("w-full p-1 rounded-md uppercase text-muted text-xs font-semibold",i.id===F?"justify-center":"justify-start",i.column.getIsSorted()?"text-primary":""),onPress:i.column.getToggleSortingHandler(),children:[t("span",{children:t(Ce,{header:i})}),i.column.getIsSorted()&&t(_e,{direction:i.column.getIsSorted()})]})]},i.id))},c.id))}),t(on,{children:a.getRowModel().rows.map(c=>t(we,{className:x("group bg-elevation-1 data-[selected=true]:bg-primary-100 hover:bg-elevation-mid",n&&"cursor-pointer focus-visible:outline focus-visible:outline-ring"),"data-selected":c.getIsSelected(),...n&&{role:"link",tabIndex:0,onClick:i=>{i.target.closest('a, button, input, select, textarea, [role="button"]')||n(c.original)},onKeyDown:i=>{i.key==="Enter"&&n(c.original)}},children:c.getVisibleCells().map(i=>{const r=i.column.id===F,d=i.column.columnDef.meta?.displayType?On(i):re(i.column.columnDef.cell,i.getContext());return t(ln,{className:x(l(r,r?"bg-elevation-1 group-data-[selected=true]:bg-primary-100 group-hover:bg-elevation-mid":"","z-1"),r&&"flex justify-center items-center"),children:d},i.id)})},c.id))})]})}function Pe(e){return e.resourceType==="none"}function ce(e){return e.resourceType==="single"}function Ie(e){return e.resourceType==="multiple"}function Fe({items:e,isFetching:a,buttonClassName:n}){const{openDialog:l,closeDialog:c}=le(),{tanTable:i,mergedFilters:r}=w();function d(o,m){return o.isDisabled?Pe(o)?o.isDisabled():Ie(o)?o.isDisabled(m):!1:!1}const s=i.getSelectedRowModel().rows.map(o=>o.original);return t(D,{children:e.map((o,m)=>{const b=o.icon,y=d(o,s)||a;return g(S,{"aria-label":o.label,type:"button",isDisabled:y,className:x("animate-in fade-in slide-in-from-right-15 duration-300 transition-transform",n),onPress:h=>{const N={event:h,openDialog:l,closeDialog:c,activeFilters:r};Pe(o)?o.onPress(N):Ie(o)&&o.onPress({...N,data:s})},variant:o.variant??"neutral",children:[b&&t(b,{"aria-hidden":!0}),t("span",{children:o.label})]},`${o.label}-${m}`)})})}function zn({label:e,items:a,data:n}){const{openDialog:l,closeDialog:c}=le(),{mergedFilters:i}=w();return a.length<5?t("div",{className:"flex items-center gap-2",children:a.map((r,d)=>{const s=r.icon,o=typeof r.label=="function"?r.label(n):r.label;return g(gn,{children:[t(S,{"aria-label":typeof o=="string"?o:void 0,isDisabled:r.isDisabled?.(n)??!1,variant:"ghost",size:"icon",onPress:()=>{const m={openDialog:l,closeDialog:c};r.onPress({...m,data:n,activeFilters:i})},children:t(s,{className:"size-icon"})}),t(pn,{children:o})]},`${d}-${typeof o=="string"?o:""}`)})}):t(L,{withChevron:!1,"aria-label":"Actions",label:e,size:"icon",children:a.map((r,d)=>{const s=r.icon,o=typeof r.label=="function"?r.label(n):r.label;return g(M,{id:typeof o=="string"?o:void 0,isDisabled:r.isDisabled?.(n)??!1,onAction:()=>{const m={openDialog:l,closeDialog:c};ce(r)&&r.onPress({...m,data:n,activeFilters:i})},children:[t(s,{className:"size-icon"}),o]},`${d}-${typeof o=="string"?o:""}`)})})}const kr=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte","between"],Ae={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",between:"between"},Rn={eq:"=",ne:"≠",cn:"contains",nc:"!contains",sw:"starts with",ew:"ends with",in:"in",nin:"not in",gt:">",gte:"≥",lt:"<",lte:"≤",between:"↔"};function R(e,a){const n=a.type,l=`${e}-${Date.now()}`,c=n==="bool"||n==="derived-select"?!1:a.needOperator??!0,i=c?Le[n][0]:"eq",r={id:l,property:e,operator:i,needOperator:c};switch(n){case"bool":return{...r,type:n,value:!0};case"derived-select":return{...r,type:n,value:a.options[0]?.id??""};case"string":return{...r,type:n,value:""};case"date":return{...r,type:n,value:i==="between"?[new Date().toISOString(),new Date().toISOString()]:new Date().toISOString()};case"id":return{...r,type:n,value:""};case"id-search":return{...r,type:n,value:[]};case"enum":return{...r,type:n,value:new Set};case"number":return{...r,type:n,value:0}}}const Le={bool:["eq"],"derived-select":["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["between","lt","gt"],number:["eq","ne","gt","gte","lt","lte"]};function jn(e,a){let n=a.value!==void 0?a.value:e.value;const l=a.operator??e.operator;if(e.type==="date"&&a.operator!==void 0)if(l==="between"&&!Array.isArray(n)){const c=typeof n=="string"?n:new Date().toISOString();n=[c,c]}else l!=="between"&&Array.isArray(n)&&(n=n[0]??new Date().toISOString());return n}function $e(){const{setFilters:e,filterConfig:a}=w();return{updateFilter:(i,r)=>{e(d=>{const s=d.find(m=>m.property===i)??R(i,a[i]),o={...s,...r,value:jn(s,r),active:!0};return d.some(m=>m.id===s.id)?d.map(m=>m.id===s.id?o:m):[...d,o]})},removeFilter:i=>{e(r=>{const d=r.find(s=>s.id===i);return d?d.isPreview?r.map(s=>s.id===i?{...R(s.property,a[s.property]),active:!1,isPreview:!0}:s):r.filter(s=>s.id!==i):r})},clearAllFilters:()=>{e(i=>i.filter(r=>r.isPreview).map(r=>({...R(r.property,a[r.property]),active:!1,isPreview:!0})))}}}function _n(e,a){switch(e.type){case"string":case"id":return e.value??"";case"number":return e.value?.toString()??"";case"bool":return e.value?"true":"false";case"derived-select":{const n=a[e.property];if(!n||n.type!=="derived-select")return e.value??"";const l=n.options.find(c=>c.id===e.value);return typeof l?.label=="string"?l.label:e.value??""}case"date":if(Array.isArray(e.value)){const[n,l]=e.value;return`${H(n,{dateStyle:"short"})??""} – ${H(l,{dateStyle:"short"})??""}`}return e.value?H(e.value,{dateStyle:"short"})??"":"";case"enum":return e.value&&e.value.size>0?`${e.value.size} selected`:"";case"id-search":return e.value&&e.value.length>0?e.value.length===1?"1 item":`${e.value.length} items`:""}}function Ln({filter:e,filterConfig:a,onChange:n}){if(e.type==="string"||e.type==="id")return t(At,{autoFocus:!0,value:e.value??"",onChange:n,"aria-label":"Filter value"});if(e.type==="number")return t(Ct,{autoFocus:!0,value:e.value,onChange:n,"aria-label":"Filter value"});if(e.type==="date"){if(e.operator==="between"){const[c,i]=Array.isArray(e.value)?e.value:[new Date().toISOString(),new Date().toISOString()],r=Y(c,J()),d=Y(i,J());return g("div",{className:"flex flex-col gap-icon",children:[t(te,{autoFocus:!0,hideTimeZone:!0,label:"From",value:r,onChange:s=>n([s?s.toAbsoluteString():c,i])}),t(te,{hideTimeZone:!0,label:"To",value:d,onChange:s=>n([c,s?s.toAbsoluteString():i])})]})}const l=e.value&&!Array.isArray(e.value)?Y(e.value,J()):null;return t(te,{autoFocus:!0,hideTimeZone:!0,value:l,onChange:c=>n(c?c.toAbsoluteString():new Date().toISOString()),"aria-label":"Filter date"})}if(e.type==="enum"){const l=a[e.property];return l.type!=="enum"?null:t(Nt,{autoFocus:!0,items:l.options,value:e.value??new Set,onChange:n,"aria-label":"Filter value"})}if(e.type==="id-search"){const l=a[e.property];if(l.type!=="id-search")return null;const c=l.defaultParams;return t(en,{autoFocus:!0,path:l.path,accessor:l.accessor,defaultParams:c,value:e.value??[],onChange:n,"aria-label":"Filter value"})}return null}function Ee({filter:e,filterConfig:a,resourceFormatter:n,onRemove:l,onUpdate:c,isOpen:i,onOpenChange:r}){const d=e.needOperator===!1?["eq"]:Le[e.type],s=_n(e,a),o=oe(),m=K(),b=e.type==="bool"||e.type==="derived-select",y=m?g("div",{className:"flex flex-col gap-1",children:[t("span",{className:"body-sm text-muted",children:n(e.property)}),t(Ft,{type:"button",className:"w-full","aria-label":n(e.property),children:s})]}):g(S,{type:"button",variant:e.active===!1?"neutral":"primary_neutral",className:"animate-in slide-in-from-left-10 fade-in flex justify-between gap-2",children:[t(se,{}),b?t("span",{className:"font-medium",children:s}):g(D,{children:[t("span",{className:"font-medium",children:n(e.property)}),o!=="customer-portal"&&t("span",{children:Rn[e.operator]}),o!=="customer-portal"&&s&&t("span",{children:s})]}),e.active!==!1&&t(De,{onPress:()=>l(),children:t("span",{className:"bg-primary hover:bg-destructive rounded-full size-icon flex justify-center items-center",children:t(Me,{className:"size-2.5 text-elevation-1"})})})]});if(b){let h,N;if(e.type==="bool")h=[{id:"true",label:"True"},{id:"false",label:"False"}],N=e.value?"true":"false";else{const C=a[e.property];h=C?.type==="derived-select"?C.options:[],N=e.value??""}return g(yt,{isOpen:i,onOpenChange:r,children:[t("div",{className:"relative",children:y}),g(St,{className:"min-w-48",children:[t(xt,{inset:!0,separator:!1,children:n(e.property)}),t(wt,{selectionMode:"single",disallowEmptySelection:!0,selectedKeys:new Set([N]),onSelectionChange:C=>{if(C==="all")return;const A=C.values().next().value;A!=null&&c({value:e.type==="bool"?String(A)==="true":String(A)})},"aria-label":"Filter value",children:h.map(C=>t(M,{id:C.id,children:C.label},C.id))})]})]})}return g(Pt,{isOpen:i,onOpenChange:r,children:[t("div",{className:"relative",children:y}),t(It,{className:"p-icon min-w-48",children:g("div",{className:"flex flex-col gap-icon",children:[d.length>1&&t(L,{label:Ae[e.operator],variant:"neutral","aria-label":"Change operator",children:d.map(h=>t(M,{onAction:()=>c({operator:h}),children:Ae[h]},h))}),t(Ln,{filter:e,filterConfig:a,onChange:h=>c({value:h})}),t(S,{type:"button",variant:"neutral",className:"self-end",onPress:l,"aria-label":`Remove ${n(e.property)} filter`,children:"Clear"})]})})]})}function $n({onApply:e}){const{filters:a,filterConfig:n}=w(),l=B(),{updateFilter:c,removeFilter:i,clearAllFilters:r}=$e(),[d,s]=O(null);return g(D,{children:[t(Ot,{children:t(Mt,{children:"Filter"})}),t(zt,{className:"flex flex-col gap-input",children:Object.keys(n).map(o=>{const m=a.find(b=>b.property===o)??R(o,n[o]);return t(Ee,{filter:m,filterConfig:n,resourceFormatter:l,onRemove:()=>i(m.id),onUpdate:b=>c(o,b),isOpen:d===o,onOpenChange:b=>s(b?o:null)},o)})}),g(Rt,{children:[t(S,{variant:"neutral",onPress:()=>{r(),s(null)},children:"Clear All"}),t(S,{variant:"primary",onPress:e,children:"Apply"})]})]})}function En({className:e,hasClearableFilters:a,isDisabled:n,onClearAll:l,...c}){const{openDialog:i,closeDialog:r}=le();return t("section",{...c,className:x("flex items-center",e),children:g(S,{variant:a?"primary_neutral":"neutral",isDisabled:n,"aria-label":"Filter",onPress:()=>i(t($n,{onApply:r})),className:"min-w-0 flex-1",children:[t(se,{}),"Filters",a&&t(De,{onPress:l,children:t("span",{className:"animate-slide-in bg-primary hover:bg-destructive rounded-full size-icon flex justify-center items-center",children:t(Me,{className:"size-2.5 text-elevation-1"})})})]})})}function qn({className:e,previewFilters:a,...n}){const{filters:l,query:c,setFilters:i,filterConfig:r}=w(),d=K(),s=B(),o=Object.keys(r).filter(p=>!l.some(v=>v.property===p)).sort(),[m,b]=O(null),y=Te(!1);ie(()=>{if(!y.current&&l.length===0){const p=[];a&&a.length>0&&p.push(...a.filter(v=>r[v]).map(v=>({...R(v,r[v]),active:!1,isPreview:!0}))),p.length>0&&i(p)}y.current=!0},[]);const{updateFilter:h,removeFilter:N,clearAllFilters:C}=$e(),A=p=>{const v=R(p,r[p]);i([...l,v]),b(v.id)},$=l.some(p=>!p.isPreview||p.active!==!1),z=()=>{C(),b(null)};return d?t(En,{...n,className:e,hasClearableFilters:$,isDisabled:c.isPending,onClearAll:z}):g("section",{...n,className:x("flex flex-wrap gap-icon items-center",e),children:[l.filter(p=>p.property in r).map(p=>t(Ee,{filter:p,filterConfig:r,resourceFormatter:s,onRemove:()=>N(p.id),onUpdate:v=>h(p.property,v),isOpen:m===p.id,onOpenChange:v=>b(v?p.id:null)},p.id)),o.length>0&&t(L,{label:t(se,{}),isDisabled:c.isPending,variant:"neutral","aria-label":"Add filter",children:o.map(p=>{const v=r[p].type,k=Vn[v];return g(M,{className:"!justify-between",onAction:()=>A(p),children:[s(p),t(k,{})]},p)})}),$&&t(S,{variant:"ghost",onPress:z,"aria-label":"Clear all filters",className:"animate-in fade-in",children:"Clear All"})]})}const Vn={"id-search":Wt,bool:ne,"derived-select":ne,date:Jt,enum:Yt,id:Xt,number:Zt,string:ne};export{Ae as C,qn as D,Kr as DataTable,je as DataTableContext,Br as DataTableProvider,kr as F,Vr as getColumnHelper,w as useDataTable,Hr as useDataTableState};
|
|
1
|
+
"use client";import{jsx as t,Fragment as D,jsxs as g}from"react/jsx-runtime";import{parseAbsolute as Y,getLocalTimeZone as J}from"@internationalized/date";import{createContext as We,useContext as et,useState as O,useMemo as W,useEffect as ie,useRef as Te,Fragment as tt}from"react";import{Pressable as De}from"react-aria-components";import{Button as S}from"./button.js";import{useSensors as nt,useSensor as Se,PointerSensor as rt,KeyboardSensor as at,DndContext as it,closestCenter as ot,DragOverlay as st}from"@dnd-kit/core";import{sortableKeyboardCoordinates as lt,SortableContext as ct,verticalListSortingStrategy as ut,arrayMove as dt,useSortable as mt}from"@dnd-kit/sortable";import{CSS as gt}from"@dnd-kit/utilities";import{useQuery as pt,useInfiniteQuery as ft}from"@tanstack/react-query";import{createColumnHelper as Oe,useReactTable as bt,getCoreRowModel as ht,flexRender as re}from"@tanstack/react-table";import{useLocalStorage as ee}from"@uidotdev/usehooks";import{merge as vt}from"lodash-es";import{Badge as xe}from"./badge.js";import{DatePicker as te}from"./date-picker.js";import{EasyMenu as L,MenuItem as M,MenuTrigger as yt,MenuPopover as St,MenuHeader as xt,Menu as wt}from"./menu.js";import{MultiSelect as Nt}from"./multi-select.js";import{NumberField as Ct}from"./numberfield.js";import{PopoverTrigger as Pt,Popover as It}from"./popover.js";import{SelectTrigger as Ft}from"./select.js";import{TextField as At}from"./textfield.js";import{formatDate as k}from"../utilities/date.js";import{useProjectName as oe,useResourceFormatter as H,ALL_OS as Tt}from"../utilities/resources.js";import{classNames as x}from"../utilities/theme.js";import{ControlledDialogProvider as Dt,useControlledDialog as se,DialogHeader as Ot,DialogTitle as Mt,DialogBody as zt,DialogFooter as Rt}from"./dialog.js";import{IcRefresh as jt,IcMenu as _t,IcLayoutGrid as Lt,IcColumns as $t,IcGrip as Et,IcFirst as qt,IcLeft as Vt,IcRight as kt,IcLast as Ht,IcMoreVertical as Bt,IcInfo as Kt,IcSortAsc as Qt,IcSortDesc as Gt,IcSortNone as Ut,IcCheck as ne,IcMinus as Zt,IcAccount as Xt,IcLicense as Yt,IcDate as Jt,IcFile as Wt,IcFilter as le,IcClose as Me}from"./icons.js";import{MultipleIdSearchInput as en}from"./id-search.js";import{useIsMobile as B}from"../utilities/use-mobile.js";import{Loader as ze}from"./loader.js";import{SearchField as tn}from"./searchfield.js";import{Table as nn,TableHeader as rn,TableRow as we,TableHead as an,TableBody as on,TableCell as sn}from"./table.js";import{CountryName as ln}from"../utilities/countries.js";import{Duration as cn}from"../utilities/duration.js";import{formatDays as un,formatFilesize as dn,formatNumber as mn}from"../utilities/numbers.js";import{Checkbox as Ne}from"./checkbox.js";import{TooltipTrigger as gn,Tooltip as pn}from"./tooltip.js";import{getSubscriptionStartTriggerLabel as fn,ALL_LICENSE_TYPES as bn}from"./select-options.js";import{useCtxClient as hn}from"../utilities/ctx-client.js";import{ProgressBar as vn}from"./progress-bar.js";import{TagGroup as yn,Tag as Sn}from"./tag-group.js";import"class-variance-authority";import"clsx";import"@icons-pack/react-simple-icons";import"./calendar.js";import"./form.js";import"./card.js";import"./datefield.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./list-box.js";import"./kbd.js";import"../utilities/string.js";import"../utilities/empty-option.js";function xn(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const Re=Oe(),wn=[Re.accessor("checkbox",{header:({table:e})=>t(Ne,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all",size:"sm"}),cell:({row:e})=>t(Ne,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row",size:"sm"}),enableSorting:!1,enableHiding:!1})],F="TableActions";function Nn(e){return e.length===0?[]:[Re.accessor(F,{header:"Actions",id:F,enableHiding:!1,cell:({row:a})=>t(zn,{label:t(Bt,{className:"text-icon-primary"}),data:a.original,items:e}),enableSorting:!1})]}function Vr(){return Oe()}function kr({path:e,pathParameters:a,queryParameters:n,columns:s,filterConfig:c,columnsToHideByDefault:i={},allowSelection:r=!1,allowToolbar:d=!0,initialFilters:l=[],previewFilters:o,tableActions:m,Card:b,onRowNavigate:y,disableTableView:h,hideViewToggle:N,include:C}){const[A,$]=O({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:z,pagination:p}=A,[v,K]=O(""),[ue,de]=O({}),[Q,qe]=O(l),G=W(()=>Q.filter(u=>u.active!==!1).map(u=>{if(u.type==="derived-select"){const I=c[u.property];return I?.type==="derived-select"?I.toApiQuery(String(u.value??"")):{}}const f=u.value instanceof Set?Array.from(u.value):u.value;return u.needOperator===!1?{[u.property]:Array.isArray(f)?f.join(","):f}:u.operator==="between"&&Array.isArray(f)&&f.length===2?{[u.property]:{gte:f[0],lte:f[1]}}:Array.isArray(f)?{[u.property]:{[u.operator]:f.join(",")}}:{[u.property]:{[u.operator]:f}}}).reduce((u,f)=>vt(u,f),{}),[Q,c]),E=C?.length?C.join(","):void 0,q={...n,...G,limit:p.pageSize,sort:xn(z[0]),search:v,...E?{include:E}:{}},Ve=hn(),ke=["get",e,{...q,page:p.pageIndex+1},"table"],He=["get",e,q,"card"],U=`${e}_ctx`,[me,ge]=ee(`${U}_column_order_preference`,[]),[pe,Be]=ee(`${U}_column_visibility_preference`,{id:!1,...i}),[Ke,Qe]=ee(`${U}_view_mode_preference`,h?"card":"table"),Ge=B(),T=h||Ge&&b?"card":Ke,Z=u=>{$(f=>({...f,...u}))};async function fe(u){const f=await Ve.GET(e,{params:{query:{...n,page:u,limit:p.pageSize,sort:q.sort,search:q.search,...E?{include:E}:{},...G},path:a}});return{data:f.data??[],total:Number.parseInt(f.response.headers.get("Pagination-Count")||"0"),nextPage:u+1}}const j=pt({queryKey:ke,enabled:T==="table",queryFn:()=>fe(p.pageIndex+1),placeholderData:u=>u}),P=ft({queryKey:He,enabled:T==="card",initialPageParam:1,queryFn:({pageParam:u})=>fe(u),getNextPageParam:(u,f)=>f.flatMap(V=>V.data).length<u.total?u.nextPage:void 0}),be=W(()=>T==="table"?j.data?.data??[]:P.data?.pages.flatMap(u=>u.data)??[],[T,j.data,P.data]),he=W(()=>T==="table"?j.data?.total??0:P.data?.pages[0]?.total??0,[T,j.data,P.data]),ve=T==="table"?j:{...P,data:{data:be,total:he},isLoading:P.isLoading,isFetching:P.isFetching,isError:P.isError,error:P.error,refetch:P.refetch},Ue=m.filter(ce),Ze=[...r?wn:[],...s,...Nn(Ue??[])];function Xe(u){return typeof u=="function"}function _(u,f){return Xe(u)?u(f):u}const ye=bt({data:be,columns:Ze,getCoreRowModel:ht(),rowCount:he,manualPagination:!0,onPaginationChange:u=>{Z({pagination:_(u,p)})},manualSorting:!0,onSortingChange:u=>{de({}),Z({sorting:[..._(u,z)]})},manualFiltering:!0,onColumnVisibilityChange:u=>{Be(_(u,pe))},onRowSelectionChange:u=>{de(_(u,ue))},onColumnOrderChange:u=>{ge(_(u,me))},state:{sorting:z,columnVisibility:pe,pagination:p,rowSelection:ue,columnOrder:me},meta:{refetch:ve.refetch}});return ie(()=>{const u=ye.getAllFlatColumns().map(I=>I.id),f=u.filter(I=>I!=="checkbox"&&I!==F);ge(I=>{const V=I.filter(X=>f.includes(X)),Ye=f.filter(X=>!I.includes(X)),Je=V.length>0?[...V,...Ye]:f;return[...u.includes("checkbox")?["checkbox"]:[],...Je,...u.includes(F)?[F]:[]]})},[]),{tableState:A,updateTableState:Z,query:ve,setSearchQuery:K,searchQuery:v,tanTable:ye,mergedFilters:G,filters:Q,setFilters:qe,filterConfig:c,tableActions:m,pathParameters:a,queryParameters:n,viewMode:T,setViewMode:Qe,Card:b,allowSelection:r,allowToolbar:d,previewFilters:o,infiniteQuery:P,disableTableView:h,hideViewToggle:N,onRowNavigate:y}}const je=We(null);function w(){const e=et(je);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function Hr({children:e,...a}){return t(je.Provider,{value:a,children:e})}function Cn(){const{query:e}=w();return e.isFetching?null:e.isError?g("span",{className:"flex gap-3 items-center",children:[t(Kt,{className:"text-icon-primary"}),t("span",{children:e.error?.message})]}):e.data?.data?.length===0?t(D,{children:"No results found."}):t(D,{children:"Unknown error. Please contact customer support."})}function Pn({cardGridClassName:e}){const{query:a,tanTable:n,viewMode:s,tableActions:c,Card:i}=w(),r=c.filter(ce),d=s==="card"&&!!i;return a.isLoading?t("div",{className:"body-sm flex items-center justify-center min-h-32",children:t(ze,{})}):n.getRowModel().rows.length===0?t("div",{className:"body-sm flex items-center justify-center min-h-32 text-muted",children:t(Cn,{})}):d?t(In,{Card:i,actions:r,className:e}):t(Mn,{className:"w-full"})}function Br({className:e,cardGridClassName:a,...n}){const{viewMode:s,Card:c,allowToolbar:i}=w(),r=s==="card"&&!!c;return t(D,{children:g(Dt,{children:[i&&t(Dn,{}),g("section",{...n,className:x("z-20 flex flex-col",r?"":"border rounded-lg",e),children:[t("div",{className:"w-full overflow-auto relative rounded-lg [scrollbar-width:none]",tabIndex:0,children:t(Pn,{cardGridClassName:a})}),!r&&g("div",{className:"flex w-full justify-between border-t gap-icon py-2 px-icon bg-elevation-mid rounded-b-lg overflow-x-auto",children:[g("div",{className:"flex gap-icon",children:[t(Fn,{}),t(Tn,{})]}),t(An,{})]})]})]})})}function In({Card:e,actions:a,className:n,...s}){const{tanTable:c,allowSelection:i}=w(),{infiniteQuery:r}=w(),d=Te(null);return ie(()=>{const l=d.current;if(!l)return;const o=new IntersectionObserver(m=>{m[0].isIntersecting&&r.hasNextPage&&!r.isFetchingNextPage&&r.fetchNextPage()},{threshold:.1});return o.observe(l),()=>o.disconnect()},[r.hasNextPage,r.isFetchingNextPage]),g("div",{...s,className:x(n,"grid grid-cols-1 lg:grid-cols-2 gap-icon pb-input"),children:[c.getRowModel().rows.map((l,o)=>{const m={isSelected:l.getIsSelected(),onToggle:()=>l.toggleSelected(),allowSelection:i};return t(tt,{children:e(l.original,a,m,o)},l.id)}),t("div",{ref:d,className:"col-span-full h-4 flex items-center justify-center",children:r.isFetchingNextPage&&t(ze,{})})]})}function Fn(){if(oe()==="customer-portal")return null;const{tanTable:a}=w(),[n,s]=O(null),c=H(),i=nt(Se(rt),Se(at,{coordinateGetter:lt}));return t(it,{sensors:i,collisionDetection:ot,onDragStart:d=>{const{active:l}=d;s(l.id.toString())},onDragEnd:d=>{const{active:l,over:o}=d;if(o&&l.id!==o.id){const m=a.getState().columnOrder,b=m.indexOf(l.id.toString()),y=m.indexOf(o.id.toString());a.setColumnOrder([...dt(m,b,y)])}s(null)},children:g(ct,{items:a.getState().columnOrder,strategy:ut,children:[g(L,{label:g(D,{children:[t($t,{className:"inline align-bottom me-1 text-icon-primary"}),"Columns"]}),selectionMode:"multiple",size:"sm",items:a.getAllFlatColumns(),selectedKeys:a.getVisibleFlatColumns().map(d=>d.id),children:[t(M,{onAction:()=>a.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),a.getState().columnOrder.map(d=>{const l=a.getAllFlatColumns().find(o=>o.id===d);return!l||l.id==="checkbox"||l.id===F?null:t(r,{column:l},l.id)})]}),t(st,{children:n?t("div",{className:"opacity-70 border-2 border-primary",children:c(n)}):null})]})});function r({column:d}){const{attributes:l,listeners:o,setNodeRef:m,transform:b,transition:y}=mt({id:d.id}),h={transform:gt.Transform.toString(b),transition:y,zIndex:"999"};return g(M,{ref:m,style:h,...l,id:d.id,onAction:()=>d.toggleVisibility(),isDisabled:!d.getCanHide(),className:"flex items-center",children:[t(Et,{...o,className:"size-icon cursor-grab text-icon-primary"}),ae(d),d.getIsSorted()&&t(_e,{className:"size-icon",direction:d.getIsSorted()})]})}}function An(){const{tanTable:e}=w(),a=e.getRowCount();return g("div",{className:"flex items-center gap-2",children:[t("span",{className:"whitespace-nowrap body-sm text-muted",children:`${e.getState().pagination.pageIndex*e.getState().pagination.pageSize+1} - ${Math.min((e.getState().pagination.pageIndex+1)*e.getState().pagination.pageSize,a)} of ${a?.toLocaleString()}`}),(e.getCanNextPage()||e.getCanPreviousPage())&&g(D,{children:[t(S,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon-sm",children:t(qt,{})}),t(S,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon-sm",children:t(Vt,{})}),t(S,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon-sm",children:t(kt,{})}),t(S,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon-sm",children:t(Ht,{})})]})]})}function Tn(){if(oe()==="customer-portal")return null;const{tanTable:a}=w(),n=[10,20,30,40,50];return t(L,{label:a.getState().pagination.pageSize.toString(),selectionMode:"single",size:"sm",selectedKeys:[a.getState().pagination.pageSize.toString()],items:n.map(s=>({id:s.toString(),value:s})),children:s=>t(M,{onAction:()=>a.setPageSize(s.value),children:s.value})})}function Dn(){const{query:e,tanTable:a,searchQuery:n,setSearchQuery:s,tableActions:c,viewMode:i,setViewMode:r,Card:d,previewFilters:l,disableTableView:o,hideViewToggle:m}=w(),b=a.getSelectedRowModel().rows.length>0,y=B(),h=c.filter(N=>N.resourceType!=="single").filter(N=>N.resourceType==="multiple"===b);return g("section",{className:"flex justify-between my-0 mb-icon gap-icon overflow-x-auto py-1",children:[g("div",{className:x("flex gap-icon max-md:min-w-0 max-md:flex-1"),children:[t(S,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",className:x("max-md:shrink-0"),children:t(jt,{})}),t(tn,{value:n,onChange:s,className:x("max-md:min-w-0 max-md:flex-1")}),t(qn,{previewFilters:l,className:x("max-md:shrink-0")})]}),!y&&g("div",{className:"flex gap-icon",children:[t(Fe,{items:h,isFetching:e.isFetching}),d&&!o&&!m&&g("div",{className:"flex gap-1 bg-elevation-1 rounded-md overflow-hidden",children:[t(S,{variant:i==="table"?"primary":"neutral",size:"icon",onPress:()=>r("table"),"aria-label":"Table view",className:"border-none",children:t(_t,{})}),t(S,{variant:i==="card"?"primary":"neutral",size:"icon",onPress:()=>r("card"),"aria-label":"Card view",className:"border-none",children:t(Lt,{})})]})]}),y&&h.length>0&&t("div",{className:"fixed inset-x-0 bottom-0 z-30 flex gap-icon border-t bg-elevation-1 p-icon",children:t(Fe,{items:h,isFetching:e.isFetching,buttonClassName:"flex-1 justify-center"})})]})}function _e({direction:e,...a}){return e==="asc"?t(Qt,{className:"size-3.5",...a}):e==="desc"?t(Gt,{className:"size-3.5",...a}):t(Ut,{className:"size-3.5",...a})}function ae(e){const a=H(),n=e.columnDef.header;return typeof n=="string"?n:a(e.id)}function On(e){const a=e.column.columnDef.meta?.displayType,n=e.getValue();if(n==null)return null;switch(a){case"date":return t("span",{className:"tabular-nums",children:k(n)});case"number":return t("span",{className:"block text-right tabular-nums",children:mn(n)});case"boolean":return t(xe,{variant:n?"success":"destructive",className:"capitalize",children:String(n)});case"badge":return t(xe,{children:String(n)});case"tags":let s=Array.isArray(n)?n:[String(n)];return t(yn,{items:s.map(r=>({id:r,name:r})),className:"!flex-nowrap",children:r=>t(Sn,{children:r.name})});case"progressBar":const[c,i]=n;return t(vn,{meterClassName:"w-16",label:`${c}/${i}`,minValue:0,maxValue:i,value:c});case"country":return t(ln,{value:n});case"enum":return t("span",{className:"uppercase w-full",children:String(n)});case"fileSize":return dn(n);case"days":return un(n);case"os":return Tt[n]??n;case"licenseType":return bn[n]??n;case"subscriptionInterval":return cn.formatISODuration(n);case"subscriptionStartTrigger":return fn(n);default:return String(n)}}function Ce({header:e}){const a=e.column.columnDef.header;return typeof a=="string"||!a?ae(e.column):typeof a=="function"?typeof a(e.getContext())=="string"?ae(e.column):re(a,e.getContext()):re(a,e.getContext())}function Mn({className:e}){const{tanTable:a,onRowNavigate:n}=w(),s=(c,i,r="z-50")=>x("text-left body-sm font-medium whitespace-nowrap",c&&`sticky right-0 ${r} text-center justify-center`,i);return g(nn,{className:x("table-auto border-0 rounded-lg",e),children:[t(rn,{className:"sticky top-0 z-10 rounded-lg border-stroke-secondary!",children:a.getHeaderGroups().map(c=>t(we,{className:"border-stroke-secondary!",children:c.headers.map(i=>g(an,{scope:"col",colSpan:i.colSpan,className:s(i.id===F,"bg-surface-secondary"),children:[!i.column.getCanSort()&&!i.isPlaceholder&&t("div",{className:x("w-full flex items-center gap-1 text-xs uppercase font-semibold text-text-secondary",i.id===F?"justify-center":"justify-start"),children:t(Ce,{header:i})}),i.column.getCanSort()&&g(S,{variant:"ghost",size:"none",className:x("w-full p-1 rounded-md uppercase text-text-secondary text-xs font-semibold",i.id===F?"justify-center":"justify-start",i.column.getIsSorted()?"text-primary":""),onPress:i.column.getToggleSortingHandler(),children:[t("span",{children:t(Ce,{header:i})}),i.column.getIsSorted()&&t(_e,{direction:i.column.getIsSorted()})]})]},i.id))},c.id))}),t(on,{children:a.getRowModel().rows.map(c=>t(we,{className:x("group border-stroke-secondary! bg-elevation-1 data-[selected=true]:bg-primary-100 hover:bg-elevation-mid",n&&"cursor-pointer focus-visible:outline focus-visible:outline-ring"),"data-selected":c.getIsSelected(),...n&&{role:"link",tabIndex:0,onClick:i=>{i.target.closest('a, button, input, select, textarea, [role="button"]')||n(c.original)},onKeyDown:i=>{i.key==="Enter"&&n(c.original)}},children:c.getVisibleCells().map(i=>{const r=i.column.id===F,d=i.column.columnDef.meta?.displayType?On(i):re(i.column.columnDef.cell,i.getContext());return t(sn,{className:x(s(r,r?"bg-elevation-1 group-data-[selected=true]:bg-primary-100 group-hover:bg-elevation-mid":"","z-1"),r&&"flex justify-center items-center"),children:d},i.id)})},c.id))})]})}function Pe(e){return e.resourceType==="none"}function ce(e){return e.resourceType==="single"}function Ie(e){return e.resourceType==="multiple"}function Fe({items:e,isFetching:a,buttonClassName:n}){const{openDialog:s,closeDialog:c}=se(),{tanTable:i,mergedFilters:r}=w();function d(o,m){return o.isDisabled?Pe(o)?o.isDisabled():Ie(o)?o.isDisabled(m):!1:!1}const l=i.getSelectedRowModel().rows.map(o=>o.original);return t(D,{children:e.map((o,m)=>{const b=o.icon,y=d(o,l)||a;return g(S,{"aria-label":o.label,type:"button",isDisabled:y,className:x("animate-in fade-in slide-in-from-right-15 duration-300 transition-transform",n),onPress:h=>{const N={event:h,openDialog:s,closeDialog:c,activeFilters:r};Pe(o)?o.onPress(N):Ie(o)&&o.onPress({...N,data:l})},variant:o.variant??"neutral",children:[b&&t(b,{"aria-hidden":!0}),t("span",{children:o.label})]},`${o.label}-${m}`)})})}function zn({label:e,items:a,data:n}){const{openDialog:s,closeDialog:c}=se(),{mergedFilters:i}=w();return a.length<5?t("div",{className:"flex items-center gap-2",children:a.map((r,d)=>{const l=r.icon,o=typeof r.label=="function"?r.label(n):r.label;return g(gn,{children:[t(S,{"aria-label":typeof o=="string"?o:void 0,isDisabled:r.isDisabled?.(n)??!1,variant:"ghost",size:"icon",onPress:()=>{const m={openDialog:s,closeDialog:c};r.onPress({...m,data:n,activeFilters:i})},children:t(l,{className:"size-icon"})}),t(pn,{children:o})]},`${d}-${typeof o=="string"?o:""}`)})}):t(L,{withChevron:!1,"aria-label":"Actions",label:e,size:"icon",children:a.map((r,d)=>{const l=r.icon,o=typeof r.label=="function"?r.label(n):r.label;return g(M,{id:typeof o=="string"?o:void 0,isDisabled:r.isDisabled?.(n)??!1,onAction:()=>{const m={openDialog:s,closeDialog:c};ce(r)&&r.onPress({...m,data:n,activeFilters:i})},children:[t(l,{className:"size-icon"}),o]},`${d}-${typeof o=="string"?o:""}`)})})}const Kr=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte","between"],Ae={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",between:"between"},Rn={eq:"=",ne:"≠",cn:"contains",nc:"!contains",sw:"starts with",ew:"ends with",in:"in",nin:"not in",gt:">",gte:"≥",lt:"<",lte:"≤",between:"↔"};function R(e,a){const n=a.type,s=`${e}-${Date.now()}`,c=n==="bool"||n==="derived-select"?!1:a.needOperator??!0,i=c?Le[n][0]:"eq",r={id:s,property:e,operator:i,needOperator:c};switch(n){case"bool":return{...r,type:n,value:!0};case"derived-select":return{...r,type:n,value:a.options[0]?.id??""};case"string":return{...r,type:n,value:""};case"date":return{...r,type:n,value:i==="between"?[new Date().toISOString(),new Date().toISOString()]:new Date().toISOString()};case"id":return{...r,type:n,value:""};case"id-search":return{...r,type:n,value:[]};case"enum":return{...r,type:n,value:new Set};case"number":return{...r,type:n,value:0}}}const Le={bool:["eq"],"derived-select":["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["between","lt","gt"],number:["eq","ne","gt","gte","lt","lte"]};function jn(e,a){let n=a.value!==void 0?a.value:e.value;const s=a.operator??e.operator;if(e.type==="date"&&a.operator!==void 0)if(s==="between"&&!Array.isArray(n)){const c=typeof n=="string"?n:new Date().toISOString();n=[c,c]}else s!=="between"&&Array.isArray(n)&&(n=n[0]??new Date().toISOString());return n}function $e(){const{setFilters:e,filterConfig:a}=w();return{updateFilter:(i,r)=>{e(d=>{const l=d.find(m=>m.property===i)??R(i,a[i]),o={...l,...r,value:jn(l,r),active:!0};return d.some(m=>m.id===l.id)?d.map(m=>m.id===l.id?o:m):[...d,o]})},removeFilter:i=>{e(r=>{const d=r.find(l=>l.id===i);return d?d.isPreview?r.map(l=>l.id===i?{...R(l.property,a[l.property]),active:!1,isPreview:!0}:l):r.filter(l=>l.id!==i):r})},clearAllFilters:()=>{e(i=>i.filter(r=>r.isPreview).map(r=>({...R(r.property,a[r.property]),active:!1,isPreview:!0})))}}}function _n(e,a){switch(e.type){case"string":case"id":return e.value??"";case"number":return e.value?.toString()??"";case"bool":return e.value?"true":"false";case"derived-select":{const n=a[e.property];if(!n||n.type!=="derived-select")return e.value??"";const s=n.options.find(c=>c.id===e.value);return typeof s?.label=="string"?s.label:e.value??""}case"date":if(Array.isArray(e.value)){const[n,s]=e.value;return`${k(n,{dateStyle:"short"})??""} – ${k(s,{dateStyle:"short"})??""}`}return e.value?k(e.value,{dateStyle:"short"})??"":"";case"enum":return e.value&&e.value.size>0?`${e.value.size} selected`:"";case"id-search":return e.value&&e.value.length>0?e.value.length===1?"1 item":`${e.value.length} items`:""}}function Ln({filter:e,filterConfig:a,onChange:n}){if(e.type==="string"||e.type==="id")return t(At,{autoFocus:!0,value:e.value??"",onChange:n,"aria-label":"Filter value"});if(e.type==="number")return t(Ct,{autoFocus:!0,value:e.value,onChange:n,"aria-label":"Filter value"});if(e.type==="date"){if(e.operator==="between"){const[c,i]=Array.isArray(e.value)?e.value:[new Date().toISOString(),new Date().toISOString()],r=Y(c,J()),d=Y(i,J());return g("div",{className:"flex flex-col gap-icon",children:[t(te,{autoFocus:!0,hideTimeZone:!0,label:"From",value:r,onChange:l=>n([l?l.toAbsoluteString():c,i])}),t(te,{hideTimeZone:!0,label:"To",value:d,onChange:l=>n([c,l?l.toAbsoluteString():i])})]})}const s=e.value&&!Array.isArray(e.value)?Y(e.value,J()):null;return t(te,{autoFocus:!0,hideTimeZone:!0,value:s,onChange:c=>n(c?c.toAbsoluteString():new Date().toISOString()),"aria-label":"Filter date"})}if(e.type==="enum"){const s=a[e.property];return s.type!=="enum"?null:t(Nt,{autoFocus:!0,items:s.options,value:e.value??new Set,onChange:n,"aria-label":"Filter value"})}if(e.type==="id-search"){const s=a[e.property];if(s.type!=="id-search")return null;const c=s.defaultParams;return t(en,{autoFocus:!0,path:s.path,accessor:s.accessor,defaultParams:c,value:e.value??[],onChange:n,"aria-label":"Filter value"})}return null}function Ee({filter:e,filterConfig:a,resourceFormatter:n,onRemove:s,onUpdate:c,isOpen:i,onOpenChange:r}){const d=e.needOperator===!1?["eq"]:Le[e.type],l=_n(e,a),o=oe(),m=B(),b=e.type==="bool"||e.type==="derived-select",y=m?g("div",{className:"flex flex-col gap-1",children:[t("span",{className:"body-sm text-muted",children:n(e.property)}),t(Ft,{type:"button",className:"w-full","aria-label":n(e.property),children:l})]}):g(S,{type:"button",variant:e.active===!1?"neutral":"primary_neutral",className:"animate-in slide-in-from-left-10 fade-in flex justify-between gap-2",children:[t(le,{}),b?t("span",{className:"font-medium",children:l}):g(D,{children:[t("span",{className:"font-medium",children:n(e.property)}),o!=="customer-portal"&&t("span",{children:Rn[e.operator]}),o!=="customer-portal"&&l&&t("span",{children:l})]}),e.active!==!1&&t(De,{onPress:()=>s(),children:t("span",{className:"bg-primary hover:bg-destructive rounded-full size-icon flex justify-center items-center",children:t(Me,{className:"size-2.5 text-elevation-1"})})})]});if(b){let h,N;if(e.type==="bool")h=[{id:"true",label:"True"},{id:"false",label:"False"}],N=e.value?"true":"false";else{const C=a[e.property];h=C?.type==="derived-select"?C.options:[],N=e.value??""}return g(yt,{isOpen:i,onOpenChange:r,children:[t("div",{className:"relative",children:y}),g(St,{className:"min-w-48",children:[t(xt,{inset:!0,separator:!1,children:n(e.property)}),t(wt,{selectionMode:"single",disallowEmptySelection:!0,selectedKeys:new Set([N]),onSelectionChange:C=>{if(C==="all")return;const A=C.values().next().value;A!=null&&c({value:e.type==="bool"?String(A)==="true":String(A)})},"aria-label":"Filter value",children:h.map(C=>t(M,{id:C.id,children:C.label},C.id))})]})]})}return g(Pt,{isOpen:i,onOpenChange:r,children:[t("div",{className:"relative",children:y}),t(It,{className:"p-icon min-w-48",children:g("div",{className:"flex flex-col gap-icon",children:[d.length>1&&t(L,{label:Ae[e.operator],variant:"neutral","aria-label":"Change operator",children:d.map(h=>t(M,{onAction:()=>c({operator:h}),children:Ae[h]},h))}),t(Ln,{filter:e,filterConfig:a,onChange:h=>c({value:h})}),t(S,{type:"button",variant:"neutral",className:"self-end",onPress:s,"aria-label":`Remove ${n(e.property)} filter`,children:"Clear"})]})})]})}function $n({onApply:e}){const{filters:a,filterConfig:n}=w(),s=H(),{updateFilter:c,removeFilter:i,clearAllFilters:r}=$e(),[d,l]=O(null);return g(D,{children:[t(Ot,{children:t(Mt,{children:"Filter"})}),t(zt,{className:"flex flex-col gap-input",children:Object.keys(n).map(o=>{const m=a.find(b=>b.property===o)??R(o,n[o]);return t(Ee,{filter:m,filterConfig:n,resourceFormatter:s,onRemove:()=>i(m.id),onUpdate:b=>c(o,b),isOpen:d===o,onOpenChange:b=>l(b?o:null)},o)})}),g(Rt,{children:[t(S,{variant:"neutral",onPress:()=>{r(),l(null)},children:"Clear All"}),t(S,{variant:"primary",onPress:e,children:"Apply"})]})]})}function En({className:e,hasClearableFilters:a,isDisabled:n,onClearAll:s,...c}){const{openDialog:i,closeDialog:r}=se();return t("section",{...c,className:x("flex items-center",e),children:g(S,{variant:a?"primary_neutral":"neutral",isDisabled:n,"aria-label":"Filter",onPress:()=>i(t($n,{onApply:r})),className:"min-w-0 flex-1",children:[t(le,{}),"Filters",a&&t(De,{onPress:s,children:t("span",{className:"animate-slide-in bg-primary hover:bg-destructive rounded-full size-icon flex justify-center items-center",children:t(Me,{className:"size-2.5 text-elevation-1"})})})]})})}function qn({className:e,previewFilters:a,...n}){const{filters:s,query:c,setFilters:i,filterConfig:r}=w(),d=B(),l=H(),o=Object.keys(r).filter(p=>!s.some(v=>v.property===p)).sort(),[m,b]=O(null),y=Te(!1);ie(()=>{if(!y.current&&s.length===0){const p=[];a&&a.length>0&&p.push(...a.filter(v=>r[v]).map(v=>({...R(v,r[v]),active:!1,isPreview:!0}))),p.length>0&&i(p)}y.current=!0},[]);const{updateFilter:h,removeFilter:N,clearAllFilters:C}=$e(),A=p=>{const v=R(p,r[p]);i([...s,v]),b(v.id)},$=s.some(p=>!p.isPreview||p.active!==!1),z=()=>{C(),b(null)};return d?t(En,{...n,className:e,hasClearableFilters:$,isDisabled:c.isPending,onClearAll:z}):g("section",{...n,className:x("flex flex-wrap gap-icon items-center",e),children:[s.filter(p=>p.property in r).map(p=>t(Ee,{filter:p,filterConfig:r,resourceFormatter:l,onRemove:()=>N(p.id),onUpdate:v=>h(p.property,v),isOpen:m===p.id,onOpenChange:v=>b(v?p.id:null)},p.id)),o.length>0&&t(L,{label:t(le,{}),isDisabled:c.isPending,variant:"neutral","aria-label":"Add filter",children:o.map(p=>{const v=r[p].type,K=Vn[v];return g(M,{className:"!justify-between",onAction:()=>A(p),children:[l(p),t(K,{})]},p)})}),$&&t(S,{variant:"ghost",onPress:z,"aria-label":"Clear all filters",className:"animate-in fade-in",children:"Clear All"})]})}const Vn={"id-search":Wt,bool:ne,"derived-select":ne,date:Jt,enum:Yt,id:Xt,number:Zt,string:ne};export{Ae as C,qn as D,Br as DataTable,je as DataTableContext,Hr as DataTableProvider,Kr as F,Vr as getColumnHelper,w as useDataTable,kr as useDataTableState};
|
|
2
2
|
//# sourceMappingURL=data-table.js.map
|