@cryptlex/web-components 5.5.1 → 6.0.0

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.
Files changed (8) hide show
  1. package/dist/components/data-table.js +1 -1
  2. package/dist/components/data-table.js.map +1 -1
  3. package/dist/components/menu.js +1 -1
  4. package/dist/components/menu.js.map +1 -1
  5. package/dist/components/sidebar.js +1 -1
  6. package/dist/components/sidebar.js.map +1 -1
  7. package/lib/utilities.css +2 -10
  8. package/package.json +1 -1
package/dist/components/data-table.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,Fragment as C,jsxs as c}from"react/jsx-runtime";import{Button as y}from"./button.js";import{useQuery as te,keepPreviousData as ne}from"@tanstack/react-query";import{createColumnHelper as re,useReactTable as ae,getCoreRowModel as ie,flexRender as M}from"@tanstack/react-table";import{Info as oe,RotateCw as le,Columns3 as se,GripVertical as ce,ChevronFirst as de,ChevronLeft as ue,ChevronRight as me,ChevronLast as pe,ArrowDownNarrowWide as ge,ArrowDownWideNarrow as fe,ArrowUpDown as he,Filter as be,Trash as Se}from"lucide-react";import{createContext as ye,useId as ve,useState as w,useMemo as E,useEffect as j,useContext as Ce,useRef as we}from"react";import{sortableKeyboardCoordinates as xe,SortableContext as Ne,verticalListSortingStrategy as Te,arrayMove as Ae,useSortable as Fe}from"@dnd-kit/sortable";import{useSensors as Pe,useSensor as H,PointerSensor as De,KeyboardSensor as Oe,DndContext as Ie,closestCenter as Re,DragOverlay as Le}from"@dnd-kit/core";import{CSS as ze}from"@dnd-kit/utilities";import{TABLE_CHECK_BOX_COLUMN as Me,TABLE_ID_COLUMN as Ee,TABLE_DEFAULT_DATE_COLUMNS as _e}from"./data-table-commons.js";import{TfDatePicker as Ve}from"./date-picker.js";import{TfIdSearchInput as qe}from"./id-search.js";import{EasyMenu as V,MenuItem as L}from"./menu.js";import{PopoverTrigger as $e,Popover as Ue}from"./popover.js";import{useAppForm as ke}from"../utils/form-hook.js";import{classNames as x}from"../utils/primitives.js";import{useResourceFormatter as W}from"../utils/resource-names.js";import{Loader as je}from"./loader.js";import{SearchField as He}from"./searchfield.js";import{Table as Be,TableHeader as Ke,TableRow as B,TableHead as Qe,TableBody as We,TableCell as Ge}from"./table.js";import{merge as Xe}from"lodash-es";import"class-variance-authority";import"react-aria-components";import"date-fns";import"./checkbox.js";import"./field.js";import"../utils/form-context.js";import"@tanstack/react-form";import"@internationalized/date";import"./calendar.js";import"./datefield.js";import"./list-box.js";import"./select.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";import"clsx";const _="tableActions";function kt({columns:t,fetchFn:a,columnsToHideByDefault:l={},allowSelection:o=!1,filterConfig:n}){const f=ve(),[s,u]=w({pagination:{pageIndex:0,pageSize:20},sorting:[]}),[h,d]=w({}),[b,m]=w(""),[i,g]=w([]),[p,T]=w({id:!1,updatedAt:!1,...l}),[P,Y]=w([]),q=E(()=>P.reduce((r,v)=>Xe(r,v),{}),[P]),z=r=>{u(v=>({...v,...r}))},{sorting:I,pagination:R}=s,A=te({queryKey:[f,R,I,b],queryFn:()=>a(R,I,b,q),placeholderData:ne,retry:0,refetchOnWindowFocus:!1});j(()=>{},[p]);const Z=E(()=>re(),[]),$=E(()=>{const r=A.data?.data;if(!r?.length)return[];const v=S=>S!=null&&typeof S=="object"&&"metadata"in S&&Array.isArray(S.metadata),k=r.filter(v);return k.length===0?[]:Array.from(new Set(k.flatMap(S=>S.metadata?.map(F=>F.key)??[]))).map(S=>Z.accessor(F=>v(F)?F?.metadata?.find(O=>O.key===S)?.value??"":"",{id:S,header:S,enableSorting:!1,cell:F=>{const O=F.getValue();return O==null?"":String(O)}}))},[A.data?.data]),J=[...o?Me:[],...Ee,...t.filter(r=>r.id!==_),...$.length?$:[],..._e,...t.filter(r=>r.id===_)];function ee(r){return typeof r=="function"}function D(r,v){return ee(r)?r(v):r}const U=ae({data:A.data?.data??[],columns:J,getCoreRowModel:ie(),rowCount:A.data?.total,manualPagination:!0,onPaginationChange:r=>{z({pagination:D(r,R)})},manualSorting:!0,onSortingChange:r=>{d({}),z({sorting:[...D(r,I)]})},manualFiltering:!0,onColumnVisibilityChange:r=>{T(D(r,p))},onRowSelectionChange:r=>{d(D(r,h))},onColumnOrderChange:r=>{g(D(r,i))},state:{sorting:I,columnVisibility:p,pagination:R,rowSelection:h,columnOrder:i},meta:{refetch:A.refetch}});return j(()=>{g([...U.getAllLeafColumns().map(r=>r.id)])},[]),{tableState:s,updateTableState:z,query:A,setSearchQuery:m,searchQuery:b,tanTable:U,mergedFilters:q,filters:P,setFilters:Y,filterConfig:n}}const G=ye(null),N=()=>{const t=Ce(G);if(!t)throw Error("DataTable should be used within DataTableProvider.");return t};function jt({children:t,...a}){return e(G.Provider,{value:a,children:t})}function Ht({tableActions:t,className:a,...l}){const{query:o,tanTable:n}=N();return e(C,{children:c("section",{...l,className:x("flex flex-col bg-card",a),children:[e(et,{tableActions:t}),c("div",{className:"w-full overflow-auto border-x grow min-h-table relative",tabIndex:0,children:[o.isLoading&&e(K,{className:"cursor-wait",children:e(je,{})}),!o.isLoading&&n.getRowModel().rows.length===0&&e(K,{className:"cursor-not-allowed",children:!o.isFetching&&(o.isError?c("span",{className:"flex gap-3 justify-center items-center",children:[e(oe,{}),e("span",{children:"You don't have the required permissions. Please contact your admin."})]}):o.data?.data?e(C,{children:"Unknown error. Please contact customer support."}):e(C,{children:"No results found."}))}),!o.isLoading&&n.getRowModel().rows.length!==0&&e(tt,{className:"size-full"})]}),c("div",{className:"flex w-full justify-between border gap-icon p-icon overflow-x-auto",children:[c("div",{className:"flex gap-icon",children:[e(Ye,{}),e(Je,{})]}),e(Ze,{})]})]})})}function K({children:t,className:a}){return c(C,{children:[e("span",{className:x(a,"absolute top-0 bg-card z-20 size-full text-sm flex items-center justify-center"),children:t}),e("span",{className:"relative h-full w-0 block"})]})}function Ye(){const{tanTable:t}=N(),[a,l]=w(null),o=W(),n=Pe(H(De),H(Oe,{coordinateGetter:xe}));return e(Ie,{sensors:n,collisionDetection:Re,onDragStart:s=>{const{active:u}=s;l(u.id.toString())},onDragEnd:s=>{const{active:u,over:h}=s;if(h&&u.id!==h.id){const d=t.getState().columnOrder,b=d.indexOf(u.id.toString()),m=d.indexOf(h.id.toString());t.setColumnOrder([...Ae(d,b,m)])}l(null)},children:c(Ne,{items:t.getState().columnOrder,strategy:Te,children:[c(V,{label:c(C,{children:[e(se,{}),"Columns"]}),selectionMode:"multiple",items:t.getAllFlatColumns(),selectedKeys:t.getIsAllColumnsVisible()?"all":t.getVisibleFlatColumns().map(s=>s.id),children:[e(L,{onAction:()=>t.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),t.getState().columnOrder.map(s=>{const u=t.getAllFlatColumns().find(h=>h.id===s);return u?e(f,{column:u},u.id):null})]}),e(Le,{children:a?e("div",{className:"dropdown-item opacity-70 border-2 border-primary",children:o(a)}):null})]})});function f({column:s}){const{attributes:u,listeners:h,setNodeRef:d,transform:b,transition:m}=Fe({id:s.id}),i={transform:ze.Transform.toString(b),transition:m,zIndex:"999"};return c(L,{ref:d,style:i,...u,id:s.id,onAction:()=>s.toggleVisibility(),isDisabled:!s.getCanHide(),className:"flex items-center",children:[e(ce,{...h,className:"size-icon cursor-grab"}),o(s.id),s.getIsSorted()&&e(X,{className:"size-icon",direction:s.getIsSorted()})]})}}function Ze(){const{tanTable:t,query:a}=N(),l=a.data?.total??0;return c("div",{className:"flex items-center gap-2",children:[e("span",{className:"whitespace-nowrap caption text-muted",children:`${t.getState().pagination.pageIndex*t.getState().pagination.pageSize+1} - ${Math.min((t.getState().pagination.pageIndex+1)*t.getState().pagination.pageSize,l)} of ${l?.toLocaleString()}`}),e(y,{onPress:()=>t.firstPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(de,{})}),e(y,{onPress:()=>t.previousPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(ue,{})}),e(y,{onPress:()=>t.nextPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e(me,{})}),e(y,{onClick:()=>t.lastPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e(pe,{})})]})}function Je(){const{tanTable:t}=N(),a=[10,20,30,40,50];return e(V,{label:t.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[t.getState().pagination.pageSize.toString()],items:a.map(l=>({id:l.toString(),value:l})),children:l=>e(L,{onAction:()=>t.setPageSize(l.value),children:l.value})})}function et({tableActions:t}){const{query:a,tanTable:l,searchQuery:o,setSearchQuery:n}=N();return c("section",{className:"flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto",children:[c("div",{className:"flex gap-icon",children:[e(y,{isPending:a.isFetching,onClick:()=>a.refetch(),variant:"neutral",size:"icon",children:e(le,{})}),t.filter(f=>f.bulk===l.getSelectedRowModel().rows.length>0).map((f,s)=>{const u=f.icon;return e(y,{type:"button",isDisabled:a.isFetching,className:"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform",onPress:h=>{f.onClick(h,l)},size:"icon",children:e(u,{})},`${s}-${f.bulk}`)})]}),c("div",{className:"flex gap-icon",children:[e(rt,{}),e(He,{value:o,onChange:n})]})]})}function X({direction:t,...a}){return t==="asc"?e(ge,{...a}):t==="desc"?e(fe,{...a}):e(he,{...a})}function tt({className:t}){const{tanTable:a}=N(),l=(o,n)=>x("animate-in fade-in slide-in-from-top-10","px-icon py-2 text-left text-sm font-medium whitespace-nowrap",o&&"bg-card sticky right-0 z-50 text-center",n);return c(Be,{className:x(t),children:[e(Ke,{className:"sticky top-0 z-10",children:a.getHeaderGroups().map(o=>e(B,{className:x("h-input"),children:o.headers.map(n=>c(Qe,{className:l(!1,"bg-card"),children:[!n.column.getCanSort()&&!n.isPlaceholder&&e(C,{children:M(n.column.columnDef.header,n.getContext())}),n.column.getCanSort()&&c(y,{variant:"ghost",className:"w-full !justify-start !px-1.5",onPress:n.column.getToggleSortingHandler(),children:[M(n.column.columnDef.header,n.getContext()),e(X,{direction:n.column.getIsSorted()})]})]},n.id))},o.id))}),e(We,{className:"flex-1 overflow-y-auto relative",children:a.getRowModel().rows.map(o=>e(B,{className:x("h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":o.getIsSelected(),children:o.getVisibleCells().map(n=>e(Ge,{className:l(n.column.id===_),children:M(n.column.columnDef.cell,n.getContext())},n.id))},o.id))})]})}const Bt=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],nt={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"},Q={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"]};function rt({className:t,...a}){const{filters:l,query:o,setFilters:n,filterConfig:f}=N(),s=we(null),u=W(),d=ke({defaultValues:{filters:[]},onSubmit:({value:m})=>{n(m.filters.map(i=>({[i.property]:{[i.operator]:[i.value]}})))}}),b=Object.keys(f).sort();return e("section",{...a,className:x("flex gap-icon items-center",t),children:c($e,{onOpenChange:m=>{m?s.current?.focus():d.handleSubmit()},children:[e(y,{active:l.length>0,isDisabled:o.isPending||b.length===0,type:"button",size:"icon",variant:"neutral",children:e(be,{})}),e(Ue,{className:"w-full p-icon",children:e("form",{onSubmit:m=>{m.preventDefault()},className:"flex flex-col gap-icon max-h-table overflow-auto ",children:e(d.Field,{mode:"array",name:"filters",children:m=>c(C,{children:[m.state.value.map((i,g)=>c("div",{className:"flex gap-icon items-center justify-normal",children:[e("span",{className:"text-sm",children:u(i.property)}),e(d.AppField,{name:`filters[${g}].operator`,children:p=>e(p.TfSingleSelect,{items:Q[i.type].map(T=>({id:T,label:e(C,{children:nt[T]})}))})},i.id),i.type==="bool"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfCheckbox,{})}),i.type==="date"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(Ve,{})}),i.type==="id"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfTextField,{})}),i.type==="string"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfTextField,{})}),i.type==="enum"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfMultiSelect,{items:f[i.property].options})}),i.type==="id-search"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(qe,{multiple:!0,accessor:"id",searchFn:f[i.property].search})}),e(y,{type:"button",variant:"destructive",size:"icon",onPress:()=>m.removeValue(g),children:e(Se,{})})]},i.id)),c("div",{className:"flex w-full items-center justify-end gap-2 not-first:mt-icon",children:[e(V,{label:"Add Filter",children:b.map(i=>e(L,{onAction:()=>{const g=f[i].type,p=P=>{switch(P){case"bool":return!0;case"string":return"";case"date":return new Date().toISOString();case"id":return"";case"id-search":return[];case"enum":return[]}},T={id:`${i}-${Date.now()}`,operator:Q[g][0],value:p(g),type:g,property:i};m.pushValue(T)},className:"dropdown-item",children:u(i)},i))}),m.state.value.length>0?e(y,{type:"button",variant:"neutral",onPress:()=>{m.setValue([])},children:"Reset filters"}):null]})]})})})})]})})}export{_ as ACTIONS_COLUMN_ID,nt as C,rt as D,Ht as DataTable,G as DataTableContext,jt as DataTableProvider,Bt as F,N as useDataTable,kt as useDataTableState};
1
+ "use client";import{jsx as e,Fragment as C,jsxs as c}from"react/jsx-runtime";import{Button as y}from"./button.js";import{useQuery as te,keepPreviousData as ne}from"@tanstack/react-query";import{createColumnHelper as re,useReactTable as ae,getCoreRowModel as ie,flexRender as M}from"@tanstack/react-table";import{Info as oe,RotateCw as le,Columns3 as se,GripVertical as ce,ChevronFirst as de,ChevronLeft as ue,ChevronRight as me,ChevronLast as pe,ArrowDownNarrowWide as ge,ArrowDownWideNarrow as fe,ArrowUpDown as he,Filter as be,Trash as Se}from"lucide-react";import{createContext as ye,useId as ve,useState as w,useMemo as E,useEffect as j,useContext as Ce,useRef as we}from"react";import{sortableKeyboardCoordinates as xe,SortableContext as Te,verticalListSortingStrategy as Ne,arrayMove as Ae,useSortable as Fe}from"@dnd-kit/sortable";import{useSensors as Pe,useSensor as H,PointerSensor as De,KeyboardSensor as Oe,DndContext as Ie,closestCenter as Re,DragOverlay as Le}from"@dnd-kit/core";import{CSS as ze}from"@dnd-kit/utilities";import{TABLE_CHECK_BOX_COLUMN as Me,TABLE_ID_COLUMN as Ee,TABLE_DEFAULT_DATE_COLUMNS as _e}from"./data-table-commons.js";import{TfDatePicker as Ve}from"./date-picker.js";import{TfIdSearchInput as qe}from"./id-search.js";import{EasyMenu as V,MenuItem as L}from"./menu.js";import{PopoverTrigger as $e,Popover as Ue}from"./popover.js";import{useAppForm as ke}from"../utils/form-hook.js";import{classNames as x}from"../utils/primitives.js";import{useResourceFormatter as W}from"../utils/resource-names.js";import{Loader as je}from"./loader.js";import{SearchField as He}from"./searchfield.js";import{Table as Be,TableHeader as Ke,TableRow as B,TableHead as Qe,TableBody as We,TableCell as Ge}from"./table.js";import{merge as Xe}from"lodash-es";import"class-variance-authority";import"react-aria-components";import"date-fns";import"./checkbox.js";import"./field.js";import"../utils/form-context.js";import"@tanstack/react-form";import"@internationalized/date";import"./calendar.js";import"./datefield.js";import"./list-box.js";import"./select.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";import"clsx";const _="tableActions";function kt({columns:t,fetchFn:a,columnsToHideByDefault:l={},allowSelection:o=!1,filterConfig:n}){const f=ve(),[s,u]=w({pagination:{pageIndex:0,pageSize:20},sorting:[]}),[h,d]=w({}),[b,m]=w(""),[i,g]=w([]),[p,N]=w({id:!1,updatedAt:!1,...l}),[P,Y]=w([]),q=E(()=>P.reduce((r,v)=>Xe(r,v),{}),[P]),z=r=>{u(v=>({...v,...r}))},{sorting:I,pagination:R}=s,A=te({queryKey:[f,R,I,b],queryFn:()=>a(R,I,b,q),placeholderData:ne,retry:0,refetchOnWindowFocus:!1});j(()=>{},[p]);const Z=E(()=>re(),[]),$=E(()=>{const r=A.data?.data;if(!r?.length)return[];const v=S=>S!=null&&typeof S=="object"&&"metadata"in S&&Array.isArray(S.metadata),k=r.filter(v);return k.length===0?[]:Array.from(new Set(k.flatMap(S=>S.metadata?.map(F=>F.key)??[]))).map(S=>Z.accessor(F=>v(F)?F?.metadata?.find(O=>O.key===S)?.value??"":"",{id:S,header:S,enableSorting:!1,cell:F=>{const O=F.getValue();return O==null?"":String(O)}}))},[A.data?.data]),J=[...o?Me:[],...Ee,...t.filter(r=>r.id!==_),...$.length?$:[],..._e,...t.filter(r=>r.id===_)];function ee(r){return typeof r=="function"}function D(r,v){return ee(r)?r(v):r}const U=ae({data:A.data?.data??[],columns:J,getCoreRowModel:ie(),rowCount:A.data?.total,manualPagination:!0,onPaginationChange:r=>{z({pagination:D(r,R)})},manualSorting:!0,onSortingChange:r=>{d({}),z({sorting:[...D(r,I)]})},manualFiltering:!0,onColumnVisibilityChange:r=>{N(D(r,p))},onRowSelectionChange:r=>{d(D(r,h))},onColumnOrderChange:r=>{g(D(r,i))},state:{sorting:I,columnVisibility:p,pagination:R,rowSelection:h,columnOrder:i},meta:{refetch:A.refetch}});return j(()=>{g([...U.getAllLeafColumns().map(r=>r.id)])},[]),{tableState:s,updateTableState:z,query:A,setSearchQuery:m,searchQuery:b,tanTable:U,mergedFilters:q,filters:P,setFilters:Y,filterConfig:n}}const G=ye(null),T=()=>{const t=Ce(G);if(!t)throw Error("DataTable should be used within DataTableProvider.");return t};function jt({children:t,...a}){return e(G.Provider,{value:a,children:t})}function Ht({tableActions:t,className:a,...l}){const{query:o,tanTable:n}=T();return e(C,{children:c("section",{...l,className:x("flex flex-col bg-card",a),children:[e(et,{tableActions:t}),c("div",{className:"w-full overflow-auto border-x grow min-h-table relative",tabIndex:0,children:[o.isLoading&&e(K,{className:"cursor-wait",children:e(je,{})}),!o.isLoading&&n.getRowModel().rows.length===0&&e(K,{className:"cursor-not-allowed",children:!o.isFetching&&(o.isError?c("span",{className:"flex gap-3 justify-center items-center",children:[e(oe,{}),e("span",{children:"You don't have the required permissions. Please contact your admin."})]}):o.data?.data?e(C,{children:"Unknown error. Please contact customer support."}):e(C,{children:"No results found."}))}),!o.isLoading&&n.getRowModel().rows.length!==0&&e(tt,{className:"size-full"})]}),c("div",{className:"flex w-full justify-between border gap-icon p-icon overflow-x-auto",children:[c("div",{className:"flex gap-icon",children:[e(Ye,{}),e(Je,{})]}),e(Ze,{})]})]})})}function K({children:t,className:a}){return c(C,{children:[e("span",{className:x(a,"absolute top-0 bg-card z-20 size-full text-sm flex items-center justify-center"),children:t}),e("span",{className:"relative h-full w-0 block"})]})}function Ye(){const{tanTable:t}=T(),[a,l]=w(null),o=W(),n=Pe(H(De),H(Oe,{coordinateGetter:xe}));return e(Ie,{sensors:n,collisionDetection:Re,onDragStart:s=>{const{active:u}=s;l(u.id.toString())},onDragEnd:s=>{const{active:u,over:h}=s;if(h&&u.id!==h.id){const d=t.getState().columnOrder,b=d.indexOf(u.id.toString()),m=d.indexOf(h.id.toString());t.setColumnOrder([...Ae(d,b,m)])}l(null)},children:c(Te,{items:t.getState().columnOrder,strategy:Ne,children:[c(V,{label:c(C,{children:[e(se,{}),"Columns"]}),selectionMode:"multiple",items:t.getAllFlatColumns(),selectedKeys:t.getIsAllColumnsVisible()?"all":t.getVisibleFlatColumns().map(s=>s.id),children:[e(L,{onAction:()=>t.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),t.getState().columnOrder.map(s=>{const u=t.getAllFlatColumns().find(h=>h.id===s);return u?e(f,{column:u},u.id):null})]}),e(Le,{children:a?e("div",{className:"opacity-70 border-2 border-primary",children:o(a)}):null})]})});function f({column:s}){const{attributes:u,listeners:h,setNodeRef:d,transform:b,transition:m}=Fe({id:s.id}),i={transform:ze.Transform.toString(b),transition:m,zIndex:"999"};return c(L,{ref:d,style:i,...u,id:s.id,onAction:()=>s.toggleVisibility(),isDisabled:!s.getCanHide(),className:"flex items-center",children:[e(ce,{...h,className:"size-icon cursor-grab"}),o(s.id),s.getIsSorted()&&e(X,{className:"size-icon",direction:s.getIsSorted()})]})}}function Ze(){const{tanTable:t,query:a}=T(),l=a.data?.total??0;return c("div",{className:"flex items-center gap-2",children:[e("span",{className:"whitespace-nowrap caption text-muted",children:`${t.getState().pagination.pageIndex*t.getState().pagination.pageSize+1} - ${Math.min((t.getState().pagination.pageIndex+1)*t.getState().pagination.pageSize,l)} of ${l?.toLocaleString()}`}),e(y,{onPress:()=>t.firstPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(de,{})}),e(y,{onPress:()=>t.previousPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(ue,{})}),e(y,{onPress:()=>t.nextPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e(me,{})}),e(y,{onClick:()=>t.lastPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e(pe,{})})]})}function Je(){const{tanTable:t}=T(),a=[10,20,30,40,50];return e(V,{label:t.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[t.getState().pagination.pageSize.toString()],items:a.map(l=>({id:l.toString(),value:l})),children:l=>e(L,{onAction:()=>t.setPageSize(l.value),children:l.value})})}function et({tableActions:t}){const{query:a,tanTable:l,searchQuery:o,setSearchQuery:n}=T();return c("section",{className:"flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto",children:[c("div",{className:"flex gap-icon",children:[e(y,{isPending:a.isFetching,onClick:()=>a.refetch(),variant:"neutral",size:"icon",children:e(le,{})}),t.filter(f=>f.bulk===l.getSelectedRowModel().rows.length>0).map((f,s)=>{const u=f.icon;return e(y,{type:"button",isDisabled:a.isFetching,className:"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform",onPress:h=>{f.onClick(h,l)},size:"icon",children:e(u,{})},`${s}-${f.bulk}`)})]}),c("div",{className:"flex gap-icon",children:[e(rt,{}),e(He,{value:o,onChange:n})]})]})}function X({direction:t,...a}){return t==="asc"?e(ge,{...a}):t==="desc"?e(fe,{...a}):e(he,{...a})}function tt({className:t}){const{tanTable:a}=T(),l=(o,n)=>x("animate-in fade-in slide-in-from-top-10","px-icon py-2 text-left text-sm font-medium whitespace-nowrap",o&&"bg-card sticky right-0 z-50 text-center",n);return c(Be,{className:x(t),children:[e(Ke,{className:"sticky top-0 z-10",children:a.getHeaderGroups().map(o=>e(B,{className:x("h-input"),children:o.headers.map(n=>c(Qe,{className:l(!1,"bg-card"),children:[!n.column.getCanSort()&&!n.isPlaceholder&&e(C,{children:M(n.column.columnDef.header,n.getContext())}),n.column.getCanSort()&&c(y,{variant:"ghost",className:"w-full !justify-start !px-1.5",onPress:n.column.getToggleSortingHandler(),children:[M(n.column.columnDef.header,n.getContext()),e(X,{direction:n.column.getIsSorted()})]})]},n.id))},o.id))}),e(We,{className:"flex-1 overflow-y-auto relative",children:a.getRowModel().rows.map(o=>e(B,{className:x("h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":o.getIsSelected(),children:o.getVisibleCells().map(n=>e(Ge,{className:l(n.column.id===_),children:M(n.column.columnDef.cell,n.getContext())},n.id))},o.id))})]})}const Bt=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],nt={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"},Q={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"]};function rt({className:t,...a}){const{filters:l,query:o,setFilters:n,filterConfig:f}=T(),s=we(null),u=W(),d=ke({defaultValues:{filters:[]},onSubmit:({value:m})=>{n(m.filters.map(i=>({[i.property]:{[i.operator]:[i.value]}})))}}),b=Object.keys(f).sort();return e("section",{...a,className:x("flex gap-icon items-center",t),children:c($e,{onOpenChange:m=>{m?s.current?.focus():d.handleSubmit()},children:[e(y,{active:l.length>0,isDisabled:o.isPending||b.length===0,type:"button",size:"icon",variant:"neutral",children:e(be,{})}),e(Ue,{className:"w-full p-icon",children:e("form",{onSubmit:m=>{m.preventDefault()},className:"flex flex-col gap-icon max-h-table overflow-auto ",children:e(d.Field,{mode:"array",name:"filters",children:m=>c(C,{children:[m.state.value.map((i,g)=>c("div",{className:"flex gap-icon items-center justify-normal",children:[e("span",{className:"text-sm",children:u(i.property)}),e(d.AppField,{name:`filters[${g}].operator`,children:p=>e(p.TfSingleSelect,{items:Q[i.type].map(N=>({id:N,label:e(C,{children:nt[N]})}))})},i.id),i.type==="bool"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfCheckbox,{})}),i.type==="date"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(Ve,{})}),i.type==="id"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfTextField,{})}),i.type==="string"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfTextField,{})}),i.type==="enum"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfMultiSelect,{items:f[i.property].options})}),i.type==="id-search"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(qe,{multiple:!0,accessor:"id",searchFn:f[i.property].search})}),e(y,{type:"button",variant:"destructive",size:"icon",onPress:()=>m.removeValue(g),children:e(Se,{})})]},i.id)),c("div",{className:"flex w-full items-center justify-end gap-2 not-first:mt-icon",children:[e(V,{label:"Add Filter",children:b.map(i=>e(L,{onAction:()=>{const g=f[i].type,p=P=>{switch(P){case"bool":return!0;case"string":return"";case"date":return new Date().toISOString();case"id":return"";case"id-search":return[];case"enum":return[]}},N={id:`${i}-${Date.now()}`,operator:Q[g][0],value:p(g),type:g,property:i};m.pushValue(N)},children:u(i)},i))}),m.state.value.length>0?e(y,{type:"button",variant:"neutral",onPress:()=>{m.setValue([])},children:"Reset filters"}):null]})]})})})})]})})}export{_ as ACTIONS_COLUMN_ID,nt as C,rt as D,Ht as DataTable,G as DataTableContext,jt as DataTableProvider,Bt as F,T as useDataTable,kt as useDataTableState};
2
2
  //# sourceMappingURL=data-table.js.map
package/dist/components/data-table.js.map CHANGED
@@ -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 { components, operations } from \"@cryptlex/web-api-types\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport {\n\ttype AccessorFnColumnDef,\n\ttype Column,\n\ttype ColumnDef,\n\ttype ColumnOrderState,\n\tcreateColumnHelper,\n\tgetCoreRowModel,\n\ttype RowSelectionState,\n\ttype TableState,\n\ttype Updater,\n\tuseReactTable,\n\ttype VisibilityState\n} from \"@tanstack/react-table\";\nimport { ArrowDownNarrowWide, ArrowDownWideNarrow, ArrowUpDown, Columns3, GripVertical, Info } from \"lucide-react\";\nimport { createContext, useContext, useEffect, useId, useMemo, useState } from \"react\";\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = \"tableActions\";\nexport type Schemas = ApiSchema<keyof components['schemas']>;\nexport type OperationKeys = keyof operations;\ntype DataTableFactory<TData extends Schemas> = {\n\tfetchFn: TableFetchFn<TData, OperationKeys>;\n\tcolumns: ColumnDef<TData, any>[]\n\tallowSelection?: boolean;\n\tcolumnsToHideByDefault?: VisibilityState; // Columns that are hidden by default\n\tfilterConfig: FiltersConfig<OperationKeys>\n}\n\n\ntype DataTableState = Pick<TableState, 'sorting' | 'pagination'> & {};\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<TData extends Schemas>({ columns, fetchFn, columnsToHideByDefault = {}, allowSelection = false, filterConfig }: DataTableFactory<TData>) {\n\tconst id = useId();\n\n\tconst [tableState, _setTableState] = useState<DataTableState>({\n\t\t/** TODO Reflect in URL */\n\t\tpagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n\t\tsorting: [], // Sorting state\n\t});\n\n\tconst [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n\n\t/** TODO Reflect in URL */\n\tconst [searchQuery, setSearchQuery] = useState('');\n\n\t/** TODO Store on browser as preference */\n\tconst [columnOrder, setColumnOrder] = useState<ColumnOrderState>([])\n\t// TODO Store on browser\n\tconst [columnVisibility, setColumnVisibility] = useState<VisibilityState>({\n\t\tid: false,\n\t\tupdatedAt: false,\n\t\t...columnsToHideByDefault,\n\t});\n\n\tconst [filters, setFilters] = useState<ApiFilters<OperationKeys>[]>([]);\n\n\tconst mergedFilters = useMemo(() => {\n\t\treturn filters.reduce((acc, current) => {\n\t\t\treturn merge(acc, current);\n\t\t}, {});\n\t}, [filters])\n\n\t// Update table state with new values\n\tconst updateTableState = (updates: Partial<DataTableState>) => {\n\t\t_setTableState((prev) => ({ ...prev, ...updates }));\n\t};\n\n\tconst {\n\t\tsorting,\n\t\tpagination,\n\t} = tableState;\n\n\tconst query = useQuery({\n\t\tqueryKey: [id, pagination, sorting, searchQuery],\n\t\tqueryFn: () => fetchFn(pagination, sorting, searchQuery, mergedFilters),\n\t\tplaceholderData: keepPreviousData, // Keep previous data while loading new data\n\t\tretry: 0,\n\t\trefetchOnWindowFocus: false,\n\t});\n\n\tuseEffect(() => {\n\t\t// TODO, store in localStorage\n\t}, [columnVisibility])\n\n\tconst columnHelper = useMemo(() => createColumnHelper<TData>(), []);\n\n\tconst metadataColumns = useMemo<AccessorFnColumnDef<TData, string>[]>(() => {\n\t\tconst data = query.data?.data;\n\t\tif (!data?.length) return [];\n\n\t\ttype WithMeta = TData & { metadata: ApiSchema<'MetadataDto'>[] };\n\t\tconst rowHasMetadata = (row: TData): row is WithMeta => row != null &&\n\t\t\ttypeof row === 'object' &&\n\t\t\t'metadata' in row &&\n\t\t\tArray.isArray((row).metadata);\n\n\t\tconst rowsWithMeta = data.filter(\n\t\t\trowHasMetadata\n\t\t);\n\t\tif (rowsWithMeta.length === 0) return [];\n\t\tconst keys: string[] = Array.from(new Set(rowsWithMeta.flatMap(r => r.metadata?.map(m => m.key) ?? [])));\n\n\t\treturn keys.map(key =>\n\t\t\tcolumnHelper.accessor(\n\t\t\t\t(row) => {\n\t\t\t\t\tif (rowHasMetadata(row)) {\n\t\t\t\t\t\treturn row?.metadata?.find(m => m.key === key)?.value ?? '';\n\t\t\t\t\t}\n\t\t\t\t\treturn '';\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: key,\n\t\t\t\t\theader: key, // tooltip header\n\t\t\t\t\tenableSorting: false,\n\t\t\t\t\tcell: (info) => {\n\t\t\t\t\t\tconst value = info.getValue();\n\t\t\t\t\t\t// Handle null/undefined values\n\t\t\t\t\t\tif (value === null || value === undefined) return \"\";\n\t\t\t\t\t\t// For primitive types, return the string representation\n\t\t\t\t\t\treturn String(value);\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t));\n\t}, [query.data?.data]);\n\n\t/**\n\t * ID,createdAt and updatedAt will be added by default for all tables\n\t * If selection is allowed, checkbox will be added\n\t * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n\t * If there are actions for the table, they will be placed fixed at the right side of table.\n\t */\n\tconst cols: ColumnDef<any, any>[] = [\n\t\t...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n\t\t...TABLE_ID_COLUMN,\n\t\t...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n\t\t...(metadataColumns.length ? metadataColumns : []),\n\t\t...TABLE_DEFAULT_DATE_COLUMNS,\n\t\t// Actions column\n\t\t...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n\t];\n\n\t// Type-guard for updater\n\tfunction isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n\t\treturn typeof updater === \"function\";\n\t}\n\t// Utility function to resolve updater\n\tfunction resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n\t\tif (isUpdaterFunction(updater)) {\n\t\t\treturn updater(currentValue);\n\t\t}\n\t\treturn updater;\n\t}\n\n\t// Use react-table's hook to create the table instance\n\tconst tanTable = useReactTable({\n\t\tdata: query.data?.data ?? [],\n\t\tcolumns: cols,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\trowCount: query.data?.total,\n\t\tmanualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n\t\tonPaginationChange: (updater) => {\n\t\t\tupdateTableState({ pagination: resolveUpdater(updater, pagination) });\n\t\t},\n\t\tmanualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n\t\tonSortingChange: (updater) => {\n\t\t\tsetRowSelection({});\n\t\t\tupdateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n\t\t},\n\t\tmanualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n\t\tonColumnVisibilityChange: (updater) => {\n\t\t\tsetColumnVisibility(resolveUpdater(updater, columnVisibility));\n\t\t},\n\t\tonRowSelectionChange: (updater) => {\n\t\t\tsetRowSelection(resolveUpdater(updater, rowSelection));\n\t\t},\n\t\tonColumnOrderChange: (updater) => {\n\t\t\tsetColumnOrder(resolveUpdater(updater, columnOrder));\n\t\t},\n\t\tstate: {\n\t\t\tsorting: sorting,\n\t\t\tcolumnVisibility: columnVisibility,\n\t\t\tpagination: pagination,\n\t\t\trowSelection: rowSelection,\n\t\t\tcolumnOrder: columnOrder\n\t\t},\n\t\tmeta: {\n\t\t\trefetch: query.refetch,\n\t\t},\n\t});\n\n\t// By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n\t// This populates the columnIds in the columnOrder state\n\t// TODO, add localStorage access layer for this. \n\tuseEffect(() => {\n\t\tsetColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);\n\t}, [])\n\n\treturn { tableState, updateTableState, query, setSearchQuery, searchQuery, tanTable, mergedFilters, filters, setFilters, filterConfig }\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n\nexport const useDataTable = () => {\n\tconst ctx = useContext(DataTableContext);\n\tif (!ctx) {\n\t\tthrow Error(\"DataTable should be used within DataTableProvider.\")\n\t}\n\treturn ctx;\n}\n\nexport function DataTableProvider({ children, ...props }: { children: React.ReactNode; } & ReturnType<typeof useDataTableState>) {\n\treturn (\n\t\t<DataTableContext.Provider value={props}>\n\t\t\t{children}\n\t\t</DataTableContext.Provider>\n\t)\n}\n\n\nexport type DataTableProps = React.ComponentProps<'section'> & {\n\ttableActions: TableActions;\n\n\t// filterConfig: {\n\t// \tfilters: Record<keyof ApiFilters<TOperation>, 'date' | 'string' | 'known-string' | 'number'>,\n\t// }\n}\nexport function DataTable({\n\ttableActions,\n\tclassName,\n\t...props\n\t// filterableFields,\n}: DataTableProps) {\n\t// State for managing table data and filters\n\tconst { query, tanTable } = useDataTable();\n\n\treturn (\n\t\t<>\n\t\t\t{/* Table Actions Section */}\n\t\t\t<section {...props} className={classNames(\"flex flex-col bg-card\", className)}>\n\t\t\t\t<Actions tableActions={tableActions} />\n\t\t\t\t{/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n\t\t\t\t<div className=\"w-full overflow-auto border-x grow min-h-table relative\" tabIndex={0}>\n\t\t\t\t\t{/* Table overlay with loader */}\n\t\t\t\t\t{query.isLoading && (\n\t\t\t\t\t\t<TableOverlay className=\"cursor-wait\">\n\t\t\t\t\t\t\t<Loader />\n\t\t\t\t\t\t</TableOverlay>\n\t\t\t\t\t)}\n\t\t\t\t\t{/* Table overlay for empty table */}\n\t\t\t\t\t{!query.isLoading && tanTable.getRowModel().rows.length === 0 && (\n\t\t\t\t\t\t// Empty table\n\t\t\t\t\t\t<TableOverlay className=\"cursor-not-allowed\">\n\t\t\t\t\t\t\t{!query.isFetching &&\n\t\t\t\t\t\t\t\t(query.isError ? (\n\t\t\t\t\t\t\t\t\t<span className=\"flex gap-3 justify-center items-center\">\n\t\t\t\t\t\t\t\t\t\t{/* TODO (mudasir-pandith) Check for 403 explicitly!! */}\n\t\t\t\t\t\t\t\t\t\t{/* <span>{query.error}</span> */}\n\t\t\t\t\t\t\t\t\t\t<Info />\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\tYou don't have the required permissions. Please contact your\n\t\t\t\t\t\t\t\t\t\t\tadmin.\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : !query.data?.data ? (\n\t\t\t\t\t\t\t\t\t<>No results found.</>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<>Unknown error. Please contact customer support.</>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</TableOverlay>\n\t\t\t\t\t)}\n\t\t\t\t\t{!query.isLoading && tanTable.getRowModel().rows.length !== 0 &&\n\t\t\t\t\t\t<TableContent className=\"size-full\" />}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Table Footer Section with Pagination and Column Picker */}\n\t\t\t\t<div className=\"flex w-full justify-between border gap-icon p-icon overflow-x-auto\">\n\t\t\t\t\t<div className=\"flex gap-icon\">\n\t\t\t\t\t\t<ColumnPicker />\n\t\t\t\t\t\t<PageSize />\n\t\t\t\t\t</div>\n\t\t\t\t\t<Paginator />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n/** Table overlay to be shown for loaders or other messages */\nfunction TableOverlay({\n\tchildren,\n\tclassName,\n}: { children: React.ReactNode; className?: string }) {\n\treturn (\n\t\t<>\n\t\t\t<span\n\t\t\t\tclassName={classNames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t\"absolute top-0 bg-card z-20 size-full text-sm flex items-center justify-center\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t\t{/* Keep something in document flow with the correct height */}\n\t\t\t<span className=\"relative h-full w-0 block\" />\n\t\t</>\n\t);\n}\n\nimport {\n\tarrayMove,\n\tSortableContext,\n\tsortableKeyboardCoordinates,\n\tuseSortable,\n\tverticalListSortingStrategy\n} from '@dnd-kit/sortable';\n\nfunction ColumnPicker() {\n\tconst { tanTable } = useDataTable();\n\tconst [activeId, setActiveId] = useState<string | null>(null);\n\n\tconst resourceFormatter = useResourceFormatter();\n\n\tconst sensors = useSensors(\n\t\tuseSensor(PointerSensor),\n\t\tuseSensor(KeyboardSensor, {\n\t\t\tcoordinateGetter: sortableKeyboardCoordinates,\n\t\t})\n\t);\n\treturn (\n\t\t<DndContext\n\t\t\tsensors={sensors}\n\t\t\tcollisionDetection={closestCenter}\n\t\t\tonDragStart={(event) => {\n\t\t\t\tconst { active } = event;\n\t\t\t\tsetActiveId(active.id.toString());\n\t\t\t}}\n\t\t\tonDragEnd={(event) => {\n\t\t\t\tconst { active, over } = event;\n\n\t\t\t\tif (over && active.id !== over.id) {\n\t\t\t\t\tconst columnOrder = tanTable.getState().columnOrder;\n\t\t\t\t\tconst oldIndex = columnOrder.indexOf(active.id.toString());\n\t\t\t\t\tconst newIndex = columnOrder.indexOf(over.id.toString());\n\t\t\t\t\ttanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);\n\t\t\t\t}\n\n\t\t\t\tsetActiveId(null);\n\t\t\t}}\n\t\t>\n\t\t\t<SortableContext\n\t\t\t\titems={tanTable.getState().columnOrder}\n\t\t\t\tstrategy={verticalListSortingStrategy}\n\t\t\t>\n\t\t\t\t<EasyMenu label={<><Columns3 />Columns</>} selectionMode=\"multiple\" items={tanTable.getAllFlatColumns()} selectedKeys={tanTable.getIsAllColumnsVisible() ? 'all' : tanTable.getVisibleFlatColumns().map(c => c.id)}>\n\t\t\t\t\t<MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>(select all)</MenuItem>\n\t\t\t\t\t{tanTable.getState().columnOrder.map(colId => {\n\t\t\t\t\t\tconst col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n\t\t\t\t\t\tif (!col) return null;\n\t\t\t\t\t\treturn <SortableItem key={col.id} column={col} />\n\t\t\t\t\t})}\n\t\t\t\t</EasyMenu>\n\t\t\t\t<DragOverlay>\n\t\t\t\t\t{activeId ? <div className=\"dropdown-item opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div> : null}\n\t\t\t\t</DragOverlay>\n\t\t\t</SortableContext>\n\t\t</DndContext>\n\t);\n\n\n\tfunction SortableItem({ column }: { column: Column<any, unknown> }) {\n\t\tconst {\n\t\t\tattributes,\n\t\t\tlisteners,\n\t\t\tsetNodeRef,\n\t\t\ttransform,\n\t\t\ttransition,\n\t\t} = useSortable({ id: column.id });\n\t\tconst style = {\n\t\t\ttransform: CSS.Transform.toString(transform),\n\t\t\ttransition,\n\t\t\tzIndex: '999'\n\t\t};\n\t\treturn <MenuItem\n\t\t\tref={setNodeRef}\n\t\t\tstyle={style}\n\t\t\t{...attributes}\n\t\t\tid={column.id}\n\t\t\tonAction={() => column.toggleVisibility()}\n\t\t\tisDisabled={!column.getCanHide()} className=\"flex items-center\">\n\t\t\t<GripVertical {...listeners} className=\"size-icon cursor-grab\" />\n\t\t\t{resourceFormatter(column.id)}\n\t\t\t{column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n\t\t</MenuItem>;\n\t}\n}\n\n\n\nimport {\n\tChevronFirst,\n\tChevronLast,\n\tChevronLeft,\n\tChevronRight,\n} from \"lucide-react\";\n\nfunction Paginator() {\n\tconst { tanTable, query } = useDataTable();\n\tconst rowCount = query.data?.total ?? 0\n\treturn (\n\t\t<div className=\"flex items-center gap-2\">\n\t\t\t<span className=\"whitespace-nowrap caption text-muted\">\n\t\t\t\t{`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n\t\t\t\t\t(tanTable.getState().pagination.pageIndex + 1) *\n\t\t\t\t\ttanTable.getState().pagination.pageSize,\n\t\t\t\t\trowCount,\n\t\t\t\t)} of ${rowCount?.toLocaleString()}`}\n\t\t\t</span>\n\n\t\t\t<Button\n\t\t\t\tonPress={() => tanTable.firstPage()}\n\t\t\t\tisDisabled={!tanTable.getCanPreviousPage()}\n\t\t\t\tvariant=\"neutral\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t><ChevronFirst /></Button>\n\t\t\t<Button\n\t\t\t\tonPress={() => tanTable.previousPage()}\n\t\t\t\tisDisabled={!tanTable.getCanPreviousPage()}\n\t\t\t\tvariant=\"neutral\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t><ChevronLeft /></Button>\n\t\t\t<Button\n\t\t\t\tonPress={() => tanTable.nextPage()}\n\t\t\t\tisDisabled={!tanTable.getCanNextPage()}\n\t\t\t\tvariant=\"neutral\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t><ChevronRight /></Button>\n\t\t\t<Button\n\t\t\t\tonClick={() => tanTable.lastPage()}\n\t\t\t\tisDisabled={!tanTable.getCanNextPage()}\n\t\t\t\tvariant=\"neutral\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t><ChevronLast /></Button>\n\t\t</div>\n\t);\n}\n\n\nfunction PageSize() {\n\tconst { tanTable } = useDataTable();\n\tconst PAGE_SIZES = [10, 20, 30, 40, 50];\n\n\treturn (\n\t\t<EasyMenu label={tanTable.getState().pagination.pageSize.toString()} selectionMode=\"single\" selectedKeys={[tanTable.getState().pagination.pageSize.toString()]} items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}>\n\t\t\t{\n\t\t\t\t(items) => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>\n\t\t\t}\n\t\t</EasyMenu>\n\t);\n}\n\n\nimport { RotateCw } from \"lucide-react\";\n\nfunction Actions({ tableActions }: { tableActions: TableActions }) {\n\tconst { query, tanTable, searchQuery, setSearchQuery } = useDataTable();\n\n\treturn (\n\t\t<section className=\"flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto\">\n\t\t\t<div className=\"flex gap-icon\">\n\t\t\t\t<Button\n\t\t\t\t\tisPending={query.isFetching}\n\t\t\t\t\tonClick={() => query.refetch()}\n\t\t\t\t\tvariant={\"neutral\"}\n\t\t\t\t\tsize={\"icon\"}\n\t\t\t\t><RotateCw /></Button>\n\n\t\t\t\t{tableActions\n\t\t\t\t\t.filter(ta => ta.bulk === tanTable.getSelectedRowModel().rows.length > 0)\n\t\t\t\t\t.map((ta, i) => {\n\t\t\t\t\t\tconst Icon = ta.icon;\n\t\t\t\t\t\treturn (<Button key={`${i}-${ta.bulk}`} type=\"button\" isDisabled={query.isFetching} className=\"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform\" onPress={(e) => { ta.onClick(e, tanTable) }} size={'icon'}><Icon /></Button>)\n\t\t\t\t\t}\n\t\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"flex gap-icon\">\n\t\t\t\t<DataTableFilter />\n\t\t\t\t{(\n\t\t\t\t\t<SearchField value={searchQuery} onChange={setSearchQuery} />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\n\nimport { closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors } from \"@dnd-kit/core\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport {\n\tflexRender\n} from \"@tanstack/react-table\";\nimport { Button } from \"lib/components/button\";\nimport { type ApiFilters, type ApiSchema, TABLE_CHECK_BOX_COLUMN, TABLE_DEFAULT_DATE_COLUMNS, TABLE_ID_COLUMN, type TableActions, type TableFetchFn } from \"lib/components/data-table-commons\";\nimport { DataTableFilter, type FiltersConfig } from \"lib/components/data-table-filter\";\nimport { Loader } from \"lib/components/loader\";\nimport { EasyMenu, MenuItem } from \"lib/components/menu\";\nimport { SearchField } from \"lib/components/searchfield\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"lib/components/table\";\nimport { classNames } from \"lib/utils/primitives\";\nimport { useResourceFormatter } from \"lib/utils/resource-names\";\nimport { merge } from \"lodash-es\";\n\nfunction SortIcon({ direction, ...props }: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n\tif (direction === 'asc') return <ArrowDownNarrowWide {...props} />\n\telse if (direction === 'desc') return <ArrowDownWideNarrow {...props} />\n\telse return <ArrowUpDown {...props} />\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n\tconst { tanTable } = useDataTable();\n\tconst tableCellStyle = (isSticky: boolean, className?: string) => classNames(\"animate-in fade-in slide-in-from-top-10\", \"px-icon py-2 text-left text-sm font-medium whitespace-nowrap\", isSticky && \"bg-card sticky right-0 z-50 text-center\", className)\n\treturn (\n\t\t<TableComponent className={classNames(className)}>\n\t\t\t<TableHeader className=\"sticky top-0 z-10\">\n\t\t\t\t{tanTable.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t<TableRow className={classNames(\"h-input\")} key={headerGroup.id}>\n\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\tclassName={tableCellStyle(false, \"bg-card\")}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{!header.column.getCanSort() && !header.isPlaceholder\n\t\t\t\t\t\t\t\t\t&& <>{flexRender(\n\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t)}</>}\n\t\t\t\t\t\t\t\t{/* TODO Align header text with table text */}\n\t\t\t\t\t\t\t\t{header.column.getCanSort() && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-full !justify-start !px-1.5\"\n\t\t\t\t\t\t\t\t\t\tonPress={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t<SortIcon direction={header.column.getIsSorted()} />\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableHeader>\n\t\t\t<TableBody className=\"flex-1 overflow-y-auto relative\">\n\t\t\t\t{tanTable.getRowModel().rows.map((row) => (\n\t\t\t\t\t<TableRow\n\t\t\t\t\t\tclassName={classNames(\"h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20\")}\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\tdata-selected={row.getIsSelected()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\tclassName={tableCellStyle(cell.column.id === ACTIONS_COLUMN_ID)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableBody>\n\t\t</TableComponent>\n\t);\n}\n","\"use client\"\nimport type { CalendarDateTime } from \"@internationalized/date\";\nimport { Button } from \"lib/components/button\";\nimport { useDataTable, type OperationKeys } from \"lib/components/data-table\";\nimport { type ApiFilters } from \"lib/components/data-table-commons\";\nimport { TfDatePicker } from \"lib/components/date-picker\";\nimport { TfIdSearchInput } from \"lib/components/id-search\";\nimport { EasyMenu, MenuItem } from \"lib/components/menu\";\nimport type { MultiSelectProps } from \"lib/components/multi-select\";\nimport { Popover, PopoverTrigger } from \"lib/components/popover\";\nimport { useAppForm } from \"lib/utils/form-hook\";\nimport { classNames } from \"lib/utils/primitives\";\nimport { useResourceFormatter } from \"lib/utils/resource-names\";\nimport { Filter, Trash } from \"lucide-react\";\nimport { useRef } from \"react\";\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 =\n (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<\n FilterComparisonOperator,\n string\n> = {\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\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 DateLocalFilter = BaseLocalFilter<'date', CalendarDateTime>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', Set<string | number>>;\n\ntype LocalFilter = EnumLocalFilter\n | IdLocalFilter\n | BoolLocalFilter\n | StringLocalFilter\n | DateLocalFilter\n | IdSearchLocalFilter;\n\nexport type FilterConfig =\n | { type: 'enum'; options: MultiSelectProps['items'] }\n | { type: 'id-search'; search: () => Promise<{ id: string; name: string }[]> }\n | { type: 'id' }\n | { type: 'bool' }\n | { type: 'string' }\n | { type: 'date' }\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}\n\nexport type FiltersConfig<TOperation extends OperationKeys> = Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n const { filters, query, setFilters, filterConfig } = useDataTable();\n // TODO @mudasirpandith add focus\n // const localFilterRefs = useRef([]);\n const addFilterButtonRef = useRef<HTMLButtonElement>(null);\n\n const resourceFormatter = useResourceFormatter();\n\n const DEFAULT_VALUES: { filters: LocalFilter[] } = {\n // TODO, initialize with filters from tableState\n filters: []\n };\n const form = useAppForm({\n defaultValues: DEFAULT_VALUES,\n onSubmit: ({ value }) => {\n // TODO, instead of generic transformation, use type based tranform()\n setFilters(value.filters.map(lf => { return { [lf.property]: { [lf.operator]: [lf.value] } } }))\n }\n })\n\n // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870\n const filterKeys = Object.keys(filterConfig).sort();\n\n return (\n <section {...props} className={classNames(\"flex gap-icon items-center\", className)}>\n <PopoverTrigger onOpenChange={(o) => {\n // Set filters when the popover closes\n if (!o) {\n form.handleSubmit();\n } else {\n addFilterButtonRef.current?.focus();\n }\n }}>\n <Button active={filters.length > 0} isDisabled={query.isPending || filterKeys.length === 0} type=\"button\" size={'icon'} variant={'neutral'}><Filter /></Button>\n {/* TODO, icon maps with dynamic imports? */}\n {/* TODO open popover with form for property specific filter */}\n {/* TODO, icons here??? */}\n <Popover className=\"w-full p-icon\">\n {/* const h3Styles = \"body mb-icon text-muted-foreground\"; */}\n {/* <h3 className={h3Styles}>{isFiltersActive ? \"Active filters\" : \"Add filters\"}</h3> */}\n <form onSubmit={(e) => { e.preventDefault(); }} className=\"flex flex-col gap-icon max-h-table overflow-auto \">\n <form.Field mode=\"array\" name={\"filters\"}>\n {\n (field) => {\n return <>\n {field.state.value.map((lf, i) => {\n return (\n <div key={lf.id} className=\"flex gap-icon items-center justify-normal\">\n <span className=\"text-sm\">{resourceFormatter(lf.property)}</span>\n <form.AppField\n key={lf.id}\n name={`filters[${i}].operator`}\n >\n {(sf) => (<sf.TfSingleSelect items={FilterOperations[lf.type].map(op => ({ id: op, label: <>{COMPARISON_OPERATOR_LABELS[op]}</> }))} />)}\n </form.AppField>\n\n {lf.type === 'bool' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfCheckbox />)}</form.AppField>}\n {lf.type === 'date' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfDatePicker />)}</form.AppField>}\n {lf.type === 'id' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}\n {lf.type === 'string' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}\n {/* TODO fix @mudasirpandith */}\n {/* @ts-ignore */}\n {lf.type === 'enum' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfMultiSelect items={filterConfig[lf.property].options} />)}</form.AppField>}\n {/* TODO fix @mudasirpandith */}\n {/* @ts-ignore */}\n {lf.type === 'id-search' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfIdSearchInput multiple accessor=\"id\" searchFn={filterConfig[lf.property].search} />)}</form.AppField>}\n\n <Button type=\"button\" variant=\"destructive\" size=\"icon\" onPress={() => field.removeValue(i)}><Trash /></Button>\n </div>\n )\n })}\n <div className=\"flex w-full items-center justify-end gap-2 not-first:mt-icon\">\n <EasyMenu label=\"Add Filter\">\n {filterKeys.map(k => <MenuItem key={k} onAction={() => {\n // TODO @mudasirpandith\n //@ts-ignore\n const type = filterConfig[k].type as FilterType;\n\n const defaultValue = (t: FilterType) => {\n // TODO, ensure exhaustive???\n // @mudasirpandith\n switch (t) {\n case 'bool':\n return true;\n case 'string':\n return '';\n case 'date':\n return new Date().toISOString();\n case 'id':\n return '';\n case 'id-search':\n return [] as string[];\n case 'enum':\n return [] as string[];\n }\n }\n\n const newFilter: LocalFilter = {\n id: `${k}-${Date.now()}`,\n operator: FilterOperations[type][0],\n //@ts-ignore\n value: defaultValue(type),\n type: type,\n property: k,\n };\n\n field.pushValue(newFilter);\n // TODO Focus to ref\n\n }} className=\"dropdown-item\">{resourceFormatter(k)}</MenuItem>)}\n </EasyMenu>\n {field.state.value.length > 0 ? (\n <Button\n type=\"button\"\n variant=\"neutral\"\n onPress={() => { field.setValue([]) }}\n >\n Reset filters\n </Button>\n ) : null}\n </div>\n </>\n }\n }\n </form.Field >\n </form>\n </Popover>\n </PopoverTrigger>\n </section>\n );\n};"],"names":["ACTIONS_COLUMN_ID","useDataTableState","columns","fetchFn","columnsToHideByDefault","allowSelection","filterConfig","id","useId","tableState","_setTableState","useState","rowSelection","setRowSelection","searchQuery","setSearchQuery","columnOrder","setColumnOrder","columnVisibility","setColumnVisibility","filters","setFilters","mergedFilters","useMemo","acc","current","merge","updateTableState","updates","prev","sorting","pagination","query","useQuery","keepPreviousData","useEffect","columnHelper","createColumnHelper","metadataColumns","data","rowHasMetadata","row","rowsWithMeta","r","m","key","info","value","cols","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","tableActions","className","jsx","Fragment","classNames","Actions","jsxs","TableOverlay","Loader","Info","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","Columns3","MenuItem","colId","SortableItem","DragOverlay","column","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","GripVertical","SortIcon","rowCount","Button","ChevronFirst","ChevronLeft","ChevronRight","ChevronLast","PAGE_SIZES","s","items","RotateCw","ta","i","Icon","e","DataTableFilter","SearchField","direction","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","tableCellStyle","isSticky","TableComponent","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","cell","TableCell","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","FilterOperations","addFilterButtonRef","useRef","form","useAppForm","lf","filterKeys","PopoverTrigger","o","Filter","Popover","field","sf","op","_","TfDatePicker","TfIdSearchInput","Trash","k","type","defaultValue","t","newFilter"],"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 { components, operations } from \"@cryptlex/web-api-types\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport {\n\ttype AccessorFnColumnDef,\n\ttype Column,\n\ttype ColumnDef,\n\ttype ColumnOrderState,\n\tcreateColumnHelper,\n\tgetCoreRowModel,\n\ttype RowSelectionState,\n\ttype TableState,\n\ttype Updater,\n\tuseReactTable,\n\ttype VisibilityState\n} from \"@tanstack/react-table\";\nimport { ArrowDownNarrowWide, ArrowDownWideNarrow, ArrowUpDown, Columns3, GripVertical, Info } from \"lucide-react\";\nimport { createContext, useContext, useEffect, useId, useMemo, useState } from \"react\";\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = \"tableActions\";\nexport type Schemas = ApiSchema<keyof components['schemas']>;\nexport type OperationKeys = keyof operations;\ntype DataTableFactory<TData extends Schemas> = {\n\tfetchFn: TableFetchFn<TData, OperationKeys>;\n\tcolumns: ColumnDef<TData, any>[]\n\tallowSelection?: boolean;\n\tcolumnsToHideByDefault?: VisibilityState; // Columns that are hidden by default\n\tfilterConfig: FiltersConfig<OperationKeys>\n}\n\n\ntype DataTableState = Pick<TableState, 'sorting' | 'pagination'> & {};\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<TData extends Schemas>({ columns, fetchFn, columnsToHideByDefault = {}, allowSelection = false, filterConfig }: DataTableFactory<TData>) {\n\tconst id = useId();\n\n\tconst [tableState, _setTableState] = useState<DataTableState>({\n\t\t/** TODO Reflect in URL */\n\t\tpagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n\t\tsorting: [], // Sorting state\n\t});\n\n\tconst [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n\n\t/** TODO Reflect in URL */\n\tconst [searchQuery, setSearchQuery] = useState('');\n\n\t/** TODO Store on browser as preference */\n\tconst [columnOrder, setColumnOrder] = useState<ColumnOrderState>([])\n\t// TODO Store on browser\n\tconst [columnVisibility, setColumnVisibility] = useState<VisibilityState>({\n\t\tid: false,\n\t\tupdatedAt: false,\n\t\t...columnsToHideByDefault,\n\t});\n\n\tconst [filters, setFilters] = useState<ApiFilters<OperationKeys>[]>([]);\n\n\tconst mergedFilters = useMemo(() => {\n\t\treturn filters.reduce((acc, current) => {\n\t\t\treturn merge(acc, current);\n\t\t}, {});\n\t}, [filters])\n\n\t// Update table state with new values\n\tconst updateTableState = (updates: Partial<DataTableState>) => {\n\t\t_setTableState((prev) => ({ ...prev, ...updates }));\n\t};\n\n\tconst {\n\t\tsorting,\n\t\tpagination,\n\t} = tableState;\n\n\tconst query = useQuery({\n\t\tqueryKey: [id, pagination, sorting, searchQuery],\n\t\tqueryFn: () => fetchFn(pagination, sorting, searchQuery, mergedFilters),\n\t\tplaceholderData: keepPreviousData, // Keep previous data while loading new data\n\t\tretry: 0,\n\t\trefetchOnWindowFocus: false,\n\t});\n\n\tuseEffect(() => {\n\t\t// TODO, store in localStorage\n\t}, [columnVisibility])\n\n\tconst columnHelper = useMemo(() => createColumnHelper<TData>(), []);\n\n\tconst metadataColumns = useMemo<AccessorFnColumnDef<TData, string>[]>(() => {\n\t\tconst data = query.data?.data;\n\t\tif (!data?.length) return [];\n\n\t\ttype WithMeta = TData & { metadata: ApiSchema<'MetadataDto'>[] };\n\t\tconst rowHasMetadata = (row: TData): row is WithMeta => row != null &&\n\t\t\ttypeof row === 'object' &&\n\t\t\t'metadata' in row &&\n\t\t\tArray.isArray((row).metadata);\n\n\t\tconst rowsWithMeta = data.filter(\n\t\t\trowHasMetadata\n\t\t);\n\t\tif (rowsWithMeta.length === 0) return [];\n\t\tconst keys: string[] = Array.from(new Set(rowsWithMeta.flatMap(r => r.metadata?.map(m => m.key) ?? [])));\n\n\t\treturn keys.map(key =>\n\t\t\tcolumnHelper.accessor(\n\t\t\t\t(row) => {\n\t\t\t\t\tif (rowHasMetadata(row)) {\n\t\t\t\t\t\treturn row?.metadata?.find(m => m.key === key)?.value ?? '';\n\t\t\t\t\t}\n\t\t\t\t\treturn '';\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: key,\n\t\t\t\t\theader: key, // tooltip header\n\t\t\t\t\tenableSorting: false,\n\t\t\t\t\tcell: (info) => {\n\t\t\t\t\t\tconst value = info.getValue();\n\t\t\t\t\t\t// Handle null/undefined values\n\t\t\t\t\t\tif (value === null || value === undefined) return \"\";\n\t\t\t\t\t\t// For primitive types, return the string representation\n\t\t\t\t\t\treturn String(value);\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t));\n\t}, [query.data?.data]);\n\n\t/**\n\t * ID,createdAt and updatedAt will be added by default for all tables\n\t * If selection is allowed, checkbox will be added\n\t * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n\t * If there are actions for the table, they will be placed fixed at the right side of table.\n\t */\n\tconst cols: ColumnDef<any, any>[] = [\n\t\t...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n\t\t...TABLE_ID_COLUMN,\n\t\t...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n\t\t...(metadataColumns.length ? metadataColumns : []),\n\t\t...TABLE_DEFAULT_DATE_COLUMNS,\n\t\t// Actions column\n\t\t...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n\t];\n\n\t// Type-guard for updater\n\tfunction isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n\t\treturn typeof updater === \"function\";\n\t}\n\t// Utility function to resolve updater\n\tfunction resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n\t\tif (isUpdaterFunction(updater)) {\n\t\t\treturn updater(currentValue);\n\t\t}\n\t\treturn updater;\n\t}\n\n\t// Use react-table's hook to create the table instance\n\tconst tanTable = useReactTable({\n\t\tdata: query.data?.data ?? [],\n\t\tcolumns: cols,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\trowCount: query.data?.total,\n\t\tmanualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n\t\tonPaginationChange: (updater) => {\n\t\t\tupdateTableState({ pagination: resolveUpdater(updater, pagination) });\n\t\t},\n\t\tmanualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n\t\tonSortingChange: (updater) => {\n\t\t\tsetRowSelection({});\n\t\t\tupdateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n\t\t},\n\t\tmanualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n\t\tonColumnVisibilityChange: (updater) => {\n\t\t\tsetColumnVisibility(resolveUpdater(updater, columnVisibility));\n\t\t},\n\t\tonRowSelectionChange: (updater) => {\n\t\t\tsetRowSelection(resolveUpdater(updater, rowSelection));\n\t\t},\n\t\tonColumnOrderChange: (updater) => {\n\t\t\tsetColumnOrder(resolveUpdater(updater, columnOrder));\n\t\t},\n\t\tstate: {\n\t\t\tsorting: sorting,\n\t\t\tcolumnVisibility: columnVisibility,\n\t\t\tpagination: pagination,\n\t\t\trowSelection: rowSelection,\n\t\t\tcolumnOrder: columnOrder\n\t\t},\n\t\tmeta: {\n\t\t\trefetch: query.refetch,\n\t\t},\n\t});\n\n\t// By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n\t// This populates the columnIds in the columnOrder state\n\t// TODO, add localStorage access layer for this. \n\tuseEffect(() => {\n\t\tsetColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);\n\t}, [])\n\n\treturn { tableState, updateTableState, query, setSearchQuery, searchQuery, tanTable, mergedFilters, filters, setFilters, filterConfig }\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n\nexport const useDataTable = () => {\n\tconst ctx = useContext(DataTableContext);\n\tif (!ctx) {\n\t\tthrow Error(\"DataTable should be used within DataTableProvider.\")\n\t}\n\treturn ctx;\n}\n\nexport function DataTableProvider({ children, ...props }: { children: React.ReactNode; } & ReturnType<typeof useDataTableState>) {\n\treturn (\n\t\t<DataTableContext.Provider value={props}>\n\t\t\t{children}\n\t\t</DataTableContext.Provider>\n\t)\n}\n\n\nexport type DataTableProps = React.ComponentProps<'section'> & {\n\ttableActions: TableActions;\n\n\t// filterConfig: {\n\t// \tfilters: Record<keyof ApiFilters<TOperation>, 'date' | 'string' | 'known-string' | 'number'>,\n\t// }\n}\nexport function DataTable({\n\ttableActions,\n\tclassName,\n\t...props\n\t// filterableFields,\n}: DataTableProps) {\n\t// State for managing table data and filters\n\tconst { query, tanTable } = useDataTable();\n\n\treturn (\n\t\t<>\n\t\t\t{/* Table Actions Section */}\n\t\t\t<section {...props} className={classNames(\"flex flex-col bg-card\", className)}>\n\t\t\t\t<Actions tableActions={tableActions} />\n\t\t\t\t{/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n\t\t\t\t<div className=\"w-full overflow-auto border-x grow min-h-table relative\" tabIndex={0}>\n\t\t\t\t\t{/* Table overlay with loader */}\n\t\t\t\t\t{query.isLoading && (\n\t\t\t\t\t\t<TableOverlay className=\"cursor-wait\">\n\t\t\t\t\t\t\t<Loader />\n\t\t\t\t\t\t</TableOverlay>\n\t\t\t\t\t)}\n\t\t\t\t\t{/* Table overlay for empty table */}\n\t\t\t\t\t{!query.isLoading && tanTable.getRowModel().rows.length === 0 && (\n\t\t\t\t\t\t// Empty table\n\t\t\t\t\t\t<TableOverlay className=\"cursor-not-allowed\">\n\t\t\t\t\t\t\t{!query.isFetching &&\n\t\t\t\t\t\t\t\t(query.isError ? (\n\t\t\t\t\t\t\t\t\t<span className=\"flex gap-3 justify-center items-center\">\n\t\t\t\t\t\t\t\t\t\t{/* TODO (mudasir-pandith) Check for 403 explicitly!! */}\n\t\t\t\t\t\t\t\t\t\t{/* <span>{query.error}</span> */}\n\t\t\t\t\t\t\t\t\t\t<Info />\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\tYou don't have the required permissions. Please contact your\n\t\t\t\t\t\t\t\t\t\t\tadmin.\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : !query.data?.data ? (\n\t\t\t\t\t\t\t\t\t<>No results found.</>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<>Unknown error. Please contact customer support.</>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</TableOverlay>\n\t\t\t\t\t)}\n\t\t\t\t\t{!query.isLoading && tanTable.getRowModel().rows.length !== 0 &&\n\t\t\t\t\t\t<TableContent className=\"size-full\" />}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Table Footer Section with Pagination and Column Picker */}\n\t\t\t\t<div className=\"flex w-full justify-between border gap-icon p-icon overflow-x-auto\">\n\t\t\t\t\t<div className=\"flex gap-icon\">\n\t\t\t\t\t\t<ColumnPicker />\n\t\t\t\t\t\t<PageSize />\n\t\t\t\t\t</div>\n\t\t\t\t\t<Paginator />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n/** Table overlay to be shown for loaders or other messages */\nfunction TableOverlay({\n\tchildren,\n\tclassName,\n}: { children: React.ReactNode; className?: string }) {\n\treturn (\n\t\t<>\n\t\t\t<span\n\t\t\t\tclassName={classNames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t\"absolute top-0 bg-card z-20 size-full text-sm flex items-center justify-center\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t\t{/* Keep something in document flow with the correct height */}\n\t\t\t<span className=\"relative h-full w-0 block\" />\n\t\t</>\n\t);\n}\n\nimport {\n\tarrayMove,\n\tSortableContext,\n\tsortableKeyboardCoordinates,\n\tuseSortable,\n\tverticalListSortingStrategy\n} from '@dnd-kit/sortable';\n\nfunction ColumnPicker() {\n\tconst { tanTable } = useDataTable();\n\tconst [activeId, setActiveId] = useState<string | null>(null);\n\n\tconst resourceFormatter = useResourceFormatter();\n\n\tconst sensors = useSensors(\n\t\tuseSensor(PointerSensor),\n\t\tuseSensor(KeyboardSensor, {\n\t\t\tcoordinateGetter: sortableKeyboardCoordinates,\n\t\t})\n\t);\n\treturn (\n\t\t<DndContext\n\t\t\tsensors={sensors}\n\t\t\tcollisionDetection={closestCenter}\n\t\t\tonDragStart={(event) => {\n\t\t\t\tconst { active } = event;\n\t\t\t\tsetActiveId(active.id.toString());\n\t\t\t}}\n\t\t\tonDragEnd={(event) => {\n\t\t\t\tconst { active, over } = event;\n\n\t\t\t\tif (over && active.id !== over.id) {\n\t\t\t\t\tconst columnOrder = tanTable.getState().columnOrder;\n\t\t\t\t\tconst oldIndex = columnOrder.indexOf(active.id.toString());\n\t\t\t\t\tconst newIndex = columnOrder.indexOf(over.id.toString());\n\t\t\t\t\ttanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);\n\t\t\t\t}\n\n\t\t\t\tsetActiveId(null);\n\t\t\t}}\n\t\t>\n\t\t\t<SortableContext\n\t\t\t\titems={tanTable.getState().columnOrder}\n\t\t\t\tstrategy={verticalListSortingStrategy}\n\t\t\t>\n\t\t\t\t<EasyMenu label={<><Columns3 />Columns</>} selectionMode=\"multiple\" items={tanTable.getAllFlatColumns()} selectedKeys={tanTable.getIsAllColumnsVisible() ? 'all' : tanTable.getVisibleFlatColumns().map(c => c.id)}>\n\t\t\t\t\t<MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>(select all)</MenuItem>\n\t\t\t\t\t{tanTable.getState().columnOrder.map(colId => {\n\t\t\t\t\t\tconst col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n\t\t\t\t\t\tif (!col) return null;\n\t\t\t\t\t\treturn <SortableItem key={col.id} column={col} />\n\t\t\t\t\t})}\n\t\t\t\t</EasyMenu>\n\t\t\t\t<DragOverlay>\n\t\t\t\t\t{activeId ? <div className=\"opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div> : null}\n\t\t\t\t</DragOverlay>\n\t\t\t</SortableContext>\n\t\t</DndContext>\n\t);\n\n\n\tfunction SortableItem({ column }: { column: Column<any, unknown> }) {\n\t\tconst {\n\t\t\tattributes,\n\t\t\tlisteners,\n\t\t\tsetNodeRef,\n\t\t\ttransform,\n\t\t\ttransition,\n\t\t} = useSortable({ id: column.id });\n\t\tconst style = {\n\t\t\ttransform: CSS.Transform.toString(transform),\n\t\t\ttransition,\n\t\t\tzIndex: '999'\n\t\t};\n\t\treturn <MenuItem\n\t\t\tref={setNodeRef}\n\t\t\tstyle={style}\n\t\t\t{...attributes}\n\t\t\tid={column.id}\n\t\t\tonAction={() => column.toggleVisibility()}\n\t\t\tisDisabled={!column.getCanHide()} className=\"flex items-center\">\n\t\t\t<GripVertical {...listeners} className=\"size-icon cursor-grab\" />\n\t\t\t{resourceFormatter(column.id)}\n\t\t\t{column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n\t\t</MenuItem>;\n\t}\n}\n\n\n\nimport {\n\tChevronFirst,\n\tChevronLast,\n\tChevronLeft,\n\tChevronRight,\n} from \"lucide-react\";\n\nfunction Paginator() {\n\tconst { tanTable, query } = useDataTable();\n\tconst rowCount = query.data?.total ?? 0\n\treturn (\n\t\t<div className=\"flex items-center gap-2\">\n\t\t\t<span className=\"whitespace-nowrap caption text-muted\">\n\t\t\t\t{`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n\t\t\t\t\t(tanTable.getState().pagination.pageIndex + 1) *\n\t\t\t\t\ttanTable.getState().pagination.pageSize,\n\t\t\t\t\trowCount,\n\t\t\t\t)} of ${rowCount?.toLocaleString()}`}\n\t\t\t</span>\n\n\t\t\t<Button\n\t\t\t\tonPress={() => tanTable.firstPage()}\n\t\t\t\tisDisabled={!tanTable.getCanPreviousPage()}\n\t\t\t\tvariant=\"neutral\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t><ChevronFirst /></Button>\n\t\t\t<Button\n\t\t\t\tonPress={() => tanTable.previousPage()}\n\t\t\t\tisDisabled={!tanTable.getCanPreviousPage()}\n\t\t\t\tvariant=\"neutral\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t><ChevronLeft /></Button>\n\t\t\t<Button\n\t\t\t\tonPress={() => tanTable.nextPage()}\n\t\t\t\tisDisabled={!tanTable.getCanNextPage()}\n\t\t\t\tvariant=\"neutral\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t><ChevronRight /></Button>\n\t\t\t<Button\n\t\t\t\tonClick={() => tanTable.lastPage()}\n\t\t\t\tisDisabled={!tanTable.getCanNextPage()}\n\t\t\t\tvariant=\"neutral\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t><ChevronLast /></Button>\n\t\t</div>\n\t);\n}\n\n\nfunction PageSize() {\n\tconst { tanTable } = useDataTable();\n\tconst PAGE_SIZES = [10, 20, 30, 40, 50];\n\n\treturn (\n\t\t<EasyMenu label={tanTable.getState().pagination.pageSize.toString()} selectionMode=\"single\" selectedKeys={[tanTable.getState().pagination.pageSize.toString()]} items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}>\n\t\t\t{\n\t\t\t\t(items) => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>\n\t\t\t}\n\t\t</EasyMenu>\n\t);\n}\n\n\nimport { RotateCw } from \"lucide-react\";\n\nfunction Actions({ tableActions }: { tableActions: TableActions }) {\n\tconst { query, tanTable, searchQuery, setSearchQuery } = useDataTable();\n\n\treturn (\n\t\t<section className=\"flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto\">\n\t\t\t<div className=\"flex gap-icon\">\n\t\t\t\t<Button\n\t\t\t\t\tisPending={query.isFetching}\n\t\t\t\t\tonClick={() => query.refetch()}\n\t\t\t\t\tvariant={\"neutral\"}\n\t\t\t\t\tsize={\"icon\"}\n\t\t\t\t><RotateCw /></Button>\n\n\t\t\t\t{tableActions\n\t\t\t\t\t.filter(ta => ta.bulk === tanTable.getSelectedRowModel().rows.length > 0)\n\t\t\t\t\t.map((ta, i) => {\n\t\t\t\t\t\tconst Icon = ta.icon;\n\t\t\t\t\t\treturn (<Button key={`${i}-${ta.bulk}`} type=\"button\" isDisabled={query.isFetching} className=\"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform\" onPress={(e) => { ta.onClick(e, tanTable) }} size={'icon'}><Icon /></Button>)\n\t\t\t\t\t}\n\t\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"flex gap-icon\">\n\t\t\t\t<DataTableFilter />\n\t\t\t\t{(\n\t\t\t\t\t<SearchField value={searchQuery} onChange={setSearchQuery} />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\n\nimport { closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors } from \"@dnd-kit/core\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport {\n\tflexRender\n} from \"@tanstack/react-table\";\nimport { Button } from \"lib/components/button\";\nimport { type ApiFilters, type ApiSchema, TABLE_CHECK_BOX_COLUMN, TABLE_DEFAULT_DATE_COLUMNS, TABLE_ID_COLUMN, type TableActions, type TableFetchFn } from \"lib/components/data-table-commons\";\nimport { DataTableFilter, type FiltersConfig } from \"lib/components/data-table-filter\";\nimport { Loader } from \"lib/components/loader\";\nimport { EasyMenu, MenuItem } from \"lib/components/menu\";\nimport { SearchField } from \"lib/components/searchfield\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"lib/components/table\";\nimport { classNames } from \"lib/utils/primitives\";\nimport { useResourceFormatter } from \"lib/utils/resource-names\";\nimport { merge } from \"lodash-es\";\n\nfunction SortIcon({ direction, ...props }: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n\tif (direction === 'asc') return <ArrowDownNarrowWide {...props} />\n\telse if (direction === 'desc') return <ArrowDownWideNarrow {...props} />\n\telse return <ArrowUpDown {...props} />\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n\tconst { tanTable } = useDataTable();\n\tconst tableCellStyle = (isSticky: boolean, className?: string) => classNames(\"animate-in fade-in slide-in-from-top-10\", \"px-icon py-2 text-left text-sm font-medium whitespace-nowrap\", isSticky && \"bg-card sticky right-0 z-50 text-center\", className)\n\treturn (\n\t\t<TableComponent className={classNames(className)}>\n\t\t\t<TableHeader className=\"sticky top-0 z-10\">\n\t\t\t\t{tanTable.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t<TableRow className={classNames(\"h-input\")} key={headerGroup.id}>\n\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\tclassName={tableCellStyle(false, \"bg-card\")}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{!header.column.getCanSort() && !header.isPlaceholder\n\t\t\t\t\t\t\t\t\t&& <>{flexRender(\n\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t)}</>}\n\t\t\t\t\t\t\t\t{/* TODO Align header text with table text */}\n\t\t\t\t\t\t\t\t{header.column.getCanSort() && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-full !justify-start !px-1.5\"\n\t\t\t\t\t\t\t\t\t\tonPress={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t<SortIcon direction={header.column.getIsSorted()} />\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableHeader>\n\t\t\t<TableBody className=\"flex-1 overflow-y-auto relative\">\n\t\t\t\t{tanTable.getRowModel().rows.map((row) => (\n\t\t\t\t\t<TableRow\n\t\t\t\t\t\tclassName={classNames(\"h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20\")}\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\tdata-selected={row.getIsSelected()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\tclassName={tableCellStyle(cell.column.id === ACTIONS_COLUMN_ID)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableBody>\n\t\t</TableComponent>\n\t);\n}\n","\"use client\"\nimport type { CalendarDateTime } from \"@internationalized/date\";\nimport { Button } from \"lib/components/button\";\nimport { useDataTable, type OperationKeys } from \"lib/components/data-table\";\nimport { type ApiFilters } from \"lib/components/data-table-commons\";\nimport { TfDatePicker } from \"lib/components/date-picker\";\nimport { TfIdSearchInput } from \"lib/components/id-search\";\nimport { EasyMenu, MenuItem } from \"lib/components/menu\";\nimport type { MultiSelectProps } from \"lib/components/multi-select\";\nimport { Popover, PopoverTrigger } from \"lib/components/popover\";\nimport { useAppForm } from \"lib/utils/form-hook\";\nimport { classNames } from \"lib/utils/primitives\";\nimport { useResourceFormatter } from \"lib/utils/resource-names\";\nimport { Filter, Trash } from \"lucide-react\";\nimport { useRef } from \"react\";\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 =\n (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<\n FilterComparisonOperator,\n string\n> = {\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\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 DateLocalFilter = BaseLocalFilter<'date', CalendarDateTime>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', Set<string | number>>;\n\ntype LocalFilter = EnumLocalFilter\n | IdLocalFilter\n | BoolLocalFilter\n | StringLocalFilter\n | DateLocalFilter\n | IdSearchLocalFilter;\n\nexport type FilterConfig =\n | { type: 'enum'; options: MultiSelectProps['items'] }\n | { type: 'id-search'; search: () => Promise<{ id: string; name: string }[]> }\n | { type: 'id' }\n | { type: 'bool' }\n | { type: 'string' }\n | { type: 'date' }\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}\n\nexport type FiltersConfig<TOperation extends OperationKeys> = Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n const { filters, query, setFilters, filterConfig } = useDataTable();\n // TODO @mudasirpandith add focus\n // const localFilterRefs = useRef([]);\n const addFilterButtonRef = useRef<HTMLButtonElement>(null);\n\n const resourceFormatter = useResourceFormatter();\n\n const DEFAULT_VALUES: { filters: LocalFilter[] } = {\n // TODO, initialize with filters from tableState\n filters: []\n };\n const form = useAppForm({\n defaultValues: DEFAULT_VALUES,\n onSubmit: ({ value }) => {\n // TODO, instead of generic transformation, use type based tranform()\n setFilters(value.filters.map(lf => { return { [lf.property]: { [lf.operator]: [lf.value] } } }))\n }\n })\n\n // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870\n const filterKeys = Object.keys(filterConfig).sort();\n\n return (\n <section {...props} className={classNames(\"flex gap-icon items-center\", className)}>\n <PopoverTrigger onOpenChange={(o) => {\n // Set filters when the popover closes\n if (!o) {\n form.handleSubmit();\n } else {\n addFilterButtonRef.current?.focus();\n }\n }}>\n <Button active={filters.length > 0} isDisabled={query.isPending || filterKeys.length === 0} type=\"button\" size={'icon'} variant={'neutral'}><Filter /></Button>\n {/* TODO, icon maps with dynamic imports? */}\n {/* TODO open popover with form for property specific filter */}\n {/* TODO, icons here??? */}\n <Popover className=\"w-full p-icon\">\n {/* const h3Styles = \"body mb-icon text-muted-foreground\"; */}\n {/* <h3 className={h3Styles}>{isFiltersActive ? \"Active filters\" : \"Add filters\"}</h3> */}\n <form onSubmit={(e) => { e.preventDefault(); }} className=\"flex flex-col gap-icon max-h-table overflow-auto \">\n <form.Field mode=\"array\" name={\"filters\"}>\n {\n (field) => {\n return <>\n {field.state.value.map((lf, i) => {\n return (\n <div key={lf.id} className=\"flex gap-icon items-center justify-normal\">\n <span className=\"text-sm\">{resourceFormatter(lf.property)}</span>\n <form.AppField\n key={lf.id}\n name={`filters[${i}].operator`}\n >\n {(sf) => (<sf.TfSingleSelect items={FilterOperations[lf.type].map(op => ({ id: op, label: <>{COMPARISON_OPERATOR_LABELS[op]}</> }))} />)}\n </form.AppField>\n\n {lf.type === 'bool' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfCheckbox />)}</form.AppField>}\n {lf.type === 'date' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfDatePicker />)}</form.AppField>}\n {lf.type === 'id' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}\n {lf.type === 'string' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}\n {/* TODO fix @mudasirpandith */}\n {/* @ts-ignore */}\n {lf.type === 'enum' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfMultiSelect items={filterConfig[lf.property].options} />)}</form.AppField>}\n {/* TODO fix @mudasirpandith */}\n {/* @ts-ignore */}\n {lf.type === 'id-search' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfIdSearchInput multiple accessor=\"id\" searchFn={filterConfig[lf.property].search} />)}</form.AppField>}\n\n <Button type=\"button\" variant=\"destructive\" size=\"icon\" onPress={() => field.removeValue(i)}><Trash /></Button>\n </div>\n )\n })}\n <div className=\"flex w-full items-center justify-end gap-2 not-first:mt-icon\">\n <EasyMenu label=\"Add Filter\">\n {filterKeys.map(k => <MenuItem key={k} onAction={() => {\n // TODO @mudasirpandith\n //@ts-ignore\n const type = filterConfig[k].type as FilterType;\n\n const defaultValue = (t: FilterType) => {\n // TODO, ensure exhaustive???\n // @mudasirpandith\n switch (t) {\n case 'bool':\n return true;\n case 'string':\n return '';\n case 'date':\n return new Date().toISOString();\n case 'id':\n return '';\n case 'id-search':\n return [] as string[];\n case 'enum':\n return [] as string[];\n }\n }\n\n const newFilter: LocalFilter = {\n id: `${k}-${Date.now()}`,\n operator: FilterOperations[type][0],\n //@ts-ignore\n value: defaultValue(type),\n type: type,\n property: k,\n };\n\n field.pushValue(newFilter);\n // TODO Focus to ref\n\n }}>{resourceFormatter(k)}</MenuItem>)}\n </EasyMenu>\n {field.state.value.length > 0 ? (\n <Button\n type=\"button\"\n variant=\"neutral\"\n onPress={() => { field.setValue([]) }}\n >\n Reset filters\n </Button>\n ) : null}\n </div>\n </>\n }\n }\n </form.Field >\n </form>\n </Popover>\n </PopoverTrigger>\n </section>\n );\n};"],"names":["ACTIONS_COLUMN_ID","useDataTableState","columns","fetchFn","columnsToHideByDefault","allowSelection","filterConfig","id","useId","tableState","_setTableState","useState","rowSelection","setRowSelection","searchQuery","setSearchQuery","columnOrder","setColumnOrder","columnVisibility","setColumnVisibility","filters","setFilters","mergedFilters","useMemo","acc","current","merge","updateTableState","updates","prev","sorting","pagination","query","useQuery","keepPreviousData","useEffect","columnHelper","createColumnHelper","metadataColumns","data","rowHasMetadata","row","rowsWithMeta","r","m","key","info","value","cols","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","tableActions","className","jsx","Fragment","classNames","Actions","jsxs","TableOverlay","Loader","Info","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","Columns3","MenuItem","colId","SortableItem","DragOverlay","column","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","GripVertical","SortIcon","rowCount","Button","ChevronFirst","ChevronLeft","ChevronRight","ChevronLast","PAGE_SIZES","s","items","RotateCw","ta","i","Icon","e","DataTableFilter","SearchField","direction","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","tableCellStyle","isSticky","TableComponent","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","cell","TableCell","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","FilterOperations","addFilterButtonRef","useRef","form","useAppForm","lf","filterKeys","PopoverTrigger","o","Filter","Popover","field","sf","op","_","TfDatePicker","TfIdSearchInput","Trash","k","type","defaultValue","t","newFilter"],"mappings":"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"}
package/dist/components/menu.js CHANGED
@@ -1,2 +1,2 @@
1
- import{jsxs as s,jsx as o,Fragment as m}from"react/jsx-runtime";import{MenuTrigger as l,MenuItem as p,composeRenderProps as u,Menu as d,SubmenuTrigger as f,Header as g,Separator as x,Keyboard as b}from"react-aria-components";import{classNames as a}from"../utils/primitives.js";import{Dot as M,Check as h,ChevronRight as N}from"lucide-react";import{Button as y}from"./button.js";import{ListBoxCollection as v}from"./list-box.js";import{SelectPopover as S}from"./select.js";import"clsx";import"class-variance-authority";import"./loader.js";import"./field.js";import"../utils/form-context.js";import"@tanstack/react-form";import"./popover.js";const T=l,L=f,q=v;function _({className:e,...t}){return o(S,{className:u(e,n=>a(n)),...t})}function z({className:e,...t}){return o(d,{className:a("overflow-auto p-1 outline-0 [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]",e),escapeKeyBehavior:"none",...t})}function A({children:e,className:t,...n}){return o(p,{textValue:n.textValue||(typeof e=="string"?e:void 0),className:u(t,r=>a("relative flex cursor-default select-none items-center gap-2 px-2 py-1.5 text-sm outline-none transition-colors","disabled-muted","data-[focused]:bg-accent data-[focused]:text-accent-foreground ","data-[selection-mode]:pl-input",r)),...n,children:u(e,(r,i)=>s(m,{children:[o("span",{className:"absolute left-2 flex size-icon items-center justify-center",children:i.isSelected&&s(m,{children:[i.selectionMode=="single"&&o(M,{className:"size-icon fill-current"}),i.selectionMode=="multiple"&&o(h,{className:"size-icon"})]})}),r,i.hasSubmenu&&o(N,{className:"ml-auto size-icon"})]}))})}function G({className:e,inset:t,separator:n=!0,...r}){return o(g,{className:a("px-3 py-1.5 text-sm font-semibold",t&&"pl-input",n&&"-mx-1 mb-1 border-b border-b-border pb-2.5",e),...r})}function J({className:e,...t}){return o(x,{className:a("-mx-1 my-1 h-px bg-muted",e),...t})}function O({className:e,...t}){return o(b,{className:a("ml-auto text-xs tracking-widest opacity-60",e),...t})}function P({label:e,children:t,variant:n,isDisabled:r,size:i,...c}){return s(T,{...c,children:[o(y,{isDisabled:r,type:"button",variant:n,size:i,children:e}),o(_,{className:"overflow-auto",children:o(z,{...c,children:t})})]})}export{P as EasyMenu,z as Menu,q as MenuCollection,G as MenuHeader,A as MenuItem,O as MenuKeyboard,_ as MenuPopover,J as MenuSeparator,L as MenuSubTrigger,T as MenuTrigger};
1
+ import{jsxs as s,jsx as o,Fragment as c}from"react/jsx-runtime";import{MenuTrigger as l,MenuItem as p,composeRenderProps as u,Menu as f,SubmenuTrigger as d,Header as b,Separator as M,Keyboard as g}from"react-aria-components";import{classNames as a}from"../utils/primitives.js";import{Dot as x,Check as h,ChevronRight as N}from"lucide-react";import{Button as y}from"./button.js";import{ListBoxCollection as v}from"./list-box.js";import{SelectPopover as S}from"./select.js";import"clsx";import"class-variance-authority";import"./loader.js";import"./field.js";import"../utils/form-context.js";import"@tanstack/react-form";import"./popover.js";const T=l,L=d,q=v;function _({className:e,...t}){return o(S,{className:u(e,n=>a(n)),...t})}function j({className:e,...t}){return o(f,{className:a("overflow-auto p-1 outline-0 [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]",e),escapeKeyBehavior:"none",...t})}function A({children:e,className:t,...n}){return o(p,{textValue:n.textValue||(typeof e=="string"?e:void 0),className:u(t,r=>a("btn btn-ghost relative flex justify-start input-dim","data-[selection-mode]:pl-input",r)),...n,children:u(e,(r,i)=>s(c,{children:[o("span",{className:"absolute left-2 flex size-icon items-center justify-center",children:i.isSelected&&s(c,{children:[i.selectionMode=="single"&&o(x,{className:"size-icon fill-current"}),i.selectionMode=="multiple"&&o(h,{className:"size-icon"})]})}),r,i.hasSubmenu&&o(N,{className:"ml-auto size-icon"})]}))})}function G({className:e,inset:t,separator:n=!0,...r}){return o(b,{className:a("px-3 py-1.5 text-sm font-semibold",t&&"pl-input",n&&"-mx-1 mb-1 border-b border-b-border pb-2.5",e),...r})}function J({className:e,...t}){return o(M,{className:a("-mx-1 my-1 h-px bg-muted",e),...t})}function O({className:e,...t}){return o(g,{className:a("ml-auto text-xs tracking-widest opacity-60",e),...t})}function P({label:e,children:t,variant:n,isDisabled:r,size:i,...m}){return s(T,{...m,children:[o(y,{isDisabled:r,type:"button",variant:n,size:i,children:e}),o(_,{className:"overflow-auto",children:o(j,{...m,children:t})})]})}export{P as EasyMenu,j as Menu,q as MenuCollection,G as MenuHeader,A as MenuItem,O as MenuKeyboard,_ as MenuPopover,J as MenuSeparator,L as MenuSubTrigger,T as MenuTrigger};
2
2
  //# sourceMappingURL=menu.js.map
package/dist/components/menu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu.js","sources":["../../lib/components/menu.tsx"],"sourcesContent":["import { VariantProps } from \"class-variance-authority\"\nimport {\n Header as AriaHeader,\n Keyboard as AriaKeyboard,\n Menu as AriaMenu,\n MenuItem as AriaMenuItem,\n MenuItemProps as AriaMenuItemProps,\n MenuProps as AriaMenuProps,\n MenuTrigger as AriaMenuTrigger,\n MenuTriggerProps as AriaMenuTriggerProps,\n Separator as AriaSeparator,\n SeparatorProps as AriaSeparatorProps,\n SubmenuTrigger as AriaSubmenuTrigger,\n composeRenderProps,\n PopoverProps,\n} from \"react-aria-components\"\n\nimport { classNames } from \"lib/utils/primitives\"\n\nimport { Check, ChevronRight, Dot } from \"lucide-react\"\nimport { Button, buttonVariants } from \"./button\"\nimport { ListBoxCollection } from \"./list-box\"\nimport { SelectPopover } from \"./select\"\n\nexport const MenuTrigger = AriaMenuTrigger\nexport const MenuSubTrigger = AriaSubmenuTrigger\nexport const MenuCollection = ListBoxCollection\n\nexport function MenuPopover({ className, ...props }: PopoverProps) {\n return (\n <SelectPopover\n className={composeRenderProps(className, (className) =>\n classNames(className)\n )}\n {...props}\n />\n )\n}\n\nexport function Menu<T extends object>({ className, ...props }: AriaMenuProps<T>) {\n return (\n <AriaMenu\n className={classNames(\n \"overflow-auto p-1 outline-0 [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]\",\n className\n )}\n escapeKeyBehavior=\"none\"\n {...props}\n />\n )\n}\n\n// TODO standardize the styles on this component? This is the equivalent to a ghost button\nexport function MenuItem({ children, className, ...props }: AriaMenuItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n return (\n <AriaMenuItem\n textValue={\n props.textValue || (typeof children === \"string\" ? children : undefined)\n }\n className={composeRenderProps(className, (className) =>\n classNames(\n \"relative flex cursor-default select-none items-center gap-2 px-2 py-1.5 text-sm outline-none transition-colors\",\n /* Disabled */\n \"disabled-muted\",\n /* Focused */\n \"data-[focused]:bg-accent data-[focused]:text-accent-foreground \",\n /* Selection Mode */\n \"data-[selection-mode]:pl-input\",\n className\n )\n )}\n {...props}\n >\n {composeRenderProps(children, (children, renderProps) => (\n <>\n <span className=\"absolute left-2 flex size-icon items-center justify-center\">\n {renderProps.isSelected && (\n <>\n {renderProps.selectionMode == \"single\" && (\n <Dot className=\"size-icon fill-current\" />\n )}\n {renderProps.selectionMode == \"multiple\" && (\n <Check className=\"size-icon\" />\n )}\n </>\n )}\n </span>\n\n {children}\n\n {renderProps.hasSubmenu && <ChevronRight className=\"ml-auto size-icon\" />}\n </>\n ))}\n </AriaMenuItem>\n )\n}\n\ninterface MenuHeaderProps extends React.ComponentProps<typeof AriaHeader> {\n inset?: boolean\n separator?: boolean\n}\n\nexport function MenuHeader({\n className,\n inset,\n separator = true,\n ...props\n}: MenuHeaderProps) {\n return (\n <AriaHeader\n className={classNames(\n \"px-3 py-1.5 text-sm font-semibold\",\n inset && \"pl-input\",\n separator && \"-mx-1 mb-1 border-b border-b-border pb-2.5\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport function MenuSeparator({ className, ...props }: AriaSeparatorProps) {\n return (\n <AriaSeparator\n className={classNames(\"-mx-1 my-1 h-px bg-muted\", className)}\n {...props}\n />\n )\n}\n\nexport function MenuKeyboard({\n className,\n ...props\n}: React.ComponentProps<typeof AriaKeyboard>) {\n return (\n <AriaKeyboard\n className={classNames(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n {...props}\n />\n )\n}\ninterface MenuProps<T>\n extends AriaMenuProps<T>,\n VariantProps<typeof buttonVariants>,\n Omit<AriaMenuTriggerProps, \"children\"> {\n label?: React.ReactNode\n isDisabled?: boolean\n}\n// TODO name this better\nexport function EasyMenu<T extends object>({\n label,\n children,\n variant,\n isDisabled,\n size,\n ...props\n}: MenuProps<T>) {\n return (\n <MenuTrigger {...props}>\n <Button isDisabled={isDisabled} type=\"button\" variant={variant} size={size}>\n {label}\n </Button>\n <MenuPopover className=\"overflow-auto\">\n <Menu {...props}>{children}</Menu>\n </MenuPopover>\n </MenuTrigger>\n )\n}\n"],"names":["MenuTrigger","AriaMenuTrigger","MenuSubTrigger","AriaSubmenuTrigger","MenuCollection","ListBoxCollection","MenuPopover","className","props","jsx","SelectPopover","composeRenderProps","classNames","Menu","AriaMenu","MenuItem","children","AriaMenuItem","renderProps","jsxs","Fragment","Dot","Check","ChevronRight","MenuHeader","inset","separator","AriaHeader","MenuSeparator","AriaSeparator","MenuKeyboard","AriaKeyboard","EasyMenu","label","variant","isDisabled","size","Button"],"mappings":"goBAwBO,MAAMA,EAAcC,EACdC,EAAiBC,EACjBC,EAAiBC,EAEvB,SAASC,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAAuB,CACjE,OACEC,EAACC,EAAA,CACC,UAAWC,EAAmBJ,EAAYA,GACxCK,EAAWL,CAAS,CAAA,EAErB,GAAGC,CAAA,CAAA,CAGV,CAEO,SAASK,EAAuB,CAAE,UAAAN,EAAW,GAAGC,GAA2B,CAChF,OACEC,EAACK,EAAA,CACC,UAAWF,EACT,uFACAL,CAAA,EAEF,kBAAkB,OACjB,GAAGC,CAAA,CAAA,CAGV,CAGO,SAASO,EAAS,CAAE,SAAAC,EAAU,UAAAT,EAAW,GAAGC,GAAkE,CACnH,OACEC,EAACQ,EAAA,CACC,UACET,EAAM,YAAc,OAAOQ,GAAa,SAAWA,EAAW,QAEhE,UAAWL,EAAmBJ,EAAYA,GACxCK,EACE,iHAEA,iBAEA,kEAEA,iCACAL,CAAA,CACF,EAED,GAAGC,EAEH,SAAAG,EAAmBK,EAAU,CAACA,EAAUE,IACvCC,EAAAC,EAAA,CACE,SAAA,CAAAX,EAAC,OAAA,CAAK,UAAU,6DACb,SAAAS,EAAY,YACXC,EAAAC,EAAA,CACG,SAAA,CAAAF,EAAY,eAAiB,UAC5BT,EAACY,EAAA,CAAI,UAAU,yBAAyB,EAEzCH,EAAY,eAAiB,YAC5BT,EAACa,EAAA,CAAM,UAAU,WAAA,CAAY,CAAA,CAAA,CAEjC,CAAA,CAEJ,EAECN,EAEAE,EAAY,YAAcT,EAACc,EAAA,CAAa,UAAU,mBAAA,CAAoB,CAAA,EACzE,CACD,CAAA,CAAA,CAGP,CAOO,SAASC,EAAW,CACzB,UAAAjB,EACA,MAAAkB,EACA,UAAAC,EAAY,GACZ,GAAGlB,CACL,EAAoB,CAClB,OACEC,EAACkB,EAAA,CACC,UAAWf,EACT,oCACAa,GAAS,WACTC,GAAa,6CACbnB,CAAA,EAED,GAAGC,CAAA,CAAA,CAGV,CAEO,SAASoB,EAAc,CAAE,UAAArB,EAAW,GAAGC,GAA6B,CACzE,OACEC,EAACoB,EAAA,CACC,UAAWjB,EAAW,2BAA4BL,CAAS,EAC1D,GAAGC,CAAA,CAAA,CAGV,CAEO,SAASsB,EAAa,CAC3B,UAAAvB,EACA,GAAGC,CACL,EAA8C,CAC5C,OACEC,EAACsB,EAAA,CACC,UAAWnB,EAAW,6CAA8CL,CAAS,EAC5E,GAAGC,CAAA,CAAA,CAGV,CASO,SAASwB,EAA2B,CACzC,MAAAC,EACA,SAAAjB,EACA,QAAAkB,EACA,WAAAC,EACA,KAAAC,EACA,GAAG5B,CACL,EAAiB,CACf,OACEW,EAACnB,EAAA,CAAa,GAAGQ,EACf,SAAA,CAAAC,EAAC4B,GAAO,WAAAF,EAAwB,KAAK,SAAS,QAAAD,EAAkB,KAAAE,EAC7D,SAAAH,EACH,EACAxB,EAACH,GAAY,UAAU,gBACrB,WAACO,EAAA,CAAM,GAAGL,EAAQ,SAAAQ,CAAA,CAAS,CAAA,CAC7B,CAAA,EACF,CAEJ"}
1
+ {"version":3,"file":"menu.js","sources":["../../lib/components/menu.tsx"],"sourcesContent":["import { VariantProps } from \"class-variance-authority\"\nimport {\n Header as AriaHeader,\n Keyboard as AriaKeyboard,\n Menu as AriaMenu,\n MenuItem as AriaMenuItem,\n MenuItemProps as AriaMenuItemProps,\n MenuProps as AriaMenuProps,\n MenuTrigger as AriaMenuTrigger,\n MenuTriggerProps as AriaMenuTriggerProps,\n Separator as AriaSeparator,\n SeparatorProps as AriaSeparatorProps,\n SubmenuTrigger as AriaSubmenuTrigger,\n composeRenderProps,\n PopoverProps,\n} from \"react-aria-components\"\n\nimport { classNames } from \"lib/utils/primitives\"\n\nimport { Check, ChevronRight, Dot } from \"lucide-react\"\nimport { Button, buttonVariants } from \"./button\"\nimport { ListBoxCollection } from \"./list-box\"\nimport { SelectPopover } from \"./select\"\n\nexport const MenuTrigger = AriaMenuTrigger\nexport const MenuSubTrigger = AriaSubmenuTrigger\nexport const MenuCollection = ListBoxCollection\n\nexport function MenuPopover({ className, ...props }: PopoverProps) {\n return (\n <SelectPopover\n className={composeRenderProps(className, (className) =>\n classNames(className)\n )}\n {...props}\n />\n )\n}\n\nexport function Menu<T extends object>({ className, ...props }: AriaMenuProps<T>) {\n return (\n <AriaMenu\n className={classNames(\n \"overflow-auto p-1 outline-0 [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]\",\n className\n )}\n escapeKeyBehavior=\"none\"\n {...props}\n />\n )\n}\n\n// TODO standardize the styles on this component? This is the equivalent to a ghost button\nexport function MenuItem({ children, className, ...props }: AriaMenuItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n return (\n <AriaMenuItem\n textValue={\n props.textValue || (typeof children === \"string\" ? children : undefined)\n }\n className={composeRenderProps(className, (className) =>\n classNames(\n \"btn btn-ghost relative flex justify-start input-dim\",\n /* Selection Mode */\n \"data-[selection-mode]:pl-input\",\n className\n )\n )}\n {...props}\n >\n {composeRenderProps(children, (children, renderProps) => (\n <>\n <span className=\"absolute left-2 flex size-icon items-center justify-center\">\n {renderProps.isSelected && (\n <>\n {renderProps.selectionMode == \"single\" && (\n <Dot className=\"size-icon fill-current\" />\n )}\n {renderProps.selectionMode == \"multiple\" && (\n <Check className=\"size-icon\" />\n )}\n </>\n )}\n </span>\n\n {children}\n\n {renderProps.hasSubmenu && <ChevronRight className=\"ml-auto size-icon\" />}\n </>\n ))}\n </AriaMenuItem>\n )\n}\n\ninterface MenuHeaderProps extends React.ComponentProps<typeof AriaHeader> {\n inset?: boolean\n separator?: boolean\n}\n\nexport function MenuHeader({\n className,\n inset,\n separator = true,\n ...props\n}: MenuHeaderProps) {\n return (\n <AriaHeader\n className={classNames(\n \"px-3 py-1.5 text-sm font-semibold\",\n inset && \"pl-input\",\n separator && \"-mx-1 mb-1 border-b border-b-border pb-2.5\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport function MenuSeparator({ className, ...props }: AriaSeparatorProps) {\n return (\n <AriaSeparator\n className={classNames(\"-mx-1 my-1 h-px bg-muted\", className)}\n {...props}\n />\n )\n}\n\nexport function MenuKeyboard({\n className,\n ...props\n}: React.ComponentProps<typeof AriaKeyboard>) {\n return (\n <AriaKeyboard\n className={classNames(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n {...props}\n />\n )\n}\ninterface MenuProps<T>\n extends AriaMenuProps<T>,\n VariantProps<typeof buttonVariants>,\n Omit<AriaMenuTriggerProps, \"children\"> {\n label?: React.ReactNode\n isDisabled?: boolean\n}\n// TODO name this better\nexport function EasyMenu<T extends object>({\n label,\n children,\n variant,\n isDisabled,\n size,\n ...props\n}: MenuProps<T>) {\n return (\n <MenuTrigger {...props}>\n <Button isDisabled={isDisabled} type=\"button\" variant={variant} size={size}>\n {label}\n </Button>\n <MenuPopover className=\"overflow-auto\">\n <Menu {...props}>{children}</Menu>\n </MenuPopover>\n </MenuTrigger>\n )\n}\n"],"names":["MenuTrigger","AriaMenuTrigger","MenuSubTrigger","AriaSubmenuTrigger","MenuCollection","ListBoxCollection","MenuPopover","className","props","jsx","SelectPopover","composeRenderProps","classNames","Menu","AriaMenu","MenuItem","children","AriaMenuItem","renderProps","jsxs","Fragment","Dot","Check","ChevronRight","MenuHeader","inset","separator","AriaHeader","MenuSeparator","AriaSeparator","MenuKeyboard","AriaKeyboard","EasyMenu","label","variant","isDisabled","size","Button"],"mappings":"goBAwBO,MAAMA,EAAcC,EACdC,EAAiBC,EACjBC,EAAiBC,EAEvB,SAASC,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAAuB,CACjE,OACEC,EAACC,EAAA,CACC,UAAWC,EAAmBJ,EAAYA,GACxCK,EAAWL,CAAS,CAAA,EAErB,GAAGC,CAAA,CAAA,CAGV,CAEO,SAASK,EAAuB,CAAE,UAAAN,EAAW,GAAGC,GAA2B,CAChF,OACEC,EAACK,EAAA,CACC,UAAWF,EACT,uFACAL,CAAA,EAEF,kBAAkB,OACjB,GAAGC,CAAA,CAAA,CAGV,CAGO,SAASO,EAAS,CAAE,SAAAC,EAAU,UAAAT,EAAW,GAAGC,GAAkE,CACnH,OACEC,EAACQ,EAAA,CACC,UACET,EAAM,YAAc,OAAOQ,GAAa,SAAWA,EAAW,QAEhE,UAAWL,EAAmBJ,EAAYA,GACxCK,EACE,sDAEA,iCACAL,CAAA,CACF,EAED,GAAGC,EAEH,SAAAG,EAAmBK,EAAU,CAACA,EAAUE,IACvCC,EAAAC,EAAA,CACE,SAAA,CAAAX,EAAC,OAAA,CAAK,UAAU,6DACb,SAAAS,EAAY,YACXC,EAAAC,EAAA,CACG,SAAA,CAAAF,EAAY,eAAiB,UAC5BT,EAACY,EAAA,CAAI,UAAU,yBAAyB,EAEzCH,EAAY,eAAiB,YAC5BT,EAACa,EAAA,CAAM,UAAU,WAAA,CAAY,CAAA,CAAA,CAEjC,CAAA,CAEJ,EAECN,EAEAE,EAAY,YAAcT,EAACc,EAAA,CAAa,UAAU,mBAAA,CAAoB,CAAA,EACzE,CACD,CAAA,CAAA,CAGP,CAOO,SAASC,EAAW,CACzB,UAAAjB,EACA,MAAAkB,EACA,UAAAC,EAAY,GACZ,GAAGlB,CACL,EAAoB,CAClB,OACEC,EAACkB,EAAA,CACC,UAAWf,EACT,oCACAa,GAAS,WACTC,GAAa,6CACbnB,CAAA,EAED,GAAGC,CAAA,CAAA,CAGV,CAEO,SAASoB,EAAc,CAAE,UAAArB,EAAW,GAAGC,GAA6B,CACzE,OACEC,EAACoB,EAAA,CACC,UAAWjB,EAAW,2BAA4BL,CAAS,EAC1D,GAAGC,CAAA,CAAA,CAGV,CAEO,SAASsB,EAAa,CAC3B,UAAAvB,EACA,GAAGC,CACL,EAA8C,CAC5C,OACEC,EAACsB,EAAA,CACC,UAAWnB,EAAW,6CAA8CL,CAAS,EAC5E,GAAGC,CAAA,CAAA,CAGV,CASO,SAASwB,EAA2B,CACzC,MAAAC,EACA,SAAAjB,EACA,QAAAkB,EACA,WAAAC,EACA,KAAAC,EACA,GAAG5B,CACL,EAAiB,CACf,OACEW,EAACnB,EAAA,CAAa,GAAGQ,EACf,SAAA,CAAAC,EAAC4B,GAAO,WAAAF,EAAwB,KAAK,SAAS,QAAAD,EAAkB,KAAAE,EAC7D,SAAAH,EACH,EACAxB,EAACH,GAAY,UAAU,gBACrB,WAACO,EAAA,CAAM,GAAGL,EAAQ,SAAAQ,CAAA,CAAS,CAAA,CAC7B,CAAA,EACF,CAEJ"}
package/dist/components/sidebar.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as a,Fragment as I,jsxs as x}from"react/jsx-runtime";import{PanelLeftClose as D,PanelLeftOpen as T}from"lucide-react";import{Button as B}from"./button.js";import{DialogTrigger as O,DialogOverlay as E,DialogContent as R}from"./dialog.js";import{Skeleton as w}from"./skeleton.js";import{TooltipTrigger as A,Tooltip as j}from"./tooltip.js";import{classNames as r}from"../utils/primitives.js";import{useIsMobile as L}from"../utils/use-mobile.js";import{createContext as H,forwardRef as G,use as K,useState as S,useCallback as N,useEffect as P,useMemo as y}from"react";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";const W="16rem",q="18rem",F="3rem",U="b",k=H(null);function h(){const t=K(k);if(!t)throw new Error("useSidebar must be used within a SidebarProvider.");return t}function se({defaultOpen:t=!0,open:e,onOpenChange:i,className:n,style:s,children:d,...c}){const l=L(),[p,b]=S(!1),[_,z]=S(t),f=e??_,m=N(o=>{const u=typeof o=="function"?o(f):o;i?i(u):z(u)},[i,f]),g=N(()=>l?b(o=>!o):m(o=>!o),[l,m,b]);P(()=>{const o=u=>{u.key===U&&(u.metaKey||u.ctrlKey)&&(u.preventDefault(),g())};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[g]);const v=f?"expanded":"collapsed",C=y(()=>({state:v,open:f,setOpen:m,isMobile:l,openMobile:p,setOpenMobile:b,toggleSidebar:g}),[v,f,m,l,p,b,g]);return a(k.Provider,{value:C,children:a("div",{style:{"--sidebar-width":W,"--sidebar-width-icon":F,...s},className:r("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar-background",n),...c,children:d})})}function de({side:t="left",variant:e="sidebar",collapsible:i="offcanvas",className:n,children:s,...d}){const{isMobile:c,state:l,openMobile:p,setOpenMobile:b}=h();return i==="none"?a("div",{className:r("flex h-full w-[--sidebar-width] flex-col bg-sidebar-background text-sidebar-foreground",n),...d,children:s}):c?a(O,{style:{"--sidebar-width":q},isOpen:p,onOpenChange:b,...d,children:a(E,{children:a(R,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>a(I,{children:s})})})}):x("div",{className:"group peer hidden text-sidebar-foreground md:block","data-state":l,"data-collapsible":l==="collapsed"?i:"","data-variant":e,"data-side":t,children:[a("div",{className:r("relative w-(--sidebar-width) bg-sidebar-background transition-[width] duration-200 ease-linear","group-data-[collapsible=offcanvas]:w-0","group-data-[side=right]:rotate-180",e==="floating"||e==="inset"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon]")}),a("div",{className:r("absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",t==="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"||e==="inset"?"p-2 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",n),...d,children:a("div",{"data-sidebar":"sidebar",className:"flex h-full w-full flex-col bg-sidebar-background group-data-[variant=floating]:border group-data-[variant=floating]:border-border group-data-[variant=floating]:shadow",children:s})})]})}function le({className:t,onClick:e,...i}){const{toggleSidebar:n,open:s}=h();return a(B,{"data-sidebar":"trigger",variant:"neutral",size:"icon",onClick:d=>{e?.(d),n()},...i,children:s?a(D,{}):a(T,{})})}const V=G(({className:t,...e},i)=>{const{toggleSidebar:n}=h();return a("button",{ref:i,"data-sidebar":"rail","aria-label":"Toggle Sidebar",tabIndex:-1,onClick:n,title:"Toggle Sidebar",className:r("absolute inset-y-0 z-20 hidden w-icon -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border group-data-[side=left]:-right-icon group-data-[side=right]:left-0 sm:flex","[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize","[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize","group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar-background","[[data-side=left][data-collapsible=offcanvas]_&]:-right-2","[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",t),...e})});V.displayName="SidebarRail";function ue({className:t,...e}){return a("main",{className:r("relative flex w-full flex-1 flex-col bg-background","md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",t),...e})}function ce({className:t,...e}){return a("div",{"data-sidebar":"header",className:r("flex flex-col gap-2 p-2",t),...e})}function be({className:t,...e}){return a("div",{"data-sidebar":"footer",className:r("flex flex-col gap-2 p-2",t),...e})}function fe({className:t,...e}){return a("div",{"data-sidebar":"content",className:r("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",t),...e})}function pe({className:t,...e}){return a("div",{"data-sidebar":"group",className:r("relative flex w-full min-w-0 flex-col p-2",t),...e})}function me({className:t,...e}){return a("div",{"data-sidebar":"group-label",className:r("flex h-input shrink-0 items-center rounded-md px-2 text-xs 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",t),...e})}function ge({className:t,...e}){return a("button",{"data-sidebar":"group-action",className:r("absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","after:absolute after:-inset-2 after:md:hidden","group-data-[collapsible=icon]:hidden",t),...e})}function he({className:t,...e}){return a("div",{"data-sidebar":"group-content",className:r("w-full text-sm",t),...e})}function xe({className:t,...e}){return a("ul",{"data-sidebar":"menu",className:r("flex w-full min-w-0 flex-col gap-1",t),...e})}function ve({className:t,...e}){return a("li",{"data-sidebar":"menu-item",className:r("group/menu-item relative list-none",t),...e})}function we({className:t,showOnHover:e=!1,...i}){return a("button",{"data-sidebar":"menu-action",className:r("absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-accent-foreground [&>svg]:size-icon [&>svg]:shrink-0","after:absolute after:-inset-2 after:md:hidden","peer-data-[size=sm]/menu-button:top-1","peer-data-[size=default]/menu-button:top-1.5","peer-data-[size=lg]/menu-button:top-2.5","group-data-[collapsible=icon]:hidden",e&&"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground md:opacity-0",t),...i})}function Se({className:t,...e}){return a("div",{"data-sidebar":"menu-badge",className:r("pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground","peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground","peer-data-[size=sm]/menu-button:top-1","peer-data-[size=default]/menu-button:top-1.5","peer-data-[size=lg]/menu-button:top-2.5","group-data-[collapsible=icon]:hidden",t),...e})}function Ne({className:t,showIcon:e=!1,...i}){const n=y(()=>`${Math.floor(Math.random()*40)+50}%`,[]);return x("div",{"data-sidebar":"menu-skeleton",className:r("flex h-input items-center gap-2 px-2",t),...i,children:[e&&a(w,{className:"size-icon","data-sidebar":"menu-skeleton-icon"}),a(w,{className:"h-icon max-w-[--skeleton-width] flex-1","data-sidebar":"menu-skeleton-text",style:{"--skeleton-width":n}})]})}function ye({className:t,...e}){return a("ul",{"data-sidebar":"menu-sub",className:r("mx-2 flex min-w-0 translate-x-px flex-col gap-1 border-l border-border px-2","group-data-[collapsible=icon]:hidden",t),...e})}function ke({className:t,...e}){return a("li",{className:r("list-none ms-0",t),...e})}const M="flex w-full items-center gap-2 truncate p-2 text-sm btn btn-ghost h-input text-accent justify-start data-[active=true]:bg-primary/20 data-[active=true]:font-medium data-[active=true]:text-primary [&>span:last-child]:truncate";function Me({isActive:t=!1,tooltip:e,className:i,...n}){const{isMobile:s,state:d}=h(),c=a("button",{"data-sidebar":"menu-button","data-active":t,className:r("peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 ",M,i),...n});return e?x(A,{children:[c,a(j,{hidden:d!=="collapsed"||s,...e})]}):c}function _e({isActive:t,className:e,...i}){return a("a",{"data-sidebar":"menu-sub-button","data-active":t,className:r("-translate-x-px [&>svg]:text-accent-foreground","group-data-[collapsible=icon]:hidden",M,e),...i})}export{de as Sidebar,fe as SidebarContent,k as SidebarContext,be as SidebarFooter,pe as SidebarGroup,ge as SidebarGroupAction,he as SidebarGroupContent,me as SidebarGroupLabel,ce as SidebarHeader,ue as SidebarInset,xe as SidebarMenu,we as SidebarMenuAction,Se as SidebarMenuBadge,Me as SidebarMenuButton,ve as SidebarMenuItem,Ne as SidebarMenuSkeleton,ye as SidebarMenuSub,_e as SidebarMenuSubButton,ke as SidebarMenuSubItem,se as SidebarProvider,V as SidebarRail,le as SidebarTrigger,h as useSidebar};
1
+ "use client";import{jsx as a,Fragment as I,jsxs as x}from"react/jsx-runtime";import{PanelLeftClose as D,PanelLeftOpen as T}from"lucide-react";import{Button as B}from"./button.js";import{DialogTrigger as O,DialogOverlay as E,DialogContent as R}from"./dialog.js";import{Skeleton as w}from"./skeleton.js";import{TooltipTrigger as A,Tooltip as j}from"./tooltip.js";import{classNames as r}from"../utils/primitives.js";import{useIsMobile as L}from"../utils/use-mobile.js";import{createContext as H,forwardRef as G,use as K,useState as S,useCallback as N,useEffect as P,useMemo as y}from"react";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";const W="16rem",q="18rem",F="3rem",U="b",k=H(null);function h(){const t=K(k);if(!t)throw new Error("useSidebar must be used within a SidebarProvider.");return t}function de({defaultOpen:t=!0,open:e,onOpenChange:i,className:n,style:d,children:s,...c}){const l=L(),[p,b]=S(!1),[_,z]=S(t),f=e??_,m=N(o=>{const u=typeof o=="function"?o(f):o;i?i(u):z(u)},[i,f]),g=N(()=>l?b(o=>!o):m(o=>!o),[l,m,b]);P(()=>{const o=u=>{u.key===U&&(u.metaKey||u.ctrlKey)&&(u.preventDefault(),g())};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[g]);const v=f?"expanded":"collapsed",C=y(()=>({state:v,open:f,setOpen:m,isMobile:l,openMobile:p,setOpenMobile:b,toggleSidebar:g}),[v,f,m,l,p,b,g]);return a(k.Provider,{value:C,children:a("div",{style:{"--sidebar-width":W,"--sidebar-width-icon":F,...d},className:r("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar-background",n),...c,children:s})})}function se({side:t="left",variant:e="sidebar",collapsible:i="offcanvas",className:n,children:d,...s}){const{isMobile:c,state:l,openMobile:p,setOpenMobile:b}=h();return i==="none"?a("div",{className:r("flex h-full w-[--sidebar-width] flex-col bg-sidebar-background text-sidebar-foreground",n),...s,children:d}):c?a(O,{style:{"--sidebar-width":q},isOpen:p,onOpenChange:b,...s,children:a(E,{children:a(R,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>a(I,{children:d})})})}):x("div",{className:"group peer hidden text-sidebar-foreground md:block","data-state":l,"data-collapsible":l==="collapsed"?i:"","data-variant":e,"data-side":t,children:[a("div",{className:r("relative w-(--sidebar-width) bg-sidebar-background transition-[width] duration-200 ease-linear","group-data-[collapsible=offcanvas]:w-0","group-data-[side=right]:rotate-180",e==="floating"||e==="inset"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon]")}),a("div",{className:r("absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",t==="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"||e==="inset"?"p-2 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",n),...s,children:a("div",{"data-sidebar":"sidebar",className:"flex h-full w-full flex-col bg-sidebar-background group-data-[variant=floating]:border group-data-[variant=floating]:border-border group-data-[variant=floating]:shadow",children:d})})]})}function le({className:t,onClick:e,...i}){const{toggleSidebar:n,open:d}=h();return a(B,{"data-sidebar":"trigger",variant:"neutral",size:"icon",onClick:s=>{e?.(s),n()},...i,children:d?a(D,{}):a(T,{})})}const V=G(({className:t,...e},i)=>{const{toggleSidebar:n}=h();return a("button",{ref:i,"data-sidebar":"rail","aria-label":"Toggle Sidebar",tabIndex:-1,onClick:n,title:"Toggle Sidebar",className:r("absolute inset-y-0 z-20 hidden w-icon -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border group-data-[side=left]:-right-icon group-data-[side=right]:left-0 sm:flex","[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize","[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize","group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar-background","[[data-side=left][data-collapsible=offcanvas]_&]:-right-2","[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",t),...e})});V.displayName="SidebarRail";function ue({className:t,...e}){return a("main",{className:r("relative flex w-full flex-1 flex-col bg-background","md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",t),...e})}function ce({className:t,...e}){return a("div",{"data-sidebar":"header",className:r("flex flex-col gap-2 p-2",t),...e})}function be({className:t,...e}){return a("div",{"data-sidebar":"footer",className:r("flex flex-col gap-2 p-2",t),...e})}function fe({className:t,...e}){return a("div",{"data-sidebar":"content",className:r("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",t),...e})}function pe({className:t,...e}){return a("div",{"data-sidebar":"group",className:r("relative flex w-full min-w-0 flex-col p-2",t),...e})}function me({className:t,...e}){return a("div",{"data-sidebar":"group-label",className:r("flex h-input shrink-0 items-center rounded-md px-2 text-xs 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",t),...e})}function ge({className:t,...e}){return a("button",{"data-sidebar":"group-action",className:r("absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","after:absolute after:-inset-2 after:md:hidden","group-data-[collapsible=icon]:hidden",t),...e})}function he({className:t,...e}){return a("div",{"data-sidebar":"group-content",className:r("w-full text-sm",t),...e})}function xe({className:t,...e}){return a("ul",{"data-sidebar":"menu",className:r("flex w-full min-w-0 flex-col gap-1",t),...e})}function ve({className:t,...e}){return a("li",{"data-sidebar":"menu-item",className:r("group/menu-item relative list-none",t),...e})}function we({className:t,showOnHover:e=!1,...i}){return a("button",{"data-sidebar":"menu-action",className:r("absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-accent-foreground [&>svg]:size-icon [&>svg]:shrink-0","after:absolute after:-inset-2 after:md:hidden","peer-data-[size=sm]/menu-button:top-1","peer-data-[size=default]/menu-button:top-1.5","peer-data-[size=lg]/menu-button:top-2.5","group-data-[collapsible=icon]:hidden",e&&"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground md:opacity-0",t),...i})}function Se({className:t,...e}){return a("div",{"data-sidebar":"menu-badge",className:r("pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground","peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground","peer-data-[size=sm]/menu-button:top-1","peer-data-[size=default]/menu-button:top-1.5","peer-data-[size=lg]/menu-button:top-2.5","group-data-[collapsible=icon]:hidden",t),...e})}function Ne({className:t,showIcon:e=!1,...i}){const n=y(()=>`${Math.floor(Math.random()*40)+50}%`,[]);return x("div",{"data-sidebar":"menu-skeleton",className:r("flex h-input items-center gap-2 px-2",t),...i,children:[e&&a(w,{className:"size-icon","data-sidebar":"menu-skeleton-icon"}),a(w,{className:"h-icon max-w-[--skeleton-width] flex-1","data-sidebar":"menu-skeleton-text",style:{"--skeleton-width":n}})]})}function ye({className:t,...e}){return a("ul",{"data-sidebar":"menu-sub",className:r("mx-2 flex min-w-0 translate-x-px flex-col gap-1 border-l border-border px-2","group-data-[collapsible=icon]:hidden",t),...e})}function ke({className:t,...e}){return a("li",{className:r("list-none ms-0",t),...e})}const M="w-full truncate btn btn-primary border-0 input-dim font-normal text-accent justify-start data-[active=true]:bg-primary/20 data-[active=true]:font-medium data-[active=true]:text-primary [&>span:last-child]:truncate";function Me({isActive:t=!1,tooltip:e,className:i,...n}){const{isMobile:d,state:s}=h(),c=a("button",{"data-sidebar":"menu-button","data-active":t,className:r("peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 ",M,i),...n});return e?x(A,{children:[c,a(j,{hidden:s!=="collapsed"||d,...e})]}):c}function _e({isActive:t,className:e,...i}){return a("a",{"data-sidebar":"menu-sub-button","data-active":t,className:r("-translate-x-px [&>svg]:text-accent-foreground","group-data-[collapsible=icon]:hidden",M,e),...i})}export{se as Sidebar,fe as SidebarContent,k as SidebarContext,be as SidebarFooter,pe as SidebarGroup,ge as SidebarGroupAction,he as SidebarGroupContent,me as SidebarGroupLabel,ce as SidebarHeader,ue as SidebarInset,xe as SidebarMenu,we as SidebarMenuAction,Se as SidebarMenuBadge,Me as SidebarMenuButton,ve as SidebarMenuItem,Ne as SidebarMenuSkeleton,ye as SidebarMenuSub,_e as SidebarMenuSubButton,ke as SidebarMenuSubItem,de as SidebarProvider,V as SidebarRail,le as SidebarTrigger,h as useSidebar};
2
2
  //# sourceMappingURL=sidebar.js.map
package/dist/components/sidebar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sidebar.js","sources":["../../lib/components/sidebar.tsx"],"sourcesContent":["\"use client\"\nimport { PanelLeftClose, PanelLeftOpen } from \"lucide-react\"\n\nimport { Button } from \"lib/components/button\"\nimport { DialogContent, DialogOverlay, DialogTrigger } from \"lib/components/dialog\"\nimport { Skeleton } from \"lib/components/skeleton\"\nimport { Tooltip, TooltipTrigger } from \"lib/components/tooltip\"\nimport { classNames } from \"lib/utils/primitives\"\nimport { useIsMobile } from \"lib/utils/use-mobile\"\nimport { createContext, forwardRef, use, useCallback, useEffect, useMemo, useState } from \"react\"\n\n// TODO use tailwind variables\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n\tstate: \"expanded\" | \"collapsed\"\n\topen: boolean\n\tsetOpen: (open: boolean) => void\n\topenMobile: boolean\n\tsetOpenMobile: (open: boolean) => void\n\tisMobile: boolean\n\ttoggleSidebar: () => void\n}\n\nexport const SidebarContext = createContext<SidebarContextProps | null>(null)\n\nexport function useSidebar() {\n\tconst context = use(SidebarContext)\n\tif (!context) {\n\t\tthrow new Error(\"useSidebar must be used within a SidebarProvider.\")\n\t}\n\n\treturn context\n}\n\nexport function SidebarProvider(\n\t{\n\t\tdefaultOpen = true,\n\t\topen: openProp,\n\t\tonOpenChange: setOpenProp,\n\t\tclassName,\n\t\tstyle,\n\t\tchildren,\n\t\t...props\n\t}: React.ComponentProps<'div'> & {\n\t\tdefaultOpen?: boolean\n\t\topen?: boolean\n\t\tonOpenChange?: (open: boolean) => void\n\t}) {\n\tconst isMobile = useIsMobile()\n\tconst [openMobile, setOpenMobile] = useState(false)\n\n\t// This is the internal state of the sidebar.\n\t// We use openProp and setOpenProp for control from outside the component.\n\tconst [_open, _setOpen] = useState(defaultOpen)\n\tconst open = openProp ?? _open\n\tconst setOpen = useCallback(\n\t\t(value: boolean | ((value: boolean) => boolean)) => {\n\t\t\tconst openState = typeof value === \"function\" ? value(open) : value\n\t\t\tif (setOpenProp) {\n\t\t\t\tsetOpenProp(openState)\n\t\t\t} else {\n\t\t\t\t_setOpen(openState)\n\t\t\t}\n\n\t\t\t// TODO, use different model for persistence\n\t\t\t// This sets the cookie to keep the sidebar state.\n\t\t\t// document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n\t\t},\n\t\t[setOpenProp, open]\n\t)\n\n\t// Helper to toggle the sidebar.\n\tconst toggleSidebar = useCallback(() => {\n\t\treturn isMobile\n\t\t\t? setOpenMobile((open) => !open)\n\t\t\t: setOpen((open) => !open)\n\t}, [isMobile, setOpen, setOpenMobile])\n\n\t// Adds a keyboard shortcut to toggle the sidebar.\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (\n\t\t\t\tevent.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n\t\t\t\t(event.metaKey || event.ctrlKey)\n\t\t\t) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\ttoggleSidebar()\n\t\t\t}\n\t\t}\n\n\t\twindow.addEventListener(\"keydown\", handleKeyDown)\n\t\treturn () => window.removeEventListener(\"keydown\", handleKeyDown)\n\t}, [toggleSidebar])\n\n\t// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n\t// This makes it easier to style the sidebar with Tailwind classes.\n\tconst state = open ? \"expanded\" : \"collapsed\"\n\n\tconst contextValue = useMemo<SidebarContextProps>(\n\t\t() => ({\n\t\t\tstate,\n\t\t\topen,\n\t\t\tsetOpen,\n\t\t\tisMobile,\n\t\t\topenMobile,\n\t\t\tsetOpenMobile,\n\t\t\ttoggleSidebar,\n\t\t}),\n\t\t[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n\t)\n\n\treturn (\n\t\t<SidebarContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t\"--sidebar-width\": SIDEBAR_WIDTH,\n\t\t\t\t\t\t\"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n\t\t\t\t\t\t...style,\n\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t}\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t\"group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar-background\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</SidebarContext.Provider>\n\t)\n}\n\n\nexport function Sidebar(\n\t{\n\t\tside = \"left\",\n\t\tvariant = \"sidebar\",\n\t\tcollapsible = \"offcanvas\",\n\t\tclassName,\n\t\tchildren,\n\t\t...props\n\t}: React.ComponentProps<\"div\"> & {\n\t\tside?: \"left\" | \"right\"\n\t\tvariant?: \"sidebar\" | \"floating\" | \"inset\"\n\t\tcollapsible?: \"offcanvas\" | \"icon\" | \"none\"\n\t}\n) {\n\tconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n\tif (collapsible === \"none\") {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t\"flex h-full w-[--sidebar-width] flex-col bg-sidebar-background text-sidebar-foreground\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t)\n\t}\n\n\tif (isMobile) {\n\t\treturn (\n\t\t\t<DialogTrigger style={{ \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE, } as React.CSSProperties} isOpen={openMobile} onOpenChange={setOpenMobile} {...props} >\n\t\t\t\t<DialogOverlay>\n\t\t\t\t\t<DialogContent\n\t\t\t\t\t\tdata-sidebar=\"sidebar\"\n\t\t\t\t\t\tdata-mobile=\"true\"\n\t\t\t\t\t\tclassName=\"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden\" side=\"left\">\n\t\t\t\t\t\t{() => (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DialogContent>\n\t\t\t\t</DialogOverlay>\n\t\t\t</DialogTrigger>\n\t\t)\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"group peer hidden text-sidebar-foreground md:block\"\n\t\t\tdata-state={state}\n\t\t\tdata-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n\t\t\tdata-variant={variant}\n\t\t\tdata-side={side}\n\t\t>\n\t\t\t{/* This is what handles the sidebar gap on desktop */}\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t\"relative w-(--sidebar-width) bg-sidebar-background transition-[width] duration-200 ease-linear\",\n\t\t\t\t\t\"group-data-[collapsible=offcanvas]:w-0\",\n\t\t\t\t\t\"group-data-[side=right]:rotate-180\",\n\t\t\t\t\tvariant === \"floating\" || variant === \"inset\"\n\t\t\t\t\t\t? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n\t\t\t\t\t\t: \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\"\n\t\t\t\t)}\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t\"absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n\t\t\t\t\tside === \"left\"\n\t\t\t\t\t\t? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n\t\t\t\t\t\t: \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n\t\t\t\t\t// Adjust the padding for floating and inset variants.\n\t\t\t\t\tvariant === \"floating\" || variant === \"inset\"\n\t\t\t\t\t\t? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n\t\t\t\t\t\t: \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-sidebar=\"sidebar\"\n\t\t\t\t\tclassName=\"flex h-full w-full flex-col bg-sidebar-background group-data-[variant=floating]:border group-data-[variant=floating]:border-border group-data-[variant=floating]:shadow\"\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\n\n\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n\tconst { toggleSidebar, open } = useSidebar()\n\n\treturn (\n\t\t<Button\n\t\t\tdata-sidebar=\"trigger\"\n\t\t\tvariant=\"neutral\"\n\t\t\tsize=\"icon\"\n\t\t\tonClick={(event) => {\n\t\t\t\tonClick?.(event)\n\t\t\t\ttoggleSidebar()\n\t\t\t}}\n\t\t\t{...props}\n\t\t>{open ? <PanelLeftClose /> : <PanelLeftOpen />}</Button>\n\t)\n}\n\n// TODO, evaluate if we need this??\nexport const SidebarRail = forwardRef<\n\tHTMLButtonElement,\n\tReact.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n\tconst { toggleSidebar } = useSidebar()\n\n\treturn (\n\t\t<button\n\t\t\tref={ref}\n\t\t\tdata-sidebar=\"rail\"\n\t\t\taria-label=\"Toggle Sidebar\"\n\t\t\ttabIndex={-1}\n\t\t\tonClick={toggleSidebar}\n\t\t\ttitle=\"Toggle Sidebar\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"absolute inset-y-0 z-20 hidden w-icon -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border group-data-[side=left]:-right-icon group-data-[side=right]:left-0 sm:flex\",\n\t\t\t\t\"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n\t\t\t\t\"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n\t\t\t\t\"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar-background\",\n\t\t\t\t\"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n\t\t\t\t\"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n})\nSidebarRail.displayName = \"SidebarRail\"\n\nexport function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n\treturn (\n\t\t<main\n\t\t\tclassName={classNames(\n\t\t\t\t\"relative flex w-full flex-1 flex-col bg-background\",\n\t\t\t\t\"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\n\nexport function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\n\t\t\tdata-sidebar=\"header\"\n\t\t\tclassName={classNames(\"flex flex-col gap-2 p-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"footer\"\n\t\t\tclassName={classNames(\"flex flex-col gap-2 p-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"content\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"group\"\n\t\t\tclassName={classNames(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\n\nexport function SidebarGroupLabel({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"group-label\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"flex h-input shrink-0 items-center rounded-md px-2 text-xs 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\t\t\t\t\"group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\nexport function SidebarGroupAction({ className, ...props }: React.ComponentProps<\"button\">) {\n\treturn (\n\t\t<button\n\t\t\tdata-sidebar=\"group-action\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0\",\n\t\t\t\t// Increases the hit area of the button on mobile.\n\t\t\t\t\"after:absolute after:-inset-2 after:md:hidden\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"group-content\"\n\t\t\tclassName={classNames(\"w-full text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n\treturn (\n\t\t<ul\n\t\t\tdata-sidebar=\"menu\"\n\t\t\tclassName={classNames(\"flex w-full min-w-0 flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n\treturn (\n\t\t<li\n\t\t\tdata-sidebar=\"menu-item\"\n\t\t\tclassName={classNames(\"group/menu-item relative list-none\", className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\n/// TODO fix positioning\nexport function SidebarMenuAction({ className, showOnHover = false, ...props }: React.ComponentProps<\"button\"> & {\n\tshowOnHover?: boolean\n}) {\n\n\treturn (\n\t\t<button\n\t\t\tdata-sidebar=\"menu-action\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-accent-foreground [&>svg]:size-icon [&>svg]:shrink-0\",\n\t\t\t\t// Increases the hit area of the button on mobile.\n\t\t\t\t\"after:absolute after:-inset-2 after:md:hidden\",\n\t\t\t\t\"peer-data-[size=sm]/menu-button:top-1\",\n\t\t\t\t\"peer-data-[size=default]/menu-button:top-1.5\",\n\t\t\t\t\"peer-data-[size=lg]/menu-button:top-2.5\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tshowOnHover &&\n\t\t\t\t\"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground md:opacity-0\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"menu-badge\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground\",\n\t\t\t\t\"peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground\",\n\t\t\t\t\"peer-data-[size=sm]/menu-button:top-1\",\n\t\t\t\t\"peer-data-[size=default]/menu-button:top-1.5\",\n\t\t\t\t\"peer-data-[size=lg]/menu-button:top-2.5\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarMenuSkeleton({ className, showIcon = false, ...props }: React.ComponentProps<\"div\"> & {\n\tshowIcon?: boolean\n}) {\n\t// Random width between 50 to 90%.\n\tconst width = useMemo(() => {\n\t\treturn `${Math.floor(Math.random() * 40) + 50}%`\n\t}, [])\n\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"menu-skeleton\"\n\t\t\tclassName={classNames(\"flex h-input items-center gap-2 px-2\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{showIcon && (\n\t\t\t\t<Skeleton\n\t\t\t\t\tclassName=\"size-icon\"\n\t\t\t\t\tdata-sidebar=\"menu-skeleton-icon\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<Skeleton\n\t\t\t\tclassName=\"h-icon max-w-[--skeleton-width] flex-1\"\n\t\t\t\tdata-sidebar=\"menu-skeleton-text\"\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t\"--skeleton-width\": width,\n\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n\treturn (\n\t\t<ul\n\t\t\tdata-sidebar=\"menu-sub\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"mx-2 flex min-w-0 translate-x-px flex-col gap-1 border-l border-border px-2\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) { return <li className={classNames(\"list-none ms-0\", className)} {...props} /> }\n\n// Common interaction logic for SidebarMenuButton and SidebarMenuSubButton\n// TODO, this is similar to the tab pattern, standardize the two.\nconst Cs_SidebarButton = \"flex w-full items-center gap-2 truncate p-2 text-sm btn btn-ghost h-input text-accent justify-start data-[active=true]:bg-primary/20 data-[active=true]:font-medium data-[active=true]:text-primary [&>span:last-child]:truncate\";\nexport function SidebarMenuButton\n\t(\n\t\t{\n\t\t\tisActive = false,\n\t\t\ttooltip,\n\t\t\tclassName,\n\t\t\t...props\n\t\t}: React.ComponentProps<\"button\"> & {\n\t\t\tisActive?: boolean\n\t\t\ttooltip?: React.ComponentProps<typeof Tooltip>\n\t\t}\n\t) {\n\tconst { isMobile, state } = useSidebar()\n\n\tconst button = (\n\t\t<button\n\t\t\tdata-sidebar=\"menu-button\"\n\t\t\tdata-active={isActive}\n\t\t\tclassName={classNames(\n\t\t\t\t\"peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 \",\n\t\t\t\tCs_SidebarButton,\n\t\t\t\tclassName)}\n\t\t\t{...props}\n\t\t/>\n\t)\n\n\tif (!tooltip) {\n\t\treturn button\n\t}\n\n\treturn (\n\t\t<TooltipTrigger>\n\t\t\t{button}\n\t\t\t<Tooltip\n\t\t\t\thidden={state !== \"collapsed\" || isMobile}\n\t\t\t\t{...tooltip}\n\t\t\t/>\n\t\t</TooltipTrigger>\n\t)\n}\n\nexport function SidebarMenuSubButton({ isActive, className, ...props }: React.ComponentProps<'a'> & {\n\tisActive?: boolean\n}) {\n\n\treturn (\n\t\t<a\n\t\t\tdata-sidebar=\"menu-sub-button\"\n\t\t\tdata-active={isActive}\n\t\t\tclassName={classNames(\n\t\t\t\t\"-translate-x-px [&>svg]:text-accent-foreground\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tCs_SidebarButton,\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n// TODO, standardize heights here"],"names":["SIDEBAR_WIDTH","SIDEBAR_WIDTH_MOBILE","SIDEBAR_WIDTH_ICON","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","PanelLeftClose","PanelLeftOpen","SidebarRail","forwardRef","ref","SidebarInset","SidebarHeader","SidebarFooter","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupAction","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","showOnHover","SidebarMenuBadge","SidebarMenuSkeleton","showIcon","width","Skeleton","SidebarMenuSub","SidebarMenuSubItem","Cs_SidebarButton","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton"],"mappings":"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"}
1
+ {"version":3,"file":"sidebar.js","sources":["../../lib/components/sidebar.tsx"],"sourcesContent":["\"use client\"\nimport { PanelLeftClose, PanelLeftOpen } from \"lucide-react\"\n\nimport { Button } from \"lib/components/button\"\nimport { DialogContent, DialogOverlay, DialogTrigger } from \"lib/components/dialog\"\nimport { Skeleton } from \"lib/components/skeleton\"\nimport { Tooltip, TooltipTrigger } from \"lib/components/tooltip\"\nimport { classNames } from \"lib/utils/primitives\"\nimport { useIsMobile } from \"lib/utils/use-mobile\"\nimport { createContext, forwardRef, use, useCallback, useEffect, useMemo, useState } from \"react\"\n\n// TODO use tailwind variables\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n\tstate: \"expanded\" | \"collapsed\"\n\topen: boolean\n\tsetOpen: (open: boolean) => void\n\topenMobile: boolean\n\tsetOpenMobile: (open: boolean) => void\n\tisMobile: boolean\n\ttoggleSidebar: () => void\n}\n\nexport const SidebarContext = createContext<SidebarContextProps | null>(null)\n\nexport function useSidebar() {\n\tconst context = use(SidebarContext)\n\tif (!context) {\n\t\tthrow new Error(\"useSidebar must be used within a SidebarProvider.\")\n\t}\n\n\treturn context\n}\n\nexport function SidebarProvider(\n\t{\n\t\tdefaultOpen = true,\n\t\topen: openProp,\n\t\tonOpenChange: setOpenProp,\n\t\tclassName,\n\t\tstyle,\n\t\tchildren,\n\t\t...props\n\t}: React.ComponentProps<'div'> & {\n\t\tdefaultOpen?: boolean\n\t\topen?: boolean\n\t\tonOpenChange?: (open: boolean) => void\n\t}) {\n\tconst isMobile = useIsMobile()\n\tconst [openMobile, setOpenMobile] = useState(false)\n\n\t// This is the internal state of the sidebar.\n\t// We use openProp and setOpenProp for control from outside the component.\n\tconst [_open, _setOpen] = useState(defaultOpen)\n\tconst open = openProp ?? _open\n\tconst setOpen = useCallback(\n\t\t(value: boolean | ((value: boolean) => boolean)) => {\n\t\t\tconst openState = typeof value === \"function\" ? value(open) : value\n\t\t\tif (setOpenProp) {\n\t\t\t\tsetOpenProp(openState)\n\t\t\t} else {\n\t\t\t\t_setOpen(openState)\n\t\t\t}\n\n\t\t\t// TODO, use different model for persistence\n\t\t\t// This sets the cookie to keep the sidebar state.\n\t\t\t// document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n\t\t},\n\t\t[setOpenProp, open]\n\t)\n\n\t// Helper to toggle the sidebar.\n\tconst toggleSidebar = useCallback(() => {\n\t\treturn isMobile\n\t\t\t? setOpenMobile((open) => !open)\n\t\t\t: setOpen((open) => !open)\n\t}, [isMobile, setOpen, setOpenMobile])\n\n\t// Adds a keyboard shortcut to toggle the sidebar.\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (\n\t\t\t\tevent.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n\t\t\t\t(event.metaKey || event.ctrlKey)\n\t\t\t) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\ttoggleSidebar()\n\t\t\t}\n\t\t}\n\n\t\twindow.addEventListener(\"keydown\", handleKeyDown)\n\t\treturn () => window.removeEventListener(\"keydown\", handleKeyDown)\n\t}, [toggleSidebar])\n\n\t// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n\t// This makes it easier to style the sidebar with Tailwind classes.\n\tconst state = open ? \"expanded\" : \"collapsed\"\n\n\tconst contextValue = useMemo<SidebarContextProps>(\n\t\t() => ({\n\t\t\tstate,\n\t\t\topen,\n\t\t\tsetOpen,\n\t\t\tisMobile,\n\t\t\topenMobile,\n\t\t\tsetOpenMobile,\n\t\t\ttoggleSidebar,\n\t\t}),\n\t\t[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n\t)\n\n\treturn (\n\t\t<SidebarContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t\"--sidebar-width\": SIDEBAR_WIDTH,\n\t\t\t\t\t\t\"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n\t\t\t\t\t\t...style,\n\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t}\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t\"group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar-background\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</SidebarContext.Provider>\n\t)\n}\n\n\nexport function Sidebar(\n\t{\n\t\tside = \"left\",\n\t\tvariant = \"sidebar\",\n\t\tcollapsible = \"offcanvas\",\n\t\tclassName,\n\t\tchildren,\n\t\t...props\n\t}: React.ComponentProps<\"div\"> & {\n\t\tside?: \"left\" | \"right\"\n\t\tvariant?: \"sidebar\" | \"floating\" | \"inset\"\n\t\tcollapsible?: \"offcanvas\" | \"icon\" | \"none\"\n\t}\n) {\n\tconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n\tif (collapsible === \"none\") {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t\"flex h-full w-[--sidebar-width] flex-col bg-sidebar-background text-sidebar-foreground\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t)\n\t}\n\n\tif (isMobile) {\n\t\treturn (\n\t\t\t<DialogTrigger style={{ \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE, } as React.CSSProperties} isOpen={openMobile} onOpenChange={setOpenMobile} {...props} >\n\t\t\t\t<DialogOverlay>\n\t\t\t\t\t<DialogContent\n\t\t\t\t\t\tdata-sidebar=\"sidebar\"\n\t\t\t\t\t\tdata-mobile=\"true\"\n\t\t\t\t\t\tclassName=\"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden\" side=\"left\">\n\t\t\t\t\t\t{() => (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DialogContent>\n\t\t\t\t</DialogOverlay>\n\t\t\t</DialogTrigger>\n\t\t)\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"group peer hidden text-sidebar-foreground md:block\"\n\t\t\tdata-state={state}\n\t\t\tdata-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n\t\t\tdata-variant={variant}\n\t\t\tdata-side={side}\n\t\t>\n\t\t\t{/* This is what handles the sidebar gap on desktop */}\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t\"relative w-(--sidebar-width) bg-sidebar-background transition-[width] duration-200 ease-linear\",\n\t\t\t\t\t\"group-data-[collapsible=offcanvas]:w-0\",\n\t\t\t\t\t\"group-data-[side=right]:rotate-180\",\n\t\t\t\t\tvariant === \"floating\" || variant === \"inset\"\n\t\t\t\t\t\t? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n\t\t\t\t\t\t: \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\"\n\t\t\t\t)}\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t\"absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n\t\t\t\t\tside === \"left\"\n\t\t\t\t\t\t? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n\t\t\t\t\t\t: \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n\t\t\t\t\t// Adjust the padding for floating and inset variants.\n\t\t\t\t\tvariant === \"floating\" || variant === \"inset\"\n\t\t\t\t\t\t? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n\t\t\t\t\t\t: \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-sidebar=\"sidebar\"\n\t\t\t\t\tclassName=\"flex h-full w-full flex-col bg-sidebar-background group-data-[variant=floating]:border group-data-[variant=floating]:border-border group-data-[variant=floating]:shadow\"\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\n\n\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n\tconst { toggleSidebar, open } = useSidebar()\n\n\treturn (\n\t\t<Button\n\t\t\tdata-sidebar=\"trigger\"\n\t\t\tvariant=\"neutral\"\n\t\t\tsize=\"icon\"\n\t\t\tonClick={(event) => {\n\t\t\t\tonClick?.(event)\n\t\t\t\ttoggleSidebar()\n\t\t\t}}\n\t\t\t{...props}\n\t\t>{open ? <PanelLeftClose /> : <PanelLeftOpen />}</Button>\n\t)\n}\n\n// TODO, evaluate if we need this??\nexport const SidebarRail = forwardRef<\n\tHTMLButtonElement,\n\tReact.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n\tconst { toggleSidebar } = useSidebar()\n\n\treturn (\n\t\t<button\n\t\t\tref={ref}\n\t\t\tdata-sidebar=\"rail\"\n\t\t\taria-label=\"Toggle Sidebar\"\n\t\t\ttabIndex={-1}\n\t\t\tonClick={toggleSidebar}\n\t\t\ttitle=\"Toggle Sidebar\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"absolute inset-y-0 z-20 hidden w-icon -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border group-data-[side=left]:-right-icon group-data-[side=right]:left-0 sm:flex\",\n\t\t\t\t\"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n\t\t\t\t\"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n\t\t\t\t\"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar-background\",\n\t\t\t\t\"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n\t\t\t\t\"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n})\nSidebarRail.displayName = \"SidebarRail\"\n\nexport function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n\treturn (\n\t\t<main\n\t\t\tclassName={classNames(\n\t\t\t\t\"relative flex w-full flex-1 flex-col bg-background\",\n\t\t\t\t\"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\n\nexport function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\n\t\t\tdata-sidebar=\"header\"\n\t\t\tclassName={classNames(\"flex flex-col gap-2 p-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"footer\"\n\t\t\tclassName={classNames(\"flex flex-col gap-2 p-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"content\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"group\"\n\t\t\tclassName={classNames(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\n\nexport function SidebarGroupLabel({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"group-label\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"flex h-input shrink-0 items-center rounded-md px-2 text-xs 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\t\t\t\t\"group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\nexport function SidebarGroupAction({ className, ...props }: React.ComponentProps<\"button\">) {\n\treturn (\n\t\t<button\n\t\t\tdata-sidebar=\"group-action\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0\",\n\t\t\t\t// Increases the hit area of the button on mobile.\n\t\t\t\t\"after:absolute after:-inset-2 after:md:hidden\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"group-content\"\n\t\t\tclassName={classNames(\"w-full text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n\treturn (\n\t\t<ul\n\t\t\tdata-sidebar=\"menu\"\n\t\t\tclassName={classNames(\"flex w-full min-w-0 flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n\treturn (\n\t\t<li\n\t\t\tdata-sidebar=\"menu-item\"\n\t\t\tclassName={classNames(\"group/menu-item relative list-none\", className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\n/// TODO fix positioning\nexport function SidebarMenuAction({ className, showOnHover = false, ...props }: React.ComponentProps<\"button\"> & {\n\tshowOnHover?: boolean\n}) {\n\n\treturn (\n\t\t<button\n\t\t\tdata-sidebar=\"menu-action\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-accent-foreground [&>svg]:size-icon [&>svg]:shrink-0\",\n\t\t\t\t// Increases the hit area of the button on mobile.\n\t\t\t\t\"after:absolute after:-inset-2 after:md:hidden\",\n\t\t\t\t\"peer-data-[size=sm]/menu-button:top-1\",\n\t\t\t\t\"peer-data-[size=default]/menu-button:top-1.5\",\n\t\t\t\t\"peer-data-[size=lg]/menu-button:top-2.5\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tshowOnHover &&\n\t\t\t\t\"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground md:opacity-0\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"menu-badge\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground\",\n\t\t\t\t\"peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground\",\n\t\t\t\t\"peer-data-[size=sm]/menu-button:top-1\",\n\t\t\t\t\"peer-data-[size=default]/menu-button:top-1.5\",\n\t\t\t\t\"peer-data-[size=lg]/menu-button:top-2.5\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarMenuSkeleton({ className, showIcon = false, ...props }: React.ComponentProps<\"div\"> & {\n\tshowIcon?: boolean\n}) {\n\t// Random width between 50 to 90%.\n\tconst width = useMemo(() => {\n\t\treturn `${Math.floor(Math.random() * 40) + 50}%`\n\t}, [])\n\n\treturn (\n\t\t<div\n\t\t\tdata-sidebar=\"menu-skeleton\"\n\t\t\tclassName={classNames(\"flex h-input items-center gap-2 px-2\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{showIcon && (\n\t\t\t\t<Skeleton\n\t\t\t\t\tclassName=\"size-icon\"\n\t\t\t\t\tdata-sidebar=\"menu-skeleton-icon\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<Skeleton\n\t\t\t\tclassName=\"h-icon max-w-[--skeleton-width] flex-1\"\n\t\t\t\tdata-sidebar=\"menu-skeleton-text\"\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t\"--skeleton-width\": width,\n\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n\treturn (\n\t\t<ul\n\t\t\tdata-sidebar=\"menu-sub\"\n\t\t\tclassName={classNames(\n\t\t\t\t\"mx-2 flex min-w-0 translate-x-px flex-col gap-1 border-l border-border px-2\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) { return <li className={classNames(\"list-none ms-0\", className)} {...props} /> }\n\n// Common interaction logic for SidebarMenuButton and SidebarMenuSubButton\n// TODO, this is similar to the tab pattern, standardize the two.\nconst Cs_SidebarButton = \"w-full truncate btn btn-primary border-0 input-dim font-normal text-accent justify-start data-[active=true]:bg-primary/20 data-[active=true]:font-medium data-[active=true]:text-primary [&>span:last-child]:truncate\";\nexport function SidebarMenuButton\n\t(\n\t\t{\n\t\t\tisActive = false,\n\t\t\ttooltip,\n\t\t\tclassName,\n\t\t\t...props\n\t\t}: React.ComponentProps<\"button\"> & {\n\t\t\tisActive?: boolean\n\t\t\ttooltip?: React.ComponentProps<typeof Tooltip>\n\t\t}\n\t) {\n\tconst { isMobile, state } = useSidebar()\n\n\tconst button = (\n\t\t<button\n\t\t\tdata-sidebar=\"menu-button\"\n\t\t\tdata-active={isActive}\n\t\t\tclassName={classNames(\n\t\t\t\t\"peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 \",\n\t\t\t\tCs_SidebarButton,\n\t\t\t\tclassName)}\n\t\t\t{...props}\n\t\t/>\n\t)\n\n\tif (!tooltip) {\n\t\treturn button\n\t}\n\n\treturn (\n\t\t<TooltipTrigger>\n\t\t\t{button}\n\t\t\t<Tooltip\n\t\t\t\thidden={state !== \"collapsed\" || isMobile}\n\t\t\t\t{...tooltip}\n\t\t\t/>\n\t\t</TooltipTrigger>\n\t)\n}\n\nexport function SidebarMenuSubButton({ isActive, className, ...props }: React.ComponentProps<'a'> & {\n\tisActive?: boolean\n}) {\n\n\treturn (\n\t\t<a\n\t\t\tdata-sidebar=\"menu-sub-button\"\n\t\t\tdata-active={isActive}\n\t\t\tclassName={classNames(\n\t\t\t\t\"-translate-x-px [&>svg]:text-accent-foreground\",\n\t\t\t\t\"group-data-[collapsible=icon]:hidden\",\n\t\t\t\tCs_SidebarButton,\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n// TODO, standardize heights here"],"names":["SIDEBAR_WIDTH","SIDEBAR_WIDTH_MOBILE","SIDEBAR_WIDTH_ICON","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","PanelLeftClose","PanelLeftOpen","SidebarRail","forwardRef","ref","SidebarInset","SidebarHeader","SidebarFooter","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupAction","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","showOnHover","SidebarMenuBadge","SidebarMenuSkeleton","showIcon","width","Skeleton","SidebarMenuSub","SidebarMenuSubItem","Cs_SidebarButton","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton"],"mappings":"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"}
package/lib/utilities.css CHANGED
@@ -63,11 +63,7 @@
63
63
  @apply border border-secondary text-secondary bg-card hover:bg-secondary/10 data-[hovered]:bg-secondary/10 focus:bg-secondary/10 data-[focused]:bg-secondary/10;
64
64
  }
65
65
  @utility btn-ghost {
66
- @apply bg-transparent hover:bg-accent/10 focus:bg-accent/10 data-[hovered]:bg-accent/10 data-[focused]:bg-accent/10;
67
- }
68
-
69
- @utility btn-dropdown {
70
- @apply w-full btn btn-neutral leading-normal h-input text-sm text-left px-2 truncate;
66
+ @apply bg-transparent focus:bg-accent/20 data-[focused]:bg-accent/20 hover:bg-accent/20 data-[hovered]:bg-accent/20;
71
67
  }
72
68
 
73
69
  /* Dimensions for a standard input */
@@ -75,12 +71,8 @@
75
71
  @apply h-input px-icon py-2 text-sm;
76
72
  }
77
73
 
78
- @utility dropdown-item {
79
- @apply w-full relative btn btn-ghost input-dim truncate;
80
- }
81
-
82
74
  @utility form-column {
83
- @apply flex flex-col gap-6;
75
+ @apply flex flex-col gap-input;
84
76
  }
85
77
 
86
78
  @utility form-field {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cryptlex/web-components",
3
- "version": "5.5.1",
3
+ "version": "6.0.0",
4
4
  "description": "React component library for Cryptlex web applications",
5
5
  "author": "Cryptlex",
6
6
  "type": "module",