Merge pull request #190 from jedmund/fix-double-overlay

Fix double overlay on Selects

components/AxSelect/index.tsx

@@ -410,6 +410,7 @@ const AXSelect = (props: Props) => {
             onOpenChange={() => openSelect(1)}
             onValueChange={handleAX1SelectChange}
             triggerClass="modal"
+            overlayVisible={false}
           >
             {generateOptions(0)}
           </Select>
@@ -439,6 +440,7 @@ const AXSelect = (props: Props) => {
             onValueChange={handleAX2SelectChange}
             triggerClass="modal"
             ref={secondaryAxModifierSelect}
+            overlayVisible={false}
           >
             {generateOptions(1)}
           </Select>

components/DropdownMenuContent/index.scss

@@ -4,7 +4,7 @@
   border-radius: 6px;
   box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
   box-sizing: border-box;
-  min-width: 15vw;
+  min-width: 30vw;
   margin: 0 $unit-2x;
   // top: $unit-8x; // This shouldn't be hardcoded. How to calculate it?
   // Also, add space that doesn't make the menu disappear if you move your mouse slowly

components/ExtendedMasterySelect/index.tsx

@@ -135,6 +135,7 @@ const ExtendedMasterySelect = ({
         onOpenChange={() => changeOpen('left')}
         onClose={onClose}
         triggerClass="Left modal"
+        overlayVisible={false}
       >
         {generateLeftOptions()}
       </Select>
@@ -146,6 +147,7 @@ const ExtendedMasterySelect = ({
         onValueChange={handleRightSelectChange}
         onOpenChange={() => changeOpen('right')}
         onClose={onClose}
+        overlayVisible={false}
         triggerClass={classNames({
           Right: true,
           modal: true,

components/Header/index.tsx

@@ -229,6 +229,7 @@ const Header = () => {
   const urlCopyToast = () => {
     return (
       <Toast
+        altText={t('toasts.copied')}
         open={copyToastOpen}
         duration={2400}
         type="foreground"
@@ -242,6 +243,7 @@ const Header = () => {
   const remixToast = () => {
     return (
       <Toast
+        altText={t('toasts.remixed', { title: originalName })}
         open={remixToastOpen}
         duration={2400}
         type="foreground"

components/JobSkillSearchFilterBar/index.tsx

@@ -44,6 +44,7 @@ const JobSkillSearchFilterBar = (props: Props) => {
         value={-1}
         triggerClass="Bound"
         open={open}
+        overlayVisible={false}
         onValueChange={onChange}
         onOpenChange={openSelect}
       >

components/Overlay/index.scss

@@ -6,9 +6,6 @@
   right: 0;
   bottom: 0;
   left: 0;
-  backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
-  animation: 0.24s ease-in fadeInFilter;
-  animation-fill-mode: forwards;
 
   &.Job {
     animation: none;
@@ -16,6 +13,9 @@
   }
 
   &.Visible {
+    animation: 0.24s ease-in fadeInFilter;
+    animation-fill-mode: forwards;
+    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
     background: rgba(0, 0, 0, 0.6);
   }
 }

components/Select/index.tsx

@@ -23,6 +23,7 @@ interface Props
   onValueChange?: (value: string) => void
   onClose?: () => void
   triggerClass?: string
+  overlayVisible?: boolean
 }
 
 const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
@@ -94,7 +95,10 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
 
       <RadixSelect.Portal className="Select">
         <>
-          <Overlay open={open} visible={false} />
+          <Overlay
+            open={open}
+            visible={props.overlayVisible != null ? props.overlayVisible : true}
+          />
 
           <RadixSelect.Content
             className="Select"
@@ -116,4 +120,8 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
   )
 })
 
+Select.defaultProps = {
+  overlayVisible: true,
+}
+
 export default Select

components/SelectTableField/index.tsx

@@ -59,6 +59,7 @@ const SelectTableField = (props: Props) => {
           onClose={props.onClose}
           triggerClass={classNames({ Bound: true, Table: true })}
           value={value}
+          overlayVisible={false}
         >
           {props.children}
         </Select>

components/SelectWithInput/index.tsx

@@ -173,6 +173,7 @@ const SelectWithInput = ({
           onOpenChange={changeOpen}
           onClose={onClose}
           triggerClass="modal"
+          overlayVisible={false}
         >
           {generateOptions()}
         </Select>

components/Toast/index.tsx

@@ -5,6 +5,7 @@ import * as ToastPrimitive from '@radix-ui/react-toast'
 import './index.scss'
 
 interface Props extends ToastPrimitive.ToastProps {
+  altText: string
   className?: string
   title?: string
   content: React.ReactNode
@@ -12,6 +13,7 @@ interface Props extends ToastPrimitive.ToastProps {
 }
 
 const Toast = ({
+  altText,
   children,
   title,
   content,
@@ -39,7 +41,7 @@ const Toast = ({
         <p>{content}</p>
       </ToastPrimitive.Description>
       {children && (
-        <ToastPrimitive.Action asChild altText="">
+        <ToastPrimitive.Action asChild altText={altText}>
           {children}
         </ToastPrimitive.Action>
       )}

components/UpdateToast/index.tsx

@@ -54,6 +54,7 @@ const UpdateToast = ({
 
   return (
     <Toast
+      altText={t(`toasts.description.${updateType}`)}
       className={classes}
       title={t(`toasts.title`)}
       content={t(`toasts.description.${updateType}`)}

components/WeaponKeySelect/index.tsx

@@ -130,6 +130,7 @@ const WeaponKeySelect = React.forwardRef<HTMLButtonElement, Props>(
         onValueChange={handleChange}
         ref={ref}
         triggerClass="modal"
+        overlayVisible={false}
       >
         <SelectItem key="no-key" value="no-key">
           {emptyOption()}