@digital-ai/dot-components 1.11.2 → 1.13.0

package/lib/components/button-toggle/ButtonToggle.d.ts

@@ -1,15 +1,6 @@
 import { MouseEvent } from 'react';
 import { CommonProps } from '../CommonProps';
-export declare type ButtonToggleSize = 'small' | 'medium' | 'large';
-export declare type ButtonToggleOrientation = 'horizontal' | 'vertical';
-export declare type ButtonToggleValue = string | number | boolean;
-export interface ButtonToggleOption extends CommonProps {
-    ariaLabel: string;
-    disabled?: boolean;
-    iconId?: string;
-    text?: string;
-    value: ButtonToggleValue;
-}
+import { ButtonToggleOption, ButtonToggleOrientation, ButtonToggleSize, ButtonToggleValue } from './utils/models';
 export interface ButtonToggleProps extends CommonProps {
     /** button props for each toggle button options*/
     buttonOptions: ButtonToggleOption[];

package/lib/components/button-toggle/index.d.ts

@@ -1 +1,3 @@
-export * from './ButtonToggle';
+export type { ButtonToggleOrientation, ButtonToggleOption, ButtonToggleSingleValue, ButtonToggleSize, ButtonToggleValue, } from './utils/models';
+export type { ButtonToggleProps } from './ButtonToggle';
+export { DotButtonToggle } from './ButtonToggle';

package/lib/components/button-toggle/utils/models.d.ts

@@ -0,0 +1,12 @@
+import { CommonProps } from '../../CommonProps';
+export declare type ButtonToggleSingleValue = string | number | boolean;
+export declare type ButtonToggleSize = 'small' | 'medium' | 'large';
+export declare type ButtonToggleOrientation = 'horizontal' | 'vertical';
+export declare type ButtonToggleValue = ButtonToggleSingleValue | Array<ButtonToggleSingleValue>;
+export interface ButtonToggleOption extends CommonProps {
+    ariaLabel: string;
+    disabled?: boolean;
+    iconId?: string;
+    text?: string;
+    value: ButtonToggleValue;
+}

package/lib/components/draggable-list/DraggableList.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { CommonProps } from '../CommonProps';
+import { DraggableItem, DraggableListChangeHandler } from './utils/models';
+export declare const DEFAULT_LIST_WIDTH = 240;
+export declare const DEFAULT_LIST_ITEM_HEIGHT = 36;
+export interface DraggableListProps extends CommonProps {
+    /** Array of draggable list items displayed */
+    items: DraggableItem[];
+    /** Callback function which gets executed when the list changes */
+    onChange?: DraggableListChangeHandler;
+    /** Height of the list item in pixels, defaults to 36px */
+    rowHeight?: number;
+    /** Width of the draggable list, defaults to 240px */
+    width?: number | string;
+}
+export declare const DotDraggableList: ({ ariaLabel, className, "data-testid": dataTestId, items, onChange, width, rowHeight, }: DraggableListProps) => JSX.Element;

package/lib/components/draggable-list/DraggableList.stories.data.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { DraggableItem } from './';
+export interface DraggableListWithAvatarArgs {
+    primaryText: string;
+    secondaryText: string;
+}
+export interface DraggableListWithIconsArgs {
+    id: string;
+    text: string;
+}
+export declare const DraggableListWithAvatar: ({ primaryText, secondaryText, }: DraggableListWithAvatarArgs) => JSX.Element;
+export declare const DraggableListWithIcons: ({ id, text, }: DraggableListWithIconsArgs) => JSX.Element;
+export declare const draggableListItems: DraggableItem[];
+export declare const draggableListWithAvatar: DraggableItem[];
+export declare const draggableListWithIcons: DraggableItem[];

package/lib/components/draggable-list/DraggableList.stories.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const withIconsClassName = "dot-draggable-list-with-icons";
+export declare const withAvatarClassName = "dot-draggable-list-with-avatar";
+export declare const StyledDraggableListWithAvatar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDraggableListWithIcons: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/draggable-list/DraggableList.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const rootClassName = "dot-draggable-list";
+export declare const listItemClassName = "dot-draggable-list-item";
+export declare const StyledDraggableList: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/draggable-list/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DraggableList';
+export type { DraggableItem, DraggableListChangeHandler } from './utils/models';

package/lib/components/draggable-list/utils/helpers.d.ts

@@ -0,0 +1,4 @@
+import { Layout } from 'react-grid-layout';
+import { DraggableItem } from './models';
+export declare const getOrderedListItems: (layout: Layout[], listItems: DraggableItem[]) => DraggableItem[];
+export declare const getListItemLayout: (listItems: DraggableItem[]) => Layout[];

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

@@ -0,0 +1,5 @@
+import { ListItemProps } from '@material-ui/core';
+export interface DraggableItem extends ListItemProps {
+    id: string;
+}
+export declare type DraggableListChangeHandler = (listItems: DraggableItem[]) => void;

package/lib/components/helpers.d.ts

@@ -1,5 +1,9 @@
+import { ReactNode } from 'react';
+import { TypographyVariant } from './typography/Typography';
 import { AvatarColor } from './avatar/Avatar';
 export declare const calculateNumberFromText: (text: string) => number;
+export declare const calculateWidth: (width: number | string) => string | undefined;
 export declare const getAvatarColorForInputText: (value: string) => AvatarColor;
 export declare const isString: (str: unknown) => boolean;
 export declare const isNumber: (num: unknown) => boolean;
+export declare const renderNodeOrTypography: (content: string | ReactNode, typographyVariant?: TypographyVariant) => ReactNode;

package/lib/components/index.d.ts

@@ -3,7 +3,7 @@ export type { AutoCompleteOption, AutoCompleteProps, AutoCompleteValue, Autocomp
 export type { AvatarProps } from './avatar/Avatar';
 export type { BreadcrumbItem } from './breadcrumbs/Breadcrumbs';
 export type { ButtonProps } from './button/Button';
-export type { ButtonToggleProps, ButtonToggleValue, ButtonToggleOption, ButtonToggleOrientation, ButtonToggleSize, } from './button-toggle';
+export type { ButtonToggleProps, ButtonToggleValue, ButtonToggleOption, ButtonToggleOrientation, ButtonToggleSingleValue, ButtonToggleSize, } from './button-toggle';
 export type { CheckboxProps } from './checkbox/Checkbox';
 export type { CheckboxGroupProps } from './checkbox/CheckboxGroup';
 export type { SubmitButtonProps } from './dialog/Dialog';
@@ -27,6 +27,11 @@ 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 type { TruncateWithTooltipProps } from './truncate-with-tooltip';
+export type { DraggableItem, DraggableListChangeHandler, } from './draggable-list';
+export type { SnackbarProps, SnackbarSeverity, SnackbarOrigin, } from './snackbar';
+export type { CharactersLimit, InlineEditProps } from './inline-edit';
+export type { progressColorOptions, progressVariantOptions, ProgressProps, } from './progress';
 export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
@@ -58,7 +63,7 @@ export { DotFormGroup } from './form-group/FormGroup';
 export { DotDynamicForm } from './dynamic-form/DynamicForm';
 export { DotIcon } from './icon/Icon';
 export { DotIconButton } from './button/IconButton';
-export { DotInlineEdit } from './inline-edit/InlineEdit';
+export { DotInlineEdit } from './inline-edit';
 export { DotInputText } from './input-form-fields/InputText';
 export { DotInputSelect } from './input-form-fields/InputSelect';
 export { DotLink } from './link/Link';
@@ -66,13 +71,12 @@ export { DotList } from './list';
 export { DotMenu } from './menu/Menu';
 export { DotNavigationRail } from './navigation-rail/NavigationRail';
 export { DotPill } from './pill/Pill';
-export { DotProgress } from './progress/Progress';
+export { DotProgress } from './progress';
 export { DotRadioButton } from './radio/RadioButton';
 export { DotRadioGroup } from './radio/RadioGroup';
 export { DotSidebar } from './sidebar/Sidebar';
 export { DotSkeleton } from './skeleton/Skeleton';
-export { DotSnackbar } from './snackbar/Snackbar';
-export { DotSnackbarContainer, DotSnackbarProvider, useDotSnackbarContext, } from './snackbar/SnackbarProvider';
+export { DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, useDotSnackbarContext, } from './snackbar';
 export { DotSplitButton } from './split-button/SplitButton';
 export { DotProgressButton } from './progress-button/ProgressButton';
 export { DotSwitch } from './switch/Switch';
@@ -83,3 +87,5 @@ export { DotTypography } from './typography/Typography';
 export { DotFileUpload } from './file-upload/FileUpload';
 export { DotDivider } from './divider';
 export { DotPopper } from './popper';
+export { DotTruncateWithTooltip } from './truncate-with-tooltip';
+export { DotDraggableList } from './draggable-list';

package/lib/components/inline-edit/InlineEdit.d.ts

@@ -1,35 +1,28 @@
 /// <reference types="react" />
 import { CommonProps } from '../CommonProps';
-import { inputSizeOptions } from '../input-form-fields/InputFormFields.propTypes';
+import { TypographyVariant } from '../typography/Typography';
+import { CharactersLimit } from './utils/models';
 export interface InlineEditProps extends CommonProps {
-    /** If true, the input will be focused automatically on load */
-    autoFocus?: boolean;
-    /** If true, the input will be disabled */
-    disabled?: boolean;
-    /** If true, the label will be displayed in an error state. */
-    error?: boolean;
+    /** Characters limit configuration object */
+    charactersLimit?: CharactersLimit;
     /** If true, the input will take up the full width of its container */
     fullWidth?: boolean;
-    /** The helper text content. */
-    helperText?: string;
+    /** If true, `Cancel` and `Save` buttons will be hidden */
+    hideActionButtons?: boolean;
     /** The name of input element */
     name: string;
-    /** A function that should be executed when the value of the input changes */
-    onChange?: (value: string) => void;
+    /** An async function which should be executed when the value of the input changes */
+    onChange: (value: string) => Promise<boolean>;
     /** A function that informs the parent of current editing state */
     onEditStateChange?: (editing: boolean) => void;
-    /** A function that informs the parent when label is being updated */
-    onLabelChange?: (name: string) => Promise<string | null>;
-    /** If true, the input will be read-only. */
+    /** If true, component will behave like a regular text (editing functionality will be disabled). */
     readOnly?: boolean;
-    /** If true, the input will be required and label will display accordingly */
-    required: boolean;
-    /** Size of the input */
-    size?: inputSizeOptions;
+    /** Typography variant to be used */
+    typography?: TypographyVariant;
     /** default value that is displayed on load */
     value?: string;
 }
 /**
  * @experimental This component is still in development
  */
-export declare const DotInlineEdit: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, disabled, error, fullWidth, helperText, name, onEditStateChange, onLabelChange, readOnly, required, size, value, }: InlineEditProps) => JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, typography, value, }: InlineEditProps) => JSX.Element;

package/lib/components/inline-edit/InlineEdit.styles.d.ts

@@ -1,2 +1,12 @@
+import { TypographyVariant } from '../typography/Typography';
 export declare const rootClassName = "dot-inline-edit";
-export declare const StyledInlineEdit: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const editModeClassName = "dot-edit-mode";
+export declare const viewModeClassName = "dot-view-mode";
+export declare const readOnlyClassName = "dot-read-only";
+export declare const editActionsClassName = "dot-edit-actions";
+export declare const editTextFieldClassName = "dot-edit-text-field";
+export interface StyledInlineEditProps {
+    fullWidth: boolean;
+    typography?: TypographyVariant;
+}
+export declare const StyledInlineEdit: import("styled-components").StyledComponent<"div", any, StyledInlineEditProps, never>;

package/lib/components/inline-edit/index.d.ts

@@ -0,0 +1,3 @@
+export type { InlineEditProps } from './InlineEdit';
+export type { CharactersLimit } from './utils/models';
+export { DotInlineEdit } from './InlineEdit';

package/lib/components/inline-edit/utils/helpers.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+export declare const getCounterAdornment: (currentLength: number, maxLength: number, dataTestId?: string) => ReactNode | undefined;
+export declare const getWarningAdornment: () => JSX.Element;

package/lib/components/inline-edit/utils/models.d.ts

@@ -0,0 +1,5 @@
+export interface CharactersLimit {
+    /** If true, character limiter will be hidden. It is displayed by default. */
+    hideCounter?: boolean;
+    maxLength: number;
+}

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode, Ref, KeyboardEvent } from 'react';
+import { ChangeEvent, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'react';
 import { CommonProps } from '../CommonProps';
 export declare type inputSizeOptions = 'small' | 'medium';
 export interface InputProps extends CommonProps {
@@ -35,6 +35,8 @@ export interface InputProps extends CommonProps {
     onFocus?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** A function that should be executed when key is pressed */
     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 is displayed as required and the input element` will be required. */
     required?: boolean;
     /** Size of the input */

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

@@ -17,4 +17,4 @@ export interface InputTextProps extends InputProps {
     /** value of the InputText */
     value?: string;
 }
-export declare const DotInputText: ({ autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, multiline, name, onBlur, onChange, onFocus, onKeyDown, placeholder, readOnly, required, rows, rowsMax, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;
+export declare const DotInputText: ({ autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, 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;

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

@@ -50,7 +50,7 @@ export interface ListItemProps extends CommonProps {
     /** Event callback */
     onClick?: (event: MouseEvent) => void;
     /** Menu leave event callback */
-    onMenuLeave?: () => void;
+    onMenuLeave?: (event: MouseEvent | KeyboardEvent) => void;
     /** The main content element */
     primaryText?: string;
     /** The secondary content element */

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

@@ -0,0 +1,2 @@
+export type { ProgressProps, progressColorOptions, progressVariantOptions, } from './Progress';
+export { DotProgress } from './Progress';

package/lib/components/snackbar/Snackbar.d.ts

@@ -1,9 +1,12 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
+import { SnackbarOrigin } from './';
 export declare type SnackbarSeverity = 'error' | 'warning' | 'info' | 'success';
 export interface SnackbarProps extends CommonProps {
     /** Property used for creating a custom action button. */
     action?: ReactNode;
+    /** The anchor of the Snackbar. On smaller screens, the component grows to occupy all the available width, the horizontal alignment is ignored. */
+    anchorOrigin?: SnackbarOrigin;
     /** The message the user sees once the alert displays */
     children: ReactNode;
     /** A callback to handle closing the alert. */
@@ -12,6 +15,7 @@ export interface SnackbarProps extends CommonProps {
     open: boolean;
     /** An alert level, indicating the importance of the message. */
     severity: SnackbarSeverity;
+    /** Width of the encapsulated Alert component */
     width?: string;
 }
-export declare const DotSnackbar: ({ action, ariaLabel, children, className, "data-testid": dataTestId, onClose, open, severity, width, }: SnackbarProps) => JSX.Element;
+export declare const DotSnackbar: ({ action, anchorOrigin, ariaLabel, children, className, "data-testid": dataTestId, onClose, open, severity, width, }: SnackbarProps) => JSX.Element;

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

@@ -0,0 +1,4 @@
+export type { SnackbarOrigin } from '@material-ui/core';
+export type { SnackbarProps, SnackbarSeverity } from './Snackbar';
+export { DotSnackbar } from './Snackbar';
+export { DotSnackbarContainer, DotSnackbarProvider, useDotSnackbarContext, } from './SnackbarProvider';

package/lib/components/truncate-with-tooltip/TruncateWithTooltip.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CommonProps } from '../CommonProps';
+export interface TruncateWithTooltipProps extends CommonProps {
+    charactersLimit?: number;
+    label: string;
+    width?: number | string;
+}
+export declare const DotTruncateWithTooltip: ({ ariaLabel, charactersLimit, className, "data-testid": dataTestId, label, width, }: TruncateWithTooltipProps) => JSX.Element;

package/lib/components/truncate-with-tooltip/TruncateWithTooltip.styles.d.ts

@@ -0,0 +1,3 @@
+import { Tooltip } from '@material-ui/core';
+export declare const rootClassName = "dot-truncate-with-tooltip";
+export declare const StyledTruncateWithTooltip: import("styled-components").StyledComponent<typeof Tooltip, any, {}, never>;

package/lib/components/truncate-with-tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export type { TruncateWithTooltipProps } from './TruncateWithTooltip';
+export { DotTruncateWithTooltip } from './TruncateWithTooltip';

package/lib/components/truncate-with-tooltip/utils/helpers.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const getTruncatedLabel: (label: string, charactersLimit?: number) => ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "1.11.2",
+  "version": "1.13.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [
@@ -29,6 +29,7 @@
     "@material-ui/lab": "4.0.0-alpha.56",
     "@material-ui/core": "4.12.3",
     "react-dropzone": "^11.4.2",
+    "react-grid-layout": "^1.3.4",
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {