uikit-react-public 0.45.5 → 0.47.0

package/dist/components/DropZone/DropZone.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+import { DropZoneDrop, DropZoneRejection, UseDropZoneOptions } from '../../hooks/useDropZone';
+import { MarginProps } from '../common/marginsStyle';
+export declare const NAME = "ucl-uikit-drop-zone";
+export interface DropZoneRenderProps<TData = unknown> {
+    activeTypes: string[];
+    isDragAccept: boolean;
+    isDragActive: boolean;
+    isDragReject: boolean;
+    lastDrop: DropZoneDrop<TData> | null;
+    lastRejection: DropZoneRejection<TData> | null;
+}
+export interface DropZoneBaseProps<TData = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onDrop'>, UseDropZoneOptions<TData> {
+    children?: ReactNode | ((props: DropZoneRenderProps<TData>) => ReactNode);
+    ref?: Ref<HTMLDivElement>;
+    testId?: string;
+}
+export type DropZoneProps<TData = unknown> = DropZoneBaseProps<TData> & MarginProps;
+declare const DropZone: <TData = unknown>({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, acceptedTypes, canDrop, children, className, disabled, dropEffect, keyboardDrop, onDrop, onReject, parseData, ref, role, testId, ...props }: DropZoneProps<TData>) => import("react").JSX.Element;
+declare const MemoizedDropZone: typeof DropZone;
+export default MemoizedDropZone;

package/dist/components/DropZone/DropZone.stories.d.ts

@@ -0,0 +1,52 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: <TData = unknown>({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, acceptedTypes, canDrop, children, className, disabled, dropEffect, keyboardDrop, onDrop, onReject, parseData, ref, role, testId, ...props }: import('./DropZone').DropZoneProps<TData>) => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        acceptedTypes: {
+            control: {
+                type: "object";
+            };
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+        };
+        dropEffect: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+        testId: {
+            control: {
+                type: "text";
+            };
+        };
+        className: {
+            control: false;
+        };
+        children: {
+            control: false;
+        };
+        onDrop: {
+            action: string;
+        };
+        onReject: {
+            action: string;
+        };
+    };
+    args: {
+        acceptedTypes: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithTableCell: Story;
+export declare const Disabled: Story;

package/dist/components/DropZone/__tests__/DropZone.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DropZone/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DropZone';
+export type { DropZoneProps, DropZoneRenderProps } from './DropZone';

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes, Ref } from 'react';
+import { ThemeType } from '../../theme';
+import { MarginProps } from '../common/marginsStyle';
+import { default as SkeletonAvatar } from './SkeletonAvatar';
+import { default as SkeletonInput } from './SkeletonInput';
+import { default as SkeletonTableRow } from './SkeletonTableRow';
+import { default as SkeletonText } from './SkeletonText';
+export declare const NAME = "ucl-uikit-skeleton";
+export type SkeletonVariant = 'text' | 'circle' | 'rect';
+export interface SkeletonBaseProps extends HTMLAttributes<HTMLDivElement> {
+    /** Placeholder shape. @default 'text' */
+    variant?: SkeletonVariant;
+    /** Overrides the bar width. Numbers are treated as pixels. */
+    width?: number | string;
+    /** Overrides the bar height. Numbers are treated as pixels. */
+    height?: number | string;
+    /** Number of bars to render. @default 1 */
+    count?: number;
+    /** Optional border-radius token. Ignored for the `circle` variant. */
+    radius?: keyof ThemeType['radius'];
+    testId?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export type SkeletonProps = SkeletonBaseProps & MarginProps;
+export declare const getSkeletonShimmerBackground: (theme: ThemeType) => string;
+declare const Skeleton: ({ variant, width, height, count, radius, testId, className, ref, ...props }: SkeletonProps) => import("react").JSX.Element;
+export interface SkeletonSubcomponents {
+    Text: typeof SkeletonText;
+    Avatar: typeof SkeletonAvatar;
+    Input: typeof SkeletonInput;
+    TableRow: typeof SkeletonTableRow;
+}
+declare const SkeletonWithSubcomponents: typeof Skeleton & SkeletonSubcomponents;
+export { Skeleton };
+export default SkeletonWithSubcomponents;

package/dist/components/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,27 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: (({ variant, width, height, count, radius, testId, className, ref, ...props }: import('./Skeleton').SkeletonProps) => import("react").JSX.Element) & import('./Skeleton').SkeletonSubcomponents;
+    parameters: {
+        layout: string;
+    };
+    args: {
+        variant: "text";
+    };
+    argTypes: {
+        variant: {
+            options: string[];
+            control: {
+                type: "radio";
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Circle: Story;
+export declare const Landscape: Story;
+export declare const Portrait: Story;
+export declare const TextLines: Story;
+export declare const FigmaExamples: Story;

package/dist/components/Skeleton/SkeletonAvatar.d.ts

@@ -0,0 +1,7 @@
+import { SkeletonProps } from './Skeleton';
+export interface SkeletonAvatarProps extends Omit<SkeletonProps, 'variant' | 'width' | 'height' | 'count'> {
+    /** Matches the `Avatar` size options. @default 72 */
+    size?: 32 | 48 | 56 | 72 | 80;
+}
+declare const SkeletonAvatar: ({ size, ...props }: SkeletonAvatarProps) => import("react").JSX.Element;
+export default SkeletonAvatar;

package/dist/components/Skeleton/SkeletonInput.d.ts

@@ -0,0 +1,4 @@
+import { SkeletonProps } from './Skeleton';
+export type SkeletonInputProps = Omit<SkeletonProps, 'variant' | 'count'>;
+declare const SkeletonInput: ({ height, ...props }: SkeletonInputProps) => import("react").JSX.Element;
+export default SkeletonInput;

package/dist/components/Skeleton/SkeletonTableRow.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export declare const NAME = "ucl-uikit-skeleton__table-row";
+export interface SkeletonTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** Number of cells to render. @default 4 */
+    columns?: number;
+    testId?: string;
+}
+declare const SkeletonTableRow: ({ columns, testId, className, ...props }: SkeletonTableRowProps) => import("react").JSX.Element;
+export default SkeletonTableRow;

package/dist/components/Skeleton/SkeletonText.d.ts

@@ -0,0 +1,4 @@
+import { SkeletonProps } from './Skeleton';
+export type SkeletonTextProps = Omit<SkeletonProps, 'variant'>;
+declare const SkeletonText: ({ count, ...props }: SkeletonTextProps) => import("react").JSX.Element;
+export default SkeletonText;

package/dist/components/Skeleton/__tests__/Skeleton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './Skeleton';
+export type { SkeletonProps, SkeletonVariant } from './Skeleton';
+export type { SkeletonAvatarProps } from './SkeletonAvatar';
+export type { SkeletonInputProps } from './SkeletonInput';
+export type { SkeletonTableRowProps } from './SkeletonTableRow';
+export type { SkeletonTextProps } from './SkeletonText';

package/dist/components/index.d.ts

@@ -31,6 +31,8 @@ export { default as Spinner } from './Spinner';
 export type { SpinnerProps } from './Spinner';
 export { default as ProgressBar } from './ProgressBar';
 export type { ProgressBarProps, ProgressBarSize, ProgressBarVariant, } from './ProgressBar';
+export { default as Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonVariant, SkeletonTextProps, SkeletonAvatarProps, SkeletonInputProps, SkeletonTableRowProps, } from './Skeleton';
 export { default as Textarea } from './Textarea';
 export type { TextareaProps } from './Textarea';
 export { default as Heading } from './Heading';
@@ -121,6 +123,8 @@ export type { NativeDatepickerProps } from './NativeDatepicker';
 export { default as Calendar } from './Calendar';
 export type { CalendarProps, CalendarStatuses } from './Calendar';
 export { default as WeekPicker } from './WeekPicker';
+export { default as DropZone } from './DropZone';
+export type { DropZoneProps, DropZoneRenderProps } from './DropZone';
 export { default as FileInput } from './FileInput';
 export type { FileInputProps } from './FileInput';
 export { default as Timepicker } from './Timepicker';

package/dist/hooks/__tests__/useDraggable.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/index.d.ts

@@ -1,2 +1,6 @@
 export { useFocusTrap } from './useFocusTrap';
+export { default as useDraggable } from './useDraggable';
+export type { DraggableProps, UseDraggableOptions, UseDraggableReturn, } from './useDraggable';
+export { default as useDropZone, UIKIT_DND_DATA_TYPE } from './useDropZone';
+export type { DragData, DropZoneAcceptedTypes, DropZoneDrop, DropZoneEvent, DropZoneRejection, DropZoneRejectionReason, DropZoneRootProps, KeyboardDragData, UseDropZoneOptions, UseDropZoneReturn, } from './useDropZone';
 export { default as useMediaQuery } from './useMediaQuery';

package/dist/hooks/useDraggable.d.ts

@@ -0,0 +1,31 @@
+import { DragEvent, HTMLAttributes, Ref, RefCallback } from 'react';
+import { DragData } from './useDropZone';
+export interface UseDraggableOptions<TData = unknown> {
+    data: TData;
+    disabled?: boolean;
+    dragImage?: Element;
+    dragImageOffset?: {
+        x: number;
+        y: number;
+    };
+    effectAllowed?: DataTransfer['effectAllowed'];
+    keyboardDrag?: boolean;
+    onDragEnd?: (event: DragEvent<HTMLElement>) => void;
+    onKeyboardDragCancel?: (dragData: DragData<TData>) => void;
+    onDragStart?: (dragData: DragData<TData>, event: DragEvent<HTMLElement>) => void;
+    onKeyboardDragStart?: (dragData: DragData<TData>) => void;
+    serializeData?: (data: TData) => string;
+    type: string;
+}
+export interface DraggableProps<TElement extends HTMLElement> extends HTMLAttributes<TElement> {
+    draggable: boolean;
+    ref: RefCallback<TElement>;
+}
+export interface UseDraggableReturn {
+    getDragProps: <TElement extends HTMLElement = HTMLElement>(props?: HTMLAttributes<TElement> & {
+        ref?: Ref<TElement>;
+    }) => DraggableProps<TElement>;
+    isDragging: boolean;
+}
+declare const useDraggable: <TData = unknown>({ data, disabled, dragImage, dragImageOffset, effectAllowed, keyboardDrag, onDragEnd, onKeyboardDragCancel, onDragStart, onKeyboardDragStart, serializeData, type, }: UseDraggableOptions<TData>) => UseDraggableReturn;
+export default useDraggable;

package/dist/hooks/useDropZone.d.ts

@@ -0,0 +1,57 @@
+import { DragEvent, HTMLAttributes, KeyboardEvent, Ref, RefCallback } from 'react';
+export declare const UIKIT_DND_DATA_TYPE = "application/x-ucl-uikit-dnd";
+export type DropZoneAcceptedTypes = string | readonly string[];
+export type DropZoneRejectionReason = 'invalid-type' | 'cannot-drop';
+export interface DragData<TData = unknown> {
+    data: TData;
+    rawData?: string;
+    type: string;
+}
+export interface KeyboardDragData<TData = unknown> extends DragData<TData> {
+    id: string;
+    rawData: string;
+}
+export interface DropZoneDrop<TData = unknown> extends DragData<TData> {
+    dataTransfer: DataTransfer | null;
+    files: File[];
+    rawData: string;
+}
+export interface DropZoneRejection<TData = unknown> {
+    drop: DropZoneDrop<TData> | null;
+    reason: DropZoneRejectionReason;
+}
+export interface UseDropZoneOptions<TData = unknown> {
+    acceptedTypes?: DropZoneAcceptedTypes;
+    canDrop?: (drop: DropZoneDrop<TData>) => boolean;
+    disabled?: boolean;
+    dropEffect?: DataTransfer['dropEffect'];
+    keyboardDrop?: boolean;
+    onDrop?: (drop: DropZoneDrop<TData>, event: DropZoneEvent) => void;
+    onReject?: (rejection: DropZoneRejection<TData>, event: DropZoneEvent) => void;
+    parseData?: (rawData: string, type: string) => TData;
+}
+export type DropZoneEvent = DragEvent<HTMLElement> | KeyboardEvent<HTMLElement>;
+export interface DropZoneRootProps<TElement extends HTMLElement> extends HTMLAttributes<TElement> {
+    ref: RefCallback<TElement>;
+    'aria-disabled'?: boolean;
+    'data-drag-active': boolean;
+    'data-drag-accept': boolean;
+    'data-drag-reject': boolean;
+}
+export interface UseDropZoneReturn<TData = unknown> {
+    activeTypes: string[];
+    getRootProps: <TElement extends HTMLElement = HTMLDivElement>(props?: HTMLAttributes<TElement> & {
+        ref?: Ref<TElement>;
+    }) => DropZoneRootProps<TElement>;
+    isDragAccept: boolean;
+    isDragActive: boolean;
+    isDragReject: boolean;
+    lastDrop: DropZoneDrop<TData> | null;
+    lastRejection: DropZoneRejection<TData> | null;
+}
+export declare const getActiveKeyboardDrag: () => KeyboardDragData<unknown> | null;
+export declare const setActiveKeyboardDrag: (dragData: KeyboardDragData<unknown>) => void;
+export declare const clearActiveKeyboardDrag: () => void;
+export declare const subscribeToKeyboardDrag: (listener: () => void) => () => void;
+declare const useDropZone: <TData = unknown>({ acceptedTypes, canDrop, disabled, dropEffect, keyboardDrop, onDrop: onDropCallback, onReject, parseData, }?: UseDropZoneOptions<TData>) => UseDropZoneReturn<TData>;
+export default useDropZone;