@theroutingcompany/components 0.0.90 → 0.0.91-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.90",
+  "version": "0.0.91-alpha.0",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -95,7 +95,7 @@
     "@react-stately/overlays": "^3.5.2",
     "@react-stately/radio": "^3.8.1",
     "@react-stately/searchfield": "^3.4.2",
-    "@react-stately/select": "^3.5.1",
+    "@react-stately/select": "^3.6.4",
     "@react-stately/selection": "^3.13.1",
     "@react-stately/toggle": "^3.7.2",
     "@react-stately/tree": "^3.7.6",

package/types/components/BoxPopover/BoxPopover.d.ts

@@ -0,0 +1,15 @@
+import type { AriaPopoverProps } from '@react-aria/overlays';
+import type { OverlayTriggerState } from '@react-stately/overlays';
+import * as React from 'react';
+interface BoxPopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
+    children: React.ReactNode;
+    state: OverlayTriggerState;
+    popoverRef?: React.RefObject<HTMLDivElement>;
+    isTargetWidth?: boolean;
+    width?: string;
+}
+export declare function BoxPopover(props: Omit<BoxPopoverProps, 'triggerRef'> & {
+    targetRef: React.RefObject<HTMLElement>;
+    disableFocusManagement?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,9 +1,9 @@
 import { type DateValue } from '@internationalized/date';
 import type { CalendarProps } from '@react-aria/calendar';
-export declare const Calendar: {
-    ({ timeZone, value, focusedValue, onChange, defaultValue, defaultFocusedValue, ...props }: CalendarProps<DateValue> & {
-        timeZone: string;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps<DateValue> & {
+    timeZone: string;
+    onPrev?: (() => void) | undefined;
+    onNext?: (() => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Calendar;

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

@@ -3,4 +3,3 @@ export * from './CalendarGrid';
 export * from './CalendarHeader';
 export * from './RangeCalendar';
 export * from './Calendar';
-export * from './TimeDateSelect';

package/types/components/Form/Form.d.ts

@@ -0,0 +1,2 @@
+declare const FormInputExample: () => import("react/jsx-runtime").JSX.Element;
+export default FormInputExample;

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

@@ -60,11 +60,15 @@ export declare const TextAreaFormControl: import("react").ForwardRefExoticCompon
     maxLength?: number | undefined;
     minLength?: number | undefined;
     readOnly?: boolean | undefined;
-    required?: unknown;
+    required?: boolean | undefined;
     description?: ReactNode;
     onFocusChange?: ((isFocused: boolean) => void) | undefined;
     excludeFromTabOrder?: boolean | undefined;
+    validationState?: import("@react-types/shared").ValidationState | undefined;
+    isInvalid?: boolean | undefined;
     errorMessage?: ReactNode | ((v: import("@react-types/shared").ValidationResult) => ReactNode);
+    validationBehavior?: "aria" | "native" | undefined;
+    validate?: ((value: unknown) => true | import("@react-types/shared").ValidationError | null | undefined) | undefined;
 } & import("components/Input/InputBase").InputBaseProps & {
     rows?: number | undefined;
     errorMessage?: ReactNode;

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

@@ -1,18 +1,18 @@
-import { type CalendarDateTime } from '@internationalized/date';
-import type { AriaDateFieldOptions } from '@react-aria/datepicker';
-import type { DateFieldStateOptions } from '@react-stately/datepicker';
-export declare const DateField: import("styled-components").StyledComponent<"div", any, {
-    paddingSize: string;
-    invalid?: boolean | undefined;
-}, never>;
-export type DateInputProps = {
+import { CalendarDateTime } from '@internationalized/date';
+export declare const getPreviousMonth: (val?: CalendarDateTime) => CalendarDateTime | undefined;
+export declare const getNextMonth: (val?: CalendarDateTime) => CalendarDateTime | undefined;
+interface DateInputProps {
+    timeZone?: string;
     value?: CalendarDateTime;
-    defaultValue?: CalendarDateTime;
     onChange?: (value: CalendarDateTime) => void;
+    defaultValue?: CalendarDateTime;
     label?: string;
+    labelId?: string;
+    inputId?: string;
+    tooltipIcon?: string;
     tooltipContent?: string;
-    granularity?: 'day' | 'hour' | 'minute';
-    paddingSize?: string;
-    timeZone: string;
-} & AriaDateFieldOptions<CalendarDateTime> & Omit<DateFieldStateOptions<CalendarDateTime>, 'locale' | 'createCalendar'>;
-export declare function DateInput({ granularity, paddingSize, timeZone, value, defaultValue, onChange, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+    boldLabel?: boolean;
+    hideLabel?: boolean;
+}
+export declare function DateInput({ label, labelId, inputId, timeZone, hideLabel, boldLabel, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,15 +1,19 @@
-/// <reference types="react" />
-import { type TODOFIXME } from 'helpers';
 export { Time } from '@internationalized/date';
 export declare const TimeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TimeField: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface TimeInputProps {
     label?: string;
-    defaultValue?: TODOFIXME;
-    value?: TODOFIXME;
-    onChange?: TODOFIXME;
-    hourCycle?: 12 | 24;
+    labelId?: string;
+    inputId?: string;
+    tooltipIcon?: string;
+    tooltipContent?: string;
+    boldLabel?: boolean;
+    hideLabel?: boolean;
+    defaultValue?: string;
+    value?: string;
+    onChange?: () => void;
+    hourCycle?: '12' | '24';
+    interval?: number;
     errorMessage?: string;
-    wrapper?: React.ComponentType<TODOFIXME>;
 }
-export declare function TimeInput({ ...props }: TimeInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimeInput({ label, labelId, inputId, hideLabel, boldLabel, interval, hourCycle, ...props }: TimeInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,7 @@
-import * as React from 'react';
 import type { AriaListBoxOptions } from '@react-aria/listbox';
-import type { AriaPopoverProps } from '@react-aria/overlays';
 import type { ListState } from '@react-stately/list';
-import type { OverlayTriggerState } from '@react-stately/overlays';
 import type { MultiSelectState } from 'components/MultiSelect/useMultiSelectState';
+import * as React from 'react';
 interface ListBoxProps extends AriaListBoxOptions<unknown> {
     listBoxRef?: React.RefObject<HTMLUListElement>;
     state: ListState<unknown>;
@@ -29,14 +27,4 @@ export declare function OptionLabel({ children }: {
 export declare function OptionDescription({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-interface ListBoxPopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
-    children: React.ReactNode;
-    state: OverlayTriggerState;
-    popoverRef?: React.RefObject<HTMLDivElement>;
-    isTargetWidth?: boolean;
-    width?: string;
-}
-export declare function ListBoxPopover(props: Omit<ListBoxPopoverProps, 'triggerRef'> & {
-    targetRef: React.RefObject<HTMLElement>;
-}): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import type { CollectionChildren } from '@react-types/shared';
 import React from 'react';
 import { useMultiSelectState } from './useMultiSelectState';
-export { Item as MultiSelectItem, Section as MultiSelectSection, } from '@react-stately/collections';
+export { Item as MultiSelectItem, Section as MultiSelectSection } from '@react-stately/collections';
 export type OptionItem = {
     children?: never;
     id: string;
@@ -29,7 +29,7 @@ type MultiSelectProps = {
     /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
     disabledKeys?: Parameters<typeof useMultiSelectState>['0']['disabledKeys'];
     excludeFromTabOrder?: boolean;
-    items: Option[];
+    items?: Option[];
     /** Whether the field can be emptied. */
     isClearable?: boolean;
     /** Whether the field is disabled. */
@@ -42,6 +42,7 @@ type MultiSelectProps = {
     isOpen?: boolean;
     /** The content to display as the label. */
     label?: string;
+    boldLabel?: boolean;
     /** The content to display as the placeholder. */
     placeholder?: string;
     /** Handler that is called when the select's open state changes. */
@@ -57,8 +58,15 @@ type MultiSelectProps = {
     isInvalid?: boolean;
     errorMessage?: string;
 };
-export declare const MultiSelectComponent: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & {
-    /** Item objects in the collection. */
-    options: Option[];
-} & React.RefAttributes<HTMLButtonElement>>;
+export declare const MultiSelectComponent: {
+    (props: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type MultiSelectContainerProps = Omit<MultiSelectProps, 'children'> & {
+    items?: OptionItem[];
+    children?: CollectionChildren<Option>;
+};
+export declare const MultiSelect: {
+    ({ items, ...props }: MultiSelectContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -1,12 +1,14 @@
 /// <reference types="react" />
 import { type AriaSearchFieldProps } from '@react-aria/searchfield';
 export declare const Search: import("react").ForwardRefExoticComponent<{
+    boldLabel?: boolean | undefined;
     size: 'small' | 'large';
     leadingIcon?: boolean | undefined;
     hideLabel?: boolean | undefined;
+    hideIcon?: boolean | undefined;
     height?: string | undefined;
 } & Omit<AriaSearchFieldProps, "isDisabled" | "isRequired" | "isReadOnly"> & {
     disabled?: boolean | undefined;
-    required?: unknown;
+    required?: boolean | undefined;
     readOnly?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,5 +1,7 @@
 import type { AriaSelectProps } from '@react-types/select';
-export { Item as SingleSelectItem, Section as SingleSelectSection, } from '@react-stately/collections';
+import type { CollectionChildren } from '@react-types/shared';
+import * as React from 'react';
+export { Item as SingleSelectItem, Section as SingleSelectSection } from '@react-stately/collections';
 type SingleSelectProps<T> = AriaSelectProps<T> & {
     placeholder?: string;
     tooltipIcon?: string;
@@ -11,8 +13,29 @@ type PlaceholderProps = {
     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;
-    isInvalid: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+export declare const TriggerButton: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
+    'data-id'?: string | undefined;
+    children?: React.ReactNode;
+    tabIndex?: number | undefined;
+    cursor?: string | undefined;
+} & import("..").BoxProps & React.RefAttributes<HTMLDivElement>>, any, {
+    as: string;
+} & TriggerButtonProps, "as">;
+export interface TriggerButtonProps {
+    isOpen?: boolean;
+}
+type SingleSelectItemProps = {
+    key: string;
+    name: string;
+};
+declare const SingleSelect: {
+    <T extends object>(props: Omit<SingleSelectProps<T>, "children"> & {
+        boldLabel?: boolean | undefined;
+        hideLabel?: boolean | undefined;
+        errorMessage?: string | undefined;
+        isInvalid?: boolean | undefined;
+        children?: ((item: CollectionChildren<SingleSelectItemProps>) => React.ReactElement) | undefined;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SingleSelect };

package/types/hooks/index.d.ts

@@ -1 +1,3 @@
 export * from './useWindowEvent';
+export * from './useOutsideClick';
+export * from './usePrevious';

package/types/hooks/useOutsideClick.d.ts

@@ -0,0 +1 @@
+export declare const useOutsideClick: (ref: React.RefObject<HTMLElement>, onOutsideClick: () => void) => void;

package/types/hooks/usePrevious.d.ts

@@ -0,0 +1,2 @@
+declare function usePrevious<T>(value: any): T | undefined;
+export default usePrevious;

package/types/index.d.ts

@@ -1,2 +1,8 @@
+import { type Node } from "@react-types/shared";
 export * from './components';
 export * from './helpers';
+declare module '@react-stately/select' {
+    interface SingleSelectListState<T> {
+        selectedItem: Node<T> | null;
+    }
+}

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

@@ -1,31 +0,0 @@
-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;
-    year: number;
-    hour: DatePart;
-    minute: DatePart;
-    second: DatePart;
-    millisecond: DatePart;
-    timeZone: string;
-}
-export interface TimeDateSelectProps {
-    dateString?: string;
-    defaultDateString?: string;
-    timeZone: string;
-    onChange?: (date: TimeDateSelectOutput) => void;
-}
-type DatePart = number | undefined;
-/**
- * @deprecated Please use DateInput instead
- */
-export declare const TimeDateSelect: React.ForwardRefExoticComponent<TimeDateSelectProps & React.RefAttributes<HTMLDivElement>>;
-export interface TimeDateSelectItemProps extends SelectPrimitive.SelectItemProps {
-    children: ReactNode;
-}
-export declare const TimeDateSelectItem: React.ForwardRefExoticComponent<TimeDateSelectItemProps & React.RefAttributes<HTMLDivElement>>;
-export {};