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

package/lib/internal/components/LiveRegion.js

@@ -24,32 +24,30 @@ function LiveRegion(t0) {
   } = t0;
   const [message, setMessage] = React__default.default.useState("");
   let t1;
-  let t2;
   if ($[0] !== message) {
-    t2 = {
+    t1 = {
       announce: setMessage,
       message
     };
     $[0] = message;
-    $[1] = t2;
+    $[1] = t1;
   } else {
-    t2 = $[1];
+    t1 = $[1];
   }
-  t1 = t2;
   const value = t1;
-  let t3;
+  let t2;
   if ($[2] !== children || $[3] !== value) {
-    t3 = /*#__PURE__*/jsxRuntime.jsx(LiveRegionContext.Provider, {
+    t2 = /*#__PURE__*/jsxRuntime.jsx(LiveRegionContext.Provider, {
       value: value,
       children: children
     });
     $[2] = children;
     $[3] = value;
-    $[4] = t3;
+    $[4] = t2;
   } else {
-    t3 = $[4];
+    t2 = $[4];
   }
-  return t3;
+  return t2;
 }
 function LiveRegionOutlet() {
   const $ = reactCompilerRuntime.c(2);

package/lib/internal/utils/getGlobalFocusStyles.js

@@ -4,6 +4,6 @@ var styled = require('styled-components');
 var constants = require('../../constants.js');
 
 const globalFocusStyle = styled.css(["box-shadow:none;outline:2px solid ", ";"], constants.get('colors.accent.fg'));
-const getGlobalFocusStyles = outlineOffset => styled.css(["&:focus:not(:disabled){", ";outline-offset:", ";&:not(:focus-visible){outline:solid 1px transparent;}}&:focus-visible:not(:disabled){", ";outline-offset:", ";}"], globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset, globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset);
+const getGlobalFocusStyles = outlineOffset => styled.css(["&:focus:not(:disabled){", ";outline-offset:", ";&:not(:focus-visible){outline:solid 1px transparent;}}&:focus-visible:not(:disabled){", ";outline-offset:", ";}"], globalFocusStyle, outlineOffset, globalFocusStyle, outlineOffset);
 
 module.exports = getGlobalFocusStyles;

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { SxProp } from '../sx';
 import type { ResponsiveValue } from '../hooks/useResponsiveValue';
 export type AvatarStackProps = {
     alignRight?: boolean;
@@ -10,7 +9,7 @@ export type AvatarStackProps = {
     className?: string;
     children: React.ReactNode;
     style?: React.CSSProperties;
-} & SxProp;
-declare const AvatarStack: ({ children, variant, shape, alignRight, disableExpand, size, className, style, sx: sxProp, }: AvatarStackProps) => React.JSX.Element;
+};
+declare const AvatarStack: ({ children, variant, shape, alignRight, disableExpand, size, className, style, }: AvatarStackProps) => React.JSX.Element;
 export default AvatarStack;
 //# sourceMappingURL=AvatarStack.d.ts.map

package/lib-esm/AvatarStack/AvatarStack.js

@@ -42,8 +42,7 @@ const AvatarStack = ({
   disableExpand,
   size,
   className,
-  style,
-  sx: sxProp
+  style
 }) => {
   const [hasInteractiveChildren, setHasInteractiveChildren] = useState(false);
   const stackContainer = useRef(null);
@@ -138,7 +137,6 @@ const AvatarStack = ({
       ...getResponsiveAvatarSizeStyles(),
       ...style
     },
-    sx: sxProp,
     children: /*#__PURE__*/jsxs(AvatarStackBody, {
       disableExpand: disableExpand,
       hasInteractiveChildren: hasInteractiveChildren,

package/lib-esm/Banner/Banner.js

@@ -25,6 +25,7 @@ const labels = {
 };
 const Banner = /*#__PURE__*/React.forwardRef(function Banner({
   'aria-label': label,
+  'aria-labelledby': labelledBy,
   children,
   className,
   description,
@@ -64,7 +65,8 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner({
   }
   return /*#__PURE__*/jsxs("section", {
     ...rest,
-    "aria-label": label !== null && label !== void 0 ? label : labels[variant],
+    "aria-labelledby": labelledBy,
+    "aria-label": labelledBy ? undefined : label !== null && label !== void 0 ? label : labels[variant],
     className: clsx(className, classes.Banner),
     "data-dismissible": onDismiss ? '' : undefined,
     "data-title-hidden": hideTitle ? '' : undefined,

package/lib-esm/Blankslate/Blankslate.js

@@ -45,75 +45,73 @@ function Blankslate(t0) {
   }
   const size = t1 === undefined ? "medium" : t1;
   let t2;
-  let t3;
   if ($[8] !== size) {
-    t3 = {
+    t2 = {
       size
     };
     $[8] = size;
-    $[9] = t3;
+    $[9] = t2;
   } else {
-    t3 = $[9];
+    t2 = $[9];
   }
-  t2 = t3;
   const value = t2;
-  let t4;
+  let t3;
   if ($[10] !== className) {
-    t4 = clsx(classes.Blankslate, className);
+    t3 = clsx(classes.Blankslate, className);
     $[10] = className;
-    $[11] = t4;
+    $[11] = t3;
   } else {
-    t4 = $[11];
+    t3 = $[11];
   }
-  const t5 = border ? "" : undefined;
-  const t6 = narrow ? "" : undefined;
-  const t7 = spacious ? "" : undefined;
-  let t8;
-  if ($[12] !== children || $[13] !== size || $[14] !== t4 || $[15] !== t5 || $[16] !== t6 || $[17] !== t7) {
-    t8 = /*#__PURE__*/jsx("div", {
-      className: t4,
-      "data-border": t5,
-      "data-narrow": t6,
-      "data-spacious": t7,
+  const t4 = border ? "" : undefined;
+  const t5 = narrow ? "" : undefined;
+  const t6 = spacious ? "" : undefined;
+  let t7;
+  if ($[12] !== children || $[13] !== size || $[14] !== t3 || $[15] !== t4 || $[16] !== t5 || $[17] !== t6) {
+    t7 = /*#__PURE__*/jsx("div", {
+      className: t3,
+      "data-border": t4,
+      "data-narrow": t5,
+      "data-spacious": t6,
       "data-size": size,
       children: children
     });
     $[12] = children;
     $[13] = size;
-    $[14] = t4;
-    $[15] = t5;
-    $[16] = t6;
-    $[17] = t7;
-    $[18] = t8;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = t5;
+    $[17] = t6;
+    $[18] = t7;
   } else {
-    t8 = $[18];
+    t7 = $[18];
   }
-  let t9;
-  if ($[19] !== rest || $[20] !== t8) {
-    t9 = /*#__PURE__*/jsx("div", {
+  let t8;
+  if ($[19] !== rest || $[20] !== t7) {
+    t8 = /*#__PURE__*/jsx("div", {
       ...rest,
       className: classes.Container,
-      children: t8
+      children: t7
     });
     $[19] = rest;
-    $[20] = t8;
-    $[21] = t9;
+    $[20] = t7;
+    $[21] = t8;
   } else {
-    t9 = $[21];
+    t8 = $[21];
   }
-  let t10;
-  if ($[22] !== t9 || $[23] !== value) {
-    t10 = /*#__PURE__*/jsx(Provider, {
+  let t9;
+  if ($[22] !== t8 || $[23] !== value) {
+    t9 = /*#__PURE__*/jsx(Provider, {
       value: value,
-      children: t9
+      children: t8
     });
-    $[22] = t9;
+    $[22] = t8;
     $[23] = value;
-    $[24] = t10;
+    $[24] = t9;
   } else {
-    t10 = $[24];
+    t9 = $[24];
   }
-  return t10;
+  return t9;
 }
 function Visual(t0) {
   const $ = c(10);

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

@@ -1,12 +1,15 @@
 import React from 'react';
-import type { SxProp } from '../sx';
 type BranchNameProps<As extends React.ElementType> = {
     as?: As;
-} & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>, 'as'> & Omit<SxProp, 'sx'> & SxProp;
+} & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>, 'as'> & {
+    className?: string;
+};
 type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any ? Omit<T, TOmitted> : never;
 export type { BranchNameProps };
 declare const _default: <As extends React.ElementType>(props: {
     as?: As | undefined;
-} & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType<any, keyof React.JSX.IntrinsicElements> extends As ? "a" : As>, "as"> & Omit<SxProp, "sx"> & SxProp & React.RefAttributes<any>) => React.ReactNode;
+} & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType<any, keyof React.JSX.IntrinsicElements> extends As ? "a" : As>, "as"> & {
+    className?: string;
+} & React.RefAttributes<any>) => React.ReactNode;
 export default _default;
 //# sourceMappingURL=BranchName.d.ts.map

package/lib-esm/BranchName/BranchName.js

@@ -2,7 +2,6 @@ import { c } from 'react-compiler-runtime';
 import React from 'react';
 import { clsx } from 'clsx';
 import classes from './BranchName.module.css.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx } from 'react/jsx-runtime';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -41,8 +40,7 @@ function BranchName(props, ref) {
   }
   let t2;
   if ($[7] !== Component || $[8] !== children || $[9] !== ref || $[10] !== rest || $[11] !== t1) {
-    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: Component,
+    t2 = /*#__PURE__*/jsx(Component, {
       ...rest,
       ref: ref,
       className: t1,

package/lib-esm/Button/ButtonBase.js

@@ -96,7 +96,7 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
         "data-has-count": count !== undefined ? true : undefined,
         "aria-describedby": [loadingAnnouncementID, ariaDescribedBy].filter(descriptionID => Boolean(descriptionID)).join(' ')
         // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state.
-        // We only set it when the button is in a loading state because it will supercede the aria-label when the screen
+        // We only set it when the button is in a loading state because it will supersede the aria-label when the screen
         // reader announces the button name.
         ,
         "aria-labelledby": loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy,
@@ -171,7 +171,7 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
       "data-has-count": count !== undefined ? true : undefined,
       "aria-describedby": [loadingAnnouncementID, ariaDescribedBy].filter(descriptionID => Boolean(descriptionID)).join(' ')
       // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state.
-      // We only set it when the button is in a loading state because it will supercede the aria-label when the screen
+      // We only set it when the button is in a loading state because it will supersede the aria-label when the screen
       // reader announces the button name.
       ,
       "aria-labelledby": loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy,

package/lib-esm/Checkbox/Checkbox.js

@@ -1,3 +1,4 @@
+import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import React, { useContext, useEffect } from 'react';
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
@@ -11,70 +12,200 @@ import Box from '../Box/Box.js';
 /**
  * An accessible, native checkbox component
  */
-const Checkbox = /*#__PURE__*/React.forwardRef(({
-  checked,
-  className,
-  defaultChecked,
-  indeterminate,
-  disabled,
-  onChange,
-  sx: sxProp,
-  required,
-  validationStatus,
-  value,
-  ...rest
-}, ref) => {
+const Checkbox = /*#__PURE__*/React.forwardRef((t0, ref) => {
+  const $ = c(47);
+  let checked;
+  let className;
+  let defaultChecked;
+  let disabled;
+  let indeterminate;
+  let onChange;
+  let required;
+  let rest;
+  let sxProp;
+  let validationStatus;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      checked,
+      className,
+      defaultChecked,
+      indeterminate,
+      disabled,
+      onChange,
+      sx: sxProp,
+      required,
+      validationStatus,
+      value,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = checked;
+    $[2] = className;
+    $[3] = defaultChecked;
+    $[4] = disabled;
+    $[5] = indeterminate;
+    $[6] = onChange;
+    $[7] = required;
+    $[8] = rest;
+    $[9] = sxProp;
+    $[10] = validationStatus;
+    $[11] = value;
+  } else {
+    checked = $[1];
+    className = $[2];
+    defaultChecked = $[3];
+    disabled = $[4];
+    indeterminate = $[5];
+    onChange = $[6];
+    required = $[7];
+    rest = $[8];
+    sxProp = $[9];
+    validationStatus = $[10];
+    value = $[11];
+  }
   const checkboxRef = useProvidedRefOrCreate(ref);
   const checkboxGroupContext = useContext(CheckboxGroupContext);
-  const handleOnChange = e => {
-    checkboxGroupContext.onChange && checkboxGroupContext.onChange(e);
-    onChange && onChange(e);
-  };
-  const inputProps = {
-    type: 'checkbox',
-    disabled,
-    ref: checkboxRef,
-    checked: indeterminate ? false : checked,
-    defaultChecked,
-    required,
-    ['aria-required']: required ? 'true' : 'false',
-    ['aria-invalid']: validationStatus === 'error' ? 'true' : 'false',
-    onChange: handleOnChange,
-    value,
-    name: value,
-    ...rest
-  };
-  useIsomorphicLayoutEffect(() => {
-    if (checkboxRef.current) {
-      // eslint-disable-next-line react-compiler/react-compiler
-      checkboxRef.current.indeterminate = indeterminate || false;
-    }
-  }, [indeterminate, checked, checkboxRef]);
-  useEffect(() => {
-    const {
-      current: checkbox
-    } = checkboxRef;
-    if (!checkbox) {
-      return;
+  let t1;
+  if ($[12] !== checkboxGroupContext || $[13] !== onChange) {
+    t1 = e => {
+      checkboxGroupContext.onChange && checkboxGroupContext.onChange(e);
+      onChange && onChange(e);
+    };
+    $[12] = checkboxGroupContext;
+    $[13] = onChange;
+    $[14] = t1;
+  } else {
+    t1 = $[14];
+  }
+  const handleOnChange = t1;
+  const t2 = indeterminate ? false : checked;
+  const t3 = required ? "true" : "false";
+  const t4 = validationStatus === "error" ? "true" : "false";
+  let t5;
+  if ($[15] !== checkboxRef || $[16] !== defaultChecked || $[17] !== disabled || $[18] !== handleOnChange || $[19] !== required || $[20] !== rest || $[21] !== t2 || $[22] !== t3 || $[23] !== t4 || $[24] !== value) {
+    t5 = {
+      type: "checkbox",
+      disabled,
+      ref: checkboxRef,
+      checked: t2,
+      defaultChecked,
+      required,
+      "aria-required": t3,
+      "aria-invalid": t4,
+      onChange: handleOnChange,
+      value,
+      name: value,
+      ...rest
+    };
+    $[15] = checkboxRef;
+    $[16] = defaultChecked;
+    $[17] = disabled;
+    $[18] = handleOnChange;
+    $[19] = required;
+    $[20] = rest;
+    $[21] = t2;
+    $[22] = t3;
+    $[23] = t4;
+    $[24] = value;
+    $[25] = t5;
+  } else {
+    t5 = $[25];
+  }
+  const inputProps = t5;
+  let t6;
+  if ($[26] !== checkboxRef || $[27] !== indeterminate) {
+    t6 = () => {
+      if (checkboxRef.current) {
+        checkboxRef.current.indeterminate = indeterminate || false;
+      }
+    };
+    $[26] = checkboxRef;
+    $[27] = indeterminate;
+    $[28] = t6;
+  } else {
+    t6 = $[28];
+  }
+  let t7;
+  if ($[29] !== checkboxRef || $[30] !== checked || $[31] !== indeterminate) {
+    t7 = [indeterminate, checked, checkboxRef];
+    $[29] = checkboxRef;
+    $[30] = checked;
+    $[31] = indeterminate;
+    $[32] = t7;
+  } else {
+    t7 = $[32];
+  }
+  useIsomorphicLayoutEffect(t6, t7);
+  let t8;
+  if ($[33] !== checkboxRef || $[34] !== indeterminate) {
+    t8 = () => {
+      const {
+        current: checkbox
+      } = checkboxRef;
+      if (!checkbox) {
+        return;
+      }
+      if (indeterminate) {
+        checkbox.setAttribute("aria-checked", "mixed");
+      } else {
+        checkbox.setAttribute("aria-checked", checkbox.checked ? "true" : "false");
+      }
+    };
+    $[33] = checkboxRef;
+    $[34] = indeterminate;
+    $[35] = t8;
+  } else {
+    t8 = $[35];
+  }
+  useEffect(t8);
+  if (sxProp) {
+    let t9;
+    if ($[36] !== className) {
+      t9 = clsx(className, sharedClasses.Input, classes.Checkbox);
+      $[36] = className;
+      $[37] = t9;
+    } else {
+      t9 = $[37];
     }
-    if (indeterminate) {
-      checkbox.setAttribute('aria-checked', 'mixed');
+    let t10;
+    if ($[38] !== inputProps || $[39] !== sxProp || $[40] !== t9) {
+      t10 = /*#__PURE__*/jsx(Box, {
+        as: "input",
+        ...inputProps,
+        className: t9,
+        sx: sxProp
+      });
+      $[38] = inputProps;
+      $[39] = sxProp;
+      $[40] = t9;
+      $[41] = t10;
     } else {
-      checkbox.setAttribute('aria-checked', checkbox.checked ? 'true' : 'false');
+      t10 = $[41];
     }
-  });
-  if (sxProp) {
-    return /*#__PURE__*/jsx(Box, {
-      as: "input",
+    return t10;
+  }
+  let t9;
+  if ($[42] !== className) {
+    t9 = clsx(className, sharedClasses.Input, classes.Checkbox);
+    $[42] = className;
+    $[43] = t9;
+  } else {
+    t9 = $[43];
+  }
+  let t10;
+  if ($[44] !== inputProps || $[45] !== t9) {
+    t10 = /*#__PURE__*/jsx("input", {
       ...inputProps,
-      className: clsx(className, sharedClasses.Input, classes.Checkbox),
-      sx: sxProp
+      className: t9
     });
+    $[44] = inputProps;
+    $[45] = t9;
+    $[46] = t10;
+  } else {
+    t10 = $[46];
   }
-  return /*#__PURE__*/jsx("input", {
-    ...inputProps,
-    className: clsx(className, sharedClasses.Input, classes.Checkbox)
-  });
+  return t10;
 });
 Checkbox.displayName = 'Checkbox';
 

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

@@ -17,6 +17,10 @@ declare const CircleBadgeIcon: import("styled-components").StyledComponent<impor
 } & import("@primer/octicons-react").IconProps & SxProp & import("react").RefAttributes<SVGSVGElement>>, any, SxProp, never>;
 export type CircleBadgeProps = ComponentProps<typeof CircleBadge>;
 export type CircleBadgeIconProps = ComponentProps<typeof CircleBadgeIcon>;
+/**
+ * @deprecated This component is deprecated.
+ * Replace component with specific icon imports from `@primer/octicons-react` and customized styling.
+ */
 declare const _default: string & import("styled-components").StyledComponentBase<"div", any, StyledCircleBadgeProps, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
     Icon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
         icon: React.ElementType;

package/lib-esm/CircleBadge/CircleBadge.js

@@ -30,6 +30,10 @@ const CircleBadgeIcon = styled(Octicon).withConfig({
   componentId: "sc-nywehb-1"
 })(["height:auto;max-width:60%;max-height:55%;"]);
 CircleBadgeIcon.displayName = 'CircleBadge.Icon';
+/**
+ * @deprecated This component is deprecated.
+ * Replace component with specific icon imports from `@primer/octicons-react` and customized styling.
+ */
 var CircleBadge$1 = Object.assign(CircleBadge, {
   Icon: CircleBadgeIcon
 });