@digital-ai/dot-components 1.18.0 → 1.20.0

package/lib/components/alert-banner/AlertBanner.d.ts

@@ -9,9 +9,11 @@ export interface AlertBannerProps extends CommonProps {
     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, severity, textVariant, }: AlertBannerProps) => JSX.Element;
+export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-testid": dataTestId, onClose, roundedCorners, severity, textVariant, }: AlertBannerProps) => JSX.Element;

package/lib/components/app-toolbar/AppToolbar.d.ts

@@ -15,6 +15,8 @@ export interface AppToolbarIconButtons extends IconButtonProps {
 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;
     /** DEPRECATED, DO NOT USE */
@@ -42,4 +44,4 @@ export interface AppToolbarProps extends CommonProps {
     /** URL of the page the primary logo link will go to */
     primaryLogoHref?: string;
 }
-export declare const DotAppToolbar: ({ appName, appLogo, appLogoSmall, ariaLabel, avatar, borderColor, children, className, closeMenuOnItemClick, customLogo, "data-testid": dataTestId, dense, navItems, mainMenu, mainMenuItems, mainMenuWidth, primaryLogoHref, }: AppToolbarProps) => JSX.Element;
+export declare const DotAppToolbar: ({ appName, appLogo, appLogoHref, appLogoSmall, ariaLabel, avatar, borderColor, children, className, closeMenuOnItemClick, customLogo, "data-testid": dataTestId, dense, navItems, mainMenu, mainMenuItems, mainMenuWidth, primaryLogoHref, }: AppToolbarProps) => JSX.Element;

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

@@ -37,17 +37,25 @@ export interface InputProps extends CommonProps {
     onKeyDown?: (event: KeyboardEvent) => void;
     /** A function that executes when a user releases a mouse button over an element. */
     onMouseUp?: (event: MouseEvent) => void;
+    /** If true, the label will be persistently displayed outside of the field */
+    persistentLabel?: boolean;
     /** If true, the label is displayed as required and the input element` will be required. */
     required?: boolean;
+    /** If specified, the label being shrunk/unshrunk must be controlled by the consumer */
+    shrink?: boolean;
     /** Size of the input */
     size?: inputSizeOptions;
     /** Icon placed before the children. */
     startIcon?: ReactNode;
+    /** If true, the label and field will be displayed in a success state */
+    success?: boolean;
     /**
      * Type of input should be a valid HTML 5 input type
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
      */
     type?: string;
+    /** value of input field */
+    value?: string;
     /** If true, the label will be displayed in an warning state. */
     warning?: boolean;
 }

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

@@ -1,7 +1,10 @@
-import { TextField } from '@material-ui/core';
+import { TextField, InputLabel } from '@material-ui/core';
 export declare const rootClassName = "dot-text-field";
 export declare const rootSelectClassName = "dot-select-field";
+export declare const labelClassName = "dot-input-label";
 export declare const warningClassName = "dot-warning";
+export declare const successClassName = "dot-success";
 export declare const adornmentIconClassName = "dot-adornment-icon";
 export declare const StyledAdornment: import("styled-components").StyledComponent<import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").InputAdornmentTypeMap<{}, "div">>, any, {}, never>;
+export declare const StyledInputLabel: import("styled-components").StyledComponent<typeof InputLabel, any, {}, never>;
 export declare const StyledTextField: import("styled-components").StyledComponent<typeof TextField, any, {}, never>;

package/lib/components/input-form-fields/InputLabel.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface InputLabelProps {
+    /** If true, the input will be disabled. */
+    disabled?: boolean;
+    /** If true, the label will be displayed in an error state. */
+    error?: boolean;
+    /**
+     * id to identify the element, also used to create label "for" and helper text id attribute
+     * values while it's optional, it is considered required for accessiblity best practice.
+     */
+    id: string;
+    /** The label content. */
+    label?: string;
+    /** If true, the label is displayed as required and the input element` will be required. */
+    required?: boolean;
+}
+export declare const DotInputLabel: ({ disabled, error, id, label, required, }: InputLabelProps) => JSX.Element;

package/lib/components/input-form-fields/InputSelect.d.ts

@@ -12,7 +12,5 @@ export interface InputSelectProps extends InputProps {
     defaultValue?: string;
     /** options of select dropdown */
     options: Array<OptionType>;
-    /** value of input field */
-    value?: string;
 }
-export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, required, size, startIcon, value, warning, }: InputSelectProps) => JSX.Element;
+export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => JSX.Element;

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

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { InputProps } from './InputFormFields.propTypes';
 export declare const DELAY_MS = 300;
+export declare type endAdornmentIconType = 'warning' | 'error' | 'check';
 export interface InputTextProps extends InputProps {
     /** The HTML autocomplete property to pass along to the input tag. Used for
     controlling autofill behavior in forms. This property follows this HTML spec:
@@ -20,7 +21,13 @@ export interface InputTextProps extends InputProps {
     rows?: number;
     /** max of rows for multiline line */
     rowsMax?: number;
-    /** value of the InputText */
-    value?: string;
 }
-export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, placeholder, readOnly, required, rows, rowsMax, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;
+export interface EndIconProps {
+    dataTestId?: string;
+    endAdornmentTooltip?: string;
+    endIcon?: ReactNode;
+    error?: boolean;
+    success?: boolean;
+    warning?: boolean;
+}
+export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, rows, rowsMax, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element;

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, 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 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, tooltipPlacement, }: ListItemProps) => JSX.Element;
 export declare const NestedList: ({ ariaLabel, anchorEl, "data-testid": dataTestId, items, menuPlacement, nestedDrawerLeftSpacing, onMenuLeave, open, parentItemIndex, type, }: NestedListProps) => JSX.Element;

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

@@ -2,6 +2,7 @@ import { ElementType, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { CommonProps } from '../../CommonProps';
 import { PopperPlacement } from '../../menu/Menu';
 import { LinkTarget } from '../../link/Link';
+import { tooltipPlacement } from '../../tooltip/Tooltip';
 export declare type NestedListType = 'drawer' | 'expandable' | 'menu';
 export interface ListProps extends CommonProps {
     /** string or JSX element that is displayed inside the list */
@@ -69,6 +70,8 @@ export interface ListItemProps extends CommonProps {
     title?: string;
     /** Tooltip text displayed on hover */
     tooltip?: string;
+    /** Tooltip placement displayed on hover */
+    tooltipPlacement?: tooltipPlacement;
 }
 export interface NestedListProps extends CommonProps {
     /** Element that menu is attached to */

package/lib/components/navigation-rail/NavigationRail.d.ts

@@ -1,9 +1,13 @@
 /// <reference types="react" />
 import { CommonProps } from '../CommonProps';
+import { BadgeProps } from '../badge';
 export declare type RailItemsPosition = 'flex-start' | 'center' | 'flex-end';
+export declare type RailIconBadge = Omit<BadgeProps, 'children'>;
 export interface RailItem {
     /** Defines a string value that labels the current element **/
     ariaLabel?: string;
+    /** Optional badge which will be displayed over an icon **/
+    iconBadge?: RailIconBadge;
     /** Id of the icon shown in the rail item */
     iconId: string;
     /** text displayed or title text if icon used */

package/lib/components/navigation-rail/NavigationRail.stories.data.d.ts

@@ -0,0 +1,9 @@
+import { RailItem } from './NavigationRail';
+export interface BadgeCount {
+    activity: number;
+    conditions: number;
+    properties: number;
+    scheduling: number;
+}
+export declare const mockRailItems: Array<RailItem>;
+export declare const getBadgeRailItems: ({ activity, conditions, properties, scheduling, }: BadgeCount) => RailItem[];

package/lib/components/navigation-rail/NavigationRail.stories.styles.d.ts

@@ -1,2 +1,4 @@
 export declare const programmaticNavigationClassName = "dot-programmatic-navigation-story";
+export declare const withBadgesClassName = "dot-with-badges-story";
 export declare const StyledWithProgrammaticNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledWithBadges: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,16 +1,16 @@
-import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+/// <reference types="react" />
 import { MenuItemProps } from '../menu/Menu';
 import { BaseButtonProps } from '../BaseButtonProps';
 export interface SplitButtonProps extends BaseButtonProps {
     /** accessibility label */
     ariaLabel: string;
-    /** The text for the button. Button text should be in sentence case. */
-    children: ReactNode;
+    /** Key of the option which will be rendered as main option */
+    defaultMainOptionKey?: string;
     /** Disable the portal behavior. If true, children stay within parent DOM hierarchy. */
     disablePortal?: boolean;
-    /** Callback when menu item is selected */
-    onSelect?: (event: MouseEvent | KeyboardEvent, menuId: string, itemKey: string) => void;
+    /** Callback function which executes when any option has been clicked */
+    onOptionClick: (itemKey: string) => void;
     /**The options within the button dropdown */
     options: Array<MenuItemProps>;
 }
-export declare const DotSplitButton: ({ autoFocus, ariaLabel, children, className, "data-testid": dataTestId, disabled, disablePortal, disableRipple, fullWidth, isSubmit, onClick, onSelect, options, size, titleTooltip, tooltip, type, }: SplitButtonProps) => JSX.Element;
+export declare const DotSplitButton: ({ autoFocus, ariaLabel, className, "data-testid": dataTestId, defaultMainOptionKey, disabled, disablePortal, disableRipple, fullWidth, isSubmit, onOptionClick, options, size, titleTooltip, tooltip, type, }: SplitButtonProps) => JSX.Element;

package/lib/components/split-button/utils/helpers.d.ts

@@ -0,0 +1,2 @@
+import { MenuItemProps } from '../../menu/Menu';
+export declare const getMainOptionIndex: (options: MenuItemProps[], mainOptionKey?: string) => number | null;

package/lib/components/typography/Typography.d.ts

@@ -6,9 +6,11 @@ export interface TypographyProps extends CommonProps {
     children: ReactNode;
     /** The component used for the root node. Either a string to use a HTML element or a component. */
     component?: ElementType;
+    /** If true, the typography will not have a bottom margin set */
+    noMarginBottom?: boolean;
     /** If true, the text will wrap and not be truncated */
     noWrap?: boolean;
     /** Applies the theme typography styles. */
     variant?: TypographyVariant;
 }
-export declare const DotTypography: ({ ariaLabel, className, "data-testid": dataTestId, children, component, noWrap, variant, }: TypographyProps) => JSX.Element;
+export declare const DotTypography: ({ ariaLabel, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: TypographyProps) => JSX.Element;

package/package.json

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