solace-ui-components 16.1.0

package/dist/components/SolaceHTMLAttributesProps.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default interface SolaceHTMLAttributeProps extends React.HTMLAttributes<HTMLDivElement> {
+    "data-qa"?: string;
+}

package/dist/components/SolaceLearningBanner.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import SolaceComponentProps from "./SolaceComponentProps";
+interface SolaceLearningBannerProps extends SolaceComponentProps {
+    /**
+     * The title of the banner.
+     */
+    title?: string | JSX.Element;
+    /**
+     * The content of the banner.
+     */
+    children: JSX.Element;
+    /**
+     * Boolean flag to control whether to show a close button in the end of the banner
+     */
+    showCloseButton?: boolean;
+    /**
+     * Callback function after the banner is closed
+     */
+    onClose?: () => void;
+    /**
+     * Background color of the banner
+     */
+    backgroundColor?: string;
+}
+declare function SolaceLearningBanner({ title, children, showCloseButton, onClose, backgroundColor, dataQa, dataTags }: SolaceLearningBannerProps): JSX.Element | null;
+export default SolaceLearningBanner;

package/dist/components/SolaceLinearProgress.d.ts

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

package/dist/components/SolaceMenu.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import SolaceComponentProps from "./SolaceComponentProps";
+import { SolaceButtonProps } from "./form/SolaceButton";
+import { SolaceMenuItemProps } from "./SolaceMenuItem";
+interface SolaceMenuProps extends SolaceComponentProps {
+    id?: string;
+    /**
+     * Attributes to customize menu button
+     */
+    buttonProps: SolaceButtonProps;
+    /**
+     * An array of options when using default menu
+     */
+    items?: SolaceMenuItemProps[];
+    /**
+     * Header of menu when using default menu
+     */
+    header?: string;
+    /**
+     * optional attribute to change the position of menu popper only for default menu
+     */
+    anchorOrigin?: {
+        vertical: "top" | "center" | "bottom";
+        horizontal: "left" | "center" | "right";
+    };
+    /**
+     * optional attribute to change the position of menu popper only for default menu
+     */
+    transformOrigin?: {
+        vertical: "top" | "center" | "bottom";
+        horizontal: "left" | "center" | "right";
+    };
+    /**
+     * optional boolean flag to adjust the maxHeight of menu default is set to false
+     */
+    multiline?: boolean;
+    /**
+     * optional attribute to propagate menu button click event to parent
+     */
+    propagateMenuClick?: boolean;
+    /**
+     * Optional flag to close the menu on menuItemClick, the default is set to true.
+     */
+    closeOnSelect?: boolean;
+    /**
+     * The callback function runs when the user clicks on a menu item
+     */
+    onMenuItemClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /**
+     * optional flag to specify the number of menu items to be displayed, the number is currently default to 9.
+     * Note: the total number of items exceeding this number will make the list scrollable with fade style applied based on the scroll positions.
+     */
+    numOfMenuItemDisplayed?: number;
+    /**
+     * Optional attribute to define the maximum width of menu popper
+     */
+    maxWidth?: number;
+}
+export default function SolaceMenu(props: SolaceMenuProps): JSX.Element;
+export {};

package/dist/components/SolaceMenuItem.d.ts

@@ -0,0 +1,78 @@
+import React from "react";
+import SolaceComponentProps from "./SolaceComponentProps";
+export interface SolaceMenuItemProps extends SolaceComponentProps {
+    id?: string;
+    /**
+     * Name attribute to show as menu item label for default menuItems,for custom menu items JSX.Element type is passed.
+     */
+    name: string | JSX.Element;
+    /**
+     * Content to display as supportive/explanitory text
+     */
+    subText?: string;
+    /**
+     * Content to display as supportive/explanitory text
+     */
+    supplementalText?: string;
+    /**
+     * Adds an Icon to left handside of the menu item label for Supporting visuals and helping differentiate between menu options
+     */
+    icon?: JSX.Element | HTMLElement;
+    /**
+     * Adds a secondary action (ex. more info icon button) to the right end of menu item
+     */
+    secondaryAction?: JSX.Element | HTMLElement;
+    /**
+     * The callback function runs when the user clicks on a menu item
+     */
+    onMenuItemClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /**
+     * callback function on menu close action
+     */
+    onMenuClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /**
+     * Adds a divider to the bottom of menuItem
+     */
+    divider?: boolean;
+    /**
+     * Boolean flag to disable the menuItem
+     */
+    disabled?: boolean;
+    /**
+     * Optional attribute to group Menu items and show categoryHeading
+     */
+    categoryHeading?: string;
+    /**
+     * Optional flag to close the menu on menuItemClick, the default is set to true.
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Optional flag for subMenu items
+     */
+    subMenuItems?: SolaceMenuItemProps[];
+    /**
+     * Optional flag for the height of menu items
+     */
+    itemHeight?: number;
+    /**
+     * Optional flag for identify the selected menu item
+     */
+    selected?: boolean;
+    /**
+     * Content to display in a tooltip when the menuItem is disabled
+     */
+    disabledMenuItemTooltipContent?: string;
+    /**
+     * Optional attribute to define the maximum width of submenu popper
+     */
+    subMenuMaxWidth?: number;
+    /**
+     * Optional attribute to set the initial directional preference for nested submenus.
+     * Each submenu level will attempt to open in this direction, but will flip if there's insufficient space.
+     * This ensures directional consistency across nested levels while preventing off-screen rendering.
+     * "left" or "right". If not provided, defaults to "right".
+     */
+    subMenuDirection?: "left" | "right";
+}
+declare const SolaceMenuItem: ({ id, name, subText, supplementalText, icon, secondaryAction, onMenuItemClick, onMenuClose, divider, disabled, subMenuItems, closeOnSelect, itemHeight, selected, subMenuMaxWidth, subMenuDirection, dataQa, dataTags }: SolaceMenuItemProps) => JSX.Element;
+export default SolaceMenuItem;

package/dist/components/SolaceMessageBox.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import SolaceComponentProps from "./SolaceComponentProps";
+interface SolaceInfoBoxProps extends SolaceComponentProps {
+    /**
+     * the info message to display in the info box
+     */
+    message: string | JSX.Element;
+    /**
+     * Boolean flag to control whether to show an info icon in front of the info message
+     */
+    showIcon?: boolean;
+    /**
+     * Boolean flag to control whether to show a close button in the end of the info box
+     */
+    showCloseButton?: boolean;
+    /**
+     * Callback function after the message box is closed
+     */
+    onClose?: () => void;
+    /**
+     * Variants, currently supports error, info, warn and success, default to info, can be expanded as needed
+     */
+    variant: "info" | "error" | "warn" | "success";
+    /**
+     * message text color
+     */
+    color?: string;
+    /**
+     *  If true, compact vertical padding is used
+     */
+    dense?: boolean;
+    /**
+     * To display further details about the message
+     */
+    details?: string | JSX.Element;
+}
+declare function SolaceMessageBox({ message, showIcon, showCloseButton, onClose, variant, color, dense, details, dataQa, dataTags }: SolaceInfoBoxProps): JSX.Element | null;
+export default SolaceMessageBox;

package/dist/components/SolaceNotificationCounter.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import SolaceComponentProps from "./SolaceComponentProps";
+export interface SolaceNotificationCounterProps extends SolaceComponentProps {
+    /**
+     * Text inside the badge
+     */
+    value: string | number;
+    /**
+     * Whether to show text inside the badge
+     */
+    show?: boolean;
+    /**
+     * Size of the badge
+     */
+    size?: number;
+    /**
+     * Font size of the text value
+     */
+    fontSize?: number;
+    /**
+     * Tooltip
+     */
+    title?: string;
+    /**
+     * Badge animation duration in milliseconds. If set to 0, then no animation.
+     */
+    animationDuration?: number;
+    /**
+     * The number of animation repeats when making the text visible
+     */
+    animationRepeatsInitialCount?: number;
+    /**
+     * The number of animation repeats when the text is updated
+     */
+    animationRepeatsUpdateCount?: number;
+}
+declare function SolaceNotificationCounter({ value, show, size, fontSize, title, animationDuration, animationRepeatsInitialCount, animationRepeatsUpdateCount, dataQa, dataTags }: SolaceNotificationCounterProps): JSX.Element;
+export default SolaceNotificationCounter;

package/dist/components/SolacePagination.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+export interface SolacePaginationProps {
+    /**
+     * Flag signifying if the side panel is expanded or collapsed
+     */
+    activePage?: number;
+    /**
+     * The desired width of the side panel
+     */
+    pageSize?: number;
+    /**
+     * property to control which side of the main content the side panel is rendered on
+     */
+    totalResults: number;
+    /**
+     * The string template to use for communicating pagination details. Use the following placeholders
+     * to substitute values if and where needed
+     *  - firstItemIndex: index of the first item being displayed
+     *  - lastItemIndex: index of the last item being displayed
+     *  - totalResults: total number of items that are paginated
+     *  - pageSize: the number of items currently rendered
+     *  - activePage: the currently selected page number
+     *
+     *  Ex: "Showing ${firstItemIndex}-${lastItemIndex} of ${totalResults} results" would result in:
+     *  -> Showing 1-10 of 156 results
+     */
+    displayText?: string;
+    /**
+     * Callback function to notify which page was clicked/selected by the end user
+     */
+    onPageSelection?: (selectedPage: number) => void;
+    /**
+     * loading state (renders a half transparent overlay on top of the pagination component, currently is designed to use along with table component's loading state)
+     */
+    loading?: boolean;
+}
+declare function SolacePagination({ activePage, pageSize, displayText, totalResults, loading, onPageSelection }: SolacePaginationProps): JSX.Element;
+export default SolacePagination;

package/dist/components/SolacePopover.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SolacePopoverProps } from "../types/solacePopover";
+declare const SolacePopover: {
+    (props: SolacePopoverProps): JSX.Element;
+    displayName: string;
+};
+export default SolacePopover;

package/dist/components/SolaceResponsiveItemList.d.ts

@@ -0,0 +1,80 @@
+import React from "react";
+import SolaceComponentProps from "./SolaceComponentProps";
+export interface SolaceResponsiveItem {
+    /**
+     * Uniquely identify the itme in the list
+     */
+    id: string;
+    content: JSX.Element;
+}
+export interface SolaceResponsiveItemListProps extends SolaceComponentProps {
+    /**
+     * A list of items to display in a row
+     */
+    items: SolaceResponsiveItem[];
+    /**
+     * When showAll is true, all the items will be displayed inside the container wrapped around; when it is false,
+     * show items whose total width <= container's width, display "+ N more" and show remaining items in a popover when "+ N more" is hovered.
+     * Default is true.
+     */
+    showAll?: boolean;
+    /**
+     * Spacing between items, default is 12px
+     */
+    columnGap?: number;
+    /**
+     * Space between rows, default is 8px
+     * */
+    rowGap?: number;
+    /**
+     * Width of the container of the component.
+     *
+     * If containerWidth is undefined and showAll is false, then all items will be rendered in one row which can overflow the container.
+     * The container should have resize listener configured to properly update the value if its width is changing dynamically.
+     */
+    containerWidth: number | undefined;
+    /**
+     * Which component to use to display hidden items. Default is popover.
+     */
+    componentToShowOverflowItems?: "popover" | null;
+    /**
+     * Overflow component's placement
+     */
+    overflowItemsPlacement?: "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top-start" | "top";
+    /**
+     * Overflow indicator label. Default value is "more".
+     */
+    overflowIndicatorLabel?: string;
+    /**
+     * Overflow indicator label when number of filters is 1.
+     */
+    overflowIndicatorLabelSingular?: string;
+    /**
+     * Overflow indicator label width.
+     */
+    overflowIndicatorLabelWidth?: number;
+    /**
+     * Number of rows to show before hiding items. Default is 1.
+     * */
+    numOfRowsToShow?: number;
+    /**
+     * Number of menu items to be displayed (defaulting to 9) before scrolling is applied.
+     */
+    numOfMenuItemsToDisplay?: number;
+    /**
+     * Callback to notify items rendered
+     */
+    onItemsRendered?: () => void;
+    /**
+     * Callback to notify items that are hidden
+     */
+    onItemsOverflow?: (overflowedItems: SolaceResponsiveItem[]) => void;
+    /**
+     * Callback when "+ N more" indicator is clicked. If the callback is defined and componentToShowOverflowItems is not null, then "+ N more" is a hyperlink.
+     */
+    onItemsOverflowIndicatorClick?: () => void;
+}
+declare function SolaceResponsiveItemList({ items, showAll, columnGap, rowGap, containerWidth, componentToShowOverflowItems, overflowItemsPlacement, overflowIndicatorLabel, overflowIndicatorLabelSingular, overflowIndicatorLabelWidth, numOfRowsToShow, numOfMenuItemsToDisplay, // matches menu overflow default
+onItemsRendered, onItemsOverflow, onItemsOverflowIndicatorClick, dataQa }: SolaceResponsiveItemListProps): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof SolaceResponsiveItemList>;
+export default _default;

package/dist/components/SolaceSearchAndFilter.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { FIELD_TYPES } from "../types/fieldTypes";
+import SolaceComponentProps from "./SolaceComponentProps";
+import { SolaceTextFieldChangeEvent } from "./form/SolaceTextField";
+export interface SolaceSearchAndFilterProps 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;
+    /**
+     * Content to display as supportive/explanitory text
+     */
+    helperText?: string | JSX.Element;
+    /**
+     * The value of the `input` element, required for controlled component
+     */
+    value?: string;
+    /**
+     * Short hint displayed in the `input` before user enters a value
+     */
+    placeholder?: string;
+    /**
+     * Custom Width of the component.
+     */
+    width?: string;
+    /**
+     * Boolean flag to disable the `input`
+     */
+    disabled?: boolean;
+    /**
+     * Boolean flag to keep the `input` focused
+     */
+    autoFocus?: boolean;
+    /**
+     * Indicates whether this is a "search" or "filter" field (appropriate icon will show as the adornment)
+     */
+    type?: FIELD_TYPES;
+    /**
+     * Boolean flag to mark the field in error state
+     */
+    hasErrors?: boolean;
+    /**
+     * Callback function to trigger whenever the value of the `input` is changed
+     */
+    onChange: (event: SolaceTextFieldChangeEvent) => void;
+    /**
+     * Callback function to notify the callee when the `input` is focused
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function to notify the callee when the `input` is blurred
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function to notify the callee when the clear (x) button is clicked (in case
+     * the callee wishes to perform any additional operations other than clearing the search/filter text)
+     */
+    onClearAll?: () => void;
+}
+declare function SolaceSearchAndFilter({ id, name, label, helperText, value, placeholder, width, disabled, autoFocus, type, hasErrors, onChange, onFocus, onBlur, onClearAll }: SolaceSearchAndFilterProps): JSX.Element;
+export default SolaceSearchAndFilter;

package/dist/components/SolaceTag.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { CHIP_COLORS, CHIP_VARIANT } from "../types/solaceChip";
+import SolaceComponentProps from "./SolaceComponentProps";
+export interface SolaceTagProps extends SolaceComponentProps {
+    /**
+     * 	The content of the component.
+     */
+    label?: string | JSX.Element;
+    /**
+     * 	The variant to use ... filled vs outlined
+     */
+    variant?: CHIP_VARIANT;
+    /**
+     * If the label is of type string and exceeds the maxWidth (in px), ellipsis will be
+     * shown within the component
+     */
+    maxWidth?: string | number;
+    /**
+     * Sets the fill color of the component
+     */
+    fillColor?: CHIP_COLORS;
+    /**
+     * Sets the border color of the component
+     */
+    borderColor?: CHIP_COLORS;
+    /**
+     * Sets the text color of the label
+     */
+    labelColor?: CHIP_COLORS;
+    /**
+     * If true, hover and click effects will be applied to the component
+     */
+    clickable?: boolean;
+    /**
+     * Add a leading icon ... ensure the size of the icon is 14x14 pixels
+     */
+    icon?: JSX.Element;
+}
+export default function SolaceTag({ label, variant, maxWidth, fillColor, borderColor, labelColor, clickable, icon, dataQa }: SolaceTagProps): JSX.Element;

package/dist/components/SolaceTextDiff.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import SolaceComponentProps from "./SolaceComponentProps";
+export interface SolaceTextDiffProps extends SolaceComponentProps {
+    /**
+     * unique identifier
+     */
+    id: string;
+    /**
+     * 	Text 1 for comparison
+     */
+    text1: string;
+    /**
+     * 	Text 2 for comparison
+     */
+    text2: string;
+    /**
+     * Header content to display above the old text pane.
+     */
+    text1Header?: string | JSX.Element;
+    /**
+     * Header content to display above the new text pane.
+     */
+    text2Header?: string | JSX.Element;
+    /**
+     * Text to display when there is no content to compare.
+     * @default 'No content to compare'
+     */
+    noContentText?: string;
+    /**
+     * Text to display when there are no differences.
+     * @default 'No Differences'
+     */
+    noDifferencesText?: string;
+    /**
+     * Whether to hide the diff and show the noDifferencesText when there are no differences.
+     * @default false
+     */
+    hideWhenNoDifferences?: boolean;
+}
+export default function SolaceTextDiff(props: SolaceTextDiffProps): JSX.Element;

package/dist/components/SolaceToasts.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export declare type SolaceToastsProps = {
+    /** @deprecated This prop will be removed in a future version. Target: August 2025 */
+    severity?: "success" | "info" | "warning" | "error";
+    message: React.ReactNode;
+    open?: boolean;
+    action?: React.ReactNode;
+    autoDismiss?: boolean;
+    onClose: (event: React.SyntheticEvent<Element> | Event) => void;
+};
+/**
+ * Provides toasts that match solace ui guidelines.
+ * If severity is not passed in no icon would be shown.
+ * Default action button is close icon, but can be overwritten by any react element.
+ * @type SolaceToasts
+ * @param props
+ * @returns JSX.Element
+ */
+export default function SolaceToasts(props: SolaceToastsProps): JSX.Element;

package/dist/components/SolaceToolTip.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import SolaceComponentProps from "./SolaceComponentProps";
+import { TooltipVariantTypes } from "../types/solaceTooltip";
+export interface SolaceTooltipProps extends SolaceComponentProps {
+    /**
+     * Unique identifier ... if `id` is not specified, a randomly generated value will be used in order to make it accessible for screen readers
+     */
+    id?: string;
+    /**
+     * Tooltip title
+     */
+    title?: string | JSX.Element;
+    /**
+     * Different type of tooltip, default to `text`
+     */
+    variant?: TooltipVariantTypes;
+    /**
+     * Tooltip referenced element.
+     */
+    children: string | JSX.Element;
+    /**
+     * Tooltip placement, default to `bottom`
+     */
+    placement?: "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top-start" | "top";
+    /**
+     * Tooltip maximum width, default to small
+     */
+    maxWidth?: "small" | "medium" | "full";
+    /**
+     * Disable listener to show tooltip when referenced element is focused, default to false
+     */
+    disableFocusListener?: boolean;
+    /**
+     * Disable listener to show tooltip when referenced element is hovered, default to false
+     */
+    disableHoverListener?: boolean;
+    /**
+     * The number of milliseconds to wait before showing the tooltip. Default is 500ms
+     */
+    enterDelay?: number;
+    /**
+     * The number of milliseconds to wait before showing the tooltip when one was already recently opened. Default is 0ms
+     */
+    enterNextDelay?: number;
+    /**
+     * The number of milliseconds to wait before hiding the tooltip. Default is 0ms
+     */
+    leaveDelay?: number;
+    /**
+     * Controlled open state for tooltip. If `true`, the component is shown
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the component requests to be open. Used in conjunction with `open` and `onClose`
+     */
+    onOpen?: (event: React.SyntheticEvent) => void;
+    /**
+     * Callback fired when the component requests to be closed. Used in conjunction with `open` and `onOpen`
+     */
+    onClose?: (event: Event | React.SyntheticEvent<Element, Event>) => void;
+}
+declare function SolaceTooltip({ id, title, variant, children, placement, maxWidth, disableFocusListener, disableHoverListener, enterDelay, enterNextDelay, leaveDelay, open, onOpen, onClose, dataQa, dataTags }: SolaceTooltipProps): JSX.Element;
+export default SolaceTooltip;

package/dist/components/SolaceTree.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import SolaceComponentProps from "./SolaceComponentProps";
+export interface TreeNode {
+    children?: TreeNode[];
+    component: JSX.Element;
+}
+export declare const createHeightCalculation: (node: TreeNode | undefined, rowHeight: number, connectorOffset: number, index: number) => number;
+interface SolaceTreeProps extends SolaceComponentProps {
+    components: TreeNode[];
+    rowHeight: number;
+    connectorOffset: number;
+    connectorWidth: number;
+    leftOffset: number;
+    connectorBorderRadius: number;
+    connectorStroke: number;
+    connectorColor?: string;
+}
+/**
+ *  SolaceDataTree Component
+ *  Displays a series of components arranged to look like a tree of any height
+ *
+ *  The "connector" is the part that connects the children to the parent component.
+ *
+ *  The components passed into this component should all have a uniform height
+ *
+ * @interface SolaceTree
+ * @param props
+ * @returns JSX.Element
+ *
+ */
+/**
+ * @deprecated This component is deprecated and should not be used in new code.
+ */
+declare function SolaceTree(props: SolaceTreeProps): JSX.Element;
+declare namespace SolaceTree {
+    var defaultProps: {
+        rowHeight: number;
+        connectorOffset: number;
+        connectorWidth: number;
+        leftOffset: number;
+        connectorBorderRadius: number;
+        connectorStroke: number;
+    };
+}
+export default SolaceTree;