@plumile/ui 0.1.120 → 0.1.125

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

@@ -3,22 +3,22 @@
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/components/data-table/DataTable.css.ts
 var t = e({
-	defaultClassName: "ysn8463 ysn8460 txvbqb9ip txvbqbai7 txvbqbu7g txvbqb1k",
+	defaultClassName: "ysn8463 ysn8460 txvbqbdr8 txvbqbf6i txvbqb17w0 txvbqb1k",
 	variantClassNames: { kind: {
-		default: "ysn8464 ysn8461 txvbqbv41 txvbqbwg txvbqb1rp txvbqb1qg txvbqb1cp txvbqbl9g txvbqbl8y",
-		brandTable: "ysn8465 ysn8462 txvbqbv0t txvbqb1qp txvbqb1py txvbqb12g txvbqbl7y"
+		default: "ysn8464 ysn8461 txvbqb196b txvbqb17h txvbqb2gm txvbqb2et txvbqb1uy txvbqbuvn txvbqbuux",
+		brandTable: "ysn8465 ysn8462 txvbqb1933 txvbqb2f6 txvbqb2e3 txvbqb1g5 txvbqbuth"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), n = "ysn8466 txvbqbcgg txvbqbjh7 txvbqbl7g", r = e({
+}), n = "ysn8466 txvbqbi1f txvbqbs9r txvbqbusr", r = e({
 	defaultClassName: "ysn8469",
 	variantClassNames: { kind: {
-		default: "ysn846a ysn8467 txvbqb12g txvbqb1qg txvbqb62p txvbqb3ny txvbqbv45",
-		brandTable: "ysn846b ysn8468 txvbqbv0t txvbqb12g txvbqb1qg txvbqb62p txvbqb3s7"
+		default: "ysn846a ysn8467 txvbqb1g5 txvbqb2et txvbqb8oi txvbqb577 txvbqb196f",
+		brandTable: "ysn846b ysn8468 txvbqb1933 txvbqb1g5 txvbqb2et txvbqb8oi txvbqb5dc"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), i = "ysn846c txvbqb9iy txvbqbu7g txvbqbc7", a = "var(--ysn846d)", o = "var(--ysn846e)", s = "var(--ysn846f)", c = "var(--ysn846g)", l = e({
+}), i = "ysn846c txvbqbdrl txvbqb17w0 txvbqbe8", a = "var(--ysn846d)", o = "var(--ysn846e)", s = "var(--ysn846f)", c = "var(--ysn846g)", l = e({
 	defaultClassName: "ysn846h",
 	variantClassNames: { density: {
 		compact: "ysn846i",
@@ -28,59 +28,59 @@ var t = e({
 	defaultVariants: { density: "default" },
 	compoundVariants: []
 }), u = e({
-	defaultClassName: "ysn846p ysn846l txvbqbcp txvbqb9ip txvbqbaj7 txvbqbao7 txvbqbl7g txvbqbt7g txvbqbuxg",
+	defaultClassName: "ysn846p ysn846l txvbqbey txvbqbdr8 txvbqbf7y txvbqbff6 txvbqbusr txvbqb16g0 txvbqb18xk",
 	variantClassNames: { kind: {
-		default: "ysn846q ysn846n ysn846m txvbqbva1 txvbqbamp txvbqbefy txvbqb66",
-		brandTable: "ysn846r ysn846o txvbqbnvg txvbqboip txvbqbp6y txvbqblyp txvbqbv8z txvbqbamy txvbqb8p txvbqbefg txvbqb66 txvbqb54y"
+		default: "ysn846q ysn846n ysn846m txvbqb19cb txvbqbfd0 txvbqbky5 txvbqb6a",
+		brandTable: "ysn846r ysn846o txvbqbynf txvbqbzl0 txvbqb10k1 txvbqbvw4 txvbqb19b9 txvbqbfdd txvbqb96 txvbqbkxf txvbqb6a txvbqb7br"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
 }), d = e({
-	defaultClassName: "ysn846u ysn846s txvbqb9ip txvbqbai7",
+	defaultClassName: "ysn846u ysn846s txvbqbdr8 txvbqbf6i",
 	variantClassNames: { kind: {
 		default: "ysn846v",
-		brandTable: "ysn846w ysn846t txvbqbv0t"
+		brandTable: "ysn846w ysn846t txvbqb1933"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), f = "ysn846y ysn846x txvbqb9my txvbqbjh7", p = e({
-	defaultClassName: "ysn84614 ysn846z txvbqbc7 txvbqb1qg txvbqb12g txvbqb9iy txvbqb78 txvbqb6x txvbqb7k",
+}), f = "ysn846y ysn846x txvbqbdxd txvbqbs9r", p = e({
+	defaultClassName: "ysn84614 ysn846z txvbqbe8 txvbqb2et txvbqb1g5 txvbqbdrl txvbqb7h txvbqb76 txvbqb7t",
 	variantClassNames: { kind: {
-		default: "ysn84615 ysn84611 ysn84610 txvbqbv41 txvbqb3og txvbqb62p",
-		brandTable: "ysn84616 ysn84613 ysn84612 txvbqbv0t txvbqb3s7 txvbqb62p"
+		default: "ysn84615 ysn84611 ysn84610 txvbqb196b txvbqb57x txvbqb8oi",
+		brandTable: "ysn84616 ysn84613 ysn84612 txvbqb1933 txvbqb5dc txvbqb8oi"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
 }), m = e({
 	defaultClassName: "ysn84619",
 	variantClassNames: { kind: {
-		default: "ysn8461a ysn84617 txvbqbv43",
-		brandTable: "ysn8461b ysn84618 txvbqbv0t"
+		default: "ysn8461a ysn84617 txvbqb196d",
+		brandTable: "ysn8461b ysn84618 txvbqb1933"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
 }), h = e({
 	defaultClassName: "ysn8461e",
 	variantClassNames: { kind: {
-		default: "ysn8461f ysn8461c txvbqbv41",
-		brandTable: "ysn8461g ysn8461d txvbqbv0t"
+		default: "ysn8461f ysn8461c txvbqb196b",
+		brandTable: "ysn8461g ysn8461d txvbqb1933"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
 }), g = e({
-	defaultClassName: "ysn8461l ysn8461h txvbqbcp txvbqb9ip txvbqbao7 txvbqbk5y txvbqbl7g",
+	defaultClassName: "ysn8461l ysn8461h txvbqbey txvbqbdr8 txvbqbff6 txvbqbt9i txvbqbusr",
 	variantClassNames: { kind: {
-		default: "ysn8461m ysn8461j ysn8461i txvbqbva1",
-		brandTable: "ysn8461n ysn8461k txvbqbnvg txvbqboip txvbqbp6y txvbqblyp txvbqbv9z txvbqbamp txvbqb8y txvbqb54y"
+		default: "ysn8461m ysn8461j ysn8461i txvbqb19cb",
+		brandTable: "ysn8461n ysn8461k txvbqbynf txvbqbzl0 txvbqb10k1 txvbqbvw4 txvbqb19c9 txvbqbfd0 txvbqb9j txvbqb7br"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), _ = "ysn8461o txvbqbamp txvbqbv9z", v = "ysn8461p txvbqbv9z", y = "ysn8461q", b = e({
+}), _ = "ysn8461o txvbqbfd0 txvbqb19c9", v = "ysn8461p txvbqb19c9", y = "ysn8461q", b = e({
 	defaultClassName: "ysn8461u",
 	variantClassNames: { align: {
-		left: "ysn8461v ysn8461r txvbqbdpg txvbqbt6p",
-		center: "ysn8461w ysn8461s txvbqbdoy txvbqbt6y",
-		right: "ysn8461x ysn8461t txvbqbdp7 txvbqbt77"
+		left: "ysn8461v ysn8461r txvbqbjuf txvbqb16ex",
+		center: "ysn8461w ysn8461s txvbqbjtp txvbqb16fa",
+		right: "ysn8461x ysn8461t txvbqbju2 txvbqb16fn"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
@@ -94,7 +94,7 @@ var t = e({
 	} },
 	defaultVariants: {},
 	compoundVariants: []
-}), S = "ysn84623", C = "ysn84624 txvbqb97 txvbqbva1 txvbqbt6y", w = e({
+}), S = "ysn84623", C = "ysn84624 txvbqb9w txvbqb19cb txvbqb16fa", w = e({
 	defaultClassName: "ysn84625",
 	variantClassNames: { minVisibleAt: {
 		sm: "ysn84626",

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  createVar,\n  fallbackVar,\n  style,\n  type StyleRule,\n} from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { vars } from '../../theme/themeContract.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: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    width: 'full',\n    containerType: 'inline-size',\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: sprinkles({\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'borderSubtle',\n        backgroundColor: 'surfaceMuted',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'brandSecondaryOrange-20',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const headerRow = sprinkles({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'stretch',\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: 'black-300',\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: sprinkles({\n    alignItems: 'stretch',\n    borderStyle: 'solid',\n    borderWidth: 0,\n    display: 'grid',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\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.surfaceMuted,\n            },\n          },\n        },\n      ]),\n      brandTable: style([\n        sprinkles({\n          backgroundColor: 'transparent',\n          borderBottomColor: 'brandSecondaryOrange-20',\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 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.primaryLight,\n      },\n      muted: {\n        opacity: 0.72,\n      },\n      danger: {\n        backgroundColor: vars.colors['red-50'],\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.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: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    width: 'full',\n    containerType: 'inline-size',\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: sprinkles({\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'borderSubtle',\n        backgroundColor: 'surfaceMuted',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'brandSecondaryOrange-20',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const headerRow = sprinkles({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'stretch',\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: 'black-300',\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: sprinkles({\n    alignItems: 'stretch',\n    borderStyle: 'solid',\n    borderWidth: 0,\n    display: 'grid',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\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.surfaceMuted,\n            },\n          },\n        },\n      ]),\n      brandTable: style([\n        sprinkles({\n          backgroundColor: 'transparent',\n          borderBottomColor: 'brandSecondaryOrange-20',\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 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.primaryLight,\n      },\n      muted: {\n        opacity: 0.72,\n      },\n      danger: {\n        backgroundColor: vars.colors['red-50'],\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":""}

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

@@ -1,47 +1,48 @@
 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, emptyCell as l, emptyRow as u, header as d, headerCell as f, headerRow as p, hideBelowRecipe as m, primaryCell as h, primaryHeaderCell as g, row as ee, rowEven as _, rowOdd as v, rowStateRecipe as y, stickyHeader as b } from "./DataTable.css.js";
-import { Fragment as te, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { alignRecipe as n, body as r, bodyContained as i, cell as a, container as o, containerWithContainedBody as s, densityRecipe as ee, emptyCell as te, emptyRow as ne, header as re, headerCell as c, headerRow as l, hideBelowRecipe as u, primaryCell as d, primaryHeaderCell as f, row as p, rowEven as m, rowOdd as h, rowStateRecipe as g, stickyHeader as _ } from "./DataTable.css.js";
+import { buildDataTableInlineTemplate as v } from "../../internal/data-table/layout.js";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/components/data-table/DataTable.tsx
-var C = "minmax(0, 1fr)", w = (e) => e == null ? null : m({ minVisibleAt: e }), T = (e, t) => typeof t == "string" && t !== "" ? { gridTemplateColumns: t } : { gridTemplateColumns: `repeat(${e}, ${C})` }, E = ({ columns: m, rows: C, getRowId: E, emptyState: D, className: ne, headerClassName: re, bodyClassName: ie, rowClassName: O, gridTemplateClassName: k, gridTemplateColumns: A, kind: j, density: M, headerBehavior: N, bodyScrollMode: P = "page", rowState: F, classes: I, ariaLabel: L, ariaLabelledBy: R, bodyFooterNode: z }) => {
+var S = (e) => e == null ? null : u({ minVisibleAt: e }), C = ({ columns: u, rows: C, getRowId: ie, emptyState: w, className: T, headerClassName: E, bodyClassName: D, rowClassName: O, gridTemplateClassName: k, gridTemplateColumns: A, kind: j, density: M, headerBehavior: N, bodyScrollMode: P = "page", rowState: F, classes: I, ariaLabel: L, ariaLabelledBy: R, bodyFooterNode: z }) => {
 	let { t: B } = t(), V = j ?? "default", H = L ?? B("common.table.label");
 	R != null && (H = void 0);
-	let U = /* @__PURE__ */ x("div", {
-		className: e(l, I?.emptyCell),
+	let U = /* @__PURE__ */ b("div", {
+		className: e(te, I?.emptyCell),
 		children: B("common.table.empty")
-	}), W = D ?? U, G = C.length === 0, K = P === "contained", q;
-	k ?? (q = T(m.length, A));
+	}), W = w ?? U, G = C.length === 0, K = P === "contained", q;
+	k ?? (q = v(u.length, A));
 	let J = null;
-	N?.sticky === !0 && (J = b);
+	N?.sticky === !0 && (J = _);
 	let Y;
 	N?.offsetTop != null && (Y = { top: N.offsetTop });
-	let X = [c({ density: M ?? "default" })];
+	let X = [ee({ density: M ?? "default" })];
 	k != null && X.push(k);
 	let Z;
-	Z = G ? /* @__PURE__ */ x("div", {
-		className: e(u, I?.emptyRow),
+	Z = G ? /* @__PURE__ */ b("div", {
+		className: e(ne, I?.emptyRow),
 		role: "row",
-		children: /* @__PURE__ */ x("div", {
+		children: /* @__PURE__ */ b("div", {
 			role: "cell",
 			children: W
 		})
-	}) : /* @__PURE__ */ x(te, { children: C.map((t, r) => {
-		let i = E(t, r), o = [ee({ kind: V }), I?.row], s = F?.(t, r);
-		s != null && o.push(y({ state: s })), r % 2 == 0 ? o.push(_({ kind: V }), I?.rowEven) : o.push(v({ kind: V }), I?.rowOdd);
+	}) : /* @__PURE__ */ b(y, { children: C.map((t, r) => {
+		let i = ie(t, r), o = [p({ kind: V }), I?.row], s = F?.(t, r);
+		s != null && o.push(g({ state: s })), r % 2 == 0 ? o.push(m({ kind: V }), I?.rowEven) : o.push(h({ kind: V }), I?.rowOdd);
 		for (let e of X) o.push(e);
 		if (O != null) {
 			let e = O(t, r);
 			e != null && o.push(e);
 		}
-		return /* @__PURE__ */ x("div", {
+		return /* @__PURE__ */ b("div", {
 			role: "row",
 			className: e(...o),
 			style: q,
-			children: m.map((r) => {
-				let i = [a({ kind: V }), I?.cell], o = w(r.minVisibleAt);
-				o != null && i.push(o), r.className != null && i.push(r.className), r.isPrimary && i.push(h, I?.primaryCell), r.align != null && i.push(n({ align: r.align }));
+			children: u.map((r) => {
+				let i = [a({ kind: V }), I?.cell], o = S(r.minVisibleAt);
+				o != null && i.push(o), r.className != null && i.push(r.className), r.isPrimary && i.push(d, I?.primaryCell), r.align != null && i.push(n({ align: r.align }));
 				let s = r.cell(t);
-				return /* @__PURE__ */ x("div", {
+				return /* @__PURE__ */ b("div", {
 					role: "cell",
 					className: e(...i),
 					children: s
@@ -50,41 +51,38 @@ var C = "minmax(0, 1fr)", w = (e) => e == null ? null : m({ minVisibleAt: e }),
 		}, i);
 	}) });
 	let Q = null, $ = null;
-	return K && (Q = s, $ = i), /* @__PURE__ */ S("div", {
-		className: e(o({ kind: V }), Q, I?.container, ne),
+	return K && (Q = s, $ = i), /* @__PURE__ */ x("div", {
+		className: e(o({ kind: V }), Q, I?.container, T),
 		role: "table",
 		"aria-label": H,
 		"aria-labelledby": R,
 		"data-scroll-mode": P,
-		children: [/* @__PURE__ */ x("div", {
-			className: e(d({ kind: V }), J, I?.header, re),
+		children: [/* @__PURE__ */ b("div", {
+			className: e(re({ kind: V }), J, I?.header, E),
 			style: Y,
 			role: "rowgroup",
-			children: /* @__PURE__ */ x("div", {
-				className: e(p, I?.headerRow, ...X),
+			children: /* @__PURE__ */ b("div", {
+				className: e(l, I?.headerRow, ...X),
 				role: "row",
 				style: q,
-				children: m.map((t) => {
-					let r = [f({ kind: V }), I?.headerCell], i = w(t.minVisibleAt);
-					return i != null && r.push(i), t.className != null && r.push(t.className), t.isPrimary && r.push(g, I?.primaryHeaderCell), t.align != null && r.push(n({ align: t.align })), /* @__PURE__ */ x("div", {
+				children: u.map((t) => {
+					let r = [c({ kind: V }), I?.headerCell], i = S(t.minVisibleAt);
+					return i != null && r.push(i), t.className != null && r.push(t.className), t.isPrimary && r.push(f, I?.primaryHeaderCell), t.align != null && r.push(n({ align: t.align })), /* @__PURE__ */ b("div", {
 						role: "columnheader",
 						className: e(...r),
 						children: t.header
 					}, t.id);
 				})
 			})
-		}), /* @__PURE__ */ S("div", {
-			className: e(r({ kind: V }), $, I?.body, ie),
+		}), /* @__PURE__ */ x("div", {
+			className: e(r({ kind: V }), $, I?.body, D),
 			role: "rowgroup",
 			"data-scroll-mode": P,
 			children: [Z, z]
 		})]
 	});
-}, D = {
-	getVisibilityClass: w,
-	buildInlineTemplate: T
 };
 //#endregion
-export { E as DataTable, D as __test };
+export { C as DataTable };
 
 //# 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 { type CSSProperties, type JSX, type ReactNode } from 'react';\n\nimport * as styles from './DataTable.css.js';\nimport type { DataTableBreakpoint } from './tableBreakpoints.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\nimport type { SlotClasses } from '../../styles/slots.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\ntype 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 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 DEFAULT_TEMPLATE_CELL = 'minmax(0, 1fr)';\n\nconst getVisibilityClass = (minVisibleAt?: DataTableBreakpoint) => {\n  if (minVisibleAt == null) {\n    return null;\n  }\n\n  return styles.hideBelowRecipe({ minVisibleAt });\n};\n\nconst buildInlineTemplate = (\n  columnCount: number,\n  gridTemplateColumns?: string,\n): CSSProperties => {\n  if (typeof gridTemplateColumns === 'string' && gridTemplateColumns !== '') {\n    return { gridTemplateColumns };\n  }\n  return {\n    gridTemplateColumns: `repeat(${columnCount}, ${DEFAULT_TEMPLATE_CELL})`,\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 { t } = useUiTranslation();\n  const resolvedKind: DataTableKind = kind ?? 'default';\n  const resolvedAriaLabel = ariaLabel ?? t('common.table.label');\n  let tableAriaLabel: string | undefined = resolvedAriaLabel;\n  if (ariaLabelledBy != null) {\n    tableAriaLabel = undefined;\n  }\n  const defaultEmptyState = (\n    <div className={cx(styles.emptyCell, classes?.emptyCell)}>\n      {t('common.table.empty')}\n    </div>\n  ) as JSX.Element;\n  const resolvedEmptyState = emptyState ?? defaultEmptyState;\n  const showEmpty = rows.length === 0;\n  const hasContainedBodyScroll = bodyScrollMode === 'contained';\n\n  let inlineTemplateStyle: CSSProperties | undefined;\n  if (gridTemplateClassName == null) {\n    inlineTemplateStyle = buildInlineTemplate(\n      columns.length,\n      gridTemplateColumns,\n    );\n  }\n  let headerStickyClass: string | null = null;\n  if (headerBehavior?.sticky === true) {\n    headerStickyClass = styles.stickyHeader;\n  }\n  let headerStyle: CSSProperties | undefined;\n  if (headerBehavior?.offsetTop != null) {\n    headerStyle = { top: headerBehavior.offsetTop };\n  }\n\n  const resolvedDensity: DataTableDensity = density ?? 'default';\n  const sharedRowClasses: string[] = [\n    styles.densityRecipe({ density: resolvedDensity }),\n  ];\n  if (gridTemplateClassName != null) {\n    sharedRowClasses.push(gridTemplateClassName);\n  }\n\n  let rowsContent: JSX.Element;\n  if (showEmpty) {\n    rowsContent = (\n      <div className={cx(styles.emptyRow, classes?.emptyRow)} role=\"row\">\n        <div role=\"cell\">{resolvedEmptyState}</div>\n      </div>\n    );\n  } else {\n    rowsContent = (\n      <>\n        {rows.map((row, index) => {\n          const rowId = getRowId(row, index);\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(\n              styles.rowEven({ kind: resolvedKind }),\n              classes?.rowEven,\n            );\n          } else {\n            rowClasses.push(\n              styles.rowOdd({ kind: resolvedKind }),\n              classes?.rowOdd,\n            );\n          }\n          for (const sharedClass of sharedRowClasses) {\n            rowClasses.push(sharedClass);\n          }\n\n          if (rowClassName != null) {\n            const customClass = rowClassName(row, index);\n            if (customClass != null) {\n              rowClasses.push(customClass);\n            }\n          }\n\n          return (\n            <div\n              key={rowId}\n              role=\"row\"\n              className={cx(...rowClasses)}\n              style={inlineTemplateStyle}\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\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                const content = column.cell(row);\n\n                return (\n                  <div\n                    key={column.id}\n                    role=\"cell\"\n                    className={cx(...cellClasses)}\n                  >\n                    {content}\n                  </div>\n                );\n              })}\n            </div>\n          );\n        })}\n      </>\n    );\n  }\n\n  let containedContainerClassName: string | null = null;\n  let containedBodyClassName: string | null = null;\n  if (hasContainedBodyScroll) {\n    containedContainerClassName = styles.containerWithContainedBody;\n    containedBodyClassName = styles.bodyContained;\n  }\n\n  return (\n    <div\n      className={cx(\n        styles.container({ kind: resolvedKind }),\n        containedContainerClassName,\n        classes?.container,\n        className,\n      )}\n      role=\"table\"\n      aria-label={tableAriaLabel}\n      aria-labelledby={ariaLabelledBy}\n      data-scroll-mode={bodyScrollMode}\n    >\n      <div\n        className={cx(\n          styles.header({ kind: resolvedKind }),\n          headerStickyClass,\n          classes?.header,\n          headerClassName,\n        )}\n        style={headerStyle}\n        role=\"rowgroup\"\n      >\n        <div\n          className={cx(\n            styles.headerRow,\n            classes?.headerRow,\n            ...sharedRowClasses,\n          )}\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      <div\n        className={cx(\n          styles.body({ kind: resolvedKind }),\n          containedBodyClassName,\n          classes?.body,\n          bodyClassName,\n        )}\n        role=\"rowgroup\"\n        data-scroll-mode={bodyScrollMode}\n      >\n        {rowsContent}\n        {bodyFooterNode}\n      </div>\n    </div>\n  );\n};\n\nexport const __test = {\n  getVisibilityClass,\n  buildInlineTemplate,\n} as const;\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { type CSSProperties, type JSX, type ReactNode } 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 { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\nimport type { SlotClasses } from '../../styles/slots.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\ntype 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 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 getVisibilityClass = (minVisibleAt?: DataTableBreakpoint) => {\n  if (minVisibleAt == null) {\n    return null;\n  }\n\n  return styles.hideBelowRecipe({ minVisibleAt });\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 { t } = useUiTranslation();\n  const resolvedKind: DataTableKind = kind ?? 'default';\n  const resolvedAriaLabel = ariaLabel ?? t('common.table.label');\n  let tableAriaLabel: string | undefined = resolvedAriaLabel;\n  if (ariaLabelledBy != null) {\n    tableAriaLabel = undefined;\n  }\n  const defaultEmptyState = (\n    <div className={cx(styles.emptyCell, classes?.emptyCell)}>\n      {t('common.table.empty')}\n    </div>\n  ) as JSX.Element;\n  const resolvedEmptyState = emptyState ?? defaultEmptyState;\n  const showEmpty = rows.length === 0;\n  const hasContainedBodyScroll = bodyScrollMode === 'contained';\n\n  let inlineTemplateStyle: CSSProperties | undefined;\n  if (gridTemplateClassName == null) {\n    inlineTemplateStyle = buildDataTableInlineTemplate(\n      columns.length,\n      gridTemplateColumns,\n    );\n  }\n  let headerStickyClass: string | null = null;\n  if (headerBehavior?.sticky === true) {\n    headerStickyClass = styles.stickyHeader;\n  }\n  let headerStyle: CSSProperties | undefined;\n  if (headerBehavior?.offsetTop != null) {\n    headerStyle = { top: headerBehavior.offsetTop };\n  }\n\n  const resolvedDensity: DataTableDensity = density ?? 'default';\n  const sharedRowClasses: string[] = [\n    styles.densityRecipe({ density: resolvedDensity }),\n  ];\n  if (gridTemplateClassName != null) {\n    sharedRowClasses.push(gridTemplateClassName);\n  }\n\n  let rowsContent: JSX.Element;\n  if (showEmpty) {\n    rowsContent = (\n      <div className={cx(styles.emptyRow, classes?.emptyRow)} role=\"row\">\n        <div role=\"cell\">{resolvedEmptyState}</div>\n      </div>\n    );\n  } else {\n    rowsContent = (\n      <>\n        {rows.map((row, index) => {\n          const rowId = getRowId(row, index);\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(\n              styles.rowEven({ kind: resolvedKind }),\n              classes?.rowEven,\n            );\n          } else {\n            rowClasses.push(\n              styles.rowOdd({ kind: resolvedKind }),\n              classes?.rowOdd,\n            );\n          }\n          for (const sharedClass of sharedRowClasses) {\n            rowClasses.push(sharedClass);\n          }\n\n          if (rowClassName != null) {\n            const customClass = rowClassName(row, index);\n            if (customClass != null) {\n              rowClasses.push(customClass);\n            }\n          }\n\n          return (\n            <div\n              key={rowId}\n              role=\"row\"\n              className={cx(...rowClasses)}\n              style={inlineTemplateStyle}\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\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                const content = column.cell(row);\n\n                return (\n                  <div\n                    key={column.id}\n                    role=\"cell\"\n                    className={cx(...cellClasses)}\n                  >\n                    {content}\n                  </div>\n                );\n              })}\n            </div>\n          );\n        })}\n      </>\n    );\n  }\n\n  let containedContainerClassName: string | null = null;\n  let containedBodyClassName: string | null = null;\n  if (hasContainedBodyScroll) {\n    containedContainerClassName = styles.containerWithContainedBody;\n    containedBodyClassName = styles.bodyContained;\n  }\n\n  return (\n    <div\n      className={cx(\n        styles.container({ kind: resolvedKind }),\n        containedContainerClassName,\n        classes?.container,\n        className,\n      )}\n      role=\"table\"\n      aria-label={tableAriaLabel}\n      aria-labelledby={ariaLabelledBy}\n      data-scroll-mode={bodyScrollMode}\n    >\n      <div\n        className={cx(\n          styles.header({ kind: resolvedKind }),\n          headerStickyClass,\n          classes?.header,\n          headerClassName,\n        )}\n        style={headerStyle}\n        role=\"rowgroup\"\n      >\n        <div\n          className={cx(\n            styles.headerRow,\n            classes?.headerRow,\n            ...sharedRowClasses,\n          )}\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      <div\n        className={cx(\n          styles.body({ kind: resolvedKind }),\n          containedBodyClassName,\n          classes?.body,\n          bodyClassName,\n        )}\n        role=\"rowgroup\"\n        data-scroll-mode={bodyScrollMode}\n      >\n        {rowsContent}\n        {bodyFooterNode}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -9,16 +9,16 @@
 /* empty css                                    */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/components/data-table/ResponsiveRecordList.css.ts
-var t = "r17fa50", n = "r17fa52 r17fa51 txvbqb9hy", r = "r17fa53 txvbqb9ip txvbqbai7 txvbqbcgg txvbqbjh7", i = "r17fa55 r17fa54 txvbqb9my txvbqbjh7 txvbqbu7g", a = "r17fa56 txvbqb9hy", o = "r17fa57 txvbqb9ip txvbqbai7 txvbqbao7 txvbqbu7g", s = e({
-	defaultClassName: "r17fa5d r17fa59 r17fa58 txvbqb9ip txvbqbai7 txvbqbaog txvbqbk5y _1995g4r1 _1995g4r0 _1995g4r2 _1995g4ra _1995g4rd _1995g4rh _1995g4rl",
+var t = "r17fa50", n = "r17fa52 r17fa51 txvbqbdq5", r = "r17fa53 txvbqbdr8 txvbqbf6i txvbqbi1f txvbqbs9r", i = "r17fa55 r17fa54 txvbqbdxd txvbqbs9r txvbqb17w0", a = "r17fa56 txvbqbdq5", o = "r17fa57 txvbqbdr8 txvbqbf6i txvbqbff6 txvbqb17w0", s = e({
+	defaultClassName: "r17fa5d r17fa59 r17fa58 txvbqbdr8 txvbqbf6i txvbqbffj txvbqbt9i _1995g4r1 _1995g4r0 _1995g4r2 _1995g4ra _1995g4rd _1995g4rh _1995g4rl",
 	variantClassNames: { density: {
-		compact: "r17fa5e r17fa5a txvbqbao7 txvbqblb7",
-		default: "r17fa5f r17fa5b txvbqbaog txvbqblbg",
-		comfortable: "r17fa5g r17fa5c txvbqbaog txvbqblbg"
+		compact: "r17fa5e r17fa5a txvbqbff6 txvbqbuy6",
+		default: "r17fa5f r17fa5b txvbqbffj txvbqbuyj",
+		comfortable: "r17fa5g r17fa5c txvbqbffj txvbqbuyj"
 	} },
 	defaultVariants: { density: "compact" },
 	compoundVariants: []
-}), c = "r17fa5h txvbqbcg txvbqb9ip txvbqbaog txvbqbdpp txvbqbk5y", l = "r17fa5i txvbqb9ip txvbqbai7 txvbqbany txvbqbk5y", u = "r17fa5j txvbqbv9z txvbqb8y txvbqbamp txvbqbfap txvbqbk5y txvbqbl87", d = "r17fa5k txvbqbva1 txvbqb8p txvbqbfap txvbqbk5y txvbqbl87", f = "r17fa5l txvbqb9iy txvbqbao7 txvbqbbtp txvbqbbth", p = "r17fa5m txvbqb9ip txvbqbai7 txvbqbb9g txvbqbk5y", m = "r17fa5n txvbqbva3 txvbqb8p txvbqbamp txvbqbefg txvbqb66", h = "r17fa5o txvbqbv9z txvbqb8y txvbqbk5y txvbqbl87", g = "r17fa5p txvbqbcp txvbqb9ip txvbqbajy txvbqbao7", _ = "r17fa5q txvbqbcp txvbqb9ip txvbqbaj7 txvbqbdp7";
+}), c = "r17fa5h txvbqbel txvbqbdr8 txvbqbffj txvbqbjus txvbqbt9i", l = "r17fa5i txvbqbdr8 txvbqbf6i txvbqbfet txvbqbt9i", u = "r17fa5j txvbqb19c9 txvbqb9j txvbqbfd0 txvbqbm6k txvbqbt9i txvbqbutu", d = "r17fa5k txvbqb19cb txvbqb96 txvbqbm6k txvbqbt9i txvbqbutu", f = "r17fa5l txvbqbdrl txvbqbff6 txvbqbh34 txvbqbh2s", p = "r17fa5m txvbqbdr8 txvbqbf6i txvbqbg9v txvbqbt9i", m = "r17fa5n txvbqb19cd txvbqb96 txvbqbfd0 txvbqbkxf txvbqb6a", h = "r17fa5o txvbqb19c9 txvbqb9j txvbqbt9i txvbqbutu", g = "r17fa5p txvbqbey txvbqbdr8 txvbqbf91 txvbqbff6", _ = "r17fa5q txvbqbey txvbqbdr8 txvbqbf7y txvbqbju2";
 //#endregion
 export { s as card, _ as cardActions, g as cardBadges, c as cardHeader, f as cardMetaGrid, p as cardMetaItem, m as cardMetaLabel, h as cardMetaValue, d as cardSubtitle, u as cardTitle, l as cardTitleGroup, o as cards, n as cardsOnly, i as cardsViewport, r as containedRoot, a as forceHidden, t as tableOnly };
 

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

@@ -2,7 +2,7 @@
 /* empty css                         */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/components/data-table/TableCell.css.ts
-var t = "x6ceqz0 txvbqbu7g txvbqb9ip txvbqbcp txvbqbao7 txvbqbv9z", n = e({
+var t = "x6ceqz0 txvbqb17w0 txvbqbdr8 txvbqbey txvbqbff6 txvbqb19c9", n = e({
 	defaultClassName: "x6ceqz1",
 	variantClassNames: { align: {
 		start: "x6ceqz2",
@@ -11,7 +11,7 @@ var t = "x6ceqz0 txvbqbu7g txvbqb9ip txvbqbcp txvbqbao7 txvbqbv9z", n = e({
 	} },
 	defaultVariants: { align: "start" },
 	compoundVariants: []
-}), r = "x6ceqz5 txvbqbv9z", i = "x6ceqz6 txvbqbv9z txvbqbuxg", a = "x6ceqz7 txvbqbv9z txvbqbuxg", o = "x6ceqz8 txvbqbva1 txvbqb8p", s = "x6ceqz9 txvbqbl7g txvbqbt7g txvbqbuxg", c = "x6ceqza txvbqbuy7";
+}), r = "x6ceqz5 txvbqb19c9", i = "x6ceqz6 txvbqb19c9 txvbqb18xk", a = "x6ceqz7 txvbqb19c9 txvbqb18xk", o = "x6ceqz8 txvbqb19cb txvbqb96", s = "x6ceqz9 txvbqbusr txvbqb16g0 txvbqb18xk", c = "x6ceqza txvbqb18yn";
 //#endregion
 export { n as alignRecipe, t as base, a as date, s as ellipsis, o as muted, i as number, c as summary, r as text };
 

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

@@ -1,7 +1,7 @@
 /* empty css                                   */
 /* empty css                                          */
 //#region src/components/data-table/VirtualizedConnectionTable.css.ts
-var e = "_1ifyzte0 txvbqbuxg txvbqbl7g txvbqbt7g txvbqbk5y", t = "_1ifyzte1 txvbqbptg", n = "_1ifyzte2 txvbqbu7g", r = "_1ifyzte3 txvbqbu7g txvbqbc5g";
+var e = "_1ifyzte0 txvbqb18xk txvbqbusr txvbqb16g0 txvbqbt9i", t = "_1ifyzte1 txvbqb11js", n = "_1ifyzte2 txvbqb17w0", r = "_1ifyzte3 txvbqb17w0 txvbqbhlj";
 //#endregion
 export { t as bodyViewport, r as sentinel, e as singleLineCell, n as spacer };