@gustavo-valsechi/client 1.4.100 → 1.4.101

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 +18 -5
  2. package/dist/components/types/form/types/select/index.mjs +18 -5
  3. package/dist/components/types/form/types/select/options/index.d.ts +1 -0
  4. package/dist/components/types/form/types/select/options/index.js +3 -4
  5. package/dist/components/types/form/types/select/options/index.mjs +3 -4
  6. package/dist/components/types/form/types/select/styles.js +1 -1
  7. package/dist/components/types/form/types/select/styles.mjs +1 -1
  8. package/dist/contexts/target/index.js +8 -6
  9. package/dist/contexts/target/index.mjs +8 -6
  10. package/package.json +1 -1
package/dist/components/types/form/types/select/index.js CHANGED
@@ -41,15 +41,28 @@ var import_contexts = require("../../../../../contexts");
41
41
  var import_lodash = __toESM(require("lodash"));
42
42
  var import_options = __toESM(require("./options"));
43
43
  function InputSelect(props) {
44
+ const containerRef = (0, import_react.useRef)(null);
44
45
  const inputRef = (0, import_react.useRef)(null);
45
46
  const target = (0, import_contexts.useTarget)();
46
47
  const [focus, setFocus] = (0, import_react.useState)(false);
47
48
  const register = (props.register || ((name) => ({})))(props.name || "");
48
49
  (0, import_react.useEffect)(() => {
49
- if (!(inputRef == null ? void 0 : inputRef.current)) return;
50
- target.add({ ref: inputRef, component: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_options.default, { ...props, inputRef, register }) });
50
+ var _a;
51
+ if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
52
+ target.add({
53
+ ref: inputRef,
54
+ component: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
55
+ import_options.default,
56
+ {
57
+ ...props,
58
+ inputRef,
59
+ register,
60
+ width: ((_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.offsetWidth) || 0
61
+ }
62
+ )
63
+ });
51
64
  return () => target.remove(inputRef);
52
- }, [inputRef]);
65
+ }, [inputRef, containerRef]);
53
66
  const onBlur = (event) => {
54
67
  setFocus(false);
55
68
  if (register.onBlur) register.onBlur(event);
@@ -68,7 +81,7 @@ function InputSelect(props) {
68
81
  props.label,
69
82
  props.required ? "*" : ""
70
83
  ] }),
71
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "input-content", children: [
84
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: containerRef, className: "input-content", children: [
72
85
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
73
86
  "input",
74
87
  {
@@ -82,7 +95,7 @@ function InputSelect(props) {
82
95
  onBlur
83
96
  }
84
97
  ),
85
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-icon", onClick: () => inputRef.current.click(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: focus ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down" }) })
98
+ /* @__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" }) })
86
99
  ] }),
87
100
  !!props.error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_error.InputError, { children: props.error })
88
101
  ] });
package/dist/components/types/form/types/select/index.mjs CHANGED
@@ -8,15 +8,28 @@ import { useTarget } from "../../../../../contexts";
8
8
  import _ from "lodash";
9
9
  import InputSelectOption from "./options";
10
10
  function InputSelect(props) {
11
+ const containerRef = useRef(null);
11
12
  const inputRef = useRef(null);
12
13
  const target = useTarget();
13
14
  const [focus, setFocus] = useState(false);
14
15
  const register = (props.register || ((name) => ({})))(props.name || "");
15
16
  useEffect(() => {
16
- if (!(inputRef == null ? void 0 : inputRef.current)) return;
17
- target.add({ ref: inputRef, component: /* @__PURE__ */ jsx(InputSelectOption, { ...props, inputRef, register }) });
17
+ var _a;
18
+ if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
19
+ target.add({
20
+ ref: inputRef,
21
+ component: /* @__PURE__ */ jsx(
22
+ InputSelectOption,
23
+ {
24
+ ...props,
25
+ inputRef,
26
+ register,
27
+ width: ((_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.offsetWidth) || 0
28
+ }
29
+ )
30
+ });
18
31
  return () => target.remove(inputRef);
19
- }, [inputRef]);
32
+ }, [inputRef, containerRef]);
20
33
  const onBlur = (event) => {
21
34
  setFocus(false);
22
35
  if (register.onBlur) register.onBlur(event);
@@ -35,7 +48,7 @@ function InputSelect(props) {
35
48
  props.label,
36
49
  props.required ? "*" : ""
37
50
  ] }),
38
- /* @__PURE__ */ jsxs("div", { className: "input-content", children: [
51
+ /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "input-content", children: [
39
52
  /* @__PURE__ */ jsx(
40
53
  "input",
41
54
  {
@@ -49,7 +62,7 @@ function InputSelect(props) {
49
62
  onBlur
50
63
  }
51
64
  ),
52
- /* @__PURE__ */ jsx("div", { className: "input-icon", onClick: () => inputRef.current.click(), children: /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: focus ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down" }) })
65
+ /* @__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" }) })
53
66
  ] }),
54
67
  !!props.error && /* @__PURE__ */ jsx(InputError, { children: props.error })
55
68
  ] });
package/dist/components/types/form/types/select/options/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { IInputSelect } from "@interfaces";
2
2
  export default function InputSelectOption(props: IInputSelect & {
3
3
  inputRef: any;
4
+ width: number;
4
5
  }): import("react/jsx-runtime").JSX.Element;
package/dist/components/types/form/types/select/options/index.js CHANGED
@@ -37,13 +37,12 @@ var import_react = require("react");
37
37
  var import_styles = require("./styles");
38
38
  var import_lodash = __toESM(require("lodash"));
39
39
  function InputSelectOption(props) {
40
- var _a, _b;
41
40
  const [value, set] = (0, import_react.useState)("");
42
41
  (0, import_react.useEffect)(() => {
43
- var _a2;
44
- (_a2 = props.setValue) == null ? void 0 : _a2.call(props, value);
42
+ var _a;
43
+ (_a = props.setValue) == null ? void 0 : _a.call(props, value);
45
44
  }, [value, props.inputRef]);
46
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { width: (_b = (_a = props.inputRef) == null ? void 0 : _a.current) == null ? void 0 : _b.offsetWidth, children: import_lodash.default.map(
45
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { width: props.width, children: import_lodash.default.map(
47
46
  props.options,
48
47
  (data, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
49
48
  "div",
package/dist/components/types/form/types/select/options/index.mjs CHANGED
@@ -4,13 +4,12 @@ import { useEffect, useState } from "react";
4
4
  import { Container } from "./styles";
5
5
  import _ from "lodash";
6
6
  function InputSelectOption(props) {
7
- var _a, _b;
8
7
  const [value, set] = useState("");
9
8
  useEffect(() => {
10
- var _a2;
11
- (_a2 = props.setValue) == null ? void 0 : _a2.call(props, value);
9
+ var _a;
10
+ (_a = props.setValue) == null ? void 0 : _a.call(props, value);
12
11
  }, [value, props.inputRef]);
13
- return /* @__PURE__ */ jsx(Container, { width: (_b = (_a = props.inputRef) == null ? void 0 : _a.current) == null ? void 0 : _b.offsetWidth, children: _.map(
12
+ return /* @__PURE__ */ jsx(Container, { width: props.width, children: _.map(
14
13
  props.options,
15
14
  (data, index) => /* @__PURE__ */ jsx(
16
15
  "div",
package/dist/components/types/form/types/select/styles.js CHANGED
@@ -56,7 +56,7 @@ const Container = import_styled_components.default.div`
56
56
  cursor: pointer;
57
57
 
58
58
  &:focus {
59
- cursor: vertical-text;
59
+ cursor: text;
60
60
  }
61
61
 
62
62
  &:disabled {
package/dist/components/types/form/types/select/styles.mjs CHANGED
@@ -23,7 +23,7 @@ const Container = styled.div`
23
23
  cursor: pointer;
24
24
 
25
25
  &:focus {
26
- cursor: vertical-text;
26
+ cursor: text;
27
27
  }
28
28
 
29
29
  &:disabled {
package/dist/contexts/target/index.js CHANGED
@@ -43,7 +43,7 @@ const TargetProviderContainer = ({ children }) => {
43
43
  const inputRef = (0, import_react.useRef)([]);
44
44
  const containerRef = (0, import_react.useRef)([]);
45
45
  const [targets, setTargets] = (0, import_react.useState)([]);
46
- const [inside, setInside] = (0, import_react.useState)(false);
46
+ const [inside, setInside] = (0, import_react.useState)([]);
47
47
  const elementFocusable = (target, index) => {
48
48
  const focusableTags = ["input", "select", "textarea", "button"];
49
49
  const isFocusable = import_lodash.default.some(focusableTags, (tag) => target.ref.current.tagName.toLowerCase() === tag);
@@ -62,8 +62,10 @@ const TargetProviderContainer = ({ children }) => {
62
62
  };
63
63
  (0, import_react.useEffect)(() => {
64
64
  const handleScroll = () => {
65
- if (inside) return;
66
- import_lodash.default.forEach(containerRef.current, (element) => close(element));
65
+ import_lodash.default.forEach(containerRef.current, (element, index) => {
66
+ if (import_lodash.default.some(inside, (i) => i === index)) return;
67
+ close(element);
68
+ });
67
69
  };
68
70
  window.addEventListener("scroll", handleScroll, { passive: true });
69
71
  const addScrollListener = (el) => {
@@ -118,7 +120,7 @@ const TargetProviderContainer = ({ children }) => {
118
120
  import_lodash.default.forEach(containerRef.current, (elementRef) => close(elementRef));
119
121
  });
120
122
  focusable.addEventListener("blur", () => {
121
- if (inside) return;
123
+ if (import_lodash.default.some(inside, (i) => i === index)) return;
122
124
  close(containerRef.current[index]);
123
125
  });
124
126
  });
@@ -164,11 +166,11 @@ const TargetProviderContainer = ({ children }) => {
164
166
  {
165
167
  ref: (element) => containerRef.current[index] = element,
166
168
  onMouseEnter: () => {
167
- setInside(true);
169
+ setInside(import_lodash.default.concat(inside, index));
168
170
  elementFocusable(target, index).focus();
169
171
  },
170
172
  onMouseLeave: () => {
171
- setInside(false);
173
+ setInside(import_lodash.default.filter(inside, (i) => i !== index));
172
174
  elementFocusable(target, index).focus();
173
175
  },
174
176
  children: target.component
package/dist/contexts/target/index.mjs CHANGED
@@ -9,7 +9,7 @@ const TargetProviderContainer = ({ children }) => {
9
9
  const inputRef = useRef([]);
10
10
  const containerRef = useRef([]);
11
11
  const [targets, setTargets] = useState([]);
12
- const [inside, setInside] = useState(false);
12
+ const [inside, setInside] = useState([]);
13
13
  const elementFocusable = (target, index) => {
14
14
  const focusableTags = ["input", "select", "textarea", "button"];
15
15
  const isFocusable = _.some(focusableTags, (tag) => target.ref.current.tagName.toLowerCase() === tag);
@@ -28,8 +28,10 @@ const TargetProviderContainer = ({ children }) => {
28
28
  };
29
29
  useEffect(() => {
30
30
  const handleScroll = () => {
31
- if (inside) return;
32
- _.forEach(containerRef.current, (element) => close(element));
31
+ _.forEach(containerRef.current, (element, index) => {
32
+ if (_.some(inside, (i) => i === index)) return;
33
+ close(element);
34
+ });
33
35
  };
34
36
  window.addEventListener("scroll", handleScroll, { passive: true });
35
37
  const addScrollListener = (el) => {
@@ -84,7 +86,7 @@ const TargetProviderContainer = ({ children }) => {
84
86
  _.forEach(containerRef.current, (elementRef) => close(elementRef));
85
87
  });
86
88
  focusable.addEventListener("blur", () => {
87
- if (inside) return;
89
+ if (_.some(inside, (i) => i === index)) return;
88
90
  close(containerRef.current[index]);
89
91
  });
90
92
  });
@@ -130,11 +132,11 @@ const TargetProviderContainer = ({ children }) => {
130
132
  {
131
133
  ref: (element) => containerRef.current[index] = element,
132
134
  onMouseEnter: () => {
133
- setInside(true);
135
+ setInside(_.concat(inside, index));
134
136
  elementFocusable(target, index).focus();
135
137
  },
136
138
  onMouseLeave: () => {
137
- setInside(false);
139
+ setInside(_.filter(inside, (i) => i !== index));
138
140
  elementFocusable(target, index).focus();
139
141
  },
140
142
  children: target.component
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gustavo-valsechi/client",
3
- "version": "1.4.100",
3
+ "version": "1.4.101",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",