@digital-ai/dot-components 4.18.0 → 4.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/index.d.ts

@@ -50,6 +50,7 @@ export type { StickyWithBorderProps } from './sticky-with-border';
 export type { SlotProps, TooltipProps, TooltipHoverVisibility, TooltipPlacement, } from './tooltip';
 export type { DashboardHeaderProps } from './analytics/dashboard-header/DashboardHeader';
 export type { ChipTooltipProps, ChipProps, ChipSize } from './chip/Chip';
+export type { SearchProps } from './search';
 export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
@@ -135,4 +136,5 @@ export { DotCarousel } from './carousel/Carousel';
 export { DotStickyWithBorder } from './sticky-with-border';
 export { CreateUUID } from './createUUID';
 export { BoardStatusProvider, ColumnStatusProvider, DotBoard, DotBoardColumn, DotBoardColumnActionBar, DotBoardColumnCollapse, DotBoardColumnExpand, DotBoardColumnHeader, DotBoardColumnItems, DotBoardColumnSummary, useBoardStatus, useColumnStatus, } from './board';
+export { DotSearch } from './search';
 export { useKeyPress } from '../hooks/useKeyPress';

package/src/lib/components/search/Search.d.ts

@@ -0,0 +1,12 @@
+import { InputTextProps } from '../input-form-fields/InputText';
+export interface SearchProps extends Omit<InputTextProps, 'autoComplete' | 'hasResizer' | 'maxRows' | 'minRows' | 'multiline' | 'endIcon' | 'error' | 'onChange' | 'startIcon' | 'success' | 'type' | 'warning' | 'id' | 'name'> {
+    /** Input's ID attribute */
+    id?: string;
+    /** Input's name attribute */
+    name?: string;
+    /** Called when a search is performed with the current input value */
+    onSearch: (searchValue: string) => void;
+    /** The current value of the input */
+    value: string;
+}
+export declare const DotSearch: ({ ariaLabel, className, "data-testid": dataTestId, disabled, hasDebounce, id, name, onSearch, onClear, placeholder, value, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/search/Search.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const rootClassName = "dot-search";
+export declare const StyledSearch: import("styled-components").StyledComponent<({ autoComplete, autoFocus, className, defaultValue, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, hasResizer, helperText, endIcon, endText, id, informationToolTip, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: import("../input-form-fields/InputText").InputTextProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/src/lib/components/search/index.d.ts

@@ -0,0 +1,2 @@
+export type { SearchProps } from './Search';
+export { DotSearch } from './Search';

package/src/lib/components/table/Table.d.ts

@@ -1,10 +1,6 @@
-import { Order } from './utils/models';
-import { TableProps, TableRowProps } from './utils/interfaces';
-export declare const sortComparator: (a: TableRowProps, b: TableRowProps, orderBy: string) => 0 | 1 | -1;
-export declare const getComparator: (order: Order, orderBy: string) => (a: TableRowProps, b: TableRowProps) => number;
-export declare function stableSort<T>(array: T[], comparator: (order: T, orderBy: T) => number): T[];
+import { TableProps } from './utils/interfaces';
 /**
  * A wrapper component around the Table component from @material-ui. This component can be used for
  *  creating a common structure for tables in the system.
  */
-export declare const DotTable: ({ actionsMenuPlacement, ariaLabel, bodyTypography, className, collapsibleTableOptions, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, labelRowsPerPage, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, rowsPerPageOptions, stickyHeader, sortable, toolbar, }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTable: ({ actionsMenuPlacement, ariaLabel, bodyTypography, className, collapsibleTableOptions, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, labelRowsPerPage, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, pinnedFirstColumn, rowsPerPage, rowsPerPageOptions, stickyHeader, sortable, toolbar, }: TableProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/table/TableBody.d.ts

@@ -19,6 +19,8 @@ export interface TableBodyProps extends CommonProps {
     multiSelectBody?: MultiSelectBody;
     /** Row click event callback **/
     onRowClick?: (event: MouseEvent, id: string) => void;
+    /** When true, the first column is visible all the time when scrolling horizontally  */
+    pinnedFirstColumn?: boolean;
     /** Typography variant which will be used for body cell values **/
     typography: TypographyVariant;
 }
@@ -26,4 +28,4 @@ export interface TableBodyProps extends CommonProps {
  * A wrapper component around the TableBody component from @material-ui. This component can be used
  * to determine the functionality of the table.
  */
-export declare const DotTableBody: ({ actionsMenuPlacement, collapsibleTableBody, columns, data, emptyMessage, multiSelectBody, onRowClick, typography, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTableBody: ({ actionsMenuPlacement, collapsibleTableBody, columns, data, emptyMessage, multiSelectBody, onRowClick, pinnedFirstColumn, typography, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/table/TableHeader.d.ts

@@ -3,4 +3,4 @@ import { HeaderProps } from './utils/interfaces';
  * A wrapper component around the TableHead component from @material-ui. This component can be used
  * to determine the functionality of the table header.
  */
-export declare const DotHeaderRow: ({ collapsibleTableOptions, columns, multiSelectHeader, onRequestSort, order, orderBy, sortable, typography, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotHeaderRow: ({ collapsibleTableOptions, columns, multiSelectHeader, onRequestSort, order, orderBy, pinnedFirstColumn, sortable, typography, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/table/TableHeaderCell.d.ts

@@ -6,6 +6,8 @@ export type SortDirection = 'asc' | 'desc';
 export interface HeaderCellProps {
     /** Allows cell text alignment: left, right, center  */
     align?: TextAlignment;
+    /** Optional prop used to add additional class on the component */
+    className?: string;
     /** Click event function to handle sorting */
     createSortHandler?: (property: string) => (event: MouseEvent<unknown>) => void;
     /** The Id of table cell */
@@ -14,6 +16,8 @@ export interface HeaderCellProps {
     order?: Order;
     /** The ID of the column that you are sorting by */
     orderBy?: string;
+    /** When true, column is visible all the time when scrolling horizontally  */
+    pinned?: boolean;
     /** Determines sorting order of ascending or descending */
     sortDirection?: SortDirection;
     /** Determines if sorting is enabled */
@@ -33,4 +37,4 @@ export interface HeaderCellProps {
  * A wrapper component around the TableCell component from @material-ui. This component should only
  * be used inside DotHeaderRow.
  */
-export declare const DotHeaderCell: ({ align, typography, createSortHandler, id, order, orderBy, sortable, sortDirection, uid, value, width, }: HeaderCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotHeaderCell: ({ align, className, typography, createSortHandler, id, order, orderBy, pinned, sortable, sortDirection, uid, value, width, }: HeaderCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/table/TableRow.d.ts

@@ -16,6 +16,8 @@ export interface RowProps extends CommonProps {
     onActionMenuTrigger: (el: HTMLElement, menuItem: Array<ReactNode>) => void;
     /** Event callback */
     onClick?: (event: MouseEvent, id: string) => void;
+    /** When true, first column is visible all the time when scrolling horizontally  */
+    pinnedFirstColumn?: boolean;
     /** uniques key of table cell */
     rowKey: string;
     /** if the row is selected */
@@ -27,4 +29,4 @@ export interface RowProps extends CommonProps {
  * A wrapper component around the TableRow component from @material-ui. This component can be used
  * for manipulating data prior to displaying the data inside the table
  */
-export declare const DotTableRow: ({ collapsibleTableBody, columns, className, data, multiSelectBody, onActionMenuTrigger, onClick, rowKey, selected, typography, }: RowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTableRow: ({ collapsibleTableBody, columns, className, data, multiSelectBody, onActionMenuTrigger, onClick, pinnedFirstColumn, rowKey, selected, typography, }: RowProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/table/utils/helpers.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 import { TypographyVariant } from '../../typography/Typography';
-import { TableRowProps } from './interfaces';
-import { MultiSelect } from './models';
+import { GetSortedPageDataProps, OnUpdateDataCallback, TableRowProps } from './interfaces';
+import { MultiSelect, Order } from './models';
 import { AvatarWithTextCell } from '../TableCell';
 import { InlineEditProps } from '../../inline-edit';
+import { RowsPerPageOption } from '../TablePagination';
 export declare const getFormattedTableCellValue: (value: any, typographyVariant: TypographyVariant) => ReactNode;
 export declare const renderAvatarWithTextCell: (avatarWithText: AvatarWithTextCell) => import("react/jsx-runtime").JSX.Element;
 export declare const renderInlineEditCell: (inlineEdit: InlineEditProps) => import("react/jsx-runtime").JSX.Element;
@@ -17,3 +18,8 @@ export declare const getBulkSelectedRowIds: (isChecked: boolean, selectedIds: st
 export declare const getExpandedRowIds: (expandedIds: string[], id: string, isExpand: boolean) => string[];
 export declare const parseCellMaxWidth: (width: string) => string;
 export declare const checkIsMultiselectOverTableHeaderRow: (multiSelect: MultiSelect | undefined, hasToolbar: boolean) => boolean;
+export declare const getSortedPageData: ({ data, onUpdateData, order, orderBy, rowsPerPage, }: GetSortedPageDataProps) => TableRowProps[];
+export declare const warnIfCountIgnored: (count: number, onUpdateData: OnUpdateDataCallback, rowsPerPage?: RowsPerPageOption) => void;
+export declare const sortComparator: (a: TableRowProps, b: TableRowProps, orderBy: string) => 0 | 1 | -1;
+export declare const getComparator: (order: Order, orderBy: string) => (a: TableRowProps, b: TableRowProps) => number;
+export declare function stableSort<T>(array: T[], comparator: (order: T, orderBy: T) => number): T[];

package/src/lib/components/table/utils/interfaces.d.ts

@@ -2,7 +2,7 @@ import { MouseEvent, ReactNode } from 'react';
 import { CommonProps } from '../../CommonProps';
 import { TypographyVariant } from '../../typography/Typography';
 import { PopperPlacement } from '../../menu/Menu';
-import { CollapsibleTableOptions } from '../collapsible-table/interfaces';
+import { CollapsibleTableOptions } from '../collapsible-table';
 import { MultiSelect, MultiSelectHeader, Order } from './models';
 import { TextAlignment } from '../TableCell';
 import { RowsPerPageOption } from '../TablePagination';
@@ -14,6 +14,7 @@ export interface TableRowProps extends CommonProps {
     /** if the row is selected */
     selected?: boolean;
 }
+export type OnUpdateDataCallback = (order: Order, orderBy: string, page: number, rowsPerPage: number) => void;
 export interface TableProps extends CommonProps {
     /** The popper placement for the actions menu **/
     actionsMenuPlacement?: PopperPlacement;
@@ -48,13 +49,15 @@ export interface TableProps extends CommonProps {
     /** Row click event callback */
     onRowClick?: (event: MouseEvent, id: string) => void;
     /** Update data callback if data is managed by consumer */
-    onUpdateData?: (order: Order, orderBy: string, page: number, rowsPerPage: number) => void;
+    onUpdateData?: OnUpdateDataCallback;
     /** The sort order of table data 'asc', 'desc' */
     order?: Order;
     /** The ID of the column that you are sorting by */
     orderBy?: string;
     /** The zero-based index of the current page  for paginated table */
     page?: number;
+    /** When true, first column is visible all the time when scrolling horizontally  */
+    pinnedFirstColumn?: boolean;
     /** Rows per page for paginated table */
     rowsPerPage?: RowsPerPageOption;
     /** Customizes the options of the rows per page select field. Default: [10, 25, 50, 100, 150, 200] */
@@ -83,6 +86,14 @@ export interface HeaderProps {
     order?: Order;
     /** The ID of the column that you are sorting by */
     orderBy?: string;
+    pinnedFirstColumn?: boolean;
     sortable: boolean;
     typography: TypographyVariant;
 }
+export interface GetSortedPageDataProps {
+    data: TableRowProps[];
+    onUpdateData?: OnUpdateDataCallback;
+    order: Order;
+    orderBy: string;
+    rowsPerPage: number;
+}

package/src/lib/theme-provider/interfaces.d.ts

@@ -163,6 +163,7 @@ export interface FigmaTheme {
     typography: {
         black: string;
         disabled: string;
+        disabledLightGray: string;
         gray: string;
         link: string;
         white: string;