@stella-source/stellasource-dsl 4.0.0 → 5.1.1

package/dist/cjs/types/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { RadioButtonProps } from "./types";
+declare const RadioButton: ({ id, name, value, className, label, checked, disabled, align, onChange, htmlProps, }: RadioButtonProps) => React.JSX.Element;
+export default RadioButton;

package/dist/cjs/types/components/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: ({ id, name, value, className, label, checked, disabled, align, onChange, htmlProps, }: import("./types").RadioButtonProps) => React.JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        label: string;
+    };
+};
+export default _default;
+export declare const Default: {};

package/dist/cjs/types/components/RadioButton/styles.d.ts

@@ -0,0 +1,38 @@
+export type RadioState = "selected" | "unselected" | "disabled";
+interface RadioStateProps {
+    $state: RadioState;
+}
+export declare const RadioContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const RadioLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "$state"> & RadioStateProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "$state"> & RadioStateProps, never>>> & string;
+export declare const RadioOuter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$state"> & RadioStateProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$state"> & RadioStateProps, never>>> & string;
+export declare const RadioDot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$state"> & RadioStateProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$state"> & RadioStateProps, never>>> & string;
+export declare const RadioInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
+declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$disabled" | "$hasLabel"> & {
+    $disabled?: boolean;
+    $hasLabel?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$disabled" | "$hasLabel"> & {
+    $disabled?: boolean;
+    $hasLabel?: boolean;
+}, never>>> & string;
+declare const RadioButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "$align" | "$disabled" | "$fontSize"> & {
+    $disabled?: boolean;
+    $align?: "top" | "center";
+    $fontSize?: string | null;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "$align" | "$disabled" | "$fontSize"> & {
+    $disabled?: boolean;
+    $align?: "top" | "center";
+    $fontSize?: string | null;
+}, never>>> & string;
+declare const RadioIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$disabled" | "$hasLabel" | "$checked"> & {
+    $checked?: boolean;
+    $disabled?: boolean;
+    $hasLabel?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$disabled" | "$hasLabel" | "$checked"> & {
+    $checked?: boolean;
+    $disabled?: boolean;
+    $hasLabel?: boolean;
+}, never>>> & string;
+declare const HiddenInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement>, "type"> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement>, "type">>> & string;
+declare const LabelGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+declare const MainLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export { RadioButtonWrapper, HiddenInput, LabelGroup, MainLabel, IconWrapper, RadioIcon, };

package/dist/cjs/types/components/RadioButton/types.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactElement } from "react";
+export interface RadioButtonProps {
+    id: string;
+    name: string;
+    value?: string;
+    label?: string | ReactElement;
+    checked?: boolean;
+    disabled?: boolean;
+    className?: string;
+    align?: "top" | "center";
+    onChange?: (id: string, value?: string, label?: string) => void;
+    htmlProps?: HTMLAttributes<HTMLInputElement>;
+}

package/dist/cjs/types/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { RadioButtonGroupProps } from "./types";
+declare const RadioButtonGroup: ({ name, id, options, onChange, defaultSelectedId, heading, required, tooltipText, disabled, className, isViewOnly, showError, errorMessage, }: RadioButtonGroupProps) => React.JSX.Element;
+export default RadioButtonGroup;

package/dist/cjs/types/components/RadioButtonGroup/RadioButtonGroup.stories.d.ts

@@ -0,0 +1,87 @@
+import React from "react";
+import { CheckBoxFontSizeVariant } from "../CheckBox/types";
+declare const _default: {
+    title: string;
+    component: ({ name, id, options, onChange, defaultSelectedId, heading, required, tooltipText, disabled, className, isViewOnly, showError, errorMessage, }: import("./types").RadioButtonGroupProps) => React.JSX.Element;
+    tags: string[];
+    argTypes: {
+        heading: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        required: {
+            control: string;
+        };
+        tooltipText: {
+            control: string;
+        };
+        onChange: {
+            action: string;
+        };
+        isViewOnly: {
+            control: string;
+        };
+        showError: {
+            control: string;
+        };
+        errorMessage: {
+            control: string;
+        };
+    };
+    args: {
+        name: string;
+        heading: string;
+        disabled: boolean;
+        required: boolean;
+        fontSize: CheckBoxFontSizeVariant;
+    };
+};
+export default _default;
+type StoryArgs = {
+    name?: string;
+    heading?: string;
+    defaultSelectedId?: string;
+    disabled?: boolean;
+    required?: boolean;
+    tooltipText?: string;
+    fontSize?: string;
+    isViewOnly?: boolean;
+    showError?: boolean;
+    errorMessage?: string;
+};
+export declare const Default: {
+    render: (args: StoryArgs) => React.JSX.Element;
+};
+export declare const WithDefaultSelected: {
+    render: (args: StoryArgs) => React.JSX.Element;
+};
+export declare const AllDisabled: {
+    render: (args: StoryArgs) => React.JSX.Element;
+    args: {
+        disabled: boolean;
+        defaultSelectedId: string;
+    };
+};
+export declare const RequiredWithTooltip: {
+    render: (args: StoryArgs) => React.JSX.Element;
+    args: {
+        heading: string;
+        required: boolean;
+        showError: boolean;
+        disabled: boolean;
+        tooltipText: string;
+    };
+};
+export declare const ViewOnlyMode: {
+    render: (args: StoryArgs) => React.JSX.Element;
+    args: {
+        heading: string;
+        required: boolean;
+        showError: boolean;
+        isViewOnly: boolean;
+        defaultSelectedId: string;
+        tooltipText: string;
+    };
+};

package/dist/cjs/types/components/RadioButtonGroup/styles.d.ts

@@ -0,0 +1,8 @@
+import { HelperTextProps } from "../HelperText/types";
+declare const GroupWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>>> & string;
+declare const HeadingRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+declare const Legend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>>> & string;
+declare const CustomHelperText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<HelperTextProps, keyof HelperTextProps> & HelperTextProps, never> & Partial<Pick<import("styled-components").FastOmit<HelperTextProps, keyof HelperTextProps> & HelperTextProps, never>>> & string & Omit<({ id, className, affectLayout, text, type, htmlProps, }: HelperTextProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const SelectedLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+declare const OptionsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export { GroupWrapper, HeadingRow, Legend, CustomHelperText, SelectedLabel, OptionsWrapper, };

package/dist/cjs/types/components/RadioButtonGroup/types.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from "react";
+export interface RadioButtonGroupOption {
+    id: string;
+    label: string | ReactElement;
+    value: string;
+    disabled?: boolean;
+}
+export interface RadioButtonGroupProps {
+    name: string;
+    id?: string;
+    options: RadioButtonGroupOption[];
+    onChange: (payload: RadioButtonGroupOption) => void;
+    defaultSelectedId?: string;
+    heading?: string;
+    required?: boolean;
+    tooltipText?: string;
+    disabled?: boolean;
+    className?: string;
+    isViewOnly?: boolean;
+    showError?: boolean;
+    errorMessage?: string;
+}

package/dist/cjs/types/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableProps } from "./types";
-declare function Table<T>({ columns, data, isLoading, serverSide, onPageChange, onSortChange, onFilterChange, onRowSelect, onRowClick, rowStatuses, showSelection, showRowOptions, showPagination, variant, paginationDetails, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, defaultFilters, staticFilters, enableShowHide, globalActions, }: TableProps<T>): React.JSX.Element;
+declare function Table<T>({ columns, data, isLoading, serverSide, onPageChange, onSortChange, onFilterChange, onRowSelect, onRowClick, rowStatuses, showSelection, showRowOptions, showPagination, variant, paginationDetails, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, defaultFilters, staticFilters, enableShowHide, globalActions, showExpandedRowToggle, renderExpandedRow, }: TableProps<T>): React.JSX.Element;
 export default Table;

package/dist/cjs/types/components/Table/Table.stories.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import TableComponent from "./Table";
 import { TableProps } from "./types";
 interface Person {
@@ -21,3 +22,10 @@ export declare const Table: {
         variant: string;
     };
 };
+export declare const ExpandedRows: {
+    args: {
+        id: string;
+        renderExpandedRow: (row: any) => React.JSX.Element | null;
+        showExpandedRowToggle: boolean;
+    };
+};

package/dist/cjs/types/components/Table/styles.d.ts

@@ -5,6 +5,7 @@ interface HeaderIconButtonProps {
 }
 interface PaginationProps {
     $hasData?: boolean;
+    $isEmpty: boolean;
 }
 declare const HeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "$isPinnedLeft" | "$isPinnedRight" | "$columnInfo" | "$filterMenuOpen"> & {
     $isPinnedLeft?: boolean;
@@ -33,7 +34,11 @@ declare const SortButton: import("styled-components/dist/types").IStyledComponen
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;
 }, keyof HeaderIconButtonProps> & HeaderIconButtonProps, never>>> & string;
-declare const HeaderRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>>> & string;
+declare const HeaderRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$isEmpty"> & {
+    $isEmpty: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$isEmpty"> & {
+    $isEmpty: boolean;
+}, never>>> & string;
 declare const CellRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$isClickable"> & {
     $isClickable: boolean;
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$isClickable"> & {
@@ -69,7 +74,7 @@ declare const LoadingShimmer: import("styled-components/dist/types").IStyledComp
     $width?: string;
     $height?: string;
 }, never>>> & string;
-declare const CustomPagination: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../Pagination/types").PaginationProps, "$hasData"> & PaginationProps, never> & Partial<Pick<import("styled-components").FastOmit<import("../Pagination/types").PaginationProps, "$hasData"> & PaginationProps, never>>> & string & Omit<({ isLoading, rowsPerPage, totalRows, ariaLabel, onPageChange, startingPage, id, className, htmlProps, }: import("../Pagination/types").PaginationProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const CustomPagination: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../Pagination/types").PaginationProps, keyof PaginationProps> & PaginationProps, never> & Partial<Pick<import("styled-components").FastOmit<import("../Pagination/types").PaginationProps, keyof PaginationProps> & PaginationProps, never>>> & string & Omit<({ isLoading, rowsPerPage, totalRows, ariaLabel, onPageChange, startingPage, id, className, htmlProps, }: import("../Pagination/types").PaginationProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 declare const KebabAlign: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 declare const EmptyTableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>>> & string;
 declare const EmptyTableSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "$size"> & {
@@ -80,6 +85,13 @@ declare const EmptyTableSection: import("styled-components/dist/types").IStyledC
 declare const EmptyTableHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
 declare const EmptyTableSubHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
 declare const ClearFilterButtonRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+declare const ExpandedContentRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>>> & string;
+declare const ExpandedContentCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>>> & string;
+declare const ExpandChevronButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$expanded"> & {
+    $expanded: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$expanded"> & {
+    $expanded: boolean;
+}, never>>> & string;
 declare const ActionBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 declare const GlobalActionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export { HeaderCell, TableWrapper, TableWrapperScroll, StyledTable, CustomIconButton, SortButton, HeaderRow, FilterMenu, Checkbox, BodyCell, HeaderCellPosition, MenuButton, MenuItem, FilterBoxLabel, LoadingShimmer, FilterLabelTransparent, CustomPagination, CellRow, MenuItemGroup, KebabAlign, MenuItemOption, EmptyTableCell, EmptyTableSection, EmptyTableHeader, EmptyTableSubHeader, ClearFilterButtonRow, ActionBar, GlobalActionWrapper, };
+export { HeaderCell, TableWrapper, TableWrapperScroll, StyledTable, CustomIconButton, SortButton, HeaderRow, FilterMenu, Checkbox, BodyCell, HeaderCellPosition, MenuButton, MenuItem, FilterBoxLabel, LoadingShimmer, FilterLabelTransparent, CustomPagination, CellRow, MenuItemGroup, KebabAlign, MenuItemOption, EmptyTableCell, EmptyTableSection, EmptyTableHeader, EmptyTableSubHeader, ClearFilterButtonRow, ActionBar, GlobalActionWrapper, ExpandedContentRow, ExpandedContentCell, ExpandChevronButton, };

package/dist/cjs/types/components/Table/types.d.ts

@@ -1,5 +1,5 @@
 import { ColumnDef, ColumnFiltersState, Row, Table } from "@tanstack/react-table";
-import { HTMLAttributes, ReactElement } from "react";
+import React, { HTMLAttributes, ReactElement } from "react";
 declare enum TableVariant {
     PRIMARY = "Primary",
     SECONDARY = "Secondary"
@@ -13,6 +13,8 @@ export interface TableProps<T> {
     columns: ColumnDef<T, any>[];
     data: T[];
     isLoading?: boolean;
+    showExpandedRowToggle?: boolean;
+    renderExpandedRow?: (row: Row<T>) => React.ReactNode | null;
     serverSide?: boolean;
     onPageChange?: (page: number, pageSize: number) => void;
     onSortChange?: (sort: {
@@ -54,10 +56,7 @@ export interface TableProps<T> {
         value: unknown;
     }[];
     enableShowHide?: boolean;
-    globalActions?: {
-        element: ReactElement;
-        onChange?: (table?: Table<T>) => void;
-    }[];
+    globalActions?: (table: Table<T>) => ReactElement;
 }
 export interface CustomColumnMeta {
     headerAlign?: "left" | "right";

package/dist/esm/index.esm.js

@@ -22095,6 +22095,7 @@ const HeaderRow = styled.tr `
   background-color: ${Styles.color.grey.pale};
   min-height: 50px;
   height: 50px;
+  display: ${({ $isEmpty }) => ($isEmpty ? "none" : "table-row")};
 `;
 const CellRow = styled.tr `
   min-height: 50px;
@@ -22308,6 +22309,7 @@ const LoadingShimmer = styled.div `
 `;
 const CustomPagination = styled(Pagination) `
   border-top: ${({ $hasData }) => $hasData ? "0px" : `1px solid ${Styles.color.grey.light}`};
+  display: ${({ $isEmpty }) => ($isEmpty ? "none" : "flex")};
 `;
 const KebabAlign = styled.div `
   display: flex;
@@ -22324,12 +22326,8 @@ const EmptyTableSection = styled.section `
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  position: absolute;
   gap: 20px;
-  top: 50px;
-  left: 0;
-  right: 0;
-  margin: 80px auto 0;
+  margin: 0 auto;
 `;
 const EmptyTableHeader = styled.p `
   display: flex;
@@ -22358,6 +22356,37 @@ const ClearFilterButtonRow = styled.div `
   align-items: "center";
   text-align: "center";
 `;
+const ExpandedContentRow = styled.tr `
+  background-color: ${Styles.color.grey.pale};
+`;
+const ExpandedContentCell = styled.td `
+  padding: 12px 16px;
+  border-bottom: 1px solid ${Styles.color.grey.light};
+  background-color: ${Styles.color.grey.pale};
+`;
+const ExpandChevronButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition:
+    transform 0.2s ease,
+    background-color 0.15s ease;
+
+  & > svg {
+    transition: transform 0.2s ease;
+    transform: ${({ $expanded }) => $expanded ? "rotate(90deg)" : "rotate(0deg)"};
+    fill: ${Styles.color.grey.charcoal};
+  }
+
+  &:hover {
+    background-color: ${Styles.color.grey.light};
+  }
+`;
 const ActionBar = styled.div `
   display: flex;
   justify-content: space-between;
@@ -22598,7 +22627,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     startingPage: 1,
     rowsPerPage: 10,
     totalRows: data.length,
-}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, defaultFilters, staticFilters, enableShowHide, globalActions, }) {
+}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, defaultFilters, staticFilters, enableShowHide, globalActions, showExpandedRowToggle = false, renderExpandedRow, }) {
     const [rowSelection, setRowSelection] = useState({});
     const [selectedRows] = useState({});
     const [pageIndex, setPageIndex] = useState(paginationDetails?.startingPage);
@@ -22658,6 +22687,14 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     });
     const [rowStatusesState, setRowStatusesState] = useState(rowStatuses || {});
     const [filterMenuOpen, setFilterMenuOpen] = useState({});
+    const [expandedRows, setExpandedRows] = useState(new Set());
+    const toggleRowExpanded = (rowId) => {
+        setExpandedRows((prev) => {
+            const next = new Set(prev);
+            next.has(rowId) ? next.delete(rowId) : next.add(rowId);
+            return next;
+        });
+    };
     useEffect(() => {
         setRowStatusesState(rowStatuses || {});
     }, [rowStatuses]);
@@ -22731,6 +22768,18 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     };
     const enhancedColumns = useMemo$1(() => {
         const cols = [];
+        if (showExpandedRowToggle) {
+            cols.push({
+                id: "expand",
+                header: "",
+                cell: ({ row }) => !!renderExpandedRow?.(row) ? (a__default.createElement(ExpandChevronButton, { "$expanded": expandedRows.has(row.id), onClick: (e) => {
+                        e.stopPropagation();
+                        toggleRowExpanded(row.id);
+                    }, "aria-label": expandedRows.has(row.id) ? "Collapse row" : "Expand row" },
+                    a__default.createElement(StellaIcon, { iconName: "chevron-right", size: 14 }))) : (a__default.createElement(a__default.Fragment, null)),
+                size: 36,
+            });
+        }
         if (showSelection) {
             cols.push({
                 id: "select",
@@ -22762,6 +22811,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         onRowSelect,
         showSelection,
         showRowOptions,
+        expandedRows,
     ]);
     const table = useReactTable({
         data: localData,
@@ -22867,7 +22917,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     };
     return (a__default.createElement(a__default.Fragment, null,
         !isLoading && (a__default.createElement(ActionBar, null,
-            a__default.createElement(GlobalActionWrapper, null, globalActions?.map((action) => action.element)),
+            a__default.createElement(GlobalActionWrapper, null, globalActions?.(table)),
             a__default.createElement(GlobalActionWrapper, null, enableShowHide && (a__default.createElement(a__default.Fragment, null,
                 a__default.createElement(IconButton, { ref: visibilityButtonRef, ariaLabel: "Column show hide button", variant: "tertiary", iconName: "table", onClick: () => {
                         const rect = visibilityButtonRef.current?.getBoundingClientRect();
@@ -22929,7 +22979,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                     }, key: index + "loading-row" }, Array.from({
                     length: 10,
                 }).map((_, i) => (a__default.createElement(LoadingShimmer, { key: `${i}-loading`, "$width": "110px", "$height": "25px" }))))))))) : (a__default.createElement(StyledTable, { id: `${id}-table`, ...htmlProps },
-                a__default.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a__default.createElement(HeaderRow, { key: headerGroup.id }, headerGroup.headers.map((header, i) => {
+                a__default.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a__default.createElement(HeaderRow, { key: headerGroup.id, "$isEmpty": table.getRowModel().rows.length === 0 }, headerGroup.headers.map((header, i) => {
                     return (a__default.createElement(TableHeaderCell, { key: header.id, serverSide: serverSide, header: header, filters: filters, sorting: sorting, scrollPosition: scrollState, onFilterMenuInteraction: (id, active) => {
                             setFilterMenuOpen((prev) => ({
                                 ...prev,
@@ -22945,45 +22995,57 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                 }))))),
                 a__default.createElement("tbody", null,
                     table.getRowModel().rows.length === 0 && (a__default.createElement(EmptyTableState, { header: emptyTableState?.header || "No data available.", subHeader: emptyTableState?.subHeader, showClearFilterButton: emptyTableState?.showClearFilterButton, onClearFilters: resetTable, colSpan: table.getVisibleLeafColumns().length, size: "large" })),
-                    table.getRowModel().rows.map((row) => (a__default.createElement(CellRow, { key: row.id, onClick: () => onRowClick?.(row.original), "$isClickable": !!onRowClick }, row.getVisibleCells().map((cell) => {
-                        const value = flexRender(cell.column.columnDef.cell, {
-                            ...cell.getContext(),
-                            localValue: rowState[row.id]?.[cell.column.id],
-                            onLocalChange: (val) => handleInputChange(row.id, cell.column.id, val),
-                        });
-                        const meta = cell.column.columnDef
-                            .meta;
-                        return (a__default.createElement(BodyCell, { key: cell.id, style: {
-                                width: cell.column.getSize(),
-                                textAlign: meta?.cellAlign ||
-                                    (typeof cell.getValue() === "number" ||
-                                        meta?.dataType === "number"
-                                        ? "right"
-                                        : "left"),
-                                boxShadow: scrollState.atLeft &&
-                                    cell.column.getIsPinned() === "left"
-                                    ? "none"
-                                    : scrollState.atRight &&
-                                        cell.column.getIsPinned() === "right"
+                    table.getRowModel().rows.map((row) => (a__default.createElement(a__default.Fragment, { key: row.id },
+                        a__default.createElement(CellRow, { onClick: () => {
+                                if (!showExpandedRowToggle &&
+                                    !!renderExpandedRow?.(row))
+                                    toggleRowExpanded(row.id);
+                                onRowClick?.(row.original);
+                            }, "$isClickable": !!onRowClick }, row.getVisibleCells().map((cell) => {
+                            const value = flexRender(cell.column.columnDef.cell, {
+                                ...cell.getContext(),
+                                localValue: rowState[row.id]?.[cell.column.id],
+                                onLocalChange: (val) => handleInputChange(row.id, cell.column.id, val),
+                            });
+                            const meta = cell.column.columnDef
+                                .meta;
+                            return (a__default.createElement(BodyCell, { key: cell.id, style: {
+                                    width: cell.column.getSize(),
+                                    textAlign: meta?.cellAlign ||
+                                        (typeof cell.getValue() === "number" ||
+                                            meta?.dataType === "number"
+                                            ? "right"
+                                            : "left"),
+                                    boxShadow: scrollState.atLeft &&
+                                        cell.column.getIsPinned() === "left"
                                         ? "none"
-                                        : undefined,
-                                backgroundColor: table
-                                    .getSelectedRowModel()
-                                    .rows.find((r) => r.id === row.id)
-                                    ? "#EBF0FA"
-                                    : rowStatusesState?.[row.id] === "action-pending"
-                                        ? "#FFFDEB"
-                                        : rowStatusesState?.[row.id] === "completed"
-                                            ? "#F5F5F5"
-                                            : "",
-                            }, "$isPinnedLeft": cell.column.getIsPinned() === "left", "$isPinnedRight": cell.column.getIsPinned() === "right", "$columnInfo": cell.column, "$isLastRow": serverSide
-                                ? row.index ===
-                                    table.getRowModel().rows.length - 1
-                                : row.index -
-                                    pagination.pageSize * pagination.pageIndex ===
-                                    table.getRowModel().rows.length - 1 }, value));
-                    })))))))),
-            showPagination && paginationDetails?.totalRows > 0 && (a__default.createElement(CustomPagination, { "$hasData": table.getRowModel().rows.length > 0, totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
+                                        : scrollState.atRight &&
+                                            cell.column.getIsPinned() === "right"
+                                            ? "none"
+                                            : undefined,
+                                    backgroundColor: table
+                                        .getSelectedRowModel()
+                                        .rows.find((r) => r.id === row.id)
+                                        ? "#EBF0FA"
+                                        : rowStatusesState?.[row.id] ===
+                                            "action-pending"
+                                            ? "#FFFDEB"
+                                            : rowStatusesState?.[row.id] === "completed"
+                                                ? "#F5F5F5"
+                                                : "",
+                                }, "$isPinnedLeft": cell.column.getIsPinned() === "left", "$isPinnedRight": cell.column.getIsPinned() === "right", "$columnInfo": cell.column, "$isLastRow": serverSide
+                                    ? row.index ===
+                                        table.getRowModel().rows.length - 1
+                                    : row.index -
+                                        pagination.pageSize *
+                                            pagination.pageIndex ===
+                                        table.getRowModel().rows.length - 1 }, value));
+                        })),
+                        expandedRows.has(row.id) &&
+                            renderExpandedRow &&
+                            !!renderExpandedRow(row) && (a__default.createElement(ExpandedContentRow, null,
+                            a__default.createElement(ExpandedContentCell, { colSpan: table.getVisibleLeafColumns().length }, renderExpandedRow(row))))))))))),
+            showPagination && paginationDetails?.totalRows > 0 && (a__default.createElement(CustomPagination, { "$hasData": table.getRowModel().rows.length > 0, "$isEmpty": table.getRowModel().rows.length === 0, totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
                     table.toggleAllRowsSelected(false);
                     setPageIndex(page);
                     setPagination((prev) => ({