@tamagui/focusable 1.30.6 → 1.30.8

package/dist/cjs/focusableInputHOC.js

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var focusableInputHOC_exports = {};
 __export(focusableInputHOC_exports, {
-  focusableInputHOC: () => focusableInputHOC
+  focusableInputHOC: () => focusableInputHOC,
+  useFocusable: () => useFocusable
 });
 module.exports = __toCommonJS(focusableInputHOC_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -26,58 +27,71 @@ var import_compose_refs = require("@tamagui/compose-refs");
 var import_web = require("@tamagui/web");
 var import_react = require("react");
 var import_registerFocusable = require("./registerFocusable");
-function focusableInputHOC(Component) {
-  const component = Component.styleable(
-    (props, ref) => {
-      const isInput = (0, import_web.isTamaguiComponent)(Component) && Component.staticConfig.isInput;
-      const inputValue = (0, import_react.useRef)(props.value || props.defaultValue || "");
-      const unregisterFocusable = (0, import_react.useRef)();
-      const inputRef = (0, import_react.useCallback)(
-        (input) => {
-          var _a;
-          if (!props.id)
-            return;
-          if (!input)
-            return;
-          (_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
-          unregisterFocusable.current = (0, import_registerFocusable.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);
-                }
-              }
+function useFocusable({
+  isInput,
+  props,
+  ref
+}) {
+  const { id, onChangeText, value, defaultValue } = props;
+  const inputValue = (0, import_react.useRef)(value || defaultValue || "");
+  const unregisterFocusable = (0, import_react.useRef)();
+  const inputRef = (0, import_react.useCallback)(
+    (input) => {
+      var _a;
+      if (!id)
+        return;
+      if (!input)
+        return;
+      (_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
+      unregisterFocusable.current = (0, import_registerFocusable.registerFocusable)(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);
             }
-          });
-        },
-        [isInput, props.id]
-      );
-      const combinedRefs = (0, import_compose_refs.composeRefs)(ref, inputRef);
-      (0, import_react.useEffect)(() => {
-        return () => {
-          var _a;
-          (_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
-        };
-      }, []);
-      const onChangeText = (0, import_web.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, id]
   );
-  return component;
+  const combinedRefs = (0, import_compose_refs.composeRefs)(ref, inputRef);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      var _a;
+      (_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
+    };
+  }, []);
+  return {
+    ref: combinedRefs,
+    onChangeText: (0, import_web.useEvent)((value2) => {
+      inputValue.current = value2;
+      onChangeText == null ? void 0 : onChangeText(value2);
+    })
+  };
+}
+function focusableInputHOC(Component) {
+  return Component.styleable((props, ref) => {
+    var _a;
+    const isInput = (_a = Component.staticConfig) == null ? void 0 : _a.isInput;
+    const { ref: combinedRef, onChangeText } = useFocusable({
+      ref,
+      props,
+      isInput
+    });
+    const finalProps = isInput ? {
+      ...props,
+      onChangeText
+    } : props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: combinedRef, ...finalProps });
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  focusableInputHOC
+  focusableInputHOC,
+  useFocusable
 });
 //# sourceMappingURL=focusableInputHOC.js.map

package/dist/cjs/focusableInputHOC.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/focusableInputHOC.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgEa;AAhEb,0BAA4B;AAC5B,iBAA+D;AAC/D,mBAA+C;AAE/C,+BAAkC;AAE3B,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B,CACE,OAMA,QACG;AACH,YAAM,cAAU,+BAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,YAAM,iBAAa,qBAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AACjE,YAAM,0BAAsB,qBAA+B;AAE3D,YAAM,eAAW;AAAA,QACf,CAAC,UAAU;AAtBnB;AAuBU,cAAI,CAAC,MAAM;AAAI;AACf,cAAI,CAAC;AAAO;AACZ,oCAAoB,YAApB;AACA,8BAAoB,cAAU,4CAAkB,MAAM,IAAI;AAAA,YACxD,OAAO,MAAM;AAAA,YAEb,GAAI,WAAW;AAAA;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,kCAAU,MAAM;AACd,eAAO,MAAM;AA9CrB;AA+CU,oCAAoB,YAApB;AAAA,QACF;AAAA,MACF,GAAG,CAAC,CAAC;AAEL,YAAM,mBAAe,qBAAS,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;AAGJ,aAAO,4CAAC,aAAU,KAAK,cAAe,GAAG,YAAY;AAAA,IACvD;AAAA,EACF;AAEA,SAAO;AACT;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiFW;AAjFX,0BAA4B;AAC5B,iBAA2C;AAC3C,mBAAsD;AAEtD,+BAAkC;AAS3B,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,IAAI,cAAc,OAAO,aAAa,IAAI;AAClD,QAAM,iBAAa,qBAAO,SAAS,gBAAgB,EAAE;AACrD,QAAM,0BAAsB,qBAA+B;AAE3D,QAAM,eAAW;AAAA,IACf,CAAC,UAAU;AA3Bf;AA4BM,UAAI,CAAC;AAAI;AACT,UAAI,CAAC;AAAO;AACZ,gCAAoB,YAApB;AACA,0BAAoB,cAAU,4CAAkB,IAAI;AAAA,QAClD,OAAO,MAAM;AAAA,QAEb,GAAI,WAAW;AAAA;AAAA,UAEb,iBAAiB;AACf,kBAAM,MAAM;AACZ,gBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,oBAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,YACjD;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,SAAS,EAAE;AAAA,EACd;AAEA,QAAM,mBAAe,iCAAY,KAAK,QAAQ;AAE9C,8BAAU,MAAM;AACd,WAAO,MAAM;AAnDjB;AAoDM,gCAAoB,YAApB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL,KAAK;AAAA,IACL,kBAAc,qBAAS,CAACA,WAAU;AAChC,iBAAW,UAAUA;AACrB,mDAAeA;AAAA,IACjB,CAAC;AAAA,EACH;AACF;AAEO,SAAS,kBAA8C,WAAiB;AAC7E,SAAO,UAAU,UAAU,CAAC,OAAuB,QAAQ;AAlE7D;AAmEI,UAAM,WAAU,eAAU,iBAAV,mBAAwB;AACxC,UAAM,EAAE,KAAK,aAAa,aAAa,IAAI,aAAa;AAAA,MACtD;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM,aAAa,UACf;AAAA,MACE,GAAG;AAAA,MACH;AAAA,IACF,IACA;AAGJ,WAAO,4CAAC,aAAU,KAAK,aAAc,GAAG,YAAY;AAAA,EACtD,CAAC;AACH;",
+  "names": ["value"]
 }

package/dist/esm/focusableInputHOC.js

@@ -1,59 +1,72 @@
 import { jsx } from "react/jsx-runtime";
 import { composeRefs } from "@tamagui/compose-refs";
-import { isTamaguiComponent, useEvent } from "@tamagui/web";
+import { useEvent } from "@tamagui/web";
 import { useCallback, useEffect, useRef } from "react";
 import { registerFocusable } from "./registerFocusable";
-function focusableInputHOC(Component) {
-  const component = Component.styleable(
-    (props, ref) => {
-      const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput;
-      const inputValue = useRef(props.value || props.defaultValue || "");
-      const unregisterFocusable = useRef();
-      const inputRef = useCallback(
-        (input) => {
-          var _a;
-          if (!props.id)
-            return;
-          if (!input)
-            return;
-          (_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
-          unregisterFocusable.current = 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);
-                }
-              }
+function useFocusable({
+  isInput,
+  props,
+  ref
+}) {
+  const { id, onChangeText, value, defaultValue } = props;
+  const inputValue = useRef(value || defaultValue || "");
+  const unregisterFocusable = useRef();
+  const inputRef = useCallback(
+    (input) => {
+      var _a;
+      if (!id)
+        return;
+      if (!input)
+        return;
+      (_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
+      unregisterFocusable.current = registerFocusable(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);
             }
-          });
-        },
-        [isInput, props.id]
-      );
-      const combinedRefs = composeRefs(ref, inputRef);
-      useEffect(() => {
-        return () => {
-          var _a;
-          (_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
-        };
-      }, []);
-      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, id]
   );
-  return component;
+  const combinedRefs = composeRefs(ref, inputRef);
+  useEffect(() => {
+    return () => {
+      var _a;
+      (_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
+    };
+  }, []);
+  return {
+    ref: combinedRefs,
+    onChangeText: useEvent((value2) => {
+      inputValue.current = value2;
+      onChangeText == null ? void 0 : onChangeText(value2);
+    })
+  };
+}
+function focusableInputHOC(Component) {
+  return Component.styleable((props, ref) => {
+    var _a;
+    const isInput = (_a = Component.staticConfig) == null ? void 0 : _a.isInput;
+    const { ref: combinedRef, onChangeText } = useFocusable({
+      ref,
+      props,
+      isInput
+    });
+    const finalProps = isInput ? {
+      ...props,
+      onChangeText
+    } : props;
+    return /* @__PURE__ */ jsx(Component, { ref: combinedRef, ...finalProps });
+  });
 }
 export {
-  focusableInputHOC
+  focusableInputHOC,
+  useFocusable
 };
 //# sourceMappingURL=focusableInputHOC.js.map

package/dist/esm/focusableInputHOC.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/focusableInputHOC.tsx"],
-  "mappings": "AAgEa;AAhEb,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAS,aAAa,WAAW,cAAc;AAE/C,SAAS,yBAAyB;AAE3B,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B,CACE,OAMA,QACG;AACH,YAAM,UAAU,mBAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,YAAM,aAAa,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AACjE,YAAM,sBAAsB,OAA+B;AAE3D,YAAM,WAAW;AAAA,QACf,CAAC,UAAU;AAtBnB;AAuBU,cAAI,CAAC,MAAM;AAAI;AACf,cAAI,CAAC;AAAO;AACZ,oCAAoB,YAApB;AACA,8BAAoB,UAAU,kBAAkB,MAAM,IAAI;AAAA,YACxD,OAAO,MAAM;AAAA,YAEb,GAAI,WAAW;AAAA;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,eAAO,MAAM;AA9CrB;AA+CU,oCAAoB,YAApB;AAAA,QACF;AAAA,MACF,GAAG,CAAC,CAAC;AAEL,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;AAGJ,aAAO,oBAAC,aAAU,KAAK,cAAe,GAAG,YAAY;AAAA,IACvD;AAAA,EACF;AAEA,SAAO;AACT;",
-  "names": []
+  "mappings": "AAiFW;AAjFX,SAAS,mBAAmB;AAC5B,SAA2B,gBAAgB;AAC3C,SAAgB,aAAa,WAAW,cAAc;AAEtD,SAAS,yBAAyB;AAS3B,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,IAAI,cAAc,OAAO,aAAa,IAAI;AAClD,QAAM,aAAa,OAAO,SAAS,gBAAgB,EAAE;AACrD,QAAM,sBAAsB,OAA+B;AAE3D,QAAM,WAAW;AAAA,IACf,CAAC,UAAU;AA3Bf;AA4BM,UAAI,CAAC;AAAI;AACT,UAAI,CAAC;AAAO;AACZ,gCAAoB,YAApB;AACA,0BAAoB,UAAU,kBAAkB,IAAI;AAAA,QAClD,OAAO,MAAM;AAAA,QAEb,GAAI,WAAW;AAAA;AAAA,UAEb,iBAAiB;AACf,kBAAM,MAAM;AACZ,gBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,oBAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,YACjD;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,SAAS,EAAE;AAAA,EACd;AAEA,QAAM,eAAe,YAAY,KAAK,QAAQ;AAE9C,YAAU,MAAM;AACd,WAAO,MAAM;AAnDjB;AAoDM,gCAAoB,YAApB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL,KAAK;AAAA,IACL,cAAc,SAAS,CAACA,WAAU;AAChC,iBAAW,UAAUA;AACrB,mDAAeA;AAAA,IACjB,CAAC;AAAA,EACH;AACF;AAEO,SAAS,kBAA8C,WAAiB;AAC7E,SAAO,UAAU,UAAU,CAAC,OAAuB,QAAQ;AAlE7D;AAmEI,UAAM,WAAU,eAAU,iBAAV,mBAAwB;AACxC,UAAM,EAAE,KAAK,aAAa,aAAa,IAAI,aAAa;AAAA,MACtD;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM,aAAa,UACf;AAAA,MACE,GAAG;AAAA,MACH;AAAA,IACF,IACA;AAGJ,WAAO,oBAAC,aAAU,KAAK,aAAc,GAAG,YAAY;AAAA,EACtD,CAAC;AACH;",
+  "names": ["value"]
 }

package/dist/jsx/focusableInputHOC.js

@@ -1,55 +1,68 @@
 import { composeRefs } from "@tamagui/compose-refs";
-import { isTamaguiComponent, useEvent } from "@tamagui/web";
+import { useEvent } from "@tamagui/web";
 import { useCallback, useEffect, useRef } from "react";
 import { registerFocusable } from "./registerFocusable";
-function focusableInputHOC(Component) {
-  const component = Component.styleable(
-    (props, ref) => {
-      const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput;
-      const inputValue = useRef(props.value || props.defaultValue || "");
-      const unregisterFocusable = useRef();
-      const inputRef = useCallback(
-        (input) => {
-          if (!props.id)
-            return;
-          if (!input)
-            return;
-          unregisterFocusable.current?.();
-          unregisterFocusable.current = 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);
-                }
-              }
+function useFocusable({
+  isInput,
+  props,
+  ref
+}) {
+  const { id, onChangeText, value, defaultValue } = props;
+  const inputValue = useRef(value || defaultValue || "");
+  const unregisterFocusable = useRef();
+  const inputRef = useCallback(
+    (input) => {
+      if (!id)
+        return;
+      if (!input)
+        return;
+      unregisterFocusable.current?.();
+      unregisterFocusable.current = registerFocusable(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);
             }
-          });
-        },
-        [isInput, props.id]
-      );
-      const combinedRefs = composeRefs(ref, inputRef);
-      useEffect(() => {
-        return () => {
-          unregisterFocusable.current?.();
-        };
-      }, []);
-      const onChangeText = useEvent((value) => {
-        inputValue.current = value;
-        props.onChangeText?.(value);
+          }
+        }
       });
-      const finalProps = isInput ? {
-        ...props,
-        onChangeText
-      } : props;
-      return <Component ref={combinedRefs} {...finalProps} />;
-    }
+    },
+    [isInput, id]
   );
-  return component;
+  const combinedRefs = composeRefs(ref, inputRef);
+  useEffect(() => {
+    return () => {
+      unregisterFocusable.current?.();
+    };
+  }, []);
+  return {
+    ref: combinedRefs,
+    onChangeText: useEvent((value2) => {
+      inputValue.current = value2;
+      onChangeText?.(value2);
+    })
+  };
+}
+function focusableInputHOC(Component) {
+  return Component.styleable((props, ref) => {
+    const isInput = Component.staticConfig?.isInput;
+    const { ref: combinedRef, onChangeText } = useFocusable({
+      ref,
+      props,
+      isInput
+    });
+    const finalProps = isInput ? {
+      ...props,
+      onChangeText
+    } : props;
+    return <Component ref={combinedRef} {...finalProps} />;
+  });
 }
 export {
-  focusableInputHOC
+  focusableInputHOC,
+  useFocusable
 };
 //# sourceMappingURL=focusableInputHOC.js.map

package/dist/jsx/focusableInputHOC.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/focusableInputHOC.tsx"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAS,aAAa,WAAW,cAAc;AAE/C,SAAS,yBAAyB;AAE3B,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B,CACE,OAMA,QACG;AACH,YAAM,UAAU,mBAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,YAAM,aAAa,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AACjE,YAAM,sBAAsB,OAA+B;AAE3D,YAAM,WAAW;AAAA,QACf,CAAC,UAAU;AACT,cAAI,CAAC,MAAM;AAAI;AACf,cAAI,CAAC;AAAO;AACZ,8BAAoB,UAAU;AAC9B,8BAAoB,UAAU,kBAAkB,MAAM,IAAI;AAAA,YACxD,OAAO,MAAM;AAAA,YAEb,GAAI,WAAW;AAAA;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,eAAO,MAAM;AACX,8BAAoB,UAAU;AAAA,QAChC;AAAA,MACF,GAAG,CAAC,CAAC;AAEL,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;AAGJ,aAAO,CAAC,UAAU,KAAK,kBAAkB,YAAY;AAAA,IACvD;AAAA,EACF;AAEA,SAAO;AACT;",
-  "names": []
+  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAA2B,gBAAgB;AAC3C,SAAgB,aAAa,WAAW,cAAc;AAEtD,SAAS,yBAAyB;AAS3B,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,IAAI,cAAc,OAAO,aAAa,IAAI;AAClD,QAAM,aAAa,OAAO,SAAS,gBAAgB,EAAE;AACrD,QAAM,sBAAsB,OAA+B;AAE3D,QAAM,WAAW;AAAA,IACf,CAAC,UAAU;AACT,UAAI,CAAC;AAAI;AACT,UAAI,CAAC;AAAO;AACZ,0BAAoB,UAAU;AAC9B,0BAAoB,UAAU,kBAAkB,IAAI;AAAA,QAClD,OAAO,MAAM;AAAA,QAEb,GAAI,WAAW;AAAA;AAAA,UAEb,iBAAiB;AACf,kBAAM,MAAM;AACZ,gBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,oBAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,YACjD;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,SAAS,EAAE;AAAA,EACd;AAEA,QAAM,eAAe,YAAY,KAAK,QAAQ;AAE9C,YAAU,MAAM;AACd,WAAO,MAAM;AACX,0BAAoB,UAAU;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL,KAAK;AAAA,IACL,cAAc,SAAS,CAACA,WAAU;AAChC,iBAAW,UAAUA;AACrB,qBAAeA,MAAK;AAAA,IACtB,CAAC;AAAA,EACH;AACF;AAEO,SAAS,kBAA8C,WAAiB;AAC7E,SAAO,UAAU,UAAU,CAAC,OAAuB,QAAQ;AACzD,UAAM,UAAU,UAAU,cAAc;AACxC,UAAM,EAAE,KAAK,aAAa,aAAa,IAAI,aAAa;AAAA,MACtD;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM,aAAa,UACf;AAAA,MACE,GAAG;AAAA,MACH;AAAA,IACF,IACA;AAGJ,WAAO,CAAC,UAAU,KAAK,iBAAiB,YAAY;AAAA,EACtD,CAAC;AACH;",
+  "names": ["value"]
 }

package/dist/jsx/focusableInputHOC.mjs

@@ -1,55 +1,68 @@
 import { composeRefs } from "@tamagui/compose-refs";
-import { isTamaguiComponent, useEvent } from "@tamagui/web";
+import { useEvent } from "@tamagui/web";
 import { useCallback, useEffect, useRef } from "react";
 import { registerFocusable } from "./registerFocusable";
-function focusableInputHOC(Component) {
-  const component = Component.styleable(
-    (props, ref) => {
-      const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput;
-      const inputValue = useRef(props.value || props.defaultValue || "");
-      const unregisterFocusable = useRef();
-      const inputRef = useCallback(
-        (input) => {
-          if (!props.id)
-            return;
-          if (!input)
-            return;
-          unregisterFocusable.current?.();
-          unregisterFocusable.current = 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);
-                }
-              }
+function useFocusable({
+  isInput,
+  props,
+  ref
+}) {
+  const { id, onChangeText, value, defaultValue } = props;
+  const inputValue = useRef(value || defaultValue || "");
+  const unregisterFocusable = useRef();
+  const inputRef = useCallback(
+    (input) => {
+      if (!id)
+        return;
+      if (!input)
+        return;
+      unregisterFocusable.current?.();
+      unregisterFocusable.current = registerFocusable(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);
             }
-          });
-        },
-        [isInput, props.id]
-      );
-      const combinedRefs = composeRefs(ref, inputRef);
-      useEffect(() => {
-        return () => {
-          unregisterFocusable.current?.();
-        };
-      }, []);
-      const onChangeText = useEvent((value) => {
-        inputValue.current = value;
-        props.onChangeText?.(value);
+          }
+        }
       });
-      const finalProps = isInput ? {
-        ...props,
-        onChangeText
-      } : props;
-      return <Component ref={combinedRefs} {...finalProps} />;
-    }
+    },
+    [isInput, id]
   );
-  return component;
+  const combinedRefs = composeRefs(ref, inputRef);
+  useEffect(() => {
+    return () => {
+      unregisterFocusable.current?.();
+    };
+  }, []);
+  return {
+    ref: combinedRefs,
+    onChangeText: useEvent((value2) => {
+      inputValue.current = value2;
+      onChangeText?.(value2);
+    })
+  };
+}
+function focusableInputHOC(Component) {
+  return Component.styleable((props, ref) => {
+    const isInput = Component.staticConfig?.isInput;
+    const { ref: combinedRef, onChangeText } = useFocusable({
+      ref,
+      props,
+      isInput
+    });
+    const finalProps = isInput ? {
+      ...props,
+      onChangeText
+    } : props;
+    return <Component ref={combinedRef} {...finalProps} />;
+  });
 }
 export {
-  focusableInputHOC
+  focusableInputHOC,
+  useFocusable
 };
 //# sourceMappingURL=focusableInputHOC.mjs.map

package/dist/jsx/focusableInputHOC.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/focusableInputHOC.tsx"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAS,aAAa,WAAW,cAAc;AAE/C,SAAS,yBAAyB;AAE3B,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B,CACE,OAMA,QACG;AACH,YAAM,UAAU,mBAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,YAAM,aAAa,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AACjE,YAAM,sBAAsB,OAA+B;AAE3D,YAAM,WAAW;AAAA,QACf,CAAC,UAAU;AACT,cAAI,CAAC,MAAM;AAAI;AACf,cAAI,CAAC;AAAO;AACZ,8BAAoB,UAAU;AAC9B,8BAAoB,UAAU,kBAAkB,MAAM,IAAI;AAAA,YACxD,OAAO,MAAM;AAAA,YAEb,GAAI,WAAW;AAAA;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,eAAO,MAAM;AACX,8BAAoB,UAAU;AAAA,QAChC;AAAA,MACF,GAAG,CAAC,CAAC;AAEL,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;AAGJ,aAAO,CAAC,UAAU,KAAK,kBAAkB,YAAY;AAAA,IACvD;AAAA,EACF;AAEA,SAAO;AACT;",
-  "names": []
+  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAA2B,gBAAgB;AAC3C,SAAgB,aAAa,WAAW,cAAc;AAEtD,SAAS,yBAAyB;AAS3B,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,IAAI,cAAc,OAAO,aAAa,IAAI;AAClD,QAAM,aAAa,OAAO,SAAS,gBAAgB,EAAE;AACrD,QAAM,sBAAsB,OAA+B;AAE3D,QAAM,WAAW;AAAA,IACf,CAAC,UAAU;AACT,UAAI,CAAC;AAAI;AACT,UAAI,CAAC;AAAO;AACZ,0BAAoB,UAAU;AAC9B,0BAAoB,UAAU,kBAAkB,IAAI;AAAA,QAClD,OAAO,MAAM;AAAA,QAEb,GAAI,WAAW;AAAA;AAAA,UAEb,iBAAiB;AACf,kBAAM,MAAM;AACZ,gBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,oBAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,YACjD;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,SAAS,EAAE;AAAA,EACd;AAEA,QAAM,eAAe,YAAY,KAAK,QAAQ;AAE9C,YAAU,MAAM;AACd,WAAO,MAAM;AACX,0BAAoB,UAAU;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL,KAAK;AAAA,IACL,cAAc,SAAS,CAACA,WAAU;AAChC,iBAAW,UAAUA;AACrB,qBAAeA,MAAK;AAAA,IACtB,CAAC;AAAA,EACH;AACF;AAEO,SAAS,kBAA8C,WAAiB;AAC7E,SAAO,UAAU,UAAU,CAAC,OAAuB,QAAQ;AACzD,UAAM,UAAU,UAAU,cAAc;AACxC,UAAM,EAAE,KAAK,aAAa,aAAa,IAAI,aAAa;AAAA,MACtD;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM,aAAa,UACf;AAAA,MACE,GAAG;AAAA,MACH;AAAA,IACF,IACA;AAGJ,WAAO,CAAC,UAAU,KAAK,iBAAiB,YAAY;AAAA,EACtD,CAAC;AACH;",
+  "names": ["value"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/focusable",
-  "version": "1.30.6",
+  "version": "1.30.8",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -22,14 +22,14 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "1.30.6",
-    "@tamagui/web": "1.30.6"
+    "@tamagui/compose-refs": "1.30.8",
+    "@tamagui/web": "1.30.8"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.30.6",
+    "@tamagui/build": "1.30.8",
     "react": "^18.2.0"
   },
   "publishConfig": {

package/src/focusableInputHOC.tsx

@@ -1,70 +1,84 @@
 import { composeRefs } from '@tamagui/compose-refs'
-import { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/web'
-import { useCallback, useEffect, useRef } from 'react'
+import { TamaguiComponent, useEvent } from '@tamagui/web'
+import React, { useCallback, useEffect, useRef } from 'react'
 
 import { registerFocusable } from './registerFocusable'
 
-export function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {
-  const component = Component.styleable(
-    (
-      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 unregisterFocusable = useRef<() => void | undefined>()
-
-      const inputRef = useCallback(
-        (input) => {
-          if (!props.id) return
-          if (!input) return
-          unregisterFocusable.current?.()
-          unregisterFocusable.current = 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)
-                }
-              },
-            }),
-          })
-        },
-        [isInput, props.id]
-      )
+type FocusableProps = {
+  id?: string
+  onChangeText?: (val: string) => void
+  value?: string
+  defaultValue?: string
+}
 
-      const combinedRefs = composeRefs(ref, inputRef)
+export function useFocusable({
+  isInput,
+  props,
+  ref,
+}: {
+  isInput?: boolean
+  props: FocusableProps
+  ref?: React.MutableRefObject<any>
+}) {
+  const { id, onChangeText, value, defaultValue } = props
+  const inputValue = useRef(value || defaultValue || '')
+  const unregisterFocusable = useRef<() => void | undefined>()
 
-      useEffect(() => {
-        return () => {
-          unregisterFocusable.current?.()
-        }
-      }, [])
+  const inputRef = useCallback(
+    (input) => {
+      if (!id) return
+      if (!input) return
+      unregisterFocusable.current?.()
+      unregisterFocusable.current = registerFocusable(id, {
+        focus: input.focus,
 
-      const onChangeText = useEvent((value) => {
-        inputValue.current = value
-        props.onChangeText?.(value)
+        ...(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, id]
+  )
 
-      const finalProps = isInput
-        ? {
-            ...props,
-            onChangeText,
-          }
-        : props
+  const combinedRefs = composeRefs(ref, inputRef)
 
-      // @ts-expect-error
-      return <Component ref={combinedRefs} {...finalProps} />
+  useEffect(() => {
+    return () => {
+      unregisterFocusable.current?.()
     }
-  ) as any
+  }, [])
+
+  return {
+    ref: combinedRefs,
+    onChangeText: useEvent((value) => {
+      inputValue.current = value
+      onChangeText?.(value)
+    }),
+  }
+}
+
+export function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {
+  return Component.styleable((props: FocusableProps, ref) => {
+    const isInput = Component.staticConfig?.isInput
+    const { ref: combinedRef, onChangeText } = useFocusable({
+      ref,
+      props,
+      isInput,
+    })
+    const finalProps = isInput
+      ? {
+          ...props,
+          onChangeText,
+        }
+      : props
 
-  return component
+    // @ts-expect-error
+    return <Component ref={combinedRef} {...finalProps} />
+  }) as any
 }

package/types/focusableInputHOC.d.ts

@@ -1,3 +1,19 @@
 import { TamaguiComponent } from '@tamagui/web';
+import React from 'react';
+type FocusableProps = {
+    id?: string;
+    onChangeText?: (val: string) => void;
+    value?: string;
+    defaultValue?: string;
+};
+export declare function useFocusable({ isInput, props, ref, }: {
+    isInput?: boolean;
+    props: FocusableProps;
+    ref?: React.MutableRefObject<any>;
+}): {
+    ref: (node: any) => void;
+    onChangeText: (value: any) => void;
+};
 export declare function focusableInputHOC<A extends TamaguiComponent>(Component: A): A;
+export {};
 //# sourceMappingURL=focusableInputHOC.d.ts.map

package/types/focusableInputHOC.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusableInputHOC.d.ts","sourceRoot":"","sources":["../src/focusableInputHOC.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAgC,MAAM,cAAc,CAAA;AAK7E,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,CA+D7E"}
+{"version":3,"file":"focusableInputHOC.d.ts","sourceRoot":"","sources":["../src/focusableInputHOC.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAY,MAAM,cAAc,CAAA;AACzD,OAAO,KAAyC,MAAM,OAAO,CAAA;AAI7D,KAAK,cAAc,GAAG;IACpB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,GAAG,GACJ,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,cAAc,CAAA;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAA;CAClC;;;EA0CA;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,CAkB7E"}