next-helios-fe 1.8.105 → 1.8.106

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 (13) hide show
  1. package/dist/components/dropdown/index.d.ts +3 -4
  2. package/dist/components/dropdown/item.d.ts +2 -2
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/components/dropdown/index.tsx +10 -18
  6. package/src/components/dropdown/item.tsx +5 -6
  7. package/src/components/form/input/checkbox.tsx +15 -4
  8. package/src/components/form/input/color.tsx +1 -0
  9. package/src/components/form/input/radio.tsx +11 -2
  10. package/src/components/form/input/range.tsx +1 -1
  11. package/src/components/form/other/multipleSelect.tsx +217 -198
  12. package/src/components/form/other/rating.tsx +1 -0
  13. package/src/components/form/other/select.tsx +25 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.105",
3
+ "version": "1.8.106",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/dropdown/index.tsx CHANGED
@@ -1,20 +1,12 @@
1
1
  "use client";
2
2
  import React from "react";
3
- import { Dropdown as Dd } from "flowbite-react";
3
+ import { Dropdown as Dd, DropdownProps as Dp } from "flowbite-react";
4
4
  import { Header, type HeaderProps } from "./header";
5
5
  import { Item, type ItemProps } from "./item";
6
6
 
7
- interface DropdownProps {
8
- children: React.ReactNode;
9
- placement?:
10
- | "top"
11
- | "top-start"
12
- | "top-end"
13
- | "bottom"
14
- | "bottom-start"
15
- | "bottom-end";
16
- dismissOnClick?: boolean;
7
+ interface DropdownProps extends Omit<Dp, "label" | "trigger"> {
17
8
  trigger?: React.ReactNode;
9
+ actionTrigger?: "click" | "hover";
18
10
  }
19
11
 
20
12
  interface DropdownComponent extends React.FC<DropdownProps> {
@@ -23,12 +15,11 @@ interface DropdownComponent extends React.FC<DropdownProps> {
23
15
  }
24
16
 
25
17
  export const Dropdown: DropdownComponent = ({
26
- children,
27
- placement,
28
- dismissOnClick,
29
18
  trigger,
19
+ actionTrigger,
20
+ ...rest
30
21
  }) => {
31
- const childrenList = React.Children.toArray(children);
22
+ const childrenList = React.Children.toArray(rest.children);
32
23
  const header = childrenList.find((child) => {
33
24
  return (child as React.ReactElement).type === Dropdown.Header;
34
25
  });
@@ -40,8 +31,7 @@ export const Dropdown: DropdownComponent = ({
40
31
  <Dd
41
32
  label=""
42
33
  className="w-min max-h-96 px-1 z-20 rounded-md border-default bg-secondary-bg overflow-x-hidden overflow-y-auto"
43
- placement={placement || "bottom-end"}
44
- dismissOnClick={dismissOnClick ?? true}
34
+ dismissOnClick={rest.dismissOnClick ?? true}
45
35
  theme={{
46
36
  floating: {
47
37
  header: "px-4 py-2 text-sm !text-default",
@@ -55,12 +45,14 @@ export const Dropdown: DropdownComponent = ({
55
45
  },
56
46
  }}
57
47
  renderTrigger={() => <div>{trigger}</div>}
48
+ trigger={actionTrigger || "click"}
49
+ {...rest}
58
50
  >
59
51
  {header}
60
52
  {itemList}
61
53
  {childrenList.length > 0 && !header && itemList.length === 0 && (
62
54
  <Dd.Item className="flex flex-col cursor-default" as="div">
63
- {children}
55
+ {rest.children}
64
56
  </Dd.Item>
65
57
  )}
66
58
  </Dd>
package/src/components/dropdown/item.tsx CHANGED
@@ -1,13 +1,12 @@
1
1
  "use client";
2
2
  import React from "react";
3
- import { Dropdown as Dd } from "flowbite-react";
3
+ import { Dropdown as Dd, DropdownItemProps } from "flowbite-react";
4
4
 
5
- export interface ItemProps {
5
+ export interface ItemProps extends Omit<DropdownItemProps, "as"> {
6
6
  children: React.ReactNode;
7
7
  active?: boolean;
8
8
  as?: "button" | "title";
9
9
  disabled?: boolean;
10
- onClick?: () => void;
11
10
  }
12
11
 
13
12
  export const Item: React.FC<ItemProps> = ({
@@ -15,7 +14,7 @@ export const Item: React.FC<ItemProps> = ({
15
14
  active,
16
15
  as,
17
16
  disabled,
18
- onClick,
17
+ ...rest
19
18
  }) => {
20
19
  return (
21
20
  <Dd.Item
@@ -25,9 +24,9 @@ export const Item: React.FC<ItemProps> = ({
25
24
  : `disabled:text-disabled ${
26
25
  as === "title" ? "" : "hover:bg-secondary-light"
27
26
  }`
28
- } outline-0`}
27
+ }`}
29
28
  disabled={active ? true : (disabled || as === "title") ?? false}
30
- onClick={onClick}
29
+ {...rest}
31
30
  >
32
31
  {children}
33
32
  </Dd.Item>
package/src/components/form/input/checkbox.tsx CHANGED
@@ -46,10 +46,16 @@ export const Checkbox: React.FC<CheckboxProps> = ({
46
46
  <input
47
47
  ref={inputRef}
48
48
  type="checkbox"
49
- className={`border-default border rounded bg-secondary-bg cursor-pointer indeterminate:bg-primary indeterminate:hover:bg-primary indeterminate:disabled:bg-secondary-dark checked:bg-primary focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:bg-secondary-light disabled:checked:bg-secondary-dark disabled:cursor-default ${
49
+ className={`border-default border rounded bg-secondary-bg cursor-pointer indeterminate:bg-primary indeterminate:hover:bg-primary indeterminate:disabled:bg-secondary-dark checked:bg-primary focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-0 focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:checked:bg-secondary-dark disabled:cursor-default ${
50
50
  theme && "border-0"
51
51
  }`}
52
52
  style={{ backgroundColor: theme }}
53
+ onKeyDown={(e) => {
54
+ if (e.key === "Enter") {
55
+ e.preventDefault();
56
+ inputRef.current?.click();
57
+ }
58
+ }}
53
59
  {...rest}
54
60
  />
55
61
  </div>
@@ -72,13 +78,18 @@ export const Checkbox: React.FC<CheckboxProps> = ({
72
78
  )}
73
79
  </div>
74
80
  )}
75
- <div
76
- className={`flex items-center justify-start w-8 h-5 border rounded-full bg-secondary-bg overflow-hidden cursor-pointer duration-300 group-has-[:checked]/checkbox:justify-end group-has-[:checked]/checkbox:bg-primary group-has-[:disabled:checked]/checkbox:bg-secondary-dark ${
81
+ <button
82
+ type="button"
83
+ className={`flex items-center justify-start w-8 h-5 border rounded-full bg-secondary-bg overflow-hidden cursor-pointer duration-300 group-has-[:checked]/checkbox:justify-end group-has-[:checked]/checkbox:bg-primary group-has-[:disabled]/checkbox:bg-secondary-light group-has-[:disabled:checked]/checkbox:bg-secondary-dark focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-0 focus:shadow focus:shadow-primary focus:border-primary-dark ${
77
84
  options?.variant !== "switch" && "hidden"
78
85
  }`}
86
+ disabled={rest.disabled}
87
+ onClick={() => {
88
+ inputRef.current?.click();
89
+ }}
79
90
  >
80
91
  <div className="w-4 h-4 rounded-full bg-secondary duration-300 group-has-[:checked]/checkbox:bg-secondary-bg group-has-[:disabled]/checkbox:bg-secondary-dark group-has-[:disabled:checked]/checkbox:bg-secondary-bg"></div>
81
- </div>
92
+ </button>
82
93
  </label>
83
94
  );
84
95
  };
package/src/components/form/input/color.tsx CHANGED
@@ -92,6 +92,7 @@ export const Color: React.FC<ColorProps> = ({
92
92
  ref={inputRef}
93
93
  type="color"
94
94
  className="absolute -bottom-2.5 -z-10"
95
+ tabIndex={-1}
95
96
  value={tempValue}
96
97
  onChange={(e) => setTempValue(e.target.value.toUpperCase())}
97
98
  {...rest}
package/src/components/form/input/radio.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import React from "react";
2
+ import React, { useRef } from "react";
3
3
  import { Tooltip } from "../../../components";
4
4
  import { Icon } from "@iconify/react";
5
5
 
@@ -20,6 +20,8 @@ export const Radio: React.FC<RadioProps> = ({
20
20
  theme,
21
21
  ...rest
22
22
  }) => {
23
+ const inputRef = useRef<HTMLInputElement>(null);
24
+
23
25
  return (
24
26
  <label
25
27
  className={`flex items-center w-fit ${
@@ -35,11 +37,18 @@ export const Radio: React.FC<RadioProps> = ({
35
37
  }`}
36
38
  >
37
39
  <input
40
+ ref={inputRef}
38
41
  type="radio"
39
- className={`border-default border bg-secondary-bg cursor-pointer checked:bg-primary focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:bg-secondary-light disabled:checked:bg-secondary-dark disabled:cursor-default ${
42
+ className={`border-default border bg-secondary-bg cursor-pointer checked:bg-primary focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-0 focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:checked:bg-secondary-dark disabled:cursor-default ${
40
43
  theme && "border-0"
41
44
  }`}
42
45
  style={{ backgroundColor: theme }}
46
+ onKeyDown={(e) => {
47
+ if (e.key === "Enter") {
48
+ e.preventDefault();
49
+ inputRef.current?.click();
50
+ }
51
+ }}
43
52
  {...rest}
44
53
  />
45
54
  </div>
package/src/components/form/input/range.tsx CHANGED
@@ -63,7 +63,7 @@ export const Range: React.FC<RangeProps> = ({
63
63
  <input
64
64
  ref={inputRef}
65
65
  type="range"
66
- className={`flex-1 border-default border cursor-pointer accent-primary focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:accent-secondary-dark disabled:cursor-default ${
66
+ className={`flex-1 border border-default rounded-md cursor-pointer accent-primary focus:outline-none focus:ring-0 focus:ring-offset-0 focus:accent-primary-dark disabled:accent-secondary-dark disabled:cursor-default ${
67
67
  theme && "border-0"
68
68
  }`}
69
69
  style={{ accentColor: theme }}
package/src/components/form/other/multipleSelect.tsx CHANGED
@@ -62,21 +62,20 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
62
62
  onRemove,
63
63
  ...rest
64
64
  }) => {
65
- const [tempValue, setTempValue] = useState<string[]>([]);
66
- const [openDropdown, setOpenDropdown] = useState(false);
67
- const [dropdownWidth, setDropdownWidth] = useState<number>(0);
68
- const [dropdownHeight, setDropdownHeight] = useState<number>(0);
69
- const fakeInputRef = useRef<HTMLDivElement>(null);
70
65
  const itemContainerRef = useRef<HTMLDivElement>(null);
71
66
  const inputRef = useRef<HTMLInputElement>(null);
72
67
  const dropdownRef = useRef<HTMLButtonElement>(null);
68
+ const [tempValue, setTempValue] = useState<string[]>([]);
69
+ const [openDropdown, setOpenDropdown] = useState(false);
70
+ const [inputHeight, setInputHeight] = useState<number>(0);
71
+ const [dropdownWidth, setDropdownWidth] = useState<number>(0);
73
72
  const width = options?.width === "fit" ? "w-fit" : "w-full";
74
73
  const height =
75
74
  options?.height === "short"
76
- ? "py-0.5"
75
+ ? "py-[3.5px]"
77
76
  : options?.height === "high"
78
- ? "py-1.5"
79
- : "py-1";
77
+ ? "py-[7.5px]"
78
+ : "py-[5px]";
80
79
 
81
80
  useEffect(() => {
82
81
  document.addEventListener("mousedown", (e) => {
@@ -84,6 +83,16 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
84
83
  setOpenDropdown(false);
85
84
  }
86
85
  });
86
+
87
+ const observer = new ResizeObserver((entries) => {
88
+ for (let entry of entries) {
89
+ setInputHeight(entry.contentRect.height);
90
+ }
91
+ });
92
+
93
+ observer.observe(itemContainerRef.current!);
94
+
95
+ return () => observer.disconnect();
87
96
  }, []);
88
97
 
89
98
  useEffect(() => {
@@ -107,211 +116,221 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
107
116
  }, [tempValue]);
108
117
 
109
118
  return (
110
- <div className="flex flex-row-reverse items-end">
111
- <label className={`flex flex-col gap-2 ${width}`}>
112
- {(label || description) && (
113
- <div className="flex justify-between items-center gap-2">
114
- {label && (
115
- <span
116
- className={`text-sm select-none ${
117
- required && "after:content-['*'] after:ml-1 after:text-danger"
118
- }`}
119
- >
120
- {label}
121
- </span>
122
- )}
123
- {description && (
124
- <Tooltip content={description}>
125
- <Icon
126
- icon="octicon:info-16"
127
- className="text-sm text-primary-dark"
128
- />
129
- </Tooltip>
130
- )}
131
- </div>
132
- )}
133
- <div className="relative flex items-center">
134
- <input
135
- ref={inputRef}
136
- type="text"
137
- className="absolute bottom-0 -z-10 w-full border-0 rounded-md focus:ring-0"
138
- disabled={disabled ?? false}
139
- />
140
- <div
141
- ref={fakeInputRef}
142
- className={`group/button flex justify-between items-center gap-2 w-full min-h-10 px-4 border rounded-md caret-transparent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark ${height} ${
143
- disabled
144
- ? "bg-secondary-light cursor-default pointer-events-none"
145
- : "bg-secondary-bg cursor-pointer"
146
- } ${
147
- openDropdown
148
- ? "outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
149
- : "border-default"
150
- }`}
151
- onClick={(e) => {
152
- e.preventDefault();
153
- onClick && onClick();
154
- setOpenDropdown(true);
155
- dropdownRef.current?.click();
156
- setDropdownWidth(
157
- fakeInputRef?.current?.getBoundingClientRect()?.width || 0
158
- );
159
- setDropdownHeight(
160
- fakeInputRef?.current?.getBoundingClientRect()?.height || 0
161
- );
162
- }}
163
- {...rest}
164
- >
165
- {!tempValue || tempValue?.length === 0 ? (
166
- <span
167
- className={`text-silent select-none duration-300 ${
168
- openDropdown ? "translate-x-1" : "translate-x-0"
169
- }`}
170
- >
171
- {placeholder}
172
- </span>
173
- ) : (
174
- <div
175
- ref={itemContainerRef}
176
- className="flex flex-wrap gap-2 w-full h-min pointer-events-none invisible"
177
- >
178
- {tempValue?.map((item) => {
179
- return (
180
- <div
181
- key={item}
182
- className="flex items-center gap-2 px-2 py-0.5 rounded-md bg-primary text-white cursor-default pointer-events-auto"
183
- >
184
- <span>{menus.find((i) => i.value === item)?.label}</span>
185
- <div className="cursor-pointer">
186
- <Icon icon="pajamas:close" />
187
- </div>
188
- </div>
119
+ <div className="relative">
120
+ <div className="flex flex-row-reverse items-end">
121
+ <label className={`flex flex-col gap-2 ${width}`}>
122
+ {(label || description) && (
123
+ <div className="flex justify-between items-center gap-2">
124
+ {label && (
125
+ <span
126
+ className={`text-sm select-none ${
127
+ required &&
128
+ "after:content-['*'] after:ml-1 after:text-danger"
129
+ }`}
130
+ >
131
+ {label}
132
+ </span>
133
+ )}
134
+ {description && (
135
+ <Tooltip content={description}>
136
+ <Icon
137
+ icon="octicon:info-16"
138
+ className="text-sm text-primary-dark"
139
+ />
140
+ </Tooltip>
141
+ )}
142
+ </div>
143
+ )}
144
+ <div className="relative flex items-center">
145
+ <div className="relative flex items-center w-full cursor-pointer">
146
+ <input
147
+ ref={inputRef}
148
+ type="text"
149
+ className="w-full ps-4 pe-14 border border-default rounded-md bg-secondary-bg text-transparent cursor-pointer caret-transparent duration-150 placeholder:duration-300 placeholder:text-silent focus:placeholder:translate-x-1 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 disabled:cursor-default"
150
+ style={{
151
+ height:
152
+ tempValue.length !== 0
153
+ ? inputHeight +
154
+ (options?.height === "short"
155
+ ? 7
156
+ : options?.height === "high"
157
+ ? 15
158
+ : 10)
159
+ : options?.height === "short"
160
+ ? 35
161
+ : options?.height === "high"
162
+ ? 43
163
+ : 39,
164
+ }}
165
+ placeholder={placeholder}
166
+ required={required}
167
+ disabled={disabled}
168
+ value={tempValue.join(", ")}
169
+ onChange={(e) => {}}
170
+ onClick={(e) => {
171
+ e.preventDefault();
172
+ setOpenDropdown(true);
173
+ dropdownRef.current?.click();
174
+ setDropdownWidth(
175
+ inputRef?.current?.getBoundingClientRect()?.width || 0
189
176
  );
190
- })}
191
- </div>
192
- )}
193
- {!options?.disableDropdown && (
194
- <div className="ms-auto text-xl text-disabled pointer-events-none">
177
+ }}
178
+ onKeyDown={(e) => {
179
+ if (e.key === "Enter") {
180
+ e.preventDefault();
181
+ inputRef.current?.click();
182
+ }
183
+ }}
184
+ />
185
+ <div className="absolute right-4 text-xl text-disabled pointer-events-none">
195
186
  <Icon
196
187
  icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
197
188
  />
198
189
  </div>
199
- )}
190
+ </div>
200
191
  </div>
201
- <div
202
- className="absolute left-4 flex flex-wrap gap-2 h-min pointer-events-none"
203
- style={{ width: itemContainerRef.current?.clientWidth }}
204
- >
205
- {tempValue?.map((item) => {
206
- return (
207
- <div
208
- key={item}
209
- className={`flex items-center gap-2 px-2 py-0.5 rounded-md text-white select-none cursor-default pointer-events-auto ${
210
- disabled ||
211
- menus.find((i) => i.value === item)?.disableUnselect
212
- ? "bg-secondary"
213
- : "bg-primary"
214
- }`}
192
+ </label>
193
+ {!options?.disableDropdown && (
194
+ <div className="w-0 overflow-hidden">
195
+ <Dropdown
196
+ placement="bottom-start"
197
+ dismissOnClick={false}
198
+ trigger={
199
+ <button
200
+ type="button"
201
+ ref={dropdownRef}
202
+ className="w-0"
203
+ style={{
204
+ height:
205
+ tempValue.length !== 0
206
+ ? inputHeight +
207
+ (options?.height === "short"
208
+ ? 7
209
+ : options?.height === "high"
210
+ ? 15
211
+ : 10)
212
+ : options?.height === "short"
213
+ ? 35
214
+ : options?.height === "high"
215
+ ? 43
216
+ : 39,
217
+ }}
218
+ tabIndex={-1}
219
+ disabled={disabled ?? false}
215
220
  >
216
- <span>{menus.find((i) => i.value === item)?.label}</span>
217
- <button
218
- disabled={
219
- disabled ||
220
- menus.find((i) => i.value === item)?.disableUnselect
221
+ 1
222
+ </button>
223
+ }
224
+ >
225
+ {menus.length === 0 ? (
226
+ <Dropdown.Item
227
+ onKeyDown={(e) => {
228
+ if (e.key === "Escape") {
229
+ e.preventDefault();
230
+ inputRef.current?.focus();
231
+ setOpenDropdown(false);
221
232
  }
222
- onClick={() => {
223
- setTempValue(tempValue.filter((i) => i !== item));
224
- if (onChange) {
225
- onChange({
226
- target: {
227
- value: tempValue.filter((i) => i !== item),
228
- },
229
- } as any);
230
- }
231
- if (onRemove) {
232
- onRemove({
233
- target: {
234
- value: item,
235
- },
236
- });
237
- }
238
- }}
233
+ }}
234
+ >
235
+ <div
236
+ className="flex justify-center"
237
+ style={{ width: dropdownWidth - 43 }}
239
238
  >
240
- <Icon icon="pajamas:close" />
241
- </button>
242
- </div>
243
- );
244
- })}
239
+ <span>No data found</span>
240
+ </div>
241
+ </Dropdown.Item>
242
+ ) : (
243
+ menus.map((item, index) => {
244
+ return (
245
+ <Dropdown.Item
246
+ key={index}
247
+ active={
248
+ tempValue?.find((i) => i === item.value) ? true : false
249
+ }
250
+ as={item.variant || "button"}
251
+ disabled={item.disabled ?? false}
252
+ onClick={() => {
253
+ setTempValue([...tempValue, item.value]);
254
+ if (onChange) {
255
+ onChange({
256
+ target: { value: [...tempValue, item.value] },
257
+ } as any);
258
+ }
259
+ if (onSelect) {
260
+ onSelect({
261
+ target: { value: item.value },
262
+ });
263
+ }
264
+ }}
265
+ onKeyDown={(e) => {
266
+ if (e.key === "Escape") {
267
+ e.preventDefault();
268
+ inputRef.current?.focus();
269
+ setOpenDropdown(false);
270
+ }
271
+ }}
272
+ >
273
+ <div
274
+ className="flex justify-between items-center gap-4"
275
+ style={{ width: dropdownWidth - 43 }}
276
+ >
277
+ <span>{item.label}</span>
278
+ {labelComponent ? labelComponent(item) : ""}
279
+ </div>
280
+ </Dropdown.Item>
281
+ );
282
+ })
283
+ )}
284
+ </Dropdown>
245
285
  </div>
246
- </div>
247
- </label>
248
- {!options?.disableDropdown && (
249
- <div className="w-0 overflow-hidden">
250
- <Dropdown
251
- placement="bottom-start"
252
- dismissOnClick={false}
253
- trigger={
286
+ )}
287
+ </div>
288
+ <div
289
+ ref={itemContainerRef}
290
+ className={`absolute bottom-0 ps-4 pe-12 flex flex-wrap gap-2 w-full h-min pointer-events-none ${height}`}
291
+ >
292
+ {tempValue?.map((item) => {
293
+ return (
294
+ <div
295
+ key={item}
296
+ className={`flex items-center gap-2 px-2 py-0.5 rounded-md text-white select-none cursor-default pointer-events-auto ${
297
+ disabled || menus.find((i) => i.value === item)?.disableUnselect
298
+ ? "bg-secondary"
299
+ : "bg-primary"
300
+ }`}
301
+ >
302
+ <span>{menus.find((i) => i.value === item)?.label}</span>
254
303
  <button
255
304
  type="button"
256
- ref={dropdownRef}
257
- className="w-0 my-0.5"
258
- style={{
259
- height: dropdownHeight,
260
- }}
305
+ disabled={
306
+ disabled ||
307
+ menus.find((i) => i.value === item)?.disableUnselect
308
+ }
261
309
  tabIndex={-1}
262
- disabled={disabled ?? false}
310
+ onClick={() => {
311
+ setTempValue(tempValue.filter((i) => i !== item));
312
+ if (onChange) {
313
+ onChange({
314
+ target: {
315
+ value: tempValue.filter((i) => i !== item),
316
+ },
317
+ } as any);
318
+ }
319
+ if (onRemove) {
320
+ onRemove({
321
+ target: {
322
+ value: item,
323
+ },
324
+ });
325
+ }
326
+ }}
263
327
  >
264
- 1
328
+ <Icon icon="pajamas:close" />
265
329
  </button>
266
- }
267
- >
268
- {menus.length === 0 ? (
269
- <Dropdown.Item>
270
- <div
271
- className="flex justify-center"
272
- style={{ width: dropdownWidth - 43 }}
273
- >
274
- <span>No data found</span>
275
- </div>
276
- </Dropdown.Item>
277
- ) : (
278
- menus.map((item, index) => {
279
- return (
280
- <Dropdown.Item
281
- key={index}
282
- active={
283
- tempValue?.find((i) => i === item.value) ? true : false
284
- }
285
- as={item.variant || "button"}
286
- disabled={item.disabled ?? false}
287
- onClick={() => {
288
- setTempValue([...tempValue, item.value]);
289
- if (onChange) {
290
- onChange({
291
- target: { value: [...tempValue, item.value] },
292
- } as any);
293
- }
294
- if (onSelect) {
295
- onSelect({
296
- target: { value: item.value },
297
- });
298
- }
299
- }}
300
- >
301
- <div
302
- className="flex justify-between items-center gap-4"
303
- style={{ width: dropdownWidth - 43 }}
304
- >
305
- <span>{item.label}</span>
306
- {labelComponent ? labelComponent(item) : ""}
307
- </div>
308
- </Dropdown.Item>
309
- );
310
- })
311
- )}
312
- </Dropdown>
313
- </div>
314
- )}
330
+ </div>
331
+ );
332
+ })}
333
+ </div>
315
334
  </div>
316
335
  );
317
336
  };