@veeqo/ui 15.11.0 → 15.13.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.
- package/dist/components/Popover/Popover.cjs +5 -5
- package/dist/components/Popover/Popover.cjs.map +1 -1
- package/dist/components/Popover/Popover.js +5 -5
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Popover/index.d.ts +1 -0
- package/dist/components/Tooltip/Tooltip.cjs +2 -1
- package/dist/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +2 -2
- package/dist/components/Tooltip/Tooltip.js +2 -1
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var React = require('react');
|
|
4
3
|
var react = require('@floating-ui/react');
|
|
5
|
-
var
|
|
6
|
-
require('../Portal/PortalContext.cjs');
|
|
4
|
+
var React = require('react');
|
|
7
5
|
var index = require('../../theme/index.cjs');
|
|
8
6
|
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
9
7
|
var generateId = require('../../utils/generateId.cjs');
|
|
10
8
|
var assignCssVars = require('../../utils/assignCssVars.cjs');
|
|
11
|
-
var
|
|
9
|
+
var Portal = require('../Portal/Portal.cjs');
|
|
10
|
+
require('../Portal/PortalContext.cjs');
|
|
12
11
|
var useHandleFocus = require('./hooks/useHandleFocus.cjs');
|
|
12
|
+
var useUpdateAriaAnchor = require('./hooks/useUpdateAriaAnchor.cjs');
|
|
13
13
|
var Popover_module = require('./Popover.module.scss.cjs');
|
|
14
14
|
|
|
15
15
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
@@ -18,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
18
18
|
|
|
19
19
|
const Popover = ({ id: passedId, children, zIndex = index.theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, className, ...dialogProps }) => {
|
|
20
20
|
// Set up Floating UI positioning
|
|
21
|
-
const { refs, floatingStyles, placement: resolvedPlacement } = react.useFloating({
|
|
21
|
+
const { refs, floatingStyles, placement: resolvedPlacement, } = react.useFloating({
|
|
22
22
|
elements: { reference: anchorElement },
|
|
23
23
|
placement,
|
|
24
24
|
middleware: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { autoUpdate, flip, limitShift, shift, size, useFloating } from '@floating-ui/react';\nimport React, { useMemo } from 'react';\n\nimport { theme } from '../../theme';\nimport { assignCssVars, buildClassnames, generateId } from '../../utils';\nimport { Portal } from '../Portal';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport popoverStyles from './Popover.module.scss';\nimport { PopoverProps } from './types';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up Floating UI positioning\n const {\n refs,\n floatingStyles,\n placement: resolvedPlacement,\n } = useFloating({\n elements: { reference: anchorElement },\n placement,\n middleware: [\n flip({ fallbackAxisSideDirection: 'start' }),\n shift({ limiter: limitShift() }),\n size({\n apply({ availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${Math.max(0, availableHeight)}px`,\n });\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement: refs.floating.current as HTMLDialogElement | null,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n data-placement={resolvedPlacement}\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={refs.setFloating}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 }),\n ...floatingStyles,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["theme","useFloating","flip","shift","limitShift","size","autoUpdate","useMemo","generateId","useUpdateAriaAnchor","useHandleFocus","React","Portal","popoverStyles","assignCssVars","buildClassnames"],"mappings":"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"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import React__default, { useMemo } from 'react';
|
|
2
1
|
import { useFloating, autoUpdate, flip, shift, limitShift, size } from '@floating-ui/react';
|
|
3
|
-
import {
|
|
4
|
-
import '../Portal/PortalContext.js';
|
|
2
|
+
import React__default, { useMemo } from 'react';
|
|
5
3
|
import { theme } from '../../theme/index.js';
|
|
6
4
|
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
7
5
|
import { generateId } from '../../utils/generateId.js';
|
|
8
6
|
import { assignCssVars } from '../../utils/assignCssVars.js';
|
|
9
|
-
import {
|
|
7
|
+
import { Portal } from '../Portal/Portal.js';
|
|
8
|
+
import '../Portal/PortalContext.js';
|
|
10
9
|
import { useHandleFocus } from './hooks/useHandleFocus.js';
|
|
10
|
+
import { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor.js';
|
|
11
11
|
import popoverStyles from './Popover.module.scss.js';
|
|
12
12
|
|
|
13
13
|
const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, className, ...dialogProps }) => {
|
|
14
14
|
// Set up Floating UI positioning
|
|
15
|
-
const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({
|
|
15
|
+
const { refs, floatingStyles, placement: resolvedPlacement, } = useFloating({
|
|
16
16
|
elements: { reference: anchorElement },
|
|
17
17
|
placement,
|
|
18
18
|
middleware: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { autoUpdate, flip, limitShift, shift, size, useFloating } from '@floating-ui/react';\nimport React, { useMemo } from 'react';\n\nimport { theme } from '../../theme';\nimport { assignCssVars, buildClassnames, generateId } from '../../utils';\nimport { Portal } from '../Portal';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport popoverStyles from './Popover.module.scss';\nimport { PopoverProps } from './types';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up Floating UI positioning\n const {\n refs,\n floatingStyles,\n placement: resolvedPlacement,\n } = useFloating({\n elements: { reference: anchorElement },\n placement,\n middleware: [\n flip({ fallbackAxisSideDirection: 'start' }),\n shift({ limiter: limitShift() }),\n size({\n apply({ availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${Math.max(0, availableHeight)}px`,\n });\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement: refs.floating.current as HTMLDialogElement | null,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n data-placement={resolvedPlacement}\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={refs.setFloating}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 }),\n ...floatingStyles,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -17,6 +17,7 @@ const WithOptionalPortal = ({ usePortal = false, children,
|
|
|
17
17
|
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
18
18
|
}) => (usePortal ? React__default.default.createElement(Portal.Portal, null, children) : React__default.default.createElement(React__default.default.Fragment, null, children));
|
|
19
19
|
const Tooltip = ({ children, text, content, config, reversed = false, className, hoverableClassName, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
|
|
20
|
+
var _a;
|
|
20
21
|
const [shouldShow, setShouldShow] = React.useState(initialShouldShow);
|
|
21
22
|
const [hoverableElement, setHoverableElement] = React.useState(null);
|
|
22
23
|
const hasText = text ? text.trim().length > 0 : false;
|
|
@@ -31,7 +32,7 @@ const Tooltip = ({ children, text, content, config, reversed = false, className,
|
|
|
31
32
|
}
|
|
32
33
|
: undefined;
|
|
33
34
|
if (!hasContent)
|
|
34
|
-
return children;
|
|
35
|
+
return (_a = children) !== null && _a !== void 0 ? _a : null;
|
|
35
36
|
const show = () => setShouldShow(true);
|
|
36
37
|
const hide = () => setShouldShow(false);
|
|
37
38
|
return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { ReactNode, useState } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Portal } from '../Portal';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport tooltipStyles from './Tooltip.module.scss';\nimport { TooltipProps } from './types';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n usePortal = false,\n children,\n // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n children,\n text,\n content,\n config,\n reversed = false,\n className,\n hoverableClassName,\n withTriangle,\n initialShouldShow = false,\n useReactPortal = true,\n}: TooltipProps):
|
|
1
|
+
{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { ReactElement, ReactNode, useState } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Portal } from '../Portal';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport tooltipStyles from './Tooltip.module.scss';\nimport { TooltipProps } from './types';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n usePortal = false,\n children,\n // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n children,\n text,\n content,\n config,\n reversed = false,\n className,\n hoverableClassName,\n withTriangle,\n initialShouldShow = false,\n useReactPortal = true,\n}: TooltipProps): ReactElement | null => {\n const [shouldShow, setShouldShow] = useState(initialShouldShow);\n const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n const hasText = text ? text.trim().length > 0 : false;\n const hasContent = !!(content || hasText);\n\n // Backward-compatible suffix classes for monolith consumers that\n // target sub-elements via the className prefix convention.\n const legacyClassNames: LegacyClassNames | undefined = className\n ? {\n tip: `${className}-tip`,\n wrap: `${className}-wrap`,\n triangle: `${className}-triangle`,\n }\n : undefined;\n\n if (!hasContent) return (children as ReactElement) ?? null;\n\n const show = () => setShouldShow(true);\n const hide = () => setShouldShow(false);\n\n return (\n <div\n className={buildClassnames([\n tooltipStyles.container,\n className,\n className && `${className}-container`,\n ])}\n >\n <AnimatePresence>\n {shouldShow && (\n <WithOptionalPortal usePortal={useReactPortal}>\n <TooltipPopover\n key=\"tooltip-popover\"\n hoverableElement={hoverableElement}\n config={config}\n reversed={reversed}\n withTriangle={withTriangle}\n text={text}\n content={content}\n legacyClassNames={legacyClassNames}\n />\n </WithOptionalPortal>\n )}\n </AnimatePresence>\n\n <div\n ref={setHoverableElement}\n className={buildClassnames([\n tooltipStyles.hoverable,\n hoverableClassName,\n className && `${className}-hoverable`,\n ])}\n onMouseEnter={show}\n onMouseLeave={hide}\n onFocus={show}\n onBlur={hide}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"names":["React","Portal","useState","buildClassnames","tooltipStyles","AnimatePresence","TooltipPopover"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,sBAAA,CAAA,aAAA,CAACC,aAAM,QAAE,QAAQ,CAAU,GAAGD,4EAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAyB;;IACtC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGE,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,CAAA,EAAA,GAAC,QAAyB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,IAAI;IAE1D,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,QACEF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEG,+BAAe,CAAC;AACzB,YAAAC,cAAa,CAAC,SAAS;YACvB,SAAS;YACT,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;SACtC,CAAC,EAAA;QAEFJ,sBAAA,CAAA,aAAA,CAACK,4BAAe,EAAA,IAAA,EACb,UAAU,KACTL,qCAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,sBAAA,CAAA,aAAA,CAACM,6BAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAN,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAEG,+BAAe,CAAC;AACzB,gBAAAC,cAAa,CAAC,SAAS;gBACvB,kBAAkB;gBAClB,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;aACtC,CAAC,EACF,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAClB,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,IAAI,IAEX,QAAQ,CACL,CACF;AAEV;;;;"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
2
|
import { TooltipProps } from './types';
|
|
3
|
-
export declare const Tooltip: ({ children, text, content, config, reversed, className, hoverableClassName, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) =>
|
|
3
|
+
export declare const Tooltip: ({ children, text, content, config, reversed, className, hoverableClassName, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => ReactElement | null;
|
|
@@ -11,6 +11,7 @@ const WithOptionalPortal = ({ usePortal = false, children,
|
|
|
11
11
|
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
12
12
|
}) => (usePortal ? React__default.createElement(Portal, null, children) : React__default.createElement(React__default.Fragment, null, children));
|
|
13
13
|
const Tooltip = ({ children, text, content, config, reversed = false, className, hoverableClassName, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
|
|
14
|
+
var _a;
|
|
14
15
|
const [shouldShow, setShouldShow] = useState(initialShouldShow);
|
|
15
16
|
const [hoverableElement, setHoverableElement] = useState(null);
|
|
16
17
|
const hasText = text ? text.trim().length > 0 : false;
|
|
@@ -25,7 +26,7 @@ const Tooltip = ({ children, text, content, config, reversed = false, className,
|
|
|
25
26
|
}
|
|
26
27
|
: undefined;
|
|
27
28
|
if (!hasContent)
|
|
28
|
-
return children;
|
|
29
|
+
return (_a = children) !== null && _a !== void 0 ? _a : null;
|
|
29
30
|
const show = () => setShouldShow(true);
|
|
30
31
|
const hide = () => setShouldShow(false);
|
|
31
32
|
return (React__default.createElement("div", { className: buildClassnames([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { ReactNode, useState } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Portal } from '../Portal';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport tooltipStyles from './Tooltip.module.scss';\nimport { TooltipProps } from './types';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n usePortal = false,\n children,\n // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n children,\n text,\n content,\n config,\n reversed = false,\n className,\n hoverableClassName,\n withTriangle,\n initialShouldShow = false,\n useReactPortal = true,\n}: TooltipProps):
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { ReactElement, ReactNode, useState } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Portal } from '../Portal';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport tooltipStyles from './Tooltip.module.scss';\nimport { TooltipProps } from './types';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n usePortal = false,\n children,\n // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n children,\n text,\n content,\n config,\n reversed = false,\n className,\n hoverableClassName,\n withTriangle,\n initialShouldShow = false,\n useReactPortal = true,\n}: TooltipProps): ReactElement | null => {\n const [shouldShow, setShouldShow] = useState(initialShouldShow);\n const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n const hasText = text ? text.trim().length > 0 : false;\n const hasContent = !!(content || hasText);\n\n // Backward-compatible suffix classes for monolith consumers that\n // target sub-elements via the className prefix convention.\n const legacyClassNames: LegacyClassNames | undefined = className\n ? {\n tip: `${className}-tip`,\n wrap: `${className}-wrap`,\n triangle: `${className}-triangle`,\n }\n : undefined;\n\n if (!hasContent) return (children as ReactElement) ?? null;\n\n const show = () => setShouldShow(true);\n const hide = () => setShouldShow(false);\n\n return (\n <div\n className={buildClassnames([\n tooltipStyles.container,\n className,\n className && `${className}-container`,\n ])}\n >\n <AnimatePresence>\n {shouldShow && (\n <WithOptionalPortal usePortal={useReactPortal}>\n <TooltipPopover\n key=\"tooltip-popover\"\n hoverableElement={hoverableElement}\n config={config}\n reversed={reversed}\n withTriangle={withTriangle}\n text={text}\n content={content}\n legacyClassNames={legacyClassNames}\n />\n </WithOptionalPortal>\n )}\n </AnimatePresence>\n\n <div\n ref={setHoverableElement}\n className={buildClassnames([\n tooltipStyles.hoverable,\n hoverableClassName,\n className && `${className}-hoverable`,\n ])}\n onMouseEnter={show}\n onMouseLeave={hide}\n onFocus={show}\n onBlur={hide}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,cAAA,CAAA,aAAA,CAAC,MAAM,QAAE,QAAQ,CAAU,GAAGA,4DAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAyB;;IACtC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,CAAA,EAAA,GAAC,QAAyB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,IAAI;IAE1D,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,aAAa,CAAC,SAAS;YACvB,SAAS;YACT,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;SACtC,CAAC,EAAA;QAEFA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EACb,UAAU,KACTA,6BAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,aAAa,CAAC,SAAS;gBACvB,kBAAkB;gBAClB,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;aACtC,CAAC,EACF,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAClB,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,IAAI,IAEX,QAAQ,CACL,CACF;AAEV;;;;"}
|
|
@@ -43,6 +43,7 @@ export { LoginWithAmazonButton } from './LoginWithAmazonButton';
|
|
|
43
43
|
export { Modal, type Action as ModalAction, type ModalProps } from './Modal';
|
|
44
44
|
export { Pagination } from './Pagination';
|
|
45
45
|
export { Popover } from './Popover';
|
|
46
|
+
export type { PopoverProps } from './Popover';
|
|
46
47
|
export { Popup, type PopupProps } from './Popup';
|
|
47
48
|
export { Portal, DisablePortals } from './Portal';
|
|
48
49
|
export { PriceInput } from './PriceInput';
|