@tcn/ui 0.10.0 → 0.12.0

package/src/overlay/frame/frame.tsx

@@ -1,50 +1,156 @@
-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,
+        atLimit: boolean
+      ) => {
+        if (!draggable) return;
+        if (atLimit) return;
+        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, atLimit);
+      },
+      [onWidthResize, drag, draggable]
+    );
+
+    const handleHeightResize = useCallback(
+      (
+        height: number,
+        origin: 'top' | 'bottom',
+        totalDelta: number,
+        currentDelta: number,
+        atLimit: boolean
+      ) => {
+        if (!draggable) return;
+        if (atLimit) return;
+        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, atLimit);
+      },
+      [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;
   }

package/src/overlay/popper/legacy/popper.tsx

@@ -152,13 +152,17 @@ export function Popper({
   };
 
   useLayoutEffect(() => {
-    updatePosition();
     window.addEventListener('resize', updatePosition);
     return () => {
       window.removeEventListener('resize', updatePosition);
     };
   });
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: updatePosition depends on open and anchorElement
+  useLayoutEffect(() => {
+    updatePosition();
+  }, [open, anchorElement]);
+
   useLayoutEffect(() => {
     if (open) {
       activeElementRef.current = window.document.activeElement as HTMLElement;

package/src/stacks/box/bottom_resize_handle.tsx

@@ -1,16 +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', delta: number) => void;
-  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
-}
-
+export type BottomResizeHandleProps = VerticalResizeHandleProps;
 export function BottomResizeHandle({
   targetRef,
   handleProps,

package/src/stacks/box/box.tsx

@@ -45,8 +45,20 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttri
   enableResizeOnRight?: boolean;
   horizontalHandleProps?: HandleProps;
   verticalHandleProps?: HandleProps;
-  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
-  onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void;
+  onWidthResize?: (
+    width: number,
+    origin: 'left' | 'right',
+    totalDelta: number,
+    currentDelta: number,
+    atLimit: boolean
+  ) => void;
+  onHeightResize?: (
+    height: number,
+    origin: 'top' | 'bottom',
+    totalDelta: 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,15 +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', delta: number) => void;
-  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
-}
 export function EndResizeHandle({
   targetRef,
   handleProps,

package/src/stacks/box/left_resize_handle.tsx

@@ -1,15 +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', delta: 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,9 +16,9 @@ function createVeil() {
 
 export function createHorizontalResizeHandler(
   targetRef: React.MutableRefObject<HTMLElement | null>,
-  onWidthResize?: (width: number, origin: 'left' | 'right', delta: 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
 ) {
@@ -35,13 +42,18 @@ export function createHorizontalResizeHandler(
     let width = startRect.width;
 
     const drag = (event: MouseEvent) => {
-      const deltaX = direction * (event.clientX - startX);
-      const newWidth = startRect.width + deltaX;
+      const beforeWidth = box.getBoundingClientRect().width;
+      const totalDelta = direction * (event.clientX - startX);
+      const newWidth = startRect.width + totalDelta;
+      const currentDelta = newWidth - width;
 
       width = newWidth;
 
       box.style.width = `${newWidth}px`;
-      onWidthResize?.(newWidth, origin, deltaX);
+
+      const afterWidth = box.getBoundingClientRect().width;
+      const atLimit = afterWidth === beforeWidth;
+      onWidthResize?.(newWidth, origin, totalDelta, currentDelta, atLimit);
       event.stopPropagation();
       event.preventDefault();
     };
@@ -74,10 +86,10 @@ export function createHorizontalResizeHandler(
 
 export function createVerticalResizeHandler(
   targetRef: React.MutableRefObject<HTMLElement | null>,
-  onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: 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) {
@@ -95,11 +107,15 @@ export function createVerticalResizeHandler(
     let height = startRect.height;
 
     const drag = (event: MouseEvent) => {
-      const deltaY = direction * (event.clientY - startY);
-      const newHeight = startRect.height + deltaY;
+      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, deltaY);
+      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,15 +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', delta: 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,15 +1,10 @@
-import React from 'react';
-import { HandleProps } from './handle_props.js';
+import { clsx } from 'clsx';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
 import styles from './start_resize_handle.module.css';
-import { clsx } from 'clsx';
+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', delta: number) => void;
-  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
-}
 export function StartResizeHandle({
   targetRef,
   handleProps,

package/src/stacks/box/top_resize_handle.tsx

@@ -1,15 +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 { clsx } from 'clsx';
+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', delta: 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, delta) => {
+      onWidthResize={(...args) => {
         setIsResizing(true);
-        props.onWidthResize?.(width, origin, delta);
+        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, delta) => {
+      onHeightResize={(...args) => {
         setIsResizing(true);
-        props.onHeightResize?.(height, origin, delta);
+        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,15 +1,25 @@
 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 './window.module.css';
 
-export type WindowProps = FrameOwnProps & ScaffoldProps;
+export type WindowProps = FrameProps;
 
 export const Window = React.forwardRef<HTMLElement, WindowProps>(function Window(
-  { children, className, isOpen, draggable = true, veil = false, ...props }: WindowProps,
+  {
+    children,
+    className,
+    isOpen,
+    draggable = true,
+    resizable = true,
+    veil = false,
+    width,
+    height,
+    ...props
+  }: WindowProps,
   ref
 ) {
   return (
@@ -18,10 +28,12 @@ export const Window = React.forwardRef<HTMLElement, WindowProps>(function Window
       draggable={draggable}
       veil={veil}
       className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}
-      width="auto"
-      height="auto"
+      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/stories/controls_fieldset.tsx

@@ -30,7 +30,7 @@ export function ControlsFieldSet() {
   const [datePickerValueWithTime, setDatePickerValueWithTime] = useState<Date | null>(
     null
   );
-  const [phoneNumberValue, setPhoneNumberValue] = useState<string>('');
+  const [phoneNumberValue, setPhoneNumberValue] = useState<string | undefined>(undefined);
 
   // Additional input state
   const [checkboxValue, setCheckboxValue] = useState<boolean>(false);

package/src/themes/stylesheets/reset.css

@@ -81,7 +81,8 @@
   mark,
   audio,
   button,
-  video {
+  video,
+  dialog {
     margin: 0;
     padding: 0;
     border: 0;
@@ -134,4 +135,10 @@
     font: inherit;
     color: inherit;
   }
+  dialog {
+    max-width: none;
+    max-height: none;
+    background: transparent;
+    color: inherit;
+  }
 }