@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.
- package/dist/css/dynamic-ui-non-root.css +851 -927
- package/dist/css/dynamic-ui-non-root.min.css +2 -2
- package/dist/css/dynamic-ui-root.css +228 -152
- package/dist/css/dynamic-ui-root.min.css +2 -2
- package/dist/css/dynamic-ui.css +1062 -1062
- package/dist/css/dynamic-ui.min.css +2 -2
- package/dist/index.esm.js +125 -58
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +126 -57
- package/dist/index.js.map +1 -1
- package/dist/types/components/DButtonIcon/DButtonIcon.d.ts +19 -0
- package/dist/types/components/DButtonIcon/index.d.ts +2 -0
- package/dist/types/components/DDatePicker/DDatePicker.d.ts +3 -3
- package/dist/types/components/DDatePickerInput/DDatePickerInput.d.ts +2 -0
- package/dist/types/components/DInput/DInput.d.ts +3 -2
- package/dist/types/components/DInputCheck/DInputCheck.d.ts +3 -1
- package/dist/types/components/DInputCounter/DInputCounter.d.ts +2 -1
- package/dist/types/components/DInputCurrency/DInputCurrency.d.ts +2 -1
- package/dist/types/components/DInputCurrencyBase/DInputCurrencyBase.d.ts +2 -1
- package/dist/types/components/DInputMask/DInputMask.d.ts +2 -1
- package/dist/types/components/DInputSearch/DInputSearch.d.ts +2 -1
- package/dist/types/components/DInputSelect/DInputSelect.d.ts +3 -2
- package/dist/types/components/DInputSwitch/DInputSwitch.d.ts +3 -1
- package/dist/types/components/DSelect/DSelect.d.ts +3 -3
- package/dist/types/components/DStepper/DStepper.d.ts +2 -1
- package/dist/types/components/DStepperDesktop/DStepperDesktop.d.ts +2 -1
- package/dist/types/components/DTableHead/DTableHead.d.ts +9 -0
- package/dist/types/components/DTableHead/index.d.ts +2 -0
- package/dist/types/components/DToastContainer/DToastContainer.d.ts +2 -14
- package/dist/types/components/DToastContainer/useDToast.d.ts +11 -12
- package/dist/types/components/index.d.ts +2 -0
- package/dist/types/contexts/DContext.d.ts +1 -1
- package/dist/types/hooks/useFormatCurrency.d.ts +2 -1
- package/package.json +7 -5
- package/setupJest.js +16 -0
- package/src/style/abstracts/_mixins.scss +41 -21
- package/src/style/abstracts/variables/_+import.scss +12 -3
- package/src/style/abstracts/variables/_border.scss +1 -1
- package/src/style/abstracts/variables/_buttons.scss +3 -5
- package/src/style/abstracts/variables/_colors.scss +10 -10
- package/src/style/abstracts/variables/_forms.scss +24 -50
- package/src/style/abstracts/variables/_options.scss +1 -1
- package/src/style/abstracts/variables/_quick-action-switch.scss +0 -2
- package/src/style/abstracts/variables/_toast.scss +5 -0
- package/src/style/base/_+import.scss +1 -0
- package/src/style/base/_alert.scss +1 -1
- package/src/style/base/_buttons.scss +41 -16
- package/src/style/base/_form-check.scss +2 -19
- package/src/style/base/_form-switch.scss +4 -53
- package/src/style/base/_toast.scss +56 -0
- package/src/style/components/_+import.scss +3 -2
- package/src/style/components/_d-button-icon.scss +26 -0
- package/src/style/components/_d-close.scss +11 -0
- package/src/style/components/_d-modal.scss +0 -11
- package/src/style/components/_d-offcanvas.scss +0 -11
- package/src/style/components/_d-quick-action-switch.scss +0 -7
- package/src/style/components/_d-table-head.scss +18 -0
- 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 {
|
|
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
|
-
|
|
162
|
-
|
|
163
|
-
|
|
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
|
|
172
|
-
if (
|
|
173
|
-
handleClose(
|
|
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}
|
|
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',
|
|
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 ?
|
|
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
|
-
|
|
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,
|
|
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
|
-
}, [
|
|
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
|
-
}, [
|
|
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',
|
|
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-
|
|
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-
|
|
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
|
-
|
|
1470
|
-
|
|
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
|
|
1488
|
-
|
|
1489
|
-
|
|
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
|