Manually set z-indices

mui · Nov 14, 2024 · 684a831 · 684a831
1 parent d8f6613
commit 684a831
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 21 deletions.
diff --git a/docs/data/components/select/SelectAlign.js b/docs/data/components/select/SelectAlign.js
@@ -10,7 +10,7 @@ function AlignOptionToTriggerTrue() {
         <Select.Value placeholder="Align option to trigger" />
         <SelectDropdownArrow />
       </SelectTrigger>
-      <Select.Positioner sideOffset={5}>
+      <SelectPositioner sideOffset={5}>
         <SelectScrollUpArrow />
         <SelectPopup>
           <SelectOption>
@@ -31,7 +31,7 @@ function AlignOptionToTriggerTrue() {
           </SelectOption>
         </SelectPopup>
         <SelectScrollDownArrow />
-      </Select.Positioner>
+      </SelectPositioner>
     </Select.Root>
   );
 }
@@ -43,7 +43,7 @@ function AlignOptionToTriggerFalse() {
         <Select.Value placeholder="Align popup to trigger" />
         <SelectDropdownArrow />
       </SelectTrigger>
-      <Select.Positioner sideOffset={5}>
+      <SelectPositioner sideOffset={5}>
         <SelectScrollUpArrow />
         <SelectPopup>
           <SelectOption>
@@ -64,7 +64,7 @@ function AlignOptionToTriggerFalse() {
           </SelectOption>
         </SelectPopup>
         <SelectScrollDownArrow />
-      </Select.Positioner>
+      </SelectPositioner>
     </Select.Root>
   );
 }
@@ -137,6 +137,12 @@ const SelectDropdownArrow = styled(Select.Icon)`
   height: 6px;
 `;
 
+const SelectPositioner = styled(Select.Positioner)`
+  &[data-side='none'] {
+    z-index: 1;
+  }
+`;
+
 const SelectPopup = styled(Select.Popup)`
   overflow-y: auto;
   background-color: white;
@@ -208,6 +214,7 @@ const scrollArrowStyles = css`
   align-items: center;
   justify-content: center;
   border-radius: 5px;
+  z-index: 1;
 
   &[data-side='none'] {
     &::before {

diff --git a/docs/data/components/select/SelectAlign.tsx b/docs/data/components/select/SelectAlign.tsx
@@ -10,7 +10,7 @@ function AlignOptionToTriggerTrue() {
         <Select.Value placeholder="Align option to trigger" />
         <SelectDropdownArrow />
       </SelectTrigger>
-      <Select.Positioner sideOffset={5}>
+      <SelectPositioner sideOffset={5}>
         <SelectScrollUpArrow />
         <SelectPopup>
           <SelectOption>
@@ -31,7 +31,7 @@ function AlignOptionToTriggerTrue() {
           </SelectOption>
         </SelectPopup>
         <SelectScrollDownArrow />
-      </Select.Positioner>
+      </SelectPositioner>
     </Select.Root>
   );
 }
@@ -43,7 +43,7 @@ function AlignOptionToTriggerFalse() {
         <Select.Value placeholder="Align popup to trigger" />
         <SelectDropdownArrow />
       </SelectTrigger>
-      <Select.Positioner sideOffset={5}>
+      <SelectPositioner sideOffset={5}>
         <SelectScrollUpArrow />
         <SelectPopup>
           <SelectOption>
@@ -64,7 +64,7 @@ function AlignOptionToTriggerFalse() {
           </SelectOption>
         </SelectPopup>
         <SelectScrollDownArrow />
-      </Select.Positioner>
+      </SelectPositioner>
     </Select.Root>
   );
 }
@@ -137,6 +137,12 @@ const SelectDropdownArrow = styled(Select.Icon)`
   height: 6px;
 `;
 
+const SelectPositioner = styled(Select.Positioner)`
+  &[data-side='none'] {
+    z-index: 1;
+  }
+`;
+
 const SelectPopup = styled(Select.Popup)`
   overflow-y: auto;
   background-color: white;
@@ -208,6 +214,7 @@ const scrollArrowStyles = css`
   align-items: center;
   justify-content: center;
   border-radius: 5px;
+  z-index: 1;
 
   &[data-side='none'] {
     &::before {

diff --git a/docs/data/components/select/SelectEmpty.js b/docs/data/components/select/SelectEmpty.js
@@ -10,7 +10,7 @@ export default function SelectEmpty() {
         <Select.Value placeholder="Select font..." />
         <SelectDropdownArrow />
       </SelectTrigger>
-      <Select.Positioner sideOffset={5}>
+      <SelectPositioner sideOffset={5}>
         <SelectScrollUpArrow />
         <SelectPopup>
           <SelectOption>
@@ -31,7 +31,7 @@ export default function SelectEmpty() {
           </SelectOption>
         </SelectPopup>
         <SelectScrollDownArrow />
-      </Select.Positioner>
+      </SelectPositioner>
     </Select.Root>
   );
 }
@@ -88,6 +88,12 @@ const SelectDropdownArrow = styled(Select.Icon)`
   height: 6px;
 `;
 
+const SelectPositioner = styled(Select.Positioner)`
+  &[data-side='none'] {
+    z-index: 1;
+  }
+`;
+
 const SelectPopup = styled(Select.Popup)`
   overflow-y: auto;
   background-color: white;
@@ -159,6 +165,7 @@ const scrollArrowStyles = css`
   align-items: center;
   justify-content: center;
   border-radius: 5px;
+  z-index: 1;
 
   &[data-side='none'] {
     &::before {

diff --git a/docs/data/components/select/SelectEmpty.tsx b/docs/data/components/select/SelectEmpty.tsx
@@ -10,7 +10,7 @@ export default function SelectEmpty() {
         <Select.Value placeholder="Select font..." />
         <SelectDropdownArrow />
       </SelectTrigger>
-      <Select.Positioner sideOffset={5}>
+      <SelectPositioner sideOffset={5}>
         <SelectScrollUpArrow />
         <SelectPopup>
           <SelectOption>
@@ -31,7 +31,7 @@ export default function SelectEmpty() {
           </SelectOption>
         </SelectPopup>
         <SelectScrollDownArrow />
-      </Select.Positioner>
+      </SelectPositioner>
     </Select.Root>
   );
 }
@@ -88,6 +88,12 @@ const SelectDropdownArrow = styled(Select.Icon)`
   height: 6px;
 `;
 
+const SelectPositioner = styled(Select.Positioner)`
+  &[data-side='none'] {
+    z-index: 1;
+  }
+`;
+
 const SelectPopup = styled(Select.Popup)`
   overflow-y: auto;
   background-color: white;
@@ -159,6 +165,7 @@ const scrollArrowStyles = css`
   align-items: center;
   justify-content: center;
   border-radius: 5px;
+  z-index: 1;
 
   &[data-side='none'] {
     &::before {

diff --git a/docs/data/components/select/SelectGroup.js b/docs/data/components/select/SelectGroup.js
@@ -31,7 +31,7 @@ export default function SelectGroup() {
         <Select.Value placeholder="Select food..." />
         <SelectDropdownArrow />
       </SelectTrigger>
-      <Select.Positioner sideOffset={5}>
+      <SelectPositioner sideOffset={5}>
         <SelectScrollUpArrow />
         <SelectPopup>
           <SelectOption>
@@ -58,7 +58,7 @@ export default function SelectGroup() {
           ))}
         </SelectPopup>
         <SelectScrollDownArrow />
-      </Select.Positioner>
+      </SelectPositioner>
     </Select.Root>
   );
 }
@@ -119,6 +119,12 @@ const SelectDropdownArrow = styled(Select.Icon)`
   height: 6px;
 `;
 
+const SelectPositioner = styled(Select.Positioner)`
+  &[data-side='none'] {
+    z-index: 1;
+  }
+`;
+
 const SelectPopup = styled(Select.Popup)`
   overflow-y: auto;
   background-color: white;
@@ -190,6 +196,7 @@ const scrollArrowStyles = css`
   align-items: center;
   justify-content: center;
   border-radius: 5px;
+  z-index: 1;
 
   &[data-side='none'] {
     &::before {

diff --git a/docs/data/components/select/SelectGroup.tsx b/docs/data/components/select/SelectGroup.tsx
@@ -31,7 +31,7 @@ export default function SelectGroup() {
         <Select.Value placeholder="Select food..." />
         <SelectDropdownArrow />
       </SelectTrigger>
-      <Select.Positioner sideOffset={5}>
+      <SelectPositioner sideOffset={5}>
         <SelectScrollUpArrow />
         <SelectPopup>
           <SelectOption>
@@ -58,7 +58,7 @@ export default function SelectGroup() {
           ))}
         </SelectPopup>
         <SelectScrollDownArrow />
-      </Select.Positioner>
+      </SelectPositioner>
     </Select.Root>
   );
 }
@@ -119,6 +119,12 @@ const SelectDropdownArrow = styled(Select.Icon)`
   height: 6px;
 `;
 
+const SelectPositioner = styled(Select.Positioner)`
+  &[data-side='none'] {
+    z-index: 1;
+  }
+`;
+
 const SelectPopup = styled(Select.Popup)`
   overflow-y: auto;
   background-color: white;
@@ -190,6 +196,7 @@ const scrollArrowStyles = css`
   align-items: center;
   justify-content: center;
   border-radius: 5px;
+  z-index: 1;
 
   &[data-side='none'] {
     &::before {

diff --git a/docs/data/components/select/SelectIntroduction/system/index.js b/docs/data/components/select/SelectIntroduction/system/index.js
@@ -10,7 +10,7 @@ export default function SelectIntroduction() {
         <Select.Value placeholder="System font" />
         <SelectDropdownArrow />
       </SelectTrigger>
-      <Select.Positioner sideOffset={5}>
+      <SelectPositioner sideOffset={5}>
         <SelectScrollUpArrow />
         <SelectPopup>
           <SelectOption value="system">
@@ -27,7 +27,7 @@ export default function SelectIntroduction() {
           </SelectOption>
         </SelectPopup>
         <SelectScrollDownArrow />
-      </Select.Positioner>
+      </SelectPositioner>
     </Select.Root>
   );
 }
@@ -84,6 +84,12 @@ const SelectDropdownArrow = styled(Select.Icon)`
   height: 6px;
 `;
 
+const SelectPositioner = styled(Select.Positioner)`
+  &[data-side='none'] {
+    z-index: 1;
+  }
+`;
+
 const SelectPopup = styled(Select.Popup)`
   overflow-y: auto;
   background-color: white;
@@ -155,6 +161,7 @@ const scrollArrowStyles = css`
   align-items: center;
   justify-content: center;
   border-radius: 5px;
+  z-index: 1;
 
   &[data-side='none'] {
     &::before {

diff --git a/docs/data/components/select/SelectIntroduction/system/index.tsx b/docs/data/components/select/SelectIntroduction/system/index.tsx
@@ -10,7 +10,7 @@ export default function SelectIntroduction() {
         <Select.Value placeholder="System font" />
         <SelectDropdownArrow />
       </SelectTrigger>
-      <Select.Positioner sideOffset={5}>
+      <SelectPositioner sideOffset={5}>
         <SelectScrollUpArrow />
         <SelectPopup>
           <SelectOption value="system">
@@ -27,7 +27,7 @@ export default function SelectIntroduction() {
           </SelectOption>
         </SelectPopup>
         <SelectScrollDownArrow />
-      </Select.Positioner>
+      </SelectPositioner>
     </Select.Root>
   );
 }
@@ -84,6 +84,12 @@ const SelectDropdownArrow = styled(Select.Icon)`
   height: 6px;
 `;
 
+const SelectPositioner = styled(Select.Positioner)`
+  &[data-side='none'] {
+    z-index: 1;
+  }
+`;
+
 const SelectPopup = styled(Select.Popup)`
   overflow-y: auto;
   background-color: white;
@@ -155,6 +161,7 @@ const scrollArrowStyles = css`
   align-items: center;
   justify-content: center;
   border-radius: 5px;
+  z-index: 1;
 
   &[data-side='none'] {
     &::before {

diff --git a/docs/data/components/select/select.mdx b/docs/data/components/select/select.mdx
@@ -132,7 +132,7 @@ By default, the selected option inside the popup is aligned to the trigger eleme
 <Select.Root alignOptionToTrigger={false}>
 ```
 
-- **`alignOptionToTrigger={true}`**: aligns the popup such that the selected option inside of it appears centered over the trigger. If there's not enough space, it falls back to standard anchoring. This method is useful as it allows the user to select an option in a single click or "pointer cycle" (pointer down, pointer move, pointer up). This is the native behavior on macOS; the scroll arrow components must be used to ensure a single pointer cycle can be used.
+- **`alignOptionToTrigger={true}`**: aligns the popup such that the selected option inside of it appears centered over the trigger. If there's not enough space, it falls back to standard anchoring. This method is useful as it allows the user to select an option in a single click or "pointer cycle" (pointer down, pointer move, pointer up). This is the native behavior on macOS; the scroll arrow components must be used to ensure a single pointer cycle can be used. The `[data-side]` attribute value is `none` on both `Select.Positioner` and `Select.Popup` when in this mode, allowing it to be styled differently.
 - **`alignOptionToTrigger={false}`**: aligns the popup to the trigger itself on its top or bottom side, which is the standard form of anchor positioning used in Tooltip, Popover, Menu, etc.
 
 <Callout type="warning">