@lumx/react 4.19.1-alpha.6 → 4.19.1-alpha.7

package/index.d.ts

@@ -797,7 +797,7 @@ interface ButtonProps extends GenericProps$1, ReactToJSX<ButtonProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
 
 interface IconButtonProps$1 extends BaseButtonProps {
     /**
@@ -2166,6 +2166,13 @@ declare namespace ComboboxProvider {
 
 /**
  * Hook to subscribe to a combobox event via the handle's subscriber system.
+ *
+ * Uses `useSyncExternalStore` (shim, for React 17 support) reading the handle's synchronous
+ * `getSnapshot`. This lets React pick up changes during its own commit — notably the
+ * `optionsChange` snapshot, which the handle refreshes synchronously while coalescing the actual
+ * subscriber push into a microtask. Reading the snapshot during commit avoids a state update
+ * landing in the microtask outside `act` (which unit tests report as an un-acted update).
+ *
  * Re-subscribes when the handle changes (e.g. trigger mount/unmount).
  */
 declare function useComboboxEvent<K extends keyof ComboboxEventMap>(event: K, initialValue: ComboboxEventMap[K]): ComboboxEventMap[K];
@@ -2200,7 +2207,7 @@ declare const Combobox: {
     /** Provides shared combobox context (handle, listbox ID, anchor ref) to all sub-components. */
     Provider: typeof ComboboxProvider;
     /** Button trigger for select-only combobox mode with keyboard navigation and typeahead. */
-    Button: (<E extends React$1.ElementType = Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>>(props: Omit<HasPolymorphicAs$1<E>, "children" | "role" | "aria-activedescendant" | "aria-controls" | "aria-expanded" | "aria-haspopup"> & _lumx_core_js_types.HasRequiredLinkHref<E> & ReactToJSX<ComboboxButtonProps$1> & React$1.ComponentProps<E> & {
+    Button: (<E extends React$1.ElementType = Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>>(props: Omit<HasPolymorphicAs$1<E>, "children" | "aria-expanded" | "aria-haspopup" | "role" | "aria-controls" | "aria-activedescendant"> & _lumx_core_js_types.HasRequiredLinkHref<E> & ReactToJSX<ComboboxButtonProps$1> & React$1.ComponentProps<E> & {
         ref?: ComponentRef<E> | undefined;
     }) => React.JSX.Element) & {
         displayName: string;
@@ -2776,7 +2783,7 @@ declare const GenericBlockGapSize: Pick<{
     readonly medium: "medium";
     readonly big: "big";
     readonly huge: "huge";
-}, "big" | "tiny" | "medium" | "regular" | "huge">;
+}, "big" | "medium" | "tiny" | "regular" | "huge">;
 type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;
 
 interface GenericBlockProps$1 extends FlexBoxProps$1 {
@@ -2971,7 +2978,7 @@ interface GridColumnProps extends GenericProps$1, ReactToJSX<GridColumnProps$1>
  */
 declare const GridColumn: Comp<GridColumnProps, HTMLElement>;
 
-declare const ICON_SIZES: ("s" | "m" | "xxs" | "xs" | "l" | "xl" | "xxl")[];
+declare const ICON_SIZES: ("m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl")[];
 
 type IconSizes = (typeof ICON_SIZES)[number];
 /**
@@ -3392,6 +3399,8 @@ interface BaseLightboxProps extends HasClassName, HasTheme, Pick<AriaAttributes,
     isOpen?: boolean;
     /** Whether to keep the dialog open on clickaway or escape press. */
     preventAutoClose?: boolean;
+    /** Whether to keep the dialog open on clickaway (overridden by `preventAutoClose`). */
+    preventCloseOnClick?: boolean;
     /** Z-axis position. */
     zIndex?: number;
 }
@@ -3473,7 +3482,7 @@ interface LinkProps extends GenericProps$1, ReactToJSX<LinkProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
 
 /**
  * Defines the props of the component.

package/index.js

@@ -6498,8 +6498,22 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     loadingAnnouncement: new Set()
   };
 
+  /**
+   * Last value seen for each event, kept in sync so pull-based subscribers (React's
+   * `useSyncExternalStore` via `handle.getSnapshot`) can read the current value during their
+   * own render — without relying on a push landing inside a specific async boundary.
+   *
+   * `optionsChange` is special: its push is coalesced into a microtask (see
+   * `notifyVisibilityChange`), but its snapshot here is refreshed synchronously so React can
+   * pick up the change during the same commit that mounted the options, instead of via the
+   * later microtask (which would fire outside `act` in tests). All other events push
+   * synchronously, so caching in `notify` keeps their snapshot current.
+   */
+  const latestValues = {};
+
   /** Notify all subscribers for a given event. */
   function notify(event, value) {
+    latestValues[event] = value;
     subscribers[event].forEach(cb => cb(value));
   }
 
@@ -6518,26 +6532,48 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
   }
 
   /**
-   * Notify all registered sections and fire `optionsChange` if the visible option count changed
-   * or if the input value changed while the list is empty (so `emptyMessage` callbacks get
-   * the updated query string).
-   * Called whenever the set of visible options may have changed (option register/unregister, filter change).
-   * (debounced in a microtask)
+   * The current `optionsChange` snapshot. Refreshed synchronously by `refreshOptionsSnapshot`
+   * (so React can read it via `handle.getSnapshot` during the commit that mounts the options)
+   * and pushed to subscribers on a coalesced microtask by `flushVisibilityChange`
+   * (so Vue reacts once to the final state instead of hitting its recursive-update guard).
    */
-  const notifyVisibilityChange = debounceMicrotask(() => {
-    for (const [sectionElement] of sectionRegistrations) {
-      notifySection(sectionElement, sectionRegistrations, optionRegistrations);
-    }
+  let optionsSnapshot;
+  /** The last snapshot actually pushed to subscribers, to avoid redundant notifications. */
+  let pushedOptionsSnapshot;
+
+  /**
+   * Recompute the `optionsChange` snapshot when the visible option count changed, or when the
+   * input value changed while the list is empty (so `emptyMessage` callbacks get the updated
+   * query string). Runs synchronously; a new object is created only when the value actually
+   * changes, keeping the reference stable for pull-based subscribers.
+   */
+  function refreshOptionsSnapshot() {
     const visibleCount = getVisibleOptionCount();
     const inputValue = trigger?.value ?? '';
     const isEmpty = visibleCount === 0;
     if (visibleCount !== lastOptionsLength || isEmpty && inputValue !== lastInputValue) {
       lastOptionsLength = visibleCount;
       lastInputValue = inputValue;
-      notify('optionsChange', {
+      optionsSnapshot = {
         optionsLength: visibleCount,
         inputValue
-      });
+      };
+      latestValues.optionsChange = optionsSnapshot;
+    }
+  }
+
+  /**
+   * Notify all registered sections, push `optionsChange` when the snapshot changed since the last
+   * push, and re-evaluate `aria-expanded`. Coalesced into a microtask so many option
+   * registrations in one tick collapse into a single subscriber notification.
+   */
+  const flushVisibilityChange = debounceMicrotask(() => {
+    for (const [sectionElement] of sectionRegistrations) {
+      notifySection(sectionElement, sectionRegistrations, optionRegistrations);
+    }
+    if (optionsSnapshot !== pushedOptionsSnapshot) {
+      pushedOptionsSnapshot = optionsSnapshot;
+      notify('optionsChange', optionsSnapshot);
     }
 
     // Re-evaluate aria-expanded when the combobox is open — visible content may have
@@ -6547,6 +6583,16 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     }
   });
 
+  /**
+   * Called whenever the set of visible options may have changed (option register/unregister,
+   * filter change). Refreshes the snapshot synchronously (for pull-based/React subscribers) then
+   * schedules the coalesced push (for push-based/Vue subscribers).
+   */
+  function notifyVisibilityChange() {
+    refreshOptionsSnapshot();
+    flushVisibilityChange();
+  }
+
   // ── Skeleton loading tracking ──────────────────────────────
 
   /** Delay before announcing loading in the live region (ms). */
@@ -6931,6 +6977,9 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
         subscribers[event].delete(callback);
       };
     },
+    getSnapshot(event) {
+      return latestValues[event];
+    },
     destroy() {
       detach();
       trigger = null;
@@ -6939,10 +6988,16 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       lastOptionsLength = 0;
       lastInputValue = '';
       lastLoadingState = false;
+      optionsSnapshot = undefined;
+      pushedOptionsSnapshot = undefined;
+      // Drop cached snapshots so `getSnapshot` doesn't return stale values after destroy.
+      for (const key of Object.keys(latestValues)) {
+        delete latestValues[key];
+      }
       optionRegistrations.clear();
       sectionRegistrations.clear();
       skeletonCount = 0;
-      notifyVisibilityChange.cancel();
+      flushVisibilityChange.cancel();
       clearTimeout(loadingTimer);
       announcementSent = false;
       // Clear all subscribers
@@ -7267,6 +7322,203 @@ const ComboboxButton$1 = (props, {
 /** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
 const forwardRefPolymorphic = React__default.forwardRef;
 
+var shim = {exports: {}};
+
+var useSyncExternalStoreShim_production = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredUseSyncExternalStoreShim_production;
+
+function requireUseSyncExternalStoreShim_production () {
+	if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
+	hasRequiredUseSyncExternalStoreShim_production = 1;
+	var React = React__default;
+	function is(x, y) {
+	  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
+	}
+	var objectIs = "function" === typeof Object.is ? Object.is : is,
+	  useState = React.useState,
+	  useEffect = React.useEffect,
+	  useLayoutEffect = React.useLayoutEffect,
+	  useDebugValue = React.useDebugValue;
+	function useSyncExternalStore$2(subscribe, getSnapshot) {
+	  var value = getSnapshot(),
+	    _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
+	    inst = _useState[0].inst,
+	    forceUpdate = _useState[1];
+	  useLayoutEffect(
+	    function () {
+	      inst.value = value;
+	      inst.getSnapshot = getSnapshot;
+	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	    },
+	    [subscribe, value, getSnapshot]
+	  );
+	  useEffect(
+	    function () {
+	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	      return subscribe(function () {
+	        checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	      });
+	    },
+	    [subscribe]
+	  );
+	  useDebugValue(value);
+	  return value;
+	}
+	function checkIfSnapshotChanged(inst) {
+	  var latestGetSnapshot = inst.getSnapshot;
+	  inst = inst.value;
+	  try {
+	    var nextValue = latestGetSnapshot();
+	    return !objectIs(inst, nextValue);
+	  } catch (error) {
+	    return true;
+	  }
+	}
+	function useSyncExternalStore$1(subscribe, getSnapshot) {
+	  return getSnapshot();
+	}
+	var shim =
+	  "undefined" === typeof window ||
+	  "undefined" === typeof window.document ||
+	  "undefined" === typeof window.document.createElement
+	    ? useSyncExternalStore$1
+	    : useSyncExternalStore$2;
+	useSyncExternalStoreShim_production.useSyncExternalStore =
+	  void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+	return useSyncExternalStoreShim_production;
+}
+
+var useSyncExternalStoreShim_development = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredUseSyncExternalStoreShim_development;
+
+function requireUseSyncExternalStoreShim_development () {
+	if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
+	hasRequiredUseSyncExternalStoreShim_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function is(x, y) {
+	      return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
+	    }
+	    function useSyncExternalStore$2(subscribe, getSnapshot) {
+	      didWarnOld18Alpha ||
+	        void 0 === React.startTransition ||
+	        ((didWarnOld18Alpha = true),
+	        console.error(
+	          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+	        ));
+	      var value = getSnapshot();
+	      if (!didWarnUncachedGetSnapshot) {
+	        var cachedValue = getSnapshot();
+	        objectIs(value, cachedValue) ||
+	          (console.error(
+	            "The result of getSnapshot should be cached to avoid an infinite loop"
+	          ),
+	          (didWarnUncachedGetSnapshot = true));
+	      }
+	      cachedValue = useState({
+	        inst: { value: value, getSnapshot: getSnapshot }
+	      });
+	      var inst = cachedValue[0].inst,
+	        forceUpdate = cachedValue[1];
+	      useLayoutEffect(
+	        function () {
+	          inst.value = value;
+	          inst.getSnapshot = getSnapshot;
+	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	        },
+	        [subscribe, value, getSnapshot]
+	      );
+	      useEffect(
+	        function () {
+	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	          return subscribe(function () {
+	            checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	          });
+	        },
+	        [subscribe]
+	      );
+	      useDebugValue(value);
+	      return value;
+	    }
+	    function checkIfSnapshotChanged(inst) {
+	      var latestGetSnapshot = inst.getSnapshot;
+	      inst = inst.value;
+	      try {
+	        var nextValue = latestGetSnapshot();
+	        return !objectIs(inst, nextValue);
+	      } catch (error) {
+	        return true;
+	      }
+	    }
+	    function useSyncExternalStore$1(subscribe, getSnapshot) {
+	      return getSnapshot();
+	    }
+	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+	      "function" ===
+	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
+	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+	    var React = React__default,
+	      objectIs = "function" === typeof Object.is ? Object.is : is,
+	      useState = React.useState,
+	      useEffect = React.useEffect,
+	      useLayoutEffect = React.useLayoutEffect,
+	      useDebugValue = React.useDebugValue,
+	      didWarnOld18Alpha = false,
+	      didWarnUncachedGetSnapshot = false,
+	      shim =
+	        "undefined" === typeof window ||
+	        "undefined" === typeof window.document ||
+	        "undefined" === typeof window.document.createElement
+	          ? useSyncExternalStore$1
+	          : useSyncExternalStore$2;
+	    useSyncExternalStoreShim_development.useSyncExternalStore =
+	      void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+	      "function" ===
+	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
+	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+	  })();
+	return useSyncExternalStoreShim_development;
+}
+
+var hasRequiredShim;
+
+function requireShim () {
+	if (hasRequiredShim) return shim.exports;
+	hasRequiredShim = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  shim.exports = requireUseSyncExternalStoreShim_production();
+	} else {
+	  shim.exports = requireUseSyncExternalStoreShim_development();
+	}
+	return shim.exports;
+}
+
+var shimExports = requireShim();
+
 /** Context value shared between Combobox sub-components. */
 
 const ComboboxContext = /*#__PURE__*/createContext(undefined);
@@ -7286,17 +7538,28 @@ function useComboboxContext() {
 
 /**
  * Hook to subscribe to a combobox event via the handle's subscriber system.
+ *
+ * Uses `useSyncExternalStore` (shim, for React 17 support) reading the handle's synchronous
+ * `getSnapshot`. This lets React pick up changes during its own commit — notably the
+ * `optionsChange` snapshot, which the handle refreshes synchronously while coalescing the actual
+ * subscriber push into a microtask. Reading the snapshot during commit avoids a state update
+ * landing in the microtask outside `act` (which unit tests report as an un-acted update).
+ *
  * Re-subscribes when the handle changes (e.g. trigger mount/unmount).
  */
 function useComboboxEvent(event, initialValue) {
   const {
     handle
   } = useComboboxContext();
-  const [value, setValue] = useState(initialValue);
-  useEffect(() => {
-    return handle?.subscribe(event, setValue);
+
+  // Stable fallback used until the event has fired at least once (or while there is no handle).
+  const initialValueRef = useRef(initialValue);
+  const subscribe = useCallback(onStoreChange => handle?.subscribe(event, onStoreChange) ?? (() => undefined), [handle, event]);
+  const getSnapshot = useCallback(() => {
+    const value = handle?.getSnapshot(event);
+    return value === undefined ? initialValueRef.current : value;
   }, [handle, event]);
-  return value;
+  return shimExports.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
 
 /**
@@ -12152,19 +12415,18 @@ function useRegisterId(key, id) {
  * Subscribe to the id currently registered under `key` in the enclosing ids registry. Re-renders
  * the calling component only when that key's id changes.
  *
+ * Uses `useSyncExternalStore` (shim, for React 17 support) reading the registry's synchronous
+ * `getId` snapshot: React re-reads it right after subscribing, so an id registered between render
+ * and commit is never missed - no manual re-sync needed.
+ *
  * @param  key Registry key to read.
  * @return The registered id, or `undefined` when none is registered / outside any provider.
  */
 function useRegisteredId(key) {
   const registry = useContext(IdsRegistryContext);
-  const [id, setId] = useState(() => registry?.getId(key));
-  useEffect(() => {
-    if (!registry) return undefined;
-    // Sync once in case the id was registered between render and this effect running.
-    setId(registry.getId(key));
-    return registry.subscribe(key, () => setId(registry.getId(key)));
-  }, [registry, key]);
-  return id;
+  const subscribe = useCallback(onStoreChange => registry?.subscribe(key, onStoreChange) ?? (() => undefined), [registry, key]);
+  const getSnapshot = useCallback(() => registry?.getId(key), [registry, key]);
+  return shimExports.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
 
 /**
@@ -14349,7 +14611,7 @@ const Inner = forwardRef((props, ref) => {
     focusElement: currentPaginationItemRef,
     ...forwardedProps,
     // Disable the close on click away as we want a custom one here
-    preventAutoClose: true,
+    preventCloseOnClick: true,
     children: /*#__PURE__*/jsx(ClickAwayProvider, {
       childrenRefs: clickAwayChildrenRefs,
       callback: onClickAway,
@@ -14552,6 +14814,7 @@ const Lightbox$1 = props => {
     focusElement,
     labelId,
     preventAutoClose,
+    preventCloseOnClick,
     theme,
     zIndex,
     isVisible,
@@ -14600,7 +14863,7 @@ const Lightbox$1 = props => {
         children: /*#__PURE__*/jsx(ThemeProvider, {
           value: undefined,
           children: /*#__PURE__*/jsx(ClickAwayProvider, {
-            callback: !preventAutoClose && handleClose,
+            callback: !preventAutoClose && !preventCloseOnClick && handleClose,
             childrenRefs: clickAwayRefs,
             children: /*#__PURE__*/jsx("div", {
               ref: childrenRef,