Skip to content

Commit 6a86b5c

Browse files
LFDanLuLFDanLu
authored
chore: Revert "Revert "chore: add dnd hooks to rac (#8743)" (#8793)" (#8795)
* Revert "Revert "chore: add dnd hooks to rac (#8743)" (#8793)" This reverts commit 47b4d87. * update yarn lock * update snapshots * sigh auto update snapshot failed lint
1 parent ed4815e commit 6a86b5c

File tree

5 files changed

+237
-235
lines changed

5 files changed

+237
-235
lines changed

‎packages/@react-spectrum/s2/style/__tests__/style-macro.test.js‎

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -40,22 +40,22 @@ describe('style-macro', () => {
4040
"@layer _.a, _.b, _.c;
4141
4242
@layer _.b {
43-
.Jbs11:first-child {
43+
.Jbs111:first-child {
4444
margin-top: 0.25rem;
4545
}
4646
}
4747
4848
@layer _.c.p {
4949
@media (min-width: 64rem) {
50-
.Jbpv11:first-child {
50+
.Jbpv111:first-child {
5151
margin-top: 0.5rem;
5252
}
5353
}
5454
}
5555
5656
"
5757
`);
58-
expect(js).toMatchInlineSnapshot('" Jbs11 Jbpv11"');
58+
expect(js).toMatchInlineSnapshot('" Jbs111 Jbpv111"');
5959
});
6060

6161
it('should support self references', () => {
@@ -69,55 +69,55 @@ describe('style-macro', () => {
6969
"@layer _.a;
7070
7171
@layer _.a {
72-
._kc11 {
72+
._kc111 {
7373
border-top-width: 2px;
7474
}
7575
7676
77-
.hc11 {
77+
.hc111 {
7878
border-bottom-width: 2px;
7979
}
8080
8181
82-
.mCPFGYc11 {
82+
.mCPFGYc111 {
8383
border-inline-start-width: var(--m);
8484
}
8585
8686
87-
.lc11 {
87+
.lc111 {
8888
border-inline-end-width: 2px;
8989
}
9090
9191
92-
.SMBFGYc11 {
92+
.SMBFGYc111 {
9393
padding-inline-start: var(--S);
9494
}
9595
9696
97-
.Rv11 {
97+
.Rv111 {
9898
padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
9999
}
100100
101101
102-
.ZjUQgKd11 {
102+
.ZjUQgKd111 {
103103
width: calc(200px - var(--m) - var(--S));
104104
}
105105
106106
107-
.-m_-mc11 {
107+
.-m_-mc111 {
108108
--m: 2px;
109109
}
110110
111111
112-
.-S_-Sv11 {
112+
.-S_-Sv111 {
113113
--S: calc(var(--F, var(--M)) * 3 / 8);
114114
}
115115
}
116116
117117
"
118118
`);
119119

120-
expect(js).toMatchInlineSnapshot('" _kc11 hc11 mCPFGYc11 lc11 SMBFGYc11 Rv11 ZjUQgKd11 -m_-mc11 -S_-Sv11"');
120+
expect(js).toMatchInlineSnapshot('" _kc111 hc111 mCPFGYc111 lc111 SMBFGYc111 Rv111 ZjUQgKd111 -m_-mc111 -S_-Sv111"');
121121
});
122122

123123
it('should support allowed overrides', () => {
@@ -134,9 +134,9 @@ describe('style-macro', () => {
134134
color: 'green-400'
135135
});
136136

137-
expect(js()).toMatchInlineSnapshot('" gw11 pg11"');
138-
expect(overrides).toMatchInlineSnapshot('" g8tmWqb11 pHJ3AUd11"');
139-
expect(js({}, overrides)).toMatchInlineSnapshot('" g8tmWqb11 pg11"');
137+
expect(js()).toMatchInlineSnapshot('" gw111 pg111"');
138+
expect(overrides).toMatchInlineSnapshot('" g8tmWqb111 pHJ3AUd111"');
139+
expect(js({}, overrides)).toMatchInlineSnapshot('" g8tmWqb111 pg111"');
140140
});
141141

142142
it('should support allowed overrides for properties that expand into multiple', () => {
@@ -151,9 +151,9 @@ describe('style-macro', () => {
151151
translateX: 40
152152
});
153153

154-
expect(js()).toMatchInlineSnapshot('" -_7PloMd-B11 __Ya11"');
155-
expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D11 __Ya11"');
156-
expect(js({}, overrides)).toMatchInlineSnapshot('" -_7PloMd-D11 __Ya11"');
154+
expect(js()).toMatchInlineSnapshot('" -_7PloMd-B111 __Ya111"');
155+
expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D111 __Ya111"');
156+
expect(js({}, overrides)).toMatchInlineSnapshot('" -_7PloMd-D111 __Ya111"');
157157
});
158158

159159
it('should support allowed overrides for shorthands', () => {
@@ -168,9 +168,9 @@ describe('style-macro', () => {
168168
padding: 40
169169
});
170170

171-
expect(js()).toMatchInlineSnapshot('" Tk11 Qk11 Sk11 Rk11"');
172-
expect(overrides).toMatchInlineSnapshot('" Tm11 Qm11 Sm11 Rm11"');
173-
expect(js({}, overrides)).toMatchInlineSnapshot('" Tm11 Qm11 Sm11 Rm11"');
171+
expect(js()).toMatchInlineSnapshot('" Tk111 Qk111 Sk111 Rk111"');
172+
expect(overrides).toMatchInlineSnapshot('" Tm111 Qm111 Sm111 Rm111"');
173+
expect(js({}, overrides)).toMatchInlineSnapshot('" Tm111 Qm111 Sm111 Rm111"');
174174
});
175175

176176
it("should support allowed overrides for values that aren't defined", () => {
@@ -185,9 +185,9 @@ describe('style-macro', () => {
185185
minWidth: 32
186186
});
187187

188-
expect(js()).toMatchInlineSnapshot('" gE11"');
189-
expect(overrides).toMatchInlineSnapshot('" Nk11"');
190-
expect(js({}, overrides)).toMatchInlineSnapshot('" Nk11 gE11"');
188+
expect(js()).toMatchInlineSnapshot('" gE111"');
189+
expect(overrides).toMatchInlineSnapshot('" Nk111"');
190+
expect(js({}, overrides)).toMatchInlineSnapshot('" Nk111 gE111"');
191191
});
192192

193193
it('should support runtime conditions', () => {
@@ -208,42 +208,42 @@ describe('style-macro', () => {
208208
"@layer _.a;
209209
210210
@layer _.a {
211-
.gH11 {
211+
.gH111 {
212212
background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
213213
}
214214
215215
216-
.gF11 {
216+
.gF111 {
217217
background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
218218
}
219219
220220
221-
.gE11 {
221+
.gE111 {
222222
background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
223223
}
224224
225225
226-
.pt11 {
226+
.pt111 {
227227
color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
228228
}
229229
230230
231-
.po11 {
231+
.po111 {
232232
color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
233233
}
234234
235235
236-
.pm11 {
236+
.pm111 {
237237
color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
238238
}
239239
}
240240
241241
"
242242
`);
243243

244-
expect(js({})).toMatchInlineSnapshot('" gH11 pt11"');
245-
expect(js({isHovered: true})).toMatchInlineSnapshot('" gF11 po11"');
246-
expect(js({isPressed: true})).toMatchInlineSnapshot('" gE11 pm11"');
244+
expect(js({})).toMatchInlineSnapshot('" gH111 pt111"');
245+
expect(js({isHovered: true})).toMatchInlineSnapshot('" gF111 po111"');
246+
expect(js({isPressed: true})).toMatchInlineSnapshot('" gE111 pm111"');
247247
});
248248

249249
it('should support nested runtime conditions', () => {
@@ -262,32 +262,32 @@ describe('style-macro', () => {
262262
"@layer _.a;
263263
264264
@layer _.a {
265-
.gH11 {
265+
.gH111 {
266266
background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
267267
}
268268
269269
270-
.gF11 {
270+
.gF111 {
271271
background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
272272
}
273273
274274
275-
.g_h11 {
275+
.g_h111 {
276276
background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
277277
}
278278
279279
280-
.g311 {
280+
.g3111 {
281281
background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
282282
}
283283
}
284284
285285
"
286286
`);
287-
expect(js({})).toMatchInlineSnapshot('" gH11"');
288-
expect(js({isHovered: true})).toMatchInlineSnapshot('" gF11"');
289-
expect(js({isSelected: true})).toMatchInlineSnapshot('" g_h11"');
290-
expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('" g311"');
287+
expect(js({})).toMatchInlineSnapshot('" gH111"');
288+
expect(js({isHovered: true})).toMatchInlineSnapshot('" gF111"');
289+
expect(js({isSelected: true})).toMatchInlineSnapshot('" g_h111"');
290+
expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('" g3111"');
291291
});
292292

293293
it('should support variant runtime conditions', () => {
@@ -301,9 +301,9 @@ describe('style-macro', () => {
301301
}
302302
});
303303

304-
expect(js({variant: 'accent'})).toMatchInlineSnapshot('" gY11"');
305-
expect(js({variant: 'primary'})).toMatchInlineSnapshot('" gjQquMe11"');
306-
expect(js({variant: 'secondary'})).toMatchInlineSnapshot('" gw11"');
304+
expect(js({variant: 'accent'})).toMatchInlineSnapshot('" gY111"');
305+
expect(js({variant: 'primary'})).toMatchInlineSnapshot('" gjQquMe111"');
306+
expect(js({variant: 'secondary'})).toMatchInlineSnapshot('" gw111"');
307307
});
308308

309309
it('supports runtime conditions nested inside css conditions', () => {
@@ -321,14 +321,14 @@ describe('style-macro', () => {
321321
322322
@layer _.b.l {
323323
@media (forced-colors: active) {
324-
.plb11 {
324+
.plb111 {
325325
color: ButtonText;
326326
}
327327
}
328328
329329
330330
@media (forced-colors: active) {
331-
.ple11 {
331+
.ple111 {
332332
color: HighlightText;
333333
}
334334
}
@@ -337,36 +337,36 @@ describe('style-macro', () => {
337337
"
338338
`);
339339

340-
expect(js({})).toMatchInlineSnapshot('" plb11"');
341-
expect(js({isSelected: true})).toMatchInlineSnapshot('" ple11"');
340+
expect(js({})).toMatchInlineSnapshot('" plb111"');
341+
expect(js({isSelected: true})).toMatchInlineSnapshot('" ple111"');
342342
});
343343

344344
it('should expand shorthand properties to longhands', () => {
345345
let {js, css} = testStyle({
346346
padding: 24
347347
});
348348

349-
expect(js).toMatchInlineSnapshot('" Th11 Qh11 Sh11 Rh11"');
349+
expect(js).toMatchInlineSnapshot('" Th111 Qh111 Sh111 Rh111"');
350350
expect(css).toMatchInlineSnapshot(`
351351
"@layer _.a;
352352
353353
@layer _.a {
354-
.Th11 {
354+
.Th111 {
355355
padding-top: 24px;
356356
}
357357
358358
359-
.Qh11 {
359+
.Qh111 {
360360
padding-bottom: 24px;
361361
}
362362
363363
364-
.Sh11 {
364+
.Sh111 {
365365
padding-inline-start: 24px;
366366
}
367367
368368
369-
.Rh11 {
369+
.Rh111 {
370370
padding-inline-end: 24px;
371371
}
372372
}
@@ -384,7 +384,7 @@ describe('style-macro', () => {
384384
"@layer _.a;
385385
386386
@layer _.a {
387-
.gpQzfVb11 {
387+
.gpQzfVb111 {
388388
background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
389389
}
390390
}
@@ -405,7 +405,7 @@ describe('style-macro', () => {
405405
"@layer _.a;
406406
407407
@layer _.a {
408-
.-FUeYm-gE11 {
408+
.-FUeYm-gE111 {
409409
--foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
410410
}
411411
}

‎packages/react-aria-components/docs/DropZone.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ The `Draggable` component used above is defined below. See [useDrag](useDrag.htm
172172
<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
173173

174174
```tsx example render=false export=true
175-
import {useDrag} from '@react-aria/dnd';
175+
import {useDrag} from 'react-aria-components';
176176

177177
function Draggable() {
178178
let {dragProps, isDragging} = useDrag({

‎packages/react-aria-components/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export {ToggleButtonGroup, ToggleButtonGroupContext, ToggleGroupStateContext} fr
7676
export {Toolbar, ToolbarContext} from './Toolbar';
7777
export {TooltipTrigger, Tooltip, TooltipTriggerStateContext, TooltipContext} from './Tooltip';
7878
export {TreeLoadMoreItem, Tree, TreeItem, TreeContext, TreeItemContent, TreeStateContext} from './Tree';
79+
export {useDrag, useDrop} from '@react-aria/dnd';
7980
export {useDragAndDrop} from './useDragAndDrop';
8081
export {DropIndicator, DropIndicatorContext, DragAndDropContext} from './DragAndDrop';
8182
export {Virtualizer} from './Virtualizer';
@@ -139,6 +140,7 @@ export type {ToggleButtonGroupProps, ToggleButtonGroupRenderProps} from './Toggl
139140
export type {ToolbarProps, ToolbarRenderProps} from './Toolbar';
140141
export type {TooltipProps, TooltipRenderProps, TooltipTriggerComponentProps} from './Tooltip';
141142
export type {TreeProps, TreeRenderProps, TreeItemProps, TreeItemRenderProps, TreeItemContentProps, TreeItemContentRenderProps, TreeLoadMoreItemProps, TreeLoadMoreItemRenderProps} from './Tree';
143+
export type {DragOptions, DragResult} from '@react-aria/dnd';
142144
export type {DragAndDropHooks, DragAndDropOptions} from './useDragAndDrop';
143145
export type {DropIndicatorProps, DropIndicatorRenderProps} from './DragAndDrop';
144146
export type {ContextValue, RenderProps, SlotProps, StyleRenderProps} from './utils';

‎packages/react-aria-components/stories/Dropzone.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
*/
1212

1313
import {action} from '@storybook/addon-actions';
14-
import {Button, DropZone, FileTrigger, Link, Text} from 'react-aria-components';
14+
import {Button, DropZone, FileTrigger, Link, Text, useDrag} from 'react-aria-components';
1515
import {classNames} from '@react-spectrum/utils';
16-
import {FocusRing, mergeProps, useButton, useClipboard, useDrag} from 'react-aria';
16+
import {FocusRing, mergeProps, useButton, useClipboard} from 'react-aria';
1717
import {Meta, StoryFn, StoryObj} from '@storybook/react';
1818
import React, {useRef} from 'react';
1919
import styles from '../example/index.css';

0 commit comments

Comments
 (0)