npm - @primer/react-brand - Versions diffs - 0.75.0-rc.c3abcc84 → 0.75.0 - Mend

@primer/react-brand 0.75.0-rc.c3abcc84 → 0.75.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (915) hide show

package/docs/index.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.75.0-rc.c3abcc84)
+# Primer Brand docs (v0.75.0)
-These docs are bundled with `@primer/react-brand@0.75.0-rc.c3abcc84` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.75.0` and match your installed version.
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/Accordion/Accordion.d.ts CHANGED Viewed

@@ -35,14 +35,14 @@ export declare const AccordionHeading: React.ForwardRefExoticComponent<React.HTM
     weight?: HeadingProps["weight"];
 } & React.RefAttributes<HTMLHeadingElement>>;
 export type AccordionContentProps = HTMLAttributes<HTMLElement>;
-export declare const AccordionContent: ({ children, className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionContent: ({ children, className, ...rest }: AccordionContentProps) => React.JSX.Element;
 export declare const Accordion: React.ForwardRefExoticComponent<React.DetailsHTMLAttributes<HTMLDetailsElement> & {
     children: ReactElement<AccordionHeadingProps | AccordionContentProps>[];
     variant?: "default" | "emphasis";
     disableAnimation?: boolean;
     handleOpen?: (isOpen: boolean) => void;
 } & React.RefAttributes<HTMLDetailsElement>> & {
-    Content: ({ children, className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, ...rest }: AccordionContentProps) => React.JSX.Element;
     Heading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
         as?: HeadingProps["as"];
         reversedToggles?: boolean;

package/esm/Accordion/Accordion.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EAGnB,KAAK,YAAY,EAGlB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAU,KAAK,YAAY,EAAC,MAAM,KAAK,CAAA;AAK9C;;GAEG;AACH,OAAO,6GAA6G,CAAA;AAKpH,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,kBAAkB,CAAC,GAAG;IAC3E,QAAQ,EAAE,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE,CAAA;IACvE,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAkBD,eAAO,MAAM,aAAa;cAtBd,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;uBACb,OAAO;iBACb,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;4CAkNvC,CAAA;AAED,eAAO,MAAM,qBAAqB,8MAAqC,CAAA;AAEvE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAChE,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;IACpD,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAChC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;SAXtB,YAAY,CAAC,IAAI,CAAC;sBACL,OAAO;kBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;aAC3C,YAAY,CAAC,QAAQ,CAAC;4CAiChC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAE/D,eAAO,MAAM,gBAAgB,GAAI,kCAAgC,qBAAqB,~~4CAIrF~~,CAAA;AAED,eAAO,MAAM,SAAS;cAxQV,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;uBACb,OAAO;iBACb,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;;gDA+PyB,qBAAqB;;aAxC/E,YAAY,CAAC,IAAI,CAAC;0BACL,OAAO;sBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;iBAC3C,YAAY,CAAC,QAAQ,CAAC;;CA2C4E,CAAA"}
1	+ {"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EAGnB,KAAK,YAAY,EAGlB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAU,KAAK,YAAY,EAAC,MAAM,KAAK,CAAA;AAK9C;;GAEG;AACH,OAAO,6GAA6G,CAAA;AAKpH,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,kBAAkB,CAAC,GAAG;IAC3E,QAAQ,EAAE,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE,CAAA;IACvE,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAkBD,eAAO,MAAM,aAAa;cAtBd,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;uBACb,OAAO;iBACb,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;4CAkNvC,CAAA;AAED,eAAO,MAAM,qBAAqB,8MAAqC,CAAA;AAEvE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAChE,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;IACpD,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAChC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;SAXtB,YAAY,CAAC,IAAI,CAAC;sBACL,OAAO;kBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;aAC3C,YAAY,CAAC,QAAQ,CAAC;4CAiChC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAE/D,eAAO,MAAM,gBAAgB,GAAI,kCAAgC,qBAAqB,sBAIrF,CAAA;AAED,eAAO,MAAM,SAAS;cAxQV,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;uBACb,OAAO;iBACb,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;;gDA+PyB,qBAAqB;;aAxC/E,YAAY,CAAC,IAAI,CAAC;0BACL,OAAO;sBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;iBAC3C,YAAY,CAAC,QAAQ,CAAC;;CA2C4E,CAAA"}

package/esm/Accordion/Accordion.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { BiColorGradients as t, Colors as n } from "../constants.js";
 import { useProvidedRefOrCreate as r } from "../hooks/useRef.js";
 import { Heading as i } from "../Heading/Heading.js";
-import { TriangleDownIcon as a } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { TriangleDownIcon as a } from "../node_modules/@primer/octicons-react/dist/icons/TriangleDownIcon.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes-PcQKqJQI.css';/* empty css                                                                                                       */
 import o from "./Accordion.module.js";
 import { createContext as s, forwardRef as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p } from "react";

package/esm/Accordion/Accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.js","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n type DetailsHTMLAttributes,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type ReactElement,\n type RefObject,\n type ToggleEvent,\n} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, type HeadingProps} from '../'\nimport {TriangleDownIcon} from '@primer/octicons-react'\nimport {Colors, BiColorGradients as Gradients} from '../constants'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Accordion.module.css'\n\nexport type AccordionRootProps = DetailsHTMLAttributes<HTMLDetailsElement> & {\n children: ReactElement<AccordionHeadingProps \| AccordionContentProps>[]\n variant?: 'default' \| 'emphasis'\n disableAnimation?: boolean\n handleOpen?: (isOpen: boolean) => void\n}\n\ntype AccordionContextType = {\n variant: 'default' \| 'emphasis'\n}\n\nconst AccordionContext = createContext<AccordionContextType \| null>(null)\n\nconst useAccordionContext = (): AccordionContextType => {\n const context = useContext(AccordionContext)\n\n if (context === null) {\n throw new Error('Unable to find Accordion provider. Did you forget to wrap your component in an Accordion?')\n }\n\n return context\n}\n\nexport const AccordionRoot = forwardRef<HTMLDetailsElement, AccordionRootProps>(\n (\n {\n children,\n className,\n variant = 'default',\n disableAnimation = false,\n open,\n onClick,\n onToggle,\n onKeyDown,\n handleOpen,\n ...rest\n },\n forwardedRef,\n ) => {\n const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDetailsElement \| null>)\n const closeAnimationTimeout = useRef<ReturnType<typeof setTimeout> \| null>(null)\n const isClosingRef = useRef(false)\n const accordionContextValue = useMemo(() => ({variant}), [variant])\n\n const setContentHeight = useCallback((details: HTMLDetailsElement) => {\n const content = details.querySelector<HTMLElement>(`:scope > .${styles.Accordion__content}`)\n const contentInner = content?.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n\n if (!content \|\| !contentInner) {\n return null\n }\n\n const contentOffset = parseFloat(getComputedStyle(content).getPropertyValue('--brand-Accordion-content-offset'))\n const contentHeight = Math.max(0, contentInner.scrollHeight - (Number.isNaN(contentOffset) ? 0 : contentOffset))\n\n details.style.setProperty('--brand-Accordion-content-height', `${contentHeight}px`)\n\n return content\n }, [])\n\n const clearCloseAnimation = useCallback(() => {\n if (closeAnimationTimeout.current) {\n clearTimeout(closeAnimationTimeout.current)\n closeAnimationTimeout.current = null\n }\n }, [])\n\n const closeWithAnimation = useCallback(\n (details: HTMLDetailsElement) => {\n clearCloseAnimation()\n const reducedMotionQuery =\n typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n ? window.matchMedia('(prefers-reduced-motion: reduce)')\n : null\n const prefersReducedMotion = reducedMotionQuery !== null && reducedMotionQuery.matches\n\n if (prefersReducedMotion) {\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n return\n }\n\n const content = setContentHeight(details)\n\n if (content) {\n content.getBoundingClientRect()\n }\n\n isClosingRef.current = true\n details.classList.add(styles['Accordion--closing'])\n\n closeAnimationTimeout.current = setTimeout(() => {\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n closeAnimationTimeout.current = null\n }, 300)\n },\n [clearCloseAnimation, setContentHeight],\n )\n\n const handleToggle = useCallback<(event: Event) => void>(\n event => {\n const toggleEvent = event as unknown as ToggleEvent<HTMLDetailsElement>\n if (toggleEvent.currentTarget.open) {\n clearCloseAnimation()\n isClosingRef.current = false\n toggleEvent.currentTarget.classList.remove(styles['Accordion--closing'])\n setContentHeight(toggleEvent.currentTarget)\n }\n onToggle?.(toggleEvent)\n handleOpen?.(toggleEvent.currentTarget.open)\n },\n [clearCloseAnimation, onToggle, handleOpen, setContentHeight],\n )\n\n const handleClick = useCallback<MouseEventHandler<HTMLDetailsElement>>(\n event => {\n onClick?.(event)\n\n if (event.defaultPrevented \|\| disableAnimation) {\n return\n }\n\n const details = event.currentTarget\n const target = event.target\n\n if (!(target instanceof Element) \|\| !details.open) {\n return\n }\n\n const summary = target.closest('summary')\n\n if (summary?.parentElement === details) {\n event.preventDefault()\n\n if (!isClosingRef.current) {\n closeWithAnimation(details)\n }\n }\n },\n [closeWithAnimation, disableAnimation, onClick],\n )\n\n const handleKeyDown = useCallback<EventListener>(\n event => {\n const keyboardEvent = event as unknown as KeyboardEvent<HTMLDetailsElement>\n onKeyDown?.(keyboardEvent)\n\n const details = ref.current\n\n if (keyboardEvent.key === 'Escape' && details?.open) {\n clearCloseAnimation()\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n details.querySelector('summary')?.focus()\n }\n },\n [clearCloseAnimation, onKeyDown, ref],\n )\n\n useEffect(() => {\n const detailsElement = ref.current\n if (detailsElement) {\n const contentInner = detailsElement.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n let resizeObserver: ResizeObserver \| undefined\n\n if (detailsElement.open) {\n setContentHeight(detailsElement)\n }\n\n if (typeof ResizeObserver !== 'undefined' && contentInner) {\n resizeObserver = new ResizeObserver(() => {\n if (detailsElement.open) {\n setContentHeight(detailsElement)\n }\n })\n resizeObserver.observe(contentInner)\n }\n\n detailsElement.addEventListener('toggle', handleToggle)\n detailsElement.addEventListener('keydown', handleKeyDown)\n\n return () => {\n clearCloseAnimation()\n resizeObserver?.disconnect()\n detailsElement.removeEventListener('toggle', handleToggle)\n detailsElement.removeEventListener('keydown', handleKeyDown)\n }\n }\n }, [clearCloseAnimation, handleToggle, handleKeyDown, ref, setContentHeight])\n\n return (\n <AccordionContext.Provider value={accordionContextValue}>\n {/ eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events -- summary is natively keyboard-operable and keyboard activation also fires click; onClick only intercepts to animate the close /}\n <details\n className={clsx(\n styles.Accordion,\n styles[`Accordion--${variant}`],\n disableAnimation && styles['Accordion--disableAnimation'],\n className,\n )}\n ref={ref}\n open={open}\n {...rest}\n onClick={handleClick}\n >\n {children}\n </details>\n </AccordionContext.Provider>\n )\n },\n)\n\nexport const AccordionToggleColors = [...Colors, ...Gradients] as const\n\nexport type AccordionHeadingProps = HTMLAttributes<HTMLElement> & {\n as?: HeadingProps['as']\n reversedToggles?: boolean\n toggleColor?: (typeof AccordionToggleColors)[number]\n weight?: HeadingProps['weight']\n}\n\n/\n TODO This type is incorrect\n * The ref is applied to the summary, not the heading, so the correct type is\n * `forwardRef<HTMLElement, AccordionHeadingProps>`\n */\nexport const AccordionHeading = forwardRef<HTMLHeadingElement, AccordionHeadingProps>(\n ({children, className, as = 'h4', toggleColor, reversedToggles, weight = 'normal', ...rest}, ref) => {\n const {variant} = useAccordionContext()\n\n return (\n <summary\n className={clsx(\n styles.Accordion__summary,\n reversedToggles && styles['Accordion__summary--reversed-toggles'],\n styles[`Accordion__summary--${variant}`],\n toggleColor && styles[`Accordion__summary--toggleColor-${toggleColor}`],\n className,\n )}\n ref={ref}\n {...rest}\n >\n <span aria-hidden=\"true\" className={styles['Accordion__summary-toggle']}>\n <TriangleDownIcon className={styles['Accordion__summary-toggleIcon']} size={22} />\n </span>\n <Heading as={as} size={variant === 'emphasis' ? '6' : 'subhead-large'} weight={weight}>\n {children}\n </Heading>\n </summary>\n )\n },\n)\n\nexport type AccordionContentProps = HTMLAttributes<HTMLElement>\n\nexport const AccordionContent = ({children, className, ...rest}: AccordionContentProps) => (\n <section className={clsx(styles.Accordion__content, className)} {...rest}>\n <div className={styles['Accordion__content-inner']}>{children}</div>\n </section>\n)\n\nexport const Accordion = Object.assign(AccordionRoot, {Content: AccordionContent, Heading: AccordionHeading})\n"],"mappings":"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"}
1	+ {"version":3,"file":"Accordion.js","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n type DetailsHTMLAttributes,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type ReactElement,\n type RefObject,\n type ToggleEvent,\n} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, type HeadingProps} from '../'\nimport {TriangleDownIcon} from '@primer/octicons-react'\nimport {Colors, BiColorGradients as Gradients} from '../constants'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Accordion.module.css'\n\nexport type AccordionRootProps = DetailsHTMLAttributes<HTMLDetailsElement> & {\n children: ReactElement<AccordionHeadingProps \| AccordionContentProps>[]\n variant?: 'default' \| 'emphasis'\n disableAnimation?: boolean\n handleOpen?: (isOpen: boolean) => void\n}\n\ntype AccordionContextType = {\n variant: 'default' \| 'emphasis'\n}\n\nconst AccordionContext = createContext<AccordionContextType \| null>(null)\n\nconst useAccordionContext = (): AccordionContextType => {\n const context = useContext(AccordionContext)\n\n if (context === null) {\n throw new Error('Unable to find Accordion provider. Did you forget to wrap your component in an Accordion?')\n }\n\n return context\n}\n\nexport const AccordionRoot = forwardRef<HTMLDetailsElement, AccordionRootProps>(\n (\n {\n children,\n className,\n variant = 'default',\n disableAnimation = false,\n open,\n onClick,\n onToggle,\n onKeyDown,\n handleOpen,\n ...rest\n },\n forwardedRef,\n ) => {\n const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDetailsElement \| null>)\n const closeAnimationTimeout = useRef<ReturnType<typeof setTimeout> \| null>(null)\n const isClosingRef = useRef(false)\n const accordionContextValue = useMemo(() => ({variant}), [variant])\n\n const setContentHeight = useCallback((details: HTMLDetailsElement) => {\n const content = details.querySelector<HTMLElement>(`:scope > .${styles.Accordion__content}`)\n const contentInner = content?.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n\n if (!content \|\| !contentInner) {\n return null\n }\n\n const contentOffset = parseFloat(getComputedStyle(content).getPropertyValue('--brand-Accordion-content-offset'))\n const contentHeight = Math.max(0, contentInner.scrollHeight - (Number.isNaN(contentOffset) ? 0 : contentOffset))\n\n details.style.setProperty('--brand-Accordion-content-height', `${contentHeight}px`)\n\n return content\n }, [])\n\n const clearCloseAnimation = useCallback(() => {\n if (closeAnimationTimeout.current) {\n clearTimeout(closeAnimationTimeout.current)\n closeAnimationTimeout.current = null\n }\n }, [])\n\n const closeWithAnimation = useCallback(\n (details: HTMLDetailsElement) => {\n clearCloseAnimation()\n const reducedMotionQuery =\n typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n ? window.matchMedia('(prefers-reduced-motion: reduce)')\n : null\n const prefersReducedMotion = reducedMotionQuery !== null && reducedMotionQuery.matches\n\n if (prefersReducedMotion) {\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n return\n }\n\n const content = setContentHeight(details)\n\n if (content) {\n content.getBoundingClientRect()\n }\n\n isClosingRef.current = true\n details.classList.add(styles['Accordion--closing'])\n\n closeAnimationTimeout.current = setTimeout(() => {\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n closeAnimationTimeout.current = null\n }, 300)\n },\n [clearCloseAnimation, setContentHeight],\n )\n\n const handleToggle = useCallback<(event: Event) => void>(\n event => {\n const toggleEvent = event as unknown as ToggleEvent<HTMLDetailsElement>\n if (toggleEvent.currentTarget.open) {\n clearCloseAnimation()\n isClosingRef.current = false\n toggleEvent.currentTarget.classList.remove(styles['Accordion--closing'])\n setContentHeight(toggleEvent.currentTarget)\n }\n onToggle?.(toggleEvent)\n handleOpen?.(toggleEvent.currentTarget.open)\n },\n [clearCloseAnimation, onToggle, handleOpen, setContentHeight],\n )\n\n const handleClick = useCallback<MouseEventHandler<HTMLDetailsElement>>(\n event => {\n onClick?.(event)\n\n if (event.defaultPrevented \|\| disableAnimation) {\n return\n }\n\n const details = event.currentTarget\n const target = event.target\n\n if (!(target instanceof Element) \|\| !details.open) {\n return\n }\n\n const summary = target.closest('summary')\n\n if (summary?.parentElement === details) {\n event.preventDefault()\n\n if (!isClosingRef.current) {\n closeWithAnimation(details)\n }\n }\n },\n [closeWithAnimation, disableAnimation, onClick],\n )\n\n const handleKeyDown = useCallback<EventListener>(\n event => {\n const keyboardEvent = event as unknown as KeyboardEvent<HTMLDetailsElement>\n onKeyDown?.(keyboardEvent)\n\n const details = ref.current\n\n if (keyboardEvent.key === 'Escape' && details?.open) {\n clearCloseAnimation()\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n details.querySelector('summary')?.focus()\n }\n },\n [clearCloseAnimation, onKeyDown, ref],\n )\n\n useEffect(() => {\n const detailsElement = ref.current\n if (detailsElement) {\n const contentInner = detailsElement.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n let resizeObserver: ResizeObserver \| undefined\n\n if (detailsElement.open) {\n setContentHeight(detailsElement)\n }\n\n if (typeof ResizeObserver !== 'undefined' && contentInner) {\n resizeObserver = new ResizeObserver(() => {\n if (detailsElement.open) {\n setContentHeight(detailsElement)\n }\n })\n resizeObserver.observe(contentInner)\n }\n\n detailsElement.addEventListener('toggle', handleToggle)\n detailsElement.addEventListener('keydown', handleKeyDown)\n\n return () => {\n clearCloseAnimation()\n resizeObserver?.disconnect()\n detailsElement.removeEventListener('toggle', handleToggle)\n detailsElement.removeEventListener('keydown', handleKeyDown)\n }\n }\n }, [clearCloseAnimation, handleToggle, handleKeyDown, ref, setContentHeight])\n\n return (\n <AccordionContext.Provider value={accordionContextValue}>\n {/ eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events -- summary is natively keyboard-operable and keyboard activation also fires click; onClick only intercepts to animate the close /}\n <details\n className={clsx(\n styles.Accordion,\n styles[`Accordion--${variant}`],\n disableAnimation && styles['Accordion--disableAnimation'],\n className,\n )}\n ref={ref}\n open={open}\n {...rest}\n onClick={handleClick}\n >\n {children}\n </details>\n </AccordionContext.Provider>\n )\n },\n)\n\nexport const AccordionToggleColors = [...Colors, ...Gradients] as const\n\nexport type AccordionHeadingProps = HTMLAttributes<HTMLElement> & {\n as?: HeadingProps['as']\n reversedToggles?: boolean\n toggleColor?: (typeof AccordionToggleColors)[number]\n weight?: HeadingProps['weight']\n}\n\n/\n TODO This type is incorrect\n * The ref is applied to the summary, not the heading, so the correct type is\n * `forwardRef<HTMLElement, AccordionHeadingProps>`\n */\nexport const AccordionHeading = forwardRef<HTMLHeadingElement, AccordionHeadingProps>(\n ({children, className, as = 'h4', toggleColor, reversedToggles, weight = 'normal', ...rest}, ref) => {\n const {variant} = useAccordionContext()\n\n return (\n <summary\n className={clsx(\n styles.Accordion__summary,\n reversedToggles && styles['Accordion__summary--reversed-toggles'],\n styles[`Accordion__summary--${variant}`],\n toggleColor && styles[`Accordion__summary--toggleColor-${toggleColor}`],\n className,\n )}\n ref={ref}\n {...rest}\n >\n <span aria-hidden=\"true\" className={styles['Accordion__summary-toggle']}>\n <TriangleDownIcon className={styles['Accordion__summary-toggleIcon']} size={22} />\n </span>\n <Heading as={as} size={variant === 'emphasis' ? '6' : 'subhead-large'} weight={weight}>\n {children}\n </Heading>\n </summary>\n )\n },\n)\n\nexport type AccordionContentProps = HTMLAttributes<HTMLElement>\n\nexport const AccordionContent = ({children, className, ...rest}: AccordionContentProps) => (\n <section className={clsx(styles.Accordion__content, className)} {...rest}>\n <div className={styles['Accordion__content-inner']}>{children}</div>\n </section>\n)\n\nexport const Accordion = Object.assign(AccordionRoot, {Content: AccordionContent, Heading: AccordionHeading})\n"],"mappings":";;;;;;;;;;AA0CA,IAAM,IAAmB,EAA2C,IAAI,GAElE,UAAkD;CACtD,IAAM,IAAU,EAAW,CAAgB;CAE3C,IAAI,MAAY,MACd,MAAU,MAAM,2FAA2F;CAG7G,OAAO;AACT,GAEa,IAAgB,GAEzB,EACE,aACA,cACA,aAAU,WACV,sBAAmB,IACnB,SACA,YACA,aACA,cACA,eACA,GAAG,KAEL,MACG;CACH,IAAM,IAAM,EAAuB,CAAoD,GACjF,IAAwB,EAA6C,IAAI,GACzE,IAAe,EAAO,EAAK,GAC3B,IAAwB,SAAe,EAAC,WAAO,IAAI,CAAC,CAAO,CAAC,GAE5D,IAAmB,GAAa,MAAgC;EACpE,IAAM,IAAU,EAAQ,cAA2B,aAAa,EAAO,oBAAoB,GACrF,IAAe,GAAS,cAA2B,IAAI,EAAO,6BAA6B;EAEjG,IAAI,CAAC,KAAW,CAAC,GACf,OAAO;EAGT,IAAM,IAAgB,WAAW,iBAAiB,CAAO,CAAC,CAAC,iBAAiB,kCAAkC,CAAC,GACzG,IAAgB,KAAK,IAAI,GAAG,EAAa,gBAAgB,OAAO,MAAM,CAAa,IAAI,IAAI,EAAc;EAI/G,OAFA,EAAQ,MAAM,YAAY,oCAAoC,GAAG,EAAc,GAAG,GAE3E;CACT,GAAG,CAAC,CAAC,GAEC,IAAsB,QAAkB;EAC5C,AAEE,EAAsB,aADtB,aAAa,EAAsB,OAAO,GACV;CAEpC,GAAG,CAAC,CAAC,GAEC,IAAqB,GACxB,MAAgC;EAC/B,EAAoB;EACpB,IAAM,IACJ,OAAO,SAAW,OAAe,OAAO,OAAO,cAAe,aAC1D,OAAO,WAAW,kCAAkC,IACpD;EAGN,IAF6B,MAAuB,QAAQ,EAAmB,SAErD;GAGxB,AAFA,EAAQ,OAAO,IACf,EAAa,UAAU,IACvB,EAAQ,UAAU,OAAO,EAAO,qBAAqB;GACrD;EACF;EAEA,IAAM,IAAU,EAAiB,CAAO;EASxC,AAPI,KACF,EAAQ,sBAAsB,GAGhC,EAAa,UAAU,IACvB,EAAQ,UAAU,IAAI,EAAO,qBAAqB,GAElD,EAAsB,UAAU,iBAAiB;GAI/C,AAHA,EAAQ,OAAO,IACf,EAAa,UAAU,IACvB,EAAQ,UAAU,OAAO,EAAO,qBAAqB,GACrD,EAAsB,UAAU;EAClC,GAAG,GAAG;CACR,GACA,CAAC,GAAqB,CAAgB,CACxC,GAEM,IAAe,GACnB,MAAS;EACP,IAAM,IAAc;EAQpB,AAPI,EAAY,cAAc,SAC5B,EAAoB,GACpB,EAAa,UAAU,IACvB,EAAY,cAAc,UAAU,OAAO,EAAO,qBAAqB,GACvE,EAAiB,EAAY,aAAa,IAE5C,IAAW,CAAW,GACtB,IAAa,EAAY,cAAc,IAAI;CAC7C,GACA;EAAC;EAAqB;EAAU;EAAY;CAAgB,CAC9D,GAEM,IAAc,GAClB,MAAS;EAGP,IAFA,IAAU,CAAK,GAEX,EAAM,oBAAoB,GAC5B;EAGF,IAAM,IAAU,EAAM,eAChB,IAAS,EAAM;EAEjB,EAAE,aAAkB,YAAY,CAAC,EAAQ,QAI7B,EAAO,QAAQ,SAE3B,CAAA,EAAS,kBAAkB,MAC7B,EAAM,eAAe,GAEhB,EAAa,WAChB,EAAmB,CAAO;CAGhC,GACA;EAAC;EAAoB;EAAkB;CAAO,CAChD,GAEM,IAAgB,GACpB,MAAS;EACP,IAAM,IAAgB;EACtB,IAAY,CAAa;EAEzB,IAAM,IAAU,EAAI;EAEpB,AAAI,EAAc,QAAQ,YAAY,GAAS,SAC7C,EAAoB,GACpB,EAAQ,OAAO,IACf,EAAa,UAAU,IACvB,EAAQ,UAAU,OAAO,EAAO,qBAAqB,GACrD,EAAQ,cAAc,SAAS,CAAC,EAAE,MAAM;CAE5C,GACA;EAAC;EAAqB;EAAW;CAAG,CACtC;CAiCA,OA/BA,QAAgB;EACd,IAAM,IAAiB,EAAI;EAC3B,IAAI,GAAgB;GAClB,IAAM,IAAe,EAAe,cAA2B,IAAI,EAAO,6BAA6B,GACnG;GAkBJ,OAhBI,EAAe,QACjB,EAAiB,CAAc,GAG7B,OAAO,iBAAmB,OAAe,MAC3C,IAAiB,IAAI,qBAAqB;IACxC,AAAI,EAAe,QACjB,EAAiB,CAAc;GAEnC,CAAC,GACD,EAAe,QAAQ,CAAY,IAGrC,EAAe,iBAAiB,UAAU,CAAY,GACtD,EAAe,iBAAiB,WAAW,CAAa,SAE3C;IAIX,AAHA,EAAoB,GACpB,GAAgB,WAAW,GAC3B,EAAe,oBAAoB,UAAU,CAAY,GACzD,EAAe,oBAAoB,WAAW,CAAa;GAC7D;EACF;CACF,GAAG;EAAC;EAAqB;EAAc;EAAe;EAAK;CAAgB,CAAC,GAG1E,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAEhC,kBAAC,WAAD;GACE,WAAW,EACT,EAAO,WACP,EAAO,cAAc,MACrB,KAAoB,EAAO,gCAC3B,CACF;GACK;GACC;GACN,GAAI;GACJ,SAAS;GAER;EACM,CAAA;CACgB,CAAA;AAE/B,CACF,GAEa,IAAwB,CAAC,GAAG,GAAQ,GAAG,CAAS,GAchD,IAAmB,GAC7B,EAAC,aAAU,cAAW,QAAK,MAAM,gBAAa,oBAAiB,YAAS,UAAU,GAAG,KAAO,MAAQ;CACnG,IAAM,EAAC,eAAW,EAAoB;CAEtC,OACE,kBAAC,WAAD;EACE,WAAW,EACT,EAAO,oBACP,KAAmB,EAAO,yCAC1B,EAAO,uBAAuB,MAC9B,KAAe,EAAO,mCAAmC,MACzD,CACF;EACK;EACL,GAAI;YATN,CAWE,kBAAC,QAAD;GAAM,eAAY;GAAO,WAAW,EAAO;aACzC,kBAAC,GAAD;IAAkB,WAAW,EAAO;IAAkC,MAAM;GAAK,CAAA;EAC7E,CAAA,GACN,kBAAC,GAAD;GAAa;GAAI,MAAM,MAAY,aAAa,MAAM;GAAyB;GAC5E;EACM,CAAA,CACF;;AAEb,CACF,GAIa,KAAoB,EAAC,aAAU,cAAW,GAAG,QACxD,kBAAC,WAAD;CAAS,WAAW,EAAK,EAAO,oBAAoB,CAAS;CAAG,GAAI;WAClE,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA8B;CAAc,CAAA;AAC5D,CAAA,GAGE,IAAY,OAAO,OAAO,GAAe;CAAC,SAAS;CAAkB,SAAS;AAAgB,CAAC"}

package/esm/Accordion/Accordion.module.js CHANGED Viewed

@@ -1,12 +1,13 @@
-import './Accordion.module-COckontb.css';var e = {
-	Accordion: "Primer_Brand__Accordion-module__Accordion___RSoMC",
+import './Accordion.module-COckontb.css';//#region src/Accordion/Accordion.module.css
+var e = "Primer_Brand__Accordion-module__Accordion___RSoMC", t = "Primer_Brand__Accordion-module__Accordion__content___GhUVO", n = "Primer_Brand__Accordion-module__Accordion__summary___zYOXC", r = {
+	Accordion: e,
 	"Accordion--disableAnimation": "Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8",
 	"Accordion__summary-toggleIcon": "Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5",
-	Accordion__content: "Primer_Brand__Accordion-module__Accordion__content___GhUVO",
+	Accordion__content: t,
 	"Accordion__content-inner": "Primer_Brand__Accordion-module__Accordion__content-inner___R4pof",
 	"Accordion--default": "Primer_Brand__Accordion-module__Accordion--default___R_5ld",
 	"Accordion--emphasis": "Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT",
-	Accordion__summary: "Primer_Brand__Accordion-module__Accordion__summary___zYOXC",
+	Accordion__summary: n,
 	"Accordion__summary--emphasis": "Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI",
 	"Accordion__summary--reversed-toggles": "Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W",
 	"Accordion__summary-toggle": "Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_",
@@ -33,6 +34,6 @@ import './Accordion.module-COckontb.css';var e = {
 	"Accordion--closing": "Primer_Brand__Accordion-module__Accordion--closing___R_qJH"
 };
 //#endregion
-export { e as default };
+export { e as Accordion, t as Accordion__content, n as Accordion__summary, r as default };
 //# sourceMappingURL=Accordion.module.js.map

package/esm/ActionMenu/ActionMenu.d.ts CHANGED Viewed

@@ -144,10 +144,10 @@ export declare const ActionMenu: React.NamedExoticComponent<{
      */
     mode?: ActionMenuButtonModes;
 } & BaseProps<HTMLDivElement>> & {
-    readonly type: ({ id, children, "data-testid": testId, disabled, open, selectionVariant, menuAlignment, size, menuSide, onSelect, mode, }: ActionMenuProps) => import("react/jsx-runtime").JSX.Element;
+    readonly type: ({ id, children, "data-testid": testId, disabled, open, selectionVariant, menuAlignment, size, menuSide, onSelect, mode, }: ActionMenuProps) => React.JSX.Element;
 } & {
     Button: React.ForwardRefExoticComponent<Omit<ActionMenuButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Item: ({ as, children, className, disabled, handler, selected, type, value, onClick, onKeyDown, leadingVisual: LeadingVisual, ...props }: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ as, children, className, disabled, handler, selected, type, value, onClick, onKeyDown, leadingVisual: LeadingVisual, ...props }: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => React.JSX.Element;
     Overlay: React.ForwardRefExoticComponent<Omit<ActionMenuOverlayProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
     testIds: {
         root: string;

package/esm/ActionMenu/ActionMenu.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../hooks/useId.js";
 import { Text as n } from "../Text/Text.js";
 import { Button as r } from "../Button/Button.js";
@@ -7,7 +7,8 @@ import { useTheme as a } from "../ThemeProvider/useTheme.js";
 import { useAnchoredPosition as o } from "../hooks/useAnchoredPosition.js";
 import { useOnClickOutside as s } from "../hooks/useOnClickOutside.js";
 import { useKeyboardEscape as c } from "../hooks/useKeyboardEscape.js";
-import { CheckIcon as l, ChevronDownIcon as u } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { CheckIcon as l } from "../node_modules/@primer/octicons-react/dist/icons/CheckIcon.js";
+import { ChevronDownIcon as u } from "../node_modules/@primer/octicons-react/dist/icons/ChevronDownIcon.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes-B69RzUbe.css';/* empty css                                                                                                         */
 import d from "./ActionMenu.module.js";
 import f, { Children as p, cloneElement as m, forwardRef as h, isValidElement as g, memo as _, useCallback as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";

package/esm/ActionMenu/ActionMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionMenu.js","names":[],"sources":["../../src/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, {\n Children,\n isValidElement,\n cloneElement,\n useRef,\n useCallback,\n useState,\n useEffect,\n PropsWithChildren,\n forwardRef,\n memo,\n ReactElement,\n useMemo,\n} from 'react'\nimport {Button, ButtonProps} from '../Button'\nimport {Text} from '../Text'\nimport {ThemeProvider, useTheme} from '../ThemeProvider'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\n\nimport {clsx} from 'clsx'\nimport {CheckIcon, ChevronDownIcon, type Icon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\n\nimport {FocusKeys, type PositionSettings, focusZone} from '@primer/behaviors'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './ActionMenu.module.css'\n\nconst testIds = {\n root: 'ActionMenu',\n get button() {\n return `${this.root}-button`\n },\n get overlay() {\n return `${this.root}-overlay`\n },\n get list() {\n return `${this.root}-list`\n },\n get item() {\n return `${this.root}-list-item`\n },\n}\n\n// primer behaviors doesn't export these values, recreating manually\n// https://github.com/primer/behaviors/blob/main/src/anchored-position.ts#L5\nexport const actionMenuOverlaySides = [\n 'inside-top',\n 'inside-bottom',\n 'inside-left',\n 'inside-right',\n 'inside-center',\n 'outside-top',\n 'outside-bottom',\n 'outside-left',\n 'outside-right',\n] as PositionSettings['side'][]\n\nexport const ActionMenuSizes = ['small', 'medium'] as const\n\nexport const ActionMenuButtonModes = ['default', 'split-button'] as const\nexport type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number]\n\nexport type ActionMenuSizes = (typeof ActionMenuSizes)[number]\n\nexport type ActionMenuProps = {\n /\n The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay\n /\n children:\n \| ReactElement<ActionMenuButtonProps>\n \| ReactElement<ActionMenuOverlayProps>\n \| Array<ReactElement<ActionMenuButtonProps> \| ReactElement<ActionMenuOverlayProps>>\n /\n Determines whether the ActionMenu is disabled\n /\n disabled?: boolean\n /\n Determines whether the ActionMenu is open by default\n /\n open?: boolean\n /\n Callback that is called when an item is selected.\n * The value of the selected item is passed as an argument.\n /\n onSelect?: (newValue: string) => void\n /\n The selection variant of the ActionMenu.\n * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.\n * - `none`: No items can be selected. Menu items as a menuitem.\n /\n selectionVariant?: 'single' \| 'none'\n /\n Test id for the ActionMenu\n /\n 'data-testid'?: string\n /\n Horizontal alignment of the menu relative to the bottom of the button\n /\n menuAlignment?: 'start' \| 'end'\n /\n Size configuratin of the ActionMenu\n /\n size?: ActionMenuSizes\n /\n * Side the menu overlay appears\n /\n menuSide?: PositionSettings['side']\n /\n Alternative behavior for the button and menu items\n * - `default`: The button and menu items behave as a standard button and menu item.\n * - `split-button`: The button behaves as a split button, and the menu items behave as links.\n /\n mode?: ActionMenuButtonModes\n} & BaseProps<HTMLDivElement>\n\ntype ActionMenuContextType = {\n size?: ActionMenuSizes\n setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes \| undefined>>\n onMenuToggle?: () => void\n}\n\nconst ActionMenuContext = React.createContext<ActionMenuContextType>({})\n\nexport const useActionMenuContext = (): ActionMenuContextType => {\n return React.useContext(ActionMenuContext)\n}\n\ntype ActionMenuProviderProps = ActionMenuProps & Pick<ActionMenuContextType, 'onMenuToggle'>\n\nexport const ActionMenuProvider: React.FC<ActionMenuProviderProps> = ({size, children, onMenuToggle}) => {\n const [currentSize, setSize] = useState(size)\n\n return (\n <ActionMenuContext.Provider value={{size: currentSize, setSize, onMenuToggle}}>\n {children}\n </ActionMenuContext.Provider>\n )\n}\n\nconst _ActionMenuRoot = memo(\n ({\n id,\n children,\n 'data-testid': testId,\n disabled,\n open = false,\n selectionVariant = 'none',\n menuAlignment = 'end',\n size = 'medium',\n menuSide,\n onSelect,\n mode = 'default',\n }: ActionMenuProps) => {\n const [showMenu, setShowMenu] = useState(open)\n const floatingElementRef = useRef<HTMLUListElement>(null)\n const anchorElementRef = useRef<HTMLButtonElement>(null)\n const instanceId = useId(id)\n\n useOnClickOutside(floatingElementRef, () => setShowMenu(false), anchorElementRef)\n\n const closeMenuCallback = useCallback(() => {\n setShowMenu(false)\n }, [])\n\n useKeyboardEscape(closeMenuCallback)\n\n const toggleMenu = useCallback(() => {\n setShowMenu(!showMenu)\n }, [showMenu])\n\n const handleOnSelect = useCallback(\n (newValue: string) => {\n if (onSelect) onSelect(newValue)\n toggleMenu()\n },\n [onSelect, toggleMenu],\n )\n\n const handleItemSelection = useCallback(\n (newValue: string) => {\n handleOnSelect(newValue)\n toggleMenu()\n anchorElementRef.current?.focus()\n },\n [handleOnSelect, toggleMenu, anchorElementRef],\n )\n\n useEffect(() => {\n if (showMenu && floatingElementRef.current) {\n const floatingElement = floatingElementRef.current\n const isSplitLayout = mode === 'split-button'\n const splitLayoutFilter = isSplitLayout ? element => element.tagName === 'A' : undefined\n\n focusZone(floatingElementRef.current, {\n bindKeys: FocusKeys.ArrowVertical,\n focusableElementFilter: splitLayoutFilter,\n focusInStrategy: isSplitLayout ? 'first' : undefined,\n })\n\n // enter selects item\n floatingElement.addEventListener('keydown', event => {\n if (event.key === 'Enter') {\n const target = event.target as HTMLElement\n\n // Get the proper element containing the data-value\n const targetElement = target.tagName === 'A' ? target.closest('li') : target\n\n if (!targetElement \|\| targetElement.getAttribute('aria-disabled') === 'true') return\n\n const value = targetElement.getAttribute('data-value')\n if (value) {\n handleOnSelect(value)\n setShowMenu(false)\n setTimeout(() => {\n anchorElementRef.current?.focus()\n }, 10)\n }\n }\n })\n\n const targetSelector = isSplitLayout ? 'a' : 'li'\n\n // focusses first item\n const firstItem = floatingElementRef.current.querySelector(targetSelector)\n if (firstItem) {\n setTimeout(() => {\n firstItem.focus()\n }, 10)\n }\n\n const lastItem =\n floatingElement.querySelectorAll(targetSelector)[floatingElement.querySelectorAll(targetSelector).length - 1]\n lastItem.addEventListener('keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent\n if (keyboardEvent.key === 'ArrowDown') {\n keyboardEvent.preventDefault()\n firstItem?.focus()\n }\n })\n\n firstItem?.addEventListener('keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent\n if (keyboardEvent.key === 'ArrowUp') {\n keyboardEvent.preventDefault()\n lastItem.focus()\n }\n })\n\n //on escape refocus\n floatingElement.addEventListener('keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent\n if (keyboardEvent.key === 'Escape') {\n anchorElementRef.current?.focus()\n }\n })\n }\n }, [showMenu, floatingElementRef, mode, handleItemSelection, toggleMenu, handleOnSelect])\n\n // Calculate the position of the menu\n const {position} = useAnchoredPosition(\n {\n floatingElementRef,\n anchorElementRef,\n align: menuAlignment,\n allowOutOfBounds: true,\n side: menuSide,\n },\n [showMenu],\n )\n\n const {Button: SelectButton, Overlay: SelectOverlay} = Children.toArray(children).reduce<{\n Button?: ReactElement<ActionMenuButtonProps>\n Overlay?: ReactElement<ActionMenuOverlayProps>\n }>((acc, child) => {\n if (isValidElement<ActionMenuButtonProps>(child) && child.type === ActionMenuButton) {\n acc.Button = cloneElement(child, {\n ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n className: clsx(child.props.className, styles[`ActionMenu__button--${mode}`], showMenu),\n menuOpen: showMenu,\n disabled,\n id: `${instanceId}-button`,\n size,\n _mode: mode,\n })\n } else if (isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay) {\n acc.Overlay = cloneElement(child, {\n ref: floatingElementRef as React.RefObject<HTMLUListElement>,\n className: clsx(\n styles.ActionMenu__menu,\n position && styles['ActionMenu__menu--visible'],\n position && styles[`ActionMenu__menu--pos-${position.anchorSide}`],\n styles[`ActionMenu__menu--${size}`],\n mode === 'split-button' && 'ActionMenu__menu--split',\n ),\n style: {\n top: `${position?.top ?? 0}px`,\n left: `${position?.left ?? 0}px`,\n },\n id: `${instanceId}-menu`,\n children: Children.map(child.props.children, item => {\n if (isValidElement<ActionMenuItemBaseProps>(item)) {\n return cloneElement(item, {\n handler: handleItemSelection,\n type: mode === 'split-button' ? 'link' : selectionVariant,\n })\n }\n return item\n }),\n })\n }\n return acc\n }, {})\n\n return (\n <ActionMenuProvider size={size} onMenuToggle={toggleMenu}>\n <div\n id={instanceId}\n className={clsx(styles.ActionMenu, disabled && styles['ActionMenu--disabled'])}\n data-testid={testId \|\| testIds.root}\n >\n {SelectButton}\n {showMenu ? SelectOverlay : null}\n </div>\n </ActionMenuProvider>\n )\n },\n)\n\ntype ActionMenuButtonProps = PropsWithChildren<\n BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' \| 'disabled' \| 'onClick'>\n> & {\n as?: ButtonProps<'a'>['as']\n href?: ButtonProps<'a'>['href']\n menuOpen?: boolean\n 'data-testid'?: string\n size?: ActionMenuSizes\n _mode?: ActionMenuButtonModes\n variant?: ButtonProps<'a'>['variant']\n leadingVisual?: ButtonProps<'a'>['leadingVisual']\n}\n\nconst ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(\n (\n {\n as,\n href,\n id,\n children,\n className,\n 'data-testid': testId,\n disabled,\n menuOpen,\n size,\n _mode = 'default',\n onClick,\n leadingVisual,\n variant,\n ...props\n },\n ref,\n ) => {\n const {onMenuToggle} = useActionMenuContext()\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(event)\n\n if (!event.defaultPrevented) {\n onMenuToggle?.()\n }\n },\n [onClick, onMenuToggle],\n )\n\n if (_mode === 'split-button') {\n const splitButtonVariant = variant ?? 'primary'\n\n return (\n <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n <Button\n as={as}\n href={href}\n className={clsx(\n styles['ActionMenu__innerButton--split-button'],\n styles[`ActionMenu__innerButton--${splitButtonVariant}`],\n styles[`ActionMenu__innerButton--${size}`],\n disabled && styles['ActionMenu__innerButton--disabled'],\n )}\n variant={splitButtonVariant}\n aria-disabled={disabled}\n data-testid={testId \|\| testIds.button}\n size={size}\n leadingVisual={leadingVisual}\n onClick={onClick}\n {...props}\n >\n <span className={styles['ActionMenu__button-text']}>{children}</span>\n </Button>\n <Button\n ref={ref}\n id={id}\n as=\"button\"\n className={styles['ActionMenu__innerButton--split-button']}\n variant={splitButtonVariant}\n aria-haspopup=\"true\"\n aria-label=\"Menu\"\n size={size}\n aria-expanded={menuOpen ? 'true' : 'false'}\n onClick={onMenuToggle}\n disabled={disabled}\n >\n <ChevronDownIcon className={styles['ActionMenu__inner-button-dropdown-icon']} />\n </Button>\n </div>\n )\n }\n\n return (\n <Button\n ref={ref}\n id={id}\n className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}\n aria-haspopup=\"true\"\n aria-expanded={menuOpen ? 'true' : 'false'}\n disabled={disabled}\n data-testid={testId \|\| testIds.button}\n size={size}\n variant={variant}\n leadingVisual={leadingVisual}\n trailingVisual={<ChevronDownIcon />}\n onClick={handleClick}\n {...props}\n >\n <span className={styles['ActionMenu__button-text']}>{children}</span>\n </Button>\n )\n },\n)\n\ntype ActionMenuItemBaseProps = {\n handler?: (newValue: string) => void\n type?: 'none' \| 'single' \| 'link'\n disabled?: boolean\n size?: ActionMenuSizes\n leadingVisual?: React.ReactElement \| React.ReactNode \| Icon\n} & PropsWithChildren<React.HTMLProps<HTMLLIElement>>\n\ntype ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {\n as: 'a'\n} & Omit<React.HTMLProps<HTMLAnchorElement>, keyof ActionMenuItemBaseProps \| 'as'>\n\n// Type for when 'as' is not set or is anything other than 'a'\ntype ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {\n as?: string\n value?: string\n selected?: boolean\n} & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps \| 'as'>\n\nconst roleTypeMap = {\n none: 'menuitem',\n single: 'menuitemradio',\n link: 'menuitem',\n}\n\nconst ActionMenuItem = ({\n as,\n children,\n className,\n disabled,\n handler,\n selected,\n type,\n value,\n onClick,\n onKeyDown,\n leadingVisual: LeadingVisual,\n ...props\n}: ActionMenuItemAnchorProps \| ActionMenuItemDefaultProps) => {\n const {size} = useActionMenuContext()\n\n const handleClick = useCallback(\n (e: React.MouseEvent<HTMLLIElement>) => {\n onClick?.(e)\n\n if (!disabled) {\n handler?.(String(value))\n }\n },\n [handler, value, disabled, onClick],\n )\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLLIElement>) => {\n onKeyDown?.(e)\n\n if (!disabled && e.key === 'Enter') {\n handler?.(String(value))\n }\n },\n [handler, value, disabled, onKeyDown],\n )\n\n const liProps = useMemo<React.HTMLProps<HTMLLIElement> & {'data-value': unknown}>(\n () => ({\n className: clsx(\n styles.ActionMenu__item,\n type === 'single' && styles[`ActionMenu__item--selection-type-${type}`],\n size && styles[`ActionMenu__item--${size}`],\n className,\n ),\n role: roleTypeMap[type \|\| 'single'],\n 'aria-disabled': disabled,\n tabIndex: -1,\n 'data-value': value,\n ...props,\n }),\n [props, type, size, className, disabled, value],\n )\n\n const contents = useMemo(\n () => (\n <>\n {React.isValidElement<{width?: number; height?: number}>(LeadingVisual)\n ? React.cloneElement(LeadingVisual, {\n width: LeadingVisual.props.width \|\| 20,\n height: LeadingVisual.props.width \|\| 20,\n })\n : null}\n {type === 'single' && (\n <span className={styles['ActionMenu__item-leadingVisual']}>\n {selected && (\n <CheckIcon\n className={clsx(styles['ActionMenu__item-icon'], disabled && styles['ActionMenu__item-icon--disabled'])}\n size={16}\n />\n )}\n </span>\n )}\n\n <span className={styles['ActionMenu__item-text']}>\n <Text\n variant={disabled ? 'muted' : 'default'}\n size={size === 'medium' ? '200' : '100'}\n className={clsx(disabled && styles['ActionMenu__item-content--disabled'])}\n >\n {children}\n </Text>\n </span>\n </>\n ),\n [LeadingVisual, children, selected, disabled, size, type],\n )\n\n if (as === 'a') {\n return (\n <li\n // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n role=\"menuitem\"\n {...liProps}\n // Intentionally not calling handle[Click/KeyDown] here so as to not call the handler\n onClick={onClick}\n onKeyDown={onKeyDown}\n >\n <a\n className={clsx(styles['ActionMenu__item-anchor'], disabled && styles['ActionMenu__item--disabled'])}\n href={props.href}\n >\n {contents}\n </a>\n </li>\n )\n }\n\n return (\n // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n <li\n // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n role=\"menuitem\"\n {...liProps}\n aria-checked={type === 'none' ? undefined : selected ? 'true' : 'false'}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {contents}\n </li>\n )\n}\n\ntype ActionMenuOverlayProps = PropsWithChildren<\n BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>\n> & {\n 'aria-label': string\n id?: string\n 'data-testid'?: string\n menuOpen?: boolean\n style?: React.CSSProperties\n}\n\nconst ActionMenuOverlay = forwardRef<HTMLUListElement, ActionMenuOverlayProps>(\n ({children, className, 'data-testid': testId, menuOpen, ...rest}, ref) => {\n const {colorMode: defaultColorMode} = useTheme()\n\n const colorMode = className?.includes('ActionMenu__menu--split') ? 'light' : defaultColorMode\n\n return (\n <ThemeProvider colorMode={colorMode}>\n <ul ref={ref} className={clsx(className)} role=\"menu\" data-testid={testId \|\| testIds.list} {...rest}>\n {children}\n </ul>\n </ThemeProvider>\n )\n },\n)\n\n/\n Use ActionMenu to display a list of actions or selections that expand through a trigger button.\n * @see https://primer.style/brand/components/ActionMenu\n */\nexport const ActionMenu = Object.assign(_ActionMenuRoot, {\n Button: ActionMenuButton,\n Item: ActionMenuItem,\n Overlay: ActionMenuOverlay,\n testIds,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"ActionMenu.js","names":[],"sources":["../../src/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, {\n Children,\n isValidElement,\n cloneElement,\n useRef,\n useCallback,\n useState,\n useEffect,\n PropsWithChildren,\n forwardRef,\n memo,\n ReactElement,\n useMemo,\n} from 'react'\nimport {Button, ButtonProps} from '../Button'\nimport {Text} from '../Text'\nimport {ThemeProvider, useTheme} from '../ThemeProvider'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\n\nimport {clsx} from 'clsx'\nimport {CheckIcon, ChevronDownIcon, type Icon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\n\nimport {FocusKeys, type PositionSettings, focusZone} from '@primer/behaviors'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './ActionMenu.module.css'\n\nconst testIds = {\n root: 'ActionMenu',\n get button() {\n return `${this.root}-button`\n },\n get overlay() {\n return `${this.root}-overlay`\n },\n get list() {\n return `${this.root}-list`\n },\n get item() {\n return `${this.root}-list-item`\n },\n}\n\n// primer behaviors doesn't export these values, recreating manually\n// https://github.com/primer/behaviors/blob/main/src/anchored-position.ts#L5\nexport const actionMenuOverlaySides = [\n 'inside-top',\n 'inside-bottom',\n 'inside-left',\n 'inside-right',\n 'inside-center',\n 'outside-top',\n 'outside-bottom',\n 'outside-left',\n 'outside-right',\n] as PositionSettings['side'][]\n\nexport const ActionMenuSizes = ['small', 'medium'] as const\n\nexport const ActionMenuButtonModes = ['default', 'split-button'] as const\nexport type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number]\n\nexport type ActionMenuSizes = (typeof ActionMenuSizes)[number]\n\nexport type ActionMenuProps = {\n /\n The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay\n /\n children:\n \| ReactElement<ActionMenuButtonProps>\n \| ReactElement<ActionMenuOverlayProps>\n \| Array<ReactElement<ActionMenuButtonProps> \| ReactElement<ActionMenuOverlayProps>>\n /\n Determines whether the ActionMenu is disabled\n /\n disabled?: boolean\n /\n Determines whether the ActionMenu is open by default\n /\n open?: boolean\n /\n Callback that is called when an item is selected.\n * The value of the selected item is passed as an argument.\n /\n onSelect?: (newValue: string) => void\n /\n The selection variant of the ActionMenu.\n * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.\n * - `none`: No items can be selected. Menu items as a menuitem.\n /\n selectionVariant?: 'single' \| 'none'\n /\n Test id for the ActionMenu\n /\n 'data-testid'?: string\n /\n Horizontal alignment of the menu relative to the bottom of the button\n /\n menuAlignment?: 'start' \| 'end'\n /\n Size configuratin of the ActionMenu\n /\n size?: ActionMenuSizes\n /\n * Side the menu overlay appears\n /\n menuSide?: PositionSettings['side']\n /\n Alternative behavior for the button and menu items\n * - `default`: The button and menu items behave as a standard button and menu item.\n * - `split-button`: The button behaves as a split button, and the menu items behave as links.\n /\n mode?: ActionMenuButtonModes\n} & BaseProps<HTMLDivElement>\n\ntype ActionMenuContextType = {\n size?: ActionMenuSizes\n setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes \| undefined>>\n onMenuToggle?: () => void\n}\n\nconst ActionMenuContext = React.createContext<ActionMenuContextType>({})\n\nexport const useActionMenuContext = (): ActionMenuContextType => {\n return React.useContext(ActionMenuContext)\n}\n\ntype ActionMenuProviderProps = ActionMenuProps & Pick<ActionMenuContextType, 'onMenuToggle'>\n\nexport const ActionMenuProvider: React.FC<ActionMenuProviderProps> = ({size, children, onMenuToggle}) => {\n const [currentSize, setSize] = useState(size)\n\n return (\n <ActionMenuContext.Provider value={{size: currentSize, setSize, onMenuToggle}}>\n {children}\n </ActionMenuContext.Provider>\n )\n}\n\nconst _ActionMenuRoot = memo(\n ({\n id,\n children,\n 'data-testid': testId,\n disabled,\n open = false,\n selectionVariant = 'none',\n menuAlignment = 'end',\n size = 'medium',\n menuSide,\n onSelect,\n mode = 'default',\n }: ActionMenuProps) => {\n const [showMenu, setShowMenu] = useState(open)\n const floatingElementRef = useRef<HTMLUListElement>(null)\n const anchorElementRef = useRef<HTMLButtonElement>(null)\n const instanceId = useId(id)\n\n useOnClickOutside(floatingElementRef, () => setShowMenu(false), anchorElementRef)\n\n const closeMenuCallback = useCallback(() => {\n setShowMenu(false)\n }, [])\n\n useKeyboardEscape(closeMenuCallback)\n\n const toggleMenu = useCallback(() => {\n setShowMenu(!showMenu)\n }, [showMenu])\n\n const handleOnSelect = useCallback(\n (newValue: string) => {\n if (onSelect) onSelect(newValue)\n toggleMenu()\n },\n [onSelect, toggleMenu],\n )\n\n const handleItemSelection = useCallback(\n (newValue: string) => {\n handleOnSelect(newValue)\n toggleMenu()\n anchorElementRef.current?.focus()\n },\n [handleOnSelect, toggleMenu, anchorElementRef],\n )\n\n useEffect(() => {\n if (showMenu && floatingElementRef.current) {\n const floatingElement = floatingElementRef.current\n const isSplitLayout = mode === 'split-button'\n const splitLayoutFilter = isSplitLayout ? element => element.tagName === 'A' : undefined\n\n focusZone(floatingElementRef.current, {\n bindKeys: FocusKeys.ArrowVertical,\n focusableElementFilter: splitLayoutFilter,\n focusInStrategy: isSplitLayout ? 'first' : undefined,\n })\n\n // enter selects item\n floatingElement.addEventListener('keydown', event => {\n if (event.key === 'Enter') {\n const target = event.target as HTMLElement\n\n // Get the proper element containing the data-value\n const targetElement = target.tagName === 'A' ? target.closest('li') : target\n\n if (!targetElement \|\| targetElement.getAttribute('aria-disabled') === 'true') return\n\n const value = targetElement.getAttribute('data-value')\n if (value) {\n handleOnSelect(value)\n setShowMenu(false)\n setTimeout(() => {\n anchorElementRef.current?.focus()\n }, 10)\n }\n }\n })\n\n const targetSelector = isSplitLayout ? 'a' : 'li'\n\n // focusses first item\n const firstItem = floatingElementRef.current.querySelector(targetSelector)\n if (firstItem) {\n setTimeout(() => {\n firstItem.focus()\n }, 10)\n }\n\n const lastItem =\n floatingElement.querySelectorAll(targetSelector)[floatingElement.querySelectorAll(targetSelector).length - 1]\n lastItem.addEventListener('keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent\n if (keyboardEvent.key === 'ArrowDown') {\n keyboardEvent.preventDefault()\n firstItem?.focus()\n }\n })\n\n firstItem?.addEventListener('keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent\n if (keyboardEvent.key === 'ArrowUp') {\n keyboardEvent.preventDefault()\n lastItem.focus()\n }\n })\n\n //on escape refocus\n floatingElement.addEventListener('keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent\n if (keyboardEvent.key === 'Escape') {\n anchorElementRef.current?.focus()\n }\n })\n }\n }, [showMenu, floatingElementRef, mode, handleItemSelection, toggleMenu, handleOnSelect])\n\n // Calculate the position of the menu\n const {position} = useAnchoredPosition(\n {\n floatingElementRef,\n anchorElementRef,\n align: menuAlignment,\n allowOutOfBounds: true,\n side: menuSide,\n },\n [showMenu],\n )\n\n const {Button: SelectButton, Overlay: SelectOverlay} = Children.toArray(children).reduce<{\n Button?: ReactElement<ActionMenuButtonProps>\n Overlay?: ReactElement<ActionMenuOverlayProps>\n }>((acc, child) => {\n if (isValidElement<ActionMenuButtonProps>(child) && child.type === ActionMenuButton) {\n acc.Button = cloneElement(child, {\n ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n className: clsx(child.props.className, styles[`ActionMenu__button--${mode}`], showMenu),\n menuOpen: showMenu,\n disabled,\n id: `${instanceId}-button`,\n size,\n _mode: mode,\n })\n } else if (isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay) {\n acc.Overlay = cloneElement(child, {\n ref: floatingElementRef as React.RefObject<HTMLUListElement>,\n className: clsx(\n styles.ActionMenu__menu,\n position && styles['ActionMenu__menu--visible'],\n position && styles[`ActionMenu__menu--pos-${position.anchorSide}`],\n styles[`ActionMenu__menu--${size}`],\n mode === 'split-button' && 'ActionMenu__menu--split',\n ),\n style: {\n top: `${position?.top ?? 0}px`,\n left: `${position?.left ?? 0}px`,\n },\n id: `${instanceId}-menu`,\n children: Children.map(child.props.children, item => {\n if (isValidElement<ActionMenuItemBaseProps>(item)) {\n return cloneElement(item, {\n handler: handleItemSelection,\n type: mode === 'split-button' ? 'link' : selectionVariant,\n })\n }\n return item\n }),\n })\n }\n return acc\n }, {})\n\n return (\n <ActionMenuProvider size={size} onMenuToggle={toggleMenu}>\n <div\n id={instanceId}\n className={clsx(styles.ActionMenu, disabled && styles['ActionMenu--disabled'])}\n data-testid={testId \|\| testIds.root}\n >\n {SelectButton}\n {showMenu ? SelectOverlay : null}\n </div>\n </ActionMenuProvider>\n )\n },\n)\n\ntype ActionMenuButtonProps = PropsWithChildren<\n BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' \| 'disabled' \| 'onClick'>\n> & {\n as?: ButtonProps<'a'>['as']\n href?: ButtonProps<'a'>['href']\n menuOpen?: boolean\n 'data-testid'?: string\n size?: ActionMenuSizes\n _mode?: ActionMenuButtonModes\n variant?: ButtonProps<'a'>['variant']\n leadingVisual?: ButtonProps<'a'>['leadingVisual']\n}\n\nconst ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(\n (\n {\n as,\n href,\n id,\n children,\n className,\n 'data-testid': testId,\n disabled,\n menuOpen,\n size,\n _mode = 'default',\n onClick,\n leadingVisual,\n variant,\n ...props\n },\n ref,\n ) => {\n const {onMenuToggle} = useActionMenuContext()\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(event)\n\n if (!event.defaultPrevented) {\n onMenuToggle?.()\n }\n },\n [onClick, onMenuToggle],\n )\n\n if (_mode === 'split-button') {\n const splitButtonVariant = variant ?? 'primary'\n\n return (\n <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n <Button\n as={as}\n href={href}\n className={clsx(\n styles['ActionMenu__innerButton--split-button'],\n styles[`ActionMenu__innerButton--${splitButtonVariant}`],\n styles[`ActionMenu__innerButton--${size}`],\n disabled && styles['ActionMenu__innerButton--disabled'],\n )}\n variant={splitButtonVariant}\n aria-disabled={disabled}\n data-testid={testId \|\| testIds.button}\n size={size}\n leadingVisual={leadingVisual}\n onClick={onClick}\n {...props}\n >\n <span className={styles['ActionMenu__button-text']}>{children}</span>\n </Button>\n <Button\n ref={ref}\n id={id}\n as=\"button\"\n className={styles['ActionMenu__innerButton--split-button']}\n variant={splitButtonVariant}\n aria-haspopup=\"true\"\n aria-label=\"Menu\"\n size={size}\n aria-expanded={menuOpen ? 'true' : 'false'}\n onClick={onMenuToggle}\n disabled={disabled}\n >\n <ChevronDownIcon className={styles['ActionMenu__inner-button-dropdown-icon']} />\n </Button>\n </div>\n )\n }\n\n return (\n <Button\n ref={ref}\n id={id}\n className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}\n aria-haspopup=\"true\"\n aria-expanded={menuOpen ? 'true' : 'false'}\n disabled={disabled}\n data-testid={testId \|\| testIds.button}\n size={size}\n variant={variant}\n leadingVisual={leadingVisual}\n trailingVisual={<ChevronDownIcon />}\n onClick={handleClick}\n {...props}\n >\n <span className={styles['ActionMenu__button-text']}>{children}</span>\n </Button>\n )\n },\n)\n\ntype ActionMenuItemBaseProps = {\n handler?: (newValue: string) => void\n type?: 'none' \| 'single' \| 'link'\n disabled?: boolean\n size?: ActionMenuSizes\n leadingVisual?: React.ReactElement \| React.ReactNode \| Icon\n} & PropsWithChildren<React.HTMLProps<HTMLLIElement>>\n\ntype ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {\n as: 'a'\n} & Omit<React.HTMLProps<HTMLAnchorElement>, keyof ActionMenuItemBaseProps \| 'as'>\n\n// Type for when 'as' is not set or is anything other than 'a'\ntype ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {\n as?: string\n value?: string\n selected?: boolean\n} & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps \| 'as'>\n\nconst roleTypeMap = {\n none: 'menuitem',\n single: 'menuitemradio',\n link: 'menuitem',\n}\n\nconst ActionMenuItem = ({\n as,\n children,\n className,\n disabled,\n handler,\n selected,\n type,\n value,\n onClick,\n onKeyDown,\n leadingVisual: LeadingVisual,\n ...props\n}: ActionMenuItemAnchorProps \| ActionMenuItemDefaultProps) => {\n const {size} = useActionMenuContext()\n\n const handleClick = useCallback(\n (e: React.MouseEvent<HTMLLIElement>) => {\n onClick?.(e)\n\n if (!disabled) {\n handler?.(String(value))\n }\n },\n [handler, value, disabled, onClick],\n )\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLLIElement>) => {\n onKeyDown?.(e)\n\n if (!disabled && e.key === 'Enter') {\n handler?.(String(value))\n }\n },\n [handler, value, disabled, onKeyDown],\n )\n\n const liProps = useMemo<React.HTMLProps<HTMLLIElement> & {'data-value': unknown}>(\n () => ({\n className: clsx(\n styles.ActionMenu__item,\n type === 'single' && styles[`ActionMenu__item--selection-type-${type}`],\n size && styles[`ActionMenu__item--${size}`],\n className,\n ),\n role: roleTypeMap[type \|\| 'single'],\n 'aria-disabled': disabled,\n tabIndex: -1,\n 'data-value': value,\n ...props,\n }),\n [props, type, size, className, disabled, value],\n )\n\n const contents = useMemo(\n () => (\n <>\n {React.isValidElement<{width?: number; height?: number}>(LeadingVisual)\n ? React.cloneElement(LeadingVisual, {\n width: LeadingVisual.props.width \|\| 20,\n height: LeadingVisual.props.width \|\| 20,\n })\n : null}\n {type === 'single' && (\n <span className={styles['ActionMenu__item-leadingVisual']}>\n {selected && (\n <CheckIcon\n className={clsx(styles['ActionMenu__item-icon'], disabled && styles['ActionMenu__item-icon--disabled'])}\n size={16}\n />\n )}\n </span>\n )}\n\n <span className={styles['ActionMenu__item-text']}>\n <Text\n variant={disabled ? 'muted' : 'default'}\n size={size === 'medium' ? '200' : '100'}\n className={clsx(disabled && styles['ActionMenu__item-content--disabled'])}\n >\n {children}\n </Text>\n </span>\n </>\n ),\n [LeadingVisual, children, selected, disabled, size, type],\n )\n\n if (as === 'a') {\n return (\n <li\n // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n role=\"menuitem\"\n {...liProps}\n // Intentionally not calling handle[Click/KeyDown] here so as to not call the handler\n onClick={onClick}\n onKeyDown={onKeyDown}\n >\n <a\n className={clsx(styles['ActionMenu__item-anchor'], disabled && styles['ActionMenu__item--disabled'])}\n href={props.href}\n >\n {contents}\n </a>\n </li>\n )\n }\n\n return (\n // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n <li\n // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n role=\"menuitem\"\n {...liProps}\n aria-checked={type === 'none' ? undefined : selected ? 'true' : 'false'}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {contents}\n </li>\n )\n}\n\ntype ActionMenuOverlayProps = PropsWithChildren<\n BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>\n> & {\n 'aria-label': string\n id?: string\n 'data-testid'?: string\n menuOpen?: boolean\n style?: React.CSSProperties\n}\n\nconst ActionMenuOverlay = forwardRef<HTMLUListElement, ActionMenuOverlayProps>(\n ({children, className, 'data-testid': testId, menuOpen, ...rest}, ref) => {\n const {colorMode: defaultColorMode} = useTheme()\n\n const colorMode = className?.includes('ActionMenu__menu--split') ? 'light' : defaultColorMode\n\n return (\n <ThemeProvider colorMode={colorMode}>\n <ul ref={ref} className={clsx(className)} role=\"menu\" data-testid={testId \|\| testIds.list} {...rest}>\n {children}\n </ul>\n </ThemeProvider>\n )\n },\n)\n\n/\n Use ActionMenu to display a list of actions or selections that expand through a trigger button.\n * @see https://primer.style/brand/components/ActionMenu\n */\nexport const ActionMenu = Object.assign(_ActionMenuRoot, {\n Button: ActionMenuButton,\n Item: ActionMenuItem,\n Overlay: ActionMenuOverlay,\n testIds,\n})\n"],"mappings":"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"}

package/esm/ActionMenu/ActionMenu.module.js CHANGED Viewed

@@ -1,7 +1,8 @@
-import './ActionMenu.module-BAeHTqHw.css';var e = {
-	ActionMenu: "Primer_Brand__ActionMenu-module__ActionMenu___xLxGU",
+import './ActionMenu.module-BAeHTqHw.css';//#region src/ActionMenu/ActionMenu.module.css
+var e = "Primer_Brand__ActionMenu-module__ActionMenu___xLxGU", t = "Primer_Brand__ActionMenu-module__ActionMenu__button___vFLAF", n = "Primer_Brand__ActionMenu-module__ActionMenu__menu___BEldF", r = "Primer_Brand__ActionMenu-module__ActionMenu__item___2FZw4", i = {
+	ActionMenu: e,
 	"ActionMenu--disabled": "Primer_Brand__ActionMenu-module__ActionMenu--disabled___UsizV",
-	ActionMenu__button: "Primer_Brand__ActionMenu-module__ActionMenu__button___vFLAF",
+	ActionMenu__button: t,
 	"ActionMenu__button--default": "Primer_Brand__ActionMenu-module__ActionMenu__button--default___heDoV",
 	"ActionMenu__button--small": "Primer_Brand__ActionMenu-module__ActionMenu__button--small___UAUPB",
 	"ActionMenu__button--medium": "Primer_Brand__ActionMenu-module__ActionMenu__button--medium___n5ovs",
@@ -11,7 +12,7 @@ import './ActionMenu.module-BAeHTqHw.css';var e = {
 	"ActionMenu__innerButton--medium": "Primer_Brand__ActionMenu-module__ActionMenu__innerButton--medium___C2bJi",
 	"ActionMenu__inner-button-dropdown-icon": "Primer_Brand__ActionMenu-module__ActionMenu__inner-button-dropdown-icon___IGvTk",
 	"ActionMenu__innerButton--disabled": "Primer_Brand__ActionMenu-module__ActionMenu__innerButton--disabled___WrkOb",
-	ActionMenu__menu: "Primer_Brand__ActionMenu-module__ActionMenu__menu___BEldF",
+	ActionMenu__menu: n,
 	"ActionMenu__menu--small": "Primer_Brand__ActionMenu-module__ActionMenu__menu--small___xbb8m",
 	"ActionMenu__menu--medium": "Primer_Brand__ActionMenu-module__ActionMenu__menu--medium___3QqgD",
 	"ActionMenu__menu--visible": "Primer_Brand__ActionMenu-module__ActionMenu__menu--visible___QzhaX",
@@ -19,7 +20,7 @@ import './ActionMenu.module-BAeHTqHw.css';var e = {
 	"overlay-appear-outside-bottom": "Primer_Brand__ActionMenu-module__overlay-appear-outside-bottom___egiij",
 	"ActionMenu__menu--pos-outside-top": "Primer_Brand__ActionMenu-module__ActionMenu__menu--pos-outside-top___4TZek",
 	"overlay-appear-outside-top": "Primer_Brand__ActionMenu-module__overlay-appear-outside-top____Ko4E",
-	ActionMenu__item: "Primer_Brand__ActionMenu-module__ActionMenu__item___2FZw4",
+	ActionMenu__item: r,
 	"ActionMenu__item-anchor": "Primer_Brand__ActionMenu-module__ActionMenu__item-anchor___dX7CI",
 	"ActionMenu__item-anchor--disabled": "Primer_Brand__ActionMenu-module__ActionMenu__item-anchor--disabled___Lx1Az",
 	"ActionMenu__item--medium": "Primer_Brand__ActionMenu-module__ActionMenu__item--medium___YWN8M",
@@ -32,6 +33,6 @@ import './ActionMenu.module-BAeHTqHw.css';var e = {
 	"ActionMenu__item-icon--disabled": "Primer_Brand__ActionMenu-module__ActionMenu__item-icon--disabled___BjIIo"
 };
 //#endregion
-export { e as default };
+export { e as ActionMenu, t as ActionMenu__button, r as ActionMenu__item, n as ActionMenu__menu, i as default };
 //# sourceMappingURL=ActionMenu.module.js.map

package/esm/AnchorNav/AnchorNav.d.ts CHANGED Viewed

@@ -19,7 +19,7 @@ export type AnchorNavProps = BaseProps<HTMLElement> & {
      */
     hideUntilSticky?: boolean;
 } & React.ComponentPropsWithoutRef<'nav'>;
-declare function AnchorNavBase({ children, enableDefaultBgColor, hideUntilSticky, ...rest }: AnchorNavProps): import("react/jsx-runtime").JSX.Element;
+declare function AnchorNavBase({ children, enableDefaultBgColor, hideUntilSticky, ...rest }: AnchorNavProps): React.JSX.Element;
 type AnchorNavLinkIntersectionOptions = {
     /**
      * The area of the element that should trigger the next linked section to be highlighted.
@@ -45,15 +45,15 @@ type AnchorNavLinkProps = BaseProps<HTMLAnchorElement> & {
     prefersReducedMotion?: boolean;
     updateCurrentActiveNav?: (id: string | null) => void;
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
-declare function NavLinkBase({ alignment, children, href, isActive, toggleMenuCallback, prefersReducedMotion, intersectionOptions, updateCurrentActiveNav, ...rest }: AnchorNavLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function NavLinkBase({ alignment, children, href, isActive, toggleMenuCallback, prefersReducedMotion, intersectionOptions, updateCurrentActiveNav, ...rest }: AnchorNavLinkProps): React.JSX.Element;
 type AnchorNavActionProps = {
     /**
      * Required path or location for the action button to link to.
      */
     href: string;
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & ButtonBaseProps;
-declare function ActionBase({ children, href, variant, size, ...rest }: AnchorNavActionProps): import("react/jsx-runtime").JSX.Element;
-declare function SecondaryActionBase({ children, href, variant, size, ...rest }: AnchorNavActionProps): import("react/jsx-runtime").JSX.Element;
+declare function ActionBase({ children, href, variant, size, ...rest }: AnchorNavActionProps): React.JSX.Element;
+declare function SecondaryActionBase({ children, href, variant, size, ...rest }: AnchorNavActionProps): React.JSX.Element;
 /**
  * AnchorNav allows users to navigate to different sections of a page.
  * @see https://primer.style/brand/components/AnchorNav

package/esm/AnchorNav/AnchorNav.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnchorNav.d.ts","sourceRoot":"","sources":["../../src/AnchorNav/AnchorNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0D,MAAM,OAAO,CAAA;AAI9E,OAAO,EAAS,eAAe,EAAO,MAAM,KAAK,CAAA;AAKjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,8GAA8G,CAAA;AAwBrH,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACpD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC3B;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAEzC,iBAAS,aAAa,CAAC,EAAC,QAAQ,EAAE,oBAA4B,EAAE,eAAuB,EAAE,GAAG,IAAI,EAAC,EAAE,cAAc,~~2CAiOhH~~;AAED,KAAK,gCAAgC,GAAG;IACtC;;OAEG;IACH,UAAU,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC/B,CAAA;AAED,KAAK,kBAAkB,GAAG,SAAS,CAAC,iBAAiB,CAAC,GAAG;IACvD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,mBAAmB,CAAC,EAAE,gCAAgC,CAAA;IACtD,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,sBAAsB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CACrD,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAA;AAE/D,iBAAS,WAAW,CAAC,EACnB,SAAmB,EACnB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,kBAAkB,EAClB,oBAAoB,EACpB,mBAA4C,EAC5C,sBAAsB,EACtB,GAAG,IAAI,EACR,EAAE,kBAAkB,~~2CAuEpB~~;AAED,KAAK,oBAAoB,GAAG;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAC7D,eAAe,CAAA;AAEjB,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAqB,EAAE,IAAc,EAAE,GAAG,IAAI,EAAC,EAAE,oBAAoB,~~2CAczG~~;AAED,iBAAS,mBAAmB,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAqB,EAAE,IAAc,EAAE,GAAG,IAAI,EAAC,EAAE,oBAAoB,~~2CAclH~~;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;CAKpB,CAAA"}
1	+ {"version":3,"file":"AnchorNav.d.ts","sourceRoot":"","sources":["../../src/AnchorNav/AnchorNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0D,MAAM,OAAO,CAAA;AAI9E,OAAO,EAAS,eAAe,EAAO,MAAM,KAAK,CAAA;AAKjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,8GAA8G,CAAA;AAwBrH,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACpD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC3B;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAEzC,iBAAS,aAAa,CAAC,EAAC,QAAQ,EAAE,oBAA4B,EAAE,eAAuB,EAAE,GAAG,IAAI,EAAC,EAAE,cAAc,qBAiOhH;AAED,KAAK,gCAAgC,GAAG;IACtC;;OAEG;IACH,UAAU,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC/B,CAAA;AAED,KAAK,kBAAkB,GAAG,SAAS,CAAC,iBAAiB,CAAC,GAAG;IACvD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,mBAAmB,CAAC,EAAE,gCAAgC,CAAA;IACtD,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,sBAAsB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CACrD,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAA;AAE/D,iBAAS,WAAW,CAAC,EACnB,SAAmB,EACnB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,kBAAkB,EAClB,oBAAoB,EACpB,mBAA4C,EAC5C,sBAAsB,EACtB,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAuEpB;AAED,KAAK,oBAAoB,GAAG;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAC7D,eAAe,CAAA;AAEjB,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAqB,EAAE,IAAc,EAAE,GAAG,IAAI,EAAC,EAAE,oBAAoB,qBAczG;AAED,iBAAS,mBAAmB,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAqB,EAAE,IAAc,EAAE,GAAG,IAAI,EAAC,EAAE,oBAAoB,qBAclH;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;CAKpB,CAAA"}

package/esm/AnchorNav/AnchorNav.js CHANGED Viewed

@@ -1,9 +1,10 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../hooks/useId.js";
 import { Text as n } from "../Text/Text.js";
 import { Button as r } from "../Button/Button.js";
 import { useKeyboardEscape as i } from "../hooks/useKeyboardEscape.js";
-import { ChevronDownIcon as a, ChevronUpIcon as o } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { ChevronDownIcon as a } from "../node_modules/@primer/octicons-react/dist/icons/ChevronDownIcon.js";
+import { ChevronUpIcon as o } from "../node_modules/@primer/octicons-react/dist/icons/ChevronUpIcon.js";
 import { useWindowSize as s } from "../hooks/useWindowSize.js";
 import c from "./AnchorNav.module.js";
 import { useExpandedMenu as l } from "./useExpandedMenu.js";
@@ -43,10 +44,14 @@ function y({ children: r, enableDefaultBgColor: y = !1, hideUntilSticky: C = !1,
 			L(e);
 		}
 	}, [H]), f(() => {
-		ee(window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+		let e = window.matchMedia("(prefers-reduced-motion: reduce)");
+		ee(e.matches);
 	}, []), f(() => {
 		let e = () => {
-			M && F(window.pageYOffset > M);
+			if (M) {
+				let e = window.pageYOffset > M;
+				F(e);
+			}
 		};
 		return window.addEventListener("scroll", e), () => {
 			window.removeEventListener("scroll", e);

package/esm/AnchorNav/AnchorNav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnchorNav.js","names":[],"sources":["../../src/AnchorNav/AnchorNav.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {ChevronDownIcon, ChevronUpIcon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\n\nimport {Button, ButtonBaseProps, Text} from '../'\nimport {useWindowSize} from '../hooks/useWindowSize'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useExpandedMenu} from './useExpandedMenu'\n\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './AnchorNav.module.css'\n\nconst testIds = {\n root: 'AnchorNav',\n get menuButton() {\n return `${this.root}-menu-button`\n },\n get menuLinks() {\n return `${this.root}-menu-links`\n },\n get action() {\n return `${this.root}-action`\n },\n get secondaryAction() {\n return `${this.root}-secondary-action`\n },\n get navSpacer() {\n return `${this.root}-nav-spacer`\n },\n}\n\nexport type AnchorNavProps = BaseProps<HTMLElement> & {\n /\n Accepts all of `AnchorNav.Item` and `AnchorNav.Action` child components.\n /\n children: React.ReactNode[]\n /\n Enable the idle state background color, which is transparent by default.\n /\n enableDefaultBgColor?: boolean\n /\n When true, the anchor nav will hide until it is sticky.\n /\n hideUntilSticky?: boolean\n} & React.ComponentPropsWithoutRef<'nav'>\n\nfunction AnchorNavBase({children, enableDefaultBgColor = false, hideUntilSticky = false, ...rest}: AnchorNavProps) {\n const [menuOpen, setMenuOpen] = useState(false)\n const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)\n const [currentActiveNavItem, setCurrentActiveNavItem] = useState<string \| null>()\n const [intersectionEntry, setIntersectionEntry] = useState<IntersectionObserverEntry>()\n const [initialYOffset, setInitialYOffset] = useState<undefined \| number>()\n const [navShouldFix, setNavShouldFix] = useState<boolean>(false)\n const [navHeight, setNavHeight] = useState<number>(0)\n\n const wrapperRef = useRef<HTMLDivElement \| null>(null)\n const rootRef = useRef<HTMLElement \| null>(null)\n const linkContainerRef = useRef<HTMLDivElement \| null>(null)\n const innerContainerRef = useRef<HTMLDivElement \| null>(null)\n\n const {isLarge} = useWindowSize()\n const idForLinkContainer = useId()\n\n const closeMenuCallback = useCallback(() => setMenuOpen(false), [setMenuOpen])\n const toggleMenuCallback = useCallback(() => setMenuOpen(!menuOpen), [menuOpen])\n\n const ValidChildren = useMemo(\n () =>\n React.Children.toArray(children).filter(\n (child: React.ReactNode): boolean => React.isValidElement(child) && typeof child.type !== 'string',\n ),\n [children],\n )\n\n useEffect(() => {\n if (initialYOffset === undefined && intersectionEntry) {\n setInitialYOffset(intersectionEntry.boundingClientRect.y + window.scrollY)\n }\n }, [initialYOffset, intersectionEntry])\n\n const handleIntersectionUpdate = ([nextEntry]: IntersectionObserverEntry[]): void => {\n setIntersectionEntry(nextEntry)\n }\n\n useKeyboardEscape(closeMenuCallback)\n useExpandedMenu(menuOpen, linkContainerRef, innerContainerRef, !isLarge, closeMenuCallback)\n\n useEffect(() => {\n if (wrapperRef.current) {\n const height = wrapperRef.current.offsetHeight\n setNavHeight(height)\n }\n }, [isLarge])\n\n useEffect(() => {\n const queryResult = window.matchMedia('(prefers-reduced-motion: reduce)')\n\n setPrefersReducedMotion(queryResult.matches)\n }, [])\n\n useEffect(() => {\n const handler = () => {\n if (initialYOffset) {\n const isPastInitialYOffset = window.pageYOffset > initialYOffset\n setNavShouldFix(isPastInitialYOffset)\n }\n }\n // eslint-disable-next-line github/prefer-observers\n window.addEventListener('scroll', handler)\n return () => {\n window.removeEventListener('scroll', handler)\n }\n }, [initialYOffset])\n\n useEffect(() => {\n const node = hideUntilSticky ? wrapperRef.current : rootRef.current\n\n const supportsIntersectionObserver = !!window.IntersectionObserver\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!supportsIntersectionObserver \|\| !node) return\n\n const topOfWindow = '0px 0px -100%'\n const observerParams = {threshold: 0, root: null, rootMargin: topOfWindow}\n const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams)\n\n observer.observe(node)\n\n return () => observer.disconnect()\n }, [hideUntilSticky])\n\n const handleMenuToggle = useCallback(\n event => {\n event?.preventDefault()\n toggleMenuCallback()\n },\n [toggleMenuCallback],\n )\n\n const handleUpdateToCurrentActiveNavItem = useCallback(\n (id: string \| null) => {\n setCurrentActiveNavItem(id)\n },\n [setCurrentActiveNavItem],\n )\n\n const numLinks = ValidChildren.filter(child => React.isValidElement(child) && child.type === NavLinkBase).length\n const Links = ValidChildren.map((child, index) => {\n if (React.isValidElement<AnchorNavLinkProps>(child) && child.type === NavLinkBase) {\n const defaultProps: AnchorNavLinkProps = {\n href: child.props.href,\n toggleMenuCallback,\n prefersReducedMotion,\n updateCurrentActiveNav: handleUpdateToCurrentActiveNavItem,\n alignment: numLinks < 4 ? 'start' : 'center',\n }\n return React.cloneElement(child, {\n isActive: index === 0,\n ...defaultProps,\n })\n }\n\n return null\n })\n .filter(Boolean)\n .slice(0, 5)\n\n const Action = ValidChildren.reduce<React.ReactElement<AnchorNavActionProps>[]>((acc, child) => {\n if (React.isValidElement<AnchorNavActionProps>(child) && child.type === ActionBase) {\n acc.push(React.cloneElement(child))\n }\n return acc\n }, [])\n\n const SecondaryAction = ValidChildren.reduce<React.ReactElement<AnchorNavActionProps>[]>((acc, child) => {\n if (React.isValidElement<AnchorNavActionProps>(child) && child.type === SecondaryActionBase) {\n acc.push(React.cloneElement(child))\n }\n return acc\n }, [])\n\n const hasLargerSizeActions =\n Action.some(action => action.props.size && action.props.size !== 'small') \|\|\n SecondaryAction.some(action => action.props.size && action.props.size !== 'small')\n\n / On page load, the rootMargin positions and/or thresholds of the IntersectionObserver\n * may not be met depending on the position of the AnchorNav on the page.\n * The following useEffect ensures that the first link always marked as the active link, until\n * the observer kicks in. Without this, the active link is undefined.\n /\n useEffect(() => {\n if (!currentActiveNavItem && Links.length > 0) {\n setCurrentActiveNavItem(Links[0]?.props.children as string)\n }\n }, [currentActiveNavItem, Links])\n\n const hasTwoActions = Action.length > 0 && SecondaryAction.length > 0\n\n return (\n <div ref={wrapperRef}>\n <nav\n ref={rootRef}\n aria-label=\"Anchored navigation\"\n data-sticky={navShouldFix.toString()}\n className={clsx(\n styles.AnchorNav,\n hideUntilSticky && styles['AnchorNav--hide-until-sticky'],\n navShouldFix && styles['AnchorNav--stuck'],\n menuOpen && styles['AnchorNav--expanded'],\n enableDefaultBgColor && styles['AnchorNav--with-default-background-color'],\n )}\n {...rest}\n >\n <div\n ref={innerContainerRef}\n className={clsx(\n styles['AnchorNav-inner-container'],\n menuOpen && styles['AnchorNav-inner-container--expanded'],\n )}\n >\n <button\n onClick={handleMenuToggle}\n className={clsx(styles['AnchorNav-menu-button'])}\n aria-expanded={menuOpen}\n aria-controls={idForLinkContainer}\n data-testid={testIds.menuButton}\n >\n {menuOpen ? (\n <ChevronUpIcon size={16} className={styles['AnchorNav-menu-button-arrow']} fill=\"currentcolor\" />\n ) : (\n <ChevronDownIcon size={16} className={styles['AnchorNav-menu-button-arrow']} fill=\"currentcolor\" />\n )}\n <span className=\"visually-hidden\">Anchor navigation menu. Currently selected: </span>\n <Text as=\"span\" className={clsx(styles['AnchorNav-link-label'])}>\n {currentActiveNavItem}\n </Text>\n </button>\n {/Replace with unique ids and test ids /}\n <div\n id={idForLinkContainer}\n data-testid={testIds.menuLinks}\n className={styles['AnchorNav-link-container']}\n ref={linkContainerRef}\n >\n {Links}\n </div>\n <span\n data-forward-focus=\"true\"\n className={clsx(\n styles['AnchorNav__actionsContainer'],\n hasLargerSizeActions && styles['AnchorNav__actionsContainer--no-offset'],\n hasTwoActions && styles['AnchorNav__actionsContainer--multiple'],\n )}\n >\n {Action.length && SecondaryAction.length && React.isValidElement<AnchorNavActionProps>(Action[0])\n ? React.cloneElement(Action[0], {\n variant: 'primary',\n })\n : Action}\n {SecondaryAction}\n </span>\n </div>\n <span\n className={clsx(menuOpen && styles['AnchorNav-overlay--expanded'])}\n onClick={closeMenuCallback}\n aria-hidden\n />\n </nav>\n {navShouldFix && <div style={{height: navHeight}} aria-hidden=\"true\" data-testid={testIds.navSpacer} />}\n </div>\n )\n}\n\ntype AnchorNavLinkIntersectionOptions = {\n /*\n The area of the element that should trigger the next linked section to be highlighted.\n /\n rootMargin: 'start' \| 'middle'\n}\n\ntype AnchorNavLinkProps = BaseProps<HTMLAnchorElement> & {\n /\n Optional text alignment for the link. Defaults to 'start' if there are less than 4 links, otherwise 'center'.\n /\n alignment?: 'start' \| 'center'\n /\n Required path or location for the anchor to link to.\n /\n href: string\n /\n Optional boolean to indicate if the link is the current active link.\n * Typically doesn't need to be sset unless custom animation is being used.\n /\n isActive?: boolean // internal prop, not exposed in docs\n toggleMenuCallback?: () => void // internal prop, not exposed in docs\n intersectionOptions?: AnchorNavLinkIntersectionOptions // internal prop, not exposed in docs\n prefersReducedMotion?: boolean // internal prop, not exposed in docs\n updateCurrentActiveNav?: (id: string \| null) => void // internal prop, not exposed in docs\n} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nfunction NavLinkBase({\n alignment = 'start',\n children,\n href,\n isActive,\n toggleMenuCallback,\n prefersReducedMotion,\n intersectionOptions = {rootMargin: 'middle'},\n updateCurrentActiveNav,\n ...rest\n}: AnchorNavLinkProps) {\n const {isLarge} = useWindowSize()\n const [intersectionEntry, setIntersectionEntry] = useState<IntersectionObserverEntry>()\n\n const isAnchor = /^#/.test(href)\n const anchoredContentIsVisible = !!intersectionEntry?.isIntersecting\n\n const handleIntersectionUpdate = ([nextEntry]: IntersectionObserverEntry[]): void => {\n setIntersectionEntry(nextEntry)\n }\n\n useEffect(() => {\n const node = document.querySelector(isAnchor ? href : `#${href}`)\n\n const supportsIntersectionObserver = !!window.IntersectionObserver\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!supportsIntersectionObserver \|\| !node) return\n\n const rootMarginTop = '0px'\n const rootMarginCenter = '-50% 0% -50% 0%'\n\n const rootMargin = intersectionOptions.rootMargin === 'start' ? rootMarginTop : rootMarginCenter\n\n const observerParams = {threshold: intersectionOptions.rootMargin === 'start' ? 0.4 : 0, root: null, rootMargin}\n\n const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams)\n\n observer.observe(node)\n\n return () => observer.disconnect()\n }, [href, intersectionOptions.rootMargin, isAnchor])\n\n // updates root AnchorNav to notify of active section\n useEffect(() => {\n if (anchoredContentIsVisible && updateCurrentActiveNav && typeof children === 'string') {\n updateCurrentActiveNav(children)\n }\n }, [anchoredContentIsVisible, children, updateCurrentActiveNav])\n\n const handleClick = useCallback(() => {\n if (toggleMenuCallback && !isLarge) {\n toggleMenuCallback()\n }\n }, [isLarge, toggleMenuCallback])\n\n return (\n <a\n className={clsx(\n styles['AnchorNav-link'],\n styles[`AnchorNav-link--${alignment}`],\n anchoredContentIsVisible && styles['AnchorNav-link--is-active'],\n )}\n href={isAnchor ? href : `#${href}`}\n aria-current={anchoredContentIsVisible && 'true'}\n data-first={isActive}\n data-active={anchoredContentIsVisible ? 'true' : 'false'}\n onClick={handleClick}\n {...rest}\n >\n <Text\n as=\"span\"\n className={clsx(\n styles['AnchorNav-link-label'],\n anchoredContentIsVisible && styles['AnchorNav-link-label--is-active'],\n )}\n >\n {children}\n </Text>\n </a>\n )\n}\n\ntype AnchorNavActionProps = {\n /\n Required path or location for the action button to link to.\n /\n href: string\n} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> &\n ButtonBaseProps\n\nfunction ActionBase({children, href, variant = 'secondary', size = 'small', ...rest}: AnchorNavActionProps) {\n return (\n <Button\n as=\"a\"\n variant={variant}\n className={clsx(styles['AnchorNav-action'])}\n href={href}\n data-testid={testIds.action}\n size={size}\n {...rest}\n >\n {children}\n </Button>\n )\n}\n\nfunction SecondaryActionBase({children, href, variant = 'secondary', size = 'small', ...rest}: AnchorNavActionProps) {\n return (\n <Button\n as=\"a\"\n variant={variant}\n className={clsx(styles['AnchorNav-action'])}\n href={href}\n data-testid={testIds.secondaryAction}\n size={size}\n {...rest}\n >\n {children}\n </Button>\n )\n}\n\n/\n AnchorNav allows users to navigate to different sections of a page.\n * @see https://primer.style/brand/components/AnchorNav\n */\nexport const AnchorNav = Object.assign(AnchorNavBase, {\n Link: NavLinkBase,\n Action: ActionBase,\n SecondaryAction: SecondaryActionBase,\n testIds,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"AnchorNav.js","names":[],"sources":["../../src/AnchorNav/AnchorNav.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {ChevronDownIcon, ChevronUpIcon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\n\nimport {Button, ButtonBaseProps, Text} from '../'\nimport {useWindowSize} from '../hooks/useWindowSize'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useExpandedMenu} from './useExpandedMenu'\n\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './AnchorNav.module.css'\n\nconst testIds = {\n root: 'AnchorNav',\n get menuButton() {\n return `${this.root}-menu-button`\n },\n get menuLinks() {\n return `${this.root}-menu-links`\n },\n get action() {\n return `${this.root}-action`\n },\n get secondaryAction() {\n return `${this.root}-secondary-action`\n },\n get navSpacer() {\n return `${this.root}-nav-spacer`\n },\n}\n\nexport type AnchorNavProps = BaseProps<HTMLElement> & {\n /\n Accepts all of `AnchorNav.Item` and `AnchorNav.Action` child components.\n /\n children: React.ReactNode[]\n /\n Enable the idle state background color, which is transparent by default.\n /\n enableDefaultBgColor?: boolean\n /\n When true, the anchor nav will hide until it is sticky.\n /\n hideUntilSticky?: boolean\n} & React.ComponentPropsWithoutRef<'nav'>\n\nfunction AnchorNavBase({children, enableDefaultBgColor = false, hideUntilSticky = false, ...rest}: AnchorNavProps) {\n const [menuOpen, setMenuOpen] = useState(false)\n const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)\n const [currentActiveNavItem, setCurrentActiveNavItem] = useState<string \| null>()\n const [intersectionEntry, setIntersectionEntry] = useState<IntersectionObserverEntry>()\n const [initialYOffset, setInitialYOffset] = useState<undefined \| number>()\n const [navShouldFix, setNavShouldFix] = useState<boolean>(false)\n const [navHeight, setNavHeight] = useState<number>(0)\n\n const wrapperRef = useRef<HTMLDivElement \| null>(null)\n const rootRef = useRef<HTMLElement \| null>(null)\n const linkContainerRef = useRef<HTMLDivElement \| null>(null)\n const innerContainerRef = useRef<HTMLDivElement \| null>(null)\n\n const {isLarge} = useWindowSize()\n const idForLinkContainer = useId()\n\n const closeMenuCallback = useCallback(() => setMenuOpen(false), [setMenuOpen])\n const toggleMenuCallback = useCallback(() => setMenuOpen(!menuOpen), [menuOpen])\n\n const ValidChildren = useMemo(\n () =>\n React.Children.toArray(children).filter(\n (child: React.ReactNode): boolean => React.isValidElement(child) && typeof child.type !== 'string',\n ),\n [children],\n )\n\n useEffect(() => {\n if (initialYOffset === undefined && intersectionEntry) {\n setInitialYOffset(intersectionEntry.boundingClientRect.y + window.scrollY)\n }\n }, [initialYOffset, intersectionEntry])\n\n const handleIntersectionUpdate = ([nextEntry]: IntersectionObserverEntry[]): void => {\n setIntersectionEntry(nextEntry)\n }\n\n useKeyboardEscape(closeMenuCallback)\n useExpandedMenu(menuOpen, linkContainerRef, innerContainerRef, !isLarge, closeMenuCallback)\n\n useEffect(() => {\n if (wrapperRef.current) {\n const height = wrapperRef.current.offsetHeight\n setNavHeight(height)\n }\n }, [isLarge])\n\n useEffect(() => {\n const queryResult = window.matchMedia('(prefers-reduced-motion: reduce)')\n\n setPrefersReducedMotion(queryResult.matches)\n }, [])\n\n useEffect(() => {\n const handler = () => {\n if (initialYOffset) {\n const isPastInitialYOffset = window.pageYOffset > initialYOffset\n setNavShouldFix(isPastInitialYOffset)\n }\n }\n // eslint-disable-next-line github/prefer-observers\n window.addEventListener('scroll', handler)\n return () => {\n window.removeEventListener('scroll', handler)\n }\n }, [initialYOffset])\n\n useEffect(() => {\n const node = hideUntilSticky ? wrapperRef.current : rootRef.current\n\n const supportsIntersectionObserver = !!window.IntersectionObserver\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!supportsIntersectionObserver \|\| !node) return\n\n const topOfWindow = '0px 0px -100%'\n const observerParams = {threshold: 0, root: null, rootMargin: topOfWindow}\n const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams)\n\n observer.observe(node)\n\n return () => observer.disconnect()\n }, [hideUntilSticky])\n\n const handleMenuToggle = useCallback(\n event => {\n event?.preventDefault()\n toggleMenuCallback()\n },\n [toggleMenuCallback],\n )\n\n const handleUpdateToCurrentActiveNavItem = useCallback(\n (id: string \| null) => {\n setCurrentActiveNavItem(id)\n },\n [setCurrentActiveNavItem],\n )\n\n const numLinks = ValidChildren.filter(child => React.isValidElement(child) && child.type === NavLinkBase).length\n const Links = ValidChildren.map((child, index) => {\n if (React.isValidElement<AnchorNavLinkProps>(child) && child.type === NavLinkBase) {\n const defaultProps: AnchorNavLinkProps = {\n href: child.props.href,\n toggleMenuCallback,\n prefersReducedMotion,\n updateCurrentActiveNav: handleUpdateToCurrentActiveNavItem,\n alignment: numLinks < 4 ? 'start' : 'center',\n }\n return React.cloneElement(child, {\n isActive: index === 0,\n ...defaultProps,\n })\n }\n\n return null\n })\n .filter(Boolean)\n .slice(0, 5)\n\n const Action = ValidChildren.reduce<React.ReactElement<AnchorNavActionProps>[]>((acc, child) => {\n if (React.isValidElement<AnchorNavActionProps>(child) && child.type === ActionBase) {\n acc.push(React.cloneElement(child))\n }\n return acc\n }, [])\n\n const SecondaryAction = ValidChildren.reduce<React.ReactElement<AnchorNavActionProps>[]>((acc, child) => {\n if (React.isValidElement<AnchorNavActionProps>(child) && child.type === SecondaryActionBase) {\n acc.push(React.cloneElement(child))\n }\n return acc\n }, [])\n\n const hasLargerSizeActions =\n Action.some(action => action.props.size && action.props.size !== 'small') \|\|\n SecondaryAction.some(action => action.props.size && action.props.size !== 'small')\n\n / On page load, the rootMargin positions and/or thresholds of the IntersectionObserver\n * may not be met depending on the position of the AnchorNav on the page.\n * The following useEffect ensures that the first link always marked as the active link, until\n * the observer kicks in. Without this, the active link is undefined.\n /\n useEffect(() => {\n if (!currentActiveNavItem && Links.length > 0) {\n setCurrentActiveNavItem(Links[0]?.props.children as string)\n }\n }, [currentActiveNavItem, Links])\n\n const hasTwoActions = Action.length > 0 && SecondaryAction.length > 0\n\n return (\n <div ref={wrapperRef}>\n <nav\n ref={rootRef}\n aria-label=\"Anchored navigation\"\n data-sticky={navShouldFix.toString()}\n className={clsx(\n styles.AnchorNav,\n hideUntilSticky && styles['AnchorNav--hide-until-sticky'],\n navShouldFix && styles['AnchorNav--stuck'],\n menuOpen && styles['AnchorNav--expanded'],\n enableDefaultBgColor && styles['AnchorNav--with-default-background-color'],\n )}\n {...rest}\n >\n <div\n ref={innerContainerRef}\n className={clsx(\n styles['AnchorNav-inner-container'],\n menuOpen && styles['AnchorNav-inner-container--expanded'],\n )}\n >\n <button\n onClick={handleMenuToggle}\n className={clsx(styles['AnchorNav-menu-button'])}\n aria-expanded={menuOpen}\n aria-controls={idForLinkContainer}\n data-testid={testIds.menuButton}\n >\n {menuOpen ? (\n <ChevronUpIcon size={16} className={styles['AnchorNav-menu-button-arrow']} fill=\"currentcolor\" />\n ) : (\n <ChevronDownIcon size={16} className={styles['AnchorNav-menu-button-arrow']} fill=\"currentcolor\" />\n )}\n <span className=\"visually-hidden\">Anchor navigation menu. Currently selected: </span>\n <Text as=\"span\" className={clsx(styles['AnchorNav-link-label'])}>\n {currentActiveNavItem}\n </Text>\n </button>\n {/Replace with unique ids and test ids /}\n <div\n id={idForLinkContainer}\n data-testid={testIds.menuLinks}\n className={styles['AnchorNav-link-container']}\n ref={linkContainerRef}\n >\n {Links}\n </div>\n <span\n data-forward-focus=\"true\"\n className={clsx(\n styles['AnchorNav__actionsContainer'],\n hasLargerSizeActions && styles['AnchorNav__actionsContainer--no-offset'],\n hasTwoActions && styles['AnchorNav__actionsContainer--multiple'],\n )}\n >\n {Action.length && SecondaryAction.length && React.isValidElement<AnchorNavActionProps>(Action[0])\n ? React.cloneElement(Action[0], {\n variant: 'primary',\n })\n : Action}\n {SecondaryAction}\n </span>\n </div>\n <span\n className={clsx(menuOpen && styles['AnchorNav-overlay--expanded'])}\n onClick={closeMenuCallback}\n aria-hidden\n />\n </nav>\n {navShouldFix && <div style={{height: navHeight}} aria-hidden=\"true\" data-testid={testIds.navSpacer} />}\n </div>\n )\n}\n\ntype AnchorNavLinkIntersectionOptions = {\n /*\n The area of the element that should trigger the next linked section to be highlighted.\n /\n rootMargin: 'start' \| 'middle'\n}\n\ntype AnchorNavLinkProps = BaseProps<HTMLAnchorElement> & {\n /\n Optional text alignment for the link. Defaults to 'start' if there are less than 4 links, otherwise 'center'.\n /\n alignment?: 'start' \| 'center'\n /\n Required path or location for the anchor to link to.\n /\n href: string\n /\n Optional boolean to indicate if the link is the current active link.\n * Typically doesn't need to be sset unless custom animation is being used.\n /\n isActive?: boolean // internal prop, not exposed in docs\n toggleMenuCallback?: () => void // internal prop, not exposed in docs\n intersectionOptions?: AnchorNavLinkIntersectionOptions // internal prop, not exposed in docs\n prefersReducedMotion?: boolean // internal prop, not exposed in docs\n updateCurrentActiveNav?: (id: string \| null) => void // internal prop, not exposed in docs\n} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nfunction NavLinkBase({\n alignment = 'start',\n children,\n href,\n isActive,\n toggleMenuCallback,\n prefersReducedMotion,\n intersectionOptions = {rootMargin: 'middle'},\n updateCurrentActiveNav,\n ...rest\n}: AnchorNavLinkProps) {\n const {isLarge} = useWindowSize()\n const [intersectionEntry, setIntersectionEntry] = useState<IntersectionObserverEntry>()\n\n const isAnchor = /^#/.test(href)\n const anchoredContentIsVisible = !!intersectionEntry?.isIntersecting\n\n const handleIntersectionUpdate = ([nextEntry]: IntersectionObserverEntry[]): void => {\n setIntersectionEntry(nextEntry)\n }\n\n useEffect(() => {\n const node = document.querySelector(isAnchor ? href : `#${href}`)\n\n const supportsIntersectionObserver = !!window.IntersectionObserver\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!supportsIntersectionObserver \|\| !node) return\n\n const rootMarginTop = '0px'\n const rootMarginCenter = '-50% 0% -50% 0%'\n\n const rootMargin = intersectionOptions.rootMargin === 'start' ? rootMarginTop : rootMarginCenter\n\n const observerParams = {threshold: intersectionOptions.rootMargin === 'start' ? 0.4 : 0, root: null, rootMargin}\n\n const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams)\n\n observer.observe(node)\n\n return () => observer.disconnect()\n }, [href, intersectionOptions.rootMargin, isAnchor])\n\n // updates root AnchorNav to notify of active section\n useEffect(() => {\n if (anchoredContentIsVisible && updateCurrentActiveNav && typeof children === 'string') {\n updateCurrentActiveNav(children)\n }\n }, [anchoredContentIsVisible, children, updateCurrentActiveNav])\n\n const handleClick = useCallback(() => {\n if (toggleMenuCallback && !isLarge) {\n toggleMenuCallback()\n }\n }, [isLarge, toggleMenuCallback])\n\n return (\n <a\n className={clsx(\n styles['AnchorNav-link'],\n styles[`AnchorNav-link--${alignment}`],\n anchoredContentIsVisible && styles['AnchorNav-link--is-active'],\n )}\n href={isAnchor ? href : `#${href}`}\n aria-current={anchoredContentIsVisible && 'true'}\n data-first={isActive}\n data-active={anchoredContentIsVisible ? 'true' : 'false'}\n onClick={handleClick}\n {...rest}\n >\n <Text\n as=\"span\"\n className={clsx(\n styles['AnchorNav-link-label'],\n anchoredContentIsVisible && styles['AnchorNav-link-label--is-active'],\n )}\n >\n {children}\n </Text>\n </a>\n )\n}\n\ntype AnchorNavActionProps = {\n /\n Required path or location for the action button to link to.\n /\n href: string\n} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> &\n ButtonBaseProps\n\nfunction ActionBase({children, href, variant = 'secondary', size = 'small', ...rest}: AnchorNavActionProps) {\n return (\n <Button\n as=\"a\"\n variant={variant}\n className={clsx(styles['AnchorNav-action'])}\n href={href}\n data-testid={testIds.action}\n size={size}\n {...rest}\n >\n {children}\n </Button>\n )\n}\n\nfunction SecondaryActionBase({children, href, variant = 'secondary', size = 'small', ...rest}: AnchorNavActionProps) {\n return (\n <Button\n as=\"a\"\n variant={variant}\n className={clsx(styles['AnchorNav-action'])}\n href={href}\n data-testid={testIds.secondaryAction}\n size={size}\n {...rest}\n >\n {children}\n </Button>\n )\n}\n\n/\n AnchorNav allows users to navigate to different sections of a page.\n * @see https://primer.style/brand/components/AnchorNav\n */\nexport const AnchorNav = Object.assign(AnchorNavBase, {\n Link: NavLinkBase,\n Action: ActionBase,\n SecondaryAction: SecondaryActionBase,\n testIds,\n})\n"],"mappings":"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"}

package/esm/AnchorNav/AnchorNav.module.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import './AnchorNav.module-33_8-9r9.css';var e = {
-	AnchorNav: "Primer_Brand__AnchorNav-module__AnchorNav___fA9HX",
+import './AnchorNav.module-33_8-9r9.css';//#region src/AnchorNav/AnchorNav.module.css
+var e = "Primer_Brand__AnchorNav-module__AnchorNav___fA9HX", t = "Primer_Brand__AnchorNav-module__AnchorNav__actionsContainer___GrYsv", n = {
+	AnchorNav: e,
 	"AnchorNav--no-bg-scroll": "Primer_Brand__AnchorNav-module__AnchorNav--no-bg-scroll___xg4JR",
 	"AnchorNav--hide-until-sticky": "Primer_Brand__AnchorNav-module__AnchorNav--hide-until-sticky___028xm",
 	"AnchorNav--stuck": "Primer_Brand__AnchorNav-module__AnchorNav--stuck___SgtFL",
@@ -8,7 +9,7 @@ import './AnchorNav.module-33_8-9r9.css';var e = {
 	"AnchorNav-link-container": "Primer_Brand__AnchorNav-module__AnchorNav-link-container___CDgv3",
 	"AnchorNav-inner-container": "Primer_Brand__AnchorNav-module__AnchorNav-inner-container___t_JyN",
 	"AnchorNav-inner-container--expanded": "Primer_Brand__AnchorNav-module__AnchorNav-inner-container--expanded___sba8G",
-	AnchorNav__actionsContainer: "Primer_Brand__AnchorNav-module__AnchorNav__actionsContainer___GrYsv",
+	AnchorNav__actionsContainer: t,
 	"AnchorNav__actionsContainer--no-offset": "Primer_Brand__AnchorNav-module__AnchorNav__actionsContainer--no-offset___gqZlb",
 	"AnchorNav-link": "Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX",
 	"fade-in": "Primer_Brand__AnchorNav-module__fade-in___cNMRW",
@@ -24,6 +25,6 @@ import './AnchorNav.module-33_8-9r9.css';var e = {
 	"AnchorNav__actionsContainer--multiple": "Primer_Brand__AnchorNav-module__AnchorNav__actionsContainer--multiple___pToLt"
 };
 //#endregion
-export { e as default };
+export { e as AnchorNav, t as AnchorNav__actionsContainer, n as default };
 //# sourceMappingURL=AnchorNav.module.js.map

package/esm/AnchorNav/useExpandedMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useExpandedMenu.js","names":[],"sources":["../../src/AnchorNav/useExpandedMenu.ts"],"sourcesContent":["import React, {useEffect} from 'react'\nimport styles from './AnchorNav.module.css'\n\nexport const useExpandedMenu = (\n open: boolean,\n linkContainerRef: React.RefObject<HTMLElement \| null>,\n innerContainerRef: React.RefObject<HTMLElement \| null>,\n isNarrow: boolean,\n closeMenuCallback: () => void,\n) => {\n // Prevent background scroll when menu is open\n useEffect(() => {\n if (open && isNarrow) {\n document.body.classList.add(styles['AnchorNav--no-bg-scroll'])\n } else {\n document.body.classList.remove(styles['AnchorNav--no-bg-scroll'])\n }\n }, [open, isNarrow])\n\n // Move focus to the first menu item when the menu opens\n useEffect(() => {\n if (open && isNarrow) {\n const firstLink = linkContainerRef.current?.firstChild as HTMLElement \| null\n firstLink?.focus()\n }\n }, [open, isNarrow, linkContainerRef])\n\n // Close the menu when focus moves outside the menu container\n useEffect(() => {\n const element = innerContainerRef.current\n if (element && open && isNarrow) {\n const handleFocusOut = (event: FocusEvent) => {\n if (!element.contains(event.relatedTarget as Node)) {\n closeMenuCallback()\n }\n }\n\n element.addEventListener('focusout', handleFocusOut)\n\n return () => {\n element.removeEventListener('focusout', handleFocusOut)\n }\n }\n }, [open, isNarrow, innerContainerRef, closeMenuCallback])\n}\n"],"mappings":";;;AAGA,IAAa,KACX,GACA,GACA,GACA,GACA,MACG;~~AAmBH~~,~~CAjBA~~,QAAgB;~~AACd~~,~~EAAI~~,KAAQ,IACV,SAAS,KAAK,UAAU,IAAI,EAAO,~~2BAA2B~~,~~GAE9D~~,SAAS,KAAK,UAAU,OAAO,EAAO,~~2BAA2B~~;~~IAElE~~,CAAC,GAAM,~~EAAS~~,CAAC,~~EAGpB~~,QAAgB;~~AACd~~,~~EAAI~~,KAAQ,MACQ,EAAiB,SAAS,~~aACjC~~,~~OAAO~~;~~IAEnB~~;EAAC;EAAM;EAAU;~~EAAiB~~,CAAC,~~EAGtC~~,QAAgB;EACd,IAAM,IAAU,EAAkB;~~AAClC~~,~~MAAI~~,KAAW,KAAQ,GAAU;GAC/B,IAAM,KAAkB,MAAsB;~~AAC5C~~,~~IAAK~~,EAAQ,SAAS,EAAM,~~cAAsB~~,~~IAChD~~,~~GAAmB;;AAMvB~~,~~UAFA~~,EAAQ,iBAAiB,YAAY,~~EAAe~~,~~QAEvC~~;~~AACX~~,~~MAAQ~~,oBAAoB,YAAY,~~EAAe;;;IAG1D~~;EAAC;EAAM;EAAU;EAAmB;~~EAAkB~~,CAAC"}
1	+ {"version":3,"file":"useExpandedMenu.js","names":[],"sources":["../../src/AnchorNav/useExpandedMenu.ts"],"sourcesContent":["import React, {useEffect} from 'react'\nimport styles from './AnchorNav.module.css'\n\nexport const useExpandedMenu = (\n open: boolean,\n linkContainerRef: React.RefObject<HTMLElement \| null>,\n innerContainerRef: React.RefObject<HTMLElement \| null>,\n isNarrow: boolean,\n closeMenuCallback: () => void,\n) => {\n // Prevent background scroll when menu is open\n useEffect(() => {\n if (open && isNarrow) {\n document.body.classList.add(styles['AnchorNav--no-bg-scroll'])\n } else {\n document.body.classList.remove(styles['AnchorNav--no-bg-scroll'])\n }\n }, [open, isNarrow])\n\n // Move focus to the first menu item when the menu opens\n useEffect(() => {\n if (open && isNarrow) {\n const firstLink = linkContainerRef.current?.firstChild as HTMLElement \| null\n firstLink?.focus()\n }\n }, [open, isNarrow, linkContainerRef])\n\n // Close the menu when focus moves outside the menu container\n useEffect(() => {\n const element = innerContainerRef.current\n if (element && open && isNarrow) {\n const handleFocusOut = (event: FocusEvent) => {\n if (!element.contains(event.relatedTarget as Node)) {\n closeMenuCallback()\n }\n }\n\n element.addEventListener('focusout', handleFocusOut)\n\n return () => {\n element.removeEventListener('focusout', handleFocusOut)\n }\n }\n }, [open, isNarrow, innerContainerRef, closeMenuCallback])\n}\n"],"mappings":";;;AAGA,IAAa,KACX,GACA,GACA,GACA,GACA,MACG;CAmBH,AAjBA,QAAgB;EACd,AAAI,KAAQ,IACV,SAAS,KAAK,UAAU,IAAI,EAAO,0BAA0B,IAE7D,SAAS,KAAK,UAAU,OAAO,EAAO,0BAA0B;CAEpE,GAAG,CAAC,GAAM,CAAQ,CAAC,GAGnB,QAAgB;EACd,AAAI,KAAQ,MACQ,EAAiB,SAAS,WAAA,EACjC,MAAM;CAErB,GAAG;EAAC;EAAM;EAAU;CAAgB,CAAC,GAGrC,QAAgB;EACd,IAAM,IAAU,EAAkB;EAClC,IAAI,KAAW,KAAQ,GAAU;GAC/B,IAAM,KAAkB,MAAsB;IAC5C,AAAK,EAAQ,SAAS,EAAM,aAAqB,KAC/C,EAAkB;GAEtB;GAIA,OAFA,EAAQ,iBAAiB,YAAY,CAAc,SAEtC;IACX,EAAQ,oBAAoB,YAAY,CAAc;GACxD;EACF;CACF,GAAG;EAAC;EAAM;EAAU;EAAmB;CAAiB,CAAC;AAC3D"}

package/esm/Avatar/Avatar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import t from "./Avatar.module.js";
 import { forwardRef as n, useMemo as r } from "react";
 import { jsx as i } from "react/jsx-runtime";