@cube-dev/ui-kit 0.0.0-canary-88385f9 → 0.0.0-canary-1e3d5e7

package/types/components/forms/Form/Field.d.ts

@@ -2,7 +2,8 @@ import { ReactElement, ReactNode } from 'react';
 import { LabelPosition, OptionalFieldBaseProps, ValidationRule } from '../../../shared';
 import { CubeFormInstance } from './useForm';
 import { Styles } from '../../../tasty';
-export interface CubeFieldProps extends OptionalFieldBaseProps {
+import { FieldTypes } from './types';
+export interface CubeFieldProps<T extends FieldTypes> extends OptionalFieldBaseProps {
     /** The initial value of the input. */
     defaultValue?: any;
     /** The type of the input. `Input`, `Checkbox`, RadioGroup`, `Select`, `ComboBox` etc... */
@@ -17,7 +18,7 @@ export interface CubeFieldProps extends OptionalFieldBaseProps {
     /** Validation rules */
     rules?: ValidationRule[];
     /** The form instance */
-    form?: CubeFormInstance;
+    form?: CubeFormInstance<T>;
     /** The message for the field or text for the error */
     message?: string;
     /** The description for the field */
@@ -36,4 +37,4 @@ export interface CubeFieldProps extends OptionalFieldBaseProps {
     labelPosition?: LabelPosition;
     labelStyles?: Styles;
 }
-export declare function Field(allProps: CubeFieldProps): JSX.Element | null;
+export declare function Field<T extends FieldTypes>(allProps: CubeFieldProps<T>): JSX.Element | null;

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

@@ -2,28 +2,32 @@ import { FormHTMLAttributes } from 'react';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { CubeFormData, CubeFormInstance } from './useForm';
 import { FormBaseProps } from '../../../shared';
+import { FieldTypes } from './types';
+import { DOMRef } from '@react-types/shared';
 export declare const FormContext: import("react").Context<{}>;
 export declare function useFormProps(props: any): any;
-export interface CubeFormProps extends FormBaseProps, BaseProps, ContainerStyleProps, Pick<FormHTMLAttributes<HTMLFormElement>, 'action' | 'autoComplete' | 'encType' | 'method' | 'target'> {
+export interface CubeFormProps<T extends FieldTypes = FieldTypes> extends FormBaseProps, BaseProps, ContainerStyleProps, Pick<FormHTMLAttributes<HTMLFormElement>, 'action' | 'autoComplete' | 'encType' | 'method' | 'target'> {
     /** Form name */
     name?: string;
     /** Default field values */
     defaultValues?: {
-        [key: string]: any;
+        [K in keyof T]?: T[K];
     };
     /** Trigger when any value of Field changed */
-    onValuesChange?: (data: CubeFormData) => void | Promise<void>;
+    onValuesChange?: (data: CubeFormData<T>) => void | Promise<void>;
     /** Trigger when form submit and success */
-    onSubmit?: (data: CubeFormData) => void | Promise<void>;
+    onSubmit?: (data: CubeFormData<T>) => void | Promise<void>;
     /** Trigger when form submit and failed */
     onSubmitFailed?: (any?: any) => void | Promise<any>;
     /** Set form instance created by useForm */
-    form?: CubeFormInstance;
+    form?: CubeFormInstance<T, CubeFormData<T>>;
     /** The size of the side area with labels. Only for `labelPosition="side"` */
     labelWidth?: Styles['width'];
 }
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
  */
-declare const _Form: import("react").ForwardRefExoticComponent<CubeFormProps & import("react").RefAttributes<unknown>>;
+declare const _Form: <T extends FieldTypes>(props: CubeFormProps<T> & {
+    ref?: DOMRef<HTMLFormElement> | undefined;
+}) => JSX.Element;
 export { _Form as Form };

package/types/components/forms/Form/index.d.ts

@@ -2,7 +2,9 @@
 import { Field } from './Field';
 import { useForm } from './useForm';
 import { useFormProps } from './Form';
-declare const Form: import("react").ForwardRefExoticComponent<import("./Form").CubeFormProps & import("react").RefAttributes<unknown>> & {
+declare const Form: (<T extends import("./types").FieldTypes>(props: import("./Form").CubeFormProps<T> & {
+    ref?: import("@react-types/shared").DOMRef<HTMLFormElement> | undefined;
+}) => JSX.Element) & {
     Item: typeof Field;
     useForm: typeof useForm;
 } & {
@@ -12,3 +14,4 @@ declare const Form: import("react").ForwardRefExoticComponent<import("./Form").C
 export { useFormProps, Form, Field, useForm };
 export type { CubeFormProps } from './Form';
 export type { CubeFormInstance } from './useForm';
+export type { FieldTypes, Fields } from './types';

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

@@ -0,0 +1,13 @@
+export declare type FieldTypes = {
+    [key: string]: any;
+};
+export declare type CubeFieldData<Name extends string | number | symbol, Value> = {
+    readonly name: Name;
+    errors: string[];
+    value?: Value;
+    touched?: boolean;
+    rules?: any[];
+    validating?: boolean;
+};
+export declare type Fields = Record<keyof FieldTypes, CubeFieldData<string, any>>;
+export declare type SetFieldsArrType<T extends FieldTypes, Name extends keyof T> = CubeFieldData<Name, T[Name]>;

package/types/components/forms/Form/useForm.d.ts

@@ -1,52 +1,41 @@
-export declare type CubeFormData = {
-    [key: string]: unknown;
+import { FieldTypes, CubeFieldData, SetFieldsArrType } from './types';
+export declare type CubeFormData<T extends FieldTypes> = {
+    [K in keyof T]?: CubeFieldData<K, T[K]>;
 };
-export declare type CubeFieldData = {
-    value?: unknown;
-    name: string;
-    errors: string[];
-    touched?: boolean;
-    rules?: any[];
-    validating?: boolean;
-};
-export declare class CubeFormInstance {
+export declare class CubeFormInstance<T extends FieldTypes, TFormData extends CubeFormData<T> = CubeFormData<T>> {
     forceReRender: () => void;
     private initialFields;
     private fields;
     ref: {};
     isSubmitting: boolean;
-    onValuesChange: (CubeFormData: any) => void | Promise<any>;
-    onSubmit: (CubeFormData: any) => void | Promise<any>;
+    onValuesChange: (data: CubeFormData<T>) => void | Promise<void>;
+    onSubmit: (data: CubeFormData<T>) => void | Promise<void>;
     constructor(forceReRender?: () => void);
-    submit(): Promise<any>;
-    setFieldsValue(newData: {
-        [key: string]: unknown;
-    }, touched?: boolean, skipRender?: boolean, createFields?: boolean): void;
-    getFieldValue(name: any): unknown;
-    getFieldsValue(): CubeFormData;
+    submit(): Promise<void>;
+    setFieldsValue: (newData: Partial<T>, touched?: boolean | undefined, skipRender?: boolean | undefined, createFields?: boolean) => void;
+    getFieldValue<Name extends keyof T>(name: Name): T[Name] | undefined;
+    getFieldsValue(): Partial<T>;
     /**
      * Similar to getFieldsValue() but respects '.' notation and creates nested objects.
      */
-    getFormData(): CubeFormData;
-    setFieldValue(name: string, value: unknown, touched?: boolean, skipRender?: boolean): void;
-    getFieldInstance(name: string): CubeFieldData;
-    setInitialFieldsValue(values: {
-        [key: string]: unknown;
-    }): void;
-    resetFields(names?: string[], skipRender?: boolean): void;
-    validateField(name: string): Promise<any>;
-    validateFields(list?: string[]): Promise<any>;
-    isFieldValid(name: string): boolean;
-    isFieldInvalid(name: string): boolean;
-    isFieldTouched(name: string): boolean;
-    getFieldError(name: string): string[];
-    createField(name: string, skipRender?: boolean): void;
-    removeField(name: string, skipRender?: boolean): void;
-    setFields(newFields: CubeFieldData[]): void;
+    getFormData(): CubeFormData<T>;
+    setFieldValue<Name extends keyof T>(name: Name, value: T[Name], touched?: boolean, skipRender?: boolean): void;
+    getFieldInstance<Name extends keyof T>(name: Name): TFormData[Name];
+    setInitialFieldsValue(values: Partial<T>): void;
+    resetFields(names?: (keyof T)[], skipRender?: boolean): void;
+    validateField<Name extends keyof T>(name: Name): Promise<any>;
+    validateFields<Names extends (keyof T)[]>(names?: Names): Promise<any>;
+    isFieldValid<Name extends keyof T>(name: Name): boolean;
+    isFieldInvalid<Name extends keyof T>(name: Name): boolean;
+    isFieldTouched<Name extends keyof T>(name: Name): boolean;
+    getFieldError<Name extends keyof T>(name: Name): string[];
+    createField<Name extends keyof T>(name: Name, skipRender?: boolean): void;
+    removeField<Name extends keyof T>(name: Name, skipRender?: boolean): void;
+    setFields<Names extends keyof T>(newFields: SetFieldsArrType<T, Names>[]): void;
     setSubmitting(isSubmitting: boolean): void;
-    _createField(name: any, data?: Partial<CubeFieldData>): CubeFieldData;
+    _createField<Name extends keyof T, Data extends TFormData[Name]>(name: Name, data?: Data): Data;
 }
-export declare function useForm(form?: CubeFormInstance, ref?: any, options?: {
-    onSubmit?: CubeFormInstance['onSubmit'];
-    onValuesChange?: CubeFormInstance['onValuesChange'];
-}): [CubeFormInstance];
+export declare function useForm<TSourceType extends FieldTypes>(form?: CubeFormInstance<TSourceType, CubeFormData<TSourceType>>, ref?: any, options?: {
+    onSubmit?: CubeFormInstance<TSourceType>['onSubmit'];
+    onValuesChange?: CubeFormInstance<TSourceType>['onValuesChange'];
+}): [CubeFormInstance<TSourceType>];

package/types/components/overlays/Dialog/DialogForm.d.ts

@@ -2,7 +2,8 @@
 import { CubeDialogProps } from './Dialog';
 import { CubeFormProps } from '../../forms/Form/Form';
 import { CubeButtonProps } from '../../actions';
-export interface CubeDialogFormProps extends CubeDialogProps, Omit<CubeFormProps, 'role'> {
+import { FieldTypes } from '../../forms';
+export interface CubeDialogFormProps<T extends FieldTypes = FieldTypes> extends CubeDialogProps, Omit<CubeFormProps<T>, 'role'> {
     /** Whether the submit button has a `danger` theme */
     danger?: boolean;
     /** Properties for submit button. Use `label` to change text. */
@@ -23,4 +24,4 @@ export interface CubeDialogFormRef {
 /**
  * DialogForms are a specific type of Dialog. They contain forms to fill.
  */
-export declare const DialogForm: (props: CubeDialogFormProps) => JSX.Element;
+export declare const DialogForm: <T extends FieldTypes = FieldTypes>(props: CubeDialogFormProps<T>) => JSX.Element;

package/types/components/pickers/Menu/MenuTrigger.d.ts

@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react';
-import { DOMRefValue } from '@react-types/shared';
 import { PositionProps } from '@react-types/overlays';
 import { MenuTriggerProps as BaseTriggerProps } from '@react-types/menu';
 export declare type CubeMenuTriggerProps = BaseTriggerProps & PositionProps & {
@@ -15,5 +14,5 @@ declare let _MenuTrigger: React.ForwardRefExoticComponent<BaseTriggerProps & Pos
     trigger?: string | undefined;
     isDisabled?: boolean | undefined;
     children: ReactNode[];
-} & React.RefAttributes<DOMRefValue<HTMLElement>>>;
+} & React.RefAttributes<import("@react-types/shared").DOMRefValue<HTMLElement>>>;
 export { _MenuTrigger as MenuTrigger };

package/types/stories/components/ConfirmDeletionDialogForm.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import { FieldTypes } from 'src/components/forms/Form/types';
 import { CubeDialogFormProps } from '../../index';
-interface ConfirmDeletionDialogFormProps extends Pick<CubeDialogFormProps, 'onSubmit' | 'onDismiss' | 'form'> {
+interface ConfirmDeletionDialogFormProps<T extends FieldTypes> extends Pick<CubeDialogFormProps<T>, 'onSubmit' | 'onDismiss' | 'form'> {
     name?: string;
 }
-export declare function ConfirmDeletionDialogForm(props: ConfirmDeletionDialogFormProps): JSX.Element;
+export declare function ConfirmDeletionDialogForm<T extends FieldTypes>(props: ConfirmDeletionDialogFormProps<T>): JSX.Element;
 export {};

package/types/tasty/index.d.ts

@@ -10,6 +10,7 @@ export * from './styles/list';
 export * from './providers/BreakpointsProvider';
 export * from './utils/mergeStyles';
 export * from './utils/warnings';
+export * from './utils/get-display-name';
 export type { TastyProps, GlobalTastyProps, AllBasePropsWithMods, } from './tasty';
 export type { AllBaseProps, BaseProps, BaseStyleProps, DimensionStyleProps, ColorStyleProps, OuterStyleProps, PositionStyleProps, TextStyleProps, BlockStyleProps, ContainerStyleProps, BasePropsWithoutChildren, Props, FlowStyleProps, ShortGridStyles, GlobalStyledProps, TagNameProps, TagName, } from './types';
 export type { StylesInterface, Styles, StylesWithoutSelectors, NoType, Selector, SuffixForSelector, NotSelector, } from './styles/types';

package/types/utils/react/index.d.ts

@@ -6,4 +6,3 @@ export { useSlotProps, SlotProvider, ClearSlots } from './Slots';
 export { useLayoutEffect } from './useLayoutEffect';
 export { useCombinedRefs } from './useCombinedRefs';
 export { wrapNodeIfPlain } from './wrapNodeIfPlain';
-export * from './get-display-name';