diginet-core-ui 1.3.95 → 1.3.96

package/components/alert/notify.js

@@ -104,9 +104,9 @@ Notify.defaultProps = {
 Notify.propTypes = {
   /** Class for component. */
   className: PropTypes.string,
-  /**
-   * used to set position of Alert (is a string or an object)
-   * string is center (obligatory) as {vertical: 'center', horizontal: 'center'}
+  /**
+   * used to set position of Alert (is a string or an object)
+   * string is center (obligatory) as {vertical: 'center', horizontal: 'center'}
    */
   position: PropTypes.oneOfType([PropTypes.oneOf(['center']), PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
@@ -116,13 +116,13 @@ Notify.propTypes = {
   style: PropTypes.object,
   /** Any [props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) of Alert */
   props: PropTypes.any
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show(message, option): Show notify
-   *  * @param {message} - number
-   *  * @param {options} - object
-   *      * {[Props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) applied to the `Alert`.}
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * show(message, option): Show notify
+   *  * @param {message} - number
+   *  * @param {options} - object
+   *      * {[Props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) applied to the `Alert`.}
    */
 };
 

package/components/badge/index.js

@@ -201,28 +201,28 @@ Badge.propTypes = {
   name: PropTypes.string,
   /** Controls whether the badge is hidden when `content` is zero. */
   showZero: PropTypes.bool,
-  /** Size of the components.
-   *
-   * * medium (dot 8px, typography p3)
-   * * large (button 10px, typography p2)
-   * * giant (button 12px, typography p1)
+  /** Size of the components.
+   *
+   * * medium (dot 8px, typography p3)
+   * * large (button 10px, typography p2)
+   * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
   /** Style inline of component. */
   style: PropTypes.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
+  /**
+   * 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
    */
 };
 

package/components/button/icon.js

@@ -301,14 +301,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. */
@@ -319,19 +319,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
    */
 };
 

package/components/button/index.js

@@ -405,19 +405,19 @@ Button.propTypes = {
   urlParams: PropTypes.object,
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link'])
-  /**
-   * 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
    */
 };
 

package/components/button/more.js

@@ -1,20 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Icon, Popover, Typography } from "./..";
+import { ButtonIcon, Icon, Popover, Tooltip, Typography } from "./..";
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import React, { forwardRef, isValidElement, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { bgColor, borderNone, cursorPointer, displayFlex, flexCol, flexRow, gap, itemsCenter, outlineNone, parseHeight, pd, pdl } from "../../styles/general";
-import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
-import OptionWrapper from "../others/option-wrapper";
-const {
-  colors: {
-    system: {
-      dark: systemDark
-    }
-  }
-} = useTheme();
 const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   anchor,
@@ -28,6 +20,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   popoverProp,
   style
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const isOptionFull = optionType === 'full';
   const ref = useRef(null);
   const [openState, setOpenState] = useState(false);
@@ -51,7 +44,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   const renderOptions = () => {
     return options.map((item, idx) => {
-      if ( /*#__PURE__*/isValidElement(item)) return item;else {
+      if (item !== null && item !== void 0 && item.hidden) return;else if ( /*#__PURE__*/isValidElement(item)) return item;else {
         const icon = item === null || item === void 0 ? void 0 : item.icon;
         const label = item === null || item === void 0 ? void 0 : item.label;
         const action = () => {
@@ -69,19 +62,21 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           name: icon,
           width: 20,
           height: 20,
-          color: systemDark
+          color: 'system/dark'
         }) : null, jsx(Typography, {
           css: !icon && iconState && ExtraPaddingCSS,
           className: 'DGN-UI-ButtonMore-Label',
           ...labelProp
-        }, label)) : jsx(ButtonIcon, {
+        }, label)) : jsx(Tooltip, {
           key: idx,
           className: 'DGN-UI-ButtonMore-Option',
+          title: label
+        }, jsx(ButtonIcon, {
           circular: true,
           name: icon,
           onClick: action,
           viewType: 'text'
-        });
+        }));
       }
     });
   };
@@ -132,6 +127,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [buttonProps, className, disabled, id, options, optionType, popoverProp, style, iconState, openState]);
 }));
 const PopoverCSS = isOptionFull => css`
+    ${displayFlex};
     ${isOptionFull ? flexCol : flexRow};
     ${pd(isOptionFull ? [1, 0] : [0, 2])}
 `;
@@ -145,14 +141,14 @@ const OptionFullCSS = css`
     ${parseHeight(28)};
     ${pd([0, 4])};
     ${gap([0, 1])};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     transition: all 0.5s ease;
     &:hover,
     &:focus {
-        ${bgColor('fill.hover')};
+        ${bgColor('fill/hover')};
     }
     &:active {
-        ${bgColor('fill.pressed')};
+        ${bgColor('fill/pressed')};
     }
 `;
 const ExtraPaddingCSS = css`
@@ -167,41 +163,27 @@ ButtonMore.defaultProps = {
   style: {}
 };
 ButtonMore.propTypes = {
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/buttonicon) applied to the main `ButtonIcon`. */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-buttonicon) applied to the main `ButtonIcon`. */
   buttonProps: PropTypes.object,
   /** Class for component. */
   className: PropTypes.string,
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography) applied to the `Typography` label. */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-typography) applied to the `Typography` label. */
   labelProp: PropTypes.object,
   /** Option(s) in popover. */
   option: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     icon: PropTypes.string,
-    action: PropTypes.func
+    action: PropTypes.func,
+    hidden: PropTypes.bool
   })),
   /** The variant of option's type. */
   optionType: PropTypes.oneOf(['full', 'icon']),
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/overplay-popover) applied to the main `Popover`. */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-popover) applied to the main `Popover`. */
   popoverProp: PropTypes.object,
   /** Style inline of component. */
   style: PropTypes.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
-   */
 };
-
 export { ButtonMore };
 export default OptionWrapper(ButtonMore);

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

@@ -5,7 +5,7 @@ import { Button, ButtonIcon, Typography } from "../..";
 import { getGlobal } from "../../../global";
 import locale from "../../../locale";
 import { render } from 'react-dom';
-import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyBetween, mg, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textColor, userSelectNone } from "../../../styles/general";
+import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyBetween, mg, mgt, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pd, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textColor, userSelectNone } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { date as moment } from "../../../utils";
 const {
@@ -22,6 +22,7 @@ const {
  *
  * @param {Object} unique
  * @param {Boolean} boxShadow
+ * @param onClickActive
  * @returns
  */
 const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) => css`
@@ -29,9 +30,8 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
     ${flexCol};
     ${boxBorder};
     ${borderRadius('0px 0px 4px 4px')};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     ${parseWidth('100%')};
-    ${parseMinWidth(260)};
     ${parseMaxWidth(400)};
     box-shadow: ${boxShadow ? boxShadowsLarge : 'none'};
     .${unique.navigator.navigator} {
@@ -56,9 +56,9 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
     }
     .${unique.table.table} {
         ${mg([0, 4])};
+        ${pd(0)};
         ${parseWidth('calc(100% - 32px)')};
         border-collapse: separate;
-        padding: 0;
         table-layout: fixed;
         .${unique.table.data} {
             &:not(.empty) {
@@ -66,7 +66,7 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
                 ${positionRelative};
                 ${textCenter};
                 ${userSelectNone};
-                ${textColor('text.main')};
+                ${textColor('text/main')};
                 &:nth-of-type(7n - 1) {
                     ${textColor('info8')};
                 }
@@ -84,37 +84,37 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
                 }
                 &:hover {
                     span.${unique.day.day} {
-                        ${bgColor('fill.hover')};
+                        ${bgColor('fill/hover')};
                     }
                 }
                 ${onClickActive && css`
                     &:active {
                         span.${unique.day.day} {
-                            ${bgColor('fill.pressed')};
+                            ${bgColor('fill/pressed')};
                         }
                     }
                 `}
                 &.${unique.day.active} {
                     span.${unique.day.day} {
-                        ${bgColor('fill.focus')};
+                        ${bgColor('fill/focus')};
                     }
                 }
                 &.${unique.day.today} {
                     span {
                         ${boxBorder};
-                        ${border(1, 'system.active')};
+                        ${border(1, 'system/active')};
                     }
                 }
                 &.${unique.day.between} {
                     opacity: 1;
                     &::before {
-                        ${bgColor('fill.hover')};
+                        ${bgColor('fill/hover')};
                     }
                 }
                 &.${unique.day.from} {
                     opacity: 1;
                     &::before {
-                        ${bgColor('fill.hover')};
+                        ${bgColor('fill/hover')};
                         border-bottom-left-radius: 12px;
                         border-top-left-radius: 12px;
                         left: calc((100% - 24px) / 2);
@@ -123,7 +123,7 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
                 &.${unique.day.to} {
                     opacity: 1;
                     &::before {
-                        ${bgColor('fill.hover')};
+                        ${bgColor('fill/hover')};
                         border-bottom-right-radius: 12px;
                         border-top-right-radius: 12px;
                         right: calc((100% - 24px) / 2);
@@ -140,7 +140,7 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
             ${userSelectNone};
             ${textCenter};
             ${parseHeight(24)};
-            ${textColor('text.normal_label')};
+            ${textColor('text/normal_label')};
             &:nth-of-type(6) {
                 ${textColor('info8')};
             }
@@ -149,43 +149,34 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
             }
         }
     }
-    @media only screen and (max-width: 599px) {
+    @media only screen and (max-width: 800px) {
         .${unique.navigator.navigator} {
-            height: 24px;
-            margin-top: 14px;
+            ${parseHeight(24)};
+            ${mgt(14)};
             .${unique.navigator.center} {
-                height: 24px;
-                margin: 0;
-                min-width: 130px;
-                button {
-                    height: 24px;
-                }
-                .DGN-UI-Typography {
-                    font-size: 18px;
-                    min-width: 130px;
-                }
+                ${parseMinWidth(130)};
+                ${parseHeight(24)};
+                ${mg(0)};
             }
             .${unique.navigator.around} {
-                height: 24px;
-                width: 56px;
+                ${parseWidthHeight(56, 24)};
             }
             .${unique.icon} {
-                height: 24px;
-                margin: 0 2px;
-                width: 24px;
+                ${parseWidthHeight(24)};
+                ${mg('0 2px')};
                 svg,
                 path,
                 g {
-                    ${pointerEventsNone}
+                    ${pointerEventsNone};
                 }
             }
         }
         .${unique.table.container} {
-            margin: 6px 0;
+            ${mg('6px 0')};
         }
         .${unique.table.table} {
-            margin: 0 10px;
-            width: calc(100% - 20px);
+            ${mg('0 10px')};
+            ${parseWidth('calc(100% - 20px)')};
             .DGN-UI-Typography {
                 font-size: 14px;
             }
@@ -476,10 +467,9 @@ const renderHeader = className => {
       type: 'h6'
     }, weekdays[i])));
   }
-  const header = jsx("thead", null, jsx("tr", {
+  return jsx("thead", null, jsx("tr", {
     className: className.table.raw
   }, tableHeader));
-  return header;
 };
 /**
  *
@@ -489,6 +479,7 @@ const renderHeader = className => {
  * @param {Function} leftFn
  * @param {Function} rightFn
  * @param {Function} dbRightFn
+ * @param fn
  * @returns navigator
  */
 const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn, fn) => jsx("div", {

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

@@ -7,7 +7,7 @@ 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 { 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 { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, parseWidthHeight, pd, pointerEventsNone, positionFixed, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } 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";
@@ -103,6 +103,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const footerRef = useRef(null);
   const iconRef = useRef(null);
   const ipConRef = useRef(null);
@@ -366,7 +367,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       height,
       top,
       width
-    } = anchor instanceof Element ? anchor.getBoundingClientRect() : ipConRef.current.getBoundingClientRect();
+    } = anchor instanceof Element ? anchor.getBoundingClientRect() : ref.current.getBoundingClientRect();
     const pickerHeight = innerWidth < 567 ? controls ? 550 : 495 : controls ? 310 : 256;
     let style = {};
     style.left = left;
@@ -885,7 +886,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: unique.tooltip,
     ref: tooltipRef
   }, jsx(Typography, {
-    color: 'system.white',
+    color: 'system/white',
     type: 'p2'
   }));
   const pickerComp = jsx("div", {
@@ -1023,7 +1024,7 @@ const pickerCSS = {
         ${displayFlex};
         ${flexCol};
         ${borderRadius4px};
-        ${bgColor('system.white')};
+        ${bgColor('system/white')};
         box-shadow: ${boxShadowsLarge};
         .${unique.wrapper} {
             ${displayFlex};
@@ -1041,13 +1042,13 @@ const pickerCSS = {
             ${parseMinWidth(65)};
             ${bgColor('rgba(21, 26, 48, 0.9)')};
             ${pd([0.75, 1.5])};
+            ${invisible};
+            ${z(3)};
             transition: left 0.05s ease-in, top 0.05s ease-in;
             vertical-align: middle;
-            visibility: hidden;
             will-change: left top visibility;
-            z-index: ${zIndexCORE(3)};
         }
-        @media only screen and (max-width: 599px) {
+        @media only screen and (max-width: 800px) {
             ${parseMaxWidth(400)};
             .${unique.wrapper} {
                 ${displayFlex};
@@ -1069,11 +1070,11 @@ const pickerCSS = {
         ${parseMaxWidth(805)};
         ${top(position.top)};
         ${left(position.left)};
+        ${z(2)};
         opacity: 0;
         transform: scale(0);
         transform-origin: ${position.transformOrigin};
         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)};
     `,
   active: {
     opacity: 1,