@gustavo-valsechi/client 1.4.115 → 1.4.117

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 +35 -15
  2. package/dist/components/types/form/types/select/index.mjs +36 -16
  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 +8 -4
  9. package/dist/contexts/target/index.mjs +8 -4
  10. package/package.json +1 -1
package/dist/components/types/form/types/select/index.js CHANGED
@@ -50,9 +50,18 @@ 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 onBlur = (event) => {
54
+ setFocus(false);
55
+ setFilter("");
56
+ if (register.onBlur) register.onBlur(event);
57
+ };
58
+ const onFocus = (event) => {
59
+ setFocus(true);
60
+ if (register.onFocus) register.onFocus(event);
61
+ };
62
+ const onClick = (event) => {
54
63
  var _a2;
55
- if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
64
+ if (register.onClick) register.onClick(event);
56
65
  target.add({
57
66
  ref: inputRef,
58
67
  component: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -65,16 +74,6 @@ function InputSelect(props) {
65
74
  }
66
75
  )
67
76
  });
68
- return () => target.remove(inputRef);
69
- }, [inputRef, containerRef]);
70
- const onBlur = (event) => {
71
- setFocus(false);
72
- setFilter("");
73
- if (register.onBlur) register.onBlur(event);
74
- };
75
- const onFocus = (event) => {
76
- setFocus(true);
77
- if (register.onFocus) register.onFocus(event);
78
77
  };
79
78
  const onChange = (event) => {
80
79
  const value2 = event.target.value || "";
@@ -95,7 +94,6 @@ function InputSelect(props) {
95
94
  {
96
95
  ref: containerRef,
97
96
  className: "input-content",
98
- onClick: () => inputRef.current.click(),
99
97
  children: [
100
98
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
101
99
  "input",
@@ -108,12 +106,34 @@ function InputSelect(props) {
108
106
  onChange,
109
107
  onFocus,
110
108
  onBlur,
109
+ onClick,
111
110
  value: focus ? filter : "",
112
111
  placeholder: import_lodash.default.isString(value) ? value : (value == null ? void 0 : value.textContent) || ""
113
112
  }
114
113
  ),
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" }) })
114
+ !focus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
115
+ "div",
116
+ {
117
+ className: "input-label-value",
118
+ onClick: () => inputRef.current.click(),
119
+ children: value
120
+ }
121
+ ),
122
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
123
+ "div",
124
+ {
125
+ className: "input-icon",
126
+ "data-focus": focus,
127
+ onClick: () => {
128
+ if (focus) return inputRef.current.blur();
129
+ inputRef.current.click();
130
+ },
131
+ children: [
132
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-up" }),
133
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-down" })
134
+ ]
135
+ }
136
+ )
117
137
  ]
118
138
  }
119
139
  ),
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 } from "react";
4
4
  import { Container } from "./styles";
5
5
  import { InputLabel } from "../label";
6
6
  import { InputError } from "../error";
@@ -17,9 +17,18 @@ 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 onBlur = (event) => {
21
+ setFocus(false);
22
+ setFilter("");
23
+ if (register.onBlur) register.onBlur(event);
24
+ };
25
+ const onFocus = (event) => {
26
+ setFocus(true);
27
+ if (register.onFocus) register.onFocus(event);
28
+ };
29
+ const onClick = (event) => {
21
30
  var _a2;
22
- if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
31
+ if (register.onClick) register.onClick(event);
23
32
  target.add({
24
33
  ref: inputRef,
25
34
  component: /* @__PURE__ */ jsx(
@@ -32,16 +41,6 @@ function InputSelect(props) {
32
41
  }
33
42
  )
34
43
  });
35
- return () => target.remove(inputRef);
36
- }, [inputRef, containerRef]);
37
- const onBlur = (event) => {
38
- setFocus(false);
39
- setFilter("");
40
- if (register.onBlur) register.onBlur(event);
41
- };
42
- const onFocus = (event) => {
43
- setFocus(true);
44
- if (register.onFocus) register.onFocus(event);
45
44
  };
46
45
  const onChange = (event) => {
47
46
  const value2 = event.target.value || "";
@@ -62,7 +61,6 @@ function InputSelect(props) {
62
61
  {
63
62
  ref: containerRef,
64
63
  className: "input-content",
65
- onClick: () => inputRef.current.click(),
66
64
  children: [
67
65
  /* @__PURE__ */ jsx(
68
66
  "input",
@@ -75,12 +73,34 @@ function InputSelect(props) {
75
73
  onChange,
76
74
  onFocus,
77
75
  onBlur,
76
+ onClick,
78
77
  value: focus ? filter : "",
79
78
  placeholder: _.isString(value) ? value : (value == null ? void 0 : value.textContent) || ""
80
79
  }
81
80
  ),
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" }) })
81
+ !focus && /* @__PURE__ */ jsx(
82
+ "div",
83
+ {
84
+ className: "input-label-value",
85
+ onClick: () => inputRef.current.click(),
86
+ children: value
87
+ }
88
+ ),
89
+ /* @__PURE__ */ jsxs(
90
+ "div",
91
+ {
92
+ className: "input-icon",
93
+ "data-focus": focus,
94
+ onClick: () => {
95
+ if (focus) return inputRef.current.blur();
96
+ inputRef.current.click();
97
+ },
98
+ children: [
99
+ /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-chevron-up" }),
100
+ /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-chevron-down" })
101
+ ]
102
+ }
103
+ )
84
104
  ]
85
105
  }
86
106
  ),
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.blur();
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.blur();
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,11 +143,14 @@ 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
+ insideMemory.splice(import_lodash.default.findIndex(insideMemory, (i) => i === index), 1);
152
154
  memory.slice(index, 1);
153
155
  setTargets(memory);
154
156
  };
@@ -168,12 +170,14 @@ const TargetProviderContainer = ({ children }) => {
168
170
  {
169
171
  ref: (element) => containerRef.current[index] = element,
170
172
  onMouseEnter: () => {
171
- insideMemory.push(index);
172
173
  elementFocusable(target, index).focus();
174
+ if (import_lodash.default.some(insideMemory, (i) => i === index)) return;
175
+ insideMemory.push(index);
173
176
  },
174
177
  onClick: () => {
175
- insideMemory.push(index);
176
178
  elementFocusable(target, index).focus();
179
+ if (import_lodash.default.some(insideMemory, (i) => i === index)) return;
180
+ insideMemory.push(index);
177
181
  },
178
182
  onMouseLeave: () => {
179
183
  insideMemory.splice(import_lodash.default.findIndex(insideMemory, (i) => i === index), 1);
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,11 +109,14 @@ 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
+ insideMemory.splice(_.findIndex(insideMemory, (i) => i === index), 1);
118
120
  memory.slice(index, 1);
119
121
  setTargets(memory);
120
122
  };
@@ -134,12 +136,14 @@ const TargetProviderContainer = ({ children }) => {
134
136
  {
135
137
  ref: (element) => containerRef.current[index] = element,
136
138
  onMouseEnter: () => {
137
- insideMemory.push(index);
138
139
  elementFocusable(target, index).focus();
140
+ if (_.some(insideMemory, (i) => i === index)) return;
141
+ insideMemory.push(index);
139
142
  },
140
143
  onClick: () => {
141
- insideMemory.push(index);
142
144
  elementFocusable(target, index).focus();
145
+ if (_.some(insideMemory, (i) => i === index)) return;
146
+ insideMemory.push(index);
143
147
  },
144
148
  onMouseLeave: () => {
145
149
  insideMemory.splice(_.findIndex(insideMemory, (i) => i === index), 1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gustavo-valsechi/client",
3
- "version": "1.4.115",
3
+ "version": "1.4.117",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",