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

@primer/react-brand 0.75.0-rc.a3f7dbd6 → 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 (940) hide show

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";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","names":[],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Avatar.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const AvatarSizes = [32, 40, 48, 64, 80] as const\nexport const AvatarShapes = ['circle', 'square'] as const\n\ntype AvatarSizeVariants = (typeof AvatarSizes)[number]\n\ntype ResponsiveSizeMap = {\n narrow?: AvatarSizeVariants\n regular?: AvatarSizeVariants\n wide?: AvatarSizeVariants\n}\n\nexport type AvatarProps = BaseProps<HTMLImageElement> & {\n size?: (typeof AvatarSizes)[number] \| ResponsiveSizeMap\n shape?: (typeof AvatarShapes)[number]\n src: string\n alt: string\n ['data-testid']?: string\n} & React.ImgHTMLAttributes<HTMLImageElement>\n\nconst testIds = {\n root: 'Avatar',\n get image() {\n return `${this.root}__image`\n },\n}\n\nconst _Avatar = forwardRef<HTMLImageElement, AvatarProps>(\n ({alt, className, size = AvatarSizes[1], shape = AvatarShapes[0], 'data-testid': testId, src, ...props}, ref) => {\n const sizeClass = useMemo(() => {\n return typeof size === 'number'\n ? styles[`Avatar--size-${size}`]\n : Object.keys(size)\n .map(viewport => {\n return styles[`Avatar-${viewport}--size-${size[viewport]}`]\n })\n .join(' ')\n }, [size])\n\n return (\n <span\n ref={ref}\n className={clsx(styles.Avatar, sizeClass, styles[`Avatar--shape-${shape}`], className)}\n data-testid={testId \|\| testIds.root}\n >\n <img className={clsx(styles.Avatar__image)} src={src} alt={alt} data-testid={testIds.image} {...props} />\n </span>\n )\n },\n)\n\nexport const Avatar = Object.assign(_Avatar, {testIds})\n"],"mappings":";;;;;AAMA,IAAa,IAAc;CAAC;CAAI;CAAI;CAAI;CAAI;~~CAAG~~,~~EAClC~~,IAAe,CAAC,UAAU,~~SAAS~~,~~EAkB1C~~,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;~~AACV~~,~~SAAO~~,GAAG,KAAK,KAAK~~;;CAEvB~~,~~EAEK~~,IAAU,GACb,EAAC,QAAK,cAAW,UAAO,EAAY,IAAI,WAAQ,EAAa,IAAI,eAAe,GAAQ,QAAK,GAAG,KAAQ,MAAQ;CAC/G,IAAM,IAAY,QACT,OAAO,KAAS,WACnB,EAAO,gBAAgB,OACvB,OAAO,KAAK,~~EAAK~~,CACd,KAAI,MACI,EAAO,UAAU,EAAS,SAAS,EAAK,~~MAC/C~~,CACD,KAAK,~~IAAI~~,~~EACf~~,CAAC,~~EAAK~~,CAAC;~~AAEV~~,~~QACE~~,kBAAC,QAAD;EACO;EACL,WAAW,EAAK,EAAO,QAAQ,GAAW,EAAO,iBAAiB,MAAU,~~EAAU~~;~~EACtF~~,eAAa,KAAU,EAAQ;YAE/B,kBAAC,OAAD;GAAK,WAAW,EAAK,EAAO,~~cAAc~~;~~GAAO~~;GAAU;GAAK,eAAa,EAAQ;GAAO,GAAI;~~GAAS~~,CAAA;~~EACpG~~,CAAA;~~EAGZ~~,~~EAEY~~,IAAS,OAAO,OAAO,GAAS,EAAC,~~YAAQ~~,CAAC"}
1	+ {"version":3,"file":"Avatar.js","names":[],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Avatar.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const AvatarSizes = [32, 40, 48, 64, 80] as const\nexport const AvatarShapes = ['circle', 'square'] as const\n\ntype AvatarSizeVariants = (typeof AvatarSizes)[number]\n\ntype ResponsiveSizeMap = {\n narrow?: AvatarSizeVariants\n regular?: AvatarSizeVariants\n wide?: AvatarSizeVariants\n}\n\nexport type AvatarProps = BaseProps<HTMLImageElement> & {\n size?: (typeof AvatarSizes)[number] \| ResponsiveSizeMap\n shape?: (typeof AvatarShapes)[number]\n src: string\n alt: string\n ['data-testid']?: string\n} & React.ImgHTMLAttributes<HTMLImageElement>\n\nconst testIds = {\n root: 'Avatar',\n get image() {\n return `${this.root}__image`\n },\n}\n\nconst _Avatar = forwardRef<HTMLImageElement, AvatarProps>(\n ({alt, className, size = AvatarSizes[1], shape = AvatarShapes[0], 'data-testid': testId, src, ...props}, ref) => {\n const sizeClass = useMemo(() => {\n return typeof size === 'number'\n ? styles[`Avatar--size-${size}`]\n : Object.keys(size)\n .map(viewport => {\n return styles[`Avatar-${viewport}--size-${size[viewport]}`]\n })\n .join(' ')\n }, [size])\n\n return (\n <span\n ref={ref}\n className={clsx(styles.Avatar, sizeClass, styles[`Avatar--shape-${shape}`], className)}\n data-testid={testId \|\| testIds.root}\n >\n <img className={clsx(styles.Avatar__image)} src={src} alt={alt} data-testid={testIds.image} {...props} />\n </span>\n )\n },\n)\n\nexport const Avatar = Object.assign(_Avatar, {testIds})\n"],"mappings":";;;;;AAMA,IAAa,IAAc;CAAC;CAAI;CAAI;CAAI;CAAI;AAAE,GACjC,IAAe,CAAC,UAAU,QAAQ,GAkBzC,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;EACV,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAEM,IAAU,GACb,EAAC,QAAK,cAAW,UAAO,EAAY,IAAI,WAAQ,EAAa,IAAI,eAAe,GAAQ,QAAK,GAAG,KAAQ,MAAQ;CAC/G,IAAM,IAAY,QACT,OAAO,KAAS,WACnB,EAAO,gBAAgB,OACvB,OAAO,KAAK,CAAI,CAAC,CACd,KAAI,MACI,EAAO,UAAU,EAAS,SAAS,EAAK,KAChD,CAAC,CACD,KAAK,GAAG,GACd,CAAC,CAAI,CAAC;CAET,OACE,kBAAC,QAAD;EACO;EACL,WAAW,EAAK,EAAO,QAAQ,GAAW,EAAO,iBAAiB,MAAU,CAAS;EACrF,eAAa,KAAU,EAAQ;YAE/B,kBAAC,OAAD;GAAK,WAAW,EAAK,EAAO,aAAa;GAAQ;GAAU;GAAK,eAAa,EAAQ;GAAO,GAAI;EAAQ,CAAA;CACpG,CAAA;AAEV,CACF,GAEa,IAAS,OAAO,OAAO,GAAS,EAAC,WAAO,CAAC"}

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

@@ -1,8 +1,9 @@
-import './Avatar.module-DUQdD7On.css';var e = {
-	Avatar: "Primer_Brand__Avatar-module__Avatar___VP3QQ",
+import './Avatar.module-DUQdD7On.css';//#region src/Avatar/Avatar.module.css
+var e = "Primer_Brand__Avatar-module__Avatar___VP3QQ", t = "Primer_Brand__Avatar-module__Avatar__image___ImYTc", n = {
+	Avatar: e,
 	"Avatar--shape-circle": "Primer_Brand__Avatar-module__Avatar--shape-circle___Yz6Zj",
 	"Avatar--shape-square": "Primer_Brand__Avatar-module__Avatar--shape-square___f2Rrz",
-	Avatar__image: "Primer_Brand__Avatar-module__Avatar__image___ImYTc",
+	Avatar__image: t,
 	"Avatar--size-32": "Primer_Brand__Avatar-module__Avatar--size-32___P1cC2",
 	"Avatar--size-40": "Primer_Brand__Avatar-module__Avatar--size-40___fFZWc",
 	"Avatar--size-48": "Primer_Brand__Avatar-module__Avatar--size-48___ZrSSm",
@@ -23,6 +24,6 @@ import './Avatar.module-DUQdD7On.css';var e = {
 	"Avatar-wide--size-80": "Primer_Brand__Avatar-module__Avatar-wide--size-80___MptXL"
 };
 //#endregion
-export { e as default };
+export { e as Avatar, t as Avatar__image, n as default };
 //# sourceMappingURL=Avatar.module.js.map

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

@@ -50,10 +50,10 @@ type BentoVisualProps = {
  * @deprecated Bento is deprecated and will be removed in a future release. Use CTABanner or River instead.
  * @see https://primer.style/brand/components/Bento
  */
-export declare const Bento: (({ className, ...rest }: BentoProps) => import("react/jsx-runtime").JSX.Element) & {
-    Item: ({ className, columnStart, columnSpan, rowStart, rowSpan, flow, colorMode, visualAsBackground, order, bgColor, children, ...rest }: BentoItemProps) => import("react/jsx-runtime").JSX.Element;
-    Visual: ({ horizontalAlign, verticalAlign, fillMedia, overflow, position, padding, className, children, ...rest }: BentoVisualProps) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ children, leadingVisual: LeadingVisual, padding, verticalAlign, horizontalAlign, className, ...rest }: BentoContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Bento: (({ className, ...rest }: BentoProps) => React.JSX.Element) & {
+    Item: ({ className, columnStart, columnSpan, rowStart, rowSpan, flow, colorMode, visualAsBackground, order, bgColor, children, ...rest }: BentoItemProps) => React.JSX.Element;
+    Visual: ({ horizontalAlign, verticalAlign, fillMedia, overflow, position, padding, className, children, ...rest }: BentoVisualProps) => React.JSX.Element;
+    Content: ({ children, leadingVisual: LeadingVisual, padding, verticalAlign, horizontalAlign, className, ...rest }: BentoContentProps) => React.JSX.Element;
     Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<BentoHeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 };
 export {};

package/esm/Bento/Bento.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 { Text as t } from "../Text/Text.js";
 import { Heading as n } from "../Heading/Heading.js";
 import { Image as r } from "../Image/Image.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Bento.js","names":[],"sources":["../../src/Bento/Bento.tsx"],"sourcesContent":["import React, {ReactElement, forwardRef, useCallback, useMemo, Ref, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useWindowSize, BreakpointSize} from '../hooks/useWindowSize'\nimport type {BaseProps} from '../component-helpers'\nimport findElementInChildren from '../findElementInChildren'\n\nimport {Heading, Text, Link, HeadingProps, TextProps, LinkProps, ColorMode as FullColorMode, Image} from '../'\nimport {Label, type LabelProps} from '../Label'\n\nimport type {IconProps} from '../Icon'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css'\nimport styles from './Bento.module.css'\n\ntype ColorMode = Exclude<FullColorMode, 'auto'>\n\nexport type Size = 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'\nexport type ColumnIndex = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12\n\ntype ResponsiveColumnIndex = Partial<Record<Size, ColumnIndex>>\ntype ResponsiveRowIndex = Partial<Record<Size, number>>\n\ntype Flow = 'row' \| 'column'\ntype ResponsiveFlow = Partial<Record<Size, Flow>>\n\ntype Align = 'start' \| 'center' \| 'end'\ntype ResponsiveAlign = Partial<Record<Size, Align>>\n\ntype Padding = 'condensed' \| 'normal' \| 'spacious'\ntype ResponsivePadding = Partial<Record<Size, Padding>>\n\ntype Order = 'default' \| 'reversed'\ntype ResponsiveOrder = Partial<Record<Size, Order>>\n\ntype BentoProps = React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>\n\nconst Root = ({className, ...rest}: BentoProps) => {\n return <section className={clsx(styles.Bento, className)} {...rest}></section>\n}\n\ntype ValidChildren = React.ReactElement<BentoVisualProps \| BentoContentProps>\ntype ValidItemChildren = [ValidChildren?, ValidChildren?]\n\ntype BentoItemProps = {\n columnStart?: ColumnIndex \| ResponsiveColumnIndex\n columnSpan?: ColumnIndex \| ResponsiveColumnIndex\n rowStart?: number \| ResponsiveRowIndex\n rowSpan?: number \| ResponsiveRowIndex\n flow?: Flow \| ResponsiveFlow\n colorMode?: ColorMode\n visualAsBackground?: boolean\n order?: Order \| ResponsiveOrder\n bgColor?: 'default' \| 'subtle'\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst returnClassBasedOnResponsiveMap = (\n classIdentifier: string,\n propName: string,\n prop?:\n \| ResponsiveColumnIndex\n \| ColumnIndex\n \| ResponsiveRowIndex\n \| number\n \| ResponsiveFlow\n \| Flow\n \| ResponsiveAlign\n \| Align\n \| ResponsivePadding\n \| Padding,\n) => {\n const classesToMerge: string[] = []\n if (typeof prop === 'number' \|\| typeof prop === 'string') {\n classesToMerge.push(styles[`${classIdentifier}--${propName}-${prop}`])\n } else if (typeof prop === 'object') {\n for (const [key, value] of Object.entries(prop)) {\n classesToMerge.push(styles[`${classIdentifier}--${key}-${propName}-${value}`])\n }\n }\n return classesToMerge\n}\n\ntype ReturnOrderedChildrenProps = {\n order: Order \| ResponsiveOrder\n children: React.ReactNode\n currentBreakpointSize?: BreakpointSize\n}\n\nconst returnOrderedChildren = ({order, children, currentBreakpointSize}: ReturnOrderedChildrenProps) => {\n if (typeof order === 'string') {\n return order === 'default' ? children : React.Children.toArray(children).reverse()\n } else if (typeof order === 'object' && currentBreakpointSize) {\n // This handles setting the order based on breakpoints as you might expect via CSS\n const filledStyleOrder: ResponsiveOrder = {}\n let previousSize: Order = 'default'\n for (const size of Object.keys(BreakpointSize)) {\n const lowerCaseSize = size.toLocaleLowerCase()\n if (order[lowerCaseSize]) previousSize = order[lowerCaseSize]\n filledStyleOrder[lowerCaseSize] = order[lowerCaseSize] \|\| previousSize\n }\n return filledStyleOrder[currentBreakpointSize] === 'default' ? children : React.Children.toArray(children).reverse()\n } else {\n return children\n }\n}\n\nconst Item = ({\n className,\n columnStart,\n columnSpan = 12,\n rowStart,\n rowSpan = 2,\n flow = 'row',\n colorMode,\n visualAsBackground = false,\n order = 'default',\n bgColor = 'subtle',\n children,\n ...rest\n}: BentoItemProps) => {\n const {currentBreakpointSize} = useWindowSize()\n\n const validChildren = React.Children.toArray(children).reduce<ValidItemChildren>((acc, child) => {\n if (React.isValidElement<BentoVisualProps>(child) && child.type === Visual) {\n acc.push(child)\n }\n if (React.isValidElement<BentoContentProps>(child) && child.type === Content) {\n acc.push(child)\n }\n return acc\n }, [])\n\n const contentChildPadding =\n validChildren.find(\n (child): child is React.ReactElement<BentoContentProps> =>\n React.isValidElement<BentoContentProps>(child) && child.type === Content,\n )?.props.padding \|\| 'spacious'\n\n const bentoItemClassArray = [styles.Bento__Item, styles[`Bento__Item--bgColor-${bgColor}`]]\n\n bentoItemClassArray.push(\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-span', columnSpan),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-span', rowSpan),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-start', columnStart),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-start', rowStart),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'flow', flow),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'gap', contentChildPadding),\n )\n\n if (!visualAsBackground && React.Children.toArray(children).length >= 1) {\n if (flow === 'column') {\n bentoItemClassArray.push(styles['Bento-column-padding-override'])\n }\n if (flow === 'row') {\n bentoItemClassArray.push(styles['Bento-row-padding-override'])\n }\n }\n\n const colorModeProp = colorMode ? {'data-color-mode': colorMode} : {}\n\n const orderedChildren = returnOrderedChildren({order, children: validChildren, currentBreakpointSize})\n\n return (\n <div\n {...colorModeProp}\n className={clsx(\n ...bentoItemClassArray,\n (visualAsBackground \|\| React.Children.toArray(children).length === 1) &&\n styles[`Bento__Item--visual-as-background`],\n className,\n )}\n {...rest}\n >\n {orderedChildren}\n </div>\n )\n}\n\ntype BentoContentProps = {\n leadingVisual?: ReactElement<IconProps>\n padding?: Padding \| ResponsivePadding\n verticalAlign?: Align \| ResponsiveAlign\n horizontalAlign?: Exclude<Align, 'end'> \| Partial<Record<Size, Exclude<Align, 'end'>>>\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst Content = ({\n children,\n leadingVisual: LeadingVisual,\n padding = 'spacious',\n verticalAlign,\n horizontalAlign = 'start',\n className,\n ...rest\n}: BentoContentProps) => {\n const bentoContentClassArray = [styles.Bento__Content]\n bentoContentClassArray.push(\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'verticalAlign', verticalAlign),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'horizontalAlign', horizontalAlign),\n ...returnClassBasedOnResponsiveMap('Bento', 'padding', padding),\n )\n\n const memoizedChildren = useMemo(() => React.Children.toArray(children), [children])\n\n const HeadingChildren = memoizedChildren.filter(\n (child): child is React.ReactElement<BentoHeadingProps> =>\n React.isValidElement<BentoHeadingProps>(child) && child.type === _Heading,\n )\n\n const LabelChild = memoizedChildren.find(\n (child): child is React.ReactElement<LabelProps> => React.isValidElement<LabelProps>(child) && child.type === Label,\n )\n const TextChild = memoizedChildren.find(\n (child): child is React.ReactElement<TextProps> => React.isValidElement<TextProps>(child) && child.type === Text,\n )\n const LinkChild = memoizedChildren.find(\n (child): child is React.ReactElement<LinkProps> => React.isValidElement<LinkProps>(child) && child.type === Link,\n )\n\n const usesDeprecatedLabel = React.isValidElement<LabelProps>(LabelChild)\n\n if (usesDeprecatedLabel && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn('Bento.Content: standalone `Label` children are deprecated. Remove it or migrate from Bento.')\n }\n\n return (\n <div className={clsx(styles[`Bento-padding--${padding}`], ...bentoContentClassArray, className)} {...rest}>\n {React.isValidElement<IconProps>(LeadingVisual) &&\n React.cloneElement(LeadingVisual, {\n className: styles['Bento__Content-icon'],\n size: LeadingVisual.props.size \|\| 44,\n })}\n\n {usesDeprecatedLabel &&\n React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {\n className: clsx(styles['Bento__Content-label'], LabelChild.props.className),\n })}\n\n {HeadingChildren.map(HeadingChild =>\n React.cloneElement(HeadingChild, {\n className: clsx(\n !React.isValidElement(TextChild) && styles['Bento__heading--no-text'],\n horizontalAlign === 'center' && styles['Bento__heading--with-max-width'],\n HeadingChild.props.className,\n ),\n }),\n )}\n\n {React.isValidElement<TextProps>(TextChild) &&\n React.cloneElement(TextChild, {\n variant: TextChild.props.variant \|\| 'muted',\n as: TextChild.props.as \|\| 'p',\n size: TextChild.props.size \|\| '300',\n className: clsx(styles['Bento__Content-text'], TextChild.props.className),\n })}\n\n {React.isValidElement<LinkProps>(LinkChild) &&\n React.cloneElement(LinkChild, {\n variant: LinkChild.props.variant \|\| 'accent',\n className: clsx(styles['Bento__call-to-action'], LinkChild.props.className),\n })}\n </div>\n )\n}\n\ntype BentoHeadingProps = {\n variant?: 'default' \| 'muted'\n} & BaseProps<HTMLHeadingElement> &\n HeadingProps\n\nconst _Heading = forwardRef(\n (\n {\n as = 'h3',\n size = '5',\n weight = 'medium',\n variant = 'default',\n className,\n children,\n ...props\n }: PropsWithChildren<BentoHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const getConditionalVariant = useCallback(() => {\n if (findElementInChildren(children, 'b') \|\| findElementInChildren(children, 'em')) {\n return 'muted'\n }\n return 'default'\n }, [children])\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n return (\n <Heading\n ref={ref}\n className={clsx(\n defaultColor === 'muted' && styles[`Bento__heading--muted`],\n variant === 'muted' && styles[`Bento__heading--muted`],\n className,\n )}\n size={size}\n as={as}\n weight={weight}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype BentoVisualProps = {\n horizontalAlign?: Align\n verticalAlign?: Align\n fillMedia?: boolean\n overflow?: 'hidden' \| 'initial'\n position?: string\n padding?: Padding \| ResponsivePadding\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst Visual = ({\n horizontalAlign,\n verticalAlign,\n fillMedia = true,\n overflow = 'hidden',\n position = '50% 50%',\n padding,\n className,\n children,\n ...rest\n}: BentoVisualProps) => {\n const bentoVisualClassArray = [\n styles.Bento__Visual,\n horizontalAlign && styles[`Bento__Visual--horizontalAlign-${horizontalAlign}`],\n verticalAlign && styles[`Bento__Visual--verticalAlign-${verticalAlign}`],\n styles[`Bento__Visual--overflow-${overflow}`],\n ]\n bentoVisualClassArray.push(...returnClassBasedOnResponsiveMap('Bento', 'padding', padding))\n const childrenToRender = React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n if (React.isValidElement<React.ImgHTMLAttributes<HTMLImageElement>>(child) && child.type === 'img') {\n return React.cloneElement(child, {\n style: {...child.props.style, objectPosition: position},\n })\n }\n if (React.isValidElement<React.ComponentProps<typeof Image>>(child) && child.type === Image) {\n return React.cloneElement(child, {\n style: {...child.props.style, objectPosition: position},\n })\n }\n return child\n }\n return null\n })\n return (\n <div\n className={clsx(\n ...bentoVisualClassArray,\n fillMedia && styles['Bento__Visual--fill'],\n !fillMedia && styles['Bento__Visual--no-fill'],\n className,\n )}\n {...rest}\n >\n {childrenToRender}\n </div>\n )\n}\n\n/*\n Use Bento to present content in a responsive grid layout.\n * @deprecated Bento is deprecated and will be removed in a future release. Use CTABanner or River instead.\n * @see https://primer.style/brand/components/Bento\n */\nexport const Bento = Object.assign(Root, {Item, Visual, Content, Heading: _Heading})\n"],"mappings":"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"}
1	+ {"version":3,"file":"Bento.js","names":[],"sources":["../../src/Bento/Bento.tsx"],"sourcesContent":["import React, {ReactElement, forwardRef, useCallback, useMemo, Ref, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useWindowSize, BreakpointSize} from '../hooks/useWindowSize'\nimport type {BaseProps} from '../component-helpers'\nimport findElementInChildren from '../findElementInChildren'\n\nimport {Heading, Text, Link, HeadingProps, TextProps, LinkProps, ColorMode as FullColorMode, Image} from '../'\nimport {Label, type LabelProps} from '../Label'\n\nimport type {IconProps} from '../Icon'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css'\nimport styles from './Bento.module.css'\n\ntype ColorMode = Exclude<FullColorMode, 'auto'>\n\nexport type Size = 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'\nexport type ColumnIndex = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12\n\ntype ResponsiveColumnIndex = Partial<Record<Size, ColumnIndex>>\ntype ResponsiveRowIndex = Partial<Record<Size, number>>\n\ntype Flow = 'row' \| 'column'\ntype ResponsiveFlow = Partial<Record<Size, Flow>>\n\ntype Align = 'start' \| 'center' \| 'end'\ntype ResponsiveAlign = Partial<Record<Size, Align>>\n\ntype Padding = 'condensed' \| 'normal' \| 'spacious'\ntype ResponsivePadding = Partial<Record<Size, Padding>>\n\ntype Order = 'default' \| 'reversed'\ntype ResponsiveOrder = Partial<Record<Size, Order>>\n\ntype BentoProps = React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>\n\nconst Root = ({className, ...rest}: BentoProps) => {\n return <section className={clsx(styles.Bento, className)} {...rest}></section>\n}\n\ntype ValidChildren = React.ReactElement<BentoVisualProps \| BentoContentProps>\ntype ValidItemChildren = [ValidChildren?, ValidChildren?]\n\ntype BentoItemProps = {\n columnStart?: ColumnIndex \| ResponsiveColumnIndex\n columnSpan?: ColumnIndex \| ResponsiveColumnIndex\n rowStart?: number \| ResponsiveRowIndex\n rowSpan?: number \| ResponsiveRowIndex\n flow?: Flow \| ResponsiveFlow\n colorMode?: ColorMode\n visualAsBackground?: boolean\n order?: Order \| ResponsiveOrder\n bgColor?: 'default' \| 'subtle'\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst returnClassBasedOnResponsiveMap = (\n classIdentifier: string,\n propName: string,\n prop?:\n \| ResponsiveColumnIndex\n \| ColumnIndex\n \| ResponsiveRowIndex\n \| number\n \| ResponsiveFlow\n \| Flow\n \| ResponsiveAlign\n \| Align\n \| ResponsivePadding\n \| Padding,\n) => {\n const classesToMerge: string[] = []\n if (typeof prop === 'number' \|\| typeof prop === 'string') {\n classesToMerge.push(styles[`${classIdentifier}--${propName}-${prop}`])\n } else if (typeof prop === 'object') {\n for (const [key, value] of Object.entries(prop)) {\n classesToMerge.push(styles[`${classIdentifier}--${key}-${propName}-${value}`])\n }\n }\n return classesToMerge\n}\n\ntype ReturnOrderedChildrenProps = {\n order: Order \| ResponsiveOrder\n children: React.ReactNode\n currentBreakpointSize?: BreakpointSize\n}\n\nconst returnOrderedChildren = ({order, children, currentBreakpointSize}: ReturnOrderedChildrenProps) => {\n if (typeof order === 'string') {\n return order === 'default' ? children : React.Children.toArray(children).reverse()\n } else if (typeof order === 'object' && currentBreakpointSize) {\n // This handles setting the order based on breakpoints as you might expect via CSS\n const filledStyleOrder: ResponsiveOrder = {}\n let previousSize: Order = 'default'\n for (const size of Object.keys(BreakpointSize)) {\n const lowerCaseSize = size.toLocaleLowerCase()\n if (order[lowerCaseSize]) previousSize = order[lowerCaseSize]\n filledStyleOrder[lowerCaseSize] = order[lowerCaseSize] \|\| previousSize\n }\n return filledStyleOrder[currentBreakpointSize] === 'default' ? children : React.Children.toArray(children).reverse()\n } else {\n return children\n }\n}\n\nconst Item = ({\n className,\n columnStart,\n columnSpan = 12,\n rowStart,\n rowSpan = 2,\n flow = 'row',\n colorMode,\n visualAsBackground = false,\n order = 'default',\n bgColor = 'subtle',\n children,\n ...rest\n}: BentoItemProps) => {\n const {currentBreakpointSize} = useWindowSize()\n\n const validChildren = React.Children.toArray(children).reduce<ValidItemChildren>((acc, child) => {\n if (React.isValidElement<BentoVisualProps>(child) && child.type === Visual) {\n acc.push(child)\n }\n if (React.isValidElement<BentoContentProps>(child) && child.type === Content) {\n acc.push(child)\n }\n return acc\n }, [])\n\n const contentChildPadding =\n validChildren.find(\n (child): child is React.ReactElement<BentoContentProps> =>\n React.isValidElement<BentoContentProps>(child) && child.type === Content,\n )?.props.padding \|\| 'spacious'\n\n const bentoItemClassArray = [styles.Bento__Item, styles[`Bento__Item--bgColor-${bgColor}`]]\n\n bentoItemClassArray.push(\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-span', columnSpan),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-span', rowSpan),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-start', columnStart),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-start', rowStart),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'flow', flow),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'gap', contentChildPadding),\n )\n\n if (!visualAsBackground && React.Children.toArray(children).length >= 1) {\n if (flow === 'column') {\n bentoItemClassArray.push(styles['Bento-column-padding-override'])\n }\n if (flow === 'row') {\n bentoItemClassArray.push(styles['Bento-row-padding-override'])\n }\n }\n\n const colorModeProp = colorMode ? {'data-color-mode': colorMode} : {}\n\n const orderedChildren = returnOrderedChildren({order, children: validChildren, currentBreakpointSize})\n\n return (\n <div\n {...colorModeProp}\n className={clsx(\n ...bentoItemClassArray,\n (visualAsBackground \|\| React.Children.toArray(children).length === 1) &&\n styles[`Bento__Item--visual-as-background`],\n className,\n )}\n {...rest}\n >\n {orderedChildren}\n </div>\n )\n}\n\ntype BentoContentProps = {\n leadingVisual?: ReactElement<IconProps>\n padding?: Padding \| ResponsivePadding\n verticalAlign?: Align \| ResponsiveAlign\n horizontalAlign?: Exclude<Align, 'end'> \| Partial<Record<Size, Exclude<Align, 'end'>>>\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst Content = ({\n children,\n leadingVisual: LeadingVisual,\n padding = 'spacious',\n verticalAlign,\n horizontalAlign = 'start',\n className,\n ...rest\n}: BentoContentProps) => {\n const bentoContentClassArray = [styles.Bento__Content]\n bentoContentClassArray.push(\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'verticalAlign', verticalAlign),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'horizontalAlign', horizontalAlign),\n ...returnClassBasedOnResponsiveMap('Bento', 'padding', padding),\n )\n\n const memoizedChildren = useMemo(() => React.Children.toArray(children), [children])\n\n const HeadingChildren = memoizedChildren.filter(\n (child): child is React.ReactElement<BentoHeadingProps> =>\n React.isValidElement<BentoHeadingProps>(child) && child.type === _Heading,\n )\n\n const LabelChild = memoizedChildren.find(\n (child): child is React.ReactElement<LabelProps> => React.isValidElement<LabelProps>(child) && child.type === Label,\n )\n const TextChild = memoizedChildren.find(\n (child): child is React.ReactElement<TextProps> => React.isValidElement<TextProps>(child) && child.type === Text,\n )\n const LinkChild = memoizedChildren.find(\n (child): child is React.ReactElement<LinkProps> => React.isValidElement<LinkProps>(child) && child.type === Link,\n )\n\n const usesDeprecatedLabel = React.isValidElement<LabelProps>(LabelChild)\n\n if (usesDeprecatedLabel && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn('Bento.Content: standalone `Label` children are deprecated. Remove it or migrate from Bento.')\n }\n\n return (\n <div className={clsx(styles[`Bento-padding--${padding}`], ...bentoContentClassArray, className)} {...rest}>\n {React.isValidElement<IconProps>(LeadingVisual) &&\n React.cloneElement(LeadingVisual, {\n className: styles['Bento__Content-icon'],\n size: LeadingVisual.props.size \|\| 44,\n })}\n\n {usesDeprecatedLabel &&\n React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {\n className: clsx(styles['Bento__Content-label'], LabelChild.props.className),\n })}\n\n {HeadingChildren.map(HeadingChild =>\n React.cloneElement(HeadingChild, {\n className: clsx(\n !React.isValidElement(TextChild) && styles['Bento__heading--no-text'],\n horizontalAlign === 'center' && styles['Bento__heading--with-max-width'],\n HeadingChild.props.className,\n ),\n }),\n )}\n\n {React.isValidElement<TextProps>(TextChild) &&\n React.cloneElement(TextChild, {\n variant: TextChild.props.variant \|\| 'muted',\n as: TextChild.props.as \|\| 'p',\n size: TextChild.props.size \|\| '300',\n className: clsx(styles['Bento__Content-text'], TextChild.props.className),\n })}\n\n {React.isValidElement<LinkProps>(LinkChild) &&\n React.cloneElement(LinkChild, {\n variant: LinkChild.props.variant \|\| 'accent',\n className: clsx(styles['Bento__call-to-action'], LinkChild.props.className),\n })}\n </div>\n )\n}\n\ntype BentoHeadingProps = {\n variant?: 'default' \| 'muted'\n} & BaseProps<HTMLHeadingElement> &\n HeadingProps\n\nconst _Heading = forwardRef(\n (\n {\n as = 'h3',\n size = '5',\n weight = 'medium',\n variant = 'default',\n className,\n children,\n ...props\n }: PropsWithChildren<BentoHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const getConditionalVariant = useCallback(() => {\n if (findElementInChildren(children, 'b') \|\| findElementInChildren(children, 'em')) {\n return 'muted'\n }\n return 'default'\n }, [children])\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n return (\n <Heading\n ref={ref}\n className={clsx(\n defaultColor === 'muted' && styles[`Bento__heading--muted`],\n variant === 'muted' && styles[`Bento__heading--muted`],\n className,\n )}\n size={size}\n as={as}\n weight={weight}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype BentoVisualProps = {\n horizontalAlign?: Align\n verticalAlign?: Align\n fillMedia?: boolean\n overflow?: 'hidden' \| 'initial'\n position?: string\n padding?: Padding \| ResponsivePadding\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst Visual = ({\n horizontalAlign,\n verticalAlign,\n fillMedia = true,\n overflow = 'hidden',\n position = '50% 50%',\n padding,\n className,\n children,\n ...rest\n}: BentoVisualProps) => {\n const bentoVisualClassArray = [\n styles.Bento__Visual,\n horizontalAlign && styles[`Bento__Visual--horizontalAlign-${horizontalAlign}`],\n verticalAlign && styles[`Bento__Visual--verticalAlign-${verticalAlign}`],\n styles[`Bento__Visual--overflow-${overflow}`],\n ]\n bentoVisualClassArray.push(...returnClassBasedOnResponsiveMap('Bento', 'padding', padding))\n const childrenToRender = React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n if (React.isValidElement<React.ImgHTMLAttributes<HTMLImageElement>>(child) && child.type === 'img') {\n return React.cloneElement(child, {\n style: {...child.props.style, objectPosition: position},\n })\n }\n if (React.isValidElement<React.ComponentProps<typeof Image>>(child) && child.type === Image) {\n return React.cloneElement(child, {\n style: {...child.props.style, objectPosition: position},\n })\n }\n return child\n }\n return null\n })\n return (\n <div\n className={clsx(\n ...bentoVisualClassArray,\n fillMedia && styles['Bento__Visual--fill'],\n !fillMedia && styles['Bento__Visual--no-fill'],\n className,\n )}\n {...rest}\n >\n {childrenToRender}\n </div>\n )\n}\n\n/*\n Use Bento to present content in a responsive grid layout.\n * @deprecated Bento is deprecated and will be removed in a future release. Use CTABanner or River instead.\n * @see https://primer.style/brand/components/Bento\n */\nexport const Bento = Object.assign(Root, {Item, Visual, Content, Heading: _Heading})\n"],"mappings":"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"}

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

@@ -1,15 +1,16 @@
-import './Bento.module-4fhgWKyL.css';var e = {
-	Bento: "Primer_Brand__Bento-module__Bento____h548",
-	Bento__Item: "Primer_Brand__Bento-module__Bento__Item___SEy6_",
+import './Bento.module-4fhgWKyL.css';//#region src/Bento/Bento.module.css
+var e = "Primer_Brand__Bento-module__Bento____h548", t = "Primer_Brand__Bento-module__Bento__Item___SEy6_", n = "Primer_Brand__Bento-module__Bento__Content___MlfVL", r = "Primer_Brand__Bento-module__Bento__Visual___fl3ZX", i = {
+	Bento: e,
+	Bento__Item: t,
 	"Bento__Item--bgColor-default": "Primer_Brand__Bento-module__Bento__Item--bgColor-default___Cdofb",
 	"Bento__Item--bgColor-subtle": "Primer_Brand__Bento-module__Bento__Item--bgColor-subtle___nh7EW",
 	"Bento__Item--visual-as-background": "Primer_Brand__Bento-module__Bento__Item--visual-as-background___p6wEV",
-	Bento__Content: "Primer_Brand__Bento-module__Bento__Content___MlfVL",
+	Bento__Content: n,
 	"Bento__Content-icon": "Primer_Brand__Bento-module__Bento__Content-icon___QiNqz",
 	"Bento__heading--no-text": "Primer_Brand__Bento-module__Bento__heading--no-text___KZzv4",
 	"Bento__heading--muted": "Primer_Brand__Bento-module__Bento__heading--muted___fwZBT",
 	"Bento__heading--with-max-width": "Primer_Brand__Bento-module__Bento__heading--with-max-width___RbXVR",
-	Bento__Visual: "Primer_Brand__Bento-module__Bento__Visual___fl3ZX",
+	Bento__Visual: r,
 	"Bento__Visual--overflow-hidden": "Primer_Brand__Bento-module__Bento__Visual--overflow-hidden___Atzfs",
 	"Bento__Visual--overflow-initial": "Primer_Brand__Bento-module__Bento__Visual--overflow-initial___bC1dM",
 	"Bento__Visual--horizontalAlign-center": "Primer_Brand__Bento-module__Bento__Visual--horizontalAlign-center___WM3rk",
@@ -451,6 +452,6 @@ import './Bento.module-4fhgWKyL.css';var e = {
 	"Bento-row-padding-override": "Primer_Brand__Bento-module__Bento-row-padding-override___DXC_D"
 };
 //#endregion
-export { e as default };
+export { e as Bento, n as Bento__Content, t as Bento__Item, r as Bento__Visual, i as default };
 //# sourceMappingURL=Bento.module.js.map