@gustavo-valsechi/client 1.4.87 → 1.4.89

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 (3) hide show
  1. package/dist/contexts/target/index.js +22 -5
  2. package/dist/contexts/target/index.mjs +22 -5
  3. package/package.json +1 -1
package/dist/contexts/target/index.js CHANGED
@@ -44,6 +44,21 @@ 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 [show, setShow] = (0, import_react.useState)([]);
48
+ const elementFocusable = (target, index) => {
49
+ const focusableSelectors = [
50
+ "input",
51
+ "select",
52
+ "textarea",
53
+ "button",
54
+ "a[href]",
55
+ "[tabindex]",
56
+ "[contenteditable]"
57
+ ];
58
+ const focusable = import_lodash.default.some(focusableSelectors, (sel) => target.ref.current.matches(sel));
59
+ if (focusable) return target.ref.current;
60
+ return inputRef.current[index];
61
+ };
47
62
  const close = (element) => {
48
63
  element.style.opacity = "0";
49
64
  element.style.zIndex = "-1";
@@ -98,14 +113,16 @@ const TargetProviderContainer = ({ children }) => {
98
113
  element.addEventListener("click", () => {
99
114
  const targetElement = import_lodash.default.find(containerRef.current, (data, i) => i === index);
100
115
  if (!targetElement) return;
101
- console.log("target opacity", targetElement.style.opacity);
102
- if (targetElement.style.opacity === "1") {
116
+ console.log("document.activeElement", document.activeElement);
117
+ console.log("elementFocusable", elementFocusable(target, index));
118
+ console.log("target focus", elementFocusable(target, index) === document.activeElement);
119
+ if (elementFocusable(target, index) === document.activeElement) {
103
120
  close(targetElement);
104
121
  return;
105
122
  }
106
123
  const coords = getCoords(element);
107
124
  open(targetElement, coords);
108
- inputRef.current[index].focus();
125
+ elementFocusable(target, index).focus();
109
126
  });
110
127
  element.addEventListener("resize", () => {
111
128
  import_lodash.default.forEach(containerRef.current, (elementRef) => close(elementRef));
@@ -154,11 +171,11 @@ const TargetProviderContainer = ({ children }) => {
154
171
  ref: (element) => containerRef.current[index] = element,
155
172
  onMouseEnter: () => {
156
173
  setInside(true);
157
- inputRef.current[index].focus();
174
+ elementFocusable(target, index).focus();
158
175
  },
159
176
  onMouseLeave: () => {
160
177
  setInside(false);
161
- inputRef.current[index].focus();
178
+ elementFocusable(target, index).focus();
162
179
  },
163
180
  children: target.component
164
181
  }
package/dist/contexts/target/index.mjs CHANGED
@@ -10,6 +10,21 @@ const TargetProviderContainer = ({ children }) => {
10
10
  const containerRef = useRef([]);
11
11
  const [targets, setTargets] = useState([]);
12
12
  const [inside, setInside] = useState(false);
13
+ const [show, setShow] = useState([]);
14
+ const elementFocusable = (target, index) => {
15
+ const focusableSelectors = [
16
+ "input",
17
+ "select",
18
+ "textarea",
19
+ "button",
20
+ "a[href]",
21
+ "[tabindex]",
22
+ "[contenteditable]"
23
+ ];
24
+ const focusable = _.some(focusableSelectors, (sel) => target.ref.current.matches(sel));
25
+ if (focusable) return target.ref.current;
26
+ return inputRef.current[index];
27
+ };
13
28
  const close = (element) => {
14
29
  element.style.opacity = "0";
15
30
  element.style.zIndex = "-1";
@@ -64,14 +79,16 @@ const TargetProviderContainer = ({ children }) => {
64
79
  element.addEventListener("click", () => {
65
80
  const targetElement = _.find(containerRef.current, (data, i) => i === index);
66
81
  if (!targetElement) return;
67
- console.log("target opacity", targetElement.style.opacity);
68
- if (targetElement.style.opacity === "1") {
82
+ console.log("document.activeElement", document.activeElement);
83
+ console.log("elementFocusable", elementFocusable(target, index));
84
+ console.log("target focus", elementFocusable(target, index) === document.activeElement);
85
+ if (elementFocusable(target, index) === document.activeElement) {
69
86
  close(targetElement);
70
87
  return;
71
88
  }
72
89
  const coords = getCoords(element);
73
90
  open(targetElement, coords);
74
- inputRef.current[index].focus();
91
+ elementFocusable(target, index).focus();
75
92
  });
76
93
  element.addEventListener("resize", () => {
77
94
  _.forEach(containerRef.current, (elementRef) => close(elementRef));
@@ -120,11 +137,11 @@ const TargetProviderContainer = ({ children }) => {
120
137
  ref: (element) => containerRef.current[index] = element,
121
138
  onMouseEnter: () => {
122
139
  setInside(true);
123
- inputRef.current[index].focus();
140
+ elementFocusable(target, index).focus();
124
141
  },
125
142
  onMouseLeave: () => {
126
143
  setInside(false);
127
- inputRef.current[index].focus();
144
+ elementFocusable(target, index).focus();
128
145
  },
129
146
  children: target.component
130
147
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gustavo-valsechi/client",
3
- "version": "1.4.87",
3
+ "version": "1.4.89",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",