@excalidraw/excalidraw 0.15.2-2a4799d → 0.15.2-6213-0f92339

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/excalidraw.development.js +368 -137
  3. package/dist/excalidraw.production.min.js +1 -1
  4. package/package.json +1 -1
  5. package/types/actions/actionAddToLibrary.d.ts +15 -6
  6. package/types/actions/actionBoundText.d.ts +10 -4
  7. package/types/actions/actionCanvas.d.ts +50 -20
  8. package/types/actions/actionClipboard.d.ts +25 -10
  9. package/types/actions/actionDeleteSelected.d.ts +15 -6
  10. package/types/actions/actionExport.d.ts +45 -18
  11. package/types/actions/actionFinalize.d.ts +10 -4
  12. package/types/actions/actionLinearEditor.d.ts +5 -2
  13. package/types/actions/actionMenu.d.ts +15 -6
  14. package/types/actions/actionProperties.d.ts +65 -26
  15. package/types/actions/actionStyles.d.ts +5 -2
  16. package/types/actions/actionToggleGridMode.d.ts +5 -2
  17. package/types/actions/actionToggleLock.d.ts +5 -2
  18. package/types/actions/actionToggleStats.d.ts +5 -2
  19. package/types/actions/actionToggleViewMode.d.ts +5 -2
  20. package/types/actions/actionToggleZenMode.d.ts +5 -2
  21. package/types/appState.d.ts +5 -2
  22. package/types/clipboard.d.ts +2 -2
  23. package/types/components/App.d.ts +10 -3
  24. package/types/components/Button.d.ts +3 -1
  25. package/types/components/DefaultSidebar.d.ts +30 -0
  26. package/types/components/LayerUI.d.ts +1 -8
  27. package/types/components/LibraryMenu.d.ts +29 -10
  28. package/types/components/LibraryMenuControlButtons.d.ts +9 -0
  29. package/types/components/LibraryMenuHeaderContent.d.ts +7 -26
  30. package/types/components/PasteChartDialog.d.ts +2 -3
  31. package/types/components/Sidebar/Sidebar.d.ts +68 -45
  32. package/types/components/Sidebar/SidebarHeader.d.ts +6 -19
  33. package/types/components/Sidebar/SidebarTab.d.ts +9 -0
  34. package/types/components/Sidebar/SidebarTabTrigger.d.ts +10 -0
  35. package/types/components/Sidebar/SidebarTabTriggers.d.ts +7 -0
  36. package/types/components/Sidebar/SidebarTabs.d.ts +7 -0
  37. package/types/components/Sidebar/SidebarTrigger.d.ts +6 -0
  38. package/types/components/Sidebar/common.d.ts +23 -6
  39. package/types/components/main-menu/MainMenu.d.ts +3 -1
  40. package/types/constants.d.ts +23 -6
  41. package/types/context/tunnels.d.ts +18 -0
  42. package/types/context/ui-appState.d.ts +4 -0
  43. package/types/data/blob.d.ts +2 -2
  44. package/types/data/filesystem.d.ts +2 -1
  45. package/types/data/types.d.ts +2 -4
  46. package/types/element/Hyperlink.d.ts +5 -2
  47. package/types/element/image.d.ts +11 -1
  48. package/types/element/linearElementEditor.d.ts +5 -2
  49. package/types/element/newElement.d.ts +6 -1
  50. package/types/element/textElement.d.ts +2 -2
  51. package/types/hooks/useOutsideClick.d.ts +1 -1
  52. package/types/packages/excalidraw/index.d.ts +1 -0
  53. package/types/types.d.ts +21 -11
  54. package/types/utils.d.ts +1 -1
  55. package/types/components/LibraryButton.d.ts +0 -8
  56. package/types/components/context/tunnels.d.ts +0 -16
  57. package/types/components/hoc/withUpstreamOverride.d.ts +0 -10
@@ -1,11 +1,14 @@
1
- /// <reference types="react" />
1
+ import React from "react";
2
2
  import "./Sidebar.scss";
3
- /** using a counter instead of boolean to handle race conditions where
4
- * the host app may render (mount/unmount) multiple different sidebar */
5
- export declare const hostSidebarCountersAtom: import("jotai").Atom<{
6
- rendered: number;
7
- docked: number;
8
- }> & {
3
+ /**
4
+ * Flags whether the currently rendered Sidebar is docked or not, for use
5
+ * in upstream components that need to act on this (e.g. LayerUI to shift the
6
+ * UI). We use an atom because of potential host app sidebars (for the default
7
+ * sidebar we could just read from appState.defaultSidebarDockedPreference).
8
+ *
9
+ * Since we can only render one Sidebar at a time, we can use a simple flag.
10
+ */
11
+ export declare const isSidebarDockedAtom: import("jotai").Atom<boolean> & {
9
12
  write: (get: {
10
13
  <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
11
14
  <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
@@ -23,51 +26,71 @@ export declare const hostSidebarCountersAtom: import("jotai").Atom<{
23
26
  }, set: {
24
27
  <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
25
28
  <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
26
- }, update: {
27
- rendered: number;
28
- docked: number;
29
- } | ((prev: {
30
- rendered: number;
31
- docked: number;
32
- }) => {
33
- rendered: number;
34
- docked: number;
35
- })) => void;
36
- onMount?: (<S extends (update: {
37
- rendered: number;
38
- docked: number;
39
- } | ((prev: {
40
- rendered: number;
41
- docked: number;
42
- }) => {
43
- rendered: number;
44
- docked: number;
45
- })) => void>(setAtom: S) => void | (() => void)) | undefined;
29
+ }, update: boolean | ((prev: boolean) => boolean)) => void;
30
+ onMount?: (<S extends (update: boolean | ((prev: boolean) => boolean)) => void>(setAtom: S) => void | (() => void)) | undefined;
46
31
  } & {
47
- init: {
48
- rendered: number;
49
- docked: number;
50
- };
32
+ init: boolean;
51
33
  };
52
- export declare const Sidebar: import("react").ForwardRefExoticComponent<{
53
- children: import("react").ReactNode;
54
- onClose?: (() => boolean | void) | undefined;
34
+ export declare const SidebarInner: React.ForwardRefExoticComponent<Pick<{
35
+ name: string;
36
+ children: React.ReactNode;
37
+ onStateChange?: ((state: {
38
+ name: string;
39
+ tab?: string | undefined;
40
+ } | null) => void) | undefined;
55
41
  onDock?: ((docked: boolean) => void) | undefined;
56
42
  docked?: boolean | undefined;
57
- initialDockedState?: boolean | undefined;
58
- dockable?: boolean | undefined;
59
43
  className?: string | undefined;
60
- } & {
61
- /** @private internal */
62
- __isInternal?: boolean | undefined;
63
- } & import("react").RefAttributes<HTMLDivElement>> & {
44
+ __fallback?: boolean | undefined;
45
+ } & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">, "className" | "name" | "children" | "key" | "onDock" | "docked" | "onStateChange" | "__fallback"> & React.RefAttributes<HTMLDivElement>>;
46
+ export declare const Sidebar: React.ForwardRefExoticComponent<{
47
+ name: string;
48
+ children: React.ReactNode;
49
+ onStateChange?: ((state: {
50
+ name: string;
51
+ tab?: string | undefined;
52
+ } | null) => void) | undefined;
53
+ onDock?: ((docked: boolean) => void) | undefined;
54
+ docked?: boolean | undefined;
55
+ className?: string | undefined;
56
+ __fallback?: boolean | undefined;
57
+ } & React.RefAttributes<HTMLDivElement>> & {
64
58
  Header: {
65
- (props: {
66
- children?: import("react").ReactNode;
59
+ ({ children, className, }: {
60
+ children?: React.ReactNode;
67
61
  className?: string | undefined;
68
- } & {
69
- __isFallback?: boolean | undefined;
70
- }): JSX.Element | null;
62
+ }): JSX.Element;
63
+ displayName: string;
64
+ };
65
+ TabTriggers: {
66
+ ({ children, ...rest }: {
67
+ children: React.ReactNode;
68
+ } & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">): JSX.Element;
69
+ displayName: string;
70
+ };
71
+ TabTrigger: {
72
+ ({ children, tab, onSelect, ...rest }: {
73
+ children: React.ReactNode;
74
+ tab: string;
75
+ onSelect?: React.ReactEventHandler<HTMLButtonElement> | undefined;
76
+ } & Omit<React.HTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
77
+ displayName: string;
78
+ };
79
+ Tabs: {
80
+ ({ children, ...rest }: {
81
+ children: React.ReactNode;
82
+ } & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">): JSX.Element | null;
83
+ displayName: string;
84
+ };
85
+ Tab: {
86
+ ({ tab, children, ...rest }: {
87
+ tab: string;
88
+ children: React.ReactNode;
89
+ } & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
90
+ displayName: string;
91
+ };
92
+ Trigger: {
93
+ ({ name, tab, icon, title, children, onToggle, className, style, }: import("./common").SidebarTriggerProps): JSX.Element;
71
94
  displayName: string;
72
95
  };
73
96
  };
@@ -1,20 +1,7 @@
1
- /// <reference types="react" />
2
- export declare const SidebarDockButton: (props: {
3
- checked: boolean;
4
- onChange?(): void;
5
- }) => JSX.Element;
6
- /** @private */
7
- export declare const SidebarHeaderComponents: {
8
- Context: import("react").FC<{
9
- children: import("react").ReactNode;
10
- }>;
11
- Component: {
12
- (props: {
13
- children?: React.ReactNode;
14
- className?: string | undefined;
15
- } & {
16
- __isFallback?: boolean | undefined;
17
- }): JSX.Element | null;
18
- displayName: string;
19
- };
1
+ export declare const SidebarHeader: {
2
+ ({ children, className, }: {
3
+ children?: React.ReactNode;
4
+ className?: string | undefined;
5
+ }): JSX.Element;
6
+ displayName: string;
20
7
  };
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ import { SidebarTabName } from "../../types";
3
+ export declare const SidebarTab: {
4
+ ({ tab, children, ...rest }: {
5
+ tab: SidebarTabName;
6
+ children: React.ReactNode;
7
+ } & import("react").HTMLAttributes<HTMLDivElement>): JSX.Element;
8
+ displayName: string;
9
+ };
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ import { SidebarTabName } from "../../types";
3
+ export declare const SidebarTabTrigger: {
4
+ ({ children, tab, onSelect, ...rest }: {
5
+ children: React.ReactNode;
6
+ tab: SidebarTabName;
7
+ onSelect?: React.ReactEventHandler<HTMLButtonElement> | undefined;
8
+ } & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
9
+ displayName: string;
10
+ };
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ export declare const SidebarTabTriggers: {
3
+ ({ children, ...rest }: {
4
+ children: React.ReactNode;
5
+ } & Omit<import("react").RefAttributes<HTMLDivElement>, "onSelect">): JSX.Element;
6
+ displayName: string;
7
+ };
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ export declare const SidebarTabs: {
3
+ ({ children, ...rest }: {
4
+ children: React.ReactNode;
5
+ } & Omit<import("react").RefAttributes<HTMLDivElement>, "onSelect">): JSX.Element | null;
6
+ displayName: string;
7
+ };
@@ -0,0 +1,6 @@
1
+ import { SidebarTriggerProps } from "./common";
2
+ import "./SidebarTrigger.scss";
3
+ export declare const SidebarTrigger: {
4
+ ({ name, tab, icon, title, children, onToggle, className, style, }: SidebarTriggerProps): JSX.Element;
5
+ displayName: string;
6
+ };
@@ -1,16 +1,33 @@
1
1
  import React from "react";
2
+ import { AppState, SidebarName, SidebarTabName } from "../../types";
3
+ export declare type SidebarTriggerProps = {
4
+ name: SidebarName;
5
+ tab?: SidebarTabName;
6
+ icon?: JSX.Element;
7
+ children?: React.ReactNode;
8
+ title?: string;
9
+ className?: string;
10
+ onToggle?: (open: boolean) => void;
11
+ style?: React.CSSProperties;
12
+ };
2
13
  export declare type SidebarProps<P = {}> = {
14
+ name: SidebarName;
3
15
  children: React.ReactNode;
4
16
  /**
5
- * Called on sidebar close (either by user action or by the editor).
17
+ * Called on sidebar open/close or tab change.
18
+ */
19
+ onStateChange?: (state: AppState["openSidebar"]) => void;
20
+ /**
21
+ * supply alongside `docked` prop in order to make the Sidebar user-dockable
6
22
  */
7
- onClose?: () => void | boolean;
8
- /** if not supplied, sidebar won't be dockable */
9
23
  onDock?: (docked: boolean) => void;
10
24
  docked?: boolean;
11
- initialDockedState?: boolean;
12
- dockable?: boolean;
13
25
  className?: string;
26
+ /** @private internal */
27
+ __fallback?: boolean;
14
28
  } & P;
15
- export declare type SidebarPropsContextValue = Pick<SidebarProps, "onClose" | "onDock" | "docked" | "dockable">;
29
+ export declare type SidebarPropsContextValue = Pick<SidebarProps, "onDock" | "docked"> & {
30
+ onCloseRequest: () => void;
31
+ shouldRenderDockButton: boolean;
32
+ };
16
33
  export declare const SidebarPropsContext: React.Context<SidebarPropsContextValue>;
@@ -7,7 +7,9 @@ declare const MainMenu: React.FC<{
7
7
  */
8
8
  onSelect?: ((event: Event) => void) | undefined;
9
9
  } & {
10
- __fallback?: boolean | undefined;
10
+ __fallback?: boolean | undefined; /**
11
+ * Called when any menu item is selected (clicked on).
12
+ */
11
13
  }> & {
12
14
  Trigger: {
13
15
  ({ className, children, onToggle, }: {
@@ -82,19 +82,32 @@ export declare const DEFAULT_VERTICAL_ALIGN = "top";
82
82
  export declare const DEFAULT_VERSION = "{version}";
83
83
  export declare const CANVAS_ONLY_ACTIONS: string[];
84
84
  export declare const GRID_SIZE = 20;
85
+ export declare const IMAGE_MIME_TYPES: {
86
+ readonly svg: "image/svg+xml";
87
+ readonly png: "image/png";
88
+ readonly jpg: "image/jpeg";
89
+ readonly gif: "image/gif";
90
+ readonly webp: "image/webp";
91
+ readonly bmp: "image/bmp";
92
+ readonly ico: "image/x-icon";
93
+ readonly avif: "image/avif";
94
+ readonly jfif: "image/jfif";
95
+ };
85
96
  export declare const MIME_TYPES: {
86
- readonly excalidraw: "application/vnd.excalidraw+json";
87
- readonly excalidrawlib: "application/vnd.excalidrawlib+json";
88
- readonly json: "application/json";
89
97
  readonly svg: "image/svg+xml";
90
- readonly "excalidraw.svg": "image/svg+xml";
91
98
  readonly png: "image/png";
92
- readonly "excalidraw.png": "image/png";
93
99
  readonly jpg: "image/jpeg";
94
100
  readonly gif: "image/gif";
95
101
  readonly webp: "image/webp";
96
102
  readonly bmp: "image/bmp";
97
103
  readonly ico: "image/x-icon";
104
+ readonly avif: "image/avif";
105
+ readonly jfif: "image/jfif";
106
+ readonly json: "application/json";
107
+ readonly excalidraw: "application/vnd.excalidraw+json";
108
+ readonly excalidrawlib: "application/vnd.excalidrawlib+json";
109
+ readonly "excalidraw.svg": "image/svg+xml";
110
+ readonly "excalidraw.png": "image/png";
98
111
  readonly binary: "application/octet-stream";
99
112
  };
100
113
  export declare const EXPORT_DATA_TYPES: {
@@ -132,7 +145,6 @@ export declare const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
132
145
  export declare const EXPORT_SCALES: number[];
133
146
  export declare const DEFAULT_EXPORT_PADDING = 10;
134
147
  export declare const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
135
- export declare const ALLOWED_IMAGE_MIME_TYPES: readonly ["image/png", "image/jpeg", "image/svg+xml", "image/gif", "image/webp", "image/bmp", "image/x-icon"];
136
148
  export declare const MAX_ALLOWED_FILE_BYTES: number;
137
149
  export declare const SVG_NS = "http://www.w3.org/2000/svg";
138
150
  export declare const ENCRYPTION_KEY_BITS = 128;
@@ -172,3 +184,8 @@ export declare const DEFAULT_ELEMENT_PROPS: {
172
184
  opacity: ExcalidrawElement["opacity"];
173
185
  locked: ExcalidrawElement["locked"];
174
186
  };
187
+ export declare const LIBRARY_SIDEBAR_TAB = "library";
188
+ export declare const DEFAULT_SIDEBAR: {
189
+ readonly name: "default";
190
+ readonly defaultTab: "library";
191
+ };
@@ -0,0 +1,18 @@
1
+ import React from "react";
2
+ import tunnel from "tunnel-rat";
3
+ export declare type Tunnel = ReturnType<typeof tunnel>;
4
+ declare type TunnelsContextValue = {
5
+ MainMenuTunnel: Tunnel;
6
+ WelcomeScreenMenuHintTunnel: Tunnel;
7
+ WelcomeScreenToolbarHintTunnel: Tunnel;
8
+ WelcomeScreenHelpHintTunnel: Tunnel;
9
+ WelcomeScreenCenterTunnel: Tunnel;
10
+ FooterCenterTunnel: Tunnel;
11
+ DefaultSidebarTriggerTunnel: Tunnel;
12
+ DefaultSidebarTabTriggersTunnel: Tunnel;
13
+ jotaiScope: symbol;
14
+ };
15
+ export declare const TunnelsContext: React.Context<TunnelsContextValue>;
16
+ export declare const useTunnels: () => TunnelsContextValue;
17
+ export declare const useInitializeTunnels: () => TunnelsContextValue;
18
+ export {};
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import { AppState } from "../types";
3
+ export declare const UIAppStateContext: React.Context<AppState>;
4
+ export declare const useUIAppState: () => AppState;
@@ -1,4 +1,4 @@
1
- import { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
1
+ import { IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
2
2
  import { ExcalidrawElement, FileId } from "../element/types";
3
3
  import { AppState, DataURL, LibraryItem } from "../types";
4
4
  import { ValueOf } from "../utility-types";
@@ -9,7 +9,7 @@ export declare const getFileHandleType: (handle: FileSystemHandle | null) => str
9
9
  export declare const isImageFileHandleType: (type: string | null) => type is "svg" | "png";
10
10
  export declare const isImageFileHandle: (handle: FileSystemHandle | null) => boolean;
11
11
  export declare const isSupportedImageFile: (blob: Blob | null | undefined) => blob is Blob & {
12
- type: (typeof ALLOWED_IMAGE_MIME_TYPES)[number];
12
+ type: ValueOf<typeof IMAGE_MIME_TYPES>;
13
13
  };
14
14
  export declare const loadSceneOrLibraryFromBlob: (blob: Blob | File, localAppState: AppState | null, localElements: readonly ExcalidrawElement[] | null, fileHandle?: FileSystemHandle | null) => Promise<{
15
15
  type: "application/vnd.excalidraw+json";
@@ -1,5 +1,6 @@
1
1
  import { FileSystemHandle, supported as nativeFileSystemSupported } from "browser-fs-access";
2
- declare type FILE_EXTENSION = "gif" | "jpg" | "png" | "excalidraw.png" | "svg" | "excalidraw.svg" | "json" | "excalidraw" | "excalidrawlib";
2
+ import { MIME_TYPES } from "../constants";
3
+ declare type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
3
4
  export declare const fileOpen: <M extends boolean | undefined = false>(opts: {
4
5
  extensions?: FILE_EXTENSION[] | undefined;
5
6
  description: string;
@@ -18,10 +18,8 @@ export interface ExportedDataState {
18
18
  * Don't consume on its own.
19
19
  */
20
20
  export declare type LegacyAppState = {
21
- /** @deprecated #5663 TODO remove 22-12-15 */
22
- isLibraryOpen: [boolean, "openSidebar"];
23
- /** @deprecated #5663 TODO remove 22-12-15 */
24
- isLibraryMenuDocked: [boolean, "isSidebarDocked"];
21
+ /** @deprecated #6213 TODO remove 23-06-01 */
22
+ isSidebarDocked: [boolean, "defaultSidebarDockedPreference"];
25
23
  };
26
24
  export interface ImportedDataState {
27
25
  type?: string;
@@ -76,9 +76,12 @@ export declare const actionLink: {
76
76
  value: import("../types").NormalizedZoomValue;
77
77
  }>;
78
78
  openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
79
- openSidebar: "library" | "customSidebar" | null;
79
+ openSidebar: {
80
+ name: string;
81
+ tab?: string | undefined;
82
+ } | null;
80
83
  openDialog: "imageExport" | "help" | "jsonExport" | null;
81
- isSidebarDocked: boolean;
84
+ defaultSidebarDockedPreference: boolean;
82
85
  lastPointerDownWith: import("./types").PointerType;
83
86
  selectedElementIds: {
84
87
  [id: string]: boolean;
@@ -10,7 +10,17 @@ export declare const updateImageCache: ({ fileIds, files, imageCache, }: {
10
10
  }) => Promise<{
11
11
  imageCache: Map<FileId, {
12
12
  image: HTMLImageElement | Promise<HTMLImageElement>;
13
- mimeType: "image/svg+xml" | "image/png" | "image/jpeg" | "image/gif" | "image/webp" | "image/bmp" | "image/x-icon";
13
+ mimeType: import("../utility-types").ValueOf<{
14
+ readonly svg: "image/svg+xml";
15
+ readonly png: "image/png";
16
+ readonly jpg: "image/jpeg";
17
+ readonly gif: "image/gif";
18
+ readonly webp: "image/webp";
19
+ readonly bmp: "image/bmp";
20
+ readonly ico: "image/x-icon";
21
+ readonly avif: "image/avif";
22
+ readonly jfif: "image/jfif";
23
+ }>;
14
24
  }>;
15
25
  /** includes errored files because they cache was updated nonetheless */
16
26
  updatedFiles: Map<FileId, true>;
@@ -181,9 +181,12 @@ export declare class LinearElementEditor {
181
181
  }>;
182
182
  openMenu: "canvas" | "shape" | null;
183
183
  openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
184
- openSidebar: "library" | "customSidebar" | null;
184
+ openSidebar: {
185
+ name: string;
186
+ tab?: string | undefined;
187
+ } | null;
185
188
  openDialog: "imageExport" | "help" | "jsonExport" | null;
186
- isSidebarDocked: boolean;
189
+ defaultSidebarDockedPreference: boolean;
187
190
  lastPointerDownWith: import("./types").PointerType;
188
191
  selectedElementIds: {
189
192
  [id: string]: boolean;
@@ -77,6 +77,11 @@ export declare const duplicateElement: <TElement extends ExcalidrawElement>(edit
77
77
  * it's advised to supply the whole elements array, or sets of elements that
78
78
  * are encapsulated (such as library items), if the purpose is to retain
79
79
  * bindings to the cloned elements intact.
80
+ *
81
+ * NOTE by default does not randomize or regenerate anything except the id.
80
82
  */
81
- export declare const duplicateElements: (elements: readonly ExcalidrawElement[]) => ExcalidrawElement[];
83
+ export declare const duplicateElements: (elements: readonly ExcalidrawElement[], opts?: {
84
+ /** NOTE also updates version flags and `updated` */
85
+ randomizeSeed: boolean;
86
+ }) => ExcalidrawElement[];
82
87
  export {};
@@ -71,8 +71,8 @@ export declare const getTextBindableContainerAtPosition: (elements: readonly Exc
71
71
  declare const VALID_CONTAINER_TYPES: Set<string>;
72
72
  export declare const isValidTextContainer: (element: ExcalidrawElement) => boolean;
73
73
  export declare const computeContainerDimensionForBoundText: (dimension: number, containerType: ExtractSetType<typeof VALID_CONTAINER_TYPES>) => number;
74
- export declare const getMaxContainerWidth: (container: ExcalidrawElement) => number;
75
- export declare const getMaxContainerHeight: (container: ExcalidrawElement) => number;
74
+ export declare const getBoundTextMaxWidth: (container: ExcalidrawElement) => number;
75
+ export declare const getBoundTextMaxHeight: (container: ExcalidrawElement, boundTextElement: ExcalidrawTextElementWithContainer) => number;
76
76
  export declare const isMeasureTextSupported: () => boolean;
77
77
  export declare const getDefaultLineHeight: (fontFamily: FontFamilyValues) => number & {
78
78
  _brand: "unitlessLineHeight";
@@ -1,2 +1,2 @@
1
1
  /// <reference types="react" />
2
- export declare const useOutsideClickHook: (handler: (event: Event) => void) => import("react").MutableRefObject<null>;
2
+ export declare const useOutsideClick: (handler: (event: Event) => void) => import("react").MutableRefObject<null>;
@@ -24,3 +24,4 @@ export { MainMenu };
24
24
  export { useDevice } from "../../components/App";
25
25
  export { WelcomeScreen };
26
26
  export { LiveCollaborationTrigger };
27
+ export { DefaultSidebar } from "../../components/DefaultSidebar";
package/types/types.d.ts CHANGED
@@ -13,9 +13,9 @@ import { isOverScrollBars } from "./scene";
13
13
  import { MaybeTransformHandleType } from "./element/transformHandles";
14
14
  import Library from "./data/library";
15
15
  import type { FileSystemHandle } from "./data/filesystem";
16
- import type { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
16
+ import type { IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
17
17
  import { ContextMenuItems } from "./components/ContextMenu";
18
- import { Merge, ForwardRef } from "./utility-types";
18
+ import { Merge, ForwardRef, ValueOf } from "./utility-types";
19
19
  import React from "react";
20
20
  export declare type Point = Readonly<RoughPoint>;
21
21
  export declare type Collaborator = {
@@ -38,7 +38,7 @@ export declare type DataURL = string & {
38
38
  _brand: "DataURL";
39
39
  };
40
40
  export declare type BinaryFileData = {
41
- mimeType: typeof ALLOWED_IMAGE_MIME_TYPES[number] | typeof MIME_TYPES.binary;
41
+ mimeType: ValueOf<typeof IMAGE_MIME_TYPES> | typeof MIME_TYPES.binary;
42
42
  id: FileId;
43
43
  dataURL: DataURL;
44
44
  /**
@@ -63,6 +63,8 @@ export declare type LastActiveTool = {
63
63
  type: "custom";
64
64
  customType: string;
65
65
  } | null;
66
+ export declare type SidebarName = string;
67
+ export declare type SidebarTabName = string;
66
68
  export declare type AppState = {
67
69
  contextMenu: {
68
70
  items: ContextMenuItems;
@@ -125,9 +127,19 @@ export declare type AppState = {
125
127
  zoom: Zoom;
126
128
  openMenu: "canvas" | "shape" | null;
127
129
  openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
128
- openSidebar: "library" | "customSidebar" | null;
130
+ openSidebar: {
131
+ name: SidebarName;
132
+ tab?: SidebarTabName;
133
+ } | null;
129
134
  openDialog: "imageExport" | "help" | "jsonExport" | null;
130
- isSidebarDocked: boolean;
135
+ /**
136
+ * Reflects user preference for whether the default sidebar should be docked.
137
+ *
138
+ * NOTE this is only a user preference and does not reflect the actual docked
139
+ * state of the sidebar, because the host apps can override this through
140
+ * a DefaultSidebar prop, which is not reflected back to the appState.
141
+ */
142
+ defaultSidebarDockedPreference: boolean;
131
143
  lastPointerDownWith: PointerType;
132
144
  selectedElementIds: {
133
145
  [id: string]: boolean;
@@ -253,10 +265,6 @@ export interface ExcalidrawProps {
253
265
  }>) => void;
254
266
  onPointerDown?: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState) => void;
255
267
  onScrollChange?: (scrollX: number, scrollY: number) => void;
256
- /**
257
- * Render function that renders custom <Sidebar /> component.
258
- */
259
- renderSidebar?: () => JSX.Element | null;
260
268
  children?: React.ReactNode;
261
269
  }
262
270
  export declare type SceneData = {
@@ -310,12 +318,14 @@ export declare type AppClassProperties = {
310
318
  library: Library;
311
319
  imageCache: Map<FileId, {
312
320
  image: HTMLImageElement | Promise<HTMLImageElement>;
313
- mimeType: typeof ALLOWED_IMAGE_MIME_TYPES[number];
321
+ mimeType: ValueOf<typeof IMAGE_MIME_TYPES>;
314
322
  }>;
315
323
  files: BinaryFiles;
316
324
  device: App["device"];
317
325
  scene: App["scene"];
318
326
  pasteFromClipboard: App["pasteFromClipboard"];
327
+ id: App["id"];
328
+ onInsertElements: App["onInsertElements"];
319
329
  };
320
330
  export declare type PointerDownState = Readonly<{
321
331
  origin: Readonly<{
@@ -397,7 +407,7 @@ export declare type ExcalidrawImperativeAPI = {
397
407
  setActiveTool: InstanceType<typeof App>["setActiveTool"];
398
408
  setCursor: InstanceType<typeof App>["setCursor"];
399
409
  resetCursor: InstanceType<typeof App>["resetCursor"];
400
- toggleMenu: InstanceType<typeof App>["toggleMenu"];
410
+ toggleSidebar: InstanceType<typeof App>["toggleSidebar"];
401
411
  };
402
412
  export declare type Device = Readonly<{
403
413
  isSmScreen: boolean;
package/types/utils.d.ts CHANGED
@@ -156,7 +156,7 @@ export declare const isPrimitive: (val: any) => boolean;
156
156
  export declare const getFrame: () => "top" | "iframe";
157
157
  export declare const isPromiseLike: (value: any) => value is Promise<any>;
158
158
  export declare const queryFocusableElements: (container: HTMLElement | null) => HTMLElement[];
159
- export declare const isShallowEqual: <T extends Record<string, any>>(objA: T, objB: T) => boolean;
159
+ export declare const isShallowEqual: <T extends Record<string, any>, I extends keyof T>(objA: T, objB: T, comparators?: Record<I, (a: T[I], b: T[I]) => boolean> | undefined, debug?: boolean) => boolean;
160
160
  export declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E) => void) | undefined, ourEventHandler?: ((event: E) => void) | undefined, { checkForDefaultPrevented }?: {
161
161
  checkForDefaultPrevented?: boolean | undefined;
162
162
  }) => (event: E) => void;
@@ -1,8 +0,0 @@
1
- import React from "react";
2
- import { AppState } from "../types";
3
- import "./LibraryButton.scss";
4
- export declare const LibraryButton: React.FC<{
5
- appState: AppState;
6
- setAppState: React.Component<any, AppState>["setState"];
7
- isMobile?: boolean;
8
- }>;
@@ -1,16 +0,0 @@
1
- import React from "react";
2
- import tunnel from "@dwelle/tunnel-rat";
3
- declare type Tunnel = ReturnType<typeof tunnel>;
4
- declare type TunnelsContextValue = {
5
- mainMenuTunnel: Tunnel;
6
- welcomeScreenMenuHintTunnel: Tunnel;
7
- welcomeScreenToolbarHintTunnel: Tunnel;
8
- welcomeScreenHelpHintTunnel: Tunnel;
9
- welcomeScreenCenterTunnel: Tunnel;
10
- footerCenterTunnel: Tunnel;
11
- jotaiScope: symbol;
12
- };
13
- export declare const TunnelsContext: React.Context<TunnelsContextValue>;
14
- export declare const useTunnels: () => TunnelsContextValue;
15
- export declare const useInitializeTunnels: () => TunnelsContextValue;
16
- export {};
@@ -1,10 +0,0 @@
1
- import React from "react";
2
- export declare const withUpstreamOverride: <P>(Component: React.ComponentType<P>) => readonly [React.FC<{
3
- children: React.ReactNode;
4
- }>, {
5
- (props: P & {
6
- /** @private internal */
7
- __isFallback?: boolean | undefined;
8
- }): JSX.Element | null;
9
- displayName: string;
10
- }];