@speakapbv/dough-component-library 10.3.3 → 10.4.0

package/dist/components/containers/card/card.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode, ReactNodeArray, UIEvent } from "react";
 import { Colors, Sizes, DoughDataAttributes, BorderStyles } from "../../../utils/constants";
 import "./card.scss";
+import { BoxOverflow } from "../box/box";
 export interface CardProps {
     border?: boolean;
     children?: ReactNode;
@@ -17,6 +18,7 @@ export interface CardProps {
     paddingVertical?: Sizes;
     onScrollReachedBottom?(e?: UIEvent): void;
     borderStyle?: BorderStyles;
+    overflow?: BoxOverflow;
     zIndex?: number;
 }
 export declare const Card: {

package/dist/index.es.js

@@ -1215,7 +1215,7 @@ Box.displayName = "Box";
 
 var Card = function (props) {
     var _a;
-    var _b = props.border, border = _b === void 0 ? false : _b, _c = props.flat, flat = _c === void 0 ? false : _c, _d = props.color, color = _d === void 0 ? Colors.THEME : _d, _e = props.fullHeight, fullHeight = _e === void 0 ? false : _e, _f = props.shadow, shadow = _f === void 0 ? true : _f, _g = props.headerButtons, headerButtons = _g === void 0 ? [] : _g, zIndex = props.zIndex;
+    var _b = props.border, border = _b === void 0 ? false : _b, _c = props.flat, flat = _c === void 0 ? false : _c, _d = props.color, color = _d === void 0 ? Colors.THEME : _d, _e = props.fullHeight, fullHeight = _e === void 0 ? false : _e, _f = props.shadow, shadow = _f === void 0 ? true : _f, _g = props.headerButtons, headerButtons = _g === void 0 ? [] : _g, zIndex = props.zIndex, _h = props.overflow, overflow = _h === void 0 ? { x: BoxOverflow.HIDDEN, y: BoxOverflow.AUTO } : _h;
     var getHeaderItems = function (givenChildren) {
         var childrenToCheck = Children.toArray(givenChildren);
         var headerItems = childrenToCheck.filter(function (child) {
@@ -1278,7 +1278,7 @@ var Card = function (props) {
                         : props.padding
                             ? props.padding
                             : Sizes.NORMAL,
-                }, className: "dough-card-content", overflow: { x: BoxOverflow.HIDDEN, y: BoxOverflow.AUTO }, flex: props.fullHeight ? "1 1 auto" : undefined }, contentItems));
+                }, className: "dough-card-content", overflow: overflow, flex: props.fullHeight ? "1 1 auto" : undefined }, contentItems));
         }
         return React.createElement(React.Fragment, null);
     };
@@ -3675,6 +3675,7 @@ var SelectBox = forwardRef(function (props, ref) {
     var hiddenInputRef = useRef(null);
     var wrapperRef = useRef(null);
     var componentRef = useRef(null);
+    var isOpen = useRef(false);
     useImperativeHandle(ref, function () { return ({
         getValue: function () {
             return hiddenInputRef &&
@@ -3772,6 +3773,7 @@ var SelectBox = forwardRef(function (props, ref) {
                 setIsFilled(true);
                 if (!props.multiple) {
                     setShowDropArea(false);
+                    isOpen.current = false;
                 }
             }
         }
@@ -3780,12 +3782,14 @@ var SelectBox = forwardRef(function (props, ref) {
             setIsFilled(false);
             if (!props.multiple) {
                 setShowDropArea(false);
+                isOpen.current = false;
             }
         }
     };
     var handleKeyDown = function (e) {
         if (e.keyCode === 9) {
             setShowDropArea(false);
+            isOpen.current = false;
         }
     };
     var handleBlur = function () {
@@ -3802,13 +3806,19 @@ var SelectBox = forwardRef(function (props, ref) {
         setFilterText("");
     };
     var openDropArea = function () {
+        var _a, _b;
+        (_b = (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".dough-drop-menu-button")) === null || _b === void 0 ? void 0 : _b.classList.add("dough-drop-menu-button-open");
+        setShowDropArea(true);
         if (props.onFocus) {
             props.onFocus(props.value);
         }
-        if (!showDropArea) {
-            setIsActive(true);
-            setShowDropArea(true);
-        }
+        isOpen.current = true;
+    };
+    var closeDropArea = function () {
+        var _a, _b;
+        (_b = (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".dough-drop-menu-button")) === null || _b === void 0 ? void 0 : _b.classList.remove("dough-drop-menu-button-open");
+        setShowDropArea(false);
+        isOpen.current = false;
     };
     var selectFirstItem = function () {
         var filterRes = props.data.filter(function (option) {
@@ -3914,7 +3924,6 @@ var SelectBox = forwardRef(function (props, ref) {
     };
     var checkAutoFocus = function () {
         if (!initialFocusIsSet && props.autoFocus) {
-            openDropArea();
             setInitialFocusIsSet(true);
         }
     };
@@ -3943,9 +3952,14 @@ var SelectBox = forwardRef(function (props, ref) {
                         ? !props.validationResult.valid
                         : !isValid.valid),
             }), onClick: function (e) {
-                cancelEvent(e);
-                openDropArea();
-            }, onFocus: openDropArea, onKeyDown: handleKeyDown, ref: wrapperRef },
+                if (isOpen.current) {
+                    closeDropArea();
+                }
+                else {
+                    cancelEvent(e);
+                    openDropArea();
+                }
+            }, onKeyDown: handleKeyDown, ref: wrapperRef },
             React.createElement("div", { className: "value-container" }, getSelectedValueElements(props.value)),
             guidingIcon && (React.createElement("div", { className: "arrow-icon-container" },
                 isActive && React.createElement(UpIcon, null),

package/dist/index.js

@@ -1200,7 +1200,7 @@ Box.displayName = "Box";
 
 var Card = function (props) {
     var _a;
-    var _b = props.border, border = _b === void 0 ? false : _b, _c = props.flat, flat = _c === void 0 ? false : _c, _d = props.color, color = _d === void 0 ? exports.Colors.THEME : _d, _e = props.fullHeight, fullHeight = _e === void 0 ? false : _e, _f = props.shadow, shadow = _f === void 0 ? true : _f, _g = props.headerButtons, headerButtons = _g === void 0 ? [] : _g, zIndex = props.zIndex;
+    var _b = props.border, border = _b === void 0 ? false : _b, _c = props.flat, flat = _c === void 0 ? false : _c, _d = props.color, color = _d === void 0 ? exports.Colors.THEME : _d, _e = props.fullHeight, fullHeight = _e === void 0 ? false : _e, _f = props.shadow, shadow = _f === void 0 ? true : _f, _g = props.headerButtons, headerButtons = _g === void 0 ? [] : _g, zIndex = props.zIndex, _h = props.overflow, overflow = _h === void 0 ? { x: exports.BoxOverflow.HIDDEN, y: exports.BoxOverflow.AUTO } : _h;
     var getHeaderItems = function (givenChildren) {
         var childrenToCheck = React.Children.toArray(givenChildren);
         var headerItems = childrenToCheck.filter(function (child) {
@@ -1263,7 +1263,7 @@ var Card = function (props) {
                         : props.padding
                             ? props.padding
                             : exports.Sizes.NORMAL,
-                }, className: "dough-card-content", overflow: { x: exports.BoxOverflow.HIDDEN, y: exports.BoxOverflow.AUTO }, flex: props.fullHeight ? "1 1 auto" : undefined }, contentItems));
+                }, className: "dough-card-content", overflow: overflow, flex: props.fullHeight ? "1 1 auto" : undefined }, contentItems));
         }
         return React__default.createElement(React__default.Fragment, null);
     };
@@ -3659,6 +3659,7 @@ var SelectBox = React.forwardRef(function (props, ref) {
     var hiddenInputRef = React.useRef(null);
     var wrapperRef = React.useRef(null);
     var componentRef = React.useRef(null);
+    var isOpen = React.useRef(false);
     React.useImperativeHandle(ref, function () { return ({
         getValue: function () {
             return hiddenInputRef &&
@@ -3756,6 +3757,7 @@ var SelectBox = React.forwardRef(function (props, ref) {
                 setIsFilled(true);
                 if (!props.multiple) {
                     setShowDropArea(false);
+                    isOpen.current = false;
                 }
             }
         }
@@ -3764,12 +3766,14 @@ var SelectBox = React.forwardRef(function (props, ref) {
             setIsFilled(false);
             if (!props.multiple) {
                 setShowDropArea(false);
+                isOpen.current = false;
             }
         }
     };
     var handleKeyDown = function (e) {
         if (e.keyCode === 9) {
             setShowDropArea(false);
+            isOpen.current = false;
         }
     };
     var handleBlur = function () {
@@ -3786,13 +3790,19 @@ var SelectBox = React.forwardRef(function (props, ref) {
         setFilterText("");
     };
     var openDropArea = function () {
+        var _a, _b;
+        (_b = (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".dough-drop-menu-button")) === null || _b === void 0 ? void 0 : _b.classList.add("dough-drop-menu-button-open");
+        setShowDropArea(true);
         if (props.onFocus) {
             props.onFocus(props.value);
         }
-        if (!showDropArea) {
-            setIsActive(true);
-            setShowDropArea(true);
-        }
+        isOpen.current = true;
+    };
+    var closeDropArea = function () {
+        var _a, _b;
+        (_b = (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".dough-drop-menu-button")) === null || _b === void 0 ? void 0 : _b.classList.remove("dough-drop-menu-button-open");
+        setShowDropArea(false);
+        isOpen.current = false;
     };
     var selectFirstItem = function () {
         var filterRes = props.data.filter(function (option) {
@@ -3898,7 +3908,6 @@ var SelectBox = React.forwardRef(function (props, ref) {
     };
     var checkAutoFocus = function () {
         if (!initialFocusIsSet && props.autoFocus) {
-            openDropArea();
             setInitialFocusIsSet(true);
         }
     };
@@ -3927,9 +3936,14 @@ var SelectBox = React.forwardRef(function (props, ref) {
                         ? !props.validationResult.valid
                         : !isValid.valid),
             }), onClick: function (e) {
-                cancelEvent(e);
-                openDropArea();
-            }, onFocus: openDropArea, onKeyDown: handleKeyDown, ref: wrapperRef },
+                if (isOpen.current) {
+                    closeDropArea();
+                }
+                else {
+                    cancelEvent(e);
+                    openDropArea();
+                }
+            }, onKeyDown: handleKeyDown, ref: wrapperRef },
             React__default.createElement("div", { className: "value-container" }, getSelectedValueElements(props.value)),
             guidingIcon && (React__default.createElement("div", { className: "arrow-icon-container" },
                 isActive && React__default.createElement(UpIcon, null),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@speakapbv/dough-component-library",
-    "version": "10.3.3",
+    "version": "10.4.0",
     "description": "DOUGH: Speakap React Component Library",
     "author": "Speakap",
     "license": "MIT",