diginet-core-ui 1.3.51-beta.1 → 1.3.51-beta.2

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

@@ -1809,14 +1809,14 @@ Dropdown.propTypes = {
   /** display this icon if not found the icon follow iconExpr */
   iconDefault: PropTypes.string,
 
-  /** field name used for icon display<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** field name used for icon display<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1831,9 +1831,9 @@ Dropdown.propTypes = {
   /** the displayed value for each change */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
@@ -1843,10 +1843,10 @@ Dropdown.propTypes = {
   /** the field name used for the returned result */
   valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * duration wait enter search content on search<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If true, used default delayOnInput
+  /**
+   * duration wait enter search content on search<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If true, used default delayOnInput
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
 
@@ -1913,19 +1913,19 @@ Dropdown.propTypes = {
   /** The array of elements that appear in the dropdown */
   dataSource: PropTypes.array,
 
-  /** function displays items by custom<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** function displays items by custom<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
-  /** the function will run when entering input<br/>
-   * if undefined: the filter function will run (default)
+  /** the function will run when entering input<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
 
@@ -1944,19 +1944,19 @@ Dropdown.propTypes = {
   /** the contents in Dropdown box (Exp: TreeView) */
   children: PropTypes.node,
 
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/popover/index.js

@@ -1,19 +1,23 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useState, useEffect, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
+import React, { memo, useState, useEffect, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { typography } from '../../styles/typography';
 import { borderRadius4px, displayBlock, flexRow, parseWidthHeight, positionAbsolute, positionFixed, positionRelative } from '../../styles/general';
-import { useTheme } from '../../theme';
+import theme from '../../theme/settings';
 const {
+  colors: {
+    system: {
+      white
+    }
+  },
+  typography: {
+    paragraph1
+  },
   zIndex: zIndexCORE
-} = useTheme();
-const {
-  paragraph1
-} = typography;
+} = theme;
 
 const getArrowPosition = (anchorOrigin, transformOrigin, translate) => {
   if (anchorOrigin.horizontal === 'right' && transformOrigin.horizontal === 'left') {
@@ -131,6 +135,14 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
 
+  const _PortalPopoverCSS = PortalPopoverCSS(zIndex, fullScreen);
+
+  const _PopoverContainerCSS = PopoverContainerCSS(width, height);
+
+  const _PopoverRootCSS = PopoverRootCSS(bgColor);
+
+  const _PopoverArrowCSS = PopoverArrowCSS(bgColor);
+
   if (direction) {
     const directionObject = getDirectionPopover(direction);
     anchorOrigin = directionObject.anchorOrigin;
@@ -272,7 +284,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           break;
       }
 
-      Object.assign(ref.current.querySelector(`.css-${PopoverArrowCSS(bgColor).name}`).style, arrowPosition, {
+      Object.assign(ref.current.querySelector(`.css-${_PopoverArrowCSS.name}`).style, arrowPosition, {
         transform: translate.transform
       });
     }
@@ -341,27 +353,43 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     return currentRef;
   });
+
+  const renderAnchor = () => {
+    var _anchor;
+
+    if (!((_anchor = anchor) !== null && _anchor !== void 0 && _anchor.type)) return null;
+    const AnchorTag = /*#__PURE__*/React.cloneElement(anchor, {
+      onClick: () => {
+        setOpenState(true);
+      },
+      ref: ref => {
+        anchor = ref;
+      }
+    });
+    return AnchorTag;
+  };
+
   const PopoverView = useMemo(() => {
     if (openState) {
       const node = jsx("div", {
         className: 'DGN-UI-Portal DGN-UI-Popover',
-        css: PortalPopoverCSS(zIndex, fullScreen)
+        css: _PortalPopoverCSS
       }, jsx("div", {
-        css: PopoverContainerCSS(width, height),
+        css: _PopoverContainerCSS,
         ref: ref,
         ...props
       }, jsx("div", {
-        css: PopoverRootCSS(bgColor),
+        css: _PopoverRootCSS,
         style: style
       }, arrow && jsx("span", {
-        css: PopoverArrowCSS(bgColor)
+        css: _PopoverArrowCSS
       }), children)));
       return /*#__PURE__*/createPortal(node, document.body);
     }
 
     return null;
   }, [openState, zIndex, fullScreen, style, arrow, children, width, height, bgColor]);
-  return PopoverView;
+  return jsx(React.Fragment, null, renderAnchor(), PopoverView);
 }));
 
 const PortalPopoverCSS = (zIndex, fullScreen) => css`
@@ -410,7 +438,7 @@ Popover.defaultProps = {
   arrow: false,
   width: 150,
   height: 'auto',
-  bgColor: '#FFF',
+  bgColor: white,
   zIndex: zIndexCORE(1),
   anchorOrigin: {
     vertical: 'bottom',
@@ -423,10 +451,10 @@ Popover.defaultProps = {
   style: {}
 };
 Popover.propTypes = {
-  /** If true, the component is shown. */
+  /** If `true`, the component is shown. */
   open: PropTypes.bool,
 
-  /** If true, arrow is shown. */
+  /** If `true`, arrow is shown. */
   arrow: PropTypes.bool,
 
   /** allow close Popover when press ESC. */
@@ -439,7 +467,7 @@ Popover.propTypes = {
   style: PropTypes.object,
 
   /** An HTML element, or a function that returns one. It's used to set the position of the popover. */
-  anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object]),
+  anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object, PropTypes.node]),
 
   /**
    * This is the point on the anchor where the popover's anchor will attach to.

package/package.json

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

package/styles/general.js

@@ -4,10 +4,10 @@ import { color } from './colors';
 import { parseToPixel } from './utils';
 export const rootSpacing = 4;
 export let rootZIndex = 1500;
-/**
- * get value spacing with rootZIndex
- * @param number
- * @return {number}
+/**
+ * get value spacing with rootZIndex
+ * @param number
+ * @return {number}
  */
 
 export const zIndex = number => {
@@ -15,10 +15,10 @@ export const zIndex = number => {
   if (isNaN(number)) return rootZIndex;
   return rootZIndex + number;
 };
-/**
- * get value spacing with rootSpacing
- * @param {(number|number[])} vl - default 1
- * @returns {(number|string)}
+/**
+ * get value spacing with rootSpacing
+ * @param {(number|number[])} vl - default 1
+ * @returns {(number|string)}
  */
 
 export const getSpacing = (vl = 1) => {
@@ -27,9 +27,9 @@ export const getSpacing = (vl = 1) => {
     return `${vl.flatMap(i => Number(i !== null && i !== void 0 ? i : 0) * rootSpacing).join('px ')}px`;
   }
 };
-/**
- * replace rootZIndex
- * @param number
+/**
+ * replace rootZIndex
+ * @param number
  */
 
 export const setZIndex = number => {