@zohodesk/dot 1.2.3 → 1.3.0-temp-158

package/es/v1/AttachmentViewer/AttachmentImage.js

@@ -1,79 +1,60 @@
 /* eslint-disable css-modules/no-unused-class */
 
 /** * Libraries ** */
-import React, { Component } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { AttachmentImage_defaultProps } from '../../AttachmentViewer/props/defaultProps';
 import { AttachmentImage_propTypes } from '../../AttachmentViewer/props/propTypes';
 import Image from '../Image/Image';
 /** * CSS ** */
 
 import style from '../../AttachmentViewer/AttachmentViewer.module.css';
-export default class AttachmentImage extends Component {
-  constructor(props) {
-    super(props);
-    this.imageEle = /*#__PURE__*/React.createRef();
-    this.state = {
-      isLoading: true
-    };
-    this.imgLoad = this.imgLoad.bind(this);
-  }
 
-  componentDidMount() {
-    const {
-      isImage
-    } = this.props;
+const AttachmentImage = props => {
+  const {
+    isImage,
+    onLoad,
+    src,
+    onClick,
+    alt,
+    dataId,
+    id,
+    className,
+    isCover
+  } = props;
+  const imageEle = useRef();
+  const [isLoading, setLoading] = useState(true);
 
+  const imgLoad = () => {
+    setLoading(false);
+    onLoad && onLoad();
+  };
+
+  useEffect(() => {
     if (isImage) {
-      const image = this.imageEle.current;
-      image.addEventListener('load', this.imgLoad);
+      const image = imageEle.current;
+      image.addEventListener('load', imgLoad);
     } else {
-      this.setState({
-        isLoading: false
-      });
+      setLoading(false);
     }
-  }
-
-  imgLoad() {
-    this.setState({
-      isLoading: false
-    });
-    const {
-      onLoad
-    } = this.props;
-    onLoad && onLoad();
-  }
-
-  render() {
-    const {
-      src,
-      onClick,
-      alt,
-      dataId,
-      id,
-      className,
-      isCover
-    } = this.props;
-    const {
-      isLoading
-    } = this.state;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
-      className: `${style.spinLoad}`,
-      "data-id": `${dataId}_loader`,
-      "data-test-id": `${dataId}_loader`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.loader
-    })) : null, /*#__PURE__*/React.createElement(Image, {
-      htmlId: id,
-      eleRef: this.imageEle,
-      dataId: dataId,
-      src: src,
-      onClick: onClick,
-      className: `${isLoading ? style.hide : ''} ${className}`,
-      alt: alt,
-      isCover: isCover
-    }));
-  }
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
+    className: `${style.spinLoad}`,
+    "data-id": `${dataId}_loader`,
+    "data-test-id": `${dataId}_loader`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.loader
+  })) : null, /*#__PURE__*/React.createElement(Image, {
+    htmlId: id,
+    eleRef: imageEle,
+    dataId: dataId,
+    src: src,
+    onClick: onClick,
+    className: `${isLoading ? style.hide : ''} ${className}`,
+    alt: alt,
+    isCover: isCover
+  }));
+};
 
-}
 AttachmentImage.propTypes = AttachmentImage_propTypes;
-AttachmentImage.defaultProps = AttachmentImage_defaultProps;
+AttachmentImage.defaultProps = AttachmentImage_defaultProps;
+export default AttachmentImage;

package/es/v1/AttachmentViewer/AttachmentViewer.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import { AttachmentViewer_defaultProps } from '../../AttachmentViewer/props/defaultProps';
 import { AttachmentViewer_propTypes } from '../../AttachmentViewer/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import { Icon } from '@zohodesk/icons';
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import Avatar from '@zohodesk/components/es/v1/Avatar/Avatar';
+import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
+import { getUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import AttachmentImage from './AttachmentImage';
 import Link from '../Link/Link';
 import IconButton from '../IconButton/IconButton';

package/es/v1/ChannelIcon/ChannelIcon.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Icon } from '@zohodesk/icons';
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Avatar from '@zohodesk/components/es/v1/Avatar/Avatar';
 import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
 import { defaultProps } from '../../ChannelIcon/props/defaultProps';
 import { propTypes } from '../../ChannelIcon/props/propTypes';

package/es/v1/Drawer/Drawer.js

@@ -1,14 +1,14 @@
 import React, { useRef } from 'react';
 import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from '../../Drawer/props/defaultProps';
 import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from '../../Drawer/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import { Card, CardHeader, CardContent } from '@zohodesk/components/es/v1/Card';
+import VelocityAnimationGroup from '@zohodesk/components/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
 import { Icon } from '@zohodesk/icons';
-import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { useZIndex } from '@zohodesk/components/es/v1/Provider/ZindexProvider';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
-import Heading from '@zohodesk/components/lib/Heading/Heading';
+import Heading from '@zohodesk/components/es/v1/Heading/Heading';
 import FreezeLayer from '../FreezeLayer/FreezeLayer';
 import FormAction from '../FormAction/FormAction';
 import IconButton from '../IconButton/IconButton';
@@ -143,11 +143,11 @@ export default function Drawer(props) {
       focusScopeProps = {}
     } = customProps;
     const {
-      autoFocus = true,
-      restoreFocus = true,
-      needArrowLoop = false,
-      needTabLoop = true,
-      enableEnterAction = false
+      needAutoFocus = true,
+      needRestoreFocus = true,
+      needListNavigation = false,
+      needFocusLoop = true,
+      needEnterAction = false
     } = focusScopeProps;
     let childrenWithProps = React.Children.map(children, child => {
       if (child.type === Header || child.type === Footer || child.type === Content) {
@@ -186,12 +186,12 @@ export default function Drawer(props) {
       flexible: true
     }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
       elementRef: contentRef,
-      autoFocus: autoFocus,
-      needTabLoop: needTabLoop,
-      restoreFocus: restoreFocus,
-      needArrowLoop: needArrowLoop,
+      needAutoFocus: needAutoFocus,
+      needFocusLoop: needFocusLoop,
+      needRestoreFocus: needRestoreFocus,
+      needListNavigation: needListNavigation,
       onClose: onClose,
-      enableEnterAction: enableEnterAction
+      needEnterAction: needEnterAction
     }, content) : content);
   }
 

package/es/v1/FlipCard/FlipCard.js

@@ -3,9 +3,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from '../../FlipCard/props/defaultProps';
 import { propTypes } from '../../FlipCard/props/propTypes';
-import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
-import { Container } from '@zohodesk/components/lib/Layout';
-import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
+import CheckBox from '@zohodesk/components/es/v1/CheckBox/CheckBox';
+import { Container } from '@zohodesk/components/es/v1/Layout';
+import AvatarSize from '@zohodesk/components/es/v1/Provider/AvatarSize';
 import ChannelIcon from '../ChannelIcon/ChannelIcon';
 import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
 import AvatarUser from '../avatar/AvatarUser/AvatarUser';
@@ -126,5 +126,5 @@ FlipCard.propTypes = propTypes;
 FlipCard.defaultProps = defaultProps; // if (__DOCS__) {
 //   FlipCard.docs = {
 //     componentGroup: 'Molecule'
-//   }; 
+//   };
 // }

package/es/v1/FormAction/FormAction.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from '../../FormAction/props/defaultProps';
 import { propTypes } from '../../FormAction/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import style from '../../FormAction/FormAction.module.css';
 export const LeftSide = props => {
   props.children;

package/es/v1/FreezeLayer/FreezeLayer.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { defaultProps } from '../../FreezeLayer/props/defaultProps';
 import { propTypes } from '../../FreezeLayer/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import { mergeStyle } from '@zohodesk/utils';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import VelocityAnimationGroup from '@zohodesk/components/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { useZIndex } from '@zohodesk/components/es/v1/Provider/ZindexProvider';
 import cssJSLogic from '../../FreezeLayer/css/cssJSLogic';
 import useFreezeLayer from '../../FreezeLayer/useFreezeLayer';
 import style from '../../FreezeLayer/css/FreezeLayer.module.css';

package/es/v1/{version2/GlobalNotification → GlobalNotification}/GlobalNotification.js

@@ -1,13 +1,13 @@
 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, { useEffect } from 'react';
-import { defaultProps } from '../../../version2/GlobalNotification/props/defaultProps';
-import { propTypes, UI_propTypes, new_propTypes } from '../../../version2/GlobalNotification/props/propTypes';
-import AutoClose from '../../../actions/AutoClose';
-import AlertIcons from '../alertIcons/AlertIcons';
-import AlertClose from '../AlertClose/AlertClose';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import style from '../../../version2/GlobalNotification/GlobalNotification.module.css';
+import { defaultProps } from '../../version2/GlobalNotification/props/defaultProps';
+import { propTypes, UI_propTypes, new_propTypes } from '../../version2/GlobalNotification/props/propTypes';
+import AutoClose from '../../actions/AutoClose';
+import AlertIcons from '../alert/alertIcons/AlertIcons';
+import AlertClose from '../alert/AlertClose/AlertClose';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import style from '../../version2/GlobalNotification/GlobalNotification.module.css';
 export default function GlobalNotification(props) {
   let {
     type,

package/es/v1/IconButton/IconButton.js

@@ -4,9 +4,9 @@ import React, { useState } from 'react';
 import { defaultProps } from '../../IconButton/props/defaultProps';
 import { propTypes } from '../../IconButton/props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import { Container } from '@zohodesk/components/lib/Layout';
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
-import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
+import { Container } from '@zohodesk/components/es/v1/Layout';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
+import RippleEffect from '@zohodesk/components/es/v1/RippleEffect/RippleEffect';
 import style from '../../IconButton/IconButton.module.css';
 export default function IconButton(props) {
   let {

package/es/v1/Image/Image.js

@@ -2,38 +2,31 @@ import React from 'react';
 import { defaultProps } from '../../Image/props/defaultProps';
 import { propTypes } from '../../Image/props/propTypes';
 import style from '../../Image/Image.module.css';
-export default class Image extends React.Component {
-  render() {
-    let {
-      alt,
-      src,
-      className,
-      isCover,
-      title,
-      onClick,
-      dataId,
-      htmlId,
-      eleRef,
-      original
-    } = this.props;
-    return /*#__PURE__*/React.createElement("img", {
-      src: src,
-      alt: alt,
-      "data-title": title,
-      "data-id": dataId,
-      "data-test-id": dataId,
-      className: ` ${className} ${isCover ? style.imgFullSize : style.imgMaxFullSize} `,
-      onClick: onClick,
-      id: htmlId,
-      ref: eleRef,
-      "data-original": original
-    });
-  }
-
+export default function Image(props) {
+  let {
+    alt,
+    src,
+    className,
+    isCover,
+    title,
+    onClick,
+    dataId,
+    htmlId,
+    eleRef,
+    original
+  } = props;
+  return /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: alt,
+    "data-title": title,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    className: ` ${className} ${isCover ? style.imgFullSize : style.imgMaxFullSize} `,
+    onClick: onClick,
+    id: htmlId,
+    ref: eleRef,
+    "data-original": original
+  });
 }
 Image.propTypes = propTypes;
-Image.defaultProps = defaultProps; // if (__DOCS__) {
-//   Image.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+Image.defaultProps = defaultProps;

package/es/v1/ImportantNotes/ImportantNotes.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from '../../ImportantNotes/props/defaultProps';
 import { propTypes } from '../../ImportantNotes/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import { Icon } from '@zohodesk/icons';
 import style from '../../ImportantNotes/ImportantNotes.module.css';
 export default function ImportantNotes(props) {

package/es/v1/Loader/Loader.js

@@ -1,21 +1,15 @@
 import React from 'react';
-import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { useZIndex } from '@zohodesk/components/es/v1/Provider/ZindexProvider';
 import style from '../../Loader/Loader.module.css';
-export default class Loader extends React.Component {
-  constructor(props) {
-    super(props);
-    this.getNextIndex = getZIndex(this);
-  }
-
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.ajaxLoader,
-      style: {
-        zIndex: `${this.getNextIndex()}`
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.loader
-    }));
-  }
-
+export default function Loader() {
+  let getNextId = useZIndex();
+  let Zindex = getNextId();
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.ajaxLoader,
+    style: {
+      zIndex: `${Zindex}`
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.loader
+  }));
 }

package/es/v1/MessageBanner/MessageBanner.js

@@ -3,7 +3,7 @@ import { defaultProps } from '../../MessageBanner/props/defaultProps';
 import { propTypes } from '../../MessageBanner/props/propTypes';
 import Link from '../Link/Link';
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import style from '../../MessageBanner/MessageBanner.module.css';
 export default function MessageBanner(props) {
   let {

package/es/v1/NewStar/NewStar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon } from '@zohodesk/icons';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import { defaultProps } from '../../NewStar/props/defaultProps';
 import { propTypes } from '../../NewStar/props/propTypes';
 import style from '../../NewStar/NewStar.module.css';

package/es/v1/Separator/Separator.js

@@ -1,60 +1,53 @@
 import React from 'react';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import { defaultProps } from '../../Separator/props/defaultProps';
 import { propTypes } from '../../Separator/props/propTypes';
 import style from '../../Separator/Separator.module.css';
-export default class Separator extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const {
-      children,
-      type,
-      customSeparatorType,
-      palette,
-      wrap,
-      shrink,
-      aligndirection,
-      customClass
-    } = this.props;
-    const {
-      customWrapper,
-      customSeparator,
-      customChildren
-    } = customClass;
-    const data = children.filter(el => el !== null && el !== undefined && el !== false);
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: aligndirection,
-      align: aligndirection === 'row' ? 'vertical' : '',
-      wrap: wrap,
-      isCover: false,
-      className: `${style.varClass} ${customWrapper}`
-    }, data.map((child, i) => {
-      if (child) {
-        if (data.length - 1 == i || aligndirection == 'column') {
-          return child && /*#__PURE__*/React.createElement(Box, {
-            shrink: shrink,
-            key: i,
-            className: customChildren
-          }, child);
-        }
-
-        return child && /*#__PURE__*/React.createElement(React.Fragment, {
-          key: i
-        }, /*#__PURE__*/React.createElement(Box, {
+export default function Separator(props) {
+  const {
+    children,
+    type,
+    customSeparatorType,
+    palette,
+    wrap,
+    shrink,
+    aligndirection,
+    customClass
+  } = props;
+  const {
+    customWrapper,
+    customSeparator,
+    customChildren
+  } = customClass;
+  const data = children.filter(el => el !== null && el !== undefined && el !== false);
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: aligndirection,
+    align: aligndirection === 'row' ? 'vertical' : '',
+    wrap: wrap,
+    isCover: false,
+    className: `${style.varClass} ${customWrapper}`
+  }, data.map((child, i) => {
+    if (child) {
+      if (data.length - 1 == i || aligndirection == 'column') {
+        return child && /*#__PURE__*/React.createElement(Box, {
           shrink: shrink,
           key: i,
           className: customChildren
-        }, child), /*#__PURE__*/React.createElement(Box, {
-          className: `${style.separator} ${style[palette]} ${customSeparatorType ? '' : style[type]} ${customSeparator} `,
-          key: i
-        }, customSeparatorType ? customSeparatorType : type == 'slash' ? '/' : type == 'arrow' ? '>' : type == 'comma' ? ',' : '\u2022'));
+        }, child);
       }
-    }));
-  }
 
+      return child && /*#__PURE__*/React.createElement(React.Fragment, {
+        key: i
+      }, /*#__PURE__*/React.createElement(Box, {
+        shrink: shrink,
+        key: i,
+        className: customChildren
+      }, child), /*#__PURE__*/React.createElement(Box, {
+        className: `${style.separator} ${style[palette]} ${customSeparatorType ? '' : style[type]} ${customSeparator} `,
+        key: i
+      }, customSeparatorType ? customSeparatorType : type == 'slash' ? '/' : type == 'arrow' ? '>' : type == 'comma' ? ',' : '\u2022'));
+    }
+  }));
 }
 Separator.defaultProps = defaultProps;
 Separator.propTypes = propTypes;

package/es/v1/TagWithIcon/TagWithIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from '../../TagWithIcon/props/defaultProps';
 import { propTypes } from '../../TagWithIcon/props/propTypes';
-import { Container, Box } from '@zohodesk/components/es/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import Icon from '@zohodesk/icons/es/Icon';
 import style from '../../TagWithIcon/TagWithIcon.module.css';
 export default function TagWithIcon(props) {

package/es/v1/ToastMessage/ToastMessage.js

@@ -6,11 +6,11 @@ import { propTypes } from '../../ToastMessage/props/propTypes'; //components
 
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import { useUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import { useZIndex } from '@zohodesk/components/es/v1/Provider/ZindexProvider';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import AutoClose from '../actions/AutoClose';
-import a11yStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css'; //style
+import a11yStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css'; //style
 
 import style from '../../ToastMessage/ToastMessage.module.css';