diginet-core-ui 1.3.63-beta.1 → 1.3.63-beta.2

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

@@ -175,7 +175,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           var _inputRef$current$chi;
 
           inputRef.current.innerHTML = inputRef.current.textContent.trim();
-          inputRef.current.contentEditable = true;
+          if (!allowSearch) inputRef.current.contentEditable = true;
           const caret = (_inputRef$current$chi = inputRef.current.childNodes) !== null && _inputRef$current$chi !== void 0 && _inputRef$current$chi.length ? 1 : 0;
           const range = document.createRange();
           range.setStart(inputRef.current, caret);
@@ -1202,7 +1202,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       inputRef.current.addEventListener('input', onChangeInput);
       !!onLoadMore && dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
     } else {
-      if (multiple) {
+      if (multiple || allowSearch) {
         inputRef.current.contentEditable = false;
       }
     }
@@ -1220,7 +1220,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         inputRef.current.removeEventListener('click', onClickInput);
         inputRef.current.removeEventListener('input', onChangeInput);
       } else {
-        if (multiple) {
+        if (multiple && !allowSearch) {
           inputRef.current.contentEditable = true;
         }
       }
@@ -1313,7 +1313,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         return false;
       }
     }) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
-      contentEditable: !disabled,
+      contentEditable: !disabled && !allowSearch,
       style: inputStyle,
       ref: inputRef,
       css: _DropdownInputCSS,
@@ -1330,7 +1330,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: _DropdownInputCSS,
       type: "text",
       placeholder: placeholder,
-      disabled: disabled
+      disabled: disabled || allowSearch
     })), jsx("div", {
       ref: iconRef,
       css: _IconCSS,
@@ -1752,7 +1752,7 @@ Dropdown.defaultProps = {
   readOnly: false,
   required: false,
   multiple: false,
-  allowSearch: false,
+  allowSearch: true,
   inputProps: {},
   formStyle: {},
   dataSource: [],

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

@@ -79,13 +79,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function(*): number}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function(*): number}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
 
   const parseNumberToMoney = useCallback((vl, isNumber) => {
@@ -119,13 +119,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
 
     return number;
   }, [decimalSymbol, max, value]);
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function(*): number}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function(*): number}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
 
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
@@ -397,10 +397,10 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: PropTypes.object,
 
-  /** 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]),
 

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

@@ -496,10 +496,10 @@ TextInput.propTypes = {
   /** on focus function */
   onFocus: 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]),
 

package/components/paging/page-info.js

@@ -586,23 +586,23 @@ PagingInfo.propTypes = {
   /** Callback fired when quantity on per page changed. */
   onChangePerPage: PropTypes.func,
 
-  /**
-   * Callback fired when page number is changing.
-   *
-   * * prevPage: Page before changed
-   * * newPage: Page after changed
-   * * cancel(value): Function cancel change page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when page number is changing.
+   *
+   * * prevPage: Page before changed
+   * * newPage: Page after changed
+   * * cancel(value): Function cancel change page
+   *  * @param {value} - bool
    */
   onChangingPage: PropTypes.func,
 
-  /**
-   * Callback fired when quantity on item per page is changing.
-   *
-   * * prevPerPage: Items per page before changed
-   * * newPerPage: Items per page after changed
-   * * cancel(value): Function cancel change items per page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when quantity on item per page is changing.
+   *
+   * * prevPerPage: Items per page before changed
+   * * newPerPage: Items per page after changed
+   * * cancel(value): Function cancel change items per page
+   *  * @param {value} - bool
    */
   onChangingPerPage: PropTypes.func,
 
@@ -615,15 +615,15 @@ PagingInfo.propTypes = {
   /** Compact type for mobile. */
   typeShort: PropTypes.bool,
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * onChangePage(page): Change page number
-   *  * @param {page} - number
-   * * onChangePerPage(per): Change quantity on per page
-   *  * @param {per} - number
-   * * setTotalItems(items): Set total items
-   *  * @param {items} - number
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * onChangePage(page): Change page number
+   *  * @param {page} - number
+   * * onChangePerPage(per): Change quantity on per page
+   *  * @param {per} - number
+   * * setTotalItems(items): Set total items
+   *  * @param {items} - number
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/status/index.js

@@ -1,103 +1,105 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useMemo, forwardRef, useRef } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { Typography } from '../';
 import Icon from '../../icons';
-import { alignCenter, backgroundTransparent, borderBox, inlineFlex, justifyCenter } from '../../styles/general';
-import { color as colors } from '../../styles/colors';
+import { alignCenter, backgroundTransparent, borderBox, flexRow } from '../../styles/general';
+import theme from '../../theme/settings';
+import OptionWrapper from '../others/option-wrapper';
 const {
-  system: {
-    active,
-    rest
-  },
-  semantic: {
-    success,
-    warning,
-    danger,
-    info
-  },
-  fill: {
-    sidebar
+  colors: {
+    system: {
+      active,
+      rest
+    },
+    semantic: {
+      success,
+      warning,
+      danger,
+      info
+    },
+    fill: {
+      sidebar
+    }
   }
-} = colors;
+} = theme;
 const colorMap = new Map([['default', rest], ['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
 const iconSizeMap = new Map([['small', '16px'], ['medium', '20px'], ['large', '24px']]);
 const typographySizeMap = new Map([['small', 'p3'], ['medium', 'p2'], ['large', 'p1']]);
-const filledPaddingSizeMap = new Map([['small', '0px 8px'], ['medium', '0px 12px'], ['large', '0px 16px']]);
+const filledPaddingSizeMap = new Map([['small', '2px 8px'], ['medium', '2px 12px'], ['large', '2px 12px']]);
 const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  style,
-  viewType,
-  size,
+  className,
+  color,
   icon,
+  size,
   text,
-  color,
-  className,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+  viewType,
+  id,
+  style
+}, reference) => {
+  const ref = useRef(null);
   const outlinedPaddingSize = filledPaddingSizeMap.get(size);
 
-  const _color = colorMap.get(color);
+  const _color = colorMap.get(color) || color || rest;
 
   const iconSize = iconSizeMap.get(size);
   const typographySize = typographySizeMap.get(size);
-  const StatusRoot = css`
-        ${inlineFlex}
-        ${alignCenter}
-        ${justifyCenter}
-        ${backgroundTransparent}
-        ${borderBox}
-        min-height: ${iconSize};
-        margin: 0 5px;
-        color: ${_color || color || rest};
-        &.filled {
-            color: ${sidebar};
-            background-color: ${_color || color || rest};
-            border-radius: 12px;
-            &.${size} {
-                padding: ${outlinedPaddingSize}
-            }
-        }
-    `;
-  const TextCSS = css`
-        white-space: nowrap;
-    `;
-  const StatusText = useMemo(() => jsx(Typography, {
+
+  const _StatusRoot = StatusRoot(iconSize, _color, size, outlinedPaddingSize);
+
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
+  const StatusIcon = typeof icon === 'string' ? jsx(Icon, {
+    name: icon,
+    width: iconSize,
+    height: iconSize,
+    color: 'currentColor',
+    viewBox: true
+  }) : icon;
+  const StatusText = jsx(Typography, {
     css: TextCSS,
     type: typographySize,
     color: 'inherit'
-  }, text), [text, size]);
-  const StatusIcon = useMemo(() => {
-    let node = icon;
+  }, text);
+  return useMemo(() => {
+    return jsx("div", {
+      css: _StatusRoot,
+      ref: ref,
+      id: id,
+      style: style,
+      className: ['DGN-UI-Status', viewType, size, className].join(' ').trim().replace(/\s+/g, ' ')
+    }, StatusIcon, StatusText);
+  }, [className, color, icon, size, text, viewType, id, style]);
+}));
 
-    if (typeof node === 'string') {
-      node = jsx(Icon, {
-        name: node,
-        width: iconSize,
-        height: iconSize,
-        color: 'currentColor',
-        viewBox: true
-      });
+const StatusRoot = (iconSize, color, size, outlinedPaddingSize) => css`
+    ${flexRow};
+    ${alignCenter};
+    ${backgroundTransparent};
+    ${borderBox};
+    gap: ${size === 'small' ? '2px' : '4px'};
+    min-height: ${iconSize};
+    color: ${color};
+    &.filled {
+        color: ${sidebar};
+        background-color: ${color};
+        border-radius: 12px;
+        &.${size} {
+            padding: ${outlinedPaddingSize};
+        }
     }
+`;
 
-    return node;
-  }, [icon]);
-  return jsx("div", {
-    css: StatusRoot,
-    style: style,
-    className: ['DGN-UI-Status', viewType, size, className].join(' ').trim().replace(/\s+/g, ' '),
-    ref: ref,
-    ...props
-  }, StatusIcon, StatusText);
-}));
+const TextCSS = css`
+    white-space: nowrap;
+`;
 Status.defaultProps = {
-  viewType: 'default',
+  viewType: 'ghost',
   text: '',
   icon: '',
   size: 'medium',
@@ -105,25 +107,26 @@ Status.defaultProps = {
   style: {}
 };
 Status.propTypes = {
-  /** type of status, has background or none */
-  viewType: PropTypes.oneOf(['filled', 'default']),
+  /** Class for component. */
+  className: PropTypes.string,
 
-  /** size of status */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** The color of the component. */
+  color: PropTypes.string,
 
-  /** content to display in status */
-  text: PropTypes.string,
+  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed before the content. */
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** color of text or background */
-  color: PropTypes.string,
+  /** The size of the component. */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
 
-  /** class of Status component */
-  className: PropTypes.string,
+  /** The content of the component. */
+  text: PropTypes.string,
 
-  /** style inline for Status */
-  style: PropTypes.object,
+  /** The variant to use. */
+  viewType: PropTypes.oneOf(['filled', 'default', 'ghost']),
 
-  /** icon to display before content, allow name of icons store */
-  icon: PropTypes.any
+  /** Style inline of component. */
+  style: PropTypes.object
 };
-export default Status;
+export { Status };
+export default OptionWrapper(Status);

package/components/tree-view/index.js

@@ -227,8 +227,8 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         el.classList[isChecked ? 'add' : 'remove']('disabled');
 
         if (el.classList.contains('DGN-UI-Accordion')) {
-          el.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild.classList[isChecked ? 'add' : 'remove']('disabled');
-          el.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild.disabled = isChecked;
+          el.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild.classList[isChecked ? 'add' : 'remove']('disabled');
+          el.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild.disabled = isChecked;
           Array.from(el.childNodes).forEach(e => {
             e.classList[isChecked ? 'add' : 'remove']('treeview-disabled');
           });
@@ -248,7 +248,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (node.classList.contains('DGN-UI-Accordion') && node.firstChild.classList.contains('DGN-UI-Accordion-Summary')) {
         var _node$querySelectorAl;
 
-        const checkbox = node.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild; // Trường hợp phải set về false để xét các input đã check không bao gồm node này
+        const checkbox = node.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild; // Trường hợp phải set về false để xét các input đã check không bao gồm node này
 
         checkbox.firstChild.checked = isChecked;
         const mustDisabled = !!((_node$querySelectorAl = node.querySelectorAll('input:checked')) !== null && _node$querySelectorAl !== void 0 && _node$querySelectorAl.length); // Nếu có ít nhất một input con được check thì phải checked cho input này

package/package.json

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