@tamagui/select 1.0.1-beta.21 → 1.0.1-beta.210

package/dist/jsx/SelectViewport.native.js

@@ -0,0 +1,13 @@
+import { PortalItem } from "@tamagui/portal";
+import { VIEWPORT_NAME } from "./constants";
+import { useSelectContext } from "./context";
+const SelectViewport = (props) => {
+  const { __scopeSelect, children } = props;
+  const context = useSelectContext(VIEWPORT_NAME, __scopeSelect);
+  return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>;
+};
+SelectViewport.displayName = VIEWPORT_NAME;
+export {
+  SelectViewport
+};
+//# sourceMappingURL=SelectViewport.native.js.map

package/dist/jsx/SelectViewport.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SelectViewport.native.tsx"],
+  "sourcesContent": ["import { PortalItem } from '@tamagui/portal'\nimport * as React from 'react'\n\nimport { VIEWPORT_NAME } from './constants'\nimport { useSelectContext } from './context'\nimport { ScopedProps, SelectViewportProps } from './types'\n\nexport const SelectViewport = (props: ScopedProps<SelectViewportProps>) => {\n  const { __scopeSelect, children } = props\n  const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)\n  return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>\n}\n\nSelectViewport.displayName = VIEWPORT_NAME\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAG1B,MAAM,iBAAiB,CAAC,UAA4C;AACzE,QAAM,EAAE,eAAe,SAAS,IAAI;AACpC,QAAM,UAAU,iBAAiB,eAAe,aAAa;AAC7D,SAAO,CAAC,WAAW,UAAU,GAAG,QAAQ,0BAA0B,SAAS,EAAnE;AACV;AAEA,eAAe,cAAc;",
+  "names": []
+}

package/dist/jsx/constants.js

@@ -0,0 +1,17 @@
+const SELECT_NAME = "Select";
+const WINDOW_PADDING = 8;
+const SCROLL_ARROW_VELOCITY = 8;
+const SCROLL_ARROW_THRESHOLD = 8;
+const MIN_HEIGHT = 80;
+const FALLBACK_THRESHOLD = 16;
+const VIEWPORT_NAME = "SelectViewport";
+export {
+  FALLBACK_THRESHOLD,
+  MIN_HEIGHT,
+  SCROLL_ARROW_THRESHOLD,
+  SCROLL_ARROW_VELOCITY,
+  SELECT_NAME,
+  VIEWPORT_NAME,
+  WINDOW_PADDING
+};
+//# sourceMappingURL=constants.js.map

package/dist/jsx/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/constants.tsx"],
+  "sourcesContent": ["export const SELECT_NAME = 'Select'\nexport const WINDOW_PADDING = 8\nexport const SCROLL_ARROW_VELOCITY = 8\nexport const SCROLL_ARROW_THRESHOLD = 8\nexport const MIN_HEIGHT = 80\nexport const FALLBACK_THRESHOLD = 16\nexport const VIEWPORT_NAME = 'SelectViewport'\n"],
+  "mappings": "AAAO,MAAM,cAAc;AACpB,MAAM,iBAAiB;AACvB,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,aAAa;AACnB,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;",
+  "names": []
+}

package/dist/jsx/context.js

@@ -0,0 +1,15 @@
+import { createContextScope } from "@tamagui/create-context";
+import { SELECT_NAME } from "./constants";
+const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME);
+const [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
+const ForwardSelectContext = (props) => {
+  return <SelectProvider isInSheet scope={props.__scopeSelect} {...props.context}>{props.children}</SelectProvider>;
+};
+export {
+  ForwardSelectContext,
+  SelectProvider,
+  createSelectContext,
+  createSelectScope,
+  useSelectContext
+};
+//# sourceMappingURL=context.js.map

package/dist/jsx/context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/context.tsx"],
+  "sourcesContent": ["import { createContextScope } from '@tamagui/create-context'\n\nimport { SELECT_NAME } from './constants'\nimport { ScopedProps, SelectContextValue } from './types'\n\nexport const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME)\n\nexport const [SelectProvider, useSelectContext] =\n  createSelectContext<SelectContextValue>(SELECT_NAME)\n\nexport const ForwardSelectContext = (\n  props: ScopedProps<{ children?: any; context: SelectContextValue }>\n) => {\n  return (\n    <SelectProvider isInSheet scope={props.__scopeSelect} {...props.context}>\n      {props.children}\n    </SelectProvider>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AAEnC,SAAS,mBAAmB;AAGrB,MAAM,CAAC,qBAAqB,iBAAiB,IAAI,mBAAmB,WAAW;AAE/E,MAAM,CAAC,gBAAgB,gBAAgB,IAC5C,oBAAwC,WAAW;AAE9C,MAAM,uBAAuB,CAClC,UACG;AACH,SACE,CAAC,eAAe,UAAU,OAAO,MAAM,mBAAmB,MAAM,UAC7D,MAAM,SACT,EAFC;AAIL;",
+  "names": []
+}

package/dist/jsx/index.js

@@ -1 +1,3 @@
 export * from "./Select";
+export * from "./context";
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "sourcesContent": ["export * from './Select'\nexport type {\n  SelectContentProps,\n  SelectProps,\n  SelectScrollButtonProps,\n  SelectViewportProps,\n} from './types'\nexport * from './context'\n"],
+  "mappings": "AAAA,cAAc;AAOd,cAAc;",
+  "names": []
+}

package/dist/jsx/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/jsx/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/jsx/useSelectBreakpointActive.js

@@ -0,0 +1,14 @@
+import { useMedia } from "@tamagui/core";
+const useSelectBreakpointActive = (sheetBreakpoint) => {
+  const media = useMedia();
+  return sheetBreakpoint ? media[sheetBreakpoint] : false;
+};
+const useShowSelectSheet = (context) => {
+  const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
+  return context.open === false ? false : breakpointActive;
+};
+export {
+  useSelectBreakpointActive,
+  useShowSelectSheet
+};
+//# sourceMappingURL=useSelectBreakpointActive.js.map

package/dist/jsx/useSelectBreakpointActive.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useSelectBreakpointActive.tsx"],
+  "sourcesContent": ["import { useMedia } from '@tamagui/core'\n\nimport { SelectContextValue } from './types'\n\nexport const useSelectBreakpointActive = (\n  sheetBreakpoint: SelectContextValue['sheetBreakpoint']\n) => {\n  const media = useMedia()\n  return sheetBreakpoint ? media[sheetBreakpoint] : false\n}\n\nexport const useShowSelectSheet = (context: SelectContextValue) => {\n  const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n  return context.open === false ? false : breakpointActive\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AAIlB,MAAM,4BAA4B,CACvC,oBACG;AACH,QAAM,QAAQ,SAAS;AACvB,SAAO,kBAAkB,MAAM,mBAAmB;AACpD;AAEO,MAAM,qBAAqB,CAAC,YAAgC;AACjE,QAAM,mBAAmB,0BAA0B,QAAQ,eAAe;AAC1E,SAAO,QAAQ,SAAS,QAAQ,QAAQ;AAC1C;",
+  "names": []
+}

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@tamagui/select",
-  "version": "1.0.1-beta.21",
-  "sideEffects": true,
+  "version": "1.0.1-beta.210",
+  "sideEffects": [
+    "*.css"
+  ],
   "source": "src/index.ts",
-  "typings": "types",
+  "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -15,20 +18,27 @@
     "build": "tamagui-build",
     "watch": "tamagui-build --watch",
     "clean": "tamagui-build clean",
-    "clean:build": "tamagui-build clean:build"
+    "clean:build": "tamagui-build clean:build",
+    "lint": "eslint",
+    "lint:fix": "yarn lint --fix"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "0.7.0",
-    "@floating-ui/react-dom-interactions": "^0.4.0",
-    "@floating-ui/react-native": "^0.7.0",
-    "@radix-ui/react-use-callback-ref": "^0.1.0",
+    "@floating-ui/react-dom": "^1.0.0",
+    "@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.21",
-    "@tamagui/core": "^1.0.1-beta.21",
-    "@tamagui/create-context": "^1.0.1-beta.21",
-    "@tamagui/separator": "^1.0.1-beta.21",
-    "@tamagui/stacks": "^1.0.1-beta.21",
-    "@tamagui/use-controllable-state": "^1.0.1-beta.21"
+    "@tamagui/compose-refs": "^1.0.1-beta.210",
+    "@tamagui/core": "^1.0.1-beta.210",
+    "@tamagui/create-context": "^1.0.1-beta.210",
+    "@tamagui/dismissable": "^1.0.1-beta.210",
+    "@tamagui/focus-scope": "^1.0.1-beta.210",
+    "@tamagui/list-item": "^1.0.1-beta.210",
+    "@tamagui/portal": "^1.0.1-beta.210",
+    "@tamagui/separator": "^1.0.1-beta.210",
+    "@tamagui/stacks": "^1.0.1-beta.210",
+    "@tamagui/text": "^1.0.1-beta.210",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.210",
+    "@tamagui/use-event": "^1.0.1-beta.210"
   },
   "peerDependencies": {
     "react": "*",
@@ -36,8 +46,8 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.21",
-    "@types/react-native": "^0.67.3",
+    "@tamagui/build": "^1.0.1-beta.210",
+    "@types/react-native": "^0.69.2",
     "react": "*",
     "react-dom": "*",
     "react-native": "*"

package/src/BubbleSelect.tsx

@@ -0,0 +1,46 @@
+import { usePrevious } from '@radix-ui/react-use-previous'
+import { useComposedRefs } from '@tamagui/compose-refs'
+import * as React from 'react'
+
+/* -----------------------------------------------------------------------------------------------*/
+const BubbleSelect = React.forwardRef<HTMLSelectElement, React.ComponentPropsWithoutRef<'select'>>(
+  (props, forwardedRef) => {
+    const { value, ...selectProps } = props
+    const ref = React.useRef<HTMLSelectElement>(null)
+    const composedRefs = useComposedRefs(forwardedRef, ref)
+    const prevValue = usePrevious(value)
+
+    // Bubble value change to parents (e.g form change event)
+    React.useEffect(() => {
+      const select = ref.current!
+      const selectProto = window.HTMLSelectElement.prototype
+      const descriptor = Object.getOwnPropertyDescriptor(selectProto, 'value') as PropertyDescriptor
+      const setValue = descriptor.set
+      if (prevValue !== value && setValue) {
+        const event = new Event('change', { bubbles: true })
+        setValue.call(select, value)
+        select.dispatchEvent(event)
+      }
+    }, [prevValue, value])
+
+    /**
+     * We purposefully use a `select` here to support form autofill as much
+     * as possible.
+     *
+     * We purposefully do not add the `value` attribute here to allow the value
+     * to be set programatically and bubble to any parent form `onChange` event.
+     * Adding the `value` will cause React to consider the programatic
+     * dispatch a duplicate and it will get swallowed.
+     *
+     * We use `VisuallyHidden` rather than `display: "none"` because Safari autofill
+     * won't work otherwise.
+     */
+    // TODO
+    return null
+    // return (
+    //   <VisuallyHidden asChild>
+    //     <select {...selectProps} ref={composedRefs} defaultValue={value} />
+    //   </VisuallyHidden>
+    // )
+  }
+)