@tcn/ui 0.11.0 → 0.12.1

package/src/feedback/progress/progress.tsx

@@ -0,0 +1,39 @@
+import React, { HTMLAttributes } from 'react';
+import { BodyText } from '../../typography/index.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { VStack } from '../../stacks/v_stack.js';
+import clsx from 'clsx';
+
+import styles from './progress_bar.module.css';
+import { ProgressBar } from './progress_bar.js';
+
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  message: string;
+  value: number;
+}
+
+export const Progress = React.forwardRef(function Progress(
+  { message, value, ...props }: ProgressProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const progressPercent = `${(value * 100).toFixed(0)}%`;
+
+  return (
+    <VStack
+      ref={ref}
+      className={clsx(styles['progress-container'], 'tcn-progress-container')}
+      {...props}
+    >
+      <HStack height="auto" vAlign="end">
+        <BodyText>{message}</BodyText>
+        <Spacer />
+        <Spacer width="8px" />
+        <BodyText size="sm" style={{ flexShrink: 0 }}>
+          {progressPercent}
+        </BodyText>
+      </HStack>
+      <ProgressBar value={value} />
+    </VStack>
+  );
+});

package/src/feedback/progress/progress_bar.module.css

@@ -1,4 +1,4 @@
-@system {
+@layer tcn-system {
   :root {
     --progress-bar-color: var(--accent-color); /* Default color for progress bar */
     --progress-bar-background: #dadada;
@@ -6,6 +6,9 @@
 
   :where(.progress-bar-container) {
     width: 100%;
+    height: 8px;
+    border-radius: 2px;
+    overflow: hidden;
   }
 
   :where(.progress-bar-background) {
@@ -21,7 +24,6 @@
     appearance: none;
     background: transparent;
     user-select: none;
-    /* box-shadow: 0 1px 0 0 rgba(222, 222, 222, 0.7), inset 0 1px 0 0 rgba(0, 0, 0, 0.3); */
     overflow: hidden;
   }
 
@@ -32,30 +34,4 @@
     background-color: var(--progress-bar-color);
     transition: width 200ms ease-out;
   }
-
-  :where(.progress-bar-fill::before) {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: -20px;
-    height: 100%;
-    width: calc(100% + 40px);
-    background-size: 20px 20px;
-    animation: moveStripes 500ms linear infinite;
-  }
-
-  :where(.progress-bar-fill[data-finished="true"]::before) {
-    animation: none;
-    background-image: none;
-  }
-
-  /* Animation for moving stripes */
-  @keyframes moveStripes {
-    0% {
-      transform: translateX(0);
-    }
-    100% {
-      transform: translateX(20px);
-    }
-  }
 }

package/src/feedback/progress/progress_bar.stories.tsx

@@ -19,7 +19,7 @@ function Base(props: Partial<ProgressBarProps>) {
     return () => window.clearTimeout(timer);
   }, [value]);
 
-  return <Component message="Progress..." {...props} value={value} />;
+  return <Component {...props} value={value} />;
 }
 
 export function ProgressBar() {

package/src/feedback/progress/progress_bar.tsx

@@ -1,48 +1,36 @@
 import React, { HTMLAttributes } from 'react';
-import { BodyText } from '../../typography/index.js';
-import { HStack } from '../../stacks/h_stack.js';
-import { Spacer } from '../../stacks/spacer.js';
-import { VStack } from '../../stacks/v_stack.js';
 import { ZStack } from '../../stacks/z_stack.js';
 import clsx from 'clsx';
 
 import styles from './progress_bar.module.css';
 
 export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
-  message: string;
   value: number;
 }
 
 export const ProgressBar = React.forwardRef(function ProgressBar(
-  { message, value, ...props }: ProgressBarProps,
+  { value, ...props }: ProgressBarProps,
   ref: React.Ref<HTMLDivElement>
 ) {
   const progressPercent = `${(value * 100).toFixed(0)}%`;
   const styleVariables: any = { '--progress-percentage': progressPercent };
 
   return (
-    <VStack
+    <ZStack
       ref={ref}
-      className={clsx(styles['progress-bar-container'], 'tcn-progress-bar')}
+      hAlign="start"
+      className={clsx(styles['progress-bar-container'], 'tcn-progress-bar-container')}
       {...props}
     >
-      <HStack height="auto" vAlign="end">
-        <BodyText>{message}</BodyText>
-        <Spacer />
-        <Spacer width="8px" />
-        <BodyText size="sm" style={{ flexShrink: 0 }}>
-          {progressPercent}
-        </BodyText>
-      </HStack>
-      <ZStack height="8px" hAlign="start">
-        <div className={styles['progress-bar-background']}></div>
-        <div
-          data-finished={progressPercent === '100%'}
-          style={styleVariables}
-          className={styles['progress-bar-fill']}
-        />
-        <div className={styles['progress-bar']}></div>
-      </ZStack>
-    </VStack>
+      <div
+        className={clsx(styles['progress-bar-background'], 'tcn-progress-bar-background')}
+      ></div>
+      <div
+        data-finished={progressPercent === '100%'}
+        style={styleVariables}
+        className={clsx(styles['progress-bar-fill'], 'tcn-progress-bar-fill')}
+      />
+      <div className={clsx(styles['progress-bar'], 'tcn-progress-bar')}></div>
+    </ZStack>
   );
 });

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

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Option } from '../options/option.js';
+import React, { useEffect, 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';
@@ -123,6 +123,27 @@ export function CustomWidth(_: Omit<SelectProps, 'children'>) {
   );
 }
 
+export function DelayedOptions() {
+  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
+        </Option>,
+      ]);
+    }, 4000);
+  }, []);
+
+  return (
+    <SelectComponent value={value} onChange={setValue} width="100px">
+      {options}
+    </SelectComponent>
+  );
+}
+
 export function CustomOptions() {
   const [value, setValue] = useState<string>('');
 

package/src/inputs/suggestions/suggestion_list.tsx

@@ -60,9 +60,13 @@ export function SuggestionList({
   ...props
 }: SuggestionListProps) {
   // Extract valid Option components from children
-  const suggestions = Children.toArray(children).filter(
-    (child): child is React.ReactElement<OptionProps> =>
-      isValidElement(child) && child.type === Option
+  const suggestions = React.useMemo(
+    () =>
+      Children.toArray(children).filter(
+        (child): child is React.ReactElement<OptionProps> =>
+          isValidElement(child) && child.type === Option
+      ),
+    [children]
   );
 
   const [selectedIndex, setSelectedIndex] = useState(() => {
@@ -83,7 +87,7 @@ export function SuggestionList({
   const internalInputRef = useRef<HTMLInputElement | null>(null);
   const [totalMatchedLength, setTotalMatchedLength] = useState(suggestions.length);
   const [matchedOptions, setMatchedOptions] = useState<React.ReactElement<OptionProps>[]>(
-    () => getMatchedOptions(value, MAX_RESULTS)
+    () => []
   );
   const [suggestionsWidth, setSuggestionsWidth] = useState<string | undefined>();
   const [suggestionsHeight, setSuggestionsHeight] = useState<string | undefined>();
@@ -278,42 +282,47 @@ export function SuggestionList({
     onKeyDown && onKeyDown(event);
   }
 
-  function getMatchedOptions(value: string, maxResults: number) {
-    const results = suggestions.filter(option => {
-      const props = option.props;
-      const label = String(props.label).toLocaleLowerCase();
-      const keywords = props.keywords?.map(k => k.toLocaleLowerCase()) || [];
-      const optionValue = String(props.value).toLocaleLowerCase();
-      const searchValue = value.toLocaleLowerCase();
-      const obfuscate = props.obfuscate ?? false;
-
-      // Obfuscated options can only be searched by label or keywords, not by value
-      if (obfuscate) {
-        return label.includes(searchValue) || keywords.some(k => k.includes(searchValue));
-      }
+  const getMatchedOptions = React.useCallback(
+    function getMatchedOptions(value: string, maxResults: number) {
+      const results = suggestions.filter(option => {
+        const props = option.props;
+        const label = String(props.label).toLocaleLowerCase();
+        const keywords = props.keywords?.map(k => k.toLocaleLowerCase()) || [];
+        const optionValue = String(props.value).toLocaleLowerCase();
+        const searchValue = value.toLocaleLowerCase();
+        const obfuscate = props.obfuscate ?? false;
+
+        // Obfuscated options can only be searched by label or keywords, not by value
+        if (obfuscate) {
+          return (
+            label.includes(searchValue) || keywords.some(k => k.includes(searchValue))
+          );
+        }
 
-      return (
-        label.includes(searchValue) ||
-        keywords.some(k => k.includes(searchValue)) ||
-        optionValue.includes(searchValue)
-      );
-    });
-
-    if (
-      haveValueAsOption &&
-      value.trim().length > 0 &&
-      !results.some(r => r.props.value === value)
-    ) {
-      results.unshift(
-        <Option key="value" value={value} label={value} keywords={[value]}>
-          {value}
-        </Option>
-      );
-    }
+        return (
+          label.includes(searchValue) ||
+          keywords.some(k => k.includes(searchValue)) ||
+          optionValue.includes(searchValue)
+        );
+      });
+
+      if (
+        haveValueAsOption &&
+        value.trim().length > 0 &&
+        !results.some(r => r.props.value === value)
+      ) {
+        results.unshift(
+          <Option key="value" value={value} label={value} keywords={[value]}>
+            {value}
+          </Option>
+        );
+      }
 
-    setTotalMatchedLength(results.length);
-    return results.slice(0, maxResults);
-  }
+      setTotalMatchedLength(results.length);
+      return results.slice(0, maxResults);
+    },
+    [suggestions, haveValueAsOption]
+  );
 
   function focusInput() {
     const input = internalInputRef.current;
@@ -393,6 +402,11 @@ export function SuggestionList({
     setInternalValue(searchValue ?? '');
   }, [searchValue]);
 
+  useLayoutEffect(() => {
+    const newMatches = getMatchedOptions(value, MAX_RESULTS);
+    setMatchedOptions(newMatches);
+  }, [value, getMatchedOptions]);
+
   return (
     <Popper
       open={open}
@@ -433,7 +447,12 @@ export function SuggestionList({
           ))}
           {totalMatchedLength > matchedOptions.length && (
             <>
-              <Button marginBlock="8px" hierarchy="tertiary" onClick={handleShowMore}>
+              <Button
+                key="show-more"
+                marginBlock="8px"
+                hierarchy="tertiary"
+                onClick={handleShowMore}
+              >
                 Show More
               </Button>
             </>

package/src/overlay/frame/frame.tsx

@@ -81,12 +81,11 @@ export const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(
         width: number,
         origin: 'left' | 'right',
         totalDelta: number,
-        currentDelta: number
+        currentDelta: number,
+        atLimit: boolean
       ) => {
-        if (!draggable) {
-          return;
-        }
-        // TODO: add clamp logic
+        if (!draggable) return;
+        if (atLimit) return;
         if (origin === 'right') {
           flushSync(() => {
             drag.setPosition(prev => ({
@@ -104,7 +103,7 @@ export const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(
           });
         }
 
-        onWidthResize?.(width, origin, totalDelta, currentDelta);
+        onWidthResize?.(width, origin, totalDelta, currentDelta, atLimit);
       },
       [onWidthResize, drag, draggable]
     );
@@ -114,12 +113,11 @@ export const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(
         height: number,
         origin: 'top' | 'bottom',
         totalDelta: number,
-        currentDelta: number
+        currentDelta: number,
+        atLimit: boolean
       ) => {
-        if (!draggable) {
-          return;
-        }
-        // TODO: add clamp logic
+        if (!draggable) return;
+        if (atLimit) return;
         if (origin === 'bottom') {
           flushSync(() => {
             drag.setPosition(prev => ({
@@ -136,7 +134,7 @@ export const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(
             }));
           });
         }
-        onHeightResize?.(height, origin, totalDelta, currentDelta);
+        onHeightResize?.(height, origin, totalDelta, currentDelta, atLimit);
       },
       [onHeightResize, drag, draggable]
     );

package/src/stacks/box/bottom_resize_handle.tsx

@@ -1,21 +1,10 @@
 import { clsx } from 'clsx';
 import React from 'react';
 import styles from './bottom_resize_handle.module.css';
-import type { HandleProps } from './handle_props.js';
 import { createVerticalResizeHandler } from './resize_handlers.js';
+import type { VerticalResizeHandleProps } from './types.js';
 
-export interface BottomResizeHandleProps {
-  targetRef: React.MutableRefObject<HTMLElement | null>;
-  handleProps?: HandleProps;
-  onHeightResize?: (
-    height: number,
-    origin: 'top' | 'bottom',
-    totalDelta: number,
-    currentDelta: number
-  ) => void;
-  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
-}
-
+export type BottomResizeHandleProps = VerticalResizeHandleProps;
 export function BottomResizeHandle({
   targetRef,
   handleProps,

package/src/stacks/box/box.tsx

@@ -49,13 +49,15 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttri
     width: number,
     origin: 'left' | 'right',
     totalDelta: number,
-    currentDelta: number
+    currentDelta: number,
+    atLimit: boolean
   ) => void;
   onHeightResize?: (
     height: number,
     origin: 'top' | 'bottom',
     totalDelta: number,
-    currentDelta: number
+    currentDelta: number,
+    atLimit: boolean
   ) => void;
   onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
   onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;

package/src/stacks/box/end_resize_handle.tsx

@@ -1,20 +1,10 @@
 import { clsx } from 'clsx';
-import React from 'react';
 import styles from './end_resize_handle.module.css';
-import { HandleProps } from './handle_props.js';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
+import type { HorizontalResizeHandleProps } from './types.js';
+
+export type EndResizeHandleProps = HorizontalResizeHandleProps;
 
-export interface EndResizeHandleProps {
-  targetRef: React.MutableRefObject<HTMLElement | null>;
-  handleProps?: HandleProps;
-  onWidthResize?: (
-    width: number,
-    origin: 'left' | 'right',
-    totalDelta: number,
-    currentDelta: number
-  ) => void;
-  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
-}
 export function EndResizeHandle({
   targetRef,
   handleProps,

package/src/stacks/box/left_resize_handle.tsx

@@ -1,20 +1,10 @@
 import { clsx } from 'clsx';
-import React from 'react';
-import { HandleProps } from './handle_props.js';
 import styles from './left_resize_handle.module.css';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
+import type { HorizontalResizeHandleProps } from './types.js';
+
+export type LeftResizeHandleProps = HorizontalResizeHandleProps;
 
-export interface LeftResizeHandleProps {
-  targetRef: React.MutableRefObject<HTMLElement | null>;
-  handleProps?: HandleProps;
-  onWidthResize?: (
-    width: number,
-    origin: 'left' | 'right',
-    totalDelta: number,
-    currentDelta: number
-  ) => void;
-  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
-}
 export function LeftResizeHandle({
   targetRef,
   handleProps,

package/src/stacks/box/resize_handlers.ts

@@ -1,3 +1,10 @@
+import {
+  OnWidthResize,
+  type HeightResizeOrigin,
+  type OnHeightResize,
+  type WidthResizeOrigin,
+} from './types';
+
 function createVeil() {
   const veil = window.document.createElement('div');
   veil.style.position = 'absolute';
@@ -9,14 +16,9 @@ function createVeil() {
 
 export function createHorizontalResizeHandler(
   targetRef: React.MutableRefObject<HTMLElement | null>,
-  onWidthResize?: (
-    width: number,
-    origin: 'left' | 'right',
-    totalDelta: number,
-    currentDelta: number
-  ) => void,
-  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void,
-  origin: 'left' | 'right' = 'right',
+  onWidthResize?: OnWidthResize,
+  onWidthResizeEnd?: (width: number, origin: WidthResizeOrigin) => void,
+  origin: WidthResizeOrigin = 'right',
   invert = false,
   disableDirection = false
 ) {
@@ -40,6 +42,7 @@ export function createHorizontalResizeHandler(
     let width = startRect.width;
 
     const drag = (event: MouseEvent) => {
+      const beforeWidth = box.getBoundingClientRect().width;
       const totalDelta = direction * (event.clientX - startX);
       const newWidth = startRect.width + totalDelta;
       const currentDelta = newWidth - width;
@@ -47,7 +50,10 @@ export function createHorizontalResizeHandler(
       width = newWidth;
 
       box.style.width = `${newWidth}px`;
-      onWidthResize?.(newWidth, origin, totalDelta, currentDelta);
+
+      const afterWidth = box.getBoundingClientRect().width;
+      const atLimit = afterWidth === beforeWidth;
+      onWidthResize?.(newWidth, origin, totalDelta, currentDelta, atLimit);
       event.stopPropagation();
       event.preventDefault();
     };
@@ -80,15 +86,10 @@ export function createHorizontalResizeHandler(
 
 export function createVerticalResizeHandler(
   targetRef: React.MutableRefObject<HTMLElement | null>,
-  onHeightResize?: (
-    height: number,
-    origin: 'top' | 'bottom',
-    totalDelta: number,
-    currentDelta: number
-  ) => void,
-  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void,
+  onHeightResize?: OnHeightResize,
+  onHeightResizeEnd?: (height: number, origin: HeightResizeOrigin) => void,
   invert = false,
-  origin: 'top' | 'bottom' = 'bottom'
+  origin: HeightResizeOrigin = 'bottom'
 ) {
   const direction = invert ? -1 : 1;
   return function startVerticalResize(event: React.MouseEvent) {
@@ -106,12 +107,15 @@ export function createVerticalResizeHandler(
     let height = startRect.height;
 
     const drag = (event: MouseEvent) => {
+      const beforeHeight = box.getBoundingClientRect().height;
       const totalDelta = direction * (event.clientY - startY);
       const newHeight = startRect.height + totalDelta;
       const currentDelta = newHeight - height;
       height = newHeight;
       box.style.height = `${newHeight}px`;
-      onHeightResize?.(newHeight, origin, totalDelta, currentDelta);
+      const afterHeight = box.getBoundingClientRect().height;
+      const atLimit = afterHeight === beforeHeight;
+      onHeightResize?.(newHeight, origin, totalDelta, currentDelta, atLimit);
       event.stopPropagation();
       event.preventDefault();
     };

package/src/stacks/box/right_resize_handle.tsx

@@ -1,20 +1,9 @@
 import { clsx } from 'clsx';
-import React from 'react';
-import { HandleProps } from './handle_props.js';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
 import styles from './right_resize_handle.module.css';
+import type { HorizontalResizeHandleProps } from './types.js';
 
-export interface RightResizeHandleProps {
-  targetRef: React.MutableRefObject<HTMLElement | null>;
-  handleProps?: HandleProps;
-  onWidthResize?: (
-    width: number,
-    origin: 'left' | 'right',
-    totalDelta: number,
-    currentDelta: number
-  ) => void;
-  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
-}
+export type RightResizeHandleProps = HorizontalResizeHandleProps;
 export function RightResizeHandle({
   targetRef,
   handleProps,

package/src/stacks/box/start_resize_handle.tsx

@@ -1,20 +1,10 @@
 import { clsx } from 'clsx';
-import React from 'react';
-import { HandleProps } from './handle_props.js';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
 import styles from './start_resize_handle.module.css';
+import type { HorizontalResizeHandleProps } from './types.js';
+
+export type StartResizeHandleProps = HorizontalResizeHandleProps;
 
-export interface StartResizeHandleProps {
-  targetRef: React.MutableRefObject<HTMLElement | null>;
-  handleProps?: HandleProps;
-  onWidthResize?: (
-    width: number,
-    origin: 'left' | 'right',
-    totalDelta: number,
-    currentDelta: number
-  ) => void;
-  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
-}
 export function StartResizeHandle({
   targetRef,
   handleProps,

package/src/stacks/box/top_resize_handle.tsx

@@ -1,20 +1,11 @@
 import { clsx } from 'clsx';
 import React from 'react';
-import { HandleProps } from './handle_props.js';
 import { createVerticalResizeHandler } from './resize_handlers.js';
 import styles from './top_resize_handle.module.css';
+import type { VerticalResizeHandleProps } from './types.js';
+
+export type TopResizeHandleProps = VerticalResizeHandleProps;
 
-export interface TopResizeHandleProps {
-  targetRef: React.MutableRefObject<HTMLElement | null>;
-  handleProps?: HandleProps;
-  onHeightResize?: (
-    height: number,
-    origin: 'top' | 'bottom',
-    totalDelta: number,
-    currentDelta: number
-  ) => void;
-  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
-}
 export function TopResizeHandle({
   targetRef,
   handleProps,