Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@zendeskgarden/react-loaders

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zendeskgarden/react-loaders - npm Package Compare versions

Comparing version 8.26.0 to 8.27.0

@@ -14,4 +14,4 @@ /**

var PropTypes = require('prop-types');
var styled = require('styled-components');
var containerSchedule = require('@zendeskgarden/container-schedule');
var styled = require('styled-components');
var reactTheming = require('@zendeskgarden/react-theming');

@@ -229,3 +229,3 @@ var polished = require('polished');

'data-garden-id': COMPONENT_ID,
'data-garden-version': '8.26.0',
'data-garden-version': '8.27.0',
role: 'progressbar'

@@ -272,3 +272,3 @@ })(_templateObject$1(), function (props) {

'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
'data-garden-version': '8.26.0',
'data-garden-version': '8.27.0',
borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)

@@ -294,3 +294,3 @@ };

'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
'data-garden-version': '8.26.0',
'data-garden-version': '8.27.0',
height: props.height || sizeToHeight(props.size, props.theme),

@@ -345,3 +345,3 @@ borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)

'data-garden-id': COMPONENT_ID$1,
'data-garden-version': '8.26.0'
'data-garden-version': '8.27.0'
})(_templateObject$3(), fadeInAnimation, function (props) {

@@ -395,3 +395,3 @@ return props.theme.borderRadii.md;

return {
'data-garden-version': '8.26.0',
'data-garden-version': '8.27.0',
xmlns: 'http://www.w3.org/2000/svg',

@@ -442,3 +442,3 @@ width: props.width,

'data-garden-id': COMPONENT_ID$2,
'data-garden-version': '8.26.0',
'data-garden-version': '8.27.0',
viewBox: '0 0 16 4',

@@ -461,24 +461,2 @@ width: props.size,

var useCSSSVGAnimation = function useCSSSVGAnimation() {
var _useState = React.useState(true),
_useState2 = _slicedToArray(_useState, 2),
canAnimateSVG = _useState2[0],
setAnimateSVG = _useState2[1];
React.useEffect(function () {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
svg.setAttribute('viewBox', '0 0 2 2');
svg.setAttribute('style', 'position: fixed; top: 0; left: 0; width: 2px; height: 2px;');
rect.setAttribute('style', 'transform: translate(1px, 1px);');
rect.setAttribute('width', '1');
rect.setAttribute('height', '1');
svg.appendChild(rect);
document.body.appendChild(svg);
var result = document.elementFromPoint(1, 1) === svg;
svg.parentNode.removeChild(svg);
setAnimateSVG(result);
}, []);
return canAnimateSVG;
};
var COMPONENT_ID$3 = 'loaders.dots';

@@ -491,7 +469,13 @@ var Dots = function Dots(_ref) {

other = _objectWithoutProperties(_ref, ["size", "color", "duration", "delayMS"]);
var noAnimatedSVGSupport = useCSSSVGAnimation();
var theme = React.useContext(styled.ThemeContext);
var environment = reactTheming.useDocument(theme);
var canTransformSVG = React.useRef(null);
if (environment && canTransformSVG.current === null) {
var svg = environment.createElementNS('http://www.w3.org/2000/svg', 'svg');
canTransformSVG.current = 'transform' in svg;
}
var _useSchedule = containerSchedule.useSchedule({
duration: duration,
delayMS: delayMS,
loop: noAnimatedSVGSupport
loop: true
}),

@@ -503,3 +487,3 @@ delayComplete = _useSchedule.delayComplete;

React.useEffect(function () {
if (noAnimatedSVGSupport && delayComplete) {
if (!canTransformSVG.current && delayComplete) {
var transforms = [window.getComputedStyle(dotOne.current).getPropertyValue('transform'), window.getComputedStyle(dotTwo.current).getPropertyValue('transform'), window.getComputedStyle(dotThree.current).getPropertyValue('transform')];

@@ -556,3 +540,3 @@ dotOne.current.setAttribute('transform', transforms[0]);

"data-garden-id": COMPONENT_ID$4,
"data-garden-version": '8.26.0',
"data-garden-version": '8.27.0',
"aria-valuemax": 100,

@@ -559,0 +543,0 @@ "aria-valuemin": 0,

@@ -8,7 +8,7 @@ /**

import React, { useState, useEffect, useRef } from 'react';
import React, { useContext, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import styled, { keyframes, css, ThemeContext } from 'styled-components';
import { useSchedule } from '@zendeskgarden/container-schedule';
import styled, { keyframes, css } from 'styled-components';
import { DEFAULT_THEME, retrieveComponentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
import { DEFAULT_THEME, retrieveComponentStyles, getColor, getLineHeight, useDocument } from '@zendeskgarden/react-theming';
import { rgba } from 'polished';

@@ -219,3 +219,3 @@

'data-garden-id': COMPONENT_ID,
'data-garden-version': '8.26.0',
'data-garden-version': '8.27.0',
role: 'progressbar'

@@ -262,3 +262,3 @@ })(_templateObject$1(), function (props) {

'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
'data-garden-version': '8.26.0',
'data-garden-version': '8.27.0',
borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)

@@ -284,3 +284,3 @@ };

'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
'data-garden-version': '8.26.0',
'data-garden-version': '8.27.0',
height: props.height || sizeToHeight(props.size, props.theme),

@@ -335,3 +335,3 @@ borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)

'data-garden-id': COMPONENT_ID$1,
'data-garden-version': '8.26.0'
'data-garden-version': '8.27.0'
})(_templateObject$3(), fadeInAnimation, function (props) {

@@ -385,3 +385,3 @@ return props.theme.borderRadii.md;

return {
'data-garden-version': '8.26.0',
'data-garden-version': '8.27.0',
xmlns: 'http://www.w3.org/2000/svg',

@@ -432,3 +432,3 @@ width: props.width,

'data-garden-id': COMPONENT_ID$2,
'data-garden-version': '8.26.0',
'data-garden-version': '8.27.0',
viewBox: '0 0 16 4',

@@ -451,24 +451,2 @@ width: props.size,

var useCSSSVGAnimation = function useCSSSVGAnimation() {
var _useState = useState(true),
_useState2 = _slicedToArray(_useState, 2),
canAnimateSVG = _useState2[0],
setAnimateSVG = _useState2[1];
useEffect(function () {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
svg.setAttribute('viewBox', '0 0 2 2');
svg.setAttribute('style', 'position: fixed; top: 0; left: 0; width: 2px; height: 2px;');
rect.setAttribute('style', 'transform: translate(1px, 1px);');
rect.setAttribute('width', '1');
rect.setAttribute('height', '1');
svg.appendChild(rect);
document.body.appendChild(svg);
var result = document.elementFromPoint(1, 1) === svg;
svg.parentNode.removeChild(svg);
setAnimateSVG(result);
}, []);
return canAnimateSVG;
};
var COMPONENT_ID$3 = 'loaders.dots';

@@ -481,7 +459,13 @@ var Dots = function Dots(_ref) {

other = _objectWithoutProperties(_ref, ["size", "color", "duration", "delayMS"]);
var noAnimatedSVGSupport = useCSSSVGAnimation();
var theme = useContext(ThemeContext);
var environment = useDocument(theme);
var canTransformSVG = useRef(null);
if (environment && canTransformSVG.current === null) {
var svg = environment.createElementNS('http://www.w3.org/2000/svg', 'svg');
canTransformSVG.current = 'transform' in svg;
}
var _useSchedule = useSchedule({
duration: duration,
delayMS: delayMS,
loop: noAnimatedSVGSupport
loop: true
}),

@@ -493,3 +477,3 @@ delayComplete = _useSchedule.delayComplete;

useEffect(function () {
if (noAnimatedSVGSupport && delayComplete) {
if (!canTransformSVG.current && delayComplete) {
var transforms = [window.getComputedStyle(dotOne.current).getPropertyValue('transform'), window.getComputedStyle(dotTwo.current).getPropertyValue('transform'), window.getComputedStyle(dotThree.current).getPropertyValue('transform')];

@@ -546,3 +530,3 @@ dotOne.current.setAttribute('transform', transforms[0]);

"data-garden-id": COMPONENT_ID$4,
"data-garden-version": '8.26.0',
"data-garden-version": '8.27.0',
"aria-valuemax": 100,

@@ -549,0 +533,0 @@ "aria-valuemin": 0,

@@ -11,3 +11,3 @@ {

},
"version": "8.26.0",
"version": "8.27.0",
"main": "dist/index.cjs.js",

@@ -36,3 +36,3 @@ "module": "dist/index.esm.js",

"devDependencies": {
"@zendeskgarden/react-theming": "^8.26.0"
"@zendeskgarden/react-theming": "^8.27.0"
},

@@ -49,3 +49,3 @@ "keywords": [

"zendeskgarden:src": "src/index.ts",
"gitHead": "e656c731978ff053b85ed6bdb3ad28f5f52e1d7a"
"gitHead": "134f6d5aeba48d1832f0229ef09b062a2e5fe6b0"
}