@rescui/tooltip 0.11.2 → 0.12.0

package/README.md

@@ -1,3 +1,5 @@
 # Tooltip
 
-* [Usage examples](./docs/demo.md)
+## LLM
+
+To get the docs for the LLM, check out [this index](./llm/index.md).

package/lib/index.css

@@ -1,10 +1,10 @@
-._tooltip_m8qern_5{
+._tooltip_rbs2oy_5{
   position:relative;
 }
-._closing_m8qern_9{
+._closing_rbs2oy_9{
   pointer-events:none;
 }
-._content_m8qern_13{
+._content_rbs2oy_13{
   --rs-theme-dark:1;
   --_rs-tooltip-border-width:1px;
 
@@ -76,33 +76,33 @@
   transition:opacity 300ms var(--rs-transition-function, ease), transform 300ms var(--rs-transition-function, ease);
   transform:translate(0, 0);
 }
-[data-popper-placement='top-end'] ._content_m8qern_13,
-  [data-popper-placement='bottom-end'] ._content_m8qern_13{
+[data-popper-placement='top-end'] ._content_rbs2oy_13,
+  [data-popper-placement='bottom-end'] ._content_rbs2oy_13{
     margin-right:0;
   }
-[data-popper-placement='top-start'] ._content_m8qern_13,
-  [data-popper-placement='bottom-start'] ._content_m8qern_13{
+[data-popper-placement='top-start'] ._content_rbs2oy_13,
+  [data-popper-placement='bottom-start'] ._content_rbs2oy_13{
     margin-left:0;
   }
-[data-popper-placement='left-end'] ._content_m8qern_13,
-  [data-popper-placement='right-end'] ._content_m8qern_13{
+[data-popper-placement='left-end'] ._content_rbs2oy_13,
+  [data-popper-placement='right-end'] ._content_rbs2oy_13{
     margin-bottom:0;
   }
-[data-popper-placement='left-start'] ._content_m8qern_13,
-  [data-popper-placement='right-start'] ._content_m8qern_13{
+[data-popper-placement='left-start'] ._content_rbs2oy_13,
+  [data-popper-placement='right-start'] ._content_rbs2oy_13{
     margin-top:0;
   }
-._initial_m8qern_55 ._content_m8qern_13{
+._initial_rbs2oy_55 ._content_rbs2oy_13{
     transition:none;
   }
-._closing_m8qern_9 ._content_m8qern_13{
+._closing_rbs2oy_9 ._content_rbs2oy_13{
     transition-duration:200ms, 200ms;
   }
-._initial_m8qern_55 ._content_m8qern_13,
-  ._closing_m8qern_9 ._content_m8qern_13{
+._initial_rbs2oy_55 ._content_rbs2oy_13,
+  ._closing_rbs2oy_9 ._content_rbs2oy_13{
     opacity:0;
   }
-._outerThemeLight_m8qern_69 ._content_m8qern_13{
+._outerThemeLight_rbs2oy_69 ._content_rbs2oy_13{
     --rs-color-primary-dark-theme:var(--rs-color-primary-light-theme);
     --rs-color-primary-dim-dark-theme:var(--rs-color-primary-dim-light-theme);
     --rs-color-primary-fog-dark-theme:var(--rs-color-primary-fog-light-theme);
@@ -113,7 +113,7 @@
       --rs-color-primary-t-fog-light-theme
     );
   }
-._outerThemeDark_m8qern_82 ._content_m8qern_13{
+._outerThemeDark_rbs2oy_82 ._content_rbs2oy_13{
     --rs-color-primary-light-theme:var(--rs-color-primary-dark-theme);
     --rs-color-primary-dim-light-theme:var(--rs-color-primary-dim-dark-theme);
     --rs-color-primary-fog-light-theme:var(--rs-color-primary-fog-dark-theme);
@@ -124,20 +124,20 @@
       --rs-color-primary-t-fog-dark-theme
     );
   }
-._initial_m8qern_55[data-popper-placement^='top'] ._content_m8qern_13, ._closing_m8qern_9[data-popper-placement^='top'] ._content_m8qern_13{
+._initial_rbs2oy_55[data-popper-placement^='top'] ._content_rbs2oy_13, ._closing_rbs2oy_9[data-popper-placement^='top'] ._content_rbs2oy_13{
     transform:translate(0, 10px);
   }
-._initial_m8qern_55[data-popper-placement^='right'] ._content_m8qern_13, ._closing_m8qern_9[data-popper-placement^='right'] ._content_m8qern_13{
+._initial_rbs2oy_55[data-popper-placement^='right'] ._content_rbs2oy_13, ._closing_rbs2oy_9[data-popper-placement^='right'] ._content_rbs2oy_13{
     transform:translate(-10px, 0);
   }
-._initial_m8qern_55[data-popper-placement^='bottom'] ._content_m8qern_13, ._closing_m8qern_9[data-popper-placement^='bottom'] ._content_m8qern_13{
+._initial_rbs2oy_55[data-popper-placement^='bottom'] ._content_rbs2oy_13, ._closing_rbs2oy_9[data-popper-placement^='bottom'] ._content_rbs2oy_13{
     transform:translate(0, -10px);
   }
-._initial_m8qern_55[data-popper-placement^='left'] ._content_m8qern_13, ._closing_m8qern_9[data-popper-placement^='left'] ._content_m8qern_13{
+._initial_rbs2oy_55[data-popper-placement^='left'] ._content_rbs2oy_13, ._closing_rbs2oy_9[data-popper-placement^='left'] ._content_rbs2oy_13{
     transform:translate(10px, 0);
   }
-._trigger_m8qern_114:focus-visible,
-._trigger_m8qern_114:focus[data-focus-method='key']{
+._trigger_rbs2oy_114:focus-visible,
+._trigger_rbs2oy_114:focus[data-focus-method='key']{
   outline:none;
 
   box-shadow:var(--rs-color-primary-t-dim-light-theme) 0 0 0 4px;

package/lib/tooltip.js

@@ -14,11 +14,27 @@ const HIDE_TIMEOUT = 500;
 const Portal = _ref => {
   let {
     children,
-    target = typeof window !== 'undefined' ? document.body : undefined
+    target
   } = _ref;
   return target ? /*#__PURE__*/ReactDOM.createPortal(children, target) : null;
 };
 
+const TooltipPortal = _ref2 => {
+  let {
+    children,
+    renderBesideTrigger,
+    target
+  } = _ref2;
+
+  if (renderBesideTrigger) {
+    return children;
+  }
+
+  return /*#__PURE__*/React.createElement(Portal, {
+    target: target
+  }, children);
+};
+
 const isNode = maybeNode => {
   switch (typeof maybeNode) {
     case 'string':
@@ -45,7 +61,7 @@ const OUTER_THEME_STYLES = {
   light: styles.outerThemeLight,
   dark: styles.outerThemeDark
 };
-const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     setTriggerRef,
     targetComponent,
@@ -53,7 +69,7 @@ const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     handleMouseEnterTarget,
     handleMouseLeaveTarget,
     children
-  } = _ref2;
+  } = _ref3;
   const eventListeners = !isControlled ? {
     onMouseEnter: handleMouseEnterTarget,
     onMouseLeave: handleMouseLeaveTarget,
@@ -103,7 +119,7 @@ const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 });
 TriggerRenderer.displayName = 'TriggerRenderer'; // eslint-disable-next-line complexity
 
-const Tooltip = _ref3 => {
+const Tooltip = _ref4 => {
   let {
     children,
     targetComponent = 'span',
@@ -116,7 +132,7 @@ const Tooltip = _ref3 => {
     fallbackPlacements = ['top', 'bottom'],
     disableHideDelay,
     renderBesideTrigger = false
-  } = _ref3;
+  } = _ref4;
   const {
     tooltipZIndex
   } = useLayeringContext();
@@ -138,8 +154,8 @@ const Tooltip = _ref3 => {
     setIsFirstRender(false);
   }, []);
   isVisible = isFirstRender && !renderBesideTrigger ? false : isVisible;
+  const ownerDocument = triggerRef?.ownerDocument;
   const isOpen = isVisible || isTooltipHovered;
-  const PortalResolved = renderBesideTrigger ? React.Fragment : Portal;
   useEffect(() => {
     if (schedulePopperUpdateRef.current) {
       schedulePopperUpdateRef.current();
@@ -176,10 +192,10 @@ const Tooltip = _ref3 => {
       setIsInitial(true);
     }
   }, [isExists]);
-  const disableInitialFlag = useCallback(_ref4 => {
+  const disableInitialFlag = useCallback(_ref5 => {
     let {
       state
-    } = _ref4;
+    } = _ref5;
     const el = state.elements.popper; // force layout phase
     // to make sure that the dom has registered the initial
     // styles with resolved placement (for `auto` placement)
@@ -192,7 +208,8 @@ const Tooltip = _ref3 => {
 
   useEffect(() => {
     if (!isInitial && contentRef.current) {
-      const isTransitionDisabled = window.getComputedStyle(contentRef.current).transitionDuration === '0s';
+      const ownerWindow = contentRef.current.ownerDocument.defaultView;
+      const isTransitionDisabled = ownerWindow?.getComputedStyle(contentRef.current).transitionDuration === '0s';
 
       if (isTransitionDisabled) {
         handleAnimationEnd();
@@ -207,9 +224,12 @@ const Tooltip = _ref3 => {
     // But in this specific context, because of the nature of the state-ref "triggerRef",
     // we are sure that the tooltip wouldn't be rendered on the first client render.
     // Therefore, the first render on the client will be the same as on the server.
-    const triggerStyles = getComputedStyle(triggerRef);
-    themeFromCss = extractThemeFromCss(triggerStyles);
-    primaryColors = extractPrimaryColors(triggerStyles);
+    const triggerStyles = ownerDocument?.defaultView?.getComputedStyle(triggerRef);
+
+    if (triggerStyles) {
+      themeFromCss = extractThemeFromCss(triggerStyles);
+      primaryColors = extractPrimaryColors(triggerStyles);
+    }
   }
 
   const {
@@ -217,10 +237,10 @@ const Tooltip = _ref3 => {
     noProvider
   } = useContext(ThemeContext);
   const theme = noProvider ? themeFromCss : themeFromContext;
-  const calcOffset = useCallback(_ref5 => {
+  const calcOffset = useCallback(_ref6 => {
     let {
       placement: offsetPlacement
-    } = _ref5;
+    } = _ref6;
 
     if (_includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'left') || _includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'right')) {
       return [0, sparse ? 16 : 8];
@@ -260,7 +280,10 @@ const Tooltip = _ref3 => {
     isControlled: isControlled,
     handleMouseEnterTarget: handleMouseEnterTarget,
     handleMouseLeaveTarget: handleMouseLeaveTarget
-  }, children), tooltipShouldBeRendered && /*#__PURE__*/React.createElement(PortalResolved, null, /*#__PURE__*/React.createElement("span", {
+  }, children), tooltipShouldBeRendered && /*#__PURE__*/React.createElement(TooltipPortal, {
+    renderBesideTrigger: renderBesideTrigger,
+    target: ownerDocument?.body
+  }, /*#__PURE__*/React.createElement("span", {
     className: cn(styles.tooltip, isInitial && styles.initial, isClosing && styles.closing, OUTER_THEME_STYLES[theme], className),
     ref: setPopperRef,
     style: { ...popperStyles.popper,

package/lib/tooltip.p.module.css.js

@@ -1,10 +1,10 @@
 var styles = {
-  "tooltip": "_tooltip_m8qern_5",
-  "closing": "_closing_m8qern_9",
-  "content": "_content_m8qern_13",
-  "initial": "_initial_m8qern_55",
-  "outerThemeLight": "_outerThemeLight_m8qern_69",
-  "outerThemeDark": "_outerThemeDark_m8qern_82",
-  "trigger": "_trigger_m8qern_114"
+  "tooltip": "_tooltip_rbs2oy_5",
+  "closing": "_closing_rbs2oy_9",
+  "content": "_content_rbs2oy_13",
+  "initial": "_initial_rbs2oy_55",
+  "outerThemeLight": "_outerThemeLight_rbs2oy_69",
+  "outerThemeDark": "_outerThemeDark_rbs2oy_82",
+  "trigger": "_trigger_rbs2oy_114"
 };
 export { styles as default };

package/llm/components/tooltip.md

@@ -0,0 +1,217 @@
+# Tooltip
+
+Tooltips display informative text when users hover over, focus on, or click an element.
+
+## Usage
+
+#### Simple
+
+```tsx
+import { Tooltip } from '@rescui/tooltip';
+
+<Tooltip content="Simple text">Tooltip will appear on mouseIn</Tooltip>;
+```
+
+#### With Icon
+
+```tsx
+import { Tooltip } from '@rescui/tooltip';
+import { InfoIcon } from '@rescui/icons';
+
+<Tooltip
+  sparse={false}
+  placement="right-start"
+  content="Based on an average of 260 working days per calendar year."
+>
+  <InfoIcon theme="light" />
+</Tooltip>;
+```
+
+#### Controlled
+
+```tsx
+import { Tooltip } from '@rescui/tooltip';
+import { useState } from 'react';
+import { Checkbox } from '@rescui/checkbox';
+
+const MyTooltip = () => {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Tooltip
+      sparse={false}
+      isVisible={checked}
+      placement="top-start"
+      content="Thank you!"
+    >
+      <div>
+        <Checkbox
+          checked={checked}
+          onChange={e => setChecked(e.target.checked)}
+        >
+          Please check me
+        </Checkbox>
+      </div>
+    </Tooltip>
+  );
+};
+
+render(<MyTooltip />);
+```
+
+#### With links inside
+
+Use `renderBesideTrigger` property to allow tab-focusing on the content inside tooltip.
+
+```tsx
+import { Tooltip } from '@rescui/tooltip';
+import { textCn } from '@rescui/typography';
+
+<Tooltip
+  placement="bottom"
+  renderBesideTrigger
+  content={
+    <span>
+      Content with a{' '}
+      <a className={textCn('rs-link')} href="">
+        link
+      </a>{' '}
+      and a second{' '}
+      <a className={textCn('rs-link')} href="">
+        link
+      </a>
+    </span>
+  }
+>
+  <span>Tooltip with link will appear on mouseIn</span>
+</Tooltip>;
+```
+
+```tsx
+import { Tooltip } from '@rescui/tooltip';
+import { textCn } from '@rescui/typography';
+
+<Tooltip
+  renderBesideTrigger
+  content={
+    <span>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices
+      ullamcorper placerat. Etiam tincidunt ornare est, in convallis nibh
+      laoreet ut.{' '}
+      <a className={textCn('rs-link')} href="">
+        Quisque id feugiat tortor.
+      </a>{' '}
+      Maecenas nisl nibh, rutrum laoreet consectetur fermentum, imperdiet quis
+      lacus. Maecenas a tristique purus. Duis porta felis nisl, ut eleifend nibh
+      ultricies sed. Pellentesque habitant morbi tristique senectus et netus et
+      malesuada fames ac turpis egestas. Donec vitae pellentesque augue.
+    </span>
+  }
+>
+  <span>Tooltip with long text will appear on mouseIn</span>
+</Tooltip>;
+```
+
+#### Showing tooltip on click
+
+```tsx
+import { useState } from 'react';
+import { Tooltip } from '@rescui/tooltip';
+
+const MyTooltip = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Tooltip content="Simple text" isVisible={isOpen}>
+      <span onClick={() => setIsOpen(val => !val)}>
+        Tooltip will appear and disappear on click
+      </span>
+    </Tooltip>
+  );
+};
+
+render(<MyTooltip />);
+```
+
+#### Tooltip with dark background
+
+```tsx
+import { Tooltip } from '@rescui/tooltip';
+import { InfoIcon } from '@rescui/icons';
+import { textCn } from '@rescui/typography';
+
+<div className="dark-tile" style={{ maxWidth: 400 }}>
+  <h3 className={textCn('rs-h3')}>The drive to develop</h3>
+  <p className={textCn('rs-text-2')} style={{ marginTop: 24 }}>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque
+    commodi cumque delectus, distinctio dolorum esse et id illo in incidunt ipsa
+    minus necessitatibus officia reiciendis reprehenderit, sed sint. Suscipit!
+  </p>
+
+  <Tooltip
+    renderBesideTrigger
+    placement="top"
+    content={
+      <span>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices
+        ullamcorper placerat. Etiam tincidunt ornare est, in convallis nibh
+        laoreet ut.{' '}
+        <a className={textCn('rs-link')} href="">
+          Quisque id feugiat tortor.
+        </a>{' '}
+        Maecenas nisl nibh, rutrum laoreet consectetur fermentum, imperdiet quis
+        lacus.
+      </span>
+    }
+  >
+    <InfoIcon theme="dark" style={{ marginTop: 16 }} />
+  </Tooltip>
+</div>;
+```
+
+```postcss
+.dark-tile {
+  --dark-tile-border-width: 1px;
+  --rs-theme-dark: 1;
+
+  position: relative;
+
+  display: block;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: var(--dark-tile-border-width) solid var(--rs-color-white-t20);
+  border-radius: 8px;
+
+  background-color: var(--rs-color-grey-90);
+
+  padding: calc(24px - var(--dark-tile-border-width));
+}
+```
+
+#### Different placements
+
+bottom-start
+
+bottom
+
+bottom-end
+
+right-start
+
+right
+
+right-end
+
+left-start
+
+left
+
+left-end
+
+top-start
+
+top
+
+top-end

package/llm/index.md

@@ -0,0 +1,2 @@
+- Components and Hooks
+  - [Tooltip](./components/tooltip.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/tooltip",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -9,6 +9,7 @@
   "src:main": "src/index.ts",
   "files": [
     "lib",
+    "llm",
     "LICENSE.txt"
   ],
   "publishConfig": {
@@ -27,14 +28,14 @@
     "react-dom": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.1",
-    "@rescui/icons": "^1.8.1",
+    "@rescui/colors": "^0.3.2",
+    "@rescui/icons": "^1.8.2",
     "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.1"
+    "@rescui/typography": "^0.27.2"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "a04f6790abce8e72834eedce3512ee83513c5e78"
+  "gitHead": "7aade8fced69c4a1ac61078a1daf2c1cd4f5a1c9"
 }