@primer/react 37.32.0-rc.f8e94f384 → 38.0.0-rc.09f015db1

package/lib/DataTable/DataTable.d.ts

@@ -1,57 +0,0 @@
-import type React from 'react';
-import type { Column } from './column';
-import type { SortDirection } from './sorting';
-import type { UniqueRow } from './row';
-import type { ObjectPaths } from './utils';
-export type DataTableProps<Data extends UniqueRow> = {
-    /**
-     * Provide an id to an element which uniquely describes this table
-     */
-    'aria-describedby'?: string;
-    /**
-     * Provide an id to an element which uniquely labels this table
-     */
-    'aria-labelledby'?: string;
-    /**
-     * Specify the amount of space that should be available around the contents of
-     * a cell
-     */
-    cellPadding?: 'condensed' | 'normal' | 'spacious';
-    /**
-     * Provide a collection of the rows which will be rendered inside of the table
-     */
-    data: Array<Data>;
-    /**
-     * Provide the columns for the table and the fields in `data` to which they
-     * correspond
-     */
-    columns: Array<Column<Data>>;
-    /**
-     * Provide the id or field of the column by which the table is sorted. When
-     * using this `prop`, the input data must be sorted by this column in
-     * ascending order
-     */
-    initialSortColumn?: ObjectPaths<Data> | string | number;
-    /**
-     * Provide the sort direction that the table should be sorted by on the
-     * currently sorted column
-     */
-    initialSortDirection?: Exclude<SortDirection, 'NONE'>;
-    /**
-     * Provide a function to determine the unique identifier for each row.
-     * This function allows you to customize the key used for the row.
-     * By default, the table uses the `id` field from the data.
-     * @param rowData The row data object for which the ID is being retrieved.
-     * @returns The unique identifier for the row, which can be a string or number.
-     */
-    getRowId?: (rowData: Data) => string | number;
-    /**
-     * Fires every time the user clicks a sortable column header. It reports
-     * the column id that is now sorted and the direction after the toggle
-     * (never `"NONE"`).
-     */
-    onToggleSort?: (columnId: ObjectPaths<Data> | string | number, direction: Exclude<SortDirection, 'NONE'>) => void;
-};
-declare function DataTable<Data extends UniqueRow>({ 'aria-labelledby': labelledby, 'aria-describedby': describedby, cellPadding, columns, data, initialSortColumn, initialSortDirection, getRowId, onToggleSort, }: DataTableProps<Data>): React.JSX.Element;
-export { DataTable };
-//# sourceMappingURL=DataTable.d.ts.map

package/lib/DataTable/DataTable.js

@@ -1,147 +0,0 @@
-'use strict';
-
-var reactCompilerRuntime = require('react-compiler-runtime');
-var useTable = require('./useTable.js');
-var Table = require('./Table.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function defaultGetRowId(row) {
-  return row.id;
-}
-function DataTable(t0) {
-  const $ = reactCompilerRuntime.c(26);
-  const {
-    "aria-labelledby": labelledby,
-    "aria-describedby": describedby,
-    cellPadding,
-    columns,
-    data,
-    initialSortColumn,
-    initialSortDirection,
-    getRowId: t1,
-    onToggleSort
-  } = t0;
-  const getRowId = t1 === undefined ? defaultGetRowId : t1;
-  let t2;
-  if ($[0] !== columns || $[1] !== data || $[2] !== getRowId || $[3] !== initialSortColumn || $[4] !== initialSortDirection) {
-    t2 = {
-      data,
-      columns,
-      initialSortColumn,
-      initialSortDirection,
-      getRowId
-    };
-    $[0] = columns;
-    $[1] = data;
-    $[2] = getRowId;
-    $[3] = initialSortColumn;
-    $[4] = initialSortDirection;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  const {
-    headers,
-    rows,
-    actions,
-    gridTemplateColumns
-  } = useTable.useTable(t2);
-  let t3;
-  if ($[6] !== actions || $[7] !== headers || $[8] !== onToggleSort) {
-    let t4;
-    if ($[10] !== actions || $[11] !== onToggleSort) {
-      t4 = header => {
-        if (header.isSortable()) {
-          return /*#__PURE__*/jsxRuntime.jsx(Table.TableSortHeader, {
-            align: header.column.align,
-            direction: header.getSortDirection(),
-            onToggleSort: () => {
-              const nextDirection = header.getSortDirection() === "ASC" ? "DESC" : "ASC";
-              actions.sortBy(header);
-              onToggleSort === null || onToggleSort === void 0 ? void 0 : onToggleSort(header.id, nextDirection);
-            },
-            children: typeof header.column.header === "string" ? header.column.header : header.column.header()
-          }, header.id);
-        }
-        return /*#__PURE__*/jsxRuntime.jsx(Table.TableHeader, {
-          align: header.column.align,
-          children: typeof header.column.header === "string" ? header.column.header : header.column.header()
-        }, header.id);
-      };
-      $[10] = actions;
-      $[11] = onToggleSort;
-      $[12] = t4;
-    } else {
-      t4 = $[12];
-    }
-    t3 = headers.map(t4);
-    $[6] = actions;
-    $[7] = headers;
-    $[8] = onToggleSort;
-    $[9] = t3;
-  } else {
-    t3 = $[9];
-  }
-  let t4;
-  if ($[13] !== t3) {
-    t4 = /*#__PURE__*/jsxRuntime.jsx(Table.TableHead, {
-      children: /*#__PURE__*/jsxRuntime.jsx(Table.TableRow, {
-        children: t3
-      })
-    });
-    $[13] = t3;
-    $[14] = t4;
-  } else {
-    t4 = $[14];
-  }
-  let t5;
-  if ($[15] !== rows) {
-    t5 = rows.map(_temp);
-    $[15] = rows;
-    $[16] = t5;
-  } else {
-    t5 = $[16];
-  }
-  let t6;
-  if ($[17] !== t5) {
-    t6 = /*#__PURE__*/jsxRuntime.jsx(Table.TableBody, {
-      children: t5
-    });
-    $[17] = t5;
-    $[18] = t6;
-  } else {
-    t6 = $[18];
-  }
-  let t7;
-  if ($[19] !== cellPadding || $[20] !== describedby || $[21] !== gridTemplateColumns || $[22] !== labelledby || $[23] !== t4 || $[24] !== t6) {
-    t7 = /*#__PURE__*/jsxRuntime.jsxs(Table.Table, {
-      "aria-labelledby": labelledby,
-      "aria-describedby": describedby,
-      cellPadding: cellPadding,
-      gridTemplateColumns: gridTemplateColumns,
-      children: [t4, t6]
-    });
-    $[19] = cellPadding;
-    $[20] = describedby;
-    $[21] = gridTemplateColumns;
-    $[22] = labelledby;
-    $[23] = t4;
-    $[24] = t6;
-    $[25] = t7;
-  } else {
-    t7 = $[25];
-  }
-  return t7;
-}
-function _temp(row) {
-  return /*#__PURE__*/jsxRuntime.jsx(Table.TableRow, {
-    children: row.getCells().map(cell => /*#__PURE__*/jsxRuntime.jsx(Table.TableCell, {
-      scope: cell.rowHeader ? "row" : undefined,
-      align: cell.column.align,
-      children: cell.column.renderCell ? cell.column.renderCell(row.getValue()) : cell.getValue()
-    }, cell.id))
-  }, row.id);
-}
-_temp.displayName = "_temp";
-
-exports.DataTable = DataTable;

package/lib/DataTable/ErrorDialog.d.ts

@@ -1,18 +0,0 @@
-import type React from 'react';
-export type TableErrorDialogProps = React.PropsWithChildren<{
-    /**
-     * Provide an optional title for the dialog
-     * @default 'Error'
-     */
-    title?: string;
-    /**
-     * Provide an optional handler to be called when the user confirms to retry
-     */
-    onRetry?: () => void;
-    /**
-     * Provide an optional handler to be called when the user dismisses the dialog
-     */
-    onDismiss?: () => void;
-}>;
-export declare function ErrorDialog({ title, children, onRetry, onDismiss }: TableErrorDialogProps): React.JSX.Element;
-//# sourceMappingURL=ErrorDialog.d.ts.map

package/lib/DataTable/ErrorDialog.js

@@ -1,50 +0,0 @@
-'use strict';
-
-var reactCompilerRuntime = require('react-compiler-runtime');
-var ConfirmationDialog = require('../ConfirmationDialog/ConfirmationDialog.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function ErrorDialog(t0) {
-  const $ = reactCompilerRuntime.c(7);
-  const {
-    title: t1,
-    children,
-    onRetry,
-    onDismiss
-  } = t0;
-  const title = t1 === undefined ? "Error" : t1;
-  let t2;
-  if ($[0] !== onDismiss || $[1] !== onRetry) {
-    t2 = gesture => {
-      if (gesture === "confirm") {
-        onRetry === null || onRetry === void 0 ? void 0 : onRetry();
-      } else {
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-      }
-    };
-    $[0] = onDismiss;
-    $[1] = onRetry;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  let t3;
-  if ($[3] !== children || $[4] !== t2 || $[5] !== title) {
-    t3 = /*#__PURE__*/jsxRuntime.jsx(ConfirmationDialog.ConfirmationDialog, {
-      title: title,
-      onClose: t2,
-      confirmButtonContent: "Retry",
-      cancelButtonContent: "Dismiss",
-      children: children
-    });
-    $[3] = children;
-    $[4] = t2;
-    $[5] = title;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  return t3;
-}
-
-exports.ErrorDialog = ErrorDialog;

package/lib/DataTable/Pagination-b6f8418c.css

@@ -1,2 +0,0 @@
-.prc-DataTable-TablePagination-ZbY9p{align-items:center;border:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));border-end-end-radius:var(--borderRadius-medium,.375rem);border-end-start-radius:var(--borderRadius-medium,.375rem);border-top-width:0;column-gap:1rem;display:flex;grid-area:footer;justify-content:space-between;padding:var(--base-size-8,.5rem) var(--base-size-16,1rem);width:100%}@media ((max-width:calc(768px - 0.02px))){.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=narrow]>:not(:first-child):not(:last-child){display:none}.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=narrow]>:first-child{margin-inline-end:0}.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=narrow]>:last-child{margin-inline-start:0}}@media ((min-width:768px)){.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=regular]>:not(:first-child):not(:last-child){display:none}.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=regular]>:first-child{margin-inline-end:0}.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=regular]>:last-child{margin-inline-start:0}}@media ((min-width:1400px)){.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=wide]>:not(:first-child):not(:last-child){display:none}.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=wide]>:first-child{margin-inline-end:0}.prc-DataTable-TablePaginationSteps-Qqz6y[data-hidden-viewport-ranges*=wide]>:last-child{margin-inline-start:0}}.prc-DataTable-TablePaginationRange-Kp7GT{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);margin:0}.prc-DataTable-TablePaginationSteps-Qqz6y{align-items:center;color:var(--fgColor-default,var(--color-fg-default));display:flex;flex-wrap:wrap;font-size:var(--text-body-size-medium,.875rem);list-style:none;margin:0;padding:0}.prc-DataTable-TablePaginationStep-0FsgZ:first-of-type{margin-right:var(--base-size-16,1rem)}.prc-DataTable-TablePaginationStep-0FsgZ:last-of-type{margin-left:var(--base-size-16,1rem)}.prc-DataTable-TablePaginationAction-kKQK4{align-items:center;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,var(--color-fg-muted));display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:1.42857;padding:var(--base-size-8,.5rem);-webkit-user-select:none;user-select:none}.prc-DataTable-TablePaginationAction-kKQK4[data-has-page]{color:var(--fgColor-accent,var(--color-accent-fg))}.prc-DataTable-TablePaginationPage-MQm-t{align-items:center;border-radius:var(--borderRadius-medium,.375rem);display:flex;font-size:var(--text-body-size-medium,.875rem);justify-content:center;line-height:1.42857;min-height:2rem;min-width:2rem;padding:var(--base-size-8,.5rem) calc((var(--base-size-32,2rem) - var(--base-size-20,1.25rem))/2);-webkit-user-select:none;user-select:none}.prc-DataTable-TablePaginationAction-kKQK4[data-has-page]:focus,.prc-DataTable-TablePaginationAction-kKQK4[data-has-page]:hover,.prc-DataTable-TablePaginationPage-MQm-t:focus,.prc-DataTable-TablePaginationPage-MQm-t:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.prc-DataTable-TablePaginationPage-MQm-t[data-active=true]{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-DataTable-TablePaginationPage-MQm-t[data-active=true]:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--bgColor-accent-emphasis,var(--color-accent-emphasis));outline-offset:-2px}.prc-DataTable-TablePaginationTruncationStep-HEMTY{align-items:center;display:flex;justify-content:center;min-height:2rem;min-width:2rem;-webkit-user-select:none;user-select:none}
-/*# sourceMappingURL=Pagination-b6f8418c.css.map */

package/lib/DataTable/Pagination-b6f8418c.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/DataTable/Pagination.module.css"],"names":[],"mappings":"AAAA,qCAEE,kBAAmB,CAMnB,oGAAgE,CAGhE,wDAAiD,CADjD,0DAAmD,CADnD,kBAAmB,CALnB,eAAgB,CAHhB,YAAa,CAKb,gBAAiB,CAHjB,6BAA8B,CAI9B,yDAA+C,CAF/C,UAOF,CAEA,0CACE,mHACE,YACF,CAEA,4FACE,mBACF,CAEA,2FACE,qBACF,CACF,CAEA,2BACE,oHACE,YACF,CAEA,6FACE,mBACF,CAEA,4FACE,qBACF,CACF,CAEA,4BACE,iHACE,YACF,CAEA,0FACE,mBACF,CAEA,yFACE,qBACF,CACF,CAEA,0CACE,gDAA2B,CAC3B,4CAAsC,CACtC,QACF,CAEA,0CAEE,kBAAmB,CAGnB,oDAA6B,CAJ7B,YAAa,CAEb,cAAe,CAGf,8CAAuC,CAFvC,eAAgB,CAGhB,QAAS,CACT,SACF,CAEA,uDACE,qCACF,CAEA,sDACE,oCACF,CAEA,2CAEE,kBAAmB,CAOnB,gDAAyC,CANzC,gDAA2B,CAF3B,YAAa,CAGb,8CAAuC,CAEvC,mBAA0B,CAE1B,gCAA2B,CAD3B,wBAAiB,CAAjB,gBAGF,CAEA,0DACE,kDACF,CAEA,yCAIE,kBAAmB,CAMnB,gDAAyC,CAPzC,YAAa,CAGb,8CAAuC,CADvC,sBAAuB,CAGvB,mBAA0B,CAN1B,eAAgB,CADhB,cAAe,CAUf,iGAAiF,CAFjF,wBAAiB,CAAjB,gBAGF,CAEA,8NAIE,wGACF,CAEA,2DACE,4EAAgD,CAChD,2DACF,CAEA,yEAIE,gFAAqD,CAHrD,6EAAiD,CACjD,mBAGF,CAEA,mDAEE,kBAAmB,CADnB,YAAa,CAEb,sBAAuB,CAEvB,eAAgB,CADhB,cAAe,CAEf,wBAAiB,CAAjB,gBACF","file":"Pagination-b6f8418c.css","sourcesContent":[".TablePagination {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  column-gap: 1rem;\n  width: 100%;\n  grid-area: footer;\n  padding: var(--base-size-8) var(--base-size-16);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-top-width: 0;\n  border-end-start-radius: var(--borderRadius-medium);\n  border-end-end-radius: var(--borderRadius-medium);\n}\n\n@media ((max-width: calc(768px - 0.02px))) {\n  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) {\n    display: none;\n  }\n\n  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child {\n    margin-inline-end: 0;\n  }\n\n  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child {\n    margin-inline-start: 0;\n  }\n}\n\n@media ((min-width: 768px)) {\n  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) {\n    display: none;\n  }\n\n  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child {\n    margin-inline-end: 0;\n  }\n\n  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child {\n    margin-inline-start: 0;\n  }\n}\n\n@media ((min-width: 1400px)) {\n  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) {\n    display: none;\n  }\n\n  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:first-child {\n    margin-inline-end: 0;\n  }\n\n  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:last-child {\n    margin-inline-start: 0;\n  }\n}\n\n.TablePaginationRange {\n  color: var(--fgColor-muted);\n  font-size: var(--text-body-size-small);\n  margin: 0;\n}\n\n.TablePaginationSteps {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  list-style: none;\n  color: var(--fgColor-default);\n  font-size: var(--text-body-size-medium);\n  margin: 0;\n  padding: 0;\n}\n\n.TablePaginationStep:first-of-type {\n  margin-right: var(--base-size-16);\n}\n\n.TablePaginationStep:last-of-type {\n  margin-left: var(--base-size-16);\n}\n\n.TablePaginationAction {\n  display: flex;\n  align-items: center;\n  color: var(--fgColor-muted);\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: calc(20 / 14);\n  user-select: none;\n  padding: var(--base-size-8);\n  border-radius: var(--borderRadius-medium);\n}\n\n.TablePaginationAction[data-has-page] {\n  color: var(--fgColor-accent);\n}\n\n.TablePaginationPage {\n  min-width: 2rem;\n  min-height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--text-body-size-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: calc(20 / 14);\n  user-select: none;\n  border-radius: var(--borderRadius-medium);\n  padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */\n}\n\n.TablePaginationAction[data-has-page]:hover,\n.TablePaginationAction[data-has-page]:focus,\n.TablePaginationPage:hover,\n.TablePaginationPage:focus {\n  background-color: var(--control-transparent-bgColor-hover);\n}\n\n.TablePaginationPage[data-active='true'] {\n  background-color: var(--bgColor-accent-emphasis);\n  color: var(--fgColor-onEmphasis);\n}\n\n.TablePaginationPage[data-active='true']:focus-visible {\n  outline: 2px solid var(--bgColor-accent-emphasis);\n  outline-offset: -2px;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n\n.TablePaginationTruncationStep {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 2rem;\n  min-height: 2rem;\n  user-select: none;\n}\n"]}

package/lib/DataTable/Pagination.d.ts

@@ -1,43 +0,0 @@
-import type React from 'react';
-import type { ResponsiveValue } from '../hooks/useResponsiveValue';
-export type PaginationProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'> & {
-    /**
-     * Provide a label for the navigation landmark rendered by this component
-     */
-    'aria-label': string;
-    /**
-     * Provide an optional index to specify the default selected page
-     */
-    defaultPageIndex?: number;
-    /**
-     * Optionally provide an `id` that is placed on the navigation landmark
-     * rendered by this component
-     */
-    id?: string;
-    /**
-     * Optionally provide a handler that is called whenever the pagination state
-     * is updated
-     */
-    onChange?: (state: PaginationState) => void;
-    /**
-     * Optionally specify the number of items within a page
-     */
-    pageSize?: number;
-    /**
-     * Whether to show the page numbers
-     */
-    showPages?: boolean | ResponsiveValue<boolean>;
-    /**
-     * Specify the total number of items within the collection
-     */
-    totalCount: number;
-};
-export declare function Pagination({ 'aria-label': label, defaultPageIndex, id, onChange, pageSize, showPages, totalCount, }: PaginationProps): React.JSX.Element;
-type PaginationState = {
-    /**
-     * The index of currently selected page
-     */
-    pageIndex: number;
-};
-export {};
-//# sourceMappingURL=Pagination.d.ts.map