npm - @razorpay/blade - Versions diffs - 11.12.0 → 11.13.1 - Mend

@razorpay/blade 11.12.0 → 11.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/build/lib/web/development/components/ProgressBar/CircularProgressLabel.js ADDED Viewed

@@ -0,0 +1,38 @@
+import 'react';
+import '../Box/BaseBox/index.js';
+import '../Typography/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { Text } from '../Typography/Text/Text.js';
+var CircularProgressLabel = function CircularProgressLabel(_ref) {
+  var _label$trim;
+  var progressPercent = _ref.progressPercent,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    label = _ref.label,
+    _ref$showPercentage = _ref.showPercentage,
+    showPercentage = _ref$showPercentage === void 0 ? true : _ref$showPercentage;
+  var hasLabel = label && ((_label$trim = label.trim()) === null || _label$trim === void 0 ? void 0 : _label$trim.length) > 0;
+  return /*#__PURE__*/jsxs(BaseBox, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    children: [hasLabel && /*#__PURE__*/jsx(Text, {
+      marginTop: "spacing.3",
+      variant: "body",
+      weight: "regular",
+      size: "small",
+      children: label
+    }), showPercentage && size === 'small' && /*#__PURE__*/jsxs(Text, {
+      marginTop: hasLabel ? 'spacing.0' : 'spacing.3',
+      variant: "body",
+      weight: "semibold",
+      size: "small",
+      children: [progressPercent, "%"]
+    })]
+  });
+};
+export { CircularProgressLabel };
+//# sourceMappingURL=CircularProgressLabel.js.map

package/build/lib/web/development/components/ProgressBar/CircularProgressLabel.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CircularProgressLabel.js","sources":["../../../../../../src/components/ProgressBar/CircularProgressLabel.tsx"],"sourcesContent":["import React from 'react';\nimport type { CircularProgressBarFilledProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\n\nconst CircularProgressLabel = ({\n progressPercent,\n size = 'small',\n label,\n showPercentage = true,\n}: Pick<\n CircularProgressBarFilledProps,\n 'progressPercent' | 'size' | 'label' | 'showPercentage'\n>): React.ReactElement => {\n const hasLabel = label && label.trim()?.length > 0;\n\n return (\n <BaseBox display=\"flex\" flexDirection=\"column\" alignItems=\"center\">\n {hasLabel && (\n <Text marginTop=\"spacing.3\" variant=\"body\" weight=\"regular\" size=\"small\">\n {label}\n </Text>\n )}\n\n {showPercentage && size === 'small' && (\n <Text\n marginTop={hasLabel ? 'spacing.0' : 'spacing.3'}\n variant=\"body\"\n weight=\"semibold\"\n size=\"small\"\n >\n {progressPercent}%\n </Text>\n )}\n </BaseBox>\n );\n};\n\nexport { CircularProgressLabel };\n"],"names":["CircularProgressLabel","_ref","_label$trim","progressPercent","_ref$size","size","label","_ref$showPercentage","showPercentage","hasLabel","trim","length","_jsxs","BaseBox","display","flexDirection","alignItems","children","_jsx","Text","marginTop","variant","weight"],"mappings":";;;;;;;AAKA,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,EAQD;AAAA,EAAA,IAAAC,WAAA,CAAA;AAAA,EAAA,IAPxBC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IAAAC,SAAA,GAAAH,IAAA,CACfI,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,SAAA;IACdE,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAAC,mBAAA,GAAAN,IAAA,CACLO,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,mBAAA,CAAA;AAKrB,EAAA,IAAME,QAAQ,GAAGH,KAAK,IAAI,CAAAJ,CAAAA,WAAA,GAAAI,KAAK,CAACI,IAAI,EAAE,cAAAR,WAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZA,WAAA,CAAcS,MAAM,IAAG,CAAC,CAAA;EAElD,oBACEC,IAAA,CAACC,OAAO,EAAA;AAACC,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,aAAa,EAAC,QAAQ;AAACC,IAAAA,UAAU,EAAC,QAAQ;AAAAC,IAAAA,QAAA,EAC/DR,CAAAA,QAAQ,iBACPS,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,SAAS,EAAC,WAAW;AAACC,MAAAA,OAAO,EAAC,MAAM;AAACC,MAAAA,MAAM,EAAC,SAAS;AAACjB,MAAAA,IAAI,EAAC,OAAO;AAAAY,MAAAA,QAAA,EACrEX,KAAAA;KACG,CACP,EAEAE,cAAc,IAAIH,IAAI,KAAK,OAAO,iBACjCO,IAAA,CAACO,IAAI,EAAA;AACHC,MAAAA,SAAS,EAAEX,QAAQ,GAAG,WAAW,GAAG,WAAY;AAChDY,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,MAAM,EAAC,UAAU;AACjBjB,MAAAA,IAAI,EAAC,OAAO;MAAAY,QAAA,EAAA,CAEXd,eAAe,EAAC,GACnB,CAAA;AAAA,KAAM,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd;;;;"}

package/build/lib/web/development/components/ProgressBar/ProgressBar.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { ProgressBarFilled } from './ProgressBarFilled.web.js';
+import { CircularProgressBarFilled } from './CircularProgressBar.web.js';
 import clamp from '../../utils/lodashButBetter/clamp.js';
 import '../../utils/metaAttribute/index.js';
 import '../Typography/Text/index.js';
@@ -24,17 +25,20 @@ import { Text } from '../Typography/Text/Text.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
-var _excluded = ["accessibilityLabel", "color", "isIndeterminate", "label", "showPercentage", "size", "value", "variant", "min", "max", "testID"];
+var _excluded = ["accessibilityLabel", "color", "type", "isIndeterminate", "label", "showPercentage", "size", "value", "variant", "min", "max", "testID"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var progressBarHeight = {
   small: size[2],
-  medium: size[4]
+  medium: size[4],
+  // Large size isn't available when variant is 'linear'
+  large: size[0]
 };
 var ProgressBar = function ProgressBar(_ref) {
   var _label$trim;
   var accessibilityLabel = _ref.accessibilityLabel,
     color = _ref.color,
+    type = _ref.type,
     _ref$isIndeterminate = _ref.isIndeterminate,
     isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
     label = _ref.label,
@@ -54,19 +58,40 @@ var ProgressBar = function ProgressBar(_ref) {
     styledProps = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
-  var id = useId(variant);
+  var progressType = !type && (variant === 'meter' || variant === 'progress') ? variant : type;
+  var progressVariant = variant === 'meter' || variant === 'progress' ? 'linear' : variant;
+  var id = useId("".concat(progressType, "-").concat(progressVariant));
   if (true) {
-    if (variant === 'meter' && isIndeterminate) {
+    if (progressType === 'meter' && isIndeterminate) {
       throwBladeError({
         moduleName: 'ProgressBar',
-        message: "Cannot set 'isIndeterminate' when 'variant' is 'meter'."
+        message: "Cannot set 'isIndeterminate' when 'type' or 'variant' is 'meter'."
+      });
+    }
+    if (progressVariant === 'circular' && isIndeterminate) {
+      throwBladeError({
+        moduleName: 'ProgressBar',
+        message: "Cannot set 'isIndeterminate' when 'variant' is 'circular'."
+      });
+    }
+    if (progressVariant === 'linear' && size === 'large') {
+      throwBladeError({
+        moduleName: 'ProgressBar',
+        message: "Large size isn't available when 'variant' is 'linear'."
+      });
+    }
+    if (type && (variant === 'progress' || variant === 'meter')) {
+      throwBladeError({
+        moduleName: 'ProgressBar',
+        message: "variant can only be 'linear' or 'circular' when 'type=".concat(type, "'.")
       });
     }
   }
   var unfilledBackgroundColor = theme.colors.feedback.background.neutral.subtle;
   var filledBackgroundColor = color ? theme.colors.feedback.background[color].intense : theme.colors.surface.background.primary.intense;
   var hasLabel = label && ((_label$trim = label.trim()) === null || _label$trim === void 0 ? void 0 : _label$trim.length) > 0;
-  var isMeter = variant === 'meter';
+  var isMeter = progressType === 'meter';
+  var isCircular = progressVariant === 'circular';
   var progressValue = clamp(value, min, max);
   var percentageProgressValue = Math.floor((progressValue - min) * 100 / (max - min));
   var shouldShowPercentage = showPercentage && !isMeter && !isIndeterminate;
@@ -97,7 +122,7 @@ var ProgressBar = function ProgressBar(_ref) {
       display: "flex",
       flexDirection: "column",
       width: "100%",
-      children: [/*#__PURE__*/jsxs(BaseBox, {
+      children: [!isCircular ? /*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
         flexDirection: "row",
         justifyContent: hasLabel ? 'space-between' : 'flex-end',
@@ -116,7 +141,7 @@ var ProgressBar = function ProgressBar(_ref) {
             children: "".concat(percentageProgressValue, "%")
           })
         }) : null]
-      }), /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
+      }) : null, /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
         id: id
       }, makeAccessible({
         role: accessibilityProps.role,
@@ -126,7 +151,19 @@ var ProgressBar = function ProgressBar(_ref) {
         valueMin: accessibilityProps.valueMin,
         valueMax: accessibilityProps.valueMax
       })), {}, {
-        children: /*#__PURE__*/jsx(BaseBox, {
+        children: isCircular ? /*#__PURE__*/jsx(CircularProgressBarFilled, {
+          size: size,
+          label: label,
+          progressPercent: percentageProgressValue,
+          isMeter: isMeter,
+          showPercentage: shouldShowPercentage,
+          backgroundColor: unfilledBackgroundColor,
+          fillColor: filledBackgroundColor,
+          pulseMotionDuration: "duration.2xgentle",
+          fillMotionDuration: "duration.2xgentle",
+          pulseMotionDelay: "delay.long",
+          motionEasing: "easing.standard.revealing"
+        }) : /*#__PURE__*/jsx(BaseBox, {
           backgroundColor: unfilledBackgroundColor,
           height: makeSize(progressBarHeight[size]),
           overflow: "hidden",
@@ -139,7 +176,7 @@ var ProgressBar = function ProgressBar(_ref) {
             indeterminateMotionDuration: "duration.2xgentle",
             pulseMotionDelay: "delay.long",
             motionEasing: "easing.standard.revealing",
-            variant: variant,
+            type: progressType,
             isIndeterminate: isIndeterminate
           })
         })

package/build/lib/web/development/components/ProgressBar/ProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.js","sources":["../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { ProgressBarFilled } from './ProgressBarFilled';\nimport clamp from '~utils/lodashButBetter/clamp';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography/Text';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useId } from '~utils/useId';\nimport { useTheme } from '~components/BladeProvider';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { size } from '~tokens/global';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport type { AccessibilityProps } from '~utils/makeAccessible';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { throwBladeError } from '~utils/logger';\n\ntype ProgressBarCommonProps = {\n /*\n Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.\n /\n accessibilityLabel?: string;\n /\n Sets the color of the progress bar which changes the feedback color.\n /\n color?: FeedbackColors;\n /\n Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.\n /\n label?: string;\n /\n Sets the size of the progress bar.\n * @default 'small'\n /\n size?: 'small' \| 'medium';\n /\n Sets the progress value of the progress bar.\n * @default 'small'\n /\n value?: number;\n /\n Sets the minimum value for the progress bar.\n * @default 0\n /\n min?: number;\n /\n Sets the maximum value for the progress bar.\n * @default 100\n /\n max?: number;\n} & TestID &\n StyledPropsBlade;\n\ntype ProgressBarVariant = 'progress' \| 'meter';\n\ntype ProgressBarProgressProps = ProgressBarCommonProps & {\n /\n Sets the variant to be rendered for the progress bar.\n * @default 'progress'\n /\n variant?: Extract<ProgressBarVariant, 'progress'>;\n /\n Sets whether the progress bar is in an indeterminate state.\n * @default false\n /\n isIndeterminate?: boolean;\n /\n Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n * @default true\n /\n showPercentage?: boolean;\n};\n\ntype ProgressBarMeterProps = ProgressBarCommonProps & {\n /\n Sets the variant to be rendered for thr progress bar.\n * @default 'progress'\n /\n variant?: Extract<ProgressBarVariant, 'meter'>;\n /\n Sets whether the progress bar is in an indeterminate state.\n * @default false\n /\n isIndeterminate?: undefined;\n /\n Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n * @default false\n /\n showPercentage?: undefined;\n};\n\ntype ProgressBarProps = ProgressBarProgressProps \| ProgressBarMeterProps;\n\nconst progressBarHeight: Record<NonNullable<ProgressBarCommonProps['size']>, 2 \| 4> = {\n small: size[2],\n medium: size[4],\n};\n\nconst ProgressBar = ({\n accessibilityLabel,\n color,\n isIndeterminate = false,\n label,\n showPercentage = true,\n size = 'small',\n value = 0,\n variant = 'progress',\n min = 0,\n max = 100,\n testID,\n ...styledProps\n}: ProgressBarProps): ReactElement => {\n const { theme } = useTheme();\n const id = useId(variant);\n\n if (__DEV__) {\n if (variant === 'meter' && isIndeterminate) {\n throwBladeError({\n moduleName: 'ProgressBar',\n message: `Cannot set 'isIndeterminate' when 'variant' is 'meter'.`,\n });\n }\n }\n\n const unfilledBackgroundColor = theme.colors.feedback.background.neutral\n .subtle as BaseBoxProps['backgroundColor'];\n const filledBackgroundColor = color\n ? theme.colors.feedback.background[color].intense\n : theme.colors.surface.background.primary.intense;\n const hasLabel = label && label.trim()?.length > 0;\n const isMeter = variant === 'meter';\n const progressValue = clamp(value, min, max);\n const percentageProgressValue = Math.floor(((progressValue - min) 100) / (max - min));\n const shouldShowPercentage = showPercentage && !isMeter && !isIndeterminate;\n const accessibilityProps: Pick<\n AccessibilityProps,\n 'role' \| 'label' \| 'valueMax' \| 'valueNow' \| 'valueMin' \| 'valueText'\n > = {\n role: 'progressbar',\n label: accessibilityLabel ?? label,\n valueNow: percentageProgressValue,\n valueText: `${percentageProgressValue}%`,\n valueMin: min,\n valueMax: max,\n };\n\n if (isMeter) {\n accessibilityProps.role = 'meter';\n accessibilityProps.valueNow = progressValue;\n accessibilityProps.valueText = `${progressValue}`;\n }\n\n if (isIndeterminate) {\n accessibilityProps.valueNow = undefined;\n accessibilityProps.valueMin = undefined;\n accessibilityProps.valueMax = undefined;\n accessibilityProps.valueText = undefined;\n }\n\n return (\n <BaseBox\n {...getStyledProps(styledProps)}\n {...metaAttribute({ name: MetaConstants.ProgressBar, testID })}\n >\n <BaseBox display=\"flex\" flexDirection=\"column\" width=\"100%\">\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n justifyContent={hasLabel ? 'space-between' : 'flex-end'}\n >\n {hasLabel ? (\n <Text as=\"label\" variant=\"body\" size=\"small\" color=\"surface.text.gray.subtle\">\n {label}\n </Text>\n ) : null}\n {shouldShowPercentage ? (\n <BaseBox marginBottom=\"spacing.2\">\n <Text\n variant=\"body\"\n size=\"small\"\n color=\"surface.text.gray.subtle\"\n >{`${percentageProgressValue}%`}</Text>\n </BaseBox>\n ) : null}\n </BaseBox>\n <BaseBox\n id={id}\n {...makeAccessible({\n role: accessibilityProps.role,\n label: accessibilityProps.label,\n valueNow: accessibilityProps.valueNow,\n valueText: accessibilityProps.valueText,\n valueMin: accessibilityProps.valueMin,\n valueMax: accessibilityProps.valueMax,\n })}\n >\n <BaseBox\n backgroundColor={unfilledBackgroundColor}\n height={makeSize(progressBarHeight[size])}\n overflow=\"hidden\"\n position=\"relative\"\n >\n <ProgressBarFilled\n backgroundColor={filledBackgroundColor}\n progress={percentageProgressValue}\n fillMotionDuration=\"duration.2xgentle\"\n pulseMotionDuration=\"duration.2xgentle\"\n indeterminateMotionDuration=\"duration.2xgentle\"\n pulseMotionDelay=\"delay.long\"\n motionEasing=\"easing.standard.revealing\"\n variant={variant}\n isIndeterminate={isIndeterminate}\n />\n </BaseBox>\n </BaseBox>\n </BaseBox>\n </BaseBox>\n );\n};\n\nexport type { ProgressBarProps, ProgressBarVariant };\nexport { ProgressBar };\n"],"names":["progressBarHeight","small","size","medium","ProgressBar","_ref","_label$trim","accessibilityLabel","color","_ref$isIndeterminate","isIndeterminate","label","_ref$showPercentage","showPercentage","_ref$size","_ref$value","value","_ref$variant","variant","_ref$min","min","_ref$max","max","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","id","useId","throwBladeError","moduleName","message","unfilledBackgroundColor","colors","feedback","background","neutral","subtle","filledBackgroundColor","intense","surface","primary","hasLabel","trim","length","isMeter","progressValue","clamp","percentageProgressValue","Math","floor","shouldShowPercentage","accessibilityProps","role","valueNow","valueText","concat","valueMin","valueMax","undefined","_jsx","BaseBox","_objectSpread","getStyledProps","metaAttribute","name","MetaConstants","children","_jsxs","display","flexDirection","width","justifyContent","Text","as","marginBottom","makeAccessible","backgroundColor","height","makeSize","overflow","position","ProgressBarFilled","progress","fillMotionDuration","pulseMotionDuration","indeterminateMotionDuration","pulseMotionDelay","motionEasing"],"mappings":"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"}
1	+ {"version":3,"file":"ProgressBar.js","sources":["../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { ProgressBarFilled } from './ProgressBarFilled';\nimport { CircularProgressBarFilled } from './CircularProgressBar';\nimport clamp from '~utils/lodashButBetter/clamp';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography/Text';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useId } from '~utils/useId';\nimport { useTheme } from '~components/BladeProvider';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { size } from '~tokens/global';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport type { AccessibilityProps } from '~utils/makeAccessible';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { throwBladeError } from '~utils/logger';\n\ntype ProgressBarCommonProps = {\n /*\n Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.\n /\n accessibilityLabel?: string;\n /\n Sets the color of the progress bar which changes the feedback color.\n /\n color?: FeedbackColors;\n /\n Sets the type of the progress bar.\n * @default 'progress'\n /\n type?: 'meter' \| 'progress';\n /\n Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.\n /\n label?: string;\n /\n Sets the size of the progress bar.\n * Note: 'large' size isn't available when the variant is 'linear'.\n * @default 'small'\n /\n size?: 'small' \| 'medium' \| 'large';\n /\n Sets the progress value of the progress bar.\n * @default 'small'\n /\n value?: number;\n /\n Sets the minimum value for the progress bar.\n * @default 0\n /\n min?: number;\n /\n Sets the maximum value for the progress bar.\n * @default 100\n /\n max?: number;\n} & TestID &\n StyledPropsBlade;\n\ntype ProgressBarVariant = 'progress' \| 'meter' \| 'linear' \| 'circular';\n\ntype ProgressBarProgressProps = ProgressBarCommonProps & {\n /\n Sets the variant to be rendered for the progress bar.\n * @default 'progress'\n /\n variant?: Extract<ProgressBarVariant, 'progress' \| 'linear' \| 'circular'>;\n /\n Sets whether the progress bar is in an indeterminate state.\n * @default false\n /\n isIndeterminate?: boolean;\n /\n Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n * @default true\n /\n showPercentage?: boolean;\n};\n\ntype ProgressBarMeterProps = ProgressBarCommonProps & {\n /\n Sets the variant to be rendered for thr progress bar.\n * @default 'progress'\n /\n variant?: Extract<ProgressBarVariant, 'meter' \| 'linear' \| 'circular'>;\n /\n Sets whether the progress bar is in an indeterminate state.\n * @default false\n /\n isIndeterminate?: undefined;\n /\n Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n * @default false\n /\n showPercentage?: undefined;\n};\n\ntype ProgressBarProps = ProgressBarProgressProps \| ProgressBarMeterProps;\n\nconst progressBarHeight: Record<NonNullable<ProgressBarProps['size']>, 2 \| 4 \| 0> = {\n small: size[2],\n medium: size[4],\n // Large size isn't available when variant is 'linear'\n large: size[0],\n};\n\nconst ProgressBar = ({\n accessibilityLabel,\n color,\n type,\n isIndeterminate = false,\n label,\n showPercentage = true,\n size = 'small',\n value = 0,\n variant = 'progress',\n min = 0,\n max = 100,\n testID,\n ...styledProps\n}: ProgressBarProps): ReactElement => {\n const { theme } = useTheme();\n const progressType = !type && (variant === 'meter' \|\| variant === 'progress') ? variant : type;\n const progressVariant = variant === 'meter' \|\| variant === 'progress' ? 'linear' : variant;\n const id = useId(`${progressType}-${progressVariant}`);\n\n if (__DEV__) {\n if (progressType === 'meter' && isIndeterminate) {\n throwBladeError({\n moduleName: 'ProgressBar',\n message: `Cannot set 'isIndeterminate' when 'type' or 'variant' is 'meter'.`,\n });\n }\n\n if (progressVariant === 'circular' && isIndeterminate) {\n throwBladeError({\n moduleName: 'ProgressBar',\n message: `Cannot set 'isIndeterminate' when 'variant' is 'circular'.`,\n });\n }\n\n if (progressVariant === 'linear' && size === 'large') {\n throwBladeError({\n moduleName: 'ProgressBar',\n message: `Large size isn't available when 'variant' is 'linear'.`,\n });\n }\n\n if (type && (variant === 'progress' \|\| variant === 'meter')) {\n throwBladeError({\n moduleName: 'ProgressBar',\n message: `variant can only be 'linear' or 'circular' when 'type=${type}'.`,\n });\n }\n }\n\n const unfilledBackgroundColor = theme.colors.feedback.background.neutral\n .subtle as BaseBoxProps['backgroundColor'];\n const filledBackgroundColor = color\n ? theme.colors.feedback.background[color].intense\n : theme.colors.surface.background.primary.intense;\n const hasLabel = label && label.trim()?.length > 0;\n const isMeter = progressType === 'meter';\n const isCircular = progressVariant === 'circular';\n const progressValue = clamp(value, min, max);\n const percentageProgressValue = Math.floor(((progressValue - min) 100) / (max - min));\n const shouldShowPercentage = showPercentage && !isMeter && !isIndeterminate;\n const accessibilityProps: Pick<\n AccessibilityProps,\n 'role' \| 'label' \| 'valueMax' \| 'valueNow' \| 'valueMin' \| 'valueText'\n > = {\n role: 'progressbar',\n label: accessibilityLabel ?? label,\n valueNow: percentageProgressValue,\n valueText: `${percentageProgressValue}%`,\n valueMin: min,\n valueMax: max,\n };\n\n if (isMeter) {\n accessibilityProps.role = 'meter';\n accessibilityProps.valueNow = progressValue;\n accessibilityProps.valueText = `${progressValue}`;\n }\n\n if (isIndeterminate) {\n accessibilityProps.valueNow = undefined;\n accessibilityProps.valueMin = undefined;\n accessibilityProps.valueMax = undefined;\n accessibilityProps.valueText = undefined;\n }\n\n return (\n <BaseBox\n {...getStyledProps(styledProps)}\n {...metaAttribute({ name: MetaConstants.ProgressBar, testID })}\n >\n <BaseBox display=\"flex\" flexDirection=\"column\" width=\"100%\">\n {!isCircular ? (\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n justifyContent={hasLabel ? 'space-between' : 'flex-end'}\n >\n {hasLabel ? (\n <Text as=\"label\" variant=\"body\" size=\"small\" color=\"surface.text.gray.subtle\">\n {label}\n </Text>\n ) : null}\n {shouldShowPercentage ? (\n <BaseBox marginBottom=\"spacing.2\">\n <Text\n variant=\"body\"\n size=\"small\"\n color=\"surface.text.gray.subtle\"\n >{`${percentageProgressValue}%`}</Text>\n </BaseBox>\n ) : null}\n </BaseBox>\n ) : null}\n\n <BaseBox\n id={id}\n {...makeAccessible({\n role: accessibilityProps.role,\n label: accessibilityProps.label,\n valueNow: accessibilityProps.valueNow,\n valueText: accessibilityProps.valueText,\n valueMin: accessibilityProps.valueMin,\n valueMax: accessibilityProps.valueMax,\n })}\n >\n {isCircular ? (\n <CircularProgressBarFilled\n size={size}\n label={label}\n progressPercent={percentageProgressValue}\n isMeter={isMeter}\n showPercentage={shouldShowPercentage}\n backgroundColor={unfilledBackgroundColor as string}\n fillColor={filledBackgroundColor}\n pulseMotionDuration=\"duration.2xgentle\"\n fillMotionDuration=\"duration.2xgentle\"\n pulseMotionDelay=\"delay.long\"\n motionEasing=\"easing.standard.revealing\"\n />\n ) : (\n <BaseBox\n backgroundColor={unfilledBackgroundColor}\n height={makeSize(progressBarHeight[size])}\n overflow=\"hidden\"\n position=\"relative\"\n >\n <ProgressBarFilled\n backgroundColor={filledBackgroundColor}\n progress={percentageProgressValue}\n fillMotionDuration=\"duration.2xgentle\"\n pulseMotionDuration=\"duration.2xgentle\"\n indeterminateMotionDuration=\"duration.2xgentle\"\n pulseMotionDelay=\"delay.long\"\n motionEasing=\"easing.standard.revealing\"\n type={progressType}\n isIndeterminate={isIndeterminate}\n />\n </BaseBox>\n )}\n </BaseBox>\n </BaseBox>\n </BaseBox>\n );\n};\n\nexport type { ProgressBarProps, ProgressBarVariant };\nexport { ProgressBar };\n"],"names":["progressBarHeight","small","size","medium","large","ProgressBar","_ref","_label$trim","accessibilityLabel","color","type","_ref$isIndeterminate","isIndeterminate","label","_ref$showPercentage","showPercentage","_ref$size","_ref$value","value","_ref$variant","variant","_ref$min","min","_ref$max","max","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","progressType","progressVariant","id","useId","concat","throwBladeError","moduleName","message","unfilledBackgroundColor","colors","feedback","background","neutral","subtle","filledBackgroundColor","intense","surface","primary","hasLabel","trim","length","isMeter","isCircular","progressValue","clamp","percentageProgressValue","Math","floor","shouldShowPercentage","accessibilityProps","role","valueNow","valueText","valueMin","valueMax","undefined","_jsx","BaseBox","_objectSpread","getStyledProps","metaAttribute","name","MetaConstants","children","_jsxs","display","flexDirection","width","justifyContent","Text","as","marginBottom","makeAccessible","CircularProgressBarFilled","progressPercent","backgroundColor","fillColor","pulseMotionDuration","fillMotionDuration","pulseMotionDelay","motionEasing","height","makeSize","overflow","position","ProgressBarFilled","progress","indeterminateMotionDuration"],"mappings":"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"}

package/build/lib/web/development/components/ProgressBar/ProgressBarFilled.web.js CHANGED Viewed

@@ -46,11 +46,11 @@ var IndeterminatePulseAnimation = /*#__PURE__*/styled(BoxWithIndeterminateAnimat
     pulseMotionDuration = _ref4.pulseMotionDuration,
     pulseMotionDelay = _ref4.pulseMotionDelay,
     motionEasing = _ref4.motionEasing,
-    variant = _ref4.variant;
+    type = _ref4.type;
   var duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));
   var easing = castWebType(getIn(theme.motion, motionEasing));
   var delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));
-  return variant === 'progress' ? getPulseAnimationStyles({
+  return type === 'progress' ? getPulseAnimationStyles({
     duration: duration,
     easing: easing,
     delay: delay
@@ -89,11 +89,11 @@ var DeterminatePulseAnimation = /*#__PURE__*/styled(BoxWithProgressFillTransitio
     pulseMotionDuration = _ref7.pulseMotionDuration,
     pulseMotionDelay = _ref7.pulseMotionDelay,
     motionEasing = _ref7.motionEasing,
-    variant = _ref7.variant;
+    type = _ref7.type;
   var duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));
   var easing = castWebType(getIn(theme.motion, motionEasing));
   var delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));
-  return variant === 'progress' ? getPulseAnimationStyles({
+  return type === 'progress' ? getPulseAnimationStyles({
     duration: duration,
     easing: easing,
     delay: delay
@@ -107,7 +107,7 @@ var ProgressBarFilled = function ProgressBarFilled(_ref8) {
     pulseMotionDelay = _ref8.pulseMotionDelay,
     pulseMotionDuration = _ref8.pulseMotionDuration,
     indeterminateMotionDuration = _ref8.indeterminateMotionDuration,
-    variant = _ref8.variant,
+    type = _ref8.type,
     isIndeterminate = _ref8.isIndeterminate;
   var ProgressBarFilledContainer = isIndeterminate ? IndeterminateFilledContainer : DeterminateFilledContainer;
   var ProgressBarPulseAnimation = isIndeterminate ? IndeterminatePulseAnimation : DeterminatePulseAnimation;
@@ -119,7 +119,7 @@ var ProgressBarFilled = function ProgressBarFilled(_ref8) {
     children: /*#__PURE__*/jsx(ProgressBarPulseAnimation, {
       fillMotionDuration: fillMotionDuration,
       motionEasing: motionEasing,
-      variant: variant,
+      type: type,
       pulseMotionDelay: pulseMotionDelay,
       pulseMotionDuration: pulseMotionDuration
     })

package/build/lib/web/development/components/ProgressBar/ProgressBarFilled.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBarFilled.web.js","sources":["../../../../../../src/components/ProgressBar/ProgressBarFilled.web.tsx"],"sourcesContent":["import type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport React from 'react';\nimport type { ProgressBarFilledProps } from './types';\nimport { indeterminateAnimation, pulseAnimation } from './progressBarTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nconst pulseKeyframes = keyframes`\n 0% {\n opacity: ${pulseAnimation.opacityInitial};\n }\n 50% {\n opacity: ${pulseAnimation.opacityMid};\n }\n 100% {\n opacity: ${pulseAnimation.opacityFinal};\n }\n`;\n\nconst slideAndScaleKeyframes = keyframes`\n 0% {\n left: ${indeterminateAnimation.leftInitial};\n transform: scaleX(${indeterminateAnimation.scaleXInitial});\n }\n 50% {\n left: ${indeterminateAnimation.leftMid};\n transform: scaleX(${indeterminateAnimation.scaleXMid});\n }\n 100% {\n left: ${indeterminateAnimation.leftFinal};\n transform: scaleX(${indeterminateAnimation.scaleXFinal});\n }\n`;\n\nconst getPulseAnimationStyles = ({\n duration,\n easing,\n delay,\n}: {\n duration: string;\n easing: string;\n delay: string;\n}): FlattenSimpleInterpolation => css`\n height: 100%;\n width: 100%;\n opacity: ${pulseAnimation.opacityInitial};\n background-color: ${pulseAnimation.backgroundColor};\n animation: ${pulseKeyframes} ${duration} ${easing} infinite;\n animation-delay: ${delay};\n`;\n\nconst BoxWithIndeterminateAnimation = styled(BaseBox)<\n Pick<ProgressBarFilledProps, 'fillMotionDuration' \| 'indeterminateMotionDuration'>\n>(({ theme, indeterminateMotionDuration }) => {\n const duration = castWebType(makeMotionTime(getIn(theme.motion, indeterminateMotionDuration)));\n const easing = 'linear'; // TODO: Add this in motion tokens\n\n return css`\n animation: ${slideAndScaleKeyframes} ${duration} ${easing} infinite;\n position: absolute;\n width: ${indeterminateAnimation.fillWidth};\n height: 100%;\n `;\n});\n\nconst IndeterminateFilledContainer = styled(BoxWithIndeterminateAnimation)<\n Pick<ProgressBarFilledProps, 'backgroundColor' \| 'progress'>\n>(({ backgroundColor }) => ({\n backgroundColor,\n}));\n\nconst IndeterminatePulseAnimation = styled(BoxWithIndeterminateAnimation)<\n Pick<\n ProgressBarFilledProps,\n 'pulseMotionDuration' \| 'pulseMotionDelay' \| 'motionEasing' \| 'variant'\n >\n>(({ theme, pulseMotionDuration, pulseMotionDelay, motionEasing, variant }) => {\n const duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));\n const easing = castWebType(getIn(theme.motion, motionEasing));\n const delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));\n\n return variant === 'progress' ? getPulseAnimationStyles({ duration, easing, delay }) : '';\n});\n\nconst BoxWithProgressFillTransition = styled(BaseBox)<\n Pick<ProgressBarFilledProps, 'fillMotionDuration' \| 'motionEasing'>\n>(({ theme, fillMotionDuration, motionEasing }) => ({\n transitionProperty: 'width',\n transitionDuration: castWebType(makeMotionTime(getIn(theme.motion, fillMotionDuration))),\n transitionTimingFunction: castWebType(getIn(theme.motion, motionEasing)),\n}));\n\nconst DeterminateFilledContainer = styled(BoxWithProgressFillTransition)<\n Pick<ProgressBarFilledProps, 'backgroundColor' \| 'progress' \| 'indeterminateMotionDuration'>\n>(({ backgroundColor, progress }) => ({\n backgroundColor,\n height: '100%',\n width: `${progress}%`,\n}));\n\nconst DeterminatePulseAnimation = styled(BoxWithProgressFillTransition)<\n Pick<\n ProgressBarFilledProps,\n 'pulseMotionDuration' \| 'pulseMotionDelay' \| 'motionEasing' \| 'variant'\n >\n>(({ theme, pulseMotionDuration, pulseMotionDelay, motionEasing, variant }) => {\n const duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));\n const easing = castWebType(getIn(theme.motion, motionEasing));\n const delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));\n\n return variant === 'progress' ? getPulseAnimationStyles({ duration, easing, delay }) : '';\n});\n\nconst ProgressBarFilled = ({\n backgroundColor,\n fillMotionDuration,\n motionEasing,\n progress,\n pulseMotionDelay,\n pulseMotionDuration,\n indeterminateMotionDuration,\n variant,\n isIndeterminate,\n}: ProgressBarFilledProps): React.ReactElement => {\n const ProgressBarFilledContainer = isIndeterminate\n ? IndeterminateFilledContainer\n : DeterminateFilledContainer;\n const ProgressBarPulseAnimation = isIndeterminate\n ? IndeterminatePulseAnimation\n : DeterminatePulseAnimation;\n\n return (\n <ProgressBarFilledContainer\n backgroundColor={backgroundColor}\n fillMotionDuration={fillMotionDuration}\n progress={progress}\n indeterminateMotionDuration={indeterminateMotionDuration}\n >\n <ProgressBarPulseAnimation\n fillMotionDuration={fillMotionDuration}\n motionEasing={motionEasing}\n variant={variant}\n pulseMotionDelay={pulseMotionDelay}\n pulseMotionDuration={pulseMotionDuration}\n />\n </ProgressBarFilledContainer>\n );\n};\n\nexport { ProgressBarFilled };\n"],"names":["pulseKeyframes","keyframes","pulseAnimation","opacityInitial","opacityMid","opacityFinal","slideAndScaleKeyframes","indeterminateAnimation","leftInitial","scaleXInitial","leftMid","scaleXMid","leftFinal","scaleXFinal","getPulseAnimationStyles","_ref","duration","easing","delay","css","backgroundColor","BoxWithIndeterminateAnimation","styled","BaseBox","withConfig","displayName","componentId","_ref2","theme","indeterminateMotionDuration","castWebType","makeMotionTime","getIn","motion","fillWidth","IndeterminateFilledContainer","_ref3","IndeterminatePulseAnimation","_ref4","pulseMotionDuration","pulseMotionDelay","motionEasing","variant","BoxWithProgressFillTransition","_ref5","fillMotionDuration","transitionProperty","transitionDuration","transitionTimingFunction","DeterminateFilledContainer","_ref6","progress","height","width","concat","DeterminatePulseAnimation","_ref7","ProgressBarFilled","_ref8","isIndeterminate","ProgressBarFilledContainer","ProgressBarPulseAnimation","_jsx","children"],"mappings":";;;;;;;;;;;;AAUA,IAAMA,cAAc,gBAAGC,SAAS,CAAA,CAAA,aAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,IAAA,CAAA,EAEjBC,cAAc,CAACC,cAAc,EAG7BD,cAAc,CAACE,UAAU,EAGzBF,cAAc,CAACG,YAAY,CAEzC,CAAA;AAED,IAAMC,sBAAsB,gBAAGL,SAAS,CAE5BM,CAAAA,UAAAA,EAAAA,oBAAAA,EAAAA,cAAAA,EAAAA,oBAAAA,EAAAA,eAAAA,EAAAA,oBAAAA,EAAAA,KAAAA,CAAAA,EAAAA,sBAAsB,CAACC,WAAW,EACtBD,sBAAsB,CAACE,aAAa,EAGhDF,sBAAsB,CAACG,OAAO,EAClBH,sBAAsB,CAACI,SAAS,EAG5CJ,sBAAsB,CAACK,SAAS,EACnBL,sBAAsB,CAACM,WAAW,CAE1D,CAAA;AAED,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC3BC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,KAAK,GAAAH,IAAA,CAALG,KAAK,CAAA;AAAA,EAAA,OAK2BC,GAAG,CAGxBjB,CAAAA,iCAAAA,EAAAA,oBAAAA,EAAAA,aAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,4BAAAA,EAAAA,GAAAA,CAAAA,EAAAA,cAAc,CAACC,cAAc,EACpBD,cAAc,CAACkB,eAAe,EACrCpB,cAAc,EAAIgB,QAAQ,EAAIC,MAAM,EAC9BC,KAAK,CAAA,CAAA;AAAA,CACzB,CAAA;AAED,IAAMG,6BAA6B,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAEnD,CAAA,CAAA,UAAAC,KAAA,EAA4C;AAAA,EAAA,IAAzCC,KAAK,GAAAD,KAAA,CAALC,KAAK;IAAEC,2BAA2B,GAAAF,KAAA,CAA3BE,2BAA2B,CAAA;AACrC,EAAA,IAAMb,QAAQ,GAAGc,WAAW,CAACC,cAAc,CAACC,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEJ,2BAA2B,CAAC,CAAC,CAAC,CAAA;AAC9F,EAAA,IAAMZ,MAAM,GAAG,QAAQ,CAAC;;EAExB,OAAOE,GAAG,CACKb,CAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,oCAAAA,EAAAA,eAAAA,CAAAA,EAAAA,sBAAsB,EAAIU,QAAQ,EAAIC,MAAM,EAEhDV,sBAAsB,CAAC2B,SAAS,CAAA,CAAA;AAG7C,CAAC,CAAC,CAAA;AAEF,IAAMC,4BAA4B,gBAAGb,MAAM,CAACD,6BAA6B,CAAC,CAAAG,UAAA,CAAA;EAAAC,WAAA,EAAA,oDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAExE,UAAAU,KAAA,EAAA;AAAA,EAAA,IAAGhB,eAAe,GAAAgB,KAAA,CAAfhB,eAAe,CAAA;EAAA,OAAQ;AAC1BA,IAAAA,eAAe,EAAfA,eAAAA;GACD,CAAA;AAAA,CAAC,CAAC,CAAA;AAEH,IAAMiB,2BAA2B,gBAAGf,MAAM,CAACD,6BAA6B,CAAC,CAAAG,UAAA,CAAA;EAAAC,WAAA,EAAA,mDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAKvE,CAAA,CAAA,UAAAY,KAAA,EAA6E;AAAA,EAAA,IAA1EV,KAAK,GAAAU,KAAA,CAALV,KAAK;IAAEW,mBAAmB,GAAAD,KAAA,CAAnBC,mBAAmB;IAAEC,gBAAgB,GAAAF,KAAA,CAAhBE,gBAAgB;IAAEC,YAAY,GAAAH,KAAA,CAAZG,YAAY;IAAEC,OAAO,GAAAJ,KAAA,CAAPI,OAAO,CAAA;AACtE,EAAA,IAAM1B,QAAQ,GAAGc,WAAW,CAACC,cAAc,CAACC,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEM,mBAAmB,CAAC,CAAC,CAAC,CAAA;AACtF,EAAA,IAAMtB,MAAM,GAAGa,WAAW,CAACE,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEQ,YAAY,CAAC,CAAC,CAAA;AAC7D,EAAA,IAAMvB,KAAK,GAAGY,WAAW,CAACC,cAAc,CAACC,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEO,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAEhF,EAAA,OAAOE,OAAO,KAAK,UAAU,GAAG5B,uBAAuB,CAAC;AAAEE,IAAAA,QAAQ,EAARA,QAAQ;AAAEC,IAAAA,MAAM,EAANA,MAAM;AAAEC,IAAAA,KAAK,EAALA,KAAAA;GAAO,CAAC,GAAG,EAAE,CAAA;AAC3F,CAAC,CAAC,CAAA;AAEF,IAAMyB,6BAA6B,gBAAGrB,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAEnD,UAAAkB,KAAA,EAAA;AAAA,EAAA,IAAGhB,KAAK,GAAAgB,KAAA,CAALhB,KAAK;IAAEiB,kBAAkB,GAAAD,KAAA,CAAlBC,kBAAkB;IAAEJ,YAAY,GAAAG,KAAA,CAAZH,YAAY,CAAA;EAAA,OAAQ;AAClDK,IAAAA,kBAAkB,EAAE,OAAO;AAC3BC,IAAAA,kBAAkB,EAAEjB,WAAW,CAACC,cAAc,CAACC,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEY,kBAAkB,CAAC,CAAC,CAAC;IACxFG,wBAAwB,EAAElB,WAAW,CAACE,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEQ,YAAY,CAAC,CAAA;GACxE,CAAA;AAAA,CAAC,CAAC,CAAA;AAEH,IAAMQ,0BAA0B,gBAAG3B,MAAM,CAACqB,6BAA6B,CAAC,CAAAnB,UAAA,CAAA;EAAAC,WAAA,EAAA,kDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAEtE,UAAAwB,KAAA,EAAA;AAAA,EAAA,IAAG9B,eAAe,GAAA8B,KAAA,CAAf9B,eAAe;IAAE+B,QAAQ,GAAAD,KAAA,CAARC,QAAQ,CAAA;EAAA,OAAQ;AACpC/B,IAAAA,eAAe,EAAfA,eAAe;AACfgC,IAAAA,MAAM,EAAE,MAAM;IACdC,KAAK,EAAA,EAAA,CAAAC,MAAA,CAAKH,QAAQ,EAAA,GAAA,CAAA;GACnB,CAAA;AAAA,CAAC,CAAC,CAAA;AAEH,IAAMI,yBAAyB,gBAAGjC,MAAM,CAACqB,6BAA6B,CAAC,CAAAnB,UAAA,CAAA;EAAAC,WAAA,EAAA,iDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAKrE,CAAA,CAAA,UAAA8B,KAAA,EAA6E;AAAA,EAAA,IAA1E5B,KAAK,GAAA4B,KAAA,CAAL5B,KAAK;IAAEW,mBAAmB,GAAAiB,KAAA,CAAnBjB,mBAAmB;IAAEC,gBAAgB,GAAAgB,KAAA,CAAhBhB,gBAAgB;IAAEC,YAAY,GAAAe,KAAA,CAAZf,YAAY;IAAEC,OAAO,GAAAc,KAAA,CAAPd,OAAO,CAAA;AACtE,EAAA,IAAM1B,QAAQ,GAAGc,WAAW,CAACC,cAAc,CAACC,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEM,mBAAmB,CAAC,CAAC,CAAC,CAAA;AACtF,EAAA,IAAMtB,MAAM,GAAGa,WAAW,CAACE,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEQ,YAAY,CAAC,CAAC,CAAA;AAC7D,EAAA,IAAMvB,KAAK,GAAGY,WAAW,CAACC,cAAc,CAACC,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEO,gBAAgB,CAAC,CAAC,CAAC,CAAA;AAEhF,EAAA,OAAOE,OAAO,KAAK,UAAU,GAAG5B,uBAAuB,CAAC;AAAEE,IAAAA,QAAQ,EAARA,QAAQ;AAAEC,IAAAA,MAAM,EAANA,MAAM;AAAEC,IAAAA,KAAK,EAALA,KAAAA;GAAO,CAAC,GAAG,EAAE,CAAA;AAC3F,CAAC,CAAC,CAAA;AAEF,IAAMuC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,KAAA,EAU2B;AAAA,EAAA,IAThDtC,eAAe,GAAAsC,KAAA,CAAftC,eAAe;IACfyB,kBAAkB,GAAAa,KAAA,CAAlBb,kBAAkB;IAClBJ,YAAY,GAAAiB,KAAA,CAAZjB,YAAY;IACZU,QAAQ,GAAAO,KAAA,CAARP,QAAQ;IACRX,gBAAgB,GAAAkB,KAAA,CAAhBlB,gBAAgB;IAChBD,mBAAmB,GAAAmB,KAAA,CAAnBnB,mBAAmB;IACnBV,2BAA2B,GAAA6B,KAAA,CAA3B7B,2BAA2B;IAC3Ba,OAAO,GAAAgB,KAAA,CAAPhB,OAAO;IACPiB,eAAe,GAAAD,KAAA,CAAfC,eAAe,CAAA;AAEf,EAAA,IAAMC,0BAA0B,GAAGD,eAAe,GAC9CxB,4BAA4B,GAC5Bc,0BAA0B,CAAA;AAC9B,EAAA,IAAMY,yBAAyB,GAAGF,eAAe,GAC7CtB,2BAA2B,GAC3BkB,yBAAyB,CAAA;EAE7B,oBACEO,GAAA,CAACF,0BAA0B,EAAA;AACzBxC,IAAAA,eAAe,EAAEA,eAAgB;AACjCyB,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCM,IAAAA,QAAQ,EAAEA,QAAS;AACnBtB,IAAAA,2BAA2B,EAAEA,2BAA4B;IAAAkC,QAAA,eAEzDD,GAAA,CAACD,yBAAyB,EAAA;AACxBhB,MAAAA,kBAAkB,EAAEA,kBAAmB;AACvCJ,MAAAA,YAAY,EAAEA,YAAa;AAC3BC,MAAAA,OAAO,EAAEA,OAAQ;AACjBF,MAAAA,gBAAgB,EAAEA,gBAAiB;AACnCD,MAAAA,mBAAmB,EAAEA,mBAAAA;KACtB,CAAA;AAAC,GACwB,CAAC,CAAA;AAEjC;;;;"}
1	+ {"version":3,"file":"ProgressBarFilled.web.js","sources":["../../../../../../src/components/ProgressBar/ProgressBarFilled.web.tsx"],"sourcesContent":["import type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport React from 'react';\nimport type { ProgressBarFilledProps } from './types';\nimport { indeterminateAnimation, pulseAnimation } from './progressBarTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nconst pulseKeyframes = keyframes`\n 0% {\n opacity: ${pulseAnimation.opacityInitial};\n }\n 50% {\n opacity: ${pulseAnimation.opacityMid};\n }\n 100% {\n opacity: ${pulseAnimation.opacityFinal};\n }\n`;\n\nconst slideAndScaleKeyframes = keyframes`\n 0% {\n left: ${indeterminateAnimation.leftInitial};\n transform: scaleX(${indeterminateAnimation.scaleXInitial});\n }\n 50% {\n left: ${indeterminateAnimation.leftMid};\n transform: scaleX(${indeterminateAnimation.scaleXMid});\n }\n 100% {\n left: ${indeterminateAnimation.leftFinal};\n transform: scaleX(${indeterminateAnimation.scaleXFinal});\n }\n`;\n\nconst getPulseAnimationStyles = ({\n duration,\n easing,\n delay,\n}: {\n duration: string;\n easing: string;\n delay: string;\n}): FlattenSimpleInterpolation => css`\n height: 100%;\n width: 100%;\n opacity: ${pulseAnimation.opacityInitial};\n background-color: ${pulseAnimation.backgroundColor};\n animation: ${pulseKeyframes} ${duration} ${easing} infinite;\n animation-delay: ${delay};\n`;\n\nconst BoxWithIndeterminateAnimation = styled(BaseBox)<\n Pick<ProgressBarFilledProps, 'fillMotionDuration' \| 'indeterminateMotionDuration'>\n>(({ theme, indeterminateMotionDuration }) => {\n const duration = castWebType(makeMotionTime(getIn(theme.motion, indeterminateMotionDuration)));\n const easing = 'linear'; // TODO: Add this in motion tokens\n\n return css`\n animation: ${slideAndScaleKeyframes} ${duration} ${easing} infinite;\n position: absolute;\n width: ${indeterminateAnimation.fillWidth};\n height: 100%;\n `;\n});\n\nconst IndeterminateFilledContainer = styled(BoxWithIndeterminateAnimation)<\n Pick<ProgressBarFilledProps, 'backgroundColor' \| 'progress'>\n>(({ backgroundColor }) => ({\n backgroundColor,\n}));\n\nconst IndeterminatePulseAnimation = styled(BoxWithIndeterminateAnimation)<\n Pick<ProgressBarFilledProps, 'pulseMotionDuration' \| 'pulseMotionDelay' \| 'motionEasing' \| 'type'>\n>(({ theme, pulseMotionDuration, pulseMotionDelay, motionEasing, type }) => {\n const duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));\n const easing = castWebType(getIn(theme.motion, motionEasing));\n const delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));\n\n return type === 'progress' ? getPulseAnimationStyles({ duration, easing, delay }) : '';\n});\n\nconst BoxWithProgressFillTransition = styled(BaseBox)<\n Pick<ProgressBarFilledProps, 'fillMotionDuration' \| 'motionEasing'>\n>(({ theme, fillMotionDuration, motionEasing }) => ({\n transitionProperty: 'width',\n transitionDuration: castWebType(makeMotionTime(getIn(theme.motion, fillMotionDuration))),\n transitionTimingFunction: castWebType(getIn(theme.motion, motionEasing)),\n}));\n\nconst DeterminateFilledContainer = styled(BoxWithProgressFillTransition)<\n Pick<ProgressBarFilledProps, 'backgroundColor' \| 'progress' \| 'indeterminateMotionDuration'>\n>(({ backgroundColor, progress }) => ({\n backgroundColor,\n height: '100%',\n width: `${progress}%`,\n}));\n\nconst DeterminatePulseAnimation = styled(BoxWithProgressFillTransition)<\n Pick<ProgressBarFilledProps, 'pulseMotionDuration' \| 'pulseMotionDelay' \| 'motionEasing' \| 'type'>\n>(({ theme, pulseMotionDuration, pulseMotionDelay, motionEasing, type }) => {\n const duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));\n const easing = castWebType(getIn(theme.motion, motionEasing));\n const delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));\n\n return type === 'progress' ? getPulseAnimationStyles({ duration, easing, delay }) : '';\n});\n\nconst ProgressBarFilled = ({\n backgroundColor,\n fillMotionDuration,\n motionEasing,\n progress,\n pulseMotionDelay,\n pulseMotionDuration,\n indeterminateMotionDuration,\n type,\n isIndeterminate,\n}: ProgressBarFilledProps): React.ReactElement => {\n const ProgressBarFilledContainer = isIndeterminate\n ? IndeterminateFilledContainer\n : DeterminateFilledContainer;\n const ProgressBarPulseAnimation = isIndeterminate\n ? IndeterminatePulseAnimation\n : DeterminatePulseAnimation;\n\n return (\n <ProgressBarFilledContainer\n backgroundColor={backgroundColor}\n fillMotionDuration={fillMotionDuration}\n progress={progress}\n indeterminateMotionDuration={indeterminateMotionDuration}\n >\n <ProgressBarPulseAnimation\n fillMotionDuration={fillMotionDuration}\n motionEasing={motionEasing}\n type={type}\n pulseMotionDelay={pulseMotionDelay}\n pulseMotionDuration={pulseMotionDuration}\n />\n </ProgressBarFilledContainer>\n );\n};\n\nexport { ProgressBarFilled };\n"],"names":["pulseKeyframes","keyframes","pulseAnimation","opacityInitial","opacityMid","opacityFinal","slideAndScaleKeyframes","indeterminateAnimation","leftInitial","scaleXInitial","leftMid","scaleXMid","leftFinal","scaleXFinal","getPulseAnimationStyles","_ref","duration","easing","delay","css","backgroundColor","BoxWithIndeterminateAnimation","styled","BaseBox","withConfig","displayName","componentId","_ref2","theme","indeterminateMotionDuration","castWebType","makeMotionTime","getIn","motion","fillWidth","IndeterminateFilledContainer","_ref3","IndeterminatePulseAnimation","_ref4","pulseMotionDuration","pulseMotionDelay","motionEasing","type","BoxWithProgressFillTransition","_ref5","fillMotionDuration","transitionProperty","transitionDuration","transitionTimingFunction","DeterminateFilledContainer","_ref6","progress","height","width","concat","DeterminatePulseAnimation","_ref7","ProgressBarFilled","_ref8","isIndeterminate","ProgressBarFilledContainer","ProgressBarPulseAnimation","_jsx","children"],"mappings":"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"}

package/build/lib/web/development/components/ProgressBar/progressBarTokens.js CHANGED Viewed

@@ -1,3 +1,6 @@
+import '../../tokens/global/index.js';
+import { size } from '../../tokens/global/size.js';
 var indeterminateAnimation = {
   scaleXInitial: 1,
   scaleXMid: 5,
@@ -13,6 +16,47 @@ var pulseAnimation = {
   opacityFinal: 0,
   backgroundColor: 'white'
 };
+var circularProgressSizeTokens = {
+  small: {
+    size: size[24],
+    strokeWidth: size[3],
+    percentTextSize: 'small'
+  },
+  medium: {
+    size: size[48],
+    strokeWidth: size[5],
+    percentTextSize: 'small'
+  },
+  large: {
+    size: size[72],
+    strokeWidth: size[7],
+    percentTextSize: 'medium'
+  }
+};
+var getCircularProgressSVGTokens = function getCircularProgressSVGTokens(_ref) {
+  var size = _ref.size,
+    progressPercent = _ref.progressPercent;
+  // Size of the enclosing square
+  var sqSize = circularProgressSizeTokens[size].size;
+  var strokeWidth = circularProgressSizeTokens[size].strokeWidth;
+  // SVG centers the stroke width on the radius, subtract out so circle fits in square
+  var radius = (sqSize - strokeWidth) / 2;
+  // Enclose circle in a circumscribing square
+  var viewBox = "0 0 ".concat(sqSize, " ").concat(sqSize);
+  // Arc length at 100% coverage is the circle circumference
+  var dashArray = radius * Math.PI * 2;
+  // Scale 100% coverage overlay with the actual percent
+  var dashOffset = dashArray - dashArray * progressPercent / 100;
+  return {
+    sqSize: sqSize,
+    strokeWidth: strokeWidth,
+    radius: radius,
+    viewBox: viewBox,
+    dashArray: dashArray,
+    dashOffset: dashOffset
+  };
+};
-export { indeterminateAnimation, pulseAnimation };
+export { circularProgressSizeTokens, getCircularProgressSVGTokens, indeterminateAnimation, pulseAnimation };
 //# sourceMappingURL=progressBarTokens.js.map

package/build/lib/web/development/components/ProgressBar/progressBarTokens.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progressBarTokens.js","sources":["../../../../../../src/components/ProgressBar/progressBarTokens.ts"],"sourcesContent":["~~const~~ indeterminateAnimation = {\n scaleXInitial: 1,\n scaleXMid: 5,\n scaleXFinal: 1,\n leftInitial: '-8%',\n leftMid: '50%',\n leftFinal: '103%',\n fillWidth: '5%',\n};\n\nconst pulseAnimation = {\n opacityInitial: 0,\n opacityMid: 0.25,\n opacityFinal: 0,\n backgroundColor: 'white',\n};\n\~~nexport~~ { ~~indeterminateAnimation~~, ~~pulseAnimation~~ };\n"],"names":["indeterminateAnimation","scaleXInitial","scaleXMid","scaleXFinal","leftInitial","leftMid","leftFinal","fillWidth","pulseAnimation","opacityInitial","opacityMid","opacityFinal","backgroundColor"],"mappings":"~~AAAA~~,IAAMA,sBAAsB,GAAG;AAC7BC,EAAAA,aAAa,EAAE,CAAC;AAChBC,EAAAA,SAAS,EAAE,CAAC;AACZC,EAAAA,WAAW,EAAE,CAAC;AACdC,EAAAA,WAAW,EAAE,KAAK;AAClBC,EAAAA,OAAO,EAAE,KAAK;AACdC,EAAAA,SAAS,EAAE,MAAM;AACjBC,EAAAA,SAAS,EAAE,IAAA;AACb,EAAC;AAED,IAAMC,cAAc,GAAG;AACrBC,EAAAA,cAAc,EAAE,CAAC;AACjBC,EAAAA,UAAU,EAAE,IAAI;AAChBC,EAAAA,YAAY,EAAE,CAAC;AACfC,EAAAA,eAAe,EAAE,OAAA;AACnB;;;;"}
1	+ {"version":3,"file":"progressBarTokens.js","sources":["../../../../../../src/components/ProgressBar/progressBarTokens.ts"],"sourcesContent":["import type { CircularProgressBarFilledProps } from './types';\nimport { size } from '~tokens/global';\n\nconst indeterminateAnimation = {\n scaleXInitial: 1,\n scaleXMid: 5,\n scaleXFinal: 1,\n leftInitial: '-8%',\n leftMid: '50%',\n leftFinal: '103%',\n fillWidth: '5%',\n};\n\nconst pulseAnimation = {\n opacityInitial: 0,\n opacityMid: 0.25,\n opacityFinal: 0,\n backgroundColor: 'white',\n};\n\nconst circularProgressSizeTokens = {\n small: {\n size: size[24],\n strokeWidth: size[3],\n percentTextSize: 'small',\n },\n medium: {\n size: size[48],\n strokeWidth: size[5],\n percentTextSize: 'small',\n },\n large: {\n size: size[72],\n strokeWidth: size[7],\n percentTextSize: 'medium',\n },\n} as const;\n\nconst getCircularProgressSVGTokens = ({\n size,\n progressPercent,\n}: {\n size: NonNullable<CircularProgressBarFilledProps['size']>;\n progressPercent: number;\n}): {\n sqSize: number;\n strokeWidth: number;\n radius: number;\n viewBox: string;\n dashArray: number;\n dashOffset: number;\n} => {\n // Size of the enclosing square\n const sqSize = circularProgressSizeTokens[size].size;\n const strokeWidth = circularProgressSizeTokens[size].strokeWidth;\n\n // SVG centers the stroke width on the radius, subtract out so circle fits in square\n const radius = (sqSize - strokeWidth) / 2;\n // Enclose circle in a circumscribing square\n const viewBox = `0 0 ${sqSize} ${sqSize}`;\n // Arc length at 100% coverage is the circle circumference\n const dashArray = radius * Math.PI * 2;\n // Scale 100% coverage overlay with the actual percent\n const dashOffset = dashArray - (dashArray * progressPercent) / 100;\n\n return {\n sqSize,\n strokeWidth,\n radius,\n viewBox,\n dashArray,\n dashOffset,\n };\n};\n\nexport {\n indeterminateAnimation,\n pulseAnimation,\n circularProgressSizeTokens,\n getCircularProgressSVGTokens,\n};\n"],"names":["indeterminateAnimation","scaleXInitial","scaleXMid","scaleXFinal","leftInitial","leftMid","leftFinal","fillWidth","pulseAnimation","opacityInitial","opacityMid","opacityFinal","backgroundColor","circularProgressSizeTokens","small","size","strokeWidth","percentTextSize","medium","large","getCircularProgressSVGTokens","_ref","progressPercent","sqSize","radius","viewBox","concat","dashArray","Math","PI","dashOffset"],"mappings":";;;AAGA,IAAMA,sBAAsB,GAAG;AAC7BC,EAAAA,aAAa,EAAE,CAAC;AAChBC,EAAAA,SAAS,EAAE,CAAC;AACZC,EAAAA,WAAW,EAAE,CAAC;AACdC,EAAAA,WAAW,EAAE,KAAK;AAClBC,EAAAA,OAAO,EAAE,KAAK;AACdC,EAAAA,SAAS,EAAE,MAAM;AACjBC,EAAAA,SAAS,EAAE,IAAA;AACb,EAAC;AAED,IAAMC,cAAc,GAAG;AACrBC,EAAAA,cAAc,EAAE,CAAC;AACjBC,EAAAA,UAAU,EAAE,IAAI;AAChBC,EAAAA,YAAY,EAAE,CAAC;AACfC,EAAAA,eAAe,EAAE,OAAA;AACnB,EAAC;AAED,IAAMC,0BAA0B,GAAG;AACjCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAEA,IAAI,CAAC,EAAE,CAAC;AACdC,IAAAA,WAAW,EAAED,IAAI,CAAC,CAAC,CAAC;AACpBE,IAAAA,eAAe,EAAE,OAAA;GAClB;AACDC,EAAAA,MAAM,EAAE;AACNH,IAAAA,IAAI,EAAEA,IAAI,CAAC,EAAE,CAAC;AACdC,IAAAA,WAAW,EAAED,IAAI,CAAC,CAAC,CAAC;AACpBE,IAAAA,eAAe,EAAE,OAAA;GAClB;AACDE,EAAAA,KAAK,EAAE;AACLJ,IAAAA,IAAI,EAAEA,IAAI,CAAC,EAAE,CAAC;AACdC,IAAAA,WAAW,EAAED,IAAI,CAAC,CAAC,CAAC;AACpBE,IAAAA,eAAe,EAAE,QAAA;AACnB,GAAA;AACF,EAAU;AAEV,IAAMG,4BAA4B,GAAG,SAA/BA,4BAA4BA,CAAAC,IAAA,EAa7B;AAAA,EAAA,IAZHN,IAAI,GAAAM,IAAA,CAAJN,IAAI;IACJO,eAAe,GAAAD,IAAA,CAAfC,eAAe,CAAA;AAYf;AACA,EAAA,IAAMC,MAAM,GAAGV,0BAA0B,CAACE,IAAI,CAAC,CAACA,IAAI,CAAA;AACpD,EAAA,IAAMC,WAAW,GAAGH,0BAA0B,CAACE,IAAI,CAAC,CAACC,WAAW,CAAA;;AAEhE;AACA,EAAA,IAAMQ,MAAM,GAAG,CAACD,MAAM,GAAGP,WAAW,IAAI,CAAC,CAAA;AACzC;EACA,IAAMS,OAAO,UAAAC,MAAA,CAAUH,MAAM,EAAAG,GAAAA,CAAAA,CAAAA,MAAA,CAAIH,MAAM,CAAE,CAAA;AACzC;EACA,IAAMI,SAAS,GAAGH,MAAM,GAAGI,IAAI,CAACC,EAAE,GAAG,CAAC,CAAA;AACtC;EACA,IAAMC,UAAU,GAAGH,SAAS,GAAIA,SAAS,GAAGL,eAAe,GAAI,GAAG,CAAA;EAElE,OAAO;AACLC,IAAAA,MAAM,EAANA,MAAM;AACNP,IAAAA,WAAW,EAAXA,WAAW;AACXQ,IAAAA,MAAM,EAANA,MAAM;AACNC,IAAAA,OAAO,EAAPA,OAAO;AACPE,IAAAA,SAAS,EAATA,SAAS;AACTG,IAAAA,UAAU,EAAVA,UAAAA;GACD,CAAA;AACH;;;;"}

package/build/lib/web/development/tokens/global/size.js CHANGED Viewed

@@ -16,6 +16,8 @@ var size = {
   5: 5,
   /** 6 px */
   6: 6,
+  /** 7 px */
+  7: 7,
   /** 8 px */
   8: 8,
   /** 10 px */
@@ -46,6 +48,8 @@ var size = {
   56: 56,
   /** 64 px */
   64: 64,
+  /** 72 px */
+  72: 72,
   /** 100 px */
   100: 100,
   /** 120 px */

package/build/lib/web/development/tokens/global/size.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"size.js","sources":["../../../../../../src/tokens/global/size.ts"],"sourcesContent":["/*\n Size tokens are currently not exposed for users (therefore not available in theme)\n /\nexport const size = {\n /* 0 px /\n 0: 0,\n /* 1 px /\n 1: 1,\n /* 2 px /\n 2: 2,\n /* 3 px /\n 3: 3,\n /* 4 px /\n 4: 4,\n /* 5 px /\n 5: 5,\n /* 6 px /\n 6: 6,\n /* 8 px /\n 8: 8,\n /* 10 px /\n 10: 10,\n /* 12 px /\n 12: 12,\n /* 16 px /\n 16: 16,\n /* 18 px /\n 18: 18,\n /* 20 px /\n 20: 20,\n /* 24 px /\n 24: 24,\n /* 28 px /\n 28: 28,\n /* 32 px /\n 32: 32,\n /* 36 px /\n 36: 36,\n /* 40 px /\n 40: 40,\n /* 44 px /\n 44: 44,\n /* 48 px /\n 48: 48,\n /* 56 px /\n 56: 56,\n /* 64 px /\n 64: 64,\n /* 100 px /\n 100: 100,\n /* 120 px /\n 120: 120,\n /* 140 px /\n 140: 140,\n /* 160 px /\n 160: 160,\n /* 176 px /\n 176: 176,\n /* 200 px /\n 200: 200,\n /* 240 px /\n 240: 240,\n /* 300 px /\n 300: 300,\n /* 360 px /\n 360: 360,\n /* 400 px /\n 400: 400,\n /* 584 px /\n 584: 584,\n /* 640 px /\n 640: 640,\n /* 760 px /\n 760: 760,\n /* 800 px /\n 800: 800,\n /* 1024 px /\n 1024: 1024,\n /* 1136 px */\n 1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAAA;AACA;AACA;AACO,IAAMA,IAAI,GAAG;AAClB;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,IAAI,EAAE,IAAI;AACV;AACA,EAAA,IAAI,EAAE,IAAA;AACR;;;;"}
1	+ {"version":3,"file":"size.js","sources":["../../../../../../src/tokens/global/size.ts"],"sourcesContent":["/*\n Size tokens are currently not exposed for users (therefore not available in theme)\n /\nexport const size = {\n /* 0 px /\n 0: 0,\n /* 1 px /\n 1: 1,\n /* 2 px /\n 2: 2,\n /* 3 px /\n 3: 3,\n /* 4 px /\n 4: 4,\n /* 5 px /\n 5: 5,\n /* 6 px /\n 6: 6,\n /* 7 px /\n 7: 7,\n /* 8 px /\n 8: 8,\n /* 10 px /\n 10: 10,\n /* 12 px /\n 12: 12,\n /* 16 px /\n 16: 16,\n /* 18 px /\n 18: 18,\n /* 20 px /\n 20: 20,\n /* 24 px /\n 24: 24,\n /* 28 px /\n 28: 28,\n /* 32 px /\n 32: 32,\n /* 36 px /\n 36: 36,\n /* 40 px /\n 40: 40,\n /* 44 px /\n 44: 44,\n /* 48 px /\n 48: 48,\n /* 56 px /\n 56: 56,\n /* 64 px /\n 64: 64,\n /* 72 px /\n 72: 72,\n /* 100 px /\n 100: 100,\n /* 120 px /\n 120: 120,\n /* 140 px /\n 140: 140,\n /* 160 px /\n 160: 160,\n /* 176 px /\n 176: 176,\n /* 200 px /\n 200: 200,\n /* 240 px /\n 240: 240,\n /* 300 px /\n 300: 300,\n /* 360 px /\n 360: 360,\n /* 400 px /\n 400: 400,\n /* 584 px /\n 584: 584,\n /* 640 px /\n 640: 640,\n /* 760 px /\n 760: 760,\n /* 800 px /\n 800: 800,\n /* 1024 px /\n 1024: 1024,\n /* 1136 px */\n 1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAAA;AACA;AACA;AACO,IAAMA,IAAI,GAAG;AAClB;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,IAAI,EAAE,IAAI;AACV;AACA,EAAA,IAAI,EAAE,IAAA;AACR;;;;"}

package/build/lib/web/production/components/Input/PhoneNumberInput/CountrySelector.web.js CHANGED Viewed

@@ -85,7 +85,15 @@ var CountrySelector = function CountrySelector(_ref) {
         variant: "tertiary",
         accessibilityLabel: "".concat(countryNameFormatter.of(selectedCountry), " - Select Country"),
         icon: isDropdownOpen ? ChevronUpIcon : ChevronDownIcon,
-        iconPosition: "right",
+        iconPosition: "right"
+        // We need to prevent the click event from propagating to the BaseInputWrapper,
+        // Because the BaseInputWrapper is listening for click events to focus the input.
+        // We don't want that to happen when the user clicks on the dropdown button
+        // otherwise the dropdown will close immediately after opening
+        ,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+        },
         children: /*#__PURE__*/jsx("img", {
           loading: "lazy",
           role: "presentation",

package/build/lib/web/production/components/Input/PhoneNumberInput/CountrySelector.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CountrySelector.web.js","sources":["../../../../../../../src/components/Input/PhoneNumberInput/CountrySelector.web.tsx"],"sourcesContent":["import type { CountryCodeType, getFlagsForAllCountries } from '@razorpay/i18nify-js';\nimport { getDialCodeByCountryCode, getFlagOfCountry } from '@razorpay/i18nify-js';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n ActionList,\n ActionListItem,\n ActionListItemAsset,\n ActionListItemText,\n} from '~components/ActionList';\nimport { BottomSheet, BottomSheetBody, BottomSheetHeader } from '~components/BottomSheet';\nimport type { DropdownOverlayProps } from '~components/Dropdown';\nimport { Dropdown, DropdownButton, DropdownOverlay } from '~components/Dropdown';\nimport { ChevronDownIcon, ChevronUpIcon } from '~components/Icons';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { size as sizes } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst countryNameFormatter = new Intl.DisplayNames(['en'], { type: 'region' });\n\ntype CountryData = {\n code: CountryCodeType;\n name: string;\n}[];\ntype CounterSelectorProps = {\n selectedCountry: CountryCodeType;\n inputWrapperRef: DropdownOverlayProps['referenceRef'];\n countryData: CountryData;\n onItemClick: (props: { name: string }) => void;\n flags: ReturnType<typeof getFlagsForAllCountries>;\n isDisabled?: boolean;\n size: 'medium' \| 'large';\n};\n\nconst CountryDropdownButtonWrapper = styled(BaseBox)(() => {\n return {\n '& > button': {\n padding: '0',\n width: '100%',\n },\n };\n});\n\nconst CountrySelector = ({\n isDisabled,\n selectedCountry,\n inputWrapperRef,\n countryData,\n onItemClick,\n flags,\n size,\n}: CounterSelectorProps): React.ReactElement => {\n const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);\n const isMobile = useIsMobile();\n\n const actionList = (\n <ActionList>\n {countryData.map((country) => {\n return (\n <ActionListItem\n key={country.code}\n onClick={onItemClick}\n leading={<ActionListItemAsset src={flags[country.code]['4X3']} alt={country.name} />}\n title={country.name}\n value={country.code}\n trailing={\n <ActionListItemText>{getDialCodeByCountryCode(country.code)}</ActionListItemText>\n }\n />\n );\n })}\n </ActionList>\n );\n\n const flagSize = {\n medium: makeSize(sizes[20]),\n large: makeSize(sizes[24]),\n } as const;\n\n return (\n <Dropdown isOpen={isDropdownOpen} onOpenChange={setIsDropdownOpen}>\n {/* TODO: Remove once CountrySelector's button sizing is fixed in figma /}\n <CountryDropdownButtonWrapper\n width={size === 'medium' ? '45px' : '60px'}\n marginLeft={size === 'medium' ? '-3px' : '-2px'}\n >\n <DropdownButton\n isDisabled={isDisabled}\n size={size === 'medium' ? 'xsmall' : 'medium'}\n variant=\"tertiary\"\n accessibilityLabel={`${countryNameFormatter.of(selectedCountry)} - Select Country`}\n icon={isDropdownOpen ? ChevronUpIcon : ChevronDownIcon}\n iconPosition=\"right\"\n >\n {/ @ts-expect-error */}\n <img\n loading=\"lazy\"\n role=\"presentation\"\n width={flagSize[size]}\n src={getFlagOfCountry(selectedCountry)['4X3']}\n alt=\"\"\n />\n </DropdownButton>\n </CountryDropdownButtonWrapper>\n {isMobile ? (\n <BottomSheet>\n <BottomSheetHeader title=\"Select A Country\" />\n <BottomSheetBody>{actionList}</BottomSheetBody>\n </BottomSheet>\n ) : (\n <DropdownOverlay referenceRef={inputWrapperRef}>{actionList}</DropdownOverlay>\n )}\n </Dropdown>\n );\n};\n\nexport { CountrySelector, countryNameFormatter };\n"],"names":["countryNameFormatter","Intl","DisplayNames","type","CountryDropdownButtonWrapper","styled","BaseBox","withConfig","displayName","componentId","padding","width","CountrySelector","_ref","isDisabled","selectedCountry","inputWrapperRef","countryData","onItemClick","flags","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isDropdownOpen","setIsDropdownOpen","isMobile","useIsMobile","actionList","_jsx","ActionList","children","map","country","ActionListItem","onClick","leading","ActionListItemAsset","src","code","alt","name","title","value","trailing","ActionListItemText","getDialCodeByCountryCode","flagSize","medium","makeSize","sizes","large","_jsxs","Dropdown","isOpen","onOpenChange","marginLeft","DropdownButton","variant","accessibilityLabel","concat","of","icon","ChevronUpIcon","ChevronDownIcon","iconPosition","loading","role","getFlagOfCountry","BottomSheet","BottomSheetHeader","BottomSheetBody","DropdownOverlay","referenceRef"],"mappings":"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~~AAAAlC~~,QAAAA,QAAA,~~eAGpBF~~,GAAA,CAAA,KAAA,EAAA;~~AACEqC~~,UAAAA,OAAO,EAAC,MAAM;AACdC,UAAAA,IAAI,EAAC,cAAc;~~AACnB1D~~,UAAAA,KAAK,EAAEsC,QAAQ,CAAC7B,MAAI,CAAE;AACtBoB,UAAAA,GAAG,~~EAAE8B~~,gBAAgB,~~CAACvD~~,eAAe,CAAC,CAAC,KAAK,CAAE;AAC9C2B,UAAAA,GAAG,EAAC,EAAA;SACL,CAAA;OACa,CAAA;AAAC,KACW,CAAC,EAC9Bd,QAAQ,gBACP0B,IAAA,~~CAACiB~~,WAAW,EAAA;~~MAAAtC~~,QAAA,EAAA,cACVF,GAAA,~~CAACyC~~,iBAAiB,EAAA;~~AAAC5B~~,QAAAA,KAAK,EAAC,kBAAA;AAAkB,OAAE,CAAC,eAC9Cb,GAAA,~~CAAC0C~~,eAAe,EAAA;~~AAAAxC~~,QAAAA,QAAA,EAAEH,UAAAA;AAAU,OAAkB,CAAC,CAAA;AAAA,KACpC,CAAC,gBAEdC,GAAA,~~CAAC2C~~,eAAe,EAAA;AAACC,MAAAA,YAAY,~~EAAE3D~~,eAAgB;AAAAiB,MAAAA,QAAA,EAAEH,UAAAA;AAAU,KAAkB,CAC9E,CAAA;AAAA,GACO,CAAC,CAAA;AAEf;;;;"}
1	+ {"version":3,"file":"CountrySelector.web.js","sources":["../../../../../../../src/components/Input/PhoneNumberInput/CountrySelector.web.tsx"],"sourcesContent":["import type { CountryCodeType, getFlagsForAllCountries } from '@razorpay/i18nify-js';\nimport { getDialCodeByCountryCode, getFlagOfCountry } from '@razorpay/i18nify-js';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n ActionList,\n ActionListItem,\n ActionListItemAsset,\n ActionListItemText,\n} from '~components/ActionList';\nimport { BottomSheet, BottomSheetBody, BottomSheetHeader } from '~components/BottomSheet';\nimport type { DropdownOverlayProps } from '~components/Dropdown';\nimport { Dropdown, DropdownButton, DropdownOverlay } from '~components/Dropdown';\nimport { ChevronDownIcon, ChevronUpIcon } from '~components/Icons';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { size as sizes } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst countryNameFormatter = new Intl.DisplayNames(['en'], { type: 'region' });\n\ntype CountryData = {\n code: CountryCodeType;\n name: string;\n}[];\ntype CounterSelectorProps = {\n selectedCountry: CountryCodeType;\n inputWrapperRef: DropdownOverlayProps['referenceRef'];\n countryData: CountryData;\n onItemClick: (props: { name: string }) => void;\n flags: ReturnType<typeof getFlagsForAllCountries>;\n isDisabled?: boolean;\n size: 'medium' \| 'large';\n};\n\nconst CountryDropdownButtonWrapper = styled(BaseBox)(() => {\n return {\n '& > button': {\n padding: '0',\n width: '100%',\n },\n };\n});\n\nconst CountrySelector = ({\n isDisabled,\n selectedCountry,\n inputWrapperRef,\n countryData,\n onItemClick,\n flags,\n size,\n}: CounterSelectorProps): React.ReactElement => {\n const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);\n const isMobile = useIsMobile();\n\n const actionList = (\n <ActionList>\n {countryData.map((country) => {\n return (\n <ActionListItem\n key={country.code}\n onClick={onItemClick}\n leading={<ActionListItemAsset src={flags[country.code]['4X3']} alt={country.name} />}\n title={country.name}\n value={country.code}\n trailing={\n <ActionListItemText>{getDialCodeByCountryCode(country.code)}</ActionListItemText>\n }\n />\n );\n })}\n </ActionList>\n );\n\n const flagSize = {\n medium: makeSize(sizes[20]),\n large: makeSize(sizes[24]),\n } as const;\n\n return (\n <Dropdown isOpen={isDropdownOpen} onOpenChange={setIsDropdownOpen}>\n {/* TODO: Remove once CountrySelector's button sizing is fixed in figma /}\n <CountryDropdownButtonWrapper\n width={size === 'medium' ? '45px' : '60px'}\n marginLeft={size === 'medium' ? '-3px' : '-2px'}\n >\n <DropdownButton\n isDisabled={isDisabled}\n size={size === 'medium' ? 'xsmall' : 'medium'}\n variant=\"tertiary\"\n accessibilityLabel={`${countryNameFormatter.of(selectedCountry)} - Select Country`}\n icon={isDropdownOpen ? ChevronUpIcon : ChevronDownIcon}\n iconPosition=\"right\"\n // We need to prevent the click event from propagating to the BaseInputWrapper,\n // Because the BaseInputWrapper is listening for click events to focus the input.\n // We don't want that to happen when the user clicks on the dropdown button\n // otherwise the dropdown will close immediately after opening\n onClick={(e) => {\n e.stopPropagation();\n }}\n >\n {/ @ts-expect-error */}\n <img\n loading=\"lazy\"\n role=\"presentation\"\n width={flagSize[size]}\n src={getFlagOfCountry(selectedCountry)['4X3']}\n alt=\"\"\n />\n </DropdownButton>\n </CountryDropdownButtonWrapper>\n {isMobile ? (\n <BottomSheet>\n <BottomSheetHeader title=\"Select A Country\" />\n <BottomSheetBody>{actionList}</BottomSheetBody>\n </BottomSheet>\n ) : (\n <DropdownOverlay referenceRef={inputWrapperRef}>{actionList}</DropdownOverlay>\n )}\n </Dropdown>\n );\n};\n\nexport { CountrySelector, countryNameFormatter };\n"],"names":["countryNameFormatter","Intl","DisplayNames","type","CountryDropdownButtonWrapper","styled","BaseBox","withConfig","displayName","componentId","padding","width","CountrySelector","_ref","isDisabled","selectedCountry","inputWrapperRef","countryData","onItemClick","flags","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isDropdownOpen","setIsDropdownOpen","isMobile","useIsMobile","actionList","_jsx","ActionList","children","map","country","ActionListItem","onClick","leading","ActionListItemAsset","src","code","alt","name","title","value","trailing","ActionListItemText","getDialCodeByCountryCode","flagSize","medium","makeSize","sizes","large","_jsxs","Dropdown","isOpen","onOpenChange","marginLeft","DropdownButton","variant","accessibilityLabel","concat","of","icon","ChevronUpIcon","ChevronDownIcon","iconPosition","e","stopPropagation","loading","role","getFlagOfCountry","BottomSheet","BottomSheetHeader","BottomSheetBody","DropdownOverlay","referenceRef"],"mappings":"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"}