import * as React from 'react'; export type DropdownTitle = string | React.ReactNode; export type DropdownIcon = | string | React.ReactNode | ((...args: any[]) => any); export type DropdownIconPosition = 'left' | 'right'; export type DropdownTrianglePosition = 'left' | 'right'; export type DropdownLabel = | string | ((...args: any[]) => any) | React.ReactNode; export type DropdownLabelDirection = 'horizontal' | 'vertical'; export type DropdownLabelSrOnly = string | boolean; export type DropdownStatus = | string | boolean | ((...args: any[]) => any) | React.ReactNode; export type DropdownSuffix = | string | ((...args: any[]) => any) | React.ReactNode; export type DropdownScrollable = string | boolean; export type DropdownFocusable = string | boolean; export type DropdownDirection = 'auto' | 'top' | 'bottom'; export type DropdownSkipPortal = string | boolean; export type DropdownNoAnimation = string | boolean; export type DropdownNoScrollAnimation = string | boolean; export type DropdownPreventSelection = string | boolean; export type DropdownMoreMenu = string | boolean; export type DropdownActionMenu = string | boolean; export type DropdownIndependentWidth = string | boolean; export type DropdownSize = 'default' | 'small' | 'medium' | 'large'; export type DropdownAlignDropdown = 'left' | 'right'; export type DropdownTriggerComponent = | ((...args: any[]) => any) | React.ReactNode; export type DropdownData = | string | ((...args: any[]) => any) | React.ReactNode | Object | ( | string | React.ReactNode | { selected_value?: string | React.ReactNode; content?: string | React.ReactNode | string[]; } )[]; export type DropdownDefaultValue = string | number; export type DropdownValue = string | number; export type DropdownOpenOnFocus = string | boolean; export type DropdownPreventClose = string | boolean; export type DropdownKeepOpen = string | boolean; export type DropdownOpened = string | boolean; export type DropdownDisabled = string | boolean; export type DropdownStretch = string | boolean; export type DropdownSkeleton = string | boolean; export type DropdownSpace = | string | number | boolean | { /** * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. */ top?: string | number | boolean; /** * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. */ right?: string | number | boolean; /** * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. */ bottom?: string | number | boolean; /** * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. */ left?: string | number | boolean; }; export type DropdownTop = string | number | boolean; export type DropdownRight = string | number | boolean; export type DropdownBottom = string | number | boolean; export type DropdownLeft = string | number | boolean; export type DropdownChildren = | string | ((...args: any[]) => any) | React.ReactNode | Object | any[]; /** * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". */ export interface DropdownProps extends React.HTMLProps { id?: string; /** * Give a title to let the user know what they has to do. Defaults to `Valgmeny` . */ title?: DropdownTitle; /** * Icon to be included in the dropdown. */ icon?: DropdownIcon; /** * Change the size of the icon pragmatically. */ icon_size?: string; /** * Position of icon inside the dropdown. Set to `left` or `right`. Defaults to `right`. */ icon_position?: DropdownIconPosition; /** * Position of arrow / triangle of the drawer. Set to `left` or `right`. Defaults to `right`. */ triangle_position?: DropdownTrianglePosition; /** * Prepends the Form Label component. If no ID is provided, a random ID is created. */ label?: DropdownLabel; /** * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal` */ label_direction?: DropdownLabelDirection; /** * Use `true` to make the label only readable by screen readers. */ label_sr_only?: DropdownLabelSrOnly; /** * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. */ status?: DropdownStatus; /** * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`. */ status_state?: string; status_animation?: string; /** * The `status_id` used for the target GlobalStatus. */ global_status_id?: string; /** * Text describing the content of the Dropdown more than the label. You can also send in a React component, so it gets wrapped inside the Dropdown component. */ suffix?: DropdownSuffix; scrollable?: DropdownScrollable; focusable?: DropdownFocusable; direction?: DropdownDirection; max_height?: number; /** * Set to `true` to disable the React Portal behavior. Defaults to `false`. */ skip_portal?: DropdownSkipPortal; no_animation?: DropdownNoAnimation; no_scroll_animation?: DropdownNoScrollAnimation; /** * If set to `true`, no permanent selection will be made. Defaults to `false`. */ prevent_selection?: DropdownPreventSelection; /** * Same as `prevent_selection`, but the "selection area" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`. */ more_menu?: DropdownMoreMenu; /** * Same as `prevent_selection`, but the DrawerList will be opened from the bottom of the page for mobile devices. Defaults to `false`. */ action_menu?: DropdownActionMenu; /** * If set to true, the Dropdown will handle it's width independent to the content width. Defaults to `false`. */ independent_width?: DropdownIndependentWidth; /** * Define the height of the Dropdown. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`. */ size?: DropdownSize; /** * Use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu`. Defaults to `left`. */ align_dropdown?: DropdownAlignDropdown; trigger_component?: DropdownTriggerComponent; data?: DropdownData; default_value?: DropdownDefaultValue; value?: DropdownValue; open_on_focus?: DropdownOpenOnFocus; prevent_close?: DropdownPreventClose; keep_open?: DropdownKeepOpen; opened?: DropdownOpened; disabled?: DropdownDisabled; /** * If set to `true`, then the dropdown will be 100% in available `width`. */ stretch?: DropdownStretch; skeleton?: DropdownSkeleton; class?: string; /** * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. */ space?: DropdownSpace; /** * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. */ top?: DropdownTop; /** * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. */ right?: DropdownRight; /** * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. */ bottom?: DropdownBottom; /** * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. */ left?: DropdownLeft; className?: string; children?: DropdownChildren; custom_element?: Object; custom_method?: (...args: any[]) => any; /** * Will be called once the user presses the dropdown. Returns the data item `{ data, attributes }`. */ on_show?: (...args: any[]) => any; /** * Will be called once the user presses the dropdown again, or clicks somewhere else. Returns the data item `{ data, attributes }`. */ on_hide?: (...args: any[]) => any; /** * Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value }`. */ on_change?: (...args: any[]) => any; /** * Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value, active_item }`. The "active_item" property is the currently selected item by keyboard navigation */ on_select?: (...args: any[]) => any; on_state_update?: (...args: any[]) => any; } export default class Dropdown extends React.Component { static defaultProps: object; render(): JSX.Element; }