@atom-learning/components 8.1.0 → 8.1.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/data-table/DataTable.context.js +2 -2
- package/dist/components/data-table/DataTable.context.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlRoot.js +4 -1
- package/dist/components/segmented-control/SegmentedControlRoot.js.map +1 -1
- package/dist/components/toast/ToastProvider.d.ts +1 -1
- package/dist/components/toast/ToastProvider.js +1 -1
- package/dist/components/toast/ToastProvider.js.map +1 -1
- package/dist/index.cjs.js +6 -5
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ import * as React$1 from "react";
|
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
import { v4 } from "@lukeed/uuid";
|
|
8
8
|
import { getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
|
|
9
|
-
import
|
|
9
|
+
import { useDeepCompareEffectNoCheck } from "use-deep-compare-effect";
|
|
10
10
|
//#region src/components/data-table/DataTable.context.tsx
|
|
11
11
|
var DataTableContext = React$1.createContext(null);
|
|
12
12
|
var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSort, initialState = void 0, disabledRows, enableRowSelection, onRowSelectionChange, children }) => {
|
|
@@ -46,7 +46,7 @@ var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSo
|
|
|
46
46
|
React$1.useEffect(() => {
|
|
47
47
|
runAsyncData({});
|
|
48
48
|
}, [runAsyncData]);
|
|
49
|
-
|
|
49
|
+
useDeepCompareEffectNoCheck(() => {
|
|
50
50
|
if (!dataProp) return;
|
|
51
51
|
setData({
|
|
52
52
|
results: dataProp,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.context.js","names":[],"sources":["../../../src/components/data-table/DataTable.context.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 type DataTableContextType,\n type InitialState,\n type TableData,\n type TablePosition,\n type AsyncDataOptions,\n type AsyncDataResult,\n type DefaultSort,\n type GetAsyncData\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?: DefaultSort\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: GetAsyncData }\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) => {\n const tableId = React.useRef(uuid())\n\n const [data, setData] = React.useState<AsyncDataResult>({\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<AsyncDataOptions>) => {\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 AsyncDataResult)\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 as Row<unknown>).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\n ? (setPaginationState as OnChangeFn<PaginationState>)\n : 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"],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"DataTable.context.js","names":[],"sources":["../../../src/components/data-table/DataTable.context.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'\n// Use the named export, not the default: the CJS build's Node-mode interop\n// (__toESM(mod, 1)) shadows this package's `default` with the whole module\n// object, so a default import resolves to a non-callable object at runtime.\n// NoCheck is equivalent here — the dep (`dataProp`) is always an array, so the\n// default export's dev-only all-primitive guard would never fire.\nimport { useDeepCompareEffectNoCheck as useDeepCompareEffect } from 'use-deep-compare-effect'\n\nimport {\n AsyncDataState,\n type DataTableContextType,\n type InitialState,\n type TableData,\n type TablePosition,\n type AsyncDataOptions,\n type AsyncDataResult,\n type DefaultSort,\n type GetAsyncData\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?: DefaultSort\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: GetAsyncData }\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) => {\n const tableId = React.useRef(uuid())\n\n const [data, setData] = React.useState<AsyncDataResult>({\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<AsyncDataOptions>) => {\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 AsyncDataResult)\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 as Row<unknown>).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\n ? (setPaginationState as OnChangeFn<PaginationState>)\n : 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"],"mappings":"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"}
|
|
@@ -16,7 +16,10 @@ var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, v
|
|
|
16
16
|
const isControlled = value !== void 0;
|
|
17
17
|
const [internalValue, setInternalValue] = React$1.useState(defaultValue);
|
|
18
18
|
const currentValue = isControlled ? value : internalValue;
|
|
19
|
-
const handleValueChange =
|
|
19
|
+
const handleValueChange = React$1.useCallback((newValue) => {
|
|
20
|
+
if (!isControlled) setInternalValue(newValue);
|
|
21
|
+
onValueChange?.(newValue);
|
|
22
|
+
}, [isControlled, onValueChange]);
|
|
20
23
|
React$1.useEffect(() => {
|
|
21
24
|
if (!isControlled && defaultValue) setInternalValue(defaultValue);
|
|
22
25
|
}, [defaultValue, isControlled]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\n\nconst StyledSegmentedControlRoot = styled(\n Tabs,\n {\n base: ['[&>div]:border-none'],\n variants: {\n size: {\n sm: ['w-[unset]!'],\n md: [],\n lg: []\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps extends React.ComponentProps<\n typeof StyledSegmentedControlRoot\n> {\n theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n size,\n theme = 'primary',\n defaultValue,\n children,\n value,\n onValueChange,\n ...rest\n}: React.PropsWithChildren<SegmentedControlRootProps>) => {\n const isControlled = value !== undefined\n\n const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n const currentValue = isControlled ? value : internalValue\n
|
|
1
|
+
{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\n\nconst StyledSegmentedControlRoot = styled(\n Tabs,\n {\n base: ['[&>div]:border-none'],\n variants: {\n size: {\n sm: ['w-[unset]!'],\n md: [],\n lg: []\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps extends React.ComponentProps<\n typeof StyledSegmentedControlRoot\n> {\n theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n size,\n theme = 'primary',\n defaultValue,\n children,\n value,\n onValueChange,\n ...rest\n}: React.PropsWithChildren<SegmentedControlRootProps>) => {\n const isControlled = value !== undefined\n\n const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n const currentValue = isControlled ? value : internalValue\n // Fire the consumer's `onValueChange` in BOTH modes; only own internal state\n // when uncontrolled. (Previously `isControlled ? onValueChange :\n // setInternalValue`, which silently dropped the consumer callback in\n // uncontrolled mode once `onValueChange` stopped leaking through `...rest`.)\n const handleValueChange = React.useCallback(\n (newValue: string) => {\n if (!isControlled) setInternalValue(newValue)\n onValueChange?.(newValue)\n },\n [isControlled, onValueChange]\n )\n\n React.useEffect(() => {\n if (!isControlled && defaultValue) {\n setInternalValue(defaultValue)\n }\n }, [defaultValue, isControlled])\n\n const contextValue = React.useMemo(\n () => ({\n size,\n theme,\n defaultValue,\n onValueChange: handleValueChange,\n value: currentValue\n }),\n [size, theme, defaultValue, handleValueChange, currentValue]\n )\n\n return (\n <SegmentedControlContext.Provider value={contextValue}>\n <StyledSegmentedControlRoot\n size={size}\n value={currentValue}\n onValueChange={handleValueChange}\n {...rest}\n >\n {children}\n </StyledSegmentedControlRoot>\n </SegmentedControlContext.Provider>\n )\n}\n"],"mappings":";;;;;;AAOA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,qBAAqB;CAC5B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC;EACL,IAAI,CAAC;CACP,EACF;AACF,GACA,EAAE,2BAA2B,KAAK,CACpC;AAQA,IAAa,wBAAwB,EACnC,MACA,QAAQ,WACR,cACA,UACA,OACA,eACA,GAAG,WACqD;CACxD,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CAErE,MAAM,eAAe,eAAe,QAAQ;CAK5C,MAAM,oBAAoB,QAAM,aAC7B,aAAqB;EACpB,IAAI,CAAC,cAAc,iBAAiB,QAAQ;EAC5C,gBAAgB,QAAQ;CAC1B,GACA,CAAC,cAAc,aAAa,CAC9B;CAEA,QAAM,gBAAgB;EACpB,IAAI,CAAC,gBAAgB,cACnB,iBAAiB,YAAY;CAEjC,GAAG,CAAC,cAAc,YAAY,CAAC;CAE/B,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA,eAAe;EACf,OAAO;CACT,IACA;EAAC;EAAM;EAAO;EAAc;EAAmB;CAAY,CAC7D;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,oBAAC,4BAAD;GACQ;GACN,OAAO;GACP,eAAe;GACf,GAAI;GAEH;EACyB,CAAA;CACI,CAAA;AAEtC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
export {
|
|
2
|
+
export { toast } from 'react-hot-toast';
|
|
3
3
|
export { useToastContext } from './Toast.context';
|
|
4
4
|
export declare function ToastProvider({ children, className }: React.PropsWithChildren<{
|
|
5
5
|
className?: string;
|
|
@@ -6,7 +6,7 @@ import { Toast } from "./Toast.js";
|
|
|
6
6
|
import * as React$1 from "react";
|
|
7
7
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { Error } from "@atom-learning/icons";
|
|
9
|
-
import toast$1,
|
|
9
|
+
import { toast as toast$1, useToaster } from "react-hot-toast";
|
|
10
10
|
//#region src/components/toast/ToastProvider.tsx
|
|
11
11
|
var ToastProviderBase = styled("div", { base: [
|
|
12
12
|
"fixed",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '../../styled'\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './Toast.context'\n\nexport {
|
|
1
|
+
{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '../../styled'\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './Toast.context'\n\nexport { toast } from 'react-hot-toast'\nexport { useToastContext } from './Toast.context'\n\nconst ToastProviderBase = styled('div', {\n base: ['fixed', 'z-2147483647', 'inset-2', 'pointer-events-none', 'sm:top-3']\n})\n\nconst ToastWrapper = styled('div', {\n base: [\n 'absolute',\n 'w-full',\n 'flex',\n 'justify-center',\n 'items-center',\n 'rounded-sm',\n 'box-border',\n 'min-h-12',\n '[--slide-opacity-out:0]',\n '[--slide-direction-out-y:-100%]'\n ],\n variants: {\n visible: {\n true: ['motion-safe:animate-slide-direction-in'],\n false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n }\n }\n})\n\nexport const ToastProvider = ({\n children,\n className\n}: React.PropsWithChildren<{ className?: string }>) => {\n const { toasts, handlers } = useToaster()\n const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n return (\n <>\n <ToastProviderBase\n onMouseEnter={startPause}\n onMouseLeave={endPause}\n className={className}\n >\n {toasts.map((toast) => {\n const { message: children } = toast\n\n const offset = calculateOffset(toast, {\n reverseOrder: true,\n gutter: 8\n })\n\n const ref = (el: HTMLDivElement | null) => {\n if (el && toast.height === undefined) {\n updateHeight(toast.id, el.getBoundingClientRect().height)\n }\n }\n\n return (\n <ToastWrapper\n key={toast.id}\n ref={ref}\n visible={toast.visible}\n role={toast.ariaProps.role}\n aria-live={toast.ariaProps['aria-live']}\n style={{ '--offset': `${offset}px` }}\n className=\"top-(--offset)\"\n >\n <ToastContext.Provider value={toast}>\n {typeof children === 'function' ? (\n children(toast)\n ) : React.isValidElement(children) ? (\n children\n ) : (\n <Toast className=\"w-100\">\n {toast.type === 'error' && <Toast.Icon is={Error} />}\n <Text>{children}</Text>\n <Spacer />\n <Toast.Close />\n </Toast>\n )}\n </ToastContext.Provider>\n </ToastWrapper>\n )\n })}\n </ToastProviderBase>\n {children}\n </>\n )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"mappings":";;;;;;;;;;AAaA,IAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CAAC;CAAS;CAAgB;CAAW;CAAuB;AAAU,EAC9E,CAAC;AAED,IAAM,eAAe,OAAO,OAAO;CACjC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC,wCAAwC;EAC/C,OAAO,CAAC,aAAa,yCAAyC;CAChE,EACF;AACF,CAAC;AAED,IAAa,iBAAiB,EAC5B,UACA,gBACqD;CACrD,MAAM,EAAE,QAAQ,aAAa,WAAW;CACxC,MAAM,EAAE,YAAY,UAAU,iBAAiB,iBAAiB;CAEhE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,mBAAD;EACE,cAAc;EACd,cAAc;EACH;YAEV,OAAO,KAAK,UAAU;GACrB,MAAM,EAAE,SAAS,aAAa;GAE9B,MAAM,SAAS,gBAAgB,OAAO;IACpC,cAAc;IACd,QAAQ;GACV,CAAC;GAED,MAAM,OAAO,OAA8B;IACzC,IAAI,MAAM,MAAM,WAAW,KAAA,GACzB,aAAa,MAAM,IAAI,GAAG,sBAAsB,CAAC,CAAC,MAAM;GAE5D;GAEA,OACE,oBAAC,cAAD;IAEO;IACL,SAAS,MAAM;IACf,MAAM,MAAM,UAAU;IACtB,aAAW,MAAM,UAAU;IAC3B,OAAO,EAAE,YAAY,GAAG,OAAO,IAAI;IACnC,WAAU;cAEV,oBAAC,aAAa,UAAd;KAAuB,OAAO;eAC3B,OAAO,aAAa,aACnB,SAAS,KAAK,IACZ,QAAM,eAAe,QAAQ,IAC/B,WAEA,qBAAC,OAAD;MAAO,WAAU;gBAAjB;OACG,MAAM,SAAS,WAAW,oBAAC,MAAM,MAAP,EAAY,IAAI,MAAQ,CAAA;OACnD,oBAAC,MAAD,EAAO,SAAe,CAAA;OACtB,oBAAC,QAAD,CAAS,CAAA;OACT,oBAAC,MAAM,OAAP,CAAc,CAAA;MACT;;IAEY,CAAA;GACX,GAtBP,MAAM,EAsBC;EAElB,CAAC;CACgB,CAAA,GAClB,QACD,EAAA,CAAA;AAEN;AAEA,cAAc,cAAc"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -62,7 +62,6 @@ let _reach_combobox = require("@reach/combobox");
|
|
|
62
62
|
let _lukeed_uuid = require("@lukeed/uuid");
|
|
63
63
|
let _tanstack_react_table = require("@tanstack/react-table");
|
|
64
64
|
let use_deep_compare_effect = require("use-deep-compare-effect");
|
|
65
|
-
use_deep_compare_effect = __toESM(use_deep_compare_effect, 1);
|
|
66
65
|
let react_aria = require("react-aria");
|
|
67
66
|
let _dnd_kit_sortable = require("@dnd-kit/sortable");
|
|
68
67
|
let _dnd_kit_core = require("@dnd-kit/core");
|
|
@@ -91,7 +90,6 @@ let _radix_ui_react_switch = require("@radix-ui/react-switch");
|
|
|
91
90
|
_radix_ui_react_switch = __toESM(_radix_ui_react_switch, 1);
|
|
92
91
|
let _radix_ui_react_tabs = require("@radix-ui/react-tabs");
|
|
93
92
|
let react_hot_toast = require("react-hot-toast");
|
|
94
|
-
react_hot_toast = __toESM(react_hot_toast, 1);
|
|
95
93
|
let react_player_vimeo_js = require("react-player/vimeo.js");
|
|
96
94
|
react_player_vimeo_js = __toESM(react_player_vimeo_js, 1);
|
|
97
95
|
//#region src/styled.tsx
|
|
@@ -4052,7 +4050,7 @@ var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSo
|
|
|
4052
4050
|
react.useEffect(() => {
|
|
4053
4051
|
runAsyncData({});
|
|
4054
4052
|
}, [runAsyncData]);
|
|
4055
|
-
(0, use_deep_compare_effect.
|
|
4053
|
+
(0, use_deep_compare_effect.useDeepCompareEffectNoCheck)(() => {
|
|
4056
4054
|
if (!dataProp) return;
|
|
4057
4055
|
setData({
|
|
4058
4056
|
results: dataProp,
|
|
@@ -11006,7 +11004,10 @@ var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, v
|
|
|
11006
11004
|
const isControlled = value !== void 0;
|
|
11007
11005
|
const [internalValue, setInternalValue] = react.useState(defaultValue);
|
|
11008
11006
|
const currentValue = isControlled ? value : internalValue;
|
|
11009
|
-
const handleValueChange =
|
|
11007
|
+
const handleValueChange = react.useCallback((newValue) => {
|
|
11008
|
+
if (!isControlled) setInternalValue(newValue);
|
|
11009
|
+
onValueChange?.(newValue);
|
|
11010
|
+
}, [isControlled, onValueChange]);
|
|
11010
11011
|
react.useEffect(() => {
|
|
11011
11012
|
if (!isControlled && defaultValue) setInternalValue(defaultValue);
|
|
11012
11013
|
}, [defaultValue, isControlled]);
|
|
@@ -11241,7 +11242,7 @@ exports.styled = styled;
|
|
|
11241
11242
|
Object.defineProperty(exports, "toast", {
|
|
11242
11243
|
enumerable: true,
|
|
11243
11244
|
get: function() {
|
|
11244
|
-
return react_hot_toast.
|
|
11245
|
+
return react_hot_toast.toast;
|
|
11245
11246
|
}
|
|
11246
11247
|
});
|
|
11247
11248
|
exports.useAlert = useAlert;
|