next-helios-fe 1.9.14 → 1.9.15

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.9.14",
3
+ "version": "1.9.15",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -75,8 +75,8 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
75
75
  options?.height === "short"
76
76
  ? "py-[3.5px]"
77
77
  : options?.height === "high"
78
- ? "py-[7.5px]"
79
- : "py-[5px]";
78
+ ? "py-[7.5px]"
79
+ : "py-[5px]";
80
80
 
81
81
  useEffect(() => {
82
82
  function handleClickOutside(event: MouseEvent) {
@@ -116,7 +116,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
116
116
  if (required) {
117
117
  if (tempValue.length === 0) {
118
118
  inputRef.current?.setCustomValidity(
119
- "Please select some items in the list."
119
+ "Please select some items in the list.",
120
120
  );
121
121
  } else {
122
122
  inputRef.current?.setCustomValidity("");
@@ -125,225 +125,223 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
125
125
  }, [tempValue]);
126
126
 
127
127
  return (
128
- <div className="relative">
129
- <div ref={componentRef} className="flex flex-row-reverse items-end">
130
- <label className={`flex flex-col gap-2 ${width}`}>
131
- {(label || description) && (
132
- <div className="flex justify-between items-center gap-2">
133
- {label && (
134
- <span
135
- className={`text-sm select-none ${
136
- required &&
137
- "after:content-['*'] after:ml-1 after:text-danger"
138
- }`}
139
- >
140
- {label}
141
- </span>
142
- )}
143
- {description && (
144
- <Tooltip content={description}>
145
- <Icon
146
- icon="octicon:info-16"
147
- className="text-sm text-primary-dark"
148
- />
149
- </Tooltip>
150
- )}
151
- </div>
152
- )}
153
- <div className="relative flex items-center">
154
- <div className="relative flex items-center w-full cursor-pointer">
155
- <input
156
- ref={inputRef}
157
- type="text"
158
- 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:cursor-default"
159
- style={{
160
- height:
161
- tempValue.length !== 0
162
- ? inputHeight +
163
- (options?.height === "short"
164
- ? 7
165
- : options?.height === "high"
128
+ <div ref={componentRef} className="flex flex-row-reverse items-end">
129
+ <label className={`relative flex flex-col gap-2 ${width}`}>
130
+ {(label || description) && (
131
+ <div className="flex items-center justify-between gap-2">
132
+ {label && (
133
+ <span
134
+ className={`select-none text-sm ${
135
+ required && "after:ml-1 after:text-danger after:content-['*']"
136
+ }`}
137
+ >
138
+ {label}
139
+ </span>
140
+ )}
141
+ {description && (
142
+ <Tooltip content={description}>
143
+ <Icon
144
+ icon="octicon:info-16"
145
+ className="text-sm text-primary-dark"
146
+ />
147
+ </Tooltip>
148
+ )}
149
+ </div>
150
+ )}
151
+ <div className="relative flex items-center">
152
+ <div className="relative flex w-full cursor-pointer items-center">
153
+ <input
154
+ ref={inputRef}
155
+ type="text"
156
+ className="w-full cursor-pointer rounded-md border border-default bg-secondary-bg pe-14 ps-4 text-transparent caret-transparent duration-150 placeholder:text-silent placeholder:duration-300 focus:border-primary-dark focus:shadow focus:shadow-primary focus:outline-none focus:ring-1 focus:ring-primary focus:placeholder:translate-x-1 disabled:cursor-default disabled:bg-secondary-light"
157
+ style={{
158
+ height:
159
+ tempValue.length !== 0
160
+ ? inputHeight +
161
+ (options?.height === "short"
162
+ ? 7
163
+ : options?.height === "high"
166
164
  ? 15
167
165
  : 10)
168
- : options?.height === "short"
166
+ : options?.height === "short"
169
167
  ? 35
170
168
  : options?.height === "high"
171
- ? 43
172
- : 39,
173
- }}
174
- placeholder={placeholder}
175
- required={required}
176
- disabled={disabled}
177
- value={tempValue.join(", ")}
178
- onChange={(e) => {}}
179
- onClick={(e) => {
169
+ ? 43
170
+ : 39,
171
+ }}
172
+ placeholder={placeholder}
173
+ required={required}
174
+ disabled={disabled}
175
+ value={tempValue.join(", ")}
176
+ onChange={(e) => {}}
177
+ onClick={(e) => {
178
+ e.preventDefault();
179
+ setOpenDropdown(true);
180
+ dropdownTriggerRef.current?.click();
181
+ setDropdownWidth(
182
+ inputRef?.current?.getBoundingClientRect()?.width || 0,
183
+ );
184
+ }}
185
+ onKeyDown={(e) => {
186
+ if (e.key === "Enter") {
180
187
  e.preventDefault();
181
- setOpenDropdown(true);
182
- dropdownTriggerRef.current?.click();
183
- setDropdownWidth(
184
- inputRef?.current?.getBoundingClientRect()?.width || 0
185
- );
186
- }}
187
- onKeyDown={(e) => {
188
- if (e.key === "Enter") {
189
- e.preventDefault();
190
- inputRef.current?.click();
191
- }
192
- }}
188
+ inputRef.current?.click();
189
+ }
190
+ }}
191
+ />
192
+ <div className="pointer-events-none absolute right-4 text-xl text-disabled">
193
+ <Icon
194
+ icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
193
195
  />
194
- <div className="absolute right-4 text-xl text-disabled pointer-events-none">
195
- <Icon
196
- icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
197
- />
198
- </div>
199
196
  </div>
200
197
  </div>
201
- </label>
202
- {!options?.disableDropdown && (
203
- <div className="w-0 overflow-hidden">
204
- <Dropdown
205
- placement="bottom-start"
206
- dismissOnClick={false}
207
- trigger={
198
+ </div>
199
+ <div
200
+ ref={itemContainerRef}
201
+ className={`pointer-events-none absolute bottom-0 flex h-min w-full flex-wrap gap-2 pe-12 ps-4 ${height}`}
202
+ >
203
+ {tempValue?.map((item) => {
204
+ return (
205
+ <div
206
+ key={item}
207
+ className={`pointer-events-auto flex cursor-default select-none items-center gap-2 rounded-md px-2 py-0.5 text-white ${
208
+ disabled ||
209
+ menus.find((i) => i.value === item)?.disableUnselect
210
+ ? "bg-secondary"
211
+ : "bg-primary"
212
+ }`}
213
+ >
214
+ <span>{menus.find((i) => i.value === item)?.label}</span>
208
215
  <button
209
216
  type="button"
210
- ref={dropdownTriggerRef}
211
- className="w-0"
212
- style={{
213
- height:
214
- tempValue.length !== 0
215
- ? inputHeight +
216
- (options?.height === "short"
217
- ? 7
218
- : options?.height === "high"
219
- ? 15
220
- : 10)
221
- : options?.height === "short"
222
- ? 35
223
- : options?.height === "high"
224
- ? 43
225
- : 39,
226
- }}
217
+ disabled={
218
+ disabled ||
219
+ menus.find((i) => i.value === item)?.disableUnselect
220
+ }
227
221
  tabIndex={-1}
228
- disabled={disabled ?? false}
229
- >
230
- 1
231
- </button>
232
- }
233
- >
234
- {menus.length === 0 ? (
235
- <Dropdown.Item
236
- onKeyDown={(e) => {
237
- if (e.key === "Escape") {
238
- e.preventDefault();
239
- inputRef.current?.focus();
240
- setOpenDropdown(false);
241
- } else if (e.key === "Tab") {
242
- setOpenDropdown(false);
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
+ });
243
237
  }
244
238
  }}
245
239
  >
246
- <div
247
- className="flex justify-center"
248
- style={{ width: dropdownWidth - 43 }}
249
- >
250
- <span>No data found</span>
251
- </div>
252
- </Dropdown.Item>
253
- ) : (
254
- menus.map((item, index) => {
255
- return (
256
- <Dropdown.Item
257
- key={index}
258
- active={
259
- tempValue?.find((i) => i === item.value) ? true : false
260
- }
261
- as={item.variant || "button"}
262
- disabled={item.disabled ?? false}
263
- onClick={() => {
264
- setTempValue([...tempValue, item.value]);
265
- if (onChange) {
266
- onChange({
267
- target: { value: [...tempValue, item.value] },
268
- } as any);
269
- }
270
- if (onSelect) {
271
- onSelect({
272
- target: { value: item.value },
273
- });
274
- }
275
- }}
276
- onKeyDown={(e) => {
277
- if (e.key === "Escape") {
278
- e.preventDefault();
279
- inputRef.current?.focus();
280
- setOpenDropdown(false);
281
- } else if (e.key === "Tab") {
282
- setOpenDropdown(false);
283
- }
284
- }}
285
- >
286
- <div
287
- className="flex justify-between items-center gap-4"
288
- style={{ width: dropdownWidth - 43 }}
289
- >
290
- <span>{item.label}</span>
291
- {labelComponent ? labelComponent(item) : ""}
292
- </div>
293
- </Dropdown.Item>
294
- );
295
- })
296
- )}
297
- </Dropdown>
298
- </div>
299
- )}
300
- </div>
301
- <div
302
- ref={itemContainerRef}
303
- className={`absolute bottom-0 ps-4 pe-12 flex flex-wrap gap-2 w-full h-min pointer-events-none ${height}`}
304
- >
305
- {tempValue?.map((item) => {
306
- return (
307
- <div
308
- key={item}
309
- className={`flex items-center gap-2 px-2 py-0.5 rounded-md text-white select-none cursor-default pointer-events-auto ${
310
- disabled || menus.find((i) => i.value === item)?.disableUnselect
311
- ? "bg-secondary"
312
- : "bg-primary"
313
- }`}
314
- >
315
- <span>{menus.find((i) => i.value === item)?.label}</span>
240
+ <Icon icon="pajamas:close" />
241
+ </button>
242
+ </div>
243
+ );
244
+ })}
245
+ </div>
246
+ </label>
247
+ {!options?.disableDropdown && (
248
+ <div className="w-0 overflow-hidden">
249
+ <Dropdown
250
+ placement="bottom-start"
251
+ dismissOnClick={false}
252
+ trigger={
316
253
  <button
317
254
  type="button"
318
- disabled={
319
- disabled ||
320
- menus.find((i) => i.value === item)?.disableUnselect
321
- }
255
+ ref={dropdownTriggerRef}
256
+ className="w-0"
257
+ style={{
258
+ height:
259
+ tempValue.length !== 0
260
+ ? inputHeight +
261
+ (options?.height === "short"
262
+ ? 7
263
+ : options?.height === "high"
264
+ ? 15
265
+ : 10)
266
+ : options?.height === "short"
267
+ ? 35
268
+ : options?.height === "high"
269
+ ? 43
270
+ : 39,
271
+ }}
322
272
  tabIndex={-1}
323
- onClick={() => {
324
- setTempValue(tempValue.filter((i) => i !== item));
325
- if (onChange) {
326
- onChange({
327
- target: {
328
- value: tempValue.filter((i) => i !== item),
329
- },
330
- } as any);
331
- }
332
- if (onRemove) {
333
- onRemove({
334
- target: {
335
- value: item,
336
- },
337
- });
273
+ disabled={disabled ?? false}
274
+ >
275
+ 1
276
+ </button>
277
+ }
278
+ >
279
+ {menus.length === 0 ? (
280
+ <Dropdown.Item
281
+ onKeyDown={(e) => {
282
+ if (e.key === "Escape") {
283
+ e.preventDefault();
284
+ inputRef.current?.focus();
285
+ setOpenDropdown(false);
286
+ } else if (e.key === "Tab") {
287
+ setOpenDropdown(false);
338
288
  }
339
289
  }}
340
290
  >
341
- <Icon icon="pajamas:close" />
342
- </button>
343
- </div>
344
- );
345
- })}
346
- </div>
291
+ <div
292
+ className="flex justify-center"
293
+ style={{ width: dropdownWidth - 43 }}
294
+ >
295
+ <span>No data found</span>
296
+ </div>
297
+ </Dropdown.Item>
298
+ ) : (
299
+ menus.map((item, index) => {
300
+ return (
301
+ <Dropdown.Item
302
+ key={index}
303
+ active={
304
+ tempValue?.find((i) => i === item.value) ? true : false
305
+ }
306
+ as={item.variant || "button"}
307
+ disabled={item.disabled ?? false}
308
+ onClick={() => {
309
+ setTempValue([...tempValue, item.value]);
310
+ if (onChange) {
311
+ onChange({
312
+ target: { value: [...tempValue, item.value] },
313
+ } as any);
314
+ }
315
+ if (onSelect) {
316
+ onSelect({
317
+ target: { value: item.value },
318
+ });
319
+ }
320
+ }}
321
+ onKeyDown={(e) => {
322
+ if (e.key === "Escape") {
323
+ e.preventDefault();
324
+ inputRef.current?.focus();
325
+ setOpenDropdown(false);
326
+ } else if (e.key === "Tab") {
327
+ setOpenDropdown(false);
328
+ }
329
+ }}
330
+ >
331
+ <div
332
+ className="flex items-center justify-between gap-4"
333
+ style={{ width: dropdownWidth - 43 }}
334
+ >
335
+ <span>{item.label}</span>
336
+ {labelComponent ? labelComponent(item) : ""}
337
+ </div>
338
+ </Dropdown.Item>
339
+ );
340
+ })
341
+ )}
342
+ </Dropdown>
343
+ </div>
344
+ )}
347
345
  </div>
348
346
  );
349
347
  };