@gustavo-valsechi/client 1.4.116 → 1.4.118

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/types/form/types/select/index.js +33 -5
  2. package/dist/components/types/form/types/select/index.mjs +34 -6
  3. package/dist/components/types/form/types/select/options/index.d.ts +0 -1
  4. package/dist/components/types/form/types/select/options/index.js +8 -6
  5. package/dist/components/types/form/types/select/options/index.mjs +8 -6
  6. package/dist/components/types/form/types/select/styles.js +27 -1
  7. package/dist/components/types/form/types/select/styles.mjs +27 -1
  8. package/dist/contexts/target/index.js +6 -2
  9. package/dist/contexts/target/index.mjs +6 -2
  10. package/package.json +1 -1
package/dist/components/types/form/types/select/index.js CHANGED
@@ -50,7 +50,7 @@ function InputSelect(props) {
50
50
  const register = (props.register || ((name) => ({})))(props.name || "");
51
51
  const inputValue = (_a = props.watch) == null ? void 0 : _a.call(props, props.name);
52
52
  const value = ((_b = import_lodash.default.find(props.options, (option) => Object.keys(option)[0] === inputValue)) == null ? void 0 : _b[inputValue || ""]) || "";
53
- (0, import_react.useEffect)(() => {
53
+ const addOptionsTarget = (0, import_react.useCallback)(() => {
54
54
  var _a2;
55
55
  if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
56
56
  target.add({
@@ -66,7 +66,10 @@ function InputSelect(props) {
66
66
  )
67
67
  });
68
68
  return () => target.remove(inputRef);
69
- }, [inputRef, containerRef]);
69
+ }, [containerRef, inputRef]);
70
+ (0, import_react.useEffect)(() => {
71
+ addOptionsTarget();
72
+ }, [addOptionsTarget]);
70
73
  const onBlur = (event) => {
71
74
  setFocus(false);
72
75
  setFilter("");
@@ -76,6 +79,10 @@ function InputSelect(props) {
76
79
  setFocus(true);
77
80
  if (register.onFocus) register.onFocus(event);
78
81
  };
82
+ const onClick = (event) => {
83
+ if (register.onClick) register.onClick(event);
84
+ addOptionsTarget();
85
+ };
79
86
  const onChange = (event) => {
80
87
  const value2 = event.target.value || "";
81
88
  event.target.value = props.mask ? props.mask(value2) : value2;
@@ -95,7 +102,6 @@ function InputSelect(props) {
95
102
  {
96
103
  ref: containerRef,
97
104
  className: "input-content",
98
- onClick: () => inputRef.current.click(),
99
105
  children: [
100
106
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
101
107
  "input",
@@ -108,12 +114,34 @@ function InputSelect(props) {
108
114
  onChange,
109
115
  onFocus,
110
116
  onBlur,
117
+ onClick,
111
118
  value: focus ? filter : "",
112
119
  placeholder: import_lodash.default.isString(value) ? value : (value == null ? void 0 : value.textContent) || ""
113
120
  }
114
121
  ),
115
- !focus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-label-value", children: value }),
116
- /* @__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" }) })
122
+ !focus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
123
+ "div",
124
+ {
125
+ className: "input-label-value",
126
+ onClick: () => inputRef.current.click(),
127
+ children: value
128
+ }
129
+ ),
130
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
131
+ "div",
132
+ {
133
+ className: "input-icon",
134
+ "data-focus": focus,
135
+ onClick: () => {
136
+ if (focus) return inputRef.current.blur();
137
+ inputRef.current.click();
138
+ },
139
+ children: [
140
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-up" }),
141
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-down" })
142
+ ]
143
+ }
144
+ )
117
145
  ]
118
146
  }
119
147
  ),
package/dist/components/types/form/types/select/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
- import { useState, useRef, useEffect } from "react";
3
+ import { useState, useRef, useEffect, useCallback } from "react";
4
4
  import { Container } from "./styles";
5
5
  import { InputLabel } from "../label";
6
6
  import { InputError } from "../error";
@@ -17,7 +17,7 @@ function InputSelect(props) {
17
17
  const register = (props.register || ((name) => ({})))(props.name || "");
18
18
  const inputValue = (_a = props.watch) == null ? void 0 : _a.call(props, props.name);
19
19
  const value = ((_b = _.find(props.options, (option) => Object.keys(option)[0] === inputValue)) == null ? void 0 : _b[inputValue || ""]) || "";
20
- useEffect(() => {
20
+ const addOptionsTarget = useCallback(() => {
21
21
  var _a2;
22
22
  if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
23
23
  target.add({
@@ -33,7 +33,10 @@ function InputSelect(props) {
33
33
  )
34
34
  });
35
35
  return () => target.remove(inputRef);
36
- }, [inputRef, containerRef]);
36
+ }, [containerRef, inputRef]);
37
+ useEffect(() => {
38
+ addOptionsTarget();
39
+ }, [addOptionsTarget]);
37
40
  const onBlur = (event) => {
38
41
  setFocus(false);
39
42
  setFilter("");
@@ -43,6 +46,10 @@ function InputSelect(props) {
43
46
  setFocus(true);
44
47
  if (register.onFocus) register.onFocus(event);
45
48
  };
49
+ const onClick = (event) => {
50
+ if (register.onClick) register.onClick(event);
51
+ addOptionsTarget();
52
+ };
46
53
  const onChange = (event) => {
47
54
  const value2 = event.target.value || "";
48
55
  event.target.value = props.mask ? props.mask(value2) : value2;
@@ -62,7 +69,6 @@ function InputSelect(props) {
62
69
  {
63
70
  ref: containerRef,
64
71
  className: "input-content",
65
- onClick: () => inputRef.current.click(),
66
72
  children: [
67
73
  /* @__PURE__ */ jsx(
68
74
  "input",
@@ -75,12 +81,34 @@ function InputSelect(props) {
75
81
  onChange,
76
82
  onFocus,
77
83
  onBlur,
84
+ onClick,
78
85
  value: focus ? filter : "",
79
86
  placeholder: _.isString(value) ? value : (value == null ? void 0 : value.textContent) || ""
80
87
  }
81
88
  ),
82
- !focus && /* @__PURE__ */ jsx("div", { className: "input-label-value", children: value }),
83
- /* @__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" }) })
89
+ !focus && /* @__PURE__ */ jsx(
90
+ "div",
91
+ {
92
+ className: "input-label-value",
93
+ onClick: () => inputRef.current.click(),
94
+ children: value
95
+ }
96
+ ),
97
+ /* @__PURE__ */ jsxs(
98
+ "div",
99
+ {
100
+ className: "input-icon",
101
+ "data-focus": focus,
102
+ onClick: () => {
103
+ if (focus) return inputRef.current.blur();
104
+ inputRef.current.click();
105
+ },
106
+ children: [
107
+ /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-chevron-up" }),
108
+ /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-chevron-down" })
109
+ ]
110
+ }
111
+ )
84
112
  ]
85
113
  }
86
114
  ),
package/dist/components/types/form/types/select/options/index.d.ts CHANGED
@@ -2,5 +2,4 @@ import { IInputSelect } from "@interfaces";
2
2
  export default function InputSelectOption(props: IInputSelect & {
3
3
  inputRef: any;
4
4
  width: number;
5
- value?: string;
6
5
  }): import("react/jsx-runtime").JSX.Element;
package/dist/components/types/form/types/select/options/index.js CHANGED
@@ -35,15 +35,16 @@ module.exports = __toCommonJS(options_exports);
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var import_react = require("react");
37
37
  var import_styles = require("./styles");
38
+ var import_contexts = require("../../../../../../contexts");
38
39
  var import_lodash = __toESM(require("lodash"));
39
40
  function InputSelectOption(props) {
41
+ const target = (0, import_contexts.useTarget)();
40
42
  const [value, set] = (0, import_react.useState)("");
41
43
  const [options, setOptions] = (0, import_react.useState)(props.options);
42
44
  (0, import_react.useEffect)(() => {
43
- var _a, _b;
45
+ var _a;
44
46
  (_a = props.setValue) == null ? void 0 : _a.call(props, props.name, value);
45
- if (!value || !((_b = props.inputRef) == null ? void 0 : _b.current)) return;
46
- props.inputRef.current.click();
47
+ target.remove(props.inputRef);
47
48
  }, [value, props.inputRef]);
48
49
  (0, import_react.useEffect)(() => {
49
50
  const optionsElement = document.getElementById("input-options");
@@ -52,13 +53,14 @@ function InputSelectOption(props) {
52
53
  for (const mutation of mutations) {
53
54
  if (mutation.type === "attributes" && mutation.attributeName === "value") {
54
55
  const filter = optionsElement.getAttribute("value") || "";
55
- console.log("filter", filter);
56
56
  if (!filter) return setOptions(props.options);
57
57
  const filtredOptions = import_lodash.default.filter(props.options, (data) => {
58
58
  var _a;
59
59
  const value2 = ((_a = Object.values(data || {})) == null ? void 0 : _a[0]) || "";
60
- if (import_lodash.default.isString(value2)) return import_lodash.default.includes(value2, filter);
61
- return import_lodash.default.includes(value2 == null ? void 0 : value2.textContent, filter);
60
+ const normalize = (text) => import_lodash.default.deburr(text == null ? void 0 : text.toLowerCase());
61
+ if (import_lodash.default.isString(value2)) return import_lodash.default.includes(normalize(value2), normalize(filter));
62
+ console.log(value2 == null ? void 0 : value2.textContent);
63
+ return import_lodash.default.includes(normalize(value2 == null ? void 0 : value2.textContent), normalize(filter));
62
64
  });
63
65
  setOptions(filtredOptions);
64
66
  }
package/dist/components/types/form/types/select/options/index.mjs CHANGED
@@ -2,15 +2,16 @@
2
2
  import { jsx } from "react/jsx-runtime";
3
3
  import { useEffect, useState } from "react";
4
4
  import { Container } from "./styles";
5
+ import { useTarget } from "../../../../../../contexts";
5
6
  import _ from "lodash";
6
7
  function InputSelectOption(props) {
8
+ const target = useTarget();
7
9
  const [value, set] = useState("");
8
10
  const [options, setOptions] = useState(props.options);
9
11
  useEffect(() => {
10
- var _a, _b;
12
+ var _a;
11
13
  (_a = props.setValue) == null ? void 0 : _a.call(props, props.name, value);
12
- if (!value || !((_b = props.inputRef) == null ? void 0 : _b.current)) return;
13
- props.inputRef.current.click();
14
+ target.remove(props.inputRef);
14
15
  }, [value, props.inputRef]);
15
16
  useEffect(() => {
16
17
  const optionsElement = document.getElementById("input-options");
@@ -19,13 +20,14 @@ function InputSelectOption(props) {
19
20
  for (const mutation of mutations) {
20
21
  if (mutation.type === "attributes" && mutation.attributeName === "value") {
21
22
  const filter = optionsElement.getAttribute("value") || "";
22
- console.log("filter", filter);
23
23
  if (!filter) return setOptions(props.options);
24
24
  const filtredOptions = _.filter(props.options, (data) => {
25
25
  var _a;
26
26
  const value2 = ((_a = Object.values(data || {})) == null ? void 0 : _a[0]) || "";
27
- if (_.isString(value2)) return _.includes(value2, filter);
28
- return _.includes(value2 == null ? void 0 : value2.textContent, filter);
27
+ const normalize = (text) => _.deburr(text == null ? void 0 : text.toLowerCase());
28
+ if (_.isString(value2)) return _.includes(normalize(value2), normalize(filter));
29
+ console.log(value2 == null ? void 0 : value2.textContent);
30
+ return _.includes(normalize(value2 == null ? void 0 : value2.textContent), normalize(filter));
29
31
  });
30
32
  setOptions(filtredOptions);
31
33
  }
package/dist/components/types/form/types/select/styles.js CHANGED
@@ -78,7 +78,7 @@ const Container = import_styled_components.default.div`
78
78
  top: 0;
79
79
  left: 0;
80
80
  height: 100%;
81
- width: 100%;
81
+ width: calc(100% - 2.5rem);
82
82
  cursor: pointer;
83
83
  z-index: 1;
84
84
  padding: 0 1rem;
@@ -97,6 +97,32 @@ const Container = import_styled_components.default.div`
97
97
 
98
98
  i {
99
99
  font-size: .9rem;
100
+
101
+ &.fa-chevron-up {
102
+ z-index: -1;
103
+ opacity: 0;
104
+ position: fixed;
105
+ }
106
+
107
+ &.fa-chevron-down {
108
+ z-index: 0;
109
+ opacity: 1;
110
+ position: relative;
111
+ }
112
+
113
+ &[data-focus="true"] {
114
+ &.fa-chevron-up {
115
+ z-index: 0;
116
+ opacity: 1;
117
+ position: relative;
118
+ }
119
+
120
+ &.fa-chevron-down {
121
+ z-index: -1;
122
+ opacity: 0;
123
+ position: fixed;
124
+ }
125
+ }
100
126
  }
101
127
  }
102
128
  }
package/dist/components/types/form/types/select/styles.mjs CHANGED
@@ -45,7 +45,7 @@ const Container = styled.div`
45
45
  top: 0;
46
46
  left: 0;
47
47
  height: 100%;
48
- width: 100%;
48
+ width: calc(100% - 2.5rem);
49
49
  cursor: pointer;
50
50
  z-index: 1;
51
51
  padding: 0 1rem;
@@ -64,6 +64,32 @@ const Container = styled.div`
64
64
 
65
65
  i {
66
66
  font-size: .9rem;
67
+
68
+ &.fa-chevron-up {
69
+ z-index: -1;
70
+ opacity: 0;
71
+ position: fixed;
72
+ }
73
+
74
+ &.fa-chevron-down {
75
+ z-index: 0;
76
+ opacity: 1;
77
+ position: relative;
78
+ }
79
+
80
+ &[data-focus="true"] {
81
+ &.fa-chevron-up {
82
+ z-index: 0;
83
+ opacity: 1;
84
+ position: relative;
85
+ }
86
+
87
+ &.fa-chevron-down {
88
+ z-index: -1;
89
+ opacity: 0;
90
+ position: fixed;
91
+ }
92
+ }
67
93
  }
68
94
  }
69
95
  }
package/dist/contexts/target/index.js CHANGED
@@ -121,7 +121,6 @@ const TargetProviderContainer = ({ children }) => {
121
121
  import_lodash.default.forEach(containerRef.current, (elementRef) => close(elementRef, index));
122
122
  });
123
123
  focusable.addEventListener("blur", () => {
124
- console.log("onBlur", insideMemory);
125
124
  if (import_lodash.default.some(insideMemory, (i) => i === index)) return;
126
125
  close(containerRef.current[index], index);
127
126
  });
@@ -130,7 +129,7 @@ const TargetProviderContainer = ({ children }) => {
130
129
  const getCoords = (target) => {
131
130
  const rect = target.getBoundingClientRect();
132
131
  const targetTop = rect.top + window.scrollY;
133
- const targetLeft = rect.left + window.scrollX - 1;
132
+ const targetLeft = rect.left + window.scrollX - 0.5;
134
133
  const coords = {
135
134
  top: targetTop + (target.offsetHeight + 5),
136
135
  left: targetLeft
@@ -144,12 +143,17 @@ const TargetProviderContainer = ({ children }) => {
144
143
  return coords;
145
144
  };
146
145
  const add = (target) => {
146
+ const exists = import_lodash.default.find(memory, (data) => data.ref.current === target.ref.current);
147
+ if (exists) return;
147
148
  memory.push(target);
148
149
  setTargets(memory);
149
150
  };
150
151
  const remove = (ref) => {
151
152
  const index = import_lodash.default.findIndex(memory, (data) => data.ref.current === ref.current);
153
+ console.log(import_lodash.default.find(memory, (data) => data.ref.current === ref.current));
154
+ insideMemory.splice(import_lodash.default.findIndex(insideMemory, (i) => i === index), 1);
152
155
  memory.slice(index, 1);
156
+ console.log("memory", memory);
153
157
  setTargets(memory);
154
158
  };
155
159
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
package/dist/contexts/target/index.mjs CHANGED
@@ -87,7 +87,6 @@ const TargetProviderContainer = ({ children }) => {
87
87
  _.forEach(containerRef.current, (elementRef) => close(elementRef, index));
88
88
  });
89
89
  focusable.addEventListener("blur", () => {
90
- console.log("onBlur", insideMemory);
91
90
  if (_.some(insideMemory, (i) => i === index)) return;
92
91
  close(containerRef.current[index], index);
93
92
  });
@@ -96,7 +95,7 @@ const TargetProviderContainer = ({ children }) => {
96
95
  const getCoords = (target) => {
97
96
  const rect = target.getBoundingClientRect();
98
97
  const targetTop = rect.top + window.scrollY;
99
- const targetLeft = rect.left + window.scrollX - 1;
98
+ const targetLeft = rect.left + window.scrollX - 0.5;
100
99
  const coords = {
101
100
  top: targetTop + (target.offsetHeight + 5),
102
101
  left: targetLeft
@@ -110,12 +109,17 @@ const TargetProviderContainer = ({ children }) => {
110
109
  return coords;
111
110
  };
112
111
  const add = (target) => {
112
+ const exists = _.find(memory, (data) => data.ref.current === target.ref.current);
113
+ if (exists) return;
113
114
  memory.push(target);
114
115
  setTargets(memory);
115
116
  };
116
117
  const remove = (ref) => {
117
118
  const index = _.findIndex(memory, (data) => data.ref.current === ref.current);
119
+ console.log(_.find(memory, (data) => data.ref.current === ref.current));
120
+ insideMemory.splice(_.findIndex(insideMemory, (i) => i === index), 1);
118
121
  memory.slice(index, 1);
122
+ console.log("memory", memory);
119
123
  setTargets(memory);
120
124
  };
121
125
  return /* @__PURE__ */ jsxs(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gustavo-valsechi/client",
3
- "version": "1.4.116",
3
+ "version": "1.4.118",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",