@primer/react 38.41.0 → 38.42.0-rc.2f6d98706

package/dist/experimental/index.d.ts

@@ -15,7 +15,7 @@ import { FilteredActionListProps } from "../FilteredActionList/FilteredActionLis
 import { FilteredActionListInputProps } from "../FilteredActionList/FilteredActionListInput.js";
 import { FilteredActionList } from "../FilteredActionList/index.js";
 import { ObjectPaths } from "../DataTable/utils.js";
-import { DataTableData, DataTableRowGroup, UniqueRow } from "../DataTable/row.js";
+import { DataTableData, DataTableRowGroup, DataTableRowId, UniqueRow } from "../DataTable/row.js";
 import { CellAlignment, Column, ColumnWidth, createColumnHelper } from "../DataTable/column.js";
 import { ActionBarButtonProps, ActionBarMenuItemProps, ActionBarMenuProps, ActionBarProps } from "../ActionBar/ActionBar.js";
 import { ActionBar } from "../ActionBar/index.js";
@@ -28,7 +28,7 @@ import { Blankslate as BlankslateContainer } from "../Blankslate/index.js";
 import { CardActionProps as ActionProps, CardDescriptionProps as DescriptionProps, CardHeadingProps as HeadingProps, CardIconProps as IconProps, CardImageProps as ImageProps, CardMetadataProps as MetadataProps, CardProps } from "../Card/Card.js";
 import { Card } from "../Card/index.js";
 import { DataTable, DataTableProps } from "../DataTable/DataTable.js";
-import { TableActionsProps, TableBodyProps, TableCellProps, TableContainerProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TableSubtitleProps, TableTitleProps } from "../DataTable/Table.js";
+import { TableActionsProps, TableBodyProps, TableCellProps, TableContainerProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TableRowSelectionProps, TableSelectionHeaderProps, TableSubtitleProps, TableTitleProps } from "../DataTable/Table.js";
 import { TableGroupProps } from "../DataTable/TableGroup.js";
 import { Table } from "../DataTable/index.js";
 import { InlineMessage, InlineMessageProps } from "../InlineMessage/InlineMessage.js";
@@ -51,4 +51,4 @@ import { useTabPanel } from "./Tabs/useTabPanel.js";
 import { TopicTagProps } from "../TopicTag/TopicTag.js";
 import { TopicTagGroupProps } from "../TopicTag/TopicTagGroup.js";
 import { TopicTag } from "../TopicTag/index.js";
-export { ActionBar, type ActionBarButtonProps, type ActionBarMenuItemProps, type ActionBarMenuProps, type ActionBarProps, Announce, type AnnounceProps, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, BlankslateContainer as Blankslate, type BlankslateProps, ButtonBase, type ButtonBaseProps, Card, type ActionProps as CardActionProps, type DescriptionProps as CardDescriptionProps, type HeadingProps as CardHeadingProps, type IconProps as CardIconProps, type ImageProps as CardImageProps, type MetadataProps as CardMetadataProps, type CardProps, type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableData, type DataTableProps, type DataTableRowGroup, DefaultFeatureFlags, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, FeatureFlags, type FeatureFlagsProps, FilteredActionList, type FilteredActionListInputProps, FilteredActionListLoadingTypes, type FilteredActionListProps, Hidden, type HiddenProps, InlineMessage, type InlineMessageProps, IssueLabel, type IssueLabelProps, KeybindingHint, type KeybindingHintProps, NavList, type NavListDividerProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, type ObjectPaths, PageHeader, type ActionsProps as PageHeaderActionsProps, type PageHeaderProps, type TitleProps as PageHeaderTitleProps, ScrollableRegion, type ScrollableRegionProps, SelectPanel, type SelectPanelMessageProps, type SelectPanelProps, type SelectPanelSecondaryActionProps, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBox, type SkeletonBoxProps, SkeletonText, type SkeletonTextProps, SlotConfig, Stack, type StackItemProps, type StackProps, type TabListProps, type TabPanelProps, type TabProps, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableSubtitleProps, type TableTitleProps, Tabs, type TabsProps, type TitleProps, Tooltip, type TooltipProps, TopicTag, type TopicTagGroupProps, type TopicTagProps, _default as UnderlinePanels, type PanelProps as UnderlinePanelsPanelProps, type UnderlinePanelsProps, type TabProps$1 as UnderlinePanelsTabProps, type UniqueRow, createColumnHelper, getAccessibleKeybindingHintString, useFeatureFlag, useOverflow, useSlots, useTab, useTabList, useTabPanel };
+export { ActionBar, type ActionBarButtonProps, type ActionBarMenuItemProps, type ActionBarMenuProps, type ActionBarProps, Announce, type AnnounceProps, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, BlankslateContainer as Blankslate, type BlankslateProps, ButtonBase, type ButtonBaseProps, Card, type ActionProps as CardActionProps, type DescriptionProps as CardDescriptionProps, type HeadingProps as CardHeadingProps, type IconProps as CardIconProps, type ImageProps as CardImageProps, type MetadataProps as CardMetadataProps, type CardProps, type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableData, type DataTableProps, type DataTableRowGroup, type DataTableRowId, DefaultFeatureFlags, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, FeatureFlags, type FeatureFlagsProps, FilteredActionList, type FilteredActionListInputProps, FilteredActionListLoadingTypes, type FilteredActionListProps, Hidden, type HiddenProps, InlineMessage, type InlineMessageProps, IssueLabel, type IssueLabelProps, KeybindingHint, type KeybindingHintProps, NavList, type NavListDividerProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, type ObjectPaths, PageHeader, type ActionsProps as PageHeaderActionsProps, type PageHeaderProps, type TitleProps as PageHeaderTitleProps, ScrollableRegion, type ScrollableRegionProps, SelectPanel, type SelectPanelMessageProps, type SelectPanelProps, type SelectPanelSecondaryActionProps, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBox, type SkeletonBoxProps, SkeletonText, type SkeletonTextProps, SlotConfig, Stack, type StackItemProps, type StackProps, type TabListProps, type TabPanelProps, type TabProps, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableRowSelectionProps, type TableSelectionHeaderProps, type TableSubtitleProps, type TableTitleProps, Tabs, type TabsProps, type TitleProps, Tooltip, type TooltipProps, TopicTag, type TopicTagGroupProps, type TopicTagProps, _default as UnderlinePanels, type PanelProps as UnderlinePanelsPanelProps, type UnderlinePanelsProps, type TabProps$1 as UnderlinePanelsTabProps, type UniqueRow, createColumnHelper, getAccessibleKeybindingHintString, useFeatureFlag, useOverflow, useSlots, useTab, useTabList, useTabPanel };

package/generated/components.json

@@ -2759,7 +2759,23 @@
         },
         {
           "id": "experimental-components-datatable-features--with-groups",
-          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  // Count data rows, not headings, and preserve each item's position and group membership.\n  const data = paginationData.flatMap(\n    (item): DataTableData<PaginatedRepository> => {\n      if ('rows' in item) {\n        const rows = item.rows.filter((row) => pageRows.has(row.id))\n        return rows.length > 0\n          ? [\n              {\n                ...item,\n                rows,\n              },\n            ]\n          : []\n      }\n      return pageRows.has(item.id) ? [item] : []\n    },\n  )\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Paginated repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n            sortBy: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for grouped repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n      />\n    </Table.Container>\n  )\n}"
+          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  const data = getPageData(paginationData, pageRows)\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Paginated repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n            sortBy: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for grouped repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-datatable-features--with-row-selection",
+          "code": "() => {\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set([2]))\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"selectable-repositories\">\n        Selectable repositories\n      </Table.Title>\n      <DataTable\n        aria-labelledby=\"selectable-repositories\"\n        data={data}\n        columns={groupedColumns}\n        rowSelection\n        selectedRows={selectedRows}\n        onSelectionChange={({ selectedRows: nextSelectedRows }) => {\n          setSelectedRows(nextSelectedRows)\n        }}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-datatable-features--with-grouped-row-selection",
+          "code": "() => {\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set())\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"selectable-repositories-by-visibility\">\n        Selectable repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby=\"selectable-repositories-by-visibility\"\n        data={repoGroupsWithDisabledRow}\n        columns={groupedColumns}\n        rowSelection\n        selectedRows={selectedRows}\n        isRowSelectable={(repo) => repo.id !== 1}\n        onSelectionChange={({ selectedRows: nextSelectedRows }) => {\n          setSelectedRows(nextSelectedRows)\n        }}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-datatable-features--with-standalone-and-grouped-row-selection",
+          "code": "() => {\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set())\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"selectable-mixed-repositories\">\n        Selectable standalone and grouped repositories\n      </Table.Title>\n      <DataTable\n        aria-labelledby=\"selectable-mixed-repositories\"\n        data={[\n          ...data.filter((repo) => repo.type === 'internal'),\n          repoGroups[1],\n        ]}\n        columns={sortableGroupedColumns}\n        rowSelection\n        selectedRows={selectedRows}\n        onSelectionChange={({ selectedRows: nextSelectedRows }) => {\n          setSelectedRows(nextSelectedRows)\n        }}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-datatable-features--with-paginated-row-selection",
+          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set())\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  const data = getPageData(paginationData, pageRows)\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Selectable paginated repositories\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n        rowSelection\n        selectedRows={selectedRows}\n        onSelectionChange={({ selectedRows }) => setSelectedRows(selectedRows)}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for selectable repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => {\n          setPageIndex(pageIndex)\n          // Selection applies only to the current page.\n          setSelectedRows(new Set())\n        }}\n      />\n    </Table.Container>\n  )\n}"
         },
         {
           "id": "experimental-components-datatable-features--with-sortable-groups",
@@ -2767,7 +2783,11 @@
         },
         {
           "id": "experimental-components-table-features--with-groups",
-          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  // Count data rows, not headings, and preserve each item's position and group membership.\n  const data = paginationData.flatMap(\n    (item): DataTableData<PaginatedRepository> => {\n      if ('rows' in item) {\n        const rows = item.rows.filter((row) => pageRows.has(row.id))\n        return rows.length > 0\n          ? [\n              {\n                ...item,\n                rows,\n              },\n            ]\n          : []\n      }\n      return pageRows.has(item.id) ? [item] : []\n    },\n  )\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Paginated repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n            sortBy: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for grouped repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n      />\n    </Table.Container>\n  )\n}"
+          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  const data = getPageData(paginationData, pageRows)\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Paginated repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n            sortBy: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for grouped repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-table-features--with-row-selection",
+          "code": "() => {\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set([2]))\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"selectable-repositories\">\n        Selectable repositories\n      </Table.Title>\n      <DataTable\n        aria-labelledby=\"selectable-repositories\"\n        data={data}\n        columns={groupedColumns}\n        rowSelection\n        selectedRows={selectedRows}\n        onSelectionChange={({ selectedRows: nextSelectedRows }) => {\n          setSelectedRows(nextSelectedRows)\n        }}\n      />\n    </Table.Container>\n  )\n}"
         }
       ],
       "importPath": "@primer/react/experimental",
@@ -2792,6 +2812,36 @@
           "type": "Array<Column<Data>>",
           "description": "Provide the columns for the table and the fields in `data` to which they correspond"
         },
+        {
+          "name": "getRowId",
+          "type": "(row: Data) => DataTableRowId",
+          "description": "Provide a stable row ID. Defaults to row.id. DataTableRowId is an exported string | number type."
+        },
+        {
+          "name": "rowSelection",
+          "type": "boolean",
+          "description": "Render row checkboxes and a select-all checkbox for the current page."
+        },
+        {
+          "name": "selectedRows",
+          "type": "ReadonlySet<DataTableRowId>",
+          "description": "Control selection using stable IDs from `getRowId`. Missing or non-selectable IDs stay stored but do not count as selected."
+        },
+        {
+          "name": "defaultSelectedRows",
+          "type": "ReadonlySet<DataTableRowId>",
+          "description": "Set the initial selection for an uncontrolled, static, single-page table."
+        },
+        {
+          "name": "onSelectionChange",
+          "type": "({ selectedRows }: { selectedRows: Set<DataTableRowId> }) => void",
+          "description": "Receive a new selection set when a checkbox is toggled. Data changes alone do not trigger this callback."
+        },
+        {
+          "name": "isRowSelectable",
+          "type": "(row: Data) => boolean",
+          "description": "Determine which rows can be selected and counted by select-all."
+        },
         {
           "name": "cellPadding",
           "type": "'condensed' | 'normal' | 'spacious'",
@@ -2952,6 +3002,80 @@
             }
           ]
         },
+        {
+          "name": "Table.SelectionHeader",
+          "props": [
+            {
+              "name": "selection",
+              "type": "'all' | 'some' | 'none'",
+              "required": true,
+              "description": "Whether all, some, or none of the selectable rows are selected."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "description": "Whether row selection is unavailable."
+            },
+            {
+              "name": "onToggleSelect",
+              "type": "() => void",
+              "description": "Request toggling selection for all selectable rows."
+            },
+            {
+              "name": "checkboxRef",
+              "type": "React.Ref<HTMLInputElement>",
+              "description": "Forward a ref to the native selection checkbox."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "defaultValue": "'Select rows'",
+              "description": "Provide the selection checkbox's accessible name."
+            },
+            {
+              "name": "aria-description",
+              "type": "string",
+              "description": "Describe the select-all scope, for example \"Select all 10 rows\"."
+            }
+          ]
+        },
+        {
+          "name": "Table.RowSelection",
+          "props": [
+            {
+              "name": "selected",
+              "type": "boolean",
+              "required": true,
+              "description": "Whether the row is selected."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "description": "Whether the row cannot be selected."
+            },
+            {
+              "name": "onToggleSelect",
+              "type": "() => void",
+              "description": "Request toggling selection for the row."
+            },
+            {
+              "name": "checkboxRef",
+              "type": "React.Ref<HTMLInputElement>",
+              "description": "Forward a ref to the native row checkbox."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "defaultValue": "'Select row'",
+              "description": "Name the row checkbox when `aria-labelledby` is not provided."
+            },
+            {
+              "name": "aria-labelledby",
+              "type": "string",
+              "description": "Reference the row header IDs. The checkbox name adds \"Select\" before their text."
+            }
+          ]
+        },
         {
           "name": "Table.Cell",
           "props": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.41.0",
+  "version": "38.42.0-rc.2f6d98706",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -157,7 +157,7 @@
     "mdast-util-to-string": "4.0.0",
     "micromark-extension-frontmatter": "2.0.0",
     "micromark-extension-mdxjs": "3.0.0",
-    "oxc-transform-react": "^0.152.0",
+    "oxc-transform-react": "^0.153.0",
     "postcss-preset-primer": "^0.0.0",
     "publint": "^0.3.15",
     "react": "18.3.1",

package/dist/DataTable/Table-50e68700.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/DataTable/Table.module.css.js"],"names":[],"mappings":"AACA,oCAUE,mCAA8B,CAT9B,YAAa,CAEb,uHAMiB,CAPjB,6BASF,CAGA,gCAQE,iBAAkB,CANlB,8CAAuC,CACvC,gDAA6C,CAI7C,eAAgB,CAFhB,gBAIF,CAGA,mEANE,oCAA6B,CAL7B,QAkBF,CAPA,mCAEE,4CAAsC,CACtC,8CAA2C,CAG3C,kBAAmB,CAFnB,kDAGF,CAGA,kCAGE,kBAAmB,CADnB,mCAA8B,CAD9B,YAAa,CAGb,iBAAkB,CAClB,gBACF,CAGA,kCAIE,mDAA4C,CAC5C,iBAAkB,CAHlB,UAAW,CAKX,yCAAoC,CADpC,2CAAuC,CALvC,UAOF,CAGA,mOAGE,2CACF,CAOA,qEAJE,eAsCF,CAlCA,2BAEE,8BAA+B,CAC/B,wFAA2F,CAC3F,yBAA0B,CAW1B,4CAAwC,CADxC,wBAAyB,CAFzB,gBAAiB,CANjB,YAAa,CAGb,gCAAiC,CAQjC,kDAAmD,CANnD,mBAA0B,CAJ1B,UA2BF,CAdE,gEACE,4BAA6B,CAC7B,4BACF,CAEA,6DACE,2BAA4B,CAC5B,6BACF,CAEA,+DACE,4BAA6B,CAC7B,0BACF,CAIF,wFAEE,6FACF,CAEA,sFAEE,2FACF,CAEA,gEAME,kBAAmB,CACnB,0FAA0E,CAL1E,YAAa,CAEb,iCAAkC,CAClC,gBAGF,CAEA,0HAEE,YAAa,CAEb,wBAAyB,CADzB,cAEF,CAEA,2FACE,YAAa,CACb,0BACF,CAEA,4GACE,4FACF,CAIA,wHAEE,iDACF,CAGA,uHAEE,kDACF,CAGA,kNAEE,oDACF,CAGA,iNAEE,qDACF,CAMA,6KAEE,6CACF,CAEA,2KAEE,2CACF,CAGA,iCAGE,6CAAsC,CACtC,4FAA4E,CAF5E,kCAA2B,CAD3B,gDAIF,CAEA,6HAEE,oCACF,CAGA,mCACE,iBACF,CASA,yZAEE,kBACF,CAGA,+GACE,mEACF,CAGA,kDAIE,kBAAmB,CADnB,oCAA6B,CAF7B,YAAa,CACb,gDAGF,CAGA,uCACE,SACF,CAEA,4CACE,YAAa,CAEb,qBAAsB,CADtB,UAEF,CAEA,2CAEE,iCAqBF,CAnBE,6DACE,yBACF,CAEA,6DACE,2BACF,CAEA,6DACE,yBACF,CAEA,6DACE,yBACF,CAEA,6DACE,yBACF,CAGF,yEACE,gCACF,CAEA,8DACE,0FACF,CAEA,qCACE,gBACF,CAGA,sIAIE,gBACF,CAEA,0CACE,sIAIE,YAAa,CAEb,gBAAkB,CADlB,6BAEF,CACF,CAEA,0CASE,6CAAsC,CAGtC,0FAA0E,CAD1E,2FAA2E,CAD3E,6FAA6E,CAF7E,kCAA2B,CAN3B,gBAAmB,CAInB,iCAAkC,CAClC,gBAMF,CAEA,uFAZE,oBAAqB,CACrB,mCAA8B,CAH9B,YAkBF,CAEA,2CAEE,oCAA6B,CAD7B,gDAEF,CAMA,gFACE,kCACF","file":"Table-50e68700.css","sourcesContent":["/* Container ---------------------------------------------------------------- */\n.TableContainer {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'title actions'\n    'divider divider'\n    'subtitle subtitle'\n    'filter filter'\n    'table table'\n    'footer footer';\n  column-gap: var(--base-size-8);\n}\n\n/* TableTitle */\n.TableTitle {\n  margin: 0;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 20px;\n  color: var(--fgColor-default);\n  grid-area: title;\n  align-self: center;\n}\n\n/* TableSubtitle */\n.TableSubtitle {\n  margin: 0;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-title-lineHeight-small);\n  color: var(--fgColor-default);\n  grid-area: subtitle;\n}\n\n/* TableActions */\n.TableActions {\n  display: flex;\n  column-gap: var(--base-size-8);\n  align-items: center;\n  grid-area: actions;\n  justify-self: end;\n}\n\n/* TableDivider */\n.TableDivider {\n  width: 100%;\n  height: 1px;\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--borderColor-default);\n  grid-area: divider;\n  margin-block-start: var(--base-size-16);\n  margin-block-end: var(--base-size-8);\n}\n\n/* Spacing before the table */\n.TableTitle + .TableOverflowWrapper,\n.TableSubtitle + .TableOverflowWrapper,\n.TableActions + .TableOverflowWrapper {\n  margin-block-start: var(--base-size-8);\n}\n\n.TableOverflowWrapper {\n  grid-area: table;\n}\n\n/* Table -------------------------------------------------------------------- */\n.Table {\n  /* Default table styles */\n  --table-border-radius: 0.375rem;\n  --table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem);\n  --table-font-size: 0.75rem;\n\n  display: grid;\n  width: 100%;\n  /* stylelint-disable-next-line primer/typography */\n  font-size: var(--table-font-size);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: calc(20 / 12);\n  border-spacing: 0;\n  /* stylelint-disable-next-line primer/borders */\n  border-collapse: separate;\n  background-color: var(--bgColor-default);\n  grid-area: table;\n  grid-template-columns: var(--grid-template-columns);\n\n  /* Density modes: condensed, normal, spacious */\n  &:where([data-cell-padding='condensed']) {\n    --cell-padding-block: 0.25rem;\n    --cell-padding-inline: 0.5rem;\n  }\n\n  &:where([data-cell-padding='normal']) {\n    --cell-padding-block: 0.5rem;\n    --cell-padding-inline: 0.75rem;\n  }\n\n  &:where([data-cell-padding='spacious']) {\n    --cell-padding-block: 0.75rem;\n    --cell-padding-inline: 1rem;\n  }\n}\n\n/* Borders */\n.TableCell:first-child,\n.TableHeader:first-child {\n  border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableCell:last-child,\n.TableHeader:last-child {\n  border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader,\n.TableCell {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n  text-align: start;\n  align-items: center;\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader:where([data-cell-align='end']),\n.TableCell:where([data-cell-align='end']) {\n  display: flex;\n  text-align: end;\n  justify-content: flex-end;\n}\n\n.TableHeader[data-cell-align='end'] .TableSortButton {\n  display: flex;\n  flex-direction: row-reverse;\n}\n\n.TableHead .TableRow:first-of-type .TableHeader {\n  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n/* Border radius */\n/* stylelint-disable-next-line selector-max-specificity */\n.TableHead .TableRow:first-of-type .TableHeader:first-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-top-left-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.TableHead .TableRow:first-of-type .TableHeader:last-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-top-right-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */\n.TableOverflowWrapper:last-child .Table .TableBody:last-of-type .TableRow:last-of-type .TableCell:first-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-bottom-left-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */\n.TableOverflowWrapper:last-child .Table .TableBody:last-of-type .TableRow:last-of-type .TableCell:last-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-bottom-right-radius: var(--table-border-radius);\n}\n\n/**\n * Offset padding to make sure type aligns regardless of cell padding\n * selection\n */\n.TableRow > *:first-child:not(.TableCellSkeleton),\n.TableRow > *:first-child .TableCellSkeletonItem {\n  padding-inline-start: var(--base-size-16);\n}\n\n.TableRow > *:last-child:not(.TableCellSkeleton),\n.TableRow > *:last-child .TableCellSkeletonItem {\n  padding-inline-end: var(--base-size-16);\n}\n\n/* TableHeader */\n.TableHeader {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-muted);\n  background-color: var(--bgColor-muted);\n  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader:where([aria-sort='descending']),\n.TableHeader:where([aria-sort='ascending']) {\n  color: var(--fgColor-default);\n}\n\n/* Control visibility of sort icons */\n.TableSortIcon {\n  visibility: hidden;\n}\n\n/* The ASC icon is visible if the header is sortable and is hovered or focused */\n.TableHeader:hover .TableSortIcon--ascending,\n.TableHeader .TableSortButton:focus .TableSortIcon--ascending {\n  visibility: visible;\n}\n\n/* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */\n.TableHeader[aria-sort='ascending'] .TableSortIcon--ascending,\n.TableHeader[aria-sort='descending'] .TableSortIcon--descending {\n  visibility: visible;\n}\n\n/* TableRow */\n.TableRow:hover .TableCell:not(.TableCellSkeleton) {\n  background-color: var(--control-transparent-bgColor-hover);\n}\n\n/* TableCell */\n.TableCell:where([scope='row']) {\n  display: flex;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  align-items: center;\n}\n\n/* TableCellSkeleton */\n.TableCellSkeleton {\n  padding: 0;\n}\n\n.TableCellSkeletonItems {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.TableCellSkeletonItem {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n\n  &:nth-of-type(5n + 1) {\n    --skeleton-item-width: 85%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --skeleton-item-width: 67.5%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --skeleton-item-width: 80%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --skeleton-item-width: 60%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --skeleton-item-width: 75%;\n  }\n}\n\n.TableCellSkeletonItem [data-component='SkeletonText'] {\n  width: var(--skeleton-item-width);\n}\n\n.TableCellSkeletonItem:not(:last-of-type) {\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableSortButton {\n  column-gap: 0.5rem;\n}\n\n/* Grid layout */\n.TableHead,\n.TableBody,\n.TableGroupHeaderBody,\n.TableRow {\n  display: contents;\n}\n\n@supports (grid-template-columns: subgrid) {\n  .TableHead,\n  .TableBody,\n  .TableGroupHeaderBody,\n  .TableRow {\n    display: grid;\n    grid-template-columns: subgrid;\n    grid-column: -1 /1;\n  }\n}\n\n.TableGroupHeaderCell {\n  display: flex;\n  grid-column: 1 / -1;\n  align-items: baseline;\n  column-gap: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n  text-align: start;\n  color: var(--fgColor-muted);\n  background-color: var(--bgColor-muted);\n  border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableGroupHeaderContent {\n  display: flex;\n  align-items: baseline;\n  column-gap: var(--base-size-8);\n}\n\n.TableGroupHeaderLabel {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n}\n\n.TableGroupHeaderCount {\n  color: var(--fgColor-muted);\n}\n\n.PlaceholderText {\n  color: var(--fgColor-muted);\n}\n"]}