@cryptlex/web-components 6.6.34 → 6.6.36
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/breadcrumbs.js +1 -1
- package/dist/components/breadcrumbs.js.map +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/button.js.map +1 -1
- package/dist/components/calendar.js +1 -1
- package/dist/components/calendar.js.map +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/data-table-filter.js +1 -1
- package/dist/components/data-table.d.ts +16 -6
- 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/datefield.js +1 -1
- package/dist/components/datefield.js.map +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/disclosure.js +1 -1
- package/dist/components/disclosure.js.map +1 -1
- package/dist/components/duration-field.js +1 -1
- package/dist/components/duration-field.js.map +1 -1
- package/dist/components/file-trigger.js +1 -1
- package/dist/components/file-trigger.js.map +1 -1
- package/dist/components/form.js +1 -1
- package/dist/components/form.js.map +1 -1
- package/dist/components/icons.d.ts +8 -1
- package/dist/components/icons.js +92 -92
- package/dist/components/icons.js.map +1 -1
- package/dist/components/id-search.js +1 -1
- package/dist/components/id-search.js.map +1 -1
- package/dist/components/list-box.js +1 -1
- package/dist/components/list-box.js.map +1 -1
- package/dist/components/loader.js +1 -1
- package/dist/components/loader.js.map +1 -1
- package/dist/components/menu.js +1 -1
- package/dist/components/menu.js.map +1 -1
- package/dist/components/multi-select.js +1 -1
- package/dist/components/multi-select.js.map +1 -1
- package/dist/components/numberfield.js +1 -1
- package/dist/components/numberfield.js.map +1 -1
- package/dist/components/otpfield.js +1 -1
- package/dist/components/otpfield.js.map +1 -1
- package/dist/components/searchfield.js +1 -1
- package/dist/components/searchfield.js.map +1 -1
- package/dist/components/select-options.js +1 -1
- package/dist/components/select-options.js.map +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/select.js.map +1 -1
- package/dist/components/sidebar.js +1 -1
- package/dist/components/sidebar.js.map +1 -1
- package/dist/components/textfield.js +1 -1
- package/dist/components/textfield.js.map +1 -1
- package/dist/components/toast.js +1 -1
- package/dist/components/toast.js.map +1 -1
- package/dist/utilities/countries.js +1 -1
- package/dist/utilities/countries.js.map +1 -1
- package/dist/utilities/form-hook.js +1 -1
- package/dist/utilities/form-hook.js.map +1 -1
- package/package.json +4 -2
package/dist/components/alert.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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
|
|
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 m,IcCheck as d,IcError as f}from"./icons.js";import"clsx";import"@icons-pack/react-simple-icons";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 d;case"warning":return m;case"neutral":case void 0:default:return u}};function N({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{N 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 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":"
|
|
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":"mSAMO,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,2 +1,2 @@
|
|
|
1
|
-
import{jsx as n,jsxs as
|
|
1
|
+
import{jsx as n,jsxs as a}from"react/jsx-runtime";import{Link as i,composeRenderProps as o}from"react-aria-components";import{classNames as s}from"../utilities/theme.js";import{IcRight as c,IcMoreHorizontal as m}from"./icons.js";import"clsx";import"@icons-pack/react-simple-icons";import"react";function b({className:e,...r}){return n("nav",{children:n("ol",{className:s("flex list-none flex-wrap items-center gap-1 break-words",e),...r})})}function h({className:e,...r}){return n("li",{className:s("flex gap-1 items-center",e),...r})}function B({className:e,...r}){return n(i,{className:o(e,t=>s("btn p-0 text-sm",t)),...r})}function z({children:e,className:r,...t}){return n("span",{role:"presentation","aria-hidden":"true",className:s("opacity-70",r),...t,children:e||n(c,{className:"size-icon"})})}function g({className:e,...r}){return a("span",{role:"presentation","aria-hidden":"true",className:s("flex size-input items-center justify-center",e),...r,children:[n(m,{className:"size-icon"}),n("span",{className:"sr-only",children:"More"})]})}export{g as BreadcrumbEllipsis,h as BreadcrumbItem,B as BreadcrumbLink,z as BreadcrumbSeparator,b as Breadcrumbs};
|
|
2
2
|
//# sourceMappingURL=breadcrumbs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumbs.js","sources":["../../lib/components/breadcrumbs.tsx"],"sourcesContent":["import { Link as AriaLink, LinkProps as AriaLinkProps, composeRenderProps } from 'react-aria-components';\nimport { classNames } from '../utilities/theme';\nimport { IcMoreHorizontal, IcRight } from './icons';\n\nexport function Breadcrumbs({ className, ...props }: React.ComponentProps<'ol'>) {\n return (\n <nav>\n <ol\n className={classNames('flex list-none flex-wrap items-center gap-1 break-words', className)}\n {...props}\n />\n </nav>\n );\n}\n\nexport function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li className={classNames('flex gap-1 items-center', className)} {...props} />;\n}\n\nexport function BreadcrumbLink({ className, ...props }: AriaLinkProps) {\n return (\n <AriaLink\n className={composeRenderProps(className, className => classNames('btn p-0 text-sm', className))}\n {...props}\n />\n );\n}\n\nexport function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span role=\"presentation\" aria-hidden=\"true\" className={classNames('opacity-70', className)} {...props}>\n {children || <IcRight className=\"size-icon\" />}\n </span>\n );\n}\n\nexport function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n role=\"presentation\"\n aria-hidden=\"true\"\n className={classNames('flex size-input items-center justify-center', className)}\n {...props}\n >\n <IcMoreHorizontal className=\"size-icon\" />\n <span className=\"sr-only\">More</span>\n </span>\n );\n}\n"],"names":["Breadcrumbs","className","props","jsx","classNames","BreadcrumbItem","BreadcrumbLink","AriaLink","composeRenderProps","BreadcrumbSeparator","children","IcRight","BreadcrumbEllipsis","jsxs","IcMoreHorizontal"],"mappings":"
|
|
1
|
+
{"version":3,"file":"breadcrumbs.js","sources":["../../lib/components/breadcrumbs.tsx"],"sourcesContent":["import { Link as AriaLink, LinkProps as AriaLinkProps, composeRenderProps } from 'react-aria-components';\nimport { classNames } from '../utilities/theme';\nimport { IcMoreHorizontal, IcRight } from './icons';\n\nexport function Breadcrumbs({ className, ...props }: React.ComponentProps<'ol'>) {\n return (\n <nav>\n <ol\n className={classNames('flex list-none flex-wrap items-center gap-1 break-words', className)}\n {...props}\n />\n </nav>\n );\n}\n\nexport function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li className={classNames('flex gap-1 items-center', className)} {...props} />;\n}\n\nexport function BreadcrumbLink({ className, ...props }: AriaLinkProps) {\n return (\n <AriaLink\n className={composeRenderProps(className, className => classNames('btn p-0 text-sm', className))}\n {...props}\n />\n );\n}\n\nexport function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span role=\"presentation\" aria-hidden=\"true\" className={classNames('opacity-70', className)} {...props}>\n {children || <IcRight className=\"size-icon\" />}\n </span>\n );\n}\n\nexport function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n role=\"presentation\"\n aria-hidden=\"true\"\n className={classNames('flex size-input items-center justify-center', className)}\n {...props}\n >\n <IcMoreHorizontal className=\"size-icon\" />\n <span className=\"sr-only\">More</span>\n </span>\n );\n}\n"],"names":["Breadcrumbs","className","props","jsx","classNames","BreadcrumbItem","BreadcrumbLink","AriaLink","composeRenderProps","BreadcrumbSeparator","children","IcRight","BreadcrumbEllipsis","jsxs","IcMoreHorizontal"],"mappings":"uSAIO,SAASA,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAAqC,CAC7E,SACK,MAAA,CACG,SAAAC,EAAC,KAAA,CACG,UAAWC,EAAW,0DAA2DH,CAAS,EACzF,GAAGC,CAAA,CAAA,EAEZ,CAER,CAEO,SAASG,EAAe,CAAE,UAAAJ,EAAW,GAAGC,GAAqC,CAChF,OAAOC,EAAC,MAAG,UAAWC,EAAW,0BAA2BH,CAAS,EAAI,GAAGC,EAAO,CACvF,CAEO,SAASI,EAAe,CAAE,UAAAL,EAAW,GAAGC,GAAwB,CACnE,OACIC,EAACI,EAAA,CACG,UAAWC,EAAmBP,EAAWA,GAAaG,EAAW,kBAAmBH,CAAS,CAAC,EAC7F,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASO,EAAoB,CAAE,SAAAC,EAAU,UAAAT,EAAW,GAAGC,GAAuC,CACjG,SACK,OAAA,CAAK,KAAK,eAAe,cAAY,OAAO,UAAWE,EAAW,aAAcH,CAAS,EAAI,GAAGC,EAC5F,SAAAQ,KAAaC,EAAA,CAAQ,UAAU,YAAY,EAChD,CAER,CAEO,SAASC,EAAmB,CAAE,UAAAX,EAAW,GAAGC,GAAuC,CACtF,OACIW,EAAC,OAAA,CACG,KAAK,eACL,cAAY,OACZ,UAAWT,EAAW,8CAA+CH,CAAS,EAC7E,GAAGC,EAEJ,SAAA,CAAAC,EAACW,EAAA,CAAiB,UAAU,WAAA,CAAY,EACxCX,EAAC,OAAA,CAAK,UAAU,UAAU,SAAA,MAAA,CAAI,CAAA,CAAA,CAAA,CAG1C"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as r,jsxs as
|
|
1
|
+
"use client";import{jsx as r,jsxs as p,Fragment as i}from"react/jsx-runtime";import{cva as d}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"@icons-pack/react-simple-icons";import"react";const f=d("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 V({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=>p(i,{children:[e&&r(b,{}),!e&&r(i,{children:t})]}))})}export{V 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 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":"
|
|
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":"gXAMO,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{jsxs as o,jsx as e}from"react/jsx-runtime";import{today as b,getLocalTimeZone as v}from"@internationalized/date";import{CalendarGridHeader as y,useLocale as S,Heading as G,CalendarGrid as H,CalendarHeaderCell as N,CalendarGridBody as R,RangeCalendarStateContext as $,CalendarCell as w,composeRenderProps as l,Calendar as B,RangeCalendar as z}from"react-aria-components";import{use as E}from"react";import{Button as c,buttonVariants as I}from"./button.js";import{classNames as n}from"../utilities/theme.js";import{FormFieldError as m}from"./form.js";import{IcRight as s,IcLeft as u}from"./icons.js";import"class-variance-authority";import"./loader.js";import"clsx";import"./card.js";function f(a){let{direction:t}=S();return o("header",{className:"flex w-full items-center gap-1 px-1 pb-icon",...a,children:[e(c,{slot:"previous",size:"icon",children:t==="rtl"?e(s,{"aria-hidden":!0}):e(u,{"aria-hidden":!0})}),e(G,{className:"grow text-center body font-medium"}),e(c,{slot:"next",size:"icon",children:t==="rtl"?e(u,{"aria-hidden":!0}):e(s,{"aria-hidden":!0})})]})}function g({className:a,...t}){return e(H,{className:n(" border-separate border-spacing-x-0 border-spacing-y-1 ",a),...t})}const C=y;function h({className:a,...t}){return e(N,{className:n("w-9 body-sm font-normal text-muted-foreground",a),...t})}function x({className:a,...t}){return e(R,{className:n("[&>tr>td]:p-0",a),...t})}function p({className:a,...t}){const i=!!E($);return e(w,{className:l(a,(d,r)=>n(I({variant:"ghost",size:"icon"}),r.isDisabled&&"text-muted-foreground opacity-50",r.isSelected&&"bg-primary text-primary-foreground data-[focused]:bg-primary data-[focused]:text-primary-foreground",r.isHovered&&r.isSelected&&(r.isSelectionStart||r.isSelectionEnd||!i)&&"data-[hovered]:bg-primary data-[hovered]:text-primary-foreground",r.isSelected&&i&&!r.isSelectionStart&&!r.isSelectionEnd&&"rounded-none bg-accent text-accent-foreground",r.isOutsideMonth&&"text-muted-foreground opacity-50 data-[selected]:bg-accent/50 data-[selected]:text-muted-foreground data-[selected]:opacity-30",r.date.compare(b(v()))===0&&!r.isSelected&&"bg-accent text-accent-foreground",r.isUnavailable&&"cursor-default text-destructive ",r.isInvalid&&"bg-destructive text-destructive-foreground data-[focused]:bg-destructive data-[hovered]:bg-destructive data-[focused]:text-destructive-foreground data-[hovered]:text-destructive-foreground",d)),...t})}function
|
|
1
|
+
"use client";import{jsxs as o,jsx as e}from"react/jsx-runtime";import{today as b,getLocalTimeZone as v}from"@internationalized/date";import{CalendarGridHeader as y,useLocale as S,Heading as G,CalendarGrid as H,CalendarHeaderCell as N,CalendarGridBody as R,RangeCalendarStateContext as $,CalendarCell as w,composeRenderProps as l,Calendar as B,RangeCalendar as z}from"react-aria-components";import{use as E}from"react";import{Button as c,buttonVariants as I}from"./button.js";import{classNames as n}from"../utilities/theme.js";import{FormFieldError as m}from"./form.js";import{IcRight as s,IcLeft as u}from"./icons.js";import"class-variance-authority";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";import"./card.js";function f(a){let{direction:t}=S();return o("header",{className:"flex w-full items-center gap-1 px-1 pb-icon",...a,children:[e(c,{slot:"previous",size:"icon",children:t==="rtl"?e(s,{"aria-hidden":!0}):e(u,{"aria-hidden":!0})}),e(G,{className:"grow text-center body font-medium"}),e(c,{slot:"next",size:"icon",children:t==="rtl"?e(u,{"aria-hidden":!0}):e(s,{"aria-hidden":!0})})]})}function g({className:a,...t}){return e(H,{className:n(" border-separate border-spacing-x-0 border-spacing-y-1 ",a),...t})}const C=y;function h({className:a,...t}){return e(N,{className:n("w-9 body-sm font-normal text-muted-foreground",a),...t})}function x({className:a,...t}){return e(R,{className:n("[&>tr>td]:p-0",a),...t})}function p({className:a,...t}){const i=!!E($);return e(w,{className:l(a,(d,r)=>n(I({variant:"ghost",size:"icon"}),r.isDisabled&&"text-muted-foreground opacity-50",r.isSelected&&"bg-primary text-primary-foreground data-[focused]:bg-primary data-[focused]:text-primary-foreground",r.isHovered&&r.isSelected&&(r.isSelectionStart||r.isSelectionEnd||!i)&&"data-[hovered]:bg-primary data-[hovered]:text-primary-foreground",r.isSelected&&i&&!r.isSelectionStart&&!r.isSelectionEnd&&"rounded-none bg-accent text-accent-foreground",r.isOutsideMonth&&"text-muted-foreground opacity-50 data-[selected]:bg-accent/50 data-[selected]:text-muted-foreground data-[selected]:opacity-30",r.date.compare(b(v()))===0&&!r.isSelected&&"bg-accent text-accent-foreground",r.isUnavailable&&"cursor-default text-destructive ",r.isInvalid&&"bg-destructive text-destructive-foreground data-[focused]:bg-destructive data-[hovered]:bg-destructive data-[focused]:text-destructive-foreground data-[hovered]:text-destructive-foreground",d)),...t})}function K({errorMessage:a,className:t,...i}){return o(B,{className:l(t,d=>n("w-fit",d)),...i,children:[e(f,{}),o(g,{children:[e(C,{children:d=>e(h,{children:d})}),e(x,{children:d=>e(p,{date:d})})]}),a&&e(m,{children:a})]})}function M({errorMessage:a,className:t,...i}){return o(z,{className:l(t,d=>n("w-fit",d)),...i,children:[e(f,{}),o(g,{children:[e(C,{children:d=>e(h,{children:d})}),e(x,{children:d=>e(p,{date:d})})]}),a&&e(m,{slot:"errorMessage",children:a})]})}export{K as Calendar,p as CalendarCell,g as CalendarGrid,x as CalendarGridBody,C as CalendarGridHeader,h as CalendarHeaderCell,f as CalendarHeading,M as RangeCalendar};
|
|
2
2
|
//# sourceMappingURL=calendar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.js","sources":["../../lib/components/calendar.tsx"],"sourcesContent":["'use client';\nimport { getLocalTimeZone, today } from '@internationalized/date';\nimport {\n Calendar as AriaCalendar,\n CalendarCell as AriaCalendarCell,\n CalendarCellProps as AriaCalendarCellProps,\n CalendarGrid as AriaCalendarGrid,\n CalendarGridBody as AriaCalendarGridBody,\n CalendarGridBodyProps as AriaCalendarGridBodyProps,\n CalendarGridHeader as AriaCalendarGridHeader,\n CalendarGridProps as AriaCalendarGridProps,\n CalendarHeaderCell as AriaCalendarHeaderCell,\n CalendarHeaderCellProps as AriaCalendarHeaderCellProps,\n CalendarProps as AriaCalendarProps,\n DateValue as AriaDateValue,\n Heading as AriaHeading,\n RangeCalendar as AriaRangeCalendar,\n RangeCalendarProps as AriaRangeCalendarProps,\n RangeCalendarStateContext as AriaRangeCalendarStateContext,\n composeRenderProps,\n useLocale,\n} from 'react-aria-components';\n\nimport { use } from 'react';\nimport { Button, buttonVariants } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { FormFieldError } from './form';\nimport { IcLeft, IcRight } from './icons';\n\n/**\n * Calendar header with navigation buttons and month/year display.\n */\nexport function CalendarHeading(props: React.HTMLAttributes<HTMLElement>) {\n let { direction } = useLocale();\n\n return (\n <header className=\"flex w-full items-center gap-1 px-1 pb-icon\" {...props}>\n <Button slot=\"previous\" size=\"icon\">\n {direction === 'rtl' ? <IcRight aria-hidden /> : <IcLeft aria-hidden />}\n </Button>\n <AriaHeading className=\"grow text-center body font-medium\" />\n <Button slot=\"next\" size=\"icon\">\n {direction === 'rtl' ? <IcLeft aria-hidden /> : <IcRight aria-hidden />}\n </Button>\n </header>\n );\n}\n\n/**\n * Grid container for calendar cells with proper spacing.\n */\nexport function CalendarGrid({ className, ...props }: AriaCalendarGridProps) {\n return (\n <AriaCalendarGrid\n className={classNames(' border-separate border-spacing-x-0 border-spacing-y-1 ', className)}\n {...props}\n />\n );\n}\n\nexport const CalendarGridHeader = AriaCalendarGridHeader;\n\n/**\n * Header cell displaying day of week abbreviation.\n */\nexport function CalendarHeaderCell({ className, ...props }: AriaCalendarHeaderCellProps) {\n return (\n <AriaCalendarHeaderCell\n className={classNames('w-9 body-sm font-normal text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\n/**\n * Body container for calendar date cells.\n */\nexport function CalendarGridBody({ className, ...props }: AriaCalendarGridBodyProps) {\n return <AriaCalendarGridBody className={classNames('[&>tr>td]:p-0', className)} {...props} />;\n}\n\n/**\n * Individual calendar date cell with selection, hover, and availability states.\n * Automatically adapts styling for range selection contexts.\n */\nexport function CalendarCell({ className, ...props }: AriaCalendarCellProps) {\n const isRange = Boolean(use(AriaRangeCalendarStateContext));\n return (\n <AriaCalendarCell\n className={composeRenderProps(className, (className, renderProps) =>\n classNames(\n buttonVariants({ variant: 'ghost', size: 'icon' }),\n /* Disabled */\n renderProps.isDisabled && 'text-muted-foreground opacity-50',\n /* Selected */\n renderProps.isSelected &&\n 'bg-primary text-primary-foreground data-[focused]:bg-primary data-[focused]:text-primary-foreground',\n /* Hover */\n renderProps.isHovered &&\n renderProps.isSelected &&\n (renderProps.isSelectionStart || renderProps.isSelectionEnd || !isRange) &&\n 'data-[hovered]:bg-primary data-[hovered]:text-primary-foreground',\n /* Selection Start/End */\n renderProps.isSelected &&\n isRange &&\n !renderProps.isSelectionStart &&\n !renderProps.isSelectionEnd &&\n 'rounded-none bg-accent text-accent-foreground',\n /* Outside Month */\n renderProps.isOutsideMonth &&\n 'text-muted-foreground opacity-50 data-[selected]:bg-accent/50 data-[selected]:text-muted-foreground data-[selected]:opacity-30',\n /* Current Date */\n renderProps.date.compare(today(getLocalTimeZone())) === 0 &&\n !renderProps.isSelected &&\n 'bg-accent text-accent-foreground',\n /* Unavailable Date */\n renderProps.isUnavailable && 'cursor-default text-destructive ',\n renderProps.isInvalid &&\n 'bg-destructive text-destructive-foreground data-[focused]:bg-destructive data-[hovered]:bg-destructive data-[focused]:text-destructive-foreground data-[hovered]:text-destructive-foreground',\n className\n )\n )}\n {...props}\n />\n );\n}\n\ninterface CalendarProps<T extends AriaDateValue> extends AriaCalendarProps<T> {\n /** Error message to display below the calendar */\n errorMessage?: string;\n}\n\n/**\n * Calendar component for single date selection.\n *\n * @example Basic usage\n * ```tsx\n * <Calendar defaultValue={today(getLocalTimeZone())} />\n * ```\n */\nexport function Calendar<T extends AriaDateValue>({ errorMessage, className, ...props }: CalendarProps<T>) {\n return (\n <AriaCalendar className={composeRenderProps(className, className => classNames('w-fit', className))} {...props}>\n <CalendarHeading />\n <CalendarGrid>\n <CalendarGridHeader>{day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>\n <CalendarGridBody>{date => <CalendarCell date={date} />}</CalendarGridBody>\n </CalendarGrid>\n {errorMessage && <FormFieldError>{errorMessage}</FormFieldError>}\n </AriaCalendar>\n );\n}\n\ninterface RangeCalendarProps<T extends AriaDateValue> extends AriaRangeCalendarProps<T> {\n /** Error message to display below the calendar */\n errorMessage?: string;\n}\n\n/**\n * Calendar component for date range selection.\n *\n * @example Basic range selection\n * ```tsx\n * <RangeCalendar\n * defaultValue={{\n * start: today(getLocalTimeZone()),\n * end: today(getLocalTimeZone()).add({ days: 7 })\n * }}\n * />\n * ```\n */\nexport function RangeCalendar<T extends AriaDateValue>({ errorMessage, className, ...props }: RangeCalendarProps<T>) {\n return (\n <AriaRangeCalendar\n className={composeRenderProps(className, className => classNames('w-fit', className))}\n {...props}\n >\n <CalendarHeading />\n <CalendarGrid>\n <CalendarGridHeader>{day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>\n <CalendarGridBody>{date => <CalendarCell date={date} />}</CalendarGridBody>\n </CalendarGrid>\n {errorMessage && <FormFieldError slot=\"errorMessage\">{errorMessage}</FormFieldError>}\n </AriaRangeCalendar>\n );\n}\n"],"names":["CalendarHeading","props","direction","useLocale","jsxs","jsx","Button","IcRight","IcLeft","AriaHeading","CalendarGrid","className","AriaCalendarGrid","classNames","CalendarGridHeader","AriaCalendarGridHeader","CalendarHeaderCell","AriaCalendarHeaderCell","CalendarGridBody","AriaCalendarGridBody","CalendarCell","isRange","use","AriaRangeCalendarStateContext","AriaCalendarCell","composeRenderProps","renderProps","buttonVariants","today","getLocalTimeZone","Calendar","errorMessage","AriaCalendar","day","date","FormFieldError","RangeCalendar","AriaRangeCalendar"],"mappings":"8rBAgCO,SAASA,EAAgBC,EAA0C,CACtE,GAAI,CAAE,UAAAC,CAAA,EAAcC,EAAA,EAEpB,OACIC,EAAC,SAAA,CAAO,UAAU,8CAA+C,GAAGH,EAChE,SAAA,CAAAI,EAACC,GAAO,KAAK,WAAW,KAAK,OACxB,aAAc,MAAQD,EAACE,EAAA,CAAQ,cAAW,GAAC,EAAKF,EAACG,EAAA,CAAO,cAAW,GAAC,EACzE,EACAH,EAACI,EAAA,CAAY,UAAU,mCAAA,CAAoC,IAC1DH,EAAA,CAAO,KAAK,OAAO,KAAK,OACpB,SAAAJ,IAAc,MAAQG,EAACG,EAAA,CAAO,cAAW,EAAA,CAAC,IAAMD,EAAA,CAAQ,cAAW,GAAC,CAAA,CACzE,CAAA,EACJ,CAER,CAKO,SAASG,EAAa,CAAE,UAAAC,EAAW,GAAGV,GAAgC,CACzE,OACII,EAACO,EAAA,CACG,UAAWC,EAAW,0DAA2DF,CAAS,EACzF,GAAGV,CAAA,CAAA,CAGhB,CAEO,MAAMa,EAAqBC,EAK3B,SAASC,EAAmB,CAAE,UAAAL,EAAW,GAAGV,GAAsC,CACrF,OACII,EAACY,EAAA,CACG,UAAWJ,EAAW,gDAAiDF,CAAS,EAC/E,GAAGV,CAAA,CAAA,CAGhB,CAKO,SAASiB,EAAiB,CAAE,UAAAP,EAAW,GAAGV,GAAoC,CACjF,OAAOI,EAACc,GAAqB,UAAWN,EAAW,gBAAiBF,CAAS,EAAI,GAAGV,EAAO,CAC/F,CAMO,SAASmB,EAAa,CAAE,UAAAT,EAAW,GAAGV,GAAgC,CACzE,MAAMoB,EAAU,EAAQC,EAAIC,CAA6B,EACzD,OACIlB,EAACmB,EAAA,CACG,UAAWC,EAAmBd,EAAW,CAACA,EAAWe,IACjDb,EACIc,EAAe,CAAE,QAAS,QAAS,KAAM,OAAQ,EAEjDD,EAAY,YAAc,mCAE1BA,EAAY,YACR,uGAEJA,EAAY,WACRA,EAAY,aACXA,EAAY,kBAAoBA,EAAY,gBAAkB,CAACL,IAChE,mEAEJK,EAAY,YACRL,GACA,CAACK,EAAY,kBACb,CAACA,EAAY,gBACb,gDAEJA,EAAY,gBACR,iIAEJA,EAAY,KAAK,QAAQE,EAAMC,EAAA,CAAkB,CAAC,IAAM,GACpD,CAACH,EAAY,YACb,mCAEJA,EAAY,eAAiB,mCAC7BA,EAAY,WACR,+LACJf,CAAA,CACJ,EAEH,GAAGV,CAAA,CAAA,CAGhB,CAeO,SAAS6B,EAAkC,CAAE,aAAAC,EAAc,UAAApB,EAAW,GAAGV,GAA2B,CACvG,OACIG,EAAC4B,EAAA,CAAa,UAAWP,EAAmBd,EAAWA,GAAaE,EAAW,QAASF,CAAS,CAAC,EAAI,GAAGV,EACrG,SAAA,CAAAI,EAACL,EAAA,EAAgB,IAChBU,EAAA,CACG,SAAA,CAAAL,EAACS,EAAA,CAAoB,SAAAmB,GAAO5B,EAACW,EAAA,CAAoB,WAAI,CAAA,CAAsB,IAC1EE,EAAA,CAAkB,SAAAgB,GAAQ7B,EAACe,EAAA,CAAa,KAAAc,EAAY,CAAA,CAAG,CAAA,EAC5D,EACCH,GAAgB1B,EAAC8B,EAAA,CAAgB,SAAAJ,CAAA,CAAa,CAAA,EACnD,CAER,CAoBO,SAASK,EAAuC,CAAE,aAAAL,EAAc,UAAApB,EAAW,GAAGV,GAAgC,CACjH,OACIG,EAACiC,EAAA,CACG,UAAWZ,EAAmBd,EAAWA,GAAaE,EAAW,QAASF,CAAS,CAAC,EACnF,GAAGV,EAEJ,SAAA,CAAAI,EAACL,EAAA,EAAgB,IAChBU,EAAA,CACG,SAAA,CAAAL,EAACS,EAAA,CAAoB,SAAAmB,GAAO5B,EAACW,EAAA,CAAoB,WAAI,CAAA,CAAsB,IAC1EE,EAAA,CAAkB,SAAAgB,GAAQ7B,EAACe,EAAA,CAAa,KAAAc,EAAY,CAAA,CAAG,CAAA,EAC5D,EACCH,GAAgB1B,EAAC8B,EAAA,CAAe,KAAK,eAAgB,SAAAJ,CAAA,CAAa,CAAA,CAAA,CAAA,CAG/E"}
|
|
1
|
+
{"version":3,"file":"calendar.js","sources":["../../lib/components/calendar.tsx"],"sourcesContent":["'use client';\nimport { getLocalTimeZone, today } from '@internationalized/date';\nimport {\n Calendar as AriaCalendar,\n CalendarCell as AriaCalendarCell,\n CalendarCellProps as AriaCalendarCellProps,\n CalendarGrid as AriaCalendarGrid,\n CalendarGridBody as AriaCalendarGridBody,\n CalendarGridBodyProps as AriaCalendarGridBodyProps,\n CalendarGridHeader as AriaCalendarGridHeader,\n CalendarGridProps as AriaCalendarGridProps,\n CalendarHeaderCell as AriaCalendarHeaderCell,\n CalendarHeaderCellProps as AriaCalendarHeaderCellProps,\n CalendarProps as AriaCalendarProps,\n DateValue as AriaDateValue,\n Heading as AriaHeading,\n RangeCalendar as AriaRangeCalendar,\n RangeCalendarProps as AriaRangeCalendarProps,\n RangeCalendarStateContext as AriaRangeCalendarStateContext,\n composeRenderProps,\n useLocale,\n} from 'react-aria-components';\n\nimport { use } from 'react';\nimport { Button, buttonVariants } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { FormFieldError } from './form';\nimport { IcLeft, IcRight } from './icons';\n\n/**\n * Calendar header with navigation buttons and month/year display.\n */\nexport function CalendarHeading(props: React.HTMLAttributes<HTMLElement>) {\n let { direction } = useLocale();\n\n return (\n <header className=\"flex w-full items-center gap-1 px-1 pb-icon\" {...props}>\n <Button slot=\"previous\" size=\"icon\">\n {direction === 'rtl' ? <IcRight aria-hidden /> : <IcLeft aria-hidden />}\n </Button>\n <AriaHeading className=\"grow text-center body font-medium\" />\n <Button slot=\"next\" size=\"icon\">\n {direction === 'rtl' ? <IcLeft aria-hidden /> : <IcRight aria-hidden />}\n </Button>\n </header>\n );\n}\n\n/**\n * Grid container for calendar cells with proper spacing.\n */\nexport function CalendarGrid({ className, ...props }: AriaCalendarGridProps) {\n return (\n <AriaCalendarGrid\n className={classNames(' border-separate border-spacing-x-0 border-spacing-y-1 ', className)}\n {...props}\n />\n );\n}\n\nexport const CalendarGridHeader = AriaCalendarGridHeader;\n\n/**\n * Header cell displaying day of week abbreviation.\n */\nexport function CalendarHeaderCell({ className, ...props }: AriaCalendarHeaderCellProps) {\n return (\n <AriaCalendarHeaderCell\n className={classNames('w-9 body-sm font-normal text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\n/**\n * Body container for calendar date cells.\n */\nexport function CalendarGridBody({ className, ...props }: AriaCalendarGridBodyProps) {\n return <AriaCalendarGridBody className={classNames('[&>tr>td]:p-0', className)} {...props} />;\n}\n\n/**\n * Individual calendar date cell with selection, hover, and availability states.\n * Automatically adapts styling for range selection contexts.\n */\nexport function CalendarCell({ className, ...props }: AriaCalendarCellProps) {\n const isRange = Boolean(use(AriaRangeCalendarStateContext));\n return (\n <AriaCalendarCell\n className={composeRenderProps(className, (className, renderProps) =>\n classNames(\n buttonVariants({ variant: 'ghost', size: 'icon' }),\n /* Disabled */\n renderProps.isDisabled && 'text-muted-foreground opacity-50',\n /* Selected */\n renderProps.isSelected &&\n 'bg-primary text-primary-foreground data-[focused]:bg-primary data-[focused]:text-primary-foreground',\n /* Hover */\n renderProps.isHovered &&\n renderProps.isSelected &&\n (renderProps.isSelectionStart || renderProps.isSelectionEnd || !isRange) &&\n 'data-[hovered]:bg-primary data-[hovered]:text-primary-foreground',\n /* Selection Start/End */\n renderProps.isSelected &&\n isRange &&\n !renderProps.isSelectionStart &&\n !renderProps.isSelectionEnd &&\n 'rounded-none bg-accent text-accent-foreground',\n /* Outside Month */\n renderProps.isOutsideMonth &&\n 'text-muted-foreground opacity-50 data-[selected]:bg-accent/50 data-[selected]:text-muted-foreground data-[selected]:opacity-30',\n /* Current Date */\n renderProps.date.compare(today(getLocalTimeZone())) === 0 &&\n !renderProps.isSelected &&\n 'bg-accent text-accent-foreground',\n /* Unavailable Date */\n renderProps.isUnavailable && 'cursor-default text-destructive ',\n renderProps.isInvalid &&\n 'bg-destructive text-destructive-foreground data-[focused]:bg-destructive data-[hovered]:bg-destructive data-[focused]:text-destructive-foreground data-[hovered]:text-destructive-foreground',\n className\n )\n )}\n {...props}\n />\n );\n}\n\ninterface CalendarProps<T extends AriaDateValue> extends AriaCalendarProps<T> {\n /** Error message to display below the calendar */\n errorMessage?: string;\n}\n\n/**\n * Calendar component for single date selection.\n *\n * @example Basic usage\n * ```tsx\n * <Calendar defaultValue={today(getLocalTimeZone())} />\n * ```\n */\nexport function Calendar<T extends AriaDateValue>({ errorMessage, className, ...props }: CalendarProps<T>) {\n return (\n <AriaCalendar className={composeRenderProps(className, className => classNames('w-fit', className))} {...props}>\n <CalendarHeading />\n <CalendarGrid>\n <CalendarGridHeader>{day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>\n <CalendarGridBody>{date => <CalendarCell date={date} />}</CalendarGridBody>\n </CalendarGrid>\n {errorMessage && <FormFieldError>{errorMessage}</FormFieldError>}\n </AriaCalendar>\n );\n}\n\ninterface RangeCalendarProps<T extends AriaDateValue> extends AriaRangeCalendarProps<T> {\n /** Error message to display below the calendar */\n errorMessage?: string;\n}\n\n/**\n * Calendar component for date range selection.\n *\n * @example Basic range selection\n * ```tsx\n * <RangeCalendar\n * defaultValue={{\n * start: today(getLocalTimeZone()),\n * end: today(getLocalTimeZone()).add({ days: 7 })\n * }}\n * />\n * ```\n */\nexport function RangeCalendar<T extends AriaDateValue>({ errorMessage, className, ...props }: RangeCalendarProps<T>) {\n return (\n <AriaRangeCalendar\n className={composeRenderProps(className, className => classNames('w-fit', className))}\n {...props}\n >\n <CalendarHeading />\n <CalendarGrid>\n <CalendarGridHeader>{day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>\n <CalendarGridBody>{date => <CalendarCell date={date} />}</CalendarGridBody>\n </CalendarGrid>\n {errorMessage && <FormFieldError slot=\"errorMessage\">{errorMessage}</FormFieldError>}\n </AriaRangeCalendar>\n );\n}\n"],"names":["CalendarHeading","props","direction","useLocale","jsxs","jsx","Button","IcRight","IcLeft","AriaHeading","CalendarGrid","className","AriaCalendarGrid","classNames","CalendarGridHeader","AriaCalendarGridHeader","CalendarHeaderCell","AriaCalendarHeaderCell","CalendarGridBody","AriaCalendarGridBody","CalendarCell","isRange","use","AriaRangeCalendarStateContext","AriaCalendarCell","composeRenderProps","renderProps","buttonVariants","today","getLocalTimeZone","Calendar","errorMessage","AriaCalendar","day","date","FormFieldError","RangeCalendar","AriaRangeCalendar"],"mappings":"quBAgCO,SAASA,EAAgBC,EAA0C,CACtE,GAAI,CAAE,UAAAC,CAAA,EAAcC,EAAA,EAEpB,OACIC,EAAC,SAAA,CAAO,UAAU,8CAA+C,GAAGH,EAChE,SAAA,CAAAI,EAACC,GAAO,KAAK,WAAW,KAAK,OACxB,aAAc,MAAQD,EAACE,EAAA,CAAQ,cAAW,GAAC,EAAKF,EAACG,EAAA,CAAO,cAAW,GAAC,EACzE,EACAH,EAACI,EAAA,CAAY,UAAU,mCAAA,CAAoC,IAC1DH,EAAA,CAAO,KAAK,OAAO,KAAK,OACpB,SAAAJ,IAAc,MAAQG,EAACG,EAAA,CAAO,cAAW,EAAA,CAAC,IAAMD,EAAA,CAAQ,cAAW,GAAC,CAAA,CACzE,CAAA,EACJ,CAER,CAKO,SAASG,EAAa,CAAE,UAAAC,EAAW,GAAGV,GAAgC,CACzE,OACII,EAACO,EAAA,CACG,UAAWC,EAAW,0DAA2DF,CAAS,EACzF,GAAGV,CAAA,CAAA,CAGhB,CAEO,MAAMa,EAAqBC,EAK3B,SAASC,EAAmB,CAAE,UAAAL,EAAW,GAAGV,GAAsC,CACrF,OACII,EAACY,EAAA,CACG,UAAWJ,EAAW,gDAAiDF,CAAS,EAC/E,GAAGV,CAAA,CAAA,CAGhB,CAKO,SAASiB,EAAiB,CAAE,UAAAP,EAAW,GAAGV,GAAoC,CACjF,OAAOI,EAACc,GAAqB,UAAWN,EAAW,gBAAiBF,CAAS,EAAI,GAAGV,EAAO,CAC/F,CAMO,SAASmB,EAAa,CAAE,UAAAT,EAAW,GAAGV,GAAgC,CACzE,MAAMoB,EAAU,EAAQC,EAAIC,CAA6B,EACzD,OACIlB,EAACmB,EAAA,CACG,UAAWC,EAAmBd,EAAW,CAACA,EAAWe,IACjDb,EACIc,EAAe,CAAE,QAAS,QAAS,KAAM,OAAQ,EAEjDD,EAAY,YAAc,mCAE1BA,EAAY,YACR,uGAEJA,EAAY,WACRA,EAAY,aACXA,EAAY,kBAAoBA,EAAY,gBAAkB,CAACL,IAChE,mEAEJK,EAAY,YACRL,GACA,CAACK,EAAY,kBACb,CAACA,EAAY,gBACb,gDAEJA,EAAY,gBACR,iIAEJA,EAAY,KAAK,QAAQE,EAAMC,EAAA,CAAkB,CAAC,IAAM,GACpD,CAACH,EAAY,YACb,mCAEJA,EAAY,eAAiB,mCAC7BA,EAAY,WACR,+LACJf,CAAA,CACJ,EAEH,GAAGV,CAAA,CAAA,CAGhB,CAeO,SAAS6B,EAAkC,CAAE,aAAAC,EAAc,UAAApB,EAAW,GAAGV,GAA2B,CACvG,OACIG,EAAC4B,EAAA,CAAa,UAAWP,EAAmBd,EAAWA,GAAaE,EAAW,QAASF,CAAS,CAAC,EAAI,GAAGV,EACrG,SAAA,CAAAI,EAACL,EAAA,EAAgB,IAChBU,EAAA,CACG,SAAA,CAAAL,EAACS,EAAA,CAAoB,SAAAmB,GAAO5B,EAACW,EAAA,CAAoB,WAAI,CAAA,CAAsB,IAC1EE,EAAA,CAAkB,SAAAgB,GAAQ7B,EAACe,EAAA,CAAa,KAAAc,EAAY,CAAA,CAAG,CAAA,EAC5D,EACCH,GAAgB1B,EAAC8B,EAAA,CAAgB,SAAAJ,CAAA,CAAa,CAAA,EACnD,CAER,CAoBO,SAASK,EAAuC,CAAE,aAAAL,EAAc,UAAApB,EAAW,GAAGV,GAAgC,CACjH,OACIG,EAACiC,EAAA,CACG,UAAWZ,EAAmBd,EAAWA,GAAaE,EAAW,QAASF,CAAS,CAAC,EACnF,GAAGV,EAEJ,SAAA,CAAAI,EAACL,EAAA,EAAgB,IAChBU,EAAA,CACG,SAAA,CAAAL,EAACS,EAAA,CAAoB,SAAAmB,GAAO5B,EAACW,EAAA,CAAoB,WAAI,CAAA,CAAsB,IAC1EE,EAAA,CAAkB,SAAAgB,GAAQ7B,EAACe,EAAA,CAAa,KAAAc,EAAY,CAAA,CAAG,CAAA,EAC5D,EACCH,GAAgB1B,EAAC8B,EAAA,CAAe,KAAK,eAAgB,SAAAJ,CAAA,CAAa,CAAA,CAAA,CAAA,CAG/E"}
|
|
@@ -1,2 +1,2 @@
|
|
|
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",
|
|
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";import"@icons-pack/react-simple-icons";const c="group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50",a="group-data-[invalid]/checkbox:border-destructive",p="focus:outline-none focus-visible:outline-none",x="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"},W=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,x,c,a,"group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive",p),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",x,"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",p,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 X({...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,W as CheckboxGroup,X 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};\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":"
|
|
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":"wiBAcA,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
|
-
import"react/jsx-runtime";import"@internationalized/date";import"react";import"./button.js";import{C as
|
|
1
|
+
import"react/jsx-runtime";import"@internationalized/date";import"react";import"./button.js";import{C as Z,D as $,F as rr}from"./data-table.js";import"./date-picker.js";import"./menu.js";import"./multi-select.js";import"./numberfield.js";import"./popover.js";import"./textfield.js";import"../utilities/date.js";import"../utilities/resources.js";import"../utilities/theme.js";import"./icons.js";import"./id-search.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";import"@dnd-kit/core";import"@dnd-kit/sortable";import"@dnd-kit/utilities";import"@tanstack/react-query";import"@tanstack/react-table";import"@uidotdev/usehooks";import"lodash-es";import"./badge.js";import"./searchfield.js";import"./form.js";import"./card.js";import"./table.js";import"../utilities/countries.js";import"./select-options.js";import"../utilities/string.js";import"../utilities/duration.js";import"../utilities/numbers.js";import"./checkbox.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./tooltip.js";import"../utilities/ctx-client.js";import"./dialog.js";import"./calendar.js";import"./datefield.js";import"../utilities/form.js";import"./list-box.js";import"./select.js";import"./kbd.js";import"../utilities/empty-option.js";export{Z as COMPARISON_OPERATOR_LABELS,$ as DataTableFilter,rr as FILTER_COMPARISON_OPERATORS};
|
|
2
2
|
//# sourceMappingURL=data-table-filter.js.map
|
|
@@ -13,7 +13,7 @@ declare module '@tanstack/react-table' {
|
|
|
13
13
|
displayType: DisplayType;
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
-
type
|
|
16
|
+
type DataTableFactoryBase<T extends object, TOperation extends keyof operations, TFilterConfig extends FiltersConfig<TOperation> = FiltersConfig<TOperation>> = {
|
|
17
17
|
path: NoInfer<ClientPathsWithMethod<CtxClientType, 'get'>>;
|
|
18
18
|
pathParameters?: NoInfer<ApiPathParameters<TOperation>>;
|
|
19
19
|
columns: ColumnDef<T, any>[];
|
|
@@ -22,11 +22,18 @@ type DataTableFactory<T extends object, TOperation extends keyof operations, TFi
|
|
|
22
22
|
allowSelection?: boolean;
|
|
23
23
|
filterConfig: TFilterConfig;
|
|
24
24
|
initialFilters: TableFilter[];
|
|
25
|
-
Card?: (item: T, actions: SingleResourceAction<T>[], selection: CardSelectionProps) => React.ReactNode;
|
|
26
25
|
previewFilters?: (keyof TFilterConfig)[];
|
|
27
26
|
/** When provided, each row becomes a navigable link. Called with the row's data on click or Enter. */
|
|
28
27
|
onRowNavigate?: (row: T) => void;
|
|
29
28
|
};
|
|
29
|
+
type CardRenderer<T> = (item: T, actions: SingleResourceAction<T>[], selection: CardSelectionProps) => React.ReactNode;
|
|
30
|
+
type DataTableFactory<T extends object, TOperation extends keyof operations, TFilterConfig extends FiltersConfig<TOperation> = FiltersConfig<TOperation>> = DataTableFactoryBase<T, TOperation, TFilterConfig> & ({
|
|
31
|
+
disableTableView: true;
|
|
32
|
+
Card: CardRenderer<T>;
|
|
33
|
+
} | {
|
|
34
|
+
disableTableView?: false;
|
|
35
|
+
Card?: CardRenderer<T>;
|
|
36
|
+
});
|
|
30
37
|
type DataTableState = {
|
|
31
38
|
sorting: SortingState;
|
|
32
39
|
pagination: PaginationState;
|
|
@@ -35,7 +42,7 @@ export declare function getColumnHelper<O extends keyof operations>(): ColumnHel
|
|
|
35
42
|
/**
|
|
36
43
|
* Hook for handling all data-table state. Used in DataTableContext
|
|
37
44
|
*/
|
|
38
|
-
export declare function useDataTableState<T extends object, TOperation extends keyof operations, TFilterConfig extends FiltersConfig<TOperation> = FiltersConfig<TOperation>>({ path, pathParameters, columns, filterConfig, columnsToHideByDefault, allowSelection, initialFilters, previewFilters, tableActions, Card, onRowNavigate, }: DataTableFactory<T, TOperation, TFilterConfig>): {
|
|
45
|
+
export declare function useDataTableState<T extends object, TOperation extends keyof operations, TFilterConfig extends FiltersConfig<TOperation> = FiltersConfig<TOperation>>({ path, pathParameters, columns, filterConfig, columnsToHideByDefault, allowSelection, initialFilters, previewFilters, tableActions, Card, onRowNavigate, disableTableView, }: DataTableFactory<T, TOperation, TFilterConfig>): {
|
|
39
46
|
readonly tableState: DataTableState;
|
|
40
47
|
readonly updateTableState: (updates: Partial<DataTableState>) => void;
|
|
41
48
|
readonly query: import('@tanstack/react-query').QueryObserverRefetchErrorResult<{
|
|
@@ -349,7 +356,7 @@ export declare function useDataTableState<T extends object, TOperation extends k
|
|
|
349
356
|
readonly pathParameters: NoInfer<ApiPathParameters<TOperation>> | undefined;
|
|
350
357
|
readonly viewMode: "card" | "table";
|
|
351
358
|
readonly setViewMode: import('react').Dispatch<import('react').SetStateAction<"card" | "table">>;
|
|
352
|
-
readonly Card:
|
|
359
|
+
readonly Card: CardRenderer<T> | undefined;
|
|
353
360
|
readonly allowSelection: boolean;
|
|
354
361
|
readonly previewFilters: (keyof TFilterConfig)[] | undefined;
|
|
355
362
|
readonly infiniteQuery: import('@tanstack/react-query').UseInfiniteQueryResult<import('@tanstack/react-query').InfiniteData<{
|
|
@@ -357,6 +364,7 @@ export declare function useDataTableState<T extends object, TOperation extends k
|
|
|
357
364
|
total: number;
|
|
358
365
|
nextPage: number;
|
|
359
366
|
}, unknown>, Error>;
|
|
367
|
+
readonly disableTableView: boolean | undefined;
|
|
360
368
|
readonly onRowNavigate: ((row: T) => void) | undefined;
|
|
361
369
|
};
|
|
362
370
|
export declare const DataTableContext: import('react').Context<{
|
|
@@ -1139,7 +1147,7 @@ export declare const DataTableContext: import('react').Context<{
|
|
|
1139
1147
|
} | undefined> | undefined;
|
|
1140
1148
|
readonly viewMode: "card" | "table";
|
|
1141
1149
|
readonly setViewMode: import('react').Dispatch<import('react').SetStateAction<"card" | "table">>;
|
|
1142
|
-
readonly Card:
|
|
1150
|
+
readonly Card: CardRenderer<object> | undefined;
|
|
1143
1151
|
readonly allowSelection: boolean;
|
|
1144
1152
|
readonly previewFilters: string[] | undefined;
|
|
1145
1153
|
readonly infiniteQuery: import('@tanstack/react-query').UseInfiniteQueryResult<import('@tanstack/react-query').InfiniteData<{
|
|
@@ -1147,6 +1155,7 @@ export declare const DataTableContext: import('react').Context<{
|
|
|
1147
1155
|
total: number;
|
|
1148
1156
|
nextPage: number;
|
|
1149
1157
|
}, unknown>, Error>;
|
|
1158
|
+
readonly disableTableView: boolean | undefined;
|
|
1150
1159
|
readonly onRowNavigate: ((row: object) => void) | undefined;
|
|
1151
1160
|
} | null>;
|
|
1152
1161
|
export declare function useDataTable(): {
|
|
@@ -1929,7 +1938,7 @@ export declare function useDataTable(): {
|
|
|
1929
1938
|
} | undefined> | undefined;
|
|
1930
1939
|
readonly viewMode: "card" | "table";
|
|
1931
1940
|
readonly setViewMode: import('react').Dispatch<import('react').SetStateAction<"card" | "table">>;
|
|
1932
|
-
readonly Card:
|
|
1941
|
+
readonly Card: CardRenderer<object> | undefined;
|
|
1933
1942
|
readonly allowSelection: boolean;
|
|
1934
1943
|
readonly previewFilters: string[] | undefined;
|
|
1935
1944
|
readonly infiniteQuery: import('@tanstack/react-query').UseInfiniteQueryResult<import('@tanstack/react-query').InfiniteData<{
|
|
@@ -1937,6 +1946,7 @@ export declare function useDataTable(): {
|
|
|
1937
1946
|
total: number;
|
|
1938
1947
|
nextPage: number;
|
|
1939
1948
|
}, unknown>, Error>;
|
|
1949
|
+
readonly disableTableView: boolean | undefined;
|
|
1940
1950
|
readonly onRowNavigate: ((row: object) => void) | undefined;
|
|
1941
1951
|
};
|
|
1942
1952
|
export declare function DataTableProvider<T extends object, TOperation extends keyof operations>({ children, ...props }: {
|
|
@@ -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 Me,useState as O,useMemo as K,useEffect as X,useContext as Le,useRef as Se}from"react";import{Button as y}from"./button.js";import{useSensors as _e,useSensor as ce,PointerSensor as $e,KeyboardSensor as je,DndContext as qe,closestCenter as Ee,DragOverlay as ke}from"@dnd-kit/core";import{sortableKeyboardCoordinates as He,SortableContext as Ve,verticalListSortingStrategy as Ke,arrayMove as Be,useSortable as Qe}from"@dnd-kit/sortable";import{CSS as Ge}from"@dnd-kit/utilities";import{useQuery as Ue,useInfiniteQuery as Ze}from"@tanstack/react-query";import{createColumnHelper as ye,useReactTable as Xe,getCoreRowModel as Ye,flexRender as U}from"@tanstack/react-table";import{useLocalStorage as B}from"@uidotdev/usehooks";import{merge as Je}from"lodash-es";import{Badge as ue}from"./badge.js";import{DatePicker as Q}from"./date-picker.js";import{EasyMenu as R,MenuItem as A}from"./menu.js";import{MultiSelect as We}from"./multi-select.js";import{NumberField as et}from"./numberfield.js";import{PopoverTrigger as tt,Popover as nt}from"./popover.js";import{TextField as rt}from"./textfield.js";import{formatDate as j}from"../utilities/date.js";import{useProjectName as Y,useResourceFormatter as J,ALL_OS as at}from"../utilities/resources.js";import{classNames as I}from"../utilities/theme.js";import{IcInfo as ot,IcMoreVertical as it,IcRefresh as st,IcMenu as lt,IcLayoutGrid as ct,IcColumns as ut,IcGrip as dt,IcFirst as mt,IcLeft as gt,IcRight as pt,IcLast as ft,IcSortAsc as bt,IcSortDesc as ht,IcSortNone as vt,IcCheck as de,IcMinus as St,IcAccount as yt,IcLicense as wt,IcDate as Nt,IcFile as xt,IcFilter as Ct}from"./icons.js";import{MultipleIdSearchInput as It}from"./id-search.js";import{Loader as we}from"./loader.js";import{SearchField as Pt}from"./searchfield.js";import{Table as Tt,TableHeader as At,TableRow as me,TableHead as Dt,TableBody as Ft,TableCell as Ot}from"./table.js";import{CountryName as Rt}from"../utilities/countries.js";import{Duration as zt}from"../utilities/duration.js";import{formatDays as Mt,formatFilesize as Lt,formatNumber as _t}from"../utilities/numbers.js";import{Checkbox as ge}from"./checkbox.js";import{TooltipTrigger as $t,Tooltip as jt}from"./tooltip.js";import{getSubscriptionStartTriggerLabel as qt,ALL_LICENSE_TYPES as Et}from"./select-options.js";import{useCtxClient as kt}from"../utilities/ctx-client.js";import{ControlledDialogProvider as Ht,useControlledDialog as Ne}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 Vt(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const xe=ye(),Kt=[xe.accessor("checkbox",{header:({table:e})=>t(ge,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all",size:"sm"}),cell:({row:e})=>t(ge,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row",size:"sm"}),enableSorting:!1,enableHiding:!1})],x="TableActions";function Bt(e){return e.length===0?[]:[xe.accessor(x,{header:"Actions",id:x,enableHiding:!1,cell:({row:r})=>t(en,{label:t(it,{}),data:r.original,items:e}),enableSorting:!1})]}function ar(){return ye()}function or({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,[_,g]=O(""),[p,f]=O({}),[S,$]=O(c),z=K(()=>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)=>Je(s,h),{}),[S]),q={...S,page:P.pageIndex+1,limit:P.pageSize,sort:Vt(D[0]),search:_},Te=kt(),ee=["get",e,q],E=`${e}_ctx`,[te,ne]=B(`${E}_column_order_preference`,[]),[re,Ae]=B(`${E}_column_visibility_preference`,{id:!1,...l}),[T,De]=B(`${E}_view_mode_preference`,"table"),k=s=>{w(h=>({...h,...s}))};async function ae(s){const h=await Te.GET(e,{params:{query:{page:s,limit:P.pageSize,sort:q.sort,search:q.search,...z},path:r}});return{data:h.data??[],total:Number.parseInt(h.response.headers.get("Pagination-Count")||"0"),nextPage:s+1}}const M=Ue({queryKey:[...ee,"table"],enabled:T==="table",queryFn:()=>ae(P.pageIndex+1),placeholderData:s=>s}),N=Ze({queryKey:[...ee,"card"],enabled:T==="card",initialPageParam:1,queryFn:({pageParam:s})=>ae(s),getNextPageParam:(s,h)=>h.flatMap(ze=>ze.data).length<s.total?s.nextPage:void 0}),oe=K(()=>T==="table"?M.data?.data??[]:N.data?.pages.flatMap(s=>s.data)??[],[T,M.data,N.data]),ie=K(()=>T==="table"?M.data?.total??0:N.data?.pages[0]?.total??0,[T,M.data,N.data]),se=T==="table"?M:{...N,data:{data:oe,total:ie},isLoading:N.isLoading,isFetching:N.isFetching,isError:N.isError,error:N.error,refetch:N.refetch},Fe=u.filter(W),Oe=[...n?Kt:[],...a,...Bt(Fe??[])];function Re(s){return typeof s=="function"}function L(s,h){return Re(s)?s(h):s}const le=Xe({data:oe,columns:Oe,getCoreRowModel:Ye(),rowCount:ie,manualPagination:!0,onPaginationChange:s=>{k({pagination:L(s,P)})},manualSorting:!0,onSortingChange:s=>{f({}),k({sorting:[...L(s,D)]})},manualFiltering:!0,onColumnVisibilityChange:s=>{Ae(L(s,re))},onRowSelectionChange:s=>{f(L(s,p))},onColumnOrderChange:s=>{ne(L(s,te))},state:{sorting:D,columnVisibility:re,pagination:P,rowSelection:p,columnOrder:te},meta:{refetch:se.refetch}});return X(()=>{const s=le.getAllLeafColumns();ne([...s.filter(h=>h.id!==x).map(h=>h.id),...s.filter(h=>h.id===x).map(h=>h.id)])},[]),{tableState:b,updateTableState:k,query:se,setSearchQuery:g,searchQuery:_,tanTable:le,mergedFilters:z,filters:S,setFilters:$,filterConfig:i,tableActions:u,pathParameters:r,viewMode:T,setViewMode:De,Card:m,allowSelection:n,previewFilters:o,infiniteQuery:N,onRowNavigate:v}}const Ce=Me(null);function C(){const e=Le(Ce);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function ir({children:e,...r}){return t(Ce.Provider,{value:r,children:e})}function sr({className:e,...r}){const{query:a,tanTable:i,viewMode:l,tableActions:n,Card:c}=C(),o=n.filter(W);return t(F,{children:d(Ht,{children:[t(Xt,{}),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(pe,{className:"cursor-wait",children:t(we,{})}),!a.isLoading&&i.getRowModel().rows.length===0&&t(pe,{className:"cursor-not-allowed",children:!a.isFetching&&(a.isError?d("span",{className:"flex gap-3 justify-center items-center",children:[t(ot,{}),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(Qt,{Card:c,actions:o}):t(Jt,{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(Gt,{}),t(Zt,{})]}),t(Ut,{})]})]})]})})}function Qt({Card:e,actions:r}){const{tanTable:a,allowSelection:i}=C(),{infiniteQuery:l}=C(),n=Se(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(we,{})})]})}function pe({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 Gt(){if(Y()==="customer-portal")return null;const{tanTable:r}=C(),[a,i]=O(null),l=J(),n=_e(ce($e),ce(je,{coordinateGetter:He}));return t(qe,{sensors:n,collisionDetection:Ee,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(Ve,{items:r.getState().columnOrder,strategy:Ke,children:[d(R,{label:d(F,{children:[t(ut,{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===x?null:t(c,{column:u},u.id)})]}),t(ke,{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}=Qe({id:o.id}),D={transform:Ge.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(dt,{...m,className:"size-icon cursor-grab"}),Z(o),o.getIsSorted()&&t(Ie,{className:"size-icon",direction:o.getIsSorted()})]})}}function Ut(){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(mt,{})}),t(y,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon-sm",children:t(gt,{})}),t(y,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon-sm",children:t(pt,{})}),t(y,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon-sm",children:t(ft,{})})]})]})}function Zt(){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 Xt(){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(st,{})}),t(Pt,{value:a,onChange:i}),t(on,{previewFilters:u})]}),d("div",{className:"flex gap-icon",children:[t(Wt,{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(lt,{})}),t(y,{variant:n==="card"?"primary":"neutral",size:"icon",onPress:()=>c("card"),"aria-label":"Card view",className:"border-none",children:t(ct,{})})]})]})]})}function Ie({direction:e,...r}){return e==="asc"?t(bt,{className:"size-3.5",...r}):e==="desc"?t(ht,{className:"size-3.5",...r}):t(vt,{className:"size-3.5",...r})}function Z(e){const r=J(),a=e.columnDef.header;return typeof a=="string"?a:r(e.id)}function Yt(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:j(a)});case"number":return t("span",{className:"block text-right tabular-nums",children:_t(a)});case"boolean":return t(ue,{variant:a?"success":"destructive",className:"capitalize",children:String(a)});case"badge":return t(ue,{className:"w-full",children:String(a)});case"country":return t(Rt,{value:a});case"enum":return t("span",{className:"uppercase w-full",children:String(a)});case"fileSize":return Lt(a);case"days":return Mt(a);case"os":return at[a]??a;case"licenseType":return Et[a]??a;case"subscriptionInterval":return zt.formatISODuration(a);case"subscriptionStartTrigger":return qt(a);default:return String(a)}}function fe({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 Jt({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(Tt,{className:I("table-auto border-0 rounded-md",e),children:[t(At,{className:"sticky top-0 z-10 rounded-md",children:r.getHeaderGroups().map(l=>t(me,{children:l.headers.map(n=>d(Dt,{scope:"col",colSpan:n.colSpan,className:i(n.id===x,(n.id===x,"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===x?"justify-center":"justify-start"),children:t(fe,{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===x?"justify-center":"justify-start",n.column.getIsSorted()?"text-primary":""),onPress:n.column.getToggleSortingHandler(),children:[t("span",{children:t(fe,{header:n})}),n.column.getIsSorted()&&t(Ie,{direction:n.column.getIsSorted()})]})]},n.id))},l.id))}),t(Ft,{children:r.getRowModel().rows.map(l=>t(me,{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===x,o=n.column.columnDef.meta?.displayType?Yt(n):U(n.column.columnDef.cell,n.getContext());return t(Ot,{className:I(i(c,c?"bg-elevation-1":"","z-1"),c&&"flex justify-center items-center"),children:o},n.id)})},l.id))})]})}function be(e){return e.resourceType==="none"}function W(e){return e.resourceType==="single"}function he(e){return e.resourceType==="multiple"}function Wt({items:e,isFetching:r}){const{openDialog:a,closeDialog:i}=Ne(),{tanTable:l}=C();function n(o,u){return o.isDisabled?be(o)?o.isDisabled():he(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};be(o)?o.onPress(w):he(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 en({label:e,items:r,data:a}){const{openDialog:i,closeDialog:l}=Ne();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 lr=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte","between"],ve={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"},tn={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=Pe[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 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 nn(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`${j(r,{dateStyle:"short"})??""} – ${j(a,{dateStyle:"short"})??""}`}return e.value?j(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 rn({filter:e,filterConfig:r,pathParameters:a,onChange:i}){if(e.type==="string"||e.type==="id")return t(rt,{autoFocus:!0,value:e.value??"",onChange:i,"aria-label":"Filter value"});if(e.type==="number")return t(et,{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(We,{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(It,{autoFocus:!0,path:l.path,accessor:l.accessor,defaultParams:n,value:e.value??[],onChange:i,"aria-label":"Filter value"})}return null}function an({filter:e,filterConfig:r,pathParameters:a,resourceFormatter:i,onRemove:l,onUpdate:n,isOpen:c,onOpenChange:o}){const u=Pe[e.type],m=nn(e),v=Y();return d(tt,{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:tn[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(nt,{className:"p-icon min-w-48",children:d("div",{className:"flex flex-col gap-icon",children:[u.length>1&&t(R,{label:ve[e.operator],variant:"neutral","aria-label":"Change operator",children:u.map(b=>t(A,{onAction:()=>n({operator:b}),children:ve[b]},b))}),t(rn,{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 on({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=Se(!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))},_=(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(an,{filter:g,filterConfig:c,pathParameters:o,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(R,{label:t(Ct,{}),isDisabled:l.isPending,variant:"neutral","aria-label":"Add filter",children:m.map(g=>{const p=c[g].type,f=sn[p];return d(A,{className:"!justify-between",onAction:()=>D(p,g),children:[u(g),t(f,{})]},g)})})]})}const sn={"id-search":xt,bool:de,date:Nt,enum:wt,id:yt,number:St,string:de};export{ve as C,on as D,sr as DataTable,Ce as DataTableContext,ir as DataTableProvider,lr as F,ar as getColumnHelper,C as useDataTable,or 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 _e,useState as O,useMemo as K,useEffect as X,useContext as $e,useRef as ye}from"react";import{Button as y}from"./button.js";import{useSensors as je,useSensor as ue,PointerSensor as qe,KeyboardSensor as Ee,DndContext as ke,closestCenter as He,DragOverlay as Ve}from"@dnd-kit/core";import{sortableKeyboardCoordinates as Ke,SortableContext as Be,verticalListSortingStrategy as Qe,arrayMove as Ge,useSortable as Ue}from"@dnd-kit/sortable";import{CSS as Ze}from"@dnd-kit/utilities";import{useQuery as Xe,useInfiniteQuery as Ye}from"@tanstack/react-query";import{createColumnHelper as we,useReactTable as Je,getCoreRowModel as We,flexRender as U}from"@tanstack/react-table";import{useLocalStorage as B}from"@uidotdev/usehooks";import{merge as et}from"lodash-es";import{Badge as de}from"./badge.js";import{DatePicker as Q}from"./date-picker.js";import{EasyMenu as R,MenuItem as A}from"./menu.js";import{MultiSelect as tt}from"./multi-select.js";import{NumberField as nt}from"./numberfield.js";import{PopoverTrigger as rt,Popover as at}from"./popover.js";import{TextField as ot}from"./textfield.js";import{formatDate as j}from"../utilities/date.js";import{useProjectName as Y,useResourceFormatter as J,ALL_OS as it}from"../utilities/resources.js";import{classNames as I}from"../utilities/theme.js";import{IcInfo as st,IcMoreVertical as lt,IcRefresh as ct,IcMenu as ut,IcLayoutGrid as dt,IcColumns as mt,IcGrip as gt,IcFirst as pt,IcLeft as ft,IcRight as bt,IcLast as ht,IcSortAsc as vt,IcSortDesc as St,IcSortNone as yt,IcCheck as me,IcMinus as wt,IcAccount as Nt,IcLicense as xt,IcDate as Ct,IcFile as It,IcFilter as Pt}from"./icons.js";import{MultipleIdSearchInput as Tt}from"./id-search.js";import{Loader as Ne}from"./loader.js";import{SearchField as At}from"./searchfield.js";import{Table as Dt,TableHeader as Ft,TableRow as ge,TableHead as Ot,TableBody as Rt,TableCell as zt}from"./table.js";import{CountryName as Mt}from"../utilities/countries.js";import{Duration as Lt}from"../utilities/duration.js";import{formatDays as _t,formatFilesize as $t,formatNumber as jt}from"../utilities/numbers.js";import{Checkbox as pe}from"./checkbox.js";import{TooltipTrigger as qt,Tooltip as Et}from"./tooltip.js";import{getSubscriptionStartTriggerLabel as kt,ALL_LICENSE_TYPES as Ht}from"./select-options.js";import{useCtxClient as Vt}from"../utilities/ctx-client.js";import{ControlledDialogProvider as Kt,useControlledDialog as xe}from"./dialog.js";import"class-variance-authority";import"react-aria-components";import"clsx";import"@icons-pack/react-simple-icons";import"./calendar.js";import"./form.js";import"./card.js";import"./datefield.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./list-box.js";import"./select.js";import"./kbd.js";import"../utilities/string.js";import"../utilities/empty-option.js";function Bt(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const Ce=we(),Qt=[Ce.accessor("checkbox",{header:({table:e})=>t(pe,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all",size:"sm"}),cell:({row:e})=>t(pe,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row",size:"sm"}),enableSorting:!1,enableHiding:!1})],x="TableActions";function Gt(e){return e.length===0?[]:[Ce.accessor(x,{header:"Actions",id:x,enableHiding:!1,cell:({row:r})=>t(nn,{label:t(lt,{}),data:r.original,items:e}),enableSorting:!1})]}function sr(){return we()}function lr({path:e,pathParameters:r,columns:a,filterConfig:i,columnsToHideByDefault:l={},allowSelection:n=!1,initialFilters:c=[],previewFilters:o,tableActions:u,Card:m,onRowNavigate:v,disableTableView:b}){const[S,z]=O({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:M,pagination:P}=S,[g,p]=O(""),[f,w]=O({}),[D,$]=O(c),ee=K(()=>D.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)=>et(s,h),{}),[D]),q={...D,page:P.pageIndex+1,limit:P.pageSize,sort:Bt(M[0]),search:g},Ae=Vt(),te=["get",e,q],E=`${e}_ctx`,[ne,re]=B(`${E}_column_order_preference`,[]),[ae,De]=B(`${E}_column_visibility_preference`,{id:!1,...l}),[Fe,Oe]=B(`${E}_view_mode_preference`,b?"card":"table"),T=b?"card":Fe,k=s=>{z(h=>({...h,...s}))};async function oe(s){const h=await Ae.GET(e,{params:{query:{page:s,limit:P.pageSize,sort:q.sort,search:q.search,...ee},path:r}});return{data:h.data??[],total:Number.parseInt(h.response.headers.get("Pagination-Count")||"0"),nextPage:s+1}}const L=Xe({queryKey:[...te,"table"],enabled:T==="table",queryFn:()=>oe(P.pageIndex+1),placeholderData:s=>s}),N=Ye({queryKey:[...te,"card"],enabled:T==="card",initialPageParam:1,queryFn:({pageParam:s})=>oe(s),getNextPageParam:(s,h)=>h.flatMap(Le=>Le.data).length<s.total?s.nextPage:void 0}),ie=K(()=>T==="table"?L.data?.data??[]:N.data?.pages.flatMap(s=>s.data)??[],[T,L.data,N.data]),se=K(()=>T==="table"?L.data?.total??0:N.data?.pages[0]?.total??0,[T,L.data,N.data]),le=T==="table"?L:{...N,data:{data:ie,total:se},isLoading:N.isLoading,isFetching:N.isFetching,isError:N.isError,error:N.error,refetch:N.refetch},Re=u.filter(W),ze=[...n?Qt:[],...a,...Gt(Re??[])];function Me(s){return typeof s=="function"}function _(s,h){return Me(s)?s(h):s}const ce=Je({data:ie,columns:ze,getCoreRowModel:We(),rowCount:se,manualPagination:!0,onPaginationChange:s=>{k({pagination:_(s,P)})},manualSorting:!0,onSortingChange:s=>{w({}),k({sorting:[..._(s,M)]})},manualFiltering:!0,onColumnVisibilityChange:s=>{De(_(s,ae))},onRowSelectionChange:s=>{w(_(s,f))},onColumnOrderChange:s=>{re(_(s,ne))},state:{sorting:M,columnVisibility:ae,pagination:P,rowSelection:f,columnOrder:ne},meta:{refetch:le.refetch}});return X(()=>{const s=ce.getAllLeafColumns();re([...s.filter(h=>h.id!==x).map(h=>h.id),...s.filter(h=>h.id===x).map(h=>h.id)])},[]),{tableState:S,updateTableState:k,query:le,setSearchQuery:p,searchQuery:g,tanTable:ce,mergedFilters:ee,filters:D,setFilters:$,filterConfig:i,tableActions:u,pathParameters:r,viewMode:T,setViewMode:Oe,Card:m,allowSelection:n,previewFilters:o,infiniteQuery:N,disableTableView:b,onRowNavigate:v}}const Ie=_e(null);function C(){const e=$e(Ie);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function cr({children:e,...r}){return t(Ie.Provider,{value:r,children:e})}function ur({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(Jt,{}),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(fe,{className:"cursor-wait",children:t(Ne,{})}),!a.isLoading&&i.getRowModel().rows.length===0&&t(fe,{className:"cursor-not-allowed",children:!a.isFetching&&(a.isError?d("span",{className:"flex gap-3 justify-center items-center",children:[t(st,{}),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(Ut,{Card:c,actions:o}):t(en,{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(Zt,{}),t(Yt,{})]}),t(Xt,{})]})]})]})})}function Ut({Card:e,actions:r}){const{tanTable:a,allowSelection:i}=C(),{infiniteQuery:l}=C(),n=ye(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(Ne,{})})]})}function fe({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 Zt(){if(Y()==="customer-portal")return null;const{tanTable:r}=C(),[a,i]=O(null),l=J(),n=je(ue(qe),ue(Ee,{coordinateGetter:Ke}));return t(ke,{sensors:n,collisionDetection:He,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()),S=v.indexOf(m.id.toString());r.setColumnOrder([...Ge(v,b,S)])}i(null)},children:d(Be,{items:r.getState().columnOrder,strategy:Qe,children:[d(R,{label:d(F,{children:[t(mt,{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===x?null:t(c,{column:u},u.id)})]}),t(Ve,{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:S}=Ue({id:o.id}),z={transform:Ze.Transform.toString(b),transition:S,zIndex:"999"};return d(A,{ref:v,style:z,...u,id:o.id,onAction:()=>o.toggleVisibility(),isDisabled:!o.getCanHide(),className:"flex items-center",children:[t(gt,{...m,className:"size-icon cursor-grab"}),Z(o),o.getIsSorted()&&t(Pe,{className:"size-icon",direction:o.getIsSorted()})]})}}function Xt(){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(pt,{})}),t(y,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon-sm",children:t(ft,{})}),t(y,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon-sm",children:t(bt,{})}),t(y,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon-sm",children:t(ht,{})})]})]})}function Yt(){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 Jt(){const{query:e,tanTable:r,searchQuery:a,setSearchQuery:i,tableActions:l,viewMode:n,setViewMode:c,Card:o,previewFilters:u,disableTableView:m}=C(),v=r.getSelectedRowModel().rows.length>0,b=l.filter(S=>S.resourceType!=="single").filter(S=>S.resourceType==="multiple"===v);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(ct,{})}),t(At,{value:a,onChange:i}),t(ln,{previewFilters:u})]}),d("div",{className:"flex gap-icon",children:[t(tn,{items:b,isFetching:e.isFetching}),o&&!m&&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(ut,{})}),t(y,{variant:n==="card"?"primary":"neutral",size:"icon",onPress:()=>c("card"),"aria-label":"Card view",className:"border-none",children:t(dt,{})})]})]})]})}function Pe({direction:e,...r}){return e==="asc"?t(vt,{className:"size-3.5",...r}):e==="desc"?t(St,{className:"size-3.5",...r}):t(yt,{className:"size-3.5",...r})}function Z(e){const r=J(),a=e.columnDef.header;return typeof a=="string"?a:r(e.id)}function Wt(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:j(a)});case"number":return t("span",{className:"block text-right tabular-nums",children:jt(a)});case"boolean":return t(de,{variant:a?"success":"destructive",className:"capitalize",children:String(a)});case"badge":return t(de,{className:"w-full",children:String(a)});case"country":return t(Mt,{value:a});case"enum":return t("span",{className:"uppercase w-full",children:String(a)});case"fileSize":return $t(a);case"days":return _t(a);case"os":return it[a]??a;case"licenseType":return Ht[a]??a;case"subscriptionInterval":return Lt.formatISODuration(a);case"subscriptionStartTrigger":return kt(a);default:return String(a)}}function be({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 en({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(Dt,{className:I("table-auto border-0 rounded-md",e),children:[t(Ft,{className:"sticky top-0 z-10 rounded-md",children:r.getHeaderGroups().map(l=>t(ge,{children:l.headers.map(n=>d(Ot,{scope:"col",colSpan:n.colSpan,className:i(n.id===x,(n.id===x,"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===x?"justify-center":"justify-start"),children:t(be,{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===x?"justify-center":"justify-start",n.column.getIsSorted()?"text-primary":""),onPress:n.column.getToggleSortingHandler(),children:[t("span",{children:t(be,{header:n})}),n.column.getIsSorted()&&t(Pe,{direction:n.column.getIsSorted()})]})]},n.id))},l.id))}),t(Rt,{children:r.getRowModel().rows.map(l=>t(ge,{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===x,o=n.column.columnDef.meta?.displayType?Wt(n):U(n.column.columnDef.cell,n.getContext());return t(zt,{className:I(i(c,c?"bg-elevation-1":"","z-1"),c&&"flex justify-center items-center"),children:o},n.id)})},l.id))})]})}function he(e){return e.resourceType==="none"}function W(e){return e.resourceType==="single"}function ve(e){return e.resourceType==="multiple"}function tn({items:e,isFetching:r}){const{openDialog:a,closeDialog:i}=xe(),{tanTable:l}=C();function n(o,u){return o.isDisabled?he(o)?o.isDisabled():ve(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 S={event:b,openDialog:a,closeDialog:i};he(o)?o.onPress(S):ve(o)&&o.onPress({...S,data:c})},variant:o.variant??"neutral",children:[m&&t(m,{"aria-hidden":!0}),t("span",{children:o.label})]},`${o.label}-${u}`)})})}function nn({label:e,items:r,data:a}){const{openDialog:i,closeDialog:l}=xe();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(qt,{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(Et,{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 dr=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte","between"],Se={eq:"equal to",ne:"not equal to",cn:"contains",nc:"does not contain",sw:"starts with",ew:"ends with",in:"includes",nin:"does not include",gt:"greater than",gte:"greater than or equal to",lt:"less than",lte:"less than or equal to",between:"between"},rn={eq:"=",ne:"≠",cn:"contains",nc:"!contains",sw:"starts with",ew:"ends with",in:"in",nin:"not in",gt:">",gte:"≥",lt:"<",lte:"≤",between:"↔"};function G(e,r){const a=`${r}-${Date.now()}`,i=Te[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 Te={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 an(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`${j(r,{dateStyle:"short"})??""} – ${j(a,{dateStyle:"short"})??""}`}return e.value?j(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 on({filter:e,filterConfig:r,pathParameters:a,onChange:i}){if(e.type==="string"||e.type==="id")return t(ot,{autoFocus:!0,value:e.value??"",onChange:i,"aria-label":"Filter value"});if(e.type==="number")return t(nt,{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(tt,{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(Tt,{autoFocus:!0,path:l.path,accessor:l.accessor,defaultParams:n,value:e.value??[],onChange:i,"aria-label":"Filter value"})}return null}function sn({filter:e,filterConfig:r,pathParameters:a,resourceFormatter:i,onRemove:l,onUpdate:n,isOpen:c,onOpenChange:o}){const u=Te[e.type],m=an(e),v=Y();return d(rt,{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:rn[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(at,{className:"p-icon min-w-48",children:d("div",{className:"flex flex-col gap-icon",children:[u.length>1&&t(R,{label:Se[e.operator],variant:"neutral","aria-label":"Change operator",children:u.map(b=>t(A,{onAction:()=>n({operator:b}),children:Se[b]},b))}),t(on,{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 ln({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),S=ye(!1);X(()=>{if(!S.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)}S.current=!0},[]);const z=(g,p)=>{const f=G(g,p);n([...i,f]),b(f.id)},M=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))},P=(g,p)=>{n(i.map(f=>{if(f.id!==g)return f;let w=p.value!==void 0?p.value:f.value;const D=p.operator??f.operator;if(f.type==="date"&&p.operator!==void 0)if(D==="between"&&!Array.isArray(w)){const $=typeof w=="string"?w:new Date().toISOString();w=[$,$]}else D!=="between"&&Array.isArray(w)&&(w=w[0]??new Date().toISOString());return{...f,...p,value:w,active:!0}}))};return d("section",{...a,className:I("flex flex-wrap gap-icon items-center",e),children:[i.map(g=>t(sn,{filter:g,filterConfig:c,pathParameters:o,resourceFormatter:u,onRemove:()=>M(g.id),onUpdate:p=>P(g.id,p),isOpen:v===g.id,onOpenChange:p=>b(p?g.id:null)},g.id)),m.length>0&&t(R,{label:t(Pt,{}),isDisabled:l.isPending,variant:"neutral","aria-label":"Add filter",children:m.map(g=>{const p=c[g].type,f=cn[p];return d(A,{className:"!justify-between",onAction:()=>z(p,g),children:[u(g),t(f,{})]},g)})})]})}const cn={"id-search":It,bool:me,date:Ct,enum:xt,id:Nt,number:wt,string:me};export{Se as C,ln as D,ur as DataTable,Ie as DataTableContext,cr as DataTableProvider,dr as F,sr as getColumnHelper,C as useDataTable,lr as useDataTableState};
|
|
2
2
|
//# sourceMappingURL=data-table.js.map
|