@stenajs-webui/tooltip 15.5.5 → 15.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +2 -2
  3. package/dist/components/popover/Popover.d.ts +1 -2
  4. package/dist/hooks/UseTippyInstance.d.ts +0 -2
  5. package/dist/index.es.js +4 -3
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/index.js +4 -3
  8. package/dist/index.js.map +1 -1
  9. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
1
+ # v15.5.8 (Thu May 19 2022)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Add compatibility with Next.js and vitest [#426](https://github.com/StenaIT/stenajs-webui/pull/426) ([@lindskogen](https://github.com/lindskogen) [@mattias800](https://github.com/mattias800))
6
+
7
+ #### Authors: 2
8
+
9
+ - Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
10
+ - Mattias Andersson ([@mattias800](https://github.com/mattias800))
11
+
12
+ ---
13
+
1
14
  # v15.0.3 (Fri Feb 25 2022)
2
15
 
3
16
  #### 🔩 Dependency Updates
package/README.md CHANGED
@@ -4,5 +4,5 @@ This package provides components for adding tooltips and other popover functiona
4
4
 
5
5
  ## Components
6
6
 
7
- * [Popover](src/components/popover/Popover.md)
8
- * Tooltip
7
+ - [Popover](src/components/popover/Popover.md)
8
+ - Tooltip
package/dist/components/popover/Popover.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { TippyProps as TippyComponentProps } from "@tippyjs/react";
2
2
  import * as React from "react";
3
- import "tippy.js/dist/tippy.css";
4
- import "tippy.js/themes/light.css";
3
+ import "./Tippy.module.css";
5
4
  import { TippyCallbackRef } from "../../hooks/UseTippyInstance";
6
5
  export declare type PopoverVariant = "standard" | "info" | "warning" | "error" | "outlined";
7
6
  export interface PopoverProps extends Partial<Omit<TippyComponentProps, "theme" | "render">> {
package/dist/hooks/UseTippyInstance.d.ts CHANGED
@@ -1,5 +1,3 @@
1
- import "tippy.js/dist/tippy.css";
2
- import "tippy.js/themes/light.css";
3
1
  import { Instance } from "tippy.js";
4
2
  import { MutableRefObject } from "react";
5
3
  export declare type TippyInstance = Instance;
package/dist/index.es.js CHANGED
@@ -3,8 +3,6 @@ import { FlatButton, PrimaryButton, Spinner } from '@stenajs-webui/elements';
3
3
  import * as React from 'react';
4
4
  import { useState, useMemo, useRef } from 'react';
5
5
  import TippyComponent from '@tippyjs/react';
6
- import 'tippy.js/dist/tippy.css';
7
- import 'tippy.js/themes/light.css';
8
6
 
9
7
  var ActionPrompt = function (_a) {
10
8
  var _b = _a.text, text = _b === void 0 ? "Are you sure?" : _b, _c = _a.yesLabel, yesLabel = _c === void 0 ? "Yes" : _c, _d = _a.noLabel, noLabel = _d === void 0 ? "No" : _d, onNo = _a.onNo, onYes = _a.onYes, loading = _a.loading;
@@ -95,8 +93,11 @@ function styleInject(css, ref) {
95
93
  }
96
94
  }
97
95
 
98
- var css_248z = ".Popover-module_noPadding__33fA3 .tippy-content {\n padding: 0;\n}\n\n.tippy-box[data-theme~=\"light\"] {\n box-shadow: var(--swui-shadow-popover);\n}\n\n.tippy-box[data-theme~=\"outlined\"] {\n border: 1px solid var(--lhds-color-blue-500);\n}\n\n.tippy-box[data-theme~=\"info\"] {\n background-color: var(--lhds-color-blue-50);\n color: var(--swui-text-primary-color);\n}\n\n.tippy-box[data-theme~=\"info\"] .tippy-arrow {\n color: var(--lhds-color-blue-50);\n }\n\n.tippy-box[data-theme~=\"warning\"] {\n background-color: var(--lhds-color-orange-50);\n color: var(--swui-text-primary-color);\n}\n\n.tippy-box[data-theme~=\"warning\"] .tippy-arrow {\n color: var(--lhds-color-orange-50);\n }\n\n.tippy-box[data-theme~=\"error\"] {\n background-color: var(--lhds-color-red-50);\n color: var(--swui-text-primary-color);\n}\n\n.tippy-box[data-theme~=\"error\"] .tippy-arrow {\n color: var(--lhds-color-red-50);\n }\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"top\"]\n > .tippy-arrow::before {\n border-top-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"bottom\"]\n > .tippy-arrow::before {\n border-bottom-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"left\"]\n > .tippy-arrow::before {\n border-left-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"right\"]\n > .tippy-arrow::before {\n border-right-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"top\"]\n > .tippy-arrow::before {\n border-top-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"bottom\"]\n > .tippy-arrow::before {\n border-bottom-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"left\"]\n > .tippy-arrow::before {\n border-left-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"right\"]\n > .tippy-arrow::before {\n border-right-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"top\"]\n > .tippy-arrow::before {\n border-top-color: var(--lhds-color-red-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"bottom\"]\n > .tippy-arrow::before {\n border-bottom-color: var(--lhds-color-red-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"left\"]\n > .tippy-arrow::before {\n border-left-color: var(--lhds-color-red-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"right\"]\n > .tippy-arrow::before {\n border-right-color: var(--lhds-color-red-50);\n}\n";
96
+ var css_248z$1 = ".Popover-module_noPadding__33fA3 .tippy-content {\n padding: 0;\n}\n\n.tippy-box[data-theme~=\"light\"] {\n box-shadow: var(--swui-shadow-popover);\n}\n\n.tippy-box[data-theme~=\"outlined\"] {\n border: 1px solid var(--lhds-color-blue-500);\n}\n\n.tippy-box[data-theme~=\"info\"] {\n background-color: var(--lhds-color-blue-50);\n color: var(--swui-text-primary-color);\n}\n\n.tippy-box[data-theme~=\"info\"] .tippy-arrow {\n color: var(--lhds-color-blue-50);\n }\n\n.tippy-box[data-theme~=\"warning\"] {\n background-color: var(--lhds-color-orange-50);\n color: var(--swui-text-primary-color);\n}\n\n.tippy-box[data-theme~=\"warning\"] .tippy-arrow {\n color: var(--lhds-color-orange-50);\n }\n\n.tippy-box[data-theme~=\"error\"] {\n background-color: var(--lhds-color-red-50);\n color: var(--swui-text-primary-color);\n}\n\n.tippy-box[data-theme~=\"error\"] .tippy-arrow {\n color: var(--lhds-color-red-50);\n }\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"top\"]\n > .tippy-arrow::before {\n border-top-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"bottom\"]\n > .tippy-arrow::before {\n border-bottom-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"left\"]\n > .tippy-arrow::before {\n border-left-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"right\"]\n > .tippy-arrow::before {\n border-right-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"top\"]\n > .tippy-arrow::before {\n border-top-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"bottom\"]\n > .tippy-arrow::before {\n border-bottom-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"left\"]\n > .tippy-arrow::before {\n border-left-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"right\"]\n > .tippy-arrow::before {\n border-right-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"top\"]\n > .tippy-arrow::before {\n border-top-color: var(--lhds-color-red-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"bottom\"]\n > .tippy-arrow::before {\n border-bottom-color: var(--lhds-color-red-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"left\"]\n > .tippy-arrow::before {\n border-left-color: var(--lhds-color-red-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"right\"]\n > .tippy-arrow::before {\n border-right-color: var(--lhds-color-red-50);\n}\n";
99
97
  var styles = {"noPadding":"Popover-module_noPadding__33fA3"};
98
+ styleInject(css_248z$1);
99
+
100
+ var css_248z = "/**\n * This file contains Tippy's internal CSS styles.\n * It has been copied from tippy.js. This is a CSS module since CSS modules are compiled and\n * bundled with the tooltip package.\n */\n/**\n * tippy.js/dist/tippy.css\n */\n.tippy-box[data-animation=\"fade\"][data-state=\"hidden\"] {\n opacity: 0;\n }\n[data-tippy-root] {\n max-width: calc(100vw - 10px);\n }\n.tippy-box {\n position: relative;\n background-color: #333;\n color: #fff;\n border-radius: 4px;\n font-size: 14px;\n line-height: 1.4;\n outline: 0;\n transition-property: visibility, opacity, -webkit-transform;\n transition-property: transform, visibility, opacity;\n transition-property: transform, visibility, opacity, -webkit-transform;\n }\n.tippy-box[data-placement^=\"top\"] > .tippy-arrow {\n bottom: 0;\n }\n.tippy-box[data-placement^=\"top\"] > .tippy-arrow:before {\n bottom: -7px;\n left: 0;\n border-width: 8px 8px 0;\n border-top-color: initial;\n -webkit-transform-origin: center top;\n transform-origin: center top;\n }\n.tippy-box[data-placement^=\"bottom\"] > .tippy-arrow {\n top: 0;\n }\n.tippy-box[data-placement^=\"bottom\"] > .tippy-arrow:before {\n top: -7px;\n left: 0;\n border-width: 0 8px 8px;\n border-bottom-color: initial;\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n }\n.tippy-box[data-placement^=\"left\"] > .tippy-arrow {\n right: 0;\n }\n.tippy-box[data-placement^=\"left\"] > .tippy-arrow:before {\n border-width: 8px 0 8px 8px;\n border-left-color: initial;\n right: -7px;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n.tippy-box[data-placement^=\"right\"] > .tippy-arrow {\n left: 0;\n }\n.tippy-box[data-placement^=\"right\"] > .tippy-arrow:before {\n left: -7px;\n border-width: 8px 8px 8px 0;\n border-right-color: initial;\n -webkit-transform-origin: center right;\n transform-origin: center right;\n }\n.tippy-box[data-inertia][data-state=\"visible\"] {\n transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n }\n.tippy-arrow {\n width: 16px;\n height: 16px;\n color: #333;\n }\n.tippy-arrow:before {\n content: \"\";\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n.tippy-content {\n position: relative;\n padding: 5px 9px;\n z-index: 1;\n }\n/**\n * tippy.js/theme/light.css\n */\n.tippy-box[data-theme~=\"light\"] {\n color: #26323d;\n box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),\n 0 4px 80px -8px rgba(36, 40, 47, 0.25),\n 0 4px 4px -2px rgba(91, 94, 105, 0.15);\n background-color: #fff;\n }\n.tippy-box[data-theme~=\"light\"][data-placement^=\"top\"] > .tippy-arrow:before {\n border-top-color: #fff;\n }\n.tippy-box[data-theme~=\"light\"][data-placement^=\"bottom\"]\n > .tippy-arrow:before {\n border-bottom-color: #fff;\n }\n.tippy-box[data-theme~=\"light\"][data-placement^=\"left\"]\n > .tippy-arrow:before {\n border-left-color: #fff;\n }\n.tippy-box[data-theme~=\"light\"][data-placement^=\"right\"]\n > .tippy-arrow:before {\n border-right-color: #fff;\n }\n.tippy-box[data-theme~=\"light\"] > .tippy-backdrop {\n background-color: #fff;\n }\n.tippy-box[data-theme~=\"light\"] > .tippy-svg-arrow {\n fill: #fff;\n }\n";
100
101
  styleInject(css_248z);
101
102
 
102
103
  var useLazyPopover = function (plugins) {
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../src/components/popover/ActionPrompt.tsx","../../../node_modules/style-inject/dist/style-inject.es.js","../src/hooks/UseLazyPopover.ts","../src/components/popover/Popover.tsx","../src/components/button-with-popover/ButtonWithPopover.tsx","../src/components/tooltip/Tooltip.tsx","../src/hooks/UseTippyInstance.ts"],"sourcesContent":["import { Column, Row, Space, Text } from \"@stenajs-webui/core\";\nimport { FlatButton, Spinner, PrimaryButton } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\n\nexport interface ActionPromptProps {\n text?: string;\n yesLabel?: string;\n noLabel?: string;\n onYes?: () => void;\n onNo?: () => void;\n loading?: boolean;\n}\n\nexport const ActionPrompt: React.FC<ActionPromptProps> = ({\n text = \"Are you sure?\",\n yesLabel = \"Yes\",\n noLabel = \"No\",\n onNo,\n onYes,\n loading,\n}) => {\n return (\n <Column position={\"relative\"}>\n <div style={{ opacity: loading ? 0 : 1 }}>\n <Text>{text}</Text>\n <Space />\n <Row justifyContent={\"flex-end\"} alignItems={\"center\"}>\n <FlatButton label={noLabel} onClick={onNo} />\n <Space />\n <PrimaryButton label={yesLabel} onClick={onYes} />\n </Row>\n </div>\n {loading && (\n <Row\n justifyContent={\"center\"}\n alignItems={\"center\"}\n left={0}\n top={0}\n width={\"100%\"}\n height={\"100%\"}\n position={\"absolute\"}\n >\n <Spinner size={\"small\"} />\n </Row>\n )}\n </Column>\n );\n};\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { useMemo, useState } from \"react\";\nimport { Plugin } from \"tippy.js\";\n\nexport const useLazyPopover = (plugins: Plugin<unknown>[] = []) => {\n const [mounted, setMounted] = useState(false);\n\n const lazyPlugin = useMemo(\n () => ({\n fn: () => ({\n onShow: () => setMounted(true),\n onHidden: () => setMounted(false),\n }),\n }),\n [setMounted]\n );\n\n return {\n plugins: [lazyPlugin, ...plugins],\n mounted,\n };\n};\n","import TippyComponent, {\n TippyProps as TippyComponentProps,\n} from \"@tippyjs/react\";\nimport * as React from \"react\";\nimport styles from \"./Popover.module.css\";\nimport \"tippy.js/dist/tippy.css\";\nimport \"tippy.js/themes/light.css\";\nimport { TippyCallbackRef } from \"../../hooks/UseTippyInstance\";\nimport { Box } from \"@stenajs-webui/core\";\nimport { useLazyPopover } from \"../../hooks/UseLazyPopover\";\n\nexport type PopoverVariant =\n | \"standard\"\n | \"info\"\n | \"warning\"\n | \"error\"\n | \"outlined\";\n\nexport interface PopoverProps\n extends Partial<Omit<TippyComponentProps, \"theme\" | \"render\">> {\n tippyRef?: TippyCallbackRef<HTMLDivElement>;\n disablePadding?: boolean;\n lazy?: boolean;\n variant?: PopoverVariant;\n}\n\nexport const tippyStyles = {\n noPadding: styles.noPadding,\n};\n\nconst variantToTheme: Record<PopoverVariant, string> = {\n standard: \"light\",\n info: \"info\",\n warning: \"warning\",\n error: \"error\",\n outlined: \"outlined\",\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n visible,\n trigger = \"mouseenter\",\n children,\n tippyRef,\n delay = 0,\n variant = \"standard\",\n disablePadding,\n content,\n maxWidth = \"500px\",\n plugins: propsPlugins,\n lazy,\n arrow = true,\n ...tippyProps\n}) => {\n const { plugins, mounted } = useLazyPopover(propsPlugins);\n\n return (\n <TippyComponent\n interactive\n className={tippyStyles.noPadding}\n trigger={visible !== undefined ? undefined : trigger}\n visible={visible}\n theme={\"light \" + variantToTheme[variant] ?? variantToTheme.standard}\n delay={delay}\n maxWidth={maxWidth}\n arrow={arrow}\n content={\n (!lazy || mounted) && (\n <Box spacing={!disablePadding && 1} indent={!disablePadding && 1}>\n {content}\n </Box>\n )\n }\n plugins={plugins}\n {...tippyProps}\n >\n <div ref={tippyRef}>{children}</div>\n </TippyComponent>\n );\n};\n","import { FlatButton, FlatButtonProps } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps } from \"../popover/Popover\";\n\nexport interface ButtonWithPopoverProps extends FlatButtonProps {\n children?: PopoverProps[\"children\"];\n visible?: boolean;\n onShow?: () => void;\n onHide?: () => void;\n}\n\nexport const ButtonWithPopover: React.FC<ButtonWithPopoverProps> = ({\n children,\n onShow,\n onHide,\n ...buttonProps\n}) => {\n return (\n <Popover\n content={children}\n trigger={\"click\"}\n zIndex={1000}\n onShow={onShow}\n onHide={onHide}\n >\n <FlatButton {...buttonProps} />\n </Popover>\n );\n};\n","import { Text } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps, PopoverVariant } from \"../popover/Popover\";\n\nexport interface TooltipProps extends Partial<Omit<PopoverProps, \"content\">> {\n variant?: PopoverVariant;\n label: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ label, ...popoverProps }) => {\n return (\n <Popover {...popoverProps} content={<Text size={\"small\"}>{label}</Text>} />\n );\n};\n","import \"tippy.js/dist/tippy.css\";\nimport \"tippy.js/themes/light.css\";\nimport { Instance } from \"tippy.js\";\nimport { MutableRefObject, useRef } from \"react\";\n\nexport type TippyInstance = Instance;\n\nexport type TippyElement<TElement extends HTMLElement> = TElement & {\n _tippy: TippyInstance;\n};\n\nexport type TippyCallbackRef<TElement extends HTMLElement> = (\n element: TippyElement<TElement> | null\n) => void;\n\nexport const useTippyInstance = <TElement extends HTMLElement>(): [\n TippyCallbackRef<TElement>,\n MutableRefObject<TippyInstance | undefined>\n] => {\n const tippyRef = useRef<TippyInstance>();\n\n return [\n (element: TippyElement<TElement> | null) => {\n tippyRef.current = element?._tippy ?? undefined;\n },\n tippyRef,\n ];\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.es.js","sources":["../src/components/popover/ActionPrompt.tsx","../../../node_modules/style-inject/dist/style-inject.es.js","../src/hooks/UseLazyPopover.ts","../src/components/popover/Popover.tsx","../src/components/button-with-popover/ButtonWithPopover.tsx","../src/components/tooltip/Tooltip.tsx","../src/hooks/UseTippyInstance.ts"],"sourcesContent":["import { Column, Row, Space, Text } from \"@stenajs-webui/core\";\nimport { FlatButton, Spinner, PrimaryButton } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\n\nexport interface ActionPromptProps {\n text?: string;\n yesLabel?: string;\n noLabel?: string;\n onYes?: () => void;\n onNo?: () => void;\n loading?: boolean;\n}\n\nexport const ActionPrompt: React.FC<ActionPromptProps> = ({\n text = \"Are you sure?\",\n yesLabel = \"Yes\",\n noLabel = \"No\",\n onNo,\n onYes,\n loading,\n}) => {\n return (\n <Column position={\"relative\"}>\n <div style={{ opacity: loading ? 0 : 1 }}>\n <Text>{text}</Text>\n <Space />\n <Row justifyContent={\"flex-end\"} alignItems={\"center\"}>\n <FlatButton label={noLabel} onClick={onNo} />\n <Space />\n <PrimaryButton label={yesLabel} onClick={onYes} />\n </Row>\n </div>\n {loading && (\n <Row\n justifyContent={\"center\"}\n alignItems={\"center\"}\n left={0}\n top={0}\n width={\"100%\"}\n height={\"100%\"}\n position={\"absolute\"}\n >\n <Spinner size={\"small\"} />\n </Row>\n )}\n </Column>\n );\n};\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { useMemo, useState } from \"react\";\nimport { Plugin } from \"tippy.js\";\n\nexport const useLazyPopover = (plugins: Plugin<unknown>[] = []) => {\n const [mounted, setMounted] = useState(false);\n\n const lazyPlugin = useMemo(\n () => ({\n fn: () => ({\n onShow: () => setMounted(true),\n onHidden: () => setMounted(false),\n }),\n }),\n [setMounted]\n );\n\n return {\n plugins: [lazyPlugin, ...plugins],\n mounted,\n };\n};\n","import TippyComponent, {\n TippyProps as TippyComponentProps,\n} from \"@tippyjs/react\";\nimport * as React from \"react\";\nimport styles from \"./Popover.module.css\";\nimport \"./Tippy.module.css\";\nimport { TippyCallbackRef } from \"../../hooks/UseTippyInstance\";\nimport { Box } from \"@stenajs-webui/core\";\nimport { useLazyPopover } from \"../../hooks/UseLazyPopover\";\n\nexport type PopoverVariant =\n | \"standard\"\n | \"info\"\n | \"warning\"\n | \"error\"\n | \"outlined\";\n\nexport interface PopoverProps\n extends Partial<Omit<TippyComponentProps, \"theme\" | \"render\">> {\n tippyRef?: TippyCallbackRef<HTMLDivElement>;\n disablePadding?: boolean;\n lazy?: boolean;\n variant?: PopoverVariant;\n}\n\nexport const tippyStyles = {\n noPadding: styles.noPadding,\n};\n\nconst variantToTheme: Record<PopoverVariant, string> = {\n standard: \"light\",\n info: \"info\",\n warning: \"warning\",\n error: \"error\",\n outlined: \"outlined\",\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n visible,\n trigger = \"mouseenter\",\n children,\n tippyRef,\n delay = 0,\n variant = \"standard\",\n disablePadding,\n content,\n maxWidth = \"500px\",\n plugins: propsPlugins,\n lazy,\n arrow = true,\n ...tippyProps\n}) => {\n const { plugins, mounted } = useLazyPopover(propsPlugins);\n\n return (\n <TippyComponent\n interactive\n className={tippyStyles.noPadding}\n trigger={visible !== undefined ? undefined : trigger}\n visible={visible}\n theme={\"light \" + variantToTheme[variant] ?? variantToTheme.standard}\n delay={delay}\n maxWidth={maxWidth}\n arrow={arrow}\n content={\n (!lazy || mounted) && (\n <Box spacing={!disablePadding && 1} indent={!disablePadding && 1}>\n {content}\n </Box>\n )\n }\n plugins={plugins}\n {...tippyProps}\n >\n <div ref={tippyRef}>{children}</div>\n </TippyComponent>\n );\n};\n","import { FlatButton, FlatButtonProps } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps } from \"../popover/Popover\";\n\nexport interface ButtonWithPopoverProps extends FlatButtonProps {\n children?: PopoverProps[\"children\"];\n visible?: boolean;\n onShow?: () => void;\n onHide?: () => void;\n}\n\nexport const ButtonWithPopover: React.FC<ButtonWithPopoverProps> = ({\n children,\n onShow,\n onHide,\n ...buttonProps\n}) => {\n return (\n <Popover\n content={children}\n trigger={\"click\"}\n zIndex={1000}\n onShow={onShow}\n onHide={onHide}\n >\n <FlatButton {...buttonProps} />\n </Popover>\n );\n};\n","import { Text } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps, PopoverVariant } from \"../popover/Popover\";\n\nexport interface TooltipProps extends Partial<Omit<PopoverProps, \"content\">> {\n variant?: PopoverVariant;\n label: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ label, ...popoverProps }) => {\n return (\n <Popover {...popoverProps} content={<Text size={\"small\"}>{label}</Text>} />\n );\n};\n","import { Instance } from \"tippy.js\";\nimport { MutableRefObject, useRef } from \"react\";\n\nexport type TippyInstance = Instance;\n\nexport type TippyElement<TElement extends HTMLElement> = TElement & {\n _tippy: TippyInstance;\n};\n\nexport type TippyCallbackRef<TElement extends HTMLElement> = (\n element: TippyElement<TElement> | null\n) => void;\n\nexport const useTippyInstance = <TElement extends HTMLElement>(): [\n TippyCallbackRef<TElement>,\n MutableRefObject<TippyInstance | undefined>\n] => {\n const tippyRef = useRef<TippyInstance>();\n\n return [\n (element: TippyElement<TElement> | null) => {\n tippyRef.current = element?._tippy ?? undefined;\n },\n tippyRef,\n ];\n};\n"],"names":[],"mappings":";;;;;;IAaa,YAAY,GAAgC,UAAC,EAOzD;QANC,YAAsB,EAAtB,IAAI,mBAAG,eAAe,KAAA,EACtB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EACd,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,OAAO,aAAA;IAEP,QACE,oBAAC,MAAM,IAAC,QAAQ,EAAE,UAAU;QAC1B,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE;YACtC,oBAAC,IAAI,QAAE,IAAI,CAAQ;YACnB,oBAAC,KAAK,OAAG;YACT,oBAAC,GAAG,IAAC,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ;gBACnD,oBAAC,UAAU,IAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,GAAI;gBAC7C,oBAAC,KAAK,OAAG;gBACT,oBAAC,aAAa,IAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,GAAI,CAC9C,CACF;QACL,OAAO,KACN,oBAAC,GAAG,IACF,cAAc,EAAE,QAAQ,EACxB,UAAU,EAAE,QAAQ,EACpB,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,UAAU;YAEpB,oBAAC,OAAO,IAAC,IAAI,EAAE,OAAO,GAAI,CACtB,CACP,CACM,EACT;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/CA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;ACtBO,IAAM,cAAc,GAAG,UAAC,OAA+B;IAA/B,wBAAA,EAAA,YAA+B;IACtD,IAAA,KAAwB,QAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAE9C,IAAM,UAAU,GAAG,OAAO,CACxB,cAAM,QAAC;QACL,EAAE,EAAE,cAAM,QAAC;YACT,MAAM,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA;YAC9B,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,GAAA;SAClC,IAAC;KACH,IAAC,EACF,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,OAAO;QACL,OAAO,iBAAG,UAAU,GAAK,OAAO,OAAC;QACjC,OAAO,SAAA;KACR,CAAC;AACJ,CAAC;;ICKY,WAAW,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC,SAAS;EAC3B;AAEF,IAAM,cAAc,GAAmC;IACrD,QAAQ,EAAE,OAAO;IACjB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;CACrB,CAAC;IAEW,OAAO,GAA2B,UAAC,EAc/C;;IAbC,IAAA,OAAO,aAAA,EACP,eAAsB,EAAtB,OAAO,mBAAG,YAAY,KAAA,EACtB,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,eAAoB,EAApB,OAAO,mBAAG,UAAU,KAAA,EACpB,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,gBAAkB,EAAlB,QAAQ,mBAAG,OAAO,KAAA,EACT,YAAY,aAAA,EACrB,IAAI,UAAA,EACJ,aAAY,EAAZ,KAAK,mBAAG,IAAI,KAAA,EACT,UAAU,cAbiC,uIAc/C,CADc;IAEP,IAAA,KAAuB,cAAc,CAAC,YAAY,CAAC,EAAjD,OAAO,aAAA,EAAE,OAAO,aAAiC,CAAC;IAE1D,QACE,oBAAC,cAAc,aACb,WAAW,QACX,SAAS,EAAE,WAAW,CAAC,SAAS,EAChC,OAAO,EAAE,OAAO,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,EACpD,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,MAAA,QAAQ,GAAG,cAAc,CAAC,OAAO,CAAC,mCAAI,cAAc,CAAC,QAAQ,EACpE,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EACL,CAAC,CAAC,IAAI,IAAI,OAAO,MACf,oBAAC,GAAG,IAAC,OAAO,EAAE,CAAC,cAAc,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,cAAc,IAAI,CAAC,IAC7D,OAAO,CACJ,CACP,EAEH,OAAO,EAAE,OAAO,IACZ,UAAU;QAEd,6BAAK,GAAG,EAAE,QAAQ,IAAG,QAAQ,CAAO,CACrB,EACjB;AACJ;;IClEa,iBAAiB,GAAqC,UAAC,EAKnE;IAJC,IAAA,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,MAAM,YAAA,EACH,WAAW,cAJoD,gCAKnE,CADe;IAEd,QACE,oBAAC,OAAO,IACN,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM;QAEd,oBAAC,UAAU,eAAK,WAAW,EAAI,CACvB,EACV;AACJ;;ICnBa,OAAO,GAA2B,UAAC,EAA0B;IAAxB,IAAA,KAAK,WAAA,EAAK,YAAY,cAAxB,SAA0B,CAAF;IACtE,QACE,oBAAC,OAAO,eAAK,YAAY,IAAE,OAAO,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAE,OAAO,IAAG,KAAK,CAAQ,IAAI,EAC3E;AACJ;;ICAa,gBAAgB,GAAG;IAI9B,IAAM,QAAQ,GAAG,MAAM,EAAiB,CAAC;IAEzC,OAAO;QACL,UAAC,OAAsC;;YACrC,QAAQ,CAAC,OAAO,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,mCAAI,SAAS,CAAC;SACjD;QACD,QAAQ;KACT,CAAC;AACJ;;;;"}
package/dist/index.js CHANGED
@@ -6,8 +6,6 @@ var core = require('@stenajs-webui/core');
6
6
  var elements = require('@stenajs-webui/elements');
7
7
  var React = require('react');
8
8
  var TippyComponent = require('@tippyjs/react');
9
- require('tippy.js/dist/tippy.css');
10
- require('tippy.js/themes/light.css');
11
9
 
12
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
11
 
@@ -121,8 +119,11 @@ function styleInject(css, ref) {
121
119
  }
122
120
  }
123
121
 
124
- var css_248z = ".Popover-module_noPadding__33fA3 .tippy-content {\n padding: 0;\n}\n\n.tippy-box[data-theme~=\"light\"] {\n box-shadow: var(--swui-shadow-popover);\n}\n\n.tippy-box[data-theme~=\"outlined\"] {\n border: 1px solid var(--lhds-color-blue-500);\n}\n\n.tippy-box[data-theme~=\"info\"] {\n background-color: var(--lhds-color-blue-50);\n color: var(--swui-text-primary-color);\n}\n\n.tippy-box[data-theme~=\"info\"] .tippy-arrow {\n color: var(--lhds-color-blue-50);\n }\n\n.tippy-box[data-theme~=\"warning\"] {\n background-color: var(--lhds-color-orange-50);\n color: var(--swui-text-primary-color);\n}\n\n.tippy-box[data-theme~=\"warning\"] .tippy-arrow {\n color: var(--lhds-color-orange-50);\n }\n\n.tippy-box[data-theme~=\"error\"] {\n background-color: var(--lhds-color-red-50);\n color: var(--swui-text-primary-color);\n}\n\n.tippy-box[data-theme~=\"error\"] .tippy-arrow {\n color: var(--lhds-color-red-50);\n }\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"top\"]\n > .tippy-arrow::before {\n border-top-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"bottom\"]\n > .tippy-arrow::before {\n border-bottom-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"left\"]\n > .tippy-arrow::before {\n border-left-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"right\"]\n > .tippy-arrow::before {\n border-right-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"top\"]\n > .tippy-arrow::before {\n border-top-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"bottom\"]\n > .tippy-arrow::before {\n border-bottom-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"left\"]\n > .tippy-arrow::before {\n border-left-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"right\"]\n > .tippy-arrow::before {\n border-right-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"top\"]\n > .tippy-arrow::before {\n border-top-color: var(--lhds-color-red-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"bottom\"]\n > .tippy-arrow::before {\n border-bottom-color: var(--lhds-color-red-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"left\"]\n > .tippy-arrow::before {\n border-left-color: var(--lhds-color-red-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"right\"]\n > .tippy-arrow::before {\n border-right-color: var(--lhds-color-red-50);\n}\n";
122
+ var css_248z$1 = ".Popover-module_noPadding__33fA3 .tippy-content {\n padding: 0;\n}\n\n.tippy-box[data-theme~=\"light\"] {\n box-shadow: var(--swui-shadow-popover);\n}\n\n.tippy-box[data-theme~=\"outlined\"] {\n border: 1px solid var(--lhds-color-blue-500);\n}\n\n.tippy-box[data-theme~=\"info\"] {\n background-color: var(--lhds-color-blue-50);\n color: var(--swui-text-primary-color);\n}\n\n.tippy-box[data-theme~=\"info\"] .tippy-arrow {\n color: var(--lhds-color-blue-50);\n }\n\n.tippy-box[data-theme~=\"warning\"] {\n background-color: var(--lhds-color-orange-50);\n color: var(--swui-text-primary-color);\n}\n\n.tippy-box[data-theme~=\"warning\"] .tippy-arrow {\n color: var(--lhds-color-orange-50);\n }\n\n.tippy-box[data-theme~=\"error\"] {\n background-color: var(--lhds-color-red-50);\n color: var(--swui-text-primary-color);\n}\n\n.tippy-box[data-theme~=\"error\"] .tippy-arrow {\n color: var(--lhds-color-red-50);\n }\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"top\"]\n > .tippy-arrow::before {\n border-top-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"bottom\"]\n > .tippy-arrow::before {\n border-bottom-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"left\"]\n > .tippy-arrow::before {\n border-left-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"info\"][data-placement^=\"right\"]\n > .tippy-arrow::before {\n border-right-color: var(--lhds-color-blue-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"top\"]\n > .tippy-arrow::before {\n border-top-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"bottom\"]\n > .tippy-arrow::before {\n border-bottom-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"left\"]\n > .tippy-arrow::before {\n border-left-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"warning\"][data-placement^=\"right\"]\n > .tippy-arrow::before {\n border-right-color: var(--lhds-color-orange-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"top\"]\n > .tippy-arrow::before {\n border-top-color: var(--lhds-color-red-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"bottom\"]\n > .tippy-arrow::before {\n border-bottom-color: var(--lhds-color-red-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"left\"]\n > .tippy-arrow::before {\n border-left-color: var(--lhds-color-red-50);\n}\n\n.tippy-box[data-theme~=\"error\"][data-placement^=\"right\"]\n > .tippy-arrow::before {\n border-right-color: var(--lhds-color-red-50);\n}\n";
125
123
  var styles = {"noPadding":"Popover-module_noPadding__33fA3"};
124
+ styleInject(css_248z$1);
125
+
126
+ var css_248z = "/**\n * This file contains Tippy's internal CSS styles.\n * It has been copied from tippy.js. This is a CSS module since CSS modules are compiled and\n * bundled with the tooltip package.\n */\n/**\n * tippy.js/dist/tippy.css\n */\n.tippy-box[data-animation=\"fade\"][data-state=\"hidden\"] {\n opacity: 0;\n }\n[data-tippy-root] {\n max-width: calc(100vw - 10px);\n }\n.tippy-box {\n position: relative;\n background-color: #333;\n color: #fff;\n border-radius: 4px;\n font-size: 14px;\n line-height: 1.4;\n outline: 0;\n transition-property: visibility, opacity, -webkit-transform;\n transition-property: transform, visibility, opacity;\n transition-property: transform, visibility, opacity, -webkit-transform;\n }\n.tippy-box[data-placement^=\"top\"] > .tippy-arrow {\n bottom: 0;\n }\n.tippy-box[data-placement^=\"top\"] > .tippy-arrow:before {\n bottom: -7px;\n left: 0;\n border-width: 8px 8px 0;\n border-top-color: initial;\n -webkit-transform-origin: center top;\n transform-origin: center top;\n }\n.tippy-box[data-placement^=\"bottom\"] > .tippy-arrow {\n top: 0;\n }\n.tippy-box[data-placement^=\"bottom\"] > .tippy-arrow:before {\n top: -7px;\n left: 0;\n border-width: 0 8px 8px;\n border-bottom-color: initial;\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n }\n.tippy-box[data-placement^=\"left\"] > .tippy-arrow {\n right: 0;\n }\n.tippy-box[data-placement^=\"left\"] > .tippy-arrow:before {\n border-width: 8px 0 8px 8px;\n border-left-color: initial;\n right: -7px;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n.tippy-box[data-placement^=\"right\"] > .tippy-arrow {\n left: 0;\n }\n.tippy-box[data-placement^=\"right\"] > .tippy-arrow:before {\n left: -7px;\n border-width: 8px 8px 8px 0;\n border-right-color: initial;\n -webkit-transform-origin: center right;\n transform-origin: center right;\n }\n.tippy-box[data-inertia][data-state=\"visible\"] {\n transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n }\n.tippy-arrow {\n width: 16px;\n height: 16px;\n color: #333;\n }\n.tippy-arrow:before {\n content: \"\";\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n.tippy-content {\n position: relative;\n padding: 5px 9px;\n z-index: 1;\n }\n/**\n * tippy.js/theme/light.css\n */\n.tippy-box[data-theme~=\"light\"] {\n color: #26323d;\n box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),\n 0 4px 80px -8px rgba(36, 40, 47, 0.25),\n 0 4px 4px -2px rgba(91, 94, 105, 0.15);\n background-color: #fff;\n }\n.tippy-box[data-theme~=\"light\"][data-placement^=\"top\"] > .tippy-arrow:before {\n border-top-color: #fff;\n }\n.tippy-box[data-theme~=\"light\"][data-placement^=\"bottom\"]\n > .tippy-arrow:before {\n border-bottom-color: #fff;\n }\n.tippy-box[data-theme~=\"light\"][data-placement^=\"left\"]\n > .tippy-arrow:before {\n border-left-color: #fff;\n }\n.tippy-box[data-theme~=\"light\"][data-placement^=\"right\"]\n > .tippy-arrow:before {\n border-right-color: #fff;\n }\n.tippy-box[data-theme~=\"light\"] > .tippy-backdrop {\n background-color: #fff;\n }\n.tippy-box[data-theme~=\"light\"] > .tippy-svg-arrow {\n fill: #fff;\n }\n";
126
127
  styleInject(css_248z);
127
128
 
128
129
  var useLazyPopover = function (plugins) {
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/components/popover/ActionPrompt.tsx","../../../node_modules/style-inject/dist/style-inject.es.js","../src/hooks/UseLazyPopover.ts","../src/components/popover/Popover.tsx","../src/components/button-with-popover/ButtonWithPopover.tsx","../src/components/tooltip/Tooltip.tsx","../src/hooks/UseTippyInstance.ts"],"sourcesContent":["import { Column, Row, Space, Text } from \"@stenajs-webui/core\";\nimport { FlatButton, Spinner, PrimaryButton } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\n\nexport interface ActionPromptProps {\n text?: string;\n yesLabel?: string;\n noLabel?: string;\n onYes?: () => void;\n onNo?: () => void;\n loading?: boolean;\n}\n\nexport const ActionPrompt: React.FC<ActionPromptProps> = ({\n text = \"Are you sure?\",\n yesLabel = \"Yes\",\n noLabel = \"No\",\n onNo,\n onYes,\n loading,\n}) => {\n return (\n <Column position={\"relative\"}>\n <div style={{ opacity: loading ? 0 : 1 }}>\n <Text>{text}</Text>\n <Space />\n <Row justifyContent={\"flex-end\"} alignItems={\"center\"}>\n <FlatButton label={noLabel} onClick={onNo} />\n <Space />\n <PrimaryButton label={yesLabel} onClick={onYes} />\n </Row>\n </div>\n {loading && (\n <Row\n justifyContent={\"center\"}\n alignItems={\"center\"}\n left={0}\n top={0}\n width={\"100%\"}\n height={\"100%\"}\n position={\"absolute\"}\n >\n <Spinner size={\"small\"} />\n </Row>\n )}\n </Column>\n );\n};\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { useMemo, useState } from \"react\";\nimport { Plugin } from \"tippy.js\";\n\nexport const useLazyPopover = (plugins: Plugin<unknown>[] = []) => {\n const [mounted, setMounted] = useState(false);\n\n const lazyPlugin = useMemo(\n () => ({\n fn: () => ({\n onShow: () => setMounted(true),\n onHidden: () => setMounted(false),\n }),\n }),\n [setMounted]\n );\n\n return {\n plugins: [lazyPlugin, ...plugins],\n mounted,\n };\n};\n","import TippyComponent, {\n TippyProps as TippyComponentProps,\n} from \"@tippyjs/react\";\nimport * as React from \"react\";\nimport styles from \"./Popover.module.css\";\nimport \"tippy.js/dist/tippy.css\";\nimport \"tippy.js/themes/light.css\";\nimport { TippyCallbackRef } from \"../../hooks/UseTippyInstance\";\nimport { Box } from \"@stenajs-webui/core\";\nimport { useLazyPopover } from \"../../hooks/UseLazyPopover\";\n\nexport type PopoverVariant =\n | \"standard\"\n | \"info\"\n | \"warning\"\n | \"error\"\n | \"outlined\";\n\nexport interface PopoverProps\n extends Partial<Omit<TippyComponentProps, \"theme\" | \"render\">> {\n tippyRef?: TippyCallbackRef<HTMLDivElement>;\n disablePadding?: boolean;\n lazy?: boolean;\n variant?: PopoverVariant;\n}\n\nexport const tippyStyles = {\n noPadding: styles.noPadding,\n};\n\nconst variantToTheme: Record<PopoverVariant, string> = {\n standard: \"light\",\n info: \"info\",\n warning: \"warning\",\n error: \"error\",\n outlined: \"outlined\",\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n visible,\n trigger = \"mouseenter\",\n children,\n tippyRef,\n delay = 0,\n variant = \"standard\",\n disablePadding,\n content,\n maxWidth = \"500px\",\n plugins: propsPlugins,\n lazy,\n arrow = true,\n ...tippyProps\n}) => {\n const { plugins, mounted } = useLazyPopover(propsPlugins);\n\n return (\n <TippyComponent\n interactive\n className={tippyStyles.noPadding}\n trigger={visible !== undefined ? undefined : trigger}\n visible={visible}\n theme={\"light \" + variantToTheme[variant] ?? variantToTheme.standard}\n delay={delay}\n maxWidth={maxWidth}\n arrow={arrow}\n content={\n (!lazy || mounted) && (\n <Box spacing={!disablePadding && 1} indent={!disablePadding && 1}>\n {content}\n </Box>\n )\n }\n plugins={plugins}\n {...tippyProps}\n >\n <div ref={tippyRef}>{children}</div>\n </TippyComponent>\n );\n};\n","import { FlatButton, FlatButtonProps } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps } from \"../popover/Popover\";\n\nexport interface ButtonWithPopoverProps extends FlatButtonProps {\n children?: PopoverProps[\"children\"];\n visible?: boolean;\n onShow?: () => void;\n onHide?: () => void;\n}\n\nexport const ButtonWithPopover: React.FC<ButtonWithPopoverProps> = ({\n children,\n onShow,\n onHide,\n ...buttonProps\n}) => {\n return (\n <Popover\n content={children}\n trigger={\"click\"}\n zIndex={1000}\n onShow={onShow}\n onHide={onHide}\n >\n <FlatButton {...buttonProps} />\n </Popover>\n );\n};\n","import { Text } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps, PopoverVariant } from \"../popover/Popover\";\n\nexport interface TooltipProps extends Partial<Omit<PopoverProps, \"content\">> {\n variant?: PopoverVariant;\n label: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ label, ...popoverProps }) => {\n return (\n <Popover {...popoverProps} content={<Text size={\"small\"}>{label}</Text>} />\n );\n};\n","import \"tippy.js/dist/tippy.css\";\nimport \"tippy.js/themes/light.css\";\nimport { Instance } from \"tippy.js\";\nimport { MutableRefObject, useRef } from \"react\";\n\nexport type TippyInstance = Instance;\n\nexport type TippyElement<TElement extends HTMLElement> = TElement & {\n _tippy: TippyInstance;\n};\n\nexport type TippyCallbackRef<TElement extends HTMLElement> = (\n element: TippyElement<TElement> | null\n) => void;\n\nexport const useTippyInstance = <TElement extends HTMLElement>(): [\n TippyCallbackRef<TElement>,\n MutableRefObject<TippyInstance | undefined>\n] => {\n const tippyRef = useRef<TippyInstance>();\n\n return [\n (element: TippyElement<TElement> | null) => {\n tippyRef.current = element?._tippy ?? undefined;\n },\n tippyRef,\n ];\n};\n"],"names":["React","Column","Text","Space","Row","FlatButton","PrimaryButton","Spinner","useState","useMemo","TippyComponent","Box","useRef"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../src/components/popover/ActionPrompt.tsx","../../../node_modules/style-inject/dist/style-inject.es.js","../src/hooks/UseLazyPopover.ts","../src/components/popover/Popover.tsx","../src/components/button-with-popover/ButtonWithPopover.tsx","../src/components/tooltip/Tooltip.tsx","../src/hooks/UseTippyInstance.ts"],"sourcesContent":["import { Column, Row, Space, Text } from \"@stenajs-webui/core\";\nimport { FlatButton, Spinner, PrimaryButton } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\n\nexport interface ActionPromptProps {\n text?: string;\n yesLabel?: string;\n noLabel?: string;\n onYes?: () => void;\n onNo?: () => void;\n loading?: boolean;\n}\n\nexport const ActionPrompt: React.FC<ActionPromptProps> = ({\n text = \"Are you sure?\",\n yesLabel = \"Yes\",\n noLabel = \"No\",\n onNo,\n onYes,\n loading,\n}) => {\n return (\n <Column position={\"relative\"}>\n <div style={{ opacity: loading ? 0 : 1 }}>\n <Text>{text}</Text>\n <Space />\n <Row justifyContent={\"flex-end\"} alignItems={\"center\"}>\n <FlatButton label={noLabel} onClick={onNo} />\n <Space />\n <PrimaryButton label={yesLabel} onClick={onYes} />\n </Row>\n </div>\n {loading && (\n <Row\n justifyContent={\"center\"}\n alignItems={\"center\"}\n left={0}\n top={0}\n width={\"100%\"}\n height={\"100%\"}\n position={\"absolute\"}\n >\n <Spinner size={\"small\"} />\n </Row>\n )}\n </Column>\n );\n};\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { useMemo, useState } from \"react\";\nimport { Plugin } from \"tippy.js\";\n\nexport const useLazyPopover = (plugins: Plugin<unknown>[] = []) => {\n const [mounted, setMounted] = useState(false);\n\n const lazyPlugin = useMemo(\n () => ({\n fn: () => ({\n onShow: () => setMounted(true),\n onHidden: () => setMounted(false),\n }),\n }),\n [setMounted]\n );\n\n return {\n plugins: [lazyPlugin, ...plugins],\n mounted,\n };\n};\n","import TippyComponent, {\n TippyProps as TippyComponentProps,\n} from \"@tippyjs/react\";\nimport * as React from \"react\";\nimport styles from \"./Popover.module.css\";\nimport \"./Tippy.module.css\";\nimport { TippyCallbackRef } from \"../../hooks/UseTippyInstance\";\nimport { Box } from \"@stenajs-webui/core\";\nimport { useLazyPopover } from \"../../hooks/UseLazyPopover\";\n\nexport type PopoverVariant =\n | \"standard\"\n | \"info\"\n | \"warning\"\n | \"error\"\n | \"outlined\";\n\nexport interface PopoverProps\n extends Partial<Omit<TippyComponentProps, \"theme\" | \"render\">> {\n tippyRef?: TippyCallbackRef<HTMLDivElement>;\n disablePadding?: boolean;\n lazy?: boolean;\n variant?: PopoverVariant;\n}\n\nexport const tippyStyles = {\n noPadding: styles.noPadding,\n};\n\nconst variantToTheme: Record<PopoverVariant, string> = {\n standard: \"light\",\n info: \"info\",\n warning: \"warning\",\n error: \"error\",\n outlined: \"outlined\",\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n visible,\n trigger = \"mouseenter\",\n children,\n tippyRef,\n delay = 0,\n variant = \"standard\",\n disablePadding,\n content,\n maxWidth = \"500px\",\n plugins: propsPlugins,\n lazy,\n arrow = true,\n ...tippyProps\n}) => {\n const { plugins, mounted } = useLazyPopover(propsPlugins);\n\n return (\n <TippyComponent\n interactive\n className={tippyStyles.noPadding}\n trigger={visible !== undefined ? undefined : trigger}\n visible={visible}\n theme={\"light \" + variantToTheme[variant] ?? variantToTheme.standard}\n delay={delay}\n maxWidth={maxWidth}\n arrow={arrow}\n content={\n (!lazy || mounted) && (\n <Box spacing={!disablePadding && 1} indent={!disablePadding && 1}>\n {content}\n </Box>\n )\n }\n plugins={plugins}\n {...tippyProps}\n >\n <div ref={tippyRef}>{children}</div>\n </TippyComponent>\n );\n};\n","import { FlatButton, FlatButtonProps } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps } from \"../popover/Popover\";\n\nexport interface ButtonWithPopoverProps extends FlatButtonProps {\n children?: PopoverProps[\"children\"];\n visible?: boolean;\n onShow?: () => void;\n onHide?: () => void;\n}\n\nexport const ButtonWithPopover: React.FC<ButtonWithPopoverProps> = ({\n children,\n onShow,\n onHide,\n ...buttonProps\n}) => {\n return (\n <Popover\n content={children}\n trigger={\"click\"}\n zIndex={1000}\n onShow={onShow}\n onHide={onHide}\n >\n <FlatButton {...buttonProps} />\n </Popover>\n );\n};\n","import { Text } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { Popover, PopoverProps, PopoverVariant } from \"../popover/Popover\";\n\nexport interface TooltipProps extends Partial<Omit<PopoverProps, \"content\">> {\n variant?: PopoverVariant;\n label: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ label, ...popoverProps }) => {\n return (\n <Popover {...popoverProps} content={<Text size={\"small\"}>{label}</Text>} />\n );\n};\n","import { Instance } from \"tippy.js\";\nimport { MutableRefObject, useRef } from \"react\";\n\nexport type TippyInstance = Instance;\n\nexport type TippyElement<TElement extends HTMLElement> = TElement & {\n _tippy: TippyInstance;\n};\n\nexport type TippyCallbackRef<TElement extends HTMLElement> = (\n element: TippyElement<TElement> | null\n) => void;\n\nexport const useTippyInstance = <TElement extends HTMLElement>(): [\n TippyCallbackRef<TElement>,\n MutableRefObject<TippyInstance | undefined>\n] => {\n const tippyRef = useRef<TippyInstance>();\n\n return [\n (element: TippyElement<TElement> | null) => {\n tippyRef.current = element?._tippy ?? undefined;\n },\n tippyRef,\n ];\n};\n"],"names":["React","Column","Text","Space","Row","FlatButton","PrimaryButton","Spinner","useState","useMemo","TippyComponent","Box","useRef"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stenajs-webui/tooltip",
3
- "version": "15.5.5",
3
+ "version": "15.5.8",
4
4
  "description": "",
5
5
  "author": "mattias800",
6
6
  "license": "MIT",
@@ -27,8 +27,8 @@
27
27
  "deploy": "gh-pages -d example/build"
28
28
  },
29
29
  "dependencies": {
30
- "@stenajs-webui/core": "15.5.5",
31
- "@stenajs-webui/elements": "15.5.5",
30
+ "@stenajs-webui/core": "15.5.8",
31
+ "@stenajs-webui/elements": "15.5.8",
32
32
  "@tippyjs/react": "^4.1.0",
33
33
  "tippy.js": "^6.2.6"
34
34
  },
@@ -54,5 +54,5 @@
54
54
  "files": [
55
55
  "dist"
56
56
  ],
57
- "gitHead": "f745888e0c33ac6781f5f101e6a213a206f7c207"
57
+ "gitHead": "2c18a5ec3fabd3d6de34090348e992f8c7e9101a"
58
58
  }