diginet-core-ui 1.3.90-beta.4 → 1.3.90-beta.6

package/components/button/icon.js

@@ -321,14 +321,14 @@ ButtonIcon.propTypes = {
   onClick: PropTypes.func,
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * 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)
+  /**
+   * 	The size of the component.
+   *
+   * * 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', 'extraGiant']),
   /** Style inline of component. */
@@ -339,19 +339,19 @@ ButtonIcon.propTypes = {
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * 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 (ref.current.instance.*method*)
+   *
+   * * 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: ref
 };

package/components/form-control/date-picker/index.js

@@ -1,35 +1,28 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-
 import { css, jsx } from '@emotion/core';
+import { Button, ButtonIcon, HelperText, InputBase, Label, Tooltip } from "../..";
+import { getGlobal } from "../../../global";
+import locale from "../../../locale";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { render } from 'react-dom';
-import { getGlobal } from "../../../global";
-import { date as moment, capitalizeSentenceCase, randomString, updatePosition } from "../../../utils";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexRow, itemsCenter, justifyEnd, left, mg, parseMaxWidth, parseMinWidth, parseWidthHeight, positionFixed, scale, top, z } from "../../../styles/general";
+import { useTheme } from "../../../theme";
+import { capitalizeSentenceCase, date as moment, randomString, updatePosition } from "../../../utils";
 import CalendarComp from "../calendar";
-import ControlComp from "../control";
-import { ButtonIcon, HelperText, InputBase, Label } from "../../index";
-import Button from "../../button";
-import Tooltip from "../../tooltip";
 import { isValidDate } from "../calendar/function";
-import { itemsCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexRow, justifyEnd, parseWidth, positionFixed } from "../../../styles/general";
-import theme from "../../../theme/settings";
+import ControlComp from "../control";
 const {
-  colors: {
-    system: {
-      white
-    }
-  },
-  spacing,
   zIndex: zIndexCORE
-} = theme;
+} = useTheme();
 const confirmText = getGlobal(['confirm']);
 const cancelText = getGlobal(['cancel']);
 const formatValue = (value, format, utc = false) => {
   return moment(value).format(format, utc);
 };
 const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   actionIconAt,
   clearAble,
   controls,
@@ -153,16 +146,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
     return PickerCSS.picker(style, left + 400 > innerWidth ? innerWidth - 400 : left, width).styles;
   };
-  // const createPortal = () => {
-  //     let portal = document.getElementById(unique.portal);
-  //     if (!portal) {
-  //         portal = document.createElement('div');
-  //         portal.id = unique.portal;
-  //         document.body.appendChild(portal);
-  //     }
-  //     portal.style.cssText = pickerCSS.portal;
-  //     return portal;
-  // };
   const createBackground = () => {
     let background = document.getElementById(unique.backGr);
     if (!background) {
@@ -256,26 +239,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     // iconRef.current && onSwap(true);
     ipRef.current && ipRef.current.blur();
   };
-  // const updatePicker = () => {
-  //     const portal = document.body.querySelector(`#${unique.portal}`);
-  //     if (!portal) return;
-  //     const backGr = portal.querySelector(`#${unique.backGr}`);
-  //     if (!backGr) return;
-  //     const node = portal.querySelector(`#${unique.picker}`);
-  //     if (!node || !node.firstChild) return;
-  //     unmountComponentAtNode(node);
-  //     render(
-  //         <CalendarComp
-  //             ref={calRef}
-  //             actions={footerMemo}
-  //             defaultValue={displayValue.current}
-  //             value={focusedValue.current}
-  //             max={max}
-  //             min={min}
-  //             displayAnotherMonth={displayAnotherMonth}
-  //             onClick={onCalendarClick}
-  //         />, node);
-  // };
   const onSwap = open => {
     const t = iconRef.current.childNodes[+open];
     if (open) {
@@ -448,6 +411,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {
+      ...action,
       get: () => {
         return ref.current;
       },
@@ -479,11 +443,11 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     error: isError,
     ref: ref,
     style: style
-  }, !!label && jsx(Label, {
+  }, label ? jsx(Label, {
     disabled: disabled,
     required: required,
     ...labelProps
-  }, label), jsx(Tooltip, {
+  }, label) : null, jsx(Tooltip, {
     title: (ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current = ipRef.current) === null || _ipRef$current === void 0 ? void 0 : _ipRef$current.clientWidth) < 200 ? ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current2 = ipRef.current) === null || _ipRef$current2 === void 0 ? void 0 : _ipRef$current2.value : ''
   }, jsx(InputBase, {
     inputProps: {
@@ -502,7 +466,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     endIcon: endIcon,
     onKeyDown: e => e.preventDefault(),
     readOnly: true
-  })), isError && jsx(HelperText, {
+  })), isError ? jsx(HelperText, {
     ...errorProps,
     style: {
       minHeight: 16,
@@ -510,7 +474,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       top: '100%'
     },
     disabled: disabled
-  }, error));
+  }, error) : null);
 }));
 const hiddenStyle = {
   opacity: 0,
@@ -522,6 +486,7 @@ const activeStyle = {
   display: 'block'
 };
 const IconAreaCSS = unique => css`
+    ${displayFlex};
     ${flexRow};
     ${itemsCenter};
     color: inherit;
@@ -538,27 +503,28 @@ const IconAreaCSS = unique => css`
     }
 `;
 const ControlContainerCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${justifyEnd};
-    margin: ${spacing([0, 4, 4])};
+    ${mg([0, 4, 4])};
 `;
 const PickerCSS = {
   backGr: `background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: ${zIndexCORE(1)};`,
-  picker: (position, left, width) => css`
+  picker: (position, positionLeft, width) => css`
         ${positionFixed};
         ${borderRadius4px};
-        ${parseWidth(width)};
-        background-color: ${white};
-        height: max-content;
-        left: ${left}px;
-        top: ${position.top}px;
+        ${bgColor('system.white')};
+        ${parseWidthHeight(width, 'max-content')};
+        ${parseMinWidth(window.innerWidth <= 599 ? 280 : 314)};
+        ${parseMaxWidth(400)};
+        ${scale(0)};
+        ${left(positionLeft)};
+        ${top(position.top)};
         transform-origin: ${position.transformOrigin};
-        max-width: 400px;
-        min-width: ${window.innerWidth <= 599 ? 280 : 314}px;
         opacity: 0;
         transform: scale(0);
         transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        z-index: ${zIndexCORE(2)};
+        ${z(2)};
     `,
   active: {
     opacity: 1,
@@ -576,12 +542,12 @@ DatePicker.defaultProps = {
   controls: false,
   disabled: false,
   displayAnotherMonth: true,
-  displayFormat: 'dddd, DD MMMM YYYY',
+  displayFormat: locale.get() === 'vi' ? 'DD/MM/YYYY' : 'MM/DD/YYYY',
   pressESCToClose: true,
   readOnly: false,
   required: false,
-  textAlign: 'start',
   returnFormat: 'YYYY-MM-DD',
+  textAlign: 'start',
   viewType: 'underlined'
 };
 DatePicker.propTypes = {

package/components/form-control/date-range-picker/index.js

@@ -7,17 +7,12 @@ import locale from "../../../locale";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { render } from 'react-dom';
-import { itemsCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexCol, flexRow, justifyEnd, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pointerEventsNone, positionFixed, textCenter, userSelectNone, whiteSpaceNoWrap } from "../../../styles/general";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, parseWidthHeight, pd, pointerEventsNone, positionFixed, textCenter, top, userSelectNone, whiteSpaceNoWrap } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { capitalizeSentenceCase, classNames, date as moment, isEqual, randomString, updatePosition } from "../../../utils";
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
 import ControlComp from "../control";
 const {
-  colors: {
-    system: {
-      white: systemWhite
-    }
-  },
   boxShadows: {
     large: boxShadowsLarge
   },
@@ -811,32 +806,11 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (ipRef.current.value !== '') {
       update(values.current);
     }
-    // if (disabled) {
-    //     iconRef.current.childNodes[0].style.pointerEvents = 'none';
-    //     closePicker();
-    // } else if (!readOnly) {
-    //     ipRef.current.addEventListener('focus', onInputFocus);
-    // } else {
-    //     iconRef.current.childNodes[0].style.pointerEvents = 'none';
-    //     closePicker();
-    // }
-
     if (isEnable) {
-      // iconRef.current.childNodes[0].style.pointerEvents = 'none';
       closePicker();
     }
     return () => {
       if (!iconRef.current || !ipRef.current) return;
-      // if (disabled) {
-      //     iconRef.current.childNodes[0].style.pointerEvents = null;
-      // } else if (!readOnly) {
-      //     ipRef.current.removeEventListener('focus', onInputFocus);
-      // } else {
-      //     iconRef.current.childNodes[0].style.pointerEvents = null;
-      // }
-      // if (isEnable) {
-      //     iconRef.current.childNodes[0].style.pointerEvents = null;
-      // }
       closePicker();
     };
   }, [actionIconAt, clearAble, controls, disabled, displayFormat, max, min, pressESCToClose, readOnly, startFromZero, unitCount, viewType]);
@@ -861,7 +835,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClick: triggerFocus,
     className: `${unique.icon} ${unique.icon}-accept`,
     viewBox: true,
-    name: 'CalendarNew'
+    name: 'Calendar'
   }), jsx(ButtonIcon, {
     viewType: 'ghost',
     onClick: onClear,
@@ -911,7 +885,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: unique.tooltip,
     ref: tooltipRef
   }, jsx(Typography, {
-    color: systemWhite,
+    color: 'system.white',
     type: 'p2'
   }));
   const pickerComp = jsx("div", {
@@ -1021,13 +995,6 @@ const buttonProps = {
   }
 };
 const IconAreaCSS = css`
-    ${flexRow};
-    ${itemsCenter};
-    ${parseWidth(24)};
-    color: inherit;
-    & span {
-        padding: 0;
-    }
     .${unique.icon} {
         ${displayNone};
         ${cursorPointer};
@@ -1041,9 +1008,10 @@ const IconAreaCSS = css`
     }
 `;
 const ControlContainerCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${justifyEnd};
-    margin: ${spacing([0, 4, 4])};
+    ${mg([0, 4, 4])};
 `;
 const pickerCSS = {
   backGr: `
@@ -1052,11 +1020,13 @@ const pickerCSS = {
         position: fixed; 
         z-index: ${zIndexCORE(1)};`,
   container: css`
+        ${displayFlex};
         ${flexCol};
         ${borderRadius4px};
-        background-color: ${systemWhite};
+        ${bgColor('system.white')};
         box-shadow: ${boxShadowsLarge};
         .${unique.wrapper} {
+            ${displayFlex};
             ${flexRow};
             ${parseMinWidth(633)};
         }
@@ -1069,8 +1039,8 @@ const pickerCSS = {
             ${whiteSpaceNoWrap};
             ${parseHeight(18)};
             ${parseMinWidth(65)};
-            background-color: rgba(21, 26, 48, 0.9);
-            padding: ${spacing([0.75, 1.5])};
+            ${bgColor('rgba(21, 26, 48, 0.9)')};
+            ${pd([0.75, 1.5])};
             transition: left 0.05s ease-in, top 0.05s ease-in;
             vertical-align: middle;
             visibility: hidden;
@@ -1080,7 +1050,8 @@ const pickerCSS = {
         @media only screen and (max-width: 599px) {
             ${parseMaxWidth(400)};
             .${unique.wrapper} {
-                flex-direction: column;
+                ${displayFlex};
+                ${flexCol};
                 ${parseMinWidth(260)};
             }
             .${unique.divider} {
@@ -1096,8 +1067,8 @@ const pickerCSS = {
         ${parseWidthHeight(width, 'max-content')};
         ${parseMinWidth(window.innerWidth <= 633 ? 300 : 633)};
         ${parseMaxWidth(805)};
-        top: ${position.top}px;
-        left: ${position.left}px;
+        ${top(position.top)};
+        ${left(position.left)};
         opacity: 0;
         transform: scale(0);
         transform-origin: ${position.transformOrigin};
@@ -1138,8 +1109,6 @@ DateRangePicker.propTypes = {
   clearAble: PropTypes.bool,
   /** If `true`, the calendar will have a footer controls. */
   controls: PropTypes.bool,
-  /** The count unit when select. */
-  unitCount: PropTypes.oneOf(['day', 'night']),
   /** Default value of the component. */
   defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date)), PropTypes.arrayOf(PropTypes.string)]),
   /** If `true`, the component is disabled. */
@@ -1158,10 +1127,10 @@ DateRangePicker.propTypes = {
   label: PropTypes.string,
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
   labelProps: PropTypes.object,
-  /** Min value of date picker. */
-  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   /** Max value of date picker. */
   max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  /** Min value of date picker. */
+  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   /** Callback fired when the value is changed. */
   onChange: PropTypes.func,
   /** The short hint displayed in the input before the user enters a value. */
@@ -1182,6 +1151,8 @@ DateRangePicker.propTypes = {
   style: PropTypes.object,
   /** Text align of the input. */
   textAlign: PropTypes.oneOf(['center', 'end', 'start']),
+  /** The count unit when select. */
+  unitCount: PropTypes.oneOf(['day', 'night']),
   /** The value of the input element, required for a controlled component. String must be [Date string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date): YYYY/MM/DD, MM/DD/YYYY,...*/
   value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])),
   /** The variant to use. */

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

@@ -77,13 +77,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   }
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
 
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
   const parseNumberToMoney = useCallback((vl, isNumber) => {
     var _number, _number2, _number$, _number3;
@@ -114,13 +114,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     return number;
   }, [decimalSymbol, max, value]);
 
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
     var _number4, _number4$toString, _number4$toString$rep, _number4$toString$rep2, _number4$toString$rep3;
@@ -414,10 +414,10 @@ NumberInput.propTypes = {
   style: PropTypes.object,
   /** Thousand separator character. */
   thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
-  /** 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]),
   /** The value of the input element, required for a controlled component. */

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/popup/v2/index.js

@@ -8,7 +8,7 @@ import { forwardRef, Fragment, memo, useCallback, useEffect, useImperativeHandle
 import { createPortal } from 'react-dom';
 import { animations } from "../../../styles/animation";
 import { hexToRGBA } from "../../../styles/color-helper";
-import { bgColor, border, borderRadius, borderRadius50, boxBorder, breakWord, cursorPointer, displayBlock, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyCenter, justifyEnd, mg, mgb, mgr, mgt, overflowAuto, overflowHidden, parseHeight, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, pd, positionFixed, positionRelative, textColor, textEllipsis, textunderline, truncate, z } from "../../../styles/general";
+import { bgColor, border, borderRadius, borderRadius50, boxBorder, breakWord, cursorPointer, displayBlock, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyCenter, justifyEnd, mg, mgb, mgr, mgt, overflowAuto, overflowHidden, parseHeight, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, pd, positionFixed, positionRelative, textColor, textEllipsis, textUnderline, truncate, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { classNames, refType as ref, useDelayUnmount } from "../../../utils";
 const {
@@ -327,7 +327,7 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
                     ${parseWidth('fit-content')};
                     ${mgt([4])};
                     ${mgb([type === 'yesno' ? 0 : 2])};
-                    ${textunderline};
+                    ${textUnderline};
                     ${textColor('semantic.info')};
                 }
             }

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

@@ -93,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

@@ -142,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

@@ -79,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

@@ -189,8 +189,8 @@ TabItem.propTypes = {
   style: PropTypes.object,
   /** Any props else. */
   props: PropTypes.any,
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

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/components/typography/index.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/core';
 import { Popover } from "./..";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { breakAll, breakWord, cursorPointer, displayBlock, displayInlineBlock, italic, overflowHidden, parseHeight, parseMaxWidth, parseMinWidth, pd, positionRelative, textCapitalize, textCenter, textColor, textLineThrough, textLowercase, textunderline, textUppercase, whiteSpaceBreakSpaces } from "../../styles/general";
+import { breakAll, breakWord, cursorPointer, displayBlock, displayInlineBlock, italic, overflowHidden, parseHeight, parseMaxWidth, parseMinWidth, pd, positionRelative, textCapitalize, textCenter, textColor, textLineThrough, textLowercase, textUnderline, textUppercase, whiteSpaceBreakSpaces } from "../../styles/general";
 import { useTheme, useTypography as typography } from "../../theme";
 import { classNames, renderHTML } from "../../utils";
 const {
@@ -18,7 +18,7 @@ const {
   }
 } = useTheme();
 const colorMap = new Map([['default', textMain]]);
-const formatMap = new Map([['capitalize', textCapitalize], ['uppercase', textUppercase], ['lowercase', textLowercase], ['italic', italic], ['line-through', textLineThrough], ['underline', textunderline]]);
+const formatMap = new Map([['capitalize', textCapitalize], ['uppercase', textUppercase], ['lowercase', textLowercase], ['italic', italic], ['line-through', textLineThrough], ['underline', textUnderline]]);
 const isTextClamped = elm => (elm === null || elm === void 0 ? void 0 : elm.scrollHeight) > (elm === null || elm === void 0 ? void 0 : elm.clientHeight);
 const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -143,16 +143,16 @@ Typography.defaultProps = {
   type: 'p1'
 };
 
-/** type of text<br/>
- * h1: Title <br/>
- * h2: Header Popup <br/>
- * h3: Header popup <br/>
- * h4: Button, Tab, Title group <br/>
- * h5: Label column, Title group <br/>
- * h6: Label form <br/>
- * p1: Body text <br/>
- * p2: Body text <br/>
- * p3: Notice, Tooltip <br/>
+/** type of text<br/>
+ * h1: Title <br/>
+ * h2: Header Popup <br/>
+ * h3: Header popup <br/>
+ * h4: Button, Tab, Title group <br/>
+ * h5: Label column, Title group <br/>
+ * h6: Label form <br/>
+ * p1: Body text <br/>
+ * p2: Body text <br/>
+ * p3: Notice, Tooltip <br/>
  */
 export const arrTypeTypography = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
 Typography.propTypes = {

package/package.json

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

package/styles/general.js

@@ -413,7 +413,7 @@ const textLowercase = css`
 const textRight = css`
     text-align: right;
 `;
-const textunderline = css`
+const textUnderline = css`
     text-decoration: underline;
 `;
 const textUppercase = css`
@@ -445,4 +445,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textunderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };

package/styles/utils.js

@@ -1,31 +1,31 @@
 import { color as colors } from "./colors";
 
-/**
- * Parse css value
- *
- * @param {string | number} vl
- * @returns {string | number}
+/**
+ * Parse css value
+ *
+ * @param {string | number} vl
+ * @returns {string | number}
  */
 export const parseCSSValue = vl => {
   return isNaN(vl) ? vl : vl + 'px';
 };
 
-/**
- * Parse to pixel
- *
- * @param {number} vl
- * @returns {string}
+/**
+ * Parse to pixel
+ *
+ * @param {number} vl
+ * @returns {string}
  */
 export const parseToPixel = vl => {
   if (!vl) return '1px';
   return typeof vl === 'string' ? vl : `${vl}px`;
 };
 
-/**
- * Get color from CORE colors
- *
- * @param {string} cl
- * @returns {string}
+/**
+ * Get color from CORE colors
+ *
+ * @param {string} cl
+ * @returns {string}
  */
 export const getColor = cl => {
   if (typeof cl !== 'string') return;