diginet-core-ui 1.3.73 → 1.3.74

package/components/paging/page-selector2.js

@@ -38,6 +38,7 @@ const getLastPage = (totalItems, itemsPerPage) => {
 
 const delayOnInput = getGlobal('delayOnInput');
 const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   className,
   currentPage,
   hideEllipsis,
@@ -172,23 +173,34 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       changeBy: 'itemsPerPage'
     });
   }, [itemsPerPageState]);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
       onChangePage: page => _onChangePage({
         page: page,
         changeBy: 'ref'
       }),
       onChangePerPage: per => _onChangePerPage(per),
-      setTotalItems: items => setTotalItemsState(items)
-    },
-    onChangePage: page => _onChangePage({
+      setTotalItems: items => setTotalItemsState(items),
+      ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+
+    currentRef.onChangePage = page => _onChangePage({
       page: page,
       changeBy: 'ref'
-    }),
-    onChangePerPage: per => _onChangePerPage(per),
-    setTotalItems: items => setTotalItemsState(items)
-  }));
+    });
+
+    currentRef.onChangePerPage = per => _onChangePerPage(per);
+
+    currentRef.setTotalItems = items => setTotalItemsState(items);
+
+    return currentRef;
+  });
 
   const renderButton = (key, page, isSelected, customDisplay) => {
     if (page >= lastPage || page < 0) return;
@@ -368,23 +380,23 @@ PagingSelector.propTypes = {
   /** Callback fired when quantity on per page changed. */
   onChangePerPage: PropTypes.func,
 
-  /**
-   * Callback fired when page number is changing.
-   *
-   * * prevPage: Page before changed
-   * * newPage: Page after changed
-   * * cancel(value): Function cancel change page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when page number is changing.
+   *
+   * * prevPage: Page before changed
+   * * newPage: Page after changed
+   * * cancel(value): Function cancel change page
+   *  * @param {value} - bool
    */
   onChangingPage: PropTypes.func,
 
-  /**
-   * Callback fired when quantity on item per page is changing.
-   *
-   * * prevPerPage: Items per page before changed
-   * * newPerPage: Items per page after changed
-   * * cancel(value): Function cancel change items per page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when quantity on item per page is changing.
+   *
+   * * prevPerPage: Items per page before changed
+   * * newPerPage: Items per page after changed
+   * * cancel(value): Function cancel change items per page
+   *  * @param {value} - bool
    */
   onChangingPerPage: PropTypes.func,
 
@@ -394,15 +406,15 @@ PagingSelector.propTypes = {
   /** Total items. */
   totalItems: PropTypes.number,
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * onChangePage(page): Change page number
-   *  * @param {page} - number
-   * * onChangePerPage(per): Change quantity on per page
-   *  * @param {per} - number
-   * * setTotalItems(items): Set total items
-   *  * @param {items} - number
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * onChangePage(page): Change page number
+   *  * @param {page} - number
+   * * onChangePerPage(per): Change quantity on per page
+   *  * @param {per} - number
+   * * setTotalItems(items): Set total items
+   *  * @param {items} - number
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/popover/body.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import { flexCol, overflowAuto, positionRelative } from '../../styles/general';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -17,22 +18,30 @@ const {
   spacing
 } = theme;
 const PopoverBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   id,
   style
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => jsx("div", {
     css: PopoverBodyCSS,
     ref: ref,
     id: id,
     style: style,
-    className: ['DGN-UI-Popover-Body', className].join(' ').trim().replace(/\s+/g, ' ')
+    className: classNames('DGN-UI-Popover-Body', className)
   }, children), [children, className, id, style]);
 }));
 const PopoverBodyCSS = css`
@@ -40,7 +49,6 @@ const PopoverBodyCSS = css`
     ${positionRelative};
     ${overflowAuto};
     padding: ${spacing([4])};
-    max-height: 472px;
     order: 2;
     &::-webkit-scrollbar {
         width: 24px;

package/components/popover/footer.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import { alignCenter, borderBox, flexRow, justifyEnd, parseWidth, positionRelative } from '../../styles/general';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -16,6 +17,7 @@ const {
   spacing
 } = theme;
 const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   boxShadow,
   children,
   className,
@@ -26,17 +28,24 @@ const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _PopoverFooterCSS = PopoverFooterCSS(boxShadow);
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => jsx("div", {
     css: _PopoverFooterCSS,
     ref: ref,
     id: id,
     style: style,
-    className: ['DGN-UI-Popover-Footer', className].join(' ').trim().replace(/\s+/g, ' ')
-  }, children), [children, className, id, style]);
+    className: classNames('DGN-UI-Popover-Footer', className)
+  }, children), [boxShadow, children, className, id, style]);
 }));
 
 const PopoverFooterCSS = boxShadow => css`

package/components/popover/header.js

@@ -7,6 +7,7 @@ import { jsx, css } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import { Typography } from '../';
 import { alignCenter, borderBox, flexRow, parseWidthHeight, positionRelative } from '../../styles/general';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -14,9 +15,11 @@ const {
       headerbar
     }
   },
-  spacing
+  spacing,
+  zIndex: zIndexCORE
 } = theme;
 const PopoverHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   id,
@@ -24,16 +27,23 @@ const PopoverHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => jsx("div", {
     css: PopoverHeaderCSS,
     ref: ref,
     id: id,
     style: style,
-    className: ['DGN-UI-Popover-Header', className].join(' ').trim().replace(/\s+/g, ' ')
+    className: classNames('DGN-UI-Popover-Header', className)
   }, jsx(Typography, {
     type: 'h3',
     style: {
@@ -51,11 +61,11 @@ const PopoverHeaderCSS = css`
     ${borderBox};
     ${parseWidthHeight('100%', 56)};
     background-color: ${headerbar};
-    min-width: 480px;
     padding: ${spacing([4])};
     border-radius: 4px 4px 0px 0px;
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
     order: 1;
+    z-index: ${zIndexCORE(1)};
 `;
 PopoverHeader.defaultProps = {
   title: '',