@wix/form-public 0.500.0 → 0.502.0

package/dist/index.cjs

@@ -51077,7 +51077,8 @@ Label.Image = LabelImage;
 
 // ../form-fields/dist/esm/headless/styled/shared/use-element-state-class-name.js
 __toESM(require_classnames());
-React172.createContext(void 0);
+var ElementPropsContext = React172.createContext(void 0);
+var useElementProps = () => React172.useContext(ElementPropsContext) ?? {};
 function useFocus({ onBlur, onFocus }) {
   const containerRef = React172.useRef(null);
   const isFocused = React172.useRef(false);
@@ -55153,9 +55154,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 = React172.useContext(FormViewContext);
+  const firstDropdownId = React172.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] = React172.useState(false);
+  const isForcedOpen = useIsForcedOpenDropdown(id6);
   const [container, setContainer] = React172.useState(null);
   const selectedValue = value && options.some((option2) => (option2.value ?? option2.label) === value) ? value : defaultValue || null;
   const { labelId } = useFieldAttributes();
@@ -55189,8 +55208,8 @@ var Dropdown = ({ children }) => {
     }, /* @__PURE__ */ React172__default.default.createElement(reactAriaComponents.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,
@@ -55198,7 +55217,9 @@ var Dropdown = ({ children }) => {
       placeholder,
       onBlur,
       onFocus
-    }, triggerElement, optionsElement))),
+    }, triggerElement, applyInternalProps(optionsElement, {
+      isForcedOpen
+    })))),
     renderDescription: () => /* @__PURE__ */ React172__default.default.createElement(React172__default.default.Fragment, null, errorElement, descriptionElement)
   });
 };
@@ -55218,14 +55239,17 @@ var Trigger2 = ({ children, className }) => {
     "data-loading": isLoading || void 0
   }, /* @__PURE__ */ React172__default.default.createElement(reactAriaComponents.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__default.default.createElement(NonModalPopover, {
     className,
     containerPadding: 0,
     offset: 0
-  }, /* @__PURE__ */ React172__default.default.createElement(reactAriaComponents.ListBox, null, options.map((option2) => applyInternalProps(optionElement, {
+  }, /* @__PURE__ */ React172__default.default.createElement(reactAriaComponents.ListBox, {
+    autoFocus: isForcedOpen ? false : void 0
+  }, options.map((option2) => applyInternalProps(optionElement, {
     key: option2.value ?? option2.label,
     value: option2.value ?? option2.label,
     label: option2.label