[ENG-76] Attribute-select drop down enhancements (#495)

* use new MenuItemSelect for AttributeSelect

* remove tsconfig change

* comment out format

* update roamjs-components

Author: trangdoan982

package-lock.json

@@ -13,7 +13,7 @@
     "color": "^4.2.3",
     "markmap-lib": "^0.11.1",
     "markmap-view": "^0.2.1",
-    "roamjs-components": "^0.82.13",
+    "roamjs-components": "^0.85.0",
     "tesseract.js": "^2.1.4",
     "turndown": "^7.1.1"
   },

package.json

@@ -55,46 +55,57 @@ const AttributeButtonPopover = <T extends ReactText>({
   filterable = false,
   isOpen,
 }: AttributeButtonPopoverProps<T>) => {
-  const AttributeSelect = Select.ofType<T>();
   const itemPredicate = (query: string, item: T) => {
     return String(item).toLowerCase().includes(query.toLowerCase());
   };
   const [sliderValue, setSliderValue] = useState(0);
   useEffect(() => {
     setSliderValue(Number(currentValue));
   }, [isOpen, currentValue]);
+
+  const formatDisplayText = (text: string): string => {
+    // TODO: for doantrang982/eng-77-decouple-display-from-output: Create formatDisplayText from configPage
+    // const match = text.match(/\[\[(.*?)\]\]/);
+    // if (match && match[1]) {
+    //   return match[1];
+    // }
+    return text;
+  };
+
+  // Only show filter if we have more than 10 items
+  const shouldFilter = filterable && items.length > 10;
+
   return (
-    <AttributeSelect
+    <MenuItemSelect
       className="inline-menu-item-select"
-      itemRenderer={(item, { modifiers, handleClick }) => (
-        <MenuItem
-          key={item}
-          text={item}
-          active={modifiers.active}
-          onClick={handleClick}
-        />
-      )}
       itemPredicate={itemPredicate}
       items={items}
+      activeItem={currentValue as T}
+      filterable={shouldFilter}
+      // transformItem={(item) => formatDisplayText(String(item))}
       onItemSelect={(s) => {
         updateBlock({
           text: `${attributeName}:: ${s}`,
           uid,
         });
+        setIsOpen(false);
+      }}
+      popoverProps={{
+        isOpen,
+        onClose: () => setIsOpen(false),
       }}
-      activeItem={currentValue as T}
-      // onActiveItemChange={} // TODO: get this working for keyboard support
-      filterable={filterable}
     >
-      <Button
-        className="roamjs-attribute-select-button p-0 ml-1"
-        icon="chevron-down"
-        style={{ minHeight: 15, minWidth: 20 }}
-        intent="primary"
-        minimal
-        onClick={() => setIsOpen(true)}
-      />
-    </AttributeSelect>
+      {() => (
+        <Button
+          className="roamjs-attribute-select-button p-0 ml-1"
+          icon="chevron-down"
+          style={{ minHeight: 15, minWidth: 20 }}
+          intent="primary"
+          minimal
+          onClick={() => setIsOpen(true)}
+        />
+      )}
+    </MenuItemSelect>
   );
 };
 
@@ -214,6 +225,7 @@ const AttributeButton = ({
           uid={uid}
           currentValue={currentValue}
           isOpen={isOpen}
+          filterable={true}
         />
       )}
     </>