@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
package/Toggle/index.mjs CHANGED
@@ -20,8 +20,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
20
  import React__default from "react";
21
21
  import { Text } from "../Text/index.mjs";
22
22
  import { classNames } from "../utilities/css.mjs";
23
- import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577, a as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../__chunks__/import-0561e1ba.mjs";
24
- import { e as $f7dceffc5ad7768b$export$4e328f61c538687f, f as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/import-3d962a94.mjs";
23
+ import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577, a as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../__chunks__/import-eb35a9b9.mjs";
24
+ import { e as $f7dceffc5ad7768b$export$4e328f61c538687f, f as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/import-3faba3a6.mjs";
25
25
  import { a as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/import-19bc38ac.mjs";
26
26
  import "../__chunks__/import-6a831ca1.mjs";
27
27
  function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
@@ -37,13 +37,13 @@ function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
37
37
  isReadOnly
38
38
  };
39
39
  }
40
- const Switch$1 = "_Switch_1au2a_5";
41
- const focusVisible = "_focusVisible_1au2a_13";
42
- const track = "_track_1au2a_25";
43
- const thumb = "_thumb_1au2a_29";
44
- const hovered = "_hovered_1au2a_33";
45
- const disabled = "_disabled_1au2a_33";
46
- const selected = "_selected_1au2a_37";
40
+ const Switch$1 = "_Switch_7blzy_5";
41
+ const focusVisible = "_focusVisible_7blzy_13";
42
+ const track = "_track_7blzy_25";
43
+ const thumb = "_thumb_7blzy_29";
44
+ const hovered = "_hovered_7blzy_33";
45
+ const disabled = "_disabled_7blzy_33";
46
+ const selected = "_selected_7blzy_37";
47
47
  const styles$1 = {
48
48
  Switch: Switch$1,
49
49
  focusVisible,
@@ -76,9 +76,9 @@ function Switch(props) {
76
76
  r: 6
77
77
  })));
78
78
  }
79
- const Toggle$1 = "_Toggle_sl5qh_5";
80
- const text = "_text_sl5qh_24";
81
- const input = "_input_sl5qh_25";
79
+ const Toggle$1 = "_Toggle_1py8t_5";
80
+ const text = "_text_1py8t_25";
81
+ const input = "_input_1py8t_26";
82
82
  const styles = {
83
83
  Toggle: Toggle$1,
84
84
  text,
@@ -8,6 +8,7 @@ export declare const Placement: Story;
8
8
  export declare const Immediate: Story;
9
9
  export declare const Disabled: Story;
10
10
  export declare const FocusOnly: Story;
11
+ export declare const LongText: Story;
11
12
  export declare const ButtonTrigger: Story;
12
13
  export declare const Controls: Story;
13
14
  //# sourceMappingURL=Tooltip.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAQlD,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAC;AAElD,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAItC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAyB9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}
1
+ {"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAQlD,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAC;AAElD,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAItC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAyB9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}
package/Tooltip/index.js CHANGED
@@ -1,302 +1,13 @@
1
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
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
22
- const React = require("react");
23
- const Text_index = require("../Text/index.js");
24
- const utilities_css = require("../utilities/css.js");
25
- const _import$2 = require("../__chunks__/import-a2023d8f.js");
26
- const _import = require("../__chunks__/import-a1e0f814.js");
27
- const _import$1 = require("../__chunks__/import-2b302763.js");
3
+ const Tooltip_index = require("../__chunks__/index-12ba1ea7.js");
4
+ require("react");
5
+ require("../Text/index.js");
6
+ require("../utilities/css.js");
7
+ require("../__chunks__/import-0f8555a4.js");
8
+ require("../__chunks__/import-a1e0f814.js");
9
+ require("../__chunks__/import-26676303.js");
28
10
  require("react-dom");
29
11
  require("../__chunks__/import-dea5a24d.js");
30
12
  require("../__chunks__/real-module-e36b1436.js");
31
- function $326e436e94273fe1$export$1c4b08e0eca38426(props, state) {
32
- let domProps = _import.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
33
- labelable: true
34
- });
35
- let { hoverProps } = _import$1.$6179b936705e76d3$export$ae780daf29e6d456({
36
- onHoverStart: () => {
37
- return state === null || state === void 0 ? void 0 : state.open(true);
38
- },
39
- onHoverEnd: () => {
40
- return state === null || state === void 0 ? void 0 : state.close();
41
- }
42
- });
43
- return {
44
- tooltipProps: _import.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, hoverProps, {
45
- role: "tooltip"
46
- })
47
- };
48
- }
49
- function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
50
- let { isDisabled, trigger } = props;
51
- let tooltipId = _import.$bdb11010cef70236$export$f680877a34711e37();
52
- let isHovered = React.useRef(false);
53
- let isFocused = React.useRef(false);
54
- let handleShow = () => {
55
- if (isHovered.current || isFocused.current)
56
- state.open(isFocused.current);
57
- };
58
- let handleHide = (immediate) => {
59
- if (!isHovered.current && !isFocused.current)
60
- state.close(immediate);
61
- };
62
- React.useEffect(() => {
63
- let onKeyDown = (e) => {
64
- if (ref && ref.current) {
65
- if (e.key === "Escape") {
66
- e.stopPropagation();
67
- state.close(true);
68
- }
69
- }
70
- };
71
- if (state.isOpen) {
72
- document.addEventListener("keydown", onKeyDown, true);
73
- return () => {
74
- document.removeEventListener("keydown", onKeyDown, true);
75
- };
76
- }
77
- }, [
78
- ref,
79
- state
80
- ]);
81
- let onHoverStart = () => {
82
- if (trigger === "focus")
83
- return;
84
- if (_import$1.$507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer")
85
- isHovered.current = true;
86
- else
87
- isHovered.current = false;
88
- handleShow();
89
- };
90
- let onHoverEnd = () => {
91
- if (trigger === "focus")
92
- return;
93
- isFocused.current = false;
94
- isHovered.current = false;
95
- handleHide();
96
- };
97
- let onPressStart = () => {
98
- isFocused.current = false;
99
- isHovered.current = false;
100
- handleHide(true);
101
- };
102
- let onFocus = () => {
103
- let isVisible = _import$1.$507fabe10e71c6fb$export$b9b3dfddab17db27();
104
- if (isVisible) {
105
- isFocused.current = true;
106
- handleShow();
107
- }
108
- };
109
- let onBlur = () => {
110
- isFocused.current = false;
111
- isHovered.current = false;
112
- handleHide(true);
113
- };
114
- let { hoverProps } = _import$1.$6179b936705e76d3$export$ae780daf29e6d456({
115
- isDisabled,
116
- onHoverStart,
117
- onHoverEnd
118
- });
119
- let { pressProps } = _import$1.$f6c31cce2adf654f$export$45712eceda6fad21({
120
- onPressStart
121
- });
122
- let { focusableProps } = _import$1.$e6afbd83fe6ebbd2$export$4c014de7c8940b4c({
123
- isDisabled,
124
- onFocus,
125
- onBlur
126
- }, ref);
127
- return {
128
- triggerProps: __spreadValues({
129
- "aria-describedby": state.isOpen ? tooltipId : void 0
130
- }, _import.$3ef42575df84b30b$export$9d1611c77c2fe928(focusableProps, hoverProps, pressProps)),
131
- tooltipProps: {
132
- id: tooltipId
133
- }
134
- };
135
- }
136
- const $8796f90736e175cb$var$TOOLTIP_DELAY = 1500;
137
- const $8796f90736e175cb$var$TOOLTIP_COOLDOWN = 500;
138
- let $8796f90736e175cb$var$tooltips = {};
139
- let $8796f90736e175cb$var$tooltipId = 0;
140
- let $8796f90736e175cb$var$globalWarmedUp = false;
141
- let $8796f90736e175cb$var$globalWarmUpTimeout = null;
142
- let $8796f90736e175cb$var$globalCooldownTimeout = null;
143
- function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
144
- let { delay = $8796f90736e175cb$var$TOOLTIP_DELAY, closeDelay = $8796f90736e175cb$var$TOOLTIP_COOLDOWN } = props;
145
- let { isOpen, open, close } = _import$2.$fc909762b330b746$export$61c6a8c84e605fb6(props);
146
- let id = React.useMemo(() => `${++$8796f90736e175cb$var$tooltipId}`, []);
147
- let closeTimeout = React.useRef();
148
- let ensureTooltipEntry = () => {
149
- $8796f90736e175cb$var$tooltips[id] = hideTooltip;
150
- };
151
- let closeOpenTooltips = () => {
152
- for (let hideTooltipId in $8796f90736e175cb$var$tooltips)
153
- if (hideTooltipId !== id) {
154
- $8796f90736e175cb$var$tooltips[hideTooltipId](true);
155
- delete $8796f90736e175cb$var$tooltips[hideTooltipId];
156
- }
157
- };
158
- let showTooltip = () => {
159
- clearTimeout(closeTimeout.current);
160
- closeTimeout.current = null;
161
- closeOpenTooltips();
162
- ensureTooltipEntry();
163
- $8796f90736e175cb$var$globalWarmedUp = true;
164
- open();
165
- if ($8796f90736e175cb$var$globalWarmUpTimeout) {
166
- clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
167
- $8796f90736e175cb$var$globalWarmUpTimeout = null;
168
- }
169
- if ($8796f90736e175cb$var$globalCooldownTimeout) {
170
- clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
171
- $8796f90736e175cb$var$globalCooldownTimeout = null;
172
- }
173
- };
174
- let hideTooltip = (immediate) => {
175
- if (immediate || closeDelay <= 0) {
176
- clearTimeout(closeTimeout.current);
177
- closeTimeout.current = null;
178
- close();
179
- } else if (!closeTimeout.current)
180
- closeTimeout.current = setTimeout(() => {
181
- closeTimeout.current = null;
182
- close();
183
- }, closeDelay);
184
- if ($8796f90736e175cb$var$globalWarmUpTimeout) {
185
- clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
186
- $8796f90736e175cb$var$globalWarmUpTimeout = null;
187
- }
188
- if ($8796f90736e175cb$var$globalWarmedUp) {
189
- if ($8796f90736e175cb$var$globalCooldownTimeout)
190
- clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
191
- $8796f90736e175cb$var$globalCooldownTimeout = setTimeout(() => {
192
- delete $8796f90736e175cb$var$tooltips[id];
193
- $8796f90736e175cb$var$globalCooldownTimeout = null;
194
- $8796f90736e175cb$var$globalWarmedUp = false;
195
- }, Math.max($8796f90736e175cb$var$TOOLTIP_COOLDOWN, closeDelay));
196
- }
197
- };
198
- let warmupTooltip = () => {
199
- closeOpenTooltips();
200
- ensureTooltipEntry();
201
- if (!isOpen && !$8796f90736e175cb$var$globalWarmUpTimeout && !$8796f90736e175cb$var$globalWarmedUp)
202
- $8796f90736e175cb$var$globalWarmUpTimeout = setTimeout(() => {
203
- $8796f90736e175cb$var$globalWarmUpTimeout = null;
204
- $8796f90736e175cb$var$globalWarmedUp = true;
205
- showTooltip();
206
- }, delay);
207
- else if (!isOpen)
208
- showTooltip();
209
- };
210
- React.useEffect(() => {
211
- return () => {
212
- clearTimeout(closeTimeout.current);
213
- let tooltip = $8796f90736e175cb$var$tooltips[id];
214
- if (tooltip)
215
- delete $8796f90736e175cb$var$tooltips[id];
216
- };
217
- }, [
218
- id
219
- ]);
220
- return {
221
- isOpen,
222
- open: (immediate) => {
223
- if (!immediate && delay > 0 && !closeTimeout.current)
224
- warmupTooltip();
225
- else
226
- showTooltip();
227
- },
228
- close: hideTooltip
229
- };
230
- }
231
- const Tooltip$1 = "_Tooltip_1yly1_5";
232
- const text = "_text_1yly1_21";
233
- const arrow = "_arrow_1yly1_27";
234
- const top = "_top_1yly1_36";
235
- const bottom = "_bottom_1yly1_37";
236
- const left = "_left_1yly1_41";
237
- const right = "_right_1yly1_42";
238
- const styles = {
239
- Tooltip: Tooltip$1,
240
- text,
241
- arrow,
242
- top,
243
- bottom,
244
- left,
245
- right
246
- };
247
- const CONTAINER_PADDING = 12;
248
- const ARROW_BOUNDARY_OFFSET = 12;
249
- const OFFSET = 12;
250
- const DEFAULT_PLACEMENT = "top";
251
- const OPEN_DELAY = 1e3;
252
- const CLOSE_DELAY = 250;
253
- function Tooltip(props) {
254
- const { children, isImmediate } = props;
255
- const triggerRef = React.useRef(null);
256
- const triggerInputProps = __spreadProps(__spreadValues({}, props), {
257
- delay: isImmediate ? 0 : OPEN_DELAY,
258
- closeDelay: CLOSE_DELAY
259
- });
260
- const tooltipTriggerState = $8796f90736e175cb$export$4d40659c25ecb50b(triggerInputProps);
261
- const { triggerProps, tooltipProps: tooltipPropsFromTrigger } = $4e1b34546679e357$export$a6da6c504e4bba8b(triggerInputProps, tooltipTriggerState, triggerRef);
262
- return React.createElement(React.Fragment, null, React.cloneElement(children, __spreadProps(__spreadValues({}, _import.$3ef42575df84b30b$export$9d1611c77c2fe928(triggerProps, children.props)), {
263
- ref: triggerRef
264
- })), tooltipTriggerState.isOpen && React.createElement(_import$2.$f57aed4a881a3485$export$b47c3594eab58386, null, React.createElement(TooltipInner, __spreadProps(__spreadValues({}, props), {
265
- triggerRef,
266
- tooltipPropsFromTrigger,
267
- tooltipTriggerState
268
- }))));
269
- }
270
- function TooltipInner(props) {
271
- const { content, placement: targetPlacement = DEFAULT_PLACEMENT, triggerRef, tooltipTriggerState, tooltipPropsFromTrigger } = props;
272
- const tooltipRef = React.useRef(null);
273
- const { overlayProps, arrowProps, placement, updatePosition } = _import$2.$2a41e45df1593e64$export$d39e1813b3bdd0e1({
274
- arrowBoundaryOffset: ARROW_BOUNDARY_OFFSET,
275
- containerPadding: CONTAINER_PADDING,
276
- isOpen: tooltipTriggerState.isOpen,
277
- offset: OFFSET,
278
- overlayRef: tooltipRef,
279
- placement: targetPlacement,
280
- targetRef: triggerRef
281
- });
282
- const { tooltipProps: tooltipPropsFromTooltip } = $326e436e94273fe1$export$1c4b08e0eca38426(_import.$3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, props), tooltipTriggerState);
283
- const tooltipProps = _import.$3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, tooltipPropsFromTooltip, tooltipPropsFromTrigger);
284
- const style = __spreadValues(__spreadValues({}, tooltipProps.style), utilities_css.getComponentToken("tooltip", "container_padding", `${utilities_css.pxToRem(CONTAINER_PADDING)}rem`));
285
- React.useEffect(() => {
286
- updatePosition();
287
- }, [content, updatePosition]);
288
- return React.createElement("span", __spreadProps(__spreadValues({
289
- ref: tooltipRef
290
- }, tooltipProps), {
291
- className: utilities_css.classNames(styles.Tooltip, styles[placement]),
292
- "data-placement": placement,
293
- style
294
- }), React.createElement("span", {
295
- className: styles.text
296
- }, React.createElement(Text_index.Text, {
297
- variant: "subtitle2"
298
- }, content)), React.createElement("span", __spreadValues({
299
- className: styles.arrow
300
- }, arrowProps)));
301
- }
302
- exports.Tooltip = Tooltip;
13
+ exports.Tooltip = Tooltip_index.Tooltip;
package/Tooltip/index.mjs CHANGED
@@ -1,302 +1,13 @@
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 } 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, c as $f57aed4a881a3485$export$b47c3594eab58386, f as $2a41e45df1593e64$export$d39e1813b3bdd0e1 } from "../__chunks__/import-f1f4792a.mjs";
24
- import { d as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, a as $3ef42575df84b30b$export$9d1611c77c2fe928, b as $bdb11010cef70236$export$f680877a34711e37 } from "../__chunks__/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 "../__chunks__/import-3d962a94.mjs";
1
+ import { T } from "../__chunks__/index-766f8373.mjs";
2
+ import "react";
3
+ import "../Text/index.mjs";
4
+ import "../utilities/css.mjs";
5
+ import "../__chunks__/import-c4caaddf.mjs";
6
+ import "../__chunks__/import-19bc38ac.mjs";
7
+ import "../__chunks__/import-3faba3a6.mjs";
26
8
  import "react-dom";
27
9
  import "../__chunks__/import-6a831ca1.mjs";
28
10
  import "../__chunks__/real-module-515df21d.mjs";
29
- function $326e436e94273fe1$export$1c4b08e0eca38426(props, state) {
30
- let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
31
- labelable: true
32
- });
33
- let { hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({
34
- onHoverStart: () => {
35
- return state === null || state === void 0 ? void 0 : state.open(true);
36
- },
37
- onHoverEnd: () => {
38
- return state === null || state === void 0 ? void 0 : state.close();
39
- }
40
- });
41
- return {
42
- tooltipProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, hoverProps, {
43
- role: "tooltip"
44
- })
45
- };
46
- }
47
- function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
48
- let { isDisabled, trigger } = props;
49
- let tooltipId = $bdb11010cef70236$export$f680877a34711e37();
50
- let isHovered = useRef(false);
51
- let isFocused = useRef(false);
52
- let handleShow = () => {
53
- if (isHovered.current || isFocused.current)
54
- state.open(isFocused.current);
55
- };
56
- let handleHide = (immediate) => {
57
- if (!isHovered.current && !isFocused.current)
58
- state.close(immediate);
59
- };
60
- useEffect(() => {
61
- let onKeyDown = (e) => {
62
- if (ref && ref.current) {
63
- if (e.key === "Escape") {
64
- e.stopPropagation();
65
- state.close(true);
66
- }
67
- }
68
- };
69
- if (state.isOpen) {
70
- document.addEventListener("keydown", onKeyDown, true);
71
- return () => {
72
- document.removeEventListener("keydown", onKeyDown, true);
73
- };
74
- }
75
- }, [
76
- ref,
77
- state
78
- ]);
79
- let onHoverStart = () => {
80
- if (trigger === "focus")
81
- return;
82
- if ($507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer")
83
- isHovered.current = true;
84
- else
85
- isHovered.current = false;
86
- handleShow();
87
- };
88
- let onHoverEnd = () => {
89
- if (trigger === "focus")
90
- return;
91
- isFocused.current = false;
92
- isHovered.current = false;
93
- handleHide();
94
- };
95
- let onPressStart = () => {
96
- isFocused.current = false;
97
- isHovered.current = false;
98
- handleHide(true);
99
- };
100
- let onFocus = () => {
101
- let isVisible = $507fabe10e71c6fb$export$b9b3dfddab17db27();
102
- if (isVisible) {
103
- isFocused.current = true;
104
- handleShow();
105
- }
106
- };
107
- let onBlur = () => {
108
- isFocused.current = false;
109
- isHovered.current = false;
110
- handleHide(true);
111
- };
112
- let { hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({
113
- isDisabled,
114
- onHoverStart,
115
- onHoverEnd
116
- });
117
- let { pressProps } = $f6c31cce2adf654f$export$45712eceda6fad21({
118
- onPressStart
119
- });
120
- let { focusableProps } = $e6afbd83fe6ebbd2$export$4c014de7c8940b4c({
121
- isDisabled,
122
- onFocus,
123
- onBlur
124
- }, ref);
125
- return {
126
- triggerProps: __spreadValues({
127
- "aria-describedby": state.isOpen ? tooltipId : void 0
128
- }, $3ef42575df84b30b$export$9d1611c77c2fe928(focusableProps, hoverProps, pressProps)),
129
- tooltipProps: {
130
- id: tooltipId
131
- }
132
- };
133
- }
134
- const $8796f90736e175cb$var$TOOLTIP_DELAY = 1500;
135
- const $8796f90736e175cb$var$TOOLTIP_COOLDOWN = 500;
136
- let $8796f90736e175cb$var$tooltips = {};
137
- let $8796f90736e175cb$var$tooltipId = 0;
138
- let $8796f90736e175cb$var$globalWarmedUp = false;
139
- let $8796f90736e175cb$var$globalWarmUpTimeout = null;
140
- let $8796f90736e175cb$var$globalCooldownTimeout = null;
141
- function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
142
- let { delay = $8796f90736e175cb$var$TOOLTIP_DELAY, closeDelay = $8796f90736e175cb$var$TOOLTIP_COOLDOWN } = props;
143
- let { isOpen, open, close } = $fc909762b330b746$export$61c6a8c84e605fb6(props);
144
- let id = useMemo(() => `${++$8796f90736e175cb$var$tooltipId}`, []);
145
- let closeTimeout = useRef();
146
- let ensureTooltipEntry = () => {
147
- $8796f90736e175cb$var$tooltips[id] = hideTooltip;
148
- };
149
- let closeOpenTooltips = () => {
150
- for (let hideTooltipId in $8796f90736e175cb$var$tooltips)
151
- if (hideTooltipId !== id) {
152
- $8796f90736e175cb$var$tooltips[hideTooltipId](true);
153
- delete $8796f90736e175cb$var$tooltips[hideTooltipId];
154
- }
155
- };
156
- let showTooltip = () => {
157
- clearTimeout(closeTimeout.current);
158
- closeTimeout.current = null;
159
- closeOpenTooltips();
160
- ensureTooltipEntry();
161
- $8796f90736e175cb$var$globalWarmedUp = true;
162
- open();
163
- if ($8796f90736e175cb$var$globalWarmUpTimeout) {
164
- clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
165
- $8796f90736e175cb$var$globalWarmUpTimeout = null;
166
- }
167
- if ($8796f90736e175cb$var$globalCooldownTimeout) {
168
- clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
169
- $8796f90736e175cb$var$globalCooldownTimeout = null;
170
- }
171
- };
172
- let hideTooltip = (immediate) => {
173
- if (immediate || closeDelay <= 0) {
174
- clearTimeout(closeTimeout.current);
175
- closeTimeout.current = null;
176
- close();
177
- } else if (!closeTimeout.current)
178
- closeTimeout.current = setTimeout(() => {
179
- closeTimeout.current = null;
180
- close();
181
- }, closeDelay);
182
- if ($8796f90736e175cb$var$globalWarmUpTimeout) {
183
- clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
184
- $8796f90736e175cb$var$globalWarmUpTimeout = null;
185
- }
186
- if ($8796f90736e175cb$var$globalWarmedUp) {
187
- if ($8796f90736e175cb$var$globalCooldownTimeout)
188
- clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
189
- $8796f90736e175cb$var$globalCooldownTimeout = setTimeout(() => {
190
- delete $8796f90736e175cb$var$tooltips[id];
191
- $8796f90736e175cb$var$globalCooldownTimeout = null;
192
- $8796f90736e175cb$var$globalWarmedUp = false;
193
- }, Math.max($8796f90736e175cb$var$TOOLTIP_COOLDOWN, closeDelay));
194
- }
195
- };
196
- let warmupTooltip = () => {
197
- closeOpenTooltips();
198
- ensureTooltipEntry();
199
- if (!isOpen && !$8796f90736e175cb$var$globalWarmUpTimeout && !$8796f90736e175cb$var$globalWarmedUp)
200
- $8796f90736e175cb$var$globalWarmUpTimeout = setTimeout(() => {
201
- $8796f90736e175cb$var$globalWarmUpTimeout = null;
202
- $8796f90736e175cb$var$globalWarmedUp = true;
203
- showTooltip();
204
- }, delay);
205
- else if (!isOpen)
206
- showTooltip();
207
- };
208
- useEffect(() => {
209
- return () => {
210
- clearTimeout(closeTimeout.current);
211
- let tooltip = $8796f90736e175cb$var$tooltips[id];
212
- if (tooltip)
213
- delete $8796f90736e175cb$var$tooltips[id];
214
- };
215
- }, [
216
- id
217
- ]);
218
- return {
219
- isOpen,
220
- open: (immediate) => {
221
- if (!immediate && delay > 0 && !closeTimeout.current)
222
- warmupTooltip();
223
- else
224
- showTooltip();
225
- },
226
- close: hideTooltip
227
- };
228
- }
229
- const Tooltip$1 = "_Tooltip_1yly1_5";
230
- const text = "_text_1yly1_21";
231
- const arrow = "_arrow_1yly1_27";
232
- const top = "_top_1yly1_36";
233
- const bottom = "_bottom_1yly1_37";
234
- const left = "_left_1yly1_41";
235
- const right = "_right_1yly1_42";
236
- const styles = {
237
- Tooltip: Tooltip$1,
238
- text,
239
- arrow,
240
- top,
241
- bottom,
242
- left,
243
- right
244
- };
245
- const CONTAINER_PADDING = 12;
246
- const ARROW_BOUNDARY_OFFSET = 12;
247
- const OFFSET = 12;
248
- const DEFAULT_PLACEMENT = "top";
249
- const OPEN_DELAY = 1e3;
250
- const CLOSE_DELAY = 250;
251
- function Tooltip(props) {
252
- const { children, isImmediate } = props;
253
- const triggerRef = React__default.useRef(null);
254
- const triggerInputProps = __spreadProps(__spreadValues({}, props), {
255
- delay: isImmediate ? 0 : OPEN_DELAY,
256
- closeDelay: CLOSE_DELAY
257
- });
258
- const tooltipTriggerState = $8796f90736e175cb$export$4d40659c25ecb50b(triggerInputProps);
259
- const { triggerProps, tooltipProps: tooltipPropsFromTrigger } = $4e1b34546679e357$export$a6da6c504e4bba8b(triggerInputProps, tooltipTriggerState, triggerRef);
260
- return React__default.createElement(React__default.Fragment, null, React__default.cloneElement(children, __spreadProps(__spreadValues({}, $3ef42575df84b30b$export$9d1611c77c2fe928(triggerProps, children.props)), {
261
- ref: triggerRef
262
- })), tooltipTriggerState.isOpen && React__default.createElement($f57aed4a881a3485$export$b47c3594eab58386, null, React__default.createElement(TooltipInner, __spreadProps(__spreadValues({}, props), {
263
- triggerRef,
264
- tooltipPropsFromTrigger,
265
- tooltipTriggerState
266
- }))));
267
- }
268
- function TooltipInner(props) {
269
- const { content, placement: targetPlacement = DEFAULT_PLACEMENT, triggerRef, tooltipTriggerState, tooltipPropsFromTrigger } = props;
270
- const tooltipRef = React__default.useRef(null);
271
- const { overlayProps, arrowProps, placement, updatePosition } = $2a41e45df1593e64$export$d39e1813b3bdd0e1({
272
- arrowBoundaryOffset: ARROW_BOUNDARY_OFFSET,
273
- containerPadding: CONTAINER_PADDING,
274
- isOpen: tooltipTriggerState.isOpen,
275
- offset: OFFSET,
276
- overlayRef: tooltipRef,
277
- placement: targetPlacement,
278
- targetRef: triggerRef
279
- });
280
- const { tooltipProps: tooltipPropsFromTooltip } = $326e436e94273fe1$export$1c4b08e0eca38426($3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, props), tooltipTriggerState);
281
- const tooltipProps = $3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, tooltipPropsFromTooltip, tooltipPropsFromTrigger);
282
- const style = __spreadValues(__spreadValues({}, tooltipProps.style), getComponentToken("tooltip", "container_padding", `${pxToRem(CONTAINER_PADDING)}rem`));
283
- useEffect(() => {
284
- updatePosition();
285
- }, [content, updatePosition]);
286
- return React__default.createElement("span", __spreadProps(__spreadValues({
287
- ref: tooltipRef
288
- }, tooltipProps), {
289
- className: classNames(styles.Tooltip, styles[placement]),
290
- "data-placement": placement,
291
- style
292
- }), React__default.createElement("span", {
293
- className: styles.text
294
- }, React__default.createElement(Text, {
295
- variant: "subtitle2"
296
- }, content)), React__default.createElement("span", __spreadValues({
297
- className: styles.arrow
298
- }, arrowProps)));
299
- }
300
11
  export {
301
- Tooltip
12
+ T as Tooltip
302
13
  };
@@ -1,9 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const UnstyledButton_index = require("../__chunks__/index-3985350a.js");
3
+ const UnstyledButton_index = require("../__chunks__/index-5f429325.js");
4
4
  require("../__chunks__/import-a1e0f814.js");
5
5
  require("react");
6
6
  require("../utilities/css.js");
7
7
  require("../__chunks__/omit-fca26542.js");
8
- require("../__chunks__/import-2b302763.js");
8
+ require("../__chunks__/import-26676303.js");
9
9
  exports.UnstyledButton = UnstyledButton_index.UnstyledButton;