datocms-react-ui 2.1.0-alpha.0 → 2.1.0-alpha.2

package/dist/esm/SplitView/SplitViewSash/index.js

@@ -0,0 +1,46 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import s from './styles.module.css.json';
+export function SplitViewSash(_a) {
+    var onMouseDown = _a.onMouseDown, onMouseMove = _a.onMouseMove, onMouseUp = _a.onMouseUp, style = _a.style, split = _a.split, allowResize = _a.allowResize, action = _a.action;
+    var _b = useState(false), dragging = _b[0], setDrag = _b[1];
+    function handleMouseMove(e) {
+        onMouseMove(e.pageX, e.pageY);
+    }
+    function handleMouseUp() {
+        setDrag(false);
+        onMouseUp();
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+    }
+    function handleTouchMove(e) {
+        onMouseMove(e.touches[0].pageX, e.touches[0].pageY);
+    }
+    function handleTouchEnd() {
+        setDrag(false);
+        onMouseUp();
+        window.removeEventListener('touchmove', handleTouchMove);
+        window.removeEventListener('touchend', handleTouchEnd);
+    }
+    var actionEl = (action === null || action === void 0 ? void 0 : action.icon) && (React.createElement("div", { className: s.SplitViewSash__content, onMouseDown: function (e) {
+            e.stopPropagation();
+        }, onClick: function () {
+            action.onClick();
+        } },
+        React.createElement("div", { className: s.SplitViewSash__content__button }, action === null || action === void 0 ? void 0 : action.icon)));
+    return (React.createElement("div", { role: "Resizer", className: classNames(s.SplitViewSash, split === 'vertical'
+            ? s['SplitViewSash--vertical']
+            : s['SplitViewSash--horizontal'], !allowResize && s['SplitViewSash--no-resize'], dragging && s['SplitViewSash--dragging']), onMouseDown: function (e) {
+            setDrag(true);
+            onMouseDown(e.pageX, e.pageY);
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+        }, onTouchStart: function (e) {
+            e.preventDefault();
+            setDrag(true);
+            onMouseDown(e.touches[0].pageX, e.touches[0].pageY);
+            window.addEventListener('touchmove', handleTouchMove);
+            window.addEventListener('touchend', handleTouchEnd);
+        }, style: style }, actionEl));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/SplitView/SplitViewSash/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/SplitView/SplitViewSash/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/SplitView/SplitViewSash/styles.module.css.json

@@ -0,0 +1 @@
+{ "SplitViewSash": "_SplitViewSash_tds51_1", "SplitViewSash--dragging": "_SplitViewSash--dragging_tds51_15", "SplitViewSash__content": "_SplitViewSash__content_tds51_19", "SplitViewSash--no-resize": "_SplitViewSash--no-resize_tds51_24", "SplitViewSash--vertical": "_SplitViewSash--vertical_tds51_28", "SplitViewSash--horizontal": "_SplitViewSash--horizontal_tds51_32", "SplitViewSash__content__button": "_SplitViewSash__content__button_tds51_46" }

package/dist/esm/SplitView/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { SashAction } from './SplitViewSash';
+declare type SplitViewProps = {
+    children: JSX.Element[];
+    allowResize?: boolean;
+    split?: 'vertical' | 'horizontal';
+    sizes: (string | number)[];
+    onChange: (sizes: number[]) => void;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
+    performanceMode?: boolean;
+    resizerSize?: number;
+    sashAction?: SashAction;
+};
+export declare const SplitView: ({ children, sizes: propSizes, allowResize, split, resizerSize, performanceMode, onChange, onDragStart, onDragEnd, sashAction, }: SplitViewProps) => JSX.Element;
+export {};

package/dist/esm/SplitView/index.js

@@ -0,0 +1,176 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import classNames from 'classnames';
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { SplitViewPane } from './SplitViewPane';
+import { SplitViewSash } from './SplitViewSash';
+import s from './styles.module.css.json';
+export var SplitView = function (_a) {
+    var children = _a.children, propSizes = _a.sizes, _b = _a.allowResize, allowResize = _b === void 0 ? true : _b, _c = _a.split, split = _c === void 0 ? 'vertical' : _c, _d = _a.resizerSize, resizerSize = _d === void 0 ? 10 : _d, _e = _a.performanceMode, performanceMode = _e === void 0 ? false : _e, _f = _a.onChange, onChange = _f === void 0 ? function () { return null; } : _f, _g = _a.onDragStart, onDragStart = _g === void 0 ? function () { return null; } : _g, _h = _a.onDragEnd, onDragEnd = _h === void 0 ? function () { return null; } : _h, sashAction = _a.sashAction;
+    var axis = useRef({ x: 0, y: 0 });
+    var wrapper = useRef(null);
+    var cacheSizes = useRef({ sizes: [], sashPosSizes: [] });
+    var _j = useState(undefined), wrapperRect = _j[0], setWrapperRect = _j[1];
+    var _k = useState(false), isDragging = _k[0], setDragging = _k[1];
+    useEffect(function () {
+        var resizeObserver = new ResizeObserver(function () {
+            if (wrapper === null || wrapper === void 0 ? void 0 : wrapper.current) {
+                setWrapperRect(wrapper.current.getBoundingClientRect());
+            }
+        });
+        resizeObserver.observe(wrapper.current);
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    var _l = useMemo(function () { return ({
+        sizeName: split === 'vertical' ? 'width' : 'height',
+        splitPos: split === 'vertical' ? 'left' : 'top',
+        splitAxis: split === 'vertical' ? 'x' : 'y',
+    }); }, [split]), sizeName = _l.sizeName, splitPos = _l.splitPos, splitAxis = _l.splitAxis;
+    var wrapSize = wrapperRect ? wrapperRect[sizeName] : 0;
+    // Get limit sizes via children
+    var paneLimitSizes = useMemo(function () {
+        return children.map(function (childNode) {
+            var limits = [0, Infinity];
+            if (childNode.type === SplitViewPane) {
+                var _a = childNode.props, minSize = _a.minSize, maxSize = _a.maxSize;
+                limits[0] = assertSize(minSize, wrapSize, 0);
+                limits[1] = assertSize(maxSize, wrapSize);
+            }
+            return limits;
+        });
+    }, [children, wrapSize]);
+    var sizes = useMemo(function () {
+        var count = 0;
+        var curSum = 0;
+        var res = children.map(function (_child, index) {
+            var size = clampSize(assertSize(propSizes[index], wrapSize), paneLimitSizes[index]);
+            if (size === Infinity) {
+                count = count + 1;
+            }
+            else {
+                curSum = curSum + size;
+            }
+            return size;
+        });
+        // resize or illegal size input,recalculate pane sizes
+        if (curSum > wrapSize || (!count && curSum < wrapSize)) {
+            var cacheNum_1 = (curSum - wrapSize) / curSum;
+            return res.map(function (size) {
+                return size === Infinity ? 0 : size - size * cacheNum_1;
+            });
+        }
+        if (count > 0) {
+            var average_1 = (wrapSize - curSum) / count;
+            return res.map(function (size) {
+                return size === Infinity ? average_1 : size;
+            });
+        }
+        return res;
+    }, [
+        JSON.stringify(propSizes),
+        JSON.stringify(paneLimitSizes),
+        children.length,
+        wrapSize,
+    ]);
+    var sashPosSizes = useMemo(function () { return sizes.reduce(function (a, b) { return __spreadArray(__spreadArray([], a, true), [a[a.length - 1] + b], false); }, [0]); }, [JSON.stringify(sizes)]);
+    var handleMouseDown = useCallback(function (x, y) {
+        var _a, _b;
+        (_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add(s['SplitView--disable-select']);
+        axis.current = { x: x, y: y };
+        cacheSizes.current = { sizes: sizes, sashPosSizes: sashPosSizes };
+        setDragging(true);
+        onDragStart();
+    }, [onDragStart, sizes, sashPosSizes]);
+    var handleMouseUp = useCallback(function () {
+        var _a, _b;
+        (_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(s['SplitView--disable-select']);
+        setDragging(false);
+        onDragEnd();
+    }, [onDragEnd]);
+    var handleMouseMove = useCallback(function (x, y, i) {
+        var curAxis = { x: x, y: y };
+        var distanceX = curAxis[splitAxis] - axis.current[splitAxis];
+        var leftBorder = -Math.min(sizes[i] - paneLimitSizes[i][0], paneLimitSizes[i + 1][1] - sizes[i + 1]);
+        var rightBorder = Math.min(sizes[i + 1] - paneLimitSizes[i + 1][0], paneLimitSizes[i][1] - sizes[i]);
+        if (distanceX < leftBorder) {
+            distanceX = leftBorder;
+        }
+        if (distanceX > rightBorder) {
+            distanceX = rightBorder;
+        }
+        var nextSizes = __spreadArray([], sizes, true);
+        nextSizes[i] += distanceX;
+        nextSizes[i + 1] -= distanceX;
+        onChange(nextSizes);
+    }, [paneLimitSizes, onChange]);
+    var paneFollow = !(performanceMode && isDragging);
+    var paneSizes = paneFollow ? sizes : cacheSizes.current.sizes;
+    var panePoses = paneFollow ? sashPosSizes : cacheSizes.current.sashPosSizes;
+    return (React.createElement("div", { className: classNames(s.SplitView, split === 'vertical' && s['SplitView--vertical'], split === 'horizontal' && s['SplitView--horizontal'], isDragging && s['SplitView--dragging']), ref: wrapper },
+        children.map(function (childNode, childIndex) {
+            var _a;
+            var isPane = childNode.type === SplitViewPane;
+            var paneProps = isPane ? childNode.props : {};
+            return (React.createElement(SplitViewPane
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            , { 
+                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                key: childIndex, style: __assign(__assign({}, paneProps.style), (_a = {}, _a[sizeName] = paneSizes[childIndex], _a[splitPos] = panePoses[childIndex], _a)) }, isPane ? paneProps.children : childNode));
+        }),
+        sashPosSizes.slice(1, -1).map(function (posSize, index) {
+            var _a;
+            return (React.createElement(SplitViewSash
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            , { 
+                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                key: index, allowResize: allowResize, split: split, style: (_a = {},
+                    _a[sizeName] = resizerSize,
+                    _a[splitPos] = posSize - resizerSize / 2,
+                    _a), onMouseDown: handleMouseDown, onMouseMove: function (x, y) { return handleMouseMove(x, y, index); }, onMouseUp: handleMouseUp, action: sashAction }));
+        })));
+};
+/**
+ * Convert size to absolute number or Infinity
+ * SplitPane allows sizes in string and number, but the state sizes only support number,
+ * so convert string and number to number in here
+ * 'auto' -> divide the remaining space equally
+ * 'xxxpx' -> xxx
+ * 'xxx%' -> wrapper.size * xxx/100
+ *  xxx -> xxx
+ */
+function assertSize(size, sum, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = Infinity; }
+    if (typeof size === 'undefined')
+        return defaultValue;
+    if (typeof size === 'number')
+        return size;
+    if (size.endsWith('%'))
+        return sum * (+size.replace('%', '') / 100);
+    if (size.endsWith('px'))
+        return +size.replace('px', '');
+    return defaultValue;
+}
+function clampSize(size, minMax) {
+    return Math.max(minMax[0], Math.min(minMax[1], size));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/SplitView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SplitView/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/SplitView/styles.module.css.json

@@ -0,0 +1 @@
+{ "SplitView": "_SplitView_1oi17_1", "SplitView--dragging": "_SplitView--dragging_1oi17_8", "SplitView--vertical": "_SplitView--vertical_1oi17_8", "SplitView--horizontal": "_SplitView--horizontal_1oi17_12", "SplitView--disable-select": "_SplitView--disable-select_1oi17_16", "SplitViewPane": "_SplitViewPane_1oi17_20" }

package/dist/esm/SplitView/types.d.ts

@@ -0,0 +1,8 @@
+export declare type IAxis = {
+    x: number;
+    y: number;
+};
+export declare type ICacheSizes = {
+    sizes: (string | number)[];
+    sashPosSizes: (string | number)[];
+};

package/dist/esm/SplitView/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/SplitView/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/SplitView/types.ts"],"names":[],"mappings":""}

package/dist/esm/Tooltip/Tooltip/index.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { TooltipOptions } from '../utils';
+export declare type TooltipProps = {
+    children?: React.ReactNode;
+} & TooltipOptions;
+/**
+ * Tooltip wrapper component that provides context for TooltipTrigger and TooltipContent.
+ *
+ * This is a compound component pattern. The Tooltip component itself doesn't render anything,
+ * but provides the necessary context for its children (TooltipTrigger and TooltipContent).
+ *
+ * @example Basic tooltip
+ *
+ * Create a simple tooltip that appears when hovering over a button:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip>
+ *     <TooltipTrigger>
+ *       <Button>Hover me</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       This is helpful information!
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ *
+ * @example Tooltip with custom placement
+ *
+ * Control where the tooltip appears relative to its trigger using the `placement` prop:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip placement="right">
+ *     <TooltipTrigger>
+ *       <Button>Right tooltip</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       Appears on the right side
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ *
+ * @example Multiple tooltips
+ *
+ * Use multiple tooltips on the same page to provide contextual help for different actions:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex', gap: 'var(--spacing-m)' }}>
+ *     <Tooltip>
+ *       <TooltipTrigger>
+ *         <Button leftIcon={<SaveIcon />} />
+ *       </TooltipTrigger>
+ *       <TooltipContent>
+ *         Save changes (⌘S)
+ *       </TooltipContent>
+ *     </Tooltip>
+ *
+ *     <Tooltip>
+ *       <TooltipTrigger>
+ *         <Button leftIcon={<DeleteIcon />} />
+ *       </TooltipTrigger>
+ *       <TooltipContent>
+ *         Delete item
+ *       </TooltipContent>
+ *     </Tooltip>
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export declare function Tooltip({ children, ...options }: TooltipProps): JSX.Element;

package/dist/esm/Tooltip/Tooltip/index.js

@@ -0,0 +1,89 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { TooltipContext, useTooltip } from '../utils';
+/**
+ * Tooltip wrapper component that provides context for TooltipTrigger and TooltipContent.
+ *
+ * This is a compound component pattern. The Tooltip component itself doesn't render anything,
+ * but provides the necessary context for its children (TooltipTrigger and TooltipContent).
+ *
+ * @example Basic tooltip
+ *
+ * Create a simple tooltip that appears when hovering over a button:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip>
+ *     <TooltipTrigger>
+ *       <Button>Hover me</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       This is helpful information!
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ *
+ * @example Tooltip with custom placement
+ *
+ * Control where the tooltip appears relative to its trigger using the `placement` prop:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip placement="right">
+ *     <TooltipTrigger>
+ *       <Button>Right tooltip</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       Appears on the right side
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ *
+ * @example Multiple tooltips
+ *
+ * Use multiple tooltips on the same page to provide contextual help for different actions:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex', gap: 'var(--spacing-m)' }}>
+ *     <Tooltip>
+ *       <TooltipTrigger>
+ *         <Button leftIcon={<SaveIcon />} />
+ *       </TooltipTrigger>
+ *       <TooltipContent>
+ *         Save changes (⌘S)
+ *       </TooltipContent>
+ *     </Tooltip>
+ *
+ *     <Tooltip>
+ *       <TooltipTrigger>
+ *         <Button leftIcon={<DeleteIcon />} />
+ *       </TooltipTrigger>
+ *       <TooltipContent>
+ *         Delete item
+ *       </TooltipContent>
+ *     </Tooltip>
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export function Tooltip(_a) {
+    var children = _a.children, options = __rest(_a, ["children"]);
+    // This can accept any props as options, e.g. `placement`,
+    // or other positioning options.
+    var tooltip = useTooltip(options);
+    return (React.createElement(TooltipContext.Provider, { value: tooltip }, children));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/Tooltip/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Tooltip/Tooltip/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAkB,UAAU,EAAE,MAAM,UAAU,CAAC;AAMtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,MAAM,UAAU,OAAO,CAAC,EAAsC;IAApC,IAAA,QAAQ,cAAA,EAAK,OAAO,cAAtB,YAAwB,CAAF;IAC5C,0DAA0D;IAC1D,gCAAgC;IAChC,IAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IACpC,OAAO,CACL,oBAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,IACpC,QAAQ,CACe,CAC3B,CAAC;AACJ,CAAC"}

package/dist/esm/Tooltip/TooltipContent/index.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+export declare type TooltipContentProps = {
+    children?: React.ReactNode;
+};
+/**
+ * TooltipContent contains the content displayed in the floating tooltip.
+ *
+ * The content is automatically wrapped in a Canvas component to inherit the DatoCMS
+ * theme and styling. The tooltip uses a portal to render outside the normal DOM
+ * hierarchy, ensuring proper positioning and z-index stacking.
+ *
+ * @example Simple text tooltip
+ *
+ * Display plain text in a tooltip to provide helpful information:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip>
+ *     <TooltipTrigger>
+ *       <Button>Delete</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       This action cannot be undone
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ *
+ * @example Rich content tooltip
+ *
+ * Include formatted content with custom styles for more detailed information:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip placement="right">
+ *     <TooltipTrigger>
+ *       <Button leftIcon={<HelpIcon />}>Help</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       <div>
+ *         <strong>Need assistance?</strong>
+ *         <p style={{ margin: '5px 0 0 0', fontSize: 'var(--font-size-xs)' }}>
+ *           Contact support@example.com
+ *         </p>
+ *       </div>
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ *
+ * @example Tooltip with keyboard shortcut
+ *
+ * Combine tooltips with the HotKey component to show keyboard shortcuts:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip>
+ *     <TooltipTrigger>
+ *       <Button leftIcon={<SaveIcon />}>Save</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       <HotKey hotkey="mod+s" label="Save changes" />
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ */
+export declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/Tooltip/TooltipContent/index.js

@@ -0,0 +1,118 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { FloatingPortal, useDelayGroup, useDelayGroupContext, useMergeRefs, useTransitionStyles, } from '@floating-ui/react';
+import * as React from 'react';
+import { Canvas, useCtx } from '../../Canvas';
+import { getSharedPortalRoot, releaseSharedPortalRoot, useTooltipState, } from '../utils';
+import s from './styles.module.css.json';
+/**
+ * TooltipContent contains the content displayed in the floating tooltip.
+ *
+ * The content is automatically wrapped in a Canvas component to inherit the DatoCMS
+ * theme and styling. The tooltip uses a portal to render outside the normal DOM
+ * hierarchy, ensuring proper positioning and z-index stacking.
+ *
+ * @example Simple text tooltip
+ *
+ * Display plain text in a tooltip to provide helpful information:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip>
+ *     <TooltipTrigger>
+ *       <Button>Delete</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       This action cannot be undone
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ *
+ * @example Rich content tooltip
+ *
+ * Include formatted content with custom styles for more detailed information:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip placement="right">
+ *     <TooltipTrigger>
+ *       <Button leftIcon={<HelpIcon />}>Help</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       <div>
+ *         <strong>Need assistance?</strong>
+ *         <p style={{ margin: '5px 0 0 0', fontSize: 'var(--font-size-xs)' }}>
+ *           Contact support@example.com
+ *         </p>
+ *       </div>
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ *
+ * @example Tooltip with keyboard shortcut
+ *
+ * Combine tooltips with the HotKey component to show keyboard shortcuts:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Tooltip>
+ *     <TooltipTrigger>
+ *       <Button leftIcon={<SaveIcon />}>Save</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent>
+ *       <HotKey hotkey="mod+s" label="Save changes" />
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </Canvas>;
+ * ```
+ */
+export var TooltipContent = React.forwardRef(function TooltipContent(_a, propRef) {
+    var children = _a.children;
+    var ctx = useCtx();
+    var state = useTooltipState();
+    var _b = useDelayGroupContext(), isInstantPhase = _b.isInstantPhase, currentId = _b.currentId;
+    var ref = useMergeRefs([state.refs.setFloating, propRef]);
+    // Use the shared portal root
+    var portalRootRef = React.useRef(null);
+    React.useEffect(function () {
+        // Get the shared portal root and increment ref count
+        portalRootRef.current = getSharedPortalRoot();
+        // Cleanup function to release the shared portal root
+        return function () {
+            releaseSharedPortalRoot();
+        };
+    }, []);
+    useDelayGroup(state.context, { id: state.context.floatingId });
+    var instantDuration = 0;
+    var duration = 250;
+    var _c = useTransitionStyles(state.context, {
+        duration: isInstantPhase
+            ? {
+                open: instantDuration,
+                // `id` is this component's `id`
+                // `currentId` is the current group's `id`
+                close: currentId === state.context.floatingId ? duration : instantDuration,
+            }
+            : duration,
+        initial: {
+            opacity: 0,
+        },
+    }), isMounted = _c.isMounted, styles = _c.styles;
+    if (!isMounted)
+        return null;
+    return (React.createElement(FloatingPortal, { root: portalRootRef },
+        React.createElement(Canvas, { ctx: ctx, noAutoResizer: true },
+            React.createElement("div", __assign({ ref: ref, style: __assign(__assign({}, state.floatingStyles), styles) }, state.getFloatingProps(), { className: s.tooltip }), children))));
+});
+//# sourceMappingURL=index.js.map

package/dist/esm/Tooltip/TooltipContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Tooltip/TooltipContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,eAAe,GAChB,MAAM,UAAU,CAAC;AAClB,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAMzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,MAAM,CAAC,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAG5C,SAAS,cAAc,CAAC,EAAY,EAAE,OAAO;QAAnB,QAAQ,cAAA;IAClC,IAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,IAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAC1B,IAAA,KAAgC,oBAAoB,EAAE,EAApD,cAAc,oBAAA,EAAE,SAAS,eAA2B,CAAC;IAC7D,IAAM,GAAG,GAAG,YAAY,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5D,6BAA6B;IAC7B,IAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEhE,KAAK,CAAC,SAAS,CAAC;QACd,qDAAqD;QACrD,aAAa,CAAC,OAAO,GAAG,mBAAmB,EAAE,CAAC;QAE9C,qDAAqD;QACrD,OAAO;YACL,uBAAuB,EAAE,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,aAAa,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;IAE/D,IAAM,eAAe,GAAG,CAAC,CAAC;IAC1B,IAAM,QAAQ,GAAG,GAAG,CAAC;IAEf,IAAA,KAAwB,mBAAmB,CAAC,KAAK,CAAC,OAAO,EAAE;QAC/D,QAAQ,EAAE,cAAc;YACtB,CAAC,CAAC;gBACE,IAAI,EAAE,eAAe;gBACrB,gCAAgC;gBAChC,0CAA0C;gBAC1C,KAAK,EACH,SAAS,KAAK,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe;aACtE;YACH,CAAC,CAAC,QAAQ;QACZ,OAAO,EAAE;YACP,OAAO,EAAE,CAAC;SACX;KACF,CAAC,EAbM,SAAS,eAAA,EAAE,MAAM,YAavB,CAAC;IAEH,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAE5B,OAAO,CACL,oBAAC,cAAc,IAAC,IAAI,EAAE,aAAa;QACjC,oBAAC,MAAM,IAAC,GAAG,EAAE,GAAG,EAAE,aAAa;YAC7B,sCACE,GAAG,EAAE,GAAG,EACR,KAAK,wBACA,KAAK,CAAC,cAAc,GACpB,MAAM,KAEP,KAAK,CAAC,gBAAgB,EAAE,IAC5B,SAAS,EAAE,CAAC,CAAC,OAAO,KAEnB,QAAQ,CACL,CACC,CACM,CAClB,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/esm/Tooltip/TooltipContent/styles.module.css.json

@@ -0,0 +1 @@
+{ "tooltip": "_tooltip_3z5rn_1" }