@gustavo-valsechi/client 1.4.118 → 1.4.120

package/dist/components/types/form/types/select/index.js

@@ -50,7 +50,7 @@ function InputSelect(props) {
   const register = (props.register || ((name) => ({})))(props.name || "");
   const inputValue = (_a = props.watch) == null ? void 0 : _a.call(props, props.name);
   const value = ((_b = import_lodash.default.find(props.options, (option) => Object.keys(option)[0] === inputValue)) == null ? void 0 : _b[inputValue || ""]) || "";
-  const addOptionsTarget = (0, import_react.useCallback)(() => {
+  (0, import_react.useEffect)(() => {
     var _a2;
     if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
     target.add({
@@ -67,9 +67,6 @@ function InputSelect(props) {
     });
     return () => target.remove(inputRef);
   }, [containerRef, inputRef]);
-  (0, import_react.useEffect)(() => {
-    addOptionsTarget();
-  }, [addOptionsTarget]);
   const onBlur = (event) => {
     setFocus(false);
     setFilter("");
@@ -79,10 +76,6 @@ function InputSelect(props) {
     setFocus(true);
     if (register.onFocus) register.onFocus(event);
   };
-  const onClick = (event) => {
-    if (register.onClick) register.onClick(event);
-    addOptionsTarget();
-  };
   const onChange = (event) => {
     const value2 = event.target.value || "";
     event.target.value = props.mask ? props.mask(value2) : value2;
@@ -114,7 +107,6 @@ function InputSelect(props) {
               onChange,
               onFocus,
               onBlur,
-              onClick,
               value: focus ? filter : "",
               placeholder: import_lodash.default.isString(value) ? value : (value == null ? void 0 : value.textContent) || ""
             }

package/dist/components/types/form/types/select/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useRef, useEffect } from "react";
 import { Container } from "./styles";
 import { InputLabel } from "../label";
 import { InputError } from "../error";
@@ -17,7 +17,7 @@ function InputSelect(props) {
   const register = (props.register || ((name) => ({})))(props.name || "");
   const inputValue = (_a = props.watch) == null ? void 0 : _a.call(props, props.name);
   const value = ((_b = _.find(props.options, (option) => Object.keys(option)[0] === inputValue)) == null ? void 0 : _b[inputValue || ""]) || "";
-  const addOptionsTarget = useCallback(() => {
+  useEffect(() => {
     var _a2;
     if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
     target.add({
@@ -34,9 +34,6 @@ function InputSelect(props) {
     });
     return () => target.remove(inputRef);
   }, [containerRef, inputRef]);
-  useEffect(() => {
-    addOptionsTarget();
-  }, [addOptionsTarget]);
   const onBlur = (event) => {
     setFocus(false);
     setFilter("");
@@ -46,10 +43,6 @@ function InputSelect(props) {
     setFocus(true);
     if (register.onFocus) register.onFocus(event);
   };
-  const onClick = (event) => {
-    if (register.onClick) register.onClick(event);
-    addOptionsTarget();
-  };
   const onChange = (event) => {
     const value2 = event.target.value || "";
     event.target.value = props.mask ? props.mask(value2) : value2;
@@ -81,7 +74,6 @@ function InputSelect(props) {
               onChange,
               onFocus,
               onBlur,
-              onClick,
               value: focus ? filter : "",
               placeholder: _.isString(value) ? value : (value == null ? void 0 : value.textContent) || ""
             }

package/dist/components/types/form/types/select/options/index.js

@@ -44,7 +44,7 @@ function InputSelectOption(props) {
   (0, import_react.useEffect)(() => {
     var _a;
     (_a = props.setValue) == null ? void 0 : _a.call(props, props.name, value);
-    target.remove(props.inputRef);
+    target.close(props.inputRef);
   }, [value, props.inputRef]);
   (0, import_react.useEffect)(() => {
     const optionsElement = document.getElementById("input-options");

package/dist/components/types/form/types/select/options/index.mjs

@@ -11,7 +11,7 @@ function InputSelectOption(props) {
   useEffect(() => {
     var _a;
     (_a = props.setValue) == null ? void 0 : _a.call(props, props.name, value);
-    target.remove(props.inputRef);
+    target.close(props.inputRef);
   }, [value, props.inputRef]);
   useEffect(() => {
     const optionsElement = document.getElementById("input-options");

package/dist/contexts/target/index.js

@@ -50,22 +50,25 @@ const TargetProviderContainer = ({ children }) => {
     if (isFocusable) return target.ref.current;
     return inputRef.current[index];
   };
-  const close = (element, index) => {
+  const close = (target, index) => {
+    const element = containerRef.current[index];
     element.style.opacity = "0";
     element.style.zIndex = "-1";
     insideMemory.splice(import_lodash.default.findIndex(insideMemory, (i) => i === index), 1);
   };
-  const open = (element, coords) => {
+  const open = (target, index, coords) => {
+    const element = containerRef.current[index];
     element.style.top = `${coords.top}px`;
     element.style.left = `${coords.left}px`;
     element.style.opacity = "1";
     element.style.zIndex = "10";
+    elementFocusable(target, index).focus();
   };
   (0, import_react.useEffect)(() => {
     const handleScroll = () => {
       import_lodash.default.forEach(containerRef.current, (element, index) => {
         if (import_lodash.default.some(insideMemory, (i) => i === index)) return;
-        close(element, index);
+        close(targets[index], index);
       });
     };
     window.addEventListener("scroll", handleScroll, { passive: true });
@@ -98,31 +101,29 @@ const TargetProviderContainer = ({ children }) => {
       });
       observer.disconnect();
     };
-  }, []);
+  }, [targets]);
   (0, import_react.useEffect)(() => {
     import_lodash.default.forEach(targets, (target, index) => {
       var _a;
       const element = (_a = target.ref) == null ? void 0 : _a.current;
       if (!(element == null ? void 0 : element.addEventListener)) return;
       const focusable = elementFocusable(target, index);
-      const targetElement = import_lodash.default.find(containerRef.current, (data, i) => i === index);
+      const targetElement = containerRef.current[index];
       element.addEventListener("click", () => {
-        if (!targetElement) return;
         const styles = window.getComputedStyle(targetElement);
         if (styles.opacity === "1") {
-          close(targetElement, index);
+          close(target, index);
           return;
         }
         const coords = getCoords(element);
-        open(targetElement, coords);
-        focusable.focus();
+        open(target, index, coords);
       });
       element.addEventListener("resize", () => {
-        import_lodash.default.forEach(containerRef.current, (elementRef) => close(elementRef, index));
+        import_lodash.default.forEach(containerRef.current, (elementRef) => close(target, index));
       });
       focusable.addEventListener("blur", () => {
         if (import_lodash.default.some(insideMemory, (i) => i === index)) return;
-        close(containerRef.current[index], index);
+        close(target, index);
       });
     });
   }, [targets, inputRef, containerRef]);
@@ -150,18 +151,22 @@ const TargetProviderContainer = ({ children }) => {
   };
   const remove = (ref) => {
     const index = import_lodash.default.findIndex(memory, (data) => data.ref.current === ref.current);
-    console.log(import_lodash.default.find(memory, (data) => data.ref.current === ref.current));
     insideMemory.splice(import_lodash.default.findIndex(insideMemory, (i) => i === index), 1);
-    memory.slice(index, 1);
-    console.log("memory", memory);
+    memory.splice(index, 1);
     setTargets(memory);
   };
+  const closeTarget = (ref) => {
+    const index = import_lodash.default.findIndex(memory, (data) => data.ref.current === ref.current);
+    insideMemory.splice(import_lodash.default.findIndex(insideMemory, (i) => i === index), 1);
+    elementFocusable(targets[index], index).blur();
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     TargetContext.Provider,
     {
       value: {
         add,
-        remove
+        remove,
+        close: closeTarget
       },
       children: [
         import_lodash.default.map(

package/dist/contexts/target/index.mjs

@@ -16,22 +16,25 @@ const TargetProviderContainer = ({ children }) => {
     if (isFocusable) return target.ref.current;
     return inputRef.current[index];
   };
-  const close = (element, index) => {
+  const close = (target, index) => {
+    const element = containerRef.current[index];
     element.style.opacity = "0";
     element.style.zIndex = "-1";
     insideMemory.splice(_.findIndex(insideMemory, (i) => i === index), 1);
   };
-  const open = (element, coords) => {
+  const open = (target, index, coords) => {
+    const element = containerRef.current[index];
     element.style.top = `${coords.top}px`;
     element.style.left = `${coords.left}px`;
     element.style.opacity = "1";
     element.style.zIndex = "10";
+    elementFocusable(target, index).focus();
   };
   useEffect(() => {
     const handleScroll = () => {
       _.forEach(containerRef.current, (element, index) => {
         if (_.some(insideMemory, (i) => i === index)) return;
-        close(element, index);
+        close(targets[index], index);
       });
     };
     window.addEventListener("scroll", handleScroll, { passive: true });
@@ -64,31 +67,29 @@ const TargetProviderContainer = ({ children }) => {
       });
       observer.disconnect();
     };
-  }, []);
+  }, [targets]);
   useEffect(() => {
     _.forEach(targets, (target, index) => {
       var _a;
       const element = (_a = target.ref) == null ? void 0 : _a.current;
       if (!(element == null ? void 0 : element.addEventListener)) return;
       const focusable = elementFocusable(target, index);
-      const targetElement = _.find(containerRef.current, (data, i) => i === index);
+      const targetElement = containerRef.current[index];
       element.addEventListener("click", () => {
-        if (!targetElement) return;
         const styles = window.getComputedStyle(targetElement);
         if (styles.opacity === "1") {
-          close(targetElement, index);
+          close(target, index);
           return;
         }
         const coords = getCoords(element);
-        open(targetElement, coords);
-        focusable.focus();
+        open(target, index, coords);
       });
       element.addEventListener("resize", () => {
-        _.forEach(containerRef.current, (elementRef) => close(elementRef, index));
+        _.forEach(containerRef.current, (elementRef) => close(target, index));
       });
       focusable.addEventListener("blur", () => {
         if (_.some(insideMemory, (i) => i === index)) return;
-        close(containerRef.current[index], index);
+        close(target, index);
       });
     });
   }, [targets, inputRef, containerRef]);
@@ -116,18 +117,22 @@ const TargetProviderContainer = ({ children }) => {
   };
   const remove = (ref) => {
     const index = _.findIndex(memory, (data) => data.ref.current === ref.current);
-    console.log(_.find(memory, (data) => data.ref.current === ref.current));
     insideMemory.splice(_.findIndex(insideMemory, (i) => i === index), 1);
-    memory.slice(index, 1);
-    console.log("memory", memory);
+    memory.splice(index, 1);
     setTargets(memory);
   };
+  const closeTarget = (ref) => {
+    const index = _.findIndex(memory, (data) => data.ref.current === ref.current);
+    insideMemory.splice(_.findIndex(insideMemory, (i) => i === index), 1);
+    elementFocusable(targets[index], index).blur();
+  };
   return /* @__PURE__ */ jsxs(
     TargetContext.Provider,
     {
       value: {
         add,
-        remove
+        remove,
+        close: closeTarget
       },
       children: [
         _.map(

package/dist/interfaces/contexts/tooltip/index.d.ts

@@ -13,4 +13,5 @@ export interface ITargetConfigCoords {
 export interface ITargetContext {
     add: (config: ITargetConfig) => void;
     remove: (ref: React.RefObject<any>) => void;
+    close: (ref: React.RefObject<any>) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gustavo-valsechi/client",
-  "version": "1.4.118",
+  "version": "1.4.120",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",