@zendeskgarden/react-loaders 8.62.2 → 8.63.0

package/dist/index.cjs.js

@@ -95,7 +95,7 @@ StyledDotsCircleThree.defaultProps = {
 const COMPONENT_ID$5 = 'loaders.loading_placeholder';
 const StyledLoadingPlaceholder = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
@@ -119,7 +119,7 @@ const sizeToBorderRadius = (size, theme) => sizeToHeight(size, theme) / 2;
 const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
 const StyledProgressBackground = styled__default.default.div.attrs(props => ({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
@@ -131,7 +131,7 @@ StyledProgressBackground.defaultProps = {
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 const StyledProgressIndicator = styled__default.default.div.attrs(props => ({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   height: props.height || sizeToHeight(props.size, props.theme),
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
@@ -174,7 +174,7 @@ const retrieveSkeletonGradient = _ref3 => {
 };
 const StyledSkeleton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -202,7 +202,7 @@ StyledSpinnerCircle.defaultProps = {
 };
 
 const StyledSVG = styled__default.default.svg.attrs(props => ({
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   xmlns: 'http://www.w3.org/2000/svg',
   width: props.width,
   height: props.height,
@@ -232,7 +232,7 @@ StyledCircle.defaultProps = {
 };
 const StyledInline = styled__default.default.svg.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   viewBox: '0 0 16 4',
   width: props.size,
   height: props.size * 0.25
@@ -331,20 +331,22 @@ const Progress = React__default.default.forwardRef((_ref, ref) => {
   const ariaLabel = reactTheming.useText(Progress, {
     'aria-label': label
   }, 'aria-label', 'Progress');
-  return React__default.default.createElement(StyledProgressBackground, _extends({
-    "data-garden-id": COMPONENT_ID$1,
-    "data-garden-version": '8.62.2',
-    "aria-valuemax": 100,
-    "aria-valuemin": 0,
-    "aria-valuenow": percentage,
-    role: "progressbar",
-    size: size,
-    ref: ref,
-    "aria-label": ariaLabel
-  }, other), React__default.default.createElement(StyledProgressIndicator, {
-    value: percentage,
-    size: size
-  }));
+  return (
+    React__default.default.createElement(StyledProgressBackground, _extends({
+      "data-garden-id": COMPONENT_ID$1,
+      "data-garden-version": '8.63.0',
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": percentage,
+      role: "progressbar",
+      size: size,
+      ref: ref,
+      "aria-label": ariaLabel
+    }, other), React__default.default.createElement(StyledProgressIndicator, {
+      value: percentage,
+      size: size
+    }))
+  );
 });
 Progress.displayName = 'Progress';
 Progress.propTypes = {
@@ -533,19 +535,21 @@ const Inline = React.forwardRef((_ref, ref) => {
     ...other
   } = _ref;
   const ariaLabel = reactTheming.useText(Inline, other, 'aria-label', 'loading');
-  return React__default.default.createElement(StyledInline, _extends({
-    ref: ref,
-    size: size,
-    color: color,
-    "aria-label": ariaLabel,
-    role: "img"
-  }, other), React__default.default.createElement(StyledCircle, {
-    cx: "14"
-  }), React__default.default.createElement(StyledCircle, {
-    cx: "8"
-  }), React__default.default.createElement(StyledCircle, {
-    cx: "2"
-  }));
+  return (
+    React__default.default.createElement(StyledInline, _extends({
+      ref: ref,
+      size: size,
+      color: color,
+      "aria-label": ariaLabel,
+      role: "img"
+    }, other), React__default.default.createElement(StyledCircle, {
+      cx: "14"
+    }), React__default.default.createElement(StyledCircle, {
+      cx: "8"
+    }), React__default.default.createElement(StyledCircle, {
+      cx: "2"
+    }))
+  );
 });
 Inline.displayName = 'Inline';
 Inline.propTypes = {

package/dist/index.esm.js

@@ -87,7 +87,7 @@ StyledDotsCircleThree.defaultProps = {
 const COMPONENT_ID$5 = 'loaders.loading_placeholder';
 const StyledLoadingPlaceholder = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
@@ -111,7 +111,7 @@ const sizeToBorderRadius = (size, theme) => sizeToHeight(size, theme) / 2;
 const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
 const StyledProgressBackground = styled.div.attrs(props => ({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
@@ -123,7 +123,7 @@ StyledProgressBackground.defaultProps = {
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 const StyledProgressIndicator = styled.div.attrs(props => ({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   height: props.height || sizeToHeight(props.size, props.theme),
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
@@ -166,7 +166,7 @@ const retrieveSkeletonGradient = _ref3 => {
 };
 const StyledSkeleton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -194,7 +194,7 @@ StyledSpinnerCircle.defaultProps = {
 };
 
 const StyledSVG = styled.svg.attrs(props => ({
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   xmlns: 'http://www.w3.org/2000/svg',
   width: props.width,
   height: props.height,
@@ -224,7 +224,7 @@ StyledCircle.defaultProps = {
 };
 const StyledInline = styled.svg.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   viewBox: '0 0 16 4',
   width: props.size,
   height: props.size * 0.25
@@ -323,20 +323,22 @@ const Progress = React.forwardRef((_ref, ref) => {
   const ariaLabel = useText(Progress, {
     'aria-label': label
   }, 'aria-label', 'Progress');
-  return React.createElement(StyledProgressBackground, _extends({
-    "data-garden-id": COMPONENT_ID$1,
-    "data-garden-version": '8.62.2',
-    "aria-valuemax": 100,
-    "aria-valuemin": 0,
-    "aria-valuenow": percentage,
-    role: "progressbar",
-    size: size,
-    ref: ref,
-    "aria-label": ariaLabel
-  }, other), React.createElement(StyledProgressIndicator, {
-    value: percentage,
-    size: size
-  }));
+  return (
+    React.createElement(StyledProgressBackground, _extends({
+      "data-garden-id": COMPONENT_ID$1,
+      "data-garden-version": '8.63.0',
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": percentage,
+      role: "progressbar",
+      size: size,
+      ref: ref,
+      "aria-label": ariaLabel
+    }, other), React.createElement(StyledProgressIndicator, {
+      value: percentage,
+      size: size
+    }))
+  );
 });
 Progress.displayName = 'Progress';
 Progress.propTypes = {
@@ -525,19 +527,21 @@ const Inline = forwardRef((_ref, ref) => {
     ...other
   } = _ref;
   const ariaLabel = useText(Inline, other, 'aria-label', 'loading');
-  return React.createElement(StyledInline, _extends({
-    ref: ref,
-    size: size,
-    color: color,
-    "aria-label": ariaLabel,
-    role: "img"
-  }, other), React.createElement(StyledCircle, {
-    cx: "14"
-  }), React.createElement(StyledCircle, {
-    cx: "8"
-  }), React.createElement(StyledCircle, {
-    cx: "2"
-  }));
+  return (
+    React.createElement(StyledInline, _extends({
+      ref: ref,
+      size: size,
+      color: color,
+      "aria-label": ariaLabel,
+      role: "img"
+    }, other), React.createElement(StyledCircle, {
+      cx: "14"
+    }), React.createElement(StyledCircle, {
+      cx: "8"
+    }), React.createElement(StyledCircle, {
+      cx: "2"
+    }))
+  );
 });
 Inline.displayName = 'Inline';
 Inline.propTypes = {

package/dist/typings/elements/Inline.d.ts

@@ -6,6 +6,10 @@
  */
 import React from 'react';
 import { IInlineProps } from '../types';
+/**
+ * 1. role='img' on `svg` is valid WAI-ARIA usage in this context.
+ *    https://dequeuniversity.com/rules/axe/4.2/svg-img-alt
+ */
 /**
  * @extends SVGAttributes<SVGSVGElement>
  */

package/dist/typings/elements/Progress.d.ts

@@ -6,6 +6,11 @@
  */
 import React from 'react';
 import { IProgressProps } from '../types';
+/**
+ * 1. Garden progress bar is quite custom, and while using a native
+ *    `progress` element would be ideal, its inclusion of a shadow
+ *    root in Safari prevents straightforward restyling/functional overrides.
+ */
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

package/dist/typings/types/index.d.ts

@@ -6,7 +6,7 @@
  */
 import { HTMLAttributes, SVGAttributes } from 'react';
 export declare const SIZE: readonly ["small", "medium", "large"];
-export declare type Size = typeof SIZE[number];
+export type Size = (typeof SIZE)[number];
 export interface IDotsProps extends SVGAttributes<SVGSVGElement> {
     /** Sets the height and width in pixels. Inherits the parent's font size by default. */
     size?: string | number;

package/dist/typings/utils/spinner-coordinates.d.ts

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-declare type AnimationPoints = Record<number, number>;
+type AnimationPoints = Record<number, number>;
 export declare const STROKE_WIDTH_FRAMES: AnimationPoints;
 export declare const ROTATION_FRAMES: AnimationPoints;
 export declare const DASHARRAY_FRAMES: AnimationPoints;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-loaders",
-  "version": "8.62.2",
+  "version": "8.63.0",
   "description": "Components relating to loaders in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -32,7 +32,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.62.2"
+    "@zendeskgarden/react-theming": "^8.63.0"
   },
   "keywords": [
     "components",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "27a7d6c021f3360396af60d51ecbf66e9076a405"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }