@gustavo-valsechi/client 1.4.105 → 1.4.107

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

@@ -60,7 +60,8 @@ function Form(props) {
     handleSubmit,
     reset,
     formState: { errors },
-    setValue
+    setValue,
+    watch
   } = (0, import_react_hook_form.useForm)({
     resolver: (0, import_zod2.zodResolver)(schema),
     defaultValues: props.defaultValues,
@@ -99,7 +100,8 @@ function Form(props) {
         type: component2 ? void 0 : data.type,
         error: (_a = errors[data.name]) == null ? void 0 : _a.message,
         register,
-        setValue
+        setValue,
+        watch
       }
     );
   };

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

@@ -26,7 +26,8 @@ function Form(props) {
     handleSubmit,
     reset,
     formState: { errors },
-    setValue
+    setValue,
+    watch
   } = useForm({
     resolver: zodResolver(schema),
     defaultValues: props.defaultValues,
@@ -65,7 +66,8 @@ function Form(props) {
         type: component2 ? void 0 : data.type,
         error: (_a = errors[data.name]) == null ? void 0 : _a.message,
         register,
-        setValue
+        setValue,
+        watch
       }
     );
   };

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

@@ -41,14 +41,15 @@ var import_contexts = require("../../../../../contexts");
 var import_lodash = __toESM(require("lodash"));
 var import_options = __toESM(require("./options"));
 function InputSelect(props) {
-  var _a;
+  var _a, _b;
   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 [filter, setFilter] = (0, import_react.useState)("");
   const register = (props.register || ((name) => ({})))(props.name || "");
-  const labelValue = ((_a = import_lodash.default.find(props.options, (option) => Object.keys(option)[0] === register.value)) == null ? void 0 : _a[register.value]) || "";
+  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 || ""]) || "";
   (0, import_react.useEffect)(() => {
     var _a2;
     if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
@@ -60,8 +61,7 @@ function InputSelect(props) {
           ...props,
           inputRef,
           register,
-          width: ((_a2 = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a2.offsetWidth) || 0,
-          filter
+          width: ((_a2 = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a2.offsetWidth) || 0
         }
       )
     });
@@ -77,33 +77,43 @@ function InputSelect(props) {
     if (register.onFocus) register.onFocus(event);
   };
   const onChange = (event) => {
-    const value = event.target.value || "";
-    event.target.value = props.mask ? props.mask(value) : value;
-    setFilter(value);
-    if (props.onFilter) props.onFilter(value);
+    const value2 = event.target.value || "";
+    event.target.value = props.mask ? props.mask(value2) : value2;
+    setFilter(value2);
+    if (props.onFilter) props.onFilter(value2);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { className: props.className, error: props.error, children: [
     !!props.label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_label.InputLabel, { children: [
       props.label,
       props.required ? "*" : ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: containerRef, className: "input-content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "input",
-        {
-          ...import_lodash.default.omit(props, ["className", "register", "mask", "setValue"]),
-          ...register,
-          ref: inputRef,
-          type: "text",
-          maxLength: props.maxLength || 255,
-          onChange,
-          onFocus,
-          onBlur,
-          value: focus ? filter : labelValue
-        }
-      ),
-      /* @__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" }) })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: containerRef,
+        className: "input-content",
+        onClick: () => inputRef.current.click(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              ...import_lodash.default.omit(props, ["className", "register", "mask", "setValue"]),
+              ...register,
+              ref: inputRef,
+              type: "text",
+              maxLength: props.maxLength || 255,
+              onChange,
+              onFocus,
+              onBlur,
+              value: focus ? filter : "",
+              placeholder: import_lodash.default.isString(value) ? value : (value == null ? void 0 : value.textContent) || ""
+            }
+          ),
+          !focus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-label-value", children: value }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-icon", 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,14 +8,15 @@ import { useTarget } from "../../../../../contexts";
 import _ from "lodash";
 import InputSelectOption from "./options";
 function InputSelect(props) {
-  var _a;
+  var _a, _b;
   const containerRef = useRef(null);
   const inputRef = useRef(null);
   const target = useTarget();
   const [focus, setFocus] = useState(false);
   const [filter, setFilter] = useState("");
   const register = (props.register || ((name) => ({})))(props.name || "");
-  const labelValue = ((_a = _.find(props.options, (option) => Object.keys(option)[0] === register.value)) == null ? void 0 : _a[register.value]) || "";
+  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 || ""]) || "";
   useEffect(() => {
     var _a2;
     if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
@@ -27,8 +28,7 @@ function InputSelect(props) {
           ...props,
           inputRef,
           register,
-          width: ((_a2 = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a2.offsetWidth) || 0,
-          filter
+          width: ((_a2 = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a2.offsetWidth) || 0
         }
       )
     });
@@ -44,33 +44,43 @@ function InputSelect(props) {
     if (register.onFocus) register.onFocus(event);
   };
   const onChange = (event) => {
-    const value = event.target.value || "";
-    event.target.value = props.mask ? props.mask(value) : value;
-    setFilter(value);
-    if (props.onFilter) props.onFilter(value);
+    const value2 = event.target.value || "";
+    event.target.value = props.mask ? props.mask(value2) : value2;
+    setFilter(value2);
+    if (props.onFilter) props.onFilter(value2);
   };
   return /* @__PURE__ */ jsxs(Container, { className: props.className, error: props.error, children: [
     !!props.label && /* @__PURE__ */ jsxs(InputLabel, { children: [
       props.label,
       props.required ? "*" : ""
     ] }),
-    /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "input-content", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ..._.omit(props, ["className", "register", "mask", "setValue"]),
-          ...register,
-          ref: inputRef,
-          type: "text",
-          maxLength: props.maxLength || 255,
-          onChange,
-          onFocus,
-          onBlur,
-          value: focus ? filter : labelValue
-        }
-      ),
-      /* @__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" }) })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "input-content",
+        onClick: () => inputRef.current.click(),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ..._.omit(props, ["className", "register", "mask", "setValue"]),
+              ...register,
+              ref: inputRef,
+              type: "text",
+              maxLength: props.maxLength || 255,
+              onChange,
+              onFocus,
+              onBlur,
+              value: focus ? filter : "",
+              placeholder: _.isString(value) ? value : (value == null ? void 0 : value.textContent) || ""
+            }
+          ),
+          !focus && /* @__PURE__ */ jsx("div", { className: "input-label-value", children: value }),
+          /* @__PURE__ */ jsx("div", { className: "input-icon", 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

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

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

@@ -41,24 +41,35 @@ function InputSelectOption(props) {
   const [options, setOptions] = (0, import_react.useState)(props.options);
   (0, import_react.useEffect)(() => {
     var _a, _b;
+    console.log("value", value);
     (_a = props.setValue) == null ? void 0 : _a.call(props, value);
     if (!value || !((_b = props.inputRef) == null ? void 0 : _b.current)) return;
     props.inputRef.current.click();
   }, [value, props.inputRef]);
   (0, import_react.useEffect)(() => {
-    var _a, _b;
-    (_a = props.setValue) == null ? void 0 : _a.call(props, value);
-    if (!value || !((_b = props.inputRef) == null ? void 0 : _b.current)) return;
-    props.inputRef.current.click();
-  }, [props.filter]);
+    var _a;
+    if (!((_a = props.inputRef) == null ? void 0 : _a.current)) return;
+    props.inputRef.current.addEventListener("change", (e) => {
+      e.preventDefault();
+      const filter = e.target.value || "";
+      if (!filter) return setOptions(props.options);
+      const filtredOptions = import_lodash.default.filter(props.options, (data) => {
+        var _a2;
+        const value2 = ((_a2 = Object.values(data || {})) == null ? void 0 : _a2[0]) || "";
+        if (import_lodash.default.isString(value2)) return import_lodash.default.includes(value2, filter);
+        return import_lodash.default.includes(value2 == null ? void 0 : value2.textContent, filter);
+      });
+      setOptions(filtredOptions);
+    });
+  }, [props.inputRef]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { width: props.width, children: import_lodash.default.map(
-    props.options,
+    options,
     (data, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         className: "input-option",
         onClick: () => set(Object.keys(data)[index]),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-option-elipse", children: Object.values(data)[index] || "" })
+        children: Object.values(data)[index] || ""
       },
       index
     )

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

@@ -8,24 +8,35 @@ function InputSelectOption(props) {
   const [options, setOptions] = useState(props.options);
   useEffect(() => {
     var _a, _b;
+    console.log("value", value);
     (_a = props.setValue) == null ? void 0 : _a.call(props, value);
     if (!value || !((_b = props.inputRef) == null ? void 0 : _b.current)) return;
     props.inputRef.current.click();
   }, [value, props.inputRef]);
   useEffect(() => {
-    var _a, _b;
-    (_a = props.setValue) == null ? void 0 : _a.call(props, value);
-    if (!value || !((_b = props.inputRef) == null ? void 0 : _b.current)) return;
-    props.inputRef.current.click();
-  }, [props.filter]);
+    var _a;
+    if (!((_a = props.inputRef) == null ? void 0 : _a.current)) return;
+    props.inputRef.current.addEventListener("change", (e) => {
+      e.preventDefault();
+      const filter = e.target.value || "";
+      if (!filter) return setOptions(props.options);
+      const filtredOptions = _.filter(props.options, (data) => {
+        var _a2;
+        const value2 = ((_a2 = Object.values(data || {})) == null ? void 0 : _a2[0]) || "";
+        if (_.isString(value2)) return _.includes(value2, filter);
+        return _.includes(value2 == null ? void 0 : value2.textContent, filter);
+      });
+      setOptions(filtredOptions);
+    });
+  }, [props.inputRef]);
   return /* @__PURE__ */ jsx(Container, { width: props.width, children: _.map(
-    props.options,
+    options,
     (data, index) => /* @__PURE__ */ jsx(
       "div",
       {
         className: "input-option",
         onClick: () => set(Object.keys(data)[index]),
-        children: /* @__PURE__ */ jsx("div", { className: "input-option-elipse", children: Object.values(data)[index] || "" })
+        children: Object.values(data)[index] || ""
       },
       index
     )

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

@@ -44,24 +44,14 @@ const Container = import_styled_components.default.div`
     overflow-y: scroll;
     
     .input-option {
-        padding: .5rem .8rem;
+        padding: .5rem 1rem;
         border-radius: 5px;
         cursor: pointer;
-        width: ${({ width }) => width}px;
-        position: relative;
+        max-height: 36px;
         
         &:hover {
             background-color: ${({ theme }) => theme.t05};
         }
-
-        .input-option-elipse {
-            position: absolute;
-            left: 0;
-            right: 0;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
     }
 `;
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -11,24 +11,14 @@ const Container = styled.div`
     overflow-y: scroll;
     
     .input-option {
-        padding: .5rem .8rem;
+        padding: .5rem 1rem;
         border-radius: 5px;
         cursor: pointer;
-        width: ${({ width }) => width}px;
-        position: relative;
+        max-height: 36px;
         
         &:hover {
             background-color: ${({ theme }) => theme.t05};
         }
-
-        .input-option-elipse {
-            position: absolute;
-            left: 0;
-            right: 0;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
     }
 `;
 export {

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

@@ -45,6 +45,7 @@ const Container = import_styled_components.default.div`
         overflow: hidden;
         padding-right: ${({ password }) => password ? ".6rem" : "0rem"};
         background-color: ${({ theme }) => theme.primary};
+        position: relative;
 
         input {
             border: 0;
@@ -54,6 +55,8 @@ const Container = import_styled_components.default.div`
             background-color: ${({ theme }) => theme.primary};
             color: ${({ theme }) => theme.t6};
             cursor: pointer;
+            position: relative;
+            z-index: 0;
 
             &:focus {
                 cursor: text;
@@ -69,6 +72,19 @@ const Container = import_styled_components.default.div`
                 outline: none;
             }
         }
+        
+        .input-label-value {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            cursor: pointer;
+            z-index: 1;
+            padding: 0 1rem;
+            display: flex;
+            align-items: center;
+        }
 
         .input-icon {
             color: ${({ theme }) => theme.t3};

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

@@ -12,6 +12,7 @@ const Container = styled.div`
         overflow: hidden;
         padding-right: ${({ password }) => password ? ".6rem" : "0rem"};
         background-color: ${({ theme }) => theme.primary};
+        position: relative;
 
         input {
             border: 0;
@@ -21,6 +22,8 @@ const Container = styled.div`
             background-color: ${({ theme }) => theme.primary};
             color: ${({ theme }) => theme.t6};
             cursor: pointer;
+            position: relative;
+            z-index: 0;
 
             &:focus {
                 cursor: text;
@@ -36,6 +39,19 @@ const Container = styled.div`
                 outline: none;
             }
         }
+        
+        .input-label-value {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            cursor: pointer;
+            z-index: 1;
+            padding: 0 1rem;
+            display: flex;
+            align-items: center;
+        }
 
         .input-icon {
             color: ${({ theme }) => theme.t3};

package/dist/interfaces/components/form/select/index.d.ts

@@ -17,5 +17,6 @@ export interface IInputSelect {
     validation?: typeof z;
     mask?: (value: string) => void;
     setValue?: (...args: any[]) => void;
+    watch?: (...args: any[]) => string;
     maxLength?: number;
 }

package/package.json

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