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

package/dist/color-scheme/dist/ColorScheme.js

@@ -0,0 +1 @@
+import*as a from"react";import{styled as l,colorSchemes as e}from"./stitches.colorscheme.config.js";const f=l("div"),o=a.forwardRef(({base:r="",accent:t="",interactive:c="",className:s,...m},n)=>{const i=[s,e[`interactive-${c}`],e[`accent-${t}`],e[`base-${r}`]].filter(Boolean).join(" ");return a.createElement(f,{ref:n,className:i,...m})});o.displayName="ColorScheme";export{o as ColorScheme};

package/dist/color-scheme/dist/blue.json.js

@@ -0,0 +1 @@
+var e="#F3F8FF",l="#E5F1FF",u="#D6EAFF",b="#C2DEFF",F="#B3D4FA",a="#057AFF",s="#0F67F5",D="#194DCC",A="#102DA3",E="#15235E",r={blue1:e,blue2:l,blue3:u,blue4:b,blue5:F,blue6:a,blue7:s,blue8:D,blue9:A,blue10:E};export{e as blue1,E as blue10,l as blue2,u as blue3,b as blue4,F as blue5,a as blue6,s as blue7,D as blue8,A as blue9,r as default};

package/dist/color-scheme/dist/generateAlphaColors.js

@@ -0,0 +1 @@
+import{parseToRgba as $}from"color2k";const f=[255,255,255,1],t=[.05,.1,.15,.2,.27,.35,.5,.7,.8,.95],e=a=>Math.round(Math.max(Math.min(a,255),0)),u=(a,h)=>{const n={};return Object.entries(h).forEach(([M,i],o)=>{const[p,b,g]=$(i),[r,s,c]=f,m=[e((p-r)/t[o]+r),e((b-s)/t[o]+s),e((g-c)/t[o]+c),t[o]];n[`${a}A${o+1}`]=`rgba(${m.join(",")})`}),n};export{u as generateAlphaColors};

package/dist/color-scheme/dist/slate.json.js

@@ -0,0 +1 @@
+var a="#F6F6F6",s="#EBEBEB",e="#E0E0E0",t="#CECECE",l="#C2C2C2",C="#757575",E="#545454",F="#333333",B="#1F1F1F",r="#1C1C1C",v={slate1:a,slate2:s,slate3:e,slate4:t,slate5:l,slate6:C,slate7:E,slate8:F,slate9:B,slate10:r};export{v as default,a as slate1,r as slate10,s as slate2,e as slate3,t as slate4,l as slate5,C as slate6,E as slate7,F as slate8,B as slate9};

package/dist/color-scheme/dist/stitches.colorscheme.config.js

@@ -0,0 +1 @@
+import{createStitches as u}from"@stitches/react";import i from"./blue.json.js";import n from"./slate.json.js";import{generateAlphaColors as s}from"./generateAlphaColors.js";const t={},$=(c,a)=>{const e={};for(let o=1;o<=10;o++)e[`${c}${o}`]=`$${a}${o}`,e[`${c}A${o}`]=`$${a}A${o}`;return e},{styled:h,createTheme:r}=u({theme:{colors:{background:"white",foreground:n.slate9,foreground6plus:"white",...i,...s("blue",i),...n,...s("slate",n)}}});t["interactive-loContrast1"]=r("interactive-loContrast1",{colors:{interactiveForeground:"$foreground",interactive1:"white",interactive2:"$accent1",interactive3:"$accent2"}}),t["interactive-loContrast2"]=r("interactive-loContrast2",{colors:{interactiveForeground:"$foreground",interactive1:"$accent1",interactive2:"$accent2",interactive3:"$accent3"}}),t["interactive-hiContrast1"]=r("interactive-hiContrast1",{colors:{interactiveForeground:"$foreground6plus",interactive1:"$accent7",interactive2:"$accent8",interactive3:"$accent9"}}),t["interactive-hiContrast2"]=r("interactive-hiContrast2",{colors:{interactiveForeground:"$foreground6plus",interactive1:"$accent8",interactive2:"$accent9",interactive3:"$accent10"}});const l={slate:"slate"},f=()=>{Object.entries(l).forEach(([c,a])=>{const e=`base-${c}`;t[e]=r(e,{colors:$("base",a)})})},v={slate:"slate",blue:"blue"},d=()=>{Object.entries(v).forEach(([c,a])=>{const e=`accent-${c}`;t[e]=r(e,{colors:$("accent",a)})})};f(),d();export{v as accents,l as bases,t as colorSchemes,r as createTheme,h as styled};

package/dist/components/data-table/DataTable.d.ts

@@ -9,6 +9,7 @@ import { DataTableHeaderCell } from './DataTableHeaderCell';
 import { DataTableLoading } from './DataTableLoading';
 import { DataTableRow } from './DataTableRow';
 import { DataTableTable } from './DataTableTable';
+import { DragAndDropTable } from './drag-and-drop';
 import { Pagination } from './pagination';
 declare type TDataTable = React.FC<React.ComponentProps<typeof DataTableProvider>> & {
     /** Default table body implementation for `DataTable`.
@@ -22,6 +23,10 @@ declare type TDataTable = React.FC<React.ComponentProps<typeof DataTableProvider
      *
      */
     DataCell: typeof DataTableDataCell;
+    /**
+     * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop
+     */
+    DragAndDropTable: typeof DragAndDropTable;
     /** Default global search implementation for `DataTable`
      *
      * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.

package/dist/components/data-table/DataTable.types.d.ts

@@ -1,5 +1,6 @@
-import type { Table, SortDirection } from '@tanstack/react-table';
+import type { Table } from '@tanstack/react-table';
 import * as React from 'react';
+import type { VisibilityTableState, ColumnOrderTableState, ColumnPinningTableState, FiltersTableState, SortingTableState, ExpandedTableState, GroupingTableState, ColumnSizingTableState, PaginationTableState, RowSelectionTableState, SortDirection } from '@tanstack/react-table';
 export declare enum AsyncDataState {
     NONE = "none",
     PENDING = "pending",
@@ -8,7 +9,7 @@ export declare enum AsyncDataState {
 }
 export declare type TAsyncDataResult = {
     total: number;
-    results: Array<Record<string, unknown>>;
+    results: TableData;
 };
 export declare type TAsyncDataOptions = {
     pageIndex: number;
@@ -25,4 +26,19 @@ export declare type DataTableContextType<T = unknown> = Table<T> & {
     isSortable: boolean;
     asyncDataState?: AsyncDataState;
     runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>;
+    data: TAsyncDataResult;
+    /**
+     * Directly update the data array that the table rows are built from.
+     * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!
+     *
+     *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop
+     *  — it's probably best to only use one of those two methods for any given table.
+     */
+    setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>;
+};
+export declare type TableData = Array<Record<string, unknown>>;
+export declare type InitialState = Partial<VisibilityTableState & ColumnOrderTableState & ColumnPinningTableState & FiltersTableState & SortingTableState & ExpandedTableState & GroupingTableState & ColumnSizingTableState & PaginationTableState & RowSelectionTableState>;
+export declare type TDefaultSort = {
+    column: string;
+    direction: SortDirection;
 };

package/dist/components/data-table/DataTableContext.d.ts

@@ -1,22 +1,17 @@
 import * as React from 'react';
-import type { VisibilityTableState, ColumnOrderTableState, ColumnPinningTableState, FiltersTableState, SortingTableState, ExpandedTableState, GroupingTableState, ColumnSizingTableState, PaginationTableState, RowSelectionTableState, SortDirection } from '@tanstack/react-table';
-import { DataTableContextType, TGetAsyncData } from './DataTable.types';
-declare type InitialState = Partial<VisibilityTableState & ColumnOrderTableState & ColumnPinningTableState & FiltersTableState & SortingTableState & ExpandedTableState & GroupingTableState & ColumnSizingTableState & PaginationTableState & RowSelectionTableState>;
-declare type TableProviderProps = {
+import { DataTableContextType, TDefaultSort, TGetAsyncData, TableData, InitialState } from './DataTable.types';
+declare type DataTableProviderProps = {
     columns: any;
-    defaultSort?: {
-        column: string;
-        direction: SortDirection;
-    };
+    defaultSort?: TDefaultSort;
     children: React.ReactNode;
     initialState?: InitialState;
 } & ({
-    data: Array<Record<string, unknown>>;
+    data: TableData;
     getAsyncData?: never;
 } | {
     data?: never;
     getAsyncData: TGetAsyncData;
 });
-export declare const DataTableProvider: ({ columns, data: dataProp, getAsyncData, defaultSort, initialState, children }: TableProviderProps) => JSX.Element;
+export declare const DataTableProvider: ({ columns, data: dataProp, getAsyncData, defaultSort, initialState, children }: DataTableProviderProps) => JSX.Element;
 export declare const useDataTable: <T extends Record<string, unknown>>() => DataTableContextType<T>;
 export {};

package/dist/components/data-table/DataTableRow.d.ts

@@ -1,8 +1,7 @@
 import type { Row } from '@tanstack/react-table';
 import * as React from 'react';
 import { Table } from '../table';
-declare type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {
+export declare type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {
     row: Row<Record<string, unknown>>;
 };
 export declare const DataTableRow: React.FC<DataTableRowProps>;
-export {};

package/dist/components/data-table/DataTableTable.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Table } from '../table';
 import { DataTable } from './DataTable';
-declare type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children'> & Partial<Pick<React.ComponentProps<typeof DataTable.Head>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>>;
+export declare type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children'> & Partial<Pick<React.ComponentProps<typeof DataTable.Head>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>>;
 export declare const DataTableTable: React.FC<DataTableTableProps>;
-export {};

package/dist/components/data-table/drag-and-drop/DragAndDropContainer.d.ts

@@ -0,0 +1,21 @@
+import type { TAsyncDataResult, TableData } from '../DataTable.types';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import * as React from 'react';
+declare type DragAndDropContainerProps = {
+    idColumn?: string;
+    onChange?: (oldIndex: number, newIndex: number, newData: TableData) => void;
+};
+export declare const processDragEndEvent: (event: {
+    active: {
+        id: UniqueIdentifier;
+    };
+    over: {
+        id: UniqueIdentifier;
+    };
+}, data: TAsyncDataResult, rowOrder: Array<UniqueIdentifier>, idColumn: UniqueIdentifier, onChange?: ((oldIndex: number, newIndex: number, newData: TableData) => void) | undefined) => {
+    results: Record<string, unknown>[];
+    total: number;
+};
+export declare const getRowOrder: (data: TAsyncDataResult, idColumn: string) => UniqueIdentifier[];
+export declare const DragAndDropContainer: React.FC<DragAndDropContainerProps>;
+export {};

package/dist/components/data-table/drag-and-drop/DragAndDropTable.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { DataTableTableProps } from '../DataTableTable';
+declare type DragAndDropTableProps = DataTableTableProps & {
+    idColumn?: string;
+    onDragAndDrop?: (oldIndex: number, newIndex: number, newData: Record<string, unknown>[]) => void;
+};
+export declare const DragAndDropTable: React.FC<DragAndDropTableProps>;
+export {};

package/dist/components/data-table/drag-and-drop/DragAndDropTableBody.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Table } from '../../table';
+declare type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'>;
+export declare const DragAndDropTableBody: React.FC<DataTableBodyProps>;
+export {};

package/dist/components/data-table/drag-and-drop/DraggableRow.d.ts

@@ -0,0 +1,7 @@
+import type { Row } from '@tanstack/react-table';
+import * as React from 'react';
+import { Table } from '../../table';
+export declare type DataTableDraggableRowProps = React.ComponentProps<typeof Table.Row> & {
+    row: Row<Record<string, unknown>>;
+};
+export declare const DraggableRow: React.FC<DataTableDraggableRowProps>;