@veracity/vui/dist/select/select.types.d.ts

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { ThemingProps } from "../theme/types.js";
import { SystemProps } from "../system/system.js";
import { ListItemProps, ListProps } from "../list/list.types.js";
import { ButtonProps } from "../button/button.types.js";
import { PopoverContentProps, PopoverProps } from "../popover/popover.types.js";
import { UseSelectProps } from "./useSelect.types.js";
import { UseSelectReturnType } from "./useSelect.js";
import { ReactNode } from "react";

//#region src/select/select.types.d.ts
type SelectButtonProps = ButtonProps;
type SelectContentProps = PopoverContentProps;
type SelectContext = Pick<SelectProps, 'disabled' | 'isInvalid' | 'isMultiple' | 'name' | 'options' | 'placeholder' | 'readOnly' | 'size' | 'variant'> & UseSelectReturnType;
type SelectGroupProps = ListProps;
type SelectProps = ThemingProps<'Select'> & SystemProps & PopoverProps & UseSelectProps & {
  /** Select cannot be opened and is styled accordingly. */disabled?: boolean; /** Hiding the options list on scroll event. Recommended for scrollable containers. */
  closeOnScroll?: boolean; /** Socket displaying error text below an input. */
  errorText?: string | React.ReactNode; /** Socket displaying help text below an input. */
  helpText?: React.ReactNode | string; /** Unique identifier */
  id?: string; /** Represents invalid form input and is styled accordingly. */
  isInvalid?: boolean; /** Maximum container height in px. */
  maxHeight?: number; /** Name of the input. Used in custom change event to support form library integration. */
  name?: string; /** The label. */
  label?: string | React.ReactNode; /** Should the label indicates that the field is optional */
  labelMarkOptional?: boolean; /** Adds a tooltip with the text inside the label */
  labelTooltipText?: string; /** Sets the Popover matchWidth prop. @default true */
  matchWidth?: boolean; /** Data prop to display an array of options in the popover. */
  options?: SelectOptionData[]; /** Displayed inside the trigger when no value is selected. */
  placeholder?: string; /** Displayed inside the trigger when value(s) selected. */
  selectedText?: string; /** Select cannot be opened and is styled accordingly. */
  readOnly?: boolean; /** Custom select button slot. */
  selectButton?: ReactNode; /** Displays a filter input to limit the number of options. Important: it takes effect only if the options array is provided. */
  showOptionsFilter?: boolean;
};
type SelectOptionData = {
  /** Option is displayed as disabled. */disabled?: boolean; /** Text label of the option. */
  text: string; /** Value of a given option. */
  value: SelectValue;
};
type SelectOptionProps = ListItemProps & {
  /** Hiding the options list on scroll event. */closeOnScroll?: boolean; /** Currently selected value. Can be a string/number or array of those when using 'isMultiple'.  */
  value?: SelectValue; /** Hover title text. */
  title?: string;
};
type SelectLabelProps = Pick<SelectProps, 'disabled' | 'id' | 'label' | 'labelMarkOptional' | 'labelTooltipText'>;
type SelectValue = number | string;
//#endregion
export { SelectButtonProps, SelectContentProps, SelectContext, SelectGroupProps, SelectLabelProps, SelectOptionData, SelectOptionProps, SelectProps, SelectValue };

//# sourceMappingURL=select.types.d.ts.map