@lumx/react 4.11.0-next.8 → 4.11.0-next.9

package/index.js

@@ -2434,11 +2434,11 @@ const SelectionChipGroup$1 = (props, {
       const customProps = getChipProps?.(v) || {};
       const chipIsDisabled = customProps.isDisabled || isDisabled;
       const chipName = typeof customProps.children === 'string' ? customProps.children : name;
-      const ariaLabel = chipRemoveLabel ? `${chipName} \u2014 ${chipRemoveLabel}` : chipName;
+      const ariaLabel = chipRemoveLabel ? `${chipName} - ${chipRemoveLabel}` : chipName;
       return /*#__PURE__*/jsx(Tooltip, {
         label: !chipIsDisabled ? ariaLabel : undefined,
         children: /*#__PURE__*/jsx(Chip, {
-          "aria-label": label,
+          "aria-label": ariaLabel,
           ...customProps,
           size: "s",
           after: /*#__PURE__*/jsx(Icon, {
@@ -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,27 +6165,40 @@ 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"]`
   });
 
-  // Handle renderChip or fallback to getChipProps from props
-  const getChipProps = renderChip ? option => {
-    const customChip = renderChip(option);
-    return isComponentType(Chip)(customChip) && customChip.props || {};
-  } : getChipPropsProp;
+  // Merge getChipProps and renderChip: getChipProps provides base props, renderChip overrides them,
+  // and the core JSX template props take final priority (applied in the core component).
+  const getChipProps = option => {
+    const chipProps = getChipPropsProp?.(option) || {};
+    let renderChipProps = {};
+    if (renderChip) {
+      const customChip = renderChip(option);
+      if (isComponentType(Chip)(customChip)) {
+        renderChipProps = customChip.props || {};
+      }
+    }
+    // Filter out undefined values from renderChipProps so they don't override chipProps
+    const definedRenderChipProps = Object.fromEntries(Object.entries(renderChipProps).filter(([, v]) => v !== undefined));
+    return {
+      ...chipProps,
+      ...definedRenderChipProps
+    };
+  };
   return SelectionChipGroup$1({
     ...forwardedProps,
     value,
@@ -6190,7 +6209,7 @@ const SelectionChipGroup = ({
     label,
     chipRemoveLabel,
     getChipProps,
-    ref: containerRef
+    ref: setContainer
   }, {
     Chip,
     ChipGroup,
@@ -13549,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 {