@elliemae/ds-indeterminate-progress-indicator 3.56.0-rc.1 → 3.57.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/DSIndeterminateProgressIndicator.js +1 -1
- package/dist/cjs/DSIndeterminateProgressIndicator.js.map +2 -2
- package/dist/cjs/styled.js +11 -8
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/DSIndeterminateProgressIndicator.js +1 -1
- package/dist/esm/DSIndeterminateProgressIndicator.js.map +2 -2
- package/dist/esm/styled.js +11 -8
- package/dist/esm/styled.js.map +2 -2
- package/package.json +6 -6
@@ -37,10 +37,10 @@ var React = __toESM(require("react"));
|
|
37
37
|
var import_jsx_runtime = require("react/jsx-runtime");
|
38
38
|
var import_react = require("react");
|
39
39
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
40
|
+
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
40
41
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
41
42
|
var import_useIndeterminateProgressIndicator = require("./config/useIndeterminateProgressIndicator.js");
|
42
43
|
var import_constants = require("./constants/index.js");
|
43
|
-
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
44
44
|
var import_styled = require("./styled.js");
|
45
45
|
const DSIndeterminateProgressIndicator = (props) => {
|
46
46
|
const { propsWithDefault, label } = (0, import_useIndeterminateProgressIndicator.useIndeterminateProgressIndicator)(props);
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../src/DSIndeterminateProgressIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n DSIndeterminateProgressIndicatorPropTypes,\n type DSIndeterminateProgressIndicatorT,\n} from './react-desc-prop-types.js';\nimport { useIndeterminateProgressIndicator } from './config/useIndeterminateProgressIndicator.js';\nimport { DSIndeterminateProgressIndicatorName } from './constants/index.js';\nimport {
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAAmC;AACnC,8BAAqE;AACrE,mCAGO;AACP,+CAAkD;AAClD,uBAAqD;AACrD,
|
4
|
+
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n DSIndeterminateProgressIndicatorPropTypes,\n type DSIndeterminateProgressIndicatorT,\n} from './react-desc-prop-types.js';\nimport { useIndeterminateProgressIndicator } from './config/useIndeterminateProgressIndicator.js';\nimport { DSIndeterminateProgressIndicatorName } from './constants/index.js';\nimport { Bar, BarIndicator, Container, StyledTruncatedTooltipText } from './styled.js';\n\nconst DSIndeterminateProgressIndicator: React.ComponentType<DSIndeterminateProgressIndicatorT.Props> = (props) => {\n const { propsWithDefault, label } = useIndeterminateProgressIndicator(props);\n const {\n containerProps,\n complete,\n failed,\n processing,\n processingComplete,\n processingFail,\n animated,\n percent,\n lineOnly,\n } = propsWithDefault;\n\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n return (\n <Container\n aria-busy={processing}\n aria-label={label}\n aria-live=\"polite\"\n role=\"alert\"\n lineOnly={lineOnly}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n {...globalAttributes}\n {...xstyledAttributes}\n {...containerProps}\n >\n {!lineOnly ? (\n <TooltipTextProvider>\n <StyledTruncatedTooltipText\n value={label}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </TooltipTextProvider>\n ) : null}\n <Bar getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <BarIndicator\n complete={complete}\n failed={failed}\n processing={processing}\n animated={animated}\n processingComplete={processingComplete}\n processingFail={processingFail}\n percent={percent}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </Bar>\n </Container>\n );\n};\n\nDSIndeterminateProgressIndicator.displayName = DSIndeterminateProgressIndicatorName;\nconst IndeterminateProgressIndicatorWithSchema = describe(DSIndeterminateProgressIndicator);\nIndeterminateProgressIndicatorWithSchema.propTypes = DSIndeterminateProgressIndicatorPropTypes;\n\nexport { DSIndeterminateProgressIndicator, IndeterminateProgressIndicatorWithSchema };\nexport default DSIndeterminateProgressIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAAmC;AACnC,8BAAqE;AACrE,uCAAoC;AACpC,mCAGO;AACP,+CAAkD;AAClD,uBAAqD;AACrD,oBAAyE;AAEzE,MAAM,mCAAiG,CAAC,UAAU;AAChH,QAAM,EAAE,kBAAkB,MAAM,QAAI,4EAAkC,KAAK;AAC3E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,uBAAmB,gDAAuB,gBAAgB;AAChE,QAAM,wBAAoB,4CAAmB,gBAAgB;AAC7D,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAC5E,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,SAAC,WACA,4CAAC,wDACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP;AAAA,YACA;AAAA;AAAA,QACF,GACF,IACE;AAAA,QACJ,4CAAC,qBAAI,eAA8B,wBACjC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,iCAAiC,cAAc;AAC/C,MAAM,+CAA2C,kCAAS,gCAAgC;AAC1F,yCAAyC,YAAY;AAGrD,IAAO,2CAAQ;",
|
6
6
|
"names": []
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
@@ -123,22 +123,22 @@ const BarIndicator = (0, import_ds_system.styled)("div", {
|
|
123
123
|
return import_ds_system.css`
|
124
124
|
background-color: ${theme.colors.neutral[500]};
|
125
125
|
`;
|
126
|
-
|
126
|
+
if (complete && processing)
|
127
127
|
return import_ds_system.css`
|
128
128
|
width: 100%;
|
129
129
|
background-color: ${theme.colors.brand[500]};
|
130
130
|
animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;
|
131
131
|
animation-fill-mode: forwards;
|
132
132
|
`;
|
133
|
-
|
133
|
+
if (complete && !processingComplete && !processing)
|
134
134
|
return import_ds_system.css`
|
135
135
|
background-color: ${theme.colors.success[900]};
|
136
136
|
`;
|
137
|
-
|
137
|
+
if (failed && !processingFail && !processing)
|
138
138
|
return import_ds_system.css`
|
139
139
|
background-color: #e34256;
|
140
140
|
`;
|
141
|
-
|
141
|
+
if (processing) {
|
142
142
|
if (animated) {
|
143
143
|
return import_ds_system.css`
|
144
144
|
width: 100%;
|
@@ -149,34 +149,37 @@ const BarIndicator = (0, import_ds_system.styled)("div", {
|
|
149
149
|
return import_ds_system.css`
|
150
150
|
background-color: ${theme.colors.brand[500]};
|
151
151
|
`;
|
152
|
-
}
|
152
|
+
}
|
153
|
+
if (processingComplete && !complete) {
|
153
154
|
return import_ds_system.css`
|
154
155
|
width: 50%;
|
155
156
|
animation: ${ProcessingSuccess} 4s infinite;
|
156
157
|
animation-fill-mode: forwards;
|
157
158
|
background-color: ${theme.colors.brand[500]};
|
158
159
|
`;
|
159
|
-
}
|
160
|
+
}
|
161
|
+
if (processingComplete && complete)
|
160
162
|
return import_ds_system.css`
|
161
163
|
width: 100%;
|
162
164
|
background-color: ${theme.colors.brand[500]};
|
163
165
|
animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;
|
164
166
|
animation-fill-mode: forwards;
|
165
167
|
`;
|
166
|
-
|
168
|
+
if (processingFail && !failed)
|
167
169
|
return import_ds_system.css`
|
168
170
|
width: 50%;
|
169
171
|
animation: ${ProcessingFail} 4s infinite;
|
170
172
|
animation-fill-mode: forwards;
|
171
173
|
background-color: ${theme.colors.brand[500]};
|
172
174
|
`;
|
173
|
-
|
175
|
+
if (processingFail && failed)
|
174
176
|
return import_ds_system.css`
|
175
177
|
width: 100%;
|
176
178
|
background-color: ${theme.colors.brand[500]};
|
177
179
|
animation: ${ProcessingFailEnd} 1s ease-in-out;
|
178
180
|
animation-fill-mode: forwards;
|
179
181
|
`;
|
182
|
+
return "";
|
180
183
|
}};
|
181
184
|
`;
|
182
185
|
//# sourceMappingURL=styled.js.map
|
package/dist/cjs/styled.js.map
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport { css, kfrm, styled } from '@elliemae/ds-system';\nimport {
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAkC;
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { css, kfrm, styled } from '@elliemae/ds-system';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { type DSIndeterminateProgressIndicatorT } from './react-desc-prop-types.js';\nimport { DSIndeterminateProgressIndicatorName, DSIndeterminateProgressIndicatorSlots } from './constants/index.js';\n\nconst IndeterminateAnimation = (color: string) => kfrm`\n 0% {\n transform: scaleX(0.015);\n transform-origin: 0% 0%;\n background-image: linear-gradient(to right, rgba(255,255,255,0.8) 10%, ${color});\n }\n 25% {\n transform: scaleX(0.4);\n }\n 50% {\n transform: scaleX(0.015);\n transform-origin: 100% 0%;\n background-image: linear-gradient(to right, rgba(255,255,255,0.8) 10%, ${color});\n }\n 50.1% {\n transform: scaleX(0.015);\n transform-origin: 100% 0%;\n background-image: linear-gradient(to left, rgba(255,255,255,0.8) 10%, ${color});\n }\n 75% {\n transform: scaleX(0.4);\n }\n 100% {\n transform: scaleX(0.015);\n transform-origin: 0% 0%;\n background-image: linear-gradient(to left, rgba(255,255,255,0.8) 10%, ${color});\n }\n`;\n\nconst ProcessingSuccess = kfrm`\n 0%, 30% { transform: translateX(-50%); width: 50% }\n 15% { transform: translateX(150%); width: 50% }\n 0%, 60% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 0%, 90% { transform: translateX(-50%); width: 50% }\n 75% { transform: translateX(150%); width: 50% }\n 100% { transform: translateX(0%); }\n`;\n\nconst ProcessingSuccessEnd = (color: string) => kfrm`\n 0% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 100% { transform: translateX(0%); background-color: ${color}; }\n`;\n\nconst ProcessingFail = kfrm`\n 0%, 30% { transform: translateX(-50%); width: 50% }\n 15% { transform: translateX(150%); width: 50% }\n 0%, 60% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 0%, 90% { transform: translateX(-50%); width: 50% }\n 75% { transform: translateX(150%); width: 50%; }\n 100% { transform: translateX(0%); }\n`;\n\nconst ProcessingFailEnd = kfrm`\n 0% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 100% { transform: translateX(0%); background-color: #e34256; }\n`;\n\nexport const Container = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.ROOT,\n})<DSIndeterminateProgressIndicatorT.Props>`\n width: 100%;\n padding: ${({ theme, lineOnly }) => (lineOnly ? 0 : `${theme.space.xxs} ${theme.space.xs}`)};\n`;\n\nexport const StyledTruncatedTooltipText = styled(DSTruncatedTooltipText, {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.LABEL,\n})``;\n\nexport const Bar = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.BAR,\n})`\n background-color: ${({ theme }) => theme.colors.neutral[100]};\n overflow: hidden;\n`;\n\nexport const BarIndicator = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.BAR_INDICATOR,\n})<DSIndeterminateProgressIndicatorT.Props>`\n height: ${({ theme }) => theme.space.xxxs};\n width: ${({ complete, failed, animated, processing, percent }) =>\n `${!complete && !failed && !animated && processing ? percent : 100}%`};\n ${({ theme, complete, failed, processing, animated, processingComplete, processingFail }) => {\n // Default\n if (!complete && !failed && !processing && !processingComplete && !processingFail)\n return css`\n background-color: ${theme.colors.neutral[500]};\n `;\n // Completed\n if (complete && processing)\n return css`\n width: 100%;\n background-color: ${theme.colors.brand[500]};\n animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;\n animation-fill-mode: forwards;\n `;\n if (complete && !processingComplete && !processing)\n return css`\n background-color: ${theme.colors.success[900]};\n `;\n // Failed\n if (failed && !processingFail && !processing)\n return css`\n background-color: #e34256;\n `;\n // Processing\n if (processing) {\n if (animated) {\n return css`\n width: 100%;\n animation: ${IndeterminateAnimation(theme.colors.brand[500])} 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;\n background-color: ${theme.colors.brand[500]};\n `;\n }\n return css`\n background-color: ${theme.colors.brand[500]};\n `;\n }\n // Processing -> Completed\n if (processingComplete && !complete) {\n return css`\n width: 50%;\n animation: ${ProcessingSuccess} 4s infinite;\n animation-fill-mode: forwards;\n background-color: ${theme.colors.brand[500]};\n `;\n }\n if (processingComplete && complete)\n return css`\n width: 100%;\n background-color: ${theme.colors.brand[500]};\n animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;\n animation-fill-mode: forwards;\n `;\n // Processing -> Failed\n if (processingFail && !failed)\n return css`\n width: 50%;\n animation: ${ProcessingFail} 4s infinite;\n animation-fill-mode: forwards;\n background-color: ${theme.colors.brand[500]};\n `;\n if (processingFail && failed)\n return css`\n width: 100%;\n background-color: ${theme.colors.brand[500]};\n animation: ${ProcessingFailEnd} 1s ease-in-out;\n animation-fill-mode: forwards;\n `;\n return '';\n }};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAkC;AAClC,uCAAuC;AAEvC,uBAA4F;AAE5F,MAAM,yBAAyB,CAAC,UAAkB;AAAA;AAAA;AAAA;AAAA,6EAI2B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6EAQL,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,4EAKN,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4EAQL,KAAK;AAAA;AAAA;AAIjF,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1B,MAAM,uBAAuB,CAAC,UAAkB;AAAA;AAAA;AAAA,2DAGW,KAAK;AAAA;AAGhE,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvB,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAMnB,MAAM,gBAAY,yBAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;AAAA;AAAA,aAEY,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,IAAI,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAG;AAAA;AAGtF,MAAM,iCAA6B,yBAAO,yDAAwB;AAAA,EACvE,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;AAEM,MAAM,UAAM,yBAAO,OAAO;AAAA,EAC/B,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;AAAA,sBACqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAIvD,MAAM,mBAAe,yBAAO,OAAO;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;AAAA,YACW,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,WAChC,CAAC,EAAE,UAAU,QAAQ,UAAU,YAAY,QAAQ,MAC1D,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,aAAa,UAAU,GAAG,GAAG;AAAA,IACrE,CAAC,EAAE,OAAO,UAAU,QAAQ,YAAY,UAAU,oBAAoB,eAAe,MAAM;AAE3F,MAAI,CAAC,YAAY,CAAC,UAAU,CAAC,cAAc,CAAC,sBAAsB,CAAC;AACjE,WAAO;AAAA,4BACe,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGjD,MAAI,YAAY;AACd,WAAO;AAAA;AAAA,4BAEe,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,qBAC9B,qBAAqB,MAAM,OAAO,QAAQ,GAAG,CAAC,CAAC;AAAA;AAAA;AAGhE,MAAI,YAAY,CAAC,sBAAsB,CAAC;AACtC,WAAO;AAAA,4BACe,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGjD,MAAI,UAAU,CAAC,kBAAkB,CAAC;AAChC,WAAO;AAAA;AAAA;AAIT,MAAI,YAAY;AACd,QAAI,UAAU;AACZ,aAAO;AAAA;AAAA,uBAEQ,uBAAuB,MAAM,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA,8BACxC,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,IAE/C;AACA,WAAO;AAAA,4BACe,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAE/C;AAEA,MAAI,sBAAsB,CAAC,UAAU;AACnC,WAAO;AAAA;AAAA,qBAEQ,iBAAiB;AAAA;AAAA,4BAEV,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAE/C;AACA,MAAI,sBAAsB;AACxB,WAAO;AAAA;AAAA,4BAEe,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,qBAC9B,qBAAqB,MAAM,OAAO,QAAQ,GAAG,CAAC,CAAC;AAAA;AAAA;AAIhE,MAAI,kBAAkB,CAAC;AACrB,WAAO;AAAA;AAAA,qBAEQ,cAAc;AAAA;AAAA,4BAEP,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAE/C,MAAI,kBAAkB;AACpB,WAAO;AAAA;AAAA,4BAEe,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,qBAC9B,iBAAiB;AAAA;AAAA;AAGlC,SAAO;AACT,CAAC;AAAA;",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -2,12 +2,12 @@ import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
3
3
|
import { useCallback } from "react";
|
4
4
|
import { describe, useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
|
5
|
+
import { TooltipTextProvider } from "@elliemae/ds-truncated-tooltip-text";
|
5
6
|
import {
|
6
7
|
DSIndeterminateProgressIndicatorPropTypes
|
7
8
|
} from "./react-desc-prop-types.js";
|
8
9
|
import { useIndeterminateProgressIndicator } from "./config/useIndeterminateProgressIndicator.js";
|
9
10
|
import { DSIndeterminateProgressIndicatorName } from "./constants/index.js";
|
10
|
-
import { TooltipTextProvider } from "@elliemae/ds-truncated-tooltip-text";
|
11
11
|
import { Bar, BarIndicator, Container, StyledTruncatedTooltipText } from "./styled.js";
|
12
12
|
const DSIndeterminateProgressIndicator = (props) => {
|
13
13
|
const { propsWithDefault, label } = useIndeterminateProgressIndicator(props);
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSIndeterminateProgressIndicator.tsx"],
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n DSIndeterminateProgressIndicatorPropTypes,\n type DSIndeterminateProgressIndicatorT,\n} from './react-desc-prop-types.js';\nimport { useIndeterminateProgressIndicator } from './config/useIndeterminateProgressIndicator.js';\nimport { DSIndeterminateProgressIndicatorName } from './constants/index.js';\nimport {
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC+BnB,SAcM,KAdN;AA/BJ,SAAgB,mBAAmB;AACnC,SAAS,UAAU,wBAAwB,0BAA0B;AACrE;AAAA,EACE;AAAA,OAEK;AACP,SAAS,yCAAyC;AAClD,SAAS,4CAA4C;AACrD,SAAS,
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n DSIndeterminateProgressIndicatorPropTypes,\n type DSIndeterminateProgressIndicatorT,\n} from './react-desc-prop-types.js';\nimport { useIndeterminateProgressIndicator } from './config/useIndeterminateProgressIndicator.js';\nimport { DSIndeterminateProgressIndicatorName } from './constants/index.js';\nimport { Bar, BarIndicator, Container, StyledTruncatedTooltipText } from './styled.js';\n\nconst DSIndeterminateProgressIndicator: React.ComponentType<DSIndeterminateProgressIndicatorT.Props> = (props) => {\n const { propsWithDefault, label } = useIndeterminateProgressIndicator(props);\n const {\n containerProps,\n complete,\n failed,\n processing,\n processingComplete,\n processingFail,\n animated,\n percent,\n lineOnly,\n } = propsWithDefault;\n\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n return (\n <Container\n aria-busy={processing}\n aria-label={label}\n aria-live=\"polite\"\n role=\"alert\"\n lineOnly={lineOnly}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n {...globalAttributes}\n {...xstyledAttributes}\n {...containerProps}\n >\n {!lineOnly ? (\n <TooltipTextProvider>\n <StyledTruncatedTooltipText\n value={label}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </TooltipTextProvider>\n ) : null}\n <Bar getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <BarIndicator\n complete={complete}\n failed={failed}\n processing={processing}\n animated={animated}\n processingComplete={processingComplete}\n processingFail={processingFail}\n percent={percent}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </Bar>\n </Container>\n );\n};\n\nDSIndeterminateProgressIndicator.displayName = DSIndeterminateProgressIndicatorName;\nconst IndeterminateProgressIndicatorWithSchema = describe(DSIndeterminateProgressIndicator);\nIndeterminateProgressIndicatorWithSchema.propTypes = DSIndeterminateProgressIndicatorPropTypes;\n\nexport { DSIndeterminateProgressIndicator, IndeterminateProgressIndicatorWithSchema };\nexport default DSIndeterminateProgressIndicator;\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+BnB,SAcM,KAdN;AA/BJ,SAAgB,mBAAmB;AACnC,SAAS,UAAU,wBAAwB,0BAA0B;AACrE,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,yCAAyC;AAClD,SAAS,4CAA4C;AACrD,SAAS,KAAK,cAAc,WAAW,kCAAkC;AAEzE,MAAM,mCAAiG,CAAC,UAAU;AAChH,QAAM,EAAE,kBAAkB,MAAM,IAAI,kCAAkC,KAAK;AAC3E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB,uBAAuB,gBAAgB;AAChE,QAAM,oBAAoB,mBAAmB,gBAAgB;AAC7D,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAC5E,QAAM,yBAAyB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,SAAC,WACA,oBAAC,uBACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP;AAAA,YACA;AAAA;AAAA,QACF,GACF,IACE;AAAA,QACJ,oBAAC,OAAI,eAA8B,wBACjC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,iCAAiC,cAAc;AAC/C,MAAM,2CAA2C,SAAS,gCAAgC;AAC1F,yCAAyC,YAAY;AAGrD,IAAO,2CAAQ;",
|
6
6
|
"names": []
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
@@ -87,22 +87,22 @@ const BarIndicator = styled("div", {
|
|
87
87
|
return css`
|
88
88
|
background-color: ${theme.colors.neutral[500]};
|
89
89
|
`;
|
90
|
-
|
90
|
+
if (complete && processing)
|
91
91
|
return css`
|
92
92
|
width: 100%;
|
93
93
|
background-color: ${theme.colors.brand[500]};
|
94
94
|
animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;
|
95
95
|
animation-fill-mode: forwards;
|
96
96
|
`;
|
97
|
-
|
97
|
+
if (complete && !processingComplete && !processing)
|
98
98
|
return css`
|
99
99
|
background-color: ${theme.colors.success[900]};
|
100
100
|
`;
|
101
|
-
|
101
|
+
if (failed && !processingFail && !processing)
|
102
102
|
return css`
|
103
103
|
background-color: #e34256;
|
104
104
|
`;
|
105
|
-
|
105
|
+
if (processing) {
|
106
106
|
if (animated) {
|
107
107
|
return css`
|
108
108
|
width: 100%;
|
@@ -113,34 +113,37 @@ const BarIndicator = styled("div", {
|
|
113
113
|
return css`
|
114
114
|
background-color: ${theme.colors.brand[500]};
|
115
115
|
`;
|
116
|
-
}
|
116
|
+
}
|
117
|
+
if (processingComplete && !complete) {
|
117
118
|
return css`
|
118
119
|
width: 50%;
|
119
120
|
animation: ${ProcessingSuccess} 4s infinite;
|
120
121
|
animation-fill-mode: forwards;
|
121
122
|
background-color: ${theme.colors.brand[500]};
|
122
123
|
`;
|
123
|
-
}
|
124
|
+
}
|
125
|
+
if (processingComplete && complete)
|
124
126
|
return css`
|
125
127
|
width: 100%;
|
126
128
|
background-color: ${theme.colors.brand[500]};
|
127
129
|
animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;
|
128
130
|
animation-fill-mode: forwards;
|
129
131
|
`;
|
130
|
-
|
132
|
+
if (processingFail && !failed)
|
131
133
|
return css`
|
132
134
|
width: 50%;
|
133
135
|
animation: ${ProcessingFail} 4s infinite;
|
134
136
|
animation-fill-mode: forwards;
|
135
137
|
background-color: ${theme.colors.brand[500]};
|
136
138
|
`;
|
137
|
-
|
139
|
+
if (processingFail && failed)
|
138
140
|
return css`
|
139
141
|
width: 100%;
|
140
142
|
background-color: ${theme.colors.brand[500]};
|
141
143
|
animation: ${ProcessingFailEnd} 1s ease-in-out;
|
142
144
|
animation-fill-mode: forwards;
|
143
145
|
`;
|
146
|
+
return "";
|
144
147
|
}};
|
145
148
|
`;
|
146
149
|
export {
|
package/dist/esm/styled.js.map
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { css, kfrm, styled } from '@elliemae/ds-system';\nimport {
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,KAAK,MAAM,cAAc;
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { css, kfrm, styled } from '@elliemae/ds-system';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { type DSIndeterminateProgressIndicatorT } from './react-desc-prop-types.js';\nimport { DSIndeterminateProgressIndicatorName, DSIndeterminateProgressIndicatorSlots } from './constants/index.js';\n\nconst IndeterminateAnimation = (color: string) => kfrm`\n 0% {\n transform: scaleX(0.015);\n transform-origin: 0% 0%;\n background-image: linear-gradient(to right, rgba(255,255,255,0.8) 10%, ${color});\n }\n 25% {\n transform: scaleX(0.4);\n }\n 50% {\n transform: scaleX(0.015);\n transform-origin: 100% 0%;\n background-image: linear-gradient(to right, rgba(255,255,255,0.8) 10%, ${color});\n }\n 50.1% {\n transform: scaleX(0.015);\n transform-origin: 100% 0%;\n background-image: linear-gradient(to left, rgba(255,255,255,0.8) 10%, ${color});\n }\n 75% {\n transform: scaleX(0.4);\n }\n 100% {\n transform: scaleX(0.015);\n transform-origin: 0% 0%;\n background-image: linear-gradient(to left, rgba(255,255,255,0.8) 10%, ${color});\n }\n`;\n\nconst ProcessingSuccess = kfrm`\n 0%, 30% { transform: translateX(-50%); width: 50% }\n 15% { transform: translateX(150%); width: 50% }\n 0%, 60% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 0%, 90% { transform: translateX(-50%); width: 50% }\n 75% { transform: translateX(150%); width: 50% }\n 100% { transform: translateX(0%); }\n`;\n\nconst ProcessingSuccessEnd = (color: string) => kfrm`\n 0% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 100% { transform: translateX(0%); background-color: ${color}; }\n`;\n\nconst ProcessingFail = kfrm`\n 0%, 30% { transform: translateX(-50%); width: 50% }\n 15% { transform: translateX(150%); width: 50% }\n 0%, 60% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 0%, 90% { transform: translateX(-50%); width: 50% }\n 75% { transform: translateX(150%); width: 50%; }\n 100% { transform: translateX(0%); }\n`;\n\nconst ProcessingFailEnd = kfrm`\n 0% { transform: translateX(-50%); width: 50% }\n 45% { transform: translateX(150%); width: 50% }\n 100% { transform: translateX(0%); background-color: #e34256; }\n`;\n\nexport const Container = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.ROOT,\n})<DSIndeterminateProgressIndicatorT.Props>`\n width: 100%;\n padding: ${({ theme, lineOnly }) => (lineOnly ? 0 : `${theme.space.xxs} ${theme.space.xs}`)};\n`;\n\nexport const StyledTruncatedTooltipText = styled(DSTruncatedTooltipText, {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.LABEL,\n})``;\n\nexport const Bar = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.BAR,\n})`\n background-color: ${({ theme }) => theme.colors.neutral[100]};\n overflow: hidden;\n`;\n\nexport const BarIndicator = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: DSIndeterminateProgressIndicatorSlots.BAR_INDICATOR,\n})<DSIndeterminateProgressIndicatorT.Props>`\n height: ${({ theme }) => theme.space.xxxs};\n width: ${({ complete, failed, animated, processing, percent }) =>\n `${!complete && !failed && !animated && processing ? percent : 100}%`};\n ${({ theme, complete, failed, processing, animated, processingComplete, processingFail }) => {\n // Default\n if (!complete && !failed && !processing && !processingComplete && !processingFail)\n return css`\n background-color: ${theme.colors.neutral[500]};\n `;\n // Completed\n if (complete && processing)\n return css`\n width: 100%;\n background-color: ${theme.colors.brand[500]};\n animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;\n animation-fill-mode: forwards;\n `;\n if (complete && !processingComplete && !processing)\n return css`\n background-color: ${theme.colors.success[900]};\n `;\n // Failed\n if (failed && !processingFail && !processing)\n return css`\n background-color: #e34256;\n `;\n // Processing\n if (processing) {\n if (animated) {\n return css`\n width: 100%;\n animation: ${IndeterminateAnimation(theme.colors.brand[500])} 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;\n background-color: ${theme.colors.brand[500]};\n `;\n }\n return css`\n background-color: ${theme.colors.brand[500]};\n `;\n }\n // Processing -> Completed\n if (processingComplete && !complete) {\n return css`\n width: 50%;\n animation: ${ProcessingSuccess} 4s infinite;\n animation-fill-mode: forwards;\n background-color: ${theme.colors.brand[500]};\n `;\n }\n if (processingComplete && complete)\n return css`\n width: 100%;\n background-color: ${theme.colors.brand[500]};\n animation: ${ProcessingSuccessEnd(theme.colors.success[900])} 1s ease-in-out;\n animation-fill-mode: forwards;\n `;\n // Processing -> Failed\n if (processingFail && !failed)\n return css`\n width: 50%;\n animation: ${ProcessingFail} 4s infinite;\n animation-fill-mode: forwards;\n background-color: ${theme.colors.brand[500]};\n `;\n if (processingFail && failed)\n return css`\n width: 100%;\n background-color: ${theme.colors.brand[500]};\n animation: ${ProcessingFailEnd} 1s ease-in-out;\n animation-fill-mode: forwards;\n `;\n return '';\n }};\n`;\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,KAAK,MAAM,cAAc;AAClC,SAAS,8BAA8B;AAEvC,SAAS,sCAAsC,6CAA6C;AAE5F,MAAM,yBAAyB,CAAC,UAAkB;AAAA;AAAA;AAAA;AAAA,6EAI2B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6EAQL,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,4EAKN,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4EAQL,KAAK;AAAA;AAAA;AAIjF,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1B,MAAM,uBAAuB,CAAC,UAAkB;AAAA;AAAA;AAAA,2DAGW,KAAK;AAAA;AAGhE,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvB,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAMnB,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;AAAA;AAAA,aAEY,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,IAAI,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAG;AAAA;AAGtF,MAAM,6BAA6B,OAAO,wBAAwB;AAAA,EACvE,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;AAEM,MAAM,MAAM,OAAO,OAAO;AAAA,EAC/B,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;AAAA,sBACqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAIvD,MAAM,eAAe,OAAO,OAAO;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;AAAA,YACW,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,WAChC,CAAC,EAAE,UAAU,QAAQ,UAAU,YAAY,QAAQ,MAC1D,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,aAAa,UAAU,GAAG,GAAG;AAAA,IACrE,CAAC,EAAE,OAAO,UAAU,QAAQ,YAAY,UAAU,oBAAoB,eAAe,MAAM;AAE3F,MAAI,CAAC,YAAY,CAAC,UAAU,CAAC,cAAc,CAAC,sBAAsB,CAAC;AACjE,WAAO;AAAA,4BACe,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGjD,MAAI,YAAY;AACd,WAAO;AAAA;AAAA,4BAEe,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,qBAC9B,qBAAqB,MAAM,OAAO,QAAQ,GAAG,CAAC,CAAC;AAAA;AAAA;AAGhE,MAAI,YAAY,CAAC,sBAAsB,CAAC;AACtC,WAAO;AAAA,4BACe,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGjD,MAAI,UAAU,CAAC,kBAAkB,CAAC;AAChC,WAAO;AAAA;AAAA;AAIT,MAAI,YAAY;AACd,QAAI,UAAU;AACZ,aAAO;AAAA;AAAA,uBAEQ,uBAAuB,MAAM,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA,8BACxC,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,IAE/C;AACA,WAAO;AAAA,4BACe,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAE/C;AAEA,MAAI,sBAAsB,CAAC,UAAU;AACnC,WAAO;AAAA;AAAA,qBAEQ,iBAAiB;AAAA;AAAA,4BAEV,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAE/C;AACA,MAAI,sBAAsB;AACxB,WAAO;AAAA;AAAA,4BAEe,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,qBAC9B,qBAAqB,MAAM,OAAO,QAAQ,GAAG,CAAC,CAAC;AAAA;AAAA;AAIhE,MAAI,kBAAkB,CAAC;AACrB,WAAO;AAAA;AAAA,qBAEQ,cAAc;AAAA;AAAA,4BAEP,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAE/C,MAAI,kBAAkB;AACpB,WAAO;AAAA;AAAA,4BAEe,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,qBAC9B,iBAAiB;AAAA;AAAA;AAGlC,SAAO;AACT,CAAC;AAAA;",
|
6
6
|
"names": []
|
7
7
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@elliemae/ds-indeterminate-progress-indicator",
|
3
|
-
"version": "3.
|
3
|
+
"version": "3.57.0-next.1",
|
4
4
|
"license": "MIT",
|
5
5
|
"description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
|
6
6
|
"files": [
|
@@ -36,16 +36,16 @@
|
|
36
36
|
"indent": 4
|
37
37
|
},
|
38
38
|
"dependencies": {
|
39
|
-
"@elliemae/ds-classnames": "3.
|
40
|
-
"@elliemae/ds-props-helpers": "3.
|
41
|
-
"@elliemae/ds-
|
42
|
-
"@elliemae/ds-
|
39
|
+
"@elliemae/ds-classnames": "3.57.0-next.1",
|
40
|
+
"@elliemae/ds-props-helpers": "3.57.0-next.1",
|
41
|
+
"@elliemae/ds-system": "3.57.0-next.1",
|
42
|
+
"@elliemae/ds-truncated-tooltip-text": "3.57.0-next.1"
|
43
43
|
},
|
44
44
|
"devDependencies": {
|
45
45
|
"@elliemae/pui-cli": "9.0.0-next.65",
|
46
46
|
"jest": "~29.7.0",
|
47
47
|
"styled-components": "~5.3.9",
|
48
|
-
"@elliemae/ds-monorepo-devops": "3.
|
48
|
+
"@elliemae/ds-monorepo-devops": "3.57.0-next.1"
|
49
49
|
},
|
50
50
|
"peerDependencies": {
|
51
51
|
"react": "^18.3.1",
|