@tamagui/select 1.88.7 → 1.88.8

package/src/SelectItem.tsx

@@ -70,15 +70,14 @@ export const SelectItem = ListItemFrame.styleable<SelectItemExtraProps>(
     } = context
 
     const [isSelected, setSelected] = React.useState(initialValue === value)
-    const [isActive, setActive] = React.useState(false)
 
     React.useEffect(() => {
       return activeIndexSubscribe((i) => {
         const isActive = index === i
-        setActive(isActive)
 
         if (isActive) {
           onActiveChange(value, index)
+          listRef?.current[index]?.focus()
         }
       })
     }, [index])
@@ -161,12 +160,6 @@ export const SelectItem = ListItemFrame.styleable<SelectItemExtraProps>(
           }
     }, [handleSelect])
 
-    useIsomorphicLayoutEffect(() => {
-      if (isActive) {
-        listRef?.current[index]?.focus()
-      }
-    }, [isActive])
-
     return (
       <SelectItemContextProvider
         scope={__scopeSelect}
@@ -194,6 +187,13 @@ export const SelectItem = ListItemFrame.styleable<SelectItemExtraProps>(
               cursor: 'default',
               size,
               outlineOffset: -1,
+
+              focusStyle: {
+                outlineColor: '$outlineColor',
+                outlineWidth: 2,
+                outlineStyle: 'solid',
+                outlineOffset: -2,
+              },
             })}
             {...listItemProps}
             {...selectItemProps}

package/src/SelectViewport.tsx

@@ -1,9 +1,8 @@
 import { FloatingFocusManager } from '@floating-ui/react'
 import { AnimatePresence } from '@tamagui/animate-presence'
 import { composeRefs } from '@tamagui/compose-refs'
-import { isWeb } from '@tamagui/constants'
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { styled } from '@tamagui/core'
+import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { View, styled } from '@tamagui/core'
 import { PortalItem } from '@tamagui/portal'
 import { ThemeableStack } from '@tamagui/stacks'
 
@@ -62,11 +61,6 @@ export const SelectViewport = SelectViewportFrame.styleable<SelectViewportExtraP
       }
     }, [breakpointActive])
 
-    const composedRefs = composeRefs(
-      forwardedRef,
-      context.floatingContext?.refs.setFloating
-    )
-
     if (itemContext.shouldRenderWebNative) {
       return <>{children}</>
     }
@@ -99,6 +93,12 @@ export const SelectViewport = SelectViewportFrame.styleable<SelectViewportExtraP
       className,
       ...floatingProps
     } = itemContext.interactions.getFloatingProps()
+
+    const composedRefs = composeRefs(
+      forwardedRef,
+      context.floatingContext?.refs.setFloating
+    )
+
     const { scrollbarWidth, listStyleType, overflow, ...restStyle } = style
 
     return (
@@ -110,9 +110,9 @@ export const SelectViewport = SelectViewportFrame.styleable<SelectViewportExtraP
             }}
           />
         )}
-        <FloatingFocusManager context={context.floatingContext!}>
-          <AnimatePresence>
-            {context.open ? (
+        <AnimatePresence>
+          {context.open ? (
+            <FloatingFocusManager context={context.floatingContext!} modal={false}>
               <SelectViewportFrame
                 disableClassName
                 key="select-viewport"
@@ -120,18 +120,18 @@ export const SelectViewport = SelectViewportFrame.styleable<SelectViewportExtraP
                 // @ts-ignore
                 role="presentation"
                 {...viewportProps}
-                ref={composedRefs}
                 {...floatingProps}
                 {...restStyle}
                 {...(!props.unstyled && {
                   overflow: disableScroll ? undefined : overflow ?? 'scroll',
                 })}
+                ref={composedRefs}
               >
                 {children}
               </SelectViewportFrame>
-            ) : null}
-          </AnimatePresence>
-        </FloatingFocusManager>
+            </FloatingFocusManager>
+          ) : null}
+        </AnimatePresence>
 
         {/* keep in dom to allow for portal to the trigger... very hacky! we should fix */}
         {!context.open && <div style={{ display: 'none' }}>{props.children}</div>}

package/types/Select.d.ts

@@ -85,7 +85,7 @@ export declare const Select: ((props: ScopedProps<SelectProps>) => JSX.Element)
         elevation?: number | import("@tamagui/core").SizeTokens | undefined;
         fullscreen?: boolean | undefined;
     }>> & React.RefAttributes<TamaguiElement>>;
-    ItemText: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiTextElement, import("@tamagui/core").TextNonStyleProps & void, Omit<import("@tamagui/core").TextStylePropsBase, never>, {
+    ItemText: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiTextElement, import("@tamagui/core").TextNonStyleProps & (void | Object), Omit<import("@tamagui/core").TextStylePropsBase, never>, {
         size?: FontSizeTokens | undefined;
         unstyled?: boolean | undefined;
     }, {}>;

package/types/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,cAAc,EAEd,cAAc,EAKf,MAAM,eAAe,CAAA;AAGtB,OAAO,EAAY,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAO5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAiB9B,OAAO,EAAE,WAAW,EAAmB,WAAW,EAAE,MAAM,SAAS,CAAA;AAiBnE,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B;AA0DD,eAAO,MAAM,UAAU;;;MAKrB,CAAA;AA2CF,eAAO,MAAM,gBAAgB;;;MAG3B,CAAA;AAyGF,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAA;AAgC5C,eAAO,MAAM,eAAe;;MAE1B,CAAA;AAoCF,eAAO,MAAM,MAAM,WACT,YAAY,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKjC,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,cAAc,EAEd,cAAc,EAKf,MAAM,eAAe,CAAA;AAGtB,OAAO,EAAY,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAO5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,OAAO,EAAE,WAAW,EAAmB,WAAW,EAAE,MAAM,SAAS,CAAA;AAiBnE,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B;AA0DD,eAAO,MAAM,UAAU;;;MAKrB,CAAA;AA2CF,eAAO,MAAM,gBAAgB;;;MAG3B,CAAA;AAyGF,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAA;AAgC5C,eAAO,MAAM,eAAe;;MAE1B,CAAA;AAoCF,eAAO,MAAM,MAAM,WACT,YAAY,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLjC,CAAA"}

package/types/SelectItemText.d.ts

@@ -5,7 +5,7 @@ export declare const SelectItemTextFrame: import("@tamagui/core").TamaguiCompone
     unstyled?: boolean | undefined;
 }, {}>;
 export type SelectItemTextProps = GetProps<typeof SelectItemTextFrame>;
-export declare const SelectItemText: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, TamaguiTextElement, import("@tamagui/core").TextNonStyleProps & void, Omit<import("@tamagui/core").TextStylePropsBase, never>, {
+export declare const SelectItemText: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, TamaguiTextElement, import("@tamagui/core").TextNonStyleProps & (void | Object), Omit<import("@tamagui/core").TextStylePropsBase, never>, {
     size?: import("@tamagui/core").FontSizeTokens | undefined;
     unstyled?: boolean | undefined;
 }, {}>;

package/types/SelectViewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectViewport.d.ts","sourceRoot":"","sources":["../src/SelectViewport.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAe,wBAAwB,EAAuB,MAAM,SAAS,CAAA;AAOpF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;MA2B9B,CAAA;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;MAyF1B,CAAA"}
+{"version":3,"file":"SelectViewport.d.ts","sourceRoot":"","sources":["../src/SelectViewport.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAe,wBAAwB,EAAuB,MAAM,SAAS,CAAA;AAOpF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;MA2B9B,CAAA;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;MA0F1B,CAAA"}