@depup/react-konva 19.2.3-depup.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Anton Lavrenov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# @depup/react-konva
+
+> Dependency-bumped version of [react-konva](https://www.npmjs.com/package/react-konva)
+
+Generated by [DepUp](https://github.com/depup/npm) -- all production
+dependencies bumped to latest versions.
+
+## Installation
+
+```bash
+npm install @depup/react-konva
+```
+
+| Field | Value |
+|-------|-------|
+| Original | [react-konva](https://www.npmjs.com/package/react-konva) @ 19.2.3 |
+| Processed | 2026-03-18 |
+| Smoke test | failed |
+| Deps updated | 0 |
+
+---
+
+Source: https://github.com/depup/npm | Original: https://www.npmjs.com/package/react-konva
+
+License inherited from the original package.

package/ReactKonvaCore.d.ts

@@ -0,0 +1,117 @@
+// special file for minimal import
+import * as React from 'react';
+import * as ReactReconciler from 'react-reconciler';
+import Konva from 'konva';
+import { useContextBridge } from 'its-fine';
+
+export interface KonvaNodeEvents {
+  onMouseOver?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseMove?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseOut?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseEnter?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseLeave?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseDown?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseUp?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onWheel?(evt: Konva.KonvaEventObject<WheelEvent>): void;
+  onClick?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onDblClick?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onTouchStart?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onTouchMove?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onTouchEnd?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onTap?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onDblTap?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onDragStart?(evt: Konva.KonvaEventObject<DragEvent>): void;
+  onDragMove?(evt: Konva.KonvaEventObject<DragEvent>): void;
+  onDragEnd?(evt: Konva.KonvaEventObject<DragEvent>): void;
+  onTransform?(evt: Konva.KonvaEventObject<Event>): void;
+  onTransformStart?(evt: Konva.KonvaEventObject<Event>): void;
+  onTransformEnd?(evt: Konva.KonvaEventObject<Event>): void;
+  onContextMenu?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerDown?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerMove?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerUp?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerCancel?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerEnter?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerLeave?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerOver?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerOut?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerClick?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerDblClick?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onGotPointerCapture?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onLostPointerCapture?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+}
+
+export interface KonvaNodeComponent<
+  Node extends Konva.Node,
+  Props = Konva.NodeConfig
+  // We use React.ClassAttributes to fake the 'ref' attribute. This will ensure
+  // consumers get the proper 'Node' type in 'ref' instead of the wrapper
+  // component type.
+> extends React.FC<Props & KonvaNodeEvents & React.ClassAttributes<Node>> {
+  getPublicInstance(): Node;
+  getNativeNode(): Node;
+  // putEventListener(type: string, listener: Function): void;
+  // handleEvent(event: Event): void;
+}
+
+export interface StageProps
+  extends Konva.NodeConfig,
+    KonvaNodeEvents,
+    Pick<
+      React.HTMLAttributes<HTMLDivElement>,
+      'className' | 'role' | 'style' | 'tabIndex' | 'title'
+    > {}
+
+// Stage is the only real class because the others are stubs that only know how
+// to be rendered when they are under stage. Since there is no real backing
+// class and are in reality are a string literal we don't want users to actually
+// try and use them as a type. By defining them as a variable with an interface
+// consumers will not be able to use the values as a type or constructor.
+// The down side to this approach, is that typescript thinks the type is a
+// function, but if the user tries to call it a runtime exception will occur.
+
+export var Stage: KonvaNodeComponent<Konva.Stage, StageProps>;
+export var Layer: KonvaNodeComponent<Konva.Layer, Konva.LayerConfig>;
+export var FastLayer: KonvaNodeComponent<Konva.FastLayer, Konva.LayerConfig>;
+export var Group: KonvaNodeComponent<Konva.Group, Konva.GroupConfig>;
+export var Label: KonvaNodeComponent<Konva.Label, Konva.LabelConfig>;
+
+/** Shapes */
+export var Rect: KonvaNodeComponent<Konva.Rect, Konva.RectConfig>;
+export var Circle: KonvaNodeComponent<Konva.Circle, Konva.CircleConfig>;
+export var Ellipse: KonvaNodeComponent<Konva.Ellipse, Konva.EllipseConfig>;
+export var Wedge: KonvaNodeComponent<Konva.Wedge, Konva.WedgeConfig>;
+export var Transformer: KonvaNodeComponent<
+  Konva.Transformer,
+  Konva.TransformerConfig
+>;
+export var Line: KonvaNodeComponent<Konva.Line, Konva.LineConfig>;
+export var Sprite: KonvaNodeComponent<Konva.Sprite, Konva.SpriteConfig>;
+export var Image: KonvaNodeComponent<Konva.Image, Konva.ImageConfig>;
+export var Text: KonvaNodeComponent<Konva.Text, Konva.TextConfig>;
+export var TextPath: KonvaNodeComponent<Konva.TextPath, Konva.TextPathConfig>;
+export var Star: KonvaNodeComponent<Konva.Star, Konva.StarConfig>;
+export var Ring: KonvaNodeComponent<Konva.Ring, Konva.RingConfig>;
+export var Arc: KonvaNodeComponent<Konva.Arc, Konva.ArcConfig>;
+export var Tag: KonvaNodeComponent<Konva.Tag, Konva.TagConfig>;
+export var Path: KonvaNodeComponent<Konva.Path, Konva.PathConfig>;
+export var RegularPolygon: KonvaNodeComponent<
+  Konva.RegularPolygon,
+  Konva.RegularPolygonConfig
+>;
+export var Arrow: KonvaNodeComponent<Konva.Arrow, Konva.ArrowConfig>;
+export var Shape: KonvaNodeComponent<Konva.Shape, Konva.ShapeConfig>;
+
+export var useStrictMode: (useStrictMode: boolean) => void;
+export var KonvaRenderer: ReactReconciler.Reconciler<
+  any,
+  any,
+  any,
+  any,
+  any,
+  any
+>;
+
+export var version: string;
+
+export { useContextBridge };

package/changes.json

@@ -0,0 +1,5 @@
+{
+  "bumped": {},
+  "timestamp": "2026-03-18T22:41:31.339Z",
+  "totalUpdated": 0
+}

package/es/ReactKonva.js

@@ -0,0 +1,10 @@
+/**
+ * Based on ReactArt.js
+ * Copyright (c) 2017-present Lavrenov Anton.
+ * All rights reserved.
+ *
+ * MIT
+ */
+'use strict';
+import 'konva';
+export * from './ReactKonvaCore.js';

package/es/ReactKonvaCore.d.ts

@@ -0,0 +1,117 @@
+// special file for minimal import
+import * as React from 'react';
+import * as ReactReconciler from 'react-reconciler';
+import Konva from 'konva';
+import { useContextBridge } from 'its-fine';
+
+export interface KonvaNodeEvents {
+  onMouseOver?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseMove?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseOut?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseEnter?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseLeave?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseDown?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onMouseUp?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onWheel?(evt: Konva.KonvaEventObject<WheelEvent>): void;
+  onClick?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onDblClick?(evt: Konva.KonvaEventObject<MouseEvent>): void;
+  onTouchStart?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onTouchMove?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onTouchEnd?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onTap?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onDblTap?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onDragStart?(evt: Konva.KonvaEventObject<DragEvent>): void;
+  onDragMove?(evt: Konva.KonvaEventObject<DragEvent>): void;
+  onDragEnd?(evt: Konva.KonvaEventObject<DragEvent>): void;
+  onTransform?(evt: Konva.KonvaEventObject<Event>): void;
+  onTransformStart?(evt: Konva.KonvaEventObject<Event>): void;
+  onTransformEnd?(evt: Konva.KonvaEventObject<Event>): void;
+  onContextMenu?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerDown?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerMove?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerUp?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerCancel?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerEnter?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerLeave?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerOver?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerOut?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerClick?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onPointerDblClick?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onGotPointerCapture?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+  onLostPointerCapture?(evt: Konva.KonvaEventObject<PointerEvent>): void;
+}
+
+export interface KonvaNodeComponent<
+  Node extends Konva.Node,
+  Props = Konva.NodeConfig
+  // We use React.ClassAttributes to fake the 'ref' attribute. This will ensure
+  // consumers get the proper 'Node' type in 'ref' instead of the wrapper
+  // component type.
+> extends React.FC<Props & KonvaNodeEvents & React.ClassAttributes<Node>> {
+  getPublicInstance(): Node;
+  getNativeNode(): Node;
+  // putEventListener(type: string, listener: Function): void;
+  // handleEvent(event: Event): void;
+}
+
+export interface StageProps
+  extends Konva.NodeConfig,
+    KonvaNodeEvents,
+    Pick<
+      React.HTMLAttributes<HTMLDivElement>,
+      'className' | 'role' | 'style' | 'tabIndex' | 'title'
+    > {}
+
+// Stage is the only real class because the others are stubs that only know how
+// to be rendered when they are under stage. Since there is no real backing
+// class and are in reality are a string literal we don't want users to actually
+// try and use them as a type. By defining them as a variable with an interface
+// consumers will not be able to use the values as a type or constructor.
+// The down side to this approach, is that typescript thinks the type is a
+// function, but if the user tries to call it a runtime exception will occur.
+
+export var Stage: KonvaNodeComponent<Konva.Stage, StageProps>;
+export var Layer: KonvaNodeComponent<Konva.Layer, Konva.LayerConfig>;
+export var FastLayer: KonvaNodeComponent<Konva.FastLayer, Konva.LayerConfig>;
+export var Group: KonvaNodeComponent<Konva.Group, Konva.GroupConfig>;
+export var Label: KonvaNodeComponent<Konva.Label, Konva.LabelConfig>;
+
+/** Shapes */
+export var Rect: KonvaNodeComponent<Konva.Rect, Konva.RectConfig>;
+export var Circle: KonvaNodeComponent<Konva.Circle, Konva.CircleConfig>;
+export var Ellipse: KonvaNodeComponent<Konva.Ellipse, Konva.EllipseConfig>;
+export var Wedge: KonvaNodeComponent<Konva.Wedge, Konva.WedgeConfig>;
+export var Transformer: KonvaNodeComponent<
+  Konva.Transformer,
+  Konva.TransformerConfig
+>;
+export var Line: KonvaNodeComponent<Konva.Line, Konva.LineConfig>;
+export var Sprite: KonvaNodeComponent<Konva.Sprite, Konva.SpriteConfig>;
+export var Image: KonvaNodeComponent<Konva.Image, Konva.ImageConfig>;
+export var Text: KonvaNodeComponent<Konva.Text, Konva.TextConfig>;
+export var TextPath: KonvaNodeComponent<Konva.TextPath, Konva.TextPathConfig>;
+export var Star: KonvaNodeComponent<Konva.Star, Konva.StarConfig>;
+export var Ring: KonvaNodeComponent<Konva.Ring, Konva.RingConfig>;
+export var Arc: KonvaNodeComponent<Konva.Arc, Konva.ArcConfig>;
+export var Tag: KonvaNodeComponent<Konva.Tag, Konva.TagConfig>;
+export var Path: KonvaNodeComponent<Konva.Path, Konva.PathConfig>;
+export var RegularPolygon: KonvaNodeComponent<
+  Konva.RegularPolygon,
+  Konva.RegularPolygonConfig
+>;
+export var Arrow: KonvaNodeComponent<Konva.Arrow, Konva.ArrowConfig>;
+export var Shape: KonvaNodeComponent<Konva.Shape, Konva.ShapeConfig>;
+
+export var useStrictMode: (useStrictMode: boolean) => void;
+export var KonvaRenderer: ReactReconciler.Reconciler<
+  any,
+  any,
+  any,
+  any,
+  any,
+  any
+>;
+
+export var version: string;
+
+export { useContextBridge };

package/es/ReactKonvaCore.js

@@ -0,0 +1,185 @@
+/**
+ * Based on ReactArt.js
+ * Copyright (c) 2017-present Lavrenov Anton.
+ * All rights reserved.
+ *
+ * MIT
+ */
+'use strict';
+import React from 'react';
+if (React.version.indexOf('19') === -1) {
+    throw new Error('react-konva version 19 is only compatible with React 19. Make sure to have the last version of react-konva and react or downgrade react-konva to version 18.');
+}
+import Konva from 'konva/lib/Core.js';
+import ReactFiberReconciler from 'react-reconciler';
+import { ConcurrentRoot } from 'react-reconciler/constants.js';
+import * as HostConfig from './ReactKonvaHostConfig.js';
+import { applyNodeProps, toggleStrictMode } from './makeUpdates.js';
+import { useContextBridge, FiberProvider } from 'its-fine';
+function usePrevious(value) {
+    const ref = React.useRef({});
+    React.useLayoutEffect(() => {
+        ref.current = value;
+    });
+    React.useLayoutEffect(() => {
+        return () => {
+            // when using suspense it is possible that stage is unmounted
+            // but React still keep component ref
+            // in that case we need to manually flush props
+            // we have a special test for that
+            ref.current = {};
+        };
+    }, []);
+    return ref.current;
+}
+const useIsReactStrictMode = () => {
+    const memoCount = React.useRef(0);
+    // in strict mode, memo will be called twice
+    React.useMemo(() => {
+        memoCount.current++;
+    }, []);
+    return memoCount.current > 1;
+};
+const StageWrap = (props) => {
+    const container = React.useRef(null);
+    const stage = React.useRef(null);
+    const fiberRef = React.useRef(null);
+    const oldProps = usePrevious(props);
+    const Bridge = useContextBridge();
+    const pendingDestroy = React.useRef(null);
+    const _setRef = (stage) => {
+        const { forwardedRef } = props;
+        if (!forwardedRef) {
+            return;
+        }
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(stage);
+        }
+        else {
+            forwardedRef.current = stage;
+        }
+    };
+    const isStrictMode = useIsReactStrictMode();
+    const destroyStage = () => {
+        _setRef(null);
+        // CRITICAL: flushSyncFromReconciler is required here to ensure pending work
+        // (e.g. stale MobX updates on child components) is flushed synchronously
+        // before the tree is torn down. Without it, unmounting a Stage can leave
+        // pending Konva work that runs after the stage is already destroyed.
+        KonvaRenderer.flushSyncFromReconciler(() => {
+            KonvaRenderer.updateContainer(null, fiberRef.current, null);
+        });
+        stage.current?.destroy();
+        stage.current = null;
+    };
+    React.useLayoutEffect(() => {
+        // Cancel any pending destruction (happens during re-ordering in strict mode)
+        if (pendingDestroy.current) {
+            clearTimeout(pendingDestroy.current);
+            pendingDestroy.current = null;
+        }
+        // If stage already exists (re-ordering scenario), reuse it
+        if (stage.current) {
+            _setRef(stage.current);
+        }
+        else {
+            stage.current = new Konva.Stage({
+                width: props.width,
+                height: props.height,
+                container: container.current,
+            });
+            _setRef(stage.current);
+            // @ts-ignore
+            fiberRef.current = KonvaRenderer.createContainer(stage.current, ConcurrentRoot, null, false, null, '', console.error, console.error, console.error, null);
+            KonvaRenderer.updateContainer(React.createElement(Bridge, {}, props.children), fiberRef.current, null, () => { });
+        }
+        return () => {
+            if (isStrictMode) {
+                // Delay destruction to allow cancellation on remount
+                pendingDestroy.current = setTimeout(destroyStage, 0);
+            }
+            else {
+                destroyStage();
+            }
+        };
+    }, []);
+    React.useLayoutEffect(() => {
+        _setRef(stage.current);
+        applyNodeProps(stage.current, props, oldProps);
+        // =============================================================================
+        // CRITICAL FIX - DO NOT REMOVE
+        // =============================================================================
+        // This flushSyncFromReconciler wrapper is CRITICAL for React 19 compatibility.
+        //
+        // THE BUG:
+        // When using useSyncExternalStore (MobX, Zustand, etc.) with react-konva,
+        // parent component's useLayoutEffect couldn't find newly added Konva nodes.
+        // The nodes were added to the store, but not yet rendered to the canvas.
+        //
+        // ROOT CAUSE:
+        // React 19's updateContainer can defer Konva reconciler work to a later
+        // microtask. Combined with Bridge component (from its-fine) and Html components
+        // that create secondary React roots, this caused child components to render
+        // AFTER parent's useLayoutEffect completed.
+        //
+        // THE FIX:
+        // flushSyncFromReconciler forces ALL scheduled Konva reconciler work to
+        // complete synchronously within this useLayoutEffect, ensuring child
+        // components render before any parent effects run.
+        //
+        // WARNING - NOT COVERED BY TESTS:
+        // This bug CANNOT be reproduced in local test environments (Vitest/Playwright).
+        // It only manifests in production builds with specific conditions:
+        // - MobX/useSyncExternalStore for state management
+        // - Html components with secondary React roots using Bridge
+        // - Complex component hierarchies (multiple pages/stages)
+        // The fix was verified in Polotno production app.
+        // =============================================================================
+        KonvaRenderer.flushSyncFromReconciler(() => {
+            KonvaRenderer.updateContainer(React.createElement(Bridge, {}, props.children), fiberRef.current, null);
+        });
+    });
+    return React.createElement('div', {
+        ref: container,
+        id: props.id,
+        accessKey: props.accessKey,
+        className: props.className,
+        role: props.role,
+        style: props.style,
+        tabIndex: props.tabIndex,
+        title: props.title,
+    });
+};
+export const Layer = 'Layer';
+export const FastLayer = 'FastLayer';
+export const Group = 'Group';
+export const Label = 'Label';
+export const Rect = 'Rect';
+export const Circle = 'Circle';
+export const Ellipse = 'Ellipse';
+export const Wedge = 'Wedge';
+export const Line = 'Line';
+export const Sprite = 'Sprite';
+export const Image = 'Image';
+export const Text = 'Text';
+export const TextPath = 'TextPath';
+export const Star = 'Star';
+export const Ring = 'Ring';
+export const Arc = 'Arc';
+export const Tag = 'Tag';
+export const Path = 'Path';
+export const RegularPolygon = 'RegularPolygon';
+export const Arrow = 'Arrow';
+export const Shape = 'Shape';
+export const Transformer = 'Transformer';
+export const version = '19.2.3';
+// @ts-ignore
+export const KonvaRenderer = ReactFiberReconciler(HostConfig);
+// Update Stage component declaration
+export const Stage = React.forwardRef((props, ref) => {
+    return React.createElement(FiberProvider, {}, React.createElement(StageWrap, { ...props, forwardedRef: ref }));
+});
+export const useStrictMode = toggleStrictMode;
+// export useContextBridge from its-fine for reuse in react-konva-utils
+// so react-konva-utils don't use its own version of its-fine (it is possible on pnpm)
+export { useContextBridge };