@primer/react 38.16.0 → 38.17.0-rc.15f016c2b

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @primer/react
 
+## 38.17.0
+
+### Minor Changes
+
+- [#7658](https://github.com/primer/react/pull/7658) [`259fdff`](https://github.com/primer/react/commit/259fdff67550e328b851129a78e87413ddb07229) Thanks [@hussam-i-am](https://github.com/hussam-i-am)! - fix(polymorphic): Improve prop passthrough for ActionList.LinkItem and Breadcrumbs.Item
+
 ## 38.16.0
 
 ### Minor Changes

package/dist/ActionList/LinkItem.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
+import type React from 'react';
+import type { WithSlotMarker } from '../utils/types/Slots';
 import type { ActionListItemProps } from './shared';
 type LinkProps = {
     download?: string;
@@ -14,6 +14,9 @@ type LinkProps = {
     className?: string;
 };
 export type ActionListLinkItemProps = Pick<ActionListItemProps, 'active' | 'children' | 'inactiveText' | 'variant' | 'size'> & LinkProps;
-export declare const LinkItem: PolymorphicForwardRefComponent<"a", ActionListLinkItemProps>;
+declare const LinkItemComponent: <As extends React.ElementType = "a">(props: (React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & Pick<ActionListItemProps, "children" | "size" | "active" | "variant" | "inactiveText"> & LinkProps extends infer T ? T extends React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & Pick<ActionListItemProps, "children" | "size" | "active" | "variant" | "inactiveText"> & LinkProps ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
+    as?: As | undefined;
+} & React.RefAttributes<unknown>) => React.ReactNode;
+export declare const LinkItem: WithSlotMarker<typeof LinkItemComponent>;
 export {};
 //# sourceMappingURL=LinkItem.d.ts.map

package/dist/ActionList/LinkItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkItem.d.ts","sourceRoot":"","sources":["../../src/ActionList/LinkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAG/F,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAA;AAGjD,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,CAAC,CAAA;IAChF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAGD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,mBAAmB,EACnB,QAAQ,GAAG,UAAU,GAAG,cAAc,GAAG,SAAS,GAAG,MAAM,CAC5D,GACC,SAAS,CAAA;AAEX,eAAO,MAAM,QAAQ,EA4BhB,8BAA8B,CAAC,GAAG,EAAE,uBAAuB,CAAC,CAAA"}
+{"version":3,"file":"LinkItem.d.ts","sourceRoot":"","sources":["../../src/ActionList/LinkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAA;AAGxD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAA;AAIjD,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,CAAC,CAAA;IAChF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAGD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,mBAAmB,EACnB,QAAQ,GAAG,UAAU,GAAG,cAAc,GAAG,SAAS,GAAG,MAAM,CAC5D,GACC,SAAS,CAAA;AAIX,QAAA,MAAM,iBAAiB,GACpB,EAAE,SAAS,KAAK,CAAC,WAAW;;oDAqC9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAG5D,CAAA"}

package/dist/ActionList/LinkItem.js

@@ -1,62 +1,46 @@
-import { c } from 'react-compiler-runtime';
-import React from 'react';
 import { Item } from './Item.js';
+import { fixedForwardRef } from '../utils/modern-polymorphic.js';
 import { jsx } from 'react/jsx-runtime';
 import Link from '../Link/Link.js';
 
-const LinkItem = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = c(22);
-  let Component;
-  let active;
-  let className;
-  let inactiveText;
-  let props;
-  let size;
-  let variant;
-  if ($[0] !== t0) {
-    ({
-      active,
-      inactiveText,
-      variant,
-      size,
-      as: Component,
-      className,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = Component;
-    $[2] = active;
-    $[3] = className;
-    $[4] = inactiveText;
-    $[5] = props;
-    $[6] = size;
-    $[7] = variant;
-  } else {
-    Component = $[1];
-    active = $[2];
-    className = $[3];
-    inactiveText = $[4];
-    props = $[5];
-    size = $[6];
-    variant = $[7];
-  }
-  const t1 = inactiveText ? true : undefined;
-  let t2;
-  if ($[8] !== Component || $[9] !== forwardedRef || $[10] !== inactiveText || $[11] !== props) {
-    t2 = t3 => {
-      const {
-        children,
-        onClick,
-        ...rest
-      } = t3;
+const LinkItemComponent = fixedForwardRef(({
+  active,
+  inactiveText,
+  variant,
+  size,
+  as: Component,
+  className,
+  ...props
+}, forwardedRef) => {
+  return /*#__PURE__*/jsx(Item, {
+    className: className,
+    active: active,
+    inactiveText: inactiveText,
+    "data-inactive": inactiveText ? true : undefined,
+    variant: variant,
+    size: size,
+    _PrivateItemWrapper: ({
+      children,
+      onClick,
+      ...rest
+    }) => {
       const clickHandler = event => {
         onClick && onClick(event);
         props.onClick && props.onClick(event);
       };
-      return inactiveText ? /*#__PURE__*/jsx("span", {
-        ...rest,
-        children: children
-      }) : /*#__PURE__*/jsx(Link, {
+      if (inactiveText) {
+        return /*#__PURE__*/jsx("span", {
+          ...rest,
+          children: children
+        });
+      }
+
+      // Type safety for the polymorphic `as` prop is enforced at the
+      // LinkItem boundary via fixedForwardRef. Internally we widen
+      // Link's type so TypeScript doesn't re-check the generic
+      // constraint across two polymorphic layers.
+      const InternalLink = Link;
+      return /*#__PURE__*/jsx(InternalLink, {
         as: Component,
         ...rest,
         ...props,
@@ -64,42 +48,13 @@ const LinkItem = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
         ref: forwardedRef,
         children: children
       });
-    };
-    $[8] = Component;
-    $[9] = forwardedRef;
-    $[10] = inactiveText;
-    $[11] = props;
-    $[12] = t2;
-  } else {
-    t2 = $[12];
-  }
-  let t3;
-  if ($[13] !== active || $[14] !== className || $[15] !== inactiveText || $[16] !== props.children || $[17] !== size || $[18] !== t1 || $[19] !== t2 || $[20] !== variant) {
-    t3 = /*#__PURE__*/jsx(Item, {
-      className: className,
-      active: active,
-      inactiveText: inactiveText,
-      "data-inactive": t1,
-      variant: variant,
-      size: size,
-      _PrivateItemWrapper: t2,
-      children: props.children
-    });
-    $[13] = active;
-    $[14] = className;
-    $[15] = inactiveText;
-    $[16] = props.children;
-    $[17] = size;
-    $[18] = t1;
-    $[19] = t2;
-    $[20] = variant;
-    $[21] = t3;
-  } else {
-    t3 = $[21];
-  }
-  return t3;
+    },
+    children: props.children
+  });
+});
+const LinkItem = Object.assign(LinkItemComponent, {
+  displayName: 'ActionList.LinkItem',
+  __SLOT__: Symbol('ActionList.LinkItem')
 });
-LinkItem.displayName = 'ActionList.LinkItem';
-LinkItem.__SLOT__ = Symbol('ActionList.LinkItem');
 
 export { LinkItem };

package/dist/ActionList/index.d.ts

@@ -84,7 +84,31 @@ export declare const ActionList: (<As extends React.ElementType = "ul">(props: (
         __SLOT__: symbol;
     };
     /** A `Item` that renders a full-size anchor inside ListItem */
-    LinkItem: import("../utils/polymorphic").ForwardRefComponent<"a", import("./LinkItem").ActionListLinkItemProps>;
+    LinkItem: import("../utils/types").WithSlotMarker<(<As extends React.ElementType = "a">(props: (import("react").ComponentPropsWithRef<import("react").ElementType extends As ? "a" : As> & Pick<import("./shared").ActionListItemProps, "children" | "size" | "active" | "variant" | "inactiveText"> & {
+        download?: string;
+        href?: string;
+        hrefLang?: string;
+        media?: string;
+        ping?: string;
+        rel?: string;
+        target?: string;
+        type?: string;
+        referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>["referrerPolicy"];
+        className?: string;
+    } extends infer T ? T extends import("react").ComponentPropsWithRef<import("react").ElementType extends As ? "a" : As> & Pick<import("./shared").ActionListItemProps, "children" | "size" | "active" | "variant" | "inactiveText"> & {
+        download?: string;
+        href?: string;
+        hrefLang?: string;
+        media?: string;
+        ping?: string;
+        rel?: string;
+        target?: string;
+        type?: string;
+        referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>["referrerPolicy"];
+        className?: string;
+    } ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
+        as?: As | undefined;
+    } & import("react").RefAttributes<unknown>) => React.ReactNode)>;
     /** Visually separates `Item`s or `Group`s in an `ActionList`. */
     Divider: import("../utils/types").FCWithSlotMarker<import("react").PropsWithChildren<import("./Divider").ActionListDividerProps>>;
     /** Secondary text which provides additional information about an `Item`. */

package/dist/ActionList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ActionList/index.ts"],"names":[],"mappings":"AAUA,YAAY,EAAC,eAAe,EAAC,MAAM,UAAU,CAAA;AAC7C,YAAY,EAAC,oBAAoB,EAAE,2BAA2B,EAAC,MAAM,SAAS,CAAA;AAC9E,YAAY,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAA;AACjD,YAAY,EAAC,uBAAuB,EAAC,MAAM,YAAY,CAAA;AACvD,YAAY,EAAC,sBAAsB,EAAC,MAAM,WAAW,CAAA;AACrD,YAAY,EAAC,0BAA0B,EAAC,MAAM,eAAe,CAAA;AAC7D,YAAY,EAAC,4BAA4B,EAAE,6BAA6B,EAAC,MAAM,WAAW,CAAA;AAC1F,YAAY,EAAC,sBAAsB,EAAC,MAAM,WAAW,CAAA;AACrD,YAAY,EAAC,6BAA6B,EAAC,MAAM,kBAAkB,CAAA;AAEnE;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;IACrB,mDAAmD;;IAGnD,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGzC,+DAA+D;;IAG/D,iEAAiE;;IAGjE,4EAA4E;;IAG5E,uDAAuD;;IAGvD,sDAAsD;;IAGtD,mCAAmC;;IAGnC,qCAAqC;;IAGrC,uBAAuB;;CAEvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ActionList/index.ts"],"names":[],"mappings":"AAUA,YAAY,EAAC,eAAe,EAAC,MAAM,UAAU,CAAA;AAC7C,YAAY,EAAC,oBAAoB,EAAE,2BAA2B,EAAC,MAAM,SAAS,CAAA;AAC9E,YAAY,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAA;AACjD,YAAY,EAAC,uBAAuB,EAAC,MAAM,YAAY,CAAA;AACvD,YAAY,EAAC,sBAAsB,EAAC,MAAM,WAAW,CAAA;AACrD,YAAY,EAAC,0BAA0B,EAAC,MAAM,eAAe,CAAA;AAC7D,YAAY,EAAC,4BAA4B,EAAE,6BAA6B,EAAC,MAAM,WAAW,CAAA;AAC1F,YAAY,EAAC,sBAAsB,EAAC,MAAM,WAAW,CAAA;AACrD,YAAY,EAAC,6BAA6B,EAAC,MAAM,kBAAkB,CAAA;AAEnE;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;IACrB,mDAAmD;;IAGnD,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGzC,+DAA+D;;;;;;;;;;;;;;;;;;;;;;;;;;IAG/D,iEAAiE;;IAGjE,4EAA4E;;IAG5E,uDAAuD;;IAGvD,sDAAsD;;IAGtD,mCAAmC;;IAGnC,qCAAqC;;IAGrC,uBAAuB;;CAEvB,CAAA"}

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,6 @@
 import type { To } from 'history';
 import React from 'react';
+import { type PolymorphicProps } from '../utils/modern-polymorphic';
 export type BreadcrumbsProps = React.PropsWithChildren<{
     /**
      * Optional class name for the breadcrumbs container.
@@ -27,24 +28,38 @@ declare function Breadcrumbs({ className, children, style, overflow, variant }:
 declare namespace Breadcrumbs {
     var displayName: string;
 }
-type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any ? Omit<T, TOmitted> : never;
-type StyledBreadcrumbsItemProps<As extends React.ElementType> = {
-    as?: As;
+type StyledBreadcrumbsItemProps<As extends React.ElementType = 'a'> = PolymorphicProps<As, 'a', {
     to?: To;
     selected?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-} & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>, 'as'>;
+}>;
 export type BreadcrumbsItemProps<As extends React.ElementType = 'a'> = StyledBreadcrumbsItemProps<As>;
 declare const _default: typeof Breadcrumbs & {
-    Item: React.ForwardRefExoticComponent<Omit<StyledBreadcrumbsItemProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<any>>;
+    Item: (<As extends React.ElementType = "a">(props: (React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & {
+        to?: To;
+        selected?: boolean;
+    } extends infer T ? T extends React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & {
+        to?: To;
+        selected?: boolean;
+    } ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
+        as?: As | undefined;
+    } & React.RefAttributes<any>) => React.ReactNode) & {
+        displayName: string;
+    };
 };
 export default _default;
 /**
  * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
  */
 export declare const Breadcrumb: typeof Breadcrumbs & {
-    Item: React.ForwardRefExoticComponent<Omit<StyledBreadcrumbsItemProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<any>>;
+    Item: <As extends React.ElementType = "a">(props: (React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & {
+        to?: To;
+        selected?: boolean;
+    } extends infer T ? T extends React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & {
+        to?: To;
+        selected?: boolean;
+    } ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
+        as?: As | undefined;
+    } & React.RefAttributes<any>) => React.ReactNode;
 };
 /**
  * @deprecated Use the `BreadcrumbsProps` type instead

package/dist/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAA6E,MAAM,OAAO,CAAA;AAYjG,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC7C;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAC,CAAA;AA2GF,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAiB,EAAE,OAAkB,EAAC,EAAE,gBAAgB,qBA+MzG;kBA/MQ,WAAW;;;AA4NpB,KAAK,gBAAgB,CAAC,CAAC,EAAE,QAAQ,SAAS,WAAW,IAAI,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAA;AAElG,KAAK,0BAA0B,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IAC9D,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,GAAG,gBAAgB,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,CAAA;AAwBhG,MAAM,MAAM,oBAAoB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,0BAA0B,CAAC,EAAE,CAAC,CAAA;;;;AACrG,wBAAkE;AAElE;;GAEG;AACH,eAAO,MAAM,UAAU;;CAAsD,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAA;AAE9C;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,oBAAoB,CAAC,EAAE,CAAC,CAAA"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAA6E,MAAM,OAAO,CAAA;AAWjG,OAAO,EAAC,KAAK,gBAAgB,EAAkB,MAAM,6BAA6B,CAAA;AAElF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC7C;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAC,CAAA;AA8GF,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAiB,EAAE,OAAkB,EAAC,EAAE,gBAAgB,qBA+MzG;kBA/MQ,WAAW;;;AA2NpB,KAAK,0BAA0B,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,gBAAgB,CACpF,EAAE,EACF,GAAG,EACH;IACE,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CACF,CAAA;AAsBD,MAAM,MAAM,oBAAoB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,0BAA0B,CAAC,EAAE,CAAC,CAAA;;YAnBlG,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;aADb,EAAE;mBACI,OAAO;;;;;;;AA2BtB,wBAAiF;AAEjF;;GAEG;AACH,eAAO,MAAM,UAAU;WA3BpB,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;aADb,EAAE;mBACI,OAAO;;;;CAgCuD,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAA;AAE9C;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,oBAAoB,CAAC,EAAE,CAAC,CAAA"}

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -8,6 +8,7 @@ import { KebabHorizontalIcon } from '@primer/octicons-react';
 import { useResizeObserver } from '../hooks/useResizeObserver.js';
 import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
 import { useOnOutsideClick } from '../hooks/useOnOutsideClick.js';
+import { fixedForwardRef } from '../utils/modern-polymorphic.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
 import Details from '../Details/Details.js';
@@ -399,69 +400,26 @@ const ItemSeparator = () => {
   }
   return t0;
 };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-function BreadcrumbsItemComponent(props, ref) {
-  const $ = c(14);
-  let className;
-  let rest;
-  let selected;
-  let t0;
-  if ($[0] !== props) {
-    ({
-      as: t0,
-      selected,
-      className,
-      ...rest
-    } = props);
-    $[0] = props;
-    $[1] = className;
-    $[2] = rest;
-    $[3] = selected;
-    $[4] = t0;
-  } else {
-    className = $[1];
-    rest = $[2];
-    selected = $[3];
-    t0 = $[4];
-  }
-  const Component = t0 === undefined ? "a" : t0;
-  const t1 = selected && "selected";
-  let t2;
-  if ($[5] !== className || $[6] !== t1) {
-    t2 = clsx(className, classes.Item, t1);
-    $[5] = className;
-    $[6] = t1;
-    $[7] = t2;
-  } else {
-    t2 = $[7];
-  }
-  const t3 = selected ? "page" : undefined;
-  let t4;
-  if ($[8] !== Component || $[9] !== ref || $[10] !== rest || $[11] !== t2 || $[12] !== t3) {
-    t4 = /*#__PURE__*/jsx(Component, {
-      className: t2,
-      "aria-current": t3,
-      ref: ref,
-      ...rest
-    });
-    $[8] = Component;
-    $[9] = ref;
-    $[10] = rest;
-    $[11] = t2;
-    $[12] = t3;
-    $[13] = t4;
-  } else {
-    t4 = $[13];
-  }
-  return t4;
-}
-BreadcrumbsItemComponent.displayName = 'Breadcrumbs.Item';
-const BreadcrumbsItem = /*#__PURE__*/React.forwardRef(BreadcrumbsItemComponent);
+const BreadcrumbsItem = fixedForwardRef((props, ref) => {
+  const {
+    as: Component = 'a',
+    selected,
+    className,
+    ...rest
+  } = props;
+  return /*#__PURE__*/jsx(Component, {
+    className: clsx(className, classes.Item, selected && 'selected'),
+    "aria-current": selected ? 'page' : undefined,
+    ref: ref,
+    ...rest
+  });
+});
 Breadcrumbs.displayName = 'Breadcrumbs';
+const BreadcrumbsItemWithDisplayName = Object.assign(BreadcrumbsItem, {
+  displayName: 'Breadcrumbs.Item'
+});
 var Breadcrumbs_default = Object.assign(Breadcrumbs, {
-  Item: BreadcrumbsItem
+  Item: BreadcrumbsItemWithDisplayName
 });
 
 /**
@@ -479,11 +437,15 @@ const Breadcrumb = Object.assign(Breadcrumbs, {
  * @deprecated Use the `BreadcrumbsItemProps` type instead
  */
 function _temp(item, index) {
-  const href = item.props.href;
-  const children = item.props.children;
-  const selected = item.props.selected;
+  const {
+    children,
+    selected,
+    as: Component,
+    ...itemProps
+  } = item.props;
   return /*#__PURE__*/jsx(ActionList.LinkItem, {
-    href: href,
+    as: Component,
+    ...itemProps,
     "aria-current": selected ? "page" : undefined,
     children: children
   }, index);

package/dist/NavList/NavList.d.ts

@@ -2,16 +2,17 @@ import { type Icon } from '@primer/octicons-react';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
 import React from 'react';
 import type { ActionListTrailingActionProps, ActionListDividerProps, ActionListLeadingVisualProps, ActionListTrailingVisualProps, ActionListGroupHeadingProps } from '../ActionList';
+import { type PolymorphicProps } from '../utils/modern-polymorphic';
 export type NavListProps = {
     children: React.ReactNode;
 } & React.ComponentProps<'nav'>;
-export type NavListItemProps = {
+export type NavListItemProps<As extends React.ElementType = React.ElementType> = PolymorphicProps<As, 'a', {
     children: React.ReactNode;
     defaultOpen?: boolean;
     href?: string;
     'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
     inactiveText?: string;
-};
+}>;
 export type NavListSubNavProps = {
     children: React.ReactNode;
 };
@@ -40,7 +41,23 @@ export declare const GroupExpand: React.ForwardRefExoticComponent<NavListGroupEx
 export type NavListGroupHeadingProps = ActionListGroupHeadingProps;
 export declare const NavList: React.ForwardRefExoticComponent<Omit<NavListProps, "ref"> & React.RefAttributes<HTMLElement>> & {
     Description: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<import("..").ActionListDescriptionProps>>;
-    Item: PolymorphicForwardRefComponent<"a", NavListItemProps>;
+    Item: (<As extends React.ElementType = "a">(props: (React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & {
+        children: React.ReactNode;
+        defaultOpen?: boolean;
+        href?: string;
+        'aria-current'?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | boolean;
+        inactiveText?: string;
+    } extends infer T ? T extends React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & {
+        children: React.ReactNode;
+        defaultOpen?: boolean;
+        href?: string;
+        'aria-current'?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | boolean;
+        inactiveText?: string;
+    } ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
+        as?: As | undefined;
+    } & React.RefAttributes<unknown>) => React.ReactNode) & {
+        displayName: string;
+    };
     SubNav: PolymorphicForwardRefComponent<"ul", NavListSubNavProps>;
     LeadingVisual: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<import("../ActionList/Visuals").VisualProps>>;
     TrailingVisual: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<import("../ActionList/Visuals").VisualProps>>;

package/dist/NavList/NavList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavList.d.ts","sourceRoot":"","sources":["../../src/NavList/NavList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAC3E,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAC/F,OAAO,KAAuB,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EACV,6BAA6B,EAC7B,sBAAsB,EACtB,4BAA4B,EAC5B,6BAA6B,EAC7B,2BAA2B,EAC5B,MAAM,eAAe,CAAA;AActB,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAqB/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAqHD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAkCD,MAAM,MAAM,yBAAyB,GAAG,4BAA4B,CAAA;AASpE,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,CAAA;AAQxD,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,GAAG;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAqBD,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,cAAc,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC9B,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,cAAc,CAAC,EAAE,6BAA6B,CAAA;IAC9C,0BAA0B,CAAC,EAAE,MAAM,CAAA;CACpC,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,mGAgFvB,CAAA;AAKD,MAAM,MAAM,wBAAwB,GAAG,2BAA2B,CAAA;AAqBlE,eAAO,MAAM,OAAO;;;;;;;;;;;CAWlB,CAAA"}
+{"version":3,"file":"NavList.d.ts","sourceRoot":"","sources":["../../src/NavList/NavList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAC3E,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAC/F,OAAO,KAAuB,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EACV,6BAA6B,EAC7B,sBAAsB,EACtB,4BAA4B,EAC5B,6BAA6B,EAC7B,2BAA2B,EAC5B,MAAM,eAAe,CAAA;AAUtB,OAAO,EAAkB,KAAK,gBAAgB,EAAC,MAAM,6BAA6B,CAAA;AAKlF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAqB/B,MAAM,MAAM,gBAAgB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,gBAAgB,CAC/F,EAAE,EACF,GAAG,EACH;IACE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CACF,CAAA;AA8HD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAkCD,MAAM,MAAM,yBAAyB,GAAG,4BAA4B,CAAA;AASpE,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,CAAA;AAQxD,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,GAAG;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAqBD,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,cAAc,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC9B,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,cAAc,CAAC,EAAE,6BAA6B,CAAA;IAC9C,0BAA0B,CAAC,EAAE,MAAM,CAAA;CACpC,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,mGAgFvB,CAAA;AAKD,MAAM,MAAM,wBAAwB,GAAG,2BAA2B,CAAA;AAqBlE,eAAO,MAAM,OAAO;;YAnVjB,EAAE,SAAS,KAAK,CAAC,WAAW;kBATjB,KAAK,CAAC,SAAS;sBACX,OAAO;eACd,MAAM;yBACI,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO;uBAC7E,MAAM;;kBAJX,KAAK,CAAC,SAAS;sBACX,OAAO;eACd,MAAM;yBACI,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO;uBAC7E,MAAM;;;;;;;;;;;;;;CAmWvB,CAAA"}

package/dist/NavList/NavList.js

@@ -11,6 +11,7 @@ import classes from '../ActionList/ActionList.module.css.js';
 import navListClasses from './NavList.module.css.js';
 import { flushSync } from 'react-dom';
 import { isSlot } from '../utils/is-slot.js';
+import { fixedForwardRef } from '../utils/modern-polymorphic.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 const Root = /*#__PURE__*/React.forwardRef((t0, ref) => {
@@ -72,128 +73,59 @@ Root.displayName = 'NavList';
 // ----------------------------------------------------------------------------
 // NavList.Item
 
-const Item = /*#__PURE__*/React.forwardRef((t0, ref) => {
-  const $ = c(29);
-  let ariaCurrent;
-  let children;
-  let defaultOpen;
-  let props;
-  if ($[0] !== t0) {
-    ({
-      "aria-current": ariaCurrent,
-      children,
-      defaultOpen,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = ariaCurrent;
-    $[2] = children;
-    $[3] = defaultOpen;
-    $[4] = props;
-  } else {
-    ariaCurrent = $[1];
-    children = $[2];
-    defaultOpen = $[3];
-    props = $[4];
-  }
+const ItemComponent = fixedForwardRef(({
+  'aria-current': ariaCurrent,
+  children,
+  defaultOpen,
+  as: Component,
+  ...props
+}, ref) => {
   const {
     depth
   } = React.useContext(SubNavContext);
-  let childrenWithoutSubNavOrTrailingAction;
-  let subNav;
-  let t1;
-  if ($[5] !== children || $[6] !== defaultOpen) {
-    subNav = React.Children.toArray(children).find(_temp);
-    let t2;
-    if ($[10] !== children) {
-      t2 = React.Children.toArray(children).filter(_temp2);
-      $[10] = children;
-      $[11] = t2;
-    } else {
-      t2 = $[11];
-    }
-    childrenWithoutSubNavOrTrailingAction = t2;
-    if (! /*#__PURE__*/isValidElement(subNav) && defaultOpen) {
-      console.error("NavList.Item must have a NavList.SubNav to use defaultOpen.");
-    }
-    t1 = subNav && /*#__PURE__*/isValidElement(subNav);
-    $[5] = children;
-    $[6] = defaultOpen;
-    $[7] = childrenWithoutSubNavOrTrailingAction;
-    $[8] = subNav;
-    $[9] = t1;
-  } else {
-    childrenWithoutSubNavOrTrailingAction = $[7];
-    subNav = $[8];
-    t1 = $[9];
-  }
-  if (t1) {
-    let t2;
-    if ($[12] !== depth) {
-      t2 = {
-        "--subitem-depth": depth
-      };
-      $[12] = depth;
-      $[13] = t2;
-    } else {
-      t2 = $[13];
-    }
-    const t3 = t2;
-    let t4;
-    if ($[14] !== childrenWithoutSubNavOrTrailingAction || $[15] !== defaultOpen || $[16] !== depth || $[17] !== subNav || $[18] !== t3) {
-      t4 = /*#__PURE__*/jsx(ItemWithSubNav, {
-        subNav: subNav,
-        depth: depth,
-        defaultOpen: defaultOpen,
-        style: t3,
-        children: childrenWithoutSubNavOrTrailingAction
-      });
-      $[14] = childrenWithoutSubNavOrTrailingAction;
-      $[15] = defaultOpen;
-      $[16] = depth;
-      $[17] = subNav;
-      $[18] = t3;
-      $[19] = t4;
-    } else {
-      t4 = $[19];
-    }
-    return t4;
-  }
-  const t2 = Boolean(ariaCurrent) && ariaCurrent !== "false";
-  let t3;
-  if ($[20] !== depth) {
-    t3 = {
-      "--subitem-depth": depth
-    };
-    $[20] = depth;
-    $[21] = t3;
-  } else {
-    t3 = $[21];
-  }
-  const t4 = t3;
-  let t5;
-  if ($[22] !== ariaCurrent || $[23] !== children || $[24] !== props || $[25] !== ref || $[26] !== t2 || $[27] !== t4) {
-    t5 = /*#__PURE__*/jsx(ActionList.LinkItem, {
-      ref: ref,
-      "aria-current": ariaCurrent,
-      active: t2,
-      style: t4,
-      ...props,
-      children: children
+
+  // Get SubNav from children
+  const subNav = React.Children.toArray(children).find(child => /*#__PURE__*/isValidElement(child) && (child.type === SubNav || isSlot(child, SubNav)));
+
+  // Get children without SubNav or TrailingAction
+  const childrenWithoutSubNavOrTrailingAction = React.Children.toArray(children).filter(child => /*#__PURE__*/isValidElement(child) ? child.type !== SubNav && child.type !== TrailingAction && !isSlot(child, SubNav) && !isSlot(child, TrailingAction) : true);
+  if (! /*#__PURE__*/isValidElement(subNav) && defaultOpen)
+    // eslint-disable-next-line no-console
+    console.error('NavList.Item must have a NavList.SubNav to use defaultOpen.');
+
+  // Render ItemWithSubNav if SubNav is present
+  if (subNav && /*#__PURE__*/isValidElement(subNav)) {
+    return /*#__PURE__*/jsx(ItemWithSubNav, {
+      subNav: subNav,
+      depth: depth,
+      defaultOpen: defaultOpen,
+      style: {
+        '--subitem-depth': depth
+      },
+      children: childrenWithoutSubNavOrTrailingAction
     });
-    $[22] = ariaCurrent;
-    $[23] = children;
-    $[24] = props;
-    $[25] = ref;
-    $[26] = t2;
-    $[27] = t4;
-    $[28] = t5;
-  } else {
-    t5 = $[28];
   }
-  return t5;
+
+  // Type safety for the polymorphic `as` prop is enforced at the
+  // Item boundary via fixedForwardRef. Internally we widen
+  // LinkItem's type so TypeScript doesn't re-check the generic
+  // constraint across two polymorphic layers.
+  const InternalLinkItem = ActionList.LinkItem;
+  return /*#__PURE__*/jsx(InternalLinkItem, {
+    ref: ref,
+    as: Component,
+    "aria-current": ariaCurrent,
+    active: Boolean(ariaCurrent) && ariaCurrent !== 'false',
+    style: {
+      '--subitem-depth': depth
+    },
+    ...props,
+    children: children
+  });
+});
+const Item = Object.assign(ItemComponent, {
+  displayName: 'NavList.Item'
 });
-Item.displayName = 'NavList.Item';
 
 // ----------------------------------------------------------------------------
 // ItemWithSubNav (internal)
@@ -259,7 +191,7 @@ function ItemWithSubNav(t0) {
   const t4 = !isOpen && containsCurrentItem;
   let t5;
   if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = () => setIsOpen(_temp3);
+    t5 = () => setIsOpen(_temp);
     $[8] = t5;
   } else {
     t5 = $[8];
@@ -341,7 +273,7 @@ function ItemWithSubNav(t0) {
 
 // ----------------------------------------------------------------------------
 // NavList.SubNav
-function _temp3(open) {
+function _temp(open) {
   return !open;
 }
 const SubNavContext = /*#__PURE__*/React.createContext({
@@ -696,11 +628,5 @@ const NavList = Object.assign(Root, {
   GroupExpand,
   GroupHeading
 });
-function _temp(child) {
-  return /*#__PURE__*/isValidElement(child) && (child.type === SubNav || isSlot(child, SubNav));
-}
-function _temp2(child_0) {
-  return /*#__PURE__*/isValidElement(child_0) ? child_0.type !== SubNav && child_0.type !== TrailingAction && !isSlot(child_0, SubNav) && !isSlot(child_0, TrailingAction) : true;
-}
 
 export { GroupExpand, NavList };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.16.0",
+  "version": "38.17.0-rc.15f016c2b",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",