@atom-learning/components 6.4.0 → 6.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/checkbox-group/context/CheckboxGroupChecked.context.js.map +1 -1
- package/dist/components/checkbox-group/context/CheckboxGroupMounted.context.js.map +1 -1
- package/dist/components/data-table/DataTableContext.js +1 -1
- package/dist/components/data-table/DataTableContext.js.map +1 -1
- package/dist/components/data-table/DataTableRow.js +1 -1
- package/dist/components/data-table/DataTableRow.js.map +1 -1
- package/dist/components/dialog/Dialog.js.map +1 -1
- package/dist/components/radio-button-field/RadioButtonField.js +1 -1
- package/dist/components/radio-button-field/RadioButtonField.js.map +1 -1
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/toast/ToastCloseButton.js +1 -1
- package/dist/components/toast/ToastCloseButton.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +6 -14
- package/src/animation.css +109 -0
- package/src/utilities.css +87 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroupChecked.context.js","sources":["../../../../src/components/checkbox-group/context/CheckboxGroupChecked.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from '../CheckboxGroup.types'\n\ntype CheckboxGroupCheckedContextValue = {\n checked: CheckboxGroupItemValue[]\n handleItemCheckedChange: (\n newItemChecked: boolean,\n itemValue: CheckboxGroupItemValue\n ) => void\n}\n\ntype CheckboxGroupCheckedContextProps = {\n checked?: CheckboxGroupCheckedContextValue['checked']\n defaultChecked?: CheckboxGroupCheckedContextValue['checked']\n onCheckedChange?: (\n checked: CheckboxGroupCheckedContextValue['checked']\n ) => void\n}\n\nexport const CheckboxGroupCheckedContext =\n React.createContext<CheckboxGroupCheckedContextValue>({\n checked: [],\n handleItemCheckedChange: () => null\n })\n\nconst generateNewCheckedFn = (\n currentChecked: CheckboxGroupCheckedContextValue['checked']\n) => {\n return (newItemChecked, itemValue) => {\n const newCheckedSet = new Set(currentChecked)\n newItemChecked\n
|
|
1
|
+
{"version":3,"file":"CheckboxGroupChecked.context.js","sources":["../../../../src/components/checkbox-group/context/CheckboxGroupChecked.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from '../CheckboxGroup.types'\n\ntype CheckboxGroupCheckedContextValue = {\n checked: CheckboxGroupItemValue[]\n handleItemCheckedChange: (\n newItemChecked: boolean,\n itemValue: CheckboxGroupItemValue\n ) => void\n}\n\ntype CheckboxGroupCheckedContextProps = {\n checked?: CheckboxGroupCheckedContextValue['checked']\n defaultChecked?: CheckboxGroupCheckedContextValue['checked']\n onCheckedChange?: (\n checked: CheckboxGroupCheckedContextValue['checked']\n ) => void\n}\n\nexport const CheckboxGroupCheckedContext =\n React.createContext<CheckboxGroupCheckedContextValue>({\n checked: [],\n handleItemCheckedChange: () => null\n })\n\nconst generateNewCheckedFn = (\n currentChecked: CheckboxGroupCheckedContextValue['checked']\n) => {\n return (newItemChecked, itemValue) => {\n const newCheckedSet = new Set(currentChecked)\n if (newItemChecked) {\n newCheckedSet.add(itemValue)\n } else {\n newCheckedSet.delete(itemValue)\n }\n const newChecked = Array.from(newCheckedSet)\n return newChecked\n }\n}\n\nexport const CheckboxGroupCheckedProvider = ({\n checked: controlledChecked,\n defaultChecked = [],\n onCheckedChange,\n ...rest\n}: React.PropsWithChildren<CheckboxGroupCheckedContextProps>) => {\n const [checked, setChecked] = React.useState(defaultChecked)\n\n const handleItemControlledCheckedChange = React.useCallback(\n (newItemChecked, itemValue) => {\n if (!controlledChecked) return () => null\n const newCheckedFn = generateNewCheckedFn(controlledChecked)\n const newChecked = newCheckedFn(newItemChecked, itemValue)\n onCheckedChange?.(newChecked)\n },\n [onCheckedChange, controlledChecked]\n )\n\n const handleItemCheckedChange = React.useCallback(\n (newItemChecked, itemValue) => {\n setChecked((prevChecked) => {\n const newCheckedFn = generateNewCheckedFn(prevChecked)\n const newChecked = newCheckedFn(newItemChecked, itemValue)\n onCheckedChange?.(newChecked)\n return newChecked\n })\n },\n [onCheckedChange]\n )\n\n const value = React.useMemo<CheckboxGroupCheckedContextValue>(() => {\n const isControlled = Array.isArray(controlledChecked)\n return {\n checked: isControlled\n ? (controlledChecked as CheckboxGroupCheckedContextValue['checked']) // We're literally JUST checking it above but TS still flags it, wrongly, so casting\n : checked,\n handleItemCheckedChange: isControlled\n ? handleItemControlledCheckedChange\n : handleItemCheckedChange\n }\n }, [\n checked,\n handleItemCheckedChange,\n handleItemControlledCheckedChange,\n controlledChecked\n ])\n\n return <CheckboxGroupCheckedContext.Provider value={value} {...rest} />\n}\n"],"names":["CheckboxGroupCheckedContext","React","generateNewCheckedFn","currentChecked","newItemChecked","itemValue","newCheckedSet","CheckboxGroupCheckedProvider","controlledChecked","defaultChecked","onCheckedChange","rest","checked","setChecked","handleItemControlledCheckedChange","newChecked","handleItemCheckedChange","prevChecked","value","isControlled"],"mappings":"wBAoBO,MAAMA,EACXC,EAAM,cAAgD,CACpD,QAAS,CAAA,EACT,wBAAyB,IAAM,IACjC,CAAC,EAEGC,EACJC,GAEO,CAACC,EAAgBC,IAAc,CACpC,MAAMC,EAAgB,IAAI,IAAIH,CAAc,EAC5C,OAAIC,EACFE,EAAc,IAAID,CAAS,EAE3BC,EAAc,OAAOD,CAAS,EAEb,MAAM,KAAKC,CAAa,CAE7C,EAGWC,EAA+B,CAAC,CAC3C,QAASC,EACT,eAAAC,EAAiB,CACjB,EAAA,gBAAAC,EACA,GAAGC,CACL,IAAiE,CAC/D,KAAM,CAACC,EAASC,CAAU,EAAIZ,EAAM,SAASQ,CAAc,EAErDK,EAAoCb,EAAM,YAC9C,CAACG,EAAgBC,IAAc,CAC7B,GAAI,CAACG,EAAmB,MAAO,IAAM,KAErC,MAAMO,EADeb,EAAqBM,CAAiB,EAC3BJ,EAAgBC,CAAS,EACzDK,GAAA,MAAAA,EAAkBK,EACpB,EACA,CAACL,EAAiBF,CAAiB,CACrC,EAEMQ,EAA0Bf,EAAM,YACpC,CAACG,EAAgBC,IAAc,CAC7BQ,EAAYI,GAAgB,CAE1B,MAAMF,EADeb,EAAqBe,CAAW,EACrBb,EAAgBC,CAAS,EACzD,OAAAK,GAAA,MAAAA,EAAkBK,CAAAA,EACXA,CACT,CAAC,CACH,EACA,CAACL,CAAe,CAClB,EAEMQ,EAAQjB,EAAM,QAA0C,IAAM,CAClE,MAAMkB,EAAe,MAAM,QAAQX,CAAiB,EACpD,MAAO,CACL,QAASW,EACJX,EACDI,EACJ,wBAAyBO,EACrBL,EACAE,CACN,CACF,EAAG,CACDJ,EACAI,EACAF,EACAN,CACF,CAAC,EAED,OAAOP,EAAA,cAACD,EAA4B,SAA5B,CAAqC,MAAOkB,EAAQ,GAAGP,EAAM,CACvE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroupMounted.context.js","sources":["../../../../src/components/checkbox-group/context/CheckboxGroupMounted.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from '../CheckboxGroup.types'\n\ntype CheckboxGroupMountedContextValue = {\n mounted: CheckboxGroupItemValue[]\n handleItemMountedChange: (\n newItemMounted: boolean,\n itemValue: CheckboxGroupItemValue\n ) => void\n}\n\nexport const CheckboxGroupMountedContext =\n React.createContext<CheckboxGroupMountedContextValue>({\n mounted: [],\n handleItemMountedChange: () => null\n })\n\nexport const CheckboxGroupMountedProvider = (props) => {\n const { handleItemMountedChange: handleItemMountedChangeFurtherUpContext } =\n React.useContext(CheckboxGroupMountedContext)\n\n const [mounted, setMounted] = React.useState<CheckboxGroupItemValue[]>([])\n const handleItemMountedChange = React.useCallback(\n (newItemMounted, itemValue) => {\n handleItemMountedChangeFurtherUpContext?.(newItemMounted, itemValue)\n setMounted((prevMounted) => {\n const newMountedSet = new Set(prevMounted)\n newItemMounted\n
|
|
1
|
+
{"version":3,"file":"CheckboxGroupMounted.context.js","sources":["../../../../src/components/checkbox-group/context/CheckboxGroupMounted.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from '../CheckboxGroup.types'\n\ntype CheckboxGroupMountedContextValue = {\n mounted: CheckboxGroupItemValue[]\n handleItemMountedChange: (\n newItemMounted: boolean,\n itemValue: CheckboxGroupItemValue\n ) => void\n}\n\nexport const CheckboxGroupMountedContext =\n React.createContext<CheckboxGroupMountedContextValue>({\n mounted: [],\n handleItemMountedChange: () => null\n })\n\nexport const CheckboxGroupMountedProvider = (props) => {\n const { handleItemMountedChange: handleItemMountedChangeFurtherUpContext } =\n React.useContext(CheckboxGroupMountedContext)\n\n const [mounted, setMounted] = React.useState<CheckboxGroupItemValue[]>([])\n const handleItemMountedChange = React.useCallback(\n (newItemMounted, itemValue) => {\n handleItemMountedChangeFurtherUpContext?.(newItemMounted, itemValue)\n setMounted((prevMounted) => {\n const newMountedSet = new Set(prevMounted)\n if (newItemMounted) {\n newMountedSet.add(itemValue)\n } else {\n newMountedSet.delete(itemValue)\n }\n const newMounted = Array.from(newMountedSet)\n return newMounted\n })\n },\n [handleItemMountedChangeFurtherUpContext]\n )\n\n const value = React.useMemo<CheckboxGroupMountedContextValue>(\n () => ({ mounted, handleItemMountedChange }),\n [mounted, handleItemMountedChange]\n )\n\n return <CheckboxGroupMountedContext.Provider value={value} {...props} />\n}\n"],"names":["CheckboxGroupMountedContext","React","CheckboxGroupMountedProvider","props","handleItemMountedChangeFurtherUpContext","mounted","setMounted","handleItemMountedChange","newItemMounted","itemValue","prevMounted","newMountedSet","value"],"mappings":"wBAYa,MAAAA,EACXC,EAAM,cAAgD,CACpD,QAAS,CAAA,EACT,wBAAyB,IAAM,IACjC,CAAC,EAEUC,EAAgCC,GAAU,CACrD,KAAM,CAAE,wBAAyBC,CAAwC,EACvEH,EAAM,WAAWD,CAA2B,EAExC,CAACK,EAASC,CAAU,EAAIL,EAAM,SAAmC,CAAE,CAAA,EACnEM,EAA0BN,EAAM,YACpC,CAACO,EAAgBC,IAAc,CAC7BL,GAAA,MAAAA,EAA0CI,EAAgBC,CAC1DH,EAAAA,EAAYI,GAAgB,CAC1B,MAAMC,EAAgB,IAAI,IAAID,CAAW,EACzC,OAAIF,EACFG,EAAc,IAAIF,CAAS,EAE3BE,EAAc,OAAOF,CAAS,EAEb,MAAM,KAAKE,CAAa,CAE7C,CAAC,CACH,EACA,CAACP,CAAuC,CAC1C,EAEMQ,EAAQX,EAAM,QAClB,KAAO,CAAE,QAAAI,EAAS,wBAAAE,CAAwB,GAC1C,CAACF,EAASE,CAAuB,CACnC,EAEA,OAAON,EAAA,cAACD,EAA4B,SAA5B,CAAqC,MAAOY,EAAQ,GAAGT,CAAAA,CAAO,CACxE"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{v4 as
|
|
1
|
+
import{v4 as W}from"@lukeed/uuid";import{useReactTable as j,getCoreRowModel as q,getPaginationRowModel as H,getSortedRowModel as K,getFilteredRowModel as Q,getExpandedRowModel as X}from"@tanstack/react-table";import*as e from"react";import Y from"use-deep-compare-effect";import{AsyncDataState as i}from"./DataTable.types.js";import{getNewAsyncData as Z}from"./getNewAsyncData.js";import{usePagination as _}from"./usePagination.js";import{useSortByColumn as $}from"./useSorting.js";const M=e.createContext(null),ee=({columns:l,data:n=[],getAsyncData:t,defaultSort:T,initialState:g=void 0,disabledRows:x,enableRowSelection:u,onRowSelectionChange:h,children:F})=>{const C=e.useRef(W()),[d,c]=e.useState({results:n??[],total:(n==null?void 0:n.length)??0}),[P,I]=e.useState({}),[N,A]=e.useState({}),[L,G]=e.useState({top:null,bottom:null,offsetTop:0,isVisible:!0}),{isPaginated:s,applyPagination:D,paginationState:a,setPaginationState:z}=_(g==null?void 0:g.pagination),[y,S]=e.useState(i.NONE),[b,k]=e.useState(""),{setIsSortable:B,isSortable:w,sorting:r,setSorting:J}=$(T),m=e.useCallback(async o=>{if(t)try{S(i.PENDING);const R=await Z(t,o,a,r,b);c(R),S(i.FULFILLED)}catch{S(i.REJECTED)}},[t,a==null?void 0:a.pageIndex,a==null?void 0:a.pageSize,r,b]);e.useEffect(()=>{m({})},[m]),Y(()=>{n&&c({results:n,total:n.length})},[n]);const p=()=>d.total,E=j({columns:l,data:d.results,pageCount:t&&a?Math.ceil(p()/a.pageSize):-1,initialState:g,state:{sorting:r,globalFilter:b,pagination:a,rowSelection:P,expanded:N},manualPagination:t&&s,manualSorting:t&&s,enableSorting:y!==i.PENDING,enableGlobalFilter:!t,enableRowSelection:u,onExpandedChange:A,getSubRows:o=>o.subRows,onRowSelectionChange:o=>{h&&h(o),I(o)},getCoreRowModel:q(),getPaginationRowModel:s?H():void 0,getSortedRowModel:w||r.length?K():void 0,getFilteredRowModel:Q(),getExpandedRowModel:X(),onPaginationChange:s?z:void 0,onSortingChange:J,onGlobalFilterChange:k,globalFilterFn:(o,R,V)=>{const v=U=>U.toLowerCase().includes(V.toLowerCase());if(o.depth>0)return!0;const f=o.getValue(R);switch(typeof f){case"string":return v(f);case"boolean":case"number":return v(String(f));default:return!1}}}),O=e.useMemo(()=>({...E,columns:l,data:d,setData:c,setIsSortable:B,applyPagination:D,getTotalRows:p,isSortable:w,asyncDataState:y,runAsyncData:m,hasAsyncData:!!t,disabledRows:x,enableRowSelection:u,rowSelection:P,tablePosition:L,setTablePosition:G,tableId:C.current}),[E,D,p,w,u,C,t]);return e.createElement(M.Provider,{value:O},F)},te=()=>{const l=e.useContext(M);if(!l)throw new Error("useDataTable can only be called from inside a DataTableProvider");return l};export{ee as DataTableProvider,te as useDataTable};
|
|
2
2
|
//# sourceMappingURL=DataTableContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import { v4 as uuid } from '@lukeed/uuid'\nimport type {\n ExpandedState,\n OnChangeFn,\n PaginationState,\n Row,\n RowSelectionState\n} from '@tanstack/react-table'\nimport {\n getCoreRowModel,\n getExpandedRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nimport {\n AsyncDataState,\n DataTableContextType,\n InitialState,\n TableData,\n TablePosition,\n TAsyncDataOptions,\n TAsyncDataResult,\n TDefaultSort,\n TGetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n columns\n defaultSort?: TDefaultSort\n children: React.ReactNode\n initialState?: InitialState\n disabledRows?: Record<string, boolean>\n enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n onRowSelectionChange?: OnChangeFn<RowSelectionState>\n} & (\n | { data: TableData; getAsyncData?: never }\n | { data?: never; getAsyncData: TGetAsyncData }\n)\n\nexport const DataTableProvider = ({\n columns,\n data: dataProp = [],\n getAsyncData,\n defaultSort,\n initialState = undefined,\n disabledRows,\n enableRowSelection,\n onRowSelectionChange,\n children\n}: DataTableProviderProps): JSX.Element => {\n const tableId = React.useRef(uuid())\n\n const [data, setData] = React.useState<TAsyncDataResult>({\n results: dataProp ?? [],\n total: dataProp?.length ?? 0\n })\n\n const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})\n const [expanded, setExpanded] = React.useState<ExpandedState>({})\n\n const [tablePosition, setTablePosition] = React.useState<TablePosition>({\n top: null,\n bottom: null,\n offsetTop: 0,\n isVisible: true\n })\n\n const { isPaginated, applyPagination, paginationState, setPaginationState } =\n usePagination(initialState?.pagination)\n\n const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n AsyncDataState.NONE\n )\n\n const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n const { setIsSortable, isSortable, sorting, setSorting } =\n useSortByColumn(defaultSort)\n\n const runAsyncData = React.useCallback(\n async (overrideAsyncDataOptions: Partial<TAsyncDataOptions>) => {\n if (!getAsyncData) return\n\n try {\n setAsyncDataState(AsyncDataState.PENDING)\n\n const newData = await getNewAsyncData(\n getAsyncData,\n overrideAsyncDataOptions,\n paginationState as PaginationState,\n sorting,\n globalFilter\n )\n\n setData(newData as TAsyncDataResult)\n setAsyncDataState(AsyncDataState.FULFILLED)\n } catch (error) {\n setAsyncDataState(AsyncDataState.REJECTED)\n }\n },\n [\n getAsyncData,\n paginationState?.pageIndex,\n paginationState?.pageSize,\n sorting,\n globalFilter\n ]\n )\n\n React.useEffect(() => {\n runAsyncData({})\n }, [runAsyncData])\n\n useDeepCompareEffect(() => {\n if (!dataProp) return\n\n setData({ results: dataProp, total: dataProp.length })\n }, [dataProp])\n\n const getTotalRows = () => data.total\n\n const table = useReactTable<unknown>({\n columns,\n data: data.results,\n pageCount:\n getAsyncData && paginationState\n ? Math.ceil(getTotalRows() / paginationState.pageSize)\n : -1,\n initialState: initialState,\n state: {\n sorting,\n globalFilter,\n pagination: paginationState,\n rowSelection,\n expanded\n },\n manualPagination: getAsyncData && isPaginated,\n manualSorting: getAsyncData && isPaginated,\n enableSorting: asyncDataState !== AsyncDataState.PENDING,\n enableGlobalFilter: !getAsyncData,\n enableRowSelection,\n onExpandedChange: setExpanded,\n getSubRows: (row: Row<unknown>) => row.subRows,\n onRowSelectionChange: (updaterOrValue) => {\n if (onRowSelectionChange) onRowSelectionChange(updaterOrValue)\n setRowSelection(updaterOrValue)\n },\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n getSortedRowModel:\n isSortable || sorting.length ? getSortedRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n onPaginationChange: isPaginated ? setPaginationState : undefined,\n onSortingChange: setSorting,\n onGlobalFilterChange: setGlobalFilter,\n globalFilterFn: (row, columnId, filterValue) => {\n const checkFilterMatchesCell = (cellValue: string) =>\n cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n const isSubRow = row.depth > 0\n\n if (isSubRow) return true\n\n const value = row.getValue(columnId)\n switch (typeof value) {\n case 'string':\n return checkFilterMatchesCell(value)\n case 'boolean':\n case 'number':\n return checkFilterMatchesCell(String(value))\n default:\n return false\n }\n }\n })\n\n const value: DataTableContextType = React.useMemo(() => {\n return {\n ...table,\n columns,\n data,\n setData,\n setIsSortable,\n applyPagination,\n getTotalRows,\n isSortable,\n asyncDataState,\n runAsyncData,\n hasAsyncData: !!getAsyncData,\n disabledRows,\n enableRowSelection,\n rowSelection,\n tablePosition,\n setTablePosition,\n tableId: tableId.current\n }\n }, [\n table,\n applyPagination,\n getTotalRows,\n isSortable,\n enableRowSelection,\n tableId,\n getAsyncData\n ])\n\n return (\n <DataTableContext.Provider value={value}>\n {children}\n </DataTableContext.Provider>\n )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n if (!context)\n throw new Error(\n 'useDataTable can only be called from inside a DataTableProvider'\n )\n\n return context\n}\n"],"names":["DataTableContext","React","DataTableProvider","columns","dataProp","getAsyncData","defaultSort","initialState","disabledRows","enableRowSelection","onRowSelectionChange","children","tableId","uuid","data","setData","rowSelection","setRowSelection","expanded","setExpanded","tablePosition","setTablePosition","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","row","updaterOrValue","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","getExpandedRowModel","columnId","filterValue","checkFilterMatchesCell","cellValue","value","useDataTable","context"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import { v4 as uuid } from '@lukeed/uuid'\nimport type {\n ExpandedState,\n OnChangeFn,\n PaginationState,\n Row,\n RowSelectionState\n} from '@tanstack/react-table'\nimport {\n getCoreRowModel,\n getExpandedRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nimport {\n AsyncDataState,\n DataTableContextType,\n InitialState,\n TableData,\n TablePosition,\n TAsyncDataOptions,\n TAsyncDataResult,\n TDefaultSort,\n TGetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n columns\n defaultSort?: TDefaultSort\n children: React.ReactNode\n initialState?: InitialState\n disabledRows?: Record<string, boolean>\n enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n onRowSelectionChange?: OnChangeFn<RowSelectionState>\n} & (\n | { data: TableData; getAsyncData?: never }\n | { data?: never; getAsyncData: TGetAsyncData }\n)\n\nexport const DataTableProvider = ({\n columns,\n data: dataProp = [],\n getAsyncData,\n defaultSort,\n initialState = undefined,\n disabledRows,\n enableRowSelection,\n onRowSelectionChange,\n children\n}: DataTableProviderProps): JSX.Element => {\n const tableId = React.useRef(uuid())\n\n const [data, setData] = React.useState<TAsyncDataResult>({\n results: dataProp ?? [],\n total: dataProp?.length ?? 0\n })\n\n const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})\n const [expanded, setExpanded] = React.useState<ExpandedState>({})\n\n const [tablePosition, setTablePosition] = React.useState<TablePosition>({\n top: null,\n bottom: null,\n offsetTop: 0,\n isVisible: true\n })\n\n const { isPaginated, applyPagination, paginationState, setPaginationState } =\n usePagination(initialState?.pagination)\n\n const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n AsyncDataState.NONE\n )\n\n const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n const { setIsSortable, isSortable, sorting, setSorting } =\n useSortByColumn(defaultSort)\n\n const runAsyncData = React.useCallback(\n async (overrideAsyncDataOptions: Partial<TAsyncDataOptions>) => {\n if (!getAsyncData) return\n\n try {\n setAsyncDataState(AsyncDataState.PENDING)\n\n const newData = await getNewAsyncData(\n getAsyncData,\n overrideAsyncDataOptions,\n paginationState as PaginationState,\n sorting,\n globalFilter\n )\n\n setData(newData as TAsyncDataResult)\n setAsyncDataState(AsyncDataState.FULFILLED)\n } catch (_error) {\n setAsyncDataState(AsyncDataState.REJECTED)\n }\n },\n [\n getAsyncData,\n paginationState?.pageIndex,\n paginationState?.pageSize,\n sorting,\n globalFilter\n ]\n )\n\n React.useEffect(() => {\n runAsyncData({})\n }, [runAsyncData])\n\n useDeepCompareEffect(() => {\n if (!dataProp) return\n\n setData({ results: dataProp, total: dataProp.length })\n }, [dataProp])\n\n const getTotalRows = () => data.total\n\n const table = useReactTable<unknown>({\n columns,\n data: data.results,\n pageCount:\n getAsyncData && paginationState\n ? Math.ceil(getTotalRows() / paginationState.pageSize)\n : -1,\n initialState: initialState,\n state: {\n sorting,\n globalFilter,\n pagination: paginationState,\n rowSelection,\n expanded\n },\n manualPagination: getAsyncData && isPaginated,\n manualSorting: getAsyncData && isPaginated,\n enableSorting: asyncDataState !== AsyncDataState.PENDING,\n enableGlobalFilter: !getAsyncData,\n enableRowSelection,\n onExpandedChange: setExpanded,\n getSubRows: (row: Row<unknown>) => row.subRows,\n onRowSelectionChange: (updaterOrValue) => {\n if (onRowSelectionChange) onRowSelectionChange(updaterOrValue)\n setRowSelection(updaterOrValue)\n },\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n getSortedRowModel:\n isSortable || sorting.length ? getSortedRowModel() : undefined,\n getFilteredRowModel: getFilteredRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n onPaginationChange: isPaginated ? setPaginationState : undefined,\n onSortingChange: setSorting,\n onGlobalFilterChange: setGlobalFilter,\n globalFilterFn: (row, columnId, filterValue) => {\n const checkFilterMatchesCell = (cellValue: string) =>\n cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n const isSubRow = row.depth > 0\n\n if (isSubRow) return true\n\n const value = row.getValue(columnId)\n switch (typeof value) {\n case 'string':\n return checkFilterMatchesCell(value)\n case 'boolean':\n case 'number':\n return checkFilterMatchesCell(String(value))\n default:\n return false\n }\n }\n })\n\n const value: DataTableContextType = React.useMemo(() => {\n return {\n ...table,\n columns,\n data,\n setData,\n setIsSortable,\n applyPagination,\n getTotalRows,\n isSortable,\n asyncDataState,\n runAsyncData,\n hasAsyncData: !!getAsyncData,\n disabledRows,\n enableRowSelection,\n rowSelection,\n tablePosition,\n setTablePosition,\n tableId: tableId.current\n }\n }, [\n table,\n applyPagination,\n getTotalRows,\n isSortable,\n enableRowSelection,\n tableId,\n getAsyncData\n ])\n\n return (\n <DataTableContext.Provider value={value}>\n {children}\n </DataTableContext.Provider>\n )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n if (!context)\n throw new Error(\n 'useDataTable can only be called from inside a DataTableProvider'\n )\n\n return context\n}\n"],"names":["DataTableContext","React","DataTableProvider","columns","dataProp","getAsyncData","defaultSort","initialState","disabledRows","enableRowSelection","onRowSelectionChange","children","tableId","uuid","data","setData","rowSelection","setRowSelection","expanded","setExpanded","tablePosition","setTablePosition","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","row","updaterOrValue","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","getExpandedRowModel","columnId","filterValue","checkFilterMatchesCell","cellValue","value","useDataTable","context"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ChevronDown as w,ChevronRight as x}from"@atom-learning/icons";import C from"clsx";import*as r from"react";import{styled as D}from"../../styled.js";import{Icon as E}from"../icon/Icon.js";import{Table as l}from"../table/Table.js";import{useDataTable as h}from"./DataTableContext.js";import{DataTableDataCell as v}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as y}from"./DataTableRowSelectionCheckbox.js";const S=D(l.Row,{base:["bg-[initial]","relative"],variants:{isSelected:{true:["odd:bg-primary-100"]},isDisabled:{true:["opacity-30"]},isFocusable:{true:["translate-y-0","duration-200","ease-out","transition-shadow","transition-transform","hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]","hover:-translate-y-px","hover:z-3","focus:outline-2","focus:outline-primary-500","focus:outline-solid","focus:-outline-offset-4","focus:[&_td]:bg-transparent"]}}}),d=e=>e?!!(e.closest("button, a, input, select, textarea")||e.getAttribute("role")==="button"):!1,k=({row:e,rowAction:n})=>{const{enableRowSelection:m,disabledRows:i,getCanSomeRowsExpand:u}=h(),s=!!(i!=null&&i[e.id]),p=e.getToggleExpandedHandler(),g=e.getToggleSelectedHandler(),f=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected(),c=(t,o)=>{!n||!o.target.closest("tr")||d(o.target)||n(t.original,o)},b=t=>{if(t.key==="Enter"||t.key===" "){if(d(t.target))return;t.preventDefault(),c(e,t)}if(t.key==="ArrowDown"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.nextElementSibling;a&&a.tagName==="TR"&&a.focus()}if(t.key==="ArrowUp"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.previousElementSibling;a&&a.tagName==="TR"&&a.focus()}};return r.createElement(S,{isSelected:e.getIsSelected(),isDisabled:s,isFocusable:!!n&&!s,...n&&{onClick:t=>c(e,t),tabIndex:0,className:"cursor-pointer",onKeyDown:b}},u()&&r.createElement(l.Cell,{"data-testid":`expand-icon-${e.id}`,onClick:p,className:C("w-10",e.getCanExpand()?"cursor-pointer":"cursor-auto")},e.getCanExpand()&&r.createElement(E,{is:e.getIsExpanded()?w:x})),m&&r.createElement(l.Cell,{className:"w-10"},r.createElement(y,{row:e,checked:f(),onCheckedChange:g})),e.getVisibleCells().map(
|
|
1
|
+
import{ChevronDown as w,ChevronRight as x}from"@atom-learning/icons";import C from"clsx";import*as r from"react";import{styled as D}from"../../styled.js";import{Icon as E}from"../icon/Icon.js";import{Table as l}from"../table/Table.js";import{useDataTable as h}from"./DataTableContext.js";import{DataTableDataCell as v}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as y}from"./DataTableRowSelectionCheckbox.js";const S=D(l.Row,{base:["bg-[initial]","relative"],variants:{isSelected:{true:["odd:bg-primary-100"]},isDisabled:{true:["opacity-30"]},isFocusable:{true:["translate-y-0","duration-200","ease-out","transition-shadow","transition-transform","hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]","hover:-translate-y-px","hover:z-3","focus:outline-2","focus:outline-primary-500","focus:outline-solid","focus:-outline-offset-4","focus:[&_td]:bg-transparent"]}}}),d=e=>e?!!(e.closest("button, a, input, select, textarea")||e.getAttribute("role")==="button"):!1,k=({row:e,rowAction:n})=>{const{enableRowSelection:m,disabledRows:i,getCanSomeRowsExpand:u}=h(),s=!!(i!=null&&i[e.id]),p=e.getToggleExpandedHandler(),g=e.getToggleSelectedHandler(),f=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected(),c=(t,o)=>{!n||!o.target.closest("tr")||d(o.target)||n(t.original,o)},b=t=>{if(t.key==="Enter"||t.key===" "){if(d(t.target))return;t.preventDefault(),c(e,t)}if(t.key==="ArrowDown"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.nextElementSibling;a&&a.tagName==="TR"&&a.focus()}if(t.key==="ArrowUp"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.previousElementSibling;a&&a.tagName==="TR"&&a.focus()}};return r.createElement(S,{isSelected:e.getIsSelected(),isDisabled:s,isFocusable:!!n&&!s,...n&&{onClick:t=>c(e,t),tabIndex:0,className:"cursor-pointer",onKeyDown:b}},u()&&r.createElement(l.Cell,{"data-testid":`expand-icon-${e.id}`,onClick:p,className:C("w-10",e.getCanExpand()?"cursor-pointer":"cursor-auto")},e.getCanExpand()&&r.createElement(E,{is:e.getIsExpanded()?w:x})),m&&r.createElement(l.Cell,{className:"w-10"},r.createElement(y,{row:e,checked:f(),onCheckedChange:g})),e.getVisibleCells().map(t=>r.createElement(v,{key:t.id,cell:t})))};export{k as DataTableRow};
|
|
2
2
|
//# sourceMappingURL=DataTableRow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n row: Row<Record<string, unknown>>\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n base: ['bg-[initial]', 'relative'],\n variants: {\n isSelected: {\n true: ['odd:bg-primary-100']\n },\n isDisabled: {\n true: ['opacity-30']\n },\n isFocusable: {\n true: [\n 'translate-y-0',\n 'duration-200',\n 'ease-out',\n 'transition-shadow',\n 'transition-transform',\n 'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n 'hover:-translate-y-px',\n 'hover:z-3',\n 'focus:outline-2',\n 'focus:outline-primary-500',\n 'focus:outline-solid',\n 'focus:-outline-offset-4',\n 'focus:[&_td]:bg-transparent'\n ]\n }\n }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n if (!element) return false\n if (element.closest('button, a, input, select, textarea')) return true\n if (element.getAttribute('role') === 'button') return true\n return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n useDataTable()\n\n const isDisabled = !!disabledRows?.[row.id]\n\n const toggleExpandHandler = row.getToggleExpandedHandler()\n const toggleSelectHandler = row.getToggleSelectedHandler()\n\n const getCheckedState = (): boolean | 'indeterminate' => {\n if (row.getIsSomeSelected()) return 'indeterminate'\n return row.getIsSelected()\n }\n\n const handleRowClick = (\n rowData: Row<Record<string, unknown>>,\n event: React.MouseEvent<HTMLTableRowElement>\n ) => {\n if (!rowAction) return\n\n // Skip if clicking on an interactive element\n const rowElement = (event.target as Element).closest('tr')\n if (!rowElement || isElementInteractive(event.target as Element)) {\n return\n }\n\n rowAction(rowData.original, event)\n }\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n if (isElementInteractive(event.target as Element)) {\n return\n }\n event.preventDefault()\n handleRowClick(\n row,\n event as unknown as React.MouseEvent<HTMLTableRowElement>\n )\n }\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n const currentRow = (event.target as HTMLElement).closest('tr')\n const nextRow = currentRow?.nextElementSibling as HTMLElement\n if (nextRow && nextRow.tagName === 'TR') {\n nextRow.focus()\n }\n }\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n const currentRow = (event.target as HTMLElement).closest('tr')\n const previousRow = currentRow?.previousElementSibling as HTMLElement\n if (previousRow && previousRow.tagName === 'TR') {\n previousRow.focus()\n }\n }\n }\n\n return (\n <StyledRow\n isSelected={row.getIsSelected()}\n isDisabled={isDisabled}\n isFocusable={!!rowAction && !isDisabled}\n {...(rowAction && {\n onClick: (event) => handleRowClick(row, event),\n tabIndex: 0,\n className: 'cursor-pointer',\n onKeyDown: handleKeyDown\n })}\n >\n {getCanSomeRowsExpand() && (\n <Table.Cell\n data-testid={`expand-icon-${row.id}`}\n onClick={toggleExpandHandler}\n className={clsx(\n 'w-10',\n row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n )}\n >\n {row.getCanExpand() && (\n <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n )}\n </Table.Cell>\n )}\n\n {enableRowSelection && (\n <Table.Cell className=\"w-10\">\n <DataTableRowSelectionCheckbox\n row={row}\n checked={getCheckedState()}\n onCheckedChange={toggleSelectHandler}\n />\n </Table.Cell>\n )}\n {row.getVisibleCells().map((cell
|
|
1
|
+
{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n row: Row<Record<string, unknown>>\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n base: ['bg-[initial]', 'relative'],\n variants: {\n isSelected: {\n true: ['odd:bg-primary-100']\n },\n isDisabled: {\n true: ['opacity-30']\n },\n isFocusable: {\n true: [\n 'translate-y-0',\n 'duration-200',\n 'ease-out',\n 'transition-shadow',\n 'transition-transform',\n 'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n 'hover:-translate-y-px',\n 'hover:z-3',\n 'focus:outline-2',\n 'focus:outline-primary-500',\n 'focus:outline-solid',\n 'focus:-outline-offset-4',\n 'focus:[&_td]:bg-transparent'\n ]\n }\n }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n if (!element) return false\n if (element.closest('button, a, input, select, textarea')) return true\n if (element.getAttribute('role') === 'button') return true\n return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n useDataTable()\n\n const isDisabled = !!disabledRows?.[row.id]\n\n const toggleExpandHandler = row.getToggleExpandedHandler()\n const toggleSelectHandler = row.getToggleSelectedHandler()\n\n const getCheckedState = (): boolean | 'indeterminate' => {\n if (row.getIsSomeSelected()) return 'indeterminate'\n return row.getIsSelected()\n }\n\n const handleRowClick = (\n rowData: Row<Record<string, unknown>>,\n event: React.MouseEvent<HTMLTableRowElement>\n ) => {\n if (!rowAction) return\n\n // Skip if clicking on an interactive element\n const rowElement = (event.target as Element).closest('tr')\n if (!rowElement || isElementInteractive(event.target as Element)) {\n return\n }\n\n rowAction(rowData.original, event)\n }\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n if (isElementInteractive(event.target as Element)) {\n return\n }\n event.preventDefault()\n handleRowClick(\n row,\n event as unknown as React.MouseEvent<HTMLTableRowElement>\n )\n }\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n const currentRow = (event.target as HTMLElement).closest('tr')\n const nextRow = currentRow?.nextElementSibling as HTMLElement\n if (nextRow && nextRow.tagName === 'TR') {\n nextRow.focus()\n }\n }\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n const currentRow = (event.target as HTMLElement).closest('tr')\n const previousRow = currentRow?.previousElementSibling as HTMLElement\n if (previousRow && previousRow.tagName === 'TR') {\n previousRow.focus()\n }\n }\n }\n\n return (\n <StyledRow\n isSelected={row.getIsSelected()}\n isDisabled={isDisabled}\n isFocusable={!!rowAction && !isDisabled}\n {...(rowAction && {\n onClick: (event) => handleRowClick(row, event),\n tabIndex: 0,\n className: 'cursor-pointer',\n onKeyDown: handleKeyDown\n })}\n >\n {getCanSomeRowsExpand() && (\n <Table.Cell\n data-testid={`expand-icon-${row.id}`}\n onClick={toggleExpandHandler}\n className={clsx(\n 'w-10',\n row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n )}\n >\n {row.getCanExpand() && (\n <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n )}\n </Table.Cell>\n )}\n\n {enableRowSelection && (\n <Table.Cell className=\"w-10\">\n <DataTableRowSelectionCheckbox\n row={row}\n checked={getCheckedState()}\n onCheckedChange={toggleSelectHandler}\n />\n </Table.Cell>\n )}\n {row.getVisibleCells().map((cell) => {\n return <DataTableDataCell key={cell.id} cell={cell} />\n })}\n </StyledRow>\n )\n}\n"],"names":["StyledRow","styled","Table","isElementInteractive","element","DataTableRow","row","rowAction","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","handleRowClick","rowData","event","handleKeyDown","currentRow","nextRow","previousRow","React","clsx","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","DataTableDataCell"],"mappings":"8aAkBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,KAAM,CAAC,eAAgB,UAAU,EACjC,SAAU,CACR,WAAY,CACV,KAAM,CAAC,oBAAoB,CAC7B,EACA,WAAY,CACV,KAAM,CAAC,YAAY,CACrB,EACA,YAAa,CACX,KAAM,CACJ,gBACA,eACA,WACA,oBACA,uBACA,sDACA,wBACA,YACA,kBACA,4BACA,sBACA,0BACA,6BACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,CAAA,EAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,IAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,EAAA,GAElCO,EAAsBP,EAAI,2BAC1BQ,EAAsBR,EAAI,yBAAyB,EAEnDS,EAAkB,IAClBT,EAAI,oBAA4B,gBAC7BA,EAAI,cAAc,EAGrBU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,iBACNF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,eAAe,EACrB,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,KAAAA,OAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,OAEZ,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,eAAe,EACrB,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,KAAAA,OAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,MAEhB,CAAA,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,gBAChB,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,UAAW,iBACX,UAAWC,CACb,GAECT,EAAqB,GACpBa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAeI,EAAI,EAAE,GAClC,QAASO,EACT,UAAWW,EACT,OACAlB,EAAI,aAAA,EAAiB,iBAAmB,aAC1C,GAECA,EAAI,gBACHiB,EAAA,cAACE,EAAA,CAAK,GAAInB,EAAI,gBAAkBoB,EAAcC,CAAAA,CAAc,CAEhE,EAGDnB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,UAAU,QACpBqB,EAAA,cAACK,EAAA,CACC,IAAKtB,EACL,QAASS,IACT,gBAAiBD,EACnB,CACF,EAEDR,EAAI,gBAAgB,EAAE,IAAKuB,GACnBN,EAAA,cAACO,EAAA,CAAkB,IAAKD,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Description, Root, Title, Trigger } from '@radix-ui/react-dialog'\n\nimport {
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Description, Root, Title, Trigger } from '@radix-ui/react-dialog'\n\nimport { DialogBackground } from './DialogBackground'\nimport { DialogClose } from './DialogClose'\nimport { DialogContent } from './DialogContent'\nimport { DialogFooter } from './DialogFooter'\nimport { DialogHeading } from './DialogHeading'\n\nexport const Dialog = Object.assign(Root, {\n Background: DialogBackground,\n Close: DialogClose,\n Content: DialogContent,\n Heading: DialogHeading,\n Footer: DialogFooter,\n\n Description: Description,\n Title: Title,\n Trigger: Trigger\n})\n\nDialog.displayName = 'Dialog'\n"],"names":["Dialog","Root","DialogBackground","DialogClose","DialogContent","DialogHeading","DialogFooter","Description","Title","Trigger"],"mappings":"sVAQO,MAAMA,EAAS,OAAO,OAAOC,EAAM,CACxC,WAAYC,EACZ,MAAOC,EACP,QAASC,EACT,QAASC,EACT,OAAQC,EAER,YAAaC,EACb,MAAOC,EACP,QAASC,CACX,CAAC,EAEDT,EAAO,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{useFormContext as C,useController as F}from"react-hook-form";import{Description as
|
|
1
|
+
import*as e from"react";import{useFormContext as C,useController as F}from"react-hook-form";import{Description as R}from"../field-wrapper/FieldDescription.js";import{useFieldError as V}from"../form/useFieldError.js";import{InlineMessage as h}from"../inline-message/InlineMessage.js";import{Label as v}from"../label/Label.js";import{RadioButtonGroup as B}from"../radio-button/RadioButtonGroup.js";import{styled as x}from"../../styled.js";import{RadioField as y}from"./RadioField.js";const q=x("fieldset",{base:["min-w-0"]}),u=({children:c,className:d,direction:f="column",defaultValue:r,value:o,description:l,label:p,name:a,validation:t,onValueChange:n,...b})=>{const{control:E}=C(),{field:{ref:g,onChange:m,value:N}}=F({name:a,control:E,rules:t,defaultValue:r}),{error:i}=V(a);return e.useEffect(()=>{typeof o<"u"&&m(o)},[o]),e.createElement(q,{className:d},e.createElement(v,{as:"legend",required:!!(t!=null&&t.required),className:"mb-3 p-0"},p),l&&e.createElement(R,{className:"mb-3"},l),e.createElement(B,{ref:g,direction:f,defaultValue:r,onValueChange:s=>{m(s),n==null||n(s)},value:N,...b},c),i&&e.createElement(h,{className:"mt-2"},i))},I=Object.assign(u,{Item:y});u.displayName="RadioButtonField";export{I as RadioButtonField};
|
|
2
2
|
//# sourceMappingURL=RadioButtonField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonField.js","sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Description as FieldDescription } from '~/components/field-wrapper/FieldDescription'\nimport { FieldElementWrapperProps } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { RadioButtonGroup } from '~/components/radio-button/RadioButtonGroup'\nimport { styled } from '~/styled'\n\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n base: ['min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n children,\n className,\n direction = 'column',\n defaultValue,\n value,\n description,\n label,\n name,\n validation,\n onValueChange,\n ...remainingProps\n}: RadioButtonFieldProps) => {\n const { control } = useFormContext()\n const {\n field: { ref, onChange, value: innerValue
|
|
1
|
+
{"version":3,"file":"RadioButtonField.js","sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Description as FieldDescription } from '~/components/field-wrapper/FieldDescription'\nimport { FieldElementWrapperProps } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { RadioButtonGroup } from '~/components/radio-button/RadioButtonGroup'\nimport { styled } from '~/styled'\n\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n base: ['min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n children,\n className,\n direction = 'column',\n defaultValue,\n value,\n description,\n label,\n name,\n validation,\n onValueChange,\n ...remainingProps\n}: RadioButtonFieldProps) => {\n const { control } = useFormContext()\n const {\n field: { ref, onChange, value: innerValue }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue\n })\n const { error } = useFieldError(name)\n\n React.useEffect(() => {\n // Update the react-hook-form inner value to match what is passed in.\n if (typeof value !== 'undefined') onChange(value)\n }, [value])\n\n return (\n <Fieldset className={className}>\n <Label\n as=\"legend\"\n required={Boolean(validation?.required)}\n className=\"mb-3 p-0\"\n >\n {label}\n </Label>\n {description && (\n <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n )}\n\n <RadioButtonGroup\n ref={ref}\n direction={direction}\n defaultValue={defaultValue}\n onValueChange={(newValue) => {\n onChange(newValue)\n onValueChange?.(newValue)\n }}\n value={innerValue}\n {...remainingProps}\n >\n {children}\n </RadioButtonGroup>\n\n {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n </Fieldset>\n )\n}\n\nexport const RadioButtonField = Object.assign(RadioButtonFieldComponent, {\n Item: RadioField\n})\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"names":["Fieldset","styled","RadioButtonFieldComponent","children","className","direction","defaultValue","value","description","label","name","validation","onValueChange","remainingProps","control","useFormContext","ref","onChange","innerValue","useController","error","useFieldError","React","Label","FieldDescription","RadioButtonGroup","newValue","InlineMessage","RadioButtonField","RadioField"],"mappings":"keAaA,MAAMA,EAAWC,EAAO,WAAY,CAClC,KAAM,CAAC,SAAS,CAClB,CAAC,EAKKC,EAA4B,CAAC,CACjC,SAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,SACZ,aAAAC,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAA6B,CAC3B,KAAM,CAAE,QAAAC,CAAQ,EAAIC,IACd,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,CAAW,CAC5C,EAAIC,EAAc,CAChB,KAAAT,EACA,QAAAI,EACA,MAAOH,EACP,aAAAL,CACF,CAAC,EACK,CAAE,MAAAc,CAAM,EAAIC,EAAcX,CAAI,EAEpC,OAAAY,EAAM,UAAU,IAAM,CAEhB,OAAOf,EAAU,KAAaU,EAASV,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,EAGRe,EAAA,cAACtB,EAAA,CAAS,UAAWI,GACnBkB,EAAA,cAACC,EAAA,CACC,GAAG,SACH,SAAU,CAAQZ,EAAAA,GAAA,MAAAA,EAAY,UAC9B,UAAU,UAAA,EAETF,CACH,EACCD,GACCc,EAAA,cAACE,EAAA,CAAiB,UAAU,MAAA,EAAQhB,CAAY,EAGlDc,EAAA,cAACG,EAAA,CACC,IAAKT,EACL,UAAWX,EACX,aAAcC,EACd,cAAgBoB,GAAa,CAC3BT,EAASS,CAAQ,EACjBd,GAAA,MAAAA,EAAgBc,CAAAA,CAClB,EACA,MAAOR,EACN,GAAGL,GAEHV,CACH,EAECiB,GAASE,EAAA,cAACK,EAAA,CAAc,UAAU,MAAQP,EAAAA,CAAM,CACnD,CAEJ,EAEaQ,EAAmB,OAAO,OAAO1B,EAA2B,CACvE,KAAM2B,CACR,CAAC,EAED3B,EAA0B,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TabsContent } from './TabsContent'\nimport { TabsTrigger } from './TabsTrigger'\nimport { TabsTriggerList } from './TabsTriggerList'\n\
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TabsContent } from './TabsContent'\nimport { TabsTrigger } from './TabsTrigger'\nimport { TabsTriggerList } from './TabsTriggerList'\n\nconst StyledRoot = styled(Root, {\n base: ['w-full']\n})\n\nexport const Tabs = Object.assign(StyledRoot, {\n TriggerList: TabsTriggerList,\n Trigger: TabsTrigger,\n Content: TabsContent\n})\n\nStyledRoot.displayName = 'Tabs'\n"],"names":["StyledRoot","styled","Root","Tabs","TabsTriggerList","TabsTrigger","TabsContent"],"mappings":"0OASA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CAAC,QAAQ,CACjB,CAAC,EAEYC,EAAO,OAAO,OAAOH,EAAY,CAC5C,YAAaI,EACb,QAASC,EACT,QAASC,CACX,CAAC,EAEDN,EAAW,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Close as
|
|
1
|
+
import{Close as s}from"@atom-learning/icons";import m from"clsx";import*as o from"react";import{toast as l}from"react-hot-toast";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";import{useToastContext as n}from"./ToastContext.js";const p=({onDismiss:t,label:e="Close alert",...r})=>{const{id:i}=n();return o.createElement(a,{label:e,onClick:()=>{l.dismiss(i),t==null||t()},...r,className:m("text-white","-mr-2","hover:opacity-80","hover:text-white","focus:opacity-80","focus:text-white")},o.createElement(c,{is:s}))};export{p as ToastCloseButton};
|
|
2
2
|
//# sourceMappingURL=ToastCloseButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastCloseButton.js","sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\
|
|
1
|
+
{"version":3,"file":"ToastCloseButton.js","sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './ToastContext'\n\nexport interface ToastCloseButtonProps extends Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'label' | 'children'\n> {\n onDismiss?: () => void\n label?: string\n}\n\nexport const ToastCloseButton = ({\n onDismiss,\n label = 'Close alert',\n ...rest\n}: ToastCloseButtonProps): JSX.Element => {\n const { id } = useToastContext()\n\n return (\n <ActionIcon\n label={label}\n onClick={() => {\n toast.dismiss(id)\n onDismiss?.()\n }}\n {...rest}\n className={clsx(\n 'text-white',\n '-mr-2',\n 'hover:opacity-80',\n 'hover:text-white',\n 'focus:opacity-80',\n 'focus:text-white'\n )}\n >\n <Icon is={Close} />\n </ActionIcon>\n )\n}\n"],"names":["ToastCloseButton","onDismiss","label","rest","id","useToastContext","React","ActionIcon","toast","clsx","Icon","Close"],"mappings":"sRAiBO,MAAMA,EAAmB,CAAC,CAC/B,UAAAC,EACA,MAAAC,EAAQ,cACR,GAAGC,CACL,IAA0C,CACxC,KAAM,CAAE,GAAAC,CAAG,EAAIC,EAAgB,EAE/B,OACEC,EAAA,cAACC,EAAA,CACC,MAAOL,EACP,QAAS,IAAM,CACbM,EAAM,QAAQJ,CAAE,EAChBH,GAAA,MAAAA,EACF,CAAA,EACC,GAAGE,EACJ,UAAWM,EACT,aACA,QACA,mBACA,mBACA,mBACA,kBACF,CAAA,EAEAH,EAAA,cAACI,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CAEJ"}
|