@frontify/guideline-blocks-settings 0.32.1 → 0.33.0

package/dist/index.d.ts

@@ -16,6 +16,7 @@ import { Color as Color_2 } from '@frontify/sidebar-settings';
 import type { ColorInputBlock as ColorInputBlock_2 } from '@frontify/sidebar-settings';
 import { ColorPalette } from '@frontify/app-bridge';
 import { CSSProperties } from 'react';
+import { Dispatch } from 'react';
 import type { Document as Document_2 } from '@frontify/app-bridge';
 import type { DocumentPage } from '@frontify/app-bridge';
 import type { DocumentSection } from '@frontify/app-bridge';
@@ -25,6 +26,7 @@ import type { DynamicSupportedBlock as DynamicSupportedBlock_2 } from '@frontify
 import type { FC } from 'react';
 import type { FileType } from '@frontify/app-bridge';
 import type { FontInputBlock as FontInputBlock_2 } from '@frontify/sidebar-settings';
+import { HTMLAttributes } from 'react';
 import type { InputBlock as InputBlock_2 } from '@frontify/sidebar-settings';
 import { InsertNodesOptions } from '@udecode/plate';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
@@ -35,6 +37,7 @@ import type { LinkChooserBlock as LinkChooserBlock_2 } from '@frontify/sidebar-s
 import { MarkupElement } from '@frontify/fondue';
 import { MenuItemStyle } from '@frontify/fondue';
 import type { MultiInputBlock as MultiInputBlock_2 } from '@frontify/sidebar-settings';
+import { MutableRefObject } from 'react';
 import type { NotificationBlock as NotificationBlock_2 } from '@frontify/sidebar-settings';
 import { Palette } from '@frontify/fondue';
 import { PlateEditor } from '@udecode/plate';
@@ -49,6 +52,7 @@ import type { SectionHeadingBlock as SectionHeadingBlock_2 } from '@frontify/sid
 import type { SegmentedControlsBlock as SegmentedControlsBlock_2 } from '@frontify/sidebar-settings';
 import { SensorDescriptor } from '@dnd-kit/core';
 import { SensorOptions } from '@dnd-kit/core';
+import { SetStateAction } from 'react';
 import type { SettingBlock as SettingBlock_2 } from '@frontify/sidebar-settings';
 import type { SimpleSettingBlock as SimpleSettingBlock_2 } from '@frontify/sidebar-settings';
 import type { SwitchBlock as SwitchBlock_2 } from '@frontify/sidebar-settings';
@@ -90,7 +94,7 @@ export declare type AttachmentsProps = {
     onUpload: (uploadedAttachments: Asset[]) => Promise<void>;
     onBrowse: (browserAttachments: Asset[]) => void;
     onSorted: (sortedAttachments: Asset[]) => void;
-    triggerComponent?: (props: AttachmentsTriggerProps) => JSX.Element;
+    triggerComponent?: (props: AttachmentsTriggerProps) => ReactElement;
 } & ({
     isOpen?: never;
     onOpenChange?: never;
@@ -105,9 +109,17 @@ export declare const AttachmentsProvider: ({ appBridge, children, assetId, }: {
     assetId: string;
 }) => JSX_2.Element;
 
+export declare const AttachmentsToolbarButton: ({ flyoutId, }: AttachmentsToolbarButtonProps) => JSX_2.Element;
+
+declare type AttachmentsToolbarButtonProps = {
+    flyoutId?: string;
+};
+
 export declare type AttachmentsTriggerProps = {
     children: ReactNode;
     isFlyoutOpen: boolean;
+    triggerProps: HTMLAttributes<HTMLButtonElement>;
+    triggerRef: MutableRefObject<HTMLButtonElement>;
 };
 
 declare type BackgroundSettingsType = {
@@ -121,11 +133,6 @@ declare type BackgroundSettingsType = {
 
 export declare type BaseBlock<T = undefined> = BaseBlock_2<AppBridgeBlock, T>;
 
-declare type BaseToolbarItem = {
-    icon: JSX.Element;
-    tooltip?: string;
-};
-
 export declare const BlockButtonStyles: Record<string, CSSProperties & {
     hover?: CSSProperties;
 }>;
@@ -180,14 +187,13 @@ export declare type BlockInjectButtonProps = {
     verticalLayout?: boolean;
 };
 
-export declare const BlockItemWrapper: ({ children, toolbarFlyoutItems, toolbarItems, shouldHideWrapper, shouldHideComponent, isDragging, shouldFillContainer, outlineOffset, shouldBeShown, showAttachments, }: BlockItemWrapperProps) => ReactElement;
+export declare const BlockItemWrapper: ({ children, toolbarItems, shouldHideWrapper, shouldHideComponent, isDragging, shouldFillContainer, outlineOffset, shouldBeShown, showAttachments, }: BlockItemWrapperProps) => ReactElement;
 
 export declare type BlockItemWrapperProps = {
     children: ReactNode;
     shouldHideWrapper?: boolean;
     shouldHideComponent?: boolean;
     toolbarItems: (ToolbarItem | undefined)[];
-    toolbarFlyoutItems: FlyoutToolbarItem[][];
     isDragging?: boolean;
     shouldFillContainer?: boolean;
     outlineOffset?: number;
@@ -335,9 +341,9 @@ export declare type ButtonPluginProps = Omit<PluginProps, 'styles'> & {
     appBridge: AppBridgeBlock;
 };
 
-declare type ButtonToolbarItem = BaseToolbarItem & {
-    onClick: () => void;
-};
+export declare type ButtonToolbarItem = {
+    type: 'button';
+} & ToolbarButtonProps;
 
 export declare type ChecklistBlock = ChecklistBlock_2<AppBridgeBlock>;
 
@@ -388,10 +394,14 @@ export declare class Custom3Plugin extends Plugin_2 {
 
 export declare const customCoordinatesGetterFactory: (columnGap: number, rowGap: number) => KeyboardCoordinateGetter;
 
+export declare const DEFAULT_ATTACHMENTS_BUTTON_ID = "attachments";
+
 export declare const DEFAULT_DRAG_TOOLTIP = "Drag or press \u21B5 to move";
 
 export declare const DEFAULT_DRAGGING_TOOLTIP = "Move with \u2191\u2193\u2190\u2192 and confirm with \u21B5";
 
+export declare const DEFAULT_MENU_BUTTON_ID = "menu";
+
 /**
  * Type helper to make it easier to export a theme, accepts a direct {@link BlockConfigExport} object.
  */
@@ -409,11 +419,24 @@ declare type DownloadButtonProps = {
     onDownload: () => void;
 };
 
-declare type DraghandleToolbarItem = BaseToolbarItem & {
+export declare const DragHandleToolbarButton: ({ tooltip, icon, setActivatorNodeRef, draggableProps, }: DragHandleToolbarButtonProps) => JSX_2.Element;
+
+export declare type DragHandleToolbarButtonProps = {
+    icon?: ReactNode;
+    tooltip?: string;
     draggableProps: Record<string, unknown>;
     setActivatorNodeRef?: (node: HTMLElement | null) => void;
 };
 
+export declare type DragHandleToolbarItem = {
+    type: 'dragHandle';
+} & DragHandleToolbarButtonProps;
+
+export declare const DragPreviewContextProvider: ({ children, isDragPreview, }: {
+    children: ReactNode;
+    isDragPreview: boolean;
+}) => JSX_2.Element;
+
 export declare type DropdownBlock = DropdownBlock_2<AppBridgeBlock>;
 
 export declare type DynamicSettingBlock<Block extends DynamicSupportedBlock = DynamicSupportedBlock> = DynamicSettingBlock_2<AppBridgeBlock, Block>;
@@ -422,13 +445,21 @@ export declare type DynamicSupportedBlock = DynamicSupportedBlock_2<AppBridgeBlo
 
 export declare const ELEMENT_BUTTON = "button";
 
-export declare type FlyoutToolbarItem = {
-    title: string;
-    onClick: () => void;
-    icon: JSX.Element;
-    style?: MenuItemStyle;
+export declare const FlyoutToolbarButton: ({ content, icon, tooltip, flyoutId, flyoutFooter, flyoutHeader, }: FlyoutToolbarButtonProps) => JSX_2.Element;
+
+export declare type FlyoutToolbarButtonProps = {
+    content: ReactNode;
+    icon: ReactNode;
+    tooltip: ReactNode;
+    flyoutId: string;
+    flyoutFooter?: ReactNode;
+    flyoutHeader?: ReactNode;
 };
 
+export declare type FlyoutToolbarItem = {
+    type: 'flyout';
+} & FlyoutToolbarButtonProps;
+
 export declare type FontInputBlock = FontInputBlock_2<AppBridgeBlock>;
 
 export declare const getBackgroundColorStyles: (backgroundColor: Color) => CSSProperties;
@@ -703,6 +734,18 @@ declare type MarginSettingsType_2 = {
 
 export declare const marginStyleMap: Record<Margin, string>;
 
+export declare const MenuToolbarButton: ({ items, flyoutId, tooltip, }: MenuToolbarButtonProps) => JSX_2.Element;
+
+export declare type MenuToolbarButtonProps = {
+    items: ToolbarFlyoutMenuItem[][];
+    flyoutId?: string;
+    tooltip?: string;
+};
+
+export declare type MenuToolbarItem = {
+    type: 'menu';
+} & MenuToolbarButtonProps;
+
 /**
  * Moves an item from the 'from' position to the 'to' position and updates the array
  *
@@ -713,6 +756,15 @@ export declare const marginStyleMap: Record<Margin, string>;
  */
 export declare const moveItemInArray: <T>(array: T[], from: number, to: number) => T[];
 
+export declare const MultiFlyoutContextProvider: ({ children, openFlyoutIds, setOpenFlyoutIds, }: {
+    children: ReactNode;
+} & MultiFlyoutContextType) => JSX_2.Element;
+
+export declare type MultiFlyoutContextType = {
+    openFlyoutIds: string[];
+    setOpenFlyoutIds: Dispatch<SetStateAction<string[]>>;
+};
+
 export declare type MultiInputBlock = MultiInputBlock_2<AppBridgeBlock>;
 
 export declare type NotificationBlock = NotificationBlock_2<AppBridgeBlock>;
@@ -940,24 +992,28 @@ export declare const toHex8String: (color: Color) => string;
  */
 export declare const toHexString: (color: Color) => string;
 
-export declare const Toolbar: ({ items, flyoutMenu, attachments, isDragging }: ToolbarProps) => JSX_2.Element;
+export declare const Toolbar: ({ items, attachments }: ToolbarProps) => JSX_2.Element;
 
-export declare type ToolbarFlyoutState = {
-    isOpen: boolean;
-    onOpenChange: (isOpen: boolean) => void;
+declare type ToolbarButtonProps = {
+    icon: JSX_2.Element;
+    tooltip?: string;
+    onClick: () => void;
 };
 
-export declare type ToolbarItem = DraghandleToolbarItem | ButtonToolbarItem;
+declare type ToolbarFlyoutMenuItem = {
+    title: string;
+    onClick: () => void;
+    icon: JSX_2.Element;
+    style?: MenuItemStyle;
+};
+
+export declare type ToolbarItem = DragHandleToolbarItem | ButtonToolbarItem | FlyoutToolbarItem | MenuToolbarItem;
 
 export declare type ToolbarProps = {
     items: ToolbarItem[];
-    flyoutMenu: ToolbarFlyoutState & {
-        items: FlyoutToolbarItem[][];
-    };
-    attachments: ToolbarFlyoutState & {
+    attachments: {
         isEnabled: boolean;
     };
-    isDragging?: boolean;
 };
 
 /**
@@ -1079,6 +1135,15 @@ export declare const useAttachmentsContext: () => {
 
 export declare const useDndSensors: (columnGap?: number, rowGap?: number) => SensorDescriptor<SensorOptions>[];
 
+export declare const useDragPreviewContext: () => boolean;
+
+export declare const useMultiFlyoutContext: () => MultiFlyoutContextType;
+
+export declare const useMultiFlyoutState: (flyoutId: string) => {
+    isOpen: boolean;
+    onOpenChange: (isFlyoutOpen: boolean) => void;
+};
+
 export declare type ValueOrPromisedValue<T> = ValueOrPromisedValue_2<AppBridgeBlock, T>;
 
 /**