@digital-ai/dot-components 2.19.1 → 2.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.19.1",
+  "version": "2.20.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [
@@ -11,9 +11,8 @@
     "type": "git",
     "url": "git://github.com/digital-ai/dot-components.git"
   },
-  "main": "./index.umd.js",
-  "module": "./index.esm.js",
-  "typings": "./index.d.ts",
+  "main": "./index.esm.js",
+  "typings": "./index.esm.d.ts",
   "description": "A component library the follows the Dot Design System",
   "bugs": {
     "url": "https://github.com/digital-ai/dot-components/issues"
@@ -51,7 +50,8 @@
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {
-    "react": "^17.0.2 || ^18.0.0",
-    "react-router-dom": "6.4.4"
-  }
+    "react": "^17.0.2 || ^18.0.0"
+  },
+  "module": "./index.esm.js",
+  "type": "module"
 }

package/{index.d.ts → src/index.d.ts}

@@ -1,7 +1,7 @@
-export * from './lib/components';
-export * as lightColors from './lib/theme-provider/colors/light-theme-colors';
-export * from './lib/theme-provider/colors/figma-colors';
-export * as themeVariables from './lib/theme-provider/common/variables';
-export type { ThemeProviderProps } from './lib/theme-provider/ThemeProvider';
-export { avatarColors, DotThemeProvider, typographyOptions, } from './lib/theme-provider/ThemeProvider';
-export * from './lib/theme-provider/interfaces';
+export * from './lib/components';
+export * as lightColors from './lib/theme-provider/colors/light-theme-colors';
+export * from './lib/theme-provider/colors/figma-colors';
+export * as themeVariables from './lib/theme-provider/common/variables';
+export type { ThemeProviderProps } from './lib/theme-provider/ThemeProvider';
+export { avatarColors, DotThemeProvider, typographyOptions, } from './lib/theme-provider/ThemeProvider';
+export * from './lib/theme-provider/interfaces';

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

@@ -0,0 +1 @@
+export type AriaRoles = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'input' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'navigation' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';

package/{lib → src/lib}/components/BaseButtonProps.d.ts

@@ -1,26 +1,26 @@
-import { MouseEvent, KeyboardEvent } from 'react';
-import { CommonProps } from './CommonProps';
-export declare type ButtonType = 'destructive' | 'primary' | 'outlined' | 'text';
-export declare type ButtonSize = 'small' | 'medium' | 'large';
-export interface BaseButtonProps extends CommonProps {
-    /** If true, the button will be focused **/
-    autoFocus?: boolean;
-    /** If true, the ripple effect will be disabled. */
-    disableRipple?: boolean;
-    /** If true, the button will be disabled. */
-    disabled?: boolean;
-    /** If true, the button will take up the full width of its container.  */
-    fullWidth?: boolean;
-    /** Is this a submit button */
-    isSubmit?: boolean;
-    /** Event callback */
-    onClick?: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;
-    /** The size of the button */
-    size?: ButtonSize;
-    /** Tab order for the button. */
-    tabIndex?: number;
-    /** Help text to be displayed on hover  */
-    tooltip?: string;
-    /** The type of button */
-    type?: ButtonType;
-}
+import { MouseEvent, KeyboardEvent } from 'react';
+import { CommonProps } from './CommonProps';
+export type ButtonType = 'destructive' | 'primary' | 'outlined' | 'text';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export interface BaseButtonProps extends CommonProps {
+    /** If true, the button will be focused **/
+    autoFocus?: boolean;
+    /** If true, the ripple effect will be disabled. */
+    disableRipple?: boolean;
+    /** If true, the button will be disabled. */
+    disabled?: boolean;
+    /** If true, the button will take up the full width of its container.  */
+    fullWidth?: boolean;
+    /** Is this a submit button */
+    isSubmit?: boolean;
+    /** Event callback */
+    onClick?: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;
+    /** The size of the button */
+    size?: ButtonSize;
+    /** Tab order for the button. */
+    tabIndex?: number;
+    /** Help text to be displayed on hover  */
+    tooltip?: string;
+    /** The type of button */
+    type?: ButtonType;
+}

package/{lib → src/lib}/components/CommonProps.d.ts

@@ -1,11 +1,11 @@
-import { AriaRoles } from './AccessibilityProps';
-export interface CommonProps {
-    /** Defines a string value that labels the current element **/
-    ariaLabel?: string;
-    /** The ARIA role attribute of the element **/
-    ariaRole?: AriaRoles;
-    /** classes to be attributed to the root of the component */
-    className?: string;
-    /** data attribute passed through for testing purposes ONLY */
-    'data-testid'?: string;
-}
+import { AriaRoles } from './AccessibilityProps';
+export interface CommonProps {
+    /** Defines a string value that labels the current element **/
+    ariaLabel?: string;
+    /** The ARIA role attribute of the element **/
+    ariaRole?: AriaRoles;
+    /** classes to be attributed to the root of the component */
+    className?: string;
+    /** data attribute passed through for testing purposes ONLY */
+    'data-testid'?: string;
+}

package/{lib → src/lib}/components/accordion/Accordion.d.ts

@@ -1,28 +1,28 @@
-import { ChangeEvent, ReactNode } from 'react';
-import { CommonProps } from '../CommonProps';
-export interface AccordionProps extends CommonProps {
-    /** actionable components (ex: checkbox, button) that can be nested within the expanded Accordion component */
-    actions?: ReactNode;
-    /** The content for the Accordion.*/
-    children: ReactNode;
-    /** If true, the accordion will be displayed in a disabled state. */
-    disabled?: boolean;
-    /** If true, the accordion is expanded. */
-    expanded?: boolean;
-    /** If true, the Accordion will have elevation. */
-    hasElevation?: boolean;
-    /** If true, the text will wrap and not be truncated */
-    noWrap?: boolean;
-    /**
-    Callback fired when the expand/collapse state is changed.
-    If provided, the accordion will be a controlled component and it will be the responsibility of the consumer to manage the 'expanded' state.
-    */
-    onChange?: (event: ChangeEvent, expanded: boolean) => void;
-    /** If true, rounded corners are disabled. */
-    square?: boolean;
-    /** Icon placed before the children. */
-    startIcon?: ReactNode;
-    /** The text within the expanded Accordion */
-    summary: ReactNode | string;
-}
-export declare const DotAccordion: ({ actions, ariaLabel, children, className, "data-testid": dataTestId, disabled, expanded, hasElevation, onChange, square, startIcon, summary, noWrap, }: AccordionProps) => JSX.Element;
+import { ChangeEvent, ReactNode } from 'react';
+import { CommonProps } from '../CommonProps';
+export interface AccordionProps extends CommonProps {
+    /** actionable components (ex: checkbox, button) that can be nested within the expanded Accordion component */
+    actions?: ReactNode;
+    /** The content for the Accordion.*/
+    children: ReactNode;
+    /** If true, the accordion will be displayed in a disabled state. */
+    disabled?: boolean;
+    /** If true, the accordion is expanded. */
+    expanded?: boolean;
+    /** If true, the Accordion will have elevation. */
+    hasElevation?: boolean;
+    /** If true, the text will wrap and not be truncated */
+    noWrap?: boolean;
+    /**
+    Callback fired when the expand/collapse state is changed.
+    If provided, the accordion will be a controlled component and it will be the responsibility of the consumer to manage the 'expanded' state.
+    */
+    onChange?: (event: ChangeEvent, expanded: boolean) => void;
+    /** If true, rounded corners are disabled. */
+    square?: boolean;
+    /** Icon placed before the children. */
+    startIcon?: ReactNode;
+    /** The text within the expanded Accordion */
+    summary: ReactNode | string;
+}
+export declare const DotAccordion: ({ actions, ariaLabel, children, className, "data-testid": dataTestId, disabled, expanded, hasElevation, onChange, square, startIcon, summary, noWrap, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/{lib → src/lib}/components/accordion/Accordion.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const rootClassName = "dot-accordion";
-export declare const summaryClassName = "dot-accordion-summary";
-export declare const detailClassName = "dot-accordion-details";
-export declare const StyledAccordion: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").AccordionTypeMap<{}, "div">>, any, {}, never>;
+export declare const rootClassName = "dot-accordion";
+export declare const summaryClassName = "dot-accordion-summary";
+export declare const detailClassName = "dot-accordion-details";
+export declare const StyledAccordion: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").AccordionTypeMap<{}, "div">>, any, {}, never>;

package/{lib → src/lib}/components/action-toolbar/ActionToolbar.d.ts

@@ -1,10 +1,10 @@
-import { ReactNode } from 'react';
-import { CommonProps } from '../CommonProps';
-export declare type DotActionBarVarient = 'regular' | 'dense';
-export interface DotActionBarProps extends CommonProps {
-    /** string or JSX element that is displayed inside the toolbar */
-    children?: ReactNode;
-    /** DotActionBarVarient dense and regular for toolbar height */
-    variant?: DotActionBarVarient;
-}
-export declare const DotActionToolbar: ({ ariaLabel, children, className, "data-testid": dataTestId, variant, }: DotActionBarProps) => JSX.Element;
+import { ReactNode } from 'react';
+import { CommonProps } from '../CommonProps';
+export type DotActionBarVarient = 'regular' | 'dense';
+export interface DotActionBarProps extends CommonProps {
+    /** string or JSX element that is displayed inside the toolbar */
+    children?: ReactNode;
+    /** DotActionBarVarient dense and regular for toolbar height */
+    variant?: DotActionBarVarient;
+}
+export declare const DotActionToolbar: ({ ariaLabel, children, className, "data-testid": dataTestId, variant, }: DotActionBarProps) => import("react/jsx-runtime").JSX.Element;

package/{lib → src/lib}/components/action-toolbar/ActionToolbar.styles.d.ts

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

package/{lib → src/lib}/components/alert-banner/AlertBanner.d.ts

@@ -1,19 +1,19 @@
-import { MouseEvent, ReactNode } from 'react';
-import { CommonProps } from '../CommonProps';
-import { TypographyVariant } from '../typography/Typography';
-export declare type AlertBannerSeverity = 'error' | 'info' | 'success' | 'warning';
-export interface AlertBannerProps extends CommonProps {
-    /** The action to display. It renders after the message, at the end of the alert */
-    action?: ReactNode;
-    /** The content of the component */
-    children: ReactNode | string;
-    /** callback which is triggered when alert banner is closed */
-    onClose?: (event: MouseEvent) => void;
-    /** If true, the alert banner will have rounded corners */
-    roundedCorners?: boolean;
-    /** will determine color and icon being used */
-    severity: AlertBannerSeverity;
-    /** when specified, will control the text that is used inside the alert banner */
-    textVariant?: TypographyVariant;
-}
-export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-testid": dataTestId, onClose, roundedCorners, severity, textVariant, }: AlertBannerProps) => JSX.Element;
+import { MouseEvent, ReactNode } from 'react';
+import { CommonProps } from '../CommonProps';
+import { TypographyVariant } from '../typography/Typography';
+export type AlertBannerSeverity = 'error' | 'info' | 'success' | 'warning';
+export interface AlertBannerProps extends CommonProps {
+    /** The action to display. It renders after the message, at the end of the alert */
+    action?: ReactNode;
+    /** The content of the component */
+    children: ReactNode | string;
+    /** callback which is triggered when alert banner is closed */
+    onClose?: (event: MouseEvent) => void;
+    /** If true, the alert banner will have rounded corners */
+    roundedCorners?: boolean;
+    /** will determine color and icon being used */
+    severity: AlertBannerSeverity;
+    /** when specified, will control the text that is used inside the alert banner */
+    textVariant?: TypographyVariant;
+}
+export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-testid": dataTestId, onClose, roundedCorners, severity, textVariant, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;

package/{lib → src/lib}/components/alert-banner/AlertBanner.styles.d.ts

@@ -1,4 +1,4 @@
-import { Alert } from '@mui/material';
-import { AlertBannerProps } from './AlertBanner';
-export declare const rootClassName = "dot-alert-banner";
-export declare const StyledAlertBanner: import("styled-components").StyledComponent<typeof Alert, any, AlertBannerProps, never>;
+import { Alert } from '@mui/material';
+import { AlertBannerProps } from './AlertBanner';
+export declare const rootClassName = "dot-alert-banner";
+export declare const StyledAlertBanner: import("styled-components").StyledComponent<typeof Alert, any, AlertBannerProps, never>;

package/{lib → src/lib}/components/app-logo/AppLogo.d.ts

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react';
-import { CommonProps } from '../CommonProps';
-export interface AppLogoProps extends CommonProps {
-    /** If provided will display application logo */
-    appLogo?: ReactNode;
-    /** If provided will display application logo */
-    appLogoSmall?: ReactNode;
-    /** If true will force the small logo only */
-    smallOnly?: boolean;
-}
-export declare const DotAppLogo: ({ appLogo, appLogoSmall, ariaLabel, className, "data-testid": dataTestId, smallOnly, }: AppLogoProps) => JSX.Element;
+import { ReactNode } from 'react';
+import { CommonProps } from '../CommonProps';
+export interface AppLogoProps extends CommonProps {
+    /** If provided will display application logo */
+    appLogo?: ReactNode;
+    /** If provided will display application logo */
+    appLogoSmall?: ReactNode;
+    /** If true will force the small logo only */
+    smallOnly?: boolean;
+}
+export declare const DotAppLogo: ({ appLogo, appLogoSmall, ariaLabel, className, "data-testid": dataTestId, smallOnly, }: AppLogoProps) => import("react/jsx-runtime").JSX.Element;

package/{lib → src/lib}/components/app-switcher/AppSwitcher.d.ts

@@ -1,29 +1,29 @@
-import { MouseEvent } from 'react';
-import { ApplicationModel } from '../core-api/openapi';
-import { CommonProps } from '../CommonProps';
-interface ActiveAppInfo {
-    name: string;
-    product?: 'Release' | 'Deploy' | 'Agility' | 'Continuous Testing' | 'Intelligence' | 'Application Protection';
-}
-interface CommonAppSwitcherProps extends CommonProps {
-    activeApp: ActiveAppInfo;
-    maxRecentInstances?: number;
-    noAppTypeLabel?: string;
-    onClose?: (event: MouseEvent | KeyboardEvent) => void;
-    searchInstancesThreshold?: number;
-    yOffset?: number;
-    zIndex?: number;
-}
-interface AppSwitcherViewProps extends CommonAppSwitcherProps {
-    apps: Partial<ApplicationModel>[];
-    open: boolean;
-    platformConsoleUrl?: string;
-    selectedAppType: string;
-}
-export declare const DotAppSwitcherView: ({ activeApp, apps, className, maxRecentInstances, noAppTypeLabel, platformConsoleUrl, onClose, open, searchInstancesThreshold, selectedAppType, yOffset, zIndex, }: AppSwitcherViewProps) => JSX.Element;
-export interface AppSwitcherProps extends CommonAppSwitcherProps {
-    accountId?: string;
-    includePlatformConsole?: boolean;
-}
-export declare const DotAppSwitcher: ({ accountId, includePlatformConsole, onClose, ...commonProps }: AppSwitcherProps) => JSX.Element;
-export {};
+import { MouseEvent } from 'react';
+import { ApplicationModel } from '../core-api/openapi';
+import { CommonProps } from '../CommonProps';
+interface ActiveAppInfo {
+    name: string;
+    product?: 'Release' | 'Deploy' | 'Agility' | 'Continuous Testing' | 'Intelligence' | 'Application Protection';
+}
+interface CommonAppSwitcherProps extends CommonProps {
+    activeApp: ActiveAppInfo;
+    maxRecentInstances?: number;
+    noAppTypeLabel?: string;
+    onClose?: (event: MouseEvent | KeyboardEvent) => void;
+    searchInstancesThreshold?: number;
+    yOffset?: number;
+    zIndex?: number;
+}
+interface AppSwitcherViewProps extends CommonAppSwitcherProps {
+    apps: Partial<ApplicationModel>[];
+    open: boolean;
+    platformConsoleUrl?: string;
+    selectedAppType: string;
+}
+export declare const DotAppSwitcherView: ({ activeApp, apps, className, maxRecentInstances, noAppTypeLabel, platformConsoleUrl, onClose, open, searchInstancesThreshold, selectedAppType, yOffset, zIndex, }: AppSwitcherViewProps) => import("react/jsx-runtime").JSX.Element;
+export interface AppSwitcherProps extends CommonAppSwitcherProps {
+    accountId?: string;
+    includePlatformConsole?: boolean;
+}
+export declare const DotAppSwitcher: ({ accountId, includePlatformConsole, onClose, ...commonProps }: AppSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/{lib → src/lib}/components/app-switcher/AppSwitcher.styles.d.ts

@@ -1,2 +1,2 @@
-export declare const rootClassName = "dot-app-switcher";
-export declare const StyledAppSwitcher: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => JSX.Element, any, {}, never>;
+export declare const rootClassName = "dot-app-switcher";
+export declare const StyledAppSwitcher: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/{lib → src/lib}/components/app-switcher/utils/helpers.d.ts

@@ -1,26 +1,26 @@
-import { PointerEvent, ReactElement } from 'react';
-import { MenuItemProps } from '../../menu/Menu';
-import { ApplicationModel } from '../../core-api/openapi';
-export declare type RecentAppInstance = {
-    application: Partial<ApplicationModel>;
-    lastAccess: number;
-};
-export declare const getLogoForAppType: (appType: string) => string;
-export declare const daiAppsHeaderMenuItem: (count?: number) => {
-    children: JSX.Element;
-    key: string;
-};
-export declare const sectionHeaderMenuItem: (title: string, count: number, showEmpty?: boolean, showCount?: boolean) => {
-    children: JSX.Element;
-    key: string;
-};
-export declare const createMenuItem: (url: string, title: string, subtitle: string, onClick: (event: PointerEvent<Element>) => void) => ReactElement;
-export declare const createTopLevelMenuItem: (url: string, logo: string, title: string, openNewTab?: boolean) => ReactElement;
-export declare const createAppTypeLabel: (appTypeName: string, logo: string, appProps: MenuItemProps[]) => JSX.Element;
-export declare const getInstanceStateText: (application: {
-    instance_state?: number;
-}) => "Production" | "Non-production";
-export declare const sortRecentAppInstancesFn: (a: RecentAppInstance, b: RecentAppInstance) => number;
-export declare const sortAppInstancesFn: (a: Partial<ApplicationModel>, b: Partial<ApplicationModel>) => number;
-export declare const RECENT_INSTANCES_KEY = "dot-app-switcher-recent-app-instances";
-export declare const recentAppInstancesSetter: (latestInstance: Partial<ApplicationModel>, maxRecentItems: number) => (orig: RecentAppInstance[]) => RecentAppInstance[];
+import { PointerEvent, ReactElement } from 'react';
+import { MenuItemProps } from '../../menu/Menu';
+import { ApplicationModel } from '../../core-api/openapi';
+export type RecentAppInstance = {
+    application: Partial<ApplicationModel>;
+    lastAccess: number;
+};
+export declare const getLogoForAppType: (appType: string) => string;
+export declare const daiAppsHeaderMenuItem: (count?: number) => {
+    children: import("react/jsx-runtime").JSX.Element;
+    key: string;
+};
+export declare const sectionHeaderMenuItem: (title: string, count: number, showEmpty?: boolean, showCount?: boolean) => {
+    children: import("react/jsx-runtime").JSX.Element;
+    key: string;
+};
+export declare const createMenuItem: (url: string, title: string, subtitle: string, onClick: (event: PointerEvent<Element>) => void) => ReactElement;
+export declare const createTopLevelMenuItem: (url: string, logo: string, title: string, openNewTab?: boolean) => ReactElement;
+export declare const createAppTypeLabel: (appTypeName: string, logo: string, appProps: MenuItemProps[]) => import("react/jsx-runtime").JSX.Element;
+export declare const getInstanceStateText: (application: {
+    instance_state?: number;
+}) => "Production" | "Non-production";
+export declare const sortRecentAppInstancesFn: (a: RecentAppInstance, b: RecentAppInstance) => number;
+export declare const sortAppInstancesFn: (a: Partial<ApplicationModel>, b: Partial<ApplicationModel>) => number;
+export declare const RECENT_INSTANCES_KEY = "dot-app-switcher-recent-app-instances";
+export declare const recentAppInstancesSetter: (latestInstance: Partial<ApplicationModel>, maxRecentItems: number) => (orig: RecentAppInstance[]) => RecentAppInstance[];

package/{lib → src/lib}/components/app-toolbar/AppToolbar.d.ts

@@ -1,49 +1,49 @@
-import { ReactNode, MouseEvent } from 'react';
-import { CommonProps } from '../CommonProps';
-import { IconButtonProps } from '../button/IconButton';
-import { ListItemProps } from '../list';
-import { BadgeVariant } from '../badge/Badge';
-export interface AppToolbarIconButtons extends IconButtonProps {
-    /** custom color code for the badge */
-    badgeColor?: string;
-    /** the number rendered within the badge */
-    badgeContent?: number;
-    badgeVariant?: BadgeVariant;
-    /** if true, the badge will be displayed, else it will be hidden*/
-    displayBadge?: boolean;
-}
-export interface AppToolbarProps extends CommonProps {
-    /** If provided will display application logo */
-    appLogo?: ReactNode;
-    /** URL of the page the application logo link will go to */
-    appLogoHref?: string;
-    /** If provided will display application logo */
-    appLogoSmall?: ReactNode;
-    /** User avatar component */
-    avatar?: ReactNode;
-    /** Control the bottom border of the toolbar, accepts any valid  */
-    borderColor?: string;
-    /** JSX Element that is displayed between the logo and right nav */
-    children?: ReactNode;
-    /** If true, main menu will close when item is clicked, if false it will prevent menu closing */
-    closeMenuOnItemClick?: boolean;
-    /** Allow displaying custom logo */
-    customLogo?: ReactNode;
-    /** If true, the spacing and height will be shorter */
-    dense?: boolean;
-    /** If provided will overwrite `mainMenuItems` and display within the main menu drawer */
-    mainMenu?: ReactNode;
-    /** If provided will display the menu items within the main menu drawer */
-    mainMenuItems?: Array<ListItemProps>;
-    /** Width of main menu drawer if mainMenu provided, defaults to 240px */
-    mainMenuWidth?: number;
-    /** If true, the main menu will close if click detected off app toolbar children*/
-    menuCloseOnClickAway?: boolean;
-    /** Array of nav items to be displayed on the right side */
-    navItems?: Array<AppToolbarIconButtons>;
-    /** Event callback when leaving menu via tab or clicking away */
-    onClickAway?: (event: KeyboardEvent | MouseEvent) => void;
-    /** URL of the page the primary logo link will go to */
-    primaryLogoHref?: string;
-}
-export declare const DotAppToolbar: ({ ariaLabel, appLogo, appLogoHref, appLogoSmall, avatar, borderColor, children, className, closeMenuOnItemClick, customLogo, "data-testid": dataTestId, dense, mainMenu, mainMenuItems, mainMenuWidth, menuCloseOnClickAway, navItems, onClickAway, primaryLogoHref, }: AppToolbarProps) => JSX.Element;
+import { ReactNode, MouseEvent } from 'react';
+import { CommonProps } from '../CommonProps';
+import { IconButtonProps } from '../button/IconButton';
+import { ListItemProps } from '../list';
+import { BadgeVariant } from '../badge/Badge';
+export interface AppToolbarIconButtons extends IconButtonProps {
+    /** custom color code for the badge */
+    badgeColor?: string;
+    /** the number rendered within the badge */
+    badgeContent?: number;
+    badgeVariant?: BadgeVariant;
+    /** if true, the badge will be displayed, else it will be hidden*/
+    displayBadge?: boolean;
+}
+export interface AppToolbarProps extends CommonProps {
+    /** If provided will display application logo */
+    appLogo?: ReactNode;
+    /** URL of the page the application logo link will go to */
+    appLogoHref?: string;
+    /** If provided will display application logo */
+    appLogoSmall?: ReactNode;
+    /** User avatar component */
+    avatar?: ReactNode;
+    /** Control the bottom border of the toolbar, accepts any valid  */
+    borderColor?: string;
+    /** JSX Element that is displayed between the logo and right nav */
+    children?: ReactNode;
+    /** If true, main menu will close when item is clicked, if false it will prevent menu closing */
+    closeMenuOnItemClick?: boolean;
+    /** Allow displaying custom logo */
+    customLogo?: ReactNode;
+    /** If true, the spacing and height will be shorter */
+    dense?: boolean;
+    /** If provided will overwrite `mainMenuItems` and display within the main menu drawer */
+    mainMenu?: ReactNode;
+    /** If provided will display the menu items within the main menu drawer */
+    mainMenuItems?: Array<ListItemProps>;
+    /** Width of main menu drawer if mainMenu provided, defaults to 240px */
+    mainMenuWidth?: number;
+    /** If true, the main menu will close if click detected off app toolbar children*/
+    menuCloseOnClickAway?: boolean;
+    /** Array of nav items to be displayed on the right side */
+    navItems?: Array<AppToolbarIconButtons>;
+    /** Event callback when leaving menu via tab or clicking away */
+    onClickAway?: (event: KeyboardEvent | MouseEvent) => void;
+    /** URL of the page the primary logo link will go to */
+    primaryLogoHref?: string;
+}
+export declare const DotAppToolbar: ({ ariaLabel, appLogo, appLogoHref, appLogoSmall, avatar, borderColor, children, className, closeMenuOnItemClick, customLogo, "data-testid": dataTestId, dense, mainMenu, mainMenuItems, mainMenuWidth, menuCloseOnClickAway, navItems, onClickAway, primaryLogoHref, }: AppToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/{lib → src/lib}/components/app-toolbar/AppToolbar.data.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { ListItemProps } from '../list';
-export interface AppToolbarWrapperProps {
-    mainMenuItems?: Array<ListItemProps>;
-    menuCloseOnClickAway?: boolean;
-    onClickAway?: (event: globalThis.KeyboardEvent | React.MouseEvent<Element, globalThis.MouseEvent>) => void;
-}
-export declare const AppToolbarTestWrapper: (props: AppToolbarWrapperProps) => JSX.Element;
+/// <reference types="react" />
+import { ListItemProps } from '../list';
+export interface AppToolbarWrapperProps {
+    mainMenuItems?: Array<ListItemProps>;
+    menuCloseOnClickAway?: boolean;
+    onClickAway?: (event: globalThis.KeyboardEvent | React.MouseEvent<Element, globalThis.MouseEvent>) => void;
+}
+export declare const AppToolbarTestWrapper: (props: AppToolbarWrapperProps) => import("react/jsx-runtime").JSX.Element;

package/{lib → src/lib}/components/app-toolbar/AppToolbar.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const rootClassName = "dot-app-toolbar";
-export declare const denseClassName = "dense";
-export declare const StyledMainMenu: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => JSX.Element, any, {}, never>;
-export declare const StyledAppToolbar: import("styled-components").StyledComponent<"header", any, {}, never>;
+export declare const rootClassName = "dot-app-toolbar";
+export declare const denseClassName = "dense";
+export declare const StyledMainMenu: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledAppToolbar: import("styled-components").StyledComponent<"header", any, {}, never>;