@stenajs-webui/tooltip 13.4.0 → 14.1.0

package/dist/index.d.ts

@@ -2,3 +2,5 @@ export * from "./components/popover/ActionPrompt";
 export * from "./components/popover/Popover";
 export * from "./components/button-with-popover/ButtonWithPopover";
 export * from "./components/tooltip/Tooltip";
+export * from "./hooks/UseTippyInstance";
+export * from "./types";

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { Column, Text, Space, Row, Box } from '@stenajs-webui/core';
 import { FlatButton, PrimaryButton, Spinner } from '@stenajs-webui/elements';
-import { createElement, useState, useMemo } from 'react';
+import { createElement, useState, useMemo, useRef } from 'react';
 import TippyComponent from '@tippyjs/react';
 import 'tippy.js/dist/tippy.css';
 import 'tippy.js/themes/light.css';
@@ -140,5 +140,16 @@ var Tooltip = function (_a) {
     return (createElement(Popover, __assign({}, popoverProps, { content: createElement(Text, { size: "small" }, label) })));
 };
 
-export { ActionPrompt, ButtonWithPopover, Popover, Tooltip, tippyStyles };
+var useTippyInstance = function () {
+    var tippyRef = useRef();
+    return [
+        function (element) {
+            var _a;
+            tippyRef.current = (_a = element === null || element === void 0 ? void 0 : element._tippy) !== null && _a !== void 0 ? _a : undefined;
+        },
+        tippyRef,
+    ];
+};
+
+export { ActionPrompt, ButtonWithPopover, Popover, Tooltip, tippyStyles, useTippyInstance };
 //# sourceMappingURL=index.es.js.map

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"],"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"],"names":["React.createElement"],"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.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.createElement"],"mappings":"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"}

package/dist/index.js

@@ -148,9 +148,21 @@ var Tooltip = function (_a) {
     return (React.createElement(Popover, __assign({}, popoverProps, { content: React.createElement(core.Text, { size: "small" }, label) })));
 };
 
+var useTippyInstance = function () {
+    var tippyRef = React.useRef();
+    return [
+        function (element) {
+            var _a;
+            tippyRef.current = (_a = element === null || element === void 0 ? void 0 : element._tippy) !== null && _a !== void 0 ? _a : undefined;
+        },
+        tippyRef,
+    ];
+};
+
 exports.ActionPrompt = ActionPrompt;
 exports.ButtonWithPopover = ButtonWithPopover;
 exports.Popover = Popover;
 exports.Tooltip = Tooltip;
 exports.tippyStyles = tippyStyles;
+exports.useTippyInstance = useTippyInstance;
 //# sourceMappingURL=index.js.map

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"],"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"],"names":["React.createElement","Column","Text","Space","Row","FlatButton","PrimaryButton","Spinner","useState","useMemo","TippyComponent","Box"],"mappings":";;;;;;;;;;;;;;;IAaa,YAAY,GAAgC,UAAC,EAOzD;QANC,YAAsB,EAAtB,IAAI,mBAAG,eAAe,KAAA,EACtB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EACd,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,OAAO,aAAA;IAEP,QACEA,oBAACC,WAAM,IAAC,QAAQ,EAAE,UAAU;QAC1BD,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE;YACtCA,oBAACE,SAAI,QAAE,IAAI,CAAQ;YACnBF,oBAACG,UAAK,OAAG;YACTH,oBAACI,QAAG,IAAC,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ;gBACnDJ,oBAACK,mBAAU,IAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,GAAI;gBAC7CL,oBAACG,UAAK,OAAG;gBACTH,oBAACM,sBAAa,IAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,GAAI,CAC9C,CACF;QACL,OAAO,KACNN,oBAACI,QAAG,IACF,cAAc,EAAE,QAAQ,EACxB,UAAU,EAAE,QAAQ,EACpB,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,UAAU;YAEpBJ,oBAACO,gBAAO,IAAC,IAAI,EAAE,OAAO,GAAI,CACtB,CACP,CACM,EACT;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/CA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;ACtBO,IAAM,cAAc,GAAG,UAAC,OAA+B;IAA/B,wBAAA,EAAA,YAA+B;IACtD,IAAA,KAAwBC,cAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAE9C,IAAM,UAAU,GAAGC,aAAO,CACxB,cAAM,QAAC;QACL,EAAE,EAAE,cAAM,QAAC;YACT,MAAM,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA;YAC9B,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,GAAA;SAClC,IAAC;KACH,IAAC,EACF,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,OAAO;QACL,OAAO,kBAAG,UAAU,GAAK,OAAO,CAAC;QACjC,OAAO,SAAA;KACR,CAAC;AACJ,CAAC;;ICMY,WAAW,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC,SAAS;EAC3B;AAEF,IAAM,cAAc,GAAmC;IACrD,QAAQ,EAAE,OAAO;IACjB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;CACrB,CAAC;IAEW,OAAO,GAA2B,UAAC,EAc/C;;IAbC,IAAA,OAAO,aAAA,EACP,eAAsB,EAAtB,OAAO,mBAAG,YAAY,KAAA,EACtB,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,eAAoB,EAApB,OAAO,mBAAG,UAAU,KAAA,EACpB,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,gBAAkB,EAAlB,QAAQ,mBAAG,OAAO,KAAA,EACT,YAAY,aAAA,EACrB,IAAI,UAAA,EACJ,aAAY,EAAZ,KAAK,mBAAG,IAAI,KAAA,EACT,UAAU,cAbiC,uIAc/C,CADc;IAEP,IAAA,KAAuB,cAAc,CAAC,YAAY,CAAC,EAAjD,OAAO,aAAA,EAAE,OAAO,aAAiC,CAAC;IAE1D,QACET,oBAACU,kCAAc,aACb,WAAW,QACX,SAAS,EAAE,WAAW,CAAC,SAAS,EAChC,OAAO,EAAE,OAAO,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,EACpD,OAAO,EAAE,OAAO,EAChB,KAAK,QAAE,QAAQ,GAAG,cAAc,CAAC,OAAO,CAAC,mCAAI,cAAc,CAAC,QAAQ,EACpE,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EACL,CAAC,CAAC,IAAI,IAAI,OAAO,MACfV,oBAACW,QAAG,IAAC,OAAO,EAAE,CAAC,cAAc,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,cAAc,IAAI,CAAC,IAC7D,OAAO,CACJ,CACP,EAEH,OAAO,EAAE,OAAO,IACZ,UAAU;QAEdX,6BAAK,GAAG,EAAE,QAAQ,IAAG,QAAQ,CAAO,CACrB,EACjB;AACJ;;ICnEa,iBAAiB,GAAqC,UAAC,EAKnE;IAJC,IAAA,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,MAAM,YAAA,EACH,WAAW,cAJoD,gCAKnE,CADe;IAEd,QACEA,oBAAC,OAAO,IACN,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM;QAEdA,oBAACK,mBAAU,eAAK,WAAW,EAAI,CACvB,EACV;AACJ;;ICnBa,OAAO,GAA2B,UAAC,EAA0B;IAAxB,IAAA,KAAK,WAAA,EAAK,YAAY,cAAxB,SAA0B,CAAF;IACtE,QACEL,oBAAC,OAAO,eAAK,YAAY,IAAE,OAAO,EAAEA,oBAACE,SAAI,IAAC,IAAI,EAAE,OAAO,IAAG,KAAK,CAAQ,IAAI,EAC3E;AACJ;;;;;;;;"}
+{"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.createElement","Column","Text","Space","Row","FlatButton","PrimaryButton","Spinner","useState","useMemo","TippyComponent","Box","useRef"],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+import { Placement } from "tippy.js";
+export declare type PopoverPlacement = Placement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stenajs-webui/tooltip",
-  "version": "13.4.0",
+  "version": "14.1.0",
   "description": "",
   "author": "mattias800",
   "license": "MIT",
@@ -28,8 +28,8 @@
     "deploy": "gh-pages -d example/build"
   },
   "dependencies": {
-    "@stenajs-webui/core": "13.4.0",
-    "@stenajs-webui/elements": "13.4.0",
+    "@stenajs-webui/core": "14.1.0",
+    "@stenajs-webui/elements": "14.1.0",
     "@tippyjs/react": "^4.1.0",
     "tippy.js": "^6.2.6"
   },
@@ -53,5 +53,5 @@
   "files": [
     "dist"
   ],
-  "gitHead": "de614f21a6789799a9cc2fcc36471420b2fd5f49"
+  "gitHead": "35702812ebbf593695ee62720ec14f815f72381e"
 }