@uxf/form
Advanced tools
Comparing version 11.20.0 to 11.21.0
@@ -6,3 +6,3 @@ import { AvatarFileInputProps as UIAvatarFileInputProps } from "@uxf/ui/avatar-file-input"; | ||
import { ControlProps } from "../types"; | ||
export type AvatarFileInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIAvatarFileInputProps, "isInvalid" | "onChange" | "value"> & { | ||
export type AvatarFileInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIAvatarFileInputProps, "isFocused" | "isInvalid" | "onChange" | "value"> & { | ||
onChange?: UIAvatarFileInputProps["onChange"]; | ||
@@ -9,0 +9,0 @@ requiredMessage?: string; |
@@ -34,5 +34,5 @@ "use strict"; | ||
}; | ||
return (react_1.default.createElement(avatar_file_input_1.AvatarFileInput, { accept: props.accept, "aria-describedby": props["aria-describedby"], className: props.className, customControls: props.customControls, 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, icon: props.icon, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, maxFileSize: props.maxFileSize, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, removeFileLabel: props.removeFileLabel, selectFileLabel: props.selectFileLabel, value: field.value, variant: props.variant })); | ||
return (react_1.default.createElement(avatar_file_input_1.AvatarFileInput, { accept: props.accept, "aria-describedby": props["aria-describedby"], className: props.className, customControls: props.customControls, 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, icon: props.icon, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, maxFileSize: props.maxFileSize, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, removeFileLabel: props.removeFileLabel, selectFileLabel: props.selectFileLabel, value: field.value, variant: props.variant })); | ||
} | ||
exports.AvatarFileInput = AvatarFileInput; | ||
AvatarFileInput.displayName = "UxfFormAvatarFileInput"; |
@@ -5,3 +5,3 @@ import { CheckboxButtonProps as UICheckboxButtonProps } from "@uxf/ui/checkbox-button"; | ||
import { ControlProps } from "../types"; | ||
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UICheckboxButtonProps, "isInvalid" | "name" | "onChange" | "value"> & { | ||
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UICheckboxButtonProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & { | ||
nullable?: boolean; | ||
@@ -8,0 +8,0 @@ onChange?: UICheckboxButtonProps["onChange"]; |
@@ -5,3 +5,3 @@ import { CheckboxInputProps as UICheckboxInputProps } from "@uxf/ui/checkbox-input"; | ||
import { ControlProps } from "../types"; | ||
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UICheckboxInputProps, "isInvalid" | "name" | "onChange" | "value"> & { | ||
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UICheckboxInputProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & { | ||
nullable?: boolean; | ||
@@ -8,0 +8,0 @@ onChange?: UICheckboxInputProps["onChange"]; |
@@ -5,3 +5,3 @@ import { ColorRadioGroupProps as UIColorRadioGroupProps } from "@uxf/ui/color-radio-group"; | ||
import { ControlProps } from "../types"; | ||
export type ColorRadioGroupProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIColorRadioGroupProps, "isInvalid" | "name" | "onChange" | "value"> & { | ||
export type ColorRadioGroupProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIColorRadioGroupProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & { | ||
onChange?: UIColorRadioGroupProps["onChange"]; | ||
@@ -8,0 +8,0 @@ requiredMessage?: string; |
@@ -5,3 +5,3 @@ import { ComboboxValueId, ComboboxProps as UIComboboxProps, ComboboxValue as UIComboboxValue } from "@uxf/ui/combobox"; | ||
import { ControlProps } from "../types"; | ||
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIComboboxProps, "isInvalid" | "name" | "onChange" | "value"> & { | ||
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIComboboxProps, "inputGroupRef" | "inputRef" | "inputWrapperRef" | "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & { | ||
onChange?: UIComboboxProps["onChange"]; | ||
@@ -8,0 +8,0 @@ requiredMessage?: string; |
@@ -34,5 +34,5 @@ "use strict"; | ||
}; | ||
return (react_1.default.createElement(combobox_1.Combobox, { className: props.className, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, forwardRef: field.ref, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: id, isClearable: props.isClearable, isDisabled: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.length) === 0 || props.isDisabled, isFocused: props.isFocused, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, loadOptions: props.loadOptions, name: field.name, noQueryMessage: props.noQueryMessage, notFoundMessage: props.notFoundMessage, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, value: (_f = field.value) !== null && _f !== void 0 ? _f : null, variant: props.variant })); | ||
return (react_1.default.createElement(combobox_1.Combobox, { className: props.className, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: id, inputRef: field.ref, isClearable: props.isClearable, isDisabled: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.length) === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, loadOptions: props.loadOptions, name: field.name, noQueryMessage: props.noQueryMessage, notFoundMessage: props.notFoundMessage, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, value: (_f = field.value) !== null && _f !== void 0 ? _f : null, variant: props.variant })); | ||
} | ||
exports.Combobox = Combobox; | ||
Combobox.displayName = "UxfFormCombobox"; |
@@ -5,3 +5,3 @@ import { DatePickerInputProps as UIDatePickerInputProps } from "@uxf/ui/date-picker-input"; | ||
import { ControlProps } from "../types"; | ||
export type DatePickerInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIDatePickerInputProps, "isInvalid" | "max" | "min" | "pattern" | "step" | "name" | "onChange" | "value"> & { | ||
export type DatePickerInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIDatePickerInputProps, "isFocused" | "isInvalid" | "max" | "min" | "name" | "onChange" | "pattern" | "step" | "value"> & { | ||
onChange?: UIDatePickerInputProps["onChange"]; | ||
@@ -8,0 +8,0 @@ requiredMessage?: string; |
@@ -5,3 +5,3 @@ import { DateRangePickerInputProps as UIDateRangePickerInputProps } from "@uxf/ui/date-range-picker-input"; | ||
import { ControlProps } from "../types"; | ||
export type DateRangePickerInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIDateRangePickerInputProps, "isInvalid" | "max" | "min" | "pattern" | "step" | "name" | "onChange" | "value"> & { | ||
export type DateRangePickerInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIDateRangePickerInputProps, "isFocused" | "isInvalid" | "max" | "min" | "name" | "onChange" | "pattern" | "step" | "value"> & { | ||
onChange?: UIDateRangePickerInputProps["onChange"]; | ||
@@ -8,0 +8,0 @@ requiredMessage?: string; |
@@ -5,3 +5,3 @@ import { DatetimePickerInputProps as UIDatetimePickerInputProps } from "@uxf/ui/datetime-picker-input"; | ||
import { ControlProps } from "../types"; | ||
export type DatetimePickerInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIDatetimePickerInputProps, "isInvalid" | "max" | "min" | "pattern" | "step" | "name" | "onChange" | "value"> & { | ||
export type DatetimePickerInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIDatetimePickerInputProps, "isFocused" | "isInvalid" | "max" | "min" | "name" | "onChange" | "pattern" | "step" | "value"> & { | ||
onChange?: UIDatetimePickerInputProps["onChange"]; | ||
@@ -8,0 +8,0 @@ requiredMessage?: string; |
@@ -5,3 +5,3 @@ import { DropzoneInputProps as UIDropzoneProps } from "@uxf/ui/dropzone"; | ||
import { ControlProps } from "../types"; | ||
export type DropzoneProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIDropzoneProps, "onChange" | "value"> & { | ||
export type DropzoneProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIDropzoneProps, "isFocused" | "isInvalid" | "onChange" | "value"> & { | ||
minFilesCount?: number; | ||
@@ -8,0 +8,0 @@ onChange?: UIDropzoneProps["onChange"]; |
@@ -55,5 +55,5 @@ "use strict"; | ||
}; | ||
return (react_1.default.createElement(dropzone_1.Dropzone, { accept: props.accept, className: props.className, helperText: ((_d = fieldState.error) === null || _d === void 0 ? void 0 : _d.message) || props.helperText, icon: props.icon, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isRequired: props.isRequired, label: props.label, maxFileSize: props.maxFileSize, maxFilesCount: props.maxFilesCount, minFileSize: props.minFileSize, name: props.name, noClick: props.noClick, noDrag: props.noDrag, onChange: onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, style: props.style, value: field.value })); | ||
return (react_1.default.createElement(dropzone_1.Dropzone, { accept: props.accept, className: props.className, helperText: ((_d = fieldState.error) === null || _d === void 0 ? void 0 : _d.message) || props.helperText, icon: props.icon, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, maxFileSize: props.maxFileSize, maxFilesCount: props.maxFilesCount, minFileSize: props.minFileSize, name: props.name, noClick: props.noClick, noDrag: props.noDrag, onChange: onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, style: props.style, value: field.value })); | ||
} | ||
exports.DropzoneInput = DropzoneInput; | ||
DropzoneInput.displayName = "UxfFormDropzoneInput"; |
@@ -6,3 +6,3 @@ import { FileInputProps as UIFileInputProps } from "@uxf/ui/file-input"; | ||
import { ControlProps } from "../types"; | ||
export type FileInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIFileInputProps, "isInvalid" | "onChange" | "value"> & { | ||
export type FileInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIFileInputProps, "isFocused" | "isInvalid" | "onChange" | "value"> & { | ||
onChange?: UIFileInputProps["onChange"]; | ||
@@ -9,0 +9,0 @@ requiredMessage?: string; |
@@ -11,3 +11,3 @@ import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input"; | ||
type OnChangeHandler = FormControlProps<string>["onChange"]; | ||
export type GpsInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITextInputProps, "isInvalid" | "max" | "min" | "pattern" | "step" | "name" | "onChange" | "value" | "type"> & { | ||
export type GpsInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITextInputProps, "isFocused" | "isInvalid" | "max" | "min" | "name" | "onChange" | "pattern" | "step" | "value" | "type"> & { | ||
onChange?: OnChangeHandler; | ||
@@ -14,0 +14,0 @@ requiredMessage?: string; |
@@ -5,3 +5,3 @@ import { MultiComboboxOption, MultiComboboxProps as UIMultiComboboxProps } from "@uxf/ui/multi-combobox"; | ||
import { ControlProps } from "../types"; | ||
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIMultiComboboxProps, "isInvalid" | "name" | "onChange" | "value"> & { | ||
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIMultiComboboxProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & { | ||
onChange?: UIMultiComboboxProps["onChange"]; | ||
@@ -8,0 +8,0 @@ requiredMessage?: string; |
@@ -34,5 +34,5 @@ "use strict"; | ||
}; | ||
return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { className: props.className, dropdownMaxHeight: props.dropdownMaxHeight, dropdownPlacement: props.dropdownPlacement, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: id, isDisabled: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.length) === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, loadOptions: props.loadOptions, name: field.name, noQueryMessage: props.noQueryMessage, notFoundMessage: props.notFoundMessage, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, style: props.style, value: field.value, withCheckboxes: props.withCheckboxes })); | ||
return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { 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: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: id, inputArrow: props.inputArrow, isDisabled: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.length) === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, loadOptions: props.loadOptions, name: field.name, noQueryMessage: props.noQueryMessage, notFoundMessage: props.notFoundMessage, 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 })); | ||
} | ||
exports.MultiCombobox = MultiCombobox; | ||
MultiCombobox.displayName = "UxfFormMultiCombobox"; |
@@ -5,3 +5,3 @@ import { MultiSelectOption, MultiSelectProps as UIMultiSelectProps } from "@uxf/ui/multi-select"; | ||
import { ControlProps } from "../types"; | ||
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIMultiSelectProps, "isInvalid" | "name" | "onChange" | "value"> & { | ||
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIMultiSelectProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & { | ||
onChange?: UIMultiSelectProps["onChange"]; | ||
@@ -8,0 +8,0 @@ requiredMessage?: string; |
@@ -34,5 +34,5 @@ "use strict"; | ||
}; | ||
return (react_1.default.createElement(multi_select_1.MultiSelect, { className: props.className, dropdownMaxHeight: props.dropdownMaxHeight, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: id, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, ref: field.ref, style: props.style, value: field.value, withPopover: props.withPopover })); | ||
return (react_1.default.createElement(multi_select_1.MultiSelect, { className: props.className, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownMaxHeight: props.dropdownMaxHeight, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: id, inputArrow: props.inputArrow, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, ref: field.ref, renderOption: props.renderOption, size: props.size, style: props.style, value: field.value, variant: props.variant })); | ||
} | ||
exports.MultiSelect = MultiSelect; | ||
MultiSelect.displayName = "UxfFormMultiSelect"; |
@@ -31,14 +31,16 @@ "use strict"; | ||
const storyFormMultiSelect = (control) => (react_1.default.createElement("div", { className: "space-y-8" }, | ||
react_1.default.createElement(multi_select_1.MultiSelect, { control: control, dropdownMaxHeight: 350, helperText: "Vyberte pros\u00EDm jednu nebo v\u00EDce mo\u017Enost\u00ED", id: "form-multi-select", label: "MultiSelect form", name: "multi-select", options: options, placeholder: "Vyberte..." }), | ||
react_1.default.createElement(multi_select_1.MultiSelect, { control: control, id: "form-multi-select", label: "MultiSelect with popover", name: "multi-select-with-popover", options: options, placeholder: "Vyberte...", withPopover: true }), | ||
react_1.default.createElement(multi_select_1.MultiSelect, { control: control, dropdownMaxHeight: 350, helperText: "Vyberte pros\u00EDm jednu nebo v\u00EDce mo\u017Enost\u00ED", id: "form-multi-select", label: "MultiSelect with disabled option", name: "multi-select-with-disabled", isRequired: true, options: options, placeholder: "Vyberte..." }), | ||
react_1.default.createElement(multi_select_1.MultiSelect, { control: control, id: "form-multi-select", label: "MultiSelect", name: "multi-select", options: options, placeholder: "Vyberte..." }), | ||
react_1.default.createElement(multi_select_1.MultiSelect, { control: control, id: "form-multi-select-required", label: "MultiSelect required", name: "multi-select-required", options: options, placeholder: "Vyberte..." }), | ||
react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit"))); | ||
return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: { | ||
"multi-select": [ | ||
"multi-select-with-disabled": [ | ||
{ id: "one", label: "Option one" }, | ||
{ id: "two", label: "Option two disabled", disabled: true }, | ||
], | ||
"multi-select-with-popover": [ | ||
"multi-select": [ | ||
{ id: "one", label: "Option one" }, | ||
{ id: "two", label: "Option two" }, | ||
], | ||
"multi-select-required": [], | ||
} }, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" }, | ||
@@ -45,0 +47,0 @@ react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormMultiSelect(control)))))); |
@@ -6,3 +6,3 @@ import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input"; | ||
import { ControlProps } from "../types"; | ||
export type NumberInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITextInputProps, "inputMode" | "isInvalid" | "maxLength" | "minLength" | "name" | "onChange" | "value" | "type"> & { | ||
export type NumberInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITextInputProps, "inputMode" | "isFocused" | "isInvalid" | "maxLength" | "minLength" | "name" | "onChange" | "value" | "type"> & { | ||
decimalPlaces?: number; | ||
@@ -9,0 +9,0 @@ maxMessage?: string; |
{ | ||
"name": "@uxf/form", | ||
"version": "11.20.0", | ||
"version": "11.21.0", | ||
"description": "", | ||
@@ -15,3 +15,3 @@ "publishConfig": { | ||
"dependencies": { | ||
"@uxf/ui": "11.20.0", | ||
"@uxf/ui": "11.21.0", | ||
"coordinate-parser": "1.0.7", | ||
@@ -18,0 +18,0 @@ "dayjs": "1.11.10", |
@@ -5,3 +5,3 @@ import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input"; | ||
import { FieldValues, UseControllerProps } from "react-hook-form"; | ||
export type PasswordInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UITextInputProps, "isInvalid" | "max" | "min" | "name" | "onChange" | "value" | "type"> & { | ||
export type PasswordInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UITextInputProps, "isFocused" | "isInvalid" | "max" | "min" | "name" | "onChange" | "value" | "type"> & { | ||
minLengthMessage?: string; | ||
@@ -8,0 +8,0 @@ onChange?: FormControlProps<string | null>["onChange"]; |
@@ -28,3 +28,3 @@ "use strict"; | ||
const use_on_unmount_1 = require("@uxf/core-react/hooks/use-on-unmount"); | ||
const composeRefs_1 = require("@uxf/core/utils/composeRefs"); | ||
const compose_refs_1 = require("@uxf/core-react/utils/compose-refs"); | ||
const is_nil_1 = require("@uxf/core/utils/is-nil"); | ||
@@ -79,3 +79,3 @@ const button_1 = require("@uxf/ui/button"); | ||
const passwordVisibility = usePasswordVisibility(); | ||
const inputRef = (0, composeRefs_1.composeRefs)(field.ref, passwordVisibility.inputRef); | ||
const inputRef = (0, compose_refs_1.composeRefs)(field.ref, passwordVisibility.inputRef); | ||
const onBlur = (event) => { | ||
@@ -91,3 +91,3 @@ var _a; | ||
}; | ||
return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: props.className, enterKeyHint: props.enterKeyHint, 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: id, inputMode: props.inputMode, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, ref: inputRef, rightAddon: props.rightAddon, rightElement: (_f = (_e = props.renderVisibilitySetter) === null || _e === void 0 ? void 0 : _e.call(props, passwordVisibility.isVisible, passwordVisibility.onToggle)) !== null && _f !== void 0 ? _f : (react_1.default.createElement(button_1.Button, { onClick: passwordVisibility.onToggle, size: "xs", variant: "text" }, | ||
return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: props.className, enterKeyHint: props.enterKeyHint, 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: id, inputMode: props.inputMode, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, ref: inputRef, rightAddon: props.rightAddon, rightElement: (_f = (_e = props.renderVisibilitySetter) === null || _e === void 0 ? void 0 : _e.call(props, passwordVisibility.isVisible, passwordVisibility.onToggle)) !== null && _f !== void 0 ? _f : (react_1.default.createElement(button_1.Button, { onClick: passwordVisibility.onToggle, size: "xs", variant: "text" }, | ||
react_1.default.createElement(icon_1.Icon, { size: 20, name: passwordVisibility.isVisible ? "eye-slash" : "eye" }))), size: props.size, style: props.style, type: passwordVisibility.isVisible ? "text" : "password", value: (_g = field.value) !== null && _g !== void 0 ? _g : "", variant: props.variant })); | ||
@@ -94,0 +94,0 @@ } |
@@ -5,3 +5,3 @@ import { RadioGroupOptionValueId, RadioGroupProps as UIRadioGroupProps } from "@uxf/ui/radio-group"; | ||
import { ControlProps } from "../types"; | ||
export type RadioGroupProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIRadioGroupProps, "isInvalid" | "name" | "onChange" | "value"> & { | ||
export type RadioGroupProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIRadioGroupProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & { | ||
onChange?: UIRadioGroupProps["onChange"]; | ||
@@ -8,0 +8,0 @@ requiredMessage?: string; |
@@ -34,5 +34,5 @@ "use strict"; | ||
}; | ||
return (react_1.default.createElement(radio_group_1.RadioGroup, { className: props.className, forceColumn: props.forceColumn, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isDisabled: props.options.length === 0 || props.isDisabled, isFocused: props.isFocused, isInvalid: !!fieldState.error, isReadOnly: 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: (_e = field.value) !== null && _e !== void 0 ? _e : null, variant: props.variant })); | ||
return (react_1.default.createElement(radio_group_1.RadioGroup, { className: props.className, forceColumn: props.forceColumn, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: 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: (_e = field.value) !== null && _e !== void 0 ? _e : null, variant: props.variant })); | ||
} | ||
exports.RadioGroup = RadioGroup; | ||
RadioGroup.displayName = "UxfFormRadioGroup"; |
@@ -1,13 +0,10 @@ | ||
import { SelectBaseValueId } from "@uxf/ui/_select-base"; | ||
import { SelectProps as UISelectProps, SelectValue as UISelectValue } from "@uxf/ui/select"; | ||
import { FormControlProps } from "@uxf/ui/types"; | ||
import React from "react"; | ||
import { FieldValues } from "react-hook-form"; | ||
import { ControlProps } from "../types"; | ||
type OnChangeHandler = FormControlProps<UISelectValue | null>["onChange"]; | ||
export type SelectProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UISelectProps, "isInvalid" | "name" | "onChange" | "value"> & { | ||
onChange?: OnChangeHandler; | ||
export type SelectProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UISelectProps, "inputGroupRef" | "inputRef" | "inputWrapperRef" | "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & { | ||
onChange?: UISelectProps["onChange"]; | ||
requiredMessage?: string; | ||
}; | ||
export type SelectValue<T extends SelectBaseValueId> = T | null; | ||
export type SelectValue<T extends UISelectValue> = T | null; | ||
export declare function Select<FormData extends Record<string, any>>(props: SelectProps<FormData>): React.JSX.Element; | ||
@@ -17,2 +14,1 @@ export declare namespace Select { | ||
} | ||
export {}; |
@@ -34,5 +34,5 @@ "use strict"; | ||
}; | ||
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, forwardRef: field.ref, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: id, isClearable: props.isClearable, isDisabled: props.options.length === 0 || props.isDisabled, isFocused: props.isFocused, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, 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 })); | ||
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, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: id, inputArrow: props.inputArrow, inputRef: field.ref, isClearable: props.isClearable, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, 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 })); | ||
} | ||
exports.Select = Select; | ||
Select.displayName = "UxfFormSelect"; |
@@ -37,5 +37,6 @@ "use strict"; | ||
react_1.default.createElement(select_1.Select, { label: "Select form with helper text", name: "select-helper-text", control: control, placeholder: "placeholder", options: options, id: "form-select", helperText: "Choose one option" }), | ||
react_1.default.createElement(select_1.Select, { label: "Select form with dropdown top", dropdownPlacement: "top", name: "select-dropdown-top", control: control, placeholder: "placeholder", options: options, id: "form-select" }), | ||
react_1.default.createElement(select_1.Select, { label: "Select form clearable", name: "select-dropdown-clearable", control: control, placeholder: "placeholder", options: options, id: "form-select", isClearable: true }), | ||
react_1.default.createElement(select_1.Select, { label: "Select form with number options", name: "select-dropdown-number", control: control, placeholder: "placeholder", options: numberOptions, id: "form-select", isClearable: true }), | ||
react_1.default.createElement(select_1.Select, { control: control, helperText: "Choose one option", id: "form-select", isRequired: true, label: "Select form required", name: "select-required", options: options, placeholder: "placeholder" }), | ||
react_1.default.createElement(select_1.Select, { control: control, dropdownPlacement: "top", id: "form-select", label: "Select form with dropdown top", name: "select-dropdown-top", options: options, placeholder: "placeholder" }), | ||
react_1.default.createElement(select_1.Select, { control: control, id: "form-select", isClearable: true, label: "Select form clearable", name: "select-dropdown-clearable", options: options, placeholder: "placeholder" }), | ||
react_1.default.createElement(select_1.Select, { control: control, id: "form-select", isClearable: true, label: "Select form with number options", name: "select-dropdown-number", options: numberOptions, placeholder: "placeholder" }), | ||
react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit"))); | ||
@@ -42,0 +43,0 @@ return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" }, |
@@ -5,3 +5,3 @@ import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input"; | ||
import { ControlProps } from "../types"; | ||
export type TextInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITextInputProps, "isInvalid" | "max" | "min" | "pattern" | "step" | "name" | "onChange" | "value" | "type"> & { | ||
export type TextInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITextInputProps, "isFocused" | "isInvalid" | "max" | "min" | "name" | "onChange" | "pattern" | "step" | "value" | "type"> & { | ||
onChange?: UITextInputProps["onChange"]; | ||
@@ -8,0 +8,0 @@ requiredMessage?: string; |
@@ -5,3 +5,3 @@ import { TextareaProps as UITextareaProps } from "@uxf/ui/textarea"; | ||
import { ControlProps } from "../types"; | ||
export type TextareaProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITextareaProps, "isInvalid" | "name" | "onChange" | "value"> & { | ||
export type TextareaProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITextareaProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & { | ||
onChange?: UITextareaProps["onChange"]; | ||
@@ -8,0 +8,0 @@ requiredMessage?: string; |
@@ -6,3 +6,3 @@ import { DatePickerInputProps as UIDatePickerInputProps } from "@uxf/ui/date-picker-input"; | ||
import { ControlProps } from "../types"; | ||
export type TimePickerInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITimePickerInputProps, "isInvalid" | "max" | "min" | "pattern" | "step" | "name" | "onChange" | "value"> & { | ||
export type TimePickerInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITimePickerInputProps, "isFocused" | "isInvalid" | "max" | "min" | "name" | "onChange" | "pattern" | "step" | "value"> & { | ||
onChange?: UIDatePickerInputProps["onChange"]; | ||
@@ -9,0 +9,0 @@ requiredMessage?: string; |
@@ -5,3 +5,3 @@ import { ToggleProps as UIToggleProps } from "@uxf/ui/toggle"; | ||
import { ControlProps } from "../types"; | ||
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIToggleProps, "isInvalid" | "name" | "onChange" | "value"> & { | ||
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIToggleProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & { | ||
nullable?: boolean; | ||
@@ -8,0 +8,0 @@ onChange?: UIToggleProps["onChange"]; |
@@ -34,5 +34,5 @@ "use strict"; | ||
}; | ||
return (react_1.default.createElement(toggle_1.Toggle, { className: props.className, hiddenLabel: props.hiddenLabel, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, style: props.style, value: (_c = field.value) !== null && _c !== void 0 ? _c : (!props.nullable ? false : undefined) })); | ||
return (react_1.default.createElement(toggle_1.Toggle, { className: props.className, hiddenLabel: props.hiddenLabel, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, style: props.style, value: (_c = field.value) !== null && _c !== void 0 ? _c : (!props.nullable ? false : undefined), variant: props.variant })); | ||
} | ||
exports.Toggle = Toggle; | ||
Toggle.displayName = "UxfFormToggle"; |
188133
3435
+ Added@uxf/core@11.21.0(transitive)
+ Added@uxf/core-react@11.21.0(transitive)
+ Added@uxf/styles@11.21.0(transitive)
+ Added@uxf/ui@11.21.0(transitive)
- Removed@uxf/core@11.20.0(transitive)
- Removed@uxf/core-react@11.20.0(transitive)
- Removed@uxf/styles@11.20.0(transitive)
- Removed@uxf/ui@11.20.0(transitive)
Updated@uxf/ui@11.21.0