@speakapbv/dough-component-library 9.17.0 → 9.18.2

package/dist/components/breakpoint-viewer/breakpoint-viewer.d.ts

@@ -4,6 +4,7 @@ export interface BreakpointViewerProps {
     children?: ReactNode;
     breakpointSize?: BreakpointViewportSizes | Array<BreakpointViewportSizes>;
     onSizeChangedTo?(size: BreakpointViewportSizes): void;
+    useManualBreakpointSize?: boolean;
 }
 export declare const BreakpointViewer: {
     (props: BreakpointViewerProps): JSX.Element | null;

package/dist/components/form-elements/select-box/select-box.d.ts

@@ -17,6 +17,7 @@ export declare type DoughSelectBoxInputRef = {
 interface SelectBoxCommonProps {
     ref?: Ref<DoughSelectBoxInputRef>;
     width?: string;
+    dropAreaWidth?: string;
     busy?: boolean;
     borderless?: boolean;
     className?: string;
@@ -63,5 +64,5 @@ export interface SelectBoxMultipleProps {
     value?: Array<DoughSelectBoxData>;
 }
 export declare type SelectBoxProps = SelectBoxCommonProps & (SelectBoxSingleProps | SelectBoxMultipleProps);
-export declare const SelectBox: React.ForwardRefExoticComponent<Pick<SelectBoxProps, "width" | "busy" | "borderless" | "className" | "inputClassName" | "dataAttributes" | "tabIndex" | "name" | "data" | "autoFocus" | "disabled" | "readOnly" | "emptyOptionText" | "filterItems" | "filterInputAutoFocus" | "filterFunction" | "onFilterTextChanged" | "optionComponent" | "filterPlaceholder" | "label" | "mandatory" | "multiple" | "placeholder" | "guidingIcon" | "validationResult" | "onBlur" | "onChange" | "onFocus" | "validator" | "value"> & React.RefAttributes<DoughSelectBoxInputRef>>;
+export declare const SelectBox: React.ForwardRefExoticComponent<Pick<SelectBoxProps, "width" | "dropAreaWidth" | "busy" | "borderless" | "className" | "inputClassName" | "dataAttributes" | "tabIndex" | "name" | "data" | "autoFocus" | "disabled" | "readOnly" | "emptyOptionText" | "filterItems" | "filterInputAutoFocus" | "filterFunction" | "onFilterTextChanged" | "optionComponent" | "filterPlaceholder" | "label" | "mandatory" | "multiple" | "placeholder" | "guidingIcon" | "validationResult" | "onBlur" | "onChange" | "onFocus" | "validator" | "value"> & React.RefAttributes<DoughSelectBoxInputRef>>;
 export {};

package/dist/index.d.ts

@@ -62,6 +62,6 @@ export { findParentBySelector, setBreakpointSizeManually, } from "./utils/dom-ma
 export { default as cn } from "./utils/class-names";
 export { generateUID } from "./utils/guid";
 export { hideLastDoughTooltip } from "./utils/dom-management";
-export { BreakpointViewer } from "./components/breakpoint-viewer/breakpoint-viewer";
+export { BreakpointViewer, BreakpointViewerProps, } from "./components/breakpoint-viewer/breakpoint-viewer";
 export { default as checkComponentType } from "./utils/type-check";
 export { default as DesignTokens } from "@speakapbv/dough-component-library-tokens/index";

package/dist/index.es.js

@@ -507,6 +507,9 @@ var insertBreakpointControllerDoms = function () {
                 else {
                     breakpointViewItems[affectedBreakpoint].forEach(function (breakpointViewID) {
                         if (allBreakpointViews[breakpointViewID]) {
+                            if (breakpointViewID === "xl") {
+                                console.log("hide xl (100):", allBreakpointViews[breakpointViewID]);
+                            }
                             allBreakpointViews[breakpointViewID].breakpoints[affectedBreakpoint] = false;
                             var allBreakpointsAreHidden_1 = true;
                             Object.keys(allBreakpointViews[breakpointViewID]
@@ -539,9 +542,11 @@ var manualBreakpointSize = null;
 var setBreakpointSizeManually = function (size) {
     manualBreakpointSize = size;
 };
-var registerBreakpointView = function (callbacks, breakpointSize, id) {
+var registerBreakpointView = function (callbacks, breakpointSize, id, useManualBreakpointSize) {
     var _a;
-    if (manualBreakpointSize && manualBreakpointSize === breakpointSize) {
+    if (useManualBreakpointSize &&
+        manualBreakpointSize &&
+        manualBreakpointSize === breakpointSize) {
         callbacks.show(breakpointSize);
     }
     else if (typeof IntersectionObserver !== "undefined") {
@@ -1308,7 +1313,7 @@ var generateUID = function () {
 var css_248z$b = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-drop-area-wrapper {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0);\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  overflow: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transform-origin: center center;\n  font-family: \"Roboto\", sans-serif;\n}\nbody:not(.no-transition) .dough-drop-area-wrapper {\n  transition: opacity 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  pointer-events: fill;\n  max-height: calc(80vh - 16px);\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: absolute;\n  background-color: white;\n  background-color: var(--dough-color-theme);\n  box-sizing: border-box;\n  border-radius: 12px;\n  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow {\n  pointer-events: none;\n  position: absolute;\n  z-index: 50;\n  width: 32px !important;\n  height: 16px !important;\n  margin-top: -16px;\n  overflow: hidden;\n  min-width: initial !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow:before {\n  content: \"\";\n  background-color: white;\n  background-color: var(--dough-color-theme);\n  position: absolute;\n  top: 8px;\n  left: 4px;\n  z-index: 10;\n  width: 16px;\n  height: 16px;\n  transform: translate3d(0, 0, 0) rotateZ(45deg);\n  box-shadow: 0 24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up {\n  margin-top: initial;\n  margin-bottom: -16px;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up:before {\n  top: -8px;\n  box-shadow: 0 -24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow,\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  transform: translate3d(0, -4px, 0);\n}\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: transform 250ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper.visible {\n  opacity: 1;\n}\n.dough-drop-area-wrapper.visible > .dough-drop-area-arrow,\n.dough-drop-area-wrapper.visible > .dough-drop-area-container {\n  transform: translate3d(0, 0, 0) !important;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  pointer-events: all;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-arrow {\n  display: none !important;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-container {\n  position: absolute;\n  top: initial !important;\n  bottom: 0 !important;\n  left: 0 !important;\n  z-index: 2;\n  width: 100% !important;\n  height: auto !important;\n  min-height: 1vh !important;\n  max-height: 85vh !important;\n  box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n  transform: translate3d(0, 20vh, 0);\n  border-radius: 0;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n@media only screen and (max-width: 576px) {\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    pointer-events: all;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-arrow {\n    display: none !important;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-container {\n    position: absolute;\n    top: initial !important;\n    bottom: 0 !important;\n    left: 0 !important;\n    z-index: 2;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 1vh !important;\n    max-height: 85vh !important;\n    box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n    transform: translate3d(0, 20vh, 0);\n    border-radius: 0;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n}";
 styleInject(css_248z$b);
 
-var TOP_MARGIN = 2;
+var TOP_MARGIN = 4;
 var TOUP = "to-up";
 var TODOWN = "to-down";
 var DropArea = function (props) {
@@ -1780,7 +1785,7 @@ var BreakpointViewer = function (props) {
         BreakpointViewportSizes.MEDIUM,
         BreakpointViewportSizes.LARGE,
         BreakpointViewportSizes.XL,
-    ] : _a;
+    ] : _a, useManualBreakpointSize = props.useManualBreakpointSize;
     var _b = useState(false), isVisible = _b[0], setIsVisible = _b[1];
     useEffect(function () {
         var listOfBreakpointSizes = typeof breakpointSize === "string"
@@ -1798,7 +1803,7 @@ var BreakpointViewer = function (props) {
                         }
                         setIsVisible(true);
                     },
-                }, breakpointSize, breakpointID);
+                }, breakpointSize, breakpointID, useManualBreakpointSize);
             });
         }
         return function () {
@@ -3839,7 +3844,7 @@ var SelectBox = forwardRef(function (props, ref) {
                     React.createElement("span", { className: "dough-input-element-top-border-before" }),
                     React.createElement("span", null, props.label))),
                 React.createElement("span", { className: "dough-input-element-top-border-after" })))),
-        React.createElement(DropArea, { onHide: handleBlur, referenceElement: componentRef, show: showDropArea },
+        React.createElement(DropArea, { onHide: handleBlur, referenceElement: componentRef, show: showDropArea, width: props.dropAreaWidth },
             React.createElement(LayoutContainer, { layoutType: Direction.VERTICAL },
                 props.filterItems && (React.createElement(LayoutFlexBox, { verticalAlign: VerticalAlignment.CENTER, autoFit: false, className: "dough-selectbox-filter-container", spacing: Spacings.AUTO },
                     React.createElement(TextInput, { autoFocus: props.filterInputAutoFocus, tabIndex: props.tabIndex === undefined

package/dist/index.js

@@ -503,6 +503,9 @@ var insertBreakpointControllerDoms = function () {
                 else {
                     breakpointViewItems[affectedBreakpoint].forEach(function (breakpointViewID) {
                         if (allBreakpointViews[breakpointViewID]) {
+                            if (breakpointViewID === "xl") {
+                                console.log("hide xl (100):", allBreakpointViews[breakpointViewID]);
+                            }
                             allBreakpointViews[breakpointViewID].breakpoints[affectedBreakpoint] = false;
                             var allBreakpointsAreHidden_1 = true;
                             Object.keys(allBreakpointViews[breakpointViewID]
@@ -535,9 +538,11 @@ var manualBreakpointSize = null;
 var setBreakpointSizeManually = function (size) {
     manualBreakpointSize = size;
 };
-var registerBreakpointView = function (callbacks, breakpointSize, id) {
+var registerBreakpointView = function (callbacks, breakpointSize, id, useManualBreakpointSize) {
     var _a;
-    if (manualBreakpointSize && manualBreakpointSize === breakpointSize) {
+    if (useManualBreakpointSize &&
+        manualBreakpointSize &&
+        manualBreakpointSize === breakpointSize) {
         callbacks.show(breakpointSize);
     }
     else if (typeof IntersectionObserver !== "undefined") {
@@ -1294,7 +1299,7 @@ var generateUID = function () {
 var css_248z$b = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-drop-area-wrapper {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0);\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  overflow: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transform-origin: center center;\n  font-family: \"Roboto\", sans-serif;\n}\nbody:not(.no-transition) .dough-drop-area-wrapper {\n  transition: opacity 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  pointer-events: fill;\n  max-height: calc(80vh - 16px);\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: absolute;\n  background-color: white;\n  background-color: var(--dough-color-theme);\n  box-sizing: border-box;\n  border-radius: 12px;\n  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow {\n  pointer-events: none;\n  position: absolute;\n  z-index: 50;\n  width: 32px !important;\n  height: 16px !important;\n  margin-top: -16px;\n  overflow: hidden;\n  min-width: initial !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow:before {\n  content: \"\";\n  background-color: white;\n  background-color: var(--dough-color-theme);\n  position: absolute;\n  top: 8px;\n  left: 4px;\n  z-index: 10;\n  width: 16px;\n  height: 16px;\n  transform: translate3d(0, 0, 0) rotateZ(45deg);\n  box-shadow: 0 24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up {\n  margin-top: initial;\n  margin-bottom: -16px;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up:before {\n  top: -8px;\n  box-shadow: 0 -24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow,\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  transform: translate3d(0, -4px, 0);\n}\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: transform 250ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper.visible {\n  opacity: 1;\n}\n.dough-drop-area-wrapper.visible > .dough-drop-area-arrow,\n.dough-drop-area-wrapper.visible > .dough-drop-area-container {\n  transform: translate3d(0, 0, 0) !important;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  pointer-events: all;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-arrow {\n  display: none !important;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-container {\n  position: absolute;\n  top: initial !important;\n  bottom: 0 !important;\n  left: 0 !important;\n  z-index: 2;\n  width: 100% !important;\n  height: auto !important;\n  min-height: 1vh !important;\n  max-height: 85vh !important;\n  box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n  transform: translate3d(0, 20vh, 0);\n  border-radius: 0;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n@media only screen and (max-width: 576px) {\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    pointer-events: all;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-arrow {\n    display: none !important;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-container {\n    position: absolute;\n    top: initial !important;\n    bottom: 0 !important;\n    left: 0 !important;\n    z-index: 2;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 1vh !important;\n    max-height: 85vh !important;\n    box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n    transform: translate3d(0, 20vh, 0);\n    border-radius: 0;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n}";
 styleInject(css_248z$b);
 
-var TOP_MARGIN = 2;
+var TOP_MARGIN = 4;
 var TOUP = "to-up";
 var TODOWN = "to-down";
 var DropArea = function (props) {
@@ -1766,7 +1771,7 @@ var BreakpointViewer = function (props) {
         exports.BreakpointViewportSizes.MEDIUM,
         exports.BreakpointViewportSizes.LARGE,
         exports.BreakpointViewportSizes.XL,
-    ] : _a;
+    ] : _a, useManualBreakpointSize = props.useManualBreakpointSize;
     var _b = React.useState(false), isVisible = _b[0], setIsVisible = _b[1];
     React.useEffect(function () {
         var listOfBreakpointSizes = typeof breakpointSize === "string"
@@ -1784,7 +1789,7 @@ var BreakpointViewer = function (props) {
                         }
                         setIsVisible(true);
                     },
-                }, breakpointSize, breakpointID);
+                }, breakpointSize, breakpointID, useManualBreakpointSize);
             });
         }
         return function () {
@@ -3824,7 +3829,7 @@ var SelectBox = React.forwardRef(function (props, ref) {
                     React__default.createElement("span", { className: "dough-input-element-top-border-before" }),
                     React__default.createElement("span", null, props.label))),
                 React__default.createElement("span", { className: "dough-input-element-top-border-after" })))),
-        React__default.createElement(DropArea, { onHide: handleBlur, referenceElement: componentRef, show: showDropArea },
+        React__default.createElement(DropArea, { onHide: handleBlur, referenceElement: componentRef, show: showDropArea, width: props.dropAreaWidth },
             React__default.createElement(LayoutContainer, { layoutType: exports.Direction.VERTICAL },
                 props.filterItems && (React__default.createElement(LayoutFlexBox, { verticalAlign: exports.VerticalAlignment.CENTER, autoFit: false, className: "dough-selectbox-filter-container", spacing: exports.Spacings.AUTO },
                     React__default.createElement(TextInput, { autoFocus: props.filterInputAutoFocus, tabIndex: props.tabIndex === undefined

package/dist/utils/dom-management.d.ts

@@ -23,5 +23,5 @@ export declare const getNotificationOverlay: (verticalLayer: any, horizontalLaye
 export declare const getInjectedStylesWrapper: () => any;
 export declare const findParentBySelector: (element: HTMLElement, selector: string) => HTMLElement;
 export declare const setBreakpointSizeManually: (size: BreakpointViewportSizes | null) => void;
-export declare const registerBreakpointView: (callbacks: any, breakpointSize: BreakpointViewportSizes, id: string) => void;
+export declare const registerBreakpointView: (callbacks: any, breakpointSize: BreakpointViewportSizes, id: string, useManualBreakpointSize?: boolean | undefined) => void;
 export declare const deRegisterBreakpointView: (id: string) => void;

package/package.json

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