@theroutingcompany/components 0.0.18-alpha.9 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.18-alpha.9",
+  "version": "0.0.19",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -91,7 +91,6 @@
     "@react-types/select": "3.7.0",
     "@tanstack/react-table": "^8.7.9",
     "@theroutingcompany/design-tokens": "^0.0.3",
-    "@types/react": "^18.0.0",
     "csstype": "^3.1.1"
   },
   "peerDependencies": {
@@ -119,6 +118,7 @@
     "@storybook/testing-library": "^0.0.14-next.0",
     "@types/eslint": "^8.21.1",
     "@types/prettier": "^2.7.2",
+    "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/react-is": "^17.0.3",
     "@types/styled-components": "^5.1.26",
@@ -130,6 +130,7 @@
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.11",
     "postcss-styled-syntax": "^0.3.3",
     "prettier": "^2.8.4",

package/types/components/AlertDialog/AlertDialog.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import type { ComponentPropsWithRef } from 'react';
-import { dialogWidths } from 'components/Dialog/Dialog';
+import { dialogWidths } from '../../components/Dialog/Dialog';
 type DialogWidth = keyof typeof dialogWidths;
 type StyledContentProps = {
     size?: DialogWidth;

package/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,18 +1,18 @@
 import { type ReactNode } from 'react';
 import { type AriaBreadcrumbItemProps, type AriaBreadcrumbsProps } from '@react-aria/breadcrumbs';
-import type { RenameMisprefixedProps } from 'helpers/typeHelpers';
+import type { RenameMisprefixedProps } from '../../helpers/typeHelpers';
 export declare const BreadcrumbListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const BreadcrumbLink: import("styled-components").StyledComponent<"a", any, {}, never>;
 export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<AriaBreadcrumbsProps & {
     children?: ReactNode;
 } & import("react").RefAttributes<HTMLOListElement>>;
 export type BreadcrumbItemProps<ExtraProps = unknown> = RenameMisprefixedProps<AriaBreadcrumbItemProps, 'is', 'isDisabled'> & {
-    LinkComponent: JSX.Element;
+    LinkComponent?: JSX.Element | "a";
     href?: string | undefined;
 } & ExtraProps;
 export declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<Omit<AriaBreadcrumbItemProps, "isDisabled"> & {
     disabled?: boolean | undefined;
 } & {
-    LinkComponent: JSX.Element;
+    LinkComponent?: "a" | JSX.Element | undefined;
     href?: string | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/types/components/Button/Button.d.ts

@@ -1,6 +1,6 @@
-import { type PropsWithChildren } from 'react';
+import { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
 import { type AriaButtonProps } from '@react-aria/button';
-import type { RenameMisprefixedProps } from 'helpers';
+import type { Prettify, RenameMisprefixedProps } from '../../helpers';
 type Variant = 'primary' | 'secondary' | 'danger' | 'inverse';
 type Size = 'small' | 'large';
 type ButtonDesignProps = {
@@ -20,8 +20,8 @@ export type ButtonBaseProps = {
     paddingSize: Size;
 };
 type ReactAriaProps = RenameMisprefixedProps<AriaButtonProps, 'is', 'isDisabled'>;
-export type ButtonProps = PropsWithChildren<ButtonDesignProps> & ReactAriaProps & {
+export type ButtonProps = Prettify<PropsWithChildren<ButtonDesignProps & ReactAriaProps & {
     onClick?: ReactAriaProps['onPress'];
-};
+} & Pick<ComponentPropsWithoutRef<'button'>, 'form'>>>;
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/types/components/Fieldset/Fieldset.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ComponentPropsWithoutStyles } from 'helpers/typeHelpers';
+import type { ComponentPropsWithoutStyles } from '../../helpers/typeHelpers';
 export declare const StyledFieldSet: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
 /** Adding disabled to `<fieldset>` will disable all inputs inside it HTML wise,
  *  the problem is that React won't know about that they the input components are disabled (prop-wise)

package/types/components/Flex/Flex.d.ts

@@ -1,6 +1,6 @@
-import { type SpacingToken } from 'helpers/tokenUtils';
-import type { Property } from 'csstype';
 import type { PropsWithChildren } from 'react';
+import type { Property } from 'csstype';
+import { type SpacingToken } from '../../helpers/tokenUtils';
 export type FlexProps = PropsWithChildren<{
     display?: 'flex' | "inline-flex";
     wrap?: Property.FlexWrap;
@@ -42,7 +42,7 @@ export declare const Flex: import("styled-components").StyledComponent<"div", an
     borderTopRightRadius?: Property.BorderTopRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
     borderBottomLeftRadius?: Property.BorderBottomLeftRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
     borderBottomRightRadius?: Property.BorderBottomRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
-    elevation?: import("helpers/tokenUtils").ElevationToken | undefined;
+    elevation?: import("../../helpers/tokenUtils").ElevationToken | undefined;
     flexShrink?: (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | undefined;
     flexGrow?: (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | undefined;
     flexBasis?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "content" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | undefined;

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

@@ -1,7 +1,7 @@
 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 { ComponentPropsWithoutStyles } from 'helpers/typeHelpers';
+import type { ComponentPropsWithoutStyles } from '../../helpers/typeHelpers';
 type FormControlProps<FieldProps = AriaFieldProps> = PropsWithChildren<{
     tooltipContent?: string;
     tooltipIcon?: ReactNode;
@@ -70,7 +70,7 @@ export declare const NumberFormControl: import("react").ForwardRefExoticComponen
     tooltipIcon?: ReactNode;
 } & AriaFieldProps & {
     children?: ReactNode;
-} & Omit<import("helpers/typeHelpers").RenameBooleanProps<import("@react-types/numberfield").AriaNumberFieldProps>, "minValue" | "maxValue"> & {
+} & Omit<import("../../helpers/typeHelpers").RenameBooleanProps<import("@react-types/numberfield").AriaNumberFieldProps>, "minValue" | "maxValue"> & {
     min?: number | undefined;
     max?: number | undefined;
 } & import("components/Input/InputBase").InputBaseProps & {

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { type AriaNumberFieldProps } from '@react-aria/numberfield';
 import { type NumberFieldStateOptions } from '@react-stately/numberfield';
-import type { ComponentPropsWithoutStyles, RenameBooleanProps, RenameMissuffixedProps } from 'helpers/typeHelpers';
+import type { ComponentPropsWithoutStyles, RenameBooleanProps, RenameMissuffixedProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps } from '../InputBase';
 type ReactAriaNumberInputProps = RenameMissuffixedProps<RenameBooleanProps<AriaNumberFieldProps>, 'Value', 'minValue' | 'maxValue'>;
 type ShowStepper = {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type AriaTextFieldOptions } from '@react-aria/textfield';
-import type { RenameBooleanProps } from 'helpers/typeHelpers';
+import type { RenameBooleanProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps } from '../InputBase';
 type ReactAriaInputProps = Omit<RenameBooleanProps<AriaTextFieldOptions<'textarea'>>, 'inputElementType'>;
 export type TextAreaInputProps = ReactAriaInputProps & InputBaseProps;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type AriaTextFieldOptions } from '@react-aria/textfield';
-import type { RenameBooleanProps } from 'helpers/typeHelpers';
+import type { RenameBooleanProps } from '../../../helpers/typeHelpers';
 import { type InputBaseProps } from '../InputBase';
 type ReactAriaInputProps = Omit<RenameBooleanProps<AriaTextFieldOptions<'input'>>, 'inputElementType'>;
 export type TextInputProps = ReactAriaInputProps & InputBaseProps;

package/types/components/Label/Label.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ComponentPropsWithoutStyles } from 'helpers/typeHelpers';
+import type { ComponentPropsWithoutStyles } from '../../helpers/typeHelpers';
 export interface LabelProps extends ComponentPropsWithoutStyles<'label'> {
     size?: 'small' | 'medium' | 'large';
     bold?: boolean;

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

@@ -25,9 +25,9 @@ type MultiSelectProps = {
     /** Sets the default open state of the field (uncontrolled). */
     defaultOpen?: boolean;
     /** The initial selected keys in the collection (uncontrolled). */
-    defaultSelectedKeys?: Parameters<typeof useMultiSelectState>[number]['defaultSelectedKeys'];
+    defaultSelectedKeys?: Parameters<typeof useMultiSelectState>['0']['defaultSelectedKeys'];
     /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
-    disabledKeys?: Parameters<typeof useMultiSelectState>[number]['disabledKeys'];
+    disabledKeys?: Parameters<typeof useMultiSelectState>['0']['disabledKeys'];
     excludeFromTabOrder?: boolean;
     items: Option[];
     /** Whether the field can be emptied. */

package/types/components/NavigationMenu/NavigationMenu.d.ts

@@ -43,8 +43,11 @@ interface ItemProps<T extends React.ElementType> {
     as?: T;
     children?: React.ReactNode;
 }
-export declare function Item<T extends React.ElementType = "div">({ as, ...props }: ItemProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ItemProps<T>>): JSX.Element;
-declare function Separator(): JSX.Element;
+export declare function Item<T extends React.ElementType = 'div'>({ as, ...props }: ItemProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ItemProps<T>>): JSX.Element;
+/**
+ * Separator
+ */
+export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const NavigationMenu: CompoundedComponent & {
     Trigger: ({ children }: TriggerProps) => JSX.Element;
     List: ({ children, portalIdOverride, }: {
@@ -52,7 +55,7 @@ declare const NavigationMenu: CompoundedComponent & {
         portalIdOverride?: string | undefined;
     }) => React.ReactPortal;
     Item: typeof Item;
-    Separator: typeof Separator;
+    Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
 };
 declare const NavigationMenuPortal: () => JSX.Element;
 export { NavigationMenu, NavigationMenuPortal };

package/types/components/Paginator/Paginator.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ButtonProps } from 'components';
+import { type ButtonProps } from '../../components';
 type PaginatorButtonProps = ButtonProps & {
     label: string;
     direction: 'left' | 'right';

package/types/components/ReactAriaButton/ReactAriaButton.d.ts

@@ -1,5 +1,5 @@
 import { type AriaButtonProps } from '@react-aria/button';
 import { type ComponentPropsWithoutRef } from 'react';
 export type ReactAriaButtonProps = AriaButtonProps & ComponentPropsWithoutRef<'button'>;
-/**  Fo internal use only! */
+/**  For internal use only! */
 export declare function ReactAriaButton(props: ReactAriaButtonProps): JSX.Element;

package/types/helpers/interactionStates.d.ts

@@ -2,5 +2,6 @@ type DataStates = {
     isFocusVisible: boolean;
     isPressed: boolean;
 };
+/** Utility for turning component state boolean into string for use in `data-state` attribute */
 export declare function getDataState({ isFocusVisible, isPressed }: DataStates): string;
 export {};