fix(combobox): component optimization

src/components/ComboBox/ComboBox.constants.ts

@@ -1,10 +1,10 @@
-const CLASS_PREFIX = 'md-combobox';
+const CLASS_PREFIX = 'md-combo-box';
 
 const DEFAULTS = {
   WIDTH:'16.25rem',
   PLACEHOLDER:'',
   NO_RESULT_TEXT:'No results found',
-  SHOULDFILTERONARROWBUTTON:true,
+  SHOULD_FILTER_ON_ARROW_BUTTON:true,
   ERROR:false,
   SELECTEDKEY:'',
   DISABLEDKEYS:[],
@@ -29,7 +29,22 @@ const KEYS = {
   INPUT_SEARCH_NO_RESULT: 'input_search_no_result',
 };
 
-export{STYLE,DEFAULTS,KEYS};
-
+const ELEMENT = {
+  PROPS: {
+    SELECTION_CONTAINER_MAX_HEIGHT:244,
+  },
+};
 
+const EVENT = {
+  KEY:{
+    KEYCODE:{
+      ESCAPE: 'Escape',
+      ENTER: 'Enter',
+      TAB: 'Tab',
+      ARROW_DOWN: 'ArrowDown',
+      ARROW_UP: 'ArrowUp',
+    }
+  }
+};
 
+export{STYLE,DEFAULTS,KEYS,ELEMENT,EVENT};

src/components/ComboBox/ComboBox.documentation.mdx

@@ -5,6 +5,14 @@ The component is composed of three parts: Button, Menu and Input. In the compone
 passed in are filtered based on the value of the Input and then passed to the internal Menu 
 to implement the search function.
 
+
+Tips:
+
+For dynamic data, it is recommended to render in conjunction with the ‘openStateChange’ property. 
+This is because when the list is open, dynamic data can affect the automatic rendering of the list. 
+If not controlled, it may confuse the user. Therefore, it is suggested to perform dynamic rendering only when the list is closed. 
+
+
 ## Content
 
 The ComboBox element follows the

src/components/ComboBox/ComboBox.stories.args.ts

@@ -18,7 +18,7 @@ export default {
     },
   },
   error: {
-    description: 'Sets whether the ComboBox is in error state',
+    description: 'Sets whether the ComboBox is in error state.',
     control: { type: 'boolean' },
     table: {
       type: {
@@ -30,7 +30,7 @@ export default {
     },
   },
   placeholder: {
-    description: 'Text to display inside the input when there is no inputValue or item selected',
+    description: 'Text to display inside the input when there is no inputValue or item selected.',
     control: { type: 'text' },
     table: {
       category: 'React Aria - Input',
@@ -82,13 +82,13 @@ export default {
         summary: 'boolean',
       },
       defaultValue: {
-        summary: CONSTANTS.DEFAULTS.SHOULDFILTERONARROWBUTTON,
+        summary: CONSTANTS.DEFAULTS.SHOULD_FILTER_ON_ARROW_BUTTON,
       },
     },  
   },
   selectedKey: {
     description:
-      'It also affects the value of the input (displayed as the label of the corresponding item',
+      'It also affects the value of the input (displayed as the label of the corresponding item.',
     control: { type: 'text' },
     table: {
       category: 'React Aria - Select',
@@ -143,7 +143,7 @@ export default {
   },
   onSelectionChange: {
     description:
-      'Handler that is called when an item is selected(if the selected item matches the selectedKey, the parameter is undefined).',
+      'Handler that is called when an item is selected. (if the selected item matches the selectedKey, the parameter is undefined)',
     control: { type: 'function' },
     table: {
       category: 'React Aria - Select',
@@ -155,6 +155,20 @@ export default {
       },
     },
   },
+  openStateChange: {
+    description:
+      'Handler that is called when the selection list is expanded or collapsed.',
+    control: { type: 'function' },
+    table: {
+      category: 'React Aria - Select',
+      type: {
+        summary: '(isOpen: boolean) => void',
+      },
+      defaultValue: {
+        summary: 'undefined',
+      },
+    },
+  },
   children: {
     description: 'Provides the items nodes for this selection list element.',
     table: {

src/components/ComboBox/ComboBox.stories.tsx

@@ -1,6 +1,4 @@
-/* eslint-disable react/display-name */
-/* eslint-disable @typescript-eslint/ban-types */
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Item, Section } from '@react-stately/collections';
 import ComboBox from '.';
 
@@ -43,7 +41,7 @@ const ComboBoxWrapper = (props:Props) => {
               {itemsEle}
             </Section>
           ) : (
-            <Section key="noSection">{itemsEle}</Section>
+            <Section key="withoutSection">{itemsEle}</Section>
           );
         }}
       </ComboBox>
@@ -112,8 +110,8 @@ Sections.argTypes = { ...argTypes };
 const InListItemTemplate = (props:Props) => {
   return (
     <OverlayAlert>
-      <div style={{ overflowY: 'scroll' }}>
-        <ComboBoxWrapper {...props} />
+      <div style={{ overflowY: 'scroll', height:'100px'}}>
+          <ComboBoxWrapper {...props} />
       </div>
     </OverlayAlert>
   );
@@ -143,10 +141,69 @@ const MultipleComboBoxTemplate = (props:Props) => {
 const MultipleComboBox = Template(MultipleComboBoxTemplate).bind({});
 
 MultipleComboBox.args = {
-  comboBoxGroups: withSection,
+  comboBoxGroups:withSection,
   label:'MultipleComboBox',
 };
 
 MultipleComboBox.argTypes = { ...argTypes };
 
-export { Example, Sections, InListItem, MultipleComboBox };
+const DynamicDataTemplate = (props:Props) => {
+  const mockDynamicData = [{section:'section1',items:[{key:'key-1',label:'label-1'}]},{section:'section2',items:[{key:'key-2',label:'label-2'}]}];
+  const [dynamicData,setDynamicData] = useState(mockDynamicData);
+  const [dynamicDataLength,setDynamicDataLength] = useState<number>(0);
+  const [comboBoxGroups,setComboBoxGroups] = useState<IComboBoxGroup[]>(dynamicData);
+  const [isListOpen,setIsListOpen] = useState<boolean>(false);
+
+  useEffect(()=>{
+    const timer = setInterval(()=>{
+      const randomText = Math.random().toString(36).substr(2, 10);
+      mockDynamicData[Math.round(Math.random())].items.push({key:'key-'+randomText,label:'label-'+randomText});
+      setDynamicData(JSON.parse(JSON.stringify(mockDynamicData)));
+    },2000);
+    return ()=>{
+      clearInterval(timer);
+    };
+  },[]);
+
+  useEffect(()=>{
+    const length = dynamicData.reduce((total, current) => {
+      return total + current.items.length;
+    }, 0);
+    setDynamicDataLength(length);
+  },[dynamicData]);
+
+  const openStateChange = useCallback((isOpen)=>{
+    setIsListOpen(isOpen);
+  },[]);
+
+  const onInputChange = useCallback(()=>{
+    setComboBoxGroups(dynamicData);
+  },[dynamicData]);
+
+  useEffect(()=>{
+    if(!isListOpen){
+      setComboBoxGroups(dynamicData);
+    }
+  },[isListOpen,dynamicData]);
+
+  return (
+    <>
+      <div style={{margin:'20px 12px'}}>DynamicDataLength:{dynamicDataLength}</div>
+      <div style={{margin:'20px 12px'}}>For dynamic data, it is relatively controllable to not re-render when the list is opened, and to re-render when input changes.</div>
+      <ComboBoxWrapper {...props} comboBoxGroups={comboBoxGroups} openStateChange={openStateChange} onInputChange={onInputChange}/>
+      <ComboBoxWrapper {...props} comboBoxGroups={comboBoxGroups} openStateChange={openStateChange} onInputChange={onInputChange}/>
+      <ComboBoxWrapper {...props} comboBoxGroups={comboBoxGroups} openStateChange={openStateChange} onInputChange={onInputChange}/>
+    </>
+  );
+};
+
+const DynamicData = Template(DynamicDataTemplate).bind({});
+
+DynamicData.args = {
+  label:'DynamicData',
+};
+
+DynamicData.argTypes = { ...argTypes };
+
+
+export { Example, Sections, InListItem, MultipleComboBox, DynamicData };

src/components/ComboBox/ComboBox.style.scss

@@ -1,10 +1,9 @@
-.md-combobox-wrapper {
+.md-combo-box-wrapper {
   position: relative;
   width: var(--local-width);
   height: 2rem;
   min-height: 1.71rem;
 
-  :global {
     .md-menu-item-wrapper {
       position: static;
     }
@@ -30,13 +29,9 @@
       line-height: 2rem;
     }
 
-    ul.md-menu-wrapper ul[role='presentation']:not(:first-child) > span {
-      display: block;
-    }
-
     ul.md-menu-wrapper ul[role='group'] {
       margin: 0;
-    }
+    } 
 
     ul.md-menu-wrapper ul[role='presentation']:not(:first-child)::before {
       display: block;
@@ -68,44 +63,40 @@
       padding: 0;
       overflow: hidden;
     }
-  }
 
   &[data-input-have-value='false'] { 
-    :global {
-      .md-text-input-container > input {
-        overflow: hidden; 
-        text-overflow: ellipsis; 
-        white-space: nowrap;
-      }
+    .md-text-input-container > input {
+      overflow: hidden; 
+      text-overflow: ellipsis; 
+      white-space: nowrap;
     }
   }
 
   &[data-error='true'] {
     .md-text-input-container,
     .md-button-pill-wrapper,
-    .md-combobox-divider {
+    .md-combo-box-divider {
       border-color: var(--mds-color-theme-text-error-normal);
     }
   }
 
-  .md-combobox-input-section {
+  .md-combo-box-input-section {
     display: flex;
     height: 100%;
   }
 
-  .md-combobox-input {
+  .md-combo-box-input {
     width: 100%;
   }
 
-  .md-combobox-selection-position{
+  .md-combo-box-selection-position{
     width: var(--local-width);
     z-index: 10000;
     position: fixed;
   }
 
-  .md-combobox-selection-container {
+  .md-combo-box-selection-container {
     width: 100%;
-    max-height: 15.25rem;
     padding: 0.5rem;
     margin-top: 0.25rem;
     overflow: auto;
@@ -115,41 +106,45 @@
     box-sizing: border-box;
   }
 
-  .md-combobox-no-result-text {
+  .md-combo-box-no-result-text {
     color: var(--mds-color-theme-text-primary-normal);
   }
 
-  .md-combobox-button {
+  .md-combo-box-button {
     width: var(--local-height);
     height: 100%;
     min-height: 1.71rem;
     position: relative;
 
-    .md-combobox-arrow-icon {
+    .md-combo-box-arrow-icon {
       position: absolute;
       top: 50%;
       right: 50%;
       transform: translate(50%, -50%);
     }
   }
 
-  .md-combobox-divider {
+  .md-combo-box-divider {
     width: 2px;
     height: 100%;
     border-top: 1px solid;
     border-bottom: 1px solid;
     border-color: var(--mds-color-theme-outline-input-normal);
     background-color: var(--mds-color-theme-background-solid-primary-normal);
   }
+
+  .md-combo-box-input:hover ~.md-combo-box-divider {
+    background-color: var(--mds-color-theme-background-primary-hover);
+  }
 }
 
-.md-combobox-label {
+.md-combo-box-label {
   margin-left: 0.75rem;
   margin-bottom: 0.5rem;
   letter-spacing: 0.01563rem;
 }
 
-.md-combobox-description {
+.md-combo-box-description {
   font-size: 0.875rem;
   line-height: 1.375rem;
   fill: var(--mds-color-theme-text-secondary-normal);