@lumx/react 3.1.3 → 3.1.4-alpha-popover.0

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 (16) hide show
  1. package/index.d.ts +7 -3
  2. package/index.js +1736 -2134
  3. package/index.js.map +1 -1
  4. package/package.json +6 -6
  5. package/src/components/dropdown/Dropdown.tsx +2 -1
  6. package/src/components/popover/Popover.stories.tsx +46 -119
  7. package/src/components/popover/Popover.tsx +118 -278
  8. package/src/components/popover/__snapshots__/Popover.test.tsx.snap +143 -306
  9. package/src/components/popover/constants.ts +57 -0
  10. package/src/components/popover/index.ts +2 -0
  11. package/src/components/popover/usePopoverStyle.tsx +156 -0
  12. package/src/components/popover-dialog/PopoverDialog.stories.tsx +1 -1
  13. package/src/components/select/WithSelectContext.tsx +1 -1
  14. package/src/components/tooltip/Tooltip.stories.tsx +13 -11
  15. package/src/components/tooltip/Tooltip.tsx +54 -56
  16. package/src/utils/skipRenderHOC.tsx +16 -0
package/src/components/popover/__snapshots__/Popover.test.tsx.snap CHANGED
@@ -2,342 +2,179 @@
2
2
 
3
3
  exports[`<Popover> Snapshots and structure should render story 'Alignments' 1`] = `
4
4
  [
5
- <Portal
6
- containerInfo={<body />}
7
- >
8
- <div
9
- className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-top-start"
10
- style={
11
- {
12
- "left": "0",
13
- "position": "absolute",
14
- "top": "0",
15
- "zIndex": 9999,
16
- }
5
+ <ForwardRef
6
+ anchorRef={
7
+ {
8
+ "current": null,
17
9
  }
18
- >
19
- <ClickAwayProvider
20
- childrenRefs={
21
- {
22
- "current": [
23
- {
24
- "current": null,
25
- },
26
- {
27
- "current": null,
28
- },
29
- ],
30
- }
31
- }
32
- >
33
- Popover aligned on start of the top side
34
- </ClickAwayProvider>
35
- </div>
36
- </Portal>,
37
- <Portal
38
- containerInfo={<body />}
10
+ }
11
+ className="lumx-spacing-padding-huge"
12
+ elevation={3}
13
+ isOpen={true}
14
+ placement="top-start"
15
+ usePortal={true}
16
+ zIndex={9999}
39
17
  >
40
- <div
41
- className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-top-end"
42
- style={
43
- {
44
- "left": "0",
45
- "position": "absolute",
46
- "top": "0",
47
- "zIndex": 9999,
48
- }
18
+ Popover aligned on start of the top side
19
+ </ForwardRef>,
20
+ <ForwardRef
21
+ anchorRef={
22
+ {
23
+ "current": null,
49
24
  }
50
- >
51
- <ClickAwayProvider
52
- childrenRefs={
53
- {
54
- "current": [
55
- {
56
- "current": null,
57
- },
58
- {
59
- "current": null,
60
- },
61
- ],
62
- }
63
- }
64
- >
65
- Popover aligned on start of the top side
66
- </ClickAwayProvider>
67
- </div>
68
- </Portal>,
25
+ }
26
+ className="lumx-spacing-padding-huge"
27
+ elevation={3}
28
+ isOpen={true}
29
+ placement="top-end"
30
+ usePortal={true}
31
+ zIndex={9999}
32
+ >
33
+ Popover aligned on start of the top side
34
+ </ForwardRef>,
69
35
  ]
70
36
  `;
71
37
 
72
38
  exports[`<Popover> Snapshots and structure should render story 'Auto' 1`] = `
73
- <Portal
74
- containerInfo={<body />}
75
- >
76
- <div
77
- className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-auto"
78
- style={
79
- {
80
- "left": "0",
81
- "position": "absolute",
82
- "top": "0",
83
- "zIndex": 9999,
84
- }
39
+ <ForwardRef
40
+ anchorRef={
41
+ {
42
+ "current": null,
85
43
  }
86
- >
87
- <ClickAwayProvider
88
- childrenRefs={
89
- {
90
- "current": [
91
- {
92
- "current": null,
93
- },
94
- {
95
- "current": null,
96
- },
97
- ],
98
- }
99
- }
100
- >
101
- Popover
102
- </ClickAwayProvider>
103
- </div>
104
- </Portal>
44
+ }
45
+ className="lumx-spacing-padding-huge"
46
+ elevation={3}
47
+ isOpen={true}
48
+ placement="auto"
49
+ usePortal={true}
50
+ zIndex={9999}
51
+ >
52
+ Popover
53
+ </ForwardRef>
105
54
  `;
106
55
 
107
56
  exports[`<Popover> Snapshots and structure should render story 'Default' 1`] = `
108
- <Portal
109
- containerInfo={<body />}
110
- >
111
- <div
112
- className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-bottom"
113
- style={
114
- {
115
- "left": "0",
116
- "position": "absolute",
117
- "top": "0",
118
- "zIndex": 9999,
119
- }
57
+ <ForwardRef
58
+ anchorRef={
59
+ {
60
+ "current": null,
120
61
  }
121
- >
122
- <ClickAwayProvider
123
- childrenRefs={
124
- {
125
- "current": [
126
- {
127
- "current": null,
128
- },
129
- {
130
- "current": null,
131
- },
132
- ],
133
- }
134
- }
135
- >
136
- Popover
137
- </ClickAwayProvider>
138
- </div>
139
- </Portal>
62
+ }
63
+ className="lumx-spacing-padding-huge"
64
+ elevation={3}
65
+ isOpen={true}
66
+ placement="bottom"
67
+ usePortal={true}
68
+ zIndex={9999}
69
+ >
70
+ Popover
71
+ </ForwardRef>
140
72
  `;
141
73
 
142
74
  exports[`<Popover> Snapshots and structure should render story 'MatchingWidth' 1`] = `
143
- <Portal
144
- containerInfo={<body />}
145
- >
146
- <div
147
- className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-bottom-start"
148
- style={
149
- {
150
- "left": "0",
151
- "position": "absolute",
152
- "top": "0",
153
- "zIndex": 9999,
154
- }
75
+ <ForwardRef
76
+ anchorRef={
77
+ {
78
+ "current": null,
155
79
  }
156
- >
157
- <ClickAwayProvider
158
- childrenRefs={
159
- {
160
- "current": [
161
- {
162
- "current": null,
163
- },
164
- {
165
- "current": null,
166
- },
167
- ],
168
- }
169
- }
170
- >
171
- Popover's width matching anchor's
172
- </ClickAwayProvider>
173
- </div>
174
- </Portal>
80
+ }
81
+ className="lumx-spacing-padding-huge"
82
+ elevation={3}
83
+ fitToAnchorWidth={true}
84
+ isOpen={true}
85
+ placement="bottom-start"
86
+ usePortal={true}
87
+ zIndex={9999}
88
+ >
89
+ Popover's width matching anchor's
90
+ </ForwardRef>
175
91
  `;
176
92
 
177
93
  exports[`<Popover> Snapshots and structure should render story 'Offset' 1`] = `
178
- <Portal
179
- containerInfo={<body />}
180
- >
181
- <div
182
- className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-right"
183
- style={
184
- {
185
- "left": "0",
186
- "position": "absolute",
187
- "top": "0",
188
- "zIndex": 9999,
189
- }
94
+ <ForwardRef
95
+ anchorRef={
96
+ {
97
+ "current": null,
190
98
  }
191
- >
192
- <ClickAwayProvider
193
- childrenRefs={
194
- {
195
- "current": [
196
- {
197
- "current": null,
198
- },
199
- {
200
- "current": null,
201
- },
202
- ],
203
- }
204
- }
205
- >
206
- Popover
207
- </ClickAwayProvider>
208
- </div>
209
- </Portal>
99
+ }
100
+ className="lumx-spacing-padding-huge"
101
+ elevation={3}
102
+ isOpen={true}
103
+ offset={
104
+ {
105
+ "along": 60,
106
+ "away": 30,
107
+ }
108
+ }
109
+ placement="right"
110
+ usePortal={true}
111
+ zIndex={9999}
112
+ >
113
+ Popover
114
+ </ForwardRef>
210
115
  `;
211
116
 
212
117
  exports[`<Popover> Snapshots and structure should render story 'Positions' 1`] = `
213
118
  [
214
- <Portal
215
- containerInfo={<body />}
216
- >
217
- <div
218
- className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-left"
219
- style={
220
- {
221
- "left": "0",
222
- "position": "absolute",
223
- "top": "0",
224
- "zIndex": 9999,
225
- }
119
+ <ForwardRef
120
+ anchorRef={
121
+ {
122
+ "current": null,
226
123
  }
227
- >
228
- <ClickAwayProvider
229
- childrenRefs={
230
- {
231
- "current": [
232
- {
233
- "current": null,
234
- },
235
- {
236
- "current": null,
237
- },
238
- ],
239
- }
240
- }
241
- >
242
- Popover
243
- </ClickAwayProvider>
244
- </div>
245
- </Portal>,
246
- <Portal
247
- containerInfo={<body />}
124
+ }
125
+ className="lumx-spacing-padding-huge"
126
+ elevation={3}
127
+ isOpen={true}
128
+ placement="left"
129
+ usePortal={true}
130
+ zIndex={9999}
248
131
  >
249
- <div
250
- className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-top"
251
- style={
252
- {
253
- "left": "0",
254
- "position": "absolute",
255
- "top": "0",
256
- "zIndex": 9999,
257
- }
132
+ Popover
133
+ </ForwardRef>,
134
+ <ForwardRef
135
+ anchorRef={
136
+ {
137
+ "current": null,
258
138
  }
259
- >
260
- <ClickAwayProvider
261
- childrenRefs={
262
- {
263
- "current": [
264
- {
265
- "current": null,
266
- },
267
- {
268
- "current": null,
269
- },
270
- ],
271
- }
272
- }
273
- >
274
- Popover
275
- </ClickAwayProvider>
276
- </div>
277
- </Portal>,
278
- <Portal
279
- containerInfo={<body />}
139
+ }
140
+ className="lumx-spacing-padding-huge"
141
+ elevation={3}
142
+ isOpen={true}
143
+ placement="top"
144
+ usePortal={true}
145
+ zIndex={9999}
280
146
  >
281
- <div
282
- className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-bottom"
283
- style={
284
- {
285
- "left": "0",
286
- "position": "absolute",
287
- "top": "0",
288
- "zIndex": 9999,
289
- }
147
+ Popover
148
+ </ForwardRef>,
149
+ <ForwardRef
150
+ anchorRef={
151
+ {
152
+ "current": null,
290
153
  }
291
- >
292
- <ClickAwayProvider
293
- childrenRefs={
294
- {
295
- "current": [
296
- {
297
- "current": null,
298
- },
299
- {
300
- "current": null,
301
- },
302
- ],
303
- }
304
- }
305
- >
306
- Popover
307
- </ClickAwayProvider>
308
- </div>
309
- </Portal>,
310
- <Portal
311
- containerInfo={<body />}
154
+ }
155
+ className="lumx-spacing-padding-huge"
156
+ elevation={3}
157
+ isOpen={true}
158
+ placement="bottom"
159
+ usePortal={true}
160
+ zIndex={9999}
312
161
  >
313
- <div
314
- className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-right"
315
- style={
316
- {
317
- "left": "0",
318
- "position": "absolute",
319
- "top": "0",
320
- "zIndex": 9999,
321
- }
162
+ Popover
163
+ </ForwardRef>,
164
+ <ForwardRef
165
+ anchorRef={
166
+ {
167
+ "current": null,
322
168
  }
323
- >
324
- <ClickAwayProvider
325
- childrenRefs={
326
- {
327
- "current": [
328
- {
329
- "current": null,
330
- },
331
- {
332
- "current": null,
333
- },
334
- ],
335
- }
336
- }
337
- >
338
- Popover
339
- </ClickAwayProvider>
340
- </div>
341
- </Portal>,
169
+ }
170
+ className="lumx-spacing-padding-huge"
171
+ elevation={3}
172
+ isOpen={true}
173
+ placement="right"
174
+ usePortal={true}
175
+ zIndex={9999}
176
+ >
177
+ Popover
178
+ </ForwardRef>,
342
179
  ]
343
180
  `;
package/src/components/popover/constants.ts ADDED
@@ -0,0 +1,57 @@
1
+ import { ValueOf } from '@lumx/react/utils/type';
2
+
3
+ /**
4
+ * Different possible placements for the popover.
5
+ */
6
+ export const Placement = {
7
+ AUTO: 'auto',
8
+ AUTO_END: 'auto-end',
9
+ AUTO_START: 'auto-start',
10
+
11
+ TOP: 'top',
12
+ TOP_END: 'top-end',
13
+ TOP_START: 'top-start',
14
+
15
+ RIGHT: 'right',
16
+ RIGHT_END: 'right-end',
17
+ RIGHT_START: 'right-start',
18
+
19
+ BOTTOM: 'bottom',
20
+ BOTTOM_END: 'bottom-end',
21
+ BOTTOM_START: 'bottom-start',
22
+
23
+ LEFT: 'left',
24
+ LEFT_END: 'left-end',
25
+ LEFT_START: 'left-start',
26
+ } as const;
27
+ export type Placement = ValueOf<typeof Placement>;
28
+
29
+ /**
30
+ * Offset of the popover.
31
+ */
32
+ export interface Offset {
33
+ /** Offset size along the reference. */
34
+ along?: number;
35
+ /** Offset size away from the reference. */
36
+ away?: number;
37
+ }
38
+
39
+ /**
40
+ * Popover elevation index.
41
+ */
42
+ export type Elevation = 1 | 2 | 3 | 4 | 5;
43
+
44
+ /**
45
+ * Popover fit anchor width options.
46
+ */
47
+ export const FitAnchorWidth = {
48
+ MAX_WIDTH: 'maxWidth',
49
+ MIN_WIDTH: 'minWidth',
50
+ WIDTH: 'width',
51
+ } as const;
52
+ export type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
53
+
54
+ /**
55
+ * Arrow padding size (in pixel).
56
+ */
57
+ export const ARROW_PADDING_SIZE = 8;
package/src/components/popover/index.ts CHANGED
@@ -1 +1,3 @@
1
1
  export * from './Popover';
2
+ export type { Offset, Elevation } from './constants';
3
+ export { Placement } from './constants';