diginet-core-ui 1.3.69-beta.1 → 1.3.69-beta.4

package/components/form-control/radio/index.js

@@ -167,8 +167,6 @@ Radio.defaultProps = {
   disabled: false,
   readOnly: false,
   defaultChecked: false,
-  label: '',
-  value: '',
   className: '',
   width: 20,
   labelProps: {}

package/components/popover/index.js

@@ -6,7 +6,7 @@ import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
-import { borderRadius4px, displayBlock, flexCol, overflowAuto, parseWidthHeight, positionAbsolute, positionRelative } from '../../styles/general';
+import { borderRadius4px, displayBlock, flexCol, overflowAuto, parseWidthHeight, positionAbsolute, positionFixed, positionRelative } from '../../styles/general';
 import theme from '../../theme/settings';
 import { classNames, refType as ref } from '../../utils';
 const {
@@ -18,6 +18,7 @@ const {
   typography: {
     paragraph1
   },
+  spacing,
   zIndex: zIndexCORE
 } = theme;
 const eventMap = new Map([['click', ['click']], ['hover', ['mouseenter', 'mouseleave']], ['focus', ['focus', 'blur']]]);
@@ -139,9 +140,9 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   direction,
   fullScreen,
   height,
+  marginThreshold,
   onClose,
   open,
-  marginThreshold,
   pressESCToClose,
   style,
   transformOrigin,
@@ -160,7 +161,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _PopoverArrowCSS = PopoverArrowCSS(bgColor);
 
-  const arrowSize = 6;
+  const arrowSize = arrow ? 6 : 0;
 
   if (direction) {
     const directionObject = getDirectionPopover(direction);
@@ -202,7 +203,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const updatePositionPopover = (el = null, cb) => {
-    var _window, _window2, _anchor6, _anchorRect, _anchorRect2, _anchor7, _anchorRect3, _anchorRect4, _anchorRect5, _anchorRect6, _anchorRect7, _anchorRect8, _anchorRect9, _anchorRect10, _anchorRect11, _anchorRect12, _anchorRect13, _anchorRect14, _anchorRect15, _anchorRect16, _anchorRect17, _anchorRect18, _anchorRect19;
+    var _window, _window2, _anchor6, _anchorRect, _anchorRect2, _anchor7, _anchorRect3, _anchorRect4, _anchorRect5, _anchorRect6, _anchorRect7, _anchorRect8, _anchorRect9, _anchorRect10, _anchorRect11, _anchorRect12, _newDirectionObject, _newDirectionObject$t, _transformOrigin, _newDirectionObject2, _newDirectionObject2$, _transformOrigin2;
 
     setElement(el instanceof Element ? el : null);
 
@@ -224,7 +225,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     },
         anchorRect = null,
         aPosition = '',
-        isOverflow = false;
+        newDirectionObject = null;
 
     if (transformOrigin === 'center') {
       transformOrigin = {
@@ -240,13 +241,6 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         anchor = ((_anchor5 = anchor) === null || _anchor5 === void 0 ? void 0 : _anchor5.element) || ((_anchor$current = anchor.current) === null || _anchor$current === void 0 ? void 0 : _anchor$current.element) || anchor.current;
       }
 
-      if (anchorOrigin === 'center') {
-        anchorOrigin = {
-          vertical: 'center',
-          horizontal: 'center'
-        };
-      }
-
       if (arrow && anchorOrigin.vertical !== anchorOrigin.horizontal && transformOrigin.vertical !== transformOrigin.horizontal) {
         aPosition = getArrowPosition(anchorOrigin, transformOrigin, translate);
       }
@@ -292,32 +286,63 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       default:
         left = horizontal;
         break;
-    }
+    } // Variables for check if needs shifting
+
 
+    const heightThreshold = containerWindow.height - marginThreshold;
+    const widthThreshold = containerWindow.width - marginThreshold;
     const bottomOfAnchor = top + ((_anchor6 = anchor) === null || _anchor6 === void 0 ? void 0 : _anchor6.offsetHeight);
-    const topPos = ((_anchorRect = anchorRect) === null || _anchorRect === void 0 ? void 0 : _anchorRect.height) + arrowSize;
+    const topPos = ((_anchorRect = anchorRect) === null || _anchorRect === void 0 ? void 0 : _anchorRect.bottom) + arrowSize;
     const verticalCenterPos = verticalCenter - popoverHeight / 2;
-    const bottomPos = containerWindow.height - popoverHeight - (marginThreshold + ((_anchorRect2 = anchorRect) === null || _anchorRect2 === void 0 ? void 0 : _anchorRect2.height) + arrowSize);
+    const bottomPos = ((_anchorRect2 = anchorRect) === null || _anchorRect2 === void 0 ? void 0 : _anchorRect2.top) - (popoverHeight + arrowSize);
     const rightOfAnchor = left + ((_anchor7 = anchor) === null || _anchor7 === void 0 ? void 0 : _anchor7.offsetWidth);
-    const leftPos = ((_anchorRect3 = anchorRect) === null || _anchorRect3 === void 0 ? void 0 : _anchorRect3.width) + arrowSize;
+    const leftPos = ((_anchorRect3 = anchorRect) === null || _anchorRect3 === void 0 ? void 0 : _anchorRect3.right) + arrowSize;
     const horizontalCenterPos = horizontalCenter - popoverWidth / 2;
-    const rightPos = containerWindow.width - popoverWidth - (marginThreshold + ((_anchorRect4 = anchorRect) === null || _anchorRect4 === void 0 ? void 0 : _anchorRect4.width) + arrowSize); // Check if the vertical axis needs shifting
+    const rightPos = ((_anchorRect4 = anchorRect) === null || _anchorRect4 === void 0 ? void 0 : _anchorRect4.left) - (popoverWidth + arrowSize); // Check if the vertical axis needs shifting
 
     if (top < marginThreshold) {
-      isOverflow = true;
-      top = marginThreshold + topPos > containerWindow.height ? verticalCenterPos : marginThreshold + topPos;
+      if (topPos > heightThreshold) {
+        top = verticalCenterPos;
+        newDirectionObject = getDirectionPopover('center');
+        aPosition = '';
+      } else {
+        top = topPos;
+        newDirectionObject = getDirectionPopover('bottom');
+        aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
+      }
     } else if (top + popoverHeight > containerWindow.height) {
-      isOverflow = true;
-      top = bottomPos < bottomOfAnchor && bottomPos < marginThreshold ? verticalCenterPos : bottomPos;
+      if (bottomPos < bottomOfAnchor && bottomPos < marginThreshold) {
+        top = verticalCenterPos;
+        newDirectionObject = getDirectionPopover('center');
+        aPosition = '';
+      } else {
+        top = bottomPos;
+        newDirectionObject = getDirectionPopover('top');
+        aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
+      }
     } // Check if the horizontal axis needs shifting
 
 
     if (left < marginThreshold) {
-      isOverflow = true;
-      left = marginThreshold + leftPos + popoverWidth > containerWindow.width ? horizontalCenterPos : marginThreshold + leftPos;
+      if (leftPos > widthThreshold) {
+        left = horizontalCenterPos;
+        newDirectionObject = getDirectionPopover('center');
+        aPosition = '';
+      } else {
+        left = leftPos;
+        newDirectionObject = getDirectionPopover('right');
+        aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
+      }
     } else if (left + popoverWidth > containerWindow.width) {
-      isOverflow = true;
-      left = rightPos < rightOfAnchor && rightPos < marginThreshold ? horizontalCenterPos : rightPos;
+      if (rightPos < rightOfAnchor && rightPos < marginThreshold) {
+        left = horizontalCenterPos;
+        newDirectionObject = getDirectionPopover('center');
+        aPosition = '';
+      } else {
+        left = rightPos;
+        newDirectionObject = getDirectionPopover('left');
+        aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
+      }
     } // Get arrow's position
 
 
@@ -325,22 +350,22 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       switch (aPosition) {
         case 'top':
           arrowPosition.left = ((_anchorRect5 = anchorRect) === null || _anchorRect5 === void 0 ? void 0 : _anchorRect5.width) / 2 + ((_anchorRect6 = anchorRect) === null || _anchorRect6 === void 0 ? void 0 : _anchorRect6.left) - arrowSize + 'px';
-          arrowPosition[aPosition] = ((_anchorRect7 = anchorRect) === null || _anchorRect7 === void 0 ? void 0 : _anchorRect7.height) + ((_anchorRect8 = anchorRect) === null || _anchorRect8 === void 0 ? void 0 : _anchorRect8.top) + 'px';
+          arrowPosition.top = Math.round(top) - arrowSize + 'px';
           break;
 
         case 'bottom':
-          arrowPosition.left = ((_anchorRect9 = anchorRect) === null || _anchorRect9 === void 0 ? void 0 : _anchorRect9.width) / 2 + ((_anchorRect10 = anchorRect) === null || _anchorRect10 === void 0 ? void 0 : _anchorRect10.left) - arrowSize + 'px';
-          arrowPosition[aPosition] = containerWindow.height - ((_anchorRect11 = anchorRect) === null || _anchorRect11 === void 0 ? void 0 : _anchorRect11.top) + 'px';
+          arrowPosition.left = ((_anchorRect7 = anchorRect) === null || _anchorRect7 === void 0 ? void 0 : _anchorRect7.width) / 2 + ((_anchorRect8 = anchorRect) === null || _anchorRect8 === void 0 ? void 0 : _anchorRect8.left) - arrowSize + 'px';
+          arrowPosition.top = Math.round(top) + popoverHeight + 'px';
           break;
 
         case 'left':
-          arrowPosition.top = ((_anchorRect12 = anchorRect) === null || _anchorRect12 === void 0 ? void 0 : _anchorRect12.height) / 2 + ((_anchorRect13 = anchorRect) === null || _anchorRect13 === void 0 ? void 0 : _anchorRect13.top) - arrowSize / 2 + 'px';
-          arrowPosition[aPosition] = ((_anchorRect14 = anchorRect) === null || _anchorRect14 === void 0 ? void 0 : _anchorRect14.width) + ((_anchorRect15 = anchorRect) === null || _anchorRect15 === void 0 ? void 0 : _anchorRect15.left) - arrowSize / 2 + 'px';
+          arrowPosition.top = ((_anchorRect9 = anchorRect) === null || _anchorRect9 === void 0 ? void 0 : _anchorRect9.height) / 2 + ((_anchorRect10 = anchorRect) === null || _anchorRect10 === void 0 ? void 0 : _anchorRect10.top) - arrowSize / 2 + 'px';
+          arrowPosition.left = Math.round(left) - 1.5 * arrowSize + 'px';
           break;
 
         case 'right':
-          arrowPosition.top = ((_anchorRect16 = anchorRect) === null || _anchorRect16 === void 0 ? void 0 : _anchorRect16.height) / 2 + ((_anchorRect17 = anchorRect) === null || _anchorRect17 === void 0 ? void 0 : _anchorRect17.top) - arrowSize / 2 + 'px';
-          arrowPosition[aPosition] = ((_anchorRect18 = anchorRect) === null || _anchorRect18 === void 0 ? void 0 : _anchorRect18.width) + ((_anchorRect19 = anchorRect) === null || _anchorRect19 === void 0 ? void 0 : _anchorRect19.left) - arrowSize / 2 + 'px';
+          arrowPosition.top = ((_anchorRect11 = anchorRect) === null || _anchorRect11 === void 0 ? void 0 : _anchorRect11.height) / 2 + ((_anchorRect12 = anchorRect) === null || _anchorRect12 === void 0 ? void 0 : _anchorRect12.top) - arrowSize / 2 + 'px';
+          arrowPosition.left = Math.round(left) + popoverWidth - arrowSize / 2 + 'px';
           break;
 
         default:
@@ -350,14 +375,14 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (arrowRef.current) {
         Object.assign(arrowRef.current.style, arrowPosition, {
           transform: translate.transform,
-          display: isOverflow ? 'none' : 'block'
+          display: newDirectionObject === 'center' ? 'none' : 'block'
         });
       }
     }
 
     ref.current.style.top = `${Math.round(top)}px`;
     ref.current.style.left = `${Math.round(left)}px`;
-    ref.current.style.transformOrigin = `${transformOrigin.horizontal || 'left'} ${transformOrigin.vertical || 'top'}`;
+    ref.current.style.transformOrigin = `${((_newDirectionObject = newDirectionObject) === null || _newDirectionObject === void 0 ? void 0 : (_newDirectionObject$t = _newDirectionObject.transformOrigin) === null || _newDirectionObject$t === void 0 ? void 0 : _newDirectionObject$t.horizontal) || ((_transformOrigin = transformOrigin) === null || _transformOrigin === void 0 ? void 0 : _transformOrigin.horizontal) || 'left'} ${((_newDirectionObject2 = newDirectionObject) === null || _newDirectionObject2 === void 0 ? void 0 : (_newDirectionObject2$ = _newDirectionObject2.transformOrigin) === null || _newDirectionObject2$ === void 0 ? void 0 : _newDirectionObject2$.vertical) || ((_transformOrigin2 = transformOrigin) === null || _transformOrigin2 === void 0 ? void 0 : _transformOrigin2.vertical) || 'top'}`;
     ref.current.style.opacity = 1;
     cb === null || cb === void 0 ? void 0 : cb();
   };
@@ -430,7 +455,10 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     instance: {
       show: el => !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover(),
       close: () => onClosePopover(),
-      setPosition: el => updatePositionPopover(el)
+      setPosition: el => updatePositionPopover(el),
+      __proto__: {
+        hide: () => onClosePopover()
+      }
     },
     show: el => !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover(),
     close: () => onClosePopover(),
@@ -472,7 +500,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 
 const PortalPopoverCSS = (zIndex, fullScreen) => css`
-    ${positionAbsolute};
+    ${positionFixed};
     z-index: ${zIndex};
     pointer-events: ${fullScreen ? 'initial' : 'none'};
     inset: 0;
@@ -485,10 +513,10 @@ const PopoverContainerCSS = (bgColor, width, height) => css`
     ${borderRadius4px};
     ${paragraph1};
     ${parseWidthHeight(width, height)};
-    min-width: 16px;
-    min-height: 16px;
-    max-width: calc(100% - 32px);
-    max-height: calc(100% - 32px);
+    min-width: ${spacing([4])};
+    min-height: ${spacing([4])};
+    max-width: calc(100% - ${spacing([8])});
+    max-height: calc(100% - ${spacing([8])});
     transition: opacity 0.3s ease;
     pointer-events: initial;
     opacity: 0;
@@ -516,6 +544,7 @@ Popover.defaultProps = {
   clickOutsideToClose: true,
   fullScreen: false,
   height: 'max-content',
+  marginThreshold: spacing(4),
   pressESCToClose: true,
   style: {},
   transformOrigin: {
@@ -524,8 +553,7 @@ Popover.defaultProps = {
   },
   trigger: 'click',
   width: 'max-content',
-  zIndex: zIndexCORE(1),
-  marginThreshold: 16
+  zIndex: zIndexCORE(1)
 };
 Popover.propTypes = {
   /** If `true`, the component is shown. */
@@ -575,6 +603,9 @@ Popover.propTypes = {
   /** Height of the component. */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+  /** Specifies how close to the edge of the window the popover can appear. */
+  marginThreshold: PropTypes.oneOfType([PropTypes.number]),
+
   /** Callback fired when the component requests to be closed. */
   onClose: PropTypes.func,
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.69-beta.1",
+  "version": "1.3.69-beta.4",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/utils/sb-teamplate.js

@@ -96,7 +96,6 @@ Template.propTypes = {
   horizontal: PropTypes.bool
 };
 StoryBookTemplate.propTypes = {
-  component: PropTypes.node.isRequired,
   componentName: PropTypes.string.isRequired,
   args: PropTypes.object,
   propsCustom: PropTypes.array,