@tcn/ui 0.9.0 → 0.11.0

package/src/overlay/frame/frame.tsx

@@ -1,50 +1,158 @@
-import React from 'react';
-import { ZStack, type ZStackProps } from '../../stacks/index.js';
-import { Portal } from '../portal/portal.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 styles from './frame.module.css';
-import { clsx } from 'clsx';
-
 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;
   }

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,14 +1,19 @@
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './bottom_resize_handle.module.css';
-import { createVerticalResizeHandler } from './resize_handlers.js';
-import { clsx } from 'clsx';
 import type { HandleProps } from './handle_props.js';
+import { createVerticalResizeHandler } from './resize_handlers.js';
 
 export interface BottomResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onHeightResize?: (value: number) => void;
-  onHeightResizeEnd?: (value: number) => void;
+  onHeightResize?: (
+    height: number,
+    origin: 'top' | 'bottom',
+    totalDelta: number,
+    currentDelta: number
+  ) => void;
+  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
 }
 
 export function BottomResizeHandle({
@@ -20,7 +25,9 @@ export function BottomResizeHandle({
   const resizeHandler = createVerticalResizeHandler(
     targetRef,
     onHeightResize,
-    onHeightResizeEnd
+    onHeightResizeEnd,
+    false,
+    'bottom'
   );
   const offset = handleProps?.offset ? handleProps.offset : -8;
 

package/src/stacks/box/box.tsx

@@ -1,16 +1,16 @@
-import { useForkRef } from '../../utils/index.js';
+import { clsx } from 'clsx';
 import React, { CSSProperties, HTMLAttributes, useRef } from 'react';
-import { LeftResizeHandle } from './left_resize_handle.js';
-import { RightResizeHandle } from './right_resize_handle.js';
+import { useForkRef } from '../../utils/index.js';
+import styles from '../stack.module.css';
+import { isCustomSizeProp } from '../utils/isCustomSizeProp.js';
+import { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';
 import { BottomResizeHandle } from './bottom_resize_handle.js';
 import { EndResizeHandle } from './end_resize_handle.js';
+import { HandleProps } from './handle_props.js';
+import { LeftResizeHandle } from './left_resize_handle.js';
+import { RightResizeHandle } from './right_resize_handle.js';
 import { StartResizeHandle } from './start_resize_handle.js';
 import { TopResizeHandle } from './top_resize_handle.js';
-import { clsx } from 'clsx';
-import { isCustomSizeProp } from '../utils/isCustomSizeProp.js';
-import { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';
-import styles from '../stack.module.css';
-import { HandleProps } from './handle_props.js';
 
 export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<T> {
   as?: string;
@@ -46,15 +46,19 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttri
   horizontalHandleProps?: HandleProps;
   verticalHandleProps?: HandleProps;
   onWidthResize?: (
-    width: number
-    // origin: 'left' | 'right'
+    width: number,
+    origin: 'left' | 'right',
+    totalDelta: number,
+    currentDelta: number
   ) => void;
   onHeightResize?: (
-    height: number
-    // origin: 'top' | 'bottom'
+    height: number,
+    origin: 'top' | 'bottom',
+    totalDelta: number,
+    currentDelta: number
   ) => void;
-  onWidthResizeEnd?: (width: number) => void;
-  onHeightResizeEnd?: (width: number) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
+  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
 }
 
 export const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(

package/src/stacks/box/end_resize_handle.tsx

@@ -1,16 +1,20 @@
+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 { clsx } from 'clsx';
-import type { HandleProps } from './handle_props.js';
 
 export interface EndResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (value: number) => void;
-  onWidthResizeEnd?: (value: number) => void;
+  onWidthResize?: (
+    width: number,
+    origin: 'left' | 'right',
+    totalDelta: number,
+    currentDelta: number
+  ) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
-
 export function EndResizeHandle({
   targetRef,
   handleProps,
@@ -20,7 +24,8 @@ export function EndResizeHandle({
   const resizeHandler = createHorizontalResizeHandler(
     targetRef,
     onWidthResize,
-    onWidthResizeEnd
+    onWidthResizeEnd,
+    'right'
   );
   const offset = handleProps?.offset ? handleProps.offset : -8;
 

package/src/stacks/box/left_resize_handle.tsx

@@ -1,14 +1,19 @@
+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 { clsx } from 'clsx';
 
 export interface LeftResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (value: number) => void;
-  onWidthResizeEnd?: (value: number) => void;
+  onWidthResize?: (
+    width: number,
+    origin: 'left' | 'right',
+    totalDelta: number,
+    currentDelta: number
+  ) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
 export function LeftResizeHandle({
   targetRef,
@@ -20,6 +25,7 @@ export function LeftResizeHandle({
     targetRef,
     onWidthResize,
     onWidthResizeEnd,
+    'left',
     true,
     true
   );

package/src/stacks/box/resize_handlers.ts

@@ -9,8 +9,14 @@ function createVeil() {
 
 export function createHorizontalResizeHandler(
   targetRef: React.MutableRefObject<HTMLElement | null>,
-  onWidthResize?: (value: number) => void,
-  onWidthResizeEnd?: (value: number) => void,
+  onWidthResize?: (
+    width: number,
+    origin: 'left' | 'right',
+    totalDelta: number,
+    currentDelta: number
+  ) => void,
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void,
+  origin: 'left' | 'right' = 'right',
   invert = false,
   disableDirection = false
 ) {
@@ -34,13 +40,14 @@ export function createHorizontalResizeHandler(
     let width = startRect.width;
 
     const drag = (event: MouseEvent) => {
-      const deltaX = direction * (event.clientX - startX);
-      const newWidth = startRect.width + deltaX;
+      const totalDelta = direction * (event.clientX - startX);
+      const newWidth = startRect.width + totalDelta;
+      const currentDelta = newWidth - width;
 
       width = newWidth;
 
       box.style.width = `${newWidth}px`;
-      onWidthResize && onWidthResize(newWidth);
+      onWidthResize?.(newWidth, origin, totalDelta, currentDelta);
       event.stopPropagation();
       event.preventDefault();
     };
@@ -60,7 +67,7 @@ export function createHorizontalResizeHandler(
       event.stopPropagation();
       event.preventDefault();
 
-      onWidthResizeEnd && onWidthResizeEnd(width);
+      onWidthResizeEnd?.(width, origin);
     };
 
     document.body.addEventListener('mousemove', drag);
@@ -73,9 +80,15 @@ export function createHorizontalResizeHandler(
 
 export function createVerticalResizeHandler(
   targetRef: React.MutableRefObject<HTMLElement | null>,
-  onHeightResize?: (value: number) => void,
-  onHeightResizeEnd?: (value: number) => void,
-  invert = false
+  onHeightResize?: (
+    height: number,
+    origin: 'top' | 'bottom',
+    totalDelta: number,
+    currentDelta: number
+  ) => void,
+  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void,
+  invert = false,
+  origin: 'top' | 'bottom' = 'bottom'
 ) {
   const direction = invert ? -1 : 1;
   return function startVerticalResize(event: React.MouseEvent) {
@@ -93,11 +106,12 @@ export function createVerticalResizeHandler(
     let height = startRect.height;
 
     const drag = (event: MouseEvent) => {
-      const deltaY = direction * (event.clientY - startY);
-      const newHeight = startRect.height + deltaY;
+      const totalDelta = direction * (event.clientY - startY);
+      const newHeight = startRect.height + totalDelta;
+      const currentDelta = newHeight - height;
       height = newHeight;
       box.style.height = `${newHeight}px`;
-      onHeightResize && onHeightResize(newHeight);
+      onHeightResize?.(newHeight, origin, totalDelta, currentDelta);
       event.stopPropagation();
       event.preventDefault();
     };
@@ -117,7 +131,7 @@ export function createVerticalResizeHandler(
       event.stopPropagation();
       event.preventDefault();
 
-      onHeightResizeEnd && onHeightResizeEnd(height);
+      onHeightResizeEnd?.(height, origin);
     };
 
     document.body.addEventListener('mousemove', drag);

package/src/stacks/box/right_resize_handle.tsx

@@ -1,14 +1,19 @@
+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 { clsx } from 'clsx';
 
 export interface RightResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (value: number) => void;
-  onWidthResizeEnd?: (value: number) => void;
+  onWidthResize?: (
+    width: number,
+    origin: 'left' | 'right',
+    totalDelta: number,
+    currentDelta: number
+  ) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
 export function RightResizeHandle({
   targetRef,
@@ -20,6 +25,7 @@ export function RightResizeHandle({
     targetRef,
     onWidthResize,
     onWidthResizeEnd,
+    'right',
     false,
     true
   );

package/src/stacks/box/start_resize_handle.tsx

@@ -1,14 +1,19 @@
+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 { clsx } from 'clsx';
 
 export interface StartResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (value: number) => void;
-  onWidthResizeEnd?: (value: number) => void;
+  onWidthResize?: (
+    width: number,
+    origin: 'left' | 'right',
+    totalDelta: number,
+    currentDelta: number
+  ) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
 export function StartResizeHandle({
   targetRef,
@@ -20,7 +25,7 @@ export function StartResizeHandle({
     targetRef,
     onWidthResize,
     onWidthResizeEnd,
-    true
+    'left'
   );
   const offset = handleProps?.offset ? handleProps.offset : -8;
 

package/src/stacks/box/top_resize_handle.tsx

@@ -1,14 +1,19 @@
+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';
 
 export interface TopResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onHeightResize?: (value: number) => void;
-  onHeightResizeEnd?: (value: number) => void;
+  onHeightResize?: (
+    height: number,
+    origin: 'top' | 'bottom',
+    totalDelta: number,
+    currentDelta: number
+  ) => void;
+  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
 }
 export function TopResizeHandle({
   targetRef,
@@ -20,7 +25,8 @@ export function TopResizeHandle({
     targetRef,
     onHeightResize,
     onHeightResizeEnd,
-    true
+    true,
+    'top'
   );
   const offset = handleProps?.offset ? handleProps.offset : -8;
 

package/src/stacks/collapsible_box.stories.tsx

@@ -1,13 +1,13 @@
+import { ChevronLeftIcon as ChevronLeft } from '@tcn/icons/chevron_left_icon.js';
+import { PlusIcon as Plus } from '@tcn/icons/plus_icon.js';
 import React from 'react';
 import { Button, SlimButton } from '../actions/index.js';
-import { HCollapsibleBox as HComponent } from './h_collapsible_box.js';
-import { VCollapsibleBox as VComponent } from './v_collapsible_box.js';
 import { Title } from '../typography/index.js';
-import { Spacer } from './spacer.js';
+import { HCollapsibleBox } from './h_collapsible_box.js';
 import { HStack } from './h_stack.js';
+import { Spacer } from './spacer.js';
+import { VCollapsibleBox } from './v_collapsible_box.js';
 import { VStack } from './v_stack.js';
-import { ChevronLeftIcon as ChevronLeft } from '@tcn/icons/chevron_left_icon.js';
-import { PlusIcon as Plus } from '@tcn/icons/plus_icon.js';
 
 export default {
   title: 'Stacks/Collapsible Box',
@@ -49,13 +49,13 @@ export function CollapsibleBox() {
           <Button onClick={() => setVHopen(c => !c)}>toggle vertical collapse</Button>
           <Button onClick={() => setHOpen(c => !c)}>toggle horizontal collapse</Button>
         </VStack>
-        <VComponent open={vOpen} enableResizeOnTop>
+        <VCollapsibleBox open={vOpen} enableResizeOnTop>
           <MyPanel />
-        </VComponent>
+        </VCollapsibleBox>
       </VStack>
-      <HComponent open={hOpen} enableResizeOnStart>
+      <HCollapsibleBox open={hOpen} enableResizeOnStart>
         <MyPanel />
-      </HComponent>
+      </HCollapsibleBox>
     </HStack>
   );
 }
@@ -67,9 +67,9 @@ export function VerticalCollapsibleBox() {
       <HStack height="flex" hAlign="end" gap="16px">
         <Button onClick={() => setOpen(c => !c)}>toggle collapse</Button>
       </HStack>
-      <VComponent open={open} enableResizeOnTop defaultHeight="300px">
+      <VCollapsibleBox open={open} enableResizeOnTop defaultHeight="300px">
         <MyPanel />
-      </VComponent>
+      </VCollapsibleBox>
     </VStack>
   );
 }

package/src/stacks/h_collapsible_box.tsx

@@ -1,6 +1,6 @@
+import { clsx } from 'clsx';
 import React, { useLayoutEffect } from 'react';
 import { useForkRef } from '../utils/index.js';
-import { clsx } from 'clsx';
 import { Box, BoxProps } from './box/box.js';
 import styles from './collapsible_box.module.css';
 import { useIsCollapsed } from './utils/use_is_collapsed.js';
@@ -32,13 +32,13 @@ export const HCollapsibleBox = React.forwardRef(function CollapsibleBox(
       data-is-collapsed={!open}
       data-collapse-orientation="horizontal"
       data-is-resizing={resizing}
-      onWidthResize={width => {
+      onWidthResize={(width, origin, totalDelta, currentDelta) => {
         setIsResizing(true);
-        props.onWidthResize?.(width);
+        props.onWidthResize?.(width, origin, totalDelta, currentDelta);
       }}
-      onWidthResizeEnd={width => {
+      onWidthResizeEnd={(width, origin) => {
         setIsResizing(false);
-        props.onWidthResizeEnd?.(width);
+        props.onWidthResizeEnd?.(width, origin);
         collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);
       }}
       className={clsx(

package/src/stacks/v_collapsible_box.tsx

@@ -32,14 +32,14 @@ export const VCollapsibleBox = React.forwardRef(function CollapsibleBox(
       data-is-collapsed={!open}
       data-collapse-orientation="vertical"
       data-is-resizing={resizing}
-      onHeightResize={height => {
+      onHeightResize={(height, origin, totalDelta, currentDelta) => {
         setIsResizing(true);
-        props.onHeightResize?.(height);
+        props.onHeightResize?.(height, origin, totalDelta, currentDelta);
       }}
-      onHeightResizeEnd={height => {
+      onHeightResizeEnd={(height, origin) => {
         setIsResizing(false);
         collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);
-        props.onHeightResizeEnd?.(height);
+        props.onHeightResizeEnd?.(height, origin);
       }}
       className={clsx(
         props.className,

package/src/surfaces/index.ts

@@ -3,8 +3,7 @@ export * from './card/card.js';
 export * from './confirm/confirm.js';
 export * from './page/h_page.js';
 export * from './page/v_page.js';
-export * from './panel/h_panel.js';
-export * from './panel/v_panel.js';
+export * from './panel/panel.js';
 export * from './popover/popover.js';
 export * from './drawers/drawer_bottom/drawer_bottom.js';
 export * from './drawers/drawer_top/drawer_top.js';