@gustavo-valsechi/client 1.4.86 → 1.4.88

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 +20 -4
  2. package/dist/contexts/target/index.mjs +20 -4
  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,13 +113,14 @@ 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
- if (targetElement.style.opacity === "1") {
116
+ console.log("target focus", elementFocusable(target, index) === document.activeElement);
117
+ if (elementFocusable(target, index) === document.activeElement) {
102
118
  close(targetElement);
103
119
  return;
104
120
  }
105
121
  const coords = getCoords(element);
106
122
  open(targetElement, coords);
107
- inputRef.current[index].focus();
123
+ elementFocusable(target, index).focus();
108
124
  });
109
125
  element.addEventListener("resize", () => {
110
126
  import_lodash.default.forEach(containerRef.current, (elementRef) => close(elementRef));
@@ -153,11 +169,11 @@ const TargetProviderContainer = ({ children }) => {
153
169
  ref: (element) => containerRef.current[index] = element,
154
170
  onMouseEnter: () => {
155
171
  setInside(true);
156
- inputRef.current[index].focus();
172
+ elementFocusable(target, index).focus();
157
173
  },
158
174
  onMouseLeave: () => {
159
175
  setInside(false);
160
- inputRef.current[index].focus();
176
+ elementFocusable(target, index).focus();
161
177
  },
162
178
  children: target.component
163
179
  }
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,13 +79,14 @@ 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
- if (targetElement.style.opacity === "1") {
82
+ console.log("target focus", elementFocusable(target, index) === document.activeElement);
83
+ if (elementFocusable(target, index) === document.activeElement) {
68
84
  close(targetElement);
69
85
  return;
70
86
  }
71
87
  const coords = getCoords(element);
72
88
  open(targetElement, coords);
73
- inputRef.current[index].focus();
89
+ elementFocusable(target, index).focus();
74
90
  });
75
91
  element.addEventListener("resize", () => {
76
92
  _.forEach(containerRef.current, (elementRef) => close(elementRef));
@@ -119,11 +135,11 @@ const TargetProviderContainer = ({ children }) => {
119
135
  ref: (element) => containerRef.current[index] = element,
120
136
  onMouseEnter: () => {
121
137
  setInside(true);
122
- inputRef.current[index].focus();
138
+ elementFocusable(target, index).focus();
123
139
  },
124
140
  onMouseLeave: () => {
125
141
  setInside(false);
126
- inputRef.current[index].focus();
142
+ elementFocusable(target, index).focus();
127
143
  },
128
144
  children: target.component
129
145
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gustavo-valsechi/client",
3
- "version": "1.4.86",
3
+ "version": "1.4.88",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",