@dynatrace/strato-components 3.10.0 → 3.10.4

package/forms/date-time-range-picker/DateTimeRangePicker.sty.js

@@ -30,7 +30,7 @@ var import_SpinButton_css_ts_vanilla = require("../spin-buttons/SpinButton.css")
 var import_DateTimePicker_css_ts_vanilla = require("../date-time-picker/DateTimePicker.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var dateTimeInput = "_1vlwkc26-3-10-0";
-var dateTimeRange = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-10-0", variantClassNames: { showError: { true: "_1vlwkc21-3-10-0" }, disabled: { true: "_1vlwkc22-3-10-0" }, readOnly: { true: "_1vlwkc23-3-10-0" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-10-0"]] });
-var scrollContainer = "_1vlwkc25-3-10-0";
-var timeframeSeparator = "_1vlwkc27-3-10-0";
+var dateTimeInput = "_1vlwkc26-3-10-4";
+var dateTimeRange = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-10-4", variantClassNames: { showError: { true: "_1vlwkc21-3-10-4" }, disabled: { true: "_1vlwkc22-3-10-4" }, readOnly: { true: "_1vlwkc23-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-10-4"]] });
+var scrollContainer = "_1vlwkc25-3-10-4";
+var timeframeSeparator = "_1vlwkc27-3-10-4";

package/forms/forms-core/components/field-set/FieldSet.css

@@ -1,4 +1,4 @@
-._1dphm0f0-3-10-0 {
+._1dphm0f0-3-10-4 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-10-0 {
+._1dphm0f1-3-10-4 {
   padding: 0;
   appearance: none;
   margin-bottom: var(--dt-spacings-size-12, 12px);

package/forms/forms-core/components/field-set/FieldSet.sty.js

@@ -22,5 +22,5 @@ __export(FieldSet_css_exports, {
 });
 module.exports = __toCommonJS(FieldSet_css_exports);
 var import_FieldSet_css_ts_vanilla = require("./FieldSet.css");
-var fieldset = "_1dphm0f0-3-10-0";
-var legend = "_1dphm0f1-3-10-0";
+var fieldset = "_1dphm0f0-3-10-4";
+var legend = "_1dphm0f1-3-10-4";

package/forms/forms-core/components/form-field/FormField.sty.js

@@ -21,4 +21,4 @@ __export(FormField_css_exports, {
 });
 module.exports = __toCommonJS(FormField_css_exports);
 var import_FormField_css_ts_vanilla = require("./FormField.css");
-var formField = "_mvcxum0-3-10-0";
+var formField = "_mvcxum0-3-10-4";

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css

@@ -1,17 +1,17 @@
-._16z6rg10-3-10-0 {
+._16z6rg10-3-10-4 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._16z6rg11-3-10-0 {
+._16z6rg11-3-10-4 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-10-0 {
+._16z6rg12-3-10-4 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-10-0 {
+._16z6rg13-3-10-4 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-10-0 {
+._16z6rg14-3-10-4 {
   min-width: 0;
   overflow-wrap: break-word;
 }

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js

@@ -23,5 +23,5 @@ __export(FormFieldMessageItem_css_exports, {
 module.exports = __toCommonJS(FormFieldMessageItem_css_exports);
 var import_FormFieldMessageItem_css_ts_vanilla = require("./FormFieldMessageItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-10-0", variantClassNames: { variant: { hint: "_16z6rg11-3-10-0", error: "_16z6rg12-3-10-0" }, disabled: { true: "_16z6rg13-3-10-0" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-10-0";
+var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-10-4", variantClassNames: { variant: { hint: "_16z6rg11-3-10-4", error: "_16z6rg12-3-10-4" }, disabled: { true: "_16z6rg13-3-10-4" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-10-4";

package/forms/forms-core/components/form-field-messages/FormFieldMessages.css

@@ -0,0 +1,9 @@
+._1l9bja60-3-10-4 {
+  display: flex;
+}
+._1l9bja60-3-10-4:empty {
+  display: none;
+}
+._1l9bja60-3-10-4[aria-hidden='true'] {
+  display: none;
+}

package/forms/forms-core/components/form-field-messages/FormFieldMessages.js

@@ -129,9 +129,7 @@ const FormFieldMessagesRoot = /* @__PURE__ */ (0, import_react2.forwardRef)((For
     (msg) => !msg.source || msg.source === activeSource
   );
   const formMessages = state.showError ? visibleErrorMessages : internalHintMessages;
-  const hasConsumerChildren = Boolean(children);
   const hasVisibleErrorsToShow = state.showError && suppressedErrorMessages.length > 0;
-  const hideMessages = !hasVisibleErrorsToShow && hintMessages.length === 0 && !hasConsumerChildren;
   const autoErrorItems = state.showError ? suppressedErrorMessages.map((message) => /* @__PURE__ */ (0, import_react.createElement)(
     FormFieldMessages.Item,
     {
@@ -141,8 +139,12 @@ const FormFieldMessagesRoot = /* @__PURE__ */ (0, import_react2.forwardRef)((For
     }
   )) : null;
   let content = null;
+  let hasConsumerChildren = Boolean(children);
   if (typeof children === "function") {
     content = children(formMessages);
+    if (content === void 0 || content === null) {
+      hasConsumerChildren = false;
+    }
   } else if (children !== void 0 && children !== null) {
     const hasConsumerErrors = state.customMessages.some(
       (m) => m.variant === "error"
@@ -159,13 +161,14 @@ const FormFieldMessagesRoot = /* @__PURE__ */ (0, import_react2.forwardRef)((For
       }
     ));
   }
+  const hideMessages = !hasVisibleErrorsToShow && hintMessages.length === 0 && !hasConsumerChildren;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Flex.Flex,
     {
       ref: forwardedRef,
       flexDirection: "column",
       "aria-live": "polite",
-      style: { ...consumerStyle, display: hideMessages ? "none" : "flex" },
+      style: { ...consumerStyle },
       className: (0, import_clsx.default)(consumerClassName, styles.formFieldMessages),
       "aria-hidden": hideMessages,
       "data-dtrum-allow": dataDtrumAllow,

package/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js

@@ -21,4 +21,4 @@ __export(FormFieldMessages_css_exports, {
 });
 module.exports = __toCommonJS(FormFieldMessages_css_exports);
 var import_FormFieldMessages_css_ts_vanilla = require("./FormFieldMessages.css");
-var formFieldMessages = "_1l9bja60-3-10-0";
+var formFieldMessages = "_1l9bja60-3-10-4";

package/forms/forms-core/components/label/Label.css

@@ -1,15 +1,15 @@
-._1gxatyo0-3-10-0 {
+._1gxatyo0-3-10-4 {
   display: inline-block;
 }
-._1gxatyo1-3-10-0 {
+._1gxatyo1-3-10-4 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-10-0:after {
+._1gxatyo2-3-10-4:after {
   content: "*" / "";
 }
-._1gxatyo3-3-10-0 {
+._1gxatyo3-3-10-4 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1gxatyo4-3-10-0 {
+._1gxatyo4-3-10-4 {
   margin-left: var(--dt-spacings-size-4, 4px);
 }

package/forms/forms-core/components/label/Label.sty.js

@@ -23,5 +23,5 @@ __export(Label_css_exports, {
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-10-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-10-0" }, required: { true: "_1gxatyo2-3-10-0" }, readOnly: { true: "_1gxatyo3-3-10-0" } }, defaultVariants: {}, compoundVariants: [] });
-var readOnlyLabel = "_1gxatyo4-3-10-0";
+var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-10-4", variantClassNames: { disabled: { true: "_1gxatyo1-3-10-4" }, required: { true: "_1gxatyo2-3-10-4" }, readOnly: { true: "_1gxatyo3-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var readOnlyLabel = "_1gxatyo4-3-10-4";

package/forms/hooks/useAutofillEvent.css

@@ -1,20 +1,20 @@
-@keyframes _yfwka31-3-10-0 {
+@keyframes _yfwka31-3-10-4 {
 
 }
-@keyframes _yfwka32-3-10-0 {
+@keyframes _yfwka32-3-10-4 {
 
 }
-._yfwka33-3-10-0:-webkit-autofill:is(._yfwka33-3-10-0,:hover,:focus) {
+._yfwka33-3-10-4:-webkit-autofill:is(._yfwka33-3-10-4,:hover,:focus) {
   -webkit-text-fill-color: var(--dt-colors-text-primary-default, #464cce);
-  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-10-0) inset;
+  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-10-4) inset;
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._yfwka33-3-10-0:-webkit-autofill {
-  animation-name: _yfwka31-3-10-0;
+._yfwka33-3-10-4:-webkit-autofill {
+  animation-name: _yfwka31-3-10-4;
   animation-duration: 0.001s;
 }
-._yfwka33-3-10-0:not(:-webkit-autofill) {
-  animation-name: _yfwka32-3-10-0;
+._yfwka33-3-10-4:not(:-webkit-autofill) {
+  animation-name: _yfwka32-3-10-4;
   animation-duration: 0.001s;
 }
 input:-webkit-autofill::spelling-error {

package/forms/hooks/useAutofillEvent.sty.js

@@ -24,7 +24,7 @@ __export(useAutofillEvent_css_exports, {
 });
 module.exports = __toCommonJS(useAutofillEvent_css_exports);
 var import_useAutofillEvent_css_ts_vanilla = require("./useAutofillEvent.css");
-var autofillBackground = "var(--_yfwka30-3-10-0)";
-var autofillCSS = "_yfwka33-3-10-0";
-var end = "_yfwka32-3-10-0";
-var start = "_yfwka31-3-10-0";
+var autofillBackground = "var(--_yfwka30-3-10-4)";
+var autofillCSS = "_yfwka33-3-10-4";
+var end = "_yfwka32-3-10-4";
+var start = "_yfwka31-3-10-4";

package/forms/hooks/useContainerFocus.css

@@ -1,3 +1,3 @@
-._la3ex60-3-10-0:focus {
+._la3ex60-3-10-4:focus {
   outline: none;
 }

package/forms/hooks/useContainerFocus.sty.js

@@ -21,4 +21,4 @@ __export(useContainerFocus_css_exports, {
 });
 module.exports = __toCommonJS(useContainerFocus_css_exports);
 var import_useContainerFocus_css_ts_vanilla = require("./useContainerFocus.css");
-var containerRoot = "_la3ex60-3-10-0";
+var containerRoot = "_la3ex60-3-10-4";

package/forms/radio/styles.css

@@ -1,12 +1,12 @@
-._h96idu0-3-10-0 {
+._h96idu0-3-10-4 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._h96idu1-3-10-0 {
+._h96idu1-3-10-4 {
   cursor: default;
 }
-._h96idu5-3-10-0 {
+._h96idu5-3-10-4 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -15,14 +15,14 @@
   vertical-align: middle;
   cursor: pointer;
 }
-._h96idu5-3-10-0._h96idu3-3-10-0 {
+._h96idu5-3-10-4._h96idu3-3-10-4 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._h96idu1-3-10-0 ._h96idu5-3-10-0 {
+._h96idu1-3-10-4 ._h96idu5-3-10-4 {
   cursor: default;
 }
-._h96idu6-3-10-0 {
+._h96idu6-3-10-4 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -31,38 +31,38 @@
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-10-0);
+  background-color: var(--_bx32h3-3-10-4);
 }
-._h96idu7-3-10-0 {
+._h96idu7-3-10-4 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96idue-3-10-0 {
+._h96idue-3-10-4 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._h96idug-3-10-0 {
+._h96idug-3-10-4 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduh-3-10-0 {
+._h96iduh-3-10-4 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._h96idui-3-10-0 {
+._h96idui-3-10-4 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96iduj-3-10-0 {
+._h96iduj-3-10-4 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduk-3-10-0 {
+._h96iduk-3-10-4 {
   height: 100%;
-  fill: var(--_bx32h1-3-10-0);
+  fill: var(--_bx32h1-3-10-4);
 }
-._h96idu5-3-10-0:not(._h96idu4-3-10-0) ._h96iduk-3-10-0 {
+._h96idu5-3-10-4:not(._h96idu4-3-10-4) ._h96iduk-3-10-4 {
   display: none;
 }
-._h96idu1-3-10-0 ._h96iduk-3-10-0 {
+._h96idu1-3-10-4 ._h96iduk-3-10-4 {
   fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._h96idu2-3-10-0._h96idu1-3-10-0 ._h96iduk-3-10-0 {
+._h96idu2-3-10-4._h96idu1-3-10-4 ._h96iduk-3-10-4 {
   fill: var(--dt-colors-icon-critical-default, #bb0731);
 }

package/forms/radio/styles.sty.js

@@ -31,11 +31,11 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_styles_css_ts_vanilla = require("./styles.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var checked = "_h96idu4-3-10-0";
-var disabled = "_h96idu3-3-10-0";
-var group = "_h96idu0-3-10-0";
-var hasError = "_h96idu2-3-10-0";
-var innerKnob = "_h96iduk-3-10-0";
-var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu6-3-10-0", variantClassNames: { disabled: { true: "_h96idu7-3-10-0" }, checked: { true: "_h96idu8-3-10-0", false: "_h96idu9-3-10-0" }, hasError: { true: "_h96idua-3-10-0", false: "_h96idub-3-10-0" }, isFocusVisible: { true: "_h96iduc-3-10-0", false: "_h96idud-3-10-0" }, readOnly: { true: "_h96idue-3-10-0", false: "_h96iduf-3-10-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-10-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-10-0"], [{ readOnly: true, disabled: false }, "_h96idui-3-10-0"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-10-0"]] });
-var label = "_h96idu5-3-10-0";
-var readOnly = "_h96idu1-3-10-0";
+var checked = "_h96idu4-3-10-4";
+var disabled = "_h96idu3-3-10-4";
+var group = "_h96idu0-3-10-4";
+var hasError = "_h96idu2-3-10-4";
+var innerKnob = "_h96iduk-3-10-4";
+var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu6-3-10-4", variantClassNames: { disabled: { true: "_h96idu7-3-10-4" }, checked: { true: "_h96idu8-3-10-4", false: "_h96idu9-3-10-4" }, hasError: { true: "_h96idua-3-10-4", false: "_h96idub-3-10-4" }, isFocusVisible: { true: "_h96iduc-3-10-4", false: "_h96idud-3-10-4" }, readOnly: { true: "_h96idue-3-10-4", false: "_h96iduf-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-10-4"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-10-4"], [{ readOnly: true, disabled: false }, "_h96idui-3-10-4"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-10-4"]] });
+var label = "_h96idu5-3-10-4";
+var readOnly = "_h96idu1-3-10-4";

package/forms/search-input/SearchInput.css

@@ -1,6 +1,6 @@
-._1mumub80-3-10-0 {
+._1mumub80-3-10-4 {
   min-width: 192px;
 }
-._1mumub81-3-10-0 {
+._1mumub81-3-10-4 {
   min-width: 272px;
 }

package/forms/search-input/SearchInput.sty.js

@@ -22,4 +22,4 @@ __export(SearchInput_css_exports, {
 module.exports = __toCommonJS(SearchInput_css_exports);
 var import_SearchInput_css_ts_vanilla = require("./SearchInput.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var searchInput = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mumub80-3-10-0", variantClassNames: { hasStepper: { true: "_1mumub81-3-10-0" } }, defaultVariants: {}, compoundVariants: [] });
+var searchInput = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mumub80-3-10-4", variantClassNames: { hasStepper: { true: "_1mumub81-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });

package/forms/search-input/Stepper.css

@@ -1,21 +1,21 @@
-._s3yy5s0-3-10-0 {
+._s3yy5s0-3-10-4 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   align-items: center;
 }
-._s3yy5s1-3-10-0 {
+._s3yy5s1-3-10-4 {
   display: flex;
   gap: var(--dt-spacings-size-0, 0);
 }
-._s3yy5s2-3-10-0 {
+._s3yy5s2-3-10-4 {
   margin: 0;
 }
-._s3yy5s1-3-10-0 > ._s3yy5s2-3-10-0:first-child {
+._s3yy5s1-3-10-4 > ._s3yy5s2-3-10-4:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._s3yy5s1-3-10-0 > ._s3yy5s2-3-10-0:last-child {
+._s3yy5s1-3-10-4 > ._s3yy5s2-3-10-4:last-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

package/forms/search-input/Stepper.sty.js

@@ -29,6 +29,6 @@ var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.
 var import_BaseInput_css_ts_vanilla = require("../_base-input/BaseInput.css");
 var import_BaseInputContent_css_ts_vanilla = require("../_base-input/BaseInputContent.css");
 var import_Stepper_css_ts_vanilla = require("./Stepper.css");
-var matchPositionIndicators = "_s3yy5s0-3-10-0 _o6rxr70-3-10-0 _da9a8v0-3-10-0 _da9a8v2-3-10-0 _da9a8v3-3-10-0 _da9a8vb-3-10-0";
-var stepperButton = "_s3yy5s2-3-10-0 _1a8lqy9e-3-10-0";
-var stepperButtons = "_s3yy5s1-3-10-0";
+var matchPositionIndicators = "_s3yy5s0-3-10-4 _o6rxr70-3-10-4 _da9a8v0-3-10-4 _da9a8v2-3-10-4 _da9a8v3-3-10-4 _da9a8vb-3-10-4";
+var stepperButton = "_s3yy5s2-3-10-4 _1a8lqy9e-3-10-4";
+var stepperButtons = "_s3yy5s1-3-10-4";

package/forms/select/Select.js

@@ -193,7 +193,7 @@ function SelectFwd(props, forwardedRef) {
         queueMicrotask(() => {
           onOpenChange?.(newState);
         });
-        if (state === true && newState === false) {
+        if (state === true && newState === false && !controlState) {
           queueMicrotask(() => {
             messagesContextDispatch?.({
               type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
@@ -369,15 +369,12 @@ function SelectFwd(props, forwardedRef) {
     [menuOpen, dispatch]
   );
   const onBlurHandler = (event) => {
-    if (
-      // The relatedTarget is null when the focus leaves the browser and we want to still trigger the onBlur in this case.
-      !event.relatedTarget || event.relatedTarget !== hiddenTrigger && event.relatedTarget !== clearSelectionRef.current && event.relatedTarget !== filterRef.current?.inputRef
-    ) {
-      if (!menuOpen && isFocusWithin) {
-        setIsFocusWithin(false);
-        validationOnBlur();
-        onBlur?.(event);
-      }
+    const relatedTarget = event.relatedTarget;
+    const movingToInternal = relatedTarget !== null && (relatedTarget === hiddenTrigger || relatedTarget === clearSelectionRef.current || relatedTarget === filterRef.current?.inputRef);
+    if (!movingToInternal && isFocusWithin) {
+      setIsFocusWithin(false);
+      validationOnBlur();
+      onBlur?.(event);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SelectMenuContext.SelectMenuContext.Provider, { value: contextMemo, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/forms/select/components/HiddenSelect.js

@@ -65,6 +65,9 @@ const HiddenSelect = (0, import_react.forwardRef)(
       {},
       id
     );
+    const handleInvalid = controlState ? (event) => {
+      event.preventDefault();
+    } : onInvalid;
     const value = (0, import_react.useMemo)(() => {
       if (multiple) {
         return selectedValuesArray;
@@ -85,7 +88,8 @@ const HiddenSelect = (0, import_react.forwardRef)(
         value: value && value.length !== 0 ? value : void 0,
         id,
         onChange: () => void 0,
-        ...controlState ? {} : { ...ariaProps, onBlur, onChange, onInvalid },
+        onInvalid: handleInvalid,
+        ...controlState ? {} : { ...ariaProps, onBlur, onChange },
         children: selectedValuesArray.map((val, key) => {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: `${val}` }, `${key}-${val}`);
         })