@atom-learning/components 2.28.0-beta.0 → 2.28.1-beta.0

package/dist/lib/src/components/accordion/AccordionTrigger.js

@@ -0,0 +1 @@
+import{ChevronDown as i}from"@atom-learning/icons";import{Trigger as s}from"@radix-ui/react-accordion";import e from"react";import{styled as t}from"../../stitches.js";import{Icon as n}from"../icon/Icon.js";import{ColorScheme as c}from"../../../../color-scheme/dist/ColorScheme.js";import{focusVisibleStyleBlock as d}from"../../utilities/style/focus-visible-style-block.js";const l=t(n,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),m=t(s,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",bg:"$interactive2",color:"$interactiveForeground","&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:active, &:hover, &:focus-visible":{bg:"$interactive3"},"&:focus-visible":{...d()}},'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"}}),f=({children:o,colorScheme:r={},...a})=>e.createElement(c,{as:m,accent:"slate",interactive:"loContrast1",...r,...a},o,e.createElement(l,{is:i}));export{f as AccordionTrigger};

package/dist/lib/src/components/data-table/DataTable.js

@@ -0,0 +1 @@
+import*as r from"react";import{DataTableBody as t}from"./DataTableBody.js";import{DataTableProvider as m}from"./DataTableContext.js";import{DataTableDataCell as e}from"./DataTableDataCell.js";import{DataTableError as l}from"./DataTableError.js";import{DataTableGlobalFilter as i}from"./DataTableGlobalFilter.js";import{DataTableHead as p}from"./DataTableHead.js";import{DataTableHeaderCell as b}from"./DataTableHeaderCell.js";import{DataTableLoading as D}from"./DataTableLoading.js";import{DataTableRow as T}from"./DataTableRow.js";import{DataTableTable as f}from"./DataTableTable.js";import"@dnd-kit/core";import"@dnd-kit/modifiers";import"@dnd-kit/sortable";import"../table/Table.js";import"@dnd-kit/utilities";import"@tanstack/react-table";import"./drag-and-drop/Handle.js";import{DragAndDropTable as d}from"./drag-and-drop/DragAndDropTable.js";import{Pagination as n}from"./pagination/Pagination.js";const a=o=>r.createElement(m,{...o});a.Body=t,a.DataCell=e,a.DragAndDropTable=d,a.Head=p,a.HeaderCell=b,a.Pagination=n,a.Row=T,a.GlobalFilter=i,a.Table=f,a.Loading=D,a.Error=l;export{a as DataTable};

package/dist/lib/src/components/data-table/DataTableContext.js

@@ -0,0 +1 @@
+import*as t from"react";import N from"use-deep-compare-effect";import{useReactTable as I,getCoreRowModel as x,getPaginationRowModel as A,getSortedRowModel as G,getFilteredRowModel as L}from"@tanstack/react-table";import{AsyncDataState as l}from"./DataTable.types.js";import{getNewAsyncData as z}from"./getNewAsyncData.js";import{useSortByColumn as k}from"./useSorting.js";import{usePagination as B}from"./usePagination.js";const w=t.createContext(null),J=({columns:n,data:a=[],getAsyncData:o,defaultSort:P,initialState:s=void 0,children:y})=>{var b;const[g,u]=t.useState({results:a!=null?a:[],total:(b=a==null?void 0:a.length)!=null?b:0}),{isPaginated:i,applyPagination:D,paginationState:e,setPaginationState:C}=B(s==null?void 0:s.pagination),[f,d]=t.useState(l.NONE),[c,h]=t.useState(""),{setIsSortable:E,isSortable:S,sorting:r,setSorting:M}=k(P),m=t.useCallback(async F=>{if(o)try{d(l.PENDING);const T=await z(o,F,e,r,c);u(T),d(l.FULFILLED)}catch{d(l.REJECTED)}},[o,e==null?void 0:e.pageIndex,e==null?void 0:e.pageSize,r,c]);t.useEffect(()=>{m({})},[m]),N(()=>{!a||u({results:a,total:a.length})},[a]);const p=()=>g.total,v=I({columns:n,data:g.results,pageCount:e?Math.ceil(p()/e.pageSize):-1,initialState:s,state:{sorting:r,globalFilter:c,pagination:e},manualPagination:o&&i,manualSorting:o&&i,enableSorting:f!==l.PENDING,enableGlobalFilter:!o,getCoreRowModel:x(),getPaginationRowModel:i?A():void 0,getSortedRowModel:S||r.length?G():void 0,getFilteredRowModel:L(),onPaginationChange:i?C:void 0,onSortingChange:M,onGlobalFilterChange:h}),R=t.useMemo(()=>({...v,data:g,setData:u,setIsSortable:E,applyPagination:D,getTotalRows:p,isSortable:S,asyncDataState:f,runAsyncData:m}),[v,D,p,S]);return t.createElement(w.Provider,{value:R},y)},O=()=>{const n=t.useContext(w);if(!n)throw new Error("useDataTable can only be called from inside a DataTableProvider");return n};export{J as DataTableProvider,O as useDataTable};

package/dist/{components → lib/src/components}/data-table/DataTableRow.js

@@ -1 +1 @@
-import*as l from"react";import{Table as t}from"../table/Table.js";import{DataTableDataCell as o}from"./DataTableDataCell.js";const r=({row:a})=>l.createElement(t.Row,null,a.getVisibleCells().map(e=>l.createElement(o,{key:e.id,cell:e})));export{r as DataTableRow};
+import*as l from"react";import{Table as t}from"../table/Table.js";import{DataTableDataCell as o}from"./DataTableDataCell.js";const r=({row:a})=>l.createElement(t.Row,null,a.getVisibleCells().map((e,m)=>l.createElement(o,{key:e.id,cell:e})));export{r as DataTableRow};

package/dist/lib/src/components/data-table/drag-and-drop/DragAndDropContainer.js

@@ -0,0 +1 @@
+import{useDataTable as h}from"../DataTableContext.js";import{useSensors as D,useSensor as u,PointerSensor as f,KeyboardSensor as g,DndContext as y,closestCenter as C}from"@dnd-kit/core";import{restrictToVerticalAxis as S}from"@dnd-kit/modifiers";import{sortableKeyboardCoordinates as b,SortableContext as w,verticalListSortingStrategy as x,arrayMove as E}from"@dnd-kit/sortable";import*as c from"react";const p=(t,s,o,r,a)=>{const{active:i,over:d}=t,l=o.indexOf(i[r]),n=o.indexOf(d==null?void 0:d[r]),e=E(s.results,l,n);return a==null||a(l,n,e),{results:e,total:e.length}},m=(t,s)=>t.results.map(o=>{const r=o[s];if(r===void 0)throw new Error("To ensure drag-and-drop works correctly, please ensure that each row has a unique ID. Use the `id` property or pass DataTable an `idColumn` prop that defines the ID property on the rows.");return r}),T=({idColumn:t="id",onChange:s=void 0,children:o})=>{const{data:r,setData:a}=h(),i=c.useMemo(()=>m(r,t),[r]),d=D(u(f),u(g,{coordinateGetter:b}));return c.createElement(y,{sensors:d,collisionDetection:C,onDragEnd:l=>{const{active:n,over:e}=l;n.id&&(e==null?void 0:e.id)&&n.id!==(e==null?void 0:e.id)&&a(v=>p({active:n,over:e},v,i,t,s))},modifiers:[S]},c.createElement(w,{items:i,strategy:x},o))};export{T as DragAndDropContainer,m as getRowOrder,p as processDragEndEvent};

package/dist/lib/src/components/data-table/drag-and-drop/DragAndDropTable.js

@@ -0,0 +1 @@
+import*as e from"react";import{Table as s}from"../../table/Table.js";import{DataTable as D}from"../DataTable.js";import{AsyncDataState as c}from"../DataTable.types.js";import{useDataTable as d}from"../DataTableContext.js";import{DataTableLoading as b}from"../DataTableLoading.js";import{DragAndDropContainer as f}from"./DragAndDropContainer.js";import{DragAndDropTableBody as E}from"./DragAndDropTableBody.js";const g=({idColumn:t,onDragAndDrop:r,sortable:a,striped:o,theme:n,css:m,...i})=>{const{asyncDataState:l}=d(),p=l===c.PENDING;return e.createElement(f,{onChange:r,idColumn:t},e.createElement(b,null),e.createElement(s,{...i,css:{...m,...p&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(D.Head,{theme:n,sortable:a}),e.createElement(E,{striped:o})))};export{g as DragAndDropTable};

package/dist/lib/src/components/data-table/drag-and-drop/DragAndDropTableBody.js

@@ -0,0 +1 @@
+import*as r from"react";import{Table as m}from"../../table/Table.js";import{useDataTable as p}from"../DataTableContext.js";import{DraggableRow as d}from"./DraggableRow.js";const i=({striped:o=!1,...t})=>{const{getRowModel:a}=p();return r.createElement(m.Body,{...t,striped:o},a().rows.map(e=>r.createElement(d,{row:e,key:e.id})))};export{i as DragAndDropTableBody};

package/dist/lib/src/components/data-table/drag-and-drop/DraggableRow.js

@@ -0,0 +1 @@
+import*as e from"react";import{Table as i}from"../../table/Table.js";import{DataTableDataCell as p}from"../DataTableDataCell.js";import"../DataTableContext.js";import"@dnd-kit/core";import"@dnd-kit/modifiers";import{useSortable as f}from"@dnd-kit/sortable";import{CSS as c}from"@dnd-kit/utilities";import{flexRender as d}from"@tanstack/react-table";import{Handle as g}from"./Handle.js";import"../DataTable.js";import"../DataTable.types.js";import"../DataTableLoading.js";const b=({row:t})=>{const{attributes:l,listeners:m,transform:a,setNodeRef:n,isDragging:o}=f({id:t.original.id});return e.createElement(i.Row,{ref:n,css:{transform:c.Transform.toString(a),zIndex:o?5:void 0}},t.getVisibleCells().map((r,s)=>s===0?e.createElement(i.Cell,{key:r.id},e.createElement(g,{...l,...m,isDragging:o,css:{display:"inline-block"},label:"drag and drop"}),d(r.column.columnDef.cell,r.getContext())):e.createElement(p,{key:r.id,cell:r})))};export{b as DraggableRow};

package/dist/lib/src/components/data-table/drag-and-drop/Handle.js

@@ -0,0 +1 @@
+import{ActionIcon as n}from"../../action-icon/ActionIcon.js";import{Icon as s}from"../../icon/Icon.js";import{styled as m}from"../../../stitches.js";import{DragHandle as g}from"@atom-learning/icons";import*as r from"react";const i=m(n,{color:"inherit !important",fill:"currentColor",variants:{isDragging:{true:{cursor:"grabbing"},false:{cursor:"grab"}}}}),l=r.forwardRef(({isDragging:o,size:e,...a},t)=>r.createElement(i,{ref:t,isDragging:o,appearance:"simple",size:e,...a},r.createElement(s,{is:g,size:e})));export{l as Handle,i as StyledHandle};

package/dist/lib/src/components/data-table/usePagination.js

@@ -0,0 +1 @@
+import t from"react";const g={pageIndex:0,pageSize:10},p=a=>{const[e,n]=t.useState(!!a),[i,o]=t.useState({...g,...a||{}}),s=t.useCallback(()=>{n(!0)},[]);return{isPaginated:e,paginationState:i,setPaginationState:o,applyPagination:s}};export{p as usePagination};

package/dist/lib/src/components/data-table/useSorting.js

@@ -0,0 +1 @@
+import e from"react";const i=t=>{const[o,s]=e.useState(!1),[r,n]=e.useState(t?[{id:t.column,desc:t.direction==="desc"}]:[]);return{isSortable:o,setIsSortable:s,sorting:r,setSorting:n}};export{i as useSortByColumn};

package/dist/lib/src/components/table/Table.js

@@ -0,0 +1 @@
+import*as d from"react";import{styled as s}from"../../stitches.js";import{TableBody as m}from"./TableBody.js";import{TableCell as o}from"./TableCell.js";import{TableFooter as p}from"./TableFooter.js";import{TableFooterCell as t}from"./TableFooterCell.js";import{TableHeader as $}from"./TableHeader.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";import{StyledRow as f,TableRow as b}from"./TableRow.js";const n=s("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${o}, ${r}, ${t}`]:{height:"$4"}},lg:{[`${o}, ${r}, ${t}`]:{height:"$5"}}},corners:{round:{[`${r}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${f}:last-child`]:{[`${o}:first-child`]:{borderBottomLeftRadius:"$0"},[`${o}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),e=({size:l="md",corners:a="round",...i})=>d.createElement(n,{size:l,corners:a,...i});e.Body=m,e.Cell=o,e.Footer=p,e.FooterCell=t,e.Header=$,e.HeaderCell=r,e.Row=b,e.displayName="Table";export{e as Table};

package/dist/lib/src/components/table/TableBody.js

@@ -0,0 +1 @@
+import*as d from"react";import{styled as r}from"../../stitches.js";import{StyledRow as i}from"./TableRow.js";const l=r("tbody",{variants:{striped:{true:{[`${i}`]:{"&:nth-child(odd)":{bg:"white"},"&:nth-child(even)":{bg:"$tonal50"}}},false:{bg:"white"}}}}),t=({striped:e=!0,...o})=>d.createElement(l,{striped:e,...o});t.displayName="TableBody";export{t as TableBody};

package/dist/lib/src/components/table/TableRow.js

@@ -0,0 +1 @@
+import*as e from"react";import{styled as l}from"../../stitches.js";const o=l("tr",{bg:"unset"}),r=e.forwardRef((t,a)=>e.createElement(o,{...t,ref:a}));r.displayName="TableRow";export{o as StyledRow,r as TableRow};

package/dist/lib/src/components/tabs/TabsTriggerList.js

@@ -0,0 +1 @@
+import{List as r}from"@radix-ui/react-tabs";import i from"react";import{styled as s}from"../../stitches.js";import{ColorScheme as a}from"../../../../color-scheme/dist/ColorScheme.js";const m=s(r,{flexShrink:0,display:"flex",borderBottom:"1px solid $base3",width:"max-content"}),c=({children:e,colorScheme:t={},...o})=>i.createElement(a,{as:m,base:"slate",accent:"blue",interactive:"hiContrast1",...t,...o},e);export{c as TabsTriggerList};