@indico-data/design-system 3.0.10 → 3.2.0

package/lib/components/stepper/types.d.ts

@@ -1,13 +1,21 @@
 import { ReactNode } from 'react';
 export interface StepperProps {
+    /** An array of step objects that define the stepper navigation. */
     steps: Step[];
     currentStep?: number;
+    /** The header content for the legend. */
     legendHeader?: ReactNode;
+    /** The footer content for the legend. */
     legendFooter?: ReactNode;
+    /** The function to call when the back button is clicked. */
     onBackClick: () => void;
+    /** The function to call when the next button is clicked. */
     onNextClick: () => void;
+    /** The function to call when the finish button is clicked. */
     onFinishClick: () => void;
+    /** Any item passed to this component as a child will be rendered as a step. */
     children: React.ReactNode;
+    /** The function to call when a step is clicked ont he legend. */
     onStepClick: (step: number) => void;
 }
 export interface StepperLegendProps {
@@ -16,6 +24,7 @@ export interface StepperLegendProps {
     onStepClick: (step: number) => void;
 }
 export interface Step {
+    /** Display text for the step in the sidebar/legend */
     label: string;
     isCompleted?: boolean;
     isNextDisabled?: boolean;

package/lib/components/table/types.d.ts

@@ -10,13 +10,22 @@ export interface PinnableColumn<T> extends RDTTableColumn<T> {
 }
 export type TableColumn<T> = PinnableColumn<T>;
 export interface TableProps<T> extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
+    /** The columns to display in the table. All columns require a unique id property. For pinned columns, please see the pinned example below. */
     columns: TableColumn<T>[];
+    /** Disables the Table section */
     isDisabled?: boolean;
+    /** It sets the loading of the table */
     isLoading?: boolean;
+    /** Accepts: ltr, rtl, or auto. When set to auto (default), RDT will attempt to detect direction by checking the HTML and DIV tags. For cases where you need to force rtl, or ltr just set this option manually (i.e. SSR). */
     direction?: Direction;
+    /** Show a sub header between the table and table header */
     subHeaderAlign?: 'left' | 'right' | 'center';
+    /** Enables height to be set to the full height of the container */
     isFullHeight?: boolean;
+    /** The text to display in the total entries section. This is hidden if 1. No pagination exists, 2. No string is passed. */
     totalEntriesText?: string;
+    /** Allows the pinning of columns to the left hand side. This is required when using the column pin API */
     canPinColumns?: boolean;
+    /** Callback that receives the IDs of the pinned columns when they change. */
     onPinnedColumnsChange?: (pinnedColumnIds: any[]) => void;
 }

package/lib/components/tanstackTable/TankstackTable.types.d.ts

@@ -1,9 +1,14 @@
 import { Row, ColumnDef, SortingState } from '@tanstack/react-table';
 export type WithPaginationProps = {
+    /** Number of rows to display per pagination page. */
     rowsPerPage: number;
+    /** Total number of rows in the table. */
     rowCount: number;
+    /** Callback when the page changes. */
     onChangePage: (page: number) => void;
+    /** Current page number. */
     currentPage: number;
+    /** Text to display for the total number of entries. */
     totalEntriesText?: string;
     showPagination: true;
 };
@@ -17,32 +22,52 @@ export type WithoutPaginationProps = {
 };
 export type PaginationProps = WithPaginationProps | WithoutPaginationProps;
 export type Props<T extends object> = {
+    /** Array of data items. These are the items that will be displayed in the table cell. */
     data: T[];
+    /** Striped rows */
     isStriped?: boolean;
+    /** Column definitions including an `id` field. This is how you define your table structure. */
     columns: ColumnDef<T & {
         id: string;
     }>[];
+    /** Additional option for class names. */
     className?: string;
+    /** class name for styling the action bar. */
     actionBarClassName?: string;
+    /** Component for table actions with selected items. */
     TableActions?: React.ComponentType<{
         selectedItems: Row<any>[];
         unselectRows: () => void;
     }>;
+    /** Error state of the table. */
     error?: {
         hasError: boolean;
         errorMessage?: string;
     };
+    /** Enables row selection or defines selection conditions. */
     enableRowSelection?: boolean | ((row: Row<T>) => boolean);
+    /** Function to clear applied filters. */
     clearFilters?: () => void;
+    /** Indicates if filters are applied. */
     hasFilters?: boolean;
+    /** When this is true, the table is considered to be in a loading state. */
     isLoading?: boolean;
+    /** Message to display when the table is loading. */
     isLoadingMessage?: string;
+    /** Columns that are pinned by default. */
     defaultPinnedColumns?: string[];
+    /** Callback when a row is clicked. */
     onClickRow?: ((row: Row<T>) => void) | null;
+    /** Callback when a row is clicked. */
     onRowClick?: (row: T) => void;
+    /** Array of active rows. */
     activeRows?: string[];
+    /** Row selection state. */
     rowSelection?: Record<string, boolean>;
+    /** Callback when a row is selected. */
     onRowSelectionChange?: (updater: Record<string, boolean>) => void;
+    /** Callback when all rows are selected. */
     onSelectAllChange?: (isSelected: boolean) => void;
+    /** You may pass a default sorting state to the table. This will be used to sort the table by default. This is useful if you want to sort the table by a column by default. */
     defaultSorting?: SortingState;
 } & PaginationProps;

package/lib/components/tanstackTable/components/ActionBar/ActionBar.d.ts

@@ -1,16 +1,20 @@
 import React from 'react';
 import { Row, Table } from '@tanstack/react-table';
 type Props<T extends object> = {
+    /** Table instance. */
     table: Table<T & {
         id: string;
     }>;
+    /** Component for table actions with selected items. */
     TableActions?: React.ComponentType<{
         selectedItems: Row<T & {
             id: string;
         }>[];
         unselectRows: () => void;
     }>;
+    /** class name for styling. */
     className?: string;
+    /** React node to display in the action bar. */
     children?: React.ReactNode;
 };
 export declare function ActionBar<T extends object>({ table, TableActions, className, children, }: Props<T>): import("react/jsx-runtime").JSX.Element;

package/lib/components/tooltip/Tooltip.d.ts

@@ -1,12 +1,18 @@
 import { PlacesType } from 'react-tooltip';
 interface TooltipProps {
     id: string;
+    /** Whether the tooltip should be shown on click */
     clickToShow?: boolean;
+    /** The delay in milliseconds before the tooltip is shown */
     delayShow?: number;
+    /** The delay in milliseconds before the tooltip is hidden */
     delayHide?: number;
     children: React.ReactNode;
+    /** This is an override for the z-index of the tooltip */
     zIndex?: number;
+    /** The placement of the tooltip */
     place?: PlacesType;
+    /** The content of the tooltip */
     [key: string]: any;
 }
 export declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, zIndex, place, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/truncate/types.d.ts

@@ -1,7 +1,11 @@
 export interface TruncateProps {
+    /** The number of lines to truncate the text to. If left blank, it will default to 1 line. */
     lineClamp?: number;
+    /** The string to truncate. This value will also be displayed in the tooltip when the text is truncated. */
     truncateString: string;
+    /** Whether to show the tooltip. If left blank, it will default to true. If set to false, the tooltip will not be shown. */
     hasTooltip?: boolean;
+    /** The id of the tooltip. If an ID is not provided, it will generate one from uuid */
     tooltipId?: string;
     [key: string]: any;
 }