@cloudscape-design/components 3.0.633 → 3.0.635

package/progress-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.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, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { Progress, ResultState, SmallText } from './internal';\nimport { joinStrings } from '../internal/utils/strings';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { throttle } from '../internal/utils/throttle';\nimport LiveRegion from '../internal/components/live-region';\n\nconst ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements\n\nexport { ProgressBarProps };\n\nexport default function ProgressBar({\n  value = 0,\n  status = 'in-progress',\n  variant = 'standalone',\n  resultButtonText,\n  label,\n  ariaLabel,\n  ariaLabelledby,\n  description,\n  additionalInfo,\n  resultText,\n  onResultButtonClick,\n  ...rest\n}: ProgressBarProps) {\n  const { __internalRootRef } = useBaseComponent('ProgressBar', {\n    props: { variant },\n  });\n  const baseProps = getBaseProps(rest);\n  const generatedName = useUniqueId('awsui-progress-bar-');\n\n  const labelId = `${generatedName}-label`;\n  const isInFlash = variant === 'flash';\n  const isInProgressState = status === 'in-progress';\n\n  const [announcedValue, setAnnouncedValue] = useState('');\n  const throttledAssertion = useMemo(() => {\n    return throttle((value: ProgressBarProps['value']) => {\n      setAnnouncedValue(`${value}%`);\n    }, ASSERTION_FREQUENCY);\n  }, []);\n\n  useEffect(() => {\n    throttledAssertion(value);\n  }, [throttledAssertion, value]);\n\n  if (isInFlash && resultButtonText) {\n    warnOnce(\n      'ProgressBar',\n      'The `resultButtonText` is ignored if you set `variant=\"flash\"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.'\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, variant && styles[variant])}\n      ref={__internalRootRef}\n    >\n      <div className={isInFlash ? styles['flash-container'] : undefined}>\n        <div className={clsx(styles['word-wrap'], styles[`label-${variant}`])} id={labelId}>\n          {label}\n        </div>\n        {description && <SmallText color={isInFlash ? 'inherit' : undefined}>{description}</SmallText>}\n        <div>\n          {isInProgressState ? (\n            <>\n              <Progress\n                value={value}\n                ariaLabel={ariaLabel}\n                ariaLabelledby={joinStrings(labelId, ariaLabelledby)}\n                isInFlash={isInFlash}\n              />\n              <LiveRegion delay={0}>\n                {label}\n                {label ? ': ' : null}\n                {announcedValue}\n              </LiveRegion>\n            </>\n          ) : (\n            <ResultState\n              resultText={resultText}\n              isInFlash={isInFlash}\n              resultButtonText={resultButtonText}\n              status={status}\n              onClick={() => {\n                fireNonCancelableEvent(onResultButtonClick);\n              }}\n            />\n          )}\n        </div>\n      </div>\n      {additionalInfo && <SmallText color={isInFlash ? 'inherit' : undefined}>{additionalInfo}</SmallText>}\n    </div>\n  );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.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, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { Progress, ResultState, SmallText } from './internal';\nimport { joinStrings } from '../internal/utils/strings';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { throttle } from '../internal/utils/throttle';\nimport LiveRegion from '../internal/components/live-region';\n\nconst ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements\n\nexport { ProgressBarProps };\n\nexport default function ProgressBar({\n  value = 0,\n  status = 'in-progress',\n  variant = 'standalone',\n  resultButtonText,\n  label,\n  ariaLabel,\n  ariaLabelledby,\n  description,\n  additionalInfo,\n  resultText,\n  onResultButtonClick,\n  ...rest\n}: ProgressBarProps) {\n  const { __internalRootRef } = useBaseComponent('ProgressBar', {\n    props: { variant },\n  });\n  const baseProps = getBaseProps(rest);\n  const generatedName = useUniqueId('awsui-progress-bar-');\n\n  const labelId = `${generatedName}-label`;\n  const isInFlash = variant === 'flash';\n  const isInProgressState = status === 'in-progress';\n\n  const [announcedValue, setAnnouncedValue] = useState('');\n  const throttledAssertion = useMemo(() => {\n    return throttle((value: ProgressBarProps['value']) => {\n      setAnnouncedValue(`${value}%`);\n    }, ASSERTION_FREQUENCY);\n  }, []);\n\n  useEffect(() => {\n    throttledAssertion(value);\n  }, [throttledAssertion, value]);\n\n  if (isInFlash && resultButtonText) {\n    warnOnce(\n      'ProgressBar',\n      'The `resultButtonText` is ignored if you set `variant=\"flash\"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.'\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, variant && styles[variant])}\n      ref={__internalRootRef}\n    >\n      <div className={isInFlash ? styles['flash-container'] : undefined}>\n        <div className={clsx(styles['word-wrap'], styles[`label-${variant}`])} id={labelId}>\n          {label}\n        </div>\n        {description && <SmallText color={isInFlash ? 'inherit' : undefined}>{description}</SmallText>}\n        <div>\n          {isInProgressState ? (\n            <>\n              <Progress\n                value={value}\n                ariaLabel={ariaLabel}\n                ariaLabelledby={joinStrings(labelId, ariaLabelledby)}\n                isInFlash={isInFlash}\n              />\n              <LiveRegion delay={0}>\n                {label}\n                {label ? ': ' : null}\n                {announcedValue}\n              </LiveRegion>\n            </>\n          ) : (\n            <ResultState\n              resultText={resultText}\n              isInFlash={isInFlash}\n              resultButtonText={resultButtonText}\n              status={status}\n              onClick={() => {\n                fireNonCancelableEvent(onResultButtonClick);\n              }}\n            />\n          )}\n        </div>\n      </div>\n      {additionalInfo && (\n        <SmallText className={styles['additional-info']} color={isInFlash ? 'inherit' : undefined}>\n          {additionalInfo}\n        </SmallText>\n      )}\n    </div>\n  );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n"]}

package/progress-bar/internal.d.ts

@@ -11,8 +11,9 @@ export declare const Progress: ({ value, isInFlash, ariaLabel, ariaLabelledby }:
 interface SmallTextProps {
     color?: BoxProps.Color;
     children: React.ReactNode;
+    className?: string;
 }
-export declare const SmallText: ({ color, children }: SmallTextProps) => JSX.Element;
+export declare const SmallText: ({ color, children, className }: SmallTextProps) => JSX.Element;
 interface ResultStateProps {
     isInFlash: boolean;
     resultText: React.ReactNode;

package/progress-bar/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAM7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAShD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AACD,eAAO,MAAM,QAAQ,oDAAqD,aAAa,gBAyBtF,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,wBAAyB,cAAc,gBAM5D,CAAC;AAYF,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,iEAAkE,gBAAgB,gBAqBzG,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAM7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAShD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AACD,eAAO,MAAM,QAAQ,oDAAqD,aAAa,gBAyBtF,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,mCAAoC,cAAc,gBAMvE,CAAC;AAYF,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,iEAAkE,gBAAgB,gBAqBzG,CAAC"}

package/progress-bar/internal.js

@@ -18,8 +18,8 @@ export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby }) => {
         React.createElement("span", { "aria-hidden": "true", className: styles['percentage-container'] },
             React.createElement(InternalBox, { className: styles.percentage, variant: "small", color: isInFlash ? 'inherit' : undefined }, `${progressValue}%`))));
 };
-export const SmallText = ({ color, children }) => {
-    return (React.createElement(InternalBox, { className: styles['word-wrap'], variant: "small", display: "block", color: color }, children));
+export const SmallText = ({ color, children, className }) => {
+    return (React.createElement(InternalBox, { className: clsx(styles['word-wrap'], className), variant: "small", display: "block", color: color }, children));
 };
 const ResultButton = ({ onClick, children }) => {
     return (React.createElement("div", { className: styles['result-button'] },

package/progress-bar/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/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 from 'react';\nimport clsx from 'clsx';\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\n\nimport { ProgressBarProps } from './interfaces';\nimport styles from './styles.css.js';\n\nconst MAX_VALUE = 100;\n\nconst clamp = (value: number, lowerLimit: number, upperLimit: number) => {\n  return Math.max(Math.min(value, upperLimit), lowerLimit);\n};\n\ninterface ProgressProps {\n  value: number;\n  isInFlash: boolean;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n}\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby }: ProgressProps) => {\n  const roundedValue = Math.round(value);\n  const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n  return (\n    <div className={styles['progress-container']}>\n      <progress\n        className={clsx(\n          styles.progress,\n          progressValue >= MAX_VALUE && styles.complete,\n          isInFlash && styles['progress-in-flash']\n        )}\n        max={MAX_VALUE}\n        value={progressValue}\n        aria-label={ariaLabel}\n        // Ensures aria-label takes precedence over aria-labelledby\n        aria-labelledby={!ariaLabel ? ariaLabelledby : undefined}\n      />\n      <span aria-hidden=\"true\" className={styles['percentage-container']}>\n        <InternalBox className={styles.percentage} variant=\"small\" color={isInFlash ? 'inherit' : undefined}>\n          {`${progressValue}%`}\n        </InternalBox>\n      </span>\n    </div>\n  );\n};\n\ninterface SmallTextProps {\n  color?: BoxProps.Color;\n  children: React.ReactNode;\n}\n\nexport const SmallText = ({ color, children }: SmallTextProps) => {\n  return (\n    <InternalBox className={styles['word-wrap']} variant=\"small\" display=\"block\" color={color}>\n      {children}\n    </InternalBox>\n  );\n};\n\nconst ResultButton = ({ onClick, children }: ButtonProps) => {\n  return (\n    <div className={styles['result-button']}>\n      <InternalButton formAction=\"none\" onClick={onClick}>\n        {children}\n      </InternalButton>\n    </div>\n  );\n};\n\ninterface ResultStateProps {\n  isInFlash: boolean;\n  resultText: React.ReactNode;\n  resultButtonText?: string;\n  status: ProgressBarProps.Status;\n  onClick: () => void;\n}\n\nexport const ResultState = ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => {\n  const hasResultButton = !!resultButtonText;\n\n  if (isInFlash) {\n    return (\n      <div className={styles[`result-container-${status}`]} aria-live=\"polite\" aria-atomic=\"true\">\n        <span className={styles['result-text']}>{resultText}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles[`result-container-${status}`]} aria-live=\"polite\" aria-atomic=\"true\">\n      <span className={clsx(hasResultButton && styles['with-result-button'])}>\n        <InternalStatusIndicator type={status === 'success' ? 'success' : 'error'}>\n          <span className={styles['result-text']}>{resultText}</span>\n        </InternalStatusIndicator>\n      </span>\n      {hasResultButton && <ResultButton onClick={onClick}>{resultButtonText}</ResultButton>}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/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 from 'react';\nimport clsx from 'clsx';\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\n\nimport { ProgressBarProps } from './interfaces';\nimport styles from './styles.css.js';\n\nconst MAX_VALUE = 100;\n\nconst clamp = (value: number, lowerLimit: number, upperLimit: number) => {\n  return Math.max(Math.min(value, upperLimit), lowerLimit);\n};\n\ninterface ProgressProps {\n  value: number;\n  isInFlash: boolean;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n}\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby }: ProgressProps) => {\n  const roundedValue = Math.round(value);\n  const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n  return (\n    <div className={styles['progress-container']}>\n      <progress\n        className={clsx(\n          styles.progress,\n          progressValue >= MAX_VALUE && styles.complete,\n          isInFlash && styles['progress-in-flash']\n        )}\n        max={MAX_VALUE}\n        value={progressValue}\n        aria-label={ariaLabel}\n        // Ensures aria-label takes precedence over aria-labelledby\n        aria-labelledby={!ariaLabel ? ariaLabelledby : undefined}\n      />\n      <span aria-hidden=\"true\" className={styles['percentage-container']}>\n        <InternalBox className={styles.percentage} variant=\"small\" color={isInFlash ? 'inherit' : undefined}>\n          {`${progressValue}%`}\n        </InternalBox>\n      </span>\n    </div>\n  );\n};\n\ninterface SmallTextProps {\n  color?: BoxProps.Color;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const SmallText = ({ color, children, className }: SmallTextProps) => {\n  return (\n    <InternalBox className={clsx(styles['word-wrap'], className)} variant=\"small\" display=\"block\" color={color}>\n      {children}\n    </InternalBox>\n  );\n};\n\nconst ResultButton = ({ onClick, children }: ButtonProps) => {\n  return (\n    <div className={styles['result-button']}>\n      <InternalButton formAction=\"none\" onClick={onClick}>\n        {children}\n      </InternalButton>\n    </div>\n  );\n};\n\ninterface ResultStateProps {\n  isInFlash: boolean;\n  resultText: React.ReactNode;\n  resultButtonText?: string;\n  status: ProgressBarProps.Status;\n  onClick: () => void;\n}\n\nexport const ResultState = ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => {\n  const hasResultButton = !!resultButtonText;\n\n  if (isInFlash) {\n    return (\n      <div className={styles[`result-container-${status}`]} aria-live=\"polite\" aria-atomic=\"true\">\n        <span className={styles['result-text']}>{resultText}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles[`result-container-${status}`]} aria-live=\"polite\" aria-atomic=\"true\">\n      <span className={clsx(hasResultButton && styles['with-result-button'])}>\n        <InternalStatusIndicator type={status === 'success' ? 'success' : 'error'}>\n          <span className={styles['result-text']}>{resultText}</span>\n        </InternalStatusIndicator>\n      </span>\n      {hasResultButton && <ResultButton onClick={onClick}>{resultButtonText}</ResultButton>}\n    </div>\n  );\n};\n"]}

package/progress-bar/styles.css.js

@@ -1,23 +1,24 @@
 
     import './styles.scoped.css';
     export default {
-  "progress": "awsui_progress_11huc_1ah81_197",
-  "result-state": "awsui_result-state_11huc_1ah81_211",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_1ah81_1",
-  "root": "awsui_root_11huc_1ah81_233",
-  "with-result-button": "awsui_with-result-button_11huc_1ah81_268",
-  "result-text": "awsui_result-text_11huc_1ah81_272",
-  "result-container-error": "awsui_result-container-error_11huc_1ah81_276",
-  "result-container-success": "awsui_result-container-success_11huc_1ah81_276",
-  "result-button": "awsui_result-button_11huc_1ah81_280",
-  "word-wrap": "awsui_word-wrap_11huc_1ah81_286",
-  "label-flash": "awsui_label-flash_11huc_1ah81_291",
-  "label-key-value": "awsui_label-key-value_11huc_1ah81_295",
-  "flash": "awsui_flash_11huc_1ah81_303",
-  "progress-container": "awsui_progress-container_11huc_1ah81_307",
-  "percentage-container": "awsui_percentage-container_11huc_1ah81_314",
-  "percentage": "awsui_percentage_11huc_1ah81_314",
-  "complete": "awsui_complete_11huc_1ah81_360",
-  "progress-in-flash": "awsui_progress-in-flash_11huc_1ah81_388"
+  "progress": "awsui_progress_11huc_paiso_197",
+  "result-state": "awsui_result-state_11huc_paiso_211",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_paiso_1",
+  "root": "awsui_root_11huc_paiso_233",
+  "with-result-button": "awsui_with-result-button_11huc_paiso_268",
+  "result-text": "awsui_result-text_11huc_paiso_272",
+  "result-container-error": "awsui_result-container-error_11huc_paiso_276",
+  "result-container-success": "awsui_result-container-success_11huc_paiso_276",
+  "result-button": "awsui_result-button_11huc_paiso_280",
+  "word-wrap": "awsui_word-wrap_11huc_paiso_286",
+  "label-flash": "awsui_label-flash_11huc_paiso_291",
+  "label-key-value": "awsui_label-key-value_11huc_paiso_295",
+  "flash": "awsui_flash_11huc_paiso_303",
+  "progress-container": "awsui_progress-container_11huc_paiso_307",
+  "percentage-container": "awsui_percentage-container_11huc_paiso_314",
+  "percentage": "awsui_percentage_11huc_paiso_314",
+  "complete": "awsui_complete_11huc_paiso_360",
+  "progress-in-flash": "awsui_progress-in-flash_11huc_paiso_388",
+  "additional-info": "awsui_additional-info_11huc_paiso_404"
 };
   

package/progress-bar/styles.scoped.css

@@ -194,27 +194,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_progress_11huc_1ah81_197:not(#\9)::-webkit-progress-value {
+.awsui_progress_11huc_paiso_197:not(#\9)::-webkit-progress-value {
   -webkit-transition: width var(--motion-duration-moderate-5k1phv, 135ms) linear;
   transition: width var(--motion-duration-moderate-5k1phv, 135ms) linear;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_progress_11huc_1ah81_197:not(#\9)::-webkit-progress-value {
+  .awsui_progress_11huc_paiso_197:not(#\9)::-webkit-progress-value {
     animation: none;
     -webkit-transition: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_progress_11huc_1ah81_197:not(#\9)::-webkit-progress-value, .awsui-mode-entering .awsui_progress_11huc_1ah81_197:not(#\9)::-webkit-progress-value {
+.awsui-motion-disabled .awsui_progress_11huc_paiso_197:not(#\9)::-webkit-progress-value, .awsui-mode-entering .awsui_progress_11huc_paiso_197:not(#\9)::-webkit-progress-value {
   animation: none;
   -webkit-transition: none;
   transition: none;
 }
 
-.awsui_result-state_11huc_1ah81_211:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_11huc_1ah81_1 var(--motion-duration-transition-show-paced-9s9l5z, 180ms) var(--motion-easing-transition-show-paced-eobwvi, ease-out);
+.awsui_result-state_11huc_paiso_211:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_11huc_paiso_1 var(--motion-duration-transition-show-paced-9s9l5z, 180ms) var(--motion-easing-transition-show-paced-eobwvi, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_11huc_1ah81_1 {
+@keyframes awsui_awsui-motion-fade-in_11huc_paiso_1 {
   from {
     opacity: 0.2;
   }
@@ -223,17 +223,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_result-state_11huc_1ah81_211:not(#\9) {
+  .awsui_result-state_11huc_paiso_211:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_result-state_11huc_1ah81_211:not(#\9), .awsui-mode-entering .awsui_result-state_11huc_1ah81_211:not(#\9) {
+.awsui-motion-disabled .awsui_result-state_11huc_paiso_211:not(#\9), .awsui-mode-entering .awsui_result-state_11huc_paiso_211:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_11huc_1ah81_233:not(#\9) {
+.awsui_root_11huc_paiso_233:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -269,34 +269,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_with-result-button_11huc_1ah81_268:not(#\9) {
+.awsui_with-result-button_11huc_paiso_268:not(#\9) {
   padding-inline-end: var(--space-m-udix3p, 16px);
 }
 
-.awsui_result-text_11huc_1ah81_272:not(#\9) {
+.awsui_result-text_11huc_paiso_272:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_result-container-error_11huc_1ah81_276:not(#\9), .awsui_result-container-success_11huc_1ah81_276:not(#\9) {
+.awsui_result-container-error_11huc_paiso_276:not(#\9), .awsui_result-container-success_11huc_paiso_276:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_result-button_11huc_1ah81_280:not(#\9) {
+.awsui_result-button_11huc_paiso_280:not(#\9) {
   display: inline-block;
   margin-block: var(--space-scaled-xxs-7597g1, 4px);
   margin-inline: 0;
 }
 
-.awsui_word-wrap_11huc_1ah81_286:not(#\9) {
+.awsui_word-wrap_11huc_paiso_286:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
 }
 
-.awsui_label-flash_11huc_1ah81_291:not(#\9) {
+.awsui_label-flash_11huc_paiso_291:not(#\9) {
   color: "inherit";
   font-weight: 700;
 }
-.awsui_label-key-value_11huc_1ah81_295:not(#\9) {
+.awsui_label-key-value_11huc_paiso_295:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
   font-weight: var(--font-display-label-weight-815ja9, 700);
@@ -304,18 +304,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-end: var(--space-scaled-xxxs-27y4hv, 2px);
 }
 
-.awsui_flash_11huc_1ah81_303:not(#\9) {
+.awsui_flash_11huc_paiso_303:not(#\9) {
   color: inherit;
 }
 
-.awsui_progress-container_11huc_1ah81_307:not(#\9) {
+.awsui_progress-container_11huc_paiso_307:not(#\9) {
   display: flex;
   align-items: center;
   max-inline-size: 800px;
   block-size: var(--line-height-body-m-30ar75, 20px);
 }
 
-.awsui_percentage-container_11huc_1ah81_314:not(#\9) {
+.awsui_percentage-container_11huc_paiso_314:not(#\9) {
   inline-size: 33px;
   flex-shrink: 0;
   white-space: nowrap;
@@ -325,11 +325,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   letter-spacing: var(--letter-spacing-body-s-z9jkwp, 0.005em);
 }
 
-.awsui_percentage_11huc_1ah81_314:not(#\9) {
+.awsui_percentage_11huc_paiso_314:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_progress_11huc_1ah81_197:not(#\9) {
+.awsui_progress_11huc_paiso_197:not(#\9) {
   inline-size: 100%;
   margin-inline-end: var(--space-s-34lx8l, 12px);
   min-inline-size: 0;
@@ -343,7 +343,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: 10px;
   background-color: var(--color-background-progress-bar-layout-default-ktc0zl, #e9ebed);
 }
-.awsui_progress_11huc_1ah81_197:not(#\9)::-webkit-progress-bar {
+.awsui_progress_11huc_paiso_197:not(#\9)::-webkit-progress-bar {
   block-size: 4px;
   border-block: 0;
   border-inline: none;
@@ -354,27 +354,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: 10px;
   background-color: var(--color-background-progress-bar-layout-default-ktc0zl, #e9ebed);
 }
-.awsui_progress_11huc_1ah81_197:not(#\9)::-webkit-progress-value {
+.awsui_progress_11huc_paiso_197:not(#\9)::-webkit-progress-value {
   border-start-start-radius: 10px;
   border-start-end-radius: 0;
   border-end-start-radius: 10px;
   border-end-end-radius: 0;
   background-color: var(--color-background-progress-bar-content-default-yvwdkl, #0972d3);
 }
-.awsui_progress_11huc_1ah81_197.awsui_complete_11huc_1ah81_360:not(#\9)::-webkit-progress-value {
+.awsui_progress_11huc_paiso_197.awsui_complete_11huc_paiso_360:not(#\9)::-webkit-progress-value {
   border-start-start-radius: 10px;
   border-start-end-radius: 10px;
   border-end-start-radius: 10px;
   border-end-end-radius: 10px;
 }
-.awsui_progress_11huc_1ah81_197:not(#\9)::-moz-progress-bar {
+.awsui_progress_11huc_paiso_197:not(#\9)::-moz-progress-bar {
   border-start-start-radius: 10px;
   border-start-end-radius: 0;
   border-end-start-radius: 10px;
   border-end-end-radius: 0;
   background-color: var(--color-background-progress-bar-content-default-yvwdkl, #0972d3);
 }
-.awsui_progress_11huc_1ah81_197:not(#\9)::-ms-fill {
+.awsui_progress_11huc_paiso_197:not(#\9)::-ms-fill {
   border-start-start-radius: 10px;
   border-start-end-radius: 0;
   border-end-start-radius: 10px;
@@ -383,24 +383,28 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-block: none;
   border-inline: none;
 }
-.awsui_progress_11huc_1ah81_197.awsui_complete_11huc_1ah81_360:not(#\9)::-ms-fill {
+.awsui_progress_11huc_paiso_197.awsui_complete_11huc_paiso_360:not(#\9)::-ms-fill {
   border-start-start-radius: 10px;
   border-start-end-radius: 10px;
   border-end-start-radius: 10px;
   border-end-end-radius: 10px;
 }
-.awsui_progress_11huc_1ah81_197.awsui_progress-in-flash_11huc_1ah81_388:not(#\9) {
+.awsui_progress_11huc_paiso_197.awsui_progress-in-flash_11huc_paiso_388:not(#\9) {
   background-color: var(--color-background-progress-bar-layout-in-flash-rlu77n, rgba(255, 255, 255, 0.25));
 }
-.awsui_progress_11huc_1ah81_197.awsui_progress-in-flash_11huc_1ah81_388:not(#\9)::-webkit-progress-bar {
+.awsui_progress_11huc_paiso_197.awsui_progress-in-flash_11huc_paiso_388:not(#\9)::-webkit-progress-bar {
   background-color: var(--color-background-progress-bar-layout-in-flash-rlu77n, rgba(255, 255, 255, 0.25));
 }
-.awsui_progress_11huc_1ah81_197.awsui_progress-in-flash_11huc_1ah81_388:not(#\9)::-webkit-progress-value {
+.awsui_progress_11huc_paiso_197.awsui_progress-in-flash_11huc_paiso_388:not(#\9)::-webkit-progress-value {
   background-color: var(--color-background-progress-bar-content-in-flash-ccuxyt, #ffffff);
 }
-.awsui_progress_11huc_1ah81_197.awsui_progress-in-flash_11huc_1ah81_388:not(#\9)::-moz-progress-bar {
+.awsui_progress_11huc_paiso_197.awsui_progress-in-flash_11huc_paiso_388:not(#\9)::-moz-progress-bar {
   background-color: var(--color-background-progress-bar-content-in-flash-ccuxyt, #ffffff);
 }
-.awsui_progress_11huc_1ah81_197.awsui_progress-in-flash_11huc_1ah81_388:not(#\9)::-ms-fill {
+.awsui_progress_11huc_paiso_197.awsui_progress-in-flash_11huc_paiso_388:not(#\9)::-ms-fill {
   background-color: rgba(255, 255, 255, 0.7);
+}
+
+.awsui_additional-info_11huc_paiso_404:not(#\9) {
+  /* used in test-utils */
 }

package/progress-bar/styles.selectors.js

@@ -2,23 +2,24 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "progress": "awsui_progress_11huc_1ah81_197",
-  "result-state": "awsui_result-state_11huc_1ah81_211",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_1ah81_1",
-  "root": "awsui_root_11huc_1ah81_233",
-  "with-result-button": "awsui_with-result-button_11huc_1ah81_268",
-  "result-text": "awsui_result-text_11huc_1ah81_272",
-  "result-container-error": "awsui_result-container-error_11huc_1ah81_276",
-  "result-container-success": "awsui_result-container-success_11huc_1ah81_276",
-  "result-button": "awsui_result-button_11huc_1ah81_280",
-  "word-wrap": "awsui_word-wrap_11huc_1ah81_286",
-  "label-flash": "awsui_label-flash_11huc_1ah81_291",
-  "label-key-value": "awsui_label-key-value_11huc_1ah81_295",
-  "flash": "awsui_flash_11huc_1ah81_303",
-  "progress-container": "awsui_progress-container_11huc_1ah81_307",
-  "percentage-container": "awsui_percentage-container_11huc_1ah81_314",
-  "percentage": "awsui_percentage_11huc_1ah81_314",
-  "complete": "awsui_complete_11huc_1ah81_360",
-  "progress-in-flash": "awsui_progress-in-flash_11huc_1ah81_388"
+  "progress": "awsui_progress_11huc_paiso_197",
+  "result-state": "awsui_result-state_11huc_paiso_211",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_paiso_1",
+  "root": "awsui_root_11huc_paiso_233",
+  "with-result-button": "awsui_with-result-button_11huc_paiso_268",
+  "result-text": "awsui_result-text_11huc_paiso_272",
+  "result-container-error": "awsui_result-container-error_11huc_paiso_276",
+  "result-container-success": "awsui_result-container-success_11huc_paiso_276",
+  "result-button": "awsui_result-button_11huc_paiso_280",
+  "word-wrap": "awsui_word-wrap_11huc_paiso_286",
+  "label-flash": "awsui_label-flash_11huc_paiso_291",
+  "label-key-value": "awsui_label-key-value_11huc_paiso_295",
+  "flash": "awsui_flash_11huc_paiso_303",
+  "progress-container": "awsui_progress-container_11huc_paiso_307",
+  "percentage-container": "awsui_percentage-container_11huc_paiso_314",
+  "percentage": "awsui_percentage_11huc_paiso_314",
+  "complete": "awsui_complete_11huc_paiso_360",
+  "progress-in-flash": "awsui_progress-in-flash_11huc_paiso_388",
+  "additional-info": "awsui_additional-info_11huc_paiso_404"
 };
   

package/property-filter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/property-filter/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAUrE,OAAO,EACL,mBAAmB,EAWpB,MAAM,cAAc,CAAC;AAetB,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAgC/B,QAAA,MAAM,cAAc,qGAyYnB,CAAC;AAGF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/property-filter/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAUrE,OAAO,EACL,mBAAmB,EAWpB,MAAM,cAAc,CAAC;AAgBtB,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAgC/B,QAAA,MAAM,cAAc,qGAmZnB,CAAC;AAGF,eAAe,cAAc,CAAC"}

package/property-filter/index.js

@@ -21,6 +21,7 @@ import { matchTokenValue } from './utils';
 import { useInternalI18n } from '../i18n/context';
 import TokenList from '../internal/components/token-list';
 import { SearchResults } from '../text-filter/search-results';
+import { joinStrings } from '../internal/utils/strings';
 function getOperatorI18nString(operator) {
     switch (operator) {
         case '=':
@@ -52,7 +53,7 @@ function getOperatorI18nString(operator) {
 }
 const PropertyFilter = React.forwardRef((_a, ref) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
-    var { disabled, countText, query, hideOperations, onChange, filteringProperties, filteringOptions = [], customGroupsText = [], disableFreeTextFiltering = false, freeTextFiltering, onLoadItems, virtualScroll, customControl, customFilterActions, filteringPlaceholder, filteringAriaLabel, filteringEmpty, filteringLoadingText, filteringFinishedText, filteringErrorText, filteringRecoveryText, filteringStatusType, asyncProperties, tokenLimit, expandToViewport, tokenLimitShowFewerAriaLabel, tokenLimitShowMoreAriaLabel } = _a, rest = __rest(_a, ["disabled", "countText", "query", "hideOperations", "onChange", "filteringProperties", "filteringOptions", "customGroupsText", "disableFreeTextFiltering", "freeTextFiltering", "onLoadItems", "virtualScroll", "customControl", "customFilterActions", "filteringPlaceholder", "filteringAriaLabel", "filteringEmpty", "filteringLoadingText", "filteringFinishedText", "filteringErrorText", "filteringRecoveryText", "filteringStatusType", "asyncProperties", "tokenLimit", "expandToViewport", "tokenLimitShowFewerAriaLabel", "tokenLimitShowMoreAriaLabel"]);
+    var { disabled, countText, query, hideOperations, onChange, filteringProperties, filteringOptions = [], customGroupsText = [], disableFreeTextFiltering = false, freeTextFiltering, onLoadItems, virtualScroll, customControl, customFilterActions, filteringPlaceholder, filteringAriaLabel, filteringEmpty, filteringLoadingText, filteringFinishedText, filteringErrorText, filteringRecoveryText, filteringConstraintText, filteringStatusType, asyncProperties, tokenLimit, expandToViewport, tokenLimitShowFewerAriaLabel, tokenLimitShowMoreAriaLabel } = _a, rest = __rest(_a, ["disabled", "countText", "query", "hideOperations", "onChange", "filteringProperties", "filteringOptions", "customGroupsText", "disableFreeTextFiltering", "freeTextFiltering", "onLoadItems", "virtualScroll", "customControl", "customFilterActions", "filteringPlaceholder", "filteringAriaLabel", "filteringEmpty", "filteringLoadingText", "filteringFinishedText", "filteringErrorText", "filteringRecoveryText", "filteringConstraintText", "filteringStatusType", "asyncProperties", "tokenLimit", "expandToViewport", "tokenLimitShowFewerAriaLabel", "tokenLimitShowMoreAriaLabel"]);
     const { __internalRootRef } = useBaseComponent('PropertyFilter', {
         props: { asyncProperties, disableFreeTextFiltering, expandToViewport, hideOperations, tokenLimit, virtualScroll },
     });
@@ -212,10 +213,14 @@ const PropertyFilter = React.forwardRef((_a, ref) => {
     };
     const operatorForm = parsedText.step === 'property' && parsedText.property.getValueFormRenderer(parsedText.operator);
     const searchResultsId = useUniqueId('property-filter-search-results');
+    const constraintTextId = useUniqueId('property-filter-constraint');
+    const textboxAriaDescribedBy = filteringConstraintText
+        ? joinStrings(rest.ariaDescribedby, constraintTextId)
+        : rest.ariaDescribedby;
     return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }),
         React.createElement("div", { className: styles['search-field'] },
             customControl && React.createElement("div", { className: styles['custom-control'] }, customControl),
-            React.createElement(PropertyFilterAutosuggest, Object.assign({ ref: inputRef, virtualScroll: virtualScroll, enteredTextLabel: i18nStrings.enteredTextLabel, ariaLabel: filteringAriaLabel !== null && filteringAriaLabel !== void 0 ? filteringAriaLabel : i18nStrings.filteringAriaLabel, placeholder: filteringPlaceholder !== null && filteringPlaceholder !== void 0 ? filteringPlaceholder : i18nStrings.filteringPlaceholder, ariaLabelledby: rest.ariaLabelledby, ariaDescribedby: rest.ariaDescribedby, controlId: rest.controlId, value: filteringText, disabled: disabled, onKeyDown: handleKeyDown }, autosuggestOptions, { onChange: event => setFilteringText(event.detail.value), empty: filteringEmpty }, asyncAutosuggestProps, { expandToViewport: expandToViewport, onOptionClick: handleSelected, customForm: operatorForm && (React.createElement(PropertyEditor, { property: parsedText.property, operator: parsedText.operator, filter: parsedText.value, operatorForm: operatorForm, i18nStrings: i18nStrings, onCancel: () => {
+            React.createElement(PropertyFilterAutosuggest, Object.assign({ ref: inputRef, virtualScroll: virtualScroll, enteredTextLabel: i18nStrings.enteredTextLabel, ariaLabel: filteringAriaLabel !== null && filteringAriaLabel !== void 0 ? filteringAriaLabel : i18nStrings.filteringAriaLabel, placeholder: filteringPlaceholder !== null && filteringPlaceholder !== void 0 ? filteringPlaceholder : i18nStrings.filteringPlaceholder, ariaLabelledby: rest.ariaLabelledby, ariaDescribedby: textboxAriaDescribedBy, controlId: rest.controlId, value: filteringText, disabled: disabled, onKeyDown: handleKeyDown }, autosuggestOptions, { onChange: event => setFilteringText(event.detail.value), empty: filteringEmpty }, asyncAutosuggestProps, { expandToViewport: expandToViewport, onOptionClick: handleSelected, customForm: operatorForm && (React.createElement(PropertyEditor, { property: parsedText.property, operator: parsedText.operator, filter: parsedText.value, operatorForm: operatorForm, i18nStrings: i18nStrings, onCancel: () => {
                         var _a, _b;
                         setFilteringText('');
                         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.close();
@@ -229,6 +234,7 @@ const PropertyFilter = React.forwardRef((_a, ref) => {
                     } })), hideEnteredTextOption: internalFreeText.disabled && parsedText.step !== 'property', clearAriaLabel: i18nStrings.clearAriaLabel, searchResultsId: showResults ? searchResultsId : undefined })),
             showResults ? (React.createElement("div", { className: styles.results },
                 React.createElement(SearchResults, { id: searchResultsId }, countText))) : null),
+        filteringConstraintText && (React.createElement("div", { id: constraintTextId, className: styles.constraint }, filteringConstraintText)),
         internalQuery.tokens && internalQuery.tokens.length > 0 && (React.createElement("div", { className: styles.tokens },
             React.createElement(InternalSpaceBetween, { size: "xs", direction: "horizontal" },
                 React.createElement(TokenList, { alignment: "inline", limit: tokenLimit, items: internalQuery.tokens, limitShowFewerAriaLabel: tokenLimitShowFewerAriaLabel, limitShowMoreAriaLabel: tokenLimitShowMoreAriaLabel, renderItem: (token, tokenIndex) => (React.createElement(TokenButton, { token: token, first: tokenIndex === 0, operation: internalQuery.operation, removeToken: () => {