diginet-core-ui 1.3.65 → 1.3.66

package/components/chip/attach.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { Fragment, memo, useMemo, useRef, useState, forwardRef as _nonUse } from 'react';
+import { Fragment, memo, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import Chip from './';
@@ -27,7 +27,7 @@ const AttachChip = /*#__PURE__*/memo(({
 }) => {
   const moreActionRef = useRef(null);
   const [open, setOpen] = useState(false);
-  const MoreAction = css` 
+  const MoreAction = css`
         display: none;
         justify-content: space-evenly;
         align-items: center;
@@ -36,7 +36,7 @@ const AttachChip = /*#__PURE__*/memo(({
         right: -1px;
         width: 120px;
         height: 36px;
-        background: #FFFFFF;
+        background: #ffffff;
         box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
         border-radius: 4px;
         &.DGN-UI-Chip-show {
@@ -156,11 +156,11 @@ const AttachChip = /*#__PURE__*/memo(({
   }))), attachView);
 });
 AttachChip.propTypes = {
-  /** the file info, such as:<br/>
-   * {<br/>
-   *  URL: https://url.com/pathname,<br/>
-   *  FileName: file.name,<br/>
-   * }
+  /** the file info, such as:<br/>
+   * {<br/>
+   *  URL: https://url.com/pathname,<br/>
+   *  FileName: file.name,<br/>
+   * }
    */
   file: PropTypes.shape({
     URL: PropTypes.string.isRequired,

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

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { date as moment } from '../../../utils';
@@ -41,8 +41,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       limit: 'DGN-UI-Calendar-Day-limit'
     }
   };
-  /**
-   * START REFERENCE
+  /**
+   * START REFERENCE
    */
 
   const ref = useRef(null);
@@ -61,12 +61,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const firstDayOfMax = new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
   const firstDayOfMin = new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
-  /**
-   * END REFERENCE
+  /**
+   * END REFERENCE
    */
 
-  /**
-   * START FUNCTION
+  /**
+   * START FUNCTION
    */
 
   const onUpdateNavigatorValue = useCallback(value => {
@@ -152,12 +152,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
     }
   };
-  /**
-   * END FUNCTION
+  /**
+   * END FUNCTION
    */
 
-  /**
-   * START EFFECT
+  /**
+   * START EFFECT
    */
 
 
@@ -198,12 +198,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdate(activeValue.current);
     }
   }, [onClick, min, max]);
-  /**
-   * END FUNCTION
+  /**
+   * END FUNCTION
    */
 
-  /**
-   * START COMPONENT
+  /**
+   * START COMPONENT
    */
 
   const tableMemo = jsx("div", {
@@ -212,8 +212,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: unique.table.table,
     ref: tableRef
   }, renderHeader(unique), jsx("tbody", null)));
-  /**
-   * END COMPONENT
+  /**
+   * END COMPONENT
    */
 
   return jsx("div", { ...props,

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

@@ -4,16 +4,9 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { render } from 'react-dom';
 import { Divider } from '../..';
-import { getGlobal } from '../../../global';
-import Icon from '../../../icons';
-import locale from '../../../locale';
 import theme from '../../../theme/settings';
-import { date as moment, randomString } from '../../../utils';
-import Typography from '../../typography';
 import { generateCalendarCSS, isValidDate, onUpdateCalendar, renderHeader, renderNavigator } from './function';
-import Calendar from './index';
 const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actions,
   defaultValue,
@@ -104,19 +97,19 @@ const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
   const containerCSS = css`
-        background-color: ${theme.colors.white};
-        border-radius   : ${theme.border.radius};
-        box-shadow      : ${theme.boxShadows.large};
-        display         : flex;
-        @media only screen and (max-width: 599px) {
-            flex-direction: column;
-            .${unique.divider} {
-                height: 1px !important;
-                margin: 0px 16px !important;
-                width: calc(100% - 32px) !important;
+            background-color: ${theme.colors.white};
+            border-radius: ${theme.border.radius};
+            box-shadow: ${theme.boxShadows.large};
+            display: flex;
+            @media only screen and (max-width: 599px) {
+                flex-direction: column;
+                .${unique.divider} {
+                    height: 1px !important;
+                    margin: 0px 16px !important;
+                    width: calc(100% - 32px) !important;
+                }
             }
-        }
-    `;
+        `;
   const dividerProps = {
     direction: 'vertical',
     className: unique.divider,
@@ -172,8 +165,8 @@ const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const onDayHover = e => {
-    const hoverTime = parseInt(e.target.dataset.time, 10); // console.log(hoverTime);
+  const onDayHover = () => {// const hoverTime = parseInt(e.target.dataset.time, 10);
+    // console.log(hoverTime);
   };
 
   const onPickerHover = e => {
@@ -182,19 +175,17 @@ const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else {
       clearHovering(e.currentTarget);
     }
-  };
-
-  const onUpdateFrom = value => {
-    const newValue = new Date(value).setHours(0, 0, 0, 0);
-    onUpdateActiveValueFr(newValue);
-    onUpdateCalendar(newValue, navigatorFromRefs, min, max, tableFrRef.current, [activeValueFr.current, activeValueTo.current], unique.from, displayAnotherMonth, onCalFrClick, onUpdateNavigatorValueFr);
-  };
+  }; // const onUpdateFrom = (value) => {
+  //     const newValue = new Date(value).setHours(0, 0, 0, 0);
+  //     onUpdateActiveValueFr(newValue);
+  //     onUpdateCalendar(newValue, navigatorFromRefs, min, max, tableFrRef.current, [activeValueFr.current, activeValueTo.current], unique.from, displayAnotherMonth, onCalFrClick, onUpdateNavigatorValueFr);
+  // };
+  // const onUpdateTo = (value) => {
+  //     const newValue = new Date(value).setHours(0, 0, 0, 0);
+  //     onUpdateActiveValueTo(newValue);
+  //     onUpdateCalendar(newValue, navigatorToRefs, min, max, tableToRef.current, [activeValueFr.current, activeValueTo.current], unique.to, displayAnotherMonth, onCalToClick, onUpdateNavigatorValueTo);
+  // };
 
-  const onUpdateTo = value => {
-    const newValue = new Date(value).setHours(0, 0, 0, 0);
-    onUpdateActiveValueTo(newValue);
-    onUpdateCalendar(newValue, navigatorToRefs, min, max, tableToRef.current, [activeValueFr.current, activeValueTo.current], unique.to, displayAnotherMonth, onCalToClick, onUpdateNavigatorValueTo);
-  };
 
   const onUpdateNavigatorValue = values => {
     const fr = new Date(values[0]);
@@ -254,6 +245,15 @@ const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdate(defaultValue);
     }
   }, []);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return jsx("div", { ...props,
     className: unique.container,
     onMouseOver: onPickerHover,

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

@@ -358,6 +358,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     document.documentElement.style.overflow = 'auto';
+    if (searchRef.current) lastSearchRef.current = '';
     onClosed === null || onClosed === void 0 ? void 0 : onClosed();
   };
 
@@ -1411,7 +1412,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
     ${borderNone};
     ${paragraph1};
     width: 100%;
-    color: ${disabled ? systemDisabled : main};
+    color: ${main};
     padding-top: 0;
     padding-bottom: ${viewType !== 'outlined' ? 0 : 'inherit'};
     padding-left: ${viewType !== 'outlined' ? 0 : spacing([4])};

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React, { memo, useMemo, useRef, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import FormContext from './context';

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

@@ -1,17 +1,17 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import useInput from '../../../utils/useInput';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { renderIcon } from '../../../utils';
 import theme from '../../../theme/settings';
 import { typography } from '../../../styles/typography';
 const {
   colors
 } = theme;
 import { getGlobal } from '../../../global';
+import Icon from '../../../icons';
 const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   viewType,
@@ -557,26 +557,46 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onFocus: onFocus,
     ...bind
   }));
+  const StartIcon = useMemo(() => {
+    let node = startIcon;
+
+    if (typeof node === 'string') {
+      node = jsx(Icon, {
+        name: startIcon,
+        style: iconStyle
+      });
+    }
+
+    return jsx("div", {
+      css: inputBaseIconCSS,
+      ...startIconProps,
+      className: ['start-icon', startIconProps.className ? startIconProps.className : ''].join(' ').trim()
+    }, node);
+  }, [startIcon]);
+  const EndIcon = useMemo(() => {
+    let node = endIcon;
+
+    if (typeof node === 'string') {
+      node = jsx(Icon, {
+        name: endIcon,
+        style: iconStyle
+      });
+    }
+
+    return jsx("div", {
+      css: inputBaseIconCSS,
+      ...endIconProps,
+      className: ['end-icon', endIconProps.className ? endIconProps.className : ''].join(' ').trim()
+    }, ' ', node, ' ');
+  }, [endIcon]);
   const InputComp = jsx("div", {
     css: inputBaseRoot,
     ref: ref,
     ...props,
     className: ['DGN-UI-InputBase', newClass, className, status].join(' ').trim()
-  }, jsx("div", {
+  }, startIcon && StartIcon, jsx("div", {
     css: inputBaseCSS
-  }, !!startIcon && jsx("div", {
-    css: inputBaseIconCSS,
-    ...startIconProps,
-    className: 'start-icon ' + (startIconProps.className ? startIconProps.className : '')
-  }, renderIcon(startIcon, typeof startIcon === 'string' && startIcon.length < 20 ? 'effect' : null, {
-    onClick: startIconProps.onClick ? null : () => inputBaseRef.current.focus(),
-    style: {
-      padding: 0,
-      minHeight: '24px',
-      ...iconStyle
-    },
-    viewBox: true
-  })), jsx("input", {
+  }, jsx("input", {
     type: type,
     autoComplete: autoComplete,
     placeholder: isEnabled ? placeholder : '',
@@ -593,18 +613,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onBlur: onBlur,
     onFocus: onFocus,
     ...bind
-  })), !!endIcon && jsx("div", {
-    css: inputBaseIconCSS,
-    ...endIconProps,
-    className: 'end-icon ' + (endIconProps.className ? endIconProps.className : '')
-  }, renderIcon(endIcon, null, {
-    style: {
-      padding: 0,
-      minHeight: '24px',
-      ...iconStyle
-    },
-    viewBox: true
-  })));
+  })), endIcon && EndIcon);
   const InputBaseComp = multiline ? MultipleInputComp : InputComp;
   /* End component */
 
@@ -690,10 +699,10 @@ InputBase.propTypes = {
   required: PropTypes.bool,
 
   /** icon element display in the left of input */
-  startIcon: PropTypes.any,
+  startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /** icon element display in the right of input */
-  endIcon: PropTypes.any,
+  endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /** props of input in InputBase component */
   inputProps: PropTypes.object,

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

@@ -1,59 +1,77 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useMemo, forwardRef } from 'react';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
+import OptionWrapper from '../../others/option-wrapper';
 import { Typography } from '../../';
-import { color as colors } from '../../../styles/colors';
+import { flexRow } from '../../../styles/general';
+import theme from '../../../theme/settings';
 const {
-  system: {
-    disabled: systemDisabled
-  },
-  semantic: {
-    danger
-  },
-  text: {
-    normal_label
+  colors: {
+    system: {
+      disabled: systemDisabled
+    },
+    semantic: {
+      danger
+    },
+    text: {
+      normal_label
+    }
   }
-} = colors;
+} = theme;
 const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  required,
-  children,
   disabled,
   readOnly,
+  required,
   className,
+  children,
+  type,
   lineClamp,
+  hoverTooltip,
+  id,
+  color,
   ...props
-}, ref) => {
-  const LabelComp = useMemo(() => jsx(Typography, {
-    fullWidth: false,
+}, reference) => {
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
+  return useMemo(() => jsx("div", {
+    css: LabelContainerCSS,
+    className: 'DGN-UI-Label-Container'
+  }, jsx(Typography, {
+    css: LabelRootCSS,
     ref: ref,
+    id: id,
+    fullWidth: false,
     mapping: 'label',
-    css: LabelRootCSS,
+    color: readOnly || disabled ? systemDisabled : color,
     lineClamp: lineClamp,
+    hoverTooltip: hoverTooltip,
+    type: type,
     className: ['DGN-UI-Label', className, readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' ').trim().replace(/\s+/g, ' '),
     ...props
-  }, children, required ? jsx("span", {
+  }, children), required && jsx("span", {
     className: 'required'
-  }, " *") : null), [children, required, readOnly, disabled]);
-  return LabelComp;
+  }, " *")), [disabled, readOnly, required, className, children, type, lineClamp, hoverTooltip, color, props]);
 }));
-const LabelRootCSS = css`
-    min-height: 16px;
-    margin: 0px;
-    &.read-only,
-    &.disabled {
-        color: ${systemDisabled};
-    }
+const LabelContainerCSS = css`
+    ${flexRow};
     .required {
         color: ${danger};
     }
+`;
+const LabelRootCSS = css`
+    min-height: 16px;
     & + .DGN-UI-InputBase.outlined {
         margin-top: 2px;
     }
+    word-break: break-all;
 `;
-Label.defaultProps = { ...Typography.defaultProps,
+Label.defaultProps = {
   type: 'h6',
   color: normal_label,
   lineClamp: 1,
@@ -63,28 +81,34 @@ Label.defaultProps = { ...Typography.defaultProps,
   className: '',
   children: ''
 };
+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'];
 Label.propTypes = {
-  /** prevent all event if true, hide all icon */
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /** prevent all event if true */
+  /** If `true`, the component is readonly. */
   readOnly: PropTypes.bool,
 
-  /** auto focus after first render */
+  /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
 
-  /** class use for label tag */
-  className: PropTypes.string,
+  /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
+  color: PropTypes.string,
 
-  /** the content to display as label */
-  children: PropTypes.node,
+  /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
+  lineClamp: PropTypes.number,
+
+  /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
+  hoverTooltip: PropTypes.bool,
 
-  /** any props else */
-  props: PropTypes.any,
-  // Reuse from Typography
-  type: Typography.propTypes.type,
-  lineClamp: Typography.propTypes.lineClamp,
-  hoverTooltip: Typography.propTypes.hoverTooltip,
-  color: Typography.propTypes.color
+  /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
+  type: PropTypes.oneOf(arrTypeTypography)
 };
-export default Label;
+export { Label };
+export default OptionWrapper(Label);

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

@@ -24,17 +24,13 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   startIcon,
   endIcon,
   valueTypeReturn,
-  autoComplete,
   autoFocus,
   disabled,
   readOnly,
   refs,
   inputRef,
   inputProps,
-  iconStyle,
   inputStyle,
-  labelProps,
-  errorProps,
   error,
   format,
   onChange,
@@ -61,14 +57,14 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const separatorSymbol = useRef(decimalSymbol === '.' ? ',' : '.');
   const updated = useRef(false);
   const [decimalDigit, setDecimalDigit] = useState(decimalDigitProp);
-  const formatPattern = new RegExp(`[0-9]|Backspace|Delete|Arrow|Home|End|Tab${decimalDigit === 0 ? '' : '|\\' + decimalSymbol}${disabledNegative ? '' : '|\-'}`);
+  const formatPattern = new RegExp(`[0-9]|Backspace|Delete|Arrow|Home|End|Tab${decimalDigit === 0 ? '' : '|\\' + decimalSymbol}${disabledNegative ? '' : '|-'}`);
   /* Start styled */
 
   const NumberInputRoot = css`
-        display: block;
-        position: relative;
-        margin-bottom: 20px;
-    `;
+                display: block;
+                position: relative;
+                margin-bottom: 20px;
+            `;
   /* End styled */
 
   /* Start handler */
@@ -552,9 +548,6 @@ NumberInput.propTypes = {
   /** error for input */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /** type auto complete of input (like new-password) */
-  autoComplete: PropTypes.string,
-
   /** icon at start */
   startIcon: PropTypes.any,
 
@@ -585,29 +578,23 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: PropTypes.object,
 
-  /** any props of label in NumberInput component */
-  labelProps: PropTypes.object,
-
-  /** any props of error in NumberInput component */
-  errorProps: PropTypes.object,
-
-  /**
-   * the format to display value<br/>
-   * * function: value => function(value)<br/>
-   * * string: Example: '#.###', '# ###', '#.### 2%', '#.### %%'<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;#: integer part digit<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;. / '_': separator symbol<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;%: decimal digit, '2%' === '%%'
+  /**
+   * the format to display value<br/>
+   * * function: value => function(value)<br/>
+   * * string: Example: '#.###', '# ###', '#.### 2%', '#.### %%'<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;#: integer part digit<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;. / '_': separator symbol<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;%: decimal digit, '2%' === '%%'
    */
   format: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
   /** The function to get ref of NumberInput component */
   refs: PropTypes.func,
 
-  /** 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]),