diginet-core-ui 1.3.73-beta.1 → 1.3.73-beta.3

package/components/accordion/summary.js

@@ -61,10 +61,10 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (expandState) {
       if (expanded === undefined) setExpandState(false);
-      !!onCollapse && onCollapse(e);
+      !!onCollapse && onCollapse(ref.current);
     } else if (!expandState) {
       if (expanded === undefined) setExpandState(true);
-      !!onExpand && onExpand(e);
+      !!onExpand && onExpand(ref.current);
     }
   };
 

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

@@ -1775,7 +1775,12 @@ Attachment.defaultProps = {
   multiple: true,
   readOnly: false,
   style: {},
-  uploadErrorInfo: {},
+  uploadErrorInfo: {
+    maxFile: getGlobal(['errorDefault', 'maxFile']),
+    maxSize: getGlobal(['errorDefault', 'maxSize']),
+    fileType: getGlobal(['errorDefault', 'fileType']),
+    existingFile: getGlobal(['errorDefault', 'existingFile'])
+  },
   viewType: 'detail'
 };
 Attachment.propTypes = {
@@ -1788,17 +1793,17 @@ Attachment.propTypes = {
   /** Class for component. */
   className: PropTypes.string,
 
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
-   * }, ...]
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
    */
   data: PropTypes.array,
 
@@ -1841,16 +1846,16 @@ Attachment.propTypes = {
   /** Download attached event, if not it will use default. */
   onDownload: PropTypes.func,
 
-  /**
-   * event when removed file(s)
-   *
-   * return data: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
-   * }
+  /**
+   * event when removed file(s)
+   *
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
    */
   onRemove: PropTypes.func,
 

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

@@ -328,10 +328,10 @@ Checkbox.propTypes = {
   /** The name of the Checkbox corresponds to the label displayed on the interface. */
   name: PropTypes.string,
 
-  /**
-   * Callback fired when the state is changed.
-   *
-   * You can pull out the new checked state by accessing `event.value` or `event.target.checked` (boolean).
+  /**
+   * Callback fired when the state is changed.
+   *
+   * You can pull out the new checked state by accessing `event.value` or `event.target.checked` (boolean).
    */
   onChange: PropTypes.func,
 

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

@@ -49,7 +49,8 @@ const timing = {},
       isSearch = {},
       allValue = {};
 const separatorPattern = /\{\w+\}/g;
-const regexBetween = /[^{\}]+(?=})/g;
+const regexBetween = /[^{\}]+(?=})/g; // eslint-disable-line
+
 const regexInclude = /{|}/g;
 
 const checkHasValue = value => {
@@ -914,6 +915,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const onRemove = (e, value) => {
     var _ref;
 
+    if (readOnly || disabled) return;
     const index = currentValue[unique].findIndex(v => JSON.stringify(v) === JSON.stringify(value));
 
     if (index !== -1) {
@@ -1385,7 +1387,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           label: text,
           size: 'medium',
           disabled: disabled,
-          clearAble: true,
+          clearAble: !readOnly && !disabled,
           onRemove: e => onRemove(e, vl)
         });
       }

package/components/grid/Col.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Grid from '.';
 import { makeStyles } from '../../theme';
+import { classNames } from '../../utils';
 const useStyles = makeStyles({
   customCol: {
     '& .DGN-UI-Control': {
@@ -34,30 +35,27 @@ const Col = props => {
     className
   } = props;
   return jsx(Grid, { ...props,
-    className: [`DGN-UI-Col ${classes.customCol}`, className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames(`DGN-UI-Col ${classes.customCol}`, className),
     item: true
   });
 };
 
 Col.defaultProps = {
-  style: {},
   className: '',
   columns: 12,
   lg: false,
   md: false,
   sm: false,
+  style: {},
+  wrap: 'wrap',
   xl: false,
   xs: true,
-  zeroMinWidth: false,
-  wrap: 'wrap'
+  zeroMinWidth: false
 };
 Col.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
 
@@ -76,6 +74,9 @@ Col.propTypes = {
   /** 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]),
 
+  /** Style inline of component. */
+  style: PropTypes.object,
+
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
 

package/components/grid/Container.js

@@ -4,6 +4,7 @@
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Grid from '.';
+import { classNames } from '../../utils';
 
 const checkChildren = children => {
   if (!children) return false;
@@ -21,24 +22,14 @@ const Container = props => {
     children
   } = props;
   return checkChildren(children) ? jsx(Grid, { ...props,
-    className: ['DGN-UI-Container', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Container', className),
     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,
@@ -46,6 +37,9 @@ Container.defaultProps = {
     lg: 4,
     xl: 6
   },
+  direction: 'row',
+  lg: false,
+  md: false,
   rowSpacing: {
     xs: 4,
     sm: 4,
@@ -53,21 +47,25 @@ Container.defaultProps = {
     lg: 4,
     xl: 4
   },
+  sm: false,
+  spacing: 0,
+  style: {},
   topSpacing: {
     xs: 2,
     sm: 2,
     md: 2,
     lg: 2,
     xl: 2
-  }
+  },
+  wrap: 'wrap',
+  xl: false,
+  xs: false,
+  zeroMinWidth: false
 };
 Container.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
 
@@ -95,6 +93,9 @@ Container.propTypes = {
   /** 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]),
 
+  /** Style inline of component. */
+  style: PropTypes.object,
+
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
 

package/components/grid/Row.js

@@ -4,6 +4,7 @@
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Grid from '.';
+import { classNames } from '../../utils';
 
 const checkChildren = children => {
   if (!children) return false;
@@ -21,24 +22,14 @@ const Row = props => {
     children
   } = props;
   return checkChildren(children) ? jsx(Grid, { ...props,
-    className: ['DGN-UI-Row', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Row', className),
     container: true
   }) : null;
 };
 
 Row.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,
@@ -46,21 +37,28 @@ Row.defaultProps = {
     lg: 4,
     xl: 6
   },
+  direction: 'row',
+  lg: false,
+  md: false,
   rowSpacing: {
     xs: 4,
     sm: 4,
     md: 4,
     lg: 4,
     xl: 4
-  }
+  },
+  sm: false,
+  spacing: 0,
+  style: {},
+  wrap: 'wrap',
+  xl: false,
+  xs: false,
+  zeroMinWidth: false
 };
 Row.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
 
@@ -88,6 +86,9 @@ Row.propTypes = {
   /** 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]),
 
+  /** Style inline of component. */
+  style: PropTypes.object,
+
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
 

package/components/grid/index.js

@@ -8,19 +8,20 @@ import GridContext from './context';
 import theme from '../../theme/settings';
 import { breakpointKeys } from '../../theme/createBreakpoints';
 import { borderBox } from '../../styles/general';
+import { classNames, handleBreakpoints } from '../../utils';
 const {
   breakpoints: themeBreakpoints,
   spacing: themeSpacing
 } = theme;
 const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  id,
-  style,
-  className,
+  action = {},
   children,
+  className,
   columns: columnsProp,
   columnSpacing: columnSpacingProp,
   container,
   direction,
+  id,
   item,
   leftSpacing: leftSpacingProp,
   lg,
@@ -28,6 +29,7 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   rowSpacing: rowSpacingProp,
   sm,
   spacing,
+  style,
   topSpacing: topSpacingProp,
   wrap,
   xl,
@@ -50,7 +52,9 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
-    const _instance = {}; // methods
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
 
     _instance.__proto__ = {}; // hidden methods
 
@@ -63,11 +67,11 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: ref,
       css: [_GridCSS, container && (rowSpacing || columnSpacing) && _GridSpacingCSS, _HandleGridCSS],
       style: style,
-      className: [`DGN-UI-Grid${item ? '-item' : ''}`, className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames(`DGN-UI-Grid${item ? '-item' : ''}`, className)
     }, jsx(GridContext.Provider, {
       value: columns
     }, children));
-  }, [id, container, item, direction, leftSpacing, wrap, rowSpacing, columnSpacing, xs, sm, md, lg, xl, spacing, topSpacing, zeroMinWidth, className, columns, children]);
+  }, [columns, columnSpacing, leftSpacing, rowSpacing, topSpacing, children, className, container, direction, id, item, lg, md, sm, spacing, style, wrap, xl, xs, zeroMinWidth]);
 }));
 
 const getOffset = val => {
@@ -75,30 +79,7 @@ const getOffset = val => {
   return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
 };
 
-const handleBreakpoints = (propValue, cssFromPropValue) => {
-  let output = '';
-
-  if (Array.isArray(propValue)) {
-    propValue.map((item, index) => {
-      output = output.concat([themeBreakpoints.up(breakpointKeys[index])]).concat(`{${cssFromPropValue(propValue[index])}} `);
-    });
-    return output;
-  }
-
-  if (typeof propValue === 'object') {
-    Object.keys(propValue).map(item => {
-      if (breakpointKeys.includes(item)) {
-        output = output.concat([themeBreakpoints.up(item)]).concat(`{${cssFromPropValue(propValue[item])}} `);
-      }
-    });
-    return output;
-  }
-
-  output = cssFromPropValue(propValue);
-  return output;
-};
-
-const progessSizeArray = sizeArr => {
+const processSizeArray = sizeArr => {
   let lastValue = false;
   sizeArr = sizeArr.map(item => {
     if (item === false) return lastValue;else lastValue = item;
@@ -208,26 +189,26 @@ const GridSpacingCSS = (rowSpacing, columnSpacing, topSpacing, leftSpacing) => c
 `;
 
 const HandleGridCSS = (sizeArr, columns) => css`
-    ${progessSizeArray(sizeArr).map((item, idx) => {
+    ${processSizeArray(sizeArr).map((item, idx) => {
   return handleGrid(breakpointKeys[idx], item, columns);
 })}
 `;
 
 Grid.defaultProps = {
-  style: {},
   className: '',
   columns: 12,
   container: false,
+  direction: 'row',
   item: false,
   lg: false,
   md: false,
   sm: false,
+  spacing: 0,
+  style: {},
+  wrap: 'wrap',
   xl: false,
   xs: false,
-  zeroMinWidth: false,
-  spacing: 0,
-  direction: 'row',
-  wrap: 'wrap'
+  zeroMinWidth: false
 };
 Grid.propTypes = {
   /** The content of the component. */

package/components/modal/footer.js

@@ -12,12 +12,16 @@ const {
 } = theme;
 const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
+  boxShadow,
   children,
   className,
   id,
   style
 }, reference) => {
   const ref = useRef(null);
+
+  const _ModalFooterCSS = ModalFooterCSS(boxShadow);
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -30,14 +34,15 @@ const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   return useMemo(() => jsx("div", {
-    css: ModalFooterCSS,
+    css: _ModalFooterCSS,
     id: id,
     className: classNames('DGN-UI-Modal-Footer', className),
     style: style,
     ref: ref
-  }, children), [children, className, id, style]);
+  }, children), [boxShadow, children, className, id, style]);
 }));
-const ModalFooterCSS = css`
+
+const ModalFooterCSS = boxShadow => css`
     ${flexRow};
     ${positionRelative};
     ${alignCenter};
@@ -46,7 +51,7 @@ const ModalFooterCSS = css`
     width: 100%;
     min-height: 56px;
     border-radius: 0px 0px 4px 4px;
-    box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25);
+    box-shadow: ${boxShadow};
     order: 3;
     ${handleBreakpoints({
   xs: 4,
@@ -55,11 +60,16 @@ const ModalFooterCSS = css`
   return `padding: ${spacing([4, propValue])}`;
 })}
 `;
+
 ModalFooter.defaultProps = {
+  boxShadow: '0px -1px 1px rgba(0, 0, 0, 0.25)',
   className: '',
   style: {}
 };
 ModalFooter.propTypes = {
+  /** The box-shadow of component. */
+  boxShadow: PropTypes.string,
+
   /** The content of the component. */
   children: PropTypes.node,
 

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: {
@@ -40,7 +41,7 @@ const PopoverBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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`
@@ -48,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: {
@@ -43,8 +44,8 @@ const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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,7 +15,8 @@ const {
       headerbar
     }
   },
-  spacing
+  spacing,
+  zIndex: zIndexCORE
 } = theme;
 const PopoverHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -41,7 +43,7 @@ const PopoverHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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: {
@@ -59,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: '',