@zohodesk/components 1.1.0 → 1.2.0-temp-195

package/es/v1/VelocityAnimation/VelocityAnimationGroup/props/defaultProps.js

@@ -0,0 +1,15 @@
+export const defaultProps = {
+  runOnMount: false,
+  enterHideStyle: {
+    display: 'none'
+  },
+  enterShowStyle: {
+    display: ''
+  },
+  isFlex: false,
+  enterDuration: 300,
+  exitDuration: 300,
+  isActive: false,
+  isCustomized: true,
+  needUIPack: true
+};

package/es/v1/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+export const 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
+};

package/es/v1/semantic/Button/Button.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../../semantic/Button/semanticButton.module.css';
+export default function Button(props) {
+  const {
+    value,
+    type,
+    text,
+    title,
+    name,
+    autoFocus,
+    disabled,
+    ref,
+    dataId,
+    onClick,
+    children,
+    customClass,
+    a11y
+  } = props;
+  let {
+    ariaLabel,
+    ariaHaspopup,
+    ariaExpanded,
+    ariaControls,
+    ariaLabelledby
+  } = a11y;
+  return /*#__PURE__*/React.createElement("button", {
+    className: `${style.buttonReset} ${customClass}`,
+    "aria-label": ariaLabel,
+    "aria-haspopup": ariaHaspopup,
+    "aria-expanded": ariaExpanded,
+    "aria-controls": ariaControls,
+    "aria-labelledby": ariaLabelledby,
+    type: type,
+    value: value,
+    name: name,
+    autoFocus: autoFocus,
+    disabled: disabled,
+    ref: ref,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    onClick: onClick,
+    "data-title": title
+  }, children ? children : text);
+}
+Button.defaultProps = defaultProps;
+Button.propTypes = propTypes; // if (__DOCS__) {
+//   Button.docs = {
+//     componentGroup: 'semantic',
+//     folderName: 'DefaultComponents'
+//   };
+// }

package/es/v1/semantic/Button/props/defaultProps.js

@@ -0,0 +1,12 @@
+export const defaultProps = {
+  children: null,
+  autoFocus: false,
+  dataId: 'semanticButton',
+  disabled: false,
+  palette: 'primary',
+  text: 'Button',
+  type: 'button',
+  value: 'text',
+  customClass: '',
+  a11y: {}
+};

package/es/v1/semantic/Button/props/propTypes.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  autoFocus: PropTypes.bool,
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  disabled: PropTypes.bool,
+  name: PropTypes.string,
+  onClick: PropTypes.func,
+  ref: PropTypes.func,
+  text: PropTypes.string,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['submit', 'reset', 'button']),
+  value: PropTypes.string,
+  a11y: PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    ariaHaspopup: PropTypes.bool,
+    ariaExpanded: PropTypes.bool,
+    ariaControls: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  })
+};

package/es/v1/semantic/index.js

@@ -0,0 +1 @@
+export { default as SemanticButton } from './Button/Button';

package/install.md

@@ -1,10 +1,10 @@
-- For New :
-
-# npm i
-# npm run common_package_build
-
-For Update:
-
-# npm run download
-# npm run common_package_build
-
+- For New :
+
+# npm i
+# npm run common_package_build
+
+For Update:
+
+# npm run download
+# npm run common_package_build
+

package/lib/Animation/Animation.js

@@ -15,7 +15,7 @@ var _propTypes = require("./props/propTypes");
 
 var _reactTransitionGroup = require("react-transition-group");
 
-var _transitionModule = _interopRequireDefault(require("../common/transition.module.css"));
+var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -66,91 +66,9 @@ var Animation = /*#__PURE__*/function (_React$Component) {
           onExit = _this$props$onExit === void 0 ? function () {} : _this$props$onExit,
           _this$props$delayClas = _this$props.delayClassName,
           delayClassName = _this$props$delayClas === void 0 ? null : _this$props$delayClas;
-      var animation = {
-        zoomIn: {
-          enter: _transitionModule["default"].zoomInEnter,
-          enterActive: _transitionModule["default"].zoomInEnterActive,
-          enterDone: _transitionModule["default"].zoomInEnterActive,
-          exit: _transitionModule["default"].zoomInLeave,
-          exitActive: _transitionModule["default"].zoomInLeaveActive,
-          exitDone: _transitionModule["default"].zoomInLeaveActive,
-          appear: _transitionModule["default"].zoomInEnter,
-          appearActive: _transitionModule["default"].zoomInEnterActive
-        },
-        scaleIn: {
-          enter: _transitionModule["default"].scaleInEnter,
-          enterActive: _transitionModule["default"].scaleInEnterActive,
-          enterDone: _transitionModule["default"].scaleInEnterActive,
-          exit: _transitionModule["default"].scaleInLeave,
-          exitActive: _transitionModule["default"].scaleInLeaveActive,
-          exitDone: _transitionModule["default"].scaleInLeaveActive,
-          appear: _transitionModule["default"].scaleInEnter,
-          appearActive: _transitionModule["default"].scaleInEnterActive
-        },
-        fadeIn: {
-          enter: _transitionModule["default"].fadeInEnter,
-          enterActive: _transitionModule["default"].fadeInEnterActive,
-          enterDone: _transitionModule["default"].fadeInEnterActive,
-          exit: _transitionModule["default"].fadeInLeave,
-          exitActive: _transitionModule["default"].fadeInLeaveActive,
-          exitDone: _transitionModule["default"].fadeInLeaveActive,
-          appear: _transitionModule["default"].fadeInEnter,
-          appearActive: _transitionModule["default"].fadeInEnterActive
-        },
-        slideLeft: {
-          enter: _transitionModule["default"].slideLeftEnter,
-          enterActive: _transitionModule["default"].slideLeftEnterActive,
-          enterDone: _transitionModule["default"].slideLeftEnterActive,
-          exit: _transitionModule["default"].slideLeftLeave,
-          exitActive: _transitionModule["default"].slideLeftLeaveActive,
-          exitDone: _transitionModule["default"].slideLeftLeaveActive,
-          appear: _transitionModule["default"].slideLeftEnter,
-          appearActive: _transitionModule["default"].slideLeftEnterActive
-        },
-        slideDown: {
-          enter: _transitionModule["default"].slideDownEnter,
-          enterActive: _transitionModule["default"].slideDownEnterActive,
-          enterDone: _transitionModule["default"].slideDownEnterActive,
-          exit: _transitionModule["default"].slideDownLeave,
-          exitActive: _transitionModule["default"].slideDownLeaveActive,
-          exitDone: _transitionModule["default"].slideDownLeaveActive,
-          appear: _transitionModule["default"].slideDownEnter,
-          appearActive: _transitionModule["default"].slideDownEnterActive
-        },
-        skewIn: {
-          enter: _transitionModule["default"].skewInEnter,
-          enterActive: _transitionModule["default"].skewInEnterActive,
-          enterDone: _transitionModule["default"].skewInEnterActive,
-          exit: _transitionModule["default"].skewInLeave,
-          exitActive: _transitionModule["default"].skewInLeaveActive,
-          exitDone: _transitionModule["default"].skewInLeaveActive,
-          appear: _transitionModule["default"].skewInEnter,
-          appearActive: _transitionModule["default"].skewInEnterActive
-        },
-        none: {
-          enter: _transitionModule["default"].noneEnter,
-          enterActive: _transitionModule["default"].noneEnterActive,
-          enterDone: _transitionModule["default"].noneEnterActive,
-          exit: _transitionModule["default"].noneLeave,
-          exitActive: _transitionModule["default"].noneLeaveActive,
-          exitDone: _transitionModule["default"].noneLeaveActive,
-          appear: _transitionModule["default"].noneEnter,
-          appearActive: _transitionModule["default"].noneEnterActive
-        },
-        "default": {
-          enter: _transitionModule["default"].defaultEnter,
-          enterActive: _transitionModule["default"].defaultEnterActive,
-          enterDone: _transitionModule["default"].defaultEnterActive,
-          exit: _transitionModule["default"].defaultLeave,
-          exitActive: _transitionModule["default"].defaultLeaveActive,
-          exitDone: _transitionModule["default"].defaultLeaveActive,
-          appear: _transitionModule["default"].defaultEnter,
-          appearActive: _transitionModule["default"].defaultEnterActive
-        }
-      };
-      var newClassNames = delayClassName ? Object.assign({}, animation[name], {
-        exit: "".concat(delayClassName, " ").concat(animation[name].exit)
-      }) : animation[name];
+      var newClassNames = delayClassName ? Object.assign({}, _utils.animationStyle[name], {
+        exit: "".concat(delayClassName, " ").concat(_utils.animationStyle[name].exit)
+      }) : _utils.animationStyle[name];
       return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
         classNames: newClassNames && newClassNames,
         "in": isActive,

package/lib/Animation/utils.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.animationStyle = void 0;
+
+var _transitionModule = _interopRequireDefault(require("../common/transition.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var animationStyle = {
+  zoomIn: {
+    enter: _transitionModule["default"].zoomInEnter,
+    enterActive: _transitionModule["default"].zoomInEnterActive,
+    enterDone: _transitionModule["default"].zoomInEnterActive,
+    exit: _transitionModule["default"].zoomInLeave,
+    exitActive: _transitionModule["default"].zoomInLeaveActive,
+    exitDone: _transitionModule["default"].zoomInLeaveActive,
+    appear: _transitionModule["default"].zoomInEnter,
+    appearActive: _transitionModule["default"].zoomInEnterActive
+  },
+  scaleIn: {
+    enter: _transitionModule["default"].scaleInEnter,
+    enterActive: _transitionModule["default"].scaleInEnterActive,
+    enterDone: _transitionModule["default"].scaleInEnterActive,
+    exit: _transitionModule["default"].scaleInLeave,
+    exitActive: _transitionModule["default"].scaleInLeaveActive,
+    exitDone: _transitionModule["default"].scaleInLeaveActive,
+    appear: _transitionModule["default"].scaleInEnter,
+    appearActive: _transitionModule["default"].scaleInEnterActive
+  },
+  fadeIn: {
+    enter: _transitionModule["default"].fadeInEnter,
+    enterActive: _transitionModule["default"].fadeInEnterActive,
+    enterDone: _transitionModule["default"].fadeInEnterActive,
+    exit: _transitionModule["default"].fadeInLeave,
+    exitActive: _transitionModule["default"].fadeInLeaveActive,
+    exitDone: _transitionModule["default"].fadeInLeaveActive,
+    appear: _transitionModule["default"].fadeInEnter,
+    appearActive: _transitionModule["default"].fadeInEnterActive
+  },
+  slideLeft: {
+    enter: _transitionModule["default"].slideLeftEnter,
+    enterActive: _transitionModule["default"].slideLeftEnterActive,
+    enterDone: _transitionModule["default"].slideLeftEnterActive,
+    exit: _transitionModule["default"].slideLeftLeave,
+    exitActive: _transitionModule["default"].slideLeftLeaveActive,
+    exitDone: _transitionModule["default"].slideLeftLeaveActive,
+    appear: _transitionModule["default"].slideLeftEnter,
+    appearActive: _transitionModule["default"].slideLeftEnterActive
+  },
+  slideDown: {
+    enter: _transitionModule["default"].slideDownEnter,
+    enterActive: _transitionModule["default"].slideDownEnterActive,
+    enterDone: _transitionModule["default"].slideDownEnterActive,
+    exit: _transitionModule["default"].slideDownLeave,
+    exitActive: _transitionModule["default"].slideDownLeaveActive,
+    exitDone: _transitionModule["default"].slideDownLeaveActive,
+    appear: _transitionModule["default"].slideDownEnter,
+    appearActive: _transitionModule["default"].slideDownEnterActive
+  },
+  skewIn: {
+    enter: _transitionModule["default"].skewInEnter,
+    enterActive: _transitionModule["default"].skewInEnterActive,
+    enterDone: _transitionModule["default"].skewInEnterActive,
+    exit: _transitionModule["default"].skewInLeave,
+    exitActive: _transitionModule["default"].skewInLeaveActive,
+    exitDone: _transitionModule["default"].skewInLeaveActive,
+    appear: _transitionModule["default"].skewInEnter,
+    appearActive: _transitionModule["default"].skewInEnterActive
+  },
+  none: {
+    enter: _transitionModule["default"].noneEnter,
+    enterActive: _transitionModule["default"].noneEnterActive,
+    enterDone: _transitionModule["default"].noneEnterActive,
+    exit: _transitionModule["default"].noneLeave,
+    exitActive: _transitionModule["default"].noneLeaveActive,
+    exitDone: _transitionModule["default"].noneLeaveActive,
+    appear: _transitionModule["default"].noneEnter,
+    appearActive: _transitionModule["default"].noneEnterActive
+  },
+  "default": {
+    enter: _transitionModule["default"].defaultEnter,
+    enterActive: _transitionModule["default"].defaultEnterActive,
+    enterDone: _transitionModule["default"].defaultEnterActive,
+    exit: _transitionModule["default"].defaultLeave,
+    exitActive: _transitionModule["default"].defaultLeaveActive,
+    exitDone: _transitionModule["default"].defaultLeaveActive,
+    appear: _transitionModule["default"].defaultEnter,
+    appearActive: _transitionModule["default"].defaultEnterActive
+  }
+};
+exports.animationStyle = animationStyle;

package/lib/AppContainer/AppContainer.js

@@ -150,6 +150,11 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
         this.containerElement.removeEventListener('mouseover', this.handleOver, false);
         this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
         this.tooltipRef.unObserveElement();
+        (0, _Config.setLibraryConfig)({
+          getTooltipContainer: function getTooltipContainer() {
+            return null;
+          }
+        });
       }
     }
   }, {

package/lib/AppContainer/AppContainer.module.css

@@ -1,18 +1,18 @@
-.container,
-.container *,
-.container ::after,
-.container ::before {
-  outline: 0;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-}
-.container {
-  font-family: var(--zd_regular);
-}
-.tooltip {
-  height: 0 ;
-  font-size: 0 ;
-  /* contain:strict */
-}
+.container,
+.container *,
+.container ::after,
+.container ::before {
+  outline: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+}
+.container {
+  font-family: var(--zd_regular);
+}
+.tooltip {
+  height: 0 ;
+  font-size: 0 ;
+  /* contain:strict */
+}

package/lib/Avatar/Avatar.js

@@ -55,17 +55,17 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-/*
-1. need to change name into firstName lastName
-2. pattern support via context as well as props
-3. prop high priority to arrange firstName lastName
-4. team pass name as lastName and pass pattern via prop
+/*
+1. need to change name into firstName lastName
+2. pattern support via context as well as props
+3. prop high priority to arrange firstName lastName
+4. team pass name as lastName and pass pattern via prop
 */
 
-/*
-eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
-'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
-"info","default"] }]
+/*
+eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
+'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
+"info","default"] }]
 */
 var Avatar = /*#__PURE__*/function (_React$Component) {
   _inherits(Avatar, _React$Component);
@@ -215,7 +215,8 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         "data-id": dataId,
         "data-test-id": dataId,
         onClick: onClick,
-        "data-selector-id": dataSelectorId
+        "data-selector-id": dataSelectorId,
+        tabIndex: onClick ? 0 : null
       }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_AvatarModule["default"].initial),
         "data-id": "".concat(dataId, "_AvatarInitial"),