@gustavo-valsechi/client 1.4.100 → 1.4.102

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 +7 -9
  9. package/dist/contexts/target/index.mjs +7 -9
  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) => {
@@ -117,10 +119,6 @@ const TargetProviderContainer = ({ children }) => {
117
119
  element.addEventListener("resize", () => {
118
120
  import_lodash.default.forEach(containerRef.current, (elementRef) => close(elementRef));
119
121
  });
120
- focusable.addEventListener("blur", () => {
121
- if (inside) return;
122
- close(containerRef.current[index]);
123
- });
124
122
  });
125
123
  }, [targets, inputRef, containerRef, inside]);
126
124
  const getCoords = (target) => {
@@ -164,11 +162,11 @@ const TargetProviderContainer = ({ children }) => {
164
162
  {
165
163
  ref: (element) => containerRef.current[index] = element,
166
164
  onMouseEnter: () => {
167
- setInside(true);
165
+ setInside(import_lodash.default.concat(inside, index));
168
166
  elementFocusable(target, index).focus();
169
167
  },
170
168
  onMouseLeave: () => {
171
- setInside(false);
169
+ setInside(import_lodash.default.filter(inside, (i) => i !== index));
172
170
  elementFocusable(target, index).focus();
173
171
  },
174
172
  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) => {
@@ -83,10 +85,6 @@ const TargetProviderContainer = ({ children }) => {
83
85
  element.addEventListener("resize", () => {
84
86
  _.forEach(containerRef.current, (elementRef) => close(elementRef));
85
87
  });
86
- focusable.addEventListener("blur", () => {
87
- if (inside) return;
88
- close(containerRef.current[index]);
89
- });
90
88
  });
91
89
  }, [targets, inputRef, containerRef, inside]);
92
90
  const getCoords = (target) => {
@@ -130,11 +128,11 @@ const TargetProviderContainer = ({ children }) => {
130
128
  {
131
129
  ref: (element) => containerRef.current[index] = element,
132
130
  onMouseEnter: () => {
133
- setInside(true);
131
+ setInside(_.concat(inside, index));
134
132
  elementFocusable(target, index).focus();
135
133
  },
136
134
  onMouseLeave: () => {
137
- setInside(false);
135
+ setInside(_.filter(inside, (i) => i !== index));
138
136
  elementFocusable(target, index).focus();
139
137
  },
140
138
  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.102",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",