@plasmicpkgs/react-aria 0.0.118 → 0.0.120
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.tsbuildinfo +1 -1
- package/dist/contexts.d.ts +2 -1
- package/dist/react-aria.esm.js +13 -4
- package/dist/react-aria.esm.js.map +1 -1
- package/dist/react-aria.js +13 -4
- package/dist/react-aria.js.map +1 -1
- package/dist/utils.d.ts +5 -4
- package/package.json +2 -2
- package/skinny/contexts-5cb81c2f.esm.js.map +1 -1
- package/skinny/contexts-6d0cb2b1.cjs.js.map +1 -1
- package/skinny/contexts.d.ts +2 -1
- package/skinny/registerComboBox.esm.js +1 -1
- package/skinny/registerInput.cjs.js +1 -1
- package/skinny/registerInput.cjs.js.map +1 -1
- package/skinny/registerInput.esm.js +2 -2
- package/skinny/registerInput.esm.js.map +1 -1
- package/skinny/{registerListBox-21dc99fa.esm.js → registerListBox-0f6ebcf0.esm.js} +2 -2
- package/skinny/{registerListBox-21dc99fa.esm.js.map → registerListBox-0f6ebcf0.esm.js.map} +1 -1
- package/skinny/registerListBox.esm.js +1 -1
- package/skinny/registerSection.esm.js +1 -1
- package/skinny/registerSelect.esm.js +1 -1
- package/skinny/registerTextArea.cjs.js +5 -2
- package/skinny/registerTextArea.cjs.js.map +1 -1
- package/skinny/registerTextArea.esm.js +6 -3
- package/skinny/registerTextArea.esm.js.map +1 -1
- package/skinny/registerTextField.cjs.js +8 -2
- package/skinny/registerTextField.cjs.js.map +1 -1
- package/skinny/registerTextField.esm.js +8 -2
- package/skinny/registerTextField.esm.js.map +1 -1
- package/skinny/utils-fc1ddd7c.cjs.js.map +1 -1
- package/skinny/utils-fd88ad47.esm.js.map +1 -1
- package/skinny/utils.d.ts +5 -4
- package/skinny/registerButton.stories.cjs.js +0 -163
- package/skinny/registerButton.stories.cjs.js.map +0 -1
- package/skinny/registerButton.stories.esm.js +0 -149
- package/skinny/registerButton.stories.esm.js.map +0 -1
- package/skinny/registerCheckboxGroup.stories.cjs.js +0 -121
- package/skinny/registerCheckboxGroup.stories.cjs.js.map +0 -1
- package/skinny/registerCheckboxGroup.stories.esm.js +0 -109
- package/skinny/registerCheckboxGroup.stories.esm.js.map +0 -1
- package/skinny/registerComboBox.stories.cjs.js +0 -244
- package/skinny/registerComboBox.stories.cjs.js.map +0 -1
- package/skinny/registerComboBox.stories.esm.js +0 -230
- package/skinny/registerComboBox.stories.esm.js.map +0 -1
- package/skinny/registerDialogTrigger.stories.cjs.js +0 -458
- package/skinny/registerDialogTrigger.stories.cjs.js.map +0 -1
- package/skinny/registerDialogTrigger.stories.esm.js +0 -441
- package/skinny/registerDialogTrigger.stories.esm.js.map +0 -1
- package/skinny/registerListbox.stories.cjs.js +0 -219
- package/skinny/registerListbox.stories.cjs.js.map +0 -1
- package/skinny/registerListbox.stories.esm.js +0 -206
- package/skinny/registerListbox.stories.esm.js.map +0 -1
- package/skinny/registerModal.stories.cjs.js +0 -194
- package/skinny/registerModal.stories.cjs.js.map +0 -1
- package/skinny/registerModal.stories.esm.js +0 -181
- package/skinny/registerModal.stories.esm.js.map +0 -1
- package/skinny/registerPopover.stories.cjs.js +0 -102
- package/skinny/registerPopover.stories.cjs.js.map +0 -1
- package/skinny/registerPopover.stories.esm.js +0 -92
- package/skinny/registerPopover.stories.esm.js.map +0 -1
- package/skinny/registerRadioGroup.stories.cjs.js +0 -120
- package/skinny/registerRadioGroup.stories.cjs.js.map +0 -1
- package/skinny/registerRadioGroup.stories.esm.js +0 -108
- package/skinny/registerRadioGroup.stories.esm.js.map +0 -1
- package/skinny/registerSelect.stories.cjs.js +0 -215
- package/skinny/registerSelect.stories.cjs.js.map +0 -1
- package/skinny/registerSelect.stories.esm.js +0 -202
- package/skinny/registerSelect.stories.esm.js.map +0 -1
- package/skinny/registerSlider.stories.cjs.js +0 -165
- package/skinny/registerSlider.stories.cjs.js.map +0 -1
- package/skinny/registerSlider.stories.esm.js +0 -151
- package/skinny/registerSlider.stories.esm.js.map +0 -1
- package/skinny/registerSwitch.stories.cjs.js +0 -162
- package/skinny/registerSwitch.stories.cjs.js.map +0 -1
- package/skinny/registerSwitch.stories.esm.js +0 -148
- package/skinny/registerSwitch.stories.esm.js.map +0 -1
- package/skinny/registerTextField-common-stories.cjs.js +0 -199
- package/skinny/registerTextField-common-stories.cjs.js.map +0 -1
- package/skinny/registerTextField-common-stories.esm.js +0 -185
- package/skinny/registerTextField-common-stories.esm.js.map +0 -1
- package/skinny/registerTextField-input.stories.cjs.js +0 -54
- package/skinny/registerTextField-input.stories.cjs.js.map +0 -1
- package/skinny/registerTextField-input.stories.esm.js +0 -37
- package/skinny/registerTextField-input.stories.esm.js.map +0 -1
- package/skinny/registerTextField-textarea.stories.cjs.js +0 -55
- package/skinny/registerTextField-textarea.stories.cjs.js.map +0 -1
- package/skinny/registerTextField-textarea.stories.esm.js +0 -39
- package/skinny/registerTextField-textarea.stories.esm.js.map +0 -1
- package/skinny/registerTooltip.stories.cjs.js +0 -616
- package/skinny/registerTooltip.stories.cjs.js.map +0 -1
- package/skinny/registerTooltip.stories.esm.js +0 -596
- 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
|