@cryptlex/web-components 6.6.27 → 6.6.29
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/checkbox.d.ts +2 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/checkbox.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.d.ts +6 -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 +168 -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"}
|
|
@@ -3,8 +3,9 @@ import { FormFieldProps } from './form';
|
|
|
3
3
|
export declare const CheckboxGroup: (props: import('react-aria-components').CheckboxGroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
|
|
4
4
|
type CheckboxProps = AriaCheckboxProps & FormFieldProps & {
|
|
5
5
|
variant?: 'checkbox' | 'switch';
|
|
6
|
+
size?: 'sm' | 'lg';
|
|
6
7
|
};
|
|
7
|
-
export declare function Checkbox({ className, label, description, errorMessage, requiredIndicator, variant, ...props }: Omit<CheckboxProps, 'children'>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare function Checkbox({ className, label, description, errorMessage, requiredIndicator, variant, size, ...props }: Omit<CheckboxProps, 'children'>): import("react/jsx-runtime").JSX.Element;
|
|
8
9
|
export type TfCheckboxProps = Omit<React.ComponentProps<typeof Checkbox>, 'onChange' | 'onBlur' | 'isChecked'>;
|
|
9
10
|
export declare function TfCheckbox({ ...props }: TfCheckboxProps): import("react/jsx-runtime").JSX.Element;
|
|
10
11
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,Fragment as
|
|
1
|
+
"use client";import{jsx as e,Fragment as v,jsxs as C}from"react/jsx-runtime";import{useId as y}from"react";import{Checkbox as N,composeRenderProps as l,CheckboxGroup as I}from"react-aria-components";import{useFieldContext as w}from"../utilities/form-context.js";import{classNames as r}from"../utilities/theme.js";import{FormField as z,labelVariants as B}from"./form.js";import{IcMinus as F,IcCheck as j}from"./icons.js";import"@tanstack/react-form";import"clsx";import"class-variance-authority";import"./card.js";const i="group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50",a="group-data-[invalid]/checkbox:border-destructive",u="focus:outline-none focus-visible:outline-none",b="group-data-[selected]/checkbox:bg-primary",S="relative shrink-0 h-6 w-11 rounded-full border border-input bg-elevation-1 transition-colors duration-200",D="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",G="flex shrink-0 items-center bg-elevation-1 rounded-md justify-center border border-input text-current ring-offset-background",R={sm:"size-icon",lg:"size-input"},O=I;function q({className:o,label:t,description:m,errorMessage:h,requiredIndicator:g,variant:p="checkbox",size:x="lg",...c}){const f=y(),n=c.id||f,k=p==="switch";return e("div",{className:"group form-field",children:e(z,{label:t,description:m,errorMessage:h,requiredIndicator:g,htmlFor:n,children:e(N,{className:l(o,d=>r("group/checkbox cursor-pointer relative focus-ring flex items-center gap-x-2 disabled-muted",B,d)),id:n,...c,children:l(e(v,{}),(d,s)=>k?e("div",{className:r(S,b,i,a,"group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive",u),children:e("div",{className:r(D,"group-data-[selected]/checkbox:translate-x-4.5",i,a)})}):e("div",{className:r(G,"group-data-[indeterminate]/checkbox:bg-primary",b,"group-data-[indeterminate]/checkbox:text-primary-foreground group-data-[selected]/checkbox:text-primary-foreground",i,a,"group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground",u,R[x]),children:C("span",{className:"flex items-center justify-center",children:[s.isIndeterminate&&e(F,{className:"size-icon"}),!s.isIndeterminate&&s.isSelected&&e(j,{className:"size-icon"})]})}))})})})}function P({...o}){const t=w({disabled:o.isDisabled});return e(q,{requiredIndicator:t.isRequired,isSelected:t.state.value,isDisabled:t.isSubmitting||o.isDisabled,onChange:()=>t.handleChange(!t.state.value),onBlur:t.handleBlur,...o})}export{q as Checkbox,O as CheckboxGroup,P 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
|
|
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 return (\n <div className=\"group form-field\">\n <FormField\n {...{\n label,\n description,\n errorMessage,\n requiredIndicator,\n htmlFor: fieldId,\n }}\n >\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 <span className=\"flex items-center justify-center\">\n {renderProps.isIndeterminate && <IcMinus className=\"size-icon\" />}\n {!renderProps.isIndeterminate && renderProps.isSelected && (\n <IcCheck className=\"size-icon\" />\n )}\n </span>\n </div>\n );\n })}\n </AriaCheckbox>\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","CheckboxGroup","AriaCheckboxGroup","Checkbox","className","label","description","errorMessage","requiredIndicator","variant","size","props","generatedId","useId","fieldId","isSwitch","jsx","FormField","AriaCheckbox","composeRenderProps","classNames","labelVariants","Fragment","_","renderProps","jsxs","IcMinus","IcCheck","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,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,SAC7B,OACIO,EAAC,MAAA,CAAI,UAAU,mBACX,SAAAA,EAACC,EAAA,CAEO,MAAAZ,EACA,YAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,QAASM,EAGb,SAAAE,EAACE,EAAA,CACG,UAAWC,EAAmBf,EAAWA,GACrCgB,EACI,6FACAC,EACAjB,CAAA,CACJ,EAEJ,GAAIU,EACH,GAAGH,EAEH,SAAAQ,EAAmBH,EAAAM,EAAA,CAAA,CAAE,EAAK,CAACC,EAAGC,IACvBT,EAEIC,EAAC,MAAA,CACG,UAAWI,EACPvB,EACAD,EACAH,EACAC,EACA,8EACAC,CAAA,EAGJ,SAAAqB,EAAC,MAAA,CACG,UAAWI,EACPtB,EACA,iDACAL,EACAC,CAAA,CACJ,CAAA,CACJ,CAAA,EAMRsB,EAAC,MAAA,CACG,UAAWI,EACPrB,EACA,iDACAH,EACA,qHACAH,EACAC,EACA,uKACAC,EACAK,EAAYU,CAAI,CAAA,EAGpB,SAAAe,EAAC,OAAA,CAAK,UAAU,mCACX,SAAA,CAAAD,EAAY,iBAAmBR,EAACU,EAAA,CAAQ,UAAU,YAAY,EAC9D,CAACF,EAAY,iBAAmBA,EAAY,YACzCR,EAACW,EAAA,CAAQ,UAAU,WAAA,CAAY,CAAA,CAAA,CAEvC,CAAA,CAAA,CAGX,CAAA,CAAA,CACL,CAAA,EAER,CAER,CAGO,SAASC,EAAW,CAAE,GAAGjB,GAA0B,CACtD,MAAMkB,EAAQC,EAAyB,CAAE,SAAUnB,EAAM,WAAY,EACrE,OACIK,EAACb,EAAA,CACG,kBAAmB0B,EAAM,WACzB,WAAYA,EAAM,MAAM,MACxB,WAAYA,EAAM,cAAgBlB,EAAM,WACxC,SAAU,IAAMkB,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK,EACrD,OAAQA,EAAM,WACb,GAAGlB,CAAA,CAAA,CAGhB"}
|
|
@@ -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"}
|
|
@@ -23,6 +23,8 @@ type DataTableFactory<T extends object, TOperation extends keyof operations, TFi
|
|
|
23
23
|
filterConfig: TFilterConfig;
|
|
24
24
|
initialFilters: TableFilter[];
|
|
25
25
|
previewFilters?: (keyof TFilterConfig)[];
|
|
26
|
+
/** When provided, each row becomes a navigable link. Called with the row's data on click or Enter. */
|
|
27
|
+
onRowNavigate?: (row: T) => void;
|
|
26
28
|
};
|
|
27
29
|
type DataTableState = {
|
|
28
30
|
sorting: SortingState;
|
|
@@ -32,7 +34,7 @@ export declare function getColumnHelper<O extends keyof operations>(): ColumnHel
|
|
|
32
34
|
/**
|
|
33
35
|
* Hook for handling all data-table state. Used in DataTableContext
|
|
34
36
|
*/
|
|
35
|
-
export declare function useDataTableState<T extends object, TOperation extends keyof operations, TFilterConfig extends FiltersConfig<TOperation> = FiltersConfig<TOperation>>({ path, pathParameters, columns, filterConfig, columnsToHideByDefault, allowSelection, initialFilters, previewFilters, tableActions, }: DataTableFactory<T, TOperation, TFilterConfig>): {
|
|
37
|
+
export declare function useDataTableState<T extends object, TOperation extends keyof operations, TFilterConfig extends FiltersConfig<TOperation> = FiltersConfig<TOperation>>({ path, pathParameters, columns, filterConfig, columnsToHideByDefault, allowSelection, initialFilters, previewFilters, tableActions, onRowNavigate, }: DataTableFactory<T, TOperation, TFilterConfig>): {
|
|
36
38
|
readonly tableState: DataTableState;
|
|
37
39
|
readonly updateTableState: (updates: Partial<DataTableState>) => void;
|
|
38
40
|
readonly query: import('@tanstack/react-query').UseQueryResult<{
|
|
@@ -58,6 +60,7 @@ export declare function useDataTableState<T extends object, TOperation extends k
|
|
|
58
60
|
readonly tableActions: TableAction<T>[];
|
|
59
61
|
readonly pathParameters: NoInfer<ApiPathParameters<TOperation>> | undefined;
|
|
60
62
|
readonly previewFilters: (keyof TFilterConfig)[] | undefined;
|
|
63
|
+
readonly onRowNavigate: ((row: T) => void) | undefined;
|
|
61
64
|
};
|
|
62
65
|
export declare const DataTableContext: import('react').Context<{
|
|
63
66
|
readonly tableState: DataTableState;
|
|
@@ -551,6 +554,7 @@ export declare const DataTableContext: import('react').Context<{
|
|
|
551
554
|
id: string;
|
|
552
555
|
} | undefined> | undefined;
|
|
553
556
|
readonly previewFilters: string[] | undefined;
|
|
557
|
+
readonly onRowNavigate: ((row: object) => void) | undefined;
|
|
554
558
|
} | null>;
|
|
555
559
|
export declare function useDataTable(): {
|
|
556
560
|
readonly tableState: DataTableState;
|
|
@@ -1044,6 +1048,7 @@ export declare function useDataTable(): {
|
|
|
1044
1048
|
id: string;
|
|
1045
1049
|
} | undefined> | undefined;
|
|
1046
1050
|
readonly previewFilters: string[] | undefined;
|
|
1051
|
+
readonly onRowNavigate: ((row: object) => void) | undefined;
|
|
1047
1052
|
};
|
|
1048
1053
|
export declare function DataTableProvider<T extends object, TOperation extends keyof operations>({ children, ...props }: {
|
|
1049
1054
|
children: React.ReactNode;
|
|
@@ -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 P,jsxs as m}from"react/jsx-runtime";import{parseAbsolute as j,getLocalTimeZone as q}from"@internationalized/date";import{createContext as ye,useState as D,useMemo as we,useEffect as le,useContext as Ce,useRef as Ie}from"react";import{Button as w}from"./button.js";import{useSensors as Ne,useSensor as X,PointerSensor as xe,KeyboardSensor as Te,DndContext as Ae,closestCenter as De,DragOverlay as Pe}from"@dnd-kit/core";import{sortableKeyboardCoordinates as Fe,SortableContext as Oe,verticalListSortingStrategy as Re,arrayMove as ze,useSortable as Le}from"@dnd-kit/sortable";import{CSS as _e}from"@dnd-kit/utilities";import{useQuery as Me}from"@tanstack/react-query";import{createColumnHelper as se,useReactTable as $e,getCoreRowModel as Ee,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 k}from"./date-picker.js";import{EasyMenu as F,MenuItem as x}from"./menu.js";import{MultiSelect as qe}from"./multi-select.js";import{NumberField as ke}from"./numberfield.js";import{PopoverTrigger as He,Popover as Ve}from"./popover.js";import{TextField as Be}from"./textfield.js";import{formatDate as _}from"../utilities/date.js";import{useResourceFormatter as K,ALL_OS as Ke,useProjectName as Qe}from"../utilities/resources.js";import{classNames as C}from"../utilities/theme.js";import{IcInfo as Ue,IcMoreVertical as Ze,IcRefresh as Ge,IcColumns as Xe,IcGrip as Ye,IcFirst as Je,IcLeft as We,IcRight as et,IcLast as tt,IcSortAsc as nt,IcSortDesc as rt,IcSortNone as at,IcCheck as W,IcMinus as ot,IcAccount as it,IcLicense as lt,IcDate as st,IcFile as ct,IcFilter as ut}from"./icons.js";import{MultipleIdSearchInput as dt}from"./id-search.js";import{Loader as mt}from"./loader.js";import{SearchField as gt}from"./searchfield.js";import{Table as pt,TableHeader as ft,TableRow as ee,TableHead as bt,TableBody as ht,TableCell as vt}from"./table.js";import{CountryName as St}from"../utilities/countries.js";import{Duration as yt}from"../utilities/duration.js";import{formatDays as wt,formatFilesize as Ct,formatNumber as It}from"../utilities/numbers.js";import{Checkbox as te}from"./checkbox.js";import{TooltipTrigger as Nt,Tooltip as xt}from"./tooltip.js";import{getSubscriptionStartTriggerLabel as Tt,ALL_LICENSE_TYPES as At}from"./select-options.js";import{useCtxClient as Dt}from"../utilities/ctx-client.js";import{ControlledDialogProvider as Pt,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 Ft(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const ue=se(),Ot=[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",size:"sm"}),cell:({row:e})=>t(te,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row",size:"sm"}),enableSorting:!1,enableHiding:!1})],I="TableActions";function Rt(e){return e.length===0?[]:[ue.accessor(I,{header:"Actions",id:I,enableHiding:!1,cell:({row:a})=>t(qt,{label:t(Ze,{}),data:a.original,items:e}),enableSorting:!1})]}function Vn(){return se()}function Bn({path:e,pathParameters:a,columns:n,filterConfig:o,columnsToHideByDefault:u={},allowSelection:r=!1,initialFilters:l=[],previewFilters:i,tableActions:c,onRowNavigate:g}){const[h,b]=D({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:S,pagination:A}=h,[z,M]=D(""),[d,p]=D({}),[f,y]=D(l),O=we(()=>f.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,v)=>je(s,v),{}),[f]),N={...f,page:A.pageIndex+1,limit:A.pageSize,sort:Ft(S[0]),search:z},fe=Dt(),$=["get",e,N],[Q,U]=Y(`${$.join("")}_ctx_column_order_preference`,[]),[Z,be]=Y(`${$.join("")}_ctx_column_visibility_preference`,{id:!1,...u}),E=s=>{b(v=>({...v,...s}))},L=Me({queryKey:$,queryFn:async()=>{const s=await fe.GET(e,{params:{query:{page:N.page,limit:N.limit,sort:N.sort,search:N.search,...O},path:a}});return{data:s.data??[],total:Number.parseInt(s.response.headers.get("Pagination-Count")||"0")}}}),he=c.filter(ge),ve=[...r?Ot:[],...n,...Rt(he??[])];function Se(s){return typeof s=="function"}function R(s,v){return Se(s)?s(v):s}const G=$e({data:L.data?.data??[],columns:ve,getCoreRowModel:Ee(),rowCount:L.data?.total??0,manualPagination:!0,onPaginationChange:s=>{E({pagination:R(s,A)})},manualSorting:!0,onSortingChange:s=>{p({}),E({sorting:[...R(s,S)]})},manualFiltering:!0,onColumnVisibilityChange:s=>{be(R(s,Z))},onRowSelectionChange:s=>{p(R(s,d))},onColumnOrderChange:s=>{U(R(s,Q))},state:{sorting:S,columnVisibility:Z,pagination:A,rowSelection:d,columnOrder:Q},meta:{refetch:L.refetch}});return le(()=>{const s=G.getAllLeafColumns();U([...s.filter(v=>v.id!==I).map(v=>v.id),...s.filter(v=>v.id===I).map(v=>v.id)])},[]),{tableState:h,updateTableState:E,query:L,setSearchQuery:M,searchQuery:z,tanTable:G,mergedFilters:O,filters:f,setFilters:y,filterConfig:o,tableActions:c,pathParameters:a,previewFilters:i,onRowNavigate:g}}const de=ye(null);function T(){const e=Ce(de);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function Kn({children:e,...a}){return t(de.Provider,{value:a,children:e})}function Qn({className:e,...a}){const{query:n,tanTable:o}=T();return t(P,{children:m(Pt,{children:[t(Mt,{}),m("section",{...a,className:C("z-20 flex flex-col bg-elevation-1 border rounded-md",e),children:[m("div",{className:"w-full overflow-auto h-table relative rounded-md",tabIndex:0,children:[n.isLoading&&t(ne,{className:"cursor-wait",children:t(mt,{})}),!n.isLoading&&o.getRowModel().rows.length===0&&t(ne,{className:"cursor-not-allowed",children:!n.isFetching&&(n.isError?m("span",{className:"flex gap-3 justify-center items-center",children:[t(Ue,{}),t("span",{children:n.error.message})]}):n.data?.data?.length===0?t(P,{children:"No results found."}):t(P,{children:"Unknown error. Please contact customer support."}))}),!n.isLoading&&o.getRowModel().rows.length!==0&&t(Et,{className:"w-full"})]}),m("div",{className:"flex w-full justify-between border-t gap-icon p-icon overflow-x-auto",children:[m("div",{className:"flex gap-icon",children:[t(zt,{}),t(_t,{})]}),t(Lt,{})]})]})]})})}function ne({children:e,className:a}){return m(P,{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 zt(){const{tanTable:e}=T(),[a,n]=D(null),o=K(),u=Ne(X(xe),X(Te,{coordinateGetter:Fe}));return t(Ae,{sensors:u,collisionDetection:De,onDragStart:l=>{const{active:i}=l;n(i.id.toString())},onDragEnd:l=>{const{active:i,over:c}=l;if(c&&i.id!==c.id){const g=e.getState().columnOrder,h=g.indexOf(i.id.toString()),b=g.indexOf(c.id.toString());e.setColumnOrder([...ze(g,h,b)])}n(null)},children:m(Oe,{items:e.getState().columnOrder,strategy:Re,children:[m(F,{label:m(P,{children:[t(Xe,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(l=>l.id),children:[t(x,{onAction:()=>e.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),e.getState().columnOrder.map(l=>{const i=e.getAllFlatColumns().find(c=>c.id===l);return!i||i.id==="checkbox"||i.id===I?null:t(r,{column:i},i.id)})]}),t(Pe,{children:a?t("div",{className:"opacity-70 border-2 border-primary",children:o(a)}):null})]})});function r({column:l}){const{attributes:i,listeners:c,setNodeRef:g,transform:h,transition:b}=Le({id:l.id}),S={transform:_e.Transform.toString(h),transition:b,zIndex:"999"};return m(x,{ref:g,style:S,...i,id:l.id,onAction:()=>l.toggleVisibility(),isDisabled:!l.getCanHide(),className:"flex items-center",children:[t(Ye,{...c,className:"size-icon cursor-grab"}),B(l),l.getIsSorted()&&t(me,{className:"size-icon",direction:l.getIsSorted()})]})}}function Lt(){const{tanTable:e}=T(),a=e.getRowCount();return m("div",{className:"flex items-center gap-2",children:[t("span",{className:"whitespace-nowrap body-sm text-muted",children:`${e.getState().pagination.pageIndex*e.getState().pagination.pageSize+1} - ${Math.min((e.getState().pagination.pageIndex+1)*e.getState().pagination.pageSize,a)} of ${a?.toLocaleString()}`}),t(w,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Je,{})}),t(w,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(We,{})}),t(w,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(et,{})}),t(w,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(tt,{})})]})}function _t(){const{tanTable:e}=T(),a=[10,20,30,40,50];return t(F,{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(x,{onAction:()=>e.setPageSize(n.value),children:n.value})})}function Mt(){const{query:e,tanTable:a,searchQuery:n,setSearchQuery:o,tableActions:u,previewFilters:r}=T(),l=a.getSelectedRowModel().rows.length>0,i=u.filter(c=>c.resourceType!=="single").filter(c=>c.resourceType==="multiple"===l);return m("section",{className:"flex justify-between my-0 mb-icon gap-icon overflow-x-auto py-1",children:[m("div",{className:"flex gap-icon",children:[t(w,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",children:t(Ge,{})}),t(gt,{value:n,onChange:o}),t(Kt,{previewFilters:r})]}),t("div",{className:"flex gap-icon",children:t(jt,{items:i,isFetching:e.isFetching})})]})}function me({direction:e,...a}){return e==="asc"?t(nt,{className:"size-3.5",...a}):e==="desc"?t(rt,{className:"size-3.5",...a}):t(at,{className:"size-3.5",...a})}function B(e){const a=K(),n=e.columnDef.header;return typeof n=="string"?n:a(e.id)}function $t(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:_(n)});case"number":return t("span",{className:"block text-right tabular-nums",children:It(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 Ct(n);case"days":return wt(n);case"os":return Ke[n]??n;case"licenseType":return At[n]??n;case"subscriptionInterval":return yt.formatISODuration(n);case"subscriptionStartTrigger":return Tt(n);default:return String(n)}}function re({header:e}){const a=e.column.columnDef.header;return typeof a=="string"||!a?B(e.column):typeof a=="function"?typeof a(e.getContext())=="string"?B(e.column):V(a,e.getContext()):V(a,e.getContext())}function Et({className:e}){const{tanTable:a,onRowNavigate:n}=T(),o=(u,r,l="z-50")=>C("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",u&&`bg-elevation-1 sticky right-0 ${l} text-center justify-center`,r);return m(pt,{className:C("table-auto border-0 rounded-md",e),children:[t(ft,{className:"sticky top-0 z-10 rounded-md",children:a.getHeaderGroups().map(u=>t(ee,{children:u.headers.map(r=>m(bt,{scope:"col",colSpan:r.colSpan,className:o(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(re,{header:r})}),r.column.getCanSort()&&m(w,{variant:"ghost",className:C("w-full p-1",r.id===I?"justify-center":"justify-start"),onPress:r.column.getToggleSortingHandler(),children:[t("span",{children:t(re,{header:r})}),t(me,{direction:r.column.getIsSorted()})]})]},r.id))},u.id))}),t(ht,{children:a.getRowModel().rows.map(u=>t(ee,{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":u.getIsSelected(),...n&&{role:"link",tabIndex:0,onClick:r=>{r.target.closest('a, button, input, select, textarea, [role="button"]')||n(u.original)},onKeyDown:r=>{r.key==="Enter"&&n(u.original)}},children:u.getVisibleCells().map(r=>{const l=r.column.id===I,i=r.column.columnDef.meta?.displayType?$t(r):V(r.column.columnDef.cell,r.getContext());return t(vt,{className:C(o(l,void 0,"z-1"),l&&"flex justify-center items-center"),children:i},r.id)})},u.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:a}){const{openDialog:n,closeDialog:o}=ce(),{tanTable:u}=T();function r(i,c){return i.isDisabled?ae(i)?i.isDisabled():oe(i)?i.isDisabled(c):!1:!1}const l=u.getSelectedRowModel().rows.map(i=>i.original);return t(P,{children:e.map((i,c)=>{const g=i.icon,h=r(i,l)||a;return m(w,{"aria-label":i.label,type:"button",isDisabled:h,className:"animate-in fade-in slide-in-from-right-15 duration-300 transition-transform",onPress:b=>{const S={event:b,openDialog:n,closeDialog:o};ae(i)?i.onPress(S):oe(i)&&i.onPress({...S,data:l})},variant:i.variant??"neutral",children:[g&&t(g,{"aria-hidden":!0}),t("span",{children:i.label})]},`${i.label}-${c}`)})})}function qt({label:e,items:a,data:n}){const{openDialog:o,closeDialog:u}=ce();return a.length<4?t("div",{className:"flex items-center gap-2",children:a.map((r,l)=>{const i=r.icon,c=typeof r.label=="function"?r.label(n):r.label;return m(Nt,{children:[t(w,{"aria-label":typeof c=="string"?c:void 0,isDisabled:r.isDisabled?.(n)??!1,variant:"ghost",size:"icon",onPress:()=>{const g={openDialog:o,closeDialog:u};r.onPress({...g,data:n})},children:t(i,{className:"size-icon"})}),t(xt,{children:c})]},`${l}-${typeof c=="string"?c:""}`)})}):t(F,{"aria-label":"Actions",label:e,size:"icon",children:a.map((r,l)=>{const i=r.icon,c=typeof r.label=="function"?r.label(n):r.label;return m(x,{id:typeof c=="string"?c:void 0,isDisabled:r.isDisabled?.(n)??!1,onAction:()=>{const g={openDialog:o,closeDialog:u};ge(r)&&r.onPress({...g,data:n})},children:[t(i,{className:"size-icon"}),c]},`${l}-${typeof c=="string"?c:""}`)})})}const Un=["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"},kt={eq:"=",ne:"≠",cn:"contains",nc:"!contains",sw:"starts with",ew:"ends with",in:"in",nin:"not in",gt:">",gte:"≥",lt:"<",lte:"≤",between:"↔"};function H(e,a){const n=`${a}-${Date.now()}`,o=pe[e][0];switch(e){case"bool":return{id:n,type:e,property:a,operator:o,value:!0};case"string":return{id:n,type:e,property:a,operator:o,value:""};case"date":return{id:n,type:e,property:a,operator:o,value:o==="between"?[new Date().toISOString(),new Date().toISOString()]:new Date().toISOString()};case"id":return{id:n,type:e,property:a,operator:o,value:""};case"id-search":return{id:n,type:e,property:a,operator:o,value:[]};case"enum":return{id:n,type:e,property:a,operator:o,value:new Set};case"number":return{id:n,type:e,property:a,operator:o,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[a,n]=e.value;return`${_(a,{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 Vt({filter:e,filterConfig:a,pathParameters:n,onChange:o}){if(e.type==="string"||e.type==="id")return t(Be,{autoFocus:!0,value:e.value??"",onChange:o,"aria-label":"Filter value"});if(e.type==="number")return t(ke,{autoFocus:!0,value:e.value,onChange:o,"aria-label":"Filter value"});if(e.type==="bool")return m(F,{autoFocus:!0,label:e.value?"True":"False",variant:"neutral","aria-label":"Filter value",children:[t(x,{onAction:()=>o(!0),children:"True"}),t(x,{onAction:()=>o(!1),children:"False"})]});if(e.type==="date"){if(e.operator==="between"){const[r,l]=Array.isArray(e.value)?e.value:[new Date().toISOString(),new Date().toISOString()],i=j(r,q()),c=j(l,q());return m("div",{className:"flex flex-col gap-icon",children:[t(k,{autoFocus:!0,hideTimeZone:!0,label:"From",value:i,onChange:g=>o([g?g.toAbsoluteString():r,l])}),t(k,{hideTimeZone:!0,label:"To",value:c,onChange:g=>o([r,g?g.toAbsoluteString():l])})]})}const u=e.value&&!Array.isArray(e.value)?j(e.value,q()):null;return t(k,{autoFocus:!0,hideTimeZone:!0,value:u,onChange:r=>o(r?r.toAbsoluteString():new Date().toISOString()),"aria-label":"Filter date"})}if(e.type==="enum"){const u=a[e.property];return u.type!=="enum"?null:t(qe,{autoFocus:!0,items:u.options,value:e.value??new Set,onChange:o,"aria-label":"Filter value"})}if(e.type==="id-search"){const u=a[e.property];if(u.type!=="id-search")return null;const r=n?{path:n,query:{}}:void 0;return t(dt,{autoFocus:!0,path:u.path,accessor:u.accessor,defaultParams:r,value:e.value??[],onChange:o,"aria-label":"Filter value"})}return null}function Bt({filter:e,filterConfig:a,pathParameters:n,resourceFormatter:o,onRemove:u,onUpdate:r,isOpen:l,onOpenChange:i}){const c=pe[e.type],g=Ht(e),h=Qe();return m(He,{isOpen:l,onOpenChange:i,children:[t("div",{className:"relative",children:m(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:o(e.property)}),h!=="customer-portal"&&t("span",{children:kt[e.operator]}),h!=="customer-portal"&&g&&t("span",{children:g}),e.active!==!1&&t("span",{className:"size-2 z-100 rounded-full bg-primary ms-1"})]})}),t(Ve,{className:"p-icon min-w-48",children:m("div",{className:"flex flex-col gap-icon",children:[c.length>1&&t(F,{label:ie[e.operator],variant:"neutral","aria-label":"Change operator",children:c.map(b=>t(x,{onAction:()=>r({operator:b}),children:ie[b]},b))}),t(Vt,{filter:e,filterConfig:a,pathParameters:n,onChange:b=>r({value:b})}),t(w,{type:"button",variant:"neutral",className:"self-end",onPress:u,"aria-label":`Remove ${o(e.property)} filter`,children:"Clear"})]})})]})}function Kt({className:e,previewFilters:a,...n}){const{filters:o,query:u,setFilters:r,filterConfig:l,pathParameters:i}=T(),c=K(),g=Object.keys(l).filter(d=>!o.some(p=>p.property===d)).sort(),[h,b]=D(null),S=Ie(!1);le(()=>{if(!S.current&&o.length===0){const d=[];a&&a.length>0&&d.push(...a.filter(p=>l[p]).map(p=>({...H(l[p].type,p),active:!1,isPreview:!0}))),d.length>0&&r(d)}S.current=!0},[]);const A=(d,p)=>{const f=H(d,p);r([...o,f]),b(f.id)},z=d=>{o.find(f=>f.id===d)?.isPreview?r(o.map(f=>f.id===d?{...H(l[f.property].type,f.property),active:!1,isPreview:!0}:f)):r(o.filter(f=>f.id!==d))},M=(d,p)=>{r(o.map(f=>{if(f.id!==d)return f;let y=p.value!==void 0?p.value:f.value;const O=p.operator??f.operator;if(f.type==="date"&&p.operator!==void 0)if(O==="between"&&!Array.isArray(y)){const N=typeof y=="string"?y:new Date().toISOString();y=[N,N]}else O!=="between"&&Array.isArray(y)&&(y=y[0]??new Date().toISOString());return{...f,...p,value:y,active:!0}}))};return m("section",{...n,className:C("flex flex-wrap gap-icon items-center",e),children:[o.map(d=>t(Bt,{filter:d,filterConfig:l,pathParameters:i,resourceFormatter:c,onRemove:()=>z(d.id),onUpdate:p=>M(d.id,p),isOpen:h===d.id,onOpenChange:p=>b(p?d.id:null)},d.id)),g.length>0&&t(F,{label:t(ut,{}),isDisabled:u.isPending,variant:"neutral","aria-label":"Add filter",children:g.map(d=>{const p=l[d].type,f=Qt[p];return m(x,{className:"!justify-between",onAction:()=>A(p,d),children:[c(d),t(f,{})]},d)})})]})}const Qt={"id-search":ct,bool:W,date:st,enum:lt,id:it,number:ot,string:W};export{ie as C,Kt as D,Qn as DataTable,de as DataTableContext,Kn as DataTableProvider,Un as F,Vn as getColumnHelper,T as useDataTable,Bn as useDataTableState};
|
|
2
2
|
//# sourceMappingURL=data-table.js.map
|