oolib 2.224.0 → 2.225.1

package/dist/components/SimpleTable/comps/rowColActionMenus/RowActionsMenu/index.d.ts

@@ -1,4 +1,4 @@
-export function RowActionsMenu({ value, rowIdx, onChange, id, disableAddRow, setActionsActiveOnRow, rowActionsButtonWidth, conditionsToRender }: {
+export function RowActionsMenu({ value, rowIdx, onChange, id, disableAddRow, setActionsActiveOnRow, rowActionsButtonWidth, conditionsToRender, blockConfig }: {
     value: any;
     rowIdx: any;
     onChange: any;
@@ -7,5 +7,6 @@ export function RowActionsMenu({ value, rowIdx, onChange, id, disableAddRow, set
     setActionsActiveOnRow: any;
     rowActionsButtonWidth: any;
     conditionsToRender?: boolean;
+    blockConfig: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/SimpleTable/comps/rowColActionMenus/RowActionsMenu/index.js

@@ -60,7 +60,7 @@ var styled_1 = require("../styled");
 var StyledCustomSelectCompWrapper = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  /* width: 1.5rem; */\n  height: 2.5rem;\n"], ["\n  ", "\n  /* width: 1.5rem; */\n  height: 2.5rem;\n"])), styled_1.commonRowColActionMenuStyles);
 // const CustomSelectComp =
 var RowActionsMenu = function (_a) {
-    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id, disableAddRow = _a.disableAddRow, setActionsActiveOnRow = _a.setActionsActiveOnRow, rowActionsButtonWidth = _a.rowActionsButtonWidth, _b = _a.conditionsToRender, conditionsToRender = _b === void 0 ? true : _b;
+    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id, disableAddRow = _a.disableAddRow, setActionsActiveOnRow = _a.setActionsActiveOnRow, rowActionsButtonWidth = _a.rowActionsButtonWidth, _b = _a.conditionsToRender, conditionsToRender = _b === void 0 ? true : _b, blockConfig = _a.blockConfig;
     var _c = (0, react_1.useState)(false), actionMenuIsOpen = _c[0], setActionMenuIsOpen = _c[1];
     var isFirstMount = (0, react_1.useRef)(true);
     (0, react_1.useEffect)(function () {
@@ -98,20 +98,20 @@ var RowActionsMenu = function (_a) {
                 {
                     display: UIContent_1.UIContent.SimpleTable.insertRowBefore,
                     onClick: function () {
-                        return (0, handleRowActions_1.handleInsertRowBefore)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id });
+                        return (0, handleRowActions_1.handleInsertRowBefore)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id, blockConfig: blockConfig });
                     },
                 },
                 {
                     display: UIContent_1.UIContent.SimpleTable.insertRowAfter,
                     onClick: function () {
-                        return (0, handleRowActions_1.handleInsertRowAfter)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id });
+                        return (0, handleRowActions_1.handleInsertRowAfter)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id, blockConfig: blockConfig });
                     },
                 },
             ] : []), true), [
                 {
                     display: UIContent_1.UIContent.SimpleTable.clearContent,
                     onClick: function () {
-                        return (0, handleRowActions_1.handleClearRowContent)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id });
+                        return (0, handleRowActions_1.handleClearRowContent)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id, blockConfig: blockConfig });
                     },
                 },
             ], false) })));

package/dist/components/SimpleTable/handlers/handleRowActions.d.ts

@@ -11,21 +11,24 @@ export function handleDuplicateRow({ value, rowIdx, onChange, id }: {
     onChange: any;
     id: any;
 }): void;
-export function handleInsertRowAfter({ value, rowIdx, onChange, id }: {
+export function handleInsertRowAfter({ value, rowIdx, onChange, id, blockConfig }: {
     value: any;
     rowIdx: any;
     onChange: any;
     id: any;
+    blockConfig: any;
 }): void;
-export function handleInsertRowBefore({ value, rowIdx, onChange, id }: {
+export function handleInsertRowBefore({ value, rowIdx, onChange, id, blockConfig }: {
     value: any;
     rowIdx: any;
     onChange: any;
     id: any;
+    blockConfig: any;
 }): void;
-export function handleClearRowContent({ value, rowIdx, onChange, id }: {
+export function handleClearRowContent({ value, rowIdx, onChange, id, blockConfig }: {
     value: any;
     rowIdx: any;
     onChange: any;
     id: any;
+    blockConfig: any;
 }): void;

package/dist/components/SimpleTable/handlers/handleRowActions.js

@@ -24,21 +24,22 @@ exports.handleClearRowContent = exports.handleInsertRowBefore = exports.handleIn
 var makeArrayFromLength_1 = require("../../../utils/makeArrayFromLength");
 var genHash_1 = require("../utils/genHash");
 var genNewRow = function (_a) {
-    var data = _a.data, rowIdx = _a.rowIdx;
+    var data = _a.data, rowIdx = _a.rowIdx, blockConfig = _a.blockConfig;
     var totCells = data[rowIdx].cellData.length;
     return ({
         id: "row_".concat((0, genHash_1.genHash)(8)),
-        cellData: (0, makeArrayFromLength_1.makeArrayFromLength)(totCells).map(function (d, i) { return ({
-            id: "cell_".concat((0, genHash_1.genHash)(8)),
-        }); })
+        cellData: (0, makeArrayFromLength_1.makeArrayFromLength)(totCells).map(function (d, i) {
+            var _a, _b;
+            return (__assign(__assign({ id: "cell_".concat((0, genHash_1.genHash)(8)) }, (((_a = blockConfig === null || blockConfig === void 0 ? void 0 : blockConfig[i]) === null || _a === void 0 ? void 0 : _a.comp) ? { comp: blockConfig[i].comp } : {})), (((_b = blockConfig === null || blockConfig === void 0 ? void 0 : blockConfig[i]) === null || _b === void 0 ? void 0 : _b.props) ? { props: blockConfig[i].props } : {})));
+        })
     });
 };
 var handleAddRow = function (value, props) {
-    var onChange = props.onChange, id = props.id;
+    var onChange = props.onChange, id = props.id, config = props.config;
     var data = value.data, colWidthConfig = value.colWidthConfig;
     var newData = __spreadArray([], data, true);
     var lastRowIdx = newData.length - 1;
-    var newRow = genNewRow({ data: newData, rowIdx: lastRowIdx });
+    var newRow = genNewRow({ data: newData, rowIdx: lastRowIdx, blockConfig: config === null || config === void 0 ? void 0 : config.blockConfig });
     newData.push(newRow);
     onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
 };
@@ -61,25 +62,25 @@ var handleDuplicateRow = function (_a) {
 };
 exports.handleDuplicateRow = handleDuplicateRow;
 var handleInsertRowAfter = function (_a) {
-    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id;
+    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id, blockConfig = _a.blockConfig;
     var data = value.data, colWidthConfig = value.colWidthConfig;
     var newData = __spreadArray([], data, true);
-    var newRow = genNewRow({ data: newData, rowIdx: rowIdx });
+    var newRow = genNewRow({ data: newData, rowIdx: rowIdx, blockConfig: blockConfig });
     newData.splice(rowIdx + 1, 0, newRow);
     onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
 };
 exports.handleInsertRowAfter = handleInsertRowAfter;
 var handleInsertRowBefore = function (_a) {
-    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id;
+    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id, blockConfig = _a.blockConfig;
     var data = value.data, colWidthConfig = value.colWidthConfig;
     var newData = __spreadArray([], data, true);
-    var newRow = genNewRow({ data: newData, rowIdx: rowIdx });
+    var newRow = genNewRow({ data: newData, rowIdx: rowIdx, blockConfig: blockConfig });
     newData.splice(rowIdx, 0, newRow);
     onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
 };
 exports.handleInsertRowBefore = handleInsertRowBefore;
 var handleClearRowContent = function (_a) {
-    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id;
+    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id, blockConfig = _a.blockConfig;
     var data = value.data, colWidthConfig = value.colWidthConfig;
     var newData = __spreadArray([], data, true);
     /**
@@ -88,7 +89,7 @@ var handleClearRowContent = function (_a) {
      * ensures the the RTE used within the cell is reinitiated and the previous value in it is cleared.
      * (since RTEs are not controlled components)
      */
-    var newRow = genNewRow({ data: newData, rowIdx: rowIdx });
+    var newRow = genNewRow({ data: newData, rowIdx: rowIdx, blockConfig: blockConfig });
     newData.splice(rowIdx, 1, newRow);
     onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
 };

package/dist/components/SimpleTable/index.js

@@ -244,6 +244,7 @@ function SimpleTable(_a) {
                     rowIdx === 0 &&
                     hoveredRowAndCol.colIdx === cellIdx }),
             !config.disableRowActionsMenu && react_1.default.createElement(RowActionsMenu_1.RowActionsMenu, { value: value, rowIdx: rowIdx, onChange: onChange, id: id, setActionsActiveOnRow: setActionsActiveOnRow, rowActionsButtonWidth: rowActionsButtonWidth, disableAddRow: config === null || config === void 0 ? void 0 : config.disableAddRow,
+                blockConfig: config === null || config === void 0 ? void 0 : config.blockConfig,
                 conditionsToRender: !readOnly &&
                     enableRowActions &&
                     cellIdx === 0 &&

package/dist/index.d.ts

@@ -76,6 +76,7 @@ export { CheckboxButton } from "./v2/components/RadioAndCheckbox/comps/CheckboxL
 export { RadioList } from "./v2/components/RadioAndCheckbox/comps/RadioList/index";
 export { List } from "./v2/components/List";
 export { ListItem } from "./v2/components/List/comps/ListItem";
+export { default as TooltipV2 } from "./v2/components/Tooltip";
 export * as baseStyling from "./v2/themes/utils/baseStyling";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
 export { TagClear, TagLink, TagSelect, TagDisplay } from "./components/Tags";

package/dist/index.js

@@ -41,7 +41,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.applyBlackOverlayOnHover = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 exports.List = exports.SwitchDouble = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonUpload = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.generateOptions = exports.genTagComp = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.HintsProvider = exports.BlockLabel = exports.ListContent = exports.CardContent = exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = void 0;
-exports.baseStyling = exports.ListItem = void 0;
+exports.baseStyling = exports.TooltipV2 = exports.ListItem = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -249,4 +249,6 @@ var List_1 = require("./v2/components/List");
 Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_1.List; } });
 var ListItem_1 = require("./v2/components/List/comps/ListItem");
 Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return ListItem_1.ListItem; } });
+var Tooltip_2 = require("./v2/components/Tooltip");
+Object.defineProperty(exports, "TooltipV2", { enumerable: true, get: function () { return __importDefault(Tooltip_2).default; } });
 exports.baseStyling = __importStar(require("./v2/themes/utils/baseStyling"));

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

@@ -0,0 +1,215 @@
+declare namespace _default {
+    export let title: string;
+    export { Tooltip as component };
+    export namespace argTypes {
+        namespace text {
+            let name: string;
+            let control: string;
+            let description: string;
+        }
+        namespace heading {
+            let name_1: string;
+            export { name_1 as name };
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace primaryContentType {
+            let name_2: string;
+            export { name_2 as name };
+            export let options: string[];
+            export namespace control_2 {
+                let type: string;
+            }
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace secondaryContentType {
+            let name_3: string;
+            export { name_3 as name };
+            let options_1: string[];
+            export { options_1 as options };
+            export namespace control_3 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace progressiveDelay {
+            let name_4: string;
+            export { name_4 as name };
+            export namespace control_4 {
+                let type_2: string;
+                export { type_2 as type };
+                export let min: number;
+                export let max: number;
+                export let step: number;
+            }
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace progressiveGap {
+            let name_5: string;
+            export { name_5 as name };
+            export namespace control_5 {
+                let type_3: string;
+                export { type_3 as type };
+                let min_1: number;
+                export { min_1 as min };
+                let max_1: number;
+                export { max_1 as max };
+                let step_1: number;
+                export { step_1 as step };
+            }
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+        namespace placement {
+            let name_6: string;
+            export { name_6 as name };
+            let options_2: string[];
+            export { options_2 as options };
+            export namespace control_6 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_6 as control };
+        }
+        namespace showDelay {
+            let name_7: string;
+            export { name_7 as name };
+            export namespace control_7 {
+                let type_5: string;
+                export { type_5 as type };
+                let min_2: number;
+                export { min_2 as min };
+                let max_2: number;
+                export { max_2 as max };
+                let step_2: number;
+                export { step_2 as step };
+            }
+            export { control_7 as control };
+            let description_6: string;
+            export { description_6 as description };
+        }
+        namespace hideDelay {
+            let name_8: string;
+            export { name_8 as name };
+            export namespace control_8 {
+                let type_6: string;
+                export { type_6 as type };
+                let min_3: number;
+                export { min_3 as min };
+                let max_3: number;
+                export { max_3 as max };
+                let step_3: number;
+                export { step_3 as step };
+            }
+            export { control_8 as control };
+            let description_7: string;
+            export { description_7 as description };
+        }
+        namespace animation {
+            let name_9: string;
+            export { name_9 as name };
+            let options_3: string[];
+            export { options_3 as options };
+            export namespace control_9 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_9 as control };
+            let description_8: string;
+            export { description_8 as description };
+        }
+        namespace showPointer {
+            let name_10: string;
+            export { name_10 as name };
+            let control_10: string;
+            export { control_10 as control };
+            let description_9: string;
+            export { description_9 as description };
+        }
+        namespace followCursor {
+            let name_11: string;
+            export { name_11 as name };
+            let control_11: string;
+            export { control_11 as control };
+            let description_10: string;
+            export { description_10 as description };
+        }
+        namespace cursorOffset {
+            let name_12: string;
+            export { name_12 as name };
+            export namespace control_12 {
+                let type_8: string;
+                export { type_8 as type };
+                let min_4: number;
+                export { min_4 as min };
+                let max_4: number;
+                export { max_4 as max };
+                let step_4: number;
+                export { step_4 as step };
+            }
+            export { control_12 as control };
+            let description_11: string;
+            export { description_11 as description };
+        }
+        namespace invert {
+            let name_13: string;
+            export { name_13 as name };
+            let control_13: string;
+            export { control_13 as control };
+            let description_12: string;
+            export { description_12 as description };
+        }
+    }
+    export namespace args {
+        let text_1: string;
+        export { text_1 as text };
+        let heading_1: string;
+        export { heading_1 as heading };
+        let primaryContentType_1: string;
+        export { primaryContentType_1 as primaryContentType };
+        let secondaryContentType_1: string;
+        export { secondaryContentType_1 as secondaryContentType };
+        let progressiveDelay_1: number;
+        export { progressiveDelay_1 as progressiveDelay };
+        let progressiveGap_1: number;
+        export { progressiveGap_1 as progressiveGap };
+        let placement_1: string;
+        export { placement_1 as placement };
+        let showDelay_1: number;
+        export { showDelay_1 as showDelay };
+        let hideDelay_1: number;
+        export { hideDelay_1 as hideDelay };
+        let animation_1: string;
+        export { animation_1 as animation };
+        let showPointer_1: boolean;
+        export { showPointer_1 as showPointer };
+        let followCursor_1: boolean;
+        export { followCursor_1 as followCursor };
+        let cursorOffset_1: number;
+        export { cursorOffset_1 as cursorOffset };
+        let invert_1: boolean;
+        export { invert_1 as invert };
+    }
+}
+export default _default;
+export function Tooltip_(args: any): React.JSX.Element;
+export function EdgeCases(): React.JSX.Element;
+export namespace EdgeCases {
+    namespace parameters {
+        namespace controls {
+            let disable: boolean;
+        }
+    }
+}
+import Tooltip from '../../../v2/components/Tooltip';
+import React from 'react';

package/dist/stories/v2/components/Tooltip.stories.js

@@ -0,0 +1,197 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EdgeCases = exports.Tooltip_ = void 0;
+var react_1 = __importDefault(require("react"));
+var Tooltip_1 = __importDefault(require("../../../v2/components/Tooltip"));
+var icons_1 = require("../../../icons");
+var Typo_1 = require("../../../components/Typo");
+var Info = icons_1.icons.Info;
+var contentOptions = {
+    'None': null,
+    'TooltipText': {
+        layout: 'TooltipText',
+        props: {
+            text: "The purple elephant danced across the neon sky, balancing a slice of pepperoni pizza on its trunk while humming a tune that only dolphins could understand."
+        }
+    },
+    'TooltipHeading': {
+        layout: 'TooltipHeading',
+        props: {
+            heading: "Heading",
+            text: "The purple elephant danced across the neon sky, balancing a slice of pepperoni pizza on its trunk while humming a tune that only dolphins could understand."
+        }
+    },
+    'Custom': {
+        layout: 'custom',
+        render: (react_1.default.createElement("div", { style: { padding: '0.8rem', maxWidth: '280px' } },
+            react_1.default.createElement(Typo_1.SANS_2, null, "This is custom JSX content!")))
+    },
+};
+exports.default = {
+    title: 'Oolib V 2.0/components/Tooltip',
+    component: Tooltip_1.default,
+    argTypes: {
+        // Simple API
+        text: {
+            name: "Text",
+            control: 'text',
+            description: 'Simple text content for the tooltip (used when primaryContent is not set)',
+        },
+        heading: {
+            name: "Heading",
+            control: 'text',
+            description: 'Heading text (when provided with text, renders TooltipHeading layout)',
+        },
+        // Advanced API
+        primaryContentType: {
+            name: "Primary Content (Advanced)",
+            options: ['None', 'TooltipText', 'TooltipHeading', 'Custom'],
+            control: { type: 'select' },
+            description: 'Advanced: Select primary content layout (overrides text/heading)',
+        },
+        secondaryContentType: {
+            name: "Secondary Content",
+            options: ['None', 'TooltipText', 'TooltipHeading', 'Custom'],
+            control: { type: 'select' },
+            description: 'Select secondary content layout (appears after delay)',
+        },
+        progressiveDelay: {
+            name: "Progressive Delay (ms)",
+            control: { type: 'number', min: 0, max: 5000, step: 100 },
+            description: 'Delay before showing secondary layout',
+        },
+        progressiveGap: {
+            name: "Progressive Gap (px)",
+            control: { type: 'number', min: 0, max: 50, step: 1 },
+            description: 'Gap between primary and secondary tooltip',
+        },
+        placement: {
+            name: "Placement",
+            options: ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end'],
+            control: { type: 'select' },
+        },
+        showDelay: {
+            name: "Show Delay (ms)",
+            control: { type: 'number', min: 0, max: 5000, step: 100 },
+            description: 'Delay in milliseconds before tooltip appears',
+        },
+        hideDelay: {
+            name: "Hide Delay (ms)",
+            control: { type: 'number', min: 0, max: 5000, step: 100 },
+            description: 'Delay in milliseconds before tooltip disappears',
+        },
+        animation: {
+            name: "Animation",
+            options: ['none', 'fade'],
+            control: { type: 'inline-radio' },
+            description: 'Animation style for tooltip appearance',
+        },
+        showPointer: {
+            name: "Show Pointer",
+            control: 'boolean',
+            description: 'Show or hide the tooltip arrow pointer',
+        },
+        followCursor: {
+            name: "Follow Cursor",
+            control: 'boolean',
+            description: 'Tooltip follows mouse cursor',
+        },
+        cursorOffset: {
+            name: "Cursor Offset (px)",
+            control: { type: 'number', min: 0, max: 50, step: 1 },
+            description: 'Distance from cursor (when followCursor is true)',
+        },
+        invert: {
+            name: "Invert",
+            control: 'boolean',
+            description: 'Invert tooltip colors (white background, black text)',
+        },
+    },
+    args: {
+        text: 'The purple elephant danced across the neon sky, balancing a slice of pepperoni pizza on its trunk.',
+        heading: '',
+        primaryContentType: 'None',
+        secondaryContentType: 'None',
+        progressiveDelay: 1000,
+        progressiveGap: 8,
+        placement: 'top',
+        showDelay: 0,
+        hideDelay: 0,
+        animation: 'none',
+        showPointer: true,
+        followCursor: false,
+        cursorOffset: 10,
+        invert: false,
+    }
+};
+var Tooltip_ = function (args) {
+    // If primaryContent is selected (not 'None'), use it; otherwise use text/heading
+    var usePrimaryContent = args.primaryContentType && args.primaryContentType !== 'None';
+    return (react_1.default.createElement("div", { style: {
+            padding: '4rem',
+            minHeight: '400px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        } },
+        react_1.default.createElement(Tooltip_1.default
+        // Simple API - only used when primaryContent is not selected
+        , { 
+            // Simple API - only used when primaryContent is not selected
+            text: usePrimaryContent ? undefined : args.text, heading: usePrimaryContent ? undefined : (args.heading || undefined), 
+            // Advanced API - only used when primaryContent is selected
+            primaryContent: usePrimaryContent ? contentOptions[args.primaryContentType] : undefined, secondaryContent: contentOptions[args.secondaryContentType], progressiveDelay: args.progressiveDelay, progressiveGap: args.progressiveGap, placement: args.placement, showDelay: args.showDelay, hideDelay: args.hideDelay, animation: args.animation, showPointer: args.showPointer, followCursor: args.followCursor, cursorOffset: args.cursorOffset, invert: args.invert }, args.followCursor ? (react_1.default.createElement("div", { style: {
+                width: '200px',
+                height: '150px',
+                backgroundColor: '#f0f0f0',
+                borderRadius: '8px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                border: '2px dashed #ccc',
+                cursor: 'default',
+            } },
+            react_1.default.createElement(Typo_1.SANS_2, null, "Hover and move cursor"))) : (react_1.default.createElement(Info, { size: 24 })))));
+};
+exports.Tooltip_ = Tooltip_;
+var TooltipItem = function (_a) {
+    var label = _a.label, placement = _a.placement, position = _a.position;
+    return (react_1.default.createElement("div", { style: __assign(__assign({ position: 'absolute' }, position), { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }) },
+        react_1.default.createElement("span", { style: { fontSize: '11px', color: '#666', textAlign: 'center', maxWidth: '100px' } }, label),
+        react_1.default.createElement(Tooltip_1.default, { primaryContent: contentOptions['TooltipText'], placement: placement },
+            react_1.default.createElement(Info, { size: 24 }))));
+};
+var EdgeCases = function () { return (react_1.default.createElement("div", { style: {
+        position: 'relative',
+        width: '100%',
+        height: '600px',
+        border: '2px dashed #ccc',
+        borderRadius: '8px',
+        overflow: 'visible'
+    } },
+    react_1.default.createElement(TooltipItem, { label: "Top-Left Corner", placement: "bottom", position: { top: '10px', left: '10px' } }),
+    react_1.default.createElement(TooltipItem, { label: "Top-Right Corner", placement: "bottom", position: { top: '10px', right: '10px' } }),
+    react_1.default.createElement(TooltipItem, { label: "Bottom-Left Corner", placement: "top", position: { bottom: '10px', left: '10px' } }),
+    react_1.default.createElement(TooltipItem, { label: "Bottom-Right Corner", placement: "top", position: { bottom: '10px', right: '10px' } }),
+    react_1.default.createElement(TooltipItem, { label: "Top Edge Center", placement: "bottom", position: { top: '10px', left: '50%', transform: 'translateX(-50%)' } }),
+    react_1.default.createElement(TooltipItem, { label: "Bottom Edge Center", placement: "top", position: { bottom: '10px', left: '50%', transform: 'translateX(-50%)' } }),
+    react_1.default.createElement(TooltipItem, { label: "Left Edge Center", placement: "right", position: { top: '50%', left: '10px', transform: 'translateY(-50%)' } }),
+    react_1.default.createElement(TooltipItem, { label: "Right Edge Center", placement: "left", position: { top: '50%', right: '10px', transform: 'translateY(-50%)' } }))); };
+exports.EdgeCases = EdgeCases;
+exports.EdgeCases.parameters = {
+    controls: { disable: true }
+};