diginet-core-ui 1.4.28 → 1.4.29

package/assets/images/menu/dhr/MHRP77N0012.svg

@@ -0,0 +1,16 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1722_36)">
+<path d="M25.1998 14.3265C24.3998 14.625 23.8998 14.9235 23.6998 15.7194C23.1998 17.5102 22.5998 19.301 22.0998 20.9923C21.8998 21.5893 21.3998 22.0867 20.6998 22.1862C20.2998 22.2857 20.1998 22.4847 20.0998 22.7832C19.1998 26.9617 18.2998 31.0408 17.3998 35.2194C17.3998 35.4184 17.2998 35.6173 17.1998 35.9158C16.4998 35.3189 15.6998 35.0204 14.7998 35.2194C13.8998 35.4184 13.3998 36.1148 13.0998 36.9107C11.6998 37.0102 10.5998 35.8163 10.8998 34.4235C11.4998 31.6377 12.0998 28.852 12.6998 25.9668C12.8998 24.8724 13.9998 24.176 15.1998 24.4745C16.2998 24.6735 17.3998 24.9719 18.3998 25.1709C18.3998 25.1709 18.3998 25.1709 18.4998 25.0714C18.6998 24.0765 18.8998 23.0816 19.0998 22.0867C19.0998 21.9872 18.9998 21.7883 18.8998 21.6888C18.1998 21.0918 18.0998 20.3954 18.3998 19.5C18.9998 17.5102 19.5998 15.4209 20.2998 13.4311C20.5998 12.5357 21.1998 11.8393 21.9998 11.4413C23.4998 10.6454 25.0998 9.84948 26.5998 8.95408C26.7998 8.85459 27.0998 8.65561 27.3998 8.55612C29.7998 7.66071 31.8998 9.35204 31.5998 11.8393C31.3998 13.3316 31.1998 14.7245 30.9998 16.2168C30.7998 17.9082 30.4998 19.5995 30.2998 21.1913C30.1998 21.8877 30.3998 22.3852 30.8998 22.7832C31.8998 23.5791 32.7998 24.4745 33.6998 25.2704C34.5998 25.9668 34.9998 26.8622 34.9998 28.0561C35.1998 30.8418 35.3998 33.5281 35.5998 36.3138C35.6998 37.3087 35.2998 38.0051 34.3998 38.5025C33.5998 38.9005 32.7998 38.9005 31.9998 38.4031C31.3998 38.0051 31.0998 37.4082 30.9998 36.7117C30.7998 34.2245 30.5998 31.7372 30.3998 29.1505C30.3998 28.7525 30.1998 28.4541 29.8998 28.2551C28.5998 27.1607 27.2998 25.9668 25.8998 24.8724C23.9998 23.4796 23.6998 21.5893 24.0998 19.4005C24.6998 17.8087 24.8998 16.1173 25.1998 14.3265Z" fill="#2680EB"/>
+<path d="M24.2998 24.6735C25.3998 25.6684 26.5998 26.6633 27.6998 27.6582C27.8998 27.8571 27.9998 28.0561 27.8998 28.3546C26.8998 31.3393 25.8998 34.4235 24.9998 37.4082C24.6998 38.4031 23.8998 39 22.8998 39C21.8998 39 20.9998 38.5025 20.7998 37.6071C20.6998 37.1097 20.5998 36.6122 20.6998 36.1148C21.8998 32.3342 23.0998 28.5536 24.2998 24.773C24.2998 24.6735 24.2998 24.6735 24.2998 24.6735Z" fill="#2680EB"/>
+<path d="M33.8998 3.78061C33.8998 5.7704 32.2998 7.46173 30.2998 7.46173C28.2998 7.46173 26.6998 5.86989 26.6998 3.8801C26.6998 1.8903 28.2998 0.198975 30.2998 0.198975C32.2998 0.198975 33.8998 1.79081 33.8998 3.78061Z" fill="#2680EB"/>
+<path d="M32.4998 13.8291C34.4998 15.4209 36.3998 16.8138 38.2998 18.3061C39.0998 18.9031 39.1998 20.1964 38.5998 20.8929C37.8998 21.6888 36.7998 21.8877 35.8998 21.1913C34.5998 20.1964 33.2998 19.2015 32.0998 18.2066C31.9998 18.1071 31.8998 18.0076 31.8998 17.8087C32.0998 16.5153 32.2998 15.2219 32.4998 13.8291Z" fill="#2680EB"/>
+<path d="M15.4998 36.2143C16.2998 36.2143 16.8998 36.8112 16.8998 37.6071C16.8998 38.4031 16.2998 39 15.4998 39C14.6998 39 14.0998 38.4031 14.0998 37.6071C14.0998 36.8112 14.6998 36.2143 15.4998 36.2143Z" fill="#2680EB"/>
+<path d="M5.2 29.8469C4.5 29.8469 4 30.3444 4 30.9413C4 31.5383 4.5 32.1352 5.2 32.1352H10.5C10.7 31.3393 10.8 30.6429 11 29.8469H5.2ZM5.2 25.2704C4.6 25.2704 4 25.7679 4 26.4643C4 27.0612 4.5 27.5587 5.2 27.5587H11.5C11.6 27.0612 11.7 26.4643 11.9 25.8673C11.9 25.6684 12 25.4694 12.1 25.2704H5.2ZM17.4 20.6939H5.2C4.5 20.6939 4 21.1913 4 21.8878C4 22.4847 4.5 22.9821 5.2 22.9821H18C18 22.7832 18.1 22.5842 18.1 22.3852C17.8 21.9872 17.5 21.3903 17.4 20.6939ZM5.2 29.8469C4.5 29.8469 4 30.3444 4 30.9413C4 31.5383 4.5 32.1352 5.2 32.1352H10.5C10.7 31.3393 10.8 30.6429 11 29.8469H5.2ZM5.2 25.2704C4.6 25.2704 4 25.7679 4 26.4643C4 27.0612 4.5 27.5587 5.2 27.5587H11.5C11.6 27.0612 11.7 26.4643 11.9 25.8673C11.9 25.6684 12 25.4694 12.1 25.2704H5.2ZM17.4 20.6939H5.2C4.5 20.6939 4 21.1913 4 21.8878C4 22.4847 4.5 22.9821 5.2 22.9821H18C18 22.7832 18.1 22.5842 18.1 22.3852C17.8 21.9872 17.5 21.3903 17.4 20.6939ZM5.2 29.8469C4.5 29.8469 4 30.3444 4 30.9413C4 31.5383 4.5 32.1352 5.2 32.1352H10.5C10.7 31.3393 10.8 30.6429 11 29.8469H5.2ZM5.2 25.2704C4.6 25.2704 4 25.7679 4 26.4643C4 27.0612 4.5 27.5587 5.2 27.5587H11.5C11.6 27.0612 11.7 26.4643 11.9 25.8673C11.9 25.6684 12 25.4694 12.1 25.2704H5.2ZM17.4 20.6939H5.2C4.5 20.6939 4 21.1913 4 21.8878C4 22.4847 4.5 22.9821 5.2 22.9821H18C18 22.7832 18.1 22.5842 18.1 22.3852C17.8 21.9872 17.5 21.3903 17.4 20.6939ZM20.3 0.298469C20.1 0.0994898 19.8 0 19.5 0H3.4C1.5 0 0 1.49235 0 3.38265V35.5179C0 37.4082 1.5 38.9005 3.4 38.9005H13.6C13.4 38.602 13.2 38.2041 13.1 37.9056H13C12 37.9056 11.1 37.5077 10.5 36.8112L10.4 36.7117H3.4C2.8 36.7117 2.3 36.2143 2.3 35.6173V3.38265C2.3 2.78571 2.8 2.18878 3.4 2.18878H18.3V7.95918C18.3 9.45153 19.3 10.8444 20.7 11.2423C20.9 11.0434 21.2 10.8444 21.5 10.7449C22.5 10.2474 23.5 9.65051 24.5 9.15306H21.7C21.1 9.15306 20.5 8.65561 20.5 7.95918V3.8801L25.3 8.65561C25.5 8.55612 25.8 8.35714 26 8.25765C26.3 8.05867 26.6 7.95918 26.9 7.85969C27.1 7.7602 27.3 7.66071 27.6 7.66071L20.3 0.298469ZM5.2 20.6939C4.5 20.6939 4 21.1913 4 21.8878C4 22.4847 4.5 22.9821 5.2 22.9821H18C18 22.7832 18.1 22.5842 18.1 22.3852C17.7 21.9872 17.4 21.4898 17.3 20.6939H5.2ZM11.8 25.8673C11.8 25.6684 11.9 25.4694 12 25.2704H5.2C4.6 25.2704 4 25.7679 4 26.4643C4 27.0612 4.5 27.5587 5.2 27.5587H11.5C11.5 27.0612 11.6 26.4643 11.8 25.8673ZM4 30.9413C4 31.5383 4.5 32.1352 5.2 32.1352H10.5C10.7 31.3393 10.8 30.6429 11 29.8469H5.2C4.5 29.8469 4 30.3444 4 30.9413ZM17.4 20.6939H5.2C4.5 20.6939 4 21.1913 4 21.8878C4 22.4847 4.5 22.9821 5.2 22.9821H18C18 22.7832 18.1 22.5842 18.1 22.3852C17.8 21.9872 17.5 21.3903 17.4 20.6939ZM5.2 25.2704C4.6 25.2704 4 25.7679 4 26.4643C4 27.0612 4.5 27.5587 5.2 27.5587H11.5C11.6 27.0612 11.7 26.4643 11.9 25.8673C11.9 25.6684 12 25.4694 12.1 25.2704H5.2ZM5.2 29.8469C4.5 29.8469 4 30.3444 4 30.9413C4 31.5383 4.5 32.1352 5.2 32.1352H10.5C10.7 31.3393 10.8 30.6429 11 29.8469H5.2ZM17.4 20.6939H5.2C4.5 20.6939 4 21.1913 4 21.8878C4 22.4847 4.5 22.9821 5.2 22.9821H18C18 22.7832 18.1 22.5842 18.1 22.3852C17.8 21.9872 17.5 21.3903 17.4 20.6939ZM5.2 25.2704C4.6 25.2704 4 25.7679 4 26.4643C4 27.0612 4.5 27.5587 5.2 27.5587H11.5C11.6 27.0612 11.7 26.4643 11.9 25.8673C11.9 25.6684 12 25.4694 12.1 25.2704H5.2ZM5.2 29.8469C4.5 29.8469 4 30.3444 4 30.9413C4 31.5383 4.5 32.1352 5.2 32.1352H10.5C10.7 31.3393 10.8 30.6429 11 29.8469H5.2ZM5.2 29.8469C4.5 29.8469 4 30.3444 4 30.9413C4 31.5383 4.5 32.1352 5.2 32.1352H10.5C10.7 31.3393 10.8 30.6429 11 29.8469H5.2ZM17.4 20.6939H5.2C4.5 20.6939 4 21.1913 4 21.8878C4 22.4847 4.5 22.9821 5.2 22.9821H18C18 22.7832 18.1 22.5842 18.1 22.3852C17.8 21.9872 17.5 21.3903 17.4 20.6939ZM5.2 25.2704C4.6 25.2704 4 25.7679 4 26.4643C4 27.0612 4.5 27.5587 5.2 27.5587H11.5C11.6 27.0612 11.7 26.4643 11.9 25.8673C11.9 25.6684 12 25.4694 12.1 25.2704H5.2ZM17.4 20.6939H5.2C4.5 20.6939 4 21.1913 4 21.8878C4 22.4847 4.5 22.9821 5.2 22.9821H18C18 22.7832 18.1 22.5842 18.1 22.3852C17.8 21.9872 17.5 21.3903 17.4 20.6939ZM5.2 25.2704C4.6 25.2704 4 25.7679 4 26.4643C4 27.0612 4.5 27.5587 5.2 27.5587H11.5C11.6 27.0612 11.7 26.4643 11.9 25.8673C11.9 25.6684 12 25.4694 12.1 25.2704H5.2ZM5.2 29.8469C4.5 29.8469 4 30.3444 4 30.9413C4 31.5383 4.5 32.1352 5.2 32.1352H10.5C10.7 31.3393 10.8 30.6429 11 29.8469H5.2Z" fill="#FFAA00"/>
+<path d="M8.2 14.824V11.6403C6.9 11.3418 6 10.9439 5.3 10.3469C4.6 9.75 4.4 9.05357 4.4 8.25765C4.4 7.46173 4.7 6.66582 5.4 6.16837C6.1 5.67092 7 5.27296 8.1 5.17347V4.37755H9.5V5.17347C10.6 5.27296 11.4 5.57143 12 5.96939C12.6 6.46684 13 7.06378 13.2 7.7602L10.7 8.05867C10.5 7.46174 10.2 7.06378 9.5 6.8648V9.84949C11.1 10.148 12.2 10.6454 12.7 11.1429C13.3 11.6403 13.6 12.3367 13.6 13.1327C13.6 14.0281 13.2 14.824 12.5 15.5204C11.8 16.1173 10.8 16.5153 9.5 16.7143V18.1071H8.1V16.7143C7 16.6148 6 16.3163 5.3 15.7194C4.6 15.1224 4.1 14.426 3.9 13.4311L6.5 13.2321C6.6 13.6301 6.8 14.0281 7.1 14.3265C7.5 14.5255 7.8 14.7245 8.2 14.824ZM8.2 6.8648C7.8 6.96429 7.5 7.06378 7.2 7.36224C7 7.56122 6.9 7.85969 6.9 8.15816C6.9 8.45663 7 8.65561 7.2 8.95408C7.4 9.15306 7.7 9.35204 8.2 9.55102V6.8648ZM9.6 14.9235C10.1 14.824 10.5 14.625 10.8 14.426C11.1 14.1276 11.3 13.8291 11.3 13.4311C11.3 13.1327 11.2 12.8342 10.9 12.5357C10.6 12.3367 10.2 12.1378 9.6 11.9388V14.9235Z" fill="#FFAA00"/>
+</g>
+<defs>
+<clipPath id="clip0_1722_36">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/accordion/details.js

@@ -65,13 +65,6 @@ const DetailsRootCSS = ({
         }
     }
 `;
-
-// AccordionDetails.defaultProps = {
-//     className: '',
-//     id: '',
-//     style: {},
-// };
-
 AccordionDetails.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,

package/components/accordion/group.js

@@ -120,11 +120,7 @@ const AccordionGroupRootCSS = ({
     }
 `;
 
-// AccordionGroup.defaultProps = {
-//     className: '',
-//     collapseOther: true,
-//     style: {},
-// };
+//Check defaultProps at src/theme/setting.js
 
 AccordionGroup.propTypes = {
   /** The content of the component. */

package/components/accordion/index.js

@@ -9,15 +9,31 @@ import { useTheme } from "../../theme";
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../utils";
 import AccordionContext from "./context";
+
+/**
+ * Handles the transition of an element's height with a smooth animation.
+ *
+ * @param {Object} timer - A timer object used to manage the timeout for setting the final height.
+ * @param {HTMLElement} el - The target element on which the transition effect will be applied.
+ * @param {number} beginHeight - The initial height of the element in pixels.
+ * @param {number|null} [endHeight=null] - The final height of the element in pixels. If not provided, the element's height will remain unchanged.
+ */
 const handleTransition = (timer, el, beginHeight, endHeight = null) => {
+  /**
+   * Calculates the duration for the transition based on the initial height.
+   *
+   * @param {number} height - The initial height of the element in pixels.
+   * @returns {number} - The rounded duration in milliseconds.
+   */
   const getAutoHeightDuration = height => {
     if (!height) {
       return 0;
     }
     const constant = height / 36;
-
     // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
-    return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
+    // Formula: (4 + 15 * (x / 36) ** 0.25 + (x / 36) / 5) * 10
+    const constantPart = 4 + 15 * Math.pow(constant, 0.25) + constant / 5;
+    return Math.round(constantPart * 10);
   };
   const duration = getAutoHeightDuration(beginHeight);
   el.style.transitionDuration = `${duration}ms`;
@@ -82,6 +98,8 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
     const _instance = {
+      expandState: expandState,
+      setExpandState: setExpandState,
       ...action
     }; // methods
     _instance.__proto__ = {}; // hidden methods
@@ -133,14 +151,7 @@ const AccordionRootDisabledCSS = css`
     ${shadowNone};
 `;
 
-// Accordion.defaultProps = {
-//     boxShadow: true,
-//     className: '',
-//     disabled: false,
-//     expand: false,
-//     fullHeight: false,
-//     style: {},
-// };
+//Check defaultProps at src/theme/setting.js
 
 Accordion.propTypes = {
   /** The box-shadow of the component. */

package/components/accordion/summary.js

@@ -297,14 +297,7 @@ const SummaryRootCSS = (background, {
     }
 `;
 
-// AccordionSummary.defaultProps = {
-//     background: 'system/standard',
-//     className: '',
-//     expandIcon: 'ArrowRight',
-//     expandIconAt: 'start',
-//     expandIconProps: {},
-//     style: {},
-// };
+//Check defaultProps at src/theme/setting.js
 
 AccordionSummary.propTypes = {
   /** Background color for the label summary. */

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

@@ -1471,7 +1471,7 @@ Attachment.propTypes = {
   /** List attachment:<br />
    * [{<br />
    * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/demo.jpg",<br />
    * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
    * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
    * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />

package/components/form-control/date-input/DateField.js

@@ -44,7 +44,7 @@ export class DateField {
 /**
  * Pad a number with zeros to the left.
  */
-function padNumber(number, length) {
+const padNumber = (number, length) => {
   let numberString = String(number);
   if (numberString.length >= length) {
     return numberString;
@@ -54,7 +54,7 @@ function padNumber(number, length) {
     numberString = '0' + numberString;
   }
   return numberString;
-}
+};
 export const useDateField = (format, localize, date) => {
   const [dateField, dispatch] = useReducer((state, action) => {
     switch (action.type) {
@@ -105,10 +105,8 @@ export const useDateField = (format, localize, date) => {
       let value = dateField[key];
       if (value !== null) {
         if (pattern === 'MMM' && typeof value === 'number') {
-          // value = localize?.month(value - 1, { width: 'abbreviated' });
           value = localize === null || localize === void 0 ? void 0 : localize.months[['notFull']][value - 1];
         } else if (pattern === 'MMMM' && typeof value === 'number') {
-          // value = localize?.month(value - 1, { width: 'wide' });
           value = localize === null || localize === void 0 ? void 0 : localize.months[['full']][value - 1];
         } else if (pattern === 'aa') {
           if (typeof hour === 'number') {

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

@@ -2,19 +2,18 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { HelperText, Label } from "../..";
+import { getGlobal } from "../../../global";
+import locale from "../../../locale";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { cursorNotAllowed, displayBlock, positionRelative } from "../../../styles/general";
 import useThemeProps from "../../../theme/utils/useThemeProps";
-import { classNames, refType as ref } from "../../../utils";
+import { classNames, refType as ref, useControlled } from "../../../utils";
+import UncontrolledInputBase from "../input-base/UncontrolledInputBase";
+import useDateInputState from "./useDateInputState";
 import useIsFocused from "./useIsFocused";
 import useKeyboardInputEvent from "./useKeyboardInputEvent";
 import { getInputSelectedState, isFieldFullValue, useEventCallback, useInputSelection, validateDateTime } from "./utils";
-import { getGlobal } from "../../../global";
-import locale from "../../../locale";
-import useDateInputState from "./useDateInputState";
-import useControlled from "./useControlled";
-import UncontrolledInputBase from "../input-base/UncontrolledInputBase";
 const DateInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
@@ -60,7 +59,6 @@ const DateInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
   });
   const isError = !!error;
   const isEnabled = !readOnly && !disabled;
-  const _DateInputRoot = DateInputRoot();
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -141,12 +139,6 @@ const DateInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
     if (validateDateTime(field.name, padValue)) {
       newValue = padValue;
     }
-
-    // if (pattern === 'M') {
-    //     // Month cannot be less than 1.
-    //     newValue = Math.max(1, newValue);
-    // }
-
     setDateField(pattern, newValue, date => handleChange(date, event));
 
     // The currently selected month will be retained as a parameter of getInputSelectedState,
@@ -205,7 +197,7 @@ const DateInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
   }, [dateString, focused, isEmptyValue]);
   return jsx("div", {
     ref: ref,
-    css: _DateInputRoot,
+    css: DateInputRoot,
     className: classNames('DGN-UI-DateInput', className, disabled && 'disabled'),
     style: style,
     ...other
@@ -238,7 +230,7 @@ const DateInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
     disabled: disabled
   }, error));
 }));
-const DateInputRoot = () => css`
+const DateInputRoot = css`
     ${displayBlock};
     ${positionRelative};
     &.disabled {

package/components/form-control/date-input/useDateInputState.js

@@ -1,17 +1,16 @@
 import { useEffect } from 'react';
-// import startCase from 'lodash/startCase';
 import { addDays, addHours, addMinutes, addMonths, addSeconds, addYears, format, isLastDayOfMonth, isValid, lastDayOfMonth } from 'date-fns';
+import { enUS, vi } from 'date-fns/locale';
 import { getGlobal } from "../../../global";
 import { capitalize } from "../../../utils";
 import { patternMap, useDateField } from "./DateField";
 import { lowerCaseDayYear } from "./utils";
-import { enUS, vi } from 'date-fns/locale';
-export function useDateInputState({
+export const useDateInputState = ({
   formatStr,
   locale,
   date,
   isControlledDate
-}) {
+}) => {
   const {
     dateField,
     dispatch,
@@ -80,7 +79,6 @@ export function useDateInputState({
   };
   const setDateField = (pattern, value, callback) => {
     const field = patternMap[pattern];
-    // const actionName = `set${startCase(field)}`;
     const actionName = `set${capitalize(field)}`;
     dispatch({
       type: actionName,
@@ -97,7 +95,6 @@ export function useDateInputState({
   };
   const toControlledDateString = () => {
     if (date && isValid(date)) {
-      // return format(date, formatStr, { locale });
       return format(date, lowerCaseDayYear(formatStr), {
         locale: locale === 'vi' ? vi : enUS
       });
@@ -128,5 +125,5 @@ export function useDateInputState({
     toDateString: isControlledDate ? toControlledDateString : toDateString,
     isEmptyValue
   };
-}
+};
 export default useDateInputState;

package/components/form-control/date-input/useIsFocused.js

@@ -1,8 +1,8 @@
-import { useState, useCallback } from 'react';
-function useIsFocused({
+import { useCallback, useState } from 'react';
+const useIsFocused = ({
   onFocus: onFocusProp,
   onBlur: onBlurProp
-}) {
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const onFocus = useCallback(event => {
     setIsFocused(true);
@@ -16,5 +16,5 @@ function useIsFocused({
     onFocus,
     onBlur
   }];
-}
+};
 export default useIsFocused;

package/components/form-control/date-input/useKeyboardInputEvent.js

@@ -1,10 +1,10 @@
-function useKeyboardInputEvent({
+const useKeyboardInputEvent = ({
   onSegmentChange,
   onSegmentValueChange,
   onSegmentValueChangeWithNumericKeys,
   onSegmentValueRemove,
   onKeyDown
-}) {
+}) => {
   return event => {
     var _key$match;
     const {
@@ -41,5 +41,5 @@ function useKeyboardInputEvent({
     }
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
   };
-}
+};
 export default useKeyboardInputEvent;

package/components/form-control/date-input/utils.js

@@ -1,11 +1,11 @@
-import { setDate, setHours, setMinutes, setMonth, setSeconds, setYear } from 'date-fns';
+import { isValid, parse, setDate, setHours, setMinutes, setMonth, setSeconds, setYear } from 'date-fns';
 import { useCallback, useEffect, useRef } from 'react';
 
 /**
  * https://github.com/facebook/react/issues/14099#issuecomment-440013892
  * @param {function} fn
  */
-export function useEventCallback(fn) {
+export const useEventCallback = fn => {
   const ref = useRef(fn);
   useEffect(() => {
     ref.current = fn;
@@ -14,14 +14,13 @@ export function useEventCallback(fn) {
     var _ref$current;
     return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.call(ref, ...args);
   }, []);
-}
-export function safeSetSelection(element, selectionStart, selectionEnd) {
+};
+export const safeSetSelection = (element, selectionStart, selectionEnd) => {
   if (document.activeElement === element) {
     element.setSelectionRange(selectionStart, selectionEnd, 'none');
   }
-}
-export default safeSetSelection;
-export function getSelectIndexGap(options) {
+};
+export const getSelectIndexGap = options => {
   const {
     pattern,
     formatStr,
@@ -53,17 +52,15 @@ export function getSelectIndexGap(options) {
     } else if (month === 0) {
       month = 12;
     }
-
-    // const monthStr = localize?.months(month - 1, { width: monthIsFull ? 'full' : 'notFull' });
     const monthStr = localize === null || localize === void 0 ? void 0 : localize.months[[monthIsFull ? 'full' : 'notFull']][month - 1];
     gap = monthStr.length - (monthIsFull ? 4 : 3);
   }
   return gap;
-}
-export function isCursorAfterMonth(cursorIndex, formatStr) {
+};
+export const isCursorAfterMonth = (cursorIndex, formatStr) => {
   return cursorIndex > formatStr.indexOf('M');
-}
-export function getDatePattern(options) {
+};
+export const getDatePattern = options => {
   const {
     selectionIndex,
     positionOffset = -1,
@@ -99,8 +96,8 @@ export function getDatePattern(options) {
     });
   }
   return pattern;
-}
-export function getInputSelectedState(options) {
+};
+export const getInputSelectedState = options => {
   const {
     input,
     direction,
@@ -176,8 +173,8 @@ export function getInputSelectedState(options) {
     selectionStart: 0,
     selectionEnd: 0
   };
-}
-export function validateDateTime(type, value) {
+};
+export const validateDateTime = (type, value) => {
   switch (type) {
     case 'year':
       if (value < 1 || value > 9999) {
@@ -215,8 +212,8 @@ export function validateDateTime(type, value) {
   }
 
   return true;
-}
-export function modifyDate(date, type, value) {
+};
+export const modifyDate = (date, type, value) => {
   switch (type) {
     case 'year':
       return setYear(date, value);
@@ -232,12 +229,12 @@ export function modifyDate(date, type, value) {
       return setSeconds(date, value);
   }
   return date;
-}
-export function getPatternGroups(format, pattern) {
+};
+export const getPatternGroups = (format, pattern) => {
   var _format$match;
   return ((_format$match = format.match(new RegExp(`(${pattern})+`))) === null || _format$match === void 0 ? void 0 : _format$match[0]) || '';
-}
-export function isFieldFullValue(formatStr, value, pattern) {
+};
+export const isFieldFullValue = (formatStr, value, pattern) => {
   const patternGroup = getPatternGroups(formatStr, pattern);
   if (value.toString().length === patternGroup.length) {
     return true;
@@ -258,14 +255,14 @@ export function isFieldFullValue(formatStr, value, pattern) {
     default:
       return false;
   }
-}
-export function useInputSelection(input) {
+};
+export const useInputSelection = input => {
   return function setSelectionRange(selectionStart, selectionEnd) {
     requestAnimationFrame(() => {
       safeSetSelection(input.current, selectionStart, selectionEnd);
     });
   };
-}
+};
 
 // use yyyy instead of YYYY for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
 // use yy instead of YY for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
@@ -283,4 +280,12 @@ export const lowerCaseDayYear = dateString => {
     }
   }).join('');
   return modifiedString;
+};
+export const isValidDate = (dateString, format = 'MM/DD/YYYY') => {
+  if (dateString && dateString !== 'Invalid Date') {
+    if (isValid(dateString)) return true;
+    const parsedDate = parse(dateString, lowerCaseDayYear(format), new Date());
+    return isValid(parsedDate);
+  }
+  return false;
 };

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

@@ -11,9 +11,8 @@ import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useMemo, us
 import { cursorNotAllowed, displayBlock, displayFlex, flexRow, itemsCenter, justifyEnd, positionRelative } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
-import { capitalizeSentenceCase, classNames, isValidDate } from "../../../utils";
+import { capitalizeSentenceCase, classNames, isValidDate, useControlled } from "../../../utils";
 import Calendar from "../calendar";
-import useControlled from "../date-input/useControlled";
 import { lowerCaseDayYear } from "../date-input/utils";
 const unique = {
   footer: 'DGN-UI-DatePicker-Footer',