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

package/{lib-esm → dist}/live-region/Announce.js

@@ -4,45 +4,49 @@ import { useRef, useState, useEffect } from 'react';
 import { useEffectOnce } from '../internal/hooks/useEffectOnce.js';
 import { useEffectCallback } from '../internal/hooks/useEffectCallback.js';
 import { jsx } from 'react/jsx-runtime';
-import Box from '../Box/Box.js';
 
 /**
  * `Announce` is a component that will announce the text content of the
  * `children` passed in to screen readers using the given politeness level. It
  * will also announce any changes to the text content of `children`
  */
-function Announce(t0) {
-  const $ = c(23);
+function Announce(props) {
+  const $ = c(25);
   let children;
   let delayMs;
   let rest;
+  let t0;
   let t1;
   let t2;
   let t3;
-  if ($[0] !== t0) {
+  if ($[0] !== props) {
     ({
+      as: t0,
       announceOnShow: t1,
       children,
       delayMs,
       hidden: t2,
       politeness: t3,
       ...rest
-    } = t0);
-    $[0] = t0;
+    } = props);
+    $[0] = props;
     $[1] = children;
     $[2] = delayMs;
     $[3] = rest;
-    $[4] = t1;
-    $[5] = t2;
-    $[6] = t3;
+    $[4] = t0;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
   } else {
     children = $[1];
     delayMs = $[2];
     rest = $[3];
-    t1 = $[4];
-    t2 = $[5];
-    t3 = $[6];
+    t0 = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
   }
+  const BaseComponent = t0 === undefined ? "div" : t0;
   const announceOnShow = t1 === undefined ? true : t1;
   const hidden = t2 === undefined ? false : t2;
   const politeness = t3 === undefined ? "polite" : t3;
@@ -50,7 +54,7 @@ function Announce(t0) {
   const [previousAnnouncementText, setPreviousAnnouncementText] = useState(null);
   const savedAnnouncement = useRef(null);
   let t4;
-  if ($[7] !== delayMs || $[8] !== hidden || $[9] !== politeness || $[10] !== previousAnnouncementText) {
+  if ($[8] !== delayMs || $[9] !== hidden || $[10] !== politeness || $[11] !== previousAnnouncementText) {
     t4 = () => {
       var _savedAnnouncement$cu;
       const {
@@ -82,32 +86,32 @@ function Announce(t0) {
       });
       setPreviousAnnouncementText(textContent);
     };
-    $[7] = delayMs;
-    $[8] = hidden;
-    $[9] = politeness;
-    $[10] = previousAnnouncementText;
-    $[11] = t4;
+    $[8] = delayMs;
+    $[9] = hidden;
+    $[10] = politeness;
+    $[11] = previousAnnouncementText;
+    $[12] = t4;
   } else {
-    t4 = $[11];
+    t4 = $[12];
   }
   const announce = useEffectCallback(t4);
   let t5;
-  if ($[12] !== announce || $[13] !== announceOnShow) {
+  if ($[13] !== announce || $[14] !== announceOnShow) {
     t5 = () => {
       if (announceOnShow) {
         announce();
       }
     };
-    $[12] = announce;
-    $[13] = announceOnShow;
-    $[14] = t5;
+    $[13] = announce;
+    $[14] = announceOnShow;
+    $[15] = t5;
   } else {
-    t5 = $[14];
+    t5 = $[15];
   }
   useEffectOnce(t5);
   let t6;
   let t7;
-  if ($[15] !== announce) {
+  if ($[16] !== announce) {
     t6 = () => {
       const {
         current: container
@@ -128,17 +132,17 @@ function Announce(t0) {
       };
     };
     t7 = [announce];
-    $[15] = announce;
-    $[16] = t6;
-    $[17] = t7;
+    $[16] = announce;
+    $[17] = t6;
+    $[18] = t7;
   } else {
-    t6 = $[16];
-    t7 = $[17];
+    t6 = $[17];
+    t7 = $[18];
   }
   useEffect(t6, t7);
   let t8;
   let t9;
-  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
     t8 = () => () => {
       if (savedAnnouncement.current !== null) {
         savedAnnouncement.current.cancel();
@@ -146,25 +150,26 @@ function Announce(t0) {
       }
     };
     t9 = [];
-    $[18] = t8;
-    $[19] = t9;
+    $[19] = t8;
+    $[20] = t9;
   } else {
-    t8 = $[18];
-    t9 = $[19];
+    t8 = $[19];
+    t9 = $[20];
   }
   useEffect(t8, t9);
   let t10;
-  if ($[20] !== children || $[21] !== rest) {
-    t10 = /*#__PURE__*/jsx(Box, {
+  if ($[21] !== BaseComponent || $[22] !== children || $[23] !== rest) {
+    t10 = /*#__PURE__*/jsx(BaseComponent, {
       ...rest,
       ref: ref,
       children: children
     });
-    $[20] = children;
-    $[21] = rest;
-    $[22] = t10;
+    $[21] = BaseComponent;
+    $[22] = children;
+    $[23] = rest;
+    $[24] = t10;
   } else {
-    t10 = $[22];
+    t10 = $[24];
   }
   return t10;
 }

package/dist/live-region/AriaAlert.d.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+import { type ElementType } from 'react';
+import type { PolymorphicProps } from '../utils/polymorphic2';
+export type AriaAlertProps<As extends ElementType> = PolymorphicProps<'div', As, {
+    /**
+     * Specify if the content of the element should be announced when this
+     * component is rendered and is not hidden
+     * @default true
+     */
+    announceOnShow?: boolean;
+    /**
+     * Specify if the element is hidden
+     * @default false
+     */
+    hidden?: boolean;
+}>;
+export declare function AriaAlert<As extends ElementType = 'div'>({ announceOnShow, children, ...rest }: AriaAlertProps<As>): React.JSX.Element;
+//# sourceMappingURL=AriaAlert.d.ts.map

package/dist/live-region/AriaAlert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AriaAlert.d.ts","sourceRoot":"","sources":["../../src/live-region/AriaAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,uBAAuB,CAAA;AAE3D,MAAM,MAAM,cAAc,CAAC,EAAE,SAAS,WAAW,IAAI,gBAAgB,CACnE,KAAK,EACL,EAAE,EACF;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CACF,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,WAAW,GAAG,KAAK,EAAE,EACxD,cAAqB,EACrB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,EAAE,CAAC,qBAMpB"}

package/{lib → dist}/live-region/AriaStatus.d.ts

@@ -1,11 +1,7 @@
 import type React from 'react';
 import { type ElementType } from 'react';
-import type { SxProp } from '../sx';
-export type AriaStatusProps<As extends ElementType> = React.PropsWithChildren<{
-    /**
-     * Customize the element type of the rendered container
-     */
-    as?: As;
+import type { PolymorphicProps } from '../utils/polymorphic2';
+export type AriaStatusProps<As extends ElementType> = PolymorphicProps<'div', As, {
     /**
      * Specify if the content of the element should be announced when this
      * component is rendered and is not hidden
@@ -21,6 +17,6 @@ export type AriaStatusProps<As extends ElementType> = React.PropsWithChildren<{
      * Provide a delay in milliseconds before the announcement is made
      */
     delayMs?: number;
-} & SxProp>;
-export declare function AriaStatus<As extends ElementType>({ announceOnShow, children, ...rest }: AriaStatusProps<As> & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'div'>): React.JSX.Element;
+}>;
+export declare function AriaStatus<As extends ElementType = 'div'>({ announceOnShow, children, ...rest }: AriaStatusProps<As>): React.JSX.Element;
 //# sourceMappingURL=AriaStatus.d.ts.map

package/dist/live-region/AriaStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AriaStatus.d.ts","sourceRoot":"","sources":["../../src/live-region/AriaStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,uBAAuB,CAAA;AAE3D,MAAM,MAAM,eAAe,CAAC,EAAE,SAAS,WAAW,IAAI,gBAAgB,CACpE,KAAK,EACL,EAAE,EACF;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CACF,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,WAAW,GAAG,KAAK,EAAE,EACzD,cAAsB,EACtB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,eAAe,CAAC,EAAE,CAAC,qBAMrB"}

package/dist/utils/polymorphic2.d.ts

@@ -0,0 +1,16 @@
+/**
+ * This file is an alternative to polymorphic.ts that hopes to support
+ * polyrmophic components in React. It explicitly hopes to make it easy to
+ * type the props of components and allow for explicitly setting the type of a
+ * component
+ */
+import type { ElementType } from 'react';
+type AsProp<As extends ElementType> = {
+    /**
+     * Customize the element type of the container element for the component
+     */
+    as?: As;
+};
+type PolymorphicProps<DefaultAs extends ElementType, As extends ElementType, Props> = Props & AsProp<As> & (As extends React.ElementType ? Omit<React.ComponentPropsWithoutRef<As>, keyof Props> : Omit<React.ComponentPropsWithoutRef<DefaultAs>, keyof Props>);
+export type { PolymorphicProps };
+//# sourceMappingURL=polymorphic2.d.ts.map

package/dist/utils/polymorphic2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polymorphic2.d.ts","sourceRoot":"","sources":["../../src/utils/polymorphic2.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,OAAO,CAAA;AAEtC,KAAK,MAAM,CAAC,EAAE,SAAS,WAAW,IAAI;IACpC;;OAEG;IACH,EAAE,CAAC,EAAE,EAAE,CAAA;CACR,CAAA;AAED,KAAK,gBAAgB,CAAC,SAAS,SAAS,WAAW,EAAE,EAAE,SAAS,WAAW,EAAE,KAAK,IAAI,KAAK,GACzF,MAAM,CAAC,EAAE,CAAC,GACV,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GACzB,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC,GACrD,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,CAAA;AAEnE,YAAY,EAAC,gBAAgB,EAAC,CAAA"}

package/dist/utils/test-helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const setupMatchMedia: () => void;
+//# sourceMappingURL=test-helpers.d.ts.map

package/dist/utils/test-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-helpers.d.ts","sourceRoot":"","sources":["../../src/utils/test-helpers.tsx"],"names":[],"mappings":"AAoDA,eAAO,MAAM,eAAe,YAgB3B,CAAA"}

package/generated/components.json

@@ -1411,7 +1411,12 @@
         {
           "name": "variant",
           "type": "'critical' | 'info' | 'success' | 'upsell' | 'warning'",
-          "description": ""
+          "description": "Specify the type of the Banner"
+        },
+        {
+          "name": "layout",
+          "type": "'default' | 'compact'",
+          "description": "Specify the layout of the Banner. Compact layout will reduce the padding."
         }
       ],
       "subcomponents": [
@@ -1663,19 +1668,27 @@
           "name": "className",
           "type": "string",
           "required": false,
-          "description": "",
+          "description": "Additional CSS class names to apply to the breadcrumbs container",
           "defaultValue": ""
         },
         {
           "name": "children",
           "type": "Breadcrumbs.Item[]",
           "defaultValue": "",
-          "description": ""
+          "description": "Breadcrumb items to render. Each item should be a Breadcrumbs.Item component."
+        },
+        {
+          "name": "overflow",
+          "type": "'wrap' | 'menu' | 'menu-with-root'",
+          "required": false,
+          "description": "How to handle overflow when breadcrumbs don't fit in the container. 'wrap' allows items to wrap to new lines. 'menu' collapses items into an overflow menu. 'menu-with-root' also collapses items into an overflow menu but includes the root (first) breadcrumb in the menu so only the last items remain visible.",
+          "defaultValue": "'wrap'"
         },
         {
           "name": "sx",
           "type": "SystemStyleObject",
-          "deprecated": true
+          "deprecated": true,
+          "description": "System styles (deprecated, use CSS classes instead)"
         }
       ],
       "subcomponents": [
@@ -1686,7 +1699,7 @@
               "name": "selected",
               "type": "boolean",
               "defaultValue": "false",
-              "description": "Whether this item represents the current page"
+              "description": "Whether this item represents the current page. Sets aria-current='page' for accessibility."
             },
             {
               "name": "to",
@@ -1695,6 +1708,18 @@
               "description": "Used when the item is rendered using a component like React Router's `Link`. The path to navigate to.",
               "defaultValue": ""
             },
+            {
+              "name": "href",
+              "type": "string",
+              "required": false,
+              "description": "The URL that the breadcrumb item links to. Used with regular anchor elements."
+            },
+            {
+              "name": "children",
+              "type": "React.ReactNode",
+              "required": true,
+              "description": "The content to display inside the breadcrumb item, typically text."
+            },
             {
               "name": "ref",
               "type": "React.RefObject<HTMLAnchorElement>"
@@ -2483,6 +2508,11 @@
           "defaultValue": "normal",
           "description": "The type of button to use for the confirm button."
         },
+        {
+          "name": "overrideButtonFocus",
+          "type": "'confirm' | 'cancel'",
+          "description": "The button that should be initially focused when the dialog is opened. By default, the initial button focus is the confirm button, unless the confirm button is dangerous, in which case the cancel button is focused. This prop should be used rarely, as it can allow dangerous actions to be taken accidentally."
+        },
         {
           "name": "className",
           "type": "string",
@@ -5461,7 +5491,7 @@
       "stories": [
         {
           "id": "components-popover--default",
-          "code": "() => (\n  <Popover relative open={true} caret=\"top\">\n    <Popover.Content\n      sx={{\n        marginTop: 2,\n      }}\n    >\n      <Heading\n        sx={{\n          fontSize: 2,\n        }}\n      >\n        Popover heading\n      </Heading>\n      <Text as=\"p\">Message about popovers</Text>\n      <Button>Got it!</Button>\n    </Popover.Content>\n  </Popover>\n)"
+          "code": "() => (\n  <Popover relative open={true} caret=\"top\">\n    <Popover.Content\n      style={{\n        marginTop: 'var(--base-size-8)',\n      }}\n    >\n      <Heading\n        style={{\n          fontSize: 'var(--text-title-size-small)',\n        }}\n      >\n        Popover heading\n      </Heading>\n      <Text as=\"p\">Message about popovers</Text>\n      <Button>Got it!</Button>\n    </Popover.Content>\n  </Popover>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -6168,11 +6198,6 @@
           "description": "The size of the buttons",
           "defaultValue": ""
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLDivElement>"
@@ -6201,9 +6226,10 @@
               "description": "Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render."
             },
             {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
+              "name": "count",
+              "type": "number | string",
+              "defaultValue": "",
+              "description": "The number to display in the counter label."
             },
             {
               "name": "ref",
@@ -6246,11 +6272,6 @@
               "defaultValue": "",
               "description": "Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render."
             },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "ref",
               "type": "React.RefObject<HTMLButtonElement>"

package/generated/hooks.json

@@ -72,6 +72,11 @@
               "type": "\"normal\" | \"primary\" | \"danger\"",
               "defaultValue": "normal",
               "description": "The type of button to use for the confirm button."
+            },
+            {
+              "name": "overrideButtonFocus",
+              "type": "'confirm' | 'cancel'",
+              "description": "The button that should be initially focused when the dialog is opened. By default, the initial button focus is the confirm button, unless the confirm button is dangerous, in which case the cancel button is focused. This prop should be used rarely, as it can allow dangerous actions to be taken accidentally."
             }
           ]
         }

package/package.json

@@ -1,44 +1,43 @@
 {
   "name": "@primer/react",
-  "version": "38.0.0-rc.2",
+  "type": "module",
+  "version": "38.0.0-rc.3",
   "description": "An implementation of GitHub's Primer Design System using React",
-  "main": "lib/index.js",
-  "module": "lib-esm/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "exports": {
     ".": {
-      "import": "./lib-esm/index.js",
-      "require": "./lib/index.js"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./experimental": {
-      "import": "./lib-esm/experimental/index.js",
-      "require": "./lib/experimental/index.js"
+      "types": "./dist/experimental/index.d.ts",
+      "default": "./dist/experimental/index.js"
     },
     "./deprecated": {
-      "import": "./lib-esm/deprecated/index.js",
-      "require": "./lib/deprecated/index.js"
+      "types": "./dist/deprecated/index.d.ts",
+      "default": "./dist/deprecated/index.js"
     },
     "./next": {
-      "import": "./lib-esm/next/index.js",
-      "require": "./lib/next/index.js"
+      "types": "./dist/next/index.d.ts",
+      "default": "./dist/next/index.js"
     },
     "./test-helpers": {
-      "import": "./lib-esm/test-helpers.js",
-      "require": "./lib/test-helpers.js"
+      "types": "./dist/utils/test-helpers.d.ts",
+      "default": "./dist/test-helpers.js"
     },
     "./generated/components.json": "./generated/components.json",
     "./generated/hooks.json": "./generated/hooks.json"
   },
-  "typings": "lib/index.d.ts",
+  "typings": "dist/index.d.ts",
   "sideEffects": [
-    "lib-esm/**/*.css",
-    "lib/**/*.css",
+    "dist/**/*.css",
     "src/**/test-helpers.tsx",
-    "lib-esm/**/test-helpers.js",
-    "lib/**/test-helpers.js"
+    "dist/**/test-helpers.js"
   ],
   "scripts": {
     "build": "./script/build",
-    "clean": "rimraf dist lib lib-esm css",
+    "clean": "rimraf dist generated",
     "start": "concurrently npm:start:*",
     "start:storybook": "STORYBOOK=true storybook dev -p 6006",
     "build:storybook": "storybook build",
@@ -47,6 +46,7 @@
     "build:components.json": "tsx script/components-json/build.ts",
     "build:hooks.json": "tsx script/hooks-json/build.ts",
     "build:precompile-color-schemes": "tsx script/precompile-color-schemes.ts",
+    "lint:npm": "publint --types",
     "storybook": "storybook",
     "type-check": "tsc --noEmit",
     "type-css-modules": "tcm -p src/**/*.module.css"
@@ -59,19 +59,7 @@
     "design-system"
   ],
   "files": [
-    "codemods",
     "dist",
-    "lib",
-    "lib/node_modules",
-    "lib-esm",
-    "css",
-    "index.d.ts",
-    "deprecated/package.json",
-    "experimental/package.json",
-    "!lib/__tests__",
-    "!lib/stories",
-    "!lib-esm/__tests__",
-    "!lib-esm/stories",
     "generated",
     "CHANGELOG.md"
   ],
@@ -87,7 +75,7 @@
     "@github/tab-container-element": "^4.8.2",
     "@lit-labs/react": "1.2.1",
     "@oddbird/popover-polyfill": "^0.5.2",
-    "@primer/behaviors": "^1.8.0",
+    "@primer/behaviors": "^1.8.2",
     "@primer/live-region-element": "^0.7.1",
     "@primer/octicons-react": "^19.13.0",
     "@primer/primitives": "10.x || 11.x",
@@ -182,6 +170,7 @@
     "micromark-extension-frontmatter": "2.0.0",
     "micromark-extension-mdxjs": "3.0.0",
     "postcss-preset-primer": "^0.0.0",
+    "publint": "^0.3.12",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-is": "18.3.1",