@zohodesk/dot 1.3.0 → 1.3.2

package/es/IconButton/__tests__/__snapshots__/IconButton.spec.js.snap

@@ -0,0 +1,316 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButton Checking the "Children" 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  >
+    <span>
+      Element 1
+    </span>
+    <span>
+      Element 2
+    </span>
+    <span>
+      Element 3
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`IconButton eleRef prop is a function 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering ally 1`] = `
+<DocumentFragment>
+  <button
+    aria-controls="ariaControls"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-label="ariaLabel"
+    aria-labelledby="ariaLabelledby"
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering ally 2`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="false"
+    aria-haspopup="false"
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in ClassName 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper IconButtonClass undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in Icon 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-infoStroke fbold iconClass  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size13);"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in dataIsHtml is True 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="true"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in isDisabled is True 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover   disabled inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+    disabled=""
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering in title 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+    data-title="IconTitle"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering isNeedEffect is False 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering needButtonTag 1`] = `
+<DocumentFragment>
+  <div
+    aria-pressed="false"
+    class="false wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the defult props 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the hovertypes- bg 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border bgHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the hovertypes- border 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border borderHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the hovertypes- default 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the isActive true with palette of- default 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover active hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the isActive true with palette of- primary 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  primary_active effect primary border defaultHover active hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the isActive true with palette of- primaryFilled 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  primaryFilled_active effect primaryFilled border defaultHover active hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the palette of- default 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the palette of- primary 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  primary effect primary border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the palette of- primaryFilled 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  primaryFilled effect primaryFilled border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering tourId 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+    data-tour="tourId"
+  />
+</DocumentFragment>
+`;

package/es/form/fields/FieldContainer/props/propTypes.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   children: PropTypes.node,
-  alignContainer: PropTypes.oneOf('vertical', 'baseline'),
+  alignContainer: PropTypes.oneOf(['vertical', 'baseline']),
   renderProps: PropTypes.shape({
     start: PropTypes.func,
     middle: PropTypes.func,

package/es/v1/ActionButton/ActionButton.js

@@ -132,8 +132,8 @@ function ActionButton(props) {
 ActionButton.defaultProps = defaultProps;
 ActionButton.propTypes = propTypes;
 const ActionButtonComponent = Popup(ActionButton);
-ActionButtonComponent.defaultProps = ActionButton.defaultProps;
-ActionButtonComponent.propTypes = ActionButton.propTypes; // ActionButton.docs = {
+ActionButtonComponent.defaultProps = defaultProps;
+ActionButtonComponent.propTypes = propTypes; // ActionButton.docs = {
 //   componentGroup: 'Atom'
 // };
 

package/es/v1/AlphabeticList/AlphabeticList.js

@@ -60,6 +60,11 @@ function AlphabeticList(props) {
 
 AlphabeticList.propTypes = AlphabeticList_propTypes;
 AlphabeticList.defaultProps = AlphabeticList_defaultProps;
+const MemoizedAlphabeticList = /*#__PURE__*/memo(AlphabeticList);
+MemoizedAlphabeticList.propTypes = AlphabeticList_propTypes;
+MemoizedAlphabeticList.defaultProps = AlphabeticList_defaultProps;
+MemoizedAlphabeticList.displayName = 'AlphabeticList';
+export default MemoizedAlphabeticList;
 
 function AlphabeticListItem(props) {
   let {
@@ -86,5 +91,4 @@ function AlphabeticListItem(props) {
 }
 
 AlphabeticListItem.propTypes = AlphabeticListItem_propTypes;
-AlphabeticListItem.defaultProps = AlphabeticListItem_defaultProps;
-export default AlphabeticList;
+AlphabeticListItem.defaultProps = AlphabeticListItem_defaultProps;

package/es/v1/Attachment/Attachment.js

@@ -1,87 +1,90 @@
+/**** Libraries ****/
 import React from 'react';
 import { defaultProps } from '../../Attachment/props/defaultProps';
 import { propTypes } from '../../Attachment/props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import Link from '../Link/Link';
+/**** CSS ****/
+
 import style from '../../Attachment/Attachment.module.css';
-export default class Attachment extends React.Component {
-  render() {
-    let {
-      onClick,
-      dataId,
-      size,
-      iconName,
-      fileName,
-      fileSize,
-      downloadLink,
-      palette,
-      tooltip,
-      fileInfo,
-      i18nKeys,
-      dataSelectorId
-    } = this.props;
-    let {
-      downloadTitle = 'Download'
-    } = i18nKeys;
-    return /*#__PURE__*/React.createElement(Container, {
-      isInline: true,
-      className: `${style.attachment} ${onClick ? style.attachmentHover : ''} ${style[`palette_${palette}`]} ${style[size]}`,
-      onClick: onClick,
-      dataId: dataId,
-      "data-title": tooltip,
-      alignBox: "row",
-      isCover: false,
-      dataSelectorId: dataSelectorId,
-      tabIndex: "0"
-    }, iconName ? /*#__PURE__*/React.createElement(Box, {
-      className: style.attachleft
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: iconName,
-      iconClass: style.attachIcon
-    }))) : null, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.attachright
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "horizontal"
-    }, fileName ? /*#__PURE__*/React.createElement(Box, {
-      className: style.atatchName,
-      "data-title": fileName
-    }, fileName) : null, /*#__PURE__*/React.createElement(Box, {
-      className: style.footer
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "baseline",
-      isCover: false
-    }, fileSize ? /*#__PURE__*/React.createElement(Box, {
-      className: style.attachSize,
-      adjust: true,
-      shrink: true,
-      "data-title": fileSize
-    }, fileSize) : null, fileInfo ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-      className: style.dot
-    }), /*#__PURE__*/React.createElement(Box, {
-      className: style.attachSize,
-      adjust: true,
-      shrink: true,
-      "data-title": fileInfo
-    }, fileInfo)) : null)))), downloadLink ? /*#__PURE__*/React.createElement(Link, {
-      target: "_self",
-      href: downloadLink,
-      className: style.attachDownload,
-      title: downloadTitle,
-      hasReload: true
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-downloadNew",
-      iconClass: style.downIcon
-    })) : null);
-  }
 
-}
+const Attachment = props => {
+  const {
+    onClick,
+    dataId,
+    size,
+    iconName,
+    fileName,
+    fileSize,
+    downloadLink,
+    palette,
+    tooltip,
+    fileInfo,
+    i18nKeys,
+    dataSelectorId
+  } = props;
+  let {
+    downloadTitle = 'Download'
+  } = i18nKeys;
+  return /*#__PURE__*/React.createElement(Container, {
+    isInline: true,
+    className: `${style.attachment} ${onClick ? style.attachmentHover : ''} ${style[`palette_${palette}`]} ${style[size]}`,
+    onClick: onClick,
+    dataId: dataId,
+    "data-title": tooltip,
+    alignBox: "row",
+    isCover: false,
+    dataSelectorId: dataSelectorId,
+    tabIndex: "0"
+  }, iconName ? /*#__PURE__*/React.createElement(Box, {
+    className: style.attachleft
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    iconClass: style.attachIcon
+  }))) : null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    className: style.attachright
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "horizontal"
+  }, fileName ? /*#__PURE__*/React.createElement(Box, {
+    className: style.atatchName,
+    "data-title": fileName
+  }, fileName) : null, /*#__PURE__*/React.createElement(Box, {
+    className: style.footer
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "baseline",
+    isCover: false
+  }, fileSize ? /*#__PURE__*/React.createElement(Box, {
+    className: style.attachSize,
+    adjust: true,
+    shrink: true,
+    "data-title": fileSize
+  }, fileSize) : null, fileInfo ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: style.dot
+  }), /*#__PURE__*/React.createElement(Box, {
+    className: style.attachSize,
+    adjust: true,
+    shrink: true,
+    "data-title": fileInfo
+  }, fileInfo)) : null)))), downloadLink ? /*#__PURE__*/React.createElement(Link, {
+    target: "_self",
+    href: downloadLink,
+    className: style.attachDownload,
+    title: downloadTitle,
+    hasReload: true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-downloadNew",
+    iconClass: style.downIcon
+  })) : null);
+};
+
 Attachment.propTypes = propTypes;
-Attachment.defaultProps = defaultProps; // if (__DOCS__) {
+Attachment.defaultProps = defaultProps;
+export default Attachment; // if (__DOCS__) {
 //   Attachment.docs = {
 //     componentGroup: 'Attachment'
 //   };

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;