@digital-ai/dot-components 1.9.0 → 1.11.0

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

@@ -1,5 +1,5 @@
 import { ChangeEvent, ReactNode, Ref } from 'react';
-import { AutocompleteCloseReason } from '@material-ui/lab';
+import { AutocompleteCloseReason, AutocompleteGetTagProps, AutocompleteRenderOptionState } from '@material-ui/lab';
 import { CommonProps } from '../CommonProps';
 export declare const DEFAULT_ACTION_ITEM_TEXT = "Add new item";
 export interface ActionItem {
@@ -19,7 +19,11 @@ export interface AutoCompleteOption {
     group?: string;
     title: string;
 }
-export interface AutoCompleteProps extends CommonProps {
+/**
+ * AutoCompleteOption can be extended for the use case when customizing
+ * autocomplete option rendering by using `renderOption` prop.
+ */
+export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOption> extends CommonProps {
     /** Action button as the last element on the menu **/
     actionItem?: ActionItem;
     /** This prop helps users to fill forms faster */
@@ -34,6 +38,8 @@ export interface AutoCompleteProps extends CommonProps {
     disabled?: boolean;
     /** If true, the input will be displayed in an error state. */
     error?: boolean;
+    /** If `true`, hide the selected options from the list box. */
+    filterSelectedOptions?: boolean;
     /** If true, any arbitrary value can be typed in the field */
     freesolo?: boolean;
     /** If true, options will be grouped by category */
@@ -48,6 +54,8 @@ export interface AutoCompleteProps extends CommonProps {
     label?: string;
     /** If true, the component will be in a loading state. */
     loading?: boolean;
+    /** Maximum height of Popper's <ul> element */
+    maxHeight?: number | string;
     /** If true, will allow the user to select multiple options */
     multiple?: boolean;
     /** A function that should be executed when the autocomplete value changes */
@@ -61,9 +69,13 @@ export interface AutoCompleteProps extends CommonProps {
     /** Controls the popup's open state. */
     open?: boolean;
     /** pre-defined options available to the user */
-    options?: Array<AutoCompleteOption>;
+    options?: Array<T>;
     /** Placeholder text always displayed inside the input field */
     placeholder?: string;
+    /** Render the option, use `getOptionLabel` by default. */
+    renderOption?: (option: T, state: AutocompleteRenderOptionState) => ReactNode;
+    /** Render the selected value. */
+    renderTags?: (value: T[], getTagProps: AutocompleteGetTagProps) => ReactNode;
     /** If true, the input will be required and label will display accordingly */
     required?: boolean;
     /** Determines the padding within the input field 'medium' or 'small' */
@@ -71,4 +83,4 @@ export interface AutoCompleteProps extends CommonProps {
     /** value if this is a controlled component */
     value?: AutoCompleteValue;
 }
-export declare const DotAutoComplete: ({ actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, error, freesolo, group, helperText, inputId, inputRef, label, loading, multiple, onChange, onClose, onInputChange, onOpen, open, options, placeholder, required, size, value, }: AutoCompleteProps) => JSX.Element;
+export declare const DotAutoComplete: <T extends AutoCompleteOption>({ actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, error, filterSelectedOptions, freesolo, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onChange, onClose, onInputChange, onOpen, open, options, placeholder, renderOption, renderTags, required, size, value, }: AutoCompleteProps<T>) => JSX.Element;

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

@@ -0,0 +1,4 @@
+export declare const selectedAutocompleteClassName = "dot-selected-autocomplete-items";
+export declare const autocompleteWithoutChipsClassName = "dot-autocomplete-without-chips";
+export declare const StyledSelectedAutocompleteItems: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledAutocompleteWithoutChips: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/auto-complete/Autocomplete.stories.data.d.ts

@@ -1,4 +1,6 @@
-import { ActionItem } from './AutoComplete';
+import { ChangeEvent } from 'react';
+import { ActionItem, AutoCompleteOption, AutoCompleteProps, AutoCompleteValue } from './AutoComplete';
+import { CommonProps } from '../CommonProps';
 export declare const movies: {
     group: string;
     title: string;
@@ -19,3 +21,19 @@ export declare const actionItemArgType: {
     };
     defaultValue: string;
 };
+export interface AutoCompleteWithRenderOption extends AutoCompleteOption {
+    imageUrl: string;
+}
+export declare const fullNameOptions: AutoCompleteWithRenderOption[];
+export interface SelectedAutocompleteItemsProps extends CommonProps {
+    onItemRemove: (optionTitle: string) => void;
+    selectedOptions: AutoCompleteOption[];
+}
+export declare const SelectedAutocompleteItems: ({ className, onItemRemove, selectedOptions, }: SelectedAutocompleteItemsProps) => JSX.Element;
+export interface AutocompleteWithoutChipsProps extends CommonProps {
+    onChange: (event: ChangeEvent, currentlySelectedOptions: AutoCompleteValue) => void;
+    onItemRemove: (optionTitle: string) => void;
+    selectedOptions: AutoCompleteOption[];
+    storyArgs: AutoCompleteProps;
+}
+export declare const AutocompleteWithoutChips: ({ className, onChange, onItemRemove, selectedOptions, storyArgs, }: AutocompleteWithoutChipsProps) => JSX.Element;

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

@@ -0,0 +1,3 @@
+export { AutocompleteRenderOptionState } from '@material-ui/lab';
+export * from './AutoComplete';
+export { parseAutoCompleteValue } from './utils/helpers';

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

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

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

@@ -0,0 +1 @@
+export * from './Badge';

package/lib/components/index.d.ts

@@ -1,5 +1,5 @@
 export type { AppToolbarProps } from './app-toolbar/AppToolbar';
-export type { AutoCompleteOption, AutoCompleteProps, AutoCompleteValue, } from './auto-complete/AutoComplete';
+export type { AutoCompleteOption, AutoCompleteProps, AutoCompleteValue, AutocompleteRenderOptionState, } from './auto-complete';
 export type { AvatarProps } from './avatar/Avatar';
 export type { BreadcrumbItem } from './breadcrumbs/Breadcrumbs';
 export type { ButtonProps } from './button/Button';
@@ -26,15 +26,16 @@ export type { TypographyVariant } from './typography/Typography';
 export type { ProgressButtonProps } from './progress-button/ProgressButton';
 export type { PopperPlacementType } from './popper';
 export type { DividerOrientation, DividerProps, DividerVariant, } from './divider';
+export type { BadgeProps, BadgeOverlap, BadgeVariant } from './badge';
 export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
 export { DotAppLogo } from './app-logo/AppLogo';
 export { DotAppToolbar } from './app-toolbar/AppToolbar';
-export { DotAutoComplete } from './auto-complete/AutoComplete';
+export { DotAutoComplete, parseAutoCompleteValue } from './auto-complete';
 export { DotAvatar } from './avatar/Avatar';
 export { DotAvatarGroup } from './avatar-group/AvatarGroup';
-export { DotBadge } from './badge/Badge';
+export { DotBadge } from './badge';
 export { DotBreadcrumbs } from './breadcrumbs/Breadcrumbs';
 export { DotButton } from './button/Button';
 export { DotButtonToggle } from './button-toggle';
@@ -80,6 +81,5 @@ export { DotTooltip } from './tooltip/Tooltip';
 export { DotTabs } from './tabs/Tabs';
 export { DotTypography } from './typography/Typography';
 export { DotFileUpload } from './file-upload/FileUpload';
-export { parseAutoCompleteValue } from './auto-complete/utils/helpers';
 export { DotDivider } from './divider';
 export { DotPopper } from './popper';

package/lib/components/list/List.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ListItemProps, ListProps, NestedListProps } from './utils/models';
 export declare const DotList: ({ ariaLabel, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, width, }: ListProps) => JSX.Element;
-export declare const DotListItem: ({ ariaLabel, className, component, "data-testid": dataTestId, divider, endIconId, href, isOpened, onClick, onMenuLeave, index, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIconId, target, text, title, tooltip, }: ListItemProps) => JSX.Element;
+export declare const DotListItem: ({ ariaLabel, className, component, "data-testid": dataTestId, divider, endIcon, endIconId, href, isOpened, onClick, onMenuLeave, index, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, startIconId, target, text, title, tooltip, }: ListItemProps) => JSX.Element;
 export declare const NestedList: ({ ariaLabel, anchorEl, items, menuPlacement, nestedDrawerLeftSpacing, onMenuLeave, open, parentItemIndex, type, }: NestedListProps) => JSX.Element;

package/lib/components/list/List.stories.data.d.ts

@@ -1,3 +1,4 @@
 import { ListItemProps } from './utils/models';
 export declare const mockHref = "/?path=/story/components-list--default";
 export declare const mockListItems: Array<ListItemProps>;
+export declare const listItemsWithoutIcons: Array<ListItemProps>;

package/lib/components/list/utils/models.d.ts

@@ -31,6 +31,8 @@ export interface ListItemProps extends CommonProps {
     /** If true, a 1px light border is added to the bottom of the list item. */
     divider?: boolean;
     /** If provided, the icon ID which is displayed at the end of the list item */
+    endIcon?: ReactNode;
+    /** DEPRECATED, DO NOT USE */
     endIconId?: string;
     /** If provided, the list item will be rendered as a link */
     href?: string;
@@ -56,6 +58,8 @@ export interface ListItemProps extends CommonProps {
     /** Selected list item */
     selected?: boolean;
     /** If provided, the icon ID which is displayed on the front of the list item */
+    startIcon?: ReactNode;
+    /** DEPRECATED, DO NOT USE */
     startIconId?: string;
     /** where to open the link */
     target?: LinkTarget;

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

@@ -36,6 +36,8 @@ export interface MenuItemProps {
     children?: ReactNode;
     /** Space delimited CSS classes to be attributed to the menu item */
     classes?: string;
+    /** If true, the item will be displayed in a disabled state. */
+    disabled?: boolean;
     /** If true, a 1px light border is added to the bottom of the menu item. */
     divider?: boolean;
     /** Used to set custom item height (in pixels). This value has priority over "menuItemHeight" prop. */

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { MouseEvent } from 'react';
 import { MenuItemProps } from '../menu/Menu';
 export declare const defaultMenuItems: ({
     children: JSX.Element;
@@ -22,3 +22,7 @@ export declare const tableMenuItems: ({
     key: string;
 })[];
 export declare const customHeightMenuItems: MenuItemProps[];
+export interface MenuTableArgs {
+    onIconButtonClick: (event: MouseEvent<HTMLButtonElement>, menuId: string) => void;
+}
+export declare const MenuTable: ({ onIconButtonClick }: MenuTableArgs) => JSX.Element;

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

@@ -1,4 +1,6 @@
 export declare const rootClassName = "dot-menu-wrapper";
 export declare const multiLevelClassName = "dot-multi-level-menu";
+export declare const menuTableClassName = "dot-menu-table";
 export declare const StyledMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledMultiLevelMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMenuTable: import("styled-components").StyledComponent<"table", any, {}, never>;

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

@@ -2,4 +2,9 @@ import { Popper } from '@material-ui/core';
 export declare const flyoutMenuClassName = "dot-flyout-menu";
 export declare const rootClassName = "dot-menu";
 export declare const popperClassName = "dot-popper";
-export declare const StyledPopper: import("styled-components").StyledComponent<typeof Popper, any, {}, never>;
+interface StyledPopperArgs {
+    $maxHeight?: number | string;
+}
+export declare const getListMaxHeight: (maxHeight: string | number) => string;
+export declare const StyledPopper: import("styled-components").StyledComponent<typeof Popper, any, StyledPopperArgs, never>;
+export {};

package/lib/components/sidebar/Sidebar.stories.data.d.ts

@@ -41,8 +41,8 @@ export declare const getNavigationItems: (isSelected: (key: number) => boolean,
         text: string;
         divider?: undefined;
     })[];
+    startIconId: string;
     text: string;
-    startIconId?: undefined;
     onClick?: undefined;
     endIconId?: undefined;
     selected?: undefined;

package/package.json

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