next-helios-fe 1.8.107 → 1.8.108

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 (5) hide show
  1. package/dist/index.js +1 -1
  2. package/package.json +1 -1
  3. package/src/components/form/input/date.tsx +1 -1
  4. package/src/components/form/other/multipleSelect.tsx +21 -8
  5. package/src/components/form/other/select.tsx +7 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.107",
3
+ "version": "1.8.108",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/form/input/date.tsx CHANGED
@@ -115,7 +115,7 @@ export const Date: React.FC<DateProps> = ({
115
115
  {!options?.buttonOnly && (
116
116
  <input
117
117
  type="text"
118
- className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
118
+ className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg cursor-default placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
119
119
  disabled={rest.disabled}
120
120
  readOnly
121
121
  value={
package/src/components/form/other/multipleSelect.tsx CHANGED
@@ -62,9 +62,10 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
62
62
  onRemove,
63
63
  ...rest
64
64
  }) => {
65
+ const componentRef = useRef<HTMLDivElement>(null);
65
66
  const itemContainerRef = useRef<HTMLDivElement>(null);
66
67
  const inputRef = useRef<HTMLInputElement>(null);
67
- const dropdownRef = useRef<HTMLButtonElement>(null);
68
+ const dropdownTriggerRef = useRef<HTMLButtonElement>(null);
68
69
  const [tempValue, setTempValue] = useState<string[]>([]);
69
70
  const [openDropdown, setOpenDropdown] = useState(false);
70
71
  const [inputHeight, setInputHeight] = useState<number>(0);
@@ -78,11 +79,16 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
78
79
  : "py-[5px]";
79
80
 
80
81
  useEffect(() => {
81
- document.addEventListener("mousedown", (e) => {
82
- if (e.target instanceof HTMLElement) {
82
+ function handleClickOutside(event: MouseEvent) {
83
+ if (
84
+ componentRef.current &&
85
+ !componentRef.current.contains(event.target as Node)
86
+ ) {
83
87
  setOpenDropdown(false);
84
88
  }
85
- });
89
+ }
90
+
91
+ document.addEventListener("mousedown", handleClickOutside);
86
92
 
87
93
  const observer = new ResizeObserver((entries) => {
88
94
  for (let entry of entries) {
@@ -92,7 +98,10 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
92
98
 
93
99
  observer.observe(itemContainerRef.current!);
94
100
 
95
- return () => observer.disconnect();
101
+ return () => {
102
+ document.removeEventListener("mousedown", handleClickOutside);
103
+ observer.disconnect();
104
+ };
96
105
  }, []);
97
106
 
98
107
  useEffect(() => {
@@ -117,7 +126,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
117
126
 
118
127
  return (
119
128
  <div className="relative">
120
- <div className="flex flex-row-reverse items-end">
129
+ <div ref={componentRef} className="flex flex-row-reverse items-end">
121
130
  <label className={`flex flex-col gap-2 ${width}`}>
122
131
  {(label || description) && (
123
132
  <div className="flex justify-between items-center gap-2">
@@ -170,7 +179,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
170
179
  onClick={(e) => {
171
180
  e.preventDefault();
172
181
  setOpenDropdown(true);
173
- dropdownRef.current?.click();
182
+ dropdownTriggerRef.current?.click();
174
183
  setDropdownWidth(
175
184
  inputRef?.current?.getBoundingClientRect()?.width || 0
176
185
  );
@@ -198,7 +207,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
198
207
  trigger={
199
208
  <button
200
209
  type="button"
201
- ref={dropdownRef}
210
+ ref={dropdownTriggerRef}
202
211
  className="w-0"
203
212
  style={{
204
213
  height:
@@ -229,6 +238,8 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
229
238
  e.preventDefault();
230
239
  inputRef.current?.focus();
231
240
  setOpenDropdown(false);
241
+ } else if (e.key === "Tab") {
242
+ setOpenDropdown(false);
232
243
  }
233
244
  }}
234
245
  >
@@ -267,6 +278,8 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
267
278
  e.preventDefault();
268
279
  inputRef.current?.focus();
269
280
  setOpenDropdown(false);
281
+ } else if (e.key === "Tab") {
282
+ setOpenDropdown(false);
270
283
  }
271
284
  }}
272
285
  >
package/src/components/form/other/select.tsx CHANGED
@@ -35,7 +35,7 @@ export const Select: React.FC<SelectProps> = ({
35
35
  const [openDropdown, setOpenDropdown] = useState(false);
36
36
  const [dropdownWidth, setDropdownWidth] = useState<number>(0);
37
37
  const inputRef = useRef<HTMLInputElement>(null);
38
- const dropdownRef = useRef<HTMLButtonElement>(null);
38
+ const dropdownTriggerRef = useRef<HTMLButtonElement>(null);
39
39
  const width = options?.width === "fit" ? "w-fit" : "w-full";
40
40
  const height =
41
41
  options?.height === "short"
@@ -116,7 +116,7 @@ export const Select: React.FC<SelectProps> = ({
116
116
  onClick={(e) => {
117
117
  e.preventDefault();
118
118
  setOpenDropdown(true);
119
- dropdownRef.current?.click();
119
+ dropdownTriggerRef.current?.click();
120
120
  setDropdownWidth(
121
121
  inputRef?.current?.getBoundingClientRect()?.width || 0
122
122
  );
@@ -146,7 +146,7 @@ export const Select: React.FC<SelectProps> = ({
146
146
  trigger={
147
147
  <button
148
148
  type="button"
149
- ref={dropdownRef}
149
+ ref={dropdownTriggerRef}
150
150
  className={`w-0 my-0.5 ${height}`}
151
151
  tabIndex={-1}
152
152
  disabled={rest.disabled ?? false}
@@ -162,6 +162,8 @@ export const Select: React.FC<SelectProps> = ({
162
162
  e.preventDefault();
163
163
  inputRef.current?.focus();
164
164
  setOpenDropdown(false);
165
+ } else if (e.key === "Tab") {
166
+ setOpenDropdown(false);
165
167
  }
166
168
  }}
167
169
  >
@@ -195,6 +197,8 @@ export const Select: React.FC<SelectProps> = ({
195
197
  e.preventDefault();
196
198
  inputRef.current?.focus();
197
199
  setOpenDropdown(false);
200
+ } else if (e.key === "Tab") {
201
+ setOpenDropdown(false);
198
202
  }
199
203
  }}
200
204
  >