@plumile/ui 0.1.134 → 0.1.142

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

@@ -75,38 +75,38 @@ var t = e({
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), _ = "ysn8461p txvbqbfd0 txvbqb19c9", v = "ysn8461q txvbqb19c9", y = "ysn8461r", b = e({
-	defaultClassName: "ysn8461v",
+}), _ = "ysn8461p txvbqbfd0 txvbqb19c9", v = "ysn8461q txvbqb19c9", y = "ysn8461r txvbqb18xk txvbqbusr txvbqb16g0 txvbqbt9i", b = "ysn8461s", x = e({
+	defaultClassName: "ysn8461w",
 	variantClassNames: { align: {
-		left: "ysn8461w ysn8461s txvbqbjuf txvbqb16ex",
-		center: "ysn8461x ysn8461t txvbqbjtp txvbqb16fa",
-		right: "ysn8461y ysn8461u txvbqbju2 txvbqb16fn"
+		left: "ysn8461x ysn8461t txvbqbjuf txvbqb16ex",
+		center: "ysn8461y ysn8461u txvbqbjtp txvbqb16fa",
+		right: "ysn8461z ysn8461v txvbqbju2 txvbqb16fn"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
-}), x = e({
-	defaultClassName: "ysn8461z",
+}), S = e({
+	defaultClassName: "ysn84620",
 	variantClassNames: { state: {
-		default: "ysn84620",
-		selected: "ysn84621",
-		muted: "ysn84622",
-		danger: "ysn84623"
+		default: "ysn84621",
+		selected: "ysn84622",
+		muted: "ysn84623",
+		danger: "ysn84624"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
-}), S = "ysn84624", C = "ysn84625 txvbqb9w txvbqb19cb txvbqb16fa", w = e({
-	defaultClassName: "ysn84626",
+}), C = "ysn84625", w = "ysn84626 txvbqb9w txvbqb19cb txvbqb16fa", T = e({
+	defaultClassName: "ysn84627",
 	variantClassNames: { minVisibleAt: {
-		sm: "ysn84627",
-		md: "ysn84628",
-		lg: "ysn84629",
-		xl: "ysn8462a",
-		xxl: "ysn8462b"
+		sm: "ysn84628",
+		md: "ysn84629",
+		lg: "ysn8462a",
+		xl: "ysn8462b",
+		xxl: "ysn8462c"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
 });
 //#endregion
-export { b as alignRecipe, d as body, f as bodyContained, g as cell, t as container, n as containerWithContainedBody, l as densityRecipe, C as emptyCell, S as emptyRow, r as header, u as headerCell, i as headerRow, w as hideBelowRecipe, _ as primaryCell, v as primaryHeaderCell, p as row, m as rowEven, h as rowOdd, x as rowStateRecipe, y as stickyHeader, o as tableCellFontSizeVar, a as tableCellPaddingVar, s as tableEmptyRowPaddingVar, c as tableRowMinHeightVar };
+export { x as alignRecipe, d as body, f as bodyContained, g as cell, t as container, n as containerWithContainedBody, l as densityRecipe, w as emptyCell, C as emptyRow, r as header, u as headerCell, i as headerRow, T as hideBelowRecipe, _ as primaryCell, v as primaryHeaderCell, p as row, m as rowEven, h as rowOdd, S as rowStateRecipe, y as singleLineCell, b as stickyHeader, o as tableCellFontSizeVar, a as tableCellPaddingVar, s as tableEmptyRowPaddingVar, c as tableRowMinHeightVar };
 
 //# sourceMappingURL=DataTable.css.js.map

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: 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: style([\n        sprinkles({\n          borderWidth: 0,\n          borderStyle: 'solid',\n          borderBottomWidth: 'default',\n          borderBottomColor: 'borderSubtle',\n          backgroundColor: 'surfaceMuted',\n        }),\n        {\n          backgroundImage: `linear-gradient(90deg, color-mix(in srgb, ${vars.colors.primaryLight} 55%, transparent), transparent 64%)`,\n        },\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: `color-mix(in srgb, ${vars.colors.surfaceMuted} 84%, ${vars.colors.primaryLight})`,\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.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: 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: style([\n        sprinkles({\n          borderWidth: 0,\n          borderStyle: 'solid',\n          borderBottomWidth: 'default',\n          borderBottomColor: 'borderSubtle',\n          backgroundColor: 'surfaceMuted',\n        }),\n        {\n          backgroundImage: `linear-gradient(90deg, color-mix(in srgb, ${vars.colors.primaryLight} 55%, transparent), transparent 64%)`,\n        },\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: `color-mix(in srgb, ${vars.colors.surfaceMuted} 84%, ${vars.colors.primaryLight})`,\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 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.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,88 +1,154 @@
 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 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";
+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";
 //#region src/components/data-table/DataTable.tsx
-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__ */ b("div", {
-		className: e(te, I?.emptyCell),
-		children: B("common.table.empty")
-	}), W = w ?? U, G = C.length === 0, K = P === "contained", q;
-	k ?? (q = v(u.length, A));
-	let J = null;
-	N?.sticky === !0 && (J = _);
-	let Y;
-	N?.offsetTop != null && (Y = { top: N.offsetTop });
-	let X = [ee({ density: M ?? "default" })];
-	k != null && X.push(k);
-	let Z;
-	Z = G ? /* @__PURE__ */ b("div", {
-		className: e(ne, I?.emptyRow),
+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) })];
+	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) => {
+	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", {
+		ref: d,
+		className: e(o({ kind: E(i) }), h, c?.container, r),
+		role: "table",
+		"aria-label": p,
+		"aria-labelledby": u,
+		"data-scroll-mode": a,
+		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({
+		columnCount: t.length,
+		gridTemplateClassName: s,
+		gridTemplateColumns: c
+	}), g = A({
+		density: i,
+		gridTemplateClassName: s
+	}), _;
+	a?.offsetTop != null && (_ = { top: a.offsetTop });
+	let v = null;
+	return a?.sticky === !0 && (v = x), /* @__PURE__ */ w("div", {
+		className: e(u({ kind: p }), v, l?.header, o),
+		style: _,
+		role: "rowgroup",
+		children: /* @__PURE__ */ w("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", {
+					role: "columnheader",
+					className: e(...r),
+					children: t.header
+				}, t.id);
+			})
+		})
+	});
+}, N = C(({ 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", {
+		ref: c,
+		className: e(r({ kind: E(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({
+		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({
+		density: c,
+		gridTemplateClassName: d
+	}));
+	let j = l?.(t, r);
+	return j != null && T.push(j), /* @__PURE__ */ w("div", {
 		role: "row",
-		children: /* @__PURE__ */ b("div", {
+		className: e(...T),
+		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", {
+				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("ysn84626 txvbqb9w txvbqb19cb txvbqb16fa", i?.emptyCell),
+		children: a("common.table.empty")
+	});
+	return /* @__PURE__ */ w("div", {
+		className: e(l, c({ density: D(r) }), i?.emptyRow),
+		role: "row",
+		children: /* @__PURE__ */ w("div", {
 			role: "cell",
-			children: W
+			children: o
 		})
-	}) : /* @__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__ */ b("div", {
-			role: "row",
-			className: e(...o),
-			style: q,
-			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__ */ b("div", {
-					role: "cell",
-					className: e(...i),
-					children: s
-				}, r.id);
-			})
-		}, i);
-	}) });
-	let Q = null, $ = null;
-	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__ */ b("div", {
-			className: e(re({ kind: V }), J, I?.header, E),
-			style: Y,
-			role: "rowgroup",
-			children: /* @__PURE__ */ b("div", {
-				className: e(l, I?.headerRow, ...X),
-				role: "row",
-				style: q,
-				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__ */ x("div", {
-			className: e(r({ kind: V }), $, I?.body, D),
-			role: "rowgroup",
-			"data-scroll-mode": P,
-			children: [Z, z]
+	});
+}, 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, {
+		emptyState: r,
+		density: d,
+		classes: h
+	}) : t.map((t, r) => /* @__PURE__ */ w(P, {
+		row: t,
+		index: r,
+		columns: e,
+		getRowId: n,
+		kind: u,
+		density: d,
+		rowClassName: s,
+		rowState: m,
+		gridTemplateClassName: c,
+		gridTemplateColumns: l,
+		classes: h
+	}, n(t, r))), /* @__PURE__ */ T(j, {
+		className: i,
+		kind: u,
+		bodyScrollMode: p,
+		classes: h,
+		ariaLabel: g,
+		ariaLabelledBy: _,
+		children: [/* @__PURE__ */ w(M, {
+			columns: e,
+			kind: u,
+			density: d,
+			headerBehavior: f,
+			headerClassName: a,
+			gridTemplateClassName: c,
+			gridTemplateColumns: l,
+			classes: h
+		}), /* @__PURE__ */ T(N, {
+			className: o,
+			kind: u,
+			bodyScrollMode: p,
+			classes: h,
+			children: [y, v]
 		})]
 	});
 };
 //#endregion
-export { C as DataTable };
+export { I as DataTable, N as DataTableBody, F as DataTableEmptyRow, M as DataTableHeader, j as DataTableRoot, P as DataTableRow };
 
 //# 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 { 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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"}
+{"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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveRecordList.js","names":[],"sources":["../../../../src/components/data-table/ResponsiveRecordList.tsx"],"sourcesContent":["import { useEffect, useState, type JSX, type ReactNode } from 'react';\n\nimport {\n  DataTable,\n  type DataTableColumn,\n  type DataTableDensity,\n  type DataTableProps,\n} from './DataTable.js';\nimport * as styles from './ResponsiveRecordList.css.js';\nimport { cx } from '../../theme/tools.js';\n\nconst CARDS_MEDIA_QUERY = '(max-width: 767px)';\n\nexport type ResponsiveRecordListMode = 'table' | 'cards' | 'auto';\nexport type ResponsiveRecordListDensity = DataTableDensity;\n\nexport type ResponsiveRecordListColumn<Row> = DataTableColumn<Row> & {\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 ResponsiveRecordListProps<Row> = Omit<\n  DataTableProps<Row>,\n  'columns'\n> & {\n  columns: readonly ResponsiveRecordListColumn<Row>[];\n  mode?: ResponsiveRecordListMode;\n  density?: ResponsiveRecordListDensity;\n  renderAction?: (row: Row) => ReactNode;\n};\n\nconst renderCellText = <Row,>(\n  column: ResponsiveRecordListColumn<Row> | null,\n  row: Row,\n): ReactNode => {\n  if (column == null) {\n    return null;\n  }\n  return column.cell(row);\n};\n\nconst findColumn = <Row,>(\n  columns: readonly ResponsiveRecordListColumn<Row>[],\n  role: ResponsiveRecordListColumn<Row>['mobileRole'],\n): ResponsiveRecordListColumn<Row> | null => {\n  return (\n    columns.find((column) => {\n      return column.mobileRole === role;\n    }) ?? null\n  );\n};\n\nconst isMetaColumn = <Row,>(\n  column: ResponsiveRecordListColumn<Row>,\n): boolean => {\n  if (column.mobileRole === 'hidden') {\n    return false;\n  }\n  if (column.mobileRole === 'meta') {\n    return true;\n  }\n  if (column.mobileRole != null) {\n    return false;\n  }\n  return column.priority === 'important' || column.priority === 'secondary';\n};\n\nconst useIsCardsViewport = (): boolean => {\n  const [matches, setMatches] = useState(() => {\n    if (typeof window === 'undefined') {\n      return false;\n    }\n    return window.matchMedia(CARDS_MEDIA_QUERY).matches;\n  });\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return () => {};\n    }\n    const mediaQuery = window.matchMedia(CARDS_MEDIA_QUERY);\n    const handleChange = () => {\n      setMatches(mediaQuery.matches);\n    };\n\n    handleChange();\n    mediaQuery.addEventListener('change', handleChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleChange);\n    };\n  }, []);\n\n  return matches;\n};\n\nexport const ResponsiveRecordList = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  mode = 'auto',\n  density = 'compact',\n  renderAction,\n  className,\n  bodyScrollMode,\n  ...tableProps\n}: ResponsiveRecordListProps<Row>): JSX.Element => {\n  const hasContainedBodyScroll = bodyScrollMode === 'contained';\n  const isCardsViewport = useIsCardsViewport();\n  let containedRootClassName: string | null = null;\n  let cardsViewportClassName: string | undefined;\n  let containedCardsOnlyClassName: string | null = null;\n  if (hasContainedBodyScroll) {\n    containedRootClassName = styles.containedRoot;\n    cardsViewportClassName = styles.cardsViewport;\n    containedCardsOnlyClassName = styles.cardsViewport;\n  }\n  const titleColumn =\n    findColumn(columns, 'title') ??\n    columns.find((column) => {\n      return column.isPrimary === true || column.priority === 'primary';\n    }) ??\n    columns[0] ??\n    null;\n  const subtitleColumn = findColumn(columns, 'subtitle');\n  const badgeColumns = columns.filter((column) => {\n    return column.mobileRole === 'badge' || column.mobileRole === 'status';\n  });\n  const metaColumns = columns.filter((column) => {\n    return (\n      column !== titleColumn &&\n      column !== subtitleColumn &&\n      isMetaColumn(column)\n    );\n  });\n\n  let cards: JSX.Element = <>{tableProps.emptyState ?? null}</>;\n  if (rows.length > 0) {\n    cards = (\n      <div className={styles.cards}>\n        {rows.map((row, index) => {\n          const rowId = getRowId(row, index);\n          const title = renderCellText(titleColumn, row);\n          const subtitle = renderCellText(subtitleColumn, row);\n          const action = renderAction?.(row);\n          let subtitleNode: JSX.Element | null = null;\n          if (subtitle != null && subtitle !== '') {\n            subtitleNode = (\n              <div className={styles.cardSubtitle}>{subtitle}</div>\n            );\n          }\n          let actionNode: JSX.Element | null = null;\n          if (action != null) {\n            actionNode = <div className={styles.cardActions}>{action}</div>;\n          }\n          let badgeNode: JSX.Element | null = null;\n          if (badgeColumns.length > 0) {\n            badgeNode = (\n              <div className={styles.cardBadges}>\n                {badgeColumns.map((column) => {\n                  return <span key={column.id}>{column.cell(row)}</span>;\n                })}\n              </div>\n            );\n          }\n          let metaNode: JSX.Element | null = null;\n          if (metaColumns.length > 0) {\n            metaNode = (\n              <dl className={styles.cardMetaGrid}>\n                {metaColumns.map((column) => {\n                  return (\n                    <div key={column.id} className={styles.cardMetaItem}>\n                      <dt className={styles.cardMetaLabel}>{column.header}</dt>\n                      <dd className={styles.cardMetaValue}>\n                        {column.cell(row)}\n                      </dd>\n                    </div>\n                  );\n                })}\n              </dl>\n            );\n          }\n\n          return (\n            <article key={rowId} className={styles.card({ density })}>\n              <div className={styles.cardHeader}>\n                <div className={styles.cardTitleGroup}>\n                  <div className={styles.cardTitle}>{title}</div>\n                  {subtitleNode}\n                </div>\n                {actionNode}\n              </div>\n              {badgeNode}\n              {metaNode}\n            </article>\n          );\n        })}\n      </div>\n    );\n  }\n\n  if (mode === 'cards') {\n    return (\n      <div className={cx(className, containedRootClassName)}>\n        <div className={cardsViewportClassName}>\n          {cards}\n          {tableProps.bodyFooterNode}\n        </div>\n      </div>\n    );\n  }\n\n  if (mode === 'table') {\n    return (\n      <DataTable\n        {...tableProps}\n        rows={rows}\n        columns={columns}\n        getRowId={getRowId}\n        className={className}\n        density={density}\n        bodyScrollMode={bodyScrollMode}\n        bodyFooterNode={tableProps.bodyFooterNode}\n      />\n    );\n  }\n\n  let tableBodyFooterNode = tableProps.bodyFooterNode;\n  let cardsBodyFooterNode: ReactNode = null;\n  if (isCardsViewport) {\n    tableBodyFooterNode = null;\n    cardsBodyFooterNode = tableProps.bodyFooterNode;\n  }\n\n  return (\n    <div className={cx(className, containedRootClassName)}>\n      <DataTable\n        {...tableProps}\n        rows={rows}\n        columns={columns}\n        getRowId={getRowId}\n        density={density}\n        className={styles.tableOnly}\n        bodyScrollMode={bodyScrollMode}\n        bodyFooterNode={tableBodyFooterNode}\n      />\n      <div className={cx(styles.cardsOnly, containedCardsOnlyClassName)}>\n        {cards}\n        {cardsBodyFooterNode}\n      </div>\n    </div>\n  );\n};\n\nexport default ResponsiveRecordList;\n"],"mappings":"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"}
+{"version":3,"file":"ResponsiveRecordList.js","names":[],"sources":["../../../../src/components/data-table/ResponsiveRecordList.tsx"],"sourcesContent":["import { useEffect, useState, type JSX, type ReactNode } from 'react';\n\nimport {\n  DataTable,\n  type DataTableColumn,\n  type DataTableDensity,\n  type DataTableProps,\n} from './DataTable.js';\nimport * as styles from './ResponsiveRecordList.css.js';\nimport { cx } from '../../theme/tools.js';\n\nconst CARDS_MEDIA_QUERY = '(max-width: 767px)';\n\nexport type ResponsiveRecordListMode = 'table' | 'cards' | 'auto';\nexport type ResponsiveRecordListDensity = DataTableDensity;\nexport type ResponsiveRecordListColumn<Row> = DataTableColumn<Row>;\n\nexport type ResponsiveRecordListProps<Row> = Omit<\n  DataTableProps<Row>,\n  'columns'\n> & {\n  columns: readonly ResponsiveRecordListColumn<Row>[];\n  mode?: ResponsiveRecordListMode;\n  density?: ResponsiveRecordListDensity;\n  renderAction?: (row: Row) => ReactNode;\n};\n\nconst renderCellText = <Row,>(\n  column: ResponsiveRecordListColumn<Row> | null,\n  row: Row,\n): ReactNode => {\n  if (column == null) {\n    return null;\n  }\n  return column.cell(row);\n};\n\nconst findColumn = <Row,>(\n  columns: readonly ResponsiveRecordListColumn<Row>[],\n  role: ResponsiveRecordListColumn<Row>['mobileRole'],\n): ResponsiveRecordListColumn<Row> | null => {\n  return (\n    columns.find((column) => {\n      return column.mobileRole === role;\n    }) ?? null\n  );\n};\n\nconst isMetaColumn = <Row,>(\n  column: ResponsiveRecordListColumn<Row>,\n): boolean => {\n  if (column.mobileRole === 'hidden') {\n    return false;\n  }\n  if (column.mobileRole === 'meta') {\n    return true;\n  }\n  if (column.mobileRole != null) {\n    return false;\n  }\n  return column.priority === 'important' || column.priority === 'secondary';\n};\n\nconst useIsCardsViewport = (): boolean => {\n  const [matches, setMatches] = useState(() => {\n    if (typeof window === 'undefined') {\n      return false;\n    }\n    return window.matchMedia(CARDS_MEDIA_QUERY).matches;\n  });\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return () => {};\n    }\n    const mediaQuery = window.matchMedia(CARDS_MEDIA_QUERY);\n    const handleChange = () => {\n      setMatches(mediaQuery.matches);\n    };\n\n    handleChange();\n    mediaQuery.addEventListener('change', handleChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleChange);\n    };\n  }, []);\n\n  return matches;\n};\n\nexport const ResponsiveRecordList = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  mode = 'auto',\n  density = 'compact',\n  renderAction,\n  className,\n  bodyScrollMode,\n  ...tableProps\n}: ResponsiveRecordListProps<Row>): JSX.Element => {\n  const hasContainedBodyScroll = bodyScrollMode === 'contained';\n  const isCardsViewport = useIsCardsViewport();\n  let containedRootClassName: string | null = null;\n  let cardsViewportClassName: string | undefined;\n  let containedCardsOnlyClassName: string | null = null;\n  if (hasContainedBodyScroll) {\n    containedRootClassName = styles.containedRoot;\n    cardsViewportClassName = styles.cardsViewport;\n    containedCardsOnlyClassName = styles.cardsViewport;\n  }\n  const titleColumn =\n    findColumn(columns, 'title') ??\n    columns.find((column) => {\n      return column.isPrimary === true || column.priority === 'primary';\n    }) ??\n    columns[0] ??\n    null;\n  const subtitleColumn = findColumn(columns, 'subtitle');\n  const badgeColumns = columns.filter((column) => {\n    return column.mobileRole === 'badge' || column.mobileRole === 'status';\n  });\n  const metaColumns = columns.filter((column) => {\n    return (\n      column !== titleColumn &&\n      column !== subtitleColumn &&\n      isMetaColumn(column)\n    );\n  });\n\n  let cards: JSX.Element = <>{tableProps.emptyState ?? null}</>;\n  if (rows.length > 0) {\n    cards = (\n      <div className={styles.cards}>\n        {rows.map((row, index) => {\n          const rowId = getRowId(row, index);\n          const title = renderCellText(titleColumn, row);\n          const subtitle = renderCellText(subtitleColumn, row);\n          const action = renderAction?.(row);\n          let subtitleNode: JSX.Element | null = null;\n          if (subtitle != null && subtitle !== '') {\n            subtitleNode = (\n              <div className={styles.cardSubtitle}>{subtitle}</div>\n            );\n          }\n          let actionNode: JSX.Element | null = null;\n          if (action != null) {\n            actionNode = <div className={styles.cardActions}>{action}</div>;\n          }\n          let badgeNode: JSX.Element | null = null;\n          if (badgeColumns.length > 0) {\n            badgeNode = (\n              <div className={styles.cardBadges}>\n                {badgeColumns.map((column) => {\n                  return <span key={column.id}>{column.cell(row)}</span>;\n                })}\n              </div>\n            );\n          }\n          let metaNode: JSX.Element | null = null;\n          if (metaColumns.length > 0) {\n            metaNode = (\n              <dl className={styles.cardMetaGrid}>\n                {metaColumns.map((column) => {\n                  return (\n                    <div key={column.id} className={styles.cardMetaItem}>\n                      <dt className={styles.cardMetaLabel}>{column.header}</dt>\n                      <dd className={styles.cardMetaValue}>\n                        {column.cell(row)}\n                      </dd>\n                    </div>\n                  );\n                })}\n              </dl>\n            );\n          }\n\n          return (\n            <article key={rowId} className={styles.card({ density })}>\n              <div className={styles.cardHeader}>\n                <div className={styles.cardTitleGroup}>\n                  <div className={styles.cardTitle}>{title}</div>\n                  {subtitleNode}\n                </div>\n                {actionNode}\n              </div>\n              {badgeNode}\n              {metaNode}\n            </article>\n          );\n        })}\n      </div>\n    );\n  }\n\n  if (mode === 'cards') {\n    return (\n      <div className={cx(className, containedRootClassName)}>\n        <div className={cardsViewportClassName}>\n          {cards}\n          {tableProps.bodyFooterNode}\n        </div>\n      </div>\n    );\n  }\n\n  if (mode === 'table') {\n    return (\n      <DataTable\n        {...tableProps}\n        rows={rows}\n        columns={columns}\n        getRowId={getRowId}\n        className={className}\n        density={density}\n        bodyScrollMode={bodyScrollMode}\n        bodyFooterNode={tableProps.bodyFooterNode}\n      />\n    );\n  }\n\n  let tableBodyFooterNode = tableProps.bodyFooterNode;\n  let cardsBodyFooterNode: ReactNode = null;\n  if (isCardsViewport) {\n    tableBodyFooterNode = null;\n    cardsBodyFooterNode = tableProps.bodyFooterNode;\n  }\n\n  return (\n    <div className={cx(className, containedRootClassName)}>\n      <DataTable\n        {...tableProps}\n        rows={rows}\n        columns={columns}\n        getRowId={getRowId}\n        density={density}\n        className={styles.tableOnly}\n        bodyScrollMode={bodyScrollMode}\n        bodyFooterNode={tableBodyFooterNode}\n      />\n      <div className={cx(styles.cardsOnly, containedCardsOnlyClassName)}>\n        {cards}\n        {cardsBodyFooterNode}\n      </div>\n    </div>\n  );\n};\n\nexport default ResponsiveRecordList;\n"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 /* empty css                                   */
 /* empty css                                          */
 //#region src/components/data-table/VirtualizedConnectionTable.css.ts
-var e = "_1ifyzte0 txvbqb18xk txvbqbusr txvbqb16g0 txvbqbt9i", t = "_1ifyzte1 txvbqb11js", n = "_1ifyzte2 txvbqb17w0", r = "_1ifyzte3 txvbqb17w0 txvbqbhlj";
+var e = "_1ifyzte0 txvbqb11js", t = "_1ifyzte1 txvbqb17w0", n = "_1ifyzte2 txvbqb17w0 txvbqbhlj";
 //#endregion
-export { t as bodyViewport, r as sentinel, e as singleLineCell, n as spacer };
+export { e as bodyViewport, n as sentinel, t as spacer };
 
 //# sourceMappingURL=VirtualizedConnectionTable.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedConnectionTable.css.js","names":[],"sources":["../../../../src/components/data-table/VirtualizedConnectionTable.css.ts"],"sourcesContent":["import { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const singleLineCell = sprinkles({\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  minWidth: 0,\n});\n\nexport const bodyViewport = sprinkles({\n  position: 'relative',\n});\n\nexport const spacer = sprinkles({\n  width: 'full',\n});\n\nexport const sentinel = sprinkles({\n  width: 'full',\n  height: 1,\n});\n"],"mappings":""}
+{"version":3,"file":"VirtualizedConnectionTable.css.js","names":[],"sources":["../../../../src/components/data-table/VirtualizedConnectionTable.css.ts"],"sourcesContent":["import { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const bodyViewport = sprinkles({\n  position: 'relative',\n});\n\nexport const spacer = sprinkles({\n  width: 'full',\n});\n\nexport const sentinel = sprinkles({\n  width: 'full',\n  height: 1,\n});\n"],"mappings":""}