@epilot/volt-ui-experimental-griffel 0.3.0 → 0.3.1

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 (140) hide show
  1. package/dist/components/accordion/accordion.js +66 -126
  2. package/dist/components/accordion/accordion.js.map +1 -1
  3. package/dist/components/alert-dialog/alert-dialog.js +138 -238
  4. package/dist/components/alert-dialog/alert-dialog.js.map +1 -1
  5. package/dist/components/avatar/avatar-group.js +47 -102
  6. package/dist/components/avatar/avatar-group.js.map +1 -1
  7. package/dist/components/avatar/avatar.js +72 -96
  8. package/dist/components/avatar/avatar.js.map +1 -1
  9. package/dist/components/badge/badge.js +48 -56
  10. package/dist/components/badge/badge.js.map +1 -1
  11. package/dist/components/breadcrumb/breadcrumb.js +49 -97
  12. package/dist/components/breadcrumb/breadcrumb.js.map +1 -1
  13. package/dist/components/button/button.js +49 -57
  14. package/dist/components/button/button.js.map +1 -1
  15. package/dist/components/button-group/button-group.js +31 -55
  16. package/dist/components/button-group/button-group.js.map +1 -1
  17. package/dist/components/callout/callout.js +164 -288
  18. package/dist/components/callout/callout.js.map +1 -1
  19. package/dist/components/card/card.js +81 -137
  20. package/dist/components/card/card.js.map +1 -1
  21. package/dist/components/checkbox/checkbox.js +48 -96
  22. package/dist/components/checkbox/checkbox.js.map +1 -1
  23. package/dist/components/collapsible-sidebar/collapsible-sidebar.js +107 -155
  24. package/dist/components/collapsible-sidebar/collapsible-sidebar.js.map +1 -1
  25. package/dist/components/command/command.js +161 -285
  26. package/dist/components/command/command.js.map +1 -1
  27. package/dist/components/data-table/data-table-body.js +54 -114
  28. package/dist/components/data-table/data-table-body.js.map +1 -1
  29. package/dist/components/data-table/data-table-column-header.js +45 -117
  30. package/dist/components/data-table/data-table-column-header.js.map +1 -1
  31. package/dist/components/data-table/data-table-column-visibility.js +39 -98
  32. package/dist/components/data-table/data-table-column-visibility.js.map +1 -1
  33. package/dist/components/data-table/data-table-content.js +58 -90
  34. package/dist/components/data-table/data-table-content.js.map +1 -1
  35. package/dist/components/data-table/data-table-error.js +39 -83
  36. package/dist/components/data-table/data-table-error.js.map +1 -1
  37. package/dist/components/data-table/data-table-header.js +54 -88
  38. package/dist/components/data-table/data-table-header.js.map +1 -1
  39. package/dist/components/data-table/data-table-loading.js +15 -27
  40. package/dist/components/data-table/data-table-loading.js.map +1 -1
  41. package/dist/components/data-table/data-table-pagination.js +19 -27
  42. package/dist/components/data-table/data-table-pagination.js.map +1 -1
  43. package/dist/components/data-table/data-table-row.js +64 -87
  44. package/dist/components/data-table/data-table-row.js.map +1 -1
  45. package/dist/components/data-table/data-table-toolbar.js +16 -24
  46. package/dist/components/data-table/data-table-toolbar.js.map +1 -1
  47. package/dist/components/data-table/data-table.js +145 -181
  48. package/dist/components/data-table/data-table.js.map +1 -1
  49. package/dist/components/date-range-picker/date-range-picker.js +214 -342
  50. package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
  51. package/dist/components/date-range-picker/range-calendar.js +92 -132
  52. package/dist/components/date-range-picker/range-calendar.js.map +1 -1
  53. package/dist/components/date-time-picker/calendar.js +317 -501
  54. package/dist/components/date-time-picker/calendar.js.map +1 -1
  55. package/dist/components/date-time-picker/date-time-picker-context.js +60 -64
  56. package/dist/components/date-time-picker/date-time-picker-context.js.map +1 -1
  57. package/dist/components/date-time-picker/date-time-picker-input.js +149 -249
  58. package/dist/components/date-time-picker/date-time-picker-input.js.map +1 -1
  59. package/dist/components/date-time-picker/date-time-picker-panel.js +165 -273
  60. package/dist/components/date-time-picker/date-time-picker-panel.js.map +1 -1
  61. package/dist/components/date-time-picker/date-time-picker-popover.js +14 -22
  62. package/dist/components/date-time-picker/date-time-picker-popover.js.map +1 -1
  63. package/dist/components/date-time-picker/date-time-picker.js +90 -134
  64. package/dist/components/date-time-picker/date-time-picker.js.map +1 -1
  65. package/dist/components/date-time-picker/time-picker.js +132 -198
  66. package/dist/components/date-time-picker/time-picker.js.map +1 -1
  67. package/dist/components/density-provider/density-provider.js +19 -39
  68. package/dist/components/density-provider/density-provider.js.map +1 -1
  69. package/dist/components/dialog/dialog.js +145 -253
  70. package/dist/components/dialog/dialog.js.map +1 -1
  71. package/dist/components/drawer/drawer.js +164 -272
  72. package/dist/components/drawer/drawer.js.map +1 -1
  73. package/dist/components/dropdown-menu/dropdown-menu.js +204 -384
  74. package/dist/components/dropdown-menu/dropdown-menu.js.map +1 -1
  75. package/dist/components/field/field-combobox.js +243 -435
  76. package/dist/components/field/field-combobox.js.map +1 -1
  77. package/dist/components/field/field-select.js +19 -23
  78. package/dist/components/field/field-select.js.map +1 -1
  79. package/dist/components/field/field.js +189 -297
  80. package/dist/components/field/field.js.map +1 -1
  81. package/dist/components/label/label.js +19 -27
  82. package/dist/components/label/label.js.map +1 -1
  83. package/dist/components/list/list.js +315 -595
  84. package/dist/components/list/list.js.map +1 -1
  85. package/dist/components/option-card/option-card.js +159 -323
  86. package/dist/components/option-card/option-card.js.map +1 -1
  87. package/dist/components/pill/pill.js +68 -84
  88. package/dist/components/pill/pill.js.map +1 -1
  89. package/dist/components/popover/popover.js +48 -84
  90. package/dist/components/popover/popover.js.map +1 -1
  91. package/dist/components/radio/radio.js +49 -89
  92. package/dist/components/radio/radio.js.map +1 -1
  93. package/dist/components/scroll-overflow/scroll-overflow.js +198 -350
  94. package/dist/components/scroll-overflow/scroll-overflow.js.map +1 -1
  95. package/dist/components/segmented-control/segmented-control.js +97 -141
  96. package/dist/components/segmented-control/segmented-control.js.map +1 -1
  97. package/dist/components/select/select.js +200 -396
  98. package/dist/components/select/select.js.map +1 -1
  99. package/dist/components/separator/separator.js +16 -24
  100. package/dist/components/separator/separator.js.map +1 -1
  101. package/dist/components/skeleton/skeleton.js +43 -83
  102. package/dist/components/skeleton/skeleton.js.map +1 -1
  103. package/dist/components/spinner/spinner.js +20 -44
  104. package/dist/components/spinner/spinner.js.map +1 -1
  105. package/dist/components/switch/switch.js +83 -155
  106. package/dist/components/switch/switch.js.map +1 -1
  107. package/dist/components/table/table-pagination.js +210 -468
  108. package/dist/components/table/table-pagination.js.map +1 -1
  109. package/dist/components/table/table.js +131 -211
  110. package/dist/components/table/table.js.map +1 -1
  111. package/dist/components/tabs/tabs.js +58 -94
  112. package/dist/components/tabs/tabs.js.map +1 -1
  113. package/dist/components/text/text.js +32 -40
  114. package/dist/components/text/text.js.map +1 -1
  115. package/dist/components/toast/toast.js +111 -187
  116. package/dist/components/toast/toast.js.map +1 -1
  117. package/dist/components/toggle/toggle-group.js +24 -40
  118. package/dist/components/toggle/toggle-group.js.map +1 -1
  119. package/dist/components/toggle/toggle.js +39 -47
  120. package/dist/components/toggle/toggle.js.map +1 -1
  121. package/dist/components/tooltip/tooltip.js +62 -106
  122. package/dist/components/tooltip/tooltip.js.map +1 -1
  123. package/dist/lib/clear-button.js +15 -27
  124. package/dist/lib/clear-button.js.map +1 -1
  125. package/dist/lib/icons.js +6 -18
  126. package/dist/lib/icons.js.map +1 -1
  127. package/dist/tokens.json +1 -1
  128. package/package.json +1 -1
  129. package/dist/_virtual/jsx-dev-runtime.js +0 -5
  130. package/dist/_virtual/jsx-dev-runtime.js.map +0 -1
  131. package/dist/_virtual/react-jsx-dev-runtime.development.js +0 -5
  132. package/dist/_virtual/react-jsx-dev-runtime.development.js.map +0 -1
  133. package/dist/_virtual/react-jsx-dev-runtime.production.js +0 -5
  134. package/dist/_virtual/react-jsx-dev-runtime.production.js.map +0 -1
  135. package/dist/vendor/react/cjs/react-jsx-dev-runtime.development.js +0 -236
  136. package/dist/vendor/react/cjs/react-jsx-dev-runtime.development.js.map +0 -1
  137. package/dist/vendor/react/cjs/react-jsx-dev-runtime.production.js +0 -21
  138. package/dist/vendor/react/cjs/react-jsx-dev-runtime.production.js.map +0 -1
  139. package/dist/vendor/react/jsx-dev-runtime.js +0 -9
  140. package/dist/vendor/react/jsx-dev-runtime.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"data-table-column-header.js","sources":["../../../src/components/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { SVGProps } from \"react\"\nimport type { Column } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n// Sort icons\nconst IconArrowUp = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m5 12 7-7 7 7\" />\n <path d=\"M12 19V5\" />\n </svg>\n)\n\nconst IconArrowDown = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"M12 5v14\" />\n <path d=\"m19 12-7 7-7-7\" />\n </svg>\n)\n\nconst IconArrowsSort = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m7 15 5 5 5-5\" />\n <path d=\"m7 9 5-5 5 5\" />\n </svg>\n)\n\nconst useStyles = makeVoltStyles({\n button: {\n display: \"inline-flex\",\n alignItems: \"center\",\n gap: tokens.spacingElement1,\n ...shorthands.paddingBlock(\"0.125rem\"),\n ...shorthands.paddingInline(tokens.spacingElement1),\n ...shorthands.borderRadius(tokens.radiusLg),\n cursor: \"pointer\",\n transitionProperty: \"color, background-color, border-color\",\n transitionDuration: \"150ms\",\n \":hover\": {\n backgroundColor: tokens.semAccentSoft,\n },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.accentA8,\n },\n },\n iconActive: {\n width: \"1rem\",\n height: \"1rem\",\n color: tokens.accent11,\n flexShrink: 0,\n },\n iconUnsorted: {\n width: \"1rem\",\n height: \"1rem\",\n opacity: 0.4,\n flexShrink: 0,\n },\n})\n\nexport type DataTableColumnHeaderProps<TData = unknown, TValue = unknown> = {\n /** The column instance from Tanstack Table */\n column: Column<TData, TValue>\n /** The header title to display */\n title: string\n /** Additional class name */\n className?: string\n}\n\nfunction DataTableColumnHeaderInner<TData, TValue>(\n { column, title, className }: DataTableColumnHeaderProps<TData, TValue>,\n ref: React.ForwardedRef<HTMLSpanElement>\n) {\n const styles = useStyles()\n\n if (!column.getCanSort()) {\n return (\n <span ref={ref} className={className}>\n {title}\n </span>\n )\n }\n\n return (\n <span\n ref={ref}\n role=\"button\"\n tabIndex={0}\n data-slot=\"data-table-column-header\"\n {...{ [SLOT_ATTR]: \"data-table-column-header\" }}\n data-fs-element=\"DataTable-SortButton\"\n onClick={() => column.toggleSorting()}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault()\n column.toggleSorting()\n }\n }}\n aria-label={\n column.getIsSorted() === \"asc\"\n ? `${title}, sorted ascending. Click to sort descending.`\n : column.getIsSorted() === \"desc\"\n ? `${title}, sorted descending. Click to remove sorting.`\n : `${title}. Click to sort ascending.`\n }\n className={mergeClasses(styles.button, className)}\n >\n {title}\n {column.getIsSorted() === \"asc\" && (\n <IconArrowUp className={styles.iconActive} />\n )}\n {column.getIsSorted() === \"desc\" && (\n <IconArrowDown className={styles.iconActive} />\n )}\n {!column.getIsSorted() && (\n <IconArrowsSort className={styles.iconUnsorted} />\n )}\n </span>\n )\n}\n\nexport const DataTableColumnHeader = React.forwardRef(\n DataTableColumnHeaderInner\n) as <TData = unknown, TValue = unknown>(\n props: DataTableColumnHeaderProps<TData, TValue> & {\n ref?: React.Ref<HTMLSpanElement>\n }\n) => React.ReactElement | null\n"],"names":["IconArrowUp","props","jsxDEV","this","IconArrowDown","IconArrowsSort","useStyles","makeVoltStyles","tokens.spacingElement1","shorthands","tokens.radiusLg","tokens.semAccentSoft","tokens.accentA8","tokens.accent11","DataTableColumnHeaderInner","column","title","className","ref","styles","SLOT_ATTR","e","mergeClasses","DataTableColumnHeader","React"],"mappings":"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"}
1
+ {"version":3,"file":"data-table-column-header.js","sources":["../../../src/components/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { SVGProps } from \"react\"\nimport type { Column } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n// Sort icons\nconst IconArrowUp = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m5 12 7-7 7 7\" />\n <path d=\"M12 19V5\" />\n </svg>\n)\n\nconst IconArrowDown = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"M12 5v14\" />\n <path d=\"m19 12-7 7-7-7\" />\n </svg>\n)\n\nconst IconArrowsSort = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m7 15 5 5 5-5\" />\n <path d=\"m7 9 5-5 5 5\" />\n </svg>\n)\n\nconst useStyles = makeVoltStyles({\n button: {\n display: \"inline-flex\",\n alignItems: \"center\",\n gap: tokens.spacingElement1,\n ...shorthands.paddingBlock(\"0.125rem\"),\n ...shorthands.paddingInline(tokens.spacingElement1),\n ...shorthands.borderRadius(tokens.radiusLg),\n cursor: \"pointer\",\n transitionProperty: \"color, background-color, border-color\",\n transitionDuration: \"150ms\",\n \":hover\": {\n backgroundColor: tokens.semAccentSoft,\n },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.accentA8,\n },\n },\n iconActive: {\n width: \"1rem\",\n height: \"1rem\",\n color: tokens.accent11,\n flexShrink: 0,\n },\n iconUnsorted: {\n width: \"1rem\",\n height: \"1rem\",\n opacity: 0.4,\n flexShrink: 0,\n },\n})\n\nexport type DataTableColumnHeaderProps<TData = unknown, TValue = unknown> = {\n /** The column instance from Tanstack Table */\n column: Column<TData, TValue>\n /** The header title to display */\n title: string\n /** Additional class name */\n className?: string\n}\n\nfunction DataTableColumnHeaderInner<TData, TValue>(\n { column, title, className }: DataTableColumnHeaderProps<TData, TValue>,\n ref: React.ForwardedRef<HTMLSpanElement>\n) {\n const styles = useStyles()\n\n if (!column.getCanSort()) {\n return (\n <span ref={ref} className={className}>\n {title}\n </span>\n )\n }\n\n return (\n <span\n ref={ref}\n role=\"button\"\n tabIndex={0}\n data-slot=\"data-table-column-header\"\n {...{ [SLOT_ATTR]: \"data-table-column-header\" }}\n data-fs-element=\"DataTable-SortButton\"\n onClick={() => column.toggleSorting()}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault()\n column.toggleSorting()\n }\n }}\n aria-label={\n column.getIsSorted() === \"asc\"\n ? `${title}, sorted ascending. Click to sort descending.`\n : column.getIsSorted() === \"desc\"\n ? `${title}, sorted descending. Click to remove sorting.`\n : `${title}. Click to sort ascending.`\n }\n className={mergeClasses(styles.button, className)}\n >\n {title}\n {column.getIsSorted() === \"asc\" && (\n <IconArrowUp className={styles.iconActive} />\n )}\n {column.getIsSorted() === \"desc\" && (\n <IconArrowDown className={styles.iconActive} />\n )}\n {!column.getIsSorted() && (\n <IconArrowsSort className={styles.iconUnsorted} />\n )}\n </span>\n )\n}\n\nexport const DataTableColumnHeader = React.forwardRef(\n DataTableColumnHeaderInner\n) as <TData = unknown, TValue = unknown>(\n props: DataTableColumnHeaderProps<TData, TValue> & {\n ref?: React.Ref<HTMLSpanElement>\n }\n) => React.ReactElement | null\n"],"names":["IconArrowUp","props","jsxs","jsx","IconArrowDown","IconArrowsSort","useStyles","makeVoltStyles","tokens.spacingElement1","shorthands","tokens.radiusLg","tokens.semAccentSoft","tokens.accentA8","tokens.accent11","DataTableColumnHeaderInner","column","title","className","ref","styles","SLOT_ATTR","e","mergeClasses","DataTableColumnHeader","React"],"mappings":"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"}
@@ -1,11 +1,11 @@
1
- import { j as e } from "../../vendor/react/jsx-dev-runtime.js";
2
- import * as g from "react";
3
- import { shorthands as t } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
4
- import { makeVoltStyles as x } from "../../styles/make-styles.js";
5
- import { Button as v } from "../button/button.js";
6
- import { DropdownMenu as N, DropdownMenuTrigger as w, DropdownMenuContent as q, DropdownMenuLabel as D, DropdownMenuSeparator as y, DropdownMenuCheckboxItem as V } from "../dropdown-menu/dropdown-menu.js";
7
- import { useDataTable as k } from "./hooks/use-data-table.js";
8
- const C = (a) => /* @__PURE__ */ e.jsxDEV(
1
+ import { jsxs as l, jsx as t } from "react/jsx-runtime";
2
+ import * as b from "react";
3
+ import { shorthands as n } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
4
+ import { makeVoltStyles as w } from "../../styles/make-styles.js";
5
+ import { Button as D } from "../button/button.js";
6
+ import { DropdownMenu as y, DropdownMenuTrigger as C, DropdownMenuContent as x, DropdownMenuLabel as T, DropdownMenuSeparator as M, DropdownMenuCheckboxItem as V } from "../dropdown-menu/dropdown-menu.js";
7
+ import { useDataTable as v } from "./hooks/use-data-table.js";
8
+ const S = (r) => /* @__PURE__ */ t(
9
9
  "svg",
10
10
  {
11
11
  xmlns: "http://www.w3.org/2000/svg",
@@ -13,22 +13,10 @@ const C = (a) => /* @__PURE__ */ e.jsxDEV(
13
13
  height: "20",
14
14
  viewBox: "0 -960 960 960",
15
15
  fill: "currentColor",
16
- ...a,
17
- children: /* @__PURE__ */ e.jsxDEV("path", { d: "M413.09-65.87q-16.26 0-28.68-9.85Q372-85.56 370-101.83l-15-94.56q-15.61-5.31-34.07-15.89-18.45-10.59-31.63-21.33l-85.43 40q-15.7 6.57-31.96 1.78-16.26-4.78-24.82-20.04l-65.92-118.7q-9.13-14.13-5.34-30.1 3.78-15.98 17.47-26.11l79.44-59q-1.44-7.31-1.94-17.11-.5-9.81-.5-17.11 0-7.3.5-17.11.5-9.8 1.94-17.11L93.3-572.65q-14.26-10.13-17.76-26.11-3.5-15.98 5.63-30.67l65.92-118.7q8.56-14.13 24.54-19.48 15.98-5.35 31.67 1.22l87.13 40q12.61-10.18 30.79-20.48 18.17-10.3 33.78-15.17l15-95.57q2-16.83 14.41-26.96 12.42-10.13 28.68-10.13h133.82q16.26 0 28.68 10.13Q588-874.44 590-857.61l15 94.57q15.61 5.87 34.28 15.67 18.68 9.8 31.42 20.98l85.43-40q15.7-6.57 31.46-1.22 15.76 5.35 24.32 19.48l67.48 118.7q8.57 14.69 5.07 31.17-3.5 16.48-17.76 25.61l-80 56.43q1.43 8.31 2.21 18.11.79 9.81.79 18.11 0 8.3-.79 17.61-.78 9.3-2.21 17.61l80 57.43q14.26 9.13 17.76 25.61 3.5 16.48-5.07 31.17l-66.48 118.7q-8.56 14.7-24.54 19.76-15.98 5.07-31.67-1.5l-86.57-40q-13.17 10.74-30.85 21.55-17.67 10.8-34.28 15.67l-15 94.56q-2 16.27-14.41 26.11-12.42 9.85-28.68 9.85H413.09Zm27.43-79.22h78.39l14.57-111.43q33.56-8 63.91-25 30.35-17 54.35-42.7l106 46 34.91-64.65-92.87-67.87q4-17.56 6.78-34.63 2.79-17.06 2.79-34.63 0-17.57-2.29-34.63-2.28-17.07-7.28-34.63l93.44-67.87-35.48-64.65-105.44 46q-23-27.13-53.13-45.48-30.13-18.35-65.69-22.78l-14-110.87h-78.96l-13.43 110.87q-35.13 6.43-65.76 24.28-30.63 17.85-54.2 43.98l-104.87-46-35.48 64.65 92.31 67.3q-4 17.57-6.79 34.92-2.78 17.34-2.78 34.91 0 17.57 2.78 35.2 2.79 17.63 6.79 34.63l-92.31 67.3 35.48 64.65 104.87-46q24.57 25.13 55.2 42.7 30.63 17.56 64.76 25.56l13.43 110.87ZM478.87-350q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38ZM480-480Z" }, void 0, !1, {
18
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-visibility.tsx",
19
- lineNumber: 27,
20
- columnNumber: 5
21
- }, void 0)
22
- },
23
- void 0,
24
- !1,
25
- {
26
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-visibility.tsx",
27
- lineNumber: 19,
28
- columnNumber: 3
29
- },
30
- void 0
31
- ), j = x({
16
+ ...r,
17
+ children: /* @__PURE__ */ t("path", { d: "M413.09-65.87q-16.26 0-28.68-9.85Q372-85.56 370-101.83l-15-94.56q-15.61-5.31-34.07-15.89-18.45-10.59-31.63-21.33l-85.43 40q-15.7 6.57-31.96 1.78-16.26-4.78-24.82-20.04l-65.92-118.7q-9.13-14.13-5.34-30.1 3.78-15.98 17.47-26.11l79.44-59q-1.44-7.31-1.94-17.11-.5-9.81-.5-17.11 0-7.3.5-17.11.5-9.8 1.94-17.11L93.3-572.65q-14.26-10.13-17.76-26.11-3.5-15.98 5.63-30.67l65.92-118.7q8.56-14.13 24.54-19.48 15.98-5.35 31.67 1.22l87.13 40q12.61-10.18 30.79-20.48 18.17-10.3 33.78-15.17l15-95.57q2-16.83 14.41-26.96 12.42-10.13 28.68-10.13h133.82q16.26 0 28.68 10.13Q588-874.44 590-857.61l15 94.57q15.61 5.87 34.28 15.67 18.68 9.8 31.42 20.98l85.43-40q15.7-6.57 31.46-1.22 15.76 5.35 24.32 19.48l67.48 118.7q8.57 14.69 5.07 31.17-3.5 16.48-17.76 25.61l-80 56.43q1.43 8.31 2.21 18.11.79 9.81.79 18.11 0 8.3-.79 17.61-.78 9.3-2.21 17.61l80 57.43q14.26 9.13 17.76 25.61 3.5 16.48-5.07 31.17l-66.48 118.7q-8.56 14.7-24.54 19.76-15.98 5.07-31.67-1.5l-86.57-40q-13.17 10.74-30.85 21.55-17.67 10.8-34.28 15.67l-15 94.56q-2 16.27-14.41 26.11-12.42 9.85-28.68 9.85H413.09Zm27.43-79.22h78.39l14.57-111.43q33.56-8 63.91-25 30.35-17 54.35-42.7l106 46 34.91-64.65-92.87-67.87q4-17.56 6.78-34.63 2.79-17.06 2.79-34.63 0-17.57-2.29-34.63-2.28-17.07-7.28-34.63l93.44-67.87-35.48-64.65-105.44 46q-23-27.13-53.13-45.48-30.13-18.35-65.69-22.78l-14-110.87h-78.96l-13.43 110.87q-35.13 6.43-65.76 24.28-30.63 17.85-54.2 43.98l-104.87-46-35.48 64.65 92.31 67.3q-4 17.57-6.79 34.92-2.78 17.34-2.78 34.91 0 17.57 2.78 35.2 2.79 17.63 6.79 34.63l-92.31 67.3 35.48 64.65 104.87-46q24.57 25.13 55.2 42.7 30.63 17.56 64.76 25.56l13.43 110.87ZM478.87-350q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38ZM480-480Z" })
18
+ }
19
+ ), k = w({
32
20
  icon: {
33
21
  width: "1rem",
34
22
  height: "1rem"
@@ -37,102 +25,55 @@ const C = (a) => /* @__PURE__ */ e.jsxDEV(
37
25
  position: "absolute",
38
26
  width: "1px",
39
27
  height: "1px",
40
- ...t.padding(0),
41
- ...t.margin("-1px"),
42
- ...t.overflow("hidden"),
28
+ ...n.padding(0),
29
+ ...n.margin("-1px"),
30
+ ...n.overflow("hidden"),
43
31
  clip: "rect(0, 0, 0, 0)",
44
32
  whiteSpace: "nowrap"
45
33
  }
46
- }), Z = g.forwardRef(function({ icon: n, trigger: m, label: s, contentClassName: u, align: c = "end", ...b }, d) {
47
- const { table: p } = k(), r = j(), o = p.getAllColumns().filter((l) => l.getCanHide());
48
- return o.length === 0 ? null : /* @__PURE__ */ e.jsxDEV(N, { ref: d, ...b, children: [
49
- /* @__PURE__ */ e.jsxDEV(w, { asChild: !0, children: m ?? /* @__PURE__ */ e.jsxDEV(
50
- v,
34
+ }), B = b.forwardRef(function({ icon: d, trigger: h, label: o, contentClassName: m, align: c = "end", ...p }, q) {
35
+ const { table: f } = v(), a = k(), s = f.getAllColumns().filter((e) => e.getCanHide());
36
+ return s.length === 0 ? null : /* @__PURE__ */ l(y, { ref: q, ...p, children: [
37
+ /* @__PURE__ */ t(C, { asChild: !0, children: h ?? /* @__PURE__ */ l(
38
+ D,
51
39
  {
52
40
  variant: "tertiary",
53
41
  size: "sm",
54
42
  "data-fs-element": "DataTable-ColumnVisibility-Trigger",
55
43
  children: [
56
- n ?? /* @__PURE__ */ e.jsxDEV(C, { className: r.icon }, void 0, !1, {
57
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-visibility.tsx",
58
- lineNumber: 93,
59
- columnNumber: 22
60
- }, this),
61
- /* @__PURE__ */ e.jsxDEV("span", { className: r.srOnly, children: s }, void 0, !1, {
62
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-visibility.tsx",
63
- lineNumber: 94,
64
- columnNumber: 13
65
- }, this)
44
+ d ?? /* @__PURE__ */ t(S, { className: a.icon }),
45
+ /* @__PURE__ */ t("span", { className: a.srOnly, children: o })
66
46
  ]
67
- },
68
- void 0,
69
- !0,
70
- {
71
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-visibility.tsx",
72
- lineNumber: 88,
73
- columnNumber: 11
74
- },
75
- this
76
- ) }, void 0, !1, {
77
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-visibility.tsx",
78
- lineNumber: 86,
79
- columnNumber: 7
80
- }, this),
81
- /* @__PURE__ */ e.jsxDEV(
82
- q,
47
+ }
48
+ ) }),
49
+ /* @__PURE__ */ l(
50
+ x,
83
51
  {
84
52
  align: c,
85
- className: u,
53
+ className: m,
86
54
  "data-fs-element": "DataTable-ColumnVisibility-Content",
87
55
  children: [
88
- /* @__PURE__ */ e.jsxDEV(D, { children: s }, void 0, !1, {
89
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-visibility.tsx",
90
- lineNumber: 103,
91
- columnNumber: 9
92
- }, this),
93
- /* @__PURE__ */ e.jsxDEV(y, {}, void 0, !1, {
94
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-visibility.tsx",
95
- lineNumber: 104,
96
- columnNumber: 9
97
- }, this),
98
- o.map((l) => {
99
- const i = l.columnDef.meta, f = (i == null ? void 0 : i.visibilityLabel) ?? (typeof l.columnDef.header == "string" ? l.columnDef.header : l.id);
100
- return /* @__PURE__ */ e.jsxDEV(
56
+ /* @__PURE__ */ t(T, { children: o }),
57
+ /* @__PURE__ */ t(M, {}),
58
+ s.map((e) => {
59
+ const i = e.columnDef.meta, g = (i == null ? void 0 : i.visibilityLabel) ?? (typeof e.columnDef.header == "string" ? e.columnDef.header : e.id);
60
+ return /* @__PURE__ */ t(
101
61
  V,
102
62
  {
103
- checked: l.getIsVisible(),
104
- onCheckedChange: (h) => l.toggleVisibility(!!h),
63
+ checked: e.getIsVisible(),
64
+ onCheckedChange: (u) => e.toggleVisibility(!!u),
105
65
  "data-fs-element": "DataTable-ColumnVisibility-Item",
106
- children: f
107
- },
108
- l.id,
109
- !1,
110
- {
111
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-visibility.tsx",
112
- lineNumber: 118,
113
- columnNumber: 13
66
+ children: g
114
67
  },
115
- this
68
+ e.id
116
69
  );
117
70
  })
118
71
  ]
119
- },
120
- void 0,
121
- !0,
122
- {
123
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-visibility.tsx",
124
- lineNumber: 98,
125
- columnNumber: 7
126
- },
127
- this
72
+ }
128
73
  )
129
- ] }, void 0, !0, {
130
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-visibility.tsx",
131
- lineNumber: 85,
132
- columnNumber: 5
133
- }, this);
74
+ ] });
134
75
  });
135
76
  export {
136
- Z as DataTableColumnVisibility
77
+ B as DataTableColumnVisibility
137
78
  };
138
79
  //# sourceMappingURL=data-table-column-visibility.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"data-table-column-visibility.js","sources":["../../../src/components/data-table/data-table-column-visibility.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { Button } from \"../button/button\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"../dropdown-menu/dropdown-menu\"\nimport { useDataTable } from \"./hooks/use-data-table\"\n\n// Settings/gear icon (default)\nconst IconSettings = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 -960 960 960\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M413.09-65.87q-16.26 0-28.68-9.85Q372-85.56 370-101.83l-15-94.56q-15.61-5.31-34.07-15.89-18.45-10.59-31.63-21.33l-85.43 40q-15.7 6.57-31.96 1.78-16.26-4.78-24.82-20.04l-65.92-118.7q-9.13-14.13-5.34-30.1 3.78-15.98 17.47-26.11l79.44-59q-1.44-7.31-1.94-17.11-.5-9.81-.5-17.11 0-7.3.5-17.11.5-9.8 1.94-17.11L93.3-572.65q-14.26-10.13-17.76-26.11-3.5-15.98 5.63-30.67l65.92-118.7q8.56-14.13 24.54-19.48 15.98-5.35 31.67 1.22l87.13 40q12.61-10.18 30.79-20.48 18.17-10.3 33.78-15.17l15-95.57q2-16.83 14.41-26.96 12.42-10.13 28.68-10.13h133.82q16.26 0 28.68 10.13Q588-874.44 590-857.61l15 94.57q15.61 5.87 34.28 15.67 18.68 9.8 31.42 20.98l85.43-40q15.7-6.57 31.46-1.22 15.76 5.35 24.32 19.48l67.48 118.7q8.57 14.69 5.07 31.17-3.5 16.48-17.76 25.61l-80 56.43q1.43 8.31 2.21 18.11.79 9.81.79 18.11 0 8.3-.79 17.61-.78 9.3-2.21 17.61l80 57.43q14.26 9.13 17.76 25.61 3.5 16.48-5.07 31.17l-66.48 118.7q-8.56 14.7-24.54 19.76-15.98 5.07-31.67-1.5l-86.57-40q-13.17 10.74-30.85 21.55-17.67 10.8-34.28 15.67l-15 94.56q-2 16.27-14.41 26.11-12.42 9.85-28.68 9.85H413.09Zm27.43-79.22h78.39l14.57-111.43q33.56-8 63.91-25 30.35-17 54.35-42.7l106 46 34.91-64.65-92.87-67.87q4-17.56 6.78-34.63 2.79-17.06 2.79-34.63 0-17.57-2.29-34.63-2.28-17.07-7.28-34.63l93.44-67.87-35.48-64.65-105.44 46q-23-27.13-53.13-45.48-30.13-18.35-65.69-22.78l-14-110.87h-78.96l-13.43 110.87q-35.13 6.43-65.76 24.28-30.63 17.85-54.2 43.98l-104.87-46-35.48 64.65 92.31 67.3q-4 17.57-6.79 34.92-2.78 17.34-2.78 34.91 0 17.57 2.78 35.2 2.79 17.63 6.79 34.63l-92.31 67.3 35.48 64.65 104.87-46q24.57 25.13 55.2 42.7 30.63 17.56 64.76 25.56l13.43 110.87ZM478.87-350q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38ZM480-480Z\" />\n </svg>\n)\n\nconst useStyles = makeVoltStyles({\n icon: {\n width: \"1rem\",\n height: \"1rem\",\n },\n srOnly: {\n position: \"absolute\",\n width: \"1px\",\n height: \"1px\",\n ...shorthands.padding(0),\n ...shorthands.margin(\"-1px\"),\n ...shorthands.overflow(\"hidden\"),\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n },\n})\n\nexport type DataTableColumnVisibilityProps = {\n /** Custom icon for the default trigger button. Falls back to settings gear icon. */\n icon?: ReactNode\n /** Custom trigger element. Defaults to a settings icon button. */\n trigger?: ReactNode\n /** Label shown at top of dropdown and as screen reader text for default trigger. Required for i18n. */\n label: string\n /** Additional class name for the dropdown content */\n contentClassName?: string\n /** Alignment of dropdown relative to trigger. Default: \"end\" */\n align?: \"start\" | \"center\" | \"end\"\n} & Omit<ComponentProps<typeof DropdownMenu>, \"children\">\n\n/**\n * A dropdown menu for toggling column visibility in DataTable.\n * Shows checkboxes for each column that can be hidden.\n * Place in DataTableToolbar for consistent layout.\n */\nexport const DataTableColumnVisibility = React.forwardRef<\n HTMLElement,\n DataTableColumnVisibilityProps\n>(function DataTableColumnVisibility(\n { icon, trigger, label, contentClassName, align = \"end\", ...props },\n ref\n) {\n const { table } = useDataTable()\n const styles = useStyles()\n\n // Get columns that can be hidden (excludes selection column, etc.)\n const columns = table.getAllColumns().filter((column) => column.getCanHide())\n\n // If no hideable columns, don't render anything\n if (columns.length === 0) {\n return null\n }\n\n return (\n <DropdownMenu ref={ref} {...props}>\n <DropdownMenuTrigger asChild>\n {trigger ?? (\n <Button\n variant=\"tertiary\"\n size=\"sm\"\n data-fs-element=\"DataTable-ColumnVisibility-Trigger\"\n >\n {icon ?? <IconSettings className={styles.icon} />}\n <span className={styles.srOnly}>{label}</span>\n </Button>\n )}\n </DropdownMenuTrigger>\n <DropdownMenuContent\n align={align}\n className={contentClassName}\n data-fs-element=\"DataTable-ColumnVisibility-Content\"\n >\n <DropdownMenuLabel>{label}</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {columns.map((column) => {\n // Get column header text for display\n // Priority: meta.visibilityLabel > string header > column.id\n const columnMeta = column.columnDef.meta as\n | { visibilityLabel?: string }\n | undefined\n const headerText =\n columnMeta?.visibilityLabel ??\n (typeof column.columnDef.header === \"string\"\n ? column.columnDef.header\n : column.id)\n\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n checked={column.getIsVisible()}\n onCheckedChange={(value) => column.toggleVisibility(!!value)}\n data-fs-element=\"DataTable-ColumnVisibility-Item\"\n >\n {headerText}\n </DropdownMenuCheckboxItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n )\n})\n"],"names":["IconSettings","props","jsxDEV","this","useStyles","makeVoltStyles","shorthands","DataTableColumnVisibility","React","icon","trigger","label","contentClassName","align","ref","table","useDataTable","styles","columns","column","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","columnMeta","headerText","DropdownMenuCheckboxItem","value"],"mappings":"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"}
1
+ {"version":3,"file":"data-table-column-visibility.js","sources":["../../../src/components/data-table/data-table-column-visibility.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { Button } from \"../button/button\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"../dropdown-menu/dropdown-menu\"\nimport { useDataTable } from \"./hooks/use-data-table\"\n\n// Settings/gear icon (default)\nconst IconSettings = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 -960 960 960\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M413.09-65.87q-16.26 0-28.68-9.85Q372-85.56 370-101.83l-15-94.56q-15.61-5.31-34.07-15.89-18.45-10.59-31.63-21.33l-85.43 40q-15.7 6.57-31.96 1.78-16.26-4.78-24.82-20.04l-65.92-118.7q-9.13-14.13-5.34-30.1 3.78-15.98 17.47-26.11l79.44-59q-1.44-7.31-1.94-17.11-.5-9.81-.5-17.11 0-7.3.5-17.11.5-9.8 1.94-17.11L93.3-572.65q-14.26-10.13-17.76-26.11-3.5-15.98 5.63-30.67l65.92-118.7q8.56-14.13 24.54-19.48 15.98-5.35 31.67 1.22l87.13 40q12.61-10.18 30.79-20.48 18.17-10.3 33.78-15.17l15-95.57q2-16.83 14.41-26.96 12.42-10.13 28.68-10.13h133.82q16.26 0 28.68 10.13Q588-874.44 590-857.61l15 94.57q15.61 5.87 34.28 15.67 18.68 9.8 31.42 20.98l85.43-40q15.7-6.57 31.46-1.22 15.76 5.35 24.32 19.48l67.48 118.7q8.57 14.69 5.07 31.17-3.5 16.48-17.76 25.61l-80 56.43q1.43 8.31 2.21 18.11.79 9.81.79 18.11 0 8.3-.79 17.61-.78 9.3-2.21 17.61l80 57.43q14.26 9.13 17.76 25.61 3.5 16.48-5.07 31.17l-66.48 118.7q-8.56 14.7-24.54 19.76-15.98 5.07-31.67-1.5l-86.57-40q-13.17 10.74-30.85 21.55-17.67 10.8-34.28 15.67l-15 94.56q-2 16.27-14.41 26.11-12.42 9.85-28.68 9.85H413.09Zm27.43-79.22h78.39l14.57-111.43q33.56-8 63.91-25 30.35-17 54.35-42.7l106 46 34.91-64.65-92.87-67.87q4-17.56 6.78-34.63 2.79-17.06 2.79-34.63 0-17.57-2.29-34.63-2.28-17.07-7.28-34.63l93.44-67.87-35.48-64.65-105.44 46q-23-27.13-53.13-45.48-30.13-18.35-65.69-22.78l-14-110.87h-78.96l-13.43 110.87q-35.13 6.43-65.76 24.28-30.63 17.85-54.2 43.98l-104.87-46-35.48 64.65 92.31 67.3q-4 17.57-6.79 34.92-2.78 17.34-2.78 34.91 0 17.57 2.78 35.2 2.79 17.63 6.79 34.63l-92.31 67.3 35.48 64.65 104.87-46q24.57 25.13 55.2 42.7 30.63 17.56 64.76 25.56l13.43 110.87ZM478.87-350q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38ZM480-480Z\" />\n </svg>\n)\n\nconst useStyles = makeVoltStyles({\n icon: {\n width: \"1rem\",\n height: \"1rem\",\n },\n srOnly: {\n position: \"absolute\",\n width: \"1px\",\n height: \"1px\",\n ...shorthands.padding(0),\n ...shorthands.margin(\"-1px\"),\n ...shorthands.overflow(\"hidden\"),\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n },\n})\n\nexport type DataTableColumnVisibilityProps = {\n /** Custom icon for the default trigger button. Falls back to settings gear icon. */\n icon?: ReactNode\n /** Custom trigger element. Defaults to a settings icon button. */\n trigger?: ReactNode\n /** Label shown at top of dropdown and as screen reader text for default trigger. Required for i18n. */\n label: string\n /** Additional class name for the dropdown content */\n contentClassName?: string\n /** Alignment of dropdown relative to trigger. Default: \"end\" */\n align?: \"start\" | \"center\" | \"end\"\n} & Omit<ComponentProps<typeof DropdownMenu>, \"children\">\n\n/**\n * A dropdown menu for toggling column visibility in DataTable.\n * Shows checkboxes for each column that can be hidden.\n * Place in DataTableToolbar for consistent layout.\n */\nexport const DataTableColumnVisibility = React.forwardRef<\n HTMLElement,\n DataTableColumnVisibilityProps\n>(function DataTableColumnVisibility(\n { icon, trigger, label, contentClassName, align = \"end\", ...props },\n ref\n) {\n const { table } = useDataTable()\n const styles = useStyles()\n\n // Get columns that can be hidden (excludes selection column, etc.)\n const columns = table.getAllColumns().filter((column) => column.getCanHide())\n\n // If no hideable columns, don't render anything\n if (columns.length === 0) {\n return null\n }\n\n return (\n <DropdownMenu ref={ref} {...props}>\n <DropdownMenuTrigger asChild>\n {trigger ?? (\n <Button\n variant=\"tertiary\"\n size=\"sm\"\n data-fs-element=\"DataTable-ColumnVisibility-Trigger\"\n >\n {icon ?? <IconSettings className={styles.icon} />}\n <span className={styles.srOnly}>{label}</span>\n </Button>\n )}\n </DropdownMenuTrigger>\n <DropdownMenuContent\n align={align}\n className={contentClassName}\n data-fs-element=\"DataTable-ColumnVisibility-Content\"\n >\n <DropdownMenuLabel>{label}</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {columns.map((column) => {\n // Get column header text for display\n // Priority: meta.visibilityLabel > string header > column.id\n const columnMeta = column.columnDef.meta as\n | { visibilityLabel?: string }\n | undefined\n const headerText =\n columnMeta?.visibilityLabel ??\n (typeof column.columnDef.header === \"string\"\n ? column.columnDef.header\n : column.id)\n\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n checked={column.getIsVisible()}\n onCheckedChange={(value) => column.toggleVisibility(!!value)}\n data-fs-element=\"DataTable-ColumnVisibility-Item\"\n >\n {headerText}\n </DropdownMenuCheckboxItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n )\n})\n"],"names":["IconSettings","props","jsx","useStyles","makeVoltStyles","shorthands","DataTableColumnVisibility","React","icon","trigger","label","contentClassName","align","ref","table","useDataTable","styles","columns","column","jsxs","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","columnMeta","headerText","DropdownMenuCheckboxItem","value"],"mappings":";;;;;;;AAiBA,MAAMA,IAAe,CAACC,MACpB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,iqDAAA,CAAiqD;AAAA,EAAA;AAC3qD,GAGIC,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAGC,EAAW,QAAQ,CAAC;AAAA,IACvB,GAAGA,EAAW,OAAO,MAAM;AAAA,IAC3B,GAAGA,EAAW,SAAS,QAAQ;AAAA,IAC/B,MAAM;AAAA,IACN,YAAY;AAAA,EAAA;AAEhB,CAAC,GAoBYC,IAA4BC,EAAM,WAG7C,SACA,EAAE,MAAAC,GAAM,SAAAC,GAAS,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,IAAQ,OAAO,GAAGX,EAAA,GAC5DY,GACA;AACA,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAA,GACZC,IAASb,EAAA,GAGTc,IAAUH,EAAM,cAAA,EAAgB,OAAO,CAACI,MAAWA,EAAO,YAAY;AAG5E,SAAID,EAAQ,WAAW,IACd,OAIP,gBAAAE,EAACC,GAAA,EAAa,KAAAP,GAAW,GAAGZ,GAC1B,UAAA;AAAA,IAAA,gBAAAC,EAACmB,GAAA,EAAoB,SAAO,IACzB,UAAAZ,KACC,gBAAAU;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,mBAAgB;AAAA,QAEf,UAAA;AAAA,UAAAd,KAAQ,gBAAAN,EAACF,GAAA,EAAa,WAAWgB,EAAO,MAAM;AAAA,UAC/C,gBAAAd,EAAC,QAAA,EAAK,WAAWc,EAAO,QAAS,UAAAN,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAG7C;AAAA,IACA,gBAAAS;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,OAAAX;AAAA,QACA,WAAWD;AAAA,QACX,mBAAgB;AAAA,QAEhB,UAAA;AAAA,UAAA,gBAAAT,EAACsB,KAAmB,UAAAd,EAAA,CAAM;AAAA,4BACzBe,GAAA,EAAsB;AAAA,UACtBR,EAAQ,IAAI,CAACC,MAAW;AAGvB,kBAAMQ,IAAaR,EAAO,UAAU,MAG9BS,KACJD,KAAA,gBAAAA,EAAY,qBACX,OAAOR,EAAO,UAAU,UAAW,WAChCA,EAAO,UAAU,SACjBA,EAAO;AAEb,mBACE,gBAAAhB;AAAA,cAAC0B;AAAA,cAAA;AAAA,gBAEC,SAASV,EAAO,aAAA;AAAA,gBAChB,iBAAiB,CAACW,MAAUX,EAAO,iBAAiB,CAAC,CAACW,CAAK;AAAA,gBAC3D,mBAAgB;AAAA,gBAEf,UAAAF;AAAA,cAAA;AAAA,cALIT,EAAO;AAAA,YAAA;AAAA,UAQlB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}
@@ -1,21 +1,21 @@
1
- import { j as a } from "../../vendor/react/jsx-dev-runtime.js";
2
- import * as H from "react";
3
- import { useRef as C, useState as S, useCallback as v, useEffect as B, useMemo as r } from "react";
4
- import { flushSync as F } from "react-dom";
5
- import { shorthands as M } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
6
- import { SLOT_ATTR as N } from "../../packages/volt-runtime/dist/renderer/contract.js";
7
- import { mergeClasses as O } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
8
- import { makeVoltStyles as _ } from "../../styles/make-styles.js";
9
- import { leadingSm as A, textSm as I } from "../../tokens/index.js";
10
- import { DataTableContentContext as $ } from "./data-table-context.js";
11
- import { DataTableHeader as q } from "./data-table-header.js";
12
- import { DataTableBody as P } from "./data-table-body.js";
13
- import { useDataTable as Q } from "./hooks/use-data-table.js";
14
- const G = 150, J = _({
1
+ import { jsx as r, jsxs as O, Fragment as _ } from "react/jsx-runtime";
2
+ import * as A from "react";
3
+ import { useRef as S, useState as z, useCallback as R, useEffect as I, useMemo as l } from "react";
4
+ import { flushSync as N } from "react-dom";
5
+ import { shorthands as U } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
6
+ import { SLOT_ATTR as y } from "../../packages/volt-runtime/dist/renderer/contract.js";
7
+ import { mergeClasses as $ } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
8
+ import { makeVoltStyles as j } from "../../styles/make-styles.js";
9
+ import { leadingSm as k, textSm as q } from "../../tokens/index.js";
10
+ import { DataTableContentContext as P } from "./data-table-context.js";
11
+ import { DataTableHeader as Q } from "./data-table-header.js";
12
+ import { DataTableBody as G } from "./data-table-body.js";
13
+ import { useDataTable as J } from "./hooks/use-data-table.js";
14
+ const K = 150, X = j({
15
15
  container: {
16
16
  position: "relative",
17
17
  width: "100%",
18
- ...M.overflow("auto")
18
+ ...U.overflow("auto")
19
19
  },
20
20
  resizing: {
21
21
  cursor: "col-resize",
@@ -25,108 +25,76 @@ const G = 150, J = _({
25
25
  tableLayout: "fixed",
26
26
  borderCollapse: "separate",
27
27
  borderSpacing: 0,
28
- fontSize: I,
29
- lineHeight: A
28
+ fontSize: q,
29
+ lineHeight: k
30
30
  }
31
- }), me = H.forwardRef(function({ children: R, className: z }, l) {
32
- var h;
33
- const c = J(), { table: t, disableColumnResizing: D } = Q(), y = !D && ((h = t.getState().columnSizingInfo) == null ? void 0 : h.isResizingColumn), d = C(null), m = C(null), [o, w] = S(!1), [u, T] = S(0), V = v(
34
- (e) => {
35
- d.current = e, typeof l == "function" ? l(e) : l && (l.current = e);
31
+ }), dt = A.forwardRef(function({ children: T, className: x }, a) {
32
+ var p;
33
+ const c = X(), { table: e, disableColumnResizing: W } = J(), D = !W && ((p = e.getState().columnSizingInfo) == null ? void 0 : p.isResizingColumn), f = S(null), u = S(null), [o, v] = z(!1), [m, w] = z(0), L = R(
34
+ (t) => {
35
+ f.current = t, typeof a == "function" ? a(t) : a && (a.current = t);
36
36
  },
37
- [l]
37
+ [a]
38
38
  );
39
- B(() => {
40
- const e = d.current;
41
- if (!e || typeof ResizeObserver > "u") return;
39
+ I(() => {
40
+ const t = f.current;
41
+ if (!t || typeof ResizeObserver > "u") return;
42
42
  const n = new ResizeObserver((i) => {
43
- T(i[0].contentRect.width);
43
+ w(i[0].contentRect.width);
44
44
  });
45
- return n.observe(e), () => n.disconnect();
45
+ return n.observe(t), () => n.disconnect();
46
46
  }, []);
47
- const b = v(() => {
48
- if (m.current && !o) {
49
- const e = m.current.querySelectorAll(
47
+ const b = R(() => {
48
+ if (u.current && !o) {
49
+ const t = u.current.querySelectorAll(
50
50
  "th:not([data-spacer])"
51
- ), n = t.getVisibleLeafColumns();
52
- if (e.length === n.length) {
51
+ ), n = e.getVisibleLeafColumns();
52
+ if (t.length === n.length) {
53
53
  const i = {};
54
- e.forEach((f, L) => {
55
- const x = n[L];
56
- x && (i[x.id] = Math.round(
57
- f.getBoundingClientRect().width
54
+ t.forEach((d, M) => {
55
+ const C = n[M];
56
+ C && (i[C.id] = Math.round(
57
+ d.getBoundingClientRect().width
58
58
  ));
59
- }), F(() => {
60
- w(!0), t.setColumnSizing((f) => ({ ...f, ...i }));
59
+ }), N(() => {
60
+ v(!0), e.setColumnSizing((d) => ({ ...d, ...i }));
61
61
  });
62
62
  }
63
63
  }
64
- }, [t, o]), E = t.getState().columnSizing, W = t.getState().columnVisibility, s = r(() => t.getVisibleLeafColumns().reduce((n, i) => n + (i.getSize() ?? G), 0), [t, E, W]), p = 4, U = r(() => o ? s ? `${s}px` : `calc(100% - ${p}px)` : `calc(100% - ${p}px)`, [o, s]), g = r(() => !o || !u ? 0 : Math.max(0, u - s), [o, u, s]), j = R ?? /* @__PURE__ */ a.jsxDEV(a.Fragment, { children: [
65
- /* @__PURE__ */ a.jsxDEV(q, {}, void 0, !1, {
66
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-content.tsx",
67
- lineNumber: 148,
68
- columnNumber: 7
69
- }, this),
70
- /* @__PURE__ */ a.jsxDEV(P, {}, void 0, !1, {
71
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-content.tsx",
72
- lineNumber: 149,
73
- columnNumber: 7
74
- }, this)
75
- ] }, void 0, !0, {
76
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-content.tsx",
77
- lineNumber: 147,
78
- columnNumber: 5
79
- }, this), k = r(
64
+ }, [e, o]), V = e.getState().columnSizing, H = e.getState().columnVisibility, s = l(() => e.getVisibleLeafColumns().reduce((n, i) => n + (i.getSize() ?? K), 0), [e, V, H]), h = 4, B = l(() => o ? s ? `${s}px` : `calc(100% - ${h}px)` : `calc(100% - ${h}px)`, [o, s]), g = l(() => !o || !m ? 0 : Math.max(0, m - s), [o, m, s]), E = T ?? /* @__PURE__ */ O(_, { children: [
65
+ /* @__PURE__ */ r(Q, {}),
66
+ /* @__PURE__ */ r(G, {})
67
+ ] }), F = l(
80
68
  () => ({ syncColumnWidthsBeforeResize: b, spacerWidth: g }),
81
69
  [b, g]
82
70
  );
83
- return /* @__PURE__ */ a.jsxDEV($.Provider, { value: k, children: /* @__PURE__ */ a.jsxDEV(
71
+ return /* @__PURE__ */ r(P.Provider, { value: F, children: /* @__PURE__ */ r(
84
72
  "div",
85
73
  {
86
- ref: V,
74
+ ref: L,
87
75
  "data-slot": "data-table-content",
88
- [N]: "data-table-content",
76
+ [y]: "data-table-content",
89
77
  "data-fs-element": "DataTable-Content",
90
- className: O(
78
+ className: $(
91
79
  c.container,
92
- y && c.resizing,
93
- z
80
+ D && c.resizing,
81
+ x
94
82
  ),
95
- children: /* @__PURE__ */ a.jsxDEV(
83
+ children: /* @__PURE__ */ r(
96
84
  "table",
97
85
  {
98
- ref: m,
86
+ ref: u,
99
87
  "data-slot": "table",
100
- [N]: "table",
88
+ [y]: "table",
101
89
  className: c.table,
102
- style: { width: U },
103
- children: j
104
- },
105
- void 0,
106
- !1,
107
- {
108
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-content.tsx",
109
- lineNumber: 171,
110
- columnNumber: 9
111
- },
112
- this
90
+ style: { width: B },
91
+ children: E
92
+ }
113
93
  )
114
- },
115
- void 0,
116
- !1,
117
- {
118
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-content.tsx",
119
- lineNumber: 160,
120
- columnNumber: 7
121
- },
122
- this
123
- ) }, void 0, !1, {
124
- fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-content.tsx",
125
- lineNumber: 159,
126
- columnNumber: 5
127
- }, this);
94
+ }
95
+ ) });
128
96
  });
129
97
  export {
130
- me as DataTableContent
98
+ dt as DataTableContent
131
99
  };
132
100
  //# sourceMappingURL=data-table-content.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"data-table-content.js","sources":["../../../src/components/data-table/data-table-content.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useRef, useMemo, useCallback, useState, useEffect } from \"react\"\nimport { flushSync } from \"react-dom\"\nimport type { ReactNode } from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { useDataTable } from \"./hooks\"\nimport { DataTableContentContext } from \"./data-table-context\"\nimport { DataTableHeader } from \"./data-table-header\"\nimport { DataTableBody } from \"./data-table-body\"\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\nconst useStyles = makeVoltStyles({\n container: {\n position: \"relative\",\n width: \"100%\",\n ...shorthands.overflow(\"auto\"),\n },\n resizing: {\n cursor: \"col-resize\",\n userSelect: \"none\",\n },\n table: {\n tableLayout: \"fixed\",\n borderCollapse: \"separate\",\n borderSpacing: 0,\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n },\n})\n\nexport type DataTableContentProps = {\n /** Children to render inside the table (DataTableHeader, DataTableBody) */\n children?: ReactNode\n /** Additional class name */\n className?: string\n}\n\n/**\n * Container component for DataTable that handles the table structure.\n * If no children are provided, renders DataTableHeader and DataTableBody by default.\n */\nexport const DataTableContent = React.forwardRef<\n HTMLDivElement,\n DataTableContentProps\n>(function DataTableContent({ children, className }, ref) {\n const styles = useStyles()\n const { table, disableColumnResizing } = useDataTable()\n const enableColumnResizing = !disableColumnResizing\n\n const isResizing =\n enableColumnResizing && table.getState().columnSizingInfo?.isResizingColumn\n const internalContainerRef = useRef<HTMLDivElement>(null!)\n const tableRef = useRef<HTMLTableElement>(null)\n const [hasSyncedWidths, setHasSyncedWidths] = useState(false)\n const [containerWidth, setContainerWidth] = useState(0)\n\n // Attach ref to internal ref or forwarded ref\n const handleRef = useCallback(\n (node: HTMLDivElement | null) => {\n internalContainerRef.current = node!\n if (typeof ref === \"function\") {\n ref(node)\n } else if (ref) {\n ;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n }\n },\n [ref]\n )\n\n // Track container width for spacer calculation\n useEffect(() => {\n const container = internalContainerRef.current\n if (!container || typeof ResizeObserver === \"undefined\") return\n\n const observer = new ResizeObserver((entries) => {\n setContainerWidth(entries[0].contentRect.width)\n })\n observer.observe(container)\n return () => observer.disconnect()\n }, [])\n\n // Sync visual column widths to stored widths BEFORE resize starts\n const syncColumnWidthsBeforeResize = useCallback(() => {\n if (tableRef.current && !hasSyncedWidths) {\n const headerCells = tableRef.current.querySelectorAll(\n \"th:not([data-spacer])\"\n )\n const columns = table.getVisibleLeafColumns()\n\n if (headerCells.length === columns.length) {\n const newSizing: Record<string, number> = {}\n\n headerCells.forEach((cell, index) => {\n const column = columns[index]\n if (column) {\n newSizing[column.id] = Math.round(\n cell.getBoundingClientRect().width\n )\n }\n })\n\n flushSync(() => {\n setHasSyncedWidths(true)\n table.setColumnSizing((prev) => ({ ...prev, ...newSizing }))\n })\n }\n }\n }, [table, hasSyncedWidths])\n\n // Get column sizing and visibility state to trigger recalculation\n const columnSizing = table.getState().columnSizing\n const columnVisibility = table.getState().columnVisibility\n\n // Calculate total column width from visible columns\n const calculatedColumnSum = useMemo(() => {\n const totalWidth = table.getVisibleLeafColumns().reduce((sum, col) => {\n return sum + (col.getSize() ?? DEFAULT_COLUMN_WIDTH)\n }, 0)\n return totalWidth\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [table, columnSizing, columnVisibility])\n\n const WIDTH_BUFFER = 4\n const tableWidth = useMemo(() => {\n if (!hasSyncedWidths) {\n return `calc(100% - ${WIDTH_BUFFER}px)`\n }\n return calculatedColumnSum\n ? `${calculatedColumnSum}px`\n : `calc(100% - ${WIDTH_BUFFER}px)`\n }, [hasSyncedWidths, calculatedColumnSum])\n\n // Calculate spacer width to fill remaining container space after resize\n const spacerWidth = useMemo(() => {\n if (!hasSyncedWidths || !containerWidth) return 0\n return Math.max(0, containerWidth - calculatedColumnSum)\n }, [hasSyncedWidths, containerWidth, calculatedColumnSum])\n\n // If no children, render default header + body\n const content = children ?? (\n <>\n <DataTableHeader />\n <DataTableBody />\n </>\n )\n\n const contentContextValue = useMemo(\n () => ({ syncColumnWidthsBeforeResize, spacerWidth }),\n [syncColumnWidthsBeforeResize, spacerWidth]\n )\n\n return (\n <DataTableContentContext.Provider value={contentContextValue}>\n <div\n ref={handleRef}\n data-slot=\"data-table-content\"\n {...{ [SLOT_ATTR]: \"data-table-content\" }}\n data-fs-element=\"DataTable-Content\"\n className={mergeClasses(\n styles.container,\n isResizing && styles.resizing,\n className\n )}\n >\n <table\n ref={tableRef}\n data-slot=\"table\"\n {...{ [SLOT_ATTR]: \"table\" }}\n className={styles.table}\n style={{ width: tableWidth }}\n >\n {content}\n </table>\n </div>\n </DataTableContentContext.Provider>\n )\n})\n"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeVoltStyles","shorthands","tokens.textSm","tokens.leadingSm","DataTableContent","React","children","className","ref","styles","table","disableColumnResizing","useDataTable","isResizing","_a","internalContainerRef","useRef","tableRef","hasSyncedWidths","setHasSyncedWidths","useState","containerWidth","setContainerWidth","handleRef","useCallback","node","useEffect","container","observer","entries","syncColumnWidthsBeforeResize","headerCells","columns","newSizing","cell","index","column","flushSync","prev","columnSizing","columnVisibility","calculatedColumnSum","useMemo","sum","col","WIDTH_BUFFER","tableWidth","spacerWidth","content","jsxDEV","Fragment","DataTableHeader","DataTableBody","contentContextValue","DataTableContentContext","SLOT_ATTR","mergeClasses"],"mappings":"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"}
1
+ {"version":3,"file":"data-table-content.js","sources":["../../../src/components/data-table/data-table-content.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useRef, useMemo, useCallback, useState, useEffect } from \"react\"\nimport { flushSync } from \"react-dom\"\nimport type { ReactNode } from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { useDataTable } from \"./hooks\"\nimport { DataTableContentContext } from \"./data-table-context\"\nimport { DataTableHeader } from \"./data-table-header\"\nimport { DataTableBody } from \"./data-table-body\"\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\nconst useStyles = makeVoltStyles({\n container: {\n position: \"relative\",\n width: \"100%\",\n ...shorthands.overflow(\"auto\"),\n },\n resizing: {\n cursor: \"col-resize\",\n userSelect: \"none\",\n },\n table: {\n tableLayout: \"fixed\",\n borderCollapse: \"separate\",\n borderSpacing: 0,\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n },\n})\n\nexport type DataTableContentProps = {\n /** Children to render inside the table (DataTableHeader, DataTableBody) */\n children?: ReactNode\n /** Additional class name */\n className?: string\n}\n\n/**\n * Container component for DataTable that handles the table structure.\n * If no children are provided, renders DataTableHeader and DataTableBody by default.\n */\nexport const DataTableContent = React.forwardRef<\n HTMLDivElement,\n DataTableContentProps\n>(function DataTableContent({ children, className }, ref) {\n const styles = useStyles()\n const { table, disableColumnResizing } = useDataTable()\n const enableColumnResizing = !disableColumnResizing\n\n const isResizing =\n enableColumnResizing && table.getState().columnSizingInfo?.isResizingColumn\n const internalContainerRef = useRef<HTMLDivElement>(null!)\n const tableRef = useRef<HTMLTableElement>(null)\n const [hasSyncedWidths, setHasSyncedWidths] = useState(false)\n const [containerWidth, setContainerWidth] = useState(0)\n\n // Attach ref to internal ref or forwarded ref\n const handleRef = useCallback(\n (node: HTMLDivElement | null) => {\n internalContainerRef.current = node!\n if (typeof ref === \"function\") {\n ref(node)\n } else if (ref) {\n ;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n }\n },\n [ref]\n )\n\n // Track container width for spacer calculation\n useEffect(() => {\n const container = internalContainerRef.current\n if (!container || typeof ResizeObserver === \"undefined\") return\n\n const observer = new ResizeObserver((entries) => {\n setContainerWidth(entries[0].contentRect.width)\n })\n observer.observe(container)\n return () => observer.disconnect()\n }, [])\n\n // Sync visual column widths to stored widths BEFORE resize starts\n const syncColumnWidthsBeforeResize = useCallback(() => {\n if (tableRef.current && !hasSyncedWidths) {\n const headerCells = tableRef.current.querySelectorAll(\n \"th:not([data-spacer])\"\n )\n const columns = table.getVisibleLeafColumns()\n\n if (headerCells.length === columns.length) {\n const newSizing: Record<string, number> = {}\n\n headerCells.forEach((cell, index) => {\n const column = columns[index]\n if (column) {\n newSizing[column.id] = Math.round(\n cell.getBoundingClientRect().width\n )\n }\n })\n\n flushSync(() => {\n setHasSyncedWidths(true)\n table.setColumnSizing((prev) => ({ ...prev, ...newSizing }))\n })\n }\n }\n }, [table, hasSyncedWidths])\n\n // Get column sizing and visibility state to trigger recalculation\n const columnSizing = table.getState().columnSizing\n const columnVisibility = table.getState().columnVisibility\n\n // Calculate total column width from visible columns\n const calculatedColumnSum = useMemo(() => {\n const totalWidth = table.getVisibleLeafColumns().reduce((sum, col) => {\n return sum + (col.getSize() ?? DEFAULT_COLUMN_WIDTH)\n }, 0)\n return totalWidth\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [table, columnSizing, columnVisibility])\n\n const WIDTH_BUFFER = 4\n const tableWidth = useMemo(() => {\n if (!hasSyncedWidths) {\n return `calc(100% - ${WIDTH_BUFFER}px)`\n }\n return calculatedColumnSum\n ? `${calculatedColumnSum}px`\n : `calc(100% - ${WIDTH_BUFFER}px)`\n }, [hasSyncedWidths, calculatedColumnSum])\n\n // Calculate spacer width to fill remaining container space after resize\n const spacerWidth = useMemo(() => {\n if (!hasSyncedWidths || !containerWidth) return 0\n return Math.max(0, containerWidth - calculatedColumnSum)\n }, [hasSyncedWidths, containerWidth, calculatedColumnSum])\n\n // If no children, render default header + body\n const content = children ?? (\n <>\n <DataTableHeader />\n <DataTableBody />\n </>\n )\n\n const contentContextValue = useMemo(\n () => ({ syncColumnWidthsBeforeResize, spacerWidth }),\n [syncColumnWidthsBeforeResize, spacerWidth]\n )\n\n return (\n <DataTableContentContext.Provider value={contentContextValue}>\n <div\n ref={handleRef}\n data-slot=\"data-table-content\"\n {...{ [SLOT_ATTR]: \"data-table-content\" }}\n data-fs-element=\"DataTable-Content\"\n className={mergeClasses(\n styles.container,\n isResizing && styles.resizing,\n className\n )}\n >\n <table\n ref={tableRef}\n data-slot=\"table\"\n {...{ [SLOT_ATTR]: \"table\" }}\n className={styles.table}\n style={{ width: tableWidth }}\n >\n {content}\n </table>\n </div>\n </DataTableContentContext.Provider>\n )\n})\n"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeVoltStyles","shorthands","tokens.textSm","tokens.leadingSm","DataTableContent","React","children","className","ref","styles","table","disableColumnResizing","useDataTable","isResizing","_a","internalContainerRef","useRef","tableRef","hasSyncedWidths","setHasSyncedWidths","useState","containerWidth","setContainerWidth","handleRef","useCallback","node","useEffect","container","observer","entries","syncColumnWidthsBeforeResize","headerCells","columns","newSizing","cell","index","column","flushSync","prev","columnSizing","columnVisibility","calculatedColumnSum","useMemo","sum","col","WIDTH_BUFFER","tableWidth","spacerWidth","content","jsxs","Fragment","jsx","DataTableHeader","DataTableBody","contentContextValue","DataTableContentContext","SLOT_ATTR","mergeClasses"],"mappings":"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"}