@elliemae/ds-circular-progress-indicator 3.45.0-rc.0 → 3.45.0-rc.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/v2/DSCircularIndeterminateIndicator.js +2 -1
- package/dist/cjs/v2/DSCircularIndeterminateIndicator.js.map +2 -2
- package/dist/cjs/v2/react-desc-prop-types.js +2 -0
- package/dist/cjs/v2/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/v2/styled.js +1 -1
- package/dist/cjs/v2/styled.js.map +2 -2
- package/dist/esm/v2/DSCircularIndeterminateIndicator.js +2 -1
- package/dist/esm/v2/DSCircularIndeterminateIndicator.js.map +2 -2
- package/dist/esm/v2/react-desc-prop-types.js +2 -0
- package/dist/esm/v2/react-desc-prop-types.js.map +2 -2
- package/dist/esm/v2/styled.js +1 -1
- package/dist/esm/v2/styled.js.map +2 -2
- package/dist/types/v2/react-desc-prop-types.d.ts +5 -5
- package/dist/types/v2/styled.d.ts +3 -1
- package/package.json +7 -7
|
@@ -49,7 +49,7 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
49
49
|
);
|
|
50
50
|
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
|
|
51
51
|
const xstyledAttributes = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
|
|
52
|
-
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
|
|
52
|
+
const { size, color, text, showText, withTooltip, inline, tooltipStartPlacementPreference } = propsWithDefault;
|
|
53
53
|
const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : EmptyComp, [withTooltip]);
|
|
54
54
|
const uniqueId = (0, import_react.useMemo)(() => (0, import_uid.uid)(16), []);
|
|
55
55
|
const circleRadius = (0, import_react.useMemo)(() => (import_constants.sizeToPx[size] - Number.parseInt(import_constants.sizeToWeight[size], 10)) / 2, [size]);
|
|
@@ -58,6 +58,7 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
58
58
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
59
|
import_styled.StyledContainer,
|
|
60
60
|
{
|
|
61
|
+
inline,
|
|
61
62
|
gutter: "xs",
|
|
62
63
|
justifyContent: "center",
|
|
63
64
|
role: "status",
|
|
@@ -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, useCallback } from 'react';\n// until we dont split the packages for v2 we still import tooltip from ds-tooltip\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport type { DSGridT } from '@elliemae/ds-grid';\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 = useGetGlobalAttributes<\n DSCircularIndeterminateIndicatorT.InternalProps,\n HTMLDivElement,\n DSGridT.Props\n >(propsWithDefault);\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 aria-hidden=\"true\"\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.displayName = DSCircularIndeterminateIndicatorName;\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwB0B;AAvBjD,mBAA4C;AAE5C,wBAA4B;AAG5B,8BAKO;AACP,iBAAoB;AAEpB,mCAAsE;AACtE,uBAMO;AACP,oBAA8F;AAE9F,MAAM,YAAgC,CAAC,UAAU,2EAAG,gBAAM,UAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,QAAM,uBAAmB,gDAIvB,gBAAgB;AAClB,QAAM,wBAAoB,4CAAmB,gBAAgB;AAE7D,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,gCAAgC,IAAI;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo, useCallback } from 'react';\n// until we dont split the packages for v2 we still import tooltip from ds-tooltip\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport type { DSGridT } from '@elliemae/ds-grid';\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 = useGetGlobalAttributes<\n DSCircularIndeterminateIndicatorT.InternalProps,\n HTMLDivElement,\n DSGridT.Props\n >(propsWithDefault);\n const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n\n const { size, color, text, showText, withTooltip, inline, 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 inline={inline}\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 aria-hidden=\"true\"\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.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
|
}
|
|
@@ -40,6 +40,7 @@ const defaultProps = {
|
|
|
40
40
|
text: "",
|
|
41
41
|
showText: true,
|
|
42
42
|
withTooltip: false,
|
|
43
|
+
inline: false,
|
|
43
44
|
tooltipStartPlacementPreference: "bottom"
|
|
44
45
|
};
|
|
45
46
|
const CircularIndeterminateIndicatorPropTypes = {
|
|
@@ -49,6 +50,7 @@ const CircularIndeterminateIndicatorPropTypes = {
|
|
|
49
50
|
text: import_ds_props_helpers.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
|
|
50
51
|
showText: import_ds_props_helpers.PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
|
|
51
52
|
withTooltip: import_ds_props_helpers.PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
|
|
53
|
+
inline: import_ds_props_helpers.PropTypes.bool.description("Whether to show the indicator inline or not").defaultValue(false),
|
|
52
54
|
tooltipStartPlacementPreference: import_ds_props_helpers.PropTypes.oneOf([
|
|
53
55
|
"top-start",
|
|
54
56
|
"top",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/react-desc-prop-types.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable max-lines */\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { type DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAqD;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable max-lines */\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { type DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.DefaultProps = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n inline: false,\n tooltipStartPlacementPreference: 'bottom',\n};\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n type TShirtSizes = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n type SupportedColors = 'light' | 'dark';\n export interface DefaultProps {\n size: TShirtSizes;\n color: SupportedColors;\n text: string;\n showText: boolean;\n withTooltip: boolean;\n inline: boolean;\n tooltipStartPlacementPreference: DSTooltipV3T.Placement;\n }\n export interface OptionalProps {}\n export interface RequiredProps {}\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const CircularIndeterminateIndicatorPropTypes = {\n ...globalAttributesPropTypes,\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n withTooltip: PropTypes.bool\n .description('Whether to include a tooltip that shows the optional text on hover')\n .defaultValue(false),\n inline: PropTypes.bool.description('Whether to show the indicator inline or not').defaultValue(false),\n tooltipStartPlacementPreference: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('start placement preference for the tooltip')\n .defaultValue('center'),\n} as ValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAqD;AAG9C,MAAM,eAA+D;AAAA,EAC1E,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,iCAAiC;AACnC;AAgCO,MAAM,0CAA0C;AAAA,EACrD,GAAG;AAAA,EACH,MAAM,kCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,kCAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,kCAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,kCAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,QAAQ,kCAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAAA,EACpG,iCAAiC,kCAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/v2/styled.js
CHANGED
|
@@ -128,7 +128,7 @@ const StyledContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
128
128
|
name: import_constants.DSCircularIndeterminateIndicatorName,
|
|
129
129
|
slot: import_constants.DSCircularIndeterminateIndicatorSlots.ROOT
|
|
130
130
|
})`
|
|
131
|
-
|
|
131
|
+
${({ inline, theme }) => !inline ? `z-index: ${theme.zIndex.loader}` : ``}
|
|
132
132
|
`;
|
|
133
133
|
const StyledSvg = (0, import_ds_system.styled)("svg", {
|
|
134
134
|
name: import_constants.DSCircularIndeterminateIndicatorName,
|
|
@@ -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';\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})
|
|
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,CAAC,IAAI,aAAa,KAAK,CAAC,CAAC;AAC9D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,CAAC,IAAI,aAAa,IAAI,CAAC,CAAC;AAE9D,SAAO;AAAA;AAAA,4BAEmB,QAAQ;AAAA;AAAA;AAAA,4BAGR,QAAQ;AAAA;AAAA;AAAA,4BAGR,QAAQ;AAAA;AAAA;AAGpC;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,CAAC,IAAI,aAAa,KAAK,CAAC,CAAC;AAC9D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,CAAC,IAAI,aAAa,IAAI,CAAC,CAAC;AAE9D,SAAO;AAAA;AAAA,4BAEmB,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAIR,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAIR,QAAQ;AAAA,6BACP,aAAa,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGrB,QAAQ;AAAA,6BACP,aAAa,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGrB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAGlD;AAEO,MAAM,sBAAkB,yBAAO,qBAAM;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;AAAA,
|
|
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})<{ inline: boolean }>`\n ${({ inline, theme }) => (!inline ? `z-index: ${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:\n ${rotateAnimation} 10s linear infinite,\n ${(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,CAAC,IAAI,aAAa,KAAK,CAAC,CAAC;AAC9D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,CAAC,IAAI,aAAa,IAAI,CAAC,CAAC;AAE9D,SAAO;AAAA;AAAA,4BAEmB,QAAQ;AAAA;AAAA;AAAA,4BAGR,QAAQ;AAAA;AAAA;AAAA,4BAGR,QAAQ;AAAA;AAAA;AAGpC;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,CAAC,IAAI,aAAa,KAAK,CAAC,CAAC;AAC9D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,CAAC,IAAI,aAAa,IAAI,CAAC,CAAC;AAE9D,SAAO;AAAA;AAAA,4BAEmB,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAIR,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAIR,QAAQ;AAAA,6BACP,aAAa,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGrB,QAAQ;AAAA,6BACP,aAAa,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGrB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAGlD;AAEO,MAAM,sBAAkB,yBAAO,qBAAM;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;AAAA,IACG,CAAC,EAAE,QAAQ,MAAM,MAAO,CAAC,SAAS,YAAY,MAAM,OAAO,MAAM,KAAK,EAAG;AAAA;AAGtE,MAAM,gBAAY,yBAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKc,kBAAkB;AAAA;AAG1B,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA,MAG3B,eAAe;AAAA,MACf,CAAC,UAAU,oBAAoB,MAAM,CAAC,CAAC;AAAA;AAGtC,MAAM,aAAa,wBAAO;AAAA;AAAA,eAElB,eAAe;AAAA;AAGvB,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC,CAAC;AAAA,eACjC,CAAC,UAAU,MAAM,QAAQ;AAAA,uBACjB,CAAC,UAAU,MAAM,QAAQ;AAAA;AAGzC,MAAM,kBAAc,yBAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -26,7 +26,7 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
26
26
|
);
|
|
27
27
|
const globalAttributes = useGetGlobalAttributes(propsWithDefault);
|
|
28
28
|
const xstyledAttributes = useGetXstyledProps(propsWithDefault);
|
|
29
|
-
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
|
|
29
|
+
const { size, color, text, showText, withTooltip, inline, tooltipStartPlacementPreference } = propsWithDefault;
|
|
30
30
|
const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
|
|
31
31
|
const uniqueId = useMemo(() => uid(16), []);
|
|
32
32
|
const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);
|
|
@@ -35,6 +35,7 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
35
35
|
return /* @__PURE__ */ jsx(
|
|
36
36
|
StyledContainer,
|
|
37
37
|
{
|
|
38
|
+
inline,
|
|
38
39
|
gutter: "xs",
|
|
39
40
|
justifyContent: "center",
|
|
40
41
|
role: "status",
|
|
@@ -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, useCallback } from 'react';\n// until we dont split the packages for v2 we still import tooltip from ds-tooltip\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport type { DSGridT } from '@elliemae/ds-grid';\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 = useGetGlobalAttributes<\n DSCircularIndeterminateIndicatorT.InternalProps,\n HTMLDivElement,\n DSGridT.Props\n >(propsWithDefault);\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 aria-hidden=\"true\"\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.displayName = DSCircularIndeterminateIndicatorName;\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACwB0B,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo, useCallback } from 'react';\n// until we dont split the packages for v2 we still import tooltip from ds-tooltip\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport type { DSGridT } from '@elliemae/ds-grid';\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 = useGetGlobalAttributes<\n DSCircularIndeterminateIndicatorT.InternalProps,\n HTMLDivElement,\n DSGridT.Props\n >(propsWithDefault);\n const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n\n const { size, color, text, showText, withTooltip, inline, 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 inline={inline}\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 aria-hidden=\"true\"\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.displayName = DSCircularIndeterminateIndicatorName;\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,6 +6,7 @@ const defaultProps = {
|
|
|
6
6
|
text: "",
|
|
7
7
|
showText: true,
|
|
8
8
|
withTooltip: false,
|
|
9
|
+
inline: false,
|
|
9
10
|
tooltipStartPlacementPreference: "bottom"
|
|
10
11
|
};
|
|
11
12
|
const CircularIndeterminateIndicatorPropTypes = {
|
|
@@ -15,6 +16,7 @@ const CircularIndeterminateIndicatorPropTypes = {
|
|
|
15
16
|
text: PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
|
|
16
17
|
showText: PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
|
|
17
18
|
withTooltip: PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
|
|
19
|
+
inline: PropTypes.bool.description("Whether to show the indicator inline or not").defaultValue(false),
|
|
18
20
|
tooltipStartPlacementPreference: PropTypes.oneOf([
|
|
19
21
|
"top-start",
|
|
20
22
|
"top",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable max-lines */\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { type DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,iCAAiC;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable max-lines */\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { type DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.DefaultProps = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n inline: false,\n tooltipStartPlacementPreference: 'bottom',\n};\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n type TShirtSizes = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n type SupportedColors = 'light' | 'dark';\n export interface DefaultProps {\n size: TShirtSizes;\n color: SupportedColors;\n text: string;\n showText: boolean;\n withTooltip: boolean;\n inline: boolean;\n tooltipStartPlacementPreference: DSTooltipV3T.Placement;\n }\n export interface OptionalProps {}\n export interface RequiredProps {}\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const CircularIndeterminateIndicatorPropTypes = {\n ...globalAttributesPropTypes,\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n withTooltip: PropTypes.bool\n .description('Whether to include a tooltip that shows the optional text on hover')\n .defaultValue(false),\n inline: PropTypes.bool.description('Whether to show the indicator inline or not').defaultValue(false),\n tooltipStartPlacementPreference: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('start placement preference for the tooltip')\n .defaultValue('center'),\n} as ValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,iCAAiC;AAG9C,MAAM,eAA+D;AAAA,EAC1E,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,iCAAiC;AACnC;AAgCO,MAAM,0CAA0C;AAAA,EACrD,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,UAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,UAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,QAAQ,UAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAAA,EACpG,iCAAiC,UAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v2/styled.js
CHANGED
|
@@ -90,7 +90,7 @@ const StyledContainer = styled(Grid, {
|
|
|
90
90
|
name: DSCircularIndeterminateIndicatorName,
|
|
91
91
|
slot: DSCircularIndeterminateIndicatorSlots.ROOT
|
|
92
92
|
})`
|
|
93
|
-
|
|
93
|
+
${({ inline, theme }) => !inline ? `z-index: ${theme.zIndex.loader}` : ``}
|
|
94
94
|
`;
|
|
95
95
|
const StyledSvg = styled("svg", {
|
|
96
96
|
name: DSCircularIndeterminateIndicatorName,
|
|
@@ -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';\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})
|
|
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,CAAC,IAAI,aAAa,KAAK,CAAC,CAAC;AAC9D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,CAAC,IAAI,aAAa,IAAI,CAAC,CAAC;AAE9D,SAAO;AAAA;AAAA,4BAEmB,QAAQ;AAAA;AAAA;AAAA,4BAGR,QAAQ;AAAA;AAAA;AAAA,4BAGR,QAAQ;AAAA;AAAA;AAGpC;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,CAAC,IAAI,aAAa,KAAK,CAAC,CAAC;AAC9D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,CAAC,IAAI,aAAa,IAAI,CAAC,CAAC;AAE9D,SAAO;AAAA;AAAA,4BAEmB,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAIR,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAIR,QAAQ;AAAA,6BACP,aAAa,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGrB,QAAQ;AAAA,6BACP,aAAa,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGrB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAGlD;AAEO,MAAM,kBAAkB,OAAO,MAAM;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;AAAA,
|
|
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})<{ inline: boolean }>`\n ${({ inline, theme }) => (!inline ? `z-index: ${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:\n ${rotateAnimation} 10s linear infinite,\n ${(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,CAAC,IAAI,aAAa,KAAK,CAAC,CAAC;AAC9D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,CAAC,IAAI,aAAa,IAAI,CAAC,CAAC;AAE9D,SAAO;AAAA;AAAA,4BAEmB,QAAQ;AAAA;AAAA;AAAA,4BAGR,QAAQ;AAAA;AAAA;AAAA,4BAGR,QAAQ;AAAA;AAAA;AAGpC;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,CAAC,IAAI,aAAa,KAAK,CAAC,CAAC;AAC9D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,CAAC,IAAI,aAAa,IAAI,CAAC,CAAC;AAE9D,SAAO;AAAA;AAAA,4BAEmB,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAIR,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAIR,QAAQ;AAAA,6BACP,aAAa,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGrB,QAAQ;AAAA,6BACP,aAAa,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGrB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAGlD;AAEO,MAAM,kBAAkB,OAAO,MAAM;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;AAAA,IACG,CAAC,EAAE,QAAQ,MAAM,MAAO,CAAC,SAAS,YAAY,MAAM,OAAO,MAAM,KAAK,EAAG;AAAA;AAGtE,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKc,kBAAkB;AAAA;AAG1B,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA,MAG3B,eAAe;AAAA,MACf,CAAC,UAAU,oBAAoB,MAAM,CAAC,CAAC;AAAA;AAGtC,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB,eAAe;AAAA;AAGvB,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC,CAAC;AAAA,eACjC,CAAC,UAAU,MAAM,QAAQ;AAAA,uBACjB,CAAC,UAAU,MAAM,QAAQ;AAAA;AAGzC,MAAM,cAAc,OAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
|
|
1
|
+
import type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';
|
|
2
2
|
import { type DSTooltipV3T } from '@elliemae/ds-tooltip-v3';
|
|
3
|
-
import type { WeakValidationMap } from 'react';
|
|
4
3
|
export declare const defaultProps: DSCircularIndeterminateIndicatorT.DefaultProps;
|
|
5
4
|
export declare namespace DSCircularIndeterminateIndicatorT {
|
|
6
5
|
type TShirtSizes = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
|
|
@@ -11,15 +10,16 @@ export declare namespace DSCircularIndeterminateIndicatorT {
|
|
|
11
10
|
text: string;
|
|
12
11
|
showText: boolean;
|
|
13
12
|
withTooltip: boolean;
|
|
13
|
+
inline: boolean;
|
|
14
14
|
tooltipStartPlacementPreference: DSTooltipV3T.Placement;
|
|
15
15
|
}
|
|
16
16
|
interface OptionalProps {
|
|
17
17
|
}
|
|
18
18
|
interface RequiredProps {
|
|
19
19
|
}
|
|
20
|
-
interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps
|
|
20
|
+
interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps>, XstyledProps, RequiredProps {
|
|
21
21
|
}
|
|
22
|
-
interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps
|
|
22
|
+
interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps>, XstyledProps, RequiredProps {
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
-
export declare const CircularIndeterminateIndicatorPropTypes:
|
|
25
|
+
export declare const CircularIndeterminateIndicatorPropTypes: ValidationMap<unknown>;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
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,
|
|
2
|
+
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, {
|
|
3
|
+
inline: boolean;
|
|
4
|
+
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
3
5
|
export declare const StyledSvg: import("styled-components").StyledComponent<"svg", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"svg">, never>;
|
|
4
6
|
export declare const StyledPath: import("styled-components").StyledComponent<"path", import("@elliemae/ds-system").Theme, {
|
|
5
7
|
r: number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-circular-progress-indicator",
|
|
3
|
-
"version": "3.45.0-rc.
|
|
3
|
+
"version": "3.45.0-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Circular progress indicator",
|
|
6
6
|
"files": [
|
|
@@ -54,15 +54,15 @@
|
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"styled-components": "~5.3.9",
|
|
56
56
|
"uid": "~2.0.1",
|
|
57
|
-
"@elliemae/ds-classnames": "3.45.0-rc.
|
|
58
|
-
"@elliemae/ds-grid": "3.45.0-rc.
|
|
59
|
-
"@elliemae/ds-props-helpers": "3.45.0-rc.
|
|
60
|
-
"@elliemae/ds-system": "3.45.0-rc.
|
|
61
|
-
"@elliemae/ds-tooltip": "3.45.0-rc.
|
|
57
|
+
"@elliemae/ds-classnames": "3.45.0-rc.2",
|
|
58
|
+
"@elliemae/ds-grid": "3.45.0-rc.2",
|
|
59
|
+
"@elliemae/ds-props-helpers": "3.45.0-rc.2",
|
|
60
|
+
"@elliemae/ds-system": "3.45.0-rc.2",
|
|
61
|
+
"@elliemae/ds-tooltip": "3.45.0-rc.2"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
65
|
-
"@elliemae/ds-monorepo-devops": "3.45.0-rc.
|
|
65
|
+
"@elliemae/ds-monorepo-devops": "3.45.0-rc.2"
|
|
66
66
|
},
|
|
67
67
|
"peerDependencies": {
|
|
68
68
|
"lodash": "^4.17.21",
|