@wix/form-public 0.503.0 → 0.504.0

package/dist/index.js

@@ -7,7 +7,7 @@ import ReactDOM from 'react-dom';
 import camelCase2 from 'lodash.camelcase';
 import mapKeys from 'lodash.mapkeys';
 import { jsx } from 'react/jsx-runtime';
-import { CheckboxField, CheckboxButton, TextField, Input, ListBoxItem, ListBox, Dialog, OverlayTriggerStateContext, ModalOverlay, Modal, SearchField, RadioGroup as RadioGroup$1, Button, useSlottedContext, PopoverContext, Popover, Autocomplete, RadioField, RadioButton, CheckboxGroup as CheckboxGroup$1, I18nProvider, DatePicker as DatePicker$1, Select, NumberField, TimeField, SelectValue, CalendarCell, Calendar as Calendar$1, CalendarMonthPicker, CalendarYearPicker, CalendarGrid, DatePickerStateContext, Group, DateInput as DateInput$1, DateSegment, TimeFieldStateContext, FileTrigger, DropZone as DropZone$1, Text as Text$1, ProgressBar, ComboBox, DialogTrigger, TextArea as TextArea$1, ComboBoxStateContext } from 'react-aria-components';
+import { CheckboxField, CheckboxButton, TextField, Input, ListBoxItem, ListBox, Dialog, OverlayTriggerStateContext, ModalOverlay, Modal, SearchField, Group, RadioGroup as RadioGroup$1, Button, useSlottedContext, PopoverContext, Popover, Autocomplete, RadioField, RadioButton, CheckboxGroup as CheckboxGroup$1, I18nProvider, DatePicker as DatePicker$1, Select, NumberField, TimeField, SelectValue, CalendarCell, Calendar as Calendar$1, CalendarMonthPicker, CalendarYearPicker, CalendarGrid, DatePickerStateContext, DateInput as DateInput$1, DateSegment, TimeFieldStateContext, FileTrigger, DropZone as DropZone$1, Text as Text$1, ProgressBar, ComboBox, DialogTrigger, TextArea as TextArea$1, ComboBoxStateContext } from 'react-aria-components';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -53734,6 +53734,49 @@ var DatePickerTriggerButton = /* @__PURE__ */ forwardRef((props2, ref) => {
     onPress: handlePress
   });
 });
+var DROPDOWN_FIELD_TYPES = [
+  FIELD_TYPES.DROPDOWN,
+  FIELD_TYPES.DEXT_DROPDOWN,
+  FIELD_TYPES.SERVICES_DROPDOWN,
+  FIELD_TYPES.DATE_INPUT,
+  FIELD_TYPES.CONTACTS_BIRTHDATE,
+  FIELD_TYPES.DATE_TIME_INPUT,
+  FIELD_TYPES.DEXT_DATE_TIME_INPUT
+];
+var PHONE_FIELD_TYPES = [
+  FIELD_TYPES.PHONE,
+  FIELD_TYPES.CONTACTS_PHONE,
+  FIELD_TYPES.BOOKINGS_PHONE,
+  FIELD_TYPES.DEXT_PHONE
+];
+var ADDRESS_FIELD_TYPES = [
+  FIELD_TYPES.MULTILINE_ADDRESS,
+  FIELD_TYPES.BOOKINGS_ADDRESS,
+  FIELD_TYPES.ECOM_ADDRESS
+];
+var hasCountryOptions = ({ properties }) => properties.validation?.string?.phoneOptions?.allowedCountryCodes?.length !== 1;
+var showsCountry = ({ properties }) => properties.fieldSettings?.country?.show !== false;
+var hasDropdown = (field, isMobile2) => {
+  if (PHONE_FIELD_TYPES.includes(field.fieldType)) {
+    return !isMobile2 && hasCountryOptions(field);
+  }
+  if (ADDRESS_FIELD_TYPES.includes(field.fieldType)) {
+    return showsCountry(field);
+  }
+  return DROPDOWN_FIELD_TYPES.includes(field.fieldType);
+};
+var isOpenableDropdown = (field, isMobile2) => hasDropdown(field, isMobile2) && !field.properties.hidden && !field.properties.disabled && !field.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 { isMobile: isMobile2 = false } = useConfig();
+  const firstDropdownId = useMemo(() => formView && !formView.parentId ? formView.fields.filter((field) => isOpenableDropdown(field, isMobile2)).sort(byLayoutPosition)[0]?.id : void 0, [
+    formView,
+    isMobile2
+  ]);
+  return isOpenState && firstDropdownId === fieldId;
+};
 
 // ../form-fields/dist/esm/ui/date-input-field/date-input-field-headless.js
 var DateInput = ({ children, className }) => {
@@ -53769,11 +53812,12 @@ var DateInput = ({ children, className }) => {
   });
 };
 var Month = ({ children, className }) => {
-  const { disabled, readOnly, showDateLabels, hidePlaceholder } = useFieldPropsV2();
+  const { id: id6, disabled, readOnly, showDateLabels, hidePlaceholder } = useFieldPropsV2();
   const { labelId } = useDateFieldAttributes(SupportedDateParts.MONTH);
   const { partValue, partError, onPartChange } = useDatePart(SupportedDateParts.MONTH);
   const { t } = useTranslation2();
   const [isOpen, setIsOpen] = useState(false);
+  const isForcedOpen = useIsForcedOpenDropdown(id6);
   const [container, setContainer] = useState(null);
   const placeholder = hidePlaceholder ? void 0 : t("field.date.placeholder.month");
   const handleMonthChange = useCallback((selectedValue) => {
@@ -53810,9 +53854,11 @@ var Month = ({ children, className }) => {
     isDisabled: disabled,
     isInvalid: partError,
     placeholder,
-    isOpen,
-    onOpenChange: handleOpenChange
-  }, triggerElement, optionsElement)));
+    isOpen: isForcedOpen || isOpen,
+    onOpenChange: isForcedOpen ? void 0 : handleOpenChange
+  }, triggerElement, applyInternalProps(optionsElement, {
+    isForcedOpen
+  }))));
 };
 var MonthLabel = ({ className }) => {
   return /* @__PURE__ */ React172.createElement(DateLabel, {
@@ -53839,7 +53885,8 @@ var MonthTrigger = ({ children, className }) => {
     "data-readonly": readOnly || void 0
   }, /* @__PURE__ */ React172.createElement(SelectValue, null), children);
 };
-var MonthOptions = ({ children, className }) => {
+var MonthOptions = ({ children, className, ...internal }) => {
+  const { isForcedOpen } = internal;
   const { language } = useConfig();
   const months = useMemo(() => getMonthList(language), [
     language
@@ -53849,7 +53896,9 @@ var MonthOptions = ({ children, className }) => {
     className,
     containerPadding: 0,
     offset: 0
-  }, /* @__PURE__ */ React172.createElement(ListBox, null, months.map((month, index2) => applyInternalProps(optionElement, {
+  }, /* @__PURE__ */ React172.createElement(ListBox, {
+    autoFocus: isForcedOpen ? false : void 0
+  }, months.map((month, index2) => applyInternalProps(optionElement, {
     key: String(index2 + 1),
     value: String(index2 + 1),
     label: month
@@ -54349,11 +54398,12 @@ var DateTimeInput = ({ children, className }) => {
   });
 };
 var Month2 = ({ children, className }) => {
-  const { disabled, readOnly, showDateLabels, hidePlaceholder } = useFieldPropsV2();
+  const { id: id6, disabled, readOnly, showDateLabels, hidePlaceholder } = useFieldPropsV2();
   const { labelId } = useDateTimeFieldAttributes(SupportedDateParts.MONTH);
   const { partValue, partError, onPartChange } = useFieldPart(SupportedDateParts.MONTH);
   const { t } = useTranslation2();
   const [isOpen, setIsOpen] = useState(false);
+  const isForcedOpen = useIsForcedOpenDropdown(id6);
   const [container, setContainer] = useState(null);
   const placeholder = hidePlaceholder ? void 0 : t("field.date.placeholder.month");
   const handleMonthChange = useCallback((selectedValue) => {
@@ -54390,9 +54440,11 @@ var Month2 = ({ children, className }) => {
     isDisabled: disabled,
     isInvalid: partError,
     placeholder,
-    isOpen,
-    onOpenChange: handleOpenChange
-  }, triggerElement, optionsElement)));
+    isOpen: isForcedOpen || isOpen,
+    onOpenChange: isForcedOpen ? void 0 : handleOpenChange
+  }, triggerElement, applyInternalProps(optionsElement, {
+    isForcedOpen
+  }))));
 };
 var MonthLabel2 = ({ className }) => {
   return /* @__PURE__ */ React172.createElement(DateTimeLabel, {
@@ -54419,7 +54471,8 @@ var MonthTrigger3 = ({ children, className }) => {
     "data-readonly": readOnly || void 0
   }, /* @__PURE__ */ React172.createElement(SelectValue, null), children);
 };
-var MonthOptions2 = ({ children, className }) => {
+var MonthOptions2 = ({ children, className, ...internal }) => {
+  const { isForcedOpen } = internal;
   const { language } = useConfig();
   const months = useMemo(() => getMonthList(language), [
     language
@@ -54429,7 +54482,9 @@ var MonthOptions2 = ({ children, className }) => {
     className,
     containerPadding: 0,
     offset: 0
-  }, /* @__PURE__ */ React172.createElement(ListBox, null, months.map((month, index2) => applyInternalProps(optionElement, {
+  }, /* @__PURE__ */ React172.createElement(ListBox, {
+    autoFocus: isForcedOpen ? false : void 0
+  }, months.map((month, index2) => applyInternalProps(optionElement, {
     key: String(index2 + 1),
     value: String(index2 + 1),
     label: month
@@ -55167,23 +55222,6 @@ 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);
@@ -57766,6 +57804,26 @@ City.Error = Error2;
 
 // ../form-fields/dist/esm/ui/multiline-address-field/headless/country-field-headless.js
 init_esm2();
+var KeepComboBoxOpen = ({ isOpen }) => {
+  const state = useContext(ComboBoxStateContext);
+  const wasOpen = useRef(false);
+  useEffect(() => {
+    if (isOpen && state && !state.isOpen) {
+      state.open(null, "manual");
+    }
+    if (isOpen && state?.selectionManager.focusedKey != null) {
+      state.selectionManager.setFocusedKey(null);
+    }
+    if (!isOpen && wasOpen.current) {
+      state?.close();
+    }
+    wasOpen.current = isOpen;
+  }, [
+    isOpen,
+    state
+  ]);
+  return null;
+};
 var useOpenOnClick = ({ readOnly, disabled } = {}) => {
   const state = useContext(ComboBoxStateContext);
   return useCallback(() => {
@@ -57851,7 +57909,8 @@ var useOptionComboBox = ({ options, value, commit, clear, onBlur }) => {
 };
 
 // ../form-fields/dist/esm/ui/multiline-address-field/headless/country-field-headless.js
-var Country = ({ children }) => {
+var Country = ({ children, ...internal }) => {
+  const { isForcedOpen = false } = internal;
   const { id: id6, value, onChange, disabled, readOnly, required, hasError, onBlur, onFocus, FieldLayout, options } = useFieldPropsV2();
   const { labelId } = useFieldAttributes();
   const { t } = useTranslation2();
@@ -57906,6 +57965,8 @@ var Country = ({ children }) => {
       onKeyDown: onInputKeyDown
     }), applyInternalProps(optionsElement, {
       options: countryOptions
+    }), /* @__PURE__ */ React172.createElement(KeepComboBoxOpen, {
+      isOpen: isForcedOpen
     })),
     renderDescription: () => /* @__PURE__ */ React172.createElement(React172.Fragment, null, errorElement, descriptionElement)
   });
@@ -58688,7 +58749,10 @@ var MultilineAddress = ({ children }) => {
     const field = form?.fields?.find((f) => "target" in f && f.target === firstError?.errorPath);
     return field?.id;
   });
-  const countryElement = findChildOfType(children, MultilineAddress.Country);
+  const isForcedOpen = useIsForcedOpenDropdown(id6);
+  const countryElement = applyInternalProps(findChildOfType(children, MultilineAddress.Country), {
+    isForcedOpen
+  });
   const subdivisionElement = findChildOfType(children, MultilineAddress.Subdivision);
   const cityElement = findChildOfType(children, MultilineAddress.City);
   const addressLineElement = findChildOfType(children, MultilineAddress.AddressLine);
@@ -59210,10 +59274,12 @@ var CountryButtonEmptyState = ({ children, className }) => {
 CountryButton.Flag = CountryButtonFlag;
 CountryButton.EmptyState = CountryButtonEmptyState;
 var CountryOptions = ({ children, className, "aria-label": ariaLabel, placement, offset, ...internal }) => {
-  const { triggerRef, optionsRef } = internal;
+  const { triggerRef, optionsRef, isForcedOpen } = internal;
   const { popoverContainer } = usePhoneInputContext();
   const searchElement = findChildOfType(children, CountryOptions.Search);
-  const content = /* @__PURE__ */ React172.createElement(CountryOptionsContent, null, children);
+  const content = /* @__PURE__ */ React172.createElement(CountryOptionsContent, {
+    isForcedOpen
+  }, children);
   return /* @__PURE__ */ React172.createElement($72abaeab4d80592f$export$78efe591171d7d45, {
     getContainer: () => popoverContainer
   }, /* @__PURE__ */ React172.createElement(NonModalPopover, {
@@ -59223,7 +59289,7 @@ var CountryOptions = ({ children, className, "aria-label": ariaLabel, placement,
     placement,
     offset,
     containerPadding: 0
-  }, searchElement ? /* @__PURE__ */ React172.createElement(Dialog, {
+  }, searchElement && !isForcedOpen ? /* @__PURE__ */ React172.createElement(Dialog, {
     "aria-label": ariaLabel
   }, content) : content));
 };
@@ -59253,7 +59319,7 @@ var CountryOptionsModal = ({ children, className, overlayClassName, "aria-label"
     }
   }, children)))));
 };
-var CountryOptionsContent = ({ children, listBoxProps }) => {
+var CountryOptionsContent = ({ children, listBoxProps, isForcedOpen }) => {
   const { countries } = usePhoneInputContext();
   const optionElement = findChildOfType(children, CountryOptions.Option);
   const searchElement = findChildOfType(children, CountryOptions.Search);
@@ -59276,16 +59342,20 @@ var CountryOptionsContent = ({ children, listBoxProps }) => {
       const country = countries.find((item) => item.shortCountryCode === node.key);
       return !!country && isCountryMatching(country, query);
     }
-  }, searchElement, listbox) : listbox;
+  }, isForcedOpen ? applyInternalProps(searchElement, {
+    autoFocus: false
+  }) : searchElement, listbox) : listbox;
 };
 CountryOptions.Popover = CountryOptions;
 CountryOptions.Modal = CountryOptionsModal;
-var CountrySearch = ({ className, children, "aria-label": ariaLabel }) => {
+var CountrySearch = ({ className, children, "aria-label": ariaLabel, ...internal }) => {
+  const { autoFocus = true } = internal;
   return /* @__PURE__ */ React172.createElement(SearchField, {
-    className,
     "aria-label": ariaLabel,
-    autoFocus: true
-  }, children);
+    autoFocus
+  }, /* @__PURE__ */ React172.createElement(Group, {
+    className
+  }, children));
 };
 var CountrySearchInput = ({ className, placeholder }) => /* @__PURE__ */ React172.createElement(Input, {
   className,
@@ -59368,7 +59438,8 @@ var Control7 = ({ children, className }) => {
   const controlRef = useRef(null);
   const optionsRef = useRef(null);
   const isFocused = useRef(false);
-  const { disabled, readOnly, required, hasError, showFlag, onFocus, onBlur } = useFieldPropsV2();
+  const { id: id6, disabled, readOnly, required, hasError, showFlag, onFocus, onBlur } = useFieldPropsV2();
+  const [isOpen, setIsOpen] = useState(false);
   const invokeBlur = useInvokeCallback(onBlur);
   const { t } = useTranslation2();
   const { selectedCountryCode, handleCountryCodeChange, countries } = usePhoneInputContext();
@@ -59376,6 +59447,11 @@ var Control7 = ({ children, className }) => {
   const modalElement = findChildOfType(children, PhoneInput.CountryOptions.Modal);
   const countryOptionsElement = modalElement ?? findChildOfType(children, PhoneInput.CountryOptions.Popover);
   const phoneNumberElement = findChildOfType(children, PhoneInput.PhoneNumber);
+  const hasCountryOptions2 = countries.length > 1;
+  const isForcedOpen = useIsForcedOpenDropdown(id6) && !modalElement && hasCountryOptions2;
+  const controlClassName = typeof className === "function" ? className({
+    hasCountryOptions: hasCountryOptions2
+  }) : className;
   const focusHandlers = {
     onFocus: () => {
       if (!isFocused.current) {
@@ -59394,7 +59470,7 @@ var Control7 = ({ children, className }) => {
   if (countries.length === 1) {
     return /* @__PURE__ */ React172.createElement(Group, {
       ref: controlRef,
-      className,
+      className: controlClassName,
       isDisabled: disabled,
       isInvalid: hasError,
       ...focusHandlers
@@ -59404,11 +59480,12 @@ var Control7 = ({ children, className }) => {
   }
   const selector = /* @__PURE__ */ React172.createElement(React172.Fragment, null, countryButtonElement, applyInternalProps(countryOptionsElement, {
     triggerRef: controlRef,
-    optionsRef
+    optionsRef,
+    isForcedOpen
   }));
   return /* @__PURE__ */ React172.createElement(Group, {
     ref: controlRef,
-    className,
+    className: controlClassName,
     isDisabled: disabled,
     isInvalid: hasError,
     ...focusHandlers
@@ -59419,7 +59496,9 @@ var Control7 = ({ children, className }) => {
     isDisabled: disabled || readOnly,
     isInvalid: hasError,
     isRequired: required,
-    placeholder: ""
+    placeholder: "",
+    isOpen: isForcedOpen || isOpen && !disabled && !readOnly,
+    onOpenChange: isForcedOpen ? void 0 : setIsOpen
   }, selector), phoneNumberElement);
 };
 PhoneInput.Label = Label;