boreal-ui 0.0.54 → 0.0.55
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/core/DataTable-DIpKxAT_.cjs.map +1 -1
- package/dist/core/DataTable-Dv6Bv-wh.js.map +1 -1
- package/dist/core/boreal-ui.css +0 -11
- package/dist/next/{DataTable-mMStogSP.js → DataTable-D2QUuLab.js} +40 -40
- package/dist/next/DataTable-D2QUuLab.js.map +1 -0
- package/dist/next/{DataTable-CUJXAkHe.cjs → DataTable-j8nWsbeg.cjs} +40 -40
- package/dist/next/DataTable-j8nWsbeg.cjs.map +1 -0
- package/dist/next/DataTable.cjs.js +1 -1
- package/dist/next/DataTable.js +1 -1
- package/dist/next/boreal-ui.css +87 -98
- package/dist/next/index.cjs.js +1 -1
- package/dist/next/index.js +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/DataTable/DataTableBase.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/next/DataTable-CUJXAkHe.cjs.map +0 -1
- package/dist/next/DataTable-mMStogSP.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable-DIpKxAT_.cjs","sources":["../../src/components/DataTable/DataTableBase.tsx","../../src/components/DataTable/core/DataTable.tsx"],"sourcesContent":["import { useMemo, useState, KeyboardEvent } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { DataTableBaseProps } from \"./DataTable.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nfunction DataTableBase<T extends object>({\r\n columns,\r\n data,\r\n onRowClick,\r\n classMap,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n outline = false,\r\n className = \"\",\r\n striped = true,\r\n defaultSortKey,\r\n ariaLabel,\r\n defaultSortOrder = \"asc\",\r\n serverSort = false,\r\n onSortChange,\r\n rowKey,\r\n \"data-testid\": testId = \"data-table\",\r\n}: DataTableBaseProps<T>) {\r\n const [sortKey, setSortKey] = useState<keyof T | undefined>(defaultSortKey);\r\n const [sortOrder, setSortOrder] = useState<\"asc\" | \"desc\">(defaultSortOrder);\r\n\r\n const sortedData = useMemo(() => {\r\n if (serverSort || !sortKey) return data;\r\n\r\n return [...data].sort((a, b) => {\r\n const valA = a[sortKey];\r\n const valB = b[sortKey];\r\n if (valA === valB) return 0;\r\n if (valA == null) return 1;\r\n if (valB == null) return -1;\r\n\r\n const numA = Number(valA);\r\n const numB = Number(valB);\r\n const bothNumeric = !Number.isNaN(numA) && !Number.isNaN(numB);\r\n\r\n if (bothNumeric) {\r\n return sortOrder === \"asc\" ? numA - numB : numB - numA;\r\n }\r\n const cmp = String(valA).localeCompare(String(valB), undefined, {\r\n numeric: true,\r\n });\r\n return sortOrder === \"asc\" ? cmp : -cmp;\r\n });\r\n }, [data, sortKey, sortOrder, serverSort]);\r\n\r\n const handleSort = (key: keyof T) => {\r\n const newOrder = key === sortKey && sortOrder === \"asc\" ? \"desc\" : \"asc\";\r\n setSortKey(key);\r\n setSortOrder(newOrder);\r\n if (serverSort && onSortChange) onSortChange(key, newOrder);\r\n };\r\n\r\n const handleSortKeyDown = (e: KeyboardEvent, key: keyof T) => {\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n handleSort(key);\r\n }\r\n };\r\n\r\n const handleRowKeyDown =\r\n (row: T) => (e: KeyboardEvent<HTMLTableRowElement>) => {\r\n if (!onRowClick) return;\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n onRowClick(row);\r\n }\r\n };\r\n\r\n const captionId = `${testId}-caption`;\r\n\r\n return (\r\n <div\r\n className={combineClassNames(\r\n classMap.wrapper,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n striped && classMap.striped,\r\n className\r\n )}\r\n data-testid={testId}\r\n >\r\n <table\r\n className={combineClassNames(\r\n classMap.table,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline\r\n )}\r\n aria-label={ariaLabel}\r\n aria-describedby={captionId}\r\n >\r\n <caption id={captionId} className={classMap.srOnly ?? \"sr_only\"}>\r\n Sortable data table\r\n </caption>\r\n\r\n <thead>\r\n <tr>\r\n {columns.map((col) => {\r\n const isActive = sortKey === col.key;\r\n return (\r\n <th\r\n key={String(col.key)}\r\n scope=\"col\"\r\n tabIndex={col.sortable ? 0 : undefined}\r\n aria-sort={\r\n col.sortable\r\n ? isActive\r\n ? sortOrder === \"asc\"\r\n ? \"ascending\"\r\n : \"descending\"\r\n : \"none\"\r\n : undefined\r\n }\r\n onClick={() => col.sortable && handleSort(col.key)}\r\n onKeyDown={(e) =>\r\n col.sortable && handleSortKeyDown(e, col.key)\r\n }\r\n className={combineClassNames(\r\n col.sortable && classMap.sortable,\r\n classMap.headerCell\r\n )}\r\n >\r\n <span>{col.label}</span>\r\n {col.sortable && (\r\n <span className={classMap.sortIcon} aria-hidden=\"true\">\r\n {isActive ? (sortOrder === \"asc\" ? \"▲\" : \"▼\") : \"⇅\"}\r\n </span>\r\n )}\r\n </th>\r\n );\r\n })}\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n {sortedData.length === 0 ? (\r\n <tr>\r\n <td\r\n className={classMap.emptyCell}\r\n colSpan={columns.length}\r\n // announce emptiness politely\r\n aria-live=\"polite\"\r\n >\r\n No data available\r\n </td>\r\n </tr>\r\n ) : (\r\n sortedData.map((row, idx) => {\r\n const key = rowKey ? rowKey(row) : idx;\r\n return (\r\n <tr\r\n key={key}\r\n className={combineClassNames(\r\n onRowClick && classMap.clickable,\r\n striped && idx % 2 === 1 && classMap.striped\r\n )}\r\n onClick={() => onRowClick?.(row)}\r\n onKeyDown={handleRowKeyDown(row)}\r\n tabIndex={onRowClick ? 0 : undefined}\r\n >\r\n {columns.map((col) => (\r\n <td\r\n key={String(col.key)}\r\n data-label={col.label}\r\n className={classMap.cell}\r\n >\r\n {col.render\r\n ? col.render(row[col.key], row)\r\n : typeof row[col.key] === \"object\"\r\n ? JSON.stringify(row[col.key])\r\n : String(row[col.key] ?? \"\")}\r\n </td>\r\n ))}\r\n </tr>\r\n );\r\n })\r\n )}\r\n </tbody>\r\n </table>\r\n </div>\r\n );\r\n}\r\nDataTableBase.displayName = \"DataTableBase\";\r\nexport default DataTableBase;\r\n","import \"./DataTable.scss\";\r\nimport DataTableBase from \"../DataTableBase\";\r\nimport { DataTableProps } from \"../DataTable.types\";\r\n\r\nconst classes = {\r\n wrapper: \"data_table_wrapper\",\r\n table: \"data_table\",\r\n headerCell: \"data_table_header_cell\",\r\n sortable: \"data_table_header_sortable\",\r\n sortIcon: \"data_table_sort_icon\",\r\n clickable: \"data_table_row_clickable\",\r\n striped: \"data_table_row_striped\",\r\n cell: \"data_table_cell\",\r\n\r\n primary: \"data_table_primary\",\r\n secondary: \"data_table_secondary\",\r\n tertiary: \"data_table_tertiary\",\r\n quaternary: \"data_table_quaternary\",\r\n\r\n success: \"data_table_success\",\r\n error: \"data_table_error\",\r\n warning: \"data_table_warning\",\r\n\r\n clear: \"data_table_clear\",\r\n\r\n outline: \"data_table_outline\",\r\n\r\n shadowNone: \"data_table_shadow-None\",\r\n shadowLight: \"data_table_shadow-Light\",\r\n shadowMedium: \"data_table_shadow-Medium\",\r\n shadowStrong: \"data_table_shadow-Strong\",\r\n shadowIntense: \"data_table_shadow-Intense\",\r\n\r\n roundNone: \"data_table_round-None\",\r\n roundSmall: \"data_table_round-Small\",\r\n roundMedium: \"data_table_round-Medium\",\r\n roundLarge: \"data_table_round-Large\",\r\n};\r\n\r\nfunction DataTable<T extends object>(props: DataTableProps<T>) {\r\n return <DataTableBase {...props} classMap={classes} />;\r\n}\r\nDataTable.displayName = \"DataTable\";\r\nexport default DataTable;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","useState","useMemo","jsx","combineClassNames","capitalize","jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataTable-DIpKxAT_.cjs","sources":["../../src/components/DataTable/DataTableBase.tsx","../../src/components/DataTable/core/DataTable.tsx"],"sourcesContent":["import { useMemo, useState, KeyboardEvent } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { DataTableBaseProps } from \"./DataTable.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nfunction DataTableBase<T extends object>({\r\n columns,\r\n data,\r\n onRowClick,\r\n classMap,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n outline = false,\r\n className = \"\",\r\n striped = true,\r\n defaultSortKey,\r\n ariaLabel,\r\n defaultSortOrder = \"asc\",\r\n serverSort = false,\r\n onSortChange,\r\n rowKey,\r\n \"data-testid\": testId = \"data-table\",\r\n}: DataTableBaseProps<T>) {\r\n const [sortKey, setSortKey] = useState<keyof T | undefined>(defaultSortKey);\r\n const [sortOrder, setSortOrder] = useState<\"asc\" | \"desc\">(defaultSortOrder);\r\n\r\n const sortedData = useMemo(() => {\r\n if (serverSort || !sortKey) return data;\r\n\r\n return [...data].sort((a, b) => {\r\n const valA = a[sortKey];\r\n const valB = b[sortKey];\r\n if (valA === valB) return 0;\r\n if (valA == null) return 1;\r\n if (valB == null) return -1;\r\n\r\n const numA = Number(valA);\r\n const numB = Number(valB);\r\n const bothNumeric = !Number.isNaN(numA) && !Number.isNaN(numB);\r\n\r\n if (bothNumeric) {\r\n return sortOrder === \"asc\" ? numA - numB : numB - numA;\r\n }\r\n const cmp = String(valA).localeCompare(String(valB), undefined, {\r\n numeric: true,\r\n });\r\n return sortOrder === \"asc\" ? cmp : -cmp;\r\n });\r\n }, [data, sortKey, sortOrder, serverSort]);\r\n\r\n const handleSort = (key: keyof T) => {\r\n const newOrder = key === sortKey && sortOrder === \"asc\" ? \"desc\" : \"asc\";\r\n setSortKey(key);\r\n setSortOrder(newOrder);\r\n if (serverSort && onSortChange) onSortChange(key, newOrder);\r\n };\r\n\r\n const handleSortKeyDown = (e: KeyboardEvent, key: keyof T) => {\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n handleSort(key);\r\n }\r\n };\r\n\r\n const handleRowKeyDown =\r\n (row: T) => (e: KeyboardEvent<HTMLTableRowElement>) => {\r\n if (!onRowClick) return;\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n onRowClick(row);\r\n }\r\n };\r\n\r\n const captionId = `${testId}-caption`;\r\n\r\n return (\r\n <div\r\n className={combineClassNames(\r\n classMap.wrapper,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n striped && classMap.striped,\r\n className,\r\n )}\r\n data-testid={testId}\r\n >\r\n <table\r\n className={combineClassNames(\r\n classMap.table,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline,\r\n )}\r\n aria-label={ariaLabel}\r\n aria-describedby={captionId}\r\n >\r\n <caption id={captionId} className={classMap.srOnly ?? \"sr_only\"}>\r\n Sortable data table\r\n </caption>\r\n\r\n <thead>\r\n <tr>\r\n {columns.map((col) => {\r\n const isActive = sortKey === col.key;\r\n return (\r\n <th\r\n key={String(col.key)}\r\n scope=\"col\"\r\n tabIndex={col.sortable ? 0 : undefined}\r\n aria-sort={\r\n col.sortable\r\n ? isActive\r\n ? sortOrder === \"asc\"\r\n ? \"ascending\"\r\n : \"descending\"\r\n : \"none\"\r\n : undefined\r\n }\r\n onClick={() => col.sortable && handleSort(col.key)}\r\n onKeyDown={(e) =>\r\n col.sortable && handleSortKeyDown(e, col.key)\r\n }\r\n className={combineClassNames(\r\n col.sortable && classMap.sortable,\r\n classMap.headerCell,\r\n )}\r\n >\r\n <span>{col.label}</span>\r\n {col.sortable && (\r\n <span className={classMap.sortIcon} aria-hidden=\"true\">\r\n {isActive ? (sortOrder === \"asc\" ? \"▲\" : \"▼\") : \"⇅\"}\r\n </span>\r\n )}\r\n </th>\r\n );\r\n })}\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n {sortedData.length === 0 ? (\r\n <tr>\r\n <td\r\n className={classMap.emptyCell}\r\n colSpan={columns.length}\r\n aria-live=\"polite\"\r\n >\r\n No data available\r\n </td>\r\n </tr>\r\n ) : (\r\n sortedData.map((row, idx) => {\r\n const key = rowKey ? rowKey(row) : idx;\r\n return (\r\n <tr\r\n key={key}\r\n className={combineClassNames(\r\n onRowClick && classMap.clickable,\r\n striped && idx % 2 === 1 && classMap.striped,\r\n )}\r\n onClick={() => onRowClick?.(row)}\r\n onKeyDown={handleRowKeyDown(row)}\r\n tabIndex={onRowClick ? 0 : undefined}\r\n >\r\n {columns.map((col) => (\r\n <td\r\n key={String(col.key)}\r\n data-label={col.label}\r\n className={classMap.cell}\r\n >\r\n {col.render\r\n ? col.render(row[col.key], row)\r\n : typeof row[col.key] === \"object\"\r\n ? JSON.stringify(row[col.key])\r\n : String(row[col.key] ?? \"\")}\r\n </td>\r\n ))}\r\n </tr>\r\n );\r\n })\r\n )}\r\n </tbody>\r\n </table>\r\n </div>\r\n );\r\n}\r\nDataTableBase.displayName = \"DataTableBase\";\r\nexport default DataTableBase;\r\n","import \"./DataTable.scss\";\r\nimport DataTableBase from \"../DataTableBase\";\r\nimport { DataTableProps } from \"../DataTable.types\";\r\n\r\nconst classes = {\r\n wrapper: \"data_table_wrapper\",\r\n table: \"data_table\",\r\n headerCell: \"data_table_header_cell\",\r\n sortable: \"data_table_header_sortable\",\r\n sortIcon: \"data_table_sort_icon\",\r\n clickable: \"data_table_row_clickable\",\r\n striped: \"data_table_row_striped\",\r\n cell: \"data_table_cell\",\r\n\r\n primary: \"data_table_primary\",\r\n secondary: \"data_table_secondary\",\r\n tertiary: \"data_table_tertiary\",\r\n quaternary: \"data_table_quaternary\",\r\n\r\n success: \"data_table_success\",\r\n error: \"data_table_error\",\r\n warning: \"data_table_warning\",\r\n\r\n clear: \"data_table_clear\",\r\n\r\n outline: \"data_table_outline\",\r\n\r\n shadowNone: \"data_table_shadow-None\",\r\n shadowLight: \"data_table_shadow-Light\",\r\n shadowMedium: \"data_table_shadow-Medium\",\r\n shadowStrong: \"data_table_shadow-Strong\",\r\n shadowIntense: \"data_table_shadow-Intense\",\r\n\r\n roundNone: \"data_table_round-None\",\r\n roundSmall: \"data_table_round-Small\",\r\n roundMedium: \"data_table_round-Medium\",\r\n roundLarge: \"data_table_round-Large\",\r\n};\r\n\r\nfunction DataTable<T extends object>(props: DataTableProps<T>) {\r\n return <DataTableBase {...props} classMap={classes} />;\r\n}\r\nDataTable.displayName = \"DataTable\";\r\nexport default DataTable;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","useState","useMemo","jsx","combineClassNames","capitalize","jsxs"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable-Dv6Bv-wh.js","sources":["../../src/components/DataTable/DataTableBase.tsx","../../src/components/DataTable/core/DataTable.tsx"],"sourcesContent":["import { useMemo, useState, KeyboardEvent } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { DataTableBaseProps } from \"./DataTable.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nfunction DataTableBase<T extends object>({\r\n columns,\r\n data,\r\n onRowClick,\r\n classMap,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n outline = false,\r\n className = \"\",\r\n striped = true,\r\n defaultSortKey,\r\n ariaLabel,\r\n defaultSortOrder = \"asc\",\r\n serverSort = false,\r\n onSortChange,\r\n rowKey,\r\n \"data-testid\": testId = \"data-table\",\r\n}: DataTableBaseProps<T>) {\r\n const [sortKey, setSortKey] = useState<keyof T | undefined>(defaultSortKey);\r\n const [sortOrder, setSortOrder] = useState<\"asc\" | \"desc\">(defaultSortOrder);\r\n\r\n const sortedData = useMemo(() => {\r\n if (serverSort || !sortKey) return data;\r\n\r\n return [...data].sort((a, b) => {\r\n const valA = a[sortKey];\r\n const valB = b[sortKey];\r\n if (valA === valB) return 0;\r\n if (valA == null) return 1;\r\n if (valB == null) return -1;\r\n\r\n const numA = Number(valA);\r\n const numB = Number(valB);\r\n const bothNumeric = !Number.isNaN(numA) && !Number.isNaN(numB);\r\n\r\n if (bothNumeric) {\r\n return sortOrder === \"asc\" ? numA - numB : numB - numA;\r\n }\r\n const cmp = String(valA).localeCompare(String(valB), undefined, {\r\n numeric: true,\r\n });\r\n return sortOrder === \"asc\" ? cmp : -cmp;\r\n });\r\n }, [data, sortKey, sortOrder, serverSort]);\r\n\r\n const handleSort = (key: keyof T) => {\r\n const newOrder = key === sortKey && sortOrder === \"asc\" ? \"desc\" : \"asc\";\r\n setSortKey(key);\r\n setSortOrder(newOrder);\r\n if (serverSort && onSortChange) onSortChange(key, newOrder);\r\n };\r\n\r\n const handleSortKeyDown = (e: KeyboardEvent, key: keyof T) => {\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n handleSort(key);\r\n }\r\n };\r\n\r\n const handleRowKeyDown =\r\n (row: T) => (e: KeyboardEvent<HTMLTableRowElement>) => {\r\n if (!onRowClick) return;\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n onRowClick(row);\r\n }\r\n };\r\n\r\n const captionId = `${testId}-caption`;\r\n\r\n return (\r\n <div\r\n className={combineClassNames(\r\n classMap.wrapper,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n striped && classMap.striped,\r\n className\r\n )}\r\n data-testid={testId}\r\n >\r\n <table\r\n className={combineClassNames(\r\n classMap.table,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline\r\n )}\r\n aria-label={ariaLabel}\r\n aria-describedby={captionId}\r\n >\r\n <caption id={captionId} className={classMap.srOnly ?? \"sr_only\"}>\r\n Sortable data table\r\n </caption>\r\n\r\n <thead>\r\n <tr>\r\n {columns.map((col) => {\r\n const isActive = sortKey === col.key;\r\n return (\r\n <th\r\n key={String(col.key)}\r\n scope=\"col\"\r\n tabIndex={col.sortable ? 0 : undefined}\r\n aria-sort={\r\n col.sortable\r\n ? isActive\r\n ? sortOrder === \"asc\"\r\n ? \"ascending\"\r\n : \"descending\"\r\n : \"none\"\r\n : undefined\r\n }\r\n onClick={() => col.sortable && handleSort(col.key)}\r\n onKeyDown={(e) =>\r\n col.sortable && handleSortKeyDown(e, col.key)\r\n }\r\n className={combineClassNames(\r\n col.sortable && classMap.sortable,\r\n classMap.headerCell\r\n )}\r\n >\r\n <span>{col.label}</span>\r\n {col.sortable && (\r\n <span className={classMap.sortIcon} aria-hidden=\"true\">\r\n {isActive ? (sortOrder === \"asc\" ? \"▲\" : \"▼\") : \"⇅\"}\r\n </span>\r\n )}\r\n </th>\r\n );\r\n })}\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n {sortedData.length === 0 ? (\r\n <tr>\r\n <td\r\n className={classMap.emptyCell}\r\n colSpan={columns.length}\r\n // announce emptiness politely\r\n aria-live=\"polite\"\r\n >\r\n No data available\r\n </td>\r\n </tr>\r\n ) : (\r\n sortedData.map((row, idx) => {\r\n const key = rowKey ? rowKey(row) : idx;\r\n return (\r\n <tr\r\n key={key}\r\n className={combineClassNames(\r\n onRowClick && classMap.clickable,\r\n striped && idx % 2 === 1 && classMap.striped\r\n )}\r\n onClick={() => onRowClick?.(row)}\r\n onKeyDown={handleRowKeyDown(row)}\r\n tabIndex={onRowClick ? 0 : undefined}\r\n >\r\n {columns.map((col) => (\r\n <td\r\n key={String(col.key)}\r\n data-label={col.label}\r\n className={classMap.cell}\r\n >\r\n {col.render\r\n ? col.render(row[col.key], row)\r\n : typeof row[col.key] === \"object\"\r\n ? JSON.stringify(row[col.key])\r\n : String(row[col.key] ?? \"\")}\r\n </td>\r\n ))}\r\n </tr>\r\n );\r\n })\r\n )}\r\n </tbody>\r\n </table>\r\n </div>\r\n );\r\n}\r\nDataTableBase.displayName = \"DataTableBase\";\r\nexport default DataTableBase;\r\n","import \"./DataTable.scss\";\r\nimport DataTableBase from \"../DataTableBase\";\r\nimport { DataTableProps } from \"../DataTable.types\";\r\n\r\nconst classes = {\r\n wrapper: \"data_table_wrapper\",\r\n table: \"data_table\",\r\n headerCell: \"data_table_header_cell\",\r\n sortable: \"data_table_header_sortable\",\r\n sortIcon: \"data_table_sort_icon\",\r\n clickable: \"data_table_row_clickable\",\r\n striped: \"data_table_row_striped\",\r\n cell: \"data_table_cell\",\r\n\r\n primary: \"data_table_primary\",\r\n secondary: \"data_table_secondary\",\r\n tertiary: \"data_table_tertiary\",\r\n quaternary: \"data_table_quaternary\",\r\n\r\n success: \"data_table_success\",\r\n error: \"data_table_error\",\r\n warning: \"data_table_warning\",\r\n\r\n clear: \"data_table_clear\",\r\n\r\n outline: \"data_table_outline\",\r\n\r\n shadowNone: \"data_table_shadow-None\",\r\n shadowLight: \"data_table_shadow-Light\",\r\n shadowMedium: \"data_table_shadow-Medium\",\r\n shadowStrong: \"data_table_shadow-Strong\",\r\n shadowIntense: \"data_table_shadow-Intense\",\r\n\r\n roundNone: \"data_table_round-None\",\r\n roundSmall: \"data_table_round-Small\",\r\n roundMedium: \"data_table_round-Medium\",\r\n roundLarge: \"data_table_round-Large\",\r\n};\r\n\r\nfunction DataTable<T extends object>(props: DataTableProps<T>) {\r\n return <DataTableBase {...props} classMap={classes} />;\r\n}\r\nDataTable.displayName = \"DataTable\";\r\nexport default DataTable;\r\n"],"names":[],"mappings":";;;;;AAUA,SAAS,cAAgC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,gBAAA;AAAA,EACR,WAAW,mBAAA;AAAA,EACX,SAAS,iBAAA;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,eAAe,SAAS;AAC1B,GAA0B;AACxB,QAAM,CAAC,SAAS,UAAU,IAAI,SAA8B,cAAc;AAC1E,QAAM,CAAC,WAAW,YAAY,IAAI,SAAyB,gBAAgB;AAE3E,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,cAAc,CAAC,QAAS,QAAO;AAEnC,WAAO,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,MAAM;AAC9B,YAAM,OAAO,EAAE,OAAO;AACtB,YAAM,OAAO,EAAE,OAAO;AACtB,UAAI,SAAS,KAAM,QAAO;AAC1B,UAAI,QAAQ,KAAM,QAAO;AACzB,UAAI,QAAQ,KAAM,QAAO;AAEzB,YAAM,OAAO,OAAO,IAAI;AACxB,YAAM,OAAO,OAAO,IAAI;AACxB,YAAM,cAAc,CAAC,OAAO,MAAM,IAAI,KAAK,CAAC,OAAO,MAAM,IAAI;AAE7D,UAAI,aAAa;AACf,eAAO,cAAc,QAAQ,OAAO,OAAO,OAAO;AAAA,MACpD;AACA,YAAM,MAAM,OAAO,IAAI,EAAE,cAAc,OAAO,IAAI,GAAG,QAAW;AAAA,QAC9D,SAAS;AAAA,MAAA,CACV;AACD,aAAO,cAAc,QAAQ,MAAM,CAAC;AAAA,IACtC,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,SAAS,WAAW,UAAU,CAAC;AAEzC,QAAM,aAAa,CAAC,QAAiB;AACnC,UAAM,WAAW,QAAQ,WAAW,cAAc,QAAQ,SAAS;AACnE,eAAW,GAAG;AACd,iBAAa,QAAQ;AACrB,QAAI,cAAc,aAAc,cAAa,KAAK,QAAQ;AAAA,EAC5D;AAEA,QAAM,oBAAoB,CAAC,GAAkB,QAAiB;AAC5D,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAA;AACF,iBAAW,GAAG;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,mBACJ,CAAC,QAAW,CAAC,MAA0C;AACrD,QAAI,CAAC,WAAY;AACjB,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAA;AACF,iBAAW,GAAG;AAAA,IAChB;AAAA,EACF;AAEF,QAAM,YAAY,GAAG,MAAM;AAE3B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,SAAS;AAAA,QACT,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,QAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,QACnD,WAAW,SAAS;AAAA,QACpB;AAAA,MAAA;AAAA,MAEF,eAAa;AAAA,MAEb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT,SAAS;AAAA,YACT,SAAS,KAAK;AAAA,YACd,SAAS,KAAK;AAAA,YACd,WAAW,SAAS;AAAA,UAAA;AAAA,UAEtB,cAAY;AAAA,UACZ,oBAAkB;AAAA,UAElB,UAAA;AAAA,YAAA,oBAAC,aAAQ,IAAI,WAAW,WAAW,SAAS,UAAU,WAAW,UAAA,sBAAA,CAEjE;AAAA,gCAEC,SAAA,EACC,UAAA,oBAAC,QACE,UAAA,QAAQ,IAAI,CAAC,QAAQ;AACpB,oBAAM,WAAW,YAAY,IAAI;AACjC,qBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,OAAM;AAAA,kBACN,UAAU,IAAI,WAAW,IAAI;AAAA,kBAC7B,aACE,IAAI,WACA,WACE,cAAc,QACZ,cACA,eACF,SACF;AAAA,kBAEN,SAAS,MAAM,IAAI,YAAY,WAAW,IAAI,GAAG;AAAA,kBACjD,WAAW,CAAC,MACV,IAAI,YAAY,kBAAkB,GAAG,IAAI,GAAG;AAAA,kBAE9C,WAAW;AAAA,oBACT,IAAI,YAAY,SAAS;AAAA,oBACzB,SAAS;AAAA,kBAAA;AAAA,kBAGX,UAAA;AAAA,oBAAA,oBAAC,QAAA,EAAM,cAAI,MAAA,CAAM;AAAA,oBAChB,IAAI,YACH,oBAAC,QAAA,EAAK,WAAW,SAAS,UAAU,eAAY,QAC7C,UAAA,WAAY,cAAc,QAAQ,MAAM,MAAO,IAAA,CAClD;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAzBG,OAAO,IAAI,GAAG;AAAA,cAAA;AAAA,YA6BzB,CAAC,GACH,GACF;AAAA,gCAEC,SAAA,EACE,UAAA,WAAW,WAAW,wBACpB,MAAA,EACC,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,SAAS;AAAA,gBACpB,SAAS,QAAQ;AAAA,gBAEjB,aAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA,GAGH,IAEA,WAAW,IAAI,CAAC,KAAK,QAAQ;AAC3B,oBAAM,MAAM,SAAS,OAAO,GAAG,IAAI;AACnC,qBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAW;AAAA,oBACT,cAAc,SAAS;AAAA,oBACvB,WAAW,MAAM,MAAM,KAAK,SAAS;AAAA,kBAAA;AAAA,kBAEvC,SAAS,MAAM,yCAAa;AAAA,kBAC5B,WAAW,iBAAiB,GAAG;AAAA,kBAC/B,UAAU,aAAa,IAAI;AAAA,kBAE1B,UAAA,QAAQ,IAAI,CAAC,QACZ;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAEC,cAAY,IAAI;AAAA,sBAChB,WAAW,SAAS;AAAA,sBAEnB,UAAA,IAAI,SACD,IAAI,OAAO,IAAI,IAAI,GAAG,GAAG,GAAG,IAC5B,OAAO,IAAI,IAAI,GAAG,MAAM,WACtB,KAAK,UAAU,IAAI,IAAI,GAAG,CAAC,IAC3B,OAAO,IAAI,IAAI,GAAG,KAAK,EAAE;AAAA,oBAAA;AAAA,oBAR1B,OAAO,IAAI,GAAG;AAAA,kBAAA,CAUtB;AAAA,gBAAA;AAAA,gBArBI;AAAA,cAAA;AAAA,YAwBX,CAAC,EAAA,CAEL;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AACA,cAAc,cAAc;AC9L5B,MAAM,UAAU;AAAA,EACd,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,MAAM;AAAA,EAEN,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EAET,OAAO;AAAA,EAEP,SAAS;AAAA,EAET,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EAEf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AACd;AAEA,SAAS,UAA4B,OAA0B;AAC7D,SAAO,oBAAC,eAAA,EAAe,GAAG,OAAO,UAAU,SAAS;AACtD;AACA,UAAU,cAAc;"}
|
|
1
|
+
{"version":3,"file":"DataTable-Dv6Bv-wh.js","sources":["../../src/components/DataTable/DataTableBase.tsx","../../src/components/DataTable/core/DataTable.tsx"],"sourcesContent":["import { useMemo, useState, KeyboardEvent } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { DataTableBaseProps } from \"./DataTable.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nfunction DataTableBase<T extends object>({\r\n columns,\r\n data,\r\n onRowClick,\r\n classMap,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n outline = false,\r\n className = \"\",\r\n striped = true,\r\n defaultSortKey,\r\n ariaLabel,\r\n defaultSortOrder = \"asc\",\r\n serverSort = false,\r\n onSortChange,\r\n rowKey,\r\n \"data-testid\": testId = \"data-table\",\r\n}: DataTableBaseProps<T>) {\r\n const [sortKey, setSortKey] = useState<keyof T | undefined>(defaultSortKey);\r\n const [sortOrder, setSortOrder] = useState<\"asc\" | \"desc\">(defaultSortOrder);\r\n\r\n const sortedData = useMemo(() => {\r\n if (serverSort || !sortKey) return data;\r\n\r\n return [...data].sort((a, b) => {\r\n const valA = a[sortKey];\r\n const valB = b[sortKey];\r\n if (valA === valB) return 0;\r\n if (valA == null) return 1;\r\n if (valB == null) return -1;\r\n\r\n const numA = Number(valA);\r\n const numB = Number(valB);\r\n const bothNumeric = !Number.isNaN(numA) && !Number.isNaN(numB);\r\n\r\n if (bothNumeric) {\r\n return sortOrder === \"asc\" ? numA - numB : numB - numA;\r\n }\r\n const cmp = String(valA).localeCompare(String(valB), undefined, {\r\n numeric: true,\r\n });\r\n return sortOrder === \"asc\" ? cmp : -cmp;\r\n });\r\n }, [data, sortKey, sortOrder, serverSort]);\r\n\r\n const handleSort = (key: keyof T) => {\r\n const newOrder = key === sortKey && sortOrder === \"asc\" ? \"desc\" : \"asc\";\r\n setSortKey(key);\r\n setSortOrder(newOrder);\r\n if (serverSort && onSortChange) onSortChange(key, newOrder);\r\n };\r\n\r\n const handleSortKeyDown = (e: KeyboardEvent, key: keyof T) => {\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n handleSort(key);\r\n }\r\n };\r\n\r\n const handleRowKeyDown =\r\n (row: T) => (e: KeyboardEvent<HTMLTableRowElement>) => {\r\n if (!onRowClick) return;\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n onRowClick(row);\r\n }\r\n };\r\n\r\n const captionId = `${testId}-caption`;\r\n\r\n return (\r\n <div\r\n className={combineClassNames(\r\n classMap.wrapper,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n striped && classMap.striped,\r\n className,\r\n )}\r\n data-testid={testId}\r\n >\r\n <table\r\n className={combineClassNames(\r\n classMap.table,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline,\r\n )}\r\n aria-label={ariaLabel}\r\n aria-describedby={captionId}\r\n >\r\n <caption id={captionId} className={classMap.srOnly ?? \"sr_only\"}>\r\n Sortable data table\r\n </caption>\r\n\r\n <thead>\r\n <tr>\r\n {columns.map((col) => {\r\n const isActive = sortKey === col.key;\r\n return (\r\n <th\r\n key={String(col.key)}\r\n scope=\"col\"\r\n tabIndex={col.sortable ? 0 : undefined}\r\n aria-sort={\r\n col.sortable\r\n ? isActive\r\n ? sortOrder === \"asc\"\r\n ? \"ascending\"\r\n : \"descending\"\r\n : \"none\"\r\n : undefined\r\n }\r\n onClick={() => col.sortable && handleSort(col.key)}\r\n onKeyDown={(e) =>\r\n col.sortable && handleSortKeyDown(e, col.key)\r\n }\r\n className={combineClassNames(\r\n col.sortable && classMap.sortable,\r\n classMap.headerCell,\r\n )}\r\n >\r\n <span>{col.label}</span>\r\n {col.sortable && (\r\n <span className={classMap.sortIcon} aria-hidden=\"true\">\r\n {isActive ? (sortOrder === \"asc\" ? \"▲\" : \"▼\") : \"⇅\"}\r\n </span>\r\n )}\r\n </th>\r\n );\r\n })}\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n {sortedData.length === 0 ? (\r\n <tr>\r\n <td\r\n className={classMap.emptyCell}\r\n colSpan={columns.length}\r\n aria-live=\"polite\"\r\n >\r\n No data available\r\n </td>\r\n </tr>\r\n ) : (\r\n sortedData.map((row, idx) => {\r\n const key = rowKey ? rowKey(row) : idx;\r\n return (\r\n <tr\r\n key={key}\r\n className={combineClassNames(\r\n onRowClick && classMap.clickable,\r\n striped && idx % 2 === 1 && classMap.striped,\r\n )}\r\n onClick={() => onRowClick?.(row)}\r\n onKeyDown={handleRowKeyDown(row)}\r\n tabIndex={onRowClick ? 0 : undefined}\r\n >\r\n {columns.map((col) => (\r\n <td\r\n key={String(col.key)}\r\n data-label={col.label}\r\n className={classMap.cell}\r\n >\r\n {col.render\r\n ? col.render(row[col.key], row)\r\n : typeof row[col.key] === \"object\"\r\n ? JSON.stringify(row[col.key])\r\n : String(row[col.key] ?? \"\")}\r\n </td>\r\n ))}\r\n </tr>\r\n );\r\n })\r\n )}\r\n </tbody>\r\n </table>\r\n </div>\r\n );\r\n}\r\nDataTableBase.displayName = \"DataTableBase\";\r\nexport default DataTableBase;\r\n","import \"./DataTable.scss\";\r\nimport DataTableBase from \"../DataTableBase\";\r\nimport { DataTableProps } from \"../DataTable.types\";\r\n\r\nconst classes = {\r\n wrapper: \"data_table_wrapper\",\r\n table: \"data_table\",\r\n headerCell: \"data_table_header_cell\",\r\n sortable: \"data_table_header_sortable\",\r\n sortIcon: \"data_table_sort_icon\",\r\n clickable: \"data_table_row_clickable\",\r\n striped: \"data_table_row_striped\",\r\n cell: \"data_table_cell\",\r\n\r\n primary: \"data_table_primary\",\r\n secondary: \"data_table_secondary\",\r\n tertiary: \"data_table_tertiary\",\r\n quaternary: \"data_table_quaternary\",\r\n\r\n success: \"data_table_success\",\r\n error: \"data_table_error\",\r\n warning: \"data_table_warning\",\r\n\r\n clear: \"data_table_clear\",\r\n\r\n outline: \"data_table_outline\",\r\n\r\n shadowNone: \"data_table_shadow-None\",\r\n shadowLight: \"data_table_shadow-Light\",\r\n shadowMedium: \"data_table_shadow-Medium\",\r\n shadowStrong: \"data_table_shadow-Strong\",\r\n shadowIntense: \"data_table_shadow-Intense\",\r\n\r\n roundNone: \"data_table_round-None\",\r\n roundSmall: \"data_table_round-Small\",\r\n roundMedium: \"data_table_round-Medium\",\r\n roundLarge: \"data_table_round-Large\",\r\n};\r\n\r\nfunction DataTable<T extends object>(props: DataTableProps<T>) {\r\n return <DataTableBase {...props} classMap={classes} />;\r\n}\r\nDataTable.displayName = \"DataTable\";\r\nexport default DataTable;\r\n"],"names":[],"mappings":"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"}
|
package/dist/core/boreal-ui.css
CHANGED
|
@@ -12321,17 +12321,6 @@ a:hover {
|
|
|
12321
12321
|
.data_table_wrapper {
|
|
12322
12322
|
width: 100%;
|
|
12323
12323
|
overflow-x: auto;
|
|
12324
|
-
margin: 16px;
|
|
12325
|
-
}
|
|
12326
|
-
@media (width <= 479.98px) {
|
|
12327
|
-
.data_table_wrapper {
|
|
12328
|
-
margin: 8px;
|
|
12329
|
-
}
|
|
12330
|
-
}
|
|
12331
|
-
@media (min-width: 1024px) {
|
|
12332
|
-
.data_table_wrapper {
|
|
12333
|
-
margin: 24px;
|
|
12334
|
-
}
|
|
12335
12324
|
}
|
|
12336
12325
|
.data_table_wrapper .data_table {
|
|
12337
12326
|
width: 100%;
|
|
@@ -3,38 +3,38 @@ import { useState, useMemo } from "react";
|
|
|
3
3
|
import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
|
|
4
4
|
import { c as capitalize } from "./capitalize-C0TSQSPh.js";
|
|
5
5
|
import { d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
|
|
6
|
-
const noScroll = "
|
|
7
|
-
const errorMessage = "
|
|
8
|
-
const loadingContainer = "
|
|
9
|
-
const hideScrollbar = "
|
|
10
|
-
const sr_only = "
|
|
11
|
-
const wrapper = "
|
|
12
|
-
const table = "
|
|
13
|
-
const sortable = "
|
|
14
|
-
const sort_icon = "
|
|
15
|
-
const clickable = "
|
|
16
|
-
const striped = "
|
|
17
|
-
const clear = "
|
|
18
|
-
const primary = "
|
|
19
|
-
const outline = "
|
|
20
|
-
const secondary = "
|
|
21
|
-
const tertiary = "
|
|
22
|
-
const quaternary = "
|
|
23
|
-
const success = "
|
|
24
|
-
const error = "
|
|
25
|
-
const warning = "
|
|
26
|
-
const roundNone = "
|
|
27
|
-
const roundSmall = "
|
|
28
|
-
const roundMedium = "
|
|
29
|
-
const roundLarge = "
|
|
30
|
-
const roundFull = "
|
|
31
|
-
const shadowNone = "
|
|
32
|
-
const shadowLight = "
|
|
33
|
-
const shadowMedium = "
|
|
34
|
-
const shadowStrong = "
|
|
35
|
-
const shadowIntense = "
|
|
36
|
-
const spin = "
|
|
37
|
-
const pulse = "
|
|
6
|
+
const noScroll = "_noScroll_o1j7l_108";
|
|
7
|
+
const errorMessage = "_errorMessage_o1j7l_109";
|
|
8
|
+
const loadingContainer = "_loadingContainer_o1j7l_110";
|
|
9
|
+
const hideScrollbar = "_hideScrollbar_o1j7l_102";
|
|
10
|
+
const sr_only = "_sr_only_o1j7l_111";
|
|
11
|
+
const wrapper = "_wrapper_o1j7l_552";
|
|
12
|
+
const table = "_table_o1j7l_556";
|
|
13
|
+
const sortable = "_sortable_o1j7l_595";
|
|
14
|
+
const sort_icon = "_sort_icon_o1j7l_602";
|
|
15
|
+
const clickable = "_clickable_o1j7l_616";
|
|
16
|
+
const striped = "_striped_o1j7l_630";
|
|
17
|
+
const clear = "_clear_o1j7l_633";
|
|
18
|
+
const primary = "_primary_o1j7l_679";
|
|
19
|
+
const outline = "_outline_o1j7l_684";
|
|
20
|
+
const secondary = "_secondary_o1j7l_694";
|
|
21
|
+
const tertiary = "_tertiary_o1j7l_709";
|
|
22
|
+
const quaternary = "_quaternary_o1j7l_724";
|
|
23
|
+
const success = "_success_o1j7l_754";
|
|
24
|
+
const error = "_error_o1j7l_109";
|
|
25
|
+
const warning = "_warning_o1j7l_784";
|
|
26
|
+
const roundNone = "_roundNone_o1j7l_799";
|
|
27
|
+
const roundSmall = "_roundSmall_o1j7l_803";
|
|
28
|
+
const roundMedium = "_roundMedium_o1j7l_807";
|
|
29
|
+
const roundLarge = "_roundLarge_o1j7l_811";
|
|
30
|
+
const roundFull = "_roundFull_o1j7l_815";
|
|
31
|
+
const shadowNone = "_shadowNone_o1j7l_819";
|
|
32
|
+
const shadowLight = "_shadowLight_o1j7l_823";
|
|
33
|
+
const shadowMedium = "_shadowMedium_o1j7l_827";
|
|
34
|
+
const shadowStrong = "_shadowStrong_o1j7l_831";
|
|
35
|
+
const shadowIntense = "_shadowIntense_o1j7l_835";
|
|
36
|
+
const spin = "_spin_o1j7l_1";
|
|
37
|
+
const pulse = "_pulse_o1j7l_1";
|
|
38
38
|
const styles = {
|
|
39
39
|
noScroll,
|
|
40
40
|
errorMessage,
|
|
@@ -66,15 +66,15 @@ const styles = {
|
|
|
66
66
|
shadowMedium,
|
|
67
67
|
shadowStrong,
|
|
68
68
|
shadowIntense,
|
|
69
|
-
"fade-in": "_fade-
|
|
70
|
-
"slide-up": "_slide-
|
|
71
|
-
"spin-3d": "_spin-
|
|
69
|
+
"fade-in": "_fade-in_o1j7l_1",
|
|
70
|
+
"slide-up": "_slide-up_o1j7l_1",
|
|
71
|
+
"spin-3d": "_spin-3d_o1j7l_1",
|
|
72
72
|
spin,
|
|
73
73
|
pulse,
|
|
74
|
-
"fade-in-up": "_fade-in-
|
|
75
|
-
"progress-grow": "_progress-
|
|
76
|
-
"indeterminate-move": "_indeterminate-
|
|
77
|
-
"skeleton-loading": "_skeleton-
|
|
74
|
+
"fade-in-up": "_fade-in-up_o1j7l_1",
|
|
75
|
+
"progress-grow": "_progress-grow_o1j7l_1",
|
|
76
|
+
"indeterminate-move": "_indeterminate-move_o1j7l_1",
|
|
77
|
+
"skeleton-loading": "_skeleton-loading_o1j7l_1"
|
|
78
78
|
};
|
|
79
79
|
function DataTableBase({
|
|
80
80
|
columns,
|
|
@@ -231,4 +231,4 @@ DataTable.displayName = "DataTable";
|
|
|
231
231
|
export {
|
|
232
232
|
DataTable as D
|
|
233
233
|
};
|
|
234
|
-
//# sourceMappingURL=DataTable-
|
|
234
|
+
//# sourceMappingURL=DataTable-D2QUuLab.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTable-D2QUuLab.js","sources":["../../src/components/DataTable/DataTableBase.tsx","../../src/components/DataTable/next/DataTable.tsx"],"sourcesContent":["import { useMemo, useState, KeyboardEvent } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { DataTableBaseProps } from \"./DataTable.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nfunction DataTableBase<T extends object>({\r\n columns,\r\n data,\r\n onRowClick,\r\n classMap,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n outline = false,\r\n className = \"\",\r\n striped = true,\r\n defaultSortKey,\r\n ariaLabel,\r\n defaultSortOrder = \"asc\",\r\n serverSort = false,\r\n onSortChange,\r\n rowKey,\r\n \"data-testid\": testId = \"data-table\",\r\n}: DataTableBaseProps<T>) {\r\n const [sortKey, setSortKey] = useState<keyof T | undefined>(defaultSortKey);\r\n const [sortOrder, setSortOrder] = useState<\"asc\" | \"desc\">(defaultSortOrder);\r\n\r\n const sortedData = useMemo(() => {\r\n if (serverSort || !sortKey) return data;\r\n\r\n return [...data].sort((a, b) => {\r\n const valA = a[sortKey];\r\n const valB = b[sortKey];\r\n if (valA === valB) return 0;\r\n if (valA == null) return 1;\r\n if (valB == null) return -1;\r\n\r\n const numA = Number(valA);\r\n const numB = Number(valB);\r\n const bothNumeric = !Number.isNaN(numA) && !Number.isNaN(numB);\r\n\r\n if (bothNumeric) {\r\n return sortOrder === \"asc\" ? numA - numB : numB - numA;\r\n }\r\n const cmp = String(valA).localeCompare(String(valB), undefined, {\r\n numeric: true,\r\n });\r\n return sortOrder === \"asc\" ? cmp : -cmp;\r\n });\r\n }, [data, sortKey, sortOrder, serverSort]);\r\n\r\n const handleSort = (key: keyof T) => {\r\n const newOrder = key === sortKey && sortOrder === \"asc\" ? \"desc\" : \"asc\";\r\n setSortKey(key);\r\n setSortOrder(newOrder);\r\n if (serverSort && onSortChange) onSortChange(key, newOrder);\r\n };\r\n\r\n const handleSortKeyDown = (e: KeyboardEvent, key: keyof T) => {\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n handleSort(key);\r\n }\r\n };\r\n\r\n const handleRowKeyDown =\r\n (row: T) => (e: KeyboardEvent<HTMLTableRowElement>) => {\r\n if (!onRowClick) return;\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n onRowClick(row);\r\n }\r\n };\r\n\r\n const captionId = `${testId}-caption`;\r\n\r\n return (\r\n <div\r\n className={combineClassNames(\r\n classMap.wrapper,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n striped && classMap.striped,\r\n className,\r\n )}\r\n data-testid={testId}\r\n >\r\n <table\r\n className={combineClassNames(\r\n classMap.table,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline,\r\n )}\r\n aria-label={ariaLabel}\r\n aria-describedby={captionId}\r\n >\r\n <caption id={captionId} className={classMap.srOnly ?? \"sr_only\"}>\r\n Sortable data table\r\n </caption>\r\n\r\n <thead>\r\n <tr>\r\n {columns.map((col) => {\r\n const isActive = sortKey === col.key;\r\n return (\r\n <th\r\n key={String(col.key)}\r\n scope=\"col\"\r\n tabIndex={col.sortable ? 0 : undefined}\r\n aria-sort={\r\n col.sortable\r\n ? isActive\r\n ? sortOrder === \"asc\"\r\n ? \"ascending\"\r\n : \"descending\"\r\n : \"none\"\r\n : undefined\r\n }\r\n onClick={() => col.sortable && handleSort(col.key)}\r\n onKeyDown={(e) =>\r\n col.sortable && handleSortKeyDown(e, col.key)\r\n }\r\n className={combineClassNames(\r\n col.sortable && classMap.sortable,\r\n classMap.headerCell,\r\n )}\r\n >\r\n <span>{col.label}</span>\r\n {col.sortable && (\r\n <span className={classMap.sortIcon} aria-hidden=\"true\">\r\n {isActive ? (sortOrder === \"asc\" ? \"▲\" : \"▼\") : \"⇅\"}\r\n </span>\r\n )}\r\n </th>\r\n );\r\n })}\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n {sortedData.length === 0 ? (\r\n <tr>\r\n <td\r\n className={classMap.emptyCell}\r\n colSpan={columns.length}\r\n aria-live=\"polite\"\r\n >\r\n No data available\r\n </td>\r\n </tr>\r\n ) : (\r\n sortedData.map((row, idx) => {\r\n const key = rowKey ? rowKey(row) : idx;\r\n return (\r\n <tr\r\n key={key}\r\n className={combineClassNames(\r\n onRowClick && classMap.clickable,\r\n striped && idx % 2 === 1 && classMap.striped,\r\n )}\r\n onClick={() => onRowClick?.(row)}\r\n onKeyDown={handleRowKeyDown(row)}\r\n tabIndex={onRowClick ? 0 : undefined}\r\n >\r\n {columns.map((col) => (\r\n <td\r\n key={String(col.key)}\r\n data-label={col.label}\r\n className={classMap.cell}\r\n >\r\n {col.render\r\n ? col.render(row[col.key], row)\r\n : typeof row[col.key] === \"object\"\r\n ? JSON.stringify(row[col.key])\r\n : String(row[col.key] ?? \"\")}\r\n </td>\r\n ))}\r\n </tr>\r\n );\r\n })\r\n )}\r\n </tbody>\r\n </table>\r\n </div>\r\n );\r\n}\r\nDataTableBase.displayName = \"DataTableBase\";\r\nexport default DataTableBase;\r\n","\"use client\";\r\n\r\nimport styles from \"./DataTable.module.scss\";\r\nimport DataTableBase from \"../DataTableBase\";\r\nimport { DataTableProps } from \"../DataTable.types\";\r\n\r\nfunction DataTable<T extends object>(props: DataTableProps<T>) {\r\n return <DataTableBase {...props} classMap={styles} />;\r\n}\r\nDataTable.displayName = \"DataTable\";\r\nexport default DataTable;\r\n"],"names":["outline","striped"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,SAAS,cAAgC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,gBAAA;AAAA,EACR,WAAW,mBAAA;AAAA,EACX,SAAS,iBAAA;AAAA,EACT,QAAQ;AAAA,EACR,SAAAA,WAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAAC,WAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,eAAe,SAAS;AAC1B,GAA0B;AACxB,QAAM,CAAC,SAAS,UAAU,IAAI,SAA8B,cAAc;AAC1E,QAAM,CAAC,WAAW,YAAY,IAAI,SAAyB,gBAAgB;AAE3E,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,cAAc,CAAC,QAAS,QAAO;AAEnC,WAAO,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,MAAM;AAC9B,YAAM,OAAO,EAAE,OAAO;AACtB,YAAM,OAAO,EAAE,OAAO;AACtB,UAAI,SAAS,KAAM,QAAO;AAC1B,UAAI,QAAQ,KAAM,QAAO;AACzB,UAAI,QAAQ,KAAM,QAAO;AAEzB,YAAM,OAAO,OAAO,IAAI;AACxB,YAAM,OAAO,OAAO,IAAI;AACxB,YAAM,cAAc,CAAC,OAAO,MAAM,IAAI,KAAK,CAAC,OAAO,MAAM,IAAI;AAE7D,UAAI,aAAa;AACf,eAAO,cAAc,QAAQ,OAAO,OAAO,OAAO;AAAA,MACpD;AACA,YAAM,MAAM,OAAO,IAAI,EAAE,cAAc,OAAO,IAAI,GAAG,QAAW;AAAA,QAC9D,SAAS;AAAA,MAAA,CACV;AACD,aAAO,cAAc,QAAQ,MAAM,CAAC;AAAA,IACtC,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,SAAS,WAAW,UAAU,CAAC;AAEzC,QAAM,aAAa,CAAC,QAAiB;AACnC,UAAM,WAAW,QAAQ,WAAW,cAAc,QAAQ,SAAS;AACnE,eAAW,GAAG;AACd,iBAAa,QAAQ;AACrB,QAAI,cAAc,aAAc,cAAa,KAAK,QAAQ;AAAA,EAC5D;AAEA,QAAM,oBAAoB,CAAC,GAAkB,QAAiB;AAC5D,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAA;AACF,iBAAW,GAAG;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,mBACJ,CAAC,QAAW,CAAC,MAA0C;AACrD,QAAI,CAAC,WAAY;AACjB,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAA;AACF,iBAAW,GAAG;AAAA,IAChB;AAAA,EACF;AAEF,QAAM,YAAY,GAAG,MAAM;AAE3B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,SAAS;AAAA,QACT,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,QAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,QACnDA,YAAW,SAAS;AAAA,QACpB;AAAA,MAAA;AAAA,MAEF,eAAa;AAAA,MAEb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT,SAAS;AAAA,YACT,SAAS,KAAK;AAAA,YACd,SAAS,KAAK;AAAA,YACdD,YAAW,SAAS;AAAA,UAAA;AAAA,UAEtB,cAAY;AAAA,UACZ,oBAAkB;AAAA,UAElB,UAAA;AAAA,YAAA,oBAAC,aAAQ,IAAI,WAAW,WAAW,SAAS,UAAU,WAAW,UAAA,sBAAA,CAEjE;AAAA,gCAEC,SAAA,EACC,UAAA,oBAAC,QACE,UAAA,QAAQ,IAAI,CAAC,QAAQ;AACpB,oBAAM,WAAW,YAAY,IAAI;AACjC,qBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,OAAM;AAAA,kBACN,UAAU,IAAI,WAAW,IAAI;AAAA,kBAC7B,aACE,IAAI,WACA,WACE,cAAc,QACZ,cACA,eACF,SACF;AAAA,kBAEN,SAAS,MAAM,IAAI,YAAY,WAAW,IAAI,GAAG;AAAA,kBACjD,WAAW,CAAC,MACV,IAAI,YAAY,kBAAkB,GAAG,IAAI,GAAG;AAAA,kBAE9C,WAAW;AAAA,oBACT,IAAI,YAAY,SAAS;AAAA,oBACzB,SAAS;AAAA,kBAAA;AAAA,kBAGX,UAAA;AAAA,oBAAA,oBAAC,QAAA,EAAM,cAAI,MAAA,CAAM;AAAA,oBAChB,IAAI,YACH,oBAAC,QAAA,EAAK,WAAW,SAAS,UAAU,eAAY,QAC7C,UAAA,WAAY,cAAc,QAAQ,MAAM,MAAO,IAAA,CAClD;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAzBG,OAAO,IAAI,GAAG;AAAA,cAAA;AAAA,YA6BzB,CAAC,GACH,GACF;AAAA,gCAEC,SAAA,EACE,UAAA,WAAW,WAAW,wBACpB,MAAA,EACC,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,SAAS;AAAA,gBACpB,SAAS,QAAQ;AAAA,gBACjB,aAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA,GAGH,IAEA,WAAW,IAAI,CAAC,KAAK,QAAQ;AAC3B,oBAAM,MAAM,SAAS,OAAO,GAAG,IAAI;AACnC,qBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAW;AAAA,oBACT,cAAc,SAAS;AAAA,oBACvBC,YAAW,MAAM,MAAM,KAAK,SAAS;AAAA,kBAAA;AAAA,kBAEvC,SAAS,MAAM,yCAAa;AAAA,kBAC5B,WAAW,iBAAiB,GAAG;AAAA,kBAC/B,UAAU,aAAa,IAAI;AAAA,kBAE1B,UAAA,QAAQ,IAAI,CAAC,QACZ;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAEC,cAAY,IAAI;AAAA,sBAChB,WAAW,SAAS;AAAA,sBAEnB,UAAA,IAAI,SACD,IAAI,OAAO,IAAI,IAAI,GAAG,GAAG,GAAG,IAC5B,OAAO,IAAI,IAAI,GAAG,MAAM,WACtB,KAAK,UAAU,IAAI,IAAI,GAAG,CAAC,IAC3B,OAAO,IAAI,IAAI,GAAG,KAAK,EAAE;AAAA,oBAAA;AAAA,oBAR1B,OAAO,IAAI,GAAG;AAAA,kBAAA,CAUtB;AAAA,gBAAA;AAAA,gBArBI;AAAA,cAAA;AAAA,YAwBX,CAAC,EAAA,CAEL;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AACA,cAAc,cAAc;AC3L5B,SAAS,UAA4B,OAA0B;AAC7D,SAAO,oBAAC,eAAA,EAAe,GAAG,OAAO,UAAU,QAAQ;AACrD;AACA,UAAU,cAAc;"}
|
|
@@ -4,38 +4,38 @@ const React = require("react");
|
|
|
4
4
|
const classNames = require("./classNames-BcWMx052.cjs");
|
|
5
5
|
const capitalize = require("./capitalize-DoV-nOmN.cjs");
|
|
6
6
|
const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
|
|
7
|
-
const noScroll = "
|
|
8
|
-
const errorMessage = "
|
|
9
|
-
const loadingContainer = "
|
|
10
|
-
const hideScrollbar = "
|
|
11
|
-
const sr_only = "
|
|
12
|
-
const wrapper = "
|
|
13
|
-
const table = "
|
|
14
|
-
const sortable = "
|
|
15
|
-
const sort_icon = "
|
|
16
|
-
const clickable = "
|
|
17
|
-
const striped = "
|
|
18
|
-
const clear = "
|
|
19
|
-
const primary = "
|
|
20
|
-
const outline = "
|
|
21
|
-
const secondary = "
|
|
22
|
-
const tertiary = "
|
|
23
|
-
const quaternary = "
|
|
24
|
-
const success = "
|
|
25
|
-
const error = "
|
|
26
|
-
const warning = "
|
|
27
|
-
const roundNone = "
|
|
28
|
-
const roundSmall = "
|
|
29
|
-
const roundMedium = "
|
|
30
|
-
const roundLarge = "
|
|
31
|
-
const roundFull = "
|
|
32
|
-
const shadowNone = "
|
|
33
|
-
const shadowLight = "
|
|
34
|
-
const shadowMedium = "
|
|
35
|
-
const shadowStrong = "
|
|
36
|
-
const shadowIntense = "
|
|
37
|
-
const spin = "
|
|
38
|
-
const pulse = "
|
|
7
|
+
const noScroll = "_noScroll_o1j7l_108";
|
|
8
|
+
const errorMessage = "_errorMessage_o1j7l_109";
|
|
9
|
+
const loadingContainer = "_loadingContainer_o1j7l_110";
|
|
10
|
+
const hideScrollbar = "_hideScrollbar_o1j7l_102";
|
|
11
|
+
const sr_only = "_sr_only_o1j7l_111";
|
|
12
|
+
const wrapper = "_wrapper_o1j7l_552";
|
|
13
|
+
const table = "_table_o1j7l_556";
|
|
14
|
+
const sortable = "_sortable_o1j7l_595";
|
|
15
|
+
const sort_icon = "_sort_icon_o1j7l_602";
|
|
16
|
+
const clickable = "_clickable_o1j7l_616";
|
|
17
|
+
const striped = "_striped_o1j7l_630";
|
|
18
|
+
const clear = "_clear_o1j7l_633";
|
|
19
|
+
const primary = "_primary_o1j7l_679";
|
|
20
|
+
const outline = "_outline_o1j7l_684";
|
|
21
|
+
const secondary = "_secondary_o1j7l_694";
|
|
22
|
+
const tertiary = "_tertiary_o1j7l_709";
|
|
23
|
+
const quaternary = "_quaternary_o1j7l_724";
|
|
24
|
+
const success = "_success_o1j7l_754";
|
|
25
|
+
const error = "_error_o1j7l_109";
|
|
26
|
+
const warning = "_warning_o1j7l_784";
|
|
27
|
+
const roundNone = "_roundNone_o1j7l_799";
|
|
28
|
+
const roundSmall = "_roundSmall_o1j7l_803";
|
|
29
|
+
const roundMedium = "_roundMedium_o1j7l_807";
|
|
30
|
+
const roundLarge = "_roundLarge_o1j7l_811";
|
|
31
|
+
const roundFull = "_roundFull_o1j7l_815";
|
|
32
|
+
const shadowNone = "_shadowNone_o1j7l_819";
|
|
33
|
+
const shadowLight = "_shadowLight_o1j7l_823";
|
|
34
|
+
const shadowMedium = "_shadowMedium_o1j7l_827";
|
|
35
|
+
const shadowStrong = "_shadowStrong_o1j7l_831";
|
|
36
|
+
const shadowIntense = "_shadowIntense_o1j7l_835";
|
|
37
|
+
const spin = "_spin_o1j7l_1";
|
|
38
|
+
const pulse = "_pulse_o1j7l_1";
|
|
39
39
|
const styles = {
|
|
40
40
|
noScroll,
|
|
41
41
|
errorMessage,
|
|
@@ -67,15 +67,15 @@ const styles = {
|
|
|
67
67
|
shadowMedium,
|
|
68
68
|
shadowStrong,
|
|
69
69
|
shadowIntense,
|
|
70
|
-
"fade-in": "_fade-
|
|
71
|
-
"slide-up": "_slide-
|
|
72
|
-
"spin-3d": "_spin-
|
|
70
|
+
"fade-in": "_fade-in_o1j7l_1",
|
|
71
|
+
"slide-up": "_slide-up_o1j7l_1",
|
|
72
|
+
"spin-3d": "_spin-3d_o1j7l_1",
|
|
73
73
|
spin,
|
|
74
74
|
pulse,
|
|
75
|
-
"fade-in-up": "_fade-in-
|
|
76
|
-
"progress-grow": "_progress-
|
|
77
|
-
"indeterminate-move": "_indeterminate-
|
|
78
|
-
"skeleton-loading": "_skeleton-
|
|
75
|
+
"fade-in-up": "_fade-in-up_o1j7l_1",
|
|
76
|
+
"progress-grow": "_progress-grow_o1j7l_1",
|
|
77
|
+
"indeterminate-move": "_indeterminate-move_o1j7l_1",
|
|
78
|
+
"skeleton-loading": "_skeleton-loading_o1j7l_1"
|
|
79
79
|
};
|
|
80
80
|
function DataTableBase({
|
|
81
81
|
columns,
|
|
@@ -230,4 +230,4 @@ function DataTable(props) {
|
|
|
230
230
|
}
|
|
231
231
|
DataTable.displayName = "DataTable";
|
|
232
232
|
exports.DataTable = DataTable;
|
|
233
|
-
//# sourceMappingURL=DataTable-
|
|
233
|
+
//# sourceMappingURL=DataTable-j8nWsbeg.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTable-j8nWsbeg.cjs","sources":["../../src/components/DataTable/DataTableBase.tsx","../../src/components/DataTable/next/DataTable.tsx"],"sourcesContent":["import { useMemo, useState, KeyboardEvent } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { DataTableBaseProps } from \"./DataTable.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nfunction DataTableBase<T extends object>({\r\n columns,\r\n data,\r\n onRowClick,\r\n classMap,\r\n theme = getDefaultTheme(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n state = \"\",\r\n outline = false,\r\n className = \"\",\r\n striped = true,\r\n defaultSortKey,\r\n ariaLabel,\r\n defaultSortOrder = \"asc\",\r\n serverSort = false,\r\n onSortChange,\r\n rowKey,\r\n \"data-testid\": testId = \"data-table\",\r\n}: DataTableBaseProps<T>) {\r\n const [sortKey, setSortKey] = useState<keyof T | undefined>(defaultSortKey);\r\n const [sortOrder, setSortOrder] = useState<\"asc\" | \"desc\">(defaultSortOrder);\r\n\r\n const sortedData = useMemo(() => {\r\n if (serverSort || !sortKey) return data;\r\n\r\n return [...data].sort((a, b) => {\r\n const valA = a[sortKey];\r\n const valB = b[sortKey];\r\n if (valA === valB) return 0;\r\n if (valA == null) return 1;\r\n if (valB == null) return -1;\r\n\r\n const numA = Number(valA);\r\n const numB = Number(valB);\r\n const bothNumeric = !Number.isNaN(numA) && !Number.isNaN(numB);\r\n\r\n if (bothNumeric) {\r\n return sortOrder === \"asc\" ? numA - numB : numB - numA;\r\n }\r\n const cmp = String(valA).localeCompare(String(valB), undefined, {\r\n numeric: true,\r\n });\r\n return sortOrder === \"asc\" ? cmp : -cmp;\r\n });\r\n }, [data, sortKey, sortOrder, serverSort]);\r\n\r\n const handleSort = (key: keyof T) => {\r\n const newOrder = key === sortKey && sortOrder === \"asc\" ? \"desc\" : \"asc\";\r\n setSortKey(key);\r\n setSortOrder(newOrder);\r\n if (serverSort && onSortChange) onSortChange(key, newOrder);\r\n };\r\n\r\n const handleSortKeyDown = (e: KeyboardEvent, key: keyof T) => {\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n handleSort(key);\r\n }\r\n };\r\n\r\n const handleRowKeyDown =\r\n (row: T) => (e: KeyboardEvent<HTMLTableRowElement>) => {\r\n if (!onRowClick) return;\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault();\r\n onRowClick(row);\r\n }\r\n };\r\n\r\n const captionId = `${testId}-caption`;\r\n\r\n return (\r\n <div\r\n className={combineClassNames(\r\n classMap.wrapper,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n striped && classMap.striped,\r\n className,\r\n )}\r\n data-testid={testId}\r\n >\r\n <table\r\n className={combineClassNames(\r\n classMap.table,\r\n classMap[theme],\r\n classMap[state],\r\n outline && classMap.outline,\r\n )}\r\n aria-label={ariaLabel}\r\n aria-describedby={captionId}\r\n >\r\n <caption id={captionId} className={classMap.srOnly ?? \"sr_only\"}>\r\n Sortable data table\r\n </caption>\r\n\r\n <thead>\r\n <tr>\r\n {columns.map((col) => {\r\n const isActive = sortKey === col.key;\r\n return (\r\n <th\r\n key={String(col.key)}\r\n scope=\"col\"\r\n tabIndex={col.sortable ? 0 : undefined}\r\n aria-sort={\r\n col.sortable\r\n ? isActive\r\n ? sortOrder === \"asc\"\r\n ? \"ascending\"\r\n : \"descending\"\r\n : \"none\"\r\n : undefined\r\n }\r\n onClick={() => col.sortable && handleSort(col.key)}\r\n onKeyDown={(e) =>\r\n col.sortable && handleSortKeyDown(e, col.key)\r\n }\r\n className={combineClassNames(\r\n col.sortable && classMap.sortable,\r\n classMap.headerCell,\r\n )}\r\n >\r\n <span>{col.label}</span>\r\n {col.sortable && (\r\n <span className={classMap.sortIcon} aria-hidden=\"true\">\r\n {isActive ? (sortOrder === \"asc\" ? \"▲\" : \"▼\") : \"⇅\"}\r\n </span>\r\n )}\r\n </th>\r\n );\r\n })}\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n {sortedData.length === 0 ? (\r\n <tr>\r\n <td\r\n className={classMap.emptyCell}\r\n colSpan={columns.length}\r\n aria-live=\"polite\"\r\n >\r\n No data available\r\n </td>\r\n </tr>\r\n ) : (\r\n sortedData.map((row, idx) => {\r\n const key = rowKey ? rowKey(row) : idx;\r\n return (\r\n <tr\r\n key={key}\r\n className={combineClassNames(\r\n onRowClick && classMap.clickable,\r\n striped && idx % 2 === 1 && classMap.striped,\r\n )}\r\n onClick={() => onRowClick?.(row)}\r\n onKeyDown={handleRowKeyDown(row)}\r\n tabIndex={onRowClick ? 0 : undefined}\r\n >\r\n {columns.map((col) => (\r\n <td\r\n key={String(col.key)}\r\n data-label={col.label}\r\n className={classMap.cell}\r\n >\r\n {col.render\r\n ? col.render(row[col.key], row)\r\n : typeof row[col.key] === \"object\"\r\n ? JSON.stringify(row[col.key])\r\n : String(row[col.key] ?? \"\")}\r\n </td>\r\n ))}\r\n </tr>\r\n );\r\n })\r\n )}\r\n </tbody>\r\n </table>\r\n </div>\r\n );\r\n}\r\nDataTableBase.displayName = \"DataTableBase\";\r\nexport default DataTableBase;\r\n","\"use client\";\r\n\r\nimport styles from \"./DataTable.module.scss\";\r\nimport DataTableBase from \"../DataTableBase\";\r\nimport { DataTableProps } from \"../DataTable.types\";\r\n\r\nfunction DataTable<T extends object>(props: DataTableProps<T>) {\r\n return <DataTableBase {...props} classMap={styles} />;\r\n}\r\nDataTable.displayName = \"DataTable\";\r\nexport default DataTable;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","outline","striped","useState","useMemo","jsx","combineClassNames","capitalize","jsxs"],"mappings":"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"}
|
package/dist/next/DataTable.js
CHANGED