@primer/react 38.0.0-rc.195178541 → 38.0.0-rc.2

package/lib-esm/DataTable/Pagination.js

@@ -1,38 +1,16 @@
 import { c } from 'react-compiler-runtime';
 import { ChevronLeftIcon, ChevronRightIcon } from '@primer/octicons-react';
 import { useCallback, useMemo, useState } from 'react';
-import styled from 'styled-components';
-import { get } from '../constants.js';
 import { Button } from '../internal/components/ButtonReset.js';
 import { LiveRegion, LiveRegionOutlet, Message } from '../internal/components/LiveRegion.js';
 import { warning } from '../utils/warning.js';
 import { viewportRanges } from '../hooks/useResponsiveValue.js';
 import { buildPaginationModel } from '../Pagination/model.js';
+import classes from './Pagination.module.css.js';
+import { clsx } from 'clsx';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 
-const StyledPagination = styled.nav.withConfig({
-  displayName: "Pagination__StyledPagination",
-  componentId: "sc-1auq45q-0"
-})(["display:flex;align-items:center;justify-content:space-between;column-gap:1rem;width:100%;grid-area:footer;padding:0.5rem 1rem;border:1px solid ", ";border-top-width:0;border-end-start-radius:6px;border-end-end-radius:6px;.TablePaginationRange{color:", ";font-size:0.75rem;margin:0;}.TablePaginationSteps{display:flex;align-items:center;flex-wrap:wrap;list-style:none;color:", ";font-size:0.875rem;margin:0;padding:0;}.TablePaginationStep:first-of-type{margin-right:1rem;}.TablePaginationStep:last-of-type{margin-left:1rem;}.TablePaginationAction{display:flex;align-items:center;color:", ";font-size:0.875rem;line-height:calc(20 / 14);user-select:none;padding:0.5rem;border-radius:6px;}.TablePaginationAction[data-has-page]{color:", ";}.TablePaginationPage{min-width:2rem;min-height:2rem;display:flex;align-items:center;justify-content:center;font-size:0.875rem;line-height:calc(20 / 14);user-select:none;border-radius:6px;padding:0.5rem calc((2rem - 1.25rem) / 2);}.TablePaginationAction[data-has-page]:hover,.TablePaginationAction[data-has-page]:focus,.TablePaginationPage:hover,.TablePaginationPage:focus{background-color:", ";}.TablePaginationPage[data-active='true']{background-color:", ";color:", ";}.TablePaginationPage[data-active='true']:focus-visible{outline:2px solid var(--bgColor-accent-emphasis);outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis);}.TablePaginationTruncationStep{display:flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;user-select:none;}", ""], get('colors.border.default'), get('colors.fg.muted'), get('colors.fg.default'), get('colors.fg.muted'), get('colors.accent.fg'), get('colors.actionListItem.default.hoverBg'), get('colors.accent.emphasis'), get('colors.fg.onEmphasis'),
-// Hides pages based on the viewport range passed to `showPages`
-Object.keys(viewportRanges).map(viewportRangeKey => {
-  return `
-      @media (${viewportRanges[viewportRangeKey]}) {
-        .TablePaginationSteps[data-hidden-viewport-ranges*='${viewportRangeKey}'] > *:not(:first-child):not(:last-child) {
-          display: none;
-        }
-
-        .TablePaginationSteps[data-hidden-viewport-ranges*='${viewportRangeKey}'] > *:first-child {
-          margin-inline-end: 0;
-        }
-
-        .TablePaginationSteps[data-hidden-viewport-ranges*='${viewportRangeKey}'] > *:last-child {
-          margin-inline-start: 0;
-        }
-      }
-    `;
-}).join(''));
 const defaultShowPages = {
   narrow: false
 };
@@ -75,20 +53,20 @@ function Pagination({
     return buildPaginationModel(pageCount, pageIndex + 1, !!showPages, 1, 2);
   }, [pageCount, pageIndex, showPages]);
   return /*#__PURE__*/jsxs(LiveRegion, {
-    children: [/*#__PURE__*/jsx(LiveRegionOutlet, {}), /*#__PURE__*/jsxs(StyledPagination, {
+    children: [/*#__PURE__*/jsx(LiveRegionOutlet, {}), /*#__PURE__*/jsxs("nav", {
       "aria-label": label,
-      className: "TablePagination",
+      className: clsx('TablePagination', classes.TablePagination),
       id: id,
       children: [/*#__PURE__*/jsx(Range, {
         pageStart: pageStart,
         pageEnd: pageEnd,
         totalCount: totalCount
       }), /*#__PURE__*/jsxs("ol", {
-        className: "TablePaginationSteps",
+        className: clsx('TablePaginationSteps', classes.TablePaginationSteps),
         "data-hidden-viewport-ranges": getViewportRangesToHidePages().join(' '),
         children: [/*#__PURE__*/jsx(Step, {
           children: /*#__PURE__*/jsxs(Button, {
-            className: "TablePaginationAction",
+            className: clsx('TablePaginationAction', classes.TablePaginationAction),
             type: "button",
             "data-has-page": hasPreviousPage ? true : undefined,
             "aria-disabled": !hasPreviousPage ? true : undefined,
@@ -99,7 +77,6 @@ function Pagination({
               selectPreviousPage();
             },
             children: [hasPreviousPage ? /*#__PURE__*/jsx(ChevronLeftIcon, {}) : null, /*#__PURE__*/jsx("span", {
-              className: "TablePaginationActionLabel",
               children: "Previous"
             }), /*#__PURE__*/jsx(VisuallyHidden, {
               children: "\xA0page"
@@ -123,7 +100,7 @@ function Pagination({
           }
         }), /*#__PURE__*/jsx(Step, {
           children: /*#__PURE__*/jsxs(Button, {
-            className: "TablePaginationAction",
+            className: clsx('TablePaginationAction', classes.TablePaginationAction),
             type: "button",
             "data-has-page": hasNextPage ? true : undefined,
             "aria-disabled": !hasNextPage ? true : undefined,
@@ -134,7 +111,6 @@ function Pagination({
               selectNextPage();
             },
             children: [/*#__PURE__*/jsx("span", {
-              className: "TablePaginationActionLabel",
               children: "Next"
             }), /*#__PURE__*/jsx(VisuallyHidden, {
               children: "\xA0page"
@@ -147,7 +123,7 @@ function Pagination({
 }
 Pagination.displayName = "Pagination";
 function Range(t0) {
-  const $ = c(11);
+  const $ = c(12);
   const {
     pageStart,
     pageEnd,
@@ -167,46 +143,53 @@ function Range(t0) {
     t2 = $[1];
   }
   let t3;
-  let t4;
   if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = /*#__PURE__*/jsx(VisuallyHidden, {
+    t3 = clsx("TablePaginationRange", classes.TablePaginationRange);
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  let t5;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = /*#__PURE__*/jsx(VisuallyHidden, {
       children: "\xA0through\xA0"
     });
-    t4 = /*#__PURE__*/jsx("span", {
+    t5 = /*#__PURE__*/jsx("span", {
       "aria-hidden": "true",
       children: "\u2012"
     });
-    $[2] = t3;
     $[3] = t4;
+    $[4] = t5;
   } else {
-    t3 = $[2];
     t4 = $[3];
+    t5 = $[4];
   }
-  let t5;
-  if ($[4] !== end || $[5] !== start || $[6] !== totalCount) {
-    t5 = /*#__PURE__*/jsxs("p", {
-      className: "TablePaginationRange",
-      children: [start, t3, t4, end, " of ", totalCount]
+  let t6;
+  if ($[5] !== end || $[6] !== start || $[7] !== totalCount) {
+    t6 = /*#__PURE__*/jsxs("p", {
+      className: t3,
+      children: [start, t4, t5, end, " of ", totalCount]
     });
-    $[4] = end;
-    $[5] = start;
-    $[6] = totalCount;
-    $[7] = t5;
+    $[5] = end;
+    $[6] = start;
+    $[7] = totalCount;
+    $[8] = t6;
   } else {
-    t5 = $[7];
+    t6 = $[8];
   }
-  let t6;
-  if ($[8] !== t2 || $[9] !== t5) {
-    t6 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t2, t5]
+  let t7;
+  if ($[9] !== t2 || $[10] !== t6) {
+    t7 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t2, t6]
     });
-    $[8] = t2;
-    $[9] = t5;
+    $[9] = t2;
     $[10] = t6;
+    $[11] = t7;
   } else {
-    t6 = $[10];
+    t7 = $[11];
   }
-  return t6;
+  return t7;
 }
 function TruncationStep() {
   const $ = c(1);
@@ -214,7 +197,7 @@ function TruncationStep() {
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = /*#__PURE__*/jsx("li", {
       "aria-hidden": "true",
-      className: "TablePaginationTruncationStep",
+      className: clsx("TablePaginationTruncationStep", classes.TablePaginationTruncationStep),
       children: "\u2026"
     });
     $[0] = t0;
@@ -224,60 +207,74 @@ function TruncationStep() {
   return t0;
 }
 function Step(t0) {
-  const $ = c(2);
+  const $ = c(3);
   const {
     children
   } = t0;
   let t1;
-  if ($[0] !== children) {
-    t1 = /*#__PURE__*/jsx("li", {
-      className: "TablePaginationStep",
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = clsx("TablePaginationStep", classes.TablePaginationStep);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== children) {
+    t2 = /*#__PURE__*/jsx("li", {
+      className: t1,
       children: children
     });
-    $[0] = children;
-    $[1] = t1;
+    $[1] = children;
+    $[2] = t2;
   } else {
-    t1 = $[1];
+    t2 = $[2];
   }
-  return t1;
+  return t2;
 }
 function Page(t0) {
-  const $ = c(6);
+  const $ = c(7);
   const {
     active,
     children,
     onClick
   } = t0;
-  const t1 = active ? true : undefined;
-  const t2 = active ? true : undefined;
-  let t3;
+  let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = /*#__PURE__*/jsx(VisuallyHidden, {
+    t1 = clsx("TablePaginationPage", classes.TablePaginationPage);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const t2 = active ? true : undefined;
+  const t3 = active ? true : undefined;
+  let t4;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = /*#__PURE__*/jsx(VisuallyHidden, {
       children: "Page\xA0"
     });
-    $[0] = t3;
+    $[1] = t4;
   } else {
-    t3 = $[0];
+    t4 = $[1];
   }
-  let t4;
-  if ($[1] !== children || $[2] !== onClick || $[3] !== t1 || $[4] !== t2) {
-    t4 = /*#__PURE__*/jsxs(Button, {
-      className: "TablePaginationPage",
+  let t5;
+  if ($[2] !== children || $[3] !== onClick || $[4] !== t2 || $[5] !== t3) {
+    t5 = /*#__PURE__*/jsxs(Button, {
+      className: t1,
       type: "button",
-      "data-active": t1,
-      "aria-current": t2,
+      "data-active": t2,
+      "aria-current": t3,
       onClick: onClick,
-      children: [t3, children]
+      children: [t4, children]
     });
-    $[1] = children;
-    $[2] = onClick;
-    $[3] = t1;
+    $[2] = children;
+    $[3] = onClick;
     $[4] = t2;
-    $[5] = t4;
+    $[5] = t3;
+    $[6] = t5;
   } else {
-    t4 = $[5];
+    t5 = $[6];
   }
-  return t4;
+  return t5;
 }
 function usePagination(config) {
   const $ = c(24);

package/lib-esm/DataTable/Pagination.module.css.js

@@ -0,0 +1,5 @@
+import './Pagination-b6f8418c.css';
+
+var classes = {"TablePagination":"prc-DataTable-TablePagination-ZbY9p","TablePaginationSteps":"prc-DataTable-TablePaginationSteps-Qqz6y","TablePaginationRange":"prc-DataTable-TablePaginationRange-Kp7GT","TablePaginationStep":"prc-DataTable-TablePaginationStep-0FsgZ","TablePaginationAction":"prc-DataTable-TablePaginationAction-kKQK4","TablePaginationPage":"prc-DataTable-TablePaginationPage-MQm-t","TablePaginationTruncationStep":"prc-DataTable-TablePaginationTruncationStep-HEMTY"};
+
+export { classes as default };

package/lib-esm/DataTable/Table.d.ts

@@ -81,7 +81,7 @@ declare function TableCell({ align, className, children, scope, ...rest }: Table
 type TableCellPlaceholderProps = React.PropsWithChildren;
 declare function TableCellPlaceholder({ children }: TableCellPlaceholderProps): React.JSX.Element;
 export type TableContainerProps = React.PropsWithChildren<SxProp & React.HTMLAttributes<HTMLDivElement>>;
-declare function TableContainer({ children, className, sx: sxProp, ...rest }: TableContainerProps): React.JSX.Element;
+declare function TableContainer({ children, className, ...rest }: TableContainerProps): React.JSX.Element;
 export type TableTitleProps = React.PropsWithChildren<{
     /**
      * Provide an alternate element or component to use as the container for

package/lib-esm/DataTable/Table.js

@@ -5,13 +5,12 @@ import React from 'react';
 import VisuallyHidden from '../_VisuallyHidden.js';
 import { SortDirection } from './sorting.js';
 import { useTableLayout } from './useTable.js';
-import { SkeletonText } from '../experimental/Skeleton/SkeletonText.js';
 import { Button } from '../internal/components/ButtonReset.js';
 import classes from './Table.module.css.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ScrollableRegion } from '../ScrollableRegion/ScrollableRegion.js';
+import { SkeletonText } from '../SkeletonText/SkeletonText.js';
 import Text from '../Text/Text.js';
 
 const Table = /*#__PURE__*/React.forwardRef(function Table(t0, ref) {
@@ -456,55 +455,48 @@ function TableCellPlaceholder(t0) {
 // ----------------------------------------------------------------------------
 
 function TableContainer(t0) {
-  const $ = c(12);
+  const $ = c(10);
   let children;
   let className;
   let rest;
-  let t1;
   if ($[0] !== t0) {
     ({
       children,
       className,
-      sx: t1,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
     $[2] = className;
     $[3] = rest;
-    $[4] = t1;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
-    t1 = $[4];
   }
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  let t2;
-  if ($[5] !== className) {
-    t2 = clsx(className, classes.TableContainer);
-    $[5] = className;
-    $[6] = t2;
+  let t1;
+  if ($[4] !== className) {
+    t1 = clsx(className, classes.TableContainer);
+    $[4] = className;
+    $[5] = t1;
   } else {
-    t2 = $[6];
+    t1 = $[5];
   }
-  let t3;
-  if ($[7] !== children || $[8] !== rest || $[9] !== sxProp || $[10] !== t2) {
-    t3 = /*#__PURE__*/jsx(BoxWithFallback, {
+  let t2;
+  if ($[6] !== children || $[7] !== rest || $[8] !== t1) {
+    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
       ...rest,
-      className: t2,
-      sx: sxProp,
+      className: t1,
       children: children
     });
-    $[7] = children;
-    $[8] = rest;
-    $[9] = sxProp;
-    $[10] = t2;
-    $[11] = t3;
+    $[6] = children;
+    $[7] = rest;
+    $[8] = t1;
+    $[9] = t2;
   } else {
-    t3 = $[11];
+    t2 = $[9];
   }
-  return t3;
+  return t2;
 }
 const TableTitle = /*#__PURE__*/React.forwardRef(function TableTitle(t0, ref) {
   const $ = c(6);

package/lib-esm/DataTable/storyHelpers.d.ts

@@ -1,4 +1,4 @@
-import type { InputType } from '@storybook/csf';
+import type { InputType } from 'storybook/internal/csf';
 export type ColWidthArgTypes = Record<string, string>;
 export declare const getColumnWidthArgTypes: (colCount: number) => InputType;
 //# sourceMappingURL=storyHelpers.d.ts.map

package/lib-esm/DataTable/useTable.js

@@ -1,9 +1,9 @@
 import { c } from 'react-compiler-runtime';
 import { useState } from 'react';
-import { strategies, SortDirection, transition, DEFAULT_SORT_DIRECTION } from './sorting.js';
+import { strategies, SortDirection, DEFAULT_SORT_DIRECTION, transition } from './sorting.js';
 
 function useTable(t0) {
-  const $ = c(26);
+  const $ = c(20);
   const {
     columns,
     data,
@@ -41,12 +41,13 @@ function useTable(t0) {
       }
     }
   }
-  let headers;
-  let sortBy;
-  if ($[4] !== columns || $[5] !== data || $[6] !== prevData || $[7] !== sortByColumn) {
-    let t2;
-    if ($[10] !== sortByColumn) {
-      t2 = column_1 => {
+  let t2;
+  let t3;
+  let t4;
+  if ($[4] !== columns || $[5] !== data || $[6] !== getRowId || $[7] !== prevData || $[8] !== rowOrder || $[9] !== sortByColumn) {
+    let t5;
+    if ($[13] !== sortByColumn) {
+      t5 = column_1 => {
         var _column_1$id;
         const id_0 = (_column_1$id = column_1.id) !== null && _column_1$id !== void 0 ? _column_1$id : column_1.field;
         if (id_0 === undefined) {
@@ -67,12 +68,12 @@ function useTable(t0) {
           }
         };
       };
-      $[10] = sortByColumn;
-      $[11] = t2;
+      $[13] = sortByColumn;
+      $[14] = t5;
     } else {
-      t2 = $[11];
+      t5 = $[14];
     }
-    headers = columns.map(t2);
+    const headers = columns.map(t5);
     if (data !== prevData) {
       setPrevData(data);
       setRowOrder(data);
@@ -80,7 +81,7 @@ function useTable(t0) {
         sortRows(sortByColumn);
       }
     }
-    sortBy = function sortBy(header) {
+    const sortBy = function sortBy(header) {
       const sortState = {
         id: header.id,
         direction: sortByColumn && sortByColumn.id === header.id ? transition(sortByColumn.direction) : DEFAULT_SORT_DIRECTION
@@ -124,86 +125,66 @@ function useTable(t0) {
         return 0;
       }));
     }
-    $[4] = columns;
-    $[5] = data;
-    $[6] = prevData;
-    $[7] = sortByColumn;
-    $[8] = headers;
-    $[9] = sortBy;
-  } else {
-    headers = $[8];
-    sortBy = $[9];
-  }
-  let t2;
-  if ($[12] !== getRowId || $[13] !== headers || $[14] !== rowOrder) {
-    let t3;
-    if ($[16] !== getRowId || $[17] !== headers) {
-      t3 = row => {
-        const rowId = getRowId(row);
-        return {
-          id: `${rowId}`,
-          getValue() {
-            return row;
-          },
-          getCells() {
-            return headers.map(header_2 => {
-              var _header_2$column$rowH;
-              return {
-                id: `${rowId}:${header_2.id}`,
-                column: header_2.column,
-                rowHeader: (_header_2$column$rowH = header_2.column.rowHeader) !== null && _header_2$column$rowH !== void 0 ? _header_2$column$rowH : false,
-                getValue() {
-                  if (header_2.column.field !== undefined) {
-                    return get(row, header_2.column.field);
-                  }
-                  throw new Error(`Unable to get value for column header ${header_2.id}`);
+    t2 = headers;
+    t3 = rowOrder.map(row => {
+      const rowId = getRowId(row);
+      return {
+        id: `${rowId}`,
+        getValue() {
+          return row;
+        },
+        getCells() {
+          return headers.map(header_2 => {
+            var _header_2$column$rowH;
+            return {
+              id: `${rowId}:${header_2.id}`,
+              column: header_2.column,
+              rowHeader: (_header_2$column$rowH = header_2.column.rowHeader) !== null && _header_2$column$rowH !== void 0 ? _header_2$column$rowH : false,
+              getValue() {
+                if (header_2.column.field !== undefined) {
+                  return get(row, header_2.column.field);
                 }
-              };
-            });
-          }
-        };
+                throw new Error(`Unable to get value for column header ${header_2.id}`);
+              }
+            };
+          });
+        }
       };
-      $[16] = getRowId;
-      $[17] = headers;
-      $[18] = t3;
-    } else {
-      t3 = $[18];
-    }
-    t2 = rowOrder.map(t3);
-    $[12] = getRowId;
-    $[13] = headers;
-    $[14] = rowOrder;
-    $[15] = t2;
-  } else {
-    t2 = $[15];
-  }
-  let t3;
-  if ($[19] !== sortBy) {
-    t3 = {
+    });
+    t4 = {
       sortBy
     };
-    $[19] = sortBy;
-    $[20] = t3;
+    $[4] = columns;
+    $[5] = data;
+    $[6] = getRowId;
+    $[7] = prevData;
+    $[8] = rowOrder;
+    $[9] = sortByColumn;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
   } else {
-    t3 = $[20];
+    t2 = $[10];
+    t3 = $[11];
+    t4 = $[12];
   }
-  let t4;
-  if ($[21] !== gridTemplateColumns || $[22] !== headers || $[23] !== t2 || $[24] !== t3) {
-    t4 = {
-      headers,
-      rows: t2,
-      actions: t3,
+  let t5;
+  if ($[15] !== gridTemplateColumns || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
+    t5 = {
+      headers: t2,
+      rows: t3,
+      actions: t4,
       gridTemplateColumns
     };
-    $[21] = gridTemplateColumns;
-    $[22] = headers;
-    $[23] = t2;
-    $[24] = t3;
-    $[25] = t4;
+    $[15] = gridTemplateColumns;
+    $[16] = t2;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
   } else {
-    t4 = $[25];
+    t5 = $[19];
   }
-  return t4;
+  return t5;
 }
 function getInitialSortState(columns, initialSortColumn, initialSortDirection) {
   if (initialSortColumn !== undefined) {

package/lib-esm/Details/Details.d.ts

@@ -1,5 +1,4 @@
 import React, { type ComponentPropsWithoutRef } from 'react';
-import type { SxProp } from '../sx';
 export type SummaryProps<As extends React.ElementType> = {
     /**
      * HTML element to render summary as.
@@ -12,9 +11,9 @@ declare namespace Summary {
     var displayName: string;
 }
 export { Summary };
-declare const Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & SxProp & React.RefAttributes<HTMLDetailsElement>> & {
+declare const Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & React.RefAttributes<HTMLDetailsElement>> & {
     Summary: typeof Summary;
 };
-export type DetailsProps = ComponentPropsWithoutRef<'details'> & SxProp;
+export type DetailsProps = ComponentPropsWithoutRef<'details'>;
 export default Details;
 //# sourceMappingURL=Details.d.ts.map