@tcn/ui 0.9.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/layouts/__stories__/composed.stories.tsx

@@ -3,8 +3,6 @@ import { VStack } from '../../stacks/v_stack.js';
 import { SBNestedScaffold, SBContent, SBNestedRail } from './utils.js';
 
 import styles from './composed_stories.module.css';
-import clsx from 'clsx';
-import { Body } from '../body/body.js';
 
 const meta: Meta = {
   title: 'Layouts/Composed',
@@ -45,59 +43,6 @@ export const Baseline: Story = {
   ),
 };
 
-export const ScaffoldWithBody: Story = {
-  render: () => (
-    <SBContainer>
-      <SBNestedScaffold depth={1}>
-        <SBContent />
-        <SBContent />
-        <SBContent />
-      </SBNestedScaffold>
-    </SBContainer>
-  ),
-};
-
-export const ScaffoldWithMain: Story = {
-  render: () => (
-    <SBContainer>
-      <SBNestedScaffold depth={1}>
-        <SBNestedRail depth={2} side={false} utilityStrip={false} scaffold={false}>
-          <SBContent />
-          <SBContent />
-          <SBContent />
-        </SBNestedRail>
-      </SBNestedScaffold>
-    </SBContainer>
-  ),
-};
-
-export const RailWithMain: Story = {
-  render: () => (
-    <SBContainer>
-      <SBNestedRail depth={1} scaffold={false}>
-        <SBContent />
-        <SBContent />
-        <SBContent />
-      </SBNestedRail>
-    </SBContainer>
-  ),
-};
-
-export const RailWithBody: Story = {
-  render: () => (
-    <SBContainer>
-      <SBNestedRail depth={1} scaffold={false}>
-        <Body className={clsx(styles.body, styles.secondary)}>
-          Body
-          <SBContent />
-          <SBContent />
-          <SBContent />
-        </Body>
-      </SBNestedRail>
-    </SBContainer>
-  ),
-};
-
 export const WithColumns: Story = {
   render: () => (
     <SBContainer>

package/src/layouts/__stories__/rail.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { LayoutStoryDecorator } from './utils/layout_theme_provider.js';
+import { SBLayoutContent } from './utils/content.js';
+import { Rail } from '../rail/rail.js';
+import { Side } from '../rail/side/side.js';
+import { UtilityStrip } from '../rail/utility_strip/utility_strip.js';
+import { Title } from '../../typography/index.js';
+import { HBody } from '../body/h_body.js';
+import { VBody } from '../body/v_body.js';
+import { Body } from '../body/body.js';
+
+const meta: Meta<typeof Rail> = {
+  title: 'Layouts/Rail',
+  component: Rail,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that lays out content in a horizontal hierarchy.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Rail>;
+
+export const Baseline: Story = {
+  render: () => (
+    <LayoutStoryDecorator>
+      <Rail>
+        <UtilityStrip>
+          <Title>Utility Strip</Title>
+        </UtilityStrip>
+        <Body>Body fills available space </Body>
+        <Side width="200px">Side</Side>
+      </Rail>
+    </LayoutStoryDecorator>
+  ),
+};
+
+export const HorizontalContent: Story = {
+  render: () => (
+    <LayoutStoryDecorator>
+      <Rail>
+        <UtilityStrip>
+          <Title>Utility Strip</Title>
+        </UtilityStrip>
+        <HBody>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </HBody>
+        <Side width="200px">Side</Side>
+      </Rail>
+    </LayoutStoryDecorator>
+  ),
+};
+
+export const VerticalContent: Story = {
+  render: () => (
+    <LayoutStoryDecorator>
+      <Rail>
+        <UtilityStrip>
+          <Title>Utility Strip</Title>
+        </UtilityStrip>
+        <VBody>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </VBody>
+        <Side width="200px">Side</Side>
+      </Rail>
+    </LayoutStoryDecorator>
+  ),
+};

package/src/layouts/__stories__/scaffold.stories.tsx

@@ -0,0 +1,90 @@
+import { Scaffold } from '../scaffold/scaffold.js';
+import { Header } from '../header/header.js';
+import { UtilityBar } from '../utility_bar/utility_bar.js';
+import { VBody } from '../body/v_body.js';
+import { Footer } from '../footer/footer.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { LayoutStoryDecorator } from './utils/layout_theme_provider.js';
+import { SBLayoutContent } from './utils/content.js';
+import { HBody } from '../body/h_body.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { Body } from '../body/body.js';
+
+const meta: Meta<typeof Scaffold> = {
+  title: 'Layouts/Scaffold',
+  component: Scaffold,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A scaffold component that lays out content in a vertical hierarchy.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Scaffold>;
+
+export const Baseline: Story = {
+  render: () => (
+    <LayoutStoryDecorator>
+      <Scaffold>
+        <Header>Header</Header>
+        <UtilityBar>Utility Bar</UtilityBar>
+        <Body>Body fills available space</Body>
+        <Footer>Footer</Footer>
+      </Scaffold>
+    </LayoutStoryDecorator>
+  ),
+};
+
+export const VerticalContent: Story = {
+  args: {
+    height: '100vh',
+  },
+  render: () => (
+    <LayoutStoryDecorator>
+      <Scaffold height="100vh">
+        <Header>Header</Header>
+        <UtilityBar>Utility Bar</UtilityBar>
+        <VBody>
+          <p>(V)Body</p>
+          <p>Fills available space</p>
+          <p>Scrolls vertically</p>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </VBody>
+        <Footer>Footer</Footer>
+      </Scaffold>
+    </LayoutStoryDecorator>
+  ),
+};
+
+export const HorizontalContent: Story = {
+  args: {
+    height: '100vh',
+  },
+  render: () => (
+    <LayoutStoryDecorator>
+      <Scaffold height="100vh">
+        <Header>Header</Header>
+        <UtilityBar>Utility Bar</UtilityBar>
+        <HBody>
+          <VStack minWidth="200px" hAlign="center">
+            <p>(H)Body</p>
+            <p>Fills available space</p>
+            <p>Scrolls horizontally</p>
+          </VStack>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </HBody>
+        <Footer>Footer</Footer>
+      </Scaffold>
+    </LayoutStoryDecorator>
+  ),
+};