@cloudscape-design/components 3.0.1314 → 3.0.1316

package/file-token-group/file-token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-token.d.ts","sourceRoot":"","sources":["../../../src/file-token-group/file-token.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAIzE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAQ/D,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,WAAW;QAC1B,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;QACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;QACjD,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;KACjD;CACF;AAED,UAAU,cAAe,SAAQ,kBAAkB;IACjD,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,oBAAoB,EACpB,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,OAAO,EACP,KAAK,GACN,EAAE,cAAc,eA6IhB;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"file-token.d.ts","sourceRoot":"","sources":["../../../src/file-token-group/file-token.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAIzE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAQ/D,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,WAAW;QAC1B,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;QACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;QACjD,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;KACjD;CACF;AAED,UAAU,cAAe,SAAQ,kBAAkB;IACjD,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,oBAAoB,EACpB,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,OAAO,EACP,KAAK,GACN,EAAE,cAAc,eAuJhB;AAED,eAAe,iBAAiB,CAAC"}

package/file-token-group/file-token.js

@@ -7,7 +7,7 @@ import InternalBox from '../box/internal.js';
 import { FormFieldError, FormFieldWarning } from '../form-field/internal';
 import InternalSpaceBetween from '../space-between/internal.js';
 import InternalSpinner from '../spinner/internal.js';
-import DismissButton from '../token/dismiss-button.js';
+import InternalToken from '../token/internal.js';
 import Tooltip from '../tooltip/internal.js';
 import * as defaultFormatters from './default-formatters.js';
 import { FileOptionThumbnail } from './thumbnail.js';
@@ -25,10 +25,7 @@ function InternalFileToken({ file, showFileLastModified, showFileSize, showFileT
     const fileNameContainerRef = useRef(null);
     const [showTooltip, setShowTooltip] = useState(false);
     const [isTruncated, setIsTruncated] = useState(false);
-    const getDismissLabel = (fileIndex) => {
-        var _a;
-        return (_a = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.removeFileAriaLabel) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, fileIndex, file.name);
-    };
+    const getDismissLabel = (fileIndex) => { var _a; return (_a = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.removeFileAriaLabel) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, fileIndex, file.name); };
     function isEllipsisActive() {
         const span = fileNameRef.current;
         const container = fileNameContainerRef.current;
@@ -39,36 +36,45 @@ function InternalFileToken({ file, showFileLastModified, showFileSize, showFileT
     }
     useResizeObserver(() => fileNameContainerRef.current, () => setIsTruncated(isEllipsisActive()));
     const fileIsSingleRow = !showFileLastModified && !showFileSize && (!groupContainsImage || (groupContainsImage && !showFileThumbnail));
+    // The full body of the token. Rendered through InternalToken's customContent slot so this
+    // component owns the inner layout (thumbnail + metadata column + loading overlay), while
+    // InternalToken handles the token-box and the dismiss button.
+    const fileContent = (React.createElement(React.Fragment, null,
+        loading && (React.createElement("div", { className: clsx(styles['file-loading-overlay'], {
+                [styles['file-loading-overlay-single-row']]: loading && fileIsSingleRow,
+            }) },
+            React.createElement(InternalSpinner, { variant: "normal", size: "normal" }))),
+        React.createElement(InternalBox, { className: styles['file-option'] },
+            showFileThumbnail && isImage && React.createElement(FileOptionThumbnail, { file: file }),
+            React.createElement("div", { className: clsx(styles['file-option-metadata'], {
+                    [styles['with-image']]: showFileThumbnail && isImage,
+                    [styles['single-row-loading']]: loading && fileIsSingleRow,
+                }) },
+                React.createElement(InternalSpaceBetween, { direction: "vertical", size: "xxxs" },
+                    React.createElement("div", { className: styles['file-name-container'], onMouseOver: () => setShowTooltip(true), onMouseOut: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), role: isTruncated ? 'button' : undefined, "aria-expanded": isTruncated ? showTooltip : undefined, tabIndex: isTruncated ? 0 : -1, ref: fileNameContainerRef },
+                        React.createElement(InternalBox, { fontWeight: "normal", className: clsx(styles['file-option-name'], testUtilStyles['file-option-name'], {
+                                [testUtilStyles['ellipsis-active']]: isTruncated,
+                            }) },
+                            React.createElement("span", { ref: fileNameRef }, file.name))),
+                    showFileSize && file.size ? (React.createElement(InternalBox, { fontSize: "body-s", color: 'text-body-secondary', className: clsx(styles['file-option-size'], testUtilStyles['file-option-size']) }, formatFileSize(file.size))) : null,
+                    showFileLastModified && file.lastModified ? (React.createElement(InternalBox, { fontSize: "body-s", color: 'text-body-secondary', className: clsx(styles['file-option-last-modified'], testUtilStyles['file-option-last-modified']) }, formatFileLastModified(new Date(file.lastModified)))) : null)))));
     return (React.createElement("div", { ref: containerRef, className: clsx(styles.token, {
             [styles['token-grid']]: alignment === 'horizontal',
             [styles['token-contains-image']]: groupContainsImage && showFileThumbnail,
-        }), role: "group", "aria-label": file.name, "aria-describedby": errorText ? errorId : warningText ? warningId : undefined, "aria-disabled": loading, "data-index": index },
-        React.createElement("div", { className: clsx(styles['token-box'], {
+        }), role: "group", "aria-label": file.name, "aria-describedby": errorText ? errorId : warningText ? warningId : undefined, "aria-disabled": loading || undefined, "data-index": index },
+        React.createElement(InternalToken
+        // The outer wrapper above is the accessibility group (role="group" + aria-label). The
+        // token itself is presentation-only so screen readers don't see two nested groups.
+        , { 
+            // The outer wrapper above is the accessibility group (role="group" + aria-label). The
+            // token itself is presentation-only so screen readers don't see two nested groups.
+            role: "presentation", __customContent: fileContent, onDismiss: readOnly ? undefined : onDismiss, dismissLabel: getDismissLabel(index), __tokenBoxClassName: clsx(styles['token-box'], {
                 [styles.loading]: loading,
                 [styles.error]: errorText,
                 [styles.warning]: showWarning,
                 [styles.horizontal]: alignment === 'horizontal',
                 [styles['read-only']]: readOnly,
-            }) },
-            loading && (React.createElement("div", { className: clsx(styles['file-loading-overlay'], {
-                    [styles['file-loading-overlay-single-row']]: loading && fileIsSingleRow,
-                }) },
-                React.createElement(InternalSpinner, { variant: "normal", size: "normal" }))),
-            React.createElement(InternalBox, { className: styles['file-option'] },
-                showFileThumbnail && isImage && React.createElement(FileOptionThumbnail, { file: file }),
-                React.createElement("div", { className: clsx(styles['file-option-metadata'], {
-                        [styles['with-image']]: showFileThumbnail && isImage,
-                        [styles['single-row-loading']]: loading && fileIsSingleRow,
-                    }) },
-                    React.createElement(InternalSpaceBetween, { direction: "vertical", size: "xxxs" },
-                        React.createElement("div", { className: styles['file-name-container'], onMouseOver: () => setShowTooltip(true), onMouseOut: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), role: isTruncated ? 'button' : undefined, "aria-expanded": isTruncated ? showTooltip : undefined, tabIndex: isTruncated ? 0 : -1, ref: fileNameContainerRef },
-                            React.createElement(InternalBox, { fontWeight: "normal", className: clsx(styles['file-option-name'], testUtilStyles['file-option-name'], {
-                                    [testUtilStyles['ellipsis-active']]: isTruncated,
-                                }) },
-                                React.createElement("span", { ref: fileNameRef }, file.name))),
-                        showFileSize && file.size ? (React.createElement(InternalBox, { fontSize: "body-s", color: 'text-body-secondary', className: clsx(styles['file-option-size'], testUtilStyles['file-option-size']) }, formatFileSize(file.size))) : null,
-                        showFileLastModified && file.lastModified ? (React.createElement(InternalBox, { fontSize: "body-s", color: 'text-body-secondary', className: clsx(styles['file-option-last-modified'], testUtilStyles['file-option-last-modified']) }, formatFileLastModified(new Date(file.lastModified)))) : null))),
-            onDismiss && !readOnly && React.createElement(DismissButton, { dismissLabel: getDismissLabel(index), onDismiss: onDismiss })),
+            }) }),
         errorText && (React.createElement(FormFieldError, { id: errorId, errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel }, errorText)),
         showWarning && (React.createElement(FormFieldWarning, { id: warningId, warningIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.warningIconAriaLabel }, warningText)),
         showTooltip && isTruncated && (React.createElement(Tooltip, { getTrack: () => containerRef.current, content: React.createElement(InternalBox, { fontWeight: "normal" }, file.name), onEscape: () => setShowTooltip(false) }))));

package/file-token-group/file-token.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-token.js","sourceRoot":"","sources":["../../../src/file-token-group/file-token.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 { useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal.js';\nimport { FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { BaseComponentProps } from '../internal/base-component/index.js';\nimport InternalSpaceBetween from '../space-between/internal.js';\nimport InternalSpinner from '../spinner/internal.js';\nimport DismissButton from '../token/dismiss-button.js';\nimport { TokenGroupProps } from '../token-group/interfaces.js';\nimport Tooltip from '../tooltip/internal.js';\nimport * as defaultFormatters from './default-formatters.js';\nimport { FileOptionThumbnail } from './thumbnail.js';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport namespace FileTokenProps {\n  export interface I18nStrings {\n    removeFileAriaLabel?: (fileIndex: number, fileName: string) => string;\n    errorIconAriaLabel?: string;\n    warningIconAriaLabel?: string;\n    formatFileSize?: (sizeInBytes: number) => string;\n    formatFileLastModified?: (date: Date) => string;\n  }\n}\n\ninterface FileTokenProps extends BaseComponentProps {\n  file: File;\n  onDismiss: () => void;\n  showFileSize?: boolean;\n  showFileLastModified?: boolean;\n  showFileThumbnail?: boolean;\n  errorText?: React.ReactNode;\n  warningText?: React.ReactNode;\n  loading?: boolean;\n  readOnly?: boolean;\n  i18nStrings?: FileTokenProps.I18nStrings;\n  dismissLabel?: string;\n  alignment?: TokenGroupProps.Alignment;\n  groupContainsImage?: boolean;\n  isImage: boolean;\n  index: number;\n}\n\nfunction InternalFileToken({\n  file,\n  showFileLastModified,\n  showFileSize,\n  showFileThumbnail,\n  i18nStrings,\n  onDismiss,\n  errorText,\n  warningText,\n  readOnly,\n  loading,\n  alignment,\n  groupContainsImage,\n  isImage,\n  index,\n}: FileTokenProps) {\n  const formatFileSize = i18nStrings?.formatFileSize ?? defaultFormatters.formatFileSize;\n  const formatFileLastModified = i18nStrings?.formatFileLastModified ?? defaultFormatters.formatFileLastModified;\n\n  const errorId = useUniqueId('error');\n  const warningId = useUniqueId('warning');\n\n  const showWarning = warningText && !errorText;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const fileNameRef = useRef<HTMLSpanElement>(null);\n  const fileNameContainerRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [isTruncated, setIsTruncated] = useState(false);\n\n  const getDismissLabel = (fileIndex: number) => {\n    return i18nStrings?.removeFileAriaLabel?.(fileIndex, file.name);\n  };\n\n  function isEllipsisActive() {\n    const span = fileNameRef.current;\n    const container = fileNameContainerRef.current;\n\n    if (span && container) {\n      return span.offsetWidth >= container.offsetWidth;\n    }\n    return false;\n  }\n\n  useResizeObserver(\n    () => fileNameContainerRef.current,\n    () => setIsTruncated(isEllipsisActive())\n  );\n\n  const fileIsSingleRow =\n    !showFileLastModified && !showFileSize && (!groupContainsImage || (groupContainsImage && !showFileThumbnail));\n\n  return (\n    <div\n      ref={containerRef}\n      className={clsx(styles.token, {\n        [styles['token-grid']]: alignment === 'horizontal',\n        [styles['token-contains-image']]: groupContainsImage && showFileThumbnail,\n      })}\n      role=\"group\"\n      aria-label={file.name}\n      aria-describedby={errorText ? errorId : warningText ? warningId : undefined}\n      aria-disabled={loading}\n      data-index={index}\n    >\n      <div\n        className={clsx(styles['token-box'], {\n          [styles.loading]: loading,\n          [styles.error]: errorText,\n          [styles.warning]: showWarning,\n          [styles.horizontal]: alignment === 'horizontal',\n          [styles['read-only']]: readOnly,\n        })}\n      >\n        {loading && (\n          <div\n            className={clsx(styles['file-loading-overlay'], {\n              [styles['file-loading-overlay-single-row']]: loading && fileIsSingleRow,\n            })}\n          >\n            <InternalSpinner variant=\"normal\" size=\"normal\" />\n          </div>\n        )}\n        <InternalBox className={styles['file-option']}>\n          {showFileThumbnail && isImage && <FileOptionThumbnail file={file} />}\n\n          <div\n            className={clsx(styles['file-option-metadata'], {\n              [styles['with-image']]: showFileThumbnail && isImage,\n              [styles['single-row-loading']]: loading && fileIsSingleRow,\n            })}\n          >\n            <InternalSpaceBetween direction=\"vertical\" size=\"xxxs\">\n              <div\n                className={styles['file-name-container']}\n                onMouseOver={() => setShowTooltip(true)}\n                onMouseOut={() => setShowTooltip(false)}\n                onFocus={() => setShowTooltip(true)}\n                onBlur={() => setShowTooltip(false)}\n                role={isTruncated ? 'button' : undefined}\n                aria-expanded={isTruncated ? showTooltip : undefined}\n                tabIndex={isTruncated ? 0 : -1}\n                ref={fileNameContainerRef}\n              >\n                <InternalBox\n                  fontWeight=\"normal\"\n                  className={clsx(styles['file-option-name'], testUtilStyles['file-option-name'], {\n                    [testUtilStyles['ellipsis-active']]: isTruncated,\n                  })}\n                >\n                  <span ref={fileNameRef}>{file.name}</span>\n                </InternalBox>\n              </div>\n\n              {showFileSize && file.size ? (\n                <InternalBox\n                  fontSize=\"body-s\"\n                  color={'text-body-secondary'}\n                  className={clsx(styles['file-option-size'], testUtilStyles['file-option-size'])}\n                >\n                  {formatFileSize(file.size)}\n                </InternalBox>\n              ) : null}\n\n              {showFileLastModified && file.lastModified ? (\n                <InternalBox\n                  fontSize=\"body-s\"\n                  color={'text-body-secondary'}\n                  className={clsx(styles['file-option-last-modified'], testUtilStyles['file-option-last-modified'])}\n                >\n                  {formatFileLastModified(new Date(file.lastModified))}\n                </InternalBox>\n              ) : null}\n            </InternalSpaceBetween>\n          </div>\n        </InternalBox>\n        {onDismiss && !readOnly && <DismissButton dismissLabel={getDismissLabel(index)} onDismiss={onDismiss} />}\n      </div>\n      {errorText && (\n        <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n          {errorText}\n        </FormFieldError>\n      )}\n      {showWarning && (\n        <FormFieldWarning id={warningId} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n          {warningText}\n        </FormFieldWarning>\n      )}\n      {showTooltip && isTruncated && (\n        <Tooltip\n          getTrack={() => containerRef.current}\n          content={<InternalBox fontWeight=\"normal\">{file.name}</InternalBox>}\n          onEscape={() => setShowTooltip(false)}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default InternalFileToken;\n"]}
+{"version":3,"file":"file-token.js","sourceRoot":"","sources":["../../../src/file-token-group/file-token.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 { useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal.js';\nimport { FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { BaseComponentProps } from '../internal/base-component/index.js';\nimport InternalSpaceBetween from '../space-between/internal.js';\nimport InternalSpinner from '../spinner/internal.js';\nimport InternalToken from '../token/internal.js';\nimport { TokenGroupProps } from '../token-group/interfaces.js';\nimport Tooltip from '../tooltip/internal.js';\nimport * as defaultFormatters from './default-formatters.js';\nimport { FileOptionThumbnail } from './thumbnail.js';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport namespace FileTokenProps {\n  export interface I18nStrings {\n    removeFileAriaLabel?: (fileIndex: number, fileName: string) => string;\n    errorIconAriaLabel?: string;\n    warningIconAriaLabel?: string;\n    formatFileSize?: (sizeInBytes: number) => string;\n    formatFileLastModified?: (date: Date) => string;\n  }\n}\n\ninterface FileTokenProps extends BaseComponentProps {\n  file: File;\n  onDismiss: () => void;\n  showFileSize?: boolean;\n  showFileLastModified?: boolean;\n  showFileThumbnail?: boolean;\n  errorText?: React.ReactNode;\n  warningText?: React.ReactNode;\n  loading?: boolean;\n  readOnly?: boolean;\n  i18nStrings?: FileTokenProps.I18nStrings;\n  dismissLabel?: string;\n  alignment?: TokenGroupProps.Alignment;\n  groupContainsImage?: boolean;\n  isImage: boolean;\n  index: number;\n}\n\nfunction InternalFileToken({\n  file,\n  showFileLastModified,\n  showFileSize,\n  showFileThumbnail,\n  i18nStrings,\n  onDismiss,\n  errorText,\n  warningText,\n  readOnly,\n  loading,\n  alignment,\n  groupContainsImage,\n  isImage,\n  index,\n}: FileTokenProps) {\n  const formatFileSize = i18nStrings?.formatFileSize ?? defaultFormatters.formatFileSize;\n  const formatFileLastModified = i18nStrings?.formatFileLastModified ?? defaultFormatters.formatFileLastModified;\n\n  const errorId = useUniqueId('error');\n  const warningId = useUniqueId('warning');\n\n  const showWarning = warningText && !errorText;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const fileNameRef = useRef<HTMLSpanElement>(null);\n  const fileNameContainerRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [isTruncated, setIsTruncated] = useState(false);\n\n  const getDismissLabel = (fileIndex: number) => i18nStrings?.removeFileAriaLabel?.(fileIndex, file.name);\n\n  function isEllipsisActive() {\n    const span = fileNameRef.current;\n    const container = fileNameContainerRef.current;\n\n    if (span && container) {\n      return span.offsetWidth >= container.offsetWidth;\n    }\n    return false;\n  }\n\n  useResizeObserver(\n    () => fileNameContainerRef.current,\n    () => setIsTruncated(isEllipsisActive())\n  );\n\n  const fileIsSingleRow =\n    !showFileLastModified && !showFileSize && (!groupContainsImage || (groupContainsImage && !showFileThumbnail));\n\n  // The full body of the token. Rendered through InternalToken's customContent slot so this\n  // component owns the inner layout (thumbnail + metadata column + loading overlay), while\n  // InternalToken handles the token-box and the dismiss button.\n  const fileContent = (\n    <>\n      {loading && (\n        <div\n          className={clsx(styles['file-loading-overlay'], {\n            [styles['file-loading-overlay-single-row']]: loading && fileIsSingleRow,\n          })}\n        >\n          <InternalSpinner variant=\"normal\" size=\"normal\" />\n        </div>\n      )}\n      <InternalBox className={styles['file-option']}>\n        {showFileThumbnail && isImage && <FileOptionThumbnail file={file} />}\n\n        <div\n          className={clsx(styles['file-option-metadata'], {\n            [styles['with-image']]: showFileThumbnail && isImage,\n            [styles['single-row-loading']]: loading && fileIsSingleRow,\n          })}\n        >\n          <InternalSpaceBetween direction=\"vertical\" size=\"xxxs\">\n            <div\n              className={styles['file-name-container']}\n              onMouseOver={() => setShowTooltip(true)}\n              onMouseOut={() => setShowTooltip(false)}\n              onFocus={() => setShowTooltip(true)}\n              onBlur={() => setShowTooltip(false)}\n              role={isTruncated ? 'button' : undefined}\n              aria-expanded={isTruncated ? showTooltip : undefined}\n              tabIndex={isTruncated ? 0 : -1}\n              ref={fileNameContainerRef}\n            >\n              <InternalBox\n                fontWeight=\"normal\"\n                className={clsx(styles['file-option-name'], testUtilStyles['file-option-name'], {\n                  [testUtilStyles['ellipsis-active']]: isTruncated,\n                })}\n              >\n                <span ref={fileNameRef}>{file.name}</span>\n              </InternalBox>\n            </div>\n\n            {showFileSize && file.size ? (\n              <InternalBox\n                fontSize=\"body-s\"\n                color={'text-body-secondary'}\n                className={clsx(styles['file-option-size'], testUtilStyles['file-option-size'])}\n              >\n                {formatFileSize(file.size)}\n              </InternalBox>\n            ) : null}\n\n            {showFileLastModified && file.lastModified ? (\n              <InternalBox\n                fontSize=\"body-s\"\n                color={'text-body-secondary'}\n                className={clsx(styles['file-option-last-modified'], testUtilStyles['file-option-last-modified'])}\n              >\n                {formatFileLastModified(new Date(file.lastModified))}\n              </InternalBox>\n            ) : null}\n          </InternalSpaceBetween>\n        </div>\n      </InternalBox>\n    </>\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      className={clsx(styles.token, {\n        [styles['token-grid']]: alignment === 'horizontal',\n        [styles['token-contains-image']]: groupContainsImage && showFileThumbnail,\n      })}\n      role=\"group\"\n      aria-label={file.name}\n      aria-describedby={errorText ? errorId : warningText ? warningId : undefined}\n      aria-disabled={loading || undefined}\n      data-index={index}\n    >\n      <InternalToken\n        // The outer wrapper above is the accessibility group (role=\"group\" + aria-label). The\n        // token itself is presentation-only so screen readers don't see two nested groups.\n        role=\"presentation\"\n        __customContent={fileContent}\n        onDismiss={readOnly ? undefined : onDismiss}\n        dismissLabel={getDismissLabel(index)}\n        __tokenBoxClassName={clsx(styles['token-box'], {\n          [styles.loading]: loading,\n          [styles.error]: errorText,\n          [styles.warning]: showWarning,\n          [styles.horizontal]: alignment === 'horizontal',\n          [styles['read-only']]: readOnly,\n        })}\n      />\n      {errorText && (\n        <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n          {errorText}\n        </FormFieldError>\n      )}\n      {showWarning && (\n        <FormFieldWarning id={warningId} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n          {warningText}\n        </FormFieldWarning>\n      )}\n      {showTooltip && isTruncated && (\n        <Tooltip\n          getTrack={() => containerRef.current}\n          content={<InternalBox fontWeight=\"normal\">{file.name}</InternalBox>}\n          onEscape={() => setShowTooltip(false)}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default InternalFileToken;\n"]}

package/internal/base-component/styles.scoped.css

@@ -295,9 +295,11 @@
     --color-background-input-default-ifz5bb:var(--color-white-p1zlvy);
     --color-background-input-disabled-dihaja:var(--color-neutral-250-vs1is4);
     --color-background-item-selected-9gppru:var(--color-primary-50-1y05xv);
+    --color-background-side-navigation-item-active-adfprg:transparent;
     --color-background-layout-main-5ilwcb:var(--color-white-p1zlvy);
     --color-background-drawer-5hs0eh:var(--color-background-layout-panel-content-xto15e);
-    --color-background-drawer-backdrop-ducxi3:var(--color-grey-opaque-70-p0svy7);
+    --color-background-backdrop-33f45f:var(--color-grey-opaque-70-p0svy7);
+    --color-background-drawer-backdrop-ducxi3:var(--color-background-backdrop-33f45f);
     --color-background-layout-mobile-panel-ed0ava:var(--color-neutral-950-lxybh8);
     --color-background-layout-panel-jv6exs:var(--color-background-container-content-6u8rvp);
     --color-background-layout-panel-content-xto15e:var(--color-background-container-content-6u8rvp);
@@ -309,7 +311,7 @@
     --color-background-layout-toggle-selected-active-zcl8w3:var(--color-primary-600-1lcy1k);
     --color-background-layout-toggle-selected-default-izfana:var(--color-primary-600-1lcy1k);
     --color-background-layout-toggle-selected-hover-7953u1:var(--color-primary-700-n6k121);
-    --color-background-modal-overlay-d7uby0:var(--color-grey-opaque-70-p0svy7);
+    --color-background-modal-overlay-d7uby0:var(--color-background-backdrop-33f45f);
     --color-background-notification-blue-4vnob8:var(--color-info-600-un21zh);
     --color-background-notification-green-2rkyvu:var(--color-success-600-g7hz2i);
     --color-background-notification-grey-x3vul6:var(--color-neutral-650-miik4f);
@@ -378,6 +380,7 @@
     --color-border-button-primary-hover-rktx0f:var(--color-background-button-primary-hover-mo85i6);
     --color-text-button-primary-disabled-q79gms:var(--color-neutral-500-8van0b);
     --color-item-selected-72rnwy:var(--color-primary-600-1lcy1k);
+    --color-text-side-navigation-item-active-w3c4dj:var(--color-text-accent-n1kmht);
     --color-border-calendar-grid-67r4w4:transparent;
     --color-border-calendar-grid-selected-focus-ring-jk1fb0:var(--color-neutral-100-gk3lvf);
     --color-border-cell-shaded-0ipazf:var(--color-neutral-300-08wi6k);
@@ -767,6 +770,7 @@
     --size-table-selection-horizontal-qqiajd:40px;
     --size-vertical-input-p1d7xx:32px;
     --size-vertical-panel-icon-offset-z959cw:15px;
+    --size-side-navigation-item-height-lokap3:28px;
     --space-alert-action-left-4s8zo5:var(--space-s-tvghoh);
     --space-alert-horizontal-ul364s:var(--space-flashbar-horizontal-l63501);
     --space-alert-message-right-mrjbnn:var(--space-xxs-hwfkai);
@@ -837,6 +841,8 @@
     --space-table-header-tools-full-page-bottom-9m47g6:4px;
     --space-table-horizontal-suurzj:var(--space-container-horizontal-nqrzyh);
     --space-tree-view-indentation-xh9kis:var(--space-xl-jfy3x4);
+    --space-side-navigation-item-gap-5vlwdw:0px;
+    --space-side-navigation-item-collapsed-gap-d9lti2:var(--space-xs-ymlm0b);
     --space-tile-gutter-bi2bdv:var(--space-xl-jfy3x4);
     --space-action-card-horizontal-default-su1e86:var(--space-card-horizontal-default-pihe12);
     --space-action-card-horizontal-embedded-pb8pj4:var(--space-card-horizontal-embedded-sasxhu);
@@ -1196,6 +1202,7 @@
   .awsui-compact-mode:not(#\9) {
     --size-vertical-input-p1d7xx:28px;
     --size-vertical-panel-icon-offset-z959cw:13px;
+    --size-side-navigation-item-height-lokap3:24px;
     --space-field-vertical-vm99qz:3px;
     --space-button-icon-only-horizontal-i85hxi:var(--space-xxs-hwfkai);
     --space-card-horizontal-embedded-sasxhu:10px;
@@ -1481,11 +1488,12 @@
     --color-background-item-card-ww2wfv:var(--color-background-card-p5vrq0);
     --color-background-dropdown-item-selected-f3v6te:var(--color-background-item-selected-9gppru);
     --color-background-drawer-5hs0eh:var(--color-background-layout-panel-content-xto15e);
-    --color-background-drawer-backdrop-ducxi3:var(--color-grey-opaque-70-p0svy7);
+    --color-background-backdrop-33f45f:var(--color-grey-opaque-70-p0svy7);
+    --color-background-drawer-backdrop-ducxi3:var(--color-background-backdrop-33f45f);
     --color-background-layout-panel-jv6exs:var(--color-background-container-content-6u8rvp);
     --color-background-layout-panel-content-xto15e:var(--color-background-container-content-6u8rvp);
     --color-background-layout-toolbar-y0cu80:var(--color-background-layout-panel-content-xto15e);
-    --color-background-modal-overlay-d7uby0:var(--color-grey-opaque-70-p0svy7);
+    --color-background-modal-overlay-d7uby0:var(--color-background-backdrop-33f45f);
     --color-background-segment-default-b0r494:var(--color-background-button-normal-default-7f99mv);
     --color-background-segment-disabled-m2a5t7:var(--color-background-button-normal-disabled-hl039l);
     --color-background-segment-hover-800sl4:var(--color-background-button-normal-hover-53op9s);
@@ -1510,6 +1518,7 @@
     --color-border-button-primary-default-45p8u2:var(--color-background-button-primary-default-vdt0fu);
     --color-border-button-primary-disabled-b5p1ji:var(--color-background-button-primary-disabled-sgo4zo);
     --color-border-button-primary-hover-rktx0f:var(--color-background-button-primary-hover-mo85i6);
+    --color-text-side-navigation-item-active-w3c4dj:var(--color-text-accent-n1kmht);
     --color-border-code-editor-pane-item-hover-wvblek:var(--color-border-dropdown-item-hover-aqfuxq);
     --color-border-card-3n24fu:var(--color-border-divider-default-nr68jt);
     --color-border-card-highlighted-ygosod:var(--color-border-item-selected-wl5ttm);
@@ -1766,11 +1775,12 @@
     --color-background-item-card-ww2wfv:var(--color-background-card-p5vrq0);
     --color-background-dropdown-item-selected-f3v6te:var(--color-background-item-selected-9gppru);
     --color-background-drawer-5hs0eh:var(--color-background-layout-panel-content-xto15e);
-    --color-background-drawer-backdrop-ducxi3:var(--color-grey-opaque-70-p0svy7);
+    --color-background-backdrop-33f45f:var(--color-grey-opaque-70-p0svy7);
+    --color-background-drawer-backdrop-ducxi3:var(--color-background-backdrop-33f45f);
     --color-background-layout-panel-jv6exs:var(--color-background-container-content-6u8rvp);
     --color-background-layout-panel-content-xto15e:var(--color-background-container-content-6u8rvp);
     --color-background-layout-toolbar-y0cu80:var(--color-background-layout-panel-content-xto15e);
-    --color-background-modal-overlay-d7uby0:var(--color-grey-opaque-70-p0svy7);
+    --color-background-modal-overlay-d7uby0:var(--color-background-backdrop-33f45f);
     --color-background-segment-hover-800sl4:var(--color-background-button-normal-hover-53op9s);
     --color-background-slider-range-default-3ljdu4:var(--color-background-slider-handle-default-lp5ntg);
     --color-background-slider-range-active-vu3lky:var(--color-background-slider-handle-active-50ubqb);
@@ -1791,6 +1801,7 @@
     --color-border-button-primary-default-45p8u2:var(--color-background-button-primary-default-vdt0fu);
     --color-border-button-primary-disabled-b5p1ji:var(--color-background-button-primary-disabled-sgo4zo);
     --color-border-button-primary-hover-rktx0f:var(--color-background-button-primary-hover-mo85i6);
+    --color-text-side-navigation-item-active-w3c4dj:var(--color-text-accent-n1kmht);
     --color-border-code-editor-pane-item-hover-wvblek:var(--color-border-dropdown-item-hover-aqfuxq);
     --color-border-card-3n24fu:var(--color-border-divider-default-nr68jt);
     --color-border-card-highlighted-ygosod:var(--color-border-item-selected-wl5ttm);
@@ -2207,11 +2218,12 @@
     --color-background-item-card-ww2wfv:var(--color-background-card-p5vrq0);
     --color-background-dropdown-item-selected-f3v6te:var(--color-background-item-selected-9gppru);
     --color-background-drawer-5hs0eh:var(--color-background-layout-panel-content-xto15e);
-    --color-background-drawer-backdrop-ducxi3:var(--color-grey-opaque-70-p0svy7);
+    --color-background-backdrop-33f45f:var(--color-grey-opaque-70-p0svy7);
+    --color-background-drawer-backdrop-ducxi3:var(--color-background-backdrop-33f45f);
     --color-background-layout-panel-jv6exs:var(--color-background-container-content-6u8rvp);
     --color-background-layout-panel-content-xto15e:var(--color-background-container-content-6u8rvp);
     --color-background-layout-toolbar-y0cu80:var(--color-background-layout-panel-content-xto15e);
-    --color-background-modal-overlay-d7uby0:var(--color-grey-opaque-70-p0svy7);
+    --color-background-modal-overlay-d7uby0:var(--color-background-backdrop-33f45f);
     --color-background-segment-default-b0r494:var(--color-background-button-normal-default-7f99mv);
     --color-background-segment-disabled-m2a5t7:var(--color-background-button-normal-disabled-hl039l);
     --color-background-segment-hover-800sl4:var(--color-background-button-normal-hover-53op9s);
@@ -2236,6 +2248,7 @@
     --color-border-button-primary-default-45p8u2:var(--color-background-button-primary-default-vdt0fu);
     --color-border-button-primary-disabled-b5p1ji:var(--color-background-button-primary-disabled-sgo4zo);
     --color-border-button-primary-hover-rktx0f:var(--color-background-button-primary-hover-mo85i6);
+    --color-text-side-navigation-item-active-w3c4dj:var(--color-text-accent-n1kmht);
     --color-border-code-editor-pane-item-hover-wvblek:var(--color-border-dropdown-item-hover-aqfuxq);
     --color-border-card-3n24fu:var(--color-border-divider-default-nr68jt);
     --color-border-card-highlighted-ygosod:var(--color-border-item-selected-wl5ttm);
@@ -2364,5 +2377,5 @@
   }
 }
 :root {
-  --awsui-version-info-528ed620: true;
+  --awsui-version-info-b33ca59d: true;
 }

package/internal/breakpoints.d.ts

@@ -7,5 +7,5 @@ export declare function matchBreakpointMapping<T>(subset: Partial<Record<Breakpo
 /**
  * Get the named breakpoint for a provided width, optionally filtering to a subset of breakpoints.
  */
-export declare function getMatchingBreakpoint<T extends readonly Breakpoint[]>(width: number, breakpointFilter?: T): T[number] | 'default';
+export declare function getMatchingBreakpoint<T extends readonly Breakpoint[]>(width: number, breakpointFilter?: T, previousBreakpoint?: Breakpoint | null): T[number] | 'default';
 export declare function getBreakpointValue(breakpoint: Breakpoint): number;

package/internal/breakpoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/internal/breakpoints.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAY3E,eAAO,MAAM,gBAAgB,QAAsD,CAAC;AAIpF;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,UAAU,GAAG,CAAC,GAAG,IAAI,CAS9G;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,SAAS,UAAU,EAAE,EACnE,KAAK,EAAE,MAAM,EACb,gBAAgB,CAAC,EAAE,CAAC,GACnB,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,CAOvB;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEjE"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/internal/breakpoints.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAY3E,eAAO,MAAM,gBAAgB,QAAsD,CAAC;AAIpF;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,UAAU,GAAG,CAAC,GAAG,IAAI,CAS9G;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,SAAS,UAAU,EAAE,EACnE,KAAK,EAAE,MAAM,EACb,gBAAgB,CAAC,EAAE,CAAC,EACpB,kBAAkB,CAAC,EAAE,UAAU,GAAG,IAAI,GACrC,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,CA6BvB;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEjE"}

package/internal/breakpoints.js

@@ -1,3 +1,6 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { browserScrollbarSize } from './utils/browser-scrollbar-size';
 const BREAKPOINT_MAPPING = [
     ['xl', 1840],
     ['l', 1320],
@@ -25,9 +28,28 @@ export function matchBreakpointMapping(subset, actual) {
 /**
  * Get the named breakpoint for a provided width, optionally filtering to a subset of breakpoints.
  */
-export function getMatchingBreakpoint(width, breakpointFilter) {
-    for (const [breakpoint, breakpointWidth] of BREAKPOINT_MAPPING) {
-        if (width > breakpointWidth && (!breakpointFilter || breakpointFilter.indexOf(breakpoint) !== -1)) {
+export function getMatchingBreakpoint(width, breakpointFilter, previousBreakpoint) {
+    // When a JS-resolved breakpoint sits within a scrollbar-width of a boundary, switching the layout
+    // can grow/shrink the page enough to toggle the viewport scrollbar, which in turn changes the
+    // measured width and flips the breakpoint back — an infinite layout loop (see AWSUI-62065).
+    const breakpointSwitchOffset = browserScrollbarSize().width;
+    const previousBreakpointIndex = previousBreakpoint === undefined || previousBreakpoint === null
+        ? -1
+        : BREAKPOINTS_DESCENDING.indexOf(previousBreakpoint);
+    for (let i = 0; i < BREAKPOINT_MAPPING.length; i++) {
+        const [breakpoint, breakpointWidth] = BREAKPOINT_MAPPING[i];
+        if (breakpointFilter && breakpointFilter.indexOf(breakpoint) === -1) {
+            continue;
+        }
+        // Based on breakpointSwitchOffset, we either shrink or grow the breakpoint value we match against
+        // depending on whether the previous breakpoint was above or below the matched one. This enables the
+        // "sticky" behavior that makes the user have to resize the element further into a breakpoint boundary
+        // to actually switch the breakpoint.
+        let stickyBreakpointWidth = breakpointWidth;
+        if (previousBreakpointIndex !== -1) {
+            stickyBreakpointWidth += previousBreakpointIndex <= i ? -breakpointSwitchOffset : breakpointSwitchOffset;
+        }
+        if (width > stickyBreakpointWidth) {
             return breakpoint;
         }
     }

package/internal/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../../src/internal/breakpoints.ts"],"names":[],"mappings":"AAIA,MAAM,kBAAkB,GAA2B;IACjD,CAAC,IAAI,EAAE,IAAI,CAAC;IACZ,CAAC,GAAG,EAAE,IAAI,CAAC;IACX,CAAC,GAAG,EAAE,IAAI,CAAC;IACX,CAAC,GAAG,EAAE,GAAG,CAAC;IACV,CAAC,IAAI,EAAE,GAAG,CAAC;IACX,CAAC,KAAK,EAAE,GAAG,CAAC;IACZ,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpF,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;AAEpE;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAI,MAAsC,EAAE,MAAkB;IAClG,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/F,KAAK,MAAM,CAAC,UAAU,CAAC,IAAI,qBAAqB,EAAE,CAAC;QACjD,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAC3C,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;YAClC,OAAO,eAAe,CAAC;QACzB,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB,CACnC,KAAa,EACb,gBAAoB;IAEpB,KAAK,MAAM,CAAC,UAAU,EAAE,eAAe,CAAC,IAAI,kBAAkB,EAAE,CAAC;QAC/D,IAAI,KAAK,GAAG,eAAe,IAAI,CAAC,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;YAClG,OAAO,UAAU,CAAC;QACpB,CAAC;IACH,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,UAAsB;IACvD,OAAO,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,UAAU,CAAE,CAAC,CAAC,CAAC,CAAC;AACjE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport type Breakpoint = 'default' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';\n\nconst BREAKPOINT_MAPPING: [Breakpoint, number][] = [\n  ['xl', 1840],\n  ['l', 1320],\n  ['m', 1120],\n  ['s', 912],\n  ['xs', 688],\n  ['xxs', 465],\n  ['default', -1],\n];\n\nexport const mobileBreakpoint = BREAKPOINT_MAPPING.filter(b => b[0] === 'xs')[0][1];\n\nconst BREAKPOINTS_DESCENDING = BREAKPOINT_MAPPING.map(([bp]) => bp);\n\n/**\n * Take a breakpoint mapping and return the breakpoint value that most closely matches the actual breakpoint.\n */\nexport function matchBreakpointMapping<T>(subset: Partial<Record<Breakpoint, T>>, actual: Breakpoint): T | null {\n  const qualifyingBreakpoints = BREAKPOINT_MAPPING.slice(BREAKPOINTS_DESCENDING.indexOf(actual));\n  for (const [breakpoint] of qualifyingBreakpoints) {\n    const breakpointValue = subset[breakpoint];\n    if (breakpointValue !== undefined) {\n      return breakpointValue;\n    }\n  }\n  return null;\n}\n\n/**\n * Get the named breakpoint for a provided width, optionally filtering to a subset of breakpoints.\n */\nexport function getMatchingBreakpoint<T extends readonly Breakpoint[]>(\n  width: number,\n  breakpointFilter?: T\n): T[number] | 'default' {\n  for (const [breakpoint, breakpointWidth] of BREAKPOINT_MAPPING) {\n    if (width > breakpointWidth && (!breakpointFilter || breakpointFilter.indexOf(breakpoint) !== -1)) {\n      return breakpoint;\n    }\n  }\n  return 'default';\n}\n\nexport function getBreakpointValue(breakpoint: Breakpoint): number {\n  return BREAKPOINT_MAPPING.find(bp => bp[0] === breakpoint)![1];\n}\n"]}
+{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../../src/internal/breakpoints.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAItE,MAAM,kBAAkB,GAA2B;IACjD,CAAC,IAAI,EAAE,IAAI,CAAC;IACZ,CAAC,GAAG,EAAE,IAAI,CAAC;IACX,CAAC,GAAG,EAAE,IAAI,CAAC;IACX,CAAC,GAAG,EAAE,GAAG,CAAC;IACV,CAAC,IAAI,EAAE,GAAG,CAAC;IACX,CAAC,KAAK,EAAE,GAAG,CAAC;IACZ,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpF,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;AAEpE;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAI,MAAsC,EAAE,MAAkB;IAClG,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/F,KAAK,MAAM,CAAC,UAAU,CAAC,IAAI,qBAAqB,EAAE,CAAC;QACjD,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAC3C,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;YAClC,OAAO,eAAe,CAAC;QACzB,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB,CACnC,KAAa,EACb,gBAAoB,EACpB,kBAAsC;IAEtC,kGAAkG;IAClG,8FAA8F;IAC9F,4FAA4F;IAC5F,MAAM,sBAAsB,GAAG,oBAAoB,EAAE,CAAC,KAAK,CAAC;IAE5D,MAAM,uBAAuB,GAC3B,kBAAkB,KAAK,SAAS,IAAI,kBAAkB,KAAK,IAAI;QAC7D,CAAC,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,sBAAsB,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAEzD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACnD,MAAM,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAC;QAC5D,IAAI,gBAAgB,IAAI,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;YACpE,SAAS;QACX,CAAC;QACD,kGAAkG;QAClG,oGAAoG;QACpG,sGAAsG;QACtG,qCAAqC;QACrC,IAAI,qBAAqB,GAAG,eAAe,CAAC;QAC5C,IAAI,uBAAuB,KAAK,CAAC,CAAC,EAAE,CAAC;YACnC,qBAAqB,IAAI,uBAAuB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAC;QAC3G,CAAC;QACD,IAAI,KAAK,GAAG,qBAAqB,EAAE,CAAC;YAClC,OAAO,UAAU,CAAC;QACpB,CAAC;IACH,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,UAAsB;IACvD,OAAO,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,UAAU,CAAE,CAAC,CAAC,CAAC,CAAC;AACjE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { browserScrollbarSize } from './utils/browser-scrollbar-size';\n\nexport type Breakpoint = 'default' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';\n\nconst BREAKPOINT_MAPPING: [Breakpoint, number][] = [\n  ['xl', 1840],\n  ['l', 1320],\n  ['m', 1120],\n  ['s', 912],\n  ['xs', 688],\n  ['xxs', 465],\n  ['default', -1],\n];\n\nexport const mobileBreakpoint = BREAKPOINT_MAPPING.filter(b => b[0] === 'xs')[0][1];\n\nconst BREAKPOINTS_DESCENDING = BREAKPOINT_MAPPING.map(([bp]) => bp);\n\n/**\n * Take a breakpoint mapping and return the breakpoint value that most closely matches the actual breakpoint.\n */\nexport function matchBreakpointMapping<T>(subset: Partial<Record<Breakpoint, T>>, actual: Breakpoint): T | null {\n  const qualifyingBreakpoints = BREAKPOINT_MAPPING.slice(BREAKPOINTS_DESCENDING.indexOf(actual));\n  for (const [breakpoint] of qualifyingBreakpoints) {\n    const breakpointValue = subset[breakpoint];\n    if (breakpointValue !== undefined) {\n      return breakpointValue;\n    }\n  }\n  return null;\n}\n\n/**\n * Get the named breakpoint for a provided width, optionally filtering to a subset of breakpoints.\n */\nexport function getMatchingBreakpoint<T extends readonly Breakpoint[]>(\n  width: number,\n  breakpointFilter?: T,\n  previousBreakpoint?: Breakpoint | null\n): T[number] | 'default' {\n  // When a JS-resolved breakpoint sits within a scrollbar-width of a boundary, switching the layout\n  // can grow/shrink the page enough to toggle the viewport scrollbar, which in turn changes the\n  // measured width and flips the breakpoint back — an infinite layout loop (see AWSUI-62065).\n  const breakpointSwitchOffset = browserScrollbarSize().width;\n\n  const previousBreakpointIndex =\n    previousBreakpoint === undefined || previousBreakpoint === null\n      ? -1\n      : BREAKPOINTS_DESCENDING.indexOf(previousBreakpoint);\n\n  for (let i = 0; i < BREAKPOINT_MAPPING.length; i++) {\n    const [breakpoint, breakpointWidth] = BREAKPOINT_MAPPING[i];\n    if (breakpointFilter && breakpointFilter.indexOf(breakpoint) === -1) {\n      continue;\n    }\n    // Based on breakpointSwitchOffset, we either shrink or grow the breakpoint value we match against\n    // depending on whether the previous breakpoint was above or below the matched one. This enables the\n    // \"sticky\" behavior that makes the user have to resize the element further into a breakpoint boundary\n    // to actually switch the breakpoint.\n    let stickyBreakpointWidth = breakpointWidth;\n    if (previousBreakpointIndex !== -1) {\n      stickyBreakpointWidth += previousBreakpointIndex <= i ? -breakpointSwitchOffset : breakpointSwitchOffset;\n    }\n    if (width > stickyBreakpointWidth) {\n      return breakpoint;\n    }\n  }\n  return 'default';\n}\n\nexport function getBreakpointValue(breakpoint: Breakpoint): number {\n  return BREAKPOINT_MAPPING.find(bp => bp[0] === breakpoint)![1];\n}\n"]}

package/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (528ed620)";
-export var GIT_SHA = "528ed620";
+export var PACKAGE_VERSION = "3.0.0 (b33ca59d)";
+export var GIT_SHA = "b33ca59d";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (528ed620)",
-  "GIT_SHA": "528ed620",
+  "PACKAGE_VERSION": "3.0.0 (b33ca59d)",
+  "GIT_SHA": "b33ca59d",
   "THEME": "open-source-visual-refresh",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": true,

package/internal/generated/styles/tokens.d.ts

@@ -336,8 +336,10 @@ export const colorBackgroundInlineCode: string;
 export const colorBackgroundInputDefault: string;
 export const colorBackgroundInputDisabled: string;
 export const colorBackgroundItemSelected: string;
+export const colorBackgroundSideNavigationItemActive: string;
 export const colorBackgroundLayoutMain: string;
 export const colorBackgroundDrawer: string;
+export const colorBackgroundBackdrop: string;
 export const colorBackgroundDrawerBackdrop: string;
 export const colorBackgroundLayoutMobilePanel: string;
 export const colorBackgroundLayoutPanel: string;
@@ -419,6 +421,7 @@ export const colorBorderButtonPrimaryDisabled: string;
 export const colorBorderButtonPrimaryHover: string;
 export const colorTextButtonPrimaryDisabled: string;
 export const colorItemSelected: string;
+export const colorTextSideNavigationItemActive: string;
 export const colorBorderCalendarGrid: string;
 export const colorBorderCalendarGridSelectedFocusRing: string;
 export const colorBorderCellShaded: string;
@@ -819,6 +822,7 @@ export const sizeIconNormal: string;
 export const sizeTableSelectionHorizontal: string;
 export const sizeVerticalInput: string;
 export const sizeVerticalPanelIconOffset: string;
+export const sizeSideNavigationItemHeight: string;
 export const spaceAlertActionLeft: string;
 export const spaceAlertHorizontal: string;
 export const spaceAlertMessageRight: string;
@@ -889,6 +893,8 @@ export const spaceTableHeaderToolsBottom: string;
 export const spaceTableHeaderToolsFullPageBottom: string;
 export const spaceTableHorizontal: string;
 export const spaceTreeViewIndentation: string;
+export const spaceSideNavigationItemGap: string;
+export const spaceSideNavigationItemCollapsedGap: string;
 export const spaceTileGutter: string;
 export const spaceActionCardHorizontalDefault: string;
 export const spaceActionCardHorizontalEmbedded: string;

package/internal/generated/styles/tokens.js

@@ -336,8 +336,10 @@ export var colorBackgroundInlineCode = "var(--color-background-inline-code-un8ud
 export var colorBackgroundInputDefault = "var(--color-background-input-default-ifz5bb, #ffffff)";
 export var colorBackgroundInputDisabled = "var(--color-background-input-disabled-dihaja, #ebebf0)";
 export var colorBackgroundItemSelected = "var(--color-background-item-selected-9gppru, #f0fbff)";
+export var colorBackgroundSideNavigationItemActive = "var(--color-background-side-navigation-item-active-adfprg, transparent)";
 export var colorBackgroundLayoutMain = "var(--color-background-layout-main-5ilwcb, #ffffff)";
 export var colorBackgroundDrawer = "var(--color-background-drawer-5hs0eh, #ffffff)";
+export var colorBackgroundBackdrop = "var(--color-background-backdrop-33f45f, rgba(35, 43, 55, 0.7))";
 export var colorBackgroundDrawerBackdrop = "var(--color-background-drawer-backdrop-ducxi3, rgba(35, 43, 55, 0.7))";
 export var colorBackgroundLayoutMobilePanel = "var(--color-background-layout-mobile-panel-ed0ava, #0f141a)";
 export var colorBackgroundLayoutPanel = "var(--color-background-layout-panel-jv6exs, #ffffff)";
@@ -419,6 +421,7 @@ export var colorBorderButtonPrimaryDisabled = "var(--color-border-button-primary
 export var colorBorderButtonPrimaryHover = "var(--color-border-button-primary-hover-rktx0f, #002b66)";
 export var colorTextButtonPrimaryDisabled = "var(--color-text-button-primary-disabled-q79gms, #8c8c94)";
 export var colorItemSelected = "var(--color-item-selected-72rnwy, #006ce0)";
+export var colorTextSideNavigationItemActive = "var(--color-text-side-navigation-item-active-w3c4dj, #006ce0)";
 export var colorBorderCalendarGrid = "var(--color-border-calendar-grid-67r4w4, transparent)";
 export var colorBorderCalendarGridSelectedFocusRing = "var(--color-border-calendar-grid-selected-focus-ring-jk1fb0, #f9f9fa)";
 export var colorBorderCellShaded = "var(--color-border-cell-shaded-0ipazf, #dedee3)";
@@ -819,6 +822,7 @@ export var sizeIconNormal = "var(--size-icon-normal-levt08, 16px)";
 export var sizeTableSelectionHorizontal = "var(--size-table-selection-horizontal-qqiajd, 40px)";
 export var sizeVerticalInput = "var(--size-vertical-input-p1d7xx, 32px)";
 export var sizeVerticalPanelIconOffset = "var(--size-vertical-panel-icon-offset-z959cw, 15px)";
+export var sizeSideNavigationItemHeight = "var(--size-side-navigation-item-height-lokap3, 28px)";
 export var spaceAlertActionLeft = "var(--space-alert-action-left-4s8zo5, 12px)";
 export var spaceAlertHorizontal = "var(--space-alert-horizontal-ul364s, 16px)";
 export var spaceAlertMessageRight = "var(--space-alert-message-right-mrjbnn, 4px)";
@@ -889,6 +893,8 @@ export var spaceTableHeaderToolsBottom = "var(--space-table-header-tools-bottom-
 export var spaceTableHeaderToolsFullPageBottom = "var(--space-table-header-tools-full-page-bottom-9m47g6, 4px)";
 export var spaceTableHorizontal = "var(--space-table-horizontal-suurzj, 20px)";
 export var spaceTreeViewIndentation = "var(--space-tree-view-indentation-xh9kis, 24px)";
+export var spaceSideNavigationItemGap = "var(--space-side-navigation-item-gap-5vlwdw, 0px)";
+export var spaceSideNavigationItemCollapsedGap = "var(--space-side-navigation-item-collapsed-gap-d9lti2, 8px)";
 export var spaceTileGutter = "var(--space-tile-gutter-bi2bdv, 24px)";
 export var spaceActionCardHorizontalDefault = "var(--space-action-card-horizontal-default-su1e86, 20px)";
 export var spaceActionCardHorizontalEmbedded = "var(--space-action-card-horizontal-embedded-pb8pj4, 12px)";