solace-ui-components 16.1.0

package/dist/components/form/SolaceStepper/SolaceStepper.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SolaceStepperProps } from "../../../types";
+/**
+ * SolaceStepper component.
+ * Renders a stepper component with customizable steps and content.
+ *
+ * @param {SolaceStepperProps} props - The component props.
+ * @returns {JSX.Element} The SolaceStepper component.
+ */
+export default function SolaceStepper(props: SolaceStepperProps): JSX.Element;

package/dist/components/form/SolaceStepper/SolaceStepperFooter.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SolaceStepperFooterProps } from "../../../types";
+export default function SolaceStepperFooter(props: SolaceStepperFooterProps): JSX.Element;

package/dist/components/form/SolaceTextArea.d.ts

@@ -0,0 +1,108 @@
+import React from "react";
+import SolaceComponentProps from "../SolaceComponentProps";
+export interface SolaceTextAreaChangeEvent {
+    name: string;
+    value: string;
+}
+export interface SolaceTextAreaProps extends SolaceComponentProps {
+    /**
+     * Unique identifier ... if `id` is not specified, `name` value will be used in order to make `label` and `helperText` accessible for screen readers
+     */
+    id?: string;
+    /**
+     * Name attribute to assign to the `input` element
+     */
+    name: string;
+    /**
+     * the label content to display on the screen
+     */
+    label?: string | JSX.Element;
+    /**
+     * The value of the `input` element, required for controlled component
+     */
+    value?: string;
+    /**
+     * Content to display as supportive/explanitory text
+     */
+    helperText?: string | JSX.Element;
+    /**
+     * Short hint displayed in the `input` before user enters a value
+     */
+    placeholder?: string;
+    /**
+     * The maximum number of characters which can be typed as the `input` value
+     */
+    maxLength?: number;
+    /**
+     * The minimum numbers of rows the text area can shrink to
+     */
+    minRows?: number;
+    /**
+     * The maximum number of rows the text area can expand to (overflow scrollbar will render if necessary)
+     */
+    maxRows?: number;
+    /**
+     * The text to display as the tooltip hint
+     */
+    title?: string;
+    /**
+     * Boolean flag to control whether the `input` element is focused during first mount
+     */
+    autoFocus?: boolean;
+    /**
+     * Boolean flag to mark the `input` in error state
+     */
+    hasErrors?: boolean;
+    /**
+     * Boolean flag used to display an indicator of whether or not this `input` is mandatory
+     */
+    required?: boolean;
+    /**
+     * Boolean flag to control whether to stack the label on top of the `input` element (false) or place them inline to one another (true)
+     */
+    inlineLabel?: boolean;
+    /**
+     * Boolean flag to disable the `input`
+     */
+    disabled?: boolean;
+    /**
+     * Boolean flag to set the `input` in a read-only state
+     */
+    readOnly?: boolean;
+    /**
+     * Callback function to trigger whenever the value of the `input` is changed
+     */
+    onChange?: (event: SolaceTextAreaChangeEvent) => void;
+    /**
+     * Callback function to trigger whenever the element of the `input` loses focus
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function to trigger whenever the element of the `input` receives key down event
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function to trigger whenever the element of the `input` receives key up event
+     */
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function to trigger whenever the element of the `input` is focused
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Custom Width of the component.
+     */
+    width?: string;
+    /**
+     * If true, the input will take up the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * both: The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.
+     * horizontal: The element displays a mechanism for allowing the user to resize it in the horizontal direction.
+     * vertical: The element displays a mechanism for allowing the user to resize it in the vertical direction.
+     */
+    resizable?: "both" | "horizontal" | "vertical";
+}
+declare const SolaceTextArea: React.FC<SolaceTextAreaProps>;
+export default SolaceTextArea;

package/dist/components/form/SolaceTextField.d.ts

@@ -0,0 +1,126 @@
+import React from "react";
+import SolaceComponentProps from "../SolaceComponentProps";
+export interface SolaceTextFieldChangeEvent {
+    name: string;
+    value: string;
+}
+export interface SolaceTextFieldProps extends SolaceComponentProps {
+    /**
+     * Unique identifier ... if `id` is not specified, `name` value will be used in order to make `label` and `helperText` accessible for screen readers
+     */
+    id?: string;
+    /**
+     * Name attribute to assign to the `input` element
+     */
+    name: string;
+    /**
+     * the label content to display on the screen
+     */
+    label?: string | JSX.Element;
+    /**
+     * The value of the `input` element, required for controlled component
+     */
+    value?: string | number;
+    /**
+     * Content to display as supportive/explanitory text
+     */
+    helperText?: string | JSX.Element;
+    /**
+     * Short hint displayed in the `input` before user enters a value
+     */
+    placeholder?: string;
+    /**
+     * The maximum number of characters which can be typed as the `input` value
+     */
+    maxLength?: number;
+    /**
+     * The type of `input` element to render
+     */
+    type?: "text" | "number" | "password" | "email" | "url";
+    /**
+     * The size/width of the `input` measured in characters
+     */
+    size?: number;
+    /**
+     * The text to display as the tooltip hint
+     */
+    title?: string;
+    /**
+     * Boolean flag to control whether the `input` element is focused during first mount
+     */
+    autoFocus?: boolean;
+    /**
+     * Boolean flag to mark the `input` in error state
+     */
+    hasErrors?: boolean;
+    /**
+     * Boolean flag to mark the `input` in warn state
+     */
+    hasWarnings?: boolean;
+    /**
+     * Boolean flag used to display an indicator of whether or not this `input` is mandatory
+     */
+    required?: boolean;
+    /**
+     * Boolean flag to control whether to stack the label on top of the `input` element (false) or place them inline to one another (true)
+     */
+    inlineLabel?: boolean;
+    /**
+     * Allows custom icon to be set at the beginning/end of the field.
+     */
+    customIcon?: {
+        icon: React.ReactNode;
+        position: "end" | "start";
+        handleClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+    /**
+     * Boolean flag to disable the `input`
+     */
+    disabled?: boolean;
+    /**
+     * Boolean flag to set the `input` in a read-only state
+     */
+    readOnly?: boolean;
+    /**
+     * Callback function to trigger whenever the value of the `input` is changed
+     */
+    onChange?: (event: SolaceTextFieldChangeEvent) => void;
+    /**
+     * Callback function to trigger whenever the element of the `input` loses focus
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function to trigger whenever the element of the `input` receives key down event
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function to trigger whenever the element of the `input` receives key up event
+     */
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function to trigger whenever the element of the `input` is focused
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Custom Width of the component.
+     */
+    width?: string;
+    /**
+     * If true, the input will take up the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * optional prop to pass an array of icon or button at the end of textfield
+     */
+    endAdornment?: (React.ReactNode | JSX.Element)[];
+    /**
+     * minimum width of the component
+     */
+    minWidth?: string;
+    /**
+     * pass a ref to the input element.
+     */
+    inputRef?: (input: HTMLInputElement) => void;
+}
+declare function SolaceTextField({ id, name, label, value, helperText, placeholder, maxLength, type, size, title, autoFocus, hasErrors, hasWarnings, required, inlineLabel, customIcon, disabled, readOnly, onChange, onBlur, onKeyDown, onKeyUp, onFocus, dataQa, dataTags, fullWidth, width, endAdornment, minWidth, inputRef }: SolaceTextFieldProps): JSX.Element;
+export default SolaceTextField;

package/dist/components/form/SolaceToggle.d.ts

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+import SolaceComponentProps from "../SolaceComponentProps";
+export interface SolaceToggleChangeEvent {
+    name: string;
+    value: boolean;
+}
+export interface SolaceToggleProps extends SolaceComponentProps {
+    /**
+     * Unique identifier ... if `id` is not specified, `name` value will be used in order to make `label` accessible for screen readers
+     */
+    id?: string;
+    /**
+     * Name attribute to assign to the `toggle` element
+     */
+    name: string;
+    /**
+     * the label content to display on the screen
+     */
+    label?: string | JSX.Element;
+    /**
+     * The text to display as the tooltip hint
+     */
+    title?: string;
+    /**
+     * Content to display as supportive/explanitory text
+     */
+    helperText?: string | JSX.Element;
+    /**
+     * Boolean flag to show the state of toggle element
+     */
+    stateText?: boolean;
+    /**
+     * Boolean flag to mark the `input` in error state
+     */
+    hasErrors?: boolean;
+    /**
+     * Boolean flag to check or uncheck the `toggle`
+     */
+    isOn?: boolean;
+    /**
+     * Boolean flag used to display an indicator of whether or not this `toggle` is mandatory
+     */
+    required?: boolean;
+    /**
+     * Boolean flag to disable the `toggle`
+     */
+    disabled?: boolean;
+    /**
+     * Display the label with a larger font
+     */
+    largeLabel?: boolean;
+    /**
+     * Callback function to trigger whenever the value of the `toggle` is changed
+     */
+    onChange?: (event: SolaceToggleChangeEvent) => void;
+}
+declare function SolaceToggle({ id, name, label, title, helperText, hasErrors, isOn, required, disabled, largeLabel, stateText, onChange, dataQa, dataTags }: SolaceToggleProps): JSX.Element;
+export default SolaceToggle;

package/dist/components/form/SolaceToggleButtonGroup.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import SolaceComponentProps from "../SolaceComponentProps";
+export interface SolaceToggleButtonGroupProps extends SolaceComponentProps {
+    options: SolaceToggleButtonGroupOptionProps[];
+    onChange: (event: React.MouseEvent<HTMLElement, MouseEvent>, value: string) => void;
+    activeValue?: string;
+    isDisabled?: boolean;
+}
+export interface SolaceToggleButtonGroupOptionProps extends SolaceComponentProps {
+    label: string | JSX.Element;
+    value: string;
+    disabled?: boolean;
+}
+declare function SolaceToggleButtonGroup({ onChange, options, activeValue, isDisabled }: SolaceToggleButtonGroupProps): JSX.Element;
+export default SolaceToggleButtonGroup;

package/dist/components/form/WarningText.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import SolaceComponentProps from "../SolaceComponentProps";
+export interface WarningTextProps extends SolaceComponentProps {
+    children: string | JSX.Element;
+}
+declare function WarningText({ children }: WarningTextProps): JSX.Element;
+export default WarningText;

package/dist/components/jsonschemaform/SolaceJsonSchemaForm.d.ts

@@ -0,0 +1,79 @@
+import { RJSFSchema, WidgetProps } from "@rjsf/utils";
+import SolaceComponentProps from "../SolaceComponentProps";
+import { ElementType } from "react";
+import Ajv from "ajv";
+declare enum FormFieldType {
+    description = "description",
+    property = "property",
+    submitButton = "submitButton",
+    title = "title"
+}
+interface FormItem {
+    id: string;
+    schema: unknown;
+}
+interface FormOptions {
+    order?: string[];
+    isHidden?: (fieldType: FormFieldType, propertyName?: string, data?: any) => boolean;
+    shouldShowEmptyValueForSensitiveField?: (schema: RJSFSchema, props: WidgetProps) => boolean;
+    tagName?: ElementType<any> | undefined;
+}
+export interface SolaceJsonSchemaFormProps extends SolaceComponentProps {
+    formItem: FormItem;
+    /**
+     * The form data to render in the form.
+     */
+    formData?: Record<string, unknown>;
+    /**
+     * The form options to customize the form, including:
+     *
+     *  order?: string[]; // ordered property keys for display
+     *  isHidden?: () => boolean; // function to determine if field should be hidden,
+     *  shouldShowEmptyValueForSensitiveField?: (schema: RJSFSchema, props: WidgetProps) => boolean; // function to determine if empty sensitive fields should show empty value instead of sensitive field toggle in readonly mode,
+     *  tagName?: ElementType<any> | undefined; // tag name (eg. "div") to replace "form" and support embedding in other forms
+     */
+    formOptions?: FormOptions;
+    readOnly?: boolean;
+    /**
+     * Whether the form is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Can be used in trigger form validation manually
+     * e.g. formRef.current.validateForm()
+     */
+    formRef?: any;
+    /**
+     * Whether to validate the form data live
+     */
+    liveValidate?: boolean;
+    /**
+     * Callback function when the form data changes.
+     */
+    onChange?: (formData: any, formErrors: any[]) => void;
+    /**
+     * Function to transform the description widget props.
+     */
+    transformDescription?: (props: any) => any;
+    /**
+     * Function to transform the error message.
+     */
+    transformError?: (error: {
+        name: string;
+        message: string;
+    }) => any;
+    /**
+     * Function to transform the widget props.
+     */
+    transformWidget?: (props: any) => any;
+    /**
+     * Function to transform the title widget props.
+     */
+    transformTitle?: (props: any) => any;
+    /**
+     * Custom Ajv to use for the form, default to Ajv2020.
+     */
+    ajvClass?: typeof Ajv;
+}
+declare function SolaceJsonSchemaForm({ formItem, formData, formOptions, readOnly, disabled, formRef, liveValidate, onChange, transformDescription, transformError, transformWidget, transformTitle, ajvClass }: Readonly<SolaceJsonSchemaFormProps>): JSX.Element;
+export default SolaceJsonSchemaForm;

package/dist/components/jsonschemaform/jsonSchemaFormUtils.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { DescriptionFieldProps, RegistryWidgetsType, RJSFSchema, TitleFieldProps, WidgetProps } from "@rjsf/utils";
+export declare enum CustomProperty {
+    error = "x-custom-error",
+    hidden = "x-custom-hidden"
+}
+export declare const getTemplates: (transformDescriptionProps?: ((props: DescriptionFieldProps) => DescriptionFieldProps) | undefined, transformTitleProps?: ((props: TitleFieldProps) => TitleFieldProps) | undefined) => {
+    DescriptionFieldTemplate: (props: DescriptionFieldProps) => JSX.Element | null;
+    TitleFieldTemplate: (props: TitleFieldProps) => JSX.Element | null;
+};
+export declare const getWidgets: (transformWidgetProps?: ((props: WidgetProps) => WidgetProps) | undefined, shouldShowEmptyValueForSensitiveField?: ((schema: RJSFSchema, props: WidgetProps) => boolean) | undefined) => RegistryWidgetsType;

package/dist/components/layout/SolaceGrid.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SolaceGridProps } from "../../types/solaceGrid";
+/**
+ * All of the supported props related to SolaceGrid can be found at https://mui.com/api/grid/
+ * Examples on how to use this components can be found at https://mui.com/components/grid/
+ * All props provided by mui have been extended, to provide more flexibility for developers while using these layout components.
+ */
+export default function SolaceGrid(props: SolaceGridProps): JSX.Element;

package/dist/components/layout/SolaceGridList.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import SolaceComponentProps from "../SolaceComponentProps";
+export interface VirtualizeListOptions {
+    height?: number;
+    width?: string | number;
+    itemHeight?: number;
+    overscanCount?: number;
+    contentPlaceholder?: JSX.Element;
+}
+interface SolaceGridListProps<T> extends SolaceComponentProps {
+    id?: string;
+    items: T[];
+    objectIdentifier?: string;
+    indicatorVariantIdentifier?: string;
+    emphasizedIdentifier?: string;
+    headers?: string[];
+    selectedItemId?: string | number;
+    onSelection?: (item: T) => void;
+    rowMapping: (item: T, index: number) => JSX.Element[];
+    gridTemplate: string;
+    background?: string;
+    numOfGridListItemDisplayed?: number;
+    virtualizedListOption?: VirtualizeListOptions;
+}
+declare function SolaceGridList<T>({ id, items, objectIdentifier, indicatorVariantIdentifier, emphasizedIdentifier, headers, selectedItemId, onSelection, rowMapping, gridTemplate, dataQa, background, numOfGridListItemDisplayed, virtualizedListOption }: SolaceGridListProps<T>): JSX.Element;
+export default SolaceGridList;

package/dist/components/layout/SolaceGridListMultiSelect.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import SolaceComponentProps from "../SolaceComponentProps";
+import { VirtualizeListOptions } from "./SolaceGridList";
+interface SolaceGridListMultiSelectProps<T> extends SolaceComponentProps {
+    id?: string;
+    items: T[];
+    objectIdentifier?: string;
+    indicatorVariantIdentifier?: string;
+    emphasizedIdentifier?: string;
+    headers?: string[];
+    highlightedRowId?: string | number;
+    onRowHighlight?: (item: T) => void;
+    selectedRowIds?: Array<string | number>;
+    onSelection?: (item: T[]) => void;
+    rowMapping: (item: T) => JSX.Element[];
+    gridTemplate: string;
+    selectAll?: boolean;
+    selectAllLabel?: string;
+    actions?: JSX.Element[];
+    numOfGridListItemDisplayed?: number;
+    showCount?: boolean;
+    itemsType?: string;
+    virtualizedListOption?: VirtualizeListOptions;
+}
+declare function SolaceGridListMultiSelect<T>({ id, items, objectIdentifier, indicatorVariantIdentifier, emphasizedIdentifier, headers, highlightedRowId, onRowHighlight, selectedRowIds, onSelection, rowMapping, gridTemplate, selectAllLabel, selectAll, actions, dataQa, numOfGridListItemDisplayed, showCount, itemsType, virtualizedListOption }: SolaceGridListMultiSelectProps<T>): JSX.Element;
+export default SolaceGridListMultiSelect;

package/dist/components/layout/SolaceIconTabs.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export declare type SolaceIconTabsButton = {
+    /**
+     * Icon of the view
+     */
+    icon: JSX.Element;
+    /**
+     * Unique identifier of the view
+     */
+    value: string;
+    /**
+     * Tooltip of the view
+     */
+    tooltip: string;
+};
+export interface SolaceIconTabsProps {
+    /**
+     * Array of views (typical is 2 views but could be more)
+     */
+    views: SolaceIconTabsButton[];
+    /**
+     * The value of the active view
+     */
+    activeViewValue: string;
+    /**
+     * Callback fired when the value changes.
+     */
+    onViewClick: (value: string) => void;
+}
+export default function SolaceIconTabs({ views, activeViewValue, onViewClick }: SolaceIconTabsProps): JSX.Element;

package/dist/components/layout/SolaceList.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { solaceListProps } from "../../types";
+declare function SolaceList({ children, ...rest }: solaceListProps): JSX.Element;
+export default SolaceList;

package/dist/components/layout/SolaceListItem.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { solaceListItemProps } from "../../types";
+declare function SolaceListItem({ children, ...rest }: solaceListItemProps): JSX.Element;
+export default SolaceListItem;

package/dist/components/layout/SolaceListItemButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { solaceListItemButtonProps } from "../../types";
+declare function SolaceListItemButton({ children, ...rest }: solaceListItemButtonProps): JSX.Element;
+export default SolaceListItemButton;

package/dist/components/layout/SolacePageHeader.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import SolaceComponentProps from "../SolaceComponentProps";
+import { SolacePath } from "../SolaceBreadcrumb";
+import { TitleLocation } from "@src/types/solacePageHeader";
+export interface SolacePageHeaderProps extends SolaceComponentProps {
+    /**
+     * Optional id to be used
+     */
+    id?: string;
+    /**
+     * The header's title to display
+     */
+    title: string;
+    /**
+     * The sub-title to display next to the title (when used, a
+     * column ":" will show up after the title automagically)
+     */
+    subTitle?: string;
+    /**
+     * The release string (e.g. "BETA")
+     */
+    release?: string;
+    /**
+     * The environment's chip (#SolaceEnvironmentChip) or (#SolaceEnvironmentSelectChip)
+     */
+    environment?: JSX.Element;
+    /**
+     * The header's top border color (should match the bgColor used with #SolaceEnvironmentChip)
+     */
+    borderTop?: string;
+    /**
+     * Breadcrumbs where the last path should be the current one. It can be a #SolaceBreadcrumb component
+     */
+    breadcrumbs?: SolacePath[] | JSX.Element;
+    /**
+     * Array of actions (like #SolaceButton) but can be pretty much anything you want
+     */
+    actions?: JSX.Element[];
+    /**
+     * The action menu (usually with a "..." icon) that will appear on 2nd row at the far end
+     */
+    actionMenu?: JSX.Element;
+    /**
+     * The tabs (#SolaceTabs) to be displayed next to the title/sub-title
+     */
+    tabs?: JSX.Element;
+    /**
+     * The icon tabs (#SolaceIconTabs) to be displayed before the title/sub-title
+     */
+    iconTabs?: JSX.Element;
+    /**
+     * Used to add a "Return to X" link in front of the breadcrumbs (NOTE: this property may go away in the future)
+     */
+    returnTo?: JSX.Element;
+    /**
+     * Used to determine the location of the title. Options: TOP_OF_TABS, LEFT_OF_TABS
+     */
+    titleLocation?: TitleLocation;
+}
+export default function SolacePageHeader({ id, title, subTitle, release, environment, borderTop, breadcrumbs, actions, actionMenu, tabs, iconTabs, returnTo, dataQa, dataTags, titleLocation }: SolacePageHeaderProps): JSX.Element;

package/dist/components/layout/SolaceSidePanelLayout.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+export declare enum PANEL_POSITION {
+    LEFT = "left",
+    RIGHT = "right"
+}
+interface BaseSolaceSidePanelLayoutProps {
+    /**
+     * The content you want to show/hide in the side panel
+     */
+    sidePanelContent?: JSX.Element;
+    /**
+     * Flag signifying if the side panel is expanded or collapsed
+     */
+    showSidePanel: boolean;
+    /**
+     * The desired width of the side panel
+     */
+    sidePanelWidth?: number | string;
+    /**
+     * property to control which side of the main content the side panel is rendered on
+     */
+    sidePanelPosition?: PANEL_POSITION;
+    /**
+     * Optional flag to have side panel (drawer) float over main content. default is set to false (shifting the main content)
+     */
+    overlayContent?: boolean;
+    /**
+     * Optional title to display in the side panel banner
+     */
+    sidePanelTitle?: string;
+    /**
+     * Optional flag to control whether to show standard padding in the side panel content area
+     */
+    showStandardPadding?: boolean;
+    /**
+     * The main content that is render on the screen regardless if the side panel is
+     * expanded or collapsed. As the side panel expands, the main content area shall be
+     * responsive and shink to accomodate it's size
+     */
+    children: JSX.Element;
+}
+interface WithClosingButton extends BaseSolaceSidePanelLayoutProps {
+    /**
+     * Flag to show a close button in the side panel
+     */
+    showClosingButton: true;
+    /**
+     * Callback function invoked when the close button is clicked (required when showClosingButton is true)
+     */
+    onPanelClose: () => void;
+}
+interface WithoutClosingButton extends BaseSolaceSidePanelLayoutProps {
+    /**
+     * Flag to show a close button in the side panel
+     */
+    showClosingButton?: false;
+    /**
+     * Callback function invoked when the close button is clicked
+     */
+    onPanelClose?: () => void;
+}
+export declare type SolaceSidePanelLayoutProps = WithClosingButton | WithoutClosingButton;
+declare function SolaceSidePanelLayout({ children, sidePanelContent, showSidePanel, sidePanelWidth, sidePanelPosition, overlayContent, showClosingButton, onPanelClose, sidePanelTitle, showStandardPadding }: SolaceSidePanelLayoutProps): JSX.Element;
+export default SolaceSidePanelLayout;