@stella-source/stellasource-dsl 3.6.0 → 4.0.0

package/dist/esm/types/components/StellaIcon/types.d.ts

@@ -1,4 +1,4 @@
-export type StellaIconDefinition = "search" | "required" | "help" | "info" | "kebab-menu" | "error" | "warning" | "filter" | "sort" | "close" | "add" | "stella-logo" | "chevron-right" | "chevron-down" | "caret-right" | "caret-down" | "success" | "in-progress" | "complete" | "calendar" | "unlocked" | "locked" | "settings" | "preferences" | "account-settings" | "user" | "company-details" | "collapse" | "expand" | "star-filled" | "star-outline" | "dashboard" | "shopping-cart" | "calculator" | "pricing-strategies" | "stella-finance" | "resource-center" | "line-item-pricing" | "basket-pricing" | "paperclip" | "thumbs-up" | "thumbs-down" | "send" | "palette" | "eye" | "eye-slash" | "sync" | "chevron-left" | "check-square" | "money" | "currency-dollar" | "x-circle" | "empty" | "hourglass-simple-low" | "broadcast" | "list-checks" | "note-pencil" | "truck";
+export type StellaIconDefinition = "search" | "required" | "help" | "info" | "kebab-menu" | "error" | "warning" | "filter" | "sort" | "close" | "add" | "stella-logo" | "chevron-right" | "chevron-down" | "caret-right" | "caret-down" | "success" | "in-progress" | "complete" | "calendar" | "unlocked" | "locked" | "settings" | "preferences" | "account-settings" | "user" | "company-details" | "collapse" | "expand" | "star-filled" | "star-outline" | "dashboard" | "shopping-cart" | "calculator" | "pricing-strategies" | "stella-finance" | "resource-center" | "line-item-pricing" | "basket-pricing" | "paperclip" | "thumbs-up" | "thumbs-down" | "send" | "palette" | "eye" | "eye-slash" | "sync" | "chevron-left" | "check-square" | "money" | "currency-dollar" | "x-circle" | "empty" | "hourglass-simple-low" | "broadcast" | "list-checks" | "note-pencil" | "truck" | "table";
 export interface StellaIconProps {
     iconName: StellaIconDefinition;
     size?: number;

package/dist/esm/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, }: 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, }: TableProps<T>): React.JSX.Element;
 export default Table;

package/dist/esm/types/components/Table/TableComponents/CheckboxDropdownMenu.d.ts

@@ -0,0 +1,26 @@
+import React, { RefObject } from "react";
+export interface CheckboxDropdownOption {
+    key: string;
+    value: string;
+}
+interface CheckboxDropdownMenuProps {
+    options: CheckboxDropdownOption[];
+    selected: (string | number)[];
+    mode?: "search" | "singleSelect" | "multiSelect";
+    coords: {
+        top: number;
+        left: number;
+    };
+    menuRef: RefObject<HTMLDivElement | null>;
+    onApply: (selected: (string | number)[]) => void;
+    onClear: () => void;
+    showSelectAll?: boolean;
+    showClear?: boolean;
+    searchInputId?: string;
+    searchInputLabel?: string;
+    onSearch?: (value: string) => void;
+    onSearchBlur?: () => void;
+    serverSide?: boolean;
+}
+declare const CheckboxDropdownMenu: ({ options, selected, mode, coords, menuRef, onApply, onClear, showSelectAll, showClear, searchInputId, searchInputLabel, onSearch, onSearchBlur, serverSide, }: CheckboxDropdownMenuProps) => React.ReactPortal;
+export default CheckboxDropdownMenu;

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

@@ -80,4 +80,6 @@ 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;
-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, };
+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, };

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

@@ -1,5 +1,5 @@
-import { ColumnDef, ColumnFiltersState, Row } from "@tanstack/react-table";
-import { HTMLAttributes } from "react";
+import { ColumnDef, ColumnFiltersState, Row, Table } from "@tanstack/react-table";
+import { HTMLAttributes, ReactElement } from "react";
 declare enum TableVariant {
     PRIMARY = "Primary",
     SECONDARY = "Secondary"
@@ -33,7 +33,7 @@ export interface TableProps<T> {
     }[];
     dataTestId?: string;
     dataAuto?: string;
-    id?: string;
+    id: string;
     className?: string;
     htmlProps?: HTMLAttributes<HTMLTableElement>;
     paginationDetails?: PaginationDetails;
@@ -53,6 +53,11 @@ export interface TableProps<T> {
         id: string;
         value: unknown;
     }[];
+    enableShowHide?: boolean;
+    globalActions?: {
+        element: ReactElement;
+        onChange?: (table?: Table<T>) => void;
+    }[];
 }
 export interface CustomColumnMeta {
     headerAlign?: "left" | "right";
@@ -64,6 +69,7 @@ export interface CustomColumnMeta {
         value?: string;
     }[];
     filterMode?: "singleSelect" | "multiSelect" | "search";
+    defaultHidden?: boolean;
 }
 export type RowStatus = "action-pending" | "completed";
 export {};

package/dist/esm/types/components/Table/useTableState.d.ts

@@ -0,0 +1,9 @@
+import { ColumnSizingState, SortingState, VisibilityState } from "@tanstack/react-table";
+type PersistedTableState = {
+    columnVisibility: VisibilityState;
+    columnSizing: ColumnSizingState;
+    sorting: SortingState;
+};
+export declare function loadTableState(tableId: string): Partial<PersistedTableState>;
+export declare function usePersistTableState(tableId: string, state: Partial<PersistedTableState>, sizingDebounceMs?: number): void;
+export {};

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import React$1, { HTMLAttributes, ReactElement } from 'react';
 import { TooltipProps as TooltipProps$1 } from 'antd';
-import { ColumnDef, ColumnFiltersState, Row } from '@tanstack/react-table';
+import { ColumnDef, ColumnFiltersState, Row, Table as Table$1 } from '@tanstack/react-table';
 
 interface LabelProps {
     id: string;
@@ -98,7 +98,7 @@ interface TooltipProps {
 
 declare const Tooltip: ({ title, placement, type, ariaLabel, iconSize, htmlProps, className, id, }: TooltipProps) => React$1.JSX.Element;
 
-type StellaIconDefinition = "search" | "required" | "help" | "info" | "kebab-menu" | "error" | "warning" | "filter" | "sort" | "close" | "add" | "stella-logo" | "chevron-right" | "chevron-down" | "caret-right" | "caret-down" | "success" | "in-progress" | "complete" | "calendar" | "unlocked" | "locked" | "settings" | "preferences" | "account-settings" | "user" | "company-details" | "collapse" | "expand" | "star-filled" | "star-outline" | "dashboard" | "shopping-cart" | "calculator" | "pricing-strategies" | "stella-finance" | "resource-center" | "line-item-pricing" | "basket-pricing" | "paperclip" | "thumbs-up" | "thumbs-down" | "send" | "palette" | "eye" | "eye-slash" | "sync" | "chevron-left" | "check-square" | "money" | "currency-dollar" | "x-circle" | "empty" | "hourglass-simple-low" | "broadcast" | "list-checks" | "note-pencil" | "truck";
+type StellaIconDefinition = "search" | "required" | "help" | "info" | "kebab-menu" | "error" | "warning" | "filter" | "sort" | "close" | "add" | "stella-logo" | "chevron-right" | "chevron-down" | "caret-right" | "caret-down" | "success" | "in-progress" | "complete" | "calendar" | "unlocked" | "locked" | "settings" | "preferences" | "account-settings" | "user" | "company-details" | "collapse" | "expand" | "star-filled" | "star-outline" | "dashboard" | "shopping-cart" | "calculator" | "pricing-strategies" | "stella-finance" | "resource-center" | "line-item-pricing" | "basket-pricing" | "paperclip" | "thumbs-up" | "thumbs-down" | "send" | "palette" | "eye" | "eye-slash" | "sync" | "chevron-left" | "check-square" | "money" | "currency-dollar" | "x-circle" | "empty" | "hourglass-simple-low" | "broadcast" | "list-checks" | "note-pencil" | "truck" | "table";
 interface StellaIconProps {
     iconName: StellaIconDefinition;
     size?: number;
@@ -260,7 +260,7 @@ interface TableProps<T> {
     }[];
     dataTestId?: string;
     dataAuto?: string;
-    id?: string;
+    id: string;
     className?: string;
     htmlProps?: HTMLAttributes<HTMLTableElement>;
     paginationDetails?: PaginationDetails;
@@ -280,6 +280,11 @@ interface TableProps<T> {
         id: string;
         value: unknown;
     }[];
+    enableShowHide?: boolean;
+    globalActions?: {
+        element: ReactElement;
+        onChange?: (table?: Table$1<T>) => void;
+    }[];
 }
 interface CustomColumnMeta {
     headerAlign?: "left" | "right";
@@ -291,10 +296,11 @@ interface CustomColumnMeta {
         value?: string;
     }[];
     filterMode?: "singleSelect" | "multiSelect" | "search";
+    defaultHidden?: boolean;
 }
 type RowStatus = "action-pending" | "completed";
 
-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, }: TableProps<T>): React$1.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, }: TableProps<T>): React$1.JSX.Element;
 
 interface PaginationProps {
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stella-source/stellasource-dsl",
-  "version": "3.6.0",
+  "version": "4.0.0",
   "description": "Design System owned and operated by Stella Source.",
   "files": [
     "dist"