@theroutingcompany/components 0.0.71-alpha.3 → 0.0.71-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.71-alpha.3",
+  "version": "0.0.71-alpha.5",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -97,6 +97,7 @@
     "@react-stately/searchfield": "^3.4.2",
     "@react-stately/select": "^3.5.1",
     "@react-stately/selection": "^3.13.1",
+    "@react-stately/tree": "^3.7.6",
     "@react-types/calendar": "^3.2.1",
     "@react-types/combobox": "^3.6.2",
     "@react-types/datepicker": "^3.3.1",

package/types/components/Calendar/TimeDateSelect.d.ts

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
+export declare const TriggerContent: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const DropdownContent: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
 export interface TimeDateSelectOutput {
     day: number;
     month: number;

package/types/components/ComboBox/ComboBox.d.ts

@@ -6,7 +6,7 @@ declare function ComboBox<T extends object>(props: ComboBoxProps<T> & {
     errorMessage?: string;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ComboBox {
-    var Item: <T>(props: import("@react-types/shared").ItemProps<T>) => JSX.Element;
-    var Section: <T>(props: import("@react-types/shared").SectionProps<T>) => JSX.Element;
+    var Item: <T>(props: import("@react-types/shared").ItemProps<T>) => React.JSX.Element;
+    var Section: <T>(props: import("@react-types/shared").SectionProps<T>) => React.JSX.Element;
 }
 export default ComboBox;

package/types/components/FormControl/FormControl.d.ts

@@ -1,85 +1,25 @@
-import { type PropsWithChildren, type ReactNode } from 'react';
 import { type AriaFieldProps, type FieldAria } from '@react-aria/label';
 import type { AriaTextFieldProps } from '@react-aria/textfield';
+import { type NumberInputProps } from 'components/Input/NumberInput/NumberInput';
+import { type TextAreaInputProps } from 'components/Input/TextArea/TextArea';
+import { type PropsWithChildren, type ReactNode } from 'react';
 import type { ComponentPropsWithoutStyles } from '../../helpers/typeHelpers';
 type FormControlProps<FieldProps = AriaFieldProps> = PropsWithChildren<{
+    errorMessage?: ReactNode;
     tooltipContent?: string;
     tooltipIcon?: ReactNode;
 } & FieldProps>;
-/** If in a `<FormControl/>`, read `fieldProps` generated by that FormControl's `useField` hook  */
 export declare function useFieldProps(): FieldAria['fieldProps'];
 export declare function FormControl({ children, label, errorMessage, description, tooltipContent, tooltipIcon, validationState, id, ...props }: FormControlProps): import("react/jsx-runtime").JSX.Element;
 export declare const TextFormControl: import("react").ForwardRefExoticComponent<{
+    errorMessage?: ReactNode;
     tooltipContent?: string | undefined;
     tooltipIcon?: ReactNode;
 } & AriaTextFieldProps & {
     children?: ReactNode;
 } & Omit<ComponentPropsWithoutStyles<"input">, "onChange"> & import("react").RefAttributes<HTMLInputElement>>;
-export declare const TextAreaFormControl: import("react").ForwardRefExoticComponent<{
-    tooltipContent?: string | undefined;
-    tooltipIcon?: ReactNode;
-} & AriaFieldProps & {
-    children?: ReactNode;
-} & ComponentPropsWithoutStyles<"textarea"> & {
-    label?: ReactNode;
-    pattern?: string | undefined;
-    id?: string | undefined;
-    name?: string | undefined;
-    type?: "search" | "text" | (string & {}) | "tel" | "url" | "email" | "password" | undefined;
-    'aria-activedescendant'?: string | undefined;
-    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
-    'aria-describedby'?: string | undefined;
-    'aria-details'?: string | undefined;
-    'aria-errormessage'?: string | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
-    'aria-label'?: string | undefined;
-    'aria-labelledby'?: string | undefined;
-    onCopy?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
-    onCut?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
-    onPaste?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
-    onCompositionEnd?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
-    onCompositionStart?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
-    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
-    onFocus?: ((e: import("react").FocusEvent<Element, Element>) => void) | undefined;
-    onBlur?: ((e: import("react").FocusEvent<Element, Element>) => void) | undefined;
-    onChange?: ((value: string) => void) | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLInputElement> | undefined;
-    onInput?: import("react").FormEventHandler<HTMLInputElement> | undefined;
-    onKeyDown?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
-    onKeyUp?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
-    onSelect?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
-    defaultValue?: string | undefined;
-    autoFocus?: boolean | undefined;
-    placeholder?: string | undefined;
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    autoComplete?: string | undefined;
-    maxLength?: number | undefined;
-    minLength?: number | undefined;
-    readOnly?: boolean | undefined;
-    required?: boolean | undefined;
-    description?: ReactNode;
-    onFocusChange?: ((isFocused: boolean) => void) | undefined;
-    excludeFromTabOrder?: boolean | undefined;
-    validationState?: import("@react-types/shared").ValidationState | undefined;
-    errorMessage?: ReactNode;
-} & import("components/Input/InputBase").InputBaseProps & {
-    rows?: number | undefined;
-} & import("react").RefAttributes<HTMLTextAreaElement>>;
-export declare const NumberFormControl: import("react").ForwardRefExoticComponent<{
-    tooltipContent?: string | undefined;
-    tooltipIcon?: ReactNode;
-} & AriaFieldProps & {
-    children?: ReactNode;
-} & Omit<import("../../helpers/typeHelpers").RenameBooleanProps<import("@react-types/numberfield").AriaNumberFieldProps>, "minValue" | "maxValue"> & {
-    min?: number | undefined;
-    max?: number | undefined;
-} & import("components/Input/InputBase").InputBaseProps & {
-    name?: string | undefined;
-} & {
-    showStepper?: boolean | undefined;
-} & {
-    locale?: string | undefined;
-} & import("react").RefAttributes<HTMLInputElement>>;
+type TextAreaFormControlProps = FormControlProps & ComponentPropsWithoutStyles<'textarea'> & TextAreaInputProps;
+export declare const TextAreaFormControl: import("react").ForwardRefExoticComponent<Omit<TextAreaFormControlProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+type NumberFormControlProps = FormControlProps & NumberInputProps;
+export declare const NumberFormControl: import("react").ForwardRefExoticComponent<Omit<NumberFormControlProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/types/components/Input/NumberInput/NumberInput.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { type AriaNumberFieldProps } from '@react-aria/numberfield';
 import { type NumberFieldStateOptions } from '@react-stately/numberfield';
+import type { ReactNode } from 'react';
 import type { ComponentPropsWithoutStyles, RenameBooleanProps, RenameMissuffixedProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps } from '../InputBase';
 type ReactAriaNumberInputProps = RenameMissuffixedProps<RenameBooleanProps<AriaNumberFieldProps>, 'Value', 'minValue' | 'maxValue'>;
@@ -10,6 +10,8 @@ type ShowStepper = {
 type StandardInputProps = Pick<ComponentPropsWithoutStyles<'input'>, 'name'>;
 export type NumberInputProps = ReactAriaNumberInputProps & InputBaseProps & StandardInputProps & ShowStepper & {
     locale?: NumberFieldStateOptions['locale'];
+    errorMessage?: ReactNode;
+    required?: boolean;
 };
 /**
  * Use cases
@@ -37,5 +39,7 @@ export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit
     max?: number | undefined;
 } & InputBaseProps & StandardInputProps & ShowStepper & {
     locale?: string | undefined;
+    errorMessage?: ReactNode;
+    required?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/types/components/Input/TextArea/TextArea.d.ts

@@ -1,12 +1,16 @@
-/// <reference types="react" />
+import { type ReactNode } from 'react';
 import { type AriaTextFieldOptions } from '@react-aria/textfield';
 import type { RenameBooleanProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps } from '../InputBase';
 type ReactAriaInputProps = Omit<RenameBooleanProps<AriaTextFieldOptions<'textarea'>>, 'inputElementType'>;
 export type TextAreaInputProps = ReactAriaInputProps & InputBaseProps & {
     rows?: number;
+    errorMessage?: ReactNode;
+    validationState?: 'valid' | 'invalid' | 'invalid-disabled';
 };
 export declare const TextAreaInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & {
     rows?: number | undefined;
+    errorMessage?: ReactNode;
+    validationState?: "invalid" | "valid" | "invalid-disabled" | undefined;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/types/components/Input/TextInput/TextInput.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { type AriaTextFieldOptions } from '@react-aria/textfield';
+import { type ReactNode } from 'react';
 import type { RenameBooleanProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps, type InputRadius } from '../InputBase';
 type ReactAriaInputProps = Omit<RenameBooleanProps<AriaTextFieldOptions<'input'>>, 'inputElementType'>;
@@ -13,6 +13,14 @@ interface CustomTextInputProps {
     connectRight?: React.ReactNode | null;
     className?: string;
 }
-export type TextInputProps = ReactAriaInputProps & InputBaseProps & CustomTextInputProps;
-export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & CustomTextInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export type TextInputProps = ReactAriaInputProps & InputBaseProps & CustomTextInputProps & {
+    validationState?: 'valid' | 'invalid' | 'invalid-disabled';
+    errorMessage?: ReactNode;
+    required?: boolean;
+};
+export declare const TextInput: import("react").ForwardRefExoticComponent<ReactAriaInputProps & InputBaseProps & CustomTextInputProps & {
+    validationState?: "invalid" | "valid" | "invalid-disabled" | undefined;
+    errorMessage?: ReactNode;
+    required?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/types/components/ListBox/ListBox.d.ts

@@ -34,5 +34,7 @@ interface ListBoxPopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
     state: OverlayTriggerState;
     popoverRef?: React.RefObject<HTMLDivElement>;
 }
-export declare function ListBoxPopover(props: ListBoxPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListBoxPopover(props: Omit<ListBoxPopoverProps, 'triggerRef'> & {
+    targetRef: React.RefObject<HTMLElement>;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/types/components/MultiSelect/useMultiSelectState.d.ts

@@ -1,8 +1,8 @@
-import type { MenuTriggerState } from "@react-stately/menu";
-import type { OverlayTriggerProps } from "@react-types/overlays";
-import type { AsyncLoadable, CollectionBase, FocusableProps, InputBase, LabelableProps, MultipleSelection, TextInputBase, Validation } from "@react-types/shared";
-import type { MultiSelectListState } from "./useMultiSelectListState";
-export interface MultiSelectProps<T> extends CollectionBase<T>, AsyncLoadable, Omit<InputBase, "isReadOnly">, Validation, LabelableProps, TextInputBase, MultipleSelection, FocusableProps, OverlayTriggerProps {
+import type { MenuTriggerState } from '@react-stately/menu';
+import type { OverlayTriggerProps } from '@react-types/overlays';
+import type { AsyncLoadable, CollectionBase, FocusableProps, InputBase, LabelableProps, MultipleSelection, TextInputBase, Validation } from '@react-types/shared';
+import type { MultiSelectListState } from './useMultiSelectListState';
+export interface MultiSelectProps<T> extends CollectionBase<T>, AsyncLoadable, Omit<InputBase, 'isReadOnly'>, Validation<T>, LabelableProps, TextInputBase, MultipleSelection, FocusableProps, OverlayTriggerProps {
     /**
      * Whether the menu should automatically flip direction when space is limited.
      * @default true
@@ -15,4 +15,4 @@ export interface MultiSelectState<T> extends MultiSelectListState<T>, MenuTrigge
     /** Sets whether the select is focused. */
     setFocused(isFocused: boolean): void;
 }
-export declare function useMultiSelectState<T extends {}>(props: MultiSelectProps<T>): MultiSelectState<T>;
+export declare function useMultiSelectState<T extends object>(props: MultiSelectProps<T>): MultiSelectState<T>;

package/types/components/Search/Search.d.ts

@@ -7,6 +7,6 @@ export declare const Search: import("react").ForwardRefExoticComponent<{
     height?: string | undefined;
 } & Omit<AriaSearchFieldProps, "isDisabled" | "isRequired" | "isReadOnly"> & {
     disabled?: boolean | undefined;
-    required?: boolean | undefined;
+    required?: unknown;
     readOnly?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/types/components/SingleSelect/SingleSelect.d.ts

@@ -6,6 +6,11 @@ type SingleSelectProps<T> = AriaSelectProps<T> & {
     tooltipContent?: string;
     showCaret?: boolean;
 };
+type PlaceholderProps = {
+    lineHeight?: number | string;
+    fontSize?: number | string;
+};
+export declare const Placeholder: import("styled-components").StyledComponent<"span", any, PlaceholderProps, never>;
 export declare function SingleSelect<T extends object>(props: SingleSelectProps<T> & {
     hideLabel?: boolean | undefined;
     errorMessage?: string;