Dropdown

ariaLabel

string

Provide a descriptive label for this control, e.g. "Accounts".

children

REQUIRED

node|function

This component can render either declaratively, by directly passing a set of children or virtualized, by passing a render callback (function as children).Children can be of two types: <DropdownItem>s, to generate items; or <DropdownSection>s, when the dropdown is sectioned. Each section can, in turn, have <DropdownItem>s in it.The recommendation is to use the render callback when a large number of items is provided, since the item list will be virtualized by the component, thus increasing the performance.When using the render callback, items need to be provided through the items prop. Then, the callback will be called for each item present in the array, and the expected result is a <DropdownItem> or a <DropdownSection> depending on the sectioned prop.

className

string

Appends class names to the component.Should be used only for positioning and spacing purposes.

description

string

Message with instructions on how to fill the form field.

disabled

boolean

If true, the dropdown is not available for interaction.

iconType

enum

Icon to display. <One of

info

string

Additional information can be displayed in an info tooltip next to the Label.

invalid

boolean|string

When true, sets the field in an invalid state, in order to notify the user attention is needed over this particular field. This property can be a boolean field or a string. When it is a string, as well as the invalid state being shown, the text will be shown below.

items

array

Items to render, in the shape of a list of objects. Usually, each item in the items array contains the required data to generate the corresponding <DropdownItem> (or <DropdownSection> in case the dropdown is sectioned).This prop is required when rendering items with the render callback (function as children).

const items = ['Item 1', 'Item 2', 'Item 3'];

const dropdown = (
  <Dropdown title="Dropdown" items={items}>
    {({ item, index }) => (
      <DropdownItem key={index} onClick={() => console.log(item)}>
        {item}
      </DropdownItem>
    )}
  </Dropdown>
);

label

string

Text to display as label.

labelInline

boolean

Display the label inline the form control.Use only when the component is not inside a Form. In that case set layoutType to Form.LAYOUT_TYPE.SPLIT in the Form component.

loading

boolean

To indicate whether an action is in progress, especially in the case that it takes more than 1 second to complete, you should display the loading state.

onClose

function

Callback fired any time the dropdown is closed.function (

onLoadMore

function

Callback fired when more items must be loaded. This happens when you're lazy loading the items and the items that are about to render cannot be found in the items array.This callback should be used to fetch/load the missing items from the backend or other sources.The returned Promise should be resolved once item data has finished loading. It will be used to determine when to refresh the list with the newly-loaded data. This callback may be called multiple times in reaction to a single scroll event.

Lazy loading items

import { Dropdown, DropdownItem } from 'nr1';

// This example assumes you have a way to know/load this information.
const remoteTotalNumberOfItems = 9000;
const items = [
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' },
  { id: 4, text: 'Item 4' },
];

function fetchMore({ startIndex, stopIndex }) {
  return fetch(
    `path/to/api?startIndex=${startIndex}&stopIndex=${stopIndex}`
  ).then((response) => {
    // Store items in item list...
  });
}

const dropdown = (
  <Dropdown
    items={items}
    onLoadMore={fetchMore}
    rowCount={remoteTotalNumberOfItems}
    title="Dropdown"
  >
    {({ item, index }) => <DropdownItem key={index}>{item.text}</DropdownItem>}
  </Dropdown>
);

Integration with the query components

import { EntitiesByDomainTypeQuery, Dropdown, DropdownItem } from 'nr1';

const renderDropdown = (queryResult) => {
  const { fetchMore, loading, data } = queryResult;
  const { results, count } = data.actor.entitySearch;

  return (
    <Dropdown
      items={results.entities}
      onLoadMore={fetchMore}
      rowCount={count}
      title="Dropdown"
    >
      {({ item, index }) => (
        <DropdownItem key={index}>{item.text}</DropdownItem>
      )}
    </Dropdown>
  );
};

const style = { width: 200, height: 300 };
const dropdown = (
  <EntitiesByDomainTypeQuery entityDomain="APM" entityType="APPLICATION">
    {renderDropdown}
  </EntitiesByDomainTypeQuery>
);

onOpen

function

Callback fired any time the dropdown is opened. function (

onSearch

function

Callback fired any time the search input of the dropdown changes. This callback needs the search prop to be defined. function (

onToggle

function

Callback fired any time the dropdown is toggled. function (

placementType

enum

Specifies the placement of the dropdown relative to the dropdown trigger. Default display is on the bottom start, but you can also choose to display it from the bottom end. <One of

required

boolean

If true, denotes the form field as required.

rowCount

number

Number of rows.By default it's equal to length of array passed in the items prop.You should specify the rowCount when you know the total number of items but you want to lazy load them while scrolling.

search

string

Value of the search input. The search input will be shown only if the value is defined.

sectioned

boolean

Establishes whether the dropdown is sectioned. A sectioned dropdown composes its options grouped by sections (made with <DropdownSection>), where each section is delimited by an optional title at the top, and a horizontal separator at the bottom.

spacingType

enum[]

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use SPACING_TYPE.OMIT. <Array of

style

object

Inline style for custom styling.Should be used only for positioning and spacing purposes.

testId

string

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, my-nerdpack.some-element.Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

title

string

The text to display in the dropdown button. When not present, an icon must be passed instead.

type

enum

Type can be:

• Primary — use to call attention to one specific action you want the user to take as a next step.
• Normal (used as secondary) — use when multiple actions need to be displayed.
• Plain — use when multiple actions need to be available that are less important for the user to take.
• Destructive — use when you have a destructive action like delete or remove, which you would like the user to pause and consider before completing. <One of
  Dropdown.TYPE.DESTRUCTIVE, Dropdown.TYPE.NORMAL, Dropdown.TYPE.PLAIN, Dropdown.TYPE.PLAIN_NEUTRAL, Dropdown.TYPE.PRIMARY,
  >