@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/lib/components/Progress/Progress.js

@@ -1,65 +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 Backdrop from '../Backdrop';
 import Text from '../Text';
-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';
-import { StyledMessage } from './Progress.styles';
-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 === 'block' || 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'), as: placement === 'inline' ? 'span' : undefined, ...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.8, 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';\n\nimport { ForwardProps } from '../../types';\nimport Backdrop from '../Backdrop';\nimport Text from '../Text';\nimport { useConfiguration } from '../../hooks';\n\nimport { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage } from './Progress.styles';\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 === 'block' || 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        as={placement === 'inline' ? 'span' : undefined}\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.8}\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

@@ -1,5 +1,5 @@
 import { ProgressProps } from './Progress.types';
-export declare const StyledMessage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+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>;
@@ -7,4 +7,6 @@ export declare const StyledProgressBar: import("styled-components").StyledCompon
     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

@@ -1 +1 @@
-{"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,aAAa,0GAgBxB,CAAC;AAIH,eAAO,MAAM,kBAAkB;iBACqB,OAAO;SAuDzD,CAAC;AAIH,eAAO,MAAM,iBAAiB;iBAA6C,OAAO;SAyDjF,CAAC;AAIF,eAAO,MAAM,sBAAsB,uIA4ElC,CAAC"}
+{"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;SAwDtC,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

@@ -3,31 +3,22 @@ import styled, { css } from 'styled-components';
 import { calculateFontSize } from '../../styles';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
-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']);
+import Backdrop from '../Backdrop';
+import Flex from '../Flex';
+export const StyledProgressBackdrop = styled(Backdrop) ``;
+const StyledProgressVisual = styled.div(({ theme }) => {
     return css `
-    margin-top: 0.5rem;
-    font-size: ${fontSize[theme.components.label['font-size']]};
-    font-weight: ${theme.base['font-weight']['semi-bold']};
-    color: ${color};
+    &:focus-visible {
+      box-shadow: ${theme.components.button['focus-shadow']};
+      outline: none;
+      border-radius: calc(9999 * ${theme.base['border-radius']});
+    }
   `;
 });
-StyledMessage.defaultProps = defaultThemeProp;
-export const StyledProgressRing = styled.div(({ theme, placement, determinate }) => {
+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 {
@@ -52,15 +43,19 @@ export const StyledProgressRing = styled.div(({ theme, placement, determinate })
 
           ${!determinate &&
         css `
+            @keyframes LoadingRing {
+              0% {
+                transform: rotate(0deg);
+              }
+
+              100% {
+                transform: rotate(360deg);
+              }
+            }
             animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;
           `}
         }
       }
-
-      ${placement === 'block' &&
-        css `
-        margin: calc(2 * ${theme.base.spacing}) auto;
-      `}
     }
 
     ${placement === 'inline' &&
@@ -71,137 +66,157 @@ export const StyledProgressRing = styled.div(({ theme, placement, determinate })
   `;
 });
 StyledProgressRing.defaultProps = defaultThemeProp;
-export const StyledProgressBar = styled.div(({ theme, placement, determinate }) => {
+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};
+    background-color: ${theme.base.colors.gray['extra-light']};
+    border-radius: ${theme.base['border-radius']};
+    ${placement === 'local'
+        ? css `
+          width: calc(100% - 4 * ${theme.base.spacing});
+        `
+        : css `
+          width: 100%;
         `}
+    height: 0.375rem;
+    min-width: 2rem;
+    max-width: min(calc(100vw - 4 * ${theme.base.spacing}), ${theme.base['content-width'].lg});
+    overflow: hidden;
 
-        ${!determinate &&
+    ::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 `
-          animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;
-          width: 50%;
-        `}
-      }
+        transform: translateX(var(--progress, 0));
+        transform-origin: 0 50%;
+        transition: transform calc(0.5 * ${theme.base.animation.speed})
+          ${theme.base.animation.timing.ease};
+      `}
 
-      ${placement === 'block' &&
+      ${!determinate &&
         css `
-        margin-block: calc(2 * ${theme.base.spacing});
+        @keyframes LoadingBar {
+          0% {
+            transform: translateX(-100%);
+          }
+
+          100% {
+            transform: translateX(200%);
+          }
+        }
+        animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;
+        width: 50%;
       `}
+    }
 
-      ${placement === 'inline' &&
+    ${placement === 'inline' &&
         css `
-        width: 3rem;
-        display: inline-block;
-        position: relative;
-      `}
-    `;
+      width: 3rem;
+      display: inline-block;
+      position: relative;
+    `}
+  `;
 });
 StyledProgressBar.defaultProps = defaultThemeProp;
-export const StyledProgressEllipsis = styled.div(({ theme, placement }) => {
+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;
-        }
+    line-height: 1;
+    display: ${placement === 'inline' ? 'inline-flex' : 'block'};
 
-        50% {
-          transform: scale(1);
-          opacity: 1;
-        }
+    @keyframes LoadingEllipsis {
+      0% {
+        transform: scale(0);
+        opacity: 0;
+      }
 
-        100% {
-          transform: scale(0);
-          opacity: 0;
-        }
+      50% {
+        transform: scale(1);
+        opacity: 1;
       }
 
-      ${placement === 'block' &&
-        css `
-        margin-block: calc(2 * ${theme.base.spacing});
-      `}
+      100% {
+        transform: scale(0);
+        opacity: 0;
+      }
+    }
 
-      > span {
-        display: flex;
-        justify-content: center;
-        mix-blend-mode: multiply;
+    > span {
+      display: flex;
+      justify-content: center;
+      mix-blend-mode: multiply;
 
-        ${placement === 'inline' &&
+      ${placement === 'inline' &&
         css `
-          display: inline-flex;
-          margin-left: 0.1875rem;
-        `}
-      }
+        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;
+    > 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' &&
+      ${placement === 'global' &&
         css `
-          width: 1.25rem;
-          height: 1.25rem;
-        `}
+        width: 1.25rem;
+        height: 1.25rem;
+      `}
 
-        ${(placement === 'local' || placement === 'block') &&
+      ${(placement === 'local' || placement === 'block') &&
         css `
-          width: 0.625rem;
-          height: 0.625rem;
-        `}
+        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});
-        `}
+        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;
-        }
+        animation-delay: 0.1667s;
+      }
 
-        &:nth-child(3) {
-          animation-delay: ${0.1667 * 2}s;
-        }
+      &: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

@@ -1 +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';\n\nimport { ProgressProps } from './Progress.types';\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    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\nStyledMessage.defaultProps = defaultThemeProp;\n\nexport const StyledProgressRing = styled.div<\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      ${placement === 'block' &&\n      css`\n        margin: calc(2 * ${theme.base.spacing}) auto;\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.div<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 === 'block' &&\n      css`\n        margin-block: calc(2 * ${theme.base.spacing});\n      `}\n\n      ${placement === 'inline' &&\n      css`\n        width: 3rem;\n        display: inline-block;\n        position: relative;\n      `}\n    `;\n  }\n);\n\nStyledProgressBar.defaultProps = defaultThemeProp;\n\nexport const StyledProgressEllipsis = styled.div<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      ${placement === 'block' &&\n      css`\n        margin-block: calc(2 * ${theme.base.spacing});\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          margin-left: 0.1875rem;\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);\n\nStyledProgressEllipsis.defaultProps = defaultThemeProp;\n"]}
+{"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    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            @keyframes LoadingRing {\n              0% {\n                transform: rotate(0deg);\n              }\n\n              100% {\n                transform: rotate(360deg);\n              }\n            }\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    ${placement === 'local'\n      ? css`\n          width: calc(100% - 4 * ${theme.base.spacing});\n        `\n      : css`\n          width: 100%;\n        `}\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    ::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        @keyframes LoadingBar {\n          0% {\n            transform: translateX(-100%);\n          }\n\n          100% {\n            transform: translateX(200%);\n          }\n        }\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"]}