@elliemae/ds-circular-progress-indicator 3.21.2 → 3.22.0-next.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.
- package/dist/cjs/index.js +3 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/v2/DSCircularIndeterminateIndicator.js +55 -34
- package/dist/cjs/v2/DSCircularIndeterminateIndicator.js.map +2 -2
- package/dist/cjs/v2/constants.js +14 -0
- package/dist/cjs/v2/constants.js.map +2 -2
- package/dist/cjs/v2/index.js +2 -0
- package/dist/cjs/v2/index.js.map +2 -2
- package/dist/cjs/v2/styled.js +14 -2
- package/dist/cjs/v2/styled.js.map +2 -2
- package/dist/esm/index.js +10 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/v2/DSCircularIndeterminateIndicator.js +64 -37
- package/dist/esm/v2/DSCircularIndeterminateIndicator.js.map +2 -2
- package/dist/esm/v2/constants.js +14 -0
- package/dist/esm/v2/constants.js.map +2 -2
- package/dist/esm/v2/index.js +1 -0
- package/dist/esm/v2/index.js.map +2 -2
- package/dist/esm/v2/styled.js +14 -2
- package/dist/esm/v2/styled.js.map +2 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/types/v2/constants.d.ts +7 -0
- package/dist/types/v2/index.d.ts +1 -0
- package/dist/types/v2/styled.d.ts +2 -1
- package/package.json +7 -7
package/dist/cjs/index.js
CHANGED
|
@@ -30,6 +30,9 @@ var src_exports = {};
|
|
|
30
30
|
__export(src_exports, {
|
|
31
31
|
CircularProgressIndicatorWithSchema: () => import_DSCircularProgressIndicator.CircularProgressIndicatorWithSchema,
|
|
32
32
|
DSCircularIndeterminateIndicator: () => import_v2.DSCircularIndeterminateIndicator,
|
|
33
|
+
DSCircularIndeterminateIndicatorDataTestIds: () => import_v2.DSCircularIndeterminateIndicatorDataTestIds,
|
|
34
|
+
DSCircularIndeterminateIndicatorName: () => import_v2.DSCircularIndeterminateIndicatorName,
|
|
35
|
+
DSCircularIndeterminateIndicatorSlots: () => import_v2.DSCircularIndeterminateIndicatorSlots,
|
|
33
36
|
DSCircularIndeterminateIndicatorWithSchema: () => import_v2.DSCircularIndeterminateIndicatorWithSchema,
|
|
34
37
|
DSCircularProgressIndicator: () => import_DSCircularProgressIndicator.default,
|
|
35
38
|
default: () => import_DSCircularProgressIndicator.default
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable import/named */\nexport {\n default,\n default as DSCircularProgressIndicator,\n CircularProgressIndicatorWithSchema,\n} from './DSCircularProgressIndicator.js';\nexport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,yCAIO;AACP,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/named */\nexport {\n default,\n default as DSCircularProgressIndicator,\n CircularProgressIndicatorWithSchema,\n} from './DSCircularProgressIndicator.js';\nexport {\n DSCircularIndeterminateIndicator,\n DSCircularIndeterminateIndicatorWithSchema,\n DSCircularIndeterminateIndicatorName,\n DSCircularIndeterminateIndicatorSlots,\n DSCircularIndeterminateIndicatorDataTestIds,\n} from './v2/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,yCAIO;AACP,gBAMO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -54,6 +54,8 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
54
54
|
const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : EmptyComp, [withTooltip]);
|
|
55
55
|
const uniqueId = (0, import_react.useMemo)(() => (0, import_uid.uid)(16), []);
|
|
56
56
|
const circleRadius = (0, import_react.useMemo)(() => (import_constants.sizeToPx[size] - Number.parseInt(import_constants.sizeToWeight[size], 10)) / 2, [size]);
|
|
57
|
+
const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefault, [propsWithDefault]);
|
|
58
|
+
const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({}), []);
|
|
57
59
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
58
60
|
import_styled.StyledContainer,
|
|
59
61
|
{
|
|
@@ -64,48 +66,67 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
64
66
|
"data-testid": "ds-circular-indeterminate-indicator-root",
|
|
65
67
|
...globalAttributes,
|
|
66
68
|
...xstyledAttributes,
|
|
69
|
+
getOwnerProps,
|
|
70
|
+
getOwnerPropsArguments,
|
|
67
71
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
|
|
68
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
72
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
73
|
+
import_styled.StyledSvg,
|
|
74
|
+
{
|
|
75
|
+
width: import_constants.sizeToPx[size],
|
|
76
|
+
height: import_constants.sizeToPx[size],
|
|
77
|
+
getOwnerProps,
|
|
78
|
+
getOwnerPropsArguments,
|
|
79
|
+
children: [
|
|
80
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
|
|
81
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: `not-gradient-clip-${uniqueId}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRect, { x: "0%", y: "0%", width: "52%", height: "100%" }) }),
|
|
82
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `gradient-color-${uniqueId}`, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
|
|
83
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "10%", stopColor: `${import_constants.colorToHex[color]}00` }),
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "90%", stopColor: `${import_constants.colorToHex[color]}FF` })
|
|
85
|
+
] })
|
|
86
|
+
] }),
|
|
87
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
88
|
+
import_styled.StyledCircle,
|
|
89
|
+
{
|
|
90
|
+
cx: "50%",
|
|
91
|
+
cy: "50%",
|
|
92
|
+
r: circleRadius,
|
|
93
|
+
strokeWidth: import_constants.sizeToWeight[size],
|
|
94
|
+
stroke: import_constants.colorToHex[color],
|
|
95
|
+
strokeLinecap: "round",
|
|
96
|
+
clipPath: `url(#not-gradient-clip-${uniqueId})`
|
|
97
|
+
}
|
|
98
|
+
),
|
|
99
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
100
|
+
import_styled.StyledPath,
|
|
101
|
+
{
|
|
102
|
+
d: `M ${import_constants.sizeToPx[size] / 2} ${import_constants.sizeToPx[size] / 2}
|
|
92
103
|
m ${circleRadius}, 0
|
|
93
104
|
a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`,
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
105
|
+
strokeWidth: import_constants.sizeToWeight[size],
|
|
106
|
+
fill: "transparent",
|
|
107
|
+
stroke: `url(#gradient-color-${uniqueId})`,
|
|
108
|
+
strokeLinecap: "round",
|
|
109
|
+
r: circleRadius
|
|
110
|
+
}
|
|
111
|
+
)
|
|
112
|
+
]
|
|
113
|
+
}
|
|
114
|
+
),
|
|
115
|
+
text !== "" && showText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
116
|
+
import_styled.StyledLabel,
|
|
117
|
+
{
|
|
118
|
+
style: { color: color === "light" ? "#FFFFFF" : "#353C46", fontSize: import_constants.sizeToTextSize[size] },
|
|
119
|
+
getOwnerProps,
|
|
120
|
+
getOwnerPropsArguments,
|
|
121
|
+
children: text
|
|
122
|
+
}
|
|
123
|
+
)
|
|
103
124
|
] })
|
|
104
125
|
}
|
|
105
126
|
);
|
|
106
127
|
};
|
|
107
128
|
DSCircularIndeterminateIndicator.propTypes = import_react_desc_prop_types.CircularIndeterminateIndicatorPropTypes;
|
|
108
|
-
DSCircularIndeterminateIndicator.displayName =
|
|
129
|
+
DSCircularIndeterminateIndicator.displayName = import_constants.DSCircularIndeterminateIndicatorName;
|
|
109
130
|
const DSCircularIndeterminateIndicatorWithSchema = (0, import_ds_props_helpers.describe)(DSCircularIndeterminateIndicator);
|
|
110
131
|
DSCircularIndeterminateIndicatorWithSchema.propTypes = import_react_desc_prop_types.CircularIndeterminateIndicatorPropTypes;
|
|
111
132
|
//# sourceMappingURL=DSCircularIndeterminateIndicator.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/DSCircularIndeterminateIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { omit } from 'lodash';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nimport {\n describe,\n useGetGlobalAttributes,\n useMemoMergePropsWithDefault,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nimport {\n describe,\n useGetGlobalAttributes,\n useMemoMergePropsWithDefault,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport {\n colorToHex,\n sizeToPx,\n sizeToTextSize,\n sizeToWeight,\n DSCircularIndeterminateIndicatorName,\n} from './constants.js';\nimport { StyledCircle, StyledContainer, StyledPath, StyledRect, StyledSvg, StyledLabel } from './styled.js';\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n props,\n) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSCircularIndeterminateIndicatorT.InternalProps>(\n props,\n defaultProps,\n );\n const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), ['height', 'width', 'rows', 'cols', 'wrap']);\n const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n\n const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;\n\n const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n const uniqueId = useMemo(() => uid(16), []);\n\n const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n return (\n <StyledContainer\n gutter=\"xs\"\n justifyContent=\"center\"\n role=\"status\"\n aria-label={text || 'Loading...'}\n data-testid=\"ds-circular-indeterminate-indicator-root\"\n {...globalAttributes}\n {...xstyledAttributes}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <StyledSvg\n width={sizeToPx[size]}\n height={sizeToPx[size]}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <defs>\n <clipPath id={`not-gradient-clip-${uniqueId}`}>\n <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" />\n </clipPath>\n <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n </linearGradient>\n </defs>\n <StyledCircle\n cx=\"50%\"\n cy=\"50%\"\n r={circleRadius}\n strokeWidth={sizeToWeight[size]}\n stroke={colorToHex[color]}\n strokeLinecap=\"round\"\n clipPath={`url(#not-gradient-clip-${uniqueId})`}\n />\n {/* \n Here we are using a path because:\n - Flexible enough to build a circle\n - When rotating, the gradient follows the rotation!!! (This is key)\n - We can use the rotation with keyframes, allowing for custom timing\n \n Using a circle does not pass point 2.\n Animating the gradient is not posible with custom timings.\n This is the best solution without using a custom library.\n */}\n <StyledPath\n d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n m ${circleRadius}, 0\n a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n strokeWidth={sizeToWeight[size]}\n fill=\"transparent\"\n stroke={`url(#gradient-color-${uniqueId})`}\n strokeLinecap=\"round\"\n r={circleRadius}\n />\n </StyledSvg>\n {text !== '' && showText && (\n <StyledLabel\n style={{ color: color === 'light' ? '#FFFFFF' : '#353C46', fontSize: sizeToTextSize[size] }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {text}\n </StyledLabel>\n )}\n </Wrapper>\n </StyledContainer>\n );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = DSCircularIndeterminateIndicatorName;\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/v2/constants.js
CHANGED
|
@@ -28,6 +28,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var constants_exports = {};
|
|
30
30
|
__export(constants_exports, {
|
|
31
|
+
DSCircularIndeterminateIndicatorDataTestIds: () => DSCircularIndeterminateIndicatorDataTestIds,
|
|
32
|
+
DSCircularIndeterminateIndicatorName: () => DSCircularIndeterminateIndicatorName,
|
|
33
|
+
DSCircularIndeterminateIndicatorSlots: () => DSCircularIndeterminateIndicatorSlots,
|
|
31
34
|
colorToHex: () => colorToHex,
|
|
32
35
|
sizeToPx: () => sizeToPx,
|
|
33
36
|
sizeToTextSize: () => sizeToTextSize,
|
|
@@ -35,6 +38,13 @@ __export(constants_exports, {
|
|
|
35
38
|
});
|
|
36
39
|
module.exports = __toCommonJS(constants_exports);
|
|
37
40
|
var React = __toESM(require("react"));
|
|
41
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
42
|
+
const DSCircularIndeterminateIndicatorName = "DSCircularIndeterminateIndicator";
|
|
43
|
+
const DSCircularIndeterminateIndicatorSlots = {
|
|
44
|
+
ROOT: "root",
|
|
45
|
+
SVG: "svg",
|
|
46
|
+
LABEL: "label"
|
|
47
|
+
};
|
|
38
48
|
const sizeToPx = {
|
|
39
49
|
xs: 16,
|
|
40
50
|
s: 24,
|
|
@@ -63,4 +73,8 @@ const sizeToTextSize = {
|
|
|
63
73
|
xl: "14px",
|
|
64
74
|
xxl: "16px"
|
|
65
75
|
};
|
|
76
|
+
const DSCircularIndeterminateIndicatorDataTestIds = (0, import_ds_system.slotObjectToDataTestIds)(
|
|
77
|
+
DSCircularIndeterminateIndicatorName,
|
|
78
|
+
DSCircularIndeterminateIndicatorSlots
|
|
79
|
+
);
|
|
66
80
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/constants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCircularIndeterminateIndicatorName = 'DSCircularIndeterminateIndicator';\n\nexport const DSCircularIndeterminateIndicatorSlots = {\n ROOT: 'root',\n SVG: 'svg',\n LABEL: 'label',\n};\n\nexport const sizeToPx = {\n xs: 16,\n s: 24,\n m: 32,\n l: 48,\n xl: 56,\n xxl: 64,\n};\n\nexport const sizeToWeight = {\n xs: '3px',\n s: '3px',\n m: '3px',\n l: '4px',\n xl: '5px',\n xxl: '6px',\n};\n\nexport const colorToHex = {\n light: '#EBF6FF',\n dark: '#1394E5',\n};\n\nexport const sizeToTextSize = {\n xs: '12px',\n s: '12px',\n m: '12px',\n l: '13px',\n xl: '14px',\n xxl: '16px',\n};\n\nexport const DSCircularIndeterminateIndicatorDataTestIds = slotObjectToDataTestIds(\n DSCircularIndeterminateIndicatorName,\n DSCircularIndeterminateIndicatorSlots,\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,uCAAuC;AAE7C,MAAM,wCAAwC;AAAA,EACnD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AACT;AAEO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,kDAA8C;AAAA,EACzD;AAAA,EACA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/v2/index.js
CHANGED
|
@@ -17,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
20
21
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
22
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
23
|
// file that has been converted to a CommonJS file using a Babel-
|
|
@@ -34,4 +35,5 @@ __export(v2_exports, {
|
|
|
34
35
|
module.exports = __toCommonJS(v2_exports);
|
|
35
36
|
var React = __toESM(require("react"));
|
|
36
37
|
var import_DSCircularIndeterminateIndicator = require("./DSCircularIndeterminateIndicator.js");
|
|
38
|
+
__reExport(v2_exports, require("./constants.js"), module.exports);
|
|
37
39
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/v2/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export {\n DSCircularIndeterminateIndicator,\n DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export {\n DSCircularIndeterminateIndicator,\n DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator.js';\nexport * from './constants.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8CAGO;AACP,uBAAc,2BAJd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/v2/styled.js
CHANGED
|
@@ -30,6 +30,7 @@ var styled_exports = {};
|
|
|
30
30
|
__export(styled_exports, {
|
|
31
31
|
StyledCircle: () => StyledCircle,
|
|
32
32
|
StyledContainer: () => StyledContainer,
|
|
33
|
+
StyledLabel: () => StyledLabel,
|
|
33
34
|
StyledPath: () => StyledPath,
|
|
34
35
|
StyledRect: () => StyledRect,
|
|
35
36
|
StyledSvg: () => StyledSvg
|
|
@@ -38,6 +39,7 @@ module.exports = __toCommonJS(styled_exports);
|
|
|
38
39
|
var React = __toESM(require("react"));
|
|
39
40
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
40
41
|
var import_ds_system = require("@elliemae/ds-system");
|
|
42
|
+
var import_constants = require("./constants.js");
|
|
41
43
|
const { PI } = Math;
|
|
42
44
|
const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
|
|
43
45
|
const svgRotateAnimation = import_ds_system.kfrm`
|
|
@@ -122,10 +124,16 @@ const dashAnimation = (r) => {
|
|
|
122
124
|
}
|
|
123
125
|
`;
|
|
124
126
|
};
|
|
125
|
-
const StyledContainer = (0, import_ds_system.styled)(import_ds_grid.Grid
|
|
127
|
+
const StyledContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
128
|
+
name: import_constants.DSCircularIndeterminateIndicatorName,
|
|
129
|
+
slot: import_constants.DSCircularIndeterminateIndicatorSlots.ROOT
|
|
130
|
+
})`
|
|
126
131
|
z-index: ${({ theme }) => theme.zIndex.loader};
|
|
127
132
|
`;
|
|
128
|
-
const StyledSvg = import_ds_system.styled
|
|
133
|
+
const StyledSvg = (0, import_ds_system.styled)("svg", {
|
|
134
|
+
name: import_constants.DSCircularIndeterminateIndicatorName,
|
|
135
|
+
slot: import_constants.DSCircularIndeterminateIndicatorSlots.SVG
|
|
136
|
+
})`
|
|
129
137
|
display: block;
|
|
130
138
|
margin: auto;
|
|
131
139
|
transform-origin: center center;
|
|
@@ -147,4 +155,8 @@ const StyledCircle = import_ds_system.styled.circle`
|
|
|
147
155
|
clip-path: ${(props) => props.clipPath};
|
|
148
156
|
-webkit-clip-path: ${(props) => props.clipPath};
|
|
149
157
|
`;
|
|
158
|
+
const StyledLabel = (0, import_ds_system.styled)("span", {
|
|
159
|
+
name: import_constants.DSCircularIndeterminateIndicatorName,
|
|
160
|
+
slot: import_constants.DSCircularIndeterminateIndicatorSlots.LABEL
|
|
161
|
+
})``;
|
|
150
162
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport { Grid } from '@elliemae/ds-grid';\nimport { kfrm, styled } from '@elliemae/ds-system';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,qBAAqB;AACrB,uBAA6B;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport { Grid } from '@elliemae/ds-grid';\nimport { kfrm, styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicatorName, DSCircularIndeterminateIndicatorSlots } from './constants.js';\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst svgRotateAnimation = kfrm`\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nconst strokeTailAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n }\n 50% {\n stroke-dasharray: ${fullDash};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n }\n`;\n};\n\nconst rotateAnimation = kfrm`\n 0%, 12.5% {\n transform: rotate(0);\n }\n 25%, 37.5% {\n transform: rotate(270deg);\n }\n 50%, 62.5% {\n transform: rotate(540deg);\n }\n 75%, 87.5% {\n transform: rotate(810deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n`;\n\nconst dashAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: 0;\n }\n 12.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: 0;\n }\n 25% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 37.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 50% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 62.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 75% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 87.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-300, r)};\n }\n`;\n};\n\nexport const StyledContainer = styled(Grid, {\n name: DSCircularIndeterminateIndicatorName,\n slot: DSCircularIndeterminateIndicatorSlots.ROOT,\n})`\n z-index: ${({ theme }) => theme.zIndex.loader};\n`;\n\nexport const StyledSvg = styled('svg', {\n name: DSCircularIndeterminateIndicatorName,\n slot: DSCircularIndeterminateIndicatorSlots.SVG,\n})`\n display: block;\n margin: auto;\n transform-origin: center center;\n transform: rotate(-90deg);\n animation: ${svgRotateAnimation} 2.5s linear infinite;\n`;\n\nexport const StyledPath = styled.path<{ r: number }>`\n transform-origin: center center;\n animation: ${rotateAnimation} 10s linear infinite, ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;\n`;\n\nexport const StyledRect = styled.rect`\n transform-origin: center center;\n animation: ${rotateAnimation} 10s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number }>`\n stroke-dashoffset: 0;\n fill: none;\n animation: ${(props) => dashAnimation(props.r)} 10s linear infinite;\n clip-path: ${(props) => props.clipPath};\n -webkit-clip-path: ${(props) => props.clipPath};\n`;\n\nexport const StyledLabel = styled('span', {\n name: DSCircularIndeterminateIndicatorName,\n slot: DSCircularIndeterminateIndicatorSlots.LABEL,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,qBAAqB;AACrB,uBAA6B;AAC7B,uBAA4F;AAC5F,MAAM,EAAE,GAAG,IAAI;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAG5B;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAGjD;AAEO,MAAM,sBAAkB,yBAAO,qBAAM;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;AAAA,aACY,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO;AAAA;AAGlC,MAAM,gBAAY,yBAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKc;AAAA;AAGR,MAAM,aAAa,wBAAO;AAAA;AAAA,eAElB,wCAAwC,CAAC,UAAU,oBAAoB,MAAM,CAAC;AAAA;AAGtF,MAAM,aAAa,wBAAO;AAAA;AAAA,eAElB;AAAA;AAGR,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC;AAAA,eAChC,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;AAGjC,MAAM,kBAAc,yBAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -4,10 +4,19 @@ import {
|
|
|
4
4
|
default as default3,
|
|
5
5
|
CircularProgressIndicatorWithSchema
|
|
6
6
|
} from "./DSCircularProgressIndicator.js";
|
|
7
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
DSCircularIndeterminateIndicator,
|
|
9
|
+
DSCircularIndeterminateIndicatorWithSchema,
|
|
10
|
+
DSCircularIndeterminateIndicatorName,
|
|
11
|
+
DSCircularIndeterminateIndicatorSlots,
|
|
12
|
+
DSCircularIndeterminateIndicatorDataTestIds
|
|
13
|
+
} from "./v2/index.js";
|
|
8
14
|
export {
|
|
9
15
|
CircularProgressIndicatorWithSchema,
|
|
10
16
|
DSCircularIndeterminateIndicator,
|
|
17
|
+
DSCircularIndeterminateIndicatorDataTestIds,
|
|
18
|
+
DSCircularIndeterminateIndicatorName,
|
|
19
|
+
DSCircularIndeterminateIndicatorSlots,
|
|
11
20
|
DSCircularIndeterminateIndicatorWithSchema,
|
|
12
21
|
default3 as DSCircularProgressIndicator,
|
|
13
22
|
default2 as default
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/named */\nexport {\n default,\n default as DSCircularProgressIndicator,\n CircularProgressIndicatorWithSchema,\n} from './DSCircularProgressIndicator.js';\nexport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE,WAAAA;AAAA,EACW,WAAXA;AAAA,EACA;AAAA,OACK;AACP,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/named */\nexport {\n default,\n default as DSCircularProgressIndicator,\n CircularProgressIndicatorWithSchema,\n} from './DSCircularProgressIndicator.js';\nexport {\n DSCircularIndeterminateIndicator,\n DSCircularIndeterminateIndicatorWithSchema,\n DSCircularIndeterminateIndicatorName,\n DSCircularIndeterminateIndicatorSlots,\n DSCircularIndeterminateIndicatorDataTestIds,\n} from './v2/index.js';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE,WAAAA;AAAA,EACW,WAAXA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
|
|
6
6
|
"names": ["default"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useMemo } from "react";
|
|
3
|
+
import { useMemo, useCallback } from "react";
|
|
4
4
|
import { omit } from "lodash";
|
|
5
5
|
import { DSTooltipV3 } from "@elliemae/ds-tooltip";
|
|
6
6
|
import {
|
|
@@ -11,8 +11,14 @@ import {
|
|
|
11
11
|
} from "@elliemae/ds-props-helpers";
|
|
12
12
|
import { uid } from "uid";
|
|
13
13
|
import { CircularIndeterminateIndicatorPropTypes, defaultProps } from "./react-desc-prop-types.js";
|
|
14
|
-
import {
|
|
15
|
-
|
|
14
|
+
import {
|
|
15
|
+
colorToHex,
|
|
16
|
+
sizeToPx,
|
|
17
|
+
sizeToTextSize,
|
|
18
|
+
sizeToWeight,
|
|
19
|
+
DSCircularIndeterminateIndicatorName
|
|
20
|
+
} from "./constants.js";
|
|
21
|
+
import { StyledCircle, StyledContainer, StyledPath, StyledRect, StyledSvg, StyledLabel } from "./styled.js";
|
|
16
22
|
const EmptyComp = (props) => /* @__PURE__ */ jsx(Fragment, { children: props.children });
|
|
17
23
|
const DSCircularIndeterminateIndicator = (props) => {
|
|
18
24
|
const propsWithDefault = useMemoMergePropsWithDefault(
|
|
@@ -25,6 +31,8 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
25
31
|
const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
|
|
26
32
|
const uniqueId = useMemo(() => uid(16), []);
|
|
27
33
|
const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);
|
|
34
|
+
const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);
|
|
35
|
+
const getOwnerPropsArguments = useCallback(() => ({}), []);
|
|
28
36
|
return /* @__PURE__ */ jsx(
|
|
29
37
|
StyledContainer,
|
|
30
38
|
{
|
|
@@ -35,48 +43,67 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
35
43
|
"data-testid": "ds-circular-indeterminate-indicator-root",
|
|
36
44
|
...globalAttributes,
|
|
37
45
|
...xstyledAttributes,
|
|
46
|
+
getOwnerProps,
|
|
47
|
+
getOwnerPropsArguments,
|
|
38
48
|
children: /* @__PURE__ */ jsxs(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
|
|
39
|
-
/* @__PURE__ */ jsxs(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
49
|
+
/* @__PURE__ */ jsxs(
|
|
50
|
+
StyledSvg,
|
|
51
|
+
{
|
|
52
|
+
width: sizeToPx[size],
|
|
53
|
+
height: sizeToPx[size],
|
|
54
|
+
getOwnerProps,
|
|
55
|
+
getOwnerPropsArguments,
|
|
56
|
+
children: [
|
|
57
|
+
/* @__PURE__ */ jsxs("defs", { children: [
|
|
58
|
+
/* @__PURE__ */ jsx("clipPath", { id: `not-gradient-clip-${uniqueId}`, children: /* @__PURE__ */ jsx(StyledRect, { x: "0%", y: "0%", width: "52%", height: "100%" }) }),
|
|
59
|
+
/* @__PURE__ */ jsxs("linearGradient", { id: `gradient-color-${uniqueId}`, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
|
|
60
|
+
/* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: `${colorToHex[color]}00` }),
|
|
61
|
+
/* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: `${colorToHex[color]}FF` })
|
|
62
|
+
] })
|
|
63
|
+
] }),
|
|
64
|
+
/* @__PURE__ */ jsx(
|
|
65
|
+
StyledCircle,
|
|
66
|
+
{
|
|
67
|
+
cx: "50%",
|
|
68
|
+
cy: "50%",
|
|
69
|
+
r: circleRadius,
|
|
70
|
+
strokeWidth: sizeToWeight[size],
|
|
71
|
+
stroke: colorToHex[color],
|
|
72
|
+
strokeLinecap: "round",
|
|
73
|
+
clipPath: `url(#not-gradient-clip-${uniqueId})`
|
|
74
|
+
}
|
|
75
|
+
),
|
|
76
|
+
/* @__PURE__ */ jsx(
|
|
77
|
+
StyledPath,
|
|
78
|
+
{
|
|
79
|
+
d: `M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}
|
|
63
80
|
m ${circleRadius}, 0
|
|
64
81
|
a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`,
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
82
|
+
strokeWidth: sizeToWeight[size],
|
|
83
|
+
fill: "transparent",
|
|
84
|
+
stroke: `url(#gradient-color-${uniqueId})`,
|
|
85
|
+
strokeLinecap: "round",
|
|
86
|
+
r: circleRadius
|
|
87
|
+
}
|
|
88
|
+
)
|
|
89
|
+
]
|
|
90
|
+
}
|
|
91
|
+
),
|
|
92
|
+
text !== "" && showText && /* @__PURE__ */ jsx(
|
|
93
|
+
StyledLabel,
|
|
94
|
+
{
|
|
95
|
+
style: { color: color === "light" ? "#FFFFFF" : "#353C46", fontSize: sizeToTextSize[size] },
|
|
96
|
+
getOwnerProps,
|
|
97
|
+
getOwnerPropsArguments,
|
|
98
|
+
children: text
|
|
99
|
+
}
|
|
100
|
+
)
|
|
74
101
|
] })
|
|
75
102
|
}
|
|
76
103
|
);
|
|
77
104
|
};
|
|
78
105
|
DSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;
|
|
79
|
-
DSCircularIndeterminateIndicator.displayName =
|
|
106
|
+
DSCircularIndeterminateIndicator.displayName = DSCircularIndeterminateIndicatorName;
|
|
80
107
|
const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);
|
|
81
108
|
DSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;
|
|
82
109
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { omit } from 'lodash';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nimport {\n describe,\n useGetGlobalAttributes,\n useMemoMergePropsWithDefault,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nimport {\n describe,\n useGetGlobalAttributes,\n useMemoMergePropsWithDefault,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport {\n colorToHex,\n sizeToPx,\n sizeToTextSize,\n sizeToWeight,\n DSCircularIndeterminateIndicatorName,\n} from './constants.js';\nimport { StyledCircle, StyledContainer, StyledPath, StyledRect, StyledSvg, StyledLabel } from './styled.js';\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n props,\n) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSCircularIndeterminateIndicatorT.InternalProps>(\n props,\n defaultProps,\n );\n const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), ['height', 'width', 'rows', 'cols', 'wrap']);\n const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n\n const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;\n\n const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n const uniqueId = useMemo(() => uid(16), []);\n\n const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n return (\n <StyledContainer\n gutter=\"xs\"\n justifyContent=\"center\"\n role=\"status\"\n aria-label={text || 'Loading...'}\n data-testid=\"ds-circular-indeterminate-indicator-root\"\n {...globalAttributes}\n {...xstyledAttributes}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <StyledSvg\n width={sizeToPx[size]}\n height={sizeToPx[size]}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <defs>\n <clipPath id={`not-gradient-clip-${uniqueId}`}>\n <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" />\n </clipPath>\n <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n </linearGradient>\n </defs>\n <StyledCircle\n cx=\"50%\"\n cy=\"50%\"\n r={circleRadius}\n strokeWidth={sizeToWeight[size]}\n stroke={colorToHex[color]}\n strokeLinecap=\"round\"\n clipPath={`url(#not-gradient-clip-${uniqueId})`}\n />\n {/* \n Here we are using a path because:\n - Flexible enough to build a circle\n - When rotating, the gradient follows the rotation!!! (This is key)\n - We can use the rotation with keyframes, allowing for custom timing\n \n Using a circle does not pass point 2.\n Animating the gradient is not posible with custom timings.\n This is the best solution without using a custom library.\n */}\n <StyledPath\n d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n m ${circleRadius}, 0\n a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n strokeWidth={sizeToWeight[size]}\n fill=\"transparent\"\n stroke={`url(#gradient-color-${uniqueId})`}\n strokeLinecap=\"round\"\n r={circleRadius}\n />\n </StyledSvg>\n {text !== '' && showText && (\n <StyledLabel\n style={{ color: color === 'light' ? '#FFFFFF' : '#353C46', fontSize: sizeToTextSize[size] }}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {text}\n </StyledLabel>\n )}\n </Wrapper>\n </StyledContainer>\n );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = DSCircularIndeterminateIndicatorName;\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v2/constants.js
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
3
|
+
const DSCircularIndeterminateIndicatorName = "DSCircularIndeterminateIndicator";
|
|
4
|
+
const DSCircularIndeterminateIndicatorSlots = {
|
|
5
|
+
ROOT: "root",
|
|
6
|
+
SVG: "svg",
|
|
7
|
+
LABEL: "label"
|
|
8
|
+
};
|
|
2
9
|
const sizeToPx = {
|
|
3
10
|
xs: 16,
|
|
4
11
|
s: 24,
|
|
@@ -27,7 +34,14 @@ const sizeToTextSize = {
|
|
|
27
34
|
xl: "14px",
|
|
28
35
|
xxl: "16px"
|
|
29
36
|
};
|
|
37
|
+
const DSCircularIndeterminateIndicatorDataTestIds = slotObjectToDataTestIds(
|
|
38
|
+
DSCircularIndeterminateIndicatorName,
|
|
39
|
+
DSCircularIndeterminateIndicatorSlots
|
|
40
|
+
);
|
|
30
41
|
export {
|
|
42
|
+
DSCircularIndeterminateIndicatorDataTestIds,
|
|
43
|
+
DSCircularIndeterminateIndicatorName,
|
|
44
|
+
DSCircularIndeterminateIndicatorSlots,
|
|
31
45
|
colorToHex,
|
|
32
46
|
sizeToPx,
|
|
33
47
|
sizeToTextSize,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/constants.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCircularIndeterminateIndicatorName = 'DSCircularIndeterminateIndicator';\n\nexport const DSCircularIndeterminateIndicatorSlots = {\n ROOT: 'root',\n SVG: 'svg',\n LABEL: 'label',\n};\n\nexport const sizeToPx = {\n xs: 16,\n s: 24,\n m: 32,\n l: 48,\n xl: 56,\n xxl: 64,\n};\n\nexport const sizeToWeight = {\n xs: '3px',\n s: '3px',\n m: '3px',\n l: '4px',\n xl: '5px',\n xxl: '6px',\n};\n\nexport const colorToHex = {\n light: '#EBF6FF',\n dark: '#1394E5',\n};\n\nexport const sizeToTextSize = {\n xs: '12px',\n s: '12px',\n m: '12px',\n l: '13px',\n xl: '14px',\n xxl: '16px',\n};\n\nexport const DSCircularIndeterminateIndicatorDataTestIds = slotObjectToDataTestIds(\n DSCircularIndeterminateIndicatorName,\n DSCircularIndeterminateIndicatorSlots,\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,uCAAuC;AAE7C,MAAM,wCAAwC;AAAA,EACnD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AACT;AAEO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,8CAA8C;AAAA,EACzD;AAAA,EACA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v2/index.js
CHANGED
package/dist/esm/v2/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export {\n DSCircularIndeterminateIndicator,\n DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator.js';\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export {\n DSCircularIndeterminateIndicator,\n DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator.js';\nexport * from './constants.js';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v2/styled.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Grid } from "@elliemae/ds-grid";
|
|
3
3
|
import { kfrm, styled } from "@elliemae/ds-system";
|
|
4
|
+
import { DSCircularIndeterminateIndicatorName, DSCircularIndeterminateIndicatorSlots } from "./constants.js";
|
|
4
5
|
const { PI } = Math;
|
|
5
6
|
const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
|
|
6
7
|
const svgRotateAnimation = kfrm`
|
|
@@ -85,10 +86,16 @@ const dashAnimation = (r) => {
|
|
|
85
86
|
}
|
|
86
87
|
`;
|
|
87
88
|
};
|
|
88
|
-
const StyledContainer = styled(Grid
|
|
89
|
+
const StyledContainer = styled(Grid, {
|
|
90
|
+
name: DSCircularIndeterminateIndicatorName,
|
|
91
|
+
slot: DSCircularIndeterminateIndicatorSlots.ROOT
|
|
92
|
+
})`
|
|
89
93
|
z-index: ${({ theme }) => theme.zIndex.loader};
|
|
90
94
|
`;
|
|
91
|
-
const StyledSvg = styled
|
|
95
|
+
const StyledSvg = styled("svg", {
|
|
96
|
+
name: DSCircularIndeterminateIndicatorName,
|
|
97
|
+
slot: DSCircularIndeterminateIndicatorSlots.SVG
|
|
98
|
+
})`
|
|
92
99
|
display: block;
|
|
93
100
|
margin: auto;
|
|
94
101
|
transform-origin: center center;
|
|
@@ -110,9 +117,14 @@ const StyledCircle = styled.circle`
|
|
|
110
117
|
clip-path: ${(props) => props.clipPath};
|
|
111
118
|
-webkit-clip-path: ${(props) => props.clipPath};
|
|
112
119
|
`;
|
|
120
|
+
const StyledLabel = styled("span", {
|
|
121
|
+
name: DSCircularIndeterminateIndicatorName,
|
|
122
|
+
slot: DSCircularIndeterminateIndicatorSlots.LABEL
|
|
123
|
+
})``;
|
|
113
124
|
export {
|
|
114
125
|
StyledCircle,
|
|
115
126
|
StyledContainer,
|
|
127
|
+
StyledLabel,
|
|
116
128
|
StyledPath,
|
|
117
129
|
StyledRect,
|
|
118
130
|
StyledSvg
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport { Grid } from '@elliemae/ds-grid';\nimport { kfrm, styled } from '@elliemae/ds-system';\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,YAAY;AACrB,SAAS,MAAM,cAAc;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport { Grid } from '@elliemae/ds-grid';\nimport { kfrm, styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicatorName, DSCircularIndeterminateIndicatorSlots } from './constants.js';\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst svgRotateAnimation = kfrm`\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nconst strokeTailAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n }\n 50% {\n stroke-dasharray: ${fullDash};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n }\n`;\n};\n\nconst rotateAnimation = kfrm`\n 0%, 12.5% {\n transform: rotate(0);\n }\n 25%, 37.5% {\n transform: rotate(270deg);\n }\n 50%, 62.5% {\n transform: rotate(540deg);\n }\n 75%, 87.5% {\n transform: rotate(810deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n`;\n\nconst dashAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: 0;\n }\n 12.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: 0;\n }\n 25% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 37.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 50% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 62.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 75% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 87.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-300, r)};\n }\n`;\n};\n\nexport const StyledContainer = styled(Grid, {\n name: DSCircularIndeterminateIndicatorName,\n slot: DSCircularIndeterminateIndicatorSlots.ROOT,\n})`\n z-index: ${({ theme }) => theme.zIndex.loader};\n`;\n\nexport const StyledSvg = styled('svg', {\n name: DSCircularIndeterminateIndicatorName,\n slot: DSCircularIndeterminateIndicatorSlots.SVG,\n})`\n display: block;\n margin: auto;\n transform-origin: center center;\n transform: rotate(-90deg);\n animation: ${svgRotateAnimation} 2.5s linear infinite;\n`;\n\nexport const StyledPath = styled.path<{ r: number }>`\n transform-origin: center center;\n animation: ${rotateAnimation} 10s linear infinite, ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;\n`;\n\nexport const StyledRect = styled.rect`\n transform-origin: center center;\n animation: ${rotateAnimation} 10s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number }>`\n stroke-dashoffset: 0;\n fill: none;\n animation: ${(props) => dashAnimation(props.r)} 10s linear infinite;\n clip-path: ${(props) => props.clipPath};\n -webkit-clip-path: ${(props) => props.clipPath};\n`;\n\nexport const StyledLabel = styled('span', {\n name: DSCircularIndeterminateIndicatorName,\n slot: DSCircularIndeterminateIndicatorSlots.LABEL,\n})``;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,YAAY;AACrB,SAAS,MAAM,cAAc;AAC7B,SAAS,sCAAsC,6CAA6C;AAC5F,MAAM,EAAE,GAAG,IAAI;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAG5B;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAGjD;AAEO,MAAM,kBAAkB,OAAO,MAAM;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;AAAA,aACY,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO;AAAA;AAGlC,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKc;AAAA;AAGR,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB,wCAAwC,CAAC,UAAU,oBAAoB,MAAM,CAAC;AAAA;AAGtF,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB;AAAA;AAGR,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC;AAAA,eAChC,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;AAGjC,MAAM,cAAc,OAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default, default as DSCircularProgressIndicator, CircularProgressIndicatorWithSchema, } from './DSCircularProgressIndicator.js';
|
|
2
|
-
export { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from './v2/index.js';
|
|
2
|
+
export { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema, DSCircularIndeterminateIndicatorName, DSCircularIndeterminateIndicatorSlots, DSCircularIndeterminateIndicatorDataTestIds, } from './v2/index.js';
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
export declare const DSCircularIndeterminateIndicatorName = "DSCircularIndeterminateIndicator";
|
|
2
|
+
export declare const DSCircularIndeterminateIndicatorSlots: {
|
|
3
|
+
ROOT: string;
|
|
4
|
+
SVG: string;
|
|
5
|
+
LABEL: string;
|
|
6
|
+
};
|
|
1
7
|
export declare const sizeToPx: {
|
|
2
8
|
xs: number;
|
|
3
9
|
s: number;
|
|
@@ -26,3 +32,4 @@ export declare const sizeToTextSize: {
|
|
|
26
32
|
xl: string;
|
|
27
33
|
xxl: string;
|
|
28
34
|
};
|
|
35
|
+
export declare const DSCircularIndeterminateIndicatorDataTestIds: Record<string, string>;
|
package/dist/types/v2/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const StyledContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
2
|
+
export declare const StyledContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
3
3
|
export declare const StyledSvg: import("styled-components").StyledComponent<"svg", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
4
4
|
export declare const StyledPath: import("styled-components").StyledComponent<"path", import("@elliemae/ds-system").Theme, {
|
|
5
5
|
r: number;
|
|
@@ -8,3 +8,4 @@ export declare const StyledRect: import("styled-components").StyledComponent<"re
|
|
|
8
8
|
export declare const StyledCircle: import("styled-components").StyledComponent<"circle", import("@elliemae/ds-system").Theme, {
|
|
9
9
|
r: number;
|
|
10
10
|
} & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
11
|
+
export declare const StyledLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-circular-progress-indicator",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.22.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Circular progress indicator",
|
|
6
6
|
"files": [
|
|
@@ -53,12 +53,12 @@
|
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"styled-components": "~5.3.9",
|
|
55
55
|
"uid": "~2.0.1",
|
|
56
|
-
"@elliemae/ds-classnames": "3.
|
|
57
|
-
"@elliemae/ds-grid": "3.
|
|
58
|
-
"@elliemae/ds-props-helpers": "3.
|
|
59
|
-
"@elliemae/ds-system": "3.
|
|
60
|
-
"@elliemae/ds-tooltip": "3.
|
|
61
|
-
"@elliemae/ds-utilities": "3.
|
|
56
|
+
"@elliemae/ds-classnames": "3.22.0-next.1",
|
|
57
|
+
"@elliemae/ds-grid": "3.22.0-next.1",
|
|
58
|
+
"@elliemae/ds-props-helpers": "3.22.0-next.1",
|
|
59
|
+
"@elliemae/ds-system": "3.22.0-next.1",
|
|
60
|
+
"@elliemae/ds-tooltip": "3.22.0-next.1",
|
|
61
|
+
"@elliemae/ds-utilities": "3.22.0-next.1"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@testing-library/jest-dom": "~5.16.5",
|