@tcn/ui 0.10.0 → 0.11.0

package/src/inputs/phone_number_input/sip_input.tsx

@@ -0,0 +1,147 @@
+import React, { useLayoutEffect } from 'react';
+import { NotebookIcon } from '@tcn/icons/notebook_icon.js';
+import { Input } from '../input/input.js';
+import { Button } from '../../actions/index.js';
+import { InputGroup } from '../input_group/input_group.js';
+import clsx from 'clsx';
+import { usePhoneContext } from './phone_number_context.js';
+import type { CountryCode } from 'libphonenumber-js';
+import {
+  PhoneNumberCountrySelectAdapter,
+  type CountryOption,
+} from './phone_number_country_select_adapter.js';
+import { SuggestionList } from '../suggestions/suggestion_list.js';
+
+export interface SipInputProps {
+  onChange: (value: string) => void;
+  countries?: CountryCode[];
+  disabled?: boolean;
+  name?: string;
+  'aria-label'?: string;
+  autoFocus?: boolean;
+  placeholder?: string;
+}
+
+export function SipInput({
+  disabled,
+  countries,
+  name,
+  'aria-label': ariaLabel,
+  autoFocus,
+  placeholder,
+}: SipInputProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [phoneBookElement, setPhoneBookElement] =
+    React.useState<HTMLButtonElement | null>(null);
+  const isPhoneBookOpen = phoneBookElement != null;
+
+  const {
+    phoneBook: phoneBookOptions,
+    setValue,
+    setCountry,
+    ariaPhoneBookButtonLabel,
+    sipAddress,
+    setSipAddress,
+    focusNumberInput,
+    setFocusNumberInput,
+  } = usePhoneContext();
+
+  const showPhoneBook = phoneBookOptions.length > 0;
+
+  function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {
+    if (isPhoneBookOpen) {
+      setPhoneBookElement(null);
+    } else {
+      setPhoneBookElement(e.currentTarget);
+    }
+  }
+
+  function closePhoneBook() {
+    setPhoneBookElement(null);
+  }
+
+  function handlePhoneBookOptionSelect(value: string) {
+    closePhoneBook();
+    setFocusNumberInput(true);
+    setValue(value);
+  }
+
+  const options: CountryOption[] =
+    countries?.map(country => ({
+      value: country,
+      label: country,
+    })) || [];
+
+  function selectCountry(countryCode?: string) {
+    if (countryCode !== 'SIP') {
+      setSipAddress(sipAddress);
+      setFocusNumberInput(true);
+      setValue('');
+      setCountry((countryCode as CountryCode) || 'US');
+    }
+  }
+
+  function updateSipValue(value: string) {
+    setSipAddress(value);
+    setValue(`sip:${value}`);
+  }
+
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+
+    if (input == null || !focusNumberInput) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      if (input.value.length > 0) {
+        input.select();
+      } else {
+        input.focus();
+      }
+    });
+  }, [focusNumberInput]);
+
+  return (
+    <>
+      <InputGroup>
+        <PhoneNumberCountrySelectAdapter
+          value="SIP"
+          onChange={selectCountry}
+          options={options}
+          disabled={disabled}
+        />
+        <Input
+          ref={inputRef}
+          value={sipAddress}
+          disabled={disabled}
+          onChange={updateSipValue}
+          name={name}
+          aria-label={ariaLabel}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+        />
+        {showPhoneBook && (
+          <Button
+            disabled={disabled}
+            className={clsx('tcn-input-group-slot', 'tcn-phone-number-phone-book')}
+            aria-label={ariaPhoneBookButtonLabel}
+            onClick={togglePhoneBook}
+            size="md"
+          >
+            <NotebookIcon size="md" />
+          </Button>
+        )}
+      </InputGroup>
+      <SuggestionList
+        open={isPhoneBookOpen}
+        anchorElement={phoneBookElement}
+        onOptionSelect={handlePhoneBookOptionSelect}
+        onClose={closePhoneBook}
+        noSuggestionMessage="No phone numbers found"
+      >
+        {phoneBookOptions}
+      </SuggestionList>
+    </>
+  );
+}

package/src/inputs/select/select.tsx

@@ -130,7 +130,7 @@ export const Select = React.forwardRef(function Select(
     <>
       <Button
         ref={forkedRef}
-        className={clsx(className, 'tcn-select', styles.select)}
+        className={clsx(className, 'tcn-select', 'tcn-control', styles.select)}
         width="100%"
         {...props}
         hAlign="start"
@@ -144,19 +144,18 @@ export const Select = React.forwardRef(function Select(
           {selectedLabel}
         </span>
       </Button>
-      {isSuggestionsOpen && (
-        <SuggestionList
-          anchorElement={anchorElement}
-          onClose={handleClose}
-          value={''}
-          scrollToValue={value || ''}
-          trimCustomInput={trimCustomInput}
-          onOptionSelect={handleSelection}
-          noSuggestionMessage={noOptionMatchedMessage}
-        >
-          {children}
-        </SuggestionList>
-      )}
+      <SuggestionList
+        open={isSuggestionsOpen}
+        anchorElement={anchorElement}
+        onClose={handleClose}
+        value={''}
+        scrollToValue={value || ''}
+        trimCustomInput={trimCustomInput}
+        onOptionSelect={handleSelection}
+        noSuggestionMessage={noOptionMatchedMessage}
+      >
+        {children}
+      </SuggestionList>
     </>
   );
 });

package/src/inputs/suggestions/suggestion_list.module.css

@@ -6,6 +6,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     background-color: #fff;
+    overscroll-behavior: none;
   }
 
   :where(.input) {

package/src/inputs/suggestions/suggestion_list.stories.tsx

@@ -34,13 +34,14 @@ export const SuggestionList: Story = {
           ref={setAnchorElement}
           value={value}
           onChange={e => setValue(e.target.value)}
-          onFocus={() => setIsOpen(true)}
+          onClick={() => setIsOpen(true)}
           placeholder="Search fruits..."
           style={{ width: '100%', padding: '8px' }}
         />
-        {isOpen && anchorElement && (
+        {anchorElement && (
           <SuggestionListComponent
             value={value}
+            open={isOpen}
             anchorElement={anchorElement}
             onChange={setValue}
             onOptionSelect={selectedValue => {
@@ -95,13 +96,14 @@ export const WithCustomContent: Story = {
           ref={setAnchorElement}
           value={label}
           onChange={e => setLabel(e.target.value)}
-          onFocus={() => setIsOpen(true)}
+          onClick={() => setIsOpen(true)}
           placeholder="Search cities..."
           style={{ width: '100%', padding: '8px' }}
         />
-        {isOpen && anchorElement && (
+        {anchorElement && (
           <SuggestionListComponent
             value={label}
+            open={isOpen}
             anchorElement={anchorElement}
             onChange={setLabel}
             onOptionSelect={(_, label) => {
@@ -160,11 +162,11 @@ export const WithDisabledOptions: Story = {
           ref={setAnchorElement}
           value={value}
           onChange={e => setValue(e.target.value)}
-          onFocus={() => setIsOpen(true)}
+          onClick={() => setIsOpen(true)}
           placeholder="Search fruits..."
           style={{ width: '100%', padding: '8px' }}
         />
-        {isOpen && anchorElement && (
+        {anchorElement && (
           <SuggestionListComponent
             value={value}
             anchorElement={anchorElement}
@@ -173,6 +175,7 @@ export const WithDisabledOptions: Story = {
               setValue(selectedValue);
               setIsOpen(false);
             }}
+            open={isOpen}
             onClose={() => setIsOpen(false)}
           >
             <Option value="apple" label="Apple" keywords={['fruit', 'red', 'sweet']}>
@@ -333,13 +336,14 @@ export const PerformanceTest: Story = {
           ref={setAnchorElement}
           value={label}
           onChange={e => setLabel(e.target.value)}
-          onFocus={() => setIsOpen(true)}
+          onClick={() => setIsOpen(true)}
           placeholder="Search 1000 random items..."
           style={{ width: '100%', padding: '8px' }}
         />
-        {isOpen && anchorElement && (
+        {anchorElement && (
           <SuggestionListComponent
             value={label}
+            open={isOpen}
             anchorElement={anchorElement}
             onChange={setLabel}
             onOptionSelect={(_, label) => {

package/src/inputs/suggestions/suggestion_list.tsx

@@ -18,8 +18,10 @@ const BATCH_SIZE = 50;
 export interface SuggestionListProps
   extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
   value?: string;
+  initialSearchValue?: string;
   scrollToValue?: string;
   anchorElement: HTMLElement | null;
+  open?: boolean;
   children?: React.ReactNode;
   onChange?: (value: string) => void;
   onOptionSelect?: (
@@ -31,6 +33,7 @@ export interface SuggestionListProps
   noSuggestionMessage?: React.ReactNode;
   trimCustomInput?: boolean;
   haveValueAsOption?: boolean;
+  restoreFocus?: boolean;
   onClose?: (
     inputValue: string,
     cursorStartPosition: number | null,
@@ -40,8 +43,10 @@ export interface SuggestionListProps
 
 export function SuggestionList({
   value = '',
+  initialSearchValue: searchValue,
   scrollToValue,
   anchorElement,
+  open = false,
   children,
   onOptionSelect,
   noSuggestionMessage = '-- No Matches --',
@@ -51,6 +56,7 @@ export function SuggestionList({
   onKeyDown,
   trimCustomInput = false,
   haveValueAsOption = false,
+  restoreFocus = true,
   ...props
 }: SuggestionListProps) {
   // Extract valid Option components from children
@@ -70,6 +76,7 @@ export function SuggestionList({
   });
 
   const keyPressedDownRef = useRef('');
+  const KeyDownRegistered = useRef(false);
   const [maxResults, setMaxResults] = useState(MAX_RESULTS);
   const [focusedIndex, setFocusedIndex] = useState(selectedIndex);
   const [internalValue, setInternalValue] = useState(value);
@@ -82,6 +89,11 @@ export function SuggestionList({
   const [suggestionsHeight, setSuggestionsHeight] = useState<string | undefined>();
 
   function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (!KeyDownRegistered.current) {
+      return;
+    }
+    KeyDownRegistered.current = false;
+
     const key = event.key;
     const input = event.currentTarget;
 
@@ -156,7 +168,7 @@ export function SuggestionList({
   function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
     const key = event.key;
     keyPressedDownRef.current = key;
-
+    KeyDownRegistered.current = true;
     // We handle these key events on keydown to be responsive navigation.
     switch (key) {
       case 'ArrowDown': {
@@ -339,12 +351,16 @@ export function SuggestionList({
   useLayoutEffect(() => {
     const input = internalInputRef.current;
 
+    if (!open) {
+      return;
+    }
+
     if (input != null && input.value.length > 0) {
       input.select();
     } else if (input != null) {
       input.focus();
     }
-  }, []);
+  }, [open]);
 
   useLayoutEffect(() => {
     if (anchorElement != null) {
@@ -373,14 +389,19 @@ export function SuggestionList({
     setFocusedIndex(internalValue === '' ? selectedIndex : -1);
   }, [internalValue, selectedIndex]);
 
+  useLayoutEffect(() => {
+    setInternalValue(searchValue ?? '');
+  }, [searchValue]);
+
   return (
     <Popper
-      open
+      open={open}
       anchorElement={anchorElement}
       onClose={handleUseClose}
       verticalAnchor="top"
       verticalOrigin="top"
       verticalOffset={-4}
+      restoreFocus={restoreFocus}
     >
       <VStack
         minHeight={`calc(${suggestionsHeight}, 8px)`}

package/src/inputs/textarea/textarea.tsx

@@ -20,7 +20,7 @@ export const Textarea = React.forwardRef(function Textarea(
   return (
     <textarea
       style={{ width, height, ...style }}
-      className={clsx(className, styles.textarea, 'tcn-textarea')}
+      className={clsx(className, styles.textarea, 'tcn-textarea', 'tcn-control')}
       data-is-disabled={props.disabled || false}
       ref={ref}
       onChange={e => {

package/src/inputs/unit_input/unit_input.tsx

@@ -1,13 +1,13 @@
 import React, { useRef } from 'react';
 import { clsx } from 'clsx';
 import { useForkRef } from '../../utils/index.js';
-import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+import { type HStackProps } from '../../stacks/h_stack.js';
 import { Input } from '../input/input.js';
 import { Select } from '../select/select.js';
 import { OptionProps } from '../options/option.js';
 import styles from './unit_input.module.css';
 
-import { ZStack } from '../../stacks/z_stack.js';
+import { InputGroup } from '../input_group/input_group.js';
 
 function getDisplayValue(value: string) {
   return value
@@ -80,25 +80,25 @@ export const UnitInput = React.forwardRef(function UnitInput(
   }
 
   return (
-    <HStack
+    <InputGroup
       ref={ref}
       className={clsx(styles['unit-input'], 'tcn-unit-input')}
       height="auto"
       {...props}
     >
-      <ZStack width="flex">
-        <Input
-          className={clsx(styles['unit-input-number'], 'tcn-unit-input-number')}
-          ref={forkedInputRef}
-          onChange={valueHandler}
-          disabled={disabled}
-          style={{
-            borderEndEndRadius: 0,
-            borderStartEndRadius: 0,
-            textAlign: 'start',
-          }}
-        />
-      </ZStack>
+      <Input
+        width="flex"
+        className={clsx(styles['unit-input-number'], 'tcn-unit-input-number')}
+        ref={forkedInputRef}
+        onChange={valueHandler}
+        disabled={disabled}
+        style={{
+          borderEndEndRadius: 0,
+          borderStartEndRadius: 0,
+          textAlign: 'start',
+        }}
+      />
+
       <Select
         className={clsx(styles['unit-input-select'], 'tcn-unit-input-select')}
         ref={unitRef}
@@ -110,6 +110,6 @@ export const UnitInput = React.forwardRef(function UnitInput(
       >
         {children}
       </Select>
-    </HStack>
+    </InputGroup>
   );
 });

package/src/overlay/frame/frame.module.css

@@ -1,7 +1,5 @@
 @layer tcn-system {
-  :where(.frame) {
-    padding: 0;
-    border: none;
-    background: none;
+  :where(.frame-dialog) {
+    overflow: hidden;
   }
 }

package/src/overlay/frame/frame.stories.tsx

@@ -1,9 +1,9 @@
+import { Header, Scaffold } from '../../layouts/index.js';
 import { ZStack } from '../../stacks/z_stack.js';
-import { Frame, type FrameOwnProps } from './frame.js';
-import { DragHandle } from '../../utils/dnd/handle.js';
-import { Title } from '../../typography/title/title.js';
 import { BodyText } from '../../typography/index.js';
-import { Header } from '../../layouts/index.js';
+import { Title } from '../../typography/title/title.js';
+import { DragHandle } from '../../utils/dnd/handle.js';
+import { Frame, type FrameOwnProps } from './frame.js';
 import styles from './frame_stories.module.css';
 export default {
   title: 'Overlays/Floating/Frame',
@@ -14,6 +14,7 @@ export default {
     isOpen: true,
     draggable: true,
     veil: false,
+    resizable: true,
   },
 };
 
@@ -26,14 +27,16 @@ export const FrameStory = (args: Omit<FrameOwnProps, 'children'>) => {
         className={styles['sb-frame-container']}
         {...args}
       >
-        <Header className={styles['sb-frame-header']}>
-          <Title> This is a frame</Title>
-        </Header>
-        <DragHandle>
+        <Scaffold>
           <Header className={styles['sb-frame-header']}>
-            <BodyText> You can drag here.</BodyText>
+            <Title> This is a frame</Title>
           </Header>
-        </DragHandle>
+          <DragHandle>
+            <Header className={styles['sb-frame-header']}>
+              <BodyText> You can drag here.</BodyText>
+            </Header>
+          </DragHandle>
+        </Scaffold>
       </Frame>
     </ZStack>
   );

package/src/overlay/frame/frame.tsx

@@ -1,50 +1,158 @@
-import React from 'react';
-import { ZStack, type ZStackProps } from '../../stacks/index.js';
+import { clsx } from 'clsx';
+import React, { useCallback } from 'react';
+import { flushSync } from 'react-dom';
+import { Box, ZStack, type BoxProps } from '../../stacks/index.js';
+import { useDragContainer } from '../../utils/dnd/context.js';
 import { Draggable } from '../../utils/dnd/draggable/draggable.js';
 import { Portal } from '../portal/portal.js';
 
 // Styles
-import { clsx } from 'clsx';
 import styles from './frame.module.css';
-
 export interface FrameOwnProps {
   isOpen?: boolean;
-  children?: React.ReactNode;
   draggable?: boolean;
   veil?: boolean;
+  resizable?: boolean;
 }
 
-export type FrameProps = ZStackProps & FrameOwnProps;
+export type FrameProps = Omit<
+  BoxProps,
+  | 'enableResizeOnLeft'
+  | 'enableResizeOnRight'
+  | 'enableResizeOnTop'
+  | 'enableResizeOnBottom'
+> &
+  FrameOwnProps;
 
-export const Frame = React.forwardRef<HTMLDialogElement, FrameProps>(function Frame(
+export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
   {
     children,
     isOpen = false,
     draggable = true,
     veil = false,
+    resizable = true,
     className,
     ...rest
   }: FrameProps,
   ref
 ) {
-  if (!isOpen) {
-    return null;
-  }
-
+  if (!isOpen) return null;
   return (
     <Portal>
       <ZStack width="100%" height="100%" data-is-veil={veil} className="tcn-frame-veil">
         <Draggable draggable={draggable}>
-          <ZStack
-            as="dialog"
+          <FrameDialog
+            className={className}
             ref={ref}
-            className={clsx(styles['frame'], 'tcn-frame', className)}
+            enableResizeOnLeft={resizable}
+            enableResizeOnRight={resizable}
+            enableResizeOnTop={resizable}
+            enableResizeOnBottom={resizable}
+            draggable={draggable}
             {...rest}
           >
             {children}
-          </ZStack>
+          </FrameDialog>
         </Draggable>
       </ZStack>
     </Portal>
   );
 });
+interface FrameDialogProps extends BoxProps {}
+
+export const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(
+  function FrameDialog(
+    {
+      as = 'div',
+      role = 'dialog',
+      children,
+      className,
+      draggable,
+      onWidthResize,
+      onHeightResize,
+      ...rest
+    }: FrameDialogProps,
+    ref: React.Ref<HTMLElement>
+  ) {
+    const drag = useDragContainer();
+
+    const handleWidthResize = React.useCallback(
+      (
+        width: number,
+        origin: 'left' | 'right',
+        totalDelta: number,
+        currentDelta: number
+      ) => {
+        if (!draggable) {
+          return;
+        }
+        // TODO: add clamp logic
+        if (origin === 'right') {
+          flushSync(() => {
+            drag.setPosition(prev => ({
+              x: prev.x + currentDelta / 2,
+              y: prev.y,
+            }));
+          });
+        }
+        if (origin === 'left') {
+          flushSync(() => {
+            drag.setPosition(prev => ({
+              x: prev.x - currentDelta / 2,
+              y: prev.y,
+            }));
+          });
+        }
+
+        onWidthResize?.(width, origin, totalDelta, currentDelta);
+      },
+      [onWidthResize, drag, draggable]
+    );
+
+    const handleHeightResize = useCallback(
+      (
+        height: number,
+        origin: 'top' | 'bottom',
+        totalDelta: number,
+        currentDelta: number
+      ) => {
+        if (!draggable) {
+          return;
+        }
+        // TODO: add clamp logic
+        if (origin === 'bottom') {
+          flushSync(() => {
+            drag.setPosition(prev => ({
+              x: prev.x,
+              y: prev.y + currentDelta / 2,
+            }));
+          });
+        }
+        if (origin === 'top') {
+          flushSync(() => {
+            drag.setPosition(prev => ({
+              x: prev.x,
+              y: prev.y - currentDelta / 2,
+            }));
+          });
+        }
+        onHeightResize?.(height, origin, totalDelta, currentDelta);
+      },
+      [onHeightResize, drag, draggable]
+    );
+
+    return (
+      <Box
+        className={clsx(styles['frame-dialog'], 'tcn-frame-dialog', className)}
+        ref={ref}
+        onWidthResize={handleWidthResize}
+        onHeightResize={handleHeightResize}
+        as={as}
+        role={role}
+        {...rest}
+      >
+        {children}
+      </Box>
+    );
+  }
+);

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

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