canvu-react 0.4.62 → 0.4.63

package/dist/react.d.cts

@@ -169,6 +169,35 @@ type ImagesMenuLabels = {
     collapse?: string;
     expand?: string;
 };
+/**
+ * Button props passed to {@link ImagesMenuCollapsedButtonRenderProps.buttonProps}.
+ *
+ * Use this when you build a fully custom collapsed trigger for
+ * {@link ImagesMenu}. Spreading these props onto a `<button>` preserves the
+ * default accessibility label, `data-slot`, styles/className, and click handler
+ * that opens the images menu.
+ */
+type ImagesMenuCollapsedButtonProps = {
+    type: "button";
+    "data-slot": "images-menu-collapsed";
+    "aria-label": string;
+    title: string;
+    className?: string;
+    style: CSSProperties;
+    onClick: () => void;
+};
+type ImagesMenuCollapsedButtonRenderProps = {
+    /** Number of managed images currently available in the menu. */
+    count: number;
+    /** Accessible label used by the default collapsed trigger. */
+    label: string;
+    /**
+     * Props ready to spread onto a `<button>`.
+     * Spread these onto your custom trigger to keep the built-in accessibility
+     * label, `data-slot`, default styles/className, and open-menu behavior.
+     */
+    buttonProps: ImagesMenuCollapsedButtonProps;
+};
 type ImagesMenuProps = {
     items: readonly VectorSceneItem[];
     onItemsChange: (items: VectorSceneItem[]) => void;
@@ -183,6 +212,49 @@ type ImagesMenuProps = {
      * only the floating toggle button until the user opens it.
      */
     defaultOpen?: boolean;
+    /**
+     * Class name applied to the collapsed floating trigger.
+     *
+     * @example
+     * ```tsx
+     * <ImagesMenu
+     *   items={items}
+     *   onItemsChange={setItems}
+     *   collapsedButtonClassName="my-images-trigger"
+     * />
+     * ```
+     */
+    collapsedButtonClassName?: string;
+    /**
+     * Inline style merged over the default collapsed trigger style.
+     *
+     * @example
+     * ```tsx
+     * <ImagesMenu
+     *   items={items}
+     *   onItemsChange={setItems}
+     *   collapsedButtonStyle={{ borderRadius: 999 }}
+     * />
+     * ```
+     */
+    collapsedButtonStyle?: CSSProperties;
+    /**
+     * Replaces the collapsed trigger markup. Prefer `collapsedButtonClassName`
+     * or `collapsedButtonStyle` for styling-only changes; use this when you need
+     * different content or structure.
+     *
+     * @example
+     * ```tsx
+     * <ImagesMenu
+     *   items={items}
+     *   onItemsChange={setItems}
+     *   renderCollapsedButton={({ buttonProps, count }) => (
+     *     <button {...buttonProps}>Images ({count})</button>
+     *   )}
+     * />
+     * ```
+     */
+    renderCollapsedButton?: (props: ImagesMenuCollapsedButtonRenderProps) => ReactNode;
 };
 /**
  * Floating side panel that lists images marked as "managed"
@@ -190,7 +262,7 @@ type ImagesMenuProps = {
  * drag-to-reorder actions. Managed images are also `locked`, so they do not
  * respond to direct canvas interaction.
  */
-declare function ImagesMenu({ items, onItemsChange, onFocusItem, labels, defaultOpen, }: ImagesMenuProps): react_jsx_runtime.JSX.Element | null;
+declare function ImagesMenu({ items, onItemsChange, onFocusItem, labels, defaultOpen, collapsedButtonClassName, collapsedButtonStyle, renderCollapsedButton, }: ImagesMenuProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 
 type NavMenuMinimapProps = {
     className?: string;
@@ -731,4 +803,4 @@ type VectorToolbarWithStatics = ((props: VectorToolbarProps) => ReactElement) &
  */
 declare const VectorToolbar: VectorToolbarWithStatics;
 
-export { BoardComponentPosition, CanvasPlugin, type CreateLocalStoragePersistenceAdapterOptions, type CreateToolPluginOptions, CustomShapePlacementOptions, DEFAULT_OVERFLOW_TOOL_IDS, DEFAULT_VECTOR_CANVAS_STORAGE_KEY, DEFAULT_VECTOR_TOOLS, IconArchitecturalCloud, IconArrow, IconDraw, IconEllipse, IconHand, IconImage, IconLaser, IconLine, IconRect, IconSelect, IconText, ImagesMenu, type ImagesMenuLabels, type ImagesMenuProps, type IngestAssetFileError, type IngestAssetFilesToSceneItemsOptions, type IngestAssetFilesToSceneItemsResult, type IngestedAssetItemContext, NavMenu, type NavMenuMinimapProps, type NavMenuProps, type NavMenuUndoRedoProps, type NavMenuZoomControlsProps, ShapeContextMenu, type ShapeContextMenuProps, type UseVectorCanvasDocumentOptions, type UseVectorCanvasDocumentResult, VectorCanvas, VectorCanvasBody, VectorCanvasHeader, VectorCanvasMain, VectorCanvasPersistenceAdapter, VectorCanvasRemoteAdapter, VectorCanvasRoot, type VectorCanvasSlotProps, type VectorCanvasSpaceProps, VectorCanvasToolbar, type VectorCanvasToolbarProps, VectorCanvasViewportSurface, VectorSelectionInspector, VectorToolDefinition, VectorToolbar, type VectorToolbarOverflowProps, type VectorToolbarProps, type VectorToolbarRenderContext, type VectorToolbarToolLockProps, type VectorToolbarToolProps, VectorViewportAssetKind, VectorViewportAssetStore, createIndexedDbPersistenceAdapter, createLocalStoragePersistenceAdapter, createNoopPersistenceAdapter, createToolPlugin, cursorForVectorToolId, ingestAssetFilesToSceneItems, useVectorCanvasDocument };
+export { BoardComponentPosition, CanvasPlugin, type CreateLocalStoragePersistenceAdapterOptions, type CreateToolPluginOptions, CustomShapePlacementOptions, DEFAULT_OVERFLOW_TOOL_IDS, DEFAULT_VECTOR_CANVAS_STORAGE_KEY, DEFAULT_VECTOR_TOOLS, IconArchitecturalCloud, IconArrow, IconDraw, IconEllipse, IconHand, IconImage, IconLaser, IconLine, IconRect, IconSelect, IconText, ImagesMenu, type ImagesMenuCollapsedButtonProps, type ImagesMenuCollapsedButtonRenderProps, type ImagesMenuLabels, type ImagesMenuProps, type IngestAssetFileError, type IngestAssetFilesToSceneItemsOptions, type IngestAssetFilesToSceneItemsResult, type IngestedAssetItemContext, NavMenu, type NavMenuMinimapProps, type NavMenuProps, type NavMenuUndoRedoProps, type NavMenuZoomControlsProps, ShapeContextMenu, type ShapeContextMenuProps, type UseVectorCanvasDocumentOptions, type UseVectorCanvasDocumentResult, VectorCanvas, VectorCanvasBody, VectorCanvasHeader, VectorCanvasMain, VectorCanvasPersistenceAdapter, VectorCanvasRemoteAdapter, VectorCanvasRoot, type VectorCanvasSlotProps, type VectorCanvasSpaceProps, VectorCanvasToolbar, type VectorCanvasToolbarProps, VectorCanvasViewportSurface, VectorSelectionInspector, VectorToolDefinition, VectorToolbar, type VectorToolbarOverflowProps, type VectorToolbarProps, type VectorToolbarRenderContext, type VectorToolbarToolLockProps, type VectorToolbarToolProps, VectorViewportAssetKind, VectorViewportAssetStore, createIndexedDbPersistenceAdapter, createLocalStoragePersistenceAdapter, createNoopPersistenceAdapter, createToolPlugin, cursorForVectorToolId, ingestAssetFilesToSceneItems, useVectorCanvasDocument };

package/dist/react.d.ts

@@ -169,6 +169,35 @@ type ImagesMenuLabels = {
     collapse?: string;
     expand?: string;
 };
+/**
+ * Button props passed to {@link ImagesMenuCollapsedButtonRenderProps.buttonProps}.
+ *
+ * Use this when you build a fully custom collapsed trigger for
+ * {@link ImagesMenu}. Spreading these props onto a `<button>` preserves the
+ * default accessibility label, `data-slot`, styles/className, and click handler
+ * that opens the images menu.
+ */
+type ImagesMenuCollapsedButtonProps = {
+    type: "button";
+    "data-slot": "images-menu-collapsed";
+    "aria-label": string;
+    title: string;
+    className?: string;
+    style: CSSProperties;
+    onClick: () => void;
+};
+type ImagesMenuCollapsedButtonRenderProps = {
+    /** Number of managed images currently available in the menu. */
+    count: number;
+    /** Accessible label used by the default collapsed trigger. */
+    label: string;
+    /**
+     * Props ready to spread onto a `<button>`.
+     * Spread these onto your custom trigger to keep the built-in accessibility
+     * label, `data-slot`, default styles/className, and open-menu behavior.
+     */
+    buttonProps: ImagesMenuCollapsedButtonProps;
+};
 type ImagesMenuProps = {
     items: readonly VectorSceneItem[];
     onItemsChange: (items: VectorSceneItem[]) => void;
@@ -183,6 +212,49 @@ type ImagesMenuProps = {
      * only the floating toggle button until the user opens it.
      */
     defaultOpen?: boolean;
+    /**
+     * Class name applied to the collapsed floating trigger.
+     *
+     * @example
+     * ```tsx
+     * <ImagesMenu
+     *   items={items}
+     *   onItemsChange={setItems}
+     *   collapsedButtonClassName="my-images-trigger"
+     * />
+     * ```
+     */
+    collapsedButtonClassName?: string;
+    /**
+     * Inline style merged over the default collapsed trigger style.
+     *
+     * @example
+     * ```tsx
+     * <ImagesMenu
+     *   items={items}
+     *   onItemsChange={setItems}
+     *   collapsedButtonStyle={{ borderRadius: 999 }}
+     * />
+     * ```
+     */
+    collapsedButtonStyle?: CSSProperties;
+    /**
+     * Replaces the collapsed trigger markup. Prefer `collapsedButtonClassName`
+     * or `collapsedButtonStyle` for styling-only changes; use this when you need
+     * different content or structure.
+     *
+     * @example
+     * ```tsx
+     * <ImagesMenu
+     *   items={items}
+     *   onItemsChange={setItems}
+     *   renderCollapsedButton={({ buttonProps, count }) => (
+     *     <button {...buttonProps}>Images ({count})</button>
+     *   )}
+     * />
+     * ```
+     */
+    renderCollapsedButton?: (props: ImagesMenuCollapsedButtonRenderProps) => ReactNode;
 };
 /**
  * Floating side panel that lists images marked as "managed"
@@ -190,7 +262,7 @@ type ImagesMenuProps = {
  * drag-to-reorder actions. Managed images are also `locked`, so they do not
  * respond to direct canvas interaction.
  */
-declare function ImagesMenu({ items, onItemsChange, onFocusItem, labels, defaultOpen, }: ImagesMenuProps): react_jsx_runtime.JSX.Element | null;
+declare function ImagesMenu({ items, onItemsChange, onFocusItem, labels, defaultOpen, collapsedButtonClassName, collapsedButtonStyle, renderCollapsedButton, }: ImagesMenuProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 
 type NavMenuMinimapProps = {
     className?: string;
@@ -731,4 +803,4 @@ type VectorToolbarWithStatics = ((props: VectorToolbarProps) => ReactElement) &
  */
 declare const VectorToolbar: VectorToolbarWithStatics;
 
-export { BoardComponentPosition, CanvasPlugin, type CreateLocalStoragePersistenceAdapterOptions, type CreateToolPluginOptions, CustomShapePlacementOptions, DEFAULT_OVERFLOW_TOOL_IDS, DEFAULT_VECTOR_CANVAS_STORAGE_KEY, DEFAULT_VECTOR_TOOLS, IconArchitecturalCloud, IconArrow, IconDraw, IconEllipse, IconHand, IconImage, IconLaser, IconLine, IconRect, IconSelect, IconText, ImagesMenu, type ImagesMenuLabels, type ImagesMenuProps, type IngestAssetFileError, type IngestAssetFilesToSceneItemsOptions, type IngestAssetFilesToSceneItemsResult, type IngestedAssetItemContext, NavMenu, type NavMenuMinimapProps, type NavMenuProps, type NavMenuUndoRedoProps, type NavMenuZoomControlsProps, ShapeContextMenu, type ShapeContextMenuProps, type UseVectorCanvasDocumentOptions, type UseVectorCanvasDocumentResult, VectorCanvas, VectorCanvasBody, VectorCanvasHeader, VectorCanvasMain, VectorCanvasPersistenceAdapter, VectorCanvasRemoteAdapter, VectorCanvasRoot, type VectorCanvasSlotProps, type VectorCanvasSpaceProps, VectorCanvasToolbar, type VectorCanvasToolbarProps, VectorCanvasViewportSurface, VectorSelectionInspector, VectorToolDefinition, VectorToolbar, type VectorToolbarOverflowProps, type VectorToolbarProps, type VectorToolbarRenderContext, type VectorToolbarToolLockProps, type VectorToolbarToolProps, VectorViewportAssetKind, VectorViewportAssetStore, createIndexedDbPersistenceAdapter, createLocalStoragePersistenceAdapter, createNoopPersistenceAdapter, createToolPlugin, cursorForVectorToolId, ingestAssetFilesToSceneItems, useVectorCanvasDocument };
+export { BoardComponentPosition, CanvasPlugin, type CreateLocalStoragePersistenceAdapterOptions, type CreateToolPluginOptions, CustomShapePlacementOptions, DEFAULT_OVERFLOW_TOOL_IDS, DEFAULT_VECTOR_CANVAS_STORAGE_KEY, DEFAULT_VECTOR_TOOLS, IconArchitecturalCloud, IconArrow, IconDraw, IconEllipse, IconHand, IconImage, IconLaser, IconLine, IconRect, IconSelect, IconText, ImagesMenu, type ImagesMenuCollapsedButtonProps, type ImagesMenuCollapsedButtonRenderProps, type ImagesMenuLabels, type ImagesMenuProps, type IngestAssetFileError, type IngestAssetFilesToSceneItemsOptions, type IngestAssetFilesToSceneItemsResult, type IngestedAssetItemContext, NavMenu, type NavMenuMinimapProps, type NavMenuProps, type NavMenuUndoRedoProps, type NavMenuZoomControlsProps, ShapeContextMenu, type ShapeContextMenuProps, type UseVectorCanvasDocumentOptions, type UseVectorCanvasDocumentResult, VectorCanvas, VectorCanvasBody, VectorCanvasHeader, VectorCanvasMain, VectorCanvasPersistenceAdapter, VectorCanvasRemoteAdapter, VectorCanvasRoot, type VectorCanvasSlotProps, type VectorCanvasSpaceProps, VectorCanvasToolbar, type VectorCanvasToolbarProps, VectorCanvasViewportSurface, VectorSelectionInspector, VectorToolDefinition, VectorToolbar, type VectorToolbarOverflowProps, type VectorToolbarProps, type VectorToolbarRenderContext, type VectorToolbarToolLockProps, type VectorToolbarToolProps, VectorViewportAssetKind, VectorViewportAssetStore, createIndexedDbPersistenceAdapter, createLocalStoragePersistenceAdapter, createNoopPersistenceAdapter, createToolPlugin, cursorForVectorToolId, ingestAssetFilesToSceneItems, useVectorCanvasDocument };

package/dist/react.js

@@ -2112,7 +2112,7 @@ var collapseButtonStyle = {
   cursor: "pointer",
   padding: 0
 };
-var collapsedButtonStyle = {
+var defaultCollapsedButtonStyle = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -2141,7 +2141,10 @@ function ImagesMenu({
   onItemsChange,
   onFocusItem,
   labels,
-  defaultOpen = false
+  defaultOpen = false,
+  collapsedButtonClassName,
+  collapsedButtonStyle,
+  renderCollapsedButton
 }) {
   const managed = useMemo(() => items.filter(isManagedImage), [items]);
   const sensors = useSensors(
@@ -2162,18 +2165,26 @@ function ImagesMenu({
     duplicate: labels?.duplicate ?? labels?.copy ?? defaultLabels.duplicate
   };
   if (collapsed) {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "data-slot": "images-menu-collapsed",
-        style: collapsedButtonStyle,
-        "aria-label": resolvedLabels.expand,
-        title: resolvedLabels.expand,
-        onClick: () => setCollapsed(false),
-        children: /* @__PURE__ */ jsx(Images, { size: 20 })
-      }
-    );
+    const buttonProps = {
+      type: "button",
+      "data-slot": "images-menu-collapsed",
+      className: collapsedButtonClassName,
+      style: {
+        ...defaultCollapsedButtonStyle,
+        ...collapsedButtonStyle ?? {}
+      },
+      "aria-label": resolvedLabels.expand,
+      title: resolvedLabels.expand,
+      onClick: () => setCollapsed(false)
+    };
+    if (renderCollapsedButton) {
+      return renderCollapsedButton({
+        count: managed.length,
+        label: resolvedLabels.expand,
+        buttonProps
+      });
+    }
+    return /* @__PURE__ */ jsx("button", { ...buttonProps, children: /* @__PURE__ */ jsx(Images, { size: 20 }) });
   }
   const onDragEnd = (event) => {
     const { active, over } = event;