@douyinfe/semi-ui 2.5.0-beta.0 → 2.5.0

package/datePicker/_story/v2/FixInputRangeFocus.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DatePicker, Button } from '../../../index';
+
+/**
+ * fix gitlab #1375
+ */
+App.storyName = 'fixed input range focus';
+export default function App() {
+    const [visible, setVisible] = React.useState(false);
+    return (
+        <div>
+            {/* <Button onClick={() => { setVisible(false); }}>关闭</Button> */}
+            <DatePicker
+                type="dateTimeRange"
+                bottomSlot={<Button onClick={() => { setVisible(false); }}>关闭</Button>}
+                onFocus={() => {
+                    console.log('focus');
+                    setVisible(true); 
+                }}
+                open={visible}
+                showClear
+            />
+        </div>
+    );
+}

package/datePicker/_story/v2/index.js

@@ -1,2 +1,3 @@
 export { default as YearButton } from './YearButton';
-export { default as PanelOpen  } from './PanelOpen';
+export { default as PanelOpen  } from './PanelOpen';
+export { default as FixInputRangeFocus } from './FixInputRangeFocus';

package/datePicker/datePicker.tsx

@@ -331,6 +331,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
 
         if (prevProps.open !== this.props.open) {
             this.foundation.initPanelOpenStatus();
+            if (!this.props.open) {
+                this.foundation.clearRangeInputFocus();
+            }
         }
     }
 

package/dist/umd/semi-ui.js

@@ -27154,11 +27154,15 @@ class tooltip_Tooltip extends baseComponent_BaseComponent {
           }
         };
 
-        document.addEventListener('click', this.clickOutsideHandler, false);
+        document.addEventListener('mousedown', this.clickOutsideHandler, {
+          capture: true
+        });
       },
       unregisterClickOutsideHandler: () => {
         if (this.clickOutsideHandler) {
-          document.removeEventListener('click', this.clickOutsideHandler, false);
+          document.removeEventListener('mousedown', this.clickOutsideHandler, {
+            capture: true
+          });
           this.clickOutsideHandler = null;
         }
       },
@@ -52780,6 +52784,24 @@ function getDefaultFormatTokenByType(type) {
 class foundation_DatePickerFoundation extends foundation {
   constructor(adapter) {
     super(assign_default()({}, adapter));
+    /**
+     * clear range input focus when open is controlled
+     * fixed github 1375
+     */
+
+    this.clearRangeInputFocus = () => {
+      const {
+        type
+      } = this._adapter.getProps();
+
+      const {
+        rangeInputFocus
+      } = this._adapter.getStates();
+
+      if (type === 'dateTimeRange' && rangeInputFocus) {
+        this._adapter.setRangeInputFocus(false);
+      }
+    };
 
     this.getMergedMotion = motion => {
       const mergedMotion = typeof motion === 'undefined' || motion ? assign_default()(assign_default()({}, motion), {
@@ -59876,6 +59898,10 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
 
     if (prevProps.open !== this.props.open) {
       this.foundation.initPanelOpenStatus();
+
+      if (!this.props.open) {
+        this.foundation.clearRangeInputFocus();
+      }
     }
   }
 
@@ -72424,8 +72450,9 @@ class foundation_SelectFoundation extends foundation {
     } // console.log('new:' + index);
 
 
-    this._adapter.updateFocusIndex(index); // TODO requires scrollIntoView
+    this._adapter.updateFocusIndex(index);
 
+    this._adapter.updateScrollTop(index);
   }
 
   _handleArrowKeyDown(offset) {
@@ -72987,9 +73014,9 @@ const VirtualRow = _ref => {
     style
   } = _ref;
   const {
-    visibileOptions
+    visibleOptions
   } = data;
-  const option = visibileOptions[index];
+  const option = visibleOptions[index];
   return data.renderOption(option, index, style);
 };
 
@@ -73327,11 +73354,19 @@ class select_Select extends baseComponent_BaseComponent {
           el.focus();
         } catch (error) {}
       },
-      updateScrollTop: () => {
-        var _context9, _context10;
+      updateScrollTop: index => {
+        var _context10, _context11;
 
         // eslint-disable-next-line max-len
-        let destNode = document.querySelector(concat_default()(_context9 = concat_default()(_context10 = "#".concat(select_prefixcls, "-")).call(_context10, this.selectOptionListID, " .")).call(_context9, select_prefixcls, "-option-selected"));
+        let optionClassName = ".".concat(select_prefixcls, "-option-selected");
+
+        if (index !== undefined) {
+          var _context9;
+
+          optionClassName = concat_default()(_context9 = ".".concat(select_prefixcls, "-option:nth-child(")).call(_context9, index, ")");
+        }
+
+        let destNode = document.querySelector(concat_default()(_context10 = concat_default()(_context11 = "#".concat(select_prefixcls, "-")).call(_context11, this.selectOptionListID, " ")).call(_context10, optionClassName));
 
         if (is_array_default()(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -73359,11 +73394,11 @@ class select_Select extends baseComponent_BaseComponent {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _context11, _context12;
+    var _context12, _context13;
 
-    const prevChildrenKeys = map_default()(_context11 = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Children.toArray(prevProps.children)).call(_context11, child => child.key);
+    const prevChildrenKeys = map_default()(_context12 = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Children.toArray(prevProps.children)).call(_context12, child => child.key);
 
-    const nowChildrenKeys = map_default()(_context12 = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Children.toArray(this.props.children)).call(_context12, child => child.key);
+    const nowChildrenKeys = map_default()(_context13 = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Children.toArray(this.props.children)).call(_context13, child => child.key);
 
     let isOptionsChanged = false;
 
@@ -73557,34 +73592,30 @@ class select_Select extends baseComponent_BaseComponent {
     this.foundation.handleOptionMouseEnter(optionIndex);
   }
 
-  renderWithGroup(visibileOptions) {
+  renderWithGroup(visibleOptions) {
     const content = [];
     const groupStatus = new core_js_stable_map_default.a();
 
-    for_each_default()(visibileOptions).call(visibileOptions, (option, optionIndex) => {
+    for_each_default()(visibleOptions).call(visibleOptions, (option, optionIndex) => {
       const parentGroup = option._parentGroup;
       const optionContent = this.renderOption(option, optionIndex);
 
-      if (parentGroup && groupStatus.has(parentGroup.label)) {
-        // group content already insert
-        content.push(optionContent);
-      } else if (parentGroup) {
+      if (parentGroup && !groupStatus.has(parentGroup.label)) {
+        // when use with OptionGroup and group content not already insert
         const groupContent = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(optionGroup, assign_default()({}, parentGroup, {
           key: parentGroup.label
         }));
         groupStatus.set(parentGroup.label, true);
         content.push(groupContent);
-        content.push(optionContent);
-      } else {
-        // when not use with OptionGroup
-        content.push(optionContent);
       }
+
+      content.push(optionContent);
     });
 
     return content;
   }
 
-  renderVirtualizeList(visibileOptions) {
+  renderVirtualizeList(visibleOptions) {
     const {
       virtualize
     } = this.props;
@@ -73599,10 +73630,10 @@ class select_Select extends baseComponent_BaseComponent {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(FixedSizeList, {
       ref: this.virtualizeListRef,
       height: height || select_constants_numbers.LIST_HEIGHT,
-      itemCount: visibileOptions.length,
+      itemCount: visibleOptions.length,
       itemSize: itemSize,
       itemData: {
-        visibileOptions,
+        visibleOptions,
         renderOption: this.renderOption
       },
       width: width || '100%',
@@ -73613,7 +73644,7 @@ class select_Select extends baseComponent_BaseComponent {
   }
 
   renderOptions(children) {
-    var _context13;
+    var _context14;
 
     const {
       dropdownMinWidth,
@@ -73633,12 +73664,12 @@ class select_Select extends baseComponent_BaseComponent {
       multiple
     } = this.props; // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
 
-    const visibileOptions = filter_default()(options).call(options, item => item._show);
+    const visibleOptions = filter_default()(options).call(options, item => item._show);
 
-    let listContent = this.renderWithGroup(visibileOptions);
+    let listContent = this.renderWithGroup(visibleOptions);
 
     if (virtualize) {
-      listContent = this.renderVirtualizeList(visibileOptions);
+      listContent = this.renderVirtualizeList(visibleOptions);
     }
 
     const style = assign_default()({
@@ -73651,7 +73682,7 @@ class select_Select extends baseComponent_BaseComponent {
     });
     const isEmpty = !options.length || !some_default()(options).call(options, item => item._show);
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-      id: concat_default()(_context13 = "".concat(select_prefixcls, "-")).call(_context13, this.selectOptionListID),
+      id: concat_default()(_context14 = "".concat(select_prefixcls, "-")).call(_context14, this.selectOptionListID),
       className: dropdownClassName,
       style: style
     }, outerTopSlot, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
@@ -73882,7 +73913,7 @@ class select_Select extends baseComponent_BaseComponent {
   }
 
   renderSelection() {
-    var _context14;
+    var _context15;
 
     const {
       disabled,
@@ -73966,7 +73997,7 @@ class select_Select extends baseComponent_BaseComponent {
       role: "combobox",
       "aria-disabled": disabled,
       "aria-expanded": isOpen,
-      "aria-controls": concat_default()(_context14 = "".concat(select_prefixcls, "-")).call(_context14, this.selectOptionListID),
+      "aria-controls": concat_default()(_context15 = "".concat(select_prefixcls, "-")).call(_context15, this.selectOptionListID),
       "aria-haspopup": "listbox",
       "aria-label": "select value",
       "aria-invalid": this.props['aria-invalid'],
@@ -80215,7 +80246,10 @@ function assignColumnKeys(columns) {
     if (column.key == null) {
       var _context4;
 
-      column.key = concat_default()(_context4 = "".concat(level, "-")).call(_context4, index);
+      // if user give column a dataIndex, use it for backup
+      const _index = column.dataIndex || index;
+
+      column.key = concat_default()(_context4 = "".concat(level, "-")).call(_context4, _index);
     }
 
     if (is_array_default()(column[childrenColumnName]) && column[childrenColumnName].length) {