diginet-core-ui 1.3.69-beta.6 → 1.3.69-beta.7

package/components/avatar/index.js

@@ -51,6 +51,7 @@ const checkFileType = (type, matchType) => {
 };
 
 const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   src,
   defaultSrc,
   outlined,
@@ -241,10 +242,17 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   }, [src]);
-  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(() => {
     return jsx(Fragment, null, jsx("div", {
       css: _AvatarContainerCSS,

package/components/badge/index.js

@@ -72,6 +72,7 @@ const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) =>
 };
 
 const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   anchorOrigin,
   contentDirection,
   content,
@@ -98,10 +99,17 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS);
 
-  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(() => {
     let node = children;
 

package/components/button/icon.js

@@ -71,6 +71,7 @@ const renderIconLoading = iconSize => {
 };
 
 const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   viewType,
   color,
   size,
@@ -104,10 +105,17 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _ButtonRootCSS = ButtonRootCSS(circular, size, width, _width, height, _height, buttonSize, iconSize, colorHover, color, _color, name);
 
-  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;
+  });
 
   const _onClick = event => {
     event.persist();

package/components/button/index.js

@@ -99,6 +99,7 @@ const alphaArr = {
 };
 const alphaLoading = 0.2;
 const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   color,
@@ -130,10 +131,17 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _ButtonRoot = ButtonRoot(viewType, size, paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color);
 
-  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;
+  });
   const StartIcon = useMemo(() => {
     let node = startIcon;
 

package/components/card/body.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   id,
@@ -13,10 +14,17 @@ const CardBody = /*#__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(() => {
     return jsx("div", {
       id: id,

package/components/card/extra.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   id,
@@ -13,10 +14,17 @@ const CardExtra = /*#__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(() => {
     return jsx("div", {
       id: id,

package/components/card/footer.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   id,
@@ -13,10 +14,17 @@ const CardFooter = /*#__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(() => {
     return jsx("div", {
       id: id,

package/components/card/header.js

@@ -7,6 +7,7 @@ import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import Typography from '../typography';
 const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   id,
@@ -14,10 +15,17 @@ const CardHeader = /*#__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(() => {
     return jsx("div", {
       id: id,

package/components/card/index.js

@@ -23,6 +23,7 @@ const {
   spacing
 } = theme;
 const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   body: bodyProp,
   bodyStyle,
   children,
@@ -44,10 +45,17 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _CardCSS = CardCSS(width, height, headerDivider, footerDivider, dividerColor);
 
-  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;
+  });
   const head = header || title ? jsx(CardHeader, {
     className: (className === null || className === void 0 ? void 0 : className.header) || '',
     style: headerStyle,

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

@@ -22,6 +22,7 @@ const {
   }
 } = theme;
 const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   disabled,
   readOnly,
   required,
@@ -35,10 +36,17 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, 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: LabelContainerCSS,
     className: 'DGN-UI-Label-Container'

package/components/form-control/text-input/index.js

@@ -5,49 +5,48 @@ import { memo, useEffect, useRef, forwardRef, useState, useImperativeHandle } fr
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, CircularProgress as Circular, HelperText, InputBase, Label } from '../../';
-import { renderIcon, onValidate } from '../../../utils';
+import { renderIcon, onValidate, refType as ref } from '../../../utils';
 import { cursorNotAllowed, displayBlock, flexRow, positionRelative } from '../../../styles/general';
 const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  type,
-  viewType,
-  required,
-  loading,
-  autoIncreaseBot,
+  autoComplete,
+  autoFocus,
+  autoWidth,
   className,
-  label,
   defaultValue,
-  value: valueProp,
-  placeholder,
-  startIcon,
+  disabled,
   endIcon,
-  startIconProps,
   endIconProps,
-  status,
+  error,
   icon,
-  autoComplete,
-  autoFocus,
-  disabled,
-  readOnly,
-  multiline,
-  onConfirm,
-  rows,
-  maxRows,
-  style,
   iconStyle,
-  inputRef,
   inputProps,
+  inputRef,
   inputStyle,
+  label,
   labelProps,
-  error,
-  onChange,
+  loading,
+  maxRows,
+  multiline,
   onBlur,
+  onChange,
+  onConfirm,
   onFocus,
   onInput,
   onKeyDown,
   onKeyUp,
   onPaste,
+  placeholder,
+  readOnly,
+  required,
+  rows,
+  startIcon,
+  startIconProps,
+  status,
+  style,
+  type,
   validates,
-  autoWidth,
+  value: valueProp,
+  viewType,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -60,39 +59,9 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   let currentValue = '';
   const [value, setValue] = useState(valueProp || defaultValue);
   const isError = !!error;
-  /* Start styled */
-
-  const TextInputRoot = css`
-                ${displayBlock};
-                ${positionRelative};
-                margin-bottom: 20px;
-                &.disabled {
-                    ${cursorNotAllowed};
-                }
-            `;
-  const TextInputIcon = css`
-                ${flexRow};
-                color: inherit;
-                .edit-icon-pen {
-                    ${flexRow};
-                }
-                .edit-icon-confirm {
-                    display: none;
-                }
-                .edit-icon-clear {
-                    display: none;
-                    margin-left: 12px;
-                }
-                .circular {
-                    display: none;
-                }
-            `;
-  /* End styled */
-
   /* Start handler */
 
   const onMouseDownHandler = () => {
-    // ref.current.querySelector(`.css-${TextInputBox.name}`).style.backgroundColor = 'transparent';
     inputRef.current.style.backgroundColor = 'transparent';
   };
 
@@ -186,33 +155,6 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [type, multiline]);
-  useEffect(() => {
-    if (error && !value && value !== 0) {
-      ref.current.classList.add('danger');
-
-      if (autoIncreaseBot) {
-        const helperTextNode = ref.current.querySelector('.DGN-UI-HelperText');
-
-        if (helperTextNode) {
-          if (helperTextNode.offsetHeight > 20) {
-            ref.current.style.marginBottom = helperTextNode.offsetHeight + 4 + 'px';
-          }
-        }
-      }
-
-      return () => {
-        if (ref.current) {
-          ref.current.classList.remove('danger');
-          ref.current.style.marginBottom = null;
-        }
-      };
-    }
-  }, [error, value]);
-  useEffect(() => {
-    if (placeholder !== undefined && inputRef.current) {
-      inputRef.current.placeholder = placeholder;
-    }
-  }, [placeholder]);
   useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.readOnly = !!readOnly;
@@ -341,139 +283,160 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     disabled: disabled
   }, validateResult));
 }));
+const TextInputRoot = css`
+    ${displayBlock};
+    ${positionRelative};
+    margin-bottom: 20px;
+    &.disabled {
+        ${cursorNotAllowed};
+    }
+`;
+const TextInputIcon = css`
+    ${flexRow};
+    color: inherit;
+    .edit-icon-pen {
+        ${flexRow};
+    }
+    .edit-icon-confirm {
+        display: none;
+    }
+    .edit-icon-clear {
+        display: none;
+        margin-left: 12px;
+    }
+    .circular {
+        display: none;
+    }
+`;
 TextInput.defaultProps = {
-  type: 'text',
-  viewType: 'underlined',
-  label: '',
+  autoComplete: 'off',
+  autoFocus: false,
+  autoWidth: false,
   className: '',
   defaultValue: '',
-  status: 'default',
+  disabled: false,
   error: '',
-  autoComplete: 'off',
-  required: false,
+  iconStyle: {},
+  label: '',
   loading: false,
-  autoFocus: false,
-  autoIncreaseBot: false,
-  disabled: false,
-  readOnly: false,
   multiline: false,
-  iconStyle: {},
-  autoWidth: false
+  readOnly: false,
+  required: false,
+  status: 'default',
+  type: 'text',
+  viewType: 'underlined'
 };
 TextInput.propTypes = {
-  /** type of input */
-  type: PropTypes.oneOf(['inform', 'edit', 'quickEdit', 'text', 'number', 'password']),
+  /** This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). */
+  autoComplete: PropTypes.string,
 
-  /** the type of border you want to display */
-  viewType: PropTypes.oneOf(['underlined', 'outlined']),
+  /** If `true`, the input element is focused during the first mount. */
+  autoFocus: PropTypes.bool,
 
-  /** label for input */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** If `true`, the width of the component will automatically be set according to the contents inside the input, don't run with multiline = true */
+  autoWidth: PropTypes.bool,
 
-  /** class for input */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** default value is displayed for first render */
+  /** The default value. Use when the component is not controlled. */
   defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /** the displayed value for each change */
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** If `true`, the component is disabled.*/
+  disabled: PropTypes.bool,
 
-  /** hints for input */
-  placeholder: PropTypes.string,
+  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the right of input. */
+  endIcon: PropTypes.any,
 
-  /** status type to display color for input (only available for type is inform) */
-  status: PropTypes.oneOf(['default', 'warning', 'success', 'danger']),
+  /** Props of end icon in InputBase component. */
+  endIconProps: PropTypes.object,
 
-  /** error for input */
+  /** Error displayed below input. */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /** the number of rows of textarea */
-  rows: PropTypes.number,
+  /** Icon element display in the end of input (only use for type is inform, if not, use startIcon instead). */
+  icon: PropTypes.any,
 
-  /** the maximum of rows of textarea */
-  maxRows: PropTypes.number,
+  /** Style inline of icon. */
+  iconStyle: PropTypes.object,
 
-  /** type auto complete of input (like new-password) */
-  autoComplete: PropTypes.string,
+  /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) applied to the input element. */
+  inputProps: PropTypes.object,
 
-  /** prevent all event if true, hide all icon */
-  disabled: PropTypes.bool,
+  /** Pass a ref to the input element. */
+  inputRef: ref,
 
-  /** prevent all event if true */
-  readOnly: PropTypes.bool,
+  /** Style inline of input element. */
+  inputStyle: PropTypes.object,
 
-  /** auto focus after first render */
-  autoFocus: PropTypes.bool,
+  /** The label of the component. */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** auto increase margin-bottom if error too long */
-  autoIncreaseBot: PropTypes.bool,
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
+  labelProps: PropTypes.object,
 
-  /** At least one character is required */
-  required: PropTypes.bool,
+  /** Maximum number of rows to display when multiline option is set to true. */
+  maxRows: PropTypes.number,
 
-  /** icon element display in the right of input (only use for type is inform, if not, use startIcon instead) */
-  icon: PropTypes.any,
+  /** If `true`, a textarea element is rendered. */
+  multiline: PropTypes.bool,
 
-  /** icon element display in the left of input */
-  startIcon: PropTypes.any,
+  /** Callback fired when the input is blurred. */
+  onBlur: PropTypes.func,
 
-  /** icon element display in the right of input */
-  endIcon: PropTypes.any,
+  /** Callback fired when the value is changed. */
+  onChange: PropTypes.func,
 
-  /** props of start icon in InputBase component */
-  startIconProps: PropTypes.object,
+  /** Callback fired when the input is focused. */
+  onFocus: PropTypes.func,
 
-  /** props of end icon in InputBase component */
-  endIconProps: PropTypes.object,
+  /** Callback fired when input. */
+  onInput: PropTypes.func,
 
-  /** style inline for icon */
-  iconStyle: PropTypes.object,
+  /** Callback fired when pressing a key. */
+  onKeyDown: PropTypes.func,
 
-  /** style inline for dropdown */
-  style: PropTypes.object,
+  /** Callback fired when releases a key. */
+  onKeyUp: PropTypes.func,
 
-  /** props of input in TextInput component */
-  inputProps: PropTypes.object,
+  /** The short hint displayed in the input before the user enters a value. */
+  placeholder: PropTypes.string,
 
-  /** style inline of input in TextInput component */
-  inputStyle: PropTypes.object,
+  /** If `true`, the component is readOnly. */
+  readOnly: PropTypes.bool,
 
-  /** any props of label in TextInput component */
-  labelProps: PropTypes.object,
+  /** If `true`, the input element is required. */
+  required: PropTypes.bool,
 
-  /** on key down function */
-  onKeyDown: PropTypes.func,
+  /** Number of rows to display when multiline option is set to true. */
+  rows: PropTypes.number,
 
-  /** on key up function */
-  onKeyUp: PropTypes.func,
+  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the left of input. */
+  startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** on input function */
-  onInput: PropTypes.func,
+  /** Props of start icon in InputBase component. */
+  startIconProps: PropTypes.object,
 
-  /** on change function */
-  onChange: PropTypes.func,
+  /** Status type to display color for input. */
+  status: PropTypes.oneOf(['default', 'warning', 'success', 'danger']),
 
-  /** on blur function */
-  onBlur: PropTypes.func,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** on focus function */
-  onFocus: PropTypes.func,
+  /** Type of the input element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). */
+  type: PropTypes.oneOf(['inform', 'edit', 'quickEdit', 'text', 'number', 'password']),
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** Validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 
-  /** inputRef of TextInput component */
-  inputRef: PropTypes.any,
-
-  /** autoWidth of TextInput component, don't run with multiline = true */
-  autoWidth: PropTypes.bool,
+  /** The value of the input element, required for a controlled component. */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /** If `true`, a textarea element is rendered. */
-  multiline: PropTypes.bool
+  /** The variant to use. */
+  viewType: PropTypes.oneOf(['underlined', 'outlined'])
 };
 export default TextInput;

package/components/others/option-wrapper/index.js

@@ -1,17 +1,12 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { useRef, useState, forwardRef, useImperativeHandle, useEffect } from 'react';
+import { useState, forwardRef, useEffect } from 'react';
 import { jsx } from '@emotion/core';
 
 const OptionWrapper = WrappedComponent => {
   return /*#__PURE__*/forwardRef((props, ref) => {
-    if (!ref) {
-      ref = useRef(null);
-    }
-
     const [options, setOptions] = useState({});
-    const componentRef = useRef(null);
 
     const option = (option, optionValue) => {
       if (typeof option === 'undefined') {
@@ -30,14 +25,12 @@ const OptionWrapper = WrappedComponent => {
     useEffect(() => {
       setOptions({});
     }, [props]);
-    useImperativeHandle(ref, () => ({ ...componentRef.current,
-      instance: { ...componentRef.current.instance,
-        option
-      }
-    }), [componentRef]);
     return jsx(WrappedComponent, { ...props,
       ...options,
-      ref: componentRef
+      action: {
+        option
+      },
+      ref: ref
     });
   });
 };

package/components/paging/page-info.js

@@ -42,6 +42,7 @@ const getLastPage = (totalItems, itemsPerPage) => {
 
 const delayOnInput = getGlobal('delayOnInput');
 const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   bgColor,
   className,
   currentPage,
@@ -213,23 +214,34 @@ const PagingInfo = /*#__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 updateSize = () => {
     if (timer.current) {

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;

package/components/popover/body.js

@@ -17,16 +17,24 @@ 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,

package/components/popover/footer.js

@@ -16,6 +16,7 @@ const {
   spacing
 } = theme;
 const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   boxShadow,
   children,
   className,
@@ -26,10 +27,17 @@ 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,

package/components/popover/header.js

@@ -17,6 +17,7 @@ const {
   spacing
 } = theme;
 const PopoverHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   id,
@@ -24,10 +25,17 @@ 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,

package/components/popover/index.js

@@ -130,6 +130,7 @@ const getDirectionPopover = direction => {
 };
 
 const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   anchor,
   anchorOrigin,
   arrow,
@@ -450,20 +451,30 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     clickOutsideToClose ? document.addEventListener('click', onClickOutside) : document.removeEventListener('click', onClickOutside);
   }, [clickOutsideToClose]);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
       show: el => !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover(),
       close: () => onClosePopover(),
       setPosition: el => updatePositionPopover(el),
-      __proto__: {
-        hide: () => onClosePopover()
-      }
-    },
-    show: el => !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover(),
-    close: () => onClosePopover(),
-    setPosition: el => updatePositionPopover(el)
-  }), [ref, openState, onClose]);
+      ...action
+    }; // methods
+
+    _instance.__proto__ = {
+      hide: () => onClosePopover()
+    }; // hidden methods
+
+    currentRef.instance = _instance;
+
+    currentRef.show = el => !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
+
+    currentRef.close = onClosePopover;
+
+    currentRef.setPosition = el => updatePositionPopover(el);
+
+    return currentRef;
+  });
 
   const renderAnchor = () => {
     var _anchor10;

package/components/status/index.js

@@ -31,6 +31,7 @@ const iconSizeMap = new Map([['small', '16px'], ['medium', '20px'], ['large', '2
 const typographySizeMap = new Map([['small', 'p3'], ['medium', 'p2'], ['large', 'p1']]);
 const filledPaddingSizeMap = new Map([['small', '2px 8px'], ['medium', '2px 12px'], ['large', '2px 12px']]);
 const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   className,
   color,
   icon,
@@ -50,10 +51,17 @@ const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _StatusRoot = StatusRoot(iconSize, _color, size, outlinedPaddingSize);
 
-  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;
+  });
   const StatusIcon = typeof icon === 'string' ? jsx(Icon, {
     name: icon,
     width: iconSize,

package/icons/effect.js

@@ -15,6 +15,7 @@ const {
   }
 } = colors;
 const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   name,
   className,
   style,
@@ -27,28 +28,35 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const ref = useRef(null);
   const IconCss = css`
-            ${flexRow};
-            ${justifyCenter};
-            ${alignCenter};
-            ${borderBox};
-            ${outlineNone};
-            ${userSelectNone};
-            width: max-content;
-            height: max-content;
-            min-width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-            min-height: ${width ? isNaN(height) ? height : height + 'px' : '24px'};
-        `;
+                ${flexRow};
+                ${justifyCenter};
+                ${alignCenter};
+                ${borderBox};
+                ${outlineNone};
+                ${userSelectNone};
+                width: max-content;
+                height: max-content;
+                min-width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+                min-height: ${width ? isNaN(height) ? height : height + 'px' : '24px'};
+            `;
   const NotFoundIcon = css`
-            ${flexRow};
-            ${borderBox};
-            width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-            height: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-            border: 1px dashed ${rest};
-        `;
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+                ${flexRow};
+                ${borderBox};
+                width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+                height: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+                border: 1px dashed ${rest};
+            `;
+  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(() => {
     if (!name) return null;
     let node = null;

package/package.json

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