@cube-dev/ui-kit 0.20.8 → 0.22.0

package/types/components/forms/RadioGroup/RadioGroup.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { BaseProps, Styles } from '../../../tasty';
-import { FormFieldProps } from '../../../shared';
+import { FieldBaseProps } from '../../../shared';
 import type { AriaRadioGroupProps } from '@react-types/radio';
-export interface CubeRadioGroupProps extends BaseProps, AriaRadioGroupProps, FormFieldProps {
+export interface CubeRadioGroupProps extends BaseProps, AriaRadioGroupProps, FieldBaseProps {
     groupStyles?: Styles;
 }
 /**

package/types/components/forms/Slider/types.d.ts

@@ -1,7 +1,7 @@
 import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Styles } from '../../../tasty';
-import { FormFieldProps } from '../../../shared';
+import { FieldBaseProps } from '../../../shared';
 import type { AriaSliderProps } from '@react-types/slider';
-export interface CubeSliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'label'>, BasePropsWithoutChildren, OuterStyleProps, FormFieldProps, BlockStyleProps {
+export interface CubeSliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'label'>, BasePropsWithoutChildren, OuterStyleProps, FieldBaseProps, BlockStyleProps {
     inputStyles?: Styles;
     gradation?: string[];
     inputWidth?: string;

package/types/components/forms/Switch/Switch.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { BaseProps, BlockStyleProps, OuterStyleProps, Styles } from '../../../tasty';
-import { FormFieldProps } from '../../../shared';
+import { FieldBaseProps } from '../../../shared';
 import type { AriaSwitchProps } from '@react-types/switch';
-export interface CubeSwitchProps extends BaseProps, OuterStyleProps, BlockStyleProps, FormFieldProps, AriaSwitchProps {
+export interface CubeSwitchProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps, AriaSwitchProps {
     inputStyles?: Styles;
     isLoading?: boolean;
     size?: 'large' | 'small';

package/types/components/forms/TextInput/TextInputBase.d.ts

@@ -1,10 +1,10 @@
 import { ReactElement, ReactNode, RefObject } from 'react';
 import { BaseProps, BlockStyleProps, DimensionStyleProps, PositionStyleProps, Props, Styles } from '../../../tasty';
-import { FormFieldProps } from '../../../shared';
+import { FieldBaseProps } from '../../../shared';
 import type { AriaTextFieldProps } from '@react-types/textfield';
 export declare const INPUT_WRAPPER_STYLES: Styles;
 export declare const DEFAULT_INPUT_STYLES: Styles;
-export interface CubeTextInputBaseProps extends BaseProps, PositionStyleProps, DimensionStyleProps, BlockStyleProps, AriaTextFieldProps, FormFieldProps {
+export interface CubeTextInputBaseProps extends BaseProps, PositionStyleProps, DimensionStyleProps, BlockStyleProps, AriaTextFieldProps, FieldBaseProps {
     /** Left input icon */
     icon?: ReactElement;
     /** Input decoration before the main input */

package/types/components/pickers/Select/Select.d.ts

@@ -1,9 +1,9 @@
 import { ReactElement, ReactNode, RefObject } from 'react';
 import { Item } from '@react-stately/collections';
 import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Props, Styles } from '../../../tasty';
-import { FormFieldProps } from '../../../shared';
+import { FieldBaseProps } from '../../../shared';
 import type { AriaSelectProps } from '@react-types/select';
-export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, OuterStyleProps, FormFieldProps, BlockStyleProps, AriaSelectProps<T> {
+export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, OuterStyleProps, FieldBaseProps, BlockStyleProps, AriaSelectProps<T> {
     icon?: ReactElement;
     prefix?: ReactNode;
     suffix?: ReactNode;

package/types/shared/form.d.ts

@@ -8,21 +8,50 @@ export type NecessityIndicator = 'icon' | 'label';
 export type ValidationState = 'invalid' | 'valid';
 /** On which event perform the validation for the field */
 export type ValidateTrigger = 'onBlur' | 'onChange' | 'onSubmit';
-export interface OptionalFieldBaseProps {
+export interface FieldBaseProps extends FormBaseProps {
+    /** The field name */
+    name?: string;
     /** The label of the field */
-    label?: string;
+    label?: ReactNode;
+    /** Validation rules */
+    rules?: ValidationRule[];
     /** An additional content next to the label */
     extra?: ReactNode;
     /** The validation state of the field */
     validationState?: ValidationState;
+    /** Debounce in milliseconds for validation */
+    validationDelay?: number;
     /** On which event perform the validation for the field */
     validateTrigger?: ValidateTrigger;
     necessityIndicator?: NecessityIndicator;
     necessityLabel?: ReactNode;
-}
-export interface FieldBaseProps extends OptionalFieldBaseProps {
-    /** The field name */
-    name: string[] | string;
+    labelSuffix?: ReactNode;
+    /** Custom label props */
+    labelProps?: Props;
+    /** Message for the field. Some additional information or error notice */
+    message?: ReactNode;
+    /** Description for the field. Will be placed below the label */
+    description?: ReactNode;
+    /** A tooltip that is shown inside the label */
+    tooltip?: ReactNode;
+    /** Whether the element should receive focus on render */
+    autoFocus?: boolean;
+    /** The unique ID of the field */
+    id?: string;
+    /** The id prefix for the field to avoid collisions between forms */
+    idPrefix?: string;
+    /** Function that checks whether to perform update of the form state. */
+    shouldUpdate?: boolean | ((prevValues: any, nextValues: any) => boolean);
+    /** Whether the field is hidden. */
+    isHidden?: boolean;
+    /** Whether the field is disabled. */
+    isDisabled?: boolean;
+    /** Whether the field is loading. */
+    isLoading?: boolean;
+    labelPosition?: LabelPosition;
+    labelStyles?: Styles;
+    /** Whether the field is inside the form. Private field. */
+    insideForm?: boolean;
 }
 export interface FormBaseProps {
     /** Styles of the label */
@@ -44,25 +73,6 @@ export interface FormBaseProps {
     /** On which event perform validation for the field */
     validateTrigger?: ValidateTrigger;
 }
-export interface FormFieldProps extends FormBaseProps {
-    /** Whether the field is inside the form. Private field. */
-    insideForm?: boolean;
-    /** A text label of the field */
-    label?: ReactNode;
-    labelSuffix?: ReactNode;
-    /** An additional content next to the label */
-    extra?: ReactNode;
-    /** Custom label props */
-    labelProps?: Props;
-    /** Message for the field. Some additional information or error notice */
-    message?: ReactNode;
-    /** Description for the field. Will be placed below the label */
-    description?: ReactNode;
-    /** A tooltip that is shown inside the label */
-    tooltip?: ReactNode;
-    /** Whether the element should receive focus on render */
-    autoFocus?: boolean;
-}
 export type ValidationRuleBase = {
     [key: string]: any;
 } & {