@cube-dev/ui-kit 0.11.1 → 0.12.1

package/types/components/content/Alert/use-alert.d.ts

@@ -2,5 +2,5 @@ import { CubeAlertProps } from './types';
 export declare function useAlert(props: CubeAlertProps): {
     styles: import("../../../tasty").Styles;
     theme: "disabled" | "danger" | "success" | "note";
-    filteredProps: {};
+    filteredProps: Record<string, any>;
 };

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

@@ -2,9 +2,10 @@ import { ReactNode } from 'react';
 import { LabelPosition, NecessityIndicator, ValidationState } from '../../shared';
 import { Props, Styles } from '../../tasty';
 export declare type CubeFieldWrapperProps = {
-    as: string;
-    labelPosition: LabelPosition;
-    label?: string;
+    as?: string;
+    labelPosition?: LabelPosition;
+    label?: ReactNode;
+    labelSuffix?: ReactNode;
     labelStyles?: Styles;
     styles?: Styles;
     /** Whether the input is required */
@@ -19,14 +20,17 @@ export declare type CubeFieldWrapperProps = {
     /** Styles for the message */
     messageStyles?: Styles;
     /** The description for the field. It will be placed below the label */
-    description?: string;
+    description?: ReactNode;
     Component?: JSX.Element;
     validationState?: ValidationState;
     requiredMark?: boolean;
     tooltip?: ReactNode;
+    extra?: ReactNode;
+    isHidden?: boolean;
+    necessityLabel?: ReactNode;
 };
 /**
  * A wrapper for form fields to provide additional decoration for inputs.
  */
-declare const _FieldWrapper: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<unknown>>;
+declare const _FieldWrapper: import("react").ForwardRefExoticComponent<CubeFieldWrapperProps & import("react").RefAttributes<unknown>>;
 export { _FieldWrapper as FieldWrapper };

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 */
@@ -28,8 +29,13 @@ export interface CubeFieldProps extends OptionalFieldBaseProps {
     name?: string[] | string;
     /** Whether the field is hidden. */
     isHidden?: boolean;
+    /** Whether the field is disabled. */
+    isDisabled?: boolean;
+    /** Whether the field is loading. */
+    isLoading?: boolean;
     styles?: Styles;
     labelPosition?: LabelPosition;
     labelStyles?: Styles;
+    labelSuffix?: ReactNode;
 }
-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

@@ -1,14 +1,17 @@
 /// <reference types="react" />
 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>> & {
+import { useFormProps, FormContext } from './Form';
+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;
 } & {
     Item: typeof Field;
     useForm: typeof useForm;
 };
-export { useFormProps, Form, Field, useForm };
+export { useFormProps, Form, Field, useForm, FormContext };
 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/forms/Switch/Switch.d.ts

@@ -3,7 +3,6 @@ import { BaseProps, BlockStyleProps, OuterStyleProps, Styles } from '../../../ta
 import type { AriaSwitchProps } from '@react-types/switch';
 import { FormFieldProps } from '../../../shared';
 export interface CubeSwitchProps extends BaseProps, OuterStyleProps, BlockStyleProps, FormFieldProps, AriaSwitchProps {
-    thumbStyles?: Styles;
     inputStyles?: Styles;
     isLoading?: boolean;
 }

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactElement } from 'react';
 import { BaseProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps, Styles } from '../../../tasty';
 import type { AriaDialogProps } from '@react-types/dialog';
 export interface CubeDialogProps extends Omit<BaseProps, 'role'>, AriaDialogProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps {
@@ -9,7 +9,7 @@ export interface CubeDialogProps extends Omit<BaseProps, 'role'>, AriaDialogProp
     /** Trigger when the dialog is dismissed */
     onDismiss?: (arg?: any) => void;
     /** That you can replace the close icon with */
-    closeIcon?: ReactNode;
+    closeIcon?: ReactElement;
     closeButtonStyles?: Styles;
 }
 /**

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/overlays/NewNotifications/Notification.d.ts

@@ -1,8 +1,16 @@
 /// <reference types="react" />
 import { CubeNotifyApiProps } from './types';
-export declare function Notification(props: CubeNotifyApiProps): null;
+export declare type NotificationProps = {
+    /**
+     * If set to true, when the component gets unmounted, notifications will not be removed from the bar
+     *
+     * @default false
+     */
+    disableRemoveOnUnmount?: boolean;
+} & CubeNotifyApiProps;
+export declare function Notification(props: NotificationProps): null;
 export declare namespace Notification {
-    var Success: (props: CubeNotifyApiProps) => JSX.Element;
-    var Danger: (props: CubeNotifyApiProps) => JSX.Element;
-    var Attention: (props: CubeNotifyApiProps) => JSX.Element;
+    var Success: (props: NotificationProps) => JSX.Element;
+    var Danger: (props: NotificationProps) => JSX.Element;
+    var Attention: (props: NotificationProps) => JSX.Element;
 }

package/types/components/overlays/NewNotifications/NotificationsList.d.ts

@@ -16,5 +16,5 @@ export declare type NotificationsListStatic = {
 };
 export declare function NotificationsList<T extends object>(props: NotificationsListProps<T>): JSX.Element;
 export declare namespace NotificationsList {
-    var Item: (props: CubeNotificationProps) => null;
+    var Item: (props: import("./types").BaseNotificationProps) => null;
 }

package/types/components/overlays/NewNotifications/types.d.ts

@@ -54,18 +54,7 @@ export declare type BaseNotificationProps = {
      */
     actions?: ((arg: NotificationActionCallbackArg) => NotificationActionType) | NotificationActionType;
 };
-export declare type CubeNotificationProps = BaseNotificationProps & EitherDismissibleOrNotNotification;
-export declare type EitherDismissibleOrNotNotification = DismissibleNotification | NonDismissibleNotification;
-declare type DismissibleNotification = {
-    isDismissible?: true;
-    onDismiss?: () => void;
-    duration?: number;
-};
-declare type NonDismissibleNotification = {
-    isDismissible: false;
-    onDismiss?: never | undefined;
-    duration?: null;
-};
+export declare type CubeNotificationProps = BaseNotificationProps;
 export declare type CubeNotifyApiProps = {
     meta?: CubeNotificationMeta;
 } & CubeNotificationProps;

package/types/components/overlays/Toasts/Toast.d.ts

@@ -1,8 +1,16 @@
 /// <reference types="react" />
 import { CubeToastsApiProps } from './types';
-export declare function Toast(props: CubeToastsApiProps): null;
+export declare type ToastProps = {
+    /**
+     * If set to true, when the component gets unmounted, notifications will not be removed from the bar
+     *
+     * @default false
+     */
+    disableRemoveOnUnmount?: boolean;
+} & CubeToastsApiProps;
+export declare function Toast(props: ToastProps): null;
 export declare namespace Toast {
-    var Success: (props: CubeToastsApiProps) => JSX.Element;
-    var Danger: (props: CubeToastsApiProps) => JSX.Element;
-    var Attention: (props: CubeToastsApiProps) => JSX.Element;
+    var Success: (props: ToastProps) => JSX.Element;
+    var Danger: (props: ToastProps) => JSX.Element;
+    var Attention: (props: ToastProps) => JSX.Element;
 }

package/types/components/overlays/Toasts/types.d.ts

@@ -5,7 +5,7 @@ export declare type CubeToastsApiProps = {
     header?: ReactChild | ReactFragment;
     id?: Key;
     onDismiss?: () => void;
-    duration?: number;
+    duration?: number | null;
     icon?: ReactNode;
     type?: CubeNotificationType;
 };

package/types/components/overlays/Toasts/use-toasts-api.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import { CubeToastsApiToastAction } from './types';
 export declare function useToastsApi(): {
-    readonly toast: any;
+    readonly toast: CubeToastsApiToastAction;
     readonly update: (id: import("react").Key, props: Partial<import("../NewNotifications").CubeNotifyApiProps>) => void;
     readonly remove: (id: import("react").Key) => void;
 };

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 {};