@uxf/form 11.80.4 → 11.85.0

package/checkbox-list/checkbox-list.d.ts

@@ -1,19 +1,12 @@
-import { CheckboxInputProps as UICheckboxInputProps } from "@uxf/ui/checkbox-input";
-import { FormControlProps } from "@uxf/ui/types";
-import React, { ReactNode } from "react";
+import { CheckboxListOption, CheckboxListValueId, CheckboxListProps as UICheckboxListProps } from "@uxf/ui/checkbox-list";
+import React from "react";
 import { FieldValues } from "react-hook-form";
 import { ControlProps } from "../types";
-type ValueType = string | number;
-export type CheckboxListOption = {
-    id: ValueType;
-    label: ReactNode;
-    isDisabled?: boolean;
-};
-export type CheckboxListValue<T> = T[] | null;
-type CheckboxListProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UICheckboxInputProps, "isInvalid" | "name" | "onChange" | "value"> & {
-    onChange?: FormControlProps<CheckboxListValue<string | number>>["onChange"];
+export type CheckboxListProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UICheckboxListProps, "isInvalid" | "name" | "onChange" | "value"> & {
+    onChange?: UICheckboxListProps["onChange"];
     options: CheckboxListOption[];
     requiredMessage?: string;
+    onChangeConfirm?: (value: UICheckboxListProps["value"]) => Promise<boolean>;
 };
+export type CheckboxListValue<T extends CheckboxListValueId> = T[] | null;
 export declare function CheckboxList<FormData extends FieldValues>(props: CheckboxListProps<FormData>): React.JSX.Element;
-export {};

package/checkbox-list/checkbox-list.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -31,10 +32,18 @@ function CheckboxList(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    const onChange = (value, event) => {
-        var _a;
-        field.onChange(value);
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    const onChange = async (value, event) => {
+        var _a, _b;
+        if ((0, is_not_nil_1.isNotNil)(props.onChangeConfirm)) {
+            if (await props.onChangeConfirm(value)) {
+                field.onChange(value);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+            }
+        }
+        else {
+            field.onChange(value);
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value, event);
+        }
     };
-    return (react_1.default.createElement(checkbox_list_1.CheckboxList, { className: props.className, hasHiddenLabel: props.hiddenLabel, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, id: id, isDisabled: formContext.isFormDisabled || props.isDisabled, isFocused: props.isFocused, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, name: props.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, value: field.value }));
+    return (react_1.default.createElement(checkbox_list_1.CheckboxList, { className: props.className, hasHiddenLabel: props.hasHiddenLabel, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, id: id, isDisabled: formContext.isFormDisabled || props.isDisabled, isFocused: props.isFocused, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, name: props.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, value: field.value }));
 }

package/checkbox-list/checkbox-list.stories.js

@@ -17,6 +17,6 @@ function Default() {
     return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-2 p-20" },
         react_1.default.createElement(checkbox_list_1.CheckboxList, { control: control, label: "CheckboxList default", name: "checkboxList1", options: CHECKBOX_LIST_OPTIONS }),
         react_1.default.createElement(checkbox_list_1.CheckboxList, { control: control, isRequired: true, label: "CheckboxList required", name: "checkboxList2", options: CHECKBOX_LIST_OPTIONS }),
-        react_1.default.createElement(checkbox_list_1.CheckboxList, { control: control, hiddenLabel: true, label: "CheckboxList with hidden label", name: "checkboxList3", options: CHECKBOX_LIST_OPTIONS }),
+        react_1.default.createElement(checkbox_list_1.CheckboxList, { control: control, hasHiddenLabel: true, label: "CheckboxList with hidden label", name: "checkboxList3", options: CHECKBOX_LIST_OPTIONS }),
         react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")))));
 }

package/color-radio-group/color-radio-group.d.ts

@@ -5,6 +5,7 @@ import { ControlProps } from "../types";
 export type ColorRadioGroupProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIColorRadioGroupProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
     onChange?: UIColorRadioGroupProps["onChange"];
     requiredMessage?: string;
+    onChangeConfirm?: (value: UIColorRadioGroupProps["value"]) => Promise<boolean>;
 };
 export type ColorRadioGroupValue = `#${string}` | null;
 export declare function ColorRadioGroup<FormData extends Record<string, any>>(props: ColorRadioGroupProps<FormData>): React.JSX.Element;

package/color-radio-group/color-radio-group.js

@@ -32,10 +32,18 @@ function ColorRadioGroup(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    const onChange = (value, event) => {
-        var _a;
-        field.onChange(value);
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    const onChange = async (value, event) => {
+        var _a, _b;
+        if ((0, is_not_nil_1.isNotNil)(props.onChangeConfirm)) {
+            if (await props.onChangeConfirm(value)) {
+                field.onChange(value);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+            }
+        }
+        else {
+            field.onChange(value);
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value, event);
+        }
     };
     return (react_1.default.createElement(color_radio_group_1.ColorRadioGroup, { className: props.className, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isDisabled: props.options.length === 0 || formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, ref: field.ref, style: props.style, value: (_d = field.value) !== null && _d !== void 0 ? _d : null }));
 }

package/combobox/combobox.d.ts

@@ -2,12 +2,13 @@ import { ComboboxValueId, ComboboxProps as UIComboboxProps, ComboboxValue as UIC
 import React from "react";
 import { FieldValues } from "react-hook-form";
 import { ControlProps } from "../types";
-export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIComboboxProps, "inputGroupRef" | "inputRef" | "inputWrapperRef" | "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
+export type ComboboxProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIComboboxProps, "inputGroupRef" | "inputRef" | "inputWrapperRef" | "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
     onChange?: UIComboboxProps["onChange"];
     requiredMessage?: string;
+    onChangeConfirm?: (value: UIComboboxProps["value"]) => Promise<boolean>;
 };
 export type ComboboxValue<Id extends ComboboxValueId> = UIComboboxValue<Id> | null;
-export declare function Combobox<FormData extends Record<string, any>>(props: ComboProps<FormData>): React.JSX.Element;
+export declare function Combobox<FormData extends Record<string, any>>(props: ComboboxProps<FormData>): React.JSX.Element;
 export declare namespace Combobox {
     var displayName: string;
 }

package/combobox/combobox.js

@@ -35,10 +35,18 @@ function Combobox(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    const onChange = (value, event) => {
-        var _a;
-        field.onChange(value);
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    const onChange = async (value, event) => {
+        var _a, _b;
+        if ((0, is_not_nil_1.isNotNil)(props.onChangeConfirm)) {
+            if (await props.onChangeConfirm(value)) {
+                field.onChange(value);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+            }
+        }
+        else {
+            field.onChange(value);
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value, event);
+        }
     };
     const isDisabled = ((0, is_nil_1.isNil)(props.loadOptions) && (0, is_empty_1.isEmpty)((_b = props.options) !== null && _b !== void 0 ? _b : empty_array_1.EMPTY_ARRAY)) ||
         formContext.isFormDisabled ||

package/date-range-picker-input/date-range-picker-input.d.ts

@@ -1,3 +1,4 @@
+import { DateRangePickerValueType } from "@uxf/ui/date-range-picker";
 import { DateRangePickerInputProps as UIDateRangePickerInputProps } from "@uxf/ui/date-range-picker-input";
 import React from "react";
 import { FieldValues } from "react-hook-form";
@@ -6,6 +7,7 @@ export type DateRangePickerInputProps<FormData extends FieldValues> = ControlPro
     onChange?: UIDateRangePickerInputProps["onChange"];
     requiredMessage?: string;
 };
+export type DateRangePickerInputValueType = DateRangePickerValueType;
 export declare function DateRangePickerInput<FormData extends FieldValues>(props: DateRangePickerInputProps<FormData>): React.JSX.Element;
 export declare namespace DateRangePickerInput {
     var displayName: string;

package/date-range-picker-input/date-range-picker-input.js

@@ -40,7 +40,7 @@ const form_context_1 = require("../form-id-context/form-context");
 (0, dayjs_1.extend)(customParseFormat_1.default);
 const OUTPUT_DATE_FORMAT = "YYYY-MM-DD";
 function DateRangePickerInput(props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const formContext = (0, form_context_1.useFormContext)();
     const t = (0, translations_1.useUxfTranslation)();
     const { field, fieldState } = (0, react_hook_form_1.useController)({
@@ -56,10 +56,10 @@ function DateRangePickerInput(props) {
                     if (!value) {
                         return;
                     }
-                    const { from, to } = (0, date_range_picker_input_2.splitValueToRange)(value);
-                    const fromIsValid = (0, dayjs_1.default)(from, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true).isValid();
-                    const toIsValid = (0, dayjs_1.default)(to, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true).isValid();
-                    if (!fromIsValid || !toIsValid) {
+                    const { from, to } = value;
+                    const isFromValid = (0, dayjs_1.default)(from, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true).isValid();
+                    const isToValid = (0, dayjs_1.default)(to, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true).isValid();
+                    if (!isFromValid || !isToValid) {
                         return t("uxf-form-date-range-picker-input:validation.invalid-date-range-format", {
                             format: "D. M. YYYY. - D. M. YYYY.",
                             value: value,
@@ -86,30 +86,32 @@ function DateRangePickerInput(props) {
     const onChange = (value, event) => {
         var _a;
         if (value) {
-            const { from, to } = (0, date_range_picker_input_2.splitValueToRange)(value);
-            const fromIsValid = (0, dayjs_1.default)(from, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true).isValid();
-            const toIsValid = (0, dayjs_1.default)(to, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true).isValid();
-            if (fromIsValid || toIsValid) {
-                field.onChange((fromIsValid ? (0, dayjs_1.default)(from, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true).format(OUTPUT_DATE_FORMAT) : from) +
-                    date_range_picker_input_2.SEPARATOR +
-                    (toIsValid ? (0, dayjs_1.default)(to, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true).format(OUTPUT_DATE_FORMAT) : to));
-            }
+            const { from, to } = (0, date_range_picker_input_2.splitValueToRange)(value.replace(/(?<=\d)-(?=\d)/g, date_range_picker_input_2.SEPARATOR));
+            const isFromValid = (0, dayjs_1.default)(from, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true).isValid();
+            const isToValid = (0, dayjs_1.default)(to, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true).isValid();
+            field.onChange({
+                from: isFromValid ? (0, dayjs_1.default)(from, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true).format(OUTPUT_DATE_FORMAT) : (from !== null && from !== void 0 ? from : ""),
+                to: isToValid ? (0, dayjs_1.default)(to, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true).format(OUTPUT_DATE_FORMAT) : (to !== null && to !== void 0 ? to : ""),
+            });
         }
         else {
             field.onChange(value);
         }
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
-    const { from: fieldFrom, to: fieldTo } = (0, date_range_picker_input_2.splitValueToRange)(field.value);
-    const parsedFrom = (0, dayjs_1.default)(fieldFrom, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true);
-    const parsedTo = (0, dayjs_1.default)(fieldTo, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true);
+    const fieldFrom = (_c = field.value) === null || _c === void 0 ? void 0 : _c.from;
+    const fieldTo = (_d = field.value) === null || _d === void 0 ? void 0 : _d.to;
+    const dayjsFrom = (0, dayjs_1.default)(fieldFrom, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true);
+    const dayjsTo = (0, dayjs_1.default)(fieldTo, date_range_picker_input_2.ALLOWED_DATE_FORMAT, true);
+    const isFromValid = dayjsFrom.isValid();
+    const isToValid = dayjsTo.isValid();
     const value = field.value
-        ? parsedFrom.isValid() || parsedTo.isValid()
-            ? (parsedFrom.isValid() ? parsedFrom.format(date_range_picker_input_2.DISPLAY_DATE_FORMAT) : fieldFrom) +
-                date_range_picker_input_2.SEPARATOR +
-                (parsedTo.isValid() ? parsedTo.format(date_range_picker_input_2.DISPLAY_DATE_FORMAT) : fieldTo)
-            : field.value
+        ? isFromValid || isToValid
+            ? `${isFromValid ? dayjsFrom.format(date_range_picker_input_2.DISPLAY_DATE_FORMAT) : fieldFrom}${date_range_picker_input_2.SEPARATOR}${isToValid ? dayjsTo.format(date_range_picker_input_2.DISPLAY_DATE_FORMAT) : fieldTo}`
+            : field.value.from && field.value.to
+                ? `${field.value.from}${date_range_picker_input_2.SEPARATOR}${field.value.to}`
+                : field.value.from
         : null;
-    return (react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { autoFocus: props.autoFocus, bottomContent: props.bottomContent, className: props.className, datesConfig: props.datesConfig, form: props.form, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isClearable: props.isClearable, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, numberOfMonths: props.numberOfMonths, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, placeholder: props.placeholder, popoverPlacement: props.popoverPlacement, popoverStrategy: props.popoverStrategy, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, triggerElement: props.triggerElement, unavailableDates: props.unavailableDates, value: value, variant: props.variant }));
+    return (react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { autoFocus: props.autoFocus, bottomContent: props.bottomContent, className: props.className, datesConfig: props.datesConfig, form: props.form, helperText: (_f = (_e = fieldState.error) === null || _e === void 0 ? void 0 : _e.message) !== null && _f !== void 0 ? _f : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isClearable: props.isClearable, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, numberOfMonths: props.numberOfMonths, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, placeholder: props.placeholder, popoverPlacement: props.popoverPlacement, popoverStrategy: props.popoverStrategy, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, triggerElement: props.triggerElement, unavailableDates: props.unavailableDates, value: value, variant: props.variant }));
 }
 DateRangePickerInput.displayName = "UxfFormDateRangePickerInput";

package/multi-combobox/multi-combobox.d.ts

@@ -2,12 +2,13 @@ import { MultiComboboxOption, MultiComboboxProps as UIMultiComboboxProps } from
 import React from "react";
 import { FieldValues } from "react-hook-form";
 import { ControlProps } from "../types";
-export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIMultiComboboxProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
+export type MultiComboboxProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIMultiComboboxProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
     onChange?: UIMultiComboboxProps["onChange"];
     requiredMessage?: string;
+    onChangeConfirm?: (value: UIMultiComboboxProps["value"]) => Promise<boolean>;
 };
 export type MultiComboboxValue<Id> = MultiComboboxOption<Id>[] | null;
-export declare function MultiCombobox<FormData extends Record<string, any>>(props: ComboProps<FormData>): React.JSX.Element;
+export declare function MultiCombobox<FormData extends Record<string, any>>(props: MultiComboboxProps<FormData>): React.JSX.Element;
 export declare namespace MultiCombobox {
     var displayName: string;
 }

package/multi-combobox/multi-combobox.js

@@ -35,10 +35,18 @@ function MultiCombobox(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    const onChange = (value, event) => {
-        var _a;
-        field.onChange(value);
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    const onChange = async (value, event) => {
+        var _a, _b;
+        if ((0, is_not_nil_1.isNotNil)(props.onChangeConfirm)) {
+            if (await props.onChangeConfirm(value)) {
+                field.onChange(value);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+            }
+        }
+        else {
+            field.onChange(value);
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value, event);
+        }
     };
     const isDisabled = ((0, is_nil_1.isNil)(props.loadOptions) && (0, is_empty_1.isEmpty)((_b = props.options) !== null && _b !== void 0 ? _b : empty_array_1.EMPTY_ARRAY)) ||
         formContext.isFormDisabled ||

package/multi-combobox/multi-combobox.stories.js

@@ -32,6 +32,7 @@ function Default() {
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED...", id: "form-combobox", label: "Combobox with checkboxes", name: "combobox-with-checkboxes", options: options, placeholder: "Vyberte...", withCheckboxes: true }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED...", id: "form-combobox", isRequired: true, label: "Combobox form required", name: "combobox-required", options: options, placeholder: "Vyberte..." }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, id: "form-combobox", isDisabled: true, label: "Combobox form disabled", name: "combobox-disabled", options: options, placeholder: "Vyberte..." }),
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, dropdownMaxHeight: 350, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED...", id: "form-combobox", label: "Combobox form with onChangeConfirm", name: "combobox-with-onchangeconfirm", onChangeConfirm: () => Promise.resolve(confirm("Really want to change?")), options: options, placeholder: "Vyberte..." }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, dropdownPlacement: "top", id: "form-combobox", label: "Combobox form with dropdown top", name: "select-dropdown-top", options: options, placeholder: "Vyberte..." }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, dropdownPlacement: "top", id: "form-combobox", label: "Combobox async", loadOptions: (query) => Promise.resolve(options.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase()))), name: "select-dropdown-async", placeholder: "Vyberte..." }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, dropdownPlacement: "top", id: "form-combobox", label: "Combobox async with default values", loadOptions: (query) => Promise.resolve(options.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase()))), name: "select-dropdown-async-default", placeholder: "Vyberte..." }),

package/multi-select/multi-select.d.ts

@@ -6,6 +6,7 @@ import { ControlProps } from "../types";
 export type MultiSelectProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIMultiSelectProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
     onChange?: UIMultiSelectProps["onChange"];
     requiredMessage?: string;
+    onChangeConfirm?: (value: UIMultiSelectProps["value"]) => Promise<boolean>;
 };
 export type MultiSelectValue<T extends SelectableId> = T[] | null;
 export declare function MultiSelect<FormData extends Record<string, any>>(props: MultiSelectProps<FormData>): React.JSX.Element;

package/multi-select/multi-select.js

@@ -33,10 +33,18 @@ function MultiSelect(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    const onChange = (value, event) => {
-        var _a;
-        field.onChange(value);
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    const onChange = async (value, event) => {
+        var _a, _b;
+        if ((0, is_not_nil_1.isNotNil)(props.onChangeConfirm)) {
+            if (await props.onChangeConfirm(value)) {
+                field.onChange(value);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+            }
+        }
+        else {
+            field.onChange(value);
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value, event);
+        }
     };
     return (react_1.default.createElement(multi_select_1.MultiSelect, { allOptionsSelectedMessage: props.allOptionsSelectedMessage, className: props.className, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownMaxHeight: props.dropdownMaxHeight, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, form: props.form, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: id, inputArrow: props.inputArrow, isDisabled: (0, is_empty_1.isEmpty)(props.options) || formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, noOptionsMessage: props.noOptionsMessage, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, ref: field.ref, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, value: field.value, variant: props.variant, withCheckboxes: props.withCheckboxes }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/form",
-    "version": "11.80.4",
+    "version": "11.85.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -16,9 +16,9 @@
     },
     "license": "MIT",
     "dependencies": {
-        "@uxf/core": "11.80.4",
-        "@uxf/core-react": "11.80.4",
-        "@uxf/ui": "11.80.4",
+        "@uxf/core": "11.85.0",
+        "@uxf/core-react": "11.85.0",
+        "@uxf/ui": "11.85.0",
         "coordinate-parser": "1.0.7",
         "dayjs": "1.11.13",
         "react-hook-form": "7.53.0"

package/radio-group/radio-group.d.ts

@@ -5,6 +5,7 @@ import { ControlProps } from "../types";
 export type RadioGroupProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIRadioGroupProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
     onChange?: UIRadioGroupProps["onChange"];
     requiredMessage?: string;
+    onChangeConfirm?: (value: UIRadioGroupProps["value"]) => Promise<boolean>;
 };
 export type RadioGroupValue<T extends RadioGroupOptionValueId> = T | null;
 export declare function RadioGroup<FormData extends Record<string, any>>(props: RadioGroupProps<FormData>): React.JSX.Element;

package/radio-group/radio-group.js

@@ -32,10 +32,18 @@ function RadioGroup(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    const onChange = (value, event) => {
-        var _a;
-        field.onChange(value);
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    const onChange = async (value, event) => {
+        var _a, _b;
+        if ((0, is_not_nil_1.isNotNil)(props.onChangeConfirm)) {
+            if (await props.onChangeConfirm(value)) {
+                field.onChange(value);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+            }
+        }
+        else {
+            field.onChange(value);
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value, event);
+        }
     };
     return (react_1.default.createElement(radio_group_1.RadioGroup, { className: props.className, forceColumn: props.forceColumn, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isDisabled: props.options.length === 0 || formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, radioSize: props.radioSize, ref: field.ref, style: props.style, value: (_d = field.value) !== null && _d !== void 0 ? _d : null, variant: props.variant }));
 }

package/select/select.d.ts

@@ -5,6 +5,7 @@ import { ControlProps } from "../types";
 export type SelectProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UISelectProps, "inputGroupRef" | "inputRef" | "inputWrapperRef" | "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
     onChange?: UISelectProps["onChange"];
     requiredMessage?: string;
+    onChangeConfirm?: (value: UISelectProps["value"]) => Promise<boolean>;
 };
 export type SelectValue<T extends UISelectValue> = T | null;
 export declare function Select<FormData extends Record<string, any>>(props: SelectProps<FormData>): React.JSX.Element;

package/select/select.js

@@ -31,10 +31,18 @@ function Select(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    const onChange = (value, event) => {
-        var _a;
-        field.onChange(value);
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    const onChange = async (value, event) => {
+        var _a, _b;
+        if ((0, is_not_nil_1.isNotNil)(props.onChangeConfirm)) {
+            if (await props.onChangeConfirm(value)) {
+                field.onChange(value);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+            }
+        }
+        else {
+            field.onChange(value);
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value, event);
+        }
     };
     return (react_1.default.createElement(select_1.Select, { className: props.className, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownMaxHeight: props.dropdownMaxHeight, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, form: props.form, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: id, inputArrow: props.inputArrow, inputRef: field.ref, isClearable: props.isClearable, isDisabled: (0, is_empty_1.isEmpty)(props.options) || formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, noOptionsMessage: props.noOptionsMessage, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, renderSelectedOption: props.renderSelectedOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, value: field.value, variant: props.variant }));
 }