semiotic 2.0.2 → 3.0.0-beta.1

package/ai/dist/src/components/svg/sankeyLinks.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.areaLink = exports.ribbonLink = void 0;
+exports.circularAreaLink = circularAreaLink;
+const SvgHelper_1 = require("./SvgHelper");
+const d3_interpolate_1 = require("d3-interpolate");
+const curvature = 0.5;
+const ribbonLink = (d) => {
+    const diff = d.direction === "down"
+        ? Math.abs(d.target.y - d.source.y)
+        : Math.abs(d.source.x - d.target.x);
+    // const halfWidth = d.width / 2
+    const testCoordinates = d.direction === "down"
+        ? [
+            {
+                x: d.y0,
+                y: d.source.y
+            },
+            {
+                x: d.y0,
+                y: d.source.y + diff / 3
+            },
+            {
+                x: d.y1,
+                y: d.target.y - diff / 3
+            },
+            {
+                x: d.y1,
+                y: d.target.y
+            }
+        ]
+        : [
+            {
+                x: d.source.x0,
+                y: d.y0
+            },
+            {
+                x: d.source.x0 + diff / 3,
+                y: d.y0
+            },
+            {
+                x: d.target.x0 - diff / 3,
+                y: d.y1
+            },
+            {
+                x: d.target.x0,
+                y: d.y1
+            }
+        ];
+    const linkGenerator = (0, SvgHelper_1.linearRibbon)();
+    linkGenerator.x((d) => d.x);
+    linkGenerator.y((d) => d.y);
+    linkGenerator.r(() => d.sankeyWidth / 2);
+    return linkGenerator(testCoordinates);
+};
+exports.ribbonLink = ribbonLink;
+const areaLink = (d) => {
+    let x0, x1, x2, x3, y0, y1, xi, y2, y3;
+    if (d.direction === "down") {
+        x0 = d.y0 - d.sankeyWidth / 2;
+        x1 = d.y1 - d.sankeyWidth / 2;
+        x2 = d.y1 + d.sankeyWidth / 2;
+        x3 = d.y0 + d.sankeyWidth / 2;
+        y0 = d.source.y1;
+        y1 = d.target.y0;
+        xi = (0, d3_interpolate_1.interpolateNumber)(y0, y1);
+        y2 = xi(curvature);
+        y3 = xi(1 - curvature);
+        return `M${x0},${y0}C${x0},${y2} ${x1},${y3} ${x1},${y1}L${x2},${y1}C${x2},${y3} ${x3},${y2} ${x3},${y0}Z`;
+    }
+    ;
+    (x0 = d.source.x1), // eslint-disable-line no-sequences
+        (x1 = d.target.x0),
+        (xi = (0, d3_interpolate_1.interpolateNumber)(x0, x1)),
+        (x2 = xi(curvature)),
+        (x3 = xi(1 - curvature)),
+        (y0 = d.y0 - d.sankeyWidth / 2),
+        (y1 = d.y1 - d.sankeyWidth / 2),
+        (y2 = d.y1 + d.sankeyWidth / 2),
+        (y3 = d.y0 + d.sankeyWidth / 2);
+    return `M${x0},${y0}C${x2},${y0} ${x3},${y1} ${x1},${y1}L${x1},${y2}C${x3},${y2} ${x2},${y3} ${x0},${y3}Z`;
+};
+exports.areaLink = areaLink;
+function circularAreaLink(link) {
+    const linkGenerator = (0, SvgHelper_1.linearRibbon)();
+    linkGenerator.x((d) => d.x);
+    linkGenerator.y((d) => d.y);
+    linkGenerator.r(() => link.sankeyWidth / 2);
+    const xyForLink = link.direction === "down"
+        ? [
+            {
+                x: link.circularPathData.sourceY,
+                y: link.circularPathData.sourceX
+            },
+            {
+                x: link.circularPathData.sourceY,
+                y: link.circularPathData.leftFullExtent
+            },
+            {
+                x: link.circularPathData.verticalFullExtent,
+                y: link.circularPathData.leftFullExtent
+            },
+            {
+                x: link.circularPathData.verticalFullExtent,
+                y: link.circularPathData.rightFullExtent
+            },
+            {
+                x: link.circularPathData.targetY,
+                y: link.circularPathData.rightFullExtent
+            },
+            {
+                x: link.circularPathData.targetY,
+                y: link.circularPathData.targetX
+            }
+        ]
+        : [
+            {
+                x: link.circularPathData.sourceX,
+                y: link.circularPathData.sourceY
+            },
+            {
+                x: link.circularPathData.leftFullExtent,
+                y: link.circularPathData.sourceY
+            },
+            {
+                x: link.circularPathData.leftFullExtent,
+                y: link.circularPathData.verticalFullExtent
+            },
+            {
+                x: link.circularPathData.rightFullExtent,
+                y: link.circularPathData.verticalFullExtent
+            },
+            {
+                x: link.circularPathData.rightFullExtent,
+                y: link.circularPathData.targetY
+            },
+            {
+                x: link.circularPathData.targetX,
+                y: link.circularPathData.targetY
+            }
+        ];
+    return linkGenerator(xyForLink);
+}

package/ai/dist/src/components/svg/summaryAxis.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.axisGenerator = axisGenerator;
+const React = __importStar(require("react"));
+const Axis_1 = __importDefault(require("../Axis"));
+/**
+ * Generates an Axis component for summary visualizations
+ * This function creates the actual Axis component with the provided props
+ */
+function axisGenerator(axisProps, i, axisScale) {
+    return (React.createElement(Axis_1.default, { label: axisProps.label, key: axisProps.key || `orframe-summary-axis-${i}`, orient: axisProps.orient, size: axisProps.size, ticks: axisProps.ticks, tickSize: axisProps.tickSize, tickFormat: axisProps.tickFormat, tickValues: axisProps.tickValues, rotate: axisProps.rotate, scale: axisScale, className: axisProps.className }));
+}

package/ai/dist/src/components/svg/summaryLayouts.js

@@ -0,0 +1,202 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderLaidOutSummaries = exports.drawSummaries = exports.bucketizedRenderingFn = exports.contourRenderFn = exports.ckBinsRenderFn = exports.boxplotRenderFn = void 0;
+exports.orFrameSummaryRenderer = orFrameSummaryRenderer;
+exports.summaryInstructionsToMarks = summaryInstructionsToMarks;
+const React = __importStar(require("react"));
+const boxplotRenderer_1 = require("./boxplotRenderer");
+const ckbinsRenderer_1 = require("./ckbinsRenderer");
+const contourRenderer_1 = require("./contourRenderer");
+const bucketizedRenderer_1 = require("./bucketizedRenderer");
+// Re-export renderer functions so existing imports from this module continue to work
+var boxplotRenderer_2 = require("./boxplotRenderer");
+Object.defineProperty(exports, "boxplotRenderFn", { enumerable: true, get: function () { return boxplotRenderer_2.boxplotRenderFn; } });
+var ckbinsRenderer_2 = require("./ckbinsRenderer");
+Object.defineProperty(exports, "ckBinsRenderFn", { enumerable: true, get: function () { return ckbinsRenderer_2.ckBinsRenderFn; } });
+var contourRenderer_2 = require("./contourRenderer");
+Object.defineProperty(exports, "contourRenderFn", { enumerable: true, get: function () { return contourRenderer_2.contourRenderFn; } });
+var bucketizedRenderer_2 = require("./bucketizedRenderer");
+Object.defineProperty(exports, "bucketizedRenderingFn", { enumerable: true, get: function () { return bucketizedRenderer_2.bucketizedRenderingFn; } });
+const summaryRenderHash = {
+    contour: contourRenderer_1.contourRenderFn,
+    boxplot: boxplotRenderer_1.boxplotRenderFn,
+    violin: bucketizedRenderer_1.bucketizedRenderingFn,
+    heatmap: bucketizedRenderer_1.bucketizedRenderingFn,
+    ridgeline: bucketizedRenderer_1.bucketizedRenderingFn,
+    histogram: bucketizedRenderer_1.bucketizedRenderingFn,
+    horizon: bucketizedRenderer_1.bucketizedRenderingFn,
+    ckbins: ckbinsRenderer_1.ckBinsRenderFn
+};
+function orFrameSummaryRenderer({ data, type, renderMode, eventListenersGenerator, styleFn, classFn, projection, adjustedSize, chartSize, margin, axisCreator }) {
+    let summaryRenderFn;
+    if (typeof type.type === "function") {
+        summaryRenderFn = type.type;
+    }
+    else if (summaryRenderHash[type.type]) {
+        summaryRenderFn = summaryRenderHash[type.type];
+    }
+    else {
+        console.error(`Invalid summary type: ${type.type} - Must be a function or one of the following strings: ${Object.keys(summaryRenderHash).join(", ")}`);
+        return {};
+    }
+    return summaryRenderFn({
+        data,
+        type,
+        renderMode,
+        eventListenersGenerator,
+        styleFn,
+        classFn,
+        projection,
+        adjustedSize,
+        chartSize,
+        margin,
+        axisCreator
+    });
+}
+/**
+ * Main drawing function for summary visualizations
+ */
+const drawSummaries = ({ data, type, renderMode, eventListenersGenerator, styleFn, classFn, projection, adjustedSize, margin, axisCreator }) => {
+    if (!type || !type.type)
+        return;
+    type = typeof type === "string" ? { type } : type;
+    const chartSize = projection === "vertical" ? adjustedSize[1] : adjustedSize[0];
+    return orFrameSummaryRenderer({
+        data: data,
+        type: type,
+        renderMode,
+        eventListenersGenerator,
+        styleFn,
+        classFn,
+        projection,
+        adjustedSize,
+        chartSize,
+        margin,
+        axisCreator
+    });
+};
+exports.drawSummaries = drawSummaries;
+/**
+ * Converts summary instructions to rendered SVG elements
+ */
+function summaryInstructionsToMarks(data) {
+    const renderedSummaries = [];
+    for (const container of data) {
+        const renderedElements = [];
+        const { elements, containerProps } = container;
+        if (container.Mark) {
+            renderedSummaries.push(container.Mark);
+        }
+        else {
+            for (let i = 0; i < elements.length; i++) {
+                const element = elements[i];
+                const { markType, style = {}, ...restProps } = element;
+                // Merge style object into direct props for cleaner SVG
+                const elementProps = { ...restProps };
+                if (style.fill !== undefined)
+                    elementProps.fill = style.fill;
+                if (style.stroke !== undefined)
+                    elementProps.stroke = style.stroke;
+                if (style.strokeWidth !== undefined)
+                    elementProps.strokeWidth = style.strokeWidth;
+                if (style.opacity !== undefined)
+                    elementProps.opacity = style.opacity;
+                if (style.fillOpacity !== undefined)
+                    elementProps.fillOpacity = style.fillOpacity;
+                if (style.strokeOpacity !== undefined)
+                    elementProps.strokeOpacity = style.strokeOpacity;
+                // Keep remaining styles
+                const remainingStyles = { ...style };
+                delete remainingStyles.fill;
+                delete remainingStyles.stroke;
+                delete remainingStyles.strokeWidth;
+                delete remainingStyles.opacity;
+                delete remainingStyles.fillOpacity;
+                delete remainingStyles.strokeOpacity;
+                if (Object.keys(remainingStyles).length > 0) {
+                    elementProps.style = remainingStyles;
+                }
+                elementProps.key = element.key || i;
+                if (markType) {
+                    renderedElements.push(React.createElement(markType, elementProps));
+                }
+            }
+            if (containerProps) {
+                renderedSummaries.push(React.createElement("g", { ...containerProps }, renderedElements));
+            }
+            else {
+                renderedSummaries.push(...renderedElements);
+            }
+        }
+    }
+    return renderedSummaries;
+}
+const renderLaidOutSummaries = ({ data, canvasRender, canvasDrawing }) => {
+    if (canvasRender()) {
+        for (const container of data) {
+            if (container.type !== "svg-only-mark") {
+                const { transform: containerTransform = "translate(0,0)" } = container?.containerProps ?? {
+                    transform: "translate(0,0)"
+                };
+                const [containerX, containerY] = containerTransform
+                    .replace("translate(", "")
+                    .replace(")", "")
+                    .split(",");
+                for (const element of container.elements) {
+                    const { transform: elementTransform = "translate(0,0)" } = element;
+                    const [elementX, elementY] = elementTransform
+                        .replace("translate(", "")
+                        .replace(")", "")
+                        .split(",");
+                    const canvasNode = {
+                        baseClass: "frame-piece",
+                        tx: parseInt(elementX) + parseInt(containerX),
+                        ty: parseInt(elementY) + parseInt(containerY),
+                        d: {},
+                        i: 0,
+                        markProps: element,
+                        styleFn: () => element.style,
+                        renderFn: element.renderMode,
+                        classFn: () => ""
+                    };
+                    canvasDrawing.push(canvasNode);
+                }
+            }
+        }
+    }
+    return summaryInstructionsToMarks(data.filter((d) => !canvasRender() || d.type === "svg-only-mark"));
+};
+exports.renderLaidOutSummaries = renderLaidOutSummaries;

package/ai/dist/src/components/svg/swarmLayout.js

@@ -0,0 +1,128 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.swarmLayout = swarmLayout;
+const React = __importStar(require("react"));
+const d3_force_1 = require("d3-force");
+const pieceDrawing_1 = require("./pieceDrawing");
+function swarmLayout({ type, data, renderMode, eventListenersGenerator, styleFn, projection, classFn, adjustedSize, chartSize, margin, rScale }) {
+    let allCalculatedPieces = [];
+    const columnKeys = Object.keys(data);
+    // Calculate total data points for adaptive iterations
+    const totalDataPoints = columnKeys.reduce((sum, key) => {
+        return sum + (data[key].pieceData?.length || 0);
+    }, 0);
+    // Adaptive iteration count: reduce iterations for large datasets to maintain performance
+    const adaptiveIterations = Math.max(30, Math.min(120, Math.floor(120 - (totalDataPoints - 100) / 20)));
+    const iterations = type.iterations !== undefined ? type.iterations : adaptiveIterations;
+    columnKeys.forEach((key, ordsetI) => {
+        const oColumn = data[key];
+        const anglePiece = 1 / columnKeys.length;
+        const oData = oColumn.pieceData;
+        const adjustedColumnWidth = oColumn.width;
+        const circleRadius = type.r ||
+            Math.max(2, Math.min(5, (4 * adjustedColumnWidth) / oData.length));
+        const simulation = (0, d3_force_1.forceSimulation)(oData)
+            .force("y", (0, d3_force_1.forceY)((d) => d.scaledValue).strength(type.strength || 2))
+            .force("x", (0, d3_force_1.forceX)(oColumn.middle))
+            .force("collide", (0, d3_force_1.forceCollide)(circleRadius))
+            .stop();
+        if (projection === "vertical") {
+            simulation.force("y", (0, d3_force_1.forceY)((d) => d.scaledVerticalValue).strength(type.strength || 2));
+        }
+        for (let i = 0; i < iterations; ++i)
+            simulation.tick();
+        const calculatedPieces = oData.map((piece, i) => {
+            const renderValue = renderMode && renderMode(piece.data, i);
+            let xPosition = piece.x;
+            let yPosition = piece.y;
+            if (projection === "horizontal") {
+                yPosition = piece.x;
+                xPosition = piece.y;
+            }
+            else if (projection === "radial") {
+                const angle = oColumn.pct_middle;
+                xPosition =
+                    ((piece.x - oColumn.middle) / adjustedColumnWidth) * anglePiece;
+                const rPosition = piece.scaledValue / 2;
+                const xAngle = angle + xPosition;
+                const baseCentroid = (0, pieceDrawing_1.pointOnArcAtAngle)([adjustedSize[0] / 2, adjustedSize[1] / 2], xAngle, rPosition);
+                xPosition = baseCentroid[0];
+                yPosition = baseCentroid[1];
+            }
+            const actualCircleRadius = typeof circleRadius === "function"
+                ? circleRadius(piece, i)
+                : circleRadius;
+            const eventListeners = eventListenersGenerator(piece, i);
+            const renderElementObject = type.customMark ? (React.createElement("g", { key: `piece-${piece.renderKey}`, transform: `translate(${xPosition},${yPosition})` }, type.customMark({ ...piece.data, ...piece, x: xPosition, y: yPosition }, i, {
+                x: xPosition,
+                y: yPosition,
+                r: circleRadius,
+                renderMode,
+                styleFn,
+                classFn,
+                adjustedSize,
+                chartSize,
+                margin,
+                rScale
+            }))) : ({
+                className: classFn({ ...piece, ...piece.data }, i),
+                markType: "rect",
+                key: `piece-${piece.renderKey}`,
+                height: actualCircleRadius * 2,
+                width: actualCircleRadius * 2,
+                x: xPosition - actualCircleRadius,
+                y: yPosition - actualCircleRadius,
+                rx: actualCircleRadius,
+                ry: actualCircleRadius,
+                style: styleFn({ ...piece, ...piece.data }, ordsetI),
+                ...eventListeners
+            });
+            const calculatedPiece = {
+                o: key,
+                xy: {
+                    x: xPosition,
+                    y: yPosition
+                },
+                piece,
+                renderValue,
+                renderElement: renderElementObject
+            };
+            return calculatedPiece;
+        });
+        allCalculatedPieces = [...allCalculatedPieces, ...calculatedPieces];
+    });
+    return allCalculatedPieces;
+}

package/ai/dist/src/components/types/annotationTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ai/dist/src/components/types/canvasTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ai/dist/src/components/types/generalTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ai/dist/src/components/types/interactionTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ai/dist/src/components/types/legendTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ai/dist/src/components/types/networkTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ai/dist/src/components/types/ordinalTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ai/dist/src/components/types/xyTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ai/dist/src/components/useBoundingRect.js

@@ -0,0 +1,24 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBoundingRect = useBoundingRect;
+const react_1 = require("react");
+function useBoundingRect(ref) {
+    const [rect, setRect] = (0, react_1.useState)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const element = ref.current;
+        if (element != null) {
+            setRect(element.getBoundingClientRect());
+            // TypeScript 3.9 does not know about resize observer
+            // @ts-ignore
+            const observer = new ResizeObserver((entries) => {
+                if (entries.length > 0) {
+                    setRect(entries[0].contentRect);
+                }
+            });
+            observer.observe(element);
+            return () => observer.disconnect();
+        }
+    }, []);
+    return rect;
+}

package/ai/dist/src/components/useDerivedStateFromProps.js

@@ -0,0 +1,25 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDerivedStateFromProps = useDerivedStateFromProps;
+const react_1 = require("react");
+// this hooks should only be used for transitioning from class to function components
+// this hooks is supposed to replicate behavior of getDerivedStateFromProps
+// and some assumptions related to it:
+// 1. initial state, defined in "constructor" should not trigger additional computation
+// 2. the computation function can opt-out if it thinks that nothing has changed, so the existing state should be used
+//
+// ideally, the state must be refactored to be function component friendly, so this hooks should become irrelevant
+function useDerivedStateFromProps(fn, props, initialState) {
+    let prevRef = (0, react_1.useRef)(initialState);
+    let state = (0, react_1.useMemo)(() => {
+        let state = prevRef.current;
+        let patch = fn(props, state);
+        if (patch != null) {
+            return { ...state, ...patch };
+        }
+        return state;
+    }, [props]);
+    prevRef.current = state;
+    return state;
+}

package/ai/dist/src/components/useLegacyUnmountCallback.js

@@ -0,0 +1,21 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLegacyUnmountCallback = useLegacyUnmountCallback;
+const react_1 = require("react");
+// to properly replicate behavior of componentWillUnmount, the effect must not have dependencies
+// which is why we need to store latest props and state values in ref that can be accessible during unmount
+// TODO get rid of the behavior and props.onUnmount
+function useLegacyUnmountCallback(props, state) {
+    let ref = (0, react_1.useRef)();
+    ref.current = [props, state];
+    (0, react_1.useEffect)(() => {
+        return () => {
+            const [props, state] = ref.current;
+            const onUnmount = props.onUnmount;
+            if (onUnmount) {
+                onUnmount(props, state);
+            }
+        };
+    }, []);
+}