@xsolla/xui-table 0.151.0-pr273.1778117489

package/native/index.d.ts

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import { BoxProps } from '@xsolla/xui-primitives-core';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type TableCellAlign = "left" | "right" | "center";
+type TableCellPosition = "default" | "left" | "right";
+/**
+ * Structural primitives only:
+ *
+ *   <Table>
+ *     <Table.Caption />     ← optional <caption>-equivalent for a11y
+ *     <Table.Header>        ← <thead>-equivalent (sticky)
+ *       <Table.Row>
+ *         <Table.Head />    ← <th>-equivalent (sortable)
+ *       </Table.Row>
+ *     </Table.Header>
+ *     <Table.Body>          ← <tbody>-equivalent
+ *       <Table.Row>
+ *         <Table.Cell />
+ *       </Table.Row>
+ *     </Table.Body>
+ *     <Table.Footer />      ← slot for pagination etc.
+ *   </Table>
+ *
+ * Filter panels, item counters, title blocks, bulk-selection bars, and
+ * pagination components are NOT part of the surface — compose them on the
+ * consumer side around <Table>.
+ *
+ * Density is single-source from Figma (`theme.sizing.table`); no `size`
+ * prop. If Figma ever ships md/sm variants, this will become a function
+ * with a size argument again.
+ */
+/**
+ * `<Table>` is intentionally opaque: no `style`, no Box-level props. The
+ * surface is `children` only (plus theme overrides). To wrap the table in
+ * a horizontal-scroll viewport, compose two outer Boxes around it — see
+ * the `HorizontalScroll` story or the README "Horizontal scroll" section.
+ */
+interface TableProps extends ThemeOverrideProps {
+    children?: ReactNode;
+}
+interface TableCaptionProps extends BoxProps, ThemeOverrideProps {
+    children?: ReactNode;
+}
+interface TableHeaderProps extends BoxProps, ThemeOverrideProps {
+    children?: ReactNode;
+}
+interface TableBodyProps extends BoxProps, ThemeOverrideProps {
+    children?: ReactNode;
+    /**
+     * Reserve space for at least this many row slots. Useful for paginated
+     * tables where partial last pages or empty filter results would
+     * otherwise make the card height jump between states.
+     *
+     * When the body contains only `<Table.Row>` children and there are
+     * fewer of them than `minRows`, invisible placeholder slots are
+     * appended to fill the difference, and the last real row keeps its
+     * divider visible (mirroring a fully filled page).
+     *
+     * If the body contains non-row children (e.g. a custom empty-state
+     * block), no placeholders are appended — the body just reserves the
+     * full height via `min-height` so the consumer can stretch their
+     * empty-state to fill it.
+     */
+    minRows?: number;
+}
+interface TableFooterProps extends BoxProps {
+    children?: ReactNode;
+}
+interface TableRowProps extends BoxProps, ThemeOverrideProps {
+    children?: ReactNode;
+    /** Highlight the row on hover. Defaults to true (body rows only). */
+    hoverable?: boolean;
+    /** Marks the row as selected. */
+    selected?: boolean;
+    /** Hide the bottom divider for this row. */
+    hideDivider?: boolean;
+    /** Click handler. When provided, the row becomes interactive. */
+    onPress?: () => void;
+    /**
+     * Optional focus events. The Row uses these internally to track
+     * focus-within so that descendant `revealOnHover` cells can show
+     * themselves when keyboard-focused; consumer handlers (if provided) are
+     * still invoked.
+     */
+    onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLElement>) => void;
+}
+interface TableCellProps extends Omit<BoxProps, "position">, ThemeOverrideProps {
+    children?: ReactNode;
+    /** Cell text alignment. Defaults to "left". */
+    align?: TableCellAlign;
+    /** Position within the row — controls padding (left = leading, right = trailing). */
+    position?: TableCellPosition;
+    /** Allow the cell to flex to fill space. */
+    grow?: number;
+    /**
+     * Hide the cell until the parent row is hovered or focused (via `:focus-within`).
+     * Typically used for `position="right"` action cells per Figma spec.
+     * Falls back to always-visible on touch devices.
+     */
+    revealOnHover?: boolean;
+}
+interface TableHeadProps extends TableCellProps {
+    /** Sort direction. */
+    sort?: "ascending" | "descending" | "none";
+    /** Click to toggle sort. */
+    onSortToggle?: () => void;
+}
+
+declare const Table: React__default.ForwardRefExoticComponent<TableProps & React__default.RefAttributes<any>> & {
+    Caption: React__default.ForwardRefExoticComponent<TableCaptionProps & React__default.RefAttributes<any>>;
+    Header: React__default.ForwardRefExoticComponent<TableHeaderProps & React__default.RefAttributes<any>>;
+    Body: React__default.ForwardRefExoticComponent<TableBodyProps & React__default.RefAttributes<any>>;
+    Footer: React__default.ForwardRefExoticComponent<TableFooterProps & React__default.RefAttributes<any>>;
+    Row: React__default.ForwardRefExoticComponent<TableRowProps & React__default.RefAttributes<any>>;
+    Head: React__default.ForwardRefExoticComponent<TableHeadProps & React__default.RefAttributes<any>>;
+    Cell: React__default.ForwardRefExoticComponent<TableCellProps & React__default.RefAttributes<any>>;
+};
+
+export { Table, type TableBodyProps, type TableCaptionProps, type TableCellAlign, type TableCellPosition, type TableCellProps, type TableFooterProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps };