([])
const [isSearching, setIsSearching] = useState(false)
const styleColorsLabelId = React.useId()
- React.useEffect(() => {
- if (selectedEmoji) {
- /* v8 ignore next 2 - @preserve */
- if (selectedBackground)
- onSelect?.(selectedEmoji, selectedBackground)
- }
- }, [onSelect, selectedEmoji, selectedBackground])
+ const handleEmojiSelect = (emoji: string) => {
+ setSelectedEmoji(emoji)
+ setShowStyleColors(true)
+ onSelect?.(emoji, selectedBackground)
+ }
+
+ const handleBackgroundSelect = (background: string) => {
+ setSelectedBackground(background)
+ if (selectedEmoji)
+ onSelect?.(selectedEmoji, background)
+ }
return (
@@ -108,8 +91,7 @@ const EmojiPickerInner: FC = ({
aria-label={emoji}
className="inline-flex size-10 items-center justify-center rounded-lg border-none bg-transparent p-0"
onClick={() => {
- setSelectedEmoji(emoji)
- setShowStyleColors(true)
+ handleEmojiSelect(emoji)
}}
>
@@ -136,8 +118,7 @@ const EmojiPickerInner: FC = ({
aria-label={emoji}
className="inline-flex size-10 items-center justify-center rounded-lg border-none bg-transparent p-0"
onClick={() => {
- setSelectedEmoji(emoji)
- setShowStyleColors(true)
+ handleEmojiSelect(emoji)
}}
>
@@ -194,7 +175,7 @@ const EmojiPickerInner: FC = ({
)
}
onClick={() => {
- setSelectedBackground(color)
+ handleBackgroundSelect(color)
}}
>
{
expect(screen.getByPlaceholderText('Search emojis...'))!.toBeInTheDocument()
})
- it('initializes selected emoji and background when provided', async () => {
+ it('initializes selected emoji and background when provided', () => {
render()
expect(screen.getByText('Choose Style'))!.toBeInTheDocument()
- await waitFor(() => {
- expect(mockOnSelect).toHaveBeenCalledWith('rabbit', '#E4FBCC')
- })
+ expect(mockOnSelect).not.toHaveBeenCalled()
})
})
diff --git a/web/app/components/base/emoji-picker/__tests__/index.spec.tsx b/web/app/components/base/emoji-picker/__tests__/index.spec.tsx
index ed5f9bed75..45b12352c9 100644
--- a/web/app/components/base/emoji-picker/__tests__/index.spec.tsx
+++ b/web/app/components/base/emoji-picker/__tests__/index.spec.tsx
@@ -26,26 +26,27 @@ vi.mock('@/utils/emoji', () => ({
describe('EmojiPicker', () => {
const mockOnSelect = vi.fn()
- const mockOnClose = vi.fn()
+ const mockOnOpenChange = vi.fn()
beforeEach(() => {
vi.clearAllMocks()
})
describe('Rendering', () => {
- it('renders nothing when isModal is false', () => {
+ it('renders nothing when closed', () => {
const { container } = render(
- ,
+ ,
)
expect(container.firstChild).toBeNull()
})
- it('renders modal when isModal is true', async () => {
+ it('renders modal when open', async () => {
await act(async () => {
render(
- ,
+ ,
)
})
+ expect(screen.getByRole('dialog', { name: /Emoji/i }))!.toBeInTheDocument()
expect(screen.getByPlaceholderText('Search emojis...'))!.toBeInTheDocument()
expect(screen.getByText(/Cancel/i))!.toBeInTheDocument()
expect(screen.getByText(/OK/i))!.toBeInTheDocument()
@@ -54,7 +55,7 @@ describe('EmojiPicker', () => {
it('OK button is disabled initially', async () => {
await act(async () => {
render(
- ,
+ ,
)
})
const okButton = screen.getByText(/OK/i).closest('button')
@@ -65,7 +66,7 @@ describe('EmojiPicker', () => {
const customClass = 'custom-wrapper-class'
await act(async () => {
render(
- ,
+ ,
)
})
const dialog = screen.getByRole('dialog')
@@ -77,7 +78,7 @@ describe('EmojiPicker', () => {
it('calls onSelect with selected emoji and background when OK is clicked', async () => {
await act(async () => {
render(
- ,
+ ,
)
})
@@ -95,10 +96,10 @@ describe('EmojiPicker', () => {
expect(mockOnSelect).toHaveBeenCalledWith(expect.any(String), expect.any(String))
})
- it('calls onClose when Cancel is clicked', async () => {
+ it('closes when Cancel is clicked', async () => {
await act(async () => {
render(
- ,
+ ,
)
})
@@ -107,7 +108,7 @@ describe('EmojiPicker', () => {
fireEvent.click(cancelButton)
})
- expect(mockOnClose).toHaveBeenCalled()
+ expect(mockOnOpenChange).toHaveBeenCalledWith(false)
})
})
})
diff --git a/web/app/components/base/emoji-picker/constants.ts b/web/app/components/base/emoji-picker/constants.ts
new file mode 100644
index 0000000000..927520cb38
--- /dev/null
+++ b/web/app/components/base/emoji-picker/constants.ts
@@ -0,0 +1,23 @@
+export const backgroundColors = [
+ '#FFEAD5',
+ '#E4FBCC',
+ '#D3F8DF',
+ '#E0F2FE',
+
+ '#E0EAFF',
+ '#EFF1F5',
+ '#FBE8FF',
+ '#FCE7F6',
+
+ '#FEF7C3',
+ '#E6F4D7',
+ '#D5F5F6',
+ '#D1E9FF',
+
+ '#D1E0FF',
+ '#D5D9EB',
+ '#ECE9FE',
+ '#FFE4E8',
+]
+
+export const defaultEmojiBackground = backgroundColors[0]!
diff --git a/web/app/components/base/emoji-picker/index.stories.tsx b/web/app/components/base/emoji-picker/index.stories.tsx
index a9804adc40..68ada2269a 100644
--- a/web/app/components/base/emoji-picker/index.stories.tsx
+++ b/web/app/components/base/emoji-picker/index.stories.tsx
@@ -47,20 +47,20 @@ const EmojiPickerDemo = () => {
- {open && (
- {
- setSelection({ emoji, background })
- setOpen(false)
- }}
- onClose={() => setOpen(false)}
- />
- )}
+ setSelection({ emoji, background })}
+ />