@plumile/ui 0.1.115 → 0.1.117

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 } 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\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  rowState?: (row: Row, index: number) => DataTableRowState;\n  classes?: SlotClasses<DataTableSlot>;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\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  rowState,\n  classes,\n  ariaLabel,\n  ariaLabelledBy,\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\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  return (\n    <div\n      className={cx(\n        styles.container({ kind: resolvedKind }),\n        classes?.container,\n        className,\n      )}\n      role=\"table\"\n      aria-label={tableAriaLabel}\n      aria-labelledby={ariaLabelledBy}\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          classes?.body,\n          bodyClassName,\n        )}\n        role=\"rowgroup\"\n      >\n        {rowsContent}\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 { 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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"}

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

@@ -9,17 +9,17 @@
 /* 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 txvbqb9hy", i = "r17fa54 txvbqb9ip txvbqbai7 txvbqbao7 txvbqbu7g", a = e({
-	defaultClassName: "r17fa5a r17fa56 r17fa55 txvbqb9ip txvbqbai7 txvbqbaog txvbqbk5y _1995g4r1 _1995g4r0 _1995g4r2 _1995g4ra _1995g4rd _1995g4rh _1995g4rl",
+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",
 	variantClassNames: { density: {
-		compact: "r17fa5b r17fa57 txvbqbao7 txvbqblb7",
-		default: "r17fa5c r17fa58 txvbqbaog txvbqblbg",
-		comfortable: "r17fa5d r17fa59 txvbqbaog txvbqblbg"
+		compact: "r17fa5e r17fa5a txvbqbao7 txvbqblb7",
+		default: "r17fa5f r17fa5b txvbqbaog txvbqblbg",
+		comfortable: "r17fa5g r17fa5c txvbqbaog txvbqblbg"
 	} },
 	defaultVariants: { density: "compact" },
 	compoundVariants: []
-}), o = "r17fa5e txvbqbcg txvbqb9ip txvbqbaog txvbqbdpp txvbqbk5y", s = "r17fa5f txvbqb9ip txvbqbai7 txvbqbany txvbqbk5y", c = "r17fa5g txvbqbv9z txvbqb8y txvbqbamp txvbqbfap txvbqbk5y txvbqbl87", l = "r17fa5h txvbqbva1 txvbqb8p txvbqbfap txvbqbk5y txvbqbl87", u = "r17fa5i txvbqb9iy txvbqbao7 txvbqbbtp txvbqbbth", d = "r17fa5j txvbqb9ip txvbqbai7 txvbqbb9g txvbqbk5y", f = "r17fa5k txvbqbva3 txvbqb8p txvbqbamp txvbqbefg txvbqb66", p = "r17fa5l txvbqbv9z txvbqb8y txvbqbk5y txvbqbl87", m = "r17fa5m txvbqbcp txvbqb9ip txvbqbajy txvbqbao7", h = "r17fa5n txvbqbcp txvbqb9ip txvbqbaj7 txvbqbdp7";
+}), 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";
 //#endregion
-export { a as card, h as cardActions, m as cardBadges, o as cardHeader, u as cardMetaGrid, d as cardMetaItem, f as cardMetaLabel, p as cardMetaValue, l as cardSubtitle, c as cardTitle, s as cardTitleGroup, i as cards, n as cardsOnly, r as forceHidden, t as tableOnly };
+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 };
 
 //# sourceMappingURL=ResponsiveRecordList.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveRecordList.css.js","names":[],"sources":["../../../../src/components/data-table/ResponsiveRecordList.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { adminSurfaceRecipe } from '../../admin/theme/adminSurface.css.js';\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nconst TABLET_MEDIA_QUERY = 'screen and (max-width: 767px)';\n\nexport const tableOnly = style({\n  '@media': {\n    [TABLET_MEDIA_QUERY]: {\n      display: 'none',\n    },\n  },\n});\n\nexport const cardsOnly = style([\n  sprinkles({\n    display: 'none',\n  }),\n  {\n    '@media': {\n      [TABLET_MEDIA_QUERY]: {\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n      },\n    },\n  },\n]);\n\nexport const forceHidden = sprinkles({\n  display: 'none',\n});\n\nexport const cards = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  width: 'full',\n});\n\nexport const card = recipe({\n  base: style([\n    sprinkles({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 3,\n      minWidth: 0,\n    }),\n    adminSurfaceRecipe({\n      level: 'panel',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'subtle',\n      padding: 'md',\n    }),\n    {\n      selectors: {\n        '&:hover': {\n          borderColor: vars.colors.border,\n          boxShadow: vars.boxShadow.md,\n        },\n      },\n    },\n  ]),\n  variants: {\n    density: {\n      compact: sprinkles({\n        gap: 2,\n        padding: 3,\n      }),\n      default: sprinkles({\n        gap: 3,\n        padding: 4,\n      }),\n      comfortable: sprinkles({\n        gap: 3,\n        padding: 4,\n      }),\n    },\n  },\n  defaultVariants: {\n    density: 'compact',\n  },\n});\n\nexport const cardHeader = sprinkles({\n  alignItems: 'flex-start',\n  display: 'flex',\n  gap: 3,\n  justifyContent: 'space-between',\n  minWidth: 0,\n});\n\nexport const cardTitleGroup = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const cardTitle = sprinkles({\n  color: 'text',\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  lineHeight: 'tight',\n  minWidth: 0,\n  overflowWrap: 'anywhere',\n});\n\nexport const cardSubtitle = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'xs',\n  lineHeight: 'tight',\n  minWidth: 0,\n  overflowWrap: 'anywhere',\n});\n\nexport const cardMetaGrid = sprinkles({\n  display: 'grid',\n  gap: 2,\n  gridTemplateColumns: {\n    base: 2,\n    sm: 1,\n  },\n});\n\nexport const cardMetaItem = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 0.5,\n  minWidth: 0,\n});\n\nexport const cardMetaLabel = sprinkles({\n  color: 'textMuted',\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  letterSpacing: 'caps',\n  textTransform: 'uppercase',\n});\n\nexport const cardMetaValue = sprinkles({\n  color: 'text',\n  fontSize: 'sm',\n  minWidth: 0,\n  overflowWrap: 'anywhere',\n});\n\nexport const cardBadges = sprinkles({\n  alignItems: 'center',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nexport const cardActions = sprinkles({\n  alignItems: 'center',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'flex-end',\n});\n"],"mappings":""}
+{"version":3,"file":"ResponsiveRecordList.css.js","names":[],"sources":["../../../../src/components/data-table/ResponsiveRecordList.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { adminSurfaceRecipe } from '../../admin/theme/adminSurface.css.js';\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nconst TABLET_MEDIA_QUERY = 'screen and (max-width: 767px)';\n\nexport const tableOnly = style({\n  '@media': {\n    [TABLET_MEDIA_QUERY]: {\n      display: 'none',\n    },\n  },\n});\n\nexport const cardsOnly = style([\n  sprinkles({\n    display: 'none',\n  }),\n  {\n    '@media': {\n      [TABLET_MEDIA_QUERY]: {\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n      },\n    },\n  },\n]);\n\nexport const containedRoot = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const cardsViewport = style([\n  sprinkles({\n    flex: 1,\n    minHeight: 0,\n    width: 'full',\n  }),\n  {\n    overflowY: 'auto',\n    scrollbarWidth: 'thin',\n    scrollbarColor: `${vars.colors.border} transparent`,\n  },\n]);\n\nexport const forceHidden = sprinkles({\n  display: 'none',\n});\n\nexport const cards = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  width: 'full',\n});\n\nexport const card = recipe({\n  base: style([\n    sprinkles({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 3,\n      minWidth: 0,\n    }),\n    adminSurfaceRecipe({\n      level: 'panel',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'subtle',\n      padding: 'md',\n    }),\n    {\n      selectors: {\n        '&:hover': {\n          borderColor: vars.colors.border,\n          boxShadow: vars.boxShadow.md,\n        },\n      },\n    },\n  ]),\n  variants: {\n    density: {\n      compact: sprinkles({\n        gap: 2,\n        padding: 3,\n      }),\n      default: sprinkles({\n        gap: 3,\n        padding: 4,\n      }),\n      comfortable: sprinkles({\n        gap: 3,\n        padding: 4,\n      }),\n    },\n  },\n  defaultVariants: {\n    density: 'compact',\n  },\n});\n\nexport const cardHeader = sprinkles({\n  alignItems: 'flex-start',\n  display: 'flex',\n  gap: 3,\n  justifyContent: 'space-between',\n  minWidth: 0,\n});\n\nexport const cardTitleGroup = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const cardTitle = sprinkles({\n  color: 'text',\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  lineHeight: 'tight',\n  minWidth: 0,\n  overflowWrap: 'anywhere',\n});\n\nexport const cardSubtitle = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'xs',\n  lineHeight: 'tight',\n  minWidth: 0,\n  overflowWrap: 'anywhere',\n});\n\nexport const cardMetaGrid = sprinkles({\n  display: 'grid',\n  gap: 2,\n  gridTemplateColumns: {\n    base: 2,\n    sm: 1,\n  },\n});\n\nexport const cardMetaItem = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 0.5,\n  minWidth: 0,\n});\n\nexport const cardMetaLabel = sprinkles({\n  color: 'textMuted',\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  letterSpacing: 'caps',\n  textTransform: 'uppercase',\n});\n\nexport const cardMetaValue = sprinkles({\n  color: 'text',\n  fontSize: 'sm',\n  minWidth: 0,\n  overflowWrap: 'anywhere',\n});\n\nexport const cardBadges = sprinkles({\n  alignItems: 'center',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nexport const cardActions = sprinkles({\n  alignItems: 'center',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'flex-end',\n});\n"],"mappings":""}

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

@@ -1,84 +1,109 @@
-import { DataTable as e } from "./DataTable.js";
-import { card as t, cardActions as n, cardBadges as r, cardHeader as i, cardMetaGrid as a, cardMetaItem as o, cardMetaLabel as s, cardMetaValue as c, cardSubtitle as l, cardTitle as u, cardTitleGroup as d, cards as f, cardsOnly as p, tableOnly as m } from "./ResponsiveRecordList.css.js";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { cx as e } from "../../theme/tools.js";
+import { DataTable as t } from "./DataTable.js";
+import { card as n, cardActions as r, cardBadges as i, cardHeader as a, cardMetaGrid as o, cardMetaItem as s, cardMetaLabel as c, cardMetaValue as l, cardSubtitle as u, cardTitle as d, cardTitleGroup as f, cards as p, cardsOnly as m, cardsViewport as h, containedRoot as g, tableOnly as _ } from "./ResponsiveRecordList.css.js";
+import { useEffect as v, useState as y } from "react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/components/data-table/ResponsiveRecordList.tsx
-var v = (e, t) => e == null ? null : e.cell(t), y = (e, t) => e.find((e) => e.mobileRole === t) ?? null, b = (e) => e.mobileRole === "hidden" ? !1 : e.mobileRole === "meta" ? !0 : e.mobileRole == null ? e.priority === "important" || e.priority === "secondary" : !1, x = ({ columns: x, rows: S, getRowId: C, mode: w = "auto", density: T = "compact", renderAction: E, className: D, ...O }) => {
-	let k = y(x, "title") ?? x.find((e) => e.isPrimary === !0 || e.priority === "primary") ?? x[0] ?? null, A = y(x, "subtitle"), j = x.filter((e) => e.mobileRole === "badge" || e.mobileRole === "status"), M = x.filter((e) => e !== k && e !== A && b(e)), N = /* @__PURE__ */ g(h, { children: O.emptyState ?? null });
-	return S.length > 0 && (N = /* @__PURE__ */ g("div", {
-		className: f,
-		children: S.map((e, f) => {
-			let p = C(e, f), m = v(k, e), h = v(A, e), y = E?.(e), b = null;
-			h != null && h !== "" && (b = /* @__PURE__ */ g("div", {
-				className: l,
+var C = "(max-width: 767px)", w = (e, t) => e == null ? null : e.cell(t), T = (e, t) => e.find((e) => e.mobileRole === t) ?? null, E = (e) => e.mobileRole === "hidden" ? !1 : e.mobileRole === "meta" ? !0 : e.mobileRole == null ? e.priority === "important" || e.priority === "secondary" : !1, D = () => {
+	let [e, t] = y(() => typeof window > "u" ? !1 : window.matchMedia(C).matches);
+	return v(() => {
+		if (typeof window > "u") return () => {};
+		let e = window.matchMedia(C), n = () => {
+			t(e.matches);
+		};
+		return n(), e.addEventListener("change", n), () => {
+			e.removeEventListener("change", n);
+		};
+	}, []), e;
+}, O = ({ columns: v, rows: y, getRowId: C, mode: O = "auto", density: k = "compact", renderAction: A, className: j, bodyScrollMode: M, ...N }) => {
+	let P = M === "contained", F = D(), I = null, L, R = null;
+	P && (I = g, L = h, R = h);
+	let z = T(v, "title") ?? v.find((e) => e.isPrimary === !0 || e.priority === "primary") ?? v[0] ?? null, B = T(v, "subtitle"), V = v.filter((e) => e.mobileRole === "badge" || e.mobileRole === "status"), H = v.filter((e) => e !== z && e !== B && E(e)), U = /* @__PURE__ */ x(b, { children: N.emptyState ?? null });
+	if (y.length > 0 && (U = /* @__PURE__ */ x("div", {
+		className: p,
+		children: y.map((e, t) => {
+			let p = C(e, t), m = w(z, e), h = w(B, e), g = A?.(e), _ = null;
+			h != null && h !== "" && (_ = /* @__PURE__ */ x("div", {
+				className: u,
 				children: h
 			}));
-			let x = null;
-			y != null && (x = /* @__PURE__ */ g("div", {
-				className: n,
-				children: y
-			}));
-			let S = null;
-			j.length > 0 && (S = /* @__PURE__ */ g("div", {
+			let v = null;
+			g != null && (v = /* @__PURE__ */ x("div", {
 				className: r,
-				children: j.map((t) => /* @__PURE__ */ g("span", { children: t.cell(e) }, t.id))
+				children: g
 			}));
-			let w = null;
-			return M.length > 0 && (w = /* @__PURE__ */ g("dl", {
-				className: a,
-				children: M.map((t) => /* @__PURE__ */ _("div", {
-					className: o,
-					children: [/* @__PURE__ */ g("dt", {
-						className: s,
-						children: t.header
-					}), /* @__PURE__ */ g("dd", {
+			let y = null;
+			V.length > 0 && (y = /* @__PURE__ */ x("div", {
+				className: i,
+				children: V.map((t) => /* @__PURE__ */ x("span", { children: t.cell(e) }, t.id))
+			}));
+			let b = null;
+			return H.length > 0 && (b = /* @__PURE__ */ x("dl", {
+				className: o,
+				children: H.map((t) => /* @__PURE__ */ S("div", {
+					className: s,
+					children: [/* @__PURE__ */ x("dt", {
 						className: c,
+						children: t.header
+					}), /* @__PURE__ */ x("dd", {
+						className: l,
 						children: t.cell(e)
 					})]
 				}, t.id))
-			})), /* @__PURE__ */ _("article", {
-				className: t({ density: T }),
+			})), /* @__PURE__ */ S("article", {
+				className: n({ density: k }),
 				children: [
-					/* @__PURE__ */ _("div", {
-						className: i,
-						children: [/* @__PURE__ */ _("div", {
-							className: d,
-							children: [/* @__PURE__ */ g("div", {
-								className: u,
+					/* @__PURE__ */ S("div", {
+						className: a,
+						children: [/* @__PURE__ */ S("div", {
+							className: f,
+							children: [/* @__PURE__ */ x("div", {
+								className: d,
 								children: m
-							}), b]
-						}), x]
+							}), _]
+						}), v]
 					}),
-					S,
-					w
+					y,
+					b
 				]
 			}, p);
 		})
-	})), w === "cards" ? /* @__PURE__ */ g("div", {
-		className: D,
-		children: N
-	}) : w === "table" ? /* @__PURE__ */ g(e, {
-		...O,
-		rows: S,
-		columns: x,
+	})), O === "cards") return /* @__PURE__ */ x("div", {
+		className: e(j, I),
+		children: /* @__PURE__ */ S("div", {
+			className: L,
+			children: [U, N.bodyFooterNode]
+		})
+	});
+	if (O === "table") return /* @__PURE__ */ x(t, {
+		...N,
+		rows: y,
+		columns: v,
 		getRowId: C,
-		className: D,
-		density: T
-	}) : /* @__PURE__ */ _("div", {
-		className: D,
-		children: [/* @__PURE__ */ g(e, {
-			...O,
-			rows: S,
-			columns: x,
+		className: j,
+		density: k,
+		bodyScrollMode: M,
+		bodyFooterNode: N.bodyFooterNode
+	});
+	let W = N.bodyFooterNode, G = null;
+	return F && (W = null, G = N.bodyFooterNode), /* @__PURE__ */ S("div", {
+		className: e(j, I),
+		children: [/* @__PURE__ */ x(t, {
+			...N,
+			rows: y,
+			columns: v,
 			getRowId: C,
-			density: T,
-			className: m
-		}), /* @__PURE__ */ g("div", {
-			className: p,
-			children: N
+			density: k,
+			className: _,
+			bodyScrollMode: M,
+			bodyFooterNode: W
+		}), /* @__PURE__ */ S("div", {
+			className: e(m, R),
+			children: [U, G]
 		})]
 	});
 };
 //#endregion
-export { x as ResponsiveRecordList, x as default };
+export { O as ResponsiveRecordList, O as default };
 
 //# sourceMappingURL=ResponsiveRecordList.js.map

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 { 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';\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\nexport const ResponsiveRecordList = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  mode = 'auto',\n  density = 'compact',\n  renderAction,\n  className,\n  ...tableProps\n}: ResponsiveRecordListProps<Row>): JSX.Element => {\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 <div className={className}>{cards}</div>;\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      />\n    );\n  }\n\n  return (\n    <div className={className}>\n      <DataTable\n        {...tableProps}\n        rows={rows}\n        columns={columns}\n        getRowId={getRowId}\n        density={density}\n        className={styles.tableOnly}\n      />\n      <div className={styles.cardsOnly}>{cards}</div>\n    </div>\n  );\n};\n\nexport default ResponsiveRecordList;\n"],"mappings":";;;;AAmCA,IAAM,KACJ,GACA,MAEI,KAAU,OACL,OAEF,EAAO,KAAK,EAAI,EAGnB,KACJ,GACA,MAGE,EAAQ,MAAM,MACL,EAAO,eAAe,EAC7B,IAAI,MAIJ,KACJ,MAEI,EAAO,eAAe,WACjB,KAEL,EAAO,eAAe,SACjB,KAEL,EAAO,cAAc,OAGlB,EAAO,aAAa,eAAe,EAAO,aAAa,cAFrD,IAKE,KAA8B,EACzC,YACA,SACA,aACA,UAAO,QACP,aAAU,WACV,iBACA,cACA,GAAG,QAC8C;CACjD,IAAM,IACJ,EAAW,GAAS,QAAQ,IAC5B,EAAQ,MAAM,MACL,EAAO,cAAc,MAAQ,EAAO,aAAa,UACxD,IACF,EAAQ,MACR,MACI,IAAiB,EAAW,GAAS,WAAW,EAChD,IAAe,EAAQ,QAAQ,MAC5B,EAAO,eAAe,WAAW,EAAO,eAAe,SAC9D,EACI,IAAc,EAAQ,QAAQ,MAEhC,MAAW,KACX,MAAW,KACX,EAAa,EAAO,CAEtB,EAEE,IAAqB,kBAAA,GAAA,EAAA,UAAG,EAAW,cAAc,MAAQ,CAAA;CAkF7D,OAjFI,EAAK,SAAS,MAChB,IACE,kBAAC,OAAD;EAAK,WAAW;YACb,EAAK,KAAK,GAAK,MAAU;GACxB,IAAM,IAAQ,EAAS,GAAK,EAAM,EAC5B,IAAQ,EAAe,GAAa,EAAI,EACxC,IAAW,EAAe,GAAgB,EAAI,EAC9C,IAAS,IAAe,EAAI,EAC9B,IAAmC;GACvC,AAAI,KAAY,QAAQ,MAAa,OACnC,IACE,kBAAC,OAAD;IAAK,WAAW;cAAsB;IAAe,CAAA;GAGzD,IAAI,IAAiC;GACrC,AAAI,KAAU,SACZ,IAAa,kBAAC,OAAD;IAAK,WAAW;cAAqB;IAAa,CAAA;GAEjE,IAAI,IAAgC;GACpC,AAAI,EAAa,SAAS,MACxB,IACE,kBAAC,OAAD;IAAK,WAAW;cACb,EAAa,KAAK,MACV,kBAAC,QAAD,EAAA,UAAuB,EAAO,KAAK,EAAI,EAAQ,EAApC,EAAO,GAA6B,CACtD;IACE,CAAA;GAGV,IAAI,IAA+B;GAkBnC,OAjBI,EAAY,SAAS,MACvB,IACE,kBAAC,MAAD;IAAI,WAAW;cACZ,EAAY,KAAK,MAEd,kBAAC,OAAD;KAAqB,WAAW;eAAhC,CACE,kBAAC,MAAD;MAAI,WAAW;gBAAuB,EAAO;MAAY,CAAA,EACzD,kBAAC,MAAD;MAAI,WAAW;gBACZ,EAAO,KAAK,EAAI;MACd,CAAA,CACD;OALI,EAAO,GAKX,CAER;IACC,CAAA,GAKP,kBAAC,WAAD;IAAqB,WAAW,EAAY,EAAE,YAAS,CAAC;cAAxD;KACE,kBAAC,OAAD;MAAK,WAAW;gBAAhB,CACE,kBAAC,OAAD;OAAK,WAAW;iBAAhB,CACE,kBAAC,OAAD;QAAK,WAAW;kBAAmB;QAAY,CAAA,EAC9C,EACG;UACL,EACG;;KACL;KACA;KACO;MAVI,EAUJ;IAEZ;EACE,CAAA,GAIN,MAAS,UACJ,kBAAC,OAAD;EAAgB;YAAY;EAAY,CAAA,GAG7C,MAAS,UAET,kBAAC,GAAD;EACE,GAAI;EACE;EACG;EACC;EACC;EACF;EACT,CAAA,GAKJ,kBAAC,OAAD;EAAgB;YAAhB,CACE,kBAAC,GAAD;GACE,GAAI;GACE;GACG;GACC;GACD;GACT,WAAW;GACX,CAAA,EACF,kBAAC,OAAD;GAAK,WAAW;aAAmB;GAAY,CAAA,CAC3C"}
+{"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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"}