oolib 2.35.2 → 2.36.0

package/dist/components/TabBar/index.js

@@ -16,24 +16,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBarStyle2 = exports.TabBarStyle1 = void 0;
 var react_1 = __importDefault(require("react"));
+var useScrollBar_1 = require("../../utils/customHooks/useScrollBar");
+var Buttons_1 = require("../Buttons");
 var index_styled_1 = require("./index.styled");
 var Base = function (_a) {
     var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString, M = _a.M, S = _a.S, _size = _a.size //use any one of these 3
     ;
     var size = _size || (S ? 'S' : 'M'); //defaults to M
     var value = saveValueAsString ? options.find(function (d) { return d.value === valueProp; }) : valueProp;
+    var _c = (0, useScrollBar_1.useScrollBar)(), scrollContainerRef = _c.scrollContainerRef, scrollX = _c.scrollX, scrollIsAtEnd = _c.scrollIsAtEnd, slide = _c.slide, checkScrollPosition = _c.checkScrollPosition;
     var handleClick = function (v) {
         onChange && onChange(id, saveValueAsString ? v.value : v);
     };
     return (react_1.default.createElement(index_styled_1.TabBarStyled, { size: size, style: style },
         react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
-            react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id }, options.map(function (op) {
+            scrollX !== 0 && (react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } })),
+            react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, ref: scrollContainerRef, onScroll: checkScrollPosition }, options.map(function (op) {
                 var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
                 var tabIsActive = value && op.value === value.value;
                 return (react_1.default.createElement(index_styled_1.TabBarTabWrapper, { tabBarStyle: tabBarStyle, key: op.value, active: tabIsActive, error: tabHasError },
                     react_1.default.createElement(index_styled_1.TabBarTabStyled, { size: size, active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); } },
                         react_1.default.createElement(index_styled_1.STYLED_SANS_2, { semibold: tabBarStyle === "1" }, op.display))));
-            })))));
+            })),
+            !scrollIsAtEnd && (react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } })))));
 };
 var TabBarStyle1 = function (props) { return react_1.default.createElement(Base, __assign({}, props, { tabBarStyle: "1" })); };
 exports.TabBarStyle1 = TabBarStyle1;

package/dist/components/TabBar/index.styled.js

@@ -78,19 +78,19 @@ exports.TabBarStyled = styled_components_1.default.div(templateObject_11 || (tem
     var size = _a.size;
     return size === 'S' ? '3rem' : '4rem';
 });
-exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  width: fit-content;\n  height: 100%;\n"], ["\n  width: fit-content;\n  height: 100%;\n"])));
-exports.TabBarRowStyled = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
-exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n    display: flex;\n  align-items: center;\n  min-width: 0; //so that ellipsis works on the text within\n"], ["\n  ", "\n    display: flex;\n  align-items: center;\n  min-width: 0; //so that ellipsis works on the text within\n"])), function (_a) {
+exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  /* width: fit-content; //  */\n  /* width: 600px;   */\n  height: 100%;\n  display: flex;\n  align-items: center;\n"], ["\n  /* width: fit-content; //  */\n  /* width: 600px;   */\n  height: 100%;\n  display: flex;\n  align-items: center;\n"])));
+exports.TabBarRowStyled = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  white-space: nowrap;\n  max-width: 100%;\n  overflow-x: hidden; \n  scroll-behavior: smooth;\n  &::-webkit-scrollbar {\n    background: transparent; /* make scrollbar transparent */\n    -webkit-appearance: none;\n    width: 0;\n    height: 0;\n  }\n"], ["\n  display: flex;\n  height: 100%;\n  white-space: nowrap;\n  max-width: 100%;\n  overflow-x: hidden; \n  scroll-behavior: smooth;\n  &::-webkit-scrollbar {\n    background: transparent; /* make scrollbar transparent */\n    -webkit-appearance: none;\n    width: 0;\n    height: 0;\n  }\n"])));
+exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n    display: flex;\n  align-items: center;\n  /* min-width: 0; //so that ellipsis works on the text within */\n"], ["\n  ", "\n    display: flex;\n  align-items: center;\n  /* min-width: 0; //so that ellipsis works on the text within */\n"])), function (_a) {
     var tabBarStyle = _a.tabBarStyle;
     return tabBarStyle === "1"
         ? tabBarWrapperStyle1
         : tabBarStyle === "2" && tabBarWrapperStyle2;
 });
-exports.TabBarTabStyled = styled_components_1.default.button(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  padding: 0 2rem;\n  height: 100%;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  padding: 0 2rem;\n  height: 100%;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), greyColor100, none, none, function (_a) {
+exports.TabBarTabStyled = styled_components_1.default.button(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  padding: 0 2rem;\n  height: 100%;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  padding: 0 2rem;\n  height: 100%;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), greyColor100, none, none, function (_a) {
     var tabBarStyle = _a.tabBarStyle;
     return tabBarStyle === "1"
         ? tabBarTabStyle1
         : tabBarStyle === "2" && tabBarTabStyle2;
 });
-exports.STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"], ["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+exports.STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  /* width: max-content; */\n  /* white-space: nowrap; */\n  /* text-overflow: ellipsis; */\n  /* overflow: hidden; */\n"], ["\n  /* width: max-content; */\n  /* white-space: nowrap; */\n  /* text-overflow: ellipsis; */\n  /* overflow: hidden; */\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;

package/dist/components/Tags/index.styled.js

@@ -42,7 +42,7 @@ var SIZES = {
 };
 var commonStyle = function (_a) {
     var size = _a.size;
-    return "\n  padding: ".concat(size === "XS" ? "0 .5rem" : "0 1rem", ";\n  position: relative;\n  display: inline-flex;\n  column-gap: 1rem;\n  align-items: \"center\";\n  border-radius:0.2rem;\n  white-space: nowrap;\n\theight: ").concat(SIZES[size], ";\n  max-width: 100%;\n");
+    return "\n  padding: ".concat(size === "XS" ? "0 .5rem" : "0 1rem", ";\n  position: relative;\n  display: inline-flex;\n  column-gap: 1rem;\n  align-items: center;\n  border-radius:0.2rem;\n  white-space: nowrap;\n\theight: ").concat(SIZES[size], ";\n  max-width: 100%;\n");
 };
 var blueHover = function (_a) {
     var invert = _a.invert, colors = _a.colors;

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

@@ -1,6 +1,7 @@
-export function Tooltip({ text, position, style, children }: {
+export function Tooltip({ text, position, style, children, popOutOfOverflowHiddenParent }: {
     text: any;
     position?: string;
     style: any;
     children: any;
+    popOutOfOverflowHiddenParent?: boolean;
 }): any;

package/dist/components/Tooltip/index.js

@@ -25,28 +25,51 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 var react_1 = __importStar(require("react"));
+var usePopOutOfOverflowHiddenParent_1 = require("../../utils/usePopOutOfOverflowHiddenParent");
 var Typo_1 = require("../Typo");
 var styled_1 = require("./styled");
 var Tooltip = function (_a) {
-    var text = _a.text, _b = _a.position, position = _b === void 0 ? 'top' : _b, style = _a.style, children = _a.children;
-    var _c = (0, react_1.useState)(false), isHovered = _c[0], setIsHovered = _c[1];
-    var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
+    var text = _a.text, _b = _a.position, position = _b === void 0 ? 'top' : _b, style = _a.style, children = _a.children, _c = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _c === void 0 ? true : _c;
+    var _d = (0, react_1.useState)(false), isHovered = _d[0], setIsHovered = _d[1];
+    var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
+    var _f = (0, react_1.useState)(false), isClicked = _f[0], setIsClicked = _f[1];
+    var _g = (0, react_1.useState)(false), isTooltipOpen = _g[0], setIsTooltipOpen = _g[1];
     var targetRef = (0, react_1.useRef)(null);
-    var handleClick = function (e) {
-        e.preventDefault();
-        if (targetRef.current) {
-            targetRef.current.blur();
+    var _h = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), trackerRef = _h.trackerRef, applyFixedPos = _h.applyFixedPos, removeFixedPos = _h.removeFixedPos;
+    (0, react_1.useEffect)(function () {
+        if (isHovered || isFocused) {
+            applyFixedPos();
         }
-    };
-    return (react_1.default.createElement(styled_1.StyledWrapper, null,
-        react_1.default.createElement(styled_1.StyledTooltipTarget, { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, onClick: handleClick, ref: targetRef, isFocused: isFocused, tabIndex: 0 }, children),
-        isHovered && (react_1.default.createElement(styled_1.StyledTooltip, { position: position, show: isHovered, style: style },
-            react_1.default.createElement(Typo_1.SANS_2, null, text),
-            react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },
-                react_1.default.createElement(styled_1.StyledArrow, { position: position })))),
-        isFocused && (react_1.default.createElement(styled_1.StyledTooltip, { position: position, show: isFocused, style: style },
+        else {
+            removeFixedPos();
+        }
+    }, [isHovered, isFocused]);
+    var ShowTooltip = function () {
+        return (react_1.default.createElement(styled_1.StyledTooltip, { ref: trackerRef, isOpen: isTooltipOpen, position: position, show: isHovered, style: style },
             react_1.default.createElement(Typo_1.SANS_2, null, text),
             react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },
-                react_1.default.createElement(styled_1.StyledArrow, { position: position }))))));
+                react_1.default.createElement(styled_1.StyledArrow, { position: position }))));
+    };
+    return (react_1.default.createElement(styled_1.StyledWrapper, null,
+        react_1.default.createElement(styled_1.StyledTooltipTarget, { onMouseEnter: function () {
+                if (!isClicked) {
+                    setIsHovered(true);
+                }
+            }, onMouseLeave: function () {
+                if (!isClicked) {
+                    setIsHovered(false);
+                }
+            }, onClick: function () {
+                if (isClicked) {
+                    setIsTooltipOpen(false);
+                }
+                else {
+                    setIsTooltipOpen(true);
+                }
+                // setIsClicked(!isClicked);
+                // setIsHovered(!isHovered);
+            }, onFocus: function () { return setIsFocused(true); }, onBlur: function () { setIsFocused(false), setIsClicked(false); }, ref: targetRef, isFocused: isFocused, tabIndex: 0 }, children),
+        isHovered && (react_1.default.createElement(ShowTooltip, null)),
+        isFocused && (react_1.default.createElement(ShowTooltip, null))));
 };
 exports.Tooltip = Tooltip;

package/dist/components/Tooltip/styled.js

@@ -32,7 +32,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
 var util_1 = require("./util");
-exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative; // made this wrapper with styled.component to ensure its\n  width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n  text-align: center;\n  cursor: pointer;\n"], ["\n  position: relative; // made this wrapper with styled.component to ensure its\n  width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n  text-align: center;\n  cursor: pointer;\n"])));
+exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative; // made this wrapper with styled.component to ensure its\n  width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n  text-align: left;\n  cursor: pointer;\n"], ["\n  position: relative; // made this wrapper with styled.component to ensure its\n  width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n  text-align: left;\n  cursor: pointer;\n"])));
 var greyColor15 = themes_1.colors.greyColor15, white = themes_1.colors.white;
 var clipPaths = {
     top: "0% 0%, 47% 65.4%, 52% 65.4%, 100% 0",

package/dist/utils/customHooks/useScrollBar.d.ts

@@ -0,0 +1,8 @@
+export function useScrollBar(): {
+    scrollContainerRef: any;
+    scrollX: any;
+    scrollIsAtEnd: any;
+    slide: (direction: any) => void;
+    checkScrollPosition: () => void;
+    setScrollIsAtEnd: any;
+};

package/dist/utils/customHooks/useScrollBar.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollBar = void 0;
+var react_1 = require("react");
+/**
+ * @summary The hook sets the initial state values of scrollX and scrollIsAtEnd,
+ *          and uses an effect to check whether the width of the scrollable element is less than or equal to its parent element's width.
+ *          If so, it sets scrollIsAtEnd to true.
+ * @returns scrollContainerRef: reference to the scrollable element. You need to pass this reference to the ref attribute of your scrollable element in your component.
+ *          scrollX: The current scroll position in pixels, from the left side of the content.
+ *          scrollIsAtEnd: A boolean value that indicates whether the scroll bar is at the end of the content.
+ *          slide (shift: string): A function that shifts the scroll position by shifting pixels by directions string provided.
+ *          checkScrollPosition: A function that updates the scrollX and scrollIsAtEnd values based on the current scroll position.
+ */
+var useScrollBar = function () {
+    var _a = (0, react_1.useState)(0), scrollX = _a[0], setScrollX = _a[1];
+    var _b = (0, react_1.useState)(false), scrollIsAtEnd = _b[0], setScrollIsAtEnd = _b[1];
+    var scrollContainerRef = (0, react_1.useRef)(null);
+    var slide = function (direction) {
+        var _a = scrollContainerRef.current, scrollWidth = _a.scrollWidth, offsetWidth = _a.offsetWidth, scrollLeft = _a.scrollLeft;
+        if (direction === "left") {
+            var newScrollLeft = Math.max(scrollLeft - window.innerWidth, 0); // // ensures that the content is always visible within the scrollable element and no part of it is hidden.
+            if (scrollLeft === newScrollLeft) {
+                setScrollIsAtEnd(true);
+            }
+            scrollContainerRef.current.scrollTo({
+                left: newScrollLeft,
+                behavior: "smooth"
+            });
+        }
+        else if (direction === "right") {
+            var newScrollLeft = Math.min(scrollLeft + window.innerWidth, scrollWidth - offsetWidth); // // ensures that the content is always visible within the scrollable element and no part of it is hidden.
+            if (scrollLeft === newScrollLeft) {
+                setScrollIsAtEnd(true);
+            }
+            scrollContainerRef.current.scrollTo({
+                left: newScrollLeft,
+                behavior: "smooth"
+            });
+        }
+    };
+    var checkScrollPosition = function () {
+        setScrollX(scrollContainerRef.current.scrollLeft);
+        if (Math.floor(scrollContainerRef.current.scrollWidth - scrollContainerRef.current.scrollLeft) <= scrollContainerRef.current.offsetWidth) {
+            setScrollIsAtEnd(true);
+        }
+        else {
+            setScrollIsAtEnd(false);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        if (scrollContainerRef.current.offsetWidth >= scrollContainerRef.current.scrollWidth) {
+            setScrollIsAtEnd(true);
+        }
+    }, []);
+    return { scrollContainerRef: scrollContainerRef, scrollX: scrollX, scrollIsAtEnd: scrollIsAtEnd, slide: slide, checkScrollPosition: checkScrollPosition, setScrollIsAtEnd: setScrollIsAtEnd };
+};
+exports.useScrollBar = useScrollBar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.35.2",
+  "version": "2.36.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",