@oneuptime/common 11.7.4 → 12.0.0

package/UI/Components/AutocompleteTextInput/AutocompleteTextInput.tsx

@@ -1,11 +1,14 @@
 import React, {
   FunctionComponent,
   ReactElement,
+  useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
+import { createPortal } from "react-dom";
 
 export interface ComponentProps {
   value?: string;
@@ -37,6 +40,92 @@ const BASE_INPUT_CLASS: string =
  */
 const MAX_SUGGESTIONS: number = 100;
 
+/*
+ * Modal surfaces sit at z-50 (see Modal.tsx), and react-select portals its menu
+ * at DROPDOWN_MENU_Z_INDEX (60). The suggestion list matches the latter so it
+ * draws above a modal without fighting other portalled menus.
+ */
+export const SUGGESTIONS_MENU_Z_INDEX: number = 60;
+
+// Tailwind's max-h-56 — the tallest the menu is allowed to grow.
+export const SUGGESTIONS_MENU_MAX_HEIGHT_IN_PX: number = 224;
+
+// Gap between the input and the menu, matching the old `mt-1`.
+const MENU_OFFSET_IN_PX: number = 4;
+
+// Smallest gap the menu keeps from the viewport edges.
+const VIEWPORT_PADDING_IN_PX: number = 8;
+
+export interface MenuPosition {
+  top: number;
+  left: number;
+  width: number;
+  maxHeight: number;
+  placement: "below" | "above";
+}
+
+/*
+ * The menu used to be `absolute` inside the input's `relative` wrapper, which
+ * meant any ancestor with `overflow: auto` clipped it. The "Filter <Resource>"
+ * modal body is exactly that (`overflow-y-auto` in Modal.tsx), so opening the
+ * JSON/attributes key input near the bottom of a scrolled modal showed only a
+ * sliver of the list and made suggestions unpickable. The menu is now portalled
+ * to document.body and positioned `fixed` from the trigger's viewport rect.
+ */
+export function getMenuPosition(
+  triggerRect: DOMRect,
+  viewportWidth: number,
+  viewportHeight: number,
+): MenuPosition {
+  const spaceBelow: number =
+    viewportHeight - triggerRect.bottom - MENU_OFFSET_IN_PX;
+  const spaceAbove: number = triggerRect.top - MENU_OFFSET_IN_PX;
+
+  /*
+   * Prefer opening downwards. Flip up only when below is too cramped to be
+   * usable *and* above genuinely has more room, so the menu does not jump
+   * around for a few pixels of difference.
+   */
+  const shouldFlipUp: boolean =
+    spaceBelow < SUGGESTIONS_MENU_MAX_HEIGHT_IN_PX && spaceAbove > spaceBelow;
+
+  const availableHeight: number = shouldFlipUp ? spaceAbove : spaceBelow;
+  const maxHeight: number = Math.max(
+    0,
+    Math.min(
+      SUGGESTIONS_MENU_MAX_HEIGHT_IN_PX,
+      availableHeight - VIEWPORT_PADDING_IN_PX,
+    ),
+  );
+
+  // Never wider than the viewport allows, even when the input itself is.
+  const width: number = Math.min(
+    triggerRect.width,
+    Math.max(0, viewportWidth - VIEWPORT_PADDING_IN_PX * 2),
+  );
+
+  const maximumLeft: number = viewportWidth - width - VIEWPORT_PADDING_IN_PX;
+  const left: number = Math.max(
+    VIEWPORT_PADDING_IN_PX,
+    Math.min(triggerRect.left, Math.max(VIEWPORT_PADDING_IN_PX, maximumLeft)),
+  );
+
+  const top: number = shouldFlipUp
+    ? Math.max(
+        VIEWPORT_PADDING_IN_PX,
+        triggerRect.top - MENU_OFFSET_IN_PX - maxHeight,
+      )
+    : triggerRect.bottom + MENU_OFFSET_IN_PX;
+
+  return {
+    top: top,
+    left: left,
+    width: width,
+    maxHeight: maxHeight,
+    placement: shouldFlipUp ? "above" : "below",
+  };
+}
+
 // Provides a free-form text input with an optional suggestion dropdown.
 const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
@@ -44,8 +133,11 @@ const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
   const [inputValue, setInputValue] = useState<string>(props.value || "");
   const [isMenuVisible, setIsMenuVisible] = useState<boolean>(false);
   const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);
+  const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null);
   const containerRef: React.MutableRefObject<HTMLDivElement | null> =
     useRef<HTMLDivElement | null>(null);
+  const menuRef: React.MutableRefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement | null>(null);
   const blurTimeoutRef: React.MutableRefObject<number | null> = useRef<
     number | null
   >(null);
@@ -61,11 +153,23 @@ const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
     const handleClickOutside: (event: MouseEvent) => void = (
       event: MouseEvent,
     ) => {
-      if (
-        containerRef.current &&
-        event.target instanceof Node &&
-        !containerRef.current.contains(event.target)
-      ) {
+      if (!(event.target instanceof Node)) {
+        return;
+      }
+
+      /*
+       * The menu is portalled out of `containerRef`, so a click on a suggestion
+       * is "outside" the container as far as the DOM is concerned. Check the
+       * menu too, otherwise the list closes before the click lands on it.
+       */
+      const isInsideContainer: boolean = Boolean(
+        containerRef.current?.contains(event.target),
+      );
+      const isInsideMenu: boolean = Boolean(
+        menuRef.current?.contains(event.target),
+      );
+
+      if (!isInsideContainer && !isInsideMenu) {
         setIsMenuVisible(false);
         setHighlightedIndex(-1);
       }
@@ -103,6 +207,48 @@ const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
   const showMenu: boolean =
     isMenuVisible && (suggestions.length > 0 || isLoadingSuggestions);
 
+  const updateMenuPosition: () => void = useCallback((): void => {
+    const container: HTMLDivElement | null = containerRef.current;
+
+    if (!container) {
+      return;
+    }
+
+    setMenuPosition(
+      getMenuPosition(
+        container.getBoundingClientRect(),
+        window.innerWidth,
+        window.innerHeight,
+      ),
+    );
+  }, []);
+
+  /*
+   * Measure before paint so the menu never renders at a stale position, then
+   * keep it glued to the input: capture-phase scroll catches scrolling in the
+   * modal body (and any other ancestor), which does not bubble to window.
+   */
+  useLayoutEffect(() => {
+    if (!showMenu) {
+      setMenuPosition(null);
+      return;
+    }
+
+    updateMenuPosition();
+
+    const handleLayoutChange: () => void = (): void => {
+      updateMenuPosition();
+    };
+
+    window.addEventListener("scroll", handleLayoutChange, true);
+    window.addEventListener("resize", handleLayoutChange);
+
+    return () => {
+      window.removeEventListener("scroll", handleLayoutChange, true);
+      window.removeEventListener("resize", handleLayoutChange);
+    };
+  }, [showMenu, updateMenuPosition]);
+
   const getInputClassName: () => string = (): string => {
     let className: string = props.className || BASE_INPUT_CLASS;
 
@@ -156,6 +302,18 @@ const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
   const handleKeyDown: (
     event: React.KeyboardEvent<HTMLInputElement>,
   ) => void = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    /*
+     * Escape closes the list even when there is nothing to pick (the loading
+     * row counts as an open menu). Marking the event handled stops Modal's
+     * document-level listener from closing the whole dialog behind the menu.
+     */
+    if (event.key === "Escape" && showMenu) {
+      event.preventDefault();
+      setIsMenuVisible(false);
+      setHighlightedIndex(-1);
+      return;
+    }
+
     if (!showMenu || suggestions.length === 0) {
       return;
     }
@@ -187,11 +345,6 @@ const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
         handleSuggestionSelect(suggestions[highlightedIndex]!);
       }
     }
-
-    if (event.key === "Escape") {
-      setIsMenuVisible(false);
-      setHighlightedIndex(-1);
-    }
   };
 
   useEffect(() => {
@@ -200,6 +353,101 @@ const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
     }
   }, [suggestions, highlightedIndex]);
 
+  const activeOptionId: string | undefined =
+    highlightedIndex >= 0 && highlightedIndex < suggestions.length
+      ? `${listboxIdRef.current}-option-${highlightedIndex}`
+      : undefined;
+
+  const menu: ReactElement | null = showMenu ? (
+    <div
+      ref={menuRef}
+      className={
+        props.menuClassName ||
+        "overflow-auto rounded-md border border-gray-200 bg-white py-1 text-sm shadow-lg"
+      }
+      style={{
+        position: "fixed",
+        top: menuPosition?.top ?? 0,
+        left: menuPosition?.left ?? 0,
+        width: menuPosition?.width ?? 0,
+        maxHeight: menuPosition?.maxHeight ?? SUGGESTIONS_MENU_MAX_HEIGHT_IN_PX,
+        zIndex: SUGGESTIONS_MENU_Z_INDEX,
+        // Avoid a flash at (0, 0) on the first frame before the rect is read.
+        visibility: menuPosition ? "visible" : "hidden",
+      }}
+      data-testid={
+        props.dataTestId ? `${props.dataTestId}-suggestions` : undefined
+      }
+      data-placement={menuPosition?.placement}
+      id={listboxIdRef.current}
+      role="listbox"
+    >
+      {isLoadingSuggestions && (
+        <div className="flex w-full items-center px-3 py-2 text-left text-gray-500">
+          <svg
+            className="animate-spin -ml-0.5 mr-2 h-4 w-4 text-indigo-500"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            ></circle>
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+            ></path>
+          </svg>
+          <span>{props.loadingMessage || "Loading..."}</span>
+        </div>
+      )}
+      {!isLoadingSuggestions &&
+        suggestions.length === 0 &&
+        props.noSuggestionsMessage && (
+          <div className="flex w-full items-center px-3 py-2 text-left text-gray-500">
+            {props.noSuggestionsMessage}
+          </div>
+        )}
+      {!isLoadingSuggestions &&
+        suggestions.map((suggestion: string, index: number) => {
+          const isActive: boolean = index === highlightedIndex;
+          return (
+            <button
+              key={`${suggestion}-${index}`}
+              id={`${listboxIdRef.current}-option-${index}`}
+              type="button"
+              role="option"
+              /*
+               * Portalling puts these buttons outside Modal's focus trap, which
+               * is built from `modalRef.current.querySelectorAll(...)`. Keeping
+               * them out of the tab order means Tab still cycles the modal's own
+               * controls instead of dead-ending here; the list stays reachable
+               * through the arrow keys and Enter on the input.
+               */
+              tabIndex={-1}
+              aria-selected={isActive}
+              className={`flex w-full items-center px-3 py-2 text-left hover:bg-indigo-50 ${isActive ? "bg-indigo-600 text-white hover:bg-indigo-500" : "text-gray-700"}`}
+              onMouseDown={(event: React.MouseEvent<HTMLButtonElement>) => {
+                event.preventDefault();
+              }}
+              onClick={() => {
+                handleSuggestionSelect(suggestion);
+              }}
+            >
+              {suggestion}
+            </button>
+          );
+        })}
+    </div>
+  ) : null;
+
   return (
     <div
       ref={containerRef}
@@ -213,6 +461,7 @@ const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
         aria-autocomplete="list"
         aria-controls={listboxIdRef.current}
         aria-expanded={showMenu}
+        aria-activedescendant={activeOptionId}
         role="combobox"
         onBlur={handleInputBlur}
         onChange={handleInputChange}
@@ -223,71 +472,7 @@ const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
         type="text"
         value={inputValue}
       />
-      {showMenu && (
-        <div
-          className={
-            props.menuClassName ||
-            "absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md border border-gray-200 bg-white py-1 text-sm shadow-lg"
-          }
-          id={listboxIdRef.current}
-          role="listbox"
-        >
-          {isLoadingSuggestions && (
-            <div className="flex w-full items-center px-3 py-2 text-left text-gray-500">
-              <svg
-                className="animate-spin -ml-0.5 mr-2 h-4 w-4 text-indigo-500"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                ></circle>
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
-                ></path>
-              </svg>
-              <span>{props.loadingMessage || "Loading..."}</span>
-            </div>
-          )}
-          {!isLoadingSuggestions &&
-            suggestions.length === 0 &&
-            props.noSuggestionsMessage && (
-              <div className="flex w-full items-center px-3 py-2 text-left text-gray-500">
-                {props.noSuggestionsMessage}
-              </div>
-            )}
-          {!isLoadingSuggestions &&
-            suggestions.map((suggestion: string, index: number) => {
-              const isActive: boolean = index === highlightedIndex;
-              return (
-                <button
-                  key={`${suggestion}-${index}`}
-                  type="button"
-                  role="option"
-                  aria-selected={isActive}
-                  className={`flex w-full items-center px-3 py-2 text-left hover:bg-indigo-50 ${isActive ? "bg-indigo-600 text-white hover:bg-indigo-500" : "text-gray-700"}`}
-                  onMouseDown={(event: React.MouseEvent<HTMLButtonElement>) => {
-                    event.preventDefault();
-                  }}
-                  onClick={() => {
-                    handleSuggestionSelect(suggestion);
-                  }}
-                >
-                  {suggestion}
-                </button>
-              );
-            })}
-        </div>
-      )}
+      {menu && createPortal(menu, document.body)}
     </div>
   );
 };

package/UI/Components/BulkUpdate/BulkLabelActions.tsx

@@ -1,4 +1,10 @@
-import React, { ReactElement, useEffect, useState } from "react";
+import React, {
+  MutableRefObject,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import Label from "../../../Models/DatabaseModels/Label";
@@ -63,14 +69,27 @@ function useBulkLabelActions<T extends BaseModel>(
   >([]);
   const [isLoadingRemoveLabels, setIsLoadingRemoveLabels] =
     useState<boolean>(false);
+  const removeLabelsRequestRef: MutableRefObject<number> = useRef<number>(0);
 
   useEffect(() => {
+    /*
+     * Without the guard the query went out as `projectId: null`, which is
+     * not "every project" — it is a filter nothing matches, so the add
+     * modal silently offered an empty dropdown. Skipping the request says
+     * the same thing without the round trip. Mirrors BulkOwnerActions.
+     */
+    const projectId: ObjectID | null = ProjectUtil.getCurrentProjectId();
+
+    if (!projectId) {
+      return;
+    }
+
     const fetchLabels: () => Promise<void> = async (): Promise<void> => {
       try {
         const result: ListResult<Label> = await ModelAPI.getList<Label>({
           modelType: Label,
           query: {
-            projectId: ProjectUtil.getCurrentProjectId()!,
+            projectId: projectId,
           },
           limit: LIMIT_PER_PROJECT,
           skip: 0,
@@ -110,6 +129,26 @@ function useBulkLabelActions<T extends BaseModel>(
     setShowAddModal(false);
     setShowRemoveModal(false);
 
+    /*
+     * A label whose row came back without an `_id` would render as an
+     * option with an empty value, and submitting it would put "" into the
+     * labels array, failing the whole item over one unusable option.
+     */
+    const selectedLabelIds: Array<string> = labelIds.filter((id: string) => {
+      return Boolean(id);
+    });
+
+    /*
+     * Bail before starting rather than running the loop with nothing to
+     * apply: every item would fall through the no-op short-circuit below
+     * and be reported as a success, telling the user a bulk action landed
+     * when nothing was asked for.
+     */
+    if (selectedLabelIds.length === 0) {
+      setBulkActionProps(null);
+      return;
+    }
+
     onBulkActionStart();
 
     const totalItems: Array<T> = [...items];
@@ -133,14 +172,32 @@ function useBulkLabelActions<T extends BaseModel>(
           modelType: config.modelType,
           id: item.id,
           select: {
+            _id: true,
             labels: {
               _id: true,
             },
           } as any,
         });
 
+        /*
+         * A row that was deleted or filtered out between the table load
+         * and this action comes back as HTTP 200 with an empty body, which
+         * hydrates into a truthy but empty model — so "no labels" and
+         * "could not read it" are the same value here unless we look at
+         * `_id`, which a real read always carries. Without the check, add
+         * mode would treat the item as unlabelled and replace its entire
+         * label set with the selection: exactly the clobber the merge
+         * below exists to prevent. Fail the item instead; the user sees it
+         * in the failed list and nothing is lost.
+         */
+        if (!currentItem || !currentItem._id) {
+          throw new BadDataException(
+            "Could not read the current labels for this item.",
+          );
+        }
+
         const existingLabelIds: Array<string> = (
-          ((currentItem as any)?.labels as Array<Label> | undefined) || []
+          ((currentItem as any).labels as Array<Label> | undefined) || []
         )
           .map((label: Label) => {
             return label._id?.toString() || "";
@@ -153,11 +210,11 @@ function useBulkLabelActions<T extends BaseModel>(
 
         if (mode === "add") {
           newLabelIds = Array.from(
-            new Set<string>([...existingLabelIds, ...labelIds]),
+            new Set<string>([...existingLabelIds, ...selectedLabelIds]),
           );
         } else {
           newLabelIds = existingLabelIds.filter((id: string) => {
-            return !labelIds.includes(id);
+            return !selectedLabelIds.includes(id);
           });
         }
 
@@ -211,6 +268,20 @@ function useBulkLabelActions<T extends BaseModel>(
   const loadLabelsForSelectedItems: (items: Array<T>) => Promise<void> = async (
     items: Array<T>,
   ): Promise<void> => {
+    /*
+     * Close the modal and reopen it on a different selection and there are
+     * two fetches in flight; the slower one settles last and wins, so the
+     * modal ends up offering the previous selection's labels. Stamp each
+     * run and let only the newest one write state.
+     */
+    const requestId: number = ++removeLabelsRequestRef.current;
+
+    type IsCurrentRequestFunction = () => boolean;
+
+    const isCurrentRequest: IsCurrentRequestFunction = (): boolean => {
+      return requestId === removeLabelsRequestRef.current;
+    };
+
     setIsLoadingRemoveLabels(true);
 
     try {
@@ -223,7 +294,9 @@ function useBulkLabelActions<T extends BaseModel>(
         });
 
       if (itemIds.length === 0) {
-        setRemoveLabelDropdownOptions([]);
+        if (isCurrentRequest()) {
+          setRemoveLabelDropdownOptions([]);
+        }
         return;
       }
 
@@ -278,12 +351,18 @@ function useBulkLabelActions<T extends BaseModel>(
         return a.label.localeCompare(b.label);
       });
 
-      setRemoveLabelDropdownOptions(options);
+      if (isCurrentRequest()) {
+        setRemoveLabelDropdownOptions(options);
+      }
     } catch {
       // on error, show no options rather than every label in the project
-      setRemoveLabelDropdownOptions([]);
+      if (isCurrentRequest()) {
+        setRemoveLabelDropdownOptions([]);
+      }
     } finally {
-      setIsLoadingRemoveLabels(false);
+      if (isCurrentRequest()) {
+        setIsLoadingRemoveLabels(false);
+      }
     }
   };
 
@@ -306,8 +385,18 @@ function useBulkLabelActions<T extends BaseModel>(
     title: "Add Labels",
     buttonStyleType: ButtonStyleType.NORMAL,
     icon: IconProp.Label,
+    /*
+     * The two modals are independent booleans rendered as sibling
+     * branches, so nothing in the hook keeps them mutually exclusive —
+     * only the modal backdrop covering the action bar does, which is a
+     * property of a different component. Resetting the sibling here makes
+     * the invariant local: two stacked dialogs would share one
+     * bulkActionProps, and whichever submitted first would null it and
+     * leave the other silently inert.
+     */
     onClick: async (actionProps: BulkActionOnClickProps<T>): Promise<void> => {
       setBulkActionProps(actionProps);
+      setShowRemoveModal(false);
       setShowAddModal(true);
     },
   };
@@ -319,6 +408,7 @@ function useBulkLabelActions<T extends BaseModel>(
     onClick: async (actionProps: BulkActionOnClickProps<T>): Promise<void> => {
       setBulkActionProps(actionProps);
       setRemoveLabelDropdownOptions([]);
+      setShowAddModal(false);
       setShowRemoveModal(true);
       await loadLabelsForSelectedItems(actionProps.items);
     },

package/UI/Components/BulkUpdate/BulkOwnerActions.tsx

@@ -415,8 +415,18 @@ function useBulkOwnerActions<T extends BaseModel>(
     title: "Add Owner",
     buttonStyleType: ButtonStyleType.NORMAL,
     icon: IconProp.UserPlus,
+    /*
+     * The two modals are independent booleans rendered as sibling
+     * branches, so nothing in the hook keeps them mutually exclusive —
+     * only the modal backdrop covering the action bar does, which is a
+     * property of a different component. Resetting the sibling here makes
+     * the invariant local: two stacked dialogs would share one
+     * bulkActionProps, and whichever submitted first would null it and
+     * leave the other silently inert.
+     */
     onClick: async (actionProps: BulkActionOnClickProps<T>): Promise<void> => {
       setBulkActionProps(actionProps);
+      setShowRemoveModal(false);
       setShowAddModal(true);
     },
   };
@@ -427,6 +437,7 @@ function useBulkOwnerActions<T extends BaseModel>(
     icon: IconProp.UserMinus,
     onClick: async (actionProps: BulkActionOnClickProps<T>): Promise<void> => {
       setBulkActionProps(actionProps);
+      setShowAddModal(false);
       setShowRemoveModal(true);
     },
   };

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -11,6 +11,11 @@ import BaseModel, {
   DatabaseBaseModelType,
 } from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import CustomFieldType from "../../../Types/CustomField/CustomFieldType";
+import {
+  CustomFieldDropdownOption,
+  parseCustomFieldDropdownOptions,
+} from "../../../Types/CustomField/CustomFieldDropdownOption";
+import Color from "../../../Types/Color";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -22,20 +27,20 @@ import useAsyncEffect from "use-async-effect";
 const parseDropdownOptions: (value: unknown) => Array<DropdownOption> = (
   value: unknown,
 ): Array<DropdownOption> => {
-  if (typeof value !== "string" || !value) {
-    return [];
-  }
-  return value
-    .split("\n")
-    .map((line: string) => {
-      return line.trim();
-    })
-    .filter((line: string) => {
-      return line.length > 0;
-    })
-    .map((line: string) => {
-      return { label: line, value: line };
-    });
+  return parseCustomFieldDropdownOptions(value).map(
+    (option: CustomFieldDropdownOption): DropdownOption => {
+      const dropdownOption: DropdownOption = {
+        label: option.value,
+        value: option.value,
+      };
+
+      if (option.color) {
+        dropdownOption.color = Color.fromString(option.color);
+      }
+
+      return dropdownOption;
+    },
+  );
 };
 
 export interface ComponentProps {