oolib 2.175.2 → 2.175.3

package/dist/v2/components/Accordion/index.js

@@ -52,7 +52,10 @@ var StyledContainer = styled_components_1.default.div(templateObject_1 || (templ
 var StyledHeader = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"])));
 var StyledRightHeaderSection = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var ArrowWrapper = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  cursor: pointer;\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(", "deg);\n  ", ";\n"], ["\n  border: none;\n  background: none;\n  cursor: pointer;\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(", "deg);\n  ", ";\n"])), function (props) { return (props.isExpanded ? 0 : 180); }, (0, mixins_1.transition)("transform"));
-var StyledContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-end;\n  \n  ", "\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: flex-end;\n  \n  ", "\n  height: ", ";\n"])), (0, mixins_1.transition)("height"), function (_a) {
+var StyledContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-end;\n  \n  ", "\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: flex-end;\n  \n  ", "\n  height: ", ";\n"])), function (_a) {
+    var expandAnimationDuration = _a.expandAnimationDuration;
+    return (0, mixins_1.transition)("height ".concat(expandAnimationDuration / 1000, "s ease-out"));
+}, function (_a) {
     var height = _a.height;
     return height;
 });
@@ -88,9 +91,7 @@ var useCalculateWrapperHeight = function (_a) {
     });
 };
 var Accordion = function (_a) {
-    var title = _a.title, children = _a.children, _b = _a.defaultExpanded, defaultExpanded = _b === void 0 ? true : _b, _c = _a.accordionOverflow, accordionOverflow = _c === void 0 ? 'hidden' : _c, //in some cases we need to toggle the overflow to let a tooltip stick out and show for example (in DataVizAccordion)
-    _d = _a.actionsConfig, //in some cases we need to toggle the overflow to let a tooltip stick out and show for example (in DataVizAccordion)
-    actionsConfig = _d === void 0 ? [
+    var title = _a.title, children = _a.children, _b = _a.defaultExpanded, defaultExpanded = _b === void 0 ? true : _b, _c = _a.actionsConfig, actionsConfig = _c === void 0 ? [
         {
             display: "Grouped",
             onClick: function () { return console.log("grouped"); },
@@ -99,9 +100,35 @@ var Accordion = function (_a) {
             display: "Stacked",
             onClick: function () { return console.log("stacked"); },
         },
-    ] : _d;
-    var _e = (0, react_1.useState)(defaultExpanded), isExpanded = _e[0], setIsExpanded = _e[1];
-    var _f = useCalculateWrapperHeight({ isExpanded: isExpanded }), wrapperRef = _f.wrapperRef, wrapperHeight = _f.wrapperHeight;
+    ] : _c;
+    var _d = (0, react_1.useState)(defaultExpanded), isExpanded = _d[0], setIsExpanded = _d[1];
+    var _e = useCalculateWrapperHeight({ isExpanded: isExpanded }), wrapperRef = _e.wrapperRef, wrapperHeight = _e.wrapperHeight;
+    var expandAnimationDuration = 300;
+    //helps to make the accordionOverflow visible once its open,
+    //for scenarios where a data viz tooltip needs to stick out
+    var _f = (0, react_1.useState)("hidden"), accordionOverflow = _f[0], setAccordionOverflow = _f[1];
+    (0, react_1.useEffect)(function () {
+        var timeoutId;
+        if (isExpanded) {
+            // Set timeout for making content visible after animation
+            timeoutId = setTimeout(function () {
+                // Double check if still expanded before setting to visible
+                if (isExpanded) {
+                    setAccordionOverflow("visible");
+                }
+            }, expandAnimationDuration);
+        }
+        else {
+            // Immediately set to hidden when closing
+            setAccordionOverflow("hidden");
+        }
+        // Cleanup function to clear timeout if component updates/unmounts
+        return function () {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [isExpanded, expandAnimationDuration]);
     return (react_1.default.createElement(StyledContainer, null,
         react_1.default.createElement(StyledHeader, { onClick: function () { return setIsExpanded(!isExpanded); } },
             react_1.default.createElement("div", { style: { flex: "1 0 0" } },
@@ -110,7 +137,7 @@ var Accordion = function (_a) {
                 react_1.default.createElement(ArrowWrapper, { isExpanded: isExpanded },
                     react_1.default.createElement(phosphor_react_1.CaretDown, { size: 16 })),
                 actionsConfig && (react_1.default.createElement(ActionMenu_1.ActionMenu, { CustomSelectComp: CustomActionMenuSelectButton, actions: actionsConfig })))),
-        react_1.default.createElement(StyledContentWrapper, { height: wrapperHeight, style: { overflow: accordionOverflow } },
+        react_1.default.createElement(StyledContentWrapper, { height: wrapperHeight, style: { overflow: accordionOverflow }, expandAnimationDuration: expandAnimationDuration },
             react_1.default.createElement(StyledContentInnerWrapper, { ref: wrapperRef }, children))));
 };
 exports.Accordion = Accordion;

package/dist/v2/components/BarChart/comps/CustomTooltip/index.d.ts

@@ -1,10 +1,9 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import React from 'react';
 import { TooltipProps } from 'recharts';
 import { LabelData } from '../CustomizedLabel';
 interface CustomTooltipProps extends TooltipProps<number, string> {
     value?: LabelData[];
     showPercent?: boolean;
-    setAccordionOverflow?: Dispatch<SetStateAction<string>>;
 }
 declare const CustomTooltip: React.FC<CustomTooltipProps>;
 export default CustomTooltip;

package/dist/v2/components/BarChart/comps/CustomTooltip/index.js

@@ -1,44 +1,14 @@
 "use strict";
-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;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var Typo2_1 = require("../../../Typo2");
 var __1 = require("../../../../..");
 var CustomTooltip = function (props) {
     var _a, _b;
-    var active = props.active, payload = props.payload, value = props.value, showPercent = props.showPercent, setAccordionOverflow = props.setAccordionOverflow;
+    var active = props.active, payload = props.payload, value = props.value, showPercent = props.showPercent;
     if (!active || !payload || !payload.length)
         return null;
     // Calculate position - align with the right side of the bars
@@ -59,10 +29,6 @@ var CustomTooltip = function (props) {
         flexDirection: 'column',
         gap: '0.5rem'
     };
-    (0, react_1.useEffect)(function () {
-        setAccordionOverflow && setAccordionOverflow('visible');
-        return function () { return setAccordionOverflow && setAccordionOverflow('hidden'); };
-    }, []);
     return (react_1.default.createElement("div", { style: style }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: {
             display: 'flex',
             alignItems: 'center',

package/dist/v2/components/BarChart/index.d.ts

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from "react";
+import React from "react";
 export interface BaseConfigs {
     barHeight: number;
     labelToBarGap: number;
@@ -29,6 +29,5 @@ export interface BarChartProps {
     showPercent?: boolean;
     breakdownDisplayType?: "grouped" | "stacked";
     colorIdx?: number;
-    setAccordionOverflow?: Dispatch<SetStateAction<string>>;
 }
 export declare const BarChart: React.FC<BarChartProps>;

package/dist/v2/components/BarChart/index.js

@@ -194,7 +194,7 @@ var barConfigs = {
     },
 };
 var BarChart = function (_a) {
-    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.breakdownDisplayType, breakdownDisplayType = _c === void 0 ? "grouped" : _c, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, _f = _a.colorIdx, colorIdx = _f === void 0 ? 0 : _f, setAccordionOverflow = _a.setAccordionOverflow;
+    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.breakdownDisplayType, breakdownDisplayType = _c === void 0 ? "grouped" : _c, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, _f = _a.colorIdx, colorIdx = _f === void 0 ? 0 : _f;
     var isBreakdown = Array.isArray(valuePath);
     var data = usePrepareData({
         _data: _data,
@@ -272,7 +272,7 @@ var BarChart = function (_a) {
                             // god knows why the dataindex gets stored against props.label. 
                             // this is some internal recharts thing for tooltips specifically. 
                             // we dont do this.
-                            value: (_a = data[props.label]) === null || _a === void 0 ? void 0 : _a.map(function (item, idx) { return (__assign(__assign({}, item.labels), { color: colors_1.dataVizColors[(colorIdx + idx) % colors_1.dataVizColors.length] })); }), setAccordionOverflow: setAccordionOverflow })));
+                            value: (_a = data[props.label]) === null || _a === void 0 ? void 0 : _a.map(function (item, idx) { return (__assign(__assign({}, item.labels), { color: colors_1.dataVizColors[(colorIdx + idx) % colors_1.dataVizColors.length] })); }) })));
                     }, cursor: false, allowEscapeViewBox: { x: true, y: true } })),
                 isBreakdown
                     ? data[0].map(function (_, stackIndex) {

package/dist/v2/components/DataVizAccordion/index.js

@@ -44,18 +44,17 @@ var DataVizAccordion = function (_a) {
         },
     };
     var _c = (0, react_2.useState)(chartOptions[0]), activeCompConfig = _c[0], setActiveCompConfig = _c[1];
-    var genActiveChartComp = function (activeCompConfig, setAccordionOverflow) {
+    var genActiveChartComp = function (activeCompConfig) {
         var ActiveChartComp = ChartComps[activeCompConfig.comp].comp;
         var wrapperStyle = ChartComps[activeCompConfig.comp].wrapperStyle;
         return (react_1.default.createElement("div", { style: __assign({ padding: "0 1.6rem 1rem 1.6rem" }, (wrapperStyle || {})) },
-            react_1.default.createElement(ActiveChartComp, __assign({}, props, activeCompConfig.props, { setAccordionOverflow: setAccordionOverflow }))));
+            react_1.default.createElement(ActiveChartComp, __assign({}, props, activeCompConfig.props))));
     };
-    var _d = (0, react_2.useState)('hidden'), accordionOverflow = _d[0], setAccordionOverflow = _d[1];
-    return (react_1.default.createElement(Accordion_1.Accordion, { key: JSON.stringify(activeCompConfig), title: title, accordionOverflow: accordionOverflow, actionsConfig: chartOptions.length > 1 && chartOptions.map(function (d) { return ({
+    return (react_1.default.createElement(Accordion_1.Accordion, { key: JSON.stringify(activeCompConfig), title: title, actionsConfig: chartOptions.length > 1 && chartOptions.map(function (d) { return ({
             display: d.display,
             onClick: function () {
                 return setActiveCompConfig(d);
             },
-        }); }) }, genActiveChartComp(activeCompConfig, setAccordionOverflow)));
+        }); }) }, genActiveChartComp(activeCompConfig)));
 };
 exports.DataVizAccordion = DataVizAccordion;

package/package.json

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