@cube-dev/ui-kit 0.12.1 → 0.12.4

package/types/components/actions/Action.d.ts

@@ -1,6 +1,6 @@
 import { MouseEventHandler } from 'react';
-import { BaseProps, BaseStyleProps, ContainerStyleProps, TagNameProps, TextStyleProps } from '../../tasty';
 import { AriaButtonProps } from '@react-types/button';
+import { BaseProps, BaseStyleProps, ContainerStyleProps, TagNameProps, TextStyleProps } from '../../tasty';
 export interface CubeActionProps extends BaseProps, TagNameProps, BaseStyleProps, ContainerStyleProps, TextStyleProps, Omit<AriaButtonProps, 'type'> {
     to?: string;
     label?: string;

package/types/components/actions/Button/Button.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 import { CubeActionProps } from '../Action';
+import { Styles } from '../../../tasty';
 export interface CubeButtonProps extends CubeActionProps {
     icon?: ReactElement;
     rightIcon?: ReactElement;
@@ -8,7 +9,7 @@ export interface CubeButtonProps extends CubeActionProps {
     type?: 'primary' | 'secondary' | 'danger' | 'link' | 'clear' | 'outline' | 'neutral' | (string & {});
     size?: 'small' | 'medium' | 'large' | (string & {});
 }
-export declare function provideStyles({ type, theme }: {
+export declare function provideButtonStyles({ type, theme }: {
     type: any;
     theme: any;
 }): {
@@ -814,4 +815,5 @@ export declare function provideStyles({ type, theme }: {
     textAnchor?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.TextAnchor | undefined>;
     vectorEffect?: import("../../../tasty").ResponsiveStyleValue<import("csstype").Property.VectorEffect | undefined>;
 };
+export declare const DEFAULT_BUTTON_STYLES: Styles;
 export declare const Button: import("react").ForwardRefExoticComponent<CubeButtonProps & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;

package/types/components/content/ActiveZone/ActiveZone.d.ts

@@ -1,6 +1,6 @@
 import { MouseEventHandler } from 'react';
-import { BaseProps, BaseStyleProps, ContainerStyleProps, TagNameProps, TextStyleProps } from '../../../tasty';
 import { FocusableOptions } from '@react-aria/focus';
+import { BaseProps, BaseStyleProps, ContainerStyleProps, TagNameProps, TextStyleProps } from '../../../tasty';
 export interface CubeActiveZoneProps extends BaseProps, TagNameProps, BaseStyleProps, ContainerStyleProps, TextStyleProps, FocusableOptions {
     label?: string;
     onClick?: MouseEventHandler;

package/types/components/content/Paragraph.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { CubeTextProps } from './Text';
 import { ContainerStyleProps } from '../../tasty';
+import { CubeTextProps } from './Text';
 export interface CubeParagraphProps extends CubeTextProps, ContainerStyleProps {
 }
 export declare const Paragraph: import("react").ForwardRefExoticComponent<CubeParagraphProps & import("react").RefAttributes<unknown>>;

package/types/components/content/Title.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { CubeTextProps } from './Text';
 import { BaseProps, ContainerStyleProps, PositionStyleProps, TagNameProps } from '../../tasty';
+import { CubeTextProps } from './Text';
 export interface CubeTitleProps extends BaseProps, CubeTextProps, TagNameProps, ContainerStyleProps, PositionStyleProps {
     /** The level of the heading **/
     level?: 1 | 2 | 3 | 4 | 5 | 6;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import type { AriaCheckboxProps } from '@react-types/checkbox';
 import { BaseProps } from '../../../tasty';
-import { CheckboxGroup } from './CheckboxGroup';
 import { FormFieldProps } from '../../../shared';
+import { CheckboxGroup } from './CheckboxGroup';
+import type { AriaCheckboxProps } from '@react-types/checkbox';
 export interface CubeCheckboxProps extends BaseProps, AriaCheckboxProps, FormFieldProps {
 }
 declare let __Checkbox: import("react").ForwardRefExoticComponent<Omit<CubeCheckboxProps, "isSelected" | "defaultSelected"> & {

package/types/components/forms/Checkbox/CheckboxGroup.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { BaseProps } from '../../../tasty';
-import type { AriaCheckboxGroupProps } from '@react-types/checkbox';
 import { FormFieldProps } from '../../../shared';
+import type { AriaCheckboxGroupProps } from '@react-types/checkbox';
 export interface CubeCheckboxGroupProps extends BaseProps, AriaCheckboxGroupProps, FormFieldProps {
     orientation?: 'vertical' | 'horizontal';
 }

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

@@ -1,7 +1,7 @@
 import { RefObject } from 'react';
 import { BaseProps, BlockStyleProps, PositionStyleProps, Styles } from '../../../tasty';
-import type { AriaTextFieldProps } from '@react-types/textfield';
 import { FormFieldProps } from '../../../shared';
+import type { AriaTextFieldProps } from '@react-types/textfield';
 export interface CubeFileInputProps extends BaseProps, PositionStyleProps, BlockStyleProps, AriaTextFieldProps, FormFieldProps {
     /**
      * The size of the input

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

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
 import { LabelPosition, OptionalFieldBaseProps, ValidationRule } from '../../../shared';
-import { CubeFormInstance } from './useForm';
 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. */
@@ -13,7 +13,7 @@ export interface CubeFieldProps<T extends FieldTypes> extends OptionalFieldBaseP
     /** The id prefix for the field to avoid collisions between forms */
     idPrefix?: string;
     children?: ReactElement | ((CubeFormInstance: any) => ReactElement);
-    /** Function that check whether to perform update of the form state. */
+    /** Function that checks whether to perform update of the form state. */
     shouldUpdate?: boolean | ((prevValues: any, nextValues: any) => boolean);
     /** Validation rules */
     rules?: ValidationRule[];

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

@@ -1,9 +1,9 @@
 import { FormHTMLAttributes } from 'react';
+import { DOMRef } from '@react-types/shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
-import { CubeFormData, CubeFormInstance } from './useForm';
 import { FormBaseProps } from '../../../shared';
+import { CubeFormData, CubeFormInstance } from './useForm';
 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<T extends FieldTypes = FieldTypes> extends FormBaseProps, BaseProps, ContainerStyleProps, Pick<FormHTMLAttributes<HTMLFormElement>, 'action' | 'autoComplete' | 'encType' | 'method' | 'target'> {

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

@@ -5,6 +5,7 @@ export declare type CubeFieldData<Name extends string | number | symbol, Value>
     readonly name: Name;
     errors: string[];
     value?: Value;
+    inputValue?: Value;
     touched?: boolean;
     rules?: any[];
     validating?: boolean;

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

@@ -1,4 +1,4 @@
-import { FieldTypes, CubeFieldData, SetFieldsArrType } from './types';
+import { CubeFieldData, FieldTypes, SetFieldsArrType } from './types';
 export declare type CubeFormData<T extends FieldTypes> = {
     [K in keyof T]?: CubeFieldData<K, T[K]>;
 };
@@ -8,18 +8,18 @@ export declare class CubeFormInstance<T extends FieldTypes, TFormData extends Cu
     private fields;
     ref: {};
     isSubmitting: boolean;
-    onValuesChange: (data: CubeFormData<T>) => void | Promise<void>;
-    onSubmit: (data: CubeFormData<T>) => void | Promise<void>;
+    onValuesChange: (data: T) => void | Promise<void>;
+    onSubmit: (data: T) => void | Promise<void>;
     constructor(forceReRender?: () => void);
     submit(): Promise<void>;
-    setFieldsValue: (newData: Partial<T>, touched?: boolean | undefined, skipRender?: boolean | undefined, createFields?: boolean) => void;
+    setFieldsValue: (newData: Partial<T>, touched?: boolean | undefined, skipRender?: boolean | undefined, createFields?: boolean, inputOnly?: 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<T>;
-    setFieldValue<Name extends keyof T>(name: Name, value: T[Name], touched?: boolean, skipRender?: boolean): void;
+    getFormData(): T;
+    setFieldValue<Name extends keyof T>(name: Name, value: T[Name], touched?: boolean, skipRender?: boolean, inputOnly?: boolean): void;
     getFieldInstance<Name extends keyof T>(name: Name): TFormData[Name];
     setInitialFieldsValue(values: Partial<T>): void;
     resetFields(names?: (keyof T)[], skipRender?: boolean): void;

package/types/components/forms/RadioGroup/Radio.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { BaseProps, Styles } from '../../../tasty';
+import { FormFieldProps } from '../../../shared';
 import { RadioGroup } from './RadioGroup';
 import type { AriaRadioProps } from '@react-types/radio';
-import { FormFieldProps } from '../../../shared';
 export interface CubeRadioProps extends BaseProps, AriaRadioProps, FormFieldProps {
     inputStyles?: Styles;
     type?: 'button' | 'radio';

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { BaseProps, Styles } from '../../../tasty';
-import type { AriaRadioGroupProps } from '@react-types/radio';
 import { FormFieldProps } from '../../../shared';
+import type { AriaRadioGroupProps } from '@react-types/radio';
 export interface CubeRadioGroupProps extends BaseProps, AriaRadioGroupProps, FormFieldProps {
     groupStyles?: Styles;
 }

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { BaseProps, BlockStyleProps, OuterStyleProps, Styles } from '../../../tasty';
-import type { AriaSwitchProps } from '@react-types/switch';
 import { FormFieldProps } from '../../../shared';
+import type { AriaSwitchProps } from '@react-types/switch';
 export interface CubeSwitchProps extends BaseProps, OuterStyleProps, BlockStyleProps, FormFieldProps, AriaSwitchProps {
     inputStyles?: Styles;
     isLoading?: boolean;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { CubeTextInputBaseProps } from './TextInputBase';
 import { WithNullableValue } from '../../../utils/react/nullableValue';
+import { CubeTextInputBaseProps } from './TextInputBase';
 export declare type CubeTextInputProps = WithNullableValue<CubeTextInputBaseProps>;
 export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<CubeTextInputBaseProps, "value" | "defaultValue"> & {
     value?: any;

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

@@ -1,9 +1,12 @@
-import { ReactNode, RefObject } from 'react';
+import { ReactElement, ReactNode, RefObject } from 'react';
 import { BaseProps, BlockStyleProps, DimensionStyleProps, PositionStyleProps, Props, Styles } from '../../../tasty';
 import { FormFieldProps } from '../../../shared';
 import type { AriaTextFieldProps } from '@react-types/textfield';
+export declare const INPUT_WRAPPER_STYLES: Styles;
 export declare const DEFAULT_INPUT_STYLES: Styles;
 export interface CubeTextInputBaseProps extends BaseProps, PositionStyleProps, DimensionStyleProps, BlockStyleProps, AriaTextFieldProps, FormFieldProps {
+    /** Left input icon */
+    icon?: ReactElement;
     /** Input decoration before the main input */
     prefix?: ReactNode;
     /** Input decoration after the main input */

package/types/components/organisms/StatsCard/StatsCard.d.ts

@@ -1,5 +1,5 @@
-import { CubeCardProps } from '../../content/Card/Card';
 import { ReactNode } from 'react';
+import { CubeCardProps } from '../../content/Card/Card';
 export interface CubeStatsCard extends CubeCardProps {
     title?: string | ReactNode;
     value?: string | number | ReactNode;

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

@@ -1,6 +1,6 @@
-import { BaseProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps } from '../../../tasty';
 import { AriaDialogProps } from '@react-types/dialog';
 import { ReactNode } from 'react';
+import { BaseProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps } from '../../../tasty';
 import { CubeDialogContainerProps } from '../Dialog';
 import { CubeAlertDialogProps } from './AlertDialog';
 export interface Dialog {

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { CubeDialogProps } from './Dialog';
 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 */
     danger?: boolean;
@@ -24,4 +24,4 @@ export interface CubeDialogFormRef {
 /**
  * DialogForms are a specific type of Dialog. They contain forms to fill.
  */
-export declare const DialogForm: <T extends FieldTypes = FieldTypes>(props: CubeDialogFormProps<T>) => JSX.Element;
+export declare function DialogForm<T extends FieldTypes = FieldTypes>(props: CubeDialogFormProps<T>): JSX.Element;

package/types/components/overlays/Modal/Popover.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import { BaseProps } from '../../../tasty';
 import { OverlayProps } from '@react-types/overlays';
+import { BaseProps } from '../../../tasty';
 import { PlacementAxis } from '../../../shared';
 export interface CubePopoverProps extends BaseProps, Omit<OverlayProps, 'children'> {
     container?: HTMLElement;

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

@@ -1,8 +1,8 @@
-import type { ReactNode, HTMLAttributes } from 'react';
-import type { CubeNotificationType } from '../types';
 import { Styles } from '../../../../tasty';
 import { Timer } from '../../../../_internal';
 import { BaseNotificationProps } from '../types';
+import type { CubeNotificationType } from '../types';
+import type { ReactNode, HTMLAttributes } from 'react';
 export declare type NotificationProps = {
     qa?: string;
     attributes?: HTMLAttributes<HTMLDivElement>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { CollectionElement } from '@react-types/shared';
-import type { CubeNotificationProps } from './types';
 import { CollectionChildren } from './hooks';
+import type { CubeNotificationProps } from './types';
 export declare type NotificationsListProps<T> = {
     items?: T[] | readonly T[];
     children: CollectionChildren<T>;

package/types/components/overlays/NewNotifications/hooks/use-notification-list-item.d.ts

@@ -1,5 +1,5 @@
-import type { Key, MutableRefObject } from 'react';
 import { SelectableItemAria } from '@react-aria/selection';
+import type { Key, MutableRefObject } from 'react';
 import type { ListState } from '@react-stately/list';
 export declare type UseNotificationListItemPropsType<T extends object> = {
     key: Key;

package/types/components/overlays/NewNotifications/hooks/use-notifications-list.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLAttributes, MutableRefObject } from 'react';
 import { CollectionChildren, NotificationsListState } from './types';
+import type { HTMLAttributes, MutableRefObject } from 'react';
 export declare type UseNotificationsListPropsType<T, R> = {
     items?: Iterable<T>;
     children: CollectionChildren<T, R>;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
+import { DOMRefValue } from '@react-types/shared';
+import { PlacementAxis } from '../../../shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import type { AriaTooltipProps } from '@react-types/tooltip';
-import { PlacementAxis } from '../../../shared';
-import { DOMRefValue } from '@react-types/shared';
 export interface CubeTooltipProps extends BaseProps, ContainerStyleProps, AriaTooltipProps {
     tipStyles?: Styles;
     showIcon?: boolean;

package/types/components/overlays/Tooltip/TooltipProvider.d.ts

@@ -1,7 +1,7 @@
-import { CubeTooltipTriggerProps } from './TooltipTrigger';
-import { CubeTooltipProps } from './Tooltip';
 import { ReactNode } from 'react';
 import { Styles } from '../../../tasty';
+import { CubeTooltipTriggerProps } from './TooltipTrigger';
+import { CubeTooltipProps } from './Tooltip';
 export interface CubeTooltipProviderProps extends Omit<CubeTooltipTriggerProps, 'children'> {
     children: CubeTooltipTriggerProps['children'][0];
     title?: ReactNode;

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

@@ -1,11 +1,13 @@
-import { RefObject } from 'react';
-import { CubeSelectBaseProps } from '../Select/Select';
+import { ReactElement, RefObject } from 'react';
 import { Item } from '@react-stately/collections';
+import { CubeSelectBaseProps } from '../Select/Select';
 import type { CollectionBase, KeyboardDelegate, LoadingState } from '@react-types/shared';
 import type { ComboBoxProps } from '@react-types/combobox';
 export interface CubeComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOpenChange'>, ComboBoxProps<T>, CollectionBase<T> {
+    icon?: ReactElement;
     multiLine?: boolean;
     autoComplete?: string;
+    wrapperRef?: RefObject<HTMLDivElement>;
     inputRef?: RefObject<HTMLInputElement>;
     /** The ref for the list box popover. */
     popoverRef?: RefObject<HTMLDivElement>;
@@ -16,6 +18,7 @@ export interface CubeComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOp
     loadingState?: LoadingState;
     filter?: (val: any, str: string) => boolean;
     size?: 'small' | 'default' | 'large' | string;
+    suffixPosition?: 'before' | 'after';
 }
 declare const __ComboBox: import("react").ForwardRefExoticComponent<CubeComboBoxProps<object> & import("react").RefAttributes<unknown>> & {
     Item: typeof Item;

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

@@ -1,13 +1,14 @@
 import { ReactElement, ReactNode } from 'react';
 import { DOMRef, ItemProps } from '@react-types/shared';
-import type { AriaMenuProps } from '@react-types/menu';
-import { ContainerStyleProps, Styles } from '../../../tasty';
+import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { MenuButtonProps, MenuSelectionType } from './MenuButton';
+import type { AriaMenuProps } from '@react-types/menu';
 export interface CubeMenuProps<T> extends ContainerStyleProps, AriaMenuProps<T> {
     selectionIcon?: MenuSelectionType;
     header?: ReactNode;
     footer?: ReactNode;
     styles?: Styles;
+    qa?: BaseProps['qa'];
 }
 declare type PartialMenuButton = Partial<MenuButtonProps>;
 declare type ItemComponent = <T>(props: ItemProps<T> & PartialMenuButton & {

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

@@ -1,9 +1,11 @@
-import { ReactNode, RefObject } from 'react';
-import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Props, Styles } from '../../../tasty';
+import { ReactElement, ReactNode, RefObject } from 'react';
 import { Item } from '@react-stately/collections';
-import type { AriaSelectProps } from '@react-types/select';
+import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Props, Styles } from '../../../tasty';
 import { FormFieldProps } from '../../../shared';
+import { CubeButtonProps } from '../../actions';
+import type { AriaSelectProps } from '@react-types/select';
 export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, OuterStyleProps, FormFieldProps, BlockStyleProps, AriaSelectProps<T> {
+    icon?: ReactElement;
     prefix?: ReactNode;
     suffix?: ReactNode;
     triggerRef?: RefObject<HTMLButtonElement>;
@@ -19,6 +21,8 @@ export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, OuterS
     direction?: 'top' | 'bottom';
     shouldFlip?: boolean;
     inputProps?: Props;
+    type?: CubeButtonProps['type'];
+    suffixPosition?: 'before' | 'after';
 }
 export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
     popoverRef?: RefObject<HTMLInputElement>;

package/types/shared/form.d.ts

@@ -1,5 +1,5 @@
-import { Props, Styles } from '../tasty';
 import { ReactNode } from 'react';
+import { Props, Styles } from '../tasty';
 /** Where to place label relative to input */
 export declare type LabelPosition = 'side' | 'top';
 /** The type of necessity indicator */
@@ -49,6 +49,7 @@ export interface FormFieldProps extends FormBaseProps {
     insideForm?: boolean;
     /** A text label of the field */
     label?: ReactNode;
+    labelSuffix?: ReactNode;
     /** An additional content next to the label */
     extra?: ReactNode;
     /** Custom label props */

package/types/stories/FormFieldArgs.d.ts

@@ -329,3 +329,19 @@ export declare const SELECTED_KEY_ARG: {
         };
     };
 };
+export declare const ICON_ARG: {
+    icon: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: boolean;
+            };
+        };
+    };
+};

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

@@ -1,5 +1,5 @@
-import { CubeButtonProps } from '../../components/actions';
 import { AriaButtonProps } from '@react-types/button';
+import { CubeButtonProps } from '../../components/actions';
 /** Converts AriaButtonProps to CubeButtonProps */
 export declare function ariaToCubeButtonProps(props: AriaButtonProps<'button'>): CubeButtonProps;
 /** Converts CubeButtonProps to AriaButtonProps */