github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

[useMemoCss] catch ts errors early (#225379)

Browse source 
## Summary

Coming from the conversation from here:
https://github.com/elastic/kibana/pull/225339#discussion_r2167248942 and
a proposal from @akowalska622, we noticed that the useMemoCss doesn't
catch the keys of the css object. This fixes it.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Marta Bondyra 2025-06-26 11:04:55 +02:00 • committed by GitHub
parent 5cc1fb33aa
commit b143c8448b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 12 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/platform/packages/shared/kbn-css-utils/public/use_memo_css.ts
View file

@ -16,8 +16,6 @@ export type EmotionStyles = Record<
CSSInterpolation | ((theme: UseEuiTheme) => CSSInterpolation)
>;
type StaticEmotionStyles = Record<string, CSSInterpolation>;
/**
* Custom hook to reduce boilerplate when working with Emotion styles that may depend on
* the EUI theme.
@ -37,13 +35,20 @@ type StaticEmotionStyles = Record<string, CSSInterpolation>;
* }
* const styles = useMemoCss(componentStyles);
*/
export const useMemoCss = (styleMap: EmotionStyles) => {
export const useMemoCss = <T extends EmotionStyles>(
styleMap: T
): { [K in keyof T]: CSSInterpolation } => {
const euiThemeContext = useEuiTheme();
const outputStyles = useMemo(() => {
return Object.entries(styleMap).reduce<StaticEmotionStyles>((acc, [key, value]) => {
acc[key] = typeof value === 'function' ? value(euiThemeContext) : value;
return acc;
}, {});
return Object.entries(styleMap).reduce<{ [K in keyof T]: CSSInterpolation }>(
(acc, [key, value]) => {
acc[key as keyof T] = typeof value === 'function' ? value(euiThemeContext) : value;
return acc;
},
{} as { [K in keyof T]: CSSInterpolation }
);
}, [euiThemeContext, styleMap]);
return outputStyles;
};