@progress/kendo-react-taskboard 5.3.0-dev.202205041411

package/dist/npm/TaskBoardConfirmDialog.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var PropTypes = require("prop-types");
+var kendo_react_dialogs_1 = require("@progress/kendo-react-dialogs");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+/**
+ * Represents the TaskBoardConfirmDialog component.
+ */
+exports.TaskBoardConfirmDialog = function (props) {
+    var onClose = props.onClose, onConfirm = props.onConfirm, dialogMessage = props.dialogMessage, dialogTitle = props.dialogTitle, dialogConfirmButton = props.dialogConfirmButton, dialogCancelButton = props.dialogCancelButton;
+    return (React.createElement(kendo_react_dialogs_1.Dialog, { title: dialogTitle, closeIcon: false },
+        dialogMessage,
+        React.createElement(kendo_react_dialogs_1.DialogActionsBar, { layout: 'end' },
+            React.createElement(kendo_react_buttons_1.Button, { themeColor: 'primary', onClick: onConfirm }, dialogConfirmButton),
+            React.createElement(kendo_react_buttons_1.Button, { onClick: onClose }, dialogCancelButton))));
+};
+exports.TaskBoardConfirmDialog.propTypes = {
+    onClose: PropTypes.func.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    dialogMessage: PropTypes.string.isRequired,
+    dialogTitle: PropTypes.string.isRequired,
+    dialogConfirmButton: PropTypes.string.isRequired,
+    dialogCancelButton: PropTypes.string.isRequired
+};
+exports.TaskBoardConfirmDialog.displayName = 'KendoReactTaskBoardConfirmDialog';

package/dist/npm/TaskBoardEditCard.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { TaskBoardTaskModel } from './TaskBoard';
+import { TaskBoardAddCardProps } from './TaskBoardAddCard';
+/**
+ * Represents the props of the TaskBoardEditCard component
+ */
+export interface TaskBoardEditCardProps extends TaskBoardAddCardProps {
+    /**
+     * Determines the task of the TaskBoardEditCard component.
+     */
+    task: TaskBoardTaskModel;
+}
+/**
+ * Represents the TaskBoardEditCard component.
+ */
+export declare const TaskBoardEditCard: {
+    (props: TaskBoardEditCardProps): JSX.Element;
+    defaultProps: {};
+    displayName: string;
+};

package/dist/npm/TaskBoardEditCard.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var messages_1 = require("./messages");
+var taskEditing_1 = require("./hooks/taskEditing");
+/**
+ * Represents the TaskBoardEditCard component.
+ */
+exports.TaskBoardEditCard = function (props) {
+    var _a = taskEditing_1.useTaskEditing(props), onTitleChange = _a.onTitleChange, title = _a.title, onDescriptionChange = _a.onDescriptionChange, description = _a.description, onPriorityChange = _a.onPriorityChange, priority = _a.priority, onSave = _a.onSave;
+    var localization = kendo_react_intl_1.useLocalization();
+    return (React.createElement(props.editPane, { header: localization.toLanguageString(messages_1.taskBoardEditCardPaneTitle, messages_1.messages[messages_1.taskBoardEditCardPaneTitle]) + props.task.title, titleInputTitle: localization.toLanguageString(messages_1.taskBoardAddCardTitleLabel, messages_1.messages[messages_1.taskBoardAddCardTitleLabel]), descriptionInputTitle: localization.toLanguageString(messages_1.taskBoardAddCardDescriptionLabel, messages_1.messages[messages_1.taskBoardAddCardDescriptionLabel]), priorityDropDownTitle: localization.toLanguageString(messages_1.taskBoardAddCardPriorityLabel, messages_1.messages[messages_1.taskBoardAddCardPriorityLabel]), task: props.task, saveButton: localization.toLanguageString(messages_1.taskBoardEditCardPaneSaveBtn, messages_1.messages[messages_1.taskBoardEditCardPaneSaveBtn]), cancelButton: localization.toLanguageString(messages_1.taskBoardEditPaneCancelBtn, messages_1.messages[messages_1.taskBoardEditPaneCancelBtn]), priorities: props.priorities, titleLabel: localization.toLanguageString(messages_1.taskBoardEditPaneTitleLabel, messages_1.messages[messages_1.taskBoardEditPaneTitleLabel]), descriptionLabel: localization.toLanguageString(messages_1.taskBoardEditPaneDescriptionLabel, messages_1.messages[messages_1.taskBoardEditPaneDescriptionLabel]), priorityLabel: localization.toLanguageString(messages_1.taskBoardEditPanePriorityLabel, messages_1.messages[messages_1.taskBoardEditPanePriorityLabel]), onSave: onSave, onClose: props.onClose, onTitleChange: onTitleChange, title: title, onDescriptionChange: onDescriptionChange, description: description, onPriorityChange: onPriorityChange, priority: priority }));
+};
+var defaultProps = {};
+exports.TaskBoardEditCard.propTypes = {};
+exports.TaskBoardEditCard.defaultProps = defaultProps;
+exports.TaskBoardEditCard.displayName = 'KendoReactTaskBoardEditCard';

package/dist/npm/TaskBoardTaskEditPane.d.ts

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { DropDownListChangeEvent } from '@progress/kendo-react-dropdowns';
+import { InputChangeEvent } from '@progress/kendo-react-inputs';
+import { TaskBoardPriority, TaskBoardTaskModel } from './TaskBoard';
+/**
+ * Represents the props of the TaskBoardTaskEditPane component
+ */
+export interface TaskBoardTaskEditPaneProps {
+    /**
+     * Represents the rendered header of the TaskBoardTaskEditPane.
+     */
+    header: string;
+    /**
+     * Represents the save button of the TaskBoardTaskEditPane.
+     */
+    saveButton: React.ReactNode;
+    /**
+     * Represents the cancel button of the TaskBoardTaskEditPane.
+     */
+    cancelButton: React.ReactNode;
+    /**
+     * Represents the titleInput title of the TaskBoardTaskEditPane.
+     */
+    titleInputTitle: string;
+    /**
+     * Represents the descriptionInput title of the TaskBoardTaskEditPane.
+     */
+    descriptionInputTitle: string;
+    /**
+     * Represents the priorityDropDownTitle title of the TaskBoardTaskEditPane.
+     */
+    priorityDropDownTitle: string;
+    /**
+     * Represents the title label of the TaskBoardTaskEditPane.
+     */
+    titleLabel: React.ReactNode;
+    /**
+     * Represents the description label of the TaskBoardTaskEditPane.
+     */
+    descriptionLabel: React.ReactNode;
+    /**
+     * Represents the priority label of the TaskBoardTaskEditPane.
+     */
+    priorityLabel: React.ReactNode;
+    /**
+     * Represents the rendered task of the TaskBoardTaskEditPane.
+     */
+    task?: TaskBoardTaskModel;
+    /**
+     * Determines the priority.
+     */
+    priority: TaskBoardPriority;
+    /**
+     * Determines the rendered priorities.
+     */
+    priorities: TaskBoardPriority[];
+    /**
+     * Represents the title of the TaskBoardTaskEditPane.
+     */
+    title: string;
+    /**
+     * The rendered description.
+     */
+    description: string;
+    /**
+     * Fires on `onSave` event.
+     */
+    onSave: () => void;
+    /**
+     * Fires on `onClose` event.
+     */
+    onClose: () => void;
+    /**
+     * Fires when a title is changed.
+     */
+    onTitleChange: (event: InputChangeEvent) => void;
+    /**
+     * Fires when a description is changed.
+     */
+    onDescriptionChange: (event: InputChangeEvent) => void;
+    /**
+     * Fires when a priority has been changed.
+     */
+    onPriorityChange: (event: DropDownListChangeEvent) => void;
+}
+/**
+ * Represents the TaskBoardTaskEditPane component.
+ */
+export declare const TaskBoardTaskEditPane: {
+    (props: TaskBoardTaskEditPaneProps): JSX.Element;
+    defaultProps: {};
+    displayName: string;
+};

package/dist/npm/TaskBoardTaskEditPane.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var kendo_react_dropdowns_1 = require("@progress/kendo-react-dropdowns");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_react_inputs_1 = require("@progress/kendo-react-inputs");
+var kendo_react_labels_1 = require("@progress/kendo-react-labels");
+var kendo_react_form_1 = require("@progress/kendo-react-form");
+var utils_1 = require("./utils");
+/**
+ * Represents the TaskBoardTaskEditPane component.
+ */
+exports.TaskBoardTaskEditPane = function (props) {
+    return (React.createElement("div", { className: 'k-taskboard-pane k-taskboard-edit-pane' },
+        React.createElement("div", { className: 'k-taskboard-pane-header' },
+            React.createElement("div", { className: 'k-taskboard-pane-header-text' }, props.header),
+            React.createElement("span", { className: "k-spacer" }),
+            React.createElement("div", { className: "k-taskboard-pane-header-actions" },
+                React.createElement(kendo_react_buttons_1.Button, { icon: 'close', fillMode: "flat", onClick: props.onClose }))),
+        React.createElement("div", { className: "k-taskboard-pane-content" },
+            React.createElement("div", { role: "form", "data-role": "form", className: "k-form" },
+                React.createElement(kendo_react_form_1.FieldWrapper, null,
+                    React.createElement(kendo_react_labels_1.Label, { editorId: 'title' }, props.titleLabel),
+                    React.createElement(kendo_react_inputs_1.Input, { id: 'title', onChange: props.onTitleChange, value: props.title, title: props.titleInputTitle })),
+                React.createElement(kendo_react_form_1.FieldWrapper, null,
+                    React.createElement(kendo_react_labels_1.Label, { editorId: 'description' }, props.descriptionLabel),
+                    React.createElement(kendo_react_inputs_1.Input, { id: 'description', onChange: props.onDescriptionChange, value: props.description, title: props.descriptionInputTitle })),
+                React.createElement(kendo_react_form_1.FieldWrapper, null,
+                    React.createElement(kendo_react_labels_1.Label, { editorId: 'priority' }, props.priorityLabel),
+                    React.createElement(kendo_react_dropdowns_1.DropDownList, { id: 'priority', data: props.priorities, value: props.priority, onChange: props.onPriorityChange, itemRender: utils_1.itemRender, valueRender: utils_1.valueRender, textField: "priority", dataItemKey: "priority", title: props.priorityDropDownTitle })))),
+        React.createElement("div", { className: "k-taskboard-pane-actions k-actions k-hstack k-justify-content-end" },
+            React.createElement(kendo_react_buttons_1.Button, { onClick: props.onClose }, props.cancelButton),
+            React.createElement(kendo_react_buttons_1.Button, { themeColor: 'primary', onClick: props.onSave, disabled: !props.title || !props.description }, props.saveButton))));
+};
+var defaultProps = {};
+exports.TaskBoardTaskEditPane.propTypes = {};
+exports.TaskBoardTaskEditPane.defaultProps = defaultProps;
+exports.TaskBoardTaskEditPane.displayName = 'KendoReactTaskBoardEditPane';

package/dist/npm/TaskBoardToolbar.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+/**
+ * Represents the props of the TaskBoardToolbar component
+ */
+export interface TaskBoardToolbarProps {
+    /**
+     * The React elements that will be rendered inside the toolbar of the TaskBoard.
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the TaskBoardToolbar element.
+     */
+    className?: string | Array<string>;
+    /**
+     * Represents the styles that are applied to the TaskBoardToolbar.
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Represents the TaskBoardToolbar component.
+ */
+export declare const TaskBoardToolbar: {
+    (props: TaskBoardToolbarProps): JSX.Element;
+    defaultProps: TaskBoardToolbarProps;
+    displayName: string;
+};

package/dist/npm/TaskBoardToolbar.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var PropTypes = require("prop-types");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+/**
+ * Represents the TaskBoardToolbar component.
+ */
+exports.TaskBoardToolbar = function (props) {
+    var className = props.className, style = props.style, children = props.children;
+    return (React.createElement("div", { style: style, className: kendo_react_common_1.classNames('k-taskboard-header', className) },
+        React.createElement("div", { className: 'k-taskboard-toolbar k-toolbar' }, children)));
+};
+var defaultProps = {};
+exports.TaskBoardToolbar.propTypes = {
+    children: PropTypes.node
+};
+exports.TaskBoardToolbar.defaultProps = defaultProps;
+exports.TaskBoardToolbar.displayName = 'KendoReactTaskBoardToolbar';

package/dist/npm/card/Card.d.ts

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { CardProps, CardHandle, MenuSelectEvent } from '@progress/kendo-react-layout';
+import { TaskBoardConfirmDialogProps } from '../TaskBoardConfirmDialog';
+import { TaskBoardCardHeaderProps } from './CardHeader';
+import { TaskBoardCardBodyProps } from './CardBody';
+import { TaskBoardPreviewDialogProps } from './PreviewDialog';
+import { TaskBoardTaskModel } from '../TaskBoard';
+import { Popup } from '@progress/kendo-react-popup';
+/**
+ * Represents the props of the TaskBoardCard component.
+ */
+export interface TaskBoardCardProps {
+    /**
+     * The rendered task.
+     */
+    task: TaskBoardTaskModel;
+    /**
+     * The applied styles.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies the `tabIndex` that will be added to the TaskBoard Card element.
+     */
+    tabIndex?: number;
+    /**
+     * The disabled state.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the CardHandle reference.
+     */
+    elementRef?: React.RefObject<CardHandle>;
+    /**
+     * Determines the menu visibility.
+     */
+    showMenu: boolean;
+    /**
+     * Determines the visibility of the delete and confirm items.
+     */
+    showDeleteConfirm: boolean;
+    /**
+     * Determines the visibility of the previous pane.
+     */
+    showTaskPreviewPane: boolean;
+    /**
+     * Represents the menu items.
+     */
+    menuItems: any[];
+    /**
+     * Represents the popup reference.
+     */
+    popupRef: React.RefObject<Popup>;
+    /**
+     * Represents the confirm dialog message of the TaskBoardCard.
+     */
+    confirmDialogMessage: React.ReactNode;
+    /**
+     * Represents the confirm dialog title of the TaskBoardCard.
+     */
+    confirmDialogTitle: string;
+    /**
+     * Represents the confirm dialog confirm button.
+     */
+    confirmDialogConfirmButton: React.ReactNode;
+    /**
+     * Represents the cancel dialog confirm button.
+     */
+    confirmDialogCancelButton: React.ReactNode;
+    /**
+     * Represents the preview dialog priority label.
+     */
+    previewDialogPriorityLabel: string;
+    /**
+     * Represents the preview dialog delete node.
+     */
+    previewDialogDelete: React.ReactNode;
+    /**
+     * Represents the preview dialog edit node.
+     */
+    previewDialogEdit: React.ReactNode;
+    /**
+     * Fires on show of the preview pane.
+     */
+    onShowPreviewPane: () => void;
+    /**
+     * Fires on menu item selection.
+     */
+    onMenuItemSelect: (event: MenuSelectEvent) => void;
+    /**
+     * Fires when the menu is shown.
+     */
+    onShowMenu: () => void;
+    /**
+     * Fires when the menu is hidden.
+     */
+    onHideMenu: () => void;
+    /**
+     * Fires on blur of the menu button.
+     */
+    onMenuButtonBlur: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when task is deleted.
+     */
+    onTaskDelete: () => void;
+    /**
+     * Fires when task is edited.
+     */
+    onTaskEdit: () => void;
+    /**
+     * Fires on close/confirm dialog.
+     */
+    onCloseConfirmDialog: () => void;
+    /**
+     * Represents the Card component.
+     */
+    card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<CardHandle>>;
+    /**
+     * Represents the TaskBoardCardHeader component.
+     */
+    cardHeader: React.ComponentType<TaskBoardCardHeaderProps>;
+    /**
+     * Represents the TaskBoardCardBody component.
+     */
+    cardBody: React.ComponentType<TaskBoardCardBodyProps>;
+    /**
+     * Represents the TaskBoardConfirmDialog component.
+     */
+    confirmDialog: React.ComponentType<TaskBoardConfirmDialogProps>;
+    /**
+     * Represents the TaskBoardPreviewDialog component.
+     */
+    previewDialog: React.ComponentType<TaskBoardPreviewDialogProps>;
+}
+/**
+ * Represents the TaskBoardCard component.
+ */
+export declare const TaskBoardCard: {
+    (props: TaskBoardCardProps): JSX.Element;
+    displayName: string;
+};

package/dist/npm/card/Card.js

@@ -0,0 +1,35 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var constants_1 = require("../constants");
+/**
+ * Represents the TaskBoardCard component.
+ */
+exports.TaskBoardCard = function (props) {
+    var _a;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(props.card, __assign({ key: String(props.task.id), ref: props.elementRef, style: props.style, className: kendo_react_common_1.classNames('k-taskboard-card k-cursor-move k-taskboard-card-category', {
+                'k-disabled': props.disabled
+            }) }, (_a = {},
+            _a[constants_1.TASKBOARD_ITEM_TYPE] = constants_1.TASKBOARD_TASK,
+            _a[constants_1.TASKBOARD_ITEM_ID] = props.task.id,
+            _a.tabIndex = props.tabIndex,
+            _a)),
+            React.createElement(props.cardHeader, { showMenu: props.showMenu, menuItems: props.menuItems, popupRef: props.popupRef, title: props.task.title, task: props.task, onShowPreviewPane: props.onShowPreviewPane, onShowMenu: props.onShowMenu, onHideMenu: props.onHideMenu, onMenuButtonBlur: props.onMenuButtonBlur, onMenuItemSelect: props.onMenuItemSelect }),
+            React.createElement(props.cardBody, { task: props.task }, props.task.description)),
+        props.showDeleteConfirm && (React.createElement(props.confirmDialog, { onConfirm: props.onTaskDelete, onClose: props.onCloseConfirmDialog, dialogMessage: props.confirmDialogMessage, dialogTitle: props.confirmDialogTitle, dialogConfirmButton: props.confirmDialogConfirmButton, dialogCancelButton: props.confirmDialogCancelButton })),
+        props.showTaskPreviewPane && (React.createElement(props.previewDialog, { title: props.task.title, description: props.task.description, priorityLabel: props.previewDialogPriorityLabel, delete: props.previewDialogDelete, edit: props.previewDialogEdit, onShowTaskPreviewPane: props.onShowPreviewPane, onDeleteTask: props.onTaskDelete, onTaskEdit: props.onTaskEdit, priority: props.task.priority }))));
+};
+exports.TaskBoardCard.displayName = 'KendoReactTaskBoardCard';

package/dist/npm/card/CardBody.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { TaskBoardTaskModel } from '../TaskBoard';
+/**
+ * Represents the props of the TaskBoardCardBody component.
+ */
+export interface TaskBoardCardBodyProps {
+    /**
+     * Determines the children nodes.
+     */
+    children: React.ReactNode;
+    /**
+     * Determines the TaskBoardTask.
+     */
+    task: TaskBoardTaskModel;
+}
+/**
+ * Represents the TaskBoardCardBody component.
+ */
+export declare const TaskBoardCardBody: {
+    (props: TaskBoardCardBodyProps): JSX.Element;
+    displayName: string;
+};

package/dist/npm/card/CardBody.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+/**
+ * Represents the TaskBoardCardBody component.
+ */
+exports.TaskBoardCardBody = function (props) {
+    return (React.createElement(kendo_react_layout_1.CardBody, null, props.children));
+};
+exports.TaskBoardCardBody.displayName = 'KendoReactTaskBoardCardBody';

package/dist/npm/card/CardHeader.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { MenuSelectEvent } from '@progress/kendo-react-layout';
+import { Popup } from '@progress/kendo-react-popup';
+import { TaskBoardTaskModel } from '../TaskBoard';
+/**
+ * Represents the props of the TaskBoardCardHeader component.
+ */
+export interface TaskBoardCardHeaderProps {
+    /**
+     * Determines the visibility of the show menu.
+     */
+    showMenu: boolean;
+    /**
+     * Represents the menu items.
+     */
+    menuItems: any[];
+    /**
+     * Specifies the popup reference.
+     */
+    popupRef: React.RefObject<Popup>;
+    /**
+     * The rendered title.
+     */
+    title: React.ReactNode;
+    /**
+     * The rendered task.
+     */
+    task: TaskBoardTaskModel;
+    /**
+     * Fires when the preview pane is shown.
+     */
+    onShowPreviewPane: () => void;
+    /**
+     * Fires when the menu is shown.
+     */
+    onShowMenu: () => void;
+    /**
+     * Fires when the menu is hidden.
+     */
+    onHideMenu: () => void;
+    /**
+     * Fires on blur of the menu button.
+     */
+    onMenuButtonBlur: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when menu item is selected.
+     */
+    onMenuItemSelect: (event: MenuSelectEvent) => void;
+}
+/**
+ * Represents the TaskBoardCardHeader component.
+ */
+export declare const TaskBoardCardHeader: {
+    (props: TaskBoardCardHeaderProps): JSX.Element;
+    displayName: string;
+};

package/dist/npm/card/CardHeader.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+var kendo_react_popup_1 = require("@progress/kendo-react-popup");
+/**
+ * Represents the TaskBoardCardHeader component.
+ */
+exports.TaskBoardCardHeader = function (props) {
+    var buttonRef = React.useRef();
+    return (React.createElement(kendo_react_layout_1.CardHeader, { className: "k-hbox" },
+        React.createElement("span", { className: 'k-card-title k-link', onClick: props.onShowPreviewPane }, props.title),
+        React.createElement("span", { className: 'k-spacer' }),
+        React.createElement("div", { className: 'k-card-header-actions' },
+            React.createElement(kendo_react_buttons_1.Button, { fillMode: "flat", icon: "more-vertical", ref: buttonRef, onClick: props.showMenu ? props.onHideMenu : props.onShowMenu, onBlur: props.onMenuButtonBlur }),
+            React.createElement(kendo_react_popup_1.Popup, { anchor: buttonRef.current && buttonRef.current.element, show: props.showMenu, ref: props.popupRef },
+                React.createElement(kendo_react_layout_1.Menu, { vertical: true, onSelect: props.onMenuItemSelect, items: props.menuItems, className: 'k-context-menu' })))));
+};
+exports.TaskBoardCardHeader.displayName = 'KendoReactTaskBoardCardHeader';

package/dist/npm/card/PreviewDialog.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { TaskBoardPriority } from '../TaskBoard';
+/**
+ * Represents the props of the TaskBoardPreviewDialog component.
+ */
+export interface TaskBoardPreviewDialogProps {
+    /**
+     * The rendered title.
+     */
+    title: React.ReactNode;
+    /**
+     * The rendered description.
+     */
+    description: React.ReactNode;
+    /**
+     * Represents the priority label of the TaskBoardPreviewDialog.
+     */
+    priorityLabel: React.ReactNode;
+    /**
+     * Determines the delete node.
+     */
+    delete: React.ReactNode;
+    /**
+     * Determines the edit node.
+     */
+    edit: React.ReactNode;
+    /**
+     * Represents the priority of the task board.
+     */
+    priority: TaskBoardPriority;
+    /**
+     * Fires when task preview pane is shown.
+     */
+    onShowTaskPreviewPane: () => void;
+    /**
+     * Fires when task is deleted.
+     */
+    onDeleteTask: () => void;
+    /**
+     * Fires when task is edited.
+     */
+    onTaskEdit: () => void;
+}
+/**
+ * Represents the TaskBoardPreviewDialog component.
+ */
+export declare const TaskBoardPreviewDialog: {
+    (props: TaskBoardPreviewDialogProps): JSX.Element;
+    displayName: string;
+};

package/dist/npm/card/PreviewDialog.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+/**
+ * Represents the TaskBoardPreviewDialog component.
+ */
+exports.TaskBoardPreviewDialog = function (props) {
+    return (React.createElement("div", { className: "k-taskboard-pane k-taskboard-preview-pane" },
+        React.createElement("div", { className: 'k-taskboard-pane-header' },
+            React.createElement("div", { className: 'k-taskboard-pane-header-text' }, props.title),
+            React.createElement("span", { className: "k-spacer" }),
+            React.createElement("div", { className: "k-taskboard-pane-header-actions" },
+                React.createElement(kendo_react_buttons_1.Button, { icon: 'close', fillMode: "flat", onClick: props.onShowTaskPreviewPane }))),
+        React.createElement("div", { className: "k-taskboard-pane-content" },
+            React.createElement("p", null, props.description),
+            React.createElement("p", null,
+                props.priorityLabel,
+                "\u00A0",
+                React.createElement("span", { style: { backgroundColor: props.priority.color } }, "\u00A0"),
+                "\u00A0",
+                props.priority.priority)),
+        React.createElement("div", { className: "k-taskboard-pane-actions k-actions k-hstack k-justify-content-end" },
+            React.createElement(kendo_react_buttons_1.Button, { onClick: props.onDeleteTask }, props.delete),
+            React.createElement(kendo_react_buttons_1.Button, { themeColor: 'primary', onClick: props.onTaskEdit }, props.edit))));
+};
+exports.TaskBoardPreviewDialog.displayName = 'KendoReactTaskBoardPreviewDialog';