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