npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1315 → 3.0.1316 - Mend

@cloudscape-design/components-themeable 3.0.1315 → 3.0.1316

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 (83) hide show

package/lib/internal/template/token/internal.d.ts CHANGED Viewed

@@ -1,9 +1,25 @@
+import React from 'react';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { TokenProps } from './interfaces';
-type InternalTokenProps = TokenProps & InternalBaseComponentProps & {
+type InternalTokenProps = Omit<TokenProps, 'label'> & InternalBaseComponentProps & {
+    /** Token label. Required unless `__customContent` replaces the option layout entirely. */
+    label?: React.ReactNode;
+    /**
+     * Overrides the default `role="group"` on the token root. Set to `"presentation"` when a
+     * parent element provides grouping semantics; this also strips ARIA attributes
+     * (aria-label, aria-labelledby, aria-disabled), focus/mouse handlers, and the tab stop so the
+     * token doesn't expose a redundant nested group to assistive tech.
+     */
     role?: string;
     disableInnerPadding?: boolean;
+    /** Extra class on the token-box element */
+    __tokenBoxClassName?: string;
+    /**
+     * Renders content inside the token-box, replacing the standard option layout
+     * (label, labelTag, description, tags). The dismiss button is still rendered as a sibling.
+     */
+    __customContent?: React.ReactNode;
 };
-declare function InternalToken({ label, ariaLabel, labelTag, description, variant, disabled, readOnly, icon, tags, dismissLabel, onDismiss, tooltipContent, role, disableInnerPadding, __internalRootRef, ...restProps }: InternalTokenProps): JSX.Element;
+declare function InternalToken({ label, ariaLabel, labelTag, description, variant, disabled, readOnly, icon, tags, dismissLabel, onDismiss, tooltipContent, role, disableInnerPadding, __tokenBoxClassName, __customContent, __internalRootRef, ...restProps }: InternalTokenProps): JSX.Element;
 export default InternalToken;
 //# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/token/internal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/token/internal.tsx"],"names":[],"mappings":"~~AAkBA~~,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQ1C,KAAK,kBAAkB,GAAG,UAAU,~~GAClC~~,0BAA0B,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAC;~~CAC/B~~,CAAC;AAEJ,iBAAS,aAAa,CAAC,EAErB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,OAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,cAAc,EAGd,IAAI,EACJ,mBAAmB,~~EAGnB~~,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,kBAAkB,~~eA2IpB~~;AAED,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/token/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAehD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQ1C,KAAK,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,GACjD,0BAA0B,GAAG;IAC3B,0FAA0F;IAC1F,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,2CAA2C;IAC3C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC,CAAC;AAEJ,iBAAS,aAAa,CAAC,EAErB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,OAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,cAAc,EAGd,IAAI,EACJ,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EAGf,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,kBAAkB,eAwJpB;AAED,eAAe,aAAa,CAAC"}

package/lib/internal/template/token/internal.js CHANGED Viewed

@@ -19,7 +19,7 @@ function InternalToken({
 // External
 label, ariaLabel, labelTag, description, variant = 'normal', disabled, readOnly, icon, tags, dismissLabel, onDismiss, tooltipContent,
 // Internal
-role, disableInnerPadding,
+role, disableInnerPadding, __tokenBoxClassName, __customContent,
 // Base
 __internalRootRef, ...restProps }) {
     const baseProps = getBaseProps(restProps);
@@ -30,6 +30,9 @@ __internalRootRef, ...restProps }) {
     const [isEllipsisActive, setIsEllipsisActive] = useState(false);
     const isInline = variant === 'inline';
     const isOneTheme = isThemeActive(Theme.OneTheme);
+    // Consumers with their own grouping semantics can pass role="presentation" to treat the root
+    // as a pure styling wrapper (strips ARIA and focus/mouse handlers).
+    const isPresentation = role === 'presentation';
     const ariaLabelledbyId = useUniqueId();
     const isLabelOverflowing = () => {
         const labelContent = labelRef.current;
@@ -77,17 +80,25 @@ __internalRootRef, ...restProps }) {
     // Use span for inline tokens (e.g. inside contentEditable) to avoid block-level elements breaking text flow.
     const SpanOrDivTag = isInline ? 'span' : 'div';
     return (React.createElement(TokenInlineContext.Provider, { value: { isInlineToken: isInline } },
-        React.createElement(SpanOrDivTag, { ...baseProps, ref: __internalRootRef, className: clsx(styles.root, legacyTestingStyles.token, testUtilStyles.root, !isInline ? styles['token-normal'] : styles['token-inline'], analyticsSelectors.token, baseProps.className), "aria-label": ariaLabel, "aria-labelledby": !ariaLabel ? ariaLabelledbyId : undefined, "aria-disabled": !!disabled, role: role !== null && role !== void 0 ? role : 'group', onFocus: () => {
-                setShowTooltip(true);
+        React.createElement(SpanOrDivTag, { ...baseProps, ref: __internalRootRef, className: clsx(styles.root, legacyTestingStyles.token, testUtilStyles.root, !isInline ? styles['token-normal'] : styles['token-inline'], analyticsSelectors.token, baseProps.className), "aria-label": isPresentation ? undefined : ariaLabel, "aria-labelledby": isPresentation || ariaLabel ? undefined : ariaLabelledbyId, "aria-disabled": isPresentation ? undefined : !!disabled, role: role !== null && role !== void 0 ? role : 'group', onFocus: () => {
+                if (!isPresentation) {
+                    setShowTooltip(true);
+                }
             }, onBlur: () => {
-                setShowTooltip(false);
+                if (!isPresentation) {
+                    setShowTooltip(false);
+                }
             }, onMouseEnter: () => {
-                setShowTooltip(true);
+                if (!isPresentation) {
+                    setShowTooltip(true);
+                }
             }, onMouseLeave: () => {
-                setShowTooltip(false);
-            }, tabIndex: !!tooltipContent && isInline && isEllipsisActive ? 0 : undefined },
-            React.createElement(SpanOrDivTag, { className: clsx(!isInline ? styles['token-box'] : styles['token-box-inline'], disabled && styles['token-box-disabled'], readOnly && styles['token-box-readonly'], !isInline && !onDismiss && styles['token-box-without-dismiss'], disableInnerPadding && styles['disable-padding']), style: tokenRootStyleProps },
-                React.createElement(Option, { className: clsx(isInline && styles['token-option-inline']), triggerVariant: isInline, option: buildOptionDefinition(), disableTitleTooltip: !!tooltipContent, labelContainerRef: labelContainerRef, labelRef: labelRef, labelId: ariaLabelledbyId }),
+                if (!isPresentation) {
+                    setShowTooltip(false);
+                }
+            }, tabIndex: !isPresentation && !!tooltipContent && isInline && isEllipsisActive ? 0 : undefined },
+            React.createElement(SpanOrDivTag, { className: clsx(!isInline ? styles['token-box'] : styles['token-box-inline'], disabled && styles['token-box-disabled'], readOnly && styles['token-box-readonly'], !isInline && !onDismiss && !__customContent && styles['token-box-without-dismiss'], disableInnerPadding && styles['disable-padding'], __tokenBoxClassName), style: tokenRootStyleProps },
+                React.createElement(Option, { className: clsx(isInline && styles['token-option-inline']), triggerVariant: isInline, option: buildOptionDefinition(), disableTitleTooltip: !!tooltipContent, labelContainerRef: labelContainerRef, labelRef: labelRef, labelId: ariaLabelledbyId, customContent: __customContent }),
                 onDismiss && (React.createElement(DismissButton, { disabled: disabled, dismissLabel: dismissLabel, onDismiss: onDismiss, readOnly: readOnly, inline: isInline }))),
             !!tooltipContent && isInline && isEllipsisActive && showTooltip && (React.createElement(Tooltip, { "data-testid": "token-tooltip", getTrack: () => labelContainerRef.current, content: React.createElement(LiveRegion, null,
                     React.createElement("span", { "data-testid": "tooltip-live-region-content" }, tooltipContent)), onEscape: () => {

package/lib/internal/template/token/internal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/token/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport {\n isThemeActive,\n Theme,\n useResizeObserver,\n useUniqueId,\n warnOnce,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport Option from '../internal/components/option';\nimport { TokenInlineContext } from '../internal/context/token-inline-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../live-region/internal';\nimport Tooltip from '../tooltip/internal.js';\nimport DismissButton from './dismiss-button';\nimport { TokenProps } from './interfaces';\nimport { getTokenRootStyles } from './styles';\n\nimport legacyTestingStyles from '../token-group/styles.css.js';\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ntype InternalTokenProps = TokenProps &\n InternalBaseComponentProps & {\n role?: string;\n disableInnerPadding?: boolean;\n };\n\nfunction InternalToken({\n // External\n label,\n ariaLabel,\n labelTag,\n description,\n variant = 'normal',\n disabled,\n readOnly,\n icon,\n tags,\n dismissLabel,\n onDismiss,\n tooltipContent,\n\n // Internal\n role,\n disableInnerPadding,\n\n // Base\n __internalRootRef,\n ...restProps\n}: InternalTokenProps) {\n const baseProps = getBaseProps(restProps);\n const tokenRootStyleProps = getTokenRootStyles(restProps.style);\n const labelContainerRef = useRef<HTMLSpanElement>(null);\n const labelRef = useRef<HTMLSpanElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const [isEllipsisActive, setIsEllipsisActive] = useState(false);\n const isInline = variant === 'inline';\n const isOneTheme = isThemeActive(Theme.OneTheme);\n const ariaLabelledbyId = useUniqueId();\n\n const isLabelOverflowing = () => {\n const labelContent = labelRef.current;\n const labelContainer = labelContainerRef.current;\n\n if (labelContent && labelContainer) {\n return labelContent.offsetWidth > labelContainer.offsetWidth;\n }\n };\n\n useResizeObserver(labelContainerRef, () => {\n if (isInline) {\n setIsEllipsisActive(isLabelOverflowing() ?? false);\n }\n });\n\n const sizedIcon = (iconNode: React.ReactNode) => {\n if (isInline && isOneTheme && React.isValidElement(iconNode) && iconNode.type === InternalIcon) {\n return React.cloneElement(iconNode, { size: 'x-small' });\n }\n return iconNode;\n };\n\n const buildOptionDefinition = () => {\n const isLabelStringOrNumber = typeof label === 'string' \|\| typeof label === 'number';\n const labelObject = isLabelStringOrNumber ? { label: String(label) } : { labelContent: label };\n\n if (isInline) {\n if (!isLabelStringOrNumber) {\n warnOnce('Label', `Only plain text (strings or numbers) are supported when variant=\"inline\".`);\n }\n\n return {\n ...labelObject,\n disabled,\n __customIcon: icon && <span className={clsx(styles.icon, styles['icon-inline'])}>{sizedIcon(icon)}</span>,\n };\n } else {\n return {\n ...labelObject,\n disabled,\n labelTag,\n description,\n tags,\n __customIcon: icon && <span className={styles.icon}>{sizedIcon(icon)}</span>,\n };\n }\n };\n\n // Use span for inline tokens (e.g. inside contentEditable) to avoid block-level elements breaking text flow.\n const SpanOrDivTag = isInline ? 'span' : 'div';\n\n return (\n <TokenInlineContext.Provider value={{ isInlineToken: isInline }}>\n <SpanOrDivTag\n {...baseProps}\n ref={__internalRootRef}\n className={clsx(\n styles.root,\n legacyTestingStyles.token,\n testUtilStyles.root,\n !isInline ? styles['token-normal'] : styles['token-inline'],\n analyticsSelectors.token,\n baseProps.className\n )}\n aria-label={ariaLabel}\n aria-labelledby={!ariaLabel ? ariaLabelledbyId : undefined}\n aria-disabled={!!disabled}\n role={role ?? 'group'}\n onFocus={() => {\n setShowTooltip(true);\n }}\n onBlur={() => {\n setShowTooltip(false);\n }}\n onMouseEnter={() => {\n setShowTooltip(true);\n }}\n onMouseLeave={() => {\n setShowTooltip(false);\n }}\n tabIndex={!!tooltipContent && isInline && isEllipsisActive ? 0 : undefined}\n >\n <SpanOrDivTag\n className={clsx(\n !isInline ? styles['token-box'] : styles['token-box-inline'],\n disabled && styles['token-box-disabled'],\n readOnly && styles['token-box-readonly'],\n !isInline && !onDismiss && styles['token-box-without-dismiss'],\n disableInnerPadding && styles['disable-padding']\n )}\n style={tokenRootStyleProps}\n >\n <Option\n className={clsx(isInline && styles['token-option-inline'])}\n triggerVariant={isInline}\n option={buildOptionDefinition()}\n disableTitleTooltip={!!tooltipContent}\n labelContainerRef={labelContainerRef}\n labelRef={labelRef}\n labelId={ariaLabelledbyId}\n />\n {onDismiss && (\n <DismissButton\n disabled={disabled}\n dismissLabel={dismissLabel}\n onDismiss={onDismiss}\n readOnly={readOnly}\n inline={isInline}\n />\n )}\n </SpanOrDivTag>\n {!!tooltipContent && isInline && isEllipsisActive && showTooltip && (\n <Tooltip\n data-testid=\"token-tooltip\"\n getTrack={() => labelContainerRef.current}\n content={\n <LiveRegion>\n <span data-testid=\"tooltip-live-region-content\">{tooltipContent}</span>\n </LiveRegion>\n }\n onEscape={() => {\n setShowTooltip(false);\n }}\n />\n )}\n </SpanOrDivTag>\n </TokenInlineContext.Provider>\n );\n}\n\nexport default InternalToken;\n"]}
1	+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/token/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport {\n isThemeActive,\n Theme,\n useResizeObserver,\n useUniqueId,\n warnOnce,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport Option from '../internal/components/option';\nimport { TokenInlineContext } from '../internal/context/token-inline-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../live-region/internal';\nimport Tooltip from '../tooltip/internal.js';\nimport DismissButton from './dismiss-button';\nimport { TokenProps } from './interfaces';\nimport { getTokenRootStyles } from './styles';\n\nimport legacyTestingStyles from '../token-group/styles.css.js';\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ntype InternalTokenProps = Omit<TokenProps, 'label'> &\n InternalBaseComponentProps & {\n /** Token label. Required unless `__customContent` replaces the option layout entirely. /\n label?: React.ReactNode;\n /\n Overrides the default `role=\"group\"` on the token root. Set to `\"presentation\"` when a\n * parent element provides grouping semantics; this also strips ARIA attributes\n * (aria-label, aria-labelledby, aria-disabled), focus/mouse handlers, and the tab stop so the\n * token doesn't expose a redundant nested group to assistive tech.\n /\n role?: string;\n disableInnerPadding?: boolean;\n /* Extra class on the token-box element /\n __tokenBoxClassName?: string;\n /\n Renders content inside the token-box, replacing the standard option layout\n * (label, labelTag, description, tags). The dismiss button is still rendered as a sibling.\n */\n __customContent?: React.ReactNode;\n };\n\nfunction InternalToken({\n // External\n label,\n ariaLabel,\n labelTag,\n description,\n variant = 'normal',\n disabled,\n readOnly,\n icon,\n tags,\n dismissLabel,\n onDismiss,\n tooltipContent,\n\n // Internal\n role,\n disableInnerPadding,\n __tokenBoxClassName,\n __customContent,\n\n // Base\n __internalRootRef,\n ...restProps\n}: InternalTokenProps) {\n const baseProps = getBaseProps(restProps);\n const tokenRootStyleProps = getTokenRootStyles(restProps.style);\n const labelContainerRef = useRef<HTMLSpanElement>(null);\n const labelRef = useRef<HTMLSpanElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const [isEllipsisActive, setIsEllipsisActive] = useState(false);\n const isInline = variant === 'inline';\n const isOneTheme = isThemeActive(Theme.OneTheme);\n // Consumers with their own grouping semantics can pass role=\"presentation\" to treat the root\n // as a pure styling wrapper (strips ARIA and focus/mouse handlers).\n const isPresentation = role === 'presentation';\n const ariaLabelledbyId = useUniqueId();\n\n const isLabelOverflowing = () => {\n const labelContent = labelRef.current;\n const labelContainer = labelContainerRef.current;\n\n if (labelContent && labelContainer) {\n return labelContent.offsetWidth > labelContainer.offsetWidth;\n }\n };\n\n useResizeObserver(labelContainerRef, () => {\n if (isInline) {\n setIsEllipsisActive(isLabelOverflowing() ?? false);\n }\n });\n\n const sizedIcon = (iconNode: React.ReactNode) => {\n if (isInline && isOneTheme && React.isValidElement(iconNode) && iconNode.type === InternalIcon) {\n return React.cloneElement(iconNode, { size: 'x-small' });\n }\n return iconNode;\n };\n\n const buildOptionDefinition = () => {\n const isLabelStringOrNumber = typeof label === 'string' \|\| typeof label === 'number';\n const labelObject = isLabelStringOrNumber ? { label: String(label) } : { labelContent: label };\n\n if (isInline) {\n if (!isLabelStringOrNumber) {\n warnOnce('Label', `Only plain text (strings or numbers) are supported when variant=\"inline\".`);\n }\n\n return {\n ...labelObject,\n disabled,\n __customIcon: icon && <span className={clsx(styles.icon, styles['icon-inline'])}>{sizedIcon(icon)}</span>,\n };\n } else {\n return {\n ...labelObject,\n disabled,\n labelTag,\n description,\n tags,\n __customIcon: icon && <span className={styles.icon}>{sizedIcon(icon)}</span>,\n };\n }\n };\n\n // Use span for inline tokens (e.g. inside contentEditable) to avoid block-level elements breaking text flow.\n const SpanOrDivTag = isInline ? 'span' : 'div';\n\n return (\n <TokenInlineContext.Provider value={{ isInlineToken: isInline }}>\n <SpanOrDivTag\n {...baseProps}\n ref={__internalRootRef}\n className={clsx(\n styles.root,\n legacyTestingStyles.token,\n testUtilStyles.root,\n !isInline ? styles['token-normal'] : styles['token-inline'],\n analyticsSelectors.token,\n baseProps.className\n )}\n aria-label={isPresentation ? undefined : ariaLabel}\n aria-labelledby={isPresentation \|\| ariaLabel ? undefined : ariaLabelledbyId}\n aria-disabled={isPresentation ? undefined : !!disabled}\n role={role ?? 'group'}\n onFocus={() => {\n if (!isPresentation) {\n setShowTooltip(true);\n }\n }}\n onBlur={() => {\n if (!isPresentation) {\n setShowTooltip(false);\n }\n }}\n onMouseEnter={() => {\n if (!isPresentation) {\n setShowTooltip(true);\n }\n }}\n onMouseLeave={() => {\n if (!isPresentation) {\n setShowTooltip(false);\n }\n }}\n tabIndex={!isPresentation && !!tooltipContent && isInline && isEllipsisActive ? 0 : undefined}\n >\n <SpanOrDivTag\n className={clsx(\n !isInline ? styles['token-box'] : styles['token-box-inline'],\n disabled && styles['token-box-disabled'],\n readOnly && styles['token-box-readonly'],\n !isInline && !onDismiss && !__customContent && styles['token-box-without-dismiss'],\n disableInnerPadding && styles['disable-padding'],\n __tokenBoxClassName\n )}\n style={tokenRootStyleProps}\n >\n <Option\n className={clsx(isInline && styles['token-option-inline'])}\n triggerVariant={isInline}\n option={buildOptionDefinition()}\n disableTitleTooltip={!!tooltipContent}\n labelContainerRef={labelContainerRef}\n labelRef={labelRef}\n labelId={ariaLabelledbyId}\n customContent={__customContent}\n />\n {onDismiss && (\n <DismissButton\n disabled={disabled}\n dismissLabel={dismissLabel}\n onDismiss={onDismiss}\n readOnly={readOnly}\n inline={isInline}\n />\n )}\n </SpanOrDivTag>\n {!!tooltipContent && isInline && isEllipsisActive && showTooltip && (\n <Tooltip\n data-testid=\"token-tooltip\"\n getTrack={() => labelContainerRef.current}\n content={\n <LiveRegion>\n <span data-testid=\"tooltip-live-region-content\">{tooltipContent}</span>\n </LiveRegion>\n }\n onEscape={() => {\n setShowTooltip(false);\n }}\n />\n )}\n </SpanOrDivTag>\n </TokenInlineContext.Provider>\n );\n}\n\nexport default InternalToken;\n"]}

package/lib/internal/template/top-navigation/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import { TopNavigationProps } from './interfaces';
 export { TopNavigationProps };
-export default function TopNavigation({ utilities, ...restProps }: TopNavigationProps): JSX.Element;
+export default function TopNavigation({ utilities, visualContext, ...restProps }: TopNavigationProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/top-navigation/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/top-navigation/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,~~EAAE~~,SAAc,~~EAAE~~,GAAG,SAAS,~~EAAE~~,EAAE,kBAAkB,~~eAGzF~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/top-navigation/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,SAAc,EACd,aAAgC,EAChC,GAAG,SAAS,EACb,EAAE,kBAAkB,eAKpB"}

package/lib/internal/template/top-navigation/index.js CHANGED Viewed

@@ -5,9 +5,9 @@ import React from 'react';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import InternalTopNavigation from './internal';
-export default function TopNavigation({ utilities = [], ...restProps }) {
+export default function TopNavigation({ utilities = [], visualContext = 'top-navigation', ...restProps }) {
     const baseComponentProps = useBaseComponent('TopNavigation');
-    return React.createElement(InternalTopNavigation, { ...baseComponentProps, utilities: utilities, ...restProps });
+    return (React.createElement(InternalTopNavigation, { ...baseComponentProps, utilities: utilities, visualContext: visualContext, ...restProps }));
 }
 applyDisplayName(TopNavigation, 'TopNavigation');
 //# sourceMappingURL=index.js.map

package/lib/internal/template/top-navigation/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/top-navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,qBAAqB,MAAM,YAAY,CAAC;AAI/C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,~~EAAE~~,SAAS,GAAG,EAAE,~~EAAE~~,GAAG,SAAS,~~EAAsB~~;~~IACxF~~,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAC7D,OAAO,oBAAC,qBAAqB,OAAK,kBAAkB,EAAE,SAAS,EAAE,SAAS,KAAM,SAAS,GAAI,CAAC;~~AAChG~~,CAAC;AAED,gBAAgB,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { TopNavigationProps } from './interfaces';\nimport InternalTopNavigation from './internal';\n\nexport { TopNavigationProps };\n\nexport default function TopNavigation({ utilities = [], ...restProps }: TopNavigationProps) {\n const baseComponentProps = useBaseComponent('TopNavigation');\n return <InternalTopNavigation {...baseComponentProps} utilities={utilities} {...restProps} ~~/>;\~~n}\n\napplyDisplayName(TopNavigation, 'TopNavigation');\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/top-navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,qBAAqB,MAAM,YAAY,CAAC;AAI/C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,SAAS,GAAG,EAAE,EACd,aAAa,GAAG,gBAAgB,EAChC,GAAG,SAAS,EACO;IACnB,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAC7D,OAAO,CACL,oBAAC,qBAAqB,OAAK,kBAAkB,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,KAAM,SAAS,GAAI,CACrH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { TopNavigationProps } from './interfaces';\nimport InternalTopNavigation from './internal';\n\nexport { TopNavigationProps };\n\nexport default function TopNavigation({\n utilities = [],\n visualContext = 'top-navigation',\n ...restProps\n}: TopNavigationProps) {\n const baseComponentProps = useBaseComponent('TopNavigation');\n return (\n <InternalTopNavigation {...baseComponentProps} utilities={utilities} visualContext={visualContext} {...restProps} />\n );\n}\n\napplyDisplayName(TopNavigation, 'TopNavigation');\n"]}

package/lib/internal/template/top-navigation/interfaces.d.ts CHANGED Viewed

@@ -12,7 +12,19 @@ export interface TopNavigationProps extends BaseComponentProps {
      * * `href` (string) - Specifies the `href` that the header links to.
      * * `onFollow` (() => void) - Specifies the event handler called when the identity is clicked without any modifier keys.
      */
-    identity: TopNavigationProps.Identity;
+    identity?: TopNavigationProps.Identity;
+    /**
+     * Specifies custom navigation content.
+     * When provided, replaces all structured content (identity, search, utilities are ignored).
+     * @displayname customContent
+     */
+    children?: React.ReactNode;
+    /**
+     * Visual context applied to the navigation bar.
+     * - "top-navigation": Applies the top-navigation visual context. The component maintains a dark appearance regardless of the page's light/dark mode setting. Child components automatically adapt their colors to work on this dark background.
+     * - "none": No visual context applied. The component and its children use the same colors as the rest of the page and respond to the global light/dark mode normally.
+     */
+    visualContext?: TopNavigationProps.VisualContext;
     /**
      * Use with an input or autosuggest control for a global search query.
      */
@@ -112,6 +124,7 @@ export declare namespace TopNavigationProps {
         overflowMenuTriggerText?: string;
         overflowMenuTitleText?: string;
     }
+    export type VisualContext = 'top-navigation' | 'none';
     export {};
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/top-navigation/interfaces.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/top-navigation/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D;;;;;;;OAOG;IACH,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,CAAC;~~IAEtC~~;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoCG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAEtD;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC;CAC9C;AAED,yBAAiB,kBAAkB,CAAC;IAClC,MAAM,WAAW,QAAQ;QACvB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,IAAI,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,sBAAsB,CAAC;KACnC;IAED,MAAM,WAAW,IAAI;QACnB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;KACd;IAED,UAAU,WAAW;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QAEnB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,sBAAsB,CAAC,EAAE,OAAO,CAAC;QACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B;IAED,MAAM,WAAW,mBAAoB,SAAQ,WAAW;QACtD,IAAI,EAAE,eAAe,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;QACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;QAC3B,WAAW,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;QAC3E,YAAY,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,MAAM,WAAW,aAAc,SAAQ,WAAW;QAChD,IAAI,EAAE,QAAQ,CAAC;QACf,OAAO,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC;QACpC,OAAO,CAAC,EAAE,sBAAsB,CAAC;QACjC,QAAQ,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAChC;IAED,MAAM,MAAM,OAAO,GAAG,mBAAmB,GAAG,aAAa,CAAC;IAE1D,MAAM,WAAW,WAAW;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,0BAA0B,CAAC,EAAE,MAAM,CAAC;QACpC,gCAAgC,CAAC,EAAE,MAAM,CAAC;QAC1C,6BAA6B,CAAC,EAAE,MAAM,CAAC;QACvC,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAChC;;~~CACF~~"}
1	+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/top-navigation/interfaces.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/top-navigation/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/top-navigation/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonProps } from '../button/interfaces';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { CancelableEventHandler } from '../internal/events';\n\nexport interface TopNavigationProps extends BaseComponentProps {\n /*\n Properties describing the product identity. They are as follows:\n \n * `title` (string) - Specifies the title text.\n * * `logo` ({ src: string, alt: string }) - Specifies the logo for the product. Use fixed width and height for SVG images to ensure proper rendering.\n * * `href` (string) - Specifies the `href` that the header links to.\n * * `onFollow` (() => void) - Specifies the event handler called when the identity is clicked without any modifier keys.\n /\n identity: TopNavigationProps.Identity;\n\n /\n Use with an input or autosuggest control for a global search query.\n /\n search?: React.ReactNode;\n\n /\n A list of utility navigation elements.\n * The supported utility types are: `button` and `menu-dropdown`.\n \n The following properties are supported across all utility types:\n \n * `type` (string) - The type of the utility. Can be `button` or `menu-dropdown`.\n * * `text` (string) - Specifies the text shown in the top navigation or the title inside the dropdown if no explicit `title` property is set.\n * * `title` (string) - The title displayed inside the dropdown.\n * * `iconName` (string) - The name of an existing icon to display next to the utility.\n * * `iconUrl` (string) - Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n * * `iconAlt` (string) - Specifies alternate text for a custom icon provided using `iconUrl`. We recommend that you provide this for accessibility.\n * * `iconSvg` (string) - Specifies the SVG of a custom icon.\n * * `ariaLabel` (string) - Adds `aria-label` to the button or dropdown trigger. This is recommended for accessibility if a text is not provided.\n * * `badge` (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n * * `disableTextCollapse` (boolean) - Prevents the utility text from being hidden on smaller screens.\n * * `disableUtilityCollapse` (boolean) - Prevents the utility from being moved to an overflow menu on smaller screens.\n \n ### button\n \n * `variant` ('primary-button' \| 'link') - The visual appearance of the button. The default value is 'link'.\n * * `href` (string) - Specifies the `href` for a link styled as a button.\n * * `target` (string) - Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`). This property only applies when an `href` is provided.\n * * `rel` (string) - Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`. If the `rel` property is provided, it overrides the default behavior.\n * * `external` (boolean) - Marks the link as external by adding an icon after the text. When clicked, the link opens in a new tab.\n * * `externalIconAriaLabel` (string) - Adds an `aria-label` for the external icon.\n * * `onClick` (() => void) - Specifies the event handler called when the utility is clicked.\n * * `onFollow` (() => void) - Specifies the event handler called when the utility is clicked without pressing modifier keys, and the utility has an `href` set.\n \n ### menu-dropdown\n \n * `description` (string) - The description displayed inside the dropdown.\n * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown).\n * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.\n * * `onItemFollow` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected without pressing modifier keys, and the item has an `href` set.\n * * `expandableGroups` (boolean) - Controls expandability of the item groups.\n /\n utilities?: ReadonlyArray<TopNavigationProps.Utility>;\n\n /\n An object containing all the localized strings required by the component.\n * @i18n\n */\n i18nStrings?: TopNavigationProps.I18nStrings;\n}\n\nexport namespace TopNavigationProps {\n export interface Identity {\n title?: string;\n logo?: Logo;\n href: string;\n onFollow?: CancelableEventHandler;\n }\n\n export interface Logo {\n src: string;\n alt?: string;\n }\n\n interface BaseUtility {\n text?: string;\n title?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconAlt?: string;\n iconSvg?: React.ReactNode;\n ariaLabel?: string;\n\n badge?: boolean;\n disableUtilityCollapse?: boolean;\n disableTextCollapse?: boolean;\n }\n\n export interface MenuDropdownUtility extends BaseUtility {\n type: 'menu-dropdown';\n description?: string;\n items: ButtonDropdownProps.Items;\n expandableGroups?: boolean;\n onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n }\n\n export interface ButtonUtility extends BaseUtility {\n type: 'button';\n variant?: 'primary-button' \| 'link';\n onClick?: CancelableEventHandler;\n onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n href?: string;\n target?: string;\n rel?: string;\n external?: boolean;\n externalIconAriaLabel?: string;\n }\n\n export type Utility = MenuDropdownUtility \| ButtonUtility;\n\n export interface I18nStrings {\n searchIconAriaLabel?: string;\n searchDismissIconAriaLabel?: string;\n overflowMenuDismissIconAriaLabel?: string;\n overflowMenuBackIconAriaLabel?: string;\n overflowMenuTriggerText?: string;\n overflowMenuTitleText?: string;\n }\n}\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/top-navigation/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonProps } from '../button/interfaces';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { CancelableEventHandler } from '../internal/events';\n\nexport interface TopNavigationProps extends BaseComponentProps {\n /*\n Properties describing the product identity. They are as follows:\n \n * `title` (string) - Specifies the title text.\n * * `logo` ({ src: string, alt: string }) - Specifies the logo for the product. Use fixed width and height for SVG images to ensure proper rendering.\n * * `href` (string) - Specifies the `href` that the header links to.\n * * `onFollow` (() => void) - Specifies the event handler called when the identity is clicked without any modifier keys.\n /\n identity?: TopNavigationProps.Identity;\n\n /\n Specifies custom navigation content.\n * When provided, replaces all structured content (identity, search, utilities are ignored).\n * @displayname customContent\n /\n children?: React.ReactNode;\n\n /\n Visual context applied to the navigation bar.\n * - \"top-navigation\": Applies the top-navigation visual context. The component maintains a dark appearance regardless of the page's light/dark mode setting. Child components automatically adapt their colors to work on this dark background.\n * - \"none\": No visual context applied. The component and its children use the same colors as the rest of the page and respond to the global light/dark mode normally.\n /\n visualContext?: TopNavigationProps.VisualContext;\n\n /\n Use with an input or autosuggest control for a global search query.\n /\n search?: React.ReactNode;\n\n /\n A list of utility navigation elements.\n * The supported utility types are: `button` and `menu-dropdown`.\n \n The following properties are supported across all utility types:\n \n * `type` (string) - The type of the utility. Can be `button` or `menu-dropdown`.\n * * `text` (string) - Specifies the text shown in the top navigation or the title inside the dropdown if no explicit `title` property is set.\n * * `title` (string) - The title displayed inside the dropdown.\n * * `iconName` (string) - The name of an existing icon to display next to the utility.\n * * `iconUrl` (string) - Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n * * `iconAlt` (string) - Specifies alternate text for a custom icon provided using `iconUrl`. We recommend that you provide this for accessibility.\n * * `iconSvg` (string) - Specifies the SVG of a custom icon.\n * * `ariaLabel` (string) - Adds `aria-label` to the button or dropdown trigger. This is recommended for accessibility if a text is not provided.\n * * `badge` (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n * * `disableTextCollapse` (boolean) - Prevents the utility text from being hidden on smaller screens.\n * * `disableUtilityCollapse` (boolean) - Prevents the utility from being moved to an overflow menu on smaller screens.\n \n ### button\n \n * `variant` ('primary-button' \| 'link') - The visual appearance of the button. The default value is 'link'.\n * * `href` (string) - Specifies the `href` for a link styled as a button.\n * * `target` (string) - Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`). This property only applies when an `href` is provided.\n * * `rel` (string) - Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`. If the `rel` property is provided, it overrides the default behavior.\n * * `external` (boolean) - Marks the link as external by adding an icon after the text. When clicked, the link opens in a new tab.\n * * `externalIconAriaLabel` (string) - Adds an `aria-label` for the external icon.\n * * `onClick` (() => void) - Specifies the event handler called when the utility is clicked.\n * * `onFollow` (() => void) - Specifies the event handler called when the utility is clicked without pressing modifier keys, and the utility has an `href` set.\n \n ### menu-dropdown\n \n * `description` (string) - The description displayed inside the dropdown.\n * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown).\n * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.\n * * `onItemFollow` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected without pressing modifier keys, and the item has an `href` set.\n * * `expandableGroups` (boolean) - Controls expandability of the item groups.\n /\n utilities?: ReadonlyArray<TopNavigationProps.Utility>;\n\n /\n An object containing all the localized strings required by the component.\n * @i18n\n */\n i18nStrings?: TopNavigationProps.I18nStrings;\n}\n\nexport namespace TopNavigationProps {\n export interface Identity {\n title?: string;\n logo?: Logo;\n href: string;\n onFollow?: CancelableEventHandler;\n }\n\n export interface Logo {\n src: string;\n alt?: string;\n }\n\n interface BaseUtility {\n text?: string;\n title?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconAlt?: string;\n iconSvg?: React.ReactNode;\n ariaLabel?: string;\n\n badge?: boolean;\n disableUtilityCollapse?: boolean;\n disableTextCollapse?: boolean;\n }\n\n export interface MenuDropdownUtility extends BaseUtility {\n type: 'menu-dropdown';\n description?: string;\n items: ButtonDropdownProps.Items;\n expandableGroups?: boolean;\n onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n }\n\n export interface ButtonUtility extends BaseUtility {\n type: 'button';\n variant?: 'primary-button' \| 'link';\n onClick?: CancelableEventHandler;\n onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n href?: string;\n target?: string;\n rel?: string;\n external?: boolean;\n externalIconAriaLabel?: string;\n }\n\n export type Utility = MenuDropdownUtility \| ButtonUtility;\n\n export interface I18nStrings {\n searchIconAriaLabel?: string;\n searchDismissIconAriaLabel?: string;\n overflowMenuDismissIconAriaLabel?: string;\n overflowMenuBackIconAriaLabel?: string;\n overflowMenuTriggerText?: string;\n overflowMenuTitleText?: string;\n }\n\n export type VisualContext = 'top-navigation' \| 'none';\n}\n"]}

package/lib/internal/template/top-navigation/internal.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { SomeRequired } from '../internal/types';
 import { TopNavigationProps } from './interfaces';
-type InternalTopNavigationProps = SomeRequired<TopNavigationProps, 'utilities'> & InternalBaseComponentProps;
-export default function InternalTopNavigation({ __internalRootRef, identity, i18nStrings, utilities, search, ...restProps }: InternalTopNavigationProps): JSX.Element;
+type InternalTopNavigationProps = SomeRequired<TopNavigationProps, 'utilities' | 'visualContext'> & InternalBaseComponentProps;
+export default function InternalTopNavigation({ __internalRootRef, children, visualContext, ...restProps }: InternalTopNavigationProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/top-navigation/internal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/top-navigation/internal.tsx"],"names":[],"mappings":"~~AAUA~~,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;~~AAOlD~~,KAAK,0BAA0B,GAAG,YAAY,CAAC,kBAAkB,EAAE,WAAW,CAAC,~~GAAG~~,0BAA0B,CAAC;~~AAE7G~~,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,iBAAiB,EACjB,QAAQ,EACR,~~WAAW~~,~~EACX~~,~~SAAS,EACT,MAAM,EACN,~~GAAG,SAAS,EACb,EAAE,0BAA0B,~~eA4N5B~~"}
1	+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/top-navigation/internal.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAQlD,KAAK,0BAA0B,GAAG,YAAY,CAAC,kBAAkB,EAAE,WAAW,GAAG,eAAe,CAAC,GAC/F,0BAA0B,CAAC;AAM7B,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,GAAG,SAAS,EACb,EAAE,0BAA0B,eAU5B"}

package/lib/internal/template/top-navigation/internal.js CHANGED Viewed

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
+import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
 import { ButtonTrigger } from '../internal/components/menu-dropdown';
@@ -13,8 +14,29 @@ import OverflowMenu from './parts/overflow-menu';
 import Utility from './parts/utility';
 import { useTopNavigation } from './use-top-navigation.js';
 import styles from './styles.css.js';
-export default function InternalTopNavigation({ __internalRootRef, identity, i18nStrings, utilities, search, ...restProps }) {
-    checkSafeUrl('TopNavigation', identity.href);
+import testUtilStyles from './test-classes/styles.css.js';
+function wrapWithVisualContext(content, visualContext) {
+    return visualContext === 'none' ? content : React.createElement(VisualContext, { contextName: visualContext }, content);
+}
+export default function InternalTopNavigation({ __internalRootRef, children, visualContext, ...restProps }) {
+    if (children !== undefined) {
+        return (React.createElement(CustomContentTopNavigation, { __internalRootRef: __internalRootRef, visualContext: visualContext, ...restProps }, children));
+    }
+    return React.createElement(StructuredTopNavigation, { __internalRootRef: __internalRootRef, visualContext: visualContext, ...restProps });
+}
+function CustomContentTopNavigation({ __internalRootRef, children, visualContext, ...restProps }) {
+    const baseProps = getBaseProps(restProps);
+    const { identity, search, utilities } = restProps;
+    if (identity || search || (utilities && utilities.length > 0)) {
+        warnOnce('TopNavigation', 'When children is set, the structured props (identity, search, and utilities) are ignored');
+    }
+    return (React.createElement("div", { ...baseProps, ref: __internalRootRef }, wrapWithVisualContext(React.createElement("header", { className: styles['top-navigation'] },
+        React.createElement("div", { className: testUtilStyles['custom-content'] }, children)), visualContext)));
+}
+function StructuredTopNavigation({ __internalRootRef, identity, i18nStrings, utilities, search, visualContext, ...restProps }) {
+    if (identity) {
+        checkSafeUrl('TopNavigation', identity.href);
+    }
     const baseProps = getBaseProps(restProps);
     const { mainRef, virtualRef, breakpoint, responsiveState, isSearchExpanded, onSearchUtilityClick } = useTopNavigation({ identity, search, utilities });
     const [overflowMenuOpen, setOverflowMenuOpen] = useState(false);
@@ -23,14 +45,6 @@ export default function InternalTopNavigation({ __internalRootRef, identity, i18
     const isMediumViewport = breakpoint === 'xxs';
     const isLargeViewport = breakpoint === 's';
     const i18n = useInternalI18n('top-navigation');
-    const onIdentityClick = (event) => {
-        if (isPlainLeftClick(event)) {
-            fireCancelableEvent(identity.onFollow, {}, event);
-        }
-    };
-    const toggleOverflowMenu = () => {
-        setOverflowMenuOpen(overflowMenuOpen => !overflowMenuOpen);
-    };
     const menuTriggerVisible = !isSearchExpanded && responsiveState.hideUtilities;
     useEffect(() => {
         setOverflowMenuOpen(false);
@@ -41,13 +55,20 @@ export default function InternalTopNavigation({ __internalRootRef, identity, i18
             (_a = overflowMenuTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [overflowMenuOpen]);
+    const onIdentityClick = (event) => {
+        if (isPlainLeftClick(event)) {
+            fireCancelableEvent(identity === null || identity === void 0 ? void 0 : identity.onFollow, {}, event);
+        }
+    };
+    const toggleOverflowMenu = () => {
+        setOverflowMenuOpen(overflowMenuOpen => !overflowMenuOpen);
+    };
     // Render the top nav twice; once as the top nav that users can see, and another
     // "virtual" top nav used just for calculations. The virtual top nav doesn't react to
     // layout changes and renders two sets of utilities: one with labels and one without.
     const content = (isVirtual) => {
-        var _a, _b;
         const Wrapper = isVirtual ? 'div' : 'header';
-        const showIdentity = isVirtual || !isSearchExpanded;
+        const showIdentity = !!identity && (isVirtual || !isSearchExpanded);
         const showTitle = isVirtual || !responsiveState.hideTitle;
         const showSearchSlot = search && (isVirtual || !responsiveState.hideSearch || isSearchExpanded);
         const showSearchUtility = isVirtual || (search && responsiveState.hideSearch);
@@ -60,9 +81,9 @@ export default function InternalTopNavigation({ __internalRootRef, identity, i18
                 [styles.medium]: isMediumViewport,
             }) },
             React.createElement("div", { className: styles['padding-box'] },
-                showIdentity && (React.createElement("div", { className: clsx(styles.identity, !identity.logo && styles['no-logo']) },
+                showIdentity && identity && (React.createElement("div", { className: clsx(styles.identity, !identity.logo && styles['no-logo']) },
                     React.createElement("a", { className: styles['identity-link'], href: identity.href, onClick: onIdentityClick },
-                        identity.logo && (React.createElement("img", { role: "img", src: (_a = identity.logo) === null || _a === void 0 ? void 0 : _a.src, alt: (_b = identity.logo) === null || _b === void 0 ? void 0 : _b.alt, className: clsx(styles.logo, {
+                        identity.logo && (React.createElement("img", { role: "img", src: identity.logo.src, alt: identity.logo.alt, className: clsx(styles.logo, {
                                 [styles.narrow]: isNarrowViewport,
                             }) })),
                         showTitle && React.createElement("span", { className: styles.title }, identity.title)))),
@@ -113,12 +134,12 @@ export default function InternalTopNavigation({ __internalRootRef, identity, i18
                         }), "data-utility-special": "menu-trigger" },
                         React.createElement(ButtonTrigger, { expanded: overflowMenuOpen, onClick: toggleOverflowMenu, offsetRight: "l", ref: !isVirtual ? overflowMenuTriggerRef : undefined }, i18n('i18nStrings.overflowMenuTriggerText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuTriggerText))))))));
     };
-    return (React.createElement("div", { ...baseProps, ref: __internalRootRef },
-        React.createElement(VisualContext, { contextName: "top-navigation" },
-            content(true),
-            content(false),
-            menuTriggerVisible && overflowMenuOpen && (React.createElement("div", { className: styles['overflow-menu-drawer'] },
-                React.createElement(OverflowMenu, { headerText: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuTitleText, dismissIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuDismissIconAriaLabel, backIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuBackIconAriaLabel, items: utilities.filter((utility, i) => (!responsiveState.hideUtilities || responsiveState.hideUtilities.indexOf(i) !== -1) &&
-                        !utility.disableUtilityCollapse), onClose: toggleOverflowMenu }))))));
+    const structuredContent = (React.createElement(React.Fragment, null,
+        content(true),
+        content(false),
+        menuTriggerVisible && overflowMenuOpen && (React.createElement("div", { className: styles['overflow-menu-drawer'] },
+            React.createElement(OverflowMenu, { headerText: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuTitleText, dismissIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuDismissIconAriaLabel, backIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuBackIconAriaLabel, items: utilities.filter((utility, i) => (!responsiveState.hideUtilities || responsiveState.hideUtilities.indexOf(i) !== -1) &&
+                    !utility.disableUtilityCollapse), onClose: toggleOverflowMenu })))));
+    return (React.createElement("div", { ...baseProps, ref: __internalRootRef }, wrapWithVisualContext(structuredContent, visualContext)));
 }
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/top-navigation/internal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/top-navigation/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,aAAa,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAE3E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAEhE,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,OAAO,MAAM,iBAAiB,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,iBAAiB,EACjB,QAAQ,EACR,WAAW,EACX,SAAS,EACT,MAAM,EACN,GAAG,SAAS,EACe;IAC3B,YAAY,CAAC,eAAe,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,GAAG,gBAAgB,CACnH,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAChC,CAAC;IACF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,sBAAsB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC/D,MAAM,gBAAgB,GAAG,UAAU,KAAK,SAAS,CAAC;IAClD,MAAM,gBAAgB,GAAG,UAAU,KAAK,KAAK,CAAC;IAC9C,MAAM,eAAe,GAAG,UAAU,KAAK,GAAG,CAAC;IAC3C,MAAM,IAAI,GAAG,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAE/C,MAAM,eAAe,GAAG,CAAC,KAAuB,EAAE,EAAE;QAClD,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC;YAC5B,mBAAmB,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC;QACpD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,gBAAgB,IAAI,eAAe,CAAC,aAAa,CAAC;IAE9E,SAAS,CAAC,GAAG,EAAE;QACb,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,iBAAiB,CAAC,GAAG,EAAE;;QACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,MAAA,sBAAsB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC1C,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,gFAAgF;IAChF,qFAAqF;IACrF,qFAAqF;IACrF,MAAM,OAAO,GAAG,CAAC,SAAkB,EAAE,EAAE;;QACrC,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC7C,MAAM,YAAY,GAAG,SAAS,IAAI,CAAC,gBAAgB,CAAC;QACpD,MAAM,SAAS,GAAG,SAAS,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC;QAC1D,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,SAAS,IAAI,CAAC,eAAe,CAAC,UAAU,IAAI,gBAAgB,CAAC,CAAC;QAChG,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,MAAM,IAAI,eAAe,CAAC,UAAU,CAAC,CAAC;QAC9E,MAAM,aAAa,GAAG,SAAS,IAAI,CAAC,gBAAgB,CAAC;QACrD,MAAM,eAAe,GAAG,SAAS,IAAI,kBAAkB,CAAC;QAExD,OAAO,CACL,oBAAC,OAAO,IACN,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,iBACxB,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACzC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE;gBACxC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS;gBAC3B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS;gBAC1B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,gBAAgB;gBACjC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,gBAAgB;aAClC,CAAC;YAEF,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC;gBAClC,YAAY,IAAI,CACf,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,IAAI,IAAI,MAAM,CAAC,SAAS,CAAC,CAAC;oBACxE,2BAAG,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,EAAE,eAAe;wBACjF,QAAQ,CAAC,IAAI,IAAI,CAChB,6BACE,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,MAAA,QAAQ,CAAC,IAAI,0CAAE,GAAG,EACvB,GAAG,EAAE,MAAA,QAAQ,CAAC,IAAI,0CAAE,GAAG,EACvB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;gCAC3B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,gBAAgB;6BAClC,CAAC,GACF,CACH;wBACA,SAAS,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,QAAQ,CAAC,KAAK,CAAQ,CAClE,CACA,CACP;gBAEA,cAAc,IAAI,CACjB,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;oBAC3B,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,SAAS,IAAI,gBAAgB,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC,IAC7F,MAAM,CACH,CACF,CACP;gBAED,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;oBAC7B,iBAAiB,IAAI,CACpB,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,iBAAiB,CAAC,EACzB,MAAM,CAAC,qBAAqB,CAAC,EAC7B,MAAM,CAAC,0BAA0B,CAAC,EAClC;4BACE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,gBAAgB;4BACjC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,gBAAgB;yBAClC,CACF,0BACoB,QAAQ;wBAE7B,oBAAC,OAAO,IACN,QAAQ,EAAE,IAAI,EACd,UAAU,EAAE;gCACV,IAAI,EAAE,QAAQ;gCACd,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;gCAC/C,SAAS,EAAE,gBAAgB;oCACzB,CAAC,CAAC,IAAI,CAAC,wCAAwC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,0BAA0B,CAAC;oCACzF,CAAC,CAAC,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC;gCAC7E,OAAO,EAAE,oBAAoB;6BAC9B,GACD,CACE,CACP;oBAEA,aAAa;wBACZ,SAAS;6BACN,MAAM,CACL,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,CACd,SAAS,IAAI,CAAC,eAAe,CAAC,aAAa,IAAI,eAAe,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACjG;6BACA,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;;4BAClB,MAAM,QAAQ,GAAG,CAAC,CAAC,eAAe,CAAC,eAAe,CAAC;4BACnD,MAAM,MAAM,GAAG,CAAC,SAAS,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;4BAC7E,MAAM,WAAW,GAAG,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;4BAEjF,OAAO,CACL,6BACE,GAAG,EAAE,CAAC,EACN,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,iBAAiB,CAAC,EACzB,MAAM,CAAC,gBAAgB,OAAO,CAAC,IAAI,EAAE,CAAC,EACtC,OAAO,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,uBAAuB,MAAA,OAAO,CAAC,OAAO,mCAAI,MAAM,EAAE,CAAC,EACvF;oCACE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,gBAAgB;oCACjC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,gBAAgB;iCAClC,CACF,wBACmB,CAAC,uBACF,GAAG,QAAQ,EAAE;gCAEhC,oBAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,GAAI,CAC1E,CACP,CAAC;wBACJ,CAAC,CAAC;oBAEL,SAAS;wBACR,SAAS,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;;4BAC3B,MAAM,QAAQ,GAAG,CAAC,eAAe,CAAC,eAAe,CAAC;4BAClD,MAAM,MAAM,GAAG,CAAC,eAAe,IAAI,CAAC,KAAK,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;4BAC9D,MAAM,WAAW,GAAG,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;4BAEjF,OAAO,CACL,6BACE,GAAG,EAAE,CAAC,EACN,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,iBAAiB,CAAC,EACzB,MAAM,CAAC,gBAAgB,OAAO,CAAC,IAAI,EAAE,CAAC,EACtC,OAAO,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,uBAAuB,MAAA,OAAO,CAAC,OAAO,mCAAI,MAAM,EAAE,CAAC,EACvF;oCACE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,gBAAgB;oCACjC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,gBAAgB;iCAClC,CACF,wBACmB,CAAC,uBACF,GAAG,QAAQ,EAAE;gCAEhC,oBAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,GAAI,CAC1E,CACP,CAAC;wBACJ,CAAC,CAAC;oBAEH,eAAe,IAAI,CAClB,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,4BAA4B,CAAC,EAAE;4BAC/E,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,gBAAgB;4BACjC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,gBAAgB;yBAClC,CAAC,0BACmB,cAAc;wBAEnC,oBAAC,aAAa,IACZ,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EAAE,kBAAkB,EAC3B,WAAW,EAAC,GAAG,EACf,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,SAAS,IAEnD,IAAI,CAAC,qCAAqC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,uBAAuB,CAAC,CACpE,CACZ,CACP,CACG,CACF,CACE,CACX,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,gCAAS,SAAS,EAAE,GAAG,EAAE,iBAAiB;QACxC,oBAAC,aAAa,IAAC,WAAW,EAAC,gBAAgB;YAExC,OAAO,CAAC,IAAI,CAAC;YAEb,OAAO,CAAC,KAAK,CAAC;YAEd,kBAAkB,IAAI,gBAAgB,IAAI,CACzC,6BAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;gBAC5C,oBAAC,YAAY,IACX,UAAU,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,qBAAqB,EAC9C,oBAAoB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gCAAgC,EACnE,iBAAiB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,6BAA6B,EAC7D,KAAK,EAAE,SAAS,CAAC,MAAM,CACrB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,CAAC,CAAC,eAAe,CAAC,aAAa,IAAI,eAAe,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;wBACnF,CAAC,OAAO,CAAC,sBAAsB,CAClC,EACD,OAAO,EAAE,kBAAkB,GAC3B,CACE,CACP,CACa,CACZ,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { ButtonTrigger } from '../internal/components/menu-dropdown';\nimport VisualContext from '../internal/components/visual-context';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\nimport { SomeRequired } from '../internal/types';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { TopNavigationProps } from './interfaces';\nimport OverflowMenu from './parts/overflow-menu';\nimport Utility from './parts/utility';\nimport { useTopNavigation } from './use-top-navigation.js';\n\nimport styles from './styles.css.js';\n\ntype InternalTopNavigationProps = SomeRequired<TopNavigationProps, 'utilities'> & InternalBaseComponentProps;\n\nexport default function InternalTopNavigation({\n __internalRootRef,\n identity,\n i18nStrings,\n utilities,\n search,\n ...restProps\n}: InternalTopNavigationProps) {\n checkSafeUrl('TopNavigation', identity.href);\n const baseProps = getBaseProps(restProps);\n const { mainRef, virtualRef, breakpoint, responsiveState, isSearchExpanded, onSearchUtilityClick } = useTopNavigation(\n { identity, search, utilities }\n );\n const [overflowMenuOpen, setOverflowMenuOpen] = useState(false);\n const overflowMenuTriggerRef = useRef<HTMLButtonElement>(null);\n const isNarrowViewport = breakpoint === 'default';\n const isMediumViewport = breakpoint === 'xxs';\n const isLargeViewport = breakpoint === 's';\n const i18n = useInternalI18n('top-navigation');\n\n const onIdentityClick = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireCancelableEvent(identity.onFollow, {}, event);\n }\n };\n\n const toggleOverflowMenu = () => {\n setOverflowMenuOpen(overflowMenuOpen => !overflowMenuOpen);\n };\n\n const menuTriggerVisible = !isSearchExpanded && responsiveState.hideUtilities;\n\n useEffect(() => {\n setOverflowMenuOpen(false);\n }, [menuTriggerVisible]);\n\n useEffectOnUpdate(() => {\n if (!overflowMenuOpen) {\n overflowMenuTriggerRef.current?.focus();\n }\n }, [overflowMenuOpen]);\n\n // Render the top nav twice; once as the top nav that users can see, and another\n // \"virtual\" top nav used just for calculations. The virtual top nav doesn't react to\n // layout changes and renders two sets of utilities: one with labels and one without.\n const content = (isVirtual: boolean) => {\n const Wrapper = isVirtual ? 'div' : 'header';\n const showIdentity = isVirtual \|\| !isSearchExpanded;\n const showTitle = isVirtual \|\| !responsiveState.hideTitle;\n const showSearchSlot = search && (isVirtual \|\| !responsiveState.hideSearch \|\| isSearchExpanded);\n const showSearchUtility = isVirtual \|\| (search && responsiveState.hideSearch);\n const showUtilities = isVirtual \|\| !isSearchExpanded;\n const showMenuTrigger = isVirtual \|\| menuTriggerVisible;\n\n return (\n <Wrapper\n ref={isVirtual ? virtualRef : mainRef}\n aria-hidden={isVirtual ? true : undefined}\n className={clsx(styles['top-navigation'], {\n [styles.virtual]: isVirtual,\n [styles.hidden]: isVirtual,\n [styles.narrow]: isNarrowViewport,\n [styles.medium]: isMediumViewport,\n })}\n >\n <div className={styles['padding-box']}>\n {showIdentity && (\n <div className={clsx(styles.identity, !identity.logo && styles['no-logo'])}>\n <a className={styles['identity-link']} href={identity.href} onClick={onIdentityClick}>\n {identity.logo && (\n <img\n role=\"img\"\n src={identity.logo?.src}\n alt={identity.logo?.alt}\n className={clsx(styles.logo, {\n [styles.narrow]: isNarrowViewport,\n })}\n />\n )}\n {showTitle && <span className={styles.title}>{identity.title}</span>}\n </a>\n </div>\n )}\n\n {showSearchSlot && (\n <div className={styles.inputs}>\n <div className={clsx(styles.search, !isVirtual && isSearchExpanded && styles['search-expanded'])}>\n {search}\n </div>\n </div>\n )}\n\n <div className={styles.utilities}>\n {showSearchUtility && (\n <div\n className={clsx(\n styles['utility-wrapper'],\n styles['utility-type-button'],\n styles['utility-type-button-link'],\n {\n [styles.narrow]: isNarrowViewport,\n [styles.medium]: isMediumViewport,\n }\n )}\n data-utility-special=\"search\"\n >\n <Utility\n hideText={true}\n definition={{\n type: 'button',\n iconName: isSearchExpanded ? 'close' : 'search',\n ariaLabel: isSearchExpanded\n ? i18n('i18nStrings.searchDismissIconAriaLabel', i18nStrings?.searchDismissIconAriaLabel)\n : i18n('i18nStrings.searchIconAriaLabel', i18nStrings?.searchIconAriaLabel),\n onClick: onSearchUtilityClick,\n }}\n />\n </div>\n )}\n\n {showUtilities &&\n utilities\n .filter(\n (_utility, i) =>\n isVirtual \|\| !responsiveState.hideUtilities \|\| responsiveState.hideUtilities.indexOf(i) === -1\n )\n .map((utility, i) => {\n const hideText = !!responsiveState.hideUtilityText;\n const isLast = (isVirtual \|\| !showMenuTrigger) && i === utilities.length - 1;\n const offsetRight = isLast && isLargeViewport ? 'xxl' : isLast ? 'l' : undefined;\n\n return (\n <div\n key={i}\n className={clsx(\n styles['utility-wrapper'],\n styles[`utility-type-${utility.type}`],\n utility.type === 'button' && styles[`utility-type-button-${utility.variant ?? 'link'}`],\n {\n [styles.narrow]: isNarrowViewport,\n [styles.medium]: isMediumViewport,\n }\n )}\n data-utility-index={i}\n data-utility-hide={`${hideText}`}\n >\n <Utility hideText={hideText} definition={utility} offsetRight={offsetRight} />\n </div>\n );\n })}\n\n {isVirtual &&\n utilities.map((utility, i) => {\n const hideText = !responsiveState.hideUtilityText;\n const isLast = !showMenuTrigger && i === utilities.length - 1;\n const offsetRight = isLast && isLargeViewport ? 'xxl' : isLast ? 'l' : undefined;\n\n return (\n <div\n key={i}\n className={clsx(\n styles['utility-wrapper'],\n styles[`utility-type-${utility.type}`],\n utility.type === 'button' && styles[`utility-type-button-${utility.variant ?? 'link'}`],\n {\n [styles.narrow]: isNarrowViewport,\n [styles.medium]: isMediumViewport,\n }\n )}\n data-utility-index={i}\n data-utility-hide={`${hideText}`}\n >\n <Utility hideText={hideText} definition={utility} offsetRight={offsetRight} />\n </div>\n );\n })}\n\n {showMenuTrigger && (\n <div\n className={clsx(styles['utility-wrapper'], styles['utility-type-menu-dropdown'], {\n [styles.narrow]: isNarrowViewport,\n [styles.medium]: isMediumViewport,\n })}\n data-utility-special=\"menu-trigger\"\n >\n <ButtonTrigger\n expanded={overflowMenuOpen}\n onClick={toggleOverflowMenu}\n offsetRight=\"l\"\n ref={!isVirtual ? overflowMenuTriggerRef : undefined}\n >\n {i18n('i18nStrings.overflowMenuTriggerText', i18nStrings?.overflowMenuTriggerText)}\n </ButtonTrigger>\n </div>\n )}\n </div>\n </div>\n </Wrapper>\n );\n };\n\n return (\n <div {...baseProps} ref={__internalRootRef}>\n <VisualContext contextName=\"top-navigation\">\n {/* Render virtual content first to ensure React refs for content will be assigned on the actual nodes. */}\n {content(true)}\n\n {content(false)}\n\n {menuTriggerVisible && overflowMenuOpen && (\n <div className={styles['overflow-menu-drawer']}>\n <OverflowMenu\n headerText={i18nStrings?.overflowMenuTitleText}\n dismissIconAriaLabel={i18nStrings?.overflowMenuDismissIconAriaLabel}\n backIconAriaLabel={i18nStrings?.overflowMenuBackIconAriaLabel}\n items={utilities.filter(\n (utility, i) =>\n (!responsiveState.hideUtilities \|\| responsiveState.hideUtilities.indexOf(i) !== -1) &&\n !utility.disableUtilityCollapse\n )}\n onClose={toggleOverflowMenu}\n />\n </div>\n )}\n </VisualContext>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/top-navigation/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { ButtonTrigger } from '../internal/components/menu-dropdown';\nimport VisualContext from '../internal/components/visual-context';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\nimport { SomeRequired } from '../internal/types';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { TopNavigationProps } from './interfaces';\nimport OverflowMenu from './parts/overflow-menu';\nimport Utility from './parts/utility';\nimport { useTopNavigation } from './use-top-navigation.js';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ntype InternalTopNavigationProps = SomeRequired<TopNavigationProps, 'utilities' \| 'visualContext'> &\n InternalBaseComponentProps;\n\nfunction wrapWithVisualContext(content: React.ReactNode, visualContext: TopNavigationProps.VisualContext) {\n return visualContext === 'none' ? content : <VisualContext contextName={visualContext}>{content}</VisualContext>;\n}\n\nexport default function InternalTopNavigation({\n __internalRootRef,\n children,\n visualContext,\n ...restProps\n}: InternalTopNavigationProps) {\n if (children !== undefined) {\n return (\n <CustomContentTopNavigation __internalRootRef={__internalRootRef} visualContext={visualContext} {...restProps}>\n {children}\n </CustomContentTopNavigation>\n );\n }\n\n return <StructuredTopNavigation __internalRootRef={__internalRootRef} visualContext={visualContext} {...restProps} />;\n}\n\nfunction CustomContentTopNavigation({\n __internalRootRef,\n children,\n visualContext,\n ...restProps\n}: InternalTopNavigationProps) {\n const baseProps = getBaseProps(restProps);\n\n const { identity, search, utilities } = restProps;\n if (identity \|\| search \|\| (utilities && utilities.length > 0)) {\n warnOnce(\n 'TopNavigation',\n 'When children is set, the structured props (identity, search, and utilities) are ignored'\n );\n }\n\n return (\n <div {...baseProps} ref={__internalRootRef}>\n {wrapWithVisualContext(\n <header className={styles['top-navigation']}>\n <div className={testUtilStyles['custom-content']}>{children}</div>\n </header>,\n visualContext\n )}\n </div>\n );\n}\n\ntype StructuredTopNavigationProps = Omit<InternalTopNavigationProps, 'children'>;\n\nfunction StructuredTopNavigation({\n __internalRootRef,\n identity,\n i18nStrings,\n utilities,\n search,\n visualContext,\n ...restProps\n}: StructuredTopNavigationProps) {\n if (identity) {\n checkSafeUrl('TopNavigation', identity.href);\n }\n const baseProps = getBaseProps(restProps);\n\n const { mainRef, virtualRef, breakpoint, responsiveState, isSearchExpanded, onSearchUtilityClick } = useTopNavigation(\n { identity, search, utilities }\n );\n const [overflowMenuOpen, setOverflowMenuOpen] = useState(false);\n const overflowMenuTriggerRef = useRef<HTMLButtonElement>(null);\n const isNarrowViewport = breakpoint === 'default';\n const isMediumViewport = breakpoint === 'xxs';\n const isLargeViewport = breakpoint === 's';\n const i18n = useInternalI18n('top-navigation');\n\n const menuTriggerVisible = !isSearchExpanded && responsiveState.hideUtilities;\n\n useEffect(() => {\n setOverflowMenuOpen(false);\n }, [menuTriggerVisible]);\n\n useEffectOnUpdate(() => {\n if (!overflowMenuOpen) {\n overflowMenuTriggerRef.current?.focus();\n }\n }, [overflowMenuOpen]);\n\n const onIdentityClick = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireCancelableEvent(identity?.onFollow, {}, event);\n }\n };\n\n const toggleOverflowMenu = () => {\n setOverflowMenuOpen(overflowMenuOpen => !overflowMenuOpen);\n };\n\n // Render the top nav twice; once as the top nav that users can see, and another\n // \"virtual\" top nav used just for calculations. The virtual top nav doesn't react to\n // layout changes and renders two sets of utilities: one with labels and one without.\n const content = (isVirtual: boolean) => {\n const Wrapper = isVirtual ? 'div' : 'header';\n const showIdentity = !!identity && (isVirtual \|\| !isSearchExpanded);\n const showTitle = isVirtual \|\| !responsiveState.hideTitle;\n const showSearchSlot = search && (isVirtual \|\| !responsiveState.hideSearch \|\| isSearchExpanded);\n const showSearchUtility = isVirtual \|\| (search && responsiveState.hideSearch);\n const showUtilities = isVirtual \|\| !isSearchExpanded;\n const showMenuTrigger = isVirtual \|\| menuTriggerVisible;\n\n return (\n <Wrapper\n ref={isVirtual ? virtualRef : mainRef}\n aria-hidden={isVirtual ? true : undefined}\n className={clsx(styles['top-navigation'], {\n [styles.virtual]: isVirtual,\n [styles.hidden]: isVirtual,\n [styles.narrow]: isNarrowViewport,\n [styles.medium]: isMediumViewport,\n })}\n >\n <div className={styles['padding-box']}>\n {showIdentity && identity && (\n <div className={clsx(styles.identity, !identity.logo && styles['no-logo'])}>\n <a className={styles['identity-link']} href={identity.href} onClick={onIdentityClick}>\n {identity.logo && (\n <img\n role=\"img\"\n src={identity.logo.src}\n alt={identity.logo.alt}\n className={clsx(styles.logo, {\n [styles.narrow]: isNarrowViewport,\n })}\n />\n )}\n {showTitle && <span className={styles.title}>{identity.title}</span>}\n </a>\n </div>\n )}\n\n {showSearchSlot && (\n <div className={styles.inputs}>\n <div className={clsx(styles.search, !isVirtual && isSearchExpanded && styles['search-expanded'])}>\n {search}\n </div>\n </div>\n )}\n\n <div className={styles.utilities}>\n {showSearchUtility && (\n <div\n className={clsx(\n styles['utility-wrapper'],\n styles['utility-type-button'],\n styles['utility-type-button-link'],\n {\n [styles.narrow]: isNarrowViewport,\n [styles.medium]: isMediumViewport,\n }\n )}\n data-utility-special=\"search\"\n >\n <Utility\n hideText={true}\n definition={{\n type: 'button',\n iconName: isSearchExpanded ? 'close' : 'search',\n ariaLabel: isSearchExpanded\n ? i18n('i18nStrings.searchDismissIconAriaLabel', i18nStrings?.searchDismissIconAriaLabel)\n : i18n('i18nStrings.searchIconAriaLabel', i18nStrings?.searchIconAriaLabel),\n onClick: onSearchUtilityClick,\n }}\n />\n </div>\n )}\n\n {showUtilities &&\n utilities\n .filter(\n (_utility, i) =>\n isVirtual \|\| !responsiveState.hideUtilities \|\| responsiveState.hideUtilities.indexOf(i) === -1\n )\n .map((utility, i) => {\n const hideText = !!responsiveState.hideUtilityText;\n const isLast = (isVirtual \|\| !showMenuTrigger) && i === utilities.length - 1;\n const offsetRight = isLast && isLargeViewport ? 'xxl' : isLast ? 'l' : undefined;\n\n return (\n <div\n key={i}\n className={clsx(\n styles['utility-wrapper'],\n styles[`utility-type-${utility.type}`],\n utility.type === 'button' && styles[`utility-type-button-${utility.variant ?? 'link'}`],\n {\n [styles.narrow]: isNarrowViewport,\n [styles.medium]: isMediumViewport,\n }\n )}\n data-utility-index={i}\n data-utility-hide={`${hideText}`}\n >\n <Utility hideText={hideText} definition={utility} offsetRight={offsetRight} />\n </div>\n );\n })}\n\n {isVirtual &&\n utilities.map((utility, i) => {\n const hideText = !responsiveState.hideUtilityText;\n const isLast = !showMenuTrigger && i === utilities.length - 1;\n const offsetRight = isLast && isLargeViewport ? 'xxl' : isLast ? 'l' : undefined;\n\n return (\n <div\n key={i}\n className={clsx(\n styles['utility-wrapper'],\n styles[`utility-type-${utility.type}`],\n utility.type === 'button' && styles[`utility-type-button-${utility.variant ?? 'link'}`],\n {\n [styles.narrow]: isNarrowViewport,\n [styles.medium]: isMediumViewport,\n }\n )}\n data-utility-index={i}\n data-utility-hide={`${hideText}`}\n >\n <Utility hideText={hideText} definition={utility} offsetRight={offsetRight} />\n </div>\n );\n })}\n\n {showMenuTrigger && (\n <div\n className={clsx(styles['utility-wrapper'], styles['utility-type-menu-dropdown'], {\n [styles.narrow]: isNarrowViewport,\n [styles.medium]: isMediumViewport,\n })}\n data-utility-special=\"menu-trigger\"\n >\n <ButtonTrigger\n expanded={overflowMenuOpen}\n onClick={toggleOverflowMenu}\n offsetRight=\"l\"\n ref={!isVirtual ? overflowMenuTriggerRef : undefined}\n >\n {i18n('i18nStrings.overflowMenuTriggerText', i18nStrings?.overflowMenuTriggerText)}\n </ButtonTrigger>\n </div>\n )}\n </div>\n </div>\n </Wrapper>\n );\n };\n\n const structuredContent = (\n <>\n {/* Render virtual content first to ensure React refs for content will be assigned on the actual nodes. */}\n {content(true)}\n\n {content(false)}\n\n {menuTriggerVisible && overflowMenuOpen && (\n <div className={styles['overflow-menu-drawer']}>\n <OverflowMenu\n headerText={i18nStrings?.overflowMenuTitleText}\n dismissIconAriaLabel={i18nStrings?.overflowMenuDismissIconAriaLabel}\n backIconAriaLabel={i18nStrings?.overflowMenuBackIconAriaLabel}\n items={utilities.filter(\n (utility, i) =>\n (!responsiveState.hideUtilities \|\| responsiveState.hideUtilities.indexOf(i) !== -1) &&\n !utility.disableUtilityCollapse\n )}\n onClose={toggleOverflowMenu}\n />\n </div>\n )}\n </>\n );\n\n return (\n <div {...baseProps} ref={__internalRootRef}>\n {wrapWithVisualContext(structuredContent, visualContext)}\n </div>\n );\n}\n"]}

package/lib/internal/template/top-navigation/test-classes/styles.css.js ADDED Viewed

@@ -0,0 +1,6 @@
+    import './styles.scoped.css';
+    export default {
+  "custom-content": "awsui_custom-content_1oq04_rbts3_5"
+};

package/lib/internal/template/top-navigation/test-classes/styles.scoped.css ADDED Viewed

@@ -0,0 +1,7 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_custom-content_1oq04_rbts3_5:not(#\9) {
+  /* used in test-utils */
+}

package/lib/internal/template/top-navigation/test-classes/styles.selectors.js ADDED Viewed

@@ -0,0 +1,7 @@
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "custom-content": "awsui_custom-content_1oq04_rbts3_5"
+};

package/lib/internal/template/top-navigation/use-top-navigation.d.ts CHANGED Viewed

@@ -32,6 +32,11 @@ interface UseTopNavigation {
     onSearchUtilityClick: () => void;
 }
 export declare function useTopNavigation({ identity, search, utilities }: UseTopNavigationParams): UseTopNavigation;
+/**
+ * Measures the width of an optional element, returning 0 when it is not rendered
+ * (e.g. there is no `identity`, `title` or `search`).
+ */
+export declare function getOptionalElementWidth(parent: Element, selector: string): number;
 /**
  * Generates the series of responsive steps that can be performed on the header in order.
  */

package/lib/internal/template/top-navigation/use-top-navigation.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-top-navigation.d.ts","sourceRoot":"","sources":["../../../src/top-navigation/use-top-navigation.ts"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAMjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACrC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;CACzD;AAED,UAAU,eAAe;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,8BAA8B;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB,EAAE,MAAM,EAAE,CAAC;IACjC,yBAAyB,EAAE,MAAM,EAAE,CAAC;IACpC,uBAAuB,EAAE,MAAM,CAAC;CACjC;AAED,UAAU,gBAAgB;IACxB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEtC,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,SAAS,GAAG,KAAK,GAAG,GAAG,CAAC;IACpC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAKD,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,sBAAsB,GAAG,gBAAgB,CA8G1G;AAYD;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,EACpD,aAAa,EAAE,OAAO,EACtB,YAAY,EAAE,OAAO,GACpB,aAAa,CAAC,eAAe,CAAC,CA+BhC;AAED;;;GAGG;AACH,wBAAgB,4BAA4B,CAC1C,cAAc,EAAE,aAAa,CAAC,eAAe,CAAC,EAC9C,KAAK,EAAE,8BAA8B,GACpC,eAAe,CA6BjB"}
1	+ {"version":3,"file":"use-top-navigation.d.ts","sourceRoot":"","sources":["../../../src/top-navigation/use-top-navigation.ts"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAMjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACrC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;CACzD;AAED,UAAU,eAAe;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,8BAA8B;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB,EAAE,MAAM,EAAE,CAAC;IACjC,yBAAyB,EAAE,MAAM,EAAE,CAAC;IACpC,uBAAuB,EAAE,MAAM,CAAC;CACjC;AAED,UAAU,gBAAgB;IACxB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEtC,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,SAAS,GAAG,KAAK,GAAG,GAAG,CAAC;IACpC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAKD,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,sBAAsB,GAAG,gBAAgB,CA8G1G;AAYD;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEjF;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,EACpD,aAAa,EAAE,OAAO,EACtB,YAAY,EAAE,OAAO,GACpB,aAAa,CAAC,eAAe,CAAC,CA+BhC;AAED;;;GAGG;AACH,wBAAgB,4BAA4B,CAC1C,cAAc,EAAE,aAAa,CAAC,eAAe,CAAC,EAC9C,KAAK,EAAE,8BAA8B,GACpC,eAAe,CA6BjB"}

package/lib/internal/template/top-navigation/use-top-navigation.js CHANGED Viewed

@@ -16,7 +16,7 @@ export function useTopNavigation({ identity, search, utilities }) {
     // The component works by calculating the possible resize states that it can
     // be in, and having a state variable to track which state we're currently in.
     const hasSearch = !!search;
-    const hasTitleWithLogo = identity && !!identity.logo && !!identity.title;
+    const hasTitleWithLogo = !!identity && !!identity.logo && !!identity.title;
     const responsiveStates = useMemo(() => {
         return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo);
     }, [utilities, hasSearch, hasTitleWithLogo]);
@@ -31,7 +31,6 @@ export function useTopNavigation({ identity, search, utilities }) {
     // spacing token values, icon sizes, text widths, etc.
     const [responsiveState, setResponsiveState] = useState();
     const recalculateFit = useCallback(() => {
-        var _a, _b, _c, _d;
         if (!(mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) || !virtualRef.current) {
             setResponsiveState(responsiveStates[0]);
             return;
@@ -47,9 +46,9 @@ export function useTopNavigation({ identity, search, utilities }) {
             hasSearch,
             availableWidth,
             // Get widths from the hidden top navigation
-            fullIdentityWidth: virtualRef.current.querySelector(`.${styles.identity}`).getBoundingClientRect().width,
-            titleWidth: (_b = (_a = virtualRef.current.querySelector(`.${styles.title}`)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0,
-            searchSlotWidth: (_d = (_c = virtualRef.current.querySelector(`.${styles.search}`)) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) !== null && _d !== void 0 ? _d : 0,
+            fullIdentityWidth: getOptionalElementWidth(virtualRef.current, `.${styles.identity}`),
+            titleWidth: getOptionalElementWidth(virtualRef.current, `.${styles.title}`),
+            searchSlotWidth: getOptionalElementWidth(virtualRef.current, `.${styles.search}`),
             searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special="search"]').getBoundingClientRect()
                 .width,
             utilitiesLeftPadding: parseFloat(getComputedStyle(virtualRef.current.querySelector(`.${styles.utilities}`)).paddingLeft || '0px'),
@@ -110,6 +109,14 @@ function getContentBoxWidth(element) {
     const style = getComputedStyle(element);
     return (parseFloat(style.width || '0px') - parseFloat(style.paddingLeft || '0px') - parseFloat(style.paddingRight || '0px'));
 }
+/**
+ * Measures the width of an optional element, returning 0 when it is not rendered
+ * (e.g. there is no `identity`, `title` or `search`).
+ */
+export function getOptionalElementWidth(parent, selector) {
+    var _a, _b;
+    return (_b = (_a = parent.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
+}
 /**
  * Generates the series of responsive steps that can be performed on the header in order.
  */