react-better-html 1.1.115 → 1.1.117

package/dist/index.d.mts

@@ -660,6 +660,7 @@ type TableFilterData = {
 type TextColumn<DataItem> = {
     type: "text";
     keyName?: keyof DataItem;
+    getTextProps?: ((item: DataItem, index: number) => TextProps) | TextProps;
     format?: (item: DataItem, index: number) => string;
 };
 type ElementColumn<DataItem> = {
@@ -668,13 +669,16 @@ type ElementColumn<DataItem> = {
 };
 type ImageColumn<DataItem> = {
     type: "image";
-    keyName?: keyof DataItem;
-    getImageSrc?: (item: DataItem, index: number) => string;
-    imageProps?: ImageProps;
+    getImageProps?: ((item: DataItem, index: number) => ImageProps) | ImageProps;
 };
-type CheckboxColumn = {
+type CheckboxColumn<DataItem> = {
     type: "checkbox";
-    toggleInputProps?: ToggleInputProps<boolean>;
+    getToggleInputProps?: ((item: DataItem, index: number) => ToggleInputProps<DataItem>) | ToggleInputProps<DataItem>;
+};
+type ExpandColumn<DataItem> = {
+    type: "expand";
+    onlyOneExpanded?: boolean;
+    render?: (item: DataItem, index: number) => ReactNode;
 };
 type NumberFilter<DataItem> = {
     filter?: "number";
@@ -696,7 +700,7 @@ type TableColumn<DataItem> = {
     minWidth?: string | number;
     maxWidth?: string | number;
     align?: "left" | "center" | "right";
-} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
+} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn<DataItem> | ExpandColumn<DataItem>) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
 type TableProps<DataItem> = {
     columns: TableColumn<DataItem>[];
     data: DataItem[];
@@ -727,6 +731,57 @@ type TableComponentType = {
 declare const TableComponent: TableComponentType;
 declare const Table: typeof TableComponent;
 
+type TooltipPosition = "top" | "bottom" | "left" | "right";
+type TooltipAlign = "left" | "center" | "right" | "top" | "bottom";
+type TooltipProps = {
+    /** @default "bottom" */
+    position?: TooltipPosition;
+    /** @default "hover" */
+    trigger?: "hover" | "click";
+    /** @default "center" */
+    align?: TooltipAlign;
+    content: React.ReactNode;
+    contentWidth?: React.CSSProperties["width"];
+    contentMinWidth?: React.CSSProperties["minWidth"];
+    withArrow?: boolean;
+    isSmall?: boolean;
+    backgroundColor?: string;
+    asContextMenu?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    children: React.ReactNode;
+};
+type TooltipRef = {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+};
+type TooltipComponent = {
+    (props: ComponentPropWithRef<TooltipRef, TooltipProps>): React.ReactElement;
+    item: <Value>(props: ComponentPropWithRef<HTMLDivElement, TooltipItemProps<Value>>) => React.ReactElement;
+    divider: (props: ComponentPropWithRef<HTMLDivElement, HorizontalDividerProps>) => React.ReactElement;
+    sectionTitle: (props: ComponentPropWithRef<HTMLParagraphElement, TooltipSectionTitleProps>) => React.ReactElement;
+};
+declare const TooltipComponent: TooltipComponent;
+type TooltipItemProps<Value = unknown> = {
+    icon?: IconName | AnyOtherString;
+    text?: string;
+    description?: string;
+    isActive?: boolean;
+    value?: Value;
+    id?: string;
+    onClick?: () => void;
+    onClickWithValue?: (value: Value) => void;
+};
+type TooltipSectionTitleProps = OmitProps<TextProps, "children"> & {
+    text?: string;
+};
+declare const Tooltip: typeof TooltipComponent & {
+    item: typeof TooltipComponent.item;
+    divider: typeof TooltipComponent.divider;
+    sectionTitle: typeof TooltipComponent.sectionTitle;
+};
+
 type TabGroup = {
     name: string;
     selectedTab: string;
@@ -865,4 +920,4 @@ declare const isMobileDevice: boolean;
 
 declare const reactRouterDomPlugin: BetterHtmlPlugin;
 
-export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, colorThemeControls, countries, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, colorThemeControls, countries, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.d.ts

@@ -660,6 +660,7 @@ type TableFilterData = {
 type TextColumn<DataItem> = {
     type: "text";
     keyName?: keyof DataItem;
+    getTextProps?: ((item: DataItem, index: number) => TextProps) | TextProps;
     format?: (item: DataItem, index: number) => string;
 };
 type ElementColumn<DataItem> = {
@@ -668,13 +669,16 @@ type ElementColumn<DataItem> = {
 };
 type ImageColumn<DataItem> = {
     type: "image";
-    keyName?: keyof DataItem;
-    getImageSrc?: (item: DataItem, index: number) => string;
-    imageProps?: ImageProps;
+    getImageProps?: ((item: DataItem, index: number) => ImageProps) | ImageProps;
 };
-type CheckboxColumn = {
+type CheckboxColumn<DataItem> = {
     type: "checkbox";
-    toggleInputProps?: ToggleInputProps<boolean>;
+    getToggleInputProps?: ((item: DataItem, index: number) => ToggleInputProps<DataItem>) | ToggleInputProps<DataItem>;
+};
+type ExpandColumn<DataItem> = {
+    type: "expand";
+    onlyOneExpanded?: boolean;
+    render?: (item: DataItem, index: number) => ReactNode;
 };
 type NumberFilter<DataItem> = {
     filter?: "number";
@@ -696,7 +700,7 @@ type TableColumn<DataItem> = {
     minWidth?: string | number;
     maxWidth?: string | number;
     align?: "left" | "center" | "right";
-} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
+} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn<DataItem> | ExpandColumn<DataItem>) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
 type TableProps<DataItem> = {
     columns: TableColumn<DataItem>[];
     data: DataItem[];
@@ -727,6 +731,57 @@ type TableComponentType = {
 declare const TableComponent: TableComponentType;
 declare const Table: typeof TableComponent;
 
+type TooltipPosition = "top" | "bottom" | "left" | "right";
+type TooltipAlign = "left" | "center" | "right" | "top" | "bottom";
+type TooltipProps = {
+    /** @default "bottom" */
+    position?: TooltipPosition;
+    /** @default "hover" */
+    trigger?: "hover" | "click";
+    /** @default "center" */
+    align?: TooltipAlign;
+    content: React.ReactNode;
+    contentWidth?: React.CSSProperties["width"];
+    contentMinWidth?: React.CSSProperties["minWidth"];
+    withArrow?: boolean;
+    isSmall?: boolean;
+    backgroundColor?: string;
+    asContextMenu?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    children: React.ReactNode;
+};
+type TooltipRef = {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+};
+type TooltipComponent = {
+    (props: ComponentPropWithRef<TooltipRef, TooltipProps>): React.ReactElement;
+    item: <Value>(props: ComponentPropWithRef<HTMLDivElement, TooltipItemProps<Value>>) => React.ReactElement;
+    divider: (props: ComponentPropWithRef<HTMLDivElement, HorizontalDividerProps>) => React.ReactElement;
+    sectionTitle: (props: ComponentPropWithRef<HTMLParagraphElement, TooltipSectionTitleProps>) => React.ReactElement;
+};
+declare const TooltipComponent: TooltipComponent;
+type TooltipItemProps<Value = unknown> = {
+    icon?: IconName | AnyOtherString;
+    text?: string;
+    description?: string;
+    isActive?: boolean;
+    value?: Value;
+    id?: string;
+    onClick?: () => void;
+    onClickWithValue?: (value: Value) => void;
+};
+type TooltipSectionTitleProps = OmitProps<TextProps, "children"> & {
+    text?: string;
+};
+declare const Tooltip: typeof TooltipComponent & {
+    item: typeof TooltipComponent.item;
+    divider: typeof TooltipComponent.divider;
+    sectionTitle: typeof TooltipComponent.sectionTitle;
+};
+
 type TabGroup = {
     name: string;
     selectedTab: string;
@@ -865,4 +920,4 @@ declare const isMobileDevice: boolean;
 
 declare const reactRouterDomPlugin: BetterHtmlPlugin;
 
-export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, colorThemeControls, countries, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, colorThemeControls, countries, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };