fleet/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsx

/**
 * This is a new component built off react-select 5.4
 * meant to replace Dropdown.jsx built off react-select 1.3
 *
 * See storybook component for current functionality
 *
 * Prototyped on UserForm.tsx but added and tested the following:
 * Options: text, disabled, option helptext, option tooltip
 * Other: label text, dropdown help text, dropdown error
 */

import classnames from "classnames";
import React from "react";
import Select, {
  components,
  DropdownIndicatorProps,
  GroupBase,
  MenuPlacement,
  OptionProps,
  PropsValue,
  SingleValue,
  StylesConfig,
  ValueContainerProps,
} from "react-select-5";

import { COLORS } from "styles/var/colors";
import { PADDING } from "styles/var/padding";

import FormField from "components/forms/FormField";
import DropdownOptionTooltipWrapper from "components/forms/fields/Dropdown/DropdownOptionTooltipWrapper";
import TooltipWrapper from "components/TooltipWrapper";
import Icon from "components/Icon";
import { IconNames } from "components/icons";
import { TooltipContent } from "interfaces/dropdownOption";

interface CustomOptionProps
  extends Omit<OptionProps<CustomOptionType, false>, "data"> {
  data: CustomOptionType;
}

const baseClass = "dropdown-wrapper";

const CustomOption = (props: CustomOptionProps) => {
  const { data, ...rest } = props;

  const optionContent = (
    <div className={`${baseClass}__option`} data-testid="dropdown-option">
      {data.label}
      {data.helpText && (
        <span className={`${baseClass}__help-text`}>{data.helpText}</span>
      )}
    </div>
  );

  return (
    <components.Option {...rest} data={data}>
      {data.tooltipContent ? (
        <DropdownOptionTooltipWrapper tipContent={data.tooltipContent}>
          {optionContent}
        </DropdownOptionTooltipWrapper>
      ) : (
        optionContent
      )}
    </components.Option>
  );
};

export const CustomDropdownIndicator = (
  props: DropdownIndicatorProps<
    CustomOptionType,
    false,
    GroupBase<CustomOptionType>
  >
) => {
  const { isFocused, selectProps } = props;
  const color =
    isFocused || selectProps.menuIsOpen
      ? "ui-fleet-black-75-over"
      : "ui-fleet-black-75";

  return (
    <components.DropdownIndicator
      {...props}
      className={`${baseClass}__indicator`}
    >
      <Icon
        name="chevron-down"
        color={color}
        className={`${baseClass}__icon`}
      />
    </components.DropdownIndicator>
  );
};

export interface CustomOptionType {
  label: React.ReactNode;
  value: string;
  tooltipContent?: TooltipContent;
  helpText?: React.ReactNode;
  isDisabled?: boolean;
  iconName?: IconNames;
}

type DropdownWrapperVariant = "table-filter";

export interface IDropdownWrapper {
  options: CustomOptionType[];
  value?: PropsValue<CustomOptionType> | string; // Future: Handle number types, cascade of type checking will be needed
  onChange: (newValue: SingleValue<CustomOptionType>) => void;
  name: string;
  className?: string;
  wrapperClassname?: string;
  labelClassname?: string;
  error?: string;
  label?: JSX.Element | string;
  helpText?: JSX.Element | string;
  isSearchable?: boolean;
  isDisabled?: boolean;
  iconName?: IconNames;
  placeholder?: string;
  /** E.g. scroll to view dropdown menu in a scrollable parent container */
  onMenuOpen?: () => void;
  /** Table filter dropdowns have filter icon and height: 40px */
  variant?: DropdownWrapperVariant;
  /** This makes the menu fit all text without wrapping,
   * aligning right to fit text on screen */
  nowrapMenu?: boolean;
  customNoOptionsMessage?: string;
  /** Explicit accessible name for the combobox. When omitted, the resolved
   * aria-label falls back to `placeholder`, then `name`, so existing call
   * sites get at least a rough label without opting in. react-select does
   * not infer any of these on its own; without a value here screen readers
   * announce a bare "combobox". */
  ariaLabel?: string;
  /** Tooltip explaining why the dropdown is disabled. Shown above the control, on hover over the control only (not the label or help text), and only while `isDisabled` is true. */
  disabledTooltipContent?: React.ReactNode;
  /** Defaults to "auto" so a menu near the viewport bottom flips upward
   * instead of stretching the page and triggering a scrollbar-driven
   * layout shift. */
  menuPlacement?: MenuPlacement;
}

const getOptionBackgroundColor = (
  state: OptionProps<CustomOptionType, false>
) => {
  if (state.isFocused) return COLORS["ui-fleet-black-5"];
  if (state.isSelected) return COLORS["ui-fleet-black-10"];
  return "transparent";
};

/** generates the default custom styles for the dropdown component.
 * NOTE: we export this from DropdownWrapper components so that other more
 * customisable dropdown components can use this for consistency in styling */
export const generateCustomDropdownStyles = (
  variant?: DropdownWrapperVariant,
  isDisabled = false,
  nowrapMenu = false,
  maxMenuHeight?: number
): StylesConfig<CustomOptionType, false> => {
  return {
    container: (provided) => {
      return {
        ...provided,
        width: "100%",
        height: "36px",
      };
    },

    control: (provided, state) => {
      return {
        ...provided,
        display: "flex",
        flexDirection: "row",
        width: "100%",
        minHeight: "36px", // react-select-5 defaults control minHeight to 38px
        backgroundColor: COLORS["core-fleet-white"],
        paddingLeft: "8px", // TODO: Update to match styleguide of (16px) when updating rest of UI (8px)
        paddingRight: "8px",
        cursor: "pointer",
        boxShadow: "none",
        borderRadius: "4px",
        borderColor: state.isFocused
          ? COLORS["core-fleet-black"]
          : COLORS["ui-fleet-black-10"],
        "&:hover": {
          boxShadow: "none",
          borderColor: COLORS["ui-fleet-black-50"],
          ".dropdown-wrapper__single-value": {
            color: COLORS["ui-fleet-black-75"],
          },
          ".dropdown-wrapper__indicator path": {
            stroke: COLORS["ui-fleet-black-75"],
          },
          ".filter-icon path": {
            fill: COLORS["ui-fleet-black-75"],
          },
        },
        // When tabbing
        // Relies on --is-focused for styling as &:focus-visible cannot be applied
        "&.react-select__control--is-focused": {
          borderColor: state.isFocused
            ? COLORS["core-fleet-black"]
            : COLORS["ui-fleet-black-25"],
          ".dropdown-wrapper__indicator path": {
            stroke: COLORS["ui-fleet-black-75"],
          },
          ".filter-icon path": {
            fill: COLORS["ui-fleet-black-75"],
          },
        },
        ...(state.isFocused && {
          ".dropdown-wrapper__placeholder": {
            color: COLORS["ui-fleet-black-75"],
          },
          ".dropdown-wrapper__indicator path": {
            stroke: COLORS["ui-fleet-black-75"],
          },
        }),
        ...(state.isDisabled && {
          ".dropdown-wrapper__single-value": {
            color: COLORS["ui-fleet-black-50"],
          },
          ".dropdown-wrapper__indicator path": {
            stroke: COLORS["ui-fleet-black-50"],
          },
          ".filter-icon path": {
            fill: COLORS["ui-fleet-black-50"],
          },
        }),
        "&:active": {
          ".dropdown-wrapper__single-value": {
            color: COLORS["ui-fleet-black-75"],
          },
          ".dropdown-wrapper__indicator path": {
            stroke: COLORS["ui-fleet-black-75"],
          },
          ".filter-icon path": {
            fill: COLORS["ui-fleet-black-75"],
          },
        },
        ...(state.menuIsOpen && {
          ".dropdown-wrapper__indicator svg": {
            transform: "rotate(180deg)",
            transition: "transform 0.25s ease",
          },
        }),
      };
    },
    placeholder: (provided) => {
      return {
        ...provided,
        fontSize: "13px",
      };
    },
    input: (provided) => {
      return {
        ...provided,
        color: COLORS["core-fleet-black"],
        fontSize: "13px",
        margin: 0,
        padding: 0,
      };
    },
    singleValue: (provided, state) => ({
      ...provided,
      color: state.isDisabled
        ? COLORS["ui-fleet-black-50"]
        : COLORS["core-fleet-black"],
      fontSize: "13px",
      margin: 0,
      padding: 0,
    }),
    dropdownIndicator: (provided) => ({
      ...provided,
      display: "flex",
      padding: "2px",
      svg: {
        transition: "transform 0.25s ease",
      },
      opacity: isDisabled ? 0.5 : 1,
    }),
    menu: (provided) => ({
      ...provided,
      backgroundColor: COLORS["core-fleet-white"],
      boxShadow: `0 2px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px ${COLORS["ui-fleet-black-10"]}`,
      borderRadius: "4px",
      zIndex: 6,
      overflow: "hidden",
      border: 0,
      marginTop: "3px",
      left: 0,
      maxHeight: "none",
      position: "absolute",
      animation: "fade-in 150ms ease-out",
      ...(nowrapMenu && {
        width: "fit-content",
        left: "auto",
        right: "0",
      }),
    }),
    menuList: (provided) => ({
      ...provided,
      padding: PADDING["pad-small"],
      maxHeight: maxMenuHeight != null ? `${maxMenuHeight}px` : "none",
      ...(nowrapMenu && { width: "fit-content" }),
    }),
    valueContainer: (provided) => ({
      ...provided,
      padding: 0,
      display: "flex",
      gap: PADDING["pad-small"],
      flexWrap: "nowrap", // This ensures the value is on a single line and truncated
    }),
    option: (provided, state) => ({
      ...provided,
      padding: "10px 8px",
      fontSize: "13px",
      borderRadius: "4px",
      backgroundColor: getOptionBackgroundColor(state),
      fontWeight: state.isSelected ? "600" : "normal",
      color: COLORS["core-fleet-black"],
      "&:hover": {
        backgroundColor: state.isDisabled
          ? "transparent"
          : COLORS["ui-fleet-black-5"],
        cursor: state.isDisabled ? "not-allowed" : "pointer",
      },
      "&:active": {
        backgroundColor: state.isDisabled
          ? "transparent"
          : COLORS["ui-fleet-black-5"],
      },
      ...(state.isDisabled && {
        color: COLORS["ui-fleet-black-50"],
        fontStyle: "italic",
        cursor: "not-allowed",
      }),
      // Styles for custom option
      ".dropdown-wrapper__option": {
        display: "flex",
        flexDirection: "column",
        gap: "8px",
        width: "100%",
        whiteSpace: nowrapMenu ? "nowrap" : "normal",
      },
      ".dropdown-wrapper__help-text": {
        fontSize: "12px",
        width: "100%",
        whiteSpace: nowrapMenu ? "nowrap" : "normal",
        color: state.isDisabled
          ? COLORS["ui-fleet-black-50"]
          : COLORS["ui-fleet-black-75"],
        fontStyle: "italic",
        fontWeight: "normal",
      },
    }),
    menuPortal: (base) => ({ ...base, zIndex: 999 }), // Not hidden beneath scrollable sections
    noOptionsMessage: (provided) => ({
      ...provided,
      textAlign: "left",
      fontSize: "13px",
      padding: "10px 8px",
    }),
  };
};

const DropdownWrapper = ({
  options,
  value,
  onChange,
  name,
  className,
  labelClassname,
  wrapperClassname,
  error,
  label,
  helpText,
  isSearchable = false,
  isDisabled = false,
  iconName,
  placeholder,
  onMenuOpen,
  variant,
  nowrapMenu,
  customNoOptionsMessage,
  ariaLabel,
  disabledTooltipContent,
  menuPlacement = "auto",
}: IDropdownWrapper) => {
  const wrapperClassNames = classnames(baseClass, className, {
    [`${baseClass}__table-filter`]: variant === "table-filter",
    [`${wrapperClassname}`]: !!wrapperClassname,
  });

  // To prevent excessively long dropdowns, this sets a max menu height for
  // more than 9 options or more than than 6 options with help text
  const hasHelpText = options.some((opt) => !!opt.helpText);
  const enableMaxMenuHeight = hasHelpText
    ? options.length > 6
    : options.length > 9;

  const maxMenuHeight = enableMaxMenuHeight ? 305 : undefined;

  const handleChange = (newValue: SingleValue<CustomOptionType>) => {
    onChange(newValue);
  };

  // Ability to handle value of type string or CustomOptionType
  const getCurrentValue = () => {
    if (typeof value === "string") {
      return options.find((option) => option.value === value) || null;
    }
    return value;
  };

  const ValueContainer = ({
    children,
    ...props
  }: ValueContainerProps<CustomOptionType, false>) => {
    const iconToDisplay =
      iconName || (variant === "table-filter" ? "filter" : null);

    return (
      components.ValueContainer && (
        <components.ValueContainer {...props}>
          {!!children && iconToDisplay && (
            <Icon name={iconToDisplay} className="filter-icon" />
          )}
          {children}
        </components.ValueContainer>
      )
    );
  };

  const renderLabel = () => {
    const labelWrapperClasses = classnames(
      `${baseClass}__label`,
      labelClassname,
      {
        [`${baseClass}__label--error`]: !!error,
        [`${baseClass}__label--disabled`]: isDisabled,
      }
    );

    if (!label) {
      return "";
    }

    return (
      <label className={labelWrapperClasses} htmlFor={name}>
        {error || label}
      </label>
    );
  };

  const selectElement = (
    <Select<CustomOptionType, false>
      classNamePrefix="react-select"
      isSearchable={isSearchable}
      styles={generateCustomDropdownStyles(
        variant,
        isDisabled,
        nowrapMenu,
        maxMenuHeight
      )}
      options={options}
      components={{
        Option: CustomOption,
        DropdownIndicator: CustomDropdownIndicator,
        IndicatorSeparator: () => null,
        ValueContainer,
      }}
      value={getCurrentValue()}
      onChange={handleChange}
      isDisabled={isDisabled}
      noOptionsMessage={() => customNoOptionsMessage ?? "No results found"}
      tabIndex={isDisabled ? -1 : 0} // Ensures disabled dropdown has no keyboard accessibility
      placeholder={placeholder}
      onMenuOpen={onMenuOpen}
      menuPlacement={menuPlacement}
      // Resolve accessible name: explicit prop wins, otherwise fall back
      // to the placeholder (usually "Select X"), otherwise the required
      // `name` (often a kebab-case identifier — least readable but
      // guaranteed present).
      aria-label={ariaLabel ?? placeholder ?? name}
    />
  );

  return (
    <FormField
      name={name}
      label={renderLabel()}
      helpText={helpText}
      type="dropdown"
      className={wrapperClassNames}
    >
      {isDisabled && disabledTooltipContent ? (
        <TooltipWrapper
          className={`${baseClass}__disabled-tooltip`}
          tipContent={disabledTooltipContent}
          position="top"
          underline={false}
          showArrow
        >
          {selectElement}
        </TooltipWrapper>
      ) : (
        selectElement
      )}
    </FormField>
  );
};

export default DropdownWrapper;