hplx-react-elements-dev 1.0.24 → 1.0.26
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { AddSuggestionProps } from "../types";
|
|
3
|
-
declare const AddSuggestion: ({ isInputField, label, start_icon, end_icon, prefix, suffixButton, suffix, char_count, onSuggestionClick, height, hint_text_icon, hint_text, errorMsg, inputProps, inputFieldInputProps, options }: AddSuggestionProps) => JSX.Element;
|
|
3
|
+
declare const AddSuggestion: ({ isInputField, label, start_icon, end_icon, prefix, suffixButton, suffix, char_count, onSuggestionClick, height, hint_text_icon, hint_text, errorMsg, inputProps, inputFieldInputProps, options, suggestionValue, handleSuggestionValChange }: AddSuggestionProps) => JSX.Element;
|
|
4
4
|
export default AddSuggestion;
|
package/dist/esm/index.js
CHANGED
|
@@ -203,8 +203,29 @@ var InputField = function InputField(_a) {
|
|
|
203
203
|
inputProps = _a.inputProps,
|
|
204
204
|
_f = _a.isborderRequired,
|
|
205
205
|
isborderRequired = _f === void 0 ? true : _f;
|
|
206
|
-
|
|
207
|
-
|
|
206
|
+
|
|
207
|
+
var _g = inputProps || {},
|
|
208
|
+
disabled = _g.disabled,
|
|
209
|
+
onFocus = _g.onFocus,
|
|
210
|
+
onBlur = _g.onBlur;
|
|
211
|
+
|
|
212
|
+
var _h = useState(false),
|
|
213
|
+
active = _h[0],
|
|
214
|
+
setActive = _h[1];
|
|
215
|
+
|
|
216
|
+
var handleFocus = function handleFocus(event) {
|
|
217
|
+
setActive(true);
|
|
218
|
+
onFocus && onFocus(event);
|
|
219
|
+
};
|
|
220
|
+
|
|
221
|
+
var handleBlur = function handleBlur(event) {
|
|
222
|
+
setActive(false);
|
|
223
|
+
onBlur && onBlur(event);
|
|
224
|
+
};
|
|
225
|
+
|
|
226
|
+
return jsxRuntime.exports.jsxs("div", __assign({
|
|
227
|
+
className: "inputfield"
|
|
228
|
+
}, {
|
|
208
229
|
children: [jsxRuntime.exports.jsxs("div", __assign({
|
|
209
230
|
className: "flex justify-between"
|
|
210
231
|
}, {
|
|
@@ -233,7 +254,7 @@ var InputField = function InputField(_a) {
|
|
|
233
254
|
}, {
|
|
234
255
|
children: jsxRuntime.exports.jsxs("div", __assign({
|
|
235
256
|
"data-setid": "error-msg",
|
|
236
|
-
className: "flex ".concat(isborderRequired ? "border-1" : "", " overflow-hidden placeholder:text-Gray-500 ").concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg h-10 ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error" : " ".concat(isborderRequired ? "hover:border-Primary-300 hover:shadow-xs-primary" : " ")))
|
|
257
|
+
className: "flex ".concat(isborderRequired ? "border-1" : "", " overflow-hidden placeholder:text-Gray-500 ").concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg h-10 ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error ".concat(active && "shadow-xs-error") : " ".concat(isborderRequired ? "hover:border-Primary-300 hover:shadow-xs-primary ".concat(active && "border-Primary-300 shadow-xs-primary") : " ")))
|
|
237
258
|
}, {
|
|
238
259
|
children: [Boolean(prefix) && jsxRuntime.exports.jsx("div", __assign({
|
|
239
260
|
"data-testid": "input-prefix",
|
|
@@ -253,9 +274,12 @@ var InputField = function InputField(_a) {
|
|
|
253
274
|
})
|
|
254
275
|
})), jsxRuntime.exports.jsx("input", __assign({
|
|
255
276
|
type: "text",
|
|
256
|
-
className: "flex-1 pl-[14px] pr-[12px] py-1 focus-visible:outline-0",
|
|
277
|
+
className: "flex-1 pl-[14px] pr-[12px] py-1 focus-visible:outline-0 border-0 focus:border-0",
|
|
257
278
|
"data-testid": "text-input"
|
|
258
|
-
}, inputProps
|
|
279
|
+
}, inputProps, {
|
|
280
|
+
onFocus: handleFocus,
|
|
281
|
+
onBlur: handleBlur
|
|
282
|
+
})), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
|
|
259
283
|
className: "text-Gray-500 flex items-center pr-2"
|
|
260
284
|
}, {
|
|
261
285
|
children: jsxRuntime.exports.jsx("span", {
|
|
@@ -297,17 +321,19 @@ var InputField = function InputField(_a) {
|
|
|
297
321
|
})
|
|
298
322
|
}))
|
|
299
323
|
}))]
|
|
300
|
-
});
|
|
324
|
+
}));
|
|
301
325
|
};
|
|
302
326
|
|
|
303
327
|
var InputFieldSplit = function InputFieldSplit(_a) {
|
|
328
|
+
var _b;
|
|
329
|
+
|
|
304
330
|
var label = _a.label,
|
|
305
|
-
|
|
306
|
-
start_icon =
|
|
307
|
-
|
|
308
|
-
end_icon =
|
|
309
|
-
|
|
310
|
-
hint_text_icon =
|
|
331
|
+
_c = _a.start_icon,
|
|
332
|
+
start_icon = _c === void 0 ? "" : _c,
|
|
333
|
+
_d = _a.end_icon,
|
|
334
|
+
end_icon = _d === void 0 ? "" : _d,
|
|
335
|
+
_e = _a.hint_text_icon,
|
|
336
|
+
hint_text_icon = _e === void 0 ? "" : _e,
|
|
311
337
|
prefix = _a.prefix,
|
|
312
338
|
suffix = _a.suffix,
|
|
313
339
|
hint_text = _a.hint_text,
|
|
@@ -317,7 +343,15 @@ var InputFieldSplit = function InputFieldSplit(_a) {
|
|
|
317
343
|
onChange = _a.onChange,
|
|
318
344
|
value = _a.value,
|
|
319
345
|
inputProps = _a.inputProps;
|
|
320
|
-
|
|
346
|
+
|
|
347
|
+
var _f = inputProps || {},
|
|
348
|
+
disabled = _f.disabled,
|
|
349
|
+
onFocus = _f.onFocus,
|
|
350
|
+
onBlur = _f.onBlur;
|
|
351
|
+
|
|
352
|
+
var _g = useState((_b = {}, _b[fieldNames[0]] = false, _b[fieldNames[1]] = false, _b)),
|
|
353
|
+
active = _g[0],
|
|
354
|
+
setActive = _g[1];
|
|
321
355
|
|
|
322
356
|
var handleChange = function handleChange(fieldName) {
|
|
323
357
|
return function (event) {
|
|
@@ -329,7 +363,31 @@ var InputFieldSplit = function InputFieldSplit(_a) {
|
|
|
329
363
|
};
|
|
330
364
|
};
|
|
331
365
|
|
|
332
|
-
|
|
366
|
+
var handleFocus = function handleFocus(fieldName) {
|
|
367
|
+
return function (event) {
|
|
368
|
+
setActive(function (prevValue) {
|
|
369
|
+
var _a;
|
|
370
|
+
|
|
371
|
+
return __assign(__assign({}, prevValue), (_a = {}, _a[fieldName] = true, _a));
|
|
372
|
+
});
|
|
373
|
+
onFocus && onFocus(event);
|
|
374
|
+
};
|
|
375
|
+
};
|
|
376
|
+
|
|
377
|
+
var handleBlur = function handleBlur(fieldName) {
|
|
378
|
+
return function (event) {
|
|
379
|
+
setActive(function (prevValue) {
|
|
380
|
+
var _a;
|
|
381
|
+
|
|
382
|
+
return __assign(__assign({}, prevValue), (_a = {}, _a[fieldName] = false, _a));
|
|
383
|
+
});
|
|
384
|
+
onBlur && onBlur(event);
|
|
385
|
+
};
|
|
386
|
+
};
|
|
387
|
+
|
|
388
|
+
return jsxRuntime.exports.jsxs("div", __assign({
|
|
389
|
+
className: "inputfieldsplit"
|
|
390
|
+
}, {
|
|
333
391
|
children: [jsxRuntime.exports.jsxs("div", __assign({
|
|
334
392
|
className: "flex justify-between"
|
|
335
393
|
}, {
|
|
@@ -357,7 +415,7 @@ var InputFieldSplit = function InputFieldSplit(_a) {
|
|
|
357
415
|
type: "Text md"
|
|
358
416
|
}, {
|
|
359
417
|
children: jsxRuntime.exports.jsxs("div", __assign({
|
|
360
|
-
className: "flex border-1 overflow-hidden placeholder:text-Gray-500 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg h-10 ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error" : "hover:border-Primary-300 hover:shadow-xs-primary"))
|
|
418
|
+
className: "flex border-1 overflow-hidden placeholder:text-Gray-500 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg h-10 ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error ".concat((active[fieldNames[0]] || active[fieldNames[1]]) && "shadow-xs-error") : "hover:border-Primary-300 hover:shadow-xs-primary ".concat((active[fieldNames[0]] || active[fieldNames[1]]) && "border-Primary-300 shadow-xs-primary")))
|
|
361
419
|
}, {
|
|
362
420
|
children: [Boolean(prefix) && jsxRuntime.exports.jsx("div", __assign({
|
|
363
421
|
"data-testid": "input-prefix",
|
|
@@ -380,10 +438,12 @@ var InputFieldSplit = function InputFieldSplit(_a) {
|
|
|
380
438
|
}, {
|
|
381
439
|
children: [jsxRuntime.exports.jsx("input", __assign({
|
|
382
440
|
type: "text",
|
|
383
|
-
className: "pl-[14px] py-1 focus-visible:outline-0 absolute top-0 bottom-0 left-0 right-1/2 mr-2 "
|
|
441
|
+
className: "pl-[14px] py-1 focus-visible:outline-0 absolute top-0 bottom-0 left-0 right-1/2 mr-2 border-0 focus:border-0"
|
|
384
442
|
}, inputProps, {
|
|
385
443
|
value: value && value[fieldNames[0]],
|
|
386
444
|
onChange: handleChange(fieldNames[0]),
|
|
445
|
+
onFocus: handleFocus(fieldNames[0]),
|
|
446
|
+
onBlur: handleBlur(fieldNames[0]),
|
|
387
447
|
"data-testid": "text1-input"
|
|
388
448
|
})), jsxRuntime.exports.jsx("div", __assign({
|
|
389
449
|
className: "flex-1 flex justify-center items-center"
|
|
@@ -397,10 +457,12 @@ var InputFieldSplit = function InputFieldSplit(_a) {
|
|
|
397
457
|
}))
|
|
398
458
|
})), jsxRuntime.exports.jsx("input", __assign({
|
|
399
459
|
type: "text",
|
|
400
|
-
className: "pr-2 py-1 focus-visible:outline-0 absolute top-0 bottom-0 left-1/2 right-0 ml-2"
|
|
460
|
+
className: "pr-2 py-1 focus-visible:outline-0 absolute top-0 bottom-0 left-1/2 right-0 ml-2 border-0 focus:border-0"
|
|
401
461
|
}, inputProps, {
|
|
402
462
|
value: value && value[fieldNames[1]],
|
|
403
463
|
onChange: handleChange(fieldNames[1]),
|
|
464
|
+
onFocus: handleFocus(fieldNames[1]),
|
|
465
|
+
onBlur: handleBlur(fieldNames[1]),
|
|
404
466
|
"data-testid": "text2-input"
|
|
405
467
|
}))]
|
|
406
468
|
})), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
|
|
@@ -435,7 +497,7 @@ var InputFieldSplit = function InputFieldSplit(_a) {
|
|
|
435
497
|
})
|
|
436
498
|
}))
|
|
437
499
|
}))]
|
|
438
|
-
});
|
|
500
|
+
}));
|
|
439
501
|
};
|
|
440
502
|
|
|
441
503
|
var TextAreaField = function TextAreaField(_a) {
|
|
@@ -447,9 +509,30 @@ var TextAreaField = function TextAreaField(_a) {
|
|
|
447
509
|
errorMsg = _c === void 0 ? "" : _c,
|
|
448
510
|
inputProps = _a.inputProps,
|
|
449
511
|
_d = _a.height,
|
|
450
|
-
height = _d === void 0 ?
|
|
451
|
-
|
|
452
|
-
|
|
512
|
+
height = _d === void 0 ? "h-32" : _d;
|
|
513
|
+
|
|
514
|
+
var _e = inputProps || {},
|
|
515
|
+
disabled = _e.disabled,
|
|
516
|
+
onFocus = _e.onFocus,
|
|
517
|
+
onBlur = _e.onBlur;
|
|
518
|
+
|
|
519
|
+
var _f = useState(false),
|
|
520
|
+
active = _f[0],
|
|
521
|
+
setActive = _f[1];
|
|
522
|
+
|
|
523
|
+
var handleFocus = function handleFocus(event) {
|
|
524
|
+
setActive(true);
|
|
525
|
+
onFocus && onFocus(event);
|
|
526
|
+
};
|
|
527
|
+
|
|
528
|
+
var handleBlur = function handleBlur(event) {
|
|
529
|
+
setActive(false);
|
|
530
|
+
onBlur && onBlur(event);
|
|
531
|
+
};
|
|
532
|
+
|
|
533
|
+
return jsxRuntime.exports.jsxs("div", __assign({
|
|
534
|
+
className: "textfield"
|
|
535
|
+
}, {
|
|
453
536
|
children: [Boolean(label) && jsxRuntime.exports.jsx("div", __assign({
|
|
454
537
|
className: "text-Gray-700 mb-1"
|
|
455
538
|
}, {
|
|
@@ -464,11 +547,14 @@ var TextAreaField = function TextAreaField(_a) {
|
|
|
464
547
|
type: "Text md"
|
|
465
548
|
}, {
|
|
466
549
|
children: jsxRuntime.exports.jsx("div", __assign({
|
|
467
|
-
className: "flex border-1 overflow-hidden placeholder:text-Gray-500 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg ").concat(height, " ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error" : "hover:border-Primary-300 hover:shadow-xs-primary"))
|
|
550
|
+
className: "flex border-1 overflow-hidden placeholder:text-Gray-500 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg ").concat(height, " ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error ".concat(active && "shadow-xs-error") : "hover:border-Primary-300 hover:shadow-xs-primary ".concat(active && "border-Primary-300 shadow-xs-primary")))
|
|
468
551
|
}, {
|
|
469
552
|
children: jsxRuntime.exports.jsx("textarea", __assign({
|
|
470
|
-
className: "flex-1 px-2 py-2 focus-visible:outline-0"
|
|
471
|
-
}, inputProps
|
|
553
|
+
className: "flex-1 px-2 py-2 focus-visible:outline-0 border-0 focus:border-0"
|
|
554
|
+
}, inputProps, {
|
|
555
|
+
onFocus: handleFocus,
|
|
556
|
+
onBlur: handleBlur
|
|
557
|
+
}))
|
|
472
558
|
}))
|
|
473
559
|
})), (Boolean(hint_text) || Boolean(errorMsg)) && jsxRuntime.exports.jsx("div", __assign({
|
|
474
560
|
className: "".concat(errorMsg ? "text-Error-500" : "text-Gray-500 mt-1")
|
|
@@ -484,7 +570,7 @@ var TextAreaField = function TextAreaField(_a) {
|
|
|
484
570
|
})
|
|
485
571
|
}))
|
|
486
572
|
}))]
|
|
487
|
-
});
|
|
573
|
+
}));
|
|
488
574
|
};
|
|
489
575
|
|
|
490
576
|
var getSizeClassName$6 = function getSizeClassName(size) {
|
|
@@ -523,8 +609,30 @@ var OtpField = function OtpField(_a) {
|
|
|
523
609
|
_e = _a.errorMsg,
|
|
524
610
|
errorMsg = _e === void 0 ? "" : _e,
|
|
525
611
|
inputProps = _a.inputProps;
|
|
526
|
-
|
|
527
|
-
|
|
612
|
+
|
|
613
|
+
var _f = inputProps || {},
|
|
614
|
+
disabled = _f.disabled,
|
|
615
|
+
value = _f.value,
|
|
616
|
+
onFocus = _f.onFocus,
|
|
617
|
+
onBlur = _f.onBlur;
|
|
618
|
+
|
|
619
|
+
var _g = useState(false),
|
|
620
|
+
active = _g[0],
|
|
621
|
+
setActive = _g[1];
|
|
622
|
+
|
|
623
|
+
var handleFocus = function handleFocus(event) {
|
|
624
|
+
setActive(true);
|
|
625
|
+
onFocus && onFocus(event);
|
|
626
|
+
};
|
|
627
|
+
|
|
628
|
+
var handleBlur = function handleBlur(event) {
|
|
629
|
+
setActive(false);
|
|
630
|
+
onBlur && onBlur(event);
|
|
631
|
+
};
|
|
632
|
+
|
|
633
|
+
return jsxRuntime.exports.jsxs("div", __assign({
|
|
634
|
+
className: "otpfield"
|
|
635
|
+
}, {
|
|
528
636
|
children: [Boolean(label) && jsxRuntime.exports.jsx("div", __assign({
|
|
529
637
|
className: "text-Gray-700 mb-1"
|
|
530
638
|
}, {
|
|
@@ -539,9 +647,12 @@ var OtpField = function OtpField(_a) {
|
|
|
539
647
|
}, {
|
|
540
648
|
children: [jsxRuntime.exports.jsx("input", __assign({
|
|
541
649
|
type: "text",
|
|
542
|
-
className: "absolute top-0 bottom-0 left-0 right-0 opacity-0",
|
|
650
|
+
className: "absolute top-0 bottom-0 left-0 right-0 opacity-0 border-0 focus:border-0",
|
|
543
651
|
maxLength: digits
|
|
544
|
-
}, inputProps
|
|
652
|
+
}, inputProps, {
|
|
653
|
+
onFocus: handleFocus,
|
|
654
|
+
onBlur: handleBlur
|
|
655
|
+
})), jsxRuntime.exports.jsx("div", __assign({
|
|
545
656
|
className: "flex pointer-events-none"
|
|
546
657
|
}, {
|
|
547
658
|
children: Array(digits).fill("").map(function (_, index) {
|
|
@@ -558,7 +669,7 @@ var OtpField = function OtpField(_a) {
|
|
|
558
669
|
children: "-"
|
|
559
670
|
}))
|
|
560
671
|
})), jsxRuntime.exports.jsx("div", __assign({
|
|
561
|
-
className: "flex items-center justify-center border-1 border-Gray-300 rounded-lg mx-1 ".concat(getSizeClassName$6(size))
|
|
672
|
+
className: "flex items-center justify-center border-1 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " ").concat(disabled ? "bg-Gray-50" : typeof value === "string" && value.length === index && "bg-White ".concat(errorMsg ? "hover:shadow-xs-error ".concat(active && "shadow-xs-error") : "hover:border-Primary-300 hover:shadow-xs-primary ".concat(active && "border-Primary-300 shadow-xs-primary")), " rounded-lg mx-1 ").concat(getSizeClassName$6(size))
|
|
562
673
|
}, {
|
|
563
674
|
children: typeof value === "string" && !!value[index] ? jsxRuntime.exports.jsx(Typography, __assign({
|
|
564
675
|
type: size === "lg" ? "Display xl" : "Display lg",
|
|
@@ -593,7 +704,7 @@ var OtpField = function OtpField(_a) {
|
|
|
593
704
|
})
|
|
594
705
|
}))
|
|
595
706
|
}))]
|
|
596
|
-
});
|
|
707
|
+
}));
|
|
597
708
|
};
|
|
598
709
|
|
|
599
710
|
var ButtonGroups = function ButtonGroups(_a) {
|
|
@@ -1862,6 +1973,10 @@ var getHierarchyClassName = function getHierarchyClassName(hierarchy, disabled)
|
|
|
1862
1973
|
return disabled ? "bg-White text-Gray-300 border-solid border border-Gray-200" //Disabled Secondary-Grey Button
|
|
1863
1974
|
: "bg-white border-solid border border-Gray-300 active:bg-white hover:bg-Gray-25 focus shadow-xs text-Gray-700";
|
|
1864
1975
|
|
|
1976
|
+
case "Secondary-Grey-Dashed":
|
|
1977
|
+
return disabled ? "bg-White text-Gray-300 border-solid border border-Gray-200" //Disabled Secondary-Grey Button
|
|
1978
|
+
: "bg-Gray-25 border-dashed border border-Gray-200 focus shadow-xs text-Gray-700";
|
|
1979
|
+
|
|
1865
1980
|
case "Tertiary":
|
|
1866
1981
|
return disabled ? "text-Gray-300" //Disabled Tertiary Button
|
|
1867
1982
|
: "active:bg-white hover:bg-Primary-50 focus text-Primary-700";
|
|
@@ -3936,10 +4051,10 @@ var getPostionClassName = function getPostionClassName(directionClass) {
|
|
|
3936
4051
|
return "w-16 -mr-16";
|
|
3937
4052
|
|
|
3938
4053
|
case "righttrue":
|
|
3939
|
-
return "w-72
|
|
4054
|
+
return "w-72";
|
|
3940
4055
|
|
|
3941
4056
|
case "rightfalse":
|
|
3942
|
-
return "w-16
|
|
4057
|
+
return "w-16";
|
|
3943
4058
|
|
|
3944
4059
|
default:
|
|
3945
4060
|
return "w-72 -ml-72 left-full";
|
|
@@ -3956,7 +4071,7 @@ var CollapsibleCard = function CollapsibleCard(props) {
|
|
|
3956
4071
|
children = _a.children,
|
|
3957
4072
|
footer = _a.footer,
|
|
3958
4073
|
_d = _a.icon,
|
|
3959
|
-
icon = _d === void 0 ? "
|
|
4074
|
+
icon = _d === void 0 ? "Right" : _d,
|
|
3960
4075
|
_e = _a.openIcon,
|
|
3961
4076
|
openIcon = _e === void 0 ? "hx_add" : _e,
|
|
3962
4077
|
_f = _a.closeIcon,
|
|
@@ -3994,20 +4109,20 @@ var CollapsibleCard = function CollapsibleCard(props) {
|
|
|
3994
4109
|
};
|
|
3995
4110
|
|
|
3996
4111
|
var getIconClass = function getIconClass() {
|
|
3997
|
-
var clsName =
|
|
4112
|
+
var clsName = "mt-2 absolute cursor-pointer items-center text-center right-2 top-0";
|
|
3998
4113
|
|
|
3999
4114
|
if (disabled) {
|
|
4000
|
-
clsName +=
|
|
4115
|
+
clsName += " hidden";
|
|
4001
4116
|
}
|
|
4002
4117
|
|
|
4003
|
-
if (direction ===
|
|
4004
|
-
clsName +=
|
|
4118
|
+
if (direction === "right") {
|
|
4119
|
+
clsName += " hx_right";
|
|
4005
4120
|
} else {
|
|
4006
|
-
clsName +=
|
|
4121
|
+
clsName += " hx_left";
|
|
4007
4122
|
}
|
|
4008
4123
|
|
|
4009
4124
|
if (!active) {
|
|
4010
|
-
clsName +=
|
|
4125
|
+
clsName += " rotate-180 overflow-hidden";
|
|
4011
4126
|
}
|
|
4012
4127
|
|
|
4013
4128
|
return clsName;
|
|
@@ -4020,15 +4135,21 @@ var CollapsibleCard = function CollapsibleCard(props) {
|
|
|
4020
4135
|
children: [jsxRuntime.exports.jsxs("div", __assign({
|
|
4021
4136
|
className: "flex flex-1 flex-row items-center"
|
|
4022
4137
|
}, {
|
|
4023
|
-
children: [jsxRuntime.exports.jsx(
|
|
4024
|
-
|
|
4025
|
-
|
|
4026
|
-
|
|
4027
|
-
|
|
4028
|
-
|
|
4029
|
-
|
|
4030
|
-
|
|
4031
|
-
|
|
4138
|
+
children: [jsxRuntime.exports.jsx(Tooltip, __assign({
|
|
4139
|
+
variant: "Top",
|
|
4140
|
+
text: active ? "Click here to collapse" : "Click here to expand",
|
|
4141
|
+
theme: "light"
|
|
4142
|
+
}, {
|
|
4143
|
+
children: jsxRuntime.exports.jsx(Button, {
|
|
4144
|
+
onClick: OnButtonClick,
|
|
4145
|
+
hierarchy: "Secondary-Grey-Dashed",
|
|
4146
|
+
size: "lg",
|
|
4147
|
+
icon: icon,
|
|
4148
|
+
iconFile: active ? closeIcon : openIcon,
|
|
4149
|
+
textField: label,
|
|
4150
|
+
disabled: false
|
|
4151
|
+
})
|
|
4152
|
+
})), active && headerRightChildren]
|
|
4032
4153
|
})), jsxRuntime.exports.jsxs("div", __assign({
|
|
4033
4154
|
"data-testid": "animationDiv",
|
|
4034
4155
|
onAnimationEnd: function onAnimationEnd() {
|
|
@@ -4135,12 +4256,14 @@ var RadioBtn = function RadioBtn(_a) {
|
|
|
4135
4256
|
id = _a.id,
|
|
4136
4257
|
text = _a.text,
|
|
4137
4258
|
secondaryText = _a.secondaryText;
|
|
4138
|
-
return jsxRuntime.exports.jsx("div", {
|
|
4259
|
+
return jsxRuntime.exports.jsx("div", __assign({
|
|
4260
|
+
className: "radiobutton"
|
|
4261
|
+
}, {
|
|
4139
4262
|
children: jsxRuntime.exports.jsxs("div", __assign({
|
|
4140
4263
|
className: "p-4 flex flex-row flex-1 "
|
|
4141
4264
|
}, {
|
|
4142
4265
|
children: [jsxRuntime.exports.jsx("input", {
|
|
4143
|
-
className: "sr-only peer ",
|
|
4266
|
+
className: "sr-only peer border-0 focus:border-0",
|
|
4144
4267
|
type: "radio",
|
|
4145
4268
|
value: "first",
|
|
4146
4269
|
name: "radioBtn",
|
|
@@ -4169,7 +4292,7 @@ var RadioBtn = function RadioBtn(_a) {
|
|
|
4169
4292
|
}))]
|
|
4170
4293
|
}))]
|
|
4171
4294
|
}))
|
|
4172
|
-
});
|
|
4295
|
+
}));
|
|
4173
4296
|
};
|
|
4174
4297
|
|
|
4175
4298
|
var getSizeClassName$1 = function getSizeClassName(size) {
|
|
@@ -4656,7 +4779,9 @@ var Slider = function Slider(_a) {
|
|
|
4656
4779
|
progressRef.current.style.right = 100 - maxValue + "%";
|
|
4657
4780
|
}
|
|
4658
4781
|
}, [minValue, maxValue, max, step]);
|
|
4659
|
-
return jsxRuntime.exports.jsx("div", {
|
|
4782
|
+
return jsxRuntime.exports.jsx("div", __assign({
|
|
4783
|
+
className: "slider"
|
|
4784
|
+
}, {
|
|
4660
4785
|
children: jsxRuntime.exports.jsxs("div", __assign({
|
|
4661
4786
|
className: "flex flex-col w-96 px-8 py-4"
|
|
4662
4787
|
}, {
|
|
@@ -4703,7 +4828,7 @@ var Slider = function Slider(_a) {
|
|
|
4703
4828
|
step: 25,
|
|
4704
4829
|
max: max,
|
|
4705
4830
|
value: minValue,
|
|
4706
|
-
className: "range-min absolute w-full -top-2 h-2 bg-transparent appearance-none bg-Black/0 accent-White"
|
|
4831
|
+
className: "range-min absolute w-full -top-2 h-2 bg-transparent appearance-none bg-Black/0 accent-White border-0 focus:border-0"
|
|
4707
4832
|
}), jsxRuntime.exports.jsx("input", {
|
|
4708
4833
|
onChange: function onChange(e) {
|
|
4709
4834
|
setMaxValue(e.target.value);
|
|
@@ -4713,12 +4838,12 @@ var Slider = function Slider(_a) {
|
|
|
4713
4838
|
step: 25,
|
|
4714
4839
|
max: max,
|
|
4715
4840
|
value: maxValue,
|
|
4716
|
-
className: "range-max absolute w-full -top-2 h-2 bg-transparent appearance-none bg-Black/0 accent-White "
|
|
4841
|
+
className: "range-max absolute w-full -top-2 h-2 bg-transparent appearance-none bg-Black/0 accent-White border-0 focus:border-0"
|
|
4717
4842
|
})]
|
|
4718
4843
|
}))]
|
|
4719
4844
|
}))]
|
|
4720
4845
|
}))
|
|
4721
|
-
});
|
|
4846
|
+
}));
|
|
4722
4847
|
};
|
|
4723
4848
|
|
|
4724
4849
|
// md-Medium,
|
|
@@ -4965,11 +5090,10 @@ var AddSuggestion = function AddSuggestion(_a) {
|
|
|
4965
5090
|
errorMsg = _h === void 0 ? "" : _h,
|
|
4966
5091
|
inputProps = _a.inputProps,
|
|
4967
5092
|
inputFieldInputProps = _a.inputFieldInputProps,
|
|
4968
|
-
options = _a.options
|
|
4969
|
-
|
|
4970
|
-
|
|
4971
|
-
|
|
4972
|
-
setValue = _j[1];
|
|
5093
|
+
options = _a.options,
|
|
5094
|
+
_j = _a.suggestionValue,
|
|
5095
|
+
suggestionValue = _j === void 0 ? "" : _j,
|
|
5096
|
+
handleSuggestionValChange = _a.handleSuggestionValChange;
|
|
4973
5097
|
|
|
4974
5098
|
var _k = useState(false),
|
|
4975
5099
|
showDropdown = _k[0],
|
|
@@ -4987,7 +5111,7 @@ var AddSuggestion = function AddSuggestion(_a) {
|
|
|
4987
5111
|
return options.label.toLowerCase().includes(e.target.value.split(", ").pop().toLowerCase());
|
|
4988
5112
|
} // last keyboad input after ,
|
|
4989
5113
|
);
|
|
4990
|
-
|
|
5114
|
+
handleSuggestionValChange && handleSuggestionValChange(e.target.value);
|
|
4991
5115
|
setSuggestionArr(sug);
|
|
4992
5116
|
}
|
|
4993
5117
|
};
|
|
@@ -4999,7 +5123,7 @@ var AddSuggestion = function AddSuggestion(_a) {
|
|
|
4999
5123
|
};
|
|
5000
5124
|
|
|
5001
5125
|
var handleSuggestionClick = function handleSuggestionClick(selectedValue) {
|
|
5002
|
-
var debris =
|
|
5126
|
+
var debris = suggestionValue.split(", "); //explode string into array of strings indexed by /, |. |\s /
|
|
5003
5127
|
|
|
5004
5128
|
debris.pop(); //pop last element off the array (which we didn't want)
|
|
5005
5129
|
|
|
@@ -5012,7 +5136,7 @@ var AddSuggestion = function AddSuggestion(_a) {
|
|
|
5012
5136
|
res = selectedValue.label;
|
|
5013
5137
|
}
|
|
5014
5138
|
|
|
5015
|
-
|
|
5139
|
+
handleSuggestionValChange && handleSuggestionValChange(res);
|
|
5016
5140
|
onSuggestionClick(selectedValue);
|
|
5017
5141
|
}; // Attaching the previous event with UseEffect hook
|
|
5018
5142
|
|
|
@@ -5041,7 +5165,7 @@ var AddSuggestion = function AddSuggestion(_a) {
|
|
|
5041
5165
|
errorMsg: errorMsg,
|
|
5042
5166
|
inputProps: __assign(__assign({}, inputFieldInputProps), {
|
|
5043
5167
|
onChange: changeHandler,
|
|
5044
|
-
value:
|
|
5168
|
+
value: suggestionValue,
|
|
5045
5169
|
onFocus: function onFocus() {
|
|
5046
5170
|
return setShowDropdown(true);
|
|
5047
5171
|
}
|
|
@@ -5054,7 +5178,7 @@ var AddSuggestion = function AddSuggestion(_a) {
|
|
|
5054
5178
|
height: height,
|
|
5055
5179
|
inputProps: __assign(__assign({}, inputProps), {
|
|
5056
5180
|
onChange: changeHandler,
|
|
5057
|
-
value:
|
|
5181
|
+
value: suggestionValue,
|
|
5058
5182
|
onFocus: function onFocus() {
|
|
5059
5183
|
return setShowDropdown(true);
|
|
5060
5184
|
}
|
|
@@ -16628,6 +16752,10 @@ var DatePicker = function DatePicker(_a) {
|
|
|
16628
16752
|
selected = _d[0],
|
|
16629
16753
|
setSelected = _d[1];
|
|
16630
16754
|
|
|
16755
|
+
useEffect(function () {
|
|
16756
|
+
if (selectDate) setDate(selectDate);
|
|
16757
|
+
}, [selectDate]);
|
|
16758
|
+
|
|
16631
16759
|
var handleSelect = function handleSelect(date) {
|
|
16632
16760
|
setDate(date);
|
|
16633
16761
|
setSelected(!selected);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TextAreaFieldProps } from "../types";
|
|
3
|
-
declare const TextAreaField: ({ label, hint_text_icon, hint_text, errorMsg, inputProps, height }: TextAreaFieldProps) => JSX.Element;
|
|
3
|
+
declare const TextAreaField: ({ label, hint_text_icon, hint_text, errorMsg, inputProps, height, }: TextAreaFieldProps) => JSX.Element;
|
|
4
4
|
export default TextAreaField;
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -85,7 +85,7 @@ export interface ProgressCircleProps extends React.DetailedHTMLProps<React.HTMLA
|
|
|
85
85
|
spinnerMode?: boolean;
|
|
86
86
|
progress: number;
|
|
87
87
|
}
|
|
88
|
-
type hierarchyType = "Primary" | "Secondary" | "Secondary-Grey" | "Tertiary" | "Tertiary-Grey" | "Link-Colour" | "Link-Grey";
|
|
88
|
+
type hierarchyType = "Primary" | "Secondary" | "Secondary-Grey" | "Secondary-Grey-Dashed" | "Tertiary" | "Tertiary-Grey" | "Link-Colour" | "Link-Grey";
|
|
89
89
|
type buttonSizeType = "sm" | "md" | "lg" | "xl" | "2xl";
|
|
90
90
|
type iconType = "No" | "Left" | "Right" | "Only";
|
|
91
91
|
export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
|
@@ -301,5 +301,7 @@ export interface AddSuggestionProps {
|
|
|
301
301
|
inputFieldInputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
|
302
302
|
onSuggestionClick?: (selectedValue: any) => void;
|
|
303
303
|
options?: Array<DropdownItemsProps>;
|
|
304
|
+
suggestionValue?: string;
|
|
305
|
+
handleSuggestionValChange?: (value: any) => void;
|
|
304
306
|
}
|
|
305
307
|
export {};
|