@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.
Files changed (52) hide show
  1. package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
  2. package/dist-cjs/accordion/AccordionPanel.css.js +1 -1
  3. package/dist-cjs/accordion/AccordionPanel.js +1 -27
  4. package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
  5. package/dist-cjs/checkbox/Checkbox.css.js +1 -1
  6. package/dist-cjs/index.js +4 -5
  7. package/dist-cjs/index.js.map +1 -1
  8. package/dist-cjs/radio-button/RadioButton.css.js +1 -1
  9. package/dist-cjs/tooltip/Tooltip.js +19 -53
  10. package/dist-cjs/tooltip/Tooltip.js.map +1 -1
  11. package/dist-cjs/tooltip/TooltipBase.js +62 -0
  12. package/dist-cjs/tooltip/TooltipBase.js.map +1 -0
  13. package/dist-cjs/tooltip/useTooltip.js +8 -7
  14. package/dist-cjs/tooltip/useTooltip.js.map +1 -1
  15. package/dist-cjs/utils/useFloatingUI.js +83 -2
  16. package/dist-cjs/utils/useFloatingUI.js.map +1 -1
  17. package/dist-es/accordion/AccordionHeader.css.js +1 -1
  18. package/dist-es/accordion/AccordionPanel.css.js +1 -1
  19. package/dist-es/accordion/AccordionPanel.js +2 -28
  20. package/dist-es/accordion/AccordionPanel.js.map +1 -1
  21. package/dist-es/checkbox/Checkbox.css.js +1 -1
  22. package/dist-es/index.js +1 -3
  23. package/dist-es/index.js.map +1 -1
  24. package/dist-es/radio-button/RadioButton.css.js +1 -1
  25. package/dist-es/tooltip/Tooltip.js +19 -53
  26. package/dist-es/tooltip/Tooltip.js.map +1 -1
  27. package/dist-es/tooltip/TooltipBase.js +58 -0
  28. package/dist-es/tooltip/TooltipBase.js.map +1 -0
  29. package/dist-es/tooltip/useTooltip.js +8 -7
  30. package/dist-es/tooltip/useTooltip.js.map +1 -1
  31. package/dist-es/utils/useFloatingUI.js +81 -4
  32. package/dist-es/utils/useFloatingUI.js.map +1 -1
  33. package/dist-types/index.d.ts +0 -1
  34. package/dist-types/tooltip/TooltipBase.d.ts +13 -0
  35. package/dist-types/tooltip/useTooltip.d.ts +5 -0
  36. package/dist-types/utils/useFloatingUI.d.ts +45 -1
  37. package/package.json +2 -2
  38. package/dist-cjs/drawer/Drawer.css.js +0 -6
  39. package/dist-cjs/drawer/Drawer.css.js.map +0 -1
  40. package/dist-cjs/drawer/Drawer.js +0 -82
  41. package/dist-cjs/drawer/Drawer.js.map +0 -1
  42. package/dist-cjs/drawer/useDrawer.js +0 -36
  43. package/dist-cjs/drawer/useDrawer.js.map +0 -1
  44. package/dist-es/drawer/Drawer.css.js +0 -4
  45. package/dist-es/drawer/Drawer.css.js.map +0 -1
  46. package/dist-es/drawer/Drawer.js +0 -77
  47. package/dist-es/drawer/Drawer.js.map +0 -1
  48. package/dist-es/drawer/useDrawer.js +0 -32
  49. package/dist-es/drawer/useDrawer.js.map +0 -1
  50. package/dist-types/drawer/Drawer.d.ts +0 -22
  51. package/dist-types/drawer/index.d.ts +0 -2
  52. 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-block: var(--salt-spacing-300);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .saltAccordionPanel {\n transition: none;\n }\n\n .saltAccordionPanel .saltAccordionPanel-inner {\n overflow: visible;\n }\n\n .saltAccordionPanel[aria-hidden=\"true\"] .saltAccordionPanel-inner {\n overflow: hidden;\n }\n}\n";
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, useRef, useEffect } from 'react';
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: handleRef,
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, useEffect, useRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nimport { makePrefixer, useForkRef } 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 panelRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, panelRef);\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-panel\",\n css: accordionPanelCss,\n window: targetWindow,\n });\n\n const innerRef = useRef<HTMLDivElement>(null);\n\n const { id, expanded } = useAccordion();\n\n useEffect(() => {\n const panel = panelRef.current;\n if (!panel) return;\n\n const handleTransitionEnd = (event: TransitionEvent) => {\n if (event.target === panel && expanded && innerRef.current) {\n innerRef.current.style.overflow = \"visible\";\n }\n };\n const handleTransitionStart = (event: TransitionEvent) => {\n if (event.target === panel && !expanded && innerRef.current) {\n innerRef.current.style.overflow = \"hidden\";\n }\n };\n panel.addEventListener(\"transitionend\", handleTransitionEnd);\n panel.addEventListener(\"transitionstart\", handleTransitionStart);\n\n return () => {\n panel.removeEventListener(\"transitionend\", handleTransitionEnd);\n panel.removeEventListener(\"transitionstart\", handleTransitionStart);\n };\n }, [expanded]);\n\n return (\n <div\n ref={handleRef}\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\")} ref={innerRef}>\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,IAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;AAE1C,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,IAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,EAAA,EAAI,QAAS,EAAA,GAAI,YAAa,EAAA,CAAA;AAEtC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAM,QAAQ,QAAS,CAAA,OAAA,CAAA;AACvB,MAAA,IAAI,CAAC,KAAA;AAAO,QAAA,OAAA;AAEZ,MAAM,MAAA,mBAAA,GAAsB,CAAC,KAA2B,KAAA;AACtD,QAAA,IAAI,KAAM,CAAA,MAAA,KAAW,KAAS,IAAA,QAAA,IAAY,SAAS,OAAS,EAAA;AAC1D,UAAS,QAAA,CAAA,OAAA,CAAQ,MAAM,QAAW,GAAA,SAAA,CAAA;AAAA,SACpC;AAAA,OACF,CAAA;AACA,MAAM,MAAA,qBAAA,GAAwB,CAAC,KAA2B,KAAA;AACxD,QAAA,IAAI,MAAM,MAAW,KAAA,KAAA,IAAS,CAAC,QAAA,IAAY,SAAS,OAAS,EAAA;AAC3D,UAAS,QAAA,CAAA,OAAA,CAAQ,MAAM,QAAW,GAAA,QAAA,CAAA;AAAA,SACpC;AAAA,OACF,CAAA;AACA,MAAM,KAAA,CAAA,gBAAA,CAAiB,iBAAiB,mBAAmB,CAAA,CAAA;AAC3D,MAAM,KAAA,CAAA,gBAAA,CAAiB,mBAAmB,qBAAqB,CAAA,CAAA;AAE/D,MAAA,OAAO,MAAM;AACX,QAAM,KAAA,CAAA,mBAAA,CAAoB,iBAAiB,mBAAmB,CAAA,CAAA;AAC9D,QAAM,KAAA,CAAA,mBAAA,CAAoB,mBAAmB,qBAAqB,CAAA,CAAA;AAAA,OACpE,CAAA;AAAA,KACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAK,EAAA,SAAA;AAAA,MACL,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,QAAG,GAAK,EAAA,QAAA;AAAA,QAC1C,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
+ {"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';
@@ -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 { SaltProvider } from '../salt-provider/SaltProvider.js';
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 targetWindow = useWindow();
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
- 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
- })
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 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.\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,\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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"}
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 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
+ {"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 { flip, shift, limitShift, useFloating, autoUpdate } from '@floating-ui/react';
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: autoUpdate
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 { 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;;;;"}
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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"}
@@ -8,7 +8,6 @@ export * from "./breakpoints";
8
8
  export * from "./button";
9
9
  export * from "./card";
10
10
  export * from "./checkbox";
11
- export * from "./drawer";
12
11
  export * from "./flex-item";
13
12
  export * from "./flex-layout";
14
13
  export * from "./flow-layout";
@@ -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
  };