@tamagui/select 1.0.1-beta.156 → 1.0.1-beta.157

package/dist/cjs/SelectContent.js

@@ -24,10 +24,17 @@ module.exports = __toCommonJS(SelectContent_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_dom_interactions = require("@floating-ui/react-dom-interactions");
 var import_core = require("@tamagui/core");
+var import_dismissable = require("@tamagui/dismissable");
+var import_focus_scope = require("@tamagui/focus-scope");
 var import_context = require("./context");
 var import_Select = require("./Select");
 const CONTENT_NAME = "SelectContent";
-const SelectContent = ({ children, __scopeSelect }) => {
+const SelectContent = ({
+  children,
+  __scopeSelect,
+  zIndex = 1e3,
+  ...focusScopeProps
+}) => {
   const context = (0, import_context.useSelectContext)(CONTENT_NAME, __scopeSelect);
   const themeName = (0, import_core.useThemeName)();
   const showSheet = (0, import_Select.useShowSelectSheet)(context);
@@ -41,11 +48,16 @@ const SelectContent = ({ children, __scopeSelect }) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_dom_interactions.FloatingPortal, {
     children: context.open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_dom_interactions.FloatingOverlay, {
+      style: { zIndex },
       lockScroll: !touch,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_dom_interactions.FloatingFocusManager, {
-        context: context.floatingContext,
-        preventTabbing: true,
-        children: contents
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focus_scope.FocusScope, {
+        loop: true,
+        trapped: true,
+        ...focusScopeProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
+          disableOutsidePointerEvents: true,
+          children: contents
+        })
       })
     }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
       style: { display: "none" },

package/dist/cjs/SelectContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SelectContent.tsx"],
-  "sourcesContent": ["import {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n} from '@floating-ui/react-dom-interactions'\nimport { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { useSelectContext } from './context'\nimport { useShowSelectSheet } from './Select'\nimport { SelectContentProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\nexport const SelectContent = ({ children, __scopeSelect }: SelectContentProps) => {\n  const context = useSelectContext(CONTENT_NAME, __scopeSelect)\n  const themeName = useThemeName()\n  const showSheet = useShowSelectSheet(context)\n  const contents = <Theme name={themeName}>{children}</Theme>\n  const touch = useIsTouchDevice()\n\n  if (showSheet && context.open) {\n    return contents\n  }\n\n  return (\n    <FloatingPortal>\n      {context.open ? (\n        <FloatingOverlay lockScroll={!touch}>\n          <FloatingFocusManager context={context.floatingContext!} preventTabbing>\n            {contents}\n          </FloatingFocusManager>\n        </FloatingOverlay>\n      ) : (\n        <div style={{ display: 'none' }}>{contents}</div>\n      )}\n    </FloatingPortal>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBmB;AAtBnB,oCAIO;AACP,kBAAsD;AAGtD,qBAAiC;AACjC,oBAAmC;AAOnC,MAAM,eAAe;AAEd,MAAM,gBAAgB,CAAC,EAAE,UAAU,cAAc,MAA0B;AAChF,QAAM,cAAU,iCAAiB,cAAc,aAAa;AAC5D,QAAM,gBAAY,0BAAa;AAC/B,QAAM,gBAAY,kCAAmB,OAAO;AAC5C,QAAM,WAAW,4CAAC;AAAA,IAAM,MAAM;AAAA,IAAY;AAAA,GAAS;AACnD,QAAM,YAAQ,8BAAiB;AAE/B,MAAI,aAAa,QAAQ,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,SACE,4CAAC;AAAA,IACE,kBAAQ,OACP,4CAAC;AAAA,MAAgB,YAAY,CAAC;AAAA,MAC5B,sDAAC;AAAA,QAAqB,SAAS,QAAQ;AAAA,QAAkB,gBAAc;AAAA,QACpE;AAAA,OACH;AAAA,KACF,IAEA,4CAAC;AAAA,MAAI,OAAO,EAAE,SAAS,OAAO;AAAA,MAAI;AAAA,KAAS;AAAA,GAE/C;AAEJ;",
+  "sourcesContent": ["import { FloatingOverlay, FloatingPortal } from '@floating-ui/react-dom-interactions'\nimport { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'\nimport { Dismissable } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\n\nimport { useSelectContext } from './context'\nimport { useShowSelectSheet } from './Select'\nimport { SelectContentProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\nexport const SelectContent = ({\n  children,\n  __scopeSelect,\n  zIndex = 1000,\n  ...focusScopeProps\n}: SelectContentProps & FocusScopeProps) => {\n  const context = useSelectContext(CONTENT_NAME, __scopeSelect)\n  const themeName = useThemeName()\n  const showSheet = useShowSelectSheet(context)\n  const contents = <Theme name={themeName}>{children}</Theme>\n  const touch = useIsTouchDevice()\n\n  if (showSheet && context.open) {\n    return contents\n  }\n\n  return (\n    <FloatingPortal>\n      {context.open ? (\n        <FloatingOverlay style={{ zIndex }} lockScroll={!touch}>\n          <FocusScope loop trapped {...focusScopeProps}>\n            <Dismissable disableOutsidePointerEvents>{contents}</Dismissable>\n          </FocusScope>\n        </FloatingOverlay>\n      ) : (\n        <div style={{ display: 'none' }}>{contents}</div>\n      )}\n    </FloatingPortal>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBmB;AAxBnB,oCAAgD;AAChD,kBAAsD;AACtD,yBAA4B;AAC5B,yBAA4C;AAE5C,qBAAiC;AACjC,oBAAmC;AAOnC,MAAM,eAAe;AAEd,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,KACN;AACL,MAA4C;AAC1C,QAAM,cAAU,iCAAiB,cAAc,aAAa;AAC5D,QAAM,gBAAY,0BAAa;AAC/B,QAAM,gBAAY,kCAAmB,OAAO;AAC5C,QAAM,WAAW,4CAAC;AAAA,IAAM,MAAM;AAAA,IAAY;AAAA,GAAS;AACnD,QAAM,YAAQ,8BAAiB;AAE/B,MAAI,aAAa,QAAQ,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,SACE,4CAAC;AAAA,IACE,kBAAQ,OACP,4CAAC;AAAA,MAAgB,OAAO,EAAE,OAAO;AAAA,MAAG,YAAY,CAAC;AAAA,MAC/C,sDAAC;AAAA,QAAW,MAAI;AAAA,QAAC,SAAO;AAAA,QAAE,GAAG;AAAA,QAC3B,sDAAC;AAAA,UAAY,6BAA2B;AAAA,UAAE;AAAA,SAAS;AAAA,OACrD;AAAA,KACF,IAEA,4CAAC;AAAA,MAAI,OAAO,EAAE,SAAS,OAAO;AAAA,MAAI;AAAA,KAAS;AAAA,GAE/C;AAEJ;",
   "names": []
 }

package/dist/cjs/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/types.tsx"],
-  "sourcesContent": ["import type {\n  ContextData,\n  FloatingContext,\n  ReferenceType,\n} from '@floating-ui/react-dom-interactions'\nimport type { MediaQueryKey, SizeTokens } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport type { ThemeableStackProps, YStackProps } from '@tamagui/stacks'\nimport type { DispatchWithoutAction, HTMLProps, MutableRefObject, ReactNode } from 'react'\n\nexport type Direction = 'ltr' | 'rtl'\n\nexport type ScopedProps<P> = P & { __scopeSelect?: Scope }\n\nexport interface SelectProps {\n  id?: string\n  children?: ReactNode\n  value?: string\n  defaultValue?: string\n  onValueChange?(value: string): void\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?(open: boolean): void\n  dir?: Direction\n  name?: string\n  autoComplete?: string\n  size?: SizeTokens\n  sheetBreakpoint?: MediaQueryKey | false\n}\n\ntype NonNull<A> = Exclude<A, void | null>\n\nexport interface SelectContextValue {\n  dir?: Direction\n  scopeKey: string\n  sheetBreakpoint: NonNull<SelectProps['sheetBreakpoint']>\n  size?: SizeTokens\n  value: any\n  selectedItem: ReactNode\n  setSelectedItem: (item: ReactNode) => void\n  selectedIndex: number\n  setSelectedIndex: (index: number) => void\n  activeIndex: number | null\n  setActiveIndex: (index: number | null) => void\n  setValueAtIndex: (index: number, value: string) => void\n  open: boolean\n  setOpen: (open: boolean) => void\n  onChange: (value: string) => void\n  valueNode: Element | null\n  onValueNodeChange(node: HTMLElement): void\n  valueNodeHasChildren: boolean\n  onValueNodeHasChildrenChange(hasChildren: boolean): void\n  forceUpdate: DispatchWithoutAction\n\n  // InlineImpl only:\n  fallback: boolean\n  blockSelection: boolean\n  allowSelectRef?: MutableRefObject<boolean>\n  allowMouseUpRef?: MutableRefObject<boolean>\n  upArrowRef?: MutableRefObject<HTMLDivElement | null>\n  downArrowRef?: MutableRefObject<HTMLDivElement | null>\n  selectTimeoutRef?: MutableRefObject<any>\n  setScrollTop?: Function\n  setInnerOffset?: Function\n  dataRef?: MutableRefObject<ContextData>\n  controlledScrolling?: boolean\n  listRef?: MutableRefObject<Array<HTMLElement | null>>\n  floatingRef?: MutableRefObject<HTMLElement | null>\n  canScrollUp?: boolean\n  canScrollDown?: boolean\n  floatingContext?: FloatingContext<ReferenceType>\n  interactions?: {\n    getReferenceProps: (userProps?: HTMLProps<Element> | undefined) => any\n    getFloatingProps: (userProps?: HTMLProps<HTMLElement> | undefined) => any\n    getItemProps: (userProps?: HTMLProps<HTMLElement> | undefined) => any\n  }\n}\n\nexport type SelectViewportProps = ThemeableStackProps & {\n  size?: SizeTokens\n}\n\nexport type SelectContentProps = ScopedProps<{ children?: React.ReactNode }>\n\nexport interface SelectScrollButtonImplProps extends YStackProps {\n  dir: 'up' | 'down'\n  componentName: string\n}\n\nexport interface SelectScrollButtonProps\n  extends Omit<SelectScrollButtonImplProps, 'dir' | 'componentName'> {}\n"],
+  "sourcesContent": ["import type {\n  ContextData,\n  FloatingContext,\n  ReferenceType,\n} from '@floating-ui/react-dom-interactions'\nimport type { MediaQueryKey, SizeTokens } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport type { ThemeableStackProps, YStackProps } from '@tamagui/stacks'\nimport type { DispatchWithoutAction, HTMLProps, MutableRefObject, ReactNode } from 'react'\n\nexport type Direction = 'ltr' | 'rtl'\n\nexport type ScopedProps<P> = P & { __scopeSelect?: Scope }\n\nexport interface SelectProps {\n  id?: string\n  children?: ReactNode\n  value?: string\n  defaultValue?: string\n  onValueChange?(value: string): void\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?(open: boolean): void\n  dir?: Direction\n  name?: string\n  autoComplete?: string\n  size?: SizeTokens\n  sheetBreakpoint?: MediaQueryKey | false\n}\n\ntype NonNull<A> = Exclude<A, void | null>\n\nexport interface SelectContextValue {\n  dir?: Direction\n  scopeKey: string\n  sheetBreakpoint: NonNull<SelectProps['sheetBreakpoint']>\n  size?: SizeTokens\n  value: any\n  selectedItem: ReactNode\n  setSelectedItem: (item: ReactNode) => void\n  selectedIndex: number\n  setSelectedIndex: (index: number) => void\n  activeIndex: number | null\n  setActiveIndex: (index: number | null) => void\n  setValueAtIndex: (index: number, value: string) => void\n  open: boolean\n  setOpen: (open: boolean) => void\n  onChange: (value: string) => void\n  valueNode: Element | null\n  onValueNodeChange(node: HTMLElement): void\n  valueNodeHasChildren: boolean\n  onValueNodeHasChildrenChange(hasChildren: boolean): void\n  forceUpdate: DispatchWithoutAction\n\n  // InlineImpl only:\n  fallback: boolean\n  blockSelection: boolean\n  allowSelectRef?: MutableRefObject<boolean>\n  allowMouseUpRef?: MutableRefObject<boolean>\n  upArrowRef?: MutableRefObject<HTMLDivElement | null>\n  downArrowRef?: MutableRefObject<HTMLDivElement | null>\n  selectTimeoutRef?: MutableRefObject<any>\n  setScrollTop?: Function\n  setInnerOffset?: Function\n  dataRef?: MutableRefObject<ContextData>\n  controlledScrolling?: boolean\n  listRef?: MutableRefObject<Array<HTMLElement | null>>\n  floatingRef?: MutableRefObject<HTMLElement | null>\n  canScrollUp?: boolean\n  canScrollDown?: boolean\n  floatingContext?: FloatingContext<ReferenceType>\n  interactions?: {\n    getReferenceProps: (userProps?: HTMLProps<Element> | undefined) => any\n    getFloatingProps: (userProps?: HTMLProps<HTMLElement> | undefined) => any\n    getItemProps: (userProps?: HTMLProps<HTMLElement> | undefined) => any\n  }\n}\n\nexport type SelectViewportProps = ThemeableStackProps & {\n  size?: SizeTokens\n}\n\nexport type SelectContentProps = ScopedProps<{ children?: React.ReactNode; zIndex?: number }>\n\nexport interface SelectScrollButtonImplProps extends YStackProps {\n  dir: 'up' | 'down'\n  componentName: string\n}\n\nexport interface SelectScrollButtonProps\n  extends Omit<SelectScrollButtonImplProps, 'dir' | 'componentName'> {}\n"],
   "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/SelectContent.js

@@ -1,14 +1,17 @@
 import { jsx } from "react/jsx-runtime";
-import {
-  FloatingFocusManager,
-  FloatingOverlay,
-  FloatingPortal
-} from "@floating-ui/react-dom-interactions";
+import { FloatingOverlay, FloatingPortal } from "@floating-ui/react-dom-interactions";
 import { Theme, useIsTouchDevice, useThemeName } from "@tamagui/core";
+import { Dismissable } from "@tamagui/dismissable";
+import { FocusScope } from "@tamagui/focus-scope";
 import { useSelectContext } from "./context";
 import { useShowSelectSheet } from "./Select";
 const CONTENT_NAME = "SelectContent";
-const SelectContent = ({ children, __scopeSelect }) => {
+const SelectContent = ({
+  children,
+  __scopeSelect,
+  zIndex = 1e3,
+  ...focusScopeProps
+}) => {
   const context = useSelectContext(CONTENT_NAME, __scopeSelect);
   const themeName = useThemeName();
   const showSheet = useShowSelectSheet(context);
@@ -22,11 +25,16 @@ const SelectContent = ({ children, __scopeSelect }) => {
   }
   return /* @__PURE__ */ jsx(FloatingPortal, {
     children: context.open ? /* @__PURE__ */ jsx(FloatingOverlay, {
+      style: { zIndex },
       lockScroll: !touch,
-      children: /* @__PURE__ */ jsx(FloatingFocusManager, {
-        context: context.floatingContext,
-        preventTabbing: true,
-        children: contents
+      children: /* @__PURE__ */ jsx(FocusScope, {
+        loop: true,
+        trapped: true,
+        ...focusScopeProps,
+        children: /* @__PURE__ */ jsx(Dismissable, {
+          disableOutsidePointerEvents: true,
+          children: contents
+        })
       })
     }) : /* @__PURE__ */ jsx("div", {
       style: { display: "none" },

package/dist/esm/SelectContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SelectContent.tsx"],
-  "sourcesContent": ["import {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n} from '@floating-ui/react-dom-interactions'\nimport { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { useSelectContext } from './context'\nimport { useShowSelectSheet } from './Select'\nimport { SelectContentProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\nexport const SelectContent = ({ children, __scopeSelect }: SelectContentProps) => {\n  const context = useSelectContext(CONTENT_NAME, __scopeSelect)\n  const themeName = useThemeName()\n  const showSheet = useShowSelectSheet(context)\n  const contents = <Theme name={themeName}>{children}</Theme>\n  const touch = useIsTouchDevice()\n\n  if (showSheet && context.open) {\n    return contents\n  }\n\n  return (\n    <FloatingPortal>\n      {context.open ? (\n        <FloatingOverlay lockScroll={!touch}>\n          <FloatingFocusManager context={context.floatingContext!} preventTabbing>\n            {contents}\n          </FloatingFocusManager>\n        </FloatingOverlay>\n      ) : (\n        <div style={{ display: 'none' }}>{contents}</div>\n      )}\n    </FloatingPortal>\n  )\n}\n"],
-  "mappings": "AAsBmB;AAtBnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,OAAO,kBAAkB,oBAAoB;AAGtD,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AAOnC,MAAM,eAAe;AAEd,MAAM,gBAAgB,CAAC,EAAE,UAAU,cAAc,MAA0B;AAChF,QAAM,UAAU,iBAAiB,cAAc,aAAa;AAC5D,QAAM,YAAY,aAAa;AAC/B,QAAM,YAAY,mBAAmB,OAAO;AAC5C,QAAM,WAAW,oBAAC;AAAA,IAAM,MAAM;AAAA,IAAY;AAAA,GAAS;AACnD,QAAM,QAAQ,iBAAiB;AAE/B,MAAI,aAAa,QAAQ,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC;AAAA,IACE,kBAAQ,OACP,oBAAC;AAAA,MAAgB,YAAY,CAAC;AAAA,MAC5B,8BAAC;AAAA,QAAqB,SAAS,QAAQ;AAAA,QAAkB,gBAAc;AAAA,QACpE;AAAA,OACH;AAAA,KACF,IAEA,oBAAC;AAAA,MAAI,OAAO,EAAE,SAAS,OAAO;AAAA,MAAI;AAAA,KAAS;AAAA,GAE/C;AAEJ;",
+  "sourcesContent": ["import { FloatingOverlay, FloatingPortal } from '@floating-ui/react-dom-interactions'\nimport { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'\nimport { Dismissable } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\n\nimport { useSelectContext } from './context'\nimport { useShowSelectSheet } from './Select'\nimport { SelectContentProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\nexport const SelectContent = ({\n  children,\n  __scopeSelect,\n  zIndex = 1000,\n  ...focusScopeProps\n}: SelectContentProps & FocusScopeProps) => {\n  const context = useSelectContext(CONTENT_NAME, __scopeSelect)\n  const themeName = useThemeName()\n  const showSheet = useShowSelectSheet(context)\n  const contents = <Theme name={themeName}>{children}</Theme>\n  const touch = useIsTouchDevice()\n\n  if (showSheet && context.open) {\n    return contents\n  }\n\n  return (\n    <FloatingPortal>\n      {context.open ? (\n        <FloatingOverlay style={{ zIndex }} lockScroll={!touch}>\n          <FocusScope loop trapped {...focusScopeProps}>\n            <Dismissable disableOutsidePointerEvents>{contents}</Dismissable>\n          </FocusScope>\n        </FloatingOverlay>\n      ) : (\n        <div style={{ display: 'none' }}>{contents}</div>\n      )}\n    </FloatingPortal>\n  )\n}\n"],
+  "mappings": "AAwBmB;AAxBnB,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,OAAO,kBAAkB,oBAAoB;AACtD,SAAS,mBAAmB;AAC5B,SAAS,kBAAmC;AAE5C,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AAOnC,MAAM,eAAe;AAEd,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,KACN;AACL,MAA4C;AAC1C,QAAM,UAAU,iBAAiB,cAAc,aAAa;AAC5D,QAAM,YAAY,aAAa;AAC/B,QAAM,YAAY,mBAAmB,OAAO;AAC5C,QAAM,WAAW,oBAAC;AAAA,IAAM,MAAM;AAAA,IAAY;AAAA,GAAS;AACnD,QAAM,QAAQ,iBAAiB;AAE/B,MAAI,aAAa,QAAQ,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC;AAAA,IACE,kBAAQ,OACP,oBAAC;AAAA,MAAgB,OAAO,EAAE,OAAO;AAAA,MAAG,YAAY,CAAC;AAAA,MAC/C,8BAAC;AAAA,QAAW,MAAI;AAAA,QAAC,SAAO;AAAA,QAAE,GAAG;AAAA,QAC3B,8BAAC;AAAA,UAAY,6BAA2B;AAAA,UAAE;AAAA,SAAS;AAAA,OACrD;AAAA,KACF,IAEA,oBAAC;AAAA,MAAI,OAAO,EAAE,SAAS,OAAO;AAAA,MAAI;AAAA,KAAS;AAAA,GAE/C;AAEJ;",
   "names": []
 }

package/dist/jsx/SelectContent.js

@@ -1,13 +1,16 @@
-import {
-  FloatingFocusManager,
-  FloatingOverlay,
-  FloatingPortal
-} from "@floating-ui/react-dom-interactions";
+import { FloatingOverlay, FloatingPortal } from "@floating-ui/react-dom-interactions";
 import { Theme, useIsTouchDevice, useThemeName } from "@tamagui/core";
+import { Dismissable } from "@tamagui/dismissable";
+import { FocusScope } from "@tamagui/focus-scope";
 import { useSelectContext } from "./context";
 import { useShowSelectSheet } from "./Select";
 const CONTENT_NAME = "SelectContent";
-const SelectContent = ({ children, __scopeSelect }) => {
+const SelectContent = ({
+  children,
+  __scopeSelect,
+  zIndex = 1e3,
+  ...focusScopeProps
+}) => {
   const context = useSelectContext(CONTENT_NAME, __scopeSelect);
   const themeName = useThemeName();
   const showSheet = useShowSelectSheet(context);
@@ -16,7 +19,7 @@ const SelectContent = ({ children, __scopeSelect }) => {
   if (showSheet && context.open) {
     return contents;
   }
-  return <FloatingPortal>{context.open ? <FloatingOverlay lockScroll={!touch}><FloatingFocusManager context={context.floatingContext} preventTabbing>{contents}</FloatingFocusManager></FloatingOverlay> : <div style={{ display: "none" }}>{contents}</div>}</FloatingPortal>;
+  return <FloatingPortal>{context.open ? <FloatingOverlay style={{ zIndex }} lockScroll={!touch}><FocusScope loop trapped {...focusScopeProps}><Dismissable disableOutsidePointerEvents>{contents}</Dismissable></FocusScope></FloatingOverlay> : <div style={{ display: "none" }}>{contents}</div>}</FloatingPortal>;
 };
 export {
   SelectContent

package/dist/jsx/SelectContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SelectContent.tsx"],
-  "sourcesContent": ["import {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n} from '@floating-ui/react-dom-interactions'\nimport { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'\nimport * as React from 'react'\n\nimport { useSelectContext } from './context'\nimport { useShowSelectSheet } from './Select'\nimport { SelectContentProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\nexport const SelectContent = ({ children, __scopeSelect }: SelectContentProps) => {\n  const context = useSelectContext(CONTENT_NAME, __scopeSelect)\n  const themeName = useThemeName()\n  const showSheet = useShowSelectSheet(context)\n  const contents = <Theme name={themeName}>{children}</Theme>\n  const touch = useIsTouchDevice()\n\n  if (showSheet && context.open) {\n    return contents\n  }\n\n  return (\n    <FloatingPortal>\n      {context.open ? (\n        <FloatingOverlay lockScroll={!touch}>\n          <FloatingFocusManager context={context.floatingContext!} preventTabbing>\n            {contents}\n          </FloatingFocusManager>\n        </FloatingOverlay>\n      ) : (\n        <div style={{ display: 'none' }}>{contents}</div>\n      )}\n    </FloatingPortal>\n  )\n}\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,OAAO,kBAAkB,oBAAoB;AAGtD,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AAOnC,MAAM,eAAe;AAEd,MAAM,gBAAgB,CAAC,EAAE,UAAU,cAAc,MAA0B;AAChF,QAAM,UAAU,iBAAiB,cAAc,aAAa;AAC5D,QAAM,YAAY,aAAa;AAC/B,QAAM,YAAY,mBAAmB,OAAO;AAC5C,QAAM,WAAW,CAAC,MAAM,MAAM,YAAY,SAAS,EAAjC;AAClB,QAAM,QAAQ,iBAAiB;AAE/B,MAAI,aAAa,QAAQ,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,SACE,CAAC,gBACE,QAAQ,OACP,CAAC,gBAAgB,YAAY,CAAC,OAC5B,CAAC,qBAAqB,SAAS,QAAQ,iBAAkB,gBACtD,SACH,EAFC,qBAGH,EAJC,mBAMD,CAAC,IAAI,OAAO,EAAE,SAAS,OAAO,IAAI,SAAS,EAA1C,KAEL,EAVC;AAYL;",
+  "sourcesContent": ["import { FloatingOverlay, FloatingPortal } from '@floating-ui/react-dom-interactions'\nimport { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'\nimport { Dismissable } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\n\nimport { useSelectContext } from './context'\nimport { useShowSelectSheet } from './Select'\nimport { SelectContentProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\nexport const SelectContent = ({\n  children,\n  __scopeSelect,\n  zIndex = 1000,\n  ...focusScopeProps\n}: SelectContentProps & FocusScopeProps) => {\n  const context = useSelectContext(CONTENT_NAME, __scopeSelect)\n  const themeName = useThemeName()\n  const showSheet = useShowSelectSheet(context)\n  const contents = <Theme name={themeName}>{children}</Theme>\n  const touch = useIsTouchDevice()\n\n  if (showSheet && context.open) {\n    return contents\n  }\n\n  return (\n    <FloatingPortal>\n      {context.open ? (\n        <FloatingOverlay style={{ zIndex }} lockScroll={!touch}>\n          <FocusScope loop trapped {...focusScopeProps}>\n            <Dismissable disableOutsidePointerEvents>{contents}</Dismissable>\n          </FocusScope>\n        </FloatingOverlay>\n      ) : (\n        <div style={{ display: 'none' }}>{contents}</div>\n      )}\n    </FloatingPortal>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,OAAO,kBAAkB,oBAAoB;AACtD,SAAS,mBAAmB;AAC5B,SAAS,kBAAmC;AAE5C,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AAOnC,MAAM,eAAe;AAEd,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,KACN;AACL,MAA4C;AAC1C,QAAM,UAAU,iBAAiB,cAAc,aAAa;AAC5D,QAAM,YAAY,aAAa;AAC/B,QAAM,YAAY,mBAAmB,OAAO;AAC5C,QAAM,WAAW,CAAC,MAAM,MAAM,YAAY,SAAS,EAAjC;AAClB,QAAM,QAAQ,iBAAiB;AAE/B,MAAI,aAAa,QAAQ,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,SACE,CAAC,gBACE,QAAQ,OACP,CAAC,gBAAgB,OAAO,EAAE,OAAO,GAAG,YAAY,CAAC,OAC/C,CAAC,WAAW,KAAK,YAAY,iBAC3B,CAAC,YAAY,6BAA6B,SAAS,EAAlD,YACH,EAFC,WAGH,EAJC,mBAMD,CAAC,IAAI,OAAO,EAAE,SAAS,OAAO,IAAI,SAAS,EAA1C,KAEL,EAVC;AAYL;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/select",
-  "version": "1.0.1-beta.156",
+  "version": "1.0.1-beta.157",
   "sideEffects": [
     "*.css"
   ],
@@ -27,16 +27,18 @@
     "@floating-ui/react-dom-interactions": "^0.8.1",
     "@floating-ui/react-native": "^0.8.0",
     "@radix-ui/react-use-previous": "^0.1.1",
-    "@tamagui/compose-refs": "^1.0.1-beta.156",
-    "@tamagui/core": "^1.0.1-beta.156",
-    "@tamagui/create-context": "^1.0.1-beta.156",
-    "@tamagui/list-item": "^1.0.1-beta.156",
-    "@tamagui/portal": "^1.0.1-beta.156",
-    "@tamagui/separator": "^1.0.1-beta.156",
-    "@tamagui/stacks": "^1.0.1-beta.156",
-    "@tamagui/text": "^1.0.1-beta.156",
-    "@tamagui/use-controllable-state": "^1.0.1-beta.156",
-    "@tamagui/use-event": "^1.0.1-beta.156"
+    "@tamagui/compose-refs": "^1.0.1-beta.157",
+    "@tamagui/core": "^1.0.1-beta.157",
+    "@tamagui/create-context": "^1.0.1-beta.157",
+    "@tamagui/dismissable": "^1.0.1-beta.157",
+    "@tamagui/focus-scope": "^1.0.1-beta.157",
+    "@tamagui/list-item": "^1.0.1-beta.157",
+    "@tamagui/portal": "^1.0.1-beta.157",
+    "@tamagui/separator": "^1.0.1-beta.157",
+    "@tamagui/stacks": "^1.0.1-beta.157",
+    "@tamagui/text": "^1.0.1-beta.157",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.157",
+    "@tamagui/use-event": "^1.0.1-beta.157"
   },
   "peerDependencies": {
     "react": "*",
@@ -44,7 +46,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.156",
+    "@tamagui/build": "^1.0.1-beta.157",
     "@types/react-native": "^0.69.2",
     "react": "*",
     "react-dom": "*",

package/src/SelectContent.tsx

@@ -1,10 +1,7 @@
-import {
-  FloatingFocusManager,
-  FloatingOverlay,
-  FloatingPortal,
-} from '@floating-ui/react-dom-interactions'
+import { FloatingOverlay, FloatingPortal } from '@floating-ui/react-dom-interactions'
 import { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'
-import * as React from 'react'
+import { Dismissable } from '@tamagui/dismissable'
+import { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'
 
 import { useSelectContext } from './context'
 import { useShowSelectSheet } from './Select'
@@ -16,7 +13,12 @@ import { SelectContentProps } from './types'
 
 const CONTENT_NAME = 'SelectContent'
 
-export const SelectContent = ({ children, __scopeSelect }: SelectContentProps) => {
+export const SelectContent = ({
+  children,
+  __scopeSelect,
+  zIndex = 1000,
+  ...focusScopeProps
+}: SelectContentProps & FocusScopeProps) => {
   const context = useSelectContext(CONTENT_NAME, __scopeSelect)
   const themeName = useThemeName()
   const showSheet = useShowSelectSheet(context)
@@ -30,10 +32,10 @@ export const SelectContent = ({ children, __scopeSelect }: SelectContentProps) =
   return (
     <FloatingPortal>
       {context.open ? (
-        <FloatingOverlay lockScroll={!touch}>
-          <FloatingFocusManager context={context.floatingContext!} preventTabbing>
-            {contents}
-          </FloatingFocusManager>
+        <FloatingOverlay style={{ zIndex }} lockScroll={!touch}>
+          <FocusScope loop trapped {...focusScopeProps}>
+            <Dismissable disableOutsidePointerEvents>{contents}</Dismissable>
+          </FocusScope>
         </FloatingOverlay>
       ) : (
         <div style={{ display: 'none' }}>{contents}</div>

package/src/types.tsx

@@ -80,7 +80,7 @@ export type SelectViewportProps = ThemeableStackProps & {
   size?: SizeTokens
 }
 
-export type SelectContentProps = ScopedProps<{ children?: React.ReactNode }>
+export type SelectContentProps = ScopedProps<{ children?: React.ReactNode; zIndex?: number }>
 
 export interface SelectScrollButtonImplProps extends YStackProps {
   dir: 'up' | 'down'

package/types/Select.d.ts

@@ -262,7 +262,12 @@ export declare const SelectSheetContents: {
     displayName: string;
 };
 export declare const Select: ((props: ScopedProps<SelectProps>) => JSX.Element) & {
-    Content: ({ children, __scopeSelect }: import("./types").SelectContentProps) => JSX.Element;
+    Content: ({ children, __scopeSelect, zIndex, ...focusScopeProps }: {
+        children?: React.ReactNode;
+        zIndex?: number | undefined;
+    } & {
+        __scopeSelect?: import("@tamagui/create-context").Scope<any>;
+    } & import("@tamagui/focus-scope").FocusScopeProps) => JSX.Element;
     Group: React.ForwardRefExoticComponent<((Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
         readonly fullscreen?: boolean | undefined;
         readonly elevation?: import("@tamagui/core").SizeTokens | undefined;

package/types/SelectContent.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { FocusScopeProps } from '@tamagui/focus-scope';
 import { SelectContentProps } from './types';
-export declare const SelectContent: ({ children, __scopeSelect }: SelectContentProps) => JSX.Element;
+export declare const SelectContent: ({ children, __scopeSelect, zIndex, ...focusScopeProps }: SelectContentProps & FocusScopeProps) => JSX.Element;
 //# sourceMappingURL=SelectContent.d.ts.map

package/types/types.d.ts

@@ -71,6 +71,7 @@ export declare type SelectViewportProps = ThemeableStackProps & {
 };
 export declare type SelectContentProps = ScopedProps<{
     children?: React.ReactNode;
+    zIndex?: number;
 }>;
 export interface SelectScrollButtonImplProps extends YStackProps {
     dir: 'up' | 'down';