@zendeskgarden/react-loaders 8.47.1 → 8.47.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/index.cjs.js CHANGED
@@ -139,7 +139,7 @@ var dotOneKeyframes = styled.keyframes(["0%{transform:translate(0,5px);}3%{trans
139
139
  var 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);}"]);
140
140
  var 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);}"]);
141
141
 
142
- var StyledDotsCircle = styled__default['default'].circle.attrs({
142
+ var StyledDotsCircle = styled__default["default"].circle.attrs({
143
143
  cy: 36,
144
144
  r: 9
145
145
  }).withConfig({
@@ -149,7 +149,7 @@ var StyledDotsCircle = styled__default['default'].circle.attrs({
149
149
  StyledDotsCircle.defaultProps = {
150
150
  theme: reactTheming.DEFAULT_THEME
151
151
  };
152
- var StyledDotsCircleOne = styled__default['default'](StyledDotsCircle).attrs({
152
+ var StyledDotsCircleOne = styled__default["default"](StyledDotsCircle).attrs({
153
153
  cx: 9
154
154
  }).withConfig({
155
155
  displayName: "StyledDots__StyledDotsCircleOne",
@@ -161,7 +161,7 @@ var StyledDotsCircleOne = styled__default['default'](StyledDotsCircle).attrs({
161
161
  StyledDotsCircleOne.defaultProps = {
162
162
  theme: reactTheming.DEFAULT_THEME
163
163
  };
164
- var StyledDotsCircleTwo = styled__default['default'](StyledDotsCircle).attrs(function () {
164
+ var StyledDotsCircleTwo = styled__default["default"](StyledDotsCircle).attrs(function () {
165
165
  return {
166
166
  cx: 40
167
167
  };
@@ -175,7 +175,7 @@ var StyledDotsCircleTwo = styled__default['default'](StyledDotsCircle).attrs(fun
175
175
  StyledDotsCircleTwo.defaultProps = {
176
176
  theme: reactTheming.DEFAULT_THEME
177
177
  };
178
- var StyledDotsCircleThree = styled__default['default'](StyledDotsCircle).attrs(function () {
178
+ var StyledDotsCircleThree = styled__default["default"](StyledDotsCircle).attrs(function () {
179
179
  return {
180
180
  cx: 71
181
181
  };
@@ -191,9 +191,9 @@ StyledDotsCircleThree.defaultProps = {
191
191
  };
192
192
 
193
193
  var COMPONENT_ID$5 = 'loaders.loading_placeholder';
194
- var StyledLoadingPlaceholder = styled__default['default'].div.attrs({
194
+ var StyledLoadingPlaceholder = styled__default["default"].div.attrs({
195
195
  'data-garden-id': COMPONENT_ID$5,
196
- 'data-garden-version': '8.47.1',
196
+ 'data-garden-version': '8.47.2',
197
197
  role: 'progressbar'
198
198
  }).withConfig({
199
199
  displayName: "StyledLoadingPlaceholder",
@@ -225,10 +225,10 @@ var sizeToBorderRadius = function sizeToBorderRadius(size, theme) {
225
225
  return sizeToHeight(size, theme) / 2;
226
226
  };
227
227
  var PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
228
- var StyledProgressBackground = styled__default['default'].div.attrs(function (props) {
228
+ var StyledProgressBackground = styled__default["default"].div.attrs(function (props) {
229
229
  return {
230
230
  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
231
- 'data-garden-version': '8.47.1',
231
+ 'data-garden-version': '8.47.2',
232
232
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
233
233
  };
234
234
  }).withConfig({
@@ -249,10 +249,10 @@ StyledProgressBackground.defaultProps = {
249
249
  theme: reactTheming.DEFAULT_THEME
250
250
  };
251
251
  var PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
252
- var StyledProgressIndicator = styled__default['default'].div.attrs(function (props) {
252
+ var StyledProgressIndicator = styled__default["default"].div.attrs(function (props) {
253
253
  return {
254
254
  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
255
- 'data-garden-version': '8.47.1',
255
+ 'data-garden-version': '8.47.2',
256
256
  height: props.height || sizeToHeight(props.size, props.theme),
257
257
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
258
258
  };
@@ -296,9 +296,9 @@ var retrieveSkeletonGradient = function retrieveSkeletonGradient(_ref3) {
296
296
  isLight = _ref3.isLight;
297
297
  return styled.css(["background-image:linear-gradient( ", ",transparent,", ",transparent );"], theme.rtl ? '-45deg' : '45deg', isLight ? reactTheming.getColor('chromeHue', 700, theme, 0.4) : polished.rgba(theme.colors.background, 0.6));
298
298
  };
299
- var StyledSkeleton = styled__default['default'].div.attrs({
299
+ var StyledSkeleton = styled__default["default"].div.attrs({
300
300
  'data-garden-id': COMPONENT_ID$4,
301
- 'data-garden-version': '8.47.1'
301
+ 'data-garden-version': '8.47.2'
302
302
  }).withConfig({
303
303
  displayName: "StyledSkeleton",
304
304
  componentId: "sc-1raozze-0"
@@ -317,7 +317,7 @@ StyledSkeleton.defaultProps = {
317
317
  theme: reactTheming.DEFAULT_THEME
318
318
  };
319
319
 
320
- var StyledSpinnerCircle = styled__default['default'].circle.attrs(function (props) {
320
+ var StyledSpinnerCircle = styled__default["default"].circle.attrs(function (props) {
321
321
  return {
322
322
  cx: 40,
323
323
  cy: 40,
@@ -337,9 +337,9 @@ StyledSpinnerCircle.defaultProps = {
337
337
  theme: reactTheming.DEFAULT_THEME
338
338
  };
339
339
 
340
- var StyledSVG = styled__default['default'].svg.attrs(function (props) {
340
+ var StyledSVG = styled__default["default"].svg.attrs(function (props) {
341
341
  return {
342
- 'data-garden-version': '8.47.1',
342
+ 'data-garden-version': '8.47.2',
343
343
  xmlns: 'http://www.w3.org/2000/svg',
344
344
  width: props.width,
345
345
  height: props.height,
@@ -367,7 +367,7 @@ StyledSVG.defaultProps = {
367
367
 
368
368
  var COMPONENT_ID$3 = 'loaders.inline';
369
369
  var PULSE_ANIMATION = styled.keyframes(["0%,100%{opacity:.2;}50%{opacity:.8;}"]);
370
- var StyledCircle = styled__default['default'].circle.attrs({
370
+ var StyledCircle = styled__default["default"].circle.attrs({
371
371
  fill: 'currentColor',
372
372
  cy: 2,
373
373
  r: 2
@@ -378,10 +378,10 @@ var StyledCircle = styled__default['default'].circle.attrs({
378
378
  StyledCircle.defaultProps = {
379
379
  theme: reactTheming.DEFAULT_THEME
380
380
  };
381
- var StyledInlineTypingSVG = styled__default['default'].svg.attrs(function (props) {
381
+ var StyledInlineTypingSVG = styled__default["default"].svg.attrs(function (props) {
382
382
  return {
383
383
  'data-garden-id': COMPONENT_ID$3,
384
- 'data-garden-version': '8.47.1',
384
+ 'data-garden-version': '8.47.2',
385
385
  viewBox: '0 0 16 4',
386
386
  width: props.size,
387
387
  height: props.size * 0.25
@@ -435,34 +435,34 @@ var Dots = function Dots(_ref) {
435
435
  }
436
436
  });
437
437
  if (!delayComplete && delayMS !== 0) {
438
- return React__default['default'].createElement(StyledLoadingPlaceholder, {
438
+ return React__default["default"].createElement(StyledLoadingPlaceholder, {
439
439
  fontSize: size
440
440
  }, "\xA0");
441
441
  }
442
- return React__default['default'].createElement(StyledSVG, _extends({
442
+ return React__default["default"].createElement(StyledSVG, _extends({
443
443
  fontSize: size,
444
444
  color: color,
445
445
  width: "80",
446
446
  height: "72",
447
447
  dataGardenId: COMPONENT_ID$2
448
- }, other), React__default['default'].createElement("g", {
448
+ }, other), React__default["default"].createElement("g", {
449
449
  fill: "currentColor"
450
- }, React__default['default'].createElement(StyledDotsCircleOne, {
450
+ }, React__default["default"].createElement(StyledDotsCircleOne, {
451
451
  duration: duration,
452
452
  ref: dotOne
453
- }), React__default['default'].createElement(StyledDotsCircleTwo, {
453
+ }), React__default["default"].createElement(StyledDotsCircleTwo, {
454
454
  duration: duration,
455
455
  ref: dotTwo
456
- }), React__default['default'].createElement(StyledDotsCircleThree, {
456
+ }), React__default["default"].createElement(StyledDotsCircleThree, {
457
457
  duration: duration,
458
458
  ref: dotThree
459
459
  })));
460
460
  };
461
461
  Dots.propTypes = {
462
- size: PropTypes__default['default'].any,
463
- duration: PropTypes__default['default'].number,
464
- color: PropTypes__default['default'].string,
465
- delayMS: PropTypes__default['default'].number
462
+ size: PropTypes__default["default"].any,
463
+ duration: PropTypes__default["default"].number,
464
+ color: PropTypes__default["default"].string,
465
+ delayMS: PropTypes__default["default"].number
466
466
  };
467
467
  Dots.defaultProps = {
468
468
  size: 'inherit',
@@ -473,30 +473,30 @@ Dots.defaultProps = {
473
473
 
474
474
  var _excluded$3 = ["value", "size"];
475
475
  var COMPONENT_ID$1 = 'loaders.progress';
476
- var Progress = React__default['default'].forwardRef(function (_ref, ref) {
476
+ var Progress = React__default["default"].forwardRef(function (_ref, ref) {
477
477
  var value = _ref.value,
478
478
  size = _ref.size,
479
479
  other = _objectWithoutProperties(_ref, _excluded$3);
480
480
  var percentage = Math.max(0, Math.min(100, value));
481
- return React__default['default'].createElement(StyledProgressBackground, _extends({
481
+ return React__default["default"].createElement(StyledProgressBackground, _extends({
482
482
  "data-garden-id": COMPONENT_ID$1,
483
- "data-garden-version": '8.47.1',
483
+ "data-garden-version": '8.47.2',
484
484
  "aria-valuemax": 100,
485
485
  "aria-valuemin": 0,
486
486
  "aria-valuenow": percentage,
487
487
  role: "progressbar",
488
488
  size: size,
489
489
  ref: ref
490
- }, other), React__default['default'].createElement(StyledProgressIndicator, {
490
+ }, other), React__default["default"].createElement(StyledProgressIndicator, {
491
491
  value: percentage,
492
492
  size: size
493
493
  }));
494
494
  });
495
495
  Progress.displayName = 'Progress';
496
496
  Progress.propTypes = {
497
- color: PropTypes__default['default'].string,
498
- value: PropTypes__default['default'].number.isRequired,
499
- size: PropTypes__default['default'].oneOf(['small', 'medium', 'large'])
497
+ color: PropTypes__default["default"].string,
498
+ value: PropTypes__default["default"].number.isRequired,
499
+ size: PropTypes__default["default"].oneOf(['small', 'medium', 'large'])
500
500
  };
501
501
  Progress.defaultProps = {
502
502
  value: 0,
@@ -509,16 +509,16 @@ var Skeleton = function Skeleton(_ref) {
509
509
  height = _ref.height,
510
510
  isLight = _ref.isLight,
511
511
  other = _objectWithoutProperties(_ref, _excluded$2);
512
- return React__default['default'].createElement(StyledSkeleton, _extends({
512
+ return React__default["default"].createElement(StyledSkeleton, _extends({
513
513
  isLight: isLight,
514
514
  customWidth: width,
515
515
  customHeight: height
516
516
  }, other), "\xA0");
517
517
  };
518
518
  Skeleton.propTypes = {
519
- width: PropTypes__default['default'].string,
520
- height: PropTypes__default['default'].string,
521
- isLight: PropTypes__default['default'].bool
519
+ width: PropTypes__default["default"].string,
520
+ height: PropTypes__default["default"].string,
521
+ isLight: PropTypes__default["default"].bool
522
522
  };
523
523
  Skeleton.defaultProps = {
524
524
  width: '100%',
@@ -637,13 +637,13 @@ var Spinner = function Spinner(_ref3) {
637
637
  var WIDTH = 80;
638
638
  var HEIGHT = 80;
639
639
  if (!delayComplete && delayMS !== 0) {
640
- return React__default['default'].createElement(StyledLoadingPlaceholder, {
640
+ return React__default["default"].createElement(StyledLoadingPlaceholder, {
641
641
  width: "1em",
642
642
  height: "1em",
643
643
  fontSize: size
644
644
  }, "\xA0");
645
645
  }
646
- return React__default['default'].createElement(StyledSVG, _extends({
646
+ return React__default["default"].createElement(StyledSVG, _extends({
647
647
  fontSize: size,
648
648
  color: color,
649
649
  width: WIDTH,
@@ -651,17 +651,17 @@ var Spinner = function Spinner(_ref3) {
651
651
  dataGardenId: COMPONENT_ID,
652
652
  containerHeight: "1em",
653
653
  containerWidth: "1em"
654
- }, other), React__default['default'].createElement(StyledSpinnerCircle, {
654
+ }, other), React__default["default"].createElement(StyledSpinnerCircle, {
655
655
  dasharrayValue: dasharrayValue,
656
656
  strokeWidthValue: strokeWidthValue,
657
657
  transform: "rotate(".concat(rotationValue, ", ").concat(WIDTH / 2, ", ").concat(HEIGHT / 2, ")")
658
658
  }));
659
659
  };
660
660
  Spinner.propTypes = {
661
- size: PropTypes__default['default'].any,
662
- duration: PropTypes__default['default'].number,
663
- color: PropTypes__default['default'].string,
664
- delayMS: PropTypes__default['default'].number
661
+ size: PropTypes__default["default"].any,
662
+ duration: PropTypes__default["default"].number,
663
+ color: PropTypes__default["default"].string,
664
+ delayMS: PropTypes__default["default"].number
665
665
  };
666
666
  Spinner.defaultProps = {
667
667
  size: 'inherit',
@@ -672,11 +672,11 @@ Spinner.defaultProps = {
672
672
 
673
673
  var _excluded = ["size", "color"];
674
674
  var InlineTypingIndicator = function InlineTypingIndicator(props) {
675
- return React__default['default'].createElement(StyledInlineTypingSVG, props, React__default['default'].createElement(StyledCircle, {
675
+ return React__default["default"].createElement(StyledInlineTypingSVG, props, React__default["default"].createElement(StyledCircle, {
676
676
  cx: "14"
677
- }), React__default['default'].createElement(StyledCircle, {
677
+ }), React__default["default"].createElement(StyledCircle, {
678
678
  cx: "8"
679
- }), React__default['default'].createElement(StyledCircle, {
679
+ }), React__default["default"].createElement(StyledCircle, {
680
680
  cx: "2"
681
681
  }));
682
682
  };
@@ -684,14 +684,14 @@ var Inline = function Inline(_ref) {
684
684
  var size = _ref.size,
685
685
  color = _ref.color,
686
686
  other = _objectWithoutProperties(_ref, _excluded);
687
- return React__default['default'].createElement(InlineTypingIndicator, _extends({
687
+ return React__default["default"].createElement(InlineTypingIndicator, _extends({
688
688
  size: size,
689
689
  color: color
690
690
  }, other));
691
691
  };
692
692
  Inline.propTypes = {
693
- size: PropTypes__default['default'].number,
694
- color: PropTypes__default['default'].string
693
+ size: PropTypes__default["default"].number,
694
+ color: PropTypes__default["default"].string
695
695
  };
696
696
  Inline.defaultProps = {
697
697
  size: 16,
package/dist/index.esm.js CHANGED
@@ -183,7 +183,7 @@ StyledDotsCircleThree.defaultProps = {
183
183
  var COMPONENT_ID$5 = 'loaders.loading_placeholder';
184
184
  var StyledLoadingPlaceholder = styled.div.attrs({
185
185
  'data-garden-id': COMPONENT_ID$5,
186
- 'data-garden-version': '8.47.1',
186
+ 'data-garden-version': '8.47.2',
187
187
  role: 'progressbar'
188
188
  }).withConfig({
189
189
  displayName: "StyledLoadingPlaceholder",
@@ -218,7 +218,7 @@ var PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
218
218
  var StyledProgressBackground = styled.div.attrs(function (props) {
219
219
  return {
220
220
  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
221
- 'data-garden-version': '8.47.1',
221
+ 'data-garden-version': '8.47.2',
222
222
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
223
223
  };
224
224
  }).withConfig({
@@ -242,7 +242,7 @@ var PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
242
242
  var StyledProgressIndicator = styled.div.attrs(function (props) {
243
243
  return {
244
244
  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
245
- 'data-garden-version': '8.47.1',
245
+ 'data-garden-version': '8.47.2',
246
246
  height: props.height || sizeToHeight(props.size, props.theme),
247
247
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
248
248
  };
@@ -288,7 +288,7 @@ var retrieveSkeletonGradient = function retrieveSkeletonGradient(_ref3) {
288
288
  };
289
289
  var StyledSkeleton = styled.div.attrs({
290
290
  'data-garden-id': COMPONENT_ID$4,
291
- 'data-garden-version': '8.47.1'
291
+ 'data-garden-version': '8.47.2'
292
292
  }).withConfig({
293
293
  displayName: "StyledSkeleton",
294
294
  componentId: "sc-1raozze-0"
@@ -329,7 +329,7 @@ StyledSpinnerCircle.defaultProps = {
329
329
 
330
330
  var StyledSVG = styled.svg.attrs(function (props) {
331
331
  return {
332
- 'data-garden-version': '8.47.1',
332
+ 'data-garden-version': '8.47.2',
333
333
  xmlns: 'http://www.w3.org/2000/svg',
334
334
  width: props.width,
335
335
  height: props.height,
@@ -371,7 +371,7 @@ StyledCircle.defaultProps = {
371
371
  var StyledInlineTypingSVG = styled.svg.attrs(function (props) {
372
372
  return {
373
373
  'data-garden-id': COMPONENT_ID$3,
374
- 'data-garden-version': '8.47.1',
374
+ 'data-garden-version': '8.47.2',
375
375
  viewBox: '0 0 16 4',
376
376
  width: props.size,
377
377
  height: props.size * 0.25
@@ -470,7 +470,7 @@ var Progress = React.forwardRef(function (_ref, ref) {
470
470
  var percentage = Math.max(0, Math.min(100, value));
471
471
  return React.createElement(StyledProgressBackground, _extends({
472
472
  "data-garden-id": COMPONENT_ID$1,
473
- "data-garden-version": '8.47.1',
473
+ "data-garden-version": '8.47.2',
474
474
  "aria-valuemax": 100,
475
475
  "aria-valuemin": 0,
476
476
  "aria-valuenow": percentage,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-loaders",
3
- "version": "8.47.1",
3
+ "version": "8.47.2",
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": "^4.2.0 || ^5.0.0"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-theming": "^8.47.1"
35
+ "@zendeskgarden/react-theming": "^8.47.2"
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": "62420ca54dbb5b3b90cd05bf455cd4ba91b4965e"
47
+ "gitHead": "41cb43f285760417ae2145e47eca0e4a600455ab"
48
48
  }