@cryptlex/web-components 6.6.27 → 6.6.28
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/alert.js +1 -1
- package/dist/components/alert.js.map +1 -1
- package/dist/components/button.d.ts +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/button.js.map +1 -1
- package/dist/components/code-block.js +1 -1
- package/dist/components/code-block.js.map +1 -1
- package/dist/components/data-table.js +1 -1
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/date-picker.js +1 -1
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/dialog.d.ts +4 -0
- package/dist/components/dialog.js +1 -1
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/form.d.ts +3 -1
- package/dist/components/form.js +1 -1
- package/dist/components/form.js.map +1 -1
- package/dist/utilities/shiki.js +1 -1
- package/dist/utilities/shiki.js.map +1 -1
- package/lib/index.css +93 -100
- package/lib/tokens.css +166 -392
- package/package.json +2 -2
package/dist/components/alert.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as a,jsx as s}from"react/jsx-runtime";import{cva as o}from"class-variance-authority";import{classNames as l}from"../utilities/theme.js";import{IcInfo as u,IcWarning as d,IcCheck as m,IcError as f}from"./icons.js";import"clsx";import"react";const p=o("rounded-md transition-colors bg-elevation-1 border py-icon px-input body-sm inline-flex items-center gap-icon",{variants:{variant:{destructive:"text-destructive border-destructive",success:"text-success border-success",warning:"text-warning",neutral:"text-muted border-muted",default:""}},defaultVariants:{variant:"default"}}),v=e=>{switch(e){case"destructive":return f;case"success":return m;case"warning":return d;case"neutral":case void 0:default:return u}};function k({children:e,className:n,variant:t,icon:c,...i}){const r=c??v(t);return a("div",{role:"alert",className:l(p({variant:t}),n),...i,children:[r&&s(r,{className:"inline-block size-icon shrink-0"}),s("span",{className:"inline-block flex-1 min-w-0 mt-0",children:e})]})}export{k as Alert,p as alertVariants};
|
|
2
2
|
//# sourceMappingURL=alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.js","sources":["../../lib/components/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\nimport { classNames } from '../utilities/theme';\nimport type { CtxIcon } from './icons';\nimport { IcCheck, IcError, IcInfo, IcWarning } from './icons';\n\nexport const alertVariants = cva(\n `rounded-md transition-colors bg-elevation-1 border py-icon px-input body-sm inline-flex items-center gap-icon`,\n {\n variants: {\n variant: {\n destructive: 'text-destructive',\n success: 'text-success',\n warning: 'text-warning',\n neutral: 'text-muted border-muted',\n default: '
|
|
1
|
+
{"version":3,"file":"alert.js","sources":["../../lib/components/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\nimport { classNames } from '../utilities/theme';\nimport type { CtxIcon } from './icons';\nimport { IcCheck, IcError, IcInfo, IcWarning } from './icons';\n\nexport const alertVariants = cva(\n `rounded-md transition-colors bg-elevation-1 border py-icon px-input body-sm inline-flex items-center gap-icon`,\n {\n variants: {\n variant: {\n destructive: 'text-destructive border-destructive',\n success: 'text-success border-success',\n warning: 'text-warning',\n neutral: 'text-muted border-muted',\n default: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\n// Default icons for each variant\nconst getDefaultIcon = (variant: string | null | undefined): CtxIcon | null => {\n switch (variant) {\n case 'destructive':\n return IcError;\n case 'success':\n return IcCheck;\n case 'warning':\n return IcWarning;\n case 'neutral':\n case undefined:\n default:\n return IcInfo;\n }\n};\nexport function Alert({\n children,\n className,\n variant,\n icon,\n ...props\n}: React.ComponentProps<'div'> &\n VariantProps<typeof alertVariants> & {\n icon?: CtxIcon;\n }) {\n // Overrides the default icon with the provided icon\n const Icon = icon ?? getDefaultIcon(variant);\n\n return (\n <div role=\"alert\" className={classNames(alertVariants({ variant }), className)} {...props}>\n {Icon && <Icon className=\"inline-block size-icon shrink-0\" />}\n <span className=\"inline-block flex-1 min-w-0 mt-0\">{children}</span>\n </div>\n );\n}\n"],"names":["alertVariants","cva","getDefaultIcon","variant","IcError","IcCheck","IcWarning","IcInfo","Alert","children","className","icon","props","Icon","jsxs","classNames","jsx"],"mappings":"4PAMO,MAAMA,EAAgBC,EACzB,gHACA,CACI,SAAU,CACN,QAAS,CACL,YAAa,sCACb,QAAS,8BACT,QAAS,eACT,QAAS,0BACT,QAAS,EAAA,CACb,EAEJ,gBAAiB,CACb,QAAS,SAAA,CACb,CAER,EAGMC,EAAkBC,GAAuD,CAC3E,OAAQA,EAAA,CACJ,IAAK,cACD,OAAOC,EACX,IAAK,UACD,OAAOC,EACX,IAAK,UACD,OAAOC,EACX,IAAK,UACL,KAAK,OACL,QACI,OAAOC,CAAA,CAEnB,EACO,SAASC,EAAM,CAClB,SAAAC,EACA,UAAAC,EACA,QAAAP,EACA,KAAAQ,EACA,GAAGC,CACP,EAGO,CAEH,MAAMC,EAAOF,GAAQT,EAAeC,CAAO,EAE3C,OACIW,EAAC,MAAA,CAAI,KAAK,QAAQ,UAAWC,EAAWf,EAAc,CAAE,QAAAG,CAAA,CAAS,EAAGO,CAAS,EAAI,GAAGE,EAC/E,SAAA,CAAAC,GAAQG,EAACH,EAAA,CAAK,UAAU,iCAAA,CAAkC,EAC3DG,EAAC,OAAA,CAAK,UAAU,mCAAoC,SAAAP,CAAA,CAAS,CAAA,EACjE,CAER"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
2
|
import { ButtonProps as AriaButtonProps } from 'react-aria-components';
|
|
3
3
|
export declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "link" | "primary" | "
|
|
4
|
+
variant?: "link" | "primary" | "destructive" | "destructive_neutral" | "neutral" | "primary_neutral" | "ghost" | null | undefined;
|
|
5
5
|
size?: "none" | "default" | "icon" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
7
|
export type ButtonProps = AriaButtonProps & VariantProps<typeof buttonVariants> & {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as r,jsxs as c,Fragment as a}from"react/jsx-runtime";import{cva as l}from"class-variance-authority";import{Button as
|
|
1
|
+
"use client";import{jsx as r,jsxs as c,Fragment as a}from"react/jsx-runtime";import{cva as l}from"class-variance-authority";import{Button as p,composeRenderProps as i}from"react-aria-components";import{classNames as d}from"../utilities/theme.js";import{Loader as b}from"./loader.js";import"clsx";import"./icons.js";import"react";const f=l("btn",{variants:{variant:{primary:"btn-primary",destructive:"btn-destructive",destructive_neutral:"btn-destructive-neutral",neutral:"btn-neutral",primary_neutral:"btn-primary-neutral",ghost:"btn-ghost",link:"btn-link"},size:{default:"input-dim",icon:"size-input rounded-md",none:""}},defaultVariants:{variant:"neutral",size:"default"}});function k({className:n,variant:o,size:m,children:u,isPending:e,active:v,...s}){return r(p,{...s,className:i(n,t=>d(f({variant:o,size:m,className:t}),n)),children:i(u,t=>c(a,{children:[e&&r(b,{}),!e&&r(a,{children:t})]}))})}export{k as Button,f as buttonVariants};
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../lib/components/button.tsx"],"sourcesContent":["'use client';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Button as AriaButton, composeRenderProps, type ButtonProps as AriaButtonProps } from 'react-aria-components';\nimport { classNames } from '../utilities/theme';\nimport { Loader } from './loader';\n\nexport const buttonVariants = cva('btn', {\n variants: {\n variant: {\n primary: 'btn-primary',\n
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../lib/components/button.tsx"],"sourcesContent":["'use client';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Button as AriaButton, composeRenderProps, type ButtonProps as AriaButtonProps } from 'react-aria-components';\nimport { classNames } from '../utilities/theme';\nimport { Loader } from './loader';\n\nexport const buttonVariants = cva('btn', {\n variants: {\n variant: {\n primary: 'btn-primary',\n destructive: 'btn-destructive',\n destructive_neutral: 'btn-destructive-neutral',\n neutral: 'btn-neutral',\n primary_neutral: 'btn-primary-neutral',\n ghost: 'btn-ghost',\n link: 'btn-link',\n },\n size: {\n default: 'input-dim',\n icon: 'size-input rounded-md',\n none: '',\n },\n },\n defaultVariants: {\n variant: 'neutral',\n size: 'default',\n },\n});\n\nexport type ButtonProps = AriaButtonProps &\n VariantProps<typeof buttonVariants> & {\n ref?: React.Ref<HTMLButtonElement>;\n active?: boolean;\n };\n\nexport function Button({\n className: additionalClasses,\n variant,\n size,\n children,\n isPending,\n active,\n ...props\n}: ButtonProps) {\n return (\n <AriaButton\n {...props}\n className={composeRenderProps(additionalClasses, className =>\n classNames(\n buttonVariants({\n variant,\n size,\n className,\n }),\n additionalClasses\n )\n )}\n >\n {composeRenderProps(children, children => (\n <>\n {isPending && <Loader />}\n {!isPending && <>{children}</>}\n </>\n ))}\n </AriaButton>\n );\n}\n"],"names":["buttonVariants","cva","Button","additionalClasses","variant","size","children","isPending","active","props","jsx","AriaButton","composeRenderProps","className","classNames","jsxs","Fragment","Loader"],"mappings":"yUAMO,MAAMA,EAAiBC,EAAI,MAAO,CACrC,SAAU,CACN,QAAS,CACL,QAAS,cACT,YAAa,kBACb,oBAAqB,0BACrB,QAAS,cACT,gBAAiB,sBACjB,MAAO,YACP,KAAM,UAAA,EAEV,KAAM,CACF,QAAS,YACT,KAAM,wBACN,KAAM,EAAA,CACV,EAEJ,gBAAiB,CACb,QAAS,UACT,KAAM,SAAA,CAEd,CAAC,EAQM,SAASC,EAAO,CACnB,UAAWC,EACX,QAAAC,EACA,KAAAC,EACA,SAAAC,EACA,UAAAC,EACA,OAAAC,EACA,GAAGC,CACP,EAAgB,CACZ,OACIC,EAACC,EAAA,CACI,GAAGF,EACJ,UAAWG,EAAmBT,EAAmBU,GAC7CC,EACId,EAAe,CACX,QAAAI,EACA,KAAAC,EACA,UAAAQ,CAAA,CACH,EACDV,CAAA,CACJ,EAGH,SAAAS,EAAmBN,EAAUA,GAC1BS,EAAAC,EAAA,CACK,SAAA,CAAAT,KAAcU,EAAA,EAAO,EACrB,CAACV,GAAaG,EAAAM,EAAA,CAAG,SAAAV,CAAAA,CAAS,CAAA,EAC/B,CACH,CAAA,CAAA,CAGb"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as s,jsx as e}from"react/jsx-runtime";import{classNames as n}from"../utilities/theme.js";import"clsx";function l({code:o,fileName:r,className:d,...t}){return s("div",{className:n("rounded-md border border-border bg-elevation-1 overflow-auto text-sm",d),...t,children:[r&&e("div",{className:"flex items-center justify-between px-icon py-2 border-b border-border text-muted body-sm",children:e("span",{children:r})}),e("div",{className:"p-icon",dangerouslySetInnerHTML:{__html:o}})]})}export{l as CodeBlock};
|
|
2
2
|
//# sourceMappingURL=code-block.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block.js","sources":["../../lib/components/code-block.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '../utilities/theme';\n\nexport interface CodeBlockProps extends React.ComponentProps<'div'> {\n code: string;\n fileName?: string;\n}\n\nexport function CodeBlock({ code, fileName, className, ...props }: CodeBlockProps) {\n return (\n <div\n className={classNames('rounded-md border border-border bg-elevation-1 overflow-auto text-sm', className)}\n {...props}\n >\n {fileName && (\n <div className=\"flex items-center justify-between px-icon py-2 border-b border-border
|
|
1
|
+
{"version":3,"file":"code-block.js","sources":["../../lib/components/code-block.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '../utilities/theme';\n\nexport interface CodeBlockProps extends React.ComponentProps<'div'> {\n code: string;\n fileName?: string;\n}\n\nexport function CodeBlock({ code, fileName, className, ...props }: CodeBlockProps) {\n return (\n <div\n className={classNames('rounded-md border border-border bg-elevation-1 overflow-auto text-sm', className)}\n {...props}\n >\n {fileName && (\n <div className=\"flex items-center justify-between px-icon py-2 border-b border-border text-muted body-sm\">\n <span>{fileName}</span>\n </div>\n )}\n <div className=\"p-icon\" dangerouslySetInnerHTML={{ __html: code }} />\n </div>\n );\n}\n"],"names":["CodeBlock","code","fileName","className","props","jsxs","classNames","jsx"],"mappings":"kHAQO,SAASA,EAAU,CAAE,KAAAC,EAAM,SAAAC,EAAU,UAAAC,EAAW,GAAGC,GAAyB,CAC/E,OACIC,EAAC,MAAA,CACG,UAAWC,EAAW,uEAAwEH,CAAS,EACtG,GAAGC,EAEH,SAAA,CAAAF,KACI,MAAA,CAAI,UAAU,2FACX,SAAAK,EAAC,OAAA,CAAM,WAAS,CAAA,CACpB,EAEJA,EAAC,OAAI,UAAU,SAAS,wBAAyB,CAAE,OAAQN,EAAK,CAAG,CAAA,CAAA,CAAA,CAG/E"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,Fragment as T,jsxs as g}from"react/jsx-runtime";import{parseAbsolute as $,getLocalTimeZone as j}from"@internationalized/date";import{createContext as ve,useState as x,useMemo as ye,useEffect as ie,useContext as we,useRef as Ce}from"react";import{Button as y}from"./button.js";import{useSensors as Ie,useSensor as G,PointerSensor as Ne,KeyboardSensor as xe,DndContext as Te,closestCenter as Ae,DragOverlay as Pe}from"@dnd-kit/core";import{sortableKeyboardCoordinates as De,SortableContext as Fe,verticalListSortingStrategy as Re,arrayMove as Oe,useSortable as ze}from"@dnd-kit/sortable";import{CSS as Le}from"@dnd-kit/utilities";import{useQuery as _e}from"@tanstack/react-query";import{createColumnHelper as se,useReactTable as Me,getCoreRowModel as $e,flexRender as H}from"@tanstack/react-table";import{useLocalStorage as X}from"@uidotdev/usehooks";import{merge as je}from"lodash-es";import{Badge as Y}from"./badge.js";import{DatePicker as q}from"./date-picker.js";import{EasyMenu as A,MenuItem as I}from"./menu.js";import{MultiSelect as qe}from"./multi-select.js";import{NumberField as Ee}from"./numberfield.js";import{PopoverTrigger as He,Popover as ke}from"./popover.js";import{TextField as Ve}from"./textfield.js";import{formatDate as z}from"../utilities/date.js";import{useResourceFormatter as V,ALL_OS as Be,useProjectName as Ke}from"../utilities/resources.js";import{classNames as w}from"../utilities/theme.js";import{IcInfo as Qe,IcMoreVertical as Ue,IcRefresh as Ze,IcColumns as Ge,IcGrip as Xe,IcFirst as Ye,IcLeft as Je,IcRight as We,IcLast as et,IcSortAsc as tt,IcSortDesc as nt,IcSortNone as rt,IcCheck as J,IcMinus as at,IcAccount as ot,IcLicense as it,IcDate as st,IcFile as lt,IcFilter as ct}from"./icons.js";import{MultipleIdSearchInput as ut}from"./id-search.js";import{Loader as dt}from"./loader.js";import{SearchField as mt}from"./searchfield.js";import{Table as gt,TableHeader as pt,TableRow as W,TableHead as ft,TableBody as bt,TableCell as ht}from"./table.js";import{CountryName as St}from"../utilities/countries.js";import{Duration as vt}from"../utilities/duration.js";import{formatDays as yt,formatFilesize as wt,formatNumber as Ct}from"../utilities/numbers.js";import{Checkbox as ee}from"./checkbox.js";import{TooltipTrigger as It,Tooltip as Nt}from"./tooltip.js";import{getSubscriptionStartTriggerLabel as xt,ALL_LICENSE_TYPES as Tt}from"./select-options.js";import{useCtxClient as At}from"../utilities/ctx-client.js";import{ControlledDialogProvider as Pt,useControlledDialog as le}from"./dialog.js";import"class-variance-authority";import"react-aria-components";import"clsx";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 Dt(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const ce=se(),Ft=[ce.accessor("checkbox",{header:({table:e})=>t(ee,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:e})=>t(ee,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],C="TableActions";function Rt(e){return e.length===0?[]:[ce.accessor(C,{header:"Actions",id:C,enableHiding:!1,cell:({row:r})=>t(qt,{label:t(Ue,{}),data:r.original,items:e}),enableSorting:!1})]}function kn(){return se()}function Vn({path:e,pathParameters:r,columns:n,filterConfig:a,columnsToHideByDefault:o={},allowSelection:i=!1,initialFilters:l=[],previewFilters:s,tableActions:u}){const[m,S]=x({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:b,pagination:v}=m,[F,L]=x(""),[R,d]=x({}),[p,f]=x(l),B=ye(()=>p.filter(c=>c.active!==!1).map(c=>c.operator==="between"&&Array.isArray(c.value)&&c.value.length===2?{[c.property]:{gte:c.value[0],lte:c.value[1]}}:Array.isArray(c.value)?{[c.property]:{[c.operator]:c.value.join(",")}}:{[c.property]:{[c.operator]:c.value}}).reduce((c,h)=>je(c,h),{}),[p]),P={...p,page:v.pageIndex+1,limit:v.pageSize,sort:Dt(b[0]),search:F},pe=At(),_=["get",e,P],[K,Q]=X(`${_.join("")}_ctx_column_order_preference`,[]),[U,fe]=X(`${_.join("")}_ctx_column_visibility_preference`,{id:!1,...o}),M=c=>{S(h=>({...h,...c}))},O=_e({queryKey:_,queryFn:async()=>{const c=await pe.GET(e,{params:{query:{page:P.page,limit:P.limit,sort:P.sort,search:P.search,...B},path:r}});return{data:c.data??[],total:Number.parseInt(c.response.headers.get("Pagination-Count")||"0")}}}),be=u.filter(me),he=[...i?Ft:[],...n,...Rt(be??[])];function Se(c){return typeof c=="function"}function D(c,h){return Se(c)?c(h):c}const Z=Me({data:O.data?.data??[],columns:he,getCoreRowModel:$e(),rowCount:O.data?.total??0,manualPagination:!0,onPaginationChange:c=>{M({pagination:D(c,v)})},manualSorting:!0,onSortingChange:c=>{d({}),M({sorting:[...D(c,b)]})},manualFiltering:!0,onColumnVisibilityChange:c=>{fe(D(c,U))},onRowSelectionChange:c=>{d(D(c,R))},onColumnOrderChange:c=>{Q(D(c,K))},state:{sorting:b,columnVisibility:U,pagination:v,rowSelection:R,columnOrder:K},meta:{refetch:O.refetch}});return ie(()=>{const c=Z.getAllLeafColumns();Q([...c.filter(h=>h.id!==C).map(h=>h.id),...c.filter(h=>h.id===C).map(h=>h.id)])},[]),{tableState:m,updateTableState:M,query:O,setSearchQuery:L,searchQuery:F,tanTable:Z,mergedFilters:B,filters:p,setFilters:f,filterConfig:a,tableActions:u,pathParameters:r,previewFilters:s}}const ue=ve(null);function N(){const e=we(ue);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function Bn({children:e,...r}){return t(ue.Provider,{value:r,children:e})}function Kn({className:e,...r}){const{query:n,tanTable:a}=N();return t(T,{children:g(Pt,{children:[t(_t,{}),g("section",{...r,className:w("z-20 flex flex-col bg-elevation-1 border rounded-md",e),children:[g("div",{className:"w-full overflow-auto h-table relative rounded-md",tabIndex:0,children:[n.isLoading&&t(te,{className:"cursor-wait",children:t(dt,{})}),!n.isLoading&&a.getRowModel().rows.length===0&&t(te,{className:"cursor-not-allowed",children:!n.isFetching&&(n.isError?g("span",{className:"flex gap-3 justify-center items-center",children:[t(Qe,{}),t("span",{children:n.error.message})]}):n.data?.data?.length===0?t(T,{children:"No results found."}):t(T,{children:"Unknown error. Please contact customer support."}))}),!n.isLoading&&a.getRowModel().rows.length!==0&&t($t,{className:"w-full"})]}),g("div",{className:"flex w-full justify-between border-t gap-icon p-icon overflow-x-auto",children:[g("div",{className:"flex gap-icon",children:[t(Ot,{}),t(Lt,{})]}),t(zt,{})]})]})]})})}function te({children:e,className:r}){return g(T,{children:[t("span",{className:w(r,"absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center"),children:e}),t("span",{className:"relative h-full w-0 block"})]})}function Ot(){const{tanTable:e}=N(),[r,n]=x(null),a=V(),o=Ie(G(Ne),G(xe,{coordinateGetter:De}));return t(Te,{sensors:o,collisionDetection:Ae,onDragStart:l=>{const{active:s}=l;n(s.id.toString())},onDragEnd:l=>{const{active:s,over:u}=l;if(u&&s.id!==u.id){const m=e.getState().columnOrder,S=m.indexOf(s.id.toString()),b=m.indexOf(u.id.toString());e.setColumnOrder([...Oe(m,S,b)])}n(null)},children:g(Fe,{items:e.getState().columnOrder,strategy:Re,children:[g(A,{label:g(T,{children:[t(Ge,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(l=>l.id),children:[t(I,{onAction:()=>e.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),e.getState().columnOrder.map(l=>{const s=e.getAllFlatColumns().find(u=>u.id===l);return!s||s.id==="checkbox"||s.id===C?null:t(i,{column:s},s.id)})]}),t(Pe,{children:r?t("div",{className:"opacity-70 border-2 border-primary",children:a(r)}):null})]})});function i({column:l}){const{attributes:s,listeners:u,setNodeRef:m,transform:S,transition:b}=ze({id:l.id}),v={transform:Le.Transform.toString(S),transition:b,zIndex:"999"};return g(I,{ref:m,style:v,...s,id:l.id,onAction:()=>l.toggleVisibility(),isDisabled:!l.getCanHide(),className:"flex items-center",children:[t(Xe,{...u,className:"size-icon cursor-grab"}),k(l),l.getIsSorted()&&t(de,{className:"size-icon",direction:l.getIsSorted()})]})}}function zt(){const{tanTable:e}=N(),r=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,r)} of ${r?.toLocaleString()}`}),t(y,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Ye,{})}),t(y,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Je,{})}),t(y,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(We,{})}),t(y,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(et,{})})]})}function Lt(){const{tanTable:e}=N(),r=[10,20,30,40,50];return t(A,{label:e.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[e.getState().pagination.pageSize.toString()],items:r.map(n=>({id:n.toString(),value:n})),children:n=>t(I,{onAction:()=>e.setPageSize(n.value),children:n.value})})}function _t(){const{query:e,tanTable:r,searchQuery:n,setSearchQuery:a,tableActions:o,previewFilters:i}=N(),l=r.getSelectedRowModel().rows.length>0,s=o.filter(u=>u.resourceType!=="single").filter(u=>u.resourceType==="multiple"===l);return g("section",{className:"flex justify-between my-0 mb-icon gap-icon overflow-x-auto py-1",children:[g("div",{className:"flex gap-icon",children:[t(y,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",children:t(Ze,{})}),t(mt,{value:n,onChange:a}),t(Bt,{previewFilters:i})]}),t("div",{className:"flex gap-icon",children:t(jt,{items:s,isFetching:e.isFetching})})]})}function de({direction:e,...r}){return e==="asc"?t(tt,{className:"size-3.5",...r}):e==="desc"?t(nt,{className:"size-3.5",...r}):t(rt,{className:"size-3.5",...r})}function k(e){const r=V(),n=e.columnDef.header;return typeof n=="string"?n:r(e.id)}function Mt(e){const r=e.column.columnDef.meta?.displayType,n=e.getValue();if(n==null)return null;switch(r){case"date":return t("span",{className:"tabular-nums",children:z(n)});case"number":return t("span",{className:"block text-right tabular-nums",children:Ct(n)});case"boolean":return t(Y,{variant:n?"success":"destructive",className:"w-full capitalize",children:String(n)});case"badge":return t(Y,{className:"w-full",children:String(n)});case"country":return t(St,{value:n});case"enum":return t("span",{className:"uppercase w-full",children:String(n)});case"fileSize":return wt(n);case"days":return yt(n);case"os":return Be[n]??n;case"licenseType":return Tt[n]??n;case"subscriptionInterval":return vt.formatISODuration(n);case"subscriptionStartTrigger":return xt(n);default:return String(n)}}function ne({header:e}){const r=e.column.columnDef.header;return typeof r=="string"||!r?k(e.column):typeof r=="function"?typeof r(e.getContext())=="string"?k(e.column):H(r,e.getContext()):H(r,e.getContext())}function $t({className:e}){const{tanTable:r}=N(),n=(a,o,i="z-50")=>w("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",a&&`bg-elevation-1 sticky right-0 ${i} text-center justify-center`,o);return g(gt,{className:w("table-auto border-0 rounded-md",e),children:[t(pt,{className:"sticky top-0 z-10 rounded-md",children:r.getHeaderGroups().map(a=>t(W,{children:a.headers.map(o=>g(ft,{scope:"col",colSpan:o.colSpan,className:n(o.id===C,"bg-elevation-1"),children:[!o.column.getCanSort()&&!o.isPlaceholder&&t("div",{className:w("w-full py-1 inline-flex items-center gap-1 body-sm",o.id===C?"justify-center":"justify-start"),children:t(ne,{header:o})}),o.column.getCanSort()&&g(y,{variant:"ghost",className:w("w-full p-1",o.id===C?"justify-center":"justify-start"),onPress:o.column.getToggleSortingHandler(),children:[t("span",{children:t(ne,{header:o})}),t(de,{direction:o.column.getIsSorted()})]})]},o.id))},a.id))}),t(bt,{children:r.getRowModel().rows.map(a=>t(W,{className:w("transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":a.getIsSelected(),children:a.getVisibleCells().map(o=>{const i=o.column.id===C,l=o.column.columnDef.meta?.displayType?Mt(o):H(o.column.columnDef.cell,o.getContext());return t(ht,{className:w(n(i,void 0,"z-1"),i&&"flex justify-center items-center"),children:l},o.id)})},a.id))})]})}function re(e){return e.resourceType==="none"}function me(e){return e.resourceType==="single"}function ae(e){return e.resourceType==="multiple"}function jt({items:e,isFetching:r}){const{openDialog:n,closeDialog:a}=le(),{tanTable:o}=N();function i(s,u){return s.isDisabled?re(s)?s.isDisabled():ae(s)?s.isDisabled(u):!1:!1}const l=o.getSelectedRowModel().rows.map(s=>s.original);return t(T,{children:e.map((s,u)=>{const m=s.icon,S=i(s,l)||r;return g(y,{"aria-label":s.label,type:"button",isDisabled:S,className:"animate-in fade-in slide-in-from-right-15 duration-300 transition-transform",onPress:b=>{const v={event:b,openDialog:n,closeDialog:a};re(s)?s.onPress(v):ae(s)&&s.onPress({...v,data:l})},variant:s.variant??"neutral",children:[m&&t(m,{"aria-hidden":!0}),t("span",{children:s.label})]},`${s.label}-${u}`)})})}function qt({label:e,items:r,data:n}){const{openDialog:a,closeDialog:o}=le();return r.length<4?t("div",{className:"flex items-center gap-2",children:r.map((i,l)=>{const s=i.icon,u=typeof i.label=="function"?i.label(n):i.label;return g(It,{children:[t(y,{"aria-label":typeof u=="string"?u:void 0,isDisabled:i.isDisabled?.(n)??!1,variant:"ghost",size:"icon",onPress:()=>{const m={openDialog:a,closeDialog:o};i.onPress({...m,data:n})},children:t(s,{className:"size-icon"})}),t(Nt,{children:u})]},`${l}-${typeof u=="string"?u:""}`)})}):t(A,{"aria-label":"Actions",label:e,size:"icon",children:r.map((i,l)=>{const s=i.icon,u=typeof i.label=="function"?i.label(n):i.label;return g(I,{id:typeof u=="string"?u:void 0,isDisabled:i.isDisabled?.(n)??!1,onAction:()=>{const m={openDialog:a,closeDialog:o};me(i)&&i.onPress({...m,data:n})},children:[t(s,{className:"size-icon"}),u]},`${l}-${typeof u=="string"?u:""}`)})})}const Qn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte","between"],oe={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"},Et={eq:"=",ne:"≠",cn:"contains",nc:"!contains",sw:"starts with",ew:"ends with",in:"in",nin:"not in",gt:">",gte:"≥",lt:"<",lte:"≤",between:"↔"};function E(e,r){const n=`${r}-${Date.now()}`,a=ge[e][0];switch(e){case"bool":return{id:n,type:e,property:r,operator:a,value:!0};case"string":return{id:n,type:e,property:r,operator:a,value:""};case"date":return{id:n,type:e,property:r,operator:a,value:a==="between"?[new Date().toISOString(),new Date().toISOString()]:new Date().toISOString()};case"id":return{id:n,type:e,property:r,operator:a,value:""};case"id-search":return{id:n,type:e,property:r,operator:a,value:[]};case"enum":return{id:n,type:e,property:r,operator:a,value:new Set};case"number":return{id:n,type:e,property:r,operator:a,value:0}}}const ge={bool:["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 Ht(e){switch(e.type){case"string":case"id":return e.value??"";case"number":return e.value?.toString()??"";case"bool":return e.value?"true":"false";case"date":if(Array.isArray(e.value)){const[r,n]=e.value;return`${z(r,{dateStyle:"short"})??""} – ${z(n,{dateStyle:"short"})??""}`}return e.value?z(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 kt({filter:e,filterConfig:r,pathParameters:n,onChange:a}){if(e.type==="string"||e.type==="id")return t(Ve,{autoFocus:!0,value:e.value??"",onChange:a,"aria-label":"Filter value"});if(e.type==="number")return t(Ee,{autoFocus:!0,value:e.value,onChange:a,"aria-label":"Filter value"});if(e.type==="bool")return g(A,{autoFocus:!0,label:e.value?"True":"False",variant:"neutral","aria-label":"Filter value",children:[t(I,{onAction:()=>a(!0),children:"True"}),t(I,{onAction:()=>a(!1),children:"False"})]});if(e.type==="date"){if(e.operator==="between"){const[i,l]=Array.isArray(e.value)?e.value:[new Date().toISOString(),new Date().toISOString()],s=$(i,j()),u=$(l,j());return g("div",{className:"flex flex-col gap-icon",children:[t(q,{autoFocus:!0,hideTimeZone:!0,label:"From",value:s,onChange:m=>a([m?m.toAbsoluteString():i,l])}),t(q,{hideTimeZone:!0,label:"To",value:u,onChange:m=>a([i,m?m.toAbsoluteString():l])})]})}const o=e.value&&!Array.isArray(e.value)?$(e.value,j()):null;return t(q,{autoFocus:!0,hideTimeZone:!0,value:o,onChange:i=>a(i?i.toAbsoluteString():new Date().toISOString()),"aria-label":"Filter date"})}if(e.type==="enum"){const o=r[e.property];return o.type!=="enum"?null:t(qe,{autoFocus:!0,items:o.options,value:e.value??new Set,onChange:a,"aria-label":"Filter value"})}if(e.type==="id-search"){const o=r[e.property];if(o.type!=="id-search")return null;const i=n?{path:n,query:{}}:void 0;return t(ut,{autoFocus:!0,path:o.path,accessor:o.accessor,defaultParams:i,value:e.value??[],onChange:a,"aria-label":"Filter value"})}return null}function Vt({filter:e,filterConfig:r,pathParameters:n,resourceFormatter:a,onRemove:o,onUpdate:i,isOpen:l,onOpenChange:s}){const u=ge[e.type],m=Ht(e),S=Ke();return g(He,{isOpen:l,onOpenChange:s,children:[t("div",{className:"relative",children:g(y,{type:"button",variant:e.active===!1?"neutral":"primary_neutral",className:"animate-in slide-in-from-left-10 fade-in",children:[t("span",{className:"font-medium",children:a(e.property)}),S!=="customer-portal"&&t("span",{children:Et[e.operator]}),S!=="customer-portal"&&m&&t("span",{children:m}),e.active!==!1&&t("span",{className:"size-2 z-100 rounded-full bg-primary ms-1"})]})}),t(ke,{className:"p-icon min-w-48",children:g("div",{className:"flex flex-col gap-icon",children:[u.length>1&&t(A,{label:oe[e.operator],variant:"neutral","aria-label":"Change operator",children:u.map(b=>t(I,{onAction:()=>i({operator:b}),children:oe[b]},b))}),t(kt,{filter:e,filterConfig:r,pathParameters:n,onChange:b=>i({value:b})}),t(y,{type:"button",variant:"neutral",className:"self-end",onPress:o,"aria-label":`Remove ${a(e.property)} filter`,children:"Clear"})]})})]})}function Bt({className:e,previewFilters:r,...n}){const{filters:a,query:o,setFilters:i,filterConfig:l,pathParameters:s}=N(),u=V(),m=Object.keys(l).filter(d=>!a.some(p=>p.property===d)).sort(),[S,b]=x(null),v=Ce(!1);ie(()=>{if(!v.current&&a.length===0){const d=[];r&&r.length>0&&d.push(...r.filter(p=>l[p]).map(p=>({...E(l[p].type,p),active:!1,isPreview:!0}))),d.length>0&&i(d)}v.current=!0},[]);const F=(d,p)=>{const f=E(d,p);i([...a,f]),b(f.id)},L=d=>{a.find(f=>f.id===d)?.isPreview?i(a.map(f=>f.id===d?{...E(l[f.property].type,f.property),active:!1,isPreview:!0}:f)):i(a.filter(f=>f.id!==d))},R=(d,p)=>{i(a.map(f=>f.id===d?{...f,...p,active:!0}:f))};return g("section",{...n,className:w("flex flex-wrap gap-icon items-center",e),children:[a.map(d=>t(Vt,{filter:d,filterConfig:l,pathParameters:s,resourceFormatter:u,onRemove:()=>L(d.id),onUpdate:p=>R(d.id,p),isOpen:S===d.id,onOpenChange:p=>b(p?d.id:null)},d.id)),m.length>0&&t(A,{label:t(ct,{}),isDisabled:o.isPending,variant:"neutral","aria-label":"Add filter",children:m.map(d=>{const p=l[d].type,f=Kt[p];return g(I,{className:"!justify-between",onAction:()=>F(p,d),children:[u(d),t(f,{})]},d)})})]})}const Kt={"id-search":lt,bool:J,date:st,enum:it,id:ot,number:at,string:J};export{oe as C,Bt as D,Kn as DataTable,ue as DataTableContext,Bn as DataTableProvider,Qn as F,kn as getColumnHelper,N as useDataTable,Vn as useDataTableState};
|
|
1
|
+
"use client";import{jsx as t,Fragment as D,jsxs as p}from"react/jsx-runtime";import{parseAbsolute as q,getLocalTimeZone as E}from"@internationalized/date";import{createContext as ve,useState as A,useMemo as ye,useEffect as le,useContext as we,useRef as Ce}from"react";import{Button as w}from"./button.js";import{useSensors as Ie,useSensor as X,PointerSensor as Ne,KeyboardSensor as xe,DndContext as Te,closestCenter as Ae,DragOverlay as De}from"@dnd-kit/core";import{sortableKeyboardCoordinates as Pe,SortableContext as Fe,verticalListSortingStrategy as Oe,arrayMove as Re,useSortable as ze}from"@dnd-kit/sortable";import{CSS as Le}from"@dnd-kit/utilities";import{useQuery as _e}from"@tanstack/react-query";import{createColumnHelper as se,useReactTable as Me,getCoreRowModel as $e,flexRender as V}from"@tanstack/react-table";import{useLocalStorage as Y}from"@uidotdev/usehooks";import{merge as je}from"lodash-es";import{Badge as J}from"./badge.js";import{DatePicker as H}from"./date-picker.js";import{EasyMenu as P,MenuItem as x}from"./menu.js";import{MultiSelect as qe}from"./multi-select.js";import{NumberField as Ee}from"./numberfield.js";import{PopoverTrigger as He,Popover as ke}from"./popover.js";import{TextField as Ve}from"./textfield.js";import{formatDate as _}from"../utilities/date.js";import{useResourceFormatter as K,ALL_OS as Be,useProjectName as Ke}from"../utilities/resources.js";import{classNames as C}from"../utilities/theme.js";import{IcInfo as Qe,IcMoreVertical as Ue,IcRefresh as Ze,IcColumns as Ge,IcGrip as Xe,IcFirst as Ye,IcLeft as Je,IcRight as We,IcLast as et,IcSortAsc as tt,IcSortDesc as nt,IcSortNone as rt,IcCheck as W,IcMinus as at,IcAccount as ot,IcLicense as it,IcDate as lt,IcFile as st,IcFilter as ct}from"./icons.js";import{MultipleIdSearchInput as ut}from"./id-search.js";import{Loader as dt}from"./loader.js";import{SearchField as mt}from"./searchfield.js";import{Table as gt,TableHeader as pt,TableRow as ee,TableHead as ft,TableBody as bt,TableCell as ht}from"./table.js";import{CountryName as St}from"../utilities/countries.js";import{Duration as vt}from"../utilities/duration.js";import{formatDays as yt,formatFilesize as wt,formatNumber as Ct}from"../utilities/numbers.js";import{Checkbox as te}from"./checkbox.js";import{TooltipTrigger as It,Tooltip as Nt}from"./tooltip.js";import{getSubscriptionStartTriggerLabel as xt,ALL_LICENSE_TYPES as Tt}from"./select-options.js";import{useCtxClient as At}from"../utilities/ctx-client.js";import{ControlledDialogProvider as Dt,useControlledDialog as ce}from"./dialog.js";import"class-variance-authority";import"react-aria-components";import"clsx";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 Pt(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const ue=se(),Ft=[ue.accessor("checkbox",{header:({table:e})=>t(te,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:e})=>t(te,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],I="TableActions";function Ot(e){return e.length===0?[]:[ue.accessor(I,{header:"Actions",id:I,enableHiding:!1,cell:({row:r})=>t(qt,{label:t(Ue,{}),data:r.original,items:e}),enableSorting:!1})]}function kn(){return se()}function Vn({path:e,pathParameters:r,columns:n,filterConfig:a,columnsToHideByDefault:o={},allowSelection:i=!1,initialFilters:s=[],previewFilters:l,tableActions:u}){const[m,S]=A({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:b,pagination:v}=m,[O,M]=A(""),[R,d]=A({}),[g,f]=A(s),y=ye(()=>g.filter(c=>c.active!==!1).map(c=>c.operator==="between"&&Array.isArray(c.value)&&c.value.length===2?{[c.property]:{gte:c.value[0],lte:c.value[1]}}:Array.isArray(c.value)?{[c.property]:{[c.operator]:c.value.join(",")}}:{[c.property]:{[c.operator]:c.value}}).reduce((c,h)=>je(c,h),{}),[g]),N={...g,page:v.pageIndex+1,limit:v.pageSize,sort:Pt(b[0]),search:O},z=At(),$=["get",e,N],[Q,U]=Y(`${$.join("")}_ctx_column_order_preference`,[]),[Z,fe]=Y(`${$.join("")}_ctx_column_visibility_preference`,{id:!1,...o}),j=c=>{S(h=>({...h,...c}))},L=_e({queryKey:$,queryFn:async()=>{const c=await z.GET(e,{params:{query:{page:N.page,limit:N.limit,sort:N.sort,search:N.search,...y},path:r}});return{data:c.data??[],total:Number.parseInt(c.response.headers.get("Pagination-Count")||"0")}}}),be=u.filter(ge),he=[...i?Ft:[],...n,...Ot(be??[])];function Se(c){return typeof c=="function"}function F(c,h){return Se(c)?c(h):c}const G=Me({data:L.data?.data??[],columns:he,getCoreRowModel:$e(),rowCount:L.data?.total??0,manualPagination:!0,onPaginationChange:c=>{j({pagination:F(c,v)})},manualSorting:!0,onSortingChange:c=>{d({}),j({sorting:[...F(c,b)]})},manualFiltering:!0,onColumnVisibilityChange:c=>{fe(F(c,Z))},onRowSelectionChange:c=>{d(F(c,R))},onColumnOrderChange:c=>{U(F(c,Q))},state:{sorting:b,columnVisibility:Z,pagination:v,rowSelection:R,columnOrder:Q},meta:{refetch:L.refetch}});return le(()=>{const c=G.getAllLeafColumns();U([...c.filter(h=>h.id!==I).map(h=>h.id),...c.filter(h=>h.id===I).map(h=>h.id)])},[]),{tableState:m,updateTableState:j,query:L,setSearchQuery:M,searchQuery:O,tanTable:G,mergedFilters:y,filters:g,setFilters:f,filterConfig:a,tableActions:u,pathParameters:r,previewFilters:l}}const de=ve(null);function T(){const e=we(de);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function Bn({children:e,...r}){return t(de.Provider,{value:r,children:e})}function Kn({className:e,...r}){const{query:n,tanTable:a}=T();return t(D,{children:p(Dt,{children:[t(_t,{}),p("section",{...r,className:C("z-20 flex flex-col bg-elevation-1 border rounded-md",e),children:[p("div",{className:"w-full overflow-auto h-table relative rounded-md",tabIndex:0,children:[n.isLoading&&t(ne,{className:"cursor-wait",children:t(dt,{})}),!n.isLoading&&a.getRowModel().rows.length===0&&t(ne,{className:"cursor-not-allowed",children:!n.isFetching&&(n.isError?p("span",{className:"flex gap-3 justify-center items-center",children:[t(Qe,{}),t("span",{children:n.error.message})]}):n.data?.data?.length===0?t(D,{children:"No results found."}):t(D,{children:"Unknown error. Please contact customer support."}))}),!n.isLoading&&a.getRowModel().rows.length!==0&&t($t,{className:"w-full"})]}),p("div",{className:"flex w-full justify-between border-t gap-icon p-icon overflow-x-auto",children:[p("div",{className:"flex gap-icon",children:[t(Rt,{}),t(Lt,{})]}),t(zt,{})]})]})]})})}function ne({children:e,className:r}){return p(D,{children:[t("span",{className:C(r,"absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center"),children:e}),t("span",{className:"relative h-full w-0 block"})]})}function Rt(){const{tanTable:e}=T(),[r,n]=A(null),a=K(),o=Ie(X(Ne),X(xe,{coordinateGetter:Pe}));return t(Te,{sensors:o,collisionDetection:Ae,onDragStart:s=>{const{active:l}=s;n(l.id.toString())},onDragEnd:s=>{const{active:l,over:u}=s;if(u&&l.id!==u.id){const m=e.getState().columnOrder,S=m.indexOf(l.id.toString()),b=m.indexOf(u.id.toString());e.setColumnOrder([...Re(m,S,b)])}n(null)},children:p(Fe,{items:e.getState().columnOrder,strategy:Oe,children:[p(P,{label:p(D,{children:[t(Ge,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(s=>s.id),children:[t(x,{onAction:()=>e.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),e.getState().columnOrder.map(s=>{const l=e.getAllFlatColumns().find(u=>u.id===s);return!l||l.id==="checkbox"||l.id===I?null:t(i,{column:l},l.id)})]}),t(De,{children:r?t("div",{className:"opacity-70 border-2 border-primary",children:a(r)}):null})]})});function i({column:s}){const{attributes:l,listeners:u,setNodeRef:m,transform:S,transition:b}=ze({id:s.id}),v={transform:Le.Transform.toString(S),transition:b,zIndex:"999"};return p(x,{ref:m,style:v,...l,id:s.id,onAction:()=>s.toggleVisibility(),isDisabled:!s.getCanHide(),className:"flex items-center",children:[t(Xe,{...u,className:"size-icon cursor-grab"}),B(s),s.getIsSorted()&&t(me,{className:"size-icon",direction:s.getIsSorted()})]})}}function zt(){const{tanTable:e}=T(),r=e.getRowCount();return p("div",{className:"flex items-center gap-2",children:[t("span",{className:"whitespace-nowrap body-sm text-muted",children:`${e.getState().pagination.pageIndex*e.getState().pagination.pageSize+1} - ${Math.min((e.getState().pagination.pageIndex+1)*e.getState().pagination.pageSize,r)} of ${r?.toLocaleString()}`}),t(w,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Ye,{})}),t(w,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Je,{})}),t(w,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(We,{})}),t(w,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(et,{})})]})}function Lt(){const{tanTable:e}=T(),r=[10,20,30,40,50];return t(P,{label:e.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[e.getState().pagination.pageSize.toString()],items:r.map(n=>({id:n.toString(),value:n})),children:n=>t(x,{onAction:()=>e.setPageSize(n.value),children:n.value})})}function _t(){const{query:e,tanTable:r,searchQuery:n,setSearchQuery:a,tableActions:o,previewFilters:i}=T(),s=r.getSelectedRowModel().rows.length>0,l=o.filter(u=>u.resourceType!=="single").filter(u=>u.resourceType==="multiple"===s);return p("section",{className:"flex justify-between my-0 mb-icon gap-icon overflow-x-auto py-1",children:[p("div",{className:"flex gap-icon",children:[t(w,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",children:t(Ze,{})}),t(mt,{value:n,onChange:a}),t(Bt,{previewFilters:i})]}),t("div",{className:"flex gap-icon",children:t(jt,{items:l,isFetching:e.isFetching})})]})}function me({direction:e,...r}){return e==="asc"?t(tt,{className:"size-3.5",...r}):e==="desc"?t(nt,{className:"size-3.5",...r}):t(rt,{className:"size-3.5",...r})}function B(e){const r=K(),n=e.columnDef.header;return typeof n=="string"?n:r(e.id)}function Mt(e){const r=e.column.columnDef.meta?.displayType,n=e.getValue();if(n==null)return null;switch(r){case"date":return t("span",{className:"tabular-nums",children:_(n)});case"number":return t("span",{className:"block text-right tabular-nums",children:Ct(n)});case"boolean":return t(J,{variant:n?"success":"destructive",className:"w-full capitalize",children:String(n)});case"badge":return t(J,{className:"w-full",children:String(n)});case"country":return t(St,{value:n});case"enum":return t("span",{className:"uppercase w-full",children:String(n)});case"fileSize":return wt(n);case"days":return yt(n);case"os":return Be[n]??n;case"licenseType":return Tt[n]??n;case"subscriptionInterval":return vt.formatISODuration(n);case"subscriptionStartTrigger":return xt(n);default:return String(n)}}function re({header:e}){const r=e.column.columnDef.header;return typeof r=="string"||!r?B(e.column):typeof r=="function"?typeof r(e.getContext())=="string"?B(e.column):V(r,e.getContext()):V(r,e.getContext())}function $t({className:e}){const{tanTable:r}=T(),n=(a,o,i="z-50")=>C("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",a&&`bg-elevation-1 sticky right-0 ${i} text-center justify-center`,o);return p(gt,{className:C("table-auto border-0 rounded-md",e),children:[t(pt,{className:"sticky top-0 z-10 rounded-md",children:r.getHeaderGroups().map(a=>t(ee,{children:a.headers.map(o=>p(ft,{scope:"col",colSpan:o.colSpan,className:n(o.id===I,"bg-elevation-1"),children:[!o.column.getCanSort()&&!o.isPlaceholder&&t("div",{className:C("w-full py-1 inline-flex items-center gap-1 body-sm",o.id===I?"justify-center":"justify-start"),children:t(re,{header:o})}),o.column.getCanSort()&&p(w,{variant:"ghost",className:C("w-full p-1",o.id===I?"justify-center":"justify-start"),onPress:o.column.getToggleSortingHandler(),children:[t("span",{children:t(re,{header:o})}),t(me,{direction:o.column.getIsSorted()})]})]},o.id))},a.id))}),t(bt,{children:r.getRowModel().rows.map(a=>t(ee,{className:C("transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":a.getIsSelected(),children:a.getVisibleCells().map(o=>{const i=o.column.id===I,s=o.column.columnDef.meta?.displayType?Mt(o):V(o.column.columnDef.cell,o.getContext());return t(ht,{className:C(n(i,void 0,"z-1"),i&&"flex justify-center items-center"),children:s},o.id)})},a.id))})]})}function ae(e){return e.resourceType==="none"}function ge(e){return e.resourceType==="single"}function oe(e){return e.resourceType==="multiple"}function jt({items:e,isFetching:r}){const{openDialog:n,closeDialog:a}=ce(),{tanTable:o}=T();function i(l,u){return l.isDisabled?ae(l)?l.isDisabled():oe(l)?l.isDisabled(u):!1:!1}const s=o.getSelectedRowModel().rows.map(l=>l.original);return t(D,{children:e.map((l,u)=>{const m=l.icon,S=i(l,s)||r;return p(w,{"aria-label":l.label,type:"button",isDisabled:S,className:"animate-in fade-in slide-in-from-right-15 duration-300 transition-transform",onPress:b=>{const v={event:b,openDialog:n,closeDialog:a};ae(l)?l.onPress(v):oe(l)&&l.onPress({...v,data:s})},variant:l.variant??"neutral",children:[m&&t(m,{"aria-hidden":!0}),t("span",{children:l.label})]},`${l.label}-${u}`)})})}function qt({label:e,items:r,data:n}){const{openDialog:a,closeDialog:o}=ce();return r.length<4?t("div",{className:"flex items-center gap-2",children:r.map((i,s)=>{const l=i.icon,u=typeof i.label=="function"?i.label(n):i.label;return p(It,{children:[t(w,{"aria-label":typeof u=="string"?u:void 0,isDisabled:i.isDisabled?.(n)??!1,variant:"ghost",size:"icon",onPress:()=>{const m={openDialog:a,closeDialog:o};i.onPress({...m,data:n})},children:t(l,{className:"size-icon"})}),t(Nt,{children:u})]},`${s}-${typeof u=="string"?u:""}`)})}):t(P,{"aria-label":"Actions",label:e,size:"icon",children:r.map((i,s)=>{const l=i.icon,u=typeof i.label=="function"?i.label(n):i.label;return p(x,{id:typeof u=="string"?u:void 0,isDisabled:i.isDisabled?.(n)??!1,onAction:()=>{const m={openDialog:a,closeDialog:o};ge(i)&&i.onPress({...m,data:n})},children:[t(l,{className:"size-icon"}),u]},`${s}-${typeof u=="string"?u:""}`)})})}const Qn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte","between"],ie={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"},Et={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,r){const n=`${r}-${Date.now()}`,a=pe[e][0];switch(e){case"bool":return{id:n,type:e,property:r,operator:a,value:!0};case"string":return{id:n,type:e,property:r,operator:a,value:""};case"date":return{id:n,type:e,property:r,operator:a,value:a==="between"?[new Date().toISOString(),new Date().toISOString()]:new Date().toISOString()};case"id":return{id:n,type:e,property:r,operator:a,value:""};case"id-search":return{id:n,type:e,property:r,operator:a,value:[]};case"enum":return{id:n,type:e,property:r,operator:a,value:new Set};case"number":return{id:n,type:e,property:r,operator:a,value:0}}}const pe={bool:["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 Ht(e){switch(e.type){case"string":case"id":return e.value??"";case"number":return e.value?.toString()??"";case"bool":return e.value?"true":"false";case"date":if(Array.isArray(e.value)){const[r,n]=e.value;return`${_(r,{dateStyle:"short"})??""} – ${_(n,{dateStyle:"short"})??""}`}return e.value?_(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 kt({filter:e,filterConfig:r,pathParameters:n,onChange:a}){if(e.type==="string"||e.type==="id")return t(Ve,{autoFocus:!0,value:e.value??"",onChange:a,"aria-label":"Filter value"});if(e.type==="number")return t(Ee,{autoFocus:!0,value:e.value,onChange:a,"aria-label":"Filter value"});if(e.type==="bool")return p(P,{autoFocus:!0,label:e.value?"True":"False",variant:"neutral","aria-label":"Filter value",children:[t(x,{onAction:()=>a(!0),children:"True"}),t(x,{onAction:()=>a(!1),children:"False"})]});if(e.type==="date"){if(e.operator==="between"){const[i,s]=Array.isArray(e.value)?e.value:[new Date().toISOString(),new Date().toISOString()],l=q(i,E()),u=q(s,E());return p("div",{className:"flex flex-col gap-icon",children:[t(H,{autoFocus:!0,hideTimeZone:!0,label:"From",value:l,onChange:m=>a([m?m.toAbsoluteString():i,s])}),t(H,{hideTimeZone:!0,label:"To",value:u,onChange:m=>a([i,m?m.toAbsoluteString():s])})]})}const o=e.value&&!Array.isArray(e.value)?q(e.value,E()):null;return t(H,{autoFocus:!0,hideTimeZone:!0,value:o,onChange:i=>a(i?i.toAbsoluteString():new Date().toISOString()),"aria-label":"Filter date"})}if(e.type==="enum"){const o=r[e.property];return o.type!=="enum"?null:t(qe,{autoFocus:!0,items:o.options,value:e.value??new Set,onChange:a,"aria-label":"Filter value"})}if(e.type==="id-search"){const o=r[e.property];if(o.type!=="id-search")return null;const i=n?{path:n,query:{}}:void 0;return t(ut,{autoFocus:!0,path:o.path,accessor:o.accessor,defaultParams:i,value:e.value??[],onChange:a,"aria-label":"Filter value"})}return null}function Vt({filter:e,filterConfig:r,pathParameters:n,resourceFormatter:a,onRemove:o,onUpdate:i,isOpen:s,onOpenChange:l}){const u=pe[e.type],m=Ht(e),S=Ke();return p(He,{isOpen:s,onOpenChange:l,children:[t("div",{className:"relative",children:p(w,{type:"button",variant:e.active===!1?"neutral":"primary_neutral",className:"animate-in slide-in-from-left-10 fade-in",children:[t("span",{className:"font-medium",children:a(e.property)}),S!=="customer-portal"&&t("span",{children:Et[e.operator]}),S!=="customer-portal"&&m&&t("span",{children:m}),e.active!==!1&&t("span",{className:"size-2 z-100 rounded-full bg-primary ms-1"})]})}),t(ke,{className:"p-icon min-w-48",children:p("div",{className:"flex flex-col gap-icon",children:[u.length>1&&t(P,{label:ie[e.operator],variant:"neutral","aria-label":"Change operator",children:u.map(b=>t(x,{onAction:()=>i({operator:b}),children:ie[b]},b))}),t(kt,{filter:e,filterConfig:r,pathParameters:n,onChange:b=>i({value:b})}),t(w,{type:"button",variant:"neutral",className:"self-end",onPress:o,"aria-label":`Remove ${a(e.property)} filter`,children:"Clear"})]})})]})}function Bt({className:e,previewFilters:r,...n}){const{filters:a,query:o,setFilters:i,filterConfig:s,pathParameters:l}=T(),u=K(),m=Object.keys(s).filter(d=>!a.some(g=>g.property===d)).sort(),[S,b]=A(null),v=Ce(!1);le(()=>{if(!v.current&&a.length===0){const d=[];r&&r.length>0&&d.push(...r.filter(g=>s[g]).map(g=>({...k(s[g].type,g),active:!1,isPreview:!0}))),d.length>0&&i(d)}v.current=!0},[]);const O=(d,g)=>{const f=k(d,g);i([...a,f]),b(f.id)},M=d=>{a.find(f=>f.id===d)?.isPreview?i(a.map(f=>f.id===d?{...k(s[f.property].type,f.property),active:!1,isPreview:!0}:f)):i(a.filter(f=>f.id!==d))},R=(d,g)=>{i(a.map(f=>{if(f.id!==d)return f;let y=g.value!==void 0?g.value:f.value;const N=g.operator??f.operator;if(f.type==="date"&&g.operator!==void 0)if(N==="between"&&!Array.isArray(y)){const z=typeof y=="string"?y:new Date().toISOString();y=[z,z]}else N!=="between"&&Array.isArray(y)&&(y=y[0]??new Date().toISOString());return{...f,...g,value:y,active:!0}}))};return p("section",{...n,className:C("flex flex-wrap gap-icon items-center",e),children:[a.map(d=>t(Vt,{filter:d,filterConfig:s,pathParameters:l,resourceFormatter:u,onRemove:()=>M(d.id),onUpdate:g=>R(d.id,g),isOpen:S===d.id,onOpenChange:g=>b(g?d.id:null)},d.id)),m.length>0&&t(P,{label:t(ct,{}),isDisabled:o.isPending,variant:"neutral","aria-label":"Add filter",children:m.map(d=>{const g=s[d].type,f=Kt[g];return p(x,{className:"!justify-between",onAction:()=>O(g,d),children:[u(d),t(f,{})]},d)})})]})}const Kt={"id-search":st,bool:W,date:lt,enum:it,id:ot,number:at,string:W};export{ie as C,Bt as D,Kn as DataTable,de as DataTableContext,Bn as DataTableProvider,Qn as F,kn as getColumnHelper,T as useDataTable,Vn as useDataTableState};
|
|
2
2
|
//# sourceMappingURL=data-table.js.map
|