diginet-core-ui 1.3.87-beta.2 → 1.3.87-beta.3

package/components/button/icon.js

@@ -124,6 +124,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: [_ButtonRootCSS, _ButtonSizeCSS, disabled && ButtonDisabledCSS],
       ref: ref,
       id: id,
+      disabled: disabled,
       style: style,
       onClick: _onClick,
       className: classNames('DGN-UI-ButtonIcon', viewType, getClassNameFromColor(colorProp), size, loading && 'button-icon--loading', className)

package/components/form-control/calendar/function.js

@@ -32,15 +32,15 @@ const {
   info8
 } = colors;
 
-/**
- * START STYLE
+/**
+ * START STYLE
  */
 
-/**
- *
- * @param {Object} unique
- * @param {Boolean} boxShadow
- * @returns
+/**
+ *
+ * @param {Object} unique
+ * @param {Boolean} boxShadow
+ * @returns
  */
 const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) => css`
     ${borderRadius4px}
@@ -243,15 +243,15 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
         }
     }
 `;
-/**
- * END STYLE
+/**
+ * END STYLE
  */
 
-/**
- *
- * @description return props of the typography.
- * @param {String} className
- * @returns {Object} props of the typography
+/**
+ *
+ * @description return props of the typography.
+ * @param {String} className
+ * @returns {Object} props of the typography
  */
 const typographyProps = className => {
   return {
@@ -270,11 +270,11 @@ const typographyProps = className => {
     type: 'h6'
   };
 };
-/**
- *
- * @description return props of the button icon.
- * @param {String} className
- * @returns {Object} props of the button icon
+/**
+ *
+ * @description return props of the button icon.
+ * @param {String} className
+ * @returns {Object} props of the button icon
  */
 const buttonIconProps = className => {
   return {
@@ -286,11 +286,11 @@ const buttonIconProps = className => {
     width: 28
   };
 };
-/**
- *
- * @description return props of the button icon.
- * @param {Function} fn
- * @returns {Object} props of the button text
+/**
+ *
+ * @description return props of the button icon.
+ * @param {Function} fn
+ * @returns {Object} props of the button text
  */
 const buttonTextProps = fn => {
   return {
@@ -306,43 +306,43 @@ const buttonTextProps = fn => {
   };
 };
 
-/**
- * @description detect value is a Date object
- * @param {String | Number | Array} value
- * @returns boolean
+/**
+ * @description detect value is a Date object
+ * @param {String | Number | Array} value
+ * @returns boolean
  */
 const isValidDate = value => {
   return new Date(value) instanceof Date && !isNaN(new Date(value));
 };
-/**
- *
- * @description set Sunday (0) to the last day of week.
- * @param {Date} date
- * @returns number of day from 0 (Monday) to 6 (Sunday).
+/**
+ *
+ * @description set Sunday (0) to the last day of week.
+ * @param {Date} date
+ * @returns number of day from 0 (Monday) to 6 (Sunday).
  */
 const getDateOfWeek = date => {
   let day = date.getDay();
   if (day === 0) day = 7;
   return day - 1;
 };
-/**
- *
- * @description check day is today.
- * @param {Date} day
- * @param {Date} today
- * @param {String} className
- * @returns {Boolean} is today
+/**
+ *
+ * @description check day is today.
+ * @param {Date} day
+ * @param {Date} today
+ * @param {String} className
+ * @returns {Boolean} is today
  */
 const isToday = (day, today, className) => {
   return +moment(day).diff(today) === 0 ? className : '';
 };
-/**
- *
- * @description check day is active day.
- * @param {Date} day
- * @param {Date} active
- * @param {String} className
- * @returns {Boolean} is active day
+/**
+ *
+ * @description check day is active day.
+ * @param {Date} day
+ * @param {Date} active
+ * @param {String} className
+ * @returns {Boolean} is active day
  */
 const isActive = (day, active, className) => {
   if (Array.isArray(active)) {
@@ -355,14 +355,14 @@ const isActive = (day, active, className) => {
   }
   return '';
 };
-/**
- *
- * @description check day is min/max day.
- * @param {Date} day
- * @param {Date} max
- * @param {Date} min
- * @param {Object} className
- * @returns {Boolean} is limited day
+/**
+ *
+ * @description check day is min/max day.
+ * @param {Date} day
+ * @param {Date} max
+ * @param {Date} min
+ * @param {Object} className
+ * @returns {Boolean} is limited day
  */
 const isLimit = (day, max, min, className) => {
   return isBeforeLimit(min, day) || isAfterLimit(max, day) ? className : '';
@@ -385,17 +385,17 @@ const isBeforeLimit = (min, time) => {
 const isAfterLimit = (max, time) => {
   return max && isValidDate(max) && moment(time).diff(new Date(max).setHours(0, 0, 0, 0)) > 0;
 };
-/**
- *
- * @description return the table body of the calendar.
- * @param {Date} time
- * @param {Date} activeValue
- * @param {Object} className
- * @param {Boolean} displayAnotherMonth
- * @param {Function} onTableDataClick
- * @param {Date} min
- * @param {Date} max
- * @returns {Element}
+/**
+ *
+ * @description return the table body of the calendar.
+ * @param {Date} time
+ * @param {Date} activeValue
+ * @param {Object} className
+ * @param {Boolean} displayAnotherMonth
+ * @param {Function} onTableDataClick
+ * @param {Date} min
+ * @param {Date} max
+ * @returns {Element}
  */
 const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTableDataClick, min, max) => {
   time = new Date(time);
@@ -412,8 +412,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
     weekDateFirst = getDateOfWeek(firstDay),
     weekDateLast = getDateOfWeek(lastDay);
   if (activeValue && Array.isArray(activeValue) && activeValue.length === 2 && activeValue[0] !== activeValue[1]) {
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
     active = activeValue;
     for (let i = weekDateFirst; i > 0; i--) {
@@ -428,8 +428,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         ...typographyProps(className.day.day)
       }, '')));
     }
-    /**
-     * days of this month
+    /**
+     * days of this month
      */
     for (let i = 0; i < lastDate; i++) {
       const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
@@ -442,8 +442,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         ...typographyProps(className.day.day)
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
     for (let i = 0; i < 20 - weekDateLast; i++) {
       const day = new Date(time.getFullYear(), time.getMonth() + 1,
@@ -458,8 +458,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       }, '')));
     }
   } else {
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
     for (let i = weekDateFirst; i > 0; i--) {
       const day = new Date(time.getFullYear(), time.getMonth() - 1, displayAnotherMonth ? prevDate - i + 1 : 1);
@@ -472,8 +472,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         ...typographyProps(className.day.day)
       }, displayAnotherMonth ? prevDate - i + 1 : '')));
     }
-    /**
-     * days of this month
+    /**
+     * days of this month
      */
     for (let i = 0; i < lastDate; i++) {
       const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
@@ -486,8 +486,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         ...typographyProps(className.day.day)
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
     for (let i = 0; i < 20 - weekDateLast; i++) {
       const day = new Date(time.getFullYear(), time.getMonth() + 1, displayAnotherMonth ? i + 1 : 6 - weekDateLast);
@@ -513,10 +513,10 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
   }
   return tableBody;
 };
-/**
- *
- * @param {Object} className
- * @returns
+/**
+ *
+ * @param {Object} className
+ * @returns
  */
 const renderHeader = className => {
   const weekdays = getGlobal(['weekdaysLong']);
@@ -535,15 +535,15 @@ const renderHeader = className => {
   }, tableHeader));
   return header;
 };
-/**
- *
- * @param {Object} className
- * @param {Object} refs
- * @param {Function} dbLeftFn
- * @param {Function} leftFn
- * @param {Function} rightFn
- * @param {Function} dbRightFn
- * @returns navigator
+/**
+ *
+ * @param {Object} className
+ * @param {Object} refs
+ * @param {Function} dbLeftFn
+ * @param {Function} leftFn
+ * @param {Function} rightFn
+ * @param {Function} dbRightFn
+ * @returns navigator
  */
 const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn, fn) => jsx("div", {
   className: className.navigator.navigator
@@ -580,22 +580,22 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
   onClick: dbRightFn,
   ref: refs.doubleRight
 })));
-/**
- *
- * @param {Date} time
- * @returns {String} month year
+/**
+ *
+ * @param {Date} time
+ * @returns {String} month year
  */
 const renderNavigatorContent = time => {
   const value = new Date(time);
   const months = getGlobal(['months', 'full']);
   return [months[value.getMonth()], value.getFullYear()];
 };
-/**
- *
- * @param {Date} time
- * @param {Object} refs
- * @param {Date} min
- * @param {Date} max
+/**
+ *
+ * @param {Date} time
+ * @param {Object} refs
+ * @param {Date} min
+ * @param {Date} max
  */
 const onUpdateNavigator = (time, refs, min, max) => {
   var _refs$doubleLeft$curr, _refs$doubleLeft$curr2, _refs$doubleRight$cur, _refs$doubleRight$cur2, _refs$left$current, _refs$left$current$in, _refs$right$current, _refs$right$current$i;
@@ -634,18 +634,18 @@ const onUpdateNavigator = (time, refs, min, max) => {
     }
   }
 };
-/**
- *
- * @param {Date} time
- * @param {Object} navigatorRefs
- * @param {Date} min
- * @param {Date} max
- * @param {Element} table
- * @param {Date} activeValue
- * @param {Object} className
- * @param {Boolean} displayAnotherMonth
- * @param {Function} onTableDataClick
- * @param {Function} onUpdateNavigatorValue
+/**
+ *
+ * @param {Date} time
+ * @param {Object} navigatorRefs
+ * @param {Date} min
+ * @param {Date} max
+ * @param {Element} table
+ * @param {Date} activeValue
+ * @param {Object} className
+ * @param {Boolean} displayAnotherMonth
+ * @param {Function} onTableDataClick
+ * @param {Function} onUpdateNavigatorValue
  */
 const onUpdateCalendar = (time, navigatorRefs, min, max, table, activeValue, className, displayAnotherMonth, onTableDataClick, onUpdateNavigatorValue) => {
   onUpdateNavigator(time, navigatorRefs, min, max);

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

@@ -298,10 +298,10 @@ Checkbox.propTypes = {
   labelProps: PropTypes.object,
   /** 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,
   /** If `true`, the component is readonly. */

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

@@ -191,11 +191,11 @@ Radio.propTypes = {
   className: PropTypes.string,
   /** 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,
   /** Prevent all event if true. */

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

@@ -226,10 +226,10 @@ Toggle.propTypes = {
   lineClamp: PropTypes.number,
   /** 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,
   /** If `true`, the label will indicate that the checkbox is required. */

package/components/grid/index.js

@@ -1,6 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
 import { boxBorder } from "../../styles/general";
@@ -232,4 +233,5 @@ Grid.propTypes = {
   /** 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 Grid;
+export { Grid };
+export default OptionWrapper(Grid);

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

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { useState, forwardRef, useEffect } from 'react';
 import { jsx } from '@emotion/core';
+import sx from "../../../styles/sx";
 const OptionWrapper = WrappedComponent => {
   return /*#__PURE__*/forwardRef((props, ref) => {
     const [options, setOptions] = useState({});
@@ -28,7 +29,8 @@ const OptionWrapper = WrappedComponent => {
       action: {
         option
       },
-      ref: ref
+      ref: ref,
+      css: sx(props === null || props === void 0 ? void 0 : props.sx)
     });
   });
 };

package/components/popover/index.js

@@ -131,6 +131,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   height,
   marginThreshold,
   onClose,
+  onOpen,
   open,
   pressESCToClose,
   style,
@@ -144,6 +145,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const arrowRef = useRef(null);
   const overflow = useRef(null);
+  const anchorRef = useRef(anchor);
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
   const _PortalPopoverCSS = PortalPopoverCSS(zIndex, fullScreen);
@@ -157,6 +159,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
   const onOpenPopover = () => {
     if (!openState) setOpenState(true);
+    onOpen && onOpen();
   };
   const onClosePopover = () => {
     if (openState) {
@@ -389,8 +392,12 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, []);
   useEffect(() => {
-    var _anchor8, _anchor9;
+    anchorRef.current = anchor;
+  }, [anchor]);
+  useEffect(() => {
+    var _anchor8, _anchor9, _anchorRef$current, _anchorRef$current$pr;
     const anchorEl = ((_anchor8 = anchor) === null || _anchor8 === void 0 ? void 0 : _anchor8.element) || ((_anchor9 = anchor) === null || _anchor9 === void 0 ? void 0 : _anchor9.current) || anchor;
+    if (anchorEl !== null && anchorEl !== void 0 && anchorEl.disabled || (_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && (_anchorRef$current$pr = _anchorRef$current.props) !== null && _anchorRef$current$pr !== void 0 && _anchorRef$current$pr.disabled) return;
     const eventArr = eventMap.get(trigger) || [];
     if (anchorEl && open === undefined && (eventArr === null || eventArr === void 0 ? void 0 : eventArr.length) > 0) {
       eventArr.forEach(evt => anchorEl.addEventListener(evt, handleEventTrigger, false));
@@ -398,7 +405,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         eventArr.forEach(evt => anchorEl.removeEventListener(evt, handleEventTrigger, false));
       };
     }
-  }, [trigger, openState]);
+  }, [anchor, trigger, openState]);
   useEffect(() => {
     if (open !== undefined) setOpenState(open);
   }, [open]);
@@ -554,9 +561,9 @@ Popover.defaultProps = {
 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, ref]),
-  /**
-   * 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']),
@@ -572,14 +579,14 @@ Popover.propTypes = {
   className: PropTypes.string,
   /** 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' }
-   * * bottom: 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' }
+   * * bottom: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
    */
   direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
   /** Height of the component. */
@@ -588,15 +595,17 @@ Popover.propTypes = {
   marginThreshold: PropTypes.number,
   /** Callback fired when the component requests to be closed. */
   onClose: PropTypes.func,
+  /** Callback fired when the component requests to be opened. */
+  onOpen: PropTypes.func,
   /** If `true`, the component is shown. */
   open: PropTypes.bool,
   /** If `true`, hitting escape will close component. */
   pressESCToClose: PropTypes.bool,
   /** 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']),
@@ -608,13 +617,13 @@ Popover.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** 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: ref
 };

package/components/rating/index.js

@@ -243,14 +243,14 @@ Rating.propTypes = {
   className: PropTypes.string,
   /** Style inline of component. */
   style: PropTypes.object,
-  /**
-  * Callback fired when the value changes.
-  * 
-   function(event: React.SyntheticEvent, value: number) => void
-  *
-  * event: The event source of the callback.
-  * 
-  * value: The new value.
+  /**
+  * Callback fired when the value changes.
+  * 
+    function(event: React.SyntheticEvent, value: number) => void
+  *
+  * event: The event source of the callback.
+  * 
+  * value: The new value.
   */
   onRating: PropTypes.func
 };

package/components/tab/tab-container.js

@@ -1,12 +1,11 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import React, { forwardRef, useState, memo, useEffect, useRef, useImperativeHandle, useMemo } from 'react';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { displayFlex, flexCol, flexRow, parseWidth, positionRelative, typographyTypes } from "../../styles/general";
 import { classNames, randomString, refType as ref } from "../../utils";
 import TabContext from "./context";
-import { isNumeric } from "../../utils/type";
-import { flexCol, flexRow, positionRelative, parseWidth, typographyTypes } from "../../styles/general";
 const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -18,6 +17,7 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const {
     value
@@ -31,7 +31,7 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (level === 'level2') level = 'p1';
   const _TabContainerCSS = TabContainerCSS(direction, width);
   useEffect(() => {
-    if (isNumeric(value)) setTabIndexState(value);else setTabIndexState(tabIndex);
+    if (typeof value === 'number') setTabIndexState(value);else setTabIndexState(tabIndex);
   }, [value, tabIndex]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -63,6 +63,7 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [children, className, direction, level, props, style, tabIndex, width, tabIndexState, value]);
 }));
 const TabContainerCSS = (direction, width) => css`
+    ${displayFlex};
     ${direction === 'vertical' ? flexRow : flexCol};
     ${positionRelative};
     ${parseWidth(width)};
@@ -92,8 +93,8 @@ TabContainer.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Any props else. */
   props: PropTypes.any,
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-header.js

@@ -1,16 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import React, { memo, forwardRef, useContext, useRef, useState, useImperativeHandle, useMemo } from 'react';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon } from "./..";
 import PropTypes from 'prop-types';
-import TabContext from "./context";
-import ButtonIcon from "../button/icon";
-import { boxBorder, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, parseWidth, parseWidthHeight, positionRelative, whiteSpaceNoWrap } from "../../styles/general";
+import React, { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { boxBorder, displayFlex, displayNone, flexCol, flexRow, justifyCenter, mg, overflowHidden, parseMaxWidth, parseWidth, parseWidthHeight, pd, positionRelative, selfCenter, whiteSpaceNoWrap } from "../../styles/general";
 import { classNames, refType as ref } from "../../utils";
-import theme from "../../theme/settings";
-const {
-  spacing
-} = theme;
+import TabContext from "./context";
 const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   centered,
@@ -26,15 +22,16 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const {
     direction
   } = useContext(TabContext);
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const [scrollLeft, setScrollLeft] = useState(0);
   const isVertical = direction === 'vertical';
   let showScrollLeftButton = !isVertical && scrollLeft > 0;
   let showScrollRightButton = !isVertical && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) + scrollLeft < (ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollWidth);
   const _ContainerCSS = ContainerCSS(centered, isVertical, width);
-  const _TabHeaderCSS = TabHeaderCSS(isVertical, width);
-  const scrollLeftButtonCSS = scrollButtonCSS(true, showScrollLeftButton, showScrollRightButton);
-  const scrollRightButtonCSS = scrollButtonCSS(false, showScrollLeftButton, showScrollRightButton);
+  const _TabHeaderCSS = TabHeaderCSS(width);
+  const ScrollLeftButtonCSS = ScrollButtonCSS(true, showScrollLeftButton, showScrollRightButton);
+  const ScrollRightButtonCSS = ScrollButtonCSS(false, showScrollLeftButton, showScrollRightButton);
   const _onClickScrollButton = scrollPrevious => {
     let scrollValue = scrollPrevious ? ref.current.scrollLeft - (ref.current.offsetWidth + 30) : ref.current.scrollLeft + (ref.current.offsetWidth + 30);
     ref.current.scrollLeft = scrollValue;
@@ -58,7 +55,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: style,
       ...props
     }, scrollButtons && !isVertical && jsx(ButtonIcon, {
-      css: scrollLeftButtonCSS,
+      css: ScrollLeftButtonCSS,
       name: isVertical ? 'ArrowUp' : 'ArrowLeft',
       viewType: 'text',
       size: 'tiny',
@@ -66,7 +63,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disabled: !showScrollLeftButton,
       onClick: () => _onClickScrollButton(true)
     }), jsx("div", {
-      css: _TabHeaderCSS,
+      css: [_TabHeaderCSS, !isVertical && TabHeaderHorizontalCSS],
       className: 'DGN-UI-Tab-Header',
       ref: ref,
       onScroll: e => {
@@ -76,7 +73,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
       level
     }))), scrollButtons && !isVertical && jsx(ButtonIcon, {
-      css: scrollRightButtonCSS,
+      css: ScrollRightButtonCSS,
       name: isVertical ? 'ArrowDown' : 'ArrowRight',
       viewType: 'text',
       size: 'tiny',
@@ -87,45 +84,41 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [centered, children, className, level, props, scrollButtons, style, width, direction, isVertical, scrollLeft]);
 }));
 const ContainerCSS = (centered, isVertical, width) => css`
-    ${flexRow};
+    ${displayFlex};
     ${overflowHidden};
     ${positionRelative};
     ${boxBorder};
     ${parseWidthHeight(width, 'auto')};
     ${centered && justifyCenter};
-    flex-direction: ${isVertical ? 'column' : 'row'};
-    max-width: ${isVertical ? 'max-content' : '100%'};
-    padding: 0;
+    ${isVertical ? flexCol : flexRow};
+    ${parseMaxWidth(isVertical ? 'max-content' : '100%')};
+    ${pd(0)};
 `;
-const TabHeaderCSS = (isVertical, width) => isVertical ? css`
-              ${flexCol};
-              ${parseWidth(width)};
-          ` : css`
-              ${flexRow};
-              ${positionRelative};
-              ${whiteSpaceNoWrap};
-              ${parseWidth(width)};
-              margin: 0;
-              overflow-x: auto;
-              scroll-behavior: smooth;
-              scroll-snap-type: x mandatory;
-              scroll-padding: 50%;
-              transition: 0.3s ease-in-out 0.3s;
-              &::-webkit-scrollbar {
-                  ${displayNone};
-              }
-          `;
-const scrollButtonCSS = (scrollPrevious, showScrollLeftButton, showScrollRightButton) => css`
+const TabHeaderCSS = width => css`
+    ${displayFlex};
+    ${flexCol};
+    ${parseWidth(width)};
+`;
+const TabHeaderHorizontalCSS = css`
+    ${flexRow};
+    ${positionRelative};
+    ${whiteSpaceNoWrap};
+    ${mg(0)};
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+    scroll-padding: 50%;
+    transition: 0.3s ease-in-out 0.3s;
+    &::-webkit-scrollbar {
+        ${displayNone};
+    }
+`;
+const ScrollButtonCSS = (scrollPrevious, showScrollLeftButton, showScrollRightButton) => css`
     ${parseWidthHeight(24, 24)};
+    ${selfCenter};
+    ${mg(scrollPrevious ? [0, 2, 0, 0] : [0, 0, 0, 2])}
     overflow: initial;
-    align-self: center;
-    margin: ${scrollPrevious ? spacing([0, 2, 0, 0]) : spacing([0, 0, 0, 2])};
     opacity: ${scrollPrevious && showScrollLeftButton || !scrollPrevious && showScrollRightButton ? '1' : '0'};
-    :disabled {
-        span {
-            cursor: default !important;
-        }
-    }
 `;
 TabHeader.defaultProps = {
   centered: false,
@@ -149,8 +142,8 @@ TabHeader.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Any props else. */
   props: PropTypes.any,
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-panel.js

@@ -1,20 +1,11 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, forwardRef, useContext, useRef, useEffect, useState, useImperativeHandle, useMemo } from 'react';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import TabContext from "./context";
-import { boxBorder, displayNone, flexCol, parseWidthHeight, positionRelative } from "../../styles/general";
-import theme from "../../theme/settings";
+import { forwardRef, memo, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { boxBorder, displayFlex, displayNone, flexCol, parseWidthHeight, pd, positionRelative, textColor } from "../../styles/general";
 import { classNames, refType as ref } from "../../utils";
-const {
-  colors: {
-    text: {
-      main
-    }
-  },
-  spacing
-} = theme;
+import TabContext from "./context";
 const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -28,6 +19,7 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     tabIndexState,
     direction
   } = useContext(TabContext);
+  if (!reference) reference = useRef(null);
   const [isRendered, setIsRendered] = useState(false);
   const ref = useRef(null);
   const isVertical = direction === 'vertical';
@@ -60,13 +52,14 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [children, className, index, lazyLoading, props, style, isActive, isRendered, tabIndexState]);
 }));
 const TabPanelCSS = (isVertical, isActive) => css`
+    ${displayFlex};
     ${flexCol};
     ${boxBorder};
     ${positionRelative};
     ${isActive ? flexCol : displayNone};
-    ${parseWidthHeight('100%', isVertical ? 300 : '100%')}
-    color: ${main};
-    padding: ${spacing([0, isVertical ? 3 : 2.5])};
+    ${parseWidthHeight('100%', isVertical ? 300 : '100%')};
+    ${textColor('text.main')};
+    ${pd([0, isVertical ? 3 : 2.5])};
 `;
 TabPanel.defaultProps = {
   className: '',
@@ -86,8 +79,8 @@ TabPanel.propTypes = {
   style: PropTypes.object,
   /** Any props else. */
   props: PropTypes.any,
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab.js

@@ -1,26 +1,13 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { forwardRef, memo, useMemo, useContext, useRef, useImperativeHandle } from 'react';
-import { jsx, css } from '@emotion/core';
-import PropTypes from 'prop-types';
-import Icon from "../../icons";
-import { useTheme, useColor as colors } from "../../theme";
+import { css, jsx } from '@emotion/core';
+import { Icon, Typography } from "./..";
 import Ripple from "../button/ripple-effect";
-import Typography from "../typography";
-import TabContext from "./context";
-import { itemsCenter, bgTransparent, boxBorder, shadowNone, breakWord, cursorDefault, cursorPointer, flexRow, justifyCenter, justifyStart, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative, textCenter, whiteSpaceNoWrap } from "../../styles/general";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
+import { bgColor, bgTransparent, borderRadius, boxBorder, breakWord, cursorDefault, cursorPointer, displayFlex, flexRow, itemsCenter, justifyCenter, justifyStart, mgl, mgr, outlineNone, overflowHidden, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, pd, pointerEventsAuto, pointerEventsNone, positionAbsolute, positionRelative, shadowNone, textCenter, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
 import { classNames, refType as ref } from "../../utils";
-const {
-  colors: {
-    system: {
-      active,
-      disabled: systemDisabled,
-      rest,
-      white
-    }
-  },
-  spacing
-} = useTheme();
+import TabContext from "./context";
 const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -42,13 +29,16 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setTabIndexState,
     direction
   } = useContext(TabContext);
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
+  const rippleRef = useRef(null);
   const isVertical = direction === 'vertical';
-  const _TabButtonCSS = TabButtonCSS(color, isVertical);
+  const _TabItemCSS = TabItemCSS(color, isVertical);
   const _IndicatorCSS = IndicatorCSS(isVertical);
-  const _onClick = event => {
+  const _onClick = e => {
     if (disabled) return;
-    onClick ? onClick(event, index) : setTabIndexState(index);
+    rippleRef.current.start(e);
+    onClick ? onClick(e, index) : setTabIndexState(index);
   };
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -60,50 +50,44 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  const StartIcon = useMemo(() => {
-    let node = startIcon;
-    if (typeof node === 'string') {
-      node = jsx(Icon, {
-        color: 'currentColor',
-        name: startIcon
-      });
-    }
-    return jsx("span", {
-      css: ButtonIconCSS
-    }, " ", node, " ");
-  }, [startIcon]);
-  const EndIcon = useMemo(() => {
-    let node = endIcon;
+  const renderIcon = (icon, isEndIcon) => {
+    let node = icon;
     if (typeof node === 'string') {
       node = jsx(Icon, {
         color: 'currentColor',
-        name: endIcon
+        name: icon
       });
     }
     return jsx("span", {
-      css: ButtonIconCSS,
-      className: 'end-icon'
-    }, ' ', node, ' ');
-  }, [endIcon]);
+      css: IconCSS,
+      className: isEndIcon ? 'end-icon' : ''
+    }, node);
+  };
   return useMemo(() => {
     return jsx("div", {
-      css: _TabButtonCSS,
+      css: [_TabItemCSS, disabled && TabItemDisabledCSS, index === tabIndexState && !disabled && TabItemSelectedCSS],
       ref: ref,
       className: classNames('DGN-UI-Tab-Item', disabled && 'disabled', index === tabIndexState && !disabled && 'selected', className),
       style: style,
       onClick: _onClick,
       ...props
-    }, startIcon && StartIcon, jsx(Typography, {
-      ...labelProps,
+    }, startIcon && renderIcon(startIcon), jsx(Typography, {
       type: level,
-      color: 'inherit'
-    }, label), children, endIcon && EndIcon, jsx(Ripple, null), jsx("span", {
+      color: 'inherit',
+      lineClamp: 1,
+      hoverTooltip: true,
+      ...labelProps
+    }, label), children, endIcon && renderIcon(endIcon, true), jsx(Ripple, {
+      ref: rippleRef,
+      css: pointerEventsNone
+    }), jsx("span", {
       css: _IndicatorCSS,
       className: 'Indicator'
     }));
   }, [children, className, color, disabled, endIcon, index, label, labelProps, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
 }));
-const TabButtonCSS = (color, isVertical) => css`
+const TabItemCSS = (color, isVertical) => css`
+    ${displayFlex};
     ${flexRow};
     ${overflowHidden};
     ${itemsCenter};
@@ -116,65 +100,66 @@ const TabButtonCSS = (color, isVertical) => css`
     ${whiteSpaceNoWrap};
     ${shadowNone};
     ${!isVertical && textCenter};
+    ${bgColor('system.white')};
+    ${textColor(color)};
+    ${parseMinWidth(80)};
+    ${parseMaxWidth(isVertical ? '100%' : 287)};
+    ${pd(isVertical ? [3.5, 4] : [2, 4])}
+    ${pointerEventsAuto};
+    ${userSelectNone};
     flex: 0 0 auto;
-    background-color: ${white};
     border: 0;
-    color: ${colors[color] || color || rest};
-    max-width: ${isVertical ? '100%' : '287px'};
-    min-width: 80px;
-    padding: ${isVertical ? spacing([3.5, 4]) : spacing([2.5, 4])};
-    pointer-events: auto;
     transition: all 0.2s ease-in-out, background-color 0.2s ease-in-out;
-    &.disabled {
-        ${pointerEventsNone};
-        ${bgTransparent};
-        ${cursorDefault};
-        color: ${systemDisabled};
-    }
-    :hover,
-    :focus:not(.selected):not(:disabled) {
-        background-color: ${white};
-        color: ${rest};
+    :hover:not(.selected):not(.disabled),
+    :focus {
+        ${bgColor('system.white')};
+        ${textColor('system.rest')};
         .Indicator {
-            background-color: ${rest};
+            ${bgColor('system.rest')};
             transform: scale(1);
         }
     }
-    &.selected {
-        background-color: ${white};
-        color: ${active};
-        .Indicator {
-            background-color: ${active};
-            transform: scale(1);
-        }
+`;
+const TabItemDisabledCSS = css`
+    ${pointerEventsNone};
+    ${bgTransparent};
+    ${cursorDefault};
+    ${textColor('system.disabled')};
+`;
+const TabItemSelectedCSS = css`
+    ${bgColor('system.white')};
+    ${textColor('system.active')};
+    .Indicator {
+        ${bgColor('system.active')};
+        transform: scale(1);
     }
 `;
 const IndicatorCSS = isVertical => css`
     ${positionAbsolute};
-    height: ${isVertical ? '100%' : '4px'};
-    width: ${isVertical ? '4px' : '100%'};
+    ${parseHeight(isVertical ? '100%' : 4)};
+    ${parseWidth(isVertical ? 4 : '100%')}
+    ${borderRadius(1)};
     bottom: 0;
     left: 0;
     transform: ${isVertical ? 'scaleY(0)' : 'scaleX(0)'};
     transition: transform 0.2s ease-in-out;
-    border-radius: 1px;
 `;
-const ButtonIconCSS = css`
+const IconCSS = css`
     ${flexRow};
     ${itemsCenter};
     ${justifyCenter};
     ${positionRelative};
     ${boxBorder};
-    max-height: 24px;
-    max-width: 24px;
-    margin-right: ${spacing([1])};
+    ${parseMaxWidthHeight(24)};
+    ${mgr([1])};
     &.end-icon {
-        margin-right: unset;
-        margin-left: ${spacing([1])};
+        ${mgr('unset')};
+        ${mgl([1])};
     }
 `;
 TabItem.defaultProps = {
   className: '',
+  color: 'system.rest',
   disabled: false,
   label: '',
   style: {}

package/components/transfer/index.js

@@ -416,9 +416,9 @@ Transfer.propTypes = {
   height: oneOfType([string, number]),
   /** 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]),
   /** display header to select all choices if true */

package/package.json

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

package/styles/general.js

@@ -390,7 +390,7 @@ const userSelectNone = css`
     user-select: none;
 `;
 const whiteSpaceBreakSpaces = css`
-    white-space: break-space;
+    white-space: break-spaces;
 `;
 const whiteSpaceNoWrap = css`
     white-space: nowrap;

package/styles/sx/index.js

@@ -0,0 +1,23 @@
+import { css } from '@emotion/core';
+import { handleBreakpoints } from "../../utils";
+const cssKeyMap = new Map([['display', 'display']]);
+const sx = prop => {
+  if (typeof prop !== 'object' || Array.isArray(prop) || prop === null) return null;
+  let sxStyleCSS = '';
+  Object.keys(prop).forEach(key => {
+    const cssKey = cssKeyMap.get(key);
+    if (!cssKey) return null;
+    sxStyleCSS += handleBreakpoints(prop[key], propValue => {
+      if (propValue) {
+        return `
+                        ${cssKey}: ${propValue};
+                    `;
+      }
+      return '';
+    });
+  });
+  return css`
+        ${sxStyleCSS}
+    `;
+};
+export default sx;