@pega/cosmos-react-core 4.0.0-dev.1.2 → 4.0.0-dev.10.0

package/lib/components/Progress/Progress.js

@@ -1,80 +1,119 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import styled, { css } from 'styled-components';
-import { readableColor, rgba } from 'polished';
-import Backdrop from '../Backdrop';
 import Text from '../Text';
-import { calculateFontSize } from '../../styles';
-import { tryCatch } from '../../utils';
-import { useConfiguration } from '../../hooks';
+import { useConfiguration, useConsolidatedRef, useI18n, useLiveLog } from '../../hooks';
+import Flex from '../Flex';
 import Bar from './Bar';
 import Ellipsis from './Ellipsis';
 import Ring from './Ring';
-const StyledMessage = styled.span(({ theme }) => {
-    const color = tryCatch(() => {
-        return rgba(readableColor(theme.base.palette['primary-background']), theme.base.transparency['transparent-3']);
-    });
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    return css `
-    margin-top: 0.5rem;
-    font-size: ${fontSize[theme.components.label['font-size']]};
-    font-weight: ${theme.base['font-weight']['semi-bold']};
-    color: ${color};
-  `;
-});
-const Progress = forwardRef(({ variant = 'ring', placement = 'global', visible = true, onTransitionEndIn, onTransitionEndOut, value, message, ...restProps }, ref) => {
-    const [isVisible, setIsVisible] = useState(visible);
-    const [isNull, setIsNull] = useState(!visible);
+import { StyledMessage, StyledProgress, StyledProgressBackdrop } from './Progress.styles';
+const variantMap = {
+    ring: Ring,
+    bar: Bar,
+    ellipsis: Ellipsis
+};
+const delayDuration = 100;
+const minVisibleDuration = 1000;
+const Progress = forwardRef(({ variant = 'ring', placement = 'global', visible: visibleProp = true, focusOnVisible = false, delay = false, onTransitionEndIn, onTransitionEndOut, value, message, liveConfig, ...restProps }, ref) => {
+    const t = useI18n();
     const { portalTarget } = useConfiguration();
-    const showTime = useRef();
-    const showTimeout = useRef();
-    const hideTimeout = useRef();
-    let Comp = Ring;
-    if (variant === 'bar')
-        Comp = Bar;
-    else if (variant === 'ellipsis')
-        Comp = Ellipsis;
-    const onBackdropTransitionEnd = () => {
-        setIsNull(true);
-        onTransitionEndOut?.();
+    const { announcePolite } = useLiveLog();
+    const progressEl = useConsolidatedRef(ref);
+    // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.
+    const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);
+    const [nullRender, setNullRender] = useState(!isVisibleState);
+    // Refs for timestamps and timeout ids.
+    const timeBeforeVisibleRender = useRef();
+    const timeAfterVisibleRender = useRef();
+    const delayTimer = useRef();
+    const minVisibleTimer = useRef();
+    const hasBackdrop = placement === 'global' || placement === 'local';
+    const valString = typeof value === 'number' ? `${value}%` : undefined;
+    const label = message && valString ? `${message} - ${valString}` : message || valString;
+    const renderVisible = () => {
+        setIsVisibleState(true);
+        setNullRender(false);
+    };
+    const renderNotVisible = () => {
+        setIsVisibleState(false);
+        // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.
+        if (!hasBackdrop) {
+            setNullRender(true);
+        }
     };
+    // Handle render and visible state.
     useEffect(() => {
-        if (visible) {
-            clearTimeout(hideTimeout.current);
-            showTime.current = Date.now();
-            showTimeout.current = window.setTimeout(() => {
-                setIsVisible(true);
-                setIsNull(false);
-            }, 100);
+        if (visibleProp) {
+            // Capture a timestamp for additional timers.
+            timeBeforeVisibleRender.current = Date.now();
+            if (delay) {
+                delayTimer.current = window.setTimeout(renderVisible, delayDuration);
+            }
+            else {
+                renderVisible();
+            }
         }
-        else {
-            clearTimeout(showTimeout.current);
-            if (typeof showTime.current === 'number') {
-                const minimumDuration = 1000;
-                const timeElapsed = Date.now() - showTime.current;
-                if (timeElapsed > minimumDuration)
-                    setIsVisible(false);
+        else if (
+        // A timer was started to render visible either avoid it or render null.
+        delayTimer.current !== undefined) {
+            // If a timeout has started to render visible, clear it.
+            clearTimeout(delayTimer.current);
+            // If the indicator has already rendered visible.
+            if (timeAfterVisibleRender.current !== undefined) {
+                const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;
+                // If the indicator has been visible for long enough we can remove it.
+                if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {
+                    renderNotVisible();
+                }
                 else {
-                    hideTimeout.current = window.setTimeout(() => {
-                        setIsVisible(false);
-                    }, minimumDuration - timeElapsed);
+                    // Hold off removing until we hit the minimum visible time.
+                    minVisibleTimer.current = window.setTimeout(renderNotVisible, minVisibleDuration - timeElapsedSinceLastVisibleRender);
                 }
             }
-            else
-                setIsVisible(false);
+            else {
+                renderNotVisible();
+            }
+        }
+        else {
+            renderNotVisible();
         }
-    }, [visible]);
+    }, 
+    // visibleProp is the only triggerable dependency. Others values will be captured.
+    [visibleProp]);
+    // Live announcement
     useEffect(() => {
-        return () => {
-            clearTimeout(showTimeout.current);
-            clearTimeout(hideTimeout.current);
-        };
-    }, []);
-    if (isNull)
+        if (liveConfig?.contextualLabel && isVisibleState) {
+            announcePolite({
+                message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,
+                type: 'status'
+            });
+        }
+    }, 
+    // isVisibleState is the only triggerable dependency. Others values will be captured.
+    [isVisibleState]);
+    // Auto focusing and render timestamping.
+    useEffect(() => {
+        if (!nullRender && isVisibleState) {
+            // After a visible render set a timestamp for timers above.
+            timeAfterVisibleRender.current = Date.now();
+            if (focusOnVisible)
+                progressEl.current?.focus();
+        }
+    }, 
+    // nullRender is the only triggerable dependency. Others values will be captured.
+    [nullRender]);
+    if (nullRender)
         return null;
-    const comp = (_jsx(Comp, { ...restProps, placement: placement, value: value, "aria-valuetext": message && typeof value === 'number' ? `${message} - ${value}` : message, ref: ref }));
-    const content = placement === 'inline' ? (comp) : (_jsxs(Backdrop, { open: isVisible, container: { direction: 'column' }, position: placement === 'global' ? 'fixed' : 'absolute', variant: 'light', alpha: 0.5, onAfterTransitionIn: onTransitionEndIn, onAfterTransitionOut: onBackdropTransitionEnd, children: [comp, !!message && (_jsx(Text, { as: StyledMessage, variant: 'secondary', "aria-hidden": 'true', children: message }))] }));
+    const CompVariant = variantMap[variant];
+    let indicator = (_jsx(CompVariant, { "aria-label": typeof value !== 'number' ? label : t('loading'), ...restProps, placement: placement, value: value, "aria-valuetext": typeof value === 'number' ? label : undefined, ref: progressEl, tabIndex: -1 }));
+    if (placement !== 'inline') {
+        indicator = (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 0.5 }, as: StyledProgress, placement: placement, children: [indicator, message && (_jsx(Text, { as: StyledMessage, variant: 'secondary', "aria-hidden": 'true', children: message }))] }));
+    }
+    const content = hasBackdrop ? (_jsx(StyledProgressBackdrop, { open: isVisibleState, container: { direction: 'column' }, position: placement === 'global' ? 'fixed' : 'absolute', variant: 'light', alpha: 0.5, onAfterTransitionIn: onTransitionEndIn, onAfterTransitionOut: () => {
+            setNullRender(true);
+            onTransitionEndOut?.();
+        }, children: indicator })) : (indicator);
     return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;
 });
 export default Progress;

package/lib/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, useState, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport Backdrop from '../Backdrop';\nimport Text from '../Text';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { tryCatch } from '../../utils';\nimport { useConfiguration } from '../../hooks';\n\nimport { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\n\nconst StyledMessage = styled.span(({ theme }) => {\n  const color = tryCatch(() => {\n    return rgba(\n      readableColor(theme.base.palette['primary-background']),\n      theme.base.transparency['transparent-3']\n    );\n  });\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    margin-top: 0.5rem;\n    font-size: ${fontSize[theme.components.label['font-size'] as FontSize]};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    color: ${color};\n  `;\n});\n\nconst Progress: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant = 'ring',\n      placement = 'global',\n      visible = true,\n      onTransitionEndIn,\n      onTransitionEndOut,\n      value,\n      message,\n      ...restProps\n    }: PropsWithoutRef<ProgressProps>,\n    ref: ProgressProps['ref']\n  ) => {\n    const [isVisible, setIsVisible] = useState(visible);\n    const [isNull, setIsNull] = useState(!visible);\n    const { portalTarget } = useConfiguration();\n    const showTime = useRef<number>();\n    const showTimeout = useRef<number>();\n    const hideTimeout = useRef<number>();\n\n    let Comp = Ring;\n    if (variant === 'bar') Comp = Bar;\n    else if (variant === 'ellipsis') Comp = Ellipsis;\n\n    const onBackdropTransitionEnd = () => {\n      setIsNull(true);\n      onTransitionEndOut?.();\n    };\n\n    useEffect(() => {\n      if (visible) {\n        clearTimeout(hideTimeout.current);\n        showTime.current = Date.now();\n        showTimeout.current = window.setTimeout(() => {\n          setIsVisible(true);\n          setIsNull(false);\n        }, 100);\n      } else {\n        clearTimeout(showTimeout.current);\n\n        if (typeof showTime.current === 'number') {\n          const minimumDuration = 1000;\n          const timeElapsed = Date.now() - showTime.current;\n\n          if (timeElapsed > minimumDuration) setIsVisible(false);\n          else {\n            hideTimeout.current = window.setTimeout(() => {\n              setIsVisible(false);\n            }, minimumDuration - timeElapsed);\n          }\n        } else setIsVisible(false);\n      }\n    }, [visible]);\n\n    useEffect(() => {\n      return () => {\n        clearTimeout(showTimeout.current);\n        clearTimeout(hideTimeout.current);\n      };\n    }, []);\n\n    if (isNull) return null;\n\n    const comp = (\n      <Comp\n        {...restProps}\n        placement={placement}\n        value={value}\n        aria-valuetext={message && typeof value === 'number' ? `${message} - ${value}` : message}\n        ref={ref}\n      />\n    );\n\n    const content =\n      placement === 'inline' ? (\n        comp\n      ) : (\n        <Backdrop\n          open={isVisible}\n          container={{ direction: 'column' }}\n          position={placement === 'global' ? 'fixed' : 'absolute'}\n          variant='light'\n          alpha={0.5}\n          onAfterTransitionIn={onTransitionEndIn}\n          onAfterTransitionOut={onBackdropTransitionEnd}\n        >\n          {comp}\n          {!!message && (\n            <Text as={StyledMessage} variant='secondary' aria-hidden='true'>\n              {message}\n            </Text>\n          )}\n        </Backdrop>\n      );\n\n    return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n  }\n);\n\nexport default Progress;\n"]}
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, useState, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { ForwardProps } from '../../types';\nimport Text from '../Text';\nimport { useConfiguration, useConsolidatedRef, useI18n, useLiveLog } from '../../hooks';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage, StyledProgress, StyledProgressBackdrop } from './Progress.styles';\n\nconst variantMap = {\n  ring: Ring,\n  bar: Bar,\n  ellipsis: Ellipsis\n} as const;\n\nconst delayDuration = 100;\nconst minVisibleDuration = 1000;\n\nconst Progress: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant = 'ring',\n      placement = 'global',\n      visible: visibleProp = true,\n      focusOnVisible = false,\n      delay = false,\n      onTransitionEndIn,\n      onTransitionEndOut,\n      value,\n      message,\n      liveConfig,\n      ...restProps\n    }: PropsWithoutRef<ProgressProps>,\n    ref: ProgressProps['ref']\n  ) => {\n    const t = useI18n();\n    const { portalTarget } = useConfiguration();\n    const { announcePolite } = useLiveLog();\n    const progressEl = useConsolidatedRef<HTMLDivElement>(ref);\n\n    // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.\n    const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);\n    const [nullRender, setNullRender] = useState(!isVisibleState);\n\n    // Refs for timestamps and timeout ids.\n    const timeBeforeVisibleRender = useRef<number>();\n    const timeAfterVisibleRender = useRef<number>();\n    const delayTimer = useRef<number>();\n    const minVisibleTimer = useRef<number>();\n\n    const hasBackdrop = placement === 'global' || placement === 'local';\n    const valString = typeof value === 'number' ? `${value}%` : undefined;\n    const label = message && valString ? `${message} - ${valString}` : message || valString;\n\n    const renderVisible = () => {\n      setIsVisibleState(true);\n      setNullRender(false);\n    };\n\n    const renderNotVisible = () => {\n      setIsVisibleState(false);\n      // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.\n      if (!hasBackdrop) {\n        setNullRender(true);\n      }\n    };\n\n    // Handle render and visible state.\n    useEffect(\n      () => {\n        if (visibleProp) {\n          // Capture a timestamp for additional timers.\n          timeBeforeVisibleRender.current = Date.now();\n\n          if (delay) {\n            delayTimer.current = window.setTimeout(renderVisible, delayDuration);\n          } else {\n            renderVisible();\n          }\n        } else if (\n          // A timer was started to render visible either avoid it or render null.\n          delayTimer.current !== undefined\n        ) {\n          // If a timeout has started to render visible, clear it.\n          clearTimeout(delayTimer.current);\n\n          // If the indicator has already rendered visible.\n          if (timeAfterVisibleRender.current !== undefined) {\n            const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;\n\n            // If the indicator has been visible for long enough we can remove it.\n            if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {\n              renderNotVisible();\n            } else {\n              // Hold off removing until we hit the minimum visible time.\n              minVisibleTimer.current = window.setTimeout(\n                renderNotVisible,\n                minVisibleDuration - timeElapsedSinceLastVisibleRender\n              );\n            }\n          } else {\n            renderNotVisible();\n          }\n        } else {\n          renderNotVisible();\n        }\n      },\n      // visibleProp is the only triggerable dependency. Others values will be captured.\n      [visibleProp]\n    );\n\n    // Live announcement\n    useEffect(\n      () => {\n        if (liveConfig?.contextualLabel && isVisibleState) {\n          announcePolite({\n            message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,\n            type: 'status'\n          });\n        }\n      },\n      // isVisibleState is the only triggerable dependency. Others values will be captured.\n      [isVisibleState]\n    );\n\n    // Auto focusing and render timestamping.\n    useEffect(\n      () => {\n        if (!nullRender && isVisibleState) {\n          // After a visible render set a timestamp for timers above.\n          timeAfterVisibleRender.current = Date.now();\n\n          if (focusOnVisible) progressEl.current?.focus();\n        }\n      },\n      // nullRender is the only triggerable dependency. Others values will be captured.\n      [nullRender]\n    );\n\n    if (nullRender) return null;\n\n    const CompVariant = variantMap[variant];\n\n    let indicator = (\n      <CompVariant\n        aria-label={typeof value !== 'number' ? label : t('loading')}\n        {...restProps}\n        placement={placement}\n        value={value}\n        aria-valuetext={typeof value === 'number' ? label : undefined}\n        ref={progressEl}\n        tabIndex={-1}\n      />\n    );\n\n    if (placement !== 'inline') {\n      indicator = (\n        <Flex\n          container={{ direction: 'column', alignItems: 'center', gap: 0.5 }}\n          as={StyledProgress}\n          placement={placement}\n        >\n          {indicator}\n          {message && (\n            <Text as={StyledMessage} variant='secondary' aria-hidden='true'>\n              {message}\n            </Text>\n          )}\n        </Flex>\n      );\n    }\n\n    const content = hasBackdrop ? (\n      <StyledProgressBackdrop\n        open={isVisibleState}\n        container={{ direction: 'column' }}\n        position={placement === 'global' ? 'fixed' : 'absolute'}\n        variant='light'\n        alpha={0.5}\n        onAfterTransitionIn={onTransitionEndIn}\n        onAfterTransitionOut={() => {\n          setNullRender(true);\n          onTransitionEndOut?.();\n        }}\n      >\n        {indicator}\n      </StyledProgressBackdrop>\n    ) : (\n      indicator\n    );\n\n    return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n  }\n);\n\nexport default Progress;\n"]}

package/lib/components/Progress/Progress.styles.d.ts

@@ -0,0 +1,12 @@
+import { ProgressProps } from './Progress.types';
+export declare const StyledProgressBackdrop: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Backdrop").BackdropProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledProgressRing: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<ProgressProps, "placement"> & {
+    determinate: boolean;
+}, never>;
+export declare const StyledProgressBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ProgressProps & {
+    determinate: boolean;
+}, never>;
+export declare const StyledProgressEllipsis: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<ProgressProps, "placement">, never>;
+export declare const StyledMessage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledProgress: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Flex").FlexProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, Pick<ProgressProps, "placement">, never>;
+//# sourceMappingURL=Progress.styles.d.ts.map

package/lib/components/Progress/Progress.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,sBAAsB,yMAAqB,CAAC;AAczD,eAAO,MAAM,kBAAkB;iBACqB,OAAO;SAkDzD,CAAC;AAIH,eAAO,MAAM,iBAAiB;iBACG,OAAO;SAmDtC,CAAC;AAIH,eAAO,MAAM,sBAAsB,uIAsEjC,CAAC;AAIH,eAAO,MAAM,aAAa,0GAexB,CAAC;AAIH,eAAO,MAAM,cAAc,+NAc1B,CAAC"}

package/lib/components/Progress/Progress.styles.js

@@ -0,0 +1,217 @@
+import { rgba, readableColor } from 'polished';
+import styled, { css } from 'styled-components';
+import { calculateFontSize } from '../../styles';
+import { defaultThemeProp } from '../../theme';
+import { tryCatch } from '../../utils';
+import Backdrop from '../Backdrop';
+import Flex from '../Flex';
+export const StyledProgressBackdrop = styled(Backdrop) ``;
+const StyledProgressVisual = styled.div(({ theme }) => {
+    return css `
+    &:focus-visible {
+      box-shadow: ${theme.components.button['focus-shadow']};
+      outline: none;
+      border-radius: calc(9999 * ${theme.base['border-radius']});
+    }
+  `;
+});
+StyledProgressVisual.defaultProps = defaultThemeProp;
+export const StyledProgressRing = styled(StyledProgressVisual)(({ theme, placement, determinate }) => {
+    const size = placement === 'inline' ? '1em' : '2rem';
+    return css `
+    @keyframes LoadingRing {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    position: relative;
+
+    svg {
+      display: block;
+      width: ${size};
+      height: ${size};
+
+      circle {
+        fill: transparent;
+        stroke: ${theme.base.colors.gray['extra-light']};
+        stroke-width: 2;
+        r: 45%;
+        cx: 50%;
+        cy: 50%;
+        transform: rotate(-90deg);
+        transform-origin: 50% 50%;
+
+        &:nth-child(2) {
+          stroke: ${theme.components.progress['progress-color']};
+          transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})
+            ${theme.base.animation.timing.ease};
+
+          ${!determinate &&
+        css `
+            animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;
+          `}
+        }
+      }
+    }
+
+    ${placement === 'inline' &&
+        css `
+      display: inline-flex;
+      vertical-align: top;
+    `}
+  `;
+});
+StyledProgressRing.defaultProps = defaultThemeProp;
+export const StyledProgressBar = styled(StyledProgressVisual)(({ theme, placement, determinate }) => {
+    return css `
+    background-color: ${theme.base.colors.gray['extra-light']};
+    border-radius: ${theme.base['border-radius']};
+    width: calc(100% - ${placement === 'local' ? css `4 * ${theme.base.spacing}` : '0rem'});
+    height: 0.375rem;
+    min-width: 2rem;
+    max-width: min(calc(100vw - 4 * ${theme.base.spacing}), ${theme.base['content-width'].lg});
+    overflow: hidden;
+
+    @keyframes LoadingBar {
+      0% {
+        transform: translateX(-100%);
+      }
+
+      100% {
+        transform: translateX(200%);
+      }
+    }
+
+    ::before {
+      content: '';
+      display: block;
+      height: 100%;
+      width: 100%;
+      left: 0;
+      border-radius: ${theme.base['border-radius']};
+      background-color: ${theme.components.progress['progress-color']};
+      ${determinate &&
+        css `
+        transform: translateX(var(--progress, 0));
+        transform-origin: 0 50%;
+        transition: transform calc(0.5 * ${theme.base.animation.speed})
+          ${theme.base.animation.timing.ease};
+      `}
+
+      ${!determinate &&
+        css `
+        animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;
+        width: 50%;
+      `}
+    }
+
+    ${placement === 'inline' &&
+        css `
+      width: 3rem;
+      display: inline-block;
+      position: relative;
+    `}
+  `;
+});
+StyledProgressBar.defaultProps = defaultThemeProp;
+export const StyledProgressEllipsis = styled(StyledProgressVisual)(({ theme, placement }) => {
+    return css `
+    line-height: 1;
+    display: ${placement === 'inline' ? 'inline-flex' : 'block'};
+
+    @keyframes LoadingEllipsis {
+      0% {
+        transform: scale(0);
+        opacity: 0;
+      }
+
+      50% {
+        transform: scale(1);
+        opacity: 1;
+      }
+
+      100% {
+        transform: scale(0);
+        opacity: 0;
+      }
+    }
+
+    > span {
+      display: flex;
+      justify-content: center;
+      mix-blend-mode: multiply;
+
+      ${placement === 'inline' &&
+        css `
+        display: inline-flex;
+      `}
+    }
+
+    > span span {
+      margin: 0 0.3125rem;
+      background: ${theme.components.progress['progress-color']};
+      border-radius: 50%;
+      animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;
+
+      ${placement === 'global' &&
+        css `
+        width: 1.25rem;
+        height: 1.25rem;
+      `}
+
+      ${(placement === 'local' || placement === 'block') &&
+        css `
+        width: 0.625rem;
+        height: 0.625rem;
+      `}
+
+      ${placement === 'inline' &&
+        css `
+        width: 0.1875rem;
+        height: 0.1875rem;
+        margin: 0 0.1875rem;
+        animation-duration: calc(4 * ${theme.base.animation.speed});
+      `}
+
+      &:nth-child(2) {
+        animation-delay: 0.1667s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: ${0.1667 * 2}s;
+      }
+    }
+  `;
+});
+StyledProgressEllipsis.defaultProps = defaultThemeProp;
+export const StyledMessage = styled.span(({ theme }) => {
+    const color = tryCatch(() => {
+        return rgba(readableColor(theme.base.palette['primary-background']), theme.base.transparency['transparent-3']);
+    });
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    font-size: ${fontSize[theme.components.label['font-size']]};
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+    color: ${color};
+  `;
+});
+StyledMessage.defaultProps = defaultThemeProp;
+export const StyledProgress = styled(Flex)(({ theme, placement }) => {
+    return css `
+      ${placement !== 'inline' &&
+        css `
+        width: 100%;
+      `}
+
+      ${placement === 'block' &&
+        css `
+        margin-block: calc(2 * ${theme.base.spacing});
+      `}
+    `;
+});
+StyledProgress.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Progress.styles.js.map

package/lib/components/Progress/Progress.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.styles.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { rgba, readableColor } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\n\nexport const StyledProgressBackdrop = styled(Backdrop)``;\n\nconst StyledProgressVisual = styled.div(({ theme }) => {\n  return css`\n    &:focus-visible {\n      box-shadow: ${theme.components.button['focus-shadow']};\n      outline: none;\n      border-radius: calc(9999 * ${theme.base['border-radius']});\n    }\n  `;\n});\n\nStyledProgressVisual.defaultProps = defaultThemeProp;\n\nexport const StyledProgressRing = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'> & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  const size = placement === 'inline' ? '1em' : '2rem';\n\n  return css`\n    @keyframes LoadingRing {\n      0% {\n        transform: rotate(0deg);\n      }\n\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n    position: relative;\n\n    svg {\n      display: block;\n      width: ${size};\n      height: ${size};\n\n      circle {\n        fill: transparent;\n        stroke: ${theme.base.colors.gray['extra-light']};\n        stroke-width: 2;\n        r: 45%;\n        cx: 50%;\n        cy: 50%;\n        transform: rotate(-90deg);\n        transform-origin: 50% 50%;\n\n        &:nth-child(2) {\n          stroke: ${theme.components.progress['progress-color']};\n          transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n\n          ${!determinate &&\n          css`\n            animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;\n          `}\n        }\n      }\n    }\n\n    ${placement === 'inline' &&\n    css`\n      display: inline-flex;\n      vertical-align: top;\n    `}\n  `;\n});\n\nStyledProgressRing.defaultProps = defaultThemeProp;\n\nexport const StyledProgressBar = styled(StyledProgressVisual)<\n  ProgressProps & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  return css`\n    background-color: ${theme.base.colors.gray['extra-light']};\n    border-radius: ${theme.base['border-radius']};\n    width: calc(100% - ${placement === 'local' ? css`4 * ${theme.base.spacing}` : '0rem'});\n    height: 0.375rem;\n    min-width: 2rem;\n    max-width: min(calc(100vw - 4 * ${theme.base.spacing}), ${theme.base['content-width'].lg});\n    overflow: hidden;\n\n    @keyframes LoadingBar {\n      0% {\n        transform: translateX(-100%);\n      }\n\n      100% {\n        transform: translateX(200%);\n      }\n    }\n\n    ::before {\n      content: '';\n      display: block;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      border-radius: ${theme.base['border-radius']};\n      background-color: ${theme.components.progress['progress-color']};\n      ${determinate &&\n      css`\n        transform: translateX(var(--progress, 0));\n        transform-origin: 0 50%;\n        transition: transform calc(0.5 * ${theme.base.animation.speed})\n          ${theme.base.animation.timing.ease};\n      `}\n\n      ${!determinate &&\n      css`\n        animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;\n        width: 50%;\n      `}\n    }\n\n    ${placement === 'inline' &&\n    css`\n      width: 3rem;\n      display: inline-block;\n      position: relative;\n    `}\n  `;\n});\n\nStyledProgressBar.defaultProps = defaultThemeProp;\n\nexport const StyledProgressEllipsis = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'>\n>(({ theme, placement }) => {\n  return css`\n    line-height: 1;\n    display: ${placement === 'inline' ? 'inline-flex' : 'block'};\n\n    @keyframes LoadingEllipsis {\n      0% {\n        transform: scale(0);\n        opacity: 0;\n      }\n\n      50% {\n        transform: scale(1);\n        opacity: 1;\n      }\n\n      100% {\n        transform: scale(0);\n        opacity: 0;\n      }\n    }\n\n    > span {\n      display: flex;\n      justify-content: center;\n      mix-blend-mode: multiply;\n\n      ${placement === 'inline' &&\n      css`\n        display: inline-flex;\n      `}\n    }\n\n    > span span {\n      margin: 0 0.3125rem;\n      background: ${theme.components.progress['progress-color']};\n      border-radius: 50%;\n      animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;\n\n      ${placement === 'global' &&\n      css`\n        width: 1.25rem;\n        height: 1.25rem;\n      `}\n\n      ${(placement === 'local' || placement === 'block') &&\n      css`\n        width: 0.625rem;\n        height: 0.625rem;\n      `}\n\n      ${placement === 'inline' &&\n      css`\n        width: 0.1875rem;\n        height: 0.1875rem;\n        margin: 0 0.1875rem;\n        animation-duration: calc(4 * ${theme.base.animation.speed});\n      `}\n\n      &:nth-child(2) {\n        animation-delay: 0.1667s;\n      }\n\n      &:nth-child(3) {\n        animation-delay: ${0.1667 * 2}s;\n      }\n    }\n  `;\n});\n\nStyledProgressEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledMessage = styled.span(({ theme }) => {\n  const color = tryCatch(() => {\n    return rgba(\n      readableColor(theme.base.palette['primary-background']),\n      theme.base.transparency['transparent-3']\n    );\n  });\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    font-size: ${fontSize[theme.components.label['font-size'] as FontSize]};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    color: ${color};\n  `;\n});\n\nStyledMessage.defaultProps = defaultThemeProp;\n\nexport const StyledProgress = styled(Flex)<Pick<ProgressProps, 'placement'>>(\n  ({ theme, placement }) => {\n    return css`\n      ${placement !== 'inline' &&\n      css`\n        width: 100%;\n      `}\n\n      ${placement === 'block' &&\n      css`\n        margin-block: calc(2 * ${theme.base.spacing});\n      `}\n    `;\n  }\n);\n\nStyledProgress.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Progress/Progress.types.d.ts

@@ -25,19 +25,36 @@ export interface ProgressProps extends BaseProps, NoChildrenProp {
      * Determines the placement of the component.
      * @default "global"
      */
-    placement?: 'global' | 'local' | 'inline';
+    placement?: 'global' | 'local' | 'block' | 'inline';
     /**
      * When true, fade in occurs when component mounts.
      * When false, mounted component fades out then re-renders self and returns null, removing itself from the DOM.
      * This is technically not the same as unmounting via parent.
+     * Applicable for all placements but the fade effect is only applicable to 'global' | 'local' placement.
      * @default true
      */
     visible?: boolean;
+    /**
+     * If true, upon visible render the indicator element will take focus.
+     * @default false
+     */
+    focusOnVisible?: boolean;
+    /**
+     * If true, the indicator will not render as visible until 1sec after the visible prop is set to true.
+     * This is a best estimate to avoid visual flicker where progress is resolved within 1sec.
+     * @default false
+     */
+    delay?: boolean;
     /** Called when the css transition ends on the way in. */
     onTransitionEndIn?: BackdropProps['onAfterTransitionIn'];
     /** Called when the css transition ends on the way out...A good time to unmount! */
     onTransitionEndOut?: BackdropProps['onAfterTransitionOut'];
-    /** Ref for the wrapping element. */
+    /** Triggers live announcement on show and value or message change. */
+    liveConfig?: {
+        /** Distinguishes the source of the update on the page. */
+        contextualLabel: string;
+    };
+    /** Ref to the visual indicator element, currently a role of progressbar. */
     ref?: Ref<HTMLDivElement>;
 }
 //# sourceMappingURL=Progress.types.d.ts.map

package/lib/components/Progress/Progress.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.types.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,UAAU,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC1C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACzD,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC3D,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
+{"version":3,"file":"Progress.types.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,UAAU,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACzD,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC3D,sEAAsE;IACtE,UAAU,CAAC,EAAE;QACX,0DAA0D;QAC1D,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,4EAA4E;IAC5E,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/Progress/Progress.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.types.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '../../types';\nimport { BackdropProps } from '../Backdrop/Backdrop';\n\nexport interface ProgressProps extends BaseProps, NoChildrenProp {\n  /**\n   * Determines which variant should be rendered.\n   * @default \"ring\"\n   */\n  variant?: 'ring' | 'bar' | 'ellipsis';\n  /**\n   * Minimum possible value.\n   * @default 0\n   */\n  minValue?: number;\n  /**\n   * Maximum possible value.\n   * @default 100\n   */\n  maxValue?: number;\n  /** Current progress value within the range specified, or the default range of 0-100. */\n  value?: number;\n  /** Provides a message to the user along with the component. */\n  message?: string;\n  /**\n   * Determines the placement of the component.\n   * @default \"global\"\n   */\n  placement?: 'global' | 'local' | 'inline';\n  /**\n   * When true, fade in occurs when component mounts.\n   * When false, mounted component fades out then re-renders self and returns null, removing itself from the DOM.\n   * This is technically not the same as unmounting via parent.\n   * @default true\n   */\n  visible?: boolean;\n  /** Called when the css transition ends on the way in. */\n  onTransitionEndIn?: BackdropProps['onAfterTransitionIn'];\n  /** Called when the css transition ends on the way out...A good time to unmount! */\n  onTransitionEndOut?: BackdropProps['onAfterTransitionOut'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"Progress.types.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '../../types';\nimport { BackdropProps } from '../Backdrop/Backdrop';\n\nexport interface ProgressProps extends BaseProps, NoChildrenProp {\n  /**\n   * Determines which variant should be rendered.\n   * @default \"ring\"\n   */\n  variant?: 'ring' | 'bar' | 'ellipsis';\n  /**\n   * Minimum possible value.\n   * @default 0\n   */\n  minValue?: number;\n  /**\n   * Maximum possible value.\n   * @default 100\n   */\n  maxValue?: number;\n  /** Current progress value within the range specified, or the default range of 0-100. */\n  value?: number;\n  /** Provides a message to the user along with the component. */\n  message?: string;\n  /**\n   * Determines the placement of the component.\n   * @default \"global\"\n   */\n  placement?: 'global' | 'local' | 'block' | 'inline';\n  /**\n   * When true, fade in occurs when component mounts.\n   * When false, mounted component fades out then re-renders self and returns null, removing itself from the DOM.\n   * This is technically not the same as unmounting via parent.\n   * Applicable for all placements but the fade effect is only applicable to 'global' | 'local' placement.\n   * @default true\n   */\n  visible?: boolean;\n  /**\n   * If true, upon visible render the indicator element will take focus.\n   * @default false\n   */\n  focusOnVisible?: boolean;\n  /**\n   * If true, the indicator will not render as visible until 1sec after the visible prop is set to true.\n   * This is a best estimate to avoid visual flicker where progress is resolved within 1sec.\n   * @default false\n   */\n  delay?: boolean;\n  /** Called when the css transition ends on the way in. */\n  onTransitionEndIn?: BackdropProps['onAfterTransitionIn'];\n  /** Called when the css transition ends on the way out...A good time to unmount! */\n  onTransitionEndOut?: BackdropProps['onAfterTransitionOut'];\n  /** Triggers live announcement on show and value or message change. */\n  liveConfig?: {\n    /** Distinguishes the source of the update on the page. */\n    contextualLabel: string;\n  };\n  /** Ref to the visual indicator element, currently a role of progressbar. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/Progress/Ring.d.ts

@@ -1,9 +1,6 @@
 import { FC } from 'react';
 import { ForwardProps } from '../../types';
 import { ProgressProps } from './Progress.types';
-export declare const StyledProgressRing: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<ProgressProps, "placement"> & {
-    determinate: boolean;
-}, never>;
 declare const Ring: FC<ProgressProps & ForwardProps>;
 export default Ring;
 //# sourceMappingURL=Ring.d.ts.map

package/lib/components/Progress/Ring.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Ring.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Ring.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,kBAAkB;iBACqB,OAAO;SAuDzD,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAqC1C,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Ring.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Ring.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAqC1C,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Progress/Ring.js

@@ -1,63 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { defaultThemeProp } from '../../theme';
-export const StyledProgressRing = styled.div(({ theme, placement, determinate }) => {
-    return css `
-    position: relative;
-    min-width: 1em;
-    min-height: 1em;
-
-    @keyframes LoadingRing {
-      0% {
-        transform: rotate(0deg);
-      }
-
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    svg {
-      display: block;
-      position: absolute;
-      height: 100%;
-
-      circle {
-        fill: transparent;
-        stroke: ${theme.base.colors.gray['extra-light']};
-        stroke-width: 2;
-        r: 45%;
-        cx: 50%;
-        cy: 50%;
-        transform: rotate(-90deg);
-        transform-origin: 50% 50%;
-
-        &:nth-child(2) {
-          stroke: ${theme.components.progress['progress-color']};
-          transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})
-            ${theme.base.animation.timing.ease};
-
-          ${!determinate &&
-        css `
-            animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;
-          `}
-        }
-      }
-    }
-
-    ${placement === 'inline'
-        ? css `
-          display: inline-flex;
-          vertical-align: top;
-        `
-        : css `
-          width: 2rem;
-          height: 2rem;
-        `}
-  `;
-});
-StyledProgressRing.defaultProps = defaultThemeProp;
+import { StyledProgressRing } from './Progress.styles';
 const Ring = forwardRef(({ value, minValue = 0, maxValue = 100, placement, ...restProps }, ref) => {
     let strokeDashoffset;
     const circumference = 18 * Math.PI;