@cryptlex/web-components 6.6.30 → 6.6.32
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/badge.js +1 -1
- package/dist/components/badge.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/checkbox.js +1 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/data-table.js +1 -1
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/icons.d.ts +1 -0
- package/dist/components/icons.js +56 -51
- package/dist/components/icons.js.map +1 -1
- package/lib/index.css +15 -3
- package/package.json +6 -4
package/dist/components/badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as u,jsx as e}from"react/jsx-runtime";import{cva as c}from"class-variance-authority";import{classNames as s}from"../utilities/theme.js";import"clsx";const o=c("leading-tight body-sm px-
|
|
1
|
+
import{jsxs as u,jsx as e}from"react/jsx-runtime";import{cva as c}from"class-variance-authority";import{classNames as s}from"../utilities/theme.js";import"clsx";const o=c("leading-tight body-sm px-2 relative rounded-full inline-flex gap-2 items-center justify-start select-none h-input-sm focus:outline-hidden focus:ring-1 focus:ring-ring",{variants:{variant:{success:"bg-success/20 text-success",destructive:"bg-destructive/20 text-destructive",warning:"bg-warning/20 text-warning",neutral:"bg-muted/20 text-muted"}},defaultVariants:{variant:"neutral"}}),d={success:"bg-success",destructive:"bg-destructive",warning:"bg-warning",neutral:"bg-muted"};function p({className:n,children:r,variant:t,...a}){const i=d[t??"neutral"];return u("span",{className:s(o({variant:t}),n),...a,children:[e("span",{role:"presentation",className:s("rounded-full size-2",i)}),e("span",{children:r})]})}export{p as Badge,o as badgeVariants};
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","sources":["../../lib/components/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\nimport { classNames } from '../utilities/theme';\n\nexport const badgeVariants = cva(\n 'leading-tight body-sm px-
|
|
1
|
+
{"version":3,"file":"badge.js","sources":["../../lib/components/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\nimport { classNames } from '../utilities/theme';\n\nexport const badgeVariants = cva(\n 'leading-tight body-sm px-2 relative rounded-full inline-flex gap-2 items-center justify-start select-none h-input-sm focus:outline-hidden focus:ring-1 focus:ring-ring',\n {\n variants: {\n variant: {\n success: 'bg-success/20 text-success',\n destructive: 'bg-destructive/20 text-destructive',\n warning: 'bg-warning/20 text-warning',\n neutral: 'bg-muted/20 text-muted',\n },\n },\n defaultVariants: {\n variant: 'neutral',\n },\n }\n);\n\ntype BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>['variant']>;\n\nconst dotVariants: Record<BadgeVariant, string> = {\n success: 'bg-success',\n destructive: 'bg-destructive',\n warning: 'bg-warning',\n neutral: 'bg-muted',\n};\n\nexport function Badge({\n className,\n children,\n variant,\n ...props\n}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {\n const dotClass = dotVariants[variant ?? 'neutral'];\n return (\n <span className={classNames(badgeVariants({ variant }), className)} {...props}>\n <span role=\"presentation\" className={classNames('rounded-full size-2', dotClass)}></span>\n {/* Contents */}\n <span>{children}</span>\n </span>\n );\n}\n"],"names":["badgeVariants","cva","dotVariants","Badge","className","children","variant","props","dotClass","jsxs","classNames","jsx"],"mappings":"iKAIO,MAAMA,EAAgBC,EACzB,yKACA,CACI,SAAU,CACN,QAAS,CACL,QAAS,6BACT,YAAa,qCACb,QAAS,6BACT,QAAS,wBAAA,CACb,EAEJ,gBAAiB,CACb,QAAS,SAAA,CACb,CAER,EAIMC,EAA4C,CAC9C,QAAS,aACT,YAAa,iBACb,QAAS,aACT,QAAS,UACb,EAEO,SAASC,EAAM,CAClB,UAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CACP,EAAsE,CAClE,MAAMC,EAAWN,EAAYI,GAAW,SAAS,EACjD,OACIG,EAAC,OAAA,CAAK,UAAWC,EAAWV,EAAc,CAAE,QAAAM,CAAA,CAAS,EAAGF,CAAS,EAAI,GAAGG,EACpE,SAAA,CAAAI,EAAC,QAAK,KAAK,eAAe,UAAWD,EAAW,sBAAuBF,CAAQ,EAAG,EAElFG,EAAC,QAAM,SAAAN,CAAA,CAAS,CAAA,EACpB,CAER"}
|
|
@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
2
2
|
import { ButtonProps as AriaButtonProps } from 'react-aria-components';
|
|
3
3
|
export declare const buttonVariants: (props?: ({
|
|
4
4
|
variant?: "link" | "primary" | "destructive" | "destructive_neutral" | "neutral" | "primary_neutral" | "ghost" | null | undefined;
|
|
5
|
-
size?: "none" | "default" | "icon" | null | undefined;
|
|
5
|
+
size?: "none" | "default" | "sm" | "icon" | "icon-sm" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
7
|
export type ButtonProps = AriaButtonProps & VariantProps<typeof buttonVariants> & {
|
|
8
8
|
ref?: React.Ref<HTMLButtonElement>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as r,jsxs as
|
|
1
|
+
"use client";import{jsx as r,jsxs as d,Fragment as i}from"react/jsx-runtime";import{cva as p}from"class-variance-authority";import{Button as c,composeRenderProps as a}from"react-aria-components";import{classNames as l}from"../utilities/theme.js";import{Loader as b}from"./loader.js";import"clsx";import"./icons.js";import"react";const f=p("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",sm:"h-input-sm px-2 py-1 body-sm rounded-md leading-tight",icon:"size-input rounded-md","icon-sm":"size-input-sm rounded-md",none:""}},defaultVariants:{variant:"neutral",size:"default"}});function k({className:n,variant:o,size:m,children:s,isPending:e,active:v,...u}){return r(c,{...u,className:a(n,t=>l(f({variant:o,size:m,className:t}),n)),children:a(s,t=>d(i,{children:[e&&r(b,{}),!e&&r(i,{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 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
|
+
{"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 sm: 'h-input-sm px-2 py-1 body-sm rounded-md leading-tight',\n icon: 'size-input rounded-md',\n 'icon-sm': 'size-input-sm 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,GAAI,wDACJ,KAAM,wBACN,UAAW,2BACX,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
|
-
"use client";import{jsx as e,Fragment as
|
|
1
|
+
"use client";import{jsx as e,Fragment as y,jsxs as w}from"react/jsx-runtime";import{useId as F}from"react";import{Checkbox as I,composeRenderProps as g,CheckboxGroup as B}from"react-aria-components";import{useFieldContext as S}from"../utilities/form-context.js";import{classNames as s}from"../utilities/theme.js";import{labelVariants as z,FormField as j}from"./form.js";import{IcMinus as D,IcCheck as G}from"./icons.js";import"@tanstack/react-form";import"clsx";import"class-variance-authority";import"./card.js";const c="group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50",a="group-data-[invalid]/checkbox:border-destructive",x="focus:outline-none focus-visible:outline-none",p="group-data-[selected]/checkbox:bg-primary",R="relative shrink-0 h-6 w-11 rounded-full border border-input bg-elevation-1 transition-colors duration-200",$="absolute top-1/2 -translate-y-1/2 left-0.5 h-5 w-5 rounded-full bg-background border border-input transition-transform duration-200",q="flex shrink-0 items-center bg-elevation-1 rounded-md justify-center border border-input text-current ring-offset-background",K={sm:"size-icon",lg:"size-input"},f={sm:"size-3",lg:"size-icon"},U=B;function T({className:o,label:t,description:n,errorMessage:d,requiredIndicator:l,variant:k="checkbox",size:r="lg",...u}){const v=F(),b=u.id||v,C=k==="switch",N=!!(t||n||d||l),m=e(I,{className:g(o,h=>s("group/checkbox cursor-pointer relative focus-ring flex items-center gap-x-2 disabled-muted",z,h)),id:b,...u,children:g(e(y,{}),(h,i)=>C?e("div",{className:s(R,p,c,a,"group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive",x),children:e("div",{className:s($,"group-data-[selected]/checkbox:translate-x-4.5",c,a)})}):w("div",{className:s(q,"group-data-[indeterminate]/checkbox:bg-primary",p,"group-data-[indeterminate]/checkbox:text-primary-foreground group-data-[selected]/checkbox:text-primary-foreground",c,a,"group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground",x,K[r]),children:[i.isIndeterminate&&e(D,{className:f[r]}),!i.isIndeterminate&&i.isSelected&&e(G,{className:f[r]})]}))});return N?e("div",{className:"group form-field",children:e(j,{label:t,description:n,errorMessage:d,requiredIndicator:l,htmlFor:b,children:m})}):e("div",{className:"group flex",children:m})}function W({...o}){const t=S({disabled:o.isDisabled});return e(T,{requiredIndicator:t.isRequired,isSelected:t.state.value,isDisabled:t.isSubmitting||o.isDisabled,onChange:()=>t.handleChange(!t.state.value),onBlur:t.handleBlur,...o})}export{T as Checkbox,U as CheckboxGroup,W as TfCheckbox};
|
|
2
2
|
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sources":["../../lib/components/checkbox.tsx"],"sourcesContent":["'use client';\nimport { useId } from 'react';\nimport {\n Checkbox as AriaCheckbox,\n CheckboxGroup as AriaCheckboxGroup,\n composeRenderProps,\n type CheckboxProps as AriaCheckboxProps,\n} from 'react-aria-components';\n\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FormField, labelVariants, type FormFieldProps } from './form';\nimport { IcCheck, IcMinus } from './icons';\n\nconst disabledClasses = 'group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50';\nconst invalidBorderClasses = 'group-data-[invalid]/checkbox:border-destructive';\nconst focusResetClasses = 'focus:outline-none focus-visible:outline-none';\nconst selectedPrimaryClasses = 'group-data-[selected]/checkbox:bg-primary';\n\nconst switchBaseClasses =\n 'relative shrink-0 h-6 w-11 rounded-full border border-input bg-elevation-1 transition-colors duration-200';\nconst switchKnobClasses =\n 'absolute top-1/2 -translate-y-1/2 left-0.5 h-5 w-5 rounded-full bg-background border border-input transition-transform duration-200';\n\nconst checkboxBaseClasses =\n 'flex shrink-0 items-center bg-elevation-1 rounded-md justify-center border border-input text-current ring-offset-background';\n\nconst sizeClasses = {\n sm: 'size-icon',\n lg: 'size-input',\n};\nexport const CheckboxGroup = AriaCheckboxGroup;\ntype CheckboxProps = AriaCheckboxProps &\n FormFieldProps & {\n variant?: 'checkbox' | 'switch';\n size?: 'sm' | 'lg';\n };\nexport function Checkbox({\n className,\n label,\n description,\n errorMessage,\n requiredIndicator,\n variant = 'checkbox',\n size = 'lg',\n ...props\n}: Omit<CheckboxProps, 'children'>) {\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n const isSwitch = variant === 'switch';\n
|
|
1
|
+
{"version":3,"file":"checkbox.js","sources":["../../lib/components/checkbox.tsx"],"sourcesContent":["'use client';\nimport { useId } from 'react';\nimport {\n Checkbox as AriaCheckbox,\n CheckboxGroup as AriaCheckboxGroup,\n composeRenderProps,\n type CheckboxProps as AriaCheckboxProps,\n} from 'react-aria-components';\n\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FormField, labelVariants, type FormFieldProps } from './form';\nimport { IcCheck, IcMinus } from './icons';\n\nconst disabledClasses = 'group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50';\nconst invalidBorderClasses = 'group-data-[invalid]/checkbox:border-destructive';\nconst focusResetClasses = 'focus:outline-none focus-visible:outline-none';\nconst selectedPrimaryClasses = 'group-data-[selected]/checkbox:bg-primary';\n\nconst switchBaseClasses =\n 'relative shrink-0 h-6 w-11 rounded-full border border-input bg-elevation-1 transition-colors duration-200';\nconst switchKnobClasses =\n 'absolute top-1/2 -translate-y-1/2 left-0.5 h-5 w-5 rounded-full bg-background border border-input transition-transform duration-200';\n\nconst checkboxBaseClasses =\n 'flex shrink-0 items-center bg-elevation-1 rounded-md justify-center border border-input text-current ring-offset-background';\n\nconst sizeClasses = {\n sm: 'size-icon',\n lg: 'size-input',\n};\n\nconst iconSizeClasses = {\n sm: 'size-3',\n lg: 'size-icon',\n};\nexport const CheckboxGroup = AriaCheckboxGroup;\ntype CheckboxProps = AriaCheckboxProps &\n FormFieldProps & {\n variant?: 'checkbox' | 'switch';\n size?: 'sm' | 'lg';\n };\nexport function Checkbox({\n className,\n label,\n description,\n errorMessage,\n requiredIndicator,\n variant = 'checkbox',\n size = 'lg',\n ...props\n}: Omit<CheckboxProps, 'children'>) {\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n const isSwitch = variant === 'switch';\n const hasFormField = !!(label || description || errorMessage || requiredIndicator);\n const checkbox = (\n <AriaCheckbox\n className={composeRenderProps(className, className =>\n classNames(\n 'group/checkbox cursor-pointer relative focus-ring flex items-center gap-x-2 disabled-muted',\n labelVariants,\n className\n )\n )}\n id={fieldId}\n {...props}\n >\n {composeRenderProps(<></>, (_, renderProps) => {\n if (isSwitch) {\n return (\n <div\n className={classNames(\n switchBaseClasses,\n selectedPrimaryClasses,\n disabledClasses,\n invalidBorderClasses,\n 'group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive',\n focusResetClasses\n )}\n >\n <div\n className={classNames(\n switchKnobClasses,\n 'group-data-[selected]/checkbox:translate-x-4.5',\n disabledClasses,\n invalidBorderClasses\n )}\n />\n </div>\n );\n }\n\n return (\n <div\n className={classNames(\n checkboxBaseClasses,\n 'group-data-[indeterminate]/checkbox:bg-primary',\n selectedPrimaryClasses,\n 'group-data-[indeterminate]/checkbox:text-primary-foreground group-data-[selected]/checkbox:text-primary-foreground',\n disabledClasses,\n invalidBorderClasses,\n 'group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground',\n focusResetClasses,\n sizeClasses[size]\n )}\n >\n {renderProps.isIndeterminate && <IcMinus className={iconSizeClasses[size]} />}\n {!renderProps.isIndeterminate && renderProps.isSelected && (\n <IcCheck className={iconSizeClasses[size]} />\n )}\n </div>\n );\n })}\n </AriaCheckbox>\n );\n if (!hasFormField) return <div className=\"group flex\">{checkbox}</div>;\n return (\n <div className=\"group form-field\">\n <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n {checkbox}\n </FormField>\n </div>\n );\n}\n\nexport type TfCheckboxProps = Omit<React.ComponentProps<typeof Checkbox>, 'onChange' | 'onBlur' | 'isChecked'>;\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n const field = useFieldContext<boolean>({ disabled: props.isDisabled });\n return (\n <Checkbox\n requiredIndicator={field.isRequired}\n isSelected={field.state.value}\n isDisabled={field.isSubmitting || props.isDisabled}\n onChange={() => field.handleChange(!field.state.value)}\n onBlur={field.handleBlur}\n {...props}\n />\n );\n}\n"],"names":["disabledClasses","invalidBorderClasses","focusResetClasses","selectedPrimaryClasses","switchBaseClasses","switchKnobClasses","checkboxBaseClasses","sizeClasses","iconSizeClasses","CheckboxGroup","AriaCheckboxGroup","Checkbox","className","label","description","errorMessage","requiredIndicator","variant","size","props","generatedId","useId","fieldId","isSwitch","hasFormField","checkbox","jsx","AriaCheckbox","composeRenderProps","classNames","labelVariants","Fragment","_","renderProps","jsxs","IcMinus","IcCheck","FormField","TfCheckbox","field","useFieldContext"],"mappings":"igBAcA,MAAMA,EAAkB,8FAClBC,EAAuB,mDACvBC,EAAoB,gDACpBC,EAAyB,4CAEzBC,EACF,4GACEC,EACF,sIAEEC,EACF,8HAEEC,EAAc,CAChB,GAAI,YACJ,GAAI,YACR,EAEMC,EAAkB,CACpB,GAAI,SACJ,GAAI,WACR,EACaC,EAAgBC,EAMtB,SAASC,EAAS,CACrB,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,QAAAC,EAAU,WACV,KAAAC,EAAO,KACP,GAAGC,CACP,EAAoC,CAChC,MAAMC,EAAcC,EAAA,EACdC,EAAUH,EAAM,IAAMC,EACtBG,EAAWN,IAAY,SACvBO,EAAe,CAAC,EAAEX,GAASC,GAAeC,GAAgBC,GAC1DS,EACFC,EAACC,EAAA,CACG,UAAWC,EAAmBhB,EAAWA,GACrCiB,EACI,6FACAC,EACAlB,CAAA,CACJ,EAEJ,GAAIU,EACH,GAAGH,EAEH,SAAAS,EAAmBF,EAAAK,EAAA,CAAA,CAAE,EAAK,CAACC,EAAGC,IACvBV,EAEIG,EAAC,MAAA,CACG,UAAWG,EACPzB,EACAD,EACAH,EACAC,EACA,8EACAC,CAAA,EAGJ,SAAAwB,EAAC,MAAA,CACG,UAAWG,EACPxB,EACA,iDACAL,EACAC,CAAA,CACJ,CAAA,CACJ,CAAA,EAMRiC,EAAC,MAAA,CACG,UAAWL,EACPvB,EACA,iDACAH,EACA,qHACAH,EACAC,EACA,uKACAC,EACAK,EAAYW,CAAI,CAAA,EAGnB,SAAA,CAAAe,EAAY,iBAAmBP,EAACS,EAAA,CAAQ,UAAW3B,EAAgBU,CAAI,EAAG,EAC1E,CAACe,EAAY,iBAAmBA,EAAY,cACxCG,EAAA,CAAQ,UAAW5B,EAAgBU,CAAI,CAAA,CAAG,CAAA,CAAA,CAAA,CAI1D,CAAA,CAAA,EAGT,OAAKM,IAEA,MAAA,CAAI,UAAU,mBACX,SAAAE,EAACW,GAAgB,MAAAxB,EAAO,YAAAC,EAAa,aAAAC,EAAc,kBAAAC,EAAmB,QAASM,EAC1E,WACL,EACJ,IANuB,MAAA,CAAI,UAAU,aAAc,SAAAG,EAAS,CAQpE,CAGO,SAASa,EAAW,CAAE,GAAGnB,GAA0B,CACtD,MAAMoB,EAAQC,EAAyB,CAAE,SAAUrB,EAAM,WAAY,EACrE,OACIO,EAACf,EAAA,CACG,kBAAmB4B,EAAM,WACzB,WAAYA,EAAM,MAAM,MACxB,WAAYA,EAAM,cAAgBpB,EAAM,WACxC,SAAU,IAAMoB,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK,EACrD,OAAQA,EAAM,WACb,GAAGpB,CAAA,CAAA,CAGhB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,Fragment as F,jsxs as d}from"react/jsx-runtime";import{parseAbsolute as H,getLocalTimeZone as V}from"@internationalized/date";import{createContext as Re,useState as D,useMemo as B,useEffect as X,useContext as ze,useRef as he}from"react";import{Button as y}from"./button.js";import{useSensors as Me,useSensor as le,PointerSensor as Le,KeyboardSensor as _e,DndContext as $e,closestCenter as qe,DragOverlay as Ee}from"@dnd-kit/core";import{sortableKeyboardCoordinates as je,SortableContext as ke,verticalListSortingStrategy as He,arrayMove as Ve,useSortable as Be}from"@dnd-kit/sortable";import{CSS as Ke}from"@dnd-kit/utilities";import{useQuery as Qe,useInfiniteQuery as Ge}from"@tanstack/react-query";import{createColumnHelper as ve,useReactTable as Ue,getCoreRowModel as Ze,flexRender as U}from"@tanstack/react-table";import{useLocalStorage as K}from"@uidotdev/usehooks";import{merge as Xe}from"lodash-es";import{Badge as se}from"./badge.js";import{DatePicker as Q}from"./date-picker.js";import{EasyMenu as O,MenuItem as A}from"./menu.js";import{MultiSelect as Ye}from"./multi-select.js";import{NumberField as Je}from"./numberfield.js";import{PopoverTrigger as We,Popover as et}from"./popover.js";import{TextField as tt}from"./textfield.js";import{formatDate as E}from"../utilities/date.js";import{useResourceFormatter as Y,ALL_OS as nt,useProjectName as rt}from"../utilities/resources.js";import{classNames as C}from"../utilities/theme.js";import{IcInfo as at,IcMoreVertical as ot,IcRefresh as it,IcMenu as lt,IcLayoutGrid as st,IcColumns as ct,IcGrip as ut,IcFirst as dt,IcLeft as mt,IcRight as gt,IcLast as pt,IcSortAsc as ft,IcSortDesc as bt,IcSortNone as ht,IcCheck as ce,IcMinus as vt,IcAccount as St,IcLicense as yt,IcDate as wt,IcFile as Nt,IcFilter as xt}from"./icons.js";import{MultipleIdSearchInput as Ct}from"./id-search.js";import{Loader as Se}from"./loader.js";import{SearchField as It}from"./searchfield.js";import{Table as Pt,TableHeader as Tt,TableRow as ue,TableHead as At,TableBody as Dt,TableCell as Ft}from"./table.js";import{CountryName as Ot}from"../utilities/countries.js";import{Duration as Rt}from"../utilities/duration.js";import{formatDays as zt,formatFilesize as Mt,formatNumber as Lt}from"../utilities/numbers.js";import{Checkbox as de}from"./checkbox.js";import{TooltipTrigger as _t,Tooltip as $t}from"./tooltip.js";import{getSubscriptionStartTriggerLabel as qt,ALL_LICENSE_TYPES as Et}from"./select-options.js";import{useCtxClient as jt}from"../utilities/ctx-client.js";import{ControlledDialogProvider as kt,useControlledDialog as ye}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 Ht(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const we=ve(),Vt=[we.accessor("checkbox",{header:({table:e})=>t(de,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all",size:"sm"}),cell:({row:e})=>t(de,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row",size:"sm"}),enableSorting:!1,enableHiding:!1})],I="TableActions";function Bt(e){return e.length===0?[]:[we.accessor(I,{header:"Actions",id:I,enableHiding:!1,cell:({row:a})=>t(Wt,{label:t(ot,{}),data:a.original,items:e}),enableSorting:!1})]}function rr(){return ve()}function ar({path:e,pathParameters:a,columns:n,filterConfig:l,columnsToHideByDefault:c={},allowSelection:r=!1,initialFilters:o=[],previewFilters:i,tableActions:u,Card:m,onRowNavigate:v}){const[b,x]=D({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:R,pagination:P}=b,[$,g]=D(""),[p,f]=D({}),[S,q]=D(o),z=B(()=>S.filter(s=>s.active!==!1).map(s=>s.operator==="between"&&Array.isArray(s.value)&&s.value.length===2?{[s.property]:{gte:s.value[0],lte:s.value[1]}}:Array.isArray(s.value)?{[s.property]:{[s.operator]:s.value.join(",")}}:{[s.property]:{[s.operator]:s.value}}).reduce((s,h)=>Xe(s,h),{}),[S]),j={...S,page:P.pageIndex+1,limit:P.pageSize,sort:Ht(R[0]),search:$},Ie=jt(),M=["get",e,j],[W,ee]=K(`${M.join("")}_ctx_column_order_preference`,[]),[te,Pe]=K(`${M.join("")}_ctx_column_visibility_preference`,{id:!1,...c}),[T,Te]=K(`${M.join("")}_ctx_view_mode_preference`,"table"),k=s=>{x(h=>({...h,...s}))};async function ne(s){const h=await Ie.GET(e,{params:{query:{page:s,limit:P.pageSize,sort:j.sort,search:j.search,...z},path:a}});return{data:h.data??[],total:Number.parseInt(h.response.headers.get("Pagination-Count")||"0"),nextPage:s+1}}const L=Qe({queryKey:[...M,"table"],enabled:T==="table",queryFn:()=>ne(P.pageIndex+1)}),w=Ge({queryKey:[...M,"card"],enabled:T==="card",initialPageParam:1,queryFn:({pageParam:s})=>ne(s),getNextPageParam:(s,h)=>h.flatMap(Oe=>Oe.data).length<s.total?s.nextPage:void 0}),re=B(()=>T==="table"?L.data?.data??[]:w.data?.pages.flatMap(s=>s.data)??[],[T,L.data,w.data]),ae=B(()=>T==="table"?L.data?.total??0:w.data?.pages[0]?.total??0,[T,L.data,w.data]),oe=T==="table"?L:{...w,data:{data:re,total:ae},isLoading:w.isLoading,isFetching:w.isFetching,isError:w.isError,error:w.error,refetch:w.refetch},Ae=u.filter(J),De=[...r?Vt:[],...n,...Bt(Ae??[])];function Fe(s){return typeof s=="function"}function _(s,h){return Fe(s)?s(h):s}const ie=Ue({data:re,columns:De,getCoreRowModel:Ze(),rowCount:ae,manualPagination:!0,onPaginationChange:s=>{k({pagination:_(s,P)})},manualSorting:!0,onSortingChange:s=>{f({}),k({sorting:[..._(s,R)]})},manualFiltering:!0,onColumnVisibilityChange:s=>{Pe(_(s,te))},onRowSelectionChange:s=>{f(_(s,p))},onColumnOrderChange:s=>{ee(_(s,W))},state:{sorting:R,columnVisibility:te,pagination:P,rowSelection:p,columnOrder:W},meta:{refetch:oe.refetch}});return X(()=>{const s=ie.getAllLeafColumns();ee([...s.filter(h=>h.id!==I).map(h=>h.id),...s.filter(h=>h.id===I).map(h=>h.id)])},[]),{tableState:b,updateTableState:k,query:oe,setSearchQuery:g,searchQuery:$,tanTable:ie,mergedFilters:z,filters:S,setFilters:q,filterConfig:l,tableActions:u,pathParameters:a,viewMode:T,setViewMode:Te,Card:m,allowSelection:r,previewFilters:i,infiniteQuery:w,onRowNavigate:v}}const Ne=Re(null);function N(){const e=ze(Ne);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function or({children:e,...a}){return t(Ne.Provider,{value:a,children:e})}function ir({className:e,...a}){const{query:n,tanTable:l,viewMode:c,tableActions:r,Card:o}=N(),i=r.filter(J);return t(F,{children:d(kt,{children:[t(Zt,{}),d("section",{...a,className:C(`z-20 flex flex-col ${c==="table"?"bg-elevation-1 border rounded-md":""}`,e),children:[d("div",{className:"w-full overflow-auto h-table relative rounded-md [scrollbar-width:none]",tabIndex:0,children:[n.isLoading&&t(me,{className:"cursor-wait",children:t(Se,{})}),!n.isLoading&&l.getRowModel().rows.length===0&&t(me,{className:"cursor-not-allowed",children:!n.isFetching&&(n.isError?d("span",{className:"flex gap-3 justify-center items-center",children:[t(at,{}),t("span",{children:n.error?.message})]}):n.data?.data?.length===0?t(F,{children:"No results found."}):t(F,{children:"Unknown error. Please contact customer support."}))}),!n.isLoading&&l.getRowModel().rows.length!==0&&(c==="card"&&o?t(Kt,{Card:o,actions:i}):t(Yt,{className:"w-full"}))]}),c==="table"&&d("div",{className:"flex w-full justify-between border-t gap-icon p-icon overflow-x-auto",children:[d("div",{className:"flex gap-icon",children:[t(Qt,{}),t(Ut,{})]}),t(Gt,{})]})]})]})})}function Kt({Card:e,actions:a}){const{tanTable:n,allowSelection:l}=N(),{infiniteQuery:c}=N(),r=he(null);return X(()=>{const o=r.current;if(!o)return;const i=new IntersectionObserver(u=>{u[0].isIntersecting&&c.hasNextPage&&!c.isFetchingNextPage&&c.fetchNextPage()},{threshold:.1});return i.observe(o),()=>i.disconnect()},[c.hasNextPage,c.isFetchingNextPage]),d("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-2",children:[n.getRowModel().rows.map(o=>{const i={isSelected:o.getIsSelected(),onToggle:()=>o.toggleSelected(),allowSelection:l};return t("div",{children:e(o.original,a,i)},o.id)}),t("div",{ref:r,className:"col-span-full h-4 flex items-center justify-center",children:c.isFetchingNextPage&&t(Se,{})})]})}function me({children:e,className:a}){return d(F,{children:[t("span",{className:C(a,"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 Qt(){const{tanTable:e}=N(),[a,n]=D(null),l=Y(),c=Me(le(Le),le(_e,{coordinateGetter:je}));return t($e,{sensors:c,collisionDetection:qe,onDragStart:o=>{const{active:i}=o;n(i.id.toString())},onDragEnd:o=>{const{active:i,over:u}=o;if(u&&i.id!==u.id){const m=e.getState().columnOrder,v=m.indexOf(i.id.toString()),b=m.indexOf(u.id.toString());e.setColumnOrder([...Ve(m,v,b)])}n(null)},children:d(ke,{items:e.getState().columnOrder,strategy:He,children:[d(O,{label:d(F,{children:[t(ct,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(o=>o.id),children:[t(A,{onAction:()=>e.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),e.getState().columnOrder.map(o=>{const i=e.getAllFlatColumns().find(u=>u.id===o);return!i||i.id==="checkbox"||i.id===I?null:t(r,{column:i},i.id)})]}),t(Ee,{children:a?t("div",{className:"opacity-70 border-2 border-primary",children:l(a)}):null})]})});function r({column:o}){const{attributes:i,listeners:u,setNodeRef:m,transform:v,transition:b}=Be({id:o.id}),x={transform:Ke.Transform.toString(v),transition:b,zIndex:"999"};return d(A,{ref:m,style:x,...i,id:o.id,onAction:()=>o.toggleVisibility(),isDisabled:!o.getCanHide(),className:"flex items-center",children:[t(ut,{...u,className:"size-icon cursor-grab"}),Z(o),o.getIsSorted()&&t(xe,{className:"size-icon",direction:o.getIsSorted()})]})}}function Gt(){const{tanTable:e}=N(),a=e.getRowCount();return d("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()}`}),t(y,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(dt,{})}),t(y,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(mt,{})}),t(y,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(gt,{})}),t(y,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(pt,{})})]})}function Ut(){const{tanTable:e}=N(),a=[10,20,30,40,50];return t(O,{label:e.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[e.getState().pagination.pageSize.toString()],items:a.map(n=>({id:n.toString(),value:n})),children:n=>t(A,{onAction:()=>e.setPageSize(n.value),children:n.value})})}function Zt(){const{query:e,tanTable:a,searchQuery:n,setSearchQuery:l,tableActions:c,viewMode:r,setViewMode:o,Card:i,previewFilters:u}=N(),m=a.getSelectedRowModel().rows.length>0,v=c.filter(b=>b.resourceType!=="single").filter(b=>b.resourceType==="multiple"===m);return d("section",{className:"flex justify-between my-0 mb-icon gap-icon overflow-x-auto py-1",children:[d("div",{className:"flex gap-icon",children:[t(y,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",children:t(it,{})}),t(It,{value:n,onChange:l}),t(an,{previewFilters:u})]}),d("div",{className:"flex gap-icon",children:[t(Jt,{items:v,isFetching:e.isFetching}),i&&d("div",{className:"flex gap-1 bg-elevation-1 rounded-md overflow-hidden",children:[t(y,{variant:r==="table"?"primary":"neutral",size:"icon",onPress:()=>o("table"),"aria-label":"Table view",className:"border-none",children:t(lt,{})}),t(y,{variant:r==="card"?"primary":"neutral",size:"icon",onPress:()=>o("card"),"aria-label":"Card view",className:"border-none",children:t(st,{})})]})]})]})}function xe({direction:e,...a}){return e==="asc"?t(ft,{className:"size-3.5",...a}):e==="desc"?t(bt,{className:"size-3.5",...a}):t(ht,{className:"size-3.5",...a})}function Z(e){const a=Y(),n=e.columnDef.header;return typeof n=="string"?n:a(e.id)}function Xt(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:E(n)});case"number":return t("span",{className:"block text-right tabular-nums",children:Lt(n)});case"boolean":return t(se,{variant:n?"success":"destructive",className:"w-full capitalize",children:String(n)});case"badge":return t(se,{className:"w-full",children:String(n)});case"country":return t(Ot,{value:n});case"enum":return t("span",{className:"uppercase w-full",children:String(n)});case"fileSize":return Mt(n);case"days":return zt(n);case"os":return nt[n]??n;case"licenseType":return Et[n]??n;case"subscriptionInterval":return Rt.formatISODuration(n);case"subscriptionStartTrigger":return qt(n);default:return String(n)}}function ge({header:e}){const a=e.column.columnDef.header;return typeof a=="string"||!a?Z(e.column):typeof a=="function"?typeof a(e.getContext())=="string"?Z(e.column):U(a,e.getContext()):U(a,e.getContext())}function Yt({className:e}){const{tanTable:a,onRowNavigate:n}=N(),l=(c,r,o="z-50")=>C("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",c&&`bg-elevation-1 sticky right-0 ${o} text-center justify-center`,r);return d(Pt,{className:C("table-auto border-0 rounded-md",e),children:[t(Tt,{className:"sticky top-0 z-10 rounded-md",children:a.getHeaderGroups().map(c=>t(ue,{children:c.headers.map(r=>d(At,{scope:"col",colSpan:r.colSpan,className:l(r.id===I,"bg-elevation-1"),children:[!r.column.getCanSort()&&!r.isPlaceholder&&t("div",{className:C("w-full py-1 inline-flex items-center gap-1 body-sm",r.id===I?"justify-center":"justify-start"),children:t(ge,{header:r})}),r.column.getCanSort()&&d(y,{variant:"ghost",className:C("w-full p-1",r.id===I?"justify-center":"justify-start"),onPress:r.column.getToggleSortingHandler(),children:[t("span",{children:t(ge,{header:r})}),t(xe,{direction:r.column.getIsSorted()})]})]},r.id))},c.id))}),t(Dt,{children:a.getRowModel().rows.map(c=>t(ue,{className:C("transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20",n&&"cursor-pointer focus-visible:outline focus-visible:outline-2 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 o=r.column.id===I,i=r.column.columnDef.meta?.displayType?Xt(r):U(r.column.columnDef.cell,r.getContext());return t(Ft,{className:C(l(o,void 0,"z-1"),o&&"flex justify-center items-center"),children:i},r.id)})},c.id))})]})}function pe(e){return e.resourceType==="none"}function J(e){return e.resourceType==="single"}function fe(e){return e.resourceType==="multiple"}function Jt({items:e,isFetching:a}){const{openDialog:n,closeDialog:l}=ye(),{tanTable:c}=N();function r(i,u){return i.isDisabled?pe(i)?i.isDisabled():fe(i)?i.isDisabled(u):!1:!1}const o=c.getSelectedRowModel().rows.map(i=>i.original);return t(F,{children:e.map((i,u)=>{const m=i.icon,v=r(i,o)||a;return d(y,{"aria-label":i.label,type:"button",isDisabled:v,className:"animate-in fade-in slide-in-from-right-15 duration-300 transition-transform",onPress:b=>{const x={event:b,openDialog:n,closeDialog:l};pe(i)?i.onPress(x):fe(i)&&i.onPress({...x,data:o})},variant:i.variant??"neutral",children:[m&&t(m,{"aria-hidden":!0}),t("span",{children:i.label})]},`${i.label}-${u}`)})})}function Wt({label:e,items:a,data:n}){const{openDialog:l,closeDialog:c}=ye();return a.length<4?t("div",{className:"flex items-center gap-2",children:a.map((r,o)=>{const i=r.icon,u=typeof r.label=="function"?r.label(n):r.label;return d(_t,{children:[t(y,{"aria-label":typeof u=="string"?u:void 0,isDisabled:r.isDisabled?.(n)??!1,variant:"ghost",size:"icon",onPress:()=>{const m={openDialog:l,closeDialog:c};r.onPress({...m,data:n})},children:t(i,{className:"size-icon"})}),t($t,{children:u})]},`${o}-${typeof u=="string"?u:""}`)})}):t(O,{"aria-label":"Actions",label:e,size:"icon",children:a.map((r,o)=>{const i=r.icon,u=typeof r.label=="function"?r.label(n):r.label;return d(A,{id:typeof u=="string"?u:void 0,isDisabled:r.isDisabled?.(n)??!1,onAction:()=>{const m={openDialog:l,closeDialog:c};J(r)&&r.onPress({...m,data:n})},children:[t(i,{className:"size-icon"}),u]},`${o}-${typeof u=="string"?u:""}`)})})}const lr=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte","between"],be={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"},en={eq:"=",ne:"≠",cn:"contains",nc:"!contains",sw:"starts with",ew:"ends with",in:"in",nin:"not in",gt:">",gte:"≥",lt:"<",lte:"≤",between:"↔"};function G(e,a){const n=`${a}-${Date.now()}`,l=Ce[e][0];switch(e){case"bool":return{id:n,type:e,property:a,operator:l,value:!0};case"string":return{id:n,type:e,property:a,operator:l,value:""};case"date":return{id:n,type:e,property:a,operator:l,value:l==="between"?[new Date().toISOString(),new Date().toISOString()]:new Date().toISOString()};case"id":return{id:n,type:e,property:a,operator:l,value:""};case"id-search":return{id:n,type:e,property:a,operator:l,value:[]};case"enum":return{id:n,type:e,property:a,operator:l,value:new Set};case"number":return{id:n,type:e,property:a,operator:l,value:0}}}const Ce={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 tn(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[a,n]=e.value;return`${E(a,{dateStyle:"short"})??""} – ${E(n,{dateStyle:"short"})??""}`}return e.value?E(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,pathParameters:n,onChange:l}){if(e.type==="string"||e.type==="id")return t(tt,{autoFocus:!0,value:e.value??"",onChange:l,"aria-label":"Filter value"});if(e.type==="number")return t(Je,{autoFocus:!0,value:e.value,onChange:l,"aria-label":"Filter value"});if(e.type==="bool")return d(O,{autoFocus:!0,label:e.value?"True":"False",variant:"neutral","aria-label":"Filter value",children:[t(A,{onAction:()=>l(!0),children:"True"}),t(A,{onAction:()=>l(!1),children:"False"})]});if(e.type==="date"){if(e.operator==="between"){const[r,o]=Array.isArray(e.value)?e.value:[new Date().toISOString(),new Date().toISOString()],i=H(r,V()),u=H(o,V());return d("div",{className:"flex flex-col gap-icon",children:[t(Q,{autoFocus:!0,hideTimeZone:!0,label:"From",value:i,onChange:m=>l([m?m.toAbsoluteString():r,o])}),t(Q,{hideTimeZone:!0,label:"To",value:u,onChange:m=>l([r,m?m.toAbsoluteString():o])})]})}const c=e.value&&!Array.isArray(e.value)?H(e.value,V()):null;return t(Q,{autoFocus:!0,hideTimeZone:!0,value:c,onChange:r=>l(r?r.toAbsoluteString():new Date().toISOString()),"aria-label":"Filter date"})}if(e.type==="enum"){const c=a[e.property];return c.type!=="enum"?null:t(Ye,{autoFocus:!0,items:c.options,value:e.value??new Set,onChange:l,"aria-label":"Filter value"})}if(e.type==="id-search"){const c=a[e.property];if(c.type!=="id-search")return null;const r=n?{path:n,query:{}}:void 0;return t(Ct,{autoFocus:!0,path:c.path,accessor:c.accessor,defaultParams:r,value:e.value??[],onChange:l,"aria-label":"Filter value"})}return null}function rn({filter:e,filterConfig:a,pathParameters:n,resourceFormatter:l,onRemove:c,onUpdate:r,isOpen:o,onOpenChange:i}){const u=Ce[e.type],m=tn(e),v=rt();return d(We,{isOpen:o,onOpenChange:i,children:[t("div",{className:"relative",children:d(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:l(e.property)}),v!=="customer-portal"&&t("span",{children:en[e.operator]}),v!=="customer-portal"&&m&&t("span",{children:m}),e.active!==!1&&t("span",{className:"size-2 z-100 rounded-full bg-primary ms-1"})]})}),t(et,{className:"p-icon min-w-48",children:d("div",{className:"flex flex-col gap-icon",children:[u.length>1&&t(O,{label:be[e.operator],variant:"neutral","aria-label":"Change operator",children:u.map(b=>t(A,{onAction:()=>r({operator:b}),children:be[b]},b))}),t(nn,{filter:e,filterConfig:a,pathParameters:n,onChange:b=>r({value:b})}),t(y,{type:"button",variant:"neutral",className:"self-end",onPress:c,"aria-label":`Remove ${l(e.property)} filter`,children:"Clear"})]})})]})}function an({className:e,previewFilters:a,...n}){const{filters:l,query:c,setFilters:r,filterConfig:o,pathParameters:i}=N(),u=Y(),m=Object.keys(o).filter(g=>!l.some(p=>p.property===g)).sort(),[v,b]=D(null),x=he(!1);X(()=>{if(!x.current&&l.length===0){const g=[];a&&a.length>0&&g.push(...a.filter(p=>o[p]).map(p=>({...G(o[p].type,p),active:!1,isPreview:!0}))),g.length>0&&r(g)}x.current=!0},[]);const R=(g,p)=>{const f=G(g,p);r([...l,f]),b(f.id)},P=g=>{l.find(f=>f.id===g)?.isPreview?r(l.map(f=>f.id===g?{...G(o[f.property].type,f.property),active:!1,isPreview:!0}:f)):r(l.filter(f=>f.id!==g))},$=(g,p)=>{r(l.map(f=>{if(f.id!==g)return f;let S=p.value!==void 0?p.value:f.value;const q=p.operator??f.operator;if(f.type==="date"&&p.operator!==void 0)if(q==="between"&&!Array.isArray(S)){const z=typeof S=="string"?S:new Date().toISOString();S=[z,z]}else q!=="between"&&Array.isArray(S)&&(S=S[0]??new Date().toISOString());return{...f,...p,value:S,active:!0}}))};return d("section",{...n,className:C("flex flex-wrap gap-icon items-center",e),children:[l.map(g=>t(rn,{filter:g,filterConfig:o,pathParameters:i,resourceFormatter:u,onRemove:()=>P(g.id),onUpdate:p=>$(g.id,p),isOpen:v===g.id,onOpenChange:p=>b(p?g.id:null)},g.id)),m.length>0&&t(O,{label:t(xt,{}),isDisabled:c.isPending,variant:"neutral","aria-label":"Add filter",children:m.map(g=>{const p=o[g].type,f=on[p];return d(A,{className:"!justify-between",onAction:()=>R(p,g),children:[u(g),t(f,{})]},g)})})]})}const on={"id-search":Nt,bool:ce,date:wt,enum:yt,id:St,number:vt,string:ce};export{be as C,an as D,ir as DataTable,Ne as DataTableContext,or as DataTableProvider,lr as F,rr as getColumnHelper,N as useDataTable,ar as useDataTableState};
|
|
1
|
+
"use client";import{jsx as t,Fragment as F,jsxs as d}from"react/jsx-runtime";import{parseAbsolute as H,getLocalTimeZone as V}from"@internationalized/date";import{createContext as ze,useState as O,useMemo as B,useEffect as X,useContext as Me,useRef as ve}from"react";import{Button as y}from"./button.js";import{useSensors as Le,useSensor as le,PointerSensor as _e,KeyboardSensor as je,DndContext as $e,closestCenter as qe,DragOverlay as Ee}from"@dnd-kit/core";import{sortableKeyboardCoordinates as ke,SortableContext as He,verticalListSortingStrategy as Ve,arrayMove as Be,useSortable as Ke}from"@dnd-kit/sortable";import{CSS as Qe}from"@dnd-kit/utilities";import{useQuery as Ge,useInfiniteQuery as Ue}from"@tanstack/react-query";import{createColumnHelper as Se,useReactTable as Ze,getCoreRowModel as Xe,flexRender as U}from"@tanstack/react-table";import{useLocalStorage as K}from"@uidotdev/usehooks";import{merge as Ye}from"lodash-es";import{Badge as ce}from"./badge.js";import{DatePicker as Q}from"./date-picker.js";import{EasyMenu as R,MenuItem as A}from"./menu.js";import{MultiSelect as Je}from"./multi-select.js";import{NumberField as We}from"./numberfield.js";import{PopoverTrigger as et,Popover as tt}from"./popover.js";import{TextField as nt}from"./textfield.js";import{formatDate as q}from"../utilities/date.js";import{useProjectName as Y,useResourceFormatter as J,ALL_OS as rt}from"../utilities/resources.js";import{classNames as I}from"../utilities/theme.js";import{IcInfo as at,IcMoreVertical as ot,IcRefresh as it,IcMenu as st,IcLayoutGrid as lt,IcColumns as ct,IcGrip as ut,IcFirst as dt,IcLeft as mt,IcRight as gt,IcLast as pt,IcSortAsc as ft,IcSortDesc as bt,IcSortNone as ht,IcCheck as ue,IcMinus as vt,IcAccount as St,IcLicense as yt,IcDate as wt,IcFile as xt,IcFilter as Nt}from"./icons.js";import{MultipleIdSearchInput as Ct}from"./id-search.js";import{Loader as ye}from"./loader.js";import{SearchField as It}from"./searchfield.js";import{Table as Pt,TableHeader as Tt,TableRow as de,TableHead as At,TableBody as Dt,TableCell as Ft}from"./table.js";import{CountryName as Ot}from"../utilities/countries.js";import{Duration as Rt}from"../utilities/duration.js";import{formatDays as zt,formatFilesize as Mt,formatNumber as Lt}from"../utilities/numbers.js";import{Checkbox as me}from"./checkbox.js";import{TooltipTrigger as _t,Tooltip as jt}from"./tooltip.js";import{getSubscriptionStartTriggerLabel as $t,ALL_LICENSE_TYPES as qt}from"./select-options.js";import{useCtxClient as Et}from"../utilities/ctx-client.js";import{ControlledDialogProvider as kt,useControlledDialog as we}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 Ht(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const xe=Se(),Vt=[xe.accessor("checkbox",{header:({table:e})=>t(me,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all",size:"sm"}),cell:({row:e})=>t(me,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row",size:"sm"}),enableSorting:!1,enableHiding:!1})],N="TableActions";function Bt(e){return e.length===0?[]:[xe.accessor(N,{header:"Actions",id:N,enableHiding:!1,cell:({row:r})=>t(Wt,{label:t(ot,{}),data:r.original,items:e}),enableSorting:!1})]}function rr(){return Se()}function ar({path:e,pathParameters:r,columns:a,filterConfig:i,columnsToHideByDefault:l={},allowSelection:n=!1,initialFilters:c=[],previewFilters:o,tableActions:u,Card:m,onRowNavigate:v}){const[b,w]=O({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:D,pagination:P}=b,[j,g]=O(""),[p,f]=O({}),[S,$]=O(c),z=B(()=>S.filter(s=>s.active!==!1).map(s=>s.operator==="between"&&Array.isArray(s.value)&&s.value.length===2?{[s.property]:{gte:s.value[0],lte:s.value[1]}}:Array.isArray(s.value)?{[s.property]:{[s.operator]:s.value.join(",")}}:{[s.property]:{[s.operator]:s.value}}).reduce((s,h)=>Ye(s,h),{}),[S]),E={...S,page:P.pageIndex+1,limit:P.pageSize,sort:Ht(D[0]),search:j},Pe=Et(),M=["get",e,E],[ee,te]=K(`${M.join("")}_ctx_column_order_preference`,[]),[ne,Te]=K(`${M.join("")}_ctx_column_visibility_preference`,{id:!1,...l}),[T,Ae]=K(`${M.join("")}_ctx_view_mode_preference`,"table"),k=s=>{w(h=>({...h,...s}))};async function re(s){const h=await Pe.GET(e,{params:{query:{page:s,limit:P.pageSize,sort:E.sort,search:E.search,...z},path:r}});return{data:h.data??[],total:Number.parseInt(h.response.headers.get("Pagination-Count")||"0"),nextPage:s+1}}const L=Ge({queryKey:[...M,"table"],enabled:T==="table",queryFn:()=>re(P.pageIndex+1)}),x=Ue({queryKey:[...M,"card"],enabled:T==="card",initialPageParam:1,queryFn:({pageParam:s})=>re(s),getNextPageParam:(s,h)=>h.flatMap(Re=>Re.data).length<s.total?s.nextPage:void 0}),ae=B(()=>T==="table"?L.data?.data??[]:x.data?.pages.flatMap(s=>s.data)??[],[T,L.data,x.data]),oe=B(()=>T==="table"?L.data?.total??0:x.data?.pages[0]?.total??0,[T,L.data,x.data]),ie=T==="table"?L:{...x,data:{data:ae,total:oe},isLoading:x.isLoading,isFetching:x.isFetching,isError:x.isError,error:x.error,refetch:x.refetch},De=u.filter(W),Fe=[...n?Vt:[],...a,...Bt(De??[])];function Oe(s){return typeof s=="function"}function _(s,h){return Oe(s)?s(h):s}const se=Ze({data:ae,columns:Fe,getCoreRowModel:Xe(),rowCount:oe,manualPagination:!0,onPaginationChange:s=>{k({pagination:_(s,P)})},manualSorting:!0,onSortingChange:s=>{f({}),k({sorting:[..._(s,D)]})},manualFiltering:!0,onColumnVisibilityChange:s=>{Te(_(s,ne))},onRowSelectionChange:s=>{f(_(s,p))},onColumnOrderChange:s=>{te(_(s,ee))},state:{sorting:D,columnVisibility:ne,pagination:P,rowSelection:p,columnOrder:ee},meta:{refetch:ie.refetch}});return X(()=>{const s=se.getAllLeafColumns();te([...s.filter(h=>h.id!==N).map(h=>h.id),...s.filter(h=>h.id===N).map(h=>h.id)])},[]),{tableState:b,updateTableState:k,query:ie,setSearchQuery:g,searchQuery:j,tanTable:se,mergedFilters:z,filters:S,setFilters:$,filterConfig:i,tableActions:u,pathParameters:r,viewMode:T,setViewMode:Ae,Card:m,allowSelection:n,previewFilters:o,infiniteQuery:x,onRowNavigate:v}}const Ne=ze(null);function C(){const e=Me(Ne);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function or({children:e,...r}){return t(Ne.Provider,{value:r,children:e})}function ir({className:e,...r}){const{query:a,tanTable:i,viewMode:l,tableActions:n,Card:c}=C(),o=n.filter(W);return t(F,{children:d(kt,{children:[t(Zt,{}),d("section",{...r,className:I(`z-20 flex flex-col ${l==="table"?"border rounded-md":""}`,e),children:[d("div",{className:"w-full overflow-auto relative rounded-md [scrollbar-width:none]",tabIndex:0,children:[a.isLoading&&t(ge,{className:"cursor-wait",children:t(ye,{})}),!a.isLoading&&i.getRowModel().rows.length===0&&t(ge,{className:"cursor-not-allowed",children:!a.isFetching&&(a.isError?d("span",{className:"flex gap-3 justify-center items-center",children:[t(at,{}),t("span",{children:a.error?.message})]}):a.data?.data?.length===0?t(F,{children:"No results found."}):t(F,{children:"Unknown error. Please contact customer support."}))}),!a.isLoading&&i.getRowModel().rows.length!==0&&(l==="card"&&c?t(Kt,{Card:c,actions:o}):t(Yt,{className:"w-full"}))]}),l==="table"&&d("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:[d("div",{className:"flex gap-icon",children:[t(Qt,{}),t(Ut,{})]}),t(Gt,{})]})]})]})})}function Kt({Card:e,actions:r}){const{tanTable:a,allowSelection:i}=C(),{infiniteQuery:l}=C(),n=ve(null);return X(()=>{const c=n.current;if(!c)return;const o=new IntersectionObserver(u=>{u[0].isIntersecting&&l.hasNextPage&&!l.isFetchingNextPage&&l.fetchNextPage()},{threshold:.1});return o.observe(c),()=>o.disconnect()},[l.hasNextPage,l.isFetchingNextPage]),d("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-2",children:[a.getRowModel().rows.map(c=>{const o={isSelected:c.getIsSelected(),onToggle:()=>c.toggleSelected(),allowSelection:i};return t("div",{children:e(c.original,r,o)},c.id)}),t("div",{ref:n,className:"col-span-full h-4 flex items-center justify-center",children:l.isFetchingNextPage&&t(ye,{})})]})}function ge({children:e,className:r}){return d(F,{children:[t("span",{className:I(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 Qt(){if(Y()==="customer-portal")return null;const{tanTable:r}=C(),[a,i]=O(null),l=J(),n=Le(le(_e),le(je,{coordinateGetter:ke}));return t($e,{sensors:n,collisionDetection:qe,onDragStart:o=>{const{active:u}=o;i(u.id.toString())},onDragEnd:o=>{const{active:u,over:m}=o;if(m&&u.id!==m.id){const v=r.getState().columnOrder,b=v.indexOf(u.id.toString()),w=v.indexOf(m.id.toString());r.setColumnOrder([...Be(v,b,w)])}i(null)},children:d(He,{items:r.getState().columnOrder,strategy:Ve,children:[d(R,{label:d(F,{children:[t(ct,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",size:"sm",items:r.getAllFlatColumns(),selectedKeys:r.getVisibleFlatColumns().map(o=>o.id),children:[t(A,{onAction:()=>r.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),r.getState().columnOrder.map(o=>{const u=r.getAllFlatColumns().find(m=>m.id===o);return!u||u.id==="checkbox"||u.id===N?null:t(c,{column:u},u.id)})]}),t(Ee,{children:a?t("div",{className:"opacity-70 border-2 border-primary",children:l(a)}):null})]})});function c({column:o}){const{attributes:u,listeners:m,setNodeRef:v,transform:b,transition:w}=Ke({id:o.id}),D={transform:Qe.Transform.toString(b),transition:w,zIndex:"999"};return d(A,{ref:v,style:D,...u,id:o.id,onAction:()=>o.toggleVisibility(),isDisabled:!o.getCanHide(),className:"flex items-center",children:[t(ut,{...m,className:"size-icon cursor-grab"}),Z(o),o.getIsSorted()&&t(Ce,{className:"size-icon",direction:o.getIsSorted()})]})}}function Gt(){const{tanTable:e}=C(),r=e.getRowCount();return d("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()}`}),(e.getCanNextPage()||e.getCanPreviousPage())&&d(F,{children:[t(y,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon-sm",children:t(dt,{})}),t(y,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon-sm",children:t(mt,{})}),t(y,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon-sm",children:t(gt,{})}),t(y,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon-sm",children:t(pt,{})})]})]})}function Ut(){if(Y()==="customer-portal")return null;const{tanTable:r}=C(),a=[10,20,30,40,50];return t(R,{label:r.getState().pagination.pageSize.toString(),selectionMode:"single",size:"sm",selectedKeys:[r.getState().pagination.pageSize.toString()],items:a.map(i=>({id:i.toString(),value:i})),children:i=>t(A,{onAction:()=>r.setPageSize(i.value),children:i.value})})}function Zt(){const{query:e,tanTable:r,searchQuery:a,setSearchQuery:i,tableActions:l,viewMode:n,setViewMode:c,Card:o,previewFilters:u}=C(),m=r.getSelectedRowModel().rows.length>0,v=l.filter(b=>b.resourceType!=="single").filter(b=>b.resourceType==="multiple"===m);return d("section",{className:"flex justify-between my-0 mb-icon gap-icon overflow-x-auto py-1",children:[d("div",{className:"flex gap-icon",children:[t(y,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",children:t(it,{})}),t(It,{value:a,onChange:i}),t(an,{previewFilters:u})]}),d("div",{className:"flex gap-icon",children:[t(Jt,{items:v,isFetching:e.isFetching}),o&&d("div",{className:"flex gap-1 bg-elevation-1 rounded-md overflow-hidden",children:[t(y,{variant:n==="table"?"primary":"neutral",size:"icon",onPress:()=>c("table"),"aria-label":"Table view",className:"border-none",children:t(st,{})}),t(y,{variant:n==="card"?"primary":"neutral",size:"icon",onPress:()=>c("card"),"aria-label":"Card view",className:"border-none",children:t(lt,{})})]})]})]})}function Ce({direction:e,...r}){return e==="asc"?t(ft,{className:"size-3.5",...r}):e==="desc"?t(bt,{className:"size-3.5",...r}):t(ht,{className:"size-3.5",...r})}function Z(e){const r=J(),a=e.columnDef.header;return typeof a=="string"?a:r(e.id)}function Xt(e){const r=e.column.columnDef.meta?.displayType,a=e.getValue();if(a==null)return null;switch(r){case"date":return t("span",{className:"tabular-nums",children:q(a)});case"number":return t("span",{className:"block text-right tabular-nums",children:Lt(a)});case"boolean":return t(ce,{variant:a?"success":"destructive",className:"w-full capitalize",children:String(a)});case"badge":return t(ce,{className:"w-full",children:String(a)});case"country":return t(Ot,{value:a});case"enum":return t("span",{className:"uppercase w-full",children:String(a)});case"fileSize":return Mt(a);case"days":return zt(a);case"os":return rt[a]??a;case"licenseType":return qt[a]??a;case"subscriptionInterval":return Rt.formatISODuration(a);case"subscriptionStartTrigger":return $t(a);default:return String(a)}}function pe({header:e}){const r=e.column.columnDef.header;return typeof r=="string"||!r?Z(e.column):typeof r=="function"?typeof r(e.getContext())=="string"?Z(e.column):U(r,e.getContext()):U(r,e.getContext())}function Yt({className:e}){const{tanTable:r,onRowNavigate:a}=C(),i=(l,n,c="z-50")=>I("text-left body-sm font-medium whitespace-nowrap",l&&`sticky right-0 ${c} text-center justify-center`,n);return d(Pt,{className:I("table-auto border-0 rounded-md",e),children:[t(Tt,{className:"sticky top-0 z-10 rounded-md",children:r.getHeaderGroups().map(l=>t(de,{children:l.headers.map(n=>d(At,{scope:"col",colSpan:n.colSpan,className:i(n.id===N,(n.id===N,"bg-elevation-mid")),children:[!n.column.getCanSort()&&!n.isPlaceholder&&t("div",{className:I("w-full flex items-center gap-1 text-xs uppercase",n.id===N?"justify-center":"justify-start"),children:t(pe,{header:n})}),n.column.getCanSort()&&d(y,{variant:"ghost",size:"none",className:I("w-full p-1 rounded-md uppercase text-muted text-xs",n.id===N?"justify-center":"justify-start",n.column.getIsSorted()?"text-primary":""),onPress:n.column.getToggleSortingHandler(),children:[t("span",{children:t(pe,{header:n})}),n.column.getIsSorted()&&t(Ce,{direction:n.column.getIsSorted()})]})]},n.id))},l.id))}),t(Dt,{children:r.getRowModel().rows.map(l=>t(de,{className:I("transition-colors bg-elevation-1 data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20",a&&"cursor-pointer focus-visible:outline focus-visible:outline-ring"),"data-selected":l.getIsSelected(),...a&&{role:"link",tabIndex:0,onClick:n=>{n.target.closest('a, button, input, select, textarea, [role="button"]')||a(l.original)},onKeyDown:n=>{n.key==="Enter"&&a(l.original)}},children:l.getVisibleCells().map(n=>{const c=n.column.id===N,o=n.column.columnDef.meta?.displayType?Xt(n):U(n.column.columnDef.cell,n.getContext());return t(Ft,{className:I(i(c,c?"bg-elevation-1":"","z-1"),c&&"flex justify-center items-center"),children:o},n.id)})},l.id))})]})}function fe(e){return e.resourceType==="none"}function W(e){return e.resourceType==="single"}function be(e){return e.resourceType==="multiple"}function Jt({items:e,isFetching:r}){const{openDialog:a,closeDialog:i}=we(),{tanTable:l}=C();function n(o,u){return o.isDisabled?fe(o)?o.isDisabled():be(o)?o.isDisabled(u):!1:!1}const c=l.getSelectedRowModel().rows.map(o=>o.original);return t(F,{children:e.map((o,u)=>{const m=o.icon,v=n(o,c)||r;return d(y,{"aria-label":o.label,type:"button",isDisabled:v,className:"animate-in fade-in slide-in-from-right-15 duration-300 transition-transform",onPress:b=>{const w={event:b,openDialog:a,closeDialog:i};fe(o)?o.onPress(w):be(o)&&o.onPress({...w,data:c})},variant:o.variant??"neutral",children:[m&&t(m,{"aria-hidden":!0}),t("span",{children:o.label})]},`${o.label}-${u}`)})})}function Wt({label:e,items:r,data:a}){const{openDialog:i,closeDialog:l}=we();return r.length<4?t("div",{className:"flex items-center gap-2",children:r.map((n,c)=>{const o=n.icon,u=typeof n.label=="function"?n.label(a):n.label;return d(_t,{children:[t(y,{"aria-label":typeof u=="string"?u:void 0,isDisabled:n.isDisabled?.(a)??!1,variant:"ghost",size:"icon",onPress:()=>{const m={openDialog:i,closeDialog:l};n.onPress({...m,data:a})},children:t(o,{className:"size-icon"})}),t(jt,{children:u})]},`${c}-${typeof u=="string"?u:""}`)})}):t(R,{"aria-label":"Actions",label:e,size:"icon",children:r.map((n,c)=>{const o=n.icon,u=typeof n.label=="function"?n.label(a):n.label;return d(A,{id:typeof u=="string"?u:void 0,isDisabled:n.isDisabled?.(a)??!1,onAction:()=>{const m={openDialog:i,closeDialog:l};W(n)&&n.onPress({...m,data:a})},children:[t(o,{className:"size-icon"}),u]},`${c}-${typeof u=="string"?u:""}`)})})}const sr=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte","between"],he={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"},en={eq:"=",ne:"≠",cn:"contains",nc:"!contains",sw:"starts with",ew:"ends with",in:"in",nin:"not in",gt:">",gte:"≥",lt:"<",lte:"≤",between:"↔"};function G(e,r){const a=`${r}-${Date.now()}`,i=Ie[e][0];switch(e){case"bool":return{id:a,type:e,property:r,operator:i,value:!0};case"string":return{id:a,type:e,property:r,operator:i,value:""};case"date":return{id:a,type:e,property:r,operator:i,value:i==="between"?[new Date().toISOString(),new Date().toISOString()]:new Date().toISOString()};case"id":return{id:a,type:e,property:r,operator:i,value:""};case"id-search":return{id:a,type:e,property:r,operator:i,value:[]};case"enum":return{id:a,type:e,property:r,operator:i,value:new Set};case"number":return{id:a,type:e,property:r,operator:i,value:0}}}const Ie={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 tn(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,a]=e.value;return`${q(r,{dateStyle:"short"})??""} – ${q(a,{dateStyle:"short"})??""}`}return e.value?q(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:r,pathParameters:a,onChange:i}){if(e.type==="string"||e.type==="id")return t(nt,{autoFocus:!0,value:e.value??"",onChange:i,"aria-label":"Filter value"});if(e.type==="number")return t(We,{autoFocus:!0,value:e.value,onChange:i,"aria-label":"Filter value"});if(e.type==="bool")return d(R,{autoFocus:!0,label:e.value?"True":"False",variant:"neutral","aria-label":"Filter value",children:[t(A,{onAction:()=>i(!0),children:"True"}),t(A,{onAction:()=>i(!1),children:"False"})]});if(e.type==="date"){if(e.operator==="between"){const[n,c]=Array.isArray(e.value)?e.value:[new Date().toISOString(),new Date().toISOString()],o=H(n,V()),u=H(c,V());return d("div",{className:"flex flex-col gap-icon",children:[t(Q,{autoFocus:!0,hideTimeZone:!0,label:"From",value:o,onChange:m=>i([m?m.toAbsoluteString():n,c])}),t(Q,{hideTimeZone:!0,label:"To",value:u,onChange:m=>i([n,m?m.toAbsoluteString():c])})]})}const l=e.value&&!Array.isArray(e.value)?H(e.value,V()):null;return t(Q,{autoFocus:!0,hideTimeZone:!0,value:l,onChange:n=>i(n?n.toAbsoluteString():new Date().toISOString()),"aria-label":"Filter date"})}if(e.type==="enum"){const l=r[e.property];return l.type!=="enum"?null:t(Je,{autoFocus:!0,items:l.options,value:e.value??new Set,onChange:i,"aria-label":"Filter value"})}if(e.type==="id-search"){const l=r[e.property];if(l.type!=="id-search")return null;const n=a?{path:a,query:{}}:void 0;return t(Ct,{autoFocus:!0,path:l.path,accessor:l.accessor,defaultParams:n,value:e.value??[],onChange:i,"aria-label":"Filter value"})}return null}function rn({filter:e,filterConfig:r,pathParameters:a,resourceFormatter:i,onRemove:l,onUpdate:n,isOpen:c,onOpenChange:o}){const u=Ie[e.type],m=tn(e),v=Y();return d(et,{isOpen:c,onOpenChange:o,children:[t("div",{className:"relative",children:d(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:i(e.property)}),v!=="customer-portal"&&t("span",{children:en[e.operator]}),v!=="customer-portal"&&m&&t("span",{children:m}),e.active!==!1&&t("span",{className:"size-2 z-100 rounded-full bg-primary ms-1"})]})}),t(tt,{className:"p-icon min-w-48",children:d("div",{className:"flex flex-col gap-icon",children:[u.length>1&&t(R,{label:he[e.operator],variant:"neutral","aria-label":"Change operator",children:u.map(b=>t(A,{onAction:()=>n({operator:b}),children:he[b]},b))}),t(nn,{filter:e,filterConfig:r,pathParameters:a,onChange:b=>n({value:b})}),t(y,{type:"button",variant:"neutral",className:"self-end",onPress:l,"aria-label":`Remove ${i(e.property)} filter`,children:"Clear"})]})})]})}function an({className:e,previewFilters:r,...a}){const{filters:i,query:l,setFilters:n,filterConfig:c,pathParameters:o}=C(),u=J(),m=Object.keys(c).filter(g=>!i.some(p=>p.property===g)).sort(),[v,b]=O(null),w=ve(!1);X(()=>{if(!w.current&&i.length===0){const g=[];r&&r.length>0&&g.push(...r.filter(p=>c[p]).map(p=>({...G(c[p].type,p),active:!1,isPreview:!0}))),g.length>0&&n(g)}w.current=!0},[]);const D=(g,p)=>{const f=G(g,p);n([...i,f]),b(f.id)},P=g=>{i.find(f=>f.id===g)?.isPreview?n(i.map(f=>f.id===g?{...G(c[f.property].type,f.property),active:!1,isPreview:!0}:f)):n(i.filter(f=>f.id!==g))},j=(g,p)=>{n(i.map(f=>{if(f.id!==g)return f;let S=p.value!==void 0?p.value:f.value;const $=p.operator??f.operator;if(f.type==="date"&&p.operator!==void 0)if($==="between"&&!Array.isArray(S)){const z=typeof S=="string"?S:new Date().toISOString();S=[z,z]}else $!=="between"&&Array.isArray(S)&&(S=S[0]??new Date().toISOString());return{...f,...p,value:S,active:!0}}))};return d("section",{...a,className:I("flex flex-wrap gap-icon items-center",e),children:[i.map(g=>t(rn,{filter:g,filterConfig:c,pathParameters:o,resourceFormatter:u,onRemove:()=>P(g.id),onUpdate:p=>j(g.id,p),isOpen:v===g.id,onOpenChange:p=>b(p?g.id:null)},g.id)),m.length>0&&t(R,{label:t(Nt,{}),isDisabled:l.isPending,variant:"neutral","aria-label":"Add filter",children:m.map(g=>{const p=c[g].type,f=on[p];return d(A,{className:"!justify-between",onAction:()=>D(p,g),children:[u(g),t(f,{})]},g)})})]})}const on={"id-search":xt,bool:ue,date:wt,enum:yt,id:St,number:vt,string:ue};export{he as C,an as D,ir as DataTable,Ne as DataTableContext,or as DataTableProvider,sr as F,rr as getColumnHelper,C as useDataTable,ar as useDataTableState};
|
|
2
2
|
//# sourceMappingURL=data-table.js.map
|