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
- var disabled = (inputProps || {}).disabled;
207
- return jsxRuntime.exports.jsxs("div", {
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)), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
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
- _b = _a.start_icon,
306
- start_icon = _b === void 0 ? "" : _b,
307
- _c = _a.end_icon,
308
- end_icon = _c === void 0 ? "" : _c,
309
- _d = _a.hint_text_icon,
310
- hint_text_icon = _d === void 0 ? "" : _d,
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
- var disabled = (inputProps || {}).disabled;
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
- return jsxRuntime.exports.jsxs("div", {
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 ? 'h-32' : _d;
451
- var disabled = (inputProps || {}).disabled;
452
- return jsxRuntime.exports.jsxs("div", {
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
- var value = (inputProps || {}).value;
527
- return jsxRuntime.exports.jsxs("div", {
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)), jsxRuntime.exports.jsx("div", __assign({
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 -ml-36 ";
4054
+ return "w-72";
3940
4055
 
3941
4056
  case "rightfalse":
3942
- return "w-16 -ml-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 ? "Left" : _d,
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 = 'mt-2 absolute cursor-pointer items-center text-center right-2 top-0';
4112
+ var clsName = "mt-2 absolute cursor-pointer items-center text-center right-2 top-0";
3998
4113
 
3999
4114
  if (disabled) {
4000
- clsName += ' hidden';
4115
+ clsName += " hidden";
4001
4116
  }
4002
4117
 
4003
- if (direction === 'right') {
4004
- clsName += ' hx_right';
4118
+ if (direction === "right") {
4119
+ clsName += " hx_right";
4005
4120
  } else {
4006
- clsName += ' hx_left';
4121
+ clsName += " hx_left";
4007
4122
  }
4008
4123
 
4009
4124
  if (!active) {
4010
- clsName += ' rotate-180 overflow-hidden';
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(Button, {
4024
- onClick: OnButtonClick,
4025
- hierarchy: "Secondary",
4026
- size: "lg",
4027
- icon: icon,
4028
- iconFile: active ? closeIcon : openIcon,
4029
- textField: label,
4030
- disabled: false
4031
- }), active && headerRightChildren]
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
- var _j = useState(inputProps && typeof inputProps.value === "string" ? inputProps.value : ""),
4971
- value = _j[0],
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
- setValue(e.target.value);
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 = value.split(", "); //explode string into array of strings indexed by /, |. |\s /
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
- setValue(res);
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: 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: 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;
@@ -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 {};
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "frontend",
10
10
  "healthplix"
11
11
  ],
12
- "version": "1.0.24",
12
+ "version": "1.0.26",
13
13
  "main": "dist/esm/index.js",
14
14
  "module": "dist/esm/index.js",
15
15
  "types": "dist/esm/index.d.ts",