@cdx-ui/utils 0.0.1-beta.7 → 0.0.1-beta.70

package/src/form-control/useFormControl.tsx

@@ -1,9 +1,22 @@
 import React from 'react';
-import { Platform, type TextInput } from 'react-native';
+import { Platform } from 'react-native';
 import { ariaAttr } from '../common/accessibilityUtils';
 
 type HTMLProps = Record<string, unknown>;
 
+/**
+ * Minimal contract for any control registered on `FormControlContextValue.inputRef`.
+ *
+ * `Field.Label` / `focusInput()` only need to call `.focus()` on the registered node;
+ * narrower control-specific shapes (`TextInput`, `HTMLInputElement`, custom focus
+ * bridges like `Select.Trigger`'s) all satisfy this contract. Consumers that need
+ * more (e.g. reading `.value`) should cast locally — keeping the context type
+ * minimal avoids a typed lie when a non-input bridge is registered.
+ */
+export interface Focusable {
+  focus(): void;
+}
+
 export interface FormControlState {
   isRequired: boolean;
   isInvalid: boolean;
@@ -25,9 +38,16 @@ export interface FormControlContextValue extends FormControlState {
   /**
    * @platform native — set by `Input.Field` / `Select.Trigger` for label press-to-focus.
    * On web, use `<label htmlFor>` with a labelable control (`input`, `button`, `select`, …).
+   *
+   * Typed as `Focusable` so any control (TextInput, HTMLInputElement, custom focus
+   * bridge) can register without a cast at the assignment site. Consumers that need
+   * the narrower shape cast locally.
    */
-  inputRef?: React.RefObject<TextInput | null>;
+  inputRef?: React.RefObject<Focusable | null>;
   focusInput?: () => void;
+  /** True when the primary child control is focused or (for Select) open — drives `Field.Label` styling. */
+  isLabelFocused?: boolean;
+  setIsLabelFocused?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const FormControlContext = React.createContext<Partial<FormControlContextValue>>({});
@@ -57,8 +77,10 @@ export interface FormControlRootReturn {
   feedbackId: string;
   helpTextId: string;
   htmlProps: HTMLProps;
-  inputRef?: React.RefObject<TextInput | null>;
+  inputRef?: React.RefObject<Focusable | null>;
   focusInput?: () => void;
+  isLabelFocused: boolean;
+  setIsLabelFocused: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 /**
@@ -87,7 +109,9 @@ export function useFormControlRoot(props: FormControlRootProps): FormControlRoot
    */
   const [hasHelpText, setHasHelpText] = React.useState(false);
 
-  const inputRef = React.useRef<TextInput | null>(null);
+  const [isLabelFocused, setIsLabelFocused] = React.useState(false);
+
+  const inputRef = React.useRef<Focusable | null>(null);
 
   const focusInput = React.useCallback(() => {
     const node = inputRef.current;
@@ -111,12 +135,32 @@ export function useFormControlRoot(props: FormControlRootProps): FormControlRoot
     feedbackId,
     helpTextId,
     htmlProps,
+    isLabelFocused,
+    setIsLabelFocused,
     ...(Platform.OS !== 'web' ? { inputRef, focusInput } : {}),
   };
 
   return context;
 }
 
+/**
+ * Reports focus/active state from `Input` / `Select.Trigger` to the parent `Field` for label styling.
+ * No-ops outside a `Field` (no `setIsLabelFocused` on context).
+ */
+export function useReportFormControlLabelFocus(isActive: boolean) {
+  const { setIsLabelFocused } = useFormControlContext();
+
+  React.useLayoutEffect(() => {
+    if (typeof setIsLabelFocused !== 'function') {
+      return undefined;
+    }
+    setIsLabelFocused(isActive);
+    return () => {
+      setIsLabelFocused(false);
+    };
+  }, [isActive, setIsLabelFocused]);
+}
+
 /**
  * Hook that merges local field props with the nearest form field context
  * and returns normalised HTML / ARIA attributes for input elements.

package/src/style/context/index.test.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import { renderHook } from '@testing-library/react-native';
+import { ParentContext, useParentContext, useStyleContext } from './index';
+
+describe('style context hooks', () => {
+  it('reads parent context values', () => {
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <ParentContext.Provider value={{ Button: { size: 'lg' }, Card: { padded: true } }}>
+        {children}
+      </ParentContext.Provider>
+    );
+
+    const { result: parentResult } = renderHook(() => useParentContext(), { wrapper });
+    const { result: styleResult } = renderHook(() => useStyleContext('Button'), { wrapper });
+
+    expect(parentResult.current).toEqual({ Button: { size: 'lg' }, Card: { padded: true } });
+    expect(styleResult.current).toEqual({ size: 'lg' });
+  });
+
+  it('defaults to Global scope', () => {
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <ParentContext.Provider value={{ Global: { theme: 'dark' } }}>
+        {children}
+      </ParentContext.Provider>
+    );
+
+    const { result } = renderHook(() => useStyleContext(), { wrapper });
+
+    expect(result.current).toEqual({ theme: 'dark' });
+  });
+});

package/src/style/withStyleContext/index.test.tsx

@@ -0,0 +1,55 @@
+import { Text, View } from 'react-native';
+import { render, screen } from '@testing-library/react-native';
+import { useStyleContext } from '../context';
+import { withStyleContext } from './index';
+
+const StyledView = withStyleContext(View, 'Button');
+
+function StyleConsumer() {
+  const context = useStyleContext('Button');
+  return <Text testID="style-context">{JSON.stringify(context)}</Text>;
+}
+
+describe('withStyleContext', () => {
+  it('provides scoped context to descendants', () => {
+    render(
+      <StyledView context={{ size: 'lg' }} testID="wrapped">
+        <StyleConsumer />
+      </StyledView>,
+    );
+
+    expect(screen.getByTestId('style-context')).toHaveTextContent('{"size":"lg"}');
+    expect(screen.getByTestId('wrapped')).toBeTruthy();
+  });
+
+  it('inherits parent context for other scopes', () => {
+    const Outer = withStyleContext(View, 'Card');
+
+    render(
+      <Outer context={{ padded: true }} testID="outer">
+        <StyledView context={{ size: 'sm' }} testID="inner">
+          <StyleConsumer />
+        </StyledView>
+      </Outer>,
+    );
+
+    expect(screen.getByTestId('style-context')).toHaveTextContent('{"size":"sm"}');
+  });
+
+  it('defaults to the Global scope when none is provided', () => {
+    const GlobalView = withStyleContext(View);
+
+    function GlobalConsumer() {
+      const context = useStyleContext('Global');
+      return <Text testID="global-context">{JSON.stringify(context)}</Text>;
+    }
+
+    render(
+      <GlobalView context={{ theme: 'dark' }} testID="global-wrapped">
+        <GlobalConsumer />
+      </GlobalView>,
+    );
+
+    expect(screen.getByTestId('global-context')).toHaveTextContent('{"theme":"dark"}');
+  });
+});