@easypost/easy-ui 1.0.0-alpha.6 → 1.0.0-alpha.8

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 (109) hide show
  1. package/Badge/index.js +12 -12
  2. package/Badge/index.mjs +12 -12
  3. package/Banner/index.js +4 -4
  4. package/Banner/index.mjs +4 -4
  5. package/Button/index.js +18 -18
  6. package/Button/index.mjs +18 -18
  7. package/CHANGELOG.md +21 -0
  8. package/Card/index.js +9 -9
  9. package/Card/index.mjs +9 -9
  10. package/Checkbox/index.js +21 -21
  11. package/Checkbox/index.mjs +21 -21
  12. package/CodeBlock/CodeBlock.d.ts +49 -61
  13. package/CodeBlock/CodeBlock.d.ts.map +1 -1
  14. package/CodeBlock/CodeBlock.stories.d.ts +3 -2
  15. package/CodeBlock/CodeBlock.stories.d.ts.map +1 -1
  16. package/CodeBlock/CopyButton.d.ts +9 -0
  17. package/CodeBlock/CopyButton.d.ts.map +1 -0
  18. package/CodeBlock/LanguageMenu.d.ts +18 -0
  19. package/CodeBlock/LanguageMenu.d.ts.map +1 -0
  20. package/CodeBlock/context.d.ts +11 -0
  21. package/CodeBlock/context.d.ts.map +1 -0
  22. package/CodeBlock/index.js +310 -5335
  23. package/CodeBlock/index.mjs +299 -5340
  24. package/CodeSnippet/CodeSnippet.d.ts +82 -0
  25. package/CodeSnippet/CodeSnippet.d.ts.map +1 -0
  26. package/CodeSnippet/CodeSnippet.stories.d.ts +14 -0
  27. package/CodeSnippet/CodeSnippet.stories.d.ts.map +1 -0
  28. package/CodeSnippet/CodeSnippet.test.d.ts +2 -0
  29. package/CodeSnippet/CodeSnippet.test.d.ts.map +1 -0
  30. package/CodeSnippet/SyntaxHighlighter.d.ts +8 -0
  31. package/CodeSnippet/SyntaxHighlighter.d.ts.map +1 -0
  32. package/CodeSnippet/index.d.ts +2 -0
  33. package/CodeSnippet/index.d.ts.map +1 -0
  34. package/CodeSnippet/index.js +11 -0
  35. package/CodeSnippet/index.mjs +11 -0
  36. package/CodeSnippet/theme.d.ts.map +1 -0
  37. package/CodeSnippet/useScrollbar.d.ts.map +1 -0
  38. package/DropdownButton/index.js +13 -13
  39. package/DropdownButton/index.mjs +13 -13
  40. package/HorizontalGrid/index.js +1 -1
  41. package/HorizontalGrid/index.mjs +1 -1
  42. package/HorizontalStack/index.js +1 -1
  43. package/HorizontalStack/index.mjs +1 -1
  44. package/Icon/index.js +2 -2
  45. package/Icon/index.mjs +2 -2
  46. package/IconButton/index.js +12 -12
  47. package/IconButton/index.mjs +12 -12
  48. package/InputField/index.js +3 -3
  49. package/InputField/index.mjs +3 -3
  50. package/Menu/index.js +11 -11
  51. package/Menu/index.mjs +11 -11
  52. package/Notification/index.js +14 -14
  53. package/Notification/index.mjs +14 -14
  54. package/Provider/index.js +3 -3
  55. package/Provider/index.mjs +3 -3
  56. package/RadioGroup/index.js +15 -15
  57. package/RadioGroup/index.mjs +15 -15
  58. package/Select/index.js +23 -23
  59. package/Select/index.mjs +23 -23
  60. package/SelectorErrorTooltip/index.js +4 -4
  61. package/SelectorErrorTooltip/index.mjs +4 -4
  62. package/Text/index.js +27 -27
  63. package/Text/index.mjs +27 -27
  64. package/TextField/index.js +3 -3
  65. package/TextField/index.mjs +3 -3
  66. package/Textarea/index.js +3 -3
  67. package/Textarea/index.mjs +3 -3
  68. package/Theme/index.js +1 -1
  69. package/Theme/index.mjs +1 -1
  70. package/Toggle/index.js +12 -12
  71. package/Toggle/index.mjs +12 -12
  72. package/Tooltip/Tooltip.stories.d.ts +1 -0
  73. package/Tooltip/Tooltip.stories.d.ts.map +1 -1
  74. package/Tooltip/index.js +8 -297
  75. package/Tooltip/index.mjs +8 -297
  76. package/UnstyledButton/index.js +2 -2
  77. package/UnstyledButton/index.mjs +2 -2
  78. package/VerticalStack/index.js +3 -3
  79. package/VerticalStack/index.mjs +3 -3
  80. package/__chunks__/{InputIcon-2317befd.mjs → InputIcon-db15c32a.mjs} +24 -24
  81. package/__chunks__/{InputIcon-d3963cf8.js → InputIcon-e721be51.js} +24 -24
  82. package/__chunks__/{import-a2023d8f.js → import-0f8555a4.js} +1 -1
  83. package/__chunks__/{import-2b302763.js → import-26676303.js} +1 -0
  84. package/__chunks__/{import-3d962a94.mjs → import-3faba3a6.mjs} +2 -1
  85. package/__chunks__/{import-8b6c0bc7.js → import-890ae60e.js} +1 -1
  86. package/__chunks__/{import-f1f4792a.mjs → import-c4caaddf.mjs} +5 -5
  87. package/__chunks__/{import-0561e1ba.mjs → import-eb35a9b9.mjs} +1 -1
  88. package/__chunks__/index-0c519caa.mjs +5421 -0
  89. package/__chunks__/index-12ba1ea7.js +299 -0
  90. package/__chunks__/{index-29d7bca9.mjs → index-45f05366.mjs} +1 -1
  91. package/__chunks__/{index-3985350a.js → index-5f429325.js} +1 -1
  92. package/__chunks__/index-766f8373.mjs +300 -0
  93. package/__chunks__/index-9964b6cd.js +5420 -0
  94. package/__chunks__/{tokens-6be8e137.mjs → tokens-3c27019b.mjs} +1 -0
  95. package/__chunks__/{tokens-e696ca96.js → tokens-ad06cd2c.js} +1 -0
  96. package/__chunks__/{useTriggerWidth-addcd1d6.mjs → useTriggerWidth-b554acaf.mjs} +23 -23
  97. package/__chunks__/{useTriggerWidth-156b038a.js → useTriggerWidth-e11bf6d6.js} +2 -2
  98. package/package.json +7 -5
  99. package/style.css +562 -491
  100. package/utilities/react.d.ts +15 -0
  101. package/utilities/react.d.ts.map +1 -0
  102. package/utilities/react.js +333 -0
  103. package/utilities/react.mjs +333 -0
  104. package/CodeBlock/SyntaxHighlighter.d.ts +0 -5
  105. package/CodeBlock/SyntaxHighlighter.d.ts.map +0 -1
  106. package/CodeBlock/theme.d.ts.map +0 -1
  107. package/CodeBlock/useScrollbar.d.ts.map +0 -1
  108. /package/{CodeBlock → CodeSnippet}/theme.d.ts +0 -0
  109. /package/{CodeBlock → CodeSnippet}/useScrollbar.d.ts +0 -0
@@ -0,0 +1,299 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
4
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
8
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
9
+ var __spreadValues = (a, b) => {
10
+ for (var prop in b || (b = {}))
11
+ if (__hasOwnProp.call(b, prop))
12
+ __defNormalProp(a, prop, b[prop]);
13
+ if (__getOwnPropSymbols)
14
+ for (var prop of __getOwnPropSymbols(b)) {
15
+ if (__propIsEnum.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ }
18
+ return a;
19
+ };
20
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
21
+ const React = require("react");
22
+ const Text_index = require("../Text/index.js");
23
+ const utilities_css = require("../utilities/css.js");
24
+ const _import$2 = require("./import-0f8555a4.js");
25
+ const _import = require("./import-a1e0f814.js");
26
+ const _import$1 = require("./import-26676303.js");
27
+ function $326e436e94273fe1$export$1c4b08e0eca38426(props, state) {
28
+ let domProps = _import.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
29
+ labelable: true
30
+ });
31
+ let { hoverProps } = _import$1.$6179b936705e76d3$export$ae780daf29e6d456({
32
+ onHoverStart: () => {
33
+ return state === null || state === void 0 ? void 0 : state.open(true);
34
+ },
35
+ onHoverEnd: () => {
36
+ return state === null || state === void 0 ? void 0 : state.close();
37
+ }
38
+ });
39
+ return {
40
+ tooltipProps: _import.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, hoverProps, {
41
+ role: "tooltip"
42
+ })
43
+ };
44
+ }
45
+ function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
46
+ let { isDisabled, trigger } = props;
47
+ let tooltipId = _import.$bdb11010cef70236$export$f680877a34711e37();
48
+ let isHovered = React.useRef(false);
49
+ let isFocused = React.useRef(false);
50
+ let handleShow = () => {
51
+ if (isHovered.current || isFocused.current)
52
+ state.open(isFocused.current);
53
+ };
54
+ let handleHide = (immediate) => {
55
+ if (!isHovered.current && !isFocused.current)
56
+ state.close(immediate);
57
+ };
58
+ React.useEffect(() => {
59
+ let onKeyDown = (e) => {
60
+ if (ref && ref.current) {
61
+ if (e.key === "Escape") {
62
+ e.stopPropagation();
63
+ state.close(true);
64
+ }
65
+ }
66
+ };
67
+ if (state.isOpen) {
68
+ document.addEventListener("keydown", onKeyDown, true);
69
+ return () => {
70
+ document.removeEventListener("keydown", onKeyDown, true);
71
+ };
72
+ }
73
+ }, [
74
+ ref,
75
+ state
76
+ ]);
77
+ let onHoverStart = () => {
78
+ if (trigger === "focus")
79
+ return;
80
+ if (_import$1.$507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer")
81
+ isHovered.current = true;
82
+ else
83
+ isHovered.current = false;
84
+ handleShow();
85
+ };
86
+ let onHoverEnd = () => {
87
+ if (trigger === "focus")
88
+ return;
89
+ isFocused.current = false;
90
+ isHovered.current = false;
91
+ handleHide();
92
+ };
93
+ let onPressStart = () => {
94
+ isFocused.current = false;
95
+ isHovered.current = false;
96
+ handleHide(true);
97
+ };
98
+ let onFocus = () => {
99
+ let isVisible = _import$1.$507fabe10e71c6fb$export$b9b3dfddab17db27();
100
+ if (isVisible) {
101
+ isFocused.current = true;
102
+ handleShow();
103
+ }
104
+ };
105
+ let onBlur = () => {
106
+ isFocused.current = false;
107
+ isHovered.current = false;
108
+ handleHide(true);
109
+ };
110
+ let { hoverProps } = _import$1.$6179b936705e76d3$export$ae780daf29e6d456({
111
+ isDisabled,
112
+ onHoverStart,
113
+ onHoverEnd
114
+ });
115
+ let { pressProps } = _import$1.$f6c31cce2adf654f$export$45712eceda6fad21({
116
+ onPressStart
117
+ });
118
+ let { focusableProps } = _import$1.$e6afbd83fe6ebbd2$export$4c014de7c8940b4c({
119
+ isDisabled,
120
+ onFocus,
121
+ onBlur
122
+ }, ref);
123
+ return {
124
+ triggerProps: __spreadValues({
125
+ "aria-describedby": state.isOpen ? tooltipId : void 0
126
+ }, _import.$3ef42575df84b30b$export$9d1611c77c2fe928(focusableProps, hoverProps, pressProps)),
127
+ tooltipProps: {
128
+ id: tooltipId
129
+ }
130
+ };
131
+ }
132
+ const $8796f90736e175cb$var$TOOLTIP_DELAY = 1500;
133
+ const $8796f90736e175cb$var$TOOLTIP_COOLDOWN = 500;
134
+ let $8796f90736e175cb$var$tooltips = {};
135
+ let $8796f90736e175cb$var$tooltipId = 0;
136
+ let $8796f90736e175cb$var$globalWarmedUp = false;
137
+ let $8796f90736e175cb$var$globalWarmUpTimeout = null;
138
+ let $8796f90736e175cb$var$globalCooldownTimeout = null;
139
+ function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
140
+ let { delay = $8796f90736e175cb$var$TOOLTIP_DELAY, closeDelay = $8796f90736e175cb$var$TOOLTIP_COOLDOWN } = props;
141
+ let { isOpen, open, close } = _import$2.$fc909762b330b746$export$61c6a8c84e605fb6(props);
142
+ let id = React.useMemo(() => `${++$8796f90736e175cb$var$tooltipId}`, []);
143
+ let closeTimeout = React.useRef();
144
+ let ensureTooltipEntry = () => {
145
+ $8796f90736e175cb$var$tooltips[id] = hideTooltip;
146
+ };
147
+ let closeOpenTooltips = () => {
148
+ for (let hideTooltipId in $8796f90736e175cb$var$tooltips)
149
+ if (hideTooltipId !== id) {
150
+ $8796f90736e175cb$var$tooltips[hideTooltipId](true);
151
+ delete $8796f90736e175cb$var$tooltips[hideTooltipId];
152
+ }
153
+ };
154
+ let showTooltip = () => {
155
+ clearTimeout(closeTimeout.current);
156
+ closeTimeout.current = null;
157
+ closeOpenTooltips();
158
+ ensureTooltipEntry();
159
+ $8796f90736e175cb$var$globalWarmedUp = true;
160
+ open();
161
+ if ($8796f90736e175cb$var$globalWarmUpTimeout) {
162
+ clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
163
+ $8796f90736e175cb$var$globalWarmUpTimeout = null;
164
+ }
165
+ if ($8796f90736e175cb$var$globalCooldownTimeout) {
166
+ clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
167
+ $8796f90736e175cb$var$globalCooldownTimeout = null;
168
+ }
169
+ };
170
+ let hideTooltip = (immediate) => {
171
+ if (immediate || closeDelay <= 0) {
172
+ clearTimeout(closeTimeout.current);
173
+ closeTimeout.current = null;
174
+ close();
175
+ } else if (!closeTimeout.current)
176
+ closeTimeout.current = setTimeout(() => {
177
+ closeTimeout.current = null;
178
+ close();
179
+ }, closeDelay);
180
+ if ($8796f90736e175cb$var$globalWarmUpTimeout) {
181
+ clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
182
+ $8796f90736e175cb$var$globalWarmUpTimeout = null;
183
+ }
184
+ if ($8796f90736e175cb$var$globalWarmedUp) {
185
+ if ($8796f90736e175cb$var$globalCooldownTimeout)
186
+ clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
187
+ $8796f90736e175cb$var$globalCooldownTimeout = setTimeout(() => {
188
+ delete $8796f90736e175cb$var$tooltips[id];
189
+ $8796f90736e175cb$var$globalCooldownTimeout = null;
190
+ $8796f90736e175cb$var$globalWarmedUp = false;
191
+ }, Math.max($8796f90736e175cb$var$TOOLTIP_COOLDOWN, closeDelay));
192
+ }
193
+ };
194
+ let warmupTooltip = () => {
195
+ closeOpenTooltips();
196
+ ensureTooltipEntry();
197
+ if (!isOpen && !$8796f90736e175cb$var$globalWarmUpTimeout && !$8796f90736e175cb$var$globalWarmedUp)
198
+ $8796f90736e175cb$var$globalWarmUpTimeout = setTimeout(() => {
199
+ $8796f90736e175cb$var$globalWarmUpTimeout = null;
200
+ $8796f90736e175cb$var$globalWarmedUp = true;
201
+ showTooltip();
202
+ }, delay);
203
+ else if (!isOpen)
204
+ showTooltip();
205
+ };
206
+ React.useEffect(() => {
207
+ return () => {
208
+ clearTimeout(closeTimeout.current);
209
+ let tooltip = $8796f90736e175cb$var$tooltips[id];
210
+ if (tooltip)
211
+ delete $8796f90736e175cb$var$tooltips[id];
212
+ };
213
+ }, [
214
+ id
215
+ ]);
216
+ return {
217
+ isOpen,
218
+ open: (immediate) => {
219
+ if (!immediate && delay > 0 && !closeTimeout.current)
220
+ warmupTooltip();
221
+ else
222
+ showTooltip();
223
+ },
224
+ close: hideTooltip
225
+ };
226
+ }
227
+ const Tooltip$1 = "_Tooltip_pckwe_5";
228
+ const text = "_text_pckwe_24";
229
+ const arrow = "_arrow_pckwe_30";
230
+ const top = "_top_pckwe_39";
231
+ const bottom = "_bottom_pckwe_40";
232
+ const left = "_left_pckwe_44";
233
+ const right = "_right_pckwe_45";
234
+ const styles = {
235
+ Tooltip: Tooltip$1,
236
+ text,
237
+ arrow,
238
+ top,
239
+ bottom,
240
+ left,
241
+ right
242
+ };
243
+ const CONTAINER_PADDING = 12;
244
+ const ARROW_BOUNDARY_OFFSET = 12;
245
+ const OFFSET = 12;
246
+ const DEFAULT_PLACEMENT = "top";
247
+ const OPEN_DELAY = 1e3;
248
+ const CLOSE_DELAY = 250;
249
+ function Tooltip(props) {
250
+ const { children, isImmediate } = props;
251
+ const triggerRef = React.useRef(null);
252
+ const triggerInputProps = __spreadProps(__spreadValues({}, props), {
253
+ delay: isImmediate ? 0 : OPEN_DELAY,
254
+ closeDelay: CLOSE_DELAY
255
+ });
256
+ const tooltipTriggerState = $8796f90736e175cb$export$4d40659c25ecb50b(triggerInputProps);
257
+ const { triggerProps, tooltipProps: tooltipPropsFromTrigger } = $4e1b34546679e357$export$a6da6c504e4bba8b(triggerInputProps, tooltipTriggerState, triggerRef);
258
+ return React.createElement(React.Fragment, null, React.cloneElement(children, __spreadProps(__spreadValues({}, _import.$3ef42575df84b30b$export$9d1611c77c2fe928(triggerProps, children.props)), {
259
+ ref: triggerRef
260
+ })), tooltipTriggerState.isOpen && React.createElement(_import$2.$f57aed4a881a3485$export$b47c3594eab58386, null, React.createElement(TooltipInner, __spreadProps(__spreadValues({}, props), {
261
+ triggerRef,
262
+ tooltipPropsFromTrigger,
263
+ tooltipTriggerState
264
+ }))));
265
+ }
266
+ function TooltipInner(props) {
267
+ const { content, placement: targetPlacement = DEFAULT_PLACEMENT, triggerRef, tooltipTriggerState, tooltipPropsFromTrigger } = props;
268
+ const tooltipRef = React.useRef(null);
269
+ const { overlayProps, arrowProps, placement, updatePosition } = _import$2.$2a41e45df1593e64$export$d39e1813b3bdd0e1({
270
+ arrowBoundaryOffset: ARROW_BOUNDARY_OFFSET,
271
+ containerPadding: CONTAINER_PADDING,
272
+ isOpen: tooltipTriggerState.isOpen,
273
+ offset: OFFSET,
274
+ overlayRef: tooltipRef,
275
+ placement: targetPlacement,
276
+ targetRef: triggerRef
277
+ });
278
+ const { tooltipProps: tooltipPropsFromTooltip } = $326e436e94273fe1$export$1c4b08e0eca38426(_import.$3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, props), tooltipTriggerState);
279
+ const tooltipProps = _import.$3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, tooltipPropsFromTooltip, tooltipPropsFromTrigger);
280
+ const style = __spreadValues(__spreadValues({}, tooltipProps.style), utilities_css.getComponentToken("tooltip", "container_padding", `${utilities_css.pxToRem(CONTAINER_PADDING)}rem`));
281
+ React.useLayoutEffect(() => {
282
+ updatePosition();
283
+ }, [content, updatePosition]);
284
+ return React.createElement("span", __spreadProps(__spreadValues({
285
+ ref: tooltipRef
286
+ }, tooltipProps), {
287
+ className: utilities_css.classNames(styles.Tooltip, styles[placement]),
288
+ "data-placement": placement,
289
+ style
290
+ }), React.createElement("span", {
291
+ className: styles.text
292
+ }, React.createElement(Text_index.Text, {
293
+ variant: "subtitle2"
294
+ }, content)), React.createElement("span", __spreadValues({
295
+ className: styles.arrow
296
+ }, arrowProps)));
297
+ }
298
+ exports.$8796f90736e175cb$export$4d40659c25ecb50b = $8796f90736e175cb$export$4d40659c25ecb50b;
299
+ exports.Tooltip = Tooltip;
@@ -33,7 +33,7 @@ import { a as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $65484d02dcb7eb3e$
33
33
  import React__default, { forwardRef, useRef } from "react";
34
34
  import { classNames } from "../utilities/css.mjs";
35
35
  import { o as omit } from "./omit-f17deb8f.mjs";
36
- import { $ as $f6c31cce2adf654f$export$45712eceda6fad21, a as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c } from "./import-3d962a94.mjs";
36
+ import { $ as $f6c31cce2adf654f$export$45712eceda6fad21, a as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c } from "./import-3faba3a6.mjs";
37
37
  function $701a24aa0da5b062$export$ea18c227d4417cc3(props, ref) {
38
38
  let {
39
39
  elementType = "button",
@@ -34,7 +34,7 @@ const _import$1 = require("./import-a1e0f814.js");
34
34
  const React = require("react");
35
35
  const utilities_css = require("../utilities/css.js");
36
36
  const omit = require("./omit-fca26542.js");
37
- const _import = require("./import-2b302763.js");
37
+ const _import = require("./import-26676303.js");
38
38
  function $701a24aa0da5b062$export$ea18c227d4417cc3(props, ref) {
39
39
  let {
40
40
  elementType = "button",
@@ -0,0 +1,300 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ import React__default, { useRef, useEffect, useMemo, useLayoutEffect } from "react";
21
+ import { Text } from "../Text/index.mjs";
22
+ import { getComponentToken, pxToRem, classNames } from "../utilities/css.mjs";
23
+ import { a as $fc909762b330b746$export$61c6a8c84e605fb6, d as $f57aed4a881a3485$export$b47c3594eab58386, f as $2a41e45df1593e64$export$d39e1813b3bdd0e1 } from "./import-c4caaddf.mjs";
24
+ import { d as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, a as $3ef42575df84b30b$export$9d1611c77c2fe928, b as $bdb11010cef70236$export$f680877a34711e37 } from "./import-19bc38ac.mjs";
25
+ import { f as $6179b936705e76d3$export$ae780daf29e6d456, $ as $f6c31cce2adf654f$export$45712eceda6fad21, a as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c, j as $507fabe10e71c6fb$export$630ff653c5ada6a9, k as $507fabe10e71c6fb$export$b9b3dfddab17db27 } from "./import-3faba3a6.mjs";
26
+ function $326e436e94273fe1$export$1c4b08e0eca38426(props, state) {
27
+ let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
28
+ labelable: true
29
+ });
30
+ let { hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({
31
+ onHoverStart: () => {
32
+ return state === null || state === void 0 ? void 0 : state.open(true);
33
+ },
34
+ onHoverEnd: () => {
35
+ return state === null || state === void 0 ? void 0 : state.close();
36
+ }
37
+ });
38
+ return {
39
+ tooltipProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, hoverProps, {
40
+ role: "tooltip"
41
+ })
42
+ };
43
+ }
44
+ function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
45
+ let { isDisabled, trigger } = props;
46
+ let tooltipId = $bdb11010cef70236$export$f680877a34711e37();
47
+ let isHovered = useRef(false);
48
+ let isFocused = useRef(false);
49
+ let handleShow = () => {
50
+ if (isHovered.current || isFocused.current)
51
+ state.open(isFocused.current);
52
+ };
53
+ let handleHide = (immediate) => {
54
+ if (!isHovered.current && !isFocused.current)
55
+ state.close(immediate);
56
+ };
57
+ useEffect(() => {
58
+ let onKeyDown = (e) => {
59
+ if (ref && ref.current) {
60
+ if (e.key === "Escape") {
61
+ e.stopPropagation();
62
+ state.close(true);
63
+ }
64
+ }
65
+ };
66
+ if (state.isOpen) {
67
+ document.addEventListener("keydown", onKeyDown, true);
68
+ return () => {
69
+ document.removeEventListener("keydown", onKeyDown, true);
70
+ };
71
+ }
72
+ }, [
73
+ ref,
74
+ state
75
+ ]);
76
+ let onHoverStart = () => {
77
+ if (trigger === "focus")
78
+ return;
79
+ if ($507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer")
80
+ isHovered.current = true;
81
+ else
82
+ isHovered.current = false;
83
+ handleShow();
84
+ };
85
+ let onHoverEnd = () => {
86
+ if (trigger === "focus")
87
+ return;
88
+ isFocused.current = false;
89
+ isHovered.current = false;
90
+ handleHide();
91
+ };
92
+ let onPressStart = () => {
93
+ isFocused.current = false;
94
+ isHovered.current = false;
95
+ handleHide(true);
96
+ };
97
+ let onFocus = () => {
98
+ let isVisible = $507fabe10e71c6fb$export$b9b3dfddab17db27();
99
+ if (isVisible) {
100
+ isFocused.current = true;
101
+ handleShow();
102
+ }
103
+ };
104
+ let onBlur = () => {
105
+ isFocused.current = false;
106
+ isHovered.current = false;
107
+ handleHide(true);
108
+ };
109
+ let { hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({
110
+ isDisabled,
111
+ onHoverStart,
112
+ onHoverEnd
113
+ });
114
+ let { pressProps } = $f6c31cce2adf654f$export$45712eceda6fad21({
115
+ onPressStart
116
+ });
117
+ let { focusableProps } = $e6afbd83fe6ebbd2$export$4c014de7c8940b4c({
118
+ isDisabled,
119
+ onFocus,
120
+ onBlur
121
+ }, ref);
122
+ return {
123
+ triggerProps: __spreadValues({
124
+ "aria-describedby": state.isOpen ? tooltipId : void 0
125
+ }, $3ef42575df84b30b$export$9d1611c77c2fe928(focusableProps, hoverProps, pressProps)),
126
+ tooltipProps: {
127
+ id: tooltipId
128
+ }
129
+ };
130
+ }
131
+ const $8796f90736e175cb$var$TOOLTIP_DELAY = 1500;
132
+ const $8796f90736e175cb$var$TOOLTIP_COOLDOWN = 500;
133
+ let $8796f90736e175cb$var$tooltips = {};
134
+ let $8796f90736e175cb$var$tooltipId = 0;
135
+ let $8796f90736e175cb$var$globalWarmedUp = false;
136
+ let $8796f90736e175cb$var$globalWarmUpTimeout = null;
137
+ let $8796f90736e175cb$var$globalCooldownTimeout = null;
138
+ function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
139
+ let { delay = $8796f90736e175cb$var$TOOLTIP_DELAY, closeDelay = $8796f90736e175cb$var$TOOLTIP_COOLDOWN } = props;
140
+ let { isOpen, open, close } = $fc909762b330b746$export$61c6a8c84e605fb6(props);
141
+ let id = useMemo(() => `${++$8796f90736e175cb$var$tooltipId}`, []);
142
+ let closeTimeout = useRef();
143
+ let ensureTooltipEntry = () => {
144
+ $8796f90736e175cb$var$tooltips[id] = hideTooltip;
145
+ };
146
+ let closeOpenTooltips = () => {
147
+ for (let hideTooltipId in $8796f90736e175cb$var$tooltips)
148
+ if (hideTooltipId !== id) {
149
+ $8796f90736e175cb$var$tooltips[hideTooltipId](true);
150
+ delete $8796f90736e175cb$var$tooltips[hideTooltipId];
151
+ }
152
+ };
153
+ let showTooltip = () => {
154
+ clearTimeout(closeTimeout.current);
155
+ closeTimeout.current = null;
156
+ closeOpenTooltips();
157
+ ensureTooltipEntry();
158
+ $8796f90736e175cb$var$globalWarmedUp = true;
159
+ open();
160
+ if ($8796f90736e175cb$var$globalWarmUpTimeout) {
161
+ clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
162
+ $8796f90736e175cb$var$globalWarmUpTimeout = null;
163
+ }
164
+ if ($8796f90736e175cb$var$globalCooldownTimeout) {
165
+ clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
166
+ $8796f90736e175cb$var$globalCooldownTimeout = null;
167
+ }
168
+ };
169
+ let hideTooltip = (immediate) => {
170
+ if (immediate || closeDelay <= 0) {
171
+ clearTimeout(closeTimeout.current);
172
+ closeTimeout.current = null;
173
+ close();
174
+ } else if (!closeTimeout.current)
175
+ closeTimeout.current = setTimeout(() => {
176
+ closeTimeout.current = null;
177
+ close();
178
+ }, closeDelay);
179
+ if ($8796f90736e175cb$var$globalWarmUpTimeout) {
180
+ clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
181
+ $8796f90736e175cb$var$globalWarmUpTimeout = null;
182
+ }
183
+ if ($8796f90736e175cb$var$globalWarmedUp) {
184
+ if ($8796f90736e175cb$var$globalCooldownTimeout)
185
+ clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
186
+ $8796f90736e175cb$var$globalCooldownTimeout = setTimeout(() => {
187
+ delete $8796f90736e175cb$var$tooltips[id];
188
+ $8796f90736e175cb$var$globalCooldownTimeout = null;
189
+ $8796f90736e175cb$var$globalWarmedUp = false;
190
+ }, Math.max($8796f90736e175cb$var$TOOLTIP_COOLDOWN, closeDelay));
191
+ }
192
+ };
193
+ let warmupTooltip = () => {
194
+ closeOpenTooltips();
195
+ ensureTooltipEntry();
196
+ if (!isOpen && !$8796f90736e175cb$var$globalWarmUpTimeout && !$8796f90736e175cb$var$globalWarmedUp)
197
+ $8796f90736e175cb$var$globalWarmUpTimeout = setTimeout(() => {
198
+ $8796f90736e175cb$var$globalWarmUpTimeout = null;
199
+ $8796f90736e175cb$var$globalWarmedUp = true;
200
+ showTooltip();
201
+ }, delay);
202
+ else if (!isOpen)
203
+ showTooltip();
204
+ };
205
+ useEffect(() => {
206
+ return () => {
207
+ clearTimeout(closeTimeout.current);
208
+ let tooltip = $8796f90736e175cb$var$tooltips[id];
209
+ if (tooltip)
210
+ delete $8796f90736e175cb$var$tooltips[id];
211
+ };
212
+ }, [
213
+ id
214
+ ]);
215
+ return {
216
+ isOpen,
217
+ open: (immediate) => {
218
+ if (!immediate && delay > 0 && !closeTimeout.current)
219
+ warmupTooltip();
220
+ else
221
+ showTooltip();
222
+ },
223
+ close: hideTooltip
224
+ };
225
+ }
226
+ const Tooltip$1 = "_Tooltip_pckwe_5";
227
+ const text = "_text_pckwe_24";
228
+ const arrow = "_arrow_pckwe_30";
229
+ const top = "_top_pckwe_39";
230
+ const bottom = "_bottom_pckwe_40";
231
+ const left = "_left_pckwe_44";
232
+ const right = "_right_pckwe_45";
233
+ const styles = {
234
+ Tooltip: Tooltip$1,
235
+ text,
236
+ arrow,
237
+ top,
238
+ bottom,
239
+ left,
240
+ right
241
+ };
242
+ const CONTAINER_PADDING = 12;
243
+ const ARROW_BOUNDARY_OFFSET = 12;
244
+ const OFFSET = 12;
245
+ const DEFAULT_PLACEMENT = "top";
246
+ const OPEN_DELAY = 1e3;
247
+ const CLOSE_DELAY = 250;
248
+ function Tooltip(props) {
249
+ const { children, isImmediate } = props;
250
+ const triggerRef = React__default.useRef(null);
251
+ const triggerInputProps = __spreadProps(__spreadValues({}, props), {
252
+ delay: isImmediate ? 0 : OPEN_DELAY,
253
+ closeDelay: CLOSE_DELAY
254
+ });
255
+ const tooltipTriggerState = $8796f90736e175cb$export$4d40659c25ecb50b(triggerInputProps);
256
+ const { triggerProps, tooltipProps: tooltipPropsFromTrigger } = $4e1b34546679e357$export$a6da6c504e4bba8b(triggerInputProps, tooltipTriggerState, triggerRef);
257
+ return React__default.createElement(React__default.Fragment, null, React__default.cloneElement(children, __spreadProps(__spreadValues({}, $3ef42575df84b30b$export$9d1611c77c2fe928(triggerProps, children.props)), {
258
+ ref: triggerRef
259
+ })), tooltipTriggerState.isOpen && React__default.createElement($f57aed4a881a3485$export$b47c3594eab58386, null, React__default.createElement(TooltipInner, __spreadProps(__spreadValues({}, props), {
260
+ triggerRef,
261
+ tooltipPropsFromTrigger,
262
+ tooltipTriggerState
263
+ }))));
264
+ }
265
+ function TooltipInner(props) {
266
+ const { content, placement: targetPlacement = DEFAULT_PLACEMENT, triggerRef, tooltipTriggerState, tooltipPropsFromTrigger } = props;
267
+ const tooltipRef = React__default.useRef(null);
268
+ const { overlayProps, arrowProps, placement, updatePosition } = $2a41e45df1593e64$export$d39e1813b3bdd0e1({
269
+ arrowBoundaryOffset: ARROW_BOUNDARY_OFFSET,
270
+ containerPadding: CONTAINER_PADDING,
271
+ isOpen: tooltipTriggerState.isOpen,
272
+ offset: OFFSET,
273
+ overlayRef: tooltipRef,
274
+ placement: targetPlacement,
275
+ targetRef: triggerRef
276
+ });
277
+ const { tooltipProps: tooltipPropsFromTooltip } = $326e436e94273fe1$export$1c4b08e0eca38426($3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, props), tooltipTriggerState);
278
+ const tooltipProps = $3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, tooltipPropsFromTooltip, tooltipPropsFromTrigger);
279
+ const style = __spreadValues(__spreadValues({}, tooltipProps.style), getComponentToken("tooltip", "container_padding", `${pxToRem(CONTAINER_PADDING)}rem`));
280
+ useLayoutEffect(() => {
281
+ updatePosition();
282
+ }, [content, updatePosition]);
283
+ return React__default.createElement("span", __spreadProps(__spreadValues({
284
+ ref: tooltipRef
285
+ }, tooltipProps), {
286
+ className: classNames(styles.Tooltip, styles[placement]),
287
+ "data-placement": placement,
288
+ style
289
+ }), React__default.createElement("span", {
290
+ className: styles.text
291
+ }, React__default.createElement(Text, {
292
+ variant: "subtitle2"
293
+ }, content)), React__default.createElement("span", __spreadValues({
294
+ className: styles.arrow
295
+ }, arrowProps)));
296
+ }
297
+ export {
298
+ $8796f90736e175cb$export$4d40659c25ecb50b as $,
299
+ Tooltip as T
300
+ };