@cube-dev/ui-kit 0.6.58 → 0.6.62

package/dist/cjs/shared/form.d.ts

@@ -1,7 +1,9 @@
 import { Props } from '../components/types';
 import { Styles } from '../styles/types';
 import { ReactNode } from 'react';
+/** Where to place label relative to input */
 export declare type LabelPosition = 'side' | 'top';
+/** The type of necessity indicator */
 export declare type NecessityIndicator = 'icon' | 'label';
 /** The validation state of the field */
 export declare type ValidationState = 'invalid' | 'valid';
@@ -22,13 +24,17 @@ export interface FieldBaseProps extends OptionalFieldBaseProps {
     name: string[] | string;
 }
 export interface FormBaseProps {
+    /** Styles of the label */
     labelStyles?: Styles;
+    /** Where to place label relative to input */
     labelPosition?: LabelPosition;
     /** Whether the field presents required mark */
     requiredMark?: boolean;
     /** Whether the field is required */
     isRequired?: boolean;
+    /** The type of necessity indicator */
     necessityIndicator?: NecessityIndicator;
+    /** That can replace the necessity label */
     necessityLabel?: ReactNode;
     /** Whether the field is read only */
     isReadOnly?: boolean;

package/dist/cjs/stories/FormFieldArgs.d.ts

@@ -1,11 +1,9 @@
+export declare const DISABLE_BASE_ARGS: {};
 export declare const LABEL_POSITION_ARG: {
     labelPosition: {
-        defaultValue: string;
         description: string;
-        control: {
-            type: string;
-            options: string[];
-        };
+        options: string[];
+        control: string;
         table: {
             type: {
                 summary: string;
@@ -18,19 +16,15 @@ export declare const LABEL_POSITION_ARG: {
 };
 export declare const LABEL_ARG: {
     label: {
-        defaultValue: string;
         control: string;
         description: string;
     };
 };
 export declare const NECESSITY_INDICATOR_ARG: {
     necessityIndicator: {
-        defaultValue: string;
         description: string;
-        control: {
-            type: string;
-            options: (string | boolean)[];
-        };
+        options: (string | boolean)[];
+        control: string;
         table: {
             type: {
                 summary: string;
@@ -43,25 +37,20 @@ export declare const NECESSITY_INDICATOR_ARG: {
 };
 export declare const MESSAGE_ARG: {
     message: {
-        defaultValue: string;
         description: string;
         control: string;
     };
 };
 export declare const PLACEHOLDER_ARG: {
     placeholder: {
-        defaultValue: string;
         control: string;
     };
 };
 export declare const VALIDATION_STATE_ARG: {
     validationState: {
-        defaultValue: undefined;
         description: string;
-        control: {
-            type: string;
-            options: (string | undefined)[];
-        };
+        options: (string | undefined)[];
+        control: string;
         table: {
             type: {
                 summary: string;
@@ -76,7 +65,6 @@ export declare const IS_LOADING_ARG: {
     isLoading: {
         control: string;
         description: string;
-        defaultValue: boolean;
         table: {
             type: {
                 summary: string;
@@ -89,7 +77,6 @@ export declare const IS_LOADING_ARG: {
 };
 export declare const AUTO_FOCUS_ARG: {
     autoFocus: {
-        defaultValue: boolean;
         description: string;
         control: {
             type: string;
@@ -106,7 +93,6 @@ export declare const AUTO_FOCUS_ARG: {
 };
 export declare const IS_REQUIRED_ARG: {
     isRequired: {
-        defaultValue: boolean;
         description: string;
         control: {
             type: string;
@@ -123,7 +109,6 @@ export declare const IS_REQUIRED_ARG: {
 };
 export declare const IS_READ_ONLY_ARG: {
     isReadOnly: {
-        defaultValue: boolean;
         description: string;
         control: {
             type: string;
@@ -140,7 +125,6 @@ export declare const IS_READ_ONLY_ARG: {
 };
 export declare const IS_DISABLED_ARG: {
     isDisabled: {
-        defaultValue: boolean;
         description: string;
         control: {
             type: string;
@@ -157,12 +141,9 @@ export declare const IS_DISABLED_ARG: {
 };
 export declare const SIZE_ARG: {
     size: {
-        defaultValue: undefined;
         description: string;
-        control: {
-            type: string;
-            options: (string | undefined)[];
-        };
+        options: (string | undefined)[];
+        control: string;
         table: {
             type: {
                 summary: string;
@@ -175,7 +156,6 @@ export declare const SIZE_ARG: {
 };
 export declare const MULTILINE_ARG: {
     multiLine: {
-        defaultValue: boolean;
         description: string;
         control: {
             type: string;
@@ -192,7 +172,6 @@ export declare const MULTILINE_ARG: {
 };
 export declare const REQUIRED_MARK_ARG: {
     requiredMark: {
-        defaultValue: boolean;
         description: string;
         control: {
             type: string;

package/dist/cjs/stories/components/ConfirmDeletionDialogForm.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CubeDialogFormRef, CubeDialogFormProps } from '../../index';
+interface ConfirmDeletionDialogFormProps extends Pick<CubeDialogFormProps, 'onSubmit' | 'onDismiss' | 'form'> {
+    name?: string;
+}
+export declare const ConfirmDeletionDialogForm: import("react").ForwardRefExoticComponent<ConfirmDeletionDialogFormProps & import("react").RefAttributes<CubeDialogFormRef>>;
+export {};

package/dist/cjs/stories/components/DialogFormApp.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function DialogFormApp(): JSX.Element;

package/dist/cjs/stories/lists/baseProps.d.ts

@@ -0,0 +1 @@
+export declare const baseProps: string[];

package/dist/mjs/components/forms/Form/Field.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { OptionalFieldBaseProps, ValidationRule } from '../../../shared';
-import { FormStore } from './useForm';
+import { CubeFormInstance } from './useForm';
 export interface CubeFieldProps extends OptionalFieldBaseProps {
     /** The initial value of the input. */
     defaultValue?: any;
@@ -10,15 +10,18 @@ export interface CubeFieldProps extends OptionalFieldBaseProps {
     id?: string;
     /** The id prefix for the field to avoid collisions between forms */
     idPrefix?: string;
-    children?: ReactElement | ((FormStore: any) => ReactElement);
+    children?: ReactElement | ((CubeFormInstance: any) => ReactElement);
+    /** Function that check whether to perform update of the form state. */
     shouldUpdate?: boolean | ((prevValues: any, nextValues: any) => boolean);
     /** Validation rules */
     rules?: ValidationRule[];
     /** The form instance */
-    form?: FormStore;
+    form?: CubeFormInstance;
     /** The message for the field or text for the error */
     message?: string;
+    /** Tooltip for the label that explains something. */
     tooltip?: ReactNode;
+    /** Field name. It's used as a key the form data. */
     name?: string[] | string;
 }
 export declare function Field(allProps: CubeFieldProps): JSX.Element | null;

package/dist/mjs/components/forms/Form/Form.d.ts

@@ -1,24 +1,27 @@
 import { FormHTMLAttributes } from 'react';
-import { FormStore, useForm, CubeFormData } from './useForm';
+import { CubeFormInstance, CubeFormData } from './useForm';
 import { BaseProps, ContainerStyleProps } from '../../types';
 import { FormBaseProps } from '../../../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'> {
-    /** The form name */
+    /** Form name */
     name?: string;
+    /** Default field values */
     defaultValues?: {
         [key: string]: any;
     };
+    /** Trigger when any value of Field changed */
     onValuesChange?: (data: CubeFormData) => void | Promise<void>;
+    /** Trigger when form submit and success */
     onSubmit?: (data: CubeFormData) => void | Promise<void>;
+    /** Trigger when form submit and failed */
     onSubmitFailed?: (any?: any) => void | Promise<any>;
-    form?: FormStore;
+    /** Set form instance created by useForm */
+    form?: CubeFormInstance;
 }
 /**
  * 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>> & {
-    useForm: typeof useForm;
-};
+declare const _Form: import("react").ForwardRefExoticComponent<CubeFormProps & import("react").RefAttributes<unknown>>;
 export { _Form as Form };

package/dist/mjs/components/forms/Form/index.d.ts

@@ -2,3 +2,4 @@ export { Form, useFormProps } from './Form';
 export type { CubeFormProps } from './Form';
 export { Field } from './Field';
 export { useForm } from './useForm';
+export type { CubeFormInstance } from './useForm';

package/dist/mjs/components/forms/Form/useForm.d.ts

@@ -1,7 +1,7 @@
 export declare type CubeFormData = {
     [key: string]: any;
 };
-export declare type CubeField = {
+export declare type CubeFieldData = {
     value?: any;
     name: string;
     errors: string[];
@@ -9,7 +9,7 @@ export declare type CubeField = {
     rules?: any[];
     validating?: boolean;
 };
-export declare class FormStore {
+export declare class CubeFormInstance {
     forceReRender: () => void;
     private initialFields;
     private fields;
@@ -21,31 +21,31 @@ export declare class FormStore {
     submit(): Promise<any>;
     setFieldsValue(newData: {
         [key: string]: any;
-    }, touched?: boolean, reRender?: boolean, createFields?: boolean): void;
+    }, touched?: boolean, skipRender?: boolean, createFields?: boolean): void;
     getFieldValue(name: any): any;
     getFieldsValue(): CubeFormData;
     /**
      * Similar to getFieldsValue() but respects '.' notation and creates nested objects.
      */
     getFormData(): CubeFormData;
-    setFieldValue(name: string, value: any, touched?: boolean, reRender?: boolean): void;
-    getFieldInstance(name: string): CubeField;
+    setFieldValue(name: string, value: any, touched?: boolean, skipRender?: boolean): void;
+    getFieldInstance(name: string): CubeFieldData;
     setInitialFieldsValue(values: {
         [key: string]: any;
     }): void;
-    resetFields(reRender?: boolean): 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, reRender?: boolean): void;
-    setFields(newFields: CubeField[]): void;
+    createField(name: string, skipRender?: boolean): void;
+    setFields(newFields: CubeFieldData[]): void;
     setSubmitting(isSubmitting: boolean): void;
-    _createField(name: any, data?: Partial<CubeField>): CubeField;
+    _createField(name: any, data?: Partial<CubeFieldData>): CubeFieldData;
 }
-export declare function useForm(form?: FormStore, ref?: any, options?: {
-    onSubmit?: FormStore['onSubmit'];
-    onValuesChange?: FormStore['onValuesChange'];
-}): [FormStore];
+export declare function useForm(form?: CubeFormInstance, ref?: any, options?: {
+    onSubmit?: CubeFormInstance['onSubmit'];
+    onValuesChange?: CubeFormInstance['onValuesChange'];
+}): [CubeFormInstance];

package/dist/mjs/components/overlays/Dialog/Dialog.d.ts

@@ -2,10 +2,15 @@ import { ReactNode } from 'react';
 import { BaseProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps } from '../../types';
 import { AriaDialogProps } from '@react-types/dialog';
 export interface CubeDialogProps extends Omit<BaseProps, 'role'>, AriaDialogProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps {
+    /** The type of the dialog. It affects its size and position. */
     type?: 'modal' | 'popover' | 'fullscreen' | 'fullscreenTakeover' | 'panel' | 'tray';
+    /** The size of the dialog */
     size?: 'S' | 'M' | 'L';
+    /** Whether the dialog is dismissable */
     isDismissable?: boolean;
+    /** Trigger when the dialog is dismissed */
     onDismiss?: (arg?: any) => void;
+    /** That you can replace the close icon with */
     closeIcon?: ReactNode;
 }
 /**

package/dist/mjs/components/overlays/Dialog/DialogForm.d.ts

@@ -3,10 +3,18 @@ import { CubeDialogProps } from './Dialog';
 import { CubeFormProps } from '../../forms/Form/Form';
 import { CubeButtonProps } from '../../actions/Button/Button';
 export interface CubeDialogFormProps extends CubeDialogProps, Omit<CubeFormProps, 'role'> {
+    /** Whether the submit button has a `danger` theme */
     danger?: boolean;
+    /** Properties for submit button. Use `label` to change text. */
     submitProps?: CubeButtonProps;
+    /** Properties for cancel button. Use `label` to change text. */
     cancelProps?: CubeButtonProps;
+    /** WIP. Preserve form values even if field is deleted */
     preserve?: boolean;
+    /** Whether to hide action button so developer can manually specify them */
+    noActions?: boolean;
+    /** The title of the dialog */
+    title?: string;
 }
 export interface CubeDialogFormRef {
     open: () => void;
@@ -15,5 +23,5 @@ export interface CubeDialogFormRef {
 /**
  * DialogForms are a specific type of Dialog. They contain forms to fill.
  */
-declare let _DialogForm: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<CubeDialogFormRef>>;
+declare let _DialogForm: import("react").ForwardRefExoticComponent<CubeDialogFormProps & import("react").RefAttributes<CubeDialogFormRef>>;
 export { _DialogForm as DialogForm };

package/dist/mjs/components/types.d.ts

@@ -2,32 +2,27 @@ import { AllHTMLAttributes, CSSProperties } from 'react';
 import { Styles } from '../styles/types';
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from '../styles/list';
 export interface BasePropsWithoutChildren extends Pick<AllHTMLAttributes<HTMLElement>, 'className' | 'role' | 'id'> {
-    /** QA ID for e2e testing **/
+    /** QA ID for e2e testing. An alias for `data-qa` attribute. */
     qa?: string;
-    /** QA value for e2e testing **/
+    /** QA value for e2e testing. An alias for `data-qaval` attribute. */
     qaVal?: string | number;
-    /** The tag name of the element **/
-    /** The style map **/
+    /** The style map */
     styles?: Styles;
-    /** The list of responsive points in pixels **/
+    /** The list of responsive points in pixels */
     breakpoints?: number[];
-    /** Whether the element has the block layout outside **/
+    /** Whether the element has the block layout outside */
     block?: boolean;
-    /** Whether the element has the inline layout outside **/
+    /** Whether the element has the inline layout outside */
     inline?: boolean;
     /** The list of element modifiers **/
     mods?: {
         [key: string]: boolean | undefined | null;
     };
-    /** Whether the element is hidden (`hidden` attribute is set) **/
+    /** Whether the element is hidden (`hidden` attribute is set) */
     isHidden?: boolean;
-    /** DEPRECATED: Whether the element is hidden (`hidden` attribute is set) **/
-    hidden?: boolean;
-    /** Whether the element is disabled (`disabled` attribute is set) **/
+    /** Whether the element is disabled (`disabled` attribute is set) */
     isDisabled?: boolean;
-    /** DEPRECATED: Whether the element is disabled (`disabled` attribute is set) **/
-    disabled?: boolean;
-    /** Plain css for the element **/
+    /** Plain css for the element */
     css?: string | ((props: Props) => string);
     /** The element name for using in style overriding */
     styleName?: string;
@@ -35,12 +30,12 @@ export interface BasePropsWithoutChildren extends Pick<AllHTMLAttributes<HTMLEle
     style?: CSSProperties | (CSSProperties & {
         [key: string]: string | number | null;
     });
-    /** User-defined theme for the element. Mapped to data-theme attribute. */
+    /** User-defined theme for the element. Mapped to data-theme attribute. Use `default`, or `danger`, or any custom string value you need. */
     theme?: 'default' | 'danger' | string;
 }
 export interface BaseProps extends BasePropsWithoutChildren, Pick<AllHTMLAttributes<HTMLElementTagNameMap['div']>, 'children'> {
 }
-export interface AllBaseProps<K extends keyof HTMLElementTagNameMap = 'div'> extends BaseProps, Omit<AllHTMLAttributes<HTMLElementTagNameMap[K]>, 'style' | 'size' | 'disabled' | 'hidden'> {
+export interface AllBaseProps<K extends keyof HTMLElementTagNameMap = 'div'> extends BaseProps, Omit<AllHTMLAttributes<HTMLElementTagNameMap[K]>, 'style' | 'size' | 'disabled' | 'hidden' | 'css'> {
     as?: string;
 }
 export declare type BaseStyleProps = Pick<Styles, typeof BASE_STYLES[number]>;
@@ -67,5 +62,6 @@ export interface Props {
 }
 export declare type TagName = keyof HTMLElementTagNameMap;
 export interface TagNameProps {
+    /** The tag name you want to use for the element */
     as?: TagName;
 }

package/dist/mjs/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CubeFormProps, Field, useFormProps } from './components/forms/Form';
+import { CubeFormProps, Field, useForm, useFormProps, CubeFormInstance } from './components/forms/Form';
 import { CubeTextProps, Text } from './components/content/Text';
 import { CubeTitleProps, Title } from './components/content/Title';
 import { CubeParagraphProps, Paragraph } from './components/content/Paragraph';
@@ -9,9 +9,8 @@ declare const _Button: import("react").ForwardRefExoticComponent<import("./compo
     Group: import("react").ForwardRefExoticComponent<import("./components/layout/Space").CubeSpaceProps & import("react").RefAttributes<unknown>>;
 };
 declare const Form: import("react").ForwardRefExoticComponent<CubeFormProps & import("react").RefAttributes<unknown>> & {
-    useForm: typeof import("./components/forms/Form").useForm;
-} & {
     Item: typeof Field;
+    useForm: typeof useForm;
 };
 export { Item } from '@react-stately/collections';
 export { Base } from './components/Base';
@@ -89,7 +88,7 @@ export type { CubeSwitchProps } from './components/forms/Switch/Switch';
 export { Radio } from './components/forms/RadioGroup/Radio';
 export type { CubeRadioProps } from './components/forms/RadioGroup/Radio';
 export { Form, Field, useFormProps };
-export type { CubeFormProps };
+export type { CubeFormProps, CubeFormInstance };
 export { ComboBox } from './components/pickers/ComboBox/ComboBox';
 export type { CubeComboBoxProps } from './components/pickers/ComboBox/ComboBox';
 export { Select, ListBoxPopup } from './components/pickers/Select/Select';