@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.
- package/dist-cjs/packages/core/src/aria-announcer/AriaAnnouncerProvider.js +9 -9
- package/dist-cjs/packages/core/src/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
- package/dist-cjs/packages/core/src/aria-announcer/useAriaAnnouncer.js +6 -5
- package/dist-cjs/packages/core/src/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/packages/core/src/avatar/Avatar.css.js +9 -0
- package/dist-cjs/packages/core/src/avatar/Avatar.css.js.map +1 -0
- package/dist-cjs/packages/core/src/avatar/Avatar.js +60 -0
- package/dist-cjs/packages/core/src/avatar/Avatar.js.map +1 -0
- package/dist-cjs/packages/core/src/avatar/internal/useLoaded.js +30 -0
- package/dist-cjs/packages/core/src/avatar/internal/useLoaded.js.map +1 -0
- package/dist-cjs/packages/core/src/border-item/BorderItem.js +9 -3
- package/dist-cjs/packages/core/src/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/packages/core/src/border-layout/BorderLayout.js +1 -0
- package/dist-cjs/packages/core/src/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/packages/core/src/button/Button.js +10 -4
- package/dist-cjs/packages/core/src/button/Button.js.map +1 -1
- package/dist-cjs/packages/core/src/card/Card.css.js +1 -1
- package/dist-cjs/packages/core/src/card/Card.js +1 -0
- package/dist-cjs/packages/core/src/card/Card.js.map +1 -1
- package/dist-cjs/packages/core/src/flex-item/FlexItem.js +2 -1
- package/dist-cjs/packages/core/src/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/packages/core/src/flex-layout/FlexLayout.js +12 -7
- package/dist-cjs/packages/core/src/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/packages/core/src/grid-item/GridItem.js +1 -0
- package/dist-cjs/packages/core/src/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/packages/core/src/grid-layout/GridLayout.js +1 -0
- package/dist-cjs/packages/core/src/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/packages/core/src/index.js +14 -0
- package/dist-cjs/packages/core/src/index.js.map +1 -1
- package/dist-cjs/packages/core/src/link/Link.js +1 -0
- package/dist-cjs/packages/core/src/link/Link.js.map +1 -1
- package/dist-cjs/packages/core/src/panel/Panel.js +1 -0
- package/dist-cjs/packages/core/src/panel/Panel.js.map +1 -1
- package/dist-cjs/packages/core/src/salt-provider/SaltProvider.js +1 -0
- package/dist-cjs/packages/core/src/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/packages/core/src/spinner/Spinner.css.js +9 -0
- package/dist-cjs/packages/core/src/spinner/Spinner.css.js.map +1 -0
- package/dist-cjs/packages/core/src/spinner/Spinner.js +81 -0
- package/dist-cjs/packages/core/src/spinner/Spinner.js.map +1 -0
- package/dist-cjs/packages/core/src/spinner/svgSpinners/SpinnerSVG.js +81 -0
- package/dist-cjs/packages/core/src/spinner/svgSpinners/SpinnerSVG.js.map +1 -0
- package/dist-cjs/packages/core/src/split-layout/SplitLayout.js +25 -0
- package/dist-cjs/packages/core/src/split-layout/SplitLayout.js.map +1 -0
- package/dist-cjs/packages/core/src/stack-layout/StackLayout.js +3 -2
- package/dist-cjs/packages/core/src/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/packages/core/src/status-indicator/StatusIndicator.js +1 -0
- package/dist-cjs/packages/core/src/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/packages/core/src/text/Display.js +1 -0
- package/dist-cjs/packages/core/src/text/Display.js.map +1 -1
- package/dist-cjs/packages/core/src/text/Text.css.js +1 -1
- package/dist-cjs/packages/core/src/text/Text.js +14 -7
- package/dist-cjs/packages/core/src/text/Text.js.map +1 -1
- package/dist-cjs/packages/core/src/theme/Theme.js.map +1 -1
- package/dist-cjs/packages/core/src/tooltip/Tooltip.css.js +9 -0
- package/dist-cjs/packages/core/src/tooltip/Tooltip.css.js.map +1 -0
- package/dist-cjs/packages/core/src/tooltip/Tooltip.js +91 -0
- package/dist-cjs/packages/core/src/tooltip/Tooltip.js.map +1 -0
- package/dist-cjs/packages/core/src/tooltip/useAriaAnnounce.js +94 -0
- package/dist-cjs/packages/core/src/tooltip/useAriaAnnounce.js.map +1 -0
- package/dist-cjs/packages/core/src/tooltip/useTooltip.js +106 -0
- package/dist-cjs/packages/core/src/tooltip/useTooltip.js.map +1 -0
- package/dist-cjs/packages/core/src/utils/marginMiddleware.js.map +1 -1
- package/dist-cjs/packages/core/src/utils/useFloatingUI.js +38 -0
- package/dist-cjs/packages/core/src/utils/useFloatingUI.js.map +1 -0
- package/dist-cjs/packages/core/src/viewport/ViewportProvider.js +1 -0
- package/dist-cjs/packages/core/src/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/packages/core/src/aria-announcer/AriaAnnouncerProvider.js +9 -9
- package/dist-es/packages/core/src/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
- package/dist-es/packages/core/src/aria-announcer/useAriaAnnouncer.js +6 -5
- package/dist-es/packages/core/src/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/packages/core/src/avatar/Avatar.css.js +7 -0
- package/dist-es/packages/core/src/avatar/Avatar.css.js.map +1 -0
- package/dist-es/packages/core/src/avatar/Avatar.js +56 -0
- package/dist-es/packages/core/src/avatar/Avatar.js.map +1 -0
- package/dist-es/packages/core/src/avatar/internal/useLoaded.js +26 -0
- package/dist-es/packages/core/src/avatar/internal/useLoaded.js.map +1 -0
- package/dist-es/packages/core/src/border-item/BorderItem.js +9 -3
- package/dist-es/packages/core/src/border-item/BorderItem.js.map +1 -1
- package/dist-es/packages/core/src/border-layout/BorderLayout.js +1 -0
- package/dist-es/packages/core/src/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/packages/core/src/button/Button.js +10 -4
- package/dist-es/packages/core/src/button/Button.js.map +1 -1
- package/dist-es/packages/core/src/card/Card.css.js +1 -1
- package/dist-es/packages/core/src/card/Card.js +1 -0
- package/dist-es/packages/core/src/card/Card.js.map +1 -1
- package/dist-es/packages/core/src/flex-item/FlexItem.js +2 -1
- package/dist-es/packages/core/src/flex-item/FlexItem.js.map +1 -1
- package/dist-es/packages/core/src/flex-layout/FlexLayout.js +12 -7
- package/dist-es/packages/core/src/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/packages/core/src/grid-item/GridItem.js +1 -0
- package/dist-es/packages/core/src/grid-item/GridItem.js.map +1 -1
- package/dist-es/packages/core/src/grid-layout/GridLayout.js +1 -0
- package/dist-es/packages/core/src/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/packages/core/src/index.js +6 -0
- package/dist-es/packages/core/src/index.js.map +1 -1
- package/dist-es/packages/core/src/link/Link.js +1 -0
- package/dist-es/packages/core/src/link/Link.js.map +1 -1
- package/dist-es/packages/core/src/panel/Panel.js +1 -0
- package/dist-es/packages/core/src/panel/Panel.js.map +1 -1
- package/dist-es/packages/core/src/salt-provider/SaltProvider.js +1 -0
- package/dist-es/packages/core/src/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/packages/core/src/spinner/Spinner.css.js +7 -0
- package/dist-es/packages/core/src/spinner/Spinner.css.js.map +1 -0
- package/dist-es/packages/core/src/spinner/Spinner.js +76 -0
- package/dist-es/packages/core/src/spinner/Spinner.js.map +1 -0
- package/dist-es/packages/core/src/spinner/svgSpinners/SpinnerSVG.js +77 -0
- package/dist-es/packages/core/src/spinner/svgSpinners/SpinnerSVG.js.map +1 -0
- package/dist-es/packages/core/src/split-layout/SplitLayout.js +21 -0
- package/dist-es/packages/core/src/split-layout/SplitLayout.js.map +1 -0
- package/dist-es/packages/core/src/stack-layout/StackLayout.js +3 -2
- package/dist-es/packages/core/src/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/packages/core/src/status-indicator/StatusIndicator.js +1 -0
- package/dist-es/packages/core/src/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/packages/core/src/text/Display.js +1 -0
- package/dist-es/packages/core/src/text/Display.js.map +1 -1
- package/dist-es/packages/core/src/text/Text.css.js +1 -1
- package/dist-es/packages/core/src/text/Text.js +14 -7
- package/dist-es/packages/core/src/text/Text.js.map +1 -1
- package/dist-es/packages/core/src/theme/Theme.js.map +1 -1
- package/dist-es/packages/core/src/tooltip/Tooltip.css.js +7 -0
- package/dist-es/packages/core/src/tooltip/Tooltip.css.js.map +1 -0
- package/dist-es/packages/core/src/tooltip/Tooltip.js +87 -0
- package/dist-es/packages/core/src/tooltip/Tooltip.js.map +1 -0
- package/dist-es/packages/core/src/tooltip/useAriaAnnounce.js +90 -0
- package/dist-es/packages/core/src/tooltip/useAriaAnnounce.js.map +1 -0
- package/dist-es/packages/core/src/tooltip/useTooltip.js +102 -0
- package/dist-es/packages/core/src/tooltip/useTooltip.js.map +1 -0
- package/dist-es/packages/core/src/utils/marginMiddleware.js.map +1 -1
- package/dist-es/packages/core/src/utils/useFloatingUI.js +33 -0
- package/dist-es/packages/core/src/utils/useFloatingUI.js.map +1 -0
- package/dist-es/packages/core/src/viewport/ViewportProvider.js +1 -0
- package/dist-es/packages/core/src/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/avatar/Avatar.d.ts +27 -0
- package/dist-types/avatar/index.d.ts +1 -0
- package/dist-types/avatar/internal/useLoaded.d.ts +2 -0
- package/dist-types/border-item/BorderItem.d.ts +1 -1
- package/dist-types/index.d.ts +4 -0
- package/dist-types/link/Link.d.ts +2 -2
- package/dist-types/spinner/Spinner.d.ts +45 -0
- package/dist-types/spinner/index.d.ts +1 -0
- package/dist-types/spinner/svgSpinners/SpinnerSVG.d.ts +5 -0
- package/dist-types/split-layout/SplitLayout.d.ts +28 -0
- package/dist-types/split-layout/index.d.ts +1 -0
- package/dist-types/text/Display.d.ts +3 -3
- package/dist-types/text/Headings.d.ts +4 -4
- package/dist-types/text/Label.d.ts +1 -1
- package/dist-types/text/Text.d.ts +4 -0
- package/dist-types/theme/Theme.d.ts +1 -1
- package/dist-types/tooltip/Tooltip.d.ts +47 -0
- package/dist-types/tooltip/index.d.ts +2 -0
- package/dist-types/tooltip/useAriaAnnounce.d.ts +9 -0
- package/dist-types/tooltip/useTooltip.d.ts +36 -0
- package/dist-types/utils/index.d.ts +1 -0
- package/dist-types/utils/useFloatingUI.d.ts +34 -0
- 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 | \"
|
|
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
|
|
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":"
|
|
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 (
|
|
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
|
|
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(
|
|
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
|