@rescui/tooltip 0.10.13 → 0.11.1-RUI-293-Update-menu-component-7a032357e.20

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/css-vars-utils.d.ts

@@ -1,3 +1,3 @@
-export declare const extractPrimaryColors: (styles: CSSStyleDeclaration) => Record<string, string>;
-/** Check out `@rescui/colors/src/public-api.p.css` file */
-export declare const extractThemeFromCss: (styles: CSSStyleDeclaration) => "dark" | "light";
+export declare const extractPrimaryColors: (styles: CSSStyleDeclaration) => Record<string, string>;
+/** Check out `@rescui/colors/src/public-api.p.css` file */
+export declare const extractThemeFromCss: (styles: CSSStyleDeclaration) => "dark" | "light";

package/lib/index.css

@@ -1,10 +1,10 @@
-._tooltip_2c0c32_5{
+._tooltip_1p1ole3_5{
   position:relative;
 }
-._closing_2c0c32_9{
+._closing_1p1ole3_9{
   pointer-events:none;
 }
-._content_2c0c32_13{
+._content_1p1ole3_13{
   --rs-theme-dark:1;
   --_rs-tooltip-border-width:1px;
 
@@ -73,36 +73,36 @@
   color:#FFFFFF;
   background-color:#303033;
 
-  transition:opacity 300ms, transform 300ms;
+  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_2c0c32_13,
-  [data-popper-placement='bottom-end'] ._content_2c0c32_13{
+[data-popper-placement='top-end'] ._content_1p1ole3_13,
+  [data-popper-placement='bottom-end'] ._content_1p1ole3_13{
     margin-right:0;
   }
-[data-popper-placement='top-start'] ._content_2c0c32_13,
-  [data-popper-placement='bottom-start'] ._content_2c0c32_13{
+[data-popper-placement='top-start'] ._content_1p1ole3_13,
+  [data-popper-placement='bottom-start'] ._content_1p1ole3_13{
     margin-left:0;
   }
-[data-popper-placement='left-end'] ._content_2c0c32_13,
-  [data-popper-placement='right-end'] ._content_2c0c32_13{
+[data-popper-placement='left-end'] ._content_1p1ole3_13,
+  [data-popper-placement='right-end'] ._content_1p1ole3_13{
     margin-bottom:0;
   }
-[data-popper-placement='left-start'] ._content_2c0c32_13,
-  [data-popper-placement='right-start'] ._content_2c0c32_13{
+[data-popper-placement='left-start'] ._content_1p1ole3_13,
+  [data-popper-placement='right-start'] ._content_1p1ole3_13{
     margin-top:0;
   }
-._initial_2c0c32_54 ._content_2c0c32_13{
+._initial_1p1ole3_55 ._content_1p1ole3_13{
     transition:none;
   }
-._closing_2c0c32_9 ._content_2c0c32_13{
+._closing_1p1ole3_9 ._content_1p1ole3_13{
     transition-duration:200ms, 200ms;
   }
-._initial_2c0c32_54 ._content_2c0c32_13,
-  ._closing_2c0c32_9 ._content_2c0c32_13{
+._initial_1p1ole3_55 ._content_1p1ole3_13,
+  ._closing_1p1ole3_9 ._content_1p1ole3_13{
     opacity:0;
   }
-._outerThemeLight_2c0c32_68 ._content_2c0c32_13{
+._outerThemeLight_1p1ole3_69 ._content_1p1ole3_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_2c0c32_81 ._content_2c0c32_13{
+._outerThemeDark_1p1ole3_82 ._content_1p1ole3_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_2c0c32_54[data-popper-placement^='top'] ._content_2c0c32_13, ._closing_2c0c32_9[data-popper-placement^='top'] ._content_2c0c32_13{
+._initial_1p1ole3_55[data-popper-placement^='top'] ._content_1p1ole3_13, ._closing_1p1ole3_9[data-popper-placement^='top'] ._content_1p1ole3_13{
     transform:translate(0, 10px);
   }
-._initial_2c0c32_54[data-popper-placement^='right'] ._content_2c0c32_13, ._closing_2c0c32_9[data-popper-placement^='right'] ._content_2c0c32_13{
+._initial_1p1ole3_55[data-popper-placement^='right'] ._content_1p1ole3_13, ._closing_1p1ole3_9[data-popper-placement^='right'] ._content_1p1ole3_13{
     transform:translate(-10px, 0);
   }
-._initial_2c0c32_54[data-popper-placement^='bottom'] ._content_2c0c32_13, ._closing_2c0c32_9[data-popper-placement^='bottom'] ._content_2c0c32_13{
+._initial_1p1ole3_55[data-popper-placement^='bottom'] ._content_1p1ole3_13, ._closing_1p1ole3_9[data-popper-placement^='bottom'] ._content_1p1ole3_13{
     transform:translate(0, -10px);
   }
-._initial_2c0c32_54[data-popper-placement^='left'] ._content_2c0c32_13, ._closing_2c0c32_9[data-popper-placement^='left'] ._content_2c0c32_13{
+._initial_1p1ole3_55[data-popper-placement^='left'] ._content_1p1ole3_13, ._closing_1p1ole3_9[data-popper-placement^='left'] ._content_1p1ole3_13{
     transform:translate(10px, 0);
   }
-._trigger_2c0c32_113:focus-visible,
-._trigger_2c0c32_113:focus[data-focus-method='key']{
+._trigger_1p1ole3_114:focus-visible,
+._trigger_1p1ole3_114:focus[data-focus-method='key']{
   outline:none;
 
   box-shadow:var(--rs-color-primary-t-dim-light-theme) 0 0 0 4px;

package/lib/index.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-/**
- * @deprecated use named import instead
- */
-declare const DefaultTooltip: import("react").FC<import("./tooltip").TooltipProps>;
-export default DefaultTooltip;
-export { Tooltip } from './tooltip';
-export type { TooltipProps, TooltipPlacement } from './tooltip';
+/**
+ * @deprecated use named import instead
+ */
+declare const DefaultTooltip: import("react").FC<import("./tooltip").TooltipProps>;
+export default DefaultTooltip;
+export { Tooltip } from './tooltip';
+export type { TooltipProps, TooltipPlacement } from './tooltip';

package/lib/index.js

@@ -1,8 +1,8 @@
 import './index.css';
 import { Tooltip } from './tooltip.js';
 export { Tooltip } from './tooltip.js';
-/**
- * @deprecated use named import instead
+/**
+ * @deprecated use named import instead
  */
 
 const DefaultTooltip = Tooltip;

package/lib/tooltip.d.ts

@@ -1,68 +1,68 @@
-import React from 'react';
-import { StrictModifiers } from '@popperjs/core/lib/types';
-import type { Placement } from '@popperjs/core/lib/enums';
-interface TriggerTargetRequiredProps {
-    ref: React.Ref<HTMLElement>;
-}
-interface TriggerTargetAdditionalProps {
-    onBlur: (...args: unknown[]) => void;
-    tabIndex: number;
-    onMouseEnter: (...args: unknown[]) => void;
-    onMouseLeave: (...args: unknown[]) => void;
-    onFocus: (...args: unknown[]) => void;
-}
-declare type TriggerTargetProps = TriggerTargetRequiredProps | (TriggerTargetRequiredProps & TriggerTargetAdditionalProps);
-declare type ChildrenFunc = (arg: {
-    targetProps: TriggerTargetProps;
-}) => React.ReactNode;
-export declare type TooltipChildren = ChildrenFunc | React.ReactNode;
-export declare type TooltipPlacement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
-export interface TooltipProps {
-    /**
-     * Target node or `({targetProps}) => node` function
-     * @type (arg: { targetProps: TriggerTargetProps; }) => ReactNode | ReactNode
-     */
-    children: TooltipChildren;
-    /**
-     * Wrapper component type if children is not a function
-     */
-    targetComponent?: string;
-    /**
-     * Tooltip content
-     */
-    content?: React.ReactNode;
-    className?: string;
-    /**
-     * "External" state control
-     */
-    isVisible?: boolean;
-    /**
-     * Pooper.js [modifiers](https://popper.js.org/docs/v2/modifiers/) config
-     */
-    modifiers?: StrictModifiers[];
-    /**
-     * Please use only `auto`, `top-end`, `right`, `left`, `right-start` or `left-start` to be compliant with styleguide
-     */
-    placement?: TooltipPlacement;
-    /**
-     * When no space is available on the preferred placement, the tooltip will test
-     * the ones provided in the list, and use the first useful one.
-     * See [docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements).
-     */
-    fallbackPlacements?: Placement[];
-    /**
-     * Disable timeout before hide tooltip after mouse left target,
-     * use with cation, it can make impossible to click on links inside tooltip
-     */
-    disableHideDelay?: boolean;
-    /** increase offset from the target */
-    sparse?: boolean;
-    /**
-     * If set to true, the tooltip will be rendered adjacent to its triggering element.
-     * If false or undefined, the tooltip will render at the end of the `document.body` element.
-     * Should be used when the tooltip content contains interactive elements (e.g. links).
-     */
-    renderBesideTrigger?: boolean;
-}
-export declare const Tooltip: React.FC<TooltipProps>;
-export default Tooltip;
+import React from 'react';
+import { StrictModifiers } from '@popperjs/core/lib/types';
+import type { Placement } from '@popperjs/core/lib/enums';
+interface TriggerTargetRequiredProps {
+    ref: React.Ref<HTMLElement>;
+}
+interface TriggerTargetAdditionalProps {
+    onBlur: (...args: unknown[]) => void;
+    tabIndex: number;
+    onMouseEnter: (...args: unknown[]) => void;
+    onMouseLeave: (...args: unknown[]) => void;
+    onFocus: (...args: unknown[]) => void;
+}
+type TriggerTargetProps = TriggerTargetRequiredProps | (TriggerTargetRequiredProps & TriggerTargetAdditionalProps);
+type ChildrenFunc = (arg: {
+    targetProps: TriggerTargetProps;
+}) => React.ReactNode;
+export type TooltipChildren = ChildrenFunc | React.ReactNode;
+export type TooltipPlacement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
+export interface TooltipProps {
+    /**
+     * Target node or `({targetProps}) => node` function
+     * @type (arg: { targetProps: TriggerTargetProps; }) => ReactNode | ReactNode
+     */
+    children: TooltipChildren;
+    /**
+     * Wrapper component type if children is not a function
+     */
+    targetComponent?: string;
+    /**
+     * Tooltip content
+     */
+    content?: React.ReactNode;
+    className?: string;
+    /**
+     * "External" state control
+     */
+    isVisible?: boolean;
+    /**
+     * Pooper.js [modifiers](https://popper.js.org/docs/v2/modifiers/) config
+     */
+    modifiers?: StrictModifiers[];
+    /**
+     * Please use only `auto`, `top-end`, `right`, `left`, `right-start` or `left-start` to be compliant with styleguide
+     */
+    placement?: TooltipPlacement;
+    /**
+     * When no space is available on the preferred placement, the tooltip will test
+     * the ones provided in the list, and use the first useful one.
+     * See [docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements).
+     */
+    fallbackPlacements?: Placement[];
+    /**
+     * Disable timeout before hide tooltip after mouse left target,
+     * use with cation, it can make impossible to click on links inside tooltip
+     */
+    disableHideDelay?: boolean;
+    /** increase offset from the target */
+    sparse?: boolean;
+    /**
+     * If set to true, the tooltip will be rendered adjacent to its triggering element.
+     * If false or undefined, the tooltip will render at the end of the `document.body` element.
+     * Should be used when the tooltip content contains interactive elements (e.g. links).
+     */
+    renderBesideTrigger?: boolean;
+}
+export declare const Tooltip: React.FC<TooltipProps>;
+export default Tooltip;

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

@@ -1,10 +1,10 @@
 var styles = {
-  "tooltip": "_tooltip_2c0c32_5",
-  "closing": "_closing_2c0c32_9",
-  "content": "_content_2c0c32_13",
-  "initial": "_initial_2c0c32_54",
-  "outerThemeLight": "_outerThemeLight_2c0c32_68",
-  "outerThemeDark": "_outerThemeDark_2c0c32_81",
-  "trigger": "_trigger_2c0c32_113"
+  "tooltip": "_tooltip_1p1ole3_5",
+  "closing": "_closing_1p1ole3_9",
+  "content": "_content_1p1ole3_13",
+  "initial": "_initial_1p1ole3_55",
+  "outerThemeLight": "_outerThemeLight_1p1ole3_69",
+  "outerThemeDark": "_outerThemeDark_1p1ole3_82",
+  "trigger": "_trigger_1p1ole3_114"
 };
 export { styles as default };

package/lib/use-tooltip-state.d.ts

@@ -1,7 +1,7 @@
-export declare enum TOOLTIP_STATES {
-    OPENING = "OPENING",
-    OPEN = "OPEN",
-    CLOSING = "CLOSING",
-    CLOSE = "CLOSE"
-}
-export declare function useTooltipState(isOpen: boolean): [() => void, TOOLTIP_STATES];
+export declare enum TOOLTIP_STATES {
+    OPENING = "OPENING",
+    OPEN = "OPEN",
+    CLOSING = "CLOSING",
+    CLOSE = "CLOSE"
+}
+export declare function useTooltipState(isOpen: boolean): [() => void, TOOLTIP_STATES];

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.10.13",
+  "version": "0.11.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
   "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.0",
-    "@rescui/icons": "^1.7.5",
-    "@rescui/scripts": "^0.5.1",
-    "@rescui/typography": "^0.26.0"
+    "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-7a032357e.55+7a032357e",
+    "@rescui/icons": "1.7.7-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
+    "@rescui/scripts": "0.5.2",
+    "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "faa7a838502974c16bdf773ab001002d1b8dcca8"
+  "gitHead": "7a032357e8f31abbf69e18aa6b7ef2d75e40f42e"
 }