@zohodesk/components 1.0.0-test-252 → 1.1.0

package/es/ListItem/ListItemWithIcon.js

@@ -1,12 +1,14 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+
 /**** Libraries ****/
 import React from 'react';
 import { Box } from '../Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import ListContainer from './ListContainer';
 import { ListItemWithIconDefaultProps } from './props/defaultProps';
 import { ListItemWithIcon_Props } from './props/propTypes';
 /**** CSS ****/
+
 import style from './ListItem.module.css';
 export default class ListItemWithIcon extends React.Component {
   constructor(props) {
@@ -15,6 +17,7 @@ export default class ListItemWithIcon extends React.Component {
     this.getRef = this.getRef.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
   }
+
   getRef(ele) {
     this.ele = ele;
     let {
@@ -24,6 +27,7 @@ export default class ListItemWithIcon extends React.Component {
     } = this.props;
     getRef && getRef(ele, index, id);
   }
+
   handleClick(e) {
     let {
       onClick,
@@ -33,6 +37,7 @@ export default class ListItemWithIcon extends React.Component {
     } = this.props;
     onClick && onClick(id, value, index, e);
   }
+
   handleMouseEnter(e) {
     let {
       onMouseEnter,
@@ -42,6 +47,7 @@ export default class ListItemWithIcon extends React.Component {
     } = this.props;
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
+
   render() {
     let {
       size,
@@ -54,6 +60,7 @@ export default class ListItemWithIcon extends React.Component {
       palette,
       iconClass,
       dataId,
+      dataSelectorId,
       title,
       needTick,
       isLink,
@@ -64,18 +71,24 @@ export default class ListItemWithIcon extends React.Component {
       disableTitle,
       a11y,
       customClass,
-      customProps
+      customProps,
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
       ContainerProps = {}
     } = customProps;
+    const listA11y = {
+      ariaHidden: true,
+      role: 'option',
+      ...a11y
+    };
     let {
-      ariaHidden = true
-    } = a11y;
+      ariaHidden
+    } = listA11y;
     let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
+      a11y: listA11y,
       size: size,
       palette: palette,
       highlight: highlight,
@@ -86,6 +99,7 @@ export default class ListItemWithIcon extends React.Component {
       needBorder: needBorder,
       customClass: customClass,
       dataId: dataIdString,
+      dataSelectorId: dataSelectorId,
       isLink: isLink,
       href: href,
       target: target,
@@ -108,24 +122,25 @@ export default class ListItemWithIcon extends React.Component {
     }) : null, value && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,
-      className: style.value,
+      className: needMultiLineText ? style.multiLineValue : style.value,
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
     }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
-      dataId: `${dataIdString}_tickIcon`
+      dataId: `${dataIdString}_tickIcon`,
+      dataSelectorId: `${dataSelectorId}_tickIcon`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
     })) : null);
   }
+
 }
 ListItemWithIcon.defaultProps = ListItemWithIconDefaultProps;
-ListItemWithIcon.propTypes = ListItemWithIcon_Props;
-if (false) {
-  ListItemWithIcon.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+ListItemWithIcon.propTypes = ListItemWithIcon_Props; // if (__DOCS__) {
+//   ListItemWithIcon.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/ListItemWithRadio.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 Radio from '../Radio/Radio';
 import { Box } from '../Layout';
@@ -13,6 +14,7 @@ export default class ListItemWithRadio extends React.Component {
     this.getRef = this.getRef.bind(this);
     this.onHover = this.onHover.bind(this);
   }
+
   getRef(ele) {
     this.ele = ele;
     let {
@@ -21,6 +23,7 @@ export default class ListItemWithRadio extends React.Component {
     } = this.props;
     getRef && getRef(ele, index);
   }
+
   onClick(e) {
     let {
       onClick,
@@ -30,6 +33,7 @@ export default class ListItemWithRadio extends React.Component {
     } = this.props;
     onClick && onClick(id, value, index, e);
   }
+
   onHover(e) {
     let {
       onHover,
@@ -39,6 +43,7 @@ export default class ListItemWithRadio extends React.Component {
     } = this.props;
     onHover && onHover(id, value, index, e);
   }
+
   render() {
     let {
       size,
@@ -50,24 +55,30 @@ export default class ListItemWithRadio extends React.Component {
       palette,
       id,
       dataId,
+      dataSelectorId,
       title,
       isDisabled,
       disableTitle,
       a11y,
       customClass,
-      customProps
+      customProps,
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
       ContainerProps = {}
     } = customProps;
+    const listA11y = {
+      role: 'option',
+      ...a11y
+    };
     let {
       customListItem = '',
       customRadio = '',
       customRadioWrap = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
+      a11y: listA11y,
       size: size,
       palette: palette,
       highlight: highlight,
@@ -76,6 +87,7 @@ export default class ListItemWithRadio extends React.Component {
       autoHover: autoHover,
       customClass: customListItem,
       dataId: dataId,
+      dataSelectorId: dataSelectorId,
       onClick: this.onClick,
       onMouseOver: this.onHover,
       eleRef: this.getRef,
@@ -98,15 +110,15 @@ export default class ListItemWithRadio extends React.Component {
       flexible: true,
       shrink: true,
       "data-title": disableTitle ? null : title,
-      className: style.value
+      className: needMultiLineText ? style.multiLineValue : style.value
     }, value));
   }
+
 }
 ListItemWithRadio.defaultProps = ListItemWithRadioDefaultProps;
-ListItemWithRadio.propTypes = ListItemWithRadio_Props;
-if (false) {
-  ListItemWithRadio.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+ListItemWithRadio.propTypes = ListItemWithRadio_Props; // if (__DOCS__) {
+//   ListItemWithRadio.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/index.js

@@ -0,0 +1,6 @@
+export { default as ListContainer } from './ListContainer';
+export { default as ListItem } from './ListItem';
+export { default as ListItemWithAvatar } from './ListItemWithAvatar';
+export { default as ListItemWithCheckBox } from './ListItemWithCheckBox';
+export { default as ListItemWithIcon } from './ListItemWithIcon';
+export { default as ListItemWithRadio } from './ListItemWithRadio';

package/es/ListItem/props/defaultProps.js

@@ -10,7 +10,9 @@ export const ListContainerDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listContainer',
+  needMultiLineText: false
 };
 export const ListItemDefaultProps = {
   active: false,
@@ -25,7 +27,9 @@ export const ListItemDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItem',
+  needMultiLineText: false
 };
 export const ListItemWithAvatarDefaultProps = {
   active: false,
@@ -41,7 +45,9 @@ export const ListItemWithAvatarDefaultProps = {
   needAvatarTitle: true,
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithAvatar',
+  needMultiLineText: false
 };
 export const ListItemWithCheckBoxDefaultProps = {
   active: false,
@@ -53,7 +59,9 @@ export const ListItemWithCheckBoxDefaultProps = {
   value: 'List',
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithCheckBox',
+  needMultiLineText: false
 };
 export const ListItemWithIconDefaultProps = {
   active: false,
@@ -68,7 +76,9 @@ export const ListItemWithIconDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithIcon',
+  needMultiLineText: false
 };
 export const ListItemWithRadioDefaultProps = {
   active: false,
@@ -81,5 +91,7 @@ export const ListItemWithRadioDefaultProps = {
   dataId: 'listItemWithRadioComp',
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithRadio',
+  needMultiLineText: false
 };

package/es/ListItem/props/propTypes.js

@@ -4,6 +4,7 @@ export const ListContainer_Props = {
   autoHover: PropTypes.bool,
   children: PropTypes.node,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   highlight: PropTypes.bool,
   href: PropTypes.string,
@@ -23,13 +24,15 @@ export const ListContainer_Props = {
     ariaSelected: PropTypes.bool
   }),
   customClass: PropTypes.string,
-  customProps: PropTypes.object
+  customProps: PropTypes.object,
+  needMultiLineText: PropTypes.bool
 };
 export const ListItem_Props = {
   active: PropTypes.bool,
   autoHover: PropTypes.bool,
   children: PropTypes.node,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,
@@ -51,6 +54,7 @@ export const ListItem_Props = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
   }),
+  needMultiLineText: PropTypes.bool,
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customTickIcon: PropTypes.string
@@ -65,6 +69,7 @@ export const ListItemWithAvatar_Props = {
   avatarPalette: PropTypes.string,
   avatarPalette: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,
@@ -94,6 +99,7 @@ export const ListItemWithAvatar_Props = {
     customAvatar: PropTypes.string,
     customAvatarTeam: PropTypes.string
   }),
+  needMultiLineText: PropTypes.bool,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
   })
@@ -103,6 +109,7 @@ export const ListItemWithCheckBox_Props = {
   autoHover: PropTypes.bool,
   checked: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,
@@ -119,6 +126,7 @@ export const ListItemWithCheckBox_Props = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
   }),
+  needMultiLineText: PropTypes.bool,
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customCheckBox: PropTypes.string,
@@ -129,6 +137,7 @@ export const ListItemWithIcon_Props = {
   active: PropTypes.bool,
   autoHover: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,
@@ -151,6 +160,7 @@ export const ListItemWithIcon_Props = {
     ariaSelected: PropTypes.bool,
     ariaHidden: PropTypes.bool
   }),
+  needMultiLineText: PropTypes.bool,
   customClass: PropTypes.string,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
@@ -161,6 +171,7 @@ export const ListItemWithRadio_Props = {
   autoHover: PropTypes.bool,
   checked: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,
@@ -177,6 +188,7 @@ export const ListItemWithRadio_Props = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
   }),
+  needMultiLineText: PropTypes.bool,
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customRadio: PropTypes.string,

package/es/Modal/Modal.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+
 /**** Libraries ****/
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -20,19 +21,21 @@ export default class Modal extends React.Component {
     };
     this.portalId = props.portalId;
     this.setRef = this.setRef.bind(this);
-    this.ref = null;
-    // this.portalDiv = document.createDocumentFragment();
+    this.ref = null; // this.portalDiv = document.createDocumentFragment();
   }
 
   setRef(ele) {
     this.ref = ele;
+
     if (this.isZIndexAppendNeeded) {
       this.ref.style.zIndex = this.zIndex;
       this.isZIndexAppendNeeded = false;
     }
   }
+
   getPortalDiv() {
     this.modalRoot = this.props.portalId ? document.querySelector(`[data-portal=${this.props.portalId}]`) : '';
+
     if (!this.modalRoot) {
       this.portalId = this.handleAddPortalId();
       this.newModalRoot = document.createElement('div');
@@ -41,8 +44,10 @@ export default class Modal extends React.Component {
       this.containerDiv && this.containerDiv.appendChild(this.newModalRoot);
       this.modalRoot = this.newModalRoot;
     }
+
     return this.modalRoot;
   }
+
   componentDidMount() {
     this.containerDiv = document.getElementsByTagName('desk')[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
     this.portalDiv = this.getPortalDiv();
@@ -52,16 +57,19 @@ export default class Modal extends React.Component {
       this.handleInsertPortalDiv();
     });
   }
+
   componentWillUnmount() {
     //this.modalRoot && this.modalRoot.removeChild(this.portalDiv);
     if (this.newModalRoot) {
       this.containerDiv && this.containerDiv.removeChild(this.newModalRoot);
       this.handleRemovePortalId();
     }
+
     if (this.zIndex && portalChildrenTopIndexValues === this.zIndex) {
       portalChildrenTopIndexValues -= 1;
     }
   }
+
   componentDidUpdate(prevProps) {
     if (prevProps.isActive != this.props.isActive) {
       if (this.props.isActive) {
@@ -71,18 +79,22 @@ export default class Modal extends React.Component {
       }
     }
   }
+
   handleInsertPortalDiv() {
     let {
       autoZIndexNeeded
     } = this.props;
+
     if (autoZIndexNeeded) {
       let {
         isActive
       } = this.props;
+
       if (isActive) {
         let newHighValue = Number(portalChildrenTopIndexValues || 10) + 1;
         portalChildrenTopIndexValues = newHighValue;
         this.zIndex = newHighValue;
+
         if (this.ref) {
           this.ref.style.zIndex = newHighValue;
         } else {
@@ -91,6 +103,7 @@ export default class Modal extends React.Component {
       }
     }
   }
+
   handleAddPortalId() {
     let createdPortalIdsLen = createdPortalIds.length;
     let newPortalId = createdPortalIdsLen ? createdPortalIds[createdPortalIdsLen - 1] + 1 : 1;
@@ -99,38 +112,43 @@ export default class Modal extends React.Component {
     this.isCustomPortalId = true;
     return `${newPortalPrefix}${newPortalId}`;
   }
+
   handleRemovePortalId() {
     if (this.isCustomPortalId) {
       createdPortalIds = createdPortalIds.filter(id => id !== this.portalId);
     }
   }
+
   render() {
     let {
-        children
-      } = this.props,
-      {
-        isMounted
-      } = this.state;
+      children
+    } = this.props,
+        {
+      isMounted
+    } = this.state;
     let Element = children.type,
-      elementProps = children.props;
+        elementProps = children.props;
+
     if (isMounted) {
       if (Element) {
         return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, _extends({
           ref: this.setRef
         }, elementProps)), this.portalDiv);
       }
+
       return null;
     }
+
     return null;
   }
+
 }
 Modal.defaultProps = defaultProps;
-Modal.propTypes = propTypes;
-if (false) {
-  Modal.docs = {
-    componentGroup: 'Atom',
-    folderName: 'Style Guide',
-    external: false,
-    description: ' '
-  };
-}
+Modal.propTypes = propTypes; // if (__DOCS__) {
+//   Modal.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'Style Guide',
+//     external: false,
+//     description: ' '
+//   };
+// }