solace-ui-components 16.1.0

package/dist/types/solaceCard.d.ts

@@ -0,0 +1,87 @@
+import React from "react";
+import SolaceComponentProps from "../components/SolaceComponentProps";
+import { SolaceCardHeaderProps } from "./solaceCardHeader";
+/**
+ * Props for the SolaceCard component
+ */
+export interface SolaceCardProps extends SolaceComponentProps {
+    /**
+     * Props for the card header component
+     */
+    cardHeaderProps?: SolaceCardHeaderProps;
+    /**
+     * Content to display in the card body
+     */
+    cardContent?: React.ReactNode;
+    /**
+     * Actions to display at the bottom of the card
+     */
+    cardActions?: React.ReactNode;
+    /**
+     * Width of the card
+     */
+    width?: string;
+    /**
+     * Height of the card
+     */
+    height?: string;
+    /**
+     * Minimum width of the card
+     * @default "250px"
+     */
+    minWidth?: string;
+    /**
+     * Padding for the entire card
+     * @default theme.spacing(2) (16px)
+     */
+    padding?: string;
+    /**
+     * Whether the card is in read-only mode
+     *
+     * Read-only cards are used as a visual layout option to help categorize and group topics.
+     * They are not interactive and serve primarily as information containers.
+     *
+     * When set to true:
+     * - The card receives a "readOnly" CSS class that can be styled differently
+     * - The card maintains its role as "article" for accessibility
+     * - Interactive elements within the card should be avoided or disabled
+     *
+     * When set to false (default):
+     * - The card can serve as an entry point into deeper levels of detail or navigation
+     * - Interactive elements like buttons and menus can be included
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * ARIA label for the card
+     */
+    ariaLabel?: string;
+    /**
+     * Data-qa attribute for testing
+     */
+    dataQa?: string;
+    /**
+     * Data-tags attribute for additional metadata
+     */
+    dataTags?: string;
+    /**
+     * If true, the card will have a border when selected.
+     *
+     * @default false
+     */
+    showBorderOnSelect?: boolean;
+    /**
+     * Controls the card's initial selection state.
+     *
+     * @default false
+     */
+    isSelected?: boolean;
+    /**
+     * onClick handler for the card
+     *
+     * This handler will only be applied when readOnly is false.
+     * In readOnly mode, the card will not be clickable.
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>, isSelected?: boolean) => void;
+}

package/dist/types/solaceCardHeader.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import SolaceComponentProps from "../components/SolaceComponentProps";
+/**
+ * Props for the SolaceCardHeader component
+ */
+export interface SolaceCardHeaderProps extends SolaceComponentProps {
+    /**
+     * The avatar element to display
+     */
+    icon?: React.ReactNode;
+    /**
+     * The title element to display
+     * Can be a string or any React node.
+     */
+    title?: React.ReactNode;
+    /**
+     * The subheader element to display
+     * This will only render if `title` is provided.
+     * Can be a string or any React node.
+     */
+    subTitle?: React.ReactNode;
+    /**
+     * The action elements to display in the header
+     * Can be any React node such as a div containing buttons, menus, etc.
+     * These will be aligned to the top of the header.
+     */
+    actionElements?: React.ReactNode;
+    /**
+     * Data-qa attribute for testing
+     */
+    dataQa?: string;
+    /**
+     * Data-tags attribute for additional metadata
+     */
+    dataTags?: string;
+}

package/dist/types/solaceCategorizedSearch.d.ts

@@ -0,0 +1,87 @@
+/// <reference types="react" />
+import { SolaceTextFieldChangeEvent } from "../components/form/SolaceTextField";
+import { SolaceToggleButtonGroupOptionProps } from "../components/form/SolaceToggleButtonGroup";
+import SolaceComponentProps from "../components/SolaceComponentProps";
+export declare enum SolaceCategorizedSearchLayout {
+    horizontal = "horizontal",
+    vertical = "vertical"
+}
+export interface SolaceCategorizedSearchProps extends SolaceComponentProps {
+    /**
+     * Unique identifier ... if `id` is not specified, `name` value will be used in order to make `helperText` accessible for screen readers
+     */
+    id?: string;
+    /**
+     * Name attribute to assign to the search `input` element
+     */
+    name: string;
+    /**
+     * Options for the category buttons
+     */
+    categoryOptions?: SolaceToggleButtonGroupOptionProps[];
+    /**
+     * Custom Width of the category options.
+     */
+    categoryOptionsWidth?: string;
+    /**
+     * The value of the selected category button
+     */
+    selectedCategoryValue?: string;
+    /**
+     * Callback function to notify the callee when a category button is clicked
+     */
+    onCategoryChange: (event: React.MouseEvent<HTMLElement, MouseEvent>, value: string) => void;
+    /**
+     * Content to display as supportive/explanitory text
+     */
+    helperText?: string | JSX.Element;
+    /**
+     * The value of the `input` element, required for controlled component
+     */
+    searchValue?: string;
+    /**
+     * Short hint displayed in the search `input` before user enters a value
+     */
+    placeholder?: string;
+    /**
+     * Custom Width of the search input.
+     */
+    searchInputWidth?: string;
+    /**
+     * Boolean flag to disable the search `input` and category buttons
+     */
+    disabled?: boolean;
+    /**
+     * Boolean flag to keep the search `input` focused
+     */
+    autoFocus?: boolean;
+    /**
+     * Boolean flag to mark the field in error state
+     */
+    hasErrors?: boolean;
+    /**
+     * Callback function to trigger whenever the value of the search `input` is changed
+     */
+    onSearchValueChange: (event: SolaceTextFieldChangeEvent) => void;
+    /**
+     * Callback function to notify the callee when the search `input` is focused
+     */
+    onSearchInputFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function to notify the callee when the search `input` is blurred
+     */
+    onSearchInputBlur?: (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;
+    /**
+     * Layout direction of buttons and search input. Default is vertical.
+     */
+    layout?: SolaceCategorizedSearchLayout;
+    /**
+     * Boolean flag to indicate whether category buttons should have equal width
+     */
+    equalButtonWidth?: boolean;
+}

package/dist/types/solaceChip.d.ts

@@ -0,0 +1,26 @@
+import { BASE_SIZE_TYPES } from "./sizing";
+export declare enum CHIP_COLORS {
+    ROYAL_BLUE = "royalBlue",
+    DARK_BLUE = "darkBlue",
+    OPAQUE_BLUE = "opaqueBlue",
+    infoBlue = "infoBlue",
+    infoBgBlue = "infoBgBlue",
+    warnYellow = "warnYellow",
+    warnBgYellow = "warnBgYellow",
+    LIGHT_GREY = "lightGrey",
+    SMOKE_GREY = "smokeGrey",
+    DARK_GREY = "darkGrey",
+    WHITE = "white",
+    INFO_LIGHT_BG_BLUE = "infoLightBgBlue",
+    ERROR_BG_RED = "errorBgRed",
+    SUCCESS_BG_GREEN = "successBgGreen",
+    INFO_BLUE_LABEL = "infoLightLabelBlue",
+    ERROR_RED_LABEL = "errorLabel",
+    SUCCESS_GREEN_LABEL = "successLabel"
+}
+export declare enum CHIP_VARIANT {
+    FILLED = "filled",
+    OUTLINED = "outlined"
+}
+export declare const CHIP_PX_HEIGHTS: BASE_SIZE_TYPES;
+export declare const CHIP_PX_BORDER_RADIUS: BASE_SIZE_TYPES;

package/dist/types/solaceChipTextArea.d.ts

@@ -0,0 +1,89 @@
+/// <reference types="react" />
+import SolaceComponentProps from "../components/SolaceComponentProps";
+export interface ChipData {
+    id: string;
+    label: string;
+    isValid: boolean;
+    errorMessage?: string;
+}
+export interface SolaceChipTextAreaChangeEvent {
+    name: string;
+    value: string;
+    chips: ChipData[];
+    allValues: string;
+}
+export interface SolaceChipTextAreaProps 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;
+    /**
+     * The maximum number of characters which can be typed as the `input` value
+     */
+    maxLength?: 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;
+    /**
+     * Callback function to trigger whenever the value of the `input` is changed
+     */
+    onChange?: (event: SolaceChipTextAreaChangeEvent) => 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;
+    /**
+     * Callback function to validate the text before converting to a chip
+     * Returns undefined if valid, or an error message if invalid
+     */
+    validateChip?: (text: string) => string | undefined;
+}

package/dist/types/solaceDatePicker.d.ts

@@ -0,0 +1,16 @@
+import { DateView } from "@mui/x-date-pickers";
+export declare enum SolaceDatePickerVariant {
+    FORMAT_YEAR_MONTH_DAY = "yearMonthDay",
+    FORMAT_MONTH_YEAR = "monthYear"
+}
+/**
+ * these properties are defined in the Material-UI DatePicker component ( https://mui.com/x/api/date-pickers/date-picker/ )
+ * `views` is used for controlliing which views are shown in the date picker (e.g. year, month, day) and an array
+ * `openTo` is used for controlling which view the date picker should open to (e.g. year, month, day)
+ * `format` is used for controlling the format of the date displayed in the input field
+ */
+export declare const variantConfig: Record<SolaceDatePickerVariant, {
+    views?: DateView[];
+    openTo?: DateView;
+    format: string;
+}>;

package/dist/types/solaceEmptyStateBanner.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare type SolaceEmptyStateBannerProps = {
+    bannerImage: React.ReactNode;
+    subtitle: string;
+    title: string;
+    description: string;
+    primaryButton: {
+        label: string;
+        onClick: () => void;
+        dataQa?: string;
+    };
+    secondaryButton?: {
+        label: string;
+        onClick: () => void;
+        dataQa?: string;
+    };
+    dataQa?: string;
+};

package/dist/types/solaceGrid.d.ts

@@ -0,0 +1,9 @@
+import { GridProps } from "@mui/material";
+import { SX } from "./sx";
+/**
+ * All of the supported props related to SolaceGrid can be found at https://mui.com/api/grid/
+ * All props provided by mui have been extended, to provide more flexibility for developers while using these layout components.
+ */
+export declare type SolaceGridProps = Omit<GridProps, "sx"> & {
+    sx?: SX;
+};

package/dist/types/solaceLearningButton.d.ts

@@ -0,0 +1,4 @@
+import { SolaceButtonProps } from "../components/form/SolaceButton";
+export declare type SolaceLearningButtonProps = Omit<SolaceButtonProps, "variant" | "href" | "dense" | "underline"> & {
+    variant: "call-to-action" | "dark-call-to-action" | "dark-outline" | "icon";
+};

package/dist/types/solaceList.d.ts

@@ -0,0 +1,130 @@
+/// <reference types="react" />
+import { ListClasses, ListItemButtonClasses, ListItemClasses, SxProps, Theme } from "@mui/material";
+export declare type solaceListProps = {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ListClasses>;
+    /**
+     * If `true`, compact vertical padding designed for keyboard and mouse input is used for
+     * the list and list items.
+     * The prop is available to descendant components as the `dense` context.
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * If `true`, vertical padding is removed from the list.
+     * @default false
+     */
+    disablePadding?: boolean;
+    /**
+     * The content of the subheader, normally `ListSubheader`.
+     */
+    subheader?: React.ReactNode;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+};
+export declare type solaceListItemProps = {
+    /**
+     * Defines the `align-items` style property.
+     * @default 'center'
+     */
+    alignItems?: "flex-start" | "center";
+    /**
+     * The content of the component if a `ListItemSecondaryAction` is used it must
+     * be the last child.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ListItemClasses>;
+    /**
+     * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+     * The prop defaults to the value inherited from the parent List component.
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * If `true`, the left and right padding is removed.
+     * @default false
+     */
+    disableGutters?: boolean;
+    /**
+     * If `true`, all padding is removed.
+     * @default false
+     */
+    disablePadding?: boolean;
+    /**
+     * If `true`, a 1px light border is added to the bottom of the list item.
+     * @default false
+     */
+    divider?: boolean;
+    /**
+     * The element to display at the end of ListItem.
+     */
+    secondaryAction?: React.ReactNode;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+};
+export declare type solaceListItemButtonProps = {
+    /**
+     * Defines the `align-items` style property.
+     * @default 'center'
+     */
+    alignItems?: "flex-start" | "center";
+    /**
+     * If `true`, the list item is focused during the first mount.
+     * Focus will also be triggered if the value changes from false to true.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * The content of the component if a `ListItemSecondaryAction` is used it must
+     * be the last child.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ListItemButtonClasses>;
+    /**
+     * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+     * The prop defaults to the value inherited from the parent List component.
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the left and right padding is removed.
+     * @default false
+     */
+    disableGutters?: boolean;
+    /**
+     * If `true`, a 1px light border is added to the bottom of the list item.
+     * @default false
+     */
+    divider?: boolean;
+    /**
+     * Use to apply selected styling.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+};

package/dist/types/solacePageHeader.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+import { SolacePath } from "@src/components/SolaceBreadcrumb";
+import SolaceComponentProps from "@src/components/SolaceComponentProps";
+export declare enum TitleLocation {
+    TOP_OF_TABS = "topOfTabs",
+    LEFT_OF_TABS = "leftOfTabs"
+}
+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;
+}

package/dist/types/solacePopover.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import SolaceComponentProps from "../components/SolaceComponentProps";
+/**
+ * Props for the SolacePopover component.
+ *
+ * @extends SolaceComponentProps
+ */
+export interface SolacePopoverProps extends SolaceComponentProps {
+    /**
+     * Optional unique identifier for the popover.
+     */
+    id?: string;
+    /**
+     * Optional unique key for the popover.
+     */
+    key?: string;
+    /**
+     * The element to which the popover is anchored.
+     * Can be `null` or an `Element`.
+     */
+    anchorElement?: null | Element;
+    /**
+     * The position of the anchor element in terms of top and left coordinates.
+     */
+    anchorPosition?: {
+        top: number;
+        left: number;
+    };
+    /**
+     * The origin point on the anchor element where the popover is aligned.
+     *
+     * @property vertical - Vertical alignment, can be "center", "top", "bottom", or a numeric value.
+     * @property horizontal - Horizontal alignment, can be "center", "right", "left", or a numeric value.
+     */
+    anchorOrigin: {
+        vertical: "center" | "top" | "bottom" | number;
+        horizontal: "center" | "right" | "left" | number;
+    };
+    /**
+     * The origin point on the popover where it is aligned relative to the anchor element.
+     *
+     * @property vertical - Vertical alignment, can be "center", "top", "bottom", or a numeric value.
+     * @property horizontal - Horizontal alignment, can be "center", "right", "left", or a numeric value.
+     */
+    transformOrigin: {
+        vertical: "center" | "top" | "bottom" | number;
+        horizontal: "center" | "right" | "left" | number;
+    };
+    /**
+     * Whether the popover is open or not.
+     */
+    open: boolean;
+    /**
+     * The content to be displayed inside the popover.
+     */
+    children: JSX.Element;
+    /**
+     * Callback function triggered when the popover is closed.
+     *
+     * @param event - The mouse event that triggered the close action.
+     */
+    onClose?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * The margin threshold for the popover's positioning.
+     */
+    marginThreshold?: number;
+    /**
+     * Whether the popover should activate on hover.
+     */
+    activateOnHover?: boolean;
+}

package/dist/types/solaceProgress.d.ts

@@ -0,0 +1,22 @@
+import SolaceComponentProps from "../components/SolaceComponentProps";
+import { BASE_SIZE_TYPES } from "./sizing";
+import { RANGE_0_TO_100 } from "./numericTypes";
+export declare const PROGRESS_HEIGHT: BASE_SIZE_TYPES;
+export interface SolaceLinearProgressProps extends SolaceComponentProps {
+    /**
+     * The variant style to use. Use indeterminate when there is no progress value to showcase
+     */
+    variant: "indeterminate" | "determinate";
+    /**
+     *  Height of the linear indicator
+     */
+    height?: keyof BASE_SIZE_TYPES;
+    /**
+     * Represent the progress value in percentage (useful only if the variant is "determinate", value between 0 and 100).
+     */
+    value?: RANGE_0_TO_100;
+    /**
+     * Color to style the progress bar with.
+     */
+    color?: "default" | "learning";
+}

package/dist/types/solaceStack.d.ts

@@ -0,0 +1,8 @@
+import { StackProps } from "@mui/material";
+import { SX } from "./sx";
+/**
+ * For detailed documentation please refer to https://mui.com/api/stack/
+ */
+export declare type SolaceStackProps = Omit<StackProps, "sx"> & {
+    sx?: SX;
+};