@digital-ai/dot-components 1.1.0 → 1.1.1

package/lib/components/auto-complete/AutoComplete.d.ts

@@ -1,5 +1,13 @@
 import { ChangeEvent, Ref } from 'react';
 import { CommonProps } from '../CommonProps';
+export interface ActionItem {
+    /** The icon to display on the button */
+    iconId: string;
+    /** Event callback */
+    onClick: () => void;
+    /** Text displayed */
+    text: string;
+}
 export declare type autoCompleteSize = 'medium' | 'small';
 export declare type AutoCompleteValue = string | string[] | AutoCompleteOption | AutoCompleteOption[];
 export interface AutoCompleteOption {
@@ -9,6 +17,8 @@ export interface AutoCompleteOption {
 }
 export declare const parseAutoCompleteValue: (value: AutoCompleteValue) => string;
 export interface AutoCompleteProps extends CommonProps {
+    /** Action button as the last element on the menu **/
+    actionItem?: ActionItem;
     /** This prop helps users to fill forms faster */
     autoFocus?: boolean;
     /** default option that is selected */
@@ -42,4 +52,4 @@ export interface AutoCompleteProps extends CommonProps {
     /** value if this is a controlled component */
     value?: AutoCompleteValue;
 }
-export declare const DotAutoComplete: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, error, freesolo, group, helperText, inputId, inputRef, label, multiple, onChange, options, placeholder, size, value, }: AutoCompleteProps) => JSX.Element;
+export declare const DotAutoComplete: ({ actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, error, freesolo, group, helperText, inputId, inputRef, label, multiple, onChange, options, placeholder, size, value, }: AutoCompleteProps) => JSX.Element;

package/lib/components/badge/Badge.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { CommonProps } from '../CommonProps';
+export declare type BadgeOverlap = 'circle' | 'rectangle' | 'circular' | 'rectangular';
+export interface BadgeProps extends CommonProps {
+    /** custom color code for the badge */
+    badgeColor?: string;
+    /** component which will be wrapped with the badge */
+    children: ReactNode;
+    /** if true, the badge will be completely hidden*/
+    invisible?: boolean;
+    /** outline shape of the child component */
+    overlap?: BadgeOverlap;
+}
+export declare const DotBadge: ({ ariaLabel, badgeColor, children, className, "data-testid": dataTestId, invisible, overlap, }: BadgeProps) => JSX.Element;

package/lib/components/badge/Badge.styles.d.ts

@@ -0,0 +1,3 @@
+import { BadgeProps } from './Badge';
+export declare const rootClassName = "dot-badge";
+export declare const StyledBadge: import("styled-components").StyledComponent<import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").BadgeTypeMap<{}, "div">>, any, BadgeProps, never>;

package/lib/components/button/Button.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { BaseButtonProps } from '../BaseButtonProps';
 export interface ButtonProps extends BaseButtonProps {
     /** The text for the button. Button text should be in sentence case. */
@@ -9,4 +9,4 @@ export interface ButtonProps extends BaseButtonProps {
     startIcon?: ReactNode;
 }
 /** This component wraps the Button component from @material-ui. */
-export declare const DotButton: ({ ariaLabel, autoFocus, children, className, "data-testid": dataTestId, disabled, disableRipple, endIcon, fullWidth, isSubmit, onClick, size, startIcon, titleTooltip, type, }: ButtonProps) => JSX.Element;
+export declare const DotButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/components/icon/Icon.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CommonProps } from '../CommonProps';
-export declare type IconFontSize = 'inherit' | 'default' | 'small';
+export declare type IconFontSize = 'inherit' | 'default' | 'small' | 'medium';
 export interface IconProps extends CommonProps {
     /** Determines the size of the icon and spacing around it */
     fontSize?: IconFontSize;

package/lib/components/index.d.ts

@@ -5,6 +5,7 @@ export { DotAppToolbar, AppToolbarProps } from './app-toolbar/AppToolbar';
 export { AutoCompleteOption, DotAutoComplete, AutoCompleteValue, parseAutoCompleteValue, } from './auto-complete/AutoComplete';
 export { AvatarProps, DotAvatar } from './avatar/Avatar';
 export { DotAvatarGroup } from './avatar-group/AvatarGroup';
+export { DotBadge } from './badge/Badge';
 export { BreadcrumbItem, DotBreadcrumbs } from './breadcrumbs/Breadcrumbs';
 export { DotButton } from './button/Button';
 export { DotButtonToggle } from './button-toggle/ButtonToggle';

package/lib/components/menu/Menu.d.ts

@@ -4,10 +4,13 @@ export declare type PopperPlacement = 'bottom-end' | 'bottom-start' | 'bottom' |
 export interface MenuProps extends CommonProps {
     /** Element that menu is attached to */
     anchorEl?: Element;
+    /** If true, compact vertical padding designed for keyboard and mouse input is used for the list and list items. **/
+    dense?: boolean;
     /** Disable the portal behavior. If true, children stay within parent DOM hierarchy. */
     disablePortal?: boolean;
     /** Unique ID that ties a particular menu to a specific element */
     id: string;
+    maxVisibleItems?: number;
     /** Array of items to be displayed inside the menu */
     menuItems: Array<MenuItemProps>;
     /** Determines the placement of the menu */
@@ -29,4 +32,4 @@ export interface MenuItemProps {
     /** A key that can be used to determine which item was clicked */
     key?: string;
 }
-export declare const DotMenu: ({ anchorEl, ariaLabel, className, "data-testid": dataTestId, disablePortal, id, menuItems, menuPlacement, onLeave, onSelect, open, }: MenuProps) => JSX.Element;
+export declare const DotMenu: ({ anchorEl, ariaLabel, className, "data-testid": dataTestId, dense, disablePortal, id, maxVisibleItems, menuItems, menuPlacement, onLeave, onSelect, open, }: MenuProps) => JSX.Element;

package/lib/components/split-button/SplitButton.styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 export declare const rootClassName = "dot-split-button-group";
 export declare const StyledSplitButtonGroup: import("styled-components").StyledComponent<import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").ButtonGroupTypeMap<{}, "div">>, any, {}, never>;
-export declare const StyledMenu: import("styled-components").StyledComponent<({ anchorEl, ariaLabel, className, "data-testid": dataTestId, disablePortal, id, menuItems, menuPlacement, onLeave, onSelect, open, }: import("../menu/Menu").MenuProps) => JSX.Element, any, {}, never>;
+export declare const StyledMenu: import("styled-components").StyledComponent<({ anchorEl, ariaLabel, className, "data-testid": dataTestId, dense, disablePortal, id, maxVisibleItems, menuItems, menuPlacement, onLeave, onSelect, open, }: import("../menu/Menu").MenuProps) => JSX.Element, any, {}, never>;

package/lib/components/table/Table.stories.data.d.ts

@@ -22,11 +22,11 @@ export declare const defaultColumns: ({
     sortable?: undefined;
 } | {
     id: string;
+    label: string;
     sortable: boolean;
-    width: string;
-    align: string;
-    label?: undefined;
+    width?: undefined;
     truncate?: undefined;
+    align?: undefined;
 })[];
 export declare const defaultData: ({
     id: string;
@@ -35,7 +35,13 @@ export declare const defaultData: ({
         title: string;
         hometown: string;
         fans: number;
-        delete: JSX.Element;
+        delete: {
+            actions: {
+                children: JSX.Element;
+                key: string;
+                onclick: () => void;
+            }[];
+        }[];
     };
 } | {
     id: string;
@@ -43,7 +49,13 @@ export declare const defaultData: ({
         title: string;
         hometown: string;
         fans: number;
-        delete: JSX.Element;
+        delete: {
+            actions: {
+                children: JSX.Element;
+                key: string;
+                onclick: () => void;
+            }[];
+        }[];
     };
     selected?: undefined;
 })[];

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

@@ -1,4 +1,6 @@
+/// <reference types="react" />
 import { Paper } from '@material-ui/core';
 export declare const rootClassName = "dot-table";
 export declare const StyledPaper: import("styled-components").StyledComponent<typeof Paper, any, {}, never>;
 export declare const StyledTableContainer: import("styled-components").StyledComponent<import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").TableContainerTypeMap<{}, "div">>, any, {}, never>;
+export declare const StyledMenu: import("styled-components").StyledComponent<({ anchorEl, ariaLabel, className, "data-testid": dataTestId, dense, disablePortal, id, maxVisibleItems, menuItems, menuPlacement, onLeave, onSelect, open, }: import("../menu/Menu").MenuProps) => JSX.Element, any, {}, never>;

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

@@ -7,8 +7,9 @@ export interface CellProps extends CommonProps {
     id?: string;
     noWrap?: boolean;
     value?: any;
+    onActionMenuTrigger?: (el: HTMLElement, menuItem: []) => void;
 }
 /**
  * A wrapper component around the TableCell component from @material-ui.
  */
-export declare const DotBodyCell: ({ ariaLabel, align, className, colspan, "data-testid": dataTestId, id, noWrap, value, }: CellProps) => JSX.Element;
+export declare const DotBodyCell: ({ ariaLabel, align, className, colspan, "data-testid": dataTestId, noWrap, value, onActionMenuTrigger, }: CellProps) => JSX.Element;

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

@@ -11,6 +11,8 @@ export interface RowProps extends CommonProps {
     columns: Array<DotColumnHeader>;
     /** The table body row data */
     data: TableRowProps;
+    /** Event callback of action button of menu */
+    onActionMenuTrigger: (el: HTMLElement, menuItem: []) => void;
     /** Event callback */
     onClick?: (event: MouseEvent, id: string) => void;
     /** if the row is selected */
@@ -20,5 +22,5 @@ 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: ({ columns, data, onClick, selected }: RowProps) => JSX.Element;
+export declare const DotTableRow: ({ columns, data, onActionMenuTrigger, onClick, selected, }: RowProps) => JSX.Element;
 export declare const EmptyDotRow: ({ cols, message, }: EmptyRowProps) => JSX.Element;

package/package.json

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