diginet-core-ui 1.4.66-beta.3 → 1.4.66-beta.4

package/components/button/icon.js

@@ -109,11 +109,8 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     currentRef.instance = _instance;
     return currentRef;
   });
-  return useMemo(() => {
-    return jsx(Tooltip, {
-      title: title,
-      disableInteractive: !title
-    }, jsx("button", {
+  const renderBtn = () => {
+    let result = jsx("button", {
       css: [_ButtonRootCSS, _ButtonSizeCSS],
       ref: ref,
       id: id,
@@ -133,7 +130,15 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       ref: rippleRef,
       color: getRippleColor(colorProp, viewType, colors),
       circular: circular
-    })));
+    }));
+    if (title) result = jsx(Tooltip, {
+      title: title,
+      disableInteractive: !title
+    }, result);
+    return result;
+  };
+  return useMemo(() => {
+    return renderBtn();
   }, [children, circular, className, colorHover, colorProp, disabled, height, id, loading, name, onClick, size, style, viewBox, viewType, width, theme, title]);
 }));
 const ButtonIconCSS = iconSize => css`
@@ -314,14 +319,14 @@ ButtonIcon.propTypes = {
   onClick: PropTypes.func,
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
   /** Style inline of component. */
@@ -332,19 +337,19 @@ ButtonIcon.propTypes = {
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
 };
 export { ButtonIcon };

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

@@ -573,7 +573,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       // Add event listener click out of item
       if (!existClickOutOfItem.current) {
         existClickOutOfItem.current = true;
-        attachmentHandleIconRef.current.style.display = 'block';
+        attachmentHandleIconRef.current.style.display = 'flex';
         document.addEventListener('keydown', onKeyDown);
         document.addEventListener('click', clickOutOfItem);
       }

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

@@ -119,6 +119,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const iconRef = useRef(null);
   const ipConRef = useRef(null);
   const ipRef = useRef(null);
+  const iconCloseRef = useRef(null);
   const pickerRef = useRef(null);
   const tableFrRef = useRef(null);
   const tableToRef = useRef(null);
@@ -593,22 +594,25 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     const t = iconRef.current.childNodes[+open];
     if (open) {
       Object.assign(t.style, {
-        ...hiddenStyle
+        ...activeStyle
       });
       Object.assign(t.previousSibling.style, {
         ...activeStyle
       });
       setTimeout(() => {
+        t.style.pointerEvents = null;
         t.previousSibling.style.pointerEvents = null;
+        if (iconCloseRef.current) Object.assign(iconCloseRef.current.style, hiddenStyle);
       }, 200);
     } else {
       Object.assign(t.style, {
-        ...hiddenStyle
+        ...activeStyle
       });
       Object.assign(t.nextSibling.style, {
         ...activeStyle
       });
       setTimeout(() => {
+        t.style.pointerEvents = null;
         t.nextSibling.style.pointerEvents = null;
       }, 200);
     }
@@ -995,17 +999,18 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     css: IconAreaCSS,
     ref: iconRef
   }, jsx(ButtonIcon, {
-    viewType: 'ghost',
-    onClick: triggerFocus,
-    className: `${unique.icon} ${unique.icon}-accept`,
-    viewBox: true,
-    name: 'Calendar'
-  }), jsx(ButtonIcon, {
+    ref: iconCloseRef,
     viewType: 'ghost',
     onClick: onClear,
     className: `${unique.icon} ${unique.icon}-cancel`,
     viewBox: true,
     name: 'Close'
+  }), jsx(ButtonIcon, {
+    viewType: 'ghost',
+    onClick: triggerFocus,
+    className: `${unique.icon} ${unique.icon}-accept`,
+    viewBox: true,
+    name: 'Calendar'
   })) : null;
   const endIcon = actionIconAt === 'end' && iconComp;
   const startIcon = actionIconAt === 'start' && iconComp;
@@ -1321,6 +1326,7 @@ const buttonProps = ({
   }
 });
 const IconAreaCSS = css`
+    display: flex;
     .${unique.icon} {
         ${displayNone};
         ${cursorPointer};

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

@@ -110,7 +110,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     total,
     treeViewID,
     treeViewParentID,
-    value: valueProp,
+    value: valueProp = '',
     valueExpr,
     valueObjectDefault,
     viewType,
@@ -1754,33 +1754,6 @@ const CheckBoxCSS = ({
 `;
 /* End styled */
 
-// Dropdown.defaultProps = {
-//     allowSearch: true,
-//     className: '',
-//     clearAble: false,
-//     dataSource: [],
-//     disabled: false,
-//     displayExpr: 'name',
-//     error: '',
-//     iconExpr: 'none',
-//     inputProps: {},
-//     itemMode: 'normal',
-//     label: '',
-//     limit: 50,
-//     loading: false,
-//     multilineSelectedItem: false,
-//     multiple: false,
-//     noDataText: getGlobal('noDataText'),
-//     placeholder: getGlobal('dropdownPlaceholder'),
-//     readOnly: false,
-//     required: false,
-//     searchDelayTime: getGlobal('delayOnInput'),
-//     searchMode: 'contains',
-//     total: Number.MAX_SAFE_INTEGER,
-//     valueExpr: 'id',
-//     viewType: 'underlined',
-// };
-
 Dropdown.propTypes = {
   action: PropTypes.shape({
     loadData: PropTypes.func

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

@@ -60,7 +60,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
     ...other
   } = props;
   const autoWidth = !autoWidthProp && inputProps !== null && inputProps !== void 0 && inputProps.autoWidth ? inputProps.autoWidth : autoWidthProp;
-  const delayOnChange = delayOnChangeProp || getGlobal('delayOnInput');
+  const delayOnChange = delayOnChangeProp !== null && delayOnChangeProp !== void 0 ? delayOnChangeProp : getGlobal('delayOnInput');
   const placeholder = placeholderProp || getGlobal('inputPlaceholder');
   const _onChange = e => {
     onChange && onChange(e);

package/icons/basic.js

@@ -6887,6 +6887,36 @@ export const Treeview = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const TruckApproval = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = 'system/rest',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9 8.19983L4.42823 13L1 9.39967L2.14274 8.19983L4.42823 10.5995L7.85726 7L9 8.19983Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4.875 19.125C4.29167 18.5417 4 17.8333 4 17H1.5L1.95 15H4.775C5.05833 14.6833 5.39167 14.4375 5.775 14.2625C6.15833 14.0875 6.56667 14 7 14C7.43333 14 7.84167 14.0875 8.225 14.2625C8.60833 14.4375 8.94167 14.6833 9.225 15H13.4L15.5 6H6.55L6.975 4H18L17.075 8H20L23 12L22 17H20C20 17.8333 19.7083 18.5417 19.125 19.125C18.5417 19.7083 17.8333 20 17 20C16.1667 20 15.4583 19.7083 14.875 19.125C14.2917 18.5417 14 17.8333 14 17H10C10 17.8333 9.70833 18.5417 9.125 19.125C8.54167 19.7083 7.83333 20 7 20C6.16667 20 5.45833 19.7083 4.875 19.125ZM15.925 13H20.75L20.85 12.475L19 10H16.625L15.925 13ZM15.5 6L13.4 15L13.45 14.825L15.5 6ZM7 18C7.28333 18 7.52083 17.9042 7.7125 17.7125C7.90417 17.5208 8 17.2833 8 17C8 16.7167 7.90417 16.4792 7.7125 16.2875C7.52083 16.0958 7.28333 16 7 16C6.71667 16 6.47917 16.0958 6.2875 16.2875C6.09583 16.4792 6 16.7167 6 17C6 17.2833 6.09583 17.5208 6.2875 17.7125C6.47917 17.9042 6.71667 18 7 18ZM17 18C17.2833 18 17.5208 17.9042 17.7125 17.7125C17.9042 17.5208 18 17.2833 18 17C18 16.7167 17.9042 16.4792 17.7125 16.2875C17.5208 16.0958 17.2833 16 17 16C16.7167 16 16.4792 16.0958 16.2875 16.2875C16.0958 16.4792 16 16.7167 16 17C16 17.2833 16.0958 17.5208 16.2875 17.7125C16.4792 17.9042 16.7167 18 17 18Z",
+    fill: fillColor(color)
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 22,
+    height: height || 16,
+    viewBox: "0 0 22 16",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 4.19983L3.42823 9L0 5.39967L1.14274 4.19983L3.42823 6.5995L6.85726 3L8 4.19983Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M3.875 15.125C3.29167 14.5417 3 13.8333 3 13H0.5L0.95 11H3.775C4.05833 10.6833 4.39167 10.4375 4.775 10.2625C5.15833 10.0875 5.56667 10 6 10C6.43333 10 6.84167 10.0875 7.225 10.2625C7.60833 10.4375 7.94167 10.6833 8.225 11H12.4L14.5 2H5.55L5.975 0H17L16.075 4H19L22 8L21 13H19C19 13.8333 18.7083 14.5417 18.125 15.125C17.5417 15.7083 16.8333 16 16 16C15.1667 16 14.4583 15.7083 13.875 15.125C13.2917 14.5417 13 13.8333 13 13H9C9 13.8333 8.70833 14.5417 8.125 15.125C7.54167 15.7083 6.83333 16 6 16C5.16667 16 4.45833 15.7083 3.875 15.125ZM14.925 9H19.75L19.85 8.475L18 6H15.625L14.925 9ZM14.5 2L12.4 11L12.45 10.825L14.5 2ZM6 14C6.28333 14 6.52083 13.9042 6.7125 13.7125C6.90417 13.5208 7 13.2833 7 13C7 12.7167 6.90417 12.4792 6.7125 12.2875C6.52083 12.0958 6.28333 12 6 12C5.71667 12 5.47917 12.0958 5.2875 12.2875C5.09583 12.4792 5 12.7167 5 13C5 13.2833 5.09583 13.5208 5.2875 13.7125C5.47917 13.9042 5.71667 14 6 14ZM16 14C16.2833 14 16.5208 13.9042 16.7125 13.7125C16.9042 13.5208 17 13.2833 17 13C17 12.7167 16.9042 12.4792 16.7125 12.2875C16.5208 12.0958 16.2833 12 16 12C15.7167 12 15.4792 12.0958 15.2875 12.2875C15.0958 12.4792 15 12.7167 15 13C15 13.2833 15.0958 13.5208 15.2875 13.7125C15.4792 13.9042 15.7167 14 16 14Z",
+    fill: fillColor(color)
+  }));
+});
 export const TwoSquare = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

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