@navinc/base-react-components
Version:
Nav's Pattern Library
83 lines (82 loc) • 8.41 kB
TypeScript
import Select, { ClearIndicatorProps, ControlProps, DropdownIndicatorProps, MenuListProps, MultiValueProps, MultiValueRemoveProps, OptionProps, SingleValueProps, StylesConfig } from 'react-select';
import { type LabelProps, type HelperTextProps } from '../input-components/index.js';
import { InferComponentProps } from '../../types.js';
type CommonSelectComboProps = Pick<HelperTextProps, 'helperText'> & {
className?: string;
styles?: (defaultStyles: StylesConfig) => typeof defaultStyles;
name: string;
};
type ExposedReactSelectProps = Pick<InferComponentProps<Select>, 'isClearable' | 'isMulti' | 'isDisabled' | 'options' | 'placeholder' | 'components'>;
export type SelectComboBoxProps = LabelProps & CommonSelectComboProps & ExposedReactSelectProps;
export type BaseSelectComboBoxProps = CommonSelectComboProps & InferComponentProps<Select> & {
error?: string;
};
export declare const BaseControl: ({ children, innerProps, ...props }: ControlProps) => import("react/jsx-runtime").JSX.Element;
export declare const BaseMenuList: ({ children, innerProps, ...props }: MenuListProps) => import("react/jsx-runtime").JSX.Element;
export declare const BaseOption: ({ children, innerProps, ...props }: OptionProps) => import("react/jsx-runtime").JSX.Element;
export declare const BaseSingleValue: ({ children, innerProps, ...props }: SingleValueProps) => import("react/jsx-runtime").JSX.Element;
/**
* BaseSelectComboBox component is just the select.
* It handles styling and internal component overrides.
*
* @description the react-select Select input at the base level
* with some default Nav styling. This component accepts all react-select
* props from their API. The exception is the `styles` prop.
*/
export declare const BaseSelectComboBox: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Pick<HelperTextProps, "helperText"> & {
className?: string;
styles?: (defaultStyles: StylesConfig) => typeof defaultStyles;
name: string;
} & InferComponentProps<Select> & {
error?: string;
} & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Pick<HelperTextProps, "helperText"> & {
className?: string;
styles?: (defaultStyles: StylesConfig) => typeof defaultStyles;
name: string;
} & InferComponentProps<Select> & {
error?: string;
} & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
export declare const BaseSelectComboBoxInternal: {
ClearIndicator: ({ children, innerProps, ...props }: ClearIndicatorProps) => import("react/jsx-runtime").JSX.Element;
Control: ({ children, innerProps, ...props }: ControlProps) => import("react/jsx-runtime").JSX.Element;
DropdownIndicator: ({ innerProps, ...props }: DropdownIndicatorProps) => import("react/jsx-runtime").JSX.Element;
MenuList: ({ children, innerProps, ...props }: MenuListProps) => import("react/jsx-runtime").JSX.Element;
MultiValue: ({ children, innerProps, ...props }: MultiValueProps) => import("react/jsx-runtime").JSX.Element;
MultiValueRemove: ({ innerProps, ...props }: MultiValueRemoveProps) => import("react/jsx-runtime").JSX.Element;
Option: ({ children, innerProps, ...props }: OptionProps) => import("react/jsx-runtime").JSX.Element;
SingleValue: ({ children, innerProps, ...props }: SingleValueProps) => import("react/jsx-runtime").JSX.Element;
DownChevron: (props: import("node_modules/react-select/dist/declarations/src/components/indicators.js").DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
CrossIcon: (props: import("node_modules/react-select/dist/declarations/src/components/indicators.js").CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends import("react-select").GroupBase<Option_3>>(props: import("react-select").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends import("react-select").GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends import("react-select").GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends import("react-select").GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends import("react-select").GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
LoadingIndicator: <Option_8, IsMulti_8 extends boolean, Group_8 extends import("react-select").GroupBase<Option_8>>({ innerProps, isRtl, size, ...restProps }: import("react-select").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends import("react-select").GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
MenuPortal: <Option_11, IsMulti_11 extends boolean, Group_11 extends import("react-select").GroupBase<Option_11>>(props: import("node_modules/react-select/dist/declarations/src/components/Menu.js").MenuPortalProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element | null;
LoadingMessage: <Option_12, IsMulti_12 extends boolean, Group_12 extends import("react-select").GroupBase<Option_12>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element;
NoOptionsMessage: <Option_13, IsMulti_13 extends boolean, Group_13 extends import("react-select").GroupBase<Option_13>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends import("react-select").GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
MultiValueLabel: <Option_15, IsMulti_15 extends boolean, Group_15 extends import("react-select").GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends import("react-select").GroupBase<Option_17>>(props: import("react-select").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
SelectContainer: <Option_18, IsMulti_18 extends boolean, Group_18 extends import("react-select").GroupBase<Option_18>>(props: import("react-select").ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
ValueContainer: <Option_20, IsMulti_20 extends boolean, Group_20 extends import("react-select").GroupBase<Option_20>>(props: import("react-select").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
};
/**
* SelectComboBox component comes with label and helper text
* Only a few react-select props are exposed.
* @description Uses BaseSelectCombo box with form controls.
* This component works out of the box. And returns the value
* as an [] (isMulti), or {} (single select)
*/
export declare const SelectComboBox: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLLabelElement> & {
label?: import("react").ReactNode;
optional?: boolean;
required?: boolean;
} & Pick<HelperTextProps, "helperText"> & {
className?: string;
styles?: (defaultStyles: StylesConfig) => typeof defaultStyles;
name: string;
} & ExposedReactSelectProps & import("react").RefAttributes<HTMLDivElement>>;
export {};