@zvoove/unity-ui 2.41.0 → 2.43.0

package/dist/unity-ui.d.ts

@@ -2279,8 +2279,8 @@ export declare interface InfoBoxProps {
     message: ReactNode;
     /**
      * Optional title displayed above the message. When present, the InfoBox uses
-     * a stacked title/message structure; actions still sit beside the message
-     * when there is enough width.
+     * a stacked title/message structure; actions sit beside the message when
+     * they fit in this container, otherwise they wrap below it.
      */
     title?: ReactNode;
     /**
@@ -2303,8 +2303,8 @@ export declare interface InfoBoxProps {
      */
     borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
     /**
-     * Optional action buttons displayed alongside the message or below it when
-     * the InfoBox is too narrow for the inline layout.
+     * Optional action buttons displayed beside the message when they fit in this
+     * container, or on the next line when they do not.
      */
     actions?: InfoBoxAction[];
     /**
@@ -2338,6 +2338,8 @@ export declare type IsoWeek = {
     year: number;
 };
 
+export declare const isTableSectionRow: (row: unknown) => row is TableSectionRow;
+
 export declare type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
 
 declare type LabelStates = {
@@ -3959,10 +3961,12 @@ export declare type TabItem<T extends React.ElementType = 'button'> = {
 } & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
 
 export declare const Table: {
-    <T extends readonly TableColumnProps[]>({ data, columns, title, subtitle, actions, filters, footer, orderBy, onOrderByChange, emptyState, hiddenColumns, loading, expandedRows, headerBackgroundColor, }: TableProps<T>): JSX.Element;
+    <T extends readonly TableColumnProps[]>({ data, columns, title, subtitle, actions, filters, footer, orderBy, onOrderByChange, emptyState, hiddenColumns, loading, expandedRows, headerBackgroundColor, onRowClick, linkComponent: LinkComponent, getRowLinkProps, rowAriaLabel, }: TableProps<T>): JSX.Element;
     displayName: string;
 };
 
+export declare type TableBodyRow<T extends readonly TableColumnProps[]> = TableRowData<T> | TableSectionRow;
+
 export declare type TableColumnDirection = (typeof direction)[keyof typeof direction];
 
 export declare interface TableColumnProps extends React.HTMLAttributes<HTMLTableColElement> {
@@ -4010,9 +4014,9 @@ export declare interface TableProps<T extends readonly TableColumnProps[] = read
      */
     filters?: React.ReactNode;
     /**
-     * The data rows of the Table.
+     * The data rows and optional section rows of the Table.
      */
-    data: TableRowData<T>[];
+    data: TableBodyRow<T>[];
     /**
      * The loading state of the Table.
      */
@@ -4057,14 +4061,85 @@ export declare interface TableProps<T extends readonly TableColumnProps[] = read
      * @default false
      */
     headerBackgroundColor?: boolean;
+    /**
+     * Callback function to handle clicks on data rows.
+     *
+     * The index is the position in `data`, including any section rows.
+     */
+    onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>, row: TableRowData<T>, index: number) => void;
+    /**
+     * The component used to render a row link.
+     * @default 'a'
+     */
+    linkComponent?: React.ElementType;
+    /**
+     * Returns the props forwarded to the link for a data row.
+     *
+     * The index is the position in `data`, including any section rows.
+     */
+    getRowLinkProps?: (row: TableRowData<T>, index: number) => TableRowLinkProps | undefined;
+    /**
+     * Accessible name fallback for clickable rows without a non-empty string cell.
+     * An explicit `aria-label` in `linkProps` or `getRowLinkProps` takes priority.
+     * @default undefined
+     */
+    rowAriaLabel?: string;
 }
 
-export declare type TableRowData<T extends readonly TableColumnProps[]> = {
-    [K in ColumnId<T>]: React.ReactNode;
-} & {
+declare type TableRowCellData<T extends readonly TableColumnProps[]> = {
+    [K in Exclude<ColumnId<T>, TableRowInteractionKey | 'expandableRow'>]: React.ReactNode;
+};
+
+declare type TableRowCellValue = React.ReactNode | ExpandableRowConfig | React.MouseEventHandler<HTMLTableRowElement>;
+
+export declare type TableRowData<T extends readonly TableColumnProps[]> = string extends ColumnId<T> ? TableRowDataForDynamicColumns : TableRowDataForDefinedColumns<T>;
+
+declare type TableRowDataForDefinedColumns<T extends readonly TableColumnProps[]> = TableRowCellData<T> & {
+    expandableRow?: ExpandableRowConfig;
+} & Partial<Pick<TableRowInteractionProps, Exclude<keyof TableRowInteractionProps, ColumnId<T>>>>;
+
+declare type TableRowDataForDynamicColumns = Record<string, TableRowCellValue> & TableRowInteractionProps & {
     expandableRow?: ExpandableRowConfig;
 };
 
+declare type TableRowInteractionKey = keyof TableRowInteractionProps;
+
+/**
+ * Optional interaction props supported by a data row.
+ */
+export declare interface TableRowInteractionProps {
+    onClick?: React.MouseEventHandler<HTMLTableRowElement>;
+    href?: string;
+    to?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    rel?: string;
+    linkProps?: TableRowLinkProps;
+}
+
+/**
+ * Props forwarded to a row link component.
+ *
+ * `href` and `to` accept relative destinations and the `http`, `https`,
+ * `mailto`, and `tel` protocols. Other protocols are ignored when rendered.
+ */
+export declare type TableRowLinkProps = {
+    href?: string;
+    to?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    rel?: string;
+    'aria-label'?: string;
+    [key: string]: unknown;
+};
+
+/**
+ * A row that separates table data into a labeled section.
+ */
+export declare interface TableSectionRow {
+    type: 'section';
+    label: React.ReactNode;
+    id?: string;
+}
+
 export declare const Tabs: {
     <T extends React.ElementType = "button">({ items, activeItem, onChange, hideBorder, itemsAlignment, isSticky, panels, linkComponent: LinkComponent, }: TabsProps<T>): JSX.Element;
     displayName: string;
@@ -4105,6 +4180,106 @@ export declare interface TabsProps<T extends React.ElementType = 'button'> {
     itemsAlignment?: 'left' | 'center' | 'right' | 'between' | 'around' | 'evenly';
 }
 
+export declare const TabStepper: {
+    <T extends React.ElementType = "button">({ items, activeItem, onChange, itemsAlignment, hideBorder, isSticky, panels, panelCard, linkComponent: LinkComponent, bgColor, }: TabStepperProps<T>): JSX.Element;
+    displayName: string;
+};
+
+export declare type TabStepperItem<T extends React.ElementType = 'button'> = {
+    /**
+     * Unique identifier for the step.
+     */
+    id: string;
+    /**
+     * The step title.
+     */
+    title: string;
+    /**
+     * Supporting text shown below the title.
+     */
+    subtitle?: string;
+    /**
+     * The status represented by the step icon.
+     * @default 'idle'
+     */
+    status?: TabStepperStatus;
+    /**
+     * The number shown for an idle step.
+     * @default The item's position in the list
+     */
+    stepNumber?: number;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'id' | 'onClick' | 'title'>;
+
+export declare type TabStepperItemsAlignment = 'left' | 'center' | 'right' | 'spread';
+
+export declare interface TabStepperPanel {
+    /**
+     * Identifier of the tab associated with the panel.
+     */
+    id: string;
+    /**
+     * Panel content.
+     */
+    children: React.ReactNode;
+}
+
+export declare type TabStepperPanelCard = Pick<CardProps, 'borderRadius' | 'variant' | 'padding' | 'bgColor' | 'elevation' | 'borderStyle'>;
+
+export declare interface TabStepperProps<T extends React.ElementType = 'button'> {
+    /**
+     * The steps to display.
+     */
+    items: TabStepperItem<T>[];
+    /**
+     * The identifier of the selected step.
+     */
+    activeItem: string;
+    /**
+     * Callback fired when a step is selected.
+     */
+    onChange?: (item: TabStepperItem<T>) => void;
+    /**
+     * Alignment of the steps when they fit inside the container.
+     * Accepts a single value or a breakpoint object. Breakpoints are resolved
+     * against the TabStepper container width, not the viewport.
+     * @default 'left'
+     */
+    itemsAlignment?: ResponsiveType<TabStepperItemsAlignment>;
+    /**
+     * Whether to hide the bottom border.
+     * @default false
+     */
+    hideBorder?: boolean;
+    /**
+     * Whether the stepper stays at the top while its page scrolls.
+     * @default true
+     */
+    isSticky?: boolean;
+    /**
+     * Optional content panels associated with the steps.
+     */
+    panels?: TabStepperPanel[];
+    /**
+     * Wrap the steps and panels in a Card: steps in the header, panel in the
+     * body. `true` uses Card defaults. An object customizes the Card (for
+     * example `borderRadius`).
+     */
+    panelCard?: boolean | TabStepperPanelCard;
+    /**
+     * The link component used to render each step.
+     * @default 'button'
+     */
+    linkComponent?: T | 'button' | 'a';
+    /**
+     * Background color of the stepper strip. Used by the overflow arrow fade
+     * so overflowing steps appear to disappear into the page.
+     * @default 'surface-container'
+     */
+    bgColor?: BackgroundColors;
+}
+
+export declare type TabStepperStatus = 'idle' | 'done' | 'failed' | 'warning';
+
 export declare const Tag: ForwardRefExoticComponent<TagProps & RefAttributes<HTMLSpanElement>>;
 
 export declare interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -4316,7 +4491,7 @@ export declare interface TopBarProps {
     density?: 'default' | '-2' | '-4';
 }
 
-export declare const Typography: ({ children, variant, size, as: AsComponent, color, textAlign, truncate, textTransform, hyphenate, wrap, ...props }: TypographyProps) => JSX.Element;
+export declare const Typography: ({ children, variant, size, as: AsComponent, color, textAlign, truncate, truncatedBy, textTransform, hyphenate, wrap, ...props }: TypographyProps) => JSX.Element;
 
 declare type TypographyElements = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
@@ -4368,6 +4543,12 @@ export declare type TypographyProps<T extends TypographyElements = 'p'> = Omit<R
      * The text that doesn't fit the container will be hidden and replaced by ellipsis
      */
     truncate?: number;
+    /**
+     * Whether overflowing text is truncated at word boundaries or individual letters.
+     * Use with `truncate`. The `letter` value applies `word-break: break-all`.
+     * @default 'word'
+     */
+    truncatedBy?: 'word' | 'letter';
     /**
      * If true, the text will be wrapped.
      */