@zohodesk/components 1.0.0-temp-70 → 1.0.0-temp-71

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -14,8 +14,6 @@
 }
 .disabled,.readonly {
   --textboxicon_icon_cursor: not-allowed;
-}
-.disabled, .readonly {
   cursor: not-allowed;
 }
 .icon {
@@ -36,20 +34,15 @@
 .line {
   position: absolute;
   bottom: 0;
+  left: 0;
+  right: 0;
   min-height: 1px;
   transition: var(--zd_transition2);
-  height: var(--textboxicon_line_height);
   transform: perspective(1px);
+  height: var(--textboxicon_line_height);
 }
-[dir=ltr] .line {
-  left: 0;
-  right: 0;
-}
-[dir=rtl] .line {
-  right: 0;
-  left: 0;
-}
-.line, .borderColor_default {
+.line,
+.borderColor_default {
   background-color: var(--textboxicon_line_color);
 }
 .borderColor_transparent {

package/es/Textarea/Textarea.js

@@ -1,8 +1,7 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['resizeX', 'resizeY', 'noresize', 'resizeboth', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'default', 'primary'] }] */
 
 import style from './Textarea.module.css';
@@ -105,8 +104,52 @@ export default class Textarea extends React.Component {
   }
 
 }
-Textarea.defaultProps = defaultProps;
-Textarea.propTypes = propTypes;
+Textarea.defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  dataId: 'TextareaComp',
+  needBorder: true,
+  resize: 'none',
+  size: 'small',
+  variant: 'default',
+  needAppearance: true,
+  needReadOnlyStyle: true,
+  borderColor: 'default',
+  needEffect: true,
+  autoFocus: false,
+  customClass: '',
+  a11y: {}
+};
+Textarea.propTypes = {
+  animated: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getRef: PropTypes.func,
+  htmlId: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needEffect: PropTypes.bool,
+  needReadOnlyStyle: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  resize: PropTypes.oneOf(['horizontal', 'vertical', 'both', 'none']),
+  size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
+  text: PropTypes.string,
+  variant: PropTypes.oneOf(['default', 'primary']),
+  customClass: PropTypes.string,
+  a11y: PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  })
+};
 
 if (false) {
   Textarea.docs = {

package/es/Textarea/Textarea.module.css

@@ -19,10 +19,11 @@
   appearance: none;
   outline: 0;
   letter-spacing: 0.1px;
-  color: var(--textarea_text_color);
   cursor: var(--textarea_cursor);
+  color: var(--textarea_text_color);
 }
-.basic, .noBorder {
+.basic,
+.noBorder {
   border-width: var(--textarea_border_width);
 }
 .basic::placeholder {
@@ -60,20 +61,20 @@
   composes: basic;
   transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
+  -webkit-transition: border var(--zd_transition2) linear 0s,
+    height var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
   width: 100%;
   max-width: 100%;
   min-width: 100px;
+  border-style: solid;
   font-size: var(--textarea_font_size);
   line-height: var(--textarea_line_height);
-  height: var(--textarea_height);
-  -webkit-transition: border var(--zd_transition2) linear 0s,
-    height var(--zd_transition2) linear 0s;
-  border-style: solid;
   background-color: var(--zdt_textarea_default_bg);
   border-color: var(--textarea_border_color);
   padding: var(--textarea_padding);
+  height: var(--textarea_height);
 }
 .needBorder {
   --textarea_border_width: 0 0 1px 0;

package/es/Tooltip/Tooltip.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 import { getLibraryConfig } from '../Provider/Config';
 import style from './Tooltip.module.css';
 import ResizeObserver from '../Responsive/ResizeObserver';
@@ -503,8 +502,17 @@ export default class Tooltip extends React.Component {
   }
 
 }
-Tooltip.propTypes = propTypes;
-Tooltip.defaultProps = defaultProps;
+Tooltip.propTypes = {
+  dataId: PropTypes.string,
+  isHtml: PropTypes.string,
+  isPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  title: PropTypes.string,
+  customClass: PropTypes.string
+};
+Tooltip.defaultProps = {
+  dataId: 'toolTip',
+  customClass: ''
+};
 
 if (false) {
   Tooltip.docs = {

package/es/Tooltip/Tooltip.module.css

@@ -1,28 +1,25 @@
 .tooltiptext {
   position: fixed;
   z-index: 9999999; /*Hook for editor alert*/
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
   pointer-events: none;
   box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
   border-radius: var(--zd_size4);
-}[dir=ltr] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
-}[dir=rtl] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
 }
 .tooltipcont {
+  background-color: var(--zdt_tooltip_default_bg);
   color: var(--zdt_tooltip_default_text);
+  padding: 0 var(--zd_size10);
   font-size: var(--zd_font_size13);
   font-family: var(--zd_semibold);
   word-break: break-word;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--zd_size4);
   max-width: 420px;
   line-height: var(--zd_size20);
   min-height: var(--zd_size24);
   overflow: hidden;
-  background-color: var(--zdt_tooltip_default_bg);
-  padding: 0 var(--zd_size10);
-  border-style: solid;
-  border-color: transparent;
-  border-radius: var(--zd_size4);
 }
 .tooltipWrapCont {
   white-space: pre-wrap;
@@ -30,6 +27,7 @@
 .tooltipNormalCont {
   white-space: normal;
 }
+/*rtl:begin:ignore*/
 .tooltiparrow {
   content: '';
   position: absolute;
@@ -75,6 +73,7 @@
 .arrowRight {
   transform: rotate(135deg) translateY(50%);
 }
+/*rtl:end:ignore*/
 @keyframes tooltip-grow {
   from {
     opacity: 0;

package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 import { VelocityComponent } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
 import LibraryContext from '../../Provider/LibraryContextInit';
@@ -68,8 +67,28 @@ export default class VelocityAnimation extends React.Component {
   }
 
 }
-VelocityAnimation.defaultProps = defaultProps;
-VelocityAnimation.propTypes = propTypes;
+VelocityAnimation.defaultProps = {
+  runOnMount: false,
+  isCustomized: true,
+  needUIPack: true,
+  isFlex: false,
+  duration: 300
+};
+VelocityAnimation.propTypes = {
+  children: PropTypes.node.isRequired,
+  delay: PropTypes.number,
+  duration: PropTypes.number,
+  isActive: PropTypes.bool.isRequired,
+  isCustomized: PropTypes.bool,
+  isFlex: PropTypes.bool,
+  name: PropTypes.oneOf(['fade', 'slideRight', 'shrink', 'expand', 'slideDown', 'flyDown', 'slideLeft']),
+  needUIPack: PropTypes.bool,
+  runOnMount: PropTypes.bool
+};
+VelocityAnimation.contextTypes = {
+  direction: PropTypes.string,
+  isReducedMotion: PropTypes.bool
+};
 VelocityAnimation.contextType = LibraryContext;
 
 if (false) {

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,8 +1,7 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 import { VelocityTransitionGroup } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
 import LibraryContext from '../../Provider/LibraryContextInit';
@@ -97,10 +96,44 @@ export default class VelocityAnimationGroup extends React.Component {
   }
 
 }
-VelocityAnimationGroup.defaultProps = { ...defaultProps,
+VelocityAnimationGroup.defaultProps = {
+  runOnMount: false,
+  enterHideStyle: {
+    display: 'none'
+  },
+  enterShowStyle: {
+    display: ''
+  },
+  isFlex: false,
+  enterDuration: 300,
+  exitDuration: 300,
+  isActive: false,
+  isCustomized: true,
+  needUIPack: true,
   component: React.Fragment
 };
-VelocityAnimationGroup.propTypes = propTypes;
+VelocityAnimationGroup.propTypes = {
+  children: PropTypes.node.isRequired,
+  component: PropTypes.element,
+  enterDelay: PropTypes.number,
+  enterDuration: PropTypes.number,
+  enterHideStyle: PropTypes.object,
+  enterName: PropTypes.string,
+  enterShowStyle: PropTypes.object,
+  exitDelay: PropTypes.number,
+  exitDuration: PropTypes.number,
+  exitName: PropTypes.string,
+  isActive: PropTypes.bool,
+  isCustomized: PropTypes.bool,
+  isFlex: PropTypes.bool,
+  name: PropTypes.oneOf(['fade', 'slideDown', 'flyDown', 'slideRight', 'shrink', 'expand', 'slideLeft']),
+  needUIPack: PropTypes.bool,
+  runOnMount: PropTypes.bool
+};
+VelocityAnimationGroup.contextTypes = {
+  direction: PropTypes.string,
+  isReducedMotion: PropTypes.bool
+};
 VelocityAnimationGroup.contextType = LibraryContext;
 
 if (false) {

package/es/a11y/FocusScope/FocusScope.js

@@ -0,0 +1,370 @@
+import React, { useContext, useEffect, useRef } from 'react';
+let scopes = new Set();
+let activeScope = null;
+const FocusContext = /*#__PURE__*/React.createContext(null); // interface FocusManager {
+//     /** Moves focus to the next focusable or tabbable element in the focus scope. */
+//     focusNext(opts?: FocusManagerOptions): HTMLElement,
+//     /** Moves focus to the previous focusable or tabbable element in the focus scope. */
+//     focusPrevious(opts?: FocusManagerOptions): HTMLElement
+//   }
+
+export const useLayoutEffect = window !== 'undefined' ? React.useLayoutEffect : () => {};
+export default function FocusScope(props) {
+  let {
+    children,
+    contain = true,
+    restoreFocus = true,
+    autoFocus = true
+  } = props;
+  let startRef = useRef();
+  let endRef = useRef();
+  let scopeRef = useRef([]);
+  useLayoutEffect(() => {
+    // Find all rendered nodes between the sentinels and add them to the scope.
+    let node = startRef.current.nextSibling;
+    let nodes = [];
+
+    while (node && node !== endRef.current) {
+      nodes.push(node);
+      node = node.nextSibling;
+    }
+
+    scopeRef.current = nodes;
+    scopes.add(scopeRef);
+    return () => {
+      scopes.delete(scopeRef);
+    };
+  }, [children]);
+  useFocusContainment(scopeRef, contain);
+  useRestoreFocus(scopeRef, restoreFocus, contain);
+  useAutoFocus(scopeRef, autoFocus);
+  let focusManager = createFocusManager(scopeRef);
+  return /*#__PURE__*/React.createElement(FocusContext.Provider, {
+    value: focusManager
+  }, /*#__PURE__*/React.createElement("span", {
+    hidden: true,
+    ref: startRef
+  }), children, /*#__PURE__*/React.createElement("span", {
+    hidden: true,
+    ref: endRef
+  }));
+}
+export function useFocusManager() {
+  return useContext(FocusContext);
+}
+
+function createFocusManager(scopeRef) {
+  return {
+    focusNext(opts) {
+      let node = opts.from || document.activeElement;
+      let focusable = getFocusableElementsInScope(scopeRef.current, opts);
+      let nextNode = focusable.find(n => !!(node.compareDocumentPosition(n) & (Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY)));
+
+      if (!nextNode && opts.wrap) {
+        nextNode = focusable[0];
+      }
+
+      if (nextNode) {
+        nextNode.focus();
+      }
+
+      return nextNode;
+    },
+
+    focusPrevious(opts) {
+      let node = opts.from || document.activeElement;
+      let focusable = getFocusableElementsInScope(scopeRef.current, opts).reverse();
+      let previousNode = focusable.find(n => !!(node.compareDocumentPosition(n) & (Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINED_BY)));
+
+      if (!previousNode && opts.wrap) {
+        previousNode = focusable[0];
+      }
+
+      if (previousNode) {
+        previousNode.focus();
+      }
+
+      return previousNode;
+    }
+
+  };
+}
+
+const focusableElements = ['input:not([disabled]):not([type=hidden])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'a[href]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details', 'area[href]', 'summary', 'iframe', 'object', 'embed'];
+const FOCUSABLE_ELEMENT_SELECTOR = focusableElements.join(',') + ',[tabindex]';
+focusableElements.push('[tabindex]:not([tabindex="-1"])');
+const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(':not([tabindex="-1"]),');
+
+function useAutoFocus(scopeRef, autoFocus) {
+  useEffect(() => {
+    if (autoFocus) {
+      activeScope = scopeRef;
+
+      if (!isElementInScope(document.activeElement, activeScope.current)) {
+        focusFirstInScope(scopeRef.current);
+      }
+    }
+  }, [scopeRef, autoFocus]);
+}
+
+function getFocusableElementsInScope(scope, opts) {
+  let res = [],
+      response = [];
+  let selector = opts.tabbable ? TABBABLE_ELEMENT_SELECTOR : FOCUSABLE_ELEMENT_SELECTOR;
+
+  for (let node of scope) {
+    if (node.matches(selector)) {
+      res.push(node);
+    }
+
+    response.push(...Array.from(node.querySelectorAll(selector)));
+    res = response.filter(element => {
+      return !(window.getComputedStyle(element).display === 'none');
+    });
+  }
+
+  ;
+  return res;
+}
+
+function useFocusContainment(scopeRef, contain) {
+  let focusedNode = useRef();
+  let raf = useRef(null);
+  useEffect(() => {
+    let scope = scopeRef.current;
+
+    if (!contain) {
+      return;
+    } // Handle the Tab key to contain focus within the scope
+
+
+    let onKeyDown = e => {
+      if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey) {
+        return;
+      }
+
+      let elements = getFocusableElementsInScope(scope, {
+        tabbable: true
+      });
+      let focusedElement = document.activeElement;
+
+      if (!isElementInScope(focusedElement, scope)) {
+        return;
+      }
+
+      let position = elements.indexOf(focusedElement);
+      let lastPosition = elements.length - 1;
+      let nextElement = null;
+
+      if (e.shiftKey) {
+        if (position <= 0) {
+          nextElement = elements[lastPosition];
+        } else {
+          nextElement = elements[position - 1];
+        }
+      } else {
+        if (position === lastPosition) {
+          nextElement = elements[0];
+        } else {
+          nextElement = elements[position + 1];
+        }
+      }
+
+      e.preventDefault();
+
+      if (nextElement) {
+        focusElement(nextElement, true);
+      }
+    };
+
+    let onFocus = e => {
+      // If a focus event occurs outside the active scope (e.g. user tabs from browser location bar),
+      // restore focus to the previously focused node or the first tabbable element in the active scope.
+      let isInAnyScope = isElementInAnyScope(e.target, scopes);
+
+      if (!isInAnyScope) {
+        if (focusedNode.current) {
+          focusedNode.current.focus();
+        } else if (activeScope) {
+          focusFirstInScope(activeScope.current);
+        }
+      } else {
+        activeScope = scopeRef;
+        focusedNode.current = e.target;
+      }
+    };
+
+    let onBlur = e => {
+      // Firefox doesn't shift focus back to the Dialog properly without this
+      raf.current = requestAnimationFrame(() => {
+        // Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
+        let isInAnyScope = isElementInAnyScope(document.activeElement, scopes);
+
+        if (!isInAnyScope) {
+          activeScope = scopeRef;
+          focusedNode.current = e.target;
+          focusedNode.current.focus();
+        }
+      });
+    };
+
+    document.addEventListener('keydown', onKeyDown, false);
+    document.addEventListener('focusin', onFocus, false);
+    scope.forEach(element => element.addEventListener('focusin', onFocus, false));
+    scope.forEach(element => element.addEventListener('focusout', onBlur, false));
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, false);
+      document.removeEventListener('focusin', onFocus, false);
+      scope.forEach(element => element.removeEventListener('focusin', onFocus, false));
+      scope.forEach(element => element.removeEventListener('focusout', onBlur, false));
+    };
+  }, [scopeRef, contain]); // eslint-disable-next-line arrow-body-style
+
+  useEffect(() => {
+    return () => cancelAnimationFrame(raf.current);
+  }, [raf]);
+}
+
+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;
+    }
+  }
+
+  return false;
+}
+
+function isElementInScope(element) {
+  let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return scope.some(node => node.contains(element));
+}
+
+function focusElement() {
+  let element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+  if (element != null) {
+    element.focus();
+  }
+}
+
+function findElement(elements) {
+  let ele = [];
+
+  for (let element = 0; element < elements.length; element++) {
+    let elem = elements[element];
+
+    if (elem.getAttribute('data-auto-focus')) {
+      ele.push(elem);
+    }
+  }
+
+  return ele.length ? ele[0] : null;
+}
+
+function focusFirstInScope() {
+  let scope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let elements = getFocusableElementsInScope(scope, {
+    tabbable: true
+  });
+  let element = findElement(elements);
+  focusElement(element ? element : elements[0]);
+}
+
+function useRestoreFocus(scopeRef, restoreFocus, contain) {
+  // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
+  useLayoutEffect(() => {
+    let scope = scopeRef.current;
+    let nodeToRestore = document.activeElement; // Handle the Tab key so that tabbing out of the scope goes to the next element
+    // after the node that had focus when the scope mounted. This is important when
+    // using portals for overlays, so that focus goes to the expected element when
+    // tabbing out of the overlay.
+
+    let onKeyDown = e => {
+      if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey) {
+        return;
+      }
+
+      let focusedElement = document.activeElement;
+
+      if (!isElementInScope(focusedElement, scope)) {
+        return;
+      } // Create a DOM tree walker that matches all tabbable elements
+
+
+      let walker = getFocusableTreeWalker(document.body, {
+        tabbable: true
+      }); // Find the next tabbable element after the currently focused element
+
+      walker.currentNode = focusedElement;
+      let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode(); // If there is no next element, or it is outside the current scope, move focus to the
+      // next element after the node to restore to instead.
+
+      if ((!nextElement || !isElementInScope(nextElement, scope)) && nodeToRestore) {
+        walker.currentNode = nodeToRestore; // Skip over elements within the scope, in case the scope immediately follows the node to restore.
+
+        do {
+          nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
+        } while (isElementInScope(nextElement, scope));
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (nextElement) {
+          nextElement.focus();
+        } else {
+          // If there is no next element, blur the focused element to move focus to the body.
+          focusedElement.blur();
+        }
+      }
+    };
+
+    if (!contain) {
+      document.addEventListener('keydown', onKeyDown, true);
+    }
+
+    return () => {
+      if (!contain) {
+        document.removeEventListener('keydown', onKeyDown, true);
+      }
+
+      if (restoreFocus && nodeToRestore && isElementInScope(document.activeElement, scope)) {
+        requestAnimationFrame(() => {
+          if (document.body.contains(nodeToRestore)) {
+            focusElement(nodeToRestore);
+          }
+        });
+      }
+    };
+  }, [scopeRef, restoreFocus, contain]);
+}
+
+export function getFocusableTreeWalker(root, opts) {
+  let selector = opts && opts.tabbable ? TABBABLE_ELEMENT_SELECTOR : FOCUSABLE_ELEMENT_SELECTOR;
+  let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+    acceptNode(node) {
+      // Skip nodes inside the starting node.
+      if (opts && opts.from && opts.from.contains(node)) {
+        return NodeFilter.FILTER_REJECT;
+      }
+
+      if (node.matches(selector)) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+
+      return NodeFilter.FILTER_SKIP;
+    }
+
+  }, false);
+
+  if (opts && opts.from) {
+    walker.currentNode = opts.from;
+  }
+
+  return walker;
+}
+FocusScope.docs = {
+  componentGroup: 'Atom'
+};