@theroutingcompany/components 0.0.143 → 0.0.144-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.143",
+  "version": "0.0.144-alpha.0",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -43,7 +43,11 @@
     "build": "npm run clean && npm run build:components && npm run build:types",
     "test": "vitest --run",
     "test:ui": "vitest --ui",
-    "test:coverage": "vitest --coverage"
+    "test:coverage": "vitest --coverage",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run --component",
+    "test:component": "cypress run --component",
+    "test:component:open": "cypress open --component"
   },
   "sideEffects": false,
   "license": "UNLICENSED",
@@ -135,10 +139,6 @@
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-typescript": "^11.1.0",
     "@storybook/addon-a11y": "^7.0.3",
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.11",
     "@storybook/addon-actions": "^7.0.3",
     "@storybook/addon-essentials": "^7.0.3",
     "@storybook/addon-interactions": "^7.0.3",
@@ -146,8 +146,12 @@
     "@storybook/react": "^7.0.3",
     "@storybook/react-vite": "^7.0.3",
     "@storybook/testing-library": "^0.1.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
     "@types/eslint": "^8.37.0",
     "@types/google.maps": "^3.55.11",
+    "@types/jest": "^29.5.11",
     "@types/prettier": "^2.7.2",
     "@types/react": "^18.0.34",
     "@types/react-dom": "^18.0.11",
@@ -156,7 +160,9 @@
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
     "@vitejs/plugin-react": "^3.1.0",
+    "@vitest/ui": "^1.1.0",
     "chromatic": "^6.17.3",
+    "cypress": "^13.17.0",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
@@ -164,12 +170,14 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "^0.6.11",
+    "jsdom": "^23.0.1",
     "postcss-styled-syntax": "^0.3.3",
     "prettier": "^2.8.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rimraf": "^5.0.0",
+    "start-server-and-test": "^2.1.3",
     "storybook": "^7.0.3",
     "styled-components": "^5.3.11",
     "stylelint": "^15.2.0",
@@ -179,8 +187,6 @@
     "typescript": "^5.0.4",
     "vite": "^4.2.1",
     "vite-tsconfig-paths": "^4.1.0",
-    "vitest": "^1.1.0",
-    "@vitest/ui": "^1.1.0",
-    "jsdom": "^23.0.1"
+    "vitest": "^1.1.0"
   }
 }

package/types/components/ActionMenu/ActionMenu.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+interface ActionMenuProps {
+    children: ReactNode;
+    closeOnOutsideClick?: boolean;
+    triggerMoveBehavior?: 'follow' | 'close';
+    size?: 'small' | 'medium';
+    align?: 'left' | 'right';
+    autoAdjustAlign?: boolean;
+}
+export declare const ActionMenu: import("react").ForwardRefExoticComponent<ActionMenuProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ActionMenuTriggerProps {
+    children: ReactNode;
+    'aria-label'?: string;
+}
+export declare const ActionMenuTrigger: import("react").ForwardRefExoticComponent<ActionMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface ActionMenuContentProps {
+    children: ReactNode;
+}
+export declare const ActionMenuContent: import("react").ForwardRefExoticComponent<ActionMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ActionMenuItemProps {
+    children: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    icon?: ReactNode;
+    title?: string;
+    'aria-label'?: string;
+    hidden?: boolean;
+}
+export declare const ActionMenuItem: import("react").ForwardRefExoticComponent<ActionMenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1 @@
+export { ActionMenu, ActionMenuContent, ActionMenuItem, ActionMenuTrigger, } from './ActionMenu';

package/types/components/Drawer/Drawer.d.ts

@@ -20,6 +20,33 @@ export type DrawerProps = {
     width?: string;
     maxWidth?: string;
     dialogTitle?: string;
+    instanceId?: string;
+    stackGroupId?: string;
+    stackPosition?: number;
+    isFocused?: boolean;
+    onBringToFront?: () => void;
+    zIndexBase?: number;
+    onFocusNext?: () => void;
+    onFocusPrevious?: () => void;
+    enableKeyboardShortcuts?: boolean;
+    resizable?: boolean;
+    size?: {
+        width: number;
+        height: number;
+    };
+    onSizeChange?: (nextSize: {
+        width: number;
+        height: number;
+    }) => void;
+    movable?: boolean;
+    moveOffset?: {
+        x: number;
+        y: number;
+    };
+    onMoveOffsetChange?: (nextOffset: {
+        x: number;
+        y: number;
+    }) => void;
 };
 declare const Drawer: ForwardRefExoticComponent<DrawerProps> & {
     Close: typeof Close;
@@ -38,16 +65,12 @@ export type UseDrawerState = {
     toggleDrawer: () => void;
     openDrawer: () => void;
     closeDrawer: () => void;
-    getActivatorProps: (additionalProps?: {
-        [k: string]: unknown;
-    }) => {
+    getActivatorProps: (additionalProps?: Record<string, unknown>) => {
         'aria-controls': UseDrawerProps['id'];
         onClick: () => void;
         [key: string]: unknown;
     };
-    getDrawerProps: (props?: {
-        [k: string]: unknown;
-    }) => {
+    getDrawerProps: (props?: Record<string, unknown>) => {
         id: UseDrawerProps['id'];
         onClose: () => void;
         open: boolean;

package/types/components/Drawer/context.d.ts

@@ -2,6 +2,10 @@ import React from 'react';
 type DrawerContextProps = {
     onClose: () => void;
     loading?: boolean;
+    instanceId?: string;
+    stackPosition?: number;
+    isFocused?: boolean;
+    onBringToFront?: () => void;
 };
 export declare const DrawerContext: React.Context<DrawerContextProps>;
 export {};

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

@@ -1,2 +1,5 @@
 export { default as Drawer } from './Drawer';
 export * from './Drawer';
+export * from './useMultiDrawer';
+export * from './useDrawerFocusControl';
+export * from './useDrawerStack';

package/types/components/Drawer/styles.d.ts

@@ -3,6 +3,7 @@ interface ContainerProps extends BoxProps {
     $state?: string;
     $viewportPosition?: string;
     name?: string;
+    $isFocused?: boolean;
 }
 export declare const Container: import("styled-components").StyledComponent<import("../..").ForwardRefComponent<"div", BoxProps>, any, ContainerProps, never>;
 export {};

package/types/components/Drawer/useDrawerFocusControl.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+export type FocusControlOptions = {
+    /**
+     * Callback for cycling to next drawer (Cmd/Ctrl + Tab)
+     */
+    onFocusNext?: () => void;
+    /**
+     * Callback for cycling to previous drawer (Cmd/Ctrl + Shift + Tab)
+     */
+    onFocusPrevious?: () => void;
+    /**
+     * Callback for closing focused drawer (Escape)
+     */
+    onCloseFocused?: () => void;
+    /**
+     * Whether this drawer is currently focused
+     */
+    isFocused: boolean;
+    /**
+     * Whether this drawer is open
+     */
+    isOpen: boolean;
+    /**
+     * Whether to enable keyboard shortcuts
+     * @default true
+     */
+    enableKeyboardShortcuts?: boolean;
+    /**
+     * Optional label for debug logging.
+     */
+    debugLabel?: string;
+};
+/**
+ * Hook for managing focus control in multi-drawer scenarios
+ *
+ * Handles:
+ * - Keyboard shortcuts (Cmd+Tab, Escape)
+ * - Focus trap within drawer
+ * - Focus restoration on close
+ *
+ * @example
+ * ```tsx
+ * const drawerRef = useDrawerFocusControl({
+ *   isFocused: true,
+ *   isOpen: true,
+ *   onFocusNext: focusNextDrawer,
+ *   onFocusPrevious: focusPreviousDrawer,
+ *   onCloseFocused: closeDrawer,
+ * });
+ *
+ * <div ref={drawerRef}>
+ *   {/ * drawer content * /}
+ * </div>
+ * ```
+ */
+export declare function useDrawerFocusControl({ onFocusNext, onFocusPrevious, onCloseFocused, isFocused, isOpen, enableKeyboardShortcuts, debugLabel, }: FocusControlOptions): {
+    drawerRef: import("react").RefObject<HTMLDivElement>;
+    handleTabKey: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    getFocusableElements: () => HTMLElement[];
+};

package/types/components/Drawer/useDrawerStack.d.ts

@@ -0,0 +1,5 @@
+export declare function useDrawerStackItem(id: string, isOpen: boolean, groupId?: string): {
+    stackPosition: number;
+    isFocused: boolean;
+    bringToFront: () => void;
+};

package/types/components/Drawer/useMultiDrawer.d.ts

@@ -0,0 +1,99 @@
+export type DrawerInstance = {
+    id: string;
+    isOpen: boolean;
+    stackPosition: number;
+    size: {
+        width: number;
+        height: number;
+    };
+    moveOffset: {
+        x: number;
+        y: number;
+    };
+    data?: Record<string, unknown>;
+};
+export type UseMultiDrawerProps = {
+    /**
+     * Maximum number of drawers that can be open simultaneously
+     * @default undefined (no limit)
+     */
+    maxDrawers?: number;
+    /**
+     * Base ID for drawer instances
+     * @default 'multi-drawer'
+     */
+    baseId?: string;
+    /**
+     * Callback when drawers change
+     */
+    onChange?: (instances: DrawerInstance[]) => void;
+};
+export type UseMultiDrawerState = {
+    /** Array of all drawer instances */
+    instances: DrawerInstance[];
+    /** ID of the currently focused drawer */
+    focusedInstanceId: string | null;
+    /** Open a new drawer instance */
+    openDrawer: (data?: Record<string, unknown>) => string;
+    /** Close a specific drawer instance */
+    closeDrawer: (instanceId: string) => void;
+    /** Close all drawers */
+    closeAllDrawers: () => void;
+    /** Bring a drawer to the front (focus it) */
+    bringToFront: (instanceId: string) => void;
+    /** Focus the next drawer in the stack */
+    focusNextDrawer: () => void;
+    /** Focus the previous drawer in the stack */
+    focusPreviousDrawer: () => void;
+    /** Check if a drawer instance is open */
+    isDrawerOpen: (instanceId: string) => boolean;
+    /** Check if a drawer instance is focused */
+    isDrawerFocused: (instanceId: string) => boolean;
+    /** Get drawer props for a specific instance */
+    getDrawerProps: (instanceId: string, additionalProps?: Record<string, unknown>) => {
+        id: string;
+        instanceId: string;
+        open: boolean;
+        onClose: () => void;
+        stackPosition: number;
+        isFocused: boolean;
+        onBringToFront: () => void;
+        [key: string]: unknown;
+    };
+};
+/**
+ * Hook for managing multiple drawer instances
+ *
+ * This hook allows multiple drawers to be open simultaneously, with proper
+ * stack management, focus control, and keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   instances,
+ *   focusedInstanceId,
+ *   openDrawer,
+ *   closeDrawer,
+ *   getDrawerProps
+ * } = useMultiDrawer({ baseId: 'trip-drawer' });
+ *
+ * // Open a new drawer with Cmd/Ctrl + Click
+ * const handleClick = (event: React.MouseEvent, tripId: string) => {
+ *   if (event.metaKey || event.ctrlKey) {
+ *     openDrawer({ tripId });
+ *   } else {
+ *     // Close existing and open new (single drawer mode)
+ *     closeAllDrawers();
+ *     openDrawer({ tripId });
+ *   }
+ * };
+ *
+ * // Render drawers
+ * {instances.map(instance => (
+ *   <Drawer key={instance.id} {...getDrawerProps(instance.id)}>
+ *     <TripContent tripId={instance.data?.tripId} />
+ *   </Drawer>
+ * ))}
+ * ```
+ */
+export declare function useMultiDrawer({ maxDrawers, baseId, onChange, }?: UseMultiDrawerProps): UseMultiDrawerState;

package/types/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './AccessibleIcon/AccessibleIcon';
 export * from './Accordion';
+export * from './ActionMenu';
 export * from './AlertDialog/AlertDialog';
 export * from './Badge/Badge';
 export * from './Banner/Banner';