@primer/react 37.32.0-rc.f8e94f384 → 38.0.0-rc.09f015db1

package/dist/LabelGroup/LabelGroup.js

@@ -0,0 +1,337 @@
+import { c } from 'react-compiler-runtime';
+import React from 'react';
+import { XIcon } from '@primer/octicons-react';
+import { getFocusableChild } from '@primer/behaviors/utils';
+import VisuallyHidden from '../_VisuallyHidden.js';
+import { IconButton } from '../Button/IconButton.js';
+import { ButtonComponent } from '../Button/Button.js';
+import { clsx } from 'clsx';
+import classes from './LabelGroup.module.css.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AnchoredOverlay } from '../AnchoredOverlay/AnchoredOverlay.js';
+
+// Calculates the width of the overlay to cover the labels/tokens and the expand button.
+const getOverlayWidth = (buttonClientRect, containerRef, overlayPaddingPx) => {
+  var _containerRef$current;
+  return overlayPaddingPx + buttonClientRect.right - (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().left) || 0);
+};
+const InlineToggle = t0 => {
+  const $ = c(7);
+  const {
+    collapseButtonRef,
+    collapseInlineExpandedChildren,
+    expandButtonRef,
+    hiddenItemIds,
+    isOverflowShown,
+    showAllTokensInline
+  } = t0;
+  let t1;
+  if ($[0] !== collapseButtonRef || $[1] !== collapseInlineExpandedChildren || $[2] !== expandButtonRef || $[3] !== hiddenItemIds || $[4] !== isOverflowShown || $[5] !== showAllTokensInline) {
+    t1 = isOverflowShown ? /*#__PURE__*/jsx(ButtonComponent, {
+      ref: collapseButtonRef,
+      onClick: collapseInlineExpandedChildren,
+      size: "small",
+      variant: "invisible",
+      children: "Show less"
+    }) : hiddenItemIds.length ? /*#__PURE__*/jsxs(ButtonComponent, {
+      ref: expandButtonRef,
+      variant: "invisible",
+      size: "small",
+      onClick: showAllTokensInline,
+      children: [/*#__PURE__*/jsxs(VisuallyHidden, {
+        children: ["Show +", hiddenItemIds.length, " more"]
+      }), /*#__PURE__*/jsxs("span", {
+        "aria-hidden": "true",
+        children: ["+", hiddenItemIds.length]
+      })]
+    }) : null;
+    $[0] = collapseButtonRef;
+    $[1] = collapseInlineExpandedChildren;
+    $[2] = expandButtonRef;
+    $[3] = hiddenItemIds;
+    $[4] = isOverflowShown;
+    $[5] = showAllTokensInline;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
+};
+const OverlayToggle = t0 => {
+  const $ = c(9);
+  const {
+    children,
+    closeOverflowOverlay,
+    expandButtonRef,
+    hiddenItemIds,
+    isOverflowShown,
+    openOverflowOverlay,
+    overlayPaddingPx,
+    overlayWidth
+  } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== closeOverflowOverlay || $[2] !== expandButtonRef || $[3] !== hiddenItemIds.length || $[4] !== isOverflowShown || $[5] !== openOverflowOverlay || $[6] !== overlayPaddingPx || $[7] !== overlayWidth) {
+    t1 = hiddenItemIds.length ? /*#__PURE__*/jsx(AnchoredOverlay, {
+      open: isOverflowShown,
+      onOpen: openOverflowOverlay,
+      onClose: closeOverflowOverlay,
+      width: "auto",
+      height: "auto",
+      align: "start",
+      side: "inside-right",
+      anchorRef: expandButtonRef,
+      anchorOffset: overlayPaddingPx * -1,
+      alignmentOffset: overlayPaddingPx * -1,
+      renderAnchor: props => /*#__PURE__*/jsxs(ButtonComponent, {
+        variant: "invisible",
+        size: "small",
+        ...props,
+        ref: expandButtonRef,
+        children: [/*#__PURE__*/jsxs(VisuallyHidden, {
+          children: ["Show +", hiddenItemIds.length, " more"]
+        }), /*#__PURE__*/jsxs("span", {
+          "aria-hidden": "true",
+          children: ["+", hiddenItemIds.length]
+        })]
+      }),
+      focusZoneSettings: {
+        disabled: true
+      },
+      children: /*#__PURE__*/jsxs("div", {
+        className: classes.OverlayContainer,
+        style: {
+          width: overlayWidth,
+          padding: `${overlayPaddingPx}px`
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          className: classes.OverlayInner,
+          children: children
+        }), /*#__PURE__*/jsx(IconButton, {
+          onClick: closeOverflowOverlay,
+          icon: XIcon,
+          "aria-label": "Close",
+          variant: "invisible",
+          className: classes.CloseButton
+        })]
+      })
+    }) : null;
+    $[0] = children;
+    $[1] = closeOverflowOverlay;
+    $[2] = expandButtonRef;
+    $[3] = hiddenItemIds.length;
+    $[4] = isOverflowShown;
+    $[5] = openOverflowOverlay;
+    $[6] = overlayPaddingPx;
+    $[7] = overlayWidth;
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  return t1;
+};
+
+// TODO: reduce re-renders
+const LabelGroup = ({
+  children,
+  visibleChildCount,
+  overflowStyle = 'overlay',
+  as: Component = 'ul',
+  className
+}) => {
+  const containerRef = React.useRef(null);
+  const collapseButtonRef = React.useRef(null);
+  const firstHiddenIndexRef = React.useRef(undefined);
+  const [visibilityMap, setVisibilityMap] = React.useState({});
+  const [isOverflowShown, setIsOverflowShown] = React.useState(false);
+  const [buttonClientRect, setButtonClientRect] = React.useState({
+    width: 0,
+    right: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    toJSON: () => undefined
+  });
+  const overlayPaddingPx = 8; // var(--base-size-8), hardcoded to do some math
+  const hiddenItemIds = Object.keys(visibilityMap).filter(key => !visibilityMap[key]);
+
+  // `overlayWidth` is only needed when we render an overlay
+  // if we don't use an overlay, we can skip the width calculation
+  // and save on reflows caused by measuring DOM nodes.
+  const overlayWidth = hiddenItemIds.length && overflowStyle === 'overlay' ? getOverlayWidth(buttonClientRect, containerRef, overlayPaddingPx) : undefined;
+  const expandButtonRef = React.useCallback(node => {
+    if (node !== null) {
+      const nodeClientRect = node.getBoundingClientRect();
+      if (nodeClientRect.width !== buttonClientRect.width || nodeClientRect.right !== buttonClientRect.right) {
+        setButtonClientRect(nodeClientRect);
+      }
+
+      // @ts-ignore you can set `.current` on ref objects or ref callbacks in React
+      expandButtonRef.current = node;
+    }
+  }, [buttonClientRect]);
+
+  // Sets the visibility map to hide children after the given index.
+  const hideChildrenAfterIndex = React.useCallback(truncateAfter => {
+    var _containerRef$current2;
+    const containerChildren = ((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children) || [];
+    const updatedEntries = {};
+    for (const child of containerChildren) {
+      const targetId = child.getAttribute('data-index');
+      if (targetId) {
+        updatedEntries[targetId] = parseInt(targetId, 10) < truncateAfter;
+      }
+    }
+    setVisibilityMap(updatedEntries);
+  }, []);
+  const openOverflowOverlay = React.useCallback(() => setIsOverflowShown(true), [setIsOverflowShown]);
+  const closeOverflowOverlay = React.useCallback(() => {
+    setIsOverflowShown(false);
+  }, [setIsOverflowShown]);
+  const collapseInlineExpandedChildren = React.useCallback(() => {
+    setIsOverflowShown(false);
+    if (visibleChildCount && typeof visibleChildCount === 'number') {
+      hideChildrenAfterIndex(visibleChildCount);
+    }
+
+    // We need to manually re-focus the collapse button if we're not showing the full
+    // list in an overlay.
+    // TODO: get rid of this hack
+    setTimeout(() => {
+      var _expandButtonRef$curr;
+      // @ts-ignore you can set `.current` on ref objects or ref callbacks in React
+      (_expandButtonRef$curr = expandButtonRef.current) === null || _expandButtonRef$curr === void 0 ? void 0 : _expandButtonRef$curr.focus();
+    }, 10);
+  }, [expandButtonRef, hideChildrenAfterIndex, visibleChildCount]);
+  const showAllTokensInline = React.useCallback(() => {
+    setVisibilityMap({});
+    setIsOverflowShown(true);
+  }, [setVisibilityMap, setIsOverflowShown]);
+  React.useEffect(() => {
+    // If we're not truncating, we don't need to run this useEffect.
+    if (!visibleChildCount || isOverflowShown) {
+      return;
+    }
+    if (visibleChildCount === 'auto') {
+      // Instantiates the IntersectionObserver to track when children fit in the container.
+      const observer = new IntersectionObserver(entries => {
+        const updatedEntries_0 = {};
+        for (const entry of entries) {
+          // Checks which children are intersecting the root container
+          const targetId_0 = entry.target.getAttribute('data-index');
+          if (targetId_0) {
+            updatedEntries_0[targetId_0] = entry.isIntersecting;
+          }
+        }
+
+        // Updates the visibility map based on the intersection results.
+        setVisibilityMap(prev => ({
+          ...prev,
+          ...updatedEntries_0
+        }));
+      }, {
+        root: containerRef.current,
+        rootMargin: `0px -${buttonClientRect.width}px 0px 0px`,
+        threshold: 1
+      });
+      for (const item of ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.children) || []) {
+        var _containerRef$current3;
+        if (item.getAttribute('data-index')) {
+          observer.observe(item);
+        }
+      }
+      return () => observer.disconnect();
+    }
+    // We're not auto truncating, so we need to hide children after the given `visibleChildCount`.
+    else {
+      hideChildrenAfterIndex(visibleChildCount);
+    }
+  }, [buttonClientRect, visibleChildCount, hideChildrenAfterIndex, isOverflowShown]);
+
+  // Updates the index of the first hidden child.
+  // We need to keep track of this so we can focus the first hidden child when the overflow is shown inline.
+  React.useEffect(() => {
+    // If we're using an overlay, we don't need to keep track of the first hidden index.
+    if (overflowStyle === 'overlay') {
+      return;
+    }
+    if (hiddenItemIds.length) {
+      firstHiddenIndexRef.current = parseInt(hiddenItemIds[0], 10);
+    }
+  }, [hiddenItemIds, overflowStyle, isOverflowShown]);
+
+  // Updates the index of the first hidden child.
+  // We need to keep track of this so we can focus the first hidden child when the overflow is shown inline.
+  React.useEffect(() => {
+    // If we're using an overlay, we don't need to focus the first child that was previously hidden.
+    if (overflowStyle === 'overlay') {
+      return;
+    }
+    const firstHiddenChildDOM = document.querySelector(`[data-index="${firstHiddenIndexRef.current}"]`);
+    const focusableChild = firstHiddenChildDOM ? getFocusableChild(firstHiddenChildDOM) : null;
+    if (isOverflowShown) {
+      // If the first hidden child is focusable, focus it.
+      // Otherwise, focus the collapse button.
+      if (focusableChild) {
+        focusableChild.focus();
+      } else {
+        var _collapseButtonRef$cu;
+        (_collapseButtonRef$cu = collapseButtonRef.current) === null || _collapseButtonRef$cu === void 0 ? void 0 : _collapseButtonRef$cu.focus();
+      }
+    }
+  }, [overflowStyle, isOverflowShown]);
+  const isList = Component === 'ul' || Component === 'ol';
+  const ToggleWrapper = isList ? 'li' : React.Fragment;
+  const ItemWrapperComponent = isList ? 'li' : 'span';
+
+  // If truncation is enabled, we need to render based on truncation logic.
+  return visibleChildCount ? /*#__PURE__*/jsxs(Component, {
+    ref: containerRef,
+    "data-overflow": overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined,
+    "data-list": isList || undefined,
+    className: clsx(className, classes.Container),
+    children: [React.Children.map(children, (child_0, index) => /*#__PURE__*/jsx(ItemWrapperComponent
+    // data-index is used as an identifier we can use in the IntersectionObserver
+    , {
+      "data-index": index,
+      className: clsx(classes.ItemWrapper, {
+        [classes['ItemWrapper--hidden']]: hiddenItemIds.includes(index.toString())
+      }),
+      children: child_0
+    }, index)), /*#__PURE__*/jsx(ToggleWrapper, {
+      children: overflowStyle === 'inline' ? /*#__PURE__*/jsx(InlineToggle, {
+        collapseButtonRef: collapseButtonRef,
+        collapseInlineExpandedChildren: collapseInlineExpandedChildren,
+        expandButtonRef: expandButtonRef,
+        hiddenItemIds: hiddenItemIds,
+        isOverflowShown: isOverflowShown,
+        showAllTokensInline: showAllTokensInline,
+        totalLength: React.Children.toArray(children).length
+      }) : /*#__PURE__*/jsx(OverlayToggle, {
+        closeOverflowOverlay: closeOverflowOverlay,
+        expandButtonRef: expandButtonRef,
+        hiddenItemIds: hiddenItemIds,
+        isOverflowShown: isOverflowShown,
+        openOverflowOverlay: openOverflowOverlay,
+        overlayPaddingPx: overlayPaddingPx,
+        overlayWidth: overlayWidth,
+        totalLength: React.Children.toArray(children).length,
+        children: children
+      })
+    })]
+  }) : /*#__PURE__*/jsx(Component, {
+    "data-overflow": "inline",
+    "data-list": isList || undefined,
+    className: clsx(className, classes.Container),
+    children: isList ? React.Children.map(children, (child_1, index_0) => {
+      return /*#__PURE__*/jsx("li", {
+        children: child_1
+      }, index_0);
+    }) : children
+  });
+};
+LabelGroup.displayName = 'LabelGroup';
+
+export { LabelGroup as default };

package/dist/LabelGroup/LabelGroup.module.css.js

@@ -0,0 +1,5 @@
+import './LabelGroup-7d19205a.css';
+
+var classes = {"Container":"prc-LabelGroup-Container-0bBKg","ItemWrapper":"prc-LabelGroup-ItemWrapper-ETvGq","ItemWrapper--hidden":"prc-LabelGroup-ItemWrapper--hidden-HzoA1","OverlayContainer":"prc-LabelGroup-OverlayContainer-pt4uv","OverlayInner":"prc-LabelGroup-OverlayInner-qvwGT","CloseButton":"prc-LabelGroup-CloseButton-GyJi3"};
+
+export { classes as default };

package/dist/Link/Link-e01bdaee.css

@@ -0,0 +1,2 @@
+:where(.prc-Link-Link-85e08){color:var(--fgColor-accent,var(--color-accent-fg));-webkit-text-decoration:none;text-decoration:none;text-underline-offset:.05rem}:where(.prc-Link-Link-85e08):is(button){appearance:none;background-color:transparent;border:0;cursor:pointer;display:inline-block;font-size:inherit;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}:where(.prc-Link-Link-85e08):hover{-webkit-text-decoration:underline;text-decoration:underline}:where(.prc-Link-Link-85e08):where([data-underline=true]),[data-a11y-link-underlines=true] :where(.prc-Link-Link-85e08):where([data-inline=true]){-webkit-text-decoration:underline;text-decoration:underline}:where(.prc-Link-Link-85e08):where([data-muted=true]){color:var(--fgColor-muted,var(--color-fg-muted))}:where(.prc-Link-Link-85e08):where([data-muted=true]):hover{color:var(--fgColor-accent,var(--color-accent-fg));-webkit-text-decoration:none;text-decoration:none}
+/*# sourceMappingURL=Link-e01bdaee.css.map */

package/dist/Link/Link-e01bdaee.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Link/Link.module.css"],"names":[],"mappings":"AAAA,6BACE,kDAA4B,CAC5B,4BAAqB,CAArB,oBAAqB,CACrB,4BAqCF,CAlCE,wCASE,eAAgB,CAFhB,4BAA6B,CAC7B,QAAS,CAHT,cAAe,CAJf,oBAAqB,CAErB,iBAAkB,CADlB,SAAU,CAIV,wBAAiB,CAAjB,gBAAiB,CAFjB,kBAMF,CAEA,mCACE,iCAA0B,CAA1B,yBACF,CAGA,kJAME,iCAA0B,CAA1B,yBACF,CAEA,sDACE,gDAMF,CAJE,4DACE,kDAA4B,CAC5B,4BAAqB,CAArB,oBACF","file":"Link-e01bdaee.css","sourcesContent":[":where(.Link) {\n  color: var(--fgColor-accent);\n  text-decoration: none;\n  text-underline-offset: 0.05rem;\n\n  /* Reset for button tags */\n  &:is(button) {\n    display: inline-block;\n    padding: 0;\n    font-size: inherit;\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    background-color: transparent;\n    border: 0;\n    appearance: none;\n  }\n\n  &:hover {\n    text-decoration: underline;\n  }\n\n  /* Deprecated: but need to support backwards compatibility */\n  &:where([data-underline='true']),\n  /*\n    Inline links (inside a text block), however, should have underline based on accessibility setting set in data-attribute\n    Note: setting underline={false} does not override this\n  */\n  [data-a11y-link-underlines='true'] &:where([data-inline='true']) {\n    text-decoration: underline;\n  }\n\n  &:where([data-muted='true']) {\n    color: var(--fgColor-muted);\n\n    &:hover {\n      color: var(--fgColor-accent);\n      text-decoration: none;\n    }\n  }\n}\n"]}

package/dist/Link/Link.d.ts

@@ -0,0 +1,21 @@
+import React, { type ForwardedRef } from 'react';
+import type { ComponentProps } from '../utils/types';
+import { type PolymorphicProps } from '../utils/modern-polymorphic';
+type StyledLinkProps<As extends React.ElementType = 'a'> = {
+    as?: As;
+    /** @deprecated use CSS modules to style hover color */
+    hoverColor?: string;
+    muted?: boolean;
+    /** @deprecated use `inline` to specify the type of link instead */
+    underline?: boolean;
+    inline?: boolean;
+};
+export declare const UnwrappedLink: <As extends React.ElementType = "a">(props: PolymorphicProps<As, "a", StyledLinkProps>, ref: ForwardedRef<unknown>) => React.JSX.Element;
+declare const Link: (<As extends React.ElementType = "a">(props: (React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & StyledLinkProps<"a"> extends infer T ? T extends React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & StyledLinkProps<"a"> ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
+    as?: As | undefined;
+} & React.RefAttributes<unknown>) => React.ReactNode) & {
+    displayName: string;
+};
+export type LinkProps = ComponentProps<typeof Link>;
+export default Link;
+//# sourceMappingURL=Link.d.ts.map

package/dist/Link/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAY,KAAK,YAAY,EAAkB,MAAM,OAAO,CAAA;AAG1E,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAClD,OAAO,EAAC,KAAK,gBAAgB,EAAkB,MAAM,6BAA6B,CAAA;AAElF,KAAK,eAAe,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI;IACzD,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAC9D,OAAO,gBAAgB,CAAC,EAAE,EAAE,GAAG,EAAE,eAAe,CAAC,EACjD,KAAK,YAAY,CAAC,OAAO,CAAC,sBA2C3B,CAAA;AAID,QAAA,MAAM,IAAI,IAjDoB,EAAE,SAAS,KAAK,CAAC,WAAW;;;;CAiDM,CAAA;AAEhE,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;AACnD,eAAe,IAAI,CAAA"}

package/dist/Link/Link.js

@@ -0,0 +1,52 @@
+import { clsx } from 'clsx';
+import React, { useEffect } from 'react';
+import classes from './Link.module.css.js';
+import { fixedForwardRef } from '../utils/modern-polymorphic.js';
+import { jsx } from 'react/jsx-runtime';
+import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
+
+const UnwrappedLink = (props, ref) => {
+  const {
+    as: Component = 'a',
+    className,
+    inline,
+    underline,
+    hoverColor,
+    ...restProps
+  } = props;
+  const innerRef = React.useRef(null);
+  useRefObjectAsForwardedRef(ref, innerRef);
+  if (process.env.NODE_ENV !== "production") {
+    /**
+     * The Linter yells because it thinks this conditionally calls an effect,
+     * but since this is a compile-time flag and not a runtime conditional
+     * this is safe, and ensures the entire effect is kept out of prod builds
+     * shaving precious bytes from the output, and avoiding mounting a noop effect
+     */
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      if (innerRef.current && !(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement)) {
+        // eslint-disable-next-line no-console
+        console.error('Error: Found `Link` component that renders an inaccessible element', innerRef.current, 'Please ensure `Link` always renders as <a> or <button>');
+      }
+    }, [innerRef]);
+  }
+  return /*#__PURE__*/jsx(Component, {
+    className: clsx(className, classes.Link),
+    "data-muted": restProps.muted,
+    "data-inline": inline,
+    "data-underline": underline,
+    "data-hover-color": hoverColor,
+    ...restProps,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ref: innerRef
+  });
+};
+UnwrappedLink.displayName = "UnwrappedLink";
+const LinkComponent = fixedForwardRef(UnwrappedLink);
+const Link = Object.assign(LinkComponent, {
+  displayName: 'Link'
+});
+
+export { UnwrappedLink, Link as default };

package/dist/Link/Link.module.css.js

@@ -0,0 +1,5 @@
+import './Link-e01bdaee.css';
+
+var classes = {"Link":"prc-Link-Link-85e08"};
+
+export { classes as default };

package/dist/NavList/NavList-5dc067e3.css

@@ -0,0 +1,2 @@
+.prc-NavList-GroupHeading-KIlSv>a{color:var(--fgColor-default,var(--color-fg-default));text-decoration:inherit}.prc-NavList-GroupHeading-KIlSv>a:hover{-webkit-text-decoration:underline;text-decoration:underline}
+/*# sourceMappingURL=NavList-5dc067e3.css.map */

package/dist/NavList/NavList-5dc067e3.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/NavList/NavList.module.css"],"names":[],"mappings":"AAAA,kCACE,oDAA6B,CAC7B,uBACF,CAEA,wCACE,iCAA0B,CAA1B,yBACF","file":"NavList-5dc067e3.css","sourcesContent":[".GroupHeading > a {\n  color: var(--fgColor-default);\n  text-decoration: inherit;\n}\n\n.GroupHeading > a:hover {\n  text-decoration: underline;\n}\n"]}

package/dist/NavList/NavList.d.ts

@@ -0,0 +1,53 @@
+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';
+export type NavListProps = {
+    children: React.ReactNode;
+} & React.ComponentProps<'nav'>;
+export type NavListItemProps = {
+    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;
+};
+export type NavListLeadingVisualProps = ActionListLeadingVisualProps;
+export type NavListTrailingVisualProps = ActionListTrailingVisualProps;
+export type NavListDividerProps = ActionListDividerProps;
+export type NavListTrailingActionProps = ActionListTrailingActionProps;
+export type NavListGroupProps = React.HTMLAttributes<HTMLLIElement> & {
+    children: React.ReactNode;
+    title?: string;
+};
+type GroupItem = {
+    text: string;
+    trailingVisual?: Icon | string;
+    leadingVisual?: Icon;
+    trailingAction?: ActionListTrailingActionProps;
+    'data-expand-focus-target'?: string;
+} & Omit<NavListItemProps, 'children'>;
+export type NavListGroupExpandProps = {
+    label?: string;
+    pages?: number;
+    items: GroupItem[];
+    renderItem?: (item: GroupItem) => React.ReactNode;
+};
+export declare const GroupExpand: React.ForwardRefExoticComponent<NavListGroupExpandProps & React.RefAttributes<HTMLButtonElement>>;
+export type NavListGroupHeadingProps = ActionListGroupHeadingProps;
+export declare const NavList: React.ForwardRefExoticComponent<Omit<NavListProps, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Item: PolymorphicForwardRefComponent<"a", NavListItemProps>;
+    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>>;
+    TrailingAction: PolymorphicForwardRefComponent<"a" | "button", ActionListTrailingActionProps>;
+    Divider: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<ActionListDividerProps>>;
+    Group: React.FC<NavListGroupProps>;
+    GroupExpand: React.ForwardRefExoticComponent<NavListGroupExpandProps & React.RefAttributes<HTMLButtonElement>>;
+    GroupHeading: React.FC<ActionListGroupHeadingProps>;
+};
+export {};
+//# sourceMappingURL=NavList.d.ts.map

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

@@ -0,0 +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;AAoHD,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;;;;;;;;;;CAUlB,CAAA"}