@plasmicpkgs/react-aria 0.0.118 → 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 (92) hide show
  1. package/dist/.tsbuildinfo +1 -1
  2. package/dist/contexts.d.ts +2 -1
  3. package/dist/react-aria.esm.js +13 -4
  4. package/dist/react-aria.esm.js.map +1 -1
  5. package/dist/react-aria.js +13 -4
  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/registerComboBox.esm.js +1 -1
  13. package/skinny/registerInput.cjs.js +1 -1
  14. package/skinny/registerInput.cjs.js.map +1 -1
  15. package/skinny/registerInput.esm.js +2 -2
  16. package/skinny/registerInput.esm.js.map +1 -1
  17. package/skinny/{registerListBox-21dc99fa.esm.js → registerListBox-0f6ebcf0.esm.js} +2 -2
  18. package/skinny/{registerListBox-21dc99fa.esm.js.map → registerListBox-0f6ebcf0.esm.js.map} +1 -1
  19. package/skinny/registerListBox.esm.js +1 -1
  20. package/skinny/registerSection.esm.js +1 -1
  21. package/skinny/registerSelect.esm.js +1 -1
  22. package/skinny/registerTextArea.cjs.js +5 -2
  23. package/skinny/registerTextArea.cjs.js.map +1 -1
  24. package/skinny/registerTextArea.esm.js +6 -3
  25. package/skinny/registerTextArea.esm.js.map +1 -1
  26. package/skinny/registerTextField.cjs.js +8 -2
  27. package/skinny/registerTextField.cjs.js.map +1 -1
  28. package/skinny/registerTextField.esm.js +8 -2
  29. package/skinny/registerTextField.esm.js.map +1 -1
  30. package/skinny/utils-fc1ddd7c.cjs.js.map +1 -1
  31. package/skinny/utils-fd88ad47.esm.js.map +1 -1
  32. package/skinny/utils.d.ts +5 -4
  33. package/skinny/registerButton.stories.cjs.js +0 -163
  34. package/skinny/registerButton.stories.cjs.js.map +0 -1
  35. package/skinny/registerButton.stories.esm.js +0 -149
  36. package/skinny/registerButton.stories.esm.js.map +0 -1
  37. package/skinny/registerCheckboxGroup.stories.cjs.js +0 -121
  38. package/skinny/registerCheckboxGroup.stories.cjs.js.map +0 -1
  39. package/skinny/registerCheckboxGroup.stories.esm.js +0 -109
  40. package/skinny/registerCheckboxGroup.stories.esm.js.map +0 -1
  41. package/skinny/registerComboBox.stories.cjs.js +0 -244
  42. package/skinny/registerComboBox.stories.cjs.js.map +0 -1
  43. package/skinny/registerComboBox.stories.esm.js +0 -230
  44. package/skinny/registerComboBox.stories.esm.js.map +0 -1
  45. package/skinny/registerDialogTrigger.stories.cjs.js +0 -458
  46. package/skinny/registerDialogTrigger.stories.cjs.js.map +0 -1
  47. package/skinny/registerDialogTrigger.stories.esm.js +0 -441
  48. package/skinny/registerDialogTrigger.stories.esm.js.map +0 -1
  49. package/skinny/registerListbox.stories.cjs.js +0 -219
  50. package/skinny/registerListbox.stories.cjs.js.map +0 -1
  51. package/skinny/registerListbox.stories.esm.js +0 -206
  52. package/skinny/registerListbox.stories.esm.js.map +0 -1
  53. package/skinny/registerModal.stories.cjs.js +0 -194
  54. package/skinny/registerModal.stories.cjs.js.map +0 -1
  55. package/skinny/registerModal.stories.esm.js +0 -181
  56. package/skinny/registerModal.stories.esm.js.map +0 -1
  57. package/skinny/registerPopover.stories.cjs.js +0 -102
  58. package/skinny/registerPopover.stories.cjs.js.map +0 -1
  59. package/skinny/registerPopover.stories.esm.js +0 -92
  60. package/skinny/registerPopover.stories.esm.js.map +0 -1
  61. package/skinny/registerRadioGroup.stories.cjs.js +0 -120
  62. package/skinny/registerRadioGroup.stories.cjs.js.map +0 -1
  63. package/skinny/registerRadioGroup.stories.esm.js +0 -108
  64. package/skinny/registerRadioGroup.stories.esm.js.map +0 -1
  65. package/skinny/registerSelect.stories.cjs.js +0 -215
  66. package/skinny/registerSelect.stories.cjs.js.map +0 -1
  67. package/skinny/registerSelect.stories.esm.js +0 -202
  68. package/skinny/registerSelect.stories.esm.js.map +0 -1
  69. package/skinny/registerSlider.stories.cjs.js +0 -165
  70. package/skinny/registerSlider.stories.cjs.js.map +0 -1
  71. package/skinny/registerSlider.stories.esm.js +0 -151
  72. package/skinny/registerSlider.stories.esm.js.map +0 -1
  73. package/skinny/registerSwitch.stories.cjs.js +0 -162
  74. package/skinny/registerSwitch.stories.cjs.js.map +0 -1
  75. package/skinny/registerSwitch.stories.esm.js +0 -148
  76. package/skinny/registerSwitch.stories.esm.js.map +0 -1
  77. package/skinny/registerTextField-common-stories.cjs.js +0 -199
  78. package/skinny/registerTextField-common-stories.cjs.js.map +0 -1
  79. package/skinny/registerTextField-common-stories.esm.js +0 -185
  80. package/skinny/registerTextField-common-stories.esm.js.map +0 -1
  81. package/skinny/registerTextField-input.stories.cjs.js +0 -54
  82. package/skinny/registerTextField-input.stories.cjs.js.map +0 -1
  83. package/skinny/registerTextField-input.stories.esm.js +0 -37
  84. package/skinny/registerTextField-input.stories.esm.js.map +0 -1
  85. package/skinny/registerTextField-textarea.stories.cjs.js +0 -55
  86. package/skinny/registerTextField-textarea.stories.cjs.js.map +0 -1
  87. package/skinny/registerTextField-textarea.stories.esm.js +0 -39
  88. package/skinny/registerTextField-textarea.stories.esm.js.map +0 -1
  89. package/skinny/registerTooltip.stories.cjs.js +0 -616
  90. package/skinny/registerTooltip.stories.cjs.js.map +0 -1
  91. package/skinny/registerTooltip.stories.esm.js +0 -596
  92. 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