@gustavo-valsechi/client 1.4.99 → 1.4.101

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

@@ -41,15 +41,28 @@ var import_contexts = require("../../../../../contexts");
 var import_lodash = __toESM(require("lodash"));
 var import_options = __toESM(require("./options"));
 function InputSelect(props) {
+  const containerRef = (0, import_react.useRef)(null);
   const inputRef = (0, import_react.useRef)(null);
   const target = (0, import_contexts.useTarget)();
   const [focus, setFocus] = (0, import_react.useState)(false);
   const register = (props.register || ((name) => ({})))(props.name || "");
   (0, import_react.useEffect)(() => {
-    if (!(inputRef == null ? void 0 : inputRef.current)) return;
-    target.add({ ref: inputRef, component: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_options.default, { ...props, inputRef, register }) });
+    var _a;
+    if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
+    target.add({
+      ref: inputRef,
+      component: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_options.default,
+        {
+          ...props,
+          inputRef,
+          register,
+          width: ((_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.offsetWidth) || 0
+        }
+      )
+    });
     return () => target.remove(inputRef);
-  }, [inputRef]);
+  }, [inputRef, containerRef]);
   const onBlur = (event) => {
     setFocus(false);
     if (register.onBlur) register.onBlur(event);
@@ -68,7 +81,7 @@ function InputSelect(props) {
       props.label,
       props.required ? "*" : ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "input-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: containerRef, className: "input-content", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "input",
         {
@@ -82,7 +95,7 @@ function InputSelect(props) {
           onBlur
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-icon", onClick: () => inputRef.current.click(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: focus ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-icon", onClick: () => inputRef.current.click(), children: focus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-up" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-down" }) })
     ] }),
     !!props.error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_error.InputError, { children: props.error })
   ] });

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

@@ -8,15 +8,28 @@ import { useTarget } from "../../../../../contexts";
 import _ from "lodash";
 import InputSelectOption from "./options";
 function InputSelect(props) {
+  const containerRef = useRef(null);
   const inputRef = useRef(null);
   const target = useTarget();
   const [focus, setFocus] = useState(false);
   const register = (props.register || ((name) => ({})))(props.name || "");
   useEffect(() => {
-    if (!(inputRef == null ? void 0 : inputRef.current)) return;
-    target.add({ ref: inputRef, component: /* @__PURE__ */ jsx(InputSelectOption, { ...props, inputRef, register }) });
+    var _a;
+    if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
+    target.add({
+      ref: inputRef,
+      component: /* @__PURE__ */ jsx(
+        InputSelectOption,
+        {
+          ...props,
+          inputRef,
+          register,
+          width: ((_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.offsetWidth) || 0
+        }
+      )
+    });
     return () => target.remove(inputRef);
-  }, [inputRef]);
+  }, [inputRef, containerRef]);
   const onBlur = (event) => {
     setFocus(false);
     if (register.onBlur) register.onBlur(event);
@@ -35,7 +48,7 @@ function InputSelect(props) {
       props.label,
       props.required ? "*" : ""
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "input-content", children: [
+    /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "input-content", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -49,7 +62,7 @@ function InputSelect(props) {
           onBlur
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "input-icon", onClick: () => inputRef.current.click(), children: /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: focus ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down" }) })
+      /* @__PURE__ */ jsx("div", { className: "input-icon", onClick: () => inputRef.current.click(), children: focus ? /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-chevron-up" }) : /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-chevron-down" }) })
     ] }),
     !!props.error && /* @__PURE__ */ jsx(InputError, { children: props.error })
   ] });

package/dist/components/types/form/types/select/options/index.d.ts

@@ -1,4 +1,5 @@
 import { IInputSelect } from "@interfaces";
 export default function InputSelectOption(props: IInputSelect & {
     inputRef: any;
+    width: number;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -37,13 +37,12 @@ var import_react = require("react");
 var import_styles = require("./styles");
 var import_lodash = __toESM(require("lodash"));
 function InputSelectOption(props) {
-  var _a, _b;
   const [value, set] = (0, import_react.useState)("");
   (0, import_react.useEffect)(() => {
-    var _a2;
-    (_a2 = props.setValue) == null ? void 0 : _a2.call(props, value);
+    var _a;
+    (_a = props.setValue) == null ? void 0 : _a.call(props, value);
   }, [value, props.inputRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { width: (_b = (_a = props.inputRef) == null ? void 0 : _a.current) == null ? void 0 : _b.offsetWidth, children: import_lodash.default.map(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { width: props.width, children: import_lodash.default.map(
     props.options,
     (data, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",

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

@@ -4,13 +4,12 @@ import { useEffect, useState } from "react";
 import { Container } from "./styles";
 import _ from "lodash";
 function InputSelectOption(props) {
-  var _a, _b;
   const [value, set] = useState("");
   useEffect(() => {
-    var _a2;
-    (_a2 = props.setValue) == null ? void 0 : _a2.call(props, value);
+    var _a;
+    (_a = props.setValue) == null ? void 0 : _a.call(props, value);
   }, [value, props.inputRef]);
-  return /* @__PURE__ */ jsx(Container, { width: (_b = (_a = props.inputRef) == null ? void 0 : _a.current) == null ? void 0 : _b.offsetWidth, children: _.map(
+  return /* @__PURE__ */ jsx(Container, { width: props.width, children: _.map(
     props.options,
     (data, index) => /* @__PURE__ */ jsx(
       "div",

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

@@ -56,7 +56,7 @@ const Container = import_styled_components.default.div`
             cursor: pointer;
 
             &:focus {
-                cursor: vertical-text;
+                cursor: text;
             }
             
             &:disabled {

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

@@ -23,7 +23,7 @@ const Container = styled.div`
             cursor: pointer;
 
             &:focus {
-                cursor: vertical-text;
+                cursor: text;
             }
             
             &:disabled {

package/dist/contexts/target/index.js

@@ -43,7 +43,7 @@ const TargetProviderContainer = ({ children }) => {
   const inputRef = (0, import_react.useRef)([]);
   const containerRef = (0, import_react.useRef)([]);
   const [targets, setTargets] = (0, import_react.useState)([]);
-  const [inside, setInside] = (0, import_react.useState)(false);
+  const [inside, setInside] = (0, import_react.useState)([]);
   const elementFocusable = (target, index) => {
     const focusableTags = ["input", "select", "textarea", "button"];
     const isFocusable = import_lodash.default.some(focusableTags, (tag) => target.ref.current.tagName.toLowerCase() === tag);
@@ -62,8 +62,10 @@ const TargetProviderContainer = ({ children }) => {
   };
   (0, import_react.useEffect)(() => {
     const handleScroll = () => {
-      if (inside) return;
-      import_lodash.default.forEach(containerRef.current, (element) => close(element));
+      import_lodash.default.forEach(containerRef.current, (element, index) => {
+        if (import_lodash.default.some(inside, (i) => i === index)) return;
+        close(element);
+      });
     };
     window.addEventListener("scroll", handleScroll, { passive: true });
     const addScrollListener = (el) => {
@@ -101,24 +103,28 @@ const TargetProviderContainer = ({ children }) => {
       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);
       element.addEventListener("click", () => {
         const targetElement = import_lodash.default.find(containerRef.current, (data, i) => i === index);
         if (!targetElement) return;
         const styles = window.getComputedStyle(targetElement);
-        console.log(styles);
         if (styles.opacity === "1") {
           close(targetElement);
           return;
         }
         const coords = getCoords(element);
         open(targetElement, coords);
-        elementFocusable(target, index).focus();
+        focusable.focus();
       });
       element.addEventListener("resize", () => {
         import_lodash.default.forEach(containerRef.current, (elementRef) => close(elementRef));
       });
+      focusable.addEventListener("blur", () => {
+        if (import_lodash.default.some(inside, (i) => i === index)) return;
+        close(containerRef.current[index]);
+      });
     });
-  }, [targets, inputRef, containerRef]);
+  }, [targets, inputRef, containerRef, inside]);
   const getCoords = (target) => {
     const rect = target.getBoundingClientRect();
     const targetTop = rect.top + window.scrollY;
@@ -160,11 +166,11 @@ const TargetProviderContainer = ({ children }) => {
               {
                 ref: (element) => containerRef.current[index] = element,
                 onMouseEnter: () => {
-                  setInside(true);
+                  setInside(import_lodash.default.concat(inside, index));
                   elementFocusable(target, index).focus();
                 },
                 onMouseLeave: () => {
-                  setInside(false);
+                  setInside(import_lodash.default.filter(inside, (i) => i !== index));
                   elementFocusable(target, index).focus();
                 },
                 children: target.component
@@ -174,11 +180,7 @@ const TargetProviderContainer = ({ children }) => {
               "input",
               {
                 style: { zIndex: "-1", position: "fixed", opacity: "0" },
-                ref: (element) => inputRef.current[index] = element,
-                onBlur: () => {
-                  if (inside) return;
-                  close(containerRef.current[index]);
-                }
+                ref: (element) => inputRef.current[index] = element
               }
             )
           ] }, index)

package/dist/contexts/target/index.mjs

@@ -9,7 +9,7 @@ const TargetProviderContainer = ({ children }) => {
   const inputRef = useRef([]);
   const containerRef = useRef([]);
   const [targets, setTargets] = useState([]);
-  const [inside, setInside] = useState(false);
+  const [inside, setInside] = useState([]);
   const elementFocusable = (target, index) => {
     const focusableTags = ["input", "select", "textarea", "button"];
     const isFocusable = _.some(focusableTags, (tag) => target.ref.current.tagName.toLowerCase() === tag);
@@ -28,8 +28,10 @@ const TargetProviderContainer = ({ children }) => {
   };
   useEffect(() => {
     const handleScroll = () => {
-      if (inside) return;
-      _.forEach(containerRef.current, (element) => close(element));
+      _.forEach(containerRef.current, (element, index) => {
+        if (_.some(inside, (i) => i === index)) return;
+        close(element);
+      });
     };
     window.addEventListener("scroll", handleScroll, { passive: true });
     const addScrollListener = (el) => {
@@ -67,24 +69,28 @@ const TargetProviderContainer = ({ children }) => {
       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);
       element.addEventListener("click", () => {
         const targetElement = _.find(containerRef.current, (data, i) => i === index);
         if (!targetElement) return;
         const styles = window.getComputedStyle(targetElement);
-        console.log(styles);
         if (styles.opacity === "1") {
           close(targetElement);
           return;
         }
         const coords = getCoords(element);
         open(targetElement, coords);
-        elementFocusable(target, index).focus();
+        focusable.focus();
       });
       element.addEventListener("resize", () => {
         _.forEach(containerRef.current, (elementRef) => close(elementRef));
       });
+      focusable.addEventListener("blur", () => {
+        if (_.some(inside, (i) => i === index)) return;
+        close(containerRef.current[index]);
+      });
     });
-  }, [targets, inputRef, containerRef]);
+  }, [targets, inputRef, containerRef, inside]);
   const getCoords = (target) => {
     const rect = target.getBoundingClientRect();
     const targetTop = rect.top + window.scrollY;
@@ -126,11 +132,11 @@ const TargetProviderContainer = ({ children }) => {
               {
                 ref: (element) => containerRef.current[index] = element,
                 onMouseEnter: () => {
-                  setInside(true);
+                  setInside(_.concat(inside, index));
                   elementFocusable(target, index).focus();
                 },
                 onMouseLeave: () => {
-                  setInside(false);
+                  setInside(_.filter(inside, (i) => i !== index));
                   elementFocusable(target, index).focus();
                 },
                 children: target.component
@@ -140,11 +146,7 @@ const TargetProviderContainer = ({ children }) => {
               "input",
               {
                 style: { zIndex: "-1", position: "fixed", opacity: "0" },
-                ref: (element) => inputRef.current[index] = element,
-                onBlur: () => {
-                  if (inside) return;
-                  close(containerRef.current[index]);
-                }
+                ref: (element) => inputRef.current[index] = element
               }
             )
           ] }, index)

package/package.json

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