@storybook/components 6.4.0-beta.24 → 6.4.0-beta.25

package/dist/modern/tooltip/Tooltip.js

@@ -0,0 +1,110 @@
+function _extends() { _extends = Object.assign || 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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import memoize from 'memoizerific';
+import { styled, lighten, darken } from '@storybook/theming';
+const match = memoize(1000)((requests, actual, value, fallback = 0) => actual.split('-')[0] === requests ? value : fallback);
+const ArrowSpacing = 8;
+const Arrow = styled.div({
+  position: 'absolute',
+  borderStyle: 'solid'
+}, ({
+  placement
+}) => {
+  let x = 0;
+  let y = 0;
+
+  switch (true) {
+    case placement.startsWith('left') || placement.startsWith('right'):
+      {
+        y = 8;
+        break;
+      }
+
+    case placement.startsWith('top') || placement.startsWith('bottom'):
+      {
+        x = 8;
+        break;
+      }
+
+    default:
+      {//
+      }
+  }
+
+  const transform = `translate3d(${x}px, ${y}px, 0px)`;
+  return {
+    transform
+  };
+}, ({
+  theme,
+  color,
+  placement
+}) => ({
+  bottom: `${match('top', placement, ArrowSpacing * -1, 'auto')}px`,
+  top: `${match('bottom', placement, ArrowSpacing * -1, 'auto')}px`,
+  right: `${match('left', placement, ArrowSpacing * -1, 'auto')}px`,
+  left: `${match('right', placement, ArrowSpacing * -1, 'auto')}px`,
+  borderBottomWidth: `${match('top', placement, '0', ArrowSpacing)}px`,
+  borderTopWidth: `${match('bottom', placement, '0', ArrowSpacing)}px`,
+  borderRightWidth: `${match('left', placement, '0', ArrowSpacing)}px`,
+  borderLeftWidth: `${match('right', placement, '0', ArrowSpacing)}px`,
+  borderTopColor: match('top', placement, theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) : darken(theme.background.app), 'transparent'),
+  borderBottomColor: match('bottom', placement, theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) : darken(theme.background.app), 'transparent'),
+  borderLeftColor: match('left', placement, theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) : darken(theme.background.app), 'transparent'),
+  borderRightColor: match('right', placement, theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) : darken(theme.background.app), 'transparent')
+}));
+const Wrapper = styled.div(({
+  hidden
+}) => ({
+  display: hidden ? 'none' : 'inline-block',
+  zIndex: 2147483647
+}), ({
+  theme,
+  color,
+  hasChrome
+}) => hasChrome ? {
+  background: theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) : darken(theme.background.app),
+  filter: `
+            drop-shadow(0px 5px 5px rgba(0,0,0,0.05))
+            drop-shadow(0 1px 3px rgba(0,0,0,0.1))
+          `,
+  borderRadius: theme.appBorderRadius * 2,
+  fontSize: theme.typography.size.s1
+} : {});
+export const Tooltip = (_ref) => {
+  let {
+    placement,
+    hasChrome,
+    children,
+    arrowProps,
+    tooltipRef,
+    arrowRef,
+    color
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["placement", "hasChrome", "children", "arrowProps", "tooltipRef", "arrowRef", "color"]);
+
+  return /*#__PURE__*/React.createElement(Wrapper, _extends({
+    hasChrome: hasChrome,
+    placement: placement,
+    ref: tooltipRef
+  }, props, {
+    color: color
+  }), hasChrome && /*#__PURE__*/React.createElement(Arrow, _extends({
+    placement: placement,
+    ref: arrowRef
+  }, arrowProps, {
+    color: color
+  })), children);
+};
+Tooltip.displayName = "Tooltip";
+Tooltip.defaultProps = {
+  color: undefined,
+  arrowRef: undefined,
+  tooltipRef: undefined,
+  hasChrome: true,
+  placement: 'top',
+  arrowProps: {}
+};

package/dist/modern/tooltip/Tooltip.stories.js

@@ -0,0 +1,30 @@
+function _extends() { _extends = Object.assign || 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 { storiesOf } from '@storybook/react';
+import { styled } from '@storybook/theming';
+import { Tooltip } from './Tooltip'; // Popper would position the tooltip absolutely. We just need to make sure we are pos:rel
+
+const mockPopperProps = {
+  style: {
+    position: 'relative',
+    top: 20,
+    left: 20
+  }
+};
+const Content = styled.div({
+  width: '100px',
+  height: '100px',
+  fontSize: '16px',
+  textAlign: 'center',
+  lineHeight: '100px'
+});
+storiesOf('basics/Tooltip/Tooltip', module).add('basic, default', () => /*#__PURE__*/React.createElement(Tooltip, mockPopperProps, /*#__PURE__*/React.createElement(Content, null, "Text"))).add('basic, default, bottom', () => /*#__PURE__*/React.createElement(Tooltip, _extends({
+  placement: "bottom"
+}, mockPopperProps), /*#__PURE__*/React.createElement(Content, null, "Text"))).add('basic, default, left', () => /*#__PURE__*/React.createElement(Tooltip, _extends({
+  placement: "left"
+}, mockPopperProps), /*#__PURE__*/React.createElement(Content, null, "Text"))).add('basic, default, right', () => /*#__PURE__*/React.createElement(Tooltip, _extends({
+  placement: "right"
+}, mockPopperProps), /*#__PURE__*/React.createElement(Content, null, "Text"))).add('no chrome', () => /*#__PURE__*/React.createElement(Tooltip, _extends({
+  hasChrome: false
+}, mockPopperProps), /*#__PURE__*/React.createElement(Content, null, "Text")));

package/dist/modern/tooltip/TooltipLinkList.js

@@ -0,0 +1,64 @@
+function _extends() { _extends = Object.assign || 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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useCallback } from 'react';
+import { styled } from '@storybook/theming';
+import ListItem from './ListItem';
+const List = styled.div({
+  minWidth: 180,
+  overflow: 'hidden',
+  overflowY: 'auto',
+  maxHeight: 13.5 * 32 // 11.5 items
+
+}, ({
+  theme
+}) => ({
+  borderRadius: theme.appBorderRadius * 2
+}));
+
+const Item = props => {
+  const {
+    LinkWrapper,
+    onClick: onClickFromProps
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, ["LinkWrapper", "onClick"]);
+
+  const {
+    title,
+    href,
+    active
+  } = rest;
+  const onClick = useCallback(event => {
+    onClickFromProps(event, rest);
+  }, [onClickFromProps]);
+  const hasOnClick = !!onClickFromProps;
+  return /*#__PURE__*/React.createElement(ListItem, _extends({
+    title: title,
+    active: active,
+    href: href,
+    LinkWrapper: LinkWrapper
+  }, rest, hasOnClick ? {
+    onClick
+  } : {}));
+};
+
+Item.displayName = "Item";
+export const TooltipLinkList = ({
+  links,
+  LinkWrapper
+}) => /*#__PURE__*/React.createElement(List, null, links.map((_ref) => {
+  let {
+    isGatsby
+  } = _ref,
+      p = _objectWithoutPropertiesLoose(_ref, ["isGatsby"]);
+
+  return /*#__PURE__*/React.createElement(Item, _extends({
+    key: p.id,
+    LinkWrapper: isGatsby ? LinkWrapper : null
+  }, p));
+}));
+TooltipLinkList.displayName = "TooltipLinkList";
+TooltipLinkList.defaultProps = {
+  LinkWrapper: ListItem.defaultProps.LinkWrapper
+};

package/dist/modern/tooltip/TooltipLinkList.stories.js

@@ -0,0 +1,54 @@
+import React, { Children, cloneElement } from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { WithTooltip } from './WithTooltip';
+import { TooltipLinkList } from './TooltipLinkList';
+const onLinkClick = action('onLinkClick');
+
+const StoryLinkWrapper = ({
+  href,
+  passHref,
+  children
+}) => {
+  const child = Children.only(children);
+  return /*#__PURE__*/cloneElement(child, {
+    href: passHref && href,
+    onClick: e => {
+      e.preventDefault();
+      onLinkClick(href);
+    }
+  });
+};
+
+StoryLinkWrapper.defaultProps = {
+  passHref: false
+};
+export const links = [{
+  id: '1',
+  title: 'Link',
+  href: 'http://google.com'
+}, {
+  id: '2',
+  title: 'Link',
+  href: 'http://google.com'
+}, {
+  id: '3',
+  title: 'callback',
+  onClick: action('onClick')
+}];
+storiesOf('basics/Tooltip/TooltipLinkList', module).addDecorator(storyFn => /*#__PURE__*/React.createElement("div", {
+  style: {
+    height: '300px'
+  }
+}, /*#__PURE__*/React.createElement(WithTooltip, {
+  placement: "top",
+  trigger: "click",
+  startOpen: true,
+  tooltip: storyFn()
+}, /*#__PURE__*/React.createElement("div", null, "Tooltip")))).add('links', () => /*#__PURE__*/React.createElement(TooltipLinkList, {
+  links: links.slice(0, 2),
+  LinkWrapper: StoryLinkWrapper
+})).add('links and callback', () => /*#__PURE__*/React.createElement(TooltipLinkList, {
+  links: links,
+  LinkWrapper: StoryLinkWrapper
+}));

package/dist/modern/tooltip/TooltipMessage.js

@@ -0,0 +1,56 @@
+function _extends() { _extends = Object.assign || 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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { Link } from '../typography/link/link';
+const Title = styled.div(({
+  theme
+}) => ({
+  fontWeight: theme.typography.weight.black
+}));
+const Desc = styled.span();
+const Links = styled.div(({
+  theme
+}) => ({
+  marginTop: 8,
+  textAlign: 'center',
+  '> *': {
+    margin: '0 8px',
+    fontWeight: theme.typography.weight.black
+  }
+}));
+const Message = styled.div(({
+  theme
+}) => ({
+  color: theme.textColor,
+  lineHeight: '18px'
+}));
+const MessageWrapper = styled.div({
+  padding: 15,
+  width: 280,
+  boxSizing: 'border-box'
+});
+export const TooltipMessage = ({
+  title,
+  desc,
+  links
+}) => {
+  return /*#__PURE__*/React.createElement(MessageWrapper, null, /*#__PURE__*/React.createElement(Message, null, title && /*#__PURE__*/React.createElement(Title, null, title), desc && /*#__PURE__*/React.createElement(Desc, null, desc)), links && /*#__PURE__*/React.createElement(Links, null, links.map((_ref) => {
+    let {
+      title: linkTitle
+    } = _ref,
+        other = _objectWithoutPropertiesLoose(_ref, ["title"]);
+
+    return /*#__PURE__*/React.createElement(Link, _extends({}, other, {
+      key: linkTitle
+    }), linkTitle);
+  })));
+};
+TooltipMessage.displayName = "TooltipMessage";
+TooltipMessage.defaultProps = {
+  title: null,
+  desc: null,
+  links: null
+};

package/dist/modern/tooltip/TooltipMessage.stories.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { WithTooltip } from './WithTooltip';
+import { TooltipMessage } from './TooltipMessage';
+storiesOf('basics/Tooltip/TooltipMessage', module).addDecorator(storyFn => /*#__PURE__*/React.createElement("div", {
+  style: {
+    height: '300px'
+  }
+}, /*#__PURE__*/React.createElement(WithTooltip, {
+  placement: "top",
+  trigger: "click",
+  startOpen: true,
+  tooltip: storyFn()
+}, /*#__PURE__*/React.createElement("div", null, "Tooltip")))).add('default', () => /*#__PURE__*/React.createElement(TooltipMessage, {
+  title: "Lorem ipsum dolor sit",
+  desc: "Amet consectatur vestibulum concet durum politu coret weirom"
+})).add('with link', () => /*#__PURE__*/React.createElement(TooltipMessage, {
+  title: "Lorem ipsum dolor sit",
+  desc: "Amet consectatur vestibulum concet durum politu coret weirom",
+  links: [{
+    title: 'Continue',
+    href: 'test'
+  }]
+})).add('with links', () => /*#__PURE__*/React.createElement(TooltipMessage, {
+  title: "Lorem ipsum dolor sit",
+  desc: "Amet consectatur vestibulum concet durum politu coret weirom",
+  links: [{
+    title: 'Get more tips',
+    href: 'test'
+  }, {
+    title: 'Done',
+    href: 'test'
+  }]
+})).add('minimal message', () => /*#__PURE__*/React.createElement(TooltipMessage, {
+  desc: "Amet consectatur vestibulum concet durum politu coret weirom"
+}));

package/dist/modern/tooltip/TooltipNote.js

@@ -0,0 +1,29 @@
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { styled } from '@storybook/theming';
+const Note = styled.div(({
+  theme
+}) => ({
+  padding: '2px 6px',
+  lineHeight: '16px',
+  fontSize: 10,
+  fontWeight: theme.typography.weight.bold,
+  color: theme.color.lightest,
+  boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.3)',
+  borderRadius: 4,
+  whiteSpace: 'nowrap',
+  pointerEvents: 'none',
+  zIndex: -1,
+  background: theme.base === 'light' ? 'rgba(60, 60, 60, 0.9)' : 'rgba(20, 20, 20, 0.85)',
+  margin: 6
+}));
+export const TooltipNote = (_ref) => {
+  let {
+    note
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["note"]);
+
+  return /*#__PURE__*/React.createElement(Note, props, note);
+};
+TooltipNote.displayName = "TooltipNote";

package/dist/modern/tooltip/TooltipNote.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { WithTooltip } from './WithTooltip';
+import { TooltipNote } from './TooltipNote';
+storiesOf('basics/Tooltip/TooltipNote', module).addDecorator(storyFn => /*#__PURE__*/React.createElement("div", {
+  style: {
+    height: '300px'
+  }
+}, /*#__PURE__*/React.createElement(WithTooltip, {
+  hasChrome: false,
+  placement: "top",
+  trigger: "click",
+  startOpen: true,
+  tooltip: storyFn()
+}, /*#__PURE__*/React.createElement("div", null, "Tooltip")))).add('default', () => /*#__PURE__*/React.createElement(TooltipNote, {
+  note: "Lorem ipsum dolor"
+}));

package/dist/modern/tooltip/WithTooltip.js

@@ -0,0 +1,152 @@
+function _extends() { _extends = Object.assign || 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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useCallback, useState, useEffect } from 'react';
+import { styled } from '@storybook/theming';
+import global from 'global';
+import TooltipTrigger from 'react-popper-tooltip';
+import { Tooltip } from './Tooltip';
+const {
+  document
+} = global; // A target that doesn't speak popper
+
+const TargetContainer = styled.div`
+  display: inline-block;
+  cursor: ${props => props.mode === 'hover' ? 'default' : 'pointer'};
+`;
+const TargetSvgContainer = styled.g`
+  cursor: ${props => props.mode === 'hover' ? 'default' : 'pointer'};
+`;
+
+// Pure, does not bind to the body
+const WithTooltipPure = (_ref) => {
+  let {
+    svg,
+    trigger,
+    placement,
+    modifiers,
+    hasChrome,
+    tooltip,
+    children,
+    tooltipShown,
+    onVisibilityChange
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["svg", "trigger", "closeOnClick", "placement", "modifiers", "hasChrome", "tooltip", "children", "tooltipShown", "onVisibilityChange"]);
+
+  const Container = svg ? TargetSvgContainer : TargetContainer;
+  return /*#__PURE__*/React.createElement(TooltipTrigger, {
+    placement: placement,
+    trigger: trigger,
+    modifiers: modifiers,
+    tooltipShown: tooltipShown,
+    onVisibilityChange: onVisibilityChange,
+    tooltip: ({
+      getTooltipProps,
+      getArrowProps,
+      tooltipRef,
+      arrowRef,
+      placement: tooltipPlacement
+    }) => /*#__PURE__*/React.createElement(Tooltip, _extends({
+      hasChrome: hasChrome,
+      placement: tooltipPlacement,
+      tooltipRef: tooltipRef,
+      arrowRef: arrowRef,
+      arrowProps: getArrowProps()
+    }, getTooltipProps()), typeof tooltip === 'function' ? tooltip({
+      onHide: () => onVisibilityChange(false)
+    }) : tooltip)
+  }, ({
+    getTriggerProps,
+    triggerRef
+  }) =>
+  /*#__PURE__*/
+  // @ts-ignore
+  React.createElement(Container, _extends({
+    ref: triggerRef
+  }, getTriggerProps(), props), children));
+};
+
+WithTooltipPure.displayName = "WithTooltipPure";
+WithTooltipPure.defaultProps = {
+  svg: false,
+  trigger: 'hover',
+  closeOnClick: false,
+  placement: 'top',
+  modifiers: [{
+    name: 'preventOverflow',
+    options: {
+      padding: 8
+    }
+  }, {
+    name: 'offset',
+    options: {
+      offset: [8, 8]
+    }
+  }, {
+    name: 'arrow',
+    options: {
+      padding: 8
+    }
+  }],
+  hasChrome: true,
+  tooltipShown: false
+};
+
+const WithToolTipState = (_ref2) => {
+  let {
+    startOpen,
+    onVisibilityChange: onChange
+  } = _ref2,
+      rest = _objectWithoutPropertiesLoose(_ref2, ["startOpen", "onVisibilityChange"]);
+
+  const [tooltipShown, setTooltipShown] = useState(startOpen || false);
+  const onVisibilityChange = useCallback(visibility => {
+    if (onChange && onChange(visibility) === false) return;
+    setTooltipShown(visibility);
+  }, [onChange]);
+  useEffect(() => {
+    const hide = () => onVisibilityChange(false);
+
+    document.addEventListener('keydown', hide, false); // Find all iframes on the screen and bind to clicks inside them (waiting until the iframe is ready)
+
+    const iframes = Array.from(document.getElementsByTagName('iframe'));
+    const unbinders = [];
+    iframes.forEach(iframe => {
+      const bind = () => {
+        try {
+          if (iframe.contentWindow.document) {
+            iframe.contentWindow.document.addEventListener('click', hide);
+            unbinders.push(() => {
+              try {
+                iframe.contentWindow.document.removeEventListener('click', hide);
+              } catch (e) {// logger.debug('Removing a click listener from iframe failed: ', e);
+              }
+            });
+          }
+        } catch (e) {// logger.debug('Adding a click listener to iframe failed: ', e);
+        }
+      };
+
+      bind(); // I don't know how to find out if it's already loaded so I potentially will bind twice
+
+      iframe.addEventListener('load', bind);
+      unbinders.push(() => {
+        iframe.removeEventListener('load', bind);
+      });
+    });
+    return () => {
+      document.removeEventListener('keydown', hide);
+      unbinders.forEach(unbind => {
+        unbind();
+      });
+    };
+  });
+  return /*#__PURE__*/React.createElement(WithTooltipPure, _extends({}, rest, {
+    tooltipShown: tooltipShown,
+    onVisibilityChange: onVisibilityChange
+  }));
+};
+
+WithToolTipState.displayName = "WithToolTipState";
+export { WithTooltipPure, WithToolTipState, WithToolTipState as WithTooltip };

package/dist/modern/tooltip/WithTooltip.stories.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { styled } from '@storybook/theming';
+import { TooltipMessage } from './TooltipMessage';
+import { WithToolTipState as WithTooltip } from './WithTooltip';
+const ViewPort = styled.div({
+  height: 300
+});
+const BackgroundBox = styled.div({
+  width: 500,
+  height: 500,
+  overflowY: 'scroll',
+  background: '#eee',
+  position: 'relative'
+});
+const Spacer = styled.div({
+  height: 100
+});
+const Trigger = styled.div({
+  width: 200,
+  height: 100,
+  backgroundColor: 'red',
+  color: 'white'
+});
+
+const Tooltip = ({
+  onHide
+}) => /*#__PURE__*/React.createElement(TooltipMessage, {
+  title: "Lorem ipsum dolor sit",
+  desc: "Amet consectatur vestibulum concet durum politu coret weirom",
+  links: [{
+    title: 'Continue',
+    onClick: onHide
+  }]
+});
+
+Tooltip.displayName = "Tooltip";
+Tooltip.defaultProps = {
+  onHide: null
+};
+storiesOf('basics/Tooltip/WithTooltip', module).addDecorator(storyFn => /*#__PURE__*/React.createElement(ViewPort, null, /*#__PURE__*/React.createElement(BackgroundBox, null, /*#__PURE__*/React.createElement(Spacer, null), storyFn()))).add('simple hover', () => /*#__PURE__*/React.createElement(WithTooltip, {
+  placement: "top",
+  trigger: "hover",
+  tooltip: /*#__PURE__*/React.createElement(Tooltip, null)
+}, /*#__PURE__*/React.createElement(Trigger, null, "Hover me!"))).add('simple hover, functional', () => /*#__PURE__*/React.createElement(WithTooltip, {
+  placement: "top",
+  trigger: "hover",
+  tooltip: Tooltip
+}, /*#__PURE__*/React.createElement(Trigger, null, "Hover me!"))).add('simple click', () => /*#__PURE__*/React.createElement(WithTooltip, {
+  placement: "top",
+  trigger: "click",
+  tooltip: /*#__PURE__*/React.createElement(Tooltip, null)
+}, /*#__PURE__*/React.createElement(Trigger, null, "Click me!"))).add('simple click start open', () => /*#__PURE__*/React.createElement(WithTooltip, {
+  placement: "top",
+  trigger: "click",
+  startOpen: true,
+  tooltip: /*#__PURE__*/React.createElement(Tooltip, null)
+}, /*#__PURE__*/React.createElement(Trigger, null, "Click me!"))).add('simple click closeOnClick', () => /*#__PURE__*/React.createElement(WithTooltip, {
+  placement: "top",
+  trigger: "click",
+  closeOnClick: true,
+  tooltip: /*#__PURE__*/React.createElement(Tooltip, null)
+}, /*#__PURE__*/React.createElement(Trigger, null, "Click me!"))).add('no chrome', () => /*#__PURE__*/React.createElement(WithTooltip, {
+  placement: "top",
+  trigger: "click",
+  hasChrome: false,
+  tooltip: /*#__PURE__*/React.createElement(Tooltip, null)
+}, /*#__PURE__*/React.createElement(Trigger, null, "Click me!")));

package/dist/modern/tooltip/lazy-WithTooltip.js

@@ -0,0 +1,15 @@
+import React, { Suspense } from 'react';
+const LazyWithTooltip = /*#__PURE__*/React.lazy(() => import('./WithTooltip').then(mod => ({
+  default: mod.WithTooltip
+})));
+export const WithTooltip = props => /*#__PURE__*/React.createElement(Suspense, {
+  fallback: /*#__PURE__*/React.createElement("div", null)
+}, /*#__PURE__*/React.createElement(LazyWithTooltip, props));
+WithTooltip.displayName = "WithTooltip";
+const LazyWithTooltipPure = /*#__PURE__*/React.lazy(() => import('./WithTooltip').then(mod => ({
+  default: mod.WithTooltipPure
+})));
+export const WithTooltipPure = props => /*#__PURE__*/React.createElement(Suspense, {
+  fallback: /*#__PURE__*/React.createElement("div", null)
+}, /*#__PURE__*/React.createElement(LazyWithTooltipPure, props));
+WithTooltipPure.displayName = "WithTooltipPure";