@gustavo-valsechi/client 1.4.84 → 1.4.86

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 (9) hide show
  1. package/dist/components/types/form/types/select/index.js +1 -1
  2. package/dist/components/types/form/types/select/index.mjs +1 -1
  3. package/dist/components/types/form/types/select/styles.js +9 -3
  4. package/dist/components/types/form/types/select/styles.mjs +9 -3
  5. package/dist/contexts/target/index.js +17 -19
  6. package/dist/contexts/target/index.mjs +17 -19
  7. package/dist/contexts/target/styles.js +1 -0
  8. package/dist/contexts/target/styles.mjs +1 -0
  9. package/package.json +1 -1
package/dist/components/types/form/types/select/index.js CHANGED
@@ -81,7 +81,7 @@ function InputSelect(props) {
81
81
  focus
82
82
  }
83
83
  ),
84
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: focus ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down" })
84
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: focus ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down" }) })
85
85
  ] }),
86
86
  !!props.error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_error.InputError, { children: props.error })
87
87
  ] });
package/dist/components/types/form/types/select/index.mjs CHANGED
@@ -48,7 +48,7 @@ function InputSelect(props) {
48
48
  focus
49
49
  }
50
50
  ),
51
- /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: focus ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down" })
51
+ /* @__PURE__ */ jsx("div", { className: "input-icon", children: /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: focus ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down" }) })
52
52
  ] }),
53
53
  !!props.error && /* @__PURE__ */ jsx(InputError, { children: props.error })
54
54
  ] });
package/dist/components/types/form/types/select/styles.js CHANGED
@@ -66,12 +66,18 @@ const Container = import_styled_components.default.div`
66
66
  }
67
67
  }
68
68
 
69
- i {
69
+ .input-icon {
70
70
  color: ${({ theme }) => theme.t3};
71
71
  cursor: pointer;
72
- font-size: .9rem;
73
- padding: 0 .5rem 0 .8rem;
74
72
  height: 100%;
73
+ width: 2.5rem;
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+
78
+ i {
79
+ font-size: .9rem;
80
+ }
75
81
  }
76
82
  }
77
83
  `;
package/dist/components/types/form/types/select/styles.mjs CHANGED
@@ -33,12 +33,18 @@ const Container = styled.div`
33
33
  }
34
34
  }
35
35
 
36
- i {
36
+ .input-icon {
37
37
  color: ${({ theme }) => theme.t3};
38
38
  cursor: pointer;
39
- font-size: .9rem;
40
- padding: 0 .5rem 0 .8rem;
41
39
  height: 100%;
40
+ width: 2.5rem;
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: center;
44
+
45
+ i {
46
+ font-size: .9rem;
47
+ }
42
48
  }
43
49
  }
44
50
  `;
package/dist/contexts/target/index.js CHANGED
@@ -44,13 +44,20 @@ const TargetProviderContainer = ({ children }) => {
44
44
  const containerRef = (0, import_react.useRef)([]);
45
45
  const [targets, setTargets] = (0, import_react.useState)([]);
46
46
  const [inside, setInside] = (0, import_react.useState)(false);
47
+ const close = (element) => {
48
+ element.style.opacity = "0";
49
+ element.style.zIndex = "-1";
50
+ };
51
+ const open = (element, coords) => {
52
+ element.style.top = `${coords.top}px`;
53
+ element.style.left = `${coords.left}px`;
54
+ element.style.opacity = "1";
55
+ element.style.zIndex = "10";
56
+ };
47
57
  (0, import_react.useEffect)(() => {
48
58
  const handleScroll = () => {
49
59
  if (inside) return;
50
- import_lodash.default.forEach(containerRef.current, (elementRef) => {
51
- elementRef.style.opacity = "0";
52
- elementRef.style.zIndex = "-1";
53
- });
60
+ import_lodash.default.forEach(containerRef.current, (element) => close(element));
54
61
  };
55
62
  window.addEventListener("scroll", handleScroll, { passive: true });
56
63
  const addScrollListener = (el) => {
@@ -92,22 +99,15 @@ const TargetProviderContainer = ({ children }) => {
92
99
  const targetElement = import_lodash.default.find(containerRef.current, (data, i) => i === index);
93
100
  if (!targetElement) return;
94
101
  if (targetElement.style.opacity === "1") {
95
- targetElement.style.opacity = "0";
96
- targetElement.style.zIndex = "-1";
102
+ close(targetElement);
97
103
  return;
98
104
  }
99
105
  const coords = getCoords(element);
100
- targetElement.style.top = `${coords.top}px`;
101
- targetElement.style.left = `${coords.left}px`;
102
- targetElement.style.opacity = "1";
103
- targetElement.style.zIndex = "10";
106
+ open(targetElement, coords);
104
107
  inputRef.current[index].focus();
105
108
  });
106
109
  element.addEventListener("resize", () => {
107
- import_lodash.default.forEach(containerRef.current, (elementRef) => {
108
- elementRef.style.opacity = "0";
109
- elementRef.style.zIndex = "-1";
110
- });
110
+ import_lodash.default.forEach(containerRef.current, (elementRef) => close(elementRef));
111
111
  });
112
112
  });
113
113
  }, [targets, inputRef, containerRef]);
@@ -152,14 +152,12 @@ const TargetProviderContainer = ({ children }) => {
152
152
  {
153
153
  ref: (element) => containerRef.current[index] = element,
154
154
  onMouseEnter: () => {
155
- var _a;
156
155
  setInside(true);
157
- (_a = inputRef.current[index]) == null ? void 0 : _a.focus();
156
+ inputRef.current[index].focus();
158
157
  },
159
158
  onMouseLeave: () => {
160
- var _a;
161
159
  setInside(false);
162
- (_a = inputRef.current[index]) == null ? void 0 : _a.focus();
160
+ inputRef.current[index].focus();
163
161
  },
164
162
  children: target.component
165
163
  }
@@ -171,7 +169,7 @@ const TargetProviderContainer = ({ children }) => {
171
169
  ref: (element) => inputRef.current[index] = element,
172
170
  onBlur: () => {
173
171
  if (inside) return;
174
- target.ref.current.click();
172
+ close(containerRef.current[index]);
175
173
  }
176
174
  }
177
175
  )
package/dist/contexts/target/index.mjs CHANGED
@@ -10,13 +10,20 @@ const TargetProviderContainer = ({ children }) => {
10
10
  const containerRef = useRef([]);
11
11
  const [targets, setTargets] = useState([]);
12
12
  const [inside, setInside] = useState(false);
13
+ const close = (element) => {
14
+ element.style.opacity = "0";
15
+ element.style.zIndex = "-1";
16
+ };
17
+ const open = (element, coords) => {
18
+ element.style.top = `${coords.top}px`;
19
+ element.style.left = `${coords.left}px`;
20
+ element.style.opacity = "1";
21
+ element.style.zIndex = "10";
22
+ };
13
23
  useEffect(() => {
14
24
  const handleScroll = () => {
15
25
  if (inside) return;
16
- _.forEach(containerRef.current, (elementRef) => {
17
- elementRef.style.opacity = "0";
18
- elementRef.style.zIndex = "-1";
19
- });
26
+ _.forEach(containerRef.current, (element) => close(element));
20
27
  };
21
28
  window.addEventListener("scroll", handleScroll, { passive: true });
22
29
  const addScrollListener = (el) => {
@@ -58,22 +65,15 @@ const TargetProviderContainer = ({ children }) => {
58
65
  const targetElement = _.find(containerRef.current, (data, i) => i === index);
59
66
  if (!targetElement) return;
60
67
  if (targetElement.style.opacity === "1") {
61
- targetElement.style.opacity = "0";
62
- targetElement.style.zIndex = "-1";
68
+ close(targetElement);
63
69
  return;
64
70
  }
65
71
  const coords = getCoords(element);
66
- targetElement.style.top = `${coords.top}px`;
67
- targetElement.style.left = `${coords.left}px`;
68
- targetElement.style.opacity = "1";
69
- targetElement.style.zIndex = "10";
72
+ open(targetElement, coords);
70
73
  inputRef.current[index].focus();
71
74
  });
72
75
  element.addEventListener("resize", () => {
73
- _.forEach(containerRef.current, (elementRef) => {
74
- elementRef.style.opacity = "0";
75
- elementRef.style.zIndex = "-1";
76
- });
76
+ _.forEach(containerRef.current, (elementRef) => close(elementRef));
77
77
  });
78
78
  });
79
79
  }, [targets, inputRef, containerRef]);
@@ -118,14 +118,12 @@ const TargetProviderContainer = ({ children }) => {
118
118
  {
119
119
  ref: (element) => containerRef.current[index] = element,
120
120
  onMouseEnter: () => {
121
- var _a;
122
121
  setInside(true);
123
- (_a = inputRef.current[index]) == null ? void 0 : _a.focus();
122
+ inputRef.current[index].focus();
124
123
  },
125
124
  onMouseLeave: () => {
126
- var _a;
127
125
  setInside(false);
128
- (_a = inputRef.current[index]) == null ? void 0 : _a.focus();
126
+ inputRef.current[index].focus();
129
127
  },
130
128
  children: target.component
131
129
  }
@@ -137,7 +135,7 @@ const TargetProviderContainer = ({ children }) => {
137
135
  ref: (element) => inputRef.current[index] = element,
138
136
  onBlur: () => {
139
137
  if (inside) return;
140
- target.ref.current.click();
138
+ close(containerRef.current[index]);
141
139
  }
142
140
  }
143
141
  )
package/dist/contexts/target/styles.js CHANGED
@@ -37,6 +37,7 @@ const Container = import_styled_components.default.div`
37
37
  position: absolute;
38
38
  opacity: 0;
39
39
  z-index: -1;
40
+ user-select: none;
40
41
 
41
42
  @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
42
43
  width: 100%;
package/dist/contexts/target/styles.mjs CHANGED
@@ -4,6 +4,7 @@ const Container = styled.div`
4
4
  position: absolute;
5
5
  opacity: 0;
6
6
  z-index: -1;
7
+ user-select: none;
7
8
 
8
9
  @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
9
10
  width: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gustavo-valsechi/client",
3
- "version": "1.4.84",
3
+ "version": "1.4.86",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",