@zohodesk/components 1.0.0-temp-666 → 1.0.0-temp-69

package/es/ucl/Grid/docs/css/gridDocsStyle.module.css

@@ -0,0 +1,30 @@
+.parent {
+    width: 100%;
+    height: 100%;
+}
+
+.container,
+.inlineContainer {
+    gap: 10px;
+}
+
+.container, .inlineContainer {
+    background-color: DodgerBlue;
+    padding: 10px;
+}
+
+.container {
+    width: 80%
+}
+
+.item {
+    width: 90px;
+    height: 90px;
+    align-items: center;
+    justify-content: center;
+    background-color: #f1f1f1;
+}
+
+.sampleOne {
+    background-color: red;
+}

package/es/ucl/Grid/index.js

@@ -0,0 +1,5 @@
+export { default } from './Grid';
+/*hooks and accessibility based on proptypes */
+
+export { default as GridPropTypes } from './props/propTypes';
+export { default as GridPropConstants } from './props/propConstants';

package/es/ucl/Grid/props/ariaPropTypes.js

@@ -0,0 +1,6 @@
+import PropTypes from 'prop-types';
+import generalAriaProps from '@zohodesk/utils/es/props/generalAriaProps';
+export default {
+  a11y: PropTypes.shape({ ...generalAriaProps
+  })
+};

package/es/ucl/Grid/props/defaultProps.js

@@ -0,0 +1,8 @@
+import propConstants from './propConstants';
+export default {
+  tagName: 'div',
+  isCover: false,
+  customStyle: {},
+  tagAttributes: {},
+  tagGeneralAttributes: {}
+};

package/es/ucl/Grid/props/propConstants.js

@@ -0,0 +1,66 @@
+export default {
+  display: {
+    inline: "inline",
+    grid: "grid"
+  },
+  flow: {
+    row: "row",
+    column: "column",
+    dense: "dense",
+    rowDense: "rowDense",
+    colDense: "colDense"
+  },
+  alignItems: {
+    start: "start",
+    end: "end",
+    center: "center",
+    stretch: "stretch",
+    baseline: "baseline"
+  },
+  alignSelf: {
+    start: "start",
+    end: "end",
+    center: "center",
+    stretch: "stretch",
+    baseline: "baseline"
+  },
+  alignContent: {
+    start: "start",
+    end: "end",
+    center: "center",
+    stretch: "stretch",
+    baseline: "baseline",
+    spaceBetween: "spaceBetween",
+    spaceAround: "spaceAround",
+    spaceEvenly: "spaceEvenly"
+  },
+  justifyItems: {
+    start: "start",
+    end: "end",
+    center: "center",
+    stretch: "stretch",
+    baseline: "baseline"
+  },
+  justifySelf: {
+    start: "start",
+    end: "end",
+    center: "center",
+    stretch: "stretch",
+    baseline: "baseline"
+  },
+  justifyContent: {
+    start: "start",
+    end: "end",
+    center: "center",
+    stretch: "stretch",
+    spaceBetween: "spaceBetween",
+    spaceAround: "spaceAround",
+    spaceEvenly: "spaceEvenly"
+  },
+  scroll: {
+    x: "x",
+    y: "y",
+    both: "both",
+    none: "none"
+  }
+};

package/es/ucl/Grid/props/propTypes.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import automationProps from '@zohodesk/utils/es/props/automationProps';
+import customStyleProps from '@zohodesk/utils/es/props/customStyleProps';
+import tagAttributeProps from '@zohodesk/utils/es/props/tagAttributeProps';
+import tagGeneralAttributeProps from '@zohodesk/utils/es/props/tagGeneralAttributeProps';
+import propConstants from './propConstants';
+import ariaPropTypes from './ariaPropTypes';
+export default {
+  tagName: PropTypes.string,
+  isCover: PropTypes.bool,
+  alignItems: PropTypes.oneOf(Object.values(propConstants.alignItems)),
+  alignSelf: PropTypes.oneOf(Object.values(propConstants.alignSelf)),
+  alignContent: PropTypes.oneOf(Object.values(propConstants.alignContent)),
+  justifyItems: PropTypes.oneOf(Object.values(propConstants.justifyItems)),
+  justifySelf: PropTypes.oneOf(Object.values(propConstants.justifySelf)),
+  justifyContent: PropTypes.oneOf(Object.values(propConstants.justifyContent)),
+  flow: PropTypes.oneOf(Object.values(propConstants.flow)),
+  overFlowScroll: PropTypes.oneOf(Object.values(propConstants.scroll)),
+  display: PropTypes.oneOf(Object.values(propConstants.display)),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  ...automationProps,
+  ...ariaPropTypes,
+  ...customStyleProps,
+  ...tagAttributeProps,
+  ...tagGeneralAttributeProps
+};

package/lib/Accordion/Accordion.js

@@ -9,7 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -118,25 +120,8 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = Accordion;
-Accordion.propTypes = {
-  children: _propTypes["default"].node,
-  className: _propTypes["default"].string,
-  disableInternalState: _propTypes["default"].bool,
-  height: _propTypes["default"].string,
-  onSelect: _propTypes["default"].func,
-  selectedItem: _propTypes["default"].string.isRequired,
-  unMount: _propTypes["default"].bool,
-  a11y: _propTypes["default"].shape({
-    role: _propTypes["default"].string,
-    ariaExpanded: _propTypes["default"].bool,
-    ariaHaspopup: _propTypes["default"].bool
-  })
-};
-Accordion.defaultProps = {
-  unMount: true,
-  disableInternalState: false,
-  a11y: {}
-};
+Accordion.propTypes = _propTypes.Accordion_propTypes;
+Accordion.defaultProps = _defaultProps.Accordion_defaultProps;
 
 if (false) {
   Accordion.docs = {

package/lib/Accordion/AccordionItem.js

@@ -9,7 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 var _VelocityAnimation = _interopRequireDefault(require("../VelocityAnimation/VelocityAnimation/VelocityAnimation"));
 
@@ -97,24 +99,8 @@ var AccordionItem = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = AccordionItem;
-AccordionItem.propTypes = {
-  children: _propTypes["default"].node,
-  className: _propTypes["default"].string,
-  dataId: _propTypes["default"].string,
-  equalityCheck: _propTypes["default"].func,
-  id: _propTypes["default"].string,
-  selectMenu: _propTypes["default"].func,
-  selectedItem: _propTypes["default"].string,
-  unMount: _propTypes["default"].bool,
-  unMountItem: _propTypes["default"].bool,
-  innerClass: _propTypes["default"].string,
-  a11y: _propTypes["default"].shape({
-    role: _propTypes["default"].string
-  })
-};
-AccordionItem.defaultProps = {
-  a11y: {}
-};
+AccordionItem.propTypes = _propTypes.AccordionItem_propTypes;
+AccordionItem.defaultProps = _defaultProps.AccordionItem_defaultProps;
 
 if (false) {
   AccordionItem.docs = {

package/lib/Accordion/props/defaultProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Accordion_defaultProps = exports.AccordionItem_defaultProps = void 0;
+var Accordion_defaultProps = {
+  unMount: true,
+  disableInternalState: false,
+  a11y: {}
+};
+exports.Accordion_defaultProps = Accordion_defaultProps;
+var AccordionItem_defaultProps = {
+  a11y: {}
+};
+exports.AccordionItem_defaultProps = AccordionItem_defaultProps;

package/lib/Accordion/props/propTypes.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Accordion_propTypes = exports.AccordionItem_propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Accordion_propTypes = {
+  children: _propTypes["default"].node,
+  className: _propTypes["default"].string,
+  disableInternalState: _propTypes["default"].bool,
+  height: _propTypes["default"].string,
+  onSelect: _propTypes["default"].func,
+  selectedItem: _propTypes["default"].string.isRequired,
+  unMount: _propTypes["default"].bool,
+  a11y: _propTypes["default"].shape({
+    role: _propTypes["default"].string,
+    ariaExpanded: _propTypes["default"].bool,
+    ariaHaspopup: _propTypes["default"].bool
+  })
+};
+exports.Accordion_propTypes = Accordion_propTypes;
+var AccordionItem_propTypes = {
+  children: _propTypes["default"].node,
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  equalityCheck: _propTypes["default"].func,
+  id: _propTypes["default"].string,
+  selectMenu: _propTypes["default"].func,
+  selectedItem: _propTypes["default"].string,
+  unMount: _propTypes["default"].bool,
+  unMountItem: _propTypes["default"].bool,
+  innerClass: _propTypes["default"].string,
+  a11y: _propTypes["default"].shape({
+    role: _propTypes["default"].string
+  })
+};
+exports.AccordionItem_propTypes = AccordionItem_propTypes;

package/lib/Animation/Animation.js

@@ -9,7 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 var _reactTransitionGroup = require("react-transition-group");
 
@@ -171,30 +173,8 @@ var Animation = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = Animation;
-Animation.propTypes = {
-  children: _propTypes["default"].node,
-  delayClassName: _propTypes["default"].string,
-  enterDuration: _propTypes["default"].number,
-  exitDuration: _propTypes["default"].number,
-  isActive: _propTypes["default"].bool,
-  name: _propTypes["default"].oneOf(['zoomIn', 'scaleIn', 'fadeIn', 'slideLeft', 'slideDown', 'skewIn', 'default', 'none']),
-  onEntered: _propTypes["default"].func,
-  onExit: _propTypes["default"].func,
-  unmountOnExit: _propTypes["default"].bool
-};
-Animation.defaultProps = {
-  enterDuration: 300,
-  exitDuration: 300,
-  isActive: false,
-  name: 'fadeIn',
-  unmountOnExit: true
-}; // Animation.propTypesDescription = {
-//   name: ' ',
-//   children: ' ',
-//   enterDuration: ' ',
-//   exitDuration: ' ',
-//   isActive: ' '
-// };
+Animation.propTypes = _propTypes.propTypes;
+Animation.defaultProps = _defaultProps.defaultProps;
 
 if (false) {
   Animation.docs = {

package/lib/Animation/props/defaultProps.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  enterDuration: 300,
+  exitDuration: 300,
+  isActive: false,
+  name: 'fadeIn',
+  unmountOnExit: true
+};
+exports.defaultProps = defaultProps;

package/lib/Animation/props/propTypes.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  children: _propTypes["default"].node,
+  delayClassName: _propTypes["default"].string,
+  enterDuration: _propTypes["default"].number,
+  exitDuration: _propTypes["default"].number,
+  isActive: _propTypes["default"].bool,
+  name: _propTypes["default"].oneOf(['zoomIn', 'scaleIn', 'fadeIn', 'slideLeft', 'slideDown', 'skewIn', 'default', 'none']),
+  onEntered: _propTypes["default"].func,
+  onExit: _propTypes["default"].func,
+  unmountOnExit: _propTypes["default"].bool
+};
+exports.propTypes = propTypes;

package/lib/AppContainer/AppContainer.js

@@ -9,7 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 var _Layout = require("../Layout");
 
@@ -77,6 +79,11 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
     _this.getContainerRef = _this.getContainerRef.bind(_assertThisInitialized(_this));
     _this.timer = null;
     _this.tooltipDebounce = (0, _Config.getLibraryConfig)('tooltipDebounce');
+    (0, _Config.setLibraryConfig)({
+      getTooltipContainer: function getTooltipContainer() {
+        return _this.containerElement;
+      }
+    });
     return _this;
   }
 
@@ -84,7 +91,7 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
     key: "mouseOverDispatch",
     value: function mouseOverDispatch(e) {
       if (this.tooltipRef) {
-        this.tooltipRef.handleOver(e);
+        this.tooltipRef.handleOver(e, this.containerElement);
       }
     }
   }, {
@@ -125,6 +132,7 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
       if (this.containerElement) {
         this.containerElement.addEventListener('mouseover', this.handleOver, false);
         this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+        this.tooltipRef.observeElement();
       }
     }
   }, {
@@ -133,6 +141,7 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
       if (this.containerElement) {
         this.containerElement.removeEventListener('mouseover', this.handleOver, false);
         this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+        this.tooltipRef.unObserveElement();
       }
     }
   }, {
@@ -174,28 +183,8 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = AppContainer;
-AppContainer.propTypes = {
-  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element)]),
-  dataId: _propTypes["default"].string,
-  eleRef: _propTypes["default"].func,
-  tagName: _propTypes["default"].string,
-  className: _propTypes["default"].string,
-  tooltipClass: _propTypes["default"].string,
-  tooltipParentClass: _propTypes["default"].string,
-  customProps: _propTypes["default"].shape({
-    ContainerProps: _propTypes["default"].object,
-    TooltipProps: _propTypes["default"].object,
-    ExtraProps: _propTypes["default"].object
-  })
-};
-AppContainer.defaultProps = {
-  dataId: 'AppContainer',
-  tagName: 'div',
-  className: '',
-  tooltipClass: '',
-  tooltipParentClass: '',
-  customProps: {}
-};
+AppContainer.propTypes = _propTypes.propTypes;
+AppContainer.defaultProps = _defaultProps.defaultProps;
 
 if (false) {
   AppContainer.docs = {

package/lib/AppContainer/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  dataId: 'AppContainer',
+  tagName: 'div',
+  className: '',
+  tooltipClass: '',
+  tooltipParentClass: '',
+  customProps: {}
+};
+exports.defaultProps = defaultProps;

package/lib/AppContainer/props/propTypes.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element)]),
+  dataId: _propTypes["default"].string,
+  eleRef: _propTypes["default"].func,
+  tagName: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  tooltipClass: _propTypes["default"].string,
+  tooltipParentClass: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape({
+    ContainerProps: _propTypes["default"].object,
+    TooltipProps: _propTypes["default"].object,
+    ExtraProps: _propTypes["default"].object
+  })
+};
+exports.propTypes = propTypes;

package/lib/Avatar/Avatar.js

@@ -9,7 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 var _getInitial = require("../utils/getInitial");
 
@@ -226,49 +228,8 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = Avatar;
-Avatar.defaultProps = {
-  needTitle: true,
-  palette: 'primary',
-  shape: 'circle',
-  size: 'medium',
-  src: null,
-  title: null,
-  dataId: 'Avatar',
-  needBorder: true,
-  borderOnActive: false,
-  borderOnHover: false,
-  customProps: {}
-};
-Avatar.propTypes = {
-  dataId: _propTypes["default"].string,
-  initial: _propTypes["default"].string,
-  name: _propTypes["default"].string.isRequired,
-  needBorder: _propTypes["default"].bool,
-  needTitle: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['primary', 'secondary', 'info', 'default']),
-  shape: _propTypes["default"].oneOf(['circle', 'square']),
-  size: _propTypes["default"].oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
-  src: _propTypes["default"].string,
-  textPalette: _propTypes["default"].oneOf(['white', 'black']),
-  title: _propTypes["default"].string,
-  customClass: _propTypes["default"].string,
-  alternateSrc: _propTypes["default"].string,
-  borderOnActive: _propTypes["default"].bool,
-  borderOnHover: _propTypes["default"].bool,
-  customProps: _propTypes["default"].shape({
-    AvatarProps: _propTypes["default"].object
-  })
-}; // Avatar.propTypesDescription = {
-//   name: ' ',
-//   size: ' ',
-//   src: ' ',
-//   palette: ' ',
-//   onClick: ' ',
-//   shape: ' ',
-//   title: ' '
-// };
-
+Avatar.defaultProps = _defaultProps.defaultProps;
+Avatar.propTypes = _propTypes.propTypes;
 Avatar.invalidImageURLs = [];
 Avatar.validImageURLs = [];
 

package/lib/Avatar/props/defaultProps.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  needTitle: true,
+  palette: 'primary',
+  shape: 'circle',
+  size: 'medium',
+  src: null,
+  title: null,
+  dataId: 'Avatar',
+  needBorder: true,
+  borderOnActive: false,
+  borderOnHover: false,
+  customProps: {}
+};
+exports.defaultProps = defaultProps;

package/lib/Avatar/props/propTypes.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  dataId: _propTypes["default"].string,
+  initial: _propTypes["default"].string,
+  name: _propTypes["default"].string.isRequired,
+  needBorder: _propTypes["default"].bool,
+  needTitle: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  palette: _propTypes["default"].oneOf(['primary', 'secondary', 'info', 'default']),
+  shape: _propTypes["default"].oneOf(['circle', 'square']),
+  size: _propTypes["default"].oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  src: _propTypes["default"].string,
+  textPalette: _propTypes["default"].oneOf(['white', 'black']),
+  title: _propTypes["default"].string,
+  customClass: _propTypes["default"].string,
+  alternateSrc: _propTypes["default"].string,
+  borderOnActive: _propTypes["default"].bool,
+  borderOnHover: _propTypes["default"].bool,
+  customProps: _propTypes["default"].shape({
+    AvatarProps: _propTypes["default"].object
+  })
+};
+exports.propTypes = propTypes;

package/lib/AvatarTeam/AvatarTeam.js

@@ -9,7 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 
@@ -112,41 +114,8 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = AvatarTeam;
-AvatarTeam.defaultProps = {
-  isFilled: false,
-  palette: 'primary',
-  size: 'medium',
-  src: null,
-  title: null,
-  dataId: 'avatarTeamComp',
-  needTitle: true,
-  customClass: {},
-  borderOnActive: false,
-  borderOnHover: false,
-  customProps: {}
-};
-AvatarTeam.propTypes = {
-  dataId: _propTypes["default"].string,
-  isFilled: _propTypes["default"].bool,
-  name: _propTypes["default"].string.isRequired,
-  needTitle: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['primary', 'secondary', 'info']),
-  size: _propTypes["default"].oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
-  src: _propTypes["default"].string,
-  textPalette: _propTypes["default"].oneOf(['white', 'black']),
-  title: _propTypes["default"].string,
-  customClass: _propTypes["default"].shape({
-    customAvatar: _propTypes["default"].string,
-    customAvatarTeam: _propTypes["default"].string
-  }),
-  borderOnActive: _propTypes["default"].bool,
-  borderOnHover: _propTypes["default"].bool,
-  customProps: _propTypes["default"].shape({
-    AvatarTeamProps: _propTypes["default"].object,
-    AvatarProps: _propTypes["default"].object
-  })
-};
+AvatarTeam.defaultProps = _defaultProps.defaultProps;
+AvatarTeam.propTypes = _propTypes.propTypes;
 
 if (false) {
   AvatarTeam.docs = {