xmlui 0.10.7 → 0.10.10

package/dist/scripts/src/components/DateInput/DateInputNative.js

@@ -24,11 +24,9 @@ const date_fns_1 = require("date-fns");
 const PartialInput_1 = require("../Input/PartialInput");
 const InputDivider_1 = require("../Input/InputDivider");
 const misc_1 = require("../../components-core/utils/misc");
-const audio_utils_1 = require("../../components-core/utils/audio-utils");
 const InputAdornment_1 = require("../Input/InputAdornment");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
-const parts_1 = require("../../components-core/parts");
 // Component part names
 const PART_DAY = "day";
 const PART_MONTH = "month";
@@ -76,11 +74,10 @@ exports.defaultProps = {
     readOnly: false,
     autoFocus: false,
     labelBreak: false,
-    mute: false,
     emptyCharacter: "-",
 };
 exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
-    var { id, initialValue, value: controlledValue, enabled = exports.defaultProps.enabled, updateState, style, className, onDidChange, onFocus, onBlur, onInvalidChange, onBeep, validationStatus = exports.defaultProps.validationStatus, registerComponentApi, mode = exports.defaultProps.mode, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, minValue, maxValue, disabledDates, inline = exports.defaultProps.inline, clearable = exports.defaultProps.clearable, clearIcon, clearToInitialValue = exports.defaultProps.clearToInitialValue, required = exports.defaultProps.required, startText, startIcon, endText, endIcon, gap, label, labelPosition = exports.defaultProps.labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, mute = exports.defaultProps.mute, emptyCharacter = exports.defaultProps.emptyCharacter } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "updateState", "style", "className", "onDidChange", "onFocus", "onBlur", "onInvalidChange", "onBeep", "validationStatus", "registerComponentApi", "mode", "dateFormat", "showWeekNumber", "weekStartsOn", "minValue", "maxValue", "disabledDates", "inline", "clearable", "clearIcon", "clearToInitialValue", "required", "startText", "startIcon", "endText", "endIcon", "gap", "label", "labelPosition", "labelWidth", "labelBreak", "readOnly", "autoFocus", "mute", "emptyCharacter"]);
+    var { id, initialValue, value: controlledValue, enabled = exports.defaultProps.enabled, updateState, style, className, onDidChange, onFocus, onBlur, onInvalidChange, validationStatus = exports.defaultProps.validationStatus, registerComponentApi, mode = exports.defaultProps.mode, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, minValue, maxValue, disabledDates, inline = exports.defaultProps.inline, clearable = exports.defaultProps.clearable, clearIcon, clearToInitialValue = exports.defaultProps.clearToInitialValue, required = exports.defaultProps.required, startText, startIcon, endText, endIcon, gap, label, labelPosition = exports.defaultProps.labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, emptyCharacter = exports.defaultProps.emptyCharacter } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "updateState", "style", "className", "onDidChange", "onFocus", "onBlur", "onInvalidChange", "validationStatus", "registerComponentApi", "mode", "dateFormat", "showWeekNumber", "weekStartsOn", "minValue", "maxValue", "disabledDates", "inline", "clearable", "clearIcon", "clearToInitialValue", "required", "startText", "startIcon", "endText", "endIcon", "gap", "label", "labelPosition", "labelWidth", "labelBreak", "readOnly", "autoFocus", "emptyCharacter"]);
     const dateInputRef = (0, react_2.useRef)(null);
     // Refs for auto-tabbing between inputs
     const dayInputRef = (0, react_2.useRef)(null);
@@ -180,15 +177,6 @@ exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
         }
         onDidChange === null || onDidChange === void 0 ? void 0 : onDidChange(newValue);
     });
-    // Method to handle beeping - both sound and event
-    const handleBeep = (0, react_2.useCallback)(() => {
-        // Play the beep sound only if not muted
-        if (!mute) {
-            (0, audio_utils_1.beep)(440, 50);
-        }
-        // Always fire the beep event for alternative implementations
-        onBeep === null || onBeep === void 0 ? void 0 : onBeep();
-    }, [onBeep, mute]);
     // Helper function to format the complete date value
     const formatDateValue = (0, react_2.useCallback)((d, m, y) => {
         if (!d || !m || !y) {
@@ -224,6 +212,10 @@ exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
         // Update invalid state immediately for visual feedback
         const isInvalid = validateFn(newValue);
         setInvalid(isInvalid);
+        // Clear day invalid state when any field changes, as the date combination might become valid
+        if (!isInvalid) {
+            setIsDayCurrentlyInvalid(false);
+        }
         // Fire invalid event if the value is invalid
         if (isInvalid) {
             onInvalidChange === null || onInvalidChange === void 0 ? void 0 : onInvalidChange();
@@ -235,18 +227,29 @@ exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
         const normalizedValue = normalizeFn(currentValue);
         // Check if the current value was invalid (needed normalization or couldn't be normalized)
         const wasInvalid = currentValue !== "" && (normalizedValue === null || normalizedValue !== currentValue);
-        if (wasInvalid) {
-            // Play beep sound and fire beep event when manually tabbing out of invalid input
-            handleBeep();
-        }
         if (normalizedValue !== null && normalizedValue !== currentValue) {
             setValue(normalizedValue);
             setInvalid(false); // Clear invalid state after normalization
-            // Always call handleChange to update the date value
+            // Check if the complete date would be valid
             const dateValues = { day, month, year };
             dateValues[field] = normalizedValue;
             const dateString = formatDateValue(dateValues.day, dateValues.month, dateValues.year);
-            handleChange(dateString);
+            if (dateString !== null) {
+                // Valid complete date - update normally
+                handleChange(dateString);
+            }
+            else {
+                // Invalid date combination - mark the day as invalid if all fields are present
+                if (dateValues.day && dateValues.month && dateValues.year) {
+                    setIsDayCurrentlyInvalid(true);
+                    onInvalidChange === null || onInvalidChange === void 0 ? void 0 : onInvalidChange();
+                    // Don't call handleChange with null to avoid clearing the fields
+                }
+                else {
+                    // Incomplete date - call handleChange as normal (will be null)
+                    handleChange(dateString);
+                }
+            }
         }
         else if (normalizedValue === null && currentValue !== "") {
             // Reset to previous valid value or clear
@@ -263,9 +266,24 @@ exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
             const dateValues = { day, month, year };
             dateValues[field] = normalizedValue;
             const dateString = formatDateValue(dateValues.day, dateValues.month, dateValues.year);
-            handleChange(dateString);
+            if (dateString !== null) {
+                // Valid complete date - update normally
+                handleChange(dateString);
+            }
+            else {
+                // Invalid date combination - mark the day as invalid if all fields are present
+                if (dateValues.day && dateValues.month && dateValues.year) {
+                    setIsDayCurrentlyInvalid(true);
+                    onInvalidChange === null || onInvalidChange === void 0 ? void 0 : onInvalidChange();
+                    // Don't call handleChange with null to avoid clearing the fields
+                }
+                else {
+                    // Incomplete date - call handleChange as normal (will be null)
+                    handleChange(dateString);
+                }
+            }
         }
-    }, [day, month, year, handleChange, handleBeep]);
+    }, [day, month, year, handleChange, onInvalidChange]);
     // Handle changes from individual inputs
     const handleDayChange = (0, react_2.useMemo)(() => createInputChangeHandler("day", setDay, setIsDayCurrentlyInvalid, (value) => isDayInvalid(value, month, year)), [createInputChangeHandler, month, year]);
     const handleDayBlur = (0, react_2.useMemo)(() => createInputBlurHandler("day", setDay, setIsDayCurrentlyInvalid, (value) => normalizeDay(value, month, year)), [createInputBlurHandler, month, year]);
@@ -370,6 +388,37 @@ exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
     const setValue = (0, misc_1.useEvent)((newValue) => {
         handleChange(newValue);
     });
+    // Function to get ISO formatted date value (YYYY-MM-DD)
+    const getIsoValue = (0, react_2.useCallback)(() => {
+        if (!day || !month || !year) {
+            return null;
+        }
+        // Convert to numbers
+        const dayNum = parseInt(day, 10);
+        const monthNum = parseInt(month, 10);
+        const yearNum = parseInt(year, 10);
+        if (isNaN(dayNum) || isNaN(monthNum) || isNaN(yearNum)) {
+            return null;
+        }
+        try {
+            // Create date object (month is 0-indexed in Date constructor)
+            const date = new Date(yearNum, monthNum - 1, dayNum);
+            // Validate the date
+            if (date.getFullYear() !== yearNum ||
+                date.getMonth() !== monthNum - 1 ||
+                date.getDate() !== dayNum) {
+                return null;
+            }
+            // Format as ISO date string (YYYY-MM-DD)
+            const year4 = yearNum.toString().padStart(4, "0");
+            const month2 = monthNum.toString().padStart(2, "0");
+            const day2 = dayNum.toString().padStart(2, "0");
+            return `${year4}-${month2}-${day2}`;
+        }
+        catch (error) {
+            return null;
+        }
+    }, [day, month, year]);
     // Component API registration
     (0, react_2.useImperativeHandle)(ref, () => dateInputRef.current);
     (0, react_2.useEffect)(() => {
@@ -377,9 +426,10 @@ exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
             registerComponentApi({
                 focus,
                 setValue,
+                isoValue: getIsoValue,
             });
         }
-    }, [registerComponentApi, focus, setValue]);
+    }, [registerComponentApi, focus, setValue, getIsoValue]);
     // Custom clear icon
     const clearIconElement = (0, react_2.useMemo)(() => {
         if (clearIcon === null || clearIcon === "null")
@@ -428,11 +478,11 @@ exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
             };
             switch (field) {
                 case "day":
-                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(DayInput, { autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: dayInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleDayChange, onBlur: handleDayBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: day, isInvalid: isDayCurrentlyInvalid, month: month, year: year, onBeep: handleBeep, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "day"));
+                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(DayInput, { autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: dayInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleDayChange, onBlur: handleDayBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: day, isInvalid: isDayCurrentlyInvalid, month: month, year: year, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "day"));
                 case "month":
-                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(MonthInput, { autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: monthInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleMonthChange, onBlur: handleMonthBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: month, isInvalid: isMonthCurrentlyInvalid, onBeep: handleBeep, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "month"));
+                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(MonthInput, { autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: monthInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleMonthChange, onBlur: handleMonthBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: month, isInvalid: isMonthCurrentlyInvalid, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "month"));
                 case "year":
-                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(YearInput, { autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: yearInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleYearChange, onBlur: handleYearBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: year, isInvalid: isYearCurrentlyInvalid, dateFormat: dateFormat, onBeep: handleBeep, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "year"));
+                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(YearInput, { autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: yearInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleYearChange, onBlur: handleYearBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: year, isInvalid: isYearCurrentlyInvalid, dateFormat: dateFormat, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "year"));
                 default:
                     return null;
             }
@@ -444,7 +494,7 @@ exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
             [DateInput_module_scss_1.default.valid]: validationStatus === "valid",
             [DateInput_module_scss_1.default.disabled]: !enabled,
             [DateInput_module_scss_1.default.readOnly]: readOnly,
-        }, className), style: Object.assign(Object.assign({}, style), { gap }), onFocusCapture: handleComponentFocus, onBlur: handleComponentBlur, "data-validation-status": validationStatus }, rest, { children: [startAdornment, (0, jsx_runtime_1.jsxs)("div", { className: DateInput_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: DateInput_module_scss_1.default.inputGroup, children: createDateInputs() }), clearable && ((0, jsx_runtime_1.jsx)("button", { className: (0, classnames_1.default)((0, parts_1.partClassName)(PART_CLEAR_BUTTON), DateInput_module_scss_1.default.clearButton, DateInput_module_scss_1.default.button), disabled: !enabled, onClick: clear, onFocus: stopPropagation, type: "button", children: clearIconElement }))] }), endAdornment] })));
+        }, className), style: Object.assign(Object.assign({}, style), { gap }), onFocusCapture: handleComponentFocus, onBlur: handleComponentBlur, "data-validation-status": validationStatus }, rest, { children: [startAdornment, (0, jsx_runtime_1.jsxs)("div", { className: DateInput_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: DateInput_module_scss_1.default.inputGroup, children: createDateInputs() }), clearable && ((0, jsx_runtime_1.jsx)("button", { "data-part-id": PART_CLEAR_BUTTON, className: (0, classnames_1.default)(DateInput_module_scss_1.default.clearButton, DateInput_module_scss_1.default.button), disabled: !enabled, onClick: clear, onFocus: stopPropagation, type: "button", children: clearIconElement }))] }), endAdornment] })));
     // Wrap with label if needed
     if (label) {
         return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { label: label, labelPosition: labelPosition, labelWidth: labelWidth, labelBreak: labelBreak, required: required, children: dateInputComponent }));
@@ -503,23 +553,23 @@ function DayInput(_a) {
         }
         return 31; // Default to 31 if month/year not available
     }, [month, year]);
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { value: value, emptyCharacter: emptyCharacter, placeholderLength: 2, max: Math.min(maxDay, 31), min: 1, maxLength: 2, validateFn: (val) => isDayInvalid(val, month, year), onBeep: onBeep, onChange: otherProps.onChange, onBlur: (direction, event) => {
+    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { "data-part-id": PART_DAY, value: value, emptyCharacter: emptyCharacter, placeholderLength: 2, max: Math.min(maxDay, 31), min: 1, maxLength: 2, validateFn: (val) => isDayInvalid(val, month, year), onBeep: onBeep, onChange: otherProps.onChange, onBlur: (direction, event) => {
             // PartialInput provides direction, but current onBlur expects just event
             if (otherProps.onBlur) {
                 // Provide both direction and event to match the expected signature
                 otherProps.onBlur(direction, event);
             }
-        }, onKeyDown: otherProps.onKeyDown, className: (0, classnames_1.default)((0, parts_1.partClassName)(PART_DAY), DateInput_module_scss_1.default.input, DateInput_module_scss_1.default.day), invalidClassName: DateInput_module_scss_1.default.invalid, disabled: otherProps.disabled, readOnly: otherProps.readOnly, required: otherProps.required, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, name: "day", ariaLabel: otherProps.ariaLabel, isInvalid: isInvalid }));
+        }, onKeyDown: otherProps.onKeyDown, className: (0, classnames_1.default)(DateInput_module_scss_1.default.input, DateInput_module_scss_1.default.day), invalidClassName: DateInput_module_scss_1.default.invalid, disabled: otherProps.disabled, readOnly: otherProps.readOnly, required: otherProps.required, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, name: "day", ariaLabel: otherProps.ariaLabel, isInvalid: isInvalid }));
 }
 function MonthInput(_a) {
     var { minValue, maxValue, value, isInvalid = false, onBeep, emptyCharacter = "-" } = _a, otherProps = __rest(_a, ["minValue", "maxValue", "value", "isInvalid", "onBeep", "emptyCharacter"]);
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { max: 12, min: 1, name: "month", value: value, invalidClassName: DateInput_module_scss_1.default.invalid, isInvalid: isInvalid, validateFn: isMonthInvalid, onBeep: onBeep, onChange: otherProps.onChange, emptyCharacter: emptyCharacter, placeholderLength: 2, className: (0, classnames_1.default)((0, parts_1.partClassName)(PART_MONTH), DateInput_module_scss_1.default.input, DateInput_module_scss_1.default.month), maxLength: 2, onBlur: (direction, event) => {
+    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { "data-part-id": PART_MONTH, max: 12, min: 1, name: "month", value: value, invalidClassName: DateInput_module_scss_1.default.invalid, isInvalid: isInvalid, validateFn: isMonthInvalid, onBeep: onBeep, onChange: otherProps.onChange, emptyCharacter: emptyCharacter, placeholderLength: 2, className: (0, classnames_1.default)(DateInput_module_scss_1.default.input, DateInput_module_scss_1.default.month), maxLength: 2, disabled: otherProps.disabled, required: otherProps.required, onBlur: (direction, event) => {
             // PartialInput provides direction, but current onBlur expects just event
             if (otherProps.onBlur) {
                 // Provide both direction and event to match the expected signature
                 otherProps.onBlur(direction, event);
             }
-        } }));
+        }, onKeyDown: otherProps.onKeyDown, readOnly: otherProps.readOnly, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, ariaLabel: otherProps.ariaLabel }));
 }
 function YearInput(_a) {
     var { minValue, maxValue, value, isInvalid = false, dateFormat = "MM/dd/yyyy", onBeep, emptyCharacter = "-" } = _a, otherProps = __rest(_a, ["minValue", "maxValue", "value", "isInvalid", "dateFormat", "onBeep", "emptyCharacter"]);
@@ -529,7 +579,7 @@ function YearInput(_a) {
     const min = 1900;
     const max = currentYear + 100;
     const { className: originalClassName } = otherProps, restProps = __rest(otherProps, ["className"]);
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, Object.assign({ max: max, min: min, name: "year", value: value, isInvalid: isInvalid, invalidClassName: DateInput_module_scss_1.default.invalid, validateFn: isYearInvalid, onBeep: onBeep, emptyCharacter: emptyCharacter, placeholderLength: 4, className: (0, classnames_1.default)((0, parts_1.partClassName)(PART_YEAR), DateInput_module_scss_1.default.input, DateInput_module_scss_1.default.year, originalClassName), maxLength: maxLength, onBlur: (direction, event) => {
+    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, Object.assign({ "data-part-id": PART_YEAR, max: max, min: min, name: "year", value: value, isInvalid: isInvalid, invalidClassName: DateInput_module_scss_1.default.invalid, validateFn: isYearInvalid, onBeep: onBeep, emptyCharacter: emptyCharacter, placeholderLength: 4, className: (0, classnames_1.default)(DateInput_module_scss_1.default.input, DateInput_module_scss_1.default.year, originalClassName), maxLength: maxLength, onBlur: (direction, event) => {
             // PartialInput provides direction, but current onBlur expects just event
             if (otherProps.onBlur) {
                 // Provide both direction and event to match the expected signature
@@ -549,17 +599,30 @@ function onFocus(event) {
 }
 // Utility function to parse date string into components
 function parseDateString(dateString, dateFormat) {
+    // Handle non-string values gracefully by returning null (empty fields)
+    if (typeof dateString !== 'string' || dateString === null || dateString === undefined) {
+        return null;
+    }
     try {
         // Try to parse the date using the specified format
         const parsedDate = (0, date_fns_1.parse)(dateString, dateFormat, new Date());
-        if (!(0, date_fns_1.isValid)(parsedDate)) {
-            return null;
+        if ((0, date_fns_1.isValid)(parsedDate)) {
+            return {
+                day: parsedDate.getDate().toString().padStart(2, "0"),
+                month: (parsedDate.getMonth() + 1).toString().padStart(2, "0"),
+                year: parsedDate.getFullYear().toString(),
+            };
         }
-        return {
-            day: parsedDate.getDate().toString().padStart(2, "0"),
-            month: (parsedDate.getMonth() + 1).toString().padStart(2, "0"),
-            year: parsedDate.getFullYear().toString(),
-        };
+        // Fallback: Try to parse as ISO date string
+        const isoDate = new Date(dateString);
+        if (!isNaN(isoDate.getTime())) {
+            return {
+                day: isoDate.getDate().toString().padStart(2, "0"),
+                month: (isoDate.getMonth() + 1).toString().padStart(2, "0"),
+                year: isoDate.getFullYear().toString(),
+            };
+        }
+        return null;
     }
     catch (error) {
         return null;

package/dist/scripts/src/components/ExpandableItem/ExpandableItemNative.js

@@ -33,6 +33,9 @@ exports.defaultExpandableItemProps = {
 exports.ExpandableItem = (0, react_1.forwardRef)(function ExpandableItem(_a, ref) {
     var { summary, children, className, style, initiallyExpanded = exports.defaultExpandableItemProps.initiallyExpanded, enabled = exports.defaultExpandableItemProps.enabled, iconExpanded = exports.defaultExpandableItemProps.iconExpanded, iconCollapsed = exports.defaultExpandableItemProps.iconCollapsed, iconPosition = exports.defaultExpandableItemProps.iconPosition, withSwitch = exports.defaultExpandableItemProps.withSwitch, onExpandedChange, registerComponentApi } = _a, rest = __rest(_a, ["summary", "children", "className", "style", "initiallyExpanded", "enabled", "iconExpanded", "iconCollapsed", "iconPosition", "withSwitch", "onExpandedChange", "registerComponentApi"]);
     const [isOpen, setIsOpen] = (0, react_2.useState)(initiallyExpanded);
+    const generatedId = (0, react_1.useId)();
+    const summaryId = `${generatedId}-summary`;
+    const contentId = `${generatedId}-content`;
     const toggleOpen = (0, react_1.useCallback)(() => {
         if (!enabled)
             return;
@@ -73,25 +76,28 @@ exports.ExpandableItem = (0, react_1.forwardRef)(function ExpandableItem(_a, ref
             isExpanded: getIsExpanded,
         });
     }, [registerComponentApi, expand, collapse, toggle, getIsExpanded]);
-    // Create refs for the Toggle components
-    const toggleStartRef = (0, react_1.useRef)();
-    const toggleEndRef = (0, react_1.useRef)();
     // Handler for clicking on the summary when using a switch
     const handleSummaryClick = (0, react_1.useCallback)(() => {
-        var _a, _b;
         if (!enabled || !withSwitch)
             return;
         const newValue = !isOpen;
         setIsOpen(newValue);
         onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(newValue);
-        // Update the toggle switch UI state too
-        if (iconPosition === "start" && ((_a = toggleStartRef.current) === null || _a === void 0 ? void 0 : _a.setValue)) {
-            toggleStartRef.current.setValue(newValue);
-        }
-        else if (iconPosition === "end" && ((_b = toggleEndRef.current) === null || _b === void 0 ? void 0 : _b.setValue)) {
-            toggleEndRef.current.setValue(newValue);
+    }, [enabled, withSwitch, isOpen, onExpandedChange]);
+    // Handle keyboard events for accessibility
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (!enabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (withSwitch) {
+                handleSwitchChange(!isOpen);
+            }
+            else {
+                toggleOpen();
+            }
         }
-    }, [enabled, withSwitch, isOpen, onExpandedChange, iconPosition]);
+    }, [enabled, withSwitch, isOpen, handleSwitchChange, toggleOpen]);
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(ExpandableItem_module_scss_1.default.expandableItem, className, {
             [ExpandableItem_module_scss_1.default.open]: isOpen,
             [ExpandableItem_module_scss_1.default.disabled]: !enabled,
@@ -99,5 +105,5 @@ exports.ExpandableItem = (0, react_1.forwardRef)(function ExpandableItem(_a, ref
         }), style: style, ref: ref, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(ExpandableItem_module_scss_1.default.summary, {
                     [ExpandableItem_module_scss_1.default.iconStart]: iconPosition === "start",
                     [ExpandableItem_module_scss_1.default.iconEnd]: iconPosition === "end",
-                }), onClick: enabled ? (withSwitch ? handleSummaryClick : toggleOpen) : undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: withSwitch ? ExpandableItem_module_scss_1.default.switch : ExpandableItem_module_scss_1.default.icon, children: withSwitch ? ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { variant: "switch", value: isOpen, enabled: enabled, onDidChange: handleSwitchChange })) : ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: isOpen ? iconExpanded : iconCollapsed, fallback: isOpen ? "chevrondown" : "chevronright" })) }), (0, jsx_runtime_1.jsx)("div", { className: ExpandableItem_module_scss_1.default.summaryContent, children: summary })] }), isOpen && (0, jsx_runtime_1.jsx)("div", { className: ExpandableItem_module_scss_1.default.content, children: children })] })));
+                }), onClick: enabled ? (withSwitch ? handleSummaryClick : toggleOpen) : undefined, onKeyDown: handleKeyDown, tabIndex: enabled ? 0 : undefined, role: "button", "aria-expanded": isOpen, "aria-controls": contentId, "aria-disabled": !enabled, id: summaryId, children: [(0, jsx_runtime_1.jsx)("div", { className: withSwitch ? ExpandableItem_module_scss_1.default.switch : ExpandableItem_module_scss_1.default.icon, "aria-hidden": "true", children: withSwitch ? ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { variant: "switch", value: isOpen, enabled: enabled, onDidChange: handleSwitchChange })) : ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: isOpen ? iconExpanded : iconCollapsed, fallback: isOpen ? "chevrondown" : "chevronright" })) }), (0, jsx_runtime_1.jsx)("div", { className: ExpandableItem_module_scss_1.default.summaryContent, children: summary })] }), isOpen && ((0, jsx_runtime_1.jsx)("div", { className: ExpandableItem_module_scss_1.default.content, role: "region", "aria-labelledby": summaryId, id: contentId, children: children }))] })));
 });

package/dist/scripts/src/components/FormItem/ItemWithLabel.js

@@ -37,7 +37,7 @@ exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel(_a, ref)
     const generatedId = (0, react_1.useId)();
     const inputId = id || generatedId;
     if (label === undefined && !validationResult) {
-        return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, Object.assign({}, rest, { style: style, className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_LABELED_ITEM), className), id: inputId, ref: ref, children: children })));
+        return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, Object.assign({}, rest, { "data-part-id": parts_1.PART_LABELED_ITEM, style: style, className: className, id: inputId, ref: ref, children: children })));
         // return cloneElement(children as ReactElement, {
         //   ...mergeProps((children as ReactElement).props, {
         //     style,
@@ -53,9 +53,9 @@ exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel(_a, ref)
                     [FormItem_module_scss_1.default.start]: labelPosition === "start",
                     [FormItem_module_scss_1.default.end]: labelPosition === "end",
                     [FormItem_module_scss_1.default.shrinkToLabel]: shrinkToLabel,
-                }), children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: inputId, onClick: () => { var _a; return (_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.focus(); }, style: Object.assign(Object.assign({}, labelStyle), { width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth, flexShrink: labelWidth !== undefined ? 0 : undefined }), className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_LABEL), FormItem_module_scss_1.default.inputLabel, {
+                }), children: [label && ((0, jsx_runtime_1.jsxs)("label", { "data-part-id": parts_1.PART_LABEL, htmlFor: inputId, onClick: () => { var _a; return (_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.focus(); }, style: Object.assign(Object.assign({}, labelStyle), { width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth, flexShrink: labelWidth !== undefined ? 0 : undefined }), className: (0, classnames_1.default)(FormItem_module_scss_1.default.inputLabel, {
                             [FormItem_module_scss_1.default.required]: required,
                             [FormItem_module_scss_1.default.disabled]: !enabled,
                             [FormItem_module_scss_1.default.labelBreak]: labelBreak,
-                        }), children: [label, " ", required && (0, jsx_runtime_1.jsx)("span", { className: FormItem_module_scss_1.default.requiredMark, children: "*" }), validationInProgress && ((0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, { style: { height: "1em", width: "1em", marginLeft: "1em", alignSelf: "center" } }))] })), (0, jsx_runtime_1.jsx)(react_slot_1.Slot, { className: (0, parts_1.partClassName)(parts_1.PART_LABELED_ITEM), id: !isInputTemplateUsed ? inputId : undefined, children: children })] }), validationResult] })));
+                        }), children: [label, " ", required && (0, jsx_runtime_1.jsx)("span", { className: FormItem_module_scss_1.default.requiredMark, children: "*" }), validationInProgress && ((0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, { style: { height: "1em", width: "1em", marginLeft: "1em", alignSelf: "center" } }))] })), (0, jsx_runtime_1.jsx)(react_slot_1.Slot, { "data-part-id": parts_1.PART_LABELED_ITEM, id: !isInputTemplateUsed ? inputId : undefined, children: children })] }), validationResult] })));
 });

package/dist/scripts/src/components/Input/PartialInput.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -24,7 +35,8 @@ const PartialInput_module_scss_1 = __importDefault(require("./PartialInput.modul
  * @param props - PartialInputProps configuration
  * @returns A configured input element with enhanced multi-field input behavior
  */
-function PartialInput({ value, placeholder, onChange, onBlur, onKeyDown, emptyCharacter, placeholderLength = 2, max, min, maxLength = 2, validateFn, onBeep, nextInputRef, nextButtonRef, name, ariaLabel, className, invalidClassName, disabled, readOnly, required, autoFocus, inputRef, step = 1, isInvalid = false, }) {
+function PartialInput(_a) {
+    var { value, placeholder, onChange, onBlur, onKeyDown, emptyCharacter, placeholderLength = 2, max, min, maxLength = 2, validateFn, onBeep, nextInputRef, nextButtonRef, name, ariaLabel, className, invalidClassName, disabled, readOnly, required, autoFocus, inputRef, step = 1, isInvalid = false } = _a, restProps = __rest(_a, ["value", "placeholder", "onChange", "onBlur", "onKeyDown", "emptyCharacter", "placeholderLength", "max", "min", "maxLength", "validateFn", "onBeep", "nextInputRef", "nextButtonRef", "name", "ariaLabel", "className", "invalidClassName", "disabled", "readOnly", "required", "autoFocus", "inputRef", "step", "isInvalid"]);
     /**
      * Process emptyCharacter according to requirements.
      * Handles null/empty values, multi-character strings, and unicode characters.
@@ -122,9 +134,22 @@ function PartialInput({ value, placeholder, onChange, onBlur, onKeyDown, emptyCh
         // Call the enhanced onBlur handler with direction
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(direction, event);
     }, [onBlur, nextInputRef, nextButtonRef]);
-    return ((0, jsx_runtime_1.jsx)("input", { "aria-label": ariaLabel, autoComplete: "off", 
+    /**
+     * Enhanced key down handler that prevents space character input.
+     * Filters out space key presses while allowing other keys to pass through.
+     */
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        // Prevent space character input
+        if (event.key === " " || event.code === "Space") {
+            event.preventDefault();
+            return;
+        }
+        // Call the original onKeyDown handler for other keys
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }, [onKeyDown]);
+    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, restProps, { "aria-label": ariaLabel, autoComplete: "off", 
         // biome-ignore lint/a11y/noAutofocus: This is up to developers' decision
         autoFocus: autoFocus, className: (0, classnames_1.default)(PartialInput_module_scss_1.default.partialInput, className, {
             [invalidClassName]: isInvalid,
-        }), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, maxLength: maxLength, min: min, name: name, onChange: handleInputChange, onBlur: handleBlur, onFocus: handleInternalFocus, onKeyDown: onKeyDown, placeholder: finalPlaceholder, readOnly: readOnly, ref: inputRef, required: required, step: step, type: "text", value: value !== null ? value : "" }));
+        }), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, maxLength: maxLength, min: min, name: name, onChange: handleInputChange, onBlur: handleBlur, onFocus: handleInternalFocus, onKeyDown: handleKeyDown, placeholder: finalPlaceholder, readOnly: readOnly, ref: inputRef, required: required, step: step, type: "text", value: value !== null ? value : "" })));
 }

package/dist/scripts/src/components/List/ListNative.js

@@ -66,7 +66,6 @@ const constants_1 = require("../../components-core/constants");
 const CardNative_1 = require("../Card/CardNative");
 const virtua_1 = require("virtua");
 const hooks_1 = require("../../components-core/utils/hooks");
-const ScrollContext_1 = require("../../components-core/ScrollContext");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const List_module_scss_1 = __importDefault(require("./List.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
@@ -228,14 +227,16 @@ const useShift = (listData, idKey) => {
     return shouldShift.current;
 };
 exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList(_a, ref) {
-    var _b;
+    var _b, _c;
     var { items = constants_1.EMPTY_ARRAY, itemRenderer = defaultItemRenderer, sectionRenderer, sectionFooterRenderer, loading, limit, groupBy, orderBy, availableGroups, scrollAnchor = exports.defaultProps.scrollAnchor, requestFetchPrevPage = lodash_es_1.noop, requestFetchNextPage = lodash_es_1.noop, pageInfo, idKey = exports.defaultProps.idKey, style, className, emptyListPlaceholder, groupsInitiallyExpanded = true, defaultGroups = constants_1.EMPTY_ARRAY, registerComponentApi, borderCollapse = exports.defaultProps.borderCollapse } = _a, rest = __rest(_a, ["items", "itemRenderer", "sectionRenderer", "sectionFooterRenderer", "loading", "limit", "groupBy", "orderBy", "availableGroups", "scrollAnchor", "requestFetchPrevPage", "requestFetchNextPage", "pageInfo", "idKey", "style", "className", "emptyListPlaceholder", "groupsInitiallyExpanded", "defaultGroups", "registerComponentApi", "borderCollapse"]);
     const virtualizerRef = (0, react_1.useRef)(null);
-    const scrollRef = (0, react_1.useContext)(ScrollContext_1.ScrollContext);
     const parentRef = (0, react_1.useRef)(null);
     const rootRef = ref ? (0, react_compose_refs_1.composeRefs)(parentRef, ref) : parentRef;
+    const scrollParent = (0, hooks_1.useScrollParent)((_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.parentElement);
+    const scrollRef = (0, react_1.useRef)(scrollParent);
+    scrollRef.current = scrollParent;
     const hasHeight = (0, hooks_1.useHasExplicitHeight)(parentRef);
-    const hasOutsideScroll = scrollRef && !hasHeight;
+    const hasOutsideScroll = scrollRef.current && !hasHeight;
     const scrollElementRef = hasOutsideScroll ? scrollRef : parentRef;
     const shouldStickToBottom = (0, react_1.useRef)(scrollAnchor === "bottom");
     const [expanded, setExpanded] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
@@ -384,7 +385,7 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList(_a, ref)
     // REVIEW: I changed this code line because in the build version rows[index] was undefined
     // const rowTypeContextValue = useCallback((index: number) => rows[index]._row_type, [rows]);
     const rowTypeContextValue = (0, react_1.useCallback)((index) => { var _a; return (_a = rows === null || rows === void 0 ? void 0 : rows[index]) === null || _a === void 0 ? void 0 : _a._row_type; }, [rows]);
-    const rowCount = (_b = rows === null || rows === void 0 ? void 0 : rows.length) !== null && _b !== void 0 ? _b : 0;
+    const rowCount = (_c = rows === null || rows === void 0 ? void 0 : rows.length) !== null && _c !== void 0 ? _c : 0;
     const startMargin = (0, hooks_1.useStartMargin)(hasOutsideScroll, parentRef, scrollRef);
     return ((0, jsx_runtime_1.jsx)(ListItemTypeContext.Provider, { value: rowTypeContextValue, children: (0, jsx_runtime_1.jsx)(exports.ListContext.Provider, { value: expandContextValue, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { ref: rootRef, style: style, className: (0, classnames_1.default)(List_module_scss_1.default.outerWrapper, {
                     [List_module_scss_1.default.hasOutsideScroll]: hasOutsideScroll,

package/dist/scripts/src/components/NavPanel/NavPanelNative.js

@@ -52,10 +52,8 @@ exports.buildNavHierarchy = buildNavHierarchy;
 exports.buildLinkMap = buildLinkMap;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const classnames_1 = __importDefault(require("classnames"));
 const NavPanel_module_scss_1 = __importDefault(require("./NavPanel.module.scss"));
-const ScrollContext_1 = require("../../components-core/ScrollContext");
 const LogoNative_1 = require("../Logo/LogoNative");
 const AppLayoutContext_1 = require("../App/AppLayoutContext");
 const AppNative_1 = require("../App/AppNative");
@@ -193,14 +191,11 @@ const contextValue = {
 };
 function DrawerNavPanel(_a) {
     var { logoContent, children, className, style } = _a, rest = __rest(_a, ["logoContent", "children", "className", "style"]);
-    const scrollContainerRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(exports.NavPanelContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: scrollContainerRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className), style: style, children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper, NavPanel_module_scss_1.default.inDrawer), children: logoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) })) }));
+    return ((0, jsx_runtime_1.jsx)(exports.NavPanelContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className), style: style, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper, NavPanel_module_scss_1.default.inDrawer), children: logoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] })) }));
 }
 exports.NavPanel = (0, react_1.forwardRef)(function NavPanel(_a, forwardedRef) {
     var _b, _c;
     var { children, style, logoContent, className, inDrawer = exports.defaultProps.inDrawer, renderChild, navLinks } = _a, rest = __rest(_a, ["children", "style", "logoContent", "className", "inDrawer", "renderChild", "navLinks"]);
-    const scrollContainerRef = (0, react_1.useRef)(null);
-    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(scrollContainerRef, forwardedRef) : scrollContainerRef;
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const linkInfoContext = (0, LinkInfoContext_1.useLinkInfoContext)();
     const horizontal = (0, AppNative_1.getAppLayoutOrientation)(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "horizontal";
@@ -219,9 +214,9 @@ exports.NavPanel = (0, react_1.forwardRef)(function NavPanel(_a, forwardedRef) {
     if (inDrawer) {
         return ((0, jsx_runtime_1.jsx)(DrawerNavPanel, Object.assign({}, rest, { style: style, logoContent: safeLogoContent, className: className, children: children })));
     }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { ref: forwardedRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
             [NavPanel_module_scss_1.default.horizontal]: horizontal,
             [NavPanel_module_scss_1.default.vertical]: vertical,
             [NavPanel_module_scss_1.default.condensed]: isCondensed,
-        }), style: style, children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [showLogo && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper), children: safeLogoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) })), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) })));
+        }), style: style, children: [showLogo && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper), children: safeLogoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) })), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] })));
 });

package/dist/scripts/src/components/NumberBox/NumberBoxNative.js

@@ -321,9 +321,9 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
             }), tabIndex: -1, onFocus: () => {
                 var _a;
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_START_ADORNMENT), NumberBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", inputMode: "numeric", className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_INPUT), NumberBox_module_scss_1.default.input, {
+            }, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_START_ADORNMENT, text: startText, iconName: startIcon, className: (0, classnames_1.default)(NumberBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, "data-part-id": parts_1.PART_INPUT, type: "text", inputMode: "numeric", className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input, {
                         [NumberBox_module_scss_1.default.readOnly]: readOnly,
-                    }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_END_ADORNMENT), NumberBox_module_scss_1.default.adornment) }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "up", type: "button", role: "spinbutton", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: spinnerUpIcon || "spinnerUp:NumberBox", fallback: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "down", type: "button", role: "spinbutton", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: spinnerDownIcon || "spinnerDown:NumberBox", fallback: "chevrondown", size: "sm" }) })] }))] }) })));
+                    }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, text: endText, iconName: endIcon, className: (0, classnames_1.default)(NumberBox_module_scss_1.default.adornment) }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "up", type: "button", role: "spinbutton", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: spinnerUpIcon || "spinnerUp:NumberBox", fallback: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "down", type: "button", role: "spinbutton", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: spinnerDownIcon || "spinnerDown:NumberBox", fallback: "chevrondown", size: "sm" }) })] }))] }) })));
 });
 function applyStep(valueStrRep, step, min, max, integersOnly) {
     const currentValue = (0, numberbox_abstractions_1.toUsableNumber)(valueStrRep, integersOnly);

package/dist/scripts/src/components/Pagination/Pagination.js

@@ -23,7 +23,8 @@ exports.PaginationMd = (0, metadata_helpers_1.createMetadata)({
             "that are enabled/disabled using the `hasPrevPage` and `hasNextPage` props.", undefined, "number"),
         pageSize: (0, metadata_helpers_1.d)("Number of items per page", undefined, "number", PaginationNative_1.defaultProps.pageSize),
         pageIndex: (0, metadata_helpers_1.d)("Current page index (0-based)", undefined, "number", PaginationNative_1.defaultProps.pageIndex),
-        maxVisiblePages: (0, metadata_helpers_1.d)("Maximum number of page buttons to display", undefined, "number", PaginationNative_1.defaultProps.maxVisiblePages),
+        maxVisiblePages: (0, metadata_helpers_1.d)("Maximum number of page buttons to display. " +
+            "If the value is not among the allowed values, it will fall back to the default.", PaginationNative_1.PageNumberValues, "number", PaginationNative_1.defaultProps.maxVisiblePages),
         showPageInfo: (0, metadata_helpers_1.d)("Whether to show page information", undefined, "boolean", PaginationNative_1.defaultProps.showPageInfo),
         showPageSizeSelector: (0, metadata_helpers_1.d)("Whether to show the page size selector", undefined, "boolean", PaginationNative_1.defaultProps.showPageSizeSelector),
         showCurrentPage: (0, metadata_helpers_1.d)("Whether to show the current page indicator", undefined, "boolean", PaginationNative_1.defaultProps.showCurrentPage),

package/dist/scripts/src/components/Slider/Slider.js

@@ -5,18 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sliderComponentRenderer = exports.SliderMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const SliderNative_1 = require("./SliderNative");
 const Slider_module_scss_1 = __importDefault(require("./Slider.module.scss"));
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
-const SliderNative_1 = require("./SliderNative");
 const COMP = "Slider";
 exports.SliderMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
     description: "`Slider` provides an interactive control for selecting numeric values within " +
         "a defined range, supporting both single value selection and range selection with " +
         "multiple thumbs. It offers precise control through customizable steps and visual " +
-        "feedback with formatted value display.",
+        "feedback with formatted value display." +
+        "\n\n" +
+        "Hover over the component to see the tooltip with the current value. On mobile, tap the thumb to see the tooltip.",
     props: {
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
         label: (0, metadata_helpers_1.dLabel)(),
@@ -26,29 +28,29 @@ exports.SliderMd = (0, metadata_helpers_1.createMetadata)({
         minValue: {
             description: `This property specifies the minimum value of the allowed input range.`,
             valueType: "number",
-            defaultValue: SliderNative_1.defaultProps.min,
+            defaultValue: 0,
         },
         maxValue: {
             description: `This property specifies the maximum value of the allowed input range.`,
             valueType: "number",
-            defaultValue: SliderNative_1.defaultProps.max,
+            defaultValue: 10,
         },
         step: {
             description: `This property defines the increment value for the slider, determining the allowed intervals between selectable values.`,
-            defaultValue: SliderNative_1.defaultProps.step,
+            defaultValue: 1,
         },
-        minStepsBetweenThumbs: (0, metadata_helpers_1.d)(`This property sets the minimum number of steps required between multiple thumbs on the slider, ensuring they maintain a specified distance.`, undefined, "number", SliderNative_1.defaultProps.minStepsBetweenThumbs),
+        minStepsBetweenThumbs: (0, metadata_helpers_1.d)(`This property sets the minimum number of steps required between multiple thumbs on the slider, ensuring they maintain a specified distance.`, undefined, "number", 1),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         required: (0, metadata_helpers_1.dRequired)(),
         readOnly: (0, metadata_helpers_1.dReadonly)(),
-        validationStatus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dValidationStatus)()), { defaultValue: SliderNative_1.defaultProps.validationStatus }),
+        validationStatus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dValidationStatus)()), { defaultValue: "none" }),
         rangeStyle: (0, metadata_helpers_1.d)(`This optional property allows you to apply custom styles to the range element of the slider.`),
         thumbStyle: (0, metadata_helpers_1.d)(`This optional property allows you to apply custom styles to the thumb elements of the slider.`),
         showValues: {
             description: `This property controls whether the slider shows the current values of the thumbs.`,
             valueType: "boolean",
-            defaultValue: SliderNative_1.defaultProps.showValues,
+            defaultValue: true,
         },
         valueFormat: {
             description: `This property allows you to customize how the values are displayed.`,