@zendeskgarden/react-loaders 8.49.2 → 8.50.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.49.2',
+  'data-garden-version': '8.50.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.49.2',
+    'data-garden-version': '8.50.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.49.2',
+    'data-garden-version': '8.50.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.49.2'
+  'data-garden-version': '8.50.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.49.2',
+    'data-garden-version': '8.50.0',
     xmlns: 'http://www.w3.org/2000/svg',
     width: props.width,
     height: props.height,
@@ -372,23 +372,23 @@ var StyledCircle = styled__default["default"].circle.attrs({
   cy: 2,
   r: 2
 }).withConfig({
-  displayName: "StyledInlineTypingIndicator__StyledCircle",
-  componentId: "sc-cn3aq9-0"
+  displayName: "StyledInline__StyledCircle",
+  componentId: "sc-fxsb9l-0"
 })([""]);
 StyledCircle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var StyledInlineTypingSVG = styled__default["default"].svg.attrs(function (props) {
+var StyledInline = styled__default["default"].svg.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.49.2',
+    'data-garden-version': '8.50.0',
     viewBox: '0 0 16 4',
     width: props.size,
     height: props.size * 0.25
   };
 }).withConfig({
-  displayName: "StyledInlineTypingIndicator__StyledInlineTypingSVG",
-  componentId: "sc-cn3aq9-1"
+  displayName: "StyledInline",
+  componentId: "sc-fxsb9l-1"
 })(["color:", ";", "{opacity:0.2;&:nth-child(1){animation:", " 1s infinite;animation-delay:", ";}&:nth-child(2){animation:", " 1s infinite;animation-delay:0.2s;}&:nth-child(3){animation:", " 1s infinite;animation-delay:", ";}}", ""], function (props) {
   return props.color;
 }, StyledCircle, PULSE_ANIMATION, function (props) {
@@ -398,7 +398,7 @@ var StyledInlineTypingSVG = styled__default["default"].svg.attrs(function (props
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
 });
-StyledInlineTypingSVG.defaultProps = {
+StyledInline.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -473,6 +473,8 @@ Dots.defaultProps = {
   delayMS: 750
 };
 
+var SIZE = ['small', 'medium', 'large'];
+
 var _excluded$3 = ["value", "size"];
 var COMPONENT_ID$1 = 'loaders.progress';
 var Progress = React__default["default"].forwardRef(function (_ref, ref) {
@@ -482,7 +484,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.49.2',
+    "data-garden-version": '8.50.0',
     "aria-valuemax": 100,
     "aria-valuemin": 0,
     "aria-valuenow": percentage,
@@ -498,7 +500,7 @@ Progress.displayName = 'Progress';
 Progress.propTypes = {
   color: PropTypes__default["default"].string,
   value: PropTypes__default["default"].number.isRequired,
-  size: PropTypes__default["default"].oneOf(['small', 'medium', 'large'])
+  size: PropTypes__default["default"].oneOf(SIZE)
 };
 Progress.defaultProps = {
   value: 0,
@@ -681,7 +683,7 @@ 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({
+  return React__default["default"].createElement(StyledInline, _extends({
     ref: ref,
     size: size,
     color: color

package/dist/index.esm.js

@@ -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.49.2',
+  'data-garden-version': '8.50.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.49.2',
+    'data-garden-version': '8.50.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.49.2',
+    'data-garden-version': '8.50.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.49.2'
+  'data-garden-version': '8.50.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.49.2',
+    'data-garden-version': '8.50.0',
     xmlns: 'http://www.w3.org/2000/svg',
     width: props.width,
     height: props.height,
@@ -362,23 +362,23 @@ var StyledCircle = styled.circle.attrs({
   cy: 2,
   r: 2
 }).withConfig({
-  displayName: "StyledInlineTypingIndicator__StyledCircle",
-  componentId: "sc-cn3aq9-0"
+  displayName: "StyledInline__StyledCircle",
+  componentId: "sc-fxsb9l-0"
 })([""]);
 StyledCircle.defaultProps = {
   theme: DEFAULT_THEME
 };
-var StyledInlineTypingSVG = styled.svg.attrs(function (props) {
+var StyledInline = styled.svg.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.49.2',
+    'data-garden-version': '8.50.0',
     viewBox: '0 0 16 4',
     width: props.size,
     height: props.size * 0.25
   };
 }).withConfig({
-  displayName: "StyledInlineTypingIndicator__StyledInlineTypingSVG",
-  componentId: "sc-cn3aq9-1"
+  displayName: "StyledInline",
+  componentId: "sc-fxsb9l-1"
 })(["color:", ";", "{opacity:0.2;&:nth-child(1){animation:", " 1s infinite;animation-delay:", ";}&:nth-child(2){animation:", " 1s infinite;animation-delay:0.2s;}&:nth-child(3){animation:", " 1s infinite;animation-delay:", ";}}", ""], function (props) {
   return props.color;
 }, StyledCircle, PULSE_ANIMATION, function (props) {
@@ -388,7 +388,7 @@ var StyledInlineTypingSVG = styled.svg.attrs(function (props) {
 }, function (props) {
   return retrieveComponentStyles(COMPONENT_ID$3, props);
 });
-StyledInlineTypingSVG.defaultProps = {
+StyledInline.defaultProps = {
   theme: DEFAULT_THEME
 };
 
@@ -463,6 +463,8 @@ Dots.defaultProps = {
   delayMS: 750
 };
 
+var SIZE = ['small', 'medium', 'large'];
+
 var _excluded$3 = ["value", "size"];
 var COMPONENT_ID$1 = 'loaders.progress';
 var Progress = React.forwardRef(function (_ref, ref) {
@@ -472,7 +474,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.49.2',
+    "data-garden-version": '8.50.0',
     "aria-valuemax": 100,
     "aria-valuemin": 0,
     "aria-valuenow": percentage,
@@ -488,7 +490,7 @@ Progress.displayName = 'Progress';
 Progress.propTypes = {
   color: PropTypes.string,
   value: PropTypes.number.isRequired,
-  size: PropTypes.oneOf(['small', 'medium', 'large'])
+  size: PropTypes.oneOf(SIZE)
 };
 Progress.defaultProps = {
   value: 0,
@@ -671,7 +673,7 @@ var Inline = forwardRef(function (_ref, ref) {
   var size = _ref.size,
       color = _ref.color,
       other = _objectWithoutProperties(_ref, _excluded);
-  return React.createElement(StyledInlineTypingSVG, _extends({
+  return React.createElement(StyledInline, _extends({
     ref: ref,
     size: size,
     color: color

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

@@ -4,17 +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, { 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. */
-    color?: string;
-    /** Sets the length of the animation cycle in milliseconds **/
-    duration?: number;
-    /** Delays displaying the loader to prevent a render flash during normal loading times **/
-    delayMS?: number;
-}
+import React from 'react';
+import { IDotsProps } from '../types';
 /**
  * @extends SVGAttributes<SVGSVGElement>
  */

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

@@ -4,13 +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, { 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. */
-    color?: string;
-}
+import React from 'react';
+import { IInlineProps } from '../types';
 /**
  * @extends SVGAttributes<SVGSVGElement>
  */

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

@@ -4,18 +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, { HTMLAttributes } from 'react';
-export interface IProgressProps extends HTMLAttributes<HTMLDivElement> {
-    /** Sets the progress as a value between 0 and 100 */
-    value?: number;
-    /**
-     * Sets the foreground bar's fill color.
-     * Defaults to the `successHue` [theme](/components/theme-object#colors) value.
-     */
-    color?: string;
-    /** Adjusts the height */
-    size?: 'small' | 'medium' | 'large';
-}
+import React from 'react';
+import { IProgressProps } from '../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

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

@@ -4,15 +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, { 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` */
-    height?: string;
-    /** Inverts the color for use on dark backgrounds */
-    isLight?: boolean;
-}
+import React from 'react';
+import { ISkeletonProps } from '../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

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

@@ -4,25 +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, { SVGAttributes } from 'react';
-export interface ISpinnerProps extends SVGAttributes<SVGSVGElement> {
-    /**
-     * Sets the height and width in pixels. Inherits the parent's font size by default.
-     **/
-    size?: string;
-    /**
-     * Sets the length of the animation cycle in milliseconds
-     **/
-    duration?: number;
-    /**
-     * Sets the fill color. Inherits the parent's `color` by default.
-     **/
-    color?: string;
-    /**
-     * Delays displaying the loader to prevent a render flash during normal loading times
-     **/
-    delayMS?: number;
-}
+import React from 'react';
+import { ISpinnerProps } from '../types';
 /**
  * @extends SVGAttributes<SVGSVGElement>
  */

package/dist/typings/index.d.ts

@@ -5,12 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 export { Dots } from './elements/Dots';
-export type { IDotsProps } from './elements/Dots';
 export { Progress } from './elements/Progress';
-export type { IProgressProps } from './elements/Progress';
 export { Skeleton } from './elements/Skeleton';
-export type { ISkeletonProps } from './elements/Skeleton';
 export { Spinner } from './elements/Spinner';
-export type { ISpinnerProps } from './elements/Spinner';
 export { Inline } from './elements/Inline';
-export type { IInlineProps } from './elements/Inline';
+export type { IDotsProps, IInlineProps, IProgressProps, ISkeletonProps, ISpinnerProps } from './types';

package/dist/typings/styled/{StyledInlineTypingIndicator.d.ts → StyledInline.d.ts}

@@ -4,15 +4,14 @@
  * 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 declare const StyledCircle: import("styled-components").StyledComponent<"circle", import("styled-components").DefaultTheme, {
     fill: "currentColor";
     cy: 2;
     r: 2;
 }, "cy" | "fill" | "r">;
-interface IStyledTypingSvgProps extends React.HTMLAttributes<SVGSVGElement> {
+interface IStyledInlineProps {
     size: number;
     color: string;
 }
-export declare const StyledInlineTypingSVG: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, IStyledTypingSvgProps, never>;
+export declare const StyledInline: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, IStyledInlineProps, never>;
 export {};

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

@@ -4,12 +4,14 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+interface IStyledLoadingPlaceholderProps {
+    fontSize: string | number;
+    width?: string;
+    height?: string;
+}
 export declare const StyledLoadingPlaceholder: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
     role: "progressbar";
-} & {
-    fontSize: string | number;
-    width?: string | undefined;
-    height?: string | undefined;
-}, "role" | "data-garden-id" | "data-garden-version">;
+} & IStyledLoadingPlaceholderProps, "role" | "data-garden-id" | "data-garden-version">;
+export {};

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

@@ -5,15 +5,15 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
-declare type SIZE = 'small' | 'medium' | 'large';
+import { Size } from '../types';
 interface IStyledProgressBackgroundProps {
-    size: SIZE;
+    size: Size;
     borderRadius?: number;
     color?: string;
 }
 export declare const StyledProgressBackground: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledProgressBackgroundProps, never>;
 interface IStyledProgressIndicatorProps {
-    size: SIZE;
+    size: Size;
     borderRadius?: number;
     value: number;
     height?: number;

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

@@ -10,4 +10,4 @@ export { StyledProgressBackground, StyledProgressIndicator } from './StyledProgr
 export { StyledSkeleton } from './StyledSkeleton';
 export { StyledSpinnerCircle } from './StyledSpinnerCircle';
 export { StyledSVG } from './StyledSVG';
-export { StyledCircle, StyledInlineTypingSVG } from './StyledInlineTypingIndicator';
+export { StyledCircle, StyledInline } from './StyledInline';

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

@@ -0,0 +1,62 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * 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 { HTMLAttributes, SVGAttributes } from 'react';
+export declare const SIZE: readonly ["small", "medium", "large"];
+export declare 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;
+    /** Sets the fill color. Inherits the parent's `color` by default. */
+    color?: string;
+    /** Sets the length of the animation cycle in milliseconds **/
+    duration?: number;
+    /** Delays displaying the loader to prevent a render flash during normal loading times **/
+    delayMS?: number;
+}
+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. */
+    color?: string;
+}
+export interface IProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /** Sets the progress as a value between 0 and 100 */
+    value?: number;
+    /**
+     * Sets the foreground bar's fill color.
+     * Defaults to the `successHue` [theme](/components/theme-object#colors) value.
+     */
+    color?: string;
+    /** Adjusts the height */
+    size?: Size;
+}
+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` */
+    height?: string;
+    /** Inverts the color for use on dark backgrounds */
+    isLight?: boolean;
+}
+export interface ISpinnerProps extends SVGAttributes<SVGSVGElement> {
+    /**
+     * Sets the height and width in pixels. Inherits the parent's font size by default.
+     **/
+    size?: string;
+    /**
+     * Sets the length of the animation cycle in milliseconds
+     **/
+    duration?: number;
+    /**
+     * Sets the fill color. Inherits the parent's `color` by default.
+     **/
+    color?: string;
+    /**
+     * Delays displaying the loader to prevent a render flash during normal loading times
+     **/
+    delayMS?: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-loaders",
-  "version": "8.49.2",
+  "version": "8.50.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.49.2"
+    "@zendeskgarden/react-theming": "^8.50.0"
   },
   "keywords": [
     "components",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "fd7769285a2f4bc1169c63f4db57a85a6e793027"
+  "gitHead": "d5b66e1980faf0fd40818c9e74801dfa1c3550a0"
 }