Type Alias Props

Props: LatestSearchesProps & {
    ariaLabel?: string;
    autoSelectionValue?: string;
    children?: React.ReactNode;
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    customTranslations?: DeepPartial<AutocompleteTranslation>;
    disabled?: boolean;
    endIcon?: JSX.Element;
    errorMessage: string;
    freeSolo?: boolean;
    highlightMatch?: boolean;
    id: string;
    inputRef?: RefObject<HTMLInputElement | undefined | null>;
    isLoading?: boolean;
    label?: string;
    lang?: "en" | "sv" | "no";
    onArrowNavigation?: ((value: SelectedItemProps) => void);
    onBlur?: ((event: React.FocusEvent<HTMLInputElement>) => void);
    onChange?: ((item: SelectedItemProps) => void);
    onSelect?: ((item: SelectedItemProps) => void);
    options: SelectedItemProps[];
    overrideDefaultOnSelectBehavior?: boolean;
    placeholder: string;
    prepopulationLists?: PrepopulationList[];
    shouldAlwaysUseSheet?: boolean;
    shouldKeepSearchQuery?: boolean;
    skeletonSx?: SxProps<Theme>;
    startIcon?: JSX.Element;
    sx?: SxProps<Theme>;
    textFieldButtonProps?: Partial<TextFieldButtonProps>;
    titleComponent?:
        | "h1"
        | "h2"
        | "h3"
        | "h4"
        | "h5"
        | "h6";
    transitionType?: "slide" | "fade";
    useInlineSwapIcon?: boolean;
    useInternalFilter?: boolean;
    value: string;
}

Type declaration

  • OptionalariaLabel?: string

    Aria label attribute for enhanced accessibility.

  • OptionalautoSelectionValue?: string

    Preset the autocomplete search value. If it matches a valid search hit, it will be selected. Otherwise, an empty selection is made.

  • Optionalchildren?: React.ReactNode

    The children elements of the component.

  • OptionalcustomAttribute?: {
        attribute: string;
        value: string | number;
    }

    Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

    • attribute: string
    • value: string | number
  • OptionalcustomTranslations?: DeepPartial<AutocompleteTranslation>

    Custom translations for the component.

  • Optionaldisabled?: boolean

    If true, the component is disabled.

  • OptionalendIcon?: JSX.Element

    Icon to display at the end of the input field.

  • errorMessage: string

    Error message to display.

  • OptionalfreeSolo?: boolean

    Allow input values to be submitted freely without needing to match a search hit if true.

  • OptionalhighlightMatch?: boolean

    Highlight matching parts of the input value in the dropdown options if true.

  • id: string

    Unique identifier for the component.

  • OptionalinputRef?: RefObject<HTMLInputElement | undefined | null>

    Reference to the input (text field) element.

  • OptionalisLoading?: boolean

    If true, a loading skeleton will be rendered instead of the component.

  • Optionallabel?: string

    The label text.

  • Optionallang?: "en" | "sv" | "no"

    Language used for internal translations.

  • OptionalonArrowNavigation?: ((value: SelectedItemProps) => void)

    Callback fired when navigating results with arrow key

  • OptionalonBlur?: ((event: React.FocusEvent<HTMLInputElement>) => void)

    Callback fired when focus leaves the input field.

      • (event): void

      • Parameters

        • event: React.FocusEvent<HTMLInputElement>

        Returns void

  • OptionalonChange?: ((item: SelectedItemProps) => void)

    Callback fired when the input value changes.

  • OptionalonSelect?: ((item: SelectedItemProps) => void)

    Callback fired when an option is selected.

  • options: SelectedItemProps[]

    The filtered options to be displayed in the drop down

  • OptionaloverrideDefaultOnSelectBehavior?: boolean

    When true the components internal onSelect is overridden which otherwise runs alongside the passed in function

  • placeholder: string

    The input (text field) placeholder text

  • OptionalprepopulationLists?: PrepopulationList[]

    Lists to prepopulate the dropdown with.

  • OptionalshouldAlwaysUseSheet?: boolean

    Force mobile behavior - render a text-field-button to open the autocomplete in a sheet

  • OptionalshouldKeepSearchQuery?: boolean

    When true the input field will keep the user defined value and not display the currently selected option

  • OptionalskeletonSx?: SxProps<Theme>

    Custom styles for the skeleton component.

  • OptionalstartIcon?: JSX.Element

    Icon to display at the start of the input field.

  • Optionalsx?: SxProps<Theme>

    Prop for defining system overrides and additional CSS styles.

  • OptionaltextFieldButtonProps?: Partial<TextFieldButtonProps>

    Custom props for the TextFieldButton component.

  • OptionaltitleComponent?:
        | "h1"
        | "h2"
        | "h3"
        | "h4"
        | "h5"
        | "h6"

    Semantic heading size for popular values.

  • OptionaltransitionType?: "slide" | "fade"

    Transition type for opening and closing the drawer on mobile.

  • OptionaluseInlineSwapIcon?: boolean

    Show an inline swap icon for desktop devices if true.

  • OptionaluseInternalFilter?: boolean

    Use internal filter for options

  • value: string

    Current search value.

Settings

Member Visibility