@dynamic-framework/ui-react 1.26.0 → 1.28.0

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 (58) hide show
  1. package/dist/css/dynamic-ui-non-root.css +851 -927
  2. package/dist/css/dynamic-ui-non-root.min.css +2 -2
  3. package/dist/css/dynamic-ui-root.css +228 -152
  4. package/dist/css/dynamic-ui-root.min.css +2 -2
  5. package/dist/css/dynamic-ui.css +1062 -1062
  6. package/dist/css/dynamic-ui.min.css +2 -2
  7. package/dist/index.esm.js +125 -58
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +126 -57
  10. package/dist/index.js.map +1 -1
  11. package/dist/types/components/DButtonIcon/DButtonIcon.d.ts +19 -0
  12. package/dist/types/components/DButtonIcon/index.d.ts +2 -0
  13. package/dist/types/components/DDatePicker/DDatePicker.d.ts +3 -3
  14. package/dist/types/components/DDatePickerInput/DDatePickerInput.d.ts +2 -0
  15. package/dist/types/components/DInput/DInput.d.ts +3 -2
  16. package/dist/types/components/DInputCheck/DInputCheck.d.ts +3 -1
  17. package/dist/types/components/DInputCounter/DInputCounter.d.ts +2 -1
  18. package/dist/types/components/DInputCurrency/DInputCurrency.d.ts +2 -1
  19. package/dist/types/components/DInputCurrencyBase/DInputCurrencyBase.d.ts +2 -1
  20. package/dist/types/components/DInputMask/DInputMask.d.ts +2 -1
  21. package/dist/types/components/DInputSearch/DInputSearch.d.ts +2 -1
  22. package/dist/types/components/DInputSelect/DInputSelect.d.ts +3 -2
  23. package/dist/types/components/DInputSwitch/DInputSwitch.d.ts +3 -1
  24. package/dist/types/components/DSelect/DSelect.d.ts +3 -3
  25. package/dist/types/components/DStepper/DStepper.d.ts +2 -1
  26. package/dist/types/components/DStepperDesktop/DStepperDesktop.d.ts +2 -1
  27. package/dist/types/components/DTableHead/DTableHead.d.ts +9 -0
  28. package/dist/types/components/DTableHead/index.d.ts +2 -0
  29. package/dist/types/components/DToastContainer/DToastContainer.d.ts +2 -14
  30. package/dist/types/components/DToastContainer/useDToast.d.ts +11 -12
  31. package/dist/types/components/index.d.ts +2 -0
  32. package/dist/types/contexts/DContext.d.ts +1 -1
  33. package/dist/types/hooks/useFormatCurrency.d.ts +2 -1
  34. package/package.json +7 -5
  35. package/setupJest.js +16 -0
  36. package/src/style/abstracts/_mixins.scss +41 -21
  37. package/src/style/abstracts/variables/_+import.scss +12 -3
  38. package/src/style/abstracts/variables/_border.scss +1 -1
  39. package/src/style/abstracts/variables/_buttons.scss +3 -5
  40. package/src/style/abstracts/variables/_colors.scss +10 -10
  41. package/src/style/abstracts/variables/_forms.scss +24 -50
  42. package/src/style/abstracts/variables/_options.scss +1 -1
  43. package/src/style/abstracts/variables/_quick-action-switch.scss +0 -2
  44. package/src/style/abstracts/variables/_toast.scss +5 -0
  45. package/src/style/base/_+import.scss +1 -0
  46. package/src/style/base/_alert.scss +1 -1
  47. package/src/style/base/_buttons.scss +41 -16
  48. package/src/style/base/_form-check.scss +2 -19
  49. package/src/style/base/_form-switch.scss +4 -53
  50. package/src/style/base/_toast.scss +56 -0
  51. package/src/style/components/_+import.scss +3 -2
  52. package/src/style/components/_d-button-icon.scss +26 -0
  53. package/src/style/components/_d-close.scss +11 -0
  54. package/src/style/components/_d-modal.scss +0 -11
  55. package/src/style/components/_d-offcanvas.scss +0 -11
  56. package/src/style/components/_d-quick-action-switch.scss +0 -7
  57. package/src/style/components/_d-table-head.scss +18 -0
  58. package/src/style/root/_root.scss +42 -36
package/dist/index.esm.js CHANGED
@@ -13,7 +13,7 @@ import { InputMask } from '@react-input/mask';
13
13
  import ResponsivePagination from 'react-responsive-pagination';
14
14
  import { useFloating, offset, flip, shift, autoUpdate, useClick, useDismiss, useRole, useInteractions, useId as useId$1, FloatingFocusManager, arrow, useHover, useFocus, FloatingPortal, FloatingArrow } from '@floating-ui/react';
15
15
  import ContentLoader from 'react-content-loader';
16
- import { ToastContainer, Bounce, Flip, Slide, Zoom, toast } from 'react-toastify';
16
+ import { Toaster, toast } from 'react-hot-toast';
17
17
  import i18n from 'i18next';
18
18
  import { initReactI18next } from 'react-i18next';
19
19
 
@@ -157,20 +157,26 @@ function DPortalContextProvider({ portalName, children, availablePortals, }) {
157
157
  closePortal,
158
158
  }), [stack, openPortal, closePortal]);
159
159
  const handleClose = useCallback((target) => {
160
- if (target instanceof HTMLDivElement) {
161
- if (target.classList.contains('portal')) {
162
- if (!('bsBackdrop' in target.dataset)) {
163
- closePortal();
164
- }
160
+ if (!(target instanceof HTMLDivElement)) {
161
+ return;
162
+ }
163
+ if (target.classList.contains('portal') && !('bsBackdrop' in target.dataset)) {
164
+ closePortal();
165
+ return;
166
+ }
167
+ if (target.classList.contains('backdrop')) {
168
+ const lastPortal = target.nextElementSibling;
169
+ if (lastPortal && lastPortal.classList.contains('portal') && !('bsBackdrop' in lastPortal.dataset)) {
170
+ closePortal();
165
171
  }
166
172
  }
167
173
  }, [closePortal]);
168
174
  useEffect(() => {
169
175
  const keyEvent = (event) => {
170
176
  if (event.key === 'Escape') {
171
- const lastModal = document.querySelector(`#${portalName} > div > div:last-child`);
172
- if (lastModal) {
173
- handleClose(lastModal);
177
+ const lastPortal = document.querySelector(`#${portalName} > div > div:last-child`);
178
+ if (lastPortal) {
179
+ handleClose(lastPortal);
174
180
  }
175
181
  }
176
182
  };
@@ -319,6 +325,28 @@ function DButton({ theme = 'primary', size, variant, state, text = '', ariaLabel
319
325
  return (jsxs("button", Object.assign({ className: classNames(generateClasses, className), style: style, type: type, disabled: isDisabled, onClick: clickHandler, "aria-label": newAriaLabel, form: form }, value && { value }, { children: [iconStart && (jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix, materialStyle: iconStartMaterialStyle })), (text && !loading) && (jsx("span", { children: text })), loading && (jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) })), iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix, materialStyle: iconEndMaterialStyle }))] })));
320
326
  }
321
327
 
328
+ function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, ariaLabel, theme = 'primary', type = 'button', loading = false, disabled = false, stopPropagationEnabled = true, style, iconFamilyClass, iconFamilyPrefix, onClick, }) {
329
+ const generateClasses = useMemo(() => {
330
+ const variantClass = variant
331
+ ? `btn-${variant}-${theme}`
332
+ : `btn-${theme}`;
333
+ return Object.assign(Object.assign(Object.assign({ 'btn d-button-icon': true, [variantClass]: true }, size && { [`btn-${size}`]: true }), (state && state !== 'disabled') && { [state]: true }), { loading });
334
+ }, [variant, theme, size, state, loading]);
335
+ const clickHandler = useCallback((event) => {
336
+ if (stopPropagationEnabled) {
337
+ event.stopPropagation();
338
+ }
339
+ onClick === null || onClick === void 0 ? void 0 : onClick(event);
340
+ }, [stopPropagationEnabled, onClick]);
341
+ const isDisabled = useMemo(() => (state === 'disabled' || loading || disabled), [state, loading, disabled]);
342
+ const newAriaLabel = useMemo(() => (loading
343
+ ? (loadingAriaLabel || ariaLabel)
344
+ : (ariaLabel)), [ariaLabel, loading, loadingAriaLabel]);
345
+ return (jsx("button", { className: classNames(generateClasses, className), style: style, type: type, disabled: isDisabled, onClick: clickHandler, "aria-label": newAriaLabel, id: id, children: loading
346
+ ? (jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }))
347
+ : (jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle })) }));
348
+ }
349
+
322
350
  function DCardHeader({ className, style, children, }) {
323
351
  return (jsx("div", { className: classNames('card-header', className), style: style, children: children }));
324
352
  }
@@ -402,7 +430,7 @@ function formatCurrency(amount, options) {
402
430
 
403
431
  function useFormatCurrency(...args) {
404
432
  const { currency } = useDContext();
405
- const format = useCallback((value) => formatCurrency(value, currency), [currency]);
433
+ const format = useCallback((value, currencyOptions) => formatCurrency(value, currencyOptions || currency), [currency]);
406
434
  const values = (args || []).map((value) => (formatCurrency(value !== null && value !== void 0 ? value : 0, currency)));
407
435
  return {
408
436
  format,
@@ -436,7 +464,7 @@ function useProvidedRefOrCreate(providedRef) {
436
464
  }
437
465
 
438
466
  function DInput(_a, ref) {
439
- var { id: idProp, style, className, label = '', labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, labelIconMaterialStyle, disabled = false, loading = false, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconStart, iconStartDisabled, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconStartMaterialStyle, iconEnd, iconEndDisabled, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, iconEndMaterialStyle, invalidIcon: invalidIconProp, validIcon: validIconProp, hint, invalid = false, valid = false, floatingLabel = false, inputStart, inputEnd, value, placeholder = '', onChange, onIconStartClick, onIconEndClick } = _a, inputProps = __rest(_a, ["id", "style", "className", "label", "labelIcon", "labelIconFamilyClass", "labelIconFamilyPrefix", "labelIconMaterialStyle", "disabled", "loading", "iconFamilyClass", "iconFamilyPrefix", "iconMaterialStyle", "iconStart", "iconStartDisabled", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartAriaLabel", "iconStartTabIndex", "iconStartMaterialStyle", "iconEnd", "iconEndDisabled", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "iconEndMaterialStyle", "invalidIcon", "validIcon", "hint", "invalid", "valid", "floatingLabel", "inputStart", "inputEnd", "value", "placeholder", "onChange", "onIconStartClick", "onIconEndClick"]);
467
+ var { id: idProp, style, className, label = '', labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, labelIconMaterialStyle, disabled = false, loading = false, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconStart, iconStartDisabled, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconStartMaterialStyle, iconEnd, iconEndDisabled, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, iconEndMaterialStyle, invalidIcon: invalidIconProp, validIcon: validIconProp, hint, size, invalid = false, valid = false, floatingLabel = false, inputStart, inputEnd, value, placeholder = '', onChange, onIconStartClick, onIconEndClick } = _a, inputProps = __rest(_a, ["id", "style", "className", "label", "labelIcon", "labelIconFamilyClass", "labelIconFamilyPrefix", "labelIconMaterialStyle", "disabled", "loading", "iconFamilyClass", "iconFamilyPrefix", "iconMaterialStyle", "iconStart", "iconStartDisabled", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartAriaLabel", "iconStartTabIndex", "iconStartMaterialStyle", "iconEnd", "iconEndDisabled", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "iconEndMaterialStyle", "invalidIcon", "validIcon", "hint", "size", "invalid", "valid", "floatingLabel", "inputStart", "inputEnd", "value", "placeholder", "onChange", "onIconStartClick", "onIconEndClick"]);
440
468
  const inputRef = useProvidedRefOrCreate(ref);
441
469
  const innerId = useId();
442
470
  const id = useMemo(() => idProp || innerId, [idProp, innerId]);
@@ -471,6 +499,7 @@ function DInput(_a, ref) {
471
499
  hint,
472
500
  ]);
473
501
  const inputComponent = useMemo(() => (jsx("input", Object.assign({ ref: inputRef, id: id, className: classNames('form-control', {
502
+ [`form-control-${size}`]: !!size,
474
503
  'is-invalid': invalid,
475
504
  'is-valid': valid,
476
505
  }), disabled: disabled || loading, value: value, onChange: handleOnChange }, (floatingLabel || placeholder) && { placeholder: floatingLabel ? '' : placeholder }, ariaDescribedby && { 'aria-describedby': ariaDescribedby }, inputProps))), [
@@ -486,8 +515,9 @@ function DInput(_a, ref) {
486
515
  floatingLabel,
487
516
  valid,
488
517
  value,
518
+ size,
489
519
  ]);
490
- const labelComponent = useMemo(() => (jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsx(DIcon, { icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix, materialStyle: labelIconMaterialStyle }))] })), [
520
+ const labelComponent = useMemo(() => (jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsx(DIcon, { icon: labelIcon, size: `var(--${PREFIX_BS}label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix, materialStyle: labelIconMaterialStyle }))] })), [
491
521
  id,
492
522
  label,
493
523
  labelIcon,
@@ -521,14 +551,14 @@ function DDatePickerTime(_a) {
521
551
  }
522
552
 
523
553
  function DDatePickerInput(_a, ref) {
524
- var { value, onClick, id, iconEnd, className, style, inputLabel, readOnly: ignored } = _a, props = __rest(_a, ["value", "onClick", "id", "iconEnd", "className", "style", "inputLabel", "readOnly"]);
525
- return (jsx(DInput$1, Object.assign({ ref: ref, onClick: onClick, readOnly: true, type: "text", id: id, value: value, onIconEndClick: onClick, iconEnd: iconEnd, className: className, style: style, label: inputLabel }, props)));
554
+ var { value, onClick, id, iconEnd, className, style, inputLabel, validIcon, invalidIcon, readOnly: ignored } = _a, props = __rest(_a, ["value", "onClick", "id", "iconEnd", "className", "style", "inputLabel", "validIcon", "invalidIcon", "readOnly"]);
555
+ return (jsx(DInput$1, Object.assign({ ref: ref, onClick: onClick, readOnly: true, type: "text", id: id, value: value, onIconEndClick: onClick, iconEnd: iconEnd, className: className, style: style, label: inputLabel, invalidIcon: invalidIcon, validIcon: validIcon }, props)));
526
556
  }
527
557
  const ForwardedDDatePickerInput = forwardRef(DDatePickerInput);
528
558
  ForwardedDDatePickerInput.displayName = 'DDatePickerInput';
529
559
  var DDatePickerInput$1 = ForwardedDDatePickerInput;
530
560
 
531
- function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked = false, disabled = false, indeterminate, value, onChange, className, style, }) {
561
+ function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked = false, disabled = false, invalid = false, valid = false, indeterminate, value, onChange, className, style, }) {
532
562
  const innerRef = useRef(null);
533
563
  const innerId = useId();
534
564
  const id = useMemo(() => idProp || innerId, [idProp, innerId]);
@@ -545,10 +575,15 @@ function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked = false
545
575
  innerRef.current.checked = checked;
546
576
  }
547
577
  }, [checked]);
548
- const inputComponent = useMemo(() => (jsx("input", { ref: innerRef, onChange: handleChange, className: classNames('form-check-input', className), style: style, id: id, disabled: disabled, type: type, name: name, value: value, "aria-label": ariaLabel })), [
578
+ const inputComponent = useMemo(() => (jsx("input", { ref: innerRef, onChange: handleChange, className: classNames('form-check-input', {
579
+ 'is-invalid': invalid,
580
+ 'is-valid': valid,
581
+ }, className), style: style, id: id, disabled: disabled, type: type, name: name, value: value, "aria-label": ariaLabel })), [
549
582
  ariaLabel,
550
583
  className,
551
584
  disabled,
585
+ valid,
586
+ invalid,
552
587
  handleChange,
553
588
  id,
554
589
  name,
@@ -631,13 +666,16 @@ function DSelectSingleValueEmojiText(_a) {
631
666
  }
632
667
 
633
668
  function DSelect(_a) {
634
- var { id, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent = false, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, onIconStartClick, onIconEndClick } = _a, props = __rest(_a, ["id", "className", "style", "label", "labelIcon", "labelIconFamilyClass", "labelIconFamilyPrefix", "hint", "iconFamilyClass", "iconFamilyPrefix", "iconStart", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartAriaLabel", "iconStartTabIndex", "iconEnd", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "invalid", "valid", "menuWithMaxContent", "disabled", "clearable", "loading", "rtl", "searchable", "multi", "components", "defaultValue", "onIconStartClick", "onIconEndClick"]);
669
+ var { id, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, invalidIcon: invalidIconProp, validIcon: validIconProp, menuWithMaxContent = false, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, onIconStartClick, onIconEndClick } = _a, props = __rest(_a, ["id", "className", "style", "label", "labelIcon", "labelIconFamilyClass", "labelIconFamilyPrefix", "hint", "iconFamilyClass", "iconFamilyPrefix", "iconStart", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartAriaLabel", "iconStartTabIndex", "iconEnd", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "invalid", "valid", "invalidIcon", "validIcon", "menuWithMaxContent", "disabled", "clearable", "loading", "rtl", "searchable", "multi", "components", "defaultValue", "onIconStartClick", "onIconEndClick"]);
635
670
  const handleOnIconStartClick = useCallback(() => {
636
671
  onIconStartClick === null || onIconStartClick === void 0 ? void 0 : onIconStartClick(defaultValue);
637
672
  }, [onIconStartClick, defaultValue]);
638
673
  const handleOnIconEndClick = useCallback(() => {
639
674
  onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(defaultValue);
640
675
  }, [onIconEndClick, defaultValue]);
676
+ const { iconMap: { input } } = useDContext();
677
+ const invalidIcon = useMemo(() => invalidIconProp || input.invalid, [input.invalid, invalidIconProp]);
678
+ const validIcon = useMemo(() => validIconProp || input.valid, [input.valid, validIconProp]);
641
679
  return (jsxs("div", { className: classNames('d-select', className, {
642
680
  disabled: disabled || loading,
643
681
  }), style: style, children: [label && (jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsx(DIcon, { icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxs("div", { className: classNames({
@@ -647,11 +685,11 @@ function DSelect(_a) {
647
685
  }), children: [iconStart && (jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: handleOnIconStartClick, disabled: disabled || loading, "aria-label": iconStartAriaLabel, tabIndex: iconStartTabIndex, children: jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix }) })), jsx(Select, Object.assign({ styles: {
648
686
  control: (base) => (Object.assign(Object.assign({}, base), { minHeight: 'unset' })),
649
687
  container: (base) => (Object.assign(Object.assign({}, base), { flex: 1 })),
650
- menu: (base) => (Object.assign(Object.assign({}, base), { width: menuWithMaxContent ? 'max-context' : '100%' })),
688
+ menu: (base) => (Object.assign(Object.assign({}, base), { width: menuWithMaxContent ? 'max-context' : '100%', zIndex: 1000 })),
651
689
  }, className: classNames('d-select-component', {
652
690
  'is-invalid': invalid,
653
691
  'is-valid': valid,
654
- }), classNamePrefix: "d-select", isDisabled: disabled || loading, isClearable: clearable, isLoading: loading, isRtl: rtl, isSearchable: searchable, isMulti: multi, defaultValue: defaultValue, unstyled: true, components: Object.assign({ DropdownIndicator: DSelectDropdownIndicator, ClearIndicator: DSelectClearIndicator, MultiValueRemove: DSelectMultiValueRemove, LoadingIndicator: DSelectLoadingIndicator }, components) }, props)), ((invalid || valid) && !iconEnd && !loading) && (jsx("span", { className: "input-group-text", id: `${id}State`, children: jsx(DIcon, { className: "input-group-validation-icon", icon: invalid ? 'exclamation-circle' : 'check', familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), (iconEnd && !loading) && (jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading, "aria-label": iconEndAriaLabel, tabIndex: iconEndTabIndex, children: iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] }));
692
+ }), classNamePrefix: "d-select", isDisabled: disabled || loading, isClearable: clearable, isLoading: loading, isRtl: rtl, isSearchable: searchable, isMulti: multi, defaultValue: defaultValue, unstyled: true, components: Object.assign({ DropdownIndicator: DSelectDropdownIndicator, ClearIndicator: DSelectClearIndicator, MultiValueRemove: DSelectMultiValueRemove, LoadingIndicator: DSelectLoadingIndicator }, components) }, props)), ((invalid || valid) && !iconEnd && !loading) && (jsx("span", { className: "input-group-text", id: `${id}State`, children: jsx(DIcon, { className: "input-group-validation-icon", icon: invalid ? invalidIcon : validIcon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), (iconEnd && !loading) && (jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading, "aria-label": iconEndAriaLabel, tabIndex: iconEndTabIndex, children: iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] }));
655
693
  }
656
694
  var DSelect$1 = Object.assign(DSelect, {
657
695
  OptionCheck: DSelectOptionCheck,
@@ -686,7 +724,7 @@ function DDatePickerHeader({ date, changeYear, changeMonth, decreaseMonth, incre
686
724
  }
687
725
 
688
726
  function DDatePicker(_a) {
689
- var { date, selectsRange = false, inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel = 'open calendar', inputId = 'input-calendar', timeId = 'input-time', timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, minYearSelect = 1900, maxYearSelect = 2100, iconHeaderSize = 'sm', headerPrevMonthAriaLabel = 'decrease month', headerNextMonthAriaLabel = 'increase month', headerButtonVariant = 'link', headerButtonTheme = 'dark', invalid = false, valid = false, locale, className, formatWeekDay: formatWeekDayProp, style } = _a, props = __rest(_a, ["date", "selectsRange", "inputLabel", "inputHint", "inputAriaLabel", "inputActionAriaLabel", "inputId", "timeId", "timeLabel", "iconInput", "iconHeaderPrevMonth", "iconHeaderNextMonth", "iconMaterialStyle", "iconFamilyClass", "iconFamilyPrefix", "minYearSelect", "maxYearSelect", "iconHeaderSize", "headerPrevMonthAriaLabel", "headerNextMonthAriaLabel", "headerButtonVariant", "headerButtonTheme", "invalid", "valid", "locale", "className", "formatWeekDay", "style"]);
727
+ var { date, selectsRange = false, inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel = 'open calendar', inputId = 'input-calendar', timeId = 'input-time', timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, minYearSelect = 1900, maxYearSelect = 2100, iconHeaderSize = 'sm', headerPrevMonthAriaLabel = 'decrease month', headerNextMonthAriaLabel = 'increase month', headerButtonVariant = 'link', headerButtonTheme = 'dark', invalid = false, valid = false, renderCustomHeader: renderCustomHeaderProp, validIcon, invalidIcon, locale, className, formatWeekDay: formatWeekDayProp, style } = _a, props = __rest(_a, ["date", "selectsRange", "inputLabel", "inputHint", "inputAriaLabel", "inputActionAriaLabel", "inputId", "timeId", "timeLabel", "iconInput", "iconHeaderPrevMonth", "iconHeaderNextMonth", "iconMaterialStyle", "iconFamilyClass", "iconFamilyPrefix", "minYearSelect", "maxYearSelect", "iconHeaderSize", "headerPrevMonthAriaLabel", "headerNextMonthAriaLabel", "headerButtonVariant", "headerButtonTheme", "invalid", "valid", "renderCustomHeader", "validIcon", "invalidIcon", "locale", "className", "formatWeekDay", "style"]);
690
728
  const { iconMap: { calendar, chevronLeft, chevronRight, }, } = useDContext();
691
729
  const selected = useMemo(() => (date ? parseISO(date) : null), [date]);
692
730
  const iconInput = useMemo(() => iconInputProp || calendar, [calendar, iconInputProp]);
@@ -708,7 +746,13 @@ function DDatePicker(_a) {
708
746
  minYearSelect,
709
747
  maxYearSelect,
710
748
  ]);
711
- return (jsx(DatePicker, Object.assign({ selected: selected, calendarClassName: "d-date-picker", renderCustomHeader: (headerProps) => jsx(DatePickerHeader, Object.assign({}, headerProps)), selectsRange: selectsRange, formatWeekDay: handleFormatWeekDay, customInput: (jsx(DDatePickerInput$1, { id: inputId, "aria-label": inputAriaLabel, iconEndAriaLabel: inputActionAriaLabel, iconMaterialStyle: iconMaterialStyleProp, iconEnd: iconInput, inputLabel: inputLabel, className: className, style: style, invalid: invalid, valid: valid, hint: inputHint })), customTimeInput: (jsx(DDatePickerTime, { id: timeId, label: timeLabel })) }, locale && { locale }, props)));
749
+ const defaultRenderCustomHeader = useCallback((headerProps) => (jsx(DatePickerHeader, Object.assign({}, headerProps))), [DatePickerHeader]);
750
+ const renderCustomHeader = useMemo(() => (renderCustomHeaderProp || defaultRenderCustomHeader), [defaultRenderCustomHeader, renderCustomHeaderProp]);
751
+ return (jsx(DatePicker, Object.assign({ selected: selected, calendarClassName: "d-date-picker", renderCustomHeader: renderCustomHeader, selectsRange: selectsRange, formatWeekDay: handleFormatWeekDay, customInput: (jsx(DDatePickerInput$1, Object.assign({ id: inputId, "aria-label": inputAriaLabel, iconEndAriaLabel: inputActionAriaLabel, iconMaterialStyle: iconMaterialStyleProp }, ((!valid && !invalid)
752
+ || (valid && !validIcon)
753
+ || (invalid && !invalidIcon)) && {
754
+ iconEnd: iconInput,
755
+ }, { inputLabel: inputLabel, className: className, style: style, invalid: invalid, valid: valid, validIcon: validIcon, invalidIcon: invalidIcon, hint: inputHint }))), customTimeInput: (jsx(DDatePickerTime, { id: timeId, label: timeLabel })) }, locale && { locale }, props)));
712
756
  }
713
757
 
714
758
  function DInputMask(props, ref) {
@@ -890,15 +934,17 @@ function DInputPin({ id: idProp, label = '', labelIcon, labelIconFamilyClass, la
890
934
  const otpValue = otp.join('');
891
935
  onChange === null || onChange === void 0 ? void 0 : onChange(otpValue);
892
936
  }, [onChange]);
937
+ useEffect(() => {
938
+ handleOTPChange(activeInput);
939
+ }, [activeInput, handleOTPChange]);
893
940
  const handlePaste = useCallback((event) => {
894
941
  event.preventDefault();
895
942
  const pastedData = event.clipboardData.getData('text/plain');
896
943
  const cleanData = isInputNum ? pastedData.replace(/[^0-9]/gmi, '') : pastedData;
897
944
  const newInput = Array.from({ length: characters }).map((_, index) => cleanData[index] || '');
898
945
  setActiveInput(newInput);
899
- handleOTPChange(newInput);
900
946
  event.currentTarget.blur();
901
- }, [characters, handleOTPChange, isInputNum]);
947
+ }, [characters, isInputNum]);
902
948
  const nextInput = useCallback((event, index) => {
903
949
  var _a;
904
950
  const regex = new RegExp(pattern);
@@ -909,7 +955,6 @@ function DInputPin({ id: idProp, label = '', labelIcon, labelIconFamilyClass, la
909
955
  if (input.value !== '') {
910
956
  setActiveInput((prev) => {
911
957
  const newValue = prev.with(index, input.value);
912
- handleOTPChange(newValue);
913
958
  return newValue;
914
959
  });
915
960
  if (input.nextSibling) {
@@ -919,14 +964,13 @@ function DInputPin({ id: idProp, label = '', labelIcon, labelIconFamilyClass, la
919
964
  input.blur();
920
965
  }
921
966
  }
922
- }, [handleOTPChange, pattern]);
967
+ }, [pattern]);
923
968
  const prevInput = useCallback(({ key, currentTarget }, index) => {
924
969
  var _a;
925
970
  if (key === 'Backspace') {
926
971
  const { value } = currentTarget;
927
972
  setActiveInput((prev) => {
928
973
  const newVal = prev.with(index, '');
929
- handleOTPChange(newVal);
930
974
  return newVal;
931
975
  });
932
976
  if (currentTarget.previousSibling && value === '') {
@@ -937,7 +981,7 @@ function DInputPin({ id: idProp, label = '', labelIcon, labelIconFamilyClass, la
937
981
  currentTarget.focus();
938
982
  }
939
983
  }
940
- }, [handleOTPChange]);
984
+ }, []);
941
985
  const focusInput = useCallback((index) => {
942
986
  setActiveInput((prev) => prev.with(index, ''));
943
987
  }, []);
@@ -954,7 +998,7 @@ function DInputPin({ id: idProp, label = '', labelIcon, labelIconFamilyClass, la
954
998
  }), value: activeInput[index], type: secret ? 'password' : type, "aria-describedby": `${id}State`, inputMode: innerInputMode, id: `pinIndex${index}`, name: `pin-${index}`, maxLength: 1, onInput: (event) => nextInput(event, index), onKeyDown: (event) => prevInput(event, index), onFocus: () => focusInput(index), onWheel: wheelInput, onClick: (event) => event.preventDefault(), onPaste: (event) => handlePaste(event), autoComplete: "off", placeholder: placeholder, disabled: disabled || loading, required: true }, type === 'number' && ({ min: 0, max: 9 })), index))), (invalid || valid) && !loading && (jsx("span", { className: "input-group-text", id: `${id}State`, children: jsx(DIcon, { className: "input-group-validation-icon", icon: invalid ? invalidIcon : validIcon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), loading && (jsx("div", { className: "input-group-text", children: jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }) }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] }));
955
999
  }
956
1000
 
957
- function DInputSelect({ id: idProp, name, label = '', className, style, options = [], labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, disabled = false, loading = false, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, invalidIcon: invalidIconProp, validIcon: validIconProp, hint, value, floatingLabel = false, invalid = false, valid = false, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }) {
1001
+ function DInputSelect({ id: idProp, name, label = '', className, style, options = [], labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, disabled = false, loading = false, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, invalidIcon: invalidIconProp, validIcon: validIconProp, hint, value, size, floatingLabel = false, invalid = false, valid = false, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }) {
958
1002
  const innerId = useId();
959
1003
  const id = useMemo(() => idProp || innerId, [idProp, innerId]);
960
1004
  const internalValueExtractor = useCallback((option) => {
@@ -1003,6 +1047,7 @@ function DInputSelect({ id: idProp, name, label = '', className, style, options
1003
1047
  .join(' ')), [id, iconStart, iconEnd, hint]);
1004
1048
  const selectComponent = useMemo(() => (jsx("select", Object.assign({ id: id, name: name, className: classNames({
1005
1049
  'form-select': true,
1050
+ [`form-select-${size}`]: !!size,
1006
1051
  'floating-label': floatingLabel,
1007
1052
  'is-invalid': invalid,
1008
1053
  'is-valid': valid,
@@ -1022,6 +1067,7 @@ function DInputSelect({ id: idProp, name, label = '', className, style, options
1022
1067
  floatingLabel,
1023
1068
  invalid,
1024
1069
  valid,
1070
+ size,
1025
1071
  ]);
1026
1072
  const labelComponent = useMemo(() => (jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsx(DIcon, { icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), [
1027
1073
  id,
@@ -1041,7 +1087,7 @@ function DInputSelect({ id: idProp, name, label = '', className, style, options
1041
1087
  }), children: [iconStart && (jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: iconStartClickHandler, disabled: disabled || loading, "aria-label": iconStartAriaLabel, children: iconStart && (jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix })) })), dynamicComponent, ((invalid || valid) && !iconEnd && !loading) && (jsx("span", { className: "input-group-text", id: `${id}State`, children: jsx(DIcon, { className: "input-group-validation-icon", icon: invalid ? invalidIcon : validIcon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: iconMaterialStyle }) })), iconEnd && !loading && (jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: iconEndClickHandler, disabled: disabled || loading, "aria-label": iconEndAriaLabel, children: iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) })), loading && (jsx("div", { className: "input-group-text form-control-icon loading", children: jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsx("span", { className: "visually-hidden", children: "Loading..." }) }) }))] }), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] }));
1042
1088
  }
1043
1089
 
1044
- function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, readonly, className, style, onChange, }) {
1090
+ function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid = false, valid = false, readonly, className, style, onChange, }) {
1045
1091
  const innerId = useId();
1046
1092
  const id = useMemo(() => idProp || innerId, [idProp, innerId]);
1047
1093
  const [internalIsChecked, setInternalIsChecked] = useState(checked);
@@ -1053,7 +1099,10 @@ function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, r
1053
1099
  setInternalIsChecked(value);
1054
1100
  onChange === null || onChange === void 0 ? void 0 : onChange(value);
1055
1101
  }, [onChange]);
1056
- return (jsxs("div", { className: "form-check form-switch", children: [jsx("input", { id: id, name: name, onChange: readonly ? () => false : changeHandler, className: classNames('form-check-input', className), style: style, type: "checkbox", role: "switch", checked: internalIsChecked, disabled: disabled, "aria-label": ariaLabel }), label && (jsx("label", { className: "form-check-label", htmlFor: id, children: label }))] }));
1102
+ return (jsxs("div", { className: "form-check form-switch", children: [jsx("input", { id: id, name: name, onChange: readonly ? () => false : changeHandler, className: classNames('form-check-input', {
1103
+ 'is-invalid': invalid,
1104
+ 'is-valid': valid,
1105
+ }, className), style: style, type: "checkbox", role: "switch", checked: internalIsChecked, disabled: disabled, "aria-label": ariaLabel }), label && (jsx("label", { className: "form-check-label", htmlFor: id, children: label }))] }));
1057
1106
  }
1058
1107
 
1059
1108
  function DInputRange(_a, ref) {
@@ -1122,7 +1171,7 @@ var DList$1 = Object.assign(DList, {
1122
1171
  function DModalHeader({ showCloseButton, onClose, children, className, style, iconFamilyClass, iconFamilyPrefix, icon: iconProp, materialStyle = false, }) {
1123
1172
  const { iconMap: { xLg, }, } = useDContext();
1124
1173
  const icon = useMemo(() => iconProp || xLg, [iconProp, xLg]);
1125
- return (jsxs("div", { className: classNames('modal-header', className), style: style, children: [jsx("div", { children: children }), showCloseButton && (jsx("button", { type: "button", className: "d-modal-close", "aria-label": "Close", onClick: onClose, children: jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: materialStyle }) }))] }));
1174
+ return (jsxs("div", { className: classNames('modal-header', className), style: style, children: [jsx("div", { children: children }), showCloseButton && (jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: onClose, children: jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: materialStyle }) }))] }));
1126
1175
  }
1127
1176
 
1128
1177
  function DModalBody({ children, className, style, }) {
@@ -1159,7 +1208,7 @@ var DModal$1 = Object.assign(DModal, {
1159
1208
  function DOffcanvasHeader({ showCloseButton, onClose, children, className, style, iconFamilyClass, iconFamilyPrefix, icon: iconProp, materialStyle = false, }) {
1160
1209
  const { iconMap: { xLg, }, } = useDContext();
1161
1210
  const icon = useMemo(() => iconProp || xLg, [iconProp, xLg]);
1162
- return (jsxs("div", { className: classNames('offcanvas-header', className), style: style, children: [jsx("div", { children: children }), showCloseButton && (jsx("button", { type: "button", className: "d-offcanvas-close", "aria-label": "Close", onClick: onClose, children: jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: materialStyle }) }))] }));
1211
+ return (jsxs("div", { className: classNames('offcanvas-header', className), style: style, children: [jsx("div", { children: children }), showCloseButton && (jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: onClose, children: jsx(DIcon, { icon: icon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix, materialStyle: materialStyle }) }))] }));
1163
1212
  }
1164
1213
 
1165
1214
  function DOffcanvasBody({ children, className, style, }) {
@@ -1316,7 +1365,7 @@ function DSkeleton({ speed = 2, viewBox, backgroundColor, foregroundColor, child
1316
1365
  return (jsx(ContentLoader, { speed: speed, viewBox: viewBox, backgroundColor: innerBackgroundColor, foregroundColor: innerForegroundColor, children: children }));
1317
1366
  }
1318
1367
 
1319
- function DStepper$2({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle = false, vertical = false, className, style, }) {
1368
+ function DStepper$2({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle = false, vertical = false, completed, className, style, }) {
1320
1369
  const { iconMap: { check, }, } = useDContext();
1321
1370
  const icon = useMemo(() => iconSuccessProp || check, [check, iconSuccessProp]);
1322
1371
  if (currentStep < 1 || currentStep > options.length) {
@@ -1327,9 +1376,9 @@ function DStepper$2({ options, currentStep, iconSuccess: iconSuccessProp, iconSu
1327
1376
  'is-vertical': vertical,
1328
1377
  }, className), style: style, children: options.map(({ label, value }) => (jsxs("div", { className: "d-step", children: [jsx("div", { className: "d-step-value", children: jsx("div", { className: classNames({
1329
1378
  'd-step-icon-container': true,
1330
- 'd-step-check': value < currentStep,
1331
- 'd-step-current': value === currentStep,
1332
- }), children: value < currentStep
1379
+ 'd-step-check': value < currentStep || completed,
1380
+ 'd-step-current': value === currentStep && !completed,
1381
+ }), children: value < currentStep || completed
1333
1382
  ? (jsx(DIcon, { icon: icon, familyClass: iconSuccessFamilyClass, familyPrefix: iconSuccessFamilyPrefix, materialStyle: iconSuccessMaterialStyle, className: "d-step-icon" }))
1334
1383
  : value }) }), jsx("div", { className: "d-step-label", children: label })] }, value))) }));
1335
1384
  }
@@ -1364,8 +1413,8 @@ function DStepper$1({ options, currentStep, className, style, }) {
1364
1413
  return (jsxs("div", { className: classNames('d-stepper', className), style: style, children: [jsx("div", { className: "d-step-bar", style: { background: progressStyle }, children: jsx("p", { className: "d-step-number", children: `${currentStep}/${options.length}` }) }), jsx("div", { className: "d-step-info", children: Object.keys(currentOption).length > 0 && (jsxs(Fragment$1, { children: [jsx("div", { className: "d-step-label", children: currentOption.label }), jsx("div", { className: "d-step-description", children: currentOption.description || '' })] })) })] }));
1365
1414
  }
1366
1415
 
1367
- function DStepper({ options, currentStep, iconSuccess, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle = false, vertical = false, breakpoint = 'lg', className, style, }) {
1368
- return (jsxs("div", { className: className, style: style, children: [jsx("div", { className: `d-block d-${breakpoint}-none`, children: jsx(DStepper$1, { options: options, currentStep: currentStep }) }), jsx("div", { className: `d-none d-${breakpoint}-block`, children: jsx(DStepper$2, { options: options, currentStep: currentStep, vertical: vertical, iconSuccess: iconSuccess, iconSuccessFamilyClass: iconSuccessFamilyClass, iconSuccessFamilyPrefix: iconSuccessFamilyPrefix, iconSuccessMaterialStyle: iconSuccessMaterialStyle }) })] }));
1416
+ function DStepper({ options, currentStep, iconSuccess, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle = false, vertical = false, breakpoint = 'lg', className, completed = false, style, }) {
1417
+ return (jsxs("div", { className: className, style: style, children: [jsx("div", { className: `d-block d-${breakpoint}-none`, children: jsx(DStepper$1, { options: options, currentStep: currentStep }) }), jsx("div", { className: `d-none d-${breakpoint}-block`, children: jsx(DStepper$2, { options: options, currentStep: currentStep, vertical: vertical, iconSuccess: iconSuccess, iconSuccessFamilyClass: iconSuccessFamilyClass, iconSuccessFamilyPrefix: iconSuccessFamilyPrefix, iconSuccessMaterialStyle: iconSuccessMaterialStyle, completed: completed }) })] }));
1369
1418
  }
1370
1419
 
1371
1420
  const ARROW_WIDTH = 8;
@@ -1466,33 +1515,51 @@ var DToast$1 = Object.assign(DToast, {
1466
1515
  Body: DToastBody,
1467
1516
  });
1468
1517
 
1469
- const TOAST_TRANSITIONS$1 = {
1470
- bounce: Bounce,
1471
- flip: Flip,
1472
- slide: Slide,
1473
- zoom: Zoom,
1474
- };
1475
- function DToastContainer({ style, className, closeOnClick, position = 'bottom-center', autoClose = false, stacked = false, transition = 'slide', containerId, }) {
1476
- const selectedTransition = useMemo(() => TOAST_TRANSITIONS$1[transition], [transition]);
1477
- return (jsx(ToastContainer, { toastClassName: () => classNames('shadow-none p-0 cursor-default', className), position: position, autoClose: autoClose, closeOnClick: closeOnClick, transition: selectedTransition, closeButton: false, style: style, hideProgressBar: true, stacked: stacked, containerId: containerId }));
1518
+ function DToastContainer({ containerClassName, position = 'bottom-center', reverseOrder = false, containerStyle, toastOptions, gutter, }) {
1519
+ return (jsx(Toaster, { containerClassName: containerClassName, position: position, reverseOrder: reverseOrder, containerStyle: containerStyle, gutter: gutter, toastOptions: toastOptions }));
1478
1520
  }
1479
1521
 
1480
- const TOAST_TRANSITIONS = {
1481
- bounce: Bounce,
1482
- flip: Flip,
1483
- slide: Slide,
1484
- zoom: Zoom,
1485
- };
1486
1522
  function useDToast() {
1487
- const toast$1 = useCallback((message, _a) => {
1488
- var { icon, iconClose, type = 'info', showClose = true, transition } = _a, rest = __rest(_a, ["icon", "iconClose", "type", "showClose", "transition"]);
1489
- toast(({ closeToast }) => (jsx(DAlert, { onClose: closeToast, id: "alertID", type: type, icon: icon, iconClose: iconClose, showClose: showClose, children: message })), Object.assign({ transition: transition && TOAST_TRANSITIONS[transition] }, rest));
1490
- }, []);
1523
+ const { iconMap: { xLg, }, } = useDContext();
1524
+ const toast$1 = useCallback((data, toastProps) => {
1525
+ if (typeof data === 'function') {
1526
+ return toast.custom(data, toastProps);
1527
+ }
1528
+ const { title, description, icon, closeIcon, timestamp, theme, soft, } = data;
1529
+ return toast.custom(({ id, visible }) => {
1530
+ if (!visible) {
1531
+ return null;
1532
+ }
1533
+ if (!description) {
1534
+ return (jsx(DToast$1, { className: classNames({
1535
+ [`toast-${theme}`]: !!theme,
1536
+ 'toast-soft': soft,
1537
+ }, 'show'), children: jsxs(DToast$1.Body, { children: [icon && (jsx(DIcon, { className: "toast-icon", icon: icon })), jsx("p", { className: "toast-title", children: title }), jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: () => toast.dismiss(id), children: jsx(DIcon, { icon: closeIcon || xLg }) })] }) }));
1538
+ }
1539
+ return (jsxs(DToast$1, { className: classNames({
1540
+ [`toast-${theme}`]: !!theme,
1541
+ 'toast-soft': soft,
1542
+ }, 'show'), children: [jsxs(DToast$1.Header, { children: [icon && (jsx(DIcon, { className: "toast-icon", icon: icon })), jsx("p", { className: "toast-title", children: title }), timestamp && (jsx("small", { className: "toast-timestamp", children: timestamp })), jsx("button", { type: "button", className: "d-close", "aria-label": "Close", onClick: () => toast.dismiss(id), children: jsx(DIcon, { icon: closeIcon || xLg }) })] }), jsx(DToast$1.Body, { children: jsx("span", { children: description }) })] }));
1543
+ }, toastProps);
1544
+ }, [xLg]);
1491
1545
  return {
1492
1546
  toast: toast$1,
1493
1547
  };
1494
1548
  }
1495
1549
 
1550
+ function DTableHead({ className, style, field, label, value = '', onChange, }) {
1551
+ const handleOnChange = useCallback(() => {
1552
+ if (value === field) {
1553
+ return onChange(`-${field}`);
1554
+ }
1555
+ if (value === `-${field}`) {
1556
+ return onChange('');
1557
+ }
1558
+ return onChange(field);
1559
+ }, [field, value, onChange]);
1560
+ return (jsx("th", { style: style, className: classNames('d-table-head', className), children: jsxs("button", { type: "button", onClick: handleOnChange, children: [label, value && value.includes(field) && (jsx(DIcon, { icon: value === field ? 'arrow-up' : 'arrow-down' }))] }) }));
1561
+ }
1562
+
1496
1563
  async function configureI8n(resources, _a = {}) {
1497
1564
  var { lng = 'en', fallbackLng = 'en' } = _a, config = __rest(_a, ["lng", "fallbackLng"]);
1498
1565
  return i18n
@@ -1507,5 +1574,5 @@ async function configureI8n(resources, _a = {}) {
1507
1574
  .then((t) => t);
1508
1575
  }
1509
1576
 
1510
- export { DAlert, DBadge, DBoxFile, DButton, DCard$1 as DCard, DCardBody, DCardFooter, DCardHeader, DCarousel$1 as DCarousel, DCarouselSlide, DChip, DCollapse, DContext, DContextProvider, DCurrencyText, DDatePicker, DIcon, DIconBase, DInput$1 as DInput, DInputCheck, DInputCounter$1 as DInputCounter, DInputCurrency$1 as DInputCurrency, DInputCurrencyBase$1 as DInputCurrencyBase, DInputMask$1 as DInputMask, DInputPassword$1 as DInputPassword, DInputPin, DInputRange$1 as DInputRange, DInputSearch$1 as DInputSearch, DInputSelect, DInputSwitch, DList$1 as DList, DListItem, DModal$1 as DModal, DModalBody, DModalFooter, DModalHeader, DOffcanvas$1 as DOffcanvas, DOffcanvasBody, DOffcanvasFooter, DOffcanvasHeader, DPaginator, DPopover, DProgress, DQuickActionButton, DQuickActionCheck, DQuickActionSelect, DQuickActionSwitch, DSelect$1 as DSelect, DSkeleton, DStepper, DStepper$2 as DStepperDesktop, DStepper$1 as DStepperMobile, DTabContent, DTabs$1 as DTabs, DToast$1 as DToast, DToastContainer, DTooltip, configureI8n as configureI18n, formatCurrency, useDContext, useDPortalContext, useDToast, useDisableBodyScrollEffect, useDisableInputWheel, useFormatCurrency, useInputCurrency, usePortal, useProvidedRefOrCreate, useStackState, useTabContext };
1577
+ export { DAlert, DBadge, DBoxFile, DButton, DButtonIcon, DCard$1 as DCard, DCardBody, DCardFooter, DCardHeader, DCarousel$1 as DCarousel, DCarouselSlide, DChip, DCollapse, DContext, DContextProvider, DCurrencyText, DDatePicker, DIcon, DIconBase, DInput$1 as DInput, DInputCheck, DInputCounter$1 as DInputCounter, DInputCurrency$1 as DInputCurrency, DInputCurrencyBase$1 as DInputCurrencyBase, DInputMask$1 as DInputMask, DInputPassword$1 as DInputPassword, DInputPin, DInputRange$1 as DInputRange, DInputSearch$1 as DInputSearch, DInputSelect, DInputSwitch, DList$1 as DList, DListItem, DModal$1 as DModal, DModalBody, DModalFooter, DModalHeader, DOffcanvas$1 as DOffcanvas, DOffcanvasBody, DOffcanvasFooter, DOffcanvasHeader, DPaginator, DPopover, DProgress, DQuickActionButton, DQuickActionCheck, DQuickActionSelect, DQuickActionSwitch, DSelect$1 as DSelect, DSkeleton, DStepper, DStepper$2 as DStepperDesktop, DStepper$1 as DStepperMobile, DTabContent, DTableHead, DTabs$1 as DTabs, DToast$1 as DToast, DToastContainer, DTooltip, configureI8n as configureI18n, formatCurrency, useDContext, useDPortalContext, useDToast, useDisableBodyScrollEffect, useDisableInputWheel, useFormatCurrency, useInputCurrency, usePortal, useProvidedRefOrCreate, useStackState, useTabContext };
1511
1578
  //# sourceMappingURL=index.esm.js.map