@cratis/components 4.23.1 → 4.25.0

package/dist/esm/Toolbar/ToolbarDrawerPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDrawerPlacement.js","sources":["../../../Toolbar/ToolbarDrawerPlacement.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/** Edges of an element, in viewport coordinates. */\nexport interface ToolbarDrawerRectangle {\n    left: number;\n    top: number;\n    right: number;\n    bottom: number;\n}\n\n/** Inputs for {@link resolveToolbarDrawerPlacement}. */\nexport interface ToolbarDrawerPlacementRequest {\n    /** The folder trigger the drawer is anchored to. */\n    trigger: ToolbarDrawerRectangle;\n    /** Natural (unconstrained) size of the drawer. */\n    panel: { width: number; height: number };\n    /** Size of the viewport the drawer has to stay inside. */\n    viewport: { width: number; height: number };\n    /** Orientation of the owning toolbar. */\n    orientation: 'vertical' | 'horizontal';\n    /** Preferred side for a vertical toolbar. A horizontal toolbar prefers `'bottom'`. */\n    preferredHorizontalSide: 'right' | 'left';\n    /** Space kept between the drawer and the trigger. */\n    gap: number;\n    /** Space kept between the drawer and the viewport edge. */\n    margin: number;\n}\n\n/** Where a drawer ends up relative to its trigger. */\nexport interface ToolbarDrawerPlacement {\n    /** The side of the trigger the drawer opens towards. */\n    side: 'right' | 'left' | 'top' | 'bottom';\n    /** Offset along the cross axis that keeps the drawer inside the viewport. */\n    shift: number;\n    /**\n     * Offset along the opening axis, towards the trigger. Non-zero only when the drawer fits on\n     * neither side, so it overlaps the toolbar rather than leaving the viewport.\n     */\n    mainShift: number;\n    /** Largest height the drawer may take before it scrolls. */\n    maxHeight: number;\n    /** Largest width the drawer may take. */\n    maxWidth: number;\n}\n\nconst clampShift = (start: number, size: number, limit: number, margin: number): number => {\n    const minimumStart = margin;\n    const maximumStart = Math.max(minimumStart, limit - margin - size);\n    const clamped = Math.min(Math.max(start, minimumStart), maximumStart);\n    return clamped - start;\n};\n\n/**\n * Decides which side of its trigger a drawer opens towards and how far it has to move along the\n * cross axis to stay inside the viewport.\n *\n * A drawer first tries its preferred side, flips to the opposite side when it does not fit there\n * and the opposite side offers more room, and finally slides along the cross axis. When it fits on\n * neither side it moves back over the toolbar instead of leaving the viewport. When the drawer is\n * larger than the viewport allows, `maxHeight` and `maxWidth` bound it so its content scrolls.\n */\nexport const resolveToolbarDrawerPlacement = (request: ToolbarDrawerPlacementRequest): ToolbarDrawerPlacement => {\n    const { trigger, panel, viewport, orientation, preferredHorizontalSide, gap, margin } = request;\n    const maxHeight = Math.max(0, viewport.height - margin * 2);\n    const maxWidth = Math.max(0, viewport.width - margin * 2);\n    const panelWidth = Math.min(panel.width, maxWidth);\n    const panelHeight = Math.min(panel.height, maxHeight);\n\n    if (orientation === 'horizontal') {\n        const roomBelow = viewport.height - margin - trigger.bottom - gap;\n        const roomAbove = trigger.top - margin - gap;\n        const fitsBelow = roomBelow >= panelHeight;\n        const fitsAbove = roomAbove >= panelHeight;\n        const side = fitsBelow || (!fitsAbove && roomBelow >= roomAbove) ? 'bottom' : 'top';\n        const centered = (trigger.left + trigger.right) / 2 - panelWidth / 2;\n        const overflow = Math.max(0, panelHeight - (side === 'bottom' ? roomBelow : roomAbove));\n        return {\n            side,\n            shift: clampShift(centered, panelWidth, viewport.width, margin),\n            mainShift: side === 'bottom' ? -overflow : overflow,\n            maxHeight,\n            maxWidth,\n        };\n    }\n\n    const roomRight = viewport.width - margin - trigger.right - gap;\n    const roomLeft = trigger.left - margin - gap;\n    const preferredRoom = preferredHorizontalSide === 'right' ? roomRight : roomLeft;\n    const oppositeRoom = preferredHorizontalSide === 'right' ? roomLeft : roomRight;\n    const fitsPreferred = preferredRoom >= panelWidth;\n    const fitsOpposite = oppositeRoom >= panelWidth;\n    const flip = !fitsPreferred && (fitsOpposite || oppositeRoom > preferredRoom);\n    const side = flip\n        ? (preferredHorizontalSide === 'right' ? 'left' : 'right')\n        : preferredHorizontalSide;\n    const centered = (trigger.top + trigger.bottom) / 2 - panelHeight / 2;\n    const overflow = Math.max(0, panelWidth - (side === 'right' ? roomRight : roomLeft));\n    return {\n        side,\n        shift: clampShift(centered, panelHeight, viewport.height, margin),\n        mainShift: side === 'right' ? -overflow : overflow,\n        maxHeight,\n        maxWidth,\n    };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Toolbar/ToolbarDrawerTile.d.ts

@@ -0,0 +1,43 @@
+import { type ButtonHTMLAttributes, type DragEvent, type HTMLAttributes } from 'react';
+import type { Icon } from '../Common/Icon.js';
+/** Props for the internal labeled tile rendered inside a drawer {@link ToolbarFolder}. */
+export interface ToolbarDrawerTileProps {
+    /** Always-visible label and accessible name. */
+    title: string;
+    /** Icon shown above the label. */
+    icon?: Icon;
+    /** Whether the tile is the active/selected one. */
+    active?: boolean;
+    /** Whether the tile is unavailable. */
+    disabled?: boolean;
+    /** Explanation of why the tile is unavailable. */
+    disabledReason?: string;
+    /** Whether the tile can be dragged. */
+    draggable: boolean;
+    /** Data delivered to drag callbacks and serialized onto the `DataTransfer`. */
+    data?: unknown;
+    /** Catalogue identity exposed as `data-item-id` so styling and tests can address one tile. */
+    itemId?: string;
+    /** Called when the tile is activated by pointer, Enter or Space. */
+    onClick?: () => void;
+    /** Called when a drag starts on the tile. */
+    onDragStart?: (data: unknown, event: DragEvent<HTMLButtonElement>) => void;
+    /** Called when a drag that started on the tile ends, whether dropped or cancelled. */
+    onDragEnd?: (data: unknown, event: DragEvent<HTMLButtonElement>) => void;
+    /** Extra class name for the native button. */
+    className?: string;
+    /** Attributes for the native button. */
+    root?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Attributes for the icon wrapper. */
+    iconPart?: HTMLAttributes<HTMLSpanElement>;
+    /** Attributes for the label. */
+    label?: HTMLAttributes<HTMLSpanElement>;
+}
+/**
+ * A labeled drawer tile: a prominent icon with an always-visible title.
+ *
+ * A disabled tile stays focusable and reports `aria-disabled` so assistive technology can still
+ * read why it is unavailable; it neither activates nor drags.
+ */
+export declare const ToolbarDrawerTile: ({ title, icon, active, disabled, disabledReason, draggable, data, itemId, onClick, onDragStart, onDragEnd, className, root, iconPart, label, }: ToolbarDrawerTileProps) => import("react").JSX.Element;
+//# sourceMappingURL=ToolbarDrawerTile.d.ts.map

package/dist/esm/Toolbar/ToolbarDrawerTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDrawerTile.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarDrawerTile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE9F,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAgB,CAAC;AAK3C,0FAA0F;AAC1F,MAAM,WAAW,sBAAsB;IACnC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8FAA8F;IAC9F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3E,sFAAsF;IACtF,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,IAAI,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,uCAAuC;IACvC,QAAQ,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC3C,gCAAgC;IAChC,KAAK,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;CAC3C;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,mJAgB3B,sBAAsB,gCAkExB,CAAC"}

package/dist/esm/Toolbar/ToolbarDrawerTile.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { IconDisplay } from '../Common/Icon.js';
+import { useRovingTool } from '../Common/ToolbarRovingContext.js';
+import { useToolbarDragContext } from './ToolbarDragContext.js';
+import { useToolbarDrawer } from './ToolbarDrawerContext.js';
+
+const ToolbarDrawerTile = ({ title, icon, active, disabled, disabledReason, draggable, data, itemId, onClick, onDragStart, onDragEnd, className, root, iconPart, label, }) => {
+    const dragContext = useToolbarDragContext();
+    const drawer = useToolbarDrawer();
+    const rovingTool = useRovingTool(root?.tabIndex, root?.onFocus);
+    const reasonId = useId();
+    const isDraggable = draggable && !disabled;
+    const hasReason = disabled === true && typeof disabledReason === 'string' && disabledReason.length > 0;
+    const resolvedIcon = icon !== undefined && icon !== null && (typeof icon !== 'string' || icon.length > 0) ? icon : null;
+    const handleDragStart = (event) => {
+        event.dataTransfer.setData('application/json', JSON.stringify(data ?? null));
+        event.dataTransfer.effectAllowed = 'copy';
+        drawer?.setDragging(true);
+        onDragStart?.(data, event);
+        dragContext.onItemDragStart?.(data, event);
+    };
+    const handleDragEnd = (event) => {
+        drawer?.setDragging(false);
+        onDragEnd?.(data, event);
+    };
+    return (jsxs("button", { "aria-pressed": active, ...root, ...rovingTool, type: 'button', title: hasReason ? disabledReason : root?.title, "aria-disabled": disabled || undefined, "aria-describedby": hasReason ? reasonId : root?.['aria-describedby'], onClick: disabled ? undefined : onClick, draggable: isDraggable, onDragStart: isDraggable ? handleDragStart : undefined, onDragEnd: isDraggable ? handleDragEnd : undefined, className: `toolbar-button toolbar-drawer-tile ${isDraggable ? 'toolbar-button--draggable' : ''} ${active ? 'toolbar-button--active' : ''} ${root?.className ?? ''} ${className ?? ''}`, "data-cratis-part": 'toolbar-folder-tile', "data-item-id": itemId, "data-disabled": disabled || undefined, "data-active": active || undefined, "data-selected": active || undefined, children: [resolvedIcon !== null && (jsx("span", { "aria-hidden": 'true', ...iconPart, className: `toolbar-drawer-tile__icon ${iconPart?.className ?? ''}`, "data-cratis-part": 'toolbar-folder-tile-icon', children: jsx(IconDisplay, { icon: resolvedIcon, className: 'cratis:text-2xl' }) })), jsx("span", { ...label, className: `toolbar-drawer-tile__label ${label?.className ?? ''}`, "data-cratis-part": 'toolbar-folder-tile-label', children: title }), hasReason && (jsx("span", { id: reasonId, className: 'toolbar-drawer-tile__reason', children: disabledReason }))] }));
+};
+
+export { ToolbarDrawerTile };
+//# sourceMappingURL=ToolbarDrawerTile.js.map

package/dist/esm/Toolbar/ToolbarDrawerTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDrawerTile.js","sources":["../../../Toolbar/ToolbarDrawerTile.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useId, type ButtonHTMLAttributes, type DragEvent, type HTMLAttributes } from 'react';\nimport { IconDisplay } from '../Common/Icon';\nimport type { Icon } from '../Common/Icon';\nimport { useRovingTool } from '../Common/ToolbarRovingContext';\nimport { useToolbarDragContext } from './ToolbarDragContext';\nimport { useToolbarDrawer } from './ToolbarDrawerContext';\n\n/** Props for the internal labeled tile rendered inside a drawer {@link ToolbarFolder}. */\nexport interface ToolbarDrawerTileProps {\n    /** Always-visible label and accessible name. */\n    title: string;\n    /** Icon shown above the label. */\n    icon?: Icon;\n    /** Whether the tile is the active/selected one. */\n    active?: boolean;\n    /** Whether the tile is unavailable. */\n    disabled?: boolean;\n    /** Explanation of why the tile is unavailable. */\n    disabledReason?: string;\n    /** Whether the tile can be dragged. */\n    draggable: boolean;\n    /** Data delivered to drag callbacks and serialized onto the `DataTransfer`. */\n    data?: unknown;\n    /** Catalogue identity exposed as `data-item-id` so styling and tests can address one tile. */\n    itemId?: string;\n    /** Called when the tile is activated by pointer, Enter or Space. */\n    onClick?: () => void;\n    /** Called when a drag starts on the tile. */\n    onDragStart?: (data: unknown, event: DragEvent<HTMLButtonElement>) => void;\n    /** Called when a drag that started on the tile ends, whether dropped or cancelled. */\n    onDragEnd?: (data: unknown, event: DragEvent<HTMLButtonElement>) => void;\n    /** Extra class name for the native button. */\n    className?: string;\n    /** Attributes for the native button. */\n    root?: ButtonHTMLAttributes<HTMLButtonElement>;\n    /** Attributes for the icon wrapper. */\n    iconPart?: HTMLAttributes<HTMLSpanElement>;\n    /** Attributes for the label. */\n    label?: HTMLAttributes<HTMLSpanElement>;\n}\n\n/**\n * A labeled drawer tile: a prominent icon with an always-visible title.\n *\n * A disabled tile stays focusable and reports `aria-disabled` so assistive technology can still\n * read why it is unavailable; it neither activates nor drags.\n */\nexport const ToolbarDrawerTile = ({\n    title,\n    icon,\n    active,\n    disabled,\n    disabledReason,\n    draggable,\n    data,\n    itemId,\n    onClick,\n    onDragStart,\n    onDragEnd,\n    className,\n    root,\n    iconPart,\n    label,\n}: ToolbarDrawerTileProps) => {\n    const dragContext = useToolbarDragContext();\n    const drawer = useToolbarDrawer();\n    const rovingTool = useRovingTool<HTMLButtonElement>(root?.tabIndex, root?.onFocus);\n    const reasonId = useId();\n    const isDraggable = draggable && !disabled;\n    const hasReason = disabled === true && typeof disabledReason === 'string' && disabledReason.length > 0;\n    const resolvedIcon = icon !== undefined && icon !== null && (typeof icon !== 'string' || icon.length > 0) ? icon : null;\n\n    const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {\n        event.dataTransfer.setData('application/json', JSON.stringify(data ?? null));\n        event.dataTransfer.effectAllowed = 'copy';\n        drawer?.setDragging(true);\n        onDragStart?.(data, event);\n        dragContext.onItemDragStart?.(data, event);\n    };\n\n    const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {\n        drawer?.setDragging(false);\n        onDragEnd?.(data, event);\n    };\n\n    return (\n        <button\n            aria-pressed={active}\n            {...root}\n            {...rovingTool}\n            type='button'\n            title={hasReason ? disabledReason : root?.title}\n            aria-disabled={disabled || undefined}\n            aria-describedby={hasReason ? reasonId : root?.['aria-describedby']}\n            onClick={disabled ? undefined : onClick}\n            draggable={isDraggable}\n            onDragStart={isDraggable ? handleDragStart : undefined}\n            onDragEnd={isDraggable ? handleDragEnd : undefined}\n            className={`toolbar-button toolbar-drawer-tile ${isDraggable ? 'toolbar-button--draggable' : ''} ${active ? 'toolbar-button--active' : ''} ${root?.className ?? ''} ${className ?? ''}`}\n            data-cratis-part='toolbar-folder-tile'\n            data-item-id={itemId}\n            data-disabled={disabled || undefined}\n            data-active={active || undefined}\n            data-selected={active || undefined}\n        >\n            {resolvedIcon !== null && (\n                <span\n                    aria-hidden='true'\n                    {...iconPart}\n                    className={`toolbar-drawer-tile__icon ${iconPart?.className ?? ''}`}\n                    data-cratis-part='toolbar-folder-tile-icon'\n                >\n                    <IconDisplay icon={resolvedIcon} className='cratis:text-2xl' />\n                </span>\n            )}\n            <span\n                {...label}\n                className={`toolbar-drawer-tile__label ${label?.className ?? ''}`}\n                data-cratis-part='toolbar-folder-tile-label'\n            >\n                {title}\n            </span>\n            {hasReason && (\n                <span id={reasonId} className='toolbar-drawer-tile__reason'>\n                    {disabledReason}\n                </span>\n            )}\n        </button>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/Toolbar/ToolbarFolder.d.ts

@@ -1,6 +1,8 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type ButtonHTMLAttributes, type DragEvent, type HTMLAttributes, type ReactNode } from 'react';
 import type { Icon } from '../Common/Icon.js';
 import type { TooltipPosition } from '../Common/Tooltip.js';
+import type { ToolbarDrawerItem } from './ToolbarDrawerItem.js';
+import type { ToolbarFolderPresentation } from './ToolbarFolderPresentation.js';
 import type { ToolbarFolderMode } from './ToolbarFolderContext.js';
 /** Stable part attributes for {@link ToolbarFolder}. */
 export interface ToolbarFolderParts {
@@ -10,6 +12,18 @@ export interface ToolbarFolderParts {
     trigger?: ButtonHTMLAttributes<HTMLButtonElement>;
     /** Expanded item panel. */
     panel?: HTMLAttributes<HTMLDivElement>;
+    /** Drawer presentation: the header row holding the title and the close action. */
+    drawerHeader?: HTMLAttributes<HTMLDivElement>;
+    /** Drawer presentation: the visible heading. */
+    drawerTitle?: HTMLAttributes<HTMLSpanElement>;
+    /** Drawer presentation: the native close button. */
+    drawerClose?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Drawer presentation: each labeled tile rendered from `items`. */
+    tile?: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Drawer presentation: the icon wrapper inside each tile rendered from `items`. */
+    tileIcon?: HTMLAttributes<HTMLSpanElement>;
+    /** Drawer presentation: the label inside each tile rendered from `items`. */
+    tileLabel?: HTMLAttributes<HTMLSpanElement>;
 }
 /** Props for the {@link ToolbarFolder} component. */
 export interface ToolbarFolderProps {
@@ -28,14 +42,42 @@ export interface ToolbarFolderProps {
      * - `'list'` — items are stacked vertically with the icon and title label shown side by side.
      */
     mode?: ToolbarFolderMode;
-    /** Maximum number of columns to render before adding more rows (default: 5). Only applies to `grid` mode. */
+    /**
+     * How the expanded panel is presented (default: `'compact'`, the existing popout).
+     * Set `'drawer'` for a headed panel with a visible title, a close action and labeled tiles.
+     */
+    presentation?: ToolbarFolderPresentation;
+    /** Maximum number of columns to render before adding more rows (default: 5, or 3 for the drawer). Not used in `list` mode. */
     maxColumns?: number;
+    /** Drawer presentation: visible heading. Defaults to {@link title}. */
+    heading?: string;
+    /** Drawer presentation: accessible name of the close button. Falls back to `messages.toolbar.closeDrawer`, then `Close`. */
+    closeLabel?: string;
+    /**
+     * Drawer presentation: a data-driven catalogue rendered as labeled tiles before any `children`.
+     * Each item's `payload` is delivered unchanged to {@link onActivate} and on drag; items are never
+     * normalized or filtered.
+     */
+    items?: ReadonlyArray<ToolbarDrawerItem>;
+    /** Drawer presentation: called when a catalogue tile is activated by click, Enter or Space. The consumer decides the insertion target. */
+    onActivate?: (item: ToolbarDrawerItem) => void;
+    /** Drawer presentation: called when a drag of a catalogue tile starts. */
+    onItemDragStart?: (item: ToolbarDrawerItem, event: DragEvent<HTMLButtonElement>) => void;
+    /** Drawer presentation: called when a drag of a catalogue tile ends, whether it was dropped or cancelled. */
+    onItemDragEnd?: (item: ToolbarDrawerItem, event: DragEvent<HTMLButtonElement>) => void;
+    /** Drawer presentation: whether catalogue tiles can be dragged (default: `true`). */
+    draggable?: boolean;
+    /**
+     * Drawer presentation: close the drawer after a tile is activated or a drag is dropped
+     * (default: `false`, so several items can be inserted in a row). A cancelled drag never closes it.
+     */
+    closeOnInsert?: boolean;
     /** Extra class name for the folder root. */
     className?: string;
     /** Stable folder attributes. */
     pt?: ToolbarFolderParts;
-    /** The toolbar buttons shown when the folder is expanded. */
-    children: ReactNode;
+    /** The toolbar buttons shown when the folder is expanded. Optional when a drawer supplies `items`. */
+    children?: ReactNode;
 }
 /**
  * A toolbar folder that reveals a panel of buttons when clicked.
@@ -45,6 +87,10 @@ export interface ToolbarFolderProps {
  *
  * **List mode**: items are stacked vertically with their icon and title label rendered
  * side by side — useful when labels add important context to icon-only buttons.
+ *
+ * **Drawer presentation** (`presentation='drawer'`): a headed panel with a visible title, a close
+ * action and labeled icon tiles. Tiles come from a data-driven `items` catalogue and/or `children`.
+ * The drawer only presents the palette: dropping a tile and deciding what it creates stay with the consumer.
  */
-export declare const ToolbarFolder: ({ icon, title, tooltipPosition, folderDirection, mode, maxColumns, className, pt, children, }: ToolbarFolderProps) => import("react").JSX.Element;
+export declare const ToolbarFolder: ({ icon, title, tooltipPosition, folderDirection, mode, presentation, maxColumns, heading, closeLabel, items: catalogue, onActivate, onItemDragStart, onItemDragEnd, draggable, closeOnInsert, className, pt, children, }: ToolbarFolderProps) => import("react").JSX.Element;
 //# sourceMappingURL=ToolbarFolder.d.ts.map

package/dist/esm/Toolbar/ToolbarFolder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarFolder.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarFolder.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EAOjB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAgB,CAAC;AAE3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AAMzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAAwB,CAAC;AAEhE,wDAAwD;AACxD,MAAM,WAAW,kBAAkB;IAC/B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IACtC,6BAA6B;IAC7B,OAAO,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAClD,2BAA2B;IAC3B,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC1C;AAED,qDAAqD;AACrD,MAAM,WAAW,kBAAkB;IAC/B,wDAAwD;IACxD,IAAI,EAAE,IAAI,CAAC;IAEX,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IAEd,iFAAiF;IACjF,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC,6EAA6E;IAC7E,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEnC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB,6GAA6G;IAC7G,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gCAAgC;IAChC,EAAE,CAAC,EAAE,kBAAkB,CAAC;IAExB,6DAA6D;IAC7D,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,kGAUvB,kBAAkB,gCAkIpB,CAAC"}
+{"version":3,"file":"ToolbarFolder.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarFolder.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,oBAAoB,EAEzB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,SAAS,EAQjB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAgB,CAAC;AAE3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AAMzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAqB,CAAC;AAE7D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAA6B,CAAC;AAM7E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAAwB,CAAC;AAEhE,wDAAwD;AACxD,MAAM,WAAW,kBAAkB;IAC/B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IACtC,6BAA6B;IAC7B,OAAO,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAClD,2BAA2B;IAC3B,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IACvC,kFAAkF;IAClF,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC9C,gDAAgD;IAChD,WAAW,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC9C,oDAAoD;IACpD,WAAW,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACtD,oEAAoE;IACpE,IAAI,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,oFAAoF;IACpF,QAAQ,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC3C,6EAA6E;IAC7E,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;CAC/C;AAED,qDAAqD;AACrD,MAAM,WAAW,kBAAkB;IAC/B,wDAAwD;IACxD,IAAI,EAAE,IAAI,CAAC;IAEX,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IAEd,iFAAiF;IACjF,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC,6EAA6E;IAC7E,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEnC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB;;;OAGG;IACH,YAAY,CAAC,EAAE,yBAAyB,CAAC;IAEzC,8HAA8H;IAC9H,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,4HAA4H;IAC5H,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAEzC,0IAA0I;IAC1I,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE/C,0EAA0E;IAC1E,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAEzF,6GAA6G;IAC7G,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAEvF,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gCAAgC;IAChC,EAAE,CAAC,EAAE,kBAAkB,CAAC;IAExB,sGAAsG;IACtG,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAKD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,6NAmBvB,kBAAkB,gCAqRpB,CAAC"}

package/dist/esm/Toolbar/ToolbarFolder.js

@@ -1,16 +1,34 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useId, useMemo, Children, useEffect } from 'react';
+import { useState, useRef, useCallback, useId, useMemo, Children, useEffect, useLayoutEffect } from 'react';
 import { useRovingTool } from '../Common/ToolbarRovingContext.js';
 import { IconDisplay } from '../Common/Icon.js';
 import { Tooltip } from '../Common/Tooltip.js';
+import 'react-aria-components/I18nProvider';
+import 'ts-deepmerge';
+import 'react-dom';
+import { useCratisComponentsConfig } from '../configuration/CratisComponentsContext.js';
+import { useCratisIcon } from '../configuration/useCratisIcon.js';
+import '../Notifications/toast.js';
+import '../renderer/RendererContext.js';
+import { ToolbarDrawerContext } from './ToolbarDrawerContext.js';
+import { resolveToolbarDrawerPlacement } from './ToolbarDrawerPlacement.js';
+import { ToolbarDrawerTile } from './ToolbarDrawerTile.js';
 import { ToolbarFolderContext } from './ToolbarFolderContext.js';
 import { useToolbarItemVisibility, ToolbarItemVisibilityProvider } from './ToolbarItemVisibilityContext.js';
 
-const ToolbarFolder = ({ icon, title, tooltipPosition = 'right', folderDirection = 'right', mode = 'grid', maxColumns = 5, className, pt, children, }) => {
+const drawerPlacementGap = 12;
+const drawerViewportMargin = 8;
+const ToolbarFolder = ({ icon, title, tooltipPosition = 'right', folderDirection = 'right', mode = 'grid', presentation = 'compact', maxColumns, heading, closeLabel, items: catalogue, onActivate, onItemDragStart, onItemDragEnd, draggable = true, closeOnInsert = false, className, pt, children, }) => {
+    const isDrawer = presentation === 'drawer';
     const [isExpanded, setIsExpanded] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [placement, setPlacement] = useState(null);
     const isToolbarItemVisible = useToolbarItemVisibility();
+    const { messages } = useCratisComponentsConfig();
+    const resolveIcon = useCratisIcon();
     const containerRef = useRef(null);
     const triggerRef = useRef(null);
+    const panelRef = useRef(null);
     const rovingTrigger = useRovingTool(pt?.trigger?.tabIndex, pt?.trigger?.onFocus);
     const rovingTriggerRef = rovingTrigger.ref;
     const setTriggerRef = useCallback((element) => {
@@ -19,17 +37,27 @@ const ToolbarFolder = ({ icon, title, tooltipPosition = 'right', folderDirection
             rovingTriggerRef(element);
     }, [rovingTriggerRef]);
     const generatedPanelId = useId();
+    const generatedTitleId = useId();
+    const titleId = pt?.drawerTitle?.id ?? generatedTitleId;
     const panelId = pt?.panel?.id ?? generatedPanelId;
+    const catalogueItems = useMemo(() => (isDrawer ? catalogue ?? [] : []), [isDrawer, catalogue]);
     const items = useMemo(() => Children.toArray(children).filter((child) => child !== null && child !== undefined), [children]);
-    const itemCount = Math.max(1, items.length);
+    const itemCount = Math.max(1, items.length + catalogueItems.length);
+    const resolvedMaxColumns = maxColumns ?? (isDrawer ? 3 : 5);
     const columns = useMemo(() => {
-        const upperBound = Math.max(1, maxColumns);
+        const upperBound = Math.max(1, resolvedMaxColumns);
         const balancedColumns = Math.ceil(Math.sqrt(itemCount));
         return Math.min(upperBound, balancedColumns);
-    }, [itemCount, maxColumns]);
+    }, [itemCount, resolvedMaxColumns]);
     const toggleExpanded = () => {
         setIsExpanded((current) => !current);
     };
+    const close = useCallback((restoreFocus) => {
+        setIsExpanded(false);
+        if (restoreFocus)
+            window.setTimeout(() => triggerRef.current?.focus(), 0);
+    }, []);
+    const drawerContext = useMemo(() => ({ setDragging: setIsDragging }), []);
     useEffect(() => {
         if (!isExpanded) {
             return;
@@ -45,28 +73,99 @@ const ToolbarFolder = ({ icon, title, tooltipPosition = 'right', folderDirection
                 return;
             event.preventDefault();
             event.stopPropagation();
-            setIsExpanded(false);
-            window.setTimeout(() => triggerRef.current?.focus(), 0);
+            close(true);
         };
         document.addEventListener('mousedown', handleClickOutside);
+        if (isDrawer)
+            document.addEventListener('pointerdown', handleClickOutside);
         document.addEventListener('keydown', handleEscape, true);
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('pointerdown', handleClickOutside);
             document.removeEventListener('keydown', handleEscape, true);
         };
+    }, [isExpanded, isDrawer, close]);
+    useEffect(() => {
+        if (!isExpanded)
+            setIsDragging(false);
     }, [isExpanded]);
+    useLayoutEffect(() => {
+        const trigger = triggerRef.current;
+        const panel = panelRef.current;
+        if (!isDrawer || !isExpanded || !trigger || !panel)
+            return;
+        const measure = () => {
+            const toolbar = containerRef.current?.closest('[role="toolbar"]');
+            const orientation = toolbar?.getAttribute('aria-orientation') === 'horizontal' ? 'horizontal' : 'vertical';
+            const rectangle = trigger.getBoundingClientRect();
+            const next = resolveToolbarDrawerPlacement({
+                trigger: { left: rectangle.left, top: rectangle.top, right: rectangle.right, bottom: rectangle.bottom },
+                panel: {
+                    width: panel.scrollWidth + (panel.offsetWidth - panel.clientWidth),
+                    height: panel.scrollHeight + (panel.offsetHeight - panel.clientHeight),
+                },
+                viewport: { width: window.innerWidth, height: window.innerHeight },
+                orientation,
+                preferredHorizontalSide: folderDirection,
+                gap: drawerPlacementGap,
+                margin: drawerViewportMargin,
+            });
+            setPlacement((current) => current &&
+                current.side === next.side &&
+                current.shift === next.shift &&
+                current.mainShift === next.mainShift &&
+                current.maxHeight === next.maxHeight &&
+                current.maxWidth === next.maxWidth
+                ? current
+                : next);
+        };
+        measure();
+        window.addEventListener('resize', measure);
+        return () => window.removeEventListener('resize', measure);
+    }, [isDrawer, isExpanded, folderDirection, catalogueItems.length, items.length]);
+    const handleTileActivate = (item) => {
+        onActivate?.(item);
+        if (closeOnInsert)
+            close(true);
+    };
+    const handleTileDragEnd = (item, event) => {
+        onItemDragEnd?.(item, event);
+        if (closeOnInsert && event.dataTransfer?.dropEffect !== 'none')
+            close(false);
+    };
     const activeClass = isExpanded ? 'toolbar-button--active' : '';
     const panelVisibleClass = isExpanded ? 'toolbar-folder-panel--visible' : '';
     const directionClass = `toolbar-folder-panel--${folderDirection}`;
     const modeClass = mode === 'list' ? 'toolbar-folder-panel--list' : '';
-    return (jsx(ToolbarFolderContext.Provider, { value: mode, children: jsxs("div", { ...pt?.root, className: `toolbar-folder-item ${pt?.root?.className ?? ''} ${className ?? ''}`, "data-cratis-part": 'toolbar-folder', "data-open": isExpanded || undefined, ref: containerRef, children: [jsx(Tooltip, { content: title, position: tooltipPosition, disabled: isExpanded || !isToolbarItemVisible, children: jsx("button", { ...pt?.trigger, tabIndex: rovingTrigger.tabIndex, onFocus: rovingTrigger.onFocus, ref: setTriggerRef, type: 'button', "aria-label": title, "aria-expanded": isExpanded, "aria-controls": panelId, onClick: toggleExpanded, className: `toolbar-button cratis:w-10 cratis:h-10 cratis:flex cratis:items-center cratis:justify-center cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${pt?.trigger?.className ?? ''}`, "data-cratis-part": 'toolbar-folder-trigger', "data-open": isExpanded || undefined, children: jsx(IconDisplay, { icon: icon, className: 'cratis:text-lg' }) }) }), jsx("div", { ...pt?.panel, id: panelId, role: 'group', "aria-label": title, className: `toolbar-folder-panel ${directionClass} ${panelVisibleClass} ${modeClass} ${pt?.panel?.className ?? ''}`, style: {
+    const drawerClass = isDrawer ? 'toolbar-folder-panel--drawer' : '';
+    const resolvedHeading = heading ?? title;
+    const resolvedCloseLabel = closeLabel ?? messages?.toolbar?.closeDrawer ?? 'Close';
+    const resolvedCloseIcon = resolveIcon('close', '×');
+    const drawerStyle = isDrawer
+        ? {
+            '--toolbar-drawer-columns': columns,
+            ...(placement
+                ? {
+                    '--toolbar-drawer-shift': `${placement.shift}px`,
+                    '--toolbar-drawer-main-shift': `${placement.mainShift}px`,
+                    '--toolbar-drawer-max-height': `${placement.maxHeight}px`,
+                    '--toolbar-drawer-max-width': `${placement.maxWidth}px`,
+                }
+                : {}),
+        }
+        : {};
+    return (jsx(ToolbarFolderContext.Provider, { value: mode, children: jsxs("div", { ...pt?.root, className: `toolbar-folder-item ${pt?.root?.className ?? ''} ${className ?? ''}`, "data-cratis-part": 'toolbar-folder', "data-open": isExpanded || undefined, ref: containerRef, children: [jsx(Tooltip, { content: title, position: tooltipPosition, disabled: isExpanded || !isToolbarItemVisible, children: jsx("button", { ...pt?.trigger, tabIndex: rovingTrigger.tabIndex, onFocus: rovingTrigger.onFocus, ref: setTriggerRef, type: 'button', "aria-label": title, "aria-expanded": isExpanded, "aria-controls": panelId, onClick: toggleExpanded, className: `toolbar-button cratis:w-10 cratis:h-10 cratis:flex cratis:items-center cratis:justify-center cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${pt?.trigger?.className ?? ''}`, "data-cratis-part": 'toolbar-folder-trigger', "data-open": isExpanded || undefined, children: jsx(IconDisplay, { icon: icon, className: 'cratis:text-lg' }) }) }), jsx("div", { ...pt?.panel, ref: panelRef, id: panelId, role: 'group', "aria-label": isDrawer ? undefined : title, "aria-labelledby": isDrawer ? titleId : undefined, className: `toolbar-folder-panel ${directionClass} ${panelVisibleClass} ${modeClass} ${drawerClass} ${pt?.panel?.className ?? ''}`, style: {
                         ...pt?.panel?.style,
-                        ...(mode === 'grid'
+                        ...(mode === 'grid' && !isDrawer
                             ? {
                                 gridTemplateColumns: `repeat(${columns}, minmax(2.5rem, 2.5rem))`,
                             }
                             : {}),
-                    }, "data-cratis-part": 'toolbar-folder-panel', "data-expanded": isExpanded || undefined, "data-open": isExpanded || undefined, "data-direction": folderDirection, "data-mode": mode, "aria-hidden": !isExpanded, inert: !isExpanded, children: jsx(ToolbarItemVisibilityProvider, { value: isExpanded && isToolbarItemVisible, children: items }) })] }) }));
+                        ...drawerStyle,
+                    }, "data-cratis-part": 'toolbar-folder-panel', "data-expanded": isExpanded || undefined, "data-open": isExpanded || undefined, "data-direction": folderDirection, "data-mode": mode, "data-presentation": isDrawer ? 'drawer' : undefined, "data-side": isDrawer ? placement?.side ?? folderDirection : undefined, "data-dragging": isDrawer && isDragging ? '' : undefined, "aria-hidden": !isExpanded, inert: !isExpanded, children: jsx(ToolbarItemVisibilityProvider, { value: isExpanded && isToolbarItemVisible, children: isDrawer ? (jsxs(ToolbarDrawerContext.Provider, { value: drawerContext, children: [jsxs("div", { ...pt?.drawerHeader, className: `toolbar-drawer-header ${pt?.drawerHeader?.className ?? ''}`, "data-cratis-part": 'toolbar-folder-header', children: [jsx("span", { ...pt?.drawerTitle, id: titleId, className: `toolbar-drawer-title ${pt?.drawerTitle?.className ?? ''}`, "data-cratis-part": 'toolbar-folder-title', children: resolvedHeading }), jsx("button", { ...pt?.drawerClose, type: 'button', "aria-label": resolvedCloseLabel, onClick: (event) => {
+                                                pt?.drawerClose?.onClick?.(event);
+                                                close(true);
+                                            }, className: `toolbar-button toolbar-drawer-close ${pt?.drawerClose?.className ?? ''}`, "data-cratis-part": 'toolbar-folder-close', children: resolvedCloseIcon })] }), jsxs("div", { className: 'toolbar-drawer-tiles', children: [catalogueItems.map((item) => (jsx(ToolbarDrawerTile, { title: item.title, icon: item.icon, disabled: item.disabled, disabledReason: item.disabledReason, draggable: draggable, data: item.payload, onClick: () => handleTileActivate(item), onDragStart: (_, event) => onItemDragStart?.(item, event), onDragEnd: (_, event) => handleTileDragEnd(item, event), itemId: item.id, root: pt?.tile, iconPart: pt?.tileIcon, label: pt?.tileLabel }, item.id))), items] })] })) : (items) }) })] }) }));
 };
 
 export { ToolbarFolder };

package/dist/esm/Toolbar/ToolbarFolder.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarFolder.js","sources":["../../../Toolbar/ToolbarFolder.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport {\n    Children,\n    type ButtonHTMLAttributes,\n    type HTMLAttributes,\n    type ReactNode,\n    useEffect,\n    useId,\n    useMemo,\n    useRef,\n    useCallback,\n    useState,\n} from 'react';\nimport { useRovingTool } from '../Common/ToolbarRovingContext';\nimport { IconDisplay } from '../Common/Icon';\nimport type { Icon } from '../Common/Icon';\nimport { Tooltip } from '../Common/Tooltip';\nimport type { TooltipPosition } from '../Common/Tooltip';\nimport { ToolbarFolderContext } from './ToolbarFolderContext';\nimport {\n    ToolbarItemVisibilityProvider,\n    useToolbarItemVisibility,\n} from './ToolbarItemVisibilityContext';\nimport type { ToolbarFolderMode } from './ToolbarFolderContext';\n\n/** Stable part attributes for {@link ToolbarFolder}. */\nexport interface ToolbarFolderParts {\n    /** Folder composition and measurement root. */\n    root?: HTMLAttributes<HTMLDivElement>;\n    /** Native folder trigger. */\n    trigger?: ButtonHTMLAttributes<HTMLButtonElement>;\n    /** Expanded item panel. */\n    panel?: HTMLAttributes<HTMLDivElement>;\n}\n\n/** Props for the {@link ToolbarFolder} component. */\nexport interface ToolbarFolderProps {\n    /** The icon to display on the folder trigger button. */\n    icon: Icon;\n\n    /** Title text shown when hovering over the folder trigger button. */\n    title: string;\n\n    /** Position of the tooltip relative to the trigger button (default: 'right'). */\n    tooltipPosition?: TooltipPosition;\n\n    /** Direction the folder opens from the trigger button (default: 'right'). */\n    folderDirection?: 'right' | 'left';\n\n    /**\n     * Display mode for the folder's expanded panel (default: `'grid'`).\n     *\n     * - `'grid'` — items are arranged in a balanced grid (existing behaviour).\n     * - `'list'` — items are stacked vertically with the icon and title label shown side by side.\n     */\n    mode?: ToolbarFolderMode;\n\n    /** Maximum number of columns to render before adding more rows (default: 5). Only applies to `grid` mode. */\n    maxColumns?: number;\n\n    /** Extra class name for the folder root. */\n    className?: string;\n\n    /** Stable folder attributes. */\n    pt?: ToolbarFolderParts;\n\n    /** The toolbar buttons shown when the folder is expanded. */\n    children: ReactNode;\n}\n\n/**\n * A toolbar folder that reveals a panel of buttons when clicked.\n *\n * **Grid mode** (default): items are arranged in a balanced grid that grows naturally as\n * more items are added and keeps a compact footprint for small sets.\n *\n * **List mode**: items are stacked vertically with their icon and title label rendered\n * side by side — useful when labels add important context to icon-only buttons.\n */\nexport const ToolbarFolder = ({\n    icon,\n    title,\n    tooltipPosition = 'right',\n    folderDirection = 'right',\n    mode = 'grid',\n    maxColumns = 5,\n    className,\n    pt,\n    children,\n}: ToolbarFolderProps) => {\n    const [isExpanded, setIsExpanded] = useState(false);\n    const isToolbarItemVisible = useToolbarItemVisibility();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const rovingTrigger = useRovingTool<HTMLButtonElement>(pt?.trigger?.tabIndex, pt?.trigger?.onFocus);\n    const rovingTriggerRef = rovingTrigger.ref;\n    const setTriggerRef = useCallback((element: HTMLButtonElement | null) => {\n        triggerRef.current = element;\n        if (typeof rovingTriggerRef === 'function') rovingTriggerRef(element);\n    }, [rovingTriggerRef]);\n    const generatedPanelId = useId();\n    const panelId = pt?.panel?.id ?? generatedPanelId;\n\n    const items = useMemo(\n        () =>\n            Children.toArray(children).filter(\n                (child) => child !== null && child !== undefined,\n            ),\n        [children],\n    );\n    const itemCount = Math.max(1, items.length);\n\n    const columns = useMemo(() => {\n        const upperBound = Math.max(1, maxColumns);\n        const balancedColumns = Math.ceil(Math.sqrt(itemCount));\n        return Math.min(upperBound, balancedColumns);\n    }, [itemCount, maxColumns]);\n\n    const toggleExpanded = () => {\n        setIsExpanded((current) => !current);\n    };\n\n    useEffect(() => {\n        if (!isExpanded) {\n            return;\n        }\n\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                containerRef.current &&\n                !containerRef.current.contains(event.target as Node)\n            ) {\n                setIsExpanded(false);\n            }\n        };\n\n        const handleEscape = (event: KeyboardEvent) => {\n            if (event.key !== 'Escape') return;\n            event.preventDefault();\n            event.stopPropagation();\n            setIsExpanded(false);\n            window.setTimeout(() => triggerRef.current?.focus(), 0);\n        };\n\n        document.addEventListener('mousedown', handleClickOutside);\n        document.addEventListener('keydown', handleEscape, true);\n        return () => {\n            document.removeEventListener('mousedown', handleClickOutside);\n            document.removeEventListener('keydown', handleEscape, true);\n        };\n    }, [isExpanded]);\n\n    const activeClass = isExpanded ? 'toolbar-button--active' : '';\n    const panelVisibleClass = isExpanded ? 'toolbar-folder-panel--visible' : '';\n    const directionClass = `toolbar-folder-panel--${folderDirection}`;\n    const modeClass = mode === 'list' ? 'toolbar-folder-panel--list' : '';\n\n    return (\n        <ToolbarFolderContext.Provider value={mode}>\n            <div\n                {...pt?.root}\n                className={`toolbar-folder-item ${pt?.root?.className ?? ''} ${className ?? ''}`}\n                data-cratis-part='toolbar-folder'\n                data-open={isExpanded || undefined}\n                ref={containerRef}\n            >\n                <Tooltip\n                    content={title}\n                    position={tooltipPosition}\n                    disabled={isExpanded || !isToolbarItemVisible}\n                >\n                    <button\n                        {...pt?.trigger}\n                        tabIndex={rovingTrigger.tabIndex}\n                        onFocus={rovingTrigger.onFocus}\n                        ref={setTriggerRef}\n                        type='button'\n                        aria-label={title}\n                        aria-expanded={isExpanded}\n                        aria-controls={panelId}\n                        onClick={toggleExpanded}\n                        className={`toolbar-button cratis:w-10 cratis:h-10 cratis:flex cratis:items-center cratis:justify-center cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${pt?.trigger?.className ?? ''}`}\n                        data-cratis-part='toolbar-folder-trigger'\n                        data-open={isExpanded || undefined}\n                    >\n                        <IconDisplay icon={icon} className='cratis:text-lg' />\n                    </button>\n                </Tooltip>\n                <div\n                    {...pt?.panel}\n                    id={panelId}\n                    role='group'\n                    aria-label={title}\n                    className={`toolbar-folder-panel ${directionClass} ${panelVisibleClass} ${modeClass} ${pt?.panel?.className ?? ''}`}\n                    style={{\n                        ...pt?.panel?.style,\n                        ...(mode === 'grid'\n                            ? {\n                                  gridTemplateColumns: `repeat(${columns}, minmax(2.5rem, 2.5rem))`,\n                              }\n                            : {}),\n                    }}\n                    data-cratis-part='toolbar-folder-panel'\n                    data-expanded={isExpanded || undefined}\n                    data-open={isExpanded || undefined}\n                    data-direction={folderDirection}\n                    data-mode={mode}\n                    aria-hidden={!isExpanded}\n                    inert={!isExpanded}\n                >\n                    <ToolbarItemVisibilityProvider\n                        value={isExpanded && isToolbarItemVisible}\n                    >\n                        {items}\n                    </ToolbarItemVisibilityProvider>\n                </div>\n            </div>\n        </ToolbarFolderContext.Provider>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"ToolbarFolder.js","sources":["../../../Toolbar/ToolbarFolder.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport {\n    Children,\n    type ButtonHTMLAttributes,\n    type CSSProperties,\n    type DragEvent,\n    type HTMLAttributes,\n    type ReactNode,\n    useEffect,\n    useId,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useCallback,\n    useState,\n} from 'react';\nimport { useRovingTool } from '../Common/ToolbarRovingContext';\nimport { IconDisplay } from '../Common/Icon';\nimport type { Icon } from '../Common/Icon';\nimport { Tooltip } from '../Common/Tooltip';\nimport type { TooltipPosition } from '../Common/Tooltip';\nimport { useCratisComponentsConfig } from '../Common/CratisComponentsProvider';\nimport { useCratisIcon } from '../configuration/useCratisIcon';\nimport { ToolbarDrawerContext } from './ToolbarDrawerContext';\nimport { resolveToolbarDrawerPlacement } from './ToolbarDrawerPlacement';\nimport type { ToolbarDrawerPlacement } from './ToolbarDrawerPlacement';\nimport type { ToolbarDrawerItem } from './ToolbarDrawerItem';\nimport { ToolbarDrawerTile } from './ToolbarDrawerTile';\nimport type { ToolbarFolderPresentation } from './ToolbarFolderPresentation';\nimport { ToolbarFolderContext } from './ToolbarFolderContext';\nimport {\n    ToolbarItemVisibilityProvider,\n    useToolbarItemVisibility,\n} from './ToolbarItemVisibilityContext';\nimport type { ToolbarFolderMode } from './ToolbarFolderContext';\n\n/** Stable part attributes for {@link ToolbarFolder}. */\nexport interface ToolbarFolderParts {\n    /** Folder composition and measurement root. */\n    root?: HTMLAttributes<HTMLDivElement>;\n    /** Native folder trigger. */\n    trigger?: ButtonHTMLAttributes<HTMLButtonElement>;\n    /** Expanded item panel. */\n    panel?: HTMLAttributes<HTMLDivElement>;\n    /** Drawer presentation: the header row holding the title and the close action. */\n    drawerHeader?: HTMLAttributes<HTMLDivElement>;\n    /** Drawer presentation: the visible heading. */\n    drawerTitle?: HTMLAttributes<HTMLSpanElement>;\n    /** Drawer presentation: the native close button. */\n    drawerClose?: ButtonHTMLAttributes<HTMLButtonElement>;\n    /** Drawer presentation: each labeled tile rendered from `items`. */\n    tile?: ButtonHTMLAttributes<HTMLButtonElement>;\n    /** Drawer presentation: the icon wrapper inside each tile rendered from `items`. */\n    tileIcon?: HTMLAttributes<HTMLSpanElement>;\n    /** Drawer presentation: the label inside each tile rendered from `items`. */\n    tileLabel?: HTMLAttributes<HTMLSpanElement>;\n}\n\n/** Props for the {@link ToolbarFolder} component. */\nexport interface ToolbarFolderProps {\n    /** The icon to display on the folder trigger button. */\n    icon: Icon;\n\n    /** Title text shown when hovering over the folder trigger button. */\n    title: string;\n\n    /** Position of the tooltip relative to the trigger button (default: 'right'). */\n    tooltipPosition?: TooltipPosition;\n\n    /** Direction the folder opens from the trigger button (default: 'right'). */\n    folderDirection?: 'right' | 'left';\n\n    /**\n     * Display mode for the folder's expanded panel (default: `'grid'`).\n     *\n     * - `'grid'` — items are arranged in a balanced grid (existing behaviour).\n     * - `'list'` — items are stacked vertically with the icon and title label shown side by side.\n     */\n    mode?: ToolbarFolderMode;\n\n    /**\n     * How the expanded panel is presented (default: `'compact'`, the existing popout).\n     * Set `'drawer'` for a headed panel with a visible title, a close action and labeled tiles.\n     */\n    presentation?: ToolbarFolderPresentation;\n\n    /** Maximum number of columns to render before adding more rows (default: 5, or 3 for the drawer). Not used in `list` mode. */\n    maxColumns?: number;\n\n    /** Drawer presentation: visible heading. Defaults to {@link title}. */\n    heading?: string;\n\n    /** Drawer presentation: accessible name of the close button. Falls back to `messages.toolbar.closeDrawer`, then `Close`. */\n    closeLabel?: string;\n\n    /**\n     * Drawer presentation: a data-driven catalogue rendered as labeled tiles before any `children`.\n     * Each item's `payload` is delivered unchanged to {@link onActivate} and on drag; items are never\n     * normalized or filtered.\n     */\n    items?: ReadonlyArray<ToolbarDrawerItem>;\n\n    /** Drawer presentation: called when a catalogue tile is activated by click, Enter or Space. The consumer decides the insertion target. */\n    onActivate?: (item: ToolbarDrawerItem) => void;\n\n    /** Drawer presentation: called when a drag of a catalogue tile starts. */\n    onItemDragStart?: (item: ToolbarDrawerItem, event: DragEvent<HTMLButtonElement>) => void;\n\n    /** Drawer presentation: called when a drag of a catalogue tile ends, whether it was dropped or cancelled. */\n    onItemDragEnd?: (item: ToolbarDrawerItem, event: DragEvent<HTMLButtonElement>) => void;\n\n    /** Drawer presentation: whether catalogue tiles can be dragged (default: `true`). */\n    draggable?: boolean;\n\n    /**\n     * Drawer presentation: close the drawer after a tile is activated or a drag is dropped\n     * (default: `false`, so several items can be inserted in a row). A cancelled drag never closes it.\n     */\n    closeOnInsert?: boolean;\n\n    /** Extra class name for the folder root. */\n    className?: string;\n\n    /** Stable folder attributes. */\n    pt?: ToolbarFolderParts;\n\n    /** The toolbar buttons shown when the folder is expanded. Optional when a drawer supplies `items`. */\n    children?: ReactNode;\n}\n\nconst drawerPlacementGap = 12;\nconst drawerViewportMargin = 8;\n\n/**\n * A toolbar folder that reveals a panel of buttons when clicked.\n *\n * **Grid mode** (default): items are arranged in a balanced grid that grows naturally as\n * more items are added and keeps a compact footprint for small sets.\n *\n * **List mode**: items are stacked vertically with their icon and title label rendered\n * side by side — useful when labels add important context to icon-only buttons.\n *\n * **Drawer presentation** (`presentation='drawer'`): a headed panel with a visible title, a close\n * action and labeled icon tiles. Tiles come from a data-driven `items` catalogue and/or `children`.\n * The drawer only presents the palette: dropping a tile and deciding what it creates stay with the consumer.\n */\nexport const ToolbarFolder = ({\n    icon,\n    title,\n    tooltipPosition = 'right',\n    folderDirection = 'right',\n    mode = 'grid',\n    presentation = 'compact',\n    maxColumns,\n    heading,\n    closeLabel,\n    items: catalogue,\n    onActivate,\n    onItemDragStart,\n    onItemDragEnd,\n    draggable = true,\n    closeOnInsert = false,\n    className,\n    pt,\n    children,\n}: ToolbarFolderProps) => {\n    const isDrawer = presentation === 'drawer';\n    const [isExpanded, setIsExpanded] = useState(false);\n    const [isDragging, setIsDragging] = useState(false);\n    const [placement, setPlacement] = useState<ToolbarDrawerPlacement | null>(null);\n    const isToolbarItemVisible = useToolbarItemVisibility();\n    const { messages } = useCratisComponentsConfig();\n    const resolveIcon = useCratisIcon();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const panelRef = useRef<HTMLDivElement>(null);\n    const rovingTrigger = useRovingTool<HTMLButtonElement>(pt?.trigger?.tabIndex, pt?.trigger?.onFocus);\n    const rovingTriggerRef = rovingTrigger.ref;\n    const setTriggerRef = useCallback((element: HTMLButtonElement | null) => {\n        triggerRef.current = element;\n        if (typeof rovingTriggerRef === 'function') rovingTriggerRef(element);\n    }, [rovingTriggerRef]);\n    const generatedPanelId = useId();\n    const generatedTitleId = useId();\n    const titleId = pt?.drawerTitle?.id ?? generatedTitleId;\n    const panelId = pt?.panel?.id ?? generatedPanelId;\n\n    const catalogueItems = useMemo(() => (isDrawer ? catalogue ?? [] : []), [isDrawer, catalogue]);\n    const items = useMemo(\n        () =>\n            Children.toArray(children).filter(\n                (child) => child !== null && child !== undefined,\n            ),\n        [children],\n    );\n    const itemCount = Math.max(1, items.length + catalogueItems.length);\n    const resolvedMaxColumns = maxColumns ?? (isDrawer ? 3 : 5);\n\n    const columns = useMemo(() => {\n        const upperBound = Math.max(1, resolvedMaxColumns);\n        const balancedColumns = Math.ceil(Math.sqrt(itemCount));\n        return Math.min(upperBound, balancedColumns);\n    }, [itemCount, resolvedMaxColumns]);\n\n    const toggleExpanded = () => {\n        setIsExpanded((current) => !current);\n    };\n\n    const close = useCallback((restoreFocus: boolean) => {\n        setIsExpanded(false);\n        if (restoreFocus) window.setTimeout(() => triggerRef.current?.focus(), 0);\n    }, []);\n\n    const drawerContext = useMemo(() => ({ setDragging: setIsDragging }), []);\n\n    useEffect(() => {\n        if (!isExpanded) {\n            return;\n        }\n\n        const handleClickOutside = (event: Event) => {\n            if (\n                containerRef.current &&\n                !containerRef.current.contains(event.target as Node)\n            ) {\n                setIsExpanded(false);\n            }\n        };\n\n        const handleEscape = (event: KeyboardEvent) => {\n            if (event.key !== 'Escape') return;\n            event.preventDefault();\n            event.stopPropagation();\n            close(true);\n        };\n\n        document.addEventListener('mousedown', handleClickOutside);\n        if (isDrawer) document.addEventListener('pointerdown', handleClickOutside);\n        document.addEventListener('keydown', handleEscape, true);\n        return () => {\n            document.removeEventListener('mousedown', handleClickOutside);\n            document.removeEventListener('pointerdown', handleClickOutside);\n            document.removeEventListener('keydown', handleEscape, true);\n        };\n    }, [isExpanded, isDrawer, close]);\n\n    useEffect(() => {\n        if (!isExpanded) setIsDragging(false);\n    }, [isExpanded]);\n\n    useLayoutEffect(() => {\n        const trigger = triggerRef.current;\n        const panel = panelRef.current;\n        if (!isDrawer || !isExpanded || !trigger || !panel) return;\n\n        const measure = () => {\n            const toolbar = containerRef.current?.closest('[role=\"toolbar\"]');\n            const orientation = toolbar?.getAttribute('aria-orientation') === 'horizontal' ? 'horizontal' : 'vertical';\n            const rectangle = trigger.getBoundingClientRect();\n            const next = resolveToolbarDrawerPlacement({\n                trigger: { left: rectangle.left, top: rectangle.top, right: rectangle.right, bottom: rectangle.bottom },\n                panel: {\n                    width: panel.scrollWidth + (panel.offsetWidth - panel.clientWidth),\n                    height: panel.scrollHeight + (panel.offsetHeight - panel.clientHeight),\n                },\n                viewport: { width: window.innerWidth, height: window.innerHeight },\n                orientation,\n                preferredHorizontalSide: folderDirection,\n                gap: drawerPlacementGap,\n                margin: drawerViewportMargin,\n            });\n            setPlacement((current) =>\n                current &&\n                current.side === next.side &&\n                current.shift === next.shift &&\n                current.mainShift === next.mainShift &&\n                current.maxHeight === next.maxHeight &&\n                current.maxWidth === next.maxWidth\n                    ? current\n                    : next,\n            );\n        };\n\n        measure();\n        window.addEventListener('resize', measure);\n        return () => window.removeEventListener('resize', measure);\n    }, [isDrawer, isExpanded, folderDirection, catalogueItems.length, items.length]);\n\n    const handleTileActivate = (item: ToolbarDrawerItem) => {\n        onActivate?.(item);\n        if (closeOnInsert) close(true);\n    };\n\n    const handleTileDragEnd = (item: ToolbarDrawerItem, event: DragEvent<HTMLButtonElement>) => {\n        onItemDragEnd?.(item, event);\n        if (closeOnInsert && event.dataTransfer?.dropEffect !== 'none') close(false);\n    };\n\n    const activeClass = isExpanded ? 'toolbar-button--active' : '';\n    const panelVisibleClass = isExpanded ? 'toolbar-folder-panel--visible' : '';\n    const directionClass = `toolbar-folder-panel--${folderDirection}`;\n    const modeClass = mode === 'list' ? 'toolbar-folder-panel--list' : '';\n    const drawerClass = isDrawer ? 'toolbar-folder-panel--drawer' : '';\n    const resolvedHeading = heading ?? title;\n    const resolvedCloseLabel = closeLabel ?? messages?.toolbar?.closeDrawer ?? 'Close';\n    const resolvedCloseIcon = resolveIcon('close', '×');\n\n    const drawerStyle: CSSProperties = isDrawer\n        ? ({\n              '--toolbar-drawer-columns': columns,\n              ...(placement\n                  ? {\n                        '--toolbar-drawer-shift': `${placement.shift}px`,\n                        '--toolbar-drawer-main-shift': `${placement.mainShift}px`,\n                        '--toolbar-drawer-max-height': `${placement.maxHeight}px`,\n                        '--toolbar-drawer-max-width': `${placement.maxWidth}px`,\n                    }\n                  : {}),\n          } as CSSProperties)\n        : {};\n\n    return (\n        <ToolbarFolderContext.Provider value={mode}>\n            <div\n                {...pt?.root}\n                className={`toolbar-folder-item ${pt?.root?.className ?? ''} ${className ?? ''}`}\n                data-cratis-part='toolbar-folder'\n                data-open={isExpanded || undefined}\n                ref={containerRef}\n            >\n                <Tooltip\n                    content={title}\n                    position={tooltipPosition}\n                    disabled={isExpanded || !isToolbarItemVisible}\n                >\n                    <button\n                        {...pt?.trigger}\n                        tabIndex={rovingTrigger.tabIndex}\n                        onFocus={rovingTrigger.onFocus}\n                        ref={setTriggerRef}\n                        type='button'\n                        aria-label={title}\n                        aria-expanded={isExpanded}\n                        aria-controls={panelId}\n                        onClick={toggleExpanded}\n                        className={`toolbar-button cratis:w-10 cratis:h-10 cratis:flex cratis:items-center cratis:justify-center cratis:rounded-lg cratis:cursor-pointer ${activeClass} ${pt?.trigger?.className ?? ''}`}\n                        data-cratis-part='toolbar-folder-trigger'\n                        data-open={isExpanded || undefined}\n                    >\n                        <IconDisplay icon={icon} className='cratis:text-lg' />\n                    </button>\n                </Tooltip>\n                <div\n                    {...pt?.panel}\n                    ref={panelRef}\n                    id={panelId}\n                    role='group'\n                    aria-label={isDrawer ? undefined : title}\n                    aria-labelledby={isDrawer ? titleId : undefined}\n                    className={`toolbar-folder-panel ${directionClass} ${panelVisibleClass} ${modeClass} ${drawerClass} ${pt?.panel?.className ?? ''}`}\n                    style={{\n                        ...pt?.panel?.style,\n                        ...(mode === 'grid' && !isDrawer\n                            ? {\n                                  gridTemplateColumns: `repeat(${columns}, minmax(2.5rem, 2.5rem))`,\n                              }\n                            : {}),\n                        ...drawerStyle,\n                    }}\n                    data-cratis-part='toolbar-folder-panel'\n                    data-expanded={isExpanded || undefined}\n                    data-open={isExpanded || undefined}\n                    data-direction={folderDirection}\n                    data-mode={mode}\n                    data-presentation={isDrawer ? 'drawer' : undefined}\n                    data-side={isDrawer ? placement?.side ?? folderDirection : undefined}\n                    data-dragging={isDrawer && isDragging ? '' : undefined}\n                    aria-hidden={!isExpanded}\n                    inert={!isExpanded}\n                >\n                    <ToolbarItemVisibilityProvider\n                        value={isExpanded && isToolbarItemVisible}\n                    >\n                        {isDrawer ? (\n                            <ToolbarDrawerContext.Provider value={drawerContext}>\n                                <div\n                                    {...pt?.drawerHeader}\n                                    className={`toolbar-drawer-header ${pt?.drawerHeader?.className ?? ''}`}\n                                    data-cratis-part='toolbar-folder-header'\n                                >\n                                    <span\n                                        {...pt?.drawerTitle}\n                                        id={titleId}\n                                        className={`toolbar-drawer-title ${pt?.drawerTitle?.className ?? ''}`}\n                                        data-cratis-part='toolbar-folder-title'\n                                    >\n                                        {resolvedHeading}\n                                    </span>\n                                    <button\n                                        {...pt?.drawerClose}\n                                        type='button'\n                                        aria-label={resolvedCloseLabel}\n                                        onClick={(event) => {\n                                            pt?.drawerClose?.onClick?.(event);\n                                            close(true);\n                                        }}\n                                        className={`toolbar-button toolbar-drawer-close ${pt?.drawerClose?.className ?? ''}`}\n                                        data-cratis-part='toolbar-folder-close'\n                                    >\n                                        {resolvedCloseIcon}\n                                    </button>\n                                </div>\n                                <div className='toolbar-drawer-tiles'>\n                                    {catalogueItems.map((item) => (\n                                        <ToolbarDrawerTile\n                                            key={item.id}\n                                            title={item.title}\n                                            icon={item.icon}\n                                            disabled={item.disabled}\n                                            disabledReason={item.disabledReason}\n                                            draggable={draggable}\n                                            data={item.payload}\n                                            onClick={() => handleTileActivate(item)}\n                                            onDragStart={(_, event) => onItemDragStart?.(item, event)}\n                                            onDragEnd={(_, event) => handleTileDragEnd(item, event)}\n                                            itemId={item.id}\n                                            root={pt?.tile}\n                                            iconPart={pt?.tileIcon}\n                                            label={pt?.tileLabel}\n                                        />\n                                    ))}\n                                    {items}\n                                </div>\n                            </ToolbarDrawerContext.Provider>\n                        ) : (\n                            items\n                        )}\n                    </ToolbarItemVisibilityProvider>\n                </div>\n            </div>\n        </ToolbarFolderContext.Provider>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/Toolbar/ToolbarFolderPresentation.d.ts

@@ -0,0 +1,8 @@
+/**
+ * How a {@link ToolbarFolder} presents its expanded panel.
+ *
+ * - `'compact'` — the existing popout: icon-only grid cells or a labeled list (see {@link ToolbarFolderMode}).
+ * - `'drawer'` — a headed drawer with a visible title, a close action and labeled icon tiles.
+ */
+export type ToolbarFolderPresentation = 'compact' | 'drawer';
+//# sourceMappingURL=ToolbarFolderPresentation.d.ts.map

package/dist/esm/Toolbar/ToolbarFolderPresentation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarFolderPresentation.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarFolderPresentation.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,QAAQ,CAAC"}

package/dist/esm/Toolbar/ToolbarFolderPresentation.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+export {};
+//# sourceMappingURL=ToolbarFolderPresentation.js.map

package/dist/esm/Toolbar/ToolbarFolderPresentation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarFolderPresentation.js","sourceRoot":"","sources":["../../../Toolbar/ToolbarFolderPresentation.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qGAAqG","sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/**\n * How a {@link ToolbarFolder} presents its expanded panel.\n *\n * - `'compact'` — the existing popout: icon-only grid cells or a labeled list (see {@link ToolbarFolderMode}).\n * - `'drawer'` — a headed drawer with a visible title, a close action and labeled icon tiles.\n */\nexport type ToolbarFolderPresentation = 'compact' | 'drawer';\n"]}

package/dist/esm/Toolbar/index.d.ts

@@ -20,4 +20,6 @@ export { ToolbarSlot, ToolbarSlotProvider, useToolbarSlot } from './ToolbarSlot.
 export type { ToolbarSlotProps, ToolbarSlotProviderProps } from './ToolbarSlot.js';
 export { ToolbarLayout } from './ToolbarLayout.js';
 export type { ToolbarLayoutParts, ToolbarLayoutProps } from './ToolbarLayout.js';
+export type { ToolbarDrawerItem } from './ToolbarDrawerItem.js';
+export type { ToolbarFolderPresentation } from './ToolbarFolderPresentation.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/Toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Toolbar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAW,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA4B,CAAC;AAC9D,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,cAAW,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAkB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,mBAAgB,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,qBAAkB,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,uBAAoB,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,wBAAqB,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAC9E,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAAwB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,kBAAe,CAAC;AACjF,YAAY,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,kBAAe,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,oBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Toolbar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAW,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA4B,CAAC;AAC9D,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,cAAW,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAkB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,mBAAgB,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,qBAAkB,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,uBAAoB,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,wBAAqB,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAC9E,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAAwB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,kBAAe,CAAC;AACjF,YAAY,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,kBAAe,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAC9E,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAqB,CAAC;AAC7D,YAAY,EAAE,yBAAyB,EAAE,MAAM,gCAA6B,CAAC"}

package/dist/esm/configuration/CratisComponentsDefaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CratisComponentsDefaults.d.ts","sourceRoot":"","sources":["../../../configuration/CratisComponentsDefaults.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uCAAoC,CAAC;AAEjF,sDAAsD;AACtD,eAAO,MAAM,cAAc,EAAE,sBA8D5B,CAAC"}
+{"version":3,"file":"CratisComponentsDefaults.d.ts","sourceRoot":"","sources":["../../../configuration/CratisComponentsDefaults.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uCAAoC,CAAC;AAEjF,sDAAsD;AACtD,eAAO,MAAM,cAAc,EAAE,sBA+D5B,CAAC"}

package/dist/esm/configuration/CratisComponentsDefaults.js

@@ -57,6 +57,7 @@ const cratisDefaults = {
         },
         toolbar: {
             label: 'Tools',
+            closeDrawer: 'Close',
         },
     },
 };

package/dist/esm/configuration/CratisComponentsDefaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"CratisComponentsDefaults.js","sources":["../../../configuration/CratisComponentsDefaults.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { CratisComponentsConfig } from '../Common/CratisComponentsProvider';\n\n/** Default locale and English Components messages. */\nexport const cratisDefaults: CratisComponentsConfig = {\n    locale: 'en-US',\n    messages: {\n        paginator: {\n            navigation: 'Pagination',\n            first: 'First page',\n            previous: 'Previous page',\n            next: 'Next page',\n            last: 'Last page',\n        },\n        datePicker: {\n            today: 'Today',\n            clear: 'Clear',\n            openCalendar: 'Open calendar',\n            previousMonth: 'Previous month',\n            nextMonth: 'Next month',\n            label: 'Date',\n        },\n        dropdown: {\n            showOptions: 'Show options',\n            clearSelection: 'Clear selection',\n        },\n        dialog: {\n            ok: 'Ok',\n            cancel: 'Cancel',\n            yes: 'Yes',\n            no: 'No',\n            close: 'Close',\n        },\n        stepper: {\n            next: 'Next',\n            previous: 'Previous',\n            submit: 'Submit',\n        },\n        notifications: {\n            dismiss: 'Dismiss',\n            region: 'Notifications',\n        },\n        dataTable: {\n            selectRow: 'Select row',\n            selectAllRows: 'Select all rows',\n            search: 'Search…',\n            searchAriaLabel: 'Search table',\n            loading: 'Loading…',\n            failed: 'Could not load data.',\n            unauthorized: 'You are not authorized to view this data.',\n        },\n        filter: {\n            label: 'Filters',\n            // Leave searchAriaLabel unset: existing placeholders remain search names by default.\n        },\n        columnFilter: {\n            matchModeAriaLabel: 'Match mode',\n            clear: 'Clear',\n            apply: 'Apply',\n            true: 'True',\n            false: 'False',\n        },\n        toolbar: {\n            label: 'Tools',\n        },\n    },\n};\n"],"names":[],"mappings":"AAMO,MAAM,cAAc,GAA2B;AAClD,IAAA,MAAM,EAAE,OAAO;AACf,IAAA,QAAQ,EAAE;AACN,QAAA,SAAS,EAAE;AACP,YAAA,UAAU,EAAE,YAAY;AACxB,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,QAAQ,EAAE,eAAe;AACzB,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,IAAI,EAAE,WAAW;AACpB,SAAA;AACD,QAAA,UAAU,EAAE;AACR,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,YAAY,EAAE,eAAe;AAC7B,YAAA,aAAa,EAAE,gBAAgB;AAC/B,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,KAAK,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,WAAW,EAAE,cAAc;AAC3B,YAAA,cAAc,EAAE,iBAAiB;AACpC,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,EAAE,EAAE,IAAI;AACR,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,EAAE,EAAE,IAAI;AACR,YAAA,KAAK,EAAE,OAAO;AACjB,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,MAAM,EAAE,QAAQ;AACnB,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,eAAe;AAC1B,SAAA;AACD,QAAA,SAAS,EAAE;AACP,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,aAAa,EAAE,iBAAiB;AAChC,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,eAAe,EAAE,cAAc;AAC/B,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,MAAM,EAAE,sBAAsB;AAC9B,YAAA,YAAY,EAAE,2CAA2C;AAC5D,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,KAAK,EAAE,SAAS;AAEnB,SAAA;AACD,QAAA,YAAY,EAAE;AACV,YAAA,kBAAkB,EAAE,YAAY;AAChC,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,OAAO;AACjB,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,KAAK,EAAE,OAAO;AACjB,SAAA;AACJ,KAAA;;;"}
+{"version":3,"file":"CratisComponentsDefaults.js","sources":["../../../configuration/CratisComponentsDefaults.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { CratisComponentsConfig } from '../Common/CratisComponentsProvider';\n\n/** Default locale and English Components messages. */\nexport const cratisDefaults: CratisComponentsConfig = {\n    locale: 'en-US',\n    messages: {\n        paginator: {\n            navigation: 'Pagination',\n            first: 'First page',\n            previous: 'Previous page',\n            next: 'Next page',\n            last: 'Last page',\n        },\n        datePicker: {\n            today: 'Today',\n            clear: 'Clear',\n            openCalendar: 'Open calendar',\n            previousMonth: 'Previous month',\n            nextMonth: 'Next month',\n            label: 'Date',\n        },\n        dropdown: {\n            showOptions: 'Show options',\n            clearSelection: 'Clear selection',\n        },\n        dialog: {\n            ok: 'Ok',\n            cancel: 'Cancel',\n            yes: 'Yes',\n            no: 'No',\n            close: 'Close',\n        },\n        stepper: {\n            next: 'Next',\n            previous: 'Previous',\n            submit: 'Submit',\n        },\n        notifications: {\n            dismiss: 'Dismiss',\n            region: 'Notifications',\n        },\n        dataTable: {\n            selectRow: 'Select row',\n            selectAllRows: 'Select all rows',\n            search: 'Search…',\n            searchAriaLabel: 'Search table',\n            loading: 'Loading…',\n            failed: 'Could not load data.',\n            unauthorized: 'You are not authorized to view this data.',\n        },\n        filter: {\n            label: 'Filters',\n            // Leave searchAriaLabel unset: existing placeholders remain search names by default.\n        },\n        columnFilter: {\n            matchModeAriaLabel: 'Match mode',\n            clear: 'Clear',\n            apply: 'Apply',\n            true: 'True',\n            false: 'False',\n        },\n        toolbar: {\n            label: 'Tools',\n            closeDrawer: 'Close',\n        },\n    },\n};\n"],"names":[],"mappings":"AAMO,MAAM,cAAc,GAA2B;AAClD,IAAA,MAAM,EAAE,OAAO;AACf,IAAA,QAAQ,EAAE;AACN,QAAA,SAAS,EAAE;AACP,YAAA,UAAU,EAAE,YAAY;AACxB,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,QAAQ,EAAE,eAAe;AACzB,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,IAAI,EAAE,WAAW;AACpB,SAAA;AACD,QAAA,UAAU,EAAE;AACR,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,YAAY,EAAE,eAAe;AAC7B,YAAA,aAAa,EAAE,gBAAgB;AAC/B,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,KAAK,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,WAAW,EAAE,cAAc;AAC3B,YAAA,cAAc,EAAE,iBAAiB;AACpC,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,EAAE,EAAE,IAAI;AACR,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,EAAE,EAAE,IAAI;AACR,YAAA,KAAK,EAAE,OAAO;AACjB,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,MAAM,EAAE,QAAQ;AACnB,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,eAAe;AAC1B,SAAA;AACD,QAAA,SAAS,EAAE;AACP,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,aAAa,EAAE,iBAAiB;AAChC,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,eAAe,EAAE,cAAc;AAC/B,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,MAAM,EAAE,sBAAsB;AAC9B,YAAA,YAAY,EAAE,2CAA2C;AAC5D,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,KAAK,EAAE,SAAS;AAEnB,SAAA;AACD,QAAA,YAAY,EAAE;AACV,YAAA,kBAAkB,EAAE,YAAY;AAChC,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,OAAO;AACjB,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,WAAW,EAAE,OAAO;AACvB,SAAA;AACJ,KAAA;;;"}