@salt-ds/core 1.1.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (155) hide show
  1. package/dist-cjs/packages/core/src/aria-announcer/AriaAnnouncerProvider.js +9 -9
  2. package/dist-cjs/packages/core/src/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
  3. package/dist-cjs/packages/core/src/aria-announcer/useAriaAnnouncer.js +6 -5
  4. package/dist-cjs/packages/core/src/aria-announcer/useAriaAnnouncer.js.map +1 -1
  5. package/dist-cjs/packages/core/src/avatar/Avatar.css.js +9 -0
  6. package/dist-cjs/packages/core/src/avatar/Avatar.css.js.map +1 -0
  7. package/dist-cjs/packages/core/src/avatar/Avatar.js +60 -0
  8. package/dist-cjs/packages/core/src/avatar/Avatar.js.map +1 -0
  9. package/dist-cjs/packages/core/src/avatar/internal/useLoaded.js +30 -0
  10. package/dist-cjs/packages/core/src/avatar/internal/useLoaded.js.map +1 -0
  11. package/dist-cjs/packages/core/src/border-item/BorderItem.js +9 -3
  12. package/dist-cjs/packages/core/src/border-item/BorderItem.js.map +1 -1
  13. package/dist-cjs/packages/core/src/border-layout/BorderLayout.js +1 -0
  14. package/dist-cjs/packages/core/src/border-layout/BorderLayout.js.map +1 -1
  15. package/dist-cjs/packages/core/src/button/Button.js +10 -4
  16. package/dist-cjs/packages/core/src/button/Button.js.map +1 -1
  17. package/dist-cjs/packages/core/src/card/Card.css.js +1 -1
  18. package/dist-cjs/packages/core/src/card/Card.js +1 -0
  19. package/dist-cjs/packages/core/src/card/Card.js.map +1 -1
  20. package/dist-cjs/packages/core/src/flex-item/FlexItem.js +2 -1
  21. package/dist-cjs/packages/core/src/flex-item/FlexItem.js.map +1 -1
  22. package/dist-cjs/packages/core/src/flex-layout/FlexLayout.js +12 -7
  23. package/dist-cjs/packages/core/src/flex-layout/FlexLayout.js.map +1 -1
  24. package/dist-cjs/packages/core/src/grid-item/GridItem.js +1 -0
  25. package/dist-cjs/packages/core/src/grid-item/GridItem.js.map +1 -1
  26. package/dist-cjs/packages/core/src/grid-layout/GridLayout.js +1 -0
  27. package/dist-cjs/packages/core/src/grid-layout/GridLayout.js.map +1 -1
  28. package/dist-cjs/packages/core/src/index.js +14 -0
  29. package/dist-cjs/packages/core/src/index.js.map +1 -1
  30. package/dist-cjs/packages/core/src/link/Link.js +1 -0
  31. package/dist-cjs/packages/core/src/link/Link.js.map +1 -1
  32. package/dist-cjs/packages/core/src/panel/Panel.js +1 -0
  33. package/dist-cjs/packages/core/src/panel/Panel.js.map +1 -1
  34. package/dist-cjs/packages/core/src/salt-provider/SaltProvider.js +1 -0
  35. package/dist-cjs/packages/core/src/salt-provider/SaltProvider.js.map +1 -1
  36. package/dist-cjs/packages/core/src/spinner/Spinner.css.js +9 -0
  37. package/dist-cjs/packages/core/src/spinner/Spinner.css.js.map +1 -0
  38. package/dist-cjs/packages/core/src/spinner/Spinner.js +81 -0
  39. package/dist-cjs/packages/core/src/spinner/Spinner.js.map +1 -0
  40. package/dist-cjs/packages/core/src/spinner/svgSpinners/SpinnerSVG.js +81 -0
  41. package/dist-cjs/packages/core/src/spinner/svgSpinners/SpinnerSVG.js.map +1 -0
  42. package/dist-cjs/packages/core/src/split-layout/SplitLayout.js +25 -0
  43. package/dist-cjs/packages/core/src/split-layout/SplitLayout.js.map +1 -0
  44. package/dist-cjs/packages/core/src/stack-layout/StackLayout.js +3 -2
  45. package/dist-cjs/packages/core/src/stack-layout/StackLayout.js.map +1 -1
  46. package/dist-cjs/packages/core/src/status-indicator/StatusIndicator.js +1 -0
  47. package/dist-cjs/packages/core/src/status-indicator/StatusIndicator.js.map +1 -1
  48. package/dist-cjs/packages/core/src/text/Display.js +1 -0
  49. package/dist-cjs/packages/core/src/text/Display.js.map +1 -1
  50. package/dist-cjs/packages/core/src/text/Text.css.js +1 -1
  51. package/dist-cjs/packages/core/src/text/Text.js +14 -7
  52. package/dist-cjs/packages/core/src/text/Text.js.map +1 -1
  53. package/dist-cjs/packages/core/src/theme/Theme.js.map +1 -1
  54. package/dist-cjs/packages/core/src/tooltip/Tooltip.css.js +9 -0
  55. package/dist-cjs/packages/core/src/tooltip/Tooltip.css.js.map +1 -0
  56. package/dist-cjs/packages/core/src/tooltip/Tooltip.js +91 -0
  57. package/dist-cjs/packages/core/src/tooltip/Tooltip.js.map +1 -0
  58. package/dist-cjs/packages/core/src/tooltip/useAriaAnnounce.js +94 -0
  59. package/dist-cjs/packages/core/src/tooltip/useAriaAnnounce.js.map +1 -0
  60. package/dist-cjs/packages/core/src/tooltip/useTooltip.js +106 -0
  61. package/dist-cjs/packages/core/src/tooltip/useTooltip.js.map +1 -0
  62. package/dist-cjs/packages/core/src/utils/marginMiddleware.js.map +1 -1
  63. package/dist-cjs/packages/core/src/utils/useFloatingUI.js +38 -0
  64. package/dist-cjs/packages/core/src/utils/useFloatingUI.js.map +1 -0
  65. package/dist-cjs/packages/core/src/viewport/ViewportProvider.js +1 -0
  66. package/dist-cjs/packages/core/src/viewport/ViewportProvider.js.map +1 -1
  67. package/dist-es/packages/core/src/aria-announcer/AriaAnnouncerProvider.js +9 -9
  68. package/dist-es/packages/core/src/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
  69. package/dist-es/packages/core/src/aria-announcer/useAriaAnnouncer.js +6 -5
  70. package/dist-es/packages/core/src/aria-announcer/useAriaAnnouncer.js.map +1 -1
  71. package/dist-es/packages/core/src/avatar/Avatar.css.js +7 -0
  72. package/dist-es/packages/core/src/avatar/Avatar.css.js.map +1 -0
  73. package/dist-es/packages/core/src/avatar/Avatar.js +56 -0
  74. package/dist-es/packages/core/src/avatar/Avatar.js.map +1 -0
  75. package/dist-es/packages/core/src/avatar/internal/useLoaded.js +26 -0
  76. package/dist-es/packages/core/src/avatar/internal/useLoaded.js.map +1 -0
  77. package/dist-es/packages/core/src/border-item/BorderItem.js +9 -3
  78. package/dist-es/packages/core/src/border-item/BorderItem.js.map +1 -1
  79. package/dist-es/packages/core/src/border-layout/BorderLayout.js +1 -0
  80. package/dist-es/packages/core/src/border-layout/BorderLayout.js.map +1 -1
  81. package/dist-es/packages/core/src/button/Button.js +10 -4
  82. package/dist-es/packages/core/src/button/Button.js.map +1 -1
  83. package/dist-es/packages/core/src/card/Card.css.js +1 -1
  84. package/dist-es/packages/core/src/card/Card.js +1 -0
  85. package/dist-es/packages/core/src/card/Card.js.map +1 -1
  86. package/dist-es/packages/core/src/flex-item/FlexItem.js +2 -1
  87. package/dist-es/packages/core/src/flex-item/FlexItem.js.map +1 -1
  88. package/dist-es/packages/core/src/flex-layout/FlexLayout.js +12 -7
  89. package/dist-es/packages/core/src/flex-layout/FlexLayout.js.map +1 -1
  90. package/dist-es/packages/core/src/grid-item/GridItem.js +1 -0
  91. package/dist-es/packages/core/src/grid-item/GridItem.js.map +1 -1
  92. package/dist-es/packages/core/src/grid-layout/GridLayout.js +1 -0
  93. package/dist-es/packages/core/src/grid-layout/GridLayout.js.map +1 -1
  94. package/dist-es/packages/core/src/index.js +6 -0
  95. package/dist-es/packages/core/src/index.js.map +1 -1
  96. package/dist-es/packages/core/src/link/Link.js +1 -0
  97. package/dist-es/packages/core/src/link/Link.js.map +1 -1
  98. package/dist-es/packages/core/src/panel/Panel.js +1 -0
  99. package/dist-es/packages/core/src/panel/Panel.js.map +1 -1
  100. package/dist-es/packages/core/src/salt-provider/SaltProvider.js +1 -0
  101. package/dist-es/packages/core/src/salt-provider/SaltProvider.js.map +1 -1
  102. package/dist-es/packages/core/src/spinner/Spinner.css.js +7 -0
  103. package/dist-es/packages/core/src/spinner/Spinner.css.js.map +1 -0
  104. package/dist-es/packages/core/src/spinner/Spinner.js +76 -0
  105. package/dist-es/packages/core/src/spinner/Spinner.js.map +1 -0
  106. package/dist-es/packages/core/src/spinner/svgSpinners/SpinnerSVG.js +77 -0
  107. package/dist-es/packages/core/src/spinner/svgSpinners/SpinnerSVG.js.map +1 -0
  108. package/dist-es/packages/core/src/split-layout/SplitLayout.js +21 -0
  109. package/dist-es/packages/core/src/split-layout/SplitLayout.js.map +1 -0
  110. package/dist-es/packages/core/src/stack-layout/StackLayout.js +3 -2
  111. package/dist-es/packages/core/src/stack-layout/StackLayout.js.map +1 -1
  112. package/dist-es/packages/core/src/status-indicator/StatusIndicator.js +1 -0
  113. package/dist-es/packages/core/src/status-indicator/StatusIndicator.js.map +1 -1
  114. package/dist-es/packages/core/src/text/Display.js +1 -0
  115. package/dist-es/packages/core/src/text/Display.js.map +1 -1
  116. package/dist-es/packages/core/src/text/Text.css.js +1 -1
  117. package/dist-es/packages/core/src/text/Text.js +14 -7
  118. package/dist-es/packages/core/src/text/Text.js.map +1 -1
  119. package/dist-es/packages/core/src/theme/Theme.js.map +1 -1
  120. package/dist-es/packages/core/src/tooltip/Tooltip.css.js +7 -0
  121. package/dist-es/packages/core/src/tooltip/Tooltip.css.js.map +1 -0
  122. package/dist-es/packages/core/src/tooltip/Tooltip.js +87 -0
  123. package/dist-es/packages/core/src/tooltip/Tooltip.js.map +1 -0
  124. package/dist-es/packages/core/src/tooltip/useAriaAnnounce.js +90 -0
  125. package/dist-es/packages/core/src/tooltip/useAriaAnnounce.js.map +1 -0
  126. package/dist-es/packages/core/src/tooltip/useTooltip.js +102 -0
  127. package/dist-es/packages/core/src/tooltip/useTooltip.js.map +1 -0
  128. package/dist-es/packages/core/src/utils/marginMiddleware.js.map +1 -1
  129. package/dist-es/packages/core/src/utils/useFloatingUI.js +33 -0
  130. package/dist-es/packages/core/src/utils/useFloatingUI.js.map +1 -0
  131. package/dist-es/packages/core/src/viewport/ViewportProvider.js +1 -0
  132. package/dist-es/packages/core/src/viewport/ViewportProvider.js.map +1 -1
  133. package/dist-types/avatar/Avatar.d.ts +27 -0
  134. package/dist-types/avatar/index.d.ts +1 -0
  135. package/dist-types/avatar/internal/useLoaded.d.ts +2 -0
  136. package/dist-types/border-item/BorderItem.d.ts +1 -1
  137. package/dist-types/index.d.ts +4 -0
  138. package/dist-types/link/Link.d.ts +2 -2
  139. package/dist-types/spinner/Spinner.d.ts +45 -0
  140. package/dist-types/spinner/index.d.ts +1 -0
  141. package/dist-types/spinner/svgSpinners/SpinnerSVG.d.ts +5 -0
  142. package/dist-types/split-layout/SplitLayout.d.ts +28 -0
  143. package/dist-types/split-layout/index.d.ts +1 -0
  144. package/dist-types/text/Display.d.ts +3 -3
  145. package/dist-types/text/Headings.d.ts +4 -4
  146. package/dist-types/text/Label.d.ts +1 -1
  147. package/dist-types/text/Text.d.ts +4 -0
  148. package/dist-types/theme/Theme.d.ts +1 -1
  149. package/dist-types/tooltip/Tooltip.d.ts +47 -0
  150. package/dist-types/tooltip/index.d.ts +2 -0
  151. package/dist-types/tooltip/useAriaAnnounce.d.ts +9 -0
  152. package/dist-types/tooltip/useTooltip.d.ts +36 -0
  153. package/dist-types/utils/index.d.ts +1 -0
  154. package/dist-types/utils/useFloatingUI.d.ts +34 -0
  155. package/package.json +2 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Theme.js","sources":["../src/theme/Theme.ts"],"sourcesContent":["export type characteristic =\n | \"accent\"\n | \"actionable\"\n | \"container\"\n | \"differential\"\n | \"draggable\"\n | \"editable\"\n | \"focused\"\n | \"measured\"\n | \"navigable\"\n | \"overlayable\"\n | \"selectable\"\n | \"separable\"\n | \"status\"\n | \"taggable\"\n | \"target\"\n | \"text\";\n\nexport type ThemeName = string;\n\nexport const getCharacteristicValue = (\n themeName: ThemeName,\n characteristicName: characteristic,\n variant: string,\n scopeElement?: HTMLElement\n): string | null => {\n const cssVariableName = `--salt-${characteristicName}-${variant}`;\n const scopeTarget =\n scopeElement || document.body.querySelector(`.${themeName}`);\n if (scopeTarget) {\n const style = getComputedStyle(scopeTarget);\n const variableValue = style.getPropertyValue(cssVariableName);\n if (variableValue) {\n return variableValue;\n }\n }\n return null;\n};\n"],"names":[],"mappings":";;;;AAoBO,MAAM,sBAAyB,GAAA,CACpC,SACA,EAAA,kBAAA,EACA,SACA,YACkB,KAAA;AAClB,EAAM,MAAA,eAAA,GAAkB,UAAU,kBAAsB,CAAA,CAAA,EAAA,OAAA,CAAA,CAAA,CAAA;AACxD,EAAA,MAAM,cACJ,YAAgB,IAAA,QAAA,CAAS,IAAK,CAAA,aAAA,CAAc,IAAI,SAAW,CAAA,CAAA,CAAA,CAAA;AAC7D,EAAA,IAAI,WAAa,EAAA;AACf,IAAM,MAAA,KAAA,GAAQ,iBAAiB,WAAW,CAAA,CAAA;AAC1C,IAAM,MAAA,aAAA,GAAgB,KAAM,CAAA,gBAAA,CAAiB,eAAe,CAAA,CAAA;AAC5D,IAAA,IAAI,aAAe,EAAA;AACjB,MAAO,OAAA,aAAA,CAAA;AAAA,KACT;AAAA,GACF;AACA,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}
1
+ {"version":3,"file":"Theme.js","sources":["../src/theme/Theme.ts"],"sourcesContent":["export type characteristic =\n | \"accent\"\n | \"actionable\"\n | \"container\"\n | \"draggable\"\n | \"editable\"\n | \"focused\"\n | \"measured\"\n | \"navigable\"\n | \"overlayable\"\n | \"selectable\"\n | \"separable\"\n | \"status\"\n | \"taggable\"\n | \"target\"\n | \"text\"\n | \"differential\" /* **deprecated** */;\n\nexport type ThemeName = string;\n\nexport const getCharacteristicValue = (\n themeName: ThemeName,\n characteristicName: characteristic,\n variant: string,\n scopeElement?: HTMLElement\n): string | null => {\n const cssVariableName = `--salt-${characteristicName}-${variant}`;\n const scopeTarget =\n scopeElement || document.body.querySelector(`.${themeName}`);\n if (scopeTarget) {\n const style = getComputedStyle(scopeTarget);\n const variableValue = style.getPropertyValue(cssVariableName);\n if (variableValue) {\n return variableValue;\n }\n }\n return null;\n};\n"],"names":[],"mappings":";;;;AAoBO,MAAM,sBAAyB,GAAA,CACpC,SACA,EAAA,kBAAA,EACA,SACA,YACkB,KAAA;AAClB,EAAM,MAAA,eAAA,GAAkB,UAAU,kBAAsB,CAAA,CAAA,EAAA,OAAA,CAAA,CAAA,CAAA;AACxD,EAAA,MAAM,cACJ,YAAgB,IAAA,QAAA,CAAS,IAAK,CAAA,aAAA,CAAc,IAAI,SAAW,CAAA,CAAA,CAAA,CAAA;AAC7D,EAAA,IAAI,WAAa,EAAA;AACf,IAAM,MAAA,KAAA,GAAQ,iBAAiB,WAAW,CAAA,CAAA;AAC1C,IAAM,MAAA,aAAA,GAAgB,KAAM,CAAA,gBAAA,CAAiB,eAAe,CAAA,CAAA;AAC5D,IAAA,IAAI,aAAe,EAAA;AACjB,MAAO,OAAA,aAAA,CAAA;AAAA,KACT;AAAA,GACF;AACA,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
4
+
5
+ var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n}\n\n.saltTooltip {\n background: var(--tooltip-background);\n border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n color: var(--saltTooltip-text-color, var(--salt-text-primary-foreground));\n max-width: var(--saltTooltip-maxWidth, 230px);\n padding: var(--saltTooltip-padding, var(--salt-size-unit));\n position: relative;\n text-align: var(--saltTooltip-textAlign, left);\n z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n display: flex;\n align-items: baseline;\n position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n --saltIcon-margin: 0 var(--saltTooltip-icon-marginRight, 6px) 0 0;\n vertical-align: top;\n align-self: center;\n}\n\n/* Styles applied to arrow */\n.saltTooltip-arrow,\n.saltTooltip-arrow::after {\n border: var(--salt-size-sharktooth-height) solid transparent;\n position: absolute;\n}\n\n.saltTooltip-arrow::after {\n content: \"\";\n}\n\n.saltTooltip[data-placement^=\"top\"] .saltTooltip-arrow {\n border-top-color: var(--tooltip-status-borderColor);\n bottom: -11px;\n}\n\n.saltTooltip[data-placement^=\"bottom\"] .saltTooltip-arrow {\n border-bottom-color: var(--tooltip-status-borderColor);\n top: -11px;\n}\n\n.saltTooltip[data-placement^=\"left\"] .saltTooltip-arrow {\n border-left-color: var(--tooltip-status-borderColor);\n right: -11px;\n}\n\n.saltTooltip[data-placement^=\"right\"] .saltTooltip-arrow {\n border-right-color: var(--tooltip-status-borderColor);\n left: -11px;\n}\n\n.saltTooltip[data-placement^=\"top\"] .saltTooltip-arrow::after {\n border-top-color: var(--tooltip-background);\n bottom: -4px;\n left: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n.saltTooltip[data-placement^=\"bottom\"] .saltTooltip-arrow::after {\n border-bottom-color: var(--tooltip-background);\n top: -4px;\n left: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n.saltTooltip[data-placement^=\"left\"] .saltTooltip-arrow::after {\n border-left-color: var(--tooltip-background);\n right: -4px;\n top: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n.saltTooltip[data-placement^=\"right\"] .saltTooltip-arrow::after {\n border-right-color: var(--tooltip-background);\n left: -4px;\n top: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
6
+ styleInject_es(css_248z);
7
+
8
+ module.exports = css_248z;
9
+ //# sourceMappingURL=Tooltip.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tooltip.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
@@ -0,0 +1,91 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var clsx = require('clsx');
7
+ var React = require('react');
8
+ var StatusIndicator = require('../status-indicator/StatusIndicator.js');
9
+ var makePrefixer = require('../utils/makePrefixer.js');
10
+ require('../utils/useFloatingUI.js');
11
+ var useForkRef = require('../utils/useForkRef.js');
12
+ require('../utils/useId.js');
13
+ require('../salt-provider/SaltProvider.js');
14
+ require('../viewport/ViewportProvider.js');
15
+ var useTooltip = require('./useTooltip.js');
16
+ require('./Tooltip.css.js');
17
+
18
+ const withBaseName = makePrefixer.makePrefixer("saltTooltip");
19
+ const Tooltip = React.forwardRef(
20
+ function Tooltip2(props, ref) {
21
+ const {
22
+ children,
23
+ className,
24
+ disabled,
25
+ hideArrow = false,
26
+ hideIcon = false,
27
+ open: openProp,
28
+ content,
29
+ status = "info",
30
+ placement = "right",
31
+ enterDelay = 300,
32
+ leaveDelay = 0,
33
+ ...rest
34
+ } = props;
35
+ const hookProps = {
36
+ open: openProp,
37
+ placement,
38
+ enterDelay,
39
+ leaveDelay,
40
+ ...rest
41
+ };
42
+ const {
43
+ arrowProps,
44
+ open,
45
+ floating,
46
+ reference,
47
+ getTriggerProps,
48
+ getTooltipProps
49
+ } = useTooltip.useTooltip(hookProps);
50
+ const triggerRef = useForkRef.useForkRef(
51
+ React.isValidElement(children) ? children.ref : null,
52
+ reference
53
+ );
54
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
55
+ children: [
56
+ open && !disabled && /* @__PURE__ */ jsxRuntime.jsxs("div", {
57
+ className: clsx.clsx(withBaseName(), withBaseName(status), className),
58
+ ref: floating,
59
+ ...getTooltipProps(),
60
+ children: [
61
+ /* @__PURE__ */ jsxRuntime.jsxs("div", {
62
+ className: withBaseName("container"),
63
+ children: [
64
+ !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
65
+ status,
66
+ size: 1,
67
+ className: withBaseName("icon")
68
+ }),
69
+ /* @__PURE__ */ jsxRuntime.jsx("span", {
70
+ className: withBaseName("content"),
71
+ children: content
72
+ })
73
+ ]
74
+ }),
75
+ !hideArrow && /* @__PURE__ */ jsxRuntime.jsx("div", {
76
+ className: withBaseName("arrow"),
77
+ ...arrowProps
78
+ })
79
+ ]
80
+ }),
81
+ React.isValidElement(children) && React.cloneElement(children, {
82
+ ...getTriggerProps(),
83
+ ref: triggerRef
84
+ })
85
+ ]
86
+ });
87
+ }
88
+ );
89
+
90
+ exports.Tooltip = Tooltip;
91
+ //# sourceMappingURL=Tooltip.js.map
@@ -0,0 +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 ReactNode,\n isValidElement,\n} from \"react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { UseFloatingUIProps, makePrefixer, useForkRef } from \"../utils\";\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\"> {\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 state 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 current 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,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\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 return (\n <>\n {open && !disabled && (\n <div\n className={clsx(withBaseName(), withBaseName(status), className)}\n ref={floating}\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 className={withBaseName(\"content\")}>{content}</span>\n </div>\n {!hideArrow && (\n <div className={withBaseName(\"arrow\")} {...arrowProps} />\n )}\n </div>\n )}\n\n {isValidElement(children) &&\n cloneElement(children, {\n ...getTriggerProps(),\n ref: triggerRef,\n })}\n </>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useTooltip","useForkRef","isValidElement","jsxs","Fragment","clsx","jsx","StatusIndicator","cloneElement"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAS,GAAA,MAAA;AAAA,MACT,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,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,KACF,GAAIC,sBAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAAC,qBAAA;AAAA,MAEjBC,oBAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAQ,IAAA,IAAA,CAAC,4BACPD,eAAA,CAAA,KAAA,EAAA;AAAA,UACC,WAAWE,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,GAAK,EAAA,QAAA;AAAA,UACJ,GAAG,eAAgB,EAAA;AAAA,UAEpB,QAAA,EAAA;AAAA,4BAACF,eAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,cACrC,QAAA,EAAA;AAAA,gBAAA,CAAC,4BACCG,cAAA,CAAAC,+BAAA,EAAA;AAAA,kBACC,MAAA;AAAA,kBACA,IAAM,EAAA,CAAA;AAAA,kBACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,iBAChC,CAAA;AAAA,gCAEDD,cAAA,CAAA,MAAA,EAAA;AAAA,kBAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,kBAAI,QAAA,EAAA,OAAA;AAAA,iBAAQ,CAAA;AAAA,eAAA;AAAA,aACrD,CAAA;AAAA,YACC,CAAC,6BACCA,cAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAI,GAAG,UAAA;AAAA,aAAY,CAAA;AAAA,WAAA;AAAA,SAE3D,CAAA;AAAA,QAGDJ,oBAAe,CAAA,QAAQ,CACtB,IAAAM,kBAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,eAAgB,EAAA;AAAA,UACnB,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,OAAA;AAAA,KACL,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -0,0 +1,94 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ require('../aria-announcer/AriaAnnouncerContext.js');
7
+ require('react/jsx-runtime');
8
+ var useAriaAnnouncer = require('../aria-announcer/useAriaAnnouncer.js');
9
+ require('../utils/useFloatingUI.js');
10
+ require('../utils/useId.js');
11
+ var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
12
+ require('../salt-provider/SaltProvider.js');
13
+ require('../viewport/ViewportProvider.js');
14
+
15
+ function getDocument(floating) {
16
+ var _a;
17
+ return (_a = floating == null ? void 0 : floating.ownerDocument) != null ? _a : document;
18
+ }
19
+ function getWindow(value) {
20
+ var _a;
21
+ return (_a = getDocument(value).defaultView) != null ? _a : window;
22
+ }
23
+ function isElement(value) {
24
+ return value ? value instanceof getWindow(value).Element : false;
25
+ }
26
+ function getDelay(value, prop, pointerType) {
27
+ if (pointerType && pointerType !== "mouse") {
28
+ return 0;
29
+ }
30
+ if (typeof value === "number") {
31
+ return value;
32
+ }
33
+ return value == null ? void 0 : value[prop];
34
+ }
35
+ const useAriaAnnounce = (context, { delay = 0 }) => {
36
+ const { open, dataRef, refs } = context;
37
+ const pointerTypeRef = React.useRef();
38
+ const timeoutRef = React.useRef();
39
+ const blockMouseMoveRef = React.useRef(true);
40
+ const { announce } = useAriaAnnouncer.useAriaAnnouncer();
41
+ useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
42
+ if (!open) {
43
+ pointerTypeRef.current = void 0;
44
+ }
45
+ });
46
+ React.useEffect(() => {
47
+ const reference = refs.reference.current;
48
+ function announceFloating() {
49
+ var _a;
50
+ const tooltipContent = (_a = refs.floating.current) == null ? void 0 : _a.innerText;
51
+ if (tooltipContent) {
52
+ announce(tooltipContent);
53
+ }
54
+ }
55
+ function onMouseEnter(event) {
56
+ clearTimeout(timeoutRef.current);
57
+ if (open) {
58
+ return;
59
+ }
60
+ blockMouseMoveRef.current = false;
61
+ dataRef.current.openEvent = event;
62
+ if (delay) {
63
+ timeoutRef.current = window.setTimeout(() => {
64
+ announceFloating();
65
+ }, getDelay(delay, "open", pointerTypeRef.current));
66
+ } else {
67
+ announceFloating();
68
+ }
69
+ }
70
+ if (isElement(reference)) {
71
+ reference.addEventListener("mouseenter", onMouseEnter);
72
+ return () => {
73
+ reference.removeEventListener("mouseenter", onMouseEnter);
74
+ };
75
+ }
76
+ }, [dataRef, delay, open, refs.reference, refs.floating, announce]);
77
+ function setPointerRef(event) {
78
+ pointerTypeRef.current = event.pointerType;
79
+ }
80
+ return {
81
+ reference: {
82
+ onPointerDown: setPointerRef,
83
+ onPointerEnter: setPointerRef
84
+ },
85
+ floating: {
86
+ onMouseEnter() {
87
+ clearTimeout(timeoutRef.current);
88
+ }
89
+ }
90
+ };
91
+ };
92
+
93
+ exports.useAriaAnnounce = useAriaAnnounce;
94
+ //# sourceMappingURL=useAriaAnnounce.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useAriaAnnounce.js","sources":["../src/tooltip/useAriaAnnounce.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { PointerEvent, useEffect, useRef } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nfunction getDocument(floating: HTMLElement | null) {\n return floating?.ownerDocument ?? document;\n}\n\n// TODO: Check whether can be anything more restrictive than `any`\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction getWindow(value: any) {\n return getDocument(value).defaultView ?? window;\n}\n\nfunction isElement(value: unknown): value is HTMLElement {\n return value ? value instanceof getWindow(value).Element : false;\n}\n\nfunction getDelay(\n value: Props[\"delay\"],\n prop: \"open\" | \"close\",\n pointerType?: PointerEvent[\"pointerType\"]\n) {\n if (pointerType && pointerType !== \"mouse\") {\n return 0;\n }\n\n if (typeof value === \"number\") {\n return value;\n }\n\n return value?.[prop];\n}\n\ntype Props = {\n delay?: number | Partial<{ open: number; close: number }>;\n};\n\nexport const useAriaAnnounce = (\n context: FloatingContext,\n { delay = 0 }: Props\n): ElementProps => {\n const { open, dataRef, refs } = context;\n\n const pointerTypeRef = useRef<PointerEvent[\"pointerType\"]>();\n const timeoutRef = useRef<number>();\n const blockMouseMoveRef = useRef(true);\n const { announce } = useAriaAnnouncer();\n\n useIsomorphicLayoutEffect(() => {\n if (!open) {\n pointerTypeRef.current = undefined;\n }\n });\n\n useEffect(() => {\n const reference = refs.reference.current;\n function announceFloating() {\n const tooltipContent = refs.floating.current?.innerText;\n\n if (tooltipContent) {\n announce(tooltipContent);\n }\n }\n\n function onMouseEnter(event: MouseEvent) {\n clearTimeout(timeoutRef.current);\n\n if (open) {\n return;\n }\n\n blockMouseMoveRef.current = false;\n dataRef.current.openEvent = event;\n\n if (delay) {\n timeoutRef.current = window.setTimeout(() => {\n announceFloating();\n }, getDelay(delay, \"open\", pointerTypeRef.current));\n } else {\n announceFloating();\n }\n }\n\n if (isElement(reference)) {\n reference.addEventListener(\"mouseenter\", onMouseEnter);\n return () => {\n reference.removeEventListener(\"mouseenter\", onMouseEnter);\n };\n }\n }, [dataRef, delay, open, refs.reference, refs.floating, announce]);\n\n function setPointerRef(event: PointerEvent) {\n pointerTypeRef.current = event.pointerType;\n }\n\n return {\n reference: {\n onPointerDown: setPointerRef,\n onPointerEnter: setPointerRef,\n },\n floating: {\n onMouseEnter() {\n clearTimeout(timeoutRef.current);\n },\n },\n };\n};\n"],"names":["useRef","useAriaAnnouncer","useIsomorphicLayoutEffect","useEffect"],"mappings":"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"}
@@ -0,0 +1,106 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var react = require('@floating-ui/react');
6
+ var React = require('react');
7
+ var useControlled = require('../utils/useControlled.js');
8
+ var useFloatingUI = require('../utils/useFloatingUI.js');
9
+ require('../utils/useId.js');
10
+ require('../salt-provider/SaltProvider.js');
11
+ require('../viewport/ViewportProvider.js');
12
+ var useAriaAnnounce = require('./useAriaAnnounce.js');
13
+
14
+ function useTooltip(props) {
15
+ const {
16
+ enterDelay,
17
+ leaveDelay,
18
+ open: openProp,
19
+ onOpenChange,
20
+ placement: placementProp,
21
+ disableHoverListener,
22
+ disableFocusListener
23
+ } = props || {};
24
+ const arrowRef = React.useRef(null);
25
+ const [open, setOpen] = useControlled.useControlled({
26
+ controlled: openProp,
27
+ default: false,
28
+ name: "Tooltip",
29
+ state: "open"
30
+ });
31
+ const handleOpenChange = (open2) => {
32
+ setOpen(open2);
33
+ onOpenChange == null ? void 0 : onOpenChange(open2);
34
+ };
35
+ const {
36
+ floating,
37
+ reference,
38
+ x,
39
+ y,
40
+ strategy,
41
+ middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
42
+ placement,
43
+ context
44
+ } = useFloatingUI.useFloatingUI({
45
+ open,
46
+ onOpenChange: handleOpenChange,
47
+ placement: placementProp,
48
+ middleware: [
49
+ react.offset(8),
50
+ react.flip(),
51
+ react.shift({ limiter: react.limitShift() }),
52
+ react.arrow({ element: arrowRef })
53
+ ]
54
+ });
55
+ const { getReferenceProps, getFloatingProps } = react.useInteractions([
56
+ react.useHover(context, {
57
+ delay: {
58
+ open: enterDelay,
59
+ close: leaveDelay
60
+ },
61
+ enabled: !disableHoverListener,
62
+ handleClose: react.safePolygon()
63
+ }),
64
+ react.useFocus(context, { enabled: !disableFocusListener }),
65
+ react.useRole(context, { role: "tooltip" }),
66
+ react.useDismiss(context),
67
+ useAriaAnnounce.useAriaAnnounce(context, {
68
+ delay: {
69
+ open: enterDelay,
70
+ close: leaveDelay
71
+ }
72
+ })
73
+ ]);
74
+ const arrowProps = {
75
+ ref: arrowRef,
76
+ style: {
77
+ left: arrowX ? `${arrowX}px` : "",
78
+ top: arrowY ? `${arrowY}px` : ""
79
+ }
80
+ };
81
+ const getTooltipProps = () => {
82
+ return getFloatingProps({
83
+ "data-placement": placement,
84
+ ref: floating,
85
+ style: {
86
+ top: y != null ? y : "",
87
+ left: x != null ? x : "",
88
+ position: strategy
89
+ }
90
+ });
91
+ };
92
+ const getTriggerProps = () => getReferenceProps({
93
+ ref: reference
94
+ });
95
+ return {
96
+ arrowProps,
97
+ open,
98
+ floating,
99
+ reference,
100
+ getTooltipProps,
101
+ getTriggerProps
102
+ };
103
+ }
104
+
105
+ exports.useTooltip = useTooltip;
106
+ //# sourceMappingURL=useTooltip.js.map
@@ -0,0 +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<HTMLDivElement | 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 style: {\n left: arrowX ? `${arrowX}px` : \"\",\n top: arrowY ? `${arrowY}px` : \"\",\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 ?? \"\",\n left: x ?? \"\",\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":["useRef","useControlled","open","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useAriaAnnounce"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\nimport { MiddlewareArguments } from \"@floating-ui/react-dom-interactions\";\n\nexport const margin = (value = 0): Middleware => ({\n name: \"margin\",\n options: value,\n fn(middlewareArguments: MiddlewareArguments) {\n const { x, y, elements } = middlewareArguments;\n\n if (elements.floating.children.length > 0) {\n const rootChildElement = elements.floating.children[0] as HTMLElement;\n rootChildElement.style.setProperty(\"margin\", value.toString());\n }\n return {\n x: x,\n y: y,\n };\n },\n});\n"],"names":[],"mappings":";;;;AAGa,MAAA,MAAA,GAAS,CAAC,KAAA,GAAQ,CAAmB,MAAA;AAAA,EAChD,IAAM,EAAA,QAAA;AAAA,EACN,OAAS,EAAA,KAAA;AAAA,EACT,GAAG,mBAA0C,EAAA;AAC3C,IAAA,MAAM,EAAE,CAAA,EAAG,CAAG,EAAA,QAAA,EAAa,GAAA,mBAAA,CAAA;AAE3B,IAAA,IAAI,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,MAAA,GAAS,CAAG,EAAA;AACzC,MAAM,MAAA,gBAAA,GAAmB,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,CAAA,CAAA,CAAA;AACpD,MAAA,gBAAA,CAAiB,KAAM,CAAA,WAAA,CAAY,QAAU,EAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAAA,KAC/D;AACA,IAAO,OAAA;AAAA,MACL,CAAA;AAAA,MACA,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAA;;;;"}
1
+ {"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\nimport { MiddlewareArguments } from \"@floating-ui/react\";\n\nexport const margin = (value = 0): Middleware => ({\n name: \"margin\",\n options: value,\n fn(middlewareArguments: MiddlewareArguments) {\n const { x, y, elements } = middlewareArguments;\n\n if (elements.floating.children.length > 0) {\n const rootChildElement = elements.floating.children[0] as HTMLElement;\n rootChildElement.style.setProperty(\"margin\", value.toString());\n }\n return {\n x: x,\n y: y,\n };\n },\n});\n"],"names":[],"mappings":";;;;AAGa,MAAA,MAAA,GAAS,CAAC,KAAA,GAAQ,CAAmB,MAAA;AAAA,EAChD,IAAM,EAAA,QAAA;AAAA,EACN,OAAS,EAAA,KAAA;AAAA,EACT,GAAG,mBAA0C,EAAA;AAC3C,IAAA,MAAM,EAAE,CAAA,EAAG,CAAG,EAAA,QAAA,EAAa,GAAA,mBAAA,CAAA;AAE3B,IAAA,IAAI,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,MAAA,GAAS,CAAG,EAAA;AACzC,MAAM,MAAA,gBAAA,GAAmB,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,CAAA,CAAA,CAAA;AACpD,MAAA,gBAAA,CAAiB,KAAM,CAAA,WAAA,CAAY,QAAU,EAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAAA,KAC/D;AACA,IAAO,OAAA;AAAA,MACL,CAAA;AAAA,MACA,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAA;;;;"}
@@ -0,0 +1,38 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var react = require('@floating-ui/react');
6
+
7
+ const DEFAULT_FLOATING_UI_MIDDLEWARE = [
8
+ react.flip(),
9
+ react.shift({ limiter: react.limitShift() })
10
+ ];
11
+ function useFloatingUI(props) {
12
+ const {
13
+ placement,
14
+ strategy,
15
+ middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,
16
+ open = false,
17
+ onOpenChange
18
+ } = props;
19
+ const { reference, floating, refs, update, ...rest } = react.useFloating({
20
+ placement,
21
+ strategy,
22
+ middleware,
23
+ open,
24
+ onOpenChange,
25
+ whileElementsMounted: react.autoUpdate
26
+ });
27
+ return {
28
+ reference,
29
+ floating,
30
+ refs,
31
+ update,
32
+ ...rest
33
+ };
34
+ }
35
+
36
+ exports.DEFAULT_FLOATING_UI_MIDDLEWARE = DEFAULT_FLOATING_UI_MIDDLEWARE;
37
+ exports.useFloatingUI = useFloatingUI;
38
+ //# sourceMappingURL=useFloatingUI.js.map
@@ -0,0 +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 * Set position relative to trigger\n */\n placement?: Placement;\n strategy?: Strategy;\n middleware?: Middleware[];\n /**\n * Set visible state. Defaults to false\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":["flip","shift","limitShift","useFloating","autoUpdate"],"mappings":";;;;;;AA0BO,MAAM,8BAAiC,GAAA;AAAA,EAC5CA,UAAK,EAAA;AAAA,EACLC,WAAM,CAAA,EAAE,OAAS,EAAAC,gBAAA,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,KAASC,iBAAY,CAAA;AAAA,IACjE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAsB,EAAAC,gBAAA;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;;;;;"}
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var React = require('react');
7
+ require('../utils/useFloatingUI.js');
7
8
  require('../utils/useId.js');
8
9
  var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
9
10
  require('../salt-provider/SaltProvider.js');
@@ -1 +1 @@
1
- {"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n const existingViewport = useContext(ViewportContext);\n const [viewport, setViewport] = useState(existingViewport);\n\n const noExistingViewport = existingViewport === null;\n const viewportValue = existingViewport || viewport || 0;\n\n useIsomorphicLayoutEffect(() => {\n let observer: ResizeObserver | null = null;\n\n if (noExistingViewport) {\n observer = new ResizeObserver(\n (observerEntries: ResizeObserverEntry[]) => {\n setViewport(observerEntries[0].contentRect.width);\n }\n );\n\n observer.observe(document.body);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [noExistingViewport]);\n\n return (\n <ViewportContext.Provider value={viewportValue}>\n {children}\n </ViewportContext.Provider>\n );\n};\n\nconst useViewport = (): number => {\n const value = useContext(ViewportContext);\n return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":["createContext","useContext","useState","useIsomorphicLayoutEffect","jsx"],"mappings":";;;;;;;;;;AAGM,MAAA,eAAA,GAAkBA,oBAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmBC,iBAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAAA,KAChC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAAC,cAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQH,iBAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;;;"}
1
+ {"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n const existingViewport = useContext(ViewportContext);\n const [viewport, setViewport] = useState(existingViewport);\n\n const noExistingViewport = existingViewport === null;\n const viewportValue = existingViewport || viewport || 0;\n\n useIsomorphicLayoutEffect(() => {\n let observer: ResizeObserver | null = null;\n\n if (noExistingViewport) {\n observer = new ResizeObserver(\n (observerEntries: ResizeObserverEntry[]) => {\n setViewport(observerEntries[0].contentRect.width);\n }\n );\n\n observer.observe(document.body);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [noExistingViewport]);\n\n return (\n <ViewportContext.Provider value={viewportValue}>\n {children}\n </ViewportContext.Provider>\n );\n};\n\nconst useViewport = (): number => {\n const value = useContext(ViewportContext);\n return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":["createContext","useContext","useState","useIsomorphicLayoutEffect","jsx"],"mappings":";;;;;;;;;;;AAGM,MAAA,eAAA,GAAkBA,oBAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmBC,iBAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAAA,KAChC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAAC,cAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQH,iBAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;;;"}
@@ -13,19 +13,19 @@ function AriaAnnouncerProvider({
13
13
  const mountedRef = useRef(true);
14
14
  const announceAll = useCallback(() => {
15
15
  isAnnouncingRef.current = true;
16
- if (announcementsRef.current.length && mountedRef.current) {
16
+ if (mountedRef.current) {
17
17
  setCurrentAnnouncement("");
18
18
  requestAnimationFrame(() => {
19
- if (mountedRef.current) {
19
+ if (mountedRef.current && announcementsRef.current.length) {
20
20
  const announcement = announcementsRef.current.shift();
21
21
  setCurrentAnnouncement(announcement);
22
22
  setTimeout(() => {
23
23
  announceAll();
24
24
  }, ARIA_ANNOUNCE_DELAY);
25
+ } else {
26
+ isAnnouncingRef.current = false;
25
27
  }
26
28
  });
27
- } else {
28
- isAnnouncingRef.current = false;
29
29
  }
30
30
  }, []);
31
31
  const announce = useCallback(
@@ -37,12 +37,12 @@ function AriaAnnouncerProvider({
37
37
  },
38
38
  [announceAll]
39
39
  );
40
- useEffect(
41
- () => () => {
40
+ useEffect(() => {
41
+ mountedRef.current = true;
42
+ return () => {
42
43
  mountedRef.current = false;
43
- },
44
- []
45
- );
44
+ };
45
+ }, []);
46
46
  const value = useMemo(() => ({ announce }), [announce]);
47
47
  return /* @__PURE__ */ jsxs(AriaAnnouncerContext.Provider, {
48
48
  value,
@@ -1 +1 @@
1
- {"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import {\n useState,\n useCallback,\n useRef,\n useMemo,\n useEffect,\n CSSProperties,\n ReactNode,\n} from \"react\";\n\nimport { AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport const ARIA_ANNOUNCE_DELAY = 150;\n\nexport interface AriaAnnouncerProviderProps {\n children?: ReactNode;\n /**\n * Style overrides for the aria-live element\n */\n style?: CSSProperties;\n}\n\nexport function AriaAnnouncerProvider({\n children,\n style,\n}: AriaAnnouncerProviderProps) {\n // announcement that gets rendered inside aria-live and read out by screen readers\n const [currentAnnouncement, setCurrentAnnouncement] = useState(\"\");\n // queue that stores all the requested announcements\n const announcementsRef = useRef<string[]>([]);\n // we use this variable to decide whether to start the announcement queue if one is not already in progress\n const isAnnouncingRef = useRef(false);\n // we need to keep track of the state of the component mount since all the async function calls\n // might trigger a setState after a component has been unmounted\n const mountedRef = useRef(true);\n\n // announceAll will get called recursively until all the announcements are rendered and cleared from the queue\n const announceAll = useCallback(() => {\n isAnnouncingRef.current = true;\n if (announcementsRef.current.length && mountedRef.current) {\n setCurrentAnnouncement(\"\");\n requestAnimationFrame(() => {\n if (mountedRef.current) {\n const announcement = announcementsRef.current.shift() as string;\n setCurrentAnnouncement(announcement);\n setTimeout(() => {\n announceAll();\n }, ARIA_ANNOUNCE_DELAY);\n }\n });\n } else {\n isAnnouncingRef.current = false;\n }\n }, []);\n\n const announce = useCallback(\n (announcement: string) => {\n announcementsRef.current.push(announcement);\n if (!isAnnouncingRef.current) {\n announceAll();\n }\n },\n [announceAll]\n );\n\n useEffect(\n () => () => {\n mountedRef.current = false;\n },\n []\n );\n\n const value = useMemo(() => ({ announce }), [announce]);\n return (\n <AriaAnnouncerContext.Provider value={value}>\n {children}\n <div\n aria-atomic=\"true\"\n aria-live=\"assertive\"\n // hidden styling based on https://tailwindcss.com/docs/screen-readers\n style={{\n position: \"absolute\",\n height: 1,\n width: 1,\n padding: 0,\n margin: -1,\n overflow: \"hidden\",\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n borderWidth: 0,\n ...style,\n }}\n >\n {currentAnnouncement}\n </div>\n </AriaAnnouncerContext.Provider>\n );\n}\n"],"names":[],"mappings":";;;;AAYO,MAAM,mBAAsB,GAAA,IAAA;AAU5B,SAAS,qBAAsB,CAAA;AAAA,EACpC,QAAA;AAAA,EACA,KAAA;AACF,CAA+B,EAAA;AAE7B,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAI,SAAS,EAAE,CAAA,CAAA;AAEjE,EAAM,MAAA,gBAAA,GAAmB,MAAiB,CAAA,EAAE,CAAA,CAAA;AAE5C,EAAM,MAAA,eAAA,GAAkB,OAAO,KAAK,CAAA,CAAA;AAGpC,EAAM,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAG9B,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,eAAA,CAAgB,OAAU,GAAA,IAAA,CAAA;AAC1B,IAAA,IAAI,gBAAiB,CAAA,OAAA,CAAQ,MAAU,IAAA,UAAA,CAAW,OAAS,EAAA;AACzD,MAAA,sBAAA,CAAuB,EAAE,CAAA,CAAA;AACzB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAM,MAAA,YAAA,GAAe,gBAAiB,CAAA,OAAA,CAAQ,KAAM,EAAA,CAAA;AACpD,UAAA,sBAAA,CAAuB,YAAY,CAAA,CAAA;AACnC,UAAA,UAAA,CAAW,MAAM;AACf,YAAY,WAAA,EAAA,CAAA;AAAA,aACX,mBAAmB,CAAA,CAAA;AAAA,SACxB;AAAA,OACD,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,eAAA,CAAgB,OAAU,GAAA,KAAA,CAAA;AAAA,KAC5B;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,YAAyB,KAAA;AACxB,MAAiB,gBAAA,CAAA,OAAA,CAAQ,KAAK,YAAY,CAAA,CAAA;AAC1C,MAAI,IAAA,CAAC,gBAAgB,OAAS,EAAA;AAC5B,QAAY,WAAA,EAAA,CAAA;AAAA,OACd;AAAA,KACF;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,SAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,KAAA,GAAQ,QAAQ,OAAO,EAAE,UAAa,CAAA,EAAA,CAAC,QAAQ,CAAC,CAAA,CAAA;AACtD,EACE,uBAAA,IAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,IAA8B,KAAA;AAAA,IAC5B,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,MAAA;AAAA,QACZ,WAAU,EAAA,WAAA;AAAA,QAEV,KAAO,EAAA;AAAA,UACL,QAAU,EAAA,UAAA;AAAA,UACV,MAAQ,EAAA,CAAA;AAAA,UACR,KAAO,EAAA,CAAA;AAAA,UACP,OAAS,EAAA,CAAA;AAAA,UACT,MAAQ,EAAA,CAAA,CAAA;AAAA,UACR,QAAU,EAAA,QAAA;AAAA,UACV,IAAM,EAAA,kBAAA;AAAA,UACN,UAAY,EAAA,QAAA;AAAA,UACZ,WAAa,EAAA,CAAA;AAAA,UACb,GAAG,KAAA;AAAA,SACL;AAAA,QAEC,QAAA,EAAA,mBAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import {\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport const ARIA_ANNOUNCE_DELAY = 150;\n\nexport interface AriaAnnouncerProviderProps {\n children?: ReactNode;\n /**\n * Style overrides for the aria-live element\n */\n style?: CSSProperties;\n}\n\nexport function AriaAnnouncerProvider({\n children,\n style,\n}: AriaAnnouncerProviderProps) {\n // announcement that gets rendered inside aria-live and read out by screen readers\n const [currentAnnouncement, setCurrentAnnouncement] = useState(\"\");\n // queue that stores all the requested announcements\n const announcementsRef = useRef<string[]>([]);\n // we use this variable to decide whether to start the announcement queue if one is not already in progress\n const isAnnouncingRef = useRef(false);\n // we need to keep track of the state of the component mount since all the async function calls\n // might trigger a setState after a component has been unmounted\n const mountedRef = useRef(true);\n\n // announceAll will get called recursively until all the announcements are rendered and cleared from the queue\n const announceAll = useCallback(() => {\n isAnnouncingRef.current = true;\n if (mountedRef.current) {\n setCurrentAnnouncement(\"\");\n requestAnimationFrame(() => {\n if (mountedRef.current && announcementsRef.current.length) {\n const announcement = announcementsRef.current.shift() as string;\n setCurrentAnnouncement(announcement);\n setTimeout(() => {\n announceAll();\n }, ARIA_ANNOUNCE_DELAY);\n } else {\n isAnnouncingRef.current = false;\n }\n });\n }\n }, []);\n\n const announce = useCallback(\n (announcement: string) => {\n announcementsRef.current.push(announcement);\n if (!isAnnouncingRef.current) {\n announceAll();\n }\n },\n [announceAll]\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n const value = useMemo(() => ({ announce }), [announce]);\n return (\n <AriaAnnouncerContext.Provider value={value}>\n {children}\n <div\n aria-atomic=\"true\"\n aria-live=\"assertive\"\n // hidden styling based on https://tailwindcss.com/docs/screen-readers\n style={{\n position: \"absolute\",\n height: 1,\n width: 1,\n padding: 0,\n margin: -1,\n overflow: \"hidden\",\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n borderWidth: 0,\n ...style,\n }}\n >\n {currentAnnouncement}\n </div>\n </AriaAnnouncerContext.Provider>\n );\n}\n"],"names":[],"mappings":";;;;AAYO,MAAM,mBAAsB,GAAA,IAAA;AAU5B,SAAS,qBAAsB,CAAA;AAAA,EACpC,QAAA;AAAA,EACA,KAAA;AACF,CAA+B,EAAA;AAE7B,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAI,SAAS,EAAE,CAAA,CAAA;AAEjE,EAAM,MAAA,gBAAA,GAAmB,MAAiB,CAAA,EAAE,CAAA,CAAA;AAE5C,EAAM,MAAA,eAAA,GAAkB,OAAO,KAAK,CAAA,CAAA;AAGpC,EAAM,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAG9B,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,eAAA,CAAgB,OAAU,GAAA,IAAA,CAAA;AAC1B,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,sBAAA,CAAuB,EAAE,CAAA,CAAA;AACzB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,UAAW,CAAA,OAAA,IAAW,gBAAiB,CAAA,OAAA,CAAQ,MAAQ,EAAA;AACzD,UAAM,MAAA,YAAA,GAAe,gBAAiB,CAAA,OAAA,CAAQ,KAAM,EAAA,CAAA;AACpD,UAAA,sBAAA,CAAuB,YAAY,CAAA,CAAA;AACnC,UAAA,UAAA,CAAW,MAAM;AACf,YAAY,WAAA,EAAA,CAAA;AAAA,aACX,mBAAmB,CAAA,CAAA;AAAA,SACjB,MAAA;AACL,UAAA,eAAA,CAAgB,OAAU,GAAA,KAAA,CAAA;AAAA,SAC5B;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,YAAyB,KAAA;AACxB,MAAiB,gBAAA,CAAA,OAAA,CAAQ,KAAK,YAAY,CAAA,CAAA;AAC1C,MAAI,IAAA,CAAC,gBAAgB,OAAS,EAAA;AAC5B,QAAY,WAAA,EAAA,CAAA;AAAA,OACd;AAAA,KACF;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA,CAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,KAAA,GAAQ,QAAQ,OAAO,EAAE,UAAa,CAAA,EAAA,CAAC,QAAQ,CAAC,CAAA,CAAA;AACtD,EACE,uBAAA,IAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,IAA8B,KAAA;AAAA,IAC5B,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,MAAA;AAAA,QACZ,WAAU,EAAA,WAAA;AAAA,QAEV,KAAO,EAAA;AAAA,UACL,QAAU,EAAA,UAAA;AAAA,UACV,MAAQ,EAAA,CAAA;AAAA,UACR,KAAO,EAAA,CAAA;AAAA,UACP,OAAS,EAAA,CAAA;AAAA,UACT,MAAQ,EAAA,CAAA,CAAA;AAAA,UACR,QAAU,EAAA,QAAA;AAAA,UACV,IAAM,EAAA,kBAAA;AAAA,UACN,UAAY,EAAA,QAAA;AAAA,UACZ,WAAa,EAAA,CAAA;AAAA,UACb,GAAG,KAAA;AAAA,SACL;AAAA,QAEC,QAAA,EAAA,mBAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
@@ -1,5 +1,6 @@
1
1
  import { useContext, useRef, useCallback, useMemo, useEffect } from 'react';
2
2
  import { debounce } from '../utils/debounce.js';
3
+ import '../utils/useFloatingUI.js';
3
4
  import '../utils/useId.js';
4
5
  import '../salt-provider/SaltProvider.js';
5
6
  import '../viewport/ViewportProvider.js';
@@ -48,12 +49,12 @@ const useAriaAnnouncer = ({
48
49
  }),
49
50
  [context, announce]
50
51
  );
51
- useEffect(
52
- () => () => {
52
+ useEffect(() => {
53
+ mountedRef.current = true;
54
+ return () => {
53
55
  mountedRef.current = false;
54
- },
55
- []
56
- );
56
+ };
57
+ }, []);
57
58
  return ariaAnnouncer;
58
59
  };
59
60
 
@@ -1 +1 @@
1
- {"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context && context.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\"\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context]\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval]\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce]\n );\n\n useEffect(\n () => () => {\n mountedRef.current = false;\n },\n []\n );\n\n return ariaAnnouncer;\n};\n"],"names":[],"mappings":";;;;;;;AAWA,IAAI,UAAa,GAAA,KAAA,CAAA;AAEV,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA,CAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAM,MAAA,yBAAA,GAA4B,WAAW,OAAQ,CAAA,QAAA,CAAA;AAErD,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,6BAA6B,UAAY,EAAA;AAC3C,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,iIAAA;AAAA,WACF,CAAA;AACA,UAAa,UAAA,GAAA,IAAA,CAAA;AAAA,SACf;AAAA,OACF;AAEA,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAW,GAAA,OAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACf,QAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,SAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
1
+ {"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context && context.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\"\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context]\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval]\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce]\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n return ariaAnnouncer;\n};\n"],"names":[],"mappings":";;;;;;;;AAWA,IAAI,UAAa,GAAA,KAAA,CAAA;AAEV,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA,CAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAM,MAAA,yBAAA,GAA4B,WAAW,OAAQ,CAAA,QAAA,CAAA;AAErD,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,6BAA6B,UAAY,EAAA;AAC3C,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,iIAAA;AAAA,WACF,CAAA;AACA,UAAa,UAAA,GAAA,IAAA,CAAA;AAAA,SACf;AAAA,OACF;AAEA,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAW,GAAA,OAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACf,QAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA,CAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
@@ -0,0 +1,7 @@
1
+ import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
2
+
3
+ var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n --avatar-base-size: var(--salt-size-base, 12px);\n --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-accent-fontSize));\n --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n /* Icon styling */\n --saltIcon-color: var(--avatar-foreground);\n --salt-size-icon-base: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n line-height: var(--saltAvatar-lineHeight, var(--salt-accent-lineHeight));\n display: flex;\n justify-content: center;\n align-items: center;\n background: var(--saltAvatar-background, var(--salt-accent-background));\n color: var(--avatar-foreground);\n font-size: var(--avatar-fontSize);\n width: var(--avatar-container-size);\n min-width: var(--avatar-container-size);\n height: var(--avatar-container-size);\n min-height: var(--avatar-container-size);\n overflow: hidden;\n user-select: none;\n border-radius: 50%;\n}\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n background: none;\n}\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n width: 100%;\n height: 100%;\n}\n";
4
+ styleInject(css_248z);
5
+
6
+ export { css_248z as default };
7
+ //# sourceMappingURL=Avatar.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Avatar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
@@ -0,0 +1,56 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { UserSolidIcon } from '@salt-ds/icons';
3
+ import { clsx } from 'clsx';
4
+ import { forwardRef } from 'react';
5
+ import { useLoaded } from './internal/useLoaded.js';
6
+ import { makePrefixer } from '../utils/makePrefixer.js';
7
+ import '../utils/useFloatingUI.js';
8
+ import '../utils/useId.js';
9
+ import '../salt-provider/SaltProvider.js';
10
+ import '../viewport/ViewportProvider.js';
11
+ import './Avatar.css.js';
12
+
13
+ const withBaseName = makePrefixer("saltAvatar");
14
+ const DEFAULT_AVATAR_SIZE = 2;
15
+ const defaultNameToInitials = (name) => name == null ? void 0 : name.split(" ").slice(0, 2).map((n) => n[0]).join("").toUpperCase();
16
+ const Avatar = forwardRef(function Avatar2({
17
+ className,
18
+ children: childrenProp,
19
+ name,
20
+ nameToInitials = defaultNameToInitials,
21
+ src,
22
+ size = DEFAULT_AVATAR_SIZE,
23
+ style: styleProp,
24
+ fallbackIcon = /* @__PURE__ */ jsx(UserSolidIcon, {}),
25
+ ...rest
26
+ }, ref) {
27
+ let children;
28
+ const style = {
29
+ ...styleProp,
30
+ "--saltAvatar-size-multiplier": `${size}`
31
+ };
32
+ const hasImgNotFailing = useLoaded({ src }) !== "error" && src;
33
+ if (hasImgNotFailing) {
34
+ children = /* @__PURE__ */ jsx("img", {
35
+ alt: name,
36
+ src
37
+ });
38
+ } else if (childrenProp != null) {
39
+ children = childrenProp;
40
+ }
41
+ const avatarInitials = nameToInitials(name);
42
+ return /* @__PURE__ */ jsx("div", {
43
+ ref,
44
+ style,
45
+ className: clsx(
46
+ withBaseName(),
47
+ { [withBaseName("withImage")]: hasImgNotFailing },
48
+ className
49
+ ),
50
+ ...rest,
51
+ children: children || avatarInitials || fallbackIcon
52
+ });
53
+ });
54
+
55
+ export { Avatar };
56
+ //# sourceMappingURL=Avatar.js.map