oolib 2.175.1 → 2.175.2

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

@@ -3,6 +3,7 @@ interface AccordionProps {
     title: React.ReactNode;
     children: React.ReactNode;
     defaultExpanded?: boolean;
+    accordionOverflow?: string;
     onViewTypeChange?: (type: "grouped" | "stacked") => void;
     currentViewType?: "grouped" | "stacked";
     actionsConfig?: {

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

@@ -52,7 +52,7 @@ 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  overflow: hidden;\n  ", "\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: flex-end;\n  overflow: hidden;\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"])), (0, mixins_1.transition)("height"), function (_a) {
     var height = _a.height;
     return height;
 });
@@ -88,7 +88,9 @@ 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.actionsConfig, actionsConfig = _c === void 0 ? [
+    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 ? [
         {
             display: "Grouped",
             onClick: function () { return console.log("grouped"); },
@@ -97,9 +99,9 @@ var Accordion = function (_a) {
             display: "Stacked",
             onClick: function () { return console.log("stacked"); },
         },
-    ] : _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;
+    ] : _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;
     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" } },
@@ -108,7 +110,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 },
+        react_1.default.createElement(StyledContentWrapper, { height: wrapperHeight, style: { overflow: accordionOverflow } },
             react_1.default.createElement(StyledContentInnerWrapper, { ref: wrapperRef }, children))));
 };
 exports.Accordion = Accordion;

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

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } 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,14 +1,44 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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 });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(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;
+    var active = props.active, payload = props.payload, value = props.value, showPercent = props.showPercent, setAccordionOverflow = props.setAccordionOverflow;
     if (!active || !payload || !payload.length)
         return null;
     // Calculate position - align with the right side of the bars
@@ -29,6 +59,10 @@ 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 from "react";
+import React, { Dispatch, SetStateAction } from "react";
 export interface BaseConfigs {
     barHeight: number;
     labelToBarGap: number;
@@ -29,5 +29,6 @@ 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;
+    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 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] })); }) })));
+                            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 })));
                     }, cursor: false, allowEscapeViewBox: { x: true, y: true } })),
                 isBreakdown
                     ? data[0].map(function (_, stackIndex) {

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

@@ -44,17 +44,18 @@ var DataVizAccordion = function (_a) {
         },
     };
     var _c = (0, react_2.useState)(chartOptions[0]), activeCompConfig = _c[0], setActiveCompConfig = _c[1];
-    var genActiveChartComp = function (activeCompConfig) {
+    var genActiveChartComp = function (activeCompConfig, setAccordionOverflow) {
         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))));
+            react_1.default.createElement(ActiveChartComp, __assign({}, props, activeCompConfig.props, { setAccordionOverflow: setAccordionOverflow }))));
     };
-    return (react_1.default.createElement(Accordion_1.Accordion, { key: JSON.stringify(activeCompConfig), title: title, actionsConfig: chartOptions.length > 1 && chartOptions.map(function (d) { return ({
+    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 ({
             display: d.display,
             onClick: function () {
                 return setActiveCompConfig(d);
             },
-        }); }) }, genActiveChartComp(activeCompConfig)));
+        }); }) }, genActiveChartComp(activeCompConfig, setAccordionOverflow)));
 };
 exports.DataVizAccordion = DataVizAccordion;

package/package.json

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