[ { "path": ".config/.prettierignore", "content": "../build\n../dist\n../headless\n../website/public\n../website/.cache\n../animations\n../themes" }, { "path": ".config/babel.config.js", "content": "module.exports = {\n presets: [\n ['@babel/env', {loose: true, useBuiltIns: 'entry', corejs: 3}],\n '@babel/typescript',\n ],\n plugins: ['dev-expression'],\n env: {\n test: {\n presets: [\n ['@babel/env', {targets: {node: 'current'}}],\n '@babel/typescript',\n ],\n },\n },\n};\n" }, { "path": ".config/eslint.config.js", "content": "module.exports = {\n env: {\n browser: true,\n node: true,\n jest: true,\n es6: true,\n },\n globals: {\n __DEV__: true,\n },\n extends: [\n 'eslint:recommended',\n 'plugin:@typescript-eslint/recommended',\n 'prettier',\n 'prettier/@typescript-eslint',\n ],\n plugins: ['@typescript-eslint'],\n parser: '@typescript-eslint/parser',\n parserOptions: {\n project: './tsconfig.json',\n },\n rules: {\n 'no-prototype-builtins': 'off',\n '@typescript-eslint/no-use-before-define': ['error', {functions: false}],\n '@typescript-eslint/no-non-null-assertion': 'off',\n '@typescript-eslint/no-explicit-any': 'off',\n '@typescript-eslint/array-type': 'off',\n '@typescript-eslint/no-empty-function': 'off',\n '@typescript-eslint/ban-ts-ignore': 'off',\n '@typescript-eslint/ban-ts-comment': 'off',\n '@typescript-eslint/explicit-module-boundary-types': 'off',\n },\n ignorePatterns: [\n 'node_modules',\n 'build',\n 'animations',\n 'themes',\n 'test',\n 'headless',\n 'website',\n 'dist',\n 'coverage',\n ],\n};\n" }, { "path": ".config/jest-puppeteer.config.js", "content": "require('dotenv').config();\n\nconst getConfig = require('jest-puppeteer-docker/lib/config');\nconst baseConfig = getConfig();\n\nmodule.exports = {\n browser: 'chromium',\n launch: {\n dumpio: false,\n headless: process.env.HEADLESS !== 'false',\n args: ['--no-sandbox', '--disable-setuid-sandbox'],\n },\n server: {\n command: 'yarn build:visual && yarn serve',\n port: 5000,\n launchTimeout: 20000,\n },\n ...baseConfig,\n};\n" }, { "path": ".config/jest.config.js", "content": "// https://github.com/smooth-code/jest-puppeteer/issues/160#issuecomment-491975158\nprocess.env.JEST_PUPPETEER_CONFIG = require.resolve(\n './jest-puppeteer.config.js'\n);\n\nconst jestPuppeteerDocker = require('jest-puppeteer-docker/jest-preset');\n\nmodule.exports = {\n testMatch: ['/test/**/*.test.js'],\n testTimeout: 30000,\n globals: {\n __DEV__: true,\n },\n setupFiles: ['dotenv/config'],\n reporters: ['default', require.resolve('../test/image-reporter.js')],\n ...jestPuppeteerDocker,\n testEnvironment: 'jest-environment-jsdom-fourteen',\n setupFilesAfterEnv: [\n require.resolve('../test/setup.js'),\n ...jestPuppeteerDocker.setupFilesAfterEnv,\n ],\n};\n" }, { "path": ".config/rollup.config.js", "content": "import babel from 'rollup-plugin-babel';\nimport json from 'rollup-plugin-json';\nimport resolve from 'rollup-plugin-node-resolve';\nimport cssOnly from 'rollup-plugin-css-only';\nimport replace from 'rollup-plugin-replace';\nimport sass from 'rollup-plugin-sass';\nimport serve from 'rollup-plugin-serve';\nimport livereload from 'rollup-plugin-livereload';\nimport {terser} from 'rollup-plugin-terser';\nimport pkg from '../package.json';\n\nconst NAMESPACE_PREFIX = process.env.NAMESPACE || 'tippy';\n\nconst plugins = {\n babel: babel({extensions: ['.js', '.ts']}),\n replaceNamespace: replace({\n __NAMESPACE_PREFIX__: NAMESPACE_PREFIX,\n }),\n replaceEnvProduction: replace({\n 'process.env.NODE_ENV': JSON.stringify('production'),\n }),\n replaceEnvDevelopment: replace({\n 'process.env.NODE_ENV': JSON.stringify('development'),\n }),\n minify: terser(),\n resolve: resolve({extensions: ['.js', '.ts']}),\n css: cssOnly({output: false}),\n json: json(),\n};\n\nconst prodCommonPlugins = [\n plugins.replaceNamespace,\n plugins.resolve,\n plugins.json,\n];\n\nconst pluginConfigs = {\n base: [plugins.babel, ...prodCommonPlugins],\n bundle: [plugins.babel, ...prodCommonPlugins, plugins.css],\n umdBase: [plugins.babel, plugins.replaceEnvDevelopment, ...prodCommonPlugins],\n umdBaseMin: [\n plugins.babel,\n plugins.replaceEnvProduction,\n ...prodCommonPlugins,\n plugins.minify,\n ],\n umdBundle: [\n plugins.babel,\n plugins.replaceEnvDevelopment,\n ...prodCommonPlugins,\n plugins.css,\n ],\n umdBundleMin: [\n plugins.babel,\n plugins.replaceEnvProduction,\n ...prodCommonPlugins,\n plugins.minify,\n plugins.css,\n ],\n};\n\nconst banner = `/**!\n* tippy.js v${pkg.version}\n* (c) 2017-${new Date().getFullYear()} atomiks\n* MIT License\n*/`;\n\nconst commonUMDOutputOptions = {\n globals: {'@popperjs/core': 'Popper'},\n format: 'umd',\n name: 'tippy',\n sourcemap: true,\n};\n\nconst prodConfig = [\n {\n input: 'build/base-umd.js',\n plugins: pluginConfigs.umdBase,\n external: ['@popperjs/core'],\n output: {\n ...commonUMDOutputOptions,\n file: 'dist/tippy.umd.js',\n banner,\n },\n },\n {\n input: 'build/bundle-umd.js',\n plugins: pluginConfigs.umdBundle,\n external: ['@popperjs/core'],\n output: {\n ...commonUMDOutputOptions,\n file: 'dist/tippy-bundle.umd.js',\n banner,\n },\n },\n {\n input: 'build/base-umd.js',\n plugins: pluginConfigs.umdBaseMin,\n external: ['@popperjs/core'],\n output: {\n ...commonUMDOutputOptions,\n file: 'dist/tippy.umd.min.js',\n },\n },\n {\n input: 'build/bundle-umd.js',\n plugins: pluginConfigs.umdBundleMin,\n external: ['@popperjs/core'],\n output: {\n ...commonUMDOutputOptions,\n file: 'dist/tippy-bundle.umd.min.js',\n },\n },\n {\n input: 'build/base.js',\n plugins: pluginConfigs.bundle,\n external: ['@popperjs/core'],\n output: {\n file: 'dist/tippy.esm.js',\n format: 'esm',\n banner,\n sourcemap: true,\n },\n },\n {\n input: 'build/headless.js',\n plugins: pluginConfigs.base,\n external: ['@popperjs/core'],\n output: {\n file: 'headless/dist/tippy-headless.esm.js',\n format: 'esm',\n banner,\n sourcemap: true,\n },\n },\n {\n input: 'build/base.js',\n plugins: pluginConfigs.bundle,\n external: ['@popperjs/core'],\n output: {\n file: 'dist/tippy.cjs.js',\n format: 'cjs',\n exports: 'named',\n banner,\n sourcemap: true,\n },\n },\n {\n input: 'build/headless.js',\n plugins: pluginConfigs.base,\n external: ['@popperjs/core'],\n output: {\n file: 'headless/dist/tippy-headless.cjs.js',\n format: 'cjs',\n exports: 'named',\n banner,\n sourcemap: true,\n },\n },\n {\n input: 'build/headless-umd.js',\n plugins: pluginConfigs.umdBase,\n external: ['@popperjs/core'],\n output: {\n ...commonUMDOutputOptions,\n file: 'headless/dist/tippy-headless.umd.js',\n },\n },\n {\n input: 'build/headless-umd.js',\n plugins: pluginConfigs.umdBaseMin,\n external: ['@popperjs/core'],\n output: {\n ...commonUMDOutputOptions,\n file: 'headless/dist/tippy-headless.umd.min.js',\n },\n },\n];\n\n// Calling the `serve()` plugin causes the process to hang, so we need to delay\n// its evaluation\nconst configs = {\n dev: () => ({\n input: 'test/visual/tests.js',\n plugins: [\n plugins.babel,\n plugins.json,\n plugins.resolve,\n replace({__DEV__: 'true'}),\n plugins.replaceEnvDevelopment,\n sass({output: true}),\n serve({\n contentBase: 'test/visual',\n port: 1234,\n }),\n livereload(),\n ],\n output: {\n file: 'test/visual/dist/bundle.js',\n format: 'iife',\n },\n }),\n test: () => ({\n input: 'test/visual/tests.js',\n plugins: [\n plugins.babel,\n plugins.json,\n plugins.resolve,\n replace({__DEV__: 'true'}),\n plugins.replaceEnvDevelopment,\n sass({output: true}),\n ],\n output: {\n file: 'test/visual/dist/bundle.js',\n format: 'iife',\n },\n }),\n};\n\nconst func = configs[process.env.NODE_ENV];\n\nexport default func ? func() : prodConfig;\n" }, { "path": ".editorconfig", "content": "# https://editorconfig.org\n\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\nindent_style = space\nindent_size = 2\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\ngithub: [atomiks]\npatreon: # Replace with a single Patreon username\nopen_collective: # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\notechie: # Replace with a single Otechie username\ncustom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: šŸž Bug report\nabout: Something is broken\ntitle: ''\nlabels: \"\\U0001F41B bug, \\U0001F6A7 unconfirmed\"\nassignees: ''\n---\n\n## Bug description\n\nA clear and concise description of what the bug is.\n\n## Reproduction\n\n\n\nCodePen link: https://codepen.io/atomiks/pen/yvwQyZ\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: šŸ‘‹ Stack Overflow\n url: https://stackoverflow.com/questions/tagged/tippyjs\n about: Having trouble with Tippy? Try asking on Stack Overflow!\n - name: šŸ’¬ Discussions\n url: https://github.com/atomiks/tippyjs/discussions\n about: Talk with others about Tippy, its usage and future!\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: āœØ Feature request\nabout: Suggest a feature\ntitle: ''\nlabels: \"\\U0001F48E enhancement\"\nassignees: ''\n---\n\n## Problem\n\nA clear and concise description of what the problem is.\n\n## Solution\n\nA clear and concise description of what you want to happen.\n" }, { "path": ".github/workflows/cd.yml", "content": "name: CD\non: [push]\nenv:\n CI: true\n\njobs:\n publish:\n if:\n ${{ startsWith(github.event.commits[0].message, 'docs:') ||\n startsWith(github.event.commits[0].message, 'release:') }}\n runs-on: ubuntu-latest\n defaults:\n run:\n working-directory: ./website\n steps:\n - name: Checkout\n uses: actions/checkout@v2\n - name: Build\n run: |\n npm install\n npm run clean\n npm run build:ci\n - name: Deploy to GitHub Pages\n uses: crazy-max/ghaction-github-pages@v2\n with:\n target_branch: gh-pages\n build_dir: ./website/public\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n" }, { "path": ".github/workflows/ci.yml", "content": "name: CI\non: [push, pull_request]\nenv:\n CI: true\n PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true\n\njobs:\n checks:\n name: Linting and Type checking\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n - uses: actions/setup-node@v1\n - run: npm install\n - run: npm run lint\n - run: npm run test:types\n\n dom-tests:\n name: Unit and Integration\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n - uses: actions/setup-node@v1\n - uses: mujo-code/puppeteer-headful@master\n - run: npm install\n - run: npm run test:dom\n\n functional-tests:\n name: Chromium Functional\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n - uses: actions/setup-node@v1\n - uses: mujo-code/puppeteer-headful@master\n - run: npm install\n - run: npm run test:functional\n env:\n PUPPETEER_BROWSER: chromium\n" }, { "path": ".gitignore", "content": ".DS_Store\ncoverage/\n.devserver/\nnode_modules/\ndist/\n/themes\n/animations\nindex.d.ts\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2017-present atomiks\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "MIGRATION_GUIDE.md", "content": "# Migration Guide\n\n- [5.x to 6.x](#5x-to-6x)\n- [4.x to 5.x](#4x-to-5x)\n\n---\n\n# 5.x to 6.x\n\nPopper.js was updated to v2. The `instance.popperInstance` and `popperOptions`\nAPIs have changed. You can\n[view its documentation here](https://popper.js.org/docs/v2/).\n\n## Imports\n\n`iife` was replaced with `umd` (Rollup chunking has been removed).\n\n## HTML Content\n\nTo protect against XSS by default, `allowHTML` is now `false` by default. If\nyou're passing strings of HTML to `content`, you must set `allowHTML: true`.\n\n## Themes\n\n### If you were creating custom themes\n\n
\nView details\n\n`.tippy-tooltip` has become `.tippy-box`, and theming is done via an attribute\nnow, to match the other props.\n\nThe following:\n\n```css\n.tippy-tooltip.tomato-theme {\n background-color: tomato;\n}\n```\n\nHas become:\n\n```css\n.tippy-box[data-theme~='tomato'] {\n background-color: tomato;\n}\n```\n\n> The `~=` attribute operator allows you to specify mutliple theme names like\n> before with class names.\n\nFor `.tippy-arrow`, you'll need to specify its color on the `::before`\npseudo-element.\n\nThe following:\n\n```css\n.tippy-tooltip.tomato-theme[data-placement^='top'] > .tippy-arrow {\n border-top-color: tomato;\n}\n```\n\nHas become:\n\n```css\n.tippy-box[data-theme~='tomato'][data-placement^='top'] > .tippy-arrow::before {\n border-top-color: tomato;\n}\n```\n\nIn addition, if you were altering the pixel values, it may need to be adjusted.\n\nIn addition, Popper 2 changed some attribute names.\n\nThis:\n\n```css\n.tippy-tooltip[data-out-of-boundaries] {\n visibility: hidden;\n}\n```\n\nHas become:\n\n```css\n.tippy-box[data-reference-hidden] {\n visibility: hidden;\n}\n```\n\n
\n\n### If you were targeting `.tippy-popper`\n\n
\nView details\n\n`.tippy-popper` is no longer a selector, and is considered an implementation\ndetail for the most part now. `[data-tippy-root]` attribute selector replaces it\nif necessary.\n\n
\n\n## Instance\n\n### If you were using `instance.popperChildren`\n\n
\nView details\n\nThis no longer exists due to the user's ability to specify any structured DOM\nwith `render()` (Headless Tippy).\n\nTo access the `.tippy-box` element with the default render function\n(`.tippy-tooltip` in v5):\n\n```js\nconst box = instance.popper.firstElementChild;\n```\n\n
\n\n## Methods\n\n### If you were using `.show()` or `.hide()` with a duration argument\n\n
\nView details\n\nThese no longer take a duration argument. Instead, use\n`.setProps({duration: ...})` before calling them if necessary.\n\nTo replicate `.hide(0)`:\n\n```js\ninstance.unmount();\n```\n\n
\n\n## Props\n\n### If you were using `boundary`\n\n
\nView details\n\nOften, this was to solve a problem in Popper 1, where you set\n`boundary: \"window\"`. This is no longer necessary. If you'd like to change it\nanyway, you can set it in `popperOptions`:\n\n```js\ntippy(targets, {\n popperOptions: {\n modifiers: [\n {\n name: 'preventOverflow',\n options: {\n // equivalent to boundary: 'window' in v1, usually NOT necessary in v2\n rootBoundary: 'document',\n },\n },\n ],\n },\n});\n```\n\n
\n\n### If you were using `distance` or `offset`\n\n
\nView details\n\nThese have been merged into a single `offset` prop, to match Popper 2's new API.\n\nThe following:\n\n```js\ntippy(targets, {\n offset: 5,\n distance: 10,\n});\n```\n\nHas become:\n\n```js\ntippy(targets, {\n offset: [5, 10],\n});\n```\n\nThis tuple also directly replaces `offset: \"5, 10\"`.\n\n
\n\n### If you were using `flip`, `flipBehavior`, or `flipOnUpdate`\n\n
\nView details\n\nAll of these have been removed. To configure these, specify them in\n`popperOptions`:\n\n```js\ntippy(targets, {\n placement: 'bottom',\n popperOptions: {\n modifiers: [\n {\n name: 'flip',\n // flip: false\n enabled: false,\n options: {\n // flipBehavior: ['bottom', 'right', 'top']\n fallbackPlacements: ['right', 'top'],\n },\n },\n ],\n },\n});\n```\n\n`flipOnUpdate` has no replacement yet. It's always `true`.\n\n
\n\n### If you were using `aria`\n\n
\nView details\n\nThis has become an object to allow for better configurability. By default Tippy\nwill infer what to use (`auto`), but this can be overridden.\n\nTypes:\n\n```ts\ninterface Props {\n // ...\n aria: {\n content?: 'auto' | 'describedby' | 'labelledby' | null;\n expanded?: 'auto' | boolean;\n };\n}\n```\n\n```js\ntippy(targets, {\n aria: {\n // `null` when interactive is enabled\n content: 'auto', // `aria-*` attribute\n // `true` when interactive is enabled\n expanded: 'auto', // `aria-expanded` attribute\n },\n});\n```\n\n
\n\n### If you were using `multiple` or relying on its behavior\n\n
\nView details\n\nDue to static typing issues, it's been removed. Calling `tippy()` again on the\nsame element will now always create a new tippy for it. Avoid calling `tippy()`\nmultiple times on the same reference if you don't want multiple tippies created\nfor it.\n\n
\n\n### If you were using `updateDuration`\n\n
\nView details\n\nIt's now `moveTransition`, which is a whole transition string. This allows you\nto specify the easing function.\n\n```js\ntippy(targets, {\n moveTransition: 'transform 0.2s ease-out',\n});\n```\n\n
\n\n### If you were using `lazy`\n\n
\nView details\n\nIt's been removed. The `popperInstance` is now created and destroyed on\nmount/unmount. If you were using this for ReferenceObjects, see below.\n\nThe following:\n\n```js\ntippy(targets, {\n lazy: false,\n onCreate(instance) {\n instance.popperInstance.reference = {\n clientWidth: 0,\n clientHeight: 0,\n getBoundingClientRect() {\n return {\n // ...\n };\n },\n };\n },\n});\n```\n\nHas become a single prop:\n\n```js\ntippy(targets, {\n getReferenceClientRect: () => ({\n // ...\n }),\n});\n```\n\nThis implements Popper 2's\n[Virtual Elements API](https://popper.js.org/docs/v2/virtual-elements/).\n\n
\n\n## IE11\n\nIE11 is not supported by default anymore, but can be polyfilled. View the\nBrowser Support page on the documentation for details.\n\n---\n\n# 4.x to 5.x\n\n### Node\n\nMake sure you have DEV warnings enabled by setting `NODE_ENV=development` and\nensuring your bundler replaces `process.env.NODE_ENV` with the string\n`\"development\"`.\n\n- **webpack**: via `mode` option\n- **Rollup**: via `rollup-plugin-replace`\n- **Parcel**: automatic\n- **Browserify/Gulp/Grunt/others**:\n [View details](https://vuejs.org/v2/guide/deployment.html#With-Build-Tools)\n\n### Browser\n\n```html\n\n\n\n\n```\n\n## Imports\n\nPreviously, the default import injected the CSS stylesheet into ``:\n\n```js\nimport tippy from 'tippy.js';\n```\n\nIn v5, this import is now side-effect free to work better with dependencies when\nusers have CSP enabled or using frameworks that control the ``.\n\nYou should import the CSS separately:\n\n```js\nimport tippy from 'tippy.js';\nimport 'tippy.js/dist/tippy.css';\n```\n\nYou can however opt-in to use the injected CSS version, just like v4:\n\n```js\n// Just like v4\nimport tippy from 'tippy.js/dist/tippy-bundle.esm';\n\n// Or CommonJS:\nconst tippy = require('tippy.js/dist/tippy-bundle.cjs');\n```\n\n## `data-tippy` attribute\n\nThis technique of auto initialization was removed to keep the import side-effect\nfree. Initializing via the `tippy()` constructor is required.\n\n## Animations\n\n### If you want the `animateFill` effect back (it's no longer default)\n\n
\nView details\n\nNode:\n\n```js\nimport tippy, {animateFill} from 'tippy.js';\nimport 'tippy.js/dist/tippy.css';\n\n// These stylesheets are required for it to work\nimport 'tippy.js/dist/backdrop.css';\nimport 'tippy.js/animations/shift-away.css';\n\ntippy(targets, {\n animateFill: true,\n plugins: [animateFill],\n});\n```\n\nBrowser:\n\n```html\n\n\n\n\n\n```\n\n
\n\n### If you were using default animations or creating custom animations\n\n
\nView details\n\n- Make sure your `visible` state has no translation (of 0px, instead of 10px\n like before).\n- `shift-away`, `shift-toward`, `scale` and `perspective` need to be imported\n separately now.\n\nNode:\n\n```js\nimport 'tippy.js/animations/scale.css';\n```\n\nBrowser:\n\n```html\n\n```\n\n
\n\n## Props\n\n### If you were using `interactive: true`\n\n
\nView details\n\nWhen using `interactive: true`, the tippy may be invisible or appear cut off if\nyour reference element is in a container with:\n\n- `position` (e.g. fixed, absolute, sticky)\n- `overflow: hidden`\n\nTo fix add the following prop (recommended):\n\n```js\ntippy(reference, {\n // ...\n popperOptions: {\n positionFixed: true,\n },\n});\n```\n\nOr, if the above causes issues:\n\n```js\ntippy(reference, {\n // ...\n appendTo: document.body,\n});\n```\n\nāš ļø For the latter, you need to be employing focus mangement for accessibility.\n\n
\n\n### If you were using `arrowType: 'round'`\n\n
\nView details\n\nImport the `svg-arrow` CSS, and the `roundArrow` string, and use the `arrow`\nprop instead.\n\nNode:\n\n```js\nimport {roundArrow} from 'tippy.js';\nimport 'tippy.js/dist/svg-arrow.css';\n\ntippy(targets, {\n arrow: roundArrow,\n});\n```\n\nBrowser:\n\n```html\n\n\n```\n\n
\n\n### If you were using `followCursor`\n\n
\nView details\n\nNode:\n\n```js\nimport tippy, {followCursor} from 'tippy.js';\n\ntippy('button', {\n followCursor: true,\n plugins: [followCursor],\n});\n```\n\nBrowser:\n\n(Works as before.)\n\n
\n\n### If you were using `sticky`\n\n
\nView details\n\nNode:\n\n```js\nimport tippy, {sticky} from 'tippy.js';\n\ntippy('button', {\n sticky: true,\n plugins: [sticky],\n});\n```\n\nBrowser:\n\n(Works as before.)\n\n
\n\n### If you were using `target`\n\n
\nView details\n\nUse `delegate()`.\n\nNode:\n\n```js\nimport tippy, {delegate} from 'tippy.js';\n\ndelegate('#parent', {target: 'button'});\n```\n\nBrowser:\n\n```html\n\n\n\n```\n\n
\n\n### If you were using `showOnInit`\n\n
\nView details\n\nIt's now named `showOnCreate`, to match the `onCreate` lifecycle hook\n\n
\n\n### If you were using `size`\n\n
\nView details\n\nIt's been removed, as it's more flexible to just use a theme and specify the\n`font-size` and `padding` properties.\n\n
\n\n### If you were using `touchHold`\n\n
\nView details\n\nUse `touch: \"hold\"` instead.\n\n
\n\n### If you were using `a11y`\n\n
\nView details\n\nEnsure non-focusable elements have `tabindex=\"0\"` added to them. Otherwise, use\nnatively focusable elements everywhere possible.\n\n
\n\n### If you were using `wait`\n\n
\nView details\n\nUse the `onTrigger` and `onUntrigger` lifecycles and temporarily disable the\ninstance.\n\n```js\ntippy(targets, {\n onTrigger(instance) {\n instance.disable();\n // Make your async call...\n // Once finished:\n instance.enable();\n instance.show();\n },\n onUntrigger(instance) {\n // Re-enable the instance here depending on the async cancellation logic\n instance.enable();\n },\n});\n```\n\n
\n\n## Instances\n\n### If you were using `instance.set()`\n\n
\nView details\n\n```diff\n- instance.set({});\n+ instance.setProps({});\n```\n\n
\n\n## Static methods\n\n### If you were using `tippy.setDefaults()`\n\n
\nView details\n\n```diff\n- tippy.defaults;\n+ tippy.defaultProps;\n```\n\n```diff\n- tippy.setDefaults({});\n+ tippy.setDefaultProps({});\n```\n\n
\n\n### If you were using `tippy.hideAll()`\n\n
\nView details\n\nIn ESM/CJS contexts, it's no longer attached to `tippy`\n\nNode:\n\n```js\nimport {hideAll} from 'tippy.js';\n\nhideAll();\n```\n\nBrowser:\n\n(Works as before.)\n\n
\n\n### If you were using `tippy.group()`\n\n
\nView details\n\nUse `createSingleton()`.\n\nNode:\n\n```js\nimport tippy, {createSingleton} from 'tippy.js';\n\ncreateSingleton(tippy('button'), {delay: 1000});\n```\n\nBrowser:\n\n```html\n\n\n\n```\n\n
\n\n## Themes\n\n### If you were using the included themes\n\n
\nView details\n\n- `google` is now `material`\n\n
\n\n### If you were creating custom themes\n\n
\nView details\n\n- `[x-placement]` attribute is now `[data-placement]`\n- `[x-out-of-boundaries]` is now `[data-out-of-boundaries]`\n- `.tippy-roundarrow` is now `.tippy-svg-arrow`\n- `.tippy-tooltip` no longer has `padding` on it, rather the `.tippy-content`\n selector does.\n- `.tippy-tooltip` no longer has `text-align: center`\n\n
\n\n## Other\n\n### If you were using virtual reference objects\n\n
\nView details\n\nSet `instance.popperInstance.reference = ReferenceObject` in the `onTrigger`\nlifecycle, or `onCreate` with `lazy: false`.\n\n
\n\n## Types\n\n
\nView details\n\n- `Props` is not `Partial` anymore, it's `Required`\n- `Options` removed (use `Partial`)\n- `BasicPlacement` renamed to `BasePlacement`\n\n
\n" }, { "path": "README.md", "content": "
\n \"Tippy.js\n
\n\n
\n

Tippy.js

\n

The complete tooltip, popover, dropdown, and menu solution for the web

\n \n \"npm\n \n \n \"MIT\n \n
\n
\n
\n\n## Demo and Documentation\n\nāž”ļø **[View the latest demo & docs here](https://atomiks.github.io/tippyjs/)**\n\n[Migration Guide](https://github.com/atomiks/tippyjs/blob/master/MIGRATION_GUIDE.md)\n\n## Installation\n\n### Package Managers\n\n```bash\n# npm\nnpm i tippy.js\n\n# Yarn\nyarn add tippy.js\n```\n\nImport the `tippy` constructor and the core CSS:\n\n```js\nimport tippy from 'tippy.js';\nimport 'tippy.js/dist/tippy.css';\n```\n\n### CDN\n\n```html\n\n\n```\n\nThe core CSS comes bundled with the default unpkg import.\n\n## Usage\n\nFor detailed usage information,\n[visit the docs](https://atomiks.github.io/tippyjs/v6/getting-started/).\n\n## Component Wrappers\n\n- React: [@tippyjs/react](https://github.com/atomiks/tippyjs-react) (official)\n- Ember: [ember-tippy](https://github.com/nag5000/ember-tippy) (unofficial)\n\n## License\n\nMIT\n" }, { "path": "build/animations/perspective-extreme.js", "content": "import '../../src/scss/animations/perspective-extreme.scss';\n" }, { "path": "build/animations/perspective-subtle.js", "content": "import '../../src/scss/animations/perspective-subtle.scss';\n" }, { "path": "build/animations/perspective.js", "content": "import '../../src/scss/animations/perspective.scss';\n" }, { "path": "build/animations/scale-extreme.js", "content": "import '../../src/scss/animations/scale-extreme.scss';\n" }, { "path": "build/animations/scale-subtle.js", "content": "import '../../src/scss/animations/scale-subtle.scss';\n" }, { "path": "build/animations/scale.js", "content": "import '../../src/scss/animations/scale.scss';\n" }, { "path": "build/animations/shift-away-extreme.js", "content": "import '../../src/scss/animations/shift-away-extreme.scss';\n" }, { "path": "build/animations/shift-away-subtle.js", "content": "import '../../src/scss/animations/shift-away-subtle.scss';\n" }, { "path": "build/animations/shift-away.js", "content": "import '../../src/scss/animations/shift-away.scss';\n" }, { "path": "build/animations/shift-toward-extreme.js", "content": "import '../../src/scss/animations/shift-toward-extreme.scss';\n" }, { "path": "build/animations/shift-toward-subtle.js", "content": "import '../../src/scss/animations/shift-toward-subtle.scss';\n" }, { "path": "build/animations/shift-toward.js", "content": "import '../../src/scss/animations/shift-toward.scss';\n" }, { "path": "build/base-umd.js", "content": "import tippy, {hideAll} from '../src';\nimport createSingleton from '../src/addons/createSingleton';\nimport delegate from '../src/addons/delegate';\nimport animateFill from '../src/plugins/animateFill';\nimport followCursor from '../src/plugins/followCursor';\nimport inlinePositioning from '../src/plugins/inlinePositioning';\nimport sticky from '../src/plugins/sticky';\nimport {ROUND_ARROW} from '../src/constants';\nimport {render} from '../src/template';\n\ntippy.setDefaultProps({\n plugins: [animateFill, followCursor, inlinePositioning, sticky],\n render,\n});\n\ntippy.createSingleton = createSingleton;\ntippy.delegate = delegate;\ntippy.hideAll = hideAll;\ntippy.roundArrow = ROUND_ARROW;\n\nexport default tippy;\n" }, { "path": "build/base.js", "content": "import tippy from '../src';\nimport {render} from '../src/template';\n\ntippy.setDefaultProps({render});\n\nexport {default, hideAll} from '../src';\nexport {default as createSingleton} from '../src/addons/createSingleton';\nexport {default as delegate} from '../src/addons/delegate';\nexport {default as animateFill} from '../src/plugins/animateFill';\nexport {default as followCursor} from '../src/plugins/followCursor';\nexport {default as inlinePositioning} from '../src/plugins/inlinePositioning';\nexport {default as sticky} from '../src/plugins/sticky';\nexport {ROUND_ARROW as roundArrow} from '../src/constants';\n" }, { "path": "build/bundle-umd.js", "content": "import css from '../dist/tippy.css';\nimport {injectCSS} from '../src/css';\nimport {isBrowser} from '../src/browser';\nimport tippy, {hideAll} from '../src';\nimport createSingleton from '../src/addons/createSingleton';\nimport delegate from '../src/addons/delegate';\nimport animateFill from '../src/plugins/animateFill';\nimport followCursor from '../src/plugins/followCursor';\nimport inlinePositioning from '../src/plugins/inlinePositioning';\nimport sticky from '../src/plugins/sticky';\nimport {ROUND_ARROW} from '../src/constants';\nimport {render} from '../src/template';\n\nif (isBrowser) {\n injectCSS(css);\n}\n\ntippy.setDefaultProps({\n plugins: [animateFill, followCursor, inlinePositioning, sticky],\n render,\n});\n\ntippy.createSingleton = createSingleton;\ntippy.delegate = delegate;\ntippy.hideAll = hideAll;\ntippy.roundArrow = ROUND_ARROW;\n\nexport default tippy;\n" }, { "path": "build/css/backdrop.js", "content": "import '../../src/scss/backdrop.scss';\n" }, { "path": "build/css/border.js", "content": "import '../../src/scss/border.scss';\n" }, { "path": "build/css/svg-arrow.js", "content": "import '../../src/scss/svg-arrow.scss';\n" }, { "path": "build/css/tippy.js", "content": "import '../../src/scss/index.scss';\n" }, { "path": "build/headless-umd.js", "content": "import tippy, {hideAll} from '../src';\nimport createSingleton from '../src/addons/createSingleton';\nimport delegate from '../src/addons/delegate';\nimport animateFill from '../src/plugins/animateFill';\nimport followCursor from '../src/plugins/followCursor';\nimport inlinePositioning from '../src/plugins/inlinePositioning';\nimport sticky from '../src/plugins/sticky';\nimport {ROUND_ARROW} from '../src/constants';\n\ntippy.setDefaultProps({\n plugins: [animateFill, followCursor, inlinePositioning, sticky],\n animation: false,\n});\n\ntippy.createSingleton = createSingleton;\ntippy.delegate = delegate;\ntippy.hideAll = hideAll;\ntippy.roundArrow = ROUND_ARROW;\n\nexport default tippy;\n" }, { "path": "build/headless.js", "content": "import tippy from '../src';\n\nexport {hideAll} from '../src';\nexport {default as createSingleton} from '../src/addons/createSingleton';\nexport {default as delegate} from '../src/addons/delegate';\nexport {default as animateFill} from '../src/plugins/animateFill';\nexport {default as followCursor} from '../src/plugins/followCursor';\nexport {default as inlinePositioning} from '../src/plugins/inlinePositioning';\nexport {default as sticky} from '../src/plugins/sticky';\nexport {ROUND_ARROW as roundArrow} from '../src/constants';\n\ntippy.setDefaultProps({animation: false});\n\nexport default tippy;\n" }, { "path": "build/index.js", "content": "// This file builds the CSS dist files. The main `rollup.config.js` builds the\n// JS dist files.\n\n/* eslint-disable @typescript-eslint/no-var-requires */\nconst fs = require('fs');\nconst {rollup} = require('rollup');\nconst babel = require('rollup-plugin-babel');\nconst sass = require('rollup-plugin-sass');\nconst postcss = require('postcss');\nconst autoprefixer = require('autoprefixer');\nconst cssnano = require('cssnano');\nconst resolve = require('rollup-plugin-node-resolve');\nconst json = require('rollup-plugin-json');\nconst cssOnly = require('rollup-plugin-css-only');\nconst replace = require('rollup-plugin-replace');\n\nconst NAMESPACE_PREFIX = process.env.NAMESPACE || 'tippy';\nconst THEME = process.env.THEME;\n\nconst BASE_OUTPUT_CONFIG = {\n name: 'tippy',\n globals: {'popper.js': 'Popper'},\n sourcemap: true,\n};\n\nconst PLUGINS = {\n babel: babel({\n exclude: 'node_modules/**',\n extensions: ['.js', '.ts'],\n }),\n replaceNamespace: replace({\n __NAMESPACE_PREFIX__: NAMESPACE_PREFIX,\n }),\n resolve: resolve({extensions: ['.js', '.ts']}),\n css: cssOnly({output: false}),\n json: json(),\n};\n\nconst PLUGIN_CONFIG = [\n PLUGINS.babel,\n PLUGINS.replaceNamespace,\n PLUGINS.resolve,\n PLUGINS.json,\n PLUGINS.css,\n];\n\nfunction createPluginSCSS(output, shouldInjectNodeEnvTheme = false) {\n let data = `$namespace-prefix: ${NAMESPACE_PREFIX};`;\n\n if (shouldInjectNodeEnvTheme && THEME) {\n data += `@import './themes/${THEME}.scss';`;\n }\n\n return sass({\n output,\n options: {data},\n processor(css) {\n return postcss([autoprefixer, cssnano])\n .process(css, {from: undefined})\n .then((result) => result.css);\n },\n });\n}\n\nfunction createRollupConfig(inputFile, plugins) {\n return {\n input: `./build/${inputFile}`,\n external: ['popper.js'],\n plugins,\n };\n}\n\nasync function build() {\n // Create `index.d.ts` file from `src/types.ts`\n fs.copyFileSync('./src/types.ts', './index.d.ts');\n\n // Create base CSS files\n for (const filename of fs.readdirSync(`./build/css`)) {\n const cssConfig = createRollupConfig(\n `css/${filename}`,\n PLUGIN_CONFIG.concat(\n createPluginSCSS(`./dist/${filename.replace('.js', '.css')}`, true)\n )\n );\n const cssBundle = await rollup(cssConfig);\n await cssBundle.write({\n ...BASE_OUTPUT_CONFIG,\n sourcemap: false,\n format: 'umd',\n file: './index.js',\n });\n }\n\n // Themes + animations\n for (const folder of ['themes', 'animations']) {\n for (const filename of fs.readdirSync(`./build/${folder}`)) {\n const filenameWithCSSExtension = filename.replace('.js', '.css');\n const outputFile = `./${folder}/${filenameWithCSSExtension}`;\n\n const config = createRollupConfig(\n `${folder}/${filename}`,\n PLUGIN_CONFIG.concat(createPluginSCSS(outputFile))\n );\n const bundle = await rollup(config);\n await bundle.write({\n ...BASE_OUTPUT_CONFIG,\n format: 'umd',\n sourcemap: false,\n file: 'index.js',\n });\n }\n }\n\n fs.unlinkSync('./index.js');\n}\n\nbuild();\n" }, { "path": "build/themes/light-border.js", "content": "import '../../src/scss/themes/light-border.scss';\n" }, { "path": "build/themes/light.js", "content": "import '../../src/scss/themes/light.scss';\n" }, { "path": "build/themes/material.js", "content": "import '../../src/scss/themes/material.scss';\n" }, { "path": "build/themes/translucent.js", "content": "import '../../src/scss/themes/translucent.scss';\n" }, { "path": "headless/package.json", "content": "{\n \"name\": \"tippy-headless\",\n \"private\": true,\n \"version\": \"0.1.0\",\n \"description\": \"Headless rendering for Tippy.js\",\n \"types\": \"../index.d.ts\",\n \"main\": \"dist/tippy-headless.cjs.js\",\n \"module\": \"dist/tippy-headless.esm.js\",\n \"unpkg\": \"dist/tippy-headless.umd.min.js\",\n \"sideEffects\": false,\n \"files\": [\n \"dist/\"\n ],\n \"author\": \"atomiks\",\n \"license\": \"MIT\"\n}\n" }, { "path": "index.test-d.ts", "content": "import {expectType} from 'tsd';\nimport tippy, {\n Instance,\n Props,\n Tippy,\n LifecycleHooks,\n delegate,\n DelegateInstance,\n createSingleton,\n Plugin,\n animateFill,\n followCursor,\n inlinePositioning,\n sticky,\n hideAll,\n roundArrow,\n CreateSingletonInstance,\n} from './src/types';\n\ninterface CustomProps {\n custom: number;\n}\n\ntype FilteredProps = CustomProps &\n Omit;\n\ntype ExtendedProps = FilteredProps & LifecycleHooks;\n\ndeclare const tippyExtended: Tippy;\n\nconst singleTarget = document.createElement('div');\nconst mulitpleTargets = document.querySelectorAll('div');\n\nexpectType(tippy(singleTarget));\nexpectType(tippy(singleTarget, {content: 'hello'}));\n\nexpectType(tippy(mulitpleTargets));\nexpectType(tippy(mulitpleTargets, {content: 'hello'}));\n\nexpectType(delegate(singleTarget, {target: '.child'}));\nexpectType(\n delegate(singleTarget, {target: '.child', content: 'hello'})\n);\n\nexpectType(delegate(mulitpleTargets, {target: '.child'}));\nexpectType(\n delegate(mulitpleTargets, {target: '.child', content: 'hello'})\n);\n\nconst tippyInstances = [tippy(singleTarget), tippy(singleTarget)];\nconst singleton = createSingleton(tippyInstances);\n\nexpectType(createSingleton(tippyInstances));\nexpectType(\n createSingleton(tippyInstances, {content: 'hello'})\n);\nexpectType(\n createSingleton(tippyInstances, {overrides: ['content']})\n);\nexpectType<(instances: Instance[]) => void>(singleton.setInstances);\n\n// TODO: I want to assert that these *don't* error, but `tsd` does not provide\n// such a function(?)\ncreateSingleton(tippyExtended('button'));\nsingleton.setInstances(tippyExtended('button'));\n\nexpectType(\n tippy(singleTarget, {\n plugins: [animateFill, followCursor, inlinePositioning, sticky],\n })\n);\n\nconst customPlugin: Plugin = {\n name: 'custom',\n defaultValue: 42,\n fn(instance) {\n expectType>(instance);\n expectType(instance.props.custom);\n\n return {};\n },\n};\n\nexpectType>(\n tippyExtended(singleTarget, {\n custom: 42,\n plugins: [customPlugin],\n })\n);\n\nexpectType(hideAll({duration: 50, exclude: tippy(singleTarget)}));\n\nexpectType(roundArrow);\n" }, { "path": "package.json", "content": "{\n \"name\": \"tippy.js\",\n \"version\": \"6.3.7\",\n \"description\": \"The complete tooltip, popover, dropdown, and menu solution for the web\",\n \"main\": \"dist/tippy.cjs.js\",\n \"module\": \"dist/tippy.esm.js\",\n \"unpkg\": \"dist/tippy-bundle.umd.min.js\",\n \"types\": \"index.d.ts\",\n \"sideEffects\": [\n \"**/*.css\"\n ],\n \"author\": \"atomiks\",\n \"contributors\": [\n \"Brett Zamir\"\n ],\n \"license\": \"MIT\",\n \"bugs\": \"https://github.com/atomiks/tippyjs/issues\",\n \"homepage\": \"https://atomiks.github.io/tippyjs/\",\n \"keywords\": [\n \"tooltip\",\n \"popover\",\n \"popper\",\n \"dropdown\",\n \"popup\",\n \"tippy\",\n \"tippy.js\"\n ],\n \"files\": [\n \"dist/\",\n \"animations/\",\n \"themes/\",\n \"headless/\",\n \"index.d.ts\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/atomiks/tippyjs.git\"\n },\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=dev rollup -c .config/rollup.config.js --watch\",\n \"build\": \"node build/index.js && rollup -c .config/rollup.config.js && bundlesize\",\n \"build:visual\": \"cross-env NODE_ENV=test rollup -c .config/rollup.config.js\",\n \"serve\": \"serve test/visual\",\n \"test:dom\": \"jest unit integration --coverage\",\n \"test:functional\": \"jest functional\",\n \"test:types\": \"tsc && tsd\",\n \"test\": \"yarn test:types && yarn test:dom && yarn test:functional\",\n \"lint\": \"eslint . --ext .ts,.js\",\n \"format\": \"prettier --write \\\"**/*.{js,ts,json,md,mdx,scss,css}\\\" --ignore-path .config/.prettierignore\",\n \"clean\": \"rimraf dist/ themes/ animations/ coverage/ .devserver/ .cache/ ./index.d.ts\",\n \"prepare\": \"yarn clean && yarn build\"\n },\n \"babel\": {\n \"extends\": \"./.config/babel.config\"\n },\n \"jest\": {\n \"preset\": \"./.config/jest.config\"\n },\n \"eslintConfig\": {\n \"extends\": \"./.config/eslint.config\"\n },\n \"prettier\": {\n \"singleQuote\": true,\n \"bracketSpacing\": false,\n \"proseWrap\": \"always\"\n },\n \"browserslist\": [\n \"> 0.5%\",\n \"not dead\",\n \"not safari < 8\"\n ],\n \"bundlesize\": [\n {\n \"path\": \"dist/tippy-bundle.umd.min.js\",\n \"maxSize\": \"10 kB\"\n },\n {\n \"path\": \"headless/dist/tippy-headless.umd.min.js\",\n \"maxSize\": \"10 kB\"\n },\n {\n \"path\": \"dist/tippy.umd.min.js\",\n \"maxSize\": \"10 kB\"\n },\n {\n \"path\": \"dist/tippy.css\",\n \"maxSize\": \"5 kB\"\n }\n ],\n \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"lint-staged\"\n }\n },\n \"lint-staged\": {\n \"src/**/*.ts\": [\n \"jest --findRelatedTests\",\n \"eslint . --ext .ts,.js\",\n \"git add\"\n ],\n \"{build,src,test,website/src}/**/*.{ts,js,json,css,scss,md}\": [\n \"prettier --write\",\n \"git add\"\n ]\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.8.3\",\n \"@babel/preset-env\": \"^7.8.3\",\n \"@babel/preset-typescript\": \"^7.13.0\",\n \"@testing-library/dom\": \"^6.11.0\",\n \"@types/node\": \"^12.12.25\",\n \"@typescript-eslint/eslint-plugin\": \"^4.16.1\",\n \"@typescript-eslint/parser\": \"^4.16.1\",\n \"autoprefixer\": \"^9.7.4\",\n \"babel-jest\": \"^25.3.0\",\n \"babel-plugin-dev-expression\": \"^0.2.2\",\n \"bundlesize\": \"^0.18.0\",\n \"colorette\": \"^1.1.0\",\n \"core-js\": \"^3.6.4\",\n \"cross-env\": \"^7.0.0\",\n \"cssnano\": \"^4.1.10\",\n \"dotenv\": \"^8.2.0\",\n \"eslint\": \"^6.8.0\",\n \"eslint-config-prettier\": \"^6.9.0\",\n \"husky\": \"^3.1.0\",\n \"jest\": \"^25.3.0\",\n \"jest-environment-jsdom-fourteen\": \"^1.0.1\",\n \"jest-image-snapshot\": \"^2.12.0\",\n \"jest-puppeteer\": \"^4.4.0\",\n \"jest-puppeteer-docker\": \"^1.3.2\",\n \"lint-staged\": \"^9.5.0\",\n \"postcss\": \"^7.0.26\",\n \"poster\": \"0.0.9\",\n \"prettier\": \"^2.0.1\",\n \"promise\": \"^8.0.3\",\n \"puppeteer\": \"^2.1.1\",\n \"rimraf\": \"^3.0.0\",\n \"rollup\": \"^1.29.1\",\n \"rollup-plugin-babel\": \"^4.3.3\",\n \"rollup-plugin-commonjs\": \"^10.0.2\",\n \"rollup-plugin-css-only\": \"^1.0.0\",\n \"rollup-plugin-json\": \"^4.0.0\",\n \"rollup-plugin-livereload\": \"^1.0.4\",\n \"rollup-plugin-node-resolve\": \"^5.2.0\",\n \"rollup-plugin-replace\": \"^2.2.0\",\n \"rollup-plugin-sass\": \"^1.2.2\",\n \"rollup-plugin-serve\": \"^1.0.1\",\n \"rollup-plugin-terser\": \"^5.2.0\",\n \"sass\": \"^1.25.0\",\n \"serve\": \"^11.3.0\",\n \"tsd\": \"^0.14.0\",\n \"typescript\": \"^4.2.2\"\n },\n \"dependencies\": {\n \"@popperjs/core\": \"^2.9.0\"\n }\n}\n" }, { "path": "src/_babel.d.ts", "content": "declare const __DEV__: boolean;\n" }, { "path": "src/addons/createSingleton.ts", "content": "import tippy from '..';\nimport {div} from '../dom-utils';\nimport {\n CreateSingleton,\n Plugin,\n CreateSingletonProps,\n ReferenceElement,\n CreateSingletonInstance,\n Instance,\n Props,\n} from '../types';\nimport {normalizeToArray, removeProperties} from '../utils';\nimport {errorWhen} from '../validation';\nimport {applyStyles, Modifier} from '@popperjs/core';\n\n// The default `applyStyles` modifier has a cleanup function that gets called\n// every time the popper is destroyed (i.e. a new target), removing the styles\n// and causing transitions to break for singletons when the console is open, but\n// most notably for non-transform styles being used, `gpuAcceleration: false`.\nconst applyStylesModifier: Modifier<'applyStyles', Record> = {\n ...applyStyles,\n effect({state}) {\n const initialStyles = {\n popper: {\n position: state.options.strategy,\n left: '0',\n top: '0',\n margin: '0',\n },\n arrow: {\n position: 'absolute',\n },\n reference: {},\n };\n\n Object.assign(state.elements.popper.style, initialStyles.popper);\n state.styles = initialStyles;\n\n if (state.elements.arrow) {\n Object.assign(state.elements.arrow.style, initialStyles.arrow);\n }\n\n // intentionally return no cleanup function\n // return () => { ... }\n },\n};\n\nconst createSingleton: CreateSingleton = (\n tippyInstances,\n optionalProps = {}\n) => {\n /* istanbul ignore else */\n if (__DEV__) {\n errorWhen(\n !Array.isArray(tippyInstances),\n [\n 'The first argument passed to createSingleton() must be an array of',\n 'tippy instances. The passed value was',\n String(tippyInstances),\n ].join(' ')\n );\n }\n\n let individualInstances = tippyInstances;\n let references: Array = [];\n let triggerTargets: Array = [];\n let currentTarget: Element | null;\n let overrides = optionalProps.overrides;\n let interceptSetPropsCleanups: Array<() => void> = [];\n let shownOnCreate = false;\n\n function setTriggerTargets(): void {\n triggerTargets = individualInstances\n .map((instance) =>\n normalizeToArray(instance.props.triggerTarget || instance.reference)\n )\n .reduce((acc, item) => acc.concat(item), []);\n }\n\n function setReferences(): void {\n references = individualInstances.map((instance) => instance.reference);\n }\n\n function enableInstances(isEnabled: boolean): void {\n individualInstances.forEach((instance) => {\n if (isEnabled) {\n instance.enable();\n } else {\n instance.disable();\n }\n });\n }\n\n function interceptSetProps(singleton: Instance): Array<() => void> {\n return individualInstances.map((instance) => {\n const originalSetProps = instance.setProps;\n\n instance.setProps = (props): void => {\n originalSetProps(props);\n\n if (instance.reference === currentTarget) {\n singleton.setProps(props);\n }\n };\n\n return (): void => {\n instance.setProps = originalSetProps;\n };\n });\n }\n\n // have to pass singleton, as it maybe undefined on first call\n function prepareInstance(\n singleton: Instance,\n target: ReferenceElement\n ): void {\n const index = triggerTargets.indexOf(target);\n\n // bail-out\n if (target === currentTarget) {\n return;\n }\n\n currentTarget = target;\n\n const overrideProps: Partial = (overrides || [])\n .concat('content')\n .reduce((acc, prop) => {\n (acc as any)[prop] = individualInstances[index].props[prop];\n return acc;\n }, {});\n\n singleton.setProps({\n ...overrideProps,\n getReferenceClientRect:\n typeof overrideProps.getReferenceClientRect === 'function'\n ? overrideProps.getReferenceClientRect\n : (): ClientRect => references[index]?.getBoundingClientRect(),\n });\n }\n\n enableInstances(false);\n setReferences();\n setTriggerTargets();\n\n const plugin: Plugin = {\n fn() {\n return {\n onDestroy(): void {\n enableInstances(true);\n },\n onHidden(): void {\n currentTarget = null;\n },\n onClickOutside(instance): void {\n if (instance.props.showOnCreate && !shownOnCreate) {\n shownOnCreate = true;\n currentTarget = null;\n }\n },\n onShow(instance): void {\n if (instance.props.showOnCreate && !shownOnCreate) {\n shownOnCreate = true;\n prepareInstance(instance, references[0]);\n }\n },\n onTrigger(instance, event): void {\n prepareInstance(instance, event.currentTarget as Element);\n },\n };\n },\n };\n\n const singleton = tippy(div(), {\n ...removeProperties(optionalProps, ['overrides']),\n plugins: [plugin, ...(optionalProps.plugins || [])],\n triggerTarget: triggerTargets,\n popperOptions: {\n ...optionalProps.popperOptions,\n modifiers: [\n ...(optionalProps.popperOptions?.modifiers || []),\n applyStylesModifier,\n ],\n },\n }) as CreateSingletonInstance;\n\n const originalShow = singleton.show;\n\n singleton.show = (target?: ReferenceElement | Instance | number): void => {\n originalShow();\n\n // first time, showOnCreate or programmatic call with no params\n // default to showing first instance\n if (!currentTarget && target == null) {\n return prepareInstance(singleton, references[0]);\n }\n\n // triggered from event (do nothing as prepareInstance already called by onTrigger)\n // programmatic call with no params when already visible (do nothing again)\n if (currentTarget && target == null) {\n return;\n }\n\n // target is index of instance\n if (typeof target === 'number') {\n return (\n references[target] && prepareInstance(singleton, references[target])\n );\n }\n\n // target is a child tippy instance\n if (individualInstances.indexOf(target as Instance) >= 0) {\n const ref = (target as Instance).reference;\n return prepareInstance(singleton, ref);\n }\n\n // target is a ReferenceElement\n if (references.indexOf(target as ReferenceElement) >= 0) {\n return prepareInstance(singleton, target as ReferenceElement);\n }\n };\n\n singleton.showNext = (): void => {\n const first = references[0];\n if (!currentTarget) {\n return singleton.show(0);\n }\n const index = references.indexOf(currentTarget);\n singleton.show(references[index + 1] || first);\n };\n\n singleton.showPrevious = (): void => {\n const last = references[references.length - 1];\n if (!currentTarget) {\n return singleton.show(last);\n }\n const index = references.indexOf(currentTarget);\n const target = references[index - 1] || last;\n singleton.show(target);\n };\n\n const originalSetProps = singleton.setProps;\n\n singleton.setProps = (props): void => {\n overrides = props.overrides || overrides;\n originalSetProps(props);\n };\n\n singleton.setInstances = (nextInstances): void => {\n enableInstances(true);\n interceptSetPropsCleanups.forEach((fn) => fn());\n\n individualInstances = nextInstances;\n\n enableInstances(false);\n setReferences();\n setTriggerTargets();\n interceptSetPropsCleanups = interceptSetProps(singleton);\n\n singleton.setProps({triggerTarget: triggerTargets});\n };\n\n interceptSetPropsCleanups = interceptSetProps(singleton);\n\n return singleton;\n};\n\nexport default createSingleton;\n" }, { "path": "src/addons/delegate.ts", "content": "import tippy from '..';\nimport {TOUCH_OPTIONS} from '../constants';\nimport {defaultProps} from '../props';\nimport {Instance, Props, Targets} from '../types';\nimport {ListenerObject} from '../types-internal';\nimport {normalizeToArray, removeProperties} from '../utils';\nimport {errorWhen} from '../validation';\n\nconst BUBBLING_EVENTS_MAP = {\n mouseover: 'mouseenter',\n focusin: 'focus',\n click: 'click',\n};\n\n/**\n * Creates a delegate instance that controls the creation of tippy instances\n * for child elements (`target` CSS selector).\n */\nfunction delegate(\n targets: Targets,\n props: Partial & {target: string}\n): Instance | Instance[] {\n /* istanbul ignore else */\n if (__DEV__) {\n errorWhen(\n !(props && props.target),\n [\n 'You must specity a `target` prop indicating a CSS selector string matching',\n 'the target elements that should receive a tippy.',\n ].join(' ')\n );\n }\n\n let listeners: ListenerObject[] = [];\n let childTippyInstances: Instance[] = [];\n let disabled = false;\n\n const {target} = props;\n\n const nativeProps = removeProperties(props, ['target']);\n const parentProps = {...nativeProps, trigger: 'manual', touch: false};\n const childProps = {\n touch: defaultProps.touch,\n ...nativeProps,\n showOnCreate: true,\n };\n\n const returnValue = tippy(targets, parentProps);\n const normalizedReturnValue = normalizeToArray(returnValue);\n\n function onTrigger(event: Event): void {\n if (!event.target || disabled) {\n return;\n }\n\n const targetNode = (event.target as Element).closest(target);\n\n if (!targetNode) {\n return;\n }\n\n // Get relevant trigger with fallbacks:\n // 1. Check `data-tippy-trigger` attribute on target node\n // 2. Fallback to `trigger` passed to `delegate()`\n // 3. Fallback to `defaultProps.trigger`\n const trigger =\n targetNode.getAttribute('data-tippy-trigger') ||\n props.trigger ||\n defaultProps.trigger;\n\n // @ts-ignore\n if (targetNode._tippy) {\n return;\n }\n\n if (event.type === 'touchstart' && typeof childProps.touch === 'boolean') {\n return;\n }\n\n if (\n event.type !== 'touchstart' &&\n trigger.indexOf((BUBBLING_EVENTS_MAP as any)[event.type]) < 0\n ) {\n return;\n }\n\n const instance = tippy(targetNode, childProps);\n\n if (instance) {\n childTippyInstances = childTippyInstances.concat(instance);\n }\n }\n\n function on(\n node: Element,\n eventType: string,\n handler: EventListener,\n options: boolean | Record = false\n ): void {\n node.addEventListener(eventType, handler, options);\n listeners.push({node, eventType, handler, options});\n }\n\n function addEventListeners(instance: Instance): void {\n const {reference} = instance;\n\n on(reference, 'touchstart', onTrigger, TOUCH_OPTIONS);\n on(reference, 'mouseover', onTrigger);\n on(reference, 'focusin', onTrigger);\n on(reference, 'click', onTrigger);\n }\n\n function removeEventListeners(): void {\n listeners.forEach(({node, eventType, handler, options}: ListenerObject) => {\n node.removeEventListener(eventType, handler, options);\n });\n listeners = [];\n }\n\n function applyMutations(instance: Instance): void {\n const originalDestroy = instance.destroy;\n const originalEnable = instance.enable;\n const originalDisable = instance.disable;\n\n instance.destroy = (shouldDestroyChildInstances = true): void => {\n if (shouldDestroyChildInstances) {\n childTippyInstances.forEach((instance) => {\n instance.destroy();\n });\n }\n\n childTippyInstances = [];\n\n removeEventListeners();\n originalDestroy();\n };\n\n instance.enable = (): void => {\n originalEnable();\n childTippyInstances.forEach((instance) => instance.enable());\n disabled = false;\n };\n\n instance.disable = (): void => {\n originalDisable();\n childTippyInstances.forEach((instance) => instance.disable());\n disabled = true;\n };\n\n addEventListeners(instance);\n }\n\n normalizedReturnValue.forEach(applyMutations);\n\n return returnValue;\n}\n\nexport default delegate;\n" }, { "path": "src/bindGlobalEventListeners.ts", "content": "import {TOUCH_OPTIONS} from './constants';\nimport {isReferenceElement} from './dom-utils';\n\nexport const currentInput = {isTouch: false};\nlet lastMouseMoveTime = 0;\n\n/**\n * When a `touchstart` event is fired, it's assumed the user is using touch\n * input. We'll bind a `mousemove` event listener to listen for mouse input in\n * the future. This way, the `isTouch` property is fully dynamic and will handle\n * hybrid devices that use a mix of touch + mouse input.\n */\nexport function onDocumentTouchStart(): void {\n if (currentInput.isTouch) {\n return;\n }\n\n currentInput.isTouch = true;\n\n if (window.performance) {\n document.addEventListener('mousemove', onDocumentMouseMove);\n }\n}\n\n/**\n * When two `mousemove` event are fired consecutively within 20ms, it's assumed\n * the user is using mouse input again. `mousemove` can fire on touch devices as\n * well, but very rarely that quickly.\n */\nexport function onDocumentMouseMove(): void {\n const now = performance.now();\n\n if (now - lastMouseMoveTime < 20) {\n currentInput.isTouch = false;\n\n document.removeEventListener('mousemove', onDocumentMouseMove);\n }\n\n lastMouseMoveTime = now;\n}\n\n/**\n * When an element is in focus and has a tippy, leaving the tab/window and\n * returning causes it to show again. For mouse users this is unexpected, but\n * for keyboard use it makes sense.\n * TODO: find a better technique to solve this problem\n */\nexport function onWindowBlur(): void {\n const activeElement = document.activeElement as HTMLElement | null;\n\n if (isReferenceElement(activeElement)) {\n const instance = activeElement._tippy!;\n\n if (activeElement.blur && !instance.state.isVisible) {\n activeElement.blur();\n }\n }\n}\n\nexport default function bindGlobalEventListeners(): void {\n document.addEventListener('touchstart', onDocumentTouchStart, TOUCH_OPTIONS);\n window.addEventListener('blur', onWindowBlur);\n}\n" }, { "path": "src/browser.ts", "content": "export const isBrowser =\n typeof window !== 'undefined' && typeof document !== 'undefined';\n\nexport const isIE11 = isBrowser\n ? // @ts-ignore\n !!window.msCrypto\n : false;\n" }, { "path": "src/constants.ts", "content": "export const ROUND_ARROW =\n '';\n\nexport const BOX_CLASS = `__NAMESPACE_PREFIX__-box`;\nexport const CONTENT_CLASS = `__NAMESPACE_PREFIX__-content`;\nexport const BACKDROP_CLASS = `__NAMESPACE_PREFIX__-backdrop`;\nexport const ARROW_CLASS = `__NAMESPACE_PREFIX__-arrow`;\nexport const SVG_ARROW_CLASS = `__NAMESPACE_PREFIX__-svg-arrow`;\n\nexport const TOUCH_OPTIONS = {passive: true, capture: true};\n\nexport const TIPPY_DEFAULT_APPEND_TO = () => document.body;\n" }, { "path": "src/createTippy.ts", "content": "import {createPopper, StrictModifiers, Modifier} from '@popperjs/core';\nimport {currentInput} from './bindGlobalEventListeners';\nimport {isIE11} from './browser';\nimport {TIPPY_DEFAULT_APPEND_TO, TOUCH_OPTIONS} from './constants';\nimport {\n actualContains,\n div,\n getOwnerDocument,\n isCursorOutsideInteractiveBorder,\n isMouseEvent,\n setTransitionDuration,\n setVisibilityState,\n updateTransitionEndListener,\n} from './dom-utils';\nimport {defaultProps, evaluateProps, getExtendedPassedProps} from './props';\nimport {getChildren} from './template';\nimport {\n Content,\n Instance,\n LifecycleHooks,\n PopperElement,\n Props,\n ReferenceElement,\n} from './types';\nimport {ListenerObject, PopperTreeData, PopperChildren} from './types-internal';\nimport {\n arrayFrom,\n debounce,\n getValueAtIndexOrReturn,\n invokeWithArgsOrReturn,\n normalizeToArray,\n pushIfUnique,\n splitBySpaces,\n unique,\n removeUndefinedProps,\n} from './utils';\nimport {createMemoryLeakWarning, errorWhen, warnWhen} from './validation';\n\nlet idCounter = 1;\nlet mouseMoveListeners: ((event: MouseEvent) => void)[] = [];\n\n// Used by `hideAll()`\nexport let mountedInstances: Instance[] = [];\n\nexport default function createTippy(\n reference: ReferenceElement,\n passedProps: Partial\n): Instance {\n const props = evaluateProps(reference, {\n ...defaultProps,\n ...getExtendedPassedProps(removeUndefinedProps(passedProps)),\n });\n\n // ===========================================================================\n // šŸ”’ Private members\n // ===========================================================================\n let showTimeout: any;\n let hideTimeout: any;\n let scheduleHideAnimationFrame: number;\n let isVisibleFromClick = false;\n let didHideDueToDocumentMouseDown = false;\n let didTouchMove = false;\n let ignoreOnFirstUpdate = false;\n let lastTriggerEvent: Event | undefined;\n let currentTransitionEndListener: (event: TransitionEvent) => void;\n let onFirstUpdate: () => void;\n let listeners: ListenerObject[] = [];\n let debouncedOnMouseMove = debounce(onMouseMove, props.interactiveDebounce);\n let currentTarget: Element;\n\n // ===========================================================================\n // šŸ”‘ Public members\n // ===========================================================================\n const id = idCounter++;\n const popperInstance = null;\n const plugins = unique(props.plugins);\n\n const state = {\n // Is the instance currently enabled?\n isEnabled: true,\n // Is the tippy currently showing and not transitioning out?\n isVisible: false,\n // Has the instance been destroyed?\n isDestroyed: false,\n // Is the tippy currently mounted to the DOM?\n isMounted: false,\n // Has the tippy finished transitioning in?\n isShown: false,\n };\n\n const instance: Instance = {\n // properties\n id,\n reference,\n popper: div(),\n popperInstance,\n props,\n state,\n plugins,\n // methods\n clearDelayTimeouts,\n setProps,\n setContent,\n show,\n hide,\n hideWithInteractivity,\n enable,\n disable,\n unmount,\n destroy,\n };\n\n // TODO: Investigate why this early return causes a TDZ error in the tests ā€”\n // it doesn't seem to happen in the browser\n /* istanbul ignore if */\n if (!props.render) {\n if (__DEV__) {\n errorWhen(true, 'render() function has not been supplied.');\n }\n\n return instance;\n }\n\n // ===========================================================================\n // Initial mutations\n // ===========================================================================\n const {popper, onUpdate} = props.render(instance);\n\n popper.setAttribute('data-__NAMESPACE_PREFIX__-root', '');\n popper.id = `__NAMESPACE_PREFIX__-${instance.id}`;\n\n instance.popper = popper;\n reference._tippy = instance;\n popper._tippy = instance;\n\n const pluginsHooks = plugins.map((plugin) => plugin.fn(instance));\n const hasAriaExpanded = reference.hasAttribute('aria-expanded');\n\n addListeners();\n handleAriaExpandedAttribute();\n handleStyles();\n\n invokeHook('onCreate', [instance]);\n\n if (props.showOnCreate) {\n scheduleShow();\n }\n\n // Prevent a tippy with a delay from hiding if the cursor left then returned\n // before it started hiding\n popper.addEventListener('mouseenter', () => {\n if (instance.props.interactive && instance.state.isVisible) {\n instance.clearDelayTimeouts();\n }\n });\n\n popper.addEventListener('mouseleave', () => {\n if (\n instance.props.interactive &&\n instance.props.trigger.indexOf('mouseenter') >= 0\n ) {\n getDocument().addEventListener('mousemove', debouncedOnMouseMove);\n }\n });\n\n return instance;\n\n // ===========================================================================\n // šŸ”’ Private methods\n // ===========================================================================\n function getNormalizedTouchSettings(): [string | boolean, number] {\n const {touch} = instance.props;\n return Array.isArray(touch) ? touch : [touch, 0];\n }\n\n function getIsCustomTouchBehavior(): boolean {\n return getNormalizedTouchSettings()[0] === 'hold';\n }\n\n function getIsDefaultRenderFn(): boolean {\n // @ts-ignore\n return !!instance.props.render?.$$tippy;\n }\n\n function getCurrentTarget(): Element {\n return currentTarget || reference;\n }\n\n function getDocument(): Document {\n const parent = getCurrentTarget().parentNode as Element;\n return parent ? getOwnerDocument(parent) : document;\n }\n\n function getDefaultTemplateChildren(): PopperChildren {\n return getChildren(popper);\n }\n\n function getDelay(isShow: boolean): number {\n // For touch or keyboard input, force `0` delay for UX reasons\n // Also if the instance is mounted but not visible (transitioning out),\n // ignore delay\n if (\n (instance.state.isMounted && !instance.state.isVisible) ||\n currentInput.isTouch ||\n (lastTriggerEvent && lastTriggerEvent.type === 'focus')\n ) {\n return 0;\n }\n\n return getValueAtIndexOrReturn(\n instance.props.delay,\n isShow ? 0 : 1,\n defaultProps.delay\n );\n }\n\n function handleStyles(fromHide = false): void {\n popper.style.pointerEvents =\n instance.props.interactive && !fromHide ? '' : 'none';\n popper.style.zIndex = `${instance.props.zIndex}`;\n }\n\n function invokeHook(\n hook: keyof LifecycleHooks,\n args: [Instance, any?],\n shouldInvokePropsHook = true\n ): void {\n pluginsHooks.forEach((pluginHooks) => {\n if (pluginHooks[hook]) {\n pluginHooks[hook]!(...args);\n }\n });\n\n if (shouldInvokePropsHook) {\n instance.props[hook](...args);\n }\n }\n\n function handleAriaContentAttribute(): void {\n const {aria} = instance.props;\n\n if (!aria.content) {\n return;\n }\n\n const attr = `aria-${aria.content}`;\n const id = popper.id;\n const nodes = normalizeToArray(instance.props.triggerTarget || reference);\n\n nodes.forEach((node) => {\n const currentValue = node.getAttribute(attr);\n\n if (instance.state.isVisible) {\n node.setAttribute(attr, currentValue ? `${currentValue} ${id}` : id);\n } else {\n const nextValue = currentValue && currentValue.replace(id, '').trim();\n\n if (nextValue) {\n node.setAttribute(attr, nextValue);\n } else {\n node.removeAttribute(attr);\n }\n }\n });\n }\n\n function handleAriaExpandedAttribute(): void {\n if (hasAriaExpanded || !instance.props.aria.expanded) {\n return;\n }\n\n const nodes = normalizeToArray(instance.props.triggerTarget || reference);\n\n nodes.forEach((node) => {\n if (instance.props.interactive) {\n node.setAttribute(\n 'aria-expanded',\n instance.state.isVisible && node === getCurrentTarget()\n ? 'true'\n : 'false'\n );\n } else {\n node.removeAttribute('aria-expanded');\n }\n });\n }\n\n function cleanupInteractiveMouseListeners(): void {\n getDocument().removeEventListener('mousemove', debouncedOnMouseMove);\n mouseMoveListeners = mouseMoveListeners.filter(\n (listener) => listener !== debouncedOnMouseMove\n );\n }\n\n function onDocumentPress(event: MouseEvent | TouchEvent): void {\n // Moved finger to scroll instead of an intentional tap outside\n if (currentInput.isTouch) {\n if (didTouchMove || event.type === 'mousedown') {\n return;\n }\n }\n\n const actualTarget =\n (event.composedPath && event.composedPath()[0]) || event.target;\n\n // Clicked on interactive popper\n if (\n instance.props.interactive &&\n actualContains(popper, actualTarget as Element)\n ) {\n return;\n }\n\n // Clicked on the event listeners target\n if (\n normalizeToArray(instance.props.triggerTarget || reference).some((el) =>\n actualContains(el, actualTarget as Element)\n )\n ) {\n if (currentInput.isTouch) {\n return;\n }\n\n if (\n instance.state.isVisible &&\n instance.props.trigger.indexOf('click') >= 0\n ) {\n return;\n }\n } else {\n invokeHook('onClickOutside', [instance, event]);\n }\n\n if (instance.props.hideOnClick === true) {\n instance.clearDelayTimeouts();\n instance.hide();\n\n // `mousedown` event is fired right before `focus` if pressing the\n // currentTarget. This lets a tippy with `focus` trigger know that it\n // should not show\n didHideDueToDocumentMouseDown = true;\n setTimeout(() => {\n didHideDueToDocumentMouseDown = false;\n });\n\n // The listener gets added in `scheduleShow()`, but this may be hiding it\n // before it shows, and hide()'s early bail-out behavior can prevent it\n // from being cleaned up\n if (!instance.state.isMounted) {\n removeDocumentPress();\n }\n }\n }\n\n function onTouchMove(): void {\n didTouchMove = true;\n }\n\n function onTouchStart(): void {\n didTouchMove = false;\n }\n\n function addDocumentPress(): void {\n const doc = getDocument();\n doc.addEventListener('mousedown', onDocumentPress, true);\n doc.addEventListener('touchend', onDocumentPress, TOUCH_OPTIONS);\n doc.addEventListener('touchstart', onTouchStart, TOUCH_OPTIONS);\n doc.addEventListener('touchmove', onTouchMove, TOUCH_OPTIONS);\n }\n\n function removeDocumentPress(): void {\n const doc = getDocument();\n doc.removeEventListener('mousedown', onDocumentPress, true);\n doc.removeEventListener('touchend', onDocumentPress, TOUCH_OPTIONS);\n doc.removeEventListener('touchstart', onTouchStart, TOUCH_OPTIONS);\n doc.removeEventListener('touchmove', onTouchMove, TOUCH_OPTIONS);\n }\n\n function onTransitionedOut(duration: number, callback: () => void): void {\n onTransitionEnd(duration, () => {\n if (\n !instance.state.isVisible &&\n popper.parentNode &&\n popper.parentNode.contains(popper)\n ) {\n callback();\n }\n });\n }\n\n function onTransitionedIn(duration: number, callback: () => void): void {\n onTransitionEnd(duration, callback);\n }\n\n function onTransitionEnd(duration: number, callback: () => void): void {\n const box = getDefaultTemplateChildren().box;\n\n function listener(event: TransitionEvent): void {\n if (event.target === box) {\n updateTransitionEndListener(box, 'remove', listener);\n callback();\n }\n }\n\n // Make callback synchronous if duration is 0\n // `transitionend` won't fire otherwise\n if (duration === 0) {\n return callback();\n }\n\n updateTransitionEndListener(box, 'remove', currentTransitionEndListener);\n updateTransitionEndListener(box, 'add', listener);\n\n currentTransitionEndListener = listener;\n }\n\n function on(\n eventType: string,\n handler: EventListener,\n options: boolean | Record = false\n ): void {\n const nodes = normalizeToArray(instance.props.triggerTarget || reference);\n nodes.forEach((node) => {\n node.addEventListener(eventType, handler, options);\n listeners.push({node, eventType, handler, options});\n });\n }\n\n function addListeners(): void {\n if (getIsCustomTouchBehavior()) {\n on('touchstart', onTrigger, {passive: true});\n on('touchend', onMouseLeave as EventListener, {passive: true});\n }\n\n splitBySpaces(instance.props.trigger).forEach((eventType) => {\n if (eventType === 'manual') {\n return;\n }\n\n on(eventType, onTrigger);\n\n switch (eventType) {\n case 'mouseenter':\n on('mouseleave', onMouseLeave as EventListener);\n break;\n case 'focus':\n on(isIE11 ? 'focusout' : 'blur', onBlurOrFocusOut as EventListener);\n break;\n case 'focusin':\n on('focusout', onBlurOrFocusOut as EventListener);\n break;\n }\n });\n }\n\n function removeListeners(): void {\n listeners.forEach(({node, eventType, handler, options}: ListenerObject) => {\n node.removeEventListener(eventType, handler, options);\n });\n listeners = [];\n }\n\n function onTrigger(event: Event): void {\n let shouldScheduleClickHide = false;\n\n if (\n !instance.state.isEnabled ||\n isEventListenerStopped(event) ||\n didHideDueToDocumentMouseDown\n ) {\n return;\n }\n\n const wasFocused = lastTriggerEvent?.type === 'focus';\n\n lastTriggerEvent = event;\n currentTarget = event.currentTarget as Element;\n\n handleAriaExpandedAttribute();\n\n if (!instance.state.isVisible && isMouseEvent(event)) {\n // If scrolling, `mouseenter` events can be fired if the cursor lands\n // over a new target, but `mousemove` events don't get fired. This\n // causes interactive tooltips to get stuck open until the cursor is\n // moved\n mouseMoveListeners.forEach((listener) => listener(event));\n }\n\n // Toggle show/hide when clicking click-triggered tooltips\n if (\n event.type === 'click' &&\n (instance.props.trigger.indexOf('mouseenter') < 0 ||\n isVisibleFromClick) &&\n instance.props.hideOnClick !== false &&\n instance.state.isVisible\n ) {\n shouldScheduleClickHide = true;\n } else {\n scheduleShow(event);\n }\n\n if (event.type === 'click') {\n isVisibleFromClick = !shouldScheduleClickHide;\n }\n\n if (shouldScheduleClickHide && !wasFocused) {\n scheduleHide(event);\n }\n }\n\n function onMouseMove(event: MouseEvent): void {\n const target = event.target as Node;\n const isCursorOverReferenceOrPopper =\n getCurrentTarget().contains(target) || popper.contains(target);\n\n if (event.type === 'mousemove' && isCursorOverReferenceOrPopper) {\n return;\n }\n\n const popperTreeData = getNestedPopperTree()\n .concat(popper)\n .map((popper) => {\n const instance = popper._tippy!;\n const state = instance.popperInstance?.state;\n\n if (state) {\n return {\n popperRect: popper.getBoundingClientRect(),\n popperState: state,\n props,\n };\n }\n\n return null;\n })\n .filter(Boolean) as PopperTreeData[];\n\n if (isCursorOutsideInteractiveBorder(popperTreeData, event)) {\n cleanupInteractiveMouseListeners();\n scheduleHide(event);\n }\n }\n\n function onMouseLeave(event: MouseEvent): void {\n const shouldBail =\n isEventListenerStopped(event) ||\n (instance.props.trigger.indexOf('click') >= 0 && isVisibleFromClick);\n\n if (shouldBail) {\n return;\n }\n\n if (instance.props.interactive) {\n instance.hideWithInteractivity(event);\n return;\n }\n\n scheduleHide(event);\n }\n\n function onBlurOrFocusOut(event: FocusEvent): void {\n if (\n instance.props.trigger.indexOf('focusin') < 0 &&\n event.target !== getCurrentTarget()\n ) {\n return;\n }\n\n // If focus was moved to within the popper\n if (\n instance.props.interactive &&\n event.relatedTarget &&\n popper.contains(event.relatedTarget as Element)\n ) {\n return;\n }\n\n scheduleHide(event);\n }\n\n function isEventListenerStopped(event: Event): boolean {\n return currentInput.isTouch\n ? getIsCustomTouchBehavior() !== event.type.indexOf('touch') >= 0\n : false;\n }\n\n function createPopperInstance(): void {\n destroyPopperInstance();\n\n const {\n popperOptions,\n placement,\n offset,\n getReferenceClientRect,\n moveTransition,\n } = instance.props;\n\n const arrow = getIsDefaultRenderFn() ? getChildren(popper).arrow : null;\n\n const computedReference = getReferenceClientRect\n ? {\n getBoundingClientRect: getReferenceClientRect,\n contextElement:\n getReferenceClientRect.contextElement || getCurrentTarget(),\n }\n : reference;\n\n const tippyModifier: Modifier<'$$tippy', Record> = {\n name: '$$tippy',\n enabled: true,\n phase: 'beforeWrite',\n requires: ['computeStyles'],\n fn({state}) {\n if (getIsDefaultRenderFn()) {\n const {box} = getDefaultTemplateChildren();\n\n ['placement', 'reference-hidden', 'escaped'].forEach((attr) => {\n if (attr === 'placement') {\n box.setAttribute('data-placement', state.placement);\n } else {\n if (state.attributes.popper[`data-popper-${attr}`]) {\n box.setAttribute(`data-${attr}`, '');\n } else {\n box.removeAttribute(`data-${attr}`);\n }\n }\n });\n\n state.attributes.popper = {};\n }\n },\n };\n\n type TippyModifier = Modifier<'$$tippy', Record>;\n type ExtendedModifiers = StrictModifiers | Partial;\n\n const modifiers: Array = [\n {\n name: 'offset',\n options: {\n offset,\n },\n },\n {\n name: 'preventOverflow',\n options: {\n padding: {\n top: 2,\n bottom: 2,\n left: 5,\n right: 5,\n },\n },\n },\n {\n name: 'flip',\n options: {\n padding: 5,\n },\n },\n {\n name: 'computeStyles',\n options: {\n adaptive: !moveTransition,\n },\n },\n tippyModifier,\n ];\n\n if (getIsDefaultRenderFn() && arrow) {\n modifiers.push({\n name: 'arrow',\n options: {\n element: arrow,\n padding: 3,\n },\n });\n }\n\n modifiers.push(...(popperOptions?.modifiers || []));\n\n instance.popperInstance = createPopper(\n computedReference,\n popper,\n {\n ...popperOptions,\n placement,\n onFirstUpdate,\n modifiers,\n }\n );\n }\n\n function destroyPopperInstance(): void {\n if (instance.popperInstance) {\n instance.popperInstance.destroy();\n instance.popperInstance = null;\n }\n }\n\n function mount(): void {\n const {appendTo} = instance.props;\n\n let parentNode: any;\n\n // By default, we'll append the popper to the triggerTargets's parentNode so\n // it's directly after the reference element so the elements inside the\n // tippy can be tabbed to\n // If there are clipping issues, the user can specify a different appendTo\n // and ensure focus management is handled correctly manually\n const node = getCurrentTarget();\n\n if (\n (instance.props.interactive && appendTo === TIPPY_DEFAULT_APPEND_TO) ||\n appendTo === 'parent'\n ) {\n parentNode = node.parentNode;\n } else {\n parentNode = invokeWithArgsOrReturn(appendTo, [node]);\n }\n\n // The popper element needs to exist on the DOM before its position can be\n // updated as Popper needs to read its dimensions\n if (!parentNode.contains(popper)) {\n parentNode.appendChild(popper);\n }\n\n instance.state.isMounted = true;\n\n createPopperInstance();\n\n /* istanbul ignore else */\n if (__DEV__) {\n // Accessibility check\n warnWhen(\n instance.props.interactive &&\n appendTo === defaultProps.appendTo &&\n node.nextElementSibling !== popper,\n [\n 'Interactive tippy element may not be accessible via keyboard',\n 'navigation because it is not directly after the reference element',\n 'in the DOM source order.',\n '\\n\\n',\n 'Using a wrapper
or tag around the reference element',\n 'solves this by creating a new parentNode context.',\n '\\n\\n',\n 'Specifying `appendTo: document.body` silences this warning, but it',\n 'assumes you are using a focus management solution to handle',\n 'keyboard navigation.',\n '\\n\\n',\n 'See: https://atomiks.github.io/tippyjs/v6/accessibility/#interactivity',\n ].join(' ')\n );\n }\n }\n\n function getNestedPopperTree(): PopperElement[] {\n return arrayFrom(\n popper.querySelectorAll('[data-__NAMESPACE_PREFIX__-root]')\n );\n }\n\n function scheduleShow(event?: Event): void {\n instance.clearDelayTimeouts();\n\n if (event) {\n invokeHook('onTrigger', [instance, event]);\n }\n\n addDocumentPress();\n\n let delay = getDelay(true);\n const [touchValue, touchDelay] = getNormalizedTouchSettings();\n\n if (currentInput.isTouch && touchValue === 'hold' && touchDelay) {\n delay = touchDelay;\n }\n\n if (delay) {\n showTimeout = setTimeout(() => {\n instance.show();\n }, delay);\n } else {\n instance.show();\n }\n }\n\n function scheduleHide(event: Event): void {\n instance.clearDelayTimeouts();\n\n invokeHook('onUntrigger', [instance, event]);\n\n if (!instance.state.isVisible) {\n removeDocumentPress();\n\n return;\n }\n\n // For interactive tippies, scheduleHide is added to a document.body handler\n // from onMouseLeave so must intercept scheduled hides from mousemove/leave\n // events when trigger contains mouseenter and click, and the tip is\n // currently shown as a result of a click.\n if (\n instance.props.trigger.indexOf('mouseenter') >= 0 &&\n instance.props.trigger.indexOf('click') >= 0 &&\n ['mouseleave', 'mousemove'].indexOf(event.type) >= 0 &&\n isVisibleFromClick\n ) {\n return;\n }\n\n const delay = getDelay(false);\n\n if (delay) {\n hideTimeout = setTimeout(() => {\n if (instance.state.isVisible) {\n instance.hide();\n }\n }, delay);\n } else {\n // Fixes a `transitionend` problem when it fires 1 frame too\n // late sometimes, we don't want hide() to be called.\n scheduleHideAnimationFrame = requestAnimationFrame(() => {\n instance.hide();\n });\n }\n }\n\n // ===========================================================================\n // šŸ”‘ Public methods\n // ===========================================================================\n function enable(): void {\n instance.state.isEnabled = true;\n }\n\n function disable(): void {\n // Disabling the instance should also hide it\n // https://github.com/atomiks/tippy.js-react/issues/106\n instance.hide();\n instance.state.isEnabled = false;\n }\n\n function clearDelayTimeouts(): void {\n clearTimeout(showTimeout);\n clearTimeout(hideTimeout);\n cancelAnimationFrame(scheduleHideAnimationFrame);\n }\n\n function setProps(partialProps: Partial): void {\n /* istanbul ignore else */\n if (__DEV__) {\n warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('setProps'));\n }\n\n if (instance.state.isDestroyed) {\n return;\n }\n\n invokeHook('onBeforeUpdate', [instance, partialProps]);\n\n removeListeners();\n\n const prevProps = instance.props;\n const nextProps = evaluateProps(reference, {\n ...prevProps,\n ...removeUndefinedProps(partialProps),\n ignoreAttributes: true,\n });\n\n instance.props = nextProps;\n\n addListeners();\n\n if (prevProps.interactiveDebounce !== nextProps.interactiveDebounce) {\n cleanupInteractiveMouseListeners();\n debouncedOnMouseMove = debounce(\n onMouseMove,\n nextProps.interactiveDebounce\n );\n }\n\n // Ensure stale aria-expanded attributes are removed\n if (prevProps.triggerTarget && !nextProps.triggerTarget) {\n normalizeToArray(prevProps.triggerTarget).forEach((node) => {\n node.removeAttribute('aria-expanded');\n });\n } else if (nextProps.triggerTarget) {\n reference.removeAttribute('aria-expanded');\n }\n\n handleAriaExpandedAttribute();\n handleStyles();\n\n if (onUpdate) {\n onUpdate(prevProps, nextProps);\n }\n\n if (instance.popperInstance) {\n createPopperInstance();\n\n // Fixes an issue with nested tippies if they are all getting re-rendered,\n // and the nested ones get re-rendered first.\n // https://github.com/atomiks/tippyjs-react/issues/177\n // TODO: find a cleaner / more efficient solution(!)\n getNestedPopperTree().forEach((nestedPopper) => {\n // React (and other UI libs likely) requires a rAF wrapper as it flushes\n // its work in one\n requestAnimationFrame(nestedPopper._tippy!.popperInstance!.forceUpdate);\n });\n }\n\n invokeHook('onAfterUpdate', [instance, partialProps]);\n }\n\n function setContent(content: Content): void {\n instance.setProps({content});\n }\n\n function show(): void {\n /* istanbul ignore else */\n if (__DEV__) {\n warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('show'));\n }\n\n // Early bail-out\n const isAlreadyVisible = instance.state.isVisible;\n const isDestroyed = instance.state.isDestroyed;\n const isDisabled = !instance.state.isEnabled;\n const isTouchAndTouchDisabled =\n currentInput.isTouch && !instance.props.touch;\n const duration = getValueAtIndexOrReturn(\n instance.props.duration,\n 0,\n defaultProps.duration\n );\n\n if (\n isAlreadyVisible ||\n isDestroyed ||\n isDisabled ||\n isTouchAndTouchDisabled\n ) {\n return;\n }\n\n // Normalize `disabled` behavior across browsers.\n // Firefox allows events on disabled elements, but Chrome doesn't.\n // Using a wrapper element (i.e. ) is recommended.\n if (getCurrentTarget().hasAttribute('disabled')) {\n return;\n }\n\n invokeHook('onShow', [instance], false);\n if (instance.props.onShow(instance) === false) {\n return;\n }\n\n instance.state.isVisible = true;\n\n if (getIsDefaultRenderFn()) {\n popper.style.visibility = 'visible';\n }\n\n handleStyles();\n addDocumentPress();\n\n if (!instance.state.isMounted) {\n popper.style.transition = 'none';\n }\n\n // If flipping to the opposite side after hiding at least once, the\n // animation will use the wrong placement without resetting the duration\n if (getIsDefaultRenderFn()) {\n const {box, content} = getDefaultTemplateChildren();\n setTransitionDuration([box, content], 0);\n }\n\n onFirstUpdate = (): void => {\n if (!instance.state.isVisible || ignoreOnFirstUpdate) {\n return;\n }\n\n ignoreOnFirstUpdate = true;\n\n // reflow\n void popper.offsetHeight;\n\n popper.style.transition = instance.props.moveTransition;\n\n if (getIsDefaultRenderFn() && instance.props.animation) {\n const {box, content} = getDefaultTemplateChildren();\n setTransitionDuration([box, content], duration);\n setVisibilityState([box, content], 'visible');\n }\n\n handleAriaContentAttribute();\n handleAriaExpandedAttribute();\n\n pushIfUnique(mountedInstances, instance);\n\n // certain modifiers (e.g. `maxSize`) require a second update after the\n // popper has been positioned for the first time\n instance.popperInstance?.forceUpdate();\n\n invokeHook('onMount', [instance]);\n\n if (instance.props.animation && getIsDefaultRenderFn()) {\n onTransitionedIn(duration, () => {\n instance.state.isShown = true;\n invokeHook('onShown', [instance]);\n });\n }\n };\n\n mount();\n }\n\n function hide(): void {\n /* istanbul ignore else */\n if (__DEV__) {\n warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('hide'));\n }\n\n // Early bail-out\n const isAlreadyHidden = !instance.state.isVisible;\n const isDestroyed = instance.state.isDestroyed;\n const isDisabled = !instance.state.isEnabled;\n const duration = getValueAtIndexOrReturn(\n instance.props.duration,\n 1,\n defaultProps.duration\n );\n\n if (isAlreadyHidden || isDestroyed || isDisabled) {\n return;\n }\n\n invokeHook('onHide', [instance], false);\n if (instance.props.onHide(instance) === false) {\n return;\n }\n\n instance.state.isVisible = false;\n instance.state.isShown = false;\n ignoreOnFirstUpdate = false;\n isVisibleFromClick = false;\n\n if (getIsDefaultRenderFn()) {\n popper.style.visibility = 'hidden';\n }\n\n cleanupInteractiveMouseListeners();\n removeDocumentPress();\n handleStyles(true);\n\n if (getIsDefaultRenderFn()) {\n const {box, content} = getDefaultTemplateChildren();\n\n if (instance.props.animation) {\n setTransitionDuration([box, content], duration);\n setVisibilityState([box, content], 'hidden');\n }\n }\n\n handleAriaContentAttribute();\n handleAriaExpandedAttribute();\n\n if (instance.props.animation) {\n if (getIsDefaultRenderFn()) {\n onTransitionedOut(duration, instance.unmount);\n }\n } else {\n instance.unmount();\n }\n }\n\n function hideWithInteractivity(event: MouseEvent): void {\n /* istanbul ignore else */\n if (__DEV__) {\n warnWhen(\n instance.state.isDestroyed,\n createMemoryLeakWarning('hideWithInteractivity')\n );\n }\n\n getDocument().addEventListener('mousemove', debouncedOnMouseMove);\n pushIfUnique(mouseMoveListeners, debouncedOnMouseMove);\n debouncedOnMouseMove(event);\n }\n\n function unmount(): void {\n /* istanbul ignore else */\n if (__DEV__) {\n warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('unmount'));\n }\n\n if (instance.state.isVisible) {\n instance.hide();\n }\n\n if (!instance.state.isMounted) {\n return;\n }\n\n destroyPopperInstance();\n\n // If a popper is not interactive, it will be appended outside the popper\n // tree by default. This seems mainly for interactive tippies, but we should\n // find a workaround if possible\n getNestedPopperTree().forEach((nestedPopper) => {\n nestedPopper._tippy!.unmount();\n });\n\n if (popper.parentNode) {\n popper.parentNode.removeChild(popper);\n }\n\n mountedInstances = mountedInstances.filter((i) => i !== instance);\n\n instance.state.isMounted = false;\n invokeHook('onHidden', [instance]);\n }\n\n function destroy(): void {\n /* istanbul ignore else */\n if (__DEV__) {\n warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('destroy'));\n }\n\n if (instance.state.isDestroyed) {\n return;\n }\n\n instance.clearDelayTimeouts();\n instance.unmount();\n\n removeListeners();\n\n delete reference._tippy;\n\n instance.state.isDestroyed = true;\n\n invokeHook('onDestroy', [instance]);\n }\n}\n" }, { "path": "src/css.ts", "content": "export function injectCSS(css: string): void {\n const style = document.createElement('style');\n style.textContent = css;\n style.setAttribute('data-__NAMESPACE_PREFIX__-stylesheet', '');\n const head = document.head;\n const firstStyleOrLinkTag = document.querySelector('head>style,head>link');\n\n if (firstStyleOrLinkTag) {\n head.insertBefore(style, firstStyleOrLinkTag);\n } else {\n head.appendChild(style);\n }\n}\n" }, { "path": "src/dom-utils.ts", "content": "import {ReferenceElement, Targets} from './types';\nimport {PopperTreeData} from './types-internal';\nimport {arrayFrom, isType, normalizeToArray, getBasePlacement} from './utils';\n\nexport function div(): HTMLDivElement {\n return document.createElement('div');\n}\n\nexport function isElement(value: unknown): value is Element | DocumentFragment {\n return ['Element', 'Fragment'].some((type) => isType(value, type));\n}\n\nexport function isNodeList(value: unknown): value is NodeList {\n return isType(value, 'NodeList');\n}\n\nexport function isMouseEvent(value: unknown): value is MouseEvent {\n return isType(value, 'MouseEvent');\n}\n\nexport function isReferenceElement(value: any): value is ReferenceElement {\n return !!(value && value._tippy && value._tippy.reference === value);\n}\n\nexport function getArrayOfElements(value: Targets): Element[] {\n if (isElement(value)) {\n return [value];\n }\n\n if (isNodeList(value)) {\n return arrayFrom(value);\n }\n\n if (Array.isArray(value)) {\n return value;\n }\n\n return arrayFrom(document.querySelectorAll(value));\n}\n\nexport function setTransitionDuration(\n els: (HTMLDivElement | null)[],\n value: number\n): void {\n els.forEach((el) => {\n if (el) {\n el.style.transitionDuration = `${value}ms`;\n }\n });\n}\n\nexport function setVisibilityState(\n els: (HTMLDivElement | null)[],\n state: 'visible' | 'hidden'\n): void {\n els.forEach((el) => {\n if (el) {\n el.setAttribute('data-state', state);\n }\n });\n}\n\nexport function getOwnerDocument(\n elementOrElements: Element | Element[]\n): Document {\n const [element] = normalizeToArray(elementOrElements);\n\n // Elements created via a