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