@gustavo-valsechi/client 1.4.82 → 1.4.85

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 +58 -15
  6. package/dist/contexts/target/index.mjs +58 -15
  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,6 +44,53 @@ 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) => {
52
+ const coords = getCoords(element);
53
+ element.style.top = `${coords.top}px`;
54
+ element.style.left = `${coords.left}px`;
55
+ element.style.opacity = "1";
56
+ element.style.zIndex = "10";
57
+ };
58
+ (0, import_react.useEffect)(() => {
59
+ const handleScroll = () => {
60
+ if (inside) return;
61
+ import_lodash.default.forEach(containerRef.current, (element) => close(element));
62
+ };
63
+ window.addEventListener("scroll", handleScroll, { passive: true });
64
+ const addScrollListener = (el) => {
65
+ el.addEventListener("scroll", handleScroll, { passive: true });
66
+ };
67
+ const scrollables = document.querySelectorAll("*");
68
+ scrollables.forEach((el) => {
69
+ const style = getComputedStyle(el);
70
+ if (/(auto|scroll|overlay)/.test(style.overflow + style.overflowY + style.overflowX)) {
71
+ addScrollListener(el);
72
+ }
73
+ });
74
+ const observer = new MutationObserver((mutations) => {
75
+ for (const mutation of mutations) {
76
+ mutation.addedNodes.forEach((node) => {
77
+ if (!(node instanceof HTMLElement)) return;
78
+ const style = getComputedStyle(node);
79
+ if (/(auto|scroll|overlay)/.test(style.overflow + style.overflowY + style.overflowX)) {
80
+ addScrollListener(node);
81
+ }
82
+ });
83
+ }
84
+ });
85
+ observer.observe(document.body, { childList: true, subtree: true });
86
+ return () => {
87
+ window.removeEventListener("scroll", handleScroll);
88
+ document.querySelectorAll("*").forEach((el) => {
89
+ el.removeEventListener("scroll", handleScroll);
90
+ });
91
+ observer.disconnect();
92
+ };
93
+ }, [inside]);
47
94
  (0, import_react.useEffect)(() => {
48
95
  import_lodash.default.forEach(targets, (target, index) => {
49
96
  var _a;
@@ -52,18 +99,16 @@ const TargetProviderContainer = ({ children }) => {
52
99
  element.addEventListener("click", () => {
53
100
  const targetElement = import_lodash.default.find(containerRef.current, (data, i) => i === index);
54
101
  if (!targetElement) return;
55
- if (targetElement.style.opacity === "1") {
56
- targetElement.style.opacity = "0";
57
- targetElement.style.zIndex = "-1";
58
- return;
59
- }
60
- const coords = getCoords(element);
61
- targetElement.style.top = `${coords.top}px`;
62
- targetElement.style.left = `${coords.left}px`;
63
- targetElement.style.opacity = "1";
64
- targetElement.style.zIndex = "10";
102
+ if (targetElement.style.opacity === "1") return close(targetElement);
103
+ open(targetElement);
65
104
  inputRef.current[index].focus();
66
105
  });
106
+ element.addEventListener("resize", () => {
107
+ import_lodash.default.forEach(containerRef.current, (elementRef) => {
108
+ elementRef.style.opacity = "0";
109
+ elementRef.style.zIndex = "-1";
110
+ });
111
+ });
67
112
  });
68
113
  }, [targets, inputRef, containerRef]);
69
114
  const getCoords = (target) => {
@@ -107,14 +152,12 @@ const TargetProviderContainer = ({ children }) => {
107
152
  {
108
153
  ref: (element) => containerRef.current[index] = element,
109
154
  onMouseEnter: () => {
110
- var _a;
111
155
  setInside(true);
112
- (_a = inputRef.current[index]) == null ? void 0 : _a.focus();
156
+ inputRef.current[index].focus();
113
157
  },
114
158
  onMouseLeave: () => {
115
- var _a;
116
159
  setInside(false);
117
- (_a = inputRef.current[index]) == null ? void 0 : _a.focus();
160
+ inputRef.current[index].focus();
118
161
  },
119
162
  children: target.component
120
163
  }
@@ -126,7 +169,7 @@ const TargetProviderContainer = ({ children }) => {
126
169
  ref: (element) => inputRef.current[index] = element,
127
170
  onBlur: () => {
128
171
  if (inside) return;
129
- target.ref.current.click();
172
+ close(containerRef.current[index]);
130
173
  }
131
174
  }
132
175
  )
package/dist/contexts/target/index.mjs CHANGED
@@ -10,6 +10,53 @@ 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) => {
18
+ const coords = getCoords(element);
19
+ element.style.top = `${coords.top}px`;
20
+ element.style.left = `${coords.left}px`;
21
+ element.style.opacity = "1";
22
+ element.style.zIndex = "10";
23
+ };
24
+ useEffect(() => {
25
+ const handleScroll = () => {
26
+ if (inside) return;
27
+ _.forEach(containerRef.current, (element) => close(element));
28
+ };
29
+ window.addEventListener("scroll", handleScroll, { passive: true });
30
+ const addScrollListener = (el) => {
31
+ el.addEventListener("scroll", handleScroll, { passive: true });
32
+ };
33
+ const scrollables = document.querySelectorAll("*");
34
+ scrollables.forEach((el) => {
35
+ const style = getComputedStyle(el);
36
+ if (/(auto|scroll|overlay)/.test(style.overflow + style.overflowY + style.overflowX)) {
37
+ addScrollListener(el);
38
+ }
39
+ });
40
+ const observer = new MutationObserver((mutations) => {
41
+ for (const mutation of mutations) {
42
+ mutation.addedNodes.forEach((node) => {
43
+ if (!(node instanceof HTMLElement)) return;
44
+ const style = getComputedStyle(node);
45
+ if (/(auto|scroll|overlay)/.test(style.overflow + style.overflowY + style.overflowX)) {
46
+ addScrollListener(node);
47
+ }
48
+ });
49
+ }
50
+ });
51
+ observer.observe(document.body, { childList: true, subtree: true });
52
+ return () => {
53
+ window.removeEventListener("scroll", handleScroll);
54
+ document.querySelectorAll("*").forEach((el) => {
55
+ el.removeEventListener("scroll", handleScroll);
56
+ });
57
+ observer.disconnect();
58
+ };
59
+ }, [inside]);
13
60
  useEffect(() => {
14
61
  _.forEach(targets, (target, index) => {
15
62
  var _a;
@@ -18,18 +65,16 @@ const TargetProviderContainer = ({ children }) => {
18
65
  element.addEventListener("click", () => {
19
66
  const targetElement = _.find(containerRef.current, (data, i) => i === index);
20
67
  if (!targetElement) return;
21
- if (targetElement.style.opacity === "1") {
22
- targetElement.style.opacity = "0";
23
- targetElement.style.zIndex = "-1";
24
- return;
25
- }
26
- const coords = getCoords(element);
27
- targetElement.style.top = `${coords.top}px`;
28
- targetElement.style.left = `${coords.left}px`;
29
- targetElement.style.opacity = "1";
30
- targetElement.style.zIndex = "10";
68
+ if (targetElement.style.opacity === "1") return close(targetElement);
69
+ open(targetElement);
31
70
  inputRef.current[index].focus();
32
71
  });
72
+ element.addEventListener("resize", () => {
73
+ _.forEach(containerRef.current, (elementRef) => {
74
+ elementRef.style.opacity = "0";
75
+ elementRef.style.zIndex = "-1";
76
+ });
77
+ });
33
78
  });
34
79
  }, [targets, inputRef, containerRef]);
35
80
  const getCoords = (target) => {
@@ -73,14 +118,12 @@ const TargetProviderContainer = ({ children }) => {
73
118
  {
74
119
  ref: (element) => containerRef.current[index] = element,
75
120
  onMouseEnter: () => {
76
- var _a;
77
121
  setInside(true);
78
- (_a = inputRef.current[index]) == null ? void 0 : _a.focus();
122
+ inputRef.current[index].focus();
79
123
  },
80
124
  onMouseLeave: () => {
81
- var _a;
82
125
  setInside(false);
83
- (_a = inputRef.current[index]) == null ? void 0 : _a.focus();
126
+ inputRef.current[index].focus();
84
127
  },
85
128
  children: target.component
86
129
  }
@@ -92,7 +135,7 @@ const TargetProviderContainer = ({ children }) => {
92
135
  ref: (element) => inputRef.current[index] = element,
93
136
  onBlur: () => {
94
137
  if (inside) return;
95
- target.ref.current.click();
138
+ close(containerRef.current[index]);
96
139
  }
97
140
  }
98
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.82",
3
+ "version": "1.4.85",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",