@progress/kendo-themes-html 14.7.0-dev.13 → 14.7.0-dev.15

package/dist/types/imageeditor/constants.d.ts

@@ -1,2 +1,11 @@
 export declare const IMAGEEDITOR_MODULE_NAME = "image-editor";
 export declare const IMAGEEDITOR_FOLDER_NAME = "imageeditor";
+export declare const IMAGEEDITOR_CANVAS_SIZE: {
+    width: number;
+    height: number;
+};
+export declare const IMAGEEDITOR_ADAPTIVE_CANVAS_SIZE: {
+    width: number;
+    height: number;
+};
+export declare const IMAGEEDITOR_TEST_IMAGE_SRC = "/packages/html/assets/sofia.jpg";

package/dist/types/imageeditor/imageeditor-canvas.spec.d.ts

@@ -0,0 +1,15 @@
+export type ImageEditorCanvasProps = React.CanvasHTMLAttributes<HTMLCanvasElement> & {
+    imageSrc?: string;
+    /** Uses the smaller mobile canvas size. */
+    adaptive?: boolean;
+};
+/**
+ * @aria {role="img"} Indicates the canvas role as an image.
+ * @aria {aria-label|aria-labelledby} Provides an accessible name for the canvas by describing the image content.
+ */
+export declare const ImageEditorCanvas: {
+    (props: ImageEditorCanvasProps): import("react/jsx-runtime").JSX.Element;
+    moduleName: null;
+    folderName: null;
+};
+export default ImageEditorCanvas;

package/dist/types/imageeditor/imageeditor-option-list.d.ts

@@ -10,6 +10,7 @@ export declare const ImageEditorOptionList: {
     folderName: null;
     defaultOptions: {
         scrollable: boolean;
+        scrollingPosition: "start";
     };
 };
 export default ImageEditorOptionList;

package/dist/types/imageeditor/imageeditor-pane.d.ts

@@ -5,6 +5,8 @@ export type KendoImageEditorPaneProps = {
     actions?: React.JSX.Element | React.JSX.Element[];
     /** Renders the mobile bottom-sheet header (Close/Title/Confirm) and omits the `actions` footer. */
     adaptive?: boolean;
+    /** Disables the adaptive Confirm button (nothing to apply yet). */
+    confirmDisabled?: boolean;
 };
 export type KendoImageEditorPaneState = {
     [K in (typeof states)[number]]?: boolean;

package/dist/types/imageeditor/imageeditor-preview-thumbnail.d.ts

@@ -1,4 +1,5 @@
 export type ImageEditorPreviewThumbnailProps = {
+    imageSrc?: string;
     label?: string;
     style?: React.CSSProperties;
     children?: React.ReactNode;

package/dist/types/imageeditor/imageeditor-sidebar.d.ts

@@ -1,6 +1,14 @@
 export declare const IMAGEEDITORSIDEBAR_CLASSNAME = "k-imageeditor-sidebar";
+export type ImageEditorSidebarTool = 'Resize' | 'Crop' | 'Rotate' | 'Text' | 'Shapes' | 'Blur' | 'Adjustments' | 'Filters' | 'Frame' | 'Shadow';
 export type KendoImageEditorSidebarProps = {
+    /** Replaces the default tool buttons. */
     sidebarItems?: React.JSX.Element | React.JSX.Element[];
+    /** The tool whose pane is open; its button is pressed. */
+    activeTool?: ImageEditorSidebarTool;
+    /** Disables the tool buttons (no image loaded). */
+    disabled?: boolean;
+    /** Lays the rail out horizontally, so separators are vertical. */
+    adaptive?: boolean;
     scrollable?: boolean;
     scrollingPosition?: 'start' | 'end' | 'both';
 };

package/dist/types/imageeditor/imageeditor-toolbar.d.ts

@@ -2,15 +2,16 @@ import { KendoToolbarProps } from '../toolbar';
 export declare const IMAGEEDITORTOOLBAR_CLASSNAME = "k-imageeditor-toolbar";
 export type KendoImageEditorToolbarProps = {
     toolbarItems?: React.JSX.Element | React.JSX.Element[];
+    /** Omits the zoom-level combobox. */
+    adaptive?: boolean;
+    /** Disables the image-dependent actions (no image loaded). */
+    disabled?: boolean;
 };
-export declare const imageEditorToolbarItems: import("react/jsx-runtime").JSX.Element[];
 export declare const ImageEditorToolbar: {
     (props: KendoToolbarProps & KendoImageEditorToolbarProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     states: any[];
     options: {};
     className: string;
-    defaultOptions: {
-        toolbarItems: import("react/jsx-runtime").JSX.Element[];
-    };
+    defaultOptions: {};
 };
 export default ImageEditorToolbar;

package/dist/types/imageeditor/imageeditor.spec.d.ts

@@ -1,9 +1,13 @@
+import { ImageEditorSidebarTool } from './imageeditor-sidebar';
 import { KendoComponent } from '../_types/component';
 export declare const IMAGEEDITOR_CLASSNAME = "k-imageeditor";
 export type KendoImageEditorProps = {
     toolbarItems?: React.JSX.Element | React.JSX.Element[];
     actionPane?: React.JSX.Element | React.JSX.Element[];
     sidebarItems?: React.JSX.Element | React.JSX.Element[];
+    /** The tool whose pane is open; its sidebar button is pressed. */
+    activeTool?: ImageEditorSidebarTool;
+    /** Shown instead of the canvas while no image is loaded; the toolbar actions and sidebar tools are disabled. */
     placeholder?: React.JSX.Element;
     contentHeight?: string;
     exporting?: boolean;
@@ -13,8 +17,8 @@ export type KendoImageEditorProps = {
     sidebarScrollingPosition?: 'start' | 'end' | 'both';
 };
 /**
- * @aria {role="img"} Indicates the canvas role as an image. Applicable when an image is loaded.
- * @aria {aria-label|aria-labelledby} Provides an accessible name for the canvas by describing the image content. Applicable when an image is loaded.
+ * @aria {role="application"} Indicates that the ImageEditor has its own keyboard navigation implemented.
+ * @aria {aria-label} Provides an accessible name for the application.
  * @aria {role="status"} Announces the busy overlay shown while `exporting` is true.
  * @ux {Canvas} Renders the image on an editable canvas.
  * @ux {Crop} A crop tool lets the user select and apply a cropping region.
@@ -25,7 +29,7 @@ export type KendoImageEditorProps = {
  */
 export declare const ImageEditor: KendoComponent<KendoImageEditorProps & React.HTMLAttributes<HTMLDivElement>>;
 /**
- * @keyboard {Alt/Opt(Mac) + Number} Focuses the component.
+ * @keyboard {Alt/Opt(Mac) + W} Focuses the first focusable element in the Image Editor Toolbar.
  * @keyboard {Tab} Focuses the next focusable item.
  * @keyboard {Shift + Tab} Focuses the previous focusable item.
  * @keyboard {Enter} Presses the focused button.

package/dist/types/imageeditor/index.d.ts

@@ -6,13 +6,13 @@ export * from './imageeditor-pane';
 export * from './imageeditor-option-preview';
 export * from './imageeditor-option-list';
 export * from './imageeditor-preview-thumbnail';
+export * from './imageeditor-canvas.spec';
 export * from './imageeditor-resize-handles';
 export * from './imageeditor-rotate-handle';
 export * from './templates/imageeditor-normal';
 export * from './templates/imageeditor-resize';
 export * from './templates/imageeditor-rotate';
 export * from './templates/imageeditor-crop';
-export * from './templates/imageeditor-disabled';
 export * from './templates/imageeditor-insert-text';
 export * from './templates/imageeditor-insert-shape';
 export * from './templates/imageeditor-insert-line';
@@ -22,3 +22,15 @@ export * from './templates/imageeditor-filters';
 export * from './templates/imageeditor-adjustments';
 export * from './templates/imageeditor-frames';
 export * from './templates/imageeditor-shadow';
+export * from './templates/imageeditor-resize-adaptive';
+export * from './templates/imageeditor-crop-adaptive';
+export * from './templates/imageeditor-rotate-adaptive';
+export * from './templates/imageeditor-insert-text-adaptive';
+export * from './templates/imageeditor-insert-shape-adaptive';
+export * from './templates/imageeditor-insert-line-adaptive';
+export * from './templates/imageeditor-blur-adaptive';
+export * from './templates/imageeditor-pixelate-adaptive';
+export * from './templates/imageeditor-adjustments-adaptive';
+export * from './templates/imageeditor-filters-adaptive';
+export * from './templates/imageeditor-frames-adaptive';
+export * from './templates/imageeditor-shadow-adaptive';

package/dist/types/imageeditor/templates/imageeditor-adjustments-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorAdjustmentsAdaptive: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-adjustments.d.ts

@@ -1 +1 @@
-export declare const ImageEditorAdjustments: ({ brightness, contrast, saturation, hue, exposure, blur, opacity, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageEditorAdjustments: ({ brightness, contrast, saturation, hue, exposure, blur, opacity, isPristine, adaptive, imageSrc, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-blur-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorBlurAdaptive: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-blur.d.ts

@@ -1 +1 @@
-export declare const ImageEditorBlur: ({ selected, shape, intensity, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageEditorBlur: ({ selected, shape, intensity, adaptive, imageSrc, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-crop-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorCropAdaptive: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-crop.d.ts

@@ -1 +1 @@
-export declare const ImageEditorCrop: ({ cropWidth, cropHeight, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageEditorCrop: ({ cropWidth, cropHeight, isPristine, adaptive, canvas, imageSrc, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-filters-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorFiltersAdaptive: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-filters.d.ts

@@ -1,6 +1 @@
-export declare const filterPresets: {
-    [key: string]: {
-        label: string;
-    };
-};
-export declare const ImageEditorFilters: ({ preset, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageEditorFilters: ({ preset, adaptive, imageSrc, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-frames-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorFramesAdaptive: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-frames.d.ts

@@ -1 +1 @@
-export declare const ImageEditorFrames: ({ style, imageRoundness, framesAmount, frameThickness, frameRoundness, offset, strokeColor, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageEditorFrames: ({ style, imageRoundness, isPristine, framesAmount, frameThickness, frameRoundness, offset, strokeColor, adaptive, canvas, imageSrc, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-insert-line-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorInsertLineAdaptive: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-insert-line.d.ts

@@ -1,2 +1,2 @@
-export declare const ImageEditorInsertLine: ({ selected, strokeColor, strokeWidth, strokeType, startPoint, endPoint, opacity, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageEditorInsertLine: ({ selected, strokeColor, strokeWidth, strokeType, startPoint, endPoint, opacity, adaptive, imageSrc, ...props }: any) => import("react/jsx-runtime").JSX.Element;
 export default ImageEditorInsertLine;

package/dist/types/imageeditor/templates/imageeditor-insert-shape-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorInsertShapeAdaptive: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-insert-shape.d.ts

@@ -1,2 +1,2 @@
-export declare const ImageEditorInsertShape: ({ selected, shapeType, strokeColor, strokeWidth, fillColor, textColor, fontFamily, fontSize, alignment, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageEditorInsertShape: ({ selected, shapeType, strokeColor, strokeWidth, fillColor, textColor, fontFamily, fontSize, alignment, adaptive, imageSrc, ...props }: any) => import("react/jsx-runtime").JSX.Element;
 export default ImageEditorInsertShape;

package/dist/types/imageeditor/templates/imageeditor-insert-text-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorInsertTextAdaptive: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-insert-text.d.ts

@@ -1,2 +1,2 @@
-export declare const ImageEditorInsertText: ({ selected, fontFamily, fontSize, alignment, fillColor, opacity, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageEditorInsertText: ({ selected, fontFamily, fontSize, alignment, fillColor, opacity, adaptive, imageSrc, ...props }: any) => import("react/jsx-runtime").JSX.Element;
 export default ImageEditorInsertText;

package/dist/types/imageeditor/templates/imageeditor-pixelate-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorPixelateAdaptive: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-pixelate.d.ts

@@ -1 +1 @@
-export declare const ImageEditorPixelate: ({ selected, shape, intensity, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageEditorPixelate: ({ selected, shape, intensity, adaptive, imageSrc, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-resize-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorResizeAdaptive: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-resize.d.ts

@@ -1 +1 @@
-export declare const ImageEditorResize: ({ scaleUnit, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageEditorResize: ({ scaleUnit, modified, adaptive, imageSrc, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-rotate-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorRotateAdaptive: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-rotate.d.ts

@@ -1 +1 @@
-export declare const ImageEditorRotate: ({ rotation, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageEditorRotate: ({ rotation, adaptive, imageSrc, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-shadow-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorShadowAdaptive: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-shadow.d.ts

@@ -1 +1 @@
-export declare const ImageEditorShadow: ({ positionX, positionY, blur, spread, color, opacity, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageEditorShadow: ({ positionX, positionY, blur, spread, color, opacity, isPristine, adaptive, imageSrc, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "14.7.0-dev.13",
+  "version": "14.7.0-dev.15",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [

package/src/imageeditor/constants.ts

@@ -1,2 +1,6 @@
 export const IMAGEEDITOR_MODULE_NAME = 'image-editor';
 export const IMAGEEDITOR_FOLDER_NAME = 'imageeditor';
+export const IMAGEEDITOR_CANVAS_SIZE = { width: 494, height: 307 };
+export const IMAGEEDITOR_ADAPTIVE_CANVAS_SIZE = { width: 326, height: 203 };
+// Image used by the visual tests; components render no image unless `imageSrc` is passed.
+export const IMAGEEDITOR_TEST_IMAGE_SRC = '/packages/html/assets/sofia.jpg';

package/src/imageeditor/imageeditor-canvas.spec.tsx

@@ -0,0 +1,30 @@
+import { IMAGEEDITOR_ADAPTIVE_CANVAS_SIZE, IMAGEEDITOR_CANVAS_SIZE } from './constants';
+
+export type ImageEditorCanvasProps = React.CanvasHTMLAttributes<HTMLCanvasElement> & {
+    imageSrc?: string;
+    /** Uses the smaller mobile canvas size. */
+    adaptive?: boolean;
+};
+
+/**
+ * @aria {role="img"} Indicates the canvas role as an image.
+ * @aria {aria-label|aria-labelledby} Provides an accessible name for the canvas by describing the image content.
+ */
+export const ImageEditorCanvas = (props: ImageEditorCanvasProps) => {
+    const { imageSrc, adaptive, style, ...other } = props;
+
+    return (
+        <canvas
+            role="img"
+            aria-label="Image being edited"
+            {...(adaptive ? IMAGEEDITOR_ADAPTIVE_CANVAS_SIZE : IMAGEEDITOR_CANVAS_SIZE)}
+            {...other}
+            style={{ ...(imageSrc && { backgroundImage: `url('${imageSrc}')` }), backgroundSize: "cover", ...style }}
+        ></canvas>
+    );
+};
+
+ImageEditorCanvas.moduleName = null;
+ImageEditorCanvas.folderName = null;
+
+export default ImageEditorCanvas;

package/src/imageeditor/imageeditor-option-list.tsx

@@ -9,6 +9,7 @@ export type KendoImageEditorOptionListProps = {
 
 const defaultOptions = {
     scrollable: false,
+    scrollingPosition: 'start' as const,
 };
 
 export const ImageEditorOptionList = (
@@ -16,7 +17,7 @@ export const ImageEditorOptionList = (
 ) => {
     const {
         scrollable = defaultOptions.scrollable,
-        scrollingPosition,
+        scrollingPosition = defaultOptions.scrollingPosition,
         children,
         ...other
     } = props;

package/src/imageeditor/imageeditor-pane.tsx

@@ -13,6 +13,8 @@ export type KendoImageEditorPaneProps = {
     actions?: React.JSX.Element | React.JSX.Element[];
     /** Renders the mobile bottom-sheet header (Close/Title/Confirm) and omits the `actions` footer. */
     adaptive?: boolean;
+    /** Disables the adaptive Confirm button (nothing to apply yet). */
+    confirmDisabled?: boolean;
 };
 
 const defaultOptions = {};
@@ -26,6 +28,7 @@ export const ImageEditorPane = (
         title,
         actions,
         adaptive,
+        confirmDisabled,
         children,
         ...other
     } = props;
@@ -42,7 +45,7 @@ export const ImageEditorPane = (
                 {adaptive && <Button fillMode="flat" icon="x" aria-label="Close" title="Close"></Button>}
                 <div className="k-imageeditor-pane-title">{title}</div>
                 {adaptive
-                    ? <Button fillMode="flat" icon="check" aria-label="Confirm" title="Confirm"></Button>
+                    ? <Button fillMode="flat" icon="check" disabled={confirmDisabled} aria-label="Confirm" title="Confirm"></Button>
                     : <Button fillMode="flat" icon="x" aria-label="Close" title="Close"></Button>
                 }
             </div>

package/src/imageeditor/imageeditor-preview-thumbnail.tsx

@@ -1,4 +1,5 @@
 export type ImageEditorPreviewThumbnailProps = {
+    imageSrc?: string;
     label?: string;
     style?: React.CSSProperties;
     children?: React.ReactNode;
@@ -9,7 +10,7 @@ const defaultOptions = {};
 // Generic thumbnail + caption pair used inside preview cards (aspect ratio, filters, frame style, ...);
 // not tied to any particular preview card component so it can be reused wherever a small image preview is needed.
 export const ImageEditorPreviewThumbnail = (props: ImageEditorPreviewThumbnailProps) => {
-    const { label, style, children } = props;
+    const { label, style, children, imageSrc } = props;
 
     return (
         <>
@@ -21,7 +22,7 @@ export const ImageEditorPreviewThumbnail = (props: ImageEditorPreviewThumbnailPr
                     width: "100%",
                     height: "40px",
                     borderRadius: "2px",
-                    backgroundImage: "url('/packages/html/assets/sofia.jpg')",
+                    backgroundImage: imageSrc ? `url('${imageSrc}')` : undefined,
                     backgroundSize: "cover",
                     boxSizing: "border-box",
                     ...style

package/src/imageeditor/imageeditor-sidebar.tsx

@@ -3,30 +3,22 @@ import { Button } from '../button/button.spec';
 
 export const IMAGEEDITORSIDEBAR_CLASSNAME = `k-imageeditor-sidebar`;
 
+export type ImageEditorSidebarTool = 'Resize' | 'Crop' | 'Rotate' | 'Text' | 'Shapes' | 'Blur' | 'Adjustments' | 'Filters' | 'Frame' | 'Shadow';
+
 export type KendoImageEditorSidebarProps = {
+    /** Replaces the default tool buttons. */
     sidebarItems?: React.JSX.Element | React.JSX.Element[];
+    /** The tool whose pane is open; its button is pressed. */
+    activeTool?: ImageEditorSidebarTool;
+    /** Disables the tool buttons (no image loaded). */
+    disabled?: boolean;
+    /** Lays the rail out horizontally, so separators are vertical. */
+    adaptive?: boolean;
     scrollable?: boolean;
     scrollingPosition?: 'start' | 'end' | 'both';
 };
 
-const defaultSidebarItems = [
-    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize" />,
-    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop" />,
-    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate" />,
-    <div className="k-separator" key="sidebar-separator-1" />,
-    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text" />,
-    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes" />,
-    <div className="k-separator" key="sidebar-separator-2" />,
-    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur" />,
-    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments" />,
-    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters" />,
-    <div className="k-separator" key="sidebar-separator-3" />,
-    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame" />,
-    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow" />
-];
-
 const defaultOptions = {
-    sidebarItems: defaultSidebarItems,
     scrollable: false,
 };
 
@@ -39,12 +31,17 @@ export const ImageEditorSidebar = (
         React.HTMLAttributes<HTMLDivElement>
 ) => {
     const {
-        sidebarItems = defaultOptions.sidebarItems,
+        sidebarItems,
+        activeTool,
+        disabled,
+        adaptive,
         scrollable = defaultOptions.scrollable,
         scrollingPosition,
         ...other
     } = props;
 
+    const separatorClassName = adaptive ? 'k-separator k-separator-vertical' : 'k-separator';
+
     return (
         <div
             {...other}
@@ -58,7 +55,23 @@ export const ImageEditorSidebar = (
             )}
         >
             <div className="k-imageeditor-sidebar-items" role="toolbar" aria-label="Tools">
-                {sidebarItems ?? props.children}
+                {sidebarItems ?? (
+                    <>
+                        <Button fillMode="flat" togglable icon="image-resize" aria-label="Resize" selected={activeTool === 'Resize'} disabled={disabled}></Button>
+                        <Button fillMode="flat" togglable icon="crop" aria-label="Crop" selected={activeTool === 'Crop'} disabled={disabled}></Button>
+                        <Button fillMode="flat" togglable icon="rotate" aria-label="Rotate" selected={activeTool === 'Rotate'} disabled={disabled}></Button>
+                        <div className={separatorClassName}></div>
+                        <Button fillMode="flat" togglable icon="free-text" aria-label="Text" selected={activeTool === 'Text'} disabled={disabled}></Button>
+                        <Button fillMode="flat" togglable icon="shapes" aria-label="Shapes" selected={activeTool === 'Shapes'} disabled={disabled}></Button>
+                        <div className={separatorClassName}></div>
+                        <Button fillMode="flat" togglable icon="drop-half-pixelated" aria-label="Blur" selected={activeTool === 'Blur'} disabled={disabled}></Button>
+                        <Button fillMode="flat" togglable icon="sliders-horizontal" aria-label="Adjustments" selected={activeTool === 'Adjustments'} disabled={disabled}></Button>
+                        <Button fillMode="flat" togglable icon="circles-three-intersecting" aria-label="Filters" selected={activeTool === 'Filters'} disabled={disabled}></Button>
+                        <div className={separatorClassName}></div>
+                        <Button fillMode="flat" togglable icon="frame-corners" aria-label="Frame" selected={activeTool === 'Frame'} disabled={disabled}></Button>
+                        <Button fillMode="flat" togglable icon="circle-half-tilted" aria-label="Shadow" selected={activeTool === 'Shadow'} disabled={disabled}></Button>
+                    </>
+                )}
             </div>
         </div>
     );

package/src/imageeditor/imageeditor-toolbar.tsx

@@ -11,27 +11,13 @@ const options = {};
 
 export type KendoImageEditorToolbarProps = {
     toolbarItems?: React.JSX.Element | React.JSX.Element[];
+    /** Omits the zoom-level combobox. */
+    adaptive?: boolean;
+    /** Disables the image-dependent actions (no image loaded). */
+    disabled?: boolean;
 };
 
-// Shared toolbar preset for tool templates that have an active image/history (undo, redo and zoom enabled)
-export const imageEditorToolbarItems = [
-    <Button fillMode="flat" key="toolbar-button-1" icon="image-add" aria-label="Image Add"></Button>,
-    <ToolbarSeparator key="toolbar-separator-1"></ToolbarSeparator>,
-    <Button fillMode="flat" key="toolbar-button-2" icon="undo" aria-label="Undo"></Button>,
-    <Button fillMode="flat" key="toolbar-button-3" icon="redo" aria-label="Redo"></Button>,
-    <ToolbarSeparator key="toolbar-separator-2"></ToolbarSeparator>,
-    <Button fillMode="flat" key="toolbar-button-4" icon="download" aria-label="Download"></Button>,
-    <div className="k-spacer" key="toolbar-spacer"></div>,
-     <Button fillMode="flat" key="toolbar-button-5" icon="zoom-in" aria-label="Zoom In"></Button>,
-    <ToolbarItem key="toolbar-item-1">
-        <Autocomplete fillMode="flat" value="Fit" showClearButton={false} aria-label="Zoom options" />
-    </ToolbarItem>,
-     <Button fillMode="flat" key="toolbar-button-6" icon="zoom-out" aria-label="Zoom Out"></Button>
-];
-
-const defaultOptions = {
-    toolbarItems: imageEditorToolbarItems
-};
+const defaultOptions = {};
 
 export const ImageEditorToolbar = (
     props: KendoToolbarProps &
@@ -39,7 +25,9 @@ export const ImageEditorToolbar = (
         React.HTMLAttributes<HTMLDivElement>
 ) => {
     const {
-        toolbarItems = defaultOptions.toolbarItems,
+        toolbarItems,
+        adaptive,
+        disabled,
         ...other
     } = props;
 
@@ -52,7 +40,25 @@ export const ImageEditorToolbar = (
             )}
             fillMode="flat"
         >
-            {toolbarItems}
+            {toolbarItems ?? (
+                // A freshly-loaded image has no edit history, so undo and redo are always disabled
+                <>
+                    <Button fillMode="flat" icon="image-add" aria-label="Image Add"></Button>
+                    <ToolbarSeparator></ToolbarSeparator>
+                    <Button fillMode="flat" disabled icon="undo" aria-label="Undo"></Button>
+                    <Button fillMode="flat" disabled icon="redo" aria-label="Redo"></Button>
+                    <ToolbarSeparator></ToolbarSeparator>
+                    <Button fillMode="flat" disabled={disabled} icon="download" aria-label="Download"></Button>
+                    <div className="k-spacer"></div>
+                    <Button fillMode="flat" disabled={disabled} icon="zoom-in" aria-label="Zoom In"></Button>
+                    {!adaptive &&
+                    <ToolbarItem>
+                        <Autocomplete fillMode="flat" disabled={disabled} value="Fit" showClearButton={false} aria-label="Zoom options" />
+                    </ToolbarItem>
+                    }
+                    <Button fillMode="flat" disabled={disabled} icon="zoom-out" aria-label="Zoom Out"></Button>
+                </>
+            )}
         </Toolbar>
     );
 };

package/src/imageeditor/imageeditor.spec.tsx

@@ -1,6 +1,6 @@
 import { classNames } from '../misc';
 import { ImageEditorToolbar } from './imageeditor-toolbar';
-import { ImageEditorSidebar } from './imageeditor-sidebar';
+import { ImageEditorSidebar, ImageEditorSidebarTool } from './imageeditor-sidebar';
 import { Overlay } from '../overlay';
 import { Loader } from '../loader';
 
@@ -16,6 +16,9 @@ export type KendoImageEditorProps = {
     toolbarItems?: React.JSX.Element | React.JSX.Element[];
     actionPane?: React.JSX.Element | React.JSX.Element[];
     sidebarItems?: React.JSX.Element | React.JSX.Element[];
+    /** The tool whose pane is open; its sidebar button is pressed. */
+    activeTool?: ImageEditorSidebarTool;
+    /** Shown instead of the canvas while no image is loaded; the toolbar actions and sidebar tools are disabled. */
     placeholder?: React.JSX.Element;
     contentHeight?: string;
     exporting?: boolean;
@@ -28,8 +31,8 @@ export type KendoImageEditorProps = {
 const defaultOptions = {};
 
 /**
- * @aria {role="img"} Indicates the canvas role as an image. Applicable when an image is loaded.
- * @aria {aria-label|aria-labelledby} Provides an accessible name for the canvas by describing the image content. Applicable when an image is loaded.
+ * @aria {role="application"} Indicates that the ImageEditor has its own keyboard navigation implemented.
+ * @aria {aria-label} Provides an accessible name for the application.
  * @aria {role="status"} Announces the busy overlay shown while `exporting` is true.
  * @ux {Canvas} Renders the image on an editable canvas.
  * @ux {Crop} A crop tool lets the user select and apply a cropping region.
@@ -46,6 +49,7 @@ export const ImageEditor: KendoComponent<KendoImageEditorProps & React.HTMLAttri
         toolbarItems,
         actionPane,
         sidebarItems,
+        activeTool,
         placeholder,
         contentHeight,
         exporting,
@@ -56,6 +60,8 @@ export const ImageEditor: KendoComponent<KendoImageEditorProps & React.HTMLAttri
         ...other
     } = props;
 
+    const noImage = Boolean(placeholder);
+
     const canvasContainer = (
         <div className="k-imageeditor-canvas-container">
             {placeholder ?? (
@@ -69,10 +75,12 @@ export const ImageEditor: KendoComponent<KendoImageEditorProps & React.HTMLAttri
     const pane = actionPane &&
         <div className="k-imageeditor-action-pane">{actionPane}</div>;
 
-    const sidebar = <ImageEditorSidebar sidebarItems={sidebarItems} scrollable={sidebarScrollable} scrollingPosition={sidebarScrollingPosition} />;
+    const sidebar = <ImageEditorSidebar sidebarItems={sidebarItems} activeTool={activeTool} disabled={noImage} adaptive={adaptive} scrollable={sidebarScrollable} scrollingPosition={sidebarScrollingPosition} />;
 
     return (
         <div
+            role="application"
+            aria-label="Image Editor"
             {...other}
             className={classNames(
                 props.className,
@@ -80,7 +88,7 @@ export const ImageEditor: KendoComponent<KendoImageEditorProps & React.HTMLAttri
                 { [`${IMAGEEDITOR_CLASSNAME}-adaptive`]: adaptive }
             )}>
             <div className="k-imageeditor-header">
-                <ImageEditorToolbar toolbarItems={toolbarItems} />
+                <ImageEditorToolbar toolbarItems={toolbarItems} adaptive={adaptive} disabled={noImage} />
             </div>
 
             <div className="k-imageeditor-content" style={{ height: contentHeight }}>
@@ -111,7 +119,7 @@ ImageEditor.moduleName = IMAGEEDITOR_MODULE_NAME;
 ImageEditor.folderName = IMAGEEDITOR_FOLDER_NAME;
 
 /**
- * @keyboard {Alt/Opt(Mac) + Number} Focuses the component.
+ * @keyboard {Alt/Opt(Mac) + W} Focuses the first focusable element in the Image Editor Toolbar.
  * @keyboard {Tab} Focuses the next focusable item.
  * @keyboard {Shift + Tab} Focuses the previous focusable item.
  * @keyboard {Enter} Presses the focused button.