@ankhorage/surface 4.2.1 → 4.4.0

package/src/components/tabs/Tabs.tsx

@@ -60,8 +60,8 @@ export function Tabs({ children, value, defaultValue, onValueChange, testID }: T
   );
 
   return (
-    <TabsContext.Provider value={contextValue}>
+    <TabsContext value={contextValue}>
       <Box testID={testID}>{children}</Box>
-    </TabsContext.Provider>
+    </TabsContext>
   );
 }

package/src/components/tabs/context.tsx

@@ -21,7 +21,7 @@ export interface TabsContextValue {
 export const TabsContext = React.createContext<TabsContextValue | null>(null);
 
 export function useTabsContext(): TabsContextValue {
-  const value = React.useContext(TabsContext);
+  const value = React.use(TabsContext);
 
   if (!value) {
     throw new Error('Tabs components must be used within <Tabs>.');

package/src/context/FontContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo, useState } from 'react';
+import React, { createContext, use, useMemo, useState } from 'react';
 
 /**
  * Runtime font state consumed by theme and text primitives.
@@ -51,9 +51,9 @@ export function FontProvider(props: {
     [fontsLoaded, activeFontId, onActiveFontChange],
   );
 
-  return <FontContext.Provider value={value}>{children}</FontContext.Provider>;
+  return <FontContext value={value}>{children}</FontContext>;
 }
 
 export function useFontContext(): FontRuntime {
-  return useContext(FontContext);
+  return use(FontContext);
 }

package/src/context/TranslationContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext, use } from 'react';
 
 /**
  * Minimal translation runtime surface.
@@ -35,7 +35,6 @@ export function TranslationProvider(props: {
     t: (key: string, options?: Record<string, unknown>) => {
       if (i18n?.t) {
         const result = i18n.t(key, options);
-        // If translation returns the key, it's missing in the current dictionary
         if (result !== key) return result;
       }
       return t(key, options);
@@ -43,9 +42,9 @@ export function TranslationProvider(props: {
     i18n: i18n ?? null,
   };
 
-  return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>;
+  return <TranslationContext value={value}>{children}</TranslationContext>;
 }
 
 export function useTranslationContext(): TranslationRuntime {
-  return useContext(TranslationContext);
+  return use(TranslationContext);
 }

package/src/core/responsive/ResponsiveProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, use, useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
 
 import { getBreakpointFromWidth } from './getBreakpointFromWidth';
@@ -17,11 +17,11 @@ export function ResponsiveProvider({ children }: { children: React.ReactNode })
     [width],
   );
 
-  return <ResponsiveContext.Provider value={value}>{children}</ResponsiveContext.Provider>;
+  return <ResponsiveContext value={value}>{children}</ResponsiveContext>;
 }
 
 export function useResponsiveRuntime(): ResponsiveRuntime {
-  const runtime = useContext(ResponsiveContext);
+  const runtime = use(ResponsiveContext);
 
   if (!runtime) {
     throw new Error('useResponsiveRuntime must be used within a ResponsiveProvider');

package/src/examples/DocsExamples.tsx

@@ -5,13 +5,13 @@ import { HelperText } from '../components/helper-text';
 import { Menu } from '../components/menu';
 import { Modal } from '../components/modal';
 import { Tab, TabList, TabPanel, Tabs } from '../components/tabs';
-import { ToastProvider, useToast } from '../components/toast';
 import { Tooltip } from '../components/tooltip';
 import { Button } from '../features/button/public';
 import { Card } from '../features/card/public';
 import { Checkbox } from '../features/form/checkbox/public';
 import { TextInput } from '../features/form/text-input/public';
 import { Box, Stack } from '../features/layout/public';
+import { ToastProvider, useToast } from '../features/toast/public';
 import { Text } from '../features/typography/public';
 import { ThemeProvider } from '../theme';
 import type { ThemeConfig } from '../theme/types';

package/src/features/accordion/adapters/inbound/Accordion.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import type {
+  AccordionMode,
+  AccordionMultipleProps,
+  AccordionProps,
+  AccordionSingleProps,
+} from '../../../../types/accordion';
+import { resolveAccordionToggle } from '../../utils/resolveAccordionToggle';
+import { AccordionContext } from './AccordionContext';
+
+/*** Coordinates controlled or uncontrolled accordion expansion state. */
+export function Accordion(props: AccordionProps) {
+  const {
+    children,
+    collapsible = false,
+    defaultValue,
+    disabled = false,
+    interactionPolicy = 'enabled',
+    onValueChange: _onValueChange,
+    type = 'single',
+    value,
+    ...viewProps
+  } = props;
+  const [uncontrolledValues, setUncontrolledValues] = React.useState<readonly string[]>(() =>
+    normalizeAccordionValues(type, defaultValue),
+  );
+  const controlled = value !== undefined;
+  const openValues = controlled ? normalizeAccordionValues(type, value) : uncontrolledValues;
+
+  const toggleValue = React.useCallback(
+    (itemValue: string) => {
+      if (disabled || interactionPolicy === 'passive') return;
+
+      const nextValues = resolveAccordionToggle({
+        collapsible,
+        mode: type,
+        openValues,
+        value: itemValue,
+      });
+
+      if (!controlled) setUncontrolledValues(nextValues);
+      notifyValueChange(props, nextValues);
+    },
+    [collapsible, controlled, disabled, interactionPolicy, openValues, props, type],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({ disabled, interactionPolicy, mode: type, openValues, toggleValue }),
+    [disabled, interactionPolicy, openValues, toggleValue, type],
+  );
+
+  return (
+    <AccordionContext value={contextValue}>
+      <View {...viewProps}>{children}</View>
+    </AccordionContext>
+  );
+}
+
+/*** Normalizes the public single/multiple value shapes for internal state. */
+function normalizeAccordionValues(
+  mode: AccordionMode,
+  value: string | readonly string[] | undefined,
+): readonly string[] {
+  if (mode === 'multiple') {
+    return typeof value === 'string' || value === undefined ? [] : value;
+  }
+
+  return typeof value === 'string' ? [value] : [];
+}
+
+/*** Emits the public value shape matching the configured accordion mode. */
+function notifyValueChange(props: AccordionProps, values: readonly string[]) {
+  if (props.type === 'multiple') {
+    const multipleProps: AccordionMultipleProps = props;
+    multipleProps.onValueChange?.(values);
+    return;
+  }
+
+  const singleProps: AccordionSingleProps = props;
+  singleProps.onValueChange?.(values[0]);
+}

package/src/features/accordion/adapters/inbound/AccordionContent.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import type { AccordionContentProps } from '../../../../types/accordion';
+import { AccordionItemContext } from './AccordionItemContext';
+
+/*** Renders an accordion item's content when expanded or force-mounted. */
+export function AccordionContent({
+  children,
+  forceMount = false,
+  style,
+  ...viewProps
+}: AccordionContentProps) {
+  const item = React.use(AccordionItemContext);
+  if (!item) throw new Error('AccordionContent must be rendered inside AccordionItem.');
+  if (!item.open && !forceMount) return null;
+
+  return (
+    <View
+      {...viewProps}
+      accessibilityLabelledBy={item.triggerId}
+      nativeID={item.contentId}
+      style={[!item.open ? hiddenContentStyle : undefined, style]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const hiddenContentStyle: ViewStyle = { display: 'none' };

package/src/features/accordion/adapters/inbound/AccordionContext.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import type { AccordionContextValue } from '../../../../types/accordion';
+
+export const AccordionContext = React.createContext<AccordionContextValue | null>(null);

package/src/features/accordion/adapters/inbound/AccordionItem.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import type { AccordionItemProps } from '../../../../types/accordion';
+import { AccordionContext } from './AccordionContext';
+import { AccordionItemContext } from './AccordionItemContext';
+
+/*** Provides one accordion item's value, state, and trigger/content identifiers. */
+export function AccordionItem({
+  children,
+  disabled = false,
+  interactionPolicy,
+  value,
+  ...viewProps
+}: AccordionItemProps) {
+  const accordion = React.use(AccordionContext);
+  if (!accordion) throw new Error('AccordionItem must be rendered inside Accordion.');
+
+  const reactId = React.useId();
+  const resolvedDisabled = accordion.disabled || disabled;
+  const resolvedInteractionPolicy = interactionPolicy ?? accordion.interactionPolicy;
+  const open = accordion.openValues.includes(value);
+  const toggle = React.useCallback(() => accordion.toggleValue(value), [accordion, value]);
+  const contextValue = React.useMemo(
+    () => ({
+      contentId: `accordion-${reactId}-content`,
+      disabled: resolvedDisabled,
+      interactionPolicy: resolvedInteractionPolicy,
+      open,
+      toggle,
+      triggerId: `accordion-${reactId}-trigger`,
+      value,
+    }),
+    [open, reactId, resolvedDisabled, resolvedInteractionPolicy, toggle, value],
+  );
+
+  return (
+    <AccordionItemContext value={contextValue}>
+      <View {...viewProps}>{children}</View>
+    </AccordionItemContext>
+  );
+}

package/src/features/accordion/adapters/inbound/AccordionItemContext.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import type { AccordionItemContextValue } from '../../../../types/accordion';
+
+export const AccordionItemContext = React.createContext<AccordionItemContextValue | null>(null);

package/src/features/accordion/adapters/inbound/AccordionTrigger.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import type { AccordionTriggerProps } from '../../../../types/accordion';
+import { AccordionItemContext } from './AccordionItemContext';
+
+/*** Renders the accessible button that toggles its owning accordion item. */
+export function AccordionTrigger({
+  children,
+  disabled = false,
+  interactionPolicy,
+  ...pressableProps
+}: AccordionTriggerProps) {
+  const item = React.use(AccordionItemContext);
+  if (!item) throw new Error('AccordionTrigger must be rendered inside AccordionItem.');
+
+  const resolvedDisabled = item.disabled || disabled;
+  const resolvedInteractionPolicy = interactionPolicy ?? item.interactionPolicy;
+
+  return (
+    <View accessibilityRole="header">
+      <Pressable
+        {...pressableProps}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: resolvedDisabled, expanded: item.open }}
+        disabled={resolvedDisabled}
+        nativeID={item.triggerId}
+        onPress={resolvedInteractionPolicy === 'passive' ? undefined : item.toggle}
+      >
+        {children}
+      </Pressable>
+    </View>
+  );
+}

package/src/features/accordion/public.ts

@@ -0,0 +1,13 @@
+export type {
+  AccordionContentProps,
+  AccordionItemProps,
+  AccordionMode,
+  AccordionMultipleProps,
+  AccordionProps,
+  AccordionSingleProps,
+  AccordionTriggerProps,
+} from '../../types/accordion';
+export { Accordion } from './adapters/inbound/Accordion';
+export { AccordionContent } from './adapters/inbound/AccordionContent';
+export { AccordionItem } from './adapters/inbound/AccordionItem';
+export { AccordionTrigger } from './adapters/inbound/AccordionTrigger';

package/src/features/accordion/utils/resolveAccordionToggle.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, test } from 'bun:test';
+
+import { resolveAccordionToggle } from './resolveAccordionToggle';
+
+describe('resolveAccordionToggle', () => {
+  test('opens one value in single mode', () => {
+    expect(
+      resolveAccordionToggle({
+        collapsible: false,
+        mode: 'single',
+        openValues: ['general'],
+        value: 'appearance',
+      }),
+    ).toEqual(['appearance']);
+  });
+
+  test('keeps the active value open when single mode is not collapsible', () => {
+    const openValues = ['general'] as const;
+    expect(
+      resolveAccordionToggle({
+        collapsible: false,
+        mode: 'single',
+        openValues,
+        value: 'general',
+      }),
+    ).toBe(openValues);
+  });
+
+  test('closes the active value when single mode is collapsible', () => {
+    expect(
+      resolveAccordionToggle({
+        collapsible: true,
+        mode: 'single',
+        openValues: ['general'],
+        value: 'general',
+      }),
+    ).toEqual([]);
+  });
+
+  test('adds and removes values independently in multiple mode', () => {
+    const opened = resolveAccordionToggle({
+      collapsible: false,
+      mode: 'multiple',
+      openValues: ['general'],
+      value: 'appearance',
+    });
+    expect(opened).toEqual(['general', 'appearance']);
+    expect(
+      resolveAccordionToggle({
+        collapsible: false,
+        mode: 'multiple',
+        openValues: opened,
+        value: 'general',
+      }),
+    ).toEqual(['appearance']);
+  });
+});

package/src/features/accordion/utils/resolveAccordionToggle.ts

@@ -0,0 +1,28 @@
+import type { AccordionMode } from '../../../types/accordion';
+
+/*** Resolves the next immutable set of open accordion item values. */
+export function resolveAccordionToggle({
+  collapsible,
+  mode,
+  openValues,
+  value,
+}: ResolveAccordionToggleInput): readonly string[] {
+  if (mode === 'multiple') {
+    return openValues.includes(value)
+      ? openValues.filter((openValue) => openValue !== value)
+      : [...openValues, value];
+  }
+
+  if (openValues.includes(value)) {
+    return collapsible ? [] : openValues;
+  }
+
+  return [value];
+}
+
+interface ResolveAccordionToggleInput {
+  collapsible: boolean;
+  mode: AccordionMode;
+  openValues: readonly string[];
+  value: string;
+}

package/src/features/bottom-sheet/BottomSheetProvider.tsx

@@ -48,7 +48,7 @@ export function BottomSheetProvider({ children }: { children: React.ReactNode })
   );
 
   return (
-    <BottomSheetContext.Provider value={controller}>
+    <BottomSheetContext value={controller}>
       <BottomSheetModalProvider>
         {children}
         <BottomSheetHost
@@ -58,7 +58,7 @@ export function BottomSheetProvider({ children }: { children: React.ReactNode })
           presentedRef={presentedRef}
         />
       </BottomSheetModalProvider>
-    </BottomSheetContext.Provider>
+    </BottomSheetContext>
   );
 }
 

package/src/features/bottom-sheet/useBottomSheet.ts

@@ -5,7 +5,7 @@ import { BottomSheetContext } from './BottomSheetContext';
 
 /*** Returns the shared bottom-sheet controller installed by BottomSheetProvider. */
 export function useBottomSheet(): BottomSheetController {
-  const controller = React.useContext(BottomSheetContext);
+  const controller = React.use(BottomSheetContext);
 
   if (!controller) {
     throw new Error('useBottomSheet must be used within BottomSheetProvider.');

package/src/features/popover/adapters/inbound/Popover.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { useControllableState } from '../../../../internal/useControllableState';
+import type { PopoverProps } from '../../../../types/popover';
+import { PopoverOverlay } from './PopoverOverlay';
+
+/*** Renders anchored overlay content through the shared Surface overlay stack. */
+export function Popover(props: PopoverProps) {
+  const anchorRef = React.useRef<View | null>(null);
+  const [resolvedOpen, setResolvedOpen] = useControllableState<boolean>({
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange,
+    value: props.open,
+  });
+  const passive = props.interactionPolicy === 'passive';
+
+  const close = React.useCallback(() => {
+    if (!passive) setResolvedOpen(false);
+  }, [passive, setResolvedOpen]);
+  const toggle = React.useCallback(() => {
+    if (!passive) setResolvedOpen(!resolvedOpen);
+  }, [passive, resolvedOpen, setResolvedOpen]);
+
+  return (
+    <>
+      <View
+        collapsable={false}
+        ref={anchorRef}
+        testID={props.testID ? `${props.testID}-anchor` : undefined}
+      >
+        {props.anchor({ close, open: resolvedOpen, toggle })}
+      </View>
+      {resolvedOpen ? (
+        <PopoverOverlay
+          anchorRef={anchorRef}
+          closeOnOutsidePress={props.closeOnOutsidePress ?? true}
+          offset={props.offset ?? 8}
+          onClose={close}
+          passive={passive}
+          placement={props.placement ?? 'bottom-start'}
+          testID={props.testID}
+        >
+          {props.children}
+        </PopoverOverlay>
+      ) : null}
+    </>
+  );
+}

package/src/features/popover/adapters/inbound/PopoverOverlay.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Pressable, StyleSheet, View, type ViewStyle } from 'react-native';
+
+import { Portal } from '../../../../internal/overlay/Portal';
+import type { PopoverPlacement } from '../../../../types/popover';
+import { usePopoverLayout } from './usePopoverLayout';
+
+/*** Renders and positions one mounted popover overlay for an open anchor. */
+export function PopoverOverlay({
+  anchorRef,
+  children,
+  closeOnOutsidePress,
+  offset,
+  onClose,
+  passive,
+  placement,
+  testID,
+}: PopoverOverlayProps) {
+  const { onContentLayout, position, ready } = usePopoverLayout({
+    anchorRef,
+    offset,
+    open: true,
+    placement,
+  });
+
+  return (
+    <Portal layer="popover" visible={ready}>
+      <View pointerEvents="box-none" style={styles.overlay}>
+        {closeOnOutsidePress ? (
+          <Pressable
+            accessibilityLabel="Close popover"
+            onPress={passive ? undefined : onClose}
+            style={styles.backdrop}
+            testID={testID ? `${testID}-backdrop` : undefined}
+          />
+        ) : null}
+        <View
+          onLayout={onContentLayout}
+          style={[styles.content, position]}
+          testID={testID ? `${testID}-content` : undefined}
+        >
+          {children}
+        </View>
+      </View>
+    </Portal>
+  );
+}
+
+interface PopoverOverlayProps {
+  anchorRef: React.RefObject<View | null>;
+  children?: React.ReactNode;
+  closeOnOutsidePress: boolean;
+  offset: number;
+  onClose: () => void;
+  passive: boolean;
+  placement: PopoverPlacement;
+  testID?: string;
+}
+
+const absoluteFill: ViewStyle = {
+  bottom: 0,
+  left: 0,
+  position: 'absolute',
+  right: 0,
+  top: 0,
+};
+
+const styles = StyleSheet.create({
+  backdrop: absoluteFill,
+  content: { position: 'absolute' },
+  overlay: absoluteFill,
+});

package/src/features/popover/adapters/inbound/usePopoverLayout.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+  useWindowDimensions,
+  type View,
+} from 'react-native';
+
+import type { PopoverPlacement } from '../../../../types/popover';
+import { resolvePopoverPosition } from '../../utils/resolvePopoverPosition';
+
+/*** Measures the anchor and resolves the current viewport-safe popover position. */
+export function usePopoverLayout({ anchorRef, offset, open, placement }: UsePopoverLayoutInput) {
+  const [anchorLayout, setAnchorLayout] = React.useState<LayoutRectangle | null>(null);
+  const [contentSize, setContentSize] = React.useState({ height: 0, width: 0 });
+  const { height: viewportHeight, width: viewportWidth } = useWindowDimensions();
+
+  const measureAnchor = React.useCallback(() => {
+    anchorRef.current?.measureInWindow((x, y, width, height) => {
+      setAnchorLayout({ height, width, x, y });
+    });
+  }, [anchorRef]);
+
+  React.useEffect(() => {
+    if (open) measureAnchor();
+  }, [measureAnchor, open]);
+
+  const onContentLayout = React.useCallback((event: LayoutChangeEvent) => {
+    setContentSize(event.nativeEvent.layout);
+  }, []);
+
+  const position = anchorLayout
+    ? resolvePopoverPosition({
+        anchor: anchorLayout,
+        contentSize,
+        offset,
+        placement,
+        viewport: { height: viewportHeight, width: viewportWidth },
+        viewportPadding: 8,
+      })
+    : undefined;
+
+  return { measureAnchor, onContentLayout, position, ready: Boolean(anchorLayout) };
+}
+
+interface UsePopoverLayoutInput {
+  anchorRef: React.RefObject<View | null>;
+  offset: number;
+  open: boolean;
+  placement: PopoverPlacement;
+}

package/src/features/popover/public.ts

@@ -0,0 +1,2 @@
+export type { PopoverAnchorRenderProps, PopoverPlacement, PopoverProps } from '../../types/popover';
+export { Popover } from './adapters/inbound/Popover';

package/src/features/popover/utils/resolvePopoverPosition.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolvePopoverPosition } from './resolvePopoverPosition';
+
+describe('resolvePopoverPosition', () => {
+  it('places bottom-start content below the anchor', () => {
+    expect(
+      resolvePopoverPosition({
+        anchor: { height: 40, width: 120, x: 100, y: 80 },
+        contentSize: { height: 180, width: 240 },
+        offset: 8,
+        placement: 'bottom-start',
+        viewport: { height: 800, width: 1200 },
+        viewportPadding: 8,
+      }),
+    ).toEqual({ left: 100, top: 128 });
+  });
+
+  it('clamps content to the available viewport', () => {
+    expect(
+      resolvePopoverPosition({
+        anchor: { height: 40, width: 80, x: 980, y: 700 },
+        contentSize: { height: 240, width: 300 },
+        offset: 8,
+        placement: 'bottom-end',
+        viewport: { height: 800, width: 1200 },
+        viewportPadding: 8,
+      }),
+    ).toEqual({ left: 760, top: 552 });
+  });
+});