@salt-ds/core 0.0.0-snapshot-20230811150341 → 0.0.0-snapshot-20230830162747
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-cjs/checkbox/Checkbox.js +0 -1
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/index.js +0 -4
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.css.js +1 -1
- package/dist-cjs/input/Input.js +2 -2
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +3 -3
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js +0 -1
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.css.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js +53 -19
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +7 -8
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI.js +2 -83
- package/dist-cjs/utils/useFloatingUI.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +0 -1
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/index.js +1 -1
- package/dist-es/input/Input.css.js +1 -1
- package/dist-es/input/Input.js +2 -2
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.css.js +1 -1
- package/dist-es/multiline-input/MultilineInput.js +3 -3
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js +0 -1
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.css.js +1 -1
- package/dist-es/tooltip/Tooltip.js +53 -19
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +7 -8
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/useFloatingUI.js +4 -81
- package/dist-es/utils/useFloatingUI.js.map +1 -1
- package/dist-types/tooltip/Tooltip.d.ts +2 -2
- package/dist-types/tooltip/useTooltip.d.ts +0 -5
- package/dist-types/utils/useFloatingUI.d.ts +1 -45
- package/package.json +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +0 -62
- package/dist-cjs/tooltip/TooltipBase.js.map +0 -1
- package/dist-es/tooltip/TooltipBase.js +0 -58
- package/dist-es/tooltip/TooltipBase.js.map +0 -1
- package/dist-types/tooltip/TooltipBase.d.ts +0 -13
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { forwardRef, isValidElement, cloneElement } from 'react';
|
|
4
|
+
import { FloatingPortal, FloatingArrow } from '@floating-ui/react';
|
|
5
|
+
import { useWindow } from '@salt-ds/window';
|
|
6
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
7
|
+
import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
|
|
4
8
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
5
|
-
import
|
|
9
|
+
import '../utils/useFloatingUI.js';
|
|
6
10
|
import { useForkRef } from '../utils/useForkRef.js';
|
|
7
11
|
import '../utils/useId.js';
|
|
8
|
-
import '../salt-provider/SaltProvider.js';
|
|
12
|
+
import { SaltProvider } from '../salt-provider/SaltProvider.js';
|
|
9
13
|
import '../viewport/ViewportProvider.js';
|
|
10
14
|
import { mergeProps } from '../utils/mergeProps.js';
|
|
11
15
|
import { useTooltip } from './useTooltip.js';
|
|
16
|
+
import css_248z from './Tooltip.css.js';
|
|
12
17
|
import '../form-field-context/FormFieldContext.js';
|
|
13
18
|
import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
|
|
14
|
-
import { TooltipBase } from './TooltipBase.js';
|
|
15
19
|
|
|
16
20
|
const withBaseName = makePrefixer("saltTooltip");
|
|
17
21
|
const Tooltip = forwardRef(
|
|
@@ -19,7 +23,7 @@ const Tooltip = forwardRef(
|
|
|
19
23
|
const {
|
|
20
24
|
children,
|
|
21
25
|
className,
|
|
22
|
-
disabled: disabledProp
|
|
26
|
+
disabled: disabledProp,
|
|
23
27
|
hideArrow = false,
|
|
24
28
|
hideIcon = false,
|
|
25
29
|
open: openProp,
|
|
@@ -31,12 +35,18 @@ const Tooltip = forwardRef(
|
|
|
31
35
|
...rest
|
|
32
36
|
} = props;
|
|
33
37
|
const {
|
|
38
|
+
a11yProps,
|
|
34
39
|
disabled: formFieldDisabled,
|
|
35
40
|
validationStatus: formFieldValidationStatus
|
|
36
41
|
} = useFormFieldProps();
|
|
37
42
|
const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
|
|
38
43
|
const status = formFieldValidationStatus != null ? formFieldValidationStatus : statusProp;
|
|
39
|
-
const
|
|
44
|
+
const targetWindow = useWindow();
|
|
45
|
+
useComponentCssInjection({
|
|
46
|
+
testId: "salt-tooltip",
|
|
47
|
+
css: css_248z,
|
|
48
|
+
window: targetWindow
|
|
49
|
+
});
|
|
40
50
|
const hookProps = {
|
|
41
51
|
open: openProp,
|
|
42
52
|
placement,
|
|
@@ -50,8 +60,7 @@ const Tooltip = forwardRef(
|
|
|
50
60
|
floating,
|
|
51
61
|
reference,
|
|
52
62
|
getTriggerProps,
|
|
53
|
-
getTooltipProps
|
|
54
|
-
getTooltipPosition
|
|
63
|
+
getTooltipProps
|
|
55
64
|
} = useTooltip(hookProps);
|
|
56
65
|
const triggerRef = useForkRef(
|
|
57
66
|
isValidElement(children) ? children.ref : null,
|
|
@@ -64,18 +73,43 @@ const Tooltip = forwardRef(
|
|
|
64
73
|
...mergeProps(getTriggerProps(), children.props),
|
|
65
74
|
ref: triggerRef
|
|
66
75
|
}),
|
|
67
|
-
/* @__PURE__ */ jsx(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
76
|
+
open && !disabled && /* @__PURE__ */ jsx(FloatingPortal, {
|
|
77
|
+
children: /* @__PURE__ */ jsx(SaltProvider, {
|
|
78
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
79
|
+
className: clsx(
|
|
80
|
+
withBaseName(),
|
|
81
|
+
withBaseName(status),
|
|
82
|
+
className
|
|
83
|
+
),
|
|
84
|
+
ref: floatingRef,
|
|
85
|
+
...getTooltipProps(),
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ jsxs("div", {
|
|
88
|
+
className: withBaseName("container"),
|
|
89
|
+
children: [
|
|
90
|
+
!hideIcon && /* @__PURE__ */ jsx(StatusIndicator, {
|
|
91
|
+
status,
|
|
92
|
+
size: 1,
|
|
93
|
+
className: withBaseName("icon")
|
|
94
|
+
}),
|
|
95
|
+
/* @__PURE__ */ jsx("span", {
|
|
96
|
+
id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
|
|
97
|
+
className: withBaseName("content"),
|
|
98
|
+
children: content
|
|
99
|
+
})
|
|
100
|
+
]
|
|
101
|
+
}),
|
|
102
|
+
!hideArrow && /* @__PURE__ */ jsx(FloatingArrow, {
|
|
103
|
+
...arrowProps,
|
|
104
|
+
className: withBaseName("arrow"),
|
|
105
|
+
strokeWidth: 1,
|
|
106
|
+
fill: "var(--salt-container-primary-background)",
|
|
107
|
+
stroke: "var(--tooltip-status-borderColor)",
|
|
108
|
+
height: 5,
|
|
109
|
+
width: 10
|
|
110
|
+
})
|
|
111
|
+
]
|
|
112
|
+
})
|
|
79
113
|
})
|
|
80
114
|
})
|
|
81
115
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n} from \"react\";\n\nimport { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n} from \"../utils\";\nimport { SaltProvider } from \"../salt-provider\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport tooltipCss from \"./Tooltip.css\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n a11yProps,\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n const status = formFieldValidationStatus ?? statusProp;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-ignore\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n {open && !disabled && (\n <FloatingPortal>\n {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n <SaltProvider>\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n className\n )}\n ref={floatingRef}\n {...getTooltipProps()}\n >\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span\n id={a11yProps?.[\"aria-describedby\"]}\n className={withBaseName(\"content\")}\n >\n {content}\n </span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </div>\n </SaltProvider>\n </FloatingPortal>\n )}\n </>\n );\n }\n);\n"],"names":["Tooltip","tooltipCss"],"mappings":"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"}
|
|
@@ -80,25 +80,24 @@ function useTooltip(props) {
|
|
|
80
80
|
const getTooltipProps = () => {
|
|
81
81
|
return getFloatingProps({
|
|
82
82
|
"data-placement": placement,
|
|
83
|
-
ref: floating
|
|
83
|
+
ref: floating,
|
|
84
|
+
style: {
|
|
85
|
+
top: y != null ? y : 0,
|
|
86
|
+
left: x != null ? x : 0,
|
|
87
|
+
position: strategy
|
|
88
|
+
}
|
|
84
89
|
});
|
|
85
90
|
};
|
|
86
91
|
const getTriggerProps = () => getReferenceProps({
|
|
87
92
|
ref: reference
|
|
88
93
|
});
|
|
89
|
-
const getTooltipPosition = () => ({
|
|
90
|
-
top: y != null ? y : 0,
|
|
91
|
-
left: x != null ? x : 0,
|
|
92
|
-
position: strategy
|
|
93
|
-
});
|
|
94
94
|
return {
|
|
95
95
|
arrowProps,
|
|
96
96
|
open,
|
|
97
97
|
floating,
|
|
98
98
|
reference,
|
|
99
99
|
getTooltipProps,
|
|
100
|
-
getTriggerProps
|
|
101
|
-
getTooltipPosition
|
|
100
|
+
getTriggerProps
|
|
102
101
|
};
|
|
103
102
|
}
|
|
104
103
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n style: {\n position: strategy,\n left: arrowX ?? 0,\n top: arrowY ?? 0,\n },\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n
|
|
1
|
+
{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n style: {\n position: strategy,\n left: arrowX ?? 0,\n top: arrowY ?? 0,\n },\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n style: {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n },\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n };\n}\n"],"names":["open"],"mappings":"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"}
|
|
@@ -1,73 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { FloatingPortal, flip, shift, limitShift, platform, useFloating, autoUpdate } from '@floating-ui/react';
|
|
3
|
-
import { forwardRef, createContext, useMemo, useContext } from 'react';
|
|
4
|
-
import { SaltProvider } from '../salt-provider/SaltProvider.js';
|
|
1
|
+
import { flip, shift, limitShift, useFloating, autoUpdate } from '@floating-ui/react';
|
|
5
2
|
|
|
6
|
-
const DefaultFloatingComponent = forwardRef((props, ref) => {
|
|
7
|
-
const { open, disabled = false, top, left, position, ...rest } = props;
|
|
8
|
-
const style = {
|
|
9
|
-
top,
|
|
10
|
-
left,
|
|
11
|
-
position
|
|
12
|
-
};
|
|
13
|
-
return open && !disabled ? /* @__PURE__ */ jsx(FloatingPortal, {
|
|
14
|
-
children: /* @__PURE__ */ jsx(SaltProvider, {
|
|
15
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
16
|
-
style,
|
|
17
|
-
...rest,
|
|
18
|
-
ref
|
|
19
|
-
})
|
|
20
|
-
})
|
|
21
|
-
}) : null;
|
|
22
|
-
});
|
|
23
|
-
const FloatingComponentContext = createContext({
|
|
24
|
-
Component: DefaultFloatingComponent
|
|
25
|
-
});
|
|
26
|
-
if (process.env.NODE_ENV !== "production") {
|
|
27
|
-
FloatingComponentContext.displayName = "FloatingComponentContext";
|
|
28
|
-
}
|
|
29
|
-
function FloatingComponentProvider(props) {
|
|
30
|
-
const { Component, children } = props;
|
|
31
|
-
const value = useMemo(() => ({ Component }), [Component]);
|
|
32
|
-
return /* @__PURE__ */ jsx(FloatingComponentContext.Provider, {
|
|
33
|
-
value,
|
|
34
|
-
children
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
function useFloatingComponent() {
|
|
38
|
-
return useContext(FloatingComponentContext);
|
|
39
|
-
}
|
|
40
|
-
const defaultFloatingPlaform = {
|
|
41
|
-
platform,
|
|
42
|
-
middleware: [],
|
|
43
|
-
animationFrame: false
|
|
44
|
-
};
|
|
45
|
-
const FloatingPlatformContext = createContext(
|
|
46
|
-
defaultFloatingPlaform
|
|
47
|
-
);
|
|
48
|
-
function FloatingPlatformProvider(props) {
|
|
49
|
-
const {
|
|
50
|
-
platform: platformProp,
|
|
51
|
-
middleware,
|
|
52
|
-
animationFrame,
|
|
53
|
-
children
|
|
54
|
-
} = props;
|
|
55
|
-
const floatingPlatformContextValue = useMemo(
|
|
56
|
-
() => ({
|
|
57
|
-
platform: platformProp != null ? platformProp : platform,
|
|
58
|
-
middleware: middleware != null ? middleware : [],
|
|
59
|
-
animationFrame: animationFrame != null ? animationFrame : false
|
|
60
|
-
}),
|
|
61
|
-
[platformProp, middleware, animationFrame]
|
|
62
|
-
);
|
|
63
|
-
return /* @__PURE__ */ jsx(FloatingPlatformContext.Provider, {
|
|
64
|
-
value: floatingPlatformContextValue,
|
|
65
|
-
children
|
|
66
|
-
});
|
|
67
|
-
}
|
|
68
|
-
function useFloatingPlatform() {
|
|
69
|
-
return useContext(FloatingPlatformContext);
|
|
70
|
-
}
|
|
71
3
|
const DEFAULT_FLOATING_UI_MIDDLEWARE = [
|
|
72
4
|
flip(),
|
|
73
5
|
shift({ limiter: limitShift() })
|
|
@@ -80,22 +12,13 @@ function useFloatingUI(props) {
|
|
|
80
12
|
open = false,
|
|
81
13
|
onOpenChange
|
|
82
14
|
} = props;
|
|
83
|
-
const {
|
|
84
|
-
platform: contextPlaform,
|
|
85
|
-
middleware: contextMiddleware,
|
|
86
|
-
animationFrame
|
|
87
|
-
} = useFloatingPlatform();
|
|
88
15
|
const { reference, floating, refs, update, ...rest } = useFloating({
|
|
89
16
|
placement,
|
|
90
17
|
strategy,
|
|
91
|
-
middleware
|
|
18
|
+
middleware,
|
|
92
19
|
open,
|
|
93
20
|
onOpenChange,
|
|
94
|
-
whileElementsMounted:
|
|
95
|
-
const cleanup = autoUpdate(...args, { animationFrame });
|
|
96
|
-
return cleanup;
|
|
97
|
-
},
|
|
98
|
-
platform: contextPlaform
|
|
21
|
+
whileElementsMounted: autoUpdate
|
|
99
22
|
});
|
|
100
23
|
return {
|
|
101
24
|
reference,
|
|
@@ -106,5 +29,5 @@ function useFloatingUI(props) {
|
|
|
106
29
|
};
|
|
107
30
|
}
|
|
108
31
|
|
|
109
|
-
export { DEFAULT_FLOATING_UI_MIDDLEWARE,
|
|
32
|
+
export { DEFAULT_FLOATING_UI_MIDDLEWARE, useFloatingUI };
|
|
110
33
|
//# sourceMappingURL=useFloatingUI.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type { Middleware, Placement, Strategy } from \"@floating-ui/react\";\nimport {\n autoUpdate,\n flip,\n limitShift,\n shift,\n useFloating,\n} from \"@floating-ui/react\";\n\nexport type UseFloatingUIProps = {\n /**\n * Sets position relative to trigger.\n */\n placement?: Placement;\n strategy?: Strategy;\n middleware?: Middleware[];\n /**\n * Sets visible state.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n};\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n const {\n placement,\n strategy,\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n } = props;\n\n const { reference, floating, refs, update, ...rest } = useFloating({\n placement,\n strategy,\n middleware,\n open,\n onOpenChange,\n whileElementsMounted: autoUpdate,\n });\n\n return {\n reference,\n floating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":[],"mappings":";;AA0BO,MAAM,8BAAiC,GAAA;AAAA,EAC5C,IAAK,EAAA;AAAA,EACL,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc,CAAA;AACjC,EAAA;AAEO,SAAS,cACd,KACgC,EAAA;AAChC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAa,GAAA,8BAAA;AAAA,IACb,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,MAAM,MAAW,EAAA,GAAA,IAAA,KAAS,WAAY,CAAA;AAAA,IACjE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAsB,EAAA,UAAA;AAAA,GACvB,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACF;;;;"}
|
|
@@ -27,11 +27,11 @@ export interface TooltipProps extends Pick<UseFloatingUIProps, "open" | "onOpenC
|
|
|
27
27
|
*/
|
|
28
28
|
enterDelay?: number;
|
|
29
29
|
/**
|
|
30
|
-
* Delay in milliseconds before the Tooltip is hidden.
|
|
30
|
+
* Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.
|
|
31
31
|
*/
|
|
32
32
|
leaveDelay?: number;
|
|
33
33
|
/**
|
|
34
|
-
* Option to not display the Tooltip. Can be used in conditional situations like text truncation.
|
|
34
|
+
* Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.
|
|
35
35
|
*/
|
|
36
36
|
disabled?: boolean;
|
|
37
37
|
/**
|
|
@@ -53,9 +53,4 @@ export declare function useTooltip(props?: UseTooltipProps): {
|
|
|
53
53
|
reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
|
|
54
54
|
getTooltipProps: () => HTMLProps<HTMLDivElement>;
|
|
55
55
|
getTriggerProps: () => Record<string, unknown>;
|
|
56
|
-
getTooltipPosition: () => {
|
|
57
|
-
top: number;
|
|
58
|
-
left: number;
|
|
59
|
-
position: import("@floating-ui/react").Strategy;
|
|
60
|
-
};
|
|
61
56
|
};
|
|
@@ -1,35 +1,5 @@
|
|
|
1
|
-
import type { Middleware, Placement,
|
|
1
|
+
import type { Middleware, Placement, Strategy } from "@floating-ui/react";
|
|
2
2
|
import { useFloating } from "@floating-ui/react";
|
|
3
|
-
import { ReactNode, ForwardRefExoticComponent, RefAttributes } from "react";
|
|
4
|
-
export declare type FloatingComponentProps = {
|
|
5
|
-
/**
|
|
6
|
-
* Whether the floating component is disabled (used for determinig whether to show the component)
|
|
7
|
-
*/
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
/**
|
|
10
|
-
* Whether the floating component is open (used for determinig whether to show the component)
|
|
11
|
-
* We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.
|
|
12
|
-
* for caching windows and reusing them, rather than always spawning a new one
|
|
13
|
-
*/
|
|
14
|
-
open: boolean;
|
|
15
|
-
/**
|
|
16
|
-
* Position props for the floating component
|
|
17
|
-
*/
|
|
18
|
-
top: number;
|
|
19
|
-
left: number;
|
|
20
|
-
position: Strategy;
|
|
21
|
-
};
|
|
22
|
-
declare const DefaultFloatingComponent: ForwardRefExoticComponent<FloatingComponentProps & {
|
|
23
|
-
children?: ReactNode;
|
|
24
|
-
} & RefAttributes<HTMLElement>>;
|
|
25
|
-
export interface FloatingComponentContextType {
|
|
26
|
-
Component: typeof DefaultFloatingComponent;
|
|
27
|
-
}
|
|
28
|
-
export interface FloatingComponentProviderProps extends FloatingComponentContextType {
|
|
29
|
-
children: ReactNode;
|
|
30
|
-
}
|
|
31
|
-
export declare function FloatingComponentProvider(props: FloatingComponentProviderProps): JSX.Element;
|
|
32
|
-
export declare function useFloatingComponent(): FloatingComponentContextType;
|
|
33
3
|
export declare type UseFloatingUIProps = {
|
|
34
4
|
/**
|
|
35
5
|
* Sets position relative to trigger.
|
|
@@ -46,19 +16,6 @@ export declare type UseFloatingUIProps = {
|
|
|
46
16
|
*/
|
|
47
17
|
onOpenChange?: (open: boolean) => void;
|
|
48
18
|
};
|
|
49
|
-
declare type FloatingPlatformContextType = {
|
|
50
|
-
platform: Platform;
|
|
51
|
-
middleware: Middleware[];
|
|
52
|
-
animationFrame: boolean;
|
|
53
|
-
};
|
|
54
|
-
export interface FloatingPlatformProviderProps {
|
|
55
|
-
platform?: Platform;
|
|
56
|
-
middleware?: Middleware[];
|
|
57
|
-
children: ReactNode;
|
|
58
|
-
animationFrame?: boolean;
|
|
59
|
-
}
|
|
60
|
-
export declare function FloatingPlatformProvider(props: FloatingPlatformProviderProps): JSX.Element;
|
|
61
|
-
export declare function useFloatingPlatform(): FloatingPlatformContextType;
|
|
62
19
|
export declare const DEFAULT_FLOATING_UI_MIDDLEWARE: {
|
|
63
20
|
name: string;
|
|
64
21
|
options?: any;
|
|
@@ -75,4 +32,3 @@ export declare const DEFAULT_FLOATING_UI_MIDDLEWARE: {
|
|
|
75
32
|
}) => import("@floating-ui/react").MiddlewareReturn | Promise<import("@floating-ui/react").MiddlewareReturn>;
|
|
76
33
|
}[];
|
|
77
34
|
export declare function useFloatingUI(props: UseFloatingUIProps): ReturnType<typeof useFloating>;
|
|
78
|
-
export {};
|
package/package.json
CHANGED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var StatusIndicator = require('../status-indicator/StatusIndicator.js');
|
|
7
|
-
var react = require('@floating-ui/react');
|
|
8
|
-
require('react');
|
|
9
|
-
var makePrefixer = require('../utils/makePrefixer.js');
|
|
10
|
-
require('../utils/useFloatingUI.js');
|
|
11
|
-
require('../utils/useId.js');
|
|
12
|
-
require('../salt-provider/SaltProvider.js');
|
|
13
|
-
require('../viewport/ViewportProvider.js');
|
|
14
|
-
require('clsx');
|
|
15
|
-
require('../form-field-context/FormFieldContext.js');
|
|
16
|
-
var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
|
|
17
|
-
var Tooltip = require('./Tooltip.css.js');
|
|
18
|
-
var window = require('@salt-ds/window');
|
|
19
|
-
var styles = require('@salt-ds/styles');
|
|
20
|
-
|
|
21
|
-
const withBaseName = makePrefixer.makePrefixer("saltTooltip");
|
|
22
|
-
const TooltipBase = (props) => {
|
|
23
|
-
const targetWindow = window.useWindow();
|
|
24
|
-
styles.useComponentCssInjection({
|
|
25
|
-
testId: "salt-tooltip",
|
|
26
|
-
css: Tooltip,
|
|
27
|
-
window: targetWindow
|
|
28
|
-
});
|
|
29
|
-
const { a11yProps } = useFormFieldProps.useFormFieldProps();
|
|
30
|
-
const { arrowProps, content, hideArrow, hideIcon, status } = props;
|
|
31
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
32
|
-
children: [
|
|
33
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
34
|
-
className: withBaseName("container"),
|
|
35
|
-
children: [
|
|
36
|
-
!hideIcon && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
|
|
37
|
-
status,
|
|
38
|
-
size: 1,
|
|
39
|
-
className: withBaseName("icon")
|
|
40
|
-
}),
|
|
41
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
42
|
-
id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
|
|
43
|
-
className: withBaseName("content"),
|
|
44
|
-
children: content
|
|
45
|
-
})
|
|
46
|
-
]
|
|
47
|
-
}),
|
|
48
|
-
!hideArrow && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingArrow, {
|
|
49
|
-
...arrowProps,
|
|
50
|
-
className: withBaseName("arrow"),
|
|
51
|
-
strokeWidth: 1,
|
|
52
|
-
fill: "var(--salt-container-primary-background)",
|
|
53
|
-
stroke: "var(--tooltip-status-borderColor)",
|
|
54
|
-
height: 5,
|
|
55
|
-
width: 10
|
|
56
|
-
})
|
|
57
|
-
]
|
|
58
|
-
});
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
exports.TooltipBase = TooltipBase;
|
|
62
|
-
//# sourceMappingURL=TooltipBase.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { FloatingArrow, FloatingArrowProps } from \"@floating-ui/react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { makePrefixer } from \"../utils\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nimport tooltipCss from \"./Tooltip.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n arrowProps: FloatingArrowProps;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const { a11yProps } = useFormFieldProps();\n\n const { arrowProps, content, hideArrow, hideIcon, status } = props;\n return (\n <>\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span\n id={a11yProps?.[\"aria-describedby\"]}\n className={withBaseName(\"content\")}\n >\n {content}\n </span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","tooltipCss","useFormFieldProps","jsxs","Fragment","jsx","StatusIndicator","FloatingArrow"],"mappings":";;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AAUlC,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,SAAU,EAAA,GAAIC,mCAAkB,EAAA,CAAA;AAExC,EAAA,MAAM,EAAE,UAAY,EAAA,OAAA,EAAS,SAAW,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,CAAA;AAC7D,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACD,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACrC,QAAA,EAAA;AAAA,UAAA,CAAC,4BACCE,cAAA,CAAAC,+BAAA,EAAA;AAAA,YACC,MAAA;AAAA,YACA,IAAM,EAAA,CAAA;AAAA,YACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,WAChC,CAAA;AAAA,0BAEDD,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,YAChB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,YAEhC,QAAA,EAAA,OAAA;AAAA,WACH,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,MACC,CAAC,6BACCA,cAAA,CAAAE,mBAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,0CAAA;AAAA,QACL,MAAO,EAAA,mCAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA,EAAA;AAAA,OACT,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
|
|
3
|
-
import { FloatingArrow } from '@floating-ui/react';
|
|
4
|
-
import 'react';
|
|
5
|
-
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
6
|
-
import '../utils/useFloatingUI.js';
|
|
7
|
-
import '../utils/useId.js';
|
|
8
|
-
import '../salt-provider/SaltProvider.js';
|
|
9
|
-
import '../viewport/ViewportProvider.js';
|
|
10
|
-
import 'clsx';
|
|
11
|
-
import '../form-field-context/FormFieldContext.js';
|
|
12
|
-
import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
|
|
13
|
-
import css_248z from './Tooltip.css.js';
|
|
14
|
-
import { useWindow } from '@salt-ds/window';
|
|
15
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
16
|
-
|
|
17
|
-
const withBaseName = makePrefixer("saltTooltip");
|
|
18
|
-
const TooltipBase = (props) => {
|
|
19
|
-
const targetWindow = useWindow();
|
|
20
|
-
useComponentCssInjection({
|
|
21
|
-
testId: "salt-tooltip",
|
|
22
|
-
css: css_248z,
|
|
23
|
-
window: targetWindow
|
|
24
|
-
});
|
|
25
|
-
const { a11yProps } = useFormFieldProps();
|
|
26
|
-
const { arrowProps, content, hideArrow, hideIcon, status } = props;
|
|
27
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
|
28
|
-
children: [
|
|
29
|
-
/* @__PURE__ */ jsxs("div", {
|
|
30
|
-
className: withBaseName("container"),
|
|
31
|
-
children: [
|
|
32
|
-
!hideIcon && /* @__PURE__ */ jsx(StatusIndicator, {
|
|
33
|
-
status,
|
|
34
|
-
size: 1,
|
|
35
|
-
className: withBaseName("icon")
|
|
36
|
-
}),
|
|
37
|
-
/* @__PURE__ */ jsx("span", {
|
|
38
|
-
id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
|
|
39
|
-
className: withBaseName("content"),
|
|
40
|
-
children: content
|
|
41
|
-
})
|
|
42
|
-
]
|
|
43
|
-
}),
|
|
44
|
-
!hideArrow && /* @__PURE__ */ jsx(FloatingArrow, {
|
|
45
|
-
...arrowProps,
|
|
46
|
-
className: withBaseName("arrow"),
|
|
47
|
-
strokeWidth: 1,
|
|
48
|
-
fill: "var(--salt-container-primary-background)",
|
|
49
|
-
stroke: "var(--tooltip-status-borderColor)",
|
|
50
|
-
height: 5,
|
|
51
|
-
width: 10
|
|
52
|
-
})
|
|
53
|
-
]
|
|
54
|
-
});
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
export { TooltipBase };
|
|
58
|
-
//# sourceMappingURL=TooltipBase.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { FloatingArrow, FloatingArrowProps } from \"@floating-ui/react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { makePrefixer } from \"../utils\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nimport tooltipCss from \"./Tooltip.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n arrowProps: FloatingArrowProps;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const { a11yProps } = useFormFieldProps();\n\n const { arrowProps, content, hideArrow, hideIcon, status } = props;\n return (\n <>\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span\n id={a11yProps?.[\"aria-describedby\"]}\n className={withBaseName(\"content\")}\n >\n {content}\n </span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </>\n );\n};\n"],"names":["tooltipCss"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAUlC,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAExC,EAAA,MAAM,EAAE,UAAY,EAAA,OAAA,EAAS,SAAW,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,CAAA;AAC7D,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACrC,QAAA,EAAA;AAAA,UAAA,CAAC,4BACC,GAAA,CAAA,eAAA,EAAA;AAAA,YACC,MAAA;AAAA,YACA,IAAM,EAAA,CAAA;AAAA,YACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,WAChC,CAAA;AAAA,0BAED,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,YAChB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,YAEhC,QAAA,EAAA,OAAA;AAAA,WACH,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,MACC,CAAC,6BACC,GAAA,CAAA,aAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,0CAAA;AAAA,QACL,MAAO,EAAA,mCAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA,EAAA;AAAA,OACT,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ValidationStatus } from "../status-indicator";
|
|
3
|
-
import { FloatingArrowProps } from "@floating-ui/react";
|
|
4
|
-
import { TooltipProps } from "./Tooltip";
|
|
5
|
-
interface TooltipBaseProps extends Omit<TooltipProps, "children"> {
|
|
6
|
-
arrowProps: FloatingArrowProps;
|
|
7
|
-
/**
|
|
8
|
-
* A string to determine the status of the Tooltip. Defaults to `info`.
|
|
9
|
-
*/
|
|
10
|
-
status: ValidationStatus;
|
|
11
|
-
}
|
|
12
|
-
export declare const TooltipBase: (props: TooltipBaseProps) => JSX.Element;
|
|
13
|
-
export {};
|