Skip to content

Commit 3a34dd1

Browse files
benoitgrelardbenoitgrelard
committed
Document latest Select changes
radix-ui/primitives#1459
1 parent 215a7d7 commit 3a34dd1

File tree

5 files changed

+302
-115
lines changed

5 files changed

+302
-115
lines changed

‎components/demos/Select.jsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,14 @@ const StyledViewport = styled(SelectPrimitive.Viewport, {
3939
padding: 5,
4040
});
4141

42+
function Content({ children, ...props }) {
43+
return (
44+
<SelectPrimitive.Portal>
45+
<StyledContent {...props}>{children}</StyledContent>
46+
</SelectPrimitive.Portal>
47+
);
48+
}
49+
4250
const StyledItem = styled(SelectPrimitive.Item, {
4351
all: 'unset',
4452
fontSize: 13,
@@ -104,7 +112,7 @@ export const Select = SelectPrimitive.Root;
104112
export const SelectTrigger = StyledTrigger;
105113
export const SelectValue = SelectPrimitive.Value;
106114
export const SelectIcon = StyledIcon;
107-
export const SelectContent = StyledContent;
115+
export const SelectContent = Content;
108116
export const SelectViewport = StyledViewport;
109117
export const SelectGroup = SelectPrimitive.Group;
110118
export const SelectItem = StyledItem;

‎data/primitives/components/select/0.1.2.mdx‎

Lines changed: 121 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -53,26 +53,28 @@ export default () => (
5353
<Select.Icon />
5454
</Select.Trigger>
5555

56-
<Select.Content>
57-
<Select.ScrollUpButton />
58-
<Select.Viewport>
59-
<Select.Item>
60-
<Select.ItemText />
61-
<Select.ItemIndicator />
62-
</Select.Item>
63-
64-
<Select.Group>
65-
<Select.Label />
56+
<Select.Portal>
57+
<Select.Content>
58+
<Select.ScrollUpButton />
59+
<Select.Viewport>
6660
<Select.Item>
6761
<Select.ItemText />
6862
<Select.ItemIndicator />
6963
</Select.Item>
70-
</Select.Group>
7164

72-
<Select.Separator />
73-
</Select.Viewport>
74-
<Select.ScrollDownButton />
75-
</Select.Content>
65+
<Select.Group>
66+
<Select.Label />
67+
<Select.Item>
68+
<Select.ItemText />
69+
<Select.ItemIndicator />
70+
</Select.Item>
71+
</Select.Group>
72+
73+
<Select.Separator />
74+
</Select.Viewport>
75+
<Select.ScrollDownButton />
76+
</Select.Content>
77+
</Select.Portal>
7678
</Select.Root>
7779
);
7880
```
@@ -220,6 +222,21 @@ A small icon often displayed next to the value as a visual affordance for the fa
220222
]}
221223
/>
222224

225+
### Portal
226+
227+
When used, portals the content part into the `body`.
228+
229+
<PropsTable
230+
data={[
231+
{
232+
name: 'container',
233+
type: 'HTMLElement',
234+
default: 'document.body',
235+
description: 'Specify a container element to portal the content into.',
236+
},
237+
]}
238+
/>
239+
223240
### Content
224241

225242
The component that pops out when the select is open.
@@ -462,7 +479,7 @@ Used to visually separate items in the select.
462479

463480
You can add special styles to disabled items via the `data-disabled` attribute.
464481

465-
```jsx line=4-6,13
482+
```jsx line=4-6,14
466483
import { styled } from '@stitches/react';
467484
import * as Select from '@radix-ui/react-select';
468485

@@ -473,13 +490,15 @@ const StyledItem = styled(Select.Item, {
473490
export default () => (
474491
<Select.Root>
475492
<Select.Trigger>…</Select.Trigger>
476-
<Select.Content>
477-
<Select.Viewport>
478-
<StyledItem __disabled__>…</StyledItem>
479-
<StyledItem>…</StyledItem>
480-
<StyledItem>…</StyledItem>
481-
</Select.Viewport>
482-
</Select.Content>
493+
<Select.Portal>
494+
<Select.Content>
495+
<Select.Viewport>
496+
<StyledItem __disabled__>…</StyledItem>
497+
<StyledItem>…</StyledItem>
498+
<StyledItem>…</StyledItem>
499+
</Select.Viewport>
500+
</Select.Content>
501+
</Select.Portal>
483502
</Select.Root>
484503
);
485504
```
@@ -502,7 +521,9 @@ export default () => (
502521
<Select.Value __placeholder__="Pick an option" />
503522
<Select.Icon />
504523
</SelectTrigger>
505-
<Select.Content>…</Select.Content>
524+
<Select.Portal>
525+
<Select.Content>…</Select.Content>
526+
</Select.Portal>
506527
</Select.Root>
507528
);
508529
```
@@ -511,47 +532,51 @@ export default () => (
511532

512533
Use the `Separator` part to add a separator between items.
513534

514-
```jsx line=8
535+
```jsx line=9
515536
<Select.Root>
516537
<Select.Trigger>…</Select.Trigger>
517-
<Select.Content>
518-
<Select.Viewport>
519-
<Select.Item>…</Select.Item>
520-
<Select.Item>…</Select.Item>
521-
<Select.Item>…</Select.Item>
522-
<Select.Separator />
523-
<Select.Item>…</Select.Item>
524-
<Select.Item>…</Select.Item>
525-
</Select.Viewport>
526-
</Select.Content>
538+
<Select.Portal>
539+
<Select.Content>
540+
<Select.Viewport>
541+
<Select.Item>…</Select.Item>
542+
<Select.Item>…</Select.Item>
543+
<Select.Item>…</Select.Item>
544+
<Select.Separator />
545+
<Select.Item>…</Select.Item>
546+
<Select.Item>…</Select.Item>
547+
</Select.Viewport>
548+
</Select.Content>
549+
</Select.Portal>
527550
</Select.Root>
528551
```
529552

530553
### With grouped items
531554

532555
Use the `Group` and `Label` parts to group items in a section.
533556

534-
```jsx line=5-6,10
557+
```jsx line=6-7,11
535558
<Select.Root>
536559
<Select.Trigger>…</Select.Trigger>
537-
<Select.Content>
538-
<Select.Viewport>
539-
<Select.Group>
540-
<Select.Label>Label</Select.Label>
541-
<Select.Item>…</Select.Item>
542-
<Select.Item>…</Select.Item>
543-
<Select.Item>…</Select.Item>
544-
</Select.Group>
545-
</Select.Viewport>
546-
</Select.Content>
560+
<Select.Portal>
561+
<Select.Content>
562+
<Select.Viewport>
563+
<Select.Group>
564+
<Select.Label>Label</Select.Label>
565+
<Select.Item>…</Select.Item>
566+
<Select.Item>…</Select.Item>
567+
<Select.Item>…</Select.Item>
568+
</Select.Group>
569+
</Select.Viewport>
570+
</Select.Content>
571+
</Select.Portal>
547572
</Select.Root>
548573
```
549574

550575
### With complex items
551576

552577
You can use custom content in your items.
553578

554-
```jsx line=4-7,16
579+
```jsx line=4-7,17
555580
import { styled } from '@stitches/react';
556581
import * as Select from '@radix-ui/react-select';
557582

@@ -563,19 +588,21 @@ const Image = styled('img', {
563588
export default () => (
564589
<Select.Root>
565590
<Select.Trigger>…</Select.Trigger>
566-
<Select.Content>
567-
<Select.Viewport>
568-
<Select.Item>
569-
<Select.ItemText>
570-
<Image src="…" />
571-
Adolfo Hess
572-
</Select.ItemText>
573-
<Select.ItemIndicator>…</Select.ItemIndicator>
574-
</Select.Item>
575-
<Select.Item>…</Select.Item>
576-
<Select.Item>…</Select.Item>
577-
</Select.Viewport>
578-
</Select.Content>
591+
<Select.Portal>
592+
<Select.Content>
593+
<Select.Viewport>
594+
<Select.Item>
595+
<Select.ItemText>
596+
<Image src="…" />
597+
Adolfo Hess
598+
</Select.ItemText>
599+
<Select.ItemIndicator>…</Select.ItemIndicator>
600+
</Select.Item>
601+
<Select.Item>…</Select.Item>
602+
<Select.Item>…</Select.Item>
603+
</Select.Viewport>
604+
</Select.Content>
605+
</Select.Portal>
579606
</Select.Root>
580607
);
581608
```
@@ -599,6 +626,7 @@ export default () => {
599626
</Select.Value>
600627
<Select.Icon />
601628
</Select.Trigger>
629+
<Select.Portal>
602630
<Select.Content>
603631
<Select.Viewport>
604632
<Select.Item value="france">
@@ -615,6 +643,7 @@ export default () => {
615643
</Select.Item>
616644
</Select.Viewport>
617645
</Select.Content>
646+
</Select.Portal>
618647
</Select.Root>
619648
);
620649
};
@@ -624,7 +653,7 @@ export default () => {
624653

625654
The native scrollbar is hidden by default as we recommend using the `ScrollUpButton` and `ScrollDownButton` parts for the best UX. If you do not want to use these parts, compose your select with our [Scroll Area](scroll-area) primitive.
626655

627-
```jsx line=5-8,10-13,15-18,20-23,29,31,35,37-40
656+
```jsx line=5-8,10-13,15-18,20-23,30,32,36,38-41
628657
import { styled } from '@stitches/react';
629658
import * as Select from '@radix-ui/react-select';
630659
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
@@ -652,20 +681,22 @@ const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb, {
652681
export default () => (
653682
<Select.Root>
654683
<Select.Trigger>…</Select.Trigger>
655-
<Select.Content>
656-
<ScrollArea type="auto">
657-
<Select.Viewport __asChild__>
658-
<ScrollAreaViewport>
659-
<StyledItem>…</StyledItem>
660-
<StyledItem>…</StyledItem>
661-
<StyledItem>…</StyledItem>
662-
</ScrollAreaViewport>
663-
</Select.Viewport>
664-
<ScrollAreaScrollbar orientation="vertical">
665-
<ScrollAreaThumb />
666-
</ScrollAreaScrollbar>
667-
</ScrollArea>
668-
</Select.Content>
684+
<Select.Portal>
685+
<Select.Content>
686+
<ScrollArea type="auto">
687+
<Select.Viewport __asChild__>
688+
<ScrollAreaViewport>
689+
<StyledItem>…</StyledItem>
690+
<StyledItem>…</StyledItem>
691+
<StyledItem>…</StyledItem>
692+
</ScrollAreaViewport>
693+
</Select.Viewport>
694+
<ScrollAreaScrollbar orientation="vertical">
695+
<ScrollAreaThumb />
696+
</ScrollAreaScrollbar>
697+
</ScrollArea>
698+
</Select.Content>
699+
</Select.Portal>
669700
</Select.Root>
670701
);
671702
```
@@ -752,7 +783,10 @@ export default () => (
752783

753784
<Label htmlFor="country">Country</Label>
754785
<Select.Root>
755-
<Select.Trigger __id__="country">…</Select.Trigger>…
786+
<Select.Trigger __id__="country">…</Select.Trigger>
787+
<Select.Portal>
788+
<Select.Content>…</Select.Content>
789+
</Select.Portal>
756790
</Select.Root>
757791
</>
758792
);
@@ -802,15 +836,17 @@ export const Select = React.forwardRef(
802836
<ChevronDownIcon />
803837
</SelectPrimitive.Icon>
804838
</SelectPrimitive.Trigger>
805-
<SelectPrimitive.Content>
806-
<SelectPrimitive.ScrollUpButton>
807-
<ChevronUpIcon />
808-
</SelectPrimitive.ScrollUpButton>
809-
<SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
810-
<SelectPrimitive.ScrollDownButton>
811-
<ChevronDownIcon />
812-
</SelectPrimitive.ScrollDownButton>
813-
</SelectPrimitive.Content>
839+
<SelectPrimitive.Portal>
840+
<SelectPrimitive.Content>
841+
<SelectPrimitive.ScrollUpButton>
842+
<ChevronUpIcon />
843+
</SelectPrimitive.ScrollUpButton>
844+
<SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
845+
<SelectPrimitive.ScrollDownButton>
846+
<ChevronDownIcon />
847+
</SelectPrimitive.ScrollDownButton>
848+
</SelectPrimitive.Content>
849+
</SelectPrimitive.Portal>
814850
</SelectPrimitive.Root>
815851
);
816852
}

‎data/primitives/overview/releases.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@ metaDescription: Radix Primitives releases and their changelogs.
7373
- [**Breaking**] Renamed `data-state` values from `active|inactive` to `checked|unchecked` <PRLink id={1388} />
7474
- Add support for placeholder via `placeholder` prop on `Select.Value` <PRLink id={1384} />
7575
- Resolve value mismatch with underlying native select <PRLink id={1421} />
76+
- [**Breaking**] Add new `Portal` part. To avoid regressions, use this part if you want portalling behavior. Note that `z-index` isn't managed anymore so you have full control of layering. <PRLink id={1459} />
77+
- Add pinch to zoom support via `allowPinchZoom` prop on `Select.Root` <PRLink id={1459} />
7678

7779
<PackageRelease name="Slot" version="0.1.3" />
7880

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"@radix-ui/react-progress": "0.1.5-rc.22",
3232
"@radix-ui/react-radio-group": "0.1.6-rc.29",
3333
"@radix-ui/react-scroll-area": "0.1.5-rc.25",
34-
"@radix-ui/react-select": "0.1.2-rc.36",
34+
"@radix-ui/react-select": "0.1.2-rc.45",
3535
"@radix-ui/react-separator": "0.1.5-rc.22",
3636
"@radix-ui/react-slider": "0.1.5-rc.25",
3737
"@radix-ui/react-slot": "0.1.3-rc.22",

0 commit comments

Comments
 (0)