@lumx/react 4.11.0-alpha.2 → 4.11.0-alpha.3

package/index.js

@@ -6100,6 +6100,12 @@ function useEventCallback(fn) {
   return React__default.useCallback((...args) => ref.current?.(...args), []);
 }
 
+/** Unref a react ref or element */
+function unref(maybeElement) {
+  if (maybeElement instanceof HTMLElement) return maybeElement;
+  return maybeElement?.current;
+}
+
 const useRovingTabIndexContainer = ({
   containerRef,
   itemSelector,
@@ -6110,7 +6116,7 @@ const useRovingTabIndexContainer = ({
 }) => {
   const onItemFocused = useEventCallback(unstableOnItemFocused);
   useIsomorphicLayoutEffect(() => {
-    const container = containerRef?.current;
+    const container = unref(containerRef);
     if (!container) {
       return undefined;
     }
@@ -6151,7 +6157,7 @@ const SelectionChipGroup = ({
   chipRemoveLabel,
   ...forwardedProps
 }) => {
-  const containerRef = React__default.useRef(null);
+  const [container, setContainer] = React__default.useState(null);
 
   // Store latest values in refs so the event handlers always access current state.
   const valueRef = React__default.useRef(value);
@@ -6159,18 +6165,18 @@ const SelectionChipGroup = ({
   const onChangeRef = React__default.useRef(onChange);
   onChangeRef.current = onChange;
 
-  // Attach event listeners
+  // Attach event listeners. Re-runs when the container mounts/unmounts, inputRef or getOptionId change.
   React__default.useEffect(() => {
     return setupSelectionChipGroupEvents({
-      getContainer: () => containerRef.current,
+      getContainer: () => container,
       getInput: () => inputRef?.current,
       onChange: newValue => onChangeRef.current?.(newValue),
       getValue: () => valueRef.current,
       getOptionId
     });
-  }, [inputRef, getOptionId]);
+  }, [container, inputRef, getOptionId]);
   useRovingTabIndexContainer({
-    containerRef,
+    containerRef: container,
     itemSelector: `.${CLASSNAME$1i}`,
     itemDisabledSelector: `.${CLASSNAME$1i}[aria-disabled="true"]`
   });
@@ -6203,7 +6209,7 @@ const SelectionChipGroup = ({
     label,
     chipRemoveLabel,
     getChipProps,
-    ref: containerRef
+    ref: setContainer
   }, {
     Chip,
     ChipGroup,
@@ -13562,12 +13568,6 @@ const ImageSlideshow = ({
   });
 };
 
-/** Unref a react ref or element */
-function unref(maybeElement) {
-  if (maybeElement instanceof HTMLElement) return maybeElement;
-  return maybeElement?.current;
-}
-
 function setupViewTransitionName(elementRef, name) {
   let originalName = null;
   return {