@zendeskgarden/react-loaders 9.0.0-next.7 → 9.0.0-next.9

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.
@@ -0,0 +1,71 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ const STROKE_WIDTH_FRAMES = {
8
+ 0: 6,
9
+ 14: 5,
10
+ 26: 4,
11
+ 36: 3,
12
+ 46: 2,
13
+ 58: 3,
14
+ 70: 4,
15
+ 80: 5,
16
+ 91: 6
17
+ };
18
+ const ROTATION_FRAMES = {
19
+ 0: -90,
20
+ 8: -81,
21
+ 36: -30,
22
+ 41: -18,
23
+ 44: -8,
24
+ 48: 0,
25
+ 55: 22,
26
+ 63: 53,
27
+ 64: 62,
28
+ 66: 67,
29
+ 68: 78,
30
+ 69: 90,
31
+ 71: 99,
32
+ 73: 112,
33
+ 74: 129,
34
+ 76: 138,
35
+ 78: 159,
36
+ 79: 180,
37
+ 81: 190,
38
+ 83: 207,
39
+ 84: 221,
40
+ 86: 226,
41
+ 88: 235,
42
+ 90: 243,
43
+ 99: 270
44
+ };
45
+ const DASHARRAY_FRAMES = {
46
+ 0: 0,
47
+ 13: 2,
48
+ 26: 13,
49
+ 53: 86,
50
+ 58: 90,
51
+ 63: 89,
52
+ 64: 88,
53
+ 66: 86,
54
+ 68: 83,
55
+ 69: 81,
56
+ 71: 76,
57
+ 73: 70,
58
+ 74: 62,
59
+ 76: 58,
60
+ 78: 47,
61
+ 79: 37,
62
+ 81: 31,
63
+ 83: 23,
64
+ 84: 16,
65
+ 88: 10,
66
+ 89: 7,
67
+ 98: 1,
68
+ 99: 0
69
+ };
70
+
71
+ export { DASHARRAY_FRAMES, ROTATION_FRAMES, STROKE_WIDTH_FRAMES };
package/dist/index.cjs.js CHANGED
@@ -1,10 +1,9 @@
1
1
  /**
2
- * Copyright Zendesk, Inc.
3
- *
4
- * Use of this source code is governed under the Apache License, Version 2.0
5
- * found at http://www.apache.org/licenses/LICENSE-2.0.
6
- */
7
-
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
8
7
  'use strict';
9
8
 
10
9
  var React = require('react');
@@ -20,21 +19,6 @@ var React__default = /*#__PURE__*/_interopDefault(React);
20
19
  var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
21
20
  var styled__default = /*#__PURE__*/_interopDefault(styled);
22
21
 
23
- function _extends() {
24
- _extends = Object.assign ? Object.assign.bind() : function (target) {
25
- for (var i = 1; i < arguments.length; i++) {
26
- var source = arguments[i];
27
- for (var key in source) {
28
- if (Object.prototype.hasOwnProperty.call(source, key)) {
29
- target[key] = source[key];
30
- }
31
- }
32
- }
33
- return target;
34
- };
35
- return _extends.apply(this, arguments);
36
- }
37
-
38
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);}"]);
39
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);}"]);
40
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);}"]);
@@ -83,7 +67,7 @@ StyledDotsCircleThree.defaultProps = {
83
67
  const COMPONENT_ID$5 = 'loaders.loading_placeholder';
84
68
  const StyledLoadingPlaceholder = styled__default.default.div.attrs({
85
69
  'data-garden-id': COMPONENT_ID$5,
86
- 'data-garden-version': '9.0.0-next.7',
70
+ 'data-garden-version': '9.0.0-next.9',
87
71
  role: 'progressbar'
88
72
  }).withConfig({
89
73
  displayName: "StyledLoadingPlaceholder",
@@ -107,7 +91,7 @@ const sizeToBorderRadius = (size, theme) => sizeToHeight(size, theme) / 2;
107
91
  const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
108
92
  const StyledProgressBackground = styled__default.default.div.attrs(props => ({
109
93
  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
110
- 'data-garden-version': '9.0.0-next.7',
94
+ 'data-garden-version': '9.0.0-next.9',
111
95
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
112
96
  })).withConfig({
113
97
  displayName: "StyledProgress__StyledProgressBackground",
@@ -119,7 +103,7 @@ StyledProgressBackground.defaultProps = {
119
103
  const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
120
104
  const StyledProgressIndicator = styled__default.default.div.attrs(props => ({
121
105
  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
122
- 'data-garden-version': '9.0.0-next.7',
106
+ 'data-garden-version': '9.0.0-next.9',
123
107
  height: props.height || sizeToHeight(props.size, props.theme),
124
108
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
125
109
  })).withConfig({
@@ -162,7 +146,7 @@ const retrieveSkeletonGradient = _ref3 => {
162
146
  };
163
147
  const StyledSkeleton = styled__default.default.div.attrs({
164
148
  'data-garden-id': COMPONENT_ID$4,
165
- 'data-garden-version': '9.0.0-next.7'
149
+ 'data-garden-version': '9.0.0-next.9'
166
150
  }).withConfig({
167
151
  displayName: "StyledSkeleton",
168
152
  componentId: "sc-1raozze-0"
@@ -190,7 +174,7 @@ StyledSpinnerCircle.defaultProps = {
190
174
  };
191
175
 
192
176
  const StyledSVG = styled__default.default.svg.attrs(props => ({
193
- 'data-garden-version': '9.0.0-next.7',
177
+ 'data-garden-version': '9.0.0-next.9',
194
178
  xmlns: 'http://www.w3.org/2000/svg',
195
179
  width: props.width,
196
180
  height: props.height,
@@ -220,7 +204,7 @@ StyledCircle.defaultProps = {
220
204
  };
221
205
  const StyledInline = styled__default.default.svg.attrs(props => ({
222
206
  'data-garden-id': COMPONENT_ID$3,
223
- 'data-garden-version': '9.0.0-next.7',
207
+ 'data-garden-version': '9.0.0-next.9',
224
208
  viewBox: '0 0 16 4',
225
209
  width: props.size,
226
210
  height: props.size * 0.25
@@ -271,7 +255,7 @@ const Dots = React.forwardRef((_ref, ref) => {
271
255
  fontSize: size
272
256
  }, "\xA0");
273
257
  }
274
- return React__default.default.createElement(StyledSVG, _extends({
258
+ return React__default.default.createElement(StyledSVG, Object.assign({
275
259
  ref: ref,
276
260
  fontSize: size,
277
261
  color: color,
@@ -320,9 +304,9 @@ const Progress = React__default.default.forwardRef((_ref, ref) => {
320
304
  'aria-label': label
321
305
  }, 'aria-label', 'Progress');
322
306
  return (
323
- React__default.default.createElement(StyledProgressBackground, _extends({
307
+ React__default.default.createElement(StyledProgressBackground, Object.assign({
324
308
  "data-garden-id": COMPONENT_ID$1,
325
- "data-garden-version": '9.0.0-next.7',
309
+ "data-garden-version": '9.0.0-next.9',
326
310
  "aria-valuemax": 100,
327
311
  "aria-valuemin": 0,
328
312
  "aria-valuenow": percentage,
@@ -354,7 +338,7 @@ const Skeleton = React.forwardRef((_ref, ref) => {
354
338
  isLight,
355
339
  ...other
356
340
  } = _ref;
357
- return React__default.default.createElement(StyledSkeleton, _extends({
341
+ return React__default.default.createElement(StyledSkeleton, Object.assign({
358
342
  ref: ref,
359
343
  isLight: isLight,
360
344
  customWidth: width,
@@ -487,7 +471,7 @@ const Spinner = React.forwardRef((_ref, ref) => {
487
471
  fontSize: size
488
472
  }, "\xA0");
489
473
  }
490
- return React__default.default.createElement(StyledSVG, _extends({
474
+ return React__default.default.createElement(StyledSVG, Object.assign({
491
475
  ref: ref,
492
476
  fontSize: size,
493
477
  color: color,
@@ -524,7 +508,7 @@ const Inline = React.forwardRef((_ref, ref) => {
524
508
  } = _ref;
525
509
  const ariaLabel = reactTheming.useText(Inline, other, 'aria-label', 'loading');
526
510
  return (
527
- React__default.default.createElement(StyledInline, _extends({
511
+ React__default.default.createElement(StyledInline, Object.assign({
528
512
  ref: ref,
529
513
  size: size,
530
514
  color: color,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-loaders",
3
- "version": "9.0.0-next.7",
3
+ "version": "9.0.0-next.9",
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>",
@@ -10,7 +10,7 @@
10
10
  "url": "https://github.com/zendeskgarden/react-components/issues"
11
11
  },
12
12
  "main": "dist/index.cjs.js",
13
- "module": "dist/index.esm.js",
13
+ "module": "dist/esm/index.js",
14
14
  "files": [
15
15
  "dist"
16
16
  ],
@@ -26,13 +26,13 @@
26
26
  "prop-types": "^15.5.7"
27
27
  },
28
28
  "peerDependencies": {
29
- "@zendeskgarden/react-theming": "^8.1.0",
29
+ "@zendeskgarden/react-theming": ">=9.0.0-next",
30
30
  "react": ">=16.8.0",
31
31
  "react-dom": ">=16.8.0",
32
32
  "styled-components": "^5.3.1"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-theming": "^9.0.0-next.7"
35
+ "@zendeskgarden/react-theming": "^9.0.0-next.9"
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": "50a2b45b2e237a490a6d460818d33498b92479ec"
47
+ "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
48
48
  }