diginet-core-ui 1.3.66 → 1.3.67

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

@@ -28,7 +28,8 @@ const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   style,
   children,
-  id
+  id,
+  ...props
 }, ref) => {
   const color = colorMap.get(status);
   return jsx(Typography, {
@@ -40,7 +41,8 @@ const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: HelperTextRootCSS,
     className: ['DGN-UI-HelperText', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
-    lineClamp: 1
+    lineClamp: 1,
+    ...props
   }, typeof children === 'boolean' ? getGlobal('thisFieldIsRequired') : children);
 }));
 const HelperTextRootCSS = css`
@@ -67,6 +69,9 @@ HelperText.propTypes = {
   style: PropTypes.object,
 
   /** Content to display in component. */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography) of Typography */
+  props: PropTypes.any
 };
 export default HelperText;

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

@@ -578,23 +578,23 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: PropTypes.object,
 
-  /**
-   * the format to display value<br/>
-   * * function: value => function(value)<br/>
-   * * string: Example: '#.###', '# ###', '#.### 2%', '#.### %%'<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;#: integer part digit<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;. / '_': separator symbol<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;%: decimal digit, '2%' === '%%'
+  /**
+   * the format to display value<br/>
+   * * function: value => function(value)<br/>
+   * * string: Example: '#.###', '# ###', '#.### 2%', '#.### %%'<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;#: integer part digit<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;. / '_': separator symbol<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;%: decimal digit, '2%' === '%%'
    */
   format: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
   /** The function to get ref of NumberInput component */
   refs: PropTypes.func,
 
-  /** 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]),
 

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

@@ -396,13 +396,13 @@ PhoneInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function. Return a object, example:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
-   * }
+  /**
+   * on change function. Return a object, example:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
+   * }
    */
   onChange: PropTypes.func,
 

package/components/grid/Container.js

@@ -0,0 +1,110 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import PropTypes from 'prop-types';
+import { jsx } from '@emotion/core';
+import Grid from '.';
+
+const checkChildren = children => {
+  if (!children) return false;
+
+  if (Array.isArray(children)) {
+    return !children.every(v => v === false);
+  }
+
+  return true;
+};
+
+const Container = props => {
+  const {
+    className,
+    children
+  } = props;
+  return checkChildren(children) ? jsx(Grid, { ...props,
+    className: ['DGN-UI-Container', className].join(' ').trim().replace(/\s+/g, ' '),
+    container: true
+  }) : null;
+};
+
+Container.defaultProps = {
+  style: {},
+  className: '',
+  columns: 12,
+  lg: false,
+  md: false,
+  sm: false,
+  xl: false,
+  xs: false,
+  zeroMinWidth: false,
+  spacing: 0,
+  direction: 'row',
+  wrap: 'wrap',
+  columnSpacing: {
+    xs: 4,
+    sm: 4,
+    md: 4,
+    lg: 4,
+    xl: 6
+  },
+  rowSpacing: {
+    xs: 4,
+    sm: 4,
+    md: 4,
+    lg: 4,
+    xl: 4
+  },
+  topSpacing: {
+    xs: 2,
+    sm: 2,
+    md: 2,
+    lg: 2,
+    xl: 2
+  }
+};
+Container.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** The number of columns. */
+  columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+
+  /** Defines the horizontal space between the type `Col` components. It overrides the value of the `spacing` prop. */
+  columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
+  lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
+  md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** Defines the vertical space between the type `Col` components. It overrides the value of the `spacing` prop. */
+  rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
+  sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** Defines the space between the type `Col` components */
+  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /** Defines the flex-wrap style property. It's applied for all screen sizes. */
+  wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
+  xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
+  xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
+  zeroMinWidth: PropTypes.bool
+};
+export default Container;

package/components/grid/Row.js

@@ -51,7 +51,7 @@ Row.defaultProps = {
     sm: 4,
     md: 4,
     lg: 4,
-    xl: 6
+    xl: 4
   }
 };
 Row.propTypes = {

package/components/grid/index.js

@@ -22,11 +22,13 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   container,
   direction,
   item,
+  leftSpacing: leftSpacingProp,
   lg,
   md,
   rowSpacing: rowSpacingProp,
   sm,
   spacing,
+  topSpacing: topSpacingProp,
   wrap,
   xl,
   xs,
@@ -36,11 +38,13 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
   const columns = container ? columnsProp : columnsContext;
+  const topSpacing = topSpacingProp || rowSpacing;
+  const leftSpacing = leftSpacingProp || columnSpacing;
   const ref = useRef(null);
 
   const _GridCSS = GridCSS(direction, zeroMinWidth, container, item, wrap);
 
-  const _GridSpacingCSS = GridSpacingCSS(rowSpacing, columnSpacing);
+  const _GridSpacingCSS = GridSpacingCSS(rowSpacing, columnSpacing, topSpacing, leftSpacing);
 
   const _HandleGridCSS = HandleGridCSS([xs, sm, md, lg, xl], columns);
 
@@ -63,7 +67,7 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(GridContext.Provider, {
       value: columns
     }, children));
-  }, [id, container, item, direction, wrap, rowSpacing, columnSpacing, xs, sm, md, lg, xl, spacing, zeroMinWidth, className, columns, children]);
+  }, [id, container, item, direction, leftSpacing, wrap, rowSpacing, columnSpacing, xs, sm, md, lg, xl, spacing, topSpacing, zeroMinWidth, className, columns, children]);
 }));
 
 const getOffset = val => {
@@ -151,19 +155,40 @@ const GridCSS = (direction, zeroMinWidth, container, item, wrap) => css`
 })};
 `;
 
-const GridSpacingCSS = (rowSpacing, columnSpacing) => css`
-    ${rowSpacing && handleBreakpoints(rowSpacing, propValue => {
+const GridSpacingCSS = (rowSpacing, columnSpacing, topSpacing, leftSpacing) => css`
+    ${topSpacing && handleBreakpoints(topSpacing, propValue => {
   const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
 
   if (spacing !== '0px') {
     return `
             margin-top: -${getOffset(spacing)};
+            `;
+  }
+
+  return '';
+})};
+    ${rowSpacing && handleBreakpoints(rowSpacing, propValue => {
+  const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+
+  if (spacing !== '0px') {
+    return `
             & > .DGN-UI-Grid-item {
                 padding-top: ${getOffset(spacing)};
             }
             `;
   }
 
+  return '';
+})};
+    ${leftSpacing && handleBreakpoints(leftSpacing, propValue => {
+  const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+
+  if (spacing !== '0px') {
+    return `
+                margin-left: -${getOffset(spacing)};
+                `;
+  }
+
   return '';
 })};
     ${columnSpacing && handleBreakpoints(columnSpacing, propValue => {
@@ -172,7 +197,6 @@ const GridSpacingCSS = (rowSpacing, columnSpacing) => css`
   if (spacing !== '0px') {
     return `
                 width: calc(100% + ${getOffset(spacing)});
-                margin-left: -${getOffset(spacing)};
                 & > .DGN-UI-Grid-item {
                 padding-left: ${getOffset(spacing)};
             }
@@ -230,6 +254,9 @@ Grid.propTypes = {
   /** If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. */
   item: PropTypes.bool,
 
+  /** Defines the horizontal space of `container` components. */
+  leftSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
   lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
 
@@ -245,6 +272,9 @@ Grid.propTypes = {
   /** Defines the space between the type `item` components. It can only be used on a type `container` component. */
   spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
 
+  /** Defines the vertical space of `container` components. */
+  topSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
 

package/components/index.js

@@ -22,7 +22,11 @@ export { default as Badge } from './badge'; // BUTTON
 export { default as Button } from './button';
 export { default as ButtonIcon } from './button/icon'; // CARD
 
-export { default as CardContainer } from './card'; // CHART
+export { default as Card } from './card';
+export { default as CardHeader } from './card/header';
+export { default as CardBody } from './card/body';
+export { default as CardFooter } from './card/footer';
+export { default as CardExtra } from './card/extra'; // CHART
 
 export { default as PieChart } from './chart/Pie';
 export { default as ColumnChart } from './chart/bar';
@@ -57,7 +61,8 @@ export { default as Toggle } from './form-control/toggle'; // Grid
 
 export { default as Grid } from './grid';
 export { default as Row } from './grid/Row';
-export { default as Col } from './grid/Col'; //Icon
+export { default as Col } from './grid/Col';
+export { default as Container } from './grid/Container'; //Icon
 
 export { default as Icon } from '../icons/index'; // List
 

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

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { useRef, useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+import { useRef, useState, forwardRef, useImperativeHandle, useEffect } from 'react';
 import { jsx } from '@emotion/core';
 
 const OptionWrapper = WrappedComponent => {
@@ -10,17 +10,15 @@ const OptionWrapper = WrappedComponent => {
       ref = useRef(null);
     }
 
-    const [options, setOptions] = useState(props);
+    const [options, setOptions] = useState({});
     const componentRef = useRef(null);
 
     const option = (option, optionValue) => {
       if (typeof option === 'undefined') {
-        return options;
+        return props;
       } else if (typeof option === 'string') {
-        if (typeof optionValue === 'undefined') return options[option];else setOptions({ ...options,
-          ...{
-            [option]: optionValue
-          }
+        if (typeof optionValue === 'undefined') return props[option];else setOptions({
+          [option]: optionValue
         });
       } else if (typeof option === 'object') {
         setOptions({ ...options,
@@ -29,26 +27,22 @@ const OptionWrapper = WrappedComponent => {
       }
     };
 
-    useImperativeHandle(ref, () => {
-      var _componentRef$current;
-
-      const currentRef = componentRef.current || {};
-      const _instance = { ...componentRef.current.instance,
-        ...{
-          option
-        }
-      }; // methods
-
-      _instance.__proto__ = { ...((_componentRef$current = componentRef.current.instance) === null || _componentRef$current === void 0 ? void 0 : _componentRef$current.__proto__)
-      }; // hidden methods
-
-      currentRef.instance = _instance;
-      return currentRef;
-    });
-    useEffect(() => setOptions({ ...options,
-      ...props
-    }), [props]);
-    return jsx(WrappedComponent, { ...options,
+    useEffect(() => {
+      setOptions({});
+    }, [props]);
+    useImperativeHandle(ref, () => ({ ...componentRef.current,
+      instance: { ...componentRef.current.instance,
+        option
+      } // const currentRef = componentRef.current || {};
+      // const _instance = { ...componentRef.current.instance, option }; // methods
+      // _instance.__proto__ = { ...componentRef.current.instance?.__proto__ }; // hidden methods
+      // currentRef.instance = _instance;
+      // console.log('currentRef', currentRef.instance);
+      // return currentRef;
+
+    }));
+    return jsx(WrappedComponent, { ...props,
+      ...options,
       ref: componentRef
     });
   });

package/components/paging/page-info.js

@@ -187,26 +187,17 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     setListPerPageState(listPerPage);
   }, [listPerPage]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {
       onChangePage: page => _onChangePage(page),
       onChangePerPage: per => _onChangePerPage(per),
       setTotalItems: items => setTotalItemsState(items)
-    }; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-
-    currentRef.onChangePage = page => _onChangePage(page);
-
-    currentRef.onChangePerPage = per => _onChangePerPage(per);
-
-    currentRef.setTotalItems = items => setTotalItemsState(items);
-
-    return currentRef;
-  });
+    },
+    onChangePage: page => _onChangePage(page),
+    onChangePerPage: per => _onChangePerPage(per),
+    setTotalItems: items => setTotalItemsState(items)
+  }));
   return useMemo(() => {
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
     let listPerPageData = !listPerPageState.includes(itemsPerPageState) ? [{
@@ -414,23 +405,23 @@ PagingInfo.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,
 
@@ -443,15 +434,15 @@ PagingInfo.propTypes = {
   /** Compact type for mobile. */
   typeShort: PropTypes.bool,
 
-  /**
-   * 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/index.js

@@ -209,8 +209,10 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     if (element || anchor) {
-      if (element) anchor = element;else if (anchor.current) {
-        anchor = anchor.current;
+      if (element) anchor = element;else if (anchor && !(anchor instanceof Element)) {
+        var _anchor4, _anchor$current;
+
+        anchor = ((_anchor4 = anchor) === null || _anchor4 === void 0 ? void 0 : _anchor4.element) || ((_anchor$current = anchor.current) === null || _anchor$current === void 0 ? void 0 : _anchor$current.element) || anchor.current;
       }
 
       if (anchorOrigin === 'center') {
@@ -322,9 +324,9 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, []);
   useEffect(() => {
-    var _anchor4, _anchor5;
+    var _anchor5, _anchor6;
 
-    const anchorEl = ((_anchor4 = anchor) === null || _anchor4 === void 0 ? void 0 : _anchor4.element) || ((_anchor5 = anchor) === null || _anchor5 === void 0 ? void 0 : _anchor5.current) || anchor;
+    const anchorEl = ((_anchor5 = anchor) === null || _anchor5 === void 0 ? void 0 : _anchor5.element) || ((_anchor6 = anchor) === null || _anchor6 === void 0 ? void 0 : _anchor6.current) || anchor;
     const eventArr = eventMap.get(trigger) || [];
 
     if (anchorEl && open === undefined && (eventArr === null || eventArr === void 0 ? void 0 : eventArr.length) > 0) {
@@ -378,9 +380,9 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }));
 
   const renderAnchor = () => {
-    var _anchor6;
+    var _anchor7;
 
-    if (!((_anchor6 = anchor) !== null && _anchor6 !== void 0 && _anchor6.type)) return null;
+    if (!((_anchor7 = anchor) !== null && _anchor7 !== void 0 && _anchor7.type)) return null;
     const AnchorTag = /*#__PURE__*/React.cloneElement(anchor, {
       // onClick: () => {
       //     setOpenState(true);
@@ -486,9 +488,9 @@ Popover.propTypes = {
   /** 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, PropTypes.node]),
 
-  /**
-   * This is the point on the anchor where the popover's anchor will attach to.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the anchor where the popover's anchor will attach to.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
@@ -507,14 +509,14 @@ Popover.propTypes = {
   /** If `true`, click outside will close component. */
   clickOutsideToClose: PropTypes.bool,
 
-  /**
-   * Direction when Popover shown.
-   * Note: This prop will overwrite anchorOrigin & transformOrigin.
-   *
-   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
-   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
-   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
-   * * right: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
+  /**
+   * Direction when Popover shown.
+   * Note: This prop will overwrite anchorOrigin & transformOrigin.
+   *
+   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
+   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
+   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
+   * * right: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
    */
   direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
 
@@ -530,9 +532,9 @@ Popover.propTypes = {
   /** Style inline of component. */
   style: PropTypes.object,
 
-  /**
-   * This is the point on the popover which will attach to the anchor's origin.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the popover which will attach to the anchor's origin.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   transformOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
@@ -545,13 +547,13 @@ Popover.propTypes = {
   /** Config z-index of the component. */
   zIndex: PropTypes.number,
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show: Show popover
-   * * close: Close popover
-   * * setPosition(element): Set position of popover
-   *  * @param {element} - element
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * show: Show popover
+   * * close: Close popover
+   * * setPosition(element): Set position of popover
+   *  * @param {element} - element
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)