@cloudscape-design/components 3.0.634 → 3.0.636

package/form-field/internal.js

@@ -110,7 +110,7 @@ export default function InternalFormField(_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);
     return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }, analyticsAttributes),
-        React.createElement("div", { className: clsx(__hideLabel && styles['visually-hidden']) },
+        React.createElement("div", { className: clsx(styles['label-wrapper'], __hideLabel && styles['visually-hidden']) },
             label && (React.createElement("label", { className: styles.label, id: slotIds.label, htmlFor: generatedControlId }, label)),
             React.createElement(InfoLinkLabelContext.Provider, { value: slotIds.label }, !__hideLabel && info && React.createElement("span", { className: styles.info }, info))),
         description && (React.createElement("div", { className: styles.description, id: slotIds.description }, description)),

package/form-field/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n  DATA_ATTR_FIELD_ERROR,\n  DATA_ATTR_FIELD_LABEL,\n  getFieldSlotSeletor,\n  getNameFromSelector,\n  getSubStepAllSelector,\n} from '../internal/analytics/selectors';\nimport LiveRegion from '../internal/components/live-region';\n\ninterface FormFieldErrorProps {\n  id?: string;\n  children?: React.ReactNode;\n  errorIconAriaLabel?: string;\n}\n\ninterface FormFieldWarningProps {\n  id?: string;\n  children?: React.ReactNode;\n  warningIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n  const i18n = useInternalI18n('form-field');\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const i18nErrorIconAriaLabel = i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel);\n\n  return (\n    <>\n      <div id={id} className={styles.error}>\n        <div className={styles['error-icon-shake-wrapper']}>\n          <div role=\"img\" aria-label={i18nErrorIconAriaLabel} className={styles['error-icon-scale-wrapper']}>\n            <InternalIcon name=\"status-negative\" size=\"small\" />\n          </div>\n        </div>\n        <span className={styles.error__message} ref={contentRef}>\n          {children}\n        </span>\n      </div>\n\n      <LiveRegion assertive={true} source={[i18nErrorIconAriaLabel, contentRef]} />\n    </>\n  );\n}\n\nexport function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFieldWarningProps) {\n  const i18n = useInternalI18n('form-field');\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const i18nWarningIconAriaLabel = i18n('i18nStrings.warningIconAriaLabel', warningIconAriaLabel);\n\n  return (\n    <>\n      <div id={id} className={styles.warning}>\n        <div className={styles['warning-icon-shake-wrapper']}>\n          <div role=\"img\" aria-label={i18nWarningIconAriaLabel} className={styles['warning-icon-scale-wrapper']}>\n            <InternalIcon name=\"status-warning\" size=\"small\" />\n          </div>\n        </div>\n        <span className={styles.warning__message} ref={contentRef}>\n          {children}\n        </span>\n      </div>\n\n      <LiveRegion assertive={true} source={[i18nWarningIconAriaLabel, contentRef]} />\n    </>\n  );\n}\n\nexport function ConstraintText({\n  id,\n  hasValidationText,\n  children,\n}: {\n  id?: string;\n  hasValidationText: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <div id={id} className={clsx(styles.constraint, hasValidationText && styles['constraint-has-validation-text'])}>\n      {children}\n    </div>\n  );\n}\n\nexport default function InternalFormField({\n  controlId,\n  stretch = false,\n  label,\n  info,\n  i18nStrings,\n  children,\n  secondaryControl,\n  description,\n  constraintText,\n  errorText,\n  warningText,\n  __hideLabel,\n  __internalRootRef = null,\n  __disableGutters = false,\n  __analyticsMetadata = undefined,\n  ...rest\n}: InternalFormFieldProps) {\n  const baseProps = getBaseProps(rest);\n  const isRefresh = useVisualRefresh();\n\n  const instanceUniqueId = useUniqueId('formField');\n  const generatedControlId = controlId || instanceUniqueId;\n  const formFieldId = controlId || generatedControlId;\n\n  const { funnelIdentifier, funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n  const { stepIdentifier, stepNumber, stepNameSelector } = useFunnelStep();\n  const { subStepErrorContext, subStepIdentifier, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n  const showWarning = warningText && !errorText;\n\n  if (warningText && errorText) {\n    warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n  }\n\n  const slotIds = getSlotIds(\n    formFieldId,\n    label,\n    description,\n    constraintText,\n    errorText,\n    showWarning ? warningText : undefined\n  );\n\n  const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n  const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n  const {\n    ariaLabelledby: parentAriaLabelledby,\n    ariaDescribedby: parentAriaDescribedby,\n    invalid: parentInvalid,\n    warning: parentWarning,\n  } = useFormFieldContext({});\n\n  const contextValuesWithoutControlId = {\n    ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n    ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n    invalid: !!errorText || !!parentInvalid,\n    warning: (!!warningText && !errorText) || (!!parentWarning && !parentInvalid),\n  };\n\n  const analyticsAttributes = {\n    [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n    [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n  };\n\n  useEffect(() => {\n    if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n      const stepName = getNameFromSelector(stepNameSelector);\n      const subStepName = getNameFromSelector(subStepNameSelector);\n\n      errorCount.current++;\n\n      // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n      const errorIsVisible = (__internalRootRef?.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n      if (errorIsVisible) {\n        FunnelMetrics.funnelSubStepError({\n          funnelInteractionId,\n          funnelIdentifier,\n          subStepSelector,\n          subStepName,\n          subStepNameSelector,\n          subStepIdentifier,\n          stepNumber,\n          stepName,\n          stepNameSelector,\n          stepIdentifier,\n          subStepErrorContext,\n          fieldErrorSelector: `${getFieldSlotSeletor(slotIds.error)} .${styles.error__message}`,\n          fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n          subStepAllSelector: getSubStepAllSelector(),\n          fieldIdentifier: __analyticsMetadata?.instanceIdentifier,\n          fieldErrorContext: __analyticsMetadata?.errorContext,\n        });\n      }\n\n      return () => {\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        errorCount.current--;\n      };\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root)}\n      ref={__internalRootRef}\n      {...analyticsAttributes}\n    >\n      <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n        {label && (\n          <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n            {label}\n          </label>\n        )}\n        <InfoLinkLabelContext.Provider value={slotIds.label}>\n          {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n        </InfoLinkLabelContext.Provider>\n      </div>\n\n      {description && (\n        <div className={styles.description} id={slotIds.description}>\n          {description}\n        </div>\n      )}\n\n      <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n        <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n          <FormFieldContext.Provider\n            value={{\n              controlId: generatedControlId,\n              ...contextValuesWithoutControlId,\n            }}\n          >\n            {children && <div className={styles.control}>{children}</div>}\n          </FormFieldContext.Provider>\n\n          {secondaryControl && (\n            <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n              <div className={styles['secondary-control']}>{secondaryControl}</div>\n            </FormFieldContext.Provider>\n          )}\n        </InternalGrid>\n      </div>\n\n      {(constraintText || errorText || warningText) && (\n        <div className={styles.hints}>\n          {errorText && (\n            <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n              {errorText}\n            </FormFieldError>\n          )}\n          {showWarning && (\n            <FormFieldWarning id={slotIds.warning} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n              {warningText}\n            </FormFieldWarning>\n          )}\n          {constraintText && (\n            <ConstraintText id={slotIds.constraint} hasValidationText={!!errorText || !!warningText}>\n              {constraintText}\n            </ConstraintText>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAEzE,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAE3E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAEnF,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AACpG,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAc5D,MAAM,UAAU,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAuB;IACtF,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,sBAAsB,GAAG,IAAI,CAAC,gCAAgC,EAAE,kBAAkB,CAAC,CAAC;IAE1F,OAAO,CACL;QACE,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK;YAClC,6BAAK,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;gBAChD,6BAAK,IAAI,EAAC,KAAK,gBAAa,sBAAsB,EAAE,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;oBAC/F,oBAAC,YAAY,IAAC,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,OAAO,GAAG,CAChD,CACF;YACN,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,GAAG,EAAE,UAAU,IACpD,QAAQ,CACJ,CACH;QAEN,oBAAC,UAAU,IAAC,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,sBAAsB,EAAE,UAAU,CAAC,GAAI,CAC5E,CACJ,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,oBAAoB,EAAyB;IAC5F,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,wBAAwB,GAAG,IAAI,CAAC,kCAAkC,EAAE,oBAAoB,CAAC,CAAC;IAEhG,OAAO,CACL;QACE,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO;YACpC,6BAAK,SAAS,EAAE,MAAM,CAAC,4BAA4B,CAAC;gBAClD,6BAAK,IAAI,EAAC,KAAK,gBAAa,wBAAwB,EAAE,SAAS,EAAE,MAAM,CAAC,4BAA4B,CAAC;oBACnG,oBAAC,YAAY,IAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAG,CAC/C,CACF;YACN,8BAAM,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAE,GAAG,EAAE,UAAU,IACtD,QAAQ,CACJ,CACH;QAEN,oBAAC,UAAU,IAAC,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,wBAAwB,EAAE,UAAU,CAAC,GAAI,CAC9E,CACJ,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAC7B,EAAE,EACF,iBAAiB,EACjB,QAAQ,GAKT;IACC,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,iBAAiB,IAAI,MAAM,CAAC,gCAAgC,CAAC,CAAC,IAC3G,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAiBjB;QAjBiB,EACxC,SAAS,EACT,OAAO,GAAG,KAAK,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,EACX,iBAAiB,GAAG,IAAI,EACxB,gBAAgB,GAAG,KAAK,EACxB,mBAAmB,GAAG,SAAS,OAER,EADpB,IAAI,cAhBiC,oOAiBzC,CADQ;IAEP,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,gBAAgB,GAAG,WAAW,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,kBAAkB,GAAG,SAAS,IAAI,gBAAgB,CAAC;IACzD,MAAM,WAAW,GAAG,SAAS,IAAI,kBAAkB,CAAC;IAEpD,MAAM,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,CAAC;IAC1G,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IACzE,MAAM,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,eAAe,EAAE,mBAAmB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE5G,MAAM,WAAW,GAAG,WAAW,IAAI,CAAC,SAAS,CAAC;IAE9C,IAAI,WAAW,IAAI,SAAS,EAAE;QAC5B,QAAQ,CAAC,YAAY,EAAE,4EAA4E,CAAC,CAAC;KACtG;IAED,MAAM,OAAO,GAAG,UAAU,CACxB,WAAW,EACX,KAAK,EACL,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CACtC,CAAC;IAEF,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAEpD,MAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAEjF,MAAM,EACJ,cAAc,EAAE,oBAAoB,EACpC,eAAe,EAAE,qBAAqB,EACtC,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,aAAa,GACvB,GAAG,mBAAmB,CAAC,EAAE,CAAC,CAAC;IAE5B,MAAM,6BAA6B,GAAG;QACpC,cAAc,EAAE,WAAW,CAAC,oBAAoB,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,SAAS;QAC7E,eAAe,EAAE,WAAW,CAAC,qBAAqB,EAAE,eAAe,CAAC,IAAI,SAAS;QACjF,OAAO,EAAE,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,aAAa;QACvC,OAAO,EAAE,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC;KAC9E,CAAC;IAEF,MAAM,mBAAmB,GAAG;QAC1B,CAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;QACvF,CAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;KACxF,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,mBAAmB,IAAI,SAAS,IAAI,WAAW,CAAC,OAAO,KAAK,UAAU,EAAE;YAC1E,MAAM,QAAQ,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;YACvD,MAAM,WAAW,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;YAE7D,UAAU,CAAC,OAAO,EAAE,CAAC;YAErB,uFAAuF;YACvF,MAAM,cAAc,GAAG,CAAC,MAAA,MAAA,MAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,OAAO,0CAAE,qBAAqB,EAAE,0CAAE,KAAK,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAC;YAE7F,IAAI,cAAc,EAAE;gBAClB,aAAa,CAAC,kBAAkB,CAAC;oBAC/B,mBAAmB;oBACnB,gBAAgB;oBAChB,eAAe;oBACf,WAAW;oBACX,mBAAmB;oBACnB,iBAAiB;oBACjB,UAAU;oBACV,QAAQ;oBACR,gBAAgB;oBAChB,cAAc;oBACd,mBAAmB;oBACnB,kBAAkB,EAAE,GAAG,mBAAmB,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC,cAAc,EAAE;oBACrF,kBAAkB,EAAE,mBAAmB,CAAC,OAAO,CAAC,KAAK,CAAC;oBACtD,kBAAkB,EAAE,qBAAqB,EAAE;oBAC3C,eAAe,EAAE,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,kBAAkB;oBACxD,iBAAiB,EAAE,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,YAAY;iBACrD,CAAC,CAAC;aACJ;YAED,OAAO,GAAG,EAAE;gBACV,uDAAuD;gBACvD,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,CAAC,CAAC;SACH;QAED,uDAAuD;IACzD,CAAC,EAAE,CAAC,mBAAmB,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEpE,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EACjD,GAAG,EAAE,iBAAiB,IAClB,mBAAmB;QAEvB,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,WAAW,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC;YACpF,KAAK,IAAI,CACR,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,kBAAkB,IAC3E,KAAK,CACA,CACT;YACD,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,CAAC,KAAK,IAChD,CAAC,WAAW,IAAI,IAAI,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAQ,CACtC,CAC5B;QAEL,WAAW,IAAI,CACd,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,EAAE,EAAE,OAAO,CAAC,WAAW,IACxD,WAAW,CACR,CACP;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,WAAW,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC;YAC1E,oBAAC,YAAY,IAAC,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,gBAAgB;gBAC5E,oBAAC,gBAAgB,CAAC,QAAQ,IACxB,KAAK,kBACH,SAAS,EAAE,kBAAkB,IAC1B,6BAA6B,KAGjC,QAAQ,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CACnC;gBAE3B,gBAAgB,IAAI,CACnB,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,6BAA6B;oBAC7D,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,gBAAgB,CAAO,CAC3C,CAC7B,CACY,CACX;QAEL,CAAC,cAAc,IAAI,SAAS,IAAI,WAAW,CAAC,IAAI,CAC/C,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK;YACzB,SAAS,IAAI,CACZ,oBAAC,cAAc,IAAC,EAAE,EAAE,OAAO,CAAC,KAAK,EAAE,kBAAkB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,IACnF,SAAS,CACK,CAClB;YACA,WAAW,IAAI,CACd,oBAAC,gBAAgB,IAAC,EAAE,EAAE,OAAO,CAAC,OAAO,EAAE,oBAAoB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oBAAoB,IAC3F,WAAW,CACK,CACpB;YACA,cAAc,IAAI,CACjB,oBAAC,cAAc,IAAC,EAAE,EAAE,OAAO,CAAC,UAAU,EAAE,iBAAiB,EAAE,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,WAAW,IACpF,cAAc,CACA,CAClB,CACG,CACP,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n  DATA_ATTR_FIELD_ERROR,\n  DATA_ATTR_FIELD_LABEL,\n  getFieldSlotSeletor,\n  getNameFromSelector,\n  getSubStepAllSelector,\n} from '../internal/analytics/selectors';\nimport LiveRegion from '../internal/components/live-region';\n\ninterface FormFieldErrorProps {\n  id?: string;\n  children?: React.ReactNode;\n  errorIconAriaLabel?: string;\n}\n\ninterface FormFieldWarningProps {\n  id?: string;\n  children?: React.ReactNode;\n  warningIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n  const i18n = useInternalI18n('form-field');\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const i18nErrorIconAriaLabel = i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel);\n\n  return (\n    <>\n      <div id={id} className={styles.error}>\n        <div className={styles['error-icon-shake-wrapper']}>\n          <div role=\"img\" aria-label={i18nErrorIconAriaLabel} className={styles['error-icon-scale-wrapper']}>\n            <InternalIcon name=\"status-negative\" size=\"small\" />\n          </div>\n        </div>\n        <span className={styles.error__message} ref={contentRef}>\n          {children}\n        </span>\n      </div>\n\n      <LiveRegion assertive={true} source={[i18nErrorIconAriaLabel, contentRef]} />\n    </>\n  );\n}\n\nexport function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFieldWarningProps) {\n  const i18n = useInternalI18n('form-field');\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const i18nWarningIconAriaLabel = i18n('i18nStrings.warningIconAriaLabel', warningIconAriaLabel);\n\n  return (\n    <>\n      <div id={id} className={styles.warning}>\n        <div className={styles['warning-icon-shake-wrapper']}>\n          <div role=\"img\" aria-label={i18nWarningIconAriaLabel} className={styles['warning-icon-scale-wrapper']}>\n            <InternalIcon name=\"status-warning\" size=\"small\" />\n          </div>\n        </div>\n        <span className={styles.warning__message} ref={contentRef}>\n          {children}\n        </span>\n      </div>\n\n      <LiveRegion assertive={true} source={[i18nWarningIconAriaLabel, contentRef]} />\n    </>\n  );\n}\n\nexport function ConstraintText({\n  id,\n  hasValidationText,\n  children,\n}: {\n  id?: string;\n  hasValidationText: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <div id={id} className={clsx(styles.constraint, hasValidationText && styles['constraint-has-validation-text'])}>\n      {children}\n    </div>\n  );\n}\n\nexport default function InternalFormField({\n  controlId,\n  stretch = false,\n  label,\n  info,\n  i18nStrings,\n  children,\n  secondaryControl,\n  description,\n  constraintText,\n  errorText,\n  warningText,\n  __hideLabel,\n  __internalRootRef = null,\n  __disableGutters = false,\n  __analyticsMetadata = undefined,\n  ...rest\n}: InternalFormFieldProps) {\n  const baseProps = getBaseProps(rest);\n  const isRefresh = useVisualRefresh();\n\n  const instanceUniqueId = useUniqueId('formField');\n  const generatedControlId = controlId || instanceUniqueId;\n  const formFieldId = controlId || generatedControlId;\n\n  const { funnelIdentifier, funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n  const { stepIdentifier, stepNumber, stepNameSelector } = useFunnelStep();\n  const { subStepErrorContext, subStepIdentifier, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n  const showWarning = warningText && !errorText;\n\n  if (warningText && errorText) {\n    warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n  }\n\n  const slotIds = getSlotIds(\n    formFieldId,\n    label,\n    description,\n    constraintText,\n    errorText,\n    showWarning ? warningText : undefined\n  );\n\n  const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n  const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n  const {\n    ariaLabelledby: parentAriaLabelledby,\n    ariaDescribedby: parentAriaDescribedby,\n    invalid: parentInvalid,\n    warning: parentWarning,\n  } = useFormFieldContext({});\n\n  const contextValuesWithoutControlId = {\n    ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n    ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n    invalid: !!errorText || !!parentInvalid,\n    warning: (!!warningText && !errorText) || (!!parentWarning && !parentInvalid),\n  };\n\n  const analyticsAttributes = {\n    [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n    [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n  };\n\n  useEffect(() => {\n    if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n      const stepName = getNameFromSelector(stepNameSelector);\n      const subStepName = getNameFromSelector(subStepNameSelector);\n\n      errorCount.current++;\n\n      // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n      const errorIsVisible = (__internalRootRef?.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n      if (errorIsVisible) {\n        FunnelMetrics.funnelSubStepError({\n          funnelInteractionId,\n          funnelIdentifier,\n          subStepSelector,\n          subStepName,\n          subStepNameSelector,\n          subStepIdentifier,\n          stepNumber,\n          stepName,\n          stepNameSelector,\n          stepIdentifier,\n          subStepErrorContext,\n          fieldErrorSelector: `${getFieldSlotSeletor(slotIds.error)} .${styles.error__message}`,\n          fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n          subStepAllSelector: getSubStepAllSelector(),\n          fieldIdentifier: __analyticsMetadata?.instanceIdentifier,\n          fieldErrorContext: __analyticsMetadata?.errorContext,\n        });\n      }\n\n      return () => {\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        errorCount.current--;\n      };\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root)}\n      ref={__internalRootRef}\n      {...analyticsAttributes}\n    >\n      <div className={clsx(styles['label-wrapper'], __hideLabel && styles['visually-hidden'])}>\n        {label && (\n          <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n            {label}\n          </label>\n        )}\n        <InfoLinkLabelContext.Provider value={slotIds.label}>\n          {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n        </InfoLinkLabelContext.Provider>\n      </div>\n\n      {description && (\n        <div className={styles.description} id={slotIds.description}>\n          {description}\n        </div>\n      )}\n\n      <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n        <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n          <FormFieldContext.Provider\n            value={{\n              controlId: generatedControlId,\n              ...contextValuesWithoutControlId,\n            }}\n          >\n            {children && <div className={styles.control}>{children}</div>}\n          </FormFieldContext.Provider>\n\n          {secondaryControl && (\n            <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n              <div className={styles['secondary-control']}>{secondaryControl}</div>\n            </FormFieldContext.Provider>\n          )}\n        </InternalGrid>\n      </div>\n\n      {(constraintText || errorText || warningText) && (\n        <div className={styles.hints}>\n          {errorText && (\n            <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n              {errorText}\n            </FormFieldError>\n          )}\n          {showWarning && (\n            <FormFieldWarning id={slotIds.warning} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n              {warningText}\n            </FormFieldWarning>\n          )}\n          {constraintText && (\n            <ConstraintText id={slotIds.constraint} hasValidationText={!!errorText || !!warningText}>\n              {constraintText}\n            </ConstraintText>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/form-field/styles.css.js

@@ -1,28 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_3golc_103",
-  "warning-icon-shake-wrapper": "awsui_warning-icon-shake-wrapper_14mhv_3golc_104",
-  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_3golc_1",
-  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_3golc_134",
-  "warning-icon-scale-wrapper": "awsui_warning-icon-scale-wrapper_14mhv_3golc_135",
-  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_3golc_1",
-  "warning": "awsui_warning_14mhv_3golc_104",
-  "error": "awsui_error_14mhv_3golc_103",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_3golc_1",
-  "root": "awsui_root_14mhv_3golc_186",
-  "label": "awsui_label_14mhv_3golc_222",
-  "info": "awsui_info_14mhv_3golc_236",
-  "description": "awsui_description_14mhv_3golc_242",
-  "constraint": "awsui_constraint_14mhv_3golc_243",
-  "hints": "awsui_hints_14mhv_3golc_250",
-  "constraint-has-validation-text": "awsui_constraint-has-validation-text_14mhv_3golc_251",
-  "secondary-control": "awsui_secondary-control_14mhv_3golc_255",
-  "controls": "awsui_controls_14mhv_3golc_259",
-  "label-hidden": "awsui_label-hidden_14mhv_3golc_259",
-  "control": "awsui_control_14mhv_3golc_259",
-  "error__message": "awsui_error__message_14mhv_3golc_286",
-  "warning__message": "awsui_warning__message_14mhv_3golc_287",
-  "visually-hidden": "awsui_visually-hidden_14mhv_3golc_291"
+  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_3lyk6_103",
+  "warning-icon-shake-wrapper": "awsui_warning-icon-shake-wrapper_14mhv_3lyk6_104",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_3lyk6_1",
+  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_3lyk6_134",
+  "warning-icon-scale-wrapper": "awsui_warning-icon-scale-wrapper_14mhv_3lyk6_135",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_3lyk6_1",
+  "warning": "awsui_warning_14mhv_3lyk6_104",
+  "error": "awsui_error_14mhv_3lyk6_103",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_3lyk6_1",
+  "root": "awsui_root_14mhv_3lyk6_186",
+  "label": "awsui_label_14mhv_3lyk6_222",
+  "info": "awsui_info_14mhv_3lyk6_236",
+  "description": "awsui_description_14mhv_3lyk6_242",
+  "constraint": "awsui_constraint_14mhv_3lyk6_243",
+  "hints": "awsui_hints_14mhv_3lyk6_250",
+  "constraint-has-validation-text": "awsui_constraint-has-validation-text_14mhv_3lyk6_251",
+  "secondary-control": "awsui_secondary-control_14mhv_3lyk6_255",
+  "controls": "awsui_controls_14mhv_3lyk6_259",
+  "label-hidden": "awsui_label-hidden_14mhv_3lyk6_259",
+  "label-wrapper": "awsui_label-wrapper_14mhv_3lyk6_262",
+  "control": "awsui_control_14mhv_3lyk6_259",
+  "error__message": "awsui_error__message_14mhv_3lyk6_289",
+  "warning__message": "awsui_warning__message_14mhv_3lyk6_290",
+  "visually-hidden": "awsui_visually-hidden_14mhv_3lyk6_294"
 };
   

package/form-field/styles.scoped.css

@@ -100,11 +100,11 @@ 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_error-icon-shake-wrapper_14mhv_3golc_103:not(#\9),
-.awsui_warning-icon-shake-wrapper_14mhv_3golc_104:not(#\9) {
-  animation: awsui_awsui-motion-shake-horizontally_14mhv_3golc_1 var(--motion-duration-refresh-only-medium-nf6485, 165ms);
+.awsui_error-icon-shake-wrapper_14mhv_3lyk6_103:not(#\9),
+.awsui_warning-icon-shake-wrapper_14mhv_3lyk6_104:not(#\9) {
+  animation: awsui_awsui-motion-shake-horizontally_14mhv_3lyk6_1 var(--motion-duration-refresh-only-medium-nf6485, 165ms);
 }
-@keyframes awsui_awsui-motion-shake-horizontally_14mhv_3golc_1 {
+@keyframes awsui_awsui-motion-shake-horizontally_14mhv_3lyk6_1 {
   0% {
     transform: translateX(-5px);
     animation-timing-function: linear;
@@ -118,22 +118,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_error-icon-shake-wrapper_14mhv_3golc_103:not(#\9),
-  .awsui_warning-icon-shake-wrapper_14mhv_3golc_104:not(#\9) {
+  .awsui_error-icon-shake-wrapper_14mhv_3lyk6_103:not(#\9),
+  .awsui_warning-icon-shake-wrapper_14mhv_3lyk6_104:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_error-icon-shake-wrapper_14mhv_3golc_103:not(#\9), .awsui-mode-entering .awsui_error-icon-shake-wrapper_14mhv_3golc_103:not(#\9), .awsui-motion-disabled .awsui_warning-icon-shake-wrapper_14mhv_3golc_104:not(#\9), .awsui-mode-entering .awsui_warning-icon-shake-wrapper_14mhv_3golc_104:not(#\9) {
+.awsui-motion-disabled .awsui_error-icon-shake-wrapper_14mhv_3lyk6_103:not(#\9), .awsui-mode-entering .awsui_error-icon-shake-wrapper_14mhv_3lyk6_103:not(#\9), .awsui-motion-disabled .awsui_warning-icon-shake-wrapper_14mhv_3lyk6_104:not(#\9), .awsui-mode-entering .awsui_warning-icon-shake-wrapper_14mhv_3lyk6_104:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_error-icon-scale-wrapper_14mhv_3golc_134:not(#\9),
-.awsui_warning-icon-scale-wrapper_14mhv_3golc_135:not(#\9) {
-  animation: awsui_awsui-motion-scale-popup_14mhv_3golc_1 var(--motion-duration-refresh-only-medium-nf6485, 165ms) var(--motion-easing-refresh-only-a-8flf9q, cubic-bezier(0, 0, 0, 1));
+.awsui_error-icon-scale-wrapper_14mhv_3lyk6_134:not(#\9),
+.awsui_warning-icon-scale-wrapper_14mhv_3lyk6_135:not(#\9) {
+  animation: awsui_awsui-motion-scale-popup_14mhv_3lyk6_1 var(--motion-duration-refresh-only-medium-nf6485, 165ms) var(--motion-easing-refresh-only-a-8flf9q, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-scale-popup_14mhv_3golc_1 {
+@keyframes awsui_awsui-motion-scale-popup_14mhv_3lyk6_1 {
   0% {
     transform: scale(0.95);
   }
@@ -142,22 +142,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_error-icon-scale-wrapper_14mhv_3golc_134:not(#\9),
-  .awsui_warning-icon-scale-wrapper_14mhv_3golc_135:not(#\9) {
+  .awsui_error-icon-scale-wrapper_14mhv_3lyk6_134:not(#\9),
+  .awsui_warning-icon-scale-wrapper_14mhv_3lyk6_135:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_error-icon-scale-wrapper_14mhv_3golc_134:not(#\9), .awsui-mode-entering .awsui_error-icon-scale-wrapper_14mhv_3golc_134:not(#\9), .awsui-motion-disabled .awsui_warning-icon-scale-wrapper_14mhv_3golc_135:not(#\9), .awsui-mode-entering .awsui_warning-icon-scale-wrapper_14mhv_3golc_135:not(#\9) {
+.awsui-motion-disabled .awsui_error-icon-scale-wrapper_14mhv_3lyk6_134:not(#\9), .awsui-mode-entering .awsui_error-icon-scale-wrapper_14mhv_3lyk6_134:not(#\9), .awsui-motion-disabled .awsui_warning-icon-scale-wrapper_14mhv_3lyk6_135:not(#\9), .awsui-mode-entering .awsui_warning-icon-scale-wrapper_14mhv_3lyk6_135:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_warning_14mhv_3golc_104:not(#\9),
-.awsui_error_14mhv_3golc_103:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_14mhv_3golc_1 var(--motion-duration-refresh-only-medium-nf6485, 165ms) var(--motion-easing-refresh-only-a-8flf9q, cubic-bezier(0, 0, 0, 1));
+.awsui_warning_14mhv_3lyk6_104:not(#\9),
+.awsui_error_14mhv_3lyk6_103:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_14mhv_3lyk6_1 var(--motion-duration-refresh-only-medium-nf6485, 165ms) var(--motion-easing-refresh-only-a-8flf9q, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-fade-in-0_14mhv_3golc_1 {
+@keyframes awsui_awsui-motion-fade-in-0_14mhv_3lyk6_1 {
   from {
     opacity: 0;
   }
@@ -166,18 +166,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_warning_14mhv_3golc_104:not(#\9),
-  .awsui_error_14mhv_3golc_103:not(#\9) {
+  .awsui_warning_14mhv_3lyk6_104:not(#\9),
+  .awsui_error_14mhv_3lyk6_103:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_warning_14mhv_3golc_104:not(#\9), .awsui-mode-entering .awsui_warning_14mhv_3golc_104:not(#\9), .awsui-motion-disabled .awsui_error_14mhv_3golc_103:not(#\9), .awsui-mode-entering .awsui_error_14mhv_3golc_103:not(#\9) {
+.awsui-motion-disabled .awsui_warning_14mhv_3lyk6_104:not(#\9), .awsui-mode-entering .awsui_warning_14mhv_3lyk6_104:not(#\9), .awsui-motion-disabled .awsui_error_14mhv_3lyk6_103:not(#\9), .awsui-mode-entering .awsui_error_14mhv_3lyk6_103:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_14mhv_3golc_186:not(#\9) {
+.awsui_root_14mhv_3lyk6_186:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -214,7 +214,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-sizing: border-box;
 }
 
-.awsui_label_14mhv_3golc_222:not(#\9) {
+.awsui_label_14mhv_3lyk6_222:not(#\9) {
   box-sizing: border-box;
   color: var(--color-text-form-label-ktbzsd, #000716);
   display: inline;
@@ -223,44 +223,47 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-weight: var(--font-display-label-weight-815ja9, 700);
   margin-inline-end: var(--space-xs-zb16t3, 8px);
 }
-.awsui_label_14mhv_3golc_222:not(#\9):only-child {
+.awsui_label_14mhv_3lyk6_222:not(#\9):only-child {
   margin-block: 0;
   margin-inline: 0;
 }
 
-.awsui_info_14mhv_3golc_236:not(#\9) {
+.awsui_info_14mhv_3lyk6_236:not(#\9) {
   display: inline-flex;
   padding-inline-start: var(--space-xs-zb16t3, 8px);
   border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
 
-.awsui_description_14mhv_3golc_242:not(#\9),
-.awsui_constraint_14mhv_3golc_243:not(#\9) {
+.awsui_description_14mhv_3lyk6_242:not(#\9),
+.awsui_constraint_14mhv_3lyk6_243:not(#\9) {
   color: var(--color-text-form-secondary-dxc248, #5f6b7a);
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
   letter-spacing: var(--letter-spacing-body-s-z9jkwp, 0.005em);
 }
 
-.awsui_hints_14mhv_3golc_250:not(#\9),
-.awsui_constraint-has-validation-text_14mhv_3golc_251:not(#\9) {
+.awsui_hints_14mhv_3lyk6_250:not(#\9),
+.awsui_constraint-has-validation-text_14mhv_3lyk6_251:not(#\9) {
   padding-block-start: var(--space-xxs-p8yyaw, 4px);
 }
 
-.awsui_secondary-control_14mhv_3golc_255:not(#\9) {
+.awsui_secondary-control_14mhv_3lyk6_255:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_controls_14mhv_3golc_259:not(#\9):not(.awsui_label-hidden_14mhv_3golc_259) {
+.awsui_controls_14mhv_3lyk6_259:not(#\9):not(.awsui_label-hidden_14mhv_3lyk6_259) {
   padding-block-start: var(--space-xxs-p8yyaw, 4px);
 }
+.awsui_label-wrapper_14mhv_3lyk6_262:not(#\9):empty + .awsui_controls_14mhv_3lyk6_259 {
+  padding-block-start: 0;
+}
 
-.awsui_control_14mhv_3golc_259:not(#\9) {
+.awsui_control_14mhv_3lyk6_259:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
 }
 
-.awsui_error_14mhv_3golc_103:not(#\9) {
+.awsui_error_14mhv_3lyk6_103:not(#\9) {
   color: var(--color-text-status-error-wdvepn, #d91515);
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
@@ -269,7 +272,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: flex-start;
 }
 
-.awsui_warning_14mhv_3golc_104:not(#\9) {
+.awsui_warning_14mhv_3lyk6_104:not(#\9) {
   color: var(--color-text-status-warning-yik8vi, #8d6605);
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
@@ -278,12 +281,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: flex-start;
 }
 
-.awsui_error__message_14mhv_3golc_286:not(#\9),
-.awsui_warning__message_14mhv_3golc_287:not(#\9) {
+.awsui_error__message_14mhv_3lyk6_289:not(#\9),
+.awsui_warning__message_14mhv_3lyk6_290:not(#\9) {
   margin-inline-start: var(--space-xxs-p8yyaw, 4px);
 }
 
-.awsui_visually-hidden_14mhv_3golc_291:not(#\9) {
+.awsui_visually-hidden_14mhv_3lyk6_294:not(#\9) {
   position: absolute !important;
   inset-block-start: -9999px !important;
   inset-inline-start: -9999px !important;

package/form-field/styles.selectors.js

@@ -2,28 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_3golc_103",
-  "warning-icon-shake-wrapper": "awsui_warning-icon-shake-wrapper_14mhv_3golc_104",
-  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_3golc_1",
-  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_3golc_134",
-  "warning-icon-scale-wrapper": "awsui_warning-icon-scale-wrapper_14mhv_3golc_135",
-  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_3golc_1",
-  "warning": "awsui_warning_14mhv_3golc_104",
-  "error": "awsui_error_14mhv_3golc_103",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_3golc_1",
-  "root": "awsui_root_14mhv_3golc_186",
-  "label": "awsui_label_14mhv_3golc_222",
-  "info": "awsui_info_14mhv_3golc_236",
-  "description": "awsui_description_14mhv_3golc_242",
-  "constraint": "awsui_constraint_14mhv_3golc_243",
-  "hints": "awsui_hints_14mhv_3golc_250",
-  "constraint-has-validation-text": "awsui_constraint-has-validation-text_14mhv_3golc_251",
-  "secondary-control": "awsui_secondary-control_14mhv_3golc_255",
-  "controls": "awsui_controls_14mhv_3golc_259",
-  "label-hidden": "awsui_label-hidden_14mhv_3golc_259",
-  "control": "awsui_control_14mhv_3golc_259",
-  "error__message": "awsui_error__message_14mhv_3golc_286",
-  "warning__message": "awsui_warning__message_14mhv_3golc_287",
-  "visually-hidden": "awsui_visually-hidden_14mhv_3golc_291"
+  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_3lyk6_103",
+  "warning-icon-shake-wrapper": "awsui_warning-icon-shake-wrapper_14mhv_3lyk6_104",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_3lyk6_1",
+  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_3lyk6_134",
+  "warning-icon-scale-wrapper": "awsui_warning-icon-scale-wrapper_14mhv_3lyk6_135",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_3lyk6_1",
+  "warning": "awsui_warning_14mhv_3lyk6_104",
+  "error": "awsui_error_14mhv_3lyk6_103",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_3lyk6_1",
+  "root": "awsui_root_14mhv_3lyk6_186",
+  "label": "awsui_label_14mhv_3lyk6_222",
+  "info": "awsui_info_14mhv_3lyk6_236",
+  "description": "awsui_description_14mhv_3lyk6_242",
+  "constraint": "awsui_constraint_14mhv_3lyk6_243",
+  "hints": "awsui_hints_14mhv_3lyk6_250",
+  "constraint-has-validation-text": "awsui_constraint-has-validation-text_14mhv_3lyk6_251",
+  "secondary-control": "awsui_secondary-control_14mhv_3lyk6_255",
+  "controls": "awsui_controls_14mhv_3lyk6_259",
+  "label-hidden": "awsui_label-hidden_14mhv_3lyk6_259",
+  "label-wrapper": "awsui_label-wrapper_14mhv_3lyk6_262",
+  "control": "awsui_control_14mhv_3lyk6_259",
+  "error__message": "awsui_error__message_14mhv_3lyk6_289",
+  "warning__message": "awsui_warning__message_14mhv_3lyk6_290",
+  "visually-hidden": "awsui_visually-hidden_14mhv_3lyk6_294"
 };
   

package/internal/components/live-region/index.js

@@ -114,9 +114,9 @@ function LiveRegion(_a) {
         };
     });
     return (React.createElement(React.Fragment, null,
-        visible && !source && (React.createElement(TagName, { ref: sourceRef, id: id }, children)),
+        visible && !source && (React.createElement(TagName, { ref: sourceRef, id: id, className: styles.source }, children)),
         React.createElement(ScreenreaderOnly, Object.assign({}, restProps, { className: clsx(styles.root, restProps.className) }),
-            !visible && !source && (React.createElement(TagName, { ref: sourceRef, "aria-hidden": "true" }, children)),
+            !visible && !source && (React.createElement(TagName, { ref: sourceRef, "aria-hidden": "true", className: styles.source }, children)),
             React.createElement("span", { ref: targetRef, "aria-atomic": "true", "aria-live": assertive ? 'assertive' : 'polite' }))));
 }
 // This only extracts text content from the node including all its children which is enough for now.

package/internal/components/live-region/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/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\n\n/* eslint-disable @cloudscape-design/prefer-live-region */\n\nimport clsx from 'clsx';\nimport React, { memo, useEffect, useRef } from 'react';\nimport ScreenreaderOnly, { ScreenreaderOnlyProps } from '../screenreader-only';\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  delay?: number;\n  visible?: boolean;\n  tagName?: 'span' | 'div';\n  id?: string;\n  /**\n   * Use a list of strings and/or existing DOM elements for building the\n   * announcement text. This avoids rendering separate content just for this\n   * LiveRegion.\n   *\n   * If this property is set, the `children` will be ignored.\n   */\n  source?: Array<string | React.RefObject<HTMLElement> | undefined>;\n}\n\n/**\n * The live region is hidden in the layout, but visible for screen readers.\n * It's purpose it to announce changes e.g. when custom navigation logic is used.\n *\n * The way live region works differently in different browsers and screen readers and\n * it is recommended to manually test every new implementation.\n *\n * If you notice there are different words being merged together,\n * check if there are text nodes not being wrapped in elements, like:\n * ```\n * <LiveRegion>\n *   {title}\n *   <span><Details /></span>\n * </LiveRegion>\n * ```\n *\n * To fix, wrap \"title\" in an element:\n * ```\n * <LiveRegion>\n *   <span>{title}</span>\n *   <span><Details /></span>\n * </LiveRegion>\n * ```\n *\n * Or create a single text node if possible:\n * ```\n * <LiveRegion>\n *   {`${title} ${details}`}\n * </LiveRegion>\n * ```\n *\n * The live region is always atomic, because non-atomic regions can be treated by screen readers\n * differently and produce unexpected results. To imitate non-atomic announcements simply use\n * multiple live regions:\n * ```\n * <>\n *   <LiveRegion>{title}</LiveRegion>\n *   <LiveRegion><Details /></LiveRegion>\n * </>\n * ```\n *\n * If you place interactive content inside the LiveRegion, the content will still be\n * interactive (e.g. as a tab stop). Consider using the `source` property instead.\n */\nexport default memo(LiveRegion);\n\nfunction LiveRegion({\n  assertive = false,\n  delay = 10,\n  visible = false,\n  tagName: TagName = 'span',\n  children,\n  id,\n  source,\n  ...restProps\n}: LiveRegionProps) {\n  const sourceRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const targetRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n\n  /*\n    When React state changes, React often produces too many DOM updates, causing NVDA to\n    issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n    The code below imitates a debouncing, scheduling a callback every time new React state\n    update is detected. When a callback resolves, it copies content from a muted element\n    to the live region, which is recognized by screen readers as an update.\n\n    If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n    does not impact the performance. If it does, prefer using a string as children prop.\n  */\n  useEffect(() => {\n    function getSourceContent() {\n      if (source) {\n        return source\n          .map(item => {\n            if (!item) {\n              return undefined;\n            }\n            if (typeof item === 'string') {\n              return item;\n            }\n            if (item.current) {\n              return extractInnerText(item.current);\n            }\n          })\n          .filter(Boolean)\n          .join(' ');\n      }\n\n      if (sourceRef.current) {\n        return extractInnerText(sourceRef.current);\n      }\n    }\n    function updateLiveRegion() {\n      const sourceContent = getSourceContent();\n\n      if (targetRef.current && sourceContent) {\n        const targetContent = extractInnerText(targetRef.current);\n        if (targetContent !== sourceContent) {\n          // The aria-atomic does not work properly in Voice Over, causing\n          // certain parts of the content to be ignored. To fix that,\n          // we assign the source text content as a single node.\n          targetRef.current.innerText = sourceContent;\n        }\n      }\n    }\n\n    let timeoutId: null | number;\n    if (delay) {\n      timeoutId = setTimeout(updateLiveRegion, delay);\n    } else {\n      updateLiveRegion();\n    }\n\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  });\n\n  return (\n    <>\n      {visible && !source && (\n        <TagName ref={sourceRef} id={id}>\n          {children}\n        </TagName>\n      )}\n\n      <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n        {!visible && !source && (\n          <TagName ref={sourceRef} aria-hidden=\"true\">\n            {children}\n          </TagName>\n        )}\n\n        <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n      </ScreenreaderOnly>\n    </>\n  );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n  return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/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\n\n/* eslint-disable @cloudscape-design/prefer-live-region */\n\nimport clsx from 'clsx';\nimport React, { memo, useEffect, useRef } from 'react';\nimport ScreenreaderOnly, { ScreenreaderOnlyProps } from '../screenreader-only';\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  delay?: number;\n  visible?: boolean;\n  tagName?: 'span' | 'div';\n  id?: string;\n  /**\n   * Use a list of strings and/or existing DOM elements for building the\n   * announcement text. This avoids rendering separate content just for this\n   * LiveRegion.\n   *\n   * If this property is set, the `children` will be ignored.\n   */\n  source?: Array<string | React.RefObject<HTMLElement> | undefined>;\n}\n\n/**\n * The live region is hidden in the layout, but visible for screen readers.\n * It's purpose it to announce changes e.g. when custom navigation logic is used.\n *\n * The way live region works differently in different browsers and screen readers and\n * it is recommended to manually test every new implementation.\n *\n * If you notice there are different words being merged together,\n * check if there are text nodes not being wrapped in elements, like:\n * ```\n * <LiveRegion>\n *   {title}\n *   <span><Details /></span>\n * </LiveRegion>\n * ```\n *\n * To fix, wrap \"title\" in an element:\n * ```\n * <LiveRegion>\n *   <span>{title}</span>\n *   <span><Details /></span>\n * </LiveRegion>\n * ```\n *\n * Or create a single text node if possible:\n * ```\n * <LiveRegion>\n *   {`${title} ${details}`}\n * </LiveRegion>\n * ```\n *\n * The live region is always atomic, because non-atomic regions can be treated by screen readers\n * differently and produce unexpected results. To imitate non-atomic announcements simply use\n * multiple live regions:\n * ```\n * <>\n *   <LiveRegion>{title}</LiveRegion>\n *   <LiveRegion><Details /></LiveRegion>\n * </>\n * ```\n *\n * If you place interactive content inside the LiveRegion, the content will still be\n * interactive (e.g. as a tab stop). Consider using the `source` property instead.\n */\nexport default memo(LiveRegion);\n\nfunction LiveRegion({\n  assertive = false,\n  delay = 10,\n  visible = false,\n  tagName: TagName = 'span',\n  children,\n  id,\n  source,\n  ...restProps\n}: LiveRegionProps) {\n  const sourceRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const targetRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n\n  /*\n    When React state changes, React often produces too many DOM updates, causing NVDA to\n    issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n    The code below imitates a debouncing, scheduling a callback every time new React state\n    update is detected. When a callback resolves, it copies content from a muted element\n    to the live region, which is recognized by screen readers as an update.\n\n    If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n    does not impact the performance. If it does, prefer using a string as children prop.\n  */\n  useEffect(() => {\n    function getSourceContent() {\n      if (source) {\n        return source\n          .map(item => {\n            if (!item) {\n              return undefined;\n            }\n            if (typeof item === 'string') {\n              return item;\n            }\n            if (item.current) {\n              return extractInnerText(item.current);\n            }\n          })\n          .filter(Boolean)\n          .join(' ');\n      }\n\n      if (sourceRef.current) {\n        return extractInnerText(sourceRef.current);\n      }\n    }\n    function updateLiveRegion() {\n      const sourceContent = getSourceContent();\n\n      if (targetRef.current && sourceContent) {\n        const targetContent = extractInnerText(targetRef.current);\n        if (targetContent !== sourceContent) {\n          // The aria-atomic does not work properly in Voice Over, causing\n          // certain parts of the content to be ignored. To fix that,\n          // we assign the source text content as a single node.\n          targetRef.current.innerText = sourceContent;\n        }\n      }\n    }\n\n    let timeoutId: null | number;\n    if (delay) {\n      timeoutId = setTimeout(updateLiveRegion, delay);\n    } else {\n      updateLiveRegion();\n    }\n\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  });\n\n  return (\n    <>\n      {visible && !source && (\n        <TagName ref={sourceRef} id={id} className={styles.source}>\n          {children}\n        </TagName>\n      )}\n\n      <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n        {!visible && !source && (\n          <TagName ref={sourceRef} aria-hidden=\"true\" className={styles.source}>\n            {children}\n          </TagName>\n        )}\n\n        <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n      </ScreenreaderOnly>\n    </>\n  );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n  return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}

package/internal/components/live-region/styles.css.js

@@ -1,6 +1,7 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_3bgfn_im8v7_5"
+  "root": "awsui_root_3bgfn_64bxr_5",
+  "source": "awsui_source_3bgfn_64bxr_9"
 };
   

package/internal/components/live-region/styles.scoped.css

@@ -2,6 +2,10 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_3bgfn_im8v7_5:not(#\9) {
+.awsui_root_3bgfn_64bxr_5:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_source_3bgfn_64bxr_9:not(#\9) {
   /* used in test-utils */
 }

package/internal/components/live-region/styles.selectors.js

@@ -2,6 +2,7 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_3bgfn_im8v7_5"
+  "root": "awsui_root_3bgfn_64bxr_5",
+  "source": "awsui_source_3bgfn_64bxr_9"
 };
   

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (365869a6)";
+export var PACKAGE_VERSION = "3.0.0 (f7b050da)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (365869a6)",
+  "PACKAGE_VERSION": "3.0.0 (f7b050da)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "365869a60717d4833051ca758b6b1d0da22339e4"
+  "commit": "f7b050daf382f48d085182eecb645adf5bcf4629"
 }

package/package.json

@@ -117,7 +117,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.634",
+  "version": "3.0.636",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/progress-bar/index.js

@@ -49,7 +49,7 @@ export default function ProgressBar(_a) {
                     announcedValue))) : (React.createElement(ResultState, { resultText: resultText, isInFlash: isInFlash, resultButtonText: resultButtonText, status: status, onClick: () => {
                     fireNonCancelableEvent(onResultButtonClick);
                 } })))),
-        additionalInfo && (React.createElement(SmallText, { testId: "additional-info", color: isInFlash ? 'inherit' : undefined }, additionalInfo))));
+        additionalInfo && (React.createElement(SmallText, { className: styles['additional-info'], color: isInFlash ? 'inherit' : undefined }, additionalInfo))));
 }
 applyDisplayName(ProgressBar, 'ProgressBar');
 //# sourceMappingURL=index.js.map

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 && (\n        <SmallText testId=\"additional-info\" color={isInFlash ? 'inherit' : undefined}>\n          {additionalInfo}\n        </SmallText>\n      )}\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,9 +11,9 @@ export declare const Progress: ({ value, isInFlash, ariaLabel, ariaLabelledby }:
 interface SmallTextProps {
     color?: BoxProps.Color;
     children: React.ReactNode;
-    testId?: string;
+    className?: string;
 }
-export declare const SmallText: ({ color, children, testId }: 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;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,gCAAiC,cAAc,gBAMpE,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, testId }) => {
-    return (React.createElement(InternalBox, { className: styles['word-wrap'], variant: "small", display: "block", color: color, "data-testid": testId }, 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'] },