@speakapbv/dough-extended-components-for-speakap - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/index.d.ts

@@ -23,4 +23,3 @@ declare module "@speakapbv/dough-extended-components-for-speakap" {
         icon: JSX.Element | Element;
-        endButtonIcon?: JSX.Element | Element;
-        endButtonOnClick?(): void;
+        endElement?: JSX.Element | Element;
     }
@@ -33,2 +32,3 @@ export const MenuButton: React.FunctionComponent<MenuButtonProps>;
         open?: boolean;
+        innerPadding?: boolean;
         headerShort: JSX.Element | Element;
@@ -76,2 +76,10 @@ headerLong?: JSX.Element | Element;
 
+    /** ApplicationContent */
+    export interface ApplicationContentProps {
+        ref?: React.Ref<{ getScrollTop: number }>;
+        onScroll?(scrollTop: number): void;
+        scrollTop?: number;
+    }
+    export const ApplicationContent: React.FunctionComponent<ApplicationContentProps>;
+
     /** SearchTextBox */
@@ -78,0 +86,0 @@ export interface SearchTextBoxProps {

dist/index.es.js

@@ -1,3 +0,3 @@
-import React, { useState, useEffect, Children } from 'react';
-import { TextInput, DropMenu, Image, sizes, colors, Container, LayoutContainer, LayoutFlexBox, spacings, Text, Toggle, Divider, Button, colorsText, AppWrapper, Spacer } from '@speakapbv/dough-component-library';
+import React, { useState, forwardRef, useRef, useImperativeHandle, useEffect, Children } from 'react';
+import { TextInput, DropMenu, Image, sizes, colors, Container, LayoutContainer, LayoutFlexBox, spacings, Text, Toggle, Divider, Button, colorsText, AppWrapper } from '@speakapbv/dough-component-library';
 
@@ -231,17 +231,2 @@ function styleInject(css, ref) {
 
-var cancelEvent = function cancelEvent(e) {
-  if (e && e.stopPropagation) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (e.nativeEvent && e.nativeEvent.preventDefault) {
-      e.nativeEvent.preventDefault();
-      e.nativeEvent.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-    }
-  }
-
-  return false;
-};
-
 /**
@@ -253,4 +238,3 @@ * @typedef {Object} MenuButtonProps
  * @property {(JSX.Element | Element )} icon
- * @property {(JSX.Element | Element )} [endButtonIcon]
- * @property {():void=>{}} [endButtonOnClick]
+ * @property {(JSX.Element | Element )} [endElement]
  */
@@ -273,16 +257,9 @@
     color: colors.TRANSPARENT,
-    label: React.createElement(React.Fragment, null, React.createElement("span", {
-      className: "speakap-menu-button-label-text"
-    }, props.label), props.active && props.endButtonIcon && props.endButtonOnClick && React.createElement("span", {
-      onClick: function onClick(e) {
-        cancelEvent(e);
-        props.endButtonOnClick();
-      }
-    }, props.endButtonIcon)),
+    label: props.label,
     onClick: props.onClick
-  }));
+  }), props.active && props.endElement);
 };
 MenuButton.displayName = "MenuButton";
 
-var css$3 = ".speakap-app-frame {\n  width: 100vw;\n  height: 100vh;\n  box-sizing: border-box;\n  pointer-events: initial; }\n  .speakap-app-frame .speakap-app-frame-header-wrapper {\n    height: 56px;\n    max-height: 56px;\n    min-height: 56px;\n    background-color: var(--dough-color-header); }\n  .speakap-app-frame .speakap-app-frame-center {\n    overflow-x: hidden;\n    overflow-y: auto;\n    margin: 0 auto;\n    max-width: 1328px;\n    padding-left: 88px;\n    padding-right: 88px; }\n\n@media (max-width: 576px) {\n  .speakap-app-frame .speakap-app-frame-center {\n    max-width: 100%;\n    padding-left: 0;\n    padding-right: 0; } }\n";
+var css$3 = ".speakap-app-frame {\n  width: 100vw;\n  height: 100vh;\n  box-sizing: border-box;\n  pointer-events: initial; }\n  .speakap-app-frame .speakap-app-frame-wrapper {\n    width: 100vw;\n    height: 100vh; }\n    .speakap-app-frame .speakap-app-frame-wrapper .speakap-app-frame-content {\n      position: absolute;\n      top: 56px;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: 20;\n      width: auto;\n      height: auto;\n      padding-top: 24px;\n      padding-bottom: 24px;\n      overflow-x: hidden;\n      overflow-y: auto;\n      will-change: transform;\n      box-sizing: border-box; }\n  .speakap-app-frame .speakap-app-frame-header-wrapper {\n    height: 56px;\n    max-height: 56px;\n    min-height: 56px;\n    background-color: var(--dough-color-header); }\n  .speakap-app-frame .speakap-app-frame-center {\n    overflow-x: hidden;\n    overflow-y: auto;\n    margin: 0 auto;\n    max-width: 1328px;\n    padding-left: 88px;\n    padding-right: 88px; }\n\n@media (max-width: 576px) {\n  .speakap-app-frame .speakap-app-frame-center {\n    max-width: 100%;\n    padding-left: 0;\n    padding-right: 0; } }\n";
 styleInject(css$3);
@@ -302,5 +279,4 @@
     className: "speakap-app-frame"
-  }, React.createElement(LayoutContainer, {
-    layoutType: "vertical",
-    fillParent: true
+  }, React.createElement("div", {
+    className: "speakap-app-frame-wrapper"
   }, props.children));
@@ -310,3 +286,39 @@ };
 
-var css$4 = ".speakap-application-header {\n  overflow: hidden;\n  max-width: 100%;\n  width: 100%; }\n  .speakap-application-header .speakap-header-left {\n    width: 25%;\n    padding-left: 0 !important; }\n  .speakap-application-header .speakap-header-right {\n    width: 25%;\n    padding-right: 0 !important; }\n\n@media (max-width: 576px) {\n  .speakap-application-header {\n    padding-left: 64px !important;\n    padding-right: 16px !important; } }\n\n@media (max-width: 991px) {\n  .speakap-app-frame-header .speakap-header-left {\n    width: 33%;\n    padding-left: 0 !important; }\n  .speakap-app-frame-header .speakap-header-right {\n    width: 33%;\n    padding-right: 0 !important; } }\n";
+/**
+ * @typedef {Object} ApplicationContentProps
+ * @property {(React.Ref<{ getScrollTop(): number }>)} [ref]
+ * @property {(scrollTop:number):void=>{}} [onScroll]
+ * @property {number} [scrollTop]
+ */
+
+/**
+ * ApplicationContent
+ * @type {import('react').FunctionComponent<ApplicationContentProps>}
+ */
+
+var ApplicationContent = forwardRef(function (props, ref) {
+  var contentWrapperRef = useRef();
+  useImperativeHandle(ref, function () {
+    return {
+      getScrollTop: function getScrollTop() {
+        return contentWrapperRef.current ? contentWrapperRef.current.scrollTop : null;
+      }
+    };
+  });
+  useEffect(function () {
+    if (props.scrollTop !== undefined && contentWrapperRef && contentWrapperRef.current && contentWrapperRef.current.scrollTop !== props.scrollTop) {
+      contentWrapperRef.current.scrollTop = props.scrollTop;
+    }
+  }, [props.scrollTop]);
+  return React.createElement("div", {
+    onScroll: props.onScroll ? function () {
+      props.onScroll(contentWrapperRef.current.scrollTop);
+    } : null,
+    ref: contentWrapperRef,
+    className: "speakap-app-frame-content"
+  }, props.children);
+});
+ApplicationContent.displayName = "ApplicationContent";
+
+var css$4 = ".speakap-app-frame-header-wrapper {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: 56px;\n  display: -webkit-box;\n  display: -moz-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center; }\n\n.speakap-application-header {\n  overflow: hidden;\n  max-width: 100%;\n  width: 100%; }\n  .speakap-application-header .speakap-header-left {\n    width: 25%;\n    padding-left: 0 !important; }\n  .speakap-application-header .speakap-header-right {\n    width: 25%;\n    padding-right: 0 !important; }\n\n@media (max-width: 576px) {\n  .speakap-application-header {\n    padding-left: 64px !important;\n    padding-right: 16px !important; } }\n\n@media (max-width: 991px) {\n  .speakap-app-frame-header .speakap-header-left {\n    width: 33%;\n    padding-left: 0 !important; }\n  .speakap-app-frame-header .speakap-header-right {\n    width: 33%;\n    padding-right: 0 !important; } }\n";
 styleInject(css$4);
@@ -324,8 +336,4 @@
 var ApplicationHeader = function ApplicationHeader(props) {
-  return React.createElement(LayoutFlexBox, {
-    className: "speakap-app-frame-header-wrapper",
-    autoFit: false,
-    padding: sizes.NONE,
-    horizontalAlign: "center",
-    verticalAlign: "center"
+  return React.createElement("div", {
+    className: "speakap-app-frame-header-wrapper"
   }, React.createElement(Container, {
@@ -403,2 +411,3 @@ paddingHorizontal: sizes.NONE,
  * @property {boolean} [open]
+ * @property {boolean} [innerPadding]
  * @property {(JSX.Element | Element )} headerShort
@@ -456,3 +465,3 @@ * @property {(JSX.Element | Element )} [headerLong]
     autoFit: false,
-    padding: sizes.SMALL,
+    padding: props.innerPadding ? sizes.SMALL : sizes.NONE,
     verticalAlign: "top",
@@ -462,5 +471,3 @@ spacing: spacings.STRETCH
     className: "speakap-app-navigation-content"
-  }, props.children), React.createElement(Spacer, {
-    type: "vertical"
-  })))), props.placement === "left" && React.createElement("div", {
+  }, props.children)))), props.placement === "left" && React.createElement("div", {
     className: "speakap-app-navigation-overlay",
@@ -481,7 +488,8 @@ onClick: function onClick() {
 ApplicationNavigation.defaultProps = {
-  placement: "left"
+  placement: "left",
+  innerPadding: true
 };
 ApplicationNavigation.displayName = "ApplicationNavigation";
 
-var css$6 = ".speakap-page-wrapper {\n  grid-template-columns: 100%;\n  grid-row-gap: 0;\n  grid-column-gap: 0;\n  grid-auto-rows: max-content auto;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n  display: grid;\n  padding-top: 24px;\n  padding-bottom: 24px;\n  width: 100%; }\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-1 {\n    grid-template-columns: 26% 50% 26%; }\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-2 {\n    grid-template-columns: 33% 66%; }\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n    grid-template-columns: 25% 50% 25%; }\n  .speakap-page-wrapper > .speakap-page-content-left,\n  .speakap-page-wrapper > .speakap-page-content-right,\n  .speakap-page-wrapper > .speakap-page-content-center {\n    min-width: 1px !important;\n    box-sizing: border-box; }\n  .speakap-page-wrapper > .speakap-page-content-left {\n    grid-row-start: 1;\n    grid-column: 1;\n    padding-right: 24px; }\n  .speakap-page-wrapper > .speakap-page-content-center {\n    grid-row-start: 1;\n    grid-column: 2; }\n  .speakap-page-wrapper > .speakap-page-content-right {\n    grid-row-start: 1;\n    grid-column: 3;\n    padding-left: 24px; }\n\n@media (max-width: 993px) {\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n    grid-template-columns: 66% 33%; }\n    .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-left {\n      grid-column: 2;\n      grid-row-start: 2;\n      padding-top: 24px;\n      padding-left: 24px;\n      padding-right: 0; }\n    .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-center {\n      grid-column: 1;\n      grid-row-end: 300; }\n    .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-right {\n      grid-column: 2; } }\n\n@media (max-width: 768px) {\n  .speakap-page-wrapper {\n    display: block; }\n    .speakap-page-wrapper > .speakap-page-content-left,\n    .speakap-page-wrapper > .speakap-page-content-right {\n      display: none !important; } }\n";
+var css$6 = ".speakap-page-wrapper {\n  grid-template-columns: 100%;\n  grid-row-gap: 0;\n  grid-column-gap: 0;\n  grid-auto-rows: max-content auto;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n  display: grid;\n  width: 100%; }\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-1 {\n    grid-template-columns: 26% 50% 26%; }\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-2 {\n    grid-template-columns: 33% 66%; }\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n    grid-template-columns: 25% 50% 25%; }\n  .speakap-page-wrapper > .speakap-page-content-left,\n  .speakap-page-wrapper > .speakap-page-content-right,\n  .speakap-page-wrapper > .speakap-page-content-center {\n    min-width: 1px !important;\n    box-sizing: border-box; }\n  .speakap-page-wrapper > .speakap-page-content-left {\n    grid-row-start: 1;\n    grid-column: 1;\n    padding-right: 24px; }\n  .speakap-page-wrapper > .speakap-page-content-center {\n    grid-row-start: 1;\n    grid-column: 2; }\n  .speakap-page-wrapper > .speakap-page-content-right {\n    grid-row-start: 1;\n    grid-column: 3;\n    padding-left: 24px; }\n\n@media (max-width: 993px) {\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n    grid-template-columns: 66% 33%; }\n    .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-left {\n      grid-column: 2;\n      grid-row-start: 2;\n      padding-top: 24px;\n      padding-left: 24px;\n      padding-right: 0; }\n    .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-center {\n      grid-column: 1;\n      grid-row-end: 300; }\n    .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-right {\n      grid-column: 2; } }\n\n@media (max-width: 768px) {\n  .speakap-page-wrapper {\n    display: block; }\n    .speakap-page-wrapper > .speakap-page-content-left,\n    .speakap-page-wrapper > .speakap-page-content-right {\n      display: none !important; } }\n";
 styleInject(css$6);
@@ -499,7 +507,5 @@
 var Page = function Page(props) {
-  return React.createElement(LayoutFlexBox, {
-    spacing: spacings.STRETCH
-  }, React.createElement("div", {
+  return React.createElement("div", {
     className: cn("speakap-page-wrapper", "speakap-app-frame-center", "speakap-page-wrapper-split-into-".concat(Children.toArray(props.children).length))
-  }, props.children));
+  }, props.children);
 };
@@ -556,2 +562,2 @@ Page.displayName = "Page";
 
-export { ApplicationFrame, ApplicationHeader, ApplicationHeaderCenter, ApplicationHeaderLeft, ApplicationHeaderRight, ApplicationNavigation, MenuButton, Page, PageContentCenter, PageContentLeft, PageContentRight, SearchTextBox, UserDropMenu };
+export { ApplicationContent, ApplicationFrame, ApplicationHeader, ApplicationHeaderCenter, ApplicationHeaderLeft, ApplicationHeaderRight, ApplicationNavigation, MenuButton, Page, PageContentCenter, PageContentLeft, PageContentRight, SearchTextBox, UserDropMenu };

dist/index.js

@@ -238,17 +238,2 @@ 'use strict';
 
-var cancelEvent = function cancelEvent(e) {
-  if (e && e.stopPropagation) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (e.nativeEvent && e.nativeEvent.preventDefault) {
-      e.nativeEvent.preventDefault();
-      e.nativeEvent.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-    }
-  }
-
-  return false;
-};
-
 /**
@@ -260,4 +245,3 @@ * @typedef {Object} MenuButtonProps
  * @property {(JSX.Element | Element )} icon
- * @property {(JSX.Element | Element )} [endButtonIcon]
- * @property {():void=>{}} [endButtonOnClick]
+ * @property {(JSX.Element | Element )} [endElement]
  */
@@ -280,16 +264,9 @@
     color: doughComponentLibrary.colors.TRANSPARENT,
-    label: React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
-      className: "speakap-menu-button-label-text"
-    }, props.label), props.active && props.endButtonIcon && props.endButtonOnClick && React__default.createElement("span", {
-      onClick: function onClick(e) {
-        cancelEvent(e);
-        props.endButtonOnClick();
-      }
-    }, props.endButtonIcon)),
+    label: props.label,
     onClick: props.onClick
-  }));
+  }), props.active && props.endElement);
 };
 MenuButton.displayName = "MenuButton";
 
-var css$3 = ".speakap-app-frame {\n  width: 100vw;\n  height: 100vh;\n  box-sizing: border-box;\n  pointer-events: initial; }\n  .speakap-app-frame .speakap-app-frame-header-wrapper {\n    height: 56px;\n    max-height: 56px;\n    min-height: 56px;\n    background-color: var(--dough-color-header); }\n  .speakap-app-frame .speakap-app-frame-center {\n    overflow-x: hidden;\n    overflow-y: auto;\n    margin: 0 auto;\n    max-width: 1328px;\n    padding-left: 88px;\n    padding-right: 88px; }\n\n@media (max-width: 576px) {\n  .speakap-app-frame .speakap-app-frame-center {\n    max-width: 100%;\n    padding-left: 0;\n    padding-right: 0; } }\n";
+var css$3 = ".speakap-app-frame {\n  width: 100vw;\n  height: 100vh;\n  box-sizing: border-box;\n  pointer-events: initial; }\n  .speakap-app-frame .speakap-app-frame-wrapper {\n    width: 100vw;\n    height: 100vh; }\n    .speakap-app-frame .speakap-app-frame-wrapper .speakap-app-frame-content {\n      position: absolute;\n      top: 56px;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: 20;\n      width: auto;\n      height: auto;\n      padding-top: 24px;\n      padding-bottom: 24px;\n      overflow-x: hidden;\n      overflow-y: auto;\n      will-change: transform;\n      box-sizing: border-box; }\n  .speakap-app-frame .speakap-app-frame-header-wrapper {\n    height: 56px;\n    max-height: 56px;\n    min-height: 56px;\n    background-color: var(--dough-color-header); }\n  .speakap-app-frame .speakap-app-frame-center {\n    overflow-x: hidden;\n    overflow-y: auto;\n    margin: 0 auto;\n    max-width: 1328px;\n    padding-left: 88px;\n    padding-right: 88px; }\n\n@media (max-width: 576px) {\n  .speakap-app-frame .speakap-app-frame-center {\n    max-width: 100%;\n    padding-left: 0;\n    padding-right: 0; } }\n";
 styleInject(css$3);
@@ -309,5 +286,4 @@
     className: "speakap-app-frame"
-  }, React__default.createElement(doughComponentLibrary.LayoutContainer, {
-    layoutType: "vertical",
-    fillParent: true
+  }, React__default.createElement("div", {
+    className: "speakap-app-frame-wrapper"
   }, props.children));
@@ -317,3 +293,39 @@ };
 
-var css$4 = ".speakap-application-header {\n  overflow: hidden;\n  max-width: 100%;\n  width: 100%; }\n  .speakap-application-header .speakap-header-left {\n    width: 25%;\n    padding-left: 0 !important; }\n  .speakap-application-header .speakap-header-right {\n    width: 25%;\n    padding-right: 0 !important; }\n\n@media (max-width: 576px) {\n  .speakap-application-header {\n    padding-left: 64px !important;\n    padding-right: 16px !important; } }\n\n@media (max-width: 991px) {\n  .speakap-app-frame-header .speakap-header-left {\n    width: 33%;\n    padding-left: 0 !important; }\n  .speakap-app-frame-header .speakap-header-right {\n    width: 33%;\n    padding-right: 0 !important; } }\n";
+/**
+ * @typedef {Object} ApplicationContentProps
+ * @property {(React.Ref<{ getScrollTop(): number }>)} [ref]
+ * @property {(scrollTop:number):void=>{}} [onScroll]
+ * @property {number} [scrollTop]
+ */
+
+/**
+ * ApplicationContent
+ * @type {import('react').FunctionComponent<ApplicationContentProps>}
+ */
+
+var ApplicationContent = React.forwardRef(function (props, ref) {
+  var contentWrapperRef = React.useRef();
+  React.useImperativeHandle(ref, function () {
+    return {
+      getScrollTop: function getScrollTop() {
+        return contentWrapperRef.current ? contentWrapperRef.current.scrollTop : null;
+      }
+    };
+  });
+  React.useEffect(function () {
+    if (props.scrollTop !== undefined && contentWrapperRef && contentWrapperRef.current && contentWrapperRef.current.scrollTop !== props.scrollTop) {
+      contentWrapperRef.current.scrollTop = props.scrollTop;
+    }
+  }, [props.scrollTop]);
+  return React__default.createElement("div", {
+    onScroll: props.onScroll ? function () {
+      props.onScroll(contentWrapperRef.current.scrollTop);
+    } : null,
+    ref: contentWrapperRef,
+    className: "speakap-app-frame-content"
+  }, props.children);
+});
+ApplicationContent.displayName = "ApplicationContent";
+
+var css$4 = ".speakap-app-frame-header-wrapper {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: 56px;\n  display: -webkit-box;\n  display: -moz-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center; }\n\n.speakap-application-header {\n  overflow: hidden;\n  max-width: 100%;\n  width: 100%; }\n  .speakap-application-header .speakap-header-left {\n    width: 25%;\n    padding-left: 0 !important; }\n  .speakap-application-header .speakap-header-right {\n    width: 25%;\n    padding-right: 0 !important; }\n\n@media (max-width: 576px) {\n  .speakap-application-header {\n    padding-left: 64px !important;\n    padding-right: 16px !important; } }\n\n@media (max-width: 991px) {\n  .speakap-app-frame-header .speakap-header-left {\n    width: 33%;\n    padding-left: 0 !important; }\n  .speakap-app-frame-header .speakap-header-right {\n    width: 33%;\n    padding-right: 0 !important; } }\n";
 styleInject(css$4);
@@ -331,8 +343,4 @@
 var ApplicationHeader = function ApplicationHeader(props) {
-  return React__default.createElement(doughComponentLibrary.LayoutFlexBox, {
-    className: "speakap-app-frame-header-wrapper",
-    autoFit: false,
-    padding: doughComponentLibrary.sizes.NONE,
-    horizontalAlign: "center",
-    verticalAlign: "center"
+  return React__default.createElement("div", {
+    className: "speakap-app-frame-header-wrapper"
   }, React__default.createElement(doughComponentLibrary.Container, {
@@ -410,2 +418,3 @@ paddingHorizontal: doughComponentLibrary.sizes.NONE,
  * @property {boolean} [open]
+ * @property {boolean} [innerPadding]
  * @property {(JSX.Element | Element )} headerShort
@@ -463,3 +472,3 @@ * @property {(JSX.Element | Element )} [headerLong]
     autoFit: false,
-    padding: doughComponentLibrary.sizes.SMALL,
+    padding: props.innerPadding ? doughComponentLibrary.sizes.SMALL : doughComponentLibrary.sizes.NONE,
     verticalAlign: "top",
@@ -469,5 +478,3 @@ spacing: doughComponentLibrary.spacings.STRETCH
     className: "speakap-app-navigation-content"
-  }, props.children), React__default.createElement(doughComponentLibrary.Spacer, {
-    type: "vertical"
-  })))), props.placement === "left" && React__default.createElement("div", {
+  }, props.children)))), props.placement === "left" && React__default.createElement("div", {
     className: "speakap-app-navigation-overlay",
@@ -488,7 +495,8 @@ onClick: function onClick() {
 ApplicationNavigation.defaultProps = {
-  placement: "left"
+  placement: "left",
+  innerPadding: true
 };
 ApplicationNavigation.displayName = "ApplicationNavigation";
 
-var css$6 = ".speakap-page-wrapper {\n  grid-template-columns: 100%;\n  grid-row-gap: 0;\n  grid-column-gap: 0;\n  grid-auto-rows: max-content auto;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n  display: grid;\n  padding-top: 24px;\n  padding-bottom: 24px;\n  width: 100%; }\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-1 {\n    grid-template-columns: 26% 50% 26%; }\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-2 {\n    grid-template-columns: 33% 66%; }\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n    grid-template-columns: 25% 50% 25%; }\n  .speakap-page-wrapper > .speakap-page-content-left,\n  .speakap-page-wrapper > .speakap-page-content-right,\n  .speakap-page-wrapper > .speakap-page-content-center {\n    min-width: 1px !important;\n    box-sizing: border-box; }\n  .speakap-page-wrapper > .speakap-page-content-left {\n    grid-row-start: 1;\n    grid-column: 1;\n    padding-right: 24px; }\n  .speakap-page-wrapper > .speakap-page-content-center {\n    grid-row-start: 1;\n    grid-column: 2; }\n  .speakap-page-wrapper > .speakap-page-content-right {\n    grid-row-start: 1;\n    grid-column: 3;\n    padding-left: 24px; }\n\n@media (max-width: 993px) {\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n    grid-template-columns: 66% 33%; }\n    .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-left {\n      grid-column: 2;\n      grid-row-start: 2;\n      padding-top: 24px;\n      padding-left: 24px;\n      padding-right: 0; }\n    .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-center {\n      grid-column: 1;\n      grid-row-end: 300; }\n    .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-right {\n      grid-column: 2; } }\n\n@media (max-width: 768px) {\n  .speakap-page-wrapper {\n    display: block; }\n    .speakap-page-wrapper > .speakap-page-content-left,\n    .speakap-page-wrapper > .speakap-page-content-right {\n      display: none !important; } }\n";
+var css$6 = ".speakap-page-wrapper {\n  grid-template-columns: 100%;\n  grid-row-gap: 0;\n  grid-column-gap: 0;\n  grid-auto-rows: max-content auto;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n  display: grid;\n  width: 100%; }\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-1 {\n    grid-template-columns: 26% 50% 26%; }\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-2 {\n    grid-template-columns: 33% 66%; }\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n    grid-template-columns: 25% 50% 25%; }\n  .speakap-page-wrapper > .speakap-page-content-left,\n  .speakap-page-wrapper > .speakap-page-content-right,\n  .speakap-page-wrapper > .speakap-page-content-center {\n    min-width: 1px !important;\n    box-sizing: border-box; }\n  .speakap-page-wrapper > .speakap-page-content-left {\n    grid-row-start: 1;\n    grid-column: 1;\n    padding-right: 24px; }\n  .speakap-page-wrapper > .speakap-page-content-center {\n    grid-row-start: 1;\n    grid-column: 2; }\n  .speakap-page-wrapper > .speakap-page-content-right {\n    grid-row-start: 1;\n    grid-column: 3;\n    padding-left: 24px; }\n\n@media (max-width: 993px) {\n  .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n    grid-template-columns: 66% 33%; }\n    .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-left {\n      grid-column: 2;\n      grid-row-start: 2;\n      padding-top: 24px;\n      padding-left: 24px;\n      padding-right: 0; }\n    .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-center {\n      grid-column: 1;\n      grid-row-end: 300; }\n    .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-right {\n      grid-column: 2; } }\n\n@media (max-width: 768px) {\n  .speakap-page-wrapper {\n    display: block; }\n    .speakap-page-wrapper > .speakap-page-content-left,\n    .speakap-page-wrapper > .speakap-page-content-right {\n      display: none !important; } }\n";
 styleInject(css$6);
@@ -506,7 +514,5 @@
 var Page = function Page(props) {
-  return React__default.createElement(doughComponentLibrary.LayoutFlexBox, {
-    spacing: doughComponentLibrary.spacings.STRETCH
-  }, React__default.createElement("div", {
+  return React__default.createElement("div", {
     className: cn("speakap-page-wrapper", "speakap-app-frame-center", "speakap-page-wrapper-split-into-".concat(React.Children.toArray(props.children).length))
-  }, props.children));
+  }, props.children);
 };
@@ -563,2 +569,3 @@ Page.displayName = "Page";
 
+exports.ApplicationContent = ApplicationContent;
 exports.ApplicationFrame = ApplicationFrame;
@@ -565,0 +572,0 @@ exports.ApplicationHeader = ApplicationHeader;

package.json

 {
     "name": "@speakapbv/dough-extended-components-for-speakap",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "DOUGH Extended for Speakap: Speakap Specific Components based on Dough",
@@ -24,3 +24,3 @@ "author": "Speakap",
     "peerDependencies": {
-        "@speakapbv/dough-component-library": ">=0.3.0",
+        "@speakapbv/dough-component-library": ">=0.3.2",
         "@speakapbv/dough-component-library-tokens": ">=1.0.0",
@@ -37,3 +37,3 @@ "react": ">=16.12.0",
         "@rollup/plugin-url": "^4.0.0",
-        "@speakapbv/dough-component-library": "0.3.0",
+        "@speakapbv/dough-component-library": "0.3.2",
         "@speakapbv/dough-component-library-tokens": "1.0.0",
@@ -40,0 +40,0 @@ "@svgr/rollup": "^5.0.1",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68122

increased by3.76%

Lines of code

1139

increased by2.15%

Worsened metrics

Number of low supply chain risk alerts

9

increased by28.57%

No dependency changes