@cratis/components 4.24.0 → 4.25.0

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;;;"}