playbook_ui 15.7.0.pre.alpha.PLAY2675dropdownquickpickcustomquickpickdates13330 → 15.7.0.pre.alpha.play2607setheightofeditor13370

data/app/pb_kits/playbook/pb_textarea/textarea.test.js

@@ -1,5 +1,5 @@
-import React from "react"
-import { render, screen } from "../utilities/test-utils"
+import React, { useState } from "react"
+import { render, screen, fireEvent } from "../utilities/test-utils"
 
 import Textarea from "./_textarea"
 
@@ -211,3 +211,58 @@ describe("TextArea Kit Props", () => {
     expect(textarea.required).toBeTruthy()
   })
 })
+
+describe("Textarea Emoji Mask", () => {
+  const TextareaEmojiMask = (props) => {
+    const [value, setValue] = useState('')
+    const handleOnChange = ({ target }) => {
+      setValue(target.value)
+    }
+
+    return (
+      <Textarea
+          emojiMask
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+    )
+  }
+
+  test("removes emoji characters when emojiMask is enabled", () => {
+    render(
+      <TextareaEmojiMask
+          data={{ testid: testId }}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    fireEvent.change(textarea, { target: { value: 'Hello 👋 World 🌍' } })
+    expect(textarea.value).toBe('Hello  World ')
+
+    fireEvent.change(textarea, { target: { value: '😀😂🎉' } })
+    expect(textarea.value).toBe('')
+
+    fireEvent.change(textarea, { target: { value: 'Hello World' } })
+    expect(textarea.value).toBe('Hello World')
+  })
+
+  test("allows accented characters when emojiMask is enabled", () => {
+    render(
+      <TextareaEmojiMask
+          data={{ testid: testId }}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    fireEvent.change(textarea, { target: { value: 'Café résumé naïve' } })
+    expect(textarea.value).toBe('Café résumé naïve')
+
+    fireEvent.change(textarea, { target: { value: 'àëǒüñ' } })
+    expect(textarea.value).toBe('àëǒüñ')
+  })
+})

data/app/pb_kits/playbook/utilities/emojiMask.ts

@@ -0,0 +1,42 @@
+// Regex to match emoji/pictographic characters
+// With modifiers: Zero Width Joiner, Variation Selectors, Skin Tone Modifiers
+export const EMOJI_REGEX = /\p{Extended_Pictographic}|\u200D|\uFE0F|[\u{1F3FB}-\u{1F3FF}]/gu
+
+// Utility function to strip emojis from text when typing emojis
+export const stripEmojisForTyping = (text: string): string => {
+  return text.replace(EMOJI_REGEX, '')
+}
+
+// Utility function to strip emojis and clean up whitespace when pasting emojis
+export const stripEmojisForPaste = (text: string): string => {
+  return stripEmojisForTyping(text)
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+type EmojiMaskResult = {
+  value: string
+  cursor: number | null
+}
+
+// Union type for elements that support emoji masking
+type TextInputElement = HTMLInputElement | HTMLTextAreaElement
+
+export const applyEmojiMask = (
+  element: TextInputElement
+): EmojiMaskResult => {
+  const cursor = element.selectionStart
+  const original = element.value
+  const filtered = stripEmojisForTyping(original)
+  
+  if (original !== filtered) {
+    const beforeCursor = original.slice(0, cursor || 0)
+    const newCursor = stripEmojisForTyping(beforeCursor).length
+    element.value = filtered
+    element.selectionStart = element.selectionEnd = newCursor
+    return { value: filtered, cursor: newCursor }
+  }
+  return { value: original, cursor }
+}
+
+