oolib 2.224.0 → 2.225.0

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

@@ -0,0 +1,81 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledInlineWrapper = exports.StyledTooltipContent = exports.StyledCursorTooltipWrapper = exports.StyledTooltipWrapper = exports.StyledSecondaryContentWrapper = exports.StyledTooltipContainer = exports.slideAnimation = exports.fadeAnimation = exports.fadeSlideIn = exports.tooltipFadeIn = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+// Keyframe animations
+exports.tooltipFadeIn = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n"], ["\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n"])));
+exports.fadeSlideIn = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n"], ["\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n"])));
+// Fade animation mixin
+exports.fadeAnimation = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    opacity: 0;\n    animation: ", " 150ms ease-out forwards;\n"], ["\n    opacity: 0;\n    animation: ", " 150ms ease-out forwards;\n"])), exports.tooltipFadeIn);
+exports.slideAnimation = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    opacity: 0;\n    animation: ", " 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;\n"], ["\n    opacity: 0;\n    animation: ", " 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;\n"])), exports.fadeSlideIn);
+exports.StyledTooltipContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (_a) {
+    var $animate = _a.$animate;
+    return $animate && exports.fadeAnimation;
+});
+exports.StyledSecondaryContentWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (_a) {
+    var $animate = _a.$animate;
+    return $animate && exports.slideAnimation;
+});
+exports.StyledTooltipWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    z-index: 9999;\n    display: flex;\n    flex-direction: ", ";\n    gap: ", ";\n"], ["\n    z-index: 9999;\n    display: flex;\n    flex-direction: ", ";\n    gap: ", ";\n"])), function (_a) {
+    var $isVertical = _a.$isVertical;
+    return ($isVertical ? 'column' : 'row');
+}, function (_a) {
+    var _b = _a.$gap, $gap = _b === void 0 ? 0 : _b;
+    return "".concat($gap, "px");
+});
+exports.StyledCursorTooltipWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    z-index: 9999;\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    gap: ", ";\n"], ["\n    z-index: 9999;\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    gap: ", ";\n"])), function (_a) {
+    var _b = _a.$gap, $gap = _b === void 0 ? 0 : _b;
+    return "".concat($gap, "px");
+});
+exports.StyledTooltipContent = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    position: relative;\n    ", "\n"], ["\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    position: relative;\n    ", "\n"])), function (_a) {
+    var $bgColor = _a.$bgColor;
+    return $bgColor;
+}, function (_a) {
+    var $textColor = _a.$textColor;
+    return $textColor;
+}, function (_a) {
+    var _b = _a.$borderRadius, $borderRadius = _b === void 0 ? '0.8rem' : _b;
+    return $borderRadius;
+}, function (_a) {
+    var $order = _a.$order;
+    return $order !== undefined && "order: ".concat($order, ";");
+});
+exports.StyledInlineWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: inline-block;\n"], ["\n    display: inline-block;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/v2/components/Tooltip/utils/autoSafeFlip.d.ts

@@ -0,0 +1,4 @@
+import type { Middleware } from '@floating-ui/react';
+declare const ARROW_PADDING = 8;
+export declare const autoSafeFlip: Middleware;
+export { ARROW_PADDING };

package/dist/v2/components/Tooltip/utils/autoSafeFlip.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ARROW_PADDING = exports.autoSafeFlip = void 0;
+var ARROW_PADDING = 8;
+exports.ARROW_PADDING = ARROW_PADDING;
+exports.autoSafeFlip = {
+    name: 'autoSafeFlip',
+    fn: function (state) {
+        var x = state.x, y = state.y, placement = state.placement, rects = state.rects;
+        var isHorizontal = placement.startsWith('left') || placement.startsWith('right');
+        if (isHorizontal) {
+            var refCenterY = rects.reference.y + rects.reference.height / 2;
+            var floatingTop = y;
+            var arrowY = refCenterY - floatingTop;
+            var minArrowY = ARROW_PADDING;
+            var maxArrowY = rects.floating.height - ARROW_PADDING;
+            if (arrowY < minArrowY || arrowY > maxArrowY) {
+                var availableTop = rects.reference.y;
+                var viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 800;
+                var availableBottom = viewportHeight - (rects.reference.y + rects.reference.height);
+                var newPlacement = availableBottom >= availableTop ? 'bottom' : 'top';
+                var newY = newPlacement === 'bottom'
+                    ? rects.reference.y + rects.reference.height + 10
+                    : rects.reference.y - rects.floating.height - 10;
+                var newX = rects.reference.x + rects.reference.width / 2 - rects.floating.width / 2;
+                return {
+                    x: newX,
+                    y: newY,
+                    data: {},
+                    reset: {
+                        placement: newPlacement,
+                    },
+                };
+            }
+        }
+        else {
+            var refCenterX = rects.reference.x + rects.reference.width / 2;
+            var floatingLeft = x;
+            var arrowX = refCenterX - floatingLeft;
+            var minArrowX = ARROW_PADDING;
+            var maxArrowX = rects.floating.width - ARROW_PADDING;
+            if (arrowX < minArrowX || arrowX > maxArrowX) {
+                var availableLeft = rects.reference.x;
+                var viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 800;
+                var availableRight = viewportWidth - (rects.reference.x + rects.reference.width);
+                var newPlacement = availableRight >= availableLeft ? 'right' : 'left';
+                var newX = newPlacement === 'right'
+                    ? rects.reference.x + rects.reference.width + 10
+                    : rects.reference.x - rects.floating.width - 10;
+                var newY = rects.reference.y + rects.reference.height / 2 - rects.floating.height / 2;
+                return {
+                    x: newX,
+                    y: newY,
+                    data: {},
+                    reset: {
+                        placement: newPlacement,
+                    },
+                };
+            }
+        }
+        return {};
+    },
+};

package/dist/v2/components/Tooltip/utils/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TooltipText, TooltipHeading } from '../Layout';
+export { autoSafeFlip, ARROW_PADDING } from './autoSafeFlip';
+type TooltipTextProps = React.ComponentProps<typeof TooltipText>;
+type TooltipHeadingProps = React.ComponentProps<typeof TooltipHeading>;
+export type ContentConfig = {
+    layout: 'TooltipText';
+    props: TooltipTextProps;
+} | {
+    layout: 'TooltipHeading';
+    props: TooltipHeadingProps;
+} | {
+    layout: 'custom';
+    render: React.ReactNode;
+};
+export declare const renderContent: (config: ContentConfig) => React.ReactNode;
+export declare const resolvePrimaryContent: (text?: string, heading?: string, primaryContent?: ContentConfig) => ContentConfig | null;
+export declare const BORDER_RADIUS = "0.8rem";
+interface GetBorderRadiusOptions {
+    isPrimary: boolean;
+    progressiveGap: number;
+    secondaryContent: boolean;
+    showSecondary: boolean;
+    placement: string;
+}
+export declare const getBorderRadius: ({ isPrimary, progressiveGap, secondaryContent, showSecondary, placement, }: GetBorderRadiusOptions) => string;

package/dist/v2/components/Tooltip/utils/index.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBorderRadius = exports.BORDER_RADIUS = exports.resolvePrimaryContent = exports.renderContent = exports.ARROW_PADDING = exports.autoSafeFlip = void 0;
+var react_1 = __importDefault(require("react"));
+var Layout_1 = require("../Layout");
+var autoSafeFlip_1 = require("./autoSafeFlip");
+Object.defineProperty(exports, "autoSafeFlip", { enumerable: true, get: function () { return autoSafeFlip_1.autoSafeFlip; } });
+Object.defineProperty(exports, "ARROW_PADDING", { enumerable: true, get: function () { return autoSafeFlip_1.ARROW_PADDING; } });
+var renderContent = function (config) {
+    switch (config.layout) {
+        case 'TooltipText':
+            return react_1.default.createElement(Layout_1.TooltipText, config.props);
+        case 'TooltipHeading':
+            return react_1.default.createElement(Layout_1.TooltipHeading, config.props);
+        case 'custom':
+            return config.render;
+        default:
+            return null;
+    }
+};
+exports.renderContent = renderContent;
+var resolvePrimaryContent = function (text, heading, primaryContent) {
+    if (primaryContent)
+        return primaryContent;
+    if (heading && text) {
+        return { layout: 'TooltipHeading', props: { heading: heading, text: text } };
+    }
+    if (text) {
+        return { layout: 'TooltipText', props: { text: text } };
+    }
+    return null;
+};
+exports.resolvePrimaryContent = resolvePrimaryContent;
+exports.BORDER_RADIUS = '0.8rem';
+var getBorderRadius = function (_a) {
+    var isPrimary = _a.isPrimary, progressiveGap = _a.progressiveGap, secondaryContent = _a.secondaryContent, showSecondary = _a.showSecondary, placement = _a.placement;
+    var hasGap = progressiveGap > 0;
+    if (hasGap || !secondaryContent || !showSecondary)
+        return exports.BORDER_RADIUS;
+    var isTopPlacement = placement.startsWith('top');
+    var isLeftPlacement = placement.startsWith('left');
+    var isVertical = isTopPlacement || placement.startsWith('bottom');
+    var secondaryFirst = isTopPlacement || isLeftPlacement;
+    if (isPrimary) {
+        if (isVertical) {
+            return secondaryFirst
+                ? "0 0 ".concat(exports.BORDER_RADIUS, " ").concat(exports.BORDER_RADIUS)
+                : "".concat(exports.BORDER_RADIUS, " ").concat(exports.BORDER_RADIUS, " 0 0");
+        }
+        return secondaryFirst
+            ? "0 ".concat(exports.BORDER_RADIUS, " ").concat(exports.BORDER_RADIUS, " 0")
+            : "".concat(exports.BORDER_RADIUS, " 0 0 ").concat(exports.BORDER_RADIUS);
+    }
+    if (isVertical) {
+        return secondaryFirst
+            ? "".concat(exports.BORDER_RADIUS, " ").concat(exports.BORDER_RADIUS, " 0 0")
+            : "0 0 ".concat(exports.BORDER_RADIUS, " ").concat(exports.BORDER_RADIUS);
+    }
+    return secondaryFirst
+        ? "".concat(exports.BORDER_RADIUS, " 0 0 ").concat(exports.BORDER_RADIUS)
+        : "0 ".concat(exports.BORDER_RADIUS, " ").concat(exports.BORDER_RADIUS, " 0");
+};
+exports.getBorderRadius = getBorderRadius;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.224.0",
+  "version": "2.225.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -86,6 +86,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.16",
     "@lexical/react": "^0.13.1",
     "@lexical/table": "^0.13.1",
     "@material/material-color-utilities": "^0.3.0",