diginet-core-ui 1.3.92 → 1.3.93

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

@@ -61,77 +61,79 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
         padding: 0;
         table-layout: fixed;
         .${unique.table.data} {
-            ${cursorPointer};
-            ${positionRelative};
-            ${textCenter};
-            ${userSelectNone};
-            ${textColor('text.main')};
-            &:nth-of-type(7n - 1) {
-                ${textColor('info8')};
-            }
-            &:nth-of-type(7n) {
-                ${textColor('danger8')};
-            }
-            &.next_month,
-            &.previous_month,
-            &.${unique.day.limit} {
-                opacity: 0.25;
-            }
-            &.${unique.day.limit} {
-                ${pointerEventsNone};
-                ${cursorDefault};
-            }
-            &:hover {
-                span.${unique.day.day} {
-                    ${bgColor('fill.hover')};
+            &:not(.empty) {
+                ${cursorPointer};
+                ${positionRelative};
+                ${textCenter};
+                ${userSelectNone};
+                ${textColor('text.main')};
+                &:nth-of-type(7n - 1) {
+                    ${textColor('info8')};
                 }
-            }
-            ${onClickActive && css`
-                &:active {
+                &:nth-of-type(7n) {
+                    ${textColor('danger8')};
+                }
+                &.next_month,
+                &.previous_month,
+                &.${unique.day.limit} {
+                    opacity: 0.25;
+                }
+                &.${unique.day.limit} {
+                    ${pointerEventsNone};
+                    ${cursorDefault};
+                }
+                &:hover {
                     span.${unique.day.day} {
-                        ${bgColor('fill.pressed')};
+                        ${bgColor('fill.hover')};
                     }
                 }
-            `}
-            &.${unique.day.active} {
-                span.${unique.day.day} {
-                    ${bgColor('fill.focus')};
+                ${onClickActive && css`
+                    &:active {
+                        span.${unique.day.day} {
+                            ${bgColor('fill.pressed')};
+                        }
+                    }
+                `}
+                &.${unique.day.active} {
+                    span.${unique.day.day} {
+                        ${bgColor('fill.focus')};
+                    }
                 }
-            }
-            &.${unique.day.today} {
-                span {
-                    ${boxBorder};
-                    ${border(1, 'system.active')};
+                &.${unique.day.today} {
+                    span {
+                        ${boxBorder};
+                        ${border(1, 'system.active')};
+                    }
                 }
-            }
-            &.${unique.day.between} {
-                opacity: 1;
-                &::before {
-                    ${bgColor('fill.hover')};
+                &.${unique.day.between} {
+                    opacity: 1;
+                    &::before {
+                        ${bgColor('fill.hover')};
+                    }
                 }
-            }
-            &.${unique.day.from} {
-                opacity: 1;
-                &::before {
-                    ${bgColor('fill.hover')};
-                    border-bottom-left-radius: 12px;
-                    border-top-left-radius: 12px;
-                    left: calc((100% - 24px) / 2);
+                &.${unique.day.from} {
+                    opacity: 1;
+                    &::before {
+                        ${bgColor('fill.hover')};
+                        border-bottom-left-radius: 12px;
+                        border-top-left-radius: 12px;
+                        left: calc((100% - 24px) / 2);
+                    }
                 }
-            }
-            &.${unique.day.to} {
-                opacity: 1;
-                &::before {
-                    ${bgColor('fill.hover')};
-                    border-bottom-right-radius: 12px;
-                    border-top-right-radius: 12px;
-                    right: calc((100% - 24px) / 2);
+                &.${unique.day.to} {
+                    opacity: 1;
+                    &::before {
+                        ${bgColor('fill.hover')};
+                        border-bottom-right-radius: 12px;
+                        border-top-right-radius: 12px;
+                        right: calc((100% - 24px) / 2);
+                    }
+                }
+                ::before {
+                    ${positionAbsolute};
+                    ${inset('1px -2px')};
+                    content: '';
                 }
-            }
-            ::before {
-                ${positionAbsolute};
-                ${inset('1px -2px')};
-                content: '';
             }
         }
         .${unique.table.header} {

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

@@ -1,31 +1,25 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle, Fragment } from 'react';
 import { Typography } from "../..";
-import { itemsCenter, itemsStart, boxBorder, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight, border } from "../../../styles/general";
+import PropTypes from 'prop-types';
+import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { bgColor, border, borderColor, borderRadius, boxBorder, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, flexRow, itemsCenter, itemsStart, left, mg, mgb, parseMinWidthHeight, parseWidth, parseWidthHeight, positionAbsolute, positionRelative, scale, textColor, top } from "../../../styles/general";
+import { useTheme } from "../../../theme";
 import { classNames, randomString, refType as ref } from "../../../utils";
-import { useTheme, useColor as colors } from "../../../theme";
 const {
   colors: {
     system: {
-      rest,
-      white,
-      disabled: systemDisabled
+      white: systemWhite
     },
     fill: {
-      hover: clFillHover,
-      pressed: clFillPressed
-    },
-    formal2: clFormal2,
-    semantic: {
-      danger: clDanger
+      hover: fillHover,
+      pressed: fillPressed
     }
   },
   spacing
 } = useTheme();
-const padding = spacing(0.75);
+const padding = 0.75;
 const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   checked,
@@ -50,9 +44,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   ...props
 }, reference) => {
-  if (!inputRef) {
-    inputRef = useRef(null);
-  }
+  if (!reference) reference = useRef(null);
+  if (!inputRef) inputRef = useRef(null);
   const ref = useRef(null);
   if (typeof width === 'number') width += 'px';
   const [checkedState, setCheckedState] = useState(checked || defaultChecked);
@@ -62,9 +55,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       allowSymbol: false
     }));
   }
-  const clMain = colors[color] || color;
-  const _CheckBoxSquareCSS = CheckBoxSquareCSS(width, clMain);
-  const _CheckBoxInputCSS = CheckBoxInputCSS(_CheckBoxSquareCSS.name, clMain);
+  const _CheckBoxSquareCSS = CheckBoxSquareCSS(width, color);
+  const _CheckBoxInputCSS = CheckBoxInputCSS(_CheckBoxSquareCSS.name, color);
   const handleChange = event => {
     stopPropagation && event.stopPropagation();
     if (readOnly || inputProps.readOnly || disabled || inputProps.disabled) return;
@@ -112,7 +104,10 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: classNames('DGN-UI-Checkbox', className),
     ref: ref,
     ...props,
-    onClick: handleChange
+    onClick: () => {
+      var _inputRef$current$cli, _inputRef$current;
+      return (_inputRef$current$cli = (_inputRef$current = inputRef.current).click) === null || _inputRef$current$cli === void 0 ? void 0 : _inputRef$current$cli.call(_inputRef$current);
+    }
   }, jsx("div", {
     css: CheckBoxRootCSS,
     className: classNames('DGN-UI-Checkbox-Root', disabled && 'disabled', readOnly && 'read-only')
@@ -135,130 +130,133 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, jsx("span", {
     className: classNames(determinate ? 'determinate' : 'indeterminate', readOnly && 'read-only', disabled && 'disabled'),
     css: _CheckBoxSquareCSS
-  }), (children || label) && jsx(Typography, {
+  }), children || label ? jsx(Typography, {
     type: 'p1',
     style: {
       marginLeft: spacing(1)
     },
-    color: disabled ? systemDisabled : '',
+    color: disabled ? 'system.disabled' : '',
     ...labelProps
-  }, jsx(Fragment, null, children || label, required && jsx("span", {
-    style: {
-      color: disabled ? systemDisabled : clDanger
-    }
-  }, "*"))))));
+  }, jsx(Fragment, null, children || label, required ? jsx("span", {
+    css: textColor(disabled ? 'system.disabled' : 'semantic.danger')
+  }, "*") : null)) : null)));
 }));
-const CheckBoxSquareCSS = (width, clMain) => css`
+const CheckBoxSquareCSS = (width, color) => css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${cursorPointer};
     ${boxBorder};
-    ${parseWidthHeight(width, width)};
-    ${border(2, rest)};
-    min-width: ${width};
-    min-height: ${width};
-    background-color: ${white};
-    border-radius: 2px;
-    margin: ${padding}px;
+    ${parseWidthHeight(width)};
+    ${border(2, 'system.rest')};
+    ${parseMinWidthHeight(width)};
+    ${bgColor('white')};
+    ${borderRadius(2)};
+    ${mg([padding])};
     &.determinate {
         &::after {
             ${displayBlock};
             ${positionAbsolute};
             ${parseWidthHeight(12.6, 7)};
+            ${left('50%')};
+            ${top('43%')};
             content: '';
-            left: 50%;
-            top: 43%;
             transform: translate(-50%, -50%) scale(0) rotate(45deg);
             transition: transform 0.3s;
         }
     }
     &.indeterminate {
         &::after {
+            ${displayFlex};
             ${flexRow};
             ${positionAbsolute};
             ${parseWidthHeight(10, 2)};
+            ${bgColor('white')};
+            ${left(2)};
+            ${top(6)};
+            ${scale(0)};
             content: '';
-            background-color: white;
-            left: 2px;
-            top: 6px;
             transition: transform 0.3s;
-            transform: scale(0);
         }
     }
     &:not(.disabled):not(.read-only) {
         &:hover {
-            box-shadow: 0 0 0 3px ${clFillHover};
-            background-color: ${clFillHover};
-            border-color: ${clMain};
+            box-shadow: 0 0 0 3px ${fillHover};
+            ${bgColor('fill.hover')};
+            ${borderColor(color)};
         }
         &:focus,
         &:active {
-            box-shadow: 0 0 0 3px ${clFillPressed};
-            background-color: ${clFillPressed};
+            box-shadow: 0 0 0 3px ${fillPressed};
+            ${bgColor('fill.pressed')};
         }
     }
     &:not(disabled):focus {
-        box-shadow: 0 0 0 3px ${clFillPressed};
-        background-color: ${clFillPressed};
+        box-shadow: 0 0 0 3px ${fillPressed};
+        ${bgColor('fill.pressed')};
     }
     &.disabled,
     &.read-only {
-        ${cursorNoDrop};
+        ${cursorNotAllowed};
     }
 `;
-const CheckBoxInputCSS = (CheckBoxSquareCSSName, clMain) => css`
+const CheckBoxInputCSS = (CheckBoxSquareCSSName, color) => css`
     &:checked + label > span.css-${CheckBoxSquareCSSName} {
         &.determinate {
             &::after {
                 transform: translate(-50%, -66%) scale(1) rotate(-45deg);
-                background: linear-gradient(${white}, ${white}) left bottom/2px 100%,
-                    linear-gradient(${white}, ${white}) left bottom/100% 2px;
+                background: linear-gradient(${systemWhite}, ${systemWhite}) left bottom/2px 100%,
+                    linear-gradient(${systemWhite}, ${systemWhite}) left bottom/100% 2px;
                 background-repeat: no-repeat;
             }
         }
         &.indeterminate {
             &::after {
-                transform: scale(1);
+                ${scale(1)};
             }
         }
     }
     &:checked:not(:disabled) + label > span.css-${CheckBoxSquareCSSName} {
-        background-color: ${clMain} !important;
-        border-color: ${clMain} !important;
+        ${bgColor(color)};
+        ${borderColor(color)};
     }
     &:checked:disabled {
         & + label > span.css-${CheckBoxSquareCSSName} {
             &:not(.indeterminate) {
-                background-color: ${systemDisabled} !important;
+                ${bgColor('system.disabled')};
             }
             &.indeterminate {
-                background-color: ${clFormal2} !important;
-                border-color: ${clFormal2} !important;
+                ${bgColor('formal2')};
+                ${borderColor('formal2')};
             }
         }
     }
     &:disabled {
         & + label > span.css-${CheckBoxSquareCSSName} {
-            border-color: ${systemDisabled};
+            ${borderColor('system.disabled')};
         }
     }
 `;
 const CheckBoxLabelCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${itemsCenter};
     ${boxBorder};
-    margin-bottom: 0 !important;
 `;
 const CheckBoxRootCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${itemsStart};
     ${boxBorder};
+    & > label {
+        ${mgb(0)};
+    }
 `;
 const CheckboxContainerCSS = css`
     ${displayBlock};
     ${positionRelative};
-    width: fit-content;
+    ${parseWidth('fit-content')};
 `;
 Checkbox.defaultProps = {
   className: '',

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
   },
@@ -260,7 +255,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tableData.push(jsx("td", {
         key: `previous_month-${prevDate - i + 1}`,
         "data-time": day - 1,
-        className: classNames(unique.table.data, 'previous_month', isBetween(day - 1))
+        className: classNames(unique.table.data, 'previous_month', isBetween(day - 1), 'empty')
       }, jsx("span", {
         className: unique.day.day
       })));
@@ -300,7 +295,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tableData.push(jsx("td", {
         key: `next_month-${i + 1}`,
         "data-time": i < 6 - weekDateLast && day + 1,
-        className: classNames(unique.table.data, 'next_month', i < 6 - weekDateLast && isBetween(day + 1))
+        className: classNames(unique.table.data, 'next_month', i < 6 - weekDateLast && isBetween(day + 1), 'empty')
       }, jsx("span", {
         className: unique.day.day
       })));
@@ -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/dropdown/index.js

@@ -16,9 +16,6 @@ const {
     },
     fill: {
       'scrollbar-tabbar': fillScrollbar
-    },
-    text: {
-      sub: textSub
     }
   },
   typography: {
@@ -44,6 +41,7 @@ const convertData = (dt, valueExpr) => {
   return valueTemp;
 };
 const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   allowSearch,
   children,
   className,
@@ -106,7 +104,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const lastSearchRef = useRef(null);
   const timeout = useRef(null);
   const loadMoreTimer = useRef(null);
-  const dataChoosen = useRef([]);
+  const dataChosen = useRef([]);
   const [unique] = useState(randomString(6, {
     allowNumber: false,
     allowSymbol: false
@@ -123,7 +121,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [valueMulti, setValueMulti] = useState(valueTemp);
   const _isMobile = isMobile.any();
   const _InputCSS = InputCSS(multiple, typeof renderSelectedItem === 'function');
-  const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, disabled, readOnly);
+  const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, disabled, readOnly, multilineSelectedItem);
   const _IconCSS = IconCSS(viewType);
   const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, disabled, placeholder, _DropdownInputCSS.name);
   const _DropdownListCSS = DropdownListCSS(loading);
@@ -373,7 +371,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }, displayText), jsx(Typography, {
           className: 'DGN-UI-Dropdown-SubText',
           type: 'p3',
-          color: textSub
+          color: 'text.sub'
         }, typeof subText === 'function' ? subText({
           data,
           index
@@ -399,7 +397,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           // onChangeValue(displayText, value, icon, data, index);
           // }}
           ,
-          onKeyPress: e => {
+          onKeyDown: e => {
             if (itemDisabled) return;
             if (e.key === 'Enter') e.currentTarget.firstChild.click();
             // if (e.key === 'Enter') onChangeValue(displayText, value, icon, data, index);
@@ -423,7 +421,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             if (itemDisabled) return;
             onChangeValue(displayText, value, icon, data, index);
           },
-          onKeyPress: e => {
+          onKeyDown: e => {
             if (itemDisabled) return;
             if (e.key === 'Enter') onChangeValue(displayText, value, icon, data, index);
           },
@@ -511,7 +509,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }, displayText), jsx(Typography, {
           className: 'DGN-UI-Dropdown-SubText',
           type: 'p3',
-          color: textSub
+          color: 'text.sub'
         }, typeof subText === 'function' ? subText({
           data,
           index: i
@@ -629,7 +627,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const onChangeInput = e => {
     if (searchRef.current) lastSearchRef.current = searchRef.current.value;
     const dataFilter = getData();
-    dataChoosen.current = [...dataFilter].filter(i => [...valueMulti].includes(i === null || i === void 0 ? void 0 : i[valueExpr]));
+    dataChosen.current = [...dataFilter].filter(i => [...valueMulti].includes(i === null || i === void 0 ? void 0 : i[valueExpr]));
     if (onInput) {
       isSearch[unique] = true;
       // const valueInput = e.target.value;
@@ -908,23 +906,25 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const setSingleValueHandler = (data, keyArr) => {
     const text = keyArr ? renderData(data, keyArr) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr] || data[valueExpr] || data;
+    const renderContent = content => jsx(Typography, {
+      type: 'p1',
+      lineClamp: multilineSelectedItem ? undefined : 1,
+      hoverTooltip: !_isMobile
+    }, content);
     if (typeof renderSelectedItem === 'function') {
       inputRef.current.innerHTML = '';
-      const item = renderSelectedItem({
+      const item = renderContent(renderSelectedItem({
         data
-      });
+      }));
       const el = document.createElement('div');
       el.style.display = 'flex';
       el.style.minHeight = '24px';
+      if (!multilineSelectedItem) el.style.maxHeight = '24px';
       ReactDOM.render(item, inputRef.current.appendChild(el));
     } else if (iconExpr && iconExpr !== 'none') {
       inputRef.current.innerHTML = '';
       const icon = getIconFromData(data);
-      const valueWithIcon = jsx(Fragment, null, icon && icon, jsx(Typography, {
-        type: 'p1',
-        lineClamp: multilineSelectedItem ? undefined : 1,
-        hoverTooltip: !_isMobile
-      }, text));
+      const valueWithIcon = jsx(Fragment, null, icon && icon, renderContent(text));
       const el = document.createElement('div');
       el.style.cssText = 'display: flex; align-items: center; min-height:24px;';
       ReactDOM.render(valueWithIcon, inputRef.current.appendChild(el));
@@ -936,6 +936,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {
+      ...action,
       closeDropdown: () => {
         closeDropdown();
       },
@@ -1103,9 +1104,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const getData = () => {
     let dataFilter = JSON.parse(JSON.stringify(dataSource));
     if (Array.isArray(valueObjectDefault)) {
-      dataFilter = [...dataFilter, ...dataChoosen.current, ...valueObjectDefault];
+      dataFilter = [...dataFilter, ...dataChosen.current, ...valueObjectDefault];
     } else if (typeof valueObjectDefault === 'object') {
-      dataFilter = [...dataFilter, ...dataChoosen.current, {
+      dataFilter = [...dataFilter, ...dataChosen.current, {
         ...valueObjectDefault
       }];
     }
@@ -1237,7 +1238,7 @@ const InputCSS = (multiple, renderSelectedItem) => css`
     ${positionRelative};
     ${parseWidth(!multiple && renderSelectedItem ? 'calc(100% - 34px)' : '100%')};
 `;
-const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) => css`
+const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly, multilineSelectedItem) => css`
     ${displayFlex};
     ${itemsCenter};
     ${outlineNone};
@@ -1256,9 +1257,10 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) =
         ${flexWrap};
         ${overflowHidden};
         ${breakWord};
-        ${!multiple && `
-            ${parseMinHeight(24)}; 
+        ${!multiple && css`
+            ${parseMinHeight(24)};
             ${parseMaxWidth('100%')};
+            ${!multilineSelectedItem && parseMaxHeight(24)};
         `};
         &::after {
             ${displayFlex};

package/components/modal/body.js

@@ -1,20 +1,11 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import { border, boxBorder, displayBlock, overflowAuto, parseWidthHeight, positionRelative } from "../../styles/general";
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { boxBorder, displayBlock, displayNone, order, overflowAuto, parseWidthHeight, positionRelative } from "../../styles/general";
 import { classNames } from "../../utils";
-import theme from "../../theme/settings";
 import { responsivePaddingCSS } from "./header";
-const {
-  colors: {
-    fill: {
-      'scrollbar-rest': scrollbarRest,
-      'scrollbar-active': scrollbarActive
-    }
-  }
-} = theme;
 const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -22,6 +13,7 @@ const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   style
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -33,13 +25,15 @@ const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  return useMemo(() => jsx("div", {
-    css: ModalBodyCSS,
-    id: id,
-    className: classNames('DGN-UI-Modal-Body', className),
-    style: style,
-    ref: ref
-  }, children), [children, className, id, style]);
+  return useMemo(() => {
+    return jsx("div", {
+      css: ModalBodyCSS,
+      ref: ref,
+      id: id,
+      className: classNames('DGN-UI-Modal-Body', className),
+      style: style
+    }, children);
+  }, [children, className, id, style]);
 }));
 const ModalBodyCSS = css`
     ${displayBlock};
@@ -47,19 +41,9 @@ const ModalBodyCSS = css`
     ${boxBorder};
     ${overflowAuto};
     ${parseWidthHeight('100%', 'auto')};
-    order: 2;
+    ${order(2)};
     &::-webkit-scrollbar {
-        width: 24px;
-    }
-    &::-webkit-scrollbar-thumb {
-        ${border(8, 'transparent')};
-        border-radius: 10px;
-        mix-blend-mode: normal;
-        background-color: ${scrollbarRest};
-        background-clip: content-box;
-        :hover {
-            background-color: ${scrollbarActive};
-        }
+        ${displayNone};
     }
     ${responsivePaddingCSS};
 `;

package/components/modal/footer.js

@@ -1,9 +1,9 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import { itemsCenter, boxBorder, flexRow, justifyEnd, positionRelative } from "../../styles/general";
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { boxBorder, flexRow, itemsCenter, justifyEnd, order, parseWidth, positionRelative } from "../../styles/general";
 import { classNames } from "../../utils";
 import { responsivePaddingCSS } from "./header";
 const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -14,6 +14,7 @@ const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   style
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const _ModalFooterCSS = ModalFooterCSS(boxShadow);
   useImperativeHandle(reference, () => {
@@ -26,13 +27,15 @@ const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  return useMemo(() => jsx("div", {
-    css: _ModalFooterCSS,
-    id: id,
-    className: classNames('DGN-UI-Modal-Footer', className),
-    style: style,
-    ref: ref
-  }, children), [boxShadow, children, className, id, style]);
+  return useMemo(() => {
+    return jsx("div", {
+      css: _ModalFooterCSS,
+      ref: ref,
+      id: id,
+      className: classNames('DGN-UI-Modal-Footer', className),
+      style: style
+    }, children);
+  }, [boxShadow, children, className, id, style]);
 }));
 const ModalFooterCSS = boxShadow => css`
     ${flexRow};
@@ -40,11 +43,10 @@ const ModalFooterCSS = boxShadow => css`
     ${itemsCenter};
     ${justifyEnd};
     ${boxBorder};
-    width: 100%;
-    min-height: 56px;
+    ${parseWidth('100%')};
+    ${order(3)};
     border-radius: 0px 0px 4px 4px;
     box-shadow: ${boxShadow};
-    order: 3;
     ${responsivePaddingCSS};
 `;
 ModalFooter.defaultProps = {

package/components/modal/header.js

@@ -1,24 +1,19 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useContext, useRef, forwardRef, useImperativeHandle } from 'react';
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Typography } from "./..";
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import ModalContext from "./context";
-import { ButtonIcon, Typography } from "../";
-import { itemsCenter, boxBorder, flexRow, justifyBetween, parseWidthHeight, positionRelative } from "../../styles/general";
+import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
+import { bgColor, boxBorder, cursorMove, flexRow, itemsCenter, justifyBetween, order, parseWidthHeight, positionRelative } from "../../styles/general";
+import { useTheme } from "../../theme";
 import { classNames, handleBreakpoints } from "../../utils";
-import theme from "../../theme/settings";
+import ModalContext from "./context";
 const {
-  colors: {
-    fill: {
-      headerbar
-    }
-  },
   boxShadows: {
     small: smallBoxShadow
   },
   spacing
-} = theme;
+} = useTheme();
 export const responsivePaddingCSS = handleBreakpoints({
   xs: 4,
   md: 6
@@ -34,6 +29,7 @@ const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style,
   title
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const modal = useContext(ModalContext);
   const ref = useRef(null);
   const _ModalHeaderCSS = ModalHeaderCSS(modal);
@@ -47,29 +43,31 @@ const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  return useMemo(() => jsx("div", {
-    css: _ModalHeaderCSS,
-    id: id,
-    className: classNames('DGN-UI-Modal-Header', className),
-    style: style,
-    onMouseDown: modal.onMoveModal,
-    ref: ref
-  }, jsx(Typography, {
-    type: 'h3',
-    style: {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      width: '100%'
-    }
-  }, children ? children : title), showClose && jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'Close',
-    style: {
-      marginLeft: spacing(4)
-    },
-    onClick: modal.close
-  })), [children, className, id, showClose, style, title]);
+  return useMemo(() => {
+    return jsx("div", {
+      css: _ModalHeaderCSS,
+      ref: ref,
+      id: id,
+      className: classNames('DGN-UI-Modal-Header', className),
+      style: style,
+      onMouseDown: modal.onMoveModal
+    }, jsx(Typography, {
+      type: 'h3',
+      style: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        width: '100%'
+      }
+    }, children ? children : title), showClose ? jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: 'Close',
+      style: {
+        marginLeft: spacing(4)
+      },
+      onClick: modal.close
+    }) : null);
+  }, [children, className, id, showClose, style, title]);
 }));
 const ModalHeaderCSS = modal => css`
     ${flexRow};
@@ -78,11 +76,11 @@ const ModalHeaderCSS = modal => css`
     ${itemsCenter};
     ${boxBorder};
     ${parseWidthHeight('100%', 56)};
-    background-color: ${headerbar};
+    ${bgColor('fill.headerbar')}
+    ${modal.onMoveModal && cursorMove};
+    ${order(1)};
     border-radius: 4px 4px 0px 0px;
     box-shadow: ${smallBoxShadow};
-    cursor: ${modal.onMoveModal ? 'move' : 'inherit'};
-    order: 1;
     ${responsivePaddingCSS};
 `;
 ModalHeader.defaultProps = {

package/components/modal/modal.js

@@ -1,27 +1,20 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useState, useRef, forwardRef, useEffect, useMemo, useImperativeHandle } from 'react';
-import { createPortal } from 'react-dom';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import useDelayUnmount from "../../utils/useDelayUnmount";
-import ModalContext from "./context";
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { animations } from "../../styles/animation";
-import { boxBorder, borderRadius4px, flexCol, flexRow, justifyCenter, parseWidth, parseWidthHeight, positionFixed, positionRelative } from "../../styles/general";
-import theme from "../../theme/settings";
-import { classNames } from "../../utils";
+import { bgColor, borderRadius4px, boxBorder, cursorMove, flexCol, flexRow, justifyCenter, left, parseMaxWidthHeight, parseMinWidth, parseWidthHeight, pdt, positionAbsolute, positionRelative, top } from "../../styles/general";
+import { useTheme } from "../../theme";
+import { classNames, useDelayUnmount } from "../../utils";
+import ModalContext from "./context";
 const {
-  colors: {
-    system: {
-      white
-    }
-  },
   typography: {
     paragraph1
   },
-  spacing,
   zIndex: zIndexCORE
-} = theme;
+} = useTheme();
 const fadeInDown = animations.fadeInDown;
 const fadeOutUp = animations.fadeOutUp;
 const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -42,6 +35,7 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   zIndex
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const overflow = useRef(null);
   const modalBoxRef = useRef(null);
@@ -190,19 +184,19 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       return /*#__PURE__*/createPortal(node, document.body);
     }
     return null;
-  }, [children, className, dragAnyWhere, id, moveable, moveOutScreen, onClose, style, openState, showModal]);
+  }, [alignment, autoFocus, children, className, darkTheme, dragAnyWhere, id, moveable, moveOutScreen, onClose, open, pressESCToClose, style, width, zIndex, openState, showModal]);
 }));
 const ModalContainerCSS = (zIndex, alignment, darkTheme) => css`
     ${flexRow};
-    ${positionFixed};
+    ${positionAbsolute}
     ${justifyCenter};
-    ${parseWidthHeight('100%', '100vh')};
+    ${parseWidthHeight('100%')};
+    ${pdt(alignment === 'top' ? [3] : 0)};
+    ${bgColor(darkTheme ? 'rgba(21, 26, 48, 0.5)' : 'transparent')};
+    ${top(0)};
+    ${left(0)};
     z-index: ${zIndex};
     align-items: ${alignment === 'top' ? 'inherit' : 'center'};
-    padding-top: ${alignment === 'top' ? spacing([3]) : 0};
-    background-color: ${darkTheme ? 'rgba(21, 26, 48, 0.5)' : 'transparent'};
-    top: 0;
-    left: 0;
 `;
 const ModalBoxCSS = (width, moveable, dragAnyWhere) => css`
     ${paragraph1};
@@ -210,13 +204,11 @@ const ModalBoxCSS = (width, moveable, dragAnyWhere) => css`
     ${positionRelative};
     ${borderRadius4px}
     ${boxBorder};
-    ${parseWidth(width)}
-    cursor: ${moveable && dragAnyWhere ? 'move' : 'initial'};
-    max-height: calc(100% - 12px);
-    height: max-content;
-    background-color: ${white};
-    min-width: 150px;
-    max-width: 90%;
+    ${parseWidthHeight(width, 'max-content')};
+    ${parseMaxWidthHeight('90%', 'calc(100% - 12px)')};
+    ${parseMinWidth(150)};
+    ${moveable && dragAnyWhere && cursorMove};
+    ${bgColor('system.white')};
     margin: 0 auto;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     -webkit-box-orient: vertical;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.92",
+  "version": "1.3.93",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,12 @@ npm test
 ```
 
 ## Changelog
+## 1.3.93
+- \[Changed\]: Dropdown – Apply multilineSelectedItem to renderSelectedItem
+- \[Fixed\]: Checkbox – Fix bug still uncheck when not set state
+- \[Fixed\]: Modal – Fix footer height
+- \[Fixed\]: DateRangePicker – Fix UI hover, focus empty days between selected range
+
 ## 1.3.92
 - \[Fixed\]: Dropdown – Fix override css selected item Typography
 - \[Fixed\]: Attachment – Fix crash when remove attached item