- {/* Expandable Row icon */}
- | setExpanded(tokenName, !isTokenExpanded),
- expandId: `${tokenName}-expandable-toggle`
- }
- }
- />
- |
- {tokenName}
- |
- {/* Token values for each theme */}
-
- {tokenThemesArr.map(([themeName, themeToken]) => (
-
+
+ Also found in:
+ {Object.entries(otherResults).map(([category, tokens], index) => (
+
+ {index > 0 && ', '}
+
+
+ ))}
+
+ );
+};
+
+const UsedByCell = ({ tokenName, referenceMap, onNavigate }) => {
+ const references = referenceMap[tokenName] || [];
+
+ if (references.length === 0) {
+ return | — | ;
+ }
+
+ if (references.length <= 3) {
+ return (
+
+
+ {references.map((ref, index) => (
+
+
+
))}
- |
+
+
+ );
+ }
+
+ // 4+ references: show count with popover
+ return (
+
+
+ {references.map((ref, index) => (
+
+
+
+ ))}
+
+ }
+ position="left"
+ minWidth="400px"
+ >
+
+
+ |
+ );
+};
- {/* Description - only for semantic tokens */}
- {isSemanticLayer && {tokenDescription} | }
-
+const TokensTableBody = ({
+ token,
+ isSemanticLayer,
+ isChartLayer,
+ isBaseLayer,
+ isPaletteLayer,
+ exhibitsThemeVariantValues,
+ selectedTheme,
+ referenceMap,
+ onNavigate,
+ mergedTokens,
+ allAvailableThemes
+}) => {
+ const [tokenName, tokenData] = token;
+ const tokenThemesArr = getThemeEntriesForDisplay(tokenData, selectedTheme, exhibitsThemeVariantValues, allAvailableThemes);
+ const tokenDescription = tokenThemesArr[0]?.[1]?.description || '';
+ const showUsedBy = isBaseLayer || isPaletteLayer;
- {/* Expandable token chain */}
- {isTokenExpanded &&