@allxsmith/bestax-bulma 5.46.0 → 5.47.0

package/dist/index.cjs

@@ -10138,6 +10138,38 @@ function parentItemOf(element) {
     const group = element.parentElement;
     return group.getAttribute('role') === 'group' ? group.parentElement : null;
 }
+/** No positions: on the server, and until the tree has mounted. */
+const NO_POSITIONS = new Map();
+/**
+ * Each item's place among the items beside it, by its key, read off the
+ * items on the page: the ones in the same group, or at the top. A loading or
+ * failed load's row counts, as it does for a browser that works positions
+ * out for itself, so the declared ones say what a browser would.
+ */
+function positionsOf(shown, { values }) {
+    const sets = new Map();
+    shown.forEach(element => {
+        const set = sets.get(element.parentElement);
+        if (set)
+            set.push(element);
+        else
+            sets.set(element.parentElement, [element]);
+    });
+    const positions = new Map();
+    sets.forEach(set => set.forEach((element, at) => positions.set(values.get(element), {
+        posinset: at + 1,
+        setsize: set.length,
+    })));
+    return positions;
+}
+/** Whether two sets of positions say the same for every item. */
+function samePositions(a, b) {
+    return (a.size === b.size &&
+        Array.from(a).every(([key, { posinset, setsize }]) => {
+            const other = b.get(key);
+            return other?.posinset === posinset && other.setsize === setsize;
+        }));
+}
 /** The values of the items an item on the page is in, from the top. */
 function pathOf(element, { values }) {
     const path = [];
@@ -10232,9 +10264,11 @@ function useControlled(controlled, initial) {
     return [isControlled ? controlled : own, set];
 }
 /**
- * The open state, the selection, the keys, the tab stop and the registry of
- * a TreeView (#1096). Focus moves for real, with a roving tabindex, rather
- * than through `aria-activedescendant`.
+ * The open state, the selection, the keys, the tab stop, the positions and
+ * the registry of a TreeView (#1096). Focus moves for real, with a roving
+ * tabindex, rather than through `aria-activedescendant`. Each item's
+ * position among the items beside it is declared rather than left to the
+ * browser (#1171), read off the page once the tree has mounted.
  *
  * Every item registers its value, its parent and whether it's disabled from
  * a layout effect. In a checkbox tree a closed item's children still render
@@ -10276,6 +10310,8 @@ function useTreeView(options) {
     const restingPathRef = React.useRef([]);
     // The values above an item that left the page with focus in it.
     const lostRef = React.useRef(null);
+    // Each item's place among the items beside it, by its key.
+    const [positions, setPositions] = React.useState(NO_POSITIONS);
     const { records } = registryRef.current;
     const checks = mode === 'checkbox'
         ? // eslint-disable-next-line react-hooks/refs -- read in render on purpose: items write the registry from their layout effects and then ask for this render with `refresh`
@@ -10329,11 +10365,12 @@ function useTreeView(options) {
         else
             act(item, list);
     };
-    // After every render, put the stop where it belongs. While focus is in
-    // the tree it's the focused item. Otherwise it's the selected item, or the
-    // first checked one on the page, and failing that it stays where it was.
-    // An item that goes away hands it to its nearest ancestor on the page, or
-    // to the first item, and focus goes with it if it had focus.
+    // After every render, read each item's position off the page, and put the
+    // stop where it belongs. While focus is in the tree it's the focused item.
+    // Otherwise it's the selected item, or the first checked one on the page,
+    // and failing that it stays where it was. An item that goes away hands it
+    // to its nearest ancestor on the page, or to the first item, and focus goes
+    // with it if it had focus.
     // eslint-disable-next-line react-hooks/exhaustive-deps -- after every render on purpose: it reads the page, and sets state only when what it reads has changed
     useClientLayoutEffect(() => {
         const tree = treeRef.current;
@@ -10343,6 +10380,9 @@ function useTreeView(options) {
         // sharing a value, which they shouldn't, can leave it without one the
         // page still has.
         const shown = shownIn(tree, registry);
+        const placed = positionsOf(shown, registry);
+        if (!samePositions(positions, placed))
+            setPositions(placed);
         const onPage = shown.map(element => registry.values.get(element));
         const elementOf = (value) => shown[onPage.indexOf(value)];
         const isShown = (value) => value != null && onPage.includes(value);
@@ -10364,6 +10404,20 @@ function useTreeView(options) {
             restingPathRef.current = next ? pathOf(elementOf(next), registry) : [];
         }
     });
+    // Items can also move without the tree rendering, such as children that a
+    // component of the app sorts with state of its own. That changes no record,
+    // so the page is watched for items coming, going and moving, and the
+    // positions are read again.
+    React.useEffect(() => {
+        const tree = treeRef.current;
+        const observer = new MutationObserver(() => {
+            const registry = registryRef.current;
+            const placed = positionsOf(shownIn(tree, registry), registry);
+            setPositions(current => samePositions(current, placed) ? current : placed);
+        });
+        observer.observe(tree, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, []);
     const register = React.useCallback((value, record) => {
         const { records: known } = registryRef.current;
         known.set(value, record);
@@ -10486,6 +10540,7 @@ function useTreeView(options) {
         tabStop,
         isOpen,
         stateOf,
+        positionOf: key => positions.get(key),
         register,
         setElement,
         onFocus,
@@ -11071,7 +11126,9 @@ const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon
     if (branch.hidden)
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: items });
     const info = { value, parent, disabled, isParent, open };
-    return (jsxRuntime.jsxs("li", { ...props, ref: setRefs, className: classNames(itemClass, className), role: "treeitem", "aria-labelledby": labelId, "aria-level": branch.path.length + 1, "aria-expanded": isParent ? open : undefined, "aria-disabled": disabled || undefined, "aria-selected": selected, "aria-checked": checked, tabIndex: tree.tabStop === value ? 0 : -1, onKeyDown: event => {
+    // A position the caller gives wins, for a set the page holds only part of.
+    const position = tree.positionOf(value);
+    return (jsxRuntime.jsxs("li", { ...props, ref: setRefs, className: classNames(itemClass, className), role: "treeitem", "aria-labelledby": labelId, "aria-level": branch.path.length + 1, "aria-posinset": props['aria-posinset'] ?? position?.posinset, "aria-setsize": props['aria-setsize'] ?? position?.setsize, "aria-expanded": isParent ? open : undefined, "aria-disabled": disabled || undefined, "aria-selected": selected, "aria-checked": checked, tabIndex: tree.tabStop === value ? 0 : -1, onKeyDown: event => {
             onKeyDown?.(event);
             tree.onKeyDown(event, info);
         }, onFocus: event => {
@@ -11141,7 +11198,8 @@ function StatusRow({ kind, parent, level, message, onRetry, labelRef, }) {
         open: false,
         retry,
     };
-    return (jsxRuntime.jsx("li", { ref: setRef, className: itemClass, role: "treeitem", "aria-labelledby": retry ? `${labelId} ${retryId}` : labelId, "aria-level": level, "aria-disabled": !retry || undefined, tabIndex: tree.tabStop === labelId ? 0 : -1, onKeyDown: event => tree.onKeyDown(event, info), onFocus: event => {
+    const position = tree.positionOf(labelId);
+    return (jsxRuntime.jsx("li", { ref: setRef, className: itemClass, role: "treeitem", "aria-labelledby": retry ? `${labelId} ${retryId}` : labelId, "aria-level": level, "aria-posinset": position?.posinset, "aria-setsize": position?.setsize, "aria-disabled": !retry || undefined, tabIndex: tree.tabStop === labelId ? 0 : -1, onKeyDown: event => tree.onKeyDown(event, info), onFocus: event => {
             // Focus in something the message holds isn't the row's.
             if (event.target === event.currentTarget) {
                 tree.onFocus(labelId, event.currentTarget);