@dynatrace/strato-components 3.11.2 → 3.12.0

package/forms/select/Select.js

@@ -53,9 +53,11 @@ var import_select_menu_state_reducer = require("./state/select-menu-state-reduce
 var styles = __toESM(require("./styles/Select.sty.js"));
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useControllableState = require("../../core/hooks/useControllableState.js");
+var import_useId = require("../../core/hooks/useId.js");
 var import_sdk_logger = require("../../core/sdk/sdk-logger.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 var import_modality = require("../../core/utils/modality.js");
+var import_useInternalFormRegistration = require("../form/hooks/useInternalFormRegistration.js");
 var import_FormFieldMessageContextProvider = require("../forms-core/components/form-field/FormFieldMessageContextProvider.js");
 var import_useFormControl = require("../forms-core/hooks/useFormControl.js");
 var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.js");
@@ -80,6 +82,21 @@ function getNewFocusedOption(options, focusedOptionValue) {
   }
   return null;
 }
+function focusFilterClearButton(filterElement, filterValue, event) {
+  if (!filterValue) {
+    return false;
+  }
+  const xButton = filterElement?.querySelector(
+    'button[data-dt-children-name="ClearAll"]'
+  );
+  if (xButton) {
+    event.preventDefault();
+    event.stopPropagation();
+    xButton.focus();
+    return true;
+  }
+  return false;
+}
 function SelectFwd(props, forwardedRef) {
   const {
     multiple = false,
@@ -109,6 +126,8 @@ function SelectFwd(props, forwardedRef) {
     onOpenChange,
     onValidityChange,
     required: propsRequired,
+    form,
+    _messageTarget,
     ...remainingProps
   } = props;
   const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
@@ -151,13 +170,6 @@ function SelectFwd(props, forwardedRef) {
     options,
     multiple: multiple === true
   });
-  const hiddenSelectRef = (0, import_react.useRef)(null);
-  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
-  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
-    _emitValidationState,
-    () => (0, import_validation_builders.getValidationState)(hiddenSelectRef.current, "manual")
-  );
-  const [triggerRef, setTriggerRef] = (0, import_react.useState)(null);
   const {
     id,
     disabled,
@@ -176,6 +188,17 @@ function SelectFwd(props, forwardedRef) {
     propReadOnly,
     controlState
   });
+  const hiddenSelectRef = (0, import_react.useRef)(null);
+  const formValidityChangeRef = (0, import_react.useRef)(void 0);
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(
+    (state) => formValidityChangeRef.current?.(state)
+  );
+  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+    _emitValidationState,
+    () => (0, import_validation_builders.getValidationState)(hiddenSelectRef.current, "manual", void 0, id)
+  );
+  const [triggerRef, setTriggerRef] = (0, import_react.useState)(null);
+  const menuOwnerId = (0, import_useId.useId)();
   (0, import_useFormFieldValidation.useFormFieldValidation)(
     hiddenSelectRef,
     { required, value: (0, import_use_select_options.safeStringify)(propsValue) },
@@ -183,6 +206,49 @@ function SelectFwd(props, forwardedRef) {
     void 0,
     _emitValidationState
   );
+  const formRegistration = (0, import_useInternalFormRegistration.useInternalFormRegistration)({
+    id,
+    name,
+    form,
+    messageTarget: _messageTarget,
+    getValue: () => {
+      if (propsValue !== void 0) {
+        return propsValue;
+      }
+      const selected = selectRef.current?.getValue() ?? [];
+      if (multiple) {
+        return selected.map((o) => o.value);
+      }
+      return selected[0]?.value ?? null;
+    },
+    onValidityChange,
+    focus: () => hiddenTrigger?.focus({ preventScroll: true, focusVisible: true }),
+    validateField: async ({ reveal, trigger }) => {
+      hiddenSelectRef.current?.checkValidity();
+      if (reveal) {
+        messagesContextDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        queueMicrotask(() => hiddenSelectRef.current?.reportValidity());
+      }
+      const state = (0, import_validation_builders.getValidationState)(
+        hiddenSelectRef.current,
+        trigger,
+        void 0,
+        id
+      );
+      return emitValidationState(state);
+    },
+    resetValidation: () => {
+      hiddenSelectRef.current?.setCustomValidity("");
+      messagesContextDispatch?.({
+        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+        payload: { isTouched: false, resetShowError: true }
+      });
+    }
+  });
+  formValidityChangeRef.current = formRegistration.onValidityChange;
   const menuOpenReducer = (0, import_react.useCallback)(
     (state, action) => {
       if (readOnly) {
@@ -201,7 +267,12 @@ function SelectFwd(props, forwardedRef) {
             });
             hiddenSelectRef.current?.checkValidity();
             emitValidationState(
-              (0, import_validation_builders.getValidationState)(hiddenSelectRef.current, "blur")
+              (0, import_validation_builders.getValidationState)(
+                hiddenSelectRef.current,
+                "blur",
+                void 0,
+                id
+              )
             );
           });
         }
@@ -214,21 +285,19 @@ function SelectFwd(props, forwardedRef) {
       onOpenChange,
       messagesContextDispatch,
       hiddenSelectRef,
-      emitValidationState
+      emitValidationState,
+      id
     ]
   );
   const [menuOpen, dispatch] = (0, import_react.useReducer)(menuOpenReducer, false);
-  const [isFocusWithin, setIsFocusWithin] = (0, import_react.useState)(false);
+  const isFocusWithin = (0, import_react.useRef)(false);
   const [filterValue, setFilterValue] = (0, import_useControllableState.useControllableState)({
     value: filterValueProp,
     defaultValue: filterDefaultValueProp,
     onChange: filterOnChangeProp
   });
   const selectRef = (0, import_react.useRef)(null);
-  const hiddenTrigger = (0, import_react.useMemo)(
-    () => triggerRef?.querySelector("input"),
-    [triggerRef]
-  );
+  const hiddenTrigger = triggerRef?.querySelector("input");
   const [focusOnOption, setFocusOnOption] = (0, import_react.useState)(true);
   (0, import_react.useEffect)(() => {
     if (disableFiltering === true && (filterValue !== void 0 || filterValue !== "")) {
@@ -340,7 +409,12 @@ function SelectFwd(props, forwardedRef) {
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
-        const state = (0, import_validation_builders.getValidationState)(hiddenSelectRef.current, "manual");
+        const state = (0, import_validation_builders.getValidationState)(
+          hiddenSelectRef.current,
+          "manual",
+          void 0,
+          id
+        );
         emitValidationState(state);
       },
       // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
@@ -350,11 +424,22 @@ function SelectFwd(props, forwardedRef) {
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
-        const state = (0, import_validation_builders.getValidationState)(hiddenSelectRef.current, "manual");
+        const state = (0, import_validation_builders.getValidationState)(
+          hiddenSelectRef.current,
+          "manual",
+          void 0,
+          id
+        );
         return emitValidationState(state);
       }
     }),
-    [hiddenTrigger, messagesContextDispatch, emitValidationState, triggerRef]
+    [
+      hiddenTrigger,
+      messagesContextDispatch,
+      emitValidationState,
+      triggerRef,
+      id
+    ]
   );
   if (multiple && propsOnChange) {
     const select = selectRef.current;
@@ -368,11 +453,17 @@ function SelectFwd(props, forwardedRef) {
     () => ({ state: menuOpen, dispatch }),
     [menuOpen, dispatch]
   );
-  const onBlurHandler = (event) => {
+  const handleFocus = (event) => {
+    if (!isFocusWithin.current) {
+      isFocusWithin.current = true;
+      onFocus?.(event);
+    }
+  };
+  const handleBlur = (event) => {
     const relatedTarget = event.relatedTarget;
-    const movingToInternal = relatedTarget !== null && (relatedTarget === hiddenTrigger || relatedTarget === clearSelectionRef.current || relatedTarget === filterRef.current?.inputRef);
-    if (!movingToInternal && isFocusWithin) {
-      setIsFocusWithin(false);
+    const movingToInternal = relatedTarget !== null && (relatedTarget === hiddenTrigger || relatedTarget === clearSelectionRef.current || filterRef.current?.element?.contains(relatedTarget) || triggerRef?.contains(relatedTarget) || relatedTarget instanceof HTMLElement && relatedTarget.closest(`[data-dt-owner="${menuOwnerId}"]`) !== null);
+    if (!movingToInternal && isFocusWithin.current) {
+      isFocusWithin.current = false;
       hiddenSelectRef.current?.checkValidity();
       messagesContextDispatch?.({
         type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
@@ -382,6 +473,36 @@ function SelectFwd(props, forwardedRef) {
       onBlur?.(event);
     }
   };
+  const handleKeyDownOnFilterClearButton = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      const clearButton = document.activeElement;
+      event.preventDefault();
+      event.stopPropagation();
+      clearButton.click();
+      filterRef.current?.inputRef?.focus();
+      setFocusOnOption(true);
+    }
+    if (event.key === "Tab" && !event.shiftKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (clearSelectionRef.current) {
+        clearSelectionRef.current.focus();
+        setFocusOnOption(false);
+      } else {
+        hiddenTrigger?.focus();
+        setFocusOnOption(true);
+      }
+    }
+    if (event.key === "Tab" && event.shiftKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      filterRef.current?.inputRef?.focus();
+      setFocusOnOption(true);
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SelectMenuContext.SelectMenuContext.Provider, { value: contextMemo, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
@@ -418,8 +539,9 @@ function SelectFwd(props, forwardedRef) {
               value2
             )
           ),
-          onBlur: onBlurHandler,
+          onBlur: handleBlur,
           hiddenSelectName: name,
+          hiddenSelectForm: form,
           ref: selectRef,
           pageSize: 5,
           "aria-label": ariaLabel,
@@ -473,6 +595,7 @@ function SelectFwd(props, forwardedRef) {
           tabSelectsValue: false,
           focusOnOption,
           contentRef,
+          menuOwnerId,
           menuListFunctionRef,
           filterRef,
           clearSelectionRef,
@@ -499,12 +622,7 @@ function SelectFwd(props, forwardedRef) {
               ...slots.EmptyState?.props
             }
           },
-          onFocus: (event) => {
-            if (!isFocusWithin) {
-              onFocus?.(event);
-              setIsFocusWithin(true);
-            }
-          },
+          onFocus: handleFocus,
           onKeyDown: (event) => {
             if (!menuOpen) {
               if (event.key === "Enter" || event.key === " ") {
@@ -528,12 +646,21 @@ function SelectFwd(props, forwardedRef) {
                   event.stopPropagation();
                 }
                 if (event.key === "Tab") {
-                  if (!clearSelectionRef.current || event.shiftKey) {
+                  const hasClearSearchButton = !!filterValue;
+                  if (event.shiftKey || !clearSelectionRef.current && !hasClearSearchButton) {
                     event.preventDefault();
                     event.stopPropagation();
                     hiddenTrigger?.focus();
+                  } else if (hasClearSearchButton) {
+                    if (focusFilterClearButton(
+                      filterRef.current?.element,
+                      filterValue,
+                      event
+                    )) {
+                      setFocusOnOption(false);
+                    }
                   } else {
-                    clearSelectionRef.current && setFocusOnOption(false);
+                    setFocusOnOption(false);
                   }
                 }
                 if (event.key === "Enter" && !props.multiple) {
@@ -554,6 +681,10 @@ function SelectFwd(props, forwardedRef) {
                 handleArrowKeyOptionFocus(event.key);
                 return true;
               }
+              if (filterRef.current?.element && filterRef.current.element.contains(document.activeElement) && document.activeElement !== filterRef.current.inputRef) {
+                handleKeyDownOnFilterClearButton(event);
+                return false;
+              }
               if (document.activeElement === clearSelectionRef.current) {
                 setFocusOnOption(false);
                 if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -566,7 +697,13 @@ function SelectFwd(props, forwardedRef) {
                   setFocusOnOption(true);
                 }
                 if (event.key === "Tab" && event.shiftKey && filterRef.current) {
-                  setFocusOnOption(true);
+                  if (!focusFilterClearButton(
+                    filterRef.current?.element,
+                    filterValue,
+                    event
+                  )) {
+                    setFocusOnOption(true);
+                  }
                 }
                 return false;
               }
@@ -591,6 +728,14 @@ function SelectFwd(props, forwardedRef) {
                         setFocusOnOption(false);
                         return false;
                       }
+                      if (focusFilterClearButton(
+                        filterRef.current?.element,
+                        filterValue,
+                        event
+                      )) {
+                        setFocusOnOption(false);
+                        return false;
+                      }
                       if (filterRef.current) {
                         filterRef.current.inputRef?.focus();
                         return false;

package/forms/select/components/Control.js

@@ -153,7 +153,13 @@ function Control(props) {
           ...(0, import_merge_props.mergeProps)(
             selectProps.customTrigger.props,
             innerProps,
-            ...isDisabled ? [] : [interactionProps]
+            ...isDisabled ? [] : [
+              interactionProps,
+              {
+                onFocus: selectProps.onFocus,
+                onBlur: selectProps.onBlur
+              }
+            ]
           )
         },
         [selectProps.customTrigger.props?.children, hiddenInput]
@@ -165,6 +171,8 @@ function Control(props) {
     interactionProps,
     rootRef,
     selectProps.customTrigger,
+    selectProps.onFocus,
+    selectProps.onBlur,
     triggerId
   ]);
   if (customTrigger) {
@@ -235,6 +243,7 @@ function Control(props) {
         required: selectProps.isRequired,
         selectedValues: selectProps.value,
         name: selectProps.hiddenSelectName,
+        form: selectProps.hiddenSelectForm,
         disabled: isDisabled || readOnly,
         controlState: selectProps.controlState
       }

package/forms/select/components/HiddenSelect.d.ts

@@ -5,6 +5,7 @@ import type { FormControlState } from '../../../core/types/form-control-state.js
 interface HiddenSelectProps<OptionValue> {
     ref: Ref<HTMLSelectElement>;
     name?: string;
+    form?: string;
     selectedValues?: PropsValue<OptionValue>;
     required?: boolean;
     disabled?: boolean;

package/forms/select/components/HiddenSelect.js

@@ -32,6 +32,7 @@ const HiddenSelect = (0, import_react.forwardRef)(
   (props, forwardedRef) => {
     const {
       name,
+      form,
       selectedValues,
       required,
       disabled,
@@ -79,6 +80,7 @@ const HiddenSelect = (0, import_react.forwardRef)(
       {
         ref: (0, import_useMergeRefs.useMergeRefs)([forwardedRef, ref]),
         name,
+        form,
         multiple,
         tabIndex: -1,
         required,

package/forms/select/components/Menu.js

@@ -59,6 +59,7 @@ var import_FormFieldContext = require("../../forms-core/contexts/FormFieldContex
 var import_FormFieldMessageContext = require("../../forms-core/contexts/FormFieldMessageContext.js");
 var import_SearchInput = require("../../search-input/SearchInput.js");
 var import_use_select_menu_context = require("../hooks/use-select-menu-context.js");
+var import_use_select_options = require("../hooks/use-select-options.js");
 var import_select_menu_state_reducer = require("../state/select-menu-state-reducer.js");
 var styles = __toESM(require("../styles/Select.sty.js"));
 const sameWidthModifier = {
@@ -176,38 +177,55 @@ function Menu(props) {
   }, [hiddenTrigger]);
   const intl = (0, import_react_intl.useIntl)();
   const ariaLabelId = (0, import_useId.useId)();
-  const allSelected = (0, import_react.useMemo)(() => {
-    return isMulti && selectProps.allOptions?.length === selectProps.value?.length;
-  }, [isMulti, selectProps.allOptions, selectProps.value]);
+  const selectableOptions = (0, import_react.useMemo)(
+    () => (selectProps.allOptions ?? []).filter((option) => !option.isDisabled),
+    [selectProps.allOptions]
+  );
+  const selectedKeys = (0, import_react.useMemo)(() => {
+    const value = selectProps.value;
+    const selected = Array.isArray(value) ? value : [];
+    return new Set(selected.map((option) => (0, import_use_select_options.safeStringify)(option.value)));
+  }, [selectProps.value]);
+  const isOptionSelected = (option) => selectedKeys.has((0, import_use_select_options.safeStringify)(option.value));
+  const areAllOptionsSelected = isMulti && selectableOptions.length > 0 && selectableOptions.every(isOptionSelected);
+  const areSomeOptionsSelected = isMulti && selectableOptions.some(isOptionSelected);
+  let selectAllState = false;
+  if (areAllOptionsSelected) {
+    selectAllState = true;
+  } else if (areSomeOptionsSelected) {
+    selectAllState = "mixed";
+  }
   const handleSelectAllInteraction = () => {
     if (!selectProps.loading) {
-      if (allSelected) {
+      if (areAllOptionsSelected) {
         selectProps.onChange([], {
           action: "clear",
           removedValues: selectProps.value
         });
       } else {
         selectProps.onChange(
-          selectProps.allOptions,
+          selectableOptions,
           {}
         );
       }
     }
   };
-  const dataDtProperties = `state:${allSelected ? "deselect" : "select"}`;
+  const dataDtProperties = `state:${areAllOptionsSelected ? "deselect" : "select"}`;
   const noOptionsAvailable = selectProps.allOptions === void 0 || selectProps.allOptions.length === 0;
   const isFiltering = selectProps.customFilter && inputValue !== void 0 && inputValue !== "";
   const showClearSelection = selectProps.clearable && selectProps.value && isMulti === false && !isFiltering;
-  const showSelectAll = selectProps.clearable && isMulti && !isFiltering && !noOptionsAvailable;
+  const showSelectAll = selectProps.clearable && isMulti && !isFiltering && !noOptionsAvailable && selectableOptions.length > 0;
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Surface.Surface,
       {
         "data-testid": contentDataTestId,
+        "data-dt-owner": selectProps.menuOwnerId,
         ref: rootPortalRef,
         ...innerProps,
         elevation: "floating",
         padding: 4,
+        tabIndex: -1,
         className: (0, import_clsx.default)(
           styles.selectMenuOverlay({
             isTriggerWidth: selectProps.contentWidth === "trigger" || selectProps.customFilter && selectProps.contentWidth === "content"
@@ -273,7 +291,8 @@ function Menu(props) {
                 className: (0, import_clsx.default)(
                   styles.selectMenuDivider,
                   "strato-select-divider"
-                )
+                ),
+                "aria-hidden": true
               }
             )
           ] }),
@@ -337,7 +356,8 @@ function Menu(props) {
                 className: (0, import_clsx.default)(
                   styles.selectMenuDivider,
                   "strato-select-divider"
-                )
+                ),
+                "aria-hidden": true
               }
             )
           ] }),
@@ -346,13 +366,14 @@ function Menu(props) {
               import_Flex.Flex,
               {
                 tabIndex: 0,
-                role: "option",
+                role: "checkbox",
+                "aria-checked": selectAllState,
                 className: (0, import_clsx.default)(
                   "strato-select-option",
                   styles.selectOptionMulti,
                   styles.selectAll,
                   {
-                    "strato-select-option--selected": selectProps.value?.length > 0,
+                    "strato-select-option--selected": areSomeOptionsSelected,
                     "strato-select-option--disabled": selectProps.loading
                   }
                 ),
@@ -375,17 +396,17 @@ function Menu(props) {
                     {
                       className: (0, import_clsx.default)(
                         styles.selectOptionMultiIndicator({
-                          selected: selectProps.value?.length > 0
+                          selected: areSomeOptionsSelected
                         })
                       ),
                       children: [
-                        allSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        areAllOptionsSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           import_strato_icons.CheckmarkSmallIcon,
                           {
                             className: styles.selectOptionMultiIndicatorIcon
                           }
                         ) : null,
-                        !allSelected && selectProps.value?.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        !areAllOptionsSelected && areSomeOptionsSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           import_strato_icons.MinusIcon,
                           {
                             className: styles.selectOptionMultiIndicatorIcon