@primer/react 38.30.0-rc.dc0369509 → 38.30.1-rc.2d1806208

package/dist/SideNav.js

@@ -1,51 +1,122 @@
+import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import classes from './SideNav.module.css.js';
 import { jsx } from 'react/jsx-runtime';
 import Link from './Link/Link.js';
 
-function SideNav({
-  as: Component = 'nav',
-  variant = 'normal',
-  className,
-  bordered,
-  children,
-  'aria-label': ariaLabel
-}) {
-  const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
-  const newClassName = clsx(classes.SideNav, classes[`SideNavVariant--${variantClassName}`], 'sidenav', `variant-${variantClassName}`, className, {
-    [classes.SideNavBordered]: bordered
-  });
-  return /*#__PURE__*/jsx(Component, {
-    className: newClassName,
-    "aria-label": ariaLabel,
-    "data-component": "SideNav",
-    children: children
-  });
+function SideNav(t0) {
+  const $ = c(10);
+  const {
+    as: t1,
+    variant: t2,
+    className,
+    bordered,
+    children,
+    "aria-label": ariaLabel
+  } = t0;
+  const Component = t1 === undefined ? "nav" : t1;
+  const variant = t2 === undefined ? "normal" : t2;
+  const variantClassName = variant === "lightweight" ? "lightweight" : "normal";
+  const t3 = classes[`SideNavVariant--${variantClassName}`];
+  const t4 = `variant-${variantClassName}`;
+  let t5;
+  if ($[0] !== bordered || $[1] !== className || $[2] !== t3 || $[3] !== t4) {
+    t5 = clsx(classes.SideNav, t3, "sidenav", t4, className, {
+      [classes.SideNavBordered]: bordered
+    });
+    $[0] = bordered;
+    $[1] = className;
+    $[2] = t3;
+    $[3] = t4;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  const newClassName = t5;
+  let t6;
+  if ($[5] !== Component || $[6] !== ariaLabel || $[7] !== children || $[8] !== newClassName) {
+    t6 = /*#__PURE__*/jsx(Component, {
+      className: newClassName,
+      "aria-label": ariaLabel,
+      "data-component": "SideNav",
+      children: children
+    });
+    $[5] = Component;
+    $[6] = ariaLabel;
+    $[7] = children;
+    $[8] = newClassName;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  return t6;
 }
-SideNav.displayName = "SideNav";
-const SideNavLink = ({
-  selected,
-  to,
-  variant,
-  className,
-  children,
-  ...rest
-}) => {
-  const isReactRouter = typeof to === 'string';
-  const newClassName = clsx(classes.SideNavLink, className, {
-    [classes.SideNavLinkFull]: variant === 'full'
-  });
-  // according to their docs, NavLink supports aria-current:
-  // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
-  return /*#__PURE__*/jsx(Link, {
-    "aria-current": isReactRouter || selected ? 'page' : undefined,
-    className: newClassName,
-    ...rest,
-    "data-component": "SideNav.Link",
-    children: children
-  });
+const SideNavLink = t0 => {
+  const $ = c(15);
+  let children;
+  let className;
+  let rest;
+  let selected;
+  let to;
+  let variant;
+  if ($[0] !== t0) {
+    ({
+      selected,
+      to,
+      variant,
+      className,
+      children,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = rest;
+    $[4] = selected;
+    $[5] = to;
+    $[6] = variant;
+  } else {
+    children = $[1];
+    className = $[2];
+    rest = $[3];
+    selected = $[4];
+    to = $[5];
+    variant = $[6];
+  }
+  const isReactRouter = typeof to === "string";
+  const t1 = variant === "full";
+  let t2;
+  if ($[7] !== className || $[8] !== t1) {
+    t2 = clsx(classes.SideNavLink, className, {
+      [classes.SideNavLinkFull]: t1
+    });
+    $[7] = className;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  const newClassName = t2;
+  const t3 = isReactRouter || selected ? "page" : undefined;
+  let t4;
+  if ($[10] !== children || $[11] !== newClassName || $[12] !== rest || $[13] !== t3) {
+    t4 = /*#__PURE__*/jsx(Link, {
+      "aria-current": t3,
+      className: newClassName,
+      ...rest,
+      "data-component": "SideNav.Link",
+      children: children
+    });
+    $[10] = children;
+    $[11] = newClassName;
+    $[12] = rest;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  return t4;
 };
-SideNavLink.displayName = "SideNavLink";
 SideNavLink.displayName = 'SideNav.Link';
 /** @deprecated Use [NavList](https://primer.style/react/NavList) instead */
 var SideNav_default = Object.assign(SideNav, {

package/dist/UnderlineNav/UnderlineNav-47547980.css

@@ -0,0 +1,2 @@
+.prc-UnderlineNav-UnderlineWrapper-GWONT{animation:prc-UnderlineNav-detect-overflow-6HuSH linear;animation-timeline:scroll(self block);--UnderlineNav_moreButton-visibility:hidden;--UnderlineNav_icons-display:inline}.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons=true]{--UnderlineNav_icons-display:none}.prc-UnderlineNav-UnderlineWrapper-GWONT[data-has-overflow=true]{--UnderlineNav_moreButton-visibility:visible}@keyframes prc-UnderlineNav-detect-overflow-6HuSH{0%,to{--UnderlineNav_moreButton-visibility:visible;--UnderlineNav_icons-display:none}}.prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:var(--UnderlineNav_icons-display)}.prc-UnderlineNav-MoreButtonContainer-Dnrq6{align-items:center;display:flex;visibility:var(--UnderlineNav_moreButton-visibility)}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current]{position:relative}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current] .prc-UnderlineNav-OverflowMenuItemLabel-F80v6{font-weight:var(--base-text-weight-semibold,600)}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current]:after{background:var(--underlineNav-borderColor-active,#fd8c73);content:"";inset:var(--base-size-2,.125rem) auto var(--base-size-2,.125rem) 0;position:absolute;width:var(--base-size-2,.125rem)}.prc-UnderlineNav-MoreButtonDivider-dN0a-{border-left:var(--borderWidth-thin,.0625rem) solid var(--borderColor-muted,#d1d9e0b3);display:inline-block;height:var(--base-size-24,1.5rem);margin-inline:var(--base-size-4,.25rem);width:0}.prc-UnderlineNav-MoreButton-Y8soj{font-weight:var(--base-text-weight-normal,400);margin:0;position:relative}.prc-UnderlineNav-MoreButton-Y8soj>[data-component=trailingVisual]{margin-left:0}.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]{font-weight:var(--base-text-weight-semibold,600)}.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73));content:"";height:2px;inset:auto 0 0;margin-bottom:calc((var(--base-size-8,.5rem) + var(--borderWidth-thin,.0625rem))*-1);pointer-events:none;position:absolute}@media (forced-colors:active){.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]:after{background-color:LinkText}}
+/*# sourceMappingURL=UnderlineNav-47547980.css.map */

package/dist/UnderlineNav/UnderlineNav-47547980.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/UnderlineNav/UnderlineNav.module.css.js"],"names":[],"mappings":"AAAA,yCAIE,uDAAiC,CACjC,qCAAsC,CAEtC,2CAA4C,CAC5C,mCASF,CAPE,+DACE,iCACF,CAEA,iEACE,4CACF,CAGF,kDACE,MAEE,4CAA6C,CAC7C,iCACF,CACF,CAEA,wDACE,yCACF,CAEA,4CAGE,kBAAmB,CAFnB,YAAa,CACb,oDAEF,CAEA,wDACE,iBAcF,CAZE,sGACE,gDACF,CAEA,8DAME,yDAAkD,CALlD,UAAW,CAGX,kEAAmD,CADnD,iBAAkB,CADlB,gCAKF,CAGF,0CAEE,qFAAmE,CADnE,oBAAqB,CAIrB,iCAA2B,CAD3B,uCAAiC,CADjC,OAGF,CAEA,mCAEE,8CAA2C,CAD3C,QAAS,CAET,iBA6BF,CA3BE,mEACE,aACF,CAIA,sDACE,gDAmBF,CAjBE,4DAUE,iGAAoG,CAFpG,UAAW,CAFX,UAAW,CAJX,cAAe,CAGf,oFAAwE,CAExE,mBAAoB,CANpB,iBAeF,CAJE,8BAZF,4DAcI,yBAEJ,CADE","file":"UnderlineNav-47547980.css","sourcesContent":[".UnderlineWrapper {\n  /* Progressive enhancement: Detect overflow using scroll-based animations.\n  The idiomatic way would be a scroll-state container query but browser support\n  is slightly better for animations. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n\n  --UnderlineNav_moreButton-visibility: hidden;\n  --UnderlineNav_icons-display: inline;\n\n  &[data-hide-icons='true'] {\n    --UnderlineNav_icons-display: none;\n  }\n\n  &[data-has-overflow='true'] {\n    --UnderlineNav_moreButton-visibility: visible;\n  }\n}\n\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --UnderlineNav_moreButton-visibility: visible;\n    --UnderlineNav_icons-display: none;\n  }\n}\n\n.ItemsList [data-component='icon'] {\n  display: var(--UnderlineNav_icons-display);\n}\n\n.MoreButtonContainer {\n  display: flex;\n  visibility: var(--UnderlineNav_moreButton-visibility);\n  align-items: center;\n}\n\n.OverflowMenuItem [aria-current] {\n  position: relative;\n\n  .OverflowMenuItemLabel {\n    font-weight: var(--base-text-weight-semibold);\n  }\n\n  &::after {\n    content: '';\n    width: var(--base-size-2);\n    position: absolute;\n    inset: var(--base-size-2) auto var(--base-size-2) 0;\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--underlineNav-borderColor-active);\n  }\n}\n\n.MoreButtonDivider {\n  display: inline-block;\n  border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n  width: 0;\n  margin-inline: var(--base-size-4);\n  height: var(--base-size-24);\n}\n\n.MoreButton {\n  margin: 0; /* reset Safari extra margin */\n  font-weight: var(--base-text-weight-normal);\n  position: relative;\n\n  & > [data-component='trailingVisual'] {\n    margin-left: 0;\n  }\n\n  /* When the current item has overflowed into the menu, style the overflow\n   anchor so it looks like the current item (semibold text + active underline). */\n  &[data-current='true'] {\n    font-weight: var(--base-text-weight-semibold);\n\n    &::after {\n      position: absolute;\n      inset: auto 0 0;\n      /* Pull down same amount as the item-level decoration, plus the border width of the button */\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: calc(-1 * (var(--base-size-8) + var(--borderWidth-thin)));\n      height: 2px;\n      pointer-events: none;\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n      @media (forced-colors: active) {\n        /* Support for Windows Forced Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n        background-color: LinkText;\n      }\n    }\n  }\n}\n"]}

package/dist/UnderlineNav/UnderlineNav.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type UnderlineNavProps = {
     children: React.ReactNode;
     'aria-label'?: React.AriaAttributes['aria-label'];
@@ -15,6 +15,5 @@ export type UnderlineNavProps = {
      */
     variant?: 'inset' | 'flush';
 };
-export declare const MORE_BTN_WIDTH = 86;
 export declare const UnderlineNav: React.ForwardRefExoticComponent<UnderlineNavProps & React.RefAttributes<unknown>>;
 //# sourceMappingURL=UnderlineNav.d.ts.map

package/dist/UnderlineNav/UnderlineNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAqBtE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAC5B,CAAA;AAGD,eAAO,MAAM,cAAc,KAAK,CAAA;AAsGhC,eAAO,MAAM,YAAY,mFA0SxB,CAAA"}
+{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,YAAY,mFAsIxB,CAAA"}