@tcn/ui 0.12.1 → 0.12.3

package/src/inputs/phone_number_input/phone_number_input.stories.tsx

@@ -139,6 +139,13 @@ export const WithPhoneBook = () => {
           <Option value="+14355865955" label="Bob Johnson" keywords={['bob', 'johnson']}>
             Bob Johnson - +1 (435) 586-5955
           </Option>
+          <Option
+            value="+14355865950"
+            label="A Really Really Really Really Really Long Label For Jack"
+            keywords={['jack', 'johnson']}
+          >
+            A Really Really Really Really Reall Long Label - +1 (435) 586-5955
+          </Option>
           <Option
             value="sip:foo@bar.com"
             label="Foo Sip"

package/src/inputs/phone_number_input/phone_number_input_adapter.tsx

@@ -112,6 +112,11 @@ export const PhoneNumberInputAdapter = forwardRef<
       <SuggestionList
         open={isPhoneBookOpen}
         anchorElement={phoneBookElement}
+        horizontalAnchor="end"
+        horizontalOrigin="end"
+        verticalAnchor="top"
+        verticalOrigin="top"
+        width="300px"
         onOptionSelect={handlePhoneBookOptionSelect}
         onClose={closePhoneBook}
         noSuggestionMessage="No phone numbers found"

package/src/inputs/phone_number_input/sip_input.tsx

@@ -138,7 +138,12 @@ export function SipInput({
         anchorElement={phoneBookElement}
         onOptionSelect={handlePhoneBookOptionSelect}
         onClose={closePhoneBook}
+        width="300px"
         noSuggestionMessage="No phone numbers found"
+        horizontalAnchor="end"
+        horizontalOrigin="end"
+        verticalAnchor="top"
+        verticalOrigin="top"
       >
         {phoneBookOptions}
       </SuggestionList>

package/src/inputs/select/select.stories.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Option, type OptionProps } from '../options/option.js';
 import { Select as SelectComponent, SelectProps } from './select.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { Headline } from '../../typography/headline/headline.js';
 import { BodyText } from '../../typography/body_text/body_text.js';
+import { Button } from '../../actions/button/button/button.js';
 
 export default {
   title: 'Inputs/Select',
@@ -124,23 +125,45 @@ export function CustomWidth(_: Omit<SelectProps, 'children'>) {
 }
 
 export function DelayedOptions() {
+  const timeoutRef = useRef<number | null>(null);
   const [value, setValue] = useState<string>('');
   const [options, setOptions] = useState<React.ReactElement<OptionProps>[]>([]);
 
   useEffect(() => {
-    window.setTimeout(() => {
-      setOptions([
-        <Option key={1} value="apple" label="Apple" keywords={['fruit', 'red', 'sweet']}>
-          Apple
+    timeoutRef.current = window.setTimeout(() => {
+      const length = options.length;
+      const newOptions = [
+        ...options,
+        <Option
+          key={length}
+          value={String(length)}
+          label={String(length)}
+          keywords={[String(length)]}
+        >
+          {String(length)}
         </Option>,
-      ]);
-    }, 4000);
-  }, []);
+      ];
+      setOptions(newOptions);
+    }, 2000);
+
+    return () => {
+      window.clearTimeout(timeoutRef?.current || 0);
+    };
+  }, [options]);
 
   return (
-    <SelectComponent value={value} onChange={setValue} width="100px">
-      {options}
-    </SelectComponent>
+    <>
+      <SelectComponent value={value} onChange={setValue} width="100px">
+        {options}
+      </SelectComponent>
+      <Button
+        onClick={() => {
+          window.clearInterval(timeoutRef.current ?? 0);
+        }}
+      >
+        Stop
+      </Button>
+    </>
   );
 }
 

package/src/inputs/suggestions/suggestion_list.tsx

@@ -24,6 +24,7 @@ export interface SuggestionListProps
   open?: boolean;
   children?: React.ReactNode;
   onChange?: (value: string) => void;
+  width?: string;
   onOptionSelect?: (
     value: string,
     label: string | undefined,
@@ -39,6 +40,12 @@ export interface SuggestionListProps
     cursorStartPosition: number | null,
     cursorEndPosition: number | null
   ) => void;
+  verticalAnchor?: 'top' | 'center' | 'bottom';
+  verticalOrigin?: 'top' | 'center' | 'bottom';
+  verticalOffset?: number;
+  horizontalAnchor?: 'start' | 'center' | 'end';
+  horizontalOrigin?: 'start' | 'center' | 'end';
+  horizontalOffset?: number;
 }
 
 export function SuggestionList({
@@ -47,6 +54,7 @@ export function SuggestionList({
   scrollToValue,
   anchorElement,
   open = false,
+  width = 'auto',
   children,
   onOptionSelect,
   noSuggestionMessage = '-- No Matches --',
@@ -57,6 +65,12 @@ export function SuggestionList({
   trimCustomInput = false,
   haveValueAsOption = false,
   restoreFocus = true,
+  verticalAnchor = 'top',
+  verticalOrigin = 'top',
+  verticalOffset = -4,
+  horizontalAnchor = 'start',
+  horizontalOrigin = 'start',
+  horizontalOffset = 0,
   ...props
 }: SuggestionListProps) {
   // Extract valid Option components from children
@@ -403,25 +417,28 @@ export function SuggestionList({
   }, [searchValue]);
 
   useLayoutEffect(() => {
-    const newMatches = getMatchedOptions(value, MAX_RESULTS);
+    const newMatches = getMatchedOptions(internalValue, MAX_RESULTS);
     setMatchedOptions(newMatches);
-  }, [value, getMatchedOptions]);
+  }, [getMatchedOptions, internalValue]);
 
   return (
     <Popper
       open={open}
       anchorElement={anchorElement}
       onClose={handleUseClose}
-      verticalAnchor="top"
-      verticalOrigin="top"
-      verticalOffset={-4}
+      verticalAnchor={verticalAnchor}
+      verticalOrigin={verticalOrigin}
+      verticalOffset={verticalOffset}
+      horizontalAnchor={horizontalAnchor}
+      horizontalOrigin={horizontalOrigin}
+      horizontalOffset={horizontalOffset}
       restoreFocus={restoreFocus}
     >
       <VStack
         minHeight={`calc(${suggestionsHeight}, 8px)`}
         maxHeight="300px"
         minWidth={suggestionsWidth}
-        width="auto"
+        width={width}
         hAlign="start"
         className={clsx(styles['suggestion-list'], 'tcn-suggestion-list')}
       >

package/src/overlay/popper/base/dismissal_decorator.tsx

@@ -35,7 +35,7 @@ export const PopperDismissalDecorator = forwardRef<
   };
 
   function buildExceptionHandler(dismissal: PopperDismissal) {
-    if (dismissal in dismissals) {
+    if (dismissals.includes(dismissal)) {
       return (target: HTMLElement) => isException?.(dismissal, target) ?? false;
     }
     return () => false;

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'