@stenajs-webui/tooltip 17.4.1 → 17.7.0

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 (17) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/components/button-with-popover/ButtonWithPopover.d.ts +10 -10
  3. package/dist/components/popover/ActionPrompt.d.ts +10 -10
  4. package/dist/components/popover/Popover.d.ts +15 -15
  5. package/dist/components/tooltip/Tooltip.d.ts +7 -7
  6. package/dist/hooks/UseLazyPopover.d.ts +10 -10
  7. package/dist/hooks/UsePopoverVisibility.d.ts +5 -5
  8. package/dist/hooks/UseTippyInstance.d.ts +8 -8
  9. package/dist/index.d.ts +6 -6
  10. package/dist/index.es.js +148 -151
  11. package/dist/index.es.js.map +1 -1
  12. package/dist/index.js +1 -189
  13. package/dist/index.js.map +1 -1
  14. package/dist/types.d.ts +2 -2
  15. package/package.json +7 -8
  16. package/dist/components/popover/Popover.stories.d.ts +0 -16
  17. package/dist/components/tooltip/Tooltip.stories.d.ts +0 -10
package/CHANGELOG.md CHANGED
@@ -1,3 +1,29 @@
1
+ # v17.7.0 (Fri Jul 01 2022)
2
+
3
+ #### 🚀 Enhancement
4
+
5
+ - Build packages with vite [#475](https://github.com/StenaIT/stenajs-webui/pull/475) ([@lindskogen](https://github.com/lindskogen))
6
+
7
+ #### Authors: 1
8
+
9
+ - Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
10
+
11
+ ---
12
+
13
+ # v17.6.0 (Fri Jul 01 2022)
14
+
15
+ #### 🚀 Enhancement
16
+
17
+ - Use Stena icons instead of Font Awesome icons [#471](https://github.com/StenaIT/stenajs-webui/pull/471) (david.zetterdahl@stenaline.com [@LordDz](https://github.com/LordDz) [@lindskogen](https://github.com/lindskogen))
18
+
19
+ #### Authors: 3
20
+
21
+ - David ([@LordDz](https://github.com/LordDz))
22
+ - David Zetterdahl (david.zetterdahl@stenaline.com)
23
+ - Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
24
+
25
+ ---
26
+
1
27
  # v17.0.0 (Fri Jun 17 2022)
2
28
 
3
29
  #### 💥 Breaking Change
package/dist/components/button-with-popover/ButtonWithPopover.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { FlatButtonProps } from "@stenajs-webui/elements";
2
- import * as React from "react";
3
- import { PopoverProps } from "../popover/Popover";
4
- export interface ButtonWithPopoverProps extends FlatButtonProps {
5
- children?: PopoverProps["children"];
6
- visible?: boolean;
7
- onShow?: () => void;
8
- onHide?: () => void;
9
- }
10
- export declare const ButtonWithPopover: React.FC<ButtonWithPopoverProps>;
1
+ import { FlatButtonProps } from "@stenajs-webui/elements";
2
+ import * as React from "react";
3
+ import { PopoverProps } from "../popover/Popover";
4
+ export interface ButtonWithPopoverProps extends FlatButtonProps {
5
+ children?: PopoverProps["children"];
6
+ visible?: boolean;
7
+ onShow?: () => void;
8
+ onHide?: () => void;
9
+ }
10
+ export declare const ButtonWithPopover: React.FC<ButtonWithPopoverProps>;
package/dist/components/popover/ActionPrompt.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import * as React from "react";
2
- export interface ActionPromptProps {
3
- text?: string;
4
- yesLabel?: string;
5
- noLabel?: string;
6
- onYes?: () => void;
7
- onNo?: () => void;
8
- loading?: boolean;
9
- }
10
- export declare const ActionPrompt: React.FC<ActionPromptProps>;
1
+ import * as React from "react";
2
+ export interface ActionPromptProps {
3
+ text?: string;
4
+ yesLabel?: string;
5
+ noLabel?: string;
6
+ onYes?: () => void;
7
+ onNo?: () => void;
8
+ loading?: boolean;
9
+ }
10
+ export declare const ActionPrompt: React.FC<ActionPromptProps>;
package/dist/components/popover/Popover.d.ts CHANGED
@@ -1,15 +1,15 @@
1
- import { TippyProps as TippyComponentProps } from "@tippyjs/react";
2
- import * as React from "react";
3
- import "./Tippy.module.css";
4
- import { TippyCallbackRef } from "../../hooks/UseTippyInstance";
5
- export declare type PopoverVariant = "standard" | "info" | "warning" | "error" | "outlined";
6
- export interface PopoverProps extends Partial<Omit<TippyComponentProps, "theme" | "render">> {
7
- tippyRef?: TippyCallbackRef<HTMLDivElement>;
8
- disablePadding?: boolean;
9
- lazy?: boolean;
10
- variant?: PopoverVariant;
11
- }
12
- export declare const tippyStyles: {
13
- noPadding: string;
14
- };
15
- export declare const Popover: React.FC<PopoverProps>;
1
+ import { TippyProps as TippyComponentProps } from "@tippyjs/react";
2
+ import * as React from "react";
3
+ import "./Tippy.module.css";
4
+ import { TippyCallbackRef } from "../../hooks/UseTippyInstance";
5
+ export declare type PopoverVariant = "standard" | "info" | "warning" | "error" | "outlined";
6
+ export interface PopoverProps extends Partial<Omit<TippyComponentProps, "theme" | "render">> {
7
+ tippyRef?: TippyCallbackRef<HTMLDivElement>;
8
+ disablePadding?: boolean;
9
+ lazy?: boolean;
10
+ variant?: PopoverVariant;
11
+ }
12
+ export declare const tippyStyles: {
13
+ noPadding: string;
14
+ };
15
+ export declare const Popover: React.FC<PopoverProps>;
package/dist/components/tooltip/Tooltip.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import * as React from "react";
2
- import { PopoverProps, PopoverVariant } from "../popover/Popover";
3
- export interface TooltipProps extends Partial<Omit<PopoverProps, "content">> {
4
- variant?: PopoverVariant;
5
- label: string;
6
- }
7
- export declare const Tooltip: React.FC<TooltipProps>;
1
+ import * as React from "react";
2
+ import { PopoverProps, PopoverVariant } from "../popover/Popover";
3
+ export interface TooltipProps extends Partial<Omit<PopoverProps, "content">> {
4
+ variant?: PopoverVariant;
5
+ label: string;
6
+ }
7
+ export declare const Tooltip: React.FC<TooltipProps>;
package/dist/hooks/UseLazyPopover.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { Plugin } from "tippy.js";
2
- export declare const useLazyPopover: (plugins?: Plugin<unknown>[]) => {
3
- plugins: (Plugin<unknown> | {
4
- fn: () => {
5
- onShow: () => void;
6
- onHidden: () => void;
7
- };
8
- })[];
9
- mounted: boolean;
10
- };
1
+ import { Plugin } from "tippy.js";
2
+ export declare const useLazyPopover: (plugins?: Plugin<unknown>[]) => {
3
+ plugins: (Plugin<unknown> | {
4
+ fn: () => {
5
+ onShow: () => void;
6
+ onHidden: () => void;
7
+ };
8
+ })[];
9
+ mounted: boolean;
10
+ };
package/dist/hooks/UsePopoverVisibility.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export declare const usePopoverVisibility: (openInitially?: boolean) => {
2
- isPopoverOpen: boolean;
3
- openPopover: () => void;
4
- closePopover: () => void;
5
- };
1
+ export declare const usePopoverVisibility: (openInitially?: boolean) => {
2
+ isPopoverOpen: boolean;
3
+ openPopover: () => void;
4
+ closePopover: () => void;
5
+ };
package/dist/hooks/UseTippyInstance.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import { Instance } from "tippy.js";
2
- import { MutableRefObject } from "react";
3
- export declare type TippyInstance = Instance;
4
- export declare type TippyElement<TElement extends HTMLElement> = TElement & {
5
- _tippy: TippyInstance;
6
- };
7
- export declare type TippyCallbackRef<TElement extends HTMLElement> = (element: TippyElement<TElement> | null) => void;
8
- export declare const useTippyInstance: <TElement extends HTMLElement>() => [TippyCallbackRef<TElement>, MutableRefObject<TippyInstance | undefined>];
1
+ import { Instance } from "tippy.js";
2
+ import { MutableRefObject } from "react";
3
+ export declare type TippyInstance = Instance;
4
+ export declare type TippyElement<TElement extends HTMLElement> = TElement & {
5
+ _tippy: TippyInstance;
6
+ };
7
+ export declare type TippyCallbackRef<TElement extends HTMLElement> = (element: TippyElement<TElement> | null) => void;
8
+ export declare const useTippyInstance: <TElement extends HTMLElement>() => [TippyCallbackRef<TElement>, MutableRefObject<TippyInstance | undefined>];
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- export * from "./components/popover/ActionPrompt";
2
- export * from "./components/popover/Popover";
3
- export * from "./components/button-with-popover/ButtonWithPopover";
4
- export * from "./components/tooltip/Tooltip";
5
- export * from "./hooks/UseTippyInstance";
6
- export * from "./types";
1
+ export * from "./components/popover/ActionPrompt";
2
+ export * from "./components/popover/Popover";
3
+ export * from "./components/button-with-popover/ButtonWithPopover";
4
+ export * from "./components/tooltip/Tooltip";
5
+ export * from "./hooks/UseTippyInstance";
6
+ export * from "./types";
package/dist/index.es.js CHANGED
@@ -1,159 +1,156 @@
1
- import { Column, Text, Space, Row, Box } from '@stenajs-webui/core';
2
- import { FlatButton, PrimaryButton, Spinner } from '@stenajs-webui/elements';
3
- import * as React from 'react';
4
- import { useState, useMemo, useRef } from 'react';
5
- import TippyComponent from '@tippyjs/react';
6
-
7
- var ActionPrompt = function (_a) {
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;
9
- return (React.createElement(Column, { position: "relative" },
10
- React.createElement("div", { style: { opacity: loading ? 0 : 1 } },
11
- React.createElement(Text, null, text),
12
- React.createElement(Space, null),
13
- React.createElement(Row, { justifyContent: "flex-end", alignItems: "center" },
14
- React.createElement(FlatButton, { label: noLabel, onClick: onNo }),
15
- React.createElement(Space, null),
16
- React.createElement(PrimaryButton, { label: yesLabel, onClick: onYes }))),
17
- loading && (React.createElement(Row, { justifyContent: "center", alignItems: "center", left: 0, top: 0, width: "100%", height: "100%", position: "absolute" },
18
- React.createElement(Spinner, { size: "small" })))));
1
+ (function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("._noPadding_183x1_1 .tippy-content{padding:0}.tippy-box[data-theme~=light]{box-shadow:var(--swui-shadow-popover)}.tippy-box[data-theme~=outlined]{border:1px solid var(--lhds-color-blue-500)}.tippy-box[data-theme~=info]{background-color:var(--lhds-color-blue-50);color:var(--swui-text-primary-color)}.tippy-box[data-theme~=info] .tippy-arrow{color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=warning]{background-color:var(--lhds-color-orange-50);color:var(--swui-text-primary-color)}.tippy-box[data-theme~=warning] .tippy-arrow{color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=error]{background-color:var(--lhds-color-red-50);color:var(--swui-text-primary-color)}.tippy-box[data-theme~=error] .tippy-arrow{color:var(--lhds-color-red-50)}.tippy-box[data-theme~=info][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=info][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=info][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=info][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=warning][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=warning][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=warning][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=warning][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=error][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--lhds-color-red-50)}.tippy-box[data-theme~=error][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--lhds-color-red-50)}.tippy-box[data-theme~=error][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--lhds-color-red-50)}.tippy-box[data-theme~=error][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--lhds-color-red-50)}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:visibility,opacity,-webkit-transform;transition-property:transform,visibility,opacity;transition-property:transform,visibility,opacity,-webkit-transform}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;-webkit-transform-origin:center top;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;-webkit-transform-origin:center bottom;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;-webkit-transform-origin:center left;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;-webkit-transform-origin:center right;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { Column, Text, Space, Row, Box } from "@stenajs-webui/core";
2
+ import { FlatButton, PrimaryButton, Spinner } from "@stenajs-webui/elements";
3
+ import { jsxs, jsx } from "react/jsx-runtime";
4
+ import TippyComponent from "@tippyjs/react";
5
+ import { useState, useMemo, useRef } from "react";
6
+ const ActionPrompt = ({
7
+ text = "Are you sure?",
8
+ yesLabel = "Yes",
9
+ noLabel = "No",
10
+ onNo,
11
+ onYes,
12
+ loading
13
+ }) => {
14
+ return /* @__PURE__ */ jsxs(Column, {
15
+ position: "relative",
16
+ children: [/* @__PURE__ */ jsxs("div", {
17
+ style: {
18
+ opacity: loading ? 0 : 1
19
+ },
20
+ children: [/* @__PURE__ */ jsx(Text, {
21
+ children: text
22
+ }), /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsxs(Row, {
23
+ justifyContent: "flex-end",
24
+ alignItems: "center",
25
+ children: [/* @__PURE__ */ jsx(FlatButton, {
26
+ label: noLabel,
27
+ onClick: onNo
28
+ }), /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(PrimaryButton, {
29
+ label: yesLabel,
30
+ onClick: onYes
31
+ })]
32
+ })]
33
+ }), loading && /* @__PURE__ */ jsx(Row, {
34
+ justifyContent: "center",
35
+ alignItems: "center",
36
+ left: 0,
37
+ top: 0,
38
+ width: "100%",
39
+ height: "100%",
40
+ position: "absolute",
41
+ children: /* @__PURE__ */ jsx(Spinner, {
42
+ size: "small"
43
+ })
44
+ })]
45
+ });
19
46
  };
20
-
21
- /*! *****************************************************************************
22
- Copyright (c) Microsoft Corporation.
23
-
24
- Permission to use, copy, modify, and/or distribute this software for any
25
- purpose with or without fee is hereby granted.
26
-
27
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
28
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
29
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
30
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
31
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
32
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
33
- PERFORMANCE OF THIS SOFTWARE.
34
- ***************************************************************************** */
35
-
36
- var __assign = function() {
37
- __assign = Object.assign || function __assign(t) {
38
- for (var s, i = 1, n = arguments.length; i < n; i++) {
39
- s = arguments[i];
40
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
41
- }
42
- return t;
43
- };
44
- return __assign.apply(this, arguments);
45
- };
46
-
47
- function __rest(s, e) {
48
- var t = {};
49
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
50
- t[p] = s[p];
51
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
52
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
53
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
54
- t[p[i]] = s[p[i]];
55
- }
56
- return t;
57
- }
58
-
59
- function __spreadArray(to, from, pack) {
60
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
61
- if (ar || !(i in from)) {
62
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
63
- ar[i] = from[i];
64
- }
65
- }
66
- return to.concat(ar || Array.prototype.slice.call(from));
67
- }
68
-
69
- function styleInject(css, ref) {
70
- if ( ref === void 0 ) ref = {};
71
- var insertAt = ref.insertAt;
72
-
73
- if (!css || typeof document === 'undefined') { return; }
74
-
75
- var head = document.head || document.getElementsByTagName('head')[0];
76
- var style = document.createElement('style');
77
- style.type = 'text/css';
78
-
79
- if (insertAt === 'top') {
80
- if (head.firstChild) {
81
- head.insertBefore(style, head.firstChild);
82
- } else {
83
- head.appendChild(style);
84
- }
85
- } else {
86
- head.appendChild(style);
87
- }
88
-
89
- if (style.styleSheet) {
90
- style.styleSheet.cssText = css;
91
- } else {
92
- style.appendChild(document.createTextNode(css));
93
- }
94
- }
95
-
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";
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";
101
- styleInject(css_248z);
102
-
103
- var useLazyPopover = function (plugins) {
104
- if (plugins === void 0) { plugins = []; }
105
- var _a = useState(false), mounted = _a[0], setMounted = _a[1];
106
- var lazyPlugin = useMemo(function () { return ({
107
- fn: function () { return ({
108
- onShow: function () { return setMounted(true); },
109
- onHidden: function () { return setMounted(false); },
110
- }); },
111
- }); }, [setMounted]);
112
- return {
113
- plugins: __spreadArray([lazyPlugin], plugins, true),
114
- mounted: mounted,
115
- };
47
+ const noPadding = "_noPadding_183x1_1";
48
+ var styles = {
49
+ noPadding
116
50
  };
117
-
118
- var tippyStyles = {
119
- noPadding: styles.noPadding,
120
- };
121
- var variantToTheme = {
122
- standard: "light",
123
- info: "info",
124
- warning: "warning",
125
- error: "error",
126
- outlined: "outlined",
127
- };
128
- var Popover = function (_a) {
129
- var _b;
130
- var visible = _a.visible, _c = _a.trigger, trigger = _c === void 0 ? "mouseenter" : _c, children = _a.children, tippyRef = _a.tippyRef, _d = _a.delay, delay = _d === void 0 ? 0 : _d, _e = _a.variant, variant = _e === void 0 ? "standard" : _e, disablePadding = _a.disablePadding, content = _a.content, _f = _a.maxWidth, maxWidth = _f === void 0 ? "500px" : _f, propsPlugins = _a.plugins, lazy = _a.lazy, _g = _a.arrow, arrow = _g === void 0 ? true : _g, tippyProps = __rest(_a, ["visible", "trigger", "children", "tippyRef", "delay", "variant", "disablePadding", "content", "maxWidth", "plugins", "lazy", "arrow"]);
131
- var _h = useLazyPopover(propsPlugins), plugins = _h.plugins, mounted = _h.mounted;
132
- return (React.createElement(TippyComponent, __assign({ interactive: true, className: tippyStyles.noPadding, trigger: visible !== undefined ? undefined : trigger, visible: visible, theme: (_b = "light " + variantToTheme[variant]) !== null && _b !== void 0 ? _b : variantToTheme.standard, delay: delay, maxWidth: maxWidth, arrow: arrow, content: (!lazy || mounted) && (React.createElement(Box, { spacing: !disablePadding && 1, indent: !disablePadding && 1 }, content)), plugins: plugins }, tippyProps),
133
- React.createElement("div", { ref: tippyRef }, children)));
51
+ var Tippy_module = {};
52
+ const useLazyPopover = (plugins = []) => {
53
+ const [mounted, setMounted] = useState(false);
54
+ const lazyPlugin = useMemo(() => ({
55
+ fn: () => ({
56
+ onShow: () => setMounted(true),
57
+ onHidden: () => setMounted(false)
58
+ })
59
+ }), [setMounted]);
60
+ return {
61
+ plugins: [lazyPlugin, ...plugins],
62
+ mounted
63
+ };
134
64
  };
135
-
136
- var ButtonWithPopover = function (_a) {
137
- var children = _a.children, onShow = _a.onShow, onHide = _a.onHide, buttonProps = __rest(_a, ["children", "onShow", "onHide"]);
138
- return (React.createElement(Popover, { content: children, trigger: "click", zIndex: 1000, onShow: onShow, onHide: onHide },
139
- React.createElement(FlatButton, __assign({}, buttonProps))));
65
+ const tippyStyles = {
66
+ noPadding: styles.noPadding
140
67
  };
141
-
142
- var Tooltip = function (_a) {
143
- var label = _a.label, popoverProps = __rest(_a, ["label"]);
144
- return (React.createElement(Popover, __assign({}, popoverProps, { content: React.createElement(Text, { size: "small" }, label) })));
68
+ const variantToTheme = {
69
+ standard: "light",
70
+ info: "info",
71
+ warning: "warning",
72
+ error: "error",
73
+ outlined: "outlined"
145
74
  };
146
-
147
- var useTippyInstance = function () {
148
- var tippyRef = useRef();
149
- return [
150
- function (element) {
151
- var _a;
152
- tippyRef.current = (_a = element === null || element === void 0 ? void 0 : element._tippy) !== null && _a !== void 0 ? _a : undefined;
153
- },
154
- tippyRef,
155
- ];
75
+ const Popover = ({
76
+ visible,
77
+ trigger = "mouseenter",
78
+ children,
79
+ tippyRef,
80
+ delay = 0,
81
+ variant = "standard",
82
+ disablePadding,
83
+ content,
84
+ maxWidth = "500px",
85
+ plugins: propsPlugins,
86
+ lazy,
87
+ arrow = true,
88
+ ...tippyProps
89
+ }) => {
90
+ const {
91
+ plugins,
92
+ mounted
93
+ } = useLazyPopover(propsPlugins);
94
+ return /* @__PURE__ */ jsx(TippyComponent, {
95
+ interactive: true,
96
+ className: tippyStyles.noPadding,
97
+ trigger: visible !== void 0 ? void 0 : trigger,
98
+ visible,
99
+ theme: "light " + variantToTheme[variant],
100
+ delay,
101
+ maxWidth,
102
+ arrow,
103
+ content: (!lazy || mounted) && /* @__PURE__ */ jsx(Box, {
104
+ spacing: !disablePadding && 1,
105
+ indent: !disablePadding && 1,
106
+ children: content
107
+ }),
108
+ plugins,
109
+ ...tippyProps,
110
+ children: /* @__PURE__ */ jsx("div", {
111
+ ref: tippyRef,
112
+ children
113
+ })
114
+ });
115
+ };
116
+ const ButtonWithPopover = ({
117
+ children,
118
+ onShow,
119
+ onHide,
120
+ ...buttonProps
121
+ }) => {
122
+ return /* @__PURE__ */ jsx(Popover, {
123
+ content: children,
124
+ trigger: "click",
125
+ zIndex: 1e3,
126
+ onShow,
127
+ onHide,
128
+ children: /* @__PURE__ */ jsx(FlatButton, {
129
+ ...buttonProps
130
+ })
131
+ });
132
+ };
133
+ const Tooltip = ({
134
+ label,
135
+ ...popoverProps
136
+ }) => {
137
+ return /* @__PURE__ */ jsx(Popover, {
138
+ ...popoverProps,
139
+ content: /* @__PURE__ */ jsx(Text, {
140
+ size: "small",
141
+ children: label
142
+ })
143
+ });
144
+ };
145
+ const useTippyInstance = () => {
146
+ const tippyRef = useRef();
147
+ return [
148
+ (element) => {
149
+ var _a;
150
+ tippyRef.current = (_a = element == null ? void 0 : element._tippy) != null ? _a : void 0;
151
+ },
152
+ tippyRef
153
+ ];
156
154
  };
157
-
158
155
  export { ActionPrompt, ButtonWithPopover, Popover, Tooltip, tippyStyles, useTippyInstance };
159
156
  //# sourceMappingURL=index.es.js.map
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.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":"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"}
1
+ {"version":3,"file":"index.es.js","sources":["../src/components/popover/ActionPrompt.tsx","../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","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":["ActionPrompt","text","yesLabel","noLabel","onNo","onYes","loading","_jsxs","opacity","_jsx","tippyStyles","noPadding","styles","variantToTheme","standard","info","warning","error","outlined","Popover","visible","trigger","children","tippyRef","delay","variant","disablePadding","content","maxWidth","plugins","propsPlugins","lazy","arrow","tippyProps","mounted","useLazyPopover","undefined","ButtonWithPopover","onShow","onHide","buttonProps","Tooltip","label","popoverProps"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -1,190 +1,2 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var core = require('@stenajs-webui/core');
6
- var elements = require('@stenajs-webui/elements');
7
- var React = require('react');
8
- var TippyComponent = require('@tippyjs/react');
9
-
10
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
-
12
- function _interopNamespace(e) {
13
- if (e && e.__esModule) return e;
14
- var n = Object.create(null);
15
- if (e) {
16
- Object.keys(e).forEach(function (k) {
17
- if (k !== 'default') {
18
- var d = Object.getOwnPropertyDescriptor(e, k);
19
- Object.defineProperty(n, k, d.get ? d : {
20
- enumerable: true,
21
- get: function () { return e[k]; }
22
- });
23
- }
24
- });
25
- }
26
- n["default"] = e;
27
- return Object.freeze(n);
28
- }
29
-
30
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
31
- var TippyComponent__default = /*#__PURE__*/_interopDefaultLegacy(TippyComponent);
32
-
33
- var ActionPrompt = function (_a) {
34
- 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;
35
- return (React__namespace.createElement(core.Column, { position: "relative" },
36
- React__namespace.createElement("div", { style: { opacity: loading ? 0 : 1 } },
37
- React__namespace.createElement(core.Text, null, text),
38
- React__namespace.createElement(core.Space, null),
39
- React__namespace.createElement(core.Row, { justifyContent: "flex-end", alignItems: "center" },
40
- React__namespace.createElement(elements.FlatButton, { label: noLabel, onClick: onNo }),
41
- React__namespace.createElement(core.Space, null),
42
- React__namespace.createElement(elements.PrimaryButton, { label: yesLabel, onClick: onYes }))),
43
- loading && (React__namespace.createElement(core.Row, { justifyContent: "center", alignItems: "center", left: 0, top: 0, width: "100%", height: "100%", position: "absolute" },
44
- React__namespace.createElement(elements.Spinner, { size: "small" })))));
45
- };
46
-
47
- /*! *****************************************************************************
48
- Copyright (c) Microsoft Corporation.
49
-
50
- Permission to use, copy, modify, and/or distribute this software for any
51
- purpose with or without fee is hereby granted.
52
-
53
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
54
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
55
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
56
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
57
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
58
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
59
- PERFORMANCE OF THIS SOFTWARE.
60
- ***************************************************************************** */
61
-
62
- var __assign = function() {
63
- __assign = Object.assign || function __assign(t) {
64
- for (var s, i = 1, n = arguments.length; i < n; i++) {
65
- s = arguments[i];
66
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
67
- }
68
- return t;
69
- };
70
- return __assign.apply(this, arguments);
71
- };
72
-
73
- function __rest(s, e) {
74
- var t = {};
75
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
76
- t[p] = s[p];
77
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
78
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
79
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
80
- t[p[i]] = s[p[i]];
81
- }
82
- return t;
83
- }
84
-
85
- function __spreadArray(to, from, pack) {
86
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
87
- if (ar || !(i in from)) {
88
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
89
- ar[i] = from[i];
90
- }
91
- }
92
- return to.concat(ar || Array.prototype.slice.call(from));
93
- }
94
-
95
- function styleInject(css, ref) {
96
- if ( ref === void 0 ) ref = {};
97
- var insertAt = ref.insertAt;
98
-
99
- if (!css || typeof document === 'undefined') { return; }
100
-
101
- var head = document.head || document.getElementsByTagName('head')[0];
102
- var style = document.createElement('style');
103
- style.type = 'text/css';
104
-
105
- if (insertAt === 'top') {
106
- if (head.firstChild) {
107
- head.insertBefore(style, head.firstChild);
108
- } else {
109
- head.appendChild(style);
110
- }
111
- } else {
112
- head.appendChild(style);
113
- }
114
-
115
- if (style.styleSheet) {
116
- style.styleSheet.cssText = css;
117
- } else {
118
- style.appendChild(document.createTextNode(css));
119
- }
120
- }
121
-
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";
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";
127
- styleInject(css_248z);
128
-
129
- var useLazyPopover = function (plugins) {
130
- if (plugins === void 0) { plugins = []; }
131
- var _a = React.useState(false), mounted = _a[0], setMounted = _a[1];
132
- var lazyPlugin = React.useMemo(function () { return ({
133
- fn: function () { return ({
134
- onShow: function () { return setMounted(true); },
135
- onHidden: function () { return setMounted(false); },
136
- }); },
137
- }); }, [setMounted]);
138
- return {
139
- plugins: __spreadArray([lazyPlugin], plugins, true),
140
- mounted: mounted,
141
- };
142
- };
143
-
144
- var tippyStyles = {
145
- noPadding: styles.noPadding,
146
- };
147
- var variantToTheme = {
148
- standard: "light",
149
- info: "info",
150
- warning: "warning",
151
- error: "error",
152
- outlined: "outlined",
153
- };
154
- var Popover = function (_a) {
155
- var _b;
156
- var visible = _a.visible, _c = _a.trigger, trigger = _c === void 0 ? "mouseenter" : _c, children = _a.children, tippyRef = _a.tippyRef, _d = _a.delay, delay = _d === void 0 ? 0 : _d, _e = _a.variant, variant = _e === void 0 ? "standard" : _e, disablePadding = _a.disablePadding, content = _a.content, _f = _a.maxWidth, maxWidth = _f === void 0 ? "500px" : _f, propsPlugins = _a.plugins, lazy = _a.lazy, _g = _a.arrow, arrow = _g === void 0 ? true : _g, tippyProps = __rest(_a, ["visible", "trigger", "children", "tippyRef", "delay", "variant", "disablePadding", "content", "maxWidth", "plugins", "lazy", "arrow"]);
157
- var _h = useLazyPopover(propsPlugins), plugins = _h.plugins, mounted = _h.mounted;
158
- return (React__namespace.createElement(TippyComponent__default["default"], __assign({ interactive: true, className: tippyStyles.noPadding, trigger: visible !== undefined ? undefined : trigger, visible: visible, theme: (_b = "light " + variantToTheme[variant]) !== null && _b !== void 0 ? _b : variantToTheme.standard, delay: delay, maxWidth: maxWidth, arrow: arrow, content: (!lazy || mounted) && (React__namespace.createElement(core.Box, { spacing: !disablePadding && 1, indent: !disablePadding && 1 }, content)), plugins: plugins }, tippyProps),
159
- React__namespace.createElement("div", { ref: tippyRef }, children)));
160
- };
161
-
162
- var ButtonWithPopover = function (_a) {
163
- var children = _a.children, onShow = _a.onShow, onHide = _a.onHide, buttonProps = __rest(_a, ["children", "onShow", "onHide"]);
164
- return (React__namespace.createElement(Popover, { content: children, trigger: "click", zIndex: 1000, onShow: onShow, onHide: onHide },
165
- React__namespace.createElement(elements.FlatButton, __assign({}, buttonProps))));
166
- };
167
-
168
- var Tooltip = function (_a) {
169
- var label = _a.label, popoverProps = __rest(_a, ["label"]);
170
- return (React__namespace.createElement(Popover, __assign({}, popoverProps, { content: React__namespace.createElement(core.Text, { size: "small" }, label) })));
171
- };
172
-
173
- var useTippyInstance = function () {
174
- var tippyRef = React.useRef();
175
- return [
176
- function (element) {
177
- var _a;
178
- tippyRef.current = (_a = element === null || element === void 0 ? void 0 : element._tippy) !== null && _a !== void 0 ? _a : undefined;
179
- },
180
- tippyRef,
181
- ];
182
- };
183
-
184
- exports.ActionPrompt = ActionPrompt;
185
- exports.ButtonWithPopover = ButtonWithPopover;
186
- exports.Popover = Popover;
187
- exports.Tooltip = Tooltip;
188
- exports.tippyStyles = tippyStyles;
189
- exports.useTippyInstance = useTippyInstance;
1
+ (function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("._noPadding_183x1_1 .tippy-content{padding:0}.tippy-box[data-theme~=light]{box-shadow:var(--swui-shadow-popover)}.tippy-box[data-theme~=outlined]{border:1px solid var(--lhds-color-blue-500)}.tippy-box[data-theme~=info]{background-color:var(--lhds-color-blue-50);color:var(--swui-text-primary-color)}.tippy-box[data-theme~=info] .tippy-arrow{color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=warning]{background-color:var(--lhds-color-orange-50);color:var(--swui-text-primary-color)}.tippy-box[data-theme~=warning] .tippy-arrow{color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=error]{background-color:var(--lhds-color-red-50);color:var(--swui-text-primary-color)}.tippy-box[data-theme~=error] .tippy-arrow{color:var(--lhds-color-red-50)}.tippy-box[data-theme~=info][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=info][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=info][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=info][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--lhds-color-blue-50)}.tippy-box[data-theme~=warning][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=warning][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=warning][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=warning][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--lhds-color-orange-50)}.tippy-box[data-theme~=error][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--lhds-color-red-50)}.tippy-box[data-theme~=error][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--lhds-color-red-50)}.tippy-box[data-theme~=error][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--lhds-color-red-50)}.tippy-box[data-theme~=error][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--lhds-color-red-50)}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:visibility,opacity,-webkit-transform;transition-property:transform,visibility,opacity;transition-property:transform,visibility,opacity,-webkit-transform}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;-webkit-transform-origin:center top;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;-webkit-transform-origin:center bottom;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;-webkit-transform-origin:center left;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;-webkit-transform-origin:center right;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var r=require("@stenajs-webui/core"),u=require("@stenajs-webui/elements"),t=require("react/jsx-runtime"),P=require("@tippyjs/react"),l=require("react");function T(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var _=T(P);const S=({text:e="Are you sure?",yesLabel:n="Yes",noLabel:o="No",onNo:i,onYes:a,loading:s})=>t.jsxs(r.Column,{position:"relative",children:[t.jsxs("div",{style:{opacity:s?0:1},children:[t.jsx(r.Text,{children:e}),t.jsx(r.Space,{}),t.jsxs(r.Row,{justifyContent:"flex-end",alignItems:"center",children:[t.jsx(u.FlatButton,{label:o,onClick:i}),t.jsx(r.Space,{}),t.jsx(u.PrimaryButton,{label:n,onClick:a})]})]}),s&&t.jsx(r.Row,{justifyContent:"center",alignItems:"center",left:0,top:0,width:"100%",height:"100%",position:"absolute",children:t.jsx(u.Spinner,{size:"small"})})]}),w="_noPadding_183x1_1";var C={noPadding:w};const b=(e=[])=>{const[n,o]=l.useState(!1);return{plugins:[l.useMemo(()=>({fn:()=>({onShow:()=>o(!0),onHidden:()=>o(!1)})}),[o]),...e],mounted:n}},d={noPadding:C.noPadding},z={standard:"light",info:"info",warning:"warning",error:"error",outlined:"outlined"},c=({visible:e,trigger:n="mouseenter",children:o,tippyRef:i,delay:a=0,variant:s="standard",disablePadding:p,content:j,maxWidth:x="500px",plugins:y,lazy:g,arrow:v=!0,...f})=>{const{plugins:h,mounted:m}=b(y);return t.jsx(_.default,{interactive:!0,className:d.noPadding,trigger:e!==void 0?void 0:n,visible:e,theme:"light "+z[s],delay:a,maxWidth:x,arrow:v,content:(!g||m)&&t.jsx(r.Box,{spacing:!p&&1,indent:!p&&1,children:j}),plugins:h,...f,children:t.jsx("div",{ref:i,children:o})})},B=({children:e,onShow:n,onHide:o,...i})=>t.jsx(c,{content:e,trigger:"click",zIndex:1e3,onShow:n,onHide:o,children:t.jsx(u.FlatButton,{...i})}),q=({label:e,...n})=>t.jsx(c,{...n,content:t.jsx(r.Text,{size:"small",children:e})}),I=()=>{const e=l.useRef();return[n=>{var o;e.current=(o=n==null?void 0:n._tippy)!=null?o:void 0},e]};exports.ActionPrompt=S;exports.ButtonWithPopover=B;exports.Popover=c;exports.Tooltip=q;exports.tippyStyles=d;exports.useTippyInstance=I;
190
2
  //# sourceMappingURL=index.js.map
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.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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"}
1
+ {"version":3,"file":"index.js","sources":["../src/components/popover/ActionPrompt.tsx","../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","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":["ActionPrompt","text","yesLabel","noLabel","onNo","onYes","loading","Column","_jsxs","opacity","_jsx","Text","Space","Row","FlatButton","PrimaryButton","Spinner","useState","useMemo","tippyStyles","noPadding","styles","variantToTheme","standard","info","warning","error","outlined","Popover","visible","trigger","children","tippyRef","delay","variant","disablePadding","content","maxWidth","plugins","propsPlugins","lazy","arrow","tippyProps","mounted","useLazyPopover","TippyComponent","undefined","Box","ButtonWithPopover","onShow","onHide","buttonProps","Tooltip","label","popoverProps","useRef"],"mappings":"uVAaO,KAAMA,GAA4C,CAAC,CACxDC,OAAO,gBACPC,WAAW,MACXC,UAAU,KACVC,OACAC,QACAC,oBAGGC,EAAAA,OAAD,CAAQ,SAAU,WAAlB,SACE,CAAAC,EAAA,KAAA,MAAA,CAAK,MAAO,CAAEC,QAASH,EAAU,EAAI,CAAzB,EAAZ,SAAA,CACEI,EAAA,IAACC,OAAD,CAAA,SAAOV,CAAAA,CAAP,EACCS,EAAA,IAAAE,EAAA,MAFH,CAAA,CAAA,SAGGC,EAAAA,IAAD,CAAK,eAAgB,WAAY,WAAY,SAA7C,SAAA,CACEH,EAAA,IAACI,aAAD,CAAY,MAAOX,EAAS,QAASC,CAAAA,CAArC,EACCM,EAAA,IAAAE,EAAA,MAFH,CAAA,CAAA,QAGGG,EAAAA,cAAD,CAAe,MAAOb,EAAU,QAASG,CAAAA,CAH3C,CAAA,CAAA,CAHF,CAAA,CAAA,CAAA,EASCC,GACCI,EAAA,IAACG,MAAD,CACE,eAAgB,SAChB,WAAY,SACZ,KAAM,EACN,IAAK,EACL,MAAO,OACP,OAAQ,OACR,SAAU,WAPZ,eASGG,UAAD,CAAS,KAAM,OAAA,CAAf,CAAA,CApBN,CAAA,CAAA,CADF,6CClBK,KAAM,GAAiB,CAAC,EAA6B,KAAO,CACjE,KAAM,CAAC,EAAS,GAAcC,EAAA,SAAS,EAAK,EAYrC,MAAA,CACL,QAAS,CAXQC,EAAAA,QACjB,IAAO,EACL,GAAI,IAAO,EACT,OAAQ,IAAM,EAAW,EAAI,EAC7B,SAAU,IAAM,EAAW,EAAK,CAAA,EAClC,GAEF,CAAC,CAAU,CACb,EAGwB,GAAG,CAAO,EAChC,SAAA,CAEJ,ECKaC,EAAc,CACzBC,UAAWC,EAAOD,SADO,EAIrBE,EAAiD,CACrDC,SAAU,QACVC,KAAM,OACNC,QAAS,UACTC,MAAO,QACPC,SAAU,UAL2C,EAQ1CC,EAAkC,CAAC,CAC9CC,UACAC,UAAU,aACVC,WACAC,WACAC,QAAQ,EACRC,UAAU,WACVC,iBACAC,UACAC,WAAW,QACXC,QAASC,EACTC,OACAC,QAAQ,MACLC,KACC,CACE,KAAA,CAAEJ,UAASK,WAAYC,EAAeL,CAAD,EAE3C,aACGM,EAAAA,QAAD,CACE,YADF,GAEE,UAAW1B,EAAYC,UACvB,QAASS,IAAYiB,OAAYA,OAAYhB,EAC7C,UACA,MAAO,SAAWR,EAAeY,GACjC,QACA,WACA,QACA,QACG,EAACM,GAAQG,UACPI,EAAAA,IAAD,CAAK,QAAS,CAACZ,GAAkB,EAAG,OAAQ,CAACA,GAAkB,EAA/D,SACGC,CAAAA,CAZT,EAgBE,UAhBF,GAiBMM,EAjBN,eAmBE,MAAA,CAAK,IAAKV,EAAV,UAAA,CAAA,CAAA,CApBJ,CAuBD,EClEYgB,EAAsD,CAAC,CAClEjB,WACAkB,SACAC,YACGC,WAGA,EAAD,CACE,QAASpB,EACT,QAAS,QACT,OAAQ,IACR,SACA,SALF,eAOGjB,aAAeqC,CAAAA,GAAAA,CAAAA,CAAhB,CAAA,CARJ,ECRWC,EAAkC,CAAC,CAAEC,WAAUC,WAEvD,EAAD,CAAA,GAAaA,EAAc,cAAU3C,OAAD,CAAM,KAAM,QAAZ,SAAsB0C,CAAAA,CAAtB,CAAA,CADtC,ECGW,EAAmB,IAG3B,CACH,KAAM,GAAWE,EAAAA,SAEV,MAAA,CACL,AAAC,GAA2C,OACjC,EAAA,QAAU,oBAAS,SAAT,OAAmB,MACxC,EACA,CAAA,CAEJ"}
package/dist/types.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { Placement } from "tippy.js";
2
- export declare type PopoverPlacement = Placement;
1
+ import { Placement } from "tippy.js";
2
+ export declare type PopoverPlacement = Placement;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stenajs-webui/tooltip",
3
- "version": "17.4.1",
3
+ "version": "17.7.0",
4
4
  "description": "",
5
5
  "author": "mattias800",
6
6
  "license": "MIT",
@@ -18,17 +18,16 @@
18
18
  "npm": ">=5"
19
19
  },
20
20
  "scripts": {
21
- "test": "jest",
22
- "build": "rollup -c",
23
- "start": "rollup -c -w",
24
- "clean": "rm -rf dist",
21
+ "build": "yarn tsc -p tsconfig.build.json && yarn vite build",
22
+ "start": "yarn tsc -p tsconfig.build.json && yarn vite build --watch",
23
+ "clean": "rimraf dist",
25
24
  "prepare": "yarn clean && yarn run build",
26
25
  "predeploy": "cd example && yarn install && yarn run build",
27
26
  "deploy": "gh-pages -d example/build"
28
27
  },
29
28
  "dependencies": {
30
- "@stenajs-webui/core": "17.4.1",
31
- "@stenajs-webui/elements": "17.4.1",
29
+ "@stenajs-webui/core": "17.7.0",
30
+ "@stenajs-webui/elements": "17.7.0",
32
31
  "@tippyjs/react": "^4.1.0",
33
32
  "tippy.js": "^6.2.6"
34
33
  },
@@ -54,5 +53,5 @@
54
53
  "files": [
55
54
  "dist"
56
55
  ],
57
- "gitHead": "6c805f6a4d3db4ce6bed5839608b454a65140220"
56
+ "gitHead": "50351c75fc34696ce2006e9f6ce15713d249d949"
58
57
  }
package/dist/components/popover/Popover.stories.d.ts DELETED
@@ -1,16 +0,0 @@
1
- import * as React from "react";
2
- declare const _default: {
3
- title: string;
4
- component: React.FC<import("./Popover").PopoverProps>;
5
- subcomponents: {
6
- ActionPrompt: React.FC<import("./ActionPrompt").ActionPromptProps>;
7
- };
8
- };
9
- export default _default;
10
- export declare const Standard: () => JSX.Element;
11
- export declare const OnClick: () => JSX.Element;
12
- export declare const NoArrow: () => JSX.Element;
13
- export declare const NoPadding: () => JSX.Element;
14
- export declare const Variants: () => JSX.Element;
15
- export declare const ControlOpen: () => JSX.Element;
16
- export declare const Lazy: () => JSX.Element;
package/dist/components/tooltip/Tooltip.stories.d.ts DELETED
@@ -1,10 +0,0 @@
1
- import * as React from "react";
2
- declare const _default: {
3
- title: string;
4
- component: React.FC<import("./Tooltip").TooltipProps>;
5
- };
6
- export default _default;
7
- export declare const Standard: () => JSX.Element;
8
- export declare const ClickTrigger: () => JSX.Element;
9
- export declare const WithButton: () => JSX.Element;
10
- export declare const Disabled: () => JSX.Element;