@acronis-platform/ui-react 0.62.0 → 1.0.0

package/dist/src/components/ui/popover/popover.docs.d.ts

@@ -14,11 +14,36 @@ export interface PopoverContentProps {
     portal?: boolean;
     /**
      * Portal container. Pass a shadow-root mount for isolated-style previews
-     * (the docs demos do this via `useShadowMount`).
+     * (the docs demos do this via `useShadowMount`), or a `RefObject` pointing
+     * at a not-yet-mounted container element — its `current` is resolved once
+     * attached, so it doesn't need to be available on first render.
      */
-    portalContainer?: HTMLElement | null;
+    portalContainer?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;
     /** Keep the content mounted while closed. */
     keepMounted?: boolean;
+    /**
+     * Element/rect the popup is confined to when avoiding collisions. Defaults
+     * to Base UI's own `'clipping-ancestors'` behavior, left alone here — see
+     * `positionMethod` for why that already avoids clipping inside a
+     * constrained `portalContainer`.
+     */
+    collisionBoundary?: Element | Element[] | {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | 'clipping-ancestors';
+    /**
+     * Which CSS `position` the popup uses. Defaults to `fixed` whenever the
+     * popup is portaled into a resolved `portalContainer`, so it escapes a
+     * plain overflow-clipping container (e.g. `overflow: hidden`) — the
+     * collision-detection library drops such an ancestor from its clipping
+     * chain for a `fixed`-positioned element, resolving to the real,
+     * scroll-independent viewport. Not a guarantee against an ancestor that
+     * also has a `transform`/`filter`/`will-change`/etc., which establishes
+     * its own containing block for fixed descendants and still clips.
+     */
+    positionMethod?: 'absolute' | 'fixed';
     /** Extra classes merged onto the popup. */
     className?: string;
     children?: React.ReactNode;

package/dist/src/components/ui/scroll-area/scroll-area.d.ts

@@ -5,6 +5,30 @@ declare const ScrollBar: React.ForwardRefExoticComponent<Omit<Omit<import('@base
 export interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
     /** Which scrollbar(s) to render. @default 'vertical' */
     orientation?: 'vertical' | 'horizontal' | 'both';
+    /**
+     * Ref to the **viewport** — the element that actually scrolls.
+     *
+     * `ref` reaches the root, which is `overflow: hidden` and never scrolls, so
+     * it reports `scrollTop: 0` and `scrollHeight === clientHeight` forever.
+     * Anything that measures, observes, or programmatically scrolls the region
+     * needs this one instead: a virtualizer's scroll element, an infinite-scroll
+     * observer, a scroll-to-item call.
+     */
+    viewportRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Extra props for the viewport — a scroll handler, a tab index, or
+     * `data-*` attributes that must sit on the element that scrolls rather than
+     * on the wrapper around it.
+     *
+     * The `data-*` index signature is deliberate: JSX grants intrinsic elements
+     * an arbitrary-`data-*` escape hatch, but a props object typed as
+     * `HTMLAttributes` does not get it — so without this, the main thing this
+     * prop exists for (marking the scrolling element for an observer) would not
+     * type-check.
+     */
+    viewportProps?: React.HTMLAttributes<HTMLDivElement> & {
+        readonly [attribute: `data-${string}`]: unknown;
+    };
 }
 declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
 export { ScrollArea, ScrollBar };

package/dist/src/components/ui/tag/tag.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const tagVariants: (props?: ({
-    variant?: "info" | "success" | "warning" | "critical" | "ai" | "neutral" | "danger" | null | undefined;
+    variant?: "info" | "success" | "warning" | "critical" | "danger" | "ai" | "neutral" | null | undefined;
     size?: "default" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TagProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tagVariants> {

package/dist/src/components/ui/timer/index.d.ts

@@ -0,0 +1 @@
+export { Timer, type TimerProps } from './timer';

package/dist/src/components/ui/timer/timer.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export interface TimerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /**
+     * The formatted time to display, e.g. `"12:01:45"`. Rendered with tabular
+     * figures so the readout doesn't jitter as the digits change. The component
+     * neither ticks nor formats — pass an already-formatted value.
+     */
+    value: React.ReactNode;
+    /**
+     * The actions, as `ButtonGroupItem` elements in visual order. Omit them for a
+     * read-only readout — with no actions the divider is dropped too.
+     */
+    children?: React.ReactNode;
+    /**
+     * Accessible name for the action cluster's toolbar. Localize it; the default
+     * is English.
+     */
+    actionsLabel?: string;
+}
+/**
+ * An elapsed-time readout paired with a cluster of icon-only actions.
+ *
+ * The readout is a `role="timer"` live region — implicitly `aria-live="off"`,
+ * so it is not announced on every tick. Each action needs its own accessible
+ * name; the cluster as a whole is named by `actionsLabel`.
+ */
+declare const Timer: React.ForwardRefExoticComponent<TimerProps & React.RefAttributes<HTMLDivElement>>;
+export { Timer };

package/dist/src/components/ui/toast/index.d.ts

@@ -1 +1 @@
-export { toast, Toaster, type ToasterProps, type ToastType, type ToastOptions, } from './toast';
+export { toast, Toaster, toastVariants, type ToasterProps, type ToastAction, type ToastType, type ToastVariant, type ToastOptions, } from './toast';

package/dist/src/components/ui/toast/toast.d.ts

@@ -1,39 +1,72 @@
 import { Toast as ToastPrimitive } from '@base-ui/react/toast';
+import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-export type ToastType = 'success' | 'info' | 'warning' | 'error' | 'loading';
+declare const toastVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "critical" | "danger" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
+/**
+ * A toast's kind. The five severities match the Figma variants; `loading` has no
+ * Figma variant — it is the spinner state `toast.promise` needs.
+ */
+export type ToastType = ToastVariant | 'loading';
+export interface ToastAction {
+    /** The button's label. */
+    label: React.ReactNode;
+    /** Invoked on click. The toast is not dismissed automatically. */
+    onClick?: () => void;
+    /**
+     * Button style. Defaults to `secondary` for the first action and `ghost` for
+     * the rest, matching the Figma's button pairing.
+     */
+    variant?: 'secondary' | 'ghost';
+}
+/** Custom per-toast payload carried through the Base UI manager. */
+interface ToastData {
+    actions?: ToastAction[];
+    dismissable?: boolean;
+}
 export interface ToastOptions {
-    /** Secondary line under the title. */
+    /** Secondary line under the title; clamped to three lines. */
     description?: React.ReactNode;
     /** Auto-dismiss delay in ms; `0` keeps the toast until dismissed. */
     timeout?: number;
-    /** A single inline action button (e.g. Undo). */
-    action?: {
-        label: React.ReactNode;
-        onClick?: () => void;
-    };
+    /** Action buttons rendered in a wrapping row under the text. */
+    actions?: ToastAction[];
+    /**
+     * Whether the toast shows its dismiss control and can be swiped away.
+     * Defaults to `true`. A non-dismissable toast with `timeout: 0` can only be
+     * removed with `toast.dismiss(id)`.
+     */
+    dismissable?: boolean;
     /** Stable id — re-adding with the same id updates the toast in place. */
     id?: string;
 }
 /**
- * Imperative toast API. `toast(title, options)` shows a neutral toast;
- * `toast.success` / `info` / `warning` / `error` / `loading` set the variant.
- * `toast.dismiss(id?)` closes one (or all) and `toast.promise` ties a toast to a
- * promise's lifecycle.
+ * Imperative toast API. `toast(title, options)` shows an info toast;
+ * `toast.info` / `success` / `warning` / `critical` / `danger` set the severity
+ * and `toast.loading` shows a persistent spinner. `toast.dismiss(id?)` closes one
+ * (or all) and `toast.promise` ties a toast to a promise's lifecycle.
  */
 declare const toast: ((title: React.ReactNode, options?: ToastOptions) => string) & {
-    success: (title: React.ReactNode, options?: ToastOptions) => string;
     info: (title: React.ReactNode, options?: ToastOptions) => string;
+    success: (title: React.ReactNode, options?: ToastOptions) => string;
     warning: (title: React.ReactNode, options?: ToastOptions) => string;
-    error: (title: React.ReactNode, options?: ToastOptions) => string;
+    critical: (title: React.ReactNode, options?: ToastOptions) => string;
+    danger: (title: React.ReactNode, options?: ToastOptions) => string;
     loading: (title: React.ReactNode, options?: ToastOptions) => string;
     dismiss: (id?: string) => void;
-    promise: <Value, T extends any = any>(promiseValue: Promise<Value>, options: import('@base-ui/react').ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
+    promise: <Value, T extends ToastData = ToastData>(promiseValue: Promise<Value>, options: import('@base-ui/react').ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
 };
 export interface ToasterProps {
     /** Default auto-dismiss delay in ms for toasts that don't set one. */
     timeout?: number;
     /** Max toasts shown at once; the oldest is dropped past the limit. */
     limit?: number;
+    /** Accessible name for the toast region. */
+    label?: string;
+    /** Accessible name for each toast's dismiss control. */
+    closeAriaLabel?: string;
     /**
      * Portal container for the toast stack. Pass a shadow-root mount for
      * isolated-style previews (the docs demos do this via `useShadowMount`).
@@ -41,8 +74,8 @@ export interface ToasterProps {
     portalContainer?: ToastPrimitive.Portal.Props['container'];
 }
 /**
- * The toast region. Render once near the app root; it portals a bottom-right
- * stack and renders every queued toast. Trigger toasts with the `toast` API.
+ * The toast region. Render once near the app root; it portals a bottom-end stack
+ * and renders every queued toast. Trigger toasts with the `toast` API.
  */
-declare function Toaster({ timeout, limit, portalContainer }: ToasterProps): import("react/jsx-runtime").JSX.Element;
-export { toast, Toaster };
+declare function Toaster({ timeout, limit, label, closeAriaLabel, portalContainer, }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export { toast, Toaster, toastVariants };

package/dist/src/components/ui/toast/toast.docs.d.ts

@@ -4,6 +4,10 @@ export interface ToasterProps {
     timeout?: number;
     /** Max toasts shown at once; the oldest is dropped past the limit (default 3). */
     limit?: number;
+    /** Accessible name for the toast region (default `'Notifications'`). */
+    label?: string;
+    /** Accessible name for each toast's dismiss control (default `'Close'`). */
+    closeAriaLabel?: string;
     /**
      * Portal container for the toast stack. Pass a shadow-root mount for
      * isolated-style previews (the docs demos do this via `useShadowMount`).

package/dist/src/components/ui/trend-indicator/trend-indicator.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const trendIndicatorVariants: (props?: ({
-    sentiment?: "neutral" | "positive" | "negative" | null | undefined;
+    sentiment?: "positive" | "neutral" | "negative" | null | undefined;
     size?: "small" | "medium" | null | undefined;
     variant?: "inline" | "badge" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/src/components/ui/truncate-text/__tests__/middle-truncate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/ui/truncate-text/index.d.ts

@@ -0,0 +1,3 @@
+export { TruncateText, type TruncateTextProps } from './truncate-text';
+export { middleTruncate, type MiddleTruncateOptions } from './middle-truncate';
+export { measureTextWidth } from './text-width';

package/dist/src/components/ui/truncate-text/middle-truncate.d.ts

@@ -0,0 +1,13 @@
+export interface MiddleTruncateOptions {
+    /** Returns the rendered width of `candidate`, in the same unit as `maxWidth`. */
+    readonly measure: (candidate: string) => number;
+    /** Inserted between the kept start and end slices. Defaults to `'…'`. */
+    readonly ellipsis?: string;
+}
+/**
+ * Returns `text` unchanged if it already fits `maxWidth`, otherwise the widest
+ * start+ellipsis+end slice that does. Never returns something wider than
+ * `maxWidth`, even when nothing meaningful fits — the degenerate result is the
+ * bare ellipsis, or `''` if `maxWidth` cannot fit that either.
+ */
+export declare function middleTruncate(text: string, maxWidth: number, { measure, ellipsis }: MiddleTruncateOptions): string;

package/dist/src/components/ui/truncate-text/text-width.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The rendered width of `text` in `font` (a CSS `font` shorthand string, e.g. from
+ * `getComputedStyle(el).font`), in CSS pixels.
+ *
+ * Falls back to a fixed per-character estimate when `canvas` 2D contexts are
+ * unavailable (jsdom's default; the real component is exercised by the browser
+ * test project instead) — a rough width is enough to keep the search from
+ * throwing, and nothing in the unit project renders far enough to compare it
+ * against a pixel budget.
+ */
+export declare function measureTextWidth(text: string, font: string): number;

package/dist/src/components/ui/truncate-text/truncate-text.d.ts

@@ -0,0 +1,45 @@
+import { TooltipContent } from '../tooltip';
+import * as React from 'react';
+type TooltipContentProps = React.ComponentProps<typeof TooltipContent>;
+export interface TruncateTextProps {
+    /** The text to display. Also used verbatim as the tooltip body when truncated. */
+    children: string;
+    /**
+     * Where the ellipsis goes. `'end'` (default) is the familiar CSS
+     * `text-overflow: ellipsis` — reach for `'middle'` when the distinguishing
+     * part of the value is at the tail (a URL, a hash) rather than the start.
+     */
+    mode?: 'middle' | 'end';
+    /** Which side the tooltip opens on. Defaults to `top`. */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Max lines before truncating, in `'end'` mode only: `1` (default) =
+     * single-line ellipsis; `>1` = a multi-line clamp. Ignored in `'middle'`
+     * mode, which is inherently single-line.
+     */
+    lines?: number;
+    /**
+     * Force the tooltip open on mount (only has effect when the text is truncated).
+     * Mainly for stories / visual review; normal usage reveals it on hover/focus.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Container the tooltip popup portals into. Pass a shadow root (e.g. a
+     * micro-frontend mount point) so the popup inherits the kit's styles; defaults
+     * to the document body.
+     */
+    portalContainer?: TooltipContentProps['portalContainer'];
+    /** Merged onto the rendered `<span>`. */
+    className?: string;
+}
+/**
+ * Text that truncates with an ellipsis and reveals its full value in a tooltip
+ * **only when it's actually clipped** — the tooltip is skipped when everything
+ * fits, so short cells don't get a pointless hover target. Ideal for table cells.
+ *
+ * `'end'`-mode truncation is detected by comparing scroll vs client size and
+ * re-checked on resize; `'middle'`-mode measures a real font metric via canvas
+ * (there is no native CSS middle-ellipsis) and re-measures the same way.
+ */
+export declare const TruncateText: React.ForwardRefExoticComponent<TruncateTextProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/src/components/ui/truncate-text/truncate-text.docs.d.ts

@@ -0,0 +1,35 @@
+import type * as React from 'react';
+/** Props for `TruncateText`. */
+export interface TruncateTextProps {
+    /** The text to display. Also used verbatim as the tooltip body when truncated. */
+    children: string;
+    /**
+     * Where the ellipsis goes.
+     * - `'end'` (default) — CSS `text-overflow: ellipsis` for single-line; `-webkit-line-clamp` when `lines > 1`.
+     * - `'middle'` — canvas binary-search preserving both ends; ideal for URLs, paths, and hashes.
+     */
+    mode?: 'end' | 'middle';
+    /** Which side the tooltip opens on. Defaults to `'top'`. */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Max lines before truncating (`'end'` mode only).
+     * `1` (default) = single-line ellipsis; `>1` = multi-line `-webkit-line-clamp`.
+     * Ignored in `'middle'` mode, which is inherently single-line.
+     */
+    lines?: number;
+    /**
+     * Force the tooltip open on mount — only has effect when the text is truncated.
+     * Useful for stories and visual review; normal usage reveals the tooltip on hover/focus.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Container the tooltip popup portals into. Pass a shadow-root mount (e.g. a
+     * micro-frontend mount point) so the popup inherits the kit's styles.
+     * Defaults to `document.body`.
+     */
+    portalContainer?: HTMLElement | ShadowRoot | null;
+    /** Extra classes merged onto the rendered `<span>`. */
+    className?: string;
+    /** Forwarded to the underlying `<span>`. */
+    ref?: React.Ref<HTMLSpanElement>;
+}

package/dist/src/index.d.ts

@@ -12,6 +12,7 @@ export * from './components/ui/avatar';
 export * from './components/ui/bar-chart';
 export * from './components/ui/breadcrumb';
 export * from './components/ui/button';
+export * from './components/ui/button-group';
 export * from './components/ui/button-menu';
 export * from './components/ui/calendar';
 export * from './components/ui/calendar-panel';
@@ -36,7 +37,9 @@ export * from './components/ui/dialog-welcome';
 export * from './components/ui/dropdown-menu';
 export * from './components/ui/empty';
 export * from './components/ui/field';
+export * from './components/ui/fitted-actions';
 export * from './components/ui/filter-cards';
+export * from './components/ui/filter-chips';
 export * from './components/ui/funnel-chart';
 export * from './components/ui/grid';
 export * from './components/ui/histogram';
@@ -84,6 +87,7 @@ export * from './components/ui/sidebar-primary';
 export * from './components/ui/sidebar-secondary';
 export * from './components/ui/button-icon';
 export * from './components/ui/button-icon-input';
+export * from './components/ui/button-icon-menu';
 export * from './components/ui/filter-search';
 export * from './components/ui/switch';
 export * from './components/ui/table';
@@ -92,8 +96,10 @@ export * from './components/ui/toast';
 export * from './components/ui/toggle-group';
 export * from './components/ui/toolbar';
 export * from './components/ui/tooltip';
+export * from './components/ui/truncate-text';
 export * from './components/ui/tag';
 export * from './components/ui/timeline';
+export * from './components/ui/timer';
 export { Tag as Badge, type TagProps as BadgeProps, } from './components/ui/tag';
 export * from './components/ui/treemap';
 export * from './components/ui/trend-indicator';