Document latest Select changes (#415)

* Document latest Select changes radix-ui/primitives#1459 * Add missing prop
radix-ui · Jun 10, 2022 · c575a23 · c575a23
1 parent 215a7d7
commit c575a23
Show file tree

Hide file tree

Showing 5 changed files with 327 additions and 115 deletions.
diff --git a/components/demos/Select.jsx b/components/demos/Select.jsx
@@ -39,6 +39,14 @@ const StyledViewport = styled(SelectPrimitive.Viewport, {
   padding: 5,
 });
 
+function Content({ children, ...props }) {
+  return (
+    <SelectPrimitive.Portal>
+      <StyledContent {...props}>{children}</StyledContent>
+    </SelectPrimitive.Portal>
+  );
+}
+
 const StyledItem = styled(SelectPrimitive.Item, {
   all: 'unset',
   fontSize: 13,
@@ -104,7 +112,7 @@ export const Select = SelectPrimitive.Root;
 export const SelectTrigger = StyledTrigger;
 export const SelectValue = SelectPrimitive.Value;
 export const SelectIcon = StyledIcon;
-export const SelectContent = StyledContent;
+export const SelectContent = Content;
 export const SelectViewport = StyledViewport;
 export const SelectGroup = SelectPrimitive.Group;
 export const SelectItem = StyledItem;

diff --git a/data/primitives/components/select/0.1.2.mdx b/data/primitives/components/select/0.1.2.mdx
@@ -53,26 +53,28 @@ export default () => (
       <Select.Icon />
     </Select.Trigger>
 
-    <Select.Content>
-      <Select.ScrollUpButton />
-      <Select.Viewport>
-        <Select.Item>
-          <Select.ItemText />
-          <Select.ItemIndicator />
-        </Select.Item>
-
-        <Select.Group>
-          <Select.Label />
+    <Select.Portal>
+      <Select.Content>
+        <Select.ScrollUpButton />
+        <Select.Viewport>
           <Select.Item>
             <Select.ItemText />
             <Select.ItemIndicator />
           </Select.Item>
-        </Select.Group>
 
-        <Select.Separator />
-      </Select.Viewport>
-      <Select.ScrollDownButton />
-    </Select.Content>
+          <Select.Group>
+            <Select.Label />
+            <Select.Item>
+              <Select.ItemText />
+              <Select.ItemIndicator />
+            </Select.Item>
+          </Select.Group>
+
+          <Select.Separator />
+        </Select.Viewport>
+        <Select.ScrollDownButton />
+      </Select.Content>
+    </Select.Portal>
   </Select.Root>
 );
 ```
@@ -155,6 +157,31 @@ Contains all the parts of a select.
       description:
         'The name of the select. Submitted with its owning form as part of a name/value pair.',
     },
+    {
+      name: 'allowPinchZoom',
+      required: false,
+      type: 'boolean',
+      default: 'false',
+      description: (
+        <span>
+          The <Code>allowPinchZoom</Code> prop from{' '}
+          <Link
+            variant="blue"
+            href="https://github.com/theKashey/react-remove-scroll"
+            target="_blank"
+          >
+            react-remove-scroll
+          </Link>
+          . See <Link
+            variant="blue"
+            href="https://github.com/theKashey/react-remove-scroll#usage"
+            target="_blank"
+          >
+            their docs
+          </Link> for information on functionality and limitations.
+        </span>
+      ),
+    },
   ]}
 />
 
@@ -220,6 +247,21 @@ A small icon often displayed next to the value as a visual affordance for the fa
   ]}
 />
 
+### Portal
+
+When used, portals the content part into the `body`.
+
+<PropsTable
+  data={[
+    {
+      name: 'container',
+      type: 'HTMLElement',
+      default: 'document.body',
+      description: 'Specify a container element to portal the content into.',
+    },
+  ]}
+/>
+
 ### Content
 
 The component that pops out when the select is open.
@@ -462,7 +504,7 @@ Used to visually separate items in the select.
 
 You can add special styles to disabled items via the `data-disabled` attribute.
 
-```jsx line=4-6,13
+```jsx line=4-6,14
 import { styled } from '@stitches/react';
 import * as Select from '@radix-ui/react-select';
 
@@ -473,13 +515,15 @@ const StyledItem = styled(Select.Item, {
 export default () => (
   <Select.Root>
     <Select.Trigger>…</Select.Trigger>
-    <Select.Content>
-      <Select.Viewport>
-        <StyledItem __disabled__>…</StyledItem>
-        <StyledItem>…</StyledItem>
-        <StyledItem>…</StyledItem>
-      </Select.Viewport>
-    </Select.Content>
+    <Select.Portal>
+      <Select.Content>
+        <Select.Viewport>
+          <StyledItem __disabled__>…</StyledItem>
+          <StyledItem>…</StyledItem>
+          <StyledItem>…</StyledItem>
+        </Select.Viewport>
+      </Select.Content>
+    </Select.Portal>
   </Select.Root>
 );
 ```
@@ -502,7 +546,9 @@ export default () => (
       <Select.Value __placeholder__="Pick an option" />
       <Select.Icon />
     </SelectTrigger>
-    <Select.Content>…</Select.Content>
+    <Select.Portal>
+      <Select.Content>…</Select.Content>
+    </Select.Portal>
   </Select.Root>
 );
 ```
@@ -511,47 +557,51 @@ export default () => (
 
 Use the `Separator` part to add a separator between items.
 
-```jsx line=8
+```jsx line=9
 <Select.Root>
   <Select.Trigger>…</Select.Trigger>
-  <Select.Content>
-    <Select.Viewport>
-      <Select.Item>…</Select.Item>
-      <Select.Item>…</Select.Item>
-      <Select.Item>…</Select.Item>
-      <Select.Separator />
-      <Select.Item>…</Select.Item>
-      <Select.Item>…</Select.Item>
-    </Select.Viewport>
-  </Select.Content>
+  <Select.Portal>
+    <Select.Content>
+      <Select.Viewport>
+        <Select.Item>…</Select.Item>
+        <Select.Item>…</Select.Item>
+        <Select.Item>…</Select.Item>
+        <Select.Separator />
+        <Select.Item>…</Select.Item>
+        <Select.Item>…</Select.Item>
+      </Select.Viewport>
+    </Select.Content>
+  </Select.Portal>
 </Select.Root>
 ```
 
 ### With grouped items
 
 Use the `Group` and `Label` parts to group items in a section.
 
-```jsx line=5-6,10
+```jsx line=6-7,11
 <Select.Root>
   <Select.Trigger>…</Select.Trigger>
-  <Select.Content>
-    <Select.Viewport>
-      <Select.Group>
-        <Select.Label>Label</Select.Label>
-        <Select.Item>…</Select.Item>
-        <Select.Item>…</Select.Item>
-        <Select.Item>…</Select.Item>
-      </Select.Group>
-    </Select.Viewport>
-  </Select.Content>
+  <Select.Portal>
+    <Select.Content>
+      <Select.Viewport>
+        <Select.Group>
+          <Select.Label>Label</Select.Label>
+          <Select.Item>…</Select.Item>
+          <Select.Item>…</Select.Item>
+          <Select.Item>…</Select.Item>
+        </Select.Group>
+      </Select.Viewport>
+    </Select.Content>
+  </Select.Portal>
 </Select.Root>
 ```
 
 ### With complex items
 
 You can use custom content in your items.
 
-```jsx line=4-7,16
+```jsx line=4-7,17
 import { styled } from '@stitches/react';
 import * as Select from '@radix-ui/react-select';
 
@@ -563,19 +613,21 @@ const Image = styled('img', {
 export default () => (
   <Select.Root>
     <Select.Trigger>…</Select.Trigger>
-    <Select.Content>
-      <Select.Viewport>
-        <Select.Item>
-          <Select.ItemText>
-            <Image src="…" />
-            Adolfo Hess
-          </Select.ItemText>
-          <Select.ItemIndicator>…</Select.ItemIndicator>
-        </Select.Item>
-        <Select.Item>…</Select.Item>
-        <Select.Item>…</Select.Item>
-      </Select.Viewport>
-    </Select.Content>
+    <Select.Portal>
+      <Select.Content>
+        <Select.Viewport>
+          <Select.Item>
+            <Select.ItemText>
+              <Image src="…" />
+              Adolfo Hess
+            </Select.ItemText>
+            <Select.ItemIndicator>…</Select.ItemIndicator>
+          </Select.Item>
+          <Select.Item>…</Select.Item>
+          <Select.Item>…</Select.Item>
+        </Select.Viewport>
+      </Select.Content>
+    </Select.Portal>
   </Select.Root>
 );
 ```
@@ -599,6 +651,7 @@ export default () => {
         </Select.Value>
         <Select.Icon />
       </Select.Trigger>
+      <Select.Portal>
       <Select.Content>
         <Select.Viewport>
           <Select.Item value="france">
@@ -615,6 +668,7 @@ export default () => {
           </Select.Item>
         </Select.Viewport>
       </Select.Content>
+      </Select.Portal>
     </Select.Root>
   );
 };
@@ -624,7 +678,7 @@ export default () => {
 
 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.
 
-```jsx line=5-8,10-13,15-18,20-23,29,31,35,37-40
+```jsx line=5-8,10-13,15-18,20-23,30,32,36,38-41
 import { styled } from '@stitches/react';
 import * as Select from '@radix-ui/react-select';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
@@ -652,20 +706,22 @@ const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb, {
 export default () => (
   <Select.Root>
     <Select.Trigger>…</Select.Trigger>
-    <Select.Content>
-      <ScrollArea type="auto">
-        <Select.Viewport __asChild__>
-          <ScrollAreaViewport>
-            <StyledItem>…</StyledItem>
-            <StyledItem>…</StyledItem>
-            <StyledItem>…</StyledItem>
-          </ScrollAreaViewport>
-        </Select.Viewport>
-        <ScrollAreaScrollbar orientation="vertical">
-          <ScrollAreaThumb />
-        </ScrollAreaScrollbar>
-      </ScrollArea>
-    </Select.Content>
+    <Select.Portal>
+      <Select.Content>
+        <ScrollArea type="auto">
+          <Select.Viewport __asChild__>
+            <ScrollAreaViewport>
+              <StyledItem>…</StyledItem>
+              <StyledItem>…</StyledItem>
+              <StyledItem>…</StyledItem>
+            </ScrollAreaViewport>
+          </Select.Viewport>
+          <ScrollAreaScrollbar orientation="vertical">
+            <ScrollAreaThumb />
+          </ScrollAreaScrollbar>
+        </ScrollArea>
+      </Select.Content>
+    </Select.Portal>
   </Select.Root>
 );
 ```
@@ -752,7 +808,10 @@ export default () => (
 
     <Label htmlFor="country">Country</Label>
     <Select.Root>
-      <Select.Trigger __id__="country">…</Select.Trigger>…
+      <Select.Trigger __id__="country">…</Select.Trigger>
+      <Select.Portal>
+        <Select.Content>…</Select.Content>
+      </Select.Portal>
     </Select.Root>
   </>
 );
@@ -802,15 +861,17 @@ export const Select = React.forwardRef(
             <ChevronDownIcon />
           </SelectPrimitive.Icon>
         </SelectPrimitive.Trigger>
-        <SelectPrimitive.Content>
-          <SelectPrimitive.ScrollUpButton>
-            <ChevronUpIcon />
-          </SelectPrimitive.ScrollUpButton>
-          <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
-          <SelectPrimitive.ScrollDownButton>
-            <ChevronDownIcon />
-          </SelectPrimitive.ScrollDownButton>
-        </SelectPrimitive.Content>
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Content>
+            <SelectPrimitive.ScrollUpButton>
+              <ChevronUpIcon />
+            </SelectPrimitive.ScrollUpButton>
+            <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
+            <SelectPrimitive.ScrollDownButton>
+              <ChevronDownIcon />
+            </SelectPrimitive.ScrollDownButton>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
       </SelectPrimitive.Root>
     );
   }

diff --git a/data/primitives/overview/releases.mdx b/data/primitives/overview/releases.mdx
@@ -73,6 +73,8 @@ metaDescription: Radix Primitives releases and their changelogs.
 - [**Breaking**] Renamed `data-state` values from `active|inactive` to `checked|unchecked` <PRLink id={1388} />
 - Add support for placeholder via `placeholder` prop on `Select.Value` <PRLink id={1384} />
 - Resolve value mismatch with underlying native select <PRLink id={1421} />
+- [**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} />
+- Add pinch to zoom support via `allowPinchZoom` prop on `Select.Root` <PRLink id={1459} />
 
 <PackageRelease name="Slot" version="0.1.3" />
 

diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "@radix-ui/react-progress": "0.1.5-rc.22",
     "@radix-ui/react-radio-group": "0.1.6-rc.29",
     "@radix-ui/react-scroll-area": "0.1.5-rc.25",
-    "@radix-ui/react-select": "0.1.2-rc.36",
+    "@radix-ui/react-select": "0.1.2-rc.45",
     "@radix-ui/react-separator": "0.1.5-rc.22",
     "@radix-ui/react-slider": "0.1.5-rc.25",
     "@radix-ui/react-slot": "0.1.3-rc.22",