@dynamic-framework/ui-react 1.12.0 → 1.13.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 +50 -26
- package/dist/css/dynamic-ui-non-root.min.css +1 -1
- package/dist/css/dynamic-ui-root.css +1 -1
- package/dist/css/dynamic-ui-root.min.css +1 -1
- package/dist/css/dynamic-ui.css +51 -27
- package/dist/css/dynamic-ui.min.css +1 -1
- package/dist/index.esm.js +17 -30
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +16 -30
- package/dist/index.js.map +1 -1
- package/dist/types/components/DCurrencyText/DCurrencyText.d.ts +0 -1
- package/dist/types/components/DMonthPicker/DMonthPicker.d.ts +1 -1
- package/dist/types/components/index.d.ts +0 -1
- package/dist/types/components/interface.d.ts +2 -0
- package/dist/types/contexts/DContext.d.ts +10 -6
- package/package.json +2 -2
- package/src/style/abstracts/variables/_+import.scss +1 -1
- package/src/style/abstracts/variables/_forms.scss +3 -2
- package/src/style/abstracts/variables/_navs.scss +1 -1
- package/src/style/abstracts/variables/_quick-action-check.scss +1 -1
- package/src/style/components/_d-datepicker.scss +18 -5
- package/src/style/components/_d-input.scss +18 -10
- package/src/style/components/_d-stepper-desktop.scss +1 -1
- package/src/style/components/_d-stepper-mobile.scss +5 -1
- package/src/style/components/_d-tabs.scss +5 -0
- package/dist/types/components/DListItemMovement/DListItemMovement.d.ts +0 -10
- package/dist/types/components/DListItemMovement/index.d.ts +0 -2
package/dist/index.esm.js
CHANGED
|
@@ -230,13 +230,15 @@ const defaultState = {
|
|
|
230
230
|
separator: ',',
|
|
231
231
|
decimal: '.',
|
|
232
232
|
},
|
|
233
|
+
setContext: () => { },
|
|
233
234
|
};
|
|
234
235
|
const DContext = createContext(defaultState);
|
|
235
236
|
function DContextProvider({ language = defaultState.language, currency = defaultState.currency, children, }) {
|
|
236
|
-
const
|
|
237
|
+
const [internalContext, setInternalContext,] = useState({
|
|
237
238
|
language,
|
|
238
239
|
currency,
|
|
239
|
-
})
|
|
240
|
+
});
|
|
241
|
+
const value = useMemo(() => (Object.assign(Object.assign({}, internalContext), { setContext: (newValue) => setInternalContext(newValue) })), [internalContext]);
|
|
240
242
|
return (jsx(DContext.Provider, { value: value, children: children }));
|
|
241
243
|
}
|
|
242
244
|
function useDContext() {
|
|
@@ -437,7 +439,7 @@ function useProvidedRefOrCreate(providedRef) {
|
|
|
437
439
|
}
|
|
438
440
|
|
|
439
441
|
function DInput(_a, ref) {
|
|
440
|
-
var { id, style, className, label = '', labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, disabled = false, readOnly = false, loading = false, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, hint, invalid = false, valid = false, floatingLabel = false, inputStart, value, placeholder = '', onChange, onIconStartClick, onIconEndClick } = _a, inputProps = __rest(_a, ["id", "style", "className", "label", "labelIcon", "labelIconFamilyClass", "labelIconFamilyPrefix", "disabled", "readOnly", "loading", "iconFamilyClass", "iconFamilyPrefix", "iconStart", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartAriaLabel", "iconStartTabIndex", "iconEnd", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "hint", "invalid", "valid", "floatingLabel", "inputStart", "value", "placeholder", "onChange", "onIconStartClick", "onIconEndClick"]);
|
|
442
|
+
var { id, style, className, label = '', labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, disabled = false, readOnly = false, loading = false, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartDisabled, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndDisabled, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, hint, invalid = false, valid = false, floatingLabel = false, inputStart, value, placeholder = '', onChange, onIconStartClick, onIconEndClick } = _a, inputProps = __rest(_a, ["id", "style", "className", "label", "labelIcon", "labelIconFamilyClass", "labelIconFamilyPrefix", "disabled", "readOnly", "loading", "iconFamilyClass", "iconFamilyPrefix", "iconStart", "iconStartDisabled", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartAriaLabel", "iconStartTabIndex", "iconEnd", "iconEndDisabled", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "hint", "invalid", "valid", "floatingLabel", "inputStart", "value", "placeholder", "onChange", "onIconStartClick", "onIconEndClick"]);
|
|
441
443
|
const inputRef = useProvidedRefOrCreate(ref);
|
|
442
444
|
const handleOnChange = useCallback((event) => {
|
|
443
445
|
onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.value);
|
|
@@ -490,7 +492,7 @@ function DInput(_a, ref) {
|
|
|
490
492
|
'input-group': true,
|
|
491
493
|
'has-validation': invalid,
|
|
492
494
|
disabled: disabled || loading,
|
|
493
|
-
}), children: [!!inputStart && (jsx("div", { className: "input-group-text", children: inputStart })), iconStart && (jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: handleOnIconStartClick, disabled: disabled || loading, "aria-label": iconStartAriaLabel, tabIndex: iconStartTabIndex, children:
|
|
495
|
+
}), children: [!!inputStart && (jsx("div", { className: "input-group-text", children: inputStart })), iconStart && (jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: handleOnIconStartClick, disabled: disabled || loading || iconStartDisabled, "aria-label": iconStartAriaLabel, tabIndex: iconStartTabIndex, children: jsx(DIcon, { className: "d-input-icon", icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix }) })), dynamicComponent, ((invalid || valid) && !iconEnd && !loading) && (jsx("span", { className: "input-group-text", id: `${id}State`, children: jsx(DIcon, { className: "d-input-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 || iconEndDisabled, "aria-label": iconEndAriaLabel, tabIndex: iconEndTabIndex, children: jsx(DIcon, { className: "d-input-icon", icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix }) })), loading && (jsx("div", { className: "input-group-text d-input-icon", 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 }))] })] }));
|
|
494
496
|
}
|
|
495
497
|
const ForwardedDInput = forwardRef(DInput);
|
|
496
498
|
ForwardedDInput.displayName = 'DInput';
|
|
@@ -512,10 +514,10 @@ ForwardedDDatePickerInput.displayName = 'DDatePickerInput';
|
|
|
512
514
|
var DDatePickerInput$1 = ForwardedDDatePickerInput;
|
|
513
515
|
|
|
514
516
|
function DMonthPicker(_a) {
|
|
515
|
-
var { onChangeDate, date, locale, className, headerPrevYearAriaLabel = 'decrease year', headerNextYearAriaLabel = 'increase year' } = _a, props = __rest(_a, ["onChangeDate", "date", "locale", "className", "headerPrevYearAriaLabel", "headerNextYearAriaLabel"]);
|
|
517
|
+
var { onChangeDate, date, locale, className, calendarClassName, headerPrevYearAriaLabel = 'decrease year', headerNextYearAriaLabel = 'increase year' } = _a, props = __rest(_a, ["onChangeDate", "date", "locale", "className", "calendarClassName", "headerPrevYearAriaLabel", "headerNextYearAriaLabel"]);
|
|
516
518
|
const selected = useMemo(() => parseISO(date), [date]);
|
|
517
519
|
const dateFormatted = useMemo(() => (format(new Date(date), 'MMMM yyyy', { locale })), [date, locale]);
|
|
518
|
-
return (jsx(DatePicker, Object.assign({ showMonthYearPicker: true, selected: selected, calendarClassName: classNames('d-month-picker',
|
|
520
|
+
return (jsx(DatePicker, Object.assign({ showMonthYearPicker: true, selected: selected, className: className, calendarClassName: classNames('d-month-picker', calendarClassName), onChange: onChangeDate }, locale && { locale }, { customInput: (jsx("p", { className: "fw-bold text-capitalize", children: dateFormatted })), renderCustomHeader: ({ monthDate, decreaseYear, increaseYear, prevYearButtonDisabled, nextYearButtonDisabled, }) => (jsxs("div", { className: "d-flex align-items-center justify-content-between gap-4 fs-6 bg-dark", children: [jsx(DButton, { iconStart: "chevron-left", size: "sm", variant: "link", theme: "light", onClick: decreaseYear, disabled: prevYearButtonDisabled, ariaLabel: headerPrevYearAriaLabel }), jsx("p", { className: "fs-6 fw-bold", children: monthDate.getFullYear() }), jsx(DButton, { iconStart: "chevron-right", size: "sm", variant: "link", theme: "light", onClick: increaseYear, disabled: nextYearButtonDisabled, ariaLabel: headerNextYearAriaLabel })] })) }, props)));
|
|
519
521
|
}
|
|
520
522
|
|
|
521
523
|
function DDatePickerHeader({ monthDate, changeMonth, changeYear, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, withMonthSelector, prevMonthIcon, nextMonthIcon, prevMonthAriaLabel = 'decrease month', nextMonthAriaLabel = 'increase month', iconSize, buttonVariant, buttonTheme, locale, style, className, }) {
|
|
@@ -525,7 +527,7 @@ function DDatePickerHeader({ monthDate, changeMonth, changeYear, decreaseMonth,
|
|
|
525
527
|
changeYear(getYear(value));
|
|
526
528
|
}
|
|
527
529
|
}, [changeMonth, changeYear]);
|
|
528
|
-
return (jsxs("div", { className: classNames('d-flex align-items-center justify-content-between d-datepicker-header', className), style: style, children: [jsx(DButton, { iconStart: prevMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: decreaseMonth, disabled: prevMonthButtonDisabled, ariaLabel: prevMonthAriaLabel }), jsx(DMonthPicker, Object.assign({}, !withMonthSelector && { readOnly: true }, { date: monthDate.toISOString(), onChangeDate: onChangeDate }, locale && { locale })), jsx(DButton, { iconStart: nextMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: increaseMonth, disabled: nextMonthButtonDisabled, ariaLabel: nextMonthAriaLabel })] }));
|
|
530
|
+
return (jsxs("div", { className: classNames('d-flex align-items-center justify-content-between d-datepicker-header', className), style: style, children: [jsx(DButton, { iconStart: prevMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: decreaseMonth, disabled: prevMonthButtonDisabled, ariaLabel: prevMonthAriaLabel }), jsx(DMonthPicker, Object.assign({}, !withMonthSelector && { readOnly: true }, withMonthSelector && { className: 'cursor-pointer' }, { date: monthDate.toISOString(), onChangeDate: onChangeDate }, locale && { locale })), jsx(DButton, { iconStart: nextMonthIcon, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: increaseMonth, disabled: nextMonthButtonDisabled, ariaLabel: nextMonthAriaLabel })] }));
|
|
529
531
|
}
|
|
530
532
|
|
|
531
533
|
function DDatePicker(_a) {
|
|
@@ -577,7 +579,11 @@ function DInputCounter(_a, ref) {
|
|
|
577
579
|
useEffect(() => {
|
|
578
580
|
setInternalIsInvalid(!(internalValue >= minValue && internalValue <= maxValue));
|
|
579
581
|
}, [internalValue, minValue, maxValue]);
|
|
580
|
-
return (jsx(DInput$1, Object.assign({ ref: inputRef, value: valueString, style: generateStyleVariables, iconStart: iconStart, iconEnd: iconEnd, invalid: internalIsInvalid || invalid, type: "number", onChange: handleOnChange, onIconStartClick: handleOnIconStartClick, onIconEndClick: handleOnIconEndClick, iconStartAriaLabel: iconStartAriaLabel, iconEndAriaLabel: iconEndAriaLabel },
|
|
582
|
+
return (jsx(DInput$1, Object.assign({ ref: inputRef, value: valueString, style: generateStyleVariables, iconStart: iconStart, iconEnd: iconEnd, invalid: internalIsInvalid || invalid, type: "number", onChange: handleOnChange, onIconStartClick: handleOnIconStartClick, onIconEndClick: handleOnIconEndClick, iconStartAriaLabel: iconStartAriaLabel, iconEndAriaLabel: iconEndAriaLabel }, internalValue === minValue && {
|
|
583
|
+
iconStartDisabled: true,
|
|
584
|
+
}, internalValue === maxValue && {
|
|
585
|
+
iconEndDisabled: true,
|
|
586
|
+
}, props)));
|
|
581
587
|
}
|
|
582
588
|
const ForwardedDInputCounter = forwardRef(DInputCounter);
|
|
583
589
|
ForwardedDInputCounter.displayName = 'DInputCounter';
|
|
@@ -652,7 +658,7 @@ function useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref
|
|
|
652
658
|
}
|
|
653
659
|
|
|
654
660
|
function DInputCurrencyBase(_a, ref) {
|
|
655
|
-
var { value, minValue, maxValue, currencyOptions, currencyCode,
|
|
661
|
+
var { value, minValue, maxValue, currencyOptions, currencyCode, onFocus, onBlur, onChange } = _a, inputProps = __rest(_a, ["value", "minValue", "maxValue", "currencyOptions", "currencyCode", "onFocus", "onBlur", "onChange"]);
|
|
656
662
|
const { inputRef, innerValue, innerType, handleOnFocus, handleOnChange, handleOnBlur, handleOnWheel, generateStyleVariables, generateSymbolStyleVariables, } = useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref);
|
|
657
663
|
return (jsx(DInput$1, Object.assign({ ref: inputRef, value: innerValue, onChange: handleOnChange, style: generateStyleVariables, inputMode: "decimal", pattern: "^[0-9]", type: innerType, onFocus: handleOnFocus, onBlur: handleOnBlur, onWheel: handleOnWheel, inputStart: (jsx("span", { slot: "input-start", style: generateSymbolStyleVariables, children: currencyCode || currencyOptions.symbol })) }, inputProps)));
|
|
658
664
|
}
|
|
@@ -661,7 +667,7 @@ ForwardedDInputCurrencyBase$1.displayName = 'DInputCurrencyBase';
|
|
|
661
667
|
var DInputCurrencyBase$1 = ForwardedDInputCurrencyBase$1;
|
|
662
668
|
|
|
663
669
|
function DInputCurrency(_a, ref) {
|
|
664
|
-
var { value, minValue, maxValue, currencyCode,
|
|
670
|
+
var { value, minValue, maxValue, currencyCode, onFocus, onBlur, onChange } = _a, props = __rest(_a, ["value", "minValue", "maxValue", "currencyCode", "onFocus", "onBlur", "onChange"]);
|
|
665
671
|
const { currency: currencyOptions } = useDContext();
|
|
666
672
|
const { inputRef, innerValue, innerType, handleOnFocus, handleOnChange, handleOnBlur, handleOnWheel, generateStyleVariables, generateSymbolStyleVariables, } = useInputCurrency(currencyOptions, value, onFocus, onChange, onBlur, ref);
|
|
667
673
|
return (jsx(DInput$1, Object.assign({ ref: inputRef, value: innerValue, onChange: handleOnChange, style: generateStyleVariables, inputMode: "decimal", pattern: "^[0-9]", type: innerType, onFocus: handleOnFocus, onBlur: handleOnBlur, onWheel: handleOnWheel, inputStart: (jsx("span", { slot: "input-start", style: generateSymbolStyleVariables, children: currencyCode || currencyOptions.symbol })) }, props)));
|
|
@@ -874,25 +880,6 @@ var DList$1 = Object.assign(DList, {
|
|
|
874
880
|
Item: DListItem,
|
|
875
881
|
});
|
|
876
882
|
|
|
877
|
-
function DListItemMovement(_a) {
|
|
878
|
-
var { description, date, amount, className, style } = _a, props = __rest(_a, ["description", "date", "amount", "className", "style"]);
|
|
879
|
-
const { format } = useFormatCurrency();
|
|
880
|
-
const value = useMemo(() => {
|
|
881
|
-
const valueFormatted = format(amount);
|
|
882
|
-
if (amount > 0) {
|
|
883
|
-
return {
|
|
884
|
-
theme: 'text-success',
|
|
885
|
-
valueFormatted,
|
|
886
|
-
};
|
|
887
|
-
}
|
|
888
|
-
return {
|
|
889
|
-
theme: 'text-danger',
|
|
890
|
-
valueFormatted,
|
|
891
|
-
};
|
|
892
|
-
}, [format, amount]);
|
|
893
|
-
return (jsx(DListItem, Object.assign({}, props, { children: jsxs("div", { className: classNames('d-flex justify-content-between align-items-center p-3 gap-3', className), style: style, children: [jsxs("div", { className: "d-flex flex-column gap-1", children: [jsx("span", { className: "fs-6", children: description }), jsx("span", { className: "small text-gray-700", children: date })] }), jsx("span", { className: classNames('fs-6', value.theme), children: value.valueFormatted })] }) })));
|
|
894
|
-
}
|
|
895
|
-
|
|
896
883
|
function DModalHeader({ showCloseButton, onClose, children, className, style, }) {
|
|
897
884
|
return (jsxs("div", { className: classNames('modal-header', className), style: style, children: [jsx("div", { className: "d-modal-slot", children: children }), showCloseButton && (jsx("button", { type: "button", className: "d-modal-close", "aria-label": "Close", onClick: onClose, children: jsx(DIcon, { icon: "x-lg" }) }))] }));
|
|
898
885
|
}
|
|
@@ -1242,5 +1229,5 @@ async function configureI8n(resources, _a = {}) {
|
|
|
1242
1229
|
.then((t) => t);
|
|
1243
1230
|
}
|
|
1244
1231
|
|
|
1245
|
-
export { DAlert, DBadge, DBoxFile, DButton, DCard$1 as DCard, DCardAccount, DCardBody, DCardFooter, DCardHeader, DCarousel$1 as DCarousel, DCarouselSlide, DChip, DCollapse, DCollapseIconText, DContext, DContextProvider, DCurrencyText, DDatePicker, DIcon, 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, DInputSearch$1 as DInputSearch, DInputSelect, DInputSwitch, DList$1 as DList, DListItem,
|
|
1232
|
+
export { DAlert, DBadge, DBoxFile, DButton, DCard$1 as DCard, DCardAccount, DCardBody, DCardFooter, DCardHeader, DCarousel$1 as DCarousel, DCarouselSlide, DChip, DCollapse, DCollapseIconText, DContext, DContextProvider, DCurrencyText, DDatePicker, DIcon, 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, DInputSearch$1 as DInputSearch, DInputSelect, DInputSwitch, DList$1 as DList, DListItem, DModal$1 as DModal, DModalBody, DModalContext, DModalContextProvider, DModalFooter, DModalHeader, DOffcanvas$1 as DOffcanvas, DOffcanvasBody, DOffcanvasContext, DOffcanvasContextProvider, DOffcanvasFooter, DOffcanvasHeader, DPaginator, DPermissionGroup, DPermissionItem, DPopover, DProgress, DQuickActionButton, DQuickActionCheck, DQuickActionSelect, DQuickActionSwitch, DSkeleton, DStepper, DStepper$2 as DStepperDesktop, DStepper$1 as DStepperMobile, DSummaryCard, DTabContent, DTabs$1 as DTabs, DToastContainer, DTooltip, configureI8n as configureI18n, formatCurrency, useDContext, useDModalContext, useDOffcanvasContext, useDisableBodyScrollEffect, useFormatCurrency, useInputCurrency, usePortal, useProvidedRefOrCreate, useStackState, useTabContext, useToast };
|
|
1246
1233
|
//# sourceMappingURL=index.esm.js.map
|