diginet-core-ui 1.3.42-beta.9 → 1.3.43-beta.2

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

@@ -895,7 +895,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    if (closeAfterSelect) {
+    if (closeAfterSelect === true || closeAfterSelect === undefined && !multiple) {
       closeDropdown();
     }
   };
@@ -1419,7 +1419,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, error), [error, disabled, errorStyle]);
   const dropdownComp = useMemo(() => {
     return openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null;
-  }, [openState]);
+  }, [openState, dataSource]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
@@ -1782,7 +1782,6 @@ Dropdown.defaultProps = {
   multiple: false,
   allowSearch: false,
   selectBox: false,
-  closeAfterSelect: true,
   inputProps: {},
   formStyle: {},
   dataSource: [],
@@ -1822,14 +1821,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,
@@ -1847,9 +1846,9 @@ Dropdown.propTypes = {
   /** field name used for text display in input */
   keyExpr: 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]),
 
@@ -1859,9 +1858,9 @@ 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
+  /**
+   * duration wait enter search content on search<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -1928,19 +1927,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.func,
 
-  /** 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,
 
@@ -1959,19 +1958,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/form-control/dropdown-box/index.js

@@ -153,7 +153,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     style: style
   }, label ? jsx(Label, { ...labelProps
   }, label) : null, jsx(InputBase, { ...inputProps,
-    className: open && 'dropdown-focus',
+    className: open ? 'dropdown-focus' : '',
     style: inputStyle,
     viewType: viewType,
     inputRef: inputRef,

package/components/slider/slider-container.js

@@ -5,9 +5,34 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { ButtonIcon } from '..';
-import theme from '../../theme/settings';
 import { randomString } from '../../utils';
 import SliderItem from './slider-item';
+import { color as colors } from '../../styles/colors';
+import { alignCenter, backgroundTransparent, borderBox, cursorPointer, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+const {
+  system: {
+    active,
+    rest,
+    white
+  },
+  fill: {
+    pressed: fillPressed
+  }
+} = colors;
+const styles = {
+  iconLeft: {
+    left: 0,
+    position: 'absolute',
+    top: '50%',
+    transform: 'translate(0, -50%)'
+  },
+  iconRight: {
+    right: 0,
+    position: 'absolute',
+    top: '50%',
+    transform: 'translate(0, -50%)'
+  }
+};
 const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   animation,
   active,
@@ -16,10 +41,8 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   data,
   onShowNavigation,
-  style,
-  ...props
+  style
 }, reference) => {
-  /**@property */
   let autoChange;
   let currentItemIndex = 0;
   const Id = randomString(7, {
@@ -36,107 +59,16 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     navigationItem: 'DGN-UI-Slider-navigation-item',
     slideContainer: 'DGN-UI-Slider-slide-container'
   };
-  /**@reference */
-
   const ref = useRef(null);
   const slideContainerRef = useRef(null);
   const navigationRef = useRef(null);
   const navigationListRef = useRef(null);
   const iconLeftRef = useRef(null);
   const iconRightRef = useRef(null);
-  useImperativeHandle(reference, () => ref.current);
-  /**@style */
-
-  const styles = {
-    container: css`
-			* {
-				box-sizing: border-box;
-				margin    : 0;
-				padding   : 0;
-			}
-			align-items     : center;
-			background-color: transparent;
-			display         : flex;
-			flex-direction  : column;
-			height          : 100%;
-			justify-items   : center;
-			position        : relative;
-			resize			: both;
-			.${IDs.icon} {
-				opacity: 0;
-				&.${IDs.iconLeft} {
-					cursor  : pointer;
-					display : none;
-					height  : 95%;
-					left    : 5%;
-					position: absolute;
-					width   : 15%;
-				}
-				&.${IDs.iconRight} {
-					cursor  : pointer;
-					display : none;
-					height  : 95%;
-					position: absolute;
-					right   : 5%;
-					width   : 15%;
-				}
-			}
-			.${IDs.slideContainer} {
-				background-color: transparent;
-				height          : 95%;
-				margin          : 0 auto;
-				overflow        : hidden;
-				position        : relative;
-				width           : 100%;
-			}
-			&:hover {
-				.${IDs.icon} {
-					opacity: 1;
-				}
-			}
-		`,
-    icon: {
-      left: '50%',
-      position: 'absolute',
-      top: '50%',
-      transform: 'translate(-50%, -50%)'
-    },
-    navigation: css`
-			background-color: ${theme.colors.white};
-			display         : none;
-			height          : 5%;
-			position        : relative;
-			width           : 100%;
-			&.navigation-hidden {
-				display: none;
-			}
-		`,
-    navigationList: css`
-			display       : flex;
-			flex-direction: row;
-			left          : 50%;
-			position      : absolute;
-			top           : 50%;
-			transform     : translate(-50%, -50%);
-			.${IDs.navigationItem} {
-				background-color: ${theme.colors.secondary};
-				border-radius   : 50%;
-				cursor          : pointer;
-				height          : 12px;
-				margin          : 0 6px;
-				position        : relative;
-				width           : 12px;
-				:hover:not(.item-focused) {
-					background-color: ${theme.colors.info};
-					box-shadow      : 0px 0px 4px 3px rgba(0, 0, 0, 0.25);
-				}
-				&.item-focused {
-					background-color: ${theme.colors.primary};
-				}
-			}
-		`
-  };
-  /**@function */
+
+  const _containerCSS = containerCSS(IDs);
+
+  const _navigationListCSS = navigationListCSS(IDs);
 
   const removeClass = (className, selector) => {
     const array = document.querySelectorAll(`.${selector}`) || document.querySelectorAll(selector);
@@ -221,8 +153,6 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     });
   };
-  /**@flow */
-
 
   useEffect(() => {
     if (!slideContainerRef.current || !navigationRef.current || !iconLeftRef.current || !iconRightRef.current) return;
@@ -269,8 +199,15 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [autoChangeTime, children, data]);
-  /**@memo */
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
 
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   const Slider = useMemo(() => jsx("div", {
     className: IDs.slideContainer,
     ref: slideContainerRef
@@ -285,77 +222,164 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   })), [animation, autoChangeTime, children, data]);
   const IconLeft = useMemo(() => jsx("span", {
-    className: [IDs.icon, IDs.iconLeft].join(' '),
+    className: [IDs.icon, IDs.iconLeft].join(' ').trim().replace(/\s+/g, ' '),
     ref: iconLeftRef
   }, jsx(ButtonIcon, {
     circular: true,
     viewType: 'filled',
-    size: 'tiny',
-    color: 'primary',
+    color: white,
     name: 'ArrowLeft',
-    style: styles.icon
+    style: styles.iconLeft,
+    viewBox: false
   })), [children, data]);
   const IconRight = useMemo(() => jsx("span", {
-    className: [IDs.icon, IDs.iconRight].join(' '),
+    className: [IDs.icon, IDs.iconRight].join(' ').trim().replace(/\s+/g, ' '),
     ref: iconRightRef
   }, jsx(ButtonIcon, {
     circular: true,
     viewType: 'filled',
-    size: 'tiny',
-    color: 'primary',
+    color: white,
     name: 'ArrowRight',
-    style: styles.icon
+    style: styles.iconRight,
+    viewBox: false
   })), [children, data]);
   const Navigation = useMemo(() => jsx("div", {
-    className: [IDs.navigation, onShowNavigation && 'navigation-hidden'].join(' '),
-    css: styles.navigation,
+    className: [IDs.navigation, onShowNavigation && 'navigation-hidden'].join(' ').trim().replace(/\s+/g, ' '),
+    css: navigationCSS,
     id: IDs.navigation,
     ref: navigationRef
   }, jsx("div", {
-    css: styles.navigationList,
+    css: _navigationListCSS,
     className: IDs.navigationList,
     id: IDs.navigationList,
     ref: navigationListRef
   })), [animation, autoChangeTime, children, data, onShowNavigation]);
   return jsx("div", {
-    css: styles.container,
-    className: [IDs.container, className].join(' '),
+    css: _containerCSS,
+    className: [IDs.container, className].join(' ').trim().replace(/\s+/g, ' '),
     id: IDs.container,
     style: style,
-    ref: ref,
-    ...props
+    ref: ref
   }, Slider, IconLeft, IconRight, Navigation);
 }));
+
+const containerCSS = IDs => css`
+    * {
+        ${borderBox};
+        margin: 0;
+        padding: 0;
+    }
+    ${flexCol};
+    ${alignCenter};
+    ${justifyCenter};
+    ${positionRelative};
+    ${backgroundTransparent};
+    height: 100%;
+    resize: both;
+    .${IDs.icon} {
+        opacity: 0;
+        &.${IDs.iconLeft} {
+            ${displayNone};
+            ${cursorPointer};
+            ${userSelectNone};
+            ${positionAbsolute};
+            height: 100%;
+            left: 0;
+            margin-left: 16px;
+            width: 15%;
+        }
+        &.${IDs.iconRight} {
+            ${displayNone};
+            ${cursorPointer};
+            ${userSelectNone};
+            ${positionAbsolute};
+            height: 100%;
+            right: 0;
+            margin-right: 16px;
+            width: 15%;
+        }
+    }
+    .${IDs.slideContainer} {
+        ${overflowHidden};
+        ${positionRelative};
+        ${backgroundTransparent};
+        height: 95%;
+        margin: 0 auto;
+        width: 100%;
+    }
+    &:hover {
+        .${IDs.icon} {
+            opacity: 1;
+        }
+    }
+`;
+
+const navigationCSS = css`
+    ${displayNone};
+    ${positionRelative};
+    background-color: ${white};
+    height: 5%;
+    width: 100%;
+    &.navigation-hidden {
+        ${displayNone};
+    }
+`;
+
+const navigationListCSS = IDs => css`
+    ${flexRow};
+    ${positionAbsolute};
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, 14px);
+    .${IDs.navigationItem} {
+        ${cursorPointer};
+        ${positionRelative};
+        background-color: ${rest};
+        border-radius: 50%;
+        height: 12px;
+        margin: 0 6px;
+        width: 12px;
+        :hover:not(.item-focused) {
+            background-color: ${fillPressed};
+        }
+        &.item-focused {
+            background-color: ${active};
+        }
+    }
+`;
+
 SliderContainer.defaultProps = {
   animation: true,
   autoChangeTime: 0,
   children: null,
   data: [],
-  onShowNavigation: true
+  onShowNavigation: true,
+  className: '',
+  style: {}
 };
 SliderContainer.propTypes = {
-  /** index of the active item */
+  /** Index of the active item. */
   active: PropTypes.number,
 
-  /** enable/disable the animation when change active item */
+  /** Enable/disable the animation when change active item. */
   animation: PropTypes.bool,
 
-  /** time to slider auto change (s) */
+  /** Time to slider auto change (s). */
   autoChangeTime: PropTypes.number,
 
-  /** element or node to display on slider without data  */
+  /** Element or node to display on slider without data.  */
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
 
-  /** className of the slider container */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** data to display on slider */
+  /** Data to display on slider. */
   data: PropTypes.array,
 
-  /** show/hide the navigation bar */
+  /** Show/hide the navigation bar. */
   onShowNavigation: PropTypes.bool,
 
-  /** style of the component, style-inline - the highest priority */
+  /** Style inline of component. */
   style: PropTypes.object
 };
 export default SliderContainer;

package/components/slider/slider-item.js

@@ -1,19 +1,42 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { forwardRef, memo, useEffect, useState, useRef } from 'react';
-import { jsx, css, keyframes } from '@emotion/core';
+import { forwardRef, memo, useEffect, useState, useRef, useImperativeHandle } from 'react';
+import { jsx, css } from '@emotion/core';
 import { randomString, getFileType } from '../../utils';
 import PropTypes from 'prop-types';
 import { IndeterminateCircularProgress } from '../progress/circular';
+import { animations } from '../../styles/animation';
+import { displayBlock, displayNone, justifyCenter, positionAbsolute } from '../../styles/general';
+const fadeIn = animations.fadeIn;
+const regex = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&/=]*)/g;
+const googleDriveRegex = /(http(s)?:\/\/.)?(drive\.google\.com\/file\/d\/)/;
+const googleDocsRegex = /(http(s)?:\/\/.)?(docs\.google\.com\/fileview\?)/;
+
+const checkURL = link => {
+  const res = regex.test(link);
+
+  if (res) {
+    if (googleDriveRegex.test(link)) {
+      const id = link.split('/')[0] === 'drive.google.com' ? link.split('/')[3] : link.split('/')[5];
+      return `https://docs.google.com/viewer?srcid=${id}&pid=explorer&efh=false&a=v&chrome=false&embedded=true`;
+    }
+
+    if (googleDocsRegex.test(link)) {
+      return `https://docs.google.com/viewer?srcid=${link.split('=')[1]}&pid=explorer&efh=false&a=v&chrome=false&embedded=true`;
+    }
+  }
+
+  return link;
+};
+
 const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   active,
   animation,
   fileName,
   url,
   ...props
-}, ref) => {
-  /**@property */
+}, reference) => {
   const Id = randomString(7, {
     allowSymbol: false,
     allowNumber: false
@@ -24,77 +47,9 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     itemContainer: 'DGN-UI-Slider-item-container-' + Id,
     video: 'DGN-UI-Slider-video' + Id
   };
-  const [iframeTimeoutId, setIframeTimeoutId] = useState(null);
+  const ref = useRef(null);
   const iframeRef = useRef(null);
-  /**@reference */
-
-  if (!ref) ref = useRef(null);
-  /**@style */
-
-  const anime = {
-    fade: keyframes`
-			from {
-				opacity: 0.4;
-			}
-			to {
-				opacity: 1;
-			}
-		`
-  };
-  const styles = {
-    itemContainer: css`
-                display: none;
-                justify-content: center;
-                height: 100%;
-                width: 100%;
-                &.item-animation {
-                    animation: ${anime.fade} 1s;
-                }
-            `,
-    frame: css`
-                display: block;
-                height: 85vh;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-            `,
-    image: css`
-                display: block;
-                height: auto;
-                margin: auto;
-                max-height: 100%;
-                max-width: 100%;
-                width: auto;
-            `,
-    loading: css`
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-            `
-  };
-  /**@function */
-
-  const regex = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g;
-  const googleDriveRegex = /(http(s)?:\/\/.)?(drive\.google\.com\/file\/d\/)/;
-  const googleDocsRegex = /(http(s)?:\/\/.)?(docs\.google\.com\/fileview\?)/;
-
-  const checkURL = link => {
-    const res = regex.test(link);
-
-    if (res) {
-      if (googleDriveRegex.test(link)) {
-        const id = link.split('/')[0] === 'drive.google.com' ? link.split('/')[3] : link.split('/')[5];
-        return `https://docs.google.com/viewer?srcid=${id}&pid=explorer&efh=false&a=v&chrome=false&embedded=true`;
-      }
-
-      if (googleDocsRegex.test(link)) {
-        return `https://docs.google.com/viewer?srcid=${link.split('=')[1]}&pid=explorer&efh=false&a=v&chrome=false&embedded=true`;
-      }
-    }
-
-    return link;
-  };
+  const [iframeTimeoutId, setIframeTimeoutId] = useState(null);
 
   const getViewer = (filePath, fileType) => {
     switch (fileType) {
@@ -102,8 +57,9 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         {
           return jsx("img", { ...props,
             className: IDs.image,
-            css: styles.image,
-            src: filePath
+            css: imageCSS,
+            src: filePath,
+            alt: ''
           });
         }
 
@@ -112,7 +68,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         {
           return jsx("iframe", { ...props,
             className: IDs.frame,
-            css: styles.frame,
+            css: frameCSS,
             frameBorder: 0,
             src: `https://view.officeapps.live.com/op/view.aspx?src=${filePath}`,
             title: fileName
@@ -124,7 +80,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           return jsx("iframe", { ...props,
             ref: iframeRef,
             className: IDs.frame,
-            css: styles.frame,
+            css: frameCSS,
             frameBorder: 0,
             src: getIframeLink(),
             title: fileName,
@@ -151,7 +107,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         {
           return jsx("iframe", { ...props,
             className: IDs.frame,
-            css: styles.frame,
+            css: frameCSS,
             frameBorder: 0,
             src: checkURL(filePath),
             title: fileName
@@ -162,7 +118,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         {
           return jsx("iframe", { ...props,
             className: IDs.frame,
-            css: styles.frame,
+            css: frameCSS,
             frameBorder: 0,
             src: filePath,
             title: fileName
@@ -180,32 +136,71 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, []);
 
-  function iframeLoaded() {
+  const iframeLoaded = () => {
     clearInterval(iframeTimeoutId);
     setIframeTimeoutId(null);
-  }
+  };
 
-  function getIframeLink() {
+  const getIframeLink = () => {
     return `https://docs.google.com/gview?url=${url}&embedded=true`;
-  }
+  };
 
-  function updateIframeSrc() {
+  const updateIframeSrc = () => {
     if (iframeRef.current) {
       iframeRef.current.src = getIframeLink();
     }
-  }
+  };
+
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
 
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return jsx("div", {
-    className: [IDs.itemContainer, active ? 'active' : '', animation ? 'item-animation' : ''].join(' '),
-    css: styles.itemContainer,
+    className: [IDs.itemContainer, active ? 'active' : '', animation ? 'item-animation' : ''].join(' ').trim().replace(/\s+/g, ' '),
+    css: itemContainerCSS,
     id: IDs.itemContainer,
     ref: ref
   }, iframeTimeoutId && getFileType(url, undefined, false) === 'pdf' && jsx("div", {
-    css: styles.loading
+    css: loadingCSS
   }, jsx(IndeterminateCircularProgress, {
     size: 'xs'
   })), getViewer(url, getFileType(url, undefined, false)));
 }));
+const itemContainerCSS = css`
+    ${displayNone};
+    ${justifyCenter};
+    height: 100%;
+    width: 100%;
+    &.item-animation {
+        animation: ${fadeIn} 1s;
+    }
+`;
+const frameCSS = css`
+    ${displayBlock};
+    height: 85vh;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+`;
+const imageCSS = css`
+    ${displayBlock};
+    height: auto;
+    margin: auto;
+    max-height: 100%;
+    max-width: 100%;
+    width: auto;
+`;
+const loadingCSS = css`
+    ${positionAbsolute};
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+`;
 SliderItem.defaultProps = {
   active: false,
   animation: true

package/package.json

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

package/readme.md

@@ -38,52 +38,68 @@ npm test
 ```
 
 ## Changelog
+## 1.3.43
+- \[Added\]: MenuIcon – MHRM00N0002, MHRM39N0018, MHRM39N0019, MHRM00N0003, MHRM00N0004 , MHRM13N0002, MHRM13N0003, MHRM29N0004
+- \[Changed\]: Checkbox - Add labelProps
+- \[Changed\]: PagingInfo - Add case listPerPage not include itemsPerPage
+- \[Changed\]: PagingInfo - Update design typeShort (Design update)
+- \[Changed\]: Tab - Update vertical tab (Design update)
+- \[Changed\]: Checkbox - Fix spacing & Update UI with New Design
+- \[Changed\]: Toggle - Add props readOnly - update UI with new design
+- \[Changed\]: Label - Reuse props of  Typography component
+- \[Changed\]: TextInput - Change logic showing error
+- \[Fixed\]: TextInput - Optimize code, manage with hook useState
+- \[Fixed\]: InputBase - Optimize code, manage with hook useState
+- \[Fixed\]: DropdownBox - Change onChangeInput, delayOnInput according to new InputBase; Fix warning className
+- \[Fixed\]: FormGroup - Fix bug css
+- \[Fixed\]: NumberInput - Fix case VIE keyboard
+
 ## 1.3.42
-\[Added\]: Icon - MoneyHistory, Calculate, ShoppingCart
+- \[Added\]: Icon - MoneyHistory, Calculate, ShoppingCart
 
 ## 1.3.41
-\[Fixed\]: DropdownBox - Fix zIndex
+- \[Fixed\]: DropdownBox - Fix zIndex
 
 ## 1.3.40
-\[Fixed\]: Slider - Fix bug can't view https file
-\[Fixed\]: Typography - Fix word-wrap css
-\[Fixed\]: Slider - Fix bug not showing pdf file with blob url
+- \[Fixed\]: Slider - Fix bug can't view https file
+- \[Fixed\]: Typography - Fix word-wrap css
+- \[Fixed\]: Slider - Fix bug not showing pdf file with blob url
 
 ## 1.3.39
-\[Added\]: MenuIcon - MHRM29N0003
+- \[Added\]: MenuIcon - MHRM29N0003
 
 ## 1.3.38
-\[Added\]: System - Phát triển chuẩn zIndex
-\[Changed\]: NumberInput - Phát triển lại component NumberInput
-\[Fixed\]: Accordion - Fix bug Accordion auto expand when render; Add prop style, id; Fix css
-\[Fixed\]: Radio - Fix spacing & Update UI with New Design
-\[Fixed\]: Toggle - Fix Toggle when label is line-break, Update style Toggle with new Design
-\[Fixed\]: Divider - Fix width, height Divider
+- \[Added\]: System - Phát triển chuẩn zIndex
+- \[Changed\]: NumberInput - Phát triển lại component NumberInput
+- \[Fixed\]: Accordion - Fix bug Accordion auto expand when render; Add prop style, id; Fix css
+- \[Fixed\]: Radio - Fix spacing & Update UI with New Design
+- \[Fixed\]: Toggle - Fix Toggle when label is line-break, Update style Toggle with new Design
+- \[Fixed\]: Divider - Fix width, height Divider
 
 ## 1.3.37
-\[Added\]: Icon – EditNote, Payment
-\[Added\]: MenuIcon - MHRM29N0002
-\[Changed\]: Alert - Add white background behind opacity background color
-\[Changed\]: Tech - Add storybook for Colors
-\[Changed\]: Attachment - Add ref method openFileDialog
-\[Changed\]: Modal - Change position of Modal from center to top; Add prop alignment
-\[Changed\]: Icon - Remove duplicate icons
-\[Changed\]: Icon – Pdf, Word, Sheet
-\[Fixed\]: Slider - Fix bug not showing pdf file
-\[Fixed\]: Chip - Fix bug show wrong startIcon
-\[Fixed\]: ModalHeader - Fix css; Add prop showClose
-\[Fixed\]: Dropdown - Change error logic; Remove pointerEvent, userSelect when disabled; Add ref method setValue; Fix css disabled; Add prop onClosed
+- \[Added\]: Icon – EditNote, Payment
+- \[Added\]: MenuIcon - MHRM29N0002
+- \[Changed\]: Alert - Add white background behind opacity background color
+- \[Changed\]: Tech - Add storybook for Colors
+- \[Changed\]: Attachment - Add ref method openFileDialog
+- \[Changed\]: Modal - Change position of Modal from center to top; Add prop alignment
+- \[Changed\]: Icon - Remove duplicate icons
+- \[Changed\]: Icon – Pdf, Word, Sheet
+- \[Fixed\]: Slider - Fix bug not showing pdf file
+- \[Fixed\]: Chip - Fix bug show wrong startIcon
+- \[Fixed\]: ModalHeader - Fix css; Add prop showClose
+- \[Fixed\]: Dropdown - Change error logic; Remove pointerEvent, userSelect when disabled; Add ref method setValue; Fix css disabled; Add prop onClosed
 
 ## 1.3.36
-\[Added\]: MenuIcon - W05F0013N0000, MHRP39N0017, MHRM09N0005, MHRM13N0001
-\[Changed\]: Attachment - Add prop domain, isStripDomain
-\[Changed\]: Tooltip - Add className
-\[Changed\]: Avatar - Add Add lazyLoading
-\[Changed\]: Popover - Change transition; Add prop direction; Add description on storybook
-\[Changed\]: TECH - Hide unused components on storybook
-\[Changed\]: Typography - Add prop showTooltip to show tooltip when content is clamped 
-\[Changed\]: DropdownBox - Add endIcon
-\[Fixed\]: Tooltip - Fix bug not show tooltip; Optimize code
+- \[Added\]: MenuIcon - W05F0013N0000, MHRP39N0017, MHRM09N0005, MHRM13N0001
+- \[Changed\]: Attachment - Add prop domain, isStripDomain
+- \[Changed\]: Tooltip - Add className
+- \[Changed\]: Avatar - Add Add lazyLoading
+- \[Changed\]: Popover - Change transition; Add prop direction; Add description on storybook
+- \[Changed\]: TECH - Hide unused components on storybook
+- \[Changed\]: Typography - Add prop showTooltip to show tooltip when content is clamped 
+- \[Changed\]: DropdownBox - Add endIcon
+- \[Fixed\]: Tooltip - Fix bug not show tooltip; Optimize code
 
 ## 1.3.35
 - \[Added\]: Icon - AssignmentTurnedIn, DGNProducts