xmlui 0.10.8 → 0.10.11

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/DropdownMenu/DropdownMenu.js

@@ -130,7 +130,7 @@ exports.MenuItemMd = (0, metadata_helpers_1.createMetadata)({
         [`color-${MICOMP}`]: "$textColor-primary",
         [`color-${MICOMP}--disabled`]: "$textColor--disabled",
         [`fontFamily-${MICOMP}`]: "$fontFamily",
-        [`fontSize-${MICOMP}`]: "$fontSize-small",
+        [`fontSize-${MICOMP}`]: "$fontSize-sm",
         [`paddingVertical-${MICOMP}`]: "$space-2",
         [`paddingHorizontal-${MICOMP}`]: "$space-3",
         [`backgroundColor-${MICOMP}--hover`]: "$backgroundColor-dropdown-item--hover",

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/Footer/Footer.js

@@ -22,7 +22,7 @@ exports.FooterMd = (0, metadata_helpers_1.createMetadata)({
     defaultThemeVars: {
         [`backgroundColor-${COMP}`]: "$backgroundColor-AppHeader",
         [`verticalAlignment-${COMP}`]: "center",
-        [`fontSize-${COMP}`]: "$fontSize-small",
+        [`fontSize-${COMP}`]: "$fontSize-sm",
         [`textColor-${COMP}`]: "$textColor-secondary",
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",
         [`borderTop-${COMP}`]: `1px solid $borderColor`,

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

@@ -193,7 +193,7 @@ exports.FormItemMd = (0, metadata_helpers_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(FormItem_module_scss_1.default.themeVars),
     defaultThemeVars: {
         "textColor-FormItemLabel": "$textColor-primary",
-        "fontSize-FormItemLabel": "$fontSize-small",
+        "fontSize-FormItemLabel": "$fontSize-sm",
         "fontWeight-FormItemLabel": "$fontWeight-medium",
         "fontStyle-FormItemLabel": "normal",
         "textTransform-FormItemLabel": "none",

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] })));
 });