@jakubmazanec/ui 0.4.2 → 0.5.0-next.7fc14073

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.
Files changed (116) hide show
  1. package/build/components/Button.js +8 -5
  2. package/build/components/Button.js.map +2 -2
  3. package/build/components/Checkbox.js +2 -2
  4. package/build/components/Checkbox.js.map +1 -1
  5. package/build/components/Combobox.js +1 -1
  6. package/build/components/Combobox.js.map +1 -1
  7. package/build/components/DialogPanel.js +1 -1
  8. package/build/components/DialogPanel.js.map +1 -1
  9. package/build/components/DialogTitle.js +1 -1
  10. package/build/components/DialogTitle.js.map +1 -1
  11. package/build/components/Heading.d.ts +21 -0
  12. package/build/components/Heading.js +48 -0
  13. package/build/components/Heading.js.map +7 -0
  14. package/build/components/Icon.js +1 -1
  15. package/build/components/Icon.js.map +1 -1
  16. package/build/components/Input.js +4 -4
  17. package/build/components/Input.js.map +2 -2
  18. package/build/components/Legend.js +1 -1
  19. package/build/components/Legend.js.map +1 -1
  20. package/build/components/ListboxOption.js +1 -1
  21. package/build/components/ListboxOption.js.map +1 -1
  22. package/build/components/Radio.js +2 -2
  23. package/build/components/Radio.js.map +1 -1
  24. package/build/components/Spinner.js +1 -1
  25. package/build/components/Spinner.js.map +1 -1
  26. package/build/components/TableHead.js +1 -1
  27. package/build/components/TableHead.js.map +1 -1
  28. package/build/components/TableHeader.js +1 -1
  29. package/build/components/TableHeader.js.map +2 -2
  30. package/build/components/Textarea.js +2 -2
  31. package/build/components/Textarea.js.map +1 -1
  32. package/build/components/data-table/DataTable.d.ts +2 -1
  33. package/build/components/data-table/DataTable.js +78 -76
  34. package/build/components/data-table/DataTable.js.map +2 -2
  35. package/build/components/data-table/internals/DataTableFilter.d.ts +12 -0
  36. package/build/components/data-table/internals/DataTableFilter.js +275 -0
  37. package/build/components/data-table/internals/DataTableFilter.js.map +7 -0
  38. package/build/components/data-table/internals/DataTableFilters.d.ts +11 -0
  39. package/build/components/data-table/internals/DataTableFilters.js +40 -0
  40. package/build/components/data-table/internals/DataTableFilters.js.map +7 -0
  41. package/build/components/data-table/internals/DataTableHeader.d.ts +2 -11
  42. package/build/components/data-table/internals/DataTableHeader.js +18 -112
  43. package/build/components/data-table/internals/DataTableHeader.js.map +2 -2
  44. package/build/components/data-table/internals/DataTableMenu.d.ts +11 -0
  45. package/build/components/data-table/internals/DataTableMenu.js +34 -0
  46. package/build/components/data-table/internals/DataTableMenu.js.map +7 -0
  47. package/build/components/data-table/internals/DataTablePagination.js +2 -2
  48. package/build/components/data-table/internals/DataTablePagination.js.map +2 -2
  49. package/build/components/data-table/internals/DataTableRow.d.ts +6 -0
  50. package/build/components/data-table/internals/DataTableRow.js +26 -0
  51. package/build/components/data-table/internals/DataTableRow.js.map +7 -0
  52. package/build/components/data-table/internals/DataTableSetting.d.ts +10 -0
  53. package/build/components/data-table/internals/DataTableSetting.js +111 -0
  54. package/build/components/data-table/internals/DataTableSetting.js.map +7 -0
  55. package/build/components/data-table/internals/DataTableSettings.d.ts +9 -0
  56. package/build/components/data-table/internals/DataTableSettings.js +63 -0
  57. package/build/components/data-table/internals/DataTableSettings.js.map +7 -0
  58. package/build/components/data-table/internals/constants.d.ts +1 -1
  59. package/build/components/data-table/internals/constants.js +1 -1
  60. package/build/components/data-table/internals/constants.js.map +2 -2
  61. package/build/components/data-table/internals.d.ts +5 -0
  62. package/build/components/data-table/internals.js +5 -0
  63. package/build/components/data-table/internals.js.map +2 -2
  64. package/build/components.d.ts +1 -0
  65. package/build/components.js +1 -0
  66. package/build/components.js.map +2 -2
  67. package/build/development/createTailwindConfig.d.ts +79 -2
  68. package/build/development/createTailwindConfig.js +10 -55
  69. package/build/development/createTailwindConfig.js.map +2 -2
  70. package/build/development/internals/createTailwindThemeColors.d.ts +2 -0
  71. package/build/development/internals/createTailwindThemeColors.js +51 -0
  72. package/build/development/internals/createTailwindThemeColors.js.map +7 -0
  73. package/build/development/internals.d.ts +1 -0
  74. package/build/development/internals.js +1 -0
  75. package/build/development/internals.js.map +2 -2
  76. package/build/styles.css +15 -1
  77. package/build/styles.css.map +2 -2
  78. package/build/theme/Theme.d.ts +3 -0
  79. package/build/theme/defaultTheme.js +2 -0
  80. package/build/theme/defaultTheme.js.map +2 -2
  81. package/build/theme/internals/themeContext.d.ts +10 -0
  82. package/build/theme/internals/useTheme.d.ts +10 -0
  83. package/package.json +1 -1
  84. package/source/components/Button.tsx +12 -5
  85. package/source/components/Checkbox.tsx +2 -2
  86. package/source/components/Combobox.tsx +1 -1
  87. package/source/components/DialogPanel.tsx +1 -1
  88. package/source/components/DialogTitle.tsx +1 -1
  89. package/source/components/Heading.ts +69 -0
  90. package/source/components/Icon.tsx +1 -1
  91. package/source/components/Input.tsx +5 -5
  92. package/source/components/Legend.tsx +1 -1
  93. package/source/components/ListboxOption.tsx +1 -1
  94. package/source/components/Radio.tsx +2 -2
  95. package/source/components/Spinner.tsx +1 -1
  96. package/source/components/TableHead.ts +1 -1
  97. package/source/components/TableHeader.ts +2 -1
  98. package/source/components/Textarea.tsx +2 -2
  99. package/source/components/data-table/DataTable.tsx +97 -82
  100. package/source/components/data-table/internals/DataTableFilter.tsx +354 -0
  101. package/source/components/data-table/internals/DataTableFilters.tsx +56 -0
  102. package/source/components/data-table/internals/DataTableHeader.tsx +7 -145
  103. package/source/components/data-table/internals/DataTableMenu.tsx +60 -0
  104. package/source/components/data-table/internals/DataTablePagination.tsx +79 -77
  105. package/source/components/data-table/internals/DataTableRow.tsx +40 -0
  106. package/source/components/data-table/internals/DataTableSetting.tsx +142 -0
  107. package/source/components/data-table/internals/DataTableSettings.tsx +83 -0
  108. package/source/components/data-table/internals/constants.ts +1 -1
  109. package/source/components/data-table/internals.ts +5 -0
  110. package/source/components.ts +1 -0
  111. package/source/development/createTailwindConfig.ts +11 -57
  112. package/source/development/internals/createTailwindThemeColors.ts +53 -0
  113. package/source/development/internals.ts +1 -0
  114. package/source/styles.css +19 -3
  115. package/source/theme/Theme.ts +2 -0
  116. package/source/theme/defaultTheme.ts +2 -0
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../source/components/data-table/internals/DataTableHeader.tsx"],
4
- "sourcesContent": ["import {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {flexRender, type Header, type Table} from '@tanstack/react-table';\nimport {type CSSProperties, useCallback} from 'react';\n\nimport {Button} from '../../Button.js';\nimport {Container} from '../../Container.js';\nimport {Field} from '../../Field.js';\nimport {Icon} from '../../Icon.js';\nimport {Popover} from '../../Popover.js';\nimport {PopoverButton} from '../../PopoverButton.js';\nimport {PopoverPanel} from '../../PopoverPanel.js';\nimport {TableHeader} from '../../TableHeader.js';\nimport {Text} from '../../Text.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {DataTableHeaderColumnCheckbox} from './DataTableHeaderColumnCheckbox.js';\nimport {DataTableHeaderFilter} from './DataTableHeaderFilter.js';\nimport {getCommonPinningClasses} from './getCommonPinningClasses.js';\nimport {getCommonPinningStyles} from './getCommonPinningStyles.js';\nimport {normalizeSorting} from './normalizeSorting.js';\n\nexport type DataTableHeaderProps = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n table: Table<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n header: Header<any, any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientSorting: DataTableProps<any, any>['clientSorting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideSorting: DataTableProps<any, any>['hideSorting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n sorting: DataTableProps<any, any>['sorting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n onSorting: DataTableProps<any, any>['onSortingChange'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientFilters: DataTableProps<any, any>['clientFilters'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideFilters: DataTableProps<any, any>['hideFilters'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n filters: DataTableProps<any, any>['filters'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n onFiltering: DataTableProps<any, any>['onFiltersChange'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientFaceting: DataTableProps<any, any>['clientFaceting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n faceting: DataTableProps<any, any>['faceting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnVisibility: DataTableProps<any, any>['hideColumnVisibility'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnResizing: DataTableProps<any, any>['hideColumnResizing'];\n};\n\nexport function DataTableHeader({\n table,\n header,\n clientSorting,\n hideSorting = false,\n sorting: controlledSorting,\n onSorting,\n clientFilters,\n hideFilters = false,\n filters: controlledFilters,\n onFiltering,\n clientFaceting,\n faceting,\n hideColumnVisibility = false,\n hideColumnOrder = false,\n hideColumnPinning = false,\n hideColumnResizing = false,\n}: DataTableHeaderProps) {\n let {attributes, isDragging, listeners, setNodeRef, transform} = useSortable({\n id: header.column.id,\n });\n\n let sorting =\n clientSorting ? normalizeSorting(header) : normalizeSorting(header, controlledSorting);\n\n let style: CSSProperties = {\n transform: CSS.Translate.toString(transform),\n transition: 'width transform 0.2s ease-in-out',\n zIndex: isDragging ? 20 : undefined,\n ...getCommonPinningStyles(header.column),\n };\n\n let contentElement = null;\n\n if (!header.isPlaceholder) {\n contentElement = flexRender(header.column.columnDef.header, header.getContext());\n }\n\n let sortElement;\n\n if (!sorting) {\n sortElement = <Icon name=\"ArrowsUpDown\" size=\"small\" variant=\"light\" />;\n } else if (sorting.direction === 'ascending') {\n sortElement = <Icon name=\"ArrowUp\" size=\"small\" />;\n } else {\n sortElement = <Icon name=\"ArrowDown\" size=\"small\" />;\n }\n\n let title: string | undefined;\n\n if (!sorting) {\n title = 'Sort ascending';\n } else if (sorting.direction === 'ascending') {\n title = 'Sort descending';\n } else {\n title = 'Clear sort';\n }\n\n let handleSortClick = useCallback(() => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n let newSorting: DataTableProps<any, any>['sorting'];\n\n if (!sorting) {\n newSorting = {\n column: header.column.id,\n direction: 'ascending',\n };\n } else if (sorting.direction === 'ascending') {\n newSorting = {\n column: header.column.id,\n direction: 'descending',\n };\n } else {\n newSorting = null;\n }\n\n if (clientSorting) {\n if (!sorting) {\n header.column.toggleSorting(false);\n } else if (sorting.direction === 'ascending') {\n header.column.toggleSorting(true);\n } else {\n header.column.clearSorting();\n }\n }\n\n if (onSorting) {\n onSorting(newSorting);\n }\n }, [sorting, clientSorting, onSorting, header.column]);\n\n let handleWidthReset = useCallback(() => {\n header.column.resetSize();\n }, [header.column]);\n\n let handlePinLeftClick = useCallback(() => {\n header.column.pin('left');\n }, [header.column]);\n\n let handlePinRightClick = useCallback(() => {\n header.column.pin('right');\n }, [header.column]);\n\n let handleUnpinClick = useCallback(() => {\n header.column.pin(false);\n }, [header.column]);\n\n let resolvedHideFilters = hideFilters || !header.column.getCanFilter();\n let resolvedHideSorting = hideSorting || !header.column.getCanSort();\n let resolvedHideColumnPinning = hideColumnPinning || !header.column.getCanPin();\n\n return (\n <TableHeader\n ref={setNodeRef}\n className={getCommonPinningClasses(header.column)}\n colSpan={header.colSpan}\n style={style}\n >\n <span\n className={\n hideColumnResizing ?\n 'relative block overflow-hidden'\n : 'relative mr-6 block overflow-hidden'\n }\n >\n <Container align=\"center\" justify=\"end\" spacing=\"extra-small\">\n {resolvedHideSorting && hideColumnOrder ?\n contentElement\n : <Button\n className={hideColumnOrder ? 'inline-flex' : 'inline-flex cursor-move'}\n size=\"small\"\n title={title}\n variant=\"text\"\n onClick={resolvedHideSorting ? undefined : handleSortClick}\n {...(hideColumnOrder ? {} : attributes)}\n {...(hideColumnOrder ? {} : listeners)}\n >\n {resolvedHideSorting ? null : sortElement}\n {contentElement}\n </Button>\n }\n {resolvedHideColumnPinning && resolvedHideFilters && hideColumnVisibility ? null : (\n <Popover>\n <PopoverButton>\n <Button aria-label=\"Settings\" size=\"small\" variant=\"text\">\n <Icon name=\"Cog6Tooth\" size=\"small\" />\n </Button>\n </PopoverButton>\n <PopoverPanel anchor=\"right start\">\n <Container direction=\"column\" spacing=\"large\">\n {resolvedHideColumnPinning ? null : (\n <Container direction=\"row\" spacing=\"small\">\n <Text>Pin column</Text>\n\n <Field>\n <Container spacing=\"small\">\n {header.column.getIsPinned() === 'left' ? null : (\n <Button\n aria-label=\"Pin to left\"\n variant=\"outline\"\n onClick={handlePinLeftClick}\n >\n <Icon name=\"ArrowLeftEndOnRectangle\" size=\"large\" />\n </Button>\n )}\n {header.column.getIsPinned() ?\n <Button aria-label=\"Unpin\" variant=\"outline\" onClick={handleUnpinClick}>\n <Icon name=\"XMark\" size=\"large\" />\n </Button>\n : null}\n {header.column.getIsPinned() === 'right' ? null : (\n <Button\n aria-label=\"Pin to right\"\n variant=\"outline\"\n onClick={handlePinRightClick}\n >\n <Icon name=\"ArrowRightEndOnRectangle\" size=\"large\" />\n </Button>\n )}\n </Container>\n </Field>\n </Container>\n )}\n\n {resolvedHideFilters ? null : (\n <Container direction=\"column\" spacing=\"small\">\n <Text>Filter</Text>\n\n <Field>\n <DataTableHeaderFilter\n clientFaceting={clientFaceting}\n clientFilters={clientFilters}\n column={header.column}\n faceting={faceting}\n filters={controlledFilters}\n table={table}\n onFiltering={onFiltering}\n />\n </Field>\n </Container>\n )}\n\n {hideColumnVisibility ? null : (\n <Container direction=\"column\" spacing=\"small\">\n <Text>Visible columns</Text>\n\n {table.getAllLeafColumns().map((column) => (\n <DataTableHeaderColumnCheckbox\n key={column.id}\n column={column}\n table={table}\n />\n ))}\n </Container>\n )}\n </Container>\n </PopoverPanel>\n </Popover>\n )}\n </Container>\n </span>\n {hideColumnResizing ? null : (\n <Button\n aria-label=\"Resize\"\n // className=\"absolute right-1 top-2.5 cursor-col-resize\"\n className=\"absolute top-1/2 right-1 -mt-2.5 cursor-col-resize\"\n size=\"small\"\n variant=\"invisible\"\n onDoubleClick={handleWidthReset}\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n >\n <Icon name=\"ArrowsRightLeft\" size=\"small\" />\n </Button>\n )}\n </TableHeader>\n );\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {flexRender, type Header} from '@tanstack/react-table';\nimport {type CSSProperties, useCallback} from 'react';\n\nimport {Button} from '../../Button.js';\nimport {Container} from '../../Container.js';\nimport {Icon} from '../../Icon.js';\nimport {TableHeader} from '../../TableHeader.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {getCommonPinningClasses} from './getCommonPinningClasses.js';\nimport {getCommonPinningStyles} from './getCommonPinningStyles.js';\nimport {normalizeSorting} from './normalizeSorting.js';\n\nexport type DataTableHeaderProps = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n header: Header<any, any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientSorting: DataTableProps<any, any>['clientSorting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideSorting: DataTableProps<any, any>['hideSorting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n sorting: DataTableProps<any, any>['sorting'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n onSorting: DataTableProps<any, any>['onSortingChange'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnResizing: DataTableProps<any, any>['hideColumnResizing'];\n};\n\nexport function DataTableHeader({\n header,\n clientSorting,\n hideSorting = false,\n sorting: controlledSorting,\n onSorting,\n hideColumnOrder = false,\n hideColumnResizing = false,\n}: DataTableHeaderProps) {\n let sorting =\n clientSorting ? normalizeSorting(header) : normalizeSorting(header, controlledSorting);\n\n let contentElement = null;\n\n if (!header.isPlaceholder) {\n contentElement = flexRender(header.column.columnDef.header, header.getContext());\n }\n\n let sortElement;\n\n if (!sorting) {\n sortElement = <Icon name=\"ArrowsUpDown\" size=\"small\" variant=\"light\" />;\n } else if (sorting.direction === 'ascending') {\n sortElement = <Icon name=\"ArrowUp\" size=\"small\" />;\n } else {\n sortElement = <Icon name=\"ArrowDown\" size=\"small\" />;\n }\n\n let title: string | undefined;\n\n if (!sorting) {\n title = 'Sort ascending';\n } else if (sorting.direction === 'ascending') {\n title = 'Sort descending';\n } else {\n title = 'Clear sort';\n }\n\n let handleSortClick = useCallback(() => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n let newSorting: DataTableProps<any, any>['sorting'];\n\n if (!sorting) {\n newSorting = {\n column: header.column.id,\n direction: 'ascending',\n };\n } else if (sorting.direction === 'ascending') {\n newSorting = {\n column: header.column.id,\n direction: 'descending',\n };\n } else {\n newSorting = null;\n }\n\n if (clientSorting) {\n if (!sorting) {\n header.column.toggleSorting(false);\n } else if (sorting.direction === 'ascending') {\n header.column.toggleSorting(true);\n } else {\n header.column.clearSorting();\n }\n }\n\n if (onSorting) {\n onSorting(newSorting);\n }\n }, [sorting, clientSorting, onSorting, header.column]);\n\n let handleWidthReset = useCallback(() => {\n header.column.resetSize();\n }, [header.column]);\n\n let resolvedHideSorting = hideSorting || !header.column.getCanSort();\n\n let style: CSSProperties = {\n transition: 'width transform 0.2s ease-in-out',\n ...getCommonPinningStyles(header.column),\n };\n\n return (\n <TableHeader\n className={getCommonPinningClasses(header.column)}\n colSpan={header.colSpan}\n style={style}\n >\n <span\n className={\n hideColumnResizing ?\n 'relative block overflow-hidden'\n : 'relative mr-6 block overflow-hidden'\n }\n >\n <Container align=\"center\" justify=\"end\" spacing=\"extra-small\">\n {resolvedHideSorting && hideColumnOrder ?\n contentElement\n : <Button\n className=\"inline-flex\"\n size=\"small\"\n title={title}\n variant=\"text\"\n onClick={resolvedHideSorting ? undefined : handleSortClick}\n >\n {resolvedHideSorting ? null : sortElement}\n {contentElement}\n </Button>\n }\n </Container>\n </span>\n {hideColumnResizing ? null : (\n <Button\n aria-label=\"Resize\"\n className=\"absolute top-1/2 right-1 -mt-2.5 cursor-col-resize\"\n size=\"small\"\n variant=\"invisible\"\n onDoubleClick={handleWidthReset}\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n >\n <Icon name=\"ArrowsRightLeft\" size=\"small\" />\n </Button>\n )}\n </TableHeader>\n );\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -0,0 +1,11 @@
1
+ import { type Table } from '@tanstack/react-table';
2
+ import { type DataTableProps } from '../DataTable.js';
3
+ export type DataTableMenuProps = {
4
+ table: Table<any>;
5
+ hideFilters: DataTableProps<any, any>['hideFilters'];
6
+ hideColumnVisibility: DataTableProps<any, any>['hideColumnVisibility'];
7
+ hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];
8
+ hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];
9
+ toggleFilters: () => void;
10
+ };
11
+ export declare function DataTableMenu({ table, hideFilters, hideColumnVisibility, hideColumnOrder, hideColumnPinning, toggleFilters, }: DataTableMenuProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { Button } from "../../Button.js";
4
+ import { Container } from "../../Container.js";
5
+ import { Icon } from "../../Icon.js";
6
+ import { Popover } from "../../Popover.js";
7
+ import { PopoverButton } from "../../PopoverButton.js";
8
+ import { PopoverPanel } from "../../PopoverPanel.js";
9
+ import { DataTableSettings } from "./DataTableSettings.js";
10
+ export function DataTableMenu({
11
+ table,
12
+ hideFilters = false,
13
+ hideColumnVisibility = false,
14
+ hideColumnOrder = false,
15
+ hideColumnPinning = false,
16
+ toggleFilters
17
+ }) {
18
+ return /* @__PURE__ */ jsxs(Container, { justify: "spaced", spacing: "small", children: [
19
+ hideFilters ? null : /* @__PURE__ */ jsx(Button, { "aria-label": "Filter", variant: "outline", onClick: toggleFilters, children: /* @__PURE__ */ jsx(Icon, { name: "Funnel", size: "large" }) }),
20
+ /* @__PURE__ */ jsxs(Popover, { className: "ml-auto", children: [
21
+ /* @__PURE__ */ jsx(PopoverButton, { children: /* @__PURE__ */ jsx(Button, { "aria-label": "Settings", variant: "outline", children: /* @__PURE__ */ jsx(Icon, { name: "Cog6Tooth", size: "large" }) }) }),
22
+ /* @__PURE__ */ jsx(PopoverPanel, { anchor: "bottom end", children: /* @__PURE__ */ jsx(
23
+ DataTableSettings,
24
+ {
25
+ hideColumnOrder,
26
+ hideColumnPinning,
27
+ hideColumnVisibility,
28
+ table
29
+ }
30
+ ) })
31
+ ] })
32
+ ] });
33
+ }
34
+ //# sourceMappingURL=DataTableMenu.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../source/components/data-table/internals/DataTableMenu.tsx"],
4
+ "sourcesContent": ["import {type Table} from '@tanstack/react-table';\n\nimport {Button} from '../../Button.js';\nimport {Container} from '../../Container.js';\nimport {Icon} from '../../Icon.js';\nimport {Popover} from '../../Popover.js';\nimport {PopoverButton} from '../../PopoverButton.js';\nimport {PopoverPanel} from '../../PopoverPanel.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {DataTableSettings} from './DataTableSettings.js';\n\nexport type DataTableMenuProps = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n table: Table<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideFilters: DataTableProps<any, any>['hideFilters'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnVisibility: DataTableProps<any, any>['hideColumnVisibility'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];\n\n // TODO: this probablu should be passed via some context\n toggleFilters: () => void;\n};\n\nexport function DataTableMenu({\n table,\n hideFilters = false,\n hideColumnVisibility = false,\n hideColumnOrder = false,\n hideColumnPinning = false,\n toggleFilters,\n}: DataTableMenuProps) {\n return (\n <Container justify=\"spaced\" spacing=\"small\">\n {hideFilters ? null : (\n <Button aria-label=\"Filter\" variant=\"outline\" onClick={toggleFilters}>\n <Icon name=\"Funnel\" size=\"large\" />\n </Button>\n )}\n <Popover className=\"ml-auto\">\n <PopoverButton>\n <Button aria-label=\"Settings\" variant=\"outline\">\n <Icon name=\"Cog6Tooth\" size=\"large\" />\n </Button>\n </PopoverButton>\n <PopoverPanel anchor=\"bottom end\">\n <DataTableSettings\n hideColumnOrder={hideColumnOrder}\n hideColumnPinning={hideColumnPinning}\n hideColumnVisibility={hideColumnVisibility}\n table={table}\n />\n </PopoverPanel>\n </Popover>\n </Container>\n );\n}\n"],
5
+ "mappings": ";AAuCU,cAGJ,YAHI;AArCV,SAAQ,cAAa;AACrB,SAAQ,iBAAgB;AACxB,SAAQ,YAAW;AACnB,SAAQ,eAAc;AACtB,SAAQ,qBAAoB;AAC5B,SAAQ,oBAAmB;AAE3B,SAAQ,yBAAwB;AAkBzB,gBAAS,cAAc;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,EACd,uBAAuB;AAAA,EACvB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB;AACF,GAAuB;AACrB,SACE,qBAAC,aAAU,SAAQ,UAAS,SAAQ,SACjC;AAAA,kBAAc,OACb,oBAAC,UAAO,cAAW,UAAS,SAAQ,WAAU,SAAS,eACrD,8BAAC,QAAK,MAAK,UAAS,MAAK,SAAQ,GACnC;AAAA,IAEF,qBAAC,WAAQ,WAAU,WACjB;AAAA,0BAAC,iBACC,8BAAC,UAAO,cAAW,YAAW,SAAQ,WACpC,8BAAC,QAAK,MAAK,aAAY,MAAK,SAAQ,GACtC,GACF;AAAA,MACA,oBAAC,gBAAa,QAAO,cACnB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,KACF;AAEJ;",
6
+ "names": []
7
+ }
@@ -101,7 +101,7 @@ export const DataTablePagination = memo(
101
101
  },
102
102
  [clientPagination, onPagination, table]
103
103
  );
104
- return /* @__PURE__ */ jsxs(Container, { align: "center", justify: "center", children: [
104
+ return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Container, { align: "center", className: "flex-wrap", justify: "center", spacing: "small", children: [
105
105
  /* @__PURE__ */ jsxs(Container, { spacing: "small", children: [
106
106
  /* @__PURE__ */ jsx(
107
107
  Button,
@@ -184,7 +184,7 @@ export const DataTablePagination = memo(
184
184
  ] }, pageSize2))
185
185
  }
186
186
  ) })
187
- ] });
187
+ ] }) });
188
188
  }
189
189
  );
190
190
  //# sourceMappingURL=DataTablePagination.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../source/components/data-table/internals/DataTablePagination.tsx"],
4
- "sourcesContent": ["import {type Table} from '@tanstack/react-table';\nimport {type ChangeEvent, memo, useCallback} from 'react';\n\nimport {Button} from '../../Button.js';\nimport {Container} from '../../Container.js';\nimport {Icon} from '../../Icon.js';\nimport {Input} from '../../Input.js';\nimport {Listbox} from '../../Listbox.js';\nimport {ListboxOption} from '../../ListboxOption.js';\nimport {Text} from '../../Text.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {MAX_PAGE_BUTTONS_COUNT, PAGE_SIZES} from './constants.js';\nimport {DataTablePageButton} from './DataTablePageButton.js';\n\ntype PageSize = (typeof PAGE_SIZES)[number];\n\nexport type DataTablePaginationProps = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n table: Table<any>;\n page: number;\n pageSize: number;\n pageCount: number;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientPagination: DataTableProps<any, any>['clientPagination'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n onPagination: DataTableProps<any, any>['onPaginationChange'];\n};\n\nexport const DataTablePagination = memo(\n ({\n table,\n page,\n pageSize,\n pageCount,\n clientPagination,\n onPagination,\n }: DataTablePaginationProps) => {\n let isFirstPage = page === 1;\n let isLastPage = page >= pageCount;\n\n let handlePageClick = useCallback(\n (newPage: number) => {\n if (clientPagination) {\n table.setPageIndex(Math.max(0, Math.min(newPage - 1, pageCount)));\n }\n\n if (onPagination) {\n onPagination({\n page: Math.max(1, Math.min(newPage, pageCount)),\n });\n }\n },\n [clientPagination, onPagination, pageCount, table],\n );\n\n let handleFirstPageClick = useCallback(() => {\n if (clientPagination) {\n table.firstPage();\n }\n\n if (onPagination) {\n onPagination({\n page: 1,\n });\n }\n }, [clientPagination, onPagination, table]);\n\n let handleLastPageClick = useCallback(() => {\n if (clientPagination) {\n table.lastPage();\n }\n\n if (onPagination) {\n onPagination({\n page: pageCount,\n });\n }\n }, [clientPagination, onPagination, pageCount, table]);\n\n let handlePreviousPageClick = useCallback(() => {\n if (clientPagination) {\n table.previousPage();\n }\n\n if (onPagination) {\n onPagination({\n page: Math.max(1, Math.min(page - 1, pageCount)),\n });\n }\n }, [clientPagination, onPagination, page, pageCount, table]);\n\n let handleNextPageClick = useCallback(() => {\n if (clientPagination) {\n table.nextPage();\n }\n\n if (onPagination) {\n onPagination({\n page: Math.max(1, Math.min(page + 1, pageCount)),\n });\n }\n }, [clientPagination, onPagination, page, pageCount, table]);\n\n let handlePageChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n let pageIndex = event.target.value ? Number(event.target.value) - 1 : 0;\n\n if (clientPagination) {\n table.setPageIndex(pageIndex);\n }\n\n if (onPagination) {\n onPagination({\n page: Math.max(1, Math.min(pageIndex + 1, pageCount)),\n });\n }\n },\n [clientPagination, onPagination, pageCount, table],\n );\n\n let handlePageSizeChange = useCallback(\n (pageSize: string) => {\n if (clientPagination) {\n table.setPageSize(Number(pageSize));\n }\n\n if (onPagination) {\n onPagination({\n pageSize: Number(pageSize) as PageSize,\n });\n }\n },\n [clientPagination, onPagination, table],\n );\n\n return (\n <Container align=\"center\" justify=\"center\">\n <Container spacing=\"small\">\n <Button\n aria-label=\"First page\"\n disabled={isFirstPage}\n variant=\"outline\"\n onClick={handleFirstPageClick}\n >\n <Icon name=\"ChevronDoubleLeft\" />\n </Button>\n <Button\n aria-label=\"Previous page\"\n disabled={isFirstPage}\n variant=\"outline\"\n onClick={handlePreviousPageClick}\n >\n <Icon name=\"ChevronLeft\" />\n </Button>\n\n {pageCount <= MAX_PAGE_BUTTONS_COUNT ?\n Array.from({length: pageCount}).map((_, index) => (\n <DataTablePageButton\n // eslint-disable-next-line react/no-array-index-key -- needed, there is no other value\n key={index}\n isSelected={page === index + 1}\n page={index + 1}\n onClick={handlePageClick}\n />\n ))\n : null}\n\n <Button\n aria-label=\"Next page\"\n disabled={isLastPage}\n variant=\"outline\"\n onClick={handleNextPageClick}\n >\n <Icon name=\"ChevronRight\" />\n </Button>\n <Button\n aria-label=\"Last page\"\n disabled={isLastPage}\n variant=\"outline\"\n onClick={handleLastPageClick}\n >\n <Icon name=\"ChevronDoubleRight\" />\n </Button>\n </Container>\n {pageCount > MAX_PAGE_BUTTONS_COUNT ?\n <Container spacing=\"extra-small\">\n <Text>\n Page {page} of {pageCount}\n </Text>\n </Container>\n : null}\n {pageCount > MAX_PAGE_BUTTONS_COUNT ?\n <Container align=\"center\" spacing=\"extra-small\">\n <Text>Go to page:</Text>\n <Input\n className=\"w-12\"\n defaultValue={page}\n pattern=\"[0-9]*\"\n type=\"text\"\n onChange={handlePageChange}\n />\n </Container>\n : null}\n <Container>\n <Listbox\n className=\"w-auto min-w-min\"\n value={String(pageSize)}\n onChange={handlePageSizeChange}\n >\n {PAGE_SIZES.map((pageSize) => (\n <ListboxOption key={pageSize} value={String(pageSize)}>\n Show {pageSize}\n </ListboxOption>\n ))}\n </Listbox>\n </Container>\n </Container>\n );\n },\n);\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {type Table} from '@tanstack/react-table';\nimport {type ChangeEvent, memo, useCallback} from 'react';\n\nimport {Button} from '../../Button.js';\nimport {Container} from '../../Container.js';\nimport {Icon} from '../../Icon.js';\nimport {Input} from '../../Input.js';\nimport {Listbox} from '../../Listbox.js';\nimport {ListboxOption} from '../../ListboxOption.js';\nimport {Text} from '../../Text.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {MAX_PAGE_BUTTONS_COUNT, PAGE_SIZES} from './constants.js';\nimport {DataTablePageButton} from './DataTablePageButton.js';\n\ntype PageSize = (typeof PAGE_SIZES)[number];\n\nexport type DataTablePaginationProps = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n table: Table<any>;\n page: number;\n pageSize: number;\n pageCount: number;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n clientPagination: DataTableProps<any, any>['clientPagination'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n onPagination: DataTableProps<any, any>['onPaginationChange'];\n};\n\nexport const DataTablePagination = memo(\n ({\n table,\n page,\n pageSize,\n pageCount,\n clientPagination,\n onPagination,\n }: DataTablePaginationProps) => {\n let isFirstPage = page === 1;\n let isLastPage = page >= pageCount;\n\n let handlePageClick = useCallback(\n (newPage: number) => {\n if (clientPagination) {\n table.setPageIndex(Math.max(0, Math.min(newPage - 1, pageCount)));\n }\n\n if (onPagination) {\n onPagination({\n page: Math.max(1, Math.min(newPage, pageCount)),\n });\n }\n },\n [clientPagination, onPagination, pageCount, table],\n );\n\n let handleFirstPageClick = useCallback(() => {\n if (clientPagination) {\n table.firstPage();\n }\n\n if (onPagination) {\n onPagination({\n page: 1,\n });\n }\n }, [clientPagination, onPagination, table]);\n\n let handleLastPageClick = useCallback(() => {\n if (clientPagination) {\n table.lastPage();\n }\n\n if (onPagination) {\n onPagination({\n page: pageCount,\n });\n }\n }, [clientPagination, onPagination, pageCount, table]);\n\n let handlePreviousPageClick = useCallback(() => {\n if (clientPagination) {\n table.previousPage();\n }\n\n if (onPagination) {\n onPagination({\n page: Math.max(1, Math.min(page - 1, pageCount)),\n });\n }\n }, [clientPagination, onPagination, page, pageCount, table]);\n\n let handleNextPageClick = useCallback(() => {\n if (clientPagination) {\n table.nextPage();\n }\n\n if (onPagination) {\n onPagination({\n page: Math.max(1, Math.min(page + 1, pageCount)),\n });\n }\n }, [clientPagination, onPagination, page, pageCount, table]);\n\n let handlePageChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n let pageIndex = event.target.value ? Number(event.target.value) - 1 : 0;\n\n if (clientPagination) {\n table.setPageIndex(pageIndex);\n }\n\n if (onPagination) {\n onPagination({\n page: Math.max(1, Math.min(pageIndex + 1, pageCount)),\n });\n }\n },\n [clientPagination, onPagination, pageCount, table],\n );\n\n let handlePageSizeChange = useCallback(\n (pageSize: string) => {\n if (clientPagination) {\n table.setPageSize(Number(pageSize));\n }\n\n if (onPagination) {\n onPagination({\n pageSize: Number(pageSize) as PageSize,\n });\n }\n },\n [clientPagination, onPagination, table],\n );\n\n return (\n <div>\n <Container align=\"center\" className=\"flex-wrap\" justify=\"center\" spacing=\"small\">\n <Container spacing=\"small\">\n <Button\n aria-label=\"First page\"\n disabled={isFirstPage}\n variant=\"outline\"\n onClick={handleFirstPageClick}\n >\n <Icon name=\"ChevronDoubleLeft\" />\n </Button>\n <Button\n aria-label=\"Previous page\"\n disabled={isFirstPage}\n variant=\"outline\"\n onClick={handlePreviousPageClick}\n >\n <Icon name=\"ChevronLeft\" />\n </Button>\n\n {pageCount <= MAX_PAGE_BUTTONS_COUNT ?\n Array.from({length: pageCount}).map((_, index) => (\n <DataTablePageButton\n // eslint-disable-next-line react/no-array-index-key -- needed, there is no other value\n key={index}\n isSelected={page === index + 1}\n page={index + 1}\n onClick={handlePageClick}\n />\n ))\n : null}\n\n <Button\n aria-label=\"Next page\"\n disabled={isLastPage}\n variant=\"outline\"\n onClick={handleNextPageClick}\n >\n <Icon name=\"ChevronRight\" />\n </Button>\n <Button\n aria-label=\"Last page\"\n disabled={isLastPage}\n variant=\"outline\"\n onClick={handleLastPageClick}\n >\n <Icon name=\"ChevronDoubleRight\" />\n </Button>\n </Container>\n {pageCount > MAX_PAGE_BUTTONS_COUNT ?\n <Container spacing=\"extra-small\">\n <Text>\n Page {page} of {pageCount}\n </Text>\n </Container>\n : null}\n {pageCount > MAX_PAGE_BUTTONS_COUNT ?\n <Container align=\"center\" spacing=\"extra-small\">\n <Text>Go to page:</Text>\n <Input\n className=\"w-12\"\n defaultValue={page}\n pattern=\"[0-9]*\"\n type=\"text\"\n onChange={handlePageChange}\n />\n </Container>\n : null}\n <Container>\n <Listbox\n className=\"w-auto min-w-min\"\n value={String(pageSize)}\n onChange={handlePageSizeChange}\n >\n {PAGE_SIZES.map((pageSize) => (\n <ListboxOption key={pageSize} value={String(pageSize)}>\n Show {pageSize}\n </ListboxOption>\n ))}\n </Listbox>\n </Container>\n </Container>\n </div>\n );\n },\n);\n"],
5
+ "mappings": "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",
6
6
  "names": ["pageSize"]
7
7
  }
@@ -0,0 +1,6 @@
1
+ import { type Row } from '@tanstack/react-table';
2
+ export type DataTableRowProps = {
3
+ row: Row<any>;
4
+ onClick?: ((row: Row<any>) => void) | undefined;
5
+ };
6
+ export declare function DataTableRow({ row, onClick }: DataTableRowProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { flexRender } from "@tanstack/react-table";
4
+ import { useCallback } from "react";
5
+ import { TableCell } from "../../TableCell.js";
6
+ import { TableRow } from "../../TableRow.js";
7
+ import { getCommonPinningClasses, getCommonPinningStyles } from "../internals.js";
8
+ export function DataTableRow({ row, onClick }) {
9
+ let handleClick = useCallback(() => {
10
+ onClick?.(row);
11
+ }, [onClick, row]);
12
+ return /* @__PURE__ */ jsx(TableRow, { className: onClick ? "cursor-pointer" : void 0, onClick: handleClick, children: row.getVisibleCells().map((cell) => {
13
+ let value = cell.getValue();
14
+ return /* @__PURE__ */ jsx(
15
+ TableCell,
16
+ {
17
+ className: getCommonPinningClasses(cell.column) + (onClick ? " **:pointer-events-none" : ""),
18
+ style: { ...getCommonPinningStyles(cell.column) },
19
+ title: value === null || value === void 0 ? void 0 : String(value),
20
+ children: flexRender(cell.column.columnDef.cell, cell.getContext())
21
+ },
22
+ cell.id
23
+ );
24
+ }) });
25
+ }
26
+ //# sourceMappingURL=DataTableRow.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../source/components/data-table/internals/DataTableRow.tsx"],
4
+ "sourcesContent": ["import {flexRender, type Row} from '@tanstack/react-table';\nimport {useCallback} from 'react';\n\nimport {TableCell} from '../../TableCell.js';\nimport {TableRow} from '../../TableRow.js';\nimport {getCommonPinningClasses, getCommonPinningStyles} from '../internals.js';\n\nexport type DataTableRowProps = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n row: Row<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n onClick?: ((row: Row<any>) => void) | undefined;\n};\n\nexport function DataTableRow({row, onClick}: DataTableRowProps) {\n let handleClick = useCallback(() => {\n onClick?.(row);\n }, [onClick, row]);\n\n return (\n <TableRow className={onClick ? 'cursor-pointer' : undefined} onClick={handleClick}>\n {row.getVisibleCells().map((cell) => {\n let value = cell.getValue();\n\n return (\n <TableCell\n key={cell.id}\n className={\n getCommonPinningClasses(cell.column) + (onClick ? ' **:pointer-events-none' : '')\n }\n style={{...getCommonPinningStyles(cell.column)}}\n title={value === null || value === undefined ? undefined : String(value)}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n );\n })}\n </TableRow>\n );\n}\n"],
5
+ "mappings": ";AAyBU;AAzBV,SAAQ,kBAA2B;AACnC,SAAQ,mBAAkB;AAE1B,SAAQ,iBAAgB;AACxB,SAAQ,gBAAe;AACvB,SAAQ,yBAAyB,8BAA6B;AASvD,gBAAS,aAAa,EAAC,KAAK,QAAO,GAAsB;AAC9D,MAAI,cAAc,YAAY,MAAM;AAClC,cAAU,GAAG;AAAA,EACf,GAAG,CAAC,SAAS,GAAG,CAAC;AAEjB,SACE,oBAAC,YAAS,WAAW,UAAU,mBAAmB,QAAW,SAAS,aACnE,cAAI,gBAAgB,EAAE,IAAI,CAAC,SAAS;AACnC,QAAI,QAAQ,KAAK,SAAS;AAE1B,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WACE,wBAAwB,KAAK,MAAM,KAAK,UAAU,4BAA4B;AAAA,QAEhF,OAAO,EAAC,GAAG,uBAAuB,KAAK,MAAM,EAAC;AAAA,QAC9C,OAAO,UAAU,QAAQ,UAAU,SAAY,SAAY,OAAO,KAAK;AAAA,QAEtE,qBAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC;AAAA;AAAA,MAPpD,KAAK;AAAA,IAQZ;AAAA,EAEJ,CAAC,GACH;AAEJ;",
6
+ "names": []
7
+ }
@@ -0,0 +1,10 @@
1
+ import { type Column, type Table } from '@tanstack/react-table';
2
+ import { type DataTableProps } from '../DataTable.js';
3
+ export type DataTableSettingProps = {
4
+ table: Table<any>;
5
+ column: Column<any>;
6
+ hideColumnVisibility: DataTableProps<any, any>['hideColumnVisibility'];
7
+ hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];
8
+ hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];
9
+ };
10
+ export declare function DataTableSetting({ table, column, hideColumnVisibility, hideColumnOrder, hideColumnPinning, }: DataTableSettingProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,111 @@
1
+ "use strict";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { useSortable } from "@dnd-kit/sortable";
4
+ import { CSS } from "@dnd-kit/utilities";
5
+ import { flexRender } from "@tanstack/react-table";
6
+ import { useCallback } from "react";
7
+ import { Button } from "../../Button.js";
8
+ import { Checkbox } from "../../Checkbox.js";
9
+ import { CheckboxField } from "../../CheckboxField.js";
10
+ import { Container } from "../../Container.js";
11
+ import { Icon } from "../../Icon.js";
12
+ import { Label } from "../../Label.js";
13
+ export function DataTableSetting({
14
+ table,
15
+ // header,
16
+ column,
17
+ hideColumnVisibility = false,
18
+ hideColumnOrder = false,
19
+ hideColumnPinning = false
20
+ }) {
21
+ let { attributes, isDragging, listeners, setNodeRef, transform, setActivatorNodeRef } = useSortable(
22
+ {
23
+ id: column.id
24
+ }
25
+ );
26
+ let handleChange = useCallback(
27
+ (checked) => {
28
+ if (!checked && table.getFlatHeaders().length >= 2) {
29
+ column.toggleVisibility(checked);
30
+ } else if (checked) {
31
+ column.toggleVisibility(checked);
32
+ }
33
+ },
34
+ [column, table]
35
+ );
36
+ let handlePinLeftClick = useCallback(() => {
37
+ column.pin("left");
38
+ }, [column]);
39
+ let handlePinRightClick = useCallback(() => {
40
+ column.pin("right");
41
+ }, [column]);
42
+ let handleUnpinClick = useCallback(() => {
43
+ column.pin(false);
44
+ }, [column]);
45
+ let resolvedHideColumnPinning = hideColumnPinning || !column.getCanPin();
46
+ return /* @__PURE__ */ jsxs(
47
+ "div",
48
+ {
49
+ ref: setNodeRef,
50
+ style: {
51
+ transform: CSS.Translate.toString(transform),
52
+ transition: "width transform 0.2s ease-in-out",
53
+ zIndex: isDragging ? 20 : void 0
54
+ },
55
+ className: "flex items-center gap-4",
56
+ children: [
57
+ hideColumnOrder ? null : /* @__PURE__ */ jsx(
58
+ Button,
59
+ {
60
+ ref: setActivatorNodeRef,
61
+ "aria-label": "Resize",
62
+ className: "cursor-move",
63
+ size: "small",
64
+ variant: "invisible",
65
+ ...attributes,
66
+ ...listeners,
67
+ children: /* @__PURE__ */ jsx(Icon, { name: "Bars4", size: "small" })
68
+ }
69
+ ),
70
+ hideColumnVisibility ? /* @__PURE__ */ jsx("span", { className: "mr-auto font-sans text-sm font-medium", children: flexRender(column.columnDef.header, {
71
+ table,
72
+ column,
73
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed
74
+ header: { column }
75
+ }) }) : /* @__PURE__ */ jsxs(CheckboxField, { className: "mr-auto", children: [
76
+ /* @__PURE__ */ jsx(Checkbox, { checked: column.getIsVisible(), onChange: handleChange }),
77
+ /* @__PURE__ */ jsx(Label, { className: "flex", children: flexRender(column.columnDef.header, {
78
+ table,
79
+ column,
80
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed
81
+ header: { column }
82
+ }) })
83
+ ] }),
84
+ resolvedHideColumnPinning ? null : /* @__PURE__ */ jsxs(Container, { spacing: "extra-small", children: [
85
+ column.getIsPinned() === "left" ? null : /* @__PURE__ */ jsx(
86
+ Button,
87
+ {
88
+ "aria-label": "Pin to left",
89
+ size: "small",
90
+ variant: "outline",
91
+ onClick: handlePinLeftClick,
92
+ children: /* @__PURE__ */ jsx(Icon, { name: "ArrowLeftEndOnRectangle", size: "small" })
93
+ }
94
+ ),
95
+ column.getIsPinned() ? /* @__PURE__ */ jsx(Button, { "aria-label": "Unpin", size: "small", variant: "outline", onClick: handleUnpinClick, children: /* @__PURE__ */ jsx(Icon, { name: "XMark", size: "small" }) }) : null,
96
+ column.getIsPinned() === "right" ? null : /* @__PURE__ */ jsx(
97
+ Button,
98
+ {
99
+ "aria-label": "Pin to right",
100
+ size: "small",
101
+ variant: "outline",
102
+ onClick: handlePinRightClick,
103
+ children: /* @__PURE__ */ jsx(Icon, { name: "ArrowRightEndOnRectangle", size: "small" })
104
+ }
105
+ )
106
+ ] })
107
+ ]
108
+ }
109
+ );
110
+ }
111
+ //# sourceMappingURL=DataTableSetting.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../source/components/data-table/internals/DataTableSetting.tsx"],
4
+ "sourcesContent": ["import {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {type Column, flexRender, type Header, type Table} from '@tanstack/react-table';\nimport {useCallback} from 'react';\n\nimport {Button} from '../../Button.js';\nimport {Checkbox} from '../../Checkbox.js';\nimport {CheckboxField} from '../../CheckboxField.js';\nimport {Container} from '../../Container.js';\nimport {Icon} from '../../Icon.js';\nimport {Label} from '../../Label.js';\nimport {type DataTableProps} from '../DataTable.js';\n\nexport type DataTableSettingProps = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n table: Table<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n column: Column<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnVisibility: DataTableProps<any, any>['hideColumnVisibility'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];\n};\n\nexport function DataTableSetting({\n table,\n // header,\n column,\n hideColumnVisibility = false,\n hideColumnOrder = false,\n hideColumnPinning = false,\n}: DataTableSettingProps) {\n let {attributes, isDragging, listeners, setNodeRef, transform, setActivatorNodeRef} = useSortable(\n {\n id: column.id,\n },\n );\n\n let handleChange = useCallback(\n (checked: boolean) => {\n if (!checked && table.getFlatHeaders().length >= 2) {\n column.toggleVisibility(checked);\n } else if (checked) {\n column.toggleVisibility(checked);\n }\n },\n [column, table],\n );\n\n let handlePinLeftClick = useCallback(() => {\n column.pin('left');\n }, [column]);\n\n let handlePinRightClick = useCallback(() => {\n column.pin('right');\n }, [column]);\n\n let handleUnpinClick = useCallback(() => {\n column.pin(false);\n }, [column]);\n\n let resolvedHideColumnPinning = hideColumnPinning || !column.getCanPin();\n\n return (\n <div\n ref={setNodeRef}\n style={{\n transform: CSS.Translate.toString(transform),\n transition: 'width transform 0.2s ease-in-out',\n zIndex: isDragging ? 20 : undefined,\n }}\n className=\"flex items-center gap-4\"\n >\n {hideColumnOrder ? null : (\n <Button\n ref={setActivatorNodeRef}\n aria-label=\"Resize\"\n className=\"cursor-move\"\n size=\"small\"\n variant=\"invisible\"\n {...attributes}\n {...listeners}\n >\n <Icon name=\"Bars4\" size=\"small\" />\n </Button>\n )}\n {hideColumnVisibility ?\n <span className=\"mr-auto font-sans text-sm font-medium\">\n {flexRender(column.columnDef.header, {\n table,\n column,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed\n header: {column} as Header<any, any>,\n })}\n </span>\n : <CheckboxField className=\"mr-auto\">\n <Checkbox checked={column.getIsVisible()} onChange={handleChange} />\n <Label className=\"flex\">\n {flexRender(column.columnDef.header, {\n table,\n column,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed\n header: {column} as Header<any, any>,\n })}\n </Label>\n </CheckboxField>\n }\n\n {resolvedHideColumnPinning ? null : (\n <Container spacing=\"extra-small\">\n {column.getIsPinned() === 'left' ? null : (\n <Button\n aria-label=\"Pin to left\"\n size=\"small\"\n variant=\"outline\"\n onClick={handlePinLeftClick}\n >\n <Icon name=\"ArrowLeftEndOnRectangle\" size=\"small\" />\n </Button>\n )}\n {column.getIsPinned() ?\n <Button aria-label=\"Unpin\" size=\"small\" variant=\"outline\" onClick={handleUnpinClick}>\n <Icon name=\"XMark\" size=\"small\" />\n </Button>\n : null}\n {column.getIsPinned() === 'right' ? null : (\n <Button\n aria-label=\"Pin to right\"\n size=\"small\"\n variant=\"outline\"\n onClick={handlePinRightClick}\n >\n <Icon name=\"ArrowRightEndOnRectangle\" size=\"small\" />\n </Button>\n )}\n </Container>\n )}\n </div>\n );\n}\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -0,0 +1,9 @@
1
+ import { type Table } from '@tanstack/react-table';
2
+ import { type DataTableProps } from '../DataTable.js';
3
+ export type DataTableSettingsProps = {
4
+ table: Table<any>;
5
+ hideColumnVisibility: DataTableProps<any, any>['hideColumnVisibility'];
6
+ hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];
7
+ hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];
8
+ };
9
+ export declare function DataTableSettings({ table, hideColumnVisibility, hideColumnOrder, hideColumnPinning, }: DataTableSettingsProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,63 @@
1
+ "use strict";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import {
4
+ closestCenter,
5
+ DndContext,
6
+ KeyboardSensor,
7
+ MouseSensor,
8
+ TouchSensor,
9
+ useSensor,
10
+ useSensors
11
+ } from "@dnd-kit/core";
12
+ import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
13
+ import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
14
+ import { useCallback, useId } from "react";
15
+ import { Container } from "../../Container.js";
16
+ import { DataTableSetting } from "./DataTableSetting.js";
17
+ export function DataTableSettings({
18
+ table,
19
+ hideColumnVisibility = false,
20
+ hideColumnOrder = false,
21
+ hideColumnPinning = false
22
+ }) {
23
+ let sensors = useSensors(
24
+ useSensor(MouseSensor),
25
+ useSensor(TouchSensor),
26
+ useSensor(KeyboardSensor)
27
+ );
28
+ let id = useId();
29
+ let handleDragEnd = useCallback(
30
+ ({ active, over }) => {
31
+ if (over && active.id !== over.id) {
32
+ table.setColumnOrder((previousColumnOrder) => {
33
+ let oldIndex = previousColumnOrder.indexOf(active.id);
34
+ let newIndex = previousColumnOrder.indexOf(over.id);
35
+ return arrayMove(previousColumnOrder, oldIndex, newIndex);
36
+ });
37
+ }
38
+ },
39
+ [table]
40
+ );
41
+ return /* @__PURE__ */ jsx(
42
+ DndContext,
43
+ {
44
+ collisionDetection: closestCenter,
45
+ id,
46
+ modifiers: [restrictToVerticalAxis],
47
+ sensors,
48
+ onDragEnd: handleDragEnd,
49
+ children: /* @__PURE__ */ jsx(SortableContext, { items: table.getState().columnOrder, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx(Container, { direction: "column", spacing: "small", children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx(
50
+ DataTableSetting,
51
+ {
52
+ column,
53
+ hideColumnOrder,
54
+ hideColumnPinning,
55
+ hideColumnVisibility,
56
+ table
57
+ },
58
+ column.id
59
+ )) }) })
60
+ }
61
+ );
62
+ }
63
+ //# sourceMappingURL=DataTableSettings.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../source/components/data-table/internals/DataTableSettings.tsx"],
4
+ "sourcesContent": ["import {\n closestCenter,\n DndContext,\n type DragEndEvent,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {arrayMove, SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {type Table} from '@tanstack/react-table';\nimport {useCallback, useId} from 'react';\n\nimport {Container} from '../../Container.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {DataTableSetting} from './DataTableSetting.js';\n\nexport type DataTableSettingsProps = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n table: Table<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnVisibility: DataTableProps<any, any>['hideColumnVisibility'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];\n};\n\nexport function DataTableSettings({\n table,\n hideColumnVisibility = false,\n hideColumnOrder = false,\n hideColumnPinning = false,\n}: DataTableSettingsProps) {\n let sensors = useSensors(\n useSensor(MouseSensor),\n useSensor(TouchSensor),\n useSensor(KeyboardSensor),\n );\n\n let id = useId();\n\n let handleDragEnd = useCallback(\n ({active, over}: DragEndEvent) => {\n if (over && active.id !== over.id) {\n table.setColumnOrder((previousColumnOrder) => {\n let oldIndex = previousColumnOrder.indexOf(active.id as string);\n let newIndex = previousColumnOrder.indexOf(over.id as string);\n\n return arrayMove(previousColumnOrder, oldIndex, newIndex);\n });\n }\n },\n [table],\n );\n\n return (\n <DndContext\n collisionDetection={closestCenter}\n id={id}\n modifiers={[restrictToVerticalAxis]}\n sensors={sensors}\n onDragEnd={handleDragEnd}\n >\n <SortableContext items={table.getState().columnOrder} strategy={verticalListSortingStrategy}>\n <Container direction=\"column\" spacing=\"small\">\n {table.getAllLeafColumns().map((column) => (\n <DataTableSetting\n key={column.id}\n column={column}\n hideColumnOrder={hideColumnOrder}\n hideColumnPinning={hideColumnPinning}\n hideColumnVisibility={hideColumnVisibility}\n table={table}\n />\n ))}\n </Container>\n </SortableContext>\n </DndContext>\n );\n}\n"],
5
+ "mappings": ";AAqEY;AArEZ;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAQ,8BAA6B;AACrC,SAAQ,WAAW,iBAAiB,mCAAkC;AAEtE,SAAQ,aAAa,aAAY;AAEjC,SAAQ,iBAAgB;AAExB,SAAQ,wBAAuB;AAaxB,gBAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,uBAAuB;AAAA,EACvB,kBAAkB;AAAA,EAClB,oBAAoB;AACtB,GAA2B;AACzB,MAAI,UAAU;AAAA,IACZ,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,IACrB,UAAU,cAAc;AAAA,EAC1B;AAEA,MAAI,KAAK,MAAM;AAEf,MAAI,gBAAgB;AAAA,IAClB,CAAC,EAAC,QAAQ,KAAI,MAAoB;AAChC,UAAI,QAAQ,OAAO,OAAO,KAAK,IAAI;AACjC,cAAM,eAAe,CAAC,wBAAwB;AAC5C,cAAI,WAAW,oBAAoB,QAAQ,OAAO,EAAY;AAC9D,cAAI,WAAW,oBAAoB,QAAQ,KAAK,EAAY;AAE5D,iBAAO,UAAU,qBAAqB,UAAU,QAAQ;AAAA,QAC1D,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAoB;AAAA,MACpB;AAAA,MACA,WAAW,CAAC,sBAAsB;AAAA,MAClC;AAAA,MACA,WAAW;AAAA,MAEX,8BAAC,mBAAgB,OAAO,MAAM,SAAS,EAAE,aAAa,UAAU,6BAC9D,8BAAC,aAAU,WAAU,UAAS,SAAQ,SACnC,gBAAM,kBAAkB,EAAE,IAAI,CAAC,WAC9B;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QALK,OAAO;AAAA,MAMd,CACD,GACH,GACF;AAAA;AAAA,EACF;AAEJ;",
6
+ "names": []
7
+ }
@@ -1,3 +1,3 @@
1
1
  export declare const MAX_PAGE_BUTTONS_COUNT = 10;
2
2
  export declare const PAGE_SIZES: readonly [10, 25, 50, 75, 100];
3
- export declare const DEFAULT_PAGE_SIZE = 50;
3
+ export declare const DEFAULT_PAGE_SIZE: 50;
@@ -1,5 +1,5 @@
1
1
  "use strict";
2
2
  export const MAX_PAGE_BUTTONS_COUNT = 10;
3
3
  export const PAGE_SIZES = [10, 25, 50, 75, 100];
4
- export const DEFAULT_PAGE_SIZE = 50;
4
+ export const DEFAULT_PAGE_SIZE = PAGE_SIZES[2];
5
5
  //# sourceMappingURL=constants.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../source/components/data-table/internals/constants.ts"],
4
- "sourcesContent": ["export const MAX_PAGE_BUTTONS_COUNT = 10;\nexport const PAGE_SIZES = [10, 25, 50, 75, 100] as const;\nexport const DEFAULT_PAGE_SIZE = 50;\n"],
5
- "mappings": ";AAAO,aAAM,yBAAyB;AAC/B,aAAM,aAAa,CAAC,IAAI,IAAI,IAAI,IAAI,GAAG;AACvC,aAAM,oBAAoB;",
4
+ "sourcesContent": ["export const MAX_PAGE_BUTTONS_COUNT = 10;\nexport const PAGE_SIZES = [10, 25, 50, 75, 100] as const;\nexport const DEFAULT_PAGE_SIZE = PAGE_SIZES[2];\n"],
5
+ "mappings": ";AAAO,aAAM,yBAAyB;AAC/B,aAAM,aAAa,CAAC,IAAI,IAAI,IAAI,IAAI,GAAG;AACvC,aAAM,oBAAoB,WAAW,CAAC;",
6
6
  "names": []
7
7
  }
@@ -1,11 +1,16 @@
1
1
  export * from './internals/addFilter.js';
2
2
  export * from './internals/constants.js';
3
+ export * from './internals/DataTableFilter.js';
4
+ export * from './internals/DataTableFilters.js';
3
5
  export * from './internals/DataTableHeader.js';
4
6
  export * from './internals/DataTableHeaderColumnCheckbox.js';
5
7
  export * from './internals/DataTableHeaderFilter.js';
8
+ export * from './internals/DataTableMenu.js';
6
9
  export * from './internals/DataTablePageButton.js';
7
10
  export * from './internals/DataTablePagination.js';
8
11
  export * from './internals/DataTableSearch.js';
12
+ export * from './internals/DataTableSetting.js';
13
+ export * from './internals/DataTableSettings.js';
9
14
  export * from './internals/fromPinningState.js';
10
15
  export * from './internals/fuzzyFilter.js';
11
16
  export * from './internals/getCommonPinningClasses.js';
@@ -1,12 +1,17 @@
1
1
  "use strict";
2
2
  export * from "./internals/addFilter.js";
3
3
  export * from "./internals/constants.js";
4
+ export * from "./internals/DataTableFilter.js";
5
+ export * from "./internals/DataTableFilters.js";
4
6
  export * from "./internals/DataTableHeader.js";
5
7
  export * from "./internals/DataTableHeaderColumnCheckbox.js";
6
8
  export * from "./internals/DataTableHeaderFilter.js";
9
+ export * from "./internals/DataTableMenu.js";
7
10
  export * from "./internals/DataTablePageButton.js";
8
11
  export * from "./internals/DataTablePagination.js";
9
12
  export * from "./internals/DataTableSearch.js";
13
+ export * from "./internals/DataTableSetting.js";
14
+ export * from "./internals/DataTableSettings.js";
10
15
  export * from "./internals/fromPinningState.js";
11
16
  export * from "./internals/fuzzyFilter.js";
12
17
  export * from "./internals/getCommonPinningClasses.js";
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../source/components/data-table/internals.ts"],
4
- "sourcesContent": ["export * from './internals/addFilter.js';\nexport * from './internals/constants.js';\nexport * from './internals/DataTableHeader.js';\nexport * from './internals/DataTableHeaderColumnCheckbox.js';\nexport * from './internals/DataTableHeaderFilter.js';\nexport * from './internals/DataTablePageButton.js';\nexport * from './internals/DataTablePagination.js';\nexport * from './internals/DataTableSearch.js';\nexport * from './internals/fromPinningState.js';\nexport * from './internals/fuzzyFilter.js';\nexport * from './internals/getCommonPinningClasses.js';\nexport * from './internals/getCommonPinningStyles.js';\nexport * from './internals/normalizeFilter.js';\nexport * from './internals/normalizeFilters.js';\nexport * from './internals/normalizeSorting.js';\nexport * from './internals/removeFilter.js';\n"],
5
- "mappings": ";AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
4
+ "sourcesContent": ["export * from './internals/addFilter.js';\nexport * from './internals/constants.js';\nexport * from './internals/DataTableFilter.js';\nexport * from './internals/DataTableFilters.js';\nexport * from './internals/DataTableHeader.js';\nexport * from './internals/DataTableHeaderColumnCheckbox.js';\nexport * from './internals/DataTableHeaderFilter.js';\nexport * from './internals/DataTableMenu.js';\nexport * from './internals/DataTablePageButton.js';\nexport * from './internals/DataTablePagination.js';\nexport * from './internals/DataTableSearch.js';\nexport * from './internals/DataTableSetting.js';\nexport * from './internals/DataTableSettings.js';\nexport * from './internals/fromPinningState.js';\nexport * from './internals/fuzzyFilter.js';\nexport * from './internals/getCommonPinningClasses.js';\nexport * from './internals/getCommonPinningStyles.js';\nexport * from './internals/normalizeFilter.js';\nexport * from './internals/normalizeFilters.js';\nexport * from './internals/normalizeSorting.js';\nexport * from './internals/removeFilter.js';\n"],
5
+ "mappings": ";AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
6
6
  "names": []
7
7
  }
@@ -14,6 +14,7 @@ export * from './components/Error.js';
14
14
  export * from './components/Field.js';
15
15
  export * from './components/Fieldset.js';
16
16
  export * from './components/Form.js';
17
+ export * from './components/Heading.js';
17
18
  export * from './components/Icon.js';
18
19
  export * from './components/Input.js';
19
20
  export * from './components/Label.js';
@@ -15,6 +15,7 @@ export * from "./components/Error.js";
15
15
  export * from "./components/Field.js";
16
16
  export * from "./components/Fieldset.js";
17
17
  export * from "./components/Form.js";
18
+ export * from "./components/Heading.js";
18
19
  export * from "./components/Icon.js";
19
20
  export * from "./components/Input.js";
20
21
  export * from "./components/Label.js";