@plasmicpkgs/react-aria 0.0.117 → 0.0.119

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 (122) hide show
  1. package/dist/.tsbuildinfo +1 -1
  2. package/dist/contexts.d.ts +2 -1
  3. package/dist/react-aria.esm.js +128 -87
  4. package/dist/react-aria.esm.js.map +1 -1
  5. package/dist/react-aria.js +127 -86
  6. package/dist/react-aria.js.map +1 -1
  7. package/dist/utils.d.ts +5 -4
  8. package/package.json +2 -2
  9. package/skinny/contexts-5cb81c2f.esm.js.map +1 -1
  10. package/skinny/contexts-6d0cb2b1.cjs.js.map +1 -1
  11. package/skinny/contexts.d.ts +2 -1
  12. package/skinny/registerCheckboxGroup.cjs.js +11 -8
  13. package/skinny/registerCheckboxGroup.cjs.js.map +1 -1
  14. package/skinny/registerCheckboxGroup.esm.js +11 -8
  15. package/skinny/registerCheckboxGroup.esm.js.map +1 -1
  16. package/skinny/registerComboBox.cjs.js.map +1 -1
  17. package/skinny/registerComboBox.esm.js +1 -1
  18. package/skinny/registerComboBox.esm.js.map +1 -1
  19. package/skinny/registerDialogTrigger.cjs.js +17 -2
  20. package/skinny/registerDialogTrigger.cjs.js.map +1 -1
  21. package/skinny/registerDialogTrigger.esm.js +17 -2
  22. package/skinny/registerDialogTrigger.esm.js.map +1 -1
  23. package/skinny/registerInput.cjs.js +1 -1
  24. package/skinny/registerInput.cjs.js.map +1 -1
  25. package/skinny/registerInput.esm.js +2 -2
  26. package/skinny/registerInput.esm.js.map +1 -1
  27. package/skinny/{registerListBox-21dc99fa.esm.js → registerListBox-0f6ebcf0.esm.js} +2 -2
  28. package/skinny/{registerListBox-21dc99fa.esm.js.map → registerListBox-0f6ebcf0.esm.js.map} +1 -1
  29. package/skinny/registerListBox.esm.js +1 -1
  30. package/skinny/registerOverlayArrow.cjs.js +1 -1
  31. package/skinny/registerOverlayArrow.cjs.js.map +1 -1
  32. package/skinny/registerOverlayArrow.esm.js +2 -2
  33. package/skinny/registerOverlayArrow.esm.js.map +1 -1
  34. package/skinny/registerPopover.cjs.js.map +1 -1
  35. package/skinny/registerPopover.esm.js.map +1 -1
  36. package/skinny/registerRadioGroup.cjs.js +11 -8
  37. package/skinny/registerRadioGroup.cjs.js.map +1 -1
  38. package/skinny/registerRadioGroup.esm.js +11 -8
  39. package/skinny/registerRadioGroup.esm.js.map +1 -1
  40. package/skinny/registerSection.esm.js +1 -1
  41. package/skinny/registerSelect.cjs.js.map +1 -1
  42. package/skinny/registerSelect.esm.js +1 -1
  43. package/skinny/registerSelect.esm.js.map +1 -1
  44. package/skinny/registerSlider.cjs.js +17 -14
  45. package/skinny/registerSlider.cjs.js.map +1 -1
  46. package/skinny/registerSlider.esm.js +17 -14
  47. package/skinny/registerSlider.esm.js.map +1 -1
  48. package/skinny/registerTextArea.cjs.js +5 -2
  49. package/skinny/registerTextArea.cjs.js.map +1 -1
  50. package/skinny/registerTextArea.esm.js +6 -3
  51. package/skinny/registerTextArea.esm.js.map +1 -1
  52. package/skinny/registerTextField.cjs.js +28 -17
  53. package/skinny/registerTextField.cjs.js.map +1 -1
  54. package/skinny/registerTextField.esm.js +28 -17
  55. package/skinny/registerTextField.esm.js.map +1 -1
  56. package/skinny/registerTooltip.cjs.js +37 -34
  57. package/skinny/registerTooltip.cjs.js.map +1 -1
  58. package/skinny/registerTooltip.esm.js +37 -34
  59. package/skinny/registerTooltip.esm.js.map +1 -1
  60. package/skinny/utils-fc1ddd7c.cjs.js.map +1 -1
  61. package/skinny/utils-fd88ad47.esm.js.map +1 -1
  62. package/skinny/utils.d.ts +5 -4
  63. package/skinny/registerButton.stories.cjs.js +0 -163
  64. package/skinny/registerButton.stories.cjs.js.map +0 -1
  65. package/skinny/registerButton.stories.esm.js +0 -149
  66. package/skinny/registerButton.stories.esm.js.map +0 -1
  67. package/skinny/registerCheckboxGroup.stories.cjs.js +0 -121
  68. package/skinny/registerCheckboxGroup.stories.cjs.js.map +0 -1
  69. package/skinny/registerCheckboxGroup.stories.esm.js +0 -109
  70. package/skinny/registerCheckboxGroup.stories.esm.js.map +0 -1
  71. package/skinny/registerComboBox.stories.cjs.js +0 -244
  72. package/skinny/registerComboBox.stories.cjs.js.map +0 -1
  73. package/skinny/registerComboBox.stories.esm.js +0 -230
  74. package/skinny/registerComboBox.stories.esm.js.map +0 -1
  75. package/skinny/registerDialogTrigger.stories.cjs.js +0 -458
  76. package/skinny/registerDialogTrigger.stories.cjs.js.map +0 -1
  77. package/skinny/registerDialogTrigger.stories.esm.js +0 -441
  78. package/skinny/registerDialogTrigger.stories.esm.js.map +0 -1
  79. package/skinny/registerListbox.stories.cjs.js +0 -219
  80. package/skinny/registerListbox.stories.cjs.js.map +0 -1
  81. package/skinny/registerListbox.stories.esm.js +0 -206
  82. package/skinny/registerListbox.stories.esm.js.map +0 -1
  83. package/skinny/registerModal.stories.cjs.js +0 -194
  84. package/skinny/registerModal.stories.cjs.js.map +0 -1
  85. package/skinny/registerModal.stories.esm.js +0 -181
  86. package/skinny/registerModal.stories.esm.js.map +0 -1
  87. package/skinny/registerPopover.stories.cjs.js +0 -102
  88. package/skinny/registerPopover.stories.cjs.js.map +0 -1
  89. package/skinny/registerPopover.stories.esm.js +0 -92
  90. package/skinny/registerPopover.stories.esm.js.map +0 -1
  91. package/skinny/registerRadioGroup.stories.cjs.js +0 -120
  92. package/skinny/registerRadioGroup.stories.cjs.js.map +0 -1
  93. package/skinny/registerRadioGroup.stories.esm.js +0 -108
  94. package/skinny/registerRadioGroup.stories.esm.js.map +0 -1
  95. package/skinny/registerSelect.stories.cjs.js +0 -215
  96. package/skinny/registerSelect.stories.cjs.js.map +0 -1
  97. package/skinny/registerSelect.stories.esm.js +0 -202
  98. package/skinny/registerSelect.stories.esm.js.map +0 -1
  99. package/skinny/registerSlider.stories.cjs.js +0 -165
  100. package/skinny/registerSlider.stories.cjs.js.map +0 -1
  101. package/skinny/registerSlider.stories.esm.js +0 -151
  102. package/skinny/registerSlider.stories.esm.js.map +0 -1
  103. package/skinny/registerSwitch.stories.cjs.js +0 -162
  104. package/skinny/registerSwitch.stories.cjs.js.map +0 -1
  105. package/skinny/registerSwitch.stories.esm.js +0 -148
  106. package/skinny/registerSwitch.stories.esm.js.map +0 -1
  107. package/skinny/registerTextField-common-stories.cjs.js +0 -199
  108. package/skinny/registerTextField-common-stories.cjs.js.map +0 -1
  109. package/skinny/registerTextField-common-stories.esm.js +0 -185
  110. package/skinny/registerTextField-common-stories.esm.js.map +0 -1
  111. package/skinny/registerTextField-input.stories.cjs.js +0 -54
  112. package/skinny/registerTextField-input.stories.cjs.js.map +0 -1
  113. package/skinny/registerTextField-input.stories.esm.js +0 -37
  114. package/skinny/registerTextField-input.stories.esm.js.map +0 -1
  115. package/skinny/registerTextField-textarea.stories.cjs.js +0 -55
  116. package/skinny/registerTextField-textarea.stories.cjs.js.map +0 -1
  117. package/skinny/registerTextField-textarea.stories.esm.js +0 -39
  118. package/skinny/registerTextField-textarea.stories.esm.js.map +0 -1
  119. package/skinny/registerTooltip.stories.cjs.js +0 -616
  120. package/skinny/registerTooltip.stories.cjs.js.map +0 -1
  121. package/skinny/registerTooltip.stories.esm.js +0 -596
  122. package/skinny/registerTooltip.stories.esm.js.map +0 -1
@@ -1,616 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var host = require('@plasmicapp/host');
6
- var test = require('@storybook/test');
7
- var React = require('react');
8
- var registerButton = require('./registerButton.cjs.js');
9
- var registerTooltip = require('./registerTooltip.cjs.js');
10
- require('react-aria');
11
- require('react-aria-components');
12
- require('./common-45acb83c.cjs.js');
13
- require('./utils-fc1ddd7c.cjs.js');
14
- require('@plasmicapp/host/registerComponent');
15
- require('./variant-utils-0ad70db8.cjs.js');
16
- require('react-stately');
17
-
18
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
19
-
20
- var React__default = /*#__PURE__*/_interopDefault(React);
21
-
22
- var __defProp = Object.defineProperty;
23
- var __defProps = Object.defineProperties;
24
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
25
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
26
- var __hasOwnProp = Object.prototype.hasOwnProperty;
27
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
28
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
29
- var __spreadValues = (a, b) => {
30
- for (var prop in b || (b = {}))
31
- if (__hasOwnProp.call(b, prop))
32
- __defNormalProp(a, prop, b[prop]);
33
- if (__getOwnPropSymbols)
34
- for (var prop of __getOwnPropSymbols(b)) {
35
- if (__propIsEnum.call(b, prop))
36
- __defNormalProp(a, prop, b[prop]);
37
- }
38
- return a;
39
- };
40
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
41
- var __objRest = (source, exclude) => {
42
- var target = {};
43
- for (var prop in source)
44
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
45
- target[prop] = source[prop];
46
- if (source != null && __getOwnPropSymbols)
47
- for (var prop of __getOwnPropSymbols(source)) {
48
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
49
- target[prop] = source[prop];
50
- }
51
- return target;
52
- };
53
- const meta = {
54
- title: "Components/BaseTooltip",
55
- component: registerTooltip.BaseTooltip,
56
- args: {
57
- onOpenChange: test.fn(),
58
- children: /* @__PURE__ */ React__default.default.createElement("span", null, "Show tooltip"),
59
- // anything can be used as a trigger
60
- tooltipContent: /* @__PURE__ */ React__default.default.createElement("div", { "data-testid": "tooltip-content" }, "This is a tooltip"),
61
- trigger: void 0,
62
- // means that it triggers on both focus and hover
63
- delay: 0,
64
- closeDelay: 0
65
- }
66
- };
67
- const Basic = {
68
- play: async ({ canvasElement, args }) => {
69
- const canvas = test.within(canvasElement);
70
- const trigger = canvas.getByText("Show tooltip");
71
- await test.waitFor(
72
- () => test.expect(
73
- test.within(document.body).queryByTestId("tooltip-content")
74
- ).not.toBeInTheDocument()
75
- );
76
- await test.userEvent.hover(trigger);
77
- await test.waitFor(() => {
78
- var _a, _b;
79
- const tooltip = test.within(document.body).getByTestId("tooltip-content");
80
- const tooltipId = (_a = tooltip.parentElement) == null ? void 0 : _a.getAttribute("id");
81
- test.expect(tooltipId).toBeDefined();
82
- test.expect((_b = trigger.parentElement) == null ? void 0 : _b.getAttribute("aria-describedby")).toEqual(
83
- tooltipId
84
- );
85
- });
86
- test.expect(args.onOpenChange).toHaveBeenCalledWith(true);
87
- await test.userEvent.unhover(trigger);
88
- await test.waitFor(() => test.expect(args.onOpenChange).toHaveBeenCalledWith(false));
89
- test.expect(args.onOpenChange).toHaveBeenCalledTimes(2);
90
- await test.userEvent.tab();
91
- await test.expect(trigger).not.toHaveFocus();
92
- test.expect(args.onOpenChange).toHaveBeenCalledTimes(2);
93
- }
94
- };
95
- const AlwaysOpen = {
96
- args: {
97
- isOpen: true
98
- // Force tooltip to be open
99
- },
100
- play: async () => {
101
- await test.waitFor(
102
- () => test.expect(
103
- test.within(document.body).queryByTestId("tooltip-content")
104
- ).toBeInTheDocument()
105
- );
106
- }
107
- };
108
- const FocusTrigger = {
109
- args: {
110
- // TabIndex=0 makes it focusable
111
- children: /* @__PURE__ */ React__default.default.createElement("span", { tabIndex: 0 }, "Show tooltip")
112
- // anything can be used as a trigger
113
- },
114
- play: async ({ canvasElement, args }) => {
115
- const canvas = test.within(canvasElement);
116
- const trigger = canvas.getByText("Show tooltip");
117
- await test.waitFor(
118
- () => test.expect(
119
- test.within(document.body).queryByTestId("tooltip-content")
120
- ).not.toBeInTheDocument()
121
- );
122
- await test.userEvent.tab();
123
- await test.expect(trigger).toHaveFocus();
124
- await test.waitFor(
125
- () => test.expect(
126
- test.within(document.body).queryByTestId("tooltip-content")
127
- ).toBeInTheDocument()
128
- );
129
- test.expect(args.onOpenChange).toHaveBeenCalledWith(true);
130
- await test.userEvent.tab();
131
- await test.expect(trigger).not.toHaveFocus();
132
- await test.waitFor(() => test.expect(args.onOpenChange).toHaveBeenCalledWith(false));
133
- }
134
- };
135
- const CustomButton = (_a) => {
136
- var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
137
- return /* @__PURE__ */ React__default.default.createElement("div", __spreadProps(__spreadValues({}, props), { "data-testid": "trigger-wrapper" }), /* @__PURE__ */ React__default.default.createElement("span", { tabIndex: 0 }, children), /* @__PURE__ */ React__default.default.createElement("span", { tabIndex: 0 }, children));
138
- };
139
- const WithoutForwardRefTrigger = {
140
- args: {
141
- children: /* @__PURE__ */ React__default.default.createElement(CustomButton, null, "Show tooltip")
142
- },
143
- play: async ({ args, canvasElement }) => {
144
- const canvas = test.within(canvasElement);
145
- const triggerWrapper = canvas.getByTestId("trigger-wrapper");
146
- const innerFocusableButtons = canvas.getAllByText("Show tooltip");
147
- await test.waitFor(
148
- () => test.expect(
149
- test.within(document.body).queryByTestId("tooltip-content")
150
- ).not.toBeInTheDocument()
151
- );
152
- await test.expect(innerFocusableButtons[0]).not.toHaveFocus();
153
- await test.userEvent.tab();
154
- test.expect(innerFocusableButtons[0]).toHaveFocus();
155
- await test.waitFor(
156
- () => test.expect(
157
- test.within(document.body).queryByTestId("tooltip-content")
158
- ).toBeInTheDocument()
159
- );
160
- test.expect(args.onOpenChange).toHaveBeenCalledWith(true);
161
- await test.userEvent.tab();
162
- test.expect(innerFocusableButtons[0]).not.toHaveFocus();
163
- test.expect(innerFocusableButtons[1]).toHaveFocus();
164
- await test.waitFor(
165
- () => test.expect(
166
- test.within(document.body).queryByTestId("tooltip-content")
167
- ).toBeInTheDocument()
168
- );
169
- await test.userEvent.tab();
170
- test.expect(innerFocusableButtons[1]).not.toHaveFocus();
171
- test.expect(args.onOpenChange).toHaveBeenCalledWith(false);
172
- await test.waitFor(
173
- () => test.expect(
174
- test.within(document.body).queryByTestId("tooltip-content")
175
- ).not.toBeInTheDocument()
176
- );
177
- await test.userEvent.hover(triggerWrapper);
178
- await test.waitFor(
179
- () => test.expect(
180
- test.within(document.body).queryByTestId("tooltip-content")
181
- ).toBeInTheDocument()
182
- );
183
- test.expect(args.onOpenChange).toHaveBeenCalledWith(true);
184
- await test.userEvent.unhover(triggerWrapper);
185
- await test.waitFor(
186
- () => test.expect(
187
- test.within(document.body).queryByTestId("tooltip-content")
188
- ).not.toBeInTheDocument()
189
- );
190
- await test.waitFor(() => test.expect(args.onOpenChange).toHaveBeenCalledWith(false));
191
- }
192
- };
193
- const FocusTriggerOnly = {
194
- args: {
195
- trigger: "focus",
196
- children: /* @__PURE__ */ React__default.default.createElement("span", { tabIndex: 0 }, "Show tooltip")
197
- // anything can be used as a trigger
198
- },
199
- play: async ({ args, canvasElement }) => {
200
- const canvas = test.within(canvasElement);
201
- const trigger = canvas.getByText("Show tooltip");
202
- await test.waitFor(
203
- () => test.expect(
204
- test.within(document.body).queryByTestId("tooltip-content")
205
- ).not.toBeInTheDocument()
206
- );
207
- await test.userEvent.hover(trigger);
208
- await test.waitFor(
209
- () => test.expect(
210
- test.within(document.body).queryByTestId("tooltip-content")
211
- ).not.toBeInTheDocument()
212
- );
213
- test.expect(args.onOpenChange).not.toHaveBeenCalled();
214
- await test.userEvent.unhover(trigger);
215
- await test.userEvent.tab();
216
- await test.expect(trigger).toHaveFocus();
217
- await test.waitFor(
218
- () => test.expect(
219
- test.within(document.body).queryByTestId("tooltip-content")
220
- ).toBeInTheDocument()
221
- );
222
- test.expect(args.onOpenChange).toHaveBeenCalledWith(true);
223
- await test.userEvent.tab();
224
- await test.waitFor(() => test.expect(args.onOpenChange).toHaveBeenCalledWith(false));
225
- }
226
- };
227
- const TriggerWithEventHandlers = {
228
- parameters: {
229
- customOnFocus: test.fn()
230
- },
231
- render: (args, { parameters }) => /* @__PURE__ */ React__default.default.createElement(registerTooltip.BaseTooltip, __spreadValues({}, args), /* @__PURE__ */ React__default.default.createElement("button", { className: "custom-class", onFocus: parameters.customOnFocus }, "Show tooltip")),
232
- play: async ({ args, canvasElement, parameters }) => {
233
- const canvas = test.within(canvasElement);
234
- const trigger = canvas.getByText("Show tooltip");
235
- await test.expect(trigger).toHaveClass("custom-class");
236
- await test.waitFor(
237
- () => test.expect(
238
- test.within(document.body).queryByTestId("tooltip-content")
239
- ).not.toBeInTheDocument()
240
- );
241
- test.expect(parameters.customOnFocus).not.toHaveBeenCalled();
242
- await test.userEvent.tab();
243
- await test.expect(trigger).toHaveFocus();
244
- await test.waitFor(
245
- () => test.expect(
246
- test.within(document.body).queryByTestId("tooltip-content")
247
- ).toBeInTheDocument()
248
- );
249
- test.expect(parameters.customOnFocus).toHaveBeenCalled();
250
- test.expect(args.onOpenChange).toHaveBeenCalledWith(true);
251
- await test.userEvent.tab();
252
- await test.waitFor(() => test.expect(args.onOpenChange).toHaveBeenCalledWith(false));
253
- }
254
- };
255
- const Disabled = {
256
- args: {
257
- isDisabled: true
258
- },
259
- play: async ({ args, canvasElement }) => {
260
- const canvas = test.within(canvasElement);
261
- const trigger = canvas.getByText("Show tooltip");
262
- await test.waitFor(
263
- () => test.expect(
264
- test.within(document.body).queryByTestId("tooltip-content")
265
- ).not.toBeInTheDocument()
266
- );
267
- await test.userEvent.tab();
268
- await test.waitFor(
269
- () => test.expect(
270
- test.within(document.body).queryByTestId("tooltip-content")
271
- ).not.toBeInTheDocument()
272
- );
273
- test.expect(args.onOpenChange).not.toHaveBeenCalled();
274
- await test.userEvent.hover(trigger);
275
- }
276
- };
277
- const Controlled = {
278
- render: (_c) => {
279
- var _d = _c, { isOpen: _isOpen, onOpenChange } = _d, args = __objRest(_d, ["isOpen", "onOpenChange"]);
280
- const [open, setOpen] = React.useState(false);
281
- return /* @__PURE__ */ React__default.default.createElement(
282
- registerTooltip.BaseTooltip,
283
- __spreadProps(__spreadValues({}, args), {
284
- isOpen: open,
285
- onOpenChange: (newVal) => {
286
- setOpen(newVal);
287
- onOpenChange == null ? void 0 : onOpenChange(newVal);
288
- }
289
- })
290
- );
291
- },
292
- play: async ({ canvasElement }) => {
293
- const canvas = test.within(canvasElement);
294
- const trigger = canvas.getByText("Show tooltip");
295
- await test.waitFor(
296
- () => test.expect(
297
- test.within(document.body).queryByTestId("tooltip-content")
298
- ).not.toBeInTheDocument()
299
- );
300
- await test.userEvent.hover(trigger);
301
- await test.waitFor(
302
- () => test.expect(
303
- test.within(document.body).queryByTestId("tooltip-content")
304
- ).toBeInTheDocument()
305
- );
306
- await test.userEvent.unhover(trigger);
307
- await test.waitFor(
308
- () => test.expect(
309
- test.within(document.body).queryByTestId("tooltip-content")
310
- ).not.toBeInTheDocument()
311
- );
312
- }
313
- };
314
- const AriaButtonTrigger = {
315
- args: {
316
- children: /* @__PURE__ */ React__default.default.createElement(registerButton.BaseButton, null, "Show tooltip")
317
- // anything can be used as a trigger
318
- },
319
- play: async ({ args, canvasElement }) => {
320
- const canvas = test.within(canvasElement);
321
- const trigger = canvas.getByText("Show tooltip");
322
- await test.waitFor(
323
- () => test.expect(
324
- test.within(document.body).queryByTestId("tooltip-content")
325
- ).not.toBeInTheDocument()
326
- );
327
- await test.userEvent.hover(trigger);
328
- await test.waitFor(
329
- () => test.expect(
330
- test.within(document.body).queryByTestId("tooltip-content")
331
- ).toBeInTheDocument()
332
- );
333
- test.expect(args.onOpenChange).toHaveBeenCalledWith(true);
334
- test.expect(args.onOpenChange).toHaveBeenCalledTimes(1);
335
- await test.userEvent.unhover(trigger);
336
- await test.waitFor(
337
- () => test.expect(
338
- test.within(document.body).queryByTestId("tooltip-content")
339
- ).not.toBeInTheDocument()
340
- );
341
- test.expect(args.onOpenChange).toHaveBeenCalledWith(false);
342
- test.expect(args.onOpenChange).toHaveBeenCalledTimes(2);
343
- await test.expect(trigger).not.toHaveFocus();
344
- await test.userEvent.tab();
345
- test.expect(trigger).toHaveFocus();
346
- await test.waitFor(
347
- () => test.expect(
348
- test.within(document.body).queryByTestId("tooltip-content")
349
- ).toBeInTheDocument()
350
- );
351
- test.expect(args.onOpenChange).toHaveBeenCalledWith(true);
352
- test.expect(args.onOpenChange).toHaveBeenCalledTimes(3);
353
- await test.userEvent.tab();
354
- await test.expect(canvas.getByText("Show tooltip")).not.toHaveFocus();
355
- await test.waitFor(
356
- () => test.expect(
357
- test.within(document.body).queryByTestId("tooltip-content")
358
- ).not.toBeInTheDocument()
359
- );
360
- await test.waitFor(() => test.expect(args.onOpenChange).toHaveBeenCalledWith(false));
361
- test.expect(args.onOpenChange).toHaveBeenCalledTimes(4);
362
- }
363
- };
364
- const SelectedInCanvas = {
365
- render: (_e) => {
366
- var _f = _e, args = __objRest(_f, ["__plasmic_selection_prop__"]);
367
- const [selected, setSelected] = React.useState(false);
368
- const [selectedSlotName, setSelectedSlotName] = React.useState("");
369
- return (
370
- // Simulate Plasmic canvas envirnment
371
- /* @__PURE__ */ React__default.default.createElement(
372
- host.PlasmicCanvasContext.Provider,
373
- {
374
- value: {
375
- componentName: "test",
376
- globalVariants: {}
377
- }
378
- },
379
- /* @__PURE__ */ React__default.default.createElement(
380
- "style",
381
- {
382
- dangerouslySetInnerHTML: {
383
- __html: `
384
- .trigger {
385
- display: inline-block;
386
- }
387
- `
388
- }
389
- }
390
- ),
391
- /* @__PURE__ */ React__default.default.createElement(
392
- registerTooltip.BaseTooltip,
393
- __spreadProps(__spreadValues({}, args), {
394
- __plasmic_selection_prop__: {
395
- isSelected: selected,
396
- selectedSlotName
397
- },
398
- className: "trigger"
399
- })
400
- ),
401
- /* @__PURE__ */ React__default.default.createElement("button", { onClick: () => setSelected((prev) => !prev) }, "Toggle selection"),
402
- /* @__PURE__ */ React__default.default.createElement("button", { onClick: () => setSelectedSlotName("children") }, "Select trigger"),
403
- /* @__PURE__ */ React__default.default.createElement("button", { onClick: () => setSelectedSlotName("some other slot") }, "Select other slot")
404
- )
405
- );
406
- },
407
- play: async ({ canvasElement }) => {
408
- const canvas = test.within(canvasElement);
409
- const toggleSelectionBtn = canvas.getByText("Toggle selection");
410
- const triggerSelectionBtn = canvas.getByText("Select trigger");
411
- const otherSlotSelectionBtn = canvas.getByText("Select other slot");
412
- await test.waitFor(
413
- () => test.expect(
414
- test.within(document.body).queryByTestId("tooltip-content")
415
- ).not.toBeInTheDocument()
416
- );
417
- await test.userEvent.click(toggleSelectionBtn);
418
- await test.waitFor(
419
- () => test.expect(
420
- test.within(document.body).queryByTestId("tooltip-content")
421
- ).toBeInTheDocument()
422
- );
423
- await test.userEvent.click(triggerSelectionBtn);
424
- await test.waitFor(
425
- () => test.expect(
426
- test.within(document.body).queryByTestId("tooltip-content")
427
- ).not.toBeInTheDocument()
428
- );
429
- await test.userEvent.click(otherSlotSelectionBtn);
430
- await test.waitFor(
431
- () => test.expect(
432
- test.within(document.body).queryByTestId("tooltip-content")
433
- ).toBeInTheDocument()
434
- );
435
- await test.userEvent.click(toggleSelectionBtn);
436
- await test.waitFor(
437
- () => test.expect(
438
- test.within(document.body).queryByTestId("tooltip-content")
439
- ).not.toBeInTheDocument(),
440
- { timeout: 1100 }
441
- );
442
- }
443
- };
444
- const TooltipPositionInCanvas = {
445
- render: (args) => {
446
- const [className, setClassName] = React.useState("trigger");
447
- const [selected, setSelected] = React.useState(false);
448
- return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
449
- "style",
450
- {
451
- dangerouslySetInnerHTML: {
452
- __html: `
453
- .trigger {
454
- display: inline-block;
455
- }
456
- .trigger-right {
457
- position: absolute;
458
- right: 0;
459
- }
460
- `
461
- }
462
- }
463
- ), /* @__PURE__ */ React__default.default.createElement(
464
- host.PlasmicCanvasContext.Provider,
465
- {
466
- value: {
467
- componentName: "test",
468
- globalVariants: {}
469
- }
470
- },
471
- /* @__PURE__ */ React__default.default.createElement("button", { onClick: () => setClassName("trigger trigger-right") }, "Move right"),
472
- /* @__PURE__ */ React__default.default.createElement("button", { onClick: () => setClassName("trigger") }, "Move back"),
473
- /* @__PURE__ */ React__default.default.createElement("button", { onClick: () => setSelected((prev) => !prev) }, "Toggle selection"),
474
- /* @__PURE__ */ React__default.default.createElement(
475
- registerTooltip.BaseTooltip,
476
- __spreadProps(__spreadValues({}, args), {
477
- className,
478
- __plasmic_selection_prop__: {
479
- isSelected: selected
480
- }
481
- })
482
- )
483
- ));
484
- },
485
- play: async ({ canvasElement }) => {
486
- const canvas = test.within(canvasElement);
487
- const moveRightBtn = canvas.getByText("Move right");
488
- const moveBackBtn = canvas.getByText("Move back");
489
- const toggleSelectionBtn = canvas.getByText("Toggle selection");
490
- await test.waitFor(
491
- () => test.expect(
492
- test.within(document.body).queryByTestId("tooltip-content")
493
- ).not.toBeInTheDocument()
494
- );
495
- await test.userEvent.click(toggleSelectionBtn);
496
- const initialTooltipLeftPosition = await test.waitFor(() => {
497
- const tooltip = test.within(document.body).getByTestId("tooltip-content");
498
- return tooltip.getBoundingClientRect().left;
499
- });
500
- await test.userEvent.click(toggleSelectionBtn);
501
- await test.waitFor(
502
- () => test.expect(
503
- test.within(document.body).queryByTestId("tooltip-content")
504
- ).not.toBeInTheDocument()
505
- );
506
- await test.userEvent.click(moveRightBtn);
507
- await test.userEvent.click(toggleSelectionBtn);
508
- await test.waitFor(() => {
509
- const tooltip = test.within(document.body).getByTestId("tooltip-content");
510
- test.expect(initialTooltipLeftPosition).not.toEqual(
511
- tooltip.getBoundingClientRect().left
512
- );
513
- });
514
- await test.userEvent.click(toggleSelectionBtn);
515
- await test.waitFor(
516
- () => test.expect(
517
- test.within(document.body).queryByTestId("tooltip-content")
518
- ).not.toBeInTheDocument()
519
- );
520
- await test.userEvent.click(moveBackBtn);
521
- await test.userEvent.click(toggleSelectionBtn);
522
- await test.waitFor(() => {
523
- const tooltip = test.within(document.body).getByTestId("tooltip-content");
524
- test.expect(initialTooltipLeftPosition).toEqual(
525
- tooltip.getBoundingClientRect().left
526
- );
527
- });
528
- await test.userEvent.click(toggleSelectionBtn);
529
- await test.waitFor(
530
- () => test.expect(
531
- test.within(document.body).queryByTestId("tooltip-content")
532
- ).not.toBeInTheDocument()
533
- );
534
- }
535
- };
536
- const TooltipPositionInPreview = {
537
- render: (args) => {
538
- const [className, setClassName] = React.useState("trigger");
539
- return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
540
- "style",
541
- {
542
- dangerouslySetInnerHTML: {
543
- __html: `
544
- .trigger {
545
- display: inline-block;
546
- }
547
- .trigger-right {
548
- position: absolute;
549
- right: 0;
550
- }
551
- `
552
- }
553
- }
554
- ), /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("button", { onClick: () => setClassName("trigger trigger-right") }, "Move right"), /* @__PURE__ */ React__default.default.createElement("button", { onClick: () => setClassName("trigger") }, "Move back"), /* @__PURE__ */ React__default.default.createElement(registerTooltip.BaseTooltip, __spreadProps(__spreadValues({}, args), { className }))));
555
- },
556
- play: async ({ canvasElement }) => {
557
- const canvas = test.within(canvasElement);
558
- const trigger = canvas.getByText("Show tooltip");
559
- const moveRightBtn = canvas.getByText("Move right");
560
- const moveBackBtn = canvas.getByText("Move back");
561
- await test.userEvent.hover(trigger);
562
- const initialTooltipLeftPosition = await test.waitFor(() => {
563
- const tooltip = test.within(document.body).getByTestId("tooltip-content");
564
- return tooltip.getBoundingClientRect().left;
565
- });
566
- await test.userEvent.unhover(trigger);
567
- await test.waitFor(
568
- () => test.expect(
569
- test.within(document.body).queryByTestId("tooltip-content")
570
- ).not.toBeInTheDocument()
571
- );
572
- await test.userEvent.click(moveRightBtn);
573
- await test.userEvent.hover(trigger);
574
- await test.waitFor(() => {
575
- const tooltip = test.within(document.body).getByTestId("tooltip-content");
576
- test.expect(initialTooltipLeftPosition).not.toEqual(
577
- tooltip.getBoundingClientRect().left
578
- );
579
- });
580
- await test.userEvent.unhover(trigger);
581
- await test.waitFor(
582
- () => test.expect(
583
- test.within(document.body).queryByTestId("tooltip-content")
584
- ).not.toBeInTheDocument()
585
- );
586
- await test.userEvent.click(moveBackBtn);
587
- await test.userEvent.hover(trigger);
588
- await test.waitFor(() => {
589
- const tooltip = test.within(document.body).getByTestId("tooltip-content");
590
- test.expect(initialTooltipLeftPosition).toEqual(
591
- tooltip.getBoundingClientRect().left
592
- );
593
- });
594
- await test.userEvent.unhover(trigger);
595
- await test.waitFor(
596
- () => test.expect(
597
- test.within(document.body).queryByTestId("tooltip-content")
598
- ).not.toBeInTheDocument()
599
- );
600
- }
601
- };
602
-
603
- exports.AlwaysOpen = AlwaysOpen;
604
- exports.AriaButtonTrigger = AriaButtonTrigger;
605
- exports.Basic = Basic;
606
- exports.Controlled = Controlled;
607
- exports.Disabled = Disabled;
608
- exports.FocusTrigger = FocusTrigger;
609
- exports.FocusTriggerOnly = FocusTriggerOnly;
610
- exports.SelectedInCanvas = SelectedInCanvas;
611
- exports.TooltipPositionInCanvas = TooltipPositionInCanvas;
612
- exports.TooltipPositionInPreview = TooltipPositionInPreview;
613
- exports.TriggerWithEventHandlers = TriggerWithEventHandlers;
614
- exports.WithoutForwardRefTrigger = WithoutForwardRefTrigger;
615
- exports.default = meta;
616
- //# sourceMappingURL=registerTooltip.stories.cjs.js.map