@cryptlex/web-components 6.6.21 → 6.6.22
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/charts.js +1 -1
- package/dist/components/charts.js.map +1 -1
- package/dist/components/data-table.js +1 -1
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/sidebar.d.ts +1 -0
- package/dist/components/sidebar.js +1 -1
- package/dist/components/sidebar.js.map +1 -1
- package/lib/index.css +14 -14
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as r,jsxs as l}from"react/jsx-runtime";import{XAxis as
|
|
1
|
+
"use client";import{jsx as r,jsxs as l}from"react/jsx-runtime";import{XAxis as b,YAxis as v,CartesianGrid as k,Legend as S,Tooltip as C,ResponsiveContainer as c,LineChart as A,Line as L,BarChart as $,Bar as z,PieChart as K,Pie as T}from"recharts";import{formatNumber as m}from"../utilities/numbers.js";function W(t){return m(t,{notation:"compact",maximumFractionDigits:2})}function u({...t}){return r(b,{axisLine:!1,tickLine:!1,tick:{fill:"var(--color-muted-foreground)",fontSize:12},...t})}function p({...t}){return r(v,{axisLine:!1,tickLine:!1,tick:{fill:"var(--color-muted-foreground)",fontSize:12},width:48,tickFormatter:W,...t})}function h({...t}){return r(k,{vertical:!1,stroke:"var(--color-border)",strokeDasharray:"3 3",...t})}function s({...t}){return r(S,{iconSize:8,iconType:"circle",formatter:e=>r("span",{style:{color:"var(--color-muted-foreground)",fontSize:12,marginLeft:4},children:e}),wrapperStyle:{paddingTop:"1rem"},...t})}function d({...t}){return r(C,{formatter:e=>typeof e=="number"?m(e):e,cursor:{fill:"var(--color-neutral-3)",opacity:.5},contentStyle:{backgroundColor:"var(--color-elevation-1)",border:"1px solid var(--color-border)",borderRadius:"6px",boxShadow:"0 4px 12px rgba(0,0,0,0.08)",padding:"8px 12px"},labelStyle:{color:"var(--color-foreground)",fontWeight:"600",marginBottom:"4px",fontSize:12},itemStyle:{color:"var(--color-muted-foreground)",padding:"1px 0",fontSize:12},...t})}function j({className:t,data:e,config:o,...n}){return r(c,{...n,children:l(A,{className:"body-sm",data:e,margin:{top:4,right:4,left:0,bottom:0},children:[r(h,{}),r(u,{dataKey:o.xAxis.toString()}),r(p,{}),r(d,{}),r(s,{iconType:"plainline"}),o.lines.map((a,i)=>r(L,{strokeWidth:2,type:"monotone",dataKey:a.toString(),stroke:`var(--color-chart-${i%5+1})`,dot:!1,activeDot:{r:4,strokeWidth:0}},a.toString()))]})})}function w({className:t,data:e,config:o,...n}){return r(c,{className:t,...n,children:l($,{className:"body-sm",data:e,margin:{top:4,right:4,left:0,bottom:0},barCategoryGap:"30%",children:[r(h,{}),r(u,{dataKey:o.xAxis.toString()}),r(p,{}),r(d,{cursor:{fill:"var(--color-neutral-3)",opacity:.4}}),r(s,{}),o.bars.map((a,i)=>r(z,{dataKey:a.toString(),fill:`var(--color-chart-${i%5+1})`,fillOpacity:.15,stroke:`var(--color-chart-${i%5+1})`,strokeWidth:1.5,radius:[4,4,0,0]},a.toString()))]})})}function B(t){const{name:e,percent:o}=t;return`${e}: ${((typeof o=="number"?o:0)*100).toFixed(0)}%`}function D({data:t,variant:e="full",showLabels:o=!0,...n}){const a=e==="semi"?180:0,i=e==="semi"?0:360,g=e==="semi"?"100%":"50%";return r(c,{...n,children:l(K,{children:[r(d,{}),r(s,{}),r(T,{data:Object.entries(t).map(([x,y],f)=>({fill:`var(--color-chart-${f%5+1})`,fillOpacity:.75,stroke:`var(--color-chart-${f%5+1})`,strokeWidth:1.5,strokeOpacity:1,name:x,value:y})),dataKey:"value",nameKey:"name",cx:"50%",cy:g,innerRadius:"40%",paddingAngle:2,startAngle:a,endAngle:i,label:o?B:void 0,labelLine:{stroke:"var(--color-neutral-6)"},isAnimationActive:!0})]})})}export{w as Barchart,h as ChartCartesianGrid,s as ChartLegend,d as ChartTooltip,u as ChartXAxis,p as ChartYAxis,j as Linechart,D as PieChart,W as formateYAxisTick};
|
|
2
2
|
//# sourceMappingURL=charts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"charts.js","sources":["../../lib/components/charts.tsx"],"sourcesContent":["'use client';\nimport {\n Bar,\n BarChart,\n Line,\n LineChart,\n Pie,\n CartesianGrid as RechartsCartesianGrid,\n Legend as RechartsLegend,\n PieChart as RechartsPieChart,\n Tooltip as RechartsTooltip,\n XAxis as RechartsXAxis,\n YAxis as RechartsYAxis,\n ResponsiveContainer,\n type PieLabelRenderProps,\n} from 'recharts';\nimport { formatNumber } from '../utilities/numbers';\n\nexport function formateYAxisTick(value: number) {\n return formatNumber(value, {\n notation: 'compact',\n maximumFractionDigits: 2,\n });\n}\nexport function ChartXAxis({ ...props }: React.ComponentProps<typeof RechartsXAxis>) {\n return <RechartsXAxis stroke=\"var(--color-neutral-6)\" {...props} />;\n}\n\nexport function ChartYAxis({ ...props }: React.ComponentProps<typeof RechartsYAxis>) {\n return (\n <RechartsYAxis stroke=\"var(--color-neutral-6)\" className=\"p-5\" {...props} tickFormatter={formateYAxisTick} />\n );\n}\n\nexport function ChartCartesianGrid({ ...props }: React.ComponentProps<typeof RechartsCartesianGrid>) {\n return <RechartsCartesianGrid stroke=\"var(--color-neutral-4)\" {...props} />;\n}\n\nexport function ChartLegend({ ...props }: React.ComponentProps<typeof RechartsLegend>) {\n return (\n <RechartsLegend\n iconSize={12}\n formatter={v => <span className=\"text-foreground\">{v}</span>}\n wrapperStyle={{ background: 'var(--color-elevation-1)' }}\n {...props}\n />\n );\n}\n\nexport function ChartTooltip({ ...props }: React.ComponentProps<typeof RechartsTooltip>) {\n return (\n <RechartsTooltip\n formatter={v => (typeof v === 'number' ? formatNumber(v) : v)}\n contentStyle={{\n backgroundColor: 'var(--color-elevation-1)',\n border: '1px solid var(--color-border)',\n }}\n labelStyle={{\n color: 'var(--color-muted-foreground)',\n fontWeight: '600',\n marginBottom: '0.5rem',\n }}\n itemStyle={{\n color: 'var(--color-foreground)',\n padding: '0',\n }}\n {...props}\n />\n );\n}\nexport function Linechart<T extends object>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n lines: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer {...props}>\n <LineChart className=\"body-sm\" data={data}>\n <ChartCartesianGrid strokeDasharray=\"3 3\" />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip />\n <ChartLegend iconType=\"plainline\" />\n {config.lines.map((l, i) => (\n <Line\n strokeWidth={2}\n type=\"monotone\"\n dataKey={l.toString()}\n stroke={`var(--color-chart-${(i % 5) + 1})`}\n />\n ))}\n </LineChart>\n </ResponsiveContainer>\n );\n}\n\nexport function Barchart<T>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n bars: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer className={className} {...props}>\n <BarChart className=\"body-sm\" data={data}>\n <ChartCartesianGrid strokeDasharray=\"3 3\" />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip />\n <ChartLegend />\n {config.bars.map((b, i) => (\n <Bar\n dataKey={b.toString()}\n fill={`var(--color-chart-${(i % 5) + 1})`}\n stroke={`var(--color-chart-${(i % 5) + 1})`}\n />\n ))}\n </BarChart>\n </ResponsiveContainer>\n );\n}\n\nfunction getLabel(props: PieLabelRenderProps) {\n const { name, percent } = props;\n return `${name}: ${((typeof percent === 'number' ? percent : 0) * 100).toFixed(0)}%`;\n}\nexport function PieChart<T extends Record<string, number>>({\n data,\n variant = 'full',\n showLabels = true,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T;\n variant?: 'full' | 'semi';\n showLabels?: boolean;\n}) {\n const finalStartAngle = variant === 'semi' ? 180 : 0;\n const finalEndAngle = variant === 'semi' ? 0 : 360;\n const cy = variant === 'semi' ? '100%' : '50%';\n\n return (\n <ResponsiveContainer {...props}>\n <RechartsPieChart>\n <ChartTooltip />\n <ChartLegend />\n <Pie\n data={Object.entries(data).map(([name, value], i) => {\n return {\n fill: `var(--color-chart-${(i % 5) + 1})`,\n stroke: `var(--color-chart-${(i % 5) + 1})`,\n name,\n value,\n };\n })}\n dataKey=\"value\"\n nameKey=\"name\"\n cx=\"50%\"\n cy={cy}\n startAngle={finalStartAngle}\n endAngle={finalEndAngle}\n label={showLabels ? getLabel : undefined}\n labelLine={{ stroke: 'var(--color-neutral-6)' }}\n isAnimationActive={true}\n />\n </RechartsPieChart>\n </ResponsiveContainer>\n );\n}\n"],"names":["formateYAxisTick","value","formatNumber","ChartXAxis","props","jsx","RechartsXAxis","ChartYAxis","RechartsYAxis","ChartCartesianGrid","RechartsCartesianGrid","ChartLegend","RechartsLegend","v","ChartTooltip","RechartsTooltip","Linechart","className","data","config","ResponsiveContainer","LineChart","l","i","Line","Barchart","jsxs","BarChart","b","Bar","getLabel","name","percent","PieChart","variant","showLabels","finalStartAngle","finalEndAngle","cy","RechartsPieChart","Pie"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"charts.js","sources":["../../lib/components/charts.tsx"],"sourcesContent":["'use client';\nimport {\n Bar,\n BarChart,\n Line,\n LineChart,\n Pie,\n CartesianGrid as RechartsCartesianGrid,\n Legend as RechartsLegend,\n PieChart as RechartsPieChart,\n Tooltip as RechartsTooltip,\n XAxis as RechartsXAxis,\n YAxis as RechartsYAxis,\n ResponsiveContainer,\n type PieLabelRenderProps,\n} from 'recharts';\nimport { formatNumber } from '../utilities/numbers';\n\nexport function formateYAxisTick(value: number) {\n return formatNumber(value, {\n notation: 'compact',\n maximumFractionDigits: 2,\n });\n}\n\nexport function ChartXAxis({ ...props }: React.ComponentProps<typeof RechartsXAxis>) {\n return (\n <RechartsXAxis\n axisLine={false}\n tickLine={false}\n tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}\n {...props}\n />\n );\n}\n\nexport function ChartYAxis({ ...props }: React.ComponentProps<typeof RechartsYAxis>) {\n return (\n <RechartsYAxis\n axisLine={false}\n tickLine={false}\n tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}\n width={48}\n tickFormatter={formateYAxisTick}\n {...props}\n />\n );\n}\n\nexport function ChartCartesianGrid({ ...props }: React.ComponentProps<typeof RechartsCartesianGrid>) {\n return <RechartsCartesianGrid vertical={false} stroke=\"var(--color-border)\" strokeDasharray=\"3 3\" {...props} />;\n}\n\nexport function ChartLegend({ ...props }: React.ComponentProps<typeof RechartsLegend>) {\n return (\n <RechartsLegend\n iconSize={8}\n iconType=\"circle\"\n formatter={v => (\n <span style={{ color: 'var(--color-muted-foreground)', fontSize: 12, marginLeft: 4 }}>{v}</span>\n )}\n wrapperStyle={{ paddingTop: '1rem' }}\n {...props}\n />\n );\n}\n\nexport function ChartTooltip({ ...props }: React.ComponentProps<typeof RechartsTooltip>) {\n return (\n <RechartsTooltip\n formatter={v => (typeof v === 'number' ? formatNumber(v) : v)}\n cursor={{ fill: 'var(--color-neutral-3)', opacity: 0.5 }}\n contentStyle={{\n backgroundColor: 'var(--color-elevation-1)',\n border: '1px solid var(--color-border)',\n borderRadius: '6px',\n boxShadow: '0 4px 12px rgba(0,0,0,0.08)',\n padding: '8px 12px',\n }}\n labelStyle={{\n color: 'var(--color-foreground)',\n fontWeight: '600',\n marginBottom: '4px',\n fontSize: 12,\n }}\n itemStyle={{\n color: 'var(--color-muted-foreground)',\n padding: '1px 0',\n fontSize: 12,\n }}\n {...props}\n />\n );\n}\n\nexport function Linechart<T extends object>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n lines: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer {...props}>\n <LineChart className=\"body-sm\" data={data} margin={{ top: 4, right: 4, left: 0, bottom: 0 }}>\n <ChartCartesianGrid />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip />\n <ChartLegend iconType=\"plainline\" />\n {config.lines.map((l, i) => (\n <Line\n key={l.toString()}\n strokeWidth={2}\n type=\"monotone\"\n dataKey={l.toString()}\n stroke={`var(--color-chart-${(i % 5) + 1})`}\n dot={false}\n activeDot={{ r: 4, strokeWidth: 0 }}\n />\n ))}\n </LineChart>\n </ResponsiveContainer>\n );\n}\n\nexport function Barchart<T>({\n className,\n data,\n config,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T[];\n config: {\n xAxis: keyof T;\n bars: (keyof T)[];\n };\n}) {\n return (\n <ResponsiveContainer className={className} {...props}>\n <BarChart\n className=\"body-sm\"\n data={data}\n margin={{ top: 4, right: 4, left: 0, bottom: 0 }}\n barCategoryGap=\"30%\"\n >\n <ChartCartesianGrid />\n <ChartXAxis dataKey={config.xAxis.toString()} />\n <ChartYAxis />\n <ChartTooltip cursor={{ fill: 'var(--color-neutral-3)', opacity: 0.4 }} />\n <ChartLegend />\n {config.bars.map((b, i) => (\n <Bar\n key={b.toString()}\n dataKey={b.toString()}\n fill={`var(--color-chart-${(i % 5) + 1})`}\n fillOpacity={0.15}\n stroke={`var(--color-chart-${(i % 5) + 1})`}\n strokeWidth={1.5}\n radius={[4, 4, 0, 0]}\n />\n ))}\n </BarChart>\n </ResponsiveContainer>\n );\n}\n\nfunction getLabel(props: PieLabelRenderProps) {\n const { name, percent } = props;\n return `${name}: ${((typeof percent === 'number' ? percent : 0) * 100).toFixed(0)}%`;\n}\n\nexport function PieChart<T extends Record<string, number>>({\n data,\n variant = 'full',\n showLabels = true,\n ...props\n}: Omit<React.ComponentProps<typeof ResponsiveContainer>, 'children'> & {\n data: T;\n variant?: 'full' | 'semi';\n showLabels?: boolean;\n}) {\n const finalStartAngle = variant === 'semi' ? 180 : 0;\n const finalEndAngle = variant === 'semi' ? 0 : 360;\n const cy = variant === 'semi' ? '100%' : '50%';\n\n return (\n <ResponsiveContainer {...props}>\n <RechartsPieChart>\n <ChartTooltip />\n <ChartLegend />\n <Pie\n data={Object.entries(data).map(([name, value], i) => ({\n fill: `var(--color-chart-${(i % 5) + 1})`,\n fillOpacity: 0.75,\n stroke: `var(--color-chart-${(i % 5) + 1})`,\n strokeWidth: 1.5,\n strokeOpacity: 1,\n name,\n value,\n }))}\n dataKey=\"value\"\n nameKey=\"name\"\n cx=\"50%\"\n cy={cy}\n innerRadius=\"40%\"\n paddingAngle={2}\n startAngle={finalStartAngle}\n endAngle={finalEndAngle}\n label={showLabels ? getLabel : undefined}\n labelLine={{ stroke: 'var(--color-neutral-6)' }}\n isAnimationActive={true}\n />\n </RechartsPieChart>\n </ResponsiveContainer>\n );\n}\n"],"names":["formateYAxisTick","value","formatNumber","ChartXAxis","props","jsx","RechartsXAxis","ChartYAxis","RechartsYAxis","ChartCartesianGrid","RechartsCartesianGrid","ChartLegend","RechartsLegend","v","ChartTooltip","RechartsTooltip","Linechart","className","data","config","ResponsiveContainer","jsxs","LineChart","l","Line","Barchart","BarChart","b","Bar","getLabel","name","percent","PieChart","variant","showLabels","finalStartAngle","finalEndAngle","cy","RechartsPieChart","Pie","i"],"mappings":"8SAkBO,SAASA,EAAiBC,EAAe,CAC5C,OAAOC,EAAaD,EAAO,CACvB,SAAU,UACV,sBAAuB,CAAA,CAC1B,CACL,CAEO,SAASE,EAAW,CAAE,GAAGC,GAAqD,CACjF,OACIC,EAACC,EAAA,CACG,SAAU,GACV,SAAU,GACV,KAAM,CAAE,KAAM,gCAAiC,SAAU,EAAA,EACxD,GAAGF,CAAA,CAAA,CAGhB,CAEO,SAASG,EAAW,CAAE,GAAGH,GAAqD,CACjF,OACIC,EAACG,EAAA,CACG,SAAU,GACV,SAAU,GACV,KAAM,CAAE,KAAM,gCAAiC,SAAU,EAAA,EACzD,MAAO,GACP,cAAeR,EACd,GAAGI,CAAA,CAAA,CAGhB,CAEO,SAASK,EAAmB,CAAE,GAAGL,GAA6D,CACjG,OAAOC,EAACK,GAAsB,SAAU,GAAO,OAAO,sBAAsB,gBAAgB,MAAO,GAAGN,CAAA,CAAO,CACjH,CAEO,SAASO,EAAY,CAAE,GAAGP,GAAsD,CACnF,OACIC,EAACO,EAAA,CACG,SAAU,EACV,SAAS,SACT,UAAWC,GACPR,EAAC,OAAA,CAAK,MAAO,CAAE,MAAO,gCAAiC,SAAU,GAAI,WAAY,CAAA,EAAM,SAAAQ,EAAE,EAE7F,aAAc,CAAE,WAAY,MAAA,EAC3B,GAAGT,CAAA,CAAA,CAGhB,CAEO,SAASU,EAAa,CAAE,GAAGV,GAAuD,CACrF,OACIC,EAACU,EAAA,CACG,UAAWF,GAAM,OAAOA,GAAM,SAAWX,EAAaW,CAAC,EAAIA,EAC3D,OAAQ,CAAE,KAAM,yBAA0B,QAAS,EAAA,EACnD,aAAc,CACV,gBAAiB,2BACjB,OAAQ,gCACR,aAAc,MACd,UAAW,8BACX,QAAS,UAAA,EAEb,WAAY,CACR,MAAO,0BACP,WAAY,MACZ,aAAc,MACd,SAAU,EAAA,EAEd,UAAW,CACP,MAAO,gCACP,QAAS,QACT,SAAU,EAAA,EAEb,GAAGT,CAAA,CAAA,CAGhB,CAEO,SAASY,EAA4B,CACxC,UAAAC,EACA,KAAAC,EACA,OAAAC,EACA,GAAGf,CACP,EAMG,CACC,SACKgB,EAAA,CAAqB,GAAGhB,EACrB,SAAAiB,EAACC,EAAA,CAAU,UAAU,UAAU,KAAAJ,EAAY,OAAQ,CAAE,IAAK,EAAG,MAAO,EAAG,KAAM,EAAG,OAAQ,GACpF,SAAA,CAAAb,EAACI,EAAA,EAAmB,IACnBN,EAAA,CAAW,QAASgB,EAAO,MAAM,WAAY,IAC7CZ,EAAA,EAAW,IACXO,EAAA,EAAa,EACdT,EAACM,EAAA,CAAY,SAAS,WAAA,CAAY,EACjCQ,EAAO,MAAM,IAAI,CAACI,EAAG,IAClBlB,EAACmB,EAAA,CAEG,YAAa,EACb,KAAK,WACL,QAASD,EAAE,SAAA,EACX,OAAQ,qBAAsB,EAAI,EAAK,CAAC,IACxC,IAAK,GACL,UAAW,CAAE,EAAG,EAAG,YAAa,CAAA,CAAE,EAN7BA,EAAE,SAAA,CAAS,CAQvB,CAAA,CAAA,CACL,CAAA,CACJ,CAER,CAEO,SAASE,EAAY,CACxB,UAAAR,EACA,KAAAC,EACA,OAAAC,EACA,GAAGf,CACP,EAMG,CACC,OACIC,EAACe,EAAA,CAAoB,UAAAH,EAAuB,GAAGb,EAC3C,SAAAiB,EAACK,EAAA,CACG,UAAU,UACV,KAAAR,EACA,OAAQ,CAAE,IAAK,EAAG,MAAO,EAAG,KAAM,EAAG,OAAQ,CAAA,EAC7C,eAAe,MAEf,SAAA,CAAAb,EAACI,EAAA,EAAmB,IACnBN,EAAA,CAAW,QAASgB,EAAO,MAAM,WAAY,IAC7CZ,EAAA,EAAW,EACZF,EAACS,GAAa,OAAQ,CAAE,KAAM,yBAA0B,QAAS,IAAO,IACvEH,EAAA,EAAY,EACZQ,EAAO,KAAK,IAAI,CAACQ,EAAG,IACjBtB,EAACuB,EAAA,CAEG,QAASD,EAAE,SAAA,EACX,KAAM,qBAAsB,EAAI,EAAK,CAAC,IACtC,YAAa,IACb,OAAQ,qBAAsB,EAAI,EAAK,CAAC,IACxC,YAAa,IACb,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,CAAA,EANdA,EAAE,SAAA,CAAS,CAQvB,CAAA,CAAA,CAAA,EAET,CAER,CAEA,SAASE,EAASzB,EAA4B,CAC1C,KAAM,CAAE,KAAA0B,EAAM,QAAAC,CAAA,EAAY3B,EAC1B,MAAO,GAAG0B,CAAI,OAAO,OAAOC,GAAY,SAAWA,EAAU,GAAK,KAAK,QAAQ,CAAC,CAAC,GACrF,CAEO,SAASC,EAA2C,CACvD,KAAAd,EACA,QAAAe,EAAU,OACV,WAAAC,EAAa,GACb,GAAG9B,CACP,EAIG,CACC,MAAM+B,EAAkBF,IAAY,OAAS,IAAM,EAC7CG,EAAgBH,IAAY,OAAS,EAAI,IACzCI,EAAKJ,IAAY,OAAS,OAAS,MAEzC,OACI5B,EAACe,EAAA,CAAqB,GAAGhB,EACrB,WAACkC,EAAA,CACG,SAAA,CAAAjC,EAACS,EAAA,EAAa,IACbH,EAAA,EAAY,EACbN,EAACkC,EAAA,CACG,KAAM,OAAO,QAAQrB,CAAI,EAAE,IAAI,CAAC,CAACY,EAAM7B,CAAK,EAAGuC,KAAO,CAClD,KAAM,qBAAsBA,EAAI,EAAK,CAAC,IACtC,YAAa,IACb,OAAQ,qBAAsBA,EAAI,EAAK,CAAC,IACxC,YAAa,IACb,cAAe,EACf,KAAAV,EACA,MAAA7B,CAAA,EACF,EACF,QAAQ,QACR,QAAQ,OACR,GAAG,MACH,GAAAoC,EACA,YAAY,MACZ,aAAc,EACd,WAAYF,EACZ,SAAUC,EACV,MAAOF,EAAaL,EAAW,OAC/B,UAAW,CAAE,OAAQ,wBAAA,EACrB,kBAAmB,EAAA,CAAA,CACvB,CAAA,CACJ,CAAA,CACJ,CAER"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,Fragment as T,jsxs as d}from"react/jsx-runtime";import{parseAbsolute as pe,getLocalTimeZone as fe}from"@internationalized/date";import{createContext as be,useState as x,useMemo as he,useEffect as ee,useContext as Se,useRef as ve}from"react";import{Button as w}from"./button.js";import{useSensors as ye,useSensor as V,PointerSensor as we,KeyboardSensor as Ce,DndContext as Ie,closestCenter as Ne,DragOverlay as xe}from"@dnd-kit/core";import{sortableKeyboardCoordinates as Te,SortableContext as Pe,verticalListSortingStrategy as De,arrayMove as Fe,useSortable as Ae}from"@dnd-kit/sortable";import{CSS as Re}from"@dnd-kit/utilities";import{useQuery as Oe}from"@tanstack/react-query";import{createColumnHelper as te,useReactTable as ze,getCoreRowModel as Le,flexRender as M}from"@tanstack/react-table";import{useLocalStorage as B}from"@uidotdev/usehooks";import{merge as _e}from"lodash-es";import{Badge as K}from"./badge.js";import{DatePicker as Me}from"./date-picker.js";import{EasyMenu as P,MenuItem as I}from"./menu.js";import{MultiSelect as qe}from"./multi-select.js";import{NumberField as Ee}from"./numberfield.js";import{PopoverTrigger as je,Popover as $e}from"./popover.js";import{TextField as He}from"./textfield.js";import{formatDate as ne}from"../utilities/date.js";import{useResourceFormatter as E,ALL_OS as ke}from"../utilities/resources.js";import{classNames as y}from"../utilities/theme.js";import{IcInfo as Ve,IcMoreVertical as Be,IcRefresh as Ke,IcColumns as Qe,IcGrip as Ue,IcFirst as Ge,IcLeft as Ze,IcRight as Xe,IcLast as Ye,IcSortAsc as Je,IcSortDesc as We,IcSortNone as et,IcCheck as Q,IcMinus as tt,IcAccount as nt,IcLicense as rt,IcDate as at,IcFile as ot,IcFilter as it,IcRemove as st}from"./icons.js";import{MultipleIdSearchInput as lt}from"./id-search.js";import{Loader as ct}from"./loader.js";import{SearchField as ut}from"./searchfield.js";import{Table as dt,TableHeader as mt,TableRow as U,TableHead as gt,TableBody as pt,TableCell as ft}from"./table.js";import{CountryName as bt}from"../utilities/countries.js";import{Duration as ht}from"../utilities/duration.js";import{formatDays as St,formatFilesize as vt,formatNumber as yt}from"../utilities/numbers.js";import{Checkbox as G}from"./checkbox.js";import{getSubscriptionStartTriggerLabel as wt,ALL_LICENSE_TYPES as Ct}from"./select-options.js";import{useCtxClient as It}from"../utilities/ctx-client.js";import{ControlledDialogProvider as Nt,useControlledDialog as re}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 xt(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const ae=te(),Tt=[ae.accessor("checkbox",{header:({table:e})=>t(G,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:e})=>t(G,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],C="TableActions";function Pt(e){return e.length===0?[]:[ae.accessor(C,{header:"Actions",id:C,enableHiding:!1,cell:({row:r})=>t(_t,{label:t(Be,{}),data:r.original,items:e}),enableSorting:!1})]}function En(){return te()}function jn({path:e,pathParameters:r,columns:n,filterConfig:a,columnsToHideByDefault:o={},allowSelection:s=!1,initialFilters:c=[],tableActions:i}){const[u,g]=x({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:p,pagination:b}=u,[v,z]=x(""),[A,R]=x({}),[m,f]=x(c),S=he(()=>m.map(l=>Array.isArray(l.value)?{[l.property]:{[l.operator]:l.value.join(",")}}:{[l.property]:{[l.operator]:l.value}}).reduce((l,h)=>_e(l,h),{}),[m]),D={...m,page:b.pageIndex+1,limit:b.pageSize,sort:xt(p[0]),search:v},ce=It(),L=["get",e,D],[j,$]=B(`${L.join("")}_ctx_column_order_preference`,[]),[H,ue]=B(`${L.join("")}_ctx_column_visibility_preference`,{id:!1,...o}),_=l=>{g(h=>({...h,...l}))},O=Oe({queryKey:L,queryFn:async()=>{const l=await ce.GET(e,{params:{query:{page:D.page,limit:D.limit,sort:D.sort,search:D.search,...S},path:r}});return{data:l.data??[],total:Number.parseInt(l.response.headers.get("Pagination-Count")||"0")}}}),de=i.filter(se),me=[...s?Tt:[],...n,...Pt(de??[])];function ge(l){return typeof l=="function"}function F(l,h){return ge(l)?l(h):l}const k=ze({data:O.data?.data??[],columns:me,getCoreRowModel:Le(),rowCount:O.data?.total??0,manualPagination:!0,onPaginationChange:l=>{_({pagination:F(l,b)})},manualSorting:!0,onSortingChange:l=>{R({}),_({sorting:[...F(l,p)]})},manualFiltering:!0,onColumnVisibilityChange:l=>{ue(F(l,H))},onRowSelectionChange:l=>{R(F(l,A))},onColumnOrderChange:l=>{$(F(l,j))},state:{sorting:p,columnVisibility:H,pagination:b,rowSelection:A,columnOrder:j},meta:{refetch:O.refetch}});return ee(()=>{const l=k.getAllLeafColumns();$([...l.filter(h=>h.id!==C).map(h=>h.id),...l.filter(h=>h.id===C).map(h=>h.id)])},[]),{tableState:u,updateTableState:_,query:O,setSearchQuery:z,searchQuery:v,tanTable:k,mergedFilters:S,filters:m,setFilters:f,filterConfig:a,tableActions:i,pathParameters:r}}const oe=be(null);function N(){const e=Se(oe);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function $n({children:e,...r}){return t(oe.Provider,{value:r,children:e})}function Hn({className:e,...r}){const{query:n,tanTable:a}=N();return t(T,{children:d(Nt,{children:[t(Rt,{}),d("section",{...r,className:y("z-20 flex flex-col bg-elevation-1 border rounded-md",e),children:[d("div",{className:"w-full overflow-auto h-table relative rounded-md",tabIndex:0,children:[n.isLoading&&t(Z,{className:"cursor-wait",children:t(ct,{})}),!n.isLoading&&a.getRowModel().rows.length===0&&t(Z,{className:"cursor-not-allowed",children:!n.isFetching&&(n.isError?d("span",{className:"flex gap-3 justify-center items-center",children:[t(Ve,{}),t("span",{children:n.error.message})]}):n.data?.data?.length===0?t(T,{children:"No results found."}):t(T,{children:"Unknown error. Please contact customer support."}))}),!n.isLoading&&a.getRowModel().rows.length!==0&&t(zt,{className:"w-full"})]}),d("div",{className:"flex w-full justify-between border-t gap-icon p-icon overflow-x-auto",children:[d("div",{className:"flex gap-icon",children:[t(Dt,{}),t(At,{})]}),t(Ft,{})]})]})]})})}function Z({children:e,className:r}){return d(T,{children:[t("span",{className:y(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 Dt(){const{tanTable:e}=N(),[r,n]=x(null),a=E(),o=ye(V(we),V(Ce,{coordinateGetter:Te}));return t(Ie,{sensors:o,collisionDetection:Ne,onDragStart:c=>{const{active:i}=c;n(i.id.toString())},onDragEnd:c=>{const{active:i,over:u}=c;if(u&&i.id!==u.id){const g=e.getState().columnOrder,p=g.indexOf(i.id.toString()),b=g.indexOf(u.id.toString());e.setColumnOrder([...Fe(g,p,b)])}n(null)},children:d(Pe,{items:e.getState().columnOrder,strategy:De,children:[d(P,{label:d(T,{children:[t(Qe,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(c=>c.id),children:[t(I,{onAction:()=>e.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),e.getState().columnOrder.map(c=>{const i=e.getAllFlatColumns().find(u=>u.id===c);return!i||i.id==="checkbox"||i.id===C?null:t(s,{column:i},i.id)})]}),t(xe,{children:r?t("div",{className:"opacity-70 border-2 border-primary",children:a(r)}):null})]})});function s({column:c}){const{attributes:i,listeners:u,setNodeRef:g,transform:p,transition:b}=Ae({id:c.id}),v={transform:Re.Transform.toString(p),transition:b,zIndex:"999"};return d(I,{ref:g,style:v,...i,id:c.id,onAction:()=>c.toggleVisibility(),isDisabled:!c.getCanHide(),className:"flex items-center",children:[t(Ue,{...u,className:"size-icon cursor-grab"}),q(c),c.getIsSorted()&&t(ie,{className:"size-icon",direction:c.getIsSorted()})]})}}function Ft(){const{tanTable:e}=N(),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()}`}),t(w,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Ge,{})}),t(w,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Ze,{})}),t(w,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Xe,{})}),t(w,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Ye,{})})]})}function At(){const{tanTable:e}=N(),r=[10,20,30,40,50];return t(P,{label:e.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[e.getState().pagination.pageSize.toString()],items:r.map(n=>({id:n.toString(),value:n})),children:n=>t(I,{onAction:()=>e.setPageSize(n.value),children:n.value})})}function Rt(){const{query:e,tanTable:r,searchQuery:n,setSearchQuery:a,tableActions:o}=N(),s=r.getSelectedRowModel().rows.length>0,c=o.filter(i=>i.resourceType!=="single").filter(i=>i.resourceType==="multiple"===s);return d("section",{className:"flex justify-between my-0 mb-icon gap-icon overflow-auto",children:[d("div",{className:"flex gap-icon",children:[t(w,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",children:t(Ke,{})}),t(ut,{value:n,onChange:a}),t(Ht,{})]}),t("div",{className:"flex gap-icon",children:t(Lt,{items:c,isFetching:e.isFetching})})]})}function ie({direction:e,...r}){return e==="asc"?t(Je,{className:"size-3.5",...r}):e==="desc"?t(We,{className:"size-3.5",...r}):t(et,{className:"size-3.5",...r})}function q(e){const r=E(),n=e.columnDef.header;return typeof n=="string"?n:r(e.id)}function Ot(e){const r=e.column.columnDef.meta?.displayType,n=e.getValue();if(n==null)return null;switch(r){case"date":return t("span",{className:"tabular-nums",children:ne(n)});case"number":return t("span",{className:"block text-right tabular-nums",children:yt(n)});case"boolean":return t(K,{variant:n?"success":"destructive",className:"w-full capitalize",children:String(n)});case"badge":return t(K,{className:"w-full",children:String(n)});case"country":return t(bt,{value:n});case"enum":return t("span",{className:"uppercase w-full",children:String(n)});case"fileSize":return vt(n);case"days":return St(n);case"os":return ke[n]??n;case"licenseType":return Ct[n]??n;case"subscriptionInterval":return ht.formatISODuration(n);case"subscriptionStartTrigger":return wt(n);default:return String(n)}}function X({header:e}){const r=e.column.columnDef.header;return typeof r=="string"||!r?q(e.column):typeof r=="function"?typeof r(e.getContext())=="string"?q(e.column):M(r,e.getContext()):M(r,e.getContext())}function zt({className:e}){const{tanTable:r}=N(),n=(a,o,s="z-50")=>y("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",a&&`bg-elevation-1 sticky right-0 ${s} text-center justify-center`,o);return d(dt,{className:y("table-auto border-0 rounded-md",e),children:[t(mt,{className:"sticky top-0 z-10 rounded-md",children:r.getHeaderGroups().map(a=>t(U,{children:a.headers.map(o=>d(gt,{scope:"col",colSpan:o.colSpan,className:n(o.id===C,"bg-elevation-1"),children:[!o.column.getCanSort()&&!o.isPlaceholder&&t("div",{className:y("w-full py-1 inline-flex items-center gap-1 body-sm",o.id===C?"justify-center":"justify-start"),children:t(X,{header:o})}),o.column.getCanSort()&&d(w,{variant:"ghost",className:y("w-full p-1",o.id===C?"justify-center":"justify-start"),onPress:o.column.getToggleSortingHandler(),children:[t("span",{children:t(X,{header:o})}),t(ie,{direction:o.column.getIsSorted()})]})]},o.id))},a.id))}),t(pt,{children:r.getRowModel().rows.map(a=>t(U,{className:y("transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":a.getIsSelected(),children:a.getVisibleCells().map(o=>{const s=o.column.id===C,c=o.column.columnDef.meta?.displayType?Ot(o):M(o.column.columnDef.cell,o.getContext());return t(ft,{className:y(n(s,void 0,"z-1"),s&&"flex justify-center items-center"),children:c},o.id)})},a.id))})]})}function Y(e){return e.resourceType==="none"}function se(e){return e.resourceType==="single"}function J(e){return e.resourceType==="multiple"}function Lt({items:e,isFetching:r}){const{openDialog:n,closeDialog:a}=re(),{tanTable:o}=N();function s(i,u){return i.isDisabled?Y(i)?i.isDisabled():J(i)?i.isDisabled(u):!1:!1}const c=o.getSelectedRowModel().rows.map(i=>i.original);return t(T,{children:e.map((i,u)=>{const g=i.icon,p=s(i,c)||r;return d(w,{"aria-label":i.label,type:"button",isDisabled:p,className:"animate-in fade-in slide-in-from-right-15 duration-300 transition-transform",onPress:b=>{const v={event:b,openDialog:n,closeDialog:a};Y(i)?i.onPress(v):J(i)&&i.onPress({...v,data:c})},variant:i.variant??"neutral",children:[g&&t(g,{"aria-hidden":!0}),t("span",{children:i.label})]},`${i.label}-${u}`)})})}function _t({label:e,items:r,data:n}){const{openDialog:a,closeDialog:o}=re();return t(P,{"aria-label":"Actions",label:e,size:"icon",children:r.map((s,c)=>{const i=s.icon,u=typeof s.label=="function"?s.label(n):s.label;return d(I,{id:typeof u=="string"?u:void 0,isDisabled:s.isDisabled?.(n)??!1,onAction:()=>{const g={openDialog:a,closeDialog:o};se(s)&&s.onPress({...g,data:n})},children:[t(i,{className:"size-icon"}),u]},`${c}-${typeof u=="string"?u:""}`)})})}const kn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],W={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"},Mt={eq:"=",ne:"≠",cn:"contains",nc:"!contains",sw:"starts with",ew:"ends with",in:"in",nin:"not in",gt:">",gte:"≥",lt:"<",lte:"≤"};function qt(e,r){const n=`${r}-${Date.now()}`,a=le[e][0];switch(e){case"bool":return{id:n,type:e,property:r,operator:a,value:!0};case"string":return{id:n,type:e,property:r,operator:a,value:""};case"date":return{id:n,type:e,property:r,operator:a,value:new Date().toISOString()};case"id":return{id:n,type:e,property:r,operator:a,value:""};case"id-search":return{id:n,type:e,property:r,operator:a,value:[]};case"enum":return{id:n,type:e,property:r,operator:a,value:new Set};case"number":return{id:n,type:e,property:r,operator:a,value:0}}}const le={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"],number:["eq","ne","gt","gte","lt","lte"]};function Et(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":return e.value?ne(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 jt({filter:e,filterConfig:r,pathParameters:n,onChange:a}){if(e.type==="string"||e.type==="id")return t(He,{autoFocus:!0,value:e.value??"",onChange:a,"aria-label":"Filter value"});if(e.type==="number")return t(Ee,{autoFocus:!0,value:e.value,onChange:a,"aria-label":"Filter value"});if(e.type==="bool")return d(P,{autoFocus:!0,label:e.value?"True":"False",variant:"neutral","aria-label":"Filter value",children:[t(I,{onAction:()=>a(!0),children:"True"}),t(I,{onAction:()=>a(!1),children:"False"})]});if(e.type==="date"){const o=e.value?pe(e.value,fe()):null;return t(Me,{autoFocus:!0,hideTimeZone:!0,value:o,onChange:s=>a(s?s.toAbsoluteString():new Date().toISOString()),"aria-label":"Filter date"})}if(e.type==="enum"){const o=r[e.property];return o.type!=="enum"?null:t(qe,{autoFocus:!0,items:o.options,value:e.value??new Set,onChange:a,"aria-label":"Filter value"})}if(e.type==="id-search"){const o=r[e.property];if(o.type!=="id-search")return null;const s=n?{path:n,query:{}}:void 0;return t(lt,{autoFocus:!0,path:o.path,accessor:o.accessor,defaultParams:s,value:e.value??[],onChange:a,"aria-label":"Filter value"})}return null}function $t({filter:e,filterConfig:r,pathParameters:n,resourceFormatter:a,onRemove:o,onUpdate:s,isOpen:c,onOpenChange:i}){const u=le[e.type],g=Et(e);return d(je,{isOpen:c,onOpenChange:i,children:[d(w,{type:"button",variant:"neutral",className:"animate-in slide-in-from-left-10 fade-in rounded-full",children:[t("span",{className:"font-medium",children:a(e.property)}),t("span",{children:Mt[e.operator]}),g&&t("span",{children:g})]}),t($e,{className:"p-icon min-w-48",children:d("div",{className:"flex flex-col gap-icon",children:[u.length>1&&t(P,{label:W[e.operator],variant:"neutral","aria-label":"Change operator",children:u.map(p=>t(I,{onAction:()=>s({operator:p}),children:W[p]},p))}),t(jt,{filter:e,filterConfig:r,pathParameters:n,onChange:p=>s({value:p})}),t(w,{type:"button",variant:"destructive_neutral",onPress:o,"aria-label":`Remove ${a(e.property)} filter`,children:t(st,{})})]})})]})}function Ht({className:e,defaultFilters:r,...n}){const{filters:a,query:o,setFilters:s,filterConfig:c,pathParameters:i}=N(),u=E(),g=Object.keys(c).sort(),[p,b]=x(null),v=ve(!1);ee(()=>{!v.current&&r&&r.length>0&&a.length===0&&s(r),v.current=!0},[]);const z=(m,f)=>{const S=qt(m,f);s([...a,S]),b(S.id)},A=m=>{s(a.filter(f=>f.id!==m))},R=(m,f)=>{s(a.map(S=>S.id===m?{...S,...f}:S))};return d("section",{...n,className:y("flex flex-wrap gap-icon items-center",e),children:[a.map(m=>t($t,{filter:m,filterConfig:c,pathParameters:i,resourceFormatter:u,onRemove:()=>A(m.id),onUpdate:f=>R(m.id,f),isOpen:p===m.id,onOpenChange:f=>b(f?m.id:null)},m.id)),t(P,{label:t(it,{}),isDisabled:o.isPending||g.length===0,variant:"neutral","aria-label":"Add filter",children:g.map(m=>{const f=c[m].type,S=kt[f];return d(I,{className:"!justify-between",onAction:()=>z(f,m),children:[u(m),t(S,{})]},m)})})]})}const kt={"id-search":ot,bool:Q,date:at,enum:rt,id:nt,number:tt,string:Q};export{W as C,Ht as D,Hn as DataTable,oe as DataTableContext,$n as DataTableProvider,kn as F,En as getColumnHelper,N as useDataTable,jn as useDataTableState};
|
|
1
|
+
"use client";import{jsx as t,Fragment as T,jsxs as d}from"react/jsx-runtime";import{parseAbsolute as pe,getLocalTimeZone as fe}from"@internationalized/date";import{createContext as be,useState as x,useMemo as he,useEffect as ee,useContext as Se,useRef as ve}from"react";import{Button as w}from"./button.js";import{useSensors as ye,useSensor as V,PointerSensor as we,KeyboardSensor as Ce,DndContext as Ie,closestCenter as Ne,DragOverlay as xe}from"@dnd-kit/core";import{sortableKeyboardCoordinates as Te,SortableContext as Pe,verticalListSortingStrategy as De,arrayMove as Fe,useSortable as Ae}from"@dnd-kit/sortable";import{CSS as Re}from"@dnd-kit/utilities";import{useQuery as Oe}from"@tanstack/react-query";import{createColumnHelper as te,useReactTable as ze,getCoreRowModel as Le,flexRender as M}from"@tanstack/react-table";import{useLocalStorage as B}from"@uidotdev/usehooks";import{merge as _e}from"lodash-es";import{Badge as K}from"./badge.js";import{DatePicker as Me}from"./date-picker.js";import{EasyMenu as P,MenuItem as I}from"./menu.js";import{MultiSelect as qe}from"./multi-select.js";import{NumberField as Ee}from"./numberfield.js";import{PopoverTrigger as je,Popover as $e}from"./popover.js";import{TextField as He}from"./textfield.js";import{formatDate as ne}from"../utilities/date.js";import{useResourceFormatter as E,ALL_OS as ke}from"../utilities/resources.js";import{classNames as y}from"../utilities/theme.js";import{IcInfo as Ve,IcMoreVertical as Be,IcRefresh as Ke,IcColumns as Qe,IcGrip as Ue,IcFirst as Ge,IcLeft as Ze,IcRight as Xe,IcLast as Ye,IcSortAsc as Je,IcSortDesc as We,IcSortNone as et,IcCheck as Q,IcMinus as tt,IcAccount as nt,IcLicense as rt,IcDate as at,IcFile as ot,IcFilter as it,IcRemove as st}from"./icons.js";import{MultipleIdSearchInput as lt}from"./id-search.js";import{Loader as ct}from"./loader.js";import{SearchField as ut}from"./searchfield.js";import{Table as dt,TableHeader as mt,TableRow as U,TableHead as gt,TableBody as pt,TableCell as ft}from"./table.js";import{CountryName as bt}from"../utilities/countries.js";import{Duration as ht}from"../utilities/duration.js";import{formatDays as St,formatFilesize as vt,formatNumber as yt}from"../utilities/numbers.js";import{Checkbox as G}from"./checkbox.js";import{getSubscriptionStartTriggerLabel as wt,ALL_LICENSE_TYPES as Ct}from"./select-options.js";import{useCtxClient as It}from"../utilities/ctx-client.js";import{ControlledDialogProvider as Nt,useControlledDialog as re}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 xt(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const ae=te(),Tt=[ae.accessor("checkbox",{header:({table:e})=>t(G,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:e})=>t(G,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],C="TableActions";function Pt(e){return e.length===0?[]:[ae.accessor(C,{header:"Actions",id:C,enableHiding:!1,cell:({row:r})=>t(_t,{label:t(Be,{}),data:r.original,items:e}),enableSorting:!1})]}function En(){return te()}function jn({path:e,pathParameters:r,columns:n,filterConfig:a,columnsToHideByDefault:o={},allowSelection:s=!1,initialFilters:c=[],tableActions:i}){const[u,g]=x({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:p,pagination:b}=u,[v,z]=x(""),[A,R]=x({}),[m,f]=x(c),S=he(()=>m.map(l=>Array.isArray(l.value)?{[l.property]:{[l.operator]:l.value.join(",")}}:{[l.property]:{[l.operator]:l.value}}).reduce((l,h)=>_e(l,h),{}),[m]),D={...m,page:b.pageIndex+1,limit:b.pageSize,sort:xt(p[0]),search:v},ce=It(),L=["get",e,D],[j,$]=B(`${L.join("")}_ctx_column_order_preference`,[]),[H,ue]=B(`${L.join("")}_ctx_column_visibility_preference`,{id:!1,...o}),_=l=>{g(h=>({...h,...l}))},O=Oe({queryKey:L,queryFn:async()=>{const l=await ce.GET(e,{params:{query:{page:D.page,limit:D.limit,sort:D.sort,search:D.search,...S},path:r}});return{data:l.data??[],total:Number.parseInt(l.response.headers.get("Pagination-Count")||"0")}}}),de=i.filter(se),me=[...s?Tt:[],...n,...Pt(de??[])];function ge(l){return typeof l=="function"}function F(l,h){return ge(l)?l(h):l}const k=ze({data:O.data?.data??[],columns:me,getCoreRowModel:Le(),rowCount:O.data?.total??0,manualPagination:!0,onPaginationChange:l=>{_({pagination:F(l,b)})},manualSorting:!0,onSortingChange:l=>{R({}),_({sorting:[...F(l,p)]})},manualFiltering:!0,onColumnVisibilityChange:l=>{ue(F(l,H))},onRowSelectionChange:l=>{R(F(l,A))},onColumnOrderChange:l=>{$(F(l,j))},state:{sorting:p,columnVisibility:H,pagination:b,rowSelection:A,columnOrder:j},meta:{refetch:O.refetch}});return ee(()=>{const l=k.getAllLeafColumns();$([...l.filter(h=>h.id!==C).map(h=>h.id),...l.filter(h=>h.id===C).map(h=>h.id)])},[]),{tableState:u,updateTableState:_,query:O,setSearchQuery:z,searchQuery:v,tanTable:k,mergedFilters:S,filters:m,setFilters:f,filterConfig:a,tableActions:i,pathParameters:r}}const oe=be(null);function N(){const e=Se(oe);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function $n({children:e,...r}){return t(oe.Provider,{value:r,children:e})}function Hn({className:e,...r}){const{query:n,tanTable:a}=N();return t(T,{children:d(Nt,{children:[t(Rt,{}),d("section",{...r,className:y("z-20 flex flex-col bg-elevation-1 border rounded-md",e),children:[d("div",{className:"w-full overflow-auto h-table relative rounded-md",tabIndex:0,children:[n.isLoading&&t(Z,{className:"cursor-wait",children:t(ct,{})}),!n.isLoading&&a.getRowModel().rows.length===0&&t(Z,{className:"cursor-not-allowed",children:!n.isFetching&&(n.isError?d("span",{className:"flex gap-3 justify-center items-center",children:[t(Ve,{}),t("span",{children:n.error.message})]}):n.data?.data?.length===0?t(T,{children:"No results found."}):t(T,{children:"Unknown error. Please contact customer support."}))}),!n.isLoading&&a.getRowModel().rows.length!==0&&t(zt,{className:"w-full"})]}),d("div",{className:"flex w-full justify-between border-t gap-icon p-icon overflow-x-auto",children:[d("div",{className:"flex gap-icon",children:[t(Dt,{}),t(At,{})]}),t(Ft,{})]})]})]})})}function Z({children:e,className:r}){return d(T,{children:[t("span",{className:y(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 Dt(){const{tanTable:e}=N(),[r,n]=x(null),a=E(),o=ye(V(we),V(Ce,{coordinateGetter:Te}));return t(Ie,{sensors:o,collisionDetection:Ne,onDragStart:c=>{const{active:i}=c;n(i.id.toString())},onDragEnd:c=>{const{active:i,over:u}=c;if(u&&i.id!==u.id){const g=e.getState().columnOrder,p=g.indexOf(i.id.toString()),b=g.indexOf(u.id.toString());e.setColumnOrder([...Fe(g,p,b)])}n(null)},children:d(Pe,{items:e.getState().columnOrder,strategy:De,children:[d(P,{label:d(T,{children:[t(Qe,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(c=>c.id),children:[t(I,{onAction:()=>e.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),e.getState().columnOrder.map(c=>{const i=e.getAllFlatColumns().find(u=>u.id===c);return!i||i.id==="checkbox"||i.id===C?null:t(s,{column:i},i.id)})]}),t(xe,{children:r?t("div",{className:"opacity-70 border-2 border-primary",children:a(r)}):null})]})});function s({column:c}){const{attributes:i,listeners:u,setNodeRef:g,transform:p,transition:b}=Ae({id:c.id}),v={transform:Re.Transform.toString(p),transition:b,zIndex:"999"};return d(I,{ref:g,style:v,...i,id:c.id,onAction:()=>c.toggleVisibility(),isDisabled:!c.getCanHide(),className:"flex items-center",children:[t(Ue,{...u,className:"size-icon cursor-grab"}),q(c),c.getIsSorted()&&t(ie,{className:"size-icon",direction:c.getIsSorted()})]})}}function Ft(){const{tanTable:e}=N(),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()}`}),t(w,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Ge,{})}),t(w,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Ze,{})}),t(w,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Xe,{})}),t(w,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Ye,{})})]})}function At(){const{tanTable:e}=N(),r=[10,20,30,40,50];return t(P,{label:e.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[e.getState().pagination.pageSize.toString()],items:r.map(n=>({id:n.toString(),value:n})),children:n=>t(I,{onAction:()=>e.setPageSize(n.value),children:n.value})})}function Rt(){const{query:e,tanTable:r,searchQuery:n,setSearchQuery:a,tableActions:o}=N(),s=r.getSelectedRowModel().rows.length>0,c=o.filter(i=>i.resourceType!=="single").filter(i=>i.resourceType==="multiple"===s);return d("section",{className:"flex justify-between my-0 mb-icon gap-icon overflow-auto",children:[d("div",{className:"flex gap-icon",children:[t(w,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",children:t(Ke,{})}),t(ut,{value:n,onChange:a}),t(Ht,{})]}),t("div",{className:"flex gap-icon",children:t(Lt,{items:c,isFetching:e.isFetching})})]})}function ie({direction:e,...r}){return e==="asc"?t(Je,{className:"size-3.5",...r}):e==="desc"?t(We,{className:"size-3.5",...r}):t(et,{className:"size-3.5",...r})}function q(e){const r=E(),n=e.columnDef.header;return typeof n=="string"?n:r(e.id)}function Ot(e){const r=e.column.columnDef.meta?.displayType,n=e.getValue();if(n==null)return null;switch(r){case"date":return t("span",{className:"tabular-nums",children:ne(n)});case"number":return t("span",{className:"block text-right tabular-nums",children:yt(n)});case"boolean":return t(K,{variant:n?"success":"destructive",className:"w-full capitalize",children:String(n)});case"badge":return t(K,{className:"w-full",children:String(n)});case"country":return t(bt,{value:n});case"enum":return t("span",{className:"uppercase w-full",children:String(n)});case"fileSize":return vt(n);case"days":return St(n);case"os":return ke[n]??n;case"licenseType":return Ct[n]??n;case"subscriptionInterval":return ht.formatISODuration(n);case"subscriptionStartTrigger":return wt(n);default:return String(n)}}function X({header:e}){const r=e.column.columnDef.header;return typeof r=="string"||!r?q(e.column):typeof r=="function"?typeof r(e.getContext())=="string"?q(e.column):M(r,e.getContext()):M(r,e.getContext())}function zt({className:e}){const{tanTable:r}=N(),n=(a,o,s="z-50")=>y("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",a&&`bg-elevation-1 sticky right-0 ${s} text-center justify-center`,o);return d(dt,{className:y("table-auto border-0 rounded-md",e),children:[t(mt,{className:"sticky top-0 z-10 rounded-md",children:r.getHeaderGroups().map(a=>t(U,{children:a.headers.map(o=>d(gt,{scope:"col",colSpan:o.colSpan,className:n(o.id===C,"bg-elevation-1"),children:[!o.column.getCanSort()&&!o.isPlaceholder&&t("div",{className:y("w-full py-1 inline-flex items-center gap-1 body-sm",o.id===C?"justify-center":"justify-start"),children:t(X,{header:o})}),o.column.getCanSort()&&d(w,{variant:"ghost",className:y("w-full p-1",o.id===C?"justify-center":"justify-start"),onPress:o.column.getToggleSortingHandler(),children:[t("span",{children:t(X,{header:o})}),t(ie,{direction:o.column.getIsSorted()})]})]},o.id))},a.id))}),t(pt,{children:r.getRowModel().rows.map(a=>t(U,{className:y("transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":a.getIsSelected(),children:a.getVisibleCells().map(o=>{const s=o.column.id===C,c=o.column.columnDef.meta?.displayType?Ot(o):M(o.column.columnDef.cell,o.getContext());return t(ft,{className:y(n(s,void 0,"z-1"),s&&"flex justify-center items-center"),children:c},o.id)})},a.id))})]})}function Y(e){return e.resourceType==="none"}function se(e){return e.resourceType==="single"}function J(e){return e.resourceType==="multiple"}function Lt({items:e,isFetching:r}){const{openDialog:n,closeDialog:a}=re(),{tanTable:o}=N();function s(i,u){return i.isDisabled?Y(i)?i.isDisabled():J(i)?i.isDisabled(u):!1:!1}const c=o.getSelectedRowModel().rows.map(i=>i.original);return t(T,{children:e.map((i,u)=>{const g=i.icon,p=s(i,c)||r;return d(w,{"aria-label":i.label,type:"button",isDisabled:p,className:"animate-in fade-in slide-in-from-right-15 duration-300 transition-transform",onPress:b=>{const v={event:b,openDialog:n,closeDialog:a};Y(i)?i.onPress(v):J(i)&&i.onPress({...v,data:c})},variant:i.variant??"neutral",children:[g&&t(g,{"aria-hidden":!0}),t("span",{children:i.label})]},`${i.label}-${u}`)})})}function _t({label:e,items:r,data:n}){const{openDialog:a,closeDialog:o}=re();return t(P,{"aria-label":"Actions",label:e,size:"icon",children:r.map((s,c)=>{const i=s.icon,u=typeof s.label=="function"?s.label(n):s.label;return d(I,{id:typeof u=="string"?u:void 0,isDisabled:s.isDisabled?.(n)??!1,onAction:()=>{const g={openDialog:a,closeDialog:o};se(s)&&s.onPress({...g,data:n})},children:[t(i,{className:"size-icon"}),u]},`${c}-${typeof u=="string"?u:""}`)})})}const kn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],W={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"},Mt={eq:"=",ne:"≠",cn:"contains",nc:"!contains",sw:"starts with",ew:"ends with",in:"in",nin:"not in",gt:">",gte:"≥",lt:"<",lte:"≤"};function qt(e,r){const n=`${r}-${Date.now()}`,a=le[e][0];switch(e){case"bool":return{id:n,type:e,property:r,operator:a,value:!0};case"string":return{id:n,type:e,property:r,operator:a,value:""};case"date":return{id:n,type:e,property:r,operator:a,value:new Date().toISOString()};case"id":return{id:n,type:e,property:r,operator:a,value:""};case"id-search":return{id:n,type:e,property:r,operator:a,value:[]};case"enum":return{id:n,type:e,property:r,operator:a,value:new Set};case"number":return{id:n,type:e,property:r,operator:a,value:0}}}const le={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"],number:["eq","ne","gt","gte","lt","lte"]};function Et(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":return e.value?ne(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 jt({filter:e,filterConfig:r,pathParameters:n,onChange:a}){if(e.type==="string"||e.type==="id")return t(He,{autoFocus:!0,value:e.value??"",onChange:a,"aria-label":"Filter value"});if(e.type==="number")return t(Ee,{autoFocus:!0,value:e.value,onChange:a,"aria-label":"Filter value"});if(e.type==="bool")return d(P,{autoFocus:!0,label:e.value?"True":"False",variant:"neutral","aria-label":"Filter value",children:[t(I,{onAction:()=>a(!0),children:"True"}),t(I,{onAction:()=>a(!1),children:"False"})]});if(e.type==="date"){const o=e.value?pe(e.value,fe()):null;return t(Me,{autoFocus:!0,hideTimeZone:!0,value:o,onChange:s=>a(s?s.toAbsoluteString():new Date().toISOString()),"aria-label":"Filter date"})}if(e.type==="enum"){const o=r[e.property];return o.type!=="enum"?null:t(qe,{autoFocus:!0,items:o.options,value:e.value??new Set,onChange:a,"aria-label":"Filter value"})}if(e.type==="id-search"){const o=r[e.property];if(o.type!=="id-search")return null;const s=n?{path:n,query:{}}:void 0;return t(lt,{autoFocus:!0,path:o.path,accessor:o.accessor,defaultParams:s,value:e.value??[],onChange:a,"aria-label":"Filter value"})}return null}function $t({filter:e,filterConfig:r,pathParameters:n,resourceFormatter:a,onRemove:o,onUpdate:s,isOpen:c,onOpenChange:i}){const u=le[e.type],g=Et(e);return d(je,{isOpen:c,onOpenChange:i,children:[d(w,{type:"button",variant:"primary_neutral",className:"animate-in slide-in-from-left-10 fade-in",children:[t("span",{className:"font-medium",children:a(e.property)}),t("span",{children:Mt[e.operator]}),g&&t("span",{children:g})]}),t($e,{className:"p-icon min-w-48",children:d("div",{className:"flex flex-col gap-icon",children:[u.length>1&&t(P,{label:W[e.operator],variant:"neutral","aria-label":"Change operator",children:u.map(p=>t(I,{onAction:()=>s({operator:p}),children:W[p]},p))}),t(jt,{filter:e,filterConfig:r,pathParameters:n,onChange:p=>s({value:p})}),t(w,{type:"button",variant:"destructive",onPress:o,"aria-label":`Remove ${a(e.property)} filter`,children:t(st,{})})]})})]})}function Ht({className:e,defaultFilters:r,...n}){const{filters:a,query:o,setFilters:s,filterConfig:c,pathParameters:i}=N(),u=E(),g=Object.keys(c).sort(),[p,b]=x(null),v=ve(!1);ee(()=>{!v.current&&r&&r.length>0&&a.length===0&&s(r),v.current=!0},[]);const z=(m,f)=>{const S=qt(m,f);s([...a,S]),b(S.id)},A=m=>{s(a.filter(f=>f.id!==m))},R=(m,f)=>{s(a.map(S=>S.id===m?{...S,...f}:S))};return d("section",{...n,className:y("flex flex-wrap gap-icon items-center",e),children:[a.map(m=>t($t,{filter:m,filterConfig:c,pathParameters:i,resourceFormatter:u,onRemove:()=>A(m.id),onUpdate:f=>R(m.id,f),isOpen:p===m.id,onOpenChange:f=>b(f?m.id:null)},m.id)),t(P,{label:t(it,{}),isDisabled:o.isPending||g.length===0,variant:"neutral","aria-label":"Add filter",children:g.map(m=>{const f=c[m].type,S=kt[f];return d(I,{className:"!justify-between",onAction:()=>z(f,m),children:[u(m),t(S,{})]},m)})})]})}const kt={"id-search":ot,bool:Q,date:at,enum:rt,id:nt,number:tt,string:Q};export{W as C,Ht as D,Hn as DataTable,oe as DataTableContext,$n as DataTableProvider,kn as F,En as getColumnHelper,N as useDataTable,jn as useDataTableState};
|
|
2
2
|
//# sourceMappingURL=data-table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.js","sources":["../../lib/components/data-table.tsx","../../lib/components/data-table-filter.tsx"],"sourcesContent":["'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport {\n closestCenter,\n DndContext,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n arrayMove,\n SortableContext,\n sortableKeyboardCoordinates,\n useSortable,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { useQuery } from '@tanstack/react-query';\n\nimport {\n type Column,\n type ColumnDef,\n type ColumnOrderState,\n createColumnHelper,\n flexRender,\n getCoreRowModel,\n type Header,\n type PaginationState,\n type RowData,\n type RowSelectionState,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport { useLocalStorage } from '@uidotdev/usehooks';\nimport { merge } from 'lodash-es';\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport { Badge } from '../components/badge';\n\nimport { Button } from '../components/button';\nimport { DataTableFilter, type FiltersConfig, type TableFilter } from '../components/data-table-filter';\nimport { Loader } from '../components/loader';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport { SearchField } from '../components/searchfield';\nimport { TableBody, TableCell, Table as TableComponent, TableHead, TableHeader, TableRow } from '../components/table';\nimport { CountryName } from '../utilities/countries';\nimport { formatDate } from '../utilities/date';\nimport { Duration } from '../utilities/duration';\nimport { formatDays, formatFilesize, formatNumber } from '../utilities/numbers';\nimport { ALL_OS, type ApiPathParameters, type ApiResponseBody, useResourceFormatter } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { Checkbox } from './checkbox';\n\nimport {\n type CtxIcon,\n IcColumns,\n IcFirst,\n IcGrip,\n IcInfo,\n IcLast,\n IcLeft,\n IcMoreVertical,\n IcRefresh,\n IcRight,\n IcSortAsc,\n IcSortDesc,\n IcSortNone,\n} from './icons';\nimport { ALL_LICENSE_TYPES, getSubscriptionStartTriggerLabel } from './select-options';\n\nimport type { Cell, ColumnHelper } from '@tanstack/react-table';\nimport type { ClientPathsWithMethod } from 'openapi-fetch';\nimport type { PressEvent } from 'react-aria-components';\nimport { type CtxClientType, useCtxClient } from '../utilities/ctx-client';\nimport { ControlledDialogProvider, useControlledDialog } from './dialog';\n\nexport type DisplayType =\n | 'string'\n | 'boolean'\n | 'date'\n | 'number'\n | 'enum'\n | 'badge'\n | 'country'\n | 'fileSize'\n | 'days'\n | 'os'\n | 'licenseType'\n | 'subscriptionInterval'\n | 'subscriptionStartTrigger';\n\ndeclare module '@tanstack/react-table' {\n interface ColumnMeta<TData extends RowData, TValue> {\n displayType: DisplayType;\n }\n}\n\nfunction generateSortParam(sort: { id: string; desc: boolean } | undefined): string {\n if (sort) {\n if (sort.desc) {\n return `-${sort.id}`;\n } else {\n return `+${sort.id}`;\n }\n } else {\n return '-createdAt';\n }\n}\n\nconst cH = createColumnHelper<any>();\nconst TABLE_CHECK_BOX_COLUMN = [\n cH.accessor('checkbox', {\n header: ({ table }) => (\n <Checkbox\n isIndeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n isSelected={table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()}\n onChange={() => table.toggleAllPageRowsSelected()}\n aria-label=\"Select all\"\n />\n ),\n\n cell: ({ row }) => (\n <Checkbox isSelected={row.getIsSelected()} onChange={() => row.toggleSelected()} aria-label=\"Select row\" />\n ),\n enableSorting: false,\n enableHiding: false,\n }),\n];\n\nconst ACTIONS_COLUMN_ID = 'TableActions';\nfunction getActionsColumn<T extends object>(rowActions: SingleResourceAction<T>[]) {\n if (rowActions.length === 0) return [];\n\n return [\n cH.accessor(ACTIONS_COLUMN_ID, {\n header: 'Actions',\n id: ACTIONS_COLUMN_ID,\n enableHiding: false,\n cell: ({ row }) => (\n <TableActionsRowMenu label={<IcMoreVertical />} data={row.original} items={rowActions} />\n ),\n enableSorting: false,\n }),\n ];\n}\n\ntype DataTableFactory<T extends object, TOperation extends keyof operations> = {\n path: NoInfer<ClientPathsWithMethod<CtxClientType, 'get'>>;\n pathParameters?: NoInfer<ApiPathParameters<TOperation>>;\n columns: ColumnDef<T, any>[];\n tableActions: TableAction<T>[];\n columnsToHideByDefault?: Partial<Record<keyof T, boolean>>; // Columns that are hidden by default\n allowSelection?: boolean;\n filterConfig: FiltersConfig<TOperation>;\n initialFilters: TableFilter[];\n};\n\ntype DataTableState = {\n sorting: SortingState;\n pagination: PaginationState;\n};\n\nexport function getColumnHelper<O extends keyof operations>(): ColumnHelper<ApiResponseBody<O>> {\n return createColumnHelper<ApiResponseBody<O>>();\n}\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<T extends object, TOperation extends keyof operations>({\n path,\n pathParameters,\n columns,\n filterConfig,\n columnsToHideByDefault = {},\n allowSelection = false,\n initialFilters = [],\n tableActions,\n}: DataTableFactory<T, TOperation>) {\n const [tableState, _setTableState] = useState<DataTableState>({\n /** Reflect in URL in host application */\n pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n sorting: [], // Sorting state\n });\n\n const { sorting, pagination } = tableState;\n\n const [searchQuery, setSearchQuery] = useState('');\n\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n /** Reflect in URL in host application */\n const [filters, setFilters] = useState(initialFilters);\n const mergedFilters = useMemo(() => {\n // TODO, generic transform fn\n return filters\n .map(tf => {\n if (Array.isArray(tf.value)) {\n return {\n [tf.property]: {\n [tf.operator]: tf.value.join(','),\n },\n };\n }\n return {\n [tf.property]: {\n [tf.operator]: tf.value,\n },\n };\n })\n .reduce((acc, current) => {\n return merge(acc, current);\n }, {});\n }, [filters]);\n\n const queryParameters = {\n ...filters,\n page: pagination.pageIndex + 1,\n limit: pagination.pageSize,\n sort: generateSortParam(sorting[0]),\n search: searchQuery,\n };\n\n const client = useCtxClient();\n // TODO, this seems incorrect, verify\n const queryKey = ['get', path, queryParameters];\n\n const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n `${queryKey.join('')}_ctx_column_order_preference`,\n []\n );\n const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(\n `${queryKey.join('')}_ctx_column_visibility_preference`,\n {\n id: false,\n ...columnsToHideByDefault,\n }\n );\n\n // Update table state with new values\n const updateTableState = (updates: Partial<DataTableState>) => {\n _setTableState(prev => ({ ...prev, ...updates }));\n };\n\n const query = useQuery({\n queryKey,\n queryFn: async () => {\n // Hoping the above type catches the correct path parameter.\n const res = await client.GET(path, {\n params: {\n query: {\n page: queryParameters.page,\n limit: queryParameters.limit,\n sort: queryParameters.sort,\n search: queryParameters.search,\n ...mergedFilters,\n },\n path: pathParameters as any,\n },\n });\n return {\n data: (res.data ?? []) as T[],\n total: Number.parseInt(res.response.headers.get('Pagination-Count') || '0'),\n };\n },\n });\n\n const rowActions = tableActions.filter(isSingleResourceAction);\n /**\n * ID,createdAt and updatedAt will be added by default for all tables\n * If selection is allowed, checkbox will be added\n * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n * If there are actions for the table, they will be placed fixed at the right side of table.\n */\n const cols: ColumnDef<any, any>[] = [\n ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n ...columns,\n ...getActionsColumn<T>(rowActions ?? []),\n ];\n\n // Type-guard for updater\n function isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n return typeof updater === 'function';\n }\n // Utility function to resolve updater\n function resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n if (isUpdaterFunction(updater)) {\n return updater(currentValue);\n }\n return updater;\n }\n\n // Use react-table's hook to create the table instance\n const tanTable = useReactTable({\n data: query.data?.data ?? [],\n columns: cols,\n getCoreRowModel: getCoreRowModel(),\n rowCount: query.data?.total ?? 0,\n manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n onPaginationChange: updater => {\n updateTableState({ pagination: resolveUpdater(updater, pagination) });\n },\n manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n onSortingChange: updater => {\n setRowSelection({});\n updateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n },\n manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n onColumnVisibilityChange: updater => {\n setColumnVisibility(resolveUpdater(updater, columnVisibility));\n },\n onRowSelectionChange: updater => {\n setRowSelection(resolveUpdater(updater, rowSelection));\n },\n onColumnOrderChange: updater => {\n setColumnOrder(resolveUpdater(updater, columnOrder));\n },\n state: {\n sorting: sorting,\n columnVisibility: columnVisibility,\n pagination: pagination,\n rowSelection: rowSelection,\n columnOrder: columnOrder,\n },\n meta: {\n refetch: query.refetch,\n },\n });\n\n // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n // This populates the columnIds in the columnOrder state\n useEffect(() => {\n const columns = tanTable.getAllLeafColumns();\n //Make sure actions column is always at the end\n setColumnOrder([\n ...columns.filter(c => c.id !== ACTIONS_COLUMN_ID).map(c => c.id),\n ...columns.filter(c => c.id === ACTIONS_COLUMN_ID).map(c => c.id),\n ]);\n }, []);\n\n return {\n tableState,\n updateTableState,\n query,\n setSearchQuery,\n searchQuery,\n tanTable,\n mergedFilters,\n filters,\n setFilters,\n filterConfig,\n tableActions,\n pathParameters,\n } as const;\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n// TODO, don't export this\nexport function useDataTable() {\n const ctx = useContext(DataTableContext);\n if (!ctx) {\n throw Error('DataTable should be used within DataTableProvider.');\n }\n return ctx;\n}\n\nexport function DataTableProvider<T extends object, TOperation extends keyof operations>({\n children,\n ...props\n}: { children: React.ReactNode } & ReturnType<typeof useDataTableState<T, TOperation>>) {\n // @ts-expect-error, propogating the generic type further will be more complex. Since this is a tightly coupled type, it should be okay but reviewed whenever useDataTableState changes.\n return <DataTableContext.Provider value={props}>{children}</DataTableContext.Provider>;\n}\n\nexport type DataTableProps = React.ComponentProps<'section'>;\nexport function DataTable({ className, ...props }: DataTableProps) {\n const { query, tanTable } = useDataTable();\n\n return (\n <>\n <ControlledDialogProvider>\n {/* Table Actions Section */}\n <Actions />\n <section\n {...props}\n className={classNames('z-20 flex flex-col bg-elevation-1 border rounded-md', className)}\n >\n {/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n <div className=\"w-full overflow-auto h-table relative rounded-md\" tabIndex={0}>\n {/* Table overlay with loader */}\n {query.isLoading && (\n <TableOverlay className=\"cursor-wait\">\n <Loader />\n </TableOverlay>\n )}\n {/* Table overlay for empty table */}\n {!query.isLoading && tanTable.getRowModel().rows.length === 0 && (\n // Empty table\n <TableOverlay className=\"cursor-not-allowed\">\n {!query.isFetching &&\n (query.isError ? (\n <span className=\"flex gap-3 justify-center items-center\">\n {/* TODO (mudasir-pandith) Check for 403 explicitly!! */}\n {/* <span>{query.error}</span> */}\n <IcInfo />\n <span>{query.error.message}</span>\n </span>\n ) : query.data?.data?.length === 0 ? (\n <>No results found.</>\n ) : (\n <>Unknown error. Please contact customer support.</>\n ))}\n </TableOverlay>\n )}\n {!query.isLoading && tanTable.getRowModel().rows.length !== 0 && (\n <TableContent className=\"w-full\" />\n )}\n </div>\n\n {/* Table Footer Section with Pagination and Column Picker */}\n <div className=\"flex w-full justify-between border-t gap-icon p-icon overflow-x-auto\">\n <div className=\"flex gap-icon\">\n <ColumnPicker />\n <PageSize />\n </div>\n <Paginator />\n </div>\n </section>\n </ControlledDialogProvider>\n </>\n );\n}\n/** Table overlay to be shown for loaders or other messages */\nfunction TableOverlay({ children, className }: { children: React.ReactNode; className?: string }) {\n return (\n <>\n <span\n className={classNames(\n className,\n 'absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center'\n )}\n >\n {children}\n </span>\n {/* Keep something in document flow with the correct height */}\n <span className=\"relative h-full w-0 block\" />\n </>\n );\n}\n\n// TODO, ?include query param on Licenses, Activations and other future resources that need this\nfunction ColumnPicker() {\n const { tanTable } = useDataTable();\n const [activeId, setActiveId] = useState<string | null>(null);\n\n const resourceFormatter = useResourceFormatter();\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n })\n );\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragStart={event => {\n const { active } = event;\n setActiveId(active.id.toString());\n }}\n onDragEnd={event => {\n const { active, over } = event;\n\n if (over && active.id !== over.id) {\n const columnOrder = tanTable.getState().columnOrder;\n const oldIndex = columnOrder.indexOf(active.id.toString());\n const newIndex = columnOrder.indexOf(over.id.toString());\n tanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);\n }\n\n setActiveId(null);\n }}\n >\n <SortableContext items={tanTable.getState().columnOrder} strategy={verticalListSortingStrategy}>\n <EasyMenu\n label={\n <>\n <IcColumns className=\"inline align-bottom me-1\" />\n Columns\n </>\n }\n selectionMode=\"multiple\"\n items={tanTable.getAllFlatColumns()}\n // Using selectedKeys = 'all' does not mark MenuItems with isDisabled=true as selected. This is not the intended behaviour in this use-case.\n selectedKeys={tanTable.getVisibleFlatColumns().map(c => c.id)}\n >\n <MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>\n (select all)\n </MenuItem>\n {tanTable.getState().columnOrder.map(colId => {\n const col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n // Don't show checkbox and actions columns in picker\n if (!col || col.id === 'checkbox' || col.id === ACTIONS_COLUMN_ID) return null;\n return <SortableItem key={col.id} column={col} />;\n })}\n </EasyMenu>\n <DragOverlay>\n {activeId ? (\n <div className=\"opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div>\n ) : null}\n </DragOverlay>\n </SortableContext>\n </DndContext>\n );\n\n function SortableItem({ column }: { column: Column<any, unknown> }) {\n const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n zIndex: '999',\n };\n return (\n <MenuItem\n ref={setNodeRef}\n style={style}\n {...attributes}\n id={column.id}\n onAction={() => column.toggleVisibility()}\n isDisabled={!column.getCanHide()}\n className=\"flex items-center\"\n >\n <IcGrip {...listeners} className=\"size-icon cursor-grab\" />\n {getColumnHeaderText(column)}\n {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n </MenuItem>\n );\n }\n}\n\nfunction Paginator() {\n const { tanTable } = useDataTable();\n const rowCount = tanTable.getRowCount();\n return (\n <div className=\"flex items-center gap-2\">\n <span className=\"whitespace-nowrap body-sm text-muted\">\n {`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n (tanTable.getState().pagination.pageIndex + 1) * tanTable.getState().pagination.pageSize,\n rowCount\n )} of ${rowCount?.toLocaleString()}`}\n </span>\n\n <Button\n aria-label=\"First page\"\n onPress={() => tanTable.firstPage()}\n isDisabled={!tanTable.getCanPreviousPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcFirst />\n </Button>\n <Button\n aria-label=\"Previous page\"\n onPress={() => tanTable.previousPage()}\n isDisabled={!tanTable.getCanPreviousPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcLeft />\n </Button>\n <Button\n aria-label=\"Next page\"\n onPress={() => tanTable.nextPage()}\n isDisabled={!tanTable.getCanNextPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcRight />\n </Button>\n <Button\n aria-label=\"Last page\"\n onClick={() => tanTable.lastPage()}\n isDisabled={!tanTable.getCanNextPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcLast />\n </Button>\n </div>\n );\n}\n\nfunction PageSize() {\n const { tanTable } = useDataTable();\n const PAGE_SIZES = [10, 20, 30, 40, 50];\n\n return (\n <EasyMenu\n label={tanTable.getState().pagination.pageSize.toString()}\n selectionMode=\"single\"\n selectedKeys={[tanTable.getState().pagination.pageSize.toString()]}\n items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}\n >\n {items => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>}\n </EasyMenu>\n );\n}\n\nfunction Actions() {\n const { query, tanTable, searchQuery, setSearchQuery, tableActions } = useDataTable();\n const hasSelectedRows = tanTable.getSelectedRowModel().rows.length > 0;\n\n const filteredActions = tableActions\n .filter(ta => ta.resourceType !== 'single')\n .filter(ta => (ta.resourceType === 'multiple') === hasSelectedRows);\n\n return (\n <section className=\"flex justify-between my-0 mb-icon gap-icon overflow-auto\">\n <div className=\"flex gap-icon\">\n <Button\n aria-label=\"Refresh\"\n isPending={query.isFetching}\n onClick={() => query.refetch()}\n variant={'neutral'}\n size={'icon'}\n >\n <IcRefresh />\n </Button>\n {<SearchField value={searchQuery} onChange={setSearchQuery} />}\n <DataTableFilter />\n </div>\n <div className=\"flex gap-icon\">\n <TableActions items={filteredActions} isFetching={query.isFetching} />\n </div>\n </section>\n );\n}\n\nfunction SortIcon({\n direction,\n ...props\n}: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n if (direction === 'asc') return <IcSortAsc className=\"size-3.5\" {...props} />;\n else if (direction === 'desc') return <IcSortDesc className=\"size-3.5\" {...props} />;\n else return <IcSortNone className=\"size-3.5\" {...props} />;\n}\n\nfunction getColumnHeaderText(column: Column<any, unknown>): string {\n const resourceFormatter = useResourceFormatter();\n const headerDef = column.columnDef.header;\n return typeof headerDef === 'string' ? headerDef : resourceFormatter(column.id);\n}\n\n/**\n * Renders a cell value based on the displayType metadata\n * @param cell - The cell to render\n * @returns The formatted value as a React node\n */\nfunction renderCellByDisplayType(cell: Cell<any, any>): React.ReactNode {\n const displayType = cell.column.columnDef.meta?.displayType;\n const value = cell.getValue();\n\n if (value === null || value === undefined) {\n return null;\n }\n\n switch (displayType) {\n case 'date':\n return <span className=\"tabular-nums\">{formatDate(value)}</span>;\n case 'number':\n return <span className=\"block text-right tabular-nums\">{formatNumber(value)}</span>;\n case 'boolean':\n return (\n <Badge variant={Boolean(value) ? 'success' : 'destructive'} className=\"w-full capitalize\">\n {String(value)}\n </Badge>\n );\n case 'badge':\n return <Badge className=\"w-full\">{String(value)}</Badge>;\n case 'country':\n return <CountryName value={value} />;\n case 'enum':\n return <span className=\"uppercase w-full\">{String(value)}</span>;\n case 'fileSize':\n return formatFilesize(value);\n case 'days':\n return formatDays(value);\n case 'os':\n return ALL_OS[value as keyof typeof ALL_OS] ?? value;\n case 'licenseType':\n return ALL_LICENSE_TYPES[value as string] ?? value;\n case 'subscriptionInterval':\n return Duration.formatISODuration(value);\n case 'subscriptionStartTrigger':\n return getSubscriptionStartTriggerLabel(value);\n default:\n return String(value);\n }\n}\n\nfunction HeaderText({ header }: { header: Header<any, unknown> }) {\n const headerDef = header.column.columnDef.header;\n\n if (typeof headerDef === 'string' || !headerDef) {\n return getColumnHeaderText(header.column);\n }\n\n if (typeof headerDef === 'function') {\n const result = headerDef(header.getContext());\n if (typeof result === 'string') {\n return getColumnHeaderText(header.column);\n }\n return flexRender(headerDef, header.getContext());\n }\n\n return flexRender(headerDef, header.getContext());\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n const { tanTable } = useDataTable();\n const tableCellStyle = (isSticky: boolean, className?: string, zIndex: string = 'z-50') =>\n classNames(\n 'px-icon py-2 text-left body-sm font-medium whitespace-nowrap',\n isSticky && `bg-elevation-1 sticky right-0 ${zIndex} text-center justify-center`,\n className\n );\n return (\n <TableComponent className={classNames('table-auto border-0 rounded-md', className)}>\n <TableHeader className=\"sticky top-0 z-10 rounded-md\">\n {tanTable.getHeaderGroups().map(headerGroup => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map(header => (\n <TableHead\n scope=\"col\"\n key={header.id}\n colSpan={header.colSpan}\n className={tableCellStyle(header.id === ACTIONS_COLUMN_ID, 'bg-elevation-1')}\n >\n {!header.column.getCanSort() && !header.isPlaceholder && (\n <div\n className={classNames(\n 'w-full py-1 inline-flex items-center gap-1 body-sm',\n header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n )}\n >\n <HeaderText header={header} />\n </div>\n )}\n {header.column.getCanSort() && (\n <Button\n variant=\"ghost\"\n className={classNames(\n 'w-full p-1',\n header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n )}\n onPress={header.column.getToggleSortingHandler()}\n >\n <span>\n <HeaderText header={header} />\n </span>\n <SortIcon direction={header.column.getIsSorted()} />\n </Button>\n )}\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {tanTable.getRowModel().rows.map(row => (\n <TableRow\n className={classNames(\n 'transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20'\n )}\n key={row.id}\n data-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map(cell => {\n const isActionsColumn = cell.column.id === ACTIONS_COLUMN_ID;\n const cellContent = cell.column.columnDef.meta?.displayType\n ? renderCellByDisplayType(cell)\n : flexRender(cell.column.columnDef.cell, cell.getContext());\n\n return (\n <TableCell\n key={cell.id}\n className={classNames(\n tableCellStyle(isActionsColumn, undefined, 'z-1'),\n isActionsColumn && 'flex justify-center items-center'\n )}\n >\n {cellContent}\n </TableCell>\n );\n })}\n </TableRow>\n ))}\n </TableBody>\n </TableComponent>\n );\n}\n\n/** Base properties shared by all table actions */\ntype ActionBase = {\n label: string;\n icon: CtxIcon;\n tooltip?: string;\n /** Optional button variant to pass through to Button (defaults to neutral) */\n variant?: React.ComponentProps<typeof Button>['variant'];\n};\n\n/** Context provided to onPress functions in TableActions */\ntype ActionPressContext = {\n event?: PressEvent;\n openDialog: (c: React.ReactNode) => void;\n closeDialog: () => void;\n};\n\nexport type NoResourceAction = ActionBase & {\n resourceType: 'none';\n isDisabled?: () => boolean;\n onPress: (c: ActionPressContext) => void;\n};\n\nexport type SingleResourceAction<T> = Omit<ActionBase, 'label'> & {\n resourceType: 'single';\n /** Label function that receives row data for dynamic labels */\n label: string | ((data: T) => React.ReactNode);\n isDisabled?: (data: T) => boolean;\n onPress: (c: ActionPressContext & { data: T }) => void;\n};\n\nexport type BulkResourceAction<T> = ActionBase & {\n resourceType: 'multiple';\n isDisabled?: (data: T[]) => boolean;\n onPress: (c: ActionPressContext & { data: T[] }) => void;\n};\n\n/** Common table action type that works for both action and dialog types */\nexport type TableAction<T> = NoResourceAction | SingleResourceAction<T> | BulkResourceAction<T>;\n\nfunction isNoResourceAction<T>(item: TableAction<T>): item is NoResourceAction {\n return item.resourceType === 'none';\n}\n\nfunction isSingleResourceAction<T>(item: TableAction<T>): item is SingleResourceAction<T> {\n return item.resourceType === 'single';\n}\n\nfunction isBulkResourceAction<T>(item: TableAction<T>): item is BulkResourceAction<T> {\n return item.resourceType === 'multiple';\n}\n\nexport type TableActionsProps<T> = {\n /** Array of table actions to render */\n readonly items: (NoResourceAction | BulkResourceAction<T>)[];\n /** Whether the table is currently fetching data */\n readonly isFetching?: boolean;\n};\n\nfunction TableActions<T>({ items, isFetching }: TableActionsProps<T>) {\n const { openDialog, closeDialog } = useControlledDialog();\n const { tanTable } = useDataTable();\n\n function getTableActionIsDisabled<T>(item: TableAction<T>, rows: T[]): boolean {\n if (!item.isDisabled) return false;\n\n if (isNoResourceAction(item)) {\n return item.isDisabled();\n } else if (isBulkResourceAction(item)) {\n return item.isDisabled(rows);\n }\n return false;\n }\n\n const selectedRows = tanTable.getSelectedRowModel().rows.map(r => r.original);\n return (\n <>\n {items.map((item, i) => {\n const Icon = item.icon;\n const isDisabled = getTableActionIsDisabled(item, selectedRows) || isFetching;\n\n return (\n <Button\n key={`${item.label}-${i}`}\n aria-label={item.label}\n type=\"button\"\n isDisabled={isDisabled}\n className=\"animate-in fade-in slide-in-from-right-15 duration-300 transition-transform\"\n onPress={e => {\n const context = { event: e, openDialog, closeDialog };\n // TableActions only has Bulk actions and NoResource actions\n if (isNoResourceAction(item)) {\n item.onPress(context);\n } else if (isBulkResourceAction(item)) {\n item.onPress({ ...context, data: selectedRows });\n }\n }}\n variant={item.variant ?? 'neutral'}\n >\n {Icon && <Icon aria-hidden />}\n <span>{item.label}</span>\n </Button>\n );\n })}\n </>\n );\n}\n\nfunction TableActionsRowMenu<T>({\n label,\n items,\n data,\n}: {\n readonly label: React.ReactNode;\n readonly items: SingleResourceAction<T>[];\n readonly data: T;\n}) {\n const { openDialog, closeDialog } = useControlledDialog();\n\n return (\n <EasyMenu aria-label=\"Actions\" label={label} size={'icon'}>\n {items.map((it, i) => {\n const Icon = it.icon;\n const label = typeof it.label === 'function' ? it.label(data) : it.label;\n return (\n <MenuItem\n key={`${i}-${typeof label === 'string' ? label : ''}`}\n id={typeof label === 'string' ? label : undefined}\n isDisabled={it.isDisabled?.(data) ?? false}\n onAction={() => {\n const context = { openDialog, closeDialog };\n if (isSingleResourceAction(it)) {\n it.onPress({ ...context, data });\n }\n }}\n >\n <Icon className=\"size-icon\" />\n {label}\n </MenuItem>\n );\n })}\n </EasyMenu>\n );\n}\n","'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date';\nimport { useEffect, useRef, useState } from 'react';\nimport { Button } from '../components/button';\nimport { useDataTable } from '../components/data-table';\nimport { DatePicker } from '../components/date-picker';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport { MultiSelect, type MultiSelectProps } from '../components/multi-select';\nimport { NumberField } from '../components/numberfield';\nimport { Popover, PopoverTrigger } from '../components/popover';\nimport { TextField } from '../components/textfield';\nimport { formatDate } from '../utilities/date';\nimport { useResourceFormatter, type ApiFilters } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { IcAccount, IcCheck, IcDate, IcFile, IcFilter, IcLicense, IcMinus, IcRemove, type CtxIcon } from './icons';\nimport { MultipleIdSearchInput } from './id-search';\n\nexport const FILTER_COMPARISON_OPERATORS = [\n 'eq',\n 'ne',\n 'cn',\n 'nc',\n 'sw',\n 'ew',\n 'in',\n 'nin',\n 'gt',\n 'gte',\n 'lt',\n 'lte',\n] as const;\nexport type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<FilterComparisonOperator, string> = {\n eq: 'equal to',\n ne: 'not equal to',\n cn: 'contains',\n nc: 'does not contain',\n sw: 'starts with',\n ew: 'ends with',\n in: 'includes',\n nin: 'does not include',\n gt: 'greater than',\n gte: 'greater than or equal to',\n lt: 'less than',\n lte: 'less than or equal to',\n};\n\nconst COMPARISON_OPERATOR_SHORT_LABELS: Record<FilterComparisonOperator, string> = {\n eq: '=',\n ne: '≠',\n cn: 'contains',\n nc: '!contains',\n sw: 'starts with',\n ew: 'ends with',\n in: 'in',\n nin: 'not in',\n gt: '>',\n gte: '≥',\n lt: '<',\n lte: '≤',\n};\n\ntype BaseLocalFilter<T extends FilterType, V> = {\n id: string;\n type: T;\n property: string;\n operator: FilterComparisonOperator;\n value: V | undefined;\n displayValue?: string;\n};\ntype EnumLocalFilter = BaseLocalFilter<'enum', Set<string | number>>;\ntype IdLocalFilter = BaseLocalFilter<'id', string>;\ntype BoolLocalFilter = BaseLocalFilter<'bool', boolean>;\ntype StringLocalFilter = BaseLocalFilter<'string', string>;\ntype NumberLocalFilter = BaseLocalFilter<'number', number>;\n// DatePicker accepts a string, and converts it to a ZonedDateTime\ntype DateLocalFilter = BaseLocalFilter<'date', string>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', string[]>;\n// TODO, entitlementSets.productIds\nfunction createNewFilter(type: FilterType, property: string): TableFilter {\n const id = `${property}-${Date.now()}`;\n const operator = FilterOperations[type][0];\n\n switch (type) {\n case 'bool':\n return { id, type, property, operator, value: true };\n case 'string':\n return { id, type, property, operator, value: '' };\n case 'date':\n return { id, type, property, operator, value: new Date().toISOString() };\n case 'id':\n return { id, type, property, operator, value: '' };\n case 'id-search':\n return { id, type, property, operator, value: [] };\n case 'enum':\n return { id, type, property, operator, value: new Set<string | number>() };\n case 'number':\n return { id, type, property, operator, value: 0 };\n }\n}\n\nexport type TableFilter =\n | EnumLocalFilter\n | IdLocalFilter\n | BoolLocalFilter\n | StringLocalFilter\n | DateLocalFilter\n | IdSearchLocalFilter\n | NumberLocalFilter;\n\nexport type FilterConfig =\n | { type: 'enum'; options: MultiSelectProps['items'] }\n | ({ type: 'id-search' } & Pick<\n React.ComponentProps<typeof MultipleIdSearchInput>,\n 'accessor' | 'path' | 'defaultParams'\n >)\n | { type: 'id' }\n | { type: 'bool' }\n | { type: 'string' }\n | { type: 'date' }\n | { type: 'number' };\n\nexport type FilterType = FilterConfig['type'];\n\nconst FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {\n bool: ['eq'],\n enum: ['in', 'nin'],\n id: ['in', 'nin'],\n 'id-search': ['in', 'nin'],\n string: ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],\n date: ['lt', 'gt'],\n number: ['eq', 'ne', 'gt', 'gte', 'lt', 'lte'],\n};\n\n// TS workaround to get rid of filterConfig: Required<Record<never, FilterConfig>>\nexport type FiltersConfig<TOperation extends keyof operations> = [keyof ApiFilters<TOperation>] extends [never]\n ? Record<string, FilterConfig>\n : Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>;\n\ntype FilterUpdate = { operator?: FilterComparisonOperator; value?: TableFilter['value'] };\n\nfunction getFilterValueSummary(filter: TableFilter): string {\n switch (filter.type) {\n case 'string':\n case 'id':\n return filter.value ?? '';\n case 'number':\n return filter.value?.toString() ?? '';\n case 'bool':\n return filter.value ? 'true' : 'false';\n case 'date':\n return filter.value ? (formatDate(filter.value, { dateStyle: 'short' }) ?? '') : '';\n case 'enum':\n return filter.value && filter.value.size > 0 ? `${filter.value.size} selected` : '';\n case 'id-search':\n return filter.value && filter.value.length > 0\n ? filter.value.length === 1\n ? '1 item'\n : `${filter.value.length} items`\n : '';\n }\n}\n\nfunction FilterValueInput({\n filter,\n filterConfig,\n pathParameters,\n onChange,\n}: {\n filter: TableFilter;\n filterConfig: Record<string, FilterConfig>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n pathParameters?: Record<string, any>;\n onChange: (value: TableFilter['value']) => void;\n}) {\n if (filter.type === 'string' || filter.type === 'id') {\n return (\n <TextField\n autoFocus\n value={filter.value ?? ''}\n onChange={onChange as (v: string) => void}\n aria-label=\"Filter value\"\n />\n );\n }\n\n if (filter.type === 'number') {\n return (\n <NumberField\n autoFocus\n value={filter.value}\n onChange={onChange as (v: number) => void}\n aria-label=\"Filter value\"\n />\n );\n }\n\n if (filter.type === 'bool') {\n return (\n <EasyMenu autoFocus label={filter.value ? 'True' : 'False'} variant=\"neutral\" aria-label=\"Filter value\">\n <MenuItem onAction={() => onChange(true)}>True</MenuItem>\n <MenuItem onAction={() => onChange(false)}>False</MenuItem>\n </EasyMenu>\n );\n }\n\n if (filter.type === 'date') {\n const value = filter.value ? parseAbsolute(filter.value, getLocalTimeZone()) : null;\n return (\n <DatePicker<ZonedDateTime>\n autoFocus\n hideTimeZone\n value={value}\n onChange={v => onChange(v ? v.toAbsoluteString() : new Date().toISOString())}\n aria-label=\"Filter date\"\n />\n );\n }\n\n if (filter.type === 'enum') {\n const config = filterConfig[filter.property];\n if (config.type !== 'enum') return null;\n return (\n <MultiSelect\n autoFocus\n items={config.options}\n value={filter.value ?? new Set<string | number>()}\n onChange={onChange as (v: Set<string | number>) => void}\n aria-label=\"Filter value\"\n />\n );\n }\n\n if (filter.type === 'id-search') {\n const config = filterConfig[filter.property];\n if (config.type !== 'id-search') return null;\n const defaultParams = pathParameters ? { path: pathParameters, query: {} } : undefined;\n return (\n <MultipleIdSearchInput\n autoFocus\n path={config.path}\n accessor={config.accessor}\n defaultParams={defaultParams}\n value={filter.value ?? []}\n onChange={onChange as (v: string[]) => void}\n aria-label=\"Filter value\"\n />\n );\n }\n\n return null;\n}\n\nfunction FilterChip({\n filter,\n filterConfig,\n pathParameters,\n resourceFormatter,\n onRemove,\n onUpdate,\n isOpen,\n onOpenChange,\n}: {\n filter: TableFilter;\n filterConfig: Record<string, FilterConfig>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n pathParameters?: Record<string, any>;\n resourceFormatter: (key: string) => string;\n onRemove: () => void;\n onUpdate: (updates: FilterUpdate) => void;\n isOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n}) {\n const operators = FilterOperations[filter.type];\n const valueSummary = getFilterValueSummary(filter);\n\n return (\n <PopoverTrigger isOpen={isOpen} onOpenChange={onOpenChange}>\n <Button type=\"button\" variant=\"neutral\" className={'animate-in slide-in-from-left-10 fade-in rounded-full'}>\n <span className=\"font-medium\">{resourceFormatter(filter.property)}</span>\n <span>{COMPARISON_OPERATOR_SHORT_LABELS[filter.operator]}</span>\n {valueSummary && <span>{valueSummary}</span>}\n </Button>\n <Popover className=\"p-icon min-w-48\">\n <div className=\"flex flex-col gap-icon\">\n {operators.length > 1 && (\n <EasyMenu\n label={COMPARISON_OPERATOR_LABELS[filter.operator]}\n variant=\"neutral\"\n aria-label=\"Change operator\"\n >\n {operators.map(op => (\n <MenuItem key={op} onAction={() => onUpdate({ operator: op })}>\n {COMPARISON_OPERATOR_LABELS[op]}\n </MenuItem>\n ))}\n </EasyMenu>\n )}\n <FilterValueInput\n filter={filter}\n filterConfig={filterConfig}\n pathParameters={pathParameters}\n onChange={value => onUpdate({ value })}\n />\n <Button\n type=\"button\"\n variant=\"destructive_neutral\"\n onPress={onRemove}\n aria-label={`Remove ${resourceFormatter(filter.property)} filter`}\n >\n <IcRemove />\n </Button>\n </div>\n </Popover>\n </PopoverTrigger>\n );\n}\n\nexport function DataTableFilter({\n className,\n defaultFilters,\n ...props\n}: React.ComponentProps<'section'> & {\n /** Filters applied on initial mount when no existing filters are active. */\n defaultFilters?: TableFilter[];\n}) {\n const { filters, query, setFilters, filterConfig, pathParameters } = useDataTable();\n const resourceFormatter = useResourceFormatter();\n const filterKeys = Object.keys(filterConfig).sort();\n const [openFilterId, setOpenFilterId] = useState<string | null>(null);\n\n const initialized = useRef(false);\n useEffect(() => {\n if (!initialized.current && defaultFilters && defaultFilters.length > 0 && filters.length === 0) {\n setFilters(defaultFilters);\n }\n initialized.current = true;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const addFilter = (type: FilterType, property: string) => {\n const newFilter = createNewFilter(type, property);\n setFilters([...filters, newFilter]);\n setOpenFilterId(newFilter.id);\n };\n\n const removeFilter = (id: string) => {\n setFilters(filters.filter(f => f.id !== id));\n };\n\n const updateFilter = (id: string, updates: FilterUpdate) => {\n setFilters(filters.map(f => (f.id === id ? ({ ...f, ...updates } as TableFilter) : f)));\n };\n\n return (\n <section {...props} className={classNames('flex flex-wrap gap-icon items-center', className)}>\n {filters.map(filter => (\n <FilterChip\n key={filter.id}\n filter={filter}\n filterConfig={filterConfig}\n pathParameters={pathParameters}\n resourceFormatter={resourceFormatter}\n onRemove={() => removeFilter(filter.id)}\n onUpdate={updates => updateFilter(filter.id, updates)}\n isOpen={openFilterId === filter.id}\n onOpenChange={open => setOpenFilterId(open ? filter.id : null)}\n />\n ))}\n\n <EasyMenu\n label={<IcFilter />}\n isDisabled={query.isPending || filterKeys.length === 0}\n variant=\"neutral\"\n aria-label=\"Add filter\"\n >\n {filterKeys.map(k => {\n const type = filterConfig[k].type;\n const Icon = FilterIcon[type];\n return (\n <MenuItem className={'!justify-between'} key={k} onAction={() => addFilter(type, k)}>\n {resourceFormatter(k)}\n <Icon />\n </MenuItem>\n );\n })}\n </EasyMenu>\n </section>\n );\n}\n\nconst FilterIcon: Record<FilterConfig['type'], CtxIcon> = {\n 'id-search': IcFile,\n bool: IcCheck,\n date: IcDate,\n enum: IcLicense,\n id: IcAccount,\n number: IcMinus,\n string: IcCheck,\n};\n"],"names":["generateSortParam","sort","cH","createColumnHelper","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","ACTIONS_COLUMN_ID","getActionsColumn","rowActions","TableActionsRowMenu","IcMoreVertical","getColumnHelper","useDataTableState","path","pathParameters","columns","filterConfig","columnsToHideByDefault","allowSelection","initialFilters","tableActions","tableState","_setTableState","useState","sorting","pagination","searchQuery","setSearchQuery","rowSelection","setRowSelection","filters","setFilters","mergedFilters","useMemo","tf","acc","current","merge","queryParameters","client","useCtxClient","queryKey","columnOrder","setColumnOrder","useLocalStorage","columnVisibility","setColumnVisibility","updateTableState","updates","prev","query","useQuery","res","isSingleResourceAction","cols","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","useEffect","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","className","Fragment","ControlledDialogProvider","Actions","jsxs","classNames","TableOverlay","Loader","IcInfo","TableContent","ColumnPicker","PageSize","Paginator","activeId","setActiveId","resourceFormatter","useResourceFormatter","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","arrayMove","SortableContext","verticalListSortingStrategy","EasyMenu","IcColumns","MenuItem","colId","col","SortableItem","DragOverlay","column","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","IcGrip","getColumnHeaderText","SortIcon","rowCount","Button","IcFirst","IcLeft","IcRight","IcLast","PAGE_SIZES","s","items","hasSelectedRows","filteredActions","ta","IcRefresh","SearchField","DataTableFilter","TableActions","direction","IcSortAsc","IcSortDesc","IcSortNone","headerDef","renderCellByDisplayType","cell","displayType","value","formatDate","formatNumber","Badge","CountryName","formatFilesize","formatDays","ALL_OS","ALL_LICENSE_TYPES","Duration","getSubscriptionStartTriggerLabel","HeaderText","header","flexRender","tableCellStyle","isSticky","zIndex","TableComponent","TableHeader","headerGroup","TableRow","TableHead","TableBody","isActionsColumn","cellContent","TableCell","isNoResourceAction","item","isBulkResourceAction","isFetching","openDialog","closeDialog","useControlledDialog","getTableActionIsDisabled","rows","selectedRows","r","i","Icon","isDisabled","e","context","label","data","it","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","COMPARISON_OPERATOR_SHORT_LABELS","createNewFilter","type","property","id","operator","FilterOperations","getFilterValueSummary","filter","FilterValueInput","onChange","TextField","NumberField","parseAbsolute","getLocalTimeZone","DatePicker","v","config","MultiSelect","defaultParams","MultipleIdSearchInput","FilterChip","onRemove","onUpdate","isOpen","onOpenChange","operators","valueSummary","PopoverTrigger","Popover","op","IcRemove","defaultFilters","filterKeys","openFilterId","setOpenFilterId","initialized","useRef","addFilter","newFilter","removeFilter","updateFilter","f","open","IcFilter","k","FilterIcon","IcFile","IcCheck","IcDate","IcLicense","IcAccount","IcMinus"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"data-table.js","sources":["../../lib/components/data-table.tsx","../../lib/components/data-table-filter.tsx"],"sourcesContent":["'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport {\n closestCenter,\n DndContext,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n arrayMove,\n SortableContext,\n sortableKeyboardCoordinates,\n useSortable,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { useQuery } from '@tanstack/react-query';\n\nimport {\n type Column,\n type ColumnDef,\n type ColumnOrderState,\n createColumnHelper,\n flexRender,\n getCoreRowModel,\n type Header,\n type PaginationState,\n type RowData,\n type RowSelectionState,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport { useLocalStorage } from '@uidotdev/usehooks';\nimport { merge } from 'lodash-es';\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport { Badge } from '../components/badge';\n\nimport { Button } from '../components/button';\nimport { DataTableFilter, type FiltersConfig, type TableFilter } from '../components/data-table-filter';\nimport { Loader } from '../components/loader';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport { SearchField } from '../components/searchfield';\nimport { TableBody, TableCell, Table as TableComponent, TableHead, TableHeader, TableRow } from '../components/table';\nimport { CountryName } from '../utilities/countries';\nimport { formatDate } from '../utilities/date';\nimport { Duration } from '../utilities/duration';\nimport { formatDays, formatFilesize, formatNumber } from '../utilities/numbers';\nimport { ALL_OS, type ApiPathParameters, type ApiResponseBody, useResourceFormatter } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { Checkbox } from './checkbox';\n\nimport {\n type CtxIcon,\n IcColumns,\n IcFirst,\n IcGrip,\n IcInfo,\n IcLast,\n IcLeft,\n IcMoreVertical,\n IcRefresh,\n IcRight,\n IcSortAsc,\n IcSortDesc,\n IcSortNone,\n} from './icons';\nimport { ALL_LICENSE_TYPES, getSubscriptionStartTriggerLabel } from './select-options';\n\nimport type { Cell, ColumnHelper } from '@tanstack/react-table';\nimport type { ClientPathsWithMethod } from 'openapi-fetch';\nimport type { PressEvent } from 'react-aria-components';\nimport { type CtxClientType, useCtxClient } from '../utilities/ctx-client';\nimport { ControlledDialogProvider, useControlledDialog } from './dialog';\n\nexport type DisplayType =\n | 'string'\n | 'boolean'\n | 'date'\n | 'number'\n | 'enum'\n | 'badge'\n | 'country'\n | 'fileSize'\n | 'days'\n | 'os'\n | 'licenseType'\n | 'subscriptionInterval'\n | 'subscriptionStartTrigger';\n\ndeclare module '@tanstack/react-table' {\n interface ColumnMeta<TData extends RowData, TValue> {\n displayType: DisplayType;\n }\n}\n\nfunction generateSortParam(sort: { id: string; desc: boolean } | undefined): string {\n if (sort) {\n if (sort.desc) {\n return `-${sort.id}`;\n } else {\n return `+${sort.id}`;\n }\n } else {\n return '-createdAt';\n }\n}\n\nconst cH = createColumnHelper<any>();\nconst TABLE_CHECK_BOX_COLUMN = [\n cH.accessor('checkbox', {\n header: ({ table }) => (\n <Checkbox\n isIndeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n isSelected={table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()}\n onChange={() => table.toggleAllPageRowsSelected()}\n aria-label=\"Select all\"\n />\n ),\n\n cell: ({ row }) => (\n <Checkbox isSelected={row.getIsSelected()} onChange={() => row.toggleSelected()} aria-label=\"Select row\" />\n ),\n enableSorting: false,\n enableHiding: false,\n }),\n];\n\nconst ACTIONS_COLUMN_ID = 'TableActions';\nfunction getActionsColumn<T extends object>(rowActions: SingleResourceAction<T>[]) {\n if (rowActions.length === 0) return [];\n\n return [\n cH.accessor(ACTIONS_COLUMN_ID, {\n header: 'Actions',\n id: ACTIONS_COLUMN_ID,\n enableHiding: false,\n cell: ({ row }) => (\n <TableActionsRowMenu label={<IcMoreVertical />} data={row.original} items={rowActions} />\n ),\n enableSorting: false,\n }),\n ];\n}\n\ntype DataTableFactory<T extends object, TOperation extends keyof operations> = {\n path: NoInfer<ClientPathsWithMethod<CtxClientType, 'get'>>;\n pathParameters?: NoInfer<ApiPathParameters<TOperation>>;\n columns: ColumnDef<T, any>[];\n tableActions: TableAction<T>[];\n columnsToHideByDefault?: Partial<Record<keyof T, boolean>>; // Columns that are hidden by default\n allowSelection?: boolean;\n filterConfig: FiltersConfig<TOperation>;\n initialFilters: TableFilter[];\n};\n\ntype DataTableState = {\n sorting: SortingState;\n pagination: PaginationState;\n};\n\nexport function getColumnHelper<O extends keyof operations>(): ColumnHelper<ApiResponseBody<O>> {\n return createColumnHelper<ApiResponseBody<O>>();\n}\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<T extends object, TOperation extends keyof operations>({\n path,\n pathParameters,\n columns,\n filterConfig,\n columnsToHideByDefault = {},\n allowSelection = false,\n initialFilters = [],\n tableActions,\n}: DataTableFactory<T, TOperation>) {\n const [tableState, _setTableState] = useState<DataTableState>({\n /** Reflect in URL in host application */\n pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n sorting: [], // Sorting state\n });\n\n const { sorting, pagination } = tableState;\n\n const [searchQuery, setSearchQuery] = useState('');\n\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n /** Reflect in URL in host application */\n const [filters, setFilters] = useState(initialFilters);\n const mergedFilters = useMemo(() => {\n // TODO, generic transform fn\n return filters\n .map(tf => {\n if (Array.isArray(tf.value)) {\n return {\n [tf.property]: {\n [tf.operator]: tf.value.join(','),\n },\n };\n }\n return {\n [tf.property]: {\n [tf.operator]: tf.value,\n },\n };\n })\n .reduce((acc, current) => {\n return merge(acc, current);\n }, {});\n }, [filters]);\n\n const queryParameters = {\n ...filters,\n page: pagination.pageIndex + 1,\n limit: pagination.pageSize,\n sort: generateSortParam(sorting[0]),\n search: searchQuery,\n };\n\n const client = useCtxClient();\n // TODO, this seems incorrect, verify\n const queryKey = ['get', path, queryParameters];\n\n const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n `${queryKey.join('')}_ctx_column_order_preference`,\n []\n );\n const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(\n `${queryKey.join('')}_ctx_column_visibility_preference`,\n {\n id: false,\n ...columnsToHideByDefault,\n }\n );\n\n // Update table state with new values\n const updateTableState = (updates: Partial<DataTableState>) => {\n _setTableState(prev => ({ ...prev, ...updates }));\n };\n\n const query = useQuery({\n queryKey,\n queryFn: async () => {\n // Hoping the above type catches the correct path parameter.\n const res = await client.GET(path, {\n params: {\n query: {\n page: queryParameters.page,\n limit: queryParameters.limit,\n sort: queryParameters.sort,\n search: queryParameters.search,\n ...mergedFilters,\n },\n path: pathParameters as any,\n },\n });\n return {\n data: (res.data ?? []) as T[],\n total: Number.parseInt(res.response.headers.get('Pagination-Count') || '0'),\n };\n },\n });\n\n const rowActions = tableActions.filter(isSingleResourceAction);\n /**\n * ID,createdAt and updatedAt will be added by default for all tables\n * If selection is allowed, checkbox will be added\n * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n * If there are actions for the table, they will be placed fixed at the right side of table.\n */\n const cols: ColumnDef<any, any>[] = [\n ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n ...columns,\n ...getActionsColumn<T>(rowActions ?? []),\n ];\n\n // Type-guard for updater\n function isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n return typeof updater === 'function';\n }\n // Utility function to resolve updater\n function resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n if (isUpdaterFunction(updater)) {\n return updater(currentValue);\n }\n return updater;\n }\n\n // Use react-table's hook to create the table instance\n const tanTable = useReactTable({\n data: query.data?.data ?? [],\n columns: cols,\n getCoreRowModel: getCoreRowModel(),\n rowCount: query.data?.total ?? 0,\n manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n onPaginationChange: updater => {\n updateTableState({ pagination: resolveUpdater(updater, pagination) });\n },\n manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n onSortingChange: updater => {\n setRowSelection({});\n updateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n },\n manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n onColumnVisibilityChange: updater => {\n setColumnVisibility(resolveUpdater(updater, columnVisibility));\n },\n onRowSelectionChange: updater => {\n setRowSelection(resolveUpdater(updater, rowSelection));\n },\n onColumnOrderChange: updater => {\n setColumnOrder(resolveUpdater(updater, columnOrder));\n },\n state: {\n sorting: sorting,\n columnVisibility: columnVisibility,\n pagination: pagination,\n rowSelection: rowSelection,\n columnOrder: columnOrder,\n },\n meta: {\n refetch: query.refetch,\n },\n });\n\n // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n // This populates the columnIds in the columnOrder state\n useEffect(() => {\n const columns = tanTable.getAllLeafColumns();\n //Make sure actions column is always at the end\n setColumnOrder([\n ...columns.filter(c => c.id !== ACTIONS_COLUMN_ID).map(c => c.id),\n ...columns.filter(c => c.id === ACTIONS_COLUMN_ID).map(c => c.id),\n ]);\n }, []);\n\n return {\n tableState,\n updateTableState,\n query,\n setSearchQuery,\n searchQuery,\n tanTable,\n mergedFilters,\n filters,\n setFilters,\n filterConfig,\n tableActions,\n pathParameters,\n } as const;\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n// TODO, don't export this\nexport function useDataTable() {\n const ctx = useContext(DataTableContext);\n if (!ctx) {\n throw Error('DataTable should be used within DataTableProvider.');\n }\n return ctx;\n}\n\nexport function DataTableProvider<T extends object, TOperation extends keyof operations>({\n children,\n ...props\n}: { children: React.ReactNode } & ReturnType<typeof useDataTableState<T, TOperation>>) {\n // @ts-expect-error, propogating the generic type further will be more complex. Since this is a tightly coupled type, it should be okay but reviewed whenever useDataTableState changes.\n return <DataTableContext.Provider value={props}>{children}</DataTableContext.Provider>;\n}\n\nexport type DataTableProps = React.ComponentProps<'section'>;\nexport function DataTable({ className, ...props }: DataTableProps) {\n const { query, tanTable } = useDataTable();\n\n return (\n <>\n <ControlledDialogProvider>\n {/* Table Actions Section */}\n <Actions />\n <section\n {...props}\n className={classNames('z-20 flex flex-col bg-elevation-1 border rounded-md', className)}\n >\n {/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n <div className=\"w-full overflow-auto h-table relative rounded-md\" tabIndex={0}>\n {/* Table overlay with loader */}\n {query.isLoading && (\n <TableOverlay className=\"cursor-wait\">\n <Loader />\n </TableOverlay>\n )}\n {/* Table overlay for empty table */}\n {!query.isLoading && tanTable.getRowModel().rows.length === 0 && (\n // Empty table\n <TableOverlay className=\"cursor-not-allowed\">\n {!query.isFetching &&\n (query.isError ? (\n <span className=\"flex gap-3 justify-center items-center\">\n {/* TODO (mudasir-pandith) Check for 403 explicitly!! */}\n {/* <span>{query.error}</span> */}\n <IcInfo />\n <span>{query.error.message}</span>\n </span>\n ) : query.data?.data?.length === 0 ? (\n <>No results found.</>\n ) : (\n <>Unknown error. Please contact customer support.</>\n ))}\n </TableOverlay>\n )}\n {!query.isLoading && tanTable.getRowModel().rows.length !== 0 && (\n <TableContent className=\"w-full\" />\n )}\n </div>\n\n {/* Table Footer Section with Pagination and Column Picker */}\n <div className=\"flex w-full justify-between border-t gap-icon p-icon overflow-x-auto\">\n <div className=\"flex gap-icon\">\n <ColumnPicker />\n <PageSize />\n </div>\n <Paginator />\n </div>\n </section>\n </ControlledDialogProvider>\n </>\n );\n}\n/** Table overlay to be shown for loaders or other messages */\nfunction TableOverlay({ children, className }: { children: React.ReactNode; className?: string }) {\n return (\n <>\n <span\n className={classNames(\n className,\n 'absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center'\n )}\n >\n {children}\n </span>\n {/* Keep something in document flow with the correct height */}\n <span className=\"relative h-full w-0 block\" />\n </>\n );\n}\n\n// TODO, ?include query param on Licenses, Activations and other future resources that need this\nfunction ColumnPicker() {\n const { tanTable } = useDataTable();\n const [activeId, setActiveId] = useState<string | null>(null);\n\n const resourceFormatter = useResourceFormatter();\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n })\n );\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragStart={event => {\n const { active } = event;\n setActiveId(active.id.toString());\n }}\n onDragEnd={event => {\n const { active, over } = event;\n\n if (over && active.id !== over.id) {\n const columnOrder = tanTable.getState().columnOrder;\n const oldIndex = columnOrder.indexOf(active.id.toString());\n const newIndex = columnOrder.indexOf(over.id.toString());\n tanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);\n }\n\n setActiveId(null);\n }}\n >\n <SortableContext items={tanTable.getState().columnOrder} strategy={verticalListSortingStrategy}>\n <EasyMenu\n label={\n <>\n <IcColumns className=\"inline align-bottom me-1\" />\n Columns\n </>\n }\n selectionMode=\"multiple\"\n items={tanTable.getAllFlatColumns()}\n // Using selectedKeys = 'all' does not mark MenuItems with isDisabled=true as selected. This is not the intended behaviour in this use-case.\n selectedKeys={tanTable.getVisibleFlatColumns().map(c => c.id)}\n >\n <MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>\n (select all)\n </MenuItem>\n {tanTable.getState().columnOrder.map(colId => {\n const col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n // Don't show checkbox and actions columns in picker\n if (!col || col.id === 'checkbox' || col.id === ACTIONS_COLUMN_ID) return null;\n return <SortableItem key={col.id} column={col} />;\n })}\n </EasyMenu>\n <DragOverlay>\n {activeId ? (\n <div className=\"opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div>\n ) : null}\n </DragOverlay>\n </SortableContext>\n </DndContext>\n );\n\n function SortableItem({ column }: { column: Column<any, unknown> }) {\n const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n zIndex: '999',\n };\n return (\n <MenuItem\n ref={setNodeRef}\n style={style}\n {...attributes}\n id={column.id}\n onAction={() => column.toggleVisibility()}\n isDisabled={!column.getCanHide()}\n className=\"flex items-center\"\n >\n <IcGrip {...listeners} className=\"size-icon cursor-grab\" />\n {getColumnHeaderText(column)}\n {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n </MenuItem>\n );\n }\n}\n\nfunction Paginator() {\n const { tanTable } = useDataTable();\n const rowCount = tanTable.getRowCount();\n return (\n <div className=\"flex items-center gap-2\">\n <span className=\"whitespace-nowrap body-sm text-muted\">\n {`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n (tanTable.getState().pagination.pageIndex + 1) * tanTable.getState().pagination.pageSize,\n rowCount\n )} of ${rowCount?.toLocaleString()}`}\n </span>\n\n <Button\n aria-label=\"First page\"\n onPress={() => tanTable.firstPage()}\n isDisabled={!tanTable.getCanPreviousPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcFirst />\n </Button>\n <Button\n aria-label=\"Previous page\"\n onPress={() => tanTable.previousPage()}\n isDisabled={!tanTable.getCanPreviousPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcLeft />\n </Button>\n <Button\n aria-label=\"Next page\"\n onPress={() => tanTable.nextPage()}\n isDisabled={!tanTable.getCanNextPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcRight />\n </Button>\n <Button\n aria-label=\"Last page\"\n onClick={() => tanTable.lastPage()}\n isDisabled={!tanTable.getCanNextPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcLast />\n </Button>\n </div>\n );\n}\n\nfunction PageSize() {\n const { tanTable } = useDataTable();\n const PAGE_SIZES = [10, 20, 30, 40, 50];\n\n return (\n <EasyMenu\n label={tanTable.getState().pagination.pageSize.toString()}\n selectionMode=\"single\"\n selectedKeys={[tanTable.getState().pagination.pageSize.toString()]}\n items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}\n >\n {items => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>}\n </EasyMenu>\n );\n}\n\nfunction Actions() {\n const { query, tanTable, searchQuery, setSearchQuery, tableActions } = useDataTable();\n const hasSelectedRows = tanTable.getSelectedRowModel().rows.length > 0;\n\n const filteredActions = tableActions\n .filter(ta => ta.resourceType !== 'single')\n .filter(ta => (ta.resourceType === 'multiple') === hasSelectedRows);\n\n return (\n <section className=\"flex justify-between my-0 mb-icon gap-icon overflow-auto\">\n <div className=\"flex gap-icon\">\n <Button\n aria-label=\"Refresh\"\n isPending={query.isFetching}\n onClick={() => query.refetch()}\n variant={'neutral'}\n size={'icon'}\n >\n <IcRefresh />\n </Button>\n {<SearchField value={searchQuery} onChange={setSearchQuery} />}\n <DataTableFilter />\n </div>\n <div className=\"flex gap-icon\">\n <TableActions items={filteredActions} isFetching={query.isFetching} />\n </div>\n </section>\n );\n}\n\nfunction SortIcon({\n direction,\n ...props\n}: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n if (direction === 'asc') return <IcSortAsc className=\"size-3.5\" {...props} />;\n else if (direction === 'desc') return <IcSortDesc className=\"size-3.5\" {...props} />;\n else return <IcSortNone className=\"size-3.5\" {...props} />;\n}\n\nfunction getColumnHeaderText(column: Column<any, unknown>): string {\n const resourceFormatter = useResourceFormatter();\n const headerDef = column.columnDef.header;\n return typeof headerDef === 'string' ? headerDef : resourceFormatter(column.id);\n}\n\n/**\n * Renders a cell value based on the displayType metadata\n * @param cell - The cell to render\n * @returns The formatted value as a React node\n */\nfunction renderCellByDisplayType(cell: Cell<any, any>): React.ReactNode {\n const displayType = cell.column.columnDef.meta?.displayType;\n const value = cell.getValue();\n\n if (value === null || value === undefined) {\n return null;\n }\n\n switch (displayType) {\n case 'date':\n return <span className=\"tabular-nums\">{formatDate(value)}</span>;\n case 'number':\n return <span className=\"block text-right tabular-nums\">{formatNumber(value)}</span>;\n case 'boolean':\n return (\n <Badge variant={Boolean(value) ? 'success' : 'destructive'} className=\"w-full capitalize\">\n {String(value)}\n </Badge>\n );\n case 'badge':\n return <Badge className=\"w-full\">{String(value)}</Badge>;\n case 'country':\n return <CountryName value={value} />;\n case 'enum':\n return <span className=\"uppercase w-full\">{String(value)}</span>;\n case 'fileSize':\n return formatFilesize(value);\n case 'days':\n return formatDays(value);\n case 'os':\n return ALL_OS[value as keyof typeof ALL_OS] ?? value;\n case 'licenseType':\n return ALL_LICENSE_TYPES[value as string] ?? value;\n case 'subscriptionInterval':\n return Duration.formatISODuration(value);\n case 'subscriptionStartTrigger':\n return getSubscriptionStartTriggerLabel(value);\n default:\n return String(value);\n }\n}\n\nfunction HeaderText({ header }: { header: Header<any, unknown> }) {\n const headerDef = header.column.columnDef.header;\n\n if (typeof headerDef === 'string' || !headerDef) {\n return getColumnHeaderText(header.column);\n }\n\n if (typeof headerDef === 'function') {\n const result = headerDef(header.getContext());\n if (typeof result === 'string') {\n return getColumnHeaderText(header.column);\n }\n return flexRender(headerDef, header.getContext());\n }\n\n return flexRender(headerDef, header.getContext());\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n const { tanTable } = useDataTable();\n const tableCellStyle = (isSticky: boolean, className?: string, zIndex: string = 'z-50') =>\n classNames(\n 'px-icon py-2 text-left body-sm font-medium whitespace-nowrap',\n isSticky && `bg-elevation-1 sticky right-0 ${zIndex} text-center justify-center`,\n className\n );\n return (\n <TableComponent className={classNames('table-auto border-0 rounded-md', className)}>\n <TableHeader className=\"sticky top-0 z-10 rounded-md\">\n {tanTable.getHeaderGroups().map(headerGroup => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map(header => (\n <TableHead\n scope=\"col\"\n key={header.id}\n colSpan={header.colSpan}\n className={tableCellStyle(header.id === ACTIONS_COLUMN_ID, 'bg-elevation-1')}\n >\n {!header.column.getCanSort() && !header.isPlaceholder && (\n <div\n className={classNames(\n 'w-full py-1 inline-flex items-center gap-1 body-sm',\n header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n )}\n >\n <HeaderText header={header} />\n </div>\n )}\n {header.column.getCanSort() && (\n <Button\n variant=\"ghost\"\n className={classNames(\n 'w-full p-1',\n header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n )}\n onPress={header.column.getToggleSortingHandler()}\n >\n <span>\n <HeaderText header={header} />\n </span>\n <SortIcon direction={header.column.getIsSorted()} />\n </Button>\n )}\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {tanTable.getRowModel().rows.map(row => (\n <TableRow\n className={classNames(\n 'transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20'\n )}\n key={row.id}\n data-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map(cell => {\n const isActionsColumn = cell.column.id === ACTIONS_COLUMN_ID;\n const cellContent = cell.column.columnDef.meta?.displayType\n ? renderCellByDisplayType(cell)\n : flexRender(cell.column.columnDef.cell, cell.getContext());\n\n return (\n <TableCell\n key={cell.id}\n className={classNames(\n tableCellStyle(isActionsColumn, undefined, 'z-1'),\n isActionsColumn && 'flex justify-center items-center'\n )}\n >\n {cellContent}\n </TableCell>\n );\n })}\n </TableRow>\n ))}\n </TableBody>\n </TableComponent>\n );\n}\n\n/** Base properties shared by all table actions */\ntype ActionBase = {\n label: string;\n icon: CtxIcon;\n tooltip?: string;\n /** Optional button variant to pass through to Button (defaults to neutral) */\n variant?: React.ComponentProps<typeof Button>['variant'];\n};\n\n/** Context provided to onPress functions in TableActions */\ntype ActionPressContext = {\n event?: PressEvent;\n openDialog: (c: React.ReactNode) => void;\n closeDialog: () => void;\n};\n\nexport type NoResourceAction = ActionBase & {\n resourceType: 'none';\n isDisabled?: () => boolean;\n onPress: (c: ActionPressContext) => void;\n};\n\nexport type SingleResourceAction<T> = Omit<ActionBase, 'label'> & {\n resourceType: 'single';\n /** Label function that receives row data for dynamic labels */\n label: string | ((data: T) => React.ReactNode);\n isDisabled?: (data: T) => boolean;\n onPress: (c: ActionPressContext & { data: T }) => void;\n};\n\nexport type BulkResourceAction<T> = ActionBase & {\n resourceType: 'multiple';\n isDisabled?: (data: T[]) => boolean;\n onPress: (c: ActionPressContext & { data: T[] }) => void;\n};\n\n/** Common table action type that works for both action and dialog types */\nexport type TableAction<T> = NoResourceAction | SingleResourceAction<T> | BulkResourceAction<T>;\n\nfunction isNoResourceAction<T>(item: TableAction<T>): item is NoResourceAction {\n return item.resourceType === 'none';\n}\n\nfunction isSingleResourceAction<T>(item: TableAction<T>): item is SingleResourceAction<T> {\n return item.resourceType === 'single';\n}\n\nfunction isBulkResourceAction<T>(item: TableAction<T>): item is BulkResourceAction<T> {\n return item.resourceType === 'multiple';\n}\n\nexport type TableActionsProps<T> = {\n /** Array of table actions to render */\n readonly items: (NoResourceAction | BulkResourceAction<T>)[];\n /** Whether the table is currently fetching data */\n readonly isFetching?: boolean;\n};\n\nfunction TableActions<T>({ items, isFetching }: TableActionsProps<T>) {\n const { openDialog, closeDialog } = useControlledDialog();\n const { tanTable } = useDataTable();\n\n function getTableActionIsDisabled<T>(item: TableAction<T>, rows: T[]): boolean {\n if (!item.isDisabled) return false;\n\n if (isNoResourceAction(item)) {\n return item.isDisabled();\n } else if (isBulkResourceAction(item)) {\n return item.isDisabled(rows);\n }\n return false;\n }\n\n const selectedRows = tanTable.getSelectedRowModel().rows.map(r => r.original);\n return (\n <>\n {items.map((item, i) => {\n const Icon = item.icon;\n const isDisabled = getTableActionIsDisabled(item, selectedRows) || isFetching;\n\n return (\n <Button\n key={`${item.label}-${i}`}\n aria-label={item.label}\n type=\"button\"\n isDisabled={isDisabled}\n className=\"animate-in fade-in slide-in-from-right-15 duration-300 transition-transform\"\n onPress={e => {\n const context = { event: e, openDialog, closeDialog };\n // TableActions only has Bulk actions and NoResource actions\n if (isNoResourceAction(item)) {\n item.onPress(context);\n } else if (isBulkResourceAction(item)) {\n item.onPress({ ...context, data: selectedRows });\n }\n }}\n variant={item.variant ?? 'neutral'}\n >\n {Icon && <Icon aria-hidden />}\n <span>{item.label}</span>\n </Button>\n );\n })}\n </>\n );\n}\n\nfunction TableActionsRowMenu<T>({\n label,\n items,\n data,\n}: {\n readonly label: React.ReactNode;\n readonly items: SingleResourceAction<T>[];\n readonly data: T;\n}) {\n const { openDialog, closeDialog } = useControlledDialog();\n\n return (\n <EasyMenu aria-label=\"Actions\" label={label} size={'icon'}>\n {items.map((it, i) => {\n const Icon = it.icon;\n const label = typeof it.label === 'function' ? it.label(data) : it.label;\n return (\n <MenuItem\n key={`${i}-${typeof label === 'string' ? label : ''}`}\n id={typeof label === 'string' ? label : undefined}\n isDisabled={it.isDisabled?.(data) ?? false}\n onAction={() => {\n const context = { openDialog, closeDialog };\n if (isSingleResourceAction(it)) {\n it.onPress({ ...context, data });\n }\n }}\n >\n <Icon className=\"size-icon\" />\n {label}\n </MenuItem>\n );\n })}\n </EasyMenu>\n );\n}\n","'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date';\nimport { useEffect, useRef, useState } from 'react';\nimport { Button } from '../components/button';\nimport { useDataTable } from '../components/data-table';\nimport { DatePicker } from '../components/date-picker';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport { MultiSelect, type MultiSelectProps } from '../components/multi-select';\nimport { NumberField } from '../components/numberfield';\nimport { Popover, PopoverTrigger } from '../components/popover';\nimport { TextField } from '../components/textfield';\nimport { formatDate } from '../utilities/date';\nimport { useResourceFormatter, type ApiFilters } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { IcAccount, IcCheck, IcDate, IcFile, IcFilter, IcLicense, IcMinus, IcRemove, type CtxIcon } from './icons';\nimport { MultipleIdSearchInput } from './id-search';\n\nexport const FILTER_COMPARISON_OPERATORS = [\n 'eq',\n 'ne',\n 'cn',\n 'nc',\n 'sw',\n 'ew',\n 'in',\n 'nin',\n 'gt',\n 'gte',\n 'lt',\n 'lte',\n] as const;\nexport type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<FilterComparisonOperator, string> = {\n eq: 'equal to',\n ne: 'not equal to',\n cn: 'contains',\n nc: 'does not contain',\n sw: 'starts with',\n ew: 'ends with',\n in: 'includes',\n nin: 'does not include',\n gt: 'greater than',\n gte: 'greater than or equal to',\n lt: 'less than',\n lte: 'less than or equal to',\n};\n\nconst COMPARISON_OPERATOR_SHORT_LABELS: Record<FilterComparisonOperator, string> = {\n eq: '=',\n ne: '≠',\n cn: 'contains',\n nc: '!contains',\n sw: 'starts with',\n ew: 'ends with',\n in: 'in',\n nin: 'not in',\n gt: '>',\n gte: '≥',\n lt: '<',\n lte: '≤',\n};\n\ntype BaseLocalFilter<T extends FilterType, V> = {\n id: string;\n type: T;\n property: string;\n operator: FilterComparisonOperator;\n value: V | undefined;\n displayValue?: string;\n};\ntype EnumLocalFilter = BaseLocalFilter<'enum', Set<string | number>>;\ntype IdLocalFilter = BaseLocalFilter<'id', string>;\ntype BoolLocalFilter = BaseLocalFilter<'bool', boolean>;\ntype StringLocalFilter = BaseLocalFilter<'string', string>;\ntype NumberLocalFilter = BaseLocalFilter<'number', number>;\n// DatePicker accepts a string, and converts it to a ZonedDateTime\ntype DateLocalFilter = BaseLocalFilter<'date', string>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', string[]>;\n// TODO, entitlementSets.productIds\nfunction createNewFilter(type: FilterType, property: string): TableFilter {\n const id = `${property}-${Date.now()}`;\n const operator = FilterOperations[type][0];\n\n switch (type) {\n case 'bool':\n return { id, type, property, operator, value: true };\n case 'string':\n return { id, type, property, operator, value: '' };\n case 'date':\n return { id, type, property, operator, value: new Date().toISOString() };\n case 'id':\n return { id, type, property, operator, value: '' };\n case 'id-search':\n return { id, type, property, operator, value: [] };\n case 'enum':\n return { id, type, property, operator, value: new Set<string | number>() };\n case 'number':\n return { id, type, property, operator, value: 0 };\n }\n}\n\nexport type TableFilter =\n | EnumLocalFilter\n | IdLocalFilter\n | BoolLocalFilter\n | StringLocalFilter\n | DateLocalFilter\n | IdSearchLocalFilter\n | NumberLocalFilter;\n\nexport type FilterConfig =\n | { type: 'enum'; options: MultiSelectProps['items'] }\n | ({ type: 'id-search' } & Pick<\n React.ComponentProps<typeof MultipleIdSearchInput>,\n 'accessor' | 'path' | 'defaultParams'\n >)\n | { type: 'id' }\n | { type: 'bool' }\n | { type: 'string' }\n | { type: 'date' }\n | { type: 'number' };\n\nexport type FilterType = FilterConfig['type'];\n\nconst FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {\n bool: ['eq'],\n enum: ['in', 'nin'],\n id: ['in', 'nin'],\n 'id-search': ['in', 'nin'],\n string: ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],\n date: ['lt', 'gt'],\n number: ['eq', 'ne', 'gt', 'gte', 'lt', 'lte'],\n};\n\n// TS workaround to get rid of filterConfig: Required<Record<never, FilterConfig>>\nexport type FiltersConfig<TOperation extends keyof operations> = [keyof ApiFilters<TOperation>] extends [never]\n ? Record<string, FilterConfig>\n : Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>;\n\ntype FilterUpdate = { operator?: FilterComparisonOperator; value?: TableFilter['value'] };\n\nfunction getFilterValueSummary(filter: TableFilter): string {\n switch (filter.type) {\n case 'string':\n case 'id':\n return filter.value ?? '';\n case 'number':\n return filter.value?.toString() ?? '';\n case 'bool':\n return filter.value ? 'true' : 'false';\n case 'date':\n return filter.value ? (formatDate(filter.value, { dateStyle: 'short' }) ?? '') : '';\n case 'enum':\n return filter.value && filter.value.size > 0 ? `${filter.value.size} selected` : '';\n case 'id-search':\n return filter.value && filter.value.length > 0\n ? filter.value.length === 1\n ? '1 item'\n : `${filter.value.length} items`\n : '';\n }\n}\n\nfunction FilterValueInput({\n filter,\n filterConfig,\n pathParameters,\n onChange,\n}: {\n filter: TableFilter;\n filterConfig: Record<string, FilterConfig>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n pathParameters?: Record<string, any>;\n onChange: (value: TableFilter['value']) => void;\n}) {\n if (filter.type === 'string' || filter.type === 'id') {\n return (\n <TextField\n autoFocus\n value={filter.value ?? ''}\n onChange={onChange as (v: string) => void}\n aria-label=\"Filter value\"\n />\n );\n }\n\n if (filter.type === 'number') {\n return (\n <NumberField\n autoFocus\n value={filter.value}\n onChange={onChange as (v: number) => void}\n aria-label=\"Filter value\"\n />\n );\n }\n\n if (filter.type === 'bool') {\n return (\n <EasyMenu autoFocus label={filter.value ? 'True' : 'False'} variant=\"neutral\" aria-label=\"Filter value\">\n <MenuItem onAction={() => onChange(true)}>True</MenuItem>\n <MenuItem onAction={() => onChange(false)}>False</MenuItem>\n </EasyMenu>\n );\n }\n\n if (filter.type === 'date') {\n const value = filter.value ? parseAbsolute(filter.value, getLocalTimeZone()) : null;\n return (\n <DatePicker<ZonedDateTime>\n autoFocus\n hideTimeZone\n value={value}\n onChange={v => onChange(v ? v.toAbsoluteString() : new Date().toISOString())}\n aria-label=\"Filter date\"\n />\n );\n }\n\n if (filter.type === 'enum') {\n const config = filterConfig[filter.property];\n if (config.type !== 'enum') return null;\n return (\n <MultiSelect\n autoFocus\n items={config.options}\n value={filter.value ?? new Set<string | number>()}\n onChange={onChange as (v: Set<string | number>) => void}\n aria-label=\"Filter value\"\n />\n );\n }\n\n if (filter.type === 'id-search') {\n const config = filterConfig[filter.property];\n if (config.type !== 'id-search') return null;\n const defaultParams = pathParameters ? { path: pathParameters, query: {} } : undefined;\n return (\n <MultipleIdSearchInput\n autoFocus\n path={config.path}\n accessor={config.accessor}\n defaultParams={defaultParams}\n value={filter.value ?? []}\n onChange={onChange as (v: string[]) => void}\n aria-label=\"Filter value\"\n />\n );\n }\n\n return null;\n}\n\nfunction FilterChip({\n filter,\n filterConfig,\n pathParameters,\n resourceFormatter,\n onRemove,\n onUpdate,\n isOpen,\n onOpenChange,\n}: {\n filter: TableFilter;\n filterConfig: Record<string, FilterConfig>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n pathParameters?: Record<string, any>;\n resourceFormatter: (key: string) => string;\n onRemove: () => void;\n onUpdate: (updates: FilterUpdate) => void;\n isOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n}) {\n const operators = FilterOperations[filter.type];\n const valueSummary = getFilterValueSummary(filter);\n\n return (\n <PopoverTrigger isOpen={isOpen} onOpenChange={onOpenChange}>\n <Button type=\"button\" variant=\"primary_neutral\" className={'animate-in slide-in-from-left-10 fade-in'}>\n <span className=\"font-medium\">{resourceFormatter(filter.property)}</span>\n <span>{COMPARISON_OPERATOR_SHORT_LABELS[filter.operator]}</span>\n {valueSummary && <span>{valueSummary}</span>}\n </Button>\n <Popover className=\"p-icon min-w-48\">\n <div className=\"flex flex-col gap-icon\">\n {operators.length > 1 && (\n <EasyMenu\n label={COMPARISON_OPERATOR_LABELS[filter.operator]}\n variant=\"neutral\"\n aria-label=\"Change operator\"\n >\n {operators.map(op => (\n <MenuItem key={op} onAction={() => onUpdate({ operator: op })}>\n {COMPARISON_OPERATOR_LABELS[op]}\n </MenuItem>\n ))}\n </EasyMenu>\n )}\n <FilterValueInput\n filter={filter}\n filterConfig={filterConfig}\n pathParameters={pathParameters}\n onChange={value => onUpdate({ value })}\n />\n <Button\n type=\"button\"\n variant=\"destructive\"\n onPress={onRemove}\n aria-label={`Remove ${resourceFormatter(filter.property)} filter`}\n >\n <IcRemove />\n </Button>\n </div>\n </Popover>\n </PopoverTrigger>\n );\n}\n\nexport function DataTableFilter({\n className,\n defaultFilters,\n ...props\n}: React.ComponentProps<'section'> & {\n /** Filters applied on initial mount when no existing filters are active. */\n defaultFilters?: TableFilter[];\n}) {\n const { filters, query, setFilters, filterConfig, pathParameters } = useDataTable();\n const resourceFormatter = useResourceFormatter();\n const filterKeys = Object.keys(filterConfig).sort();\n const [openFilterId, setOpenFilterId] = useState<string | null>(null);\n\n const initialized = useRef(false);\n useEffect(() => {\n if (!initialized.current && defaultFilters && defaultFilters.length > 0 && filters.length === 0) {\n setFilters(defaultFilters);\n }\n initialized.current = true;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const addFilter = (type: FilterType, property: string) => {\n const newFilter = createNewFilter(type, property);\n setFilters([...filters, newFilter]);\n setOpenFilterId(newFilter.id);\n };\n\n const removeFilter = (id: string) => {\n setFilters(filters.filter(f => f.id !== id));\n };\n\n const updateFilter = (id: string, updates: FilterUpdate) => {\n setFilters(filters.map(f => (f.id === id ? ({ ...f, ...updates } as TableFilter) : f)));\n };\n\n return (\n <section {...props} className={classNames('flex flex-wrap gap-icon items-center', className)}>\n {filters.map(filter => (\n <FilterChip\n key={filter.id}\n filter={filter}\n filterConfig={filterConfig}\n pathParameters={pathParameters}\n resourceFormatter={resourceFormatter}\n onRemove={() => removeFilter(filter.id)}\n onUpdate={updates => updateFilter(filter.id, updates)}\n isOpen={openFilterId === filter.id}\n onOpenChange={open => setOpenFilterId(open ? filter.id : null)}\n />\n ))}\n\n <EasyMenu\n label={<IcFilter />}\n isDisabled={query.isPending || filterKeys.length === 0}\n variant=\"neutral\"\n aria-label=\"Add filter\"\n >\n {filterKeys.map(k => {\n const type = filterConfig[k].type;\n const Icon = FilterIcon[type];\n return (\n <MenuItem className={'!justify-between'} key={k} onAction={() => addFilter(type, k)}>\n {resourceFormatter(k)}\n <Icon />\n </MenuItem>\n );\n })}\n </EasyMenu>\n </section>\n );\n}\n\nconst FilterIcon: Record<FilterConfig['type'], CtxIcon> = {\n 'id-search': IcFile,\n bool: IcCheck,\n date: IcDate,\n enum: IcLicense,\n id: IcAccount,\n number: IcMinus,\n string: IcCheck,\n};\n"],"names":["generateSortParam","sort","cH","createColumnHelper","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","ACTIONS_COLUMN_ID","getActionsColumn","rowActions","TableActionsRowMenu","IcMoreVertical","getColumnHelper","useDataTableState","path","pathParameters","columns","filterConfig","columnsToHideByDefault","allowSelection","initialFilters","tableActions","tableState","_setTableState","useState","sorting","pagination","searchQuery","setSearchQuery","rowSelection","setRowSelection","filters","setFilters","mergedFilters","useMemo","tf","acc","current","merge","queryParameters","client","useCtxClient","queryKey","columnOrder","setColumnOrder","useLocalStorage","columnVisibility","setColumnVisibility","updateTableState","updates","prev","query","useQuery","res","isSingleResourceAction","cols","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","useEffect","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","className","Fragment","ControlledDialogProvider","Actions","jsxs","classNames","TableOverlay","Loader","IcInfo","TableContent","ColumnPicker","PageSize","Paginator","activeId","setActiveId","resourceFormatter","useResourceFormatter","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","arrayMove","SortableContext","verticalListSortingStrategy","EasyMenu","IcColumns","MenuItem","colId","col","SortableItem","DragOverlay","column","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","IcGrip","getColumnHeaderText","SortIcon","rowCount","Button","IcFirst","IcLeft","IcRight","IcLast","PAGE_SIZES","s","items","hasSelectedRows","filteredActions","ta","IcRefresh","SearchField","DataTableFilter","TableActions","direction","IcSortAsc","IcSortDesc","IcSortNone","headerDef","renderCellByDisplayType","cell","displayType","value","formatDate","formatNumber","Badge","CountryName","formatFilesize","formatDays","ALL_OS","ALL_LICENSE_TYPES","Duration","getSubscriptionStartTriggerLabel","HeaderText","header","flexRender","tableCellStyle","isSticky","zIndex","TableComponent","TableHeader","headerGroup","TableRow","TableHead","TableBody","isActionsColumn","cellContent","TableCell","isNoResourceAction","item","isBulkResourceAction","isFetching","openDialog","closeDialog","useControlledDialog","getTableActionIsDisabled","rows","selectedRows","r","i","Icon","isDisabled","e","context","label","data","it","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","COMPARISON_OPERATOR_SHORT_LABELS","createNewFilter","type","property","id","operator","FilterOperations","getFilterValueSummary","filter","FilterValueInput","onChange","TextField","NumberField","parseAbsolute","getLocalTimeZone","DatePicker","v","config","MultiSelect","defaultParams","MultipleIdSearchInput","FilterChip","onRemove","onUpdate","isOpen","onOpenChange","operators","valueSummary","PopoverTrigger","Popover","op","IcRemove","defaultFilters","filterKeys","openFilterId","setOpenFilterId","initialized","useRef","addFilter","newFilter","removeFilter","updateFilter","f","open","IcFilter","k","FilterIcon","IcFile","IcCheck","IcDate","IcLicense","IcAccount","IcMinus"],"mappings":"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"}
|
|
@@ -96,6 +96,7 @@ export declare function SidebarMenuSub({ className, ...props }: React.ComponentP
|
|
|
96
96
|
* Submenu item wrapper
|
|
97
97
|
*/
|
|
98
98
|
export declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
|
|
99
|
+
export declare const sidebarMenuButtonClasses = "btn-tab py-3 h-auto rounded-none w-full selected:shadow-[inset_2px_0_0_0_var(--color-primary)] group-data-[collapsible=icon]:![font-size:0] group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!px-0 group-data-[collapsible=icon]:!gap-0 group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:selected:shadow-none";
|
|
99
100
|
/**
|
|
100
101
|
* Main menu button. Pass isActive for current page.
|
|
101
102
|
*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,Fragment as C,jsxs as h}from"react/jsx-runtime";import{createContext as O,use as I,useState as x,useCallback as S,useEffect as z,useMemo as B}from"react";import{Button as D}from"./button.js";import{DialogTrigger as T,DialogOverlay as j,DialogContent as E}from"./dialog.js";import{TooltipTrigger as G,Tooltip as H}from"./tooltip.js";import{classNames as i}from"../utilities/theme.js";import{useIsMobile as K}from"../utilities/use-mobile.js";import{IcMoreHorizontal as L,IcLeft as R,IcRight as A}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";const F="/",N=O(null);function v(){const a=I(N);if(!a)throw new Error("useSidebar must be used within a SidebarProvider.");return a}function ae({defaultOpen:a=!0,open:e,onOpenChange:n,className:o,style:s,children:l,...d}){const u=K(),[f,b]=x(!1),[M,_]=x(a),p=e??M,m=S(r=>{const c=typeof r=="function"?r(p):r;n?n(c):_(c)},[n,p]),g=S(()=>u?b(r=>!r):m(r=>!r),[u,m,b]);z(()=>{const r=c=>{c.key===F&&(c.metaKey||c.ctrlKey)&&(c.preventDefault(),g())};return window.addEventListener("keydown",r),()=>window.removeEventListener("keydown",r)},[g]);const w=p?"expanded":"collapsed",k=B(()=>({state:w,open:p,setOpen:m,isMobile:u,openMobile:f,setOpenMobile:b,toggleSidebar:g}),[w,p,m,u,f,b,g]);return t(N.Provider,{value:k,children:t("div",{className:i("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1",o),...d,children:l})})}function te({side:a="left",variant:e="sidebar",collapsible:n="icon",className:o,children:s,...l}){const{isMobile:d,state:u,openMobile:f,setOpenMobile:b}=v();return n==="none"?t("div",{className:i("flex h-full w-[--sidebar-width] flex-col bg-elevation-1 text-foreground",o),...l,children:s}):d?t(T,{isOpen:f,onOpenChange:b,...l,children:t(j,{children:t(E,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>t(C,{children:s})})})}):h("div",{className:"group peer hidden text-foreground md:block","data-state":u,"data-collapsible":u==="collapsed"?n:"","data-variant":e,"data-side":a,children:[t("div",{className:i("relative w-(--sidebar-width) bg-elevation-1 transition-[width] duration-200 ease-linear","group-data-[collapsible=offcanvas]:w-0","group-data-[side=right]:rotate-180",e==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]":"group-data-[collapsible=icon]:w-(--sidebar-width-icon)")}),t("div",{className:i("absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",a==="left"?"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]":"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",e==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]":"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",o),...l,children:t("div",{"data-sidebar":"sidebar",className:"flex h-full w-full flex-col bg-elevation-1 group-data-[variant=floating]:border group-data-[variant=floating]:border-border",children:s})})]})}function ie({className:a,onClick:e,...n}){const{toggleSidebar:o,open:s,isMobile:l}=v();return t(D,{"data-sidebar":"trigger",variant:"neutral",size:"icon",className:"!rounded-full",onClick:d=>{e?.(d),o()},...n,children:l?t(L,{}):s?t(R,{}):t(A,{})})}function ne({className:a,...e}){return t("div",{"data-sidebar":"content",className:i("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",a),...e})}function oe({className:a,...e}){return t("div",{"data-sidebar":"group",className:i("relative flex w-full min-w-0 flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-2",a),...e})}function re({className:a,...e}){return t("div",{"data-sidebar":"group-label",className:i("flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0",a),...e})}function le({className:a,...e}){return t("div",{"data-sidebar":"group-content",className:i("w-full body-sm",a),...e})}function se({className:a,...e}){return t("ul",{"data-sidebar":"menu",className:i("flex w-full min-w-0 flex-col",a),...e})}function de({className:a,...e}){return t("li",{"data-sidebar":"menu-item",className:i("group/menu-item relative list-none group-data-[collapsible=icon]:[&>*:not([data-sidebar=menu-button])]:hidden",a),...e})}function ue({className:a,...e}){return t("button",{"data-sidebar":"menu-action",className:i("absolute top-0 right-0 btn btn-ghost h-input","group-data-[collapsible=icon]:hidden",a),...e})}function ce({className:a,number:e,...n}){return t("div",{"data-sidebar":"menu-badge",className:i("absolute pointer-events-none top-0 right-0 font-light h-input select-none flex items-center justify-center body-sm tabular-nums","group-data-[collapsible=icon]:hidden",a),...n,children:new Intl.NumberFormat(navigator.language,{useGrouping:!0}).format(e)})}function be({className:a,...e}){return t("ul",{"data-sidebar":"menu-sub",className:i("ms-2 flex min-w-0 flex-col border-l border-border","group-data-[collapsible=icon]:hidden",a),...e})}function pe({className:a,...e}){return t("li",{className:i("list-none ms-0",a),...e})}const y="btn-tab py-3 h-auto rounded-none w-full selected:shadow-[inset_2px_0_0_0_var(--color-primary)] group-data-[collapsible=icon]:![font-size:0] group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!px-0 group-data-[collapsible=icon]:!gap-0 group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:selected:shadow-none";function fe({isActive:a=!1,tooltip:e,className:n,...o}){const{isMobile:s,state:l}=v(),d=t("button",{"data-sidebar":"menu-button",...a&&{"data-selected":!0},className:i("peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input",y,n),...o});return e?h(G,{children:[d,t(H,{hidden:l!=="collapsed"||s,...e})]}):d}function me({isActive:a,className:e,...n}){return t("button",{"data-sidebar":"menu-sub-button","data-active":a,className:i(y,e),...n})}function ge({className:a,logo:e,children:n,...o}){return h("div",{"data-sidebar":"header",className:i("flex items-center h-header select-none shrink-0 border-b px-2 gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0",a),...o,children:[e&&t("div",{className:"flex items-center justify-center size-input shrink-0",children:e}),n&&t("div",{className:"flex-1 min-w-0 group-data-[collapsible=icon]:hidden",children:n})]})}function he({className:a,...e}){return t("div",{className:i(a,"w-full overflow-auto"),...e})}function ve({className:a,...e}){return t("nav",{className:i("flex items-center h-header bg-elevation-1 sticky top-0 z-50 p-2 border-b",a),...e})}export{te as Sidebar,ne as SidebarContent,N as SidebarContext,oe as SidebarGroup,le as SidebarGroupContent,re as SidebarGroupLabel,ge as SidebarHeader,se as SidebarMenu,ue as SidebarMenuAction,ce as SidebarMenuBadge,fe as SidebarMenuButton,de as SidebarMenuItem,be as SidebarMenuSub,me as SidebarMenuSubButton,pe as SidebarMenuSubItem,he as SidebarOutlet,ve as SidebarOutletHeader,ae as SidebarProvider,ie as SidebarTrigger,v as useSidebar};
|
|
1
|
+
"use client";import{jsx as t,Fragment as C,jsxs as h}from"react/jsx-runtime";import{createContext as O,use as I,useState as x,useCallback as S,useEffect as z,useMemo as B}from"react";import{Button as D}from"./button.js";import{DialogTrigger as T,DialogOverlay as j,DialogContent as E}from"./dialog.js";import{TooltipTrigger as G,Tooltip as H}from"./tooltip.js";import{classNames as i}from"../utilities/theme.js";import{useIsMobile as K}from"../utilities/use-mobile.js";import{IcMoreHorizontal as L,IcLeft as R,IcRight as A}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";const F="/",N=O(null);function v(){const a=I(N);if(!a)throw new Error("useSidebar must be used within a SidebarProvider.");return a}function ae({defaultOpen:a=!0,open:e,onOpenChange:n,className:o,style:s,children:l,...d}){const u=K(),[f,b]=x(!1),[M,_]=x(a),p=e??M,m=S(r=>{const c=typeof r=="function"?r(p):r;n?n(c):_(c)},[n,p]),g=S(()=>u?b(r=>!r):m(r=>!r),[u,m,b]);z(()=>{const r=c=>{c.key===F&&(c.metaKey||c.ctrlKey)&&(c.preventDefault(),g())};return window.addEventListener("keydown",r),()=>window.removeEventListener("keydown",r)},[g]);const w=p?"expanded":"collapsed",k=B(()=>({state:w,open:p,setOpen:m,isMobile:u,openMobile:f,setOpenMobile:b,toggleSidebar:g}),[w,p,m,u,f,b,g]);return t(N.Provider,{value:k,children:t("div",{className:i("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1",o),...d,children:l})})}function te({side:a="left",variant:e="sidebar",collapsible:n="icon",className:o,children:s,...l}){const{isMobile:d,state:u,openMobile:f,setOpenMobile:b}=v();return n==="none"?t("div",{className:i("flex h-full w-[--sidebar-width] flex-col bg-elevation-1 text-foreground",o),...l,children:s}):d?t(T,{isOpen:f,onOpenChange:b,...l,children:t(j,{children:t(E,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>t(C,{children:s})})})}):h("div",{className:"group peer hidden text-foreground md:block","data-state":u,"data-collapsible":u==="collapsed"?n:"","data-variant":e,"data-side":a,children:[t("div",{className:i("relative w-(--sidebar-width) bg-elevation-1 transition-[width] duration-200 ease-linear","group-data-[collapsible=offcanvas]:w-0","group-data-[side=right]:rotate-180",e==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]":"group-data-[collapsible=icon]:w-(--sidebar-width-icon)")}),t("div",{className:i("absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",a==="left"?"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]":"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",e==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]":"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",o),...l,children:t("div",{"data-sidebar":"sidebar",className:"flex h-full w-full flex-col bg-elevation-1 group-data-[variant=floating]:border group-data-[variant=floating]:border-border",children:s})})]})}function ie({className:a,onClick:e,...n}){const{toggleSidebar:o,open:s,isMobile:l}=v();return t(D,{"data-sidebar":"trigger",variant:"neutral",size:"icon",className:"!rounded-full",onClick:d=>{e?.(d),o()},...n,children:l?t(L,{}):s?t(R,{}):t(A,{})})}function ne({className:a,...e}){return t("div",{"data-sidebar":"content",className:i("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",a),...e})}function oe({className:a,...e}){return t("div",{"data-sidebar":"group",className:i("relative flex w-full min-w-0 flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-2",a),...e})}function re({className:a,...e}){return t("div",{"data-sidebar":"group-label",className:i("flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0",a),...e})}function le({className:a,...e}){return t("div",{"data-sidebar":"group-content",className:i("w-full body-sm",a),...e})}function se({className:a,...e}){return t("ul",{"data-sidebar":"menu",className:i("flex w-full min-w-0 flex-col",a),...e})}function de({className:a,...e}){return t("li",{"data-sidebar":"menu-item",className:i("group/menu-item relative list-none group-data-[collapsible=icon]:[&>*:not([data-sidebar=menu-button])]:hidden",a),...e})}function ue({className:a,...e}){return t("button",{"data-sidebar":"menu-action",className:i("absolute top-0 right-0 btn btn-ghost h-input","group-data-[collapsible=icon]:hidden",a),...e})}function ce({className:a,number:e,...n}){return t("div",{"data-sidebar":"menu-badge",className:i("absolute pointer-events-none top-0 right-0 font-light h-input select-none flex items-center justify-center body-sm tabular-nums","group-data-[collapsible=icon]:hidden",a),...n,children:new Intl.NumberFormat(navigator.language,{useGrouping:!0}).format(e)})}function be({className:a,...e}){return t("ul",{"data-sidebar":"menu-sub",className:i("ms-2 flex min-w-0 flex-col border-l border-border","group-data-[collapsible=icon]:hidden",a),...e})}function pe({className:a,...e}){return t("li",{className:i("list-none ms-0",a),...e})}const y="btn-tab py-3 h-auto rounded-none w-full selected:shadow-[inset_2px_0_0_0_var(--color-primary)] group-data-[collapsible=icon]:![font-size:0] group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!px-0 group-data-[collapsible=icon]:!gap-0 group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:selected:shadow-none";function fe({isActive:a=!1,tooltip:e,className:n,...o}){const{isMobile:s,state:l}=v(),d=t("button",{"data-sidebar":"menu-button",...a&&{"data-selected":!0},className:i("peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input",y,n),...o});return e?h(G,{children:[d,t(H,{hidden:l!=="collapsed"||s,...e})]}):d}function me({isActive:a,className:e,...n}){return t("button",{"data-sidebar":"menu-sub-button","data-active":a,className:i(y,e),...n})}function ge({className:a,logo:e,children:n,...o}){return h("div",{"data-sidebar":"header",className:i("flex items-center h-header select-none shrink-0 border-b px-2 gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0",a),...o,children:[e&&t("div",{className:"flex items-center justify-center size-input shrink-0",children:e}),n&&t("div",{className:"flex-1 min-w-0 group-data-[collapsible=icon]:hidden",children:n})]})}function he({className:a,...e}){return t("div",{className:i(a,"w-full overflow-auto"),...e})}function ve({className:a,...e}){return t("nav",{className:i("flex items-center h-header bg-elevation-1 sticky top-0 z-50 p-2 border-b",a),...e})}export{te as Sidebar,ne as SidebarContent,N as SidebarContext,oe as SidebarGroup,le as SidebarGroupContent,re as SidebarGroupLabel,ge as SidebarHeader,se as SidebarMenu,ue as SidebarMenuAction,ce as SidebarMenuBadge,fe as SidebarMenuButton,de as SidebarMenuItem,be as SidebarMenuSub,me as SidebarMenuSubButton,pe as SidebarMenuSubItem,he as SidebarOutlet,ve as SidebarOutletHeader,ae as SidebarProvider,ie as SidebarTrigger,y as sidebarMenuButtonClasses,v as useSidebar};
|
|
2
2
|
//# sourceMappingURL=sidebar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.js","sources":["../../lib/components/sidebar.tsx"],"sourcesContent":["'use client';\nimport { createContext, use, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Button } from '../components/button';\nimport { DialogContent, DialogOverlay, DialogTrigger } from '../components/dialog';\nimport { Tooltip, TooltipTrigger } from '../components/tooltip';\nimport { classNames } from '../utilities/theme';\nimport { useIsMobile } from '../utilities/use-mobile';\nimport { IcLeft, IcMoreHorizontal, IcRight } from './icons';\n\nconst SIDEBAR_KEYBOARD_SHORTCUT = '/';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nexport const SidebarContext = createContext<SidebarContextProps | null>(null);\n\n/**\n * Get the current sidebar state and controls. Must be inside SidebarProvider.\n * @throws When used outside of SidebarProvider\n */\nexport function useSidebar() {\n const context = use(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\n/**\n * Wraps your app layout and manages sidebar state. Handles keyboard shortcuts (Cmd/Ctrl + /)\n * and mobile vs desktop behavior.\n *\n * @example\n * <SidebarProvider>\n * <Sidebar>...</Sidebar>\n * <SidebarOutlet>\n * <main>Your app content</main>\n * </SidebarOutlet>\n * </SidebarProvider>\n */\nexport function SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Initial open state. Defaults to true */\n defaultOpen?: boolean;\n /** Control the open state yourself */\n open?: boolean;\n /** Callback when sidebar opens/closes */\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n },\n [setOpenProp, open]\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = useCallback(() => {\n return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n }, [isMobile, setOpen, setOpenMobile]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <div\n className={classNames(\n 'group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1',\n className\n )}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\n/**\n * The actual sidebar panel. On mobile it becomes a modal dialog.\n */\nexport function Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'icon',\n className,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Where to dock the sidebar. Default: left */\n side?: 'left' | 'right';\n /** Style variant. Default: sidebar */\n variant?: 'sidebar' | 'floating';\n /** How it collapses. Default: offcanvas */\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <div\n className={classNames(\n 'flex h-full w-[--sidebar-width] flex-col bg-elevation-1 text-foreground',\n className\n )}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <DialogTrigger isOpen={openMobile} onOpenChange={setOpenMobile} {...props}>\n <DialogOverlay>\n <DialogContent\n data-sidebar=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden\"\n side=\"left\"\n >\n {() => <>{children}</>}\n </DialogContent>\n </DialogOverlay>\n </DialogTrigger>\n );\n }\n\n return (\n <div\n className=\"group peer hidden text-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n className={classNames(\n 'relative w-(--sidebar-width) bg-elevation-1 transition-[width] duration-200 ease-linear',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'\n )}\n />\n <div\n className={classNames(\n 'absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n side === 'left'\n ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n // Adjust the padding for floating variant.\n variant === 'floating'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n className=\"flex h-full w-full flex-col bg-elevation-1 group-data-[variant=floating]:border group-data-[variant=floating]:border-border\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\n/**\n * Button that toggles the sidebar. Shows arrow icons.\n */\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar, open, isMobile } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n variant=\"neutral\"\n size=\"icon\"\n className={'!rounded-full'}\n onClick={event => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n {/* Use transition to rotate a single icon */}\n {isMobile ? <IcMoreHorizontal /> : open ? <IcLeft /> : <IcRight />}\n </Button>\n );\n}\n\n/**\n * Scrollable container for sidebar content\n */\nexport function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-sidebar=\"content\"\n className={classNames(\n 'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Groups related menu items together\n */\nexport function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-sidebar=\"group\"\n className={classNames(\n 'relative flex w-full min-w-0 flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-2',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Label for a group.\n */\nexport function SidebarGroupLabel({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-sidebar=\"group-label\"\n className={classNames(\n 'flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Content wrapper for a group\n */\nexport function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-sidebar=\"group-content\" className={classNames('w-full body-sm', className)} {...props} />;\n}\n\n/**\n * Container for menu items\n */\nexport function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n return <ul data-sidebar=\"menu\" className={classNames('flex w-full min-w-0 flex-col', className)} {...props} />;\n}\n\n/**\n * Single menu item wrapper\n */\nexport function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-sidebar=\"menu-item\"\n className={classNames(\n 'group/menu-item relative list-none group-data-[collapsible=icon]:[&>*:not([data-sidebar=menu-button])]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Extra action button that appears on the right side of menu items\n */\nexport function SidebarMenuAction({\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n /** Only show on hover */\n showOnHover?: boolean;\n}) {\n return (\n <button\n data-sidebar=\"menu-action\"\n className={classNames(\n 'absolute top-0 right-0 btn btn-ghost h-input',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Shows a number badge on menu items. Auto-formats large numbers.\n */\nexport function SidebarMenuBadge({\n className,\n number,\n ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\n /** The count to display */\n number: number | bigint;\n}) {\n return (\n <div\n data-sidebar=\"menu-badge\"\n className={classNames(\n 'absolute pointer-events-none top-0 right-0 font-light h-input select-none flex items-center justify-center body-sm tabular-nums',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n >\n {/* Format the number */}\n {new Intl.NumberFormat(navigator.language, { useGrouping: true }).format(number)}\n </div>\n );\n}\n\n/**\n * Nested submenu container\n */\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-sidebar=\"menu-sub\"\n className={classNames(\n 'ms-2 flex min-w-0 flex-col border-l border-border',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Submenu item wrapper\n */\nexport function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li className={classNames('list-none ms-0', className)} {...props} />;\n}\n\nconst menuButtonClasses =\n 'btn-tab py-3 h-auto rounded-none w-full selected:shadow-[inset_2px_0_0_0_var(--color-primary)] group-data-[collapsible=icon]:![font-size:0] group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!px-0 group-data-[collapsible=icon]:!gap-0 group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:selected:shadow-none';\n\n// Common interaction logic for SidebarMenuButton and SidebarMenuSubButton\n/**\n * Main menu button. Pass isActive for current page.\n */\nexport function SidebarMenuButton({\n isActive = false,\n tooltip,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n /** Mark as currently active page */\n isActive?: boolean;\n /** Tooltip when sidebar is collapsed */\n tooltip?: React.ComponentProps<typeof Tooltip>;\n}) {\n const { isMobile, state } = useSidebar();\n\n const button = (\n <button\n data-sidebar=\"menu-button\"\n {...(isActive && { 'data-selected': true })}\n className={classNames(\n 'peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input',\n menuButtonClasses,\n className\n )}\n {...props}\n />\n );\n\n if (!tooltip) {\n return button;\n }\n\n return (\n <TooltipTrigger>\n {button}\n <Tooltip hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n </TooltipTrigger>\n );\n}\n\n/**\n * Button for submenu items\n */\nexport function SidebarMenuSubButton({\n isActive,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n isActive?: boolean;\n}) {\n return (\n <button\n data-sidebar=\"menu-sub-button\"\n data-active={isActive}\n className={classNames(menuButtonClasses, className)}\n {...props}\n />\n );\n}\n\n/**\n * Sticky header at the top of the sidebar. Displays a square logo slot aligned with the outlet header.\n */\nexport function SidebarHeader({\n className,\n logo,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Square logo/icon to display */\n logo?: React.ReactNode;\n}) {\n return (\n <div\n data-sidebar=\"header\"\n className={classNames(\n 'flex items-center h-header select-none shrink-0 border-b px-2 gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0',\n className\n )}\n {...props}\n >\n {logo && <div className=\"flex items-center justify-center size-input shrink-0\">{logo}</div>}\n {children && <div className=\"flex-1 min-w-0 group-data-[collapsible=icon]:hidden\">{children}</div>}\n </div>\n );\n}\n\n/**\n * The main content area next to the sidebar\n */\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={classNames(className, 'w-full overflow-auto')} {...props} />;\n}\n\n/**\n *\n * @example Basic usage\n * ```tsx\n * <SidebarOutlet>\n * <SidebarOutletHeader><SidebarTrigger/></SidebarOutletHeader>\n * </SidebarOutlet>\n * ```\n */\nexport function SidebarOutletHeader({ className, ...props }: React.ComponentProps<'nav'>) {\n return (\n <nav\n className={classNames(\n 'flex items-center h-header bg-elevation-1 sticky top-0 z-50 p-2 border-b',\n className\n )}\n {...props}\n />\n );\n}\n"],"names":["SIDEBAR_KEYBOARD_SHORTCUT","SidebarContext","createContext","useSidebar","context","use","SidebarProvider","defaultOpen","openProp","setOpenProp","className","style","children","props","isMobile","useIsMobile","openMobile","setOpenMobile","useState","_open","_setOpen","open","setOpen","useCallback","value","openState","toggleSidebar","useEffect","handleKeyDown","event","state","contextValue","useMemo","jsx","classNames","Sidebar","side","variant","collapsible","DialogTrigger","DialogOverlay","DialogContent","jsxs","SidebarTrigger","onClick","Button","IcMoreHorizontal","IcLeft","IcRight","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","SidebarMenuBadge","number","SidebarMenuSub","SidebarMenuSubItem","menuButtonClasses","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarHeader","logo","SidebarOutlet","SidebarOutletHeader"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sidebar.js","sources":["../../lib/components/sidebar.tsx"],"sourcesContent":["'use client';\nimport { createContext, use, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Button } from '../components/button';\nimport { DialogContent, DialogOverlay, DialogTrigger } from '../components/dialog';\nimport { Tooltip, TooltipTrigger } from '../components/tooltip';\nimport { classNames } from '../utilities/theme';\nimport { useIsMobile } from '../utilities/use-mobile';\nimport { IcLeft, IcMoreHorizontal, IcRight } from './icons';\n\nconst SIDEBAR_KEYBOARD_SHORTCUT = '/';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nexport const SidebarContext = createContext<SidebarContextProps | null>(null);\n\n/**\n * Get the current sidebar state and controls. Must be inside SidebarProvider.\n * @throws When used outside of SidebarProvider\n */\nexport function useSidebar() {\n const context = use(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\n/**\n * Wraps your app layout and manages sidebar state. Handles keyboard shortcuts (Cmd/Ctrl + /)\n * and mobile vs desktop behavior.\n *\n * @example\n * <SidebarProvider>\n * <Sidebar>...</Sidebar>\n * <SidebarOutlet>\n * <main>Your app content</main>\n * </SidebarOutlet>\n * </SidebarProvider>\n */\nexport function SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Initial open state. Defaults to true */\n defaultOpen?: boolean;\n /** Control the open state yourself */\n open?: boolean;\n /** Callback when sidebar opens/closes */\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n },\n [setOpenProp, open]\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = useCallback(() => {\n return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n }, [isMobile, setOpen, setOpenMobile]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <div\n className={classNames(\n 'group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1',\n className\n )}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\n/**\n * The actual sidebar panel. On mobile it becomes a modal dialog.\n */\nexport function Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'icon',\n className,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Where to dock the sidebar. Default: left */\n side?: 'left' | 'right';\n /** Style variant. Default: sidebar */\n variant?: 'sidebar' | 'floating';\n /** How it collapses. Default: offcanvas */\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <div\n className={classNames(\n 'flex h-full w-[--sidebar-width] flex-col bg-elevation-1 text-foreground',\n className\n )}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <DialogTrigger isOpen={openMobile} onOpenChange={setOpenMobile} {...props}>\n <DialogOverlay>\n <DialogContent\n data-sidebar=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden\"\n side=\"left\"\n >\n {() => <>{children}</>}\n </DialogContent>\n </DialogOverlay>\n </DialogTrigger>\n );\n }\n\n return (\n <div\n className=\"group peer hidden text-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n className={classNames(\n 'relative w-(--sidebar-width) bg-elevation-1 transition-[width] duration-200 ease-linear',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'\n )}\n />\n <div\n className={classNames(\n 'absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n side === 'left'\n ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n // Adjust the padding for floating variant.\n variant === 'floating'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n className=\"flex h-full w-full flex-col bg-elevation-1 group-data-[variant=floating]:border group-data-[variant=floating]:border-border\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\n/**\n * Button that toggles the sidebar. Shows arrow icons.\n */\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar, open, isMobile } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n variant=\"neutral\"\n size=\"icon\"\n className={'!rounded-full'}\n onClick={event => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n {/* Use transition to rotate a single icon */}\n {isMobile ? <IcMoreHorizontal /> : open ? <IcLeft /> : <IcRight />}\n </Button>\n );\n}\n\n/**\n * Scrollable container for sidebar content\n */\nexport function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-sidebar=\"content\"\n className={classNames(\n 'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Groups related menu items together\n */\nexport function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-sidebar=\"group\"\n className={classNames(\n 'relative flex w-full min-w-0 flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-2',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Label for a group.\n */\nexport function SidebarGroupLabel({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-sidebar=\"group-label\"\n className={classNames(\n 'flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Content wrapper for a group\n */\nexport function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-sidebar=\"group-content\" className={classNames('w-full body-sm', className)} {...props} />;\n}\n\n/**\n * Container for menu items\n */\nexport function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n return <ul data-sidebar=\"menu\" className={classNames('flex w-full min-w-0 flex-col', className)} {...props} />;\n}\n\n/**\n * Single menu item wrapper\n */\nexport function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-sidebar=\"menu-item\"\n className={classNames(\n 'group/menu-item relative list-none group-data-[collapsible=icon]:[&>*:not([data-sidebar=menu-button])]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Extra action button that appears on the right side of menu items\n */\nexport function SidebarMenuAction({\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n /** Only show on hover */\n showOnHover?: boolean;\n}) {\n return (\n <button\n data-sidebar=\"menu-action\"\n className={classNames(\n 'absolute top-0 right-0 btn btn-ghost h-input',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Shows a number badge on menu items. Auto-formats large numbers.\n */\nexport function SidebarMenuBadge({\n className,\n number,\n ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\n /** The count to display */\n number: number | bigint;\n}) {\n return (\n <div\n data-sidebar=\"menu-badge\"\n className={classNames(\n 'absolute pointer-events-none top-0 right-0 font-light h-input select-none flex items-center justify-center body-sm tabular-nums',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n >\n {/* Format the number */}\n {new Intl.NumberFormat(navigator.language, { useGrouping: true }).format(number)}\n </div>\n );\n}\n\n/**\n * Nested submenu container\n */\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-sidebar=\"menu-sub\"\n className={classNames(\n 'ms-2 flex min-w-0 flex-col border-l border-border',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Submenu item wrapper\n */\nexport function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li className={classNames('list-none ms-0', className)} {...props} />;\n}\n\nexport const sidebarMenuButtonClasses =\n 'btn-tab py-3 h-auto rounded-none w-full selected:shadow-[inset_2px_0_0_0_var(--color-primary)] group-data-[collapsible=icon]:![font-size:0] group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!px-0 group-data-[collapsible=icon]:!gap-0 group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:selected:shadow-none';\n\n// Common interaction logic for SidebarMenuButton and SidebarMenuSubButton\n/**\n * Main menu button. Pass isActive for current page.\n */\nexport function SidebarMenuButton({\n isActive = false,\n tooltip,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n /** Mark as currently active page */\n isActive?: boolean;\n /** Tooltip when sidebar is collapsed */\n tooltip?: React.ComponentProps<typeof Tooltip>;\n}) {\n const { isMobile, state } = useSidebar();\n\n const button = (\n <button\n data-sidebar=\"menu-button\"\n {...(isActive && { 'data-selected': true })}\n className={classNames(\n 'peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input',\n sidebarMenuButtonClasses,\n className\n )}\n {...props}\n />\n );\n\n if (!tooltip) {\n return button;\n }\n\n return (\n <TooltipTrigger>\n {button}\n <Tooltip hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n </TooltipTrigger>\n );\n}\n\n/**\n * Button for submenu items\n */\nexport function SidebarMenuSubButton({\n isActive,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n isActive?: boolean;\n}) {\n return (\n <button\n data-sidebar=\"menu-sub-button\"\n data-active={isActive}\n className={classNames(sidebarMenuButtonClasses, className)}\n {...props}\n />\n );\n}\n\n/**\n * Sticky header at the top of the sidebar. Displays a square logo slot aligned with the outlet header.\n */\nexport function SidebarHeader({\n className,\n logo,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Square logo/icon to display */\n logo?: React.ReactNode;\n}) {\n return (\n <div\n data-sidebar=\"header\"\n className={classNames(\n 'flex items-center h-header select-none shrink-0 border-b px-2 gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0',\n className\n )}\n {...props}\n >\n {logo && <div className=\"flex items-center justify-center size-input shrink-0\">{logo}</div>}\n {children && <div className=\"flex-1 min-w-0 group-data-[collapsible=icon]:hidden\">{children}</div>}\n </div>\n );\n}\n\n/**\n * The main content area next to the sidebar\n */\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={classNames(className, 'w-full overflow-auto')} {...props} />;\n}\n\n/**\n *\n * @example Basic usage\n * ```tsx\n * <SidebarOutlet>\n * <SidebarOutletHeader><SidebarTrigger/></SidebarOutletHeader>\n * </SidebarOutlet>\n * ```\n */\nexport function SidebarOutletHeader({ className, ...props }: React.ComponentProps<'nav'>) {\n return (\n <nav\n className={classNames(\n 'flex items-center h-header bg-elevation-1 sticky top-0 z-50 p-2 border-b',\n className\n )}\n {...props}\n />\n );\n}\n"],"names":["SIDEBAR_KEYBOARD_SHORTCUT","SidebarContext","createContext","useSidebar","context","use","SidebarProvider","defaultOpen","openProp","setOpenProp","className","style","children","props","isMobile","useIsMobile","openMobile","setOpenMobile","useState","_open","_setOpen","open","setOpen","useCallback","value","openState","toggleSidebar","useEffect","handleKeyDown","event","state","contextValue","useMemo","jsx","classNames","Sidebar","side","variant","collapsible","DialogTrigger","DialogOverlay","DialogContent","jsxs","SidebarTrigger","onClick","Button","IcMoreHorizontal","IcLeft","IcRight","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","SidebarMenuBadge","number","SidebarMenuSub","SidebarMenuSubItem","sidebarMenuButtonClasses","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarHeader","logo","SidebarOutlet","SidebarOutletHeader"],"mappings":"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"}
|
package/lib/index.css
CHANGED
|
@@ -79,29 +79,29 @@
|
|
|
79
79
|
--color-elevation-1: var(--color-neutral-1);
|
|
80
80
|
|
|
81
81
|
--color-primary: var(--color-primary-7);
|
|
82
|
-
--color-primary-foreground: var(--color-
|
|
82
|
+
--color-primary-foreground: var(--color-neutral-2);
|
|
83
83
|
--color-secondary: var(--color-secondary-7);
|
|
84
|
-
--color-secondary-foreground: var(--color-
|
|
84
|
+
--color-secondary-foreground: var(--color-neutral-2);
|
|
85
85
|
--color-muted: var(--color-neutral-7);
|
|
86
86
|
--color-muted-foreground: var(--color-neutral-4);
|
|
87
87
|
--color-accent: var(--color-neutral-7);
|
|
88
|
-
--color-accent-foreground: var(--color-neutral-
|
|
88
|
+
--color-accent-foreground: var(--color-neutral-2);
|
|
89
89
|
--color-destructive: var(--color-destructive-7);
|
|
90
|
-
--color-destructive-foreground: var(--color-
|
|
90
|
+
--color-destructive-foreground: var(--color-neutral-2);
|
|
91
91
|
--color-success: var(--color-success-7);
|
|
92
|
-
--color-success-foreground: var(--color-
|
|
92
|
+
--color-success-foreground: var(--color-neutral-2);
|
|
93
93
|
--color-warning: var(--color-warning-7);
|
|
94
|
-
--color-warning-foreground: var(--color-
|
|
94
|
+
--color-warning-foreground: var(--color-neutral-2);
|
|
95
95
|
|
|
96
96
|
--color-border: var(--color-neutral-4);
|
|
97
97
|
--color-input: var(--color-border);
|
|
98
98
|
--color-ring: var(--color-neutral-5);
|
|
99
99
|
|
|
100
|
-
--color-chart-1: var(--color-primary-
|
|
101
|
-
--color-chart-2: var(--color-
|
|
102
|
-
--color-chart-3: var(--color-
|
|
103
|
-
--color-chart-4: var(--color-
|
|
104
|
-
--color-chart-5: var(--color-
|
|
100
|
+
--color-chart-1: var(--color-primary-5);
|
|
101
|
+
--color-chart-2: var(--color-primary-6);
|
|
102
|
+
--color-chart-3: var(--color-warning-5);
|
|
103
|
+
--color-chart-4: var(--color-warning-6);
|
|
104
|
+
--color-chart-5: var(--color-neutral-6);
|
|
105
105
|
|
|
106
106
|
--spacing-input: --spacing(8);
|
|
107
107
|
--spacing-icon: --spacing(4);
|
|
@@ -314,19 +314,19 @@
|
|
|
314
314
|
@apply border border-destructive text-destructive-foreground bg-destructive;
|
|
315
315
|
}
|
|
316
316
|
@utility btn-destructive-neutral {
|
|
317
|
-
@apply text-destructive bg-elevation-1
|
|
317
|
+
@apply text-destructive bg-elevation-1;
|
|
318
318
|
}
|
|
319
319
|
@utility btn-secondary {
|
|
320
320
|
@apply border border-secondary text-secondary-foreground bg-secondary;
|
|
321
321
|
}
|
|
322
322
|
@utility btn-secondary-neutral {
|
|
323
|
-
@apply text-secondary bg-elevation-1
|
|
323
|
+
@apply text-secondary bg-elevation-1;
|
|
324
324
|
}
|
|
325
325
|
@utility btn-neutral {
|
|
326
326
|
@apply border border-input text-accent bg-elevation-1;
|
|
327
327
|
}
|
|
328
328
|
@utility btn-primary-neutral {
|
|
329
|
-
@apply text-primary
|
|
329
|
+
@apply text-primary bg-elevation-1;
|
|
330
330
|
}
|
|
331
331
|
@utility btn-ghost {
|
|
332
332
|
@apply bg-transparent focus:bg-accent/20 hover:bg-accent/20;
|