@zendeskgarden/react-loaders 9.7.2 → 9.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/esm/elements/Dots.js +11 -49
  2. package/dist/esm/elements/Progress.js +1 -1
  3. package/dist/esm/styled/StyledDots.js +1 -1
  4. package/dist/esm/styled/StyledInline.js +1 -1
  5. package/dist/esm/styled/StyledLoadingPlaceholder.js +1 -1
  6. package/dist/esm/styled/StyledProgress.js +2 -2
  7. package/dist/esm/styled/StyledSVG.js +12 -2
  8. package/dist/esm/styled/StyledSkeleton.js +1 -1
  9. package/dist/esm/utils/animations.js +2 -1
  10. package/dist/index.cjs.js +30 -55
  11. package/dist/typings/styled/StyledDots.d.ts +1 -0
  12. package/dist/typings/styled/StyledSVG.d.ts +1 -0
  13. package/dist/typings/utils/animations.d.ts +1 -0
  14. package/package.json +3 -3
package/dist/esm/elements/Dots.js CHANGED
@@ -4,13 +4,10 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React, { forwardRef, useContext, useRef, useEffect } from 'react';
7
+ import React, { forwardRef } from 'react';
8
8
  import PropTypes from 'prop-types';
9
- import { ThemeContext } from 'styled-components';
10
- import { useSchedule } from '@zendeskgarden/container-schedule';
11
- import { useDocument } from '@zendeskgarden/react-theming';
12
9
  import { StyledDotsCircleOne, StyledDotsCircleTwo, StyledDotsCircleThree } from '../styled/StyledDots.js';
13
- import { StyledLoadingPlaceholder } from '../styled/StyledLoadingPlaceholder.js';
10
+ import '../styled/StyledLoadingPlaceholder.js';
14
11
  import '../styled/StyledProgress.js';
15
12
  import '../styled/StyledSkeleton.js';
16
13
  import '../styled/StyledSpinnerCircle.js';
@@ -20,60 +17,31 @@ import '../styled/StyledInline.js';
20
17
  const COMPONENT_ID = 'loaders.dots';
21
18
  const Dots = forwardRef((_ref, ref) => {
22
19
  let {
23
- size,
24
- color,
25
- duration,
26
- delayMS,
20
+ size = 'inherit',
21
+ color = 'inherit',
22
+ duration = 1250,
23
+ delayMS = 750,
27
24
  ...other
28
25
  } = _ref;
29
- const theme = useContext(ThemeContext);
30
- const environment = useDocument(theme);
31
- const canTransformSVG = useRef(null);
32
- if (environment && canTransformSVG.current === null) {
33
- const svg = environment.createElementNS('http://www.w3.org/2000/svg', 'svg');
34
- canTransformSVG.current = 'transform' in svg;
35
- }
36
- const {
37
- delayComplete
38
- } = useSchedule({
39
- duration,
40
- delayMS,
41
- loop: true
42
- });
43
- const dotOne = useRef(null);
44
- const dotTwo = useRef(null);
45
- const dotThree = useRef(null);
46
- useEffect(() => {
47
- if (!canTransformSVG.current && delayComplete) {
48
- const transforms = [window.getComputedStyle(dotOne.current).getPropertyValue('transform'), window.getComputedStyle(dotTwo.current).getPropertyValue('transform'), window.getComputedStyle(dotThree.current).getPropertyValue('transform')];
49
- dotOne.current.setAttribute('transform', transforms[0]);
50
- dotTwo.current.setAttribute('transform', transforms[1]);
51
- dotThree.current.setAttribute('transform', transforms[2]);
52
- }
53
- });
54
- if (!delayComplete && delayMS !== 0) {
55
- return React.createElement(StyledLoadingPlaceholder, {
56
- $fontSize: size
57
- }, "\xA0");
58
- }
59
26
  return React.createElement(StyledSVG, Object.assign({
60
27
  "data-garden-id": COMPONENT_ID,
61
28
  ref: ref,
62
29
  $fontSize: size,
63
30
  $color: color,
64
31
  $width: "80",
65
- $height: "72"
32
+ $height: "72",
33
+ $delayShow: delayMS
66
34
  }, other), React.createElement("g", {
67
35
  fill: "currentColor"
68
36
  }, React.createElement(StyledDotsCircleOne, {
69
37
  $duration: duration,
70
- ref: dotOne
38
+ $delay: delayMS
71
39
  }), React.createElement(StyledDotsCircleTwo, {
72
40
  $duration: duration,
73
- ref: dotTwo
41
+ $delay: delayMS
74
42
  }), React.createElement(StyledDotsCircleThree, {
75
43
  $duration: duration,
76
- ref: dotThree
44
+ $delay: delayMS
77
45
  })));
78
46
  });
79
47
  Dots.displayName = 'Dots';
@@ -83,11 +51,5 @@ Dots.propTypes = {
83
51
  color: PropTypes.string,
84
52
  delayMS: PropTypes.number
85
53
  };
86
- Dots.defaultProps = {
87
- size: 'inherit',
88
- color: 'inherit',
89
- duration: 1250,
90
- delayMS: 750
91
- };
92
54
 
93
55
  export { Dots };
package/dist/esm/elements/Progress.js CHANGED
@@ -32,7 +32,7 @@ const Progress = React.forwardRef((_ref, ref) => {
32
32
  return (
33
33
  React.createElement(StyledProgressBackground, Object.assign({
34
34
  "data-garden-id": COMPONENT_ID,
35
- "data-garden-version": '9.7.2',
35
+ "data-garden-version": '9.9.0',
36
36
  "aria-valuemax": 100,
37
37
  "aria-valuemin": 0,
38
38
  "aria-valuenow": percentage,
package/dist/esm/styled/StyledDots.js CHANGED
@@ -15,7 +15,7 @@ const StyledDotsCircle = styled.circle.attrs({
15
15
  componentId: "sc-1ltah7e-0"
16
16
  })([""]);
17
17
  const animationStyles = (animationName, props) => {
18
- return css(["animation:", " ", "ms linear infinite;"], animationName, props.$duration);
18
+ return css(["animation:", " ", "ms ", "ms linear infinite;"], animationName, props.$duration, props.$delay);
19
19
  };
20
20
  const StyledDotsCircleOne = styled(StyledDotsCircle).attrs({
21
21
  cx: 9
package/dist/esm/styled/StyledInline.js CHANGED
@@ -38,7 +38,7 @@ const StyledCircle = styled.circle.attrs({
38
38
  })([""]);
39
39
  const StyledInline = styled.svg.attrs(props => ({
40
40
  'data-garden-id': COMPONENT_ID,
41
- 'data-garden-version': '9.7.2',
41
+ 'data-garden-version': '9.9.0',
42
42
  viewBox: '0 0 16 4',
43
43
  width: props.$size,
44
44
  height: props.$size * 0.25
package/dist/esm/styled/StyledLoadingPlaceholder.js CHANGED
@@ -26,7 +26,7 @@ const sizeStyles = _ref => {
26
26
  };
27
27
  const StyledLoadingPlaceholder = styled.div.attrs({
28
28
  'data-garden-id': COMPONENT_ID,
29
- 'data-garden-version': '9.7.2',
29
+ 'data-garden-version': '9.9.0',
30
30
  role: 'progressbar'
31
31
  }).withConfig({
32
32
  displayName: "StyledLoadingPlaceholder",
package/dist/esm/styled/StyledProgress.js CHANGED
@@ -55,7 +55,7 @@ const colorStyles = _ref => {
55
55
  };
56
56
  const StyledProgressBackground = styled.div.attrs({
57
57
  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
58
- 'data-garden-version': '9.7.2'
58
+ 'data-garden-version': '9.9.0'
59
59
  }).withConfig({
60
60
  displayName: "StyledProgress__StyledProgressBackground",
61
61
  componentId: "sc-2g8w4s-0"
@@ -63,7 +63,7 @@ const StyledProgressBackground = styled.div.attrs({
63
63
  const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
64
64
  const StyledProgressIndicator = styled.div.attrs({
65
65
  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
66
- 'data-garden-version': '9.7.2'
66
+ 'data-garden-version': '9.9.0'
67
67
  }).withConfig({
68
68
  displayName: "StyledProgress__StyledProgressIndicator",
69
69
  componentId: "sc-2g8w4s-1"
package/dist/esm/styled/StyledSVG.js CHANGED
@@ -7,6 +7,7 @@
7
7
  import styled, { css } from 'styled-components';
8
8
  import { getValueAndUnit } from 'polished';
9
9
  import { componentStyles, getColor } from '@zendeskgarden/react-theming';
10
+ import { delayedVisibilityKeyframes } from '../utils/animations.js';
10
11
 
11
12
  const colorStyles = _ref => {
12
13
  let {
@@ -37,8 +38,17 @@ const sizeStyles = _ref2 => {
37
38
  }
38
39
  return css(["width:", ";height:", ";font-size:", ";"], $containerWidth, $containerHeight, fontSize);
39
40
  };
41
+ const delayedVisibilityStyles = _ref3 => {
42
+ let {
43
+ $delayShow
44
+ } = _ref3;
45
+ if ($delayShow && $delayShow !== 0) {
46
+ return css(["animation:", " 1ms ", "ms linear 1 forwards;visibility:hidden;"], delayedVisibilityKeyframes, $delayShow);
47
+ }
48
+ return undefined;
49
+ };
40
50
  const StyledSVG = styled.svg.attrs(props => ({
41
- 'data-garden-version': '9.7.2',
51
+ 'data-garden-version': '9.9.0',
42
52
  xmlns: 'http://www.w3.org/2000/svg',
43
53
  focusable: 'false',
44
54
  viewBox: `0 0 ${props.$width} ${props.$height}`,
@@ -46,6 +56,6 @@ const StyledSVG = styled.svg.attrs(props => ({
46
56
  })).withConfig({
47
57
  displayName: "StyledSVG",
48
58
  componentId: "sc-1xtc3kx-0"
49
- })(["", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);
59
+ })(["", ";", ";", ";", ";"], sizeStyles, colorStyles, componentStyles, delayedVisibilityStyles);
50
60
 
51
61
  export { StyledSVG };
package/dist/esm/styled/StyledSkeleton.js CHANGED
@@ -52,7 +52,7 @@ const gradientStyles = props => {
52
52
  };
53
53
  const StyledSkeleton = styled.div.attrs({
54
54
  'data-garden-id': COMPONENT_ID,
55
- 'data-garden-version': '9.7.2'
55
+ 'data-garden-version': '9.9.0'
56
56
  }).withConfig({
57
57
  displayName: "StyledSkeleton",
58
58
  componentId: "sc-1raozze-0"
package/dist/esm/utils/animations.js CHANGED
@@ -9,5 +9,6 @@ import { keyframes } from 'styled-components';
9
9
  const dotOneKeyframes = keyframes(["0%{transform:translate(0,5px);}3%{transform:translate(1px,-5px);}6%{transform:translate(3px,-15px);}8%{transform:translate(5px,-18px);}9%{transform:translate(7px,-21px);}11%{transform:translate(8px,-22px);}13%{transform:translate(9px,-23px);}16%{transform:translate(12px,-25px);}18%{transform:translate(13px,-26px);}23%{transform:translate(18px,-26px);}24%{transform:translate(19px,-25px);}28%{transform:translate(22px,-23px);}31%{transform:translate(24px,-21px);}33%{transform:translate(26px,-18px);}34%{transform:translate(28px,-14px);}36%{transform:translate(29px,-12px);}38%{transform:translate(30px,-5px);}39%{transform:translate(31px,5px);}54%{transform:translate(31px,3px);}59%{transform:translate(33px);}61%{transform:translate(43px);}63%{transform:translate(48px);}64%{transform:translate(51px);}66%{transform:translate(53px);}68%{transform:translate(55px);}69%{transform:translate(57px);}76%{transform:translate(60px);}81%{transform:translate(61px);}83%,100%{transform:translate(62px);}"]);
10
10
  const dotTwoKeyframes = keyframes(["4%{transform:translate(0);}6%{transform:translate(-1px);}8%{transform:translate(-2px);}9%{transform:translate(-5px);}11%{transform:translate(-7px);}13%{transform:translate(-12px);}14%{transform:translate(-17px);}16%{transform:translate(-19px);}18%{transform:translate(-22px);}19%{transform:translate(-25px);}21%{transform:translate(-26px);}23%{transform:translate(-27px);}24%{transform:translate(-28px);}26%{transform:translate(-29px);}29%{transform:translate(-30px);}33%,89%{transform:translate(-31px);}91%{transform:translate(-31px,1px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,3px);}99%{transform:translate(-31px,4px);}100%{transform:translate(-31px,5px);}"]);
11
11
  const dotThreeKeyframes = keyframes(["39%{transform:translate(0);}44%{transform:translate(0,1px);}46%{transform:translate(0,2px);}48%{transform:translate(0,3px);}49%{transform:translate(0,4px);}51%{transform:translate(0,5px);}53%{transform:translate(-1px,-6px);}54%{transform:translate(-2px,-13px);}56%{transform:translate(-3px,-15px);}58%{transform:translate(-5px,-19px);}59%{transform:translate(-7px,-21px);}61%{transform:translate(-8px,-22px);}63%{transform:translate(-9px,-24px);}64%{transform:translate(-11px,-25px);}66%{transform:translate(-12px,-26px);}74%{transform:translate(-19px,-26px);}76%{transform:translate(-20px,-25px);}78%{transform:translate(-22px,-24px);}81%{transform:translate(-24px,-21px);}83%{transform:translate(-26px,-19px);}84%{transform:translate(-28px,-15px);}86%{transform:translate(-29px,-13px);}88%{transform:translate(-30px,-6px);}89%{transform:translate(-31px,5px);}91%{transform:translate(-31px,4px);}93%{transform:translate(-31px,3px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,1px);}100%{transform:translate(-31px);}"]);
12
+ const delayedVisibilityKeyframes = keyframes(["0%{visibility:hidden;}1%{visibility:visible;}100%{visibility:visible;}"]);
12
13
 
13
- export { dotOneKeyframes, dotThreeKeyframes, dotTwoKeyframes };
14
+ export { delayedVisibilityKeyframes, dotOneKeyframes, dotThreeKeyframes, dotTwoKeyframes };
package/dist/index.cjs.js CHANGED
@@ -9,9 +9,9 @@
9
9
  var React = require('react');
10
10
  var PropTypes = require('prop-types');
11
11
  var styled = require('styled-components');
12
- var containerSchedule = require('@zendeskgarden/container-schedule');
13
- var reactTheming = require('@zendeskgarden/react-theming');
14
12
  var polished = require('polished');
13
+ var reactTheming = require('@zendeskgarden/react-theming');
14
+ var containerSchedule = require('@zendeskgarden/container-schedule');
15
15
 
16
16
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
17
17
 
@@ -22,6 +22,7 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
22
22
  const dotOneKeyframes = styled.keyframes(["0%{transform:translate(0,5px);}3%{transform:translate(1px,-5px);}6%{transform:translate(3px,-15px);}8%{transform:translate(5px,-18px);}9%{transform:translate(7px,-21px);}11%{transform:translate(8px,-22px);}13%{transform:translate(9px,-23px);}16%{transform:translate(12px,-25px);}18%{transform:translate(13px,-26px);}23%{transform:translate(18px,-26px);}24%{transform:translate(19px,-25px);}28%{transform:translate(22px,-23px);}31%{transform:translate(24px,-21px);}33%{transform:translate(26px,-18px);}34%{transform:translate(28px,-14px);}36%{transform:translate(29px,-12px);}38%{transform:translate(30px,-5px);}39%{transform:translate(31px,5px);}54%{transform:translate(31px,3px);}59%{transform:translate(33px);}61%{transform:translate(43px);}63%{transform:translate(48px);}64%{transform:translate(51px);}66%{transform:translate(53px);}68%{transform:translate(55px);}69%{transform:translate(57px);}76%{transform:translate(60px);}81%{transform:translate(61px);}83%,100%{transform:translate(62px);}"]);
23
23
  const dotTwoKeyframes = styled.keyframes(["4%{transform:translate(0);}6%{transform:translate(-1px);}8%{transform:translate(-2px);}9%{transform:translate(-5px);}11%{transform:translate(-7px);}13%{transform:translate(-12px);}14%{transform:translate(-17px);}16%{transform:translate(-19px);}18%{transform:translate(-22px);}19%{transform:translate(-25px);}21%{transform:translate(-26px);}23%{transform:translate(-27px);}24%{transform:translate(-28px);}26%{transform:translate(-29px);}29%{transform:translate(-30px);}33%,89%{transform:translate(-31px);}91%{transform:translate(-31px,1px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,3px);}99%{transform:translate(-31px,4px);}100%{transform:translate(-31px,5px);}"]);
24
24
  const dotThreeKeyframes = styled.keyframes(["39%{transform:translate(0);}44%{transform:translate(0,1px);}46%{transform:translate(0,2px);}48%{transform:translate(0,3px);}49%{transform:translate(0,4px);}51%{transform:translate(0,5px);}53%{transform:translate(-1px,-6px);}54%{transform:translate(-2px,-13px);}56%{transform:translate(-3px,-15px);}58%{transform:translate(-5px,-19px);}59%{transform:translate(-7px,-21px);}61%{transform:translate(-8px,-22px);}63%{transform:translate(-9px,-24px);}64%{transform:translate(-11px,-25px);}66%{transform:translate(-12px,-26px);}74%{transform:translate(-19px,-26px);}76%{transform:translate(-20px,-25px);}78%{transform:translate(-22px,-24px);}81%{transform:translate(-24px,-21px);}83%{transform:translate(-26px,-19px);}84%{transform:translate(-28px,-15px);}86%{transform:translate(-29px,-13px);}88%{transform:translate(-30px,-6px);}89%{transform:translate(-31px,5px);}91%{transform:translate(-31px,4px);}93%{transform:translate(-31px,3px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,1px);}100%{transform:translate(-31px);}"]);
25
+ const delayedVisibilityKeyframes = styled.keyframes(["0%{visibility:hidden;}1%{visibility:visible;}100%{visibility:visible;}"]);
25
26
 
26
27
  const StyledDotsCircle = styled__default.default.circle.attrs({
27
28
  cy: 36,
@@ -31,7 +32,7 @@ const StyledDotsCircle = styled__default.default.circle.attrs({
31
32
  componentId: "sc-1ltah7e-0"
32
33
  })([""]);
33
34
  const animationStyles$1 = (animationName, props) => {
34
- return styled.css(["animation:", " ", "ms linear infinite;"], animationName, props.$duration);
35
+ return styled.css(["animation:", " ", "ms ", "ms linear infinite;"], animationName, props.$duration, props.$delay);
35
36
  };
36
37
  const StyledDotsCircleOne = styled__default.default(StyledDotsCircle).attrs({
37
38
  cx: 9
@@ -70,7 +71,7 @@ const sizeStyles$1 = _ref => {
70
71
  };
71
72
  const StyledLoadingPlaceholder = styled__default.default.div.attrs({
72
73
  'data-garden-id': COMPONENT_ID$5,
73
- 'data-garden-version': '9.7.2',
74
+ 'data-garden-version': '9.9.0',
74
75
  role: 'progressbar'
75
76
  }).withConfig({
76
77
  displayName: "StyledLoadingPlaceholder",
@@ -125,7 +126,7 @@ const colorStyles$2 = _ref => {
125
126
  };
126
127
  const StyledProgressBackground = styled__default.default.div.attrs({
127
128
  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
128
- 'data-garden-version': '9.7.2'
129
+ 'data-garden-version': '9.9.0'
129
130
  }).withConfig({
130
131
  displayName: "StyledProgress__StyledProgressBackground",
131
132
  componentId: "sc-2g8w4s-0"
@@ -133,7 +134,7 @@ const StyledProgressBackground = styled__default.default.div.attrs({
133
134
  const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
134
135
  const StyledProgressIndicator = styled__default.default.div.attrs({
135
136
  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
136
- 'data-garden-version': '9.7.2'
137
+ 'data-garden-version': '9.9.0'
137
138
  }).withConfig({
138
139
  displayName: "StyledProgress__StyledProgressIndicator",
139
140
  componentId: "sc-2g8w4s-1"
@@ -184,7 +185,7 @@ const gradientStyles = props => {
184
185
  };
185
186
  const StyledSkeleton = styled__default.default.div.attrs({
186
187
  'data-garden-id': COMPONENT_ID$4,
187
- 'data-garden-version': '9.7.2'
188
+ 'data-garden-version': '9.9.0'
188
189
  }).withConfig({
189
190
  displayName: "StyledSkeleton",
190
191
  componentId: "sc-1raozze-0"
@@ -234,8 +235,17 @@ const sizeStyles = _ref2 => {
234
235
  }
235
236
  return styled.css(["width:", ";height:", ";font-size:", ";"], $containerWidth, $containerHeight, fontSize);
236
237
  };
238
+ const delayedVisibilityStyles = _ref3 => {
239
+ let {
240
+ $delayShow
241
+ } = _ref3;
242
+ if ($delayShow && $delayShow !== 0) {
243
+ return styled.css(["animation:", " 1ms ", "ms linear 1 forwards;visibility:hidden;"], delayedVisibilityKeyframes, $delayShow);
244
+ }
245
+ return undefined;
246
+ };
237
247
  const StyledSVG = styled__default.default.svg.attrs(props => ({
238
- 'data-garden-version': '9.7.2',
248
+ 'data-garden-version': '9.9.0',
239
249
  xmlns: 'http://www.w3.org/2000/svg',
240
250
  focusable: 'false',
241
251
  viewBox: `0 0 ${props.$width} ${props.$height}`,
@@ -243,7 +253,7 @@ const StyledSVG = styled__default.default.svg.attrs(props => ({
243
253
  })).withConfig({
244
254
  displayName: "StyledSVG",
245
255
  componentId: "sc-1xtc3kx-0"
246
- })(["", ";", ";", ";"], sizeStyles, colorStyles$1, reactTheming.componentStyles);
256
+ })(["", ";", ";", ";", ";"], sizeStyles, colorStyles$1, reactTheming.componentStyles, delayedVisibilityStyles);
247
257
 
248
258
  const COMPONENT_ID$3 = 'loaders.inline';
249
259
  const colorStyles = _ref => {
@@ -276,7 +286,7 @@ const StyledCircle = styled__default.default.circle.attrs({
276
286
  })([""]);
277
287
  const StyledInline = styled__default.default.svg.attrs(props => ({
278
288
  'data-garden-id': COMPONENT_ID$3,
279
- 'data-garden-version': '9.7.2',
289
+ 'data-garden-version': '9.9.0',
280
290
  viewBox: '0 0 16 4',
281
291
  width: props.$size,
282
292
  height: props.$size * 0.25
@@ -288,60 +298,31 @@ const StyledInline = styled__default.default.svg.attrs(props => ({
288
298
  const COMPONENT_ID$2 = 'loaders.dots';
289
299
  const Dots = React.forwardRef((_ref, ref) => {
290
300
  let {
291
- size,
292
- color,
293
- duration,
294
- delayMS,
301
+ size = 'inherit',
302
+ color = 'inherit',
303
+ duration = 1250,
304
+ delayMS = 750,
295
305
  ...other
296
306
  } = _ref;
297
- const theme = React.useContext(styled.ThemeContext);
298
- const environment = reactTheming.useDocument(theme);
299
- const canTransformSVG = React.useRef(null);
300
- if (environment && canTransformSVG.current === null) {
301
- const svg = environment.createElementNS('http://www.w3.org/2000/svg', 'svg');
302
- canTransformSVG.current = 'transform' in svg;
303
- }
304
- const {
305
- delayComplete
306
- } = containerSchedule.useSchedule({
307
- duration,
308
- delayMS,
309
- loop: true
310
- });
311
- const dotOne = React.useRef(null);
312
- const dotTwo = React.useRef(null);
313
- const dotThree = React.useRef(null);
314
- React.useEffect(() => {
315
- if (!canTransformSVG.current && delayComplete) {
316
- const transforms = [window.getComputedStyle(dotOne.current).getPropertyValue('transform'), window.getComputedStyle(dotTwo.current).getPropertyValue('transform'), window.getComputedStyle(dotThree.current).getPropertyValue('transform')];
317
- dotOne.current.setAttribute('transform', transforms[0]);
318
- dotTwo.current.setAttribute('transform', transforms[1]);
319
- dotThree.current.setAttribute('transform', transforms[2]);
320
- }
321
- });
322
- if (!delayComplete && delayMS !== 0) {
323
- return React__default.default.createElement(StyledLoadingPlaceholder, {
324
- $fontSize: size
325
- }, "\xA0");
326
- }
327
307
  return React__default.default.createElement(StyledSVG, Object.assign({
328
308
  "data-garden-id": COMPONENT_ID$2,
329
309
  ref: ref,
330
310
  $fontSize: size,
331
311
  $color: color,
332
312
  $width: "80",
333
- $height: "72"
313
+ $height: "72",
314
+ $delayShow: delayMS
334
315
  }, other), React__default.default.createElement("g", {
335
316
  fill: "currentColor"
336
317
  }, React__default.default.createElement(StyledDotsCircleOne, {
337
318
  $duration: duration,
338
- ref: dotOne
319
+ $delay: delayMS
339
320
  }), React__default.default.createElement(StyledDotsCircleTwo, {
340
321
  $duration: duration,
341
- ref: dotTwo
322
+ $delay: delayMS
342
323
  }), React__default.default.createElement(StyledDotsCircleThree, {
343
324
  $duration: duration,
344
- ref: dotThree
325
+ $delay: delayMS
345
326
  })));
346
327
  });
347
328
  Dots.displayName = 'Dots';
@@ -351,12 +332,6 @@ Dots.propTypes = {
351
332
  color: PropTypes__default.default.string,
352
333
  delayMS: PropTypes__default.default.number
353
334
  };
354
- Dots.defaultProps = {
355
- size: 'inherit',
356
- color: 'inherit',
357
- duration: 1250,
358
- delayMS: 750
359
- };
360
335
 
361
336
  const SIZE = ['small', 'medium', 'large'];
362
337
 
@@ -376,7 +351,7 @@ const Progress = React__default.default.forwardRef((_ref, ref) => {
376
351
  return (
377
352
  React__default.default.createElement(StyledProgressBackground, Object.assign({
378
353
  "data-garden-id": COMPONENT_ID$1,
379
- "data-garden-version": '9.7.2',
354
+ "data-garden-version": '9.9.0',
380
355
  "aria-valuemax": 100,
381
356
  "aria-valuemin": 0,
382
357
  "aria-valuenow": percentage,
package/dist/typings/styled/StyledDots.d.ts CHANGED
@@ -6,6 +6,7 @@
6
6
  */
7
7
  interface IStyledDotProps {
8
8
  $duration: number;
9
+ $delay: number;
9
10
  }
10
11
  export declare const StyledDotsCircleOne: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, Omit<import("react").SVGProps<SVGCircleElement>, "ref"> & {
11
12
  ref?: ((instance: SVGCircleElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGCircleElement> | null | undefined;
package/dist/typings/styled/StyledSVG.d.ts CHANGED
@@ -12,6 +12,7 @@ interface IStyledSVGProps {
12
12
  $height: number | string;
13
13
  $containerWidth?: string;
14
14
  $containerHeight?: string;
15
+ $delayShow?: number;
15
16
  }
16
17
  export declare const StyledSVG: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement>, Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
17
18
  ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
package/dist/typings/utils/animations.d.ts CHANGED
@@ -7,3 +7,4 @@
7
7
  export declare const dotOneKeyframes: import("styled-components/dist/models/Keyframes").default;
8
8
  export declare const dotTwoKeyframes: import("styled-components/dist/models/Keyframes").default;
9
9
  export declare const dotThreeKeyframes: import("styled-components/dist/models/Keyframes").default;
10
+ export declare const delayedVisibilityKeyframes: import("styled-components/dist/models/Keyframes").default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-loaders",
3
- "version": "9.7.2",
3
+ "version": "9.9.0",
4
4
  "description": "Components relating to loaders in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -32,7 +32,7 @@
32
32
  "styled-components": "^5.3.1 || ^6.0.0"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-theming": "^9.7.2"
35
+ "@zendeskgarden/react-theming": "^9.9.0"
36
36
  },
37
37
  "keywords": [
38
38
  "components",
@@ -44,5 +44,5 @@
44
44
  "access": "public"
45
45
  },
46
46
  "zendeskgarden:src": "src/index.ts",
47
- "gitHead": "6cef5e656fa78619c4e42af330a53014c336a259"
47
+ "gitHead": "c7fcfd1e183b61345c6d1974c8f143c66dbf10fa"
48
48
  }