xmlui 0.10.14 → 0.10.16

package/dist/scripts/src/components/TextBox/TextBoxNative.js

@@ -56,7 +56,6 @@ const TextBox_module_scss_1 = __importDefault(require("./TextBox.module.scss"));
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const parts_1 = require("../../components-core/parts");
 exports.defaultProps = {
     type: "text",
@@ -73,9 +72,7 @@ exports.defaultProps = {
     passwordHiddenIcon: "eye-off",
 };
 exports.TextBox = (0, react_1.forwardRef)(function TextBox(_a, ref) {
-    var { id, type = exports.defaultProps.type, value = exports.defaultProps.value, updateState = exports.defaultProps.updateState, initialValue = exports.defaultProps.initialValue, style, className, maxLength, enabled = exports.defaultProps.enabled, placeholder, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, onKeyDown = exports.defaultProps.onKeyDown, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, showPasswordToggle, passwordVisibleIcon = exports.defaultProps.passwordVisibleIcon, passwordHiddenIcon = exports.defaultProps.passwordHiddenIcon } = _a, rest = __rest(_a, ["id", "type", "value", "updateState", "initialValue", "style", "className", "maxLength", "enabled", "placeholder", "validationStatus", "onDidChange", "onFocus", "onBlur", "onKeyDown", "registerComponentApi", "startText", "startIcon", "endText", "endIcon", "gap", "autoFocus", "readOnly", "tabIndex", "label", "labelPosition", "labelWidth", "labelBreak", "required", "showPasswordToggle", "passwordVisibleIcon", "passwordHiddenIcon"]);
-    const _id = (0, react_1.useId)();
-    id = id || _id;
+    var { id, type = exports.defaultProps.type, value = exports.defaultProps.value, updateState = exports.defaultProps.updateState, initialValue = exports.defaultProps.initialValue, style, className, maxLength, enabled = exports.defaultProps.enabled, placeholder, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, onKeyDown = exports.defaultProps.onKeyDown, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, required, showPasswordToggle, passwordVisibleIcon = exports.defaultProps.passwordVisibleIcon, passwordHiddenIcon = exports.defaultProps.passwordHiddenIcon } = _a, rest = __rest(_a, ["id", "type", "value", "updateState", "initialValue", "style", "className", "maxLength", "enabled", "placeholder", "validationStatus", "onDidChange", "onFocus", "onBlur", "onKeyDown", "registerComponentApi", "startText", "startIcon", "endText", "endIcon", "gap", "autoFocus", "readOnly", "tabIndex", "required", "showPasswordToggle", "passwordVisibleIcon", "passwordHiddenIcon"]);
     const inputRef = (0, react_2.useRef)(null);
     // State to control password visibility
     const [showPassword, setShowPassword] = (0, react_1.useState)(false);
@@ -133,15 +130,13 @@ exports.TextBox = (0, react_1.forwardRef)(function TextBox(_a, ref) {
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { id: id, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, style: style, className: className, ref: ref, 
-        // NOTE: This is a band-aid solution to handle the multiple IDs issue - remove after resolving focus bug
-        isInputTemplateUsed: true, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(TextBox_module_scss_1.default.inputRoot, {
-                [TextBox_module_scss_1.default.disabled]: !enabled,
-                [TextBox_module_scss_1.default.readOnly]: readOnly,
-                [TextBox_module_scss_1.default.error]: validationStatus === "error",
-                [TextBox_module_scss_1.default.warning]: validationStatus === "warning",
-                [TextBox_module_scss_1.default.valid]: validationStatus === "valid",
-            }), tabIndex: -1, onFocus: focus, 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)(TextBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, "data-part-id": parts_1.PART_INPUT, type: actualType, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, {
-                        [TextBox_module_scss_1.default.readOnly]: readOnly,
-                    }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: onKeyDown, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), type === "password" && showPasswordToggle ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, iconName: showPassword ? passwordVisibleIcon : passwordHiddenIcon, className: (0, classnames_1.default)(TextBox_module_scss_1.default.adornment, TextBox_module_scss_1.default.passwordToggle), onClick: togglePasswordVisibility })) : ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment }))] }) })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(TextBox_module_scss_1.default.inputRoot, {
+            [TextBox_module_scss_1.default.disabled]: !enabled,
+            [TextBox_module_scss_1.default.readOnly]: readOnly,
+            [TextBox_module_scss_1.default.error]: validationStatus === "error",
+            [TextBox_module_scss_1.default.warning]: validationStatus === "warning",
+            [TextBox_module_scss_1.default.valid]: validationStatus === "valid",
+        }), tabIndex: -1, onFocus: focus, 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)(TextBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, ref: inputRef, "data-part-id": parts_1.PART_INPUT, type: actualType, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, {
+                    [TextBox_module_scss_1.default.readOnly]: readOnly,
+                }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: onKeyDown, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), type === "password" && showPasswordToggle ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, iconName: showPassword ? passwordVisibleIcon : passwordHiddenIcon, className: (0, classnames_1.default)(TextBox_module_scss_1.default.adornment, TextBox_module_scss_1.default.passwordToggle), onClick: togglePasswordVisibility })) : ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment }))] })));
 });

package/dist/scripts/src/components/Theme/ThemeNative.js

@@ -117,13 +117,9 @@ function Theme({ id, isRoot = exports.defaultProps.isRoot, renderChild, node, to
     }
     if (isRoot) {
         const faviconUrl = getResourceUrl("resource:favicon") || "/resources/favicon.ico";
-        return (
-        // <ThemeContext.Provider value={currentThemeContextValue}>
-        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)(RootClasses, { classNames: rootClasses }), (0, jsx_runtime_1.jsxs)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "theme-root", children: [renderChild(node.children), children] }), (0, jsx_runtime_1.jsx)(NotificationToast_1.NotificationToast, { toastDuration: toastDuration })] })
-        // </ThemeContext.Provider>
-        );
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)(RootClasses, { classNames: rootClasses }), (0, jsx_runtime_1.jsxs)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "theme-root", children: [renderChild && renderChild(node.children), children] }), (0, jsx_runtime_1.jsx)(NotificationToast_1.NotificationToast, { toastDuration: toastDuration })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.wrapper, className), children: renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })) }), root &&
+    return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.wrapper, className), children: [renderChild && renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })), children] }), root &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), ref: (el) => {
                         if (el) {
                             setCurrentThemeRoot(el);

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

@@ -38,10 +38,6 @@ exports.TimeInputMd = (0, metadata_helpers_1.createMetadata)({
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(TimeInputNative_1.defaultProps.enabled),
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(TimeInputNative_1.defaultProps.validationStatus),
-        label: (0, metadata_helpers_1.dLabel)(),
-        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
-        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
-        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         hour24: {
             description: "Whether to use 24-hour format (true) or 12-hour format with AM/PM (false)",
             valueType: "boolean",
@@ -149,5 +145,5 @@ exports.TimeInputMd = (0, metadata_helpers_1.createMetadata)({
 exports.timeInputComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TimeInputMd, ({ node, state, updateState, extractValue, className, lookupEventHandler, registerComponentApi, }) => {
     const extractedInitialValue = extractValue(node.props.initialValue);
     const stateValue = state === null || state === void 0 ? void 0 : state.value;
-    return ((0, jsx_runtime_1.jsx)(TimeInputNative_1.TimeInputNative, { className: className, initialValue: extractedInitialValue, value: stateValue, updateState: updateState, registerComponentApi: registerComponentApi, enabled: extractValue.asOptionalBoolean(node.props.enabled, TimeInputNative_1.defaultProps.enabled), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus, TimeInputNative_1.defaultProps.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly, TimeInputNative_1.defaultProps.readOnly), validationStatus: extractValue(node.props.validationStatus), hour24: extractValue.asOptionalBoolean(node.props.hour24, TimeInputNative_1.defaultProps.hour24), seconds: extractValue.asOptionalBoolean(node.props.seconds, TimeInputNative_1.defaultProps.seconds), minTime: extractValue(node.props.minTime), maxTime: extractValue(node.props.maxTime), clearable: extractValue.asOptionalBoolean(node.props.clearable, TimeInputNative_1.defaultProps.clearable), clearIcon: extractValue(node.props.clearIcon), clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, TimeInputNative_1.defaultProps.clearToInitialValue), required: extractValue.asOptionalBoolean(node.props.required, TimeInputNative_1.defaultProps.required), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak, TimeInputNative_1.defaultProps.labelBreak), startText: extractValue(node.props.startText), startIcon: extractValue(node.props.startIcon), endText: extractValue(node.props.endText), endIcon: extractValue(node.props.endIcon), gap: extractValue.asOptionalString(node.props.gap), emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter, TimeInputNative_1.defaultProps.emptyCharacter), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), onInvalidChange: lookupEventHandler("invalidTime") }));
+    return ((0, jsx_runtime_1.jsx)(TimeInputNative_1.TimeInputNative, { className: className, initialValue: extractedInitialValue, value: stateValue, updateState: updateState, registerComponentApi: registerComponentApi, enabled: extractValue.asOptionalBoolean(node.props.enabled, TimeInputNative_1.defaultProps.enabled), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus, TimeInputNative_1.defaultProps.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly, TimeInputNative_1.defaultProps.readOnly), validationStatus: extractValue(node.props.validationStatus), hour24: extractValue.asOptionalBoolean(node.props.hour24, TimeInputNative_1.defaultProps.hour24), seconds: extractValue.asOptionalBoolean(node.props.seconds, TimeInputNative_1.defaultProps.seconds), minTime: extractValue(node.props.minTime), maxTime: extractValue(node.props.maxTime), clearable: extractValue.asOptionalBoolean(node.props.clearable, TimeInputNative_1.defaultProps.clearable), clearIcon: extractValue(node.props.clearIcon), clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, TimeInputNative_1.defaultProps.clearToInitialValue), required: extractValue.asOptionalBoolean(node.props.required, TimeInputNative_1.defaultProps.required), startText: extractValue(node.props.startText), startIcon: extractValue(node.props.startIcon), endText: extractValue(node.props.endText), endIcon: extractValue(node.props.endIcon), gap: extractValue.asOptionalString(node.props.gap), emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter, TimeInputNative_1.defaultProps.emptyCharacter), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), onInvalidChange: lookupEventHandler("invalidTime") }));
 });

package/dist/scripts/src/components/TimeInput/TimeInputNative.js

@@ -23,7 +23,6 @@ const PartialInput_1 = require("../Input/PartialInput");
 const InputDivider_1 = require("../Input/InputDivider");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 // Import utilities and types from merged utils file
 const utils_1 = require("./utils");
@@ -41,14 +40,12 @@ exports.defaultProps = {
     clearable: false,
     clearToInitialValue: true,
     required: false,
-    labelPosition: "top",
     readOnly: false,
     autoFocus: false,
-    labelBreak: false,
     emptyCharacter: "-",
 };
 exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, ref) {
-    var { id, initialValue, value: controlledValue, enabled = exports.defaultProps.enabled, updateState, style, className, onDidChange, onFocus, onBlur, onInvalidChange, validationStatus = exports.defaultProps.validationStatus, registerComponentApi, hour24 = exports.defaultProps.hour24, seconds = exports.defaultProps.seconds, minTime, maxTime, 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", "hour24", "seconds", "minTime", "maxTime", "clearable", "clearIcon", "clearToInitialValue", "required", "startText", "startIcon", "endText", "endIcon", "gap", "label", "labelPosition", "labelWidth", "labelBreak", "readOnly", "autoFocus", "emptyCharacter"]);
+    var { id, initialValue, value: controlledValue, enabled = exports.defaultProps.enabled, updateState, style, className, onDidChange, onFocus, onBlur, onInvalidChange, validationStatus = exports.defaultProps.validationStatus, registerComponentApi, hour24 = exports.defaultProps.hour24, seconds = exports.defaultProps.seconds, minTime, maxTime, clearable = exports.defaultProps.clearable, clearIcon, clearToInitialValue = exports.defaultProps.clearToInitialValue, required = exports.defaultProps.required, startText, startIcon, endText, endIcon, gap, 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", "hour24", "seconds", "minTime", "maxTime", "clearable", "clearIcon", "clearToInitialValue", "required", "startText", "startIcon", "endText", "endIcon", "gap", "readOnly", "autoFocus", "emptyCharacter"]);
     const timeInputRef = (0, react_1.useRef)(null);
     // Refs for auto-tabbing between inputs
     const hourInputRef = (0, react_1.useRef)(null);
@@ -412,11 +409,7 @@ exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, r
             [TimeInput_module_scss_1.default.valid]: validationStatus === "valid",
             [TimeInput_module_scss_1.default.disabled]: !enabled,
             [TimeInput_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: TimeInput_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: TimeInput_module_scss_1.default.inputGroup, children: [(0, jsx_runtime_1.jsx)(HourInput, { amPm: amPm, autoFocus: autoFocus, disabled: !enabled, inputRef: hourInputRef, nextInputRef: minuteInputRef, maxTime: maxTime, minTime: minTime, onChange: handleHourChange, onBlur: handleHourBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: hour, isInvalid: isHourCurrentlyInvalid, is24Hour: !is12HourFormat, emptyCharacter: processedEmptyCharacter }), (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":" }), (0, jsx_runtime_1.jsx)(MinuteInput, { disabled: !enabled, hour: hour, inputRef: minuteInputRef, nextInputRef: showSeconds ? secondInputRef : undefined, nextButtonRef: showSeconds ? undefined : is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, onChange: handleMinuteChange, onBlur: handleMinuteBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: minute, isInvalid: isMinuteCurrentlyInvalid, emptyCharacter: processedEmptyCharacter }), showSeconds && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":", className: TimeInput_module_scss_1.default.divider }), (0, jsx_runtime_1.jsx)(SecondInput, { disabled: !enabled, hour: hour, inputRef: secondInputRef, nextButtonRef: is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, minute: minute, onChange: handleSecondChange, onBlur: handleSecondBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: second, isInvalid: isSecondCurrentlyInvalid, emptyCharacter: processedEmptyCharacter })] })), is12HourFormat && ((0, jsx_runtime_1.jsx)(AmPmButton, { className: "timeinput", disabled: !enabled, buttonRef: amPmButtonRef, maxTime: maxTime, minTime: minTime, onClick: handleAmPmToggle, onAmPmSet: handleAmPmSet, onKeyDown: handleArrowKeys, value: amPm }))] }), clearable && ((0, jsx_runtime_1.jsx)("button", { "data-part-id": PART_CLEAR_BUTTON, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.clearButton, TimeInput_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: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [startAdornment, timeInputComponent, 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: TimeInput_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: TimeInput_module_scss_1.default.inputGroup, children: [(0, jsx_runtime_1.jsx)(HourInput, { id: id, amPm: amPm, autoFocus: autoFocus, disabled: !enabled, inputRef: hourInputRef, nextInputRef: minuteInputRef, maxTime: maxTime, minTime: minTime, onChange: handleHourChange, onBlur: handleHourBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: hour, isInvalid: isHourCurrentlyInvalid, is24Hour: !is12HourFormat, emptyCharacter: processedEmptyCharacter }), (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":" }), (0, jsx_runtime_1.jsx)(MinuteInput, { disabled: !enabled, hour: hour, inputRef: minuteInputRef, nextInputRef: showSeconds ? secondInputRef : undefined, nextButtonRef: showSeconds ? undefined : is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, onChange: handleMinuteChange, onBlur: handleMinuteBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: minute, isInvalid: isMinuteCurrentlyInvalid, emptyCharacter: processedEmptyCharacter }), showSeconds && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":", className: TimeInput_module_scss_1.default.divider }), (0, jsx_runtime_1.jsx)(SecondInput, { disabled: !enabled, hour: hour, inputRef: secondInputRef, nextButtonRef: is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, minute: minute, onChange: handleSecondChange, onBlur: handleSecondBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: second, isInvalid: isSecondCurrentlyInvalid, emptyCharacter: processedEmptyCharacter })] })), is12HourFormat && ((0, jsx_runtime_1.jsx)(AmPmButton, { className: "timeinput", disabled: !enabled, buttonRef: amPmButtonRef, maxTime: maxTime, minTime: minTime, onClick: handleAmPmToggle, onAmPmSet: handleAmPmSet, onKeyDown: handleArrowKeys, value: amPm }))] }), clearable && ((0, jsx_runtime_1.jsx)("button", { "data-part-id": PART_CLEAR_BUTTON, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.clearButton, TimeInput_module_scss_1.default.button), disabled: !enabled, onClick: clear, onFocus: stopPropagation, type: "button", children: clearIconElement }))] }), endAdornment] })));
     return timeInputComponent;
 });
 function AmPmButton({ ariaLabel, autoFocus, className, disabled, locale, maxTime, minTime, onClick, onAmPmSet, onKeyDown, buttonRef, value, }) {