@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 "../theme/index.js";
import { SystemProps } from "../system/system.js";
import "../system/index.js";
import { ListItemProps, ListProps } from "../list/list.types.js";
import "../list/index.js";
import { ButtonProps } from "../button/button.types.js";
import "../button/index.js";
import { PopoverContentProps, PopoverProps } from "../popover/popover.types.js";
import "../popover/index.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