@speakapbv/dough-component-library 9.18.0 → 9.18.3

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/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 () {
@@ -3884,11 +3889,12 @@ var CheckBox = forwardRef(function (props, ref) {
         },
     }); });
     var handleChange = function () {
-        if (!props.checkOnly || (props.checkOnly && !props.value)) {
-            if (props.onChange) {
-                props.onChange(!props.value);
-            }
+        if (props.disabled ||
+            !props.onChange ||
+            (props.checkOnly && props.value)) {
+            return;
         }
+        props.onChange(!props.value);
     };
     var getIcon = function (val) {
         if (val !== -1) {
@@ -3906,7 +3912,7 @@ var CheckBox = forwardRef(function (props, ref) {
                 checked: props.value === 1 || props.value,
                 rounded: props.rounded,
             }) },
-            React.createElement("input", { readOnly: true, ref: hiddenInputRef, checked: props.value === 1 || props.value ? true : false, className: cn(props.inputClassName, "dough-hidden-input"), type: props.checkOnly ? "radio" : "checkbox", name: props.name, value: props.value ? "on" : "off" }),
+            React.createElement("input", { readOnly: true, ref: hiddenInputRef, checked: props.value === 1 || props.value ? true : false, className: cn(props.inputClassName, "dough-hidden-input"), disabled: props === null || props === void 0 ? void 0 : props.disabled, type: props.checkOnly ? "radio" : "checkbox", name: props.name, value: props.value ? "on" : "off" }),
             React.createElement(Box, { display: BoxDisplay.FLEX, alignItems: BoxAlign.CENTER, wrap: BoxWrap.NOWRAP },
                 React.createElement(Box, { display: BoxDisplay.INLINE_FLEX, alignItems: BoxAlign.CENTER, className: "dough-selection-left-box", padding: Sizes.XXS },
                     React.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size), 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 () {
@@ -3869,11 +3874,12 @@ var CheckBox = React.forwardRef(function (props, ref) {
         },
     }); });
     var handleChange = function () {
-        if (!props.checkOnly || (props.checkOnly && !props.value)) {
-            if (props.onChange) {
-                props.onChange(!props.value);
-            }
+        if (props.disabled ||
+            !props.onChange ||
+            (props.checkOnly && props.value)) {
+            return;
         }
+        props.onChange(!props.value);
     };
     var getIcon = function (val) {
         if (val !== -1) {
@@ -3891,7 +3897,7 @@ var CheckBox = React.forwardRef(function (props, ref) {
                 checked: props.value === 1 || props.value,
                 rounded: props.rounded,
             }) },
-            React__default.createElement("input", { readOnly: true, ref: hiddenInputRef, checked: props.value === 1 || props.value ? true : false, className: cn(props.inputClassName, "dough-hidden-input"), type: props.checkOnly ? "radio" : "checkbox", name: props.name, value: props.value ? "on" : "off" }),
+            React__default.createElement("input", { readOnly: true, ref: hiddenInputRef, checked: props.value === 1 || props.value ? true : false, className: cn(props.inputClassName, "dough-hidden-input"), disabled: props === null || props === void 0 ? void 0 : props.disabled, type: props.checkOnly ? "radio" : "checkbox", name: props.name, value: props.value ? "on" : "off" }),
             React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, alignItems: exports.BoxAlign.CENTER, wrap: exports.BoxWrap.NOWRAP },
                 React__default.createElement(Box, { display: exports.BoxDisplay.INLINE_FLEX, alignItems: exports.BoxAlign.CENTER, className: "dough-selection-left-box", padding: exports.Sizes.XXS },
                     React__default.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size), 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.18.0",
+    "version": "9.18.3",
     "description": "DOUGH: Speakap React Component Library",
     "author": "Speakap",
     "license": "MIT",