@zohodesk/components 1.0.0-alpha-237 → 1.0.0-alpha-240

package/es/Textarea/docs/Textarea__custom.docs.js

@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import Textarea from '../Textarea';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import styles from '../../common/docStyle.module.css';
+export default class Textarea__custom extends Component {
+  render() {
+    let style = {
+      marginBottom: '20px'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '350px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      customClass: styles.customTextarea,
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {}
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      customClass: styles.customTextarea,
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      text: "Readonly",
+      isReadOnly: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      customClass: styles.disabledTarea,
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      text: "Disabled",
+      isDisabled: true,
+      needEffect: false
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      customClass: styles.customTextarea,
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "medium"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      customClass: styles.customTextarea,
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "large"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      customClass: styles.customTextarea,
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "large",
+      autoFocus: true
+    }))));
+  }
+
+}
+
+if (false) {
+  Textarea__custom.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Textarea/docs/Textarea__default.docs.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import Textarea from '../Textarea';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Textarea__default extends Component {
+  render() {
+    let style = {
+      marginBottom: '20px'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '350px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {}
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      text: "Readonly",
+      isReadOnly: true,
+      needEffect: false
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      text: "Disabled",
+      isDisabled: true,
+      needEffect: false
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "medium"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "large"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "large",
+      autoFocus: true
+    }))));
+  }
+
+}
+
+if (false) {
+  Textarea__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Textarea/docs/Textarea__disabled.docs.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import Textarea from '../Textarea';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Textarea__disabled extends Component {
+  render() {
+    let style = {
+      marginBottom: '20px',
+      width: '350px'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      value: "TextArea component description",
+      id: "textarea",
+      maxLength: 100,
+      onChange: () => {},
+      isDisabled: true
+    })));
+  }
+
+}
+
+if (false) {
+  Textarea__disabled.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Tooltip/Tooltip.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { getLibraryConfig } from '../Provider/Config';
 import style from './Tooltip.module.css';
+import ResizeObserver from '../Responsive/ResizeObserver';
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);
@@ -19,6 +20,43 @@ export default class Tooltip extends React.Component {
     this.getDirection = document.getElementsByTagName('html')[0];
     this.leftRightScreenEdge = this.leftRightScreenEdge.bind(this);
     this.topBottomScreenEdge = this.topBottomScreenEdge.bind(this);
+    this.observer = new ResizeObserver(this.onResize);
+    this.isResized = true;
+    this.tooltipContainerClientRect = {};
+    this.tooltipContainerEl = {};
+  }
+
+  onResize(sizeOfObservedEl, observedEl) {
+    this.isResized = true;
+  }
+
+  observeElement() {
+    this.tooltipContainerEl = this.getToolTipContainerEl();
+    this.observer.observe(this.tooltipContainerEl);
+  }
+
+  unObserveElement() {
+    this.observer.unobserve(this.tooltipContainerEl);
+  }
+
+  getClientRectOfContEl(el) {
+    if (this.isResized) {
+      return this.setClientRectOfContEl(el);
+    }
+
+    return this.tooltipContainerClientRect;
+  }
+
+  setClientRectOfContEl(containerEl) {
+    this.isResized = false;
+    this.tooltipContainerClientRect = containerEl.getBoundingClientRect();
+    return this.tooltipContainerClientRect;
+  }
+
+  getToolTipContainerEl() {
+    const getTooltipContainer = getLibraryConfig('getTooltipContainer');
+    const tooltipContainer = typeof getTooltipContainer === 'function' ? getTooltipContainer() : null;
+    return tooltipContainer ? tooltipContainer : document.body;
   }
 
   getToolTipDOM(el) {
@@ -92,7 +130,7 @@ export default class Tooltip extends React.Component {
   }
 
   handleOver(e, targetElement) {
-    let containerElement = getLibraryConfig('tooltipContainer') === 'root' && targetElement ? targetElement : document.body;
+    let containerElement = this.tooltipContainerEl;
     let element = e.target;
     let titleDiv = element.hasAttribute('data-title') || element.hasAttribute('title') ? element : element.closest('[data-title]') || element.closest('[title]');
 
@@ -150,7 +188,7 @@ export default class Tooltip extends React.Component {
         let dataTooltipnoArrow = titleDiv.getAttribute('data-tooltip-noarrow') === 'true' ? true : false;
         let dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') === 'true' ? true : false;
         let clientRect = titleDiv.getBoundingClientRect();
-        let boxLayout = containerElement.getBoundingClientRect();
+        let boxLayout = this.getClientRectOfContEl(containerElement);
         this.setState({
           title,
           isHtml,

package/es/Tooltip/docs/Tooltip__default.docs.js

@@ -0,0 +1,371 @@
+import React, { Component } from 'react';
+import Tooltip from '../Tooltip';
+import Button from '../../Button/Button';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class Tooltip__default extends Component {
+  constructor(props) {
+    super(props);
+    this.tooltip = this.tooltip.bind(this);
+  }
+
+  tooltip() {
+    let titleStyle = {
+      fontSize: '15px',
+      padding: '15px 0',
+      borderTop: '1px solid #e0e0e0',
+      marginTop: '20px'
+    },
+        inlineBlock = {
+      display: 'inline-block',
+      marginRight: '10px',
+      marginBottom: '5px'
+    },
+        dottedstyle = {
+      display: 'inline-flex',
+      width: '100px',
+      textOverflow: 'ellipsis',
+      whitepace: 'nowrap',
+      overflow: 'hidden',
+      marginRight: '10px',
+      whiteSpace: 'nowrap'
+    },
+        flex = {
+      display: 'inline-flex',
+      alignItems: 'center',
+      fontSize: '14px'
+    },
+        clampDotted = {
+      overflow: 'hidden',
+      display: '-webkit-box',
+      webkitLineClamp: '3',
+      webkitBoxOrient: 'vertical',
+      width: '100px',
+      fontSize: '14px',
+      background: 'var(--zdt_cta_primary_bg)',
+      padding: '3px 15px',
+      color: '#fff',
+      borderRadius: '4px',
+      marginBottom: '5px'
+    },
+        whiteSpaceNoWrap = {
+      overflow: 'hidden',
+      display: '-webkit-box',
+      webkitLineClamp: '3',
+      webkitBoxOrient: 'vertical',
+      whiteSpace: 'pre-wrap',
+      fontSize: '14px',
+      background: 'var(--zdt_cta_primary_bg)',
+      padding: '3px 15px',
+      color: '#fff',
+      borderRadius: '4px',
+      marginBottom: '5px',
+      width: '200px'
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, /*#__PURE__*/React.createElement("b", null, "Top Position Tooltip"), " - 1) Lengthy Content, 2) Default Top, 3) Show in Bottom Area if Top doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Register Account with Lengthy Content",
+      "data-title-position": "top"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "Lengthy",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "I am Top Tooltip",
+      "data-title-position": "top"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "I am Top",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "If top does not have enough space I will be shown in bottom area.If top does not have enough space I will be shown in bottom area.If top does not have enough space I will be shown in bottom area.If top does not have enough space I will be shown in bottom area.If top does not have enough space I will be shown in bottom area.",
+      "data-title-position": "top"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Space in Top ???",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: dottedstyle,
+      "data-title": "I am Top Tooltip",
+      "data-title-position": "top"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "I am Top Tooltip",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "<h2>HTML Heading</h2>",
+      "data-ishtml": true,
+      "data-title-position": "top"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "HTML in Tooltip",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Top Tooltip without Arrow",
+      "data-title-position": "top",
+      "data-tooltip-noarrow": true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Need Arrow",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: clampDotted,
+      "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
+      "data-title-position": "top"
+    }, /*#__PURE__*/React.createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/React.createElement("span", {
+      style: whiteSpaceNoWrap,
+      "data-title": `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`,
+      "data-title-position": "top",
+      "data-title-wrap": "true"
+    }, /*#__PURE__*/React.createElement("span", null, `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`))), /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, /*#__PURE__*/React.createElement("b", null, "Bottom Position Tooltip"), " - 1) Lengthy Content, 2) Default Bottom, 3) Show in Top Area if Bottom doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Register Account with Lengthy Content",
+      "data-title-position": "bottom"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "Lengthy",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "I am Bottom Tooltip",
+      "data-title-position": "bottom"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "I am Bottom",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "If bottom does not have enough space I will be shown in top area.If bottom does not have enough space I will be shown in top area.If bottom does not have enough space I will be shown in top area.If bottom does not have enough space I will be shown in top area.",
+      "data-title-position": "bottom"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Space in Bottom ???",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: dottedstyle,
+      "data-title": "I am Bottom Tooltip",
+      "data-dottedTitle": "I am Bottom Tooltip with Dotted Content",
+      "data-title-position": "bottom"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "DottedDottedDottedDotted",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "<span style=\"color:red\">HTML Heading</span>",
+      "data-ishtml": true,
+      "data-title-position": "bottom"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "HTML in Tooltip",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Bottom Tooltip without Arrow",
+      "data-title-position": "bottom",
+      "data-tooltip-noarrow": true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Need Arrow",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: clampDotted,
+      "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
+      "data-title-position": "bottom"
+    }, /*#__PURE__*/React.createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/React.createElement("span", {
+      style: whiteSpaceNoWrap,
+      "data-title": `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`,
+      "data-title-position": "bottom",
+      "data-title-wrap": "true"
+    }, /*#__PURE__*/React.createElement("span", null, `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`))), /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, /*#__PURE__*/React.createElement("b", null, "Left Position Tooltip"), " - 1) Lengthy Content, 2) Default Left, 3) Show in Right Area if Left doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.",
+      "data-title-position": "left"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "Lengthy",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Left Tooltip",
+      "data-title-position": "left"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "I am Left",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.If left does not have enough space I will be shown in right area.",
+      "data-title-position": "left"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Space in Left ???",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: dottedstyle,
+      "data-title": "I am Left Tooltip",
+      "data-dottedTitle": "I am Left Tooltip with Dotted Content",
+      "data-title-position": "left"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "DottedDottedDottedDotted",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "<div style=\"width:500px;height:50px;background:#fff;color:orange;\">HTML Heading</div>",
+      "data-ishtml": true,
+      "data-title-position": "left"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "HTML in Tooltip",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Left Tooltip without Arrow",
+      "data-title-position": "left",
+      "data-tooltip-noarrow": true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Need Arrow",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: clampDotted,
+      "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
+      "data-title-position": "left"
+    }, /*#__PURE__*/React.createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/React.createElement("span", {
+      style: whiteSpaceNoWrap,
+      "data-title": `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`,
+      "data-title-position": "left",
+      "data-title-wrap": "true"
+    }, /*#__PURE__*/React.createElement("span", null, `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`))), /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, /*#__PURE__*/React.createElement("b", null, "Right Position Tooltip"), " - 1) Lengthy Content, 2) Default Right, 3) Show in Left Area if Right doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.",
+      "data-title-position": "right"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "Lengthy",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Right Tooltip",
+      "data-title-position": "right"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "I am Right",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "If right does not have enough space I will be shown in left area.If right does not have enough space I will be shown in left area.If right does not have enough space I will be shown in left area.If right does not have enough space I will be shown in left area.",
+      "data-title-position": "right"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Space in Right ???",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: dottedstyle,
+      "data-title": "I am Right Tooltip",
+      "data-dottedTitle": "I am Right Tooltip with Dotted Content",
+      "data-title-position": "right"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "DottedDottedDottedDotted",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "<i>HTML Heading</i>",
+      "data-ishtml": true,
+      "data-title-position": "right"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "HTML in Tooltip",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Right Tooltip without Arrow",
+      "data-title-position": "right",
+      "data-tooltip-noarrow": true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Need Arrow",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: clampDotted,
+      "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
+      "data-title-position": "right"
+    }, /*#__PURE__*/React.createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/React.createElement("span", {
+      style: whiteSpaceNoWrap,
+      "data-title": `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`,
+      "data-title-position": "right",
+      "data-title-wrap": "true"
+    }, /*#__PURE__*/React.createElement("span", null, `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`))), /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, /*#__PURE__*/React.createElement("b", null, "No Position Tooltip"), " - 1) Lengthy Content, 2) Default Top/Bottom, 3) Show in Top Area if Bottom doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position."
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "Lengthy",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Normal Tooltip"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "I am Normal",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "If Top/Bottom does not have enough space I will be shown in Bottom/Top position.If Top/Bottom does not have enough space I will be shown in Bottom/Top positionIf Top/Bottom does not have enough space I will be shown in Bottom/Top positionIf Top/Bottom does not have enough space I will be shown in Bottom/Top position"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Space in Top/Bottom ???",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: dottedstyle,
+      "data-title": "I am Default Tooltip",
+      "data-dottedTitle": "I am Default Tooltip with Dotted Content"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "DottedDottedDottedDotted",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "<b style=\"color:yellow;background:orange;\">HTML Heading</b>",
+      "data-ishtml": true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "HTML in Tooltip",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: inlineBlock,
+      "data-title": "Tooltip without Arrow",
+      "data-tooltip-noarrow": true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "No Need Arrow",
+      palette: "primaryFilled"
+    }))), /*#__PURE__*/React.createElement("span", {
+      style: clampDotted,
+      "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted"
+    }, /*#__PURE__*/React.createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/React.createElement("span", {
+      style: whiteSpaceNoWrap,
+      "data-title": `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`,
+      "data-title-wrap": "true"
+    }, /*#__PURE__*/React.createElement("span", null, `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`)));
+  }
+
+  render() {
+    let parent = {
+      display: 'flex'
+    },
+        split = {
+      padding: '20px',
+      width: '50%'
+    },
+        dark = {
+      background: '#2c334d',
+      padding: '20px',
+      width: '50%',
+      color: '#fff'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      onMouseOver: e => this.tooltipRef && this.tooltipRef.handleOver(e)
+    }, /*#__PURE__*/React.createElement("div", {
+      style: parent
+    }, /*#__PURE__*/React.createElement("div", {
+      style: split
+    }, this.tooltip()), /*#__PURE__*/React.createElement("div", {
+      style: dark
+    }, this.tooltip())));
+  }
+
+}
+
+if (false) {
+  Tooltip__default.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}