@cloudscape-design/components-themeable 3.0.1137 → 3.0.1139

package/lib/internal/template/popover/body.js.map

@@ -1 +1 @@
-{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../src/popover/body.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, { useCallback, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport FocusLock from '../internal/components/focus-lock';\nimport { KeyCode } from '../internal/keycode';\n\nimport styles from './styles.css.js';\n\nexport interface PopoverBodyProps {\n  dismissButton: boolean;\n  dismissAriaLabel: string | undefined;\n  onDismiss: (() => void) | undefined;\n\n  header: React.ReactNode | undefined;\n  children: React.ReactNode;\n  variant?: 'annotation' | 'chart';\n  overflowVisible?: 'content' | 'both';\n\n  className?: string;\n  ariaLabelledby?: string;\n\n  closeAnalyticsAction?: string;\n}\n\nexport default function PopoverBody({\n  dismissButton: showDismissButton,\n  dismissAriaLabel,\n  header,\n  children,\n  onDismiss,\n  variant,\n  overflowVisible,\n  className,\n  ariaLabelledby,\n  closeAnalyticsAction,\n}: PopoverBodyProps) {\n  const i18n = useInternalI18n('popover');\n  const labelledById = useUniqueId('awsui-popover-');\n  const dismissButtonFocused = useRef(false);\n  const dismissButtonRef = useRef<ButtonProps.Ref>(null);\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.keyCode === KeyCode.escape) {\n        event.stopPropagation();\n        onDismiss?.();\n      }\n    },\n    [onDismiss]\n  );\n\n  // Implement our own auto-focus rather than using FocusLock's,\n  // because we also want to focus the dismiss button when it\n  // is added dynamically (e.g. in chart popovers)\n  useEffect(() => {\n    if (showDismissButton && !dismissButtonFocused.current) {\n      dismissButtonRef.current?.focus({ preventScroll: true });\n    }\n    dismissButtonFocused.current = showDismissButton;\n  }, [showDismissButton]);\n\n  const dismissButton = (showDismissButton ?? null) && (\n    <div\n      className={styles.dismiss}\n      {...(closeAnalyticsAction ? getAnalyticsMetadataAttribute({ action: closeAnalyticsAction }) : {})}\n    >\n      <InternalButton\n        variant=\"icon\"\n        formAction=\"none\"\n        iconName=\"close\"\n        className={styles['dismiss-control']}\n        ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}\n        onClick={() => onDismiss?.()}\n        ref={dismissButtonRef}\n      />\n    </div>\n  );\n\n  const isDialog = showDismissButton;\n  const shouldTrapFocus = showDismissButton && variant !== 'annotation';\n\n  const dialogProps = isDialog\n    ? {\n        role: 'dialog',\n        'aria-labelledby': ariaLabelledby ?? (header ? labelledById : undefined),\n      }\n    : {};\n\n  return (\n    <div\n      className={clsx(styles.body, styles[`body-variant-${variant}`], className, {\n        [styles['body-overflow-visible']]: overflowVisible === 'both',\n      })}\n      onKeyDown={onKeyDown}\n      {...dialogProps}\n    >\n      <FocusLock disabled={!shouldTrapFocus} autoFocus={false}>\n        {header && (\n          <div className={clsx(styles['header-row'], showDismissButton && styles['has-dismiss'])}>\n            {dismissButton}\n            <div className={styles.header} id={labelledById}>\n              <h2>{header}</h2>\n            </div>\n          </div>\n        )}\n        <div className={!header && showDismissButton ? styles['has-dismiss'] : undefined}>\n          {!header && dismissButton}\n          <div className={clsx(styles.content, { [styles['content-overflow-visible']]: !!overflowVisible })}>\n            {children}\n          </div>\n        </div>\n      </FocusLock>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../src/popover/body.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, { useCallback, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport FocusLock from '../internal/components/focus-lock';\nimport { KeyCode } from '../internal/keycode';\n\nimport styles from './styles.css.js';\n\nexport interface PopoverBodyProps {\n  dismissButton: boolean;\n  dismissAriaLabel: string | undefined;\n  onDismiss: (() => void) | undefined;\n\n  header: React.ReactNode | undefined;\n  children: React.ReactNode;\n  variant?: 'annotation' | 'chart';\n  overflowVisible?: 'content' | 'both';\n\n  className?: string;\n  ariaLabelledby?: string;\n\n  closeAnalyticsAction?: string;\n}\n\nexport default function PopoverBody({\n  dismissButton: showDismissButton,\n  dismissAriaLabel,\n  header,\n  children,\n  onDismiss,\n  variant,\n  overflowVisible,\n  className,\n  ariaLabelledby,\n  closeAnalyticsAction,\n}: PopoverBodyProps) {\n  const i18n = useInternalI18n('popover');\n  const labelledById = useUniqueId('awsui-popover-');\n  const dismissButtonFocused = useRef(false);\n  const dismissButtonRef = useRef<ButtonProps.Ref>(null);\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.keyCode === KeyCode.escape) {\n        event.stopPropagation();\n        onDismiss?.();\n      }\n    },\n    [onDismiss]\n  );\n\n  // Implement our own auto-focus rather than using FocusLock's,\n  // because we also want to focus the dismiss button when it\n  // is added dynamically (e.g. in chart popovers)\n  useEffect(() => {\n    if (showDismissButton && !dismissButtonFocused.current) {\n      dismissButtonRef.current?.focus({ preventScroll: true });\n    }\n    dismissButtonFocused.current = showDismissButton;\n  }, [showDismissButton]);\n\n  const dismissButton = (showDismissButton ?? null) && (\n    <div\n      className={styles.dismiss}\n      {...(closeAnalyticsAction ? getAnalyticsMetadataAttribute({ action: closeAnalyticsAction }) : {})}\n    >\n      <InternalButton\n        variant=\"icon\"\n        formAction=\"none\"\n        iconName=\"close\"\n        className={styles['dismiss-control']}\n        ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}\n        onClick={() => onDismiss?.()}\n        ref={dismissButtonRef}\n      />\n    </div>\n  );\n\n  const isDialog = showDismissButton;\n  const shouldTrapFocus = showDismissButton && variant !== 'annotation';\n\n  const dialogProps = isDialog\n    ? {\n        role: 'dialog',\n        'aria-labelledby': ariaLabelledby ?? (header ? labelledById : undefined),\n      }\n    : {};\n\n  return (\n    <div\n      className={clsx(styles.body, styles[`body-variant-${variant}`], className, {\n        [styles['body-overflow-visible']]: overflowVisible === 'both',\n      })}\n      onKeyDown={onKeyDown}\n      {...dialogProps}\n    >\n      <FocusLock disabled={!shouldTrapFocus} autoFocus={false}>\n        {header && (\n          <div className={clsx(styles['header-row'], showDismissButton && styles['has-dismiss'])}>\n            {dismissButton}\n            <div className={styles.header} id={labelledById}>\n              <h2>{header}</h2>\n            </div>\n          </div>\n        )}\n        <div className={!header && showDismissButton ? styles['has-dismiss'] : undefined}>\n          {!header && dismissButton}\n          <div className={clsx(styles.content, { [styles['content-overflow-visible']]: !!overflowVisible })}>\n            {children}\n          </div>\n        </div>\n      </FocusLock>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/popover/container.js

@@ -66,7 +66,7 @@ export default function PopoverContainer({ position, trackRef, getTrack: externa
             controller.abort();
         };
     }, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);
-    return isOverscrolling ? null : (React.createElement("div", { ref: popoverRef, style: Object.assign(Object.assign({}, popoverStyle), { zIndex }), className: clsx(styles.container, isRefresh && styles.refresh, className) },
+    return isOverscrolling ? null : (React.createElement("div", { ref: popoverRef, style: { ...popoverStyle, zIndex }, className: clsx(styles.container, isRefresh && styles.refresh, className) },
         React.createElement("div", { ref: arrowRef, className: clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`]), "aria-hidden": true }, arrow(internalPosition)),
         React.createElement("div", { ref: bodyRef, className: clsx(styles['container-body'], styles[`container-body-size-${size}`], {
                 [styles['fixed-width']]: fixedWidth,

package/lib/internal/template/popover/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.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, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getLogicalBoundingClientRect, useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { InternalPosition, PopoverProps } from './interfaces';\nimport usePopoverPosition from './use-popover-position.js';\nimport usePositionObserver from './use-position-observer';\n\nimport styles from './styles.css.js';\n\ninterface PopoverContainerProps {\n  /** References the element the container is positioned against. */\n  trackRef?: React.RefObject<HTMLElement | SVGElement>;\n  getTrack?: () => null | HTMLElement | SVGElement;\n  /**\n    Used to update the container position in case track or track position changes:\n\n    const trackRef = useRef<Element>(null)\n    return (<>\n      <Track style={getPosition(selectedItemId)} ref={trackRef} />\n      <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n    </>)\n  */\n  trackKey?: string | number;\n  minVisibleBlockSize?: number;\n  position: PopoverProps.Position;\n  zIndex?: React.CSSProperties['zIndex'];\n  arrow: (position: InternalPosition | null) => React.ReactNode;\n  children: React.ReactNode;\n  renderWithPortal?: boolean;\n  size: PopoverProps.Size | 'content';\n  fixedWidth: boolean;\n  variant?: 'annotation';\n  // When keepPosition is true, the popover will not recalculate its position when it resizes nor when it receives clicks.\n  keepPosition?: boolean;\n  // When allowScrollToFit is true, we will scroll to the the popover if it overflows the viewport even when choosing the best possible position for it.\n  // Do not use this if the popover is open on hover, in order to avoid unexpected movement.\n  allowScrollToFit?: boolean;\n  allowVerticalOverflow?: boolean;\n  // Whether the popover should be hidden when the trigger is scrolled away.\n  hideOnOverscroll?: boolean;\n  hoverArea?: boolean;\n  className?: string;\n}\n\nexport default function PopoverContainer({\n  position,\n  trackRef,\n  getTrack: externalGetTrack,\n  trackKey,\n  minVisibleBlockSize,\n  arrow,\n  children,\n  zIndex,\n  renderWithPortal,\n  size,\n  fixedWidth,\n  variant,\n  keepPosition,\n  allowScrollToFit,\n  allowVerticalOverflow,\n  hideOnOverscroll,\n  hoverArea,\n  className,\n}: PopoverContainerProps) {\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement | null>(null);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const isRefresh = useVisualRefresh();\n\n  const getTrack = useRef(() => {\n    if (trackRef) {\n      return trackRef.current;\n    }\n    if (externalGetTrack) {\n      return externalGetTrack();\n    }\n    throw new Error('Invariant violation: must provide either trackRef or getTrack.');\n  });\n\n  // Updates the position handler.\n  const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling } =\n    usePopoverPosition({\n      popoverRef,\n      bodyRef,\n      arrowRef,\n      getTrack: getTrack.current,\n      contentRef,\n      allowScrollToFit,\n      allowVerticalOverflow,\n      preferredPosition: position,\n      renderWithPortal,\n      keepPosition,\n      hideOnOverscroll,\n      minVisibleBlockSize,\n    });\n\n  // Recalculate position when properties change.\n  useLayoutEffect(() => {\n    updatePositionHandler();\n  }, [updatePositionHandler, trackKey]);\n\n  // Recalculate position when content size changes.\n  useResizeObserver(contentRef, () => {\n    updatePositionHandler(true);\n  });\n\n  // Recalculate position when the DOM changes.\n  // istanbul ignore next - tested via integration tests\n  usePositionObserver(getTrack.current, trackKey, () => {\n    // Do not update position if popover moved offscreen\n    const popoverOffset = popoverRef.current && getLogicalBoundingClientRect(popoverRef.current);\n    if (!popoverOffset || popoverOffset.insetBlockStart < 0 || popoverOffset.insetBlockEnd > window.innerHeight) {\n      return;\n    }\n    positionHandlerRef.current();\n  });\n\n  // Recalculate position on resize or scroll events.\n  useLayoutEffect(() => {\n    const controller = new AbortController();\n\n    const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler(true));\n    const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n\n    window.addEventListener('resize', updatePositionOnResize, { signal: controller.signal });\n    window.addEventListener('scroll', refreshPosition, { capture: true, signal: controller.signal });\n\n    return () => {\n      controller.abort();\n    };\n  }, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);\n\n  return isOverscrolling ? null : (\n    <div\n      ref={popoverRef}\n      style={{ ...popoverStyle, zIndex }}\n      className={clsx(styles.container, isRefresh && styles.refresh, className)}\n    >\n      <div\n        ref={arrowRef}\n        className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n        aria-hidden={true}\n      >\n        {arrow(internalPosition)}\n      </div>\n\n      <div\n        ref={bodyRef}\n        className={clsx(styles['container-body'], styles[`container-body-size-${size}`], {\n          [styles['fixed-width']]: fixedWidth,\n          [styles[`container-body-variant-${variant}`]]: variant,\n        })}\n      >\n        {hoverArea ? (\n          <div className={styles['hover-area']}>\n            <div ref={contentRef}>{children}</div>\n          </div>\n        ) : (\n          <div ref={contentRef}>{children}</div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,4BAA4B,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAEhH,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,kBAAkB,MAAM,2BAA2B,CAAC;AAC3D,OAAO,mBAAmB,MAAM,yBAAyB,CAAC;AAE1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAqCrC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,QAAQ,EACR,QAAQ,EAAE,gBAAgB,EAC1B,QAAQ,EACR,mBAAmB,EACnB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,EACT,SAAS,GACa;IACtB,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAErD,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,EAAE;QAC3B,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,QAAQ,CAAC,OAAO,CAAC;QAC1B,CAAC;QACD,IAAI,gBAAgB,EAAE,CAAC;YACrB,OAAO,gBAAgB,EAAE,CAAC;QAC5B,CAAC;QACD,MAAM,IAAI,KAAK,CAAC,gEAAgE,CAAC,CAAC;IACpF,CAAC,CAAC,CAAC;IAEH,gCAAgC;IAChC,MAAM,EAAE,qBAAqB,EAAE,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,eAAe,EAAE,GAClG,kBAAkB,CAAC;QACjB,UAAU;QACV,OAAO;QACP,QAAQ;QACR,QAAQ,EAAE,QAAQ,CAAC,OAAO;QAC1B,UAAU;QACV,gBAAgB;QAChB,qBAAqB;QACrB,iBAAiB,EAAE,QAAQ;QAC3B,gBAAgB;QAChB,YAAY;QACZ,gBAAgB;QAChB,mBAAmB;KACpB,CAAC,CAAC;IAEL,+CAA+C;IAC/C,eAAe,CAAC,GAAG,EAAE;QACnB,qBAAqB,EAAE,CAAC;IAC1B,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,kDAAkD;IAClD,iBAAiB,CAAC,UAAU,EAAE,GAAG,EAAE;QACjC,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,6CAA6C;IAC7C,sDAAsD;IACtD,mBAAmB,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE;QACnD,oDAAoD;QACpD,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,IAAI,4BAA4B,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC7F,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,eAAe,GAAG,CAAC,IAAI,aAAa,CAAC,aAAa,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;YAC5G,OAAO;QACT,CAAC;QACD,kBAAkB,CAAC,OAAO,EAAE,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,mDAAmD;IACnD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QAEzC,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9F,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAC,CAAC;QAExF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,sBAAsB,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QACzF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QAEjG,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,YAAY,EAAE,kBAAkB,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE1F,OAAO,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC9B,6BACE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,EAAE,GAAG,YAAY,EAAE,MAAM,EAAE,EAClC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,IAAI,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC;QAEzE,6BACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,4BAA4B,gBAAgB,EAAE,CAAC,CAAC,iBACrF,IAAI,IAEhB,KAAK,CAAC,gBAAgB,CAAC,CACpB;QAEN,6BACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,uBAAuB,IAAI,EAAE,CAAC,EAAE;gBAC/E,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU;gBACnC,CAAC,MAAM,CAAC,0BAA0B,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO;aACvD,CAAC,IAED,SAAS,CAAC,CAAC,CAAC,CACX,6BAAK,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC;YAClC,6BAAK,GAAG,EAAE,UAAU,IAAG,QAAQ,CAAO,CAClC,CACP,CAAC,CAAC,CAAC,CACF,6BAAK,GAAG,EAAE,UAAU,IAAG,QAAQ,CAAO,CACvC,CACG,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getLogicalBoundingClientRect, useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { InternalPosition, PopoverProps } from './interfaces';\nimport usePopoverPosition from './use-popover-position.js';\nimport usePositionObserver from './use-position-observer';\n\nimport styles from './styles.css.js';\n\ninterface PopoverContainerProps {\n  /** References the element the container is positioned against. */\n  trackRef?: React.RefObject<HTMLElement | SVGElement>;\n  getTrack?: () => null | HTMLElement | SVGElement;\n  /**\n    Used to update the container position in case track or track position changes:\n\n    const trackRef = useRef<Element>(null)\n    return (<>\n      <Track style={getPosition(selectedItemId)} ref={trackRef} />\n      <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n    </>)\n  */\n  trackKey?: string | number;\n  minVisibleBlockSize?: number;\n  position: PopoverProps.Position;\n  zIndex?: React.CSSProperties['zIndex'];\n  arrow: (position: InternalPosition | null) => React.ReactNode;\n  children: React.ReactNode;\n  renderWithPortal?: boolean;\n  size: PopoverProps.Size | 'content';\n  fixedWidth: boolean;\n  variant?: 'annotation';\n  // When keepPosition is true, the popover will not recalculate its position when it resizes nor when it receives clicks.\n  keepPosition?: boolean;\n  // When allowScrollToFit is true, we will scroll to the the popover if it overflows the viewport even when choosing the best possible position for it.\n  // Do not use this if the popover is open on hover, in order to avoid unexpected movement.\n  allowScrollToFit?: boolean;\n  allowVerticalOverflow?: boolean;\n  // Whether the popover should be hidden when the trigger is scrolled away.\n  hideOnOverscroll?: boolean;\n  hoverArea?: boolean;\n  className?: string;\n}\n\nexport default function PopoverContainer({\n  position,\n  trackRef,\n  getTrack: externalGetTrack,\n  trackKey,\n  minVisibleBlockSize,\n  arrow,\n  children,\n  zIndex,\n  renderWithPortal,\n  size,\n  fixedWidth,\n  variant,\n  keepPosition,\n  allowScrollToFit,\n  allowVerticalOverflow,\n  hideOnOverscroll,\n  hoverArea,\n  className,\n}: PopoverContainerProps) {\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement | null>(null);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const isRefresh = useVisualRefresh();\n\n  const getTrack = useRef(() => {\n    if (trackRef) {\n      return trackRef.current;\n    }\n    if (externalGetTrack) {\n      return externalGetTrack();\n    }\n    throw new Error('Invariant violation: must provide either trackRef or getTrack.');\n  });\n\n  // Updates the position handler.\n  const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling } =\n    usePopoverPosition({\n      popoverRef,\n      bodyRef,\n      arrowRef,\n      getTrack: getTrack.current,\n      contentRef,\n      allowScrollToFit,\n      allowVerticalOverflow,\n      preferredPosition: position,\n      renderWithPortal,\n      keepPosition,\n      hideOnOverscroll,\n      minVisibleBlockSize,\n    });\n\n  // Recalculate position when properties change.\n  useLayoutEffect(() => {\n    updatePositionHandler();\n  }, [updatePositionHandler, trackKey]);\n\n  // Recalculate position when content size changes.\n  useResizeObserver(contentRef, () => {\n    updatePositionHandler(true);\n  });\n\n  // Recalculate position when the DOM changes.\n  // istanbul ignore next - tested via integration tests\n  usePositionObserver(getTrack.current, trackKey, () => {\n    // Do not update position if popover moved offscreen\n    const popoverOffset = popoverRef.current && getLogicalBoundingClientRect(popoverRef.current);\n    if (!popoverOffset || popoverOffset.insetBlockStart < 0 || popoverOffset.insetBlockEnd > window.innerHeight) {\n      return;\n    }\n    positionHandlerRef.current();\n  });\n\n  // Recalculate position on resize or scroll events.\n  useLayoutEffect(() => {\n    const controller = new AbortController();\n\n    const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler(true));\n    const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n\n    window.addEventListener('resize', updatePositionOnResize, { signal: controller.signal });\n    window.addEventListener('scroll', refreshPosition, { capture: true, signal: controller.signal });\n\n    return () => {\n      controller.abort();\n    };\n  }, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);\n\n  return isOverscrolling ? null : (\n    <div\n      ref={popoverRef}\n      style={{ ...popoverStyle, zIndex }}\n      className={clsx(styles.container, isRefresh && styles.refresh, className)}\n    >\n      <div\n        ref={arrowRef}\n        className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n        aria-hidden={true}\n      >\n        {arrow(internalPosition)}\n      </div>\n\n      <div\n        ref={bodyRef}\n        className={clsx(styles['container-body'], styles[`container-body-size-${size}`], {\n          [styles['fixed-width']]: fixedWidth,\n          [styles[`container-body-variant-${variant}`]]: variant,\n        })}\n      >\n        {hoverArea ? (\n          <div className={styles['hover-area']}>\n            <div ref={contentRef}>{children}</div>\n          </div>\n        ) : (\n          <div ref={contentRef}>{children}</div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/popover/index.js

@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 'use client';
-import { __rest } from "tslib";
 import React from 'react';
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import useBaseComponent from '../internal/hooks/use-base-component';
@@ -9,8 +8,7 @@ import { isDevelopment } from '../internal/is-development';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { getExternalProps } from '../internal/utils/external-props';
 import InternalPopover from './internal';
-const Popover = React.forwardRef((_a, ref) => {
-    var { position = 'right', size = 'medium', fixedWidth = false, triggerType = 'text', dismissButton = true, renderWithPortal = false, wrapTriggerText = true, header } = _a, rest = __rest(_a, ["position", "size", "fixedWidth", "triggerType", "dismissButton", "renderWithPortal", "wrapTriggerText", "header"]);
+const Popover = React.forwardRef(({ position = 'right', size = 'medium', fixedWidth = false, triggerType = 'text', dismissButton = true, renderWithPortal = false, wrapTriggerText = true, header, ...rest }, ref) => {
     if (isDevelopment) {
         if (dismissButton && !header) {
             warnOnce('Popover', `You should provide a \`header\` when \`dismissButton\` is true.`);
@@ -20,7 +18,7 @@ const Popover = React.forwardRef((_a, ref) => {
         props: { dismissButton, fixedWidth, position, renderWithPortal, size, triggerType },
     });
     const externalProps = getExternalProps(rest);
-    return (React.createElement(InternalPopover, Object.assign({ ref: ref, header: header, position: position, size: size, fixedWidth: fixedWidth, triggerType: triggerType, dismissButton: dismissButton, renderWithPortal: renderWithPortal, wrapTriggerText: wrapTriggerText }, externalProps, baseComponentProps)));
+    return (React.createElement(InternalPopover, { ref: ref, header: header, position: position, size: size, fixedWidth: fixedWidth, triggerType: triggerType, dismissButton: dismissButton, renderWithPortal: renderWithPortal, wrapTriggerText: wrapTriggerText, ...externalProps, ...baseComponentProps }));
 });
 applyDisplayName(Popover, 'Popover');
 export default Popover;

package/lib/internal/template/popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/popover/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAEzE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,eAAe,MAAM,YAAY,CAAC;AAIzC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC9B,CACE,EAUe,EACf,GAAgC,EAChC,EAAE;QAZF,EACE,QAAQ,GAAG,OAAO,EAClB,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,MAAM,EACpB,aAAa,GAAG,IAAI,EACpB,gBAAgB,GAAG,KAAK,EACxB,eAAe,GAAG,IAAI,EACtB,MAAM,OAEO,EADV,IAAI,cATT,mHAUC,CADQ;IAIT,IAAI,aAAa,EAAE,CAAC;QAClB,IAAI,aAAa,IAAI,CAAC,MAAM,EAAE,CAAC;YAC7B,QAAQ,CAAC,SAAS,EAAE,iEAAiE,CAAC,CAAC;QACzF,CAAC;IACH,CAAC;IAED,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,SAAS,EAAE;QACrD,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,WAAW,EAAE;KACpF,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,CACL,oBAAC,eAAe,kBACd,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,IAC5B,aAAa,EACb,kBAAkB,EACtB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AACrC,eAAe,OAAO,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { isDevelopment } from '../internal/is-development';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { PopoverProps } from './interfaces';\nimport InternalPopover from './internal';\n\nexport { PopoverProps };\n\nconst Popover = React.forwardRef(\n  (\n    {\n      position = 'right',\n      size = 'medium',\n      fixedWidth = false,\n      triggerType = 'text',\n      dismissButton = true,\n      renderWithPortal = false,\n      wrapTriggerText = true,\n      header,\n      ...rest\n    }: PopoverProps,\n    ref: React.Ref<PopoverProps.Ref>\n  ) => {\n    if (isDevelopment) {\n      if (dismissButton && !header) {\n        warnOnce('Popover', `You should provide a \\`header\\` when \\`dismissButton\\` is true.`);\n      }\n    }\n\n    const baseComponentProps = useBaseComponent('Popover', {\n      props: { dismissButton, fixedWidth, position, renderWithPortal, size, triggerType },\n    });\n    const externalProps = getExternalProps(rest);\n\n    return (\n      <InternalPopover\n        ref={ref}\n        header={header}\n        position={position}\n        size={size}\n        fixedWidth={fixedWidth}\n        triggerType={triggerType}\n        dismissButton={dismissButton}\n        renderWithPortal={renderWithPortal}\n        wrapTriggerText={wrapTriggerText}\n        {...externalProps}\n        {...baseComponentProps}\n      />\n    );\n  }\n);\n\napplyDisplayName(Popover, 'Popover');\nexport default Popover;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/popover/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAEzE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,eAAe,MAAM,YAAY,CAAC;AAIzC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC9B,CACE,EACE,QAAQ,GAAG,OAAO,EAClB,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,MAAM,EACpB,aAAa,GAAG,IAAI,EACpB,gBAAgB,GAAG,KAAK,EACxB,eAAe,GAAG,IAAI,EACtB,MAAM,EACN,GAAG,IAAI,EACM,EACf,GAAgC,EAChC,EAAE;IACF,IAAI,aAAa,EAAE,CAAC;QAClB,IAAI,aAAa,IAAI,CAAC,MAAM,EAAE,CAAC;YAC7B,QAAQ,CAAC,SAAS,EAAE,iEAAiE,CAAC,CAAC;QACzF,CAAC;IACH,CAAC;IAED,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,SAAS,EAAE;QACrD,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,WAAW,EAAE;KACpF,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,CACL,oBAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,KAC5B,aAAa,KACb,kBAAkB,GACtB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AACrC,eAAe,OAAO,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { isDevelopment } from '../internal/is-development';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { PopoverProps } from './interfaces';\nimport InternalPopover from './internal';\n\nexport { PopoverProps };\n\nconst Popover = React.forwardRef(\n  (\n    {\n      position = 'right',\n      size = 'medium',\n      fixedWidth = false,\n      triggerType = 'text',\n      dismissButton = true,\n      renderWithPortal = false,\n      wrapTriggerText = true,\n      header,\n      ...rest\n    }: PopoverProps,\n    ref: React.Ref<PopoverProps.Ref>\n  ) => {\n    if (isDevelopment) {\n      if (dismissButton && !header) {\n        warnOnce('Popover', `You should provide a \\`header\\` when \\`dismissButton\\` is true.`);\n      }\n    }\n\n    const baseComponentProps = useBaseComponent('Popover', {\n      props: { dismissButton, fixedWidth, position, renderWithPortal, size, triggerType },\n    });\n    const externalProps = getExternalProps(rest);\n\n    return (\n      <InternalPopover\n        ref={ref}\n        header={header}\n        position={position}\n        size={size}\n        fixedWidth={fixedWidth}\n        triggerType={triggerType}\n        dismissButton={dismissButton}\n        renderWithPortal={renderWithPortal}\n        wrapTriggerText={wrapTriggerText}\n        {...externalProps}\n        {...baseComponentProps}\n      />\n    );\n  }\n);\n\napplyDisplayName(Popover, 'Popover');\nexport default Popover;\n"]}

package/lib/internal/template/popover/internal.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
@@ -19,8 +18,7 @@ import ConditionalLiveRegion from './conditional-live-region';
 import PopoverContainer from './container';
 import styles from './styles.css.js';
 export default React.forwardRef(InternalPopover);
-function InternalPopover(_a, ref) {
-    var { position = 'right', size = 'medium', fixedWidth = false, triggerType = 'text', dismissButton = true, children, header, content, triggerAriaLabel, wrapTriggerText = true, isInline = false, renderWithPortal = false, __onOpen, __internalRootRef, __closeAnalyticsAction } = _a, restProps = __rest(_a, ["position", "size", "fixedWidth", "triggerType", "dismissButton", "children", "header", "content", "triggerAriaLabel", "wrapTriggerText", "isInline", "renderWithPortal", "__onOpen", "__internalRootRef", "__closeAnalyticsAction"]);
+function InternalPopover({ position = 'right', size = 'medium', fixedWidth = false, triggerType = 'text', dismissButton = true, children, header, content, triggerAriaLabel, wrapTriggerText = true, isInline = false, renderWithPortal = false, __onOpen, __internalRootRef, __closeAnalyticsAction, ...restProps }, ref) {
     const baseProps = getBaseProps(restProps);
     const triggerRef = useRef(null);
     const popoverRef = useRef(null);
@@ -96,13 +94,13 @@ function InternalPopover(_a, ref) {
                 React.createElement(PopoverBody, { dismissButton: dismissButton, dismissAriaLabel: dismissAriaLabel, header: header, onDismiss: onDismiss, overflowVisible: "both", closeAnalyticsAction: __closeAnalyticsAction },
                     React.createElement(ConditionalLiveRegion, { condition: !dismissButton }, content))))));
     const mergedRef = useMergeRefs(popoverRef, __internalRootRef);
-    return (React.createElement("span", Object.assign({}, baseProps, { className: clsx(styles.root, baseProps.className, triggerType === 'filtering-token' && styles['root-filtering-token'], isInline && styles['no-wrap']), ref: mergedRef, onMouseDown: () => {
+    return (React.createElement("span", { ...baseProps, className: clsx(styles.root, baseProps.className, triggerType === 'filtering-token' && styles['root-filtering-token'], isInline && styles['no-wrap']), ref: mergedRef, onMouseDown: () => {
             // Indicate there was a click inside popover recently, including nested portals.
             clickFrameId.current = requestAnimationFrame(() => {
                 clickFrameId.current = null;
             });
-        } }),
-        ['text', 'text-inline'].includes(triggerType) ? (React.createElement("button", Object.assign({}, triggerProps, { className: clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis']), tabIndex: triggerTabIndex, type: "button", "aria-haspopup": "dialog", id: referrerId, "aria-label": triggerAriaLabel }), children)) : (React.createElement("span", Object.assign({}, triggerProps, { id: referrerId }), children)),
+        } },
+        ['text', 'text-inline'].includes(triggerType) ? (React.createElement("button", { ...triggerProps, className: clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis']), tabIndex: triggerTabIndex, type: "button", "aria-haspopup": "dialog", id: referrerId, "aria-label": triggerAriaLabel }, children)) : (React.createElement("span", { ...triggerProps, id: referrerId }, children)),
         visible && (React.createElement(ResetContextsForModal, null, renderWithPortal ? React.createElement(Portal, null, popoverContent) : popoverContent))));
 }
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/popover/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/popover/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, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { Portal, useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { getFirstFocusable } from '../internal/components/focus-lock/utils';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { KeyCode } from '../internal/keycode';\nimport Arrow from './arrow';\nimport PopoverBody from './body';\nimport ConditionalLiveRegion from './conditional-live-region';\nimport PopoverContainer from './container';\nimport { PopoverProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface InternalPopoverProps extends Omit<PopoverProps, 'triggerType' | 'size'>, InternalBaseComponentProps {\n  __onOpen?: NonCancelableEventHandler<null>;\n  triggerType?: PopoverProps.TriggerType | 'filtering-token';\n  size: PopoverProps.Size | 'content';\n  __closeAnalyticsAction?: string;\n  isInline?: boolean;\n}\n\nexport default React.forwardRef(InternalPopover);\n\nfunction InternalPopover(\n  {\n    position = 'right',\n    size = 'medium',\n    fixedWidth = false,\n    triggerType = 'text',\n    dismissButton = true,\n\n    children,\n    header,\n    content,\n    triggerAriaLabel,\n\n    wrapTriggerText = true,\n    isInline = false,\n    renderWithPortal = false,\n\n    __onOpen,\n    __internalRootRef,\n    __closeAnalyticsAction,\n\n    ...restProps\n  }: InternalPopoverProps,\n  ref: React.Ref<PopoverProps.Ref>\n) {\n  const baseProps = getBaseProps(restProps);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement | null>(null);\n\n  const i18n = useInternalI18n('popover');\n  const dismissAriaLabel = i18n('dismissAriaLabel', restProps.dismissAriaLabel);\n\n  const [visible, setVisible] = useState(false);\n\n  const focusTrigger = useCallback(() => {\n    if (['text', 'text-inline'].includes(triggerType)) {\n      triggerRef.current?.focus();\n    } else if (triggerRef.current) {\n      getFirstFocusable(triggerRef.current)?.focus();\n    }\n  }, [triggerType]);\n\n  const onTriggerClick = useCallback(() => {\n    fireNonCancelableEvent(__onOpen);\n    setVisible(true);\n  }, [__onOpen]);\n\n  const onDismiss = useCallback(() => {\n    setVisible(false);\n    focusTrigger();\n  }, [focusTrigger]);\n\n  const onTriggerKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      const isEscapeKey = event.keyCode === KeyCode.escape;\n      const isTabKey = event.keyCode === KeyCode.tab;\n      if (isEscapeKey && visible) {\n        event.stopPropagation();\n      }\n      if (isTabKey || isEscapeKey) {\n        setVisible(false);\n      }\n    },\n    [visible]\n  );\n\n  useImperativeHandle(ref, () => ({\n    dismiss: () => {\n      setVisible(false);\n    },\n    focus: () => {\n      setVisible(false);\n      focusTrigger();\n    },\n  }));\n\n  const clickFrameId = useRef<number | null>(null);\n  useEffect(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n    const document = triggerRef.current.ownerDocument;\n\n    const onDocumentClick = () => {\n      // Dismiss popover unless there was a click inside within the last animation frame.\n      if (clickFrameId.current === null) {\n        setVisible(false);\n      }\n    };\n\n    document.addEventListener('mousedown', onDocumentClick);\n\n    return () => {\n      document.removeEventListener('mousedown', onDocumentClick);\n    };\n  }, []);\n\n  const popoverClasses = usePortalModeClasses(triggerRef);\n\n  const triggerProps = {\n    // https://github.com/microsoft/TypeScript/issues/36659\n    ref: triggerRef as any,\n    onClick: onTriggerClick,\n    onKeyDown: onTriggerKeyDown,\n    className: clsx(styles.trigger, styles[`trigger-type-${triggerType}`]),\n  };\n  const { tabIndex: triggerTabIndex } = useSingleTabStopNavigation(triggerRef);\n\n  const referrerId = useUniqueId();\n\n  const popoverContent = (\n    <div\n      className={clsx(popoverClasses, !renderWithPortal && styles['popover-inline-content'])}\n      data-awsui-referrer-id={referrerId}\n    >\n      <PopoverContainer\n        size={size}\n        fixedWidth={fixedWidth}\n        position={position}\n        trackRef={triggerRef}\n        arrow={position => <Arrow position={position} />}\n        renderWithPortal={renderWithPortal}\n        zIndex={renderWithPortal ? 7000 : undefined}\n      >\n        <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n          <PopoverBody\n            dismissButton={dismissButton}\n            dismissAriaLabel={dismissAriaLabel}\n            header={header}\n            onDismiss={onDismiss}\n            overflowVisible=\"both\"\n            closeAnalyticsAction={__closeAnalyticsAction}\n          >\n            <ConditionalLiveRegion condition={!dismissButton}>{content}</ConditionalLiveRegion>\n          </PopoverBody>\n        </LinkDefaultVariantContext.Provider>\n      </PopoverContainer>\n    </div>\n  );\n\n  const mergedRef = useMergeRefs(popoverRef, __internalRootRef);\n\n  return (\n    <span\n      {...baseProps}\n      className={clsx(\n        styles.root,\n        baseProps.className,\n        triggerType === 'filtering-token' && styles['root-filtering-token'],\n        isInline && styles['no-wrap']\n      )}\n      ref={mergedRef}\n      onMouseDown={() => {\n        // Indicate there was a click inside popover recently, including nested portals.\n        clickFrameId.current = requestAnimationFrame(() => {\n          clickFrameId.current = null;\n        });\n      }}\n    >\n      {['text', 'text-inline'].includes(triggerType) ? (\n        <button\n          {...triggerProps}\n          className={clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis'])}\n          tabIndex={triggerTabIndex}\n          type=\"button\"\n          aria-haspopup=\"dialog\"\n          id={referrerId}\n          aria-label={triggerAriaLabel}\n        >\n          {children}\n        </button>\n      ) : (\n        <span {...triggerProps} id={referrerId}>\n          {children}\n        </span>\n      )}\n      {visible && (\n        <ResetContextsForModal>\n          {renderWithPortal ? <Portal>{popoverContent}</Portal> : popoverContent}\n        </ResetContextsForModal>\n      )}\n    </span>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/popover/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, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { Portal, useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { getFirstFocusable } from '../internal/components/focus-lock/utils';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { KeyCode } from '../internal/keycode';\nimport Arrow from './arrow';\nimport PopoverBody from './body';\nimport ConditionalLiveRegion from './conditional-live-region';\nimport PopoverContainer from './container';\nimport { PopoverProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface InternalPopoverProps extends Omit<PopoverProps, 'triggerType' | 'size'>, InternalBaseComponentProps {\n  __onOpen?: NonCancelableEventHandler<null>;\n  triggerType?: PopoverProps.TriggerType | 'filtering-token';\n  size: PopoverProps.Size | 'content';\n  __closeAnalyticsAction?: string;\n  isInline?: boolean;\n}\n\nexport default React.forwardRef(InternalPopover);\n\nfunction InternalPopover(\n  {\n    position = 'right',\n    size = 'medium',\n    fixedWidth = false,\n    triggerType = 'text',\n    dismissButton = true,\n\n    children,\n    header,\n    content,\n    triggerAriaLabel,\n\n    wrapTriggerText = true,\n    isInline = false,\n    renderWithPortal = false,\n\n    __onOpen,\n    __internalRootRef,\n    __closeAnalyticsAction,\n\n    ...restProps\n  }: InternalPopoverProps,\n  ref: React.Ref<PopoverProps.Ref>\n) {\n  const baseProps = getBaseProps(restProps);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement | null>(null);\n\n  const i18n = useInternalI18n('popover');\n  const dismissAriaLabel = i18n('dismissAriaLabel', restProps.dismissAriaLabel);\n\n  const [visible, setVisible] = useState(false);\n\n  const focusTrigger = useCallback(() => {\n    if (['text', 'text-inline'].includes(triggerType)) {\n      triggerRef.current?.focus();\n    } else if (triggerRef.current) {\n      getFirstFocusable(triggerRef.current)?.focus();\n    }\n  }, [triggerType]);\n\n  const onTriggerClick = useCallback(() => {\n    fireNonCancelableEvent(__onOpen);\n    setVisible(true);\n  }, [__onOpen]);\n\n  const onDismiss = useCallback(() => {\n    setVisible(false);\n    focusTrigger();\n  }, [focusTrigger]);\n\n  const onTriggerKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      const isEscapeKey = event.keyCode === KeyCode.escape;\n      const isTabKey = event.keyCode === KeyCode.tab;\n      if (isEscapeKey && visible) {\n        event.stopPropagation();\n      }\n      if (isTabKey || isEscapeKey) {\n        setVisible(false);\n      }\n    },\n    [visible]\n  );\n\n  useImperativeHandle(ref, () => ({\n    dismiss: () => {\n      setVisible(false);\n    },\n    focus: () => {\n      setVisible(false);\n      focusTrigger();\n    },\n  }));\n\n  const clickFrameId = useRef<number | null>(null);\n  useEffect(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n    const document = triggerRef.current.ownerDocument;\n\n    const onDocumentClick = () => {\n      // Dismiss popover unless there was a click inside within the last animation frame.\n      if (clickFrameId.current === null) {\n        setVisible(false);\n      }\n    };\n\n    document.addEventListener('mousedown', onDocumentClick);\n\n    return () => {\n      document.removeEventListener('mousedown', onDocumentClick);\n    };\n  }, []);\n\n  const popoverClasses = usePortalModeClasses(triggerRef);\n\n  const triggerProps = {\n    // https://github.com/microsoft/TypeScript/issues/36659\n    ref: triggerRef as any,\n    onClick: onTriggerClick,\n    onKeyDown: onTriggerKeyDown,\n    className: clsx(styles.trigger, styles[`trigger-type-${triggerType}`]),\n  };\n  const { tabIndex: triggerTabIndex } = useSingleTabStopNavigation(triggerRef);\n\n  const referrerId = useUniqueId();\n\n  const popoverContent = (\n    <div\n      className={clsx(popoverClasses, !renderWithPortal && styles['popover-inline-content'])}\n      data-awsui-referrer-id={referrerId}\n    >\n      <PopoverContainer\n        size={size}\n        fixedWidth={fixedWidth}\n        position={position}\n        trackRef={triggerRef}\n        arrow={position => <Arrow position={position} />}\n        renderWithPortal={renderWithPortal}\n        zIndex={renderWithPortal ? 7000 : undefined}\n      >\n        <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n          <PopoverBody\n            dismissButton={dismissButton}\n            dismissAriaLabel={dismissAriaLabel}\n            header={header}\n            onDismiss={onDismiss}\n            overflowVisible=\"both\"\n            closeAnalyticsAction={__closeAnalyticsAction}\n          >\n            <ConditionalLiveRegion condition={!dismissButton}>{content}</ConditionalLiveRegion>\n          </PopoverBody>\n        </LinkDefaultVariantContext.Provider>\n      </PopoverContainer>\n    </div>\n  );\n\n  const mergedRef = useMergeRefs(popoverRef, __internalRootRef);\n\n  return (\n    <span\n      {...baseProps}\n      className={clsx(\n        styles.root,\n        baseProps.className,\n        triggerType === 'filtering-token' && styles['root-filtering-token'],\n        isInline && styles['no-wrap']\n      )}\n      ref={mergedRef}\n      onMouseDown={() => {\n        // Indicate there was a click inside popover recently, including nested portals.\n        clickFrameId.current = requestAnimationFrame(() => {\n          clickFrameId.current = null;\n        });\n      }}\n    >\n      {['text', 'text-inline'].includes(triggerType) ? (\n        <button\n          {...triggerProps}\n          className={clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis'])}\n          tabIndex={triggerTabIndex}\n          type=\"button\"\n          aria-haspopup=\"dialog\"\n          id={referrerId}\n          aria-label={triggerAriaLabel}\n        >\n          {children}\n        </button>\n      ) : (\n        <span {...triggerProps} id={referrerId}>\n          {children}\n        </span>\n      )}\n      {visible && (\n        <ResetContextsForModal>\n          {renderWithPortal ? <Portal>{popoverContent}</Portal> : popoverContent}\n        </ResetContextsForModal>\n      )}\n    </span>\n  );\n}\n"]}

package/lib/internal/template/progress-bar/index.d.ts

@@ -1,4 +1,4 @@
 import { ProgressBarProps } from './interfaces';
 export { ProgressBarProps };
-export default function ProgressBar({ value, status, variant, resultButtonText, label, ariaLabel, ariaLabelledby, ariaDescribedby, description, additionalInfo, resultText, onResultButtonClick, ...rest }: ProgressBarProps): JSX.Element;
+export default function ProgressBar({ value, status, variant, resultButtonText, label, ariaLabel, ariaLabelledby, ariaDescribedby, description, additionalInfo, resultText, onResultButtonClick, style, ...rest }: ProgressBarProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/progress-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAS,EACT,MAAsB,EACtB,OAAsB,EACtB,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,GAAG,IAAI,EACR,EAAE,gBAAgB,eA6FlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAS,EACT,MAAsB,EACtB,OAAsB,EACtB,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,eA8FlB"}

package/lib/internal/template/progress-bar/index.js

@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 'use client';
-import { __rest } from "tslib";
 import React, { useEffect, useMemo, useState } from 'react';
 import clsx from 'clsx';
 import { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
@@ -15,8 +14,7 @@ import InternalLiveRegion from '../live-region/internal';
 import { Progress, ResultState, SmallText } from './internal';
 import styles from './styles.css.js';
 const ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements
-export default function ProgressBar(_a) {
-    var { value = 0, status = 'in-progress', variant = 'standalone', resultButtonText, label, ariaLabel, ariaLabelledby, ariaDescribedby, description, additionalInfo, resultText, onResultButtonClick } = _a, rest = __rest(_a, ["value", "status", "variant", "resultButtonText", "label", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "description", "additionalInfo", "resultText", "onResultButtonClick"]);
+export default function ProgressBar({ value = 0, status = 'in-progress', variant = 'standalone', resultButtonText, label, ariaLabel, ariaLabelledby, ariaDescribedby, description, additionalInfo, resultText, onResultButtonClick, style, ...rest }) {
     const { __internalRootRef } = useBaseComponent('ProgressBar', {
         props: { variant },
     });
@@ -39,12 +37,12 @@ export default function ProgressBar(_a) {
     if (isInFlash && resultButtonText) {
         warnOnce('ProgressBar', '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.');
     }
-    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, variant && styles[variant]), ref: __internalRootRef }),
+    return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root, variant && styles[variant]), ref: __internalRootRef },
         React.createElement("div", { className: isInFlash ? styles['flash-container'] : undefined },
             React.createElement("div", { className: clsx(styles['word-wrap'], styles[`label-${variant}`]), id: labelId }, label),
             description && (React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined, id: descriptionId }, description)),
             React.createElement("div", null, isInProgressState ? (React.createElement(React.Fragment, null,
-                React.createElement(Progress, { value: value, ariaLabel: ariaLabel, ariaLabelledby: joinStrings(labelId, ariaLabelledby), ariaDescribedby: joinStrings(description ? descriptionId : undefined, additionalInfo ? additionalInfoId : undefined, ariaDescribedby), isInFlash: isInFlash }),
+                React.createElement(Progress, { value: value, ariaLabel: ariaLabel, ariaLabelledby: joinStrings(labelId, ariaLabelledby), ariaDescribedby: joinStrings(description ? descriptionId : undefined, additionalInfo ? additionalInfoId : undefined, ariaDescribedby), isInFlash: isInFlash, style: style }),
                 React.createElement(InternalLiveRegion, { hidden: true, tagName: "span", delay: 0 },
                     label,
                     label ? ': ' : null,

package/lib/internal/template/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\n'use client';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { joinStrings } from '../internal/utils/strings';\nimport { throttle } from '../internal/utils/throttle';\nimport InternalLiveRegion from '../live-region/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { Progress, ResultState, SmallText } from './internal';\n\nimport styles from './styles.css.js';\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  ariaDescribedby,\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 descriptionId = useUniqueId('progressbar-description-');\n  const additionalInfoId = useUniqueId('progressbar-additional-info-');\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 && (\n          <SmallText color={isInFlash ? 'inherit' : undefined} id={descriptionId}>\n            {description}\n          </SmallText>\n        )}\n        <div>\n          {isInProgressState ? (\n            <>\n              <Progress\n                value={value}\n                ariaLabel={ariaLabel}\n                ariaLabelledby={joinStrings(labelId, ariaLabelledby)}\n                ariaDescribedby={joinStrings(\n                  description ? descriptionId : undefined,\n                  additionalInfo ? additionalInfoId : undefined,\n                  ariaDescribedby\n                )}\n                isInFlash={isInFlash}\n              />\n              <InternalLiveRegion hidden={true} tagName=\"span\" delay={0}>\n                {label}\n                {label ? ': ' : null}\n                {announcedValue}\n              </InternalLiveRegion>\n            </>\n          ) : (\n            <InternalLiveRegion hidden={false} tagName=\"span\" delay={0}>\n              <ResultState\n                resultText={resultText}\n                isInFlash={isInFlash}\n                resultButtonText={resultButtonText}\n                status={status}\n                onClick={() => {\n                  fireNonCancelableEvent(onResultButtonClick);\n                }}\n              />\n            </InternalLiveRegion>\n          )}\n        </div>\n      </div>\n      {additionalInfo && (\n        <SmallText\n          className={styles['additional-info']}\n          color={isInFlash ? 'inherit' : undefined}\n          id={additionalInfoId}\n        >\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\n'use client';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { joinStrings } from '../internal/utils/strings';\nimport { throttle } from '../internal/utils/throttle';\nimport InternalLiveRegion from '../live-region/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { Progress, ResultState, SmallText } from './internal';\n\nimport styles from './styles.css.js';\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  ariaDescribedby,\n  description,\n  additionalInfo,\n  resultText,\n  onResultButtonClick,\n  style,\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 descriptionId = useUniqueId('progressbar-description-');\n  const additionalInfoId = useUniqueId('progressbar-additional-info-');\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 && (\n          <SmallText color={isInFlash ? 'inherit' : undefined} id={descriptionId}>\n            {description}\n          </SmallText>\n        )}\n        <div>\n          {isInProgressState ? (\n            <>\n              <Progress\n                value={value}\n                ariaLabel={ariaLabel}\n                ariaLabelledby={joinStrings(labelId, ariaLabelledby)}\n                ariaDescribedby={joinStrings(\n                  description ? descriptionId : undefined,\n                  additionalInfo ? additionalInfoId : undefined,\n                  ariaDescribedby\n                )}\n                isInFlash={isInFlash}\n                style={style}\n              />\n              <InternalLiveRegion hidden={true} tagName=\"span\" delay={0}>\n                {label}\n                {label ? ': ' : null}\n                {announcedValue}\n              </InternalLiveRegion>\n            </>\n          ) : (\n            <InternalLiveRegion hidden={false} tagName=\"span\" delay={0}>\n              <ResultState\n                resultText={resultText}\n                isInFlash={isInFlash}\n                resultButtonText={resultButtonText}\n                status={status}\n                onClick={() => {\n                  fireNonCancelableEvent(onResultButtonClick);\n                }}\n              />\n            </InternalLiveRegion>\n          )}\n        </div>\n      </div>\n      {additionalInfo && (\n        <SmallText\n          className={styles['additional-info']}\n          color={isInFlash ? 'inherit' : undefined}\n          id={additionalInfoId}\n        >\n          {additionalInfo}\n        </SmallText>\n      )}\n    </div>\n  );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n"]}

package/lib/internal/template/progress-bar/interfaces.d.ts

@@ -68,9 +68,28 @@ export interface ProgressBarProps extends BaseComponentProps {
      * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.
      */
     onResultButtonClick?: NonCancelableEventHandler;
+    /**
+     * @awsuiSystem core
+     */
+    style?: ProgressBarProps.Style;
 }
 export declare namespace ProgressBarProps {
     type Status = 'in-progress' | 'success' | 'error';
     type Variant = 'standalone' | 'flash' | 'key-value';
+    interface Style {
+        progressBar?: {
+            backgroundColor?: string;
+            borderRadius?: string;
+            height?: string;
+        };
+        progressValue?: {
+            backgroundColor?: string;
+        };
+        progressPercentage?: {
+            color?: string;
+            fontSize?: string;
+            fontWeight?: string;
+        };
+    }
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/progress-bar/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAEjC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAEnC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;CACjD;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD,KAAY,OAAO,GAAG,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;CAC5D"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAEjC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAEnC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;IAEhD;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC;CAChC;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD,KAAY,OAAO,GAAG,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;IAE3D,UAAiB,KAAK;QACpB,WAAW,CAAC,EAAE;YACZ,eAAe,CAAC,EAAE,MAAM,CAAC;YACzB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,MAAM,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;QACF,aAAa,CAAC,EAAE;YACd,eAAe,CAAC,EAAE,MAAM,CAAC;SAC1B,CAAC;QACF,kBAAkB,CAAC,EAAE;YACnB,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;KACH;CACF"}

package/lib/internal/template/progress-bar/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface ProgressBarProps extends BaseComponentProps {\n  /**\n   * Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.\n   */\n  value?: number;\n\n  /**\n   * Specifies the status of the progress bar. You can set it to one of the following:\n   *\n   * - `\"in-progress\"` - Displays a progress bar.\n   * - `\"success\"` or `\"error\"` - Displays a result state and replaces the progress element with a status indicator,\n   * `resultText`, and a result button.\n   */\n  status?: ProgressBarProps.Status;\n\n  /**\n   * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:\n   *\n   * - `\"flash\"` - Use this variatn when using the progress bar within a flash component.\n   *              Note that the result button isn't displayed when using this variant.\n   *              Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.\n   * - `\"key-value\"` - Use this variant when using the progress bar within the key-value pairs pattern.\n   * - `\"standalone\"` Use in all other cases. This is the default value.\n   */\n  variant?: ProgressBarProps.Variant;\n\n  /**\n   * Specifies the text for the button that's displayed when the `status` is set to `error` or `success`.\n   * If `resultButtonText` is empty, the result button isn't displayed.\n   *\n   * Note: If you use the `flash` variant, the result button isn't displayed.\n   * Add a button using the `action` property of the flashbar item instead.\n   */\n  resultButtonText?: string;\n\n  /**\n   * Adds an `aria-label` to the progress bar.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-labelledby` to the progress bar.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Adds `aria-describedby` to the progress bar.\n   */\n  ariaDescribedby?: string;\n\n  /**\n   * Short description of the operation that appears at the top of the component.\n   *\n   * Make sure that you always provide a label for accessibility.\n   */\n  label?: React.ReactNode;\n\n  /**\n   * More detailed information about the operation that appears below the label.\n   */\n  description?: React.ReactNode;\n\n  /**\n   * Information that's displayed below the progress bar or status text.\n   */\n  additionalInfo?: React.ReactNode;\n\n  /**\n   * Content that's displayed when `status` is set to `error` or `success`.\n   */\n  resultText?: React.ReactNode;\n\n  /**\n   * Called when the user clicks the result state button.\n   *\n   * Note: If you are using the `flash` variant, the result button isn't displayed.\n   * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.\n   */\n  onResultButtonClick?: NonCancelableEventHandler;\n}\n\nexport namespace ProgressBarProps {\n  export type Status = 'in-progress' | 'success' | 'error';\n  export type Variant = 'standalone' | 'flash' | 'key-value';\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface ProgressBarProps extends BaseComponentProps {\n  /**\n   * Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.\n   */\n  value?: number;\n\n  /**\n   * Specifies the status of the progress bar. You can set it to one of the following:\n   *\n   * - `\"in-progress\"` - Displays a progress bar.\n   * - `\"success\"` or `\"error\"` - Displays a result state and replaces the progress element with a status indicator,\n   * `resultText`, and a result button.\n   */\n  status?: ProgressBarProps.Status;\n\n  /**\n   * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:\n   *\n   * - `\"flash\"` - Use this variatn when using the progress bar within a flash component.\n   *              Note that the result button isn't displayed when using this variant.\n   *              Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.\n   * - `\"key-value\"` - Use this variant when using the progress bar within the key-value pairs pattern.\n   * - `\"standalone\"` Use in all other cases. This is the default value.\n   */\n  variant?: ProgressBarProps.Variant;\n\n  /**\n   * Specifies the text for the button that's displayed when the `status` is set to `error` or `success`.\n   * If `resultButtonText` is empty, the result button isn't displayed.\n   *\n   * Note: If you use the `flash` variant, the result button isn't displayed.\n   * Add a button using the `action` property of the flashbar item instead.\n   */\n  resultButtonText?: string;\n\n  /**\n   * Adds an `aria-label` to the progress bar.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-labelledby` to the progress bar.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Adds `aria-describedby` to the progress bar.\n   */\n  ariaDescribedby?: string;\n\n  /**\n   * Short description of the operation that appears at the top of the component.\n   *\n   * Make sure that you always provide a label for accessibility.\n   */\n  label?: React.ReactNode;\n\n  /**\n   * More detailed information about the operation that appears below the label.\n   */\n  description?: React.ReactNode;\n\n  /**\n   * Information that's displayed below the progress bar or status text.\n   */\n  additionalInfo?: React.ReactNode;\n\n  /**\n   * Content that's displayed when `status` is set to `error` or `success`.\n   */\n  resultText?: React.ReactNode;\n\n  /**\n   * Called when the user clicks the result state button.\n   *\n   * Note: If you are using the `flash` variant, the result button isn't displayed.\n   * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.\n   */\n  onResultButtonClick?: NonCancelableEventHandler;\n\n  /**\n   * @awsuiSystem core\n   */\n  style?: ProgressBarProps.Style;\n}\n\nexport namespace ProgressBarProps {\n  export type Status = 'in-progress' | 'success' | 'error';\n  export type Variant = 'standalone' | 'flash' | 'key-value';\n\n  export interface Style {\n    progressBar?: {\n      backgroundColor?: string;\n      borderRadius?: string;\n      height?: string;\n    };\n    progressValue?: {\n      backgroundColor?: string;\n    };\n    progressPercentage?: {\n      color?: string;\n      fontSize?: string;\n      fontWeight?: string;\n    };\n  }\n}\n"]}

package/lib/internal/template/progress-bar/internal.d.ts

@@ -7,8 +7,9 @@ interface ProgressProps {
     ariaLabel?: string;
     ariaLabelledby?: string;
     ariaDescribedby?: string;
+    style?: ProgressBarProps.Style;
 }
-export declare const Progress: ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby }: ProgressProps) => JSX.Element;
+export declare const Progress: ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby, style }: ProgressProps) => JSX.Element;
 interface SmallTextProps {
     color?: BoxProps.Color;
     id?: string;

package/lib/internal/template/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;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAUhD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AACD,eAAO,MAAM,QAAQ,GAAI,kEAAkE,aAAa,gBA0BvG,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,oCAAoC,cAAc,gBAM3E,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,GAAI,8DAA8D,gBAAgB,gBAqBzG,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAWhD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,GAAI,yEAAyE,aAAa,gBAuC9G,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,oCAAoC,cAAc,gBAM3E,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,GAAI,8DAA8D,gBAAgB,gBAqBzG,CAAC"}

package/lib/internal/template/progress-bar/internal.js

@@ -5,18 +5,25 @@ import clsx from 'clsx';
 import InternalBox from '../box/internal';
 import { InternalButton } from '../button/internal';
 import InternalStatusIndicator from '../status-indicator/internal';
+import { getProgressPercentageStyles, getProgressStyles, getProgressValueStyles } from './styles';
 import styles from './styles.css.js';
 const MAX_VALUE = 100;
 const clamp = (value, lowerLimit, upperLimit) => {
     return Math.max(Math.min(value, upperLimit), lowerLimit);
 };
-export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby }) => {
+export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby, style }) => {
     const roundedValue = Math.round(value);
     const progressValue = clamp(roundedValue, 0, MAX_VALUE);
+    const progressBarStyles = getProgressStyles(style);
+    const progressValueStyles = getProgressValueStyles(style);
+    const progressPercentageStyles = getProgressPercentageStyles(style);
     return (React.createElement("div", { className: styles['progress-container'] },
-        React.createElement("progress", { className: clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete, isInFlash && styles['progress-in-flash']), max: MAX_VALUE, value: progressValue, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel ? ariaLabelledby : undefined, "aria-describedby": ariaDescribedby }),
+        React.createElement("progress", { className: clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete, isInFlash && styles['progress-in-flash']), max: MAX_VALUE, value: progressValue, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel ? ariaLabelledby : undefined, "aria-describedby": ariaDescribedby, style: {
+                ...(progressBarStyles || {}),
+                ...(progressValueStyles || {}),
+            } }),
         React.createElement("span", { "aria-hidden": "true", className: styles['percentage-container'] },
-            React.createElement(InternalBox, { className: styles.percentage, variant: "small", color: isInFlash ? 'inherit' : undefined }, `${progressValue}%`))));
+            React.createElement(InternalBox, { className: styles.percentage, variant: "small", color: isInFlash ? 'inherit' : undefined, nativeAttributes: progressPercentageStyles ? { style: progressPercentageStyles } : undefined }, `${progressValue}%`))));
 };
 export const SmallText = ({ color, children, className, id }) => {
     return (React.createElement(InternalBox, { className: clsx(styles['word-wrap'], className), variant: "small", display: "block", color: color, id: id }, children));

package/lib/internal/template/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';\n\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';\nimport { ProgressBarProps } from './interfaces';\n\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  ariaDescribedby?: string;\n}\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby }: 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        aria-describedby={ariaDescribedby}\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  id?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const SmallText = ({ color, children, className, id }: SmallTextProps) => {\n  return (\n    <InternalBox className={clsx(styles['word-wrap'], className)} variant=\"small\" display=\"block\" color={color} id={id}>\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}`]}>\n        <span className={styles['result-text']}>{resultText}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles[`result-container-${status}`]}>\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';\n\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';\nimport { ProgressBarProps } from './interfaces';\nimport { getProgressPercentageStyles, getProgressStyles, getProgressValueStyles } from './styles';\n\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  ariaDescribedby?: string;\n  style?: ProgressBarProps.Style;\n}\n\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby, style }: ProgressProps) => {\n  const roundedValue = Math.round(value);\n  const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n  const progressBarStyles = getProgressStyles(style);\n  const progressValueStyles = getProgressValueStyles(style);\n  const progressPercentageStyles = getProgressPercentageStyles(style);\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        aria-describedby={ariaDescribedby}\n        style={{\n          ...(progressBarStyles || {}),\n          ...(progressValueStyles || {}),\n        }}\n      />\n      <span aria-hidden=\"true\" className={styles['percentage-container']}>\n        <InternalBox\n          className={styles.percentage}\n          variant=\"small\"\n          color={isInFlash ? 'inherit' : undefined}\n          nativeAttributes={progressPercentageStyles ? { style: progressPercentageStyles } : undefined}\n        >\n          {`${progressValue}%`}\n        </InternalBox>\n      </span>\n    </div>\n  );\n};\n\ninterface SmallTextProps {\n  color?: BoxProps.Color;\n  id?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const SmallText = ({ color, children, className, id }: SmallTextProps) => {\n  return (\n    <InternalBox className={clsx(styles['word-wrap'], className)} variant=\"small\" display=\"block\" color={color} id={id}>\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}`]}>\n        <span className={styles['result-text']}>{resultText}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles[`result-container-${status}`]}>\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/lib/internal/template/progress-bar/styles.css.js

@@ -1,24 +1,24 @@
 
     import './styles.scoped.css';
     export default {
-  "progress": "awsui_progress_11huc_19ekg_189",
-  "result-state": "awsui_result-state_11huc_19ekg_203",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_19ekg_1",
-  "root": "awsui_root_11huc_19ekg_225",
-  "with-result-button": "awsui_with-result-button_11huc_19ekg_257",
-  "result-text": "awsui_result-text_11huc_19ekg_261",
-  "result-container-error": "awsui_result-container-error_11huc_19ekg_265",
-  "result-container-success": "awsui_result-container-success_11huc_19ekg_265",
-  "result-button": "awsui_result-button_11huc_19ekg_269",
-  "word-wrap": "awsui_word-wrap_11huc_19ekg_275",
-  "label-flash": "awsui_label-flash_11huc_19ekg_280",
-  "label-key-value": "awsui_label-key-value_11huc_19ekg_284",
-  "flash": "awsui_flash_11huc_19ekg_292",
-  "progress-container": "awsui_progress-container_11huc_19ekg_296",
-  "percentage-container": "awsui_percentage-container_11huc_19ekg_303",
-  "percentage": "awsui_percentage_11huc_19ekg_303",
-  "complete": "awsui_complete_11huc_19ekg_349",
-  "progress-in-flash": "awsui_progress-in-flash_11huc_19ekg_362",
-  "additional-info": "awsui_additional-info_11huc_19ekg_375"
+  "progress": "awsui_progress_11huc_171th_189",
+  "result-state": "awsui_result-state_11huc_171th_203",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_171th_1",
+  "root": "awsui_root_11huc_171th_225",
+  "with-result-button": "awsui_with-result-button_11huc_171th_257",
+  "result-text": "awsui_result-text_11huc_171th_261",
+  "result-container-error": "awsui_result-container-error_11huc_171th_265",
+  "result-container-success": "awsui_result-container-success_11huc_171th_265",
+  "result-button": "awsui_result-button_11huc_171th_269",
+  "word-wrap": "awsui_word-wrap_11huc_171th_275",
+  "label-flash": "awsui_label-flash_11huc_171th_280",
+  "label-key-value": "awsui_label-key-value_11huc_171th_284",
+  "flash": "awsui_flash_11huc_171th_292",
+  "progress-container": "awsui_progress-container_11huc_171th_296",
+  "percentage-container": "awsui_percentage-container_11huc_171th_303",
+  "percentage": "awsui_percentage_11huc_171th_303",
+  "complete": "awsui_complete_11huc_171th_349",
+  "progress-in-flash": "awsui_progress-in-flash_11huc_171th_362",
+  "additional-info": "awsui_additional-info_11huc_171th_375"
 };
   

package/lib/internal/template/progress-bar/styles.d.ts

@@ -0,0 +1,16 @@
+import customCssProps from '../internal/generated/custom-css-properties';
+import { ProgressBarProps } from './interfaces';
+export declare function getProgressStyles(style: ProgressBarProps['style']): {
+    [customCssProps.progressBarBackgroundColor]: string | undefined;
+    [customCssProps.progressBarBorderRadius]: string | undefined;
+    [customCssProps.progressBarHeight]: string | undefined;
+} | undefined;
+export declare function getProgressValueStyles(style: ProgressBarProps['style']): {
+    [customCssProps.progressValueBackgroundColor]: string | undefined;
+} | undefined;
+export declare function getProgressPercentageStyles(style: ProgressBarProps['style']): {
+    color: string | undefined;
+    fontSize: string | undefined;
+    fontWeight: string | undefined;
+} | undefined;
+//# sourceMappingURL=styles.d.ts.map

package/lib/internal/template/progress-bar/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/styles.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAM9D,CAAC,cAAc,CAAC,0BAA0B,CAAC,qBAAmC;IAC9E,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAAgC;IACxE,CAAC,cAAc,CAAC,iBAAiB,CAAC,qBAA0B;cAE/D;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAMnE,CAAC,cAAc,CAAC,4BAA4B,CAAC,qBAAqC;cAErF;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;;;;cAU3E"}

package/lib/internal/template/progress-bar/styles.js

@@ -0,0 +1,33 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+import customCssProps from '../internal/generated/custom-css-properties';
+export function getProgressStyles(style) {
+    if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.progressBar)) {
+        return undefined;
+    }
+    return {
+        [customCssProps.progressBarBackgroundColor]: style.progressBar.backgroundColor,
+        [customCssProps.progressBarBorderRadius]: style.progressBar.borderRadius,
+        [customCssProps.progressBarHeight]: style.progressBar.height,
+    };
+}
+export function getProgressValueStyles(style) {
+    if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.progressValue)) {
+        return undefined;
+    }
+    return {
+        [customCssProps.progressValueBackgroundColor]: style.progressValue.backgroundColor,
+    };
+}
+export function getProgressPercentageStyles(style) {
+    if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.progressPercentage)) {
+        return undefined;
+    }
+    return {
+        color: style.progressPercentage.color,
+        fontSize: style.progressPercentage.fontSize,
+        fontWeight: style.progressPercentage.fontWeight,
+    };
+}
+//# sourceMappingURL=styles.js.map