@navinc/base-react-components/dist/form-elements/address-input.d.ts

Nav's Pattern Library

import { HTMLInputTypeAttribute, ReactNode } from 'react';
import { Input } from './shared.js';
import { InferComponentProps } from '../types.js';
type AddressInputProps = {
    className?: string;
    label?: ReactNode;
    hasSpaceForErrors?: boolean;
    isInvalid?: boolean;
    required?: boolean;
    type?: HTMLInputTypeAttribute;
    errors?: string[];
    lede?: ReactNode;
    onAddressSelected?: (addr: {
        city: string;
        state: string;
        street1: string;
        zip: string;
        country: string;
    }) => void;
    touched?: boolean;
    placeholder?: string;
    isPrivate?: boolean;
    autocompleteDropdownClassName?: string;
} & InferComponentProps<typeof Input>;
/** Use the `<AddressInput />` component when full address information is needed. The AddressInput component is a fully uncontrolled component. Nav uses Google Maps Autocomplete api to autocomplete and validate addresses. It accepts an `onAddressSelected` function as a prop which is called once a complete addressed is selected from the Google Maps dropdown list. The `onAddressSelected` function is passed a structured address with the following fields: `street1`, `city`, `state`, `zip`.
 *
 * @example
 * ```tsx
 * <AddressInput
 *   onAddressSelected={({ street1, city, state, zip }) => console.log({ street1, city, state, zip })}
 *   label='Address'
 * />
 * ```
 *
 * #### Props
 *
 * AddressInput accepts all the props the Input component accepts -- including `onChange` -- with the exception of `value` -- use `defaultValue` to populate with an existing value at mount time -- and `type` -- the type is internally assigned the value of `text` to not interfere with the Autocomplete functionality -- and with the following additions.
 *
 * ##### onAddressSelected
 *
 * The GoogleMaps Autocomplete API binds to an input element and provides a dropdown of autocompleted addresses to choose from. When the user clicks on one of these, the input's value is updated to reflect the address string and the AddressInput component calls `onAddressSelected` passing it an object of address parts:
 *
 * ```
 * {
 *   street1: String,
 *   city: String,
 *   state: String,
 *   zip: String
 * }
 * ```
 *
 * @deprecated This component is deprecated and will be removed in a future release. Avoid using it in new code.
 */
export declare const AddressInput: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<{
    className?: string;
    label?: ReactNode;
    hasSpaceForErrors?: boolean;
    isInvalid?: boolean;
    required?: boolean;
    type?: HTMLInputTypeAttribute;
    errors?: string[];
    lede?: ReactNode;
    onAddressSelected?: (addr: {
        city: string;
        state: string;
        street1: string;
        zip: string;
        country: string;
    }) => void;
    touched?: boolean;
    placeholder?: string;
    isPrivate?: boolean;
    autocompleteDropdownClassName?: string;
} & InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<(import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement>) | (Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<import("react").Component<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, any, any>>), {
    isInvalid?: boolean;
}>> & (string & (Omit<import("react").ComponentClass<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>, keyof import("react").Component<any, {}, any>>))>, never>> & string & Omit<({ className, label, hasSpaceForErrors, isInvalid, value, required, type, errors, lede, onAddressSelected, touched, placeholder, isPrivate, autocompleteDropdownClassName, ...props }: AddressInputProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
export {};