@tcn/ui 0.11.0 → 0.12.0

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,

package/src/stacks/box/types.ts

@@ -0,0 +1,44 @@
+import type { HandleProps } from './handle_props.js';
+
+export type WidthResizeOrigin = 'left' | 'right';
+export type HeightResizeOrigin = 'top' | 'bottom';
+
+export type OnWidthResize = (
+  // Newly calculated width
+  width: number,
+  // Origin of the resize - left or right of the box
+  origin: WidthResizeOrigin,
+  // Total delta of the resize (the sum of all deltas before end event)
+  totalDelta: number,
+  // Current delta of the resize (the delta of the current event)
+  currentDelta: number,
+  // Whether the resize is at the limit of the box, this includes min-content, max-content, and min-width/height
+  atLimit: boolean
+) => void;
+
+export type OnHeightResize = (
+  // Newly calculated height
+  height: number,
+  // Origin of the resize - top or bottom of the box
+  origin: HeightResizeOrigin,
+  // Total delta of the resize (the sum of all deltas before end event)
+  totalDelta: number,
+  // Current delta of the resize (the delta of the current event)
+  currentDelta: number,
+  // Whether the resize is at the limit of the box, this includes min-content, max-content, and min-width/height
+  atLimit: boolean
+) => void;
+
+export interface HorizontalResizeHandleProps {
+  targetRef: React.MutableRefObject<HTMLElement | null>;
+  handleProps?: HandleProps;
+  onWidthResize?: OnWidthResize;
+  onWidthResizeEnd?: (width: number, origin: WidthResizeOrigin) => void;
+}
+
+export interface VerticalResizeHandleProps {
+  targetRef: React.MutableRefObject<HTMLElement | null>;
+  handleProps?: HandleProps;
+  onHeightResize?: OnHeightResize;
+  onHeightResizeEnd?: (height: number, origin: HeightResizeOrigin) => void;
+}

package/src/stacks/h_collapsible_box.tsx

@@ -32,9 +32,9 @@ export const HCollapsibleBox = React.forwardRef(function CollapsibleBox(
       data-is-collapsed={!open}
       data-collapse-orientation="horizontal"
       data-is-resizing={resizing}
-      onWidthResize={(width, origin, totalDelta, currentDelta) => {
+      onWidthResize={(...args) => {
         setIsResizing(true);
-        props.onWidthResize?.(width, origin, totalDelta, currentDelta);
+        props.onWidthResize?.(...args);
       }}
       onWidthResizeEnd={(width, origin) => {
         setIsResizing(false);

package/src/stacks/index.ts

@@ -1,4 +1,5 @@
 export * from './box/box.js';
+export * from './box/types.js';
 export * from './types/alignment.js';
 export * from './types/as.js';
 export * from './types/common.js';

package/src/stacks/v_collapsible_box.tsx

@@ -32,9 +32,9 @@ export const VCollapsibleBox = React.forwardRef(function CollapsibleBox(
       data-is-collapsed={!open}
       data-collapse-orientation="vertical"
       data-is-resizing={resizing}
-      onHeightResize={(height, origin, totalDelta, currentDelta) => {
+      onHeightResize={(...args) => {
         setIsResizing(true);
-        props.onHeightResize?.(height, origin, totalDelta, currentDelta);
+        props.onHeightResize?.(...args);
       }}
       onHeightResizeEnd={(height, origin) => {
         setIsResizing(false);

package/src/surfaces/modal/modal.tsx

@@ -1,12 +1,12 @@
 import { clsx } from 'clsx';
 import React from 'react';
-import { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';
-import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import { Frame, type FrameProps } from '../../overlay/frame/frame.js';
+import { Scaffold } from '../../layouts/scaffold/scaffold.js';
 
 // Styles
 import styles from './modal.module.css';
 
-export type ModalProps = FrameOwnProps & ScaffoldProps;
+export type ModalProps = FrameProps;
 
 export const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal(
   { children, className, isOpen, draggable = false, veil = true, ...props }: ModalProps,
@@ -14,12 +14,14 @@ export const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal(
 ) {
   return (
     <Frame
+      ref={ref}
       isOpen={isOpen}
       draggable={draggable}
       veil={veil}
       className={clsx(styles['modal'], 'tcn-surface', 'tcn-modal', className)}
+      {...props}
     >
-      <Scaffold ref={ref} {...props}>
+      <Scaffold className={'tcn-modal-scaffold'} width="100%" height="100%">
         {children}
       </Scaffold>
     </Frame>

package/src/surfaces/window/window.stories.tsx

@@ -25,7 +25,15 @@ export const WindowStory = () => {
   return (
     <ZStack height="100%" width="100%" minHeight="600px">
       <Button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</Button>
-      <Window isOpen={isOpen} width="400px" height="500px">
+      <Window
+        isOpen={isOpen}
+        width="400px"
+        height="500px"
+        minWidth="min-content"
+        minHeight="300px"
+        maxWidth="600px"
+        maxHeight="600px"
+      >
         <DragHandle>
           <Header>
             <Title>Window Title</Title>

package/src/surfaces/window/window.tsx

@@ -1,12 +1,12 @@
 import { clsx } from 'clsx';
 import React from 'react';
-import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
-import { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';
+import { Frame, type FrameProps } from '../../overlay/frame/frame.js';
+import { Scaffold } from '../../layouts/scaffold/scaffold.js';
 
 // Styles
 import styles from './window.module.css';
 
-export type WindowProps = FrameOwnProps & ScaffoldProps;
+export type WindowProps = FrameProps;
 
 export const Window = React.forwardRef<HTMLElement, WindowProps>(function Window(
   {
@@ -30,8 +30,10 @@ export const Window = React.forwardRef<HTMLElement, WindowProps>(function Window
       className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}
       width={width}
       height={height}
+      ref={ref}
+      {...props}
     >
-      <Scaffold ref={ref} {...props}>
+      <Scaffold width="100%" height="100%" className={'tcn-window-scaffold'}>
         {children}
       </Scaffold>
     </Frame>

package/src/themes/themes/ergo/ergo_theme.css

@@ -686,6 +686,7 @@
   /* MODAL: */
   .tcn-modal {
     --divide-header: 0;
+    box-shadow: 0px 4px 34px 0px #00000096;
 
     :where(.tcn-scaffold) {
       border-radius: var(--shape-radius-medium);
@@ -710,10 +711,11 @@
 
   /* WINDOW: */
   .tcn-window {
+    box-shadow: 0px 4px 34px 0px #00000096;
+
     --divide-header: 0;
 
     :where(.tcn-scaffold) {
-      box-shadow: 0px 4px 34px 0px #00000096;
       border-radius: var(--shape-radius-medium);
       background-color: var(--background-color-primary);
       overflow: hidden;