diginet-core-ui 1.3.41 → 1.3.42

package/components/avatar/index.js

@@ -498,18 +498,18 @@ Avatar.propTypes = {
   /** source of file (http:// or https://) */
   src: PropTypes.string,
 
-  /**
-   * it is used to display the default if there is no src<br />
-   * if undefined, will display icons available in the icons store
+  /**
+   * it is used to display the default if there is no src<br />
+   * if undefined, will display icons available in the icons store
    */
   defaultSrc: PropTypes.string,
 
   /** the direction to display more info */
   direction: PropTypes.oneOf(['top', 'down', 'left', 'right']),
 
-  /**
-   * data to display when hoverAble is true<br />
-   * data is an object or function return a jsx element
+  /**
+   * data to display when hoverAble is true<br />
+   * data is an object or function return a jsx element
    */
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 
@@ -525,19 +525,19 @@ Avatar.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/button/icon.js

@@ -359,14 +359,14 @@ ButtonIcon.propTypes = {
   /** custom hover color for button with color 'default' */
   colorHover: PropTypes.string,
 
-  /**
-   * size of button
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * size of button
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
 
@@ -403,19 +403,19 @@ ButtonIcon.propTypes = {
   /** status loading of button */
   loading: PropTypes.bool,
 
-  /**
-   * ref methods
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/chart/Pie/Sector.js

@@ -111,8 +111,8 @@ Sector.propTypes = {
   onTouchEnd: PropTypes.func,
   onTouchStart: 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,
   path: PropTypes.string.isRequired,

package/components/chart/Pie-v2/Sector.js

@@ -97,8 +97,8 @@ Sector.propTypes = {
   onTouchEnd: PropTypes.func,
   onTouchStart: 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,
   path: PropTypes.string.isRequired,

package/components/chip/attach.js

@@ -156,11 +156,11 @@ const AttachChip = /*#__PURE__*/memo(({
   }))), attachView);
 });
 AttachChip.propTypes = {
-  /** the file info, such as:<br/>
-   * {<br/>
-   *  URL: https://url.com/pathname,<br/>
-   *  FileName: file.name,<br/>
-   * }
+  /** the file info, such as:<br/>
+   * {<br/>
+   *  URL: https://url.com/pathname,<br/>
+   *  FileName: file.name,<br/>
+   * }
    */
   file: PropTypes.shape({
     URL: PropTypes.string.isRequired,

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

@@ -318,11 +318,11 @@ Checkbox.propTypes = {
   /** The function will run to return a true or false value of Radio Component */
   onChange: PropTypes.func,
 
-  /**
-   * ref methods
-  * 
-   * * setChecked: Set check for input
-   * * getChecked: Get check of input
+  /**
+   * ref methods
+  * 
+   * * setChecked: Set check for input
+   * * getChecked: Get check of input
    */
   ref: PropTypes.any
 };

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

@@ -1797,14 +1797,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,
@@ -1822,9 +1822,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]),
 
@@ -1834,9 +1834,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]),
 
@@ -1903,19 +1903,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,
 
@@ -1934,19 +1934,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/money-input/index.js

@@ -552,10 +552,10 @@ MoneyInput.propTypes = {
   /** The function to get ref of MoneyInput 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]),
 
@@ -568,13 +568,13 @@ MoneyInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function, return an object:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
-   * }
+  /**
+   * on change function, return an object:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
+   * }
    */
   onChange: PropTypes.func,
 

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

@@ -591,23 +591,23 @@ NumberInput.propTypes = {
   /** any props of error in NumberInput component */
   errorProps: 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

@@ -410,13 +410,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/form-control/radio/index.js

@@ -154,18 +154,18 @@ Radio.defaultProps = {
   width: 20
 };
 Radio.propTypes = {
-  /**
-   * If `true`, the component is disabled.
+  /**
+   * If `true`, the component is disabled.
    */
   disabled: PropTypes.bool,
 
-  /**
-   * If `true`, the component is checked.
+  /**
+   * If `true`, the component is checked.
    */
   checked: PropTypes.bool,
 
-  /**
-   * If `true`, the component is defaultChecked.
+  /**
+   * If `true`, the component is defaultChecked.
    */
   defaultChecked: PropTypes.bool,
 
@@ -187,11 +187,11 @@ Radio.propTypes = {
   /** props for input */
   inputProps: PropTypes.object,
 
-  /** Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (string).
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    *  */
   onChange: PropTypes.func,
 

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

@@ -497,10 +497,10 @@ TextInput.propTypes = {
   /** on focus function */
   onFocus: 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/toggle/index.js

@@ -240,10 +240,10 @@ Toggle.propTypes = {
   /** Shows tooltip containing Label on hover */
   hoverTooltip: PropTypes.bool,
 
-  /** * Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange: PropTypes.func
 };

package/components/modal/modal.js

@@ -19,6 +19,10 @@ const {
   }
 } = colors;
 const fadeInDown = animations.fadeInDown;
+import { useTheme } from '../../theme';
+const {
+  zIndex: zIndexCORE
+} = useTheme();
 const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   open,
   moveable,
@@ -238,7 +242,7 @@ Modal.defaultProps = {
   autoFocus: true,
   alignment: 'top',
   width: '80%',
-  zIndex: 9000
+  zIndex: zIndexCORE()
 };
 Modal.propTypes = {
   /** Set the position on the component. */

package/components/popover/index.js

@@ -7,6 +7,10 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { typography } from '../../styles/typography';
 import { borderRadius4px, displayBlock, flexRow, parseWidthHeight, positionAbsolute, positionFixed, positionRelative } from '../../styles/general';
+import { useTheme } from '../../theme';
+const {
+  zIndex: zIndexCORE
+} = useTheme();
 const {
   paragraph1
 } = typography;
@@ -373,7 +377,7 @@ const PopoverContainerCSS = (width, height) => css`
     ${parseWidthHeight(width, height)};
     max-width: 100%;
     max-height: 100%;
-    z-index: 1000;
+    z-index: ${zIndexCORE()};
     transition: opacity 0.3s ease;
     pointer-events: initial;
     opacity: 0;
@@ -407,7 +411,7 @@ Popover.defaultProps = {
   width: 150,
   height: 'auto',
   bgColor: '#FFF',
-  zIndex: 9001,
+  zIndex: zIndexCORE(1),
   anchorOrigin: {
     vertical: 'bottom',
     horizontal: 'center'

package/components/rating/index.js

@@ -264,9 +264,9 @@ Rating.propTypes = {
   /** style inline of stars icon */
   starStyle: PropTypes.object,
 
-  /**
-   * the function for rating handler, return e:{value, ...element}<br />
-   * value: the quantity of star was selected (insist half)
+  /**
+   * the function for rating handler, return e:{value, ...element}<br />
+   * value: the quantity of star was selected (insist half)
    */
   onRating: PropTypes.func
 };

package/components/tab/tab-container.js

@@ -93,8 +93,8 @@ TabContainer.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tab/tab-header.js

@@ -157,8 +157,8 @@ TabHeader.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tab/tab-panel.js

@@ -87,8 +87,8 @@ TabPanel.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tab/tab.js

@@ -213,8 +213,8 @@ TabItem.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tooltip/index.js

@@ -21,7 +21,11 @@ const {
     tooltip: fillTooltip
   }
 } = colors;
+import { useTheme } from '../../theme';
 const defaultViewPadding = 4;
+const {
+  zIndex
+} = useTheme();
 
 const getScrollTop = () => {
   var _ref, _ref2, _window$pageYOffset;
@@ -507,7 +511,7 @@ const arrowCSS = css`
     opacity: 0;
     transition: opacity 0.1s ease-in-out;
     width: 0;
-    z-index: 9005;
+    z-index: ${zIndex(5)};
 `;
 
 const mainCSS = (backgroundColor, color, size, padding, textAlign) => css`
@@ -524,7 +528,7 @@ const mainCSS = (backgroundColor, color, size, padding, textAlign) => css`
     opacity: 0;
     transition: opacity 0.1s ease-in-out;
     word-wrap: break-word;
-    z-index: 9004;
+    z-index: ${zIndex(4)};
 `;
 
 Tooltip.defaultProps = {

package/components/transfer/index.js

@@ -458,9 +458,9 @@ Transfer.propTypes = {
   /** field name used for icon display */
   iconExpr: string,
 
-  /** 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: oneOfType([string, array]),