@zuzjs/ui 1.0.68 → 1.0.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bin.cjs +4 -4
- package/dist/bin.js +1 -1
- package/dist/{chunk-MNHOS4TL.js → chunk-BWLQSC4Y.js} +3 -3
- package/dist/{chunk-UL5YYNNZ.cjs → chunk-DZAIAT3J.cjs} +2 -2
- package/dist/css/styles.css +1 -1
- package/dist/index.cjs +7 -7
- package/dist/index.d.cts +102 -16
- package/dist/index.d.ts +102 -16
- package/dist/index.js +6 -6
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -4,7 +4,7 @@ import { DragOptions, LineChartProps, MediaItem, useMediaPlayer, ScrollBreakpoin
|
|
|
4
4
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
5
|
import { dynamic as dynamic$1, PubSub } from '@zuzjs/core';
|
|
6
6
|
|
|
7
|
-
declare const VERSION = "1.0.
|
|
7
|
+
declare const VERSION = "1.0.69";
|
|
8
8
|
|
|
9
9
|
declare const AVATAR: {
|
|
10
10
|
readonly Circle: "CIRCLE";
|
|
@@ -788,39 +788,112 @@ declare enum BubbleMediaType {
|
|
|
788
788
|
Event = "event",
|
|
789
789
|
Poll = "poll"
|
|
790
790
|
}
|
|
791
|
+
declare enum BubbleAttachmentType {
|
|
792
|
+
File = "file",
|
|
793
|
+
Image = "image",
|
|
794
|
+
Video = "video",
|
|
795
|
+
Audio = "audio",
|
|
796
|
+
Link = "link"
|
|
797
|
+
}
|
|
798
|
+
type BubbleStylePreset = "default" | "ios" | "android" | "blocks" | "glass" | "minimal";
|
|
799
|
+
type BubbleAttachment = {
|
|
800
|
+
id?: string | number;
|
|
801
|
+
type?: BubbleAttachmentType;
|
|
802
|
+
name: string;
|
|
803
|
+
url: string;
|
|
804
|
+
size?: string;
|
|
805
|
+
preview?: string;
|
|
806
|
+
};
|
|
791
807
|
type BubbleProps = BoxProps & {
|
|
808
|
+
id?: string | number;
|
|
792
809
|
text?: string;
|
|
793
810
|
media?: {
|
|
794
811
|
type: BubbleMediaType;
|
|
795
812
|
source: string;
|
|
796
813
|
duration?: string;
|
|
814
|
+
thumbnail?: string;
|
|
815
|
+
title?: string;
|
|
797
816
|
};
|
|
798
817
|
side?: "me" | "you";
|
|
818
|
+
stylePreset?: BubbleStylePreset;
|
|
799
819
|
status?: BubbleStatus;
|
|
800
820
|
timeStamp?: number;
|
|
801
821
|
arrow?: boolean;
|
|
822
|
+
attachments?: BubbleAttachment[];
|
|
823
|
+
/** Auto-fetch and display link previews from URLs in text */
|
|
824
|
+
autoFetchLinkPreview?: boolean;
|
|
825
|
+
/** Optional custom preview fetcher for links found in text */
|
|
826
|
+
linkPreviewFetcher?: (url: string) => Promise<{
|
|
827
|
+
title?: string;
|
|
828
|
+
description?: string;
|
|
829
|
+
image?: string;
|
|
830
|
+
url?: string;
|
|
831
|
+
} | null>;
|
|
832
|
+
/** Message this bubble is replying to */
|
|
833
|
+
replyTo?: {
|
|
834
|
+
author: string;
|
|
835
|
+
text: string;
|
|
836
|
+
id?: string | number;
|
|
837
|
+
};
|
|
838
|
+
/** Array of emoji reactions */
|
|
839
|
+
reactions?: string[];
|
|
840
|
+
/** Whether this message is forwarded */
|
|
841
|
+
forwarded?: boolean;
|
|
842
|
+
/** Complex nested content support */
|
|
843
|
+
children?: ReactNode;
|
|
802
844
|
};
|
|
803
845
|
|
|
804
846
|
/**
|
|
805
|
-
* ChatBubble component.
|
|
847
|
+
* ChatBubble component optimized for performance.
|
|
848
|
+
* Supports:
|
|
849
|
+
* - Complex nested content (reactions, replies, forwarded messages)
|
|
850
|
+
* - Automatic link preview fetching and display
|
|
851
|
+
* - Memoization for optimal rendering
|
|
852
|
+
* - Media attachments (audio, image, video, documents)
|
|
806
853
|
*
|
|
807
854
|
* @example
|
|
808
855
|
* // Basic usage
|
|
809
856
|
* ```tsx
|
|
810
|
-
* <ChatBubble
|
|
857
|
+
* <ChatBubble text="Hello! How can I help?" side="me" />
|
|
811
858
|
* ```
|
|
812
859
|
*
|
|
813
860
|
* @example
|
|
814
|
-
* //
|
|
861
|
+
* // With link preview auto-fetch
|
|
815
862
|
* ```tsx
|
|
816
|
-
* <ChatBubble
|
|
863
|
+
* <ChatBubble text="Check this out: https://example.com" side="you" autoFetchLinkPreview />
|
|
817
864
|
* ```
|
|
818
|
-
* @param message - Message text or element
|
|
819
|
-
* @param sender - sender prop
|
|
820
|
-
* @param timestamp - timestamp prop
|
|
821
|
-
* @param avatar - avatar prop
|
|
822
865
|
*/
|
|
823
|
-
declare const Bubble: react.
|
|
866
|
+
declare const Bubble: react.NamedExoticComponent<Omit<BubbleProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
867
|
+
|
|
868
|
+
type ChatMessage = BubbleProps;
|
|
869
|
+
type ChatDateLabels = {
|
|
870
|
+
today?: ReactNode;
|
|
871
|
+
yesterday?: ReactNode;
|
|
872
|
+
};
|
|
873
|
+
type ChatDateLabelFormatter = (timeStamp: number, context: {
|
|
874
|
+
date: Date;
|
|
875
|
+
dayDiff: number;
|
|
876
|
+
locale?: string;
|
|
877
|
+
labels: Required<ChatDateLabels>;
|
|
878
|
+
}) => ReactNode;
|
|
879
|
+
interface ChatListProps {
|
|
880
|
+
messages: ChatMessage[];
|
|
881
|
+
autoScroll?: boolean;
|
|
882
|
+
onScrollTop?: () => void;
|
|
883
|
+
typing?: boolean | string;
|
|
884
|
+
dateLabels?: ChatDateLabels;
|
|
885
|
+
locale?: string;
|
|
886
|
+
formatDateLabel?: ChatDateLabelFormatter;
|
|
887
|
+
}
|
|
888
|
+
|
|
889
|
+
/**
|
|
890
|
+
* ChatList component optimized for performance with auto-scroll and unread indicator.
|
|
891
|
+
* - Auto scrolls to bottom when new messages arrive
|
|
892
|
+
* - Allows manual scroll without disruption
|
|
893
|
+
* - Shows unread message count when scrolled up
|
|
894
|
+
* - Memoizes child components for optimal rendering
|
|
895
|
+
*/
|
|
896
|
+
declare const ChatList: react.MemoExoticComponent<({ messages, autoScroll, onScrollTop, typing, dateLabels, locale, formatDateLabel, }: ChatListProps) => react_jsx_runtime.JSX.Element>;
|
|
824
897
|
|
|
825
898
|
/**
|
|
826
899
|
* Props for the CheckBox component.
|
|
@@ -1901,16 +1974,27 @@ type ListItemObject = {
|
|
|
1901
1974
|
onClick?: (event: any) => void;
|
|
1902
1975
|
};
|
|
1903
1976
|
type ListItem = Props<`li`> & (ReactNode | ListItemObject);
|
|
1977
|
+
type VirtualScrollOptions = {
|
|
1978
|
+
/** Height of each item in pixels */
|
|
1979
|
+
itemHeight?: number;
|
|
1980
|
+
/** Container height in pixels (auto-detected if not provided) */
|
|
1981
|
+
height?: number;
|
|
1982
|
+
/** Number of items to render outside visible area */
|
|
1983
|
+
overscan?: number;
|
|
1984
|
+
};
|
|
1904
1985
|
type ListProps = Props<`ul` | `ol`> & {
|
|
1905
1986
|
variant?: ValueOf<typeof Variant>;
|
|
1906
1987
|
items: ListItem[];
|
|
1907
1988
|
direction?: "cols" | "rows";
|
|
1908
1989
|
seperator?: ReactNode;
|
|
1909
1990
|
ol?: boolean;
|
|
1991
|
+
/** Virtual scrolling config for large lists */
|
|
1992
|
+
virtual?: VirtualScrollOptions;
|
|
1910
1993
|
};
|
|
1911
1994
|
|
|
1912
1995
|
/**
|
|
1913
|
-
* List component.
|
|
1996
|
+
* List component with virtualization support.
|
|
1997
|
+
* Optimized for large lists with efficient rendering and fast scrolling.
|
|
1914
1998
|
*
|
|
1915
1999
|
* @example
|
|
1916
2000
|
* // Basic usage
|
|
@@ -1919,13 +2003,14 @@ type ListProps = Props<`ul` | `ol`> & {
|
|
|
1919
2003
|
* ```
|
|
1920
2004
|
*
|
|
1921
2005
|
* @example
|
|
1922
|
-
* //
|
|
2006
|
+
* // Large list with virtual scrolling
|
|
1923
2007
|
* ```tsx
|
|
1924
|
-
* <List items={
|
|
2008
|
+
* <List items={items} virtual={{ itemHeight: 50 }} onSelect={(item) => {}} />
|
|
1925
2009
|
* ```
|
|
2010
|
+
*
|
|
1926
2011
|
* @param items - Array of items
|
|
1927
|
-
* @param
|
|
1928
|
-
* @param
|
|
2012
|
+
* @param virtual - Virtual scrolling options (itemHeight, overscan)
|
|
2013
|
+
* @param seperator - Separator between items
|
|
1929
2014
|
*/
|
|
1930
2015
|
declare const List: react.ForwardRefExoticComponent<ZuzProps & Omit<Omit<react.DetailedHTMLProps<react.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> | Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">, keyof ZuzProps> & {
|
|
1931
2016
|
variant?: ValueOf<typeof Variant>;
|
|
@@ -1933,6 +2018,7 @@ declare const List: react.ForwardRefExoticComponent<ZuzProps & Omit<Omit<react.D
|
|
|
1933
2018
|
direction?: "cols" | "rows";
|
|
1934
2019
|
seperator?: react.ReactNode;
|
|
1935
2020
|
ol?: boolean;
|
|
2021
|
+
virtual?: VirtualScrollOptions;
|
|
1936
2022
|
} & react.RefAttributes<HTMLOListElement | HTMLUListElement>>;
|
|
1937
2023
|
|
|
1938
2024
|
interface MediaPlayerController {
|
|
@@ -3478,4 +3564,4 @@ declare const useToast: () => {
|
|
|
3478
3564
|
clearAll: () => void;
|
|
3479
3565
|
};
|
|
3480
3566
|
|
|
3481
|
-
export { ALERT, AVATAR, Accordion, type AccordionHandler, type AccordionProps, ActionBar, type ActionBarHandler, type ActionBarItem, type ActionBarProps, Alert, type AlertHandler, type AlertProps, type AnimationTransition, AutoComplete, type AutoCompleteProps, Avatar, type AvatarHandler, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps,
|
|
3567
|
+
export { ALERT, AVATAR, Accordion, type AccordionHandler, type AccordionProps, ActionBar, type ActionBarHandler, type ActionBarItem, type ActionBarProps, Alert, type AlertHandler, type AlertProps, type AnimationTransition, AutoComplete, type AutoCompleteProps, Avatar, type AvatarHandler, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, type BubbleAttachment, BubbleAttachmentType, BubbleMediaType, type BubbleProps, BubbleStatus, type BubbleStylePreset, Button, type ButtonHandler, type ButtonKind, type ButtonProps, ButtonState, CHART, CHECKBOX, COLORTHEME, Calendar, type CalendarProps, Carousel, type CarouselEffect, type CarouselProps, Chart, type ChartProps, Bubble as ChatBubble, type ChatDateLabelFormatter, type ChatDateLabels, ChatList, type ChatListProps, type ChatMessage, CheckBox, type CheckBoxProps, type CheckboxHandler, CodeBlock, type CodeBlockProps, ColorScheme$1 as ColorScheme, type Column, type ContextItem, ContextMenu, type ContextMenuHandler, type ContextMenuProps, type CookieConsentProps, CookiesConsent, Cover, type CoverProps, type CropHandler, CropShape, Cropper, type CropperProps, Crumb, type CrumbItem, type CrumbProps, DATATYPE, DIALOG, DIALOG_ACTION_POSITION, DRAWER_SIDE, DatePicker, Dialog, type DialogActionHandler, type DialogController, type DialogHandler, type DialogProps, Drawer, type DrawerController, type DrawerHandler, type DrawerProps, FILTER, FORMVALIDATION, FORMVALIDATION_STYLE, Fab, type FabProps, Fieldset, type FieldsetProps, type FilterProps, Filters, Flex, type FlexProps, Form, type FormHandler, type FormInputs, type FormProps, type FormValidation, Grid, type GridProps, Group, type GroupProps, Icon, type IconProps, Image, type ImageProps, Input, type InputProps, type KeyCombination, type KeyboardKey, type KeyboardKeyProps, KeyBoardKeys as KeyboardKeys, KeysLabelMap, KeysMap, Label, type LabelProps, type LayerHandler, LayersProvider, List, type ListItem, type ListItemObject, type ListProps, type LoopMode, MediaPlayer, type MediaPlayerContextType, type MediaPlayerController, type MediaPlayerIcons, type MediaPlayerProps, type MenuItemProps, type MorphOptions, type NetworkManagerprops, NetworkManager as NetworkStatus, ORIGIN, type Option, type OptionItemProps, OriginType, Overlay, type OverlayProps, PACKAGE_NAME, PLACEMENTS, POSITION, PROGRESS, Pagination, type PaginationCallback, type PaginationController, type PaginationPage, type PaginationPageItem, type PaginationProps, PaginationStyle, Password, type PasswordProps, PinInput, type PinInputProps, type Placement, Position, ProgressBar, type ProgressBarProps, type ProgressHandler, type Props, RADIO, Radio, type RadioHandler, type RadioProps, type Row, type RowSelectCallback, SHEET, SHEET_ACTION_POSITION, SKELETON, SLIDER, SORT, SPINNER, ScrollView, type ScrollViewProps, Search, type SearchHandler, type SearchProps, type Segment, type SegmentController, type SegmentItemProps, type SegmentProps, Select, type SelectEditableChange, type SelectEditableProps, type SelectHandler, type SelectInternalProps, type SelectMultipleChange, type SelectMultipleProps, type SelectPrimitive, type SelectProps, type SelectSingleChange, type SelectSingleProps, type SelectSingleValue, Segmented as SelectTabs, type SelectTokenizerProps, type SelectValue, Sheet, type SheetHandler, type SheetProps, type Skeleton, Slider, type SliderController, type SliderProps, type ToastAction as SnackAction, type SnackController, ToastPosition as SnackPosition, ToastStyle as SnackStyle, ToastType as SnackType, Span, type SpanProps, Spinner, type SpinnerProps, Status, Switch, type CheckboxHandler as SwitchHandler, TRANSITIONS, TRANSITION_CURVES, type Tab, type TabBodyProps, type TabProps, TabView, type TabViewHandler, type TabViewProps, ForwardedTable as Table, type TableController, type TableOfContentItem, TableOfContents, type TableOfContentsProps, type TableProps, type TableSortCallback, Terminal, type TerminalCommandFn, type TerminalCommands, type TerminalHandler, type TerminalLine, type TerminalProps, Text, type TextAreaProps, TextWheel, type TextWheelHandler, type TextWheelProps, TextArea as Textarea, ThemeProvider, type ToastAction, ToastDefaultTitle, ToastPosition, type ToastProps, Toast as ToastProvider, ToastStyle, ToastType, ToolTip, type ToolTipController, type ToolTipProps, type TreeItemHandler, type TreeItemProps, type TreeNode, type TreeNodeIcons, TreeView, type TreeViewHandler, type TreeViewProps, type ValidationResult, type ValidationSchema, type Value, type ValueOf, Variant, type VirtualScrollOptions, type WithFormValidation, type ZuzCommonValues, type ZuzProps, type ZuzStyleString, VERSION as __ZUZJS_UI_VERSION, type animationProps, animationTransition, buildClassString, buildWithStyles, cleanProps, css, type cssShortKey, type cssShortKeys, type dynamic, getAnimationCurve, getAnimationTransition, getZuzMap, isKeyCombination, type parallaxEffectProps, setZuzMap, splitAtoms, useBase, useContextMenu, useDialog, useDrawer, useFx, useMorph, usePosition, useSnack, useToast };
|
package/dist/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import { DragOptions, LineChartProps, MediaItem, useMediaPlayer, ScrollBreakpoin
|
|
|
4
4
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
5
|
import { dynamic as dynamic$1, PubSub } from '@zuzjs/core';
|
|
6
6
|
|
|
7
|
-
declare const VERSION = "1.0.
|
|
7
|
+
declare const VERSION = "1.0.69";
|
|
8
8
|
|
|
9
9
|
declare const AVATAR: {
|
|
10
10
|
readonly Circle: "CIRCLE";
|
|
@@ -788,39 +788,112 @@ declare enum BubbleMediaType {
|
|
|
788
788
|
Event = "event",
|
|
789
789
|
Poll = "poll"
|
|
790
790
|
}
|
|
791
|
+
declare enum BubbleAttachmentType {
|
|
792
|
+
File = "file",
|
|
793
|
+
Image = "image",
|
|
794
|
+
Video = "video",
|
|
795
|
+
Audio = "audio",
|
|
796
|
+
Link = "link"
|
|
797
|
+
}
|
|
798
|
+
type BubbleStylePreset = "default" | "ios" | "android" | "blocks" | "glass" | "minimal";
|
|
799
|
+
type BubbleAttachment = {
|
|
800
|
+
id?: string | number;
|
|
801
|
+
type?: BubbleAttachmentType;
|
|
802
|
+
name: string;
|
|
803
|
+
url: string;
|
|
804
|
+
size?: string;
|
|
805
|
+
preview?: string;
|
|
806
|
+
};
|
|
791
807
|
type BubbleProps = BoxProps & {
|
|
808
|
+
id?: string | number;
|
|
792
809
|
text?: string;
|
|
793
810
|
media?: {
|
|
794
811
|
type: BubbleMediaType;
|
|
795
812
|
source: string;
|
|
796
813
|
duration?: string;
|
|
814
|
+
thumbnail?: string;
|
|
815
|
+
title?: string;
|
|
797
816
|
};
|
|
798
817
|
side?: "me" | "you";
|
|
818
|
+
stylePreset?: BubbleStylePreset;
|
|
799
819
|
status?: BubbleStatus;
|
|
800
820
|
timeStamp?: number;
|
|
801
821
|
arrow?: boolean;
|
|
822
|
+
attachments?: BubbleAttachment[];
|
|
823
|
+
/** Auto-fetch and display link previews from URLs in text */
|
|
824
|
+
autoFetchLinkPreview?: boolean;
|
|
825
|
+
/** Optional custom preview fetcher for links found in text */
|
|
826
|
+
linkPreviewFetcher?: (url: string) => Promise<{
|
|
827
|
+
title?: string;
|
|
828
|
+
description?: string;
|
|
829
|
+
image?: string;
|
|
830
|
+
url?: string;
|
|
831
|
+
} | null>;
|
|
832
|
+
/** Message this bubble is replying to */
|
|
833
|
+
replyTo?: {
|
|
834
|
+
author: string;
|
|
835
|
+
text: string;
|
|
836
|
+
id?: string | number;
|
|
837
|
+
};
|
|
838
|
+
/** Array of emoji reactions */
|
|
839
|
+
reactions?: string[];
|
|
840
|
+
/** Whether this message is forwarded */
|
|
841
|
+
forwarded?: boolean;
|
|
842
|
+
/** Complex nested content support */
|
|
843
|
+
children?: ReactNode;
|
|
802
844
|
};
|
|
803
845
|
|
|
804
846
|
/**
|
|
805
|
-
* ChatBubble component.
|
|
847
|
+
* ChatBubble component optimized for performance.
|
|
848
|
+
* Supports:
|
|
849
|
+
* - Complex nested content (reactions, replies, forwarded messages)
|
|
850
|
+
* - Automatic link preview fetching and display
|
|
851
|
+
* - Memoization for optimal rendering
|
|
852
|
+
* - Media attachments (audio, image, video, documents)
|
|
806
853
|
*
|
|
807
854
|
* @example
|
|
808
855
|
* // Basic usage
|
|
809
856
|
* ```tsx
|
|
810
|
-
* <ChatBubble
|
|
857
|
+
* <ChatBubble text="Hello! How can I help?" side="me" />
|
|
811
858
|
* ```
|
|
812
859
|
*
|
|
813
860
|
* @example
|
|
814
|
-
* //
|
|
861
|
+
* // With link preview auto-fetch
|
|
815
862
|
* ```tsx
|
|
816
|
-
* <ChatBubble
|
|
863
|
+
* <ChatBubble text="Check this out: https://example.com" side="you" autoFetchLinkPreview />
|
|
817
864
|
* ```
|
|
818
|
-
* @param message - Message text or element
|
|
819
|
-
* @param sender - sender prop
|
|
820
|
-
* @param timestamp - timestamp prop
|
|
821
|
-
* @param avatar - avatar prop
|
|
822
865
|
*/
|
|
823
|
-
declare const Bubble: react.
|
|
866
|
+
declare const Bubble: react.NamedExoticComponent<Omit<BubbleProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
867
|
+
|
|
868
|
+
type ChatMessage = BubbleProps;
|
|
869
|
+
type ChatDateLabels = {
|
|
870
|
+
today?: ReactNode;
|
|
871
|
+
yesterday?: ReactNode;
|
|
872
|
+
};
|
|
873
|
+
type ChatDateLabelFormatter = (timeStamp: number, context: {
|
|
874
|
+
date: Date;
|
|
875
|
+
dayDiff: number;
|
|
876
|
+
locale?: string;
|
|
877
|
+
labels: Required<ChatDateLabels>;
|
|
878
|
+
}) => ReactNode;
|
|
879
|
+
interface ChatListProps {
|
|
880
|
+
messages: ChatMessage[];
|
|
881
|
+
autoScroll?: boolean;
|
|
882
|
+
onScrollTop?: () => void;
|
|
883
|
+
typing?: boolean | string;
|
|
884
|
+
dateLabels?: ChatDateLabels;
|
|
885
|
+
locale?: string;
|
|
886
|
+
formatDateLabel?: ChatDateLabelFormatter;
|
|
887
|
+
}
|
|
888
|
+
|
|
889
|
+
/**
|
|
890
|
+
* ChatList component optimized for performance with auto-scroll and unread indicator.
|
|
891
|
+
* - Auto scrolls to bottom when new messages arrive
|
|
892
|
+
* - Allows manual scroll without disruption
|
|
893
|
+
* - Shows unread message count when scrolled up
|
|
894
|
+
* - Memoizes child components for optimal rendering
|
|
895
|
+
*/
|
|
896
|
+
declare const ChatList: react.MemoExoticComponent<({ messages, autoScroll, onScrollTop, typing, dateLabels, locale, formatDateLabel, }: ChatListProps) => react_jsx_runtime.JSX.Element>;
|
|
824
897
|
|
|
825
898
|
/**
|
|
826
899
|
* Props for the CheckBox component.
|
|
@@ -1901,16 +1974,27 @@ type ListItemObject = {
|
|
|
1901
1974
|
onClick?: (event: any) => void;
|
|
1902
1975
|
};
|
|
1903
1976
|
type ListItem = Props<`li`> & (ReactNode | ListItemObject);
|
|
1977
|
+
type VirtualScrollOptions = {
|
|
1978
|
+
/** Height of each item in pixels */
|
|
1979
|
+
itemHeight?: number;
|
|
1980
|
+
/** Container height in pixels (auto-detected if not provided) */
|
|
1981
|
+
height?: number;
|
|
1982
|
+
/** Number of items to render outside visible area */
|
|
1983
|
+
overscan?: number;
|
|
1984
|
+
};
|
|
1904
1985
|
type ListProps = Props<`ul` | `ol`> & {
|
|
1905
1986
|
variant?: ValueOf<typeof Variant>;
|
|
1906
1987
|
items: ListItem[];
|
|
1907
1988
|
direction?: "cols" | "rows";
|
|
1908
1989
|
seperator?: ReactNode;
|
|
1909
1990
|
ol?: boolean;
|
|
1991
|
+
/** Virtual scrolling config for large lists */
|
|
1992
|
+
virtual?: VirtualScrollOptions;
|
|
1910
1993
|
};
|
|
1911
1994
|
|
|
1912
1995
|
/**
|
|
1913
|
-
* List component.
|
|
1996
|
+
* List component with virtualization support.
|
|
1997
|
+
* Optimized for large lists with efficient rendering and fast scrolling.
|
|
1914
1998
|
*
|
|
1915
1999
|
* @example
|
|
1916
2000
|
* // Basic usage
|
|
@@ -1919,13 +2003,14 @@ type ListProps = Props<`ul` | `ol`> & {
|
|
|
1919
2003
|
* ```
|
|
1920
2004
|
*
|
|
1921
2005
|
* @example
|
|
1922
|
-
* //
|
|
2006
|
+
* // Large list with virtual scrolling
|
|
1923
2007
|
* ```tsx
|
|
1924
|
-
* <List items={
|
|
2008
|
+
* <List items={items} virtual={{ itemHeight: 50 }} onSelect={(item) => {}} />
|
|
1925
2009
|
* ```
|
|
2010
|
+
*
|
|
1926
2011
|
* @param items - Array of items
|
|
1927
|
-
* @param
|
|
1928
|
-
* @param
|
|
2012
|
+
* @param virtual - Virtual scrolling options (itemHeight, overscan)
|
|
2013
|
+
* @param seperator - Separator between items
|
|
1929
2014
|
*/
|
|
1930
2015
|
declare const List: react.ForwardRefExoticComponent<ZuzProps & Omit<Omit<react.DetailedHTMLProps<react.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> | Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">, keyof ZuzProps> & {
|
|
1931
2016
|
variant?: ValueOf<typeof Variant>;
|
|
@@ -1933,6 +2018,7 @@ declare const List: react.ForwardRefExoticComponent<ZuzProps & Omit<Omit<react.D
|
|
|
1933
2018
|
direction?: "cols" | "rows";
|
|
1934
2019
|
seperator?: react.ReactNode;
|
|
1935
2020
|
ol?: boolean;
|
|
2021
|
+
virtual?: VirtualScrollOptions;
|
|
1936
2022
|
} & react.RefAttributes<HTMLOListElement | HTMLUListElement>>;
|
|
1937
2023
|
|
|
1938
2024
|
interface MediaPlayerController {
|
|
@@ -3478,4 +3564,4 @@ declare const useToast: () => {
|
|
|
3478
3564
|
clearAll: () => void;
|
|
3479
3565
|
};
|
|
3480
3566
|
|
|
3481
|
-
export { ALERT, AVATAR, Accordion, type AccordionHandler, type AccordionProps, ActionBar, type ActionBarHandler, type ActionBarItem, type ActionBarProps, Alert, type AlertHandler, type AlertProps, type AnimationTransition, AutoComplete, type AutoCompleteProps, Avatar, type AvatarHandler, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps,
|
|
3567
|
+
export { ALERT, AVATAR, Accordion, type AccordionHandler, type AccordionProps, ActionBar, type ActionBarHandler, type ActionBarItem, type ActionBarProps, Alert, type AlertHandler, type AlertProps, type AnimationTransition, AutoComplete, type AutoCompleteProps, Avatar, type AvatarHandler, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, type BubbleAttachment, BubbleAttachmentType, BubbleMediaType, type BubbleProps, BubbleStatus, type BubbleStylePreset, Button, type ButtonHandler, type ButtonKind, type ButtonProps, ButtonState, CHART, CHECKBOX, COLORTHEME, Calendar, type CalendarProps, Carousel, type CarouselEffect, type CarouselProps, Chart, type ChartProps, Bubble as ChatBubble, type ChatDateLabelFormatter, type ChatDateLabels, ChatList, type ChatListProps, type ChatMessage, CheckBox, type CheckBoxProps, type CheckboxHandler, CodeBlock, type CodeBlockProps, ColorScheme$1 as ColorScheme, type Column, type ContextItem, ContextMenu, type ContextMenuHandler, type ContextMenuProps, type CookieConsentProps, CookiesConsent, Cover, type CoverProps, type CropHandler, CropShape, Cropper, type CropperProps, Crumb, type CrumbItem, type CrumbProps, DATATYPE, DIALOG, DIALOG_ACTION_POSITION, DRAWER_SIDE, DatePicker, Dialog, type DialogActionHandler, type DialogController, type DialogHandler, type DialogProps, Drawer, type DrawerController, type DrawerHandler, type DrawerProps, FILTER, FORMVALIDATION, FORMVALIDATION_STYLE, Fab, type FabProps, Fieldset, type FieldsetProps, type FilterProps, Filters, Flex, type FlexProps, Form, type FormHandler, type FormInputs, type FormProps, type FormValidation, Grid, type GridProps, Group, type GroupProps, Icon, type IconProps, Image, type ImageProps, Input, type InputProps, type KeyCombination, type KeyboardKey, type KeyboardKeyProps, KeyBoardKeys as KeyboardKeys, KeysLabelMap, KeysMap, Label, type LabelProps, type LayerHandler, LayersProvider, List, type ListItem, type ListItemObject, type ListProps, type LoopMode, MediaPlayer, type MediaPlayerContextType, type MediaPlayerController, type MediaPlayerIcons, type MediaPlayerProps, type MenuItemProps, type MorphOptions, type NetworkManagerprops, NetworkManager as NetworkStatus, ORIGIN, type Option, type OptionItemProps, OriginType, Overlay, type OverlayProps, PACKAGE_NAME, PLACEMENTS, POSITION, PROGRESS, Pagination, type PaginationCallback, type PaginationController, type PaginationPage, type PaginationPageItem, type PaginationProps, PaginationStyle, Password, type PasswordProps, PinInput, type PinInputProps, type Placement, Position, ProgressBar, type ProgressBarProps, type ProgressHandler, type Props, RADIO, Radio, type RadioHandler, type RadioProps, type Row, type RowSelectCallback, SHEET, SHEET_ACTION_POSITION, SKELETON, SLIDER, SORT, SPINNER, ScrollView, type ScrollViewProps, Search, type SearchHandler, type SearchProps, type Segment, type SegmentController, type SegmentItemProps, type SegmentProps, Select, type SelectEditableChange, type SelectEditableProps, type SelectHandler, type SelectInternalProps, type SelectMultipleChange, type SelectMultipleProps, type SelectPrimitive, type SelectProps, type SelectSingleChange, type SelectSingleProps, type SelectSingleValue, Segmented as SelectTabs, type SelectTokenizerProps, type SelectValue, Sheet, type SheetHandler, type SheetProps, type Skeleton, Slider, type SliderController, type SliderProps, type ToastAction as SnackAction, type SnackController, ToastPosition as SnackPosition, ToastStyle as SnackStyle, ToastType as SnackType, Span, type SpanProps, Spinner, type SpinnerProps, Status, Switch, type CheckboxHandler as SwitchHandler, TRANSITIONS, TRANSITION_CURVES, type Tab, type TabBodyProps, type TabProps, TabView, type TabViewHandler, type TabViewProps, ForwardedTable as Table, type TableController, type TableOfContentItem, TableOfContents, type TableOfContentsProps, type TableProps, type TableSortCallback, Terminal, type TerminalCommandFn, type TerminalCommands, type TerminalHandler, type TerminalLine, type TerminalProps, Text, type TextAreaProps, TextWheel, type TextWheelHandler, type TextWheelProps, TextArea as Textarea, ThemeProvider, type ToastAction, ToastDefaultTitle, ToastPosition, type ToastProps, Toast as ToastProvider, ToastStyle, ToastType, ToolTip, type ToolTipController, type ToolTipProps, type TreeItemHandler, type TreeItemProps, type TreeNode, type TreeNodeIcons, TreeView, type TreeViewHandler, type TreeViewProps, type ValidationResult, type ValidationSchema, type Value, type ValueOf, Variant, type VirtualScrollOptions, type WithFormValidation, type ZuzCommonValues, type ZuzProps, type ZuzStyleString, VERSION as __ZUZJS_UI_VERSION, type animationProps, animationTransition, buildClassString, buildWithStyles, cleanProps, css, type cssShortKey, type cssShortKeys, type dynamic, getAnimationCurve, getAnimationTransition, getZuzMap, isKeyCombination, type parallaxEffectProps, setZuzMap, splitAtoms, useBase, useContextMenu, useDialog, useDrawer, useFx, useMorph, usePosition, useSnack, useToast };
|