@tcn/ui 0.12.2 → 0.12.4

package/src/overlay/popper/context_popper.tsx

@@ -1,8 +1,9 @@
-import { forwardRef, type PropsWithChildren } from 'react';
+import { forwardRef, useRef, type PropsWithChildren } from 'react';
 import { BasePopper, type BasePopperProps } from './base/base_popper.js';
 import { Tethered, type TetheredProps } from '../tethered/tethered.js';
 import { useContextTrigger } from './hooks/use_context_trigger.js';
 import { PopperDismissal } from './base/dismissal_decorator.js';
+import { useForkRef } from '../../utils/index.js';
 
 export type ContextPopperProps = Omit<BasePopperProps, 'open' | 'onDismissal'> &
   Omit<TetheredProps, 'anchor'> & {
@@ -25,6 +26,9 @@ export const ContextPopper = forwardRef<
   ref
 ) {
   const { isOpen, close, rectangle } = useContextTrigger(anchorElement);
+  const popperRef = useRef<HTMLDivElement>(null);
+  const mergedRef = useForkRef(ref, popperRef);
+  const effectiveAcceptedRefs = [popperRef, anchorElement, ...acceptedRefs];
 
   return (
     <BasePopper
@@ -32,10 +36,10 @@ export const ContextPopper = forwardRef<
       onDismissal={close}
       restoreFocus={restoreFocus}
       dismissals={dismissals}
-      acceptedRefs={acceptedRefs}
+      acceptedRefs={effectiveAcceptedRefs}
       isException={isException}
     >
-      <Tethered ref={ref} anchor={rectangle} {...tetheredProps}>
+      <Tethered ref={mergedRef} anchor={rectangle} {...tetheredProps}>
         {children}
       </Tethered>
     </BasePopper>

package/src/overlay/popper/element_popper.tsx

@@ -1,9 +1,10 @@
-import { forwardRef, type PropsWithChildren } from 'react';
+import { forwardRef, useRef, type PropsWithChildren } from 'react';
 import { BasePopper, type BasePopperProps } from './base/base_popper.js';
 import {
   ElementTethered,
   type ElementTetheredProps,
 } from '../tethered/element_tethered.js';
+import { useForkRef } from '../../utils/index.js';
 
 export type ElementPopperProps = BasePopperProps & ElementTetheredProps;
 
@@ -16,14 +17,19 @@ export const ElementPopper = forwardRef<
     open,
     onDismissal,
     isException,
-    acceptedRefs,
+    acceptedRefs = [],
     veil,
     dismissals,
     children,
+    anchorElement,
     ...elementTetheredProps
   },
   ref
 ) {
+  const popperRef = useRef<HTMLDivElement>(null);
+  const mergedRef = useForkRef(ref, popperRef);
+  const effectiveAcceptedRefs = [popperRef, anchorElement, ...acceptedRefs];
+
   return (
     <BasePopper
       restoreFocus={restoreFocus}
@@ -31,10 +37,14 @@ export const ElementPopper = forwardRef<
       onDismissal={onDismissal}
       isException={isException}
       dismissals={dismissals}
-      acceptedRefs={acceptedRefs}
+      acceptedRefs={effectiveAcceptedRefs}
       veil={veil}
     >
-      <ElementTethered ref={ref} {...elementTetheredProps}>
+      <ElementTethered
+        ref={mergedRef}
+        anchorElement={anchorElement}
+        {...elementTetheredProps}
+      >
         {children}
       </ElementTethered>
     </BasePopper>

package/src/overlay/tethered/__stories__/shared/base_story_config.ts

@@ -56,5 +56,5 @@ export const tetheredArgs: TetheredStoryArgs = {
   horizontalOrigin: 'center',
   verticalOffset: 0,
   horizontalOffset: 0,
-  precision: 'low',
+  precision: undefined,
 };

package/src/overlay/tethered/hooks/use_ref_dimensions.ts

@@ -0,0 +1,32 @@
+import { useLayoutEffect, useState } from 'react';
+import type { Dimensions } from '../../../utils/index.js';
+
+function getDimensions(element: HTMLElement | null): Dimensions {
+  if (!element) return { width: 0, height: 0 };
+  const rect = element.getBoundingClientRect();
+  return { width: rect.width, height: rect.height };
+}
+
+export function useRefDimensions(ref: React.RefObject<HTMLElement>): Dimensions {
+  const [dimensions, setDimensions] = useState<Dimensions>(() =>
+    getDimensions(ref.current)
+  );
+
+  useLayoutEffect(() => {
+    const update = () => {
+      setDimensions(getDimensions(ref.current));
+    };
+
+    update();
+
+    const resizeObserver = new ResizeObserver(update);
+    if (!ref.current) return;
+    resizeObserver.observe(ref.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [ref]);
+
+  return dimensions;
+}

package/src/overlay/tethered/hooks/{useTether.ts → use_tether.ts}

@@ -1,7 +1,8 @@
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { type Rectangle } from '../../../utils/index.js';
 import type { HorizontalTether, VerticalTether } from '../types.js';
-import { calculateTetheredPosition } from './calculate_position.js';
+import { calculateTetheredPosition } from './utils/calculate_position.js';
+import { useRefDimensions } from './use_ref_dimensions.js';
 
 export interface UseTetherParams {
   anchor: Rectangle | null;
@@ -24,6 +25,7 @@ export function useTether({
 }: UseTetherParams) {
   const [position, setPosition] = useState({ top: 0, left: 0 });
   const tetherRef = useRef<HTMLDivElement>(null);
+  const dimensions = useRefDimensions(tetherRef);
 
   const getPosition = useCallback(() => {
     if (!anchor || !tetherRef.current) return;
@@ -82,5 +84,8 @@ export function useTether({
     };
   });
 
-  return { position, tetherRef };
+  return {
+    rectangle: { dimensions, position: { x: position.left, y: position.top } },
+    tetherRef,
+  };
 }

package/src/overlay/tethered/hooks/use_tether_origin.ts

@@ -0,0 +1,46 @@
+import { useRef } from 'react';
+import type { Position, Rectangle } from '../../../utils/index.js';
+import type { HorizontalTether, VerticalTether } from '../types.js';
+import {
+  getOriginDirection,
+  getOriginOffset,
+  getOriginPosition,
+  type CaretDirection,
+} from './utils/calculate_origin.js';
+import { useRefDimensions } from './use_ref_dimensions.js';
+
+export interface TetherOrigin {
+  rectangle: Rectangle;
+  offset: Position;
+  direction: CaretDirection;
+}
+
+const initialOriginResult: TetherOrigin = {
+  rectangle: { dimensions: { width: 0, height: 0 }, position: { x: 0, y: 0 } },
+  offset: { x: 0, y: 0 },
+  direction: 'none',
+};
+
+export function useTetherOrigin(
+  tetherRectangle: Rectangle,
+  hOrigin: HorizontalTether,
+  vOrigin: VerticalTether,
+  precision: 'high' | 'low'
+): [TetherOrigin, React.RefObject<HTMLElement>] {
+  const ref = useRef<HTMLElement | null>(null);
+  const dimensions = useRefDimensions(ref);
+
+  if (precision === 'low') return [initialOriginResult, ref];
+
+  // Calculate origin values for high precision
+  const originOffset = getOriginOffset(tetherRectangle.dimensions, hOrigin, vOrigin);
+  const originPosition = getOriginPosition(tetherRectangle.position, originOffset);
+  const originDirection = getOriginDirection(vOrigin, hOrigin);
+
+  const origin: TetherOrigin = {
+    rectangle: { dimensions, position: originPosition },
+    offset: originOffset,
+    direction: originDirection,
+  };
+  return [origin, ref];
+}

package/src/overlay/tethered/hooks/{calculate_origin.ts → utils/calculate_origin.ts}

@@ -1,5 +1,5 @@
-import type { Position, Rectangle } from '../../../utils/index.js';
-import type { HorizontalTether, VerticalTether } from '../types.js';
+import type { Dimensions, Position } from '../../../../utils/index.js';
+import type { HorizontalTether, VerticalTether } from '../../types.js';
 
 export type CaretDirection = 'top' | 'bottom' | 'start' | 'end' | 'none';
 
@@ -8,10 +8,10 @@ export type CaretDirection = 'top' | 'bottom' | 'start' | 'end' | 'none';
  * based on tether dimensions and origin alignment.
  */
 export function getOriginOffset(
-  tether: Rectangle,
+  tetherDimensions: Dimensions,
   hOrigin: HorizontalTether,
   vOrigin: VerticalTether
-): { yOffset: number; xOffset: number } {
+): Position {
   let yOffset = 0;
   let xOffset = 0;
 
@@ -21,10 +21,10 @@ export function getOriginOffset(
       yOffset = 0;
       break;
     case 'center':
-      yOffset = tether.dimensions.height / 2;
+      yOffset = tetherDimensions.height / 2;
       break;
     case 'bottom':
-      yOffset = tether.dimensions.height;
+      yOffset = tetherDimensions.height;
       break;
   }
 
@@ -34,14 +34,14 @@ export function getOriginOffset(
       xOffset = 0;
       break;
     case 'center':
-      xOffset = tether.dimensions.width / 2;
+      xOffset = tetherDimensions.width / 2;
       break;
     case 'end':
-      xOffset = tether.dimensions.width;
+      xOffset = tetherDimensions.width;
       break;
   }
 
-  return { yOffset, xOffset };
+  return { y: yOffset, x: xOffset };
 }
 
 /**
@@ -49,11 +49,11 @@ export function getOriginOffset(
  */
 export function getOriginPosition(
   baselinePosition: Position,
-  offset: { yOffset: number; xOffset: number }
+  offset: Position
 ): Position {
   return {
-    x: baselinePosition.x + offset.xOffset,
-    y: baselinePosition.y + offset.yOffset,
+    x: baselinePosition.x + offset.x,
+    y: baselinePosition.y + offset.y,
   };
 }
 

package/src/overlay/tethered/hooks/{calculate_position.ts → utils/calculate_position.ts}

@@ -1,6 +1,6 @@
-import type { HorizontalTether, VerticalTether } from '../types.js';
-import type { Rectangle } from '../../../utils/index.js';
-import type { Dimensions } from '../../../utils/index.js';
+import type { HorizontalTether, VerticalTether } from '../../types.js';
+import type { Rectangle } from '../../../../utils/index.js';
+import type { Dimensions } from '../../../../utils/index.js';
 
 export interface CalculateTetheredPositionParams {
   anchor: Rectangle;

package/src/overlay/tethered/tethered.tsx

@@ -4,9 +4,8 @@ import { ZStack, type ZStackProps } from '../../stacks/index.js';
 import { useForkRef, type Rectangle } from '../../utils/index.js';
 import { Caret } from '../caret/caret.js';
 import { Portal } from '../portal/portal.js';
-import { useCaretRefDimensions } from './hooks/useCaretRefDimensions.js';
-import { useTether } from './hooks/useTether.js';
-import { useTetherOrigin } from './hooks/useTetherOrigin.js';
+import { useTether } from './hooks/use_tether.js';
+import { useTetherOrigin } from './hooks/use_tether_origin.js';
 import type { HorizontalTether, VerticalTether } from './types.js';
 
 // Styles
@@ -25,6 +24,7 @@ export interface TetheredOwnProp extends BaseTetheredOwnProps {
   anchor: Rectangle | null;
   precision?: 'high' | 'low';
 }
+
 export interface TetheredProps extends TetheredOwnProp, ZStackProps {}
 
 export const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>>(
@@ -45,7 +45,7 @@ export const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>
     },
     ref
   ) {
-    const { position, tetherRef } = useTether({
+    const { rectangle, tetherRef } = useTether({
       anchor,
       verticalAnchor,
       verticalOrigin,
@@ -55,28 +55,24 @@ export const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>
       horizontalOffset,
     });
 
-    // Convert position from { top, left } to Position type { x, y }
-    const tetherPosition = { x: position.left, y: position.top };
-
-    const { originPosition, originOffset, containerRef, originDirection } =
-      useTetherOrigin(tetherPosition, horizontalOrigin, verticalOrigin, precision);
-
-    const { caretElementRef: setCaretElement, caretSize } = useCaretRefDimensions(
-      precision,
-      originDirection
+    const [origin, originRef] = useTetherOrigin(
+      rectangle,
+      horizontalOrigin,
+      verticalOrigin,
+      precision
     );
 
-    const forkedRef = useForkRef(ref, tetherRef, containerRef);
+    const forkedRef = useForkRef(ref, tetherRef);
 
     const cssVariables = {
-      '--tethered-top': `${position.top}px`,
-      '--tethered-left': `${position.left}px`,
-      '--tethered-origin-y': `${originPosition.y}px`,
-      '--tethered-origin-x': `${originPosition.x}px`,
-      '--tethered-origin-delta-y': `${originOffset.yOffset}px`,
-      '--tethered-origin-delta-x': `${originOffset.xOffset}px`,
-      '--origin-indicator-dimensions-width': `${caretSize.width}px`,
-      '--origin-indicator-dimensions-height': `${caretSize.height}px`,
+      '--tethered-top': `${rectangle.position.y}px`,
+      '--tethered-left': `${rectangle.position.x}px`,
+      '--tethered-origin-y': `${origin.rectangle.position.y}px`,
+      '--tethered-origin-x': `${origin.rectangle.position.x}px`,
+      '--tethered-origin-delta-y': `${origin.offset.y}px`,
+      '--tethered-origin-delta-x': `${origin.offset.x}px`,
+      '--origin-indicator-dimensions-width': `${origin.rectangle.dimensions.width}px`,
+      '--origin-indicator-dimensions-height': `${origin.rectangle.dimensions.height}px`,
     };
 
     return (
@@ -89,14 +85,14 @@ export const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>
           data-h-anchor={horizontalAnchor}
           data-v-origin={verticalOrigin}
           data-h-origin={horizontalOrigin}
-          data-anchor-direction={originDirection}
+          data-anchor-direction={origin.direction}
           {...rest}
         >
           {children}
-          {precision === 'high' && originDirection !== 'none' && (
+          {precision === 'high' && origin.direction !== 'none' && (
             <Caret
-              ref={setCaretElement}
-              direction={originDirection}
+              ref={originRef}
+              direction={origin.direction}
               className={clsx(
                 styles['origin-indicator'],
                 'tcn-tethered-origin-indicator'

package/src/surfaces/alert/alert.tsx

@@ -6,8 +6,6 @@ import { Confirm, ConfirmProps } from '../confirm/confirm.js';
 export interface AlertProps extends Omit<ConfirmProps, 'actions'> {
   open?: boolean;
   graphic?: React.ReactNode;
-  title?: string;
-  description?: string;
   onAccept?: () => void;
 }
 

package/src/surfaces/confirm/confirm.tsx

@@ -8,11 +8,12 @@ import { BodyText, Title } from '../../typography/index.js';
 import styles from './confirm.module.css';
 import { Box, type BoxProps } from '../../stacks/box/box.js';
 
-export interface ConfirmProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ConfirmProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   open?: boolean;
   graphic?: React.ReactNode;
-  title?: string;
-  description?: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
   actions?: React.ReactNode;
   veilProps?: BoxProps;
 }
@@ -54,6 +55,24 @@ export const Confirm = React.forwardRef(function Confirm(
     setShake(true);
   }
 
+  const descriptionElement =
+    typeof description === 'string' ? (
+      <BodyText className="tcn-confirm-description" hierarchy="tertiary">
+        {description}
+      </BodyText>
+    ) : (
+      description
+    );
+
+  const titleElement =
+    typeof title === 'string' ? (
+      <Title className="tcn-confirm-title" emphasis="strong" size="sm">
+        {title}
+      </Title>
+    ) : (
+      title
+    );
+
   return (
     <>
       {open && (
@@ -68,12 +87,8 @@ export const Confirm = React.forwardRef(function Confirm(
             >
               <VStack hAlign="center">
                 {graphic}
-                <Title className="tcn-confirm-title" emphasis="strong" size="sm">
-                  {title}
-                </Title>
-                <BodyText className="tcn-confirm-description" hierarchy="tertiary">
-                  {description}
-                </BodyText>
+                {titleElement}
+                {descriptionElement}
                 <Spacer height="16px" />
                 <Box
                   className={clsx(styles.actions, 'tcn-confirm-actions')}