@stack-spot/ai-chat-widget 0.11.0 → 1.1.0

package/dist/components/OverlayMenu.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable no-empty-pattern */
+/* eslint-disable react/display-name */
 import { IconBox, Text } from '@citric/core';
+import { useKeyboardControls } from '@stack-spot/portal-components';
 import { theme } from '@stack-spot/portal-theme';
-import { useMemo } from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
 import { styled } from 'styled-components';
 import { Tooltip } from './Tooltip/index.js';
 import { useTooltip } from './Tooltip/context.js';
@@ -30,8 +31,9 @@ const MenuList = styled.ul `
       gap: 8px;
       background-color: transparent;
       border: none;
+      outline: none;
 
-      &:hover {
+      &:hover, &:focus {
         background-color: ${theme.color.light[500]};
       }
     }
@@ -44,15 +46,34 @@ const StyledButton = styled.button `
     fill: ${({ $color }) => $color || theme.color.light.contrastText};
   }
 `;
-export const OverlayMenu = ({ actions, children, className, position, style }) => {
+const Menu = ({ actions, trigger }) => {
     const tooltip = useTooltip();
-    const menu = useMemo(() => {
-        const items = actions.map(({ label, onClick, className, color, icon, style }) => (_jsx("li", { className: className, style: style, children: _jsxs(StyledButton, { "$color": color, onClick: () => {
+    const ref = useRef(null);
+    useKeyboardControls({
+        querySelectors: 'button',
+        onPressEscape: () => {
+            tooltip.hide();
+            trigger.current?.focus();
+        },
+        ref,
+    }, []);
+    return (_jsx(MenuList, { ref: ref, children: actions.map(({ label, onClick, className, color, icon, style }) => (_jsx("li", { className: className, style: style, children: _jsxs(StyledButton, { "$color": color, onClick: () => {
                     onClick();
                     tooltip.hide();
-                }, children: [_jsx(IconBox, { children: icon }), _jsx(Text, { children: label })] }) }, label)));
-        return _jsx(MenuList, { children: items });
-    }, [actions]);
-    return (_jsx(Tooltip, { content: menu, custom: true, position: position, className: className, style: style, triggeredBy: "click", children: children }));
+                }, children: [_jsx(IconBox, { children: icon }), _jsx(Text, { children: label })] }) }, label))) }));
 };
+/**
+ * A floating menu that shows up when the user clicks the children.
+ *
+ * This uses the tooltip component to build the menu.
+ */
+export const OverlayMenu = forwardRef(({ actions, children, className, position, style }, externalRef) => {
+    const localRef = useRef(null);
+    const ref = externalRef ?? localRef;
+    const tooltip = useTooltip();
+    const onShow = useCallback(() => {
+        tooltip.tooltipRef.current?.querySelector('button')?.focus();
+    }, []);
+    return (_jsx(Tooltip, { content: _jsx(Menu, { actions: actions, trigger: ref }), custom: true, position: position, className: className, style: style, triggeredBy: "click", onShow: onShow, ref: ref, children: children }));
+});
 //# sourceMappingURL=OverlayMenu.js.map

package/dist/components/OverlayMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayMenu.js","sourceRoot":"","sources":["../../src/components/OverlayMenu.tsx"],"names":[],"mappings":";AAAA,qCAAqC;AACrC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAa,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAQ9C,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;sBAKJ,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;4BAqBhB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;CAIjD,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAgC;WACvD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;YAGvD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;CAEnE,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAS,EAAE,EAAE;IACtF,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC/E,aAAgB,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,YAChD,MAAC,YAAY,cAAS,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE;oBACzC,OAAO,EAAE,CAAA;oBACT,OAAO,CAAC,IAAI,EAAE,CAAA;gBAChB,CAAC,aACC,KAAC,OAAO,cAAE,IAAI,GAAW,EACzB,KAAC,IAAI,cAAE,KAAK,GAAQ,IACP,IAPR,KAAK,CAQT,CACN,CAAC,CAAA;QACF,OAAO,KAAC,QAAQ,cAAE,KAAK,GAAY,CAAA;IACrC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACb,OAAO,CACL,KAAC,OAAO,IAAC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAC,OAAO,YACvG,QAAQ,GACD,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"OverlayMenu.js","sourceRoot":"","sources":["../../src/components/OverlayMenu.tsx"],"names":[],"mappings":"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"}

package/dist/components/ProgressBar.d.ts

@@ -1,11 +1,33 @@
 import { WithStyle } from '@stack-spot/portal-theme';
 interface Props extends WithStyle {
+    /**
+     * Whether or not the progress bar is visible.
+     */
     visible?: boolean;
+    /**
+     * When true, the progress bar becomes very colorful and bright.
+     */
     shimmer?: boolean;
+    /**
+     * Color to use in the progress bar that appears in the foreground. Arrays create linear gradients.
+     * @default primary.500 if shimmer is false, white otherwise.
+     */
     foregroundColor?: string | string[];
+    /**
+     * Color to use in the progress bar that appears in the background. Arrays create linear gradients.
+     * @default light.500 if shimmer is false, a transparent white otherwise.
+     */
     backgroundColor?: string | string[];
+    /**
+     * Only useful if `shimmer` is true. This allows to customize the colors in the shimmering effect. Arrays create linear gradients.
+     * @default ['#ff6633', '#d668cd', '#ff6633', '#FFF8', '#299cf4']
+     */
     shimmerColor?: string | string[];
 }
+/**
+ * A progress bar with indefinite progress report. This renders a narrower bar on top of larger one that animates from the left to the
+ * right.
+ */
 export declare const ProgressBar: ({ visible, shimmer, backgroundColor, foregroundColor, shimmerColor, className, style, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ProgressBar.d.ts.map

package/dist/components/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGxE,UAAU,KAAM,SAAQ,SAAS;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAClC;AAoHD,eAAO,MAAM,WAAW,4FAQrB,KAAK,4CAmBP,CAAA"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGxE,UAAU,KAAM,SAAQ,SAAS;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACpC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACpC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAClC;AAqHD;;;GAGG;AACH,eAAO,MAAM,WAAW,4FAQrB,KAAK,4CAmBP,CAAA"}

package/dist/components/ProgressBar.js

@@ -13,6 +13,7 @@ function gradientFromColorArray(colors) {
     }
     return `linear-gradient(to right, ${partials.join(', ')})`;
 }
+// the shimmering effect requires more space
 const SHIMMER_PADDING = '10px';
 const Styled = styled.div `
   margin: 7px 0;
@@ -113,6 +114,10 @@ const Styled = styled.div `
     }
   }
 `;
+/**
+ * A progress bar with indefinite progress report. This renders a narrower bar on top of larger one that animates from the left to the
+ * right.
+ */
 export const ProgressBar = ({ visible = true, shimmer, backgroundColor = shimmer ? 'rgba(255, 255, 255, 0.4)' : theme.color.light[500], foregroundColor = shimmer ? ['#FFF0', '#FFF', '#FFF0'] : theme.color.primary[500], shimmerColor = ['#ff6633', '#d668cd', '#ff6633', '#FFF8', '#299cf4'], className, style, }) => {
     const $bg = Array.isArray(backgroundColor) ? backgroundColor : [backgroundColor];
     const $fg = Array.isArray(foregroundColor) ? foregroundColor : [...$bg, foregroundColor, ...$bg];

package/dist/components/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAa,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AA4B1C,SAAS,sBAAsB,CAAC,MAAgB;IAC9C,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,MAAM,CAAC,CAAC,CAAC,CAAA;IACzC,MAAM,IAAI,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IACtC,MAAM,QAAQ,GAAa,EAAE,CAAA;IAC7B,IAAI,OAAO,GAAG,CAAC,CAAA;IACf,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,QAAQ,CAAC,IAAI,CAAC,GAAG,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;QAChD,OAAO,IAAI,IAAI,CAAA;IACjB,CAAC;IACD,OAAO,6BAA6B,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;AAC5D,CAAC;AAED,4CAA4C;AAC5C,MAAM,eAAe,GAAG,MAAM,CAAA;AAE9B,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAsD;;;;;;;;;;;;;;;iBAe9D,eAAe;;;;;;;cAOlB,eAAe;;eAEd,eAAe;;;;;;;;;;;;;sBAaR,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,sBAAsB,CAAC,GAAG,CAAC;;;;;;;;;;;;;QAatD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;;;;;;mBAMP,QAAQ,CAAC,MAAM,GAAG,GAAG;wBAChB,sBAAsB,CAAC,QAAQ,CAAC;YAC5C,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,4BAA4B,QAAQ,CAAC,MAAM,+BAA+B,CAAC,CAAC,CAAC,EAAE;;;;;;;;qBAQ5F,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,GAAG;;;OAGzC;;;;;;;kBAOW,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,sBAAsB,CAAC,GAAG,CAAC;;;;;;;;;oBAStC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,sBAAsB,CAAC,GAAG,CAAC;;;;;;;;;;;;;CAa3D,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,GAAG,IAAI,EACd,OAAO,EACP,eAAe,GAAG,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,EAC/E,eAAe,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EACjF,YAAY,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,EACpE,SAAS,EACT,KAAK,GACC,EAAE,EAAE;IACV,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAA;IAChF,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,eAAe,EAAE,GAAG,GAAG,CAAC,CAAA;IAChG,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;IAC5E,MAAM,QAAQ,GAAG,cAAK,SAAS,EAAC,cAAc,GAAO,CAAA;IACrD,MAAM,MAAM,GAAG,OAAO;QACpB,CAAC,CAAC,CACA,eAAK,SAAS,EAAC,SAAS,aACtB,cAAK,SAAS,EAAC,QAAQ,GAAO,EAC9B,cAAK,SAAS,EAAC,eAAe,GAAO,EACpC,QAAQ,IACL,CACP;QACD,CAAC,CAAC,QAAQ,CAAA;IACZ,OAAO,CACL,KAAC,MAAM,IAAC,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,SAAO,GAAG,SAAO,GAAG,cAAY,QAAQ,YACpH,MAAM,GACA,CACV,CAAA;AACH,CAAC,CAAA"}

package/dist/components/QuickStartButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuickStartButton.d.ts","sourceRoot":"","sources":["../../src/components/QuickStartButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,UAAU,KAAM,SAAQ,YAAY,EAAE,SAAS;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsCD,eAAO,MAAM,gBAAgB,kEAAmE,KAAK,4CAKpG,CAAA"}
+{"version":3,"file":"QuickStartButton.d.ts","sourceRoot":"","sources":["../../src/components/QuickStartButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,UAAU,KAAM,SAAQ,YAAY,EAAE,SAAS;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAyCD,eAAO,MAAM,gBAAgB,kEAAmE,KAAK,4CAKpG,CAAA"}

package/dist/components/QuickStartButton.js

@@ -2,6 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconBox, Text } from '@citric/core';
 import { theme } from '@stack-spot/portal-theme';
 import { styled } from 'styled-components';
+/**
+ * A button for quick starting a conversation.
+ */
 const QuickButton = styled.button `
   display: flex;
   flex-direction: column;

package/dist/components/QuickStartButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickStartButton.js","sourceRoot":"","sources":["../../src/components/QuickStartButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAa,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAO1C,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAmC;;;;;sBAK9C,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;kBAM1B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;oBAMpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;wBAQlB,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,aAAa;MACnD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;IACxB,CAAC,CAAC;;gBAEU,MAAM;QACd;IACJ,CAAC,CAAC,EACN;;CAEC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAS,EAAE,EAAE,CAAC,CACxG,MAAC,WAAW,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,YAAU,KAAK,SAAO,UAAU,aAC/F,KAAC,OAAO,mCAAc,IAAI,GAAW,EACrC,KAAC,IAAI,cAAE,KAAK,GAAQ,IACR,CACf,CAAA"}
+{"version":3,"file":"QuickStartButton.js","sourceRoot":"","sources":["../../src/components/QuickStartButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAa,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAO1C;;GAEG;AACH,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAmC;;;;;sBAK9C,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;kBAM1B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;oBAMpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;wBAQlB,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,aAAa;MACnD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;IACxB,CAAC,CAAC;;gBAEU,MAAM;QACd;IACJ,CAAC,CAAC,EACN;;CAEC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAS,EAAE,EAAE,CAAC,CACxG,MAAC,WAAW,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,YAAU,KAAK,SAAO,UAAU,aAC/F,KAAC,OAAO,mCAAc,IAAI,GAAW,EACrC,KAAC,IAAI,cAAE,KAAK,GAAQ,IACR,CACf,CAAA"}

package/dist/components/RightPanelForm.d.ts

@@ -1,5 +1,8 @@
 import { PropsOf } from '../types.js';
 declare const Form: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, never>> & string;
+/**
+ * A form that goes into a right panel. This controls style, errors, loading focus and form submission.
+ */
 export declare const RightPanelForm: ({ children, onSubmit, ...props }: PropsOf<typeof Form>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RightPanelForm.d.ts.map

package/dist/components/RightPanelForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RightPanelForm.d.ts","sourceRoot":"","sources":["../../src/components/RightPanelForm.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAGlC,QAAA,MAAM,IAAI,8OAmCT,CAAA;AAED,eAAO,MAAM,cAAc,qCAAsC,OAAO,CAAC,OAAO,IAAI,CAAC,4CAYpF,CAAA"}
+{"version":3,"file":"RightPanelForm.d.ts","sourceRoot":"","sources":["../../src/components/RightPanelForm.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAIlC,QAAA,MAAM,IAAI,8OAmCT,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,qCAAsC,OAAO,CAAC,OAAO,IAAI,CAAC,4CAcpF,CAAA"}

package/dist/components/RightPanelForm.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Card } from '@citric/ui';
 import { styled } from 'styled-components';
+import { AutoFocus } from './AutoFocus.js';
 import { FallbackBoundary } from './FallbackBoundary/index.js';
 const Form = styled.form `
   display: flex;
@@ -38,8 +39,11 @@ const Form = styled.form `
     fill: transparent;
   }
 `;
-export const RightPanelForm = ({ children, onSubmit, ...props }) => (_jsx(FallbackBoundary, { children: _jsx(Form, { ...props, onSubmit: (e) => {
-            e.preventDefault();
-            onSubmit?.(e);
-        }, children: children }) }));
+/**
+ * A form that goes into a right panel. This controls style, errors, loading focus and form submission.
+ */
+export const RightPanelForm = ({ children, onSubmit, ...props }) => (_jsx(FallbackBoundary, { children: _jsx(AutoFocus, { children: _jsx(Form, { ...props, onSubmit: (e) => {
+                e.preventDefault();
+                onSubmit?.(e);
+            }, children: children }) }) }));
 //# sourceMappingURL=RightPanelForm.js.map

package/dist/components/RightPanelForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightPanelForm.js","sourceRoot":"","sources":["../../src/components/RightPanelForm.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgCpB,IAAI;;;CAGP,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,EAAE,EAAE,CAAC,CACxF,KAAC,gBAAgB,cACf,KAAC,IAAI,OACC,KAAK,EACT,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAA;QACf,CAAC,YAEA,QAAQ,GACJ,GACU,CACpB,CAAA"}
+{"version":3,"file":"RightPanelForm.js","sourceRoot":"","sources":["../../src/components/RightPanelForm.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgCpB,IAAI;;;CAGP,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,EAAE,EAAE,CAAC,CACxF,KAAC,gBAAgB,cACf,KAAC,SAAS,cACR,KAAC,IAAI,OACC,KAAK,EACT,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAA;YACf,CAAC,YAEA,QAAQ,GACJ,GACG,GACK,CACpB,CAAA"}

package/dist/components/RightPanelTabs.d.ts

@@ -5,6 +5,9 @@ interface Tab {
 interface Props {
     tabs: Tab[];
 }
+/**
+ * Tabs for the right panel content.
+ */
 export declare const RightPanelTabs: ({ tabs }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RightPanelTabs.d.ts.map

package/dist/components/RightPanelTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RightPanelTabs.d.ts","sourceRoot":"","sources":["../../src/components/RightPanelTabs.tsx"],"names":[],"mappings":"AAKA,UAAU,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,UAAU,KAAK;IACb,IAAI,EAAE,GAAG,EAAE,CAAC;CACb;AAcD,eAAO,MAAM,cAAc,aAAc,KAAK,4CAa7C,CAAA"}
+{"version":3,"file":"RightPanelTabs.d.ts","sourceRoot":"","sources":["../../src/components/RightPanelTabs.tsx"],"names":[],"mappings":"AAKA,UAAU,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,UAAU,KAAK;IACb,IAAI,EAAE,GAAG,EAAE,CAAC;CACb;AAcD;;GAEG;AACH,eAAO,MAAM,cAAc,aAAc,KAAK,4CAa7C,CAAA"}

package/dist/components/RightPanelTabs.js

@@ -13,6 +13,9 @@ const StyledTabsItem = styled(TabsItem) `
   flex: 1;
   overflow: hidden;
 `;
+/**
+ * Tabs for the right panel content.
+ */
 export const RightPanelTabs = ({ tabs }) => {
     const [currentTab, setCurrentTab] = useState(0);
     const tabItems = useMemo(() => tabs.map(({ content, title }) => (_jsx(StyledTabsItem, { title: title, children: _jsx(RightPanelForm, { children: content }) }, title))), [tabs]);

package/dist/components/RightPanelTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightPanelTabs.js","sourceRoot":"","sources":["../../src/components/RightPanelTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAWjD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAK9B,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;CAGtC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,IAAI,EAAS,EAAE,EAAE;IAChD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC/C,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC9D,KAAC,cAAc,IAAa,KAAK,EAAE,KAAK,YACtC,KAAC,cAAc,cAAE,OAAO,GAAkB,IADvB,KAAK,CAET,CAClB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,KAAC,UAAU,IAAC,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,YACzD,QAAQ,GACE,CACd,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"RightPanelTabs.js","sourceRoot":"","sources":["../../src/components/RightPanelTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAWjD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAK9B,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;CAGtC,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,IAAI,EAAS,EAAE,EAAE;IAChD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC/C,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC9D,KAAC,cAAc,IAAa,KAAK,EAAE,KAAK,YACtC,KAAC,cAAc,cAAE,OAAO,GAAkB,IADvB,KAAK,CAET,CAClB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,KAAC,UAAU,IAAC,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,YACzD,QAAQ,GACE,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/components/TabManager.d.ts

@@ -29,6 +29,12 @@ interface Props<T, Key extends React.Key> {
      */
     renderLabel: (tab: T) => React.ReactElement;
 }
+/**
+ * Renders and manages a list of tabs. With this, tabs can be selected and removed. Furthermore, extra buttons can be placed after all tabs,
+ * e.g. a button to add more tabs.
+ *
+ * Used for the chat tabs.
+ */
 export declare function TabManager<T, Key extends React.Key>({ active, tabs, keygen, onRemove, onSelect, renderLabel, buttons }: Props<T, Key>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TabManager.d.ts.map

package/dist/components/TabManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabManager.d.ts","sourceRoot":"","sources":["../../src/components/TabManager.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGvC,UAAU,KAAK,CAAC,CAAC,EAAE,GAAG,SAAS,KAAK,CAAC,GAAG;IACtC;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,GAAG,CAAC;IACxB;;OAEG;IACH,MAAM,EAAE,GAAG,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;OAEG;IACH,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;CAC7C;AA0HD,wBAAgB,UAAU,CAAC,CAAC,EAAE,GAAG,SAAS,KAAK,CAAC,GAAG,EACjD,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAY,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,2CAgDvF"}
+{"version":3,"file":"TabManager.d.ts","sourceRoot":"","sources":["../../src/components/TabManager.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGvC,UAAU,KAAK,CAAC,CAAC,EAAE,GAAG,SAAS,KAAK,CAAC,GAAG;IACtC;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,GAAG,CAAC;IACxB;;OAEG;IACH,MAAM,EAAE,GAAG,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;OAEG;IACH,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;CAC7C;AA4HD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,GAAG,SAAS,KAAK,CAAC,GAAG,EACjD,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAY,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,2CAgDvF"}

package/dist/components/TabManager.js

@@ -8,7 +8,9 @@ import { last } from 'lodash';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { styled } from 'styled-components';
 import { FadingOverflow } from './FadingOverflow.js';
+// The size of extra buttons placed after the tabs.
 const EXTRA_BTN_SIZE = 24;
+// The margin of extra buttons placed after the tabs.
 const EXTRA_BTN_MARGIN = 8;
 const Tabs = styled.nav `
   width: 100%;
@@ -126,6 +128,12 @@ const Tabs = styled.nav `
     }
   }
 `;
+/**
+ * Renders and manages a list of tabs. With this, tabs can be selected and removed. Furthermore, extra buttons can be placed after all tabs,
+ * e.g. a button to add more tabs.
+ *
+ * Used for the chat tabs.
+ */
 export function TabManager({ active, tabs, keygen, onRemove, onSelect, renderLabel, buttons = [] }) {
     const t = useTranslate(dictionary);
     const tabList = useRef(null);

package/dist/components/TabManager.js.map

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

package/dist/components/Tooltip/Tooltip.d.ts

@@ -2,11 +2,36 @@ import { WithStyle } from '@stack-spot/portal-theme';
 import { WithChildren } from '../../types.js';
 import { TooltipPosition } from './types.js';
 interface Props extends WithChildren, WithStyle {
+    /**
+     * The content of the tooltip. Can be either a string or a Rect Element.
+     */
     content: React.ReactNode;
+    /**
+     * Where to position the tooltip relative to the element that triggered it.
+     */
     position?: TooltipPosition;
+    /**
+     * A tooltip can be triggered either by hovering an element or by clicking it.
+     * @default 'hover'
+     */
     triggeredBy?: 'click' | 'hover';
+    /**
+     * If true, no style is applied to the tooltip, letting you customize it however you want to.
+     */
     custom?: boolean;
+    /**
+     * Function to run whenever the tooltip is shown.
+     */
+    onShow?: () => void;
+    /**
+     * Function to run whenever the tooltip is hidden.
+     */
+    onHide?: () => void;
 }
-export declare const Tooltip: ({ content, custom, position, triggeredBy, children, className, style }: Props) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Shows a tooltip for its children. This tooltip element is always reused and placed at a root level in order to not be cut out by
+ * hidden overflows in the children and its ascendants.
+ */
+export declare const Tooltip: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
 export {};
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,UAAU,KAAM,SAAQ,YAAY,EAAE,SAAS;IAC7C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,2EAAsF,KAAK,4CAqB9G,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,UAAU,KAAM,SAAQ,YAAY,EAAE,SAAS;IAC7C;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,kGAoClB,CAAA"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,17 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react/display-name */
 import { Text } from '@citric/core';
+import { forwardRef } from 'react';
 import { useTooltip } from './context.js';
 import { DefaultTooltip } from './style.js';
-export const Tooltip = ({ content, custom, position, triggeredBy = 'hover', children, className, style }) => {
+/**
+ * Shows a tooltip for its children. This tooltip element is always reused and placed at a root level in order to not be cut out by
+ * hidden overflows in the children and its ascendants.
+ */
+export const Tooltip = forwardRef(({ content, custom, position, triggeredBy = 'hover', onHide, onShow, children, className, style }, ref) => {
     const api = useTooltip();
-    function show(e, hideOnClickOutside) {
-        api.show({
+    async function show(e, hideOnClickOutside) {
+        await api.show({
             content: custom ? content : _jsx(DefaultTooltip, { children: _jsx(Text, { appearance: "microtext1", children: content }) }),
             anchor: e.target,
             position,
             hideOnClickOutside,
         });
+        onShow?.();
     }
-    return (_jsx("div", { ...(triggeredBy === 'hover' ? { onMouseEnter: show, onMouseLeave: () => api.hide() } : { onClick: (e) => show(e, true) }), className: className, style: style, tabIndex: triggeredBy === 'click' ? 0 : undefined, children: children }));
-};
+    function hide() {
+        api.hide();
+        onHide?.();
+    }
+    return (_jsx("div", { ...(triggeredBy === 'hover'
+            ? { onMouseEnter: show, onMouseLeave: hide }
+            : { onClick: (e) => show(e, true), onKeyDown: (e) => e.key === 'Enter' && show(e, true) }), className: className, style: style, tabIndex: triggeredBy === 'click' ? 0 : undefined, role: triggeredBy === 'click' ? 'button' : undefined, ref: ref, children: children }));
+});
 //# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAGnC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAUxC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAS,EAAE,EAAE;IACjH,MAAM,GAAG,GAAG,UAAU,EAAE,CAAA;IAExB,SAAS,IAAI,CAAC,CAA+C,EAAE,kBAA4B;QACzF,GAAG,CAAC,IAAI,CAAC;YACP,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAC,cAAc,cAAC,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAAE,OAAO,GAAQ,GAAiB;YAC3G,MAAM,EAAE,CAAC,CAAC,MAAqB;YAC/B,QAAQ;YACR,kBAAkB;SACnB,CAAC,CAAA;IACJ,CAAC;IACD,OAAO,CACL,iBACM,CAAC,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,EAC1H,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,YAEhD,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AA+BxC;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAwB,CACvD,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAChG,GAAG,EACH,EAAE;IACF,MAAM,GAAG,GAAG,UAAU,EAAE,CAAA;IAExB,KAAK,UAAU,IAAI,CAAC,CAAgB,EAAE,kBAA4B;QAChE,MAAM,GAAG,CAAC,IAAI,CAAC;YACb,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAC,cAAc,cAAC,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAAE,OAAO,GAAQ,GAAiB;YAC3G,MAAM,EAAE,CAAC,CAAC,MAAqB;YAC/B,QAAQ;YACR,kBAAkB;SACnB,CAAC,CAAA;QACF,MAAM,EAAE,EAAE,CAAA;IACZ,CAAC;IAED,SAAS,IAAI;QACX,GAAG,CAAC,IAAI,EAAE,CAAA;QACV,MAAM,EAAE,EAAE,CAAA;IACZ,CAAC;IAED,OAAO,CACL,iBACM,CAAC,WAAW,KAAK,OAAO;YAC1B,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE;YAC5C,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAC1F,EACD,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjD,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACpD,GAAG,EAAE,GAAG,YAEP,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/components/Tooltip/TooltipAPI.d.ts

@@ -1,13 +1,29 @@
 import { ShowOptions } from './types.js';
+/**
+ * Allows interaction with the tooltip element.
+ *
+ * This places the tooltip element at the correct place, shows it, hides it and manages its contents.
+ *
+ * This also takes into account the screen edges, making adjustments to the tooltip position if it would overflow the screen.
+ */
 export declare class TooltipAPI {
-    private tooltipRef;
+    /**
+     * A reference to the tooltip element in the HTML tree.
+     */
+    tooltipRef: React.RefObject<HTMLDivElement>;
     private setContent;
     private hideTimeoutId;
     private clickListener;
     private relativeTo;
     constructor(tooltipRef: React.RefObject<HTMLDivElement>, setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>);
     private computeRelativeTo;
-    show({ content, anchor, position, hideOnClickOutside }: ShowOptions): void;
+    /**
+     * Shows the tooltip with `content`. Its position is based on `position` and the position of the element referred by `anchor`.
+     */
+    show({ content, anchor, position, hideOnClickOutside }: ShowOptions): Promise<void>;
+    /**
+     * Hides the tooltip. After the animation, the content is removed.
+     */
     hide(): void;
 }
 //# sourceMappingURL=TooltipAPI.d.ts.map

package/dist/components/Tooltip/TooltipAPI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipAPI.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipAPI.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAQrC,qBAAa,UAAU;IACrB,OAAO,CAAC,UAAU,CAAiC;IACnD,OAAO,CAAC,UAAU,CAAuD;IACzE,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,aAAa,CAAuC;IAC5D,OAAO,CAAC,UAAU,CAAyB;gBAE/B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAK1H,OAAO,CAAC,iBAAiB;IAQzB,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAmB,EAAE,kBAAkB,EAAE,EAAE,WAAW,GAAG,IAAI;IAgDrF,IAAI,IAAI,IAAI;CAMb"}
+{"version":3,"file":"TooltipAPI.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipAPI.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AASrC;;;;;;GAMG;AACH,qBAAa,UAAU;IACrB;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC3C,OAAO,CAAC,UAAU,CAAuD;IACzE,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,aAAa,CAAuC;IAC5D,OAAO,CAAC,UAAU,CAAyB;gBAE/B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAK1H,OAAO,CAAC,iBAAiB;IAQzB;;OAEG;IACG,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAmB,EAAE,kBAAkB,EAAE,EAAE,WAAW;IA+CpF;;OAEG;IACH,IAAI,IAAI,IAAI;CAMb"}

package/dist/components/Tooltip/TooltipAPI.js

@@ -1,9 +1,21 @@
+import { delay } from '@stack-spot/portal-components';
 import { animationTimeMS } from './style.js';
+// the maximum amount of pixels a tooltip can get close to the screen edges.
 const MARGIN_TO_CORNERS_PX = 10;
 function isRelative(element) {
     return ['relative', 'absolute', 'fixed'].includes(element.computedStyleMap().get('position')?.toString() ?? '');
 }
+/**
+ * Allows interaction with the tooltip element.
+ *
+ * This places the tooltip element at the correct place, shows it, hides it and manages its contents.
+ *
+ * This also takes into account the screen edges, making adjustments to the tooltip position if it would overflow the screen.
+ */
 export class TooltipAPI {
+    /**
+     * A reference to the tooltip element in the HTML tree.
+     */
     tooltipRef;
     setContent;
     hideTimeoutId;
@@ -21,63 +33,68 @@ export class TooltipAPI {
             this.relativeTo = this.relativeTo.parentElement;
         }
     }
-    show({ content, anchor, position = 'bottom', hideOnClickOutside }) {
+    /**
+     * Shows the tooltip with `content`. Its position is based on `position` and the position of the element referred by `anchor`.
+     */
+    async show({ content, anchor, position = 'bottom', hideOnClickOutside }) {
         window.clearTimeout(this.hideTimeoutId);
         this.hideTimeoutId = undefined;
         if (this.clickListener)
             document.removeEventListener('click', this.clickListener);
         this.setContent(content);
-        setTimeout(() => {
-            if (!this.tooltipRef.current)
-                return;
-            const anchorRect = anchor.getClientRects()[0];
-            this.tooltipRef.current.classList.add('visible');
-            const tooltipWidth = this.tooltipRef.current.clientWidth;
-            const tooltipHeight = this.tooltipRef.current.clientHeight;
-            let top = 0;
-            let left = 0;
-            if (position === 'left' || position === 'right') {
-                top = anchorRect.top + anchorRect.height / 2 - tooltipHeight / 2;
-                if (position === 'left')
-                    left = anchorRect.left - tooltipWidth;
-                else
-                    left = anchorRect.left + anchorRect.width;
-            }
-            else {
-                left = anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2;
-                if (position === 'top')
-                    top = anchorRect.top - tooltipHeight;
-                else
-                    top = anchorRect.top + anchorRect.height;
-            }
-            // takes the parent the tooltip is positioned relative to into consideration
-            this.computeRelativeTo();
-            const relativeRect = this.relativeTo?.getClientRects()[0] ?? { top: 0, left: 0 };
-            top -= relativeRect.top;
-            left -= relativeRect.left;
-            // adjusts positions in order to avoid overflowing the window and leaving a margin to the corners
-            if (top <= 0)
-                top += MARGIN_TO_CORNERS_PX;
-            else if (top + tooltipHeight >= document.body.clientHeight - MARGIN_TO_CORNERS_PX) {
-                top = document.body.clientHeight - MARGIN_TO_CORNERS_PX + tooltipHeight;
-            }
-            if (left <= 0)
-                left += MARGIN_TO_CORNERS_PX;
-            else if (left + tooltipWidth >= document.body.clientWidth - MARGIN_TO_CORNERS_PX) {
-                left = document.body.clientWidth - MARGIN_TO_CORNERS_PX - tooltipWidth;
-            }
-            this.tooltipRef.current.style.top = `${top}px`;
-            this.tooltipRef.current.style.left = `${left}px`;
-            if (hideOnClickOutside) {
-                this.clickListener = (e) => {
-                    if (this.tooltipRef.current?.contains(e.target))
-                        return;
-                    this.hide();
-                };
-                document.addEventListener('click', this.clickListener);
-            }
-        }, 10);
+        await delay(10);
+        if (!this.tooltipRef.current)
+            return;
+        const anchorRect = anchor.getClientRects()[0];
+        this.tooltipRef.current.classList.add('visible');
+        const tooltipWidth = this.tooltipRef.current.clientWidth;
+        const tooltipHeight = this.tooltipRef.current.clientHeight;
+        let top = 0;
+        let left = 0;
+        if (position === 'left' || position === 'right') {
+            top = anchorRect.top + anchorRect.height / 2 - tooltipHeight / 2;
+            if (position === 'left')
+                left = anchorRect.left - tooltipWidth;
+            else
+                left = anchorRect.left + anchorRect.width;
+        }
+        else {
+            left = anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2;
+            if (position === 'top')
+                top = anchorRect.top - tooltipHeight;
+            else
+                top = anchorRect.top + anchorRect.height;
+        }
+        // takes the parent the tooltip is positioned relative to into consideration
+        this.computeRelativeTo();
+        const relativeRect = this.relativeTo?.getClientRects()[0] ?? { top: 0, left: 0 };
+        top -= relativeRect.top;
+        left -= relativeRect.left;
+        // adjusts positions in order to avoid overflowing the window and leaving a margin to the corners
+        if (top <= 0)
+            top += MARGIN_TO_CORNERS_PX;
+        else if (top + tooltipHeight >= document.body.clientHeight - MARGIN_TO_CORNERS_PX) {
+            top = document.body.clientHeight - MARGIN_TO_CORNERS_PX + tooltipHeight;
+        }
+        if (left <= 0)
+            left += MARGIN_TO_CORNERS_PX;
+        else if (left + tooltipWidth >= document.body.clientWidth - MARGIN_TO_CORNERS_PX) {
+            left = document.body.clientWidth - MARGIN_TO_CORNERS_PX - tooltipWidth;
+        }
+        this.tooltipRef.current.style.top = `${top}px`;
+        this.tooltipRef.current.style.left = `${left}px`;
+        if (hideOnClickOutside) {
+            this.clickListener = (e) => {
+                if (this.tooltipRef.current?.contains(e.target))
+                    return;
+                this.hide();
+            };
+            document.addEventListener('click', this.clickListener);
+        }
     }
+    /**
+     * Hides the tooltip. After the animation, the content is removed.
+     */
     hide() {
         if (!this.tooltipRef.current)
             return;