react-tooltip 5.0.0-beta.1 → 5.0.0-beta.2

package/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx

@@ -1,119 +0,0 @@
----
-sidebar_position: 4
----
-
-# Basic examples V4 -> V5
-
-import { Tooltip } from 'react-tooltip'
-import 'react-tooltip/dist/react-tooltip.css'
-
-export const TooltipAnchor = ({ children, id, ...rest }) => {
-  return (
-    <span
-      id={id}
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '60px',
-        height: '60px',
-        borderRadius: '60px',
-        color: '#222',
-        background: 'rgba(255, 255, 255, 1)',
-        cursor: 'pointer',
-        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
-        border: '1px solid #333',
-      }}
-      {...rest}
-    >
-      {children}
-    </span>
-  )
-}
-
-### V4 or less
-
-```jsx
-import ReactTooltip from 'react-tooltip';
-
-<a data-tip="hello world!" data-for="tooltip"> ◕‿‿◕ </a>
-
-<ReactTooltip id="tooltip" place="top" type="dark" />
-```
-
-(v4) `data-tip` = `data-content` (v5)
-
-- `V4` - CSS styles are built-in and injected by tooltip into the header (not a good practice but convenient), [issues in GitHub](https://github.com/ReactTooltip/react-tooltip/issues?q=is%3Aissue+header)
-- `V5` - CSS styles are optional and can be imported or not to the project
-
-### V5 - props option
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css'
-
-<a id="props-basic"> ◕‿‿◕ </a>
-
-<Tooltip anchorId="props-basic" content="hello world!" />
-```
-
-<TooltipAnchor id="props-basic">◕‿‿◕</TooltipAnchor>
-<Tooltip anchorId="props-basic" content="hello world!" />
-
-### V5 - data attributes
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="attributes-basic" data-content="hello world!"> ◕‿‿◕ </a>
-
-<Tooltip anchorId="attributes-basic" />
-```
-
-<TooltipAnchor id="attributes-basic" data-tooltip-content="hello world!">
-  ◕‿‿◕
-</TooltipAnchor>
-<Tooltip anchorId="attributes-basic" />
-
----
-
-# Colors
-
-### V4 or less - type
-
-```jsx
-import ReactTooltip from 'react-tooltip';
-
-<a data-tip="hello world!" data-for="tooltip"> ◕‿‿◕ </a>
-
-<ReactTooltip id="tooltip" place="top" type="success" />
-```
-
-(v4) `type` = `variant` (v5)
-
-### V5 - variant
-
-Available values `dark` | `light` | `success` | `warning` | `error` | `info`
-
-```jsx
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
-
-<a id="attributes-variant" data-tooltip-content="hello world!" data-tooltip-variant="success"> ◕‿‿◕ </a>
-
-<Tooltip anchorId="attributes-variant" />
-```
-
-<TooltipAnchor
-  id="attributes-variant"
-  data-tooltip-content="hello world!"
-  data-tooltip-variant="success"
->
-  ◕‿‿◕
-</TooltipAnchor>
-<Tooltip anchorId="attributes-variant" />
-
----
-
-Please see [all V5 Options here](../options.mdx).

package/docs/docs/upgrade-guide/changelog-v4-v5.md

@@ -1,86 +0,0 @@
----
-sidebar_position: 1
----
-
-# Changelog V4 -> V5
-
-If you are using V4 and want to use V5, please read this doc.
-
-## From V4 to V5
-
-V4 was a great react tooltip component but was built a few years ago, he was built with react class components and it's hard to maintain and to the community give contributions, so, with this in mind, we build a new version of react tooltip using [float-ui](https://floating-ui.com/) behind the scenes. This gives a great improvement in performance and in a new and easier code to let the community contribute to the project.
-
-## Improvements
-
-- Dropped package dependency `uuid`
-- - Using React `useId` - [Docs](https://reactjs.org/docs/hooks-reference.html#useid)
-- - - Unfortunately `useId` was introduced only into React v18, so, that will be the minimum necessary version of React to V5
-- Dropped package dependency `prop-types`
-- V5 is written in TypeScript
-- V5 has minified and unminified files available to be used as you want
-
-## Break Changes
-
-- All data attributes now has `tooltip` into his name
-- Default Padding changed from `padding: 8px 21px;` to `padding: 8px 16px;`
-- Exported module now is `Tooltip` instead of `ReactTooltip`
-- - If you already have a `Tooltip` component in your application and want to explicitly declare this is `ReactTooltip`, just `import { Tooltip as ReactTooltip } from "react-tooltip"`
-- CSS import is now optional, so, you can modify and/or add any styling to your floating tooltip element
-- `data-tip` attribute now is `data-content`
-- `getContent` prop now doesn't accept `any` anymore, just a `function`
-- default behavior of tooltip now is `solid` instead of `float`
-
-## New Props
-
-- [x] classNameArrow
-- [x] events - `data-events` -`['hover', 'click']` - default: `['hover']` (always an array when using as prop, even with only one option, when using as data attribute: `data-events="hover click"`)
-- [x] isOpen - `boolean` (to control tooltip state) - if not used, internal state of tooltip will handle the show state
-- [x] setIsOpen - `function` (to control tooltip state) - if not used, internal state of tooltip will handle the show state
-
-## `V4` props available in `V5`
-
-- [x] children
-- [x] place - `data-place`
-- [x] type - **Deprecated** | in V5 -> `variant` - `data-variant`
-- [ ] effect
-- [x] offset - `data-offset`
-- [ ] padding - **Deprecated** | in V5 -> can be easy updated by className prop
-- [ ] multiline - **Deprecated** | in V5 -> this is already supported as default by `content` and `html` props
-- [ ] border - **Deprecated** | in V5 -> can be easy updated by `className` prop
-- [ ] borderClass - **Deprecated** | in V5 -> can be easy updated by `className` prop
-- [ ] textColor - **Deprecated** | in V5 -> can be easy updated by `className` prop
-- [ ] backgroundColor - **Deprecated** | in V5 -> can be easy updated by `className` prop
-- [ ] borderColor - **Deprecated** | in V5 -> can be easy updated by `className` prop
-- [ ] arrowColor - **Deprecated** | in V5 -> can be easy updated by `className` prop
-- [ ] arrowRadius - **Deprecated** | in V5 -> can be easy updated by `className` prop
-- [ ] tooltipRadius - **Deprecated** | in V5 -> can be easy updated by `className` prop
-- [ ] insecure - **Deprecated** | in V5 -> CSS will be a separate file and can be imported or not
-- [x] className
-- [x] id
-- [x] html
-- [x] delayHide - `data-delay-hide`
-- [ ] delayUpdate - **Deprecated** | if requested, can be implemented later
-- [x] delayShow - `data-delay-show`
-- [ ] event
-- [ ] eventOff
-- [ ] isCapture - **Deprecated**
-- [ ] globalEventOff - **Deprecated**
-- [x] getContent - Now this attribute only accepts a function instead of any
-- [ ] afterShow
-- [ ] afterHide
-- [ ] overridePosition - **Deprecated**
-- [ ] disable
-- [ ] scrollHide
-- [ ] resizeHide
-- [x] wrapper - `data-wrapper`
-- [ ] bodyMode - **Deprecated**
-- [ ] clickable - **Deprecated** | Supported by default in V5
-- [ ] disableInternalStyle - **Deprecated** | in V5 -> CSS will be a separate file and can be imported or not
-
-### Detailed informations
-
-- [The Pull Request of V5](https://github.com/ReactTooltip/react-tooltip/pull/820)
-
----
-
-Please see [all V5 Options here](../options.mdx).

package/docs/docusaurus.config.js

@@ -1,135 +0,0 @@
-// @ts-check
-// Note: type annotations allow type checking and IDEs autocompletion
-
-const lightCodeTheme = require('prism-react-renderer/themes/github')
-const darkCodeTheme = require('prism-react-renderer/themes/dracula')
-
-/** @type {import('@docusaurus/types').Config} */
-const config = {
-  title: 'React Tooltip',
-  tagline: 'Awesome React Tooltip component',
-  url: 'https://react-tooltip.com',
-  baseUrl: '/',
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
-  favicon: 'img/favicon.ico',
-
-  // GitHub pages deployment config.
-  // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'ReactTooltip', // Usually your GitHub org/user name.
-  projectName: 'ReactTooltip', // Usually your repo name.
-
-  // Even if you don't use internalization, you can use this field to set useful
-  // metadata like html lang. For example, if your site is Chinese, you may want
-  // to replace "en" with "zh-Hans".
-  i18n: {
-    defaultLocale: 'en',
-    locales: ['en'],
-  },
-
-  presets: [
-    [
-      'classic',
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
-        docs: {
-          sidebarPath: require.resolve('./sidebars.js'),
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl: 'https://github.com/ReactTooltip/react-tooltip/tree/v5/docs/',
-        },
-        // blog: {
-        //   showReadingTime: true,
-        //   // Please change this to your repo.
-        //   // Remove this to remove the "edit this page" links.
-        //   editUrl:
-        //     'https://github.com/ReactTooltip/react-tooltip/tree/v5/docs/',
-        // },
-        theme: {
-          customCss: require.resolve('./src/css/custom.css'),
-        },
-      }),
-    ],
-  ],
-
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-    ({
-      announcementBar: {
-        id: 'support_us',
-        content:
-          '⭐️ If you like ReactTooltip, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/ReactTooltip/react-tooltip">GitHub</a> ⭐️',
-        backgroundColor: '#222',
-        textColor: '#fff',
-        isCloseable: false,
-      },
-      navbar: {
-        title: 'React Tooltip',
-        logo: {
-          alt: 'React Tooltip Logo',
-          src: 'img/only-tooltip.svg',
-          width: 120,
-        },
-        items: [
-          {
-            type: 'doc',
-            docId: 'getting-started',
-            position: 'left',
-            label: 'Docs',
-          },
-          {
-            href: 'https://github.com/ReactTooltip/react-tooltip/',
-            label: 'GitHub',
-            position: 'right',
-          },
-        ],
-      },
-      footer: {
-        style: 'dark',
-        links: [
-          {
-            title: 'Docs',
-            items: [
-              {
-                label: 'Getting Started',
-                to: '/docs/getting-started',
-              },
-            ],
-          },
-          // {
-          //   title: 'Community',
-          //   items: [
-          //     {
-          //       label: 'Stack Overflow',
-          //       href: 'https://stackoverflow.com/questions/tagged/docusaurus',
-          //     },
-          //     {
-          //       label: 'Discord',
-          //       href: 'https://discordapp.com/invite/docusaurus',
-          //     },
-          //     {
-          //       label: 'Twitter',
-          //       href: 'https://twitter.com/docusaurus',
-          //     },
-          //   ],
-          // },
-          {
-            title: 'More',
-            items: [
-              {
-                label: 'GitHub',
-                href: 'https://github.com/ReactTooltip/react-tooltip/',
-              },
-            ],
-          },
-        ],
-        copyright: `Copyright © ${new Date().getFullYear()} React Tooltip. Docs built with Docusaurus.`,
-      },
-      prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
-      },
-    }),
-}
-
-module.exports = config

package/docs/package.json

@@ -1,47 +0,0 @@
-{
-  "name": "react-tooltip-docs",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "docusaurus": "docusaurus",
-    "start": "docusaurus start",
-    "build": "docusaurus build",
-    "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy",
-    "clear": "docusaurus clear",
-    "serve": "docusaurus serve",
-    "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
-  },
-  "dependencies": {
-    "@docusaurus/core": "2.2.0",
-    "@docusaurus/preset-classic": "2.2.0",
-    "@mdx-js/react": "^1.6.22",
-    "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-tooltip": "5.0.0-beta.0"
-  },
-  "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.2.0",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.7.4"
-  },
-  "browserslist": {
-    "production": [
-      ">0.5%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "engines": {
-    "node": ">=16.14 <17.x"
-  }
-}

package/docs/sidebars.js

@@ -1,33 +0,0 @@
-/**
- * Creating a sidebar enables you to:
- - create an ordered group of docs
- - render a sidebar for each doc of that group
- - provide next/previous navigation
-
- The sidebars can be generated from the filesystem, or explicitly defined here.
-
- Create as many sidebars as you want.
- */
-
-// @ts-check
-
-/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
-const sidebars = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }],
-
-  // But you can create a sidebar manually
-  /*
-  tutorialSidebar: [
-    'intro',
-    'hello',
-    {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
-    },
-  ],
-   */
-}
-
-module.exports = sidebars

package/docs/src/components/HomepageFeatures/index.tsx

@@ -1,71 +0,0 @@
-/* eslint-disable import/no-unresolved */
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable global-require */
-import React from 'react'
-import clsx from 'clsx'
-import styles from './styles.module.css'
-
-type FeatureItem = {
-  title: string
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>
-  description: JSX.Element
-}
-
-const FeatureList: FeatureItem[] = [
-  {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/only-tooltip-top.svg').default,
-    description: (
-      <>ReactTooltip was designed with love from the ground up to be easily installed and used.</>
-    ),
-  },
-  {
-    title: 'Open Source',
-    Svg: require('@site/static/img/github.svg').default,
-    description: (
-      <>
-        An Open Source project built by developers to developers, we work together with the
-        community to always try to improve ReactTooltip.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/happy-face-tooltip.svg').default,
-    description: (
-      <>
-        Don&rsquo;t waste your time building a tooltip component from scratch, just use ReactTooltip
-        and focus on new features or bug fixes.
-      </>
-    ),
-  },
-]
-
-function Feature({ title, Svg, description }: FeatureItem) {
-  return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  )
-}
-
-export default function HomepageFeatures(): JSX.Element {
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}

package/docs/src/components/HomepageFeatures/styles.module.css

@@ -1,11 +0,0 @@
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}

package/docs/src/css/custom.css

@@ -1,74 +0,0 @@
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
-
-/* You can override the default Infima variables here. */
-:root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-}
-
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
-
-/** styling examples **/
-.example-container .example {
-  color: #222;
-  background-color: rgb(0, 247, 255);
-}
-
-.example-container .example .example-arrow {
-  background-color: rgb(0, 247, 255);
-}
-
-.example-container .example-orange {
-  color: #222;
-  background-color: rgb(255, 153, 0);
-}
-
-.example-container .example-orange .example-arrow {
-  background-color: rgb(255, 153, 0);
-}
-
-.example-container .example-pink {
-  color: #fff;
-  background-color: rgb(255, 0, 255);
-}
-
-.example-container .example-pink .example-arrow {
-  background-color: rgb(255, 0, 255);
-}
-
-.example-container .example-no-radius {
-  border-radius: 0;
-}
-
-.example-container .example-rounded {
-  border-radius: 50%;
-}
-
-.example-container .example-no-padding {
-  padding: 0;
-}
-
-.example-container .example-padding {
-  padding: 48px;
-}

package/docs/src/pages/index.module.css

@@ -1,35 +0,0 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  row-gap: 16px;
-}
-
-@media screen and (min-width: 768px) {
-  .buttons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: row;
-    column-gap: 16px;
-  }
-}

package/docs/src/pages/index.tsx

@@ -1,45 +0,0 @@
-/* eslint-disable import/no-unresolved */
-import React from 'react'
-import clsx from 'clsx'
-import Link from '@docusaurus/Link'
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
-import Layout from '@theme/Layout'
-import HomepageFeatures from '@site/src/components/HomepageFeatures'
-
-import styles from './index.module.css'
-
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext()
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__logo">
-          <img src="img/logo.svg" alt="Happy face with a tooltip saying 'Hello I'm a tooltip'" />
-        </p>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link className="button button--primary button--lg" to="/docs/category/upgrade-guide">
-            Upgrade from V4 to V5
-          </Link>
-          <Link className="button button--secondary button--lg" to="/docs/getting-started">
-            Getting Started with V5
-          </Link>
-        </div>
-      </div>
-    </header>
-  )
-}
-
-export default function Home(): JSX.Element {
-  // const { siteConfig } = useDocusaurusContext()
-  return (
-    // <Layout title={`${siteConfig.title}`} description="Awesome React Tooltip component">
-    <Layout title="Welcome" description="Awesome React Tooltip component">
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
-    </Layout>
-  )
-}

package/docs/src/pages/markdown-page.md

@@ -1,7 +0,0 @@
----
-title: Markdown page example
----
-
-# Markdown page example
-
-You don't need React to write simple standalone pages.