@cube-dev/ui-kit 0.73.1 → 0.74.0

package/types/components/fields/DatePicker/utils.d.ts

@@ -1,4 +1,4 @@
 import { FocusableRef } from '@react-types/shared';
 import { DateSegment } from 'react-stately';
-export declare function useFocusManagerRef(ref: FocusableRef<HTMLElement>): import("react").MutableRefObject<undefined>;
+export declare function useFocusManagerRef(ref: FocusableRef<HTMLElement>): import("react").RefObject<null>;
 export declare function formatSegments(segments: DateSegment[]): DateSegment[];

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

@@ -1,4 +1,4 @@
-import { AriaLabelingProps, CollectionBase } from '@react-types/shared';
+import { AriaLabelingProps, CollectionBase, DOMRef } from '@react-types/shared';
 import React, { ReactElement, ReactNode, RefObject } from 'react';
 import { AriaSelectProps } from 'react-aria';
 import { Section as BaseSection, useSelectState } from 'react-stately';
@@ -74,7 +74,9 @@ export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxSty
 }): import("react/jsx-runtime").JSX.Element;
 type SectionComponent = typeof BaseSection;
 declare const SelectSectionComponent: SectionComponent;
-declare const __Select: React.ForwardRefExoticComponent<Omit<CubeSelectProps<object>, "ref"> & React.RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>> & {
+declare const __Select: (<T extends object>(props: CubeSelectProps<object> & {
+    ref?: DOMRef<HTMLDivElement> | undefined;
+}) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>) & {
     Item: typeof Item;
     Section: typeof SelectSectionComponent;
 } & {

package/types/components/fields/Slider/SliderBase.d.ts

@@ -1,3 +1,4 @@
+import { DOMRef } from '@react-types/shared';
 import { ReactNode, RefObject } from 'react';
 import { useSlider } from 'react-aria';
 import type { SliderState } from 'react-stately';
@@ -10,6 +11,8 @@ export interface SliderBaseChildArguments {
 export interface SliderBaseProps<T = number[]> extends CubeSliderBaseProps<T> {
     children: (opts: SliderBaseChildArguments) => ReactNode;
 }
-declare const _SliderBase: import("react").ForwardRefExoticComponent<Omit<SliderBaseProps<number[]>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLDivElement, HTMLDivElement>>>;
+declare const _SliderBase: <T extends object>(props: SliderBaseProps<number[]> & {
+    ref?: DOMRef<HTMLDivElement> | undefined;
+}) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export { _SliderBase as SliderBase };
 export { useSlider };

package/types/components/fields/Slider/SliderThumb.d.ts

@@ -4,8 +4,8 @@ import type { SliderState } from 'react-stately';
 export interface SliderThumbProps extends AriaSliderThumbOptions {
     state: SliderState;
     isDisabled?: boolean;
-    trackRef: RefObject<HTMLElement>;
-    inputRef: RefObject<HTMLInputElement>;
+    trackRef: RefObject<HTMLElement | null>;
+    inputRef: RefObject<HTMLInputElement | null>;
     index: number;
 }
 export declare function SliderThumb(props: SliderThumbProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { DOMRef } from '@react-types/shared';
-import { FormHTMLAttributes } from 'react';
+import { FormHTMLAttributes, ReactElement } from 'react';
 import { FormBaseProps } from '../../../shared/index';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty/index';
 import { FieldTypes } from './types';
@@ -23,9 +23,10 @@ export interface CubeFormProps<T extends FieldTypes = FieldTypes> extends FormBa
     labelWidth?: Styles['width'];
     orientation?: 'vertical' | 'horizontal';
 }
-declare function Form<T extends FieldTypes>(props: CubeFormProps<T>, ref: DOMRef<HTMLFormElement>): import("react/jsx-runtime").JSX.Element;
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
  */
-declare const _Form: typeof Form;
+declare const _Form: <T extends FieldTypes>(props: CubeFormProps<T> & {
+    ref?: DOMRef<HTMLFormElement>;
+}) => ReactElement;
 export { _Form as Form };

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

@@ -5,7 +5,9 @@ import { ResetButton } from './ResetButton';
 import { SubmitButton } from './SubmitButton';
 import { SubmitError } from './SubmitError';
 import { useForm } from './use-form';
-declare const Form: (<T extends import("./types").FieldTypes>(props: import("./Form").CubeFormProps<T>, ref: import("@react-types/shared").DOMRef<HTMLFormElement>) => import("react/jsx-runtime").JSX.Element) & {
+declare const Form: (<T extends import("./types").FieldTypes>(props: import("./Form").CubeFormProps<T> & {
+    ref?: import("@react-types/shared").DOMRef<HTMLFormElement>;
+}) => import("react").ReactElement) & {
     Item: typeof Field;
     SubmitError: typeof SubmitError;
     Submit: typeof SubmitButton;

package/types/components/form/wrapper.d.ts

@@ -1,9 +1,9 @@
-import { FocusableRef } from '@react-types/shared';
+import { DOMRef, FocusableRef } from '@react-types/shared';
 import { ReactElement, RefObject } from 'react';
 import { FieldBaseProps, FormBaseProps } from '../../shared/index';
 import { BaseProps, Styles } from '../../tasty/index';
 interface WrapWithFieldProps extends FieldBaseProps, BaseProps, FormBaseProps {
     styles?: Styles;
 }
-export declare function wrapWithField<T extends WrapWithFieldProps>(component: ReactElement, ref: RefObject<unknown> | FocusableRef<HTMLElement>, props: T): import("react/jsx-runtime").JSX.Element;
+export declare function wrapWithField<T extends WrapWithFieldProps>(component: ReactElement, ref: RefObject<unknown> | FocusableRef<HTMLElement> | DOMRef<HTMLElement>, props: T): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,6 +2,4 @@ import { BaseProps, PositionStyleProps } from '../../../tasty';
 export interface CubeBase64UploadProps extends BaseProps, PositionStyleProps {
     onInput?: (arg?: any) => void;
 }
-export declare const Base64Upload: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<CubeBase64UploadProps & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>, "ref"> & {
-    ref?: ((instance: import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement> | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>> | null | undefined;
-}, never>> & Omit<import("react").ForwardRefExoticComponent<CubeBase64UploadProps & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>, keyof import("react").Component<any, {}, any>>;
+export declare const Base64Upload: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<CubeBase64UploadProps & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>, never>> & string & Omit<import("react").ForwardRefExoticComponent<CubeBase64UploadProps & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>, keyof import("react").Component<any, {}, any>>;

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

@@ -23,7 +23,7 @@ export interface CubeDialogTriggerProps extends OverlayTriggerProps, PositionPro
      */
     hideArrow?: boolean;
     /** The ref of the element the Dialog should visually attach itself to. Defaults to the trigger button if not defined. */
-    targetRef?: RefObject<HTMLElement>;
+    targetRef?: RefObject<HTMLElement | null>;
     /** Whether a modal type Dialog should be dismissable. */
     isDismissable?: boolean;
     /** Whether pressing the escape key to close the dialog should be disabled. */

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

@@ -4,9 +4,5 @@ export interface CubeUnderlayProps extends HTMLAttributes<HTMLElement> {
     isOpen?: boolean;
     transitionState?: TransitionState;
 }
-declare let _Underlay: import("react").ForwardRefExoticComponent<Omit<{
-    [x: string]: any;
-    isOpen: any;
-    transitionState: any;
-}, "ref"> & import("react").RefAttributes<unknown>>;
+declare let _Underlay: import("react").ForwardRefExoticComponent<CubeUnderlayProps & import("react").RefAttributes<HTMLElement>>;
 export { _Underlay as Underlay };

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

@@ -1,4 +1,4 @@
-import { Key, ReactChild, ReactElement, ReactFragment, ReactNode } from 'react';
+import { Key, ReactElement, ReactNode } from 'react';
 import { NotificationAction, NotificationActionProps } from './NotificationView';
 export type CubeNotificationType = 'success' | 'danger' | 'attention';
 export type NotificationActionComponent = ReactElement<NotificationActionProps, typeof NotificationAction>;
@@ -43,8 +43,8 @@ export type BaseNotificationProps = {
     /**
      * Title of the notification
      */
-    header?: ReactChild | ReactFragment;
-    description: ReactChild | ReactFragment;
+    header?: ReactNode;
+    description: ReactNode;
     /**
      * Custom Icon for the notification
      */

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

@@ -1,8 +1,8 @@
-import type { Key, ReactChild, ReactFragment, ReactNode } from 'react';
+import type { Key, ReactNode } from 'react';
 import type { CubeNotificationType, CubeNotifyApiProps } from '../NewNotifications';
 export type CubeToastsApiProps = {
-    description: ReactChild | ReactFragment;
-    header?: ReactChild | ReactFragment;
+    description: ReactNode;
+    header?: ReactNode;
     id?: Key;
     onDismiss?: () => void;
     duration?: number | null;
@@ -14,7 +14,7 @@ export type CubeToastsApi = {
     update: (id: Key, props: Partial<CubeToastsApiProps>) => void;
     remove: (id: Key) => void;
 };
-export type CubeToastsApiToastCallback = (props: CubeToastsApiProps | ReactChild | ReactFragment) => {
+export type CubeToastsApiToastCallback = (props: CubeToastsApiProps | ReactNode) => {
     id: Key;
     update: (props: Partial<CubeNotifyApiProps>) => void;
     remove: () => void;

package/types/components/status/Spin/Cube.d.ts

@@ -1,4 +1,2 @@
 import { SpinCubeProps } from './types';
-export declare const Cube: import("react").MemoExoticComponent<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
-}>, SpinCubeProps>, never>>>;
+export declare const Cube: import("react").NamedExoticComponent<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, SpinCubeProps>, never>>;

package/types/components/status/Spin/SpinsContainer.d.ts

@@ -1,5 +1,3 @@
-export declare const SpinsContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
-}>, {
+export declare const SpinsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
     $ownSize: number;
-}>, never>>;
+}>, never>> & string;

package/types/icons/Icon.d.ts

@@ -6,4 +6,4 @@ export interface CubeIconProps extends BaseProps, OuterStyleProps, ColorStylePro
     children?: ReactElement;
     title?: string;
 }
-export declare const Icon: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<CubeIconProps & import("react").RefAttributes<HTMLSpanElement>>>;
+export declare const Icon: import("react").NamedExoticComponent<CubeIconProps & import("react").RefAttributes<HTMLSpanElement>>;

package/types/tasty/tasty.d.ts

@@ -33,8 +33,8 @@ type TastyComponentPropsWithDefaults<Props extends PropsWithStyles, DefaultProps
 } & {
     [key in keyof Omit<Props, keyof DefaultProps>]: Props[key];
 };
-declare function tasty<K extends StyleList, V extends VariantMap>(options: TastyProps<K, V>, secondArg?: never): ComponentType<Omit<Props, 'variant'> & WithVariant<V>>;
-declare function tasty(selector: string, styles?: Styles): any;
-declare function tasty<Props extends PropsWithStyles, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: TastyProps<never, never, Props>): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;
-declare const Element: ComponentType<Omit<Props, "variant"> & WithVariant<VariantMap>>;
-export { tasty, Element };
+export declare function tasty<K extends StyleList, V extends VariantMap>(options: TastyProps<K, V>, secondArg?: never): ComponentType<Omit<Props, 'variant'> & WithVariant<V>>;
+export declare function tasty(selector: string, styles?: Styles): any;
+export declare function tasty<Props extends PropsWithStyles, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: TastyProps<never, never, Props>): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;
+export declare const Element: ComponentType<Omit<Props, "variant"> & WithVariant<VariantMap>>;
+export {};

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

@@ -0,0 +1,26 @@
+import { DOMRef } from '@react-types/shared';
+import { ReactElement } from 'react';
+/**
+ * A helper for creating forwardRef components with generic types.
+ * This solves the issue where React's forwardRef doesn't work well with generic components,
+ * especially when props include required children from CollectionBase<T> or similar types.
+ *
+ * @example
+ * ```tsx
+ * function MySelect<T extends object>(
+ *   props: MySelectProps<T>,
+ *   ref: DOMRef<HTMLDivElement>
+ * ) {
+ *   // component implementation
+ *   return <div ref={ref}>...</div>;
+ * }
+ *
+ * const MySelectWithRef = forwardRefWithGenerics(MySelect);
+ *
+ * // Usage:
+ * <MySelectWithRef<ItemType> items={items} ref={myRef} />
+ * ```
+ */
+export declare function forwardRefWithGenerics<TProps extends Record<string, any>, TElement extends HTMLElement = HTMLElement>(component: <T extends object>(props: TProps, ref: DOMRef<TElement>) => ReactElement): <T extends object>(props: TProps & {
+    ref?: DOMRef<TElement>;
+}) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -1,4 +1,5 @@
 export { chain } from './chain';
+export { forwardRefWithGenerics } from './forwardRefWithGenerics';
 export { isTextOnly } from './isTextOnly';
 export { mergeProps } from './mergeProps';
 export { modAttrs } from '../../tasty';