@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/Select/Select.tsx

@@ -17,9 +17,9 @@ import { Search, X, ChevronDown, Check } from "lucide-react";
 import { Button } from "../Button/Button";
 import { cn } from "../../utils/core/cn";
 import { SelectContext, useSelectContext } from "./context";
-import { useSelectEvents } from "./hooks/useSelectEvents";
-import { useSelectSearch } from "./hooks/useSelectSearch";
-import { useSelectState } from "./hooks/useSelectState";
+import { useSelectEvents } from "./useSelectEvents";
+import { useSelectSearch } from "./useSelectSearch";
+import { useSelectState } from "./useSelectState";
 import type {
   SelectContentProps,
   SelectContextValue,
@@ -29,7 +29,7 @@ import type {
   SelectValueProps,
   UseSelectStateProps,
 } from "./types";
-import { getTextContent } from "./utils/text";
+import { getTextContent } from "./text";
 
 // ============================================================================
 // ROOT COMPONENT
@@ -61,28 +61,34 @@ export const Select = React.forwardRef<HTMLFieldSetElement, SelectProps & UseSel
 
     // Use custom hooks for state management
     const { state, actions } = useSelectState(selectProps);
-    const { isSelecting } = useSelectEvents({ state, actions, selectRef });
+    const { isSelecting: _isSelecting } = useSelectEvents({ state, actions, selectRef });
 
     // Map to store item values and their text
     const itemsMapRef = React.useRef<Map<string, string>>(new Map());
     const currentValueRef = React.useRef(state.value);
+    const selectedTextRef = React.useRef(state.selectedText);
 
     // Update ref when value changes
     React.useEffect(() => {
       currentValueRef.current = state.value;
     }, [state.value]);
 
+    // Keep selectedTextRef in sync so we can avoid redundant setSelectedText calls
+    React.useEffect(() => {
+      selectedTextRef.current = state.selectedText;
+    }, [state.selectedText]);
+
     // Helper to update selectedText if needed
     const updateSelectedTextIfNeeded = React.useCallback((value: string) => {
       if (value && value === currentValueRef.current) {
         const registeredText = itemsMapRef.current.get(value);
-        if (registeredText) {
+        if (registeredText && registeredText !== selectedTextRef.current) {
           actions.setSelectedText(registeredText);
           return true;
         }
       }
       return false;
-    }, [actions.setSelectedText]);
+    }, [actions]);
 
     // Register/unregister functions
     const registerItem = React.useCallback((value: string, text: string) => {
@@ -99,7 +105,9 @@ export const Select = React.forwardRef<HTMLFieldSetElement, SelectProps & UseSel
     // Since SelectItems are always rendered (hidden when closed), we can always find them in the DOM
     const findAndSetSelectedText = React.useCallback(() => {
       if (!state.value) {
-        actions.setSelectedText('');
+        if (selectedTextRef.current !== '') {
+          actions.setSelectedText('');
+        }
         return;
       }
 
@@ -133,7 +141,9 @@ export const Select = React.forwardRef<HTMLFieldSetElement, SelectProps & UseSel
         textContent = textContent.split('\n').map(line => line.trim()).filter(line => line).join(' ');
 
         if (textContent) {
-          actions.setSelectedText(textContent);
+          if (selectedTextRef.current !== textContent) {
+            actions.setSelectedText(textContent);
+          }
           // Also register it for future use
           itemsMapRef.current.set(state.value, textContent);
           return;
@@ -144,11 +154,11 @@ export const Select = React.forwardRef<HTMLFieldSetElement, SelectProps & UseSel
       // Don't clear selectedText in this case - let the MutationObserver or retry effect handle it
       const hasContentContainer = selectElement.querySelector('[data-testid="select-content-hidden"]') ||
         selectElement.querySelector('[data-testid="select-content"]');
-      if (!hasContentContainer) {
+      if (!hasContentContainer && selectedTextRef.current !== '') {
         // No content container means no items exist - clear selectedText
         actions.setSelectedText('');
       }
-    }, [state.value, actions.setSelectedText, selectRef]);
+    }, [state.value, actions, selectRef]);
 
     // Try to find text immediately in layout effect
     React.useLayoutEffect(() => {
@@ -231,7 +241,7 @@ Select.displayName = "Select";
  * @returns The rendered select trigger
  */
 export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
-  ({ children, className, variant = "outline", size = "default", asChild = false, ...props }, ref) => {
+  ({ children, className, variant = "outline", size = "default", asChild = false, showChevron = true, ...props }, ref) => {
     const { open, disabled, value, actions, direction = 'down' } = useSelectContext();
     const opensUpward = direction === 'up';
 
@@ -283,10 +293,10 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
       "aria-haspopup": "listbox",
       disabled,
       className: cn(
-        "!justify-between relative w-full",
+        "grid grid-cols-[1fr_auto] items-center gap-2 relative w-full",
         "[&_svg]:pointer-events-none",
-        open && !opensUpward && "!rounded-b-none !border-b-0",
-        open && opensUpward && "!rounded-t-none !border-t-0",
+        open && !opensUpward && "rounded-b-none border-b-0",
+        open && opensUpward && "rounded-t-none border-t-0",
         className
       ),
       style: {
@@ -315,7 +325,7 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
 
     // Early return after all hooks have been called
     if (asChild) {
-      const childElement = children as React.ReactElement<{ children?: React.ReactNode;[key: string]: unknown }>;
+      const childElement = children as React.ReactElement<React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode }>;
       const childChildren = React.Children.toArray(childElement.props.children);
       const hasChevron = childChildren.some(child => {
         if (React.isValidElement(child)) {
@@ -328,26 +338,31 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
       });
 
       // Merge child's className with triggerProps className
-      const childClassName = (children as React.ReactElement<any>).props.className;
+      const childClassName = childElement.props.className;
       const mergedClassName = cn(
         triggerProps.className,
         childClassName
       );
 
-      return React.cloneElement(children as React.ReactElement<any>, {
+      // Preserve child's data-testid if it exists, otherwise use trigger's data-testid
+      const childDataTestId = (childElement.props as Record<string, unknown>)['data-testid'] as string | undefined;
+      const finalDataTestId = childDataTestId || (triggerProps as Record<string, unknown>)['data-testid'] as string | undefined;
+      
+      return React.cloneElement(childElement, {
         ...triggerProps,
+        ...(finalDataTestId && { 'data-testid': finalDataTestId }),
         className: mergedClassName,
-        children: hasChevron ? childChildren : [
+        children: (showChevron === true && !hasChevron) ? [
           ...childChildren,
           <ChevronDown
             key="chevron-down"
             className={cn(
-              "size-4 opacity-50 transition-transform pointer-events-none float-right",
+              "size-4 opacity-50 transition-transform pointer-events-none print:hidden",
               open && "rotate-180"
             )}
           />
-        ]
-      });
+        ] : childChildren
+      } as Partial<React.HTMLAttributes<HTMLElement>>) as React.ReactElement;
     }
 
     return (
@@ -361,10 +376,10 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
         variant={variant}
         size={size}
         className={cn(
-          "!justify-between relative w-full",
+          "grid grid-cols-[1fr_auto] items-center gap-2 relative w-full print:bg-transparent",
           "[&_svg]:pointer-events-none",
-          open && !opensUpward && "!rounded-b-none !border-b-0",
-          open && opensUpward && "!rounded-t-none !border-t-0",
+          open && !opensUpward && "rounded-b-none border-b-0",
+          open && opensUpward && "rounded-t-none border-t-0",
           className
         )}
         style={{
@@ -382,12 +397,14 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
         {...props}
       >
         {children}
-        <ChevronDown
-          className={cn(
-            "size-4 opacity-50 transition-transform pointer-events-none float-right",
-            open && "rotate-180"
-          )}
-        />
+        {showChevron === true && (
+          <ChevronDown
+            className={cn(
+              "size-4 opacity-50 transition-transform pointer-events-none print:hidden",
+              open && "rotate-180"
+            )}
+          />
+        )}
       </Button>
     );
   }
@@ -407,7 +424,7 @@ SelectTrigger.displayName = "SelectTrigger";
  * @returns The rendered select value display
  */
 export const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(
-  ({ placeholder = "Select an option...", children }, ref) => {
+  ({ placeholder = "Select an option...", children, className }, ref) => {
     const { selectedText } = useSelectContext();
 
     return (
@@ -415,7 +432,7 @@ export const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(
         ref={ref}
         data-testid="select-value"
         style={{ pointerEvents: 'none' }}
-        className="pointer-events-none"
+        className={cn("pointer-events-none min-w-0 overflow-hidden text-left", className)}
       >
         {children || (selectedText ? selectedText : placeholder)}
       </span>
@@ -456,7 +473,7 @@ export const SelectContent = React.forwardRef<HTMLUListElement, SelectContentPro
       if (open && searchable && searchInputRef.current) {
         searchInputRef.current.focus();
       }
-    }, [open, searchable]);
+    }, [open, searchable, searchInputRef]);
 
     // Always render children in DOM (hidden when closed) so Select can find item text via DOM query
     // This ensures SelectValue can display selected text even when dropdown is closed
@@ -480,8 +497,8 @@ export const SelectContent = React.forwardRef<HTMLUListElement, SelectContentPro
       <ul
         ref={ref}
         className={cn(
-          "absolute z-[99999] w-full overflow-y-auto border border-main-300 bg-main-50 shadow-lg",
-          "list-none p-0 m-0",
+          "absolute z-[99999] overflow-y-auto border border-main-300 bg-main-50 shadow-lg",
+          "list-none p-0 m-0 min-w-full",
           opensUpward
             ? "rounded-t-md border-b-0"
             : "rounded-b-md border-t-0",
@@ -490,7 +507,7 @@ export const SelectContent = React.forwardRef<HTMLUListElement, SelectContentPro
         style={{
           [opensUpward ? 'bottom' : 'top']: '100%',
           left: 0,
-          right: 0,
+          right: 'auto',
           maxHeight,
           position: 'absolute',
           zIndex: 99999,
@@ -622,7 +639,7 @@ export const SelectItem = React.forwardRef<HTMLLIElement, SelectItemProps>(
         ref={ref}
         data-value={value}
         className={cn(
-          "relative flex cursor-pointer select-none items-start rounded-sm px-2 py-1.5 text-sm outline-none",
+          "relative cursor-pointer select-none rounded-sm px-2 py-1.5 text-sm outline-none",
           "hover:bg-main-100 focus:bg-main-100",
           "break-words min-w-0",
           isSelected && "bg-main-100 text-main-900",
@@ -640,7 +657,7 @@ export const SelectItem = React.forwardRef<HTMLLIElement, SelectItemProps>(
       >
         {children}
         {isSelected && showCheckmark && (
-          <Check className="absolute right-2 size-4 flex-shrink-0 mt-0.5" />
+          <Check className="absolute top-1/2 -translate-y-1/2 right-2 size-4" />
         )}
       </li>
     );
@@ -689,7 +706,7 @@ export const SelectLabel = React.forwardRef<HTMLLIElement, { children: React.Rea
   ({ children, className }, ref) => {
     return (
       <li ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} data-testid="select-label">
-        {children}
+        <div>{children}</div>
       </li>
     );
   }

package/src/components/Select/context.test.tsx

@@ -0,0 +1,56 @@
+/**
+ * @file Unit Tests for Select Context
+ * @package @jmruthers/pace-core
+ * @module Components/Select
+ * @since 1.0.0
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import React from 'react';
+import { SelectContext, useSelectContext } from './context';
+import type { SelectContextValue } from './types';
+
+// Following testing standards: use timeout parameter to prevent hanging
+const TEST_TIMEOUT = 10000; // 10 seconds per test
+
+describe('[unit] Select Context', () => {
+  describe('useSelectContext', () => {
+    it('returns context value when used within provider', () => {
+      const contextValue: SelectContextValue = {
+        value: 'option1',
+        selectedText: 'Option 1',
+        open: false,
+        disabled: false,
+        actions: {
+          setValue: vi.fn(),
+          setOpen: vi.fn(),
+          setSelectedText: vi.fn(),
+        },
+      };
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <SelectContext.Provider value={contextValue}>
+          {children}
+        </SelectContext.Provider>
+      );
+
+      const { result } = renderHook(() => useSelectContext(), { wrapper });
+
+      expect(result.current).toBe(contextValue);
+      expect(result.current.value).toBe('option1');
+      expect(result.current.selectedText).toBe('Option 1');
+    }, TEST_TIMEOUT);
+
+    it('throws error when used outside provider', () => {
+      // Suppress console.error for this test
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      expect(() => {
+        renderHook(() => useSelectContext());
+      }).toThrow('Select components must be used within a Select');
+
+      consoleSpy.mockRestore();
+    }, TEST_TIMEOUT);
+  });
+});

package/src/components/Select/text.test.tsx

@@ -0,0 +1,104 @@
+/**
+ * @file Unit Tests for Text Utils
+ * @package @jmruthers/pace-core
+ * @module Components/Select
+ * @since 1.0.0
+ */
+
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { getTextContent } from './text';
+
+// Following testing standards: use timeout parameter to prevent hanging
+const TEST_TIMEOUT = 10000; // 10 seconds per test
+
+describe('[unit] Text Utils', () => {
+  describe('getTextContent', () => {
+    it('extracts text from string children', () => {
+      expect(getTextContent('Hello')).toBe('Hello');
+    }, TEST_TIMEOUT);
+
+    it('extracts text from number children', () => {
+      expect(getTextContent(123)).toBe('123');
+    }, TEST_TIMEOUT);
+
+    it('extracts text from simple React element', () => {
+      const element = <span>Hello World</span>;
+      expect(getTextContent(element)).toBe('Hello World');
+    }, TEST_TIMEOUT);
+
+    it('extracts text from nested React elements', () => {
+      const element = (
+        <div>
+          <span>Hello</span>
+          <span>World</span>
+        </div>
+      );
+      expect(getTextContent(element)).toBe('HelloWorld');
+    }, TEST_TIMEOUT);
+
+    it('extracts text from array of children', () => {
+      const children = ['Hello', ' ', 'World'];
+      expect(getTextContent(children)).toBe('Hello World');
+    }, TEST_TIMEOUT);
+
+    it('extracts text from array of React elements', () => {
+      const children = [
+        <span key="1">Hello</span>,
+        <span key="2">World</span>,
+      ];
+      expect(getTextContent(children)).toBe('HelloWorld');
+    }, TEST_TIMEOUT);
+
+    it('handles empty string', () => {
+      expect(getTextContent('')).toBe('');
+    }, TEST_TIMEOUT);
+
+    it('handles null children', () => {
+      expect(getTextContent(null)).toBe('');
+    }, TEST_TIMEOUT);
+
+    it('handles undefined children', () => {
+      expect(getTextContent(undefined)).toBe('');
+    }, TEST_TIMEOUT);
+
+    it('handles element with no children', () => {
+      const element = <div />;
+      expect(getTextContent(element)).toBe('');
+    }, TEST_TIMEOUT);
+
+    it('handles deeply nested elements', () => {
+      const element = (
+        <div>
+          <span>
+            <strong>Hello</strong>
+            <em>World</em>
+          </span>
+        </div>
+      );
+      expect(getTextContent(element)).toBe('HelloWorld');
+    }, TEST_TIMEOUT);
+
+    it('handles mixed content types', () => {
+      const element = (
+        <div>
+          <span>Hello</span>
+          {' '}
+          <span>World</span>
+          {123}
+        </div>
+      );
+      expect(getTextContent(element)).toBe('Hello World123');
+    }, TEST_TIMEOUT);
+
+    it('handles array with mixed types', () => {
+      const children = [
+        'Hello',
+        ' ',
+        <span key="world">World</span>,
+        123,
+      ];
+      expect(getTextContent(children)).toBe('Hello World123');
+    }, TEST_TIMEOUT);
+  });
+});

package/src/components/Select/text.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+/**
+ * Extracts text content from React children.
+ * Recursively extracts all text content from a React node tree.
+ *
+ * @param children - React children to extract text from
+ * @returns Extracted text content as a string
+ */
+export const getTextContent = (children: React.ReactNode): string => {
+  if (typeof children === "string") return children;
+  if (typeof children === "number") return children.toString();
+  if (React.isValidElement(children)) {
+    const props = children.props as {
+      children?: React.ReactNode;
+      [key: string]: unknown;
+    };
+    if (props.children) {
+      return getTextContent(props.children);
+    }
+  }
+  if (Array.isArray(children)) {
+    return children.map(getTextContent).join("");
+  }
+  return "";
+};

package/src/components/Select/types.ts

@@ -91,6 +91,8 @@ export interface SelectTriggerProps
   extends Omit<ButtonProps, "onClick" | "onKeyDown"> {
   children: React.ReactNode;
   asChild?: boolean;
+  /** Whether to show the chevron icon. Defaults to true. */
+  showChevron?: boolean;
 }
 
 /**
@@ -99,6 +101,7 @@ export interface SelectTriggerProps
 export interface SelectValueProps {
   placeholder?: string;
   children?: React.ReactNode;
+  className?: string;
 }
 
 /**