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

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

@@ -224,8 +224,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     })) : null);
   };
   const moveOnItem = e => {
-    if (e.key === 'Escape' || e.key === 'Tab') {
-      closeDropdown();
+    if (e.key === 'Tab') {
+      closeDropdown(e, `key${e.key}`);
       triggerBlur();
     }
     if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
@@ -241,28 +241,31 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     }
   };
   const pressESCHandler = e => {
-    if (e.key === 'Escape' || e.key === 'Tab') {
-      closeDropdown();
+    if (e.key === 'Tab') {
+      closeDropdown(e, `key${e.key}`);
       triggerBlur();
     } else if (e.key === 'ArrowDown' && dropdownListRef.current) {
       e.preventDefault();
       dropdownListRef.current.firstChild.focus();
     }
   };
-  const closeDropdown = () => {
+  const closeDropdown = (event, reason, value) => {
     var _searchRef$current;
     if (dropdownRef.current) {
       setOpenState(false);
     }
     onClosed === null || onClosed === void 0 ? void 0 : onClosed({
-      recentSearch: (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.value
+      event,
+      reason,
+      recentSearch: (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.value,
+      value
     });
   };
 
-  /**
-   * So sánh text đầu vào cáo map với txtSearch
-   * @param text
-   * @return {boolean}
+  /**
+   * So sánh text đầu vào cáo map với txtSearch
+   * @param text
+   * @return {boolean}
    */
   const handleRenderBySearch = (text = '') => {
     if (typeof text !== 'string') text = text.toString();
@@ -274,10 +277,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     } else return text.toLowerCase().includes(txtSearch.toLowerCase());
   };
 
-  /**
-   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
-   * @param data {object} rowData of dataSource
-   * @return {string}
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
    */
   const displayValue = data => {
     let text = '';
@@ -375,20 +378,20 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
           checked: checked,
           value: value,
           disabled: itemDisabled,
-          onChange: () => onChangeValue(displayText, value, icon, data, index)
+          onChange: e => onChangeValue(e, displayText, value, icon, data, index)
         }, icon, text)));
       } else {
         items.push(jsx("div", {
           key: index,
           css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
           className: 'DGN-UI-Dropdown-Item',
-          onClick: () => {
+          onClick: e => {
             if (itemDisabled) return;
-            onChangeValue(displayText, value, icon, data, index);
+            onChangeValue(e, displayText, value, icon, data, index);
           },
           onKeyDown: e => {
             if (itemDisabled) return;
-            if (e.key === 'Enter') onChangeValue(displayText, value, icon, data, index);
+            if (e.key === 'Enter') onChangeValue(e, displayText, value, icon, data, index);
           },
           tabIndex: -1,
           style: dropdownItemStyle
@@ -427,7 +430,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       id: treeViewID,
       parentID: treeViewParentID,
       value: typeof currentValue[unique] === 'string' ? [currentValue[unique]] : currentValue[unique],
-      onChange: (e, value) => onChangeValue('', multiple ? value : e.value),
+      onChange: (e, value) => onChangeValue(e, '', multiple ? value : e.value),
       renderItem: renderItem
     }) : EmptyDataText);
   };
@@ -487,7 +490,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       const dropdownItem = document.createElement('div');
       dropdownItem.className = `DGN-UI-Dropdown-Item css-${_DropdownItemCSS.name}`;
       dropdownItem.tabIndex = -1;
-      dropdownItem.addEventListener('click', () => onChangeValue(displayText, value, icon, data, i));
+      dropdownItem.addEventListener('click', e => onChangeValue(e, displayText, value, icon, data, i));
       dropdownItem.addEventListener('keypress', e => {
         if (e.key === 'Enter') dropdownItem.firstChild.click();
       });
@@ -655,7 +658,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       handleActionLoadData(true);
     }
   };
-  const onChangeValue = (displayText, value, icon, data) => {
+  const onChangeValue = (e, displayText, value, icon, data) => {
     if (itemMode === 'treeview') {
       if (valueProp === undefined) {
         setValueMulti(value);
@@ -699,7 +702,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       }
     }
     if (closeAfterSelect === true || closeAfterSelect === undefined && !multiple) {
-      closeDropdown();
+      closeDropdown(e, 'changeValue', value);
     }
   };
   const onRemove = (e, value) => {
@@ -820,7 +823,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       setValueSingle(el);
     } else if (iconExpr && iconExpr !== 'none') {
       const icon = getIconFromData(data);
-      const valueWithIcon = jsx(Fragment, null, icon && icon, renderContent(text));
+      const valueWithIcon = jsx(Fragment, null, icon ? icon : null, renderContent(text));
       const el = jsx("div", {
         css: [displayFlex, itemsCenter, parseMinHeight(24)]
       }, valueWithIcon);
@@ -834,7 +837,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     const _instance = {
       ...action,
       closeDropdown: () => {
-        closeDropdown();
+        closeDropdown(null, 'ref');
       },
       showDropdown: () => {
         setOpenState(true);
@@ -852,7 +855,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     _instance.__proto__ = {}; // hidden methods
     currentRef.instance = _instance;
     // keep old method
-    currentRef.closeDropdown = () => closeDropdown();
+    currentRef.closeDropdown = () => closeDropdown(null, 'ref');
     currentRef.showDropdown = () => setOpenState(true);
     currentRef.onClear = onClear;
     currentRef.setPreviousValue = setPreviousValue;
@@ -910,7 +913,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     }
     return () => {
       allValue[unique] = null;
-      closeDropdown();
+      closeDropdown(null, 'cleanup');
     };
   }, []);
   useEffect(() => {
@@ -923,7 +926,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     }
     // Close dropdown treeview by children when select item
     if (children && (closeAfterSelect === true || closeAfterSelect === undefined && !multiple)) {
-      closeDropdown();
+      closeDropdown(null, 'treeView');
     }
   }, [valueProp]);
   useEffect(() => {
@@ -945,7 +948,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       } else {
         inputRef.current.removeEventListener('keydown', onKeyDown);
       }
-      closeDropdown();
+      closeDropdown(null, 'cleanup');
     };
   }, [disabled, readOnly, displayExpr, multiple, allowSearch, viewType, closeAfterSelect, selectBox]);
   useEffect(() => {
@@ -1496,9 +1499,9 @@ Dropdown.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** The field name used for displaying text in the dropdown list.<br/>
-   * Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: Do not use 'id - name', as it will return undefined.
+  /** The field name used for displaying text in the dropdown list.<br/>
+   * Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: Do not use 'id - name', as it will return undefined.
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /**  Inline style for dropdown items. */
@@ -1507,14 +1510,14 @@ Dropdown.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
   helperTextProps: PropTypes.object,
-  /** The field name used for displaying icons.<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** The field name used for displaying icons.<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1548,8 +1551,8 @@ Dropdown.propTypes = {
   onChange: PropTypes.func,
   /** Callback function fired when the dropdown is closed. */
   onClosed: PropTypes.func,
-  /** Callback function fired when the input value changes.<br/>
-   * If undefined, the filter function will run (default behavior).
+  /** Callback function fired when the input value changes.<br/>
+   * If undefined, the filter function will run (default behavior).
    */
   onInput: PropTypes.func,
   /** Callback function fired when a key is pressed down in the input. */
@@ -1560,21 +1563,21 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */
   readOnly: PropTypes.bool,
-  /** Function used for custom rendering of items.<br/>
-   * Example: `(data, index) => data.name + ' - ' + data.role`<br/>
-   * This can be used as an alternative to `displayExpr`
+  /** Function used for custom rendering of items.<br/>
+   * Example: `(data, index) => data.name + ' - ' + data.role`<br/>
+   * This can be used as an alternative to `displayExpr`
    */
   renderItem: PropTypes.func,
-  /** Function or field name used to display selected items.<br/>
-   * Example: `(data, index) => index + ' - ' + data.name`<br/>
+  /** Function or field name used to display selected items.<br/>
+   * Example: `(data, index) => index + ' - ' + data.name`<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
-  /**
-   * Duration to wait after entering search content before triggering a search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, the default delayOnInput will be used.
+  /**
+   * Duration to wait after entering search content before triggering a search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, the default delayOnInput will be used.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   /** Specifies the field name or expression used to compare values with the search string. */
@@ -1601,19 +1604,19 @@ Dropdown.propTypes = {
   valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   /** The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
 };
 

package/components/popover/index.js

@@ -178,16 +178,16 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     if (!openState) setOpenState(true);
     onOpen && onOpen();
   };
-  const onClosePopover = () => {
+  const onClosePopover = (event, reason) => {
     if (openState) {
       if (ref.current) ref.current.style.opacity = 0;
-      onClose && onClose();
+      onClose && onClose(event, reason);
       setOpenState(false);
     }
   };
   const pressESCHandler = event => {
     if (event.key === 'Escape') {
-      onClosePopover();
+      onClosePopover(event, `key${event.key}`);
     }
   };
   const onClickOutside = event => {
@@ -198,7 +198,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     }
     const _anchor = ((_anchor2 = anchor) === null || _anchor2 === void 0 ? void 0 : _anchor2.element) || ((_anchor3 = anchor) === null || _anchor3 === void 0 ? void 0 : (_anchor3$current = _anchor3.current) === null || _anchor3$current === void 0 ? void 0 : _anchor3$current.element) || ((_anchor4 = anchor) === null || _anchor4 === void 0 ? void 0 : _anchor4.current) || anchor;
     if (clickOutsideToClose && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains((event === null || event === void 0 ? void 0 : event.toElement) || (event === null || event === void 0 ? void 0 : event.target))) && (!fullScreen || (_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && (_ref$current2$parentN = _ref$current2.parentNode) !== null && _ref$current2$parentN !== void 0 && _ref$current2$parentN.contains(event === null || event === void 0 ? void 0 : event.target)) && !(_anchor !== null && _anchor !== void 0 && _anchor.contains((event === null || event === void 0 ? void 0 : event.toElement) || (event === null || event === void 0 ? void 0 : event.target))) && openState) {
-      onClosePopover();
+      onClosePopover(event, 'clickOutside');
     }
   };
   const updatePositionPopover = (el = null, cb) => {
@@ -478,7 +478,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         if (el) setElement(el);
         !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
       },
-      close: () => onClosePopover(),
+      close: () => onClosePopover(null, 'ref'),
       setPosition: el => updatePositionPopover(el),
       ...action
     }; // methods
@@ -583,9 +583,9 @@ const PopoverArrowCSS = (bgCl, arrowSize) => css`
 Popover.propTypes = {
   /** An HTML element, or a function that returns one. It's used to set the position of the popover. */
   anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object, PropTypes.node, ref]),
-  /**
-   * This is the point on the anchor where the popover's anchor will attach to.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the anchor where the popover's anchor will attach to.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
@@ -601,14 +601,14 @@ Popover.propTypes = {
   className: PropTypes.string,
   /** If `true`, click outside will close component. */
   clickOutsideToClose: PropTypes.bool,
-  /**
-   * Direction when Popover shown.
-   * Note: This prop will overwrite anchorOrigin & transformOrigin.
-   *
-   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
-   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
-   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
-   * * bottom: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
+  /**
+   * Direction when Popover shown.
+   * Note: This prop will overwrite anchorOrigin & transformOrigin.
+   *
+   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
+   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
+   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
+   * * bottom: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
    */
   direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
   /** Height of the component. */
@@ -625,9 +625,9 @@ Popover.propTypes = {
   pressESCToClose: PropTypes.bool,
   /** Style inline of component. */
   style: PropTypes.object,
-  /**
-   * This is the point on the popover which will attach to the anchor's origin.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the popover which will attach to the anchor's origin.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   transformOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
@@ -639,24 +639,24 @@ Popover.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Config z-index of the component. */
   zIndex: PropTypes.number
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show: Show popover
-   * * close: Close popover
-   * * setPosition(element): Set position of popover
-   *  * @param {element} - element
-   *
-   * * 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*)
+   *
+   * * show: Show popover
+   * * close: Close popover
+   * * setPosition(element): Set position of popover
+   *  * @param {element} - element
+   *
+   * * 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
    */
 };
 

package/package.json

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