@zohodesk/components 1.0.0-temp-36 → 1.0.0-temp-40

package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -13,7 +13,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _velocityReact = require("velocity-react");
 
-var _velocity = _interopRequireDefault(require("velocity-animate/velocity.ui"));
+require("velocity-animate/velocity.ui");
+
+var _LibraryContextInit = _interopRequireDefault(require("../../Provider/LibraryContextInit"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -61,7 +63,9 @@ var VelocityAnimation = /*#__PURE__*/function (_React$Component) {
           isCustomized = _this$props.isCustomized,
           needUIPack = _this$props.needUIPack,
           isFlex = _this$props.isFlex;
-      var direction = this.context.direction;
+      var _this$context = this.context,
+          direction = _this$context.direction,
+          isReducedMotion = _this$context.isReducedMotion;
       var enterAnimationObj = {
         fade: 'transition.fadeIn',
         slideDown: 'slideDown',
@@ -96,7 +100,7 @@ var VelocityAnimation = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement(_velocityReact.VelocityComponent, {
         key: name,
         animation: animation,
-        duration: duration,
+        duration: !isReducedMotion ? duration : 0,
         runOnMount: runOnMount,
         display: isActive ? isFlex ? 'flex' : '' : 'none',
         delay: delay,
@@ -128,8 +132,10 @@ VelocityAnimation.propTypes = {
   runOnMount: _propTypes["default"].bool
 };
 VelocityAnimation.contextTypes = {
-  direction: _propTypes["default"].string
+  direction: _propTypes["default"].string,
+  isReducedMotion: _propTypes["default"].bool
 };
+VelocityAnimation.contextType = _LibraryContextInit["default"];
 
 if (false) {
   VelocityAnimation.docs = {

package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -13,7 +13,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _velocityReact = require("velocity-react");
 
-var _velocity = _interopRequireDefault(require("velocity-animate/velocity.ui"));
+require("velocity-animate/velocity.ui");
+
+var _LibraryContextInit = _interopRequireDefault(require("../../Provider/LibraryContextInit"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -78,7 +80,9 @@ var VelocityAnimationGroup = /*#__PURE__*/function (_React$Component) {
           isCustomized = _this$props.isCustomized,
           name = _this$props.name,
           needUIPack = _this$props.needUIPack;
-      var direction = this.context.direction;
+      var _this$context = this.context,
+          direction = _this$context.direction,
+          isReducedMotion = _this$context.isReducedMotion;
       var childProps = clearProps(this.props);
       var enterAnimationObj = {
         fade: 'transition.fadeIn',
@@ -112,13 +116,13 @@ var VelocityAnimationGroup = /*#__PURE__*/function (_React$Component) {
       };
       var enterAnimation = {
         animation: isCustomized ? enterAnimationObj[name] : needUIPack ? "transition.".concat(enterName, "In") : enterName,
-        duration: enterDuration,
+        duration: !isReducedMotion ? enterDuration : 0,
         delay: enterDelay ? enterDelay : 0,
         display: isFlex ? 'flex' : ''
       };
       var exitAnimation = {
         animation: isCustomized ? exitAnimationObj[name] : needUIPack ? "transition.".concat(exitName ? exitName : enterName, "Out") : exitName ? exitName : enterName,
-        duration: exitDuration,
+        duration: !isReducedMotion ? exitDuration : 0,
         delay: exitDelay ? exitDelay : 0,
         display: 'none'
       };
@@ -172,8 +176,10 @@ VelocityAnimationGroup.propTypes = {
   runOnMount: _propTypes["default"].bool
 };
 VelocityAnimationGroup.contextTypes = {
-  direction: _propTypes["default"].string
+  direction: _propTypes["default"].string,
+  isReducedMotion: _propTypes["default"].bool
 };
+VelocityAnimationGroup.contextType = _LibraryContextInit["default"];
 
 if (false) {
   VelocityAnimationGroup.docs = {

package/lib/a11y/FocusScope/FocusScope.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = FocusScope;
-exports.useFocusManager = useFocusManager;
 exports.getFocusableTreeWalker = getFocusableTreeWalker;
+exports.useFocusManager = useFocusManager;
 exports.useLayoutEffect = void 0;
 
 var _react = _interopRequireWildcard(require("react"));

package/lib/beta/FocusRing/FocusRing.module.css

@@ -1,152 +1,152 @@
-.input{
-  width:100%;
-  outline: 0;
-  border: 1px;
-  border-bottom: 1px solid #ddd
-}
-.badFocus {
-  display: inline-block;
-  margin-top: 10px;
-  border-radius: 2px;
-  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
-  margin-bottom: 30px;
-  padding: 2px;
-  margin: 10px;
-}
-[dir=ltr] .badFocus {
-  margin-right: 5px;
-}
-[dir=rtl] .badFocus {
-  margin-left: 5px;
-}
-:focus{
-  outline: 0;
-}
-.goodFocus {
-  display: inline-block;
-  border-radius: 2px;
-  padding: 2px;
-  box-shadow: 0 0 0 4px rgba(91,147,255,0.25);
-}
-.inpFocus{
-  width: auto;
-  padding: 5px;
-  border-radius: 2px;
-  margin: 10px;
-}
-.mouseFocus, .inpFocus:focus{
-  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
-}
-.tabFocus, .tabFocus:focus{
-  box-shadow: 0 0 0 4px rgba(24, 91, 226, 0.25);
-}
-.freezeLayer{
-  position: fixed;
-  top:0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(20,20,20,.5);
-}
-[dir=ltr] .freezeLayer{
-  left:0;
-  right: 0;
-}
-[dir=rtl] .freezeLayer{
-  right:0;
-  left: 0;
-}
-[dir=ltr] .element{
-  margin:1rem 0 1rem .5rem;
-}
-[dir=rtl] .element{
-  margin:1rem .5rem 1rem 0;
-}
-.container{
-  min-width: 400px;
-  transition: .3s ease-in-out;
-  position: absolute;
-  background-color: #fff;
-  border-radius: 10px;
-  padding: 20px;
-}
-.formContainer{
-  display: flex;
-  flex-direction: column;
-}
-label{
-  font-weight: 400;
-  font-size: 20px;
-}
-.sOpt:focus{
-  background-color: red;
-}
-.button {
-  -webkit-appearance: none;
-  appearance: none;
-  color: white;
-  font-size: 14px;
-  background: green;
-  border: none;
-  padding: 4px 8px;
-}
-
-.focus-ring {
-  outline: 2px solid dodgerblue;
-  outline-offset: 2px;
-}
-.box{
-  display: flex;
-  flex-direction: column;
-}
-.box1{
-  transform: scale(1);
-}
-[dir=ltr] .manage{
-  right: 0;
-}
-[dir=rtl] .manage{
-  left: 0;
-}
-.primary{
-    color: #fff;
-    text-decoration: none;
-    font-size: 13px;
-    background: #00aefe;
-    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
-    padding: 7px 12px;
-    cursor: pointer;
-    margin-top: 1px;
-    border-radius: 3px;
-    border: 1px solid #00aefe;
-    margin:10px
-  }
-  .secondary{
-    color: #8c8c8c;
-    text-decoration: none;
-    font-size: 13px;
-    background: #fff;
-    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
-    padding: 7px 12px;
-    cursor: pointer;
-    margin-top: 1px;
-    border-radius: 3px;
-    border: 1px solid #8c8c8c
-  }
-  
-  [dir=ltr] .primary:focus{
-  box-shadow: 2px 2px 6px 0 rgba(19, 173, 211, 0.493);
-  }
-  
-  [dir=rtl] .primary:focus{
-    box-shadow: -2px 2px 6px 0 rgba(19, 173, 211, 0.493);
-  }
-  
-  [dir=ltr] .secondary:focus{
-  box-shadow: 2px 2px 6px 0 rgba(39, 40, 41, 0.493)
-  }
-  
-  [dir=rtl] .secondary:focus{
-    box-shadow: -2px 2px 6px 0 rgba(39, 40, 41, 0.493)
+.input{
+  width:100%;
+  outline: 0;
+  border: 1px;
+  border-bottom: 1px solid #ddd
+}
+.badFocus {
+  display: inline-block;
+  margin-top: 10px;
+  border-radius: 2px;
+  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
+  margin-bottom: 30px;
+  padding: 2px;
+  margin: 10px;
+}
+[dir=ltr] .badFocus {
+  margin-right: 5px;
+}
+[dir=rtl] .badFocus {
+  margin-left: 5px;
+}
+:focus{
+  outline: 0;
+}
+.goodFocus {
+  display: inline-block;
+  border-radius: 2px;
+  padding: 2px;
+  box-shadow: 0 0 0 4px rgba(91,147,255,0.25);
+}
+.inpFocus{
+  width: auto;
+  padding: 5px;
+  border-radius: 2px;
+  margin: 10px;
+}
+.mouseFocus, .inpFocus:focus{
+  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
+}
+.tabFocus, .tabFocus:focus{
+  box-shadow: 0 0 0 4px rgba(24, 91, 226, 0.25);
+}
+.freezeLayer{
+  position: fixed;
+  top:0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(20,20,20,.5);
+}
+[dir=ltr] .freezeLayer{
+  left:0;
+  right: 0;
+}
+[dir=rtl] .freezeLayer{
+  right:0;
+  left: 0;
+}
+[dir=ltr] .element{
+  margin:1rem 0 1rem .5rem;
+}
+[dir=rtl] .element{
+  margin:1rem .5rem 1rem 0;
+}
+.container{
+  min-width: 400px;
+  transition: .3s ease-in-out;
+  position: absolute;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+}
+.formContainer{
+  display: flex;
+  flex-direction: column;
+}
+label{
+  font-weight: 400;
+  font-size: 20px;
+}
+.sOpt:focus{
+  background-color: red;
+}
+.button {
+  -webkit-appearance: none;
+  appearance: none;
+  color: white;
+  font-size: 14px;
+  background: green;
+  border: none;
+  padding: 4px 8px;
+}
+
+.focus-ring {
+  outline: 2px solid dodgerblue;
+  outline-offset: 2px;
+}
+.box{
+  display: flex;
+  flex-direction: column;
+}
+.box1{
+  transform: scale(1);
+}
+[dir=ltr] .manage{
+  right: 0;
+}
+[dir=rtl] .manage{
+  left: 0;
+}
+.primary{
+    color: #fff;
+    text-decoration: none;
+    font-size: 13px;
+    background: #00aefe;
+    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
+    padding: 7px 12px;
+    cursor: pointer;
+    margin-top: 1px;
+    border-radius: 3px;
+    border: 1px solid #00aefe;
+    margin:10px
+  }
+  .secondary{
+    color: #8c8c8c;
+    text-decoration: none;
+    font-size: 13px;
+    background: #fff;
+    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
+    padding: 7px 12px;
+    cursor: pointer;
+    margin-top: 1px;
+    border-radius: 3px;
+    border: 1px solid #8c8c8c
+  }
+  
+  [dir=ltr] .primary:focus{
+  box-shadow: 2px 2px 6px 0 rgba(19, 173, 211, 0.493);
+  }
+  
+  [dir=rtl] .primary:focus{
+    box-shadow: -2px 2px 6px 0 rgba(19, 173, 211, 0.493);
+  }
+  
+  [dir=ltr] .secondary:focus{
+  box-shadow: 2px 2px 6px 0 rgba(39, 40, 41, 0.493)
+  }
+  
+  [dir=rtl] .secondary:focus{
+    box-shadow: -2px 2px 6px 0 rgba(39, 40, 41, 0.493)
   }