@tamagui/focusable 1.0.1-beta.207 → 1.0.1-beta.208

package/dist/cjs/focusableInputHOC.js

@@ -28,53 +28,56 @@ var import_react = require("react");
 var import_react2 = require("react");
 var import_registerFocusable = require("./registerFocusable");
 function focusableInputHOC(Component) {
-  return (0, import_react2.forwardRef)(
-    (props, ref) => {
-      const isInput = (0, import_core.isTamaguiComponent)(Component) && Component.staticConfig.isInput;
-      const inputValue = (0, import_react.useRef)(props.value || props.defaultValue || "");
-      const inputRef = (0, import_react2.useCallback)(
-        (input) => {
-          if (!props.id)
-            return;
-          if (!input)
-            return;
-          (0, import_registerFocusable.registerFocusable)(props.id, {
-            focus: input.focus,
-            ...isInput && {
-              focusAndSelect() {
-                input.focus();
-                if (input.setSelection && typeof inputValue.current === "string") {
-                  input.setSelection(0, inputValue.current.length);
+  const component = Component.extractable(
+    (0, import_react2.forwardRef)(
+      (props, ref) => {
+        const isInput = (0, import_core.isTamaguiComponent)(Component) && Component.staticConfig.isInput;
+        const inputValue = (0, import_react.useRef)(props.value || props.defaultValue || "");
+        const inputRef = (0, import_react2.useCallback)(
+          (input) => {
+            if (!props.id)
+              return;
+            if (!input)
+              return;
+            (0, import_registerFocusable.registerFocusable)(props.id, {
+              focus: input.focus,
+              ...isInput && {
+                focusAndSelect() {
+                  input.focus();
+                  if (input.setSelection && typeof inputValue.current === "string") {
+                    input.setSelection(0, inputValue.current.length);
+                  }
                 }
               }
-            }
-          });
-        },
-        [isInput, props.id]
-      );
-      const combinedRefs = (0, import_compose_refs.composeRefs)(ref, inputRef);
-      (0, import_react2.useEffect)(() => {
-        if (!props.id)
-          return;
-        return () => {
-          (0, import_registerFocusable.unregisterFocusable)(props.id);
-        };
-      }, [props.id]);
-      const onChangeText = (0, import_core.useEvent)((value) => {
-        var _a;
-        inputValue.current = value;
-        (_a = props.onChangeText) == null ? void 0 : _a.call(props, value);
-      });
-      const finalProps = isInput ? {
-        ...props,
-        onChangeText
-      } : props;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
-        ref: combinedRefs,
-        ...finalProps
-      });
-    }
+            });
+          },
+          [isInput, props.id]
+        );
+        const combinedRefs = (0, import_compose_refs.composeRefs)(ref, inputRef);
+        (0, import_react2.useEffect)(() => {
+          if (!props.id)
+            return;
+          return () => {
+            (0, import_registerFocusable.unregisterFocusable)(props.id);
+          };
+        }, [props.id]);
+        const onChangeText = (0, import_core.useEvent)((value) => {
+          var _a;
+          inputValue.current = value;
+          (_a = props.onChangeText) == null ? void 0 : _a.call(props, value);
+        });
+        const finalProps = isInput ? {
+          ...props,
+          onChangeText
+        } : props;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
+          ref: combinedRefs,
+          ...finalProps
+        });
+      }
+    )
   );
+  return component;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/focusableInputHOC.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/focusableInputHOC.tsx"],
-  "sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { isTamaguiComponent, useEvent } from '@tamagui/core'\nimport React, { useRef } from 'react'\nimport { forwardRef, useCallback, useEffect } from 'react'\n\nimport { registerFocusable, unregisterFocusable } from './registerFocusable'\n\nexport function focusableInputHOC<A extends Function>(Component: A): A {\n  return forwardRef(\n    (\n      props: {\n        id?: string\n        onChangeText?: (val: string) => void\n        value?: string\n        defaultValue?: string\n      },\n      ref\n    ) => {\n      const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput\n      const inputValue = useRef(props.value || props.defaultValue || '')\n\n      const inputRef = useCallback(\n        (input) => {\n          if (!props.id) return\n          if (!input) return\n          registerFocusable(props.id, {\n            focus: input.focus,\n\n            ...(isInput && {\n              // react-native doesn't support programmatic .select()\n              focusAndSelect() {\n                input.focus()\n                if (input.setSelection && typeof inputValue.current === 'string') {\n                  input.setSelection(0, inputValue.current.length)\n                }\n              },\n            }),\n          })\n        },\n        [isInput, props.id]\n      )\n\n      const combinedRefs = composeRefs(ref, inputRef)\n\n      useEffect(() => {\n        if (!props.id) return\n        return () => {\n          unregisterFocusable(props.id!)\n        }\n      }, [props.id])\n\n      const onChangeText = useEvent((value) => {\n        inputValue.current = value\n        props.onChangeText?.(value)\n      })\n\n      const finalProps = isInput\n        ? {\n            ...props,\n            onChangeText,\n          }\n        : props\n\n      return <Component ref={combinedRefs} {...finalProps} />\n    }\n  ) as any\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+Da;AA/Db,0BAA4B;AAC5B,kBAA6C;AAC7C,mBAA8B;AAC9B,IAAAA,gBAAmD;AAEnD,+BAAuD;AAEhD,SAAS,kBAAsC,WAAiB;AACrE,aAAO;AAAA,IACL,CACE,OAMA,QACG;AACH,YAAM,cAAU,gCAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,YAAM,iBAAa,qBAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AAEjE,YAAM,eAAW;AAAA,QACf,CAAC,UAAU;AACT,cAAI,CAAC,MAAM;AAAI;AACf,cAAI,CAAC;AAAO;AACZ,0DAAkB,MAAM,IAAI;AAAA,YAC1B,OAAO,MAAM;AAAA,YAEb,GAAI,WAAW;AAAA,cAEb,iBAAiB;AACf,sBAAM,MAAM;AACZ,oBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,wBAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,gBACjD;AAAA,cACF;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,CAAC,SAAS,MAAM,EAAE;AAAA,MACpB;AAEA,YAAM,mBAAe,iCAAY,KAAK,QAAQ;AAE9C,mCAAU,MAAM;AACd,YAAI,CAAC,MAAM;AAAI;AACf,eAAO,MAAM;AACX,4DAAoB,MAAM,EAAG;AAAA,QAC/B;AAAA,MACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,YAAM,mBAAe,sBAAS,CAAC,UAAU;AAnD/C;AAoDQ,mBAAW,UAAU;AACrB,oBAAM,iBAAN,+BAAqB;AAAA,MACvB,CAAC;AAED,YAAM,aAAa,UACf;AAAA,QACE,GAAG;AAAA,QACH;AAAA,MACF,IACA;AAEJ,aAAO,4CAAC;AAAA,QAAU,KAAK;AAAA,QAAe,GAAG;AAAA,OAAY;AAAA,IACvD;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport React, { useRef } from 'react'\nimport { forwardRef, useCallback, useEffect } from 'react'\n\nimport { registerFocusable, unregisterFocusable } from './registerFocusable'\n\nexport function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {\n  const component = Component.extractable(\n    forwardRef(\n      (\n        props: {\n          id?: string\n          onChangeText?: (val: string) => void\n          value?: string\n          defaultValue?: string\n        },\n        ref\n      ) => {\n        const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput\n        const inputValue = useRef(props.value || props.defaultValue || '')\n\n        const inputRef = useCallback(\n          (input) => {\n            if (!props.id) return\n            if (!input) return\n            registerFocusable(props.id, {\n              focus: input.focus,\n\n              ...(isInput && {\n                // react-native doesn't support programmatic .select()\n                focusAndSelect() {\n                  input.focus()\n                  if (input.setSelection && typeof inputValue.current === 'string') {\n                    input.setSelection(0, inputValue.current.length)\n                  }\n                },\n              }),\n            })\n          },\n          [isInput, props.id]\n        )\n\n        const combinedRefs = composeRefs(ref, inputRef)\n\n        useEffect(() => {\n          if (!props.id) return\n          return () => {\n            unregisterFocusable(props.id!)\n          }\n        }, [props.id])\n\n        const onChangeText = useEvent((value) => {\n          inputValue.current = value\n          props.onChangeText?.(value)\n        })\n\n        const finalProps = isInput\n          ? {\n              ...props,\n              onChangeText,\n            }\n          : props\n\n        // @ts-expect-error\n        return <Component ref={combinedRefs} {...finalProps} />\n      }\n    )\n  ) as any\n\n  return component\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEe;AAjEf,0BAA4B;AAC5B,kBAA+D;AAC/D,mBAA8B;AAC9B,IAAAA,gBAAmD;AAEnD,+BAAuD;AAEhD,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,QAC1B;AAAA,MACE,CACE,OAMA,QACG;AACH,cAAM,cAAU,gCAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,cAAM,iBAAa,qBAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AAEjE,cAAM,eAAW;AAAA,UACf,CAAC,UAAU;AACT,gBAAI,CAAC,MAAM;AAAI;AACf,gBAAI,CAAC;AAAO;AACZ,4DAAkB,MAAM,IAAI;AAAA,cAC1B,OAAO,MAAM;AAAA,cAEb,GAAI,WAAW;AAAA,gBAEb,iBAAiB;AACf,wBAAM,MAAM;AACZ,sBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,0BAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,kBACjD;AAAA,gBACF;AAAA,cACF;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,CAAC,SAAS,MAAM,EAAE;AAAA,QACpB;AAEA,cAAM,mBAAe,iCAAY,KAAK,QAAQ;AAE9C,qCAAU,MAAM;AACd,cAAI,CAAC,MAAM;AAAI;AACf,iBAAO,MAAM;AACX,8DAAoB,MAAM,EAAG;AAAA,UAC/B;AAAA,QACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,cAAM,mBAAe,sBAAS,CAAC,UAAU;AApDjD;AAqDU,qBAAW,UAAU;AACrB,sBAAM,iBAAN,+BAAqB;AAAA,QACvB,CAAC;AAED,cAAM,aAAa,UACf;AAAA,UACE,GAAG;AAAA,UACH;AAAA,QACF,IACA;AAGJ,eAAO,4CAAC;AAAA,UAAU,KAAK;AAAA,UAAe,GAAG;AAAA,SAAY;AAAA,MACvD;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": ["import_react"]
 }

package/dist/esm/focusableInputHOC.js

@@ -5,53 +5,56 @@ import { useRef } from "react";
 import { forwardRef, useCallback, useEffect } from "react";
 import { registerFocusable, unregisterFocusable } from "./registerFocusable";
 function focusableInputHOC(Component) {
-  return forwardRef(
-    (props, ref) => {
-      const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput;
-      const inputValue = useRef(props.value || props.defaultValue || "");
-      const inputRef = useCallback(
-        (input) => {
-          if (!props.id)
-            return;
-          if (!input)
-            return;
-          registerFocusable(props.id, {
-            focus: input.focus,
-            ...isInput && {
-              focusAndSelect() {
-                input.focus();
-                if (input.setSelection && typeof inputValue.current === "string") {
-                  input.setSelection(0, inputValue.current.length);
+  const component = Component.extractable(
+    forwardRef(
+      (props, ref) => {
+        const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput;
+        const inputValue = useRef(props.value || props.defaultValue || "");
+        const inputRef = useCallback(
+          (input) => {
+            if (!props.id)
+              return;
+            if (!input)
+              return;
+            registerFocusable(props.id, {
+              focus: input.focus,
+              ...isInput && {
+                focusAndSelect() {
+                  input.focus();
+                  if (input.setSelection && typeof inputValue.current === "string") {
+                    input.setSelection(0, inputValue.current.length);
+                  }
                 }
               }
-            }
-          });
-        },
-        [isInput, props.id]
-      );
-      const combinedRefs = composeRefs(ref, inputRef);
-      useEffect(() => {
-        if (!props.id)
-          return;
-        return () => {
-          unregisterFocusable(props.id);
-        };
-      }, [props.id]);
-      const onChangeText = useEvent((value) => {
-        var _a;
-        inputValue.current = value;
-        (_a = props.onChangeText) == null ? void 0 : _a.call(props, value);
-      });
-      const finalProps = isInput ? {
-        ...props,
-        onChangeText
-      } : props;
-      return /* @__PURE__ */ jsx(Component, {
-        ref: combinedRefs,
-        ...finalProps
-      });
-    }
+            });
+          },
+          [isInput, props.id]
+        );
+        const combinedRefs = composeRefs(ref, inputRef);
+        useEffect(() => {
+          if (!props.id)
+            return;
+          return () => {
+            unregisterFocusable(props.id);
+          };
+        }, [props.id]);
+        const onChangeText = useEvent((value) => {
+          var _a;
+          inputValue.current = value;
+          (_a = props.onChangeText) == null ? void 0 : _a.call(props, value);
+        });
+        const finalProps = isInput ? {
+          ...props,
+          onChangeText
+        } : props;
+        return /* @__PURE__ */ jsx(Component, {
+          ref: combinedRefs,
+          ...finalProps
+        });
+      }
+    )
   );
+  return component;
 }
 export {
   focusableInputHOC

package/dist/esm/focusableInputHOC.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/focusableInputHOC.tsx"],
-  "sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { isTamaguiComponent, useEvent } from '@tamagui/core'\nimport React, { useRef } from 'react'\nimport { forwardRef, useCallback, useEffect } from 'react'\n\nimport { registerFocusable, unregisterFocusable } from './registerFocusable'\n\nexport function focusableInputHOC<A extends Function>(Component: A): A {\n  return forwardRef(\n    (\n      props: {\n        id?: string\n        onChangeText?: (val: string) => void\n        value?: string\n        defaultValue?: string\n      },\n      ref\n    ) => {\n      const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput\n      const inputValue = useRef(props.value || props.defaultValue || '')\n\n      const inputRef = useCallback(\n        (input) => {\n          if (!props.id) return\n          if (!input) return\n          registerFocusable(props.id, {\n            focus: input.focus,\n\n            ...(isInput && {\n              // react-native doesn't support programmatic .select()\n              focusAndSelect() {\n                input.focus()\n                if (input.setSelection && typeof inputValue.current === 'string') {\n                  input.setSelection(0, inputValue.current.length)\n                }\n              },\n            }),\n          })\n        },\n        [isInput, props.id]\n      )\n\n      const combinedRefs = composeRefs(ref, inputRef)\n\n      useEffect(() => {\n        if (!props.id) return\n        return () => {\n          unregisterFocusable(props.id!)\n        }\n      }, [props.id])\n\n      const onChangeText = useEvent((value) => {\n        inputValue.current = value\n        props.onChangeText?.(value)\n      })\n\n      const finalProps = isInput\n        ? {\n            ...props,\n            onChangeText,\n          }\n        : props\n\n      return <Component ref={combinedRefs} {...finalProps} />\n    }\n  ) as any\n}\n"],
-  "mappings": "AA+Da;AA/Db,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB,gBAAgB;AAC7C,SAAgB,cAAc;AAC9B,SAAS,YAAY,aAAa,iBAAiB;AAEnD,SAAS,mBAAmB,2BAA2B;AAEhD,SAAS,kBAAsC,WAAiB;AACrE,SAAO;AAAA,IACL,CACE,OAMA,QACG;AACH,YAAM,UAAU,mBAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,YAAM,aAAa,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AAEjE,YAAM,WAAW;AAAA,QACf,CAAC,UAAU;AACT,cAAI,CAAC,MAAM;AAAI;AACf,cAAI,CAAC;AAAO;AACZ,4BAAkB,MAAM,IAAI;AAAA,YAC1B,OAAO,MAAM;AAAA,YAEb,GAAI,WAAW;AAAA,cAEb,iBAAiB;AACf,sBAAM,MAAM;AACZ,oBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,wBAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,gBACjD;AAAA,cACF;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,CAAC,SAAS,MAAM,EAAE;AAAA,MACpB;AAEA,YAAM,eAAe,YAAY,KAAK,QAAQ;AAE9C,gBAAU,MAAM;AACd,YAAI,CAAC,MAAM;AAAI;AACf,eAAO,MAAM;AACX,8BAAoB,MAAM,EAAG;AAAA,QAC/B;AAAA,MACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,YAAM,eAAe,SAAS,CAAC,UAAU;AAnD/C;AAoDQ,mBAAW,UAAU;AACrB,oBAAM,iBAAN,+BAAqB;AAAA,MACvB,CAAC;AAED,YAAM,aAAa,UACf;AAAA,QACE,GAAG;AAAA,QACH;AAAA,MACF,IACA;AAEJ,aAAO,oBAAC;AAAA,QAAU,KAAK;AAAA,QAAe,GAAG;AAAA,OAAY;AAAA,IACvD;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport React, { useRef } from 'react'\nimport { forwardRef, useCallback, useEffect } from 'react'\n\nimport { registerFocusable, unregisterFocusable } from './registerFocusable'\n\nexport function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {\n  const component = Component.extractable(\n    forwardRef(\n      (\n        props: {\n          id?: string\n          onChangeText?: (val: string) => void\n          value?: string\n          defaultValue?: string\n        },\n        ref\n      ) => {\n        const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput\n        const inputValue = useRef(props.value || props.defaultValue || '')\n\n        const inputRef = useCallback(\n          (input) => {\n            if (!props.id) return\n            if (!input) return\n            registerFocusable(props.id, {\n              focus: input.focus,\n\n              ...(isInput && {\n                // react-native doesn't support programmatic .select()\n                focusAndSelect() {\n                  input.focus()\n                  if (input.setSelection && typeof inputValue.current === 'string') {\n                    input.setSelection(0, inputValue.current.length)\n                  }\n                },\n              }),\n            })\n          },\n          [isInput, props.id]\n        )\n\n        const combinedRefs = composeRefs(ref, inputRef)\n\n        useEffect(() => {\n          if (!props.id) return\n          return () => {\n            unregisterFocusable(props.id!)\n          }\n        }, [props.id])\n\n        const onChangeText = useEvent((value) => {\n          inputValue.current = value\n          props.onChangeText?.(value)\n        })\n\n        const finalProps = isInput\n          ? {\n              ...props,\n              onChangeText,\n            }\n          : props\n\n        // @ts-expect-error\n        return <Component ref={combinedRefs} {...finalProps} />\n      }\n    )\n  ) as any\n\n  return component\n}\n"],
+  "mappings": "AAiEe;AAjEf,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAgB,cAAc;AAC9B,SAAS,YAAY,aAAa,iBAAiB;AAEnD,SAAS,mBAAmB,2BAA2B;AAEhD,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B;AAAA,MACE,CACE,OAMA,QACG;AACH,cAAM,UAAU,mBAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,cAAM,aAAa,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AAEjE,cAAM,WAAW;AAAA,UACf,CAAC,UAAU;AACT,gBAAI,CAAC,MAAM;AAAI;AACf,gBAAI,CAAC;AAAO;AACZ,8BAAkB,MAAM,IAAI;AAAA,cAC1B,OAAO,MAAM;AAAA,cAEb,GAAI,WAAW;AAAA,gBAEb,iBAAiB;AACf,wBAAM,MAAM;AACZ,sBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,0BAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,kBACjD;AAAA,gBACF;AAAA,cACF;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,CAAC,SAAS,MAAM,EAAE;AAAA,QACpB;AAEA,cAAM,eAAe,YAAY,KAAK,QAAQ;AAE9C,kBAAU,MAAM;AACd,cAAI,CAAC,MAAM;AAAI;AACf,iBAAO,MAAM;AACX,gCAAoB,MAAM,EAAG;AAAA,UAC/B;AAAA,QACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,cAAM,eAAe,SAAS,CAAC,UAAU;AApDjD;AAqDU,qBAAW,UAAU;AACrB,sBAAM,iBAAN,+BAAqB;AAAA,QACvB,CAAC;AAED,cAAM,aAAa,UACf;AAAA,UACE,GAAG;AAAA,UACH;AAAA,QACF,IACA;AAGJ,eAAO,oBAAC;AAAA,UAAU,KAAK;AAAA,UAAe,GAAG;AAAA,SAAY;AAAA,MACvD;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/jsx/focusableInputHOC.js

@@ -4,49 +4,52 @@ import { useRef } from "react";
 import { forwardRef, useCallback, useEffect } from "react";
 import { registerFocusable, unregisterFocusable } from "./registerFocusable";
 function focusableInputHOC(Component) {
-  return forwardRef(
-    (props, ref) => {
-      const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput;
-      const inputValue = useRef(props.value || props.defaultValue || "");
-      const inputRef = useCallback(
-        (input) => {
-          if (!props.id)
-            return;
-          if (!input)
-            return;
-          registerFocusable(props.id, {
-            focus: input.focus,
-            ...isInput && {
-              focusAndSelect() {
-                input.focus();
-                if (input.setSelection && typeof inputValue.current === "string") {
-                  input.setSelection(0, inputValue.current.length);
+  const component = Component.extractable(
+    forwardRef(
+      (props, ref) => {
+        const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput;
+        const inputValue = useRef(props.value || props.defaultValue || "");
+        const inputRef = useCallback(
+          (input) => {
+            if (!props.id)
+              return;
+            if (!input)
+              return;
+            registerFocusable(props.id, {
+              focus: input.focus,
+              ...isInput && {
+                focusAndSelect() {
+                  input.focus();
+                  if (input.setSelection && typeof inputValue.current === "string") {
+                    input.setSelection(0, inputValue.current.length);
+                  }
                 }
               }
-            }
-          });
-        },
-        [isInput, props.id]
-      );
-      const combinedRefs = composeRefs(ref, inputRef);
-      useEffect(() => {
-        if (!props.id)
-          return;
-        return () => {
-          unregisterFocusable(props.id);
-        };
-      }, [props.id]);
-      const onChangeText = useEvent((value) => {
-        inputValue.current = value;
-        props.onChangeText?.(value);
-      });
-      const finalProps = isInput ? {
-        ...props,
-        onChangeText
-      } : props;
-      return <Component ref={combinedRefs} {...finalProps} />;
-    }
+            });
+          },
+          [isInput, props.id]
+        );
+        const combinedRefs = composeRefs(ref, inputRef);
+        useEffect(() => {
+          if (!props.id)
+            return;
+          return () => {
+            unregisterFocusable(props.id);
+          };
+        }, [props.id]);
+        const onChangeText = useEvent((value) => {
+          inputValue.current = value;
+          props.onChangeText?.(value);
+        });
+        const finalProps = isInput ? {
+          ...props,
+          onChangeText
+        } : props;
+        return <Component ref={combinedRefs} {...finalProps} />;
+      }
+    )
   );
+  return component;
 }
 export {
   focusableInputHOC

package/dist/jsx/focusableInputHOC.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/focusableInputHOC.tsx"],
-  "sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { isTamaguiComponent, useEvent } from '@tamagui/core'\nimport React, { useRef } from 'react'\nimport { forwardRef, useCallback, useEffect } from 'react'\n\nimport { registerFocusable, unregisterFocusable } from './registerFocusable'\n\nexport function focusableInputHOC<A extends Function>(Component: A): A {\n  return forwardRef(\n    (\n      props: {\n        id?: string\n        onChangeText?: (val: string) => void\n        value?: string\n        defaultValue?: string\n      },\n      ref\n    ) => {\n      const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput\n      const inputValue = useRef(props.value || props.defaultValue || '')\n\n      const inputRef = useCallback(\n        (input) => {\n          if (!props.id) return\n          if (!input) return\n          registerFocusable(props.id, {\n            focus: input.focus,\n\n            ...(isInput && {\n              // react-native doesn't support programmatic .select()\n              focusAndSelect() {\n                input.focus()\n                if (input.setSelection && typeof inputValue.current === 'string') {\n                  input.setSelection(0, inputValue.current.length)\n                }\n              },\n            }),\n          })\n        },\n        [isInput, props.id]\n      )\n\n      const combinedRefs = composeRefs(ref, inputRef)\n\n      useEffect(() => {\n        if (!props.id) return\n        return () => {\n          unregisterFocusable(props.id!)\n        }\n      }, [props.id])\n\n      const onChangeText = useEvent((value) => {\n        inputValue.current = value\n        props.onChangeText?.(value)\n      })\n\n      const finalProps = isInput\n        ? {\n            ...props,\n            onChangeText,\n          }\n        : props\n\n      return <Component ref={combinedRefs} {...finalProps} />\n    }\n  ) as any\n}\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB,gBAAgB;AAC7C,SAAgB,cAAc;AAC9B,SAAS,YAAY,aAAa,iBAAiB;AAEnD,SAAS,mBAAmB,2BAA2B;AAEhD,SAAS,kBAAsC,WAAiB;AACrE,SAAO;AAAA,IACL,CACE,OAMA,QACG;AACH,YAAM,UAAU,mBAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,YAAM,aAAa,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AAEjE,YAAM,WAAW;AAAA,QACf,CAAC,UAAU;AACT,cAAI,CAAC,MAAM;AAAI;AACf,cAAI,CAAC;AAAO;AACZ,4BAAkB,MAAM,IAAI;AAAA,YAC1B,OAAO,MAAM;AAAA,YAEb,GAAI,WAAW;AAAA,cAEb,iBAAiB;AACf,sBAAM,MAAM;AACZ,oBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,wBAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,gBACjD;AAAA,cACF;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,CAAC,SAAS,MAAM,EAAE;AAAA,MACpB;AAEA,YAAM,eAAe,YAAY,KAAK,QAAQ;AAE9C,gBAAU,MAAM;AACd,YAAI,CAAC,MAAM;AAAI;AACf,eAAO,MAAM;AACX,8BAAoB,MAAM,EAAG;AAAA,QAC/B;AAAA,MACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,YAAM,eAAe,SAAS,CAAC,UAAU;AACvC,mBAAW,UAAU;AACrB,cAAM,eAAe,KAAK;AAAA,MAC5B,CAAC;AAED,YAAM,aAAa,UACf;AAAA,QACE,GAAG;AAAA,QACH;AAAA,MACF,IACA;AAEJ,aAAO,CAAC,UAAU,KAAK,kBAAkB,YAAY;AAAA,IACvD;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport React, { useRef } from 'react'\nimport { forwardRef, useCallback, useEffect } from 'react'\n\nimport { registerFocusable, unregisterFocusable } from './registerFocusable'\n\nexport function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {\n  const component = Component.extractable(\n    forwardRef(\n      (\n        props: {\n          id?: string\n          onChangeText?: (val: string) => void\n          value?: string\n          defaultValue?: string\n        },\n        ref\n      ) => {\n        const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput\n        const inputValue = useRef(props.value || props.defaultValue || '')\n\n        const inputRef = useCallback(\n          (input) => {\n            if (!props.id) return\n            if (!input) return\n            registerFocusable(props.id, {\n              focus: input.focus,\n\n              ...(isInput && {\n                // react-native doesn't support programmatic .select()\n                focusAndSelect() {\n                  input.focus()\n                  if (input.setSelection && typeof inputValue.current === 'string') {\n                    input.setSelection(0, inputValue.current.length)\n                  }\n                },\n              }),\n            })\n          },\n          [isInput, props.id]\n        )\n\n        const combinedRefs = composeRefs(ref, inputRef)\n\n        useEffect(() => {\n          if (!props.id) return\n          return () => {\n            unregisterFocusable(props.id!)\n          }\n        }, [props.id])\n\n        const onChangeText = useEvent((value) => {\n          inputValue.current = value\n          props.onChangeText?.(value)\n        })\n\n        const finalProps = isInput\n          ? {\n              ...props,\n              onChangeText,\n            }\n          : props\n\n        // @ts-expect-error\n        return <Component ref={combinedRefs} {...finalProps} />\n      }\n    )\n  ) as any\n\n  return component\n}\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAgB,cAAc;AAC9B,SAAS,YAAY,aAAa,iBAAiB;AAEnD,SAAS,mBAAmB,2BAA2B;AAEhD,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B;AAAA,MACE,CACE,OAMA,QACG;AACH,cAAM,UAAU,mBAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,cAAM,aAAa,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AAEjE,cAAM,WAAW;AAAA,UACf,CAAC,UAAU;AACT,gBAAI,CAAC,MAAM;AAAI;AACf,gBAAI,CAAC;AAAO;AACZ,8BAAkB,MAAM,IAAI;AAAA,cAC1B,OAAO,MAAM;AAAA,cAEb,GAAI,WAAW;AAAA,gBAEb,iBAAiB;AACf,wBAAM,MAAM;AACZ,sBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,0BAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,kBACjD;AAAA,gBACF;AAAA,cACF;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,CAAC,SAAS,MAAM,EAAE;AAAA,QACpB;AAEA,cAAM,eAAe,YAAY,KAAK,QAAQ;AAE9C,kBAAU,MAAM;AACd,cAAI,CAAC,MAAM;AAAI;AACf,iBAAO,MAAM;AACX,gCAAoB,MAAM,EAAG;AAAA,UAC/B;AAAA,QACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,cAAM,eAAe,SAAS,CAAC,UAAU;AACvC,qBAAW,UAAU;AACrB,gBAAM,eAAe,KAAK;AAAA,QAC5B,CAAC;AAED,cAAM,aAAa,UACf;AAAA,UACE,GAAG;AAAA,UACH;AAAA,QACF,IACA;AAGJ,eAAO,CAAC,UAAU,KAAK,kBAAkB,YAAY;AAAA,MACvD;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/focusable",
-  "version": "1.0.1-beta.207",
+  "version": "1.0.1-beta.208",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -22,15 +22,15 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "^1.0.1-beta.207",
-    "@tamagui/core": "^1.0.1-beta.207"
+    "@tamagui/compose-refs": "^1.0.1-beta.208",
+    "@tamagui/core": "^1.0.1-beta.208"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.207",
+    "@tamagui/build": "^1.0.1-beta.208",
     "react": "*",
     "react-dom": "*"
   },

package/src/focusableInputHOC.tsx

@@ -1,67 +1,72 @@
 import { composeRefs } from '@tamagui/compose-refs'
-import { isTamaguiComponent, useEvent } from '@tamagui/core'
+import { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'
 import React, { useRef } from 'react'
 import { forwardRef, useCallback, useEffect } from 'react'
 
 import { registerFocusable, unregisterFocusable } from './registerFocusable'
 
-export function focusableInputHOC<A extends Function>(Component: A): A {
-  return forwardRef(
-    (
-      props: {
-        id?: string
-        onChangeText?: (val: string) => void
-        value?: string
-        defaultValue?: string
-      },
-      ref
-    ) => {
-      const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput
-      const inputValue = useRef(props.value || props.defaultValue || '')
-
-      const inputRef = useCallback(
-        (input) => {
-          if (!props.id) return
-          if (!input) return
-          registerFocusable(props.id, {
-            focus: input.focus,
-
-            ...(isInput && {
-              // react-native doesn't support programmatic .select()
-              focusAndSelect() {
-                input.focus()
-                if (input.setSelection && typeof inputValue.current === 'string') {
-                  input.setSelection(0, inputValue.current.length)
-                }
-              },
-            }),
-          })
+export function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {
+  const component = Component.extractable(
+    forwardRef(
+      (
+        props: {
+          id?: string
+          onChangeText?: (val: string) => void
+          value?: string
+          defaultValue?: string
         },
-        [isInput, props.id]
-      )
+        ref
+      ) => {
+        const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput
+        const inputValue = useRef(props.value || props.defaultValue || '')
 
-      const combinedRefs = composeRefs(ref, inputRef)
+        const inputRef = useCallback(
+          (input) => {
+            if (!props.id) return
+            if (!input) return
+            registerFocusable(props.id, {
+              focus: input.focus,
 
-      useEffect(() => {
-        if (!props.id) return
-        return () => {
-          unregisterFocusable(props.id!)
-        }
-      }, [props.id])
+              ...(isInput && {
+                // react-native doesn't support programmatic .select()
+                focusAndSelect() {
+                  input.focus()
+                  if (input.setSelection && typeof inputValue.current === 'string') {
+                    input.setSelection(0, inputValue.current.length)
+                  }
+                },
+              }),
+            })
+          },
+          [isInput, props.id]
+        )
 
-      const onChangeText = useEvent((value) => {
-        inputValue.current = value
-        props.onChangeText?.(value)
-      })
+        const combinedRefs = composeRefs(ref, inputRef)
 
-      const finalProps = isInput
-        ? {
-            ...props,
-            onChangeText,
+        useEffect(() => {
+          if (!props.id) return
+          return () => {
+            unregisterFocusable(props.id!)
           }
-        : props
+        }, [props.id])
 
-      return <Component ref={combinedRefs} {...finalProps} />
-    }
+        const onChangeText = useEvent((value) => {
+          inputValue.current = value
+          props.onChangeText?.(value)
+        })
+
+        const finalProps = isInput
+          ? {
+              ...props,
+              onChangeText,
+            }
+          : props
+
+        // @ts-expect-error
+        return <Component ref={combinedRefs} {...finalProps} />
+      }
+    )
   ) as any
+
+  return component
 }

package/types/focusableInputHOC.d.ts

@@ -1,2 +1,3 @@
-export declare function focusableInputHOC<A extends Function>(Component: A): A;
+import { TamaguiComponent } from '@tamagui/core';
+export declare function focusableInputHOC<A extends TamaguiComponent>(Component: A): A;
 //# sourceMappingURL=focusableInputHOC.d.ts.map