@progress/kendo-react-taskboard 13.3.0 → 13.4.0-develop.1

package/TaskBoardEditCard.mjs

@@ -7,25 +7,25 @@
  */
 import * as T from "react";
 import { useLocalization as E } from "@progress/kendo-react-intl";
-import { taskBoardEditCardPaneTitle as i, messages as a, taskBoardAddCardTitleLabel as o, taskBoardAddCardDescriptionLabel as r, taskBoardAddCardPriorityLabel as n, taskBoardEditCardPaneSaveBtn as d, taskBoardEditPaneCancelBtn as g, taskBoardEditPaneTitleLabel as s, taskBoardEditPaneDescriptionLabel as l, taskBoardEditPanePriorityLabel as L } from "./messages/index.mjs";
+import { taskBoardEditPanePriorityLabel as i, messages as a, taskBoardEditPaneDescriptionLabel as o, taskBoardEditPaneTitleLabel as r, taskBoardEditPaneCancelBtn as n, taskBoardEditCardPaneSaveBtn as d, taskBoardAddCardPriorityLabel as g, taskBoardAddCardDescriptionLabel as s, taskBoardAddCardTitleLabel as l, taskBoardEditCardPaneTitle as L } from "./messages/index.mjs";
 import { useTaskEditing as P } from "./hooks/taskEditing.mjs";
 const c = (e) => {
   const { onTitleChange: u, title: k, onDescriptionChange: B, description: p, onPriorityChange: C, priority: m, onSave: S } = P(e), t = E();
   return /* @__PURE__ */ T.createElement(
     e.editPane,
     {
-      header: t.toLanguageString(i, a[i]) + e.task.title,
+      header: t.toLanguageString(L, a[L]) + e.task.title,
       titleInputTitle: t.toLanguageString(
-        o,
-        a[o]
+        l,
+        a[l]
       ),
       descriptionInputTitle: t.toLanguageString(
-        r,
-        a[r]
+        s,
+        a[s]
       ),
       priorityDropDownTitle: t.toLanguageString(
-        n,
-        a[n]
+        g,
+        a[g]
       ),
       task: e.task,
       saveButton: t.toLanguageString(
@@ -33,21 +33,21 @@ const c = (e) => {
         a[d]
       ),
       cancelButton: t.toLanguageString(
-        g,
-        a[g]
+        n,
+        a[n]
       ),
       priorities: e.priorities,
       titleLabel: t.toLanguageString(
-        s,
-        a[s]
+        r,
+        a[r]
       ),
       descriptionLabel: t.toLanguageString(
-        l,
-        a[l]
+        o,
+        a[o]
       ),
       priorityLabel: t.toLanguageString(
-        L,
-        a[L]
+        i,
+        a[i]
       ),
       onSave: S,
       onClose: e.onClose,

package/TaskBoardTaskEditPane.d.ts

@@ -0,0 +1,96 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DropDownListChangeEvent } from '@progress/kendo-react-dropdowns';
+import { InputChangeEvent } from '@progress/kendo-react-inputs';
+import { TaskBoardPriority, TaskBoardTaskModel } from './TaskBoard.js';
+import * as React from 'react';
+/**
+ * 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 when Save button is clicked.
+     */
+    onSave: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when Cancel button is clicked.
+     */
+    onClose: (event: React.MouseEvent<HTMLButtonElement>) => 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: React.FunctionComponent<TaskBoardTaskEditPaneProps>;

package/TaskBoardTaskEditPane.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),u=require("@progress/kendo-react-dropdowns"),r=require("@progress/kendo-react-buttons"),d=require("@progress/kendo-react-inputs"),i=require("@progress/kendo-react-labels"),l=require("@progress/kendo-react-form"),s=require("./utils.js"),k=require("@progress/kendo-svg-icons");function b(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const t=b(m),o=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-edit-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.header),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(r.Button,{icon:"x",svgIcon:k.xIcon,fillMode:"flat",onClick:e.onClose}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("div",{role:"form","data-role":"form",className:"k-form"},t.createElement(l.FieldWrapper,null,t.createElement(i.Label,{editorId:"title"},e.titleLabel),t.createElement(d.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),t.createElement(l.FieldWrapper,null,t.createElement(i.Label,{editorId:"description"},e.descriptionLabel),t.createElement(d.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),t.createElement(l.FieldWrapper,null,t.createElement(i.Label,{editorId:"priority"},e.priorityLabel),t.createElement(u.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:s.itemRender,valueRender:s.valueRender,textField:"priority",dataItemKey:"priority",title:e.priorityDropDownTitle})))),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(r.Button,{onClick:e.onClose},e.cancelButton),t.createElement(r.Button,{themeColor:"primary",onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));o.propTypes={};o.displayName="KendoReactTaskBoardEditPane";exports.TaskBoardTaskEditPane=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),m=require("@progress/kendo-react-dropdowns"),i=require("@progress/kendo-react-buttons"),d=require("@progress/kendo-react-inputs"),r=require("@progress/kendo-react-labels"),l=require("@progress/kendo-react-form"),s=require("./utils.js"),k=require("@progress/kendo-svg-icons");function b(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const t=b(u),o=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-edit-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.header),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(i.Button,{icon:"x",svgIcon:k.xIcon,onClick:e.onClose}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("div",{role:"form","data-role":"form",className:"k-form"},t.createElement(l.FieldWrapper,null,t.createElement(r.Label,{editorId:"title"},e.titleLabel),t.createElement(d.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),t.createElement(l.FieldWrapper,null,t.createElement(r.Label,{editorId:"description"},e.descriptionLabel),t.createElement(d.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),t.createElement(l.FieldWrapper,null,t.createElement(r.Label,{editorId:"priority"},e.priorityLabel),t.createElement(m.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:s.itemRender,valueRender:s.valueRender,textField:"priority",dataItemKey:"priority",title:e.priorityDropDownTitle})))),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(i.Button,{onClick:e.onClose},e.cancelButton),t.createElement(i.Button,{onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));o.propTypes={};o.displayName="KendoReactTaskBoardEditPane";exports.TaskBoardTaskEditPane=o;

package/TaskBoardTaskEditPane.mjs

@@ -11,9 +11,9 @@ import { Button as a } from "@progress/kendo-react-buttons";
 import { Input as r } from "@progress/kendo-react-inputs";
 import { Label as i } from "@progress/kendo-react-labels";
 import { FieldWrapper as n } from "@progress/kendo-react-form";
-import { itemRender as c, valueRender as m } from "./utils.mjs";
-import { xIcon as d } from "@progress/kendo-svg-icons";
-const l = (e) => /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane k-taskboard-edit-pane" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header-text" }, e.header), /* @__PURE__ */ t.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header-actions" }, /* @__PURE__ */ t.createElement(a, { icon: "x", svgIcon: d, fillMode: "flat", onClick: e.onClose }))), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-content" }, /* @__PURE__ */ t.createElement("div", { role: "form", "data-role": "form", className: "k-form" }, /* @__PURE__ */ t.createElement(n, null, /* @__PURE__ */ t.createElement(i, { editorId: "title" }, e.titleLabel), /* @__PURE__ */ t.createElement(
+import { valueRender as c, itemRender as d } from "./utils.mjs";
+import { xIcon as m } from "@progress/kendo-svg-icons";
+const l = (e) => /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane k-taskboard-edit-pane" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header-text" }, e.header), /* @__PURE__ */ t.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header-actions" }, /* @__PURE__ */ t.createElement(a, { icon: "x", svgIcon: m, onClick: e.onClose }))), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-content" }, /* @__PURE__ */ t.createElement("div", { role: "form", "data-role": "form", className: "k-form" }, /* @__PURE__ */ t.createElement(n, null, /* @__PURE__ */ t.createElement(i, { editorId: "title" }, e.titleLabel), /* @__PURE__ */ t.createElement(
   r,
   {
     id: "title",
@@ -36,13 +36,13 @@ const l = (e) => /* @__PURE__ */ t.createElement("div", { className: "k-taskboar
     data: e.priorities,
     value: e.priority,
     onChange: e.onPriorityChange,
-    itemRender: c,
-    valueRender: m,
+    itemRender: d,
+    valueRender: c,
     textField: "priority",
     dataItemKey: "priority",
     title: e.priorityDropDownTitle
   }
-)))), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-actions k-actions k-hstack k-justify-content-end" }, /* @__PURE__ */ t.createElement(a, { onClick: e.onClose }, e.cancelButton), /* @__PURE__ */ t.createElement(a, { themeColor: "primary", onClick: e.onSave, disabled: !e.title || !e.description }, e.saveButton)));
+)))), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-actions k-actions k-hstack k-justify-content-end" }, /* @__PURE__ */ t.createElement(a, { onClick: e.onClose }, e.cancelButton), /* @__PURE__ */ t.createElement(a, { onClick: e.onSave, disabled: !e.title || !e.description }, e.saveButton)));
 l.propTypes = {};
 l.displayName = "KendoReactTaskBoardEditPane";
 export {

package/TaskBoardToolbar.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+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: React.FunctionComponent<TaskBoardToolbarProps>;

package/TaskBoardToolbar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),n=require("prop-types"),l=require("@progress/kendo-react-common");function d(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const s=d(c),r=e=>{const{className:o,style:t,children:a}=e;return s.createElement("div",{style:t,className:l.classNames("k-taskboard-header",o)},s.createElement("div",{className:"k-taskboard-toolbar k-toolbar k-toolbar-md k-toolbar-solid"},a))};r.propTypes={children:n.node};r.displayName="KendoReactTaskBoardToolbar";exports.TaskBoardToolbar=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),s=require("prop-types"),l=require("@progress/kendo-react-common");function d(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const c=d(n),r=e=>{const{className:a,style:t,children:o}=e;return c.createElement("div",{style:t,className:l.classNames("k-taskboard-header",a)},c.createElement("div",{className:"k-taskboard-toolbar k-toolbar"},o))};r.propTypes={children:s.node};r.displayName="KendoReactTaskBoardToolbar";exports.TaskBoardToolbar=r;

package/TaskBoardToolbar.mjs

@@ -7,15 +7,15 @@
  */
 import * as a from "react";
 import l from "prop-types";
-import { classNames as d } from "@progress/kendo-react-common";
-const o = (e) => {
-  const { className: r, style: s, children: t } = e;
-  return /* @__PURE__ */ a.createElement("div", { style: s, className: d("k-taskboard-header", r) }, /* @__PURE__ */ a.createElement("div", { className: "k-taskboard-toolbar k-toolbar k-toolbar-md k-toolbar-solid" }, t));
+import { classNames as m } from "@progress/kendo-react-common";
+const e = (o) => {
+  const { className: r, style: s, children: t } = o;
+  return /* @__PURE__ */ a.createElement("div", { style: s, className: m("k-taskboard-header", r) }, /* @__PURE__ */ a.createElement("div", { className: "k-taskboard-toolbar k-toolbar" }, t));
 };
-o.propTypes = {
+e.propTypes = {
   children: l.node
 };
-o.displayName = "KendoReactTaskBoardToolbar";
+e.displayName = "KendoReactTaskBoardToolbar";
 export {
-  o as TaskBoardToolbar
+  e as TaskBoardToolbar
 };

package/card/Card.d.ts

@@ -0,0 +1,148 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { CardProps, CardHandle, MenuSelectEvent } from '@progress/kendo-react-layout';
+import { TaskBoardConfirmDialogProps } from '../TaskBoardConfirmDialog.js';
+import { TaskBoardCardHeaderProps } from './CardHeader.js';
+import { TaskBoardCardBodyProps } from './CardBody.js';
+import { TaskBoardPreviewDialogProps } from './PreviewDialog.js';
+import { TaskBoardTaskModel } from '../TaskBoard.js';
+import { PopupHandle } from '@progress/kendo-react-popup';
+import * as React from 'react';
+/**
+ * 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 | null>;
+    /**
+     * Determines the menu visibility.
+     */
+    showMenu: boolean;
+    /**
+     * Determines the visibility of the task's delete confirmation dialog.
+     */
+    showDeleteConfirm: boolean;
+    /**
+     * Determines the visibility of the task's preview pane.
+     */
+    showTaskPreviewPane: boolean;
+    /**
+     * Represents the menu items.
+     */
+    menuItems: any[];
+    /**
+     * Represents the popup reference.
+     */
+    popupRef: React.RefObject<PopupHandle | null>;
+    /**
+     * Represents the content of the TaskBoardConfirmDialog component.
+     */
+    confirmDialogMessage: React.ReactNode;
+    /**
+     * Represents the title of the TaskBoardConfirmDialog component.
+     */
+    confirmDialogTitle: string;
+    /**
+     * Represents the content of the confirm button of the TaskBoardConfirmDialog component.
+     */
+    confirmDialogConfirmButton: React.ReactNode;
+    /**
+     * Represents the content of the cancel button of the TaskBoardConfirmDialog component.
+     */
+    confirmDialogCancelButton: React.ReactNode;
+    /**
+     * Represents the priority label in the preview dialog.
+     */
+    previewDialogPriorityLabel: string;
+    /**
+     * Represents the preview dialog delete node.
+     */
+    previewDialogDelete: React.ReactNode;
+    /**
+     * Represents the preview dialog edit node.
+     */
+    previewDialogEdit: React.ReactNode;
+    /**
+     * Fires when the preview pane needs to be shown.
+     */
+    onShowPreviewPane: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Fires when the preview pane needs to be closed.
+     */
+    onClosePreviewPane: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Fires on menu item selection.
+     */
+    onMenuItemSelect: (event: MenuSelectEvent) => void;
+    /**
+     * Fires when the menu needs to be shown.
+     */
+    onShowMenu: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when the menu needs to be hidden.
+     */
+    onHideMenu: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires on blur of the menu button.
+     */
+    onMenuButtonBlur: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when task's delete button is clicked.
+     */
+    onTaskDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when task's edit button is clicked.
+     */
+    onTaskEdit: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The Close Button click event handler of the TaskBoardConfirmDialog component.
+     */
+    onCloseConfirmDialog: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Represents the Card component.
+     */
+    card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<CardHandle | null>>;
+    /**
+     * 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: React.FunctionComponent<TaskBoardCardProps>;

package/card/Card.mjs

@@ -7,7 +7,7 @@
  */
 import * as t from "react";
 import { classNames as a } from "@progress/kendo-react-common";
-import { TASKBOARD_ITEM_TYPE as n, TASKBOARD_TASK as i, TASKBOARD_ITEM_ID as l } from "../constants.mjs";
+import { TASKBOARD_TASK as n, TASKBOARD_ITEM_ID as i, TASKBOARD_ITEM_TYPE as l } from "../constants.mjs";
 const o = (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
   e.card,
   {
@@ -17,8 +17,8 @@ const o = (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__
     className: a("k-taskboard-card k-cursor-move k-taskboard-card-category", {
       "k-disabled": e.disabled
     }),
-    [n]: i,
-    [l]: e.task.id,
+    [l]: n,
+    [i]: e.task.id,
     tabIndex: e.tabIndex
   },
   /* @__PURE__ */ t.createElement(

package/card/CardBody.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TaskBoardTaskModel } from '../TaskBoard.js';
+import * as React from 'react';
+/**
+ * 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: React.FunctionComponent<TaskBoardCardBodyProps>;

package/card/CardHeader.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { MenuSelectEvent } from '@progress/kendo-react-layout';
+import { PopupHandle } from '@progress/kendo-react-popup';
+import { TaskBoardTaskModel } from '../TaskBoard.js';
+import * as React from 'react';
+/**
+ * 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<PopupHandle | null>;
+    /**
+     * The rendered title.
+     */
+    title: React.ReactNode;
+    /**
+     * The rendered task.
+     */
+    task: TaskBoardTaskModel;
+    /**
+     * Fires when the preview pane needs to be shown.
+     */
+    onShowPreviewPane: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Fires when the menu needs to be shown.
+     */
+    onShowMenu: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when the menu needs to be hidden.
+     */
+    onHideMenu: (event: React.MouseEvent<HTMLButtonElement>) => 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: React.FunctionComponent<TaskBoardCardHeaderProps>;

package/card/CardHeader.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),u=require("@progress/kendo-react-buttons"),c=require("@progress/kendo-react-layout"),s=require("@progress/kendo-react-popup"),i=require("@progress/kendo-svg-icons");function d(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,r.get?r:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const t=d(l),o=e=>{const n=t.useRef(void 0);return t.createElement(c.CardHeader,{className:"k-hbox"},t.createElement("span",{className:"k-card-title k-link",onClick:e.onShowPreviewPane},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-card-header-actions"},t.createElement(u.Button,{className:"k-card-details",fillMode:"flat",themeColor:"base",icon:"more-vertical",svgIcon:i.moreVerticalIcon,ref:n,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),t.createElement(s.Popup,{anchor:n.current&&n.current.element,show:e.showMenu,ref:e.popupRef},t.createElement(c.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};o.displayName="KendoReactTaskBoardCardHeader";exports.TaskBoardCardHeader=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),u=require("@progress/kendo-react-buttons"),r=require("@progress/kendo-react-layout"),s=require("@progress/kendo-react-popup"),i=require("@progress/kendo-svg-icons");function d(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const t=d(l),o=e=>{const n=t.useRef(void 0);return t.createElement(r.CardHeader,{className:"k-hbox"},t.createElement("span",{className:"k-card-title k-link",onClick:e.onShowPreviewPane},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-card-header-actions"},t.createElement(u.Button,{fillMode:"flat",className:"k-card-details",icon:"more-vertical",svgIcon:i.moreVerticalIcon,ref:n,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),t.createElement(s.Popup,{anchor:n.current&&n.current.element,show:e.showMenu,ref:e.popupRef},t.createElement(r.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};o.displayName="KendoReactTaskBoardCardHeader";exports.TaskBoardCardHeader=o;

package/card/CardHeader.mjs

@@ -15,9 +15,8 @@ const l = (e) => {
   return /* @__PURE__ */ t.createElement(r, { className: "k-hbox" }, /* @__PURE__ */ t.createElement("span", { className: "k-card-title k-link", onClick: e.onShowPreviewPane }, e.title), /* @__PURE__ */ t.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: "k-card-header-actions" }, /* @__PURE__ */ t.createElement(
     n,
     {
-      className: "k-card-details",
       fillMode: "flat",
-      themeColor: "base",
+      className: "k-card-details",
       icon: "more-vertical",
       svgIcon: m,
       ref: a,

package/card/PreviewDialog.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TaskBoardPriority } from '../TaskBoard.js';
+import * as React from 'react';
+/**
+ * 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 content of the delete button.
+     */
+    delete: React.ReactNode;
+    /**
+     * Determines the content of the edit button.
+     */
+    edit: React.ReactNode;
+    /**
+     * Represents the priority of the current task.
+     */
+    priority: TaskBoardPriority;
+    /**
+     * Fires when the preview pane needs to be shown.
+     */
+    onClosePreviewPane: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when task is deleted.
+     */
+    onTaskDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when task is edited.
+     */
+    onTaskEdit: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * Represents the TaskBoardPreviewDialog component.
+ */
+export declare const TaskBoardPreviewDialog: React.FunctionComponent<TaskBoardPreviewDialogProps>;

package/card/PreviewDialog.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),r=require("@progress/kendo-react-buttons"),i=require("@progress/kendo-svg-icons");function s(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const t=s(l),c=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-preview-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(r.Button,{icon:"x",svgIcon:i.xIcon,fillMode:"flat",onClick:e.onClosePreviewPane}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("p",null,e.description),t.createElement("p",null,e.priorityLabel," ",t.createElement("span",{style:{backgroundColor:e.priority.color}}," ")," ",e.priority.priority)),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(r.Button,{onClick:e.onTaskDelete},e.delete),t.createElement(r.Button,{themeColor:"primary",onClick:e.onTaskEdit},e.edit)));c.displayName="KendoReactTaskBoardPreviewDialog";exports.TaskBoardPreviewDialog=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),r=require("@progress/kendo-react-buttons"),i=require("@progress/kendo-svg-icons");function s(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const t=s(l),o=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-preview-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(r.Button,{icon:"x",svgIcon:i.xIcon,onClick:e.onClosePreviewPane}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("p",null,e.description),t.createElement("p",null,e.priorityLabel," ",t.createElement("span",{style:{backgroundColor:e.priority.color}}," ")," ",e.priority.priority)),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(r.Button,{onClick:e.onTaskDelete},e.delete),t.createElement(r.Button,{onClick:e.onTaskEdit},e.edit)));o.displayName="KendoReactTaskBoardPreviewDialog";exports.TaskBoardPreviewDialog=o;

package/card/PreviewDialog.mjs

@@ -8,7 +8,7 @@
 import * as e from "react";
 import { Button as t } from "@progress/kendo-react-buttons";
 import { xIcon as n } from "@progress/kendo-svg-icons";
-const r = (a) => /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-pane k-taskboard-preview-pane" }, /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-pane-header" }, /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-pane-header-text" }, a.title), /* @__PURE__ */ e.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-pane-header-actions" }, /* @__PURE__ */ e.createElement(t, { icon: "x", svgIcon: n, fillMode: "flat", onClick: a.onClosePreviewPane }))), /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-pane-content" }, /* @__PURE__ */ e.createElement("p", null, a.description), /* @__PURE__ */ e.createElement("p", null, a.priorityLabel, " ", /* @__PURE__ */ e.createElement("span", { style: { backgroundColor: a.priority.color } }, " "), " ", a.priority.priority)), /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-pane-actions k-actions k-hstack k-justify-content-end" }, /* @__PURE__ */ e.createElement(t, { onClick: a.onTaskDelete }, a.delete), /* @__PURE__ */ e.createElement(t, { themeColor: "primary", onClick: a.onTaskEdit }, a.edit)));
+const r = (a) => /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-pane k-taskboard-preview-pane" }, /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-pane-header" }, /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-pane-header-text" }, a.title), /* @__PURE__ */ e.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-pane-header-actions" }, /* @__PURE__ */ e.createElement(t, { icon: "x", svgIcon: n, onClick: a.onClosePreviewPane }))), /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-pane-content" }, /* @__PURE__ */ e.createElement("p", null, a.description), /* @__PURE__ */ e.createElement("p", null, a.priorityLabel, " ", /* @__PURE__ */ e.createElement("span", { style: { backgroundColor: a.priority.color } }, " "), " ", a.priority.priority)), /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-pane-actions k-actions k-hstack k-justify-content-end" }, /* @__PURE__ */ e.createElement(t, { onClick: a.onTaskDelete }, a.delete), /* @__PURE__ */ e.createElement(t, { onClick: a.onTaskEdit }, a.edit)));
 r.displayName = "KendoReactTaskBoardPreviewDialog";
 export {
   r as TaskBoardPreviewDialog