@acronis-platform/ui-react 0.57.0 → 0.57.1

package/dist/src/components/ui/widget-placeholder/widget-placeholder.docs.d.ts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+/** Props for `WidgetPlaceholder` — the root widget card. */
+export interface WidgetPlaceholderProps {
+    /**
+     * Make the whole widget focusable (`tabindex=0`) and clickable — adds
+     * hover/active surface tints and a focus ring. Wire the behavior with
+     * `onClick`.
+     */
+    interactive?: boolean;
+    /** Extra classes merged onto the root. */
+    className?: string;
+    /** The composed parts (header / content / footer). */
+    children?: React.ReactNode;
+}

package/dist/src/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useSortState, type SortDirection, type SortState, type SortComparator, type UseSortStateOptions, type UseSortStateResult, } from './use-sort-state';
+export { useIntersectionObserver, type UseIntersectionObserverOptions, } from './use-intersection-observer';
+export { useTableUrlState, parseTableUrlState, serializeTableUrlState, DEFAULT_TABLE_URL_PARAM_KEYS, type TableUrlState, type TablePaginationState, type TableSortingState, type TableColumnFilterState, type TableUrlParamKeys, type TableUrlUpdater, type UseTableUrlStateOptions, type UseTableUrlStateResult, } from './use-table-url-state';

package/dist/src/hooks/use-intersection-observer.d.ts

@@ -0,0 +1,26 @@
+export interface UseIntersectionObserverOptions extends IntersectionObserverInit {
+    /** Called each time the observed element intersects its root. */
+    onIntersect: () => void;
+    /**
+     * Skip observing — e.g. there's nothing left to load, or a load is already
+     * in flight. Disconnects any existing observer.
+     */
+    disabled?: boolean;
+}
+/**
+ * Wires a single `IntersectionObserver` on the returned ref callback's element
+ * and calls `onIntersect` each time it intersects. Re-creates the observer when
+ * the element, `disabled`, or any `IntersectionObserverInit` option changes;
+ * disconnects on cleanup. `onIntersect` itself doesn't need to be memoized by
+ * the caller — the latest version is always used (via a ref) without
+ * reconnecting the observer.
+ *
+ * Takes a ref *callback* (not a `RefObject`) rather than accepting one from the
+ * caller — attaching to `element.current` inside a `useEffect` keyed on a
+ * `RefObject` misses conditionally-mounted elements: the `ref` object's
+ * identity never changes when its `.current` is populated, so an effect keyed
+ * on it (rather than on the element itself) never re-runs once the element
+ * actually mounts. Routing the DOM node through `useState` instead makes the
+ * mount itself a dependency.
+ */
+export declare function useIntersectionObserver<T extends Element>({ onIntersect, disabled, root, rootMargin, threshold, }: UseIntersectionObserverOptions): (node: T | null) => void;

package/dist/src/hooks/use-sort-state.d.ts

@@ -0,0 +1,46 @@
+export type SortDirection = 'asc' | 'desc' | false;
+export interface SortState {
+    columnId: string;
+    direction: 'asc' | 'desc';
+}
+/**
+ * Compares two rows for a column. Ascending order; the hook negates the result
+ * for descending. Receives the full rows so a custom comparator has access to
+ * every field.
+ */
+export type SortComparator<TData> = (a: TData, b: TData) => number;
+export interface UseSortStateOptions<TData> {
+    /** Rows to sort. */
+    data: TData[];
+    /** Initial sorted column + direction. */
+    initialSort?: SortState | null;
+    /**
+     * Custom per-column comparators keyed by column id. When absent for a column,
+     * the default alphanumeric comparator on `getValue(row, columnId)` is used.
+     */
+    comparators?: Record<string, SortComparator<TData>>;
+    /**
+     * How to read a column's value from a row for the default comparator.
+     * Defaults to `row[columnId]`.
+     */
+    getValue?: (row: TData, columnId: string) => unknown;
+}
+export interface UseSortStateResult<TData> {
+    /** The rows sorted by the current sort state (unsorted `data` when none). */
+    sortedData: TData[];
+    /** The current sort, or `null` when unsorted. */
+    sort: SortState | null;
+    /** Directly set (or clear) the sort. */
+    setSort: (sort: SortState | null) => void;
+    /** Cycle a column's sort: none → asc → desc → none. */
+    toggleSort: (columnId: string) => void;
+    /** Direction for a column, shaped for `TableHead`'s `sortDirection` prop. */
+    getSortDirection: (columnId: string) => SortDirection;
+}
+/**
+ * Headless client-side sort state for the `Table` primitives (no TanStack
+ * dependency). Drives `TableHead`'s `sortable`/`sortDirection`/`onSort` props
+ * and returns the sorted rows. Default comparator is alphanumeric; pass
+ * `comparators` to override per column.
+ */
+export declare function useSortState<TData>({ data, initialSort, comparators, getValue, }: UseSortStateOptions<TData>): UseSortStateResult<TData>;

package/dist/src/hooks/use-table-url-state.d.ts

@@ -0,0 +1,85 @@
+export interface TablePaginationState {
+    /** Zero-based page index. */
+    pageIndex: number;
+    /** Rows per page. */
+    pageSize: number;
+}
+export interface TableSortingState {
+    /** Column id. */
+    id: string;
+    /** `true` for descending. */
+    desc: boolean;
+}
+export interface TableColumnFilterState {
+    /** Column id. */
+    id: string;
+    /** Filter value (string-encoded in the URL). */
+    value: string;
+}
+/**
+ * Controlled table state. The three fields mirror TanStack's `PaginationState`,
+ * `SortingState`, and `ColumnFiltersState` shapes (filter value narrowed to
+ * `string`) so they can wire straight into `onPaginationChange` /
+ * `onSortingChange` / `onColumnFiltersChange`.
+ */
+export interface TableUrlState {
+    pagination: TablePaginationState;
+    sorting: TableSortingState[];
+    columnFilters: TableColumnFilterState[];
+}
+/** Query-string keys. Namespaced (`tbl_*`) to avoid collisions with Storybook's
+ * own `path`/`args`/`globals` params on a shared preview-iframe URL. */
+export interface TableUrlParamKeys {
+    page: string;
+    size: string;
+    sort: string;
+    filter: string;
+}
+export declare const DEFAULT_TABLE_URL_PARAM_KEYS: TableUrlParamKeys;
+export interface UseTableUrlStateOptions {
+    /** Default page size; omitted from the URL when the size matches it. */
+    defaultPageSize?: number;
+    /** Override the namespaced query-string keys. */
+    paramKeys?: Partial<TableUrlParamKeys>;
+}
+export type TableUrlUpdater<T> = T | ((old: T) => T);
+export interface UseTableUrlStateResult {
+    state: TableUrlState;
+    /** Accepts a value or updater — shaped for TanStack's `onPaginationChange`. */
+    setPagination: (updater: TableUrlUpdater<TablePaginationState>) => void;
+    /** Accepts a value or updater — shaped for TanStack's `onSortingChange`. */
+    setSorting: (updater: TableUrlUpdater<TableSortingState[]>) => void;
+    /** Accepts a value or updater — shaped for TanStack's `onColumnFiltersChange`. */
+    setColumnFilters: (updater: TableUrlUpdater<TableColumnFilterState[]>) => void;
+}
+/**
+ * Parses table state out of a query string. Pure — safe to reuse for seeding a
+ * story or an SSR default. `search` may include or omit the leading `?`.
+ *
+ * Encoding: `tbl_page` is 1-based; `tbl_sort` is `id:asc|desc` pairs joined by
+ * `,`; `tbl_filter` is `id:<encoded-value>` pairs joined by `,` (the value is
+ * `encodeURIComponent`-escaped so it may contain `:`/`,`). Column ids must not
+ * contain `:` or `,`.
+ */
+export declare function parseTableUrlState(search: string, { defaultPageSize, paramKeys, }?: {
+    defaultPageSize?: number;
+    paramKeys?: TableUrlParamKeys;
+}): TableUrlState;
+/**
+ * Serializes table state onto a query string, preserving any foreign params
+ * already present in `search` (e.g. Storybook's `path`/`args`/`globals`).
+ * Returns the query string without a leading `?` (empty string when no params).
+ */
+export declare function serializeTableUrlState(state: TableUrlState, search: string, { defaultPageSize, paramKeys, }?: {
+    defaultPageSize?: number;
+    paramKeys?: TableUrlParamKeys;
+}): string;
+/**
+ * Router-agnostic hook that syncs controlled table state (pagination / sorting
+ * / column filters) to and from the URL query string via `history.pushState` +
+ * `popstate`. Depends only on `window.location` / `window.history`, so it works
+ * with any router (or none). Query keys are namespaced (`tbl_*`) so they never
+ * collide with other params on the same URL. Reads initial state from the URL,
+ * so a bookmarked link restores the table's view.
+ */
+export declare function useTableUrlState(options?: UseTableUrlStateOptions): UseTableUrlStateResult;

package/dist/src/index.d.ts

@@ -0,0 +1,74 @@
+export { cn } from './lib/utils';
+export * from './hooks';
+export { PortalContainerProvider, usePortalContainer, type PortalContainerProviderProps, } from './lib/portal-container';
+export * from './components/ui/accordion';
+export * from './components/ui/alert';
+export * from './components/ui/app-shell';
+export * from './components/ui/app-shell-chat';
+export * from './components/ui/auth-layout';
+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-menu';
+export * from './components/ui/calendar';
+export * from './components/ui/card';
+export * from './components/ui/card-filter';
+export * from './components/ui/chart';
+export * from './components/ui/checkbox';
+export * from './components/ui/chip';
+export * from './components/ui/collapsible';
+export * from './components/ui/combobox';
+export * from './components/ui/data-table';
+export * from './components/ui/date-range-picker';
+export * from './components/ui/description-list';
+export * from './components/ui/dialog';
+export * from './components/ui/dropdown-menu';
+export * from './components/ui/empty';
+export * from './components/ui/field';
+export * from './components/ui/grid';
+export * from './components/ui/form';
+export * from './components/ui/radio';
+export * from './components/ui/input';
+export * from './components/ui/input-date-picker';
+export * from './components/ui/input-search';
+export * from './components/ui/input-select';
+export * from './components/ui/input-text';
+export * from './components/ui/input-text-area';
+export * from './components/ui/label';
+export * from './components/ui/link';
+export * from './components/ui/number-field';
+export * from './components/ui/page-content';
+export * from './components/ui/page-header';
+export * from './components/ui/pagination';
+export * from './components/ui/popover';
+export * from './components/ui/progress';
+export * from './components/ui/progress-circle';
+export * from './components/ui/scroll-area';
+export * from './components/ui/search-global';
+export { InputText as Input, type InputTextProps as InputProps, } from './components/ui/input-text';
+export { InputSearch as Search, type InputSearchProps as SearchProps, } from './components/ui/input-search';
+export { InputTextArea as Textarea, type InputTextAreaProps as TextareaProps, } from './components/ui/input-text-area';
+export * from './components/ui/section';
+export * from './components/ui/select';
+export * from './components/ui/separator';
+export * from './components/ui/sheet';
+export * from './components/ui/skeleton';
+export * from './components/ui/slider';
+export * from './components/ui/spinner';
+export * from './components/ui/stack';
+export * from './components/ui/resizable';
+export * from './components/ui/sidebar-primary';
+export * from './components/ui/sidebar-secondary';
+export * from './components/ui/button-icon';
+export * from './components/ui/filter-search';
+export * from './components/ui/switch';
+export * from './components/ui/table';
+export * from './components/ui/tabs';
+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/tag';
+export { Tag as Badge, type TagProps as BadgeProps, } from './components/ui/tag';
+export * from './components/ui/widget-placeholder';

package/dist/src/lib/__tests__/breakpoints.test.d.ts

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

package/dist/src/lib/__tests__/deep-equal.test.d.ts

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

package/dist/src/lib/__tests__/use-doc-dir.test.d.ts

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

package/dist/src/lib/breakpoints.d.ts

@@ -0,0 +1,8 @@
+export declare const ROOT_FONT_SIZE_PX = 16;
+export declare const BREAKPOINT_LG: number;
+export declare const BREAKPOINT_XL: number;
+export declare const BREAKPOINT_2XL: number;
+export declare const BREAKPOINT_3XL: number;
+export declare const BREAKPOINT_4XL: number;
+/** SSR-safe `window.innerWidth` read — `undefined` when there is no `window` (e.g. SSR). */
+export declare function getViewportWidth(): number | undefined;

package/dist/src/lib/deep-equal.d.ts

@@ -0,0 +1,2 @@
+/** Recursively compares two values for structural equality (arrays and plain objects). */
+export declare function deepEqual(a: unknown, b: unknown): boolean;

package/dist/src/lib/portal-container.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+export interface PortalContainerProviderProps {
+    /**
+     * The DOM element portaled content should render into (e.g. a `<div>` inside
+     * a shadow root). When set, every ui-react portaling component
+     * (`Popover`, `DropdownMenu`, `Tooltip`, `Dialog`, `Sheet`, `Select`,
+     * `Combobox`, `Toast`) will mount its popup inside this element instead of
+     * `document.body`.
+     */
+    container: HTMLElement | null;
+    children: React.ReactNode;
+}
+/**
+ * Provides a default portal container for all ui-react portaling components.
+ *
+ * Wrap your app (or a subtree) so that popups, dialogs, tooltips, toasts, etc.
+ * render inside the given container instead of `document.body`. This is the
+ * recommended way for shadow-DOM MFEs to keep portaled content inside the
+ * shadow root where adopted stylesheets apply.
+ *
+ * Individual components' `portalContainer` prop overrides this context.
+ *
+ * @example
+ * ```tsx
+ * // Inside a shadow-DOM MFE — all portals go into the shadow root
+ * <PortalContainerProvider container={shadowRootMountDiv}>
+ *   <App />
+ * </PortalContainerProvider>
+ * ```
+ */
+export declare function PortalContainerProvider({ container, children }: PortalContainerProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Returns the portal container set by the nearest `PortalContainerProvider`,
+ * or `undefined` if none exists (letting Base UI default to `document.body`).
+ */
+export declare function usePortalContainer(): HTMLElement | null | undefined;

package/dist/src/lib/use-doc-dir.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Document direction — SSR-safe (defaults to 'ltr', syncs after mount).
+ * Checks both the `dir` attribute and the computed `direction` style so a
+ * page that sets RTL purely via CSS (no `dir` attribute) is still detected.
+ */
+export declare function useDocDir(): 'ltr' | 'rtl';

package/dist/src/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/src/react.d.ts

@@ -0,0 +1 @@
+export * from './index';

package/dist/styles.d.ts

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