diginet-core-ui 1.3.89-beta.3 → 1.3.89-beta.4

package/components/popover/index.js

@@ -5,15 +5,10 @@ import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { bgColor, borderRadius4px, displayFlex, displayNone, flexCol, inset, justifyBetween, overflowAuto, parseMaxWidthHeight, parseMinWidthHeight, parseWidthHeight, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative } from "../../styles/general";
+import { bgColor, borderBottom, borderRadius4px, displayFlex, displayNone, flexCol, inset, justifyBetween, overflowAuto, parseMaxWidthHeight, parseMinWidthHeight, parseWidthHeight, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, isMobile, refType as ref } from "../../utils";
 const {
-  colors: {
-    system: {
-      white: systemWhite
-    }
-  },
   typography: {
     paragraph1
   },
@@ -148,10 +143,10 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const anchorRef = useRef(anchor);
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
+  const arrowSize = arrow ? 6 : 0;
   const _PortalPopoverCSS = PortalPopoverCSS(zIndex, fullScreen);
   const _PopoverContainerCSS = PopoverContainerCSS(bgColor, width, height);
-  const _PopoverArrowCSS = PopoverArrowCSS(bgColor);
-  const arrowSize = arrow ? 6 : 0;
+  const _PopoverArrowCSS = PopoverArrowCSS(bgColor, arrowSize);
   if (direction) {
     const directionObject = getDirectionPopover(direction);
     anchorOrigin = directionObject.anchorOrigin;
@@ -218,7 +213,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         var _anchor5, _anchor$current;
         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 (!anchor) return;
+      if (!document.body.contains(anchor)) return;
       if (arrow && anchorOrigin.vertical !== anchorOrigin.horizontal && transformOrigin.vertical !== transformOrigin.horizontal) {
         aPosition = getArrowPosition(anchorOrigin, transformOrigin, translate);
       }
@@ -528,13 +523,13 @@ const PopoverContainerCSS = (bgCl, width, height) => css`
     opacity: 0;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 `;
-const PopoverArrowCSS = bgColor => css`
+const PopoverArrowCSS = (bgCl, arrowSize) => css`
     ${displayNone};
     ${positionAbsolute};
     ${parseWidthHeight(0)};
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-bottom: 6px solid ${bgColor};
+    ${borderBottom(arrowSize, bgCl)};
+    border-left: ${arrowSize}px solid transparent;
+    border-right: ${arrowSize}px solid transparent;
 `;
 Popover.defaultProps = {
   anchorOrigin: {
@@ -542,7 +537,7 @@ Popover.defaultProps = {
     horizontal: 'center'
   },
   arrow: false,
-  bgColor: systemWhite,
+  bgColor: 'system.white',
   className: '',
   clickOutsideToClose: true,
   fullScreen: true,

package/package.json

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

package/styles/general.js

@@ -74,6 +74,9 @@ const borderRadius4px = css`
 const borderRadius50 = css`
     border-radius: 50%;
 `;
+const bottom = vl => css`
+    bottom: ${parseCSSValue(vl)};
+`;
 const boxBorder = css`
     box-sizing: border-box;
 `;
@@ -217,6 +220,9 @@ const justifyEvenly = css`
 const justifyStart = css`
     justify-content: flex-start;
 `;
+const left = vl => css`
+    left: ${parseCSSValue(vl)};
+`;
 const mg = vl => css`
     margin: ${getSpacing(vl)};
 `;
@@ -353,6 +359,18 @@ const positionRelative = css`
 const positionSticky = css`
     position: sticky;
 `;
+const right = vl => css`
+    right: ${parseCSSValue(vl)};
+`;
+const scale = vl => css`
+    transform: scale(${vl});
+`;
+const scaleX = vl => css`
+    transform: scaleX(${vl});
+`;
+const scaleY = vl => css`
+    transform: scaleY(${vl});
+`;
 const selfCenter = css`
     align-self: center;
 `;
@@ -398,6 +416,9 @@ const textunderline = css`
 const textUppercase = css`
     text-transform: uppercase;
 `;
+const top = vl => css`
+    top: ${parseCSSValue(vl)};
+`;
 const truncate = css`
     overflow: hidden;
     text-overflow: ellipsis;
@@ -421,4 +442,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textunderline, textUppercase, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textunderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };