oolib 2.175.1 → 2.175.3

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,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  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"])), 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;
 });
@@ -100,6 +103,32 @@ var Accordion = function (_a) {
     ] : _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" } },
@@ -108,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 },
+        react_1.default.createElement(StyledContentWrapper, { height: wrapperHeight, style: { overflow: accordionOverflow }, expandAnimationDuration: expandAnimationDuration },
             react_1.default.createElement(StyledContentInnerWrapper, { ref: wrapperRef }, children))));
 };
 exports.Accordion = Accordion;

package/package.json

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