@ssa-ui-kit/core 3.22.1 → 3.23.0

package/dist/components/Drawer/DrawerFooter.d.ts

@@ -0,0 +1,33 @@
+export interface DrawerFooterProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+/**
+ * Drawer.Footer - A sticky action bar across the bottom of the panel.
+ *
+ * Holds the drawer's closing actions — cancel and confirm, clear and apply —
+ * above a full-width divider. It stays at the bottom whether the body is short
+ * or scrolling, and it only handles layout: the buttons are ordinary `Button`s,
+ * so their labels, variants and disabled states are yours to set.
+ *
+ * Place it as the last child of `Drawer.Content`. Children are laid out in a
+ * row, 20px apart, aligned to the trailing edge.
+ *
+ * @category Components
+ * @subcategory Overlay
+ *
+ * @example
+ * ```tsx
+ * <Drawer.Content>
+ *   <Drawer.Header>
+ *     <Drawer.Title>Filters</Drawer.Title>
+ *     <Drawer.CloseButton />
+ *   </Drawer.Header>
+ *   {fields}
+ *   <Drawer.Footer>
+ *     <Button variant="custom" text="Clear" onClick={handleClear} />
+ *     <Button variant="primary" text="View leads" onClick={handleSubmit} />
+ *   </Drawer.Footer>
+ * </Drawer.Content>
+ * ```
+ */
+export declare const DrawerFooter: import("react").ForwardRefExoticComponent<DrawerFooterProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Drawer/DrawerRoot.d.ts

@@ -18,7 +18,7 @@ export interface DrawerProps extends UseDrawerOptions {
  *         └── Drawer.Content  — the panel itself
  *             ├── Drawer.Header
  *             │   ├── Drawer.Title
- *             │   └── Drawer.CloseButton
+ *             │   └── Drawer.Actions   — save/search + Drawer.CloseButton
  *             └── …your content
  * ```
  * Each layer reads context from the one above, so skipping a level (Content
@@ -37,7 +37,9 @@ export interface DrawerProps extends UseDrawerOptions {
  * across open/close belongs above the drawer, not inside it.
  *
  * Note `opened`/`defaultOpened` are the legacy spelling of `open`/`defaultOpen`;
- * prefer the latter.
+ * prefer the latter. `title`/`withCloseButton` are likewise deprecated — they
+ * build a header that cannot hold anything else; compose `Drawer.Header`
+ * yourself instead.
  *
  * @category Components
  * @subcategory Overlay
@@ -45,14 +47,18 @@ export interface DrawerProps extends UseDrawerOptions {
  * @example
  * ```tsx
  * // Controlled: the trigger lives outside the drawer
- * const drawer = useDrawer({ title: 'Settings', withCloseButton: true });
+ * const drawer = useDrawer();
  *
  * <>
  *   <Button {...drawer.interactions.getReferenceProps()} text="Settings" />
  *   <Drawer.Root store={drawer}>
  *     <Drawer.Portal>
  *       <Drawer.Overlay>
- *         <Drawer.Content css={{ maxWidth: 400, padding: 24 }}>
+ *         <Drawer.Content>
+ *           <Drawer.Header>
+ *             <Drawer.Title>Settings</Drawer.Title>
+ *             <Drawer.CloseButton />
+ *           </Drawer.Header>
  *           {form}
  *         </Drawer.Content>
  *       </Drawer.Overlay>

package/dist/components/Drawer/constants.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Panel padding, per the design: 24px above the header, 32px gutters.
+ *
+ * `DrawerHeader` and `DrawerFooter` are sticky bars that have to cover the full
+ * width of the panel as content scrolls under them, so both cancel these
+ * gutters with a negative margin and re-apply them as their own padding.
+ * Keeping the numbers here means the bleed cannot drift from the padding it is
+ * cancelling.
+ */
+export declare const PANEL_PADDING_X = 32;
+export declare const PANEL_PADDING_TOP = 24;
+/**
+ * Gap between the header and the body, per the design. Applied as the header's
+ * bottom padding rather than a margin so it stays opaque while the header is
+ * stuck and the body scrolls beneath it.
+ */
+export declare const HEADER_GAP = 24;

package/dist/components/Drawer/index.parts.d.ts

@@ -3,5 +3,7 @@ export { DrawerOverlay as Overlay } from './DrawerOverlay';
 export { DrawerPortal as Portal } from './DrawerPortal';
 export { DrawerContent as Content } from './DrawerContent';
 export { DrawerHeader as Header } from './DrawerHeader';
+export { DrawerActions as Actions } from './DrawerActions';
+export { DrawerFooter as Footer } from './DrawerFooter';
 export { DrawerTitle as Title } from './DrawerTitle';
 export { DrawerCloseButton as CloseButton } from './DrawerCloseButton';

package/dist/components/Drawer/useDrawer.d.ts

@@ -25,8 +25,30 @@ export type UseDrawerOptions = {
     duration?: number;
     dismissable?: boolean;
     position?: Position;
+    /**
+     * Title for the header that `Drawer.Content` builds for you.
+     *
+     * @deprecated Compose the header instead — `Drawer.Header` with a
+     * `Drawer.Title` inside. The store-built header cannot hold anything else,
+     * so a drawer that needs a save button or a search field has to abandon it
+     * entirely. Removed in the next major release.
+     */
     title?: string;
+    /**
+     * Adds a close button to the header that `Drawer.Content` builds for you.
+     *
+     * @deprecated Render `Drawer.CloseButton` yourself, inside a `Drawer.Header`
+     * — usually within a `Drawer.Actions` group. Removed in the next major
+     * release.
+     */
     withCloseButton?: boolean;
+    /**
+     * Width of the panel for `left`/`right` drawers — a number of px, or any CSS
+     * length. `top`/`bottom` drawers span the full width and ignore it.
+     *
+     * @default 400
+     */
+    width?: number | string;
     onOpenChange?: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
 };
 export declare const useDrawer: (options?: UseDrawerOptions) => {
@@ -64,6 +86,7 @@ export declare const useDrawer: (options?: UseDrawerOptions) => {
     };
     title: string | undefined;
     withCloseButton: boolean;
+    width: string | number;
     portalNode: HTMLElement | null;
     setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
     setPortalNode: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;

package/dist/components/NavBar/NavBarList.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Also used as the styling base for `CollapsibleNavBarList`, which resets the
+ * column layout below — keep the two in sync when changing direction, gap or
+ * wrapping here.
+ */
 declare const NavBarList: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/dist/components/Table/ColumnResizeContext.d.ts

@@ -0,0 +1,30 @@
+import { ColumnResizeApi } from './types';
+/**
+ * Null outside a resizable `Table` — deliberately not a "safe" context.
+ * `TableCellHeader` reads it on every render to decide whether it owes the
+ * table a drag handle, and the answer is usually no.
+ */
+export declare const ColumnResizeContext: import("react").Context<ColumnResizeApi | null>;
+/**
+ * The enclosing table's resize API, or `null` when there isn't one.
+ *
+ * Lets a custom header cell decide whether it owes the table a drag handle,
+ * without knowing how its table was configured.
+ *
+ * @example
+ * ```tsx
+ * const MyHeaderCell = ({ children }) => {
+ *   const columnResize = useColumnResizeContext();
+ *
+ *   return (
+ *     <TableCell as="th">
+ *       {children}
+ *       {columnResize && <ColumnResizeHandle />}
+ *     </TableCell>
+ *   );
+ * };
+ * ```
+ *
+ * @see {@link useColumnResize} - creates the API this reads
+ */
+export declare const useColumnResizeContext: () => ColumnResizeApi | null;

package/dist/components/Table/ColumnResizeHandle.d.ts

@@ -0,0 +1,47 @@
+import { ColumnResizeHandleProps } from './ColumnResizeHandle.types';
+/**
+ * ColumnResizeHandle - the grab area on a column's right edge
+ *
+ * Rendered automatically by `TableCellHeader` inside a `Table` with
+ * `resizableColumns`, so most tables never name it. Render it by hand when the
+ * header cells are something other than `TableCellHeader` but still sit inside
+ * a resizable `Table`.
+ *
+ * Outside a resizable table it renders nothing, which keeps it safe to drop
+ * into a shared header cell that is used in both kinds of table.
+ *
+ * ### Which column it resizes
+ *
+ * With no `columnIndex` it takes the `cellIndex` of the cell it is rendered in.
+ * That is the right answer for every table whose header is one cell per column,
+ * and the wrong one as soon as a header cell spans several columns — pass
+ * `columnIndex` explicitly there.
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * <Table resizableColumns>
+ *   <TableHead>
+ *     <TableRow>
+ *       <th>
+ *         Name
+ *         <ColumnResizeHandle />
+ *       </th>
+ *     </TableRow>
+ *   </TableHead>
+ * </Table>
+ * ```
+ *
+ * @see {@link Table} - the resizableColumns prop that turns this on
+ * @see {@link useColumnResize} - the state and maths behind the handle
+ *
+ * @accessibility
+ * - Focusable `role="separator"` with `aria-orientation="vertical"`
+ * - Left/Right arrows resize in 8px steps, Shift + arrow in 40px steps
+ * - Enter, or a double click, restores the column's starting width
+ * - Reports the live width through `aria-valuenow`
+ */
+export declare const ColumnResizeHandle: ({ columnIndex, label, ...rest }: ColumnResizeHandleProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export default ColumnResizeHandle;

package/dist/components/Table/ColumnResizeHandle.types.d.ts

@@ -0,0 +1,29 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Props for the ColumnResizeHandle component
+ *
+ * @example
+ * ```tsx
+ * // Inside a TableCellHeader, index taken from the cell
+ * <ColumnResizeHandle />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Explicit column, for a header that does not map one cell per column
+ * <ColumnResizeHandle columnIndex={2} label="Created at" />
+ * ```
+ */
+export interface ColumnResizeHandleProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'role' | 'tabIndex' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp' | 'onPointerCancel' | 'onDoubleClick' | 'onKeyDown'> {
+    /**
+     * Which column this handle resizes. Defaults to the `cellIndex` of the cell
+     * the handle is rendered in, which is only wrong when a header cell spans
+     * more than one column.
+     */
+    columnIndex?: number;
+    /**
+     * Column name used in the handle's accessible label. Defaults to the text of
+     * the cell the handle sits in.
+     */
+    label?: string;
+}

package/dist/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps } from '../../types/emotion';
+import { TableProps } from './types';
 /**
  * Table - Base table component for displaying tabular data
  *
@@ -16,6 +16,26 @@ import { CommonProps } from '../../types/emotion';
  *     - TableRow (data rows)
  *       - TableCell (data cells)
  *
+ * ### Resizable columns
+ *
+ * `resizableColumns` gives every header cell a drag handle on its right edge.
+ * The table measures its own columns on first layout, so it opens at the widths
+ * it would have had anyway, then switches to `table-layout: fixed` and
+ * truncates overflowing cell content with an ellipsis.
+ *
+ * By default a resize is a trade between two columns: the one to the right
+ * gives up exactly what the dragged column gains, so the table stays the width
+ * it was and nothing around it reflows. The last column has nothing to its
+ * right to trade with, so it has no handle.
+ *
+ * `columnResizeMode="expand"` opts into the other model — the table grows
+ * with the dragged column and the others keep their widths — for tables that
+ * have a horizontally scrollable parent to grow into.
+ *
+ * Widths are not persisted: read them from `onColumnWidthsChange`, store them
+ * wherever the app keeps user preferences, and feed them back through
+ * `defaultColumnWidths`.
+ *
  * @category Components
  * @subcategory Data Display
  *
@@ -44,6 +64,48 @@ import { CommonProps } from '../../types/emotion';
  *
  * @example
  * ```tsx
+ * // Resizable columns, widths measured from the content
+ * <Table resizableColumns>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCellHeader>Name</TableCellHeader>
+ *       <TableCellHeader>Email</TableCellHeader>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>{rows}</TableBody>
+ * </Table>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Columns keep their widths and the table grows, so it needs to be able to
+ * // scroll sideways
+ * <Wrapper css={{ display: 'block', overflowX: 'auto' }}>
+ *   <Table resizableColumns columnResizeMode="expand">
+ *     {children}
+ *   </Table>
+ * </Wrapper>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Resizable columns, widths owned and persisted by the caller
+ * const [widths, setWidths] = useState(loadWidths);
+ *
+ * <Table
+ *   resizableColumns
+ *   columnWidths={widths}
+ *   minColumnWidth={96}
+ *   onColumnWidthsChange={(next) => {
+ *     setWidths(next);
+ *     saveWidths(next);
+ *   }}>
+ *   {children}
+ * </Table>
+ * ```
+ *
+ * @example
+ * ```tsx
  * // Table with custom styling
  * <Table css={{ border: '1px solid #ccc' }}>
  *   <TableHead>
@@ -66,15 +128,15 @@ import { CommonProps } from '../../types/emotion';
  * @see {@link TableRow} - Row component
  * @see {@link TableCell} - Data cell component
  * @see {@link TableCellHeader} - Header cell component
+ * @see {@link useColumnResize} - the resizing state, for custom header layouts
+ * @see {@link ColumnResizeHandle} - the drag handle header cells render
  *
  * @accessibility
  * - Semantic HTML table element
  * - Proper table structure for screen readers
  * - Keyboard navigation support
  * - ARIA attributes when needed
+ * - Resize handles are keyboard operable; see {@link ColumnResizeHandle}
  */
-declare const Table: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & CommonProps, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
 export default Table;

package/dist/components/Table/TableBase.d.ts

@@ -0,0 +1,36 @@
+import { CommonProps } from '../../types/emotion';
+import { ColumnResizeMode } from './types';
+export interface TableBaseProps extends CommonProps {
+    /** Applies the truncation rules resizing depends on. */
+    isResizable?: boolean;
+    /**
+     * Whether the columns have been measured yet. Fixed layout is what makes a
+     * dragged width stick, but it can only be switched on once there are widths
+     * to switch to.
+     */
+    hasColumnWidths?: boolean;
+    /** How a resize distributes width. See TableProps.columnResizeMode. */
+    columnResizeMode?: ColumnResizeMode;
+}
+/**
+ * The styled element behind `Table`.
+ *
+ * Kept separate so `Table` can stay a component with state and a colgroup while
+ * everything that composes it — `NestedTable`, consumer `styled(Table)` calls —
+ * keeps getting a plain table element underneath.
+ *
+ * ### Nothing per-pixel belongs in here
+ *
+ * Every distinct value interpolated into this template mints another emotion
+ * class and injects another stylesheet rule, permanently. A width that changes
+ * with the pointer would add one rule per frame of every drag — a few hundred
+ * within seconds — and each insertion invalidates the document's style cache,
+ * so resizing gets progressively slower until the page is reloaded. The table's
+ * width in `expand` mode is therefore an inline style, set by `Table`, and the
+ * props here only ever take a handful of values.
+ */
+declare const TableBase: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & TableBaseProps, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export default TableBase;

package/dist/components/Table/consts.d.ts

@@ -0,0 +1,8 @@
+/** Smallest width a column can be dragged to, in pixels. */
+export declare const DEFAULT_MIN_COLUMN_WIDTH = 64;
+/** Width change per arrow-key press on a resize handle, in pixels. */
+export declare const KEYBOARD_RESIZE_STEP = 8;
+/** Width change per Shift + arrow-key press on a resize handle, in pixels. */
+export declare const KEYBOARD_RESIZE_STEP_LARGE = 40;
+/** Hit area of the drag handle, inset into the right edge of the cell. */
+export declare const RESIZE_HANDLE_WIDTH = 8;

package/dist/components/Table/hooks/useColumnResize.d.ts

@@ -0,0 +1,76 @@
+import { ColumnResizeApi, UseColumnResizeOptions } from '../types';
+/**
+ * Column resizing for a `Table`, without any of the rendering.
+ *
+ * Owns the width of every column and the pointer/keyboard maths that moves it.
+ * `Table`'s `resizableColumns` prop is a thin wrapper over this hook — reach for
+ * the hook directly when the header is built from something other than
+ * `TableCellHeader`, or when the handles need to live somewhere unusual.
+ *
+ * ## Widths are measured, not invented
+ *
+ * With no `defaultColumnWidths`, the first layout pass reads the columns' real
+ * rendered widths off the DOM while the table is still in `table-layout: auto`,
+ * and seeds state from those. The table only switches to `fixed` once it has
+ * numbers to switch to, so an uncontrolled table starts out looking exactly as
+ * it did before resizing was turned on. Under jsdom every measurement comes back
+ * `0`; the hook then stays unseeded, so tests that care about widths should pass
+ * `defaultColumnWidths` explicitly.
+ *
+ * ## Two ways to spend the width
+ *
+ * In the default `fit` mode a resize is a trade: the column to the right gives
+ * up exactly what the dragged column gains, so the table's own width never
+ * changes and no surrounding layout moves. The last column has nothing to its
+ * right and so cannot be dragged.
+ *
+ * In `expand` mode the table grows instead, and the columns beside the dragged
+ * one keep their widths. That needs a horizontally scrollable container, or the
+ * table will overflow whatever is holding it.
+ *
+ * A column marked `data-column-pinned="true"` on its header cell never pays for
+ * the column before it in `fit` mode, so that handle is inert — pinning a
+ * column pins it against every route to changing its width, not just its own
+ * handle.
+ *
+ * ## Stored widths are not always rendered widths
+ *
+ * A table in `fit` mode is still `width: 100%`, and fixed layout spreads any
+ * difference between the widths it was given and the width it actually has
+ * across the columns in proportion. Widths of `[220, 140, 140, 96]` in a
+ * 1248px table therefore render at a little over twice their stated size.
+ *
+ * That makes two coordinate spaces: the caller's units, which the widths and
+ * the min/max bounds are in, and rendered pixels, which is what a pointer
+ * moves through. Every gesture is converted between them, so a column tracks
+ * the pointer exactly no matter how far apart the two spaces are — without
+ * quietly rewriting the numbers the caller chose.
+ *
+ * @example
+ * ```tsx
+ * const { columnWidths, tableRef, getResizeHandleProps } = useColumnResize({
+ *   defaultColumnWidths: [240, 160, 160],
+ *   onColumnWidthsChange: (widths) => localStorage.setItem('cols', JSON.stringify(widths)),
+ * });
+ *
+ * <table ref={tableRef} style={{ tableLayout: 'fixed' }}>
+ *   <colgroup>
+ *     {columnWidths.map((width, index) => <col key={index} style={{ width }} />)}
+ *   </colgroup>
+ *   <thead>
+ *     <tr>
+ *       {headers.map((header, index) => (
+ *         <th key={header}>
+ *           {header}
+ *           <span {...getResizeHandleProps(index)} />
+ *         </th>
+ *       ))}
+ *     </tr>
+ *   </thead>
+ * </table>
+ * ```
+ *
+ * @see {@link Table} - pass `resizableColumns` to get all of this wired up
+ * @see {@link ColumnResizeHandle} - the handle `TableCellHeader` renders for you
+ */
+export declare const useColumnResize: (options?: UseColumnResizeOptions) => ColumnResizeApi;

package/dist/components/Table/index.d.ts

@@ -1 +1,6 @@
 export { default } from './Table';
+export { default as ColumnResizeHandle } from './ColumnResizeHandle';
+export { useColumnResize } from './hooks/useColumnResize';
+export { useColumnResizeContext } from './ColumnResizeContext';
+export * from './types';
+export * from './ColumnResizeHandle.types';

package/dist/components/Table/types.d.ts

@@ -0,0 +1,149 @@
+import { AriaAttributes, KeyboardEvent, PointerEvent, RefObject, TableHTMLAttributes } from 'react';
+import { CommonProps } from '../../types/emotion';
+/**
+ * How a resize distributes width.
+ *
+ * - `fit` — the column to the right gives up what the dragged column gains, so
+ *   the table's own width never changes. The last column cannot be dragged,
+ *   having nothing to its right to trade with.
+ * - `expand` — the table grows and the other columns keep their widths, so the
+ *   table needs a horizontally scrollable parent.
+ */
+export type ColumnResizeMode = 'fit' | 'expand';
+/** Options shared by `useColumnResize` and `Table`'s resizable mode. */
+export interface ColumnResizeOptions {
+    /**
+     * Column widths in pixels, one per column. Passing this prop puts the table
+     * into controlled mode for the life of the component — hold the value in
+     * state and update it from `onColumnWidthsChange`, or the columns will not
+     * move when dragged.
+     */
+    columnWidths?: number[];
+    /**
+     * Starting column widths in pixels, for the uncontrolled case. Omit it and
+     * the table measures its own columns on first layout, so it opens at whatever
+     * widths it would have had without resizing.
+     */
+    defaultColumnWidths?: number[];
+    /**
+     * Called on every width change, including each frame of a drag. Persisting
+     * widths is the caller's job — write them to storage or user preferences here
+     * and feed them back through `defaultColumnWidths`.
+     */
+    onColumnWidthsChange?: (columnWidths: number[]) => void;
+    /**
+     * Narrowest a column can be dragged, in pixels.
+     * @default 64
+     */
+    minColumnWidth?: number;
+    /**
+     * Widest a column can be dragged, in pixels. Unbounded when omitted.
+     */
+    maxColumnWidth?: number;
+    /**
+     * Whether a resize is paid for by the next column or by the table's own
+     * width. Defaults to `fit`, which keeps the table exactly as wide as it was
+     * — surrounding layout never moves because a user dragged a column.
+     *
+     * Switch to `expand` when the table lives in its own scroll container and
+     * columns should keep the widths the user gave them.
+     *
+     * @default 'fit'
+     */
+    columnResizeMode?: ColumnResizeMode;
+}
+/** Props for the element that starts a drag. Spread onto any element. */
+export interface ResizeHandleProps extends Pick<AriaAttributes, 'aria-orientation' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax'> {
+    role: 'separator';
+    tabIndex: number;
+    'data-resizing'?: 'true';
+    onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+    onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+    onPointerUp: (event: PointerEvent<HTMLElement>) => void;
+    onPointerCancel: (event: PointerEvent<HTMLElement>) => void;
+    onDoubleClick: () => void;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+}
+/**
+ * Options for {@link useColumnResize}.
+ *
+ * Everything `Table` accepts for resizing, plus the two escape hatches `Table`
+ * itself needs — `enabled` and `controlled`.
+ *
+ * @example
+ * ```tsx
+ * useColumnResize({
+ *   defaultColumnWidths: [240, 160, 160],
+ *   minColumnWidth: 96,
+ *   onColumnWidthsChange: saveWidths,
+ * });
+ * ```
+ */
+export interface UseColumnResizeOptions extends ColumnResizeOptions {
+    /**
+     * Whether to measure and track widths at all. `Table` passes its
+     * `resizableColumns` prop through so the hook can be called unconditionally.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Overrides the controlled/uncontrolled decision, which is otherwise taken
+     * from whether `columnWidths` was passed. `Table` sets it explicitly because
+     * it rebuilds the options object rather than forwarding its own props.
+     */
+    controlled?: boolean;
+}
+/** What `useColumnResize` hands back. */
+export interface ColumnResizeApi {
+    /** Current width of each column, in pixels. Empty until measured. */
+    columnWidths: number[];
+    /** Attach to the `table` element so the hook can measure its columns. */
+    tableRef: RefObject<HTMLTableElement | null>;
+    /** Whether a drag is in progress. */
+    isResizing: boolean;
+    /** The column being dragged, or `null`. */
+    resizingColumnIndex: number | null;
+    minColumnWidth: number;
+    maxColumnWidth?: number;
+    columnResizeMode: ColumnResizeMode;
+    /**
+     * Sets one column's width, clamped to the min/max. In `fit` mode the width is
+     * taken from, or given back to, the column on the right, and the request is
+     * clamped by that column's limits as well as this one's.
+     */
+    setColumnWidth: (index: number, width: number) => void;
+    /** Adds to one column's width, clamped to the min/max. */
+    resizeColumnBy: (index: number, delta: number) => void;
+    /** Restores a column to the width it started at. */
+    resetColumn: (index: number) => void;
+    /** Builds the props for the drag handle of a given column. */
+    getResizeHandleProps: (index: number) => ResizeHandleProps;
+}
+/**
+ * Props for the {@link Table} component.
+ *
+ * Every attribute of a `table` element, plus the column-resizing options that
+ * `resizableColumns` turns on.
+ *
+ * @example
+ * ```tsx
+ * <Table resizableColumns minColumnWidth={96}>
+ *   {children}
+ * </Table>
+ * ```
+ */
+export interface TableProps extends CommonProps, ColumnResizeOptions, TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * Lets columns be resized by dragging the right edge of each header cell.
+     *
+     * Turning this on switches the table to `table-layout: fixed` once it has
+     * measured its columns, truncates overflowing cell content with an ellipsis,
+     * and makes every `TableCellHeader` render its own drag handle.
+     *
+     * By default the table's own width does not change — see
+     * `columnResizeMode`.
+     *
+     * @default false
+     */
+    resizableColumns?: boolean;
+}

package/dist/components/TableCellHeader/TableCellHeader.d.ts

@@ -53,6 +53,7 @@ import { TableCellHeaderProps } from './types';
  * @see {@link TableRow} - Row component (use in TableHead)
  * @see {@link TableCell} - Data cell component (use in TableBody)
  * @see {@link TableBody} - Body section component
+ * @see {@link ColumnResizeHandle} - the handle rendered inside resizable headers
  *
  * @accessibility
  * - Semantic HTML th element (renders as th)
@@ -60,5 +61,5 @@ import { TableCellHeaderProps } from './types';
  * - Supports ARIA attributes via TableCellProps
  * - Better accessibility than using TableCell in headers
  */
-declare const TableCellHeader: ({ children, ...props }: React.PropsWithChildren<TableCellHeaderProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TableCellHeader: ({ children, resizable, ...props }: React.PropsWithChildren<TableCellHeaderProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default TableCellHeader;