@cube-dev/ui-kit 0.0.0-canary-40d6b68 → 0.0.0-canary-67a1f89

package/types/components/forms/{FieldWrapper/types.d.ts → FieldWrapper.d.ts}

@@ -1,31 +1,36 @@
 import { ReactNode } from 'react';
-import { LabelPosition, NecessityIndicator, ValidationState } from '../../../shared';
-import { Props, Styles } from '../../../tasty';
+import { LabelPosition, NecessityIndicator, ValidationState } from '../../shared';
+import { Props, Styles } from '../../tasty';
 export declare type CubeFieldWrapperProps = {
     as?: string;
-    validationState?: ValidationState;
+    labelPosition?: LabelPosition;
+    label?: ReactNode;
+    labelSuffix?: ReactNode;
+    labelStyles?: Styles;
     styles?: Styles;
     /** Whether the input is required */
     isRequired?: boolean;
     /** Whether the input is disabled */
     isDisabled?: boolean;
-    fieldProps?: Props;
-    isHidden?: boolean;
-    label?: ReactNode;
-    labelPosition?: LabelPosition;
-    labelSuffix?: ReactNode;
-    labelStyles?: Styles;
+    necessityIndicator?: NecessityIndicator;
     labelProps?: Props;
+    fieldProps?: Props;
+    /** Custom message for the field. It will be placed below the label and the input */
+    message?: string | ReactNode;
+    /** Styles for the message */
+    messageStyles?: Styles;
     /** The description for the field. It will be placed below the label */
     description?: ReactNode;
+    Component?: JSX.Element;
+    validationState?: ValidationState;
     requiredMark?: boolean;
     tooltip?: ReactNode;
     extra?: ReactNode;
+    isHidden?: boolean;
     necessityLabel?: ReactNode;
-    necessityIndicator?: NecessityIndicator;
-    /** Custom message for the field. It will be placed below the label and the input */
-    message?: string | ReactNode;
-    /** Styles for the message */
-    messageStyles?: Styles;
-    Component?: JSX.Element;
 };
+/**
+ * A wrapper for form fields to provide additional decoration for inputs.
+ */
+declare const _FieldWrapper: import("react").ForwardRefExoticComponent<CubeFieldWrapperProps & import("react").RefAttributes<unknown>>;
+export { _FieldWrapper as FieldWrapper };

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

@@ -0,0 +1,41 @@
+import { ReactElement, ReactNode } from 'react';
+import { LabelPosition, OptionalFieldBaseProps, ValidationRule } from '../../../shared';
+import { Styles } from '../../../tasty';
+import { CubeFormInstance } from './useForm';
+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... */
+    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 declare function Field<T extends FieldTypes>(allProps: CubeFieldProps<T>): JSX.Element | null;

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

@@ -5,9 +5,7 @@ import { FormBaseProps } from '../../../shared';
 import { CubeFormData, CubeFormInstance } from './useForm';
 import { FieldTypes } from './types';
 export declare const FormContext: import("react").Context<{}>;
-export declare function useFormProps<Props>(props: Props): Props & {
-    form: CubeFormInstance<any>;
-};
+export declare function useFormProps(props: any): any;
 export interface CubeFormProps<T extends FieldTypes = FieldTypes> extends FormBaseProps, BaseProps, ContainerStyleProps, Pick<FormHTMLAttributes<HTMLFormElement>, 'action' | 'autoComplete' | 'encType' | 'method' | 'target'> {
     /** Form name */
     name?: string;

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { CubeAlertProps } from '../../content/Alert';
-import { Submit } from './Submit';
 import { Field } from './Field';
 import { SubmitError } from './SubmitError';
 import { useForm } from './useForm';
@@ -11,16 +10,13 @@ declare const Form: (<T extends import("./types").FieldTypes>(props: import("./F
     Item: typeof Field;
     SubmitError: typeof SubmitError;
     useForm: typeof useForm;
-    Submit: typeof Submit;
 } & {
     Item: typeof Field;
     useForm: typeof useForm;
-    Submit: import("react").ForwardRefExoticComponent<import("./Submit").CubeSubmitProps<import("./types").FieldTypes> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
     SubmitError: (props: CubeAlertProps) => JSX.Element | null;
 };
-export { useFormProps, Form, Field, useForm, FormContext, Submit, SubmitError };
+export { useFormProps, Form, Field, useForm, FormContext, SubmitError };
 export type { CubeFormProps } from './Form';
 export type { CubeFormInstance } from './useForm';
 export type { FieldTypes, Fields } from './types';
-export * from './Field';
 export type { CubeAlertProps as CubeSubmitErrorProps };

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): TFormData[Name];
+    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;

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

@@ -1,4 +1,4 @@
-import { TextInput } from '../TextInput';
+import { TextInput } from '../TextInput/TextInput';
 import { PasswordInput } from '../PasswordInput/PasswordInput';
 import { NumberInput } from '../NumberInput/NumberInput';
 import { FileInput } from '../FileInput/FileInput';

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CubeTextInputBaseProps } from '../TextInput';
+import { CubeTextInputBaseProps } from '../TextInput/TextInputBase';
 import type { AriaNumberFieldProps } from '@react-types/numberfield';
 export interface CubeNumberInputProps extends Omit<CubeTextInputBaseProps, 'defaultValue' | 'value' | 'onChange'>, AriaNumberFieldProps {
     /** Whether or to hide stepper */
@@ -8,7 +8,8 @@ export interface CubeNumberInputProps extends Omit<CubeTextInputBaseProps, 'defa
 /**
  * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
  */
-export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<CubeNumberInputProps, "value" | "defaultValue"> & {
+declare const _NumberInput: import("react").ForwardRefExoticComponent<Omit<CubeNumberInputProps, "value" | "defaultValue"> & {
     value?: any;
     defaultValue?: any;
 } & import("react").RefAttributes<unknown>>;
+export { _NumberInput as NumberInput };

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

@@ -1,7 +1,5 @@
 /// <reference types="react" />
-import { CubeTextInputBaseProps } from '../TextInput';
-import { WithNullableValue } from '../../../utils/react/nullableValue';
-export declare type CubePasswordInputProps = WithNullableValue<CubeTextInputBaseProps>;
+import { CubeTextInputBaseProps } from '../TextInput/TextInputBase';
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries
  * with a keyboard. Various decorations can be displayed around the field to

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

@@ -11,4 +11,7 @@ export interface CubeRangeSliderProps extends AriaSliderProps<SliderValue>, Slid
     onChange?: (range: SliderValue) => void;
     onChangeEnd?: (range: SliderValue) => void;
 }
-export declare const RangeSlider: import("react").ForwardRefExoticComponent<CubeRangeSliderProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>>;
+declare const __RangeSlider: import("react").ForwardRefExoticComponent<CubeRangeSliderProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>> & {
+    cubeInputType: string;
+};
+export { __RangeSlider as RangeSlider };

package/types/components/forms/RangeSlider/helpers.d.ts

@@ -1,6 +1,6 @@
-export declare type SliderValue = number[] | number;
+export declare type SliderValue = number[];
 export declare function getRanges(value: any): number[];
 export declare function isNumber(val: any): val is number;
 export declare function isValueValid(value?: SliderValue): value is number[];
-export declare function getValidValue(value?: SliderValue, min?: number, max?: number): number | number[] | undefined;
+export declare function getValidValue(value?: SliderValue, min?: number, max?: number): number[] | undefined;
 export declare function getMinMaxValue(min?: number, max?: number, value?: SliderValue): (number | undefined)[];

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

@@ -10,7 +10,8 @@ export interface CubeSwitchProps extends BaseProps, OuterStyleProps, BlockStyleP
  * Switches allow users to turn an individual option on or off.
  * They are usually used to activate or deactivate a specific setting.
  */
-export declare const Switch: import("react").ForwardRefExoticComponent<Omit<CubeSwitchProps, "isSelected" | "defaultSelected"> & {
+declare let _Switch: import("react").ForwardRefExoticComponent<Omit<CubeSwitchProps, "isSelected" | "defaultSelected"> & {
     isSelected?: any;
     defaultSelected?: any;
-} & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+} & import("react").RefAttributes<unknown>>;
+export { _Switch as Switch };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CubeTextInputBaseProps } from '../TextInput';
+import { CubeTextInputBaseProps } from '../TextInput/TextInputBase';
 export interface CubeTextAreaProps extends CubeTextInputBaseProps {
     /** Whether the textarea should change its size depends on content */
     autoSize?: boolean;
@@ -12,7 +12,8 @@ export interface CubeTextAreaProps extends CubeTextInputBaseProps {
  * with a keyboard. Various decorations can be displayed around the field to
  * communicate the entry requirements.
  */
-export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<CubeTextAreaProps, "value" | "defaultValue"> & {
+declare const _TextArea: import("react").ForwardRefExoticComponent<Omit<CubeTextAreaProps, "value" | "defaultValue"> & {
     value?: any;
     defaultValue?: any;
-} & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & import("react").RefAttributes<unknown>>;
+export { _TextArea as TextArea };

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

@@ -2,11 +2,6 @@
 import { WithNullableValue } from '../../../utils/react/nullableValue';
 import { CubeTextInputBaseProps } from './TextInputBase';
 export declare type CubeTextInputProps = WithNullableValue<CubeTextInputBaseProps>;
-/**
- * TextInputs are text inputs that allow users to input custom text entries
- * with a keyboard. Various decorations can be displayed around the field to
- * communicate the entry requirements.
- */
 export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<CubeTextInputBaseProps, "value" | "defaultValue"> & {
     value?: any;
     defaultValue?: any;

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

@@ -40,4 +40,5 @@ export interface CubeTextInputBaseProps extends BaseProps, PositionStyleProps, D
     /** The size of the input */
     size?: 'small' | 'default' | 'large' | string;
 }
-export declare const TextInputBase: import("react").ForwardRefExoticComponent<CubeTextInputBaseProps & import("react").RefAttributes<unknown>>;
+declare const _TextInputBase: import("react").ForwardRefExoticComponent<CubeTextInputBaseProps & import("react").RefAttributes<unknown>>;
+export { _TextInputBase as TextInputBase };

package/types/components/other/Base64Upload/Base64Upload.d.ts

@@ -1,8 +1,5 @@
 import { BaseProps, PositionStyleProps } from '../../../tasty';
 export interface CubeBase64UploadProps extends BaseProps, PositionStyleProps {
-    onInput?: (params: {
-        encoded: string;
-        raw: any;
-    }) => void;
+    onInput?: Function;
 }
 export declare const Base64Upload: any;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { CubeFormProps, FieldTypes } from '../../forms';
+import { CubeFormProps } from '../../forms/Form/Form';
 import { CubeButtonProps } from '../../actions';
+import { FieldTypes } from '../../forms';
 import { CubeDialogProps } from './Dialog';
 export interface CubeDialogFormProps<T extends FieldTypes = FieldTypes> extends CubeDialogProps, Omit<CubeFormProps<T>, 'role'> {
     /** Whether the submit button has a `danger` theme */

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

@@ -1,6 +1,5 @@
-import { ForwardedRef, ReactElement, RefObject } from 'react';
+import { ReactElement, RefObject } from 'react';
 import { Item } from '@react-stately/collections';
-import { FieldTypes } from '../../forms';
 import { CubeSelectBaseProps } from '../Select/Select';
 import type { CollectionBase, KeyboardDelegate, LoadingState } from '@react-types/shared';
 import type { ComboBoxProps } from '@react-types/combobox';
@@ -21,8 +20,9 @@ export interface CubeComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOp
     size?: 'small' | 'default' | 'large' | string;
     suffixPosition?: 'before' | 'after';
 }
-export declare const ComboBox: (<T extends FieldTypes>(props: CubeComboBoxProps<T> & {
-    ref?: ForwardedRef<unknown> | undefined;
-}) => JSX.Element) & {
+declare const __ComboBox: import("react").ForwardRefExoticComponent<CubeComboBoxProps<object> & import("react").RefAttributes<unknown>> & {
     Item: typeof Item;
+} & {
+    Item: <T>(props: import("@react-types/shared").ItemProps<T>) => JSX.Element;
 };
+export { __ComboBox as ComboBox };

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

@@ -1,6 +1,5 @@
 import { ReactElement, ReactNode, RefObject } from 'react';
 import { Item } from '@react-stately/collections';
-import { DOMRef } from '@react-types/shared';
 import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Props, Styles } from '../../../tasty';
 import { FormFieldProps } from '../../../shared';
 import { CubeButtonProps } from '../../actions';
@@ -44,11 +43,9 @@ export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxSty
     placement: any;
     minWidth: any;
 }): JSX.Element;
-declare const __Select: (<T extends object>(props: CubeSelectProps<T> & {
-    ref?: DOMRef<HTMLDivElement> | undefined;
-}) => JSX.Element) & {
+declare const __Select: import("react").ForwardRefExoticComponent<CubeSelectProps<object> & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>> & {
     Item: typeof Item;
 } & {
-    Item: <T_1>(props: import("@react-types/shared").ItemProps<T_1>) => JSX.Element;
+    Item: <T>(props: import("@react-types/shared").ItemProps<T>) => JSX.Element;
 };
 export { __Select as Select };

package/types/index.d.ts

@@ -57,6 +57,7 @@ export { Tag } from './components/content/Tag/Tag';
 export type { CubeTagProps } from './components/content/Tag/Tag';
 export { SearchInput } from './components/forms/SearchInput/SearchInput';
 export type { CubeSearchInputProps } from './components/forms/SearchInput/SearchInput';
+export { Submit } from './components/actions/Button/Submit';
 export type { CubeTextInputBaseProps } from './components/forms/TextInput/TextInputBase';
 export type { CubeTextInputBaseProps as CubeTextInputProps } from './components/forms/TextInput/TextInputBase';
 export { TextInput } from './components/forms/TextInput/TextInput';
@@ -142,6 +143,6 @@ export * from './styled';
 export * from './tasty';
 export { default as copy } from 'clipboard-copy';
 export * from '@react-aria/ssr';
-export * from './components/forms';
+export * from './components/forms/Form';
 export * from './components/overlays/NewNotifications';
 export * from './components/overlays/Toasts';

package/types/shared/form.d.ts

@@ -43,14 +43,6 @@ export interface FormBaseProps {
     validationState?: ValidationState;
     /** On which event perform validation for the field */
     validateTrigger?: ValidateTrigger;
-    /** 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[];
 }
 export interface FormFieldProps extends FormBaseProps {
     /** Whether the field is inside the form. Private field. */
@@ -70,8 +62,6 @@ export interface FormFieldProps extends FormBaseProps {
     tooltip?: ReactNode;
     /** Whether the element should receive focus on render */
     autoFocus?: boolean;
-    /** The field name */
-    name?: `${string}.${string}` | `${string}`;
 }
 export declare type ValidationRuleBase = {
     [key: string]: any;