@stenajs-webui/tooltip 15.5.7 → 15.5.8

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v15.5.8 (Thu May 19 2022)
+
+#### 🐛 Bug Fix
+
+- 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))
+
+#### Authors: 2
+
+- Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
+- Mattias Andersson ([@mattias800](https://github.com/mattias800))
+
+---
+
 # v15.0.3 (Fri Feb 25 2022)
 
 #### 🔩 Dependency Updates

package/README.md

@@ -4,5 +4,5 @@ This package provides components for adding tooltips and other popover functiona
 
 ## Components
 
-* [Popover](src/components/popover/Popover.md)
-* Tooltip
+- [Popover](src/components/popover/Popover.md)
+- Tooltip

package/dist/components/popover/Popover.d.ts

@@ -1,7 +1,6 @@
 import { TippyProps as TippyComponentProps } from "@tippyjs/react";
 import * as React from "react";
-import "tippy.js/dist/tippy.css";
-import "tippy.js/themes/light.css";
+import "./Tippy.module.css";
 import { TippyCallbackRef } from "../../hooks/UseTippyInstance";
 export declare type PopoverVariant = "standard" | "info" | "warning" | "error" | "outlined";
 export interface PopoverProps extends Partial<Omit<TippyComponentProps, "theme" | "render">> {

package/dist/hooks/UseTippyInstance.d.ts

@@ -1,5 +1,3 @@
-import "tippy.js/dist/tippy.css";
-import "tippy.js/themes/light.css";
 import { Instance } from "tippy.js";
 import { MutableRefObject } from "react";
 export declare type TippyInstance = Instance;

package/dist/index.es.js

@@ -3,8 +3,6 @@ import { FlatButton, PrimaryButton, Spinner } from '@stenajs-webui/elements';
 import * as React from 'react';
 import { useState, useMemo, useRef } from 'react';
 import TippyComponent from '@tippyjs/react';
-import 'tippy.js/dist/tippy.css';
-import 'tippy.js/themes/light.css';
 
 var ActionPrompt = function (_a) {
     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) {
   }
 }
 
-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";
+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";
 var styles = {"noPadding":"Popover-module_noPadding__33fA3"};
+styleInject(css_248z$1);
+
+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";
 styleInject(css_248z);
 
 var useLazyPopover = function (plugins) {

package/dist/index.es.js.map

@@ -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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"}
+{"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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"}

package/dist/index.js

@@ -6,8 +6,6 @@ var core = require('@stenajs-webui/core');
 var elements = require('@stenajs-webui/elements');
 var React = require('react');
 var TippyComponent = require('@tippyjs/react');
-require('tippy.js/dist/tippy.css');
-require('tippy.js/themes/light.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -121,8 +119,11 @@ function styleInject(css, ref) {
   }
 }
 
-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";
+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";
 var styles = {"noPadding":"Popover-module_noPadding__33fA3"};
+styleInject(css_248z$1);
+
+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";
 styleInject(css_248z);
 
 var useLazyPopover = function (plugins) {

package/dist/index.js.map

@@ -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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"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@stenajs-webui/tooltip",
-  "version": "15.5.7",
+  "version": "15.5.8",
   "description": "",
   "author": "mattias800",
   "license": "MIT",
@@ -27,8 +27,8 @@
     "deploy": "gh-pages -d example/build"
   },
   "dependencies": {
-    "@stenajs-webui/core": "15.5.7",
-    "@stenajs-webui/elements": "15.5.7",
+    "@stenajs-webui/core": "15.5.8",
+    "@stenajs-webui/elements": "15.5.8",
     "@tippyjs/react": "^4.1.0",
     "tippy.js": "^6.2.6"
   },
@@ -54,5 +54,5 @@
   "files": [
     "dist"
   ],
-  "gitHead": "f189f700cbf08f03e74f3cbda97627d728ec16c4"
+  "gitHead": "2c18a5ec3fabd3d6de34090348e992f8c7e9101a"
 }