jfs-components 0.0.59 → 0.0.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/Button/Button.js +2 -2
- package/lib/commonjs/components/ListGroup/ListGroup.js +2 -1
- package/lib/commonjs/components/Section/Section.js +8 -1
- package/lib/commonjs/icons/registry.js +1 -1
- package/lib/commonjs/utils/react-utils.js +6 -1
- package/lib/module/components/Button/Button.js +2 -2
- package/lib/module/components/ListGroup/ListGroup.js +2 -1
- package/lib/module/components/Section/Section.js +8 -1
- package/lib/module/icons/registry.js +1 -1
- package/lib/module/utils/react-utils.js +6 -1
- package/lib/typescript/src/icons/registry.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/Button/Button.tsx +2 -2
- package/src/components/ListGroup/ListGroup.tsx +3 -2
- package/src/components/Section/Section.tsx +9 -1
- package/src/icons/registry.ts +1 -1
- package/src/utils/react-utils.ts +6 -3
|
@@ -74,7 +74,7 @@ function Button({
|
|
|
74
74
|
const hoverBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', hoverModes) || backgroundColor;
|
|
75
75
|
const hoverBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', hoverModes) || borderColor;
|
|
76
76
|
const hoverTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', hoverModes) || textColor;
|
|
77
|
-
const hoverIconColor =
|
|
77
|
+
const hoverIconColor = hoverTextColor;
|
|
78
78
|
const pressedModes = {
|
|
79
79
|
...modes,
|
|
80
80
|
"Button / State": "Pressed"
|
|
@@ -82,7 +82,7 @@ function Button({
|
|
|
82
82
|
const pressedBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', pressedModes) || backgroundColor;
|
|
83
83
|
const pressedBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', pressedModes) || borderColor;
|
|
84
84
|
const pressedTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', pressedModes) || textColor;
|
|
85
|
-
const pressedIconColor =
|
|
85
|
+
const pressedIconColor = pressedTextColor;
|
|
86
86
|
const activeTextColor = isPressed && !disabled ? pressedTextColor : isHovered && !disabled ? hoverTextColor : textColor;
|
|
87
87
|
const activeIconColor = isPressed && !disabled ? pressedIconColor : isHovered && !disabled ? hoverIconColor : iconColor;
|
|
88
88
|
const baseLabelTextStyle = {
|
|
@@ -84,7 +84,8 @@ function ListGroup({
|
|
|
84
84
|
// propagate modes. Both props are interchangeable; when both are provided
|
|
85
85
|
// the slot items render first, followed by children.
|
|
86
86
|
const rawItems = [...(listGroupSlot ? (0, _reactUtils.flattenChildren)(listGroupSlot) : []), ...(children ? (0, _reactUtils.flattenChildren)(children) : [])];
|
|
87
|
-
const
|
|
87
|
+
const keyedItems = _react.default.Children.toArray(rawItems);
|
|
88
|
+
const processedSlot = keyedItems.length > 0 ? (0, _reactUtils.cloneChildrenWithModes)(keyedItems, modes) : null;
|
|
88
89
|
|
|
89
90
|
// Use provided accessibilityLabel or fall back to label
|
|
90
91
|
const defaultAccessibilityLabel = accessibilityLabel || label || "List group";
|
|
@@ -24,12 +24,19 @@ function SlotGrid({
|
|
|
24
24
|
maxColumns = SLOT_GRID_MAX_COLUMNS
|
|
25
25
|
}) {
|
|
26
26
|
const [maxItemWidth, setMaxItemWidth] = (0, _react.useState)(null);
|
|
27
|
+
const [measureTimedOut, setMeasureTimedOut] = (0, _react.useState)(false);
|
|
27
28
|
const itemWidthsRef = (0, _react.useRef)(new Map());
|
|
28
29
|
const totalItems = items.length;
|
|
29
30
|
(0, _react.useEffect)(() => {
|
|
30
31
|
itemWidthsRef.current.clear();
|
|
31
32
|
setMaxItemWidth(null);
|
|
33
|
+
setMeasureTimedOut(false);
|
|
32
34
|
}, [totalItems]);
|
|
35
|
+
(0, _react.useEffect)(() => {
|
|
36
|
+
if (maxItemWidth !== null) return;
|
|
37
|
+
const timer = setTimeout(() => setMeasureTimedOut(true), 500);
|
|
38
|
+
return () => clearTimeout(timer);
|
|
39
|
+
}, [maxItemWidth, totalItems]);
|
|
33
40
|
const handleItemLayout = (0, _react.useCallback)((index, width) => {
|
|
34
41
|
itemWidthsRef.current.set(index, width);
|
|
35
42
|
if (itemWidthsRef.current.size >= totalItems && totalItems > 0) {
|
|
@@ -45,7 +52,7 @@ function SlotGrid({
|
|
|
45
52
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
46
53
|
style: {
|
|
47
54
|
gap,
|
|
48
|
-
...(isMeasured ? {} : {
|
|
55
|
+
...(isMeasured || measureTimedOut ? {} : {
|
|
49
56
|
opacity: 0
|
|
50
57
|
})
|
|
51
58
|
},
|