@primer/react 37.29.0-rc.af59a9de1 → 38.0.0-rc.195178541

package/lib-esm/ButtonGroup/ButtonGroup.js

@@ -3,22 +3,25 @@ import React from 'react';
 import classes from './ButtonGroup.module.css.js';
 import { clsx } from 'clsx';
 import { useFocusZone } from '../hooks/useFocusZone.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { jsx } from 'react/jsx-runtime';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
+import Box from '../Box/Box.js';
 import { FocusKeys } from '@primer/behaviors';
 
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(t0, forwardRef) {
-  const $ = c(18);
+  const $ = c(28);
   let children;
   let className;
   let rest;
   let role;
+  let sx;
   if ($[0] !== t0) {
     ({
       children,
       className,
       role,
+      sx,
       ...rest
     } = t0);
     $[0] = t0;
@@ -26,63 +29,97 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(t0, forwa
     $[2] = className;
     $[3] = rest;
     $[4] = role;
+    $[5] = sx;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
     role = $[4];
+    sx = $[5];
   }
   let t1;
-  if ($[5] !== children) {
+  if ($[6] !== children) {
     t1 = React.Children.map(children, _temp);
-    $[5] = children;
-    $[6] = t1;
+    $[6] = children;
+    $[7] = t1;
   } else {
-    t1 = $[6];
+    t1 = $[7];
   }
   const buttons = t1;
   const buttonRef = useProvidedRefOrCreate(forwardRef);
   const t2 = role !== "toolbar";
   let t3;
-  if ($[7] !== buttonRef || $[8] !== t2) {
+  if ($[8] !== buttonRef || $[9] !== t2) {
     t3 = {
       containerRef: buttonRef,
       disabled: t2,
       bindKeys: FocusKeys.ArrowHorizontal,
       focusOutBehavior: "wrap"
     };
-    $[7] = buttonRef;
-    $[8] = t2;
-    $[9] = t3;
+    $[8] = buttonRef;
+    $[9] = t2;
+    $[10] = t3;
   } else {
-    t3 = $[9];
+    t3 = $[10];
   }
   useFocusZone(t3);
+  if (sx !== defaultSxProp) {
+    let t4;
+    if ($[11] !== className) {
+      t4 = clsx(className, classes.ButtonGroup);
+      $[11] = className;
+      $[12] = t4;
+    } else {
+      t4 = $[12];
+    }
+    let t5;
+    if ($[13] !== buttonRef || $[14] !== buttons || $[15] !== rest || $[16] !== role || $[17] !== sx || $[18] !== t4) {
+      t5 = /*#__PURE__*/jsx(Box, {
+        as: "div",
+        className: t4,
+        role: role,
+        ...rest,
+        sx: sx,
+        ref: buttonRef,
+        children: buttons
+      });
+      $[13] = buttonRef;
+      $[14] = buttons;
+      $[15] = rest;
+      $[16] = role;
+      $[17] = sx;
+      $[18] = t4;
+      $[19] = t5;
+    } else {
+      t5 = $[19];
+    }
+    return t5;
+  }
   let t4;
-  if ($[10] !== className) {
+  if ($[20] !== className) {
     t4 = clsx(className, classes.ButtonGroup);
-    $[10] = className;
-    $[11] = t4;
+    $[20] = className;
+    $[21] = t4;
   } else {
-    t4 = $[11];
+    t4 = $[21];
   }
   let t5;
-  if ($[12] !== buttonRef || $[13] !== buttons || $[14] !== rest || $[15] !== role || $[16] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
+  if ($[22] !== buttonRef || $[23] !== buttons || $[24] !== rest || $[25] !== role || $[26] !== t4) {
+    t5 = /*#__PURE__*/jsx("div", {
       ref: buttonRef,
       className: t4,
       role: role,
       ...rest,
       children: buttons
     });
-    $[12] = buttonRef;
-    $[13] = buttons;
-    $[14] = rest;
-    $[15] = role;
-    $[16] = t4;
-    $[17] = t5;
+    $[22] = buttonRef;
+    $[23] = buttons;
+    $[24] = rest;
+    $[25] = role;
+    $[26] = t4;
+    $[27] = t5;
   } else {
-    t5 = $[17];
+    t5 = $[27];
   }
   return t5;
 });

package/lib-esm/CounterLabel/CounterLabel.js

@@ -1,20 +1,23 @@
 import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import classes from './CounterLabel.module.css.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Box from '../Box/Box.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 
 const CounterLabel = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(20);
+  const $ = c(31);
   let children;
   let className;
   let rest;
   let t1;
+  let t2;
   if ($[0] !== t0) {
     ({
       scheme: t1,
+      sx: t2,
       className,
       children,
       ...rest
@@ -24,75 +27,116 @@ const CounterLabel = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     $[2] = className;
     $[3] = rest;
     $[4] = t1;
+    $[5] = t2;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
     t1 = $[4];
+    t2 = $[5];
   }
   const scheme = t1 === undefined ? "secondary" : t1;
-  let t2;
-  if ($[5] !== children) {
-    t2 = /*#__PURE__*/jsxs(VisuallyHidden, {
+  const sx = t2 === undefined ? defaultSxProp : t2;
+  let t3;
+  if ($[6] !== children) {
+    t3 = /*#__PURE__*/jsxs(VisuallyHidden, {
       children: ["\xA0(", children, ")"]
     });
-    $[5] = children;
-    $[6] = t2;
+    $[6] = children;
+    $[7] = t3;
   } else {
-    t2 = $[6];
+    t3 = $[7];
   }
-  const label = t2;
-  let t3;
-  if ($[7] !== forwardedRef || $[8] !== rest || $[9] !== scheme) {
-    t3 = {
+  const label = t3;
+  let t4;
+  if ($[8] !== forwardedRef || $[9] !== rest || $[10] !== scheme) {
+    t4 = {
       ref: forwardedRef,
       "aria-hidden": "true",
       "data-scheme": scheme,
       ...rest
     };
-    $[7] = forwardedRef;
-    $[8] = rest;
-    $[9] = scheme;
-    $[10] = t3;
+    $[8] = forwardedRef;
+    $[9] = rest;
+    $[10] = scheme;
+    $[11] = t4;
   } else {
-    t3 = $[10];
+    t4 = $[11];
   }
-  const counterProps = t3;
-  let t4;
-  if ($[11] !== className) {
-    t4 = clsx(className, classes.CounterLabel);
-    $[11] = className;
-    $[12] = t4;
-  } else {
-    t4 = $[12];
+  const counterProps = t4;
+  if (sx !== defaultSxProp) {
+    let t5;
+    if ($[12] !== className) {
+      t5 = clsx(className, classes.CounterLabel);
+      $[12] = className;
+      $[13] = t5;
+    } else {
+      t5 = $[13];
+    }
+    let t6;
+    if ($[14] !== children || $[15] !== counterProps || $[16] !== sx || $[17] !== t5) {
+      t6 = /*#__PURE__*/jsx(Box, {
+        as: "span",
+        ...counterProps,
+        className: t5,
+        sx: sx,
+        children: children
+      });
+      $[14] = children;
+      $[15] = counterProps;
+      $[16] = sx;
+      $[17] = t5;
+      $[18] = t6;
+    } else {
+      t6 = $[18];
+    }
+    let t7;
+    if ($[19] !== label || $[20] !== t6) {
+      t7 = /*#__PURE__*/jsxs(Fragment, {
+        children: [t6, label]
+      });
+      $[19] = label;
+      $[20] = t6;
+      $[21] = t7;
+    } else {
+      t7 = $[21];
+    }
+    return t7;
   }
   let t5;
-  if ($[13] !== children || $[14] !== counterProps || $[15] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: "span",
+  if ($[22] !== className) {
+    t5 = clsx(className, classes.CounterLabel);
+    $[22] = className;
+    $[23] = t5;
+  } else {
+    t5 = $[23];
+  }
+  let t6;
+  if ($[24] !== children || $[25] !== counterProps || $[26] !== t5) {
+    t6 = /*#__PURE__*/jsx("span", {
       ...counterProps,
-      className: t4,
+      className: t5,
       children: children
     });
-    $[13] = children;
-    $[14] = counterProps;
-    $[15] = t4;
-    $[16] = t5;
+    $[24] = children;
+    $[25] = counterProps;
+    $[26] = t5;
+    $[27] = t6;
   } else {
-    t5 = $[16];
+    t6 = $[27];
   }
-  let t6;
-  if ($[17] !== label || $[18] !== t5) {
-    t6 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t5, label]
+  let t7;
+  if ($[28] !== label || $[29] !== t6) {
+    t7 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t6, label]
     });
-    $[17] = label;
-    $[18] = t5;
-    $[19] = t6;
+    $[28] = label;
+    $[29] = t6;
+    $[30] = t7;
   } else {
-    t6 = $[19];
+    t7 = $[30];
   }
-  return t6;
+  return t7;
 });
 CounterLabel.displayName = 'CounterLabel';
 

package/lib-esm/DataTable/Pagination.js

@@ -1,16 +1,38 @@
 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
 };
@@ -53,20 +75,20 @@ function Pagination({
     return buildPaginationModel(pageCount, pageIndex + 1, !!showPages, 1, 2);
   }, [pageCount, pageIndex, showPages]);
   return /*#__PURE__*/jsxs(LiveRegion, {
-    children: [/*#__PURE__*/jsx(LiveRegionOutlet, {}), /*#__PURE__*/jsxs("nav", {
+    children: [/*#__PURE__*/jsx(LiveRegionOutlet, {}), /*#__PURE__*/jsxs(StyledPagination, {
       "aria-label": label,
-      className: clsx('TablePagination', classes.TablePagination),
+      className: "TablePagination",
       id: id,
       children: [/*#__PURE__*/jsx(Range, {
         pageStart: pageStart,
         pageEnd: pageEnd,
         totalCount: totalCount
       }), /*#__PURE__*/jsxs("ol", {
-        className: clsx('TablePaginationSteps', classes.TablePaginationSteps),
+        className: "TablePaginationSteps",
         "data-hidden-viewport-ranges": getViewportRangesToHidePages().join(' '),
         children: [/*#__PURE__*/jsx(Step, {
           children: /*#__PURE__*/jsxs(Button, {
-            className: clsx('TablePaginationAction', classes.TablePaginationAction),
+            className: "TablePaginationAction",
             type: "button",
             "data-has-page": hasPreviousPage ? true : undefined,
             "aria-disabled": !hasPreviousPage ? true : undefined,
@@ -77,6 +99,7 @@ function Pagination({
               selectPreviousPage();
             },
             children: [hasPreviousPage ? /*#__PURE__*/jsx(ChevronLeftIcon, {}) : null, /*#__PURE__*/jsx("span", {
+              className: "TablePaginationActionLabel",
               children: "Previous"
             }), /*#__PURE__*/jsx(VisuallyHidden, {
               children: "\xA0page"
@@ -100,7 +123,7 @@ function Pagination({
           }
         }), /*#__PURE__*/jsx(Step, {
           children: /*#__PURE__*/jsxs(Button, {
-            className: clsx('TablePaginationAction', classes.TablePaginationAction),
+            className: "TablePaginationAction",
             type: "button",
             "data-has-page": hasNextPage ? true : undefined,
             "aria-disabled": !hasNextPage ? true : undefined,
@@ -111,6 +134,7 @@ function Pagination({
               selectNextPage();
             },
             children: [/*#__PURE__*/jsx("span", {
+              className: "TablePaginationActionLabel",
               children: "Next"
             }), /*#__PURE__*/jsx(VisuallyHidden, {
               children: "\xA0page"
@@ -123,7 +147,7 @@ function Pagination({
 }
 Pagination.displayName = "Pagination";
 function Range(t0) {
-  const $ = c(12);
+  const $ = c(11);
   const {
     pageStart,
     pageEnd,
@@ -143,53 +167,46 @@ function Range(t0) {
     t2 = $[1];
   }
   let t3;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    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, {
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/jsx(VisuallyHidden, {
       children: "\xA0through\xA0"
     });
-    t5 = /*#__PURE__*/jsx("span", {
+    t4 = /*#__PURE__*/jsx("span", {
       "aria-hidden": "true",
       children: "\u2012"
     });
+    $[2] = t3;
     $[3] = t4;
-    $[4] = t5;
   } else {
+    t3 = $[2];
     t4 = $[3];
-    t5 = $[4];
   }
-  let t6;
-  if ($[5] !== end || $[6] !== start || $[7] !== totalCount) {
-    t6 = /*#__PURE__*/jsxs("p", {
-      className: t3,
-      children: [start, t4, t5, end, " of ", totalCount]
+  let t5;
+  if ($[4] !== end || $[5] !== start || $[6] !== totalCount) {
+    t5 = /*#__PURE__*/jsxs("p", {
+      className: "TablePaginationRange",
+      children: [start, t3, t4, end, " of ", totalCount]
     });
-    $[5] = end;
-    $[6] = start;
-    $[7] = totalCount;
-    $[8] = t6;
+    $[4] = end;
+    $[5] = start;
+    $[6] = totalCount;
+    $[7] = t5;
   } else {
-    t6 = $[8];
+    t5 = $[7];
   }
-  let t7;
-  if ($[9] !== t2 || $[10] !== t6) {
-    t7 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t2, t6]
+  let t6;
+  if ($[8] !== t2 || $[9] !== t5) {
+    t6 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t2, t5]
     });
-    $[9] = t2;
+    $[8] = t2;
+    $[9] = t5;
     $[10] = t6;
-    $[11] = t7;
   } else {
-    t7 = $[11];
+    t6 = $[10];
   }
-  return t7;
+  return t6;
 }
 function TruncationStep() {
   const $ = c(1);
@@ -197,7 +214,7 @@ function TruncationStep() {
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = /*#__PURE__*/jsx("li", {
       "aria-hidden": "true",
-      className: clsx("TablePaginationTruncationStep", classes.TablePaginationTruncationStep),
+      className: "TablePaginationTruncationStep",
       children: "\u2026"
     });
     $[0] = t0;
@@ -207,74 +224,60 @@ function TruncationStep() {
   return t0;
 }
 function Step(t0) {
-  const $ = c(3);
+  const $ = c(2);
   const {
     children
   } = t0;
   let t1;
-  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,
+  if ($[0] !== children) {
+    t1 = /*#__PURE__*/jsx("li", {
+      className: "TablePaginationStep",
       children: children
     });
-    $[1] = children;
-    $[2] = t2;
+    $[0] = children;
+    $[1] = t1;
   } else {
-    t2 = $[2];
+    t1 = $[1];
   }
-  return t2;
+  return t1;
 }
 function Page(t0) {
-  const $ = c(7);
+  const $ = c(6);
   const {
     active,
     children,
     onClick
   } = t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = clsx("TablePaginationPage", classes.TablePaginationPage);
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
+  const t1 = active ? true : undefined;
   const t2 = active ? true : undefined;
-  const t3 = active ? true : undefined;
-  let t4;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = /*#__PURE__*/jsx(VisuallyHidden, {
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/jsx(VisuallyHidden, {
       children: "Page\xA0"
     });
-    $[1] = t4;
+    $[0] = t3;
   } else {
-    t4 = $[1];
+    t3 = $[0];
   }
-  let t5;
-  if ($[2] !== children || $[3] !== onClick || $[4] !== t2 || $[5] !== t3) {
-    t5 = /*#__PURE__*/jsxs(Button, {
-      className: t1,
+  let t4;
+  if ($[1] !== children || $[2] !== onClick || $[3] !== t1 || $[4] !== t2) {
+    t4 = /*#__PURE__*/jsxs(Button, {
+      className: "TablePaginationPage",
       type: "button",
-      "data-active": t2,
-      "aria-current": t3,
+      "data-active": t1,
+      "aria-current": t2,
       onClick: onClick,
-      children: [t4, children]
+      children: [t3, children]
     });
-    $[2] = children;
-    $[3] = onClick;
+    $[1] = children;
+    $[2] = onClick;
+    $[3] = t1;
     $[4] = t2;
-    $[5] = t3;
-    $[6] = t5;
+    $[5] = t4;
   } else {
-    t5 = $[6];
+    t4 = $[5];
   }
-  return t5;
+  return t4;
 }
 function usePagination(config) {
   const $ = c(24);

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, ...rest }: TableContainerProps): React.JSX.Element;
+declare function TableContainer({ children, className, sx: sxProp, ...rest }: TableContainerProps): React.JSX.Element;
 export type TableTitleProps = React.PropsWithChildren<{
     /**
      * Provide an alternate element or component to use as the container for