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

package/es/a11y/FocusScope/FocusScope.js

@@ -225,7 +225,9 @@ function useFocusContainment(scopeRef, contain) {
   }, [raf]);
 }
 
-function isElementInAnyScope(element, scopes = []) {
+function isElementInAnyScope(element) {
+  let scopes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
   for (let scope of scopes.values()) {
     if (isElementInScope(element, scope.current)) {
       return true;
@@ -235,11 +237,14 @@ function isElementInAnyScope(element, scopes = []) {
   return false;
 }
 
-function isElementInScope(element, scope = []) {
+function isElementInScope(element) {
+  let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return scope.some(node => node.contains(element));
 }
 
-function focusElement(element = null) {
+function focusElement() {
+  let element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
   if (element != null) {
     element.focus();
   }
@@ -259,7 +264,8 @@ function findElement(elements) {
   return ele.length ? ele[0] : null;
 }
 
-function focusFirstInScope(scope = []) {
+function focusFirstInScope() {
+  let scope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let elements = getFocusableElementsInScope(scope, {
     tabbable: true
   });

package/es/beta/FocusRing/FocusRing.js

@@ -16,7 +16,10 @@ const FOCUS_VISIBLE_INPUT_KEYS = {
   Escape: false
 };
 
-function triggerChangeHandlers(evType = eventFrom, e = eventType) {
+function triggerChangeHandlers() {
+  let evType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : eventFrom;
+  let e = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : eventType;
+
   for (let handler of changeHandlers) {
     handler(evType, e);
   }

package/es/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)
   }