@jsenv/navi 0.29.493 → 0.29.494

package/dist/dev/jsenv_navi.js

@@ -6,7 +6,7 @@ import { installImportMetaCssBuild, coarsePointerSignal, windowHeightSignal, win
 import { createPubSub, createIterableWeakSet, elementIsFocusable, getScrollContainer, dispatchInternalCustomEvent, dispatchCustomEvent, createEventGroupLogger, findEvent, mergeOneStyle, findFocusable, getElementSignature, chainEvent, isTouchDrivenEvent, getKeyboardEventDefaultAction, isPressDrivenClick, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, createValueEffect, findFocusDelegateTarget, scrollIntoViewThroughScrollables, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, getScrollContainerSet, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, keepTouchRefusable, waitForTap, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, dragSourceThatStoodDown, markDragSource, refuseDragTo, startDragTo, installPanZoom, createInternalCustomEvent, activeElementSignal, normalizeStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, trapScrollInside, scrollIntoViewScoped, isPressDisputedByDrag, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, initFocusGroup, stringifyStyle as stringifyStyle$1, isScrollable, resolveOklchLightness, contrastColor, overflowGoesToViewport, parsePositionArea, snapToPixel, trapFocusInside, getVirtualKeyboardOverlayHeight, onAncestorReopen, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, setVirtualKeyboardOverlaysContent, subscribeVirtualKeyboardGeometryChange } from "@jsenv/dom";
 export { chainEvent, clickIsSuppressed, contrastColor, createDragGestureController, dragAfterIntent, findEvent, markDragSource, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, untracked, batch, useComputed, useSignal } from "@preact/signals";
-import { useState, useLayoutEffect, useErrorBoundary, useContext, useMemo, useRef, useEffect, useReducer, useCallback, useId } from "preact/hooks";
+import { useState, useLayoutEffect, useErrorBoundary, useContext, useMemo, useRef, useEffect, useReducer, useCallback } from "preact/hooks";
 import { options, isValidElement, createContext, render as render$1, h, toChildArray, createRef, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
 import { humanizeI18n, prefixFirstAndIndentRemainingLines, setRuntimeLangSource, formatDuration, formatMonth, formatDay, resolveTimeRangePrecision, formatDatePlaceholder, toDate, getRelativeDay, formatDayRelative, formatMonthPlaceholder, formatWeekPlaceholder, formatDatetimePlaceholder, formatDatetime, toTimeOfDay, formatTimeOfDay, formatMinuteDuration, formatTime, formatSecondDuration, formatHourDuration, formatTimeRelative, pluralCategory, formatNumber, interpolateText, installInterpolateJsx } from "@jsenv/humanize";
 export { createI18n, formatByteSize, formatDatetime, formatDay, formatDayRelative, formatDuration, formatHourDuration, formatList, formatMinuteDuration, formatMonth, formatNumber, formatSecondDuration, formatTime, formatTimeOfDay, formatTimeRange, formatTimeRelative, interpolateText, pluralCategory } from "@jsenv/humanize";
@@ -14058,13 +14058,13 @@ const writePressWritesHere = (pressWrites) => {
   }
 };
 
-// Preact's own useId() (see preact/hooks) returns "P<mask0>-<mask1>", where the
-// mask is derived from render order within the nearest root/async boundary:
-// stable across re-renders of the same mount, but not across two mounts on the
-// same page, and not across two documents.
-const PREACT_GENERATED_ID_REGEX = /^P\d+-\d+/;
-const isLikelyPreactGeneratedId = (id) => {
-  return PREACT_GENERATED_ID_REGEX.test(id);
+// An id made up at render names one mount: navi's own ("navi_<n>", see
+// useGeneratedId) counts mounts in the document, and preact's useId(), which
+// an app may hand a component, gives "P<mask0>-<mask1>" from the render order.
+// Neither names the same component in two mounts or two documents.
+const GENERATED_ID_REGEX = /^(?:navi_\d+|P\d+-\d+)/;
+const isGeneratedId = (id) => {
+  return GENERATED_ID_REGEX.test(id);
 };
 
 /**
@@ -14088,7 +14088,7 @@ const dropGeneratedIdKeys = (state) => {
   }
   let stateWithoutGeneratedIdKeys = state;
   for (const key of Object.keys(state)) {
-    if (!isLikelyPreactGeneratedId(key)) {
+    if (!isGeneratedId(key)) {
       continue;
     }
     if (stateWithoutGeneratedIdKeys === state) {
@@ -15393,7 +15393,7 @@ Consider using unique IDs for each component instance.`,
   return useNavStateBasic(id, options);
 };
 
-// A generated id (preact's useId()) names one mount. State written under one
+// A generated id (see isGeneratedId) names one mount. State written under one
 // outlives that mount in the history entry — a page left with a popup open —
 // and the mount coming back to the entry generates another id: the state is
 // there, and nothing reads it. Reported when a component mounting on the entry
@@ -15419,7 +15419,7 @@ const warnAboutOrphanGeneratedKeys = () => {
   }
   for (const key of Object.keys(state)) {
     if (
-      !isLikelyPreactGeneratedId(key) ||
+      !isGeneratedId(key) ||
       idUsageMap.has(key) ||
       orphanKeysReported.has(key)
     ) {
@@ -15427,7 +15427,7 @@ const warnAboutOrphanGeneratedKeys = () => {
     }
     orphanKeysReported.add(key);
     console.warn(
-      `useNavState: this history entry holds "${key}", written by a component whose id was generated (preact's useId()) and that is not mounted anymore — a Picker without an id, a popup with navState and no id. A generated id names one mount, so nothing will read that state again: a popup open when this screen was left comes back closed. Give the component a stable id if it was meant to be found as it was.`,
+      `useNavState: this history entry holds "${key}", written by a component whose id was generated and that is not mounted anymore — a Picker without an id, a popup with navState and no id. A generated id names one mount, so nothing will read that state again: a popup open when this screen was left comes back closed. Give the component a stable id if it was meant to be found as it was.`,
     );
   }
 };
@@ -15515,13 +15515,13 @@ const useNavStateBasic = (
 
   let effectiveType = type;
   // A push bakes the key into a history entry of its own, and an id naming a
-  // render position (see isLikelyPreactGeneratedId) can be claimed by two
+  // render position (see isGeneratedId) can be claimed by two
   // mounts of this same page. A replace keeps the key on the entry the document
   // is already on, where the id at least names one render.
-  if (type === "push" && isLikelyPreactGeneratedId(id)) {
+  if (type === "push" && isGeneratedId(id)) {
     {
       console.warn(
-        `useNavState(${id}): this id looks auto-generated (e.g. preact's useId()) and type is "push" — falling back to "replace". A push history entry keyed by an unstable id won't survive a reload correctly, and could even collide with a different component's own auto-generated id. Pass a stable, explicit id to use type: "push".`,
+        `useNavState(${id}): this id looks auto-generated and type is "push" — falling back to "replace". A push history entry keyed by an unstable id won't survive a reload correctly, and could even collide with a different component's own auto-generated id. Pass a stable, explicit id to use type: "push".`,
       );
     }
     effectiveType = "replace";
@@ -15639,7 +15639,7 @@ const useNavStateBasic = (
  *   - "push": creates a new history entry — pressing the back button removes it and calls onLeave.
  *   - "replace": updates the current history entry — no extra history entry is created.
  *   Silently downgraded to "replace" (with a dev-only console.warn) when `id`
- *   looks auto-generated (e.g. preact's own useId()) — an unstable id baked
+ *   looks auto-generated (navi's own, or preact's useId()) — an unstable id baked
  *   into a pushed history entry won't survive a reload correctly, and could
  *   even collide with a different component's own auto-generated id. Pass a
  *   stable, explicit id to actually get "push" behavior.
@@ -30792,7 +30792,8 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
    * - `DELETE: async ({ id }) => [id, null]`
    *
    * `ownerId` may also be `{ [uniqueKey]: value }` when the owner is known by an alternate key.
-   * The property is `null` until a callback provides data; setting it to `null` clears it.
+   * The property is `undefined` until an answer speaks for the owner (its row, or a
+   * callback), `null` when that answer holds none; setting it to `null` clears it.
    * Mutations apply directly to the owner's signal, so the parent GET is never rerun; an
    * owner the store does not hold yet is left alone, its child comes with its next read.
    *
@@ -30851,7 +30852,10 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
       for (const childSetup of childSetupCallbackSet) {
         childSetup(childItem);
       }
-      const childSignal = signal(null);
+      // `undefined` until something answers for this owner, `null` once an
+      // answer says it holds none: a screen tells « not read yet » from
+      // « nothing » as it does with an action's data.
+      const childSignal = signal(undefined);
       // The child keeps its identity while its props change, so the owner's
       // getter also reads this version, bumped by each change in place:
       // whichever way the props came in — the owner's row, a write of this
@@ -30860,7 +30864,10 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
       // Returns whether the child changed — what the store asks a relation
       // (see assign in array_signal_store.js).
       const applyProps = (props) => {
-        if (!props) {
+        if (props === undefined) {
+          return false;
+        }
+        if (props === null) {
           if (childSignal.peek() === null) {
             return false;
           }
@@ -30882,7 +30889,7 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
           }
         }
         if (childSignal.peek() !== childItem) {
-          childSignal.value = childItem; // first activation: null → childItem
+          childSignal.value = childItem; // first activation
           return true;
         }
         if (changed) {
@@ -34777,7 +34784,12 @@ const Box = props => {
     mount,
     ...computeProps
   } = props;
-  const parentBoxFlow = useContext(BoxFlowContext);
+  // The flow of the nearest Box above in the component tree, which lays this
+  // box out unless a plain element sits between the two in the DOM: the box
+  // then reads that element's flow once mounted (see readDomParentFlow).
+  const contextBoxFlow = useContext(BoxFlowContext);
+  const [domParentFlow, setDomParentFlow] = useState(null);
+  const parentBoxFlow = domParentFlow && domParentFlow.contextBoxFlow === contextBoxFlow ? domParentFlow.flow : contextBoxFlow;
   // Which interactions this box answers, and with what. Read here rather than
   // on the control, so a swipe or a hold can be declared on anything — a row, a
   // card, a block of text — and reach the control it belongs to (which is what
@@ -34824,7 +34836,17 @@ const Box = props => {
     childForwardedProps,
     styleDeps
   } = computed;
-  const syncBox = useCallback(computed.syncBox, styleDeps);
+  const verifyParentFlow = parentBoxFlow === contextBoxFlow && FLOW_STYLING_ITS_CHILDREN_SET.has(contextBoxFlow) && readsParentFlow(computeProps);
+  const syncBox = useCallback(verifyParentFlow ? boxEl => {
+    const flow = readDomParentFlow(boxEl);
+    if (flow !== contextBoxFlow) {
+      setDomParentFlow({
+        contextBoxFlow,
+        flow
+      });
+    }
+    return computed.syncBox(boxEl);
+  } : computed.syncBox, styleDeps);
   const finalRef = useComposeElementRef(syncBox, ref);
   useInteractionsEffect(finalRef, interactionsRef);
   let innerChildren = children;
@@ -35137,6 +35159,13 @@ const computeBox = (props, parentBoxFlow) => {
       const mergedValue = prepareStyleValue(stylesTarget[name], value, name, styleContext);
       const cssVar = readCSSVarName(styleContext.styleCSSVars[name]);
       if (cssVar) {
+        if (name === "color" && value === "inherit") {
+          // A token set to `inherit` takes the token of the parent element
+          // (a list's white for its selected items), never the parent's color.
+          // `color: currentColor` IS `color: inherit`, and a token carries it.
+          addCSSVar("currentColor", cssVar, stylesTarget);
+          return true;
+        }
         addCSSVar(mergedValue, cssVar, stylesTarget);
         if (name === "borderRadius" && value === "inherit") {
           // "inherit" cannot be expressed via a CSS variable — a var() reference
@@ -35453,6 +35482,47 @@ const declaresSomething = value => {
   }
   return true;
 };
+// The flows the styles of a child branch on (see expandX, selfAlignX… in
+// box_style_util.js): under any other the child writes the same styles
+// whatever its parent is.
+const FLOW_STYLING_ITS_CHILDREN_SET = new Set(["flex-x", "flex-y", "inline-flex-x", "inline-flex-y", "grid", "inline-grid"]);
+const PARENT_FLOW_PROP_NAMES = ["expand", "expandX", "expandY", "selfAlignX", "selfAlignY"];
+const readsParentFlow = props => {
+  for (const name of PARENT_FLOW_PROP_NAMES) {
+    if (props[name]) {
+      return true;
+    }
+  }
+  return false;
+};
+// A Box parent says its flow on its element; a plain element is read from its
+// computed style, which only a box mounted under one pays for.
+const readDomParentFlow = boxEl => {
+  let parent = boxEl.parentElement;
+  while (parent) {
+    const flowAttribute = parent.getAttribute("navi-box-flow");
+    if (flowAttribute) {
+      return flowAttribute;
+    }
+    const {
+      display,
+      flexDirection
+    } = window.getComputedStyle(parent);
+    if (display === "contents") {
+      parent = parent.parentElement;
+      continue;
+    }
+    if (display === "flex" || display === "inline-flex") {
+      const axis = flexDirection.startsWith("column") ? "y" : "x";
+      return `${display}-${axis}`;
+    }
+    if (display === "grid" || display === "inline-grid") {
+      return display;
+    }
+    return "block";
+  }
+  return undefined;
+};
 const isScrollingOverflow = value => value === "auto" || value === "scroll";
 const mayHoldComponent = children => {
   if (children === null || children === undefined) {
@@ -61334,7 +61404,7 @@ const Expandable = props => {
   const rootRef = ref || defaultRef;
   const uiRef = useRef();
   const contentContainerRef = useRef();
-  const contentId = useId();
+  const contentId = useGeneratedId();
   const isColumn = layout === "column";
   const closedContentSized = isColumn && mount === "always";
   // Only the two directions the layout has room for: a column layout reveals
@@ -62974,7 +63044,7 @@ const ButtonConfirm = ({
   // it is elsewhere by then, and pulling it back would take it from whatever
   // the person moved to.
   const restoreFocusRef = useRef(false);
-  const questionId = `${useId()}_question`;
+  const questionId = `${useGeneratedId()}_question`;
   const cancel = restoreFocus => {
     restoreFocusRef.current = restoreFocus;
     setAsking(false);
@@ -63776,7 +63846,7 @@ const ControlSwap = props => {
   const activeSide = sides[activeIndex];
   const capRefs = [useRef(), useRef()];
   const slotRefs = [useRef(), useRef()];
-  const slotIdPrefix = useId();
+  const slotIdPrefix = useGeneratedId();
   const activeNameRef = useRef(floor.name);
   activeNameRef.current = activeSide.name;
   const swapTo = (name, event, pressedCapIndex = null) => {
@@ -64637,7 +64707,7 @@ const InputCheckboxFieldInterface = props => {
   // setting's name — which are its label and its accessible name: a mode one
   // toggles is a checkbox, not a button writing a signal on each press.
   const hasLabel = variant === "button" && children !== undefined && children !== null && children !== false;
-  const labelId = useId();
+  const labelId = useGeneratedId();
   const boxRef = useRef();
   useAccentColorAttributes(boxRef, accentColor, {
     elementSelector: ".navi_checkbox_accent_probe"
@@ -75878,7 +75948,7 @@ const PopupTitleContext = createContext(null);
 const PopupTitle = props => {
   import.meta.css = [css$E, "@jsenv/navi/src/layout/popup_title.jsx"];
   const registerTitle = useContext(PopupTitleContext);
-  const idDefault = useId();
+  const idDefault = useGeneratedId();
   const id = props.id || `popup_title_${idDefault}`;
   useLayoutEffect(() => {
     if (!registerTitle) {
@@ -79274,7 +79344,7 @@ const usePopoverProps = props => {
   // open, two separate invocations of openEffect that don't otherwise share
   // any scope, hence the ref.
   const disarmBackdropHideRef = useRef(null);
-  const defaultId = useId();
+  const defaultId = useGeneratedId();
   const id = rest.id || defaultId;
   const backdropId = `${id}-backdrop`;
   const debugPopup = useDebugPopup();
@@ -80877,10 +80947,10 @@ const PickerCustom = props => {
   // before computing popupId below, so two Pickers without an explicit id never collide.
   // Captured before the fallback chain below overwrites props.id — needed to
   // know whether the id actually came from the caller (stable) or from
-  // useId()/ControlIdContext (a generated id names one mount: a reload, or a
+  // useGeneratedId()/ControlIdContext (a generated id names one mount: a reload, or a
   // return to this page, generates another), see pickerNavType below.
   const hasExplicitId = Boolean(props.id);
-  const idDefault = useId();
+  const idDefault = useGeneratedId();
   const controlId = useContext(ControlIdContext);
   props.id = props.id || controlId || idDefault;
   // Given no value, the picker holds what the control in its popup holds (see
@@ -80982,7 +81052,7 @@ const PickerCustom = props => {
     const debugPopup = useDebugPopup();
     // In "dialog" mode with a stable, caller-provided id, enterExpanded()
     // pushes a history entry so the back button closes it. Every other case
-    // (popover mode, or a dialog whose id was auto-generated via useId()/
+    // (popover mode, or a dialog whose id was auto-generated via useGeneratedId()/
     // ControlIdContext) replaces the current history state instead — a
     // generated id names one mount, so pushing it would either leave an entry
     // nothing reads or, worse, collide with a different component's own
@@ -83875,7 +83945,7 @@ const ListSelectable = props => {
   const Next = useNextResolver();
   import.meta.css = [css$x, "@jsenv/navi/src/control/list/list_selectable.jsx"];
   // we allow ourselves to auto-generate a name
-  const defaultName = useId();
+  const defaultName = useGeneratedId();
   props.name = props.name || `listbox_${defaultName}`;
   const {
     ref,
@@ -84224,7 +84294,7 @@ const ListItemSelectableResolver = props => {
 };
 const ListItemSelectable = props => {
   const Next = useNextResolver();
-  const defaultId = useId();
+  const defaultId = useGeneratedId();
   // Whether the caller SAYS anything about this row's selection. Passing
   // `checked: undefined` is not the same as not passing it: a control with the
   // key present calls itself controlled, and a controlled row is one the list
@@ -85214,7 +85284,7 @@ const ListUI = props => {
   } = props;
   // Remembered by name, and a name made up at render (see ListFirstResolver)
   // names no list a later mount would recognize.
-  const rememberScroll = !scrollResetOnNavigation && !isLikelyPreactGeneratedId(rest.id);
+  const rememberScroll = !scrollResetOnNavigation && !isGeneratedId(rest.id);
   // Where the list was when its screen was left, when this is the way back
   // (see scroll_restoration.js). Read once: `defaultScrolled` is held by
   // reference, and a place read again each render would be a list moved each
@@ -85524,7 +85594,7 @@ const ListFirstResolver = props => {
   const Next = useNextResolver();
   const refDefault = useRef(null);
   props.ref = props.ref || refDefault;
-  const idDefault = useId();
+  const idDefault = useGeneratedId();
   props.id = props.id || idDefault;
   const listItemsRef = useRef(null);
   if (!listItemsRef.current) {
@@ -89117,7 +89187,7 @@ const ListItemUI = props => {
   if (identityMatters && props.id === undefined) {
     console.warn("ListItem is missing an explicit id prop. Provide a stable id so pointed/selected state survives search reordering.");
   }
-  const idDefault = useId();
+  const idDefault = useGeneratedId();
   props.id = props.id || idDefault;
   const listItems = useContext(ListItemsContext);
   const groupId = useContext(ListGroupContext);
@@ -89933,7 +90003,7 @@ const useRunItems = (store, {
   renderSkeleton,
   renderError
 }) => {
-  const ownerId = useId();
+  const ownerId = useGeneratedId();
   // Dev only: the group `groupOfMissing` put an item not held in, by rank,
   // checked against `groupBy` once the item lands.
   const missingGroupCheckRef = useRef(null);
@@ -90502,7 +90572,7 @@ const ListRunSkeletonItem = ({
 }) => {
   const listItems = useContext(ListItemsContext);
   const groupId = useContext(ListGroupContext);
-  const entryId = useId();
+  const entryId = useGeneratedId();
   listItems.draw(entryId, {
     ownerId: runItem.ownerId,
     place: runItem.index,
@@ -91243,7 +91313,7 @@ const ListItemGroup = ({
   children,
   ...rest
 }) => {
-  const groupId = useId();
+  const groupId = useGeneratedId();
   const listItems = useContext(ListItemsContext);
   const group = listItems.group(groupId);
   useLayoutEffect(() => {
@@ -95587,7 +95657,7 @@ const Spin = ({
   } else {
     compareValues ??= compareValuesDefault;
   }
-  const id = useId();
+  const id = useGeneratedId();
   // What the group around it says, when there is one: how big the whole thing
   // is written is said once, on the group, and every spin in it follows.
   const group = useContext(SpinGroupContext);
@@ -96805,7 +96875,7 @@ const TimeRangeSpin = ({
   endTimeProps,
   ...rest
 }) => {
-  const startId = useId();
+  const startId = useGeneratedId();
   return jsxs(ControlGroup, {
     flex: true,
     alignY: "center",
@@ -96898,7 +96968,7 @@ const css$q = /* css */`.navi_checkbox_group {
 const CheckboxGroup = props => {
   const refDefault = useRef(null);
   props.ref = props.ref || refDefault;
-  const defaultName = useId();
+  const defaultName = useGeneratedId();
   props.name = props.name || `checkbox_group_${defaultName}`;
   const checkboxGroup = jsx(CheckboxGroupInterface, {
     ...props
@@ -97663,7 +97733,7 @@ const css$o = /* css */`.navi_radio_group {
 const RadioGroup = props => {
   const refDefault = useRef(null);
   props.ref = props.ref || refDefault;
-  const defaultName = useId();
+  const defaultName = useGeneratedId();
   props.name = props.name || `radio_group_${defaultName}`;
   const radioGroup = jsx(RadioGroupInterface, {
     ...props
@@ -98004,7 +98074,7 @@ const SplitButton = props => {
   if (popupProps.positionArea === undefined && mode === "popover") {
     popupProps.positionArea = "bottom-end";
   }
-  const idDefault = useId();
+  const idDefault = useGeneratedId();
   const idResolved = id || idDefault;
   const menuId = `${idResolved}_menu`;
   const rootRef = useRef(null);
@@ -101062,7 +101132,7 @@ const WheelItem = ({
   children,
   ...rest
 }) => {
-  const idDefault = useId();
+  const idDefault = useGeneratedId();
   const resolvedId = id || idDefault;
   // Wheel.Item must live inside a Wheel, so the context is always present.
   const trackerContext = useContext(WheelItemTrackerContext);
@@ -101660,7 +101730,7 @@ const TimeRangeWheel = ({
   ...rest
 }) => {
   import.meta.css = [css$j, "@jsenv/navi/src/control/wheel/wheel_time.jsx"];
-  const startId = useId();
+  const startId = useGeneratedId();
   const startRef = useRef(null);
   const endRef = useRef(null);
   const endHourList = useMemo(() => resolveHourList(hours), [hours ? hours.min : undefined, hours ? hours.max : undefined, hours]);
@@ -104648,7 +104718,7 @@ const useIsInTableHead = () => useContext(TableSectionContext) === "head";
 const Table = props => {
   installTableCss();
   const tableDefaultRef = useRef();
-  const tableDefaultId = `table-${useId()}`;
+  const tableDefaultId = `table-${useGeneratedId()}`;
   const {
     id = tableDefaultId,
     selection = [],