@stella-source/stellasource-dsl 1.5.3 → 3.0.0

package/dist/esm/styles.css

@@ -21,7 +21,9 @@
   --pale-grey: #f5f5f5;
   --grey50: #e9edf5;
   --grey100: #d5dbe5;
+  --grey200: #bcc2ce;
   --grey500: #687182;
+  --grey700: #464f60;
   /* oranges */
   --orange: #ff7600;
   --light-orange: #ff9133;

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

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

@@ -3,6 +3,9 @@ interface HeaderIconButtonProps {
     $active: boolean;
     $sort?: false | SortDirection;
 }
+interface PaginationProps {
+    $hasData?: boolean;
+}
 declare const HeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {
     $isPinnedLeft?: boolean;
     $isPinnedRight?: boolean;
@@ -41,7 +44,7 @@ declare const LoadingShimmer: import("styled-components/dist/types").IStyledComp
     $width?: string;
     $height?: string;
 }>> & string;
-declare const CustomPagination: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Pagination/types").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/dist/types").Substitute<import("../Pagination/types").PaginationProps, PaginationProps>> & 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>> & string;
 declare const EmptyTableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
 declare const EmptyTableSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {

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

@@ -45,6 +45,14 @@ export interface TableProps<T> {
         showClearFilterButton?: boolean;
         onClearFilters?: () => void;
     };
+    defaultFilters?: {
+        id: string;
+        value: unknown;
+    }[];
+    staticFilters?: {
+        id: string;
+        value: unknown;
+    }[];
 }
 export interface CustomColumnMeta {
     headerAlign?: "left" | "right";
@@ -52,7 +60,7 @@ export interface CustomColumnMeta {
     dataType?: "string" | "number";
     pin?: "left" | "right";
     filterOptions?: string[] | number[];
-    singleSelect?: boolean;
+    filterMode?: "singleSelect" | "multiSelect" | "search";
 }
 export type RowStatus = "action-pending" | "completed";
 export {};

package/dist/esm/types/components/Tabs/Styles.d.ts

@@ -1,2 +1,12 @@
-declare const TabsBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-export { TabsBar };
+import { TabsVariant } from "./types";
+interface TabsStylesProps {
+    $variant: `${TabsVariant}`;
+    $isPill?: boolean;
+}
+interface NotificationBubbleProps {
+    $isActive?: boolean;
+}
+declare const TabsBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, TabsStylesProps>> & string;
+declare const TabButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TabsStylesProps>> & string;
+declare const NotificationBubble: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, NotificationBubbleProps>> & string;
+export { TabsBar, TabButton, NotificationBubble };

package/dist/esm/types/components/Tabs/Tab.d.ts

@@ -1,10 +1,14 @@
 import React, { HTMLAttributes } from "react";
+import { TabsVariant } from "./types";
 interface TabProps {
     id?: string;
     className?: string;
     onClick?: (tabLabel: string) => void;
-    label: string;
     htmlProps?: HTMLAttributes<HTMLButtonElement>;
+    active?: boolean;
+    variant?: `${TabsVariant}`;
+    notifications?: number;
+    label: string;
 }
-declare const Tab: ({ id, className, onClick, htmlProps, label }: TabProps) => React.JSX.Element;
+declare const Tab: ({ id, className, onClick, htmlProps, label, variant, active, notifications, }: TabProps) => React.JSX.Element;
 export default Tab;

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { TabsProps } from "./types";
-declare const Tabs: ({ id, className, tabs, activeTab, htmlProps, onTabClick, }: TabsProps) => React.JSX.Element;
+declare const Tabs: ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant, isPill, }: TabsProps) => React.JSX.Element;
 export default Tabs;

package/dist/esm/types/components/Tabs/Tabs.stories.d.ts

@@ -1,10 +1,17 @@
-import { TabsProps } from "./types";
+import { TabsProps, TabsVariant } from "./types";
 declare const _default: {
     title: string;
-    component: ({ id, className, tabs, activeTab, htmlProps, onTabClick, }: TabsProps) => import("react").JSX.Element;
+    component: ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant, isPill, }: TabsProps) => import("react").JSX.Element;
     tags: string[];
     parameters: {};
-    argTypes: {};
+    argTypes: {
+        variant: {
+            options: TabsVariant[];
+            control: {
+                type: string;
+            };
+        };
+    };
     args: TabsProps;
 };
 export default _default;

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

@@ -1,9 +1,29 @@
 import { HTMLAttributes } from "react";
-export interface TabsProps {
+export declare enum TabsVariant {
+    LIGHT = "light",
+    DARK = "dark"
+}
+interface TabsBaseProps {
     id?: string;
     className?: string;
     activeTab?: string;
     htmlProps?: HTMLAttributes<HTMLElement>;
-    tabs: string[];
+    defaultActiveTab?: string;
+    isPill?: boolean;
+    variant?: `${TabsVariant}`;
+    tabs: {
+        label: string;
+        notifications?: number;
+    }[];
     onTabClick: (label?: string) => void;
 }
+interface TabsPropsLight {
+    variant?: `${TabsVariant.LIGHT}`;
+    isPill?: boolean;
+}
+interface TabsPropsDark {
+    variant?: `${TabsVariant.DARK}`;
+    isPill?: never;
+}
+export type TabsProps = TabsBaseProps & (TabsPropsLight | TabsPropsDark);
+export {};

package/dist/esm/types/shared/tokens/index.d.ts

@@ -20,7 +20,9 @@ declare const Styles: {
             pale: string;
             50: string;
             100: string;
+            200: string;
             500: string;
+            700: string;
         };
         blue: {
             darkNavy: string;

package/dist/esm/types/shared/tokens/storybook/color.d.ts

@@ -34,8 +34,12 @@ declare const colorTokens: {
         50: string;
         /** #d5dbe5 */
         100: string;
+        /** #BCC2CE */
+        200: string;
         /** #687182 */
         500: string;
+        /** #464F60 */
+        700: string;
     };
     blue: {
         /** #1f4168 */

package/dist/esm/types/shared/utils/useDebounceCallback.d.ts

@@ -0,0 +1,10 @@
+type DebouncedCallback<T extends (...args: any[]) => any> = (...args: Parameters<T>) => void;
+type DebounceControls<T extends (...args: any[]) => any> = {
+    flush: () => void;
+    cancel: () => void;
+};
+/**
+ * Returns a debounced version of a callback, along with flush and cancel methods.
+ */
+export declare function useDebounceCallback<T extends (...args: any[]) => any>(callback: T, delay: number): [DebouncedCallback<T>, DebounceControls<T>];
+export {};

package/dist/index.d.ts

@@ -266,10 +266,18 @@ interface TableProps<T> {
         showClearFilterButton?: boolean;
         onClearFilters?: () => void;
     };
+    defaultFilters?: {
+        id: string;
+        value: unknown;
+    }[];
+    staticFilters?: {
+        id: string;
+        value: unknown;
+    }[];
 }
 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, }: 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, }: TableProps<T>): React$1.JSX.Element;
 
 interface PaginationProps {
     id?: string;
@@ -336,16 +344,35 @@ interface PaymentStatusProps {
 
 declare const PaymentStatus: ({ variant, id, className }: PaymentStatusProps) => React$1.JSX.Element;
 
-interface TabsProps {
+declare enum TabsVariant {
+    LIGHT = "light",
+    DARK = "dark"
+}
+interface TabsBaseProps {
     id?: string;
     className?: string;
     activeTab?: string;
     htmlProps?: HTMLAttributes<HTMLElement>;
-    tabs: string[];
+    defaultActiveTab?: string;
+    isPill?: boolean;
+    variant?: `${TabsVariant}`;
+    tabs: {
+        label: string;
+        notifications?: number;
+    }[];
     onTabClick: (label?: string) => void;
 }
+interface TabsPropsLight {
+    variant?: `${TabsVariant.LIGHT}`;
+    isPill?: boolean;
+}
+interface TabsPropsDark {
+    variant?: `${TabsVariant.DARK}`;
+    isPill?: never;
+}
+type TabsProps = TabsBaseProps & (TabsPropsLight | TabsPropsDark);
 
-declare const Tabs: ({ id, className, tabs, activeTab, htmlProps, onTabClick, }: TabsProps) => React$1.JSX.Element;
+declare const Tabs: ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant, isPill, }: TabsProps) => React$1.JSX.Element;
 
 declare const Styles: {
     color: {
@@ -369,7 +396,9 @@ declare const Styles: {
             pale: string;
             50: string;
             100: string;
+            200: string;
             500: string;
+            700: string;
         };
         blue: {
             darkNavy: string;

package/package.json

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