@speakapbv/dough-component-library 9.27.0 → 9.28.0

package/dist/components/drop-menu/drop-menu.d.ts

@@ -35,7 +35,9 @@ export interface DropMenuProps {
     size?: Sizes.LARGE | Sizes.NORMAL | Sizes.SMALL | Sizes.XS;
     innerButtonSize?: Sizes.NORMAL | Sizes.SMALL;
     rightShift?: number;
+    topShift?: number;
     overlaySelector?: string;
     customClickHandler?: (e: MouseEvent) => void;
+    alwaysTop?: boolean;
 }
 export declare const DropMenu: React.ForwardRefExoticComponent<DropMenuProps & React.RefAttributes<DoughDropMenuRef>>;

package/dist/components/form-elements/input-wrapper/input-wrapper.d.ts

@@ -8,6 +8,7 @@ export interface InputWrapperProps {
     width?: string;
     borderless?: boolean;
     filled?: boolean;
+    active?: boolean;
     disabled?: boolean;
     startElement?: ReactNode;
     endElement?: ReactNode;

package/dist/index.es.js

@@ -1332,9 +1332,9 @@ var TOP_MARGIN = 4;
 var TOUP = "to-up";
 var TODOWN = "to-down";
 var DropArea = function (props) {
-    var _a = props.rightShift, rightShift = _a === void 0 ? 0 : _a, _b = props.closeOnClickOutside, closeOnClickOutside = _b === void 0 ? true : _b, _c = props.closeOnEscape, closeOnEscape = _c === void 0 ? true : _c;
+    var _a = props.rightShift, rightShift = _a === void 0 ? 0 : _a, _b = props.topShift, topShift = _b === void 0 ? 0 : _b, _c = props.closeOnClickOutside, closeOnClickOutside = _c === void 0 ? true : _c, _d = props.closeOnEscape, closeOnEscape = _d === void 0 ? true : _d;
     var scrollLockId = useState(generateUID)[0];
-    var _d = useState(null), showDropArea = _d[0], setShowDropArea = _d[1];
+    var _e = useState(null), showDropArea = _e[0], setShowDropArea = _e[1];
     var dropAreaWrapperRef = useRef(null);
     var dropAreaArrowRef = useRef(null);
     var dropAreaContainerRef = useRef(null);
@@ -1384,9 +1384,19 @@ var DropArea = function (props) {
                     overlayRect.width - (rect.left + rect.width + rightShift);
             }
             var widthPercentage = (rect.width * 100) / overlayRect.width;
-            var topPosition = rect.top + rect.height + TOP_MARGIN + (props.showCaret ? 8 : 0);
+            var topPosition = props.alwaysTop
+                ? rect.top - dropAreaContentHeight - TOP_MARGIN + topShift
+                : rect.top +
+                    topShift +
+                    rect.height +
+                    TOP_MARGIN +
+                    (props.showCaret ? 8 : 0);
             var bottomPosition = void 0;
-            if (topPosition + dropAreaContentHeight > overlayRect.height) {
+            if (props.alwaysTop) {
+                setDirection(TOUP);
+            }
+            else if (topPosition + dropAreaContentHeight >
+                overlayRect.height) {
                 bottomPosition =
                     overlayRect.height -
                         rect.top +
@@ -1528,9 +1538,9 @@ var css_248z$c = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$c);
 
 var DropMenu = forwardRef(function (_a, ref) {
-    var _b = _a.alignIconRight, alignIconRight = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? Colors.TRANSPARENT : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = _a.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.showCaret, showCaret = _g === void 0 ? true : _g, _h = _a.rightShift, rightShift = _h === void 0 ? 0 : _h, _j = _a.shadow, shadow = _j === void 0 ? false : _j, _k = _a.show, show = _k === void 0 ? false : _k, _l = _a.rounded, rounded = _l === void 0 ? true : _l, _m = _a.icon, icon = _m === void 0 ? React.createElement(EllipsisVIcon, null) : _m, _o = _a.size, size = _o === void 0 ? Sizes.SMALL : _o, _p = _a.innerButtonSize, innerButtonSize = _p === void 0 ? Sizes.NORMAL : _p, ButtonComponent = _a.ButtonComponent, className = _a.className, onOpen = _a.onOpen, onClose = _a.onClose, children = _a.children, asInvisibleLine = _a.asInvisibleLine, alignFromRight = _a.alignFromRight, alignToCenter = _a.alignToCenter, dataAttributes = _a.dataAttributes, padding = _a.padding, label = _a.label, fullWidth = _a.fullWidth, strictToReferenceWidth = _a.strictToReferenceWidth, buttonClassName = _a.buttonClassName, overlaySelector = _a.overlaySelector, overlayWidth = _a.overlayWidth, customClickHandler = _a.customClickHandler;
+    var _b = _a.alignIconRight, alignIconRight = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? Colors.TRANSPARENT : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = _a.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.showCaret, showCaret = _g === void 0 ? true : _g, _h = _a.rightShift, rightShift = _h === void 0 ? 0 : _h, _j = _a.topShift, topShift = _j === void 0 ? 0 : _j, _k = _a.shadow, shadow = _k === void 0 ? false : _k, _l = _a.show, show = _l === void 0 ? false : _l, _m = _a.rounded, rounded = _m === void 0 ? true : _m, _o = _a.icon, icon = _o === void 0 ? React.createElement(EllipsisVIcon, null) : _o, _p = _a.size, size = _p === void 0 ? Sizes.SMALL : _p, _q = _a.innerButtonSize, innerButtonSize = _q === void 0 ? Sizes.NORMAL : _q, ButtonComponent = _a.ButtonComponent, className = _a.className, onOpen = _a.onOpen, onClose = _a.onClose, children = _a.children, asInvisibleLine = _a.asInvisibleLine, alignFromRight = _a.alignFromRight, alignToCenter = _a.alignToCenter, dataAttributes = _a.dataAttributes, padding = _a.padding, label = _a.label, fullWidth = _a.fullWidth, strictToReferenceWidth = _a.strictToReferenceWidth, buttonClassName = _a.buttonClassName, overlaySelector = _a.overlaySelector, overlayWidth = _a.overlayWidth, customClickHandler = _a.customClickHandler, alwaysTop = _a.alwaysTop;
     var componentRef = useRef(null);
-    var _q = useState(false), showDropArea = _q[0], setShowDropArea = _q[1];
+    var _r = useState(false), showDropArea = _r[0], setShowDropArea = _r[1];
     var openDropArea = function (e) {
         var _a, _b;
         cancelEvent(e);
@@ -1626,7 +1636,7 @@ var DropMenu = forwardRef(function (_a, ref) {
             "dough-dropmenu-full-width": fullWidth,
         }), ref: componentRef }, dataAttributes),
         asInvisibleLine !== true && renderButtonComponent(),
-        React.createElement(DropArea, { overlaySelector: overlaySelector, rightShift: rightShift, alignFromRight: alignFromRight, alignToCenter: alignToCenter, closeOnClickOutside: closeOnClickOutside, closeOnEscape: closeOnEscape, onHide: closeDropArea, referenceElement: componentRef, show: showDropArea, showCaret: showCaret, strictToReferenceWidth: strictToReferenceWidth, width: overlayWidth || "auto" },
+        React.createElement(DropArea, { overlaySelector: overlaySelector, rightShift: rightShift, topShift: topShift, alignFromRight: alignFromRight, alignToCenter: alignToCenter, closeOnClickOutside: closeOnClickOutside, closeOnEscape: closeOnEscape, onHide: closeDropArea, referenceElement: componentRef, show: showDropArea, showCaret: showCaret, strictToReferenceWidth: strictToReferenceWidth, alwaysTop: alwaysTop, width: overlayWidth || "auto" },
             React.createElement(LayoutContainer, { className: cn("dough-drop-menu-buttons-container", className), layoutType: Direction.VERTICAL, dataAttributes: dataAttributes }, getButtons()))));
 });
 DropMenu.displayName = "DropMenu";
@@ -1696,6 +1706,7 @@ var InputWrapper = function (props) {
         React.createElement("span", { onClick: props.onClick, className: cn("dough-input-element", "dough-color-input-border", "dough-text-input", "with-fields", {
                 "dough-input-wrapper-clickable": props.onClick,
                 filled: props.filled,
+                active: props.active,
                 "validation-error": props.validationResult &&
                     !props.validationResult.valid,
             }) },

package/dist/index.js

@@ -1317,9 +1317,9 @@ var TOP_MARGIN = 4;
 var TOUP = "to-up";
 var TODOWN = "to-down";
 var DropArea = function (props) {
-    var _a = props.rightShift, rightShift = _a === void 0 ? 0 : _a, _b = props.closeOnClickOutside, closeOnClickOutside = _b === void 0 ? true : _b, _c = props.closeOnEscape, closeOnEscape = _c === void 0 ? true : _c;
+    var _a = props.rightShift, rightShift = _a === void 0 ? 0 : _a, _b = props.topShift, topShift = _b === void 0 ? 0 : _b, _c = props.closeOnClickOutside, closeOnClickOutside = _c === void 0 ? true : _c, _d = props.closeOnEscape, closeOnEscape = _d === void 0 ? true : _d;
     var scrollLockId = React.useState(generateUID)[0];
-    var _d = React.useState(null), showDropArea = _d[0], setShowDropArea = _d[1];
+    var _e = React.useState(null), showDropArea = _e[0], setShowDropArea = _e[1];
     var dropAreaWrapperRef = React.useRef(null);
     var dropAreaArrowRef = React.useRef(null);
     var dropAreaContainerRef = React.useRef(null);
@@ -1369,9 +1369,19 @@ var DropArea = function (props) {
                     overlayRect.width - (rect.left + rect.width + rightShift);
             }
             var widthPercentage = (rect.width * 100) / overlayRect.width;
-            var topPosition = rect.top + rect.height + TOP_MARGIN + (props.showCaret ? 8 : 0);
+            var topPosition = props.alwaysTop
+                ? rect.top - dropAreaContentHeight - TOP_MARGIN + topShift
+                : rect.top +
+                    topShift +
+                    rect.height +
+                    TOP_MARGIN +
+                    (props.showCaret ? 8 : 0);
             var bottomPosition = void 0;
-            if (topPosition + dropAreaContentHeight > overlayRect.height) {
+            if (props.alwaysTop) {
+                setDirection(TOUP);
+            }
+            else if (topPosition + dropAreaContentHeight >
+                overlayRect.height) {
                 bottomPosition =
                     overlayRect.height -
                         rect.top +
@@ -1513,9 +1523,9 @@ var css_248z$c = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$c);
 
 var DropMenu = React.forwardRef(function (_a, ref) {
-    var _b = _a.alignIconRight, alignIconRight = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? exports.Colors.TRANSPARENT : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = _a.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.showCaret, showCaret = _g === void 0 ? true : _g, _h = _a.rightShift, rightShift = _h === void 0 ? 0 : _h, _j = _a.shadow, shadow = _j === void 0 ? false : _j, _k = _a.show, show = _k === void 0 ? false : _k, _l = _a.rounded, rounded = _l === void 0 ? true : _l, _m = _a.icon, icon = _m === void 0 ? React__default.createElement(EllipsisVIcon, null) : _m, _o = _a.size, size = _o === void 0 ? exports.Sizes.SMALL : _o, _p = _a.innerButtonSize, innerButtonSize = _p === void 0 ? exports.Sizes.NORMAL : _p, ButtonComponent = _a.ButtonComponent, className = _a.className, onOpen = _a.onOpen, onClose = _a.onClose, children = _a.children, asInvisibleLine = _a.asInvisibleLine, alignFromRight = _a.alignFromRight, alignToCenter = _a.alignToCenter, dataAttributes = _a.dataAttributes, padding = _a.padding, label = _a.label, fullWidth = _a.fullWidth, strictToReferenceWidth = _a.strictToReferenceWidth, buttonClassName = _a.buttonClassName, overlaySelector = _a.overlaySelector, overlayWidth = _a.overlayWidth, customClickHandler = _a.customClickHandler;
+    var _b = _a.alignIconRight, alignIconRight = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? exports.Colors.TRANSPARENT : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = _a.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.showCaret, showCaret = _g === void 0 ? true : _g, _h = _a.rightShift, rightShift = _h === void 0 ? 0 : _h, _j = _a.topShift, topShift = _j === void 0 ? 0 : _j, _k = _a.shadow, shadow = _k === void 0 ? false : _k, _l = _a.show, show = _l === void 0 ? false : _l, _m = _a.rounded, rounded = _m === void 0 ? true : _m, _o = _a.icon, icon = _o === void 0 ? React__default.createElement(EllipsisVIcon, null) : _o, _p = _a.size, size = _p === void 0 ? exports.Sizes.SMALL : _p, _q = _a.innerButtonSize, innerButtonSize = _q === void 0 ? exports.Sizes.NORMAL : _q, ButtonComponent = _a.ButtonComponent, className = _a.className, onOpen = _a.onOpen, onClose = _a.onClose, children = _a.children, asInvisibleLine = _a.asInvisibleLine, alignFromRight = _a.alignFromRight, alignToCenter = _a.alignToCenter, dataAttributes = _a.dataAttributes, padding = _a.padding, label = _a.label, fullWidth = _a.fullWidth, strictToReferenceWidth = _a.strictToReferenceWidth, buttonClassName = _a.buttonClassName, overlaySelector = _a.overlaySelector, overlayWidth = _a.overlayWidth, customClickHandler = _a.customClickHandler, alwaysTop = _a.alwaysTop;
     var componentRef = React.useRef(null);
-    var _q = React.useState(false), showDropArea = _q[0], setShowDropArea = _q[1];
+    var _r = React.useState(false), showDropArea = _r[0], setShowDropArea = _r[1];
     var openDropArea = function (e) {
         var _a, _b;
         cancelEvent(e);
@@ -1611,7 +1621,7 @@ var DropMenu = React.forwardRef(function (_a, ref) {
             "dough-dropmenu-full-width": fullWidth,
         }), ref: componentRef }, dataAttributes),
         asInvisibleLine !== true && renderButtonComponent(),
-        React__default.createElement(DropArea, { overlaySelector: overlaySelector, rightShift: rightShift, alignFromRight: alignFromRight, alignToCenter: alignToCenter, closeOnClickOutside: closeOnClickOutside, closeOnEscape: closeOnEscape, onHide: closeDropArea, referenceElement: componentRef, show: showDropArea, showCaret: showCaret, strictToReferenceWidth: strictToReferenceWidth, width: overlayWidth || "auto" },
+        React__default.createElement(DropArea, { overlaySelector: overlaySelector, rightShift: rightShift, topShift: topShift, alignFromRight: alignFromRight, alignToCenter: alignToCenter, closeOnClickOutside: closeOnClickOutside, closeOnEscape: closeOnEscape, onHide: closeDropArea, referenceElement: componentRef, show: showDropArea, showCaret: showCaret, strictToReferenceWidth: strictToReferenceWidth, alwaysTop: alwaysTop, width: overlayWidth || "auto" },
             React__default.createElement(LayoutContainer, { className: cn("dough-drop-menu-buttons-container", className), layoutType: exports.Direction.VERTICAL, dataAttributes: dataAttributes }, getButtons()))));
 });
 DropMenu.displayName = "DropMenu";
@@ -1681,6 +1691,7 @@ var InputWrapper = function (props) {
         React__default.createElement("span", { onClick: props.onClick, className: cn("dough-input-element", "dough-color-input-border", "dough-text-input", "with-fields", {
                 "dough-input-wrapper-clickable": props.onClick,
                 filled: props.filled,
+                active: props.active,
                 "validation-error": props.validationResult &&
                     !props.validationResult.valid,
             }) },

package/dist/src/components/containers/drop-area/drop-area.d.ts

@@ -14,7 +14,9 @@ export interface DropAreaProps {
     showCaret?: boolean;
     width?: number | string;
     rightShift?: number;
+    topShift?: number;
     overlaySelector?: string;
+    alwaysTop?: boolean;
 }
 export declare const DropArea: {
     (props: DropAreaProps): JSX.Element;

package/package.json

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