@zendeskgarden/react-loaders 8.47.2 → 8.48.0

package/dist/index.cjs.js

@@ -193,7 +193,7 @@ StyledDotsCircleThree.defaultProps = {
 var COMPONENT_ID$5 = 'loaders.loading_placeholder';
 var StyledLoadingPlaceholder = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
@@ -228,7 +228,7 @@ var PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
 var StyledProgressBackground = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
   };
 }).withConfig({
@@ -252,7 +252,7 @@ var PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 var StyledProgressIndicator = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     height: props.height || sizeToHeight(props.size, props.theme),
     borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
   };
@@ -298,7 +298,7 @@ var retrieveSkeletonGradient = function retrieveSkeletonGradient(_ref3) {
 };
 var StyledSkeleton = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -339,7 +339,7 @@ StyledSpinnerCircle.defaultProps = {
 
 var StyledSVG = styled__default["default"].svg.attrs(function (props) {
   return {
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     xmlns: 'http://www.w3.org/2000/svg',
     width: props.width,
     height: props.height,
@@ -381,7 +381,7 @@ StyledCircle.defaultProps = {
 var StyledInlineTypingSVG = styled__default["default"].svg.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     viewBox: '0 0 16 4',
     width: props.size,
     height: props.size * 0.25
@@ -404,7 +404,7 @@ StyledInlineTypingSVG.defaultProps = {
 
 var _excluded$4 = ["size", "color", "duration", "delayMS"];
 var COMPONENT_ID$2 = 'loaders.dots';
-var Dots = function Dots(_ref) {
+var Dots = React.forwardRef(function (_ref, ref) {
   var size = _ref.size,
       color = _ref.color,
       duration = _ref.duration,
@@ -440,6 +440,7 @@ var Dots = function Dots(_ref) {
     }, "\xA0");
   }
   return React__default["default"].createElement(StyledSVG, _extends({
+    ref: ref,
     fontSize: size,
     color: color,
     width: "80",
@@ -457,7 +458,8 @@ var Dots = function Dots(_ref) {
     duration: duration,
     ref: dotThree
   })));
-};
+});
+Dots.displayName = 'Dots';
 Dots.propTypes = {
   size: PropTypes__default["default"].any,
   duration: PropTypes__default["default"].number,
@@ -480,7 +482,7 @@ var Progress = React__default["default"].forwardRef(function (_ref, ref) {
   var percentage = Math.max(0, Math.min(100, value));
   return React__default["default"].createElement(StyledProgressBackground, _extends({
     "data-garden-id": COMPONENT_ID$1,
-    "data-garden-version": '8.47.2',
+    "data-garden-version": '8.48.0',
     "aria-valuemax": 100,
     "aria-valuemin": 0,
     "aria-valuenow": percentage,
@@ -504,17 +506,19 @@ Progress.defaultProps = {
 };
 
 var _excluded$2 = ["width", "height", "isLight"];
-var Skeleton = function Skeleton(_ref) {
+var Skeleton = React.forwardRef(function (_ref, ref) {
   var width = _ref.width,
       height = _ref.height,
       isLight = _ref.isLight,
       other = _objectWithoutProperties(_ref, _excluded$2);
   return React__default["default"].createElement(StyledSkeleton, _extends({
+    ref: ref,
     isLight: isLight,
     customWidth: width,
     customHeight: height
   }, other), "\xA0");
-};
+});
+Skeleton.displayName = 'Skeleton';
 Skeleton.propTypes = {
   width: PropTypes__default["default"].string,
   height: PropTypes__default["default"].string,
@@ -615,7 +619,7 @@ var computeFrames = function computeFrames(frames, duration) {
     return acc;
   }, {});
 };
-var Spinner = function Spinner(_ref3) {
+var Spinner = React.forwardRef(function (_ref3, ref) {
   var size = _ref3.size,
       duration = _ref3.duration,
       color = _ref3.color,
@@ -644,6 +648,7 @@ var Spinner = function Spinner(_ref3) {
     }, "\xA0");
   }
   return React__default["default"].createElement(StyledSVG, _extends({
+    ref: ref,
     fontSize: size,
     color: color,
     width: WIDTH,
@@ -656,7 +661,8 @@ var Spinner = function Spinner(_ref3) {
     strokeWidthValue: strokeWidthValue,
     transform: "rotate(".concat(rotationValue, ", ").concat(WIDTH / 2, ", ").concat(HEIGHT / 2, ")")
   }));
-};
+});
+Spinner.displayName = 'Spinner';
 Spinner.propTypes = {
   size: PropTypes__default["default"].any,
   duration: PropTypes__default["default"].number,
@@ -671,24 +677,23 @@ Spinner.defaultProps = {
 };
 
 var _excluded = ["size", "color"];
-var InlineTypingIndicator = function InlineTypingIndicator(props) {
-  return React__default["default"].createElement(StyledInlineTypingSVG, props, React__default["default"].createElement(StyledCircle, {
+var Inline = React.forwardRef(function (_ref, ref) {
+  var size = _ref.size,
+      color = _ref.color,
+      other = _objectWithoutProperties(_ref, _excluded);
+  return React__default["default"].createElement(StyledInlineTypingSVG, _extends({
+    ref: ref,
+    size: size,
+    color: color
+  }, other), React__default["default"].createElement(StyledCircle, {
     cx: "14"
   }), React__default["default"].createElement(StyledCircle, {
     cx: "8"
   }), React__default["default"].createElement(StyledCircle, {
     cx: "2"
   }));
-};
-var Inline = function Inline(_ref) {
-  var size = _ref.size,
-      color = _ref.color,
-      other = _objectWithoutProperties(_ref, _excluded);
-  return React__default["default"].createElement(InlineTypingIndicator, _extends({
-    size: size,
-    color: color
-  }, other));
-};
+});
+Inline.displayName = 'Inline';
 Inline.propTypes = {
   size: PropTypes__default["default"].number,
   color: PropTypes__default["default"].string

package/dist/index.esm.js

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useContext, useRef, useEffect } from 'react';
+import React, { forwardRef, useContext, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled, { keyframes, css, ThemeContext } from 'styled-components';
 import { useSchedule } from '@zendeskgarden/container-schedule';
@@ -183,7 +183,7 @@ StyledDotsCircleThree.defaultProps = {
 var COMPONENT_ID$5 = 'loaders.loading_placeholder';
 var StyledLoadingPlaceholder = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
@@ -218,7 +218,7 @@ var PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
 var StyledProgressBackground = styled.div.attrs(function (props) {
   return {
     'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
   };
 }).withConfig({
@@ -242,7 +242,7 @@ var PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 var StyledProgressIndicator = styled.div.attrs(function (props) {
   return {
     'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     height: props.height || sizeToHeight(props.size, props.theme),
     borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
   };
@@ -288,7 +288,7 @@ var retrieveSkeletonGradient = function retrieveSkeletonGradient(_ref3) {
 };
 var StyledSkeleton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -329,7 +329,7 @@ StyledSpinnerCircle.defaultProps = {
 
 var StyledSVG = styled.svg.attrs(function (props) {
   return {
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     xmlns: 'http://www.w3.org/2000/svg',
     width: props.width,
     height: props.height,
@@ -371,7 +371,7 @@ StyledCircle.defaultProps = {
 var StyledInlineTypingSVG = styled.svg.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     viewBox: '0 0 16 4',
     width: props.size,
     height: props.size * 0.25
@@ -394,7 +394,7 @@ StyledInlineTypingSVG.defaultProps = {
 
 var _excluded$4 = ["size", "color", "duration", "delayMS"];
 var COMPONENT_ID$2 = 'loaders.dots';
-var Dots = function Dots(_ref) {
+var Dots = forwardRef(function (_ref, ref) {
   var size = _ref.size,
       color = _ref.color,
       duration = _ref.duration,
@@ -430,6 +430,7 @@ var Dots = function Dots(_ref) {
     }, "\xA0");
   }
   return React.createElement(StyledSVG, _extends({
+    ref: ref,
     fontSize: size,
     color: color,
     width: "80",
@@ -447,7 +448,8 @@ var Dots = function Dots(_ref) {
     duration: duration,
     ref: dotThree
   })));
-};
+});
+Dots.displayName = 'Dots';
 Dots.propTypes = {
   size: PropTypes.any,
   duration: PropTypes.number,
@@ -470,7 +472,7 @@ var Progress = React.forwardRef(function (_ref, ref) {
   var percentage = Math.max(0, Math.min(100, value));
   return React.createElement(StyledProgressBackground, _extends({
     "data-garden-id": COMPONENT_ID$1,
-    "data-garden-version": '8.47.2',
+    "data-garden-version": '8.48.0',
     "aria-valuemax": 100,
     "aria-valuemin": 0,
     "aria-valuenow": percentage,
@@ -494,17 +496,19 @@ Progress.defaultProps = {
 };
 
 var _excluded$2 = ["width", "height", "isLight"];
-var Skeleton = function Skeleton(_ref) {
+var Skeleton = forwardRef(function (_ref, ref) {
   var width = _ref.width,
       height = _ref.height,
       isLight = _ref.isLight,
       other = _objectWithoutProperties(_ref, _excluded$2);
   return React.createElement(StyledSkeleton, _extends({
+    ref: ref,
     isLight: isLight,
     customWidth: width,
     customHeight: height
   }, other), "\xA0");
-};
+});
+Skeleton.displayName = 'Skeleton';
 Skeleton.propTypes = {
   width: PropTypes.string,
   height: PropTypes.string,
@@ -605,7 +609,7 @@ var computeFrames = function computeFrames(frames, duration) {
     return acc;
   }, {});
 };
-var Spinner = function Spinner(_ref3) {
+var Spinner = forwardRef(function (_ref3, ref) {
   var size = _ref3.size,
       duration = _ref3.duration,
       color = _ref3.color,
@@ -634,6 +638,7 @@ var Spinner = function Spinner(_ref3) {
     }, "\xA0");
   }
   return React.createElement(StyledSVG, _extends({
+    ref: ref,
     fontSize: size,
     color: color,
     width: WIDTH,
@@ -646,7 +651,8 @@ var Spinner = function Spinner(_ref3) {
     strokeWidthValue: strokeWidthValue,
     transform: "rotate(".concat(rotationValue, ", ").concat(WIDTH / 2, ", ").concat(HEIGHT / 2, ")")
   }));
-};
+});
+Spinner.displayName = 'Spinner';
 Spinner.propTypes = {
   size: PropTypes.any,
   duration: PropTypes.number,
@@ -661,24 +667,23 @@ Spinner.defaultProps = {
 };
 
 var _excluded = ["size", "color"];
-var InlineTypingIndicator = function InlineTypingIndicator(props) {
-  return React.createElement(StyledInlineTypingSVG, props, React.createElement(StyledCircle, {
+var Inline = forwardRef(function (_ref, ref) {
+  var size = _ref.size,
+      color = _ref.color,
+      other = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(StyledInlineTypingSVG, _extends({
+    ref: ref,
+    size: size,
+    color: color
+  }, other), React.createElement(StyledCircle, {
     cx: "14"
   }), React.createElement(StyledCircle, {
     cx: "8"
   }), React.createElement(StyledCircle, {
     cx: "2"
   }));
-};
-var Inline = function Inline(_ref) {
-  var size = _ref.size,
-      color = _ref.color,
-      other = _objectWithoutProperties(_ref, _excluded);
-  return React.createElement(InlineTypingIndicator, _extends({
-    size: size,
-    color: color
-  }, other));
-};
+});
+Inline.displayName = 'Inline';
 Inline.propTypes = {
   size: PropTypes.number,
   color: PropTypes.string

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

@@ -4,8 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React from 'react';
-export interface IDotsProps extends React.SVGAttributes<SVGSVGElement> {
+import React, { SVGAttributes } from 'react';
+export interface IDotsProps extends SVGAttributes<SVGSVGElement> {
     /** Sets the height and width in pixels. Inherits the parent's font size by default. */
     size?: string | number;
     /** Sets the fill color. Inherits the parent's `color` by default. */
@@ -18,5 +18,4 @@ export interface IDotsProps extends React.SVGAttributes<SVGSVGElement> {
 /**
  * @extends SVGAttributes<SVGSVGElement>
  */
-declare const Dots: React.FC<IDotsProps>;
-export default Dots;
+export declare const Dots: React.ForwardRefExoticComponent<IDotsProps & React.RefAttributes<SVGSVGElement>>;

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

@@ -4,8 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React from 'react';
-export interface IInlineProps extends React.SVGAttributes<SVGSVGElement> {
+import React, { SVGAttributes } from 'react';
+export interface IInlineProps extends SVGAttributes<SVGSVGElement> {
     /** Sets the width in pixels and scales the loader proportionally */
     size?: number;
     /** Sets the fill color. Inherits the parent's `color` by default. */
@@ -14,5 +14,4 @@ export interface IInlineProps extends React.SVGAttributes<SVGSVGElement> {
 /**
  * @extends SVGAttributes<SVGSVGElement>
  */
-declare const Inline: React.FC<IInlineProps>;
-export default Inline;
+export declare const Inline: React.ForwardRefExoticComponent<IInlineProps & React.RefAttributes<SVGSVGElement>>;

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

@@ -16,8 +16,7 @@ export interface IProgressProps extends HTMLAttributes<HTMLDivElement> {
     /** Adjusts the height */
     size?: 'small' | 'medium' | 'large';
 }
-declare const _default: React.FunctionComponent<IProgressProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export default _default;
+export declare const Progress: React.ForwardRefExoticComponent<IProgressProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -4,8 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React from 'react';
-export interface ISkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+import React, { HTMLAttributes } from 'react';
+export interface ISkeletonProps extends HTMLAttributes<HTMLDivElement> {
     /** Sets the width as a percentage of the the parent element's width */
     width?: string;
     /** Sets the height as a percentage of parent element's height if the height is not already inherited by `line-height` */
@@ -16,5 +16,4 @@ export interface ISkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-declare const Skeleton: React.FC<ISkeletonProps>;
-export default Skeleton;
+export declare const Skeleton: React.ForwardRefExoticComponent<ISkeletonProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -4,8 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React from 'react';
-export interface ISpinnerProps extends React.SVGAttributes<SVGSVGElement> {
+import React, { SVGAttributes } from 'react';
+export interface ISpinnerProps extends SVGAttributes<SVGSVGElement> {
     /**
      * Sets the height and width in pixels. Inherits the parent's font size by default.
      **/
@@ -26,5 +26,4 @@ export interface ISpinnerProps extends React.SVGAttributes<SVGSVGElement> {
 /**
  * @extends SVGAttributes<SVGSVGElement>
  */
-declare const Spinner: React.FC<ISpinnerProps>;
-export default Spinner;
+export declare const Spinner: React.ForwardRefExoticComponent<ISpinnerProps & React.RefAttributes<SVGSVGElement>>;

package/dist/typings/index.d.ts

@@ -4,13 +4,13 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export { default as Dots } from './elements/Dots';
+export { Dots } from './elements/Dots';
 export type { IDotsProps } from './elements/Dots';
-export { default as Progress } from './elements/Progress';
+export { Progress } from './elements/Progress';
 export type { IProgressProps } from './elements/Progress';
-export { default as Skeleton } from './elements/Skeleton';
+export { Skeleton } from './elements/Skeleton';
 export type { ISkeletonProps } from './elements/Skeleton';
-export { default as Spinner } from './elements/Spinner';
+export { Spinner } from './elements/Spinner';
 export type { ISpinnerProps } from './elements/Spinner';
-export { default as Inline } from './elements/Inline';
+export { Inline } from './elements/Inline';
 export type { IInlineProps } from './elements/Inline';

package/dist/typings/styled/StyledInlineTypingIndicator.d.ts

@@ -10,8 +10,9 @@ export declare const StyledCircle: import("styled-components").StyledComponent<"
     cy: 2;
     r: 2;
 }, "cy" | "fill" | "r">;
-export interface IStyledTypingSvgProps extends React.HTMLAttributes<SVGSVGElement> {
+interface IStyledTypingSvgProps extends React.HTMLAttributes<SVGSVGElement> {
     size: number;
     color: string;
 }
 export declare const StyledInlineTypingSVG: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, IStyledTypingSvgProps, never>;
+export {};

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

@@ -11,4 +11,3 @@ export { StyledSkeleton } from './StyledSkeleton';
 export { StyledSpinnerCircle } from './StyledSpinnerCircle';
 export { StyledSVG } from './StyledSVG';
 export { StyledCircle, StyledInlineTypingSVG } from './StyledInlineTypingIndicator';
-export type { IStyledTypingSvgProps } from './StyledInlineTypingIndicator';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-loaders",
-  "version": "8.47.2",
+  "version": "8.48.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.47.2"
+    "@zendeskgarden/react-theming": "^8.48.0"
   },
   "keywords": [
     "components",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "41cb43f285760417ae2145e47eca0e4a600455ab"
+  "gitHead": "75f36aee62043004650c3eb2e1583b98a87d71f8"
 }