@tcn/ui 0.10.0 → 0.11.0

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

@@ -7,7 +7,12 @@ import { createVerticalResizeHandler } from './resize_handlers.js';
 export interface BottomResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void;
+  onHeightResize?: (
+    height: number,
+    origin: 'top' | 'bottom',
+    totalDelta: number,
+    currentDelta: number
+  ) => void;
   onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
 }
 

package/src/stacks/box/box.tsx

@@ -45,8 +45,18 @@ 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
+  ) => void;
+  onHeightResize?: (
+    height: number,
+    origin: 'top' | 'bottom',
+    totalDelta: number,
+    currentDelta: number
+  ) => void;
   onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
   onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
 }

package/src/stacks/box/end_resize_handle.tsx

@@ -7,7 +7,12 @@ import { createHorizontalResizeHandler } from './resize_handlers.js';
 export interface EndResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onWidthResize?: (
+    width: number,
+    origin: 'left' | 'right',
+    totalDelta: number,
+    currentDelta: number
+  ) => void;
   onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
 export function EndResizeHandle({

package/src/stacks/box/left_resize_handle.tsx

@@ -7,7 +7,12 @@ import { createHorizontalResizeHandler } from './resize_handlers.js';
 export interface LeftResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onWidthResize?: (
+    width: number,
+    origin: 'left' | 'right',
+    totalDelta: number,
+    currentDelta: number
+  ) => void;
   onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
 export function LeftResizeHandle({

package/src/stacks/box/resize_handlers.ts

@@ -9,7 +9,12 @@ function createVeil() {
 
 export function createHorizontalResizeHandler(
   targetRef: React.MutableRefObject<HTMLElement | null>,
-  onWidthResize?: (width: number, origin: 'left' | 'right', delta: 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,
@@ -35,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?.(newWidth, origin, deltaX);
+      onWidthResize?.(newWidth, origin, totalDelta, currentDelta);
       event.stopPropagation();
       event.preventDefault();
     };
@@ -74,7 +80,12 @@ export function createHorizontalResizeHandler(
 
 export function createVerticalResizeHandler(
   targetRef: React.MutableRefObject<HTMLElement | null>,
-  onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void,
+  onHeightResize?: (
+    height: number,
+    origin: 'top' | 'bottom',
+    totalDelta: number,
+    currentDelta: number
+  ) => void,
   onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void,
   invert = false,
   origin: 'top' | 'bottom' = 'bottom'
@@ -95,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?.(newHeight, origin, deltaY);
+      onHeightResize?.(newHeight, origin, totalDelta, currentDelta);
       event.stopPropagation();
       event.preventDefault();
     };

package/src/stacks/box/right_resize_handle.tsx

@@ -7,7 +7,12 @@ import styles from './right_resize_handle.module.css';
 export interface RightResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onWidthResize?: (
+    width: number,
+    origin: 'left' | 'right',
+    totalDelta: number,
+    currentDelta: number
+  ) => void;
   onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
 export function RightResizeHandle({

package/src/stacks/box/start_resize_handle.tsx

@@ -1,13 +1,18 @@
+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?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onWidthResize?: (
+    width: number,
+    origin: 'left' | 'right',
+    totalDelta: number,
+    currentDelta: number
+  ) => void;
   onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
 export function StartResizeHandle({

package/src/stacks/box/top_resize_handle.tsx

@@ -1,13 +1,18 @@
+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?: (height: number, origin: 'top' | 'bottom', delta: number) => void;
+  onHeightResize?: (
+    height: number,
+    origin: 'top' | 'bottom',
+    totalDelta: number,
+    currentDelta: number
+  ) => void;
   onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
 }
 export function TopResizeHandle({

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={(width, origin, totalDelta, currentDelta) => {
         setIsResizing(true);
-        props.onWidthResize?.(width, origin, delta);
+        props.onWidthResize?.(width, origin, totalDelta, currentDelta);
       }}
       onWidthResizeEnd={(width, origin) => {
         setIsResizing(false);

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={(height, origin, totalDelta, currentDelta) => {
         setIsResizing(true);
-        props.onHeightResize?.(height, origin, delta);
+        props.onHeightResize?.(height, origin, totalDelta, currentDelta);
       }}
       onHeightResizeEnd={(height, origin) => {
         setIsResizing(false);

package/src/surfaces/window/window.tsx

@@ -1,7 +1,7 @@
 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 FrameOwnProps } from '../../overlay/frame/frame.js';
 
 // Styles
 import styles from './window.module.css';
@@ -9,7 +9,17 @@ import styles from './window.module.css';
 export type WindowProps = FrameOwnProps & ScaffoldProps;
 
 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,8 +28,8 @@ 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}
     >
       <Scaffold ref={ref} {...props}>
         {children}

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;
+  }
 }

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

@@ -63,6 +63,10 @@
     --bar-lg: 40px;
     --bar-xl: 48px;
 
+    --action-sm: 20px;
+    --action-md: 24px;
+    --action-lg: 32px;
+
     /* Status Colors */
     --status-color-disabled: var(--ergo-grey-light);
     --status-color-info: var(--ergo-status-blue);
@@ -187,7 +191,6 @@
   * Primarily manages button dimensions and sizing ratios.
   */
   .tcn-base-button {
-    /* TODO: btn size should look for "--tcn-action-size" variable before defaulting. */
     --btn-size-base: 26px;
     --btn-pad-base: 12px;
 
@@ -307,21 +310,23 @@
       box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
 
       /* Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles */
-      &::before,
-      &::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 4px;
-      }
-
-      &::before {
-        top: -2px;
-      }
-
-      &::after {
-        bottom: -2px;
+      :not(.tcn-select) {
+        &::before,
+        &::after {
+          content: "";
+          position: absolute;
+          left: 0;
+          right: 0;
+          height: 4px;
+        }
+
+        &::before {
+          top: -2px;
+        }
+
+        &::after {
+          bottom: -2px;
+        }
       }
     }
 
@@ -598,8 +603,8 @@
     }
   }
 
-  .tcn-frame[data-is-veil="true"] {
-    background-color: rgba(0, 0, 0, 0.5);
+  .tcn-frame-dialog {
+    border: inherit;
   }
 
   .tcn-tooltip {
@@ -1025,4 +1030,164 @@
       color: var(--on-material);
     }
   }
+
+  /* ===== INPUTS ===== */
+  .tcn-control {
+    --act: var(--action);
+    --mat: var(--material);
+    --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);
+
+    font-size: 12px;
+    border: 1px solid var(--ergo-grey);
+    box-sizing: border-box;
+    min-height: var(--action-md);
+    border-radius: var(--shape-radius-medium);
+    padding-inline: 4px;
+  }
+
+  .tcn-control[data-is-disabled="false"]:hover {
+    background: var(--act-raised);
+  }
+
+  .tcn-control:focus-visible {
+    outline: 2px solid var(--ergo-primary);
+    outline-offset: 2px;
+  }
+
+  .tcn-control:focus {
+    border: 1px solid var(--act);
+  }
+
+  .tcn-control::placeholder {
+    color: var(--ergo-grey);
+  }
+
+  .tcn-control[data-is-disabled="true"] {
+    cursor: not-allowed;
+    background: var(--material-disabled);
+    color: var(--on-material-disabled);
+  }
+
+  .tcn-control[data-is-disabled="true"]::placeholder {
+    color: var(--on-material-disabled);
+  }
+
+  .tcn-input {
+    height: auto;
+  }
+
+  .tcn-textarea,
+  .tcn-input {
+    cursor: text;
+  }
+
+  .tcn-input-group {
+    border-radius: var(--shape-radius-medium);
+
+    &:focus-within {
+      outline: 2px solid var(--ergo-primary);
+      outline-offset: 2px;
+    }
+
+    .tcn-input-group-slot {
+      z-index: 1;
+      border-radius: 0;
+      height: auto;
+      min-height: var(--action-md);
+      padding-block: 0;
+      &:focus,
+      &:focus-visible {
+        z-index: 3;
+        outline: none;
+      }
+    }
+
+    .tcn-input-group-slot:first-child {
+      border-top-left-radius: var(--shape-radius-medium);
+      border-bottom-left-radius: var(--shape-radius-medium);
+    }
+
+    .tcn-input-group-slot:not(:last-child) {
+      margin-right: -1px;
+    }
+
+    .tcn-input-group-slot:last-child {
+      border-top-right-radius: var(--shape-radius-medium);
+      border-bottom-right-radius: var(--shape-radius-medium);
+    }
+
+    .tcn-select,
+    .tcn-button,
+    .tcn-button[data-hierarchy] {
+      border: 1px solid var(--ergo-grey);
+      height: auto;
+      min-height: var(--action-md);
+      min-width: var(--action-md);
+      box-sizing: border-box;
+      &:hover,
+      &[data-hover] {
+        transform: none;
+      }
+    }
+
+    .tcn-select:focus-visible,
+    .tcn-button:focus-visible,
+    .tcn-button[data-hierarchy]:focus-visible {
+      border-color: var(--ergo-primary);
+    }
+  }
+
+  .tcn-slider[data-is-disabled="true"] {
+    &::-webkit-slider-runnable-track {
+      background: var(--ergo-grey-light);
+    }
+
+    &::-webkit-slider-thumb {
+      background-color: var(--ergo-white);
+      border: 1px solid var(--ergo-grey-light);
+    }
+  }
+
+  .tcn-checkbox {
+    border-color: var(--ergo-primary);
+
+    &:focus-visible,
+    &:focus {
+      outline: 2px solid var(--ergo-primary);
+      outline-offset: 2px;
+    }
+
+    &[data-is-disabled="true"] {
+      cursor: not-allowed;
+      border-color: var(--material-disabled);
+    }
+
+    &[data-checked="true"][data-is-disabled="true"] {
+      background-color: var(--ergo-grey-light);
+    }
+
+    &[data-checked="false"][data-is-disabled="true"] {
+      background: var(--material);
+      border-color: var(--ergo-grey-light);
+      color: var(--ergo-grey-light);
+    }
+  }
+
+  .tcn-switch-wrapper[data-focused="true"][data-is-checked="false"],
+  .tcn-switch-wrapper[data-focused="true"][data-is-checked="true"] {
+    outline: 2px solid var(--ergo-primary);
+    outline-offset: 2px;
+  }
+
+  /* Quick fix to use some of the default module styles.*/
+  .tcn-input,
+  .tcn-select,
+  .tcn-slider,
+  .tcn-checkbox,
+  .tcn-switch-wrapper,
+  .tcn-date-picker,
+  .tcn-date-picker-year-selector,
+  .tcn-radio {
+    --accent-color: var(--ergo-primary);
+  }
 }

package/src/typography/body_text/body_text.tsx

@@ -36,6 +36,7 @@ export const BodyText = React.forwardRef<HTMLDivElement, BodyTextProps>(function
     pad,
     selectable = true,
     breakWords = false,
+    ...props
   }: BodyTextProps,
   ref
 ) {
@@ -73,6 +74,7 @@ export const BodyText = React.forwardRef<HTMLDivElement, BodyTextProps>(function
       style={style}
       data-size={size}
       data-word-break={breakWords}
+      {...props}
     >
       {children}
     </div>

package/src/utils/dnd/__stories__/draggable.stories.tsx

@@ -1,10 +1,11 @@
-import { Draggable } from '../draggable/draggable.js';
-import { useDragContainer } from '../context.js';
-import { VStack } from '../../../stacks/v_stack.js';
-import { DragHandle } from '../handle.js';
+import { Button } from '../../../actions/button/button/button.js';
 import { Box } from '../../../stacks/box/box.js';
+import { VStack } from '../../../stacks/v_stack.js';
+import { ZStack } from '../../../stacks/z_stack.js';
 import { BodyText } from '../../../typography/index.js';
-import { Button } from '../../../actions/button/button/button.js';
+import { useDragContainer } from '../context.js';
+import { Draggable } from '../draggable/draggable.js';
+import { DragHandle } from '../handle.js';
 import styles from './draggable_stories.module.css';
 
 export default {
@@ -60,13 +61,18 @@ function ResetPositionButton() {
 
 export const WithSetPosition = () => {
   return (
-    <VStack minHeight="600px" height="100%" width="100%" gap="8px">
+    <ZStack minHeight="600px" height="100%" width="100%">
       <BodyText>
         Drag the box, then click &quot;Reset position&quot; to move it back to (0, 0).
         Dragging again should start from the new position.
       </BodyText>
       <Draggable>
-        <Box width="400px" height="300px" className={styles['handle-container']}>
+        <Box
+          as="dialog"
+          width="400px"
+          height="300px"
+          className={styles['handle-container']}
+        >
           <VStack gap="8px" padding="8px">
             <DragHandle>
               <Box className={styles.handle} width="120px" padding="8px">
@@ -77,6 +83,6 @@ export const WithSetPosition = () => {
           </VStack>
         </Box>
       </Draggable>
-    </VStack>
+    </ZStack>
   );
 };

package/src/utils/dnd/hooks/use_drag_container.ts

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useState } from 'react';
-import { useDraggable } from './use_draggable.js';
 import type { Position } from '../../index.js';
 import type { DragContainer } from '../types.js';
+import { useDraggable } from './use_draggable.js';
 
 export interface UseDragContainerOptions {
   initialPosition?: Position;
@@ -10,7 +10,14 @@ export interface UseDragContainerOptions {
 export function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {
   const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);
   const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });
+  /**
+   *  The value that triggers re-renders. It’s updated in dragCallback so the UI
+   *  moves while dragging, and it’s what the hook returns so the consumer can
+   *  render the element at that position
+   *  (e.g. style={{ left: position.x, top: position.y }}).
+   */
   const [position, setPosition] = useState(positionRef.current);
+
   const [isDragging, setIsDragging] = useState(false);
 
   useDraggable({
@@ -24,9 +31,12 @@ export function useMakeDragContainer(options: UseDragContainerOptions): DragCont
         y: positionRef.current.y + deltaY,
       });
     },
-    endDragCallback: () => {
+    endDragCallback: (deltaX, deltaY) => {
+      positionRef.current = {
+        x: positionRef.current.x + deltaX,
+        y: positionRef.current.y + deltaY,
+      };
       setIsDragging(false);
-      positionRef.current = position;
     },
   });