@cube-dev/ui-kit 0.18.2 → 0.19.0

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CubeButtonProps } from '../../../actions';
+import { FieldTypes } from '../types';
+import { CubeFormInstance } from '../useForm';
+export interface CubeSubmitProps<T extends FieldTypes = FieldTypes> extends CubeButtonProps {
+    form?: CubeFormInstance<T>;
+}
+export declare const Submit: import("react").ForwardRefExoticComponent<CubeSubmitProps<FieldTypes> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;

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

@@ -0,0 +1 @@
+export * from './Submit';

package/types/components/forms/Form/use-field/index.d.ts

@@ -0,0 +1,3 @@
+export * from './use-field';
+export * from './use-field-props';
+export * from './types';

package/types/components/forms/Form/use-field/types.d.ts

@@ -0,0 +1,74 @@
+import { ReactElement, ReactNode } from 'react';
+import { Styles } from '../../../../tasty';
+import { CubeFieldData, FieldTypes } from '../types';
+import { LabelPosition, OptionalFieldBaseProps, ValidateTrigger, ValidationRule, ValidationState } from '../../../../shared';
+import { CubeFormInstance } from '../useForm';
+export interface LegacyCubeFieldProps<T extends FieldTypes> extends OptionalFieldBaseProps {
+    /** The initial value of the input. */
+    defaultValue?: any;
+    /** The type of the input. `Input`, `Checkbox`, RadioGroup`, `Select`, `ComboBox` etc... */
+    type?: string;
+    /** The unique ID of the field */
+    id?: string;
+    /** The id prefix for the field to avoid collisions between forms */
+    idPrefix?: string;
+    children?: ReactElement | ((CubeFormInstance: any) => ReactElement);
+    /** Function that checks whether to perform update of the form state. */
+    shouldUpdate?: boolean | ((prevValues: any, nextValues: any) => boolean);
+    /** Validation rules */
+    rules?: ValidationRule[];
+    /** The form instance */
+    form?: CubeFormInstance<T>;
+    /** The message for the field or text for the error */
+    message?: ReactNode;
+    /** The description for the field */
+    description?: ReactNode;
+    /** Tooltip for the label that explains something. */
+    tooltip?: ReactNode;
+    /** Field name. It's used as a key the form data. */
+    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 interface CubeFieldProps<T extends FieldTypes> {
+    /** The initial value of the input. */
+    defaultValue?: any;
+    /** 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);
+    /** Validation rules */
+    rules?: ValidationRule[];
+    /** The form instance */
+    form?: CubeFormInstance<T>;
+    /** Field name. It's used as a key the form data. */
+    name?: string | string[];
+    /** The validation state of the field */
+    validationState?: ValidationState;
+    /** On which event perform the validation for the field */
+    validateTrigger?: ValidateTrigger;
+}
+export type FieldReturnValue<T extends FieldTypes> = {
+    id: string;
+    name: string;
+    value: any;
+    validateTrigger?: ValidateTrigger;
+    validationState?: ValidationState;
+    form?: CubeFormInstance<T>;
+    onChange?: (value: any, dontTouch: boolean, validateTrigger: ValidateTrigger) => void;
+    message?: React.ReactNode;
+    isRequired?: boolean;
+    onBlur: () => void;
+    nonInput: boolean;
+    field?: CubeFieldData<keyof FieldTypes, T[keyof FieldTypes]>;
+};

package/types/components/forms/Form/use-field/use-field-props.d.ts

@@ -0,0 +1,19 @@
+import type { ValidateTrigger } from '../../../../shared';
+import type { CubeFieldProps } from './types';
+import type { FieldTypes } from '../types';
+export type UseFieldPropsParams = {
+    valuePropsMapper?: ({ value, onChange }: {
+        value: any;
+        onChange: any;
+    }) => any;
+    /**
+     * @default 'onBlur'
+     */
+    defaultValidationTrigger?: ValidateTrigger;
+    /**
+     * prop helps to prevent calling hook conditionally, but changing this prop during render is unsafe and forbidden
+     * If you want to change this prop after mount, remount the component with a new value.
+     */
+    unsafe__isDisabled?: boolean;
+};
+export declare function useFieldProps<T extends FieldTypes, Props extends CubeFieldProps<T>>(props: Props, params?: UseFieldPropsParams): Props;

package/types/components/forms/Form/use-field/use-field.d.ts

@@ -0,0 +1,7 @@
+import { ValidateTrigger } from '../../../../shared';
+import { FieldTypes } from '../types';
+import { CubeFieldProps, FieldReturnValue } from './types';
+export type UseFieldParams = {
+    defaultValidationTrigger?: ValidateTrigger;
+};
+export declare function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(props: Props, params: UseFieldParams): FieldReturnValue<T>;

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

@@ -31,7 +31,7 @@ export declare class CubeFormInstance<T extends FieldTypes, TFormData extends Cu
     isFieldInvalid<Name extends keyof T>(name: Name): boolean;
     isFieldTouched<Name extends keyof T>(name: Name): boolean;
     getFieldError<Name extends keyof T>(name: Name): ReactNode[];
-    createField<Name extends keyof T>(name: Name, skipRender?: boolean): void;
+    createField<Name extends keyof T>(name: Name, skipRender?: boolean): TFormData[Name];
     removeField<Name extends keyof T>(name: Name, skipRender?: boolean): void;
     setFields<Names extends keyof T>(newFields: SetFieldsArrType<T, Names>[]): void;
     setSubmitting(isSubmitting: boolean): void;

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

@@ -5,6 +5,7 @@ import type { AriaSwitchProps } from '@react-types/switch';
 export interface CubeSwitchProps extends BaseProps, OuterStyleProps, BlockStyleProps, FormFieldProps, AriaSwitchProps {
     inputStyles?: Styles;
     isLoading?: boolean;
+    size?: 'large' | 'small';
 }
 /**
  * Switches allow users to turn an individual option on or off.

package/types/tasty/styles/types.d.ts

@@ -93,7 +93,7 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
     /**
      * The preset style sets the base text settings according to the names preset. Affected styles: `font-size`, `line-height`, `letter-spacing`, `font-weight` and `text-transform`.
      */
-    preset?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h5s' | 'h5m' | 'h6' | 't1' | 't2' | 't3' | 't4' | 't4m' | 'p1' | 'p2' | 'p3' | 'p4' | 'tag' | 'default' | string;
+    preset?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 't1' | 't2' | 't2m' | 't3' | 't3m' | 't4' | 'p1' | 'p2' | 'p3' | 'p4' | 'c1' | 'c2' | 'tag' | 'default' | string;
     /**
      * Shorthand for align-items and align-content.
      */

package/types/tokens.d.ts

@@ -68,16 +68,6 @@ declare const TOKENS: {
     'h5-letter-spacing': string;
     'h5-font-weight': string;
     'h5-icon-size': string;
-    'h5s-font-size': string;
-    'h5s-line-height': string;
-    'h5s-letter-spacing': string;
-    'h5s-font-weight': string;
-    'h5s-icon-size': string;
-    'h5m-font-size': string;
-    'h5m-line-height': string;
-    'h5m-letter-spacing': string;
-    'h5m-font-weight': string;
-    'h5m-icon-size': string;
     'h6-font-size': string;
     'h6-line-height': string;
     'h6-letter-spacing': string;
@@ -108,21 +98,11 @@ declare const TOKENS: {
     't3m-letter-spacing': string;
     't3m-font-weight': string;
     't3m-icon-size': string;
-    't3s-font-size': string;
-    't3s-line-height': string;
-    't3s-letter-spacing': string;
-    't3s-font-weight': string;
-    't3s-icon-size': string;
     't4-font-size': string;
     't4-line-height': string;
     't4-letter-spacing': string;
     't4-font-weight': string;
     't4-icon-size': string;
-    't4m-font-size': string;
-    't4m-line-height': string;
-    't4m-letter-spacing': string;
-    't4m-font-weight': string;
-    't4m-icon-size': string;
     'p1-font-size': string;
     'p1-line-height': string;
     'p1-letter-spacing': string;