@startlibs/components 1.0.0-alpha-8d3 → 1.0.0-alpha-8d4

package/lib/index.js

@@ -113,7 +113,9 @@ var Icon = styled__default(styled.withTheme(IconComponent)).withConfig({
   displayName: "Icon",
   componentId: "wsq54u-0"
 })(["font-family:'", "' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;", ""], function (props) {
-  return props.theme.iconFont;
+  var _props$theme;
+
+  return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.iconFont;
 }, function (props) {
   return props.clickable && "\n    cursor: pointer;\n    &:hover {\n      opacity: 0.85;\n    }\n  ";
 });
@@ -2275,7 +2277,9 @@ var Notification$1 = styled__default.div.withConfig({
 var NotificationWrapper = styled__default.div.withConfig({
   displayName: "PersistentNotifications__NotificationWrapper",
   componentId: "sc-1t7i0dh-2"
-})(["background:white;margin-top:4rem;margin-right:0.75rem;margin-left:0.75rem;padding:5px;border-radius:10px;box-shadow:0 0 10px 0 rgba(0,0,0,0.1),0 1px 2px 1px rgba(0,0,0,0.15);max-width:360px;"]);
+})(["background:white;margin-top:", ";margin-right:0.75rem;margin-left:0.75rem;padding:5px;border-radius:10px;box-shadow:0 0 10px 0 rgba(0,0,0,0.1),0 1px 2px 1px rgba(0,0,0,0.15);max-width:360px;"], function (props) {
+  return props.marginTop || "4rem";
+});
 var PersistentNotifications = function PersistentNotifications() {
   var _useNotifications = useNotifications(),
       _useNotifications2 = _slicedToArray(_useNotifications, 2),
@@ -2294,11 +2298,13 @@ var PersistentNotifications = function PersistentNotifications() {
 
   var _notifications$ = notifications[0],
       content = _notifications$.content,
-      type = _notifications$.type;
+      type = _notifications$.type,
+      marginTop = _notifications$.marginTop;
   return React__default.createElement(core.Fill, {
     name: "PersistentNotifications"
   }, React__default.createElement(FlipNotification$1, {
-    type: type
+    type: type,
+    marginTop: marginTop
   }, utils.callIfFunction(content, closeMessage)));
 };
 
@@ -2308,7 +2314,9 @@ var FlipNotification$1 = function FlipNotification(props) {
   return React__default.createElement(NotificationContainer$1, {
     className: "JS-fix-dialog-scroll",
     ref: ref
-  }, React__default.createElement(NotificationWrapper, null, React__default.createElement(Notification$1, _extends({
+  }, React__default.createElement(NotificationWrapper, {
+    marginTop: props.marginTop
+  }, React__default.createElement(Notification$1, _extends({
     id: "js-share-notification"
   }, props))));
 };
@@ -2418,7 +2426,8 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
       keepWidth = _ref$keepWidth === void 0 ? true : _ref$keepWidth,
       _ref$boundMargin = _ref.boundMargin,
       boundMargin = _ref$boundMargin === void 0 ? 6 : _ref$boundMargin,
-      respectBounds = _ref.respectBounds;
+      respectBounds = _ref.respectBounds,
+      respectOffsetScroll = _ref.respectOffsetScroll;
   var placeholder = React.useRef();
   var arrowRef = core.useEnsureRef(arrowRefOpt);
 
@@ -2443,7 +2452,7 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
       return;
     }
 
-    var usingLayer = useLayers && getDialogLayersSize() > 0;
+    var usingLayer = respectOffsetScroll || useLayers && getDialogLayersSize() > 0;
     var scrollOwner = usingLayer ? utils.getClosestOffsetScroll(element.current.offsetParent) : {
       scrollTop: window.pageYOffset,
       scrollLeft: window.pageXOffset // console.log({scrollOwner,scrollTop:scrollOwner.scrollTop,pageYOffset:window.pageYOffset})
@@ -2452,9 +2461,12 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
     var scrollY = !isNaN(scrollOwner.scrollTop) ? scrollOwner.scrollTop : window.pageYOffset;
     var scrollX = !isNaN(scrollOwner.scrollLeft) ? scrollOwner.scrollLeft : window.pageXOffset;
 
-    var _placeholder$current$ = placeholder.current.getBoundingClientRect(),
-        leftPlusBorder = _placeholder$current$.left,
-        topPlusBorder = _placeholder$current$.top;
+    var _ref2 = respectOffsetScroll ? {
+      top: placeholder.current.offsetParent.offsetTop,
+      left: placeholder.current.offsetParent.offsetLeft
+    } : placeholder.current.getBoundingClientRect(),
+        leftPlusBorder = _ref2.left,
+        topPlusBorder = _ref2.top;
 
     var _window$getComputedSt = window.getComputedStyle(placeholder.current.offsetParent),
         borderLeftWidth = _window$getComputedSt.borderLeftWidth,
@@ -2462,9 +2474,9 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
 
     var left = leftPlusBorder - parseInt(borderLeftWidth, 10);
     var top = topPlusBorder - parseInt(borderTopWidth, 10);
-    var _placeholder$current$2 = placeholder.current.offsetParent,
-        parentOffsetWidth = _placeholder$current$2.offsetWidth,
-        parentOffsetHeight = _placeholder$current$2.offsetHeight;
+    var _placeholder$current$ = placeholder.current.offsetParent,
+        parentOffsetWidth = _placeholder$current$.offsetWidth,
+        parentOffsetHeight = _placeholder$current$.offsetHeight;
     var _element$current = element.current,
         popupOffsetWidth = _element$current.offsetWidth,
         popupOffsetHeight = _element$current.offsetHeight;
@@ -2521,10 +2533,10 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
     var arrowOnVerticalSide = arrowSide === 'left' || arrowSide === 'right';
     var arrowSize = arrowElement ? arrowElement.getBoundingClientRect()[arrowOnVerticalSide ? 'height' : 'width'] : ARROW_DEFAULT_SIZE * Math.sqrt(2);
 
-    var _ref2 = arrowOnVerticalSide ? processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetHeight, popupOffsetHeight, processedTop - top, flippedV) : processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetWidth, popupOffsetWidth, processedLeft - left, flippedV),
-        _ref3 = _slicedToArray(_ref2, 2),
-        arrowOffset = _ref3[0],
-        popupArrowOffset = _ref3[1];
+    var _ref3 = arrowOnVerticalSide ? processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetHeight, popupOffsetHeight, processedTop - top, flippedV) : processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetWidth, popupOffsetWidth, processedLeft - left, flippedV),
+        _ref4 = _slicedToArray(_ref3, 2),
+        arrowOffset = _ref4[0],
+        popupArrowOffset = _ref4[1];
 
     var maxHeight = window.innerHeight - (POSITIONING_BOUNDS.top + POSITIONING_BOUNDS.bottom) - (respectBounds ? boundMargin * 2 : 0);
     var maxWidth = window.innerWidth - (POSITIONING_BOUNDS.left + POSITIONING_BOUNDS.right) - (respectBounds ? boundMargin * 2 : 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startlibs/components",
-  "version": "1.0.0-alpha-8d3",
+  "version": "1.0.0-alpha-8d4",
   "description": "Startlibs Components",
   "main": "lib/index.js",
   "sideEffects": false,