@wix/form-public 0.500.0 → 0.502.0

package/dist/index.js

@@ -51067,7 +51067,8 @@ Label.Image = LabelImage;
 
 // ../form-fields/dist/esm/headless/styled/shared/use-element-state-class-name.js
 __toESM(require_classnames());
-createContext(void 0);
+var ElementPropsContext = createContext(void 0);
+var useElementProps = () => useContext(ElementPropsContext) ?? {};
 function useFocus({ onBlur, onFocus }) {
   const containerRef = useRef(null);
   const isFocused = useRef(false);
@@ -55143,9 +55144,27 @@ Donation.Options = Options2;
 Donation.OtherInput = OtherInput2;
 Donation.Description = Description;
 Donation.Error = Error2;
+var DROPDOWN_FIELD_TYPES = [
+  FIELD_TYPES.DROPDOWN,
+  FIELD_TYPES.DEXT_DROPDOWN,
+  FIELD_TYPES.SERVICES_DROPDOWN
+];
+var isOpenableDropdown = ({ fieldType, properties }) => DROPDOWN_FIELD_TYPES.includes(fieldType) && !properties.hidden && !properties.disabled && !properties.readOnly;
+var byLayoutPosition = (first2, second) => first2.layout.row - second.layout.row || first2.layout.column - second.layout.column;
+var useIsForcedOpenDropdown = (fieldId) => {
+  const isOpenState = useElementProps().dropdown?.open === true;
+  const formView = useContext(FormViewContext);
+  const firstDropdownId = useMemo(() => formView && !formView.parentId ? formView.fields.filter(isOpenableDropdown).sort(byLayoutPosition)[0]?.id : void 0, [
+    formView
+  ]);
+  return isOpenState && firstDropdownId === fieldId;
+};
+
+// ../form-fields/dist/esm/ui/dropdown-field/dropdown-field-headless.js
 var Dropdown = ({ children }) => {
   const { id: id6, value, defaultValue, options = [], readOnly, onChange, placeholder, disabled, required, onBlur, onFocus, FieldLayout, hasError } = useFieldPropsV2();
   const [isOpen, setIsOpen] = useState(false);
+  const isForcedOpen = useIsForcedOpenDropdown(id6);
   const [container, setContainer] = useState(null);
   const selectedValue = value && options.some((option2) => (option2.value ?? option2.label) === value) ? value : defaultValue || null;
   const { labelId } = useFieldAttributes();
@@ -55179,8 +55198,8 @@ var Dropdown = ({ children }) => {
     }, /* @__PURE__ */ React172.createElement(Select, {
       "aria-labelledby": labelId,
       value: selectedValue,
-      isOpen: isOpen && !disabled && !readOnly,
-      onOpenChange: handleOpenChange,
+      isOpen: isForcedOpen || isOpen && !disabled && !readOnly,
+      onOpenChange: isForcedOpen ? void 0 : handleOpenChange,
       onChange: handleChange,
       isDisabled: disabled,
       isInvalid: hasError,
@@ -55188,7 +55207,9 @@ var Dropdown = ({ children }) => {
       placeholder,
       onBlur,
       onFocus
-    }, triggerElement, optionsElement))),
+    }, triggerElement, applyInternalProps(optionsElement, {
+      isForcedOpen
+    })))),
     renderDescription: () => /* @__PURE__ */ React172.createElement(React172.Fragment, null, errorElement, descriptionElement)
   });
 };
@@ -55208,14 +55229,17 @@ var Trigger2 = ({ children, className }) => {
     "data-loading": isLoading || void 0
   }, /* @__PURE__ */ React172.createElement(SelectValue, null), children);
 };
-var Options3 = ({ children, className }) => {
+var Options3 = ({ children, className, ...internal }) => {
+  const { isForcedOpen } = internal;
   const { options = [] } = useFieldPropsV2();
   const optionElement = findChildOfType(children, Options3.Option);
   return /* @__PURE__ */ React172.createElement(NonModalPopover, {
     className,
     containerPadding: 0,
     offset: 0
-  }, /* @__PURE__ */ React172.createElement(ListBox, null, options.map((option2) => applyInternalProps(optionElement, {
+  }, /* @__PURE__ */ React172.createElement(ListBox, {
+    autoFocus: isForcedOpen ? false : void 0
+  }, options.map((option2) => applyInternalProps(optionElement, {
     key: option2.value ?? option2.label,
     value: option2.value ?? option2.label,
     label: option2.label