@primer/react 37.32.0-rc.f648ca0d1 → 38.0.0-rc.0

package/lib-esm/Select/Select.js

@@ -64,7 +64,7 @@ const ArrowIndicator = t0 => {
 };
 const Select = /*#__PURE__*/React.forwardRef((t0, ref) => {
   var _ref, _defaultValue;
-  const $ = c(39);
+  const $ = c(41);
   let block;
   let children;
   let className;
@@ -119,93 +119,101 @@ const Select = /*#__PURE__*/React.forwardRef((t0, ref) => {
     sx = $[11];
     validationStatus = $[12];
   }
-  const t1 = validationStatus === "error" ? "true" : "false";
-  const t2 = disabled && classes.Disabled;
-  let t3;
-  if ($[13] !== className || $[14] !== t2) {
-    t3 = clsx(className, classes.Select, t2);
+  let t1;
+  if ($[13] !== className) {
+    t1 = clsx(classes.TextInputWrapper, className);
     $[13] = className;
-    $[14] = t2;
+    $[14] = t1;
+  } else {
+    t1 = $[14];
+  }
+  const t2 = validationStatus === "error" ? "true" : "false";
+  const t3 = disabled && classes.Disabled;
+  let t4;
+  if ($[15] !== t3) {
+    t4 = clsx(classes.Select, t3);
     $[15] = t3;
+    $[16] = t4;
   } else {
-    t3 = $[15];
+    t4 = $[16];
   }
-  const t4 = Boolean(placeholder);
-  const t5 = (_ref = (_defaultValue = defaultValue) !== null && _defaultValue !== void 0 ? _defaultValue : placeholder) !== null && _ref !== void 0 ? _ref : undefined;
-  let t6;
-  if ($[16] !== placeholder || $[17] !== required) {
-    t6 = placeholder && /*#__PURE__*/jsx("option", {
+  const t5 = Boolean(placeholder);
+  const t6 = (_ref = (_defaultValue = defaultValue) !== null && _defaultValue !== void 0 ? _defaultValue : placeholder) !== null && _ref !== void 0 ? _ref : undefined;
+  let t7;
+  if ($[17] !== placeholder || $[18] !== required) {
+    t7 = placeholder && /*#__PURE__*/jsx("option", {
       value: "",
       disabled: required,
       hidden: required,
       children: placeholder
     });
-    $[16] = placeholder;
-    $[17] = required;
-    $[18] = t6;
+    $[17] = placeholder;
+    $[18] = required;
+    $[19] = t7;
   } else {
-    t6 = $[18];
+    t7 = $[19];
   }
-  let t7;
-  if ($[19] !== children || $[20] !== disabled || $[21] !== ref || $[22] !== required || $[23] !== rest || $[24] !== t1 || $[25] !== t3 || $[26] !== t4 || $[27] !== t5 || $[28] !== t6) {
-    t7 = /*#__PURE__*/jsxs("select", {
+  let t8;
+  if ($[20] !== children || $[21] !== disabled || $[22] !== ref || $[23] !== required || $[24] !== rest || $[25] !== t2 || $[26] !== t4 || $[27] !== t5 || $[28] !== t6 || $[29] !== t7) {
+    t8 = /*#__PURE__*/jsxs("select", {
       ...rest,
       ref: ref,
       required: required,
       disabled: disabled,
-      "aria-invalid": t1,
-      className: t3,
-      "data-hasplaceholder": t4,
-      defaultValue: t5,
-      children: [t6, children]
+      "aria-invalid": t2,
+      className: t4,
+      "data-hasplaceholder": t5,
+      defaultValue: t6,
+      children: [t7, children]
     });
-    $[19] = children;
-    $[20] = disabled;
-    $[21] = ref;
-    $[22] = required;
-    $[23] = rest;
-    $[24] = t1;
-    $[25] = t3;
+    $[20] = children;
+    $[21] = disabled;
+    $[22] = ref;
+    $[23] = required;
+    $[24] = rest;
+    $[25] = t2;
     $[26] = t4;
     $[27] = t5;
     $[28] = t6;
     $[29] = t7;
+    $[30] = t8;
   } else {
-    t7 = $[29];
+    t8 = $[30];
   }
-  let t8;
-  if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = /*#__PURE__*/jsx(ArrowIndicator, {
+  let t9;
+  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = /*#__PURE__*/jsx(ArrowIndicator, {
       className: classes.ArrowIndicator
     });
-    $[30] = t8;
+    $[31] = t9;
   } else {
-    t8 = $[30];
+    t9 = $[31];
   }
-  let t9;
-  if ($[31] !== block || $[32] !== contrast || $[33] !== disabled || $[34] !== size || $[35] !== sx || $[36] !== t7 || $[37] !== validationStatus) {
-    t9 = /*#__PURE__*/jsxs(TextInputWrapper, {
+  let t10;
+  if ($[32] !== block || $[33] !== contrast || $[34] !== disabled || $[35] !== size || $[36] !== sx || $[37] !== t1 || $[38] !== t8 || $[39] !== validationStatus) {
+    t10 = /*#__PURE__*/jsxs(TextInputWrapper, {
       block: block,
       contrast: contrast,
       disabled: disabled,
       size: size,
       validationStatus: validationStatus,
-      className: classes.TextInputWrapper,
+      className: t1,
       sx: sx,
-      children: [t7, t8]
+      children: [t8, t9]
     });
-    $[31] = block;
-    $[32] = contrast;
-    $[33] = disabled;
-    $[34] = size;
-    $[35] = sx;
-    $[36] = t7;
-    $[37] = validationStatus;
-    $[38] = t9;
+    $[32] = block;
+    $[33] = contrast;
+    $[34] = disabled;
+    $[35] = size;
+    $[36] = sx;
+    $[37] = t1;
+    $[38] = t8;
+    $[39] = validationStatus;
+    $[40] = t10;
   } else {
-    t9 = $[38];
+    t10 = $[40];
   }
-  return t9;
+  return t10;
 });
 const Option = props => {
   const $ = c(2);

package/lib-esm/SelectPanel/SelectPanel.js

@@ -11,7 +11,7 @@ import { FilteredActionListLoadingTypes } from '../FilteredActionList/FilteredAc
 import { announceFromElement, announce } from '@primer/live-region-element';
 import classes from './SelectPanel.module.css.js';
 import { clsx } from 'clsx';
-import { debounce } from '../node_modules/@github/mini-throttle/dist/index.js';
+import { debounce } from '@github/mini-throttle';
 import { useResponsiveValue } from '../hooks/useResponsiveValue.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';

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

@@ -1,27 +1,19 @@
 import type { To } from 'history';
 import React from 'react';
-import type { ComponentProps } from '../utils/types';
-import type { SxProp } from '../sx';
-type StyledSubNavProps = React.ComponentProps<'nav'> & {
+export type SubNavProps = React.ComponentProps<'nav'> & {
     actions?: React.ReactNode;
     align?: 'right';
     full?: boolean;
     label?: string;
-} & SxProp;
-type StyledSubNavLinksProps = React.ComponentProps<'div'> & SxProp;
-type StyledSubNavLinkProps = React.ComponentProps<'a'> & {
+};
+export type SubNavLinksProps = React.ComponentProps<'div'>;
+export type SubNavLinkProps = React.ComponentProps<'a'> & {
     to?: To;
     selected?: boolean;
-} & SxProp;
-declare const SubNav: React.ForwardRefExoticComponent<Omit<StyledSubNavProps, "ref"> & React.RefAttributes<HTMLElement>>;
-declare const SubNavLinks: React.ForwardRefExoticComponent<Omit<StyledSubNavLinksProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SubNavLink: React.ForwardRefExoticComponent<Omit<StyledSubNavLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-export type SubNavProps = ComponentProps<typeof SubNav>;
-export type SubNavLinksProps = ComponentProps<typeof SubNavLinks>;
-export type SubNavLinkProps = ComponentProps<typeof SubNavLink>;
-declare const _default: React.ForwardRefExoticComponent<Omit<StyledSubNavProps, "ref"> & React.RefAttributes<HTMLElement>> & {
-    Link: React.ForwardRefExoticComponent<Omit<StyledSubNavLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-    Links: React.ForwardRefExoticComponent<Omit<StyledSubNavLinksProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<SubNavProps, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Link: React.ForwardRefExoticComponent<Omit<SubNavLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    Links: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 //# sourceMappingURL=SubNav.d.ts.map

package/lib-esm/SubNav/SubNav.js

@@ -2,7 +2,6 @@ import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import React from 'react';
 import styles from './SubNav.module.css.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const SubNav = /*#__PURE__*/React.forwardRef(function SubNav(t0, forwardRef) {
@@ -72,8 +71,7 @@ const SubNav = /*#__PURE__*/React.forwardRef(function SubNav(t0, forwardRef) {
   }
   let t5;
   if ($[13] !== forwardRef || $[14] !== label || $[15] !== rest || $[16] !== t1 || $[17] !== t3 || $[18] !== t4) {
-    t5 = /*#__PURE__*/jsxs(BoxWithFallback, {
-      as: "nav",
+    t5 = /*#__PURE__*/jsxs("nav", {
       ref: forwardRef,
       className: t1,
       "aria-label": label,
@@ -126,7 +124,7 @@ const SubNavLinks = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
   }
   let t2;
   if ($[6] !== children || $[7] !== forwardRef || $[8] !== rest || $[9] !== t1) {
-    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
+    t2 = /*#__PURE__*/jsx("div", {
       ref: forwardRef,
       className: t1,
       ...rest,
@@ -176,8 +174,7 @@ const SubNavLink = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
   }
   let t2;
   if ($[6] !== children || $[7] !== forwardRef || $[8] !== rest || $[9] !== t1) {
-    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: "a",
+    t2 = /*#__PURE__*/jsx("a", {
       ref: forwardRef,
       className: t1,
       "data-selected": rest.selected,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "37.32.0-rc.f648ca0d1",
+  "version": "38.0.0-rc.0",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -82,8 +82,9 @@
     "npm": ">=7"
   },
   "dependencies": {
+    "@github/mini-throttle": "^2.1.1",
     "@github/relative-time-element": "^4.4.5",
-    "@github/tab-container-element": "4.8.2",
+    "@github/tab-container-element": "^4.8.2",
     "@lit-labs/react": "1.2.1",
     "@oddbird/popover-polyfill": "^0.5.2",
     "@primer/behaviors": "^1.8.0",

package/lib/ProgressBar/ProgressBar-430cdef7.css

@@ -1,2 +0,0 @@
-@keyframes prc-ProgressBar-shimmer-i1RxN{0%{mask-position:200%}to{mask-position:0}}.prc-ProgressBar-ProgressBarItem-stL6O{background-color:var(--progress-bg);width:var(--progress-width)}@media (prefers-reduced-motion:no-preference){.prc-ProgressBar-ProgressBarItem-stL6O[data-animated=true]{animation-duration:1s;animation-iteration-count:infinite;animation-name:prc-ProgressBar-shimmer-i1RxN;mask-image:linear-gradient(75deg,#000 30%,rgba(0,0,0,.65) 80%);mask-size:200%}}.prc-ProgressBar-ProgressBarContainer-E-z8S{background-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-small,.1875rem);display:flex;gap:2px;overflow:hidden}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-display=inline]){display:inline-flex}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-bar-size=default]){height:8px}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-bar-size=small]){height:5px}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-bar-size=large]){height:10px}
-/*# sourceMappingURL=ProgressBar-430cdef7.css.map */

package/lib/ProgressBar/ProgressBar-430cdef7.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ProgressBar/ProgressBar.module.css"],"names":[],"mappings":"AAAA,yCACE,GACE,kBACF,CAEA,GACE,eACF,CACF,CAEA,uCAGE,mCAAoC,CAFpC,2BAaF,CATE,8CACE,2DAIE,qBAAsB,CACtB,kCAAmC,CAFnC,4CAAuB,CAFvB,8DAAqE,CACrE,cAIF,CACF,CAGF,4CAIE,uEAA4C,CAC5C,gDAAwC,CAJxC,YAAa,CAKb,OAAQ,CAJR,eAqBF,CAfE,kFACE,mBACF,CAEA,oFACE,UACF,CAEA,kFACE,UACF,CAEA,kFACE,WACF","file":"ProgressBar-430cdef7.css","sourcesContent":["@keyframes shimmer {\n  from {\n    mask-position: 200%;\n  }\n\n  to {\n    mask-position: 0%;\n  }\n}\n\n.ProgressBarItem {\n  width: var(--progress-width);\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--progress-bg);\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-animated='true'] {\n      mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);\n      mask-size: 200%;\n      animation-name: shimmer;\n      animation-duration: 1s;\n      animation-iteration-count: infinite;\n    }\n  }\n}\n\n.ProgressBarContainer {\n  display: flex;\n  overflow: hidden;\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--borderColor-default);\n  border-radius: var(--borderRadius-small);\n  gap: 2px;\n\n  &:where([data-progress-display='inline']) {\n    display: inline-flex;\n  }\n\n  &:where([data-progress-bar-size='default']) {\n    height: 8px;\n  }\n\n  &:where([data-progress-bar-size='small']) {\n    height: 5px;\n  }\n\n  &:where([data-progress-bar-size='large']) {\n    height: 10px;\n  }\n}\n"]}

package/lib/node_modules/@github/mini-throttle/dist/index.js

@@ -1,43 +0,0 @@
-'use strict';
-
-function throttle(callback, wait = 0, { start = true, middle = true, once = false } = {}) {
-    let innerStart = start;
-    let last = 0;
-    let timer;
-    let cancelled = false;
-    function fn(...args) {
-        if (cancelled)
-            return;
-        const delta = Date.now() - last;
-        last = Date.now();
-        if (start && middle && delta >= wait) {
-            innerStart = true;
-        }
-        if (innerStart) {
-            innerStart = false;
-            callback.apply(this, args);
-            if (once)
-                fn.cancel();
-        }
-        else if ((middle && delta < wait) || !middle) {
-            clearTimeout(timer);
-            timer = setTimeout(() => {
-                last = Date.now();
-                callback.apply(this, args);
-                if (once)
-                    fn.cancel();
-            }, !middle ? wait : wait - delta);
-        }
-    }
-    fn.cancel = () => {
-        clearTimeout(timer);
-        cancelled = true;
-    };
-    return fn;
-}
-function debounce(callback, wait = 0, { start = false, middle = false, once = false } = {}) {
-    return throttle(callback, wait, { start, middle, once });
-}
-
-exports.debounce = debounce;
-exports.throttle = throttle;

package/lib-esm/ProgressBar/ProgressBar-430cdef7.css

@@ -1,2 +0,0 @@
-@keyframes prc-ProgressBar-shimmer-i1RxN{0%{mask-position:200%}to{mask-position:0}}.prc-ProgressBar-ProgressBarItem-stL6O{background-color:var(--progress-bg);width:var(--progress-width)}@media (prefers-reduced-motion:no-preference){.prc-ProgressBar-ProgressBarItem-stL6O[data-animated=true]{animation-duration:1s;animation-iteration-count:infinite;animation-name:prc-ProgressBar-shimmer-i1RxN;mask-image:linear-gradient(75deg,#000 30%,rgba(0,0,0,.65) 80%);mask-size:200%}}.prc-ProgressBar-ProgressBarContainer-E-z8S{background-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-small,.1875rem);display:flex;gap:2px;overflow:hidden}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-display=inline]){display:inline-flex}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-bar-size=default]){height:8px}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-bar-size=small]){height:5px}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-bar-size=large]){height:10px}
-/*# sourceMappingURL=ProgressBar-430cdef7.css.map */

package/lib-esm/ProgressBar/ProgressBar-430cdef7.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ProgressBar/ProgressBar.module.css"],"names":[],"mappings":"AAAA,yCACE,GACE,kBACF,CAEA,GACE,eACF,CACF,CAEA,uCAGE,mCAAoC,CAFpC,2BAaF,CATE,8CACE,2DAIE,qBAAsB,CACtB,kCAAmC,CAFnC,4CAAuB,CAFvB,8DAAqE,CACrE,cAIF,CACF,CAGF,4CAIE,uEAA4C,CAC5C,gDAAwC,CAJxC,YAAa,CAKb,OAAQ,CAJR,eAqBF,CAfE,kFACE,mBACF,CAEA,oFACE,UACF,CAEA,kFACE,UACF,CAEA,kFACE,WACF","file":"ProgressBar-430cdef7.css","sourcesContent":["@keyframes shimmer {\n  from {\n    mask-position: 200%;\n  }\n\n  to {\n    mask-position: 0%;\n  }\n}\n\n.ProgressBarItem {\n  width: var(--progress-width);\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--progress-bg);\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-animated='true'] {\n      mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);\n      mask-size: 200%;\n      animation-name: shimmer;\n      animation-duration: 1s;\n      animation-iteration-count: infinite;\n    }\n  }\n}\n\n.ProgressBarContainer {\n  display: flex;\n  overflow: hidden;\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--borderColor-default);\n  border-radius: var(--borderRadius-small);\n  gap: 2px;\n\n  &:where([data-progress-display='inline']) {\n    display: inline-flex;\n  }\n\n  &:where([data-progress-bar-size='default']) {\n    height: 8px;\n  }\n\n  &:where([data-progress-bar-size='small']) {\n    height: 5px;\n  }\n\n  &:where([data-progress-bar-size='large']) {\n    height: 10px;\n  }\n}\n"]}

package/lib-esm/node_modules/@github/mini-throttle/dist/index.js

@@ -1,40 +0,0 @@
-function throttle(callback, wait = 0, { start = true, middle = true, once = false } = {}) {
-    let innerStart = start;
-    let last = 0;
-    let timer;
-    let cancelled = false;
-    function fn(...args) {
-        if (cancelled)
-            return;
-        const delta = Date.now() - last;
-        last = Date.now();
-        if (start && middle && delta >= wait) {
-            innerStart = true;
-        }
-        if (innerStart) {
-            innerStart = false;
-            callback.apply(this, args);
-            if (once)
-                fn.cancel();
-        }
-        else if ((middle && delta < wait) || !middle) {
-            clearTimeout(timer);
-            timer = setTimeout(() => {
-                last = Date.now();
-                callback.apply(this, args);
-                if (once)
-                    fn.cancel();
-            }, !middle ? wait : wait - delta);
-        }
-    }
-    fn.cancel = () => {
-        clearTimeout(timer);
-        cancelled = true;
-    };
-    return fn;
-}
-function debounce(callback, wait = 0, { start = false, middle = false, once = false } = {}) {
-    return throttle(callback, wait, { start, middle, once });
-}
-
-export { debounce, throttle };