@tamagui/focusable 1.0.1-rc.9 → 1.0.2

package/dist/cjs/focusableInputHOC.js

@@ -32,13 +32,16 @@ function focusableInputHOC(Component) {
       (props, ref) => {
         const isInput = (0, import_core.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;
-            (0, import_registerFocusable.registerFocusable)(props.id, {
+            (_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
+            unregisterFocusable.current = (0, import_registerFocusable.registerFocusable)(props.id, {
               focus: input.focus,
               ...isInput && {
                 focusAndSelect() {
@@ -54,12 +57,11 @@ function focusableInputHOC(Component) {
         );
         const combinedRefs = (0, import_compose_refs.composeRefs)(ref, inputRef);
         (0, import_react.useEffect)(() => {
-          if (!props.id)
-            return;
           return () => {
-            (0, import_registerFocusable.unregisterFocusable)(props.id);
+            var _a;
+            (_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
           };
-        }, [props.id]);
+        }, []);
         const onChangeText = (0, import_core.useEvent)((value) => {
           var _a;
           inputValue.current = value;

package/dist/cjs/focusableInputHOC.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/focusableInputHOC.tsx"],
-  "sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport { forwardRef, useCallback, useEffect, useRef } 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 =\n          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,mBAA2D;AAE3D,+BAAuD;AAEhD,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,QAC1B;AAAA,MACE,CACE,OAMA,QACG;AACH,cAAM,cACJ,gCAAmB,SAAS,KAAK,UAAU,aAAa;AAC1D,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,oCAAU,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;",
+  "sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport { forwardRef, useCallback, useEffect, useRef } from 'react'\n\nimport { registerFocusable } 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        const unregisterFocusable = useRef<() => void | undefined>()\n\n        const inputRef = useCallback(\n          (input) => {\n            if (!props.id) return\n            if (!input) return\n            unregisterFocusable.current?.()\n            unregisterFocusable.current = 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          return () => {\n            unregisterFocusable.current?.()\n          }\n        }, [])\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,mBAA2D;AAE3D,+BAAkC;AAE3B,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;AACjE,cAAM,0BAAsB,qBAA+B;AAE3D,cAAM,eAAW;AAAA,UACf,CAAC,UAAU;AAvBrB;AAwBY,gBAAI,CAAC,MAAM;AAAI;AACf,gBAAI,CAAC;AAAO;AACZ,sCAAoB,YAApB;AACA,gCAAoB,cAAU,4CAAkB,MAAM,IAAI;AAAA,cACxD,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,oCAAU,MAAM;AACd,iBAAO,MAAM;AA/CvB;AAgDY,sCAAoB,YAApB;AAAA,UACF;AAAA,QACF,GAAG,CAAC,CAAC;AAEL,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": []
 }

package/dist/cjs/registerFocusable.js

@@ -23,7 +23,7 @@ __export(registerFocusable_exports, {
   unregisterFocusable: () => unregisterFocusable
 });
 module.exports = __toCommonJS(registerFocusable_exports);
-const registerFocusable = (id, input) => {
+const registerFocusable = (id, input) => () => {
 };
 const unregisterFocusable = (id) => {
 };

package/dist/cjs/registerFocusable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/registerFocusable.ts"],
-  "sourcesContent": ["import { Focusable } from './focusable'\n\nexport const registerFocusable = (id: string, input: Focusable) => {\n  // noop focus is handed natively\n}\n\nexport const unregisterFocusable = (id: string) => {\n  // noop focus is handed natively\n}\n\nexport const focusFocusable = (id: string) => {\n  // noop focus is handed natively\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,oBAAoB,CAAC,IAAY,UAAqB;AAEnE;AAEO,MAAM,sBAAsB,CAAC,OAAe;AAEnD;AAEO,MAAM,iBAAiB,CAAC,OAAe;AAE9C;",
+  "sourcesContent": ["import { Focusable } from './focusable'\n\nexport const registerFocusable = (id: string, input: Focusable) => () => {\n  // noop focus is handed natively\n}\n\nexport const unregisterFocusable = (id: string) => {\n  // noop focus is handed natively\n}\n\nexport const focusFocusable = (id: string) => {\n  // noop focus is handed natively\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,oBAAoB,CAAC,IAAY,UAAqB,MAAM;AAEzE;AAEO,MAAM,sBAAsB,CAAC,OAAe;AAEnD;AAEO,MAAM,iBAAiB,CAAC,OAAe;AAE9C;",
   "names": []
 }

package/dist/esm/focusableInputHOC.js

@@ -2,20 +2,23 @@ import { jsx } from "react/jsx-runtime";
 import { composeRefs } from "@tamagui/compose-refs";
 import { isTamaguiComponent, useEvent } from "@tamagui/core";
 import { forwardRef, useCallback, useEffect, useRef } from "react";
-import { registerFocusable, unregisterFocusable } from "./registerFocusable";
+import { registerFocusable } from "./registerFocusable";
 function focusableInputHOC(Component) {
   const component = Component.extractable(
     forwardRef(
       (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;
-            registerFocusable(props.id, {
+            (_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
+            unregisterFocusable.current = registerFocusable(props.id, {
               focus: input.focus,
               ...isInput && {
                 focusAndSelect() {
@@ -31,12 +34,11 @@ function focusableInputHOC(Component) {
         );
         const combinedRefs = composeRefs(ref, inputRef);
         useEffect(() => {
-          if (!props.id)
-            return;
           return () => {
-            unregisterFocusable(props.id);
+            var _a;
+            (_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
           };
-        }, [props.id]);
+        }, []);
         const onChangeText = useEvent((value) => {
           var _a;
           inputValue.current = value;

package/dist/esm/focusableInputHOC.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/focusableInputHOC.tsx"],
-  "sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport { forwardRef, useCallback, useEffect, useRef } 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 =\n          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,SAAS,YAAY,aAAa,WAAW,cAAc;AAE3D,SAAS,mBAAmB,2BAA2B;AAEhD,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B;AAAA,MACE,CACE,OAMA,QACG;AACH,cAAM,UACJ,mBAAmB,SAAS,KAAK,UAAU,aAAa;AAC1D,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;",
+  "sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport { forwardRef, useCallback, useEffect, useRef } from 'react'\n\nimport { registerFocusable } 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        const unregisterFocusable = useRef<() => void | undefined>()\n\n        const inputRef = useCallback(\n          (input) => {\n            if (!props.id) return\n            if (!input) return\n            unregisterFocusable.current?.()\n            unregisterFocusable.current = 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          return () => {\n            unregisterFocusable.current?.()\n          }\n        }, [])\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,SAAS,YAAY,aAAa,WAAW,cAAc;AAE3D,SAAS,yBAAyB;AAE3B,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;AACjE,cAAM,sBAAsB,OAA+B;AAE3D,cAAM,WAAW;AAAA,UACf,CAAC,UAAU;AAvBrB;AAwBY,gBAAI,CAAC,MAAM;AAAI;AACf,gBAAI,CAAC;AAAO;AACZ,sCAAoB,YAApB;AACA,gCAAoB,UAAU,kBAAkB,MAAM,IAAI;AAAA,cACxD,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,iBAAO,MAAM;AA/CvB;AAgDY,sCAAoB,YAApB;AAAA,UACF;AAAA,QACF,GAAG,CAAC,CAAC;AAEL,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/esm/registerFocusable.js

@@ -1,4 +1,4 @@
-const registerFocusable = (id, input) => {
+const registerFocusable = (id, input) => () => {
 };
 const unregisterFocusable = (id) => {
 };

package/dist/esm/registerFocusable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/registerFocusable.ts"],
-  "sourcesContent": ["import { Focusable } from './focusable'\n\nexport const registerFocusable = (id: string, input: Focusable) => {\n  // noop focus is handed natively\n}\n\nexport const unregisterFocusable = (id: string) => {\n  // noop focus is handed natively\n}\n\nexport const focusFocusable = (id: string) => {\n  // noop focus is handed natively\n}\n"],
-  "mappings": "AAEO,MAAM,oBAAoB,CAAC,IAAY,UAAqB;AAEnE;AAEO,MAAM,sBAAsB,CAAC,OAAe;AAEnD;AAEO,MAAM,iBAAiB,CAAC,OAAe;AAE9C;",
+  "sourcesContent": ["import { Focusable } from './focusable'\n\nexport const registerFocusable = (id: string, input: Focusable) => () => {\n  // noop focus is handed natively\n}\n\nexport const unregisterFocusable = (id: string) => {\n  // noop focus is handed natively\n}\n\nexport const focusFocusable = (id: string) => {\n  // noop focus is handed natively\n}\n"],
+  "mappings": "AAEO,MAAM,oBAAoB,CAAC,IAAY,UAAqB,MAAM;AAEzE;AAEO,MAAM,sBAAsB,CAAC,OAAe;AAEnD;AAEO,MAAM,iBAAiB,CAAC,OAAe;AAE9C;",
   "names": []
 }

package/dist/jsx/focusableInputHOC.js

@@ -1,20 +1,22 @@
 import { composeRefs } from "@tamagui/compose-refs";
 import { isTamaguiComponent, useEvent } from "@tamagui/core";
 import { forwardRef, useCallback, useEffect, useRef } from "react";
-import { registerFocusable, unregisterFocusable } from "./registerFocusable";
+import { registerFocusable } from "./registerFocusable";
 function focusableInputHOC(Component) {
   const component = Component.extractable(
     forwardRef(
       (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;
-            registerFocusable(props.id, {
+            unregisterFocusable.current?.();
+            unregisterFocusable.current = registerFocusable(props.id, {
               focus: input.focus,
               ...isInput && {
                 focusAndSelect() {
@@ -30,12 +32,10 @@ function focusableInputHOC(Component) {
         );
         const combinedRefs = composeRefs(ref, inputRef);
         useEffect(() => {
-          if (!props.id)
-            return;
           return () => {
-            unregisterFocusable(props.id);
+            unregisterFocusable.current?.();
           };
-        }, [props.id]);
+        }, []);
         const onChangeText = useEvent((value) => {
           inputValue.current = value;
           props.onChangeText?.(value);

package/dist/jsx/focusableInputHOC.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/focusableInputHOC.tsx"],
-  "sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport { forwardRef, useCallback, useEffect, useRef } 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 =\n          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,SAAS,YAAY,aAAa,WAAW,cAAc;AAE3D,SAAS,mBAAmB,2BAA2B;AAEhD,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B;AAAA,MACE,CACE,OAMA,QACG;AACH,cAAM,UACJ,mBAAmB,SAAS,KAAK,UAAU,aAAa;AAC1D,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;",
+  "sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport { forwardRef, useCallback, useEffect, useRef } from 'react'\n\nimport { registerFocusable } 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        const unregisterFocusable = useRef<() => void | undefined>()\n\n        const inputRef = useCallback(\n          (input) => {\n            if (!props.id) return\n            if (!input) return\n            unregisterFocusable.current?.()\n            unregisterFocusable.current = 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          return () => {\n            unregisterFocusable.current?.()\n          }\n        }, [])\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,SAAS,YAAY,aAAa,WAAW,cAAc;AAE3D,SAAS,yBAAyB;AAE3B,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;AACjE,cAAM,sBAAsB,OAA+B;AAE3D,cAAM,WAAW;AAAA,UACf,CAAC,UAAU;AACT,gBAAI,CAAC,MAAM;AAAI;AACf,gBAAI,CAAC;AAAO;AACZ,gCAAoB,UAAU;AAC9B,gCAAoB,UAAU,kBAAkB,MAAM,IAAI;AAAA,cACxD,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,iBAAO,MAAM;AACX,gCAAoB,UAAU;AAAA,UAChC;AAAA,QACF,GAAG,CAAC,CAAC;AAEL,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/dist/jsx/registerFocusable.js

@@ -1,4 +1,4 @@
-const registerFocusable = (id, input) => {
+const registerFocusable = (id, input) => () => {
 };
 const unregisterFocusable = (id) => {
 };

package/dist/jsx/registerFocusable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/registerFocusable.ts"],
-  "sourcesContent": ["import { Focusable } from './focusable'\n\nexport const registerFocusable = (id: string, input: Focusable) => {\n  // noop focus is handed natively\n}\n\nexport const unregisterFocusable = (id: string) => {\n  // noop focus is handed natively\n}\n\nexport const focusFocusable = (id: string) => {\n  // noop focus is handed natively\n}\n"],
-  "mappings": "AAEO,MAAM,oBAAoB,CAAC,IAAY,UAAqB;AAEnE;AAEO,MAAM,sBAAsB,CAAC,OAAe;AAEnD;AAEO,MAAM,iBAAiB,CAAC,OAAe;AAE9C;",
+  "sourcesContent": ["import { Focusable } from './focusable'\n\nexport const registerFocusable = (id: string, input: Focusable) => () => {\n  // noop focus is handed natively\n}\n\nexport const unregisterFocusable = (id: string) => {\n  // noop focus is handed natively\n}\n\nexport const focusFocusable = (id: string) => {\n  // noop focus is handed natively\n}\n"],
+  "mappings": "AAEO,MAAM,oBAAoB,CAAC,IAAY,UAAqB,MAAM;AAEzE;AAEO,MAAM,sBAAsB,CAAC,OAAe;AAEnD;AAEO,MAAM,iBAAiB,CAAC,OAAe;AAE9C;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/focusable",
-  "version": "1.0.1-rc.9",
+  "version": "1.0.2",
   "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-rc.9",
-    "@tamagui/core": "^1.0.1-rc.9"
+    "@tamagui/compose-refs": "^1.0.2",
+    "@tamagui/core": "^1.0.2"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "*",
+    "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-rc.9",
+    "@tamagui/build": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/focusableInputHOC.tsx

@@ -2,7 +2,7 @@ import { composeRefs } from '@tamagui/compose-refs'
 import { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'
 import { forwardRef, useCallback, useEffect, useRef } from 'react'
 
-import { registerFocusable, unregisterFocusable } from './registerFocusable'
+import { registerFocusable } from './registerFocusable'
 
 export function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {
   const component = Component.extractable(
@@ -14,17 +14,18 @@ export function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {
           value?: string
           defaultValue?: string
         },
-        ref,
+        ref
       ) => {
-        const isInput =
-          isTamaguiComponent(Component) && Component.staticConfig.isInput
+        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
-            registerFocusable(props.id, {
+            unregisterFocusable.current?.()
+            unregisterFocusable.current = registerFocusable(props.id, {
               focus: input.focus,
 
               ...(isInput && {
@@ -38,17 +39,16 @@ export function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {
               }),
             })
           },
-          [isInput, props.id],
+          [isInput, props.id]
         )
 
         const combinedRefs = composeRefs(ref, inputRef)
 
         useEffect(() => {
-          if (!props.id) return
           return () => {
-            unregisterFocusable(props.id!)
+            unregisterFocusable.current?.()
           }
-        }, [props.id])
+        }, [])
 
         const onChangeText = useEvent((value) => {
           inputValue.current = value
@@ -64,8 +64,8 @@ export function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {
 
         // @ts-expect-error
         return <Component ref={combinedRefs} {...finalProps} />
-      },
-    ),
+      }
+    )
   ) as any
 
   return component

package/src/registerFocusable.ts

@@ -1,6 +1,6 @@
 import { Focusable } from './focusable'
 
-export const registerFocusable = (id: string, input: Focusable) => {
+export const registerFocusable = (id: string, input: Focusable) => () => {
   // noop focus is handed natively
 }
 

package/types/registerFocusable.d.ts

@@ -1,5 +1,5 @@
 import { Focusable } from './focusable';
-export declare const registerFocusable: (id: string, input: Focusable) => void;
+export declare const registerFocusable: (id: string, input: Focusable) => () => void;
 export declare const unregisterFocusable: (id: string) => void;
 export declare const focusFocusable: (id: string) => void;
 //# sourceMappingURL=registerFocusable.d.ts.map