feat(topbar): add ability to search organizations (#294)

Author: NiklasRamstrom

components/topbar/src/organization-menu.tsx

@@ -1,4 +1,7 @@
 import {
+  Button,
+  Input,
+  InputOnChangeData,
   Menu,
   MenuButton,
   MenuDivider,
@@ -12,8 +15,10 @@ import {
   BuildingMultipleFilled,
   BuildingMultipleRegular,
   bundleIcon,
+  Dismiss16Regular,
+  Search16Regular,
 } from "@fluentui/react-icons";
-import React from "react";
+import React, { useCallback, useRef, useState } from "react";
 import { OrganizationMenuProps } from "./organization-menu.types";
 import { useStyles } from "./organization.styles";
 
@@ -22,19 +27,49 @@ const OrganizationIcon = bundleIcon(
   BuildingMultipleRegular
 );
 
-export const OrganizationMenu = (
-  { customContent, onChange, options, value }: OrganizationMenuProps
-) => {
+export const OrganizationMenu = ({
+  customContent,
+  onChange,
+  options,
+  value,
+  filter,
+}: OrganizationMenuProps) => {
   const styles = useStyles();
 
+  const [filterText, setFilterText] = useState<string>("");
+  const filterRef = useRef<HTMLInputElement>(null);
+
   const currentOrganization = options?.find(({ id }) => id === value);
   const checkedValues = { org: [value] };
   const noDropDownContent = options?.length === 1 && !customContent
     && currentOrganization;
   const onlyCustomContent = !options?.length && !!customContent;
 
+  const filteredOptions = options
+    ?.filter(
+      (opt) =>
+        filterText.length === 0
+        || opt.label.toLowerCase().indexOf(filterText) >= 0
+    )
+    .sort(
+      (a, b) =>
+        a.label.toLowerCase().indexOf(filterText)
+        - b.label.toLowerCase().indexOf(filterText)
+    );
+
+  const onFilterChange = useCallback(
+    (_: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
+      if (data.value.length) {
+        setFilterText(data.value.toLowerCase());
+      } else {
+        setFilterText("");
+      }
+    },
+    []
+  );
+
   return (
-    <Menu checkedValues={checkedValues}>
+    <Menu checkedValues={checkedValues} positioning={"below-end"}>
       <MenuTrigger>
         <MenuButton
           appearance="subtle"
@@ -45,17 +80,49 @@ export const OrganizationMenu = (
           data-testid="organization-menu-button"
           icon={<OrganizationIcon />}
           menuIcon={noDropDownContent ? null : undefined}
+          onClick={() => setFilterText("")}
         >
           <span className={styles.organizationlabel}>
             {currentOrganization?.label ?? value}
           </span>
         </MenuButton>
       </MenuTrigger>
       <MenuPopover>
+        {filter?.showFilter && (
+          <>
+            <Input
+              ref={filterRef}
+              contentBefore={<Search16Regular />}
+              placeholder={filter.placeholderText}
+              contentAfter={filterText.length
+                ? (
+                  <Button
+                    icon={<Dismiss16Regular />}
+                    appearance="transparent"
+                    onClick={() => {
+                      setFilterText("");
+                      filterRef.current?.focus();
+                    }}
+                  />
+                )
+                : undefined}
+              // To not get focus in search on open
+              tabIndex={-1}
+              // To keep focus on search when hovering menu items
+              onBlur={() => filterRef.current?.focus()}
+              className={styles.searchInput}
+              appearance="filled-lighter"
+              value={filterText}
+              onChange={onFilterChange}
+            />
+            <MenuDivider />
+          </>
+        )}
         <MenuList>
           {!onlyCustomContent && (
             <div className={styles.organizationSelection}>
-              {options?.map(({ id, label }) => {
+              {filteredOptions?.map(({ id, label }) => {
+                const match = label.toLowerCase().indexOf(filterText);
                 return (
                   <MenuItemRadio
                     data-testid={`organization-menu-item-${id}`}
@@ -65,7 +132,15 @@ export const OrganizationMenu = (
                     onClick={() => onChange(id)}
                     value={id}
                   >
-                    {label}
+                    {
+                      <span>
+                        {label.substring(0, match)}
+                        <span className={styles.bold}>
+                          {label.substring(match, match + filterText.length)}
+                        </span>
+                        {label.substring(match + filterText.length)}
+                      </span>
+                    }
                   </MenuItemRadio>
                 );
               })}

components/topbar/src/organization-menu.types.ts

@@ -10,4 +10,5 @@ export type OrganizationMenuProps = PropsWithChildren<{
   readonly customContent?: JSX.Element;
   readonly onChange: (id: string) => void;
   readonly options?: OrganizationOption[];
+  readonly filter?: { showFilter: boolean; placeholderText: string };
 }>;

components/topbar/src/organization.styles.ts

@@ -7,7 +7,8 @@ export const useStyles = makeStyles({
   organizationSelection: {
     overflowY: "auto",
     overflowX: "hidden",
-    maxHeight: "30vh",
+    height: "30vh",
+    width: "290px",
   },
   singleLine: {
     overflowX: "hidden",
@@ -18,4 +19,10 @@ export const useStyles = makeStyles({
       display: "block",
     },
   },
+  searchInput: {
+    width: "100%",
+  },
+  bold: {
+    fontWeight: "bold",
+  },
 });

examples/src/components/top-bar.tsx

@@ -104,6 +104,7 @@ export const Navbar = () => {
   const organizations: OrganizationOption[] = [
     { id: "1", label: "organizationenn2" },
     { id: "2", label: "organizationen AB" },
+    { id: "3", label: "A very long organization name AB" },
     ...new Array(50).fill(0).map((_, i) => ({
       id: "extra" + i,
       label: "organization-" + i,
@@ -219,6 +220,10 @@ export const Navbar = () => {
           onChange: setCurrentOrganizationId,
           options: organizations,
           value: currentOrganizationId,
+          filter: {
+            showFilter: true,
+            placeholderText: "Search organization",
+          },
         }}
         profileMenu={{
           // showCustomContentTopDivider: false,