@sproutsocial/seeds-react-input 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeBaseInputProps {
+    /** ID of the form element, should match the "for" value of the associated label */
+    id: string;
+    name: string;
+    /** Label used to describe the input if not used with an accompanying visual label */
+    ariaLabel?: string;
+    /** Attribute used to associate other elements that describe the Input, like an error */
+    ariaDescribedby?: string;
+    /** Label for Input.ClearButton. Required when using Input.ClearButton. */
+    clearButtonLabel?: string;
+    /** Placeholder text for when value is undefined or empty */
+    placeholder?: string;
+    /** Current value of the input */
+    value?: string;
+    /** HTML type attribute */
+    type?: "date" | "email" | "number" | "password" | "text" | "url" | "search";
+    /** Set option to display earlier typed values */
+    autoComplete?: boolean;
+    /** Will autofocus the element when mounted to the DOM */
+    autoFocus?: boolean;
+    /** HTML disabled attribute */
+    disabled?: boolean;
+    /** HTML readonly attribute */
+    readOnly?: boolean;
+    /** Whether or not the current contents of the input are invalid */
+    isInvalid?: boolean;
+    /** Whether or not the current contents of the input has any warnings */
+    hasWarning?: boolean;
+    /** HTML required attribute */
+    required?: boolean;
+    /** 16x16 element, such as an icon */
+    elemBefore?: React.ReactNode;
+    /** 16x16 element, such as an icon */
+    elemAfter?: React.ReactNode;
+    /** Max length of the input */
+    maxLength?: number;
+    /** Props to spread onto the underlying input element */
+    inputProps?: React.ComponentPropsWithoutRef<"input">;
+    /** Used to get a reference to the underlying element */
+    innerRef?: {
+        current: null | HTMLInputElement;
+    } | ((arg0: React.ElementRef<any> | HTMLElement) => void);
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;
+    onClear?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;
+    onPaste?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;
+    size?: "large" | "small" | "default";
+    qa?: object;
+    /**
+        Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.
+        Note that this prop should only be used to alter styles and not functionality.
+    */
+    appearance?: "primary" | "secondary";
+}
+interface TypeInputProps extends TypeBaseInputProps, TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeBaseInputProps | "color"> {
+}
+interface TypeInputContainerProps {
+    size: TypeInputProps["size"];
+    appearance: TypeInputProps["appearance"];
+    hasBeforeElement: boolean;
+    hasAfterElement: boolean;
+    invalid?: boolean;
+    warning?: boolean;
+    disabled?: boolean;
+}
+
+interface TypeState {
+    hasValue: boolean;
+}
+declare class Input extends React.Component<TypeInputProps, TypeState> {
+    constructor(props: TypeInputProps);
+    componentDidUpdate({ value: prevValue }: TypeInputProps): void;
+    static defaultProps: {
+        autoFocus: boolean;
+        disabled: boolean;
+        type: string;
+        size: string;
+        appearance: string;
+    };
+    static ClearButton: {
+        (): JSX.Element | null;
+        displayName: string;
+    };
+    inputRef: React.RefObject<HTMLInputElement>;
+    handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void | undefined;
+    handleClear: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    handleChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void | undefined;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void | undefined;
+    handleKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void | undefined;
+    handlePaste: (e: React.SyntheticEvent<HTMLInputElement>) => void | undefined;
+    updateState: (inputValue: string) => void;
+    render(): JSX.Element;
+}
+
+export { Input, type TypeInputContainerProps, type TypeInputProps, Input as default };

package/dist/index.d.ts

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeBaseInputProps {
+    /** ID of the form element, should match the "for" value of the associated label */
+    id: string;
+    name: string;
+    /** Label used to describe the input if not used with an accompanying visual label */
+    ariaLabel?: string;
+    /** Attribute used to associate other elements that describe the Input, like an error */
+    ariaDescribedby?: string;
+    /** Label for Input.ClearButton. Required when using Input.ClearButton. */
+    clearButtonLabel?: string;
+    /** Placeholder text for when value is undefined or empty */
+    placeholder?: string;
+    /** Current value of the input */
+    value?: string;
+    /** HTML type attribute */
+    type?: "date" | "email" | "number" | "password" | "text" | "url" | "search";
+    /** Set option to display earlier typed values */
+    autoComplete?: boolean;
+    /** Will autofocus the element when mounted to the DOM */
+    autoFocus?: boolean;
+    /** HTML disabled attribute */
+    disabled?: boolean;
+    /** HTML readonly attribute */
+    readOnly?: boolean;
+    /** Whether or not the current contents of the input are invalid */
+    isInvalid?: boolean;
+    /** Whether or not the current contents of the input has any warnings */
+    hasWarning?: boolean;
+    /** HTML required attribute */
+    required?: boolean;
+    /** 16x16 element, such as an icon */
+    elemBefore?: React.ReactNode;
+    /** 16x16 element, such as an icon */
+    elemAfter?: React.ReactNode;
+    /** Max length of the input */
+    maxLength?: number;
+    /** Props to spread onto the underlying input element */
+    inputProps?: React.ComponentPropsWithoutRef<"input">;
+    /** Used to get a reference to the underlying element */
+    innerRef?: {
+        current: null | HTMLInputElement;
+    } | ((arg0: React.ElementRef<any> | HTMLElement) => void);
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;
+    onClear?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;
+    onPaste?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;
+    size?: "large" | "small" | "default";
+    qa?: object;
+    /**
+        Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.
+        Note that this prop should only be used to alter styles and not functionality.
+    */
+    appearance?: "primary" | "secondary";
+}
+interface TypeInputProps extends TypeBaseInputProps, TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeBaseInputProps | "color"> {
+}
+interface TypeInputContainerProps {
+    size: TypeInputProps["size"];
+    appearance: TypeInputProps["appearance"];
+    hasBeforeElement: boolean;
+    hasAfterElement: boolean;
+    invalid?: boolean;
+    warning?: boolean;
+    disabled?: boolean;
+}
+
+interface TypeState {
+    hasValue: boolean;
+}
+declare class Input extends React.Component<TypeInputProps, TypeState> {
+    constructor(props: TypeInputProps);
+    componentDidUpdate({ value: prevValue }: TypeInputProps): void;
+    static defaultProps: {
+        autoFocus: boolean;
+        disabled: boolean;
+        type: string;
+        size: string;
+        appearance: string;
+    };
+    static ClearButton: {
+        (): JSX.Element | null;
+        displayName: string;
+    };
+    inputRef: React.RefObject<HTMLInputElement>;
+    handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void | undefined;
+    handleClear: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    handleChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void | undefined;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void | undefined;
+    handleKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void | undefined;
+    handlePaste: (e: React.SyntheticEvent<HTMLInputElement>) => void | undefined;
+    updateState: (inputValue: string) => void;
+    render(): JSX.Element;
+}
+
+export { Input, type TypeInputContainerProps, type TypeInputProps, Input as default };