@cratis/scene.primereact 4.6.0 → 4.8.0

package/data/readableValue.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Nested deeper than this is shown as an ellipsis, so a cyclic or enormous value cannot flood the page. */
+const maximumDepth = 3;
+
+/**
+ * Writes any authored value as text a person can read.
+ *
+ * Scalars are shown as they are. An array is its readable entries joined by commas, and an object is
+ * `name: value` pairs joined by semicolons - never `[object Object]`, and never a raw JSON document. `null`
+ * and `undefined` are empty.
+ *
+ * @param value The authored value.
+ * @param depth How deep the value is nested already; callers leave it out.
+ */
+export function readableValue(value: unknown, depth = 0): string {
+    if (value === undefined || value === null) return '';
+    if (typeof value === 'string') return value;
+    if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') return String(value);
+    if (depth >= maximumDepth) return '…';
+    if (Array.isArray(value)) return value.map(entry => readableValue(entry, depth + 1)).filter(text => text !== '').join(', ');
+    if (typeof value === 'object') {
+        return Object.entries(value)
+            .map(([name, entry]) => [name, readableValue(entry, depth + 1)])
+            .filter(([, text]) => text !== '')
+            .map(([name, text]) => `${name}: ${text}`)
+            .join('; ');
+    }
+
+    return '';
+}

package/data/selectionKeysOf.ts

@@ -0,0 +1,40 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** The keys of one node, whichever of the shapes a selection may use. */
+function keyOf(value: unknown): string | undefined {
+    if (typeof value === 'string' && value !== '') return value;
+    return typeof value === 'number' && Number.isFinite(value) ? String(value) : undefined;
+}
+
+function nodeKeyOf(value: unknown): string | undefined {
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) return keyOf(value);
+    return keyOf((value as { key?: unknown }).key);
+}
+
+/**
+ * Reads the keys an authored `selection` selects.
+ *
+ * Every shape a legacy document may hold is accepted, and none is rewritten:
+ * - one key, string or number (`'b'`, `6`);
+ * - an array mixing keys and `{ key }` objects (`['a', 6, { key: 'c' }]`);
+ * - one `{ key }` object;
+ * - PrimeReact's key map (`{ b: { checked: true, partialChecked: false } }`), whose `checked` entries are
+ *   selected. A `partialChecked` entry is derived state, not a selection, so it is ignored: the control
+ *   computes it from the selected descendants.
+ *
+ * Numeric keys are matched as the strings the tree builds from them.
+ *
+ * @param value The authored selection.
+ */
+export function selectionKeysOf(value: unknown): Set<string> {
+    if (Array.isArray(value)) return new Set(value.flatMap(entry => nodeKeyOf(entry) ?? []));
+    const single = nodeKeyOf(value);
+    if (single !== undefined) return new Set([single]);
+
+    if (typeof value === 'object' && value !== null && keyOf((value as { key?: unknown }).key) === undefined) {
+        return new Set(Object.entries(value).filter(([, state]) => (state as { checked?: unknown } | null)?.checked === true).map(([key]) => key));
+    }
+
+    return new Set();
+}

package/data/treeTableRows.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { TreeNode } from '../TreeNode';
+import { TreeTableRow } from './TreeTableRow';
+
+/**
+ * Flattens the nodes into the rows that are visible: a node's children follow it only while it is expanded.
+ *
+ * @param nodes The sibling nodes to flatten.
+ * @param expanded The keys of the expanded nodes.
+ */
+export function visibleRows(nodes: TreeNode[], expanded: ReadonlySet<string>, depth = 0, parentKey?: string): TreeTableRow[] {
+    return nodes.flatMap((node, index) => {
+        const key = node.key ?? '';
+        const row: TreeTableRow = { node, key, depth, parentKey, position: index + 1, siblings: nodes.length };
+        return [row, ...(node.children !== undefined && expanded.has(key) ? visibleRows(node.children, expanded, depth + 1, key) : [])];
+    });
+}
+
+/** The keys of the nodes authored as expanded, at any depth, in tree order. */
+export function expandedKeysOf(nodes: TreeNode[]): string[] {
+    return nodes.flatMap(node => [
+        ...(node.expanded === true && node.key !== undefined ? [node.key] : []),
+        ...expandedKeysOf(node.children ?? []),
+    ]);
+}
+
+/** A node's own text for naming it: its label, else its key. */
+export function nodeLabel(node: TreeNode): string {
+    return node.label ?? node.key ?? '';
+}

package/data/useIncrementalLoad.ts

@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useCallback, useState } from 'react';
+
+/** How much of a list is loaded and how to load more. */
+export interface IncrementalLoad {
+    /** The number of entries loaded, never more than the total. */
+    loaded: number;
+
+    /** Loads the next chunk. */
+    loadMore(): void;
+}
+
+/**
+ * Tracks how many entries of a list are loaded, a chunk at a time.
+ *
+ * The count follows the authored properties: it starts over at one chunk when the chunk size changes or when
+ * `resetKey` does, so a document edit that replaces the items does not leave the old count behind. Pass a
+ * structurally stable `resetKey` (see `useStructuralValue`), or every render would reset it.
+ *
+ * @param total The number of entries there are.
+ * @param chunk The number of entries per load.
+ * @param resetKey Changes when the entries are replaced.
+ */
+export function useIncrementalLoad(total: number, chunk: number, resetKey: unknown): IncrementalLoad {
+    const [state, setState] = useState({ resetKey, chunk, loaded: chunk });
+    let loaded = state.loaded;
+    if (state.resetKey !== resetKey || state.chunk !== chunk) {
+        setState({ resetKey, chunk, loaded: chunk });
+        loaded = chunk;
+    }
+
+    const loadMore = useCallback(() => setState(current => ({ ...current, loaded: Math.min(current.loaded + chunk, total) })), [chunk, total]);
+    return { loaded: Math.min(loaded, total), loadMore };
+}

package/data/useLoadOnReach.ts

@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { RefObject, useEffect } from 'react';
+
+/**
+ * Calls `onReach` while the sentinel is visible, which is what scrolling to the end of a list means.
+ *
+ * The observer is rebuilt whenever `revision` changes, so a sentinel that is still visible after a chunk was
+ * loaded loads the next one, until the viewport is filled or the list ends. `root` is the element that
+ * scrolls for an inline list; `null` observes the page's own viewport. Where there is no
+ * `IntersectionObserver` nothing is observed and the list's own button remains the way to load more.
+ *
+ * @param sentinel The element placed after the last loaded entry.
+ * @param root The scrolling container, or `null` for the page.
+ * @param active Whether reaching the end should load anything.
+ * @param revision A value that changes each time the list changed.
+ * @param onReach Loads the next chunk.
+ */
+export function useLoadOnReach(sentinel: RefObject<HTMLElement | null>, root: RefObject<HTMLElement | null> | null, active: boolean, revision: unknown, onReach: () => void): void {
+    useEffect(() => {
+        const target = sentinel.current;
+        if (!active || target === null || typeof IntersectionObserver === 'undefined') return undefined;
+
+        const observer = new IntersectionObserver(entries => {
+            if (entries.some(entry => entry.isIntersecting)) onReach();
+        }, { root: root?.current ?? null, rootMargin: '0px 0px 48px 0px' });
+        observer.observe(target);
+        return () => observer.disconnect();
+    }, [sentinel, root, active, revision, onReach]);
+}

package/data/useTreeGridNavigation.ts

@@ -0,0 +1,81 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { KeyboardEvent, useCallback, useRef, useState } from 'react';
+import { TreeTableRow } from './TreeTableRow';
+
+/** What the keyboard navigation of a tree grid needs from the control. */
+export interface TreeGridNavigationOptions {
+    rows: TreeTableRow[];
+    expanded: ReadonlySet<string>;
+    enabled: boolean;
+    toggle(key: string): void;
+    select(row: TreeTableRow): void;
+}
+
+/** The wiring a tree grid applies to its rows. */
+export interface TreeGridNavigation {
+    /** The one row that is in the tab order (roving tabindex). */
+    tabStopKey: string | undefined;
+
+    /** Gives the navigation the element of a row, so it can move focus there. */
+    register(key: string, element: HTMLElement | null): void;
+
+    /** Makes a row the tab stop, as a click does. */
+    activate(key: string): void;
+
+    /** The key handler of a row. */
+    onKeyDown(row: TreeTableRow, event: KeyboardEvent<HTMLElement>): void;
+}
+
+/**
+ * The keyboard model of an ARIA tree grid, with a roving tab index.
+ *
+ * Up and Down move between visible rows, Home and End to the first and last, Right expands a collapsed row or
+ * enters its first child, Left collapses an expanded row or goes to its parent, and Space or Enter selects.
+ * Keys pressed on a control inside the row (its expand button or checkbox) are left to that control.
+ */
+export function useTreeGridNavigation({ rows, expanded, enabled, toggle, select }: TreeGridNavigationOptions): TreeGridNavigation {
+    const [activeKey, setActiveKey] = useState<string | undefined>(undefined);
+    const elements = useRef(new Map<string, HTMLElement>());
+    const tabStopKey = rows.some(row => row.key === activeKey) ? activeKey : rows[0]?.key;
+
+    const register = useCallback((key: string, element: HTMLElement | null) => {
+        if (element === null) elements.current.delete(key); else elements.current.set(key, element);
+    }, []);
+
+    const moveTo = (row: TreeTableRow | undefined) => {
+        if (row === undefined) return;
+        setActiveKey(row.key);
+        elements.current.get(row.key)?.focus();
+    };
+
+    const onKeyDown = (row: TreeTableRow, event: KeyboardEvent<HTMLElement>) => {
+        if (event.target !== event.currentTarget) return;
+        const index = rows.indexOf(row);
+        const hasChildren = (row.node.children?.length ?? 0) > 0;
+        const handled = (action: () => void) => { event.preventDefault(); action(); };
+
+        switch (event.key) {
+            case 'ArrowDown': handled(() => moveTo(rows[index + 1])); break;
+            case 'ArrowUp': handled(() => moveTo(rows[index - 1])); break;
+            case 'Home': handled(() => moveTo(rows[0])); break;
+            case 'End': handled(() => moveTo(rows[rows.length - 1])); break;
+            case 'ArrowRight':
+                if (hasChildren) handled(() => { if (!expanded.has(row.key)) { if (enabled) toggle(row.key); } else moveTo(rows[index + 1]); });
+                break;
+            case 'ArrowLeft':
+                if (hasChildren && expanded.has(row.key)) handled(() => { if (enabled) toggle(row.key); });
+                else if (row.parentKey !== undefined) handled(() => moveTo(rows.find(candidate => candidate.key === row.parentKey)));
+                break;
+            case ' ':
+            case 'Enter':
+                handled(() => select(row));
+                break;
+            default:
+                break;
+        }
+    };
+
+    return { tabStopKey, register, activate: setActiveKey, onKeyDown };
+}

package/dist/cjs/data/DataScrollerRow.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var readableValue = require('./readableValue.js');
+
+/** The fields that, when present as text, name a record. */ const titleFields = [
+    'label',
+    'title',
+    'name',
+    'text',
+    'header'
+];
+/**
+ * One authored data row, shown readably.
+ *
+ * A scalar is its text. A record is titled by its first text field among `label`, `title`, `name`, `text` and
+ * `header`, and every other field follows as a name and a readable value. No row is ever dumped as JSON.
+ */ function DataScrollerRow({ value }) {
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: readableValue.readableValue(value)
+    });
+    const record = value;
+    const titleField = titleFields.find((field)=>typeof record[field] === 'string' && record[field] !== '');
+    const details = Object.entries(record).filter(([name])=>name !== titleField).map(([name, entry])=>[
+            name,
+            readableValue.readableValue(entry)
+        ]).filter(([, text])=>text !== '');
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            titleField !== undefined && /*#__PURE__*/ jsxRuntime.jsx("strong", {
+                children: record[titleField]
+            }),
+            details.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("dl", {
+                children: details.map(([name, text])=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("dt", {
+                                children: name
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("dd", {
+                                children: text
+                            })
+                        ]
+                    }, name))
+            })
+        ]
+    });
+}
+
+exports.DataScrollerRow = DataScrollerRow;
+//# sourceMappingURL=DataScrollerRow.js.map

package/dist/cjs/data/DataScrollerRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataScrollerRow.js","sources":["../../../data/DataScrollerRow.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { readableValue } from './readableValue';\n\n/** The fields that, when present as text, name a record. */\nconst titleFields = ['label', 'title', 'name', 'text', 'header'];\n\n/**\n * One authored data row, shown readably.\n *\n * A scalar is its text. A record is titled by its first text field among `label`, `title`, `name`, `text` and\n * `header`, and every other field follows as a name and a readable value. No row is ever dumped as JSON.\n */\nexport function DataScrollerRow({ value }: { value: unknown }) {\n    if (typeof value !== 'object' || value === null || Array.isArray(value)) return <>{readableValue(value)}</>;\n\n    const record = value as Record<string, unknown>;\n    const titleField = titleFields.find(field => typeof record[field] === 'string' && record[field] !== '');\n    const details = Object.entries(record)\n        .filter(([name]) => name !== titleField)\n        .map(([name, entry]) => [name, readableValue(entry)] as const)\n        .filter(([, text]) => text !== '');\n\n    return (\n        <>\n            {titleField !== undefined && <strong>{record[titleField] as string}</strong>}\n            {details.length > 0 && (\n                <dl>\n                    {details.map(([name, text]) => <div key={name}><dt>{name}</dt><dd>{text}</dd></div>)}\n                </dl>\n            )}\n        </>\n    );\n}\n"],"names":["titleFields","DataScrollerRow","value","Array","isArray","_jsx","_Fragment","readableValue","record","titleField","find","field","details","Object","entries","filter","name","map","entry","text","_jsxs","undefined","strong","length","dl","div","dt","dd"],"mappings":";;;;;AAKA,6DACA,MAAMA,WAAAA,GAAc;AAAC,IAAA,OAAA;AAAS,IAAA,OAAA;AAAS,IAAA,MAAA;AAAQ,IAAA,MAAA;AAAQ,IAAA;AAAS,CAAA;AAEhE;;;;;AAKC,IACM,SAASC,eAAAA,CAAgB,EAAEC,KAAK,EAAsB,EAAA;IACzD,IAAI,OAAOA,UAAU,QAAA,IAAYA,KAAAA,KAAU,QAAQC,KAAAA,CAAMC,OAAO,CAACF,KAAAA,CAAAA,EAAQ,qBAAOG,cAAA,CAAAC,mBAAA,EAAA;kBAAGC,2BAAAA,CAAcL,KAAAA;;AAEjG,IAAA,MAAMM,MAAAA,GAASN,KAAAA;AACf,IAAA,MAAMO,UAAAA,GAAaT,WAAAA,CAAYU,IAAI,CAACC,CAAAA,KAAAA,GAAS,OAAOH,MAAM,CAACG,MAAM,KAAK,QAAA,IAAYH,MAAM,CAACG,MAAM,KAAK,EAAA,CAAA;AACpG,IAAA,MAAMC,UAAUC,MAAAA,CAAOC,OAAO,CAACN,MAAAA,CAAAA,CAC1BO,MAAM,CAAC,CAAC,CAACC,KAAK,GAAKA,IAAAA,KAASP,YAC5BQ,GAAG,CAAC,CAAC,CAACD,IAAAA,EAAME,MAAM,GAAK;AAACF,YAAAA,IAAAA;YAAMT,2BAAAA,CAAcW,KAAAA;AAAO,SAAA,CAAA,CACnDH,MAAM,CAAC,CAAC,GAAGI,IAAAA,CAAK,GAAKA,IAAAA,KAAS,EAAA,CAAA;IAEnC,qBACIC,eAAA,CAAAd,mBAAA,EAAA;;AACKG,YAAAA,UAAAA,KAAeY,2BAAahB,cAAA,CAACiB,QAAAA,EAAAA;AAAQd,gBAAAA,QAAAA,EAAAA,MAAM,CAACC,UAAAA;;YAC5CG,OAAAA,CAAQW,MAAM,GAAG,CAAA,kBACdlB,cAAA,CAACmB,IAAAA,EAAAA;AACIZ,gBAAAA,QAAAA,EAAAA,OAAAA,CAAQK,GAAG,CAAC,CAAC,CAACD,IAAAA,EAAMG,IAAAA,CAAK,iBAAKC,eAAA,CAACK,KAAAA,EAAAA;;0CAAepB,cAAA,CAACqB,IAAAA,EAAAA;AAAIV,gCAAAA,QAAAA,EAAAA;;0CAAUX,cAAA,CAACsB,IAAAA,EAAAA;AAAIR,gCAAAA,QAAAA,EAAAA;;;AAA1BH,qBAAAA,EAAAA,IAAAA,CAAAA;;;;AAK7D;;"}

package/dist/cjs/data/PrimeDataScroller.js

@@ -0,0 +1,120 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var properties = require('../properties.js');
+var useStructuralValue = require('../useStructuralValue.js');
+var DataScrollerRow = require('./DataScrollerRow.js');
+var isSerializedLegacyElement = require('./isSerializedLegacyElement.js');
+var useIncrementalLoad = require('./useIncrementalLoad.js');
+var useLoadOnReach = require('./useLoadOnReach.js');
+
+/** How tall an inline scroller is when no `scrollHeight` was authored: without a height it would never overflow. */ const defaultScrollHeight = 320;
+/**
+ * The `PrimeReact:dataScroller` component, a list that loads a chunk at a time as its end is reached.
+ *
+ * The entries are read as data: strings, numbers and records (see {@link DataScrollerRow}) from `items`, then
+ * any child elements authored in the `items` (or `content`) slot, which render as themselves. Serialized
+ * legacy UI elements in `items` are refused with a visible message, not shown as JSON.
+ *
+ * - `inline: true` scrolls inside the control, `scrollHeight` pixels tall (320 when omitted). `inline: false`
+ *   loads as the page scrolls the end of the list into view.
+ * - The "Load more" button remains for keyboard and assistive technology; focus moves to the first entry it
+ *   loads, and the number shown is announced.
+ * - A disabled element loads nothing on scroll and its button is disabled.
+ * - The loaded count restarts when `rows` or the content of `items` changes.
+ */ function PrimeDataScroller({ element, slots, interactions }) {
+    const authored = useStructuralValue.useStructuralValue(properties.arrayProperty(element, 'items'));
+    const data = react.useMemo(()=>authored.filter((entry)=>!isSerializedLegacyElement.isSerializedLegacyElement(entry) && entry !== null && entry !== undefined), [
+        authored
+    ]);
+    const refusal = isSerializedLegacyElement.legacyElementMessage(authored, 'items', "Author them as child elements in the 'items' slot, or as data.");
+    const slotted = slots.items ?? slots.content ?? [];
+    const rows = react.useMemo(()=>[
+            ...data.map((value, index)=>/*#__PURE__*/ jsxRuntime.jsx(DataScrollerRow.DataScrollerRow, {
+                    value: value
+                }, index)),
+            ...slotted
+        ], [
+        data,
+        slotted
+    ]);
+    const chunk = Math.max(Math.floor(properties.numberProperty(element, 'rows', 10)), 1);
+    const inline = properties.booleanProperty(element, 'inline', false);
+    const scrollHeight = properties.numberProperty(element, 'scrollHeight', defaultScrollHeight);
+    const enabled = element.isEnabled;
+    const { loaded, loadMore } = useIncrementalLoad.useIncrementalLoad(rows.length, chunk, data);
+    const canLoad = loaded < rows.length;
+    const scroller = react.useRef(null);
+    const sentinel = react.useRef(null);
+    const entries = react.useRef([]);
+    const focusIndex = react.useRef(undefined);
+    useLoadOnReach.useLoadOnReach(sentinel, inline ? scroller : null, enabled && canLoad, loaded, loadMore);
+    react.useEffect(()=>{
+        if (focusIndex.current === undefined) return;
+        entries.current[focusIndex.current]?.focus();
+        focusIndex.current = undefined;
+    }, [
+        loaded
+    ]);
+    const loadByButton = ()=>{
+        focusIndex.current = loaded;
+        loadMore();
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        "data-scene-id": element.id,
+        "data-scene-component": "dataScroller",
+        "aria-disabled": !enabled,
+        onClick: interactions?.onClick,
+        onDoubleClick: interactions?.onDoubleClick,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                ref: scroller,
+                role: "region",
+                tabIndex: inline ? 0 : undefined,
+                "aria-label": properties.stringProperty(element, 'ariaLabel', 'Scrollable data'),
+                style: inline ? {
+                    maxHeight: `${scrollHeight}px`,
+                    overflowY: 'auto'
+                } : undefined,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("ol", {
+                        children: rows.slice(0, loaded).map((row, index)=>/*#__PURE__*/ jsxRuntime.jsx("li", {
+                                tabIndex: -1,
+                                ref: (node)=>{
+                                    entries.current[index] = node;
+                                },
+                                children: row
+                            }, index))
+                    }),
+                    canLoad && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        ref: sentinel,
+                        "aria-hidden": "true"
+                    })
+                ]
+            }),
+            rows.length === 0 && /*#__PURE__*/ jsxRuntime.jsx("p", {
+                role: "status",
+                children: properties.stringProperty(element, 'emptyLabel', 'No items to show')
+            }),
+            refusal !== undefined && /*#__PURE__*/ jsxRuntime.jsx("p", {
+                role: "alert",
+                "data-scene-state": "legacy-elements",
+                children: refusal
+            }),
+            canLoad && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                type: "button",
+                disabled: !enabled,
+                onClick: loadByButton,
+                children: "Load more"
+            }),
+            rows.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("output", {
+                "aria-live": "polite",
+                children: `Showing ${loaded} of ${rows.length} items`
+            })
+        ]
+    });
+}
+
+exports.PrimeDataScroller = PrimeDataScroller;
+//# sourceMappingURL=PrimeDataScroller.js.map

package/dist/cjs/data/PrimeDataScroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeDataScroller.js","sources":["../../../data/PrimeDataScroller.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ReactNode, useEffect, useMemo, useRef } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { arrayProperty, booleanProperty, numberProperty, stringProperty } from '../properties';\nimport { useStructuralValue } from '../useStructuralValue';\nimport { DataScrollerRow } from './DataScrollerRow';\nimport { isSerializedLegacyElement, legacyElementMessage } from './isSerializedLegacyElement';\nimport { useIncrementalLoad } from './useIncrementalLoad';\nimport { useLoadOnReach } from './useLoadOnReach';\n\n/** How tall an inline scroller is when no `scrollHeight` was authored: without a height it would never overflow. */\nconst defaultScrollHeight = 320;\n\n/**\n * The `PrimeReact:dataScroller` component, a list that loads a chunk at a time as its end is reached.\n *\n * The entries are read as data: strings, numbers and records (see {@link DataScrollerRow}) from `items`, then\n * any child elements authored in the `items` (or `content`) slot, which render as themselves. Serialized\n * legacy UI elements in `items` are refused with a visible message, not shown as JSON.\n *\n * - `inline: true` scrolls inside the control, `scrollHeight` pixels tall (320 when omitted). `inline: false`\n *   loads as the page scrolls the end of the list into view.\n * - The \"Load more\" button remains for keyboard and assistive technology; focus moves to the first entry it\n *   loads, and the number shown is announced.\n * - A disabled element loads nothing on scroll and its button is disabled.\n * - The loaded count restarts when `rows` or the content of `items` changes.\n */\nexport function PrimeDataScroller({ element, slots, interactions }: RegisteredComponentProps) {\n    const authored = useStructuralValue(arrayProperty(element, 'items'));\n    const data = useMemo(() => authored.filter(entry => !isSerializedLegacyElement(entry) && entry !== null && entry !== undefined), [authored]);\n    const refusal = legacyElementMessage(authored, 'items', \"Author them as child elements in the 'items' slot, or as data.\");\n    const slotted = slots.items ?? slots.content ?? [];\n    const rows = useMemo<ReactNode[]>(() => [...data.map((value, index) => <DataScrollerRow key={index} value={value} />), ...slotted], [data, slotted]);\n    const chunk = Math.max(Math.floor(numberProperty(element, 'rows', 10)), 1);\n    const inline = booleanProperty(element, 'inline', false);\n    const scrollHeight = numberProperty(element, 'scrollHeight', defaultScrollHeight);\n    const enabled = element.isEnabled;\n    const { loaded, loadMore } = useIncrementalLoad(rows.length, chunk, data);\n    const canLoad = loaded < rows.length;\n    const scroller = useRef<HTMLDivElement>(null);\n    const sentinel = useRef<HTMLDivElement>(null);\n    const entries = useRef<(HTMLLIElement | null)[]>([]);\n    const focusIndex = useRef<number | undefined>(undefined);\n\n    useLoadOnReach(sentinel, inline ? scroller : null, enabled && canLoad, loaded, loadMore);\n\n    useEffect(() => {\n        if (focusIndex.current === undefined) return;\n        entries.current[focusIndex.current]?.focus();\n        focusIndex.current = undefined;\n    }, [loaded]);\n\n    const loadByButton = () => {\n        focusIndex.current = loaded;\n        loadMore();\n    };\n\n    return (\n        <div\n            data-scene-id={element.id}\n            data-scene-component='dataScroller'\n            aria-disabled={!enabled}\n            onClick={interactions?.onClick}\n            onDoubleClick={interactions?.onDoubleClick}>\n            <div\n                ref={scroller}\n                role='region'\n                tabIndex={inline ? 0 : undefined}\n                aria-label={stringProperty(element, 'ariaLabel', 'Scrollable data')}\n                style={inline ? { maxHeight: `${scrollHeight}px`, overflowY: 'auto' } : undefined}>\n                <ol>\n                    {rows.slice(0, loaded).map((row, index) => <li key={index} tabIndex={-1} ref={node => { entries.current[index] = node; }}>{row}</li>)}\n                </ol>\n                {canLoad && <div ref={sentinel} aria-hidden='true' />}\n            </div>\n            {rows.length === 0 && <p role='status'>{stringProperty(element, 'emptyLabel', 'No items to show')}</p>}\n            {refusal !== undefined && <p role='alert' data-scene-state='legacy-elements'>{refusal}</p>}\n            {canLoad && <button type='button' disabled={!enabled} onClick={loadByButton}>Load more</button>}\n            {rows.length > 0 && <output aria-live='polite'>{`Showing ${loaded} of ${rows.length} items`}</output>}\n        </div>\n    );\n}\n"],"names":["defaultScrollHeight","PrimeDataScroller","element","slots","interactions","authored","useStructuralValue","arrayProperty","data","useMemo","filter","entry","isSerializedLegacyElement","undefined","refusal","legacyElementMessage","slotted","items","content","rows","map","value","index","_jsx","DataScrollerRow","chunk","Math","max","floor","numberProperty","inline","booleanProperty","scrollHeight","enabled","isEnabled","loaded","loadMore","useIncrementalLoad","length","canLoad","scroller","useRef","sentinel","entries","focusIndex","useLoadOnReach","useEffect","current","focus","loadByButton","_jsxs","div","data-scene-id","id","data-scene-component","aria-disabled","onClick","onDoubleClick","ref","role","tabIndex","aria-label","stringProperty","style","maxHeight","overflowY","ol","slice","row","li","node","aria-hidden","p","data-scene-state","button","type","disabled","output","aria-live"],"mappings":"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"}