@salt-ds/core 0.0.0-snapshot-20230802154358 → 0.0.0-snapshot-20230811150341
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/accordion/AccordionHeader.css.js +1 -1
- package/dist-cjs/accordion/AccordionPanel.css.js +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +1 -27
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.css.js +1 -1
- package/dist-cjs/index.js +4 -5
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.css.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js +19 -53
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +62 -0
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -0
- package/dist-cjs/tooltip/useTooltip.js +8 -7
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI.js +83 -2
- package/dist-cjs/utils/useFloatingUI.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.css.js +1 -1
- package/dist-es/accordion/AccordionPanel.css.js +1 -1
- package/dist-es/accordion/AccordionPanel.js +2 -28
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/checkbox/Checkbox.css.js +1 -1
- package/dist-es/index.js +1 -3
- package/dist-es/index.js.map +1 -1
- package/dist-es/radio-button/RadioButton.css.js +1 -1
- package/dist-es/tooltip/Tooltip.js +19 -53
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +58 -0
- package/dist-es/tooltip/TooltipBase.js.map +1 -0
- package/dist-es/tooltip/useTooltip.js +8 -7
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/useFloatingUI.js +81 -4
- package/dist-es/utils/useFloatingUI.js.map +1 -1
- package/dist-types/index.d.ts +0 -1
- package/dist-types/tooltip/TooltipBase.d.ts +13 -0
- package/dist-types/tooltip/useTooltip.d.ts +5 -0
- package/dist-types/utils/useFloatingUI.d.ts +45 -1
- package/package.json +2 -2
- package/dist-cjs/drawer/Drawer.css.js +0 -6
- package/dist-cjs/drawer/Drawer.css.js.map +0 -1
- package/dist-cjs/drawer/Drawer.js +0 -82
- package/dist-cjs/drawer/Drawer.js.map +0 -1
- package/dist-cjs/drawer/useDrawer.js +0 -36
- package/dist-cjs/drawer/useDrawer.js.map +0 -1
- package/dist-es/drawer/Drawer.css.js +0 -4
- package/dist-es/drawer/Drawer.css.js.map +0 -1
- package/dist-es/drawer/Drawer.js +0 -77
- package/dist-es/drawer/Drawer.js.map +0 -1
- package/dist-es/drawer/useDrawer.js +0 -32
- package/dist-es/drawer/useDrawer.js.map +0 -1
- package/dist-types/drawer/Drawer.d.ts +0 -22
- package/dist-types/drawer/index.d.ts +0 -2
- package/dist-types/drawer/useDrawer.d.ts +0 -27
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltAccordionPanel {\n display: grid;\n transition: grid-template-rows var(--salt-duration-perceptible) ease-in-out, opacity var(--salt-duration-perceptible) ease-in-out, visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionPanel[aria-hidden=\"true\"] {\n grid-template-rows: 0fr;\n opacity: 0;\n visibility: hidden;\n}\n\n.saltAccordionPanel {\n grid-template-rows: 1fr;\n opacity: 1;\n visibility: visible;\n}\n\n.saltAccordionPanel-inner {\n overflow: hidden;\n}\n\n.saltAccordionPanel-content {\n padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));\n padding-
|
|
1
|
+
var css_248z = ".saltAccordionPanel {\n display: grid;\n transition: grid-template-rows var(--salt-duration-perceptible) ease-in-out, opacity var(--salt-duration-perceptible) ease-in-out, visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionPanel[aria-hidden=\"true\"] {\n grid-template-rows: 0fr;\n opacity: 0;\n visibility: hidden;\n}\n\n.saltAccordionPanel {\n grid-template-rows: 1fr;\n opacity: 1;\n visibility: visible;\n}\n\n.saltAccordionPanel-inner {\n overflow: hidden;\n}\n\n.saltAccordionPanel-content {\n padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));\n padding-right: var(--salt-spacing-100);\n padding-top: var(--salt-spacing-300);\n padding-bottom: var(--salt-spacing-300);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .saltAccordionPanel {\n transition: none;\n }\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=AccordionPanel.css.js.map
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
3
|
import { useWindow } from '@salt-ds/window';
|
|
4
4
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
5
5
|
import { clsx } from 'clsx';
|
|
6
6
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
7
7
|
import '../utils/useFloatingUI.js';
|
|
8
|
-
import { useForkRef } from '../utils/useForkRef.js';
|
|
9
8
|
import '../utils/useId.js';
|
|
10
9
|
import '../salt-provider/SaltProvider.js';
|
|
11
10
|
import '../viewport/ViewportProvider.js';
|
|
@@ -16,39 +15,15 @@ const withBaseName = makePrefixer("saltAccordionPanel");
|
|
|
16
15
|
const AccordionPanel = forwardRef(
|
|
17
16
|
function AccordionPanel2(props, ref) {
|
|
18
17
|
const { children, className, ...rest } = props;
|
|
19
|
-
const panelRef = useRef(null);
|
|
20
|
-
const handleRef = useForkRef(ref, panelRef);
|
|
21
18
|
const targetWindow = useWindow();
|
|
22
19
|
useComponentCssInjection({
|
|
23
20
|
testId: "salt-accordion-panel",
|
|
24
21
|
css: css_248z,
|
|
25
22
|
window: targetWindow
|
|
26
23
|
});
|
|
27
|
-
const innerRef = useRef(null);
|
|
28
24
|
const { id, expanded } = useAccordion();
|
|
29
|
-
useEffect(() => {
|
|
30
|
-
const panel = panelRef.current;
|
|
31
|
-
if (!panel)
|
|
32
|
-
return;
|
|
33
|
-
const handleTransitionEnd = (event) => {
|
|
34
|
-
if (event.target === panel && expanded && innerRef.current) {
|
|
35
|
-
innerRef.current.style.overflow = "visible";
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
const handleTransitionStart = (event) => {
|
|
39
|
-
if (event.target === panel && !expanded && innerRef.current) {
|
|
40
|
-
innerRef.current.style.overflow = "hidden";
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
panel.addEventListener("transitionend", handleTransitionEnd);
|
|
44
|
-
panel.addEventListener("transitionstart", handleTransitionStart);
|
|
45
|
-
return () => {
|
|
46
|
-
panel.removeEventListener("transitionend", handleTransitionEnd);
|
|
47
|
-
panel.removeEventListener("transitionstart", handleTransitionStart);
|
|
48
|
-
};
|
|
49
|
-
}, [expanded]);
|
|
50
25
|
return /* @__PURE__ */ jsx("div", {
|
|
51
|
-
ref
|
|
26
|
+
ref,
|
|
52
27
|
className: clsx(withBaseName(), className),
|
|
53
28
|
role: "region",
|
|
54
29
|
id: `${id}-panel`,
|
|
@@ -58,7 +33,6 @@ const AccordionPanel = forwardRef(
|
|
|
58
33
|
...rest,
|
|
59
34
|
children: /* @__PURE__ */ jsx("div", {
|
|
60
35
|
className: withBaseName("inner"),
|
|
61
|
-
ref: innerRef,
|
|
62
36
|
children: /* @__PURE__ */ jsx("div", {
|
|
63
37
|
className: withBaseName("content"),
|
|
64
38
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef
|
|
1
|
+
{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nimport { makePrefixer } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport type AccordionPanelProps = ComponentPropsWithoutRef<\"div\">;\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n function AccordionPanel(props, ref) {\n const { children, className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-panel\",\n css: accordionPanelCss,\n window: targetWindow,\n });\n\n const { id, expanded } = useAccordion();\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n role=\"region\"\n id={`${id}-panel`}\n aria-labelledby={`${id}-header`}\n aria-hidden={!expanded ? \"true\" : undefined}\n hidden={!expanded}\n {...rest}\n >\n <div className={withBaseName(\"inner\")}>\n <div className={withBaseName(\"content\")}>{children}</div>\n </div>\n </div>\n );\n }\n);\n"],"names":["AccordionPanel","accordionPanelCss"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,EAAA,EAAI,QAAS,EAAA,GAAI,YAAa,EAAA,CAAA;AAEtC,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,QAAA;AAAA,MACL,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,MACP,mBAAiB,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,MACpB,aAAA,EAAa,CAAC,QAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,QAAQ,CAAC,QAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAClC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,UAAI,QAAA;AAAA,SAAS,CAAA;AAAA,OACrD,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n color: var(--salt-text-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-foreground);\n color: var(--salt-status-error-foreground);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-foreground);\n color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n cursor: inherit;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n z-index: var(--salt-zIndex-default);\n}\n";
|
|
1
|
+
var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n color: var(--salt-text-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltCheckboxIcon > svg {\n /* ensures svg is centered in all browsers */\n transform: translate(0px, 0px);\n}\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-foreground);\n color: var(--salt-status-error-foreground);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-foreground);\n color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n cursor: inherit;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n z-index: var(--salt-zIndex-default);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Checkbox.css.js.map
|
package/dist-es/index.js
CHANGED
|
@@ -21,8 +21,6 @@ export { InteractableCard } from './card/InteractableCard.js';
|
|
|
21
21
|
export { Checkbox } from './checkbox/Checkbox.js';
|
|
22
22
|
export { CheckboxGroup } from './checkbox/CheckboxGroup.js';
|
|
23
23
|
export { CheckboxIcon } from './checkbox/CheckboxIcon.js';
|
|
24
|
-
export { DRAWER_POSITIONS, Drawer } from './drawer/Drawer.js';
|
|
25
|
-
export { useDrawer } from './drawer/useDrawer.js';
|
|
26
24
|
export { FLEX_ITEM_ALIGNMENTS, FlexItem } from './flex-item/FlexItem.js';
|
|
27
25
|
export { FLEX_ALIGNMENT_BASE, FLEX_CONTENT_ALIGNMENT_BASE, FlexLayout } from './flex-layout/FlexLayout.js';
|
|
28
26
|
export { FlowLayout } from './flow-layout/FlowLayout.js';
|
|
@@ -71,7 +69,7 @@ export { ownerDocument } from './utils/ownerDocument.js';
|
|
|
71
69
|
export { ownerWindow } from './utils/ownerWindow.js';
|
|
72
70
|
export { setRef } from './utils/setRef.js';
|
|
73
71
|
export { useControlled } from './utils/useControlled.js';
|
|
74
|
-
export { DEFAULT_FLOATING_UI_MIDDLEWARE, useFloatingUI } from './utils/useFloatingUI.js';
|
|
72
|
+
export { DEFAULT_FLOATING_UI_MIDDLEWARE, FloatingComponentProvider, FloatingPlatformProvider, useFloatingComponent, useFloatingPlatform, useFloatingUI } from './utils/useFloatingUI.js';
|
|
75
73
|
export { useForkRef } from './utils/useForkRef.js';
|
|
76
74
|
export { useId, useIdMemo } from './utils/useId.js';
|
|
77
75
|
export { teardown, useIsFocusVisible } from './utils/useIsFocusVisible.js';
|
package/dist-es/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n display: flex;\n gap: var(--salt-spacing-100);\n cursor: var(--salt-selectable-cursor-hover);\n position: relative;\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltRadioButton-readOnly {\n color: var(--salt-text-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n cursor: inherit;\n position: absolute;\n height: var(--salt-size-selectable);\n opacity: 0;\n top: 0;\n left: 0;\n margin: 0;\n padding: 0;\n width: var(--salt-size-selectable);\n z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline: var(--saltRadioButton-outline, var(--salt-focused-outline));\n outline-offset: var(--salt-focused-outlineOffset);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline-color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-foreground);\n color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline-color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-foreground);\n color: var(--salt-status-warning-foreground);\n}\n";
|
|
1
|
+
var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n display: flex;\n gap: var(--salt-spacing-100);\n cursor: var(--salt-selectable-cursor-hover);\n position: relative;\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltRadioButton-readOnly {\n color: var(--salt-text-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n cursor: inherit;\n position: absolute;\n height: var(--salt-size-selectable);\n opacity: 0;\n top: 0;\n left: 0;\n margin: 0;\n padding: 0;\n width: var(--salt-size-selectable);\n z-index: var(--salt-zIndex-default);\n}\n\n.saltRadioButtonIcon > svg {\n /* ensures svg is centered in all browsers */\n transform: translate(0px, 0px);\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline: var(--saltRadioButton-outline, var(--salt-focused-outline));\n outline-offset: var(--salt-focused-outlineOffset);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline-color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-foreground);\n color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline-color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-foreground);\n color: var(--salt-status-warning-foreground);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=RadioButton.css.js.map
|
|
@@ -1,21 +1,17 @@
|
|
|
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';
|
|
8
4
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
9
|
-
import '../utils/useFloatingUI.js';
|
|
5
|
+
import { useFloatingComponent } from '../utils/useFloatingUI.js';
|
|
10
6
|
import { useForkRef } from '../utils/useForkRef.js';
|
|
11
7
|
import '../utils/useId.js';
|
|
12
|
-
import
|
|
8
|
+
import '../salt-provider/SaltProvider.js';
|
|
13
9
|
import '../viewport/ViewportProvider.js';
|
|
14
10
|
import { mergeProps } from '../utils/mergeProps.js';
|
|
15
11
|
import { useTooltip } from './useTooltip.js';
|
|
16
|
-
import css_248z from './Tooltip.css.js';
|
|
17
12
|
import '../form-field-context/FormFieldContext.js';
|
|
18
13
|
import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
|
|
14
|
+
import { TooltipBase } from './TooltipBase.js';
|
|
19
15
|
|
|
20
16
|
const withBaseName = makePrefixer("saltTooltip");
|
|
21
17
|
const Tooltip = forwardRef(
|
|
@@ -23,7 +19,7 @@ const Tooltip = forwardRef(
|
|
|
23
19
|
const {
|
|
24
20
|
children,
|
|
25
21
|
className,
|
|
26
|
-
disabled: disabledProp,
|
|
22
|
+
disabled: disabledProp = false,
|
|
27
23
|
hideArrow = false,
|
|
28
24
|
hideIcon = false,
|
|
29
25
|
open: openProp,
|
|
@@ -35,18 +31,12 @@ const Tooltip = forwardRef(
|
|
|
35
31
|
...rest
|
|
36
32
|
} = props;
|
|
37
33
|
const {
|
|
38
|
-
a11yProps,
|
|
39
34
|
disabled: formFieldDisabled,
|
|
40
35
|
validationStatus: formFieldValidationStatus
|
|
41
36
|
} = useFormFieldProps();
|
|
42
37
|
const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
|
|
43
38
|
const status = formFieldValidationStatus != null ? formFieldValidationStatus : statusProp;
|
|
44
|
-
const
|
|
45
|
-
useComponentCssInjection({
|
|
46
|
-
testId: "salt-tooltip",
|
|
47
|
-
css: css_248z,
|
|
48
|
-
window: targetWindow
|
|
49
|
-
});
|
|
39
|
+
const { Component: FloatingComponent } = useFloatingComponent();
|
|
50
40
|
const hookProps = {
|
|
51
41
|
open: openProp,
|
|
52
42
|
placement,
|
|
@@ -60,7 +50,8 @@ const Tooltip = forwardRef(
|
|
|
60
50
|
floating,
|
|
61
51
|
reference,
|
|
62
52
|
getTriggerProps,
|
|
63
|
-
getTooltipProps
|
|
53
|
+
getTooltipProps,
|
|
54
|
+
getTooltipPosition
|
|
64
55
|
} = useTooltip(hookProps);
|
|
65
56
|
const triggerRef = useForkRef(
|
|
66
57
|
isValidElement(children) ? children.ref : null,
|
|
@@ -73,43 +64,18 @@ const Tooltip = forwardRef(
|
|
|
73
64
|
...mergeProps(getTriggerProps(), children.props),
|
|
74
65
|
ref: triggerRef
|
|
75
66
|
}),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
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
|
-
})
|
|
67
|
+
/* @__PURE__ */ jsx(FloatingComponent, {
|
|
68
|
+
className: clsx(withBaseName(), withBaseName(status), className),
|
|
69
|
+
open: open && !disabled,
|
|
70
|
+
...getTooltipPosition(),
|
|
71
|
+
...getTooltipProps(),
|
|
72
|
+
ref: floatingRef,
|
|
73
|
+
children: /* @__PURE__ */ jsx(TooltipBase, {
|
|
74
|
+
hideIcon,
|
|
75
|
+
status,
|
|
76
|
+
content,
|
|
77
|
+
hideArrow,
|
|
78
|
+
arrowProps
|
|
113
79
|
})
|
|
114
80
|
})
|
|
115
81
|
]
|
|
@@ -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
|
|
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 useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\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.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation.\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 = false,\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 disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n const status = formFieldValidationStatus ?? statusProp;\n\n const { Component: FloatingComponent } = useFloatingComponent();\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 getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-ignore\n isValidElement(children) ? children.ref : null,\n reference\n );\n const floatingRef = useForkRef<HTMLElement>(floating, ref);\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n <FloatingComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n open={open && !disabled}\n {...getTooltipPosition()}\n {...getTooltipProps()}\n ref={floatingRef}\n >\n <TooltipBase\n hideIcon={hideIcon}\n status={status}\n content={content}\n hideArrow={hideArrow}\n arrowProps={arrowProps}\n />\n </FloatingComponent>\n </>\n );\n }\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,QAAQ,UAAa,GAAA,MAAA;AAAA,MACrB,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChB,iBAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,IAAA,MAAM,SAAS,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,UAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA;AAAA,MAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AACA,IAAM,MAAA,WAAA,GAAc,UAAwB,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAEzD,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,UAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,wBAEF,GAAA,CAAA,iBAAA,EAAA;AAAA,UACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,IAAA,EAAM,QAAQ,CAAC,QAAA;AAAA,UACd,GAAG,kBAAmB,EAAA;AAAA,UACtB,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UAEL,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,MAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA;AAAA,YACA,UAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,58 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -80,24 +80,25 @@ function useTooltip(props) {
|
|
|
80
80
|
const getTooltipProps = () => {
|
|
81
81
|
return getFloatingProps({
|
|
82
82
|
"data-placement": placement,
|
|
83
|
-
ref: floating
|
|
84
|
-
style: {
|
|
85
|
-
top: y != null ? y : 0,
|
|
86
|
-
left: x != null ? x : 0,
|
|
87
|
-
position: strategy
|
|
88
|
-
}
|
|
83
|
+
ref: floating
|
|
89
84
|
});
|
|
90
85
|
};
|
|
91
86
|
const getTriggerProps = () => getReferenceProps({
|
|
92
87
|
ref: reference
|
|
93
88
|
});
|
|
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
|
|
100
|
+
getTriggerProps,
|
|
101
|
+
getTooltipPosition
|
|
101
102
|
};
|
|
102
103
|
}
|
|
103
104
|
|
|
@@ -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
|
|
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 const getTooltipPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n getTooltipPosition,\n };\n}\n"],"names":["open"],"mappings":"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"}
|
|
@@ -1,5 +1,73 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
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';
|
|
2
5
|
|
|
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
|
+
}
|
|
3
71
|
const DEFAULT_FLOATING_UI_MIDDLEWARE = [
|
|
4
72
|
flip(),
|
|
5
73
|
shift({ limiter: limitShift() })
|
|
@@ -12,13 +80,22 @@ function useFloatingUI(props) {
|
|
|
12
80
|
open = false,
|
|
13
81
|
onOpenChange
|
|
14
82
|
} = props;
|
|
83
|
+
const {
|
|
84
|
+
platform: contextPlaform,
|
|
85
|
+
middleware: contextMiddleware,
|
|
86
|
+
animationFrame
|
|
87
|
+
} = useFloatingPlatform();
|
|
15
88
|
const { reference, floating, refs, update, ...rest } = useFloating({
|
|
16
89
|
placement,
|
|
17
90
|
strategy,
|
|
18
|
-
middleware,
|
|
91
|
+
middleware: [...middleware, ...contextMiddleware],
|
|
19
92
|
open,
|
|
20
93
|
onOpenChange,
|
|
21
|
-
whileElementsMounted:
|
|
94
|
+
whileElementsMounted: (...args) => {
|
|
95
|
+
const cleanup = autoUpdate(...args, { animationFrame });
|
|
96
|
+
return cleanup;
|
|
97
|
+
},
|
|
98
|
+
platform: contextPlaform
|
|
22
99
|
});
|
|
23
100
|
return {
|
|
24
101
|
reference,
|
|
@@ -29,5 +106,5 @@ function useFloatingUI(props) {
|
|
|
29
106
|
};
|
|
30
107
|
}
|
|
31
108
|
|
|
32
|
-
export { DEFAULT_FLOATING_UI_MIDDLEWARE, useFloatingUI };
|
|
109
|
+
export { DEFAULT_FLOATING_UI_MIDDLEWARE, FloatingComponentProvider, FloatingPlatformProvider, useFloatingComponent, useFloatingPlatform, useFloatingUI };
|
|
33
110
|
//# 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 {\n Middleware,\n Placement,\n Platform,\n Strategy,\n} from \"@floating-ui/react\";\nimport {\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n} from \"@floating-ui/react\";\nimport {\n createContext,\n ReactNode,\n useContext,\n useMemo,\n forwardRef,\n PropsWithChildren,\n ForwardRefExoticComponent,\n Ref,\n RefAttributes,\n} from \"react\";\n\nimport { FloatingPortal } from \"@floating-ui/react\";\nimport { SaltProvider } from \"../salt-provider\";\n\ntype CombinedFloatingComponentProps = PropsWithChildren<FloatingComponentProps>;\nexport type FloatingComponentProps = {\n /**\n * Whether the floating component is disabled (used for determinig whether to show the component)\n */\n disabled?: boolean;\n /**\n * Whether the floating component is open (used for determinig whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Position props for the floating component\n */\n top: number;\n left: number;\n position: Strategy;\n};\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLElement,\n CombinedFloatingComponentProps\n>((props, ref) => {\n const { open, disabled = false, top, left, position, ...rest } = props;\n const style = {\n top,\n left,\n position,\n };\n return open && !disabled ? (\n <FloatingPortal>\n <SaltProvider>\n <div style={style} {...rest} ref={ref as Ref<HTMLDivElement>} />\n </SaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\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\ntype FloatingPlatformContextType = {\n platform: Platform;\n middleware: Middleware[];\n animationFrame: boolean;\n};\n\nconst defaultFloatingPlaform = {\n platform,\n middleware: [],\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: Middleware[];\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? [],\n animationFrame: animationFrame ?? false,\n }),\n [platformProp, middleware, animationFrame]\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\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 {\n platform: contextPlaform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { reference, floating, refs, update, ...rest } = useFloating({\n placement,\n strategy,\n middleware: [...middleware, ...contextMiddleware],\n open,\n onOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlaform,\n });\n\n return {\n reference,\n floating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":[],"mappings":"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"}
|
package/dist-types/index.d.ts
CHANGED
|
@@ -0,0 +1,13 @@
|
|
|
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 {};
|
|
@@ -53,4 +53,9 @@ 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
|
+
};
|
|
56
61
|
};
|