@plumile/ui 0.1.162 → 0.1.164

package/lib/esm/admin/organisms/admin_sidebar/adminSidebar.css.js

@@ -4,6 +4,8 @@
 /* empty css                                        */
 /* empty css                                            */
 /* empty css                                  */
+/* empty css                                          */
+/* empty css                                         */
 /* empty css                            */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/admin/organisms/admin_sidebar/adminSidebar.css.ts

package/lib/esm/admin/theme/adminDensity.css.js

@@ -5,7 +5,6 @@
 /* empty css                                         */
 /* empty css                               */
 /* empty css                            */
-/* empty css                                      */
 //#region src/admin/theme/adminDensity.css.ts
 var e = "var(--_1eea990)", t = "var(--_1eea991)", n = "var(--_1eea992)", r = "var(--_1eea993)", i = "var(--_1eea994)", a = "var(--_1eea995)", o = "var(--_1eea996)", s = "_1eea997", c = "_1eea998", l = "_1eea999";
 //#endregion

package/lib/esm/atomic/atoms/label/label.css.js

@@ -1,5 +1,4 @@
 /* empty css                                      */
-/* empty css                                          */
 /* empty css                     */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/atomic/atoms/label/label.css.ts

package/lib/esm/atomic/molecules/markdown/components/MarkdownArticleContainer.css.js

@@ -1,4 +1,5 @@
 /* empty css                                         */
+/* empty css                             */
 /* empty css                                        */
 //#region src/atomic/molecules/markdown/components/MarkdownArticleContainer.css.ts
 var e = "_7ez1431 _7ez1430 txvbqbfpn txvbqbh4x txvbqbheb";

package/lib/esm/atomic/molecules/markdown/components/MarkdownHeading.css.js

@@ -1,5 +1,4 @@
 /* empty css                                         */
-/* empty css                             */
 /* empty css                               */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/atomic/molecules/markdown/components/MarkdownHeading.css.ts

package/lib/esm/backoffice/templates/list_page_template/listPageTemplate.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"listPageTemplate.css.js","names":[],"sources":["../../../../../src/backoffice/templates/list_page_template/listPageTemplate.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { adminSurfaceRecipe } from '../../../admin/theme/adminSurface.css.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const container = sprinkles({\n  display: 'grid',\n});\n\nexport const containerContained = sprinkles({\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const containerPresentation = {\n  framed: sprinkles({\n    gap: 3,\n  }),\n  flat: sprinkles({\n    gap: 2,\n  }),\n};\n\nexport const containerRows = recipe({\n  variants: {\n    scrollMode: {\n      page: {},\n      contained: {},\n    },\n    toolbar: {\n      true: {},\n      false: {},\n    },\n    status: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variants: { scrollMode: 'page', toolbar: true, status: true },\n      style: { gridTemplateRows: 'auto auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: true, status: false },\n      style: { gridTemplateRows: 'auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: false, status: true },\n      style: { gridTemplateRows: 'auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: false, status: false },\n      style: { gridTemplateRows: 'auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: true, status: true },\n      style: { gridTemplateRows: 'auto auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: true, status: false },\n      style: { gridTemplateRows: 'auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: false, status: true },\n      style: { gridTemplateRows: 'auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: false, status: false },\n      style: { gridTemplateRows: 'auto minmax(0, 1fr)' },\n    },\n  ],\n});\n\nexport const headerCard = sprinkles({\n  minWidth: 0,\n});\n\nexport const headerPresentation = {\n  framed: style([\n    adminSurfaceRecipe({\n      level: 'panel',\n      radius: 'lg',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'lg',\n    }),\n    {\n      backgroundImage: vars.backgroundImage.listHeaderSurface,\n    },\n  ]),\n  flat: sprinkles({\n    paddingX: 1,\n    paddingY: 1,\n  }),\n};\n\nexport const toolbarCard = sprinkles({\n  minWidth: 0,\n});\n\nexport const toolbarPresentation = {\n  framed: adminSurfaceRecipe({\n    level: 'toolbar',\n    radius: 'md',\n    border: 'subtle',\n    elevation: 'none',\n    padding: 'sm',\n  }),\n  flat: style([\n    adminSurfaceRecipe({\n      level: 'toolbar',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderLight}`,\n    },\n  ]),\n};\n\nexport const tableCard = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  minHeight: 0,\n  minWidth: 0,\n});\n\nexport const tableCardContained = sprinkles({\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const tablePresentation = {\n  framed: style([\n    adminSurfaceRecipe({\n      level: 'table',\n      radius: 'lg',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderSubtle}`,\n    },\n  ]),\n  flat: style([\n    adminSurfaceRecipe({\n      level: 'table',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderLight}`,\n    },\n  ]),\n};\n\nexport const tableScroll = style({\n  overflowX: 'auto',\n  overflowY: 'visible',\n  scrollbarWidth: 'thin',\n  scrollbarColor: `${vars.colors.border} transparent`,\n});\n\nexport const tableScrollContained = sprinkles({\n  flex: 1,\n  minHeight: 0,\n});\n\nexport const tableFooter = sprinkles({\n  marginTop: 0,\n});\n"],"mappings":""}
+{"version":3,"file":"listPageTemplate.css.js","names":[],"sources":["../../../../../src/backoffice/templates/list_page_template/listPageTemplate.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { adminSurfaceRecipe } from '../../../admin/theme/adminSurface.css.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const container = sprinkles({\n  display: 'grid',\n});\n\nexport const containerContained = sprinkles({\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const containerPresentation = {\n  framed: sprinkles({\n    gap: 3,\n  }),\n  flat: sprinkles({\n    gap: 2,\n  }),\n};\n\nexport const containerRows = recipe({\n  variants: {\n    scrollMode: {\n      page: {},\n      contained: {},\n    },\n    toolbar: {\n      true: {},\n      false: {},\n    },\n    status: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variants: { scrollMode: 'page', toolbar: true, status: true },\n      style: { gridTemplateRows: 'auto auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: true, status: false },\n      style: { gridTemplateRows: 'auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: false, status: true },\n      style: { gridTemplateRows: 'auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: false, status: false },\n      style: { gridTemplateRows: 'auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: true, status: true },\n      style: { gridTemplateRows: 'auto auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: true, status: false },\n      style: { gridTemplateRows: 'auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: false, status: true },\n      style: { gridTemplateRows: 'auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: false, status: false },\n      style: { gridTemplateRows: 'auto minmax(0, 1fr)' },\n    },\n  ],\n});\n\nexport const headerCard = sprinkles({\n  minWidth: 0,\n});\n\nexport const headerPresentation = {\n  framed: style([\n    adminSurfaceRecipe({\n      level: 'panel',\n      radius: 'lg',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'lg',\n    }),\n    {\n      backgroundImage: vars.backgroundImage.listHeaderSurface,\n    },\n  ]),\n  flat: sprinkles({\n    paddingX: 1,\n    paddingY: 1,\n  }),\n};\n\nexport const toolbarCard = sprinkles({\n  minWidth: 0,\n});\n\nexport const toolbarPresentation = {\n  framed: adminSurfaceRecipe({\n    level: 'toolbar',\n    radius: 'md',\n    border: 'subtle',\n    elevation: 'none',\n    padding: 'sm',\n  }),\n  flat: style([\n    adminSurfaceRecipe({\n      level: 'toolbar',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderLight}`,\n    },\n  ]),\n};\n\nexport const tableCard = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  minHeight: 0,\n  minWidth: 0,\n});\n\nexport const tableCardContained = sprinkles({\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const tablePresentation = {\n  framed: style([\n    adminSurfaceRecipe({\n      level: 'table',\n      radius: 'lg',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderSubtle}`,\n    },\n  ]),\n  flat: style([\n    adminSurfaceRecipe({\n      level: 'table',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderLight}`,\n    },\n  ]),\n};\n\nexport const tableScroll = style({\n  overflowX: 'hidden',\n  overflowY: 'visible',\n  scrollbarWidth: 'thin',\n  scrollbarColor: `${vars.colors.border} transparent`,\n});\n\nexport const tableScrollContained = sprinkles({\n  flex: 1,\n  minHeight: 0,\n});\n\nexport const tableFooter = sprinkles({\n  marginTop: 0,\n});\n"],"mappings":""}

package/lib/esm/components/data-table/DataTable.css.js

@@ -10,98 +10,98 @@ var t = e({
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), n = "ysn8467 txvbqbjzu txvbqbu86 txvbqbwr6", r = e({
-	defaultClassName: "ysn846b",
+}), n = "ysn8468 ysn8467 txvbqbjzu txvbqbu86", r = e({
+	defaultClassName: "ysn846c",
 	variantClassNames: { kind: {
-		default: "ysn846c ysn8469 ysn8468 txvbqb1tv txvbqb2sj txvbqbal4 txvbqb6hs txvbqb1b83 txvbqb1b1e",
-		brandTable: "ysn846d ysn846a txvbqb1b4r txvbqb1tv txvbqb2sj txvbqbal4 txvbqb6pq"
+		default: "ysn846d ysn846a ysn8469 txvbqb1tv txvbqb2sj txvbqbal4 txvbqb6hs txvbqb1b83 txvbqb1b1e",
+		brandTable: "ysn846e ysn846b txvbqb1b4r txvbqb1tv txvbqb2sj txvbqbal4 txvbqb6pq"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), i = "ysn846f ysn846e txvbqbfq0 txvbqb19uf txvbqbe8", a = "var(--ysn846g)", o = "var(--ysn846h)", s = "var(--ysn846i)", c = "var(--ysn846j)", l = e({
-	defaultClassName: "ysn846k",
+}), i = "ysn846g ysn846f txvbqbfq0 txvbqb19uf txvbqbe8", a = "var(--ysn846h)", o = "var(--ysn846i)", s = "var(--ysn846j)", c = "var(--ysn846k)", l = e({
+	defaultClassName: "ysn846l",
 	variantClassNames: { density: {
-		compact: "ysn846l",
-		default: "ysn846m",
-		comfortable: "ysn846n"
+		compact: "ysn846m",
+		default: "ysn846n",
+		comfortable: "ysn846o"
 	} },
 	defaultVariants: { density: "default" },
 	compoundVariants: []
 }), u = e({
-	defaultClassName: "ysn846s ysn846o txvbqbey txvbqbfpn txvbqbh6d txvbqbhdl txvbqbwr6 txvbqb18ef txvbqb1avz",
+	defaultClassName: "ysn846t ysn846p txvbqbey txvbqbfpn txvbqbh6d txvbqbhdl txvbqbwr6 txvbqb18ef txvbqb1avz",
 	variantClassNames: { kind: {
-		default: "ysn846t ysn846q ysn846p txvbqb1bg3 txvbqbhbf txvbqbmwk txvbqb6a",
-		brandTable: "ysn846u ysn846r txvbqb10lu txvbqb11jf txvbqb12ig txvbqbxuj txvbqb1bg5 txvbqbhbs txvbqb96 txvbqbmvu txvbqb6a txvbqb98d"
+		default: "ysn846u ysn846r ysn846q txvbqb1bg3 txvbqbhbf txvbqbmwk txvbqb6a",
+		brandTable: "ysn846v ysn846s txvbqb10lu txvbqb11jf txvbqb12ig txvbqbxuj txvbqb1bg5 txvbqbhbs txvbqb96 txvbqbmvu txvbqb6a txvbqb98d"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
 }), d = e({
-	defaultClassName: "ysn846x ysn846v txvbqbfpn txvbqbh4x",
+	defaultClassName: "ysn846y ysn846w txvbqbfpn txvbqbh4x",
 	variantClassNames: { kind: {
-		default: "ysn846y",
-		brandTable: "ysn846z ysn846w txvbqb1b4r"
+		default: "ysn846z",
+		brandTable: "ysn84610 ysn846x txvbqb1b4r"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), f = "ysn84611 ysn84610 txvbqbfvs txvbqbu86", p = e({
-	defaultClassName: "ysn84618 ysn84613 ysn84612 txvbqbe8 txvbqb2sj txvbqb1tv txvbqbfq0 txvbqb7h txvbqb76 txvbqb7t",
+}), f = "ysn84612 ysn84611 txvbqbfvs txvbqbu86", p = e({
+	defaultClassName: "ysn84619 ysn84614 ysn84613 txvbqbe8 txvbqb2sj txvbqb1tv txvbqbfq0 txvbqb7h txvbqb76 txvbqb7t",
 	variantClassNames: { kind: {
-		default: "ysn84619 ysn84615 ysn84614 txvbqb1b7z txvbqb6ii txvbqbal4",
-		brandTable: "ysn8461a ysn84617 ysn84616 txvbqb1b4r txvbqb6pq txvbqbal4"
+		default: "ysn8461a ysn84616 ysn84615 txvbqb1b7z txvbqb6ii txvbqbal4",
+		brandTable: "ysn8461b ysn84618 ysn84617 txvbqb1b4r txvbqb6pq txvbqbal4"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
 }), m = e({
-	defaultClassName: "ysn8461d",
+	defaultClassName: "ysn8461e",
 	variantClassNames: { kind: {
-		default: "ysn8461e ysn8461b txvbqb1b81",
-		brandTable: "ysn8461f ysn8461c txvbqb1b4r"
+		default: "ysn8461f ysn8461c txvbqb1b81",
+		brandTable: "ysn8461g ysn8461d txvbqb1b4r"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
 }), h = e({
-	defaultClassName: "ysn8461i",
+	defaultClassName: "ysn8461j",
 	variantClassNames: { kind: {
-		default: "ysn8461j ysn8461g txvbqb1b7z",
-		brandTable: "ysn8461k ysn8461h txvbqb1b4r"
+		default: "ysn8461k ysn8461h txvbqb1b7z",
+		brandTable: "ysn8461l ysn8461i txvbqb1b4r"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
 }), g = e({
-	defaultClassName: "ysn8461p ysn8461l txvbqbey txvbqbfpn txvbqbhdl txvbqbv7x txvbqbwr6",
+	defaultClassName: "ysn8461q ysn8461m txvbqbey txvbqbfpn txvbqbhdl txvbqbv7x txvbqbwr6",
 	variantClassNames: { kind: {
-		default: "ysn8461q ysn8461n ysn8461m txvbqb1bg3",
-		brandTable: "ysn8461r ysn8461o txvbqb10lu txvbqb11jf txvbqb12ig txvbqbxuj txvbqb1bg1 txvbqbhbf txvbqb9j txvbqb98d"
+		default: "ysn8461r ysn8461o ysn8461n txvbqb1bg3",
+		brandTable: "ysn8461s ysn8461p txvbqb10lu txvbqb11jf txvbqb12ig txvbqbxuj txvbqb1bg1 txvbqbhbf txvbqb9j txvbqb98d"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), _ = "ysn8461s txvbqbhbf txvbqb1bg1", v = "ysn8461t txvbqb1bg1", y = "ysn8461u txvbqb1avz txvbqbwr6 txvbqb18ef txvbqbv7x", b = "ysn8461v", x = e({
-	defaultClassName: "ysn8461z",
+}), _ = "ysn8461t txvbqbhbf txvbqb1bg1", v = "ysn8461u txvbqb1bg1", y = "ysn8461v txvbqb1avz txvbqbwr6 txvbqb18ef txvbqbv7x", b = "ysn8461w", x = e({
+	defaultClassName: "ysn84620",
 	variantClassNames: { align: {
-		left: "ysn84620 ysn8461w txvbqblsu txvbqb18dc",
-		center: "ysn84621 ysn8461x txvbqbls4 txvbqb18dp",
-		right: "ysn84622 ysn8461y txvbqblsh txvbqb18e2"
+		left: "ysn84621 ysn8461x txvbqblsu txvbqb18dc",
+		center: "ysn84622 ysn8461y txvbqbls4 txvbqb18dp",
+		right: "ysn84623 ysn8461z txvbqblsh txvbqb18e2"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
 }), S = e({
-	defaultClassName: "ysn84623",
+	defaultClassName: "ysn84624",
 	variantClassNames: { state: {
-		default: "ysn84624",
-		selected: "ysn84625",
-		muted: "ysn84626",
-		danger: "ysn84627"
+		default: "ysn84625",
+		selected: "ysn84626",
+		muted: "ysn84627",
+		danger: "ysn84628"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
-}), C = "ysn84628", w = "ysn84629 txvbqb9w txvbqb1bg3 txvbqb18dp", T = e({
-	defaultClassName: "ysn8462a",
+}), C = "ysn84629", w = "ysn8462a txvbqb9w txvbqb1bg3 txvbqb18dp", T = e({
+	defaultClassName: "ysn8462b",
 	variantClassNames: { minVisibleAt: {
-		sm: "ysn8462b",
-		md: "ysn8462c",
-		lg: "ysn8462d",
-		xl: "ysn8462e",
-		xxl: "ysn8462f"
+		sm: "ysn8462c",
+		md: "ysn8462d",
+		lg: "ysn8462e",
+		xl: "ysn8462f",
+		xxl: "ysn8462g"
 	} },
 	defaultVariants: {},
 	compoundVariants: []

package/lib/esm/components/data-table/DataTable.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.css.js","names":[],"sources":["../../../../src/components/data-table/DataTable.css.ts"],"sourcesContent":["import {\n  style,\n  createVar,\n  fallbackVar,\n  type StyleRule,\n} from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { vars } from '../../theme/themeContract.css.js';\n\nimport {\n  DATA_TABLE_BREAKPOINT_ENTRIES,\n  type DataTableBreakpoint,\n} from './tableBreakpoints.js';\nimport { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const container = recipe({\n  base: style([\n    sprinkles({\n      display: 'flex',\n      flexDirection: 'column',\n      width: 'full',\n      containerType: 'inline-size',\n    }),\n    {\n      scrollbarGutter: 'stable',\n    },\n  ]),\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surface',\n        borderColor: 'border',\n        borderRadius: 'lg',\n        borderStyle: 'solid',\n        borderWidth: 'default',\n        overflowX: 'auto',\n        overflowY: 'hidden',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderRadius: 'none',\n        borderStyle: 'none',\n        borderWidth: 0,\n        overflow: 'visible',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const containerWithContainedBody = sprinkles({\n  height: 'full',\n  minHeight: 0,\n  overflow: 'hidden',\n});\n\nexport const header = recipe({\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          borderWidth: 0,\n          borderStyle: 'solid',\n          borderBottomWidth: 'default',\n          borderBottomColor: 'borderSubtle',\n          backgroundColor: 'surfaceMuted',\n          backgroundImage: 'tableHeaderAccent',\n        }),\n      ]),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'brandSubtleBorder',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const headerRow = style([\n  sprinkles({\n    display: 'grid',\n    width: 'full',\n    alignItems: 'stretch',\n  }),\n  {\n    '@media': {\n      'screen and (max-width: 767px)': {\n        minWidth: '38rem',\n      },\n    },\n  },\n]);\n\nexport const tableCellPaddingVar = createVar();\nexport const tableCellFontSizeVar = createVar();\nexport const tableEmptyRowPaddingVar = createVar();\nexport const tableRowMinHeightVar = createVar();\n\nexport const densityRecipe = recipe({\n  variants: {\n    density: {\n      compact: {\n        vars: {\n          [tableCellPaddingVar]: `${vars.spacing[2]} ${vars.spacing[3]}`,\n          [tableCellFontSizeVar]: vars.fontSize.sm,\n          [tableEmptyRowPaddingVar]: `${vars.spacing[4]} ${vars.spacing[3]}`,\n          [tableRowMinHeightVar]: vars.spacing[9],\n        },\n      },\n      default: {\n        vars: {\n          [tableCellPaddingVar]: `${vars.spacing[3]} ${vars.spacing[4]}`,\n          [tableCellFontSizeVar]: vars.fontSize.sm,\n          [tableEmptyRowPaddingVar]: `${vars.spacing[6]} ${vars.spacing[4]}`,\n          [tableRowMinHeightVar]: vars.spacing[10],\n        },\n      },\n      comfortable: {\n        vars: {\n          [tableCellPaddingVar]: `${vars.spacing[3]} ${vars.spacing[5]}`,\n          [tableCellFontSizeVar]: vars.fontSize.base,\n          [tableEmptyRowPaddingVar]: `${vars.spacing[7]} ${vars.spacing[5]}`,\n          [tableRowMinHeightVar]: vars.spacing[12],\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    density: 'default',\n  },\n});\n\nexport const headerCell = recipe({\n  base: sprinkles({\n    alignItems: 'center',\n    display: 'flex',\n    flexShrink: 0,\n    gap: 2,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          color: 'textSecondary',\n          fontWeight: 'semibold',\n          letterSpacing: 'capsNarrow',\n          textTransform: 'uppercase',\n        }),\n        {\n          padding: fallbackVar(\n            tableCellPaddingVar,\n            `${vars.spacing[3]} ${vars.spacing[4]}`,\n          ),\n          fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n          minHeight: fallbackVar(tableRowMinHeightVar, vars.spacing[10]),\n          selectors: {\n            '&:last-child': {\n              borderRight: 'none',\n            },\n          },\n        },\n      ]),\n      brandTable: sprinkles({\n        color: 'textMuted',\n        fontWeight: 'bold',\n        fontSize: 'xs',\n        letterSpacing: 'caps',\n        textTransform: 'uppercase',\n        paddingY: 4,\n        paddingX: 0,\n        borderRightWidth: 0,\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const body = recipe({\n  base: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  variants: {\n    kind: {\n      default: {},\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const bodyContained = style([\n  sprinkles({\n    flex: 1,\n    minHeight: 0,\n  }),\n  {\n    overflowY: 'auto',\n    scrollbarWidth: 'thin',\n    scrollbarColor: `${vars.colors.border} transparent`,\n  },\n]);\n\nexport const row = recipe({\n  base: style([\n    sprinkles({\n      alignItems: 'stretch',\n      borderStyle: 'solid',\n      borderWidth: 0,\n      display: 'grid',\n      transitionProperty: 'colors',\n      transitionDuration: 150,\n      transitionTimingFunction: 'ease',\n    }),\n    {\n      '@media': {\n        'screen and (max-width: 767px)': {\n          minWidth: '38rem',\n        },\n      },\n    },\n  ]),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          backgroundColor: 'surface',\n          borderBottomColor: 'borderLight',\n          borderBottomWidth: 'default',\n        }),\n        {\n          selectors: {\n            '&:last-child': {\n              borderBottomWidth: 0,\n            },\n            '&:hover': {\n              backgroundColor: vars.colors.tableRowHoverSurface,\n            },\n          },\n        },\n      ]),\n      brandTable: style([\n        sprinkles({\n          backgroundColor: 'transparent',\n          borderBottomColor: 'brandSubtleBorder',\n          borderBottomWidth: 'default',\n        }),\n        {\n          selectors: {\n            '&:last-child': {\n              borderBottomWidth: 0,\n            },\n            '&:hover': {\n              backgroundColor: 'transparent',\n            },\n          },\n        },\n      ]),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const rowEven = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surfaceSecondary',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const rowOdd = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surface',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const cell = recipe({\n  base: sprinkles({\n    alignItems: 'center',\n    display: 'flex',\n    gap: 2,\n    minWidth: 0,\n    overflow: 'hidden',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          color: 'textSecondary',\n        }),\n        {\n          padding: fallbackVar(\n            tableCellPaddingVar,\n            `${vars.spacing[3]} ${vars.spacing[4]}`,\n          ),\n          fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n          minHeight: fallbackVar(tableRowMinHeightVar, vars.spacing[10]),\n          selectors: {\n            '&:last-child': {\n              borderRight: 'none',\n            },\n          },\n        },\n      ]),\n      brandTable: sprinkles({\n        color: 'text',\n        fontWeight: 'semibold',\n        fontSize: 'sm',\n        paddingY: 4,\n        paddingX: 0,\n        borderRightWidth: 0,\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const primaryCell = sprinkles({\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const primaryHeaderCell = sprinkles({\n  color: 'text',\n});\n\nexport const singleLineCell = sprinkles({\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  minWidth: 0,\n});\n\nexport const stickyHeader = style({\n  position: 'sticky',\n  top: 0,\n  zIndex: vars.zIndex[10],\n});\n\nexport const alignRecipe = recipe({\n  variants: {\n    align: {\n      left: sprinkles({\n        justifyContent: 'flex-start',\n        textAlign: 'left',\n      }),\n      center: sprinkles({\n        justifyContent: 'center',\n        textAlign: 'center',\n      }),\n      right: sprinkles({\n        justifyContent: 'flex-end',\n        textAlign: 'end',\n      }),\n    },\n  },\n});\n\nexport const rowStateRecipe = recipe({\n  variants: {\n    state: {\n      default: {},\n      selected: {\n        backgroundColor: vars.colors.tableRowSelectedSurface,\n      },\n      muted: {\n        opacity: 0.72,\n      },\n      danger: {\n        backgroundColor: vars.colors.tableRowDangerSurface,\n      },\n    },\n  },\n});\n\nexport const emptyRow = style({\n  padding: fallbackVar(\n    tableEmptyRowPaddingVar,\n    `${vars.spacing[6]} ${vars.spacing[4]}`,\n  ),\n});\n\nexport const emptyCell = sprinkles({\n  fontSize: 'base',\n  color: 'textSecondary',\n  textAlign: 'center',\n});\n\nconst hideBelowMap: Record<DataTableBreakpoint, StyleRule> = {} as Record<\n  DataTableBreakpoint,\n  StyleRule\n>;\n\nDATA_TABLE_BREAKPOINT_ENTRIES.forEach(([breakpoint, width]) => {\n  hideBelowMap[breakpoint] = {\n    '@container': {\n      [`(max-width: ${width - 0.5}px)`]: {\n        visibility: 'hidden',\n        opacity: 0,\n        pointerEvents: 'none',\n        paddingInline: 0,\n        paddingBlock: 0,\n        borderRight: 'none',\n        overflow: 'hidden',\n      },\n    },\n  };\n});\n\nexport const hideBelowRecipe = recipe({\n  variants: {\n    minVisibleAt: hideBelowMap,\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"DataTable.css.js","names":[],"sources":["../../../../src/components/data-table/DataTable.css.ts"],"sourcesContent":["import {\n  style,\n  createVar,\n  fallbackVar,\n  type StyleRule,\n} from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { vars } from '../../theme/themeContract.css.js';\n\nimport {\n  DATA_TABLE_BREAKPOINT_ENTRIES,\n  type DataTableBreakpoint,\n} from './tableBreakpoints.js';\nimport { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const container = recipe({\n  base: style([\n    sprinkles({\n      display: 'flex',\n      flexDirection: 'column',\n      width: 'full',\n      containerType: 'inline-size',\n    }),\n    {\n      scrollbarGutter: 'stable',\n    },\n  ]),\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surface',\n        borderColor: 'border',\n        borderRadius: 'lg',\n        borderStyle: 'solid',\n        borderWidth: 'default',\n        overflowX: 'auto',\n        overflowY: 'hidden',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderRadius: 'none',\n        borderStyle: 'none',\n        borderWidth: 0,\n        overflow: 'visible',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const containerWithContainedBody = style([\n  sprinkles({\n    height: 'full',\n    minHeight: 0,\n  }),\n  {\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n  },\n]);\n\nexport const header = recipe({\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          borderWidth: 0,\n          borderStyle: 'solid',\n          borderBottomWidth: 'default',\n          borderBottomColor: 'borderSubtle',\n          backgroundColor: 'surfaceMuted',\n          backgroundImage: 'tableHeaderAccent',\n        }),\n      ]),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'brandSubtleBorder',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const headerRow = style([\n  sprinkles({\n    display: 'grid',\n    width: 'full',\n    alignItems: 'stretch',\n  }),\n]);\n\nexport const tableCellPaddingVar = createVar();\nexport const tableCellFontSizeVar = createVar();\nexport const tableEmptyRowPaddingVar = createVar();\nexport const tableRowMinHeightVar = createVar();\n\nexport const densityRecipe = recipe({\n  variants: {\n    density: {\n      compact: {\n        vars: {\n          [tableCellPaddingVar]: `${vars.spacing[2]} ${vars.spacing[3]}`,\n          [tableCellFontSizeVar]: vars.fontSize.sm,\n          [tableEmptyRowPaddingVar]: `${vars.spacing[4]} ${vars.spacing[3]}`,\n          [tableRowMinHeightVar]: vars.spacing[9],\n        },\n      },\n      default: {\n        vars: {\n          [tableCellPaddingVar]: `${vars.spacing[3]} ${vars.spacing[4]}`,\n          [tableCellFontSizeVar]: vars.fontSize.sm,\n          [tableEmptyRowPaddingVar]: `${vars.spacing[6]} ${vars.spacing[4]}`,\n          [tableRowMinHeightVar]: vars.spacing[10],\n        },\n      },\n      comfortable: {\n        vars: {\n          [tableCellPaddingVar]: `${vars.spacing[3]} ${vars.spacing[5]}`,\n          [tableCellFontSizeVar]: vars.fontSize.base,\n          [tableEmptyRowPaddingVar]: `${vars.spacing[7]} ${vars.spacing[5]}`,\n          [tableRowMinHeightVar]: vars.spacing[12],\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    density: 'default',\n  },\n});\n\nexport const headerCell = recipe({\n  base: sprinkles({\n    alignItems: 'center',\n    display: 'flex',\n    flexShrink: 0,\n    gap: 2,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          color: 'textSecondary',\n          fontWeight: 'semibold',\n          letterSpacing: 'capsNarrow',\n          textTransform: 'uppercase',\n        }),\n        {\n          padding: fallbackVar(\n            tableCellPaddingVar,\n            `${vars.spacing[3]} ${vars.spacing[4]}`,\n          ),\n          fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n          minHeight: fallbackVar(tableRowMinHeightVar, vars.spacing[10]),\n          selectors: {\n            '&:last-child': {\n              borderRight: 'none',\n            },\n          },\n        },\n      ]),\n      brandTable: sprinkles({\n        color: 'textMuted',\n        fontWeight: 'bold',\n        fontSize: 'xs',\n        letterSpacing: 'caps',\n        textTransform: 'uppercase',\n        paddingY: 4,\n        paddingX: 0,\n        borderRightWidth: 0,\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const body = recipe({\n  base: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  variants: {\n    kind: {\n      default: {},\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const bodyContained = style([\n  sprinkles({\n    flex: 1,\n    minHeight: 0,\n  }),\n  {\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    scrollbarWidth: 'thin',\n    scrollbarColor: `${vars.colors.border} transparent`,\n  },\n]);\n\nexport const row = recipe({\n  base: style([\n    sprinkles({\n      alignItems: 'stretch',\n      borderStyle: 'solid',\n      borderWidth: 0,\n      display: 'grid',\n      transitionProperty: 'colors',\n      transitionDuration: 150,\n      transitionTimingFunction: 'ease',\n    }),\n  ]),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          backgroundColor: 'surface',\n          borderBottomColor: 'borderLight',\n          borderBottomWidth: 'default',\n        }),\n        {\n          selectors: {\n            '&:last-child': {\n              borderBottomWidth: 0,\n            },\n            '&:hover': {\n              backgroundColor: vars.colors.tableRowHoverSurface,\n            },\n          },\n        },\n      ]),\n      brandTable: style([\n        sprinkles({\n          backgroundColor: 'transparent',\n          borderBottomColor: 'brandSubtleBorder',\n          borderBottomWidth: 'default',\n        }),\n        {\n          selectors: {\n            '&:last-child': {\n              borderBottomWidth: 0,\n            },\n            '&:hover': {\n              backgroundColor: 'transparent',\n            },\n          },\n        },\n      ]),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const rowEven = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surfaceSecondary',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const rowOdd = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surface',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const cell = recipe({\n  base: sprinkles({\n    alignItems: 'center',\n    display: 'flex',\n    gap: 2,\n    minWidth: 0,\n    overflow: 'hidden',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          color: 'textSecondary',\n        }),\n        {\n          padding: fallbackVar(\n            tableCellPaddingVar,\n            `${vars.spacing[3]} ${vars.spacing[4]}`,\n          ),\n          fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n          minHeight: fallbackVar(tableRowMinHeightVar, vars.spacing[10]),\n          selectors: {\n            '&:last-child': {\n              borderRight: 'none',\n            },\n          },\n        },\n      ]),\n      brandTable: sprinkles({\n        color: 'text',\n        fontWeight: 'semibold',\n        fontSize: 'sm',\n        paddingY: 4,\n        paddingX: 0,\n        borderRightWidth: 0,\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const primaryCell = sprinkles({\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const primaryHeaderCell = sprinkles({\n  color: 'text',\n});\n\nexport const singleLineCell = sprinkles({\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  minWidth: 0,\n});\n\nexport const stickyHeader = style({\n  position: 'sticky',\n  top: 0,\n  zIndex: vars.zIndex[10],\n});\n\nexport const alignRecipe = recipe({\n  variants: {\n    align: {\n      left: sprinkles({\n        justifyContent: 'flex-start',\n        textAlign: 'left',\n      }),\n      center: sprinkles({\n        justifyContent: 'center',\n        textAlign: 'center',\n      }),\n      right: sprinkles({\n        justifyContent: 'flex-end',\n        textAlign: 'end',\n      }),\n    },\n  },\n});\n\nexport const rowStateRecipe = recipe({\n  variants: {\n    state: {\n      default: {},\n      selected: {\n        backgroundColor: vars.colors.tableRowSelectedSurface,\n      },\n      muted: {\n        opacity: 0.72,\n      },\n      danger: {\n        backgroundColor: vars.colors.tableRowDangerSurface,\n      },\n    },\n  },\n});\n\nexport const emptyRow = style({\n  padding: fallbackVar(\n    tableEmptyRowPaddingVar,\n    `${vars.spacing[6]} ${vars.spacing[4]}`,\n  ),\n});\n\nexport const emptyCell = sprinkles({\n  fontSize: 'base',\n  color: 'textSecondary',\n  textAlign: 'center',\n});\n\nconst hideBelowMap: Record<DataTableBreakpoint, StyleRule> = {} as Record<\n  DataTableBreakpoint,\n  StyleRule\n>;\n\nDATA_TABLE_BREAKPOINT_ENTRIES.forEach(([breakpoint, width]) => {\n  hideBelowMap[breakpoint] = {\n    '@container': {\n      [`(max-width: ${width - 0.5}px)`]: {\n        display: 'none',\n      },\n    },\n  };\n});\n\nexport const hideBelowRecipe = recipe({\n  variants: {\n    minVisibleAt: hideBelowMap,\n  },\n});\n"],"mappings":""}

package/lib/esm/components/data-table/DataTable.js

@@ -1,22 +1,49 @@
 import { cx as e } from "../../theme/tools.js";
 import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
 import { alignRecipe as n, body as r, bodyContained as i, cell as a, container as o, containerWithContainedBody as s, densityRecipe as c, emptyRow as l, header as u, headerCell as d, headerRow as f, hideBelowRecipe as p, primaryCell as m, primaryHeaderCell as h, row as g, rowEven as _, rowOdd as v, rowStateRecipe as y, singleLineCell as b, stickyHeader as x } from "./DataTable.css.js";
-import { buildDataTableInlineTemplate as S } from "../../internal/data-table/layout.js";
-import { forwardRef as C } from "react";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { DATA_TABLE_BREAKPOINTS as S } from "./tableBreakpoints.js";
+import { buildDataTableInlineTemplate as C, filterDataTableGridTemplateColumns as w } from "../../internal/data-table/layout.js";
+import { forwardRef as T, useLayoutEffect as E, useMemo as D, useRef as O, useState as k } from "react";
+import { jsx as A, jsxs as j } from "react/jsx-runtime";
 //#region src/components/data-table/DataTable.tsx
-var E = (e) => e ?? "default", D = (e) => e ?? "default", O = (e) => e == null ? null : p({ minVisibleAt: e }), k = ({ columnCount: e, gridTemplateClassName: t, gridTemplateColumns: n }) => {
-	if (t == null) return S(e, n);
-}, A = ({ density: e, gridTemplateClassName: t }) => {
-	let n = [c({ density: D(e) })];
+var M = (e) => e ?? "default", N = (e) => e ?? "default", P = (e) => e == null ? null : p({ minVisibleAt: e }), F = ({ columnCount: e, gridTemplateClassName: t, gridTemplateColumns: n }) => {
+	if (t == null) return C(e, n);
+}, I = ({ density: e, gridTemplateClassName: t }) => {
+	let n = [c({ density: N(e) })];
 	return t != null && n.push(t), n;
-}, j = C(({ children: n, className: r, kind: i, bodyScrollMode: a = "page", classes: c, ariaLabel: l, ariaLabelledBy: u }, d) => {
+}, L = (e, t) => e.map((e, t) => ({
+	column: e,
+	index: t
+})).filter(({ column: e }) => e.minVisibleAt == null || t == null ? !0 : t >= S[e.minVisibleAt]), R = ({ columns: e, gridTemplateColumns: t, visibleColumnEntries: n }) => w({
+	gridTemplateColumns: t,
+	visibleColumnIndexes: n.map((e) => e.index),
+	columnCount: e.length
+}), z = (e) => {
+	let [t, n] = k(null);
+	return E(() => {
+		let t = e.current;
+		if (t == null || typeof window > "u") return;
+		let r = () => {
+			let e = t.getBoundingClientRect().width, r = null;
+			e > 0 ? r = e : t.clientWidth > 0 && (r = t.clientWidth), n(r);
+		};
+		if (r(), typeof ResizeObserver > "u") return window.addEventListener("resize", r), () => {
+			window.removeEventListener("resize", r);
+		};
+		let i = new ResizeObserver(() => {
+			r();
+		});
+		return i.observe(t), () => {
+			i.disconnect();
+		};
+	}, [e]), t;
+}, B = T(({ children: n, className: r, kind: i, bodyScrollMode: a = "page", classes: c, ariaLabel: l, ariaLabelledBy: u }, d) => {
 	let { t: f } = t(), p;
 	u ?? (p = l ?? f("common.table.label"));
 	let m = a === "contained", h = null;
-	return m && (h = s), /* @__PURE__ */ w("div", {
+	return m && (h = s), /* @__PURE__ */ A("div", {
 		ref: d,
-		className: e(o({ kind: E(i) }), h, c?.container, r),
+		className: e(o({ kind: M(i) }), h, c?.container, r),
 		role: "table",
 		"aria-label": p,
 		"aria-labelledby": u,
@@ -24,29 +51,29 @@ var E = (e) => e ?? "default", D = (e) => e ?? "default", O = (e) => e == null ?
 		children: n
 	});
 });
-j.displayName = "DataTableRoot";
-var M = ({ columns: t, kind: r, density: i, headerBehavior: a, headerClassName: o, gridTemplateClassName: s, gridTemplateColumns: c, classes: l }) => {
-	let p = E(r), m = k({
+B.displayName = "DataTableRoot";
+var V = ({ columns: t, kind: r, density: i, headerBehavior: a, headerClassName: o, gridTemplateClassName: s, gridTemplateColumns: c, classes: l }) => {
+	let p = M(r), m = F({
 		columnCount: t.length,
 		gridTemplateClassName: s,
 		gridTemplateColumns: c
-	}), g = A({
+	}), g = I({
 		density: i,
 		gridTemplateClassName: s
 	}), _;
 	a?.offsetTop != null && (_ = { top: a.offsetTop });
 	let v = null;
-	return a?.sticky === !0 && (v = x), /* @__PURE__ */ w("div", {
+	return a?.sticky === !0 && (v = x), /* @__PURE__ */ A("div", {
 		className: e(u({ kind: p }), v, l?.header, o),
 		style: _,
 		role: "rowgroup",
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ A("div", {
 			className: e(f, l?.headerRow, ...g),
 			role: "row",
 			style: m,
 			children: t.map((t) => {
-				let r = [d({ kind: p }), l?.headerCell], i = O(t.minVisibleAt);
-				return i != null && r.push(i), t.className != null && r.push(t.className), t.isPrimary && r.push(h, l?.primaryHeaderCell), t.align != null && r.push(n({ align: t.align })), /* @__PURE__ */ w("div", {
+				let r = [d({ kind: p }), l?.headerCell], i = P(t.minVisibleAt);
+				return i != null && r.push(i), t.className != null && r.push(t.className), t.isPrimary && r.push(h, l?.primaryHeaderCell), t.align != null && r.push(n({ align: t.align })), /* @__PURE__ */ A("div", {
 					role: "columnheader",
 					className: e(...r),
 					children: t.header
@@ -54,101 +81,110 @@ var M = ({ columns: t, kind: r, density: i, headerBehavior: a, headerClassName:
 			})
 		})
 	});
-}, N = C(({ children: t, className: n, kind: a, bodyScrollMode: o = "page", classes: s }, c) => {
+}, H = T(({ children: t, className: n, kind: a, bodyScrollMode: o = "page", classes: s }, c) => {
 	let l = o === "contained", u = null;
-	return l && (u = i), /* @__PURE__ */ w("div", {
+	return l && (u = i), /* @__PURE__ */ A("div", {
 		ref: c,
-		className: e(r({ kind: E(a) }), u, s?.body, n),
+		className: e(r({ kind: M(a) }), u, s?.body, n),
 		role: "rowgroup",
 		"data-scroll-mode": o,
 		children: t
 	});
 });
-N.displayName = "DataTableBody";
-var P = ({ row: t, index: r, columns: i, getRowId: o, kind: s, density: c, rowClassName: l, rowState: u, gridTemplateClassName: d, gridTemplateColumns: f, classes: p, style: h, cellMode: x = "normal" }) => {
-	let S = E(s), C = k({
+H.displayName = "DataTableBody";
+var U = ({ row: t, index: r, columns: i, getRowId: o, kind: s, density: c, rowClassName: l, rowState: u, gridTemplateClassName: d, gridTemplateColumns: f, classes: p, style: h, cellMode: x = "normal" }) => {
+	let S = M(s), C = F({
 		columnCount: i.length,
 		gridTemplateClassName: d,
 		gridTemplateColumns: f
-	}), T = [g({ kind: S }), p?.row], D = u?.(t, r);
-	D != null && T.push(y({ state: D })), r % 2 == 0 ? T.push(_({ kind: S }), p?.rowEven) : T.push(v({ kind: S }), p?.rowOdd), T.push(...A({
+	}), w = [g({ kind: S }), p?.row], T = u?.(t, r);
+	T != null && w.push(y({ state: T })), r % 2 == 0 ? w.push(_({ kind: S }), p?.rowEven) : w.push(v({ kind: S }), p?.rowOdd), w.push(...I({
 		density: c,
 		gridTemplateClassName: d
 	}));
-	let j = l?.(t, r);
-	return j != null && T.push(j), /* @__PURE__ */ w("div", {
+	let E = l?.(t, r);
+	return E != null && w.push(E), /* @__PURE__ */ A("div", {
 		role: "row",
-		className: e(...T),
+		className: e(...w),
 		style: {
 			...C,
 			...h
 		},
 		children: i.map((r) => {
-			let i = [a({ kind: S }), p?.cell], o = O(r.minVisibleAt);
-			return o != null && i.push(o), x === "singleLine" && i.push(b), r.className != null && i.push(r.className), r.isPrimary && i.push(m, p?.primaryCell), r.align != null && i.push(n({ align: r.align })), /* @__PURE__ */ w("div", {
+			let i = [a({ kind: S }), p?.cell], o = P(r.minVisibleAt);
+			return o != null && i.push(o), x === "singleLine" && i.push(b), r.className != null && i.push(r.className), r.isPrimary && i.push(m, p?.primaryCell), r.align != null && i.push(n({ align: r.align })), /* @__PURE__ */ A("div", {
 				role: "cell",
 				className: e(...i),
 				children: r.cell(t)
 			}, r.id);
 		})
 	}, o(t, r));
-}, F = ({ emptyState: n, density: r, classes: i }) => {
-	let { t: a } = t(), o = n ?? /* @__PURE__ */ w("div", {
-		className: e("ysn84629 txvbqb9w txvbqb1bg3 txvbqb18dp", i?.emptyCell),
+}, W = ({ emptyState: n, density: r, classes: i }) => {
+	let { t: a } = t(), o = n ?? /* @__PURE__ */ A("div", {
+		className: e("ysn8462a txvbqb9w txvbqb1bg3 txvbqb18dp", i?.emptyCell),
 		children: a("common.table.empty")
 	});
-	return /* @__PURE__ */ w("div", {
-		className: e(l, c({ density: D(r) }), i?.emptyRow),
+	return /* @__PURE__ */ A("div", {
+		className: e(l, c({ density: N(r) }), i?.emptyRow),
 		role: "row",
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ A("div", {
 			role: "cell",
 			children: o
 		})
 	});
-}, I = ({ columns: e, rows: t, getRowId: n, emptyState: r, className: i, headerClassName: a, bodyClassName: o, rowClassName: s, gridTemplateClassName: c, gridTemplateColumns: l, kind: u, density: d, headerBehavior: f, bodyScrollMode: p = "page", rowState: m, classes: h, ariaLabel: g, ariaLabelledBy: _, bodyFooterNode: v }) => {
-	let y;
-	return y = t.length === 0 ? /* @__PURE__ */ w(F, {
+}, G = ({ columns: e, rows: t, getRowId: n, emptyState: r, className: i, headerClassName: a, bodyClassName: o, rowClassName: s, gridTemplateClassName: c, gridTemplateColumns: l, kind: u, density: d, headerBehavior: f, bodyScrollMode: p = "page", rowState: m, classes: h, ariaLabel: g, ariaLabelledBy: _, bodyFooterNode: v }) => {
+	let y = O(null), b = z(y), x = D(() => L(e, b), [e, b]), S = D(() => x.map((e) => e.column), [x]), C = D(() => R({
+		columns: e,
+		gridTemplateColumns: l,
+		visibleColumnEntries: x
+	}), [
+		e,
+		l,
+		x
+	]), w;
+	return w = t.length === 0 ? /* @__PURE__ */ A(W, {
 		emptyState: r,
 		density: d,
 		classes: h
-	}) : t.map((t, r) => /* @__PURE__ */ w(P, {
-		row: t,
-		index: r,
-		columns: e,
+	}) : t.map((e, t) => /* @__PURE__ */ A(U, {
+		row: e,
+		index: t,
+		columns: S,
 		getRowId: n,
 		kind: u,
 		density: d,
 		rowClassName: s,
 		rowState: m,
 		gridTemplateClassName: c,
-		gridTemplateColumns: l,
+		gridTemplateColumns: C,
 		classes: h
-	}, n(t, r))), /* @__PURE__ */ T(j, {
+	}, n(e, t))), /* @__PURE__ */ j(B, {
+		ref: y,
 		className: i,
 		kind: u,
 		bodyScrollMode: p,
 		classes: h,
 		ariaLabel: g,
 		ariaLabelledBy: _,
-		children: [/* @__PURE__ */ w(M, {
-			columns: e,
+		children: [/* @__PURE__ */ A(V, {
+			columns: S,
 			kind: u,
 			density: d,
 			headerBehavior: f,
 			headerClassName: a,
 			gridTemplateClassName: c,
-			gridTemplateColumns: l,
+			gridTemplateColumns: C,
 			classes: h
-		}), /* @__PURE__ */ T(N, {
+		}), /* @__PURE__ */ j(H, {
 			className: o,
 			kind: u,
 			bodyScrollMode: p,
 			classes: h,
-			children: [y, v]
+			children: [w, v]
 		})]
 	});
 };
 //#endregion
-export { I as DataTable, N as DataTableBody, F as DataTableEmptyRow, M as DataTableHeader, j as DataTableRoot, P as DataTableRow };
+export { G as DataTable, H as DataTableBody, W as DataTableEmptyRow, V as DataTableHeader, B as DataTableRoot, U as DataTableRow, L as getVisibleDataTableColumnEntries, R as getVisibleDataTableGridTemplateColumns, z as useDataTableContainerWidth };
 
 //# sourceMappingURL=DataTable.js.map

package/lib/esm/components/data-table/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type JSX,\n  type ReactNode,\n} from 'react';\n\nimport * as styles from './DataTable.css.js';\nimport type { DataTableBreakpoint } from './tableBreakpoints.js';\nimport { buildDataTableInlineTemplate } from '../../internal/data-table/layout.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\nimport type { SlotClasses } from '../../styles/slots.js';\nimport { cx } from '../../theme/tools.js';\n\nexport type DataTableColumn<Row> = {\n  id: string;\n  header: JSX.Element | string;\n  cell: (row: Row) => JSX.Element | string | null;\n  minVisibleAt?: DataTableBreakpoint;\n  className?: string;\n  isPrimary?: boolean;\n  align?: 'left' | 'center' | 'right';\n  priority?: 'primary' | 'important' | 'secondary' | 'debug';\n  mobileRole?:\n    | 'title'\n    | 'subtitle'\n    | 'meta'\n    | 'badge'\n    | 'status'\n    | 'action'\n    | 'hidden';\n};\n\nexport type GetRowId<Row> = (row: Row, index: number) => string;\n\nexport type DataTableKind = NonNullable<\n  Parameters<typeof styles.container>[0]\n>['kind'];\n\nexport type DataTableDensity = NonNullable<\n  Parameters<typeof styles.densityRecipe>[0]\n>['density'];\n\nexport type DataTableRowState = NonNullable<\n  Parameters<typeof styles.rowStateRecipe>[0]\n>['state'];\n\nexport type DataTableHeaderBehavior = {\n  sticky?: boolean;\n  offsetTop?: number;\n};\n\nexport type DataTableBodyScrollMode = 'page' | 'contained';\n\nexport type DataTableSlot =\n  | 'container'\n  | 'header'\n  | 'headerRow'\n  | 'headerCell'\n  | 'primaryHeaderCell'\n  | 'body'\n  | 'row'\n  | 'rowEven'\n  | 'rowOdd'\n  | 'cell'\n  | 'primaryCell'\n  | 'emptyRow'\n  | 'emptyCell';\n\nexport type DataTableCellMode = 'normal' | 'singleLine';\n\nexport type DataTablePrimitiveLayoutProps = {\n  gridTemplateClassName?: string;\n  gridTemplateColumns?: string;\n};\n\nexport type DataTableRootProps = {\n  children: ReactNode;\n  className?: string;\n  kind?: DataTableKind;\n  bodyScrollMode?: DataTableBodyScrollMode;\n  classes?: Pick<SlotClasses<DataTableSlot>, 'container'>;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n};\n\nexport type DataTableHeaderProps<Row> = DataTablePrimitiveLayoutProps & {\n  columns: readonly DataTableColumn<Row>[];\n  kind?: DataTableKind;\n  density?: DataTableDensity;\n  headerBehavior?: DataTableHeaderBehavior;\n  headerClassName?: string;\n  classes?: Pick<\n    SlotClasses<DataTableSlot>,\n    'header' | 'headerRow' | 'headerCell' | 'primaryHeaderCell'\n  >;\n};\n\nexport type DataTableBodyProps = {\n  children: ReactNode;\n  className?: string;\n  kind?: DataTableKind;\n  bodyScrollMode?: DataTableBodyScrollMode;\n  classes?: Pick<SlotClasses<DataTableSlot>, 'body'>;\n};\n\nexport type DataTableRowProps<Row> = DataTablePrimitiveLayoutProps & {\n  row: Row;\n  index: number;\n  columns: readonly DataTableColumn<Row>[];\n  getRowId: GetRowId<Row>;\n  kind?: DataTableKind;\n  density?: DataTableDensity;\n  rowClassName?: (row: Row, index: number) => string | null | undefined;\n  rowState?: (row: Row, index: number) => DataTableRowState;\n  classes?: Pick<\n    SlotClasses<DataTableSlot>,\n    'row' | 'rowEven' | 'rowOdd' | 'cell' | 'primaryCell'\n  >;\n  style?: CSSProperties;\n  cellMode?: DataTableCellMode;\n};\n\nexport type DataTableEmptyRowProps = {\n  emptyState?: JSX.Element;\n  density?: DataTableDensity;\n  classes?: Pick<SlotClasses<DataTableSlot>, 'emptyRow' | 'emptyCell'>;\n};\n\nexport type DataTableProps<Row> = {\n  columns: readonly DataTableColumn<Row>[];\n  rows: readonly Row[];\n  getRowId: GetRowId<Row>;\n  emptyState?: JSX.Element;\n  className?: string;\n  headerClassName?: string;\n  bodyClassName?: string;\n  rowClassName?: (row: Row, index: number) => string | null | undefined;\n  gridTemplateClassName?: string;\n  gridTemplateColumns?: string;\n  kind?: DataTableKind;\n  density?: DataTableDensity;\n  headerBehavior?: DataTableHeaderBehavior;\n  bodyScrollMode?: DataTableBodyScrollMode;\n  rowState?: (row: Row, index: number) => DataTableRowState;\n  classes?: SlotClasses<DataTableSlot>;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  bodyFooterNode?: ReactNode;\n};\n\nconst resolveKind = (kind?: DataTableKind): DataTableKind => {\n  return kind ?? 'default';\n};\n\nconst resolveDensity = (density?: DataTableDensity): DataTableDensity => {\n  return density ?? 'default';\n};\n\nconst getVisibilityClass = (minVisibleAt?: DataTableBreakpoint) => {\n  if (minVisibleAt == null) {\n    return null;\n  }\n\n  return styles.hideBelowRecipe({ minVisibleAt });\n};\n\nconst getInlineTemplateStyle = ({\n  columnCount,\n  gridTemplateClassName,\n  gridTemplateColumns,\n}: DataTablePrimitiveLayoutProps & {\n  columnCount: number;\n}): CSSProperties | undefined => {\n  if (gridTemplateClassName != null) {\n    return undefined;\n  }\n  return buildDataTableInlineTemplate(columnCount, gridTemplateColumns);\n};\n\nconst getGridRowClasses = ({\n  density,\n  gridTemplateClassName,\n}: DataTablePrimitiveLayoutProps & {\n  density?: DataTableDensity;\n}): string[] => {\n  const rowClasses = [\n    styles.densityRecipe({ density: resolveDensity(density) }),\n  ];\n  if (gridTemplateClassName != null) {\n    rowClasses.push(gridTemplateClassName);\n  }\n  return rowClasses;\n};\n\nexport const DataTableRoot = forwardRef<HTMLDivElement, DataTableRootProps>(\n  (\n    {\n      children,\n      className,\n      kind,\n      bodyScrollMode = 'page',\n      classes,\n      ariaLabel,\n      ariaLabelledBy,\n    },\n    ref,\n  ): JSX.Element => {\n    const { t } = useUiTranslation();\n    let tableAriaLabel: string | undefined;\n    if (ariaLabelledBy == null) {\n      tableAriaLabel = ariaLabel ?? t('common.table.label');\n    }\n    const hasContainedBodyScroll = bodyScrollMode === 'contained';\n    let containedClassName: string | null = null;\n    if (hasContainedBodyScroll) {\n      containedClassName = styles.containerWithContainedBody;\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          styles.container({ kind: resolveKind(kind) }),\n          containedClassName,\n          classes?.container,\n          className,\n        )}\n        role=\"table\"\n        aria-label={tableAriaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-scroll-mode={bodyScrollMode}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataTableRoot.displayName = 'DataTableRoot';\n\nexport const DataTableHeader = <Row,>({\n  columns,\n  kind,\n  density,\n  headerBehavior,\n  headerClassName,\n  gridTemplateClassName,\n  gridTemplateColumns,\n  classes,\n}: DataTableHeaderProps<Row>): JSX.Element => {\n  const resolvedKind = resolveKind(kind);\n  const inlineTemplateStyle = getInlineTemplateStyle({\n    columnCount: columns.length,\n    gridTemplateClassName,\n    gridTemplateColumns,\n  });\n  const gridRowClasses = getGridRowClasses({\n    density,\n    gridTemplateClassName,\n  });\n  let headerStyle: CSSProperties | undefined;\n  if (headerBehavior?.offsetTop != null) {\n    headerStyle = { top: headerBehavior.offsetTop };\n  }\n  let stickyHeaderClassName: string | null = null;\n  if (headerBehavior?.sticky === true) {\n    stickyHeaderClassName = styles.stickyHeader;\n  }\n\n  return (\n    <div\n      className={cx(\n        styles.header({ kind: resolvedKind }),\n        stickyHeaderClassName,\n        classes?.header,\n        headerClassName,\n      )}\n      style={headerStyle}\n      role=\"rowgroup\"\n    >\n      <div\n        className={cx(styles.headerRow, classes?.headerRow, ...gridRowClasses)}\n        role=\"row\"\n        style={inlineTemplateStyle}\n      >\n        {columns.map((column) => {\n          const headerClasses = [\n            styles.headerCell({ kind: resolvedKind }),\n            classes?.headerCell,\n          ];\n          const visibilityClass = getVisibilityClass(column.minVisibleAt);\n          if (visibilityClass != null) {\n            headerClasses.push(visibilityClass);\n          }\n\n          if (column.className != null) {\n            headerClasses.push(column.className);\n          }\n          if (column.isPrimary) {\n            headerClasses.push(\n              styles.primaryHeaderCell,\n              classes?.primaryHeaderCell,\n            );\n          }\n          if (column.align != null) {\n            headerClasses.push(styles.alignRecipe({ align: column.align }));\n          }\n\n          return (\n            <div\n              key={column.id}\n              role=\"columnheader\"\n              className={cx(...headerClasses)}\n            >\n              {column.header}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport const DataTableBody = forwardRef<HTMLDivElement, DataTableBodyProps>(\n  (\n    { children, className, kind, bodyScrollMode = 'page', classes },\n    ref,\n  ): JSX.Element => {\n    const hasContainedBodyScroll = bodyScrollMode === 'contained';\n    let containedClassName: string | null = null;\n    if (hasContainedBodyScroll) {\n      containedClassName = styles.bodyContained;\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          styles.body({ kind: resolveKind(kind) }),\n          containedClassName,\n          classes?.body,\n          className,\n        )}\n        role=\"rowgroup\"\n        data-scroll-mode={bodyScrollMode}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataTableBody.displayName = 'DataTableBody';\n\nexport const DataTableRow = <Row,>({\n  row,\n  index,\n  columns,\n  getRowId,\n  kind,\n  density,\n  rowClassName,\n  rowState,\n  gridTemplateClassName,\n  gridTemplateColumns,\n  classes,\n  style,\n  cellMode = 'normal',\n}: DataTableRowProps<Row>): JSX.Element => {\n  const resolvedKind = resolveKind(kind);\n  const inlineTemplateStyle = getInlineTemplateStyle({\n    columnCount: columns.length,\n    gridTemplateClassName,\n    gridTemplateColumns,\n  });\n  const rowClasses = [styles.row({ kind: resolvedKind }), classes?.row];\n  const state = rowState?.(row, index);\n  if (state != null) {\n    rowClasses.push(styles.rowStateRecipe({ state }));\n  }\n  if (index % 2 === 0) {\n    rowClasses.push(styles.rowEven({ kind: resolvedKind }), classes?.rowEven);\n  } else {\n    rowClasses.push(styles.rowOdd({ kind: resolvedKind }), classes?.rowOdd);\n  }\n  rowClasses.push(...getGridRowClasses({ density, gridTemplateClassName }));\n\n  const customClass = rowClassName?.(row, index);\n  if (customClass != null) {\n    rowClasses.push(customClass);\n  }\n\n  return (\n    <div\n      key={getRowId(row, index)}\n      role=\"row\"\n      className={cx(...rowClasses)}\n      style={{ ...inlineTemplateStyle, ...style }}\n    >\n      {columns.map((column) => {\n        const cellClasses = [\n          styles.cell({ kind: resolvedKind }),\n          classes?.cell,\n        ];\n        const visibilityClass = getVisibilityClass(column.minVisibleAt);\n\n        if (visibilityClass != null) {\n          cellClasses.push(visibilityClass);\n        }\n        if (cellMode === 'singleLine') {\n          cellClasses.push(styles.singleLineCell);\n        }\n        if (column.className != null) {\n          cellClasses.push(column.className);\n        }\n        if (column.isPrimary) {\n          cellClasses.push(styles.primaryCell, classes?.primaryCell);\n        }\n        if (column.align != null) {\n          cellClasses.push(styles.alignRecipe({ align: column.align }));\n        }\n\n        return (\n          <div key={column.id} role=\"cell\" className={cx(...cellClasses)}>\n            {column.cell(row)}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nexport const DataTableEmptyRow = ({\n  emptyState,\n  density,\n  classes,\n}: DataTableEmptyRowProps): JSX.Element => {\n  const { t } = useUiTranslation();\n  const resolvedEmptyState = emptyState ?? (\n    <div className={cx(styles.emptyCell, classes?.emptyCell)}>\n      {t('common.table.empty')}\n    </div>\n  );\n\n  return (\n    <div\n      className={cx(\n        styles.emptyRow,\n        styles.densityRecipe({ density: resolveDensity(density) }),\n        classes?.emptyRow,\n      )}\n      role=\"row\"\n    >\n      <div role=\"cell\">{resolvedEmptyState}</div>\n    </div>\n  );\n};\n\n/**\n * Generic responsive data table component.\n */\nexport const DataTable = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  emptyState,\n  className,\n  headerClassName,\n  bodyClassName,\n  rowClassName,\n  gridTemplateClassName,\n  gridTemplateColumns,\n  kind,\n  density,\n  headerBehavior,\n  bodyScrollMode = 'page',\n  rowState,\n  classes,\n  ariaLabel,\n  ariaLabelledBy,\n  bodyFooterNode,\n}: DataTableProps<Row>): JSX.Element => {\n  let rowsContent: ReactNode;\n  if (rows.length === 0) {\n    rowsContent = (\n      <DataTableEmptyRow\n        emptyState={emptyState}\n        density={density}\n        classes={classes}\n      />\n    );\n  } else {\n    rowsContent = rows.map((row, index) => {\n      return (\n        <DataTableRow\n          key={getRowId(row, index)}\n          row={row}\n          index={index}\n          columns={columns}\n          getRowId={getRowId}\n          kind={kind}\n          density={density}\n          rowClassName={rowClassName}\n          rowState={rowState}\n          gridTemplateClassName={gridTemplateClassName}\n          gridTemplateColumns={gridTemplateColumns}\n          classes={classes}\n        />\n      );\n    });\n  }\n\n  return (\n    <DataTableRoot\n      className={className}\n      kind={kind}\n      bodyScrollMode={bodyScrollMode}\n      classes={classes}\n      ariaLabel={ariaLabel}\n      ariaLabelledBy={ariaLabelledBy}\n    >\n      <DataTableHeader\n        columns={columns}\n        kind={kind}\n        density={density}\n        headerBehavior={headerBehavior}\n        headerClassName={headerClassName}\n        gridTemplateClassName={gridTemplateClassName}\n        gridTemplateColumns={gridTemplateColumns}\n        classes={classes}\n      />\n      <DataTableBody\n        className={bodyClassName}\n        kind={kind}\n        bodyScrollMode={bodyScrollMode}\n        classes={classes}\n      >\n        {rowsContent}\n        {bodyFooterNode}\n      </DataTableBody>\n    </DataTableRoot>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type JSX,\n  type RefObject,\n  type ReactNode,\n} from 'react';\n\nimport * as styles from './DataTable.css.js';\nimport {\n  DATA_TABLE_BREAKPOINTS,\n  type DataTableBreakpoint,\n} from './tableBreakpoints.js';\nimport {\n  buildDataTableInlineTemplate,\n  filterDataTableGridTemplateColumns,\n} from '../../internal/data-table/layout.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\nimport type { SlotClasses } from '../../styles/slots.js';\nimport { cx } from '../../theme/tools.js';\n\nexport type DataTableColumn<Row> = {\n  id: string;\n  header: JSX.Element | string;\n  cell: (row: Row) => JSX.Element | string | null;\n  minVisibleAt?: DataTableBreakpoint;\n  className?: string;\n  isPrimary?: boolean;\n  align?: 'left' | 'center' | 'right';\n  priority?: 'primary' | 'important' | 'secondary' | 'debug';\n  mobileRole?:\n    | 'title'\n    | 'subtitle'\n    | 'meta'\n    | 'badge'\n    | 'status'\n    | 'action'\n    | 'hidden';\n};\n\nexport type GetRowId<Row> = (row: Row, index: number) => string;\n\nexport type DataTableKind = NonNullable<\n  Parameters<typeof styles.container>[0]\n>['kind'];\n\nexport type DataTableDensity = NonNullable<\n  Parameters<typeof styles.densityRecipe>[0]\n>['density'];\n\nexport type DataTableRowState = NonNullable<\n  Parameters<typeof styles.rowStateRecipe>[0]\n>['state'];\n\nexport type DataTableHeaderBehavior = {\n  sticky?: boolean;\n  offsetTop?: number;\n};\n\nexport type DataTableBodyScrollMode = 'page' | 'contained';\n\nexport type DataTableSlot =\n  | 'container'\n  | 'header'\n  | 'headerRow'\n  | 'headerCell'\n  | 'primaryHeaderCell'\n  | 'body'\n  | 'row'\n  | 'rowEven'\n  | 'rowOdd'\n  | 'cell'\n  | 'primaryCell'\n  | 'emptyRow'\n  | 'emptyCell';\n\nexport type DataTableCellMode = 'normal' | 'singleLine';\n\nexport type DataTablePrimitiveLayoutProps = {\n  gridTemplateClassName?: string;\n  gridTemplateColumns?: string;\n};\n\nexport type DataTableRootProps = {\n  children: ReactNode;\n  className?: string;\n  kind?: DataTableKind;\n  bodyScrollMode?: DataTableBodyScrollMode;\n  classes?: Pick<SlotClasses<DataTableSlot>, 'container'>;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n};\n\nexport type DataTableHeaderProps<Row> = DataTablePrimitiveLayoutProps & {\n  columns: readonly DataTableColumn<Row>[];\n  kind?: DataTableKind;\n  density?: DataTableDensity;\n  headerBehavior?: DataTableHeaderBehavior;\n  headerClassName?: string;\n  classes?: Pick<\n    SlotClasses<DataTableSlot>,\n    'header' | 'headerRow' | 'headerCell' | 'primaryHeaderCell'\n  >;\n};\n\nexport type DataTableBodyProps = {\n  children: ReactNode;\n  className?: string;\n  kind?: DataTableKind;\n  bodyScrollMode?: DataTableBodyScrollMode;\n  classes?: Pick<SlotClasses<DataTableSlot>, 'body'>;\n};\n\nexport type DataTableRowProps<Row> = DataTablePrimitiveLayoutProps & {\n  row: Row;\n  index: number;\n  columns: readonly DataTableColumn<Row>[];\n  getRowId: GetRowId<Row>;\n  kind?: DataTableKind;\n  density?: DataTableDensity;\n  rowClassName?: (row: Row, index: number) => string | null | undefined;\n  rowState?: (row: Row, index: number) => DataTableRowState;\n  classes?: Pick<\n    SlotClasses<DataTableSlot>,\n    'row' | 'rowEven' | 'rowOdd' | 'cell' | 'primaryCell'\n  >;\n  style?: CSSProperties;\n  cellMode?: DataTableCellMode;\n};\n\nexport type DataTableEmptyRowProps = {\n  emptyState?: JSX.Element;\n  density?: DataTableDensity;\n  classes?: Pick<SlotClasses<DataTableSlot>, 'emptyRow' | 'emptyCell'>;\n};\n\nexport type DataTableProps<Row> = {\n  columns: readonly DataTableColumn<Row>[];\n  rows: readonly Row[];\n  getRowId: GetRowId<Row>;\n  emptyState?: JSX.Element;\n  className?: string;\n  headerClassName?: string;\n  bodyClassName?: string;\n  rowClassName?: (row: Row, index: number) => string | null | undefined;\n  gridTemplateClassName?: string;\n  gridTemplateColumns?: string;\n  kind?: DataTableKind;\n  density?: DataTableDensity;\n  headerBehavior?: DataTableHeaderBehavior;\n  bodyScrollMode?: DataTableBodyScrollMode;\n  rowState?: (row: Row, index: number) => DataTableRowState;\n  classes?: SlotClasses<DataTableSlot>;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  bodyFooterNode?: ReactNode;\n};\n\nconst resolveKind = (kind?: DataTableKind): DataTableKind => {\n  return kind ?? 'default';\n};\n\nconst resolveDensity = (density?: DataTableDensity): DataTableDensity => {\n  return density ?? 'default';\n};\n\nconst getVisibilityClass = (minVisibleAt?: DataTableBreakpoint) => {\n  if (minVisibleAt == null) {\n    return null;\n  }\n\n  return styles.hideBelowRecipe({ minVisibleAt });\n};\n\nconst getInlineTemplateStyle = ({\n  columnCount,\n  gridTemplateClassName,\n  gridTemplateColumns,\n}: DataTablePrimitiveLayoutProps & {\n  columnCount: number;\n}): CSSProperties | undefined => {\n  if (gridTemplateClassName != null) {\n    return undefined;\n  }\n  return buildDataTableInlineTemplate(columnCount, gridTemplateColumns);\n};\n\nconst getGridRowClasses = ({\n  density,\n  gridTemplateClassName,\n}: DataTablePrimitiveLayoutProps & {\n  density?: DataTableDensity;\n}): string[] => {\n  const rowClasses = [\n    styles.densityRecipe({ density: resolveDensity(density) }),\n  ];\n  if (gridTemplateClassName != null) {\n    rowClasses.push(gridTemplateClassName);\n  }\n  return rowClasses;\n};\n\nexport type VisibleDataTableColumnEntry<Row> = {\n  column: DataTableColumn<Row>;\n  index: number;\n};\n\nexport const getVisibleDataTableColumnEntries = <Row,>(\n  columns: readonly DataTableColumn<Row>[],\n  containerWidth: number | null,\n): readonly VisibleDataTableColumnEntry<Row>[] => {\n  return columns\n    .map((column, index) => {\n      return { column, index };\n    })\n    .filter(({ column }) => {\n      if (column.minVisibleAt == null || containerWidth == null) {\n        return true;\n      }\n      return containerWidth >= DATA_TABLE_BREAKPOINTS[column.minVisibleAt];\n    });\n};\n\nexport const getVisibleDataTableGridTemplateColumns = <Row,>({\n  columns,\n  gridTemplateColumns,\n  visibleColumnEntries,\n}: {\n  columns: readonly DataTableColumn<Row>[];\n  gridTemplateColumns?: string;\n  visibleColumnEntries: readonly VisibleDataTableColumnEntry<Row>[];\n}): string | undefined => {\n  return filterDataTableGridTemplateColumns({\n    gridTemplateColumns,\n    visibleColumnIndexes: visibleColumnEntries.map((entry) => {\n      return entry.index;\n    }),\n    columnCount: columns.length,\n  });\n};\n\nexport const useDataTableContainerWidth = (\n  ref: RefObject<HTMLElement | null>,\n): number | null => {\n  const [containerWidth, setContainerWidth] = useState<number | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (element == null || typeof window === 'undefined') {\n      return undefined;\n    }\n\n    const readWidth = (): void => {\n      const rectWidth = element.getBoundingClientRect().width;\n      let nextWidth: number | null = null;\n      if (rectWidth > 0) {\n        nextWidth = rectWidth;\n      } else if (element.clientWidth > 0) {\n        nextWidth = element.clientWidth;\n      }\n      setContainerWidth(nextWidth);\n    };\n\n    readWidth();\n\n    if (typeof ResizeObserver === 'undefined') {\n      window.addEventListener('resize', readWidth);\n      return () => {\n        window.removeEventListener('resize', readWidth);\n      };\n    }\n\n    const observer = new ResizeObserver(() => {\n      readWidth();\n    });\n    observer.observe(element);\n    return () => {\n      observer.disconnect();\n    };\n  }, [ref]);\n\n  return containerWidth;\n};\n\nexport const DataTableRoot = forwardRef<HTMLDivElement, DataTableRootProps>(\n  (\n    {\n      children,\n      className,\n      kind,\n      bodyScrollMode = 'page',\n      classes,\n      ariaLabel,\n      ariaLabelledBy,\n    },\n    ref,\n  ): JSX.Element => {\n    const { t } = useUiTranslation();\n    let tableAriaLabel: string | undefined;\n    if (ariaLabelledBy == null) {\n      tableAriaLabel = ariaLabel ?? t('common.table.label');\n    }\n    const hasContainedBodyScroll = bodyScrollMode === 'contained';\n    let containedClassName: string | null = null;\n    if (hasContainedBodyScroll) {\n      containedClassName = styles.containerWithContainedBody;\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          styles.container({ kind: resolveKind(kind) }),\n          containedClassName,\n          classes?.container,\n          className,\n        )}\n        role=\"table\"\n        aria-label={tableAriaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-scroll-mode={bodyScrollMode}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataTableRoot.displayName = 'DataTableRoot';\n\nexport const DataTableHeader = <Row,>({\n  columns,\n  kind,\n  density,\n  headerBehavior,\n  headerClassName,\n  gridTemplateClassName,\n  gridTemplateColumns,\n  classes,\n}: DataTableHeaderProps<Row>): JSX.Element => {\n  const resolvedKind = resolveKind(kind);\n  const inlineTemplateStyle = getInlineTemplateStyle({\n    columnCount: columns.length,\n    gridTemplateClassName,\n    gridTemplateColumns,\n  });\n  const gridRowClasses = getGridRowClasses({\n    density,\n    gridTemplateClassName,\n  });\n  let headerStyle: CSSProperties | undefined;\n  if (headerBehavior?.offsetTop != null) {\n    headerStyle = { top: headerBehavior.offsetTop };\n  }\n  let stickyHeaderClassName: string | null = null;\n  if (headerBehavior?.sticky === true) {\n    stickyHeaderClassName = styles.stickyHeader;\n  }\n\n  return (\n    <div\n      className={cx(\n        styles.header({ kind: resolvedKind }),\n        stickyHeaderClassName,\n        classes?.header,\n        headerClassName,\n      )}\n      style={headerStyle}\n      role=\"rowgroup\"\n    >\n      <div\n        className={cx(styles.headerRow, classes?.headerRow, ...gridRowClasses)}\n        role=\"row\"\n        style={inlineTemplateStyle}\n      >\n        {columns.map((column) => {\n          const headerClasses = [\n            styles.headerCell({ kind: resolvedKind }),\n            classes?.headerCell,\n          ];\n          const visibilityClass = getVisibilityClass(column.minVisibleAt);\n          if (visibilityClass != null) {\n            headerClasses.push(visibilityClass);\n          }\n\n          if (column.className != null) {\n            headerClasses.push(column.className);\n          }\n          if (column.isPrimary) {\n            headerClasses.push(\n              styles.primaryHeaderCell,\n              classes?.primaryHeaderCell,\n            );\n          }\n          if (column.align != null) {\n            headerClasses.push(styles.alignRecipe({ align: column.align }));\n          }\n\n          return (\n            <div\n              key={column.id}\n              role=\"columnheader\"\n              className={cx(...headerClasses)}\n            >\n              {column.header}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport const DataTableBody = forwardRef<HTMLDivElement, DataTableBodyProps>(\n  (\n    { children, className, kind, bodyScrollMode = 'page', classes },\n    ref,\n  ): JSX.Element => {\n    const hasContainedBodyScroll = bodyScrollMode === 'contained';\n    let containedClassName: string | null = null;\n    if (hasContainedBodyScroll) {\n      containedClassName = styles.bodyContained;\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          styles.body({ kind: resolveKind(kind) }),\n          containedClassName,\n          classes?.body,\n          className,\n        )}\n        role=\"rowgroup\"\n        data-scroll-mode={bodyScrollMode}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataTableBody.displayName = 'DataTableBody';\n\nexport const DataTableRow = <Row,>({\n  row,\n  index,\n  columns,\n  getRowId,\n  kind,\n  density,\n  rowClassName,\n  rowState,\n  gridTemplateClassName,\n  gridTemplateColumns,\n  classes,\n  style,\n  cellMode = 'normal',\n}: DataTableRowProps<Row>): JSX.Element => {\n  const resolvedKind = resolveKind(kind);\n  const inlineTemplateStyle = getInlineTemplateStyle({\n    columnCount: columns.length,\n    gridTemplateClassName,\n    gridTemplateColumns,\n  });\n  const rowClasses = [styles.row({ kind: resolvedKind }), classes?.row];\n  const state = rowState?.(row, index);\n  if (state != null) {\n    rowClasses.push(styles.rowStateRecipe({ state }));\n  }\n  if (index % 2 === 0) {\n    rowClasses.push(styles.rowEven({ kind: resolvedKind }), classes?.rowEven);\n  } else {\n    rowClasses.push(styles.rowOdd({ kind: resolvedKind }), classes?.rowOdd);\n  }\n  rowClasses.push(...getGridRowClasses({ density, gridTemplateClassName }));\n\n  const customClass = rowClassName?.(row, index);\n  if (customClass != null) {\n    rowClasses.push(customClass);\n  }\n\n  return (\n    <div\n      key={getRowId(row, index)}\n      role=\"row\"\n      className={cx(...rowClasses)}\n      style={{ ...inlineTemplateStyle, ...style }}\n    >\n      {columns.map((column) => {\n        const cellClasses = [\n          styles.cell({ kind: resolvedKind }),\n          classes?.cell,\n        ];\n        const visibilityClass = getVisibilityClass(column.minVisibleAt);\n\n        if (visibilityClass != null) {\n          cellClasses.push(visibilityClass);\n        }\n        if (cellMode === 'singleLine') {\n          cellClasses.push(styles.singleLineCell);\n        }\n        if (column.className != null) {\n          cellClasses.push(column.className);\n        }\n        if (column.isPrimary) {\n          cellClasses.push(styles.primaryCell, classes?.primaryCell);\n        }\n        if (column.align != null) {\n          cellClasses.push(styles.alignRecipe({ align: column.align }));\n        }\n\n        return (\n          <div key={column.id} role=\"cell\" className={cx(...cellClasses)}>\n            {column.cell(row)}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nexport const DataTableEmptyRow = ({\n  emptyState,\n  density,\n  classes,\n}: DataTableEmptyRowProps): JSX.Element => {\n  const { t } = useUiTranslation();\n  const resolvedEmptyState = emptyState ?? (\n    <div className={cx(styles.emptyCell, classes?.emptyCell)}>\n      {t('common.table.empty')}\n    </div>\n  );\n\n  return (\n    <div\n      className={cx(\n        styles.emptyRow,\n        styles.densityRecipe({ density: resolveDensity(density) }),\n        classes?.emptyRow,\n      )}\n      role=\"row\"\n    >\n      <div role=\"cell\">{resolvedEmptyState}</div>\n    </div>\n  );\n};\n\n/**\n * Generic responsive data table component.\n */\nexport const DataTable = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  emptyState,\n  className,\n  headerClassName,\n  bodyClassName,\n  rowClassName,\n  gridTemplateClassName,\n  gridTemplateColumns,\n  kind,\n  density,\n  headerBehavior,\n  bodyScrollMode = 'page',\n  rowState,\n  classes,\n  ariaLabel,\n  ariaLabelledBy,\n  bodyFooterNode,\n}: DataTableProps<Row>): JSX.Element => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = useDataTableContainerWidth(containerRef);\n  const visibleColumnEntries = useMemo(() => {\n    return getVisibleDataTableColumnEntries(columns, containerWidth);\n  }, [columns, containerWidth]);\n  const visibleColumns = useMemo(() => {\n    return visibleColumnEntries.map((entry) => {\n      return entry.column;\n    });\n  }, [visibleColumnEntries]);\n  const visibleGridTemplateColumns = useMemo(() => {\n    return getVisibleDataTableGridTemplateColumns({\n      columns,\n      gridTemplateColumns,\n      visibleColumnEntries,\n    });\n  }, [columns, gridTemplateColumns, visibleColumnEntries]);\n\n  let rowsContent: ReactNode;\n  if (rows.length === 0) {\n    rowsContent = (\n      <DataTableEmptyRow\n        emptyState={emptyState}\n        density={density}\n        classes={classes}\n      />\n    );\n  } else {\n    rowsContent = rows.map((row, index) => {\n      return (\n        <DataTableRow\n          key={getRowId(row, index)}\n          row={row}\n          index={index}\n          columns={visibleColumns}\n          getRowId={getRowId}\n          kind={kind}\n          density={density}\n          rowClassName={rowClassName}\n          rowState={rowState}\n          gridTemplateClassName={gridTemplateClassName}\n          gridTemplateColumns={visibleGridTemplateColumns}\n          classes={classes}\n        />\n      );\n    });\n  }\n\n  return (\n    <DataTableRoot\n      ref={containerRef}\n      className={className}\n      kind={kind}\n      bodyScrollMode={bodyScrollMode}\n      classes={classes}\n      ariaLabel={ariaLabel}\n      ariaLabelledBy={ariaLabelledBy}\n    >\n      <DataTableHeader\n        columns={visibleColumns}\n        kind={kind}\n        density={density}\n        headerBehavior={headerBehavior}\n        headerClassName={headerClassName}\n        gridTemplateClassName={gridTemplateClassName}\n        gridTemplateColumns={visibleGridTemplateColumns}\n        classes={classes}\n      />\n      <DataTableBody\n        className={bodyClassName}\n        kind={kind}\n        bodyScrollMode={bodyScrollMode}\n        classes={classes}\n      >\n        {rowsContent}\n        {bodyFooterNode}\n      </DataTableBody>\n    </DataTableRoot>\n  );\n};\n"],"mappings":"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"}