(null);
@@ -43,20 +70,17 @@ export const OverflowingTextWithTooltip = ({
return (
<>
-
{text}
-
+
{isTitleOverflowing &&
createPortal(
diff --git a/packages/twenty-ui/src/theme/index.ts b/packages/twenty-ui/src/theme/index.ts
index 2d98d81f6..b525f14ae 100644
--- a/packages/twenty-ui/src/theme/index.ts
+++ b/packages/twenty-ui/src/theme/index.ts
@@ -34,6 +34,7 @@ export * from './constants/TextInputStyle';
export * from './constants/ThemeCommon';
export * from './constants/ThemeDark';
export * from './constants/ThemeLight';
+export * from './provider/ThemeContextProvider';
export * from './provider/ThemeProvider';
export * from './types/ThemeType';
export * from './utils/getNextThemeColor';
diff --git a/packages/twenty-ui/src/theme/provider/ThemeContextProvider.tsx b/packages/twenty-ui/src/theme/provider/ThemeContextProvider.tsx
new file mode 100644
index 000000000..dc0d94cea
--- /dev/null
+++ b/packages/twenty-ui/src/theme/provider/ThemeContextProvider.tsx
@@ -0,0 +1,23 @@
+import { createContext } from 'react';
+
+import { ThemeType } from '@ui/theme/types/ThemeType';
+
+export type ThemeContextType = {
+ theme: ThemeType;
+};
+
+export const ThemeContext = createContext(
+ {} as ThemeContextType,
+);
+
+export const ThemeContextProvider = ({
+ children,
+ theme,
+}: {
+ children: React.ReactNode;
+ theme: ThemeType;
+}) => {
+ return (
+ {children}
+ );
+};
diff --git a/packages/twenty-ui/src/theme/provider/ThemeProvider.tsx b/packages/twenty-ui/src/theme/provider/ThemeProvider.tsx
index 5d86eff43..1282213f8 100644
--- a/packages/twenty-ui/src/theme/provider/ThemeProvider.tsx
+++ b/packages/twenty-ui/src/theme/provider/ThemeProvider.tsx
@@ -1,6 +1,8 @@
import { ReactNode, useEffect } from 'react';
import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { ThemeContextProvider } from '@ui/theme/provider/ThemeContextProvider';
+
import { ThemeType } from '..';
import './theme.css';
@@ -16,7 +18,11 @@ const ThemeProvider = ({ theme, children }: ThemeProviderProps) => {
theme.name === 'dark' ? 'dark' : 'light';
}, [theme]);
- return {children};
+ return (
+
+ {children}
+
+ );
};
export default ThemeProvider;
diff --git a/packages/twenty-ui/vite.config.ts b/packages/twenty-ui/vite.config.ts
index 2451d0eda..bac435e19 100644
--- a/packages/twenty-ui/vite.config.ts
+++ b/packages/twenty-ui/vite.config.ts
@@ -1,5 +1,6 @@
///
import react from '@vitejs/plugin-react-swc';
+import wyw from '@wyw-in-js/vite';
import * as path from 'path';
import { defineConfig } from 'vite';
import checker from 'vite-plugin-checker';
@@ -27,6 +28,16 @@ export default defineConfig({
tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
},
}),
+ wyw({
+ include: [
+ '**/OverflowingTextWithTooltip.tsx',
+ '**/Chip.tsx',
+ '**/Tag.tsx',
+ ],
+ babelOptions: {
+ presets: ['@babel/preset-typescript', '@babel/preset-react'],
+ },
+ }),
],
// Configuration for building your library.
diff --git a/yarn.lock b/yarn.lock
index a95b93a37..96f3306ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -27907,6 +27907,13 @@ __metadata:
languageName: node
linkType: hard
+"fast-equals@npm:^3.0.1":
+ version: 3.0.3
+ resolution: "fast-equals@npm:3.0.3"
+ checksum: ec59372c3f0604fe1569814dd5f86bbe46a5e8ec049f8eda49ce9ab0218e1700c9b7fdef5fe8253453788829a6b2aae6af5f9003f376aed1117f9194b2a7578c
+ languageName: node
+ linkType: hard
+
"fast-fifo@npm:^1.1.0, fast-fifo@npm:^1.2.0":
version: 1.3.2
resolution: "fast-fifo@npm:1.3.2"
@@ -36160,6 +36167,13 @@ __metadata:
languageName: node
linkType: hard
+"micro-memoize@npm:^4.1.2":
+ version: 4.1.2
+ resolution: "micro-memoize@npm:4.1.2"
+ checksum: 4b52dc1aa1c4b533f4008f6181f1e640e1bd1d4826881672b4f60f07ab6acc1deea073413e0488d589308e862abf6f03d1dcf7018bf08e751690268a462de4d3
+ languageName: node
+ linkType: hard
+
"microdiff@npm:^1.3.2":
version: 1.3.2
resolution: "microdiff@npm:1.3.2"
@@ -37627,6 +37641,16 @@ __metadata:
languageName: node
linkType: hard
+"moize@npm:^6.1.6":
+ version: 6.1.6
+ resolution: "moize@npm:6.1.6"
+ dependencies:
+ fast-equals: "npm:^3.0.1"
+ micro-memoize: "npm:^4.1.2"
+ checksum: 5496569c25fd2eaf7a50707e62b5109bad9c3ca43166a82e52c7d3fed41d8b7312cabe3180e1c3c68b3785db06dbeee1bfc60b01b69c7389fae4ce3b3154e28f
+ languageName: node
+ linkType: hard
+
"moment@npm:^2.22.1":
version: 2.30.1
resolution: "moment@npm:2.30.1"
@@ -47444,6 +47468,7 @@ __metadata:
lodash.upperfirst: "npm:^4.3.1"
luxon: "npm:^3.3.0"
microdiff: "npm:^1.3.2"
+ moize: "npm:^6.1.6"
msw: "npm:^2.0.11"
msw-storybook-addon: "npm:2.0.0--canary.122.b3ed3b1.0"
nest-commander: "npm:^3.12.0"