@idyeah/diya 0.0.0 → 1.0.1

package/dist/combobox/Combobox.js

@@ -0,0 +1,160 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Icon } from '../Icon.js';
+import { useAnchoredPopover } from './useAnchoredPopover.js';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { useFormReset, useMergedRef } from '../text-input/native-field.js';
+import { comboboxMessages } from './messages.js';
+const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+/** A labeled text field that filters a list of options as you type; picks one value, or several with `multiple`. */
+export const Combobox = forwardRef(function Combobox(props, ref) {
+    const { label, options, disabled = false, error, helperText, hideLabel = false, size = 'medium', name, className, style, id: idProp, placeholder, onChange: onInputChange, onClick: onInputClick, onKeyDown: onInputKeyDown, 'aria-describedby': describedBy, multiple: _multiple, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, ...rest } = props;
+    const t = useDiyaMessages('combobox', comboboxMessages);
+    const multiple = props.multiple === true;
+    const controlled = props.value !== undefined;
+    const initial = () => props.multiple ? props.defaultValue ?? [] : props.defaultValue ? [props.defaultValue] : [];
+    const [uncontrolled, setUncontrolled] = useState(initial);
+    // Internally a selection is always a list; the public value matches the mode.
+    const value = useMemo(() => !controlled ? uncontrolled : props.multiple ? props.value ?? [] : props.value ? [props.value] : [], [controlled, uncontrolled, props.multiple, props.value]);
+    const onChange = (next) => {
+        if (!controlled)
+            setUncontrolled(next);
+        if (props.multiple)
+            props.onValueChange?.(next);
+        else
+            props.onValueChange?.(next[0] ?? '');
+    };
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
+    const [query, setQuery] = useState('');
+    const [open, setOpen] = useState(false);
+    const [active, setActive] = useState(-1);
+    const [revealRequest, setRevealRequest] = useState(0);
+    const keyboardNavigation = useRef(true);
+    const field = useRef(null);
+    const control = useRef(null);
+    const input = useRef(null);
+    const inputRef = useMergedRef(ref, input);
+    useFormReset(input, () => { if (!controlled)
+        setUncontrolled(initial()); });
+    const panel = useRef(null);
+    const filtered = useMemo(() => options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase())), [options, query]);
+    const enabled = filtered.map((option, index) => option.disabled ? -1 : index).filter((index) => index >= 0);
+    const activeIndex = filtered[active] && !filtered[active].disabled ? active : enabled[0] ?? -1;
+    const isOpen = open && !disabled;
+    const popupContent = useMemo(() => ({ filtered, value, size }), [filtered, value, size]);
+    const portal = useAnchoredPopover(isOpen, control, panel, 'anchor', popupContent);
+    function revealActive() {
+        keyboardNavigation.current = true;
+        // A boundary key must still reveal its option after the list was scrolled manually.
+        setRevealRequest(previous => previous + 1);
+    }
+    useClientLayoutEffect(() => {
+        const list = panel.current;
+        const option = list?.querySelector('[data-active="true"]');
+        if (!keyboardNavigation.current || !isOpen || !list || !option || !list.clientHeight)
+            return;
+        // The anchoring hook runs first, including showing a native popover. Scroll only
+        // this list: scrollIntoView could move the host page and dismiss the popup.
+        const row = option.getBoundingClientRect();
+        const top = list.getBoundingClientRect().top + list.clientTop;
+        const bottom = top + list.clientHeight;
+        if (row.top < top || row.height > list.clientHeight)
+            list.scrollTop += row.top - top;
+        else if (row.bottom > bottom)
+            list.scrollTop += row.bottom - bottom;
+    }, [isOpen, activeIndex, filtered, portal, size, revealRequest]);
+    function close() { setOpen(false); setQuery(''); setActive(-1); }
+    useEffect(() => { if (disabled)
+        close(); }, [disabled]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const outside = (event) => {
+            if (!field.current?.contains(event.target) && !panel.current?.contains(event.target))
+                close();
+        };
+        const resize = () => close();
+        const scroll = (event) => { if (!panel.current?.contains(event.target))
+            close(); };
+        document.addEventListener('pointerdown', outside);
+        window.addEventListener('resize', resize);
+        window.addEventListener('scroll', scroll, true);
+        return () => {
+            document.removeEventListener('pointerdown', outside);
+            window.removeEventListener('resize', resize);
+            window.removeEventListener('scroll', scroll, true);
+        };
+    }, [isOpen]);
+    function choose(option) {
+        if (disabled || option.disabled)
+            return;
+        onChange(multiple ? value.includes(option.value) ? value.filter((entry) => entry !== option.value) : [...value, option.value] : [option.value]);
+        setQuery('');
+        setActive(options.findIndex((entry) => entry.value === option.value && !entry.disabled));
+        input.current?.focus();
+        if (!multiple)
+            setOpen(false);
+    }
+    return _jsxs("div", { ref: field, className: cx('diya-combobox', className), style: style, "data-size": size, "data-invalid": !!error, onBlur: (event) => {
+            const next = event.relatedTarget;
+            if (!field.current?.contains(next) && !panel.current?.contains(next))
+                close();
+        }, children: [_jsx("label", { htmlFor: id, className: hideLabel ? 'diya-sr-only' : '', children: label }), name && (multiple ? value : [value[0] ?? '']).map((entry, index) => _jsx("input", { type: "hidden", name: name, value: entry, disabled: disabled }, `${index}-${entry}`)), _jsxs("div", { ref: control, className: "diya-combobox-control", children: [multiple && value.map((entry) => _jsxs("span", { className: "diya-combobox-chip", children: [options.find((option) => option.value === entry)?.label, _jsx("button", { type: "button", disabled: disabled, "aria-label": t.remove(options.find((option) => option.value === entry)?.label ?? entry), onClick: () => { if (!disabled) {
+                                    input.current?.focus();
+                                    onChange(value.filter((item) => item !== entry));
+                                } }, children: "\u00D7" })] }, entry)), _jsx("input", { ...rest, ref: inputRef, id: id, role: "combobox", "aria-expanded": isOpen, "aria-controls": isOpen ? `${id}-options` : undefined, "aria-autocomplete": "list", "aria-activedescendant": isOpen && activeIndex >= 0 ? `${id}-option-${activeIndex}` : undefined, "aria-invalid": !!error, "aria-describedby": [describedBy, error || helperText ? `${id}-help` : undefined].filter(Boolean).join(' ') || undefined, disabled: disabled, placeholder: placeholder ?? (multiple && value.length ? t.addAnother : t.placeholder), value: !multiple && !isOpen && value.length ? options.find((option) => option.value === value[0])?.label || '' : query, onClick: (event) => { onInputClick?.(event); if (!disabled && !event.defaultPrevented) {
+                            revealActive();
+                            setOpen(true);
+                            setActive(enabled[0] ?? -1);
+                        } }, onChange: (event) => {
+                            onInputChange?.(event);
+                            const next = event.target.value;
+                            revealActive();
+                            setQuery(next);
+                            setActive(options.filter((option) => option.label.toLowerCase().includes(next.toLowerCase())).findIndex((option) => !option.disabled));
+                            setOpen(true);
+                        }, onKeyDown: (event) => {
+                            onInputKeyDown?.(event);
+                            if (disabled || event.defaultPrevented || event.nativeEvent.isComposing)
+                                return;
+                            if (event.key === 'Escape' && isOpen) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                close();
+                                return;
+                            }
+                            if (event.key === 'Backspace' && multiple && !query && value.length)
+                                onChange(value.slice(0, -1));
+                            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                                event.preventDefault();
+                                revealActive();
+                                setOpen(true);
+                                if (!isOpen) {
+                                    setActive(event.key === 'ArrowDown' ? enabled[0] ?? -1 : enabled[enabled.length - 1] ?? -1);
+                                    return;
+                                }
+                                const position = enabled.indexOf(activeIndex);
+                                const next = position + (event.key === 'ArrowDown' ? 1 : -1);
+                                setActive(enabled[next] ?? activeIndex);
+                            }
+                            if (event.key === 'Enter' && isOpen && activeIndex >= 0) {
+                                event.preventDefault();
+                                choose(filtered[activeIndex]);
+                            }
+                        } }), _jsx("button", { type: "button", className: "diya-combobox-toggle", disabled: disabled, tabIndex: -1, "aria-label": isOpen ? t.closeOptions : t.openOptions, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                            if (disabled)
+                                return;
+                            revealActive();
+                            input.current?.focus();
+                            setQuery('');
+                            setActive(options.findIndex((option) => !option.disabled));
+                            setOpen(!isOpen);
+                        }, children: _jsx(Icon, { name: "chevron-down", size: 14 }) })] }), (error || helperText) && _jsxs("p", { id: `${id}-help`, className: "diya-field-help", children: [error && _jsx("span", { "aria-hidden": "true", children: "!" }), error || helperText] }), isOpen && portal && createPortal(_jsx("ul", { ref: panel, id: `${id}-options`, className: "diya-combobox-options", role: "listbox", "aria-label": label, "aria-multiselectable": multiple || undefined, style: { position: 'fixed', inset: 'auto', margin: 0 }, children: filtered.length ? filtered.map((option, index) => _jsxs("li", { id: `${id}-option-${index}`, role: "option", "aria-selected": value.includes(option.value), "aria-disabled": option.disabled, "data-active": index === activeIndex, onMouseDown: (event) => event.preventDefault(), onMouseEnter: () => { if (!option.disabled) {
+                        keyboardNavigation.current = false;
+                        setActive(index);
+                    } }, onClick: () => choose(option), children: [_jsx("span", { children: option.label }), value.includes(option.value) && _jsx("span", { "aria-hidden": "true", children: "\u2713" })] }, option.value)) : _jsx("li", { role: "presentation", children: t.noResults }) }), portal)] });
+});

package/dist/combobox/messages.d.ts

@@ -0,0 +1,9 @@
+/** combobox: English defaults, overridable through DiyaProvider `messages`. */
+export declare const comboboxMessages: {
+    placeholder: string;
+    addAnother: string;
+    noResults: string;
+    openOptions: string;
+    closeOptions: string;
+    remove: (label: string) => string;
+};

package/dist/combobox/messages.js

@@ -0,0 +1,2 @@
+/** combobox: English defaults, overridable through DiyaProvider `messages`. */
+export const comboboxMessages = { placeholder: 'Search options', addAnother: 'Add another…', noResults: 'No results', openOptions: 'Open options', closeOptions: 'Close options', remove: (label) => `Remove ${label}` };

package/dist/combobox/useAnchoredPopover.d.ts

@@ -0,0 +1,5 @@
+import { type RefObject } from 'react';
+/** Preserve the trigger's logical tab order when popup controls live in a portal. */
+export declare function adjacentTabStop(anchor: HTMLElement, surface: HTMLElement | null, backwards: boolean): HTMLElement | undefined;
+/** Native top-layer popover when available; the same scoped portal is the fallback. */
+export declare function useAnchoredPopover<T extends HTMLElement>(open: boolean, anchor: RefObject<HTMLElement | null>, popup: RefObject<T | null>, width: 'anchor' | number, contentKey: unknown): HTMLElement | null;

package/dist/combobox/useAnchoredPopover.js

@@ -0,0 +1,100 @@
+'use client';
+import { useEffect, useLayoutEffect, useState } from 'react';
+import { useDiyaPortal } from '../DiyaProvider.js';
+const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+const tabbableSelector = 'a[href], area[href], button, input:not([type="hidden"]), select, textarea, iframe, object, embed, audio[controls], video[controls], summary, [contenteditable], [tabindex]';
+/** Preserve the trigger's logical tab order when popup controls live in a portal. */
+export function adjacentTabStop(anchor, surface, backwards) {
+    const document = anchor.ownerDocument;
+    const view = document.defaultView;
+    const modal = anchor.closest('dialog[open]');
+    const stops = Array.from((modal ?? document).querySelectorAll(tabbableSelector)).filter((element) => {
+        if (surface?.contains(element) || element.matches(':disabled'))
+            return false;
+        const editable = element.hasAttribute('contenteditable') && element.contentEditable !== 'false' && !element.parentElement?.isContentEditable;
+        if (element.tabIndex < 0 && (element.hasAttribute('tabindex') || !editable))
+            return false;
+        for (let ancestor = element; ancestor; ancestor = ancestor.parentElement) {
+            if (ancestor.hidden || ancestor.hasAttribute('inert'))
+                return false;
+            const style = view?.getComputedStyle(ancestor);
+            if (style?.display === 'none' || style?.visibility === 'hidden' || style?.visibility === 'collapse' || style?.contentVisibility === 'hidden')
+                return false;
+            if (ancestor !== element && ancestor.tagName === 'DETAILS' && !ancestor.hasAttribute('open')) {
+                const summary = Array.from(ancestor.children).find((child) => child.tagName === 'SUMMARY');
+                if (!summary?.contains(element))
+                    return false;
+            }
+        }
+        return true;
+    });
+    const ordered = stops.filter((element) => {
+        if (element.tagName !== 'INPUT')
+            return true;
+        const radio = element;
+        return radio.type !== 'radio' || !radio.name || radio.checked || !stops.some((candidate) => {
+            if (candidate.tagName !== 'INPUT')
+                return false;
+            const other = candidate;
+            return other.type === 'radio' && other.name === radio.name && other.form === radio.form && other.checked;
+        });
+    }).map((element, index) => ({ element, index, order: Math.max(0, element.tabIndex) })).sort((a, b) => {
+        if (a.order === b.order)
+            return a.index - b.index;
+        if (a.order === 0)
+            return 1;
+        if (b.order === 0)
+            return -1;
+        return a.order - b.order;
+    });
+    const index = ordered.findIndex(({ element }) => element === anchor);
+    if (index < 0)
+        return undefined;
+    const next = index + (backwards ? -1 : 1);
+    return ordered[modal ? (next + ordered.length) % ordered.length : next]?.element;
+}
+/** Native top-layer popover when available; the same scoped portal is the fallback. */
+export function useAnchoredPopover(open, anchor, popup, width, contentKey) {
+    const providerPortal = useDiyaPortal();
+    const modal = anchor.current?.closest('dialog[open]');
+    // A provider inside the dialog already has a safe outlet; otherwise stay in the modal subtree.
+    const portal = modal && !modal.contains(providerPortal) ? modal : providerPortal;
+    const [nativePopover, setNativePopover] = useState(false);
+    useEffect(() => {
+        setNativePopover(typeof HTMLElement !== 'undefined' && typeof HTMLElement.prototype.showPopover === 'function');
+    }, []);
+    useClientLayoutEffect(() => {
+        const node = popup.current;
+        const trigger = anchor.current;
+        if (!open || !node || !trigger)
+            return;
+        if (nativePopover) {
+            // Set through the DOM so React 18's public HTML attribute types stay supported.
+            node.setAttribute('popover', 'manual');
+            try {
+                node.showPopover();
+            }
+            catch {
+                node.removeAttribute('popover');
+                setNativePopover(false);
+                return;
+            }
+        }
+        else
+            node.removeAttribute('popover');
+        const view = trigger.ownerDocument.defaultView;
+        if (!view)
+            return;
+        const box = trigger.getBoundingClientRect();
+        const availableWidth = Math.max(0, view.innerWidth - 24);
+        const availableHeight = Math.max(0, view.innerHeight - 24);
+        node.style.width = `${Math.min(width === 'anchor' ? box.width : width, availableWidth)}px`;
+        const maximum = Number.parseFloat(view.getComputedStyle(node).maxHeight);
+        node.style.maxHeight = `${Math.min(Number.isFinite(maximum) ? maximum : availableHeight, availableHeight)}px`;
+        node.style.overflowY = 'auto';
+        const height = node.getBoundingClientRect().height;
+        node.style.left = `${Math.max(12, Math.min(box.left, view.innerWidth - node.getBoundingClientRect().width - 12))}px`;
+        node.style.top = `${Math.max(12, box.bottom + height + 8 > view.innerHeight ? box.top - height - 8 : box.bottom + 8)}px`;
+    }, [open, portal, nativePopover, anchor, popup, width, contentKey]);
+    return portal;
+}

package/dist/data-viz/DataViz.d.ts

@@ -0,0 +1,140 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { chartMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        chart: typeof chartMessages;
+    }
+}
+/** 'line', 'area', 'bar' and 'combo' plot `series` over `categories`; 'pie', 'donut' and 'treemap' plot `data`. */
+export type ChartType = 'line' | 'area' | 'bar' | 'donut' | 'pie' | 'combo' | 'treemap';
+export type ChartSeries = {
+    /** Series name, shown in the legend, tooltip and data table. */
+    name: string;
+    /** One value per category, in the same order; null leaves a gap. */
+    values: (number | null)[];
+    /** Overrides this series' palette color. */
+    color?: string;
+    /** Draws this series as a line or bars, overriding the chart type; useful in 'combo'. */
+    type?: 'line' | 'bar';
+};
+export type ChartDatum = {
+    /** Slice or tile name, shown in the legend, tooltip and data table. */
+    name: string;
+    /** Non-negative size; leave it out on a parent to use the sum of its children. */
+    value?: number;
+    /** Nested tiles, for 'treemap' only. */
+    children?: ChartDatum[];
+    /** Overrides this item's palette color. */
+    color?: string;
+};
+/** DIYA's chart colors, "Vivid": bright system blue, orange, pink, green, violet, teal, indigo and red, ordered so neighbours stay apart. Bright hues sit below 3:1 on white, so every chart also ships its legend, tooltips and a data table. */
+export declare const chartPalettes: {
+    light: string[];
+    dark: string[];
+};
+export type ChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Chart kind: 'line', 'area', 'bar' and 'combo' (bars with the last series as a line) use `series`; 'pie', 'donut' and 'treemap' use `data`. */
+    type: ChartType;
+    /** Accessible name for the chart image (not shown). */
+    label: string;
+    /** Category labels along the category axis, for line, area, bar and combo. */
+    categories?: string[];
+    /** Value series, for line, area, bar and combo. */
+    series?: ChartSeries[];
+    /** Slices or tiles, for pie, donut and treemap. */
+    data?: ChartDatum[];
+    /** Style tweak; defaults to 'standard'. 'smooth' curves lines (line, area, combo), 'stacked' stacks series (line, area, bar), 'horizontal' lays bars sideways (bar), 'thin' narrows the ring (donut). */
+    variant?: 'standard' | 'smooth' | 'stacked' | 'horizontal' | 'thin';
+    /** Shows the legend; defaults to true. Treemaps never show one. */
+    legend?: boolean;
+    /** Shows value grid lines on cartesian charts; defaults to true. */
+    grid?: boolean;
+    /** Shows a tooltip on hover; defaults to true. */
+    tooltip?: boolean;
+    /** Fixed [min, max] for the value axis; by default it starts at 0 unless values go negative. */
+    valueDomain?: [number, number];
+    /** Chart height in pixels; defaults to 300. */
+    height?: number;
+    /** Series or slice colors, in order; defaults to a colored brand first, then DIYA's Vivid chart palette for the theme. */
+    palette?: string[];
+    /** Text under a donut's total; defaults to "Total". */
+    centerLabel?: string;
+    /** Formats every shown value (tooltips, value-axis labels, donut total, treemap labels, data table); defaults to the provider locale's number format. Keep it stable between renders. */
+    formatValue?: (value: number) => string;
+};
+/** A line, area, bar, combo, pie, donut or treemap chart. Data and formatting belong to the caller; rendering never fetches a service. */
+export declare const Chart: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Chart kind: 'line', 'area', 'bar' and 'combo' (bars with the last series as a line) use `series`; 'pie', 'donut' and 'treemap' use `data`. */
+    type: ChartType;
+    /** Accessible name for the chart image (not shown). */
+    label: string;
+    /** Category labels along the category axis, for line, area, bar and combo. */
+    categories?: string[];
+    /** Value series, for line, area, bar and combo. */
+    series?: ChartSeries[];
+    /** Slices or tiles, for pie, donut and treemap. */
+    data?: ChartDatum[];
+    /** Style tweak; defaults to 'standard'. 'smooth' curves lines (line, area, combo), 'stacked' stacks series (line, area, bar), 'horizontal' lays bars sideways (bar), 'thin' narrows the ring (donut). */
+    variant?: "standard" | "smooth" | "stacked" | "horizontal" | "thin";
+    /** Shows the legend; defaults to true. Treemaps never show one. */
+    legend?: boolean;
+    /** Shows value grid lines on cartesian charts; defaults to true. */
+    grid?: boolean;
+    /** Shows a tooltip on hover; defaults to true. */
+    tooltip?: boolean;
+    /** Fixed [min, max] for the value axis; by default it starts at 0 unless values go negative. */
+    valueDomain?: [number, number];
+    /** Chart height in pixels; defaults to 300. */
+    height?: number;
+    /** Series or slice colors, in order; defaults to a colored brand first, then DIYA's Vivid chart palette for the theme. */
+    palette?: string[];
+    /** Text under a donut's total; defaults to "Total". */
+    centerLabel?: string;
+    /** Formats every shown value (tooltips, value-axis labels, donut total, treemap labels, data table); defaults to the provider locale's number format. Keep it stable between renders. */
+    formatValue?: (value: number) => string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type DataVizProps = Omit<ChartProps, 'label' | keyof HTMLAttributes<HTMLDivElement>> & Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> & {
+    /** Visible card heading; it is also the chart's accessible name, even when the header is hidden. */
+    title: string;
+    /** Heading level of the title, h1 to h6. Defaults to 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Shows the title and description; defaults to true. */
+    showHeader?: boolean;
+    /** Supporting text under the title. */
+    description?: string;
+    /** Slot in the header corner, e.g. a Select for the time range. */
+    actions?: ReactNode;
+    /** Slot above the chart, usually a headline number. */
+    summary?: ReactNode;
+    /** Small content in the footer, e.g. the data source. */
+    footer?: ReactNode;
+    /** Lifts the card with a shadow instead of a flat border; defaults to false. */
+    shadow?: boolean;
+    /** Shows a button that reveals the chart's data as a table; defaults to true. */
+    showDataToggle?: boolean;
+    /** Caption of the data table; defaults to "{title} data". */
+    dataCaption?: string;
+};
+/** A chart in a titled card, with an optional summary, actions and a show-data table. */
+export declare const DataViz: import("react").ForwardRefExoticComponent<Omit<ChartProps, "label" | keyof HTMLAttributes<HTMLDivElement>> & Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
+    /** Visible card heading; it is also the chart's accessible name, even when the header is hidden. */
+    title: string;
+    /** Heading level of the title, h1 to h6. Defaults to 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Shows the title and description; defaults to true. */
+    showHeader?: boolean;
+    /** Supporting text under the title. */
+    description?: string;
+    /** Slot in the header corner, e.g. a Select for the time range. */
+    actions?: ReactNode;
+    /** Slot above the chart, usually a headline number. */
+    summary?: ReactNode;
+    /** Small content in the footer, e.g. the data source. */
+    footer?: ReactNode;
+    /** Lifts the card with a shadow instead of a flat border; defaults to false. */
+    shadow?: boolean;
+    /** Shows a button that reveals the chart's data as a table; defaults to true. */
+    showDataToggle?: boolean;
+    /** Caption of the data table; defaults to "{title} data". */
+    dataCaption?: string;
+} & import("react").RefAttributes<HTMLElement>>;