@elliemae/ds-square-indicator 3.27.0-next.1 → 3.27.0-next.2
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/DSSquareIndicator.js +52 -42
- package/dist/cjs/DSSquareIndicator.js.map +2 -2
- package/dist/cjs/styled.js +5 -0
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/DSSquareIndicator.js +53 -43
- package/dist/esm/DSSquareIndicator.js.map +2 -2
- package/dist/esm/styled.js +5 -0
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/styled.d.ts +2 -0
- package/package.json +6 -6
|
@@ -35,7 +35,6 @@ module.exports = __toCommonJS(DSSquareIndicator_exports);
|
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var import_react = require("react");
|
|
38
|
-
var import_ds_grid = require("@elliemae/ds-grid");
|
|
39
38
|
var import_ds_tooltip = require("@elliemae/ds-tooltip");
|
|
40
39
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
41
40
|
var import_uid = require("uid");
|
|
@@ -51,47 +50,58 @@ const DSSquareIndicator = (props) => {
|
|
|
51
50
|
const uniqueId = (0, import_react.useMemo)(() => (0, import_uid.uid)(16), []);
|
|
52
51
|
const paddedCoordinate = (0, import_react.useMemo)(() => `calc(100% - ${import_constants.sizeToWeight[size]})`, [size]);
|
|
53
52
|
const hexColor = (0, import_react.useMemo)(() => import_constants.colorToHex[color], [color]);
|
|
54
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
53
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
54
|
+
import_styled.StyledContainer,
|
|
55
|
+
{
|
|
56
|
+
gutter: "xs",
|
|
57
|
+
justifyContent: "center",
|
|
58
|
+
role: "status",
|
|
59
|
+
"aria-label": text || "Loading...",
|
|
60
|
+
...globalAttributes,
|
|
61
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
|
|
62
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
63
|
+
"svg",
|
|
64
|
+
{
|
|
65
|
+
width: import_constants.sizeToPx[size],
|
|
66
|
+
height: import_constants.sizeToPx[size],
|
|
67
|
+
style: {
|
|
68
|
+
display: "block",
|
|
69
|
+
margin: "auto"
|
|
70
|
+
},
|
|
71
|
+
"aria-hidden": "true",
|
|
72
|
+
children: [
|
|
73
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
|
|
74
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `${uniqueId}-lg1`, x1: "0", y1: "0", x2: "0", y2: "100%", children: [
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "20%", stopColor: `${hexColor}FF` }),
|
|
76
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "80%", stopColor: `${hexColor}00` })
|
|
77
|
+
] }),
|
|
78
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `${uniqueId}-lg2`, x1: "0", y1: "0", x2: "100%", y2: "0", children: [
|
|
79
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "10%", stopColor: `${hexColor}00` }),
|
|
80
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "50%", stopColor: `${hexColor}FF` })
|
|
81
|
+
] }),
|
|
82
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `${uniqueId}-lg3`, x1: "0", y1: "0", x2: "0", y2: "100%", children: [
|
|
83
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "10%", stopColor: `${hexColor}00` }),
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "50%", stopColor: `${hexColor}FF` })
|
|
85
|
+
] }),
|
|
86
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `${uniqueId}-lg4`, x1: "0", y1: "0", x2: "100%", y2: "0", children: [
|
|
87
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "50%", stopColor: `${hexColor}FF` }),
|
|
88
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "90%", stopColor: `${hexColor}00` })
|
|
89
|
+
] }),
|
|
90
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: `${uniqueId}-lcp1`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: import_constants.sizeToWeight[size], y: 0, width: "100%", height: import_constants.sizeToWeight[size] }) }),
|
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: `${uniqueId}-lcp2`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: paddedCoordinate, y: import_constants.sizeToWeight[size], width: import_constants.sizeToWeight[size], height: "100%" }) }),
|
|
92
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: `${uniqueId}-lcp3`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: 0, y: paddedCoordinate, width: paddedCoordinate, height: import_constants.sizeToWeight[size] }) })
|
|
93
|
+
] }),
|
|
94
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLineLeft, { size, fill: `url(#${uniqueId}-lg1)` }),
|
|
95
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLineTop, { size, fill: `url(#${uniqueId}-lg2)`, clipPath: `url(#${uniqueId}-lcp1)` }),
|
|
96
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLineRight, { size, fill: `url(#${uniqueId}-lg3)`, clipPath: `url(#${uniqueId}-lcp2)` }),
|
|
97
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLineBottom, { size, fill: `url(#${uniqueId}-lg4)`, clipPath: `url(#${uniqueId}-lcp3)` })
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
),
|
|
101
|
+
text !== "" && showText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: import_constants.colorToHex[color], fontSize: import_constants.sizeToTextSize[size] }, children: text })
|
|
102
|
+
] })
|
|
103
|
+
}
|
|
104
|
+
);
|
|
95
105
|
};
|
|
96
106
|
DSSquareIndicator.propTypes = import_react_desc_prop_types.SquareIndicatorPropTypes;
|
|
97
107
|
DSSquareIndicator.displayName = "DSSquareIndicator";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSSquareIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledContainer, StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants.js';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSSquareIndicatorT.Props>>(props, defaultProps);\n // eslint-disable-next-line no-unused-vars\n const { height, width, cols, rows, wrap, ...globalAttributes } = useGetGlobalAttributes(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 const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);\n\n const hexColor = useMemo(() => colorToHex[color], [color]);\n\n return (\n <StyledContainer\n gutter=\"xs\"\n justifyContent=\"center\"\n role=\"status\"\n aria-label={text || 'Loading...'}\n {...globalAttributes}\n >\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <svg\n width={sizeToPx[size]}\n height={sizeToPx[size]}\n style={{\n display: 'block',\n margin: 'auto',\n }}\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={`${uniqueId}-lg1`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"20%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"80%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg2`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg3`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg4`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"90%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <clipPath id={`${uniqueId}-lcp1`}>\n <rect x={sizeToWeight[size]} y={0} width=\"100%\" height={sizeToWeight[size]} />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp2`}>\n <rect x={paddedCoordinate} y={sizeToWeight[size]} width={sizeToWeight[size]} height=\"100%\" />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp3`}>\n <rect x={0} y={paddedCoordinate} width={paddedCoordinate} height={sizeToWeight[size]} />\n </clipPath>\n </defs>\n <StyledLineLeft size={size} fill={`url(#${uniqueId}-lg1)`} />\n <StyledLineTop size={size} fill={`url(#${uniqueId}-lg2)`} clipPath={`url(#${uniqueId}-lcp1)`} />\n <StyledLineRight size={size} fill={`url(#${uniqueId}-lg3)`} clipPath={`url(#${uniqueId}-lcp2)`} />\n <StyledLineBottom size={size} fill={`url(#${uniqueId}-lg4)`} clipPath={`url(#${uniqueId}-lcp3)`} />\n </svg>\n {text !== '' && showText && (\n <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n )}\n </Wrapper>\n </StyledContainer>\n );\n};\n\nDSSquareIndicator.propTypes = SquareIndicatorPropTypes;\nDSSquareIndicator.displayName = 'DSSquareIndicator';\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var styled_exports = {};
|
|
30
30
|
__export(styled_exports, {
|
|
31
|
+
StyledContainer: () => StyledContainer,
|
|
31
32
|
StyledLineBottom: () => StyledLineBottom,
|
|
32
33
|
StyledLineLeft: () => StyledLineLeft,
|
|
33
34
|
StyledLineRight: () => StyledLineRight,
|
|
@@ -36,6 +37,7 @@ __export(styled_exports, {
|
|
|
36
37
|
module.exports = __toCommonJS(styled_exports);
|
|
37
38
|
var React = __toESM(require("react"));
|
|
38
39
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
39
41
|
var import_constants = require("./constants.js");
|
|
40
42
|
const lineLeftAnimation = import_ds_system.kfrm`
|
|
41
43
|
0% {
|
|
@@ -93,6 +95,9 @@ const lineBottomAnimation = import_ds_system.kfrm`
|
|
|
93
95
|
width: 200%;
|
|
94
96
|
}
|
|
95
97
|
`;
|
|
98
|
+
const StyledContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
99
|
+
z-index: ${({ theme }) => theme.zIndex.loader};
|
|
100
|
+
`;
|
|
96
101
|
const StyledLineLeft = import_ds_system.styled.rect`
|
|
97
102
|
x: 0;
|
|
98
103
|
y: 0%;
|
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": ["import { kfrm, styled } from '@elliemae/ds-system';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { sizeToWeight } from './constants.js';\n\ninterface RectProps {\n size: Required<DSSquareIndicatorT.Props>['size'];\n}\n\nconst lineLeftAnimation = kfrm`\n 0% {\n y: 100%;\n height: 100%;\n }\n 12.5%, 50% {\n y: 0;\n height: 100%;\n }\n 62.5%, 100% {\n y: -100%;\n height: 100%;\n }\n`;\n\nconst lineTopAnimation = kfrm`\n 0% {\n x: -100%;\n width: 0%;\n }\n 25%, 50% {\n x: -100%;\n width: 200%;\n }\n 75%, 100% {\n x: 100%;\n width: 200%;\n }\n`;\n\nconst lineRightAnimation = kfrm`\n 0%, 12.5% {\n y: -100%;\n height: 0%;\n }\n 37.5%, 62.5% {\n y: -100%;\n height: 200%;\n }\n 87.5%, 100% {\n y: 100%;\n height: 200%;\n }\n`;\n\nconst lineBottomAnimation = kfrm`\n 0%, 25% {\n x: 200%;\n width: 200%;\n }\n 50%, 75% {\n x: 0%;\n width: 200%;\n }\n 100% {\n x: -200%;\n width: 200%;\n }\n`;\n\nexport const StyledLineLeft = styled.rect<RectProps>`\n x: 0;\n y: 0%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 100%;\n animation: ${lineLeftAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineTop = styled.rect<RectProps>`\n x: -100%;\n y: 0;\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineTopAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineRight = styled.rect<RectProps>`\n x: calc(100% - ${({ size }) => sizeToWeight[size]});\n y: -100%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 200%;\n animation: ${lineRightAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineBottom = styled.rect<RectProps>`\n x: 0%;\n y: calc(100% - ${({ size }) => sizeToWeight[size]});\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineBottomAnimation} 2.5s linear 0s infinite;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA6B;
|
|
4
|
+
"sourcesContent": ["import { kfrm, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { sizeToWeight } from './constants.js';\n\ninterface RectProps {\n size: Required<DSSquareIndicatorT.Props>['size'];\n}\n\nconst lineLeftAnimation = kfrm`\n 0% {\n y: 100%;\n height: 100%;\n }\n 12.5%, 50% {\n y: 0;\n height: 100%;\n }\n 62.5%, 100% {\n y: -100%;\n height: 100%;\n }\n`;\n\nconst lineTopAnimation = kfrm`\n 0% {\n x: -100%;\n width: 0%;\n }\n 25%, 50% {\n x: -100%;\n width: 200%;\n }\n 75%, 100% {\n x: 100%;\n width: 200%;\n }\n`;\n\nconst lineRightAnimation = kfrm`\n 0%, 12.5% {\n y: -100%;\n height: 0%;\n }\n 37.5%, 62.5% {\n y: -100%;\n height: 200%;\n }\n 87.5%, 100% {\n y: 100%;\n height: 200%;\n }\n`;\n\nconst lineBottomAnimation = kfrm`\n 0%, 25% {\n x: 200%;\n width: 200%;\n }\n 50%, 75% {\n x: 0%;\n width: 200%;\n }\n 100% {\n x: -200%;\n width: 200%;\n }\n`;\n\nexport const StyledContainer = styled(Grid)`\n z-index: ${({ theme }) => theme.zIndex.loader};\n`;\n\nexport const StyledLineLeft = styled.rect<RectProps>`\n x: 0;\n y: 0%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 100%;\n animation: ${lineLeftAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineTop = styled.rect<RectProps>`\n x: -100%;\n y: 0;\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineTopAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineRight = styled.rect<RectProps>`\n x: calc(100% - ${({ size }) => sizeToWeight[size]});\n y: -100%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 200%;\n animation: ${lineRightAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineBottom = styled.rect<RectProps>`\n x: 0%;\n y: calc(100% - ${({ size }) => sizeToWeight[size]});\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineBottomAnimation} 2.5s linear 0s infinite;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA6B;AAC7B,qBAAqB;AAErB,uBAA6B;AAM7B,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe1B,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezB,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe3B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAerB,MAAM,sBAAkB,yBAAO,mBAAI;AAAA,aAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO;AAAA;AAGlC,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA,WAG1B,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA;AAAA,eAE3B;AAAA;AAGR,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA,eAC5B;AAAA;AAGR,MAAM,kBAAkB,wBAAO;AAAA,mBACnB,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA;AAAA,WAEvC,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA;AAAA,eAE3B;AAAA;AAGR,MAAM,mBAAmB,wBAAO;AAAA;AAAA,mBAEpB,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA;AAAA,YAEtC,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA,eAC5B;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo } from "react";
|
|
4
|
-
import { Grid } from "@elliemae/ds-grid";
|
|
5
4
|
import { DSTooltipV3 } from "@elliemae/ds-tooltip";
|
|
6
5
|
import { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
7
6
|
import { uid } from "uid";
|
|
8
7
|
import { defaultProps, SquareIndicatorPropTypes } from "./react-desc-prop-types.js";
|
|
9
|
-
import { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from "./styled.js";
|
|
8
|
+
import { StyledContainer, StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from "./styled.js";
|
|
10
9
|
import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants.js";
|
|
11
10
|
const EmptyComp = (props) => /* @__PURE__ */ jsx(Fragment, { children: props.children });
|
|
12
11
|
const DSSquareIndicator = (props) => {
|
|
@@ -17,47 +16,58 @@ const DSSquareIndicator = (props) => {
|
|
|
17
16
|
const uniqueId = useMemo(() => uid(16), []);
|
|
18
17
|
const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);
|
|
19
18
|
const hexColor = useMemo(() => colorToHex[color], [color]);
|
|
20
|
-
return /* @__PURE__ */ jsx(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
19
|
+
return /* @__PURE__ */ jsx(
|
|
20
|
+
StyledContainer,
|
|
21
|
+
{
|
|
22
|
+
gutter: "xs",
|
|
23
|
+
justifyContent: "center",
|
|
24
|
+
role: "status",
|
|
25
|
+
"aria-label": text || "Loading...",
|
|
26
|
+
...globalAttributes,
|
|
27
|
+
children: /* @__PURE__ */ jsxs(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
|
|
28
|
+
/* @__PURE__ */ jsxs(
|
|
29
|
+
"svg",
|
|
30
|
+
{
|
|
31
|
+
width: sizeToPx[size],
|
|
32
|
+
height: sizeToPx[size],
|
|
33
|
+
style: {
|
|
34
|
+
display: "block",
|
|
35
|
+
margin: "auto"
|
|
36
|
+
},
|
|
37
|
+
"aria-hidden": "true",
|
|
38
|
+
children: [
|
|
39
|
+
/* @__PURE__ */ jsxs("defs", { children: [
|
|
40
|
+
/* @__PURE__ */ jsxs("linearGradient", { id: `${uniqueId}-lg1`, x1: "0", y1: "0", x2: "0", y2: "100%", children: [
|
|
41
|
+
/* @__PURE__ */ jsx("stop", { offset: "20%", stopColor: `${hexColor}FF` }),
|
|
42
|
+
/* @__PURE__ */ jsx("stop", { offset: "80%", stopColor: `${hexColor}00` })
|
|
43
|
+
] }),
|
|
44
|
+
/* @__PURE__ */ jsxs("linearGradient", { id: `${uniqueId}-lg2`, x1: "0", y1: "0", x2: "100%", y2: "0", children: [
|
|
45
|
+
/* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: `${hexColor}00` }),
|
|
46
|
+
/* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: `${hexColor}FF` })
|
|
47
|
+
] }),
|
|
48
|
+
/* @__PURE__ */ jsxs("linearGradient", { id: `${uniqueId}-lg3`, x1: "0", y1: "0", x2: "0", y2: "100%", children: [
|
|
49
|
+
/* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: `${hexColor}00` }),
|
|
50
|
+
/* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: `${hexColor}FF` })
|
|
51
|
+
] }),
|
|
52
|
+
/* @__PURE__ */ jsxs("linearGradient", { id: `${uniqueId}-lg4`, x1: "0", y1: "0", x2: "100%", y2: "0", children: [
|
|
53
|
+
/* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: `${hexColor}FF` }),
|
|
54
|
+
/* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: `${hexColor}00` })
|
|
55
|
+
] }),
|
|
56
|
+
/* @__PURE__ */ jsx("clipPath", { id: `${uniqueId}-lcp1`, children: /* @__PURE__ */ jsx("rect", { x: sizeToWeight[size], y: 0, width: "100%", height: sizeToWeight[size] }) }),
|
|
57
|
+
/* @__PURE__ */ jsx("clipPath", { id: `${uniqueId}-lcp2`, children: /* @__PURE__ */ jsx("rect", { x: paddedCoordinate, y: sizeToWeight[size], width: sizeToWeight[size], height: "100%" }) }),
|
|
58
|
+
/* @__PURE__ */ jsx("clipPath", { id: `${uniqueId}-lcp3`, children: /* @__PURE__ */ jsx("rect", { x: 0, y: paddedCoordinate, width: paddedCoordinate, height: sizeToWeight[size] }) })
|
|
59
|
+
] }),
|
|
60
|
+
/* @__PURE__ */ jsx(StyledLineLeft, { size, fill: `url(#${uniqueId}-lg1)` }),
|
|
61
|
+
/* @__PURE__ */ jsx(StyledLineTop, { size, fill: `url(#${uniqueId}-lg2)`, clipPath: `url(#${uniqueId}-lcp1)` }),
|
|
62
|
+
/* @__PURE__ */ jsx(StyledLineRight, { size, fill: `url(#${uniqueId}-lg3)`, clipPath: `url(#${uniqueId}-lcp2)` }),
|
|
63
|
+
/* @__PURE__ */ jsx(StyledLineBottom, { size, fill: `url(#${uniqueId}-lg4)`, clipPath: `url(#${uniqueId}-lcp3)` })
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
),
|
|
67
|
+
text !== "" && showText && /* @__PURE__ */ jsx("span", { style: { color: colorToHex[color], fontSize: sizeToTextSize[size] }, children: text })
|
|
68
|
+
] })
|
|
69
|
+
}
|
|
70
|
+
);
|
|
61
71
|
};
|
|
62
72
|
DSSquareIndicator.propTypes = SquareIndicatorPropTypes;
|
|
63
73
|
DSSquareIndicator.displayName = "DSSquareIndicator";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSSquareIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\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 } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledContainer, StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants.js';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSSquareIndicatorT.Props>>(props, defaultProps);\n // eslint-disable-next-line no-unused-vars\n const { height, width, cols, rows, wrap, ...globalAttributes } = useGetGlobalAttributes(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 const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);\n\n const hexColor = useMemo(() => colorToHex[color], [color]);\n\n return (\n <StyledContainer\n gutter=\"xs\"\n justifyContent=\"center\"\n role=\"status\"\n aria-label={text || 'Loading...'}\n {...globalAttributes}\n >\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <svg\n width={sizeToPx[size]}\n height={sizeToPx[size]}\n style={{\n display: 'block',\n margin: 'auto',\n }}\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={`${uniqueId}-lg1`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"20%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"80%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg2`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg3`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg4`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"90%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <clipPath id={`${uniqueId}-lcp1`}>\n <rect x={sizeToWeight[size]} y={0} width=\"100%\" height={sizeToWeight[size]} />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp2`}>\n <rect x={paddedCoordinate} y={sizeToWeight[size]} width={sizeToWeight[size]} height=\"100%\" />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp3`}>\n <rect x={0} y={paddedCoordinate} width={paddedCoordinate} height={sizeToWeight[size]} />\n </clipPath>\n </defs>\n <StyledLineLeft size={size} fill={`url(#${uniqueId}-lg1)`} />\n <StyledLineTop size={size} fill={`url(#${uniqueId}-lg2)`} clipPath={`url(#${uniqueId}-lcp1)`} />\n <StyledLineRight size={size} fill={`url(#${uniqueId}-lg3)`} clipPath={`url(#${uniqueId}-lcp2)`} />\n <StyledLineBottom size={size} fill={`url(#${uniqueId}-lg4)`} clipPath={`url(#${uniqueId}-lcp3)`} />\n </svg>\n {text !== '' && showText && (\n <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n )}\n </Wrapper>\n </StyledContainer>\n );\n};\n\nDSSquareIndicator.propTypes = SquareIndicatorPropTypes;\nDSSquareIndicator.displayName = 'DSSquareIndicator';\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { kfrm, styled } from "@elliemae/ds-system";
|
|
3
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
3
4
|
import { sizeToWeight } from "./constants.js";
|
|
4
5
|
const lineLeftAnimation = kfrm`
|
|
5
6
|
0% {
|
|
@@ -57,6 +58,9 @@ const lineBottomAnimation = kfrm`
|
|
|
57
58
|
width: 200%;
|
|
58
59
|
}
|
|
59
60
|
`;
|
|
61
|
+
const StyledContainer = styled(Grid)`
|
|
62
|
+
z-index: ${({ theme }) => theme.zIndex.loader};
|
|
63
|
+
`;
|
|
60
64
|
const StyledLineLeft = styled.rect`
|
|
61
65
|
x: 0;
|
|
62
66
|
y: 0%;
|
|
@@ -86,6 +90,7 @@ const StyledLineBottom = styled.rect`
|
|
|
86
90
|
animation: ${lineBottomAnimation} 2.5s linear 0s infinite;
|
|
87
91
|
`;
|
|
88
92
|
export {
|
|
93
|
+
StyledContainer,
|
|
89
94
|
StyledLineBottom,
|
|
90
95
|
StyledLineLeft,
|
|
91
96
|
StyledLineRight,
|
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", "import { kfrm, styled } from '@elliemae/ds-system';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { sizeToWeight } from './constants.js';\n\ninterface RectProps {\n size: Required<DSSquareIndicatorT.Props>['size'];\n}\n\nconst lineLeftAnimation = kfrm`\n 0% {\n y: 100%;\n height: 100%;\n }\n 12.5%, 50% {\n y: 0;\n height: 100%;\n }\n 62.5%, 100% {\n y: -100%;\n height: 100%;\n }\n`;\n\nconst lineTopAnimation = kfrm`\n 0% {\n x: -100%;\n width: 0%;\n }\n 25%, 50% {\n x: -100%;\n width: 200%;\n }\n 75%, 100% {\n x: 100%;\n width: 200%;\n }\n`;\n\nconst lineRightAnimation = kfrm`\n 0%, 12.5% {\n y: -100%;\n height: 0%;\n }\n 37.5%, 62.5% {\n y: -100%;\n height: 200%;\n }\n 87.5%, 100% {\n y: 100%;\n height: 200%;\n }\n`;\n\nconst lineBottomAnimation = kfrm`\n 0%, 25% {\n x: 200%;\n width: 200%;\n }\n 50%, 75% {\n x: 0%;\n width: 200%;\n }\n 100% {\n x: -200%;\n width: 200%;\n }\n`;\n\nexport const StyledLineLeft = styled.rect<RectProps>`\n x: 0;\n y: 0%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 100%;\n animation: ${lineLeftAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineTop = styled.rect<RectProps>`\n x: -100%;\n y: 0;\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineTopAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineRight = styled.rect<RectProps>`\n x: calc(100% - ${({ size }) => sizeToWeight[size]});\n y: -100%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 200%;\n animation: ${lineRightAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineBottom = styled.rect<RectProps>`\n x: 0%;\n y: calc(100% - ${({ size }) => sizeToWeight[size]});\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineBottomAnimation} 2.5s linear 0s infinite;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,MAAM,cAAc;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { sizeToWeight } from './constants.js';\n\ninterface RectProps {\n size: Required<DSSquareIndicatorT.Props>['size'];\n}\n\nconst lineLeftAnimation = kfrm`\n 0% {\n y: 100%;\n height: 100%;\n }\n 12.5%, 50% {\n y: 0;\n height: 100%;\n }\n 62.5%, 100% {\n y: -100%;\n height: 100%;\n }\n`;\n\nconst lineTopAnimation = kfrm`\n 0% {\n x: -100%;\n width: 0%;\n }\n 25%, 50% {\n x: -100%;\n width: 200%;\n }\n 75%, 100% {\n x: 100%;\n width: 200%;\n }\n`;\n\nconst lineRightAnimation = kfrm`\n 0%, 12.5% {\n y: -100%;\n height: 0%;\n }\n 37.5%, 62.5% {\n y: -100%;\n height: 200%;\n }\n 87.5%, 100% {\n y: 100%;\n height: 200%;\n }\n`;\n\nconst lineBottomAnimation = kfrm`\n 0%, 25% {\n x: 200%;\n width: 200%;\n }\n 50%, 75% {\n x: 0%;\n width: 200%;\n }\n 100% {\n x: -200%;\n width: 200%;\n }\n`;\n\nexport const StyledContainer = styled(Grid)`\n z-index: ${({ theme }) => theme.zIndex.loader};\n`;\n\nexport const StyledLineLeft = styled.rect<RectProps>`\n x: 0;\n y: 0%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 100%;\n animation: ${lineLeftAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineTop = styled.rect<RectProps>`\n x: -100%;\n y: 0;\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineTopAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineRight = styled.rect<RectProps>`\n x: calc(100% - ${({ size }) => sizeToWeight[size]});\n y: -100%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 200%;\n animation: ${lineRightAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineBottom = styled.rect<RectProps>`\n x: 0%;\n y: calc(100% - ${({ size }) => sizeToWeight[size]});\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineBottomAnimation} 2.5s linear 0s infinite;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,MAAM,cAAc;AAC7B,SAAS,YAAY;AAErB,SAAS,oBAAoB;AAM7B,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe1B,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezB,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe3B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAerB,MAAM,kBAAkB,OAAO,IAAI;AAAA,aAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO;AAAA;AAGlC,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,WAG1B,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI;AAAA;AAAA,eAE3B;AAAA;AAGR,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI;AAAA,eAC5B;AAAA;AAGR,MAAM,kBAAkB,OAAO;AAAA,mBACnB,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI;AAAA;AAAA,WAEvC,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI;AAAA;AAAA,eAE3B;AAAA;AAGR,MAAM,mBAAmB,OAAO;AAAA;AAAA,mBAEpB,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI;AAAA;AAAA,YAEtC,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI;AAAA,eAC5B;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/styled.d.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import type { DSSquareIndicatorT } from './react-desc-prop-types.js';
|
|
2
3
|
interface RectProps {
|
|
3
4
|
size: Required<DSSquareIndicatorT.Props>['size'];
|
|
4
5
|
}
|
|
6
|
+
export declare const StyledContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
5
7
|
export declare const StyledLineLeft: import("styled-components").StyledComponent<"rect", import("@elliemae/ds-system").Theme, RectProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"rect">, never>;
|
|
6
8
|
export declare const StyledLineTop: import("styled-components").StyledComponent<"rect", import("@elliemae/ds-system").Theme, RectProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"rect">, never>;
|
|
7
9
|
export declare const StyledLineRight: import("styled-components").StyledComponent<"rect", import("@elliemae/ds-system").Theme, RectProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"rect">, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-square-indicator",
|
|
3
|
-
"version": "3.27.0-next.
|
|
3
|
+
"version": "3.27.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
|
|
6
6
|
"files": [
|
|
@@ -45,15 +45,15 @@
|
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"styled-components": "~5.3.9",
|
|
47
47
|
"uid": "^2.0.1",
|
|
48
|
-
"@elliemae/ds-grid": "3.27.0-next.
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-props-helpers": "3.27.0-next.
|
|
48
|
+
"@elliemae/ds-grid": "3.27.0-next.2",
|
|
49
|
+
"@elliemae/ds-system": "3.27.0-next.2",
|
|
50
|
+
"@elliemae/ds-tooltip": "3.27.0-next.2",
|
|
51
|
+
"@elliemae/ds-props-helpers": "3.27.0-next.2"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
55
55
|
"styled-components": "~5.3.9",
|
|
56
|
-
"@elliemae/ds-monorepo-devops": "3.27.0-next.
|
|
56
|
+
"@elliemae/ds-monorepo-devops": "3.27.0-next.2"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"react": "^17.0.2",
|