jfs-components 0.0.59 → 0.0.61

package/lib/commonjs/utils/react-utils.js

@@ -42,7 +42,12 @@ function cloneChildrenWithModes(children, modes, forcedModes) {
       ...modes,
       ...existingModes
     } : modes;
-    const processedChildren = hasChildren ? cloneChildrenWithModes(childChildren, modes, forcedModes) : undefined;
+    let processedChildren;
+    if (hasChildren) {
+      const childArray = _react.default.Children.toArray(childChildren);
+      const processed = cloneChildrenWithModes(childArray, modes, forcedModes);
+      processedChildren = processed.length === 1 ? processed[0] : processed;
+    }
     result.push(/*#__PURE__*/_react.default.cloneElement(child, {
       ...child.props,
       modes: mergedModes

package/lib/module/components/Button/Button.js

@@ -68,7 +68,7 @@ function Button({
   const hoverBg = getVariableByName('button/background', hoverModes) || backgroundColor;
   const hoverBorderColor = getVariableByName('button/border/color', hoverModes) || borderColor;
   const hoverTextColor = getVariableByName('button/foreground', hoverModes) || textColor;
-  const hoverIconColor = getVariableByName('button/icon/color', hoverModes) ?? hoverTextColor;
+  const hoverIconColor = hoverTextColor;
   const pressedModes = {
     ...modes,
     "Button / State": "Pressed"
@@ -76,7 +76,7 @@ function Button({
   const pressedBg = getVariableByName('button/background', pressedModes) || backgroundColor;
   const pressedBorderColor = getVariableByName('button/border/color', pressedModes) || borderColor;
   const pressedTextColor = getVariableByName('button/foreground', pressedModes) || textColor;
-  const pressedIconColor = getVariableByName('button/icon/color', pressedModes) ?? pressedTextColor;
+  const pressedIconColor = pressedTextColor;
   const activeTextColor = isPressed && !disabled ? pressedTextColor : isHovered && !disabled ? hoverTextColor : textColor;
   const activeIconColor = isPressed && !disabled ? pressedIconColor : isHovered && !disabled ? hoverIconColor : iconColor;
   const baseLabelTextStyle = {

package/lib/module/components/ListGroup/ListGroup.js

@@ -79,7 +79,8 @@ function ListGroup({
   // propagate modes.  Both props are interchangeable; when both are provided
   // the slot items render first, followed by children.
   const rawItems = [...(listGroupSlot ? flattenChildren(listGroupSlot) : []), ...(children ? flattenChildren(children) : [])];
-  const processedSlot = rawItems.length > 0 ? cloneChildrenWithModes(rawItems, modes) : null;
+  const keyedItems = React.Children.toArray(rawItems);
+  const processedSlot = keyedItems.length > 0 ? cloneChildrenWithModes(keyedItems, modes) : null;
 
   // Use provided accessibilityLabel or fall back to label
   const defaultAccessibilityLabel = accessibilityLabel || label || "List group";

package/lib/module/components/Section/Section.js

@@ -19,12 +19,19 @@ function SlotGrid({
   maxColumns = SLOT_GRID_MAX_COLUMNS
 }) {
   const [maxItemWidth, setMaxItemWidth] = useState(null);
+  const [measureTimedOut, setMeasureTimedOut] = useState(false);
   const itemWidthsRef = useRef(new Map());
   const totalItems = items.length;
   useEffect(() => {
     itemWidthsRef.current.clear();
     setMaxItemWidth(null);
+    setMeasureTimedOut(false);
   }, [totalItems]);
+  useEffect(() => {
+    if (maxItemWidth !== null) return;
+    const timer = setTimeout(() => setMeasureTimedOut(true), 500);
+    return () => clearTimeout(timer);
+  }, [maxItemWidth, totalItems]);
   const handleItemLayout = useCallback((index, width) => {
     itemWidthsRef.current.set(index, width);
     if (itemWidthsRef.current.size >= totalItems && totalItems > 0) {
@@ -40,7 +47,7 @@ function SlotGrid({
   return /*#__PURE__*/_jsx(View, {
     style: {
       gap,
-      ...(isMeasured ? {} : {
+      ...(isMeasured || measureTimedOut ? {} : {
         opacity: 0
       })
     },