@dnb/eufemia 10.28.0 → 10.30.0

package/components/icon/style/dnb-icon.min.css

@@ -1 +1 @@
-.dnb-icon{color:inherit;display:inline-block;font-size:1rem;height:1em;line-height:1rem;vertical-align:middle;width:1em}.dnb-icon img,.dnb-icon svg,:where(.dnb-core-style) .dnb-icon img,:where(.dnb-core-style) .dnb-icon svg{shape-rendering:geometricprecision;height:inherit;vertical-align:top;width:inherit}.dnb-icon svg[width="100%"]{width:inherit}.dnb-icon svg[height="100%"]{height:inherit}.dnb-icon--inherit-color svg [fill],.dnb-icon--inherit-color svg:not([fill]){fill:currentcolor}.dnb-icon--inherit-color svg [stroke]{stroke:currentcolor}.dnb-icon--small{font-size:.75rem}.dnb-icon--default{font-size:1rem}.dnb-icon--medium{font-size:1.5rem}.dnb-icon--large{font-size:2rem}.dnb-icon--x-large{font-size:2.5rem}.dnb-icon--xx-large{font-size:3rem}.dnb-icon--custom-size{height:auto;width:auto}.dnb-icon--auto{font-size:1em}.dnb-icon--auto>.dnb-icon--wrapper{align-items:center;display:inline-flex;justify-content:center}h1>.dnb-icon,h2>.dnb-icon,h3>.dnb-icon,h4>.dnb-icon,h5>.dnb-icon,h6>.dnb-icon{vertical-align:middle}p>.dnb-icon{vertical-align:inherit}.dnb-icon.dnb-skeleton{color:var(--skeleton-color)!important}.dnb-icon.dnb-skeleton:after,.dnb-icon.dnb-skeleton:before{content:none!important}
+.dnb-icon{color:inherit;display:inline-block;font-size:1rem;height:1em;line-height:1rem;vertical-align:middle;width:1em}.dnb-icon img,.dnb-icon svg,:where(.dnb-core-style) .dnb-icon img,:where(.dnb-core-style) .dnb-icon svg{shape-rendering:geometricprecision;height:inherit;vertical-align:top;width:inherit}.dnb-icon svg[width="100%"]{width:inherit}.dnb-icon svg[height="100%"]{height:inherit}.dnb-icon--inherit-color svg [fill],.dnb-icon--inherit-color svg:not([fill]){fill:currentcolor}.dnb-icon--inherit-color svg [stroke]{stroke:currentcolor}.dnb-icon--small{font-size:.75rem}.dnb-icon--default{font-size:1rem}.dnb-icon--medium{font-size:1.5rem}.dnb-icon--large{font-size:2rem}.dnb-icon--x-large{font-size:2.5rem}.dnb-icon--xx-large{font-size:3rem}.dnb-icon--custom-size{height:auto;line-height:0;width:auto}.dnb-icon--auto{font-size:1em}.dnb-icon--auto>.dnb-icon--wrapper{align-items:center;display:inline-flex;justify-content:center}h1>.dnb-icon,h2>.dnb-icon,h3>.dnb-icon,h4>.dnb-icon,h5>.dnb-icon,h6>.dnb-icon{vertical-align:middle}p>.dnb-icon{vertical-align:inherit}.dnb-icon.dnb-skeleton{color:var(--skeleton-color)!important}.dnb-icon.dnb-skeleton:after,.dnb-icon.dnb-skeleton:before{content:none!important}

package/components/icon/style/dnb-icon.scss

@@ -79,6 +79,7 @@
   &--custom-size {
     width: auto; // only to feed the svg
     height: auto; // only to feed the svg
+    line-height: 0; // minimize line height when icon doesn't scale with font size
   }
 
   &--auto {

package/components/progress-indicator/ProgressIndicator.d.ts

@@ -2,67 +2,17 @@
  * Web ProgressIndicator Component
  *
  */
-import React from 'react';
-import { SpacingProps } from '../space/types';
-export type ProgressIndicatorProps = {
-    /**
-     * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.
-     */
-    visible?: boolean;
-    /**
-     * Defines the type. Defaults to `circular`.
-     */
-    type?: 'circular' | 'linear';
-    /**
-     * Disables the fade-in and fade-out animation. Defaults to `false`.
-     */
-    noAnimation?: boolean;
-    /**
-     * Defines the size. Defaults to `default`.
-     */
-    size?: 'default' | 'small' | 'medium' | 'large' | 'huge';
-    /**
-     * A number between 0-100, if not supplied a continous loading-type animation will be used. Defaults to `undefined`
-     */
-    progress?: string | number;
-    /**
-     * Show a custom label to the right or under the indicator.
-     */
-    label?: React.ReactNode;
-    /**
-     * Sets the position of the label. Defaults to `horizontal`.
-     */
-    labelDirection?: 'horizontal' | 'vertical';
-    /**
-     * If set to `true` a default label (from text locales) will be shown.
-     */
-    showDefaultLabel?: boolean;
-    /**
-     * Use this to override the default label from text locales.
-     */
-    indicator_label?: string;
-    /**
-     * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.
-     */
-    title?: string;
-    /**
-     * Will be called once it's no longer `visible`.
-     */
-    onComplete?: (...args: any[]) => any;
-};
-type DeprecatedProgressIndicatorProps = {
+import { ProgressIndicatorAllProps } from './types';
+export type DeprecatedProgressIndicatorProps = {
     /** @deprecated use `noAnimation`. */
     no_animation?: boolean;
     /** @deprecated use `labelDirection`. */
     label_direction?: string;
     /** @deprecated use `showDefaultLabel`. */
     show_label?: boolean;
-    /** @deprecated use the `label` prop instead. */
-    children?: React.ReactNode;
     /**  @deprecated use `onComplete`. */
     on_complete?: (...args: any[]) => any;
 };
-export type ProgressIndicatorAllProps = Omit<React.HTMLProps<HTMLSpanElement>, 'ref' | 'label' | 'size'> & SpacingProps & ProgressIndicatorProps;
 declare function ProgressIndicator(props: ProgressIndicatorAllProps & DeprecatedProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressIndicator {
     var _supportsSpacingProps: boolean;

package/components/progress-indicator/ProgressIndicator.js

@@ -3,8 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["type", "size", "noAnimation", "onComplete", "label", "indicator_label", "labelDirection", "showDefaultLabel", "className", "title", "progress", "visible"],
-  _excluded2 = ["show_label", "indicator_label", "children"];
+const _excluded = ["type", "size", "noAnimation", "onComplete", "label", "children", "indicator_label", "labelDirection", "showDefaultLabel", "className", "title", "progress", "visible", "customColors", "customCircleWidth", "style"],
+  _excluded2 = ["show_label", "indicator_label"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
@@ -16,6 +16,7 @@ import { createSpacingClasses } from '../space/SpacingHelper';
 import ProgressIndicatorCircular from './ProgressIndicatorCircular';
 import ProgressIndicatorLinear from './ProgressIndicatorLinear';
 import { format } from '../number-format/NumberUtils';
+import { isValidSize } from './types';
 function ProgressIndicator(props) {
   const undeprecatedProps = handleDeprecatedBehaviour(props);
   const allProps = updatePropsWithContext(undeprecatedProps, useContext(Context));
@@ -25,21 +26,26 @@ function ProgressIndicator(props) {
       noAnimation = false,
       onComplete,
       label,
+      children,
       indicator_label,
       labelDirection = 'horizontal',
       showDefaultLabel = false,
       className,
       title,
       progress,
-      visible = true
+      visible = true,
+      customColors,
+      customCircleWidth,
+      style
     } = allProps,
     rest = _objectWithoutProperties(allProps, _excluded);
   const remainingDOMProps = validateDOMAttributes(allProps, _objectSpread({}, rest));
+  const [sizeVariant, customSize] = isValidSize(size) ? [size, undefined] : ['custom-size', size];
   const completeTimeout = useRef();
   const fadeOutTimeout = useRef();
   const [complete, setCompleteState] = useState(false);
   const progressNumber = typeof progress === 'string' ? parseFloat(progress) : typeof progress === 'number' ? progress : undefined;
-  const indicatorLabel = label || isTrue(showDefaultLabel) && indicator_label;
+  const indicatorLabel = label || children || isTrue(showDefaultLabel) && indicator_label;
   const progressTitle = title || formatProgress(progressNumber);
   useEffect(() => {
     return () => {
@@ -65,21 +71,30 @@ function ProgressIndicator(props) {
     }, 200);
   }, [onComplete]);
   return React.createElement("span", _extends({
-    className: classnames('dnb-progress-indicator', createSpacingClasses(allProps), className, visible && 'dnb-progress-indicator--visible', complete && 'dnb-progress-indicator--complete', labelDirection && `dnb-progress-indicator--${labelDirection}`, size && `dnb-progress-indicator--${size}`, isTrue(noAnimation) && 'dnb-progress-indicator--no-animation', type === 'linear' && 'dnb-progress-indicator--full-width')
-  }, remainingDOMProps), type === 'circular' && React.createElement(ProgressIndicatorCircular, {
-    size: size,
+    className: classnames('dnb-progress-indicator', createSpacingClasses(allProps), className, visible && 'dnb-progress-indicator--visible', complete && 'dnb-progress-indicator--complete', labelDirection && `dnb-progress-indicator--${labelDirection}`, sizeVariant && `dnb-progress-indicator--${sizeVariant}`, isTrue(noAnimation) && 'dnb-progress-indicator--no-animation', type === 'linear' && 'dnb-progress-indicator--full-width'),
+    style: _objectSpread(_objectSpread({}, style), {
+      '--progress-indicator-circular-size': customSize,
+      '--progress-indicator-circular-stroke-width': customCircleWidth,
+      '--progress-indicator-linear-size': customSize
+    })
+  }, remainingDOMProps), (type === 'circular' || type === 'countdown') && React.createElement(ProgressIndicatorCircular, {
+    size: sizeVariant,
     progress: progressNumber,
     visible: visible,
     onComplete: onComplete,
     callOnCompleteHandler: callOnCompleteHandler,
-    title: progressTitle === null || progressTitle === void 0 ? void 0 : progressTitle.toString()
+    title: progressTitle === null || progressTitle === void 0 ? void 0 : progressTitle.toString(),
+    customColors: customColors,
+    customCircleWidth: customCircleWidth,
+    counterClockwise: type === 'countdown'
   }), type === 'linear' && React.createElement(ProgressIndicatorLinear, {
-    size: size,
+    size: sizeVariant,
     progress: progressNumber,
     visible: visible,
     onComplete: onComplete,
     callOnCompleteHandler: callOnCompleteHandler,
-    title: progressTitle === null || progressTitle === void 0 ? void 0 : progressTitle.toString()
+    title: progressTitle === null || progressTitle === void 0 ? void 0 : progressTitle.toString(),
+    customColors: customColors
   }), indicatorLabel && React.createElement("span", {
     className: "dnb-progress-indicator__label dnb-p"
   }, indicatorLabel));
@@ -92,14 +107,12 @@ function updatePropsWithContext(props, context) {
 function handleDeprecatedBehaviour(oldProps) {
   const {
       show_label: showDefaultLabel,
-      indicator_label,
-      children: label
+      indicator_label
     } = oldProps,
     propsToConvertToCamelCase = _objectWithoutProperties(oldProps, _excluded2);
   return _objectSpread({
     showDefaultLabel,
-    indicator_label,
-    label
+    indicator_label
   }, convertSnakeCaseProps(propsToConvertToCamelCase, {
     overrideExistingValue: false
   }));

package/components/progress-indicator/ProgressIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicator.js","names":["React","useCallback","useContext","useEffect","useRef","useState","classnames","Context","isTrue","validateDOMAttributes","dispatchCustomElementEvent","extendPropsWithContext","convertSnakeCaseProps","createSpacingClasses","ProgressIndicatorCircular","ProgressIndicatorLinear","format","ProgressIndicator","props","undeprecatedProps","handleDeprecatedBehaviour","allProps","updatePropsWithContext","type","size","noAnimation","onComplete","label","indicator_label","labelDirection","showDefaultLabel","className","title","progress","visible","rest","_objectWithoutProperties","_excluded","remainingDOMProps","_objectSpread","completeTimeout","fadeOutTimeout","complete","setCompleteState","progressNumber","parseFloat","undefined","indicatorLabel","progressTitle","formatProgress","clearTimeout","current","callOnCompleteHandler","setTimeout","createElement","_extends","toString","context","localePropsFromContext","getTranslation","componentPropsFromContext","oldProps","show_label","children","propsToConvertToCamelCase","_excluded2","overrideExistingValue","decimals","percent","_supportsSpacingProps"],"sources":["../../../../src/components/progress-indicator/ProgressIndicator.tsx"],"sourcesContent":["/**\n * Web ProgressIndicator Component\n *\n */\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport classnames from 'classnames'\nimport Context, { ContextProps } from '../../shared/Context'\nimport {\n  isTrue,\n  validateDOMAttributes,\n  dispatchCustomElementEvent,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { SpacingProps } from '../space/types'\nimport ProgressIndicatorCircular from './ProgressIndicatorCircular'\nimport ProgressIndicatorLinear from './ProgressIndicatorLinear'\nimport { format } from '../number-format/NumberUtils'\n\nexport type ProgressIndicatorProps = {\n  /**\n   * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.\n   */\n  visible?: boolean\n  /**\n   * Defines the type. Defaults to `circular`.\n   */\n  type?: 'circular' | 'linear'\n  /**\n   * Disables the fade-in and fade-out animation. Defaults to `false`.\n   */\n  noAnimation?: boolean\n  /**\n   * Defines the size. Defaults to `default`.\n   */\n  size?: 'default' | 'small' | 'medium' | 'large' | 'huge'\n  /**\n   * A number between 0-100, if not supplied a continous loading-type animation will be used. Defaults to `undefined`\n   */\n  progress?: string | number\n  /**\n   * Show a custom label to the right or under the indicator.\n   */\n  label?: React.ReactNode\n  /**\n   * Sets the position of the label. Defaults to `horizontal`.\n   */\n  labelDirection?: 'horizontal' | 'vertical'\n  /**\n   * If set to `true` a default label (from text locales) will be shown.\n   */\n  showDefaultLabel?: boolean\n  /**\n   * Use this to override the default label from text locales.\n   */\n  indicator_label?: string\n  /**\n   * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.\n   */\n  title?: string\n  /**\n   * Will be called once it&#39;s no longer `visible`.\n   */\n  onComplete?: (...args: any[]) => any\n}\n\n// deprecated, can be removed in v11\ntype DeprecatedProgressIndicatorProps = {\n  /** @deprecated use `noAnimation`. */\n  no_animation?: boolean\n  /** @deprecated use `labelDirection`. */\n  label_direction?: string\n  /** @deprecated use `showDefaultLabel`. */\n  show_label?: boolean\n  /** @deprecated use the `label` prop instead. */\n  children?: React.ReactNode\n  /**  @deprecated use `onComplete`. */\n  on_complete?: (...args: any[]) => any\n}\n\nexport type ProgressIndicatorAllProps = Omit<\n  React.HTMLProps<HTMLSpanElement>,\n  'ref' | 'label' | 'size'\n> &\n  SpacingProps &\n  ProgressIndicatorProps\n\nfunction ProgressIndicator(\n  props: ProgressIndicatorAllProps & DeprecatedProgressIndicatorProps\n) {\n  const undeprecatedProps = handleDeprecatedBehaviour(props)\n  const allProps = updatePropsWithContext(\n    undeprecatedProps,\n    useContext(Context)\n  )\n\n  const {\n    type = 'circular',\n    size = 'default',\n    noAnimation = false,\n    onComplete,\n    label,\n    indicator_label,\n    labelDirection = 'horizontal',\n    showDefaultLabel = false,\n    className,\n    title,\n    progress,\n    visible = true,\n    ...rest\n  } = allProps\n\n  const remainingDOMProps = validateDOMAttributes(allProps, { ...rest })\n\n  const completeTimeout = useRef<NodeJS.Timeout>()\n  const fadeOutTimeout = useRef<NodeJS.Timeout>()\n  const [complete, setCompleteState] = useState(false)\n\n  const progressNumber =\n    typeof progress === 'string'\n      ? parseFloat(progress)\n      : typeof progress === 'number'\n      ? progress\n      : undefined\n\n  const indicatorLabel =\n    label || (isTrue(showDefaultLabel) && indicator_label)\n  const progressTitle = title || formatProgress(progressNumber)\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(completeTimeout.current)\n      clearTimeout(fadeOutTimeout.current)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (visible) {\n      setCompleteState(false)\n    }\n  }, [visible])\n\n  const callOnCompleteHandler = useCallback(() => {\n    completeTimeout.current = setTimeout(() => {\n      setCompleteState(true)\n      if (onComplete) {\n        fadeOutTimeout.current = setTimeout(() => {\n          dispatchCustomElementEvent({ onComplete }, 'onComplete')\n        }, 600) // wait for CSS fade out, defined in \"progress-indicator-fade-out\"\n      }\n    }, 200)\n  }, [onComplete])\n\n  return (\n    <span\n      className={classnames(\n        'dnb-progress-indicator',\n        visible && 'dnb-progress-indicator--visible',\n        complete && 'dnb-progress-indicator--complete',\n        type === 'linear' && 'dnb-progress-indicator--full-width',\n        labelDirection && `dnb-progress-indicator--${labelDirection}`,\n        size && `dnb-progress-indicator--${size}`,\n        isTrue(noAnimation) && 'dnb-progress-indicator--no-animation',\n        createSpacingClasses(allProps),\n        className\n      )}\n      {...remainingDOMProps}\n    >\n      {type === 'circular' && (\n        <ProgressIndicatorCircular\n          size={size}\n          progress={progressNumber}\n          visible={visible}\n          onComplete={onComplete}\n          callOnCompleteHandler={callOnCompleteHandler}\n          title={progressTitle?.toString()}\n        />\n      )}\n      {type === 'linear' && (\n        <ProgressIndicatorLinear\n          size={size}\n          progress={progressNumber}\n          visible={visible}\n          onComplete={onComplete}\n          callOnCompleteHandler={callOnCompleteHandler}\n          title={progressTitle?.toString()}\n        />\n      )}\n      {indicatorLabel && (\n        <span className=\"dnb-progress-indicator__label dnb-p\">\n          {indicatorLabel}\n        </span>\n      )}\n    </span>\n  )\n}\n\nfunction updatePropsWithContext(\n  props: ProgressIndicatorAllProps,\n  context: ContextProps\n) {\n  const localePropsFromContext =\n    context?.getTranslation(props).ProgressIndicator\n  const componentPropsFromContext = context?.ProgressIndicator\n  return extendPropsWithContext(\n    props,\n    {},\n    localePropsFromContext,\n    componentPropsFromContext\n  )\n}\n\n/**\n * Support deprecated behaviour by mutating the props.\n */\nfunction handleDeprecatedBehaviour(\n  oldProps: ProgressIndicatorAllProps & DeprecatedProgressIndicatorProps\n): ProgressIndicatorAllProps {\n  // Rename deprecated props\n  // And indicator_label should still be snake case\n  const {\n    show_label: showDefaultLabel,\n    indicator_label,\n    children: label,\n    ...propsToConvertToCamelCase\n  } = oldProps\n\n  // Merge deprecated props with new names (will not overwrite)\n  return {\n    showDefaultLabel,\n    indicator_label,\n    label,\n    ...convertSnakeCaseProps(propsToConvertToCamelCase, {\n      overrideExistingValue: false,\n    }),\n  }\n}\n\nfunction formatProgress(progress) {\n  if (parseFloat(progress) > -1) {\n    return format(progress, {\n      decimals: 2,\n      percent: true,\n    })\n  }\n  return null\n}\n\nexport default ProgressIndicator\n\nProgressIndicator._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"ProgressIndicator.js","names":["React","useCallback","useContext","useEffect","useRef","useState","classnames","Context","isTrue","validateDOMAttributes","dispatchCustomElementEvent","extendPropsWithContext","convertSnakeCaseProps","createSpacingClasses","ProgressIndicatorCircular","ProgressIndicatorLinear","format","isValidSize","ProgressIndicator","props","undeprecatedProps","handleDeprecatedBehaviour","allProps","updatePropsWithContext","type","size","noAnimation","onComplete","label","children","indicator_label","labelDirection","showDefaultLabel","className","title","progress","visible","customColors","customCircleWidth","style","rest","_objectWithoutProperties","_excluded","remainingDOMProps","_objectSpread","sizeVariant","customSize","undefined","completeTimeout","fadeOutTimeout","complete","setCompleteState","progressNumber","parseFloat","indicatorLabel","progressTitle","formatProgress","clearTimeout","current","callOnCompleteHandler","setTimeout","createElement","_extends","toString","counterClockwise","context","localePropsFromContext","getTranslation","componentPropsFromContext","oldProps","show_label","propsToConvertToCamelCase","_excluded2","overrideExistingValue","decimals","percent","_supportsSpacingProps"],"sources":["../../../../src/components/progress-indicator/ProgressIndicator.tsx"],"sourcesContent":["/**\n * Web ProgressIndicator Component\n *\n */\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport classnames from 'classnames'\nimport Context, { ContextProps } from '../../shared/Context'\nimport {\n  isTrue,\n  validateDOMAttributes,\n  dispatchCustomElementEvent,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport ProgressIndicatorCircular from './ProgressIndicatorCircular'\nimport ProgressIndicatorLinear from './ProgressIndicatorLinear'\nimport { format } from '../number-format/NumberUtils'\n\nimport {\n  ProgressIndicatorAllProps,\n  ProgressIndicatorAnimationProps,\n  isValidSize,\n  CustomSize,\n} from './types'\n\n// deprecated, can be removed in v11\nexport type DeprecatedProgressIndicatorProps = {\n  /** @deprecated use `noAnimation`. */\n  no_animation?: boolean\n  /** @deprecated use `labelDirection`. */\n  label_direction?: string\n  /** @deprecated use `showDefaultLabel`. */\n  show_label?: boolean\n  /**  @deprecated use `onComplete`. */\n  on_complete?: (...args: any[]) => any\n}\n\nfunction ProgressIndicator(\n  props: ProgressIndicatorAllProps & DeprecatedProgressIndicatorProps\n) {\n  const undeprecatedProps = handleDeprecatedBehaviour(props)\n  const allProps = updatePropsWithContext(\n    undeprecatedProps,\n    useContext(Context)\n  )\n\n  const {\n    type = 'circular',\n    size = 'default',\n    noAnimation = false,\n    onComplete,\n    label,\n    children,\n    indicator_label,\n    labelDirection = 'horizontal',\n    showDefaultLabel = false,\n    className,\n    title,\n    progress,\n    visible = true,\n    customColors,\n    customCircleWidth,\n    style,\n    ...rest\n  } = allProps\n\n  const remainingDOMProps = validateDOMAttributes(allProps, { ...rest })\n\n  const [sizeVariant, customSize]: [\n    ProgressIndicatorAnimationProps['size'],\n    CustomSize,\n  ] = isValidSize(size) ? [size, undefined] : ['custom-size', size]\n\n  const completeTimeout = useRef<NodeJS.Timeout>()\n  const fadeOutTimeout = useRef<NodeJS.Timeout>()\n  const [complete, setCompleteState] = useState(false)\n\n  const progressNumber =\n    typeof progress === 'string'\n      ? parseFloat(progress)\n      : typeof progress === 'number'\n      ? progress\n      : undefined\n\n  const indicatorLabel =\n    label || children || (isTrue(showDefaultLabel) && indicator_label)\n  const progressTitle = title || formatProgress(progressNumber)\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(completeTimeout.current)\n      clearTimeout(fadeOutTimeout.current)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (visible) {\n      setCompleteState(false)\n    }\n  }, [visible])\n\n  const callOnCompleteHandler = useCallback(() => {\n    completeTimeout.current = setTimeout(() => {\n      setCompleteState(true)\n      if (onComplete) {\n        fadeOutTimeout.current = setTimeout(() => {\n          dispatchCustomElementEvent({ onComplete }, 'onComplete')\n        }, 600) // wait for CSS fade out, defined in \"progress-indicator-fade-out\"\n      }\n    }, 200)\n  }, [onComplete])\n\n  return (\n    <span\n      className={classnames(\n        'dnb-progress-indicator',\n        visible && 'dnb-progress-indicator--visible',\n        complete && 'dnb-progress-indicator--complete',\n        type === 'linear' && 'dnb-progress-indicator--full-width',\n        labelDirection && `dnb-progress-indicator--${labelDirection}`,\n        sizeVariant && `dnb-progress-indicator--${sizeVariant}`,\n        isTrue(noAnimation) && 'dnb-progress-indicator--no-animation',\n        createSpacingClasses(allProps),\n        className\n      )}\n      style={{\n        ...style,\n        ...{\n          '--progress-indicator-circular-size': customSize,\n          '--progress-indicator-circular-stroke-width': customCircleWidth,\n          '--progress-indicator-linear-size': customSize,\n        },\n      }}\n      {...remainingDOMProps}\n    >\n      {(type === 'circular' || type === 'countdown') && (\n        <ProgressIndicatorCircular\n          size={sizeVariant}\n          progress={progressNumber}\n          visible={visible}\n          onComplete={onComplete}\n          callOnCompleteHandler={callOnCompleteHandler}\n          title={progressTitle?.toString()}\n          customColors={customColors}\n          customCircleWidth={customCircleWidth}\n          counterClockwise={type === 'countdown'}\n        />\n      )}\n      {type === 'linear' && (\n        <ProgressIndicatorLinear\n          size={sizeVariant}\n          progress={progressNumber}\n          visible={visible}\n          onComplete={onComplete}\n          callOnCompleteHandler={callOnCompleteHandler}\n          title={progressTitle?.toString()}\n          customColors={customColors}\n        />\n      )}\n      {indicatorLabel && (\n        <span className=\"dnb-progress-indicator__label dnb-p\">\n          {indicatorLabel}\n        </span>\n      )}\n    </span>\n  )\n}\n\nfunction updatePropsWithContext(\n  props: ProgressIndicatorAllProps,\n  context: ContextProps\n) {\n  const localePropsFromContext =\n    context?.getTranslation(props).ProgressIndicator\n  const componentPropsFromContext = context?.ProgressIndicator\n  return extendPropsWithContext(\n    props,\n    {},\n    localePropsFromContext,\n    componentPropsFromContext\n  )\n}\n\n/**\n * Support deprecated behaviour by mutating the props.\n */\nfunction handleDeprecatedBehaviour(\n  oldProps: ProgressIndicatorAllProps & DeprecatedProgressIndicatorProps\n): ProgressIndicatorAllProps {\n  // Rename deprecated props\n  // And indicator_label should still be snake case\n  const {\n    show_label: showDefaultLabel,\n    indicator_label,\n    ...propsToConvertToCamelCase\n  } = oldProps\n\n  // Merge deprecated props with new names (will not overwrite)\n  return {\n    showDefaultLabel,\n    indicator_label,\n    ...convertSnakeCaseProps(propsToConvertToCamelCase, {\n      overrideExistingValue: false,\n    }),\n  }\n}\n\nfunction formatProgress(progress) {\n  if (parseFloat(progress) > -1) {\n    return format(progress, {\n      decimals: 2,\n      percent: true,\n    })\n  }\n  return null\n}\n\nexport default ProgressIndicator\n\nProgressIndicator._supportsSpacingProps = true\n"],"mappings":"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"}

package/components/progress-indicator/ProgressIndicatorCircular.d.ts

@@ -2,27 +2,6 @@
  * Web ProgressIndicator Component
  *
  */
-import React from 'react';
-type ProgressIndicatorCircularProps = {
-    /**
-     * Defines the size, like `small`, `default`, `medium` or `large`. Defaults to `default`.
-     */
-    size?: 'default' | 'small' | 'medium' | 'large' | 'huge';
-    /**
-     * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.
-     */
-    visible?: boolean;
-    /**
-     * To visualize a static "percentage" (0-100) as a progress state. Defaults to `null`.
-     */
-    progress?: number;
-    maxOffset?: number;
-    onComplete?: (...args: any[]) => any;
-    callOnCompleteHandler?: (...args: any[]) => any;
-    /**
-     * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.
-     */
-    title?: string;
-};
-declare function ProgressIndicatorCircular(props: ProgressIndicatorCircularProps & Omit<React.HTMLProps<HTMLElement>, 'size'>): import("react/jsx-runtime").JSX.Element;
+import { ProgressIndicatorCircularAllProps } from './types';
+declare function ProgressIndicatorCircular(props: ProgressIndicatorCircularAllProps): import("react/jsx-runtime").JSX.Element;
 export default ProgressIndicatorCircular;

package/components/progress-indicator/ProgressIndicatorCircular.js

@@ -3,8 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _Circle, _circle;
-const _excluded = ["size", "visible", "progress", "maxOffset", "onComplete", "callOnCompleteHandler", "title"];
+const _excluded = ["size", "visible", "progress", "onComplete", "callOnCompleteHandler", "title", "customColors", "customCircleWidth", "counterClockwise"],
+  _excluded2 = ["customColor", "customWidth", "className"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useEffect, useRef, forwardRef } from 'react';
@@ -16,10 +16,12 @@ function ProgressIndicatorCircular(props) {
       size,
       visible,
       progress,
-      maxOffset = 88,
       onComplete,
       callOnCompleteHandler,
-      title
+      title,
+      customColors,
+      customCircleWidth,
+      counterClockwise = false
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
   const keepAnimatingRef = useRef(true);
@@ -53,7 +55,7 @@ function ProgressIndicatorCircular(props) {
     let animateOnStart = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     let callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     const min = 1;
-    const max = 88;
+    const max = Math.PI * 100;
     let start = 0,
       ms = 0,
       prog = max,
@@ -67,13 +69,13 @@ function ProgressIndicatorCircular(props) {
       }
       ms = timestamp - start;
       if (animate1) {
-        if (!visibleRef.current && prog < 5) {
+        if (!visibleRef.current && prog < 20) {
           prog = min;
         }
         if (setProg) {
-          element.style['stroke-dashoffset'] = prog;
+          element.style['stroke-dashoffset'] = `${prog}%`;
         } else if (!animateOnStart) {
-          element.style['stroke-dashoffset'] = max;
+          element.style['stroke-dashoffset'] = `${max}%`;
         }
       }
       if (stopNextRound) {
@@ -101,9 +103,8 @@ function ProgressIndicatorCircular(props) {
       window.requestAnimationFrame(step);
     }
   };
-  const strokeDashoffset = maxOffset - maxOffset / 100 * progress;
-  const hasProgressValue = progress > -1;
-  if (hasProgressValue) {
+  const progressIsControlled = progress > -1;
+  if (progressIsControlled) {
     rest.role = 'progressbar';
     rest['aria-label'] = title;
     rest['title'] = title;
@@ -113,33 +114,68 @@ function ProgressIndicatorCircular(props) {
   }
   const remainingDOMAttributes = validateDOMAttributes(props, _objectSpread({}, rest));
   return React.createElement("span", _extends({
-    className: classnames('dnb-progress-indicator__circular', size && `dnb-progress-indicator__circular--${size}`, hasProgressValue && 'dnb-progress-indicator__circular--has-progress-value')
-  }, remainingDOMAttributes), _Circle || (_Circle = React.createElement(Circle, {
-    className: "dnb-progress-indicator__circular__line light paused"
+    className: classnames('dnb-progress-indicator__circular', size && `dnb-progress-indicator__circular--${size}`, progressIsControlled && 'dnb-progress-indicator__circular--has-progress-value')
+  }, remainingDOMAttributes), React.createElement("span", {
+    className: "dnb-progress-indicator__circular__background-padding"
+  }, React.createElement("span", {
+    className: "dnb-progress-indicator__circular__background",
+    style: {
+      backgroundColor: customColors === null || customColors === void 0 ? void 0 : customColors.background
+    }
   })), React.createElement(Circle, {
-    className: "dnb-progress-indicator__circular__line dark dark" + (hasProgressValue || useAnimationFrame ? " paused" : ""),
-    style: hasProgressValue ? {
-      strokeDashoffset
+    className: "light paused",
+    customColor: customColors === null || customColors === void 0 ? void 0 : customColors.shaft,
+    customWidth: customCircleWidth
+  }), React.createElement(Circle, {
+    className: "dark dark" + (progressIsControlled || useAnimationFrame ? " paused" : ""),
+    style: progressIsControlled ? {
+      strokeDashoffset: getOffset(progress, counterClockwise)
     } : {},
+    customColor: customColors === null || customColors === void 0 ? void 0 : customColors.line,
+    customWidth: customCircleWidth,
     ref: _refDark
-  }), !hasProgressValue && React.createElement(Circle, {
-    className: "dnb-progress-indicator__circular__line light" + (useAnimationFrame ? " paused" : ""),
+  }), !progressIsControlled && React.createElement(Circle, {
+    className: 'light' + (useAnimationFrame ? " paused" : ""),
+    customColor: customColors === null || customColors === void 0 ? void 0 : customColors.shaft,
+    customWidth: customCircleWidth,
     ref: _refLight
   }));
 }
-const Circle = forwardRef(function Circle(props, ref) {
+const Circle = forwardRef(function Circle(_ref, ref) {
+  let {
+      customColor,
+      customWidth,
+      className
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded2);
+  const correctedCustomWidth = correctPercentageStrokeWidth(customWidth);
   return React.createElement("svg", _extends({
-    viewBox: "0 0 32 32",
+    className: classnames('dnb-progress-indicator__circular__line', className),
     shapeRendering: "geometricPrecision",
     ref: ref
-  }, props), _circle || (_circle = React.createElement("circle", {
+  }, rest), React.createElement("circle", {
     className: "dnb-progress-indicator__circular__circle",
     fill: "none",
-    strokeWidth: "4",
-    cx: "16",
-    cy: "16",
-    r: "14"
-  })));
+    cx: "50%",
+    cy: "50%",
+    r: "50%",
+    style: _objectSpread({
+      stroke: customColor
+    }, correctedCustomWidth ? {
+      '--progress-indicator-circular-stroke-width': correctedCustomWidth
+    } : undefined)
+  }));
 });
+function getOffset(progress) {
+  let counterClockwise = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const offset = Math.PI * (100 - progress);
+  return `${counterClockwise ? -offset : offset}%`;
+}
+function correctPercentageStrokeWidth(strokeWidth) {
+  if (typeof strokeWidth === 'string' && strokeWidth.endsWith('%')) {
+    const number = parseFloat(strokeWidth.slice(0, strokeWidth.length - 1));
+    return `${100 * number / (100 - number)}%`;
+  }
+}
 export default ProgressIndicatorCircular;
 //# sourceMappingURL=ProgressIndicatorCircular.js.map

package/components/progress-indicator/ProgressIndicatorCircular.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicatorCircular.js","names":["React","useEffect","useRef","forwardRef","classnames","validateDOMAttributes","IS_EDGE","ProgressIndicatorCircular","props","size","visible","progress","maxOffset","onComplete","callOnCompleteHandler","title","rest","_objectWithoutProperties","_excluded","keepAnimatingRef","visibleRef","useAnimationFrame","_refDark","_refLight","_startupTimeout","current","setTimeout","doAnimation","clearTimeout","element","animateOnStart","arguments","length","undefined","callback","min","max","start","ms","prog","setProg","animate1","completeCalled","stopNextRound","step","timestamp","style","Math","round","ceil","window","requestAnimationFrame","strokeDashoffset","hasProgressValue","role","remainingDOMAttributes","_objectSpread","createElement","_extends","className","_Circle","Circle","ref","viewBox","shapeRendering","_circle","fill","strokeWidth","cx","cy","r"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorCircular.tsx"],"sourcesContent":["/**\n * Web ProgressIndicator Component\n *\n */\n\nimport React, { useEffect, useRef, forwardRef } from 'react'\nimport classnames from 'classnames'\nimport { validateDOMAttributes } from '../../shared/component-helper'\nimport { IS_EDGE } from '../../shared/helpers'\n\ntype ProgressIndicatorCircularProps = {\n  /**\n   * Defines the size, like `small`, `default`, `medium` or `large`. Defaults to `default`.\n   */\n  size?: 'default' | 'small' | 'medium' | 'large' | 'huge'\n  /**\n   * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.\n   */\n  visible?: boolean\n  /**\n   * To visualize a static \"percentage\" (0-100) as a progress state. Defaults to `null`.\n   */\n  progress?: number\n  maxOffset?: number\n  onComplete?: (...args: any[]) => any\n  callOnCompleteHandler?: (...args: any[]) => any\n  /**\n   * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.\n   */\n  title?: string\n}\n\nfunction ProgressIndicatorCircular(\n  props: ProgressIndicatorCircularProps &\n    Omit<React.HTMLProps<HTMLElement>, 'size'>\n) {\n  const {\n    size,\n    visible,\n    progress,\n    maxOffset = 88,\n    onComplete,\n    callOnCompleteHandler,\n    title,\n    ...rest\n  } = props\n  const keepAnimatingRef = useRef(true)\n  const visibleRef = useRef(false)\n  const useAnimationFrame = typeof onComplete === 'function' || IS_EDGE\n  const _refDark = useRef<SVGSVGElement>(null)\n  const _refLight = useRef<SVGSVGElement>(null)\n  const _startupTimeout = useRef<NodeJS.Timeout>()\n\n  useEffect(() => {\n    if (useAnimationFrame) {\n      _startupTimeout.current = setTimeout(() => {\n        if (_refDark.current) {\n          doAnimation(_refDark.current, true, callOnCompleteHandler)\n        }\n        if (_refLight.current) {\n          doAnimation(_refLight.current, false)\n        }\n      }, 300)\n    }\n\n    return () => {\n      keepAnimatingRef.current = false\n      if (_startupTimeout.current) {\n        clearTimeout(_startupTimeout.current)\n      }\n    }\n  }, [])\n\n  useEffect(() => {\n    visibleRef.current = visible\n  }, [visible])\n\n  const doAnimation = (\n    element: SVGSVGElement,\n    animateOnStart = true,\n    callback = null\n  ) => {\n    const min = 1\n    const max = 88\n    let start = 0,\n      ms = 0,\n      prog = max,\n      setProg = animateOnStart,\n      animate1 = true,\n      completeCalled = false,\n      stopNextRound = false\n\n    const step = (timestamp) => {\n      if (!start) {\n        start = timestamp\n      }\n\n      // milliseconds\n      ms = timestamp - start\n\n      if (animate1) {\n        if (!visibleRef.current && prog < 5) {\n          prog = min\n        }\n        if (setProg) {\n          element.style['stroke-dashoffset'] = prog\n        } else if (!animateOnStart) {\n          element.style['stroke-dashoffset'] = max\n        }\n      }\n\n      // if complete\n      if (stopNextRound) {\n        animate1 = false\n        if (!completeCalled) {\n          completeCalled = true\n          if (animateOnStart && typeof callback === 'function') {\n            callback()\n          }\n        } else if (visibleRef.current && ms % 1e3 > 950) {\n          // startAnimationFirstTime() // will not start completely from scratch\n          stopNextRound = false\n        }\n      } else {\n        // make sure we stop next round\n        stopNextRound = !visibleRef.current && prog === min\n        animate1 = true\n        completeCalled = false\n      }\n\n      // since we have 1sec as duration, and we want always a max of 1000ms\n      prog = Math.round(max - (max / 1e3) * (ms % 1e3))\n\n      // calc if we want to animate\n      setProg = animateOnStart\n        ? Math.ceil(ms / 1e3) % 2 === 1 || ms === 0\n        : Math.ceil(ms / 1e3) % 2 === 0 && ms !== 0\n\n      if (keepAnimatingRef.current) {\n        window.requestAnimationFrame(step)\n      }\n    }\n    if (typeof window !== 'undefined' && window.requestAnimationFrame) {\n      window.requestAnimationFrame(step)\n    }\n  }\n\n  const strokeDashoffset = maxOffset - (maxOffset / 100) * progress\n  const hasProgressValue = progress > -1\n\n  if (hasProgressValue) {\n    rest.role = 'progressbar'\n    rest['aria-label'] = title\n    rest['title'] = title\n  } else {\n    rest.role = 'alert'\n    rest['aria-busy'] = true\n  }\n\n  const remainingDOMAttributes = validateDOMAttributes(props, { ...rest })\n\n  return (\n    <span\n      className={classnames(\n        'dnb-progress-indicator__circular',\n        size && `dnb-progress-indicator__circular--${size}`,\n        hasProgressValue &&\n          'dnb-progress-indicator__circular--has-progress-value'\n      )}\n      {...remainingDOMAttributes}\n    >\n      {/* The first one is the background line */}\n      <Circle\n        className={classnames(\n          'dnb-progress-indicator__circular__line',\n          'light',\n          'paused'\n        )}\n      />\n      <Circle\n        className={classnames(\n          'dnb-progress-indicator__circular__line',\n          'dark',\n          'dark',\n          hasProgressValue || useAnimationFrame ? 'paused' : null\n        )}\n        style={hasProgressValue ? { strokeDashoffset } : {}}\n        ref={_refDark}\n      />\n      {!hasProgressValue && (\n        <Circle\n          className={classnames(\n            'dnb-progress-indicator__circular__line',\n            'light',\n            useAnimationFrame ? 'paused' : null\n          )}\n          ref={_refLight}\n        />\n      )}\n    </span>\n  )\n}\n\nconst Circle = forwardRef(function Circle(\n  props: React.HTMLProps<SVGSVGElement>,\n  ref: React.RefObject<SVGSVGElement>\n) {\n  return (\n    <svg\n      viewBox=\"0 0 32 32\"\n      shapeRendering=\"geometricPrecision\"\n      ref={ref}\n      {...props}\n    >\n      <circle\n        className=\"dnb-progress-indicator__circular__circle\"\n        fill=\"none\"\n        strokeWidth=\"4\"\n        cx=\"16\"\n        cy=\"16\"\n        r=\"14\"\n      />\n    </svg>\n  )\n})\n\nexport default ProgressIndicatorCircular\n"],"mappings":"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"}
+{"version":3,"file":"ProgressIndicatorCircular.js","names":["React","useEffect","useRef","forwardRef","classnames","validateDOMAttributes","IS_EDGE","ProgressIndicatorCircular","props","size","visible","progress","onComplete","callOnCompleteHandler","title","customColors","customCircleWidth","counterClockwise","rest","_objectWithoutProperties","_excluded","keepAnimatingRef","visibleRef","useAnimationFrame","_refDark","_refLight","_startupTimeout","current","setTimeout","doAnimation","clearTimeout","element","animateOnStart","arguments","length","undefined","callback","min","max","Math","PI","start","ms","prog","setProg","animate1","completeCalled","stopNextRound","step","timestamp","style","round","ceil","window","requestAnimationFrame","progressIsControlled","role","remainingDOMAttributes","_objectSpread","createElement","_extends","className","backgroundColor","background","Circle","customColor","shaft","customWidth","strokeDashoffset","getOffset","line","ref","_ref","_excluded2","correctedCustomWidth","correctPercentageStrokeWidth","shapeRendering","fill","cx","cy","r","stroke","offset","strokeWidth","endsWith","number","parseFloat","slice"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorCircular.tsx"],"sourcesContent":["/**\n * Web ProgressIndicator Component\n *\n */\n\nimport React, { useEffect, useRef, forwardRef } from 'react'\nimport * as CSS from 'csstype'\nimport classnames from 'classnames'\nimport { validateDOMAttributes } from '../../shared/component-helper'\nimport { IS_EDGE } from '../../shared/helpers'\nimport { ProgressIndicatorCircularAllProps } from './types'\n\nfunction ProgressIndicatorCircular(\n  props: ProgressIndicatorCircularAllProps\n) {\n  const {\n    size,\n    visible,\n    progress,\n    onComplete,\n    callOnCompleteHandler,\n    title,\n    customColors,\n    customCircleWidth,\n    counterClockwise = false,\n    ...rest\n  } = props\n  const keepAnimatingRef = useRef(true)\n  const visibleRef = useRef(false)\n  const useAnimationFrame = typeof onComplete === 'function' || IS_EDGE\n  const _refDark = useRef<SVGSVGElement>(null)\n  const _refLight = useRef<SVGSVGElement>(null)\n  const _startupTimeout = useRef<NodeJS.Timeout>()\n\n  useEffect(() => {\n    if (useAnimationFrame) {\n      _startupTimeout.current = setTimeout(() => {\n        if (_refDark.current) {\n          doAnimation(_refDark.current, true, callOnCompleteHandler)\n        }\n        if (_refLight.current) {\n          doAnimation(_refLight.current, false)\n        }\n      }, 300)\n    }\n\n    return () => {\n      keepAnimatingRef.current = false\n      if (_startupTimeout.current) {\n        clearTimeout(_startupTimeout.current)\n      }\n    }\n  }, [])\n\n  useEffect(() => {\n    visibleRef.current = visible\n  }, [visible])\n\n  const doAnimation = (\n    element: SVGSVGElement,\n    animateOnStart = true,\n    callback = null\n  ) => {\n    const min = 1\n    const max = Math.PI * 100\n    let start = 0,\n      ms = 0,\n      prog = max,\n      setProg = animateOnStart,\n      animate1 = true,\n      completeCalled = false,\n      stopNextRound = false\n\n    const step = (timestamp) => {\n      if (!start) {\n        start = timestamp\n      }\n\n      // milliseconds\n      ms = timestamp - start\n\n      if (animate1) {\n        if (!visibleRef.current && prog < 20) {\n          prog = min\n        }\n        if (setProg) {\n          element.style['stroke-dashoffset'] = `${prog}%`\n        } else if (!animateOnStart) {\n          element.style['stroke-dashoffset'] = `${max}%`\n        }\n      }\n\n      // if complete\n      if (stopNextRound) {\n        animate1 = false\n        if (!completeCalled) {\n          completeCalled = true\n          if (animateOnStart && typeof callback === 'function') {\n            callback()\n          }\n        } else if (visibleRef.current && ms % 1e3 > 950) {\n          // startAnimationFirstTime() // will not start completely from scratch\n          stopNextRound = false\n        }\n      } else {\n        // make sure we stop next round\n        stopNextRound = !visibleRef.current && prog === min\n        animate1 = true\n        completeCalled = false\n      }\n\n      // since we have 1sec as duration, and we want always a max of 1000ms\n      prog = Math.round(max - (max / 1e3) * (ms % 1e3))\n\n      // calc if we want to animate\n      setProg = animateOnStart\n        ? Math.ceil(ms / 1e3) % 2 === 1 || ms === 0\n        : Math.ceil(ms / 1e3) % 2 === 0 && ms !== 0\n\n      if (keepAnimatingRef.current) {\n        window.requestAnimationFrame(step)\n      }\n    }\n    if (typeof window !== 'undefined' && window.requestAnimationFrame) {\n      window.requestAnimationFrame(step)\n    }\n  }\n\n  const progressIsControlled = progress > -1\n\n  if (progressIsControlled) {\n    rest.role = 'progressbar'\n    rest['aria-label'] = title\n    rest['title'] = title\n  } else {\n    rest.role = 'alert'\n    rest['aria-busy'] = true\n  }\n\n  const remainingDOMAttributes = validateDOMAttributes(props, { ...rest })\n\n  return (\n    <span\n      className={classnames(\n        'dnb-progress-indicator__circular',\n        size && `dnb-progress-indicator__circular--${size}`,\n        progressIsControlled &&\n          'dnb-progress-indicator__circular--has-progress-value'\n      )}\n      {...remainingDOMAttributes}\n    >\n      <span className=\"dnb-progress-indicator__circular__background-padding\">\n        <span\n          className=\"dnb-progress-indicator__circular__background\"\n          style={{ backgroundColor: customColors?.background }}\n        />\n      </span>\n\n      {/* The first one is the background line */}\n      <Circle\n        className={classnames('light', 'paused')}\n        customColor={customColors?.shaft}\n        customWidth={customCircleWidth}\n      />\n      <Circle\n        className={classnames(\n          'dark',\n          'dark',\n          progressIsControlled || useAnimationFrame ? 'paused' : null\n        )}\n        style={\n          progressIsControlled\n            ? {\n                strokeDashoffset: getOffset(progress, counterClockwise),\n              }\n            : {}\n        }\n        customColor={customColors?.line}\n        customWidth={customCircleWidth}\n        ref={_refDark}\n      />\n      {!progressIsControlled && (\n        <Circle\n          className={classnames(\n            'light',\n            useAnimationFrame ? 'paused' : null\n          )}\n          customColor={customColors?.shaft}\n          customWidth={customCircleWidth}\n          ref={_refLight}\n        />\n      )}\n    </span>\n  )\n}\n\nconst Circle = forwardRef(function Circle(\n  {\n    customColor,\n    customWidth,\n    className,\n    ...rest\n  }: React.HTMLProps<SVGSVGElement> & {\n    customColor?: CSS.Property.BackgroundColor\n    customWidth?: CSS.Property.StrokeWidth\n  },\n  ref: React.RefObject<SVGSVGElement>\n) {\n  const correctedCustomWidth = correctPercentageStrokeWidth(customWidth)\n  return (\n    <svg\n      className={classnames(\n        'dnb-progress-indicator__circular__line',\n        className\n      )}\n      shapeRendering=\"geometricPrecision\"\n      ref={ref}\n      {...rest}\n    >\n      <circle\n        className=\"dnb-progress-indicator__circular__circle\"\n        fill=\"none\"\n        cx=\"50%\"\n        cy=\"50%\"\n        r=\"50%\"\n        style={{\n          stroke: customColor,\n          ...(correctedCustomWidth\n            ? {\n                '--progress-indicator-circular-stroke-width':\n                  correctedCustomWidth,\n              }\n            : undefined),\n        }}\n      />\n    </svg>\n  )\n})\n/**\n *\n * @param progress number between 0-100\n * @param counterClockwise decides direction of movement. Default is `false`\n * @returns\n */\n\nfunction getOffset(progress: number, counterClockwise = false) {\n  const offset = Math.PI * (100 - progress)\n  return `${counterClockwise ? -offset : offset}%`\n}\n\n/**\n * If the custom stroke width is a percentage, returns a corrected width\n * relative to the parent SVG\n * @param strokeWidth\n * @returns\n */\nfunction correctPercentageStrokeWidth(\n  strokeWidth: CSS.Property.StrokeWidth\n) {\n  if (typeof strokeWidth === 'string' && strokeWidth.endsWith('%')) {\n    const number = parseFloat(strokeWidth.slice(0, strokeWidth.length - 1))\n    return `${(100 * number) / (100 - number)}%`\n  }\n}\nexport default ProgressIndicatorCircular\n"],"mappings":"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"}

package/components/progress-indicator/ProgressIndicatorDocs.d.ts

@@ -1,5 +1,6 @@
 import { PropertiesTableProps } from '../../shared/types';
 export declare const ProgressIndicatorProperties: PropertiesTableProps;
+export declare const CustomColorsData: PropertiesTableProps;
 export declare const ProgressIndicatorDeprecatedProperties: PropertiesTableProps;
 export declare const ProgressIndicatorEvents: PropertiesTableProps;
 export declare const ProgressIndicatorDeprecatedEvents: PropertiesTableProps;

package/components/progress-indicator/ProgressIndicatorDocs.js

@@ -13,7 +13,7 @@ export const ProgressIndicatorProperties = {
   },
   type: {
     doc: 'Defines the type.',
-    type: [`'circular'`, `'linear'`],
+    type: [`'circular'`, `'linear'`, `'countdown'`],
     defaultValue: `'circular'`,
     status: 'optional'
   },
@@ -25,19 +25,25 @@ export const ProgressIndicatorProperties = {
   },
   size: {
     doc: 'Defines the size.',
-    type: [`'default'`, `'small'`, `'medium'`, `'large'`, `'huge'`],
+    type: [`'default'`, `'small'`, `'medium'`, `'large'`, `'huge'`, 'string'],
     defaultValue: `'default'`,
     status: 'optional'
   },
   label: {
-    doc: 'Show a custom label to the right or under the indicator.',
+    doc: 'Content of a custom label. (Overrides `indicator_label` and `showDefaultLabel`)',
+    type: 'React.ReactNode',
+    defaultValue: 'undefined',
+    status: 'optional'
+  },
+  children: {
+    doc: 'Same as `label` prop (`label` prop has priority)',
     type: 'React.ReactNode',
     defaultValue: 'undefined',
     status: 'optional'
   },
   labelDirection: {
-    doc: 'Sets the position of the label.',
-    type: [`'horizontal'`, '`vertical`'],
+    doc: "Sets the position of the label. `'inside'` only works with `type='circular'.",
+    type: [`'horizontal'`, `'vertical'`, `'inside'`],
     defaultValue: `'horizontal'`,
     status: 'optional'
   },
@@ -59,12 +65,44 @@ export const ProgressIndicatorProperties = {
     defaultValue: 'undefined',
     status: 'optional'
   },
+  '[customColors](/uilib/components/progress-indicator/properties/#data-object-customcolors)': {
+    doc: 'Send in custom css colors that overrides any css. See below for data structure.',
+    type: 'object',
+    defaultValue: 'undefined',
+    status: 'optional'
+  },
+  customCircleWidth: {
+    doc: 'Send in custom css width for circle progress line. (`undefined` defaults to one eighth of the size).',
+    type: 'string',
+    defaultValue: 'undefined',
+    status: 'optional'
+  },
   '[Space](/uilib/layout/space/properties)': {
     doc: 'Spacing properties like `top` or `bottom` are supported.',
     type: ['string', 'object'],
     status: 'optional'
   }
 };
+export const CustomColorsData = {
+  line: {
+    doc: 'Override the moving line color.',
+    type: 'string',
+    defaultValue: 'undefined',
+    status: 'optional'
+  },
+  shaft: {
+    doc: 'Override the background line color.',
+    type: 'string',
+    defaultValue: 'undefined',
+    status: 'optional'
+  },
+  background: {
+    doc: 'Set a background color for the center of the circle.',
+    type: 'string',
+    defaultValue: 'undefined',
+    status: 'optional'
+  }
+};
 export const ProgressIndicatorDeprecatedProperties = {
   no_animation: {
     doc: 'use `noAnimation`.',
@@ -80,11 +118,6 @@ export const ProgressIndicatorDeprecatedProperties = {
     doc: 'use `showDefaultLabel`.',
     type: 'boolean',
     status: 'deprecated'
-  },
-  children: {
-    doc: 'use the `label` prop instead.',
-    type: 'React.ReactNode',
-    status: 'deprecated'
   }
 };
 export const ProgressIndicatorEvents = {