@react-form-builder/components-rsuite 7.1.0 → 7.3.0

package/dist/index.d.ts

@@ -1,14 +1,63 @@
+import type { AutoCompleteProps } from 'rsuite';
+import type { BreadcrumbProps } from 'rsuite';
 import { BuilderView } from '@react-form-builder/core';
+import type { ButtonProps } from 'rsuite';
+import type { CalendarProps } from 'rsuite/esm/Calendar/Calendar';
+import type { CheckboxProps } from 'rsuite';
+import { ClassAttributes } from 'react';
+import type { ComponentProps } from 'react';
+import type { CSSProperties } from 'react';
+import type { DatePickerProps } from 'rsuite';
 import { Definer } from '@react-form-builder/core';
+import { DividerProps } from 'rsuite';
+import { ElementType } from 'react';
 import { ErrorWrapperProps } from '@react-form-builder/core';
 import type { FormViewerWrapperComponentProps } from '@react-form-builder/core';
+import { HTMLAttributes } from 'react';
+import type { InputPickerProps } from 'rsuite';
+import type { InputProps } from 'rsuite';
+import type { ItemDataType } from 'rsuite/esm/internals/types';
 import { JSX } from '@emotion/react/jsx-runtime';
+import { JSX as JSX_2 } from 'react';
+import { LabeledValue } from '@react-form-builder/core';
+import { MessageProps } from 'rsuite';
+import type { ModalProps } from 'rsuite';
 import { Model } from '@react-form-builder/core';
+import type { NavProps } from 'rsuite';
+import type { NumericFormatProps } from 'react-number-format';
+import { Omit as Omit_2 } from 'rsuite/esm/internals/types/utils';
 import type { OverlayTriggerType } from 'rsuite/esm/internals/Overlay/OverlayTrigger';
+import type { PanelProps } from 'rsuite';
+import type { PatternFormatProps } from 'react-number-format';
+import { PlaceholderGraphProps } from 'rsuite';
+import { PlaceholderGridProps } from 'rsuite';
+import { PlaceholderParagraphProps } from 'rsuite';
+import { ProgressCircleProps } from 'rsuite';
+import { ProgressLineProps } from 'rsuite';
+import { PropsWithChildren } from 'react';
+import type { RadioGroupProps } from 'rsuite';
+import { ReactNode } from 'react';
+import { ReplaceProps } from 'rsuite/esm/internals/types/utils';
+import type { SyntheticEvent } from 'react';
+import type { TagPickerProps } from 'rsuite';
+import { Theme } from '@emotion/react';
+import { ToggleProps } from 'rsuite';
 import type { TypeAttributes } from 'rsuite/esm/internals/types';
+import type { UploaderProps } from 'rsuite';
 import { View } from '@react-form-builder/core';
+import { WithAsProps } from 'rsuite/esm/internals/types';
 import { WrapperProps } from '@react-form-builder/core';
 
+/**
+ * Common CSS block properties.
+ */
+declare interface AreaProps {
+    /**
+     * The background color.
+     */
+    backgroundColor?: string;
+}
+
 /**
  * An assembled set of rSuite components metadata, ready to be passed as a property to the FormBuilder.
  * This view contains CSS loaders.
@@ -21,17 +70,222 @@ export declare const builderViewWithCss: BuilderView;
  */
 export declare const formEngineRsuiteCssLoader: () => Promise<void>;
 
+/**
+ * The callback function for loading data into the component.
+ * @param newData the new data to be loaded into the component.
+ */
+export declare type LoadCallback = (newData: ItemDataType[]) => void;
+
+/**
+ * Describes a function that is called when data is to be loaded into the component.
+ * @param searchKeyword the current search value.
+ * @param loadCallback the callback function called to set the data in the component.
+ * @param currentDataLength the length of the data already loaded.
+ */
+export declare type LoadDataHandler = (searchKeyword: string, loadCallback: LoadCallback, currentDataLength: number) => {};
+
+/**
+ * Interface for load data props.
+ */
+declare interface LoadDataProps {
+    /**
+     * The callback function called when data should be load.
+     */
+    onLoadData?: LoadDataHandler;
+    /**
+     * Flag, if true, the data will be loaded in advance, before opening the dropdown, false otherwise.
+     */
+    preload?: boolean;
+    /**
+     * Flag, if true, the virtualized will be disabled, false otherwise.
+     */
+    disableVirtualized?: boolean;
+}
+
 /**
  * Loads the Left-To-Right (LTR) CSS for the "rsuite" library.
  * @returns the Promise that resolves when the LTR CSS has been loaded successfully.
  */
 export declare const ltrCssLoader: () => Promise<void>;
 
+/**
+ * Menu item for RsMenu component.
+ */
+export declare type MenuItem = {
+    /**
+     * The href for the menu item.
+     */
+    href?: string;
+    /**
+     * The title for the menu item.
+     */
+    title?: string;
+};
+
 /**
  * An array of rSuite component metadata for use in FormViewer.
  */
 export declare const models: Model<any>[];
 
+export declare const rsAutoComplete: Definer<RsAutoCompleteProps>;
+
+/**
+ * The properties of the RsAutoComplete component.
+ */
+export declare interface RsAutoCompleteProps extends AutoCompleteProps {
+    /**
+     * The component label.
+     */
+    label?: string;
+    /**
+     * The component class name.
+     */
+    className?: string;
+    /**
+     * The component styles.
+     */
+    style?: CSSProperties;
+    /**
+     * Called after the value has been changed.
+     * @param value the value.
+     */
+    onChange?: (value: string) => void;
+}
+
+export declare const rsBreadcrumb: Definer<RsBreadcrumbProps>;
+
+/**
+ * Props for a single breadcrumb item.
+ */
+export declare interface RsBreadcrumbItemProps {
+    /**
+     * Whether the breadcrumb item is active.
+     */
+    active?: boolean;
+    /**
+     * URL for the breadcrumb item.
+     */
+    href?: string;
+    /**
+     * Title text for the breadcrumb item.
+     */
+    title?: string;
+}
+
+/**
+ * Props for the RsBreadcrumb component.
+ */
+export declare interface RsBreadcrumbProps extends BreadcrumbProps {
+    /**
+     * Array of breadcrumb items to display.
+     */
+    items: RsBreadcrumbItemProps[];
+    /**
+     * Callback function when a breadcrumb item is clicked.
+     */
+    onItemClick: (item: RsBreadcrumbItemProps) => {};
+}
+
+export declare const rsButton: Definer<ButtonProps>;
+
+export declare const rsCalendar: Definer<RsCalendarProps>;
+
+/**
+ * Props for the RsCalendar component.
+ */
+export declare interface RsCalendarProps extends CalendarProps {
+    /**
+     * Whether the calendar is read only.
+     */
+    readOnly: boolean;
+    /**
+     *  Label for the calendar.
+     */
+    label?: string;
+}
+
+export declare const rsCard: Definer<RsCardProps>;
+
+/**
+ * Props for the RsCard component.
+ */
+export declare interface RsCardProps extends PanelProps {
+    /**
+     * Title for the card.
+     */
+    title?: string;
+    /**
+     * Header size for the card.
+     */
+    headerSize: string;
+}
+
+export declare const rsCheckbox: Definer<CheckboxProps<any>>;
+
+export declare const rsContainer: Definer<RsContainerProps>;
+
+/**
+ * Props for the RsContainer component.
+ */
+export declare interface RsContainerProps {
+    /**
+     * Whether the container is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the container is read only.
+     */
+    readOnly?: boolean;
+    /**
+     * Children elements of the container.
+     */
+    children?: ReactNode;
+}
+
+export declare const rsDatePicker: Definer<RsDatePickerProps>;
+
+/**
+ * Props for the RsDatePicker component.
+ */
+export declare interface RsDatePickerProps extends DatePickerProps {
+    /**
+     * Label for the date picker.
+     */
+    label: string;
+    /**
+     * Called after the value has been changed.
+     * @param value the value.
+     */
+    onChange?: (value: Date | null) => void;
+    /**
+     * @deprecated
+     */
+    inline?: boolean;
+}
+
+export declare const rsDivider: Definer<PropsWithChildren<ReplaceProps<ElementType<any, keyof JSX_2.IntrinsicElements>, WithAsProps<ElementType<any, keyof JSX_2.IntrinsicElements>> & DividerProps>>>;
+
+export declare const rsDropdown: Definer<RsDropdownProps>;
+
+/**
+ * Props for the RsDropdown component.
+ */
+export declare interface RsDropdownProps extends InputPickerProps, LoadDataProps {
+    /**
+     * The label for the dropdown.
+     */
+    label: string;
+    /**
+     * The htmlSize attribute defines the width of the &laquo;input> element.
+     */
+    htmlSize?: number;
+    /**
+     * Called after the value has been changed.
+     * @param value the value.
+     */
+    onChange?: (value: any) => void;
+}
+
 /**
  * Metadata builder for rSuite-based error display component.
  */
@@ -47,6 +301,90 @@ export declare interface RsErrorMessageProps extends ErrorWrapperProps {
     placement?: TypeAttributes.Placement8;
 }
 
+export declare const rsHeader: Definer<RsHeaderProps>;
+
+/**
+ * Props for the RsHeader component.
+ */
+export declare interface RsHeaderProps extends TextProps {
+    /**
+     * The content of the header.
+     */
+    content?: string;
+    /**
+     * The size of the header.
+     */
+    headerSize: string;
+}
+
+export declare const rsImage: Definer<RsImageProps>;
+
+/**
+ * Props for the RsImage component.
+ */
+export declare interface RsImageProps extends ComponentProps<'img'>, AreaProps {
+}
+
+export declare const rsInput: Definer<RsInputProps>;
+
+/**
+ * Props for the RsInput component.
+ */
+export declare interface RsInputProps extends InputProps {
+    /**
+     * The label for the input.
+     */
+    label: string;
+    /**
+     * Whether to show password mask.
+     */
+    passwordMask?: boolean;
+    /**
+     * The aria label for the show password button.
+     */
+    showPasswordAriaLabel: string;
+    /**
+     * The type of the input.
+     */
+    type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'time';
+    /**
+     * The htmlSize attribute defines the width of the &laquo;input> element.
+     */
+    htmlSize?: number;
+}
+
+export declare const rsLabel: Definer<RsLabelProps>;
+
+/**
+ * Props for the RsLabel component.
+ */
+export declare interface RsLabelProps extends TextProps {
+    /**
+     * The label text content.
+     */
+    text: string;
+}
+
+export declare const rsLink: Definer<RsLinkProps>;
+
+/**
+ * Props for the RsLink component.
+ */
+export declare interface RsLinkProps extends ComponentProps<'a'>, TextProps {
+    /**
+     * The link text content.
+     */
+    text: string;
+    /**
+     * The filename for download when download is enabled.
+     */
+    downloadFilename: string;
+    /**
+     * The content type (text or custom).
+     */
+    content: string;
+}
+
 /**
  * Wrapper component for RSuite components localization.
  * @param props the component props.
@@ -56,6 +394,269 @@ export declare interface RsErrorMessageProps extends ErrorWrapperProps {
  */
 export declare const RsLocalizationWrapper: ({ language, children }: FormViewerWrapperComponentProps) => JSX.Element;
 
+export declare const rsMenu: Definer<RsMenuProps>;
+
+/**
+ * Props for the RsMenu component.
+ */
+export declare interface RsMenuProps extends NavProps {
+    /**
+     * The items for the menu.
+     */
+    items?: MenuItem[];
+    /**
+     * The element type for menu items.
+     */
+    itemsAs: ElementType;
+}
+
+export declare const rsMessage: Definer<Omit_2<any, WithAsProps<ElementType<any, keyof JSX_2.IntrinsicElements>> & MessageProps> & WithAsProps<ElementType<any, keyof JSX_2.IntrinsicElements>> & MessageProps & {
+    children?: ReactNode;
+} & {
+    theme?: Theme | undefined;
+}>;
+
+export declare const rsModal: Definer<RsModalProps>;
+
+export declare const rsModalLayout: Definer<RsModalLayoutProps>;
+
+/**
+ * Props for the RsModalLayout component.
+ */
+export declare interface RsModalLayoutProps {
+    /**
+     * Whether to show the close button.
+     */
+    closeButton: boolean;
+    /**
+     * The title for the modal header.
+     */
+    headerTitle: ReactNode;
+    /**
+     * The content for the modal body.
+     */
+    body: ReactNode;
+    /**
+     * The content for the modal footer.
+     */
+    footer: ReactNode;
+}
+
+/**
+ * Props for the RsModal component.
+ */
+export declare interface RsModalProps extends ModalProps {
+    /**
+     * Custom close handler function.
+     */
+    handleClose?: () => void;
+}
+
+export declare const rsNumberFormat: Definer<RsNumberFormatProps>;
+
+/**
+ * Props for the RsNumberFormat component.
+ */
+export declare interface RsNumberFormatProps extends NumericFormatProps<InputProps> {
+    /**
+     * The label for the number input.
+     */
+    label: string;
+    /**
+     * The callback function called when the value changes.
+     */
+    onChange: (value: any) => void;
+    /**
+     * The htmlSize attribute defines the width of the &laquo;input> element.
+     */
+    htmlSize?: number;
+}
+
+export declare const rsPatternFormat: Definer<RsPatternFormatProps>;
+
+/**
+ * Props for the RsPatternFormat component.
+ */
+export declare interface RsPatternFormatProps extends PatternFormatProps<InputProps> {
+    /**
+     * The label for the pattern format input.
+     */
+    label: string;
+    /**
+     * The callback when value changes.
+     */
+    onChange: (value: any) => void;
+    /**
+     * The htmlSize attribute defines the width of the &laquo;input> element.
+     */
+    htmlSize?: number;
+}
+
+export declare const rsPlaceholderGraph: Definer<PropsWithChildren<ReplaceProps<ElementType<any, keyof JSX_2.IntrinsicElements>, WithAsProps<ElementType<any, keyof JSX_2.IntrinsicElements>> & PlaceholderGraphProps>>>;
+
+export declare const rsPlaceholderGrid: Definer<PropsWithChildren<ReplaceProps<ElementType<any, keyof JSX_2.IntrinsicElements>, WithAsProps<ElementType<any, keyof JSX_2.IntrinsicElements>> & PlaceholderGridProps>>>;
+
+export declare const rsPlaceholderParagraph: Definer<PropsWithChildren<ReplaceProps<ElementType<any, keyof JSX_2.IntrinsicElements>, WithAsProps<ElementType<any, keyof JSX_2.IntrinsicElements>> & PlaceholderParagraphProps>>>;
+
+export declare const rsProgressCircle: Definer<PropsWithChildren<ReplaceProps<ElementType<any, keyof JSX_2.IntrinsicElements>, WithAsProps<ElementType<any, keyof JSX_2.IntrinsicElements>> & ProgressCircleProps>>>;
+
+export declare const rsProgressLine: Definer<PropsWithChildren<ReplaceProps<ElementType<any, keyof JSX_2.IntrinsicElements>, WithAsProps<ElementType<any, keyof JSX_2.IntrinsicElements>> & ProgressLineProps>>>;
+
+export declare const rsRadioGroup: Definer<RsRadioGroupProps>;
+
+/**
+ * Props for the RsRadioGroup component.
+ */
+export declare interface RsRadioGroupProps extends RadioGroupProps<string> {
+    /**
+     * The items for the radio group.
+     */
+    items: LabeledValue[];
+    /**
+     * The label for the radio group.
+     */
+    label?: string;
+    /**
+     * Called after the value has been changed.
+     * @param value the value.
+     */
+    onChange?: (value: string) => void;
+}
+
+export declare const rsSearch: Definer<RsSearchProps>;
+
+/**
+ * Props for the RsSearch component.
+ */
+export declare interface RsSearchProps extends InputPickerProps, LoadDataProps {
+    /**
+     * The label for the search input.
+     */
+    label: string;
+    /**
+     * Called after the value has been changed.
+     * @param value the value.
+     */
+    onChange?: (value: any) => void;
+}
+
+export declare const rsStaticContent: Definer<RsStaticContentProps>;
+
+/**
+ * Props for the RsStaticContent component.
+ */
+export declare interface RsStaticContentProps {
+    /**
+     * The content to display.
+     */
+    content: string;
+    /**
+     * Whether to allow HTML content.
+     */
+    allowHtml: boolean;
+}
+
+export declare const rsTab: Definer<RsTabProps>;
+
+/**
+ * Tab item for RsTab component.
+ */
+export declare type RsTabItem = {
+    /**
+     * Label for the tab item.
+     */
+    label: string;
+    /**
+     * Value for the tab item.
+     */
+    value: string;
+};
+
+/**
+ * Props for the RsTab component.
+ */
+export declare interface RsTabProps extends NavProps {
+    /**
+     * Items for the tab.
+     */
+    items?: RsTabItem[];
+    /**
+     * Whether to show navigation.
+     */
+    showNavigation?: boolean;
+    /**
+     * Pane content for the tab.
+     */
+    pane: ReactNode;
+}
+
+export declare const rsTagPicker: Definer<RsTagPickerProps>;
+
+/**
+ * Props for the RsTagPicker component.
+ */
+export declare interface RsTagPickerProps extends TagPickerProps {
+    /**
+     * Label for the tag picker.
+     */
+    label: string;
+    /**
+     * Called after the value has been changed.
+     * @param value the value.
+     */
+    onChange?: (value: any) => void;
+}
+
+export declare const rsTextArea: Definer<RsTextAreaProps>;
+
+/**
+ * Props for the RsTextArea component.
+ */
+export declare interface RsTextAreaProps extends InputProps {
+    /**
+     * The label for the text area.
+     */
+    label: string;
+    /**
+     * The number of visible text lines.
+     */
+    rows: number;
+    /**
+     * The htmlSize attribute defines the width of the &laquo;input> element.
+     */
+    htmlSize?: number;
+}
+
+export declare const rsTimePicker: Definer<RsTimePickerProps>;
+
+/**
+ * Props for the RsTimePicker component.
+ */
+export declare interface RsTimePickerProps extends Omit<DatePickerProps, 'value' | 'onChange'> {
+    /**
+     * Value of the time picker.
+     */
+    value?: string;
+    /**
+     * Callback when value changes.
+     */
+    onChange?: (value: string | null, event: SyntheticEvent) => void;
+    /**
+     * Label for the time picker.
+     */
+    label: string;
+    /**
+     * @deprecated
+     */
+    inline?: boolean;
+}
+
+export declare const rsToggle: Definer<Omit_2<any, WithAsProps<ElementType<any, keyof JSX_2.IntrinsicElements>> & ToggleProps> & WithAsProps<ElementType<any, keyof JSX_2.IntrinsicElements>> & ToggleProps & {
+    children?: ReactNode;
+} & {
+    theme?: Theme | undefined;
+}>;
+
 /**
  * Metadata builder for rSuite-based tooltip display component.
  */
@@ -84,12 +685,129 @@ export declare interface RsTooltipProps extends WrapperProps {
  */
 export declare const rSuiteComponents: Definer<any>[];
 
+export declare const rsUploader: Definer<RsUploaderProps>;
+
+/**
+ * Props for the RsUploader component.
+ */
+export declare interface RsUploaderProps extends UploaderProps {
+    /**
+     * Whether to use a custom element for the uploader.
+     */
+    customElement: boolean;
+    /**
+     * The label for the uploader.
+     */
+    label?: string;
+}
+
+export declare const rsWizard: Definer<RsWizardProps>;
+
+/**
+ * Props for the RsWizard component.
+ */
+export declare interface RsWizardProps extends PropsWithChildren<any> {
+    /**
+     * Whether to show steps.
+     */
+    showSteps?: boolean;
+    /**
+     * Whether to show step labels.
+     */
+    showStepsLabels?: boolean;
+    /**
+     * Whether steps are vertical.
+     */
+    verticalSteps?: boolean;
+    /**
+     * Navigation mode for steps.
+     */
+    stepsNavigation?: 'disable' | 'onlyVisited' | 'any';
+    /**
+     * Active step index.
+     */
+    activeIndex?: number;
+    /**
+     * Label for previous button.
+     */
+    prevButtonLabel?: string;
+    /**
+     * Label for next button.
+     */
+    nextButtonLabel?: string;
+    /**
+     * Label for finish button.
+     */
+    finishButtonLabel?: string;
+    /**
+     * Whether to validate on next.
+     */
+    validateOnNext: boolean;
+    /**
+     * Whether to validate on finish.
+     */
+    validateOnFinish: boolean;
+    /**
+     * Callback when step changes.
+     */
+    onChange?: (activeIndex?: number) => void;
+    /**
+     * Callback when next button is clicked.
+     */
+    onNext?: () => void;
+    /**
+     * Callback when previous button is clicked.
+     */
+    onPrev?: () => void;
+    /**
+     * Callback when finish button is clicked.
+     */
+    onFinish?: () => void;
+}
+
+export declare const rsWizardStep: Definer<{
+    theme?: Theme | undefined;
+    as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
+} & RsWizardStepProps & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the RsWizardStep component.
+ */
+export declare interface RsWizardStepProps {
+    /**
+     * Label for the wizard step.
+     */
+    label?: string;
+}
+
 /**
  * Loads the Right-to-Left (RTL) CSS for the "rsuite" library.
  * @returns the Promise that resolves when the RTL CSS has been loaded successfully.
  */
 export declare const rtlCssLoader: () => Promise<void>;
 
+/**
+ * Common CSS text properties.
+ */
+declare interface TextProps extends AreaProps {
+    /**
+     * The text alignment.
+     */
+    alignment?: string;
+    /**
+     * The font size.
+     */
+    fontSize?: number;
+    /**
+     * The font weight.
+     */
+    fontWeight?: string;
+    /**
+     * The color.
+     */
+    color?: string;
+}
+
 /**
  * An assembled set of rSuite components, ready to be passed as a property to the FormViewer.
  */