dgz-ui/dist/types/ui/form/select.d.ts

Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript

import { Option } from './react-select';
import * as SelectPrimitive from '@radix-ui/react-select';
import * as React from 'react';
/**
 * Select primitives built on Radix Select for accessible dropdowns.
 * @example
 * ```tsx
 * <Select>
 *   <SelectTrigger className="w-[180px]">
 *     <SelectValue placeholder="Select a fruit" />
 *   </SelectTrigger>
 *   <SelectContent>
 *     <SelectGroup>
 *       <SelectLabel>Fruits</SelectLabel>
 *       <SelectItem value="apple">Apple</SelectItem>
 *       <SelectItem value="banana">Banana</SelectItem>
 *       <SelectItem value="blueberry">Blueberry</SelectItem>
 *       <SelectItem value="grapes">Grapes</SelectItem>
 *       <SelectItem value="pineapple">Pineapple</SelectItem>
 *     </SelectGroup>
 *   </SelectContent>
 * </Select>
 * ```
 */
declare const Select: React.FC<SelectPrimitive.SelectProps>;
declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
/**
 * Props for SelectTrigger component.
 */
export type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
    variant?: 'default' | 'failure';
};
/**
 * SelectTrigger - The trigger button for the Select.
 * @returns {JSX.Element} The rendered SelectTrigger component.
 * @example
 * ```tsx
 * <SelectTrigger className="w-[180px]">
 *   <SelectValue placeholder="Select a fruit" />
 * </SelectTrigger>
 * ```
 */
declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
    variant?: "default" | "failure";
} & React.RefAttributes<HTMLButtonElement>>;
/**
 * SelectScrollUpButton - Scrolls the Select viewport up.
 * @returns {JSX.Element} The rendered SelectScrollUpButton component.
 */
declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * SelectScrollDownButton - Scrolls the Select viewport down.
 * @returns {JSX.Element} The rendered SelectScrollDownButton component.
 */
declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * SelectContent - Popup container for Select options.
 * @returns {JSX.Element} The rendered SelectContent component.
 */
declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * SelectLabel - Label for a group of Select items.
 * @returns {JSX.Element} The rendered SelectLabel component.
 */
declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * SelectItem - A single option row within the Select.
 * @returns {JSX.Element} The rendered SelectItem component.
 */
declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * SelectSeparator - Visual separator within the list of Select options.
 * @returns {JSX.Element} The rendered SelectSeparator component.
 */
declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
export type VirtualizedSelectContentProps = Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, 'children'> & {
    itemHeight?: number;
    maxHeight?: number;
    options: Option[];
};
/**
 * VirtualizedSelectContent - A virtualized popup container for Select options, optimized for large lists.
 * Uses `react-window` for efficient rendering.
 * @augments {React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, 'children'> & {itemHeight?: number;maxHeight?: number;options: Option[];} & React.RefAttributes<HTMLDivElement>>}
 * @param {object} props - The props for the VirtualizedSelectContent component.
 * @param {string} [props.className] - Additional CSS classes.
 * @param {Option[]} props.options - The array of options to display in the select.
 * @param {'popper' | 'item-aligned'} [props.position='popper'] - The positioning strategy for the content.
 * @param {number} [props.itemHeight=35] - The height of each item in the virtualized list.
 * @param {number} [props.maxHeight=300] - The maximum height of the virtualized list.
 * @returns {JSX.Element} The rendered VirtualizedSelectContent component.
 */
declare const VirtualizedSelectContent: React.ForwardRefExoticComponent<Omit<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref">, "children"> & {
    itemHeight?: number;
    maxHeight?: number;
    options: Option[];
} & React.RefAttributes<HTMLDivElement>>;
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, VirtualizedSelectContent, };
//# sourceMappingURL=select.d.ts.map