@digital-ai/dot-components 2.20.1 → 2.21.0

package/package.json

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

package/src/lib/components/breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { MouseEvent as ReactMouseEvent } from 'react';
 import { CommonProps } from '../CommonProps';
 import { LinkUnderline } from '../link/Link';
 export type BreadcrumbItem = {
@@ -8,7 +8,7 @@ export type BreadcrumbItem = {
     characterLimit?: number;
     /** link the breadcrumb goes to */
     href?: string;
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    onClick?: (event: ReactMouseEvent<HTMLAnchorElement>) => void;
     /** text displayed */
     text: string;
     /** determines if and when the underline will be shown */

package/src/lib/components/card/Card.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export interface CardProps extends CommonProps {
-    /** The content for the Card.*/
     children: ReactNode;
 }
 export declare const DotCard: ({ ariaLabel, children, className, "data-testid": dataTestId, }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/card/Card.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const rootClassName = "dot-card";
+export declare const StyledCard: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").CardTypeMap<{}, "div">>, any, {}, never>;

package/src/lib/components/date-picker/DatePicker.styles.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const rootClassName = "dot-date-picker";
+export declare const popperClassName = "dot-date-picker-popper";
 export declare const containerClassName = "dot-date-picker-container";
 export declare const rectanglePickersDayClassName = "dot-rectangle-pickers-day";
 export declare const StyledDatePickerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/src/lib/components/input-form-fields/InputFormFields.propTypes.d.ts

@@ -28,7 +28,9 @@ export interface InputProps extends CommonProps {
     /** The label content. */
     label?: string;
     max?: number | string;
+    maxLength?: number;
     min?: number | string;
+    minLength?: number;
     /** The name of input element */
     name: string;
     /** A function that should be executed when the input loses focus */

package/src/lib/components/input-form-fields/InputText.d.ts

@@ -31,4 +31,4 @@ export interface EndIconProps {
     success?: boolean;
     warning?: boolean;
 }
-export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, max, maxRows, min, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/input-form-fields/common.styles.d.ts

@@ -1,5 +1,4 @@
-import { lightTheme as Theme } from '../../../lib/theme-provider/ThemeProvider';
-export declare const formHelperTextRootStyles: (theme: typeof Theme) => import("styled-components").FlattenSimpleInterpolation;
+export declare const formHelperTextRootStyles: (theme: any) => import("styled-components").FlattenSimpleInterpolation;
 export declare const adornmentIconStyles: () => import("styled-components").FlattenSimpleInterpolation;
-export declare const pickerInputStyles: (theme: typeof Theme) => import("styled-components").FlattenSimpleInterpolation;
-export declare const readOnlyStyles: (theme: typeof Theme) => import("styled-components").FlattenSimpleInterpolation;
+export declare const pickerInputStyles: (theme: any) => import("styled-components").FlattenSimpleInterpolation;
+export declare const readOnlyStyles: (theme: any) => import("styled-components").FlattenSimpleInterpolation;

package/src/lib/components/list/ListItem.styles.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { ComponentType } from 'react';
 export declare const flyoutListItemClassName = "dot-flyout-list-item";
 export declare const flyoutItemLinkClassName = "dot-flyout-item-link";
 export declare const listItemLinkClassName = "dot-list-item-link";
-export declare const StyledListItem: import("react").ComponentType<any> | keyof JSX.IntrinsicElements;
-export declare const StyledListItemButton: import("react").ComponentType<any> | keyof JSX.IntrinsicElements;
+export declare const StyledListItem: ComponentType<any> | keyof JSX.IntrinsicElements;
+export declare const StyledListItemButton: ComponentType<any> | keyof JSX.IntrinsicElements;

package/src/lib/components/stepper/Stepper.styles.d.ts

@@ -1,6 +1,9 @@
 export declare const rootClassName = "dot-stepper";
 export declare const stepListClassName = "dot-stepper-list";
 export declare const contentClassName = "dot-stepper-content";
+interface StyledStepActionsContainerProps {
+    displayCancelButton?: boolean;
+}
 export declare const StyledStepper: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface StyledScrollbarContainerProps {
     offset?: number;
@@ -8,8 +11,5 @@ interface StyledScrollbarContainerProps {
 export declare const ScrollbarContainer: import("styled-components").StyledComponent<"div", any, StyledScrollbarContainerProps, never>;
 export declare const StepContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StepDescription: import("styled-components").StyledComponent<({ ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: import("../typography/Typography").TypographyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
-interface StyledStepActionsContainerProps {
-    displayCancelButton?: boolean;
-}
 export declare const StepActionsContainer: import("styled-components").StyledComponent<"div", any, StyledStepActionsContainerProps, never>;
 export {};

package/src/lib/components/switch/Switch.d.ts

@@ -6,7 +6,7 @@ export type SwitchLabelPlacement = 'bottom' | 'end' | 'start' | 'top';
 export interface SwitchProps extends CommonProps {
     /** determines the default state of the switch */
     checked?: boolean;
-    /** color options available 'default', 'primary', 'secondary' */
+    /** DEPRECATED: this will be removed in an upcoming release */
     color?: SwitchColor;
     /** if true makes the switch disabled */
     disabled?: boolean;

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

@@ -2,6 +2,12 @@ import { CSSProperties, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 import { TypographyVariant } from '../typography/Typography';
 export type TextAlignment = 'center' | 'inherit' | 'justify' | 'left' | 'right';
+export interface CustomCellDataWrapper {
+    avatarIcon?: string;
+    avatarImageSrc?: string;
+    mainText: string;
+    secondaryText?: string;
+}
 export interface CellProps extends CommonProps {
     align?: TextAlignment;
     cellKey?: string;

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

@@ -1,7 +1,7 @@
 export type { DotColumnHeader, TableRowProps } from './utils/interfaces';
 export type { TableActionProps } from './TableAction';
 export type { TableActionsProps } from './TableActions';
-export type { TextAlignment } from './TableCell';
+export type { CustomCellDataWrapper, TextAlignment } from './TableCell';
 export type { TableDataWithPagination } from './TableDataWithPagination';
 export type { SortDirection } from './TableHeaderCell';
 export type { RowsPerPageOption } from './TablePagination';

package/src/lib/components/tabs/Tabs.d.ts

@@ -15,7 +15,7 @@ export interface TabProps extends CommonProps {
 export interface TabsProps extends CommonProps {
     /** Center the tabs */
     centered?: boolean;
-    /** The color of the tabs */
+    /** DEPRECATED: this will be removed in an upcoming release */
     color?: TabsColor;
     /** The value of the initially selected tab */
     initialValue?: any;

package/src/lib/theme-provider/colors/light-theme-colors.d.ts

@@ -35,9 +35,11 @@ export declare const n400 = "#667385";
 export declare const n500 = "#4b5a6f";
 export declare const n600 = "#445267";
 export declare const n700 = "#3b485c";
+export declare const n700_70 = "rgba(59, 72, 92, 0.7)";
 export declare const n700_90 = "rgba(59, 72, 92, 0.9)";
 export declare const n800 = "#333f52";
 export declare const n900 = "#232e40";
+export declare const n900_20 = "rgba(35, 46, 64, 0.2)";
 export declare const n900_70 = "rgba(35, 46, 64, 0.7)";
 export declare const nA100 = "#88b1ff";
 export declare const nA200 = "#5590ff";

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

@@ -26,6 +26,10 @@ export interface BreakpointOptions {
     };
 }
 export interface FigmaTheme {
+    appToolbar: {
+        background: string;
+        btnHover: string;
+    };
     background: {
         level0: {
             bckgGray: string;