@geoinsight/react-components 0.6.7 → 0.6.8

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/cjs/index.css +103 -102
  2. package/dist/cjs/index.js +76 -25
  3. package/dist/esm/index.css +103 -102
  4. package/dist/esm/index.js +75 -27
  5. package/package.json +1 -1
package/dist/cjs/index.css CHANGED
@@ -387,57 +387,89 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
387
387
  border: 3px solid var(--color-danger);
388
388
  outline: none;
389
389
  }
390
- .loading {
390
+ .textarea {
391
+ margin-bottom: var(--spacing-8);
392
+ position: relative;
393
+ width: 100%;
394
+ }
395
+
396
+ .textarea__header {
391
397
  align-items: center;
392
398
  display: flex;
393
- flex-direction: column;
394
- height: 100%;
395
- justify-content: center;;
396
- position: relative;
399
+ justify-content: space-between;
400
+ width: 100%;
397
401
  }
398
402
 
399
- .modal-overlay {
400
- background: rgba(0, 0, 0, 0.3);
401
- bottom: 0;
402
- left: 0;
403
- position: fixed;
404
- right: 0;
405
- top: 0;
403
+ .textarea__header--error {
404
+ font-size: 12px;
405
+ color: var(--color-danger);
406
+
406
407
  }
407
408
 
408
- .modal {
409
- background: white;
409
+ .textarea__input {
410
+ background-color: var(--color-white);
411
+ box-sizing: border-box;
410
412
  border-radius: var(--spacing-8);
411
- border: 1px solid var(--color-neutral-600);
413
+ border: 2px solid var(--color-primary);
414
+ cursor: text;
412
415
  color: var(--color-black);
413
- left: 50%;
414
- padding: var(--spacing-4) var(--spacing-4);
415
- position: absolute;
416
- right: var(--spacing-16);
417
- top: 50%;
418
- transform: translate(-50%, -50%);
419
- z-index: 5;
416
+ outline: none;
417
+ padding: var(--spacing-8) var(--spacing-16);
418
+ resize: vertical;
419
+ width: 100%;
420
420
  }
421
421
 
422
- .modal__close {
422
+ .textarea__input--error {
423
+ border: 3px solid var(--color-danger);
424
+ }
425
+
426
+ .textarea__input:enabled:hover {
427
+ box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
428
+ transition: var(--transition-box-shadow-cubic-bezier);
429
+ }
430
+
431
+ .textarea__input:disabled {
432
+ opacity: 0.5;
433
+ }
434
+
435
+ .textarea__button {
436
+ background: var(--color-primary);
437
+ border: 2px solid var(--color-secondary);
438
+ box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.25);
439
+ border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
440
+ bottom: 0;
441
+ cursor: pointer;
442
+ left: 0;
443
+ padding-bottom: -20px;
423
444
  position: absolute;
424
- right: calc(var(--spacing-16) * -1);
425
- top: calc(var(--spacing-16) * -1);
426
- z-index: 5;
445
+ width: 100%;
427
446
  }
428
447
 
429
- .modal__content {
430
- border: 1px solid var(--color-neutral-100);
431
- border-radius: var(--spacing-8);
432
- display: flex;
433
- flex-direction: column;
434
- gap: var(--spacing-16);
435
- padding: 0 var(--spacing-16);
448
+ .textarea__button--error {
449
+ background: var(--color-danger) !important;
450
+ border: 3px solid var(--color-danger);
436
451
  }
437
452
 
438
- .modal__footer {
439
- padding-bottom: var(--spacing-16);
453
+ .textarea__button > svg {
454
+ color: var(--color-neutral-100);
440
455
  }
456
+
457
+ .textarea__button:disabled {
458
+ cursor: unset;
459
+ opacity: 0.5;
460
+ pointer-events: none;
461
+ }
462
+
463
+ .textarea__button:enabled:hover {
464
+ background: var(--color-secondary);
465
+ color: var(--color-neutral-100);
466
+ }
467
+
468
+ .textarea__button--show {
469
+ background: var(--color-primary-700);
470
+ color: var(--color-neutral-100);
471
+ }
472
+
441
473
  .select-group {
442
474
  display: flex;
443
475
  flex-direction: column;
@@ -514,85 +546,54 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
514
546
  outline: none;
515
547
  }
516
548
 
517
- .textarea {
518
- margin-bottom: var(--spacing-8);
519
- position: relative;
520
- width: 100%;
521
- }
522
-
523
- .textarea__header {
549
+ .loading {
524
550
  align-items: center;
525
551
  display: flex;
526
- justify-content: space-between;
527
- width: 100%;
552
+ flex-direction: column;
553
+ height: 100%;
554
+ justify-content: center;;
555
+ position: relative;
528
556
  }
529
557
 
530
- .textarea__header--error {
531
- font-size: 12px;
532
- color: var(--color-danger);
533
-
558
+ .modal-overlay {
559
+ background: rgba(0, 0, 0, 0.3);
560
+ bottom: 0;
561
+ left: 0;
562
+ position: fixed;
563
+ right: 0;
564
+ top: 0;
534
565
  }
535
566
 
536
- .textarea__input {
537
- background-color: var(--color-white);
538
- box-sizing: border-box;
567
+ .modal {
568
+ background: white;
539
569
  border-radius: var(--spacing-8);
540
- border: 2px solid var(--color-primary);
541
- cursor: text;
570
+ border: 1px solid var(--color-neutral-600);
542
571
  color: var(--color-black);
543
- outline: none;
544
- padding: var(--spacing-8) var(--spacing-16);
545
- resize: vertical;
546
- width: 100%;
547
- }
548
-
549
- .textarea__input--error {
550
- border: 3px solid var(--color-danger);
551
- }
552
-
553
- .textarea__input:enabled:hover {
554
- box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
555
- transition: var(--transition-box-shadow-cubic-bezier);
556
- }
557
-
558
- .textarea__input:disabled {
559
- opacity: 0.5;
560
- }
561
-
562
- .textarea__button {
563
- background: var(--color-primary);
564
- border: 2px solid var(--color-secondary);
565
- box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.25);
566
- border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
567
- bottom: 0;
568
- cursor: pointer;
569
- left: 0;
570
- padding-bottom: -20px;
572
+ left: 50%;
573
+ padding: var(--spacing-4) var(--spacing-4);
571
574
  position: absolute;
572
- width: 100%;
573
- }
574
-
575
- .textarea__button--error {
576
- background: var(--color-danger) !important;
577
- border: 3px solid var(--color-danger);
578
- }
579
-
580
- .textarea__button > svg {
581
- color: var(--color-neutral-100);
575
+ right: var(--spacing-16);
576
+ top: 50%;
577
+ transform: translate(-50%, -50%);
578
+ z-index: 5;
582
579
  }
583
580
 
584
- .textarea__button:disabled {
585
- cursor: unset;
586
- opacity: 0.5;
587
- pointer-events: none;
581
+ .modal__close {
582
+ position: absolute;
583
+ right: calc(var(--spacing-16) * -1);
584
+ top: calc(var(--spacing-16) * -1);
585
+ z-index: 5;
588
586
  }
589
587
 
590
- .textarea__button:enabled:hover {
591
- background: var(--color-secondary);
592
- color: var(--color-neutral-100);
588
+ .modal__content {
589
+ border: 1px solid var(--color-neutral-100);
590
+ border-radius: var(--spacing-8);
591
+ display: flex;
592
+ flex-direction: column;
593
+ gap: var(--spacing-16);
594
+ padding: 0 var(--spacing-16);
593
595
  }
594
596
 
595
- .textarea__button--show {
596
- background: var(--color-primary-700);
597
- color: var(--color-neutral-100);
598
- }
597
+ .modal__footer {
598
+ padding-bottom: var(--spacing-16);
599
+ }
package/dist/cjs/index.js CHANGED
@@ -6,8 +6,8 @@ var clsx = require('clsx');
6
6
  var tfi = require('react-icons/tfi');
7
7
  var bs = require('react-icons/bs');
8
8
  var reactHookForm = require('react-hook-form');
9
- var io5 = require('react-icons/io5');
10
9
  var tb = require('react-icons/tb');
10
+ var io5 = require('react-icons/io5');
11
11
 
12
12
  let uniqueId = (function () {
13
13
  let num = 0;
@@ -209,12 +209,58 @@ function Input({ inputClassName = "", classNameGroup = "", error = {
209
209
  icon.className), children: icon.element }))] })] }));
210
210
  }
211
211
 
212
- function Loading({ img, children }) {
213
- return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
212
+ function FormInput({ name, isRequired, error, ...rest }) {
213
+ const { control } = reactHookForm.useFormContext();
214
+ return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
215
+ ...(isRequired
216
+ ? {
217
+ required: error?.message || "Field is required",
218
+ }
219
+ : {}),
220
+ }, render: ({ field, fieldState: { error } }) => {
221
+ return (jsxRuntime.jsx(Input, { isRequired: true, error: {
222
+ is: !!error,
223
+ message: error?.message,
224
+ }, ...field, ...rest }));
225
+ } }));
214
226
  }
215
227
 
216
- function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
217
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
228
+ function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, error = {
229
+ is: false,
230
+ message: "",
231
+ }, ...rest }) {
232
+ const ref = react.useRef();
233
+ const [isShow, setIsShow] = react.useState(false);
234
+ const handleClickToggle = () => {
235
+ if (ref && ref.current) {
236
+ if (isShow) {
237
+ ref.current.style.height = hideHeight;
238
+ }
239
+ else {
240
+ ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
241
+ }
242
+ setIsShow((prev) => !prev);
243
+ }
244
+ };
245
+ return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxRuntime.jsxs("div", { className: "textarea__header", children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), error && error.is && (jsxRuntime.jsx("span", { className: "textarea__header--error", children: error.message }))] }), jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", error.is && "textarea__input--error", textareaClassName), style: {
246
+ height: hasToggleButton ? hideHeight : showHeight,
247
+ }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("button", { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show", error.is && "textarea__button--error"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
248
+ }
249
+
250
+ function FormTextArea({ name, isRequired, error, ...rest }) {
251
+ const { control } = reactHookForm.useFormContext();
252
+ return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
253
+ ...(isRequired
254
+ ? {
255
+ required: error?.message || "Field is required",
256
+ }
257
+ : {}),
258
+ }, render: ({ field, fieldState: { error } }) => {
259
+ return (jsxRuntime.jsx(TextArea, { isRequired: true, error: {
260
+ is: !!error,
261
+ message: error?.message,
262
+ }, ...field, ...rest }));
263
+ } }));
218
264
  }
219
265
 
220
266
  function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue,
@@ -280,26 +326,28 @@ setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
280
326
  }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, autoComplete: "off", ...rest }), isOpen && (jsxRuntime.jsx("div", { className: "select__box", children: filteredOptions.map((option, index) => (jsxRuntime.jsx(Button, { type: "button", mode: "secondary", className: "select__option", name: option, onMouseDown: handleSelectChange, children: option }, `index-${index}`))) }))] }));
281
327
  }
282
328
 
283
- function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, error = {
284
- is: false,
285
- message: "",
286
- }, ...rest }) {
287
- const ref = react.useRef();
288
- const [isShow, setIsShow] = react.useState(false);
289
- const handleClickToggle = () => {
290
- if (ref && ref.current) {
291
- if (isShow) {
292
- ref.current.style.height = hideHeight;
293
- }
294
- else {
295
- ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
296
- }
297
- setIsShow((prev) => !prev);
298
- }
299
- };
300
- return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxRuntime.jsxs("div", { className: "textarea__header", children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), error && error.is && (jsxRuntime.jsx("span", { className: "textarea__header--error", children: error.message }))] }), jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", error.is && "textarea__input--error", textareaClassName), style: {
301
- height: hasToggleButton ? hideHeight : showHeight,
302
- }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("button", { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show", error.is && "textarea__button--error"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
329
+ function FormSelect({ name, isRequired, error, ...rest }) {
330
+ const { control, setValue, clearErrors } = reactHookForm.useFormContext();
331
+ return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
332
+ ...(isRequired
333
+ ? {
334
+ required: error?.message || "Field is required",
335
+ }
336
+ : {}),
337
+ }, render: ({ field: { onBlur, ...restField }, fieldState: { error } }) => {
338
+ return (jsxRuntime.jsx(Select, { isRequired: true, error: {
339
+ is: !!error,
340
+ message: error?.message,
341
+ }, setFormSelected: setValue, clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
342
+ } }));
343
+ }
344
+
345
+ function Loading({ img, children }) {
346
+ return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
347
+ }
348
+
349
+ function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
350
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
303
351
  }
304
352
 
305
353
  const LoadingContext = react.createContext(undefined);
@@ -429,6 +477,9 @@ exports.AccordionContent = AccordionContent;
429
477
  exports.AccordionItem = AccordionItem;
430
478
  exports.Button = Button;
431
479
  exports.Form = Form;
480
+ exports.FormInput = FormInput;
481
+ exports.FormSelect = FormSelect;
482
+ exports.FormTextArea = FormTextArea;
432
483
  exports.Input = Input;
433
484
  exports.Loading = Loading;
434
485
  exports.LoadingContext = LoadingContext;
package/dist/esm/index.css CHANGED
@@ -387,57 +387,89 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
387
387
  border: 3px solid var(--color-danger);
388
388
  outline: none;
389
389
  }
390
- .loading {
390
+ .textarea {
391
+ margin-bottom: var(--spacing-8);
392
+ position: relative;
393
+ width: 100%;
394
+ }
395
+
396
+ .textarea__header {
391
397
  align-items: center;
392
398
  display: flex;
393
- flex-direction: column;
394
- height: 100%;
395
- justify-content: center;;
396
- position: relative;
399
+ justify-content: space-between;
400
+ width: 100%;
397
401
  }
398
402
 
399
- .modal-overlay {
400
- background: rgba(0, 0, 0, 0.3);
401
- bottom: 0;
402
- left: 0;
403
- position: fixed;
404
- right: 0;
405
- top: 0;
403
+ .textarea__header--error {
404
+ font-size: 12px;
405
+ color: var(--color-danger);
406
+
406
407
  }
407
408
 
408
- .modal {
409
- background: white;
409
+ .textarea__input {
410
+ background-color: var(--color-white);
411
+ box-sizing: border-box;
410
412
  border-radius: var(--spacing-8);
411
- border: 1px solid var(--color-neutral-600);
413
+ border: 2px solid var(--color-primary);
414
+ cursor: text;
412
415
  color: var(--color-black);
413
- left: 50%;
414
- padding: var(--spacing-4) var(--spacing-4);
415
- position: absolute;
416
- right: var(--spacing-16);
417
- top: 50%;
418
- transform: translate(-50%, -50%);
419
- z-index: 5;
416
+ outline: none;
417
+ padding: var(--spacing-8) var(--spacing-16);
418
+ resize: vertical;
419
+ width: 100%;
420
420
  }
421
421
 
422
- .modal__close {
422
+ .textarea__input--error {
423
+ border: 3px solid var(--color-danger);
424
+ }
425
+
426
+ .textarea__input:enabled:hover {
427
+ box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
428
+ transition: var(--transition-box-shadow-cubic-bezier);
429
+ }
430
+
431
+ .textarea__input:disabled {
432
+ opacity: 0.5;
433
+ }
434
+
435
+ .textarea__button {
436
+ background: var(--color-primary);
437
+ border: 2px solid var(--color-secondary);
438
+ box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.25);
439
+ border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
440
+ bottom: 0;
441
+ cursor: pointer;
442
+ left: 0;
443
+ padding-bottom: -20px;
423
444
  position: absolute;
424
- right: calc(var(--spacing-16) * -1);
425
- top: calc(var(--spacing-16) * -1);
426
- z-index: 5;
445
+ width: 100%;
427
446
  }
428
447
 
429
- .modal__content {
430
- border: 1px solid var(--color-neutral-100);
431
- border-radius: var(--spacing-8);
432
- display: flex;
433
- flex-direction: column;
434
- gap: var(--spacing-16);
435
- padding: 0 var(--spacing-16);
448
+ .textarea__button--error {
449
+ background: var(--color-danger) !important;
450
+ border: 3px solid var(--color-danger);
436
451
  }
437
452
 
438
- .modal__footer {
439
- padding-bottom: var(--spacing-16);
453
+ .textarea__button > svg {
454
+ color: var(--color-neutral-100);
440
455
  }
456
+
457
+ .textarea__button:disabled {
458
+ cursor: unset;
459
+ opacity: 0.5;
460
+ pointer-events: none;
461
+ }
462
+
463
+ .textarea__button:enabled:hover {
464
+ background: var(--color-secondary);
465
+ color: var(--color-neutral-100);
466
+ }
467
+
468
+ .textarea__button--show {
469
+ background: var(--color-primary-700);
470
+ color: var(--color-neutral-100);
471
+ }
472
+
441
473
  .select-group {
442
474
  display: flex;
443
475
  flex-direction: column;
@@ -514,85 +546,54 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
514
546
  outline: none;
515
547
  }
516
548
 
517
- .textarea {
518
- margin-bottom: var(--spacing-8);
519
- position: relative;
520
- width: 100%;
521
- }
522
-
523
- .textarea__header {
549
+ .loading {
524
550
  align-items: center;
525
551
  display: flex;
526
- justify-content: space-between;
527
- width: 100%;
552
+ flex-direction: column;
553
+ height: 100%;
554
+ justify-content: center;;
555
+ position: relative;
528
556
  }
529
557
 
530
- .textarea__header--error {
531
- font-size: 12px;
532
- color: var(--color-danger);
533
-
558
+ .modal-overlay {
559
+ background: rgba(0, 0, 0, 0.3);
560
+ bottom: 0;
561
+ left: 0;
562
+ position: fixed;
563
+ right: 0;
564
+ top: 0;
534
565
  }
535
566
 
536
- .textarea__input {
537
- background-color: var(--color-white);
538
- box-sizing: border-box;
567
+ .modal {
568
+ background: white;
539
569
  border-radius: var(--spacing-8);
540
- border: 2px solid var(--color-primary);
541
- cursor: text;
570
+ border: 1px solid var(--color-neutral-600);
542
571
  color: var(--color-black);
543
- outline: none;
544
- padding: var(--spacing-8) var(--spacing-16);
545
- resize: vertical;
546
- width: 100%;
547
- }
548
-
549
- .textarea__input--error {
550
- border: 3px solid var(--color-danger);
551
- }
552
-
553
- .textarea__input:enabled:hover {
554
- box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
555
- transition: var(--transition-box-shadow-cubic-bezier);
556
- }
557
-
558
- .textarea__input:disabled {
559
- opacity: 0.5;
560
- }
561
-
562
- .textarea__button {
563
- background: var(--color-primary);
564
- border: 2px solid var(--color-secondary);
565
- box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.25);
566
- border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
567
- bottom: 0;
568
- cursor: pointer;
569
- left: 0;
570
- padding-bottom: -20px;
572
+ left: 50%;
573
+ padding: var(--spacing-4) var(--spacing-4);
571
574
  position: absolute;
572
- width: 100%;
573
- }
574
-
575
- .textarea__button--error {
576
- background: var(--color-danger) !important;
577
- border: 3px solid var(--color-danger);
578
- }
579
-
580
- .textarea__button > svg {
581
- color: var(--color-neutral-100);
575
+ right: var(--spacing-16);
576
+ top: 50%;
577
+ transform: translate(-50%, -50%);
578
+ z-index: 5;
582
579
  }
583
580
 
584
- .textarea__button:disabled {
585
- cursor: unset;
586
- opacity: 0.5;
587
- pointer-events: none;
581
+ .modal__close {
582
+ position: absolute;
583
+ right: calc(var(--spacing-16) * -1);
584
+ top: calc(var(--spacing-16) * -1);
585
+ z-index: 5;
588
586
  }
589
587
 
590
- .textarea__button:enabled:hover {
591
- background: var(--color-secondary);
592
- color: var(--color-neutral-100);
588
+ .modal__content {
589
+ border: 1px solid var(--color-neutral-100);
590
+ border-radius: var(--spacing-8);
591
+ display: flex;
592
+ flex-direction: column;
593
+ gap: var(--spacing-16);
594
+ padding: 0 var(--spacing-16);
593
595
  }
594
596
 
595
- .textarea__button--show {
596
- background: var(--color-primary-700);
597
- color: var(--color-neutral-100);
598
- }
597
+ .modal__footer {
598
+ padding-bottom: var(--spacing-16);
599
+ }
package/dist/esm/index.js CHANGED
@@ -3,9 +3,9 @@ import { Children, isValidElement, cloneElement, createContext, useMemo, useStat
3
3
  import clsx from 'clsx';
4
4
  import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
5
5
  import { BsCheckCircleFill, BsXCircleFill } from 'react-icons/bs';
6
- import { useForm, FormProvider } from 'react-hook-form';
7
- import { IoClose } from 'react-icons/io5';
6
+ import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
8
7
  import { TbArrowsDiagonal2 } from 'react-icons/tb';
8
+ import { IoClose } from 'react-icons/io5';
9
9
 
10
10
  let uniqueId = (function () {
11
11
  let num = 0;
@@ -207,12 +207,58 @@ function Input({ inputClassName = "", classNameGroup = "", error = {
207
207
  icon.className), children: icon.element }))] })] }));
208
208
  }
209
209
 
210
- function Loading({ img, children }) {
211
- return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
210
+ function FormInput({ name, isRequired, error, ...rest }) {
211
+ const { control } = useFormContext();
212
+ return (jsx(Controller, { name: name, control: control, rules: {
213
+ ...(isRequired
214
+ ? {
215
+ required: error?.message || "Field is required",
216
+ }
217
+ : {}),
218
+ }, render: ({ field, fieldState: { error } }) => {
219
+ return (jsx(Input, { isRequired: true, error: {
220
+ is: !!error,
221
+ message: error?.message,
222
+ }, ...field, ...rest }));
223
+ } }));
212
224
  }
213
225
 
214
- function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
215
- return (jsxs(Fragment, { children: [jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
226
+ function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, error = {
227
+ is: false,
228
+ message: "",
229
+ }, ...rest }) {
230
+ const ref = useRef();
231
+ const [isShow, setIsShow] = useState(false);
232
+ const handleClickToggle = () => {
233
+ if (ref && ref.current) {
234
+ if (isShow) {
235
+ ref.current.style.height = hideHeight;
236
+ }
237
+ else {
238
+ ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
239
+ }
240
+ setIsShow((prev) => !prev);
241
+ }
242
+ };
243
+ return (jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxs("div", { className: "textarea__header", children: [label && jsx("label", { className: labelClass, children: label }), error && error.is && (jsx("span", { className: "textarea__header--error", children: error.message }))] }), jsx("textarea", { ref: ref, className: clsx("textarea__input", error.is && "textarea__input--error", textareaClassName), style: {
244
+ height: hasToggleButton ? hideHeight : showHeight,
245
+ }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("button", { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show", error.is && "textarea__button--error"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
246
+ }
247
+
248
+ function FormTextArea({ name, isRequired, error, ...rest }) {
249
+ const { control } = useFormContext();
250
+ return (jsx(Controller, { name: name, control: control, rules: {
251
+ ...(isRequired
252
+ ? {
253
+ required: error?.message || "Field is required",
254
+ }
255
+ : {}),
256
+ }, render: ({ field, fieldState: { error } }) => {
257
+ return (jsx(TextArea, { isRequired: true, error: {
258
+ is: !!error,
259
+ message: error?.message,
260
+ }, ...field, ...rest }));
261
+ } }));
216
262
  }
217
263
 
218
264
  function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue,
@@ -278,26 +324,28 @@ setFormSelected, clearError, onFormBlur, handleSelect, ...rest }) {
278
324
  }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, autoComplete: "off", ...rest }), isOpen && (jsx("div", { className: "select__box", children: filteredOptions.map((option, index) => (jsx(Button, { type: "button", mode: "secondary", className: "select__option", name: option, onMouseDown: handleSelectChange, children: option }, `index-${index}`))) }))] }));
279
325
  }
280
326
 
281
- function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, error = {
282
- is: false,
283
- message: "",
284
- }, ...rest }) {
285
- const ref = useRef();
286
- const [isShow, setIsShow] = useState(false);
287
- const handleClickToggle = () => {
288
- if (ref && ref.current) {
289
- if (isShow) {
290
- ref.current.style.height = hideHeight;
291
- }
292
- else {
293
- ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
294
- }
295
- setIsShow((prev) => !prev);
296
- }
297
- };
298
- return (jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxs("div", { className: "textarea__header", children: [label && jsx("label", { className: labelClass, children: label }), error && error.is && (jsx("span", { className: "textarea__header--error", children: error.message }))] }), jsx("textarea", { ref: ref, className: clsx("textarea__input", error.is && "textarea__input--error", textareaClassName), style: {
299
- height: hasToggleButton ? hideHeight : showHeight,
300
- }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("button", { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show", error.is && "textarea__button--error"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
327
+ function FormSelect({ name, isRequired, error, ...rest }) {
328
+ const { control, setValue, clearErrors } = useFormContext();
329
+ return (jsx(Controller, { name: name, control: control, rules: {
330
+ ...(isRequired
331
+ ? {
332
+ required: error?.message || "Field is required",
333
+ }
334
+ : {}),
335
+ }, render: ({ field: { onBlur, ...restField }, fieldState: { error } }) => {
336
+ return (jsx(Select, { isRequired: true, error: {
337
+ is: !!error,
338
+ message: error?.message,
339
+ }, setFormSelected: setValue, clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
340
+ } }));
341
+ }
342
+
343
+ function Loading({ img, children }) {
344
+ return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
345
+ }
346
+
347
+ function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
348
+ return (jsxs(Fragment, { children: [jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
301
349
  }
302
350
 
303
351
  const LoadingContext = createContext(undefined);
@@ -421,4 +469,4 @@ function useModal({} = {}) {
421
469
  return context;
422
470
  }
423
471
 
424
- export { Accordion, AccordionButton, AccordionContent, AccordionItem, Button, Form, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
472
+ export { Accordion, AccordionButton, AccordionContent, AccordionItem, Button, Form, FormInput, FormSelect, FormTextArea, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoinsight/react-components",
3
- "version": "0.6.7",
3
+ "version": "0.6.8",
4
4
  "description": "This library is the main UI component library for geoinsight",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",