playbook_ui 15.7.0.pre.alpha.PLAY2675dropdownquickpickcustomquickpickdates13330 → 15.7.0.pre.alpha.PLAY2678emojimask13284

data/app/pb_kits/playbook/pb_text_input/index.js

@@ -1,26 +1,64 @@
 import PbEnhancedElement from "../pb_enhanced_element"
 import { INPUTMASKS } from "./inputMask"
+import { stripEmojisForPaste, applyEmojiMask } from "../utilities/emojiMask"
 
 export default class PbTextInput extends PbEnhancedElement {
   static get selector() {
-    return '[data-pb-input-mask="true"]';
+    return '[data-pb-input-mask="true"], [data-pb-emoji-mask="true"]';
   }
 
   connect() {
     this.handleInput = this.handleInput.bind(this);
+    this.handlePaste = this.handlePaste.bind(this);
     this.element.addEventListener("input", this.handleInput);
+    this.element.addEventListener("paste", this.handlePaste);
     this.handleInput(); 
   }
 
   disconnect() {
     this.element.removeEventListener("input", this.handleInput);
+    this.element.removeEventListener("paste", this.handlePaste);
   }
 
-  handleInput() {
-    const maskType = this.element.getAttribute("mask");
+  hasEmojiMask() {
+    return this.element.dataset.pbEmojiMask === "true";
+  }
+
+  handlePaste(event) {
+    if (!this.hasEmojiMask()) return;
+
+    const pastedText = event.clipboardData.getData('text');
+    const filteredText = stripEmojisForPaste(pastedText);
+
+    if (pastedText !== filteredText) {
+      event.preventDefault();
+      const input = this.element;
+      const start = input.selectionStart || 0;
+      const end = input.selectionEnd || 0;
+      const currentValue = input.value;
+      const newValue = currentValue.slice(0, start) + filteredText + currentValue.slice(end);
+      const newCursor = start + filteredText.length;
+      
+      input.value = newValue;
+      input.selectionStart = input.selectionEnd = newCursor;
+      
+      // Continue to handleInput for mask processing, emoji filtering handled above
+      this.handleInput({ skipEmojiFilter: true });
+    }
+  }
+
+  handleInput({ skipEmojiFilter = false } = {}) {
     const cursorPosition = this.element.selectionStart;
-    const rawValue = this.element.value;
-    let formattedValue = rawValue;
+    let baseValue = this.element.value;
+
+    // Apply emoji mask if enabled (skip if already filtered in paste handler)
+    if (this.hasEmojiMask() && !skipEmojiFilter) {
+      const result = applyEmojiMask(this.element);
+      baseValue = result.value;
+    }
+
+    const maskType = this.element.getAttribute("mask");
+    let formattedValue = baseValue;
 
     const maskKey = {
       currency: 'currency',
@@ -32,13 +70,14 @@ export default class PbTextInput extends PbEnhancedElement {
     }[maskType];
 
     if (maskKey && INPUTMASKS[maskKey]) {
-      formattedValue = INPUTMASKS[maskKey].format(rawValue);
+      formattedValue = INPUTMASKS[maskKey].format(baseValue);
     }
 
     const sanitizedInput = this.element
       .closest(".text_input_wrapper")
       ?.querySelector('[data="sanitized-pb-input"]');
 
+    // Ensure sanitized input uses the already filtered value
     if (sanitizedInput) {
       switch (maskType) {
         case "ssn":
@@ -55,8 +94,10 @@ export default class PbTextInput extends PbEnhancedElement {
       }
     }
 
-    this.element.value = formattedValue;
-    setCursorPosition(this.element, cursorPosition, rawValue, formattedValue);
+    if (maskType) {
+      this.element.value = formattedValue;
+      setCursorPosition(this.element, cursorPosition, baseValue, formattedValue);
+    }
   }
 }
 

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -18,6 +18,8 @@ module Playbook
       prop :autocomplete, default: true
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
+      prop :emoji_mask, type: Playbook::Props::Boolean,
+                        default: false
       prop :error
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
@@ -117,7 +119,9 @@ module Playbook
       def validation_data
         fields = input_options.dig(:data) || {}
         fields[:message] = validation_message unless validation_message.blank?
-        mask ? fields.merge(pb_input_mask: true) : fields
+        fields[:pb_input_mask] = true if mask
+        fields[:pb_emoji_mask] = true if emoji_mask
+        fields
       end
 
       def error_class

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -360,3 +360,56 @@ test('renders required indicator asterisk when requiredIndicator is true', () =>
   expect(label).toBeInTheDocument()
   expect(kit).toHaveTextContent('*') 
 })
+
+const TextInputEmojiMask = (props) => {
+  const [value, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        emojiMask
+        onChange={handleOnChange}
+        value={value}
+        {...props}
+    />
+  )
+}
+
+test('removes emoji characters when emojiMask is enabled', () => {
+  render(
+    <TextInputEmojiMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = within(kit).getByRole('textbox')
+
+  fireEvent.change(input, { target: { value: 'Hello 👋 World 🌍' } })
+  expect(input.value).toBe('Hello  World ')
+
+  fireEvent.change(input, { target: { value: '😀😂🎉' } })
+  expect(input.value).toBe('')
+
+  fireEvent.change(input, { target: { value: 'Hello World' } })
+  expect(input.value).toBe('Hello World')
+})
+
+test('allows accented characters when emojiMask is enabled', () => {
+  render(
+    <TextInputEmojiMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = within(kit).getByRole('textbox')
+
+  fireEvent.change(input, { target: { value: 'Café résumé naïve' } })
+  expect(input.value).toBe('Café résumé naïve')
+
+  fireEvent.change(input, { target: { value: 'àëǒüñ' } })
+  expect(input.value).toBe('àëǒüñ')
+})

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
-import React, { forwardRef, useEffect, useRef } from 'react'
+import React, { forwardRef, useEffect, useRef, ChangeEvent, ClipboardEvent } from 'react'
 import classnames from 'classnames'
 
 import PbTextarea from '.'
@@ -14,6 +14,8 @@ import Caption from '../pb_caption/_caption'
 import Flex from '../pb_flex/_flex'
 import FlexItem from '../pb_flex/_flex_item'
 
+import { stripEmojisForPaste, applyEmojiMask } from '../utilities/emojiMask'
+
 type TextareaProps = {
   aria?: {[key: string]: string},
   characterCount?: string,
@@ -21,6 +23,7 @@ type TextareaProps = {
   children?: React.ReactChild[],
   data?: {[key: string]: string},
   disabled?: boolean,
+  emojiMask?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -45,6 +48,7 @@ const Textarea = ({
   children,
   data = {},
   disabled,
+  emojiMask = false,
   htmlOptions = {},
   inline = false,
   resize = 'none',
@@ -67,6 +71,37 @@ const Textarea = ({
     }
   })
 
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    // Apply emoji mask if enabled using centralized helper
+    if (emojiMask) {
+      applyEmojiMask(e.target)
+    }
+    onChange(e)
+  }
+
+  // Handle paste event for emoji mask - updates textarea value, cursor position, and calls onChange
+  const handlePaste = (e: ClipboardEvent<HTMLTextAreaElement>) => {
+    if (emojiMask) {
+      const pastedText = e.clipboardData.getData('text')
+      const filteredText = stripEmojisForPaste(pastedText)
+      
+      if (pastedText !== filteredText) {
+        e.preventDefault()
+        const textarea = e.currentTarget
+        const start = textarea.selectionStart || 0
+        const end = textarea.selectionEnd || 0
+        const currentValue = textarea.value
+        const newValue = currentValue.slice(0, start) + filteredText + currentValue.slice(end)
+        const newCursorPosition = start + filteredText.length
+        
+        textarea.value = newValue
+        textarea.selectionStart = textarea.selectionEnd = newCursorPosition
+        
+        onChange({ ...e, target: textarea, currentTarget: textarea } as unknown as ChangeEvent<HTMLTextAreaElement>)
+      }
+    }
+  }
+
   const errorClass = error ? 'error' : null
   const inlineClass = inline ? 'inline' : ''
   const resizeClass = `resize_${resize}`
@@ -94,7 +129,8 @@ const Textarea = ({
         <textarea
             disabled={disabled}
             name={name}
-            onChange={onChange}
+            onChange={emojiMask ? handleChange : onChange}
+            onPaste={emojiMask ? handlePaste : undefined}
             placeholder={placeholder}
             ref={ref}
             required={required}

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("textarea", props: {
+  emoji_mask: true,
+  label: "Emoji Mask",
+  placeholder: "Try typing or pasting emojis...",
+}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+
+import Textarea from '../../pb_textarea/_textarea'
+
+const TextareaEmojiMask = (props) => {
+  const [basicValue, setBasicValue] = useState('')
+
+  return (
+    <div>
+      <Textarea
+          emojiMask
+          label="Emoji Mask"
+          onChange={({ target }) => setBasicValue(target.value)}
+          placeholder="Try typing or pasting emojis..."
+          value={basicValue}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextareaEmojiMask
+
+

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.md

@@ -0,0 +1 @@
+Use the `emojiMask` / `emoji_mask` prop to prevent users from entering emoji characters (🐸 🐈 🏄‍♂️) in typed or pasted content. It allows accented characters and other non-ASCII letters (é, ü, 文).

data/app/pb_kits/playbook/pb_textarea/docs/example.yml

@@ -7,6 +7,7 @@ examples:
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
+  - textarea_emoji_mask: Emoji Mask
 
   react:
   - textarea_default: Default
@@ -15,6 +16,7 @@ examples:
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
+  - textarea_emoji_mask: Emoji Mask
 
   swift:
   - textarea_default_swift: Default

data/app/pb_kits/playbook/pb_textarea/docs/index.js

@@ -4,3 +4,4 @@ export { default as TextareaCustom } from './_textarea_custom.jsx'
 export { default as TextareaError } from './_textarea_error.jsx'
 export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
 export { default as TextareaInline } from './_textarea_inline.jsx'
+export { default as TextareaEmojiMask } from './_textarea_emoji_mask.jsx'

data/app/pb_kits/playbook/pb_textarea/index.ts

@@ -1,19 +1,76 @@
 import PbEnhancedElement from '../pb_enhanced_element'
+import { stripEmojisForPaste, applyEmojiMask } from '../utilities/emojiMask'
 
 export default class PbTextarea extends PbEnhancedElement {
   style: {[key: string]: string}
   scrollHeight: string
+  private skipNextEmojiFilter = false
+  
   static get selector(): string {
-    return '.resize_auto textarea'
+    return '.resize_auto textarea, [data-pb-emoji-mask="true"]'
+  }
+
+  hasEmojiMask(): boolean {
+    return (this.element as HTMLElement).dataset.pbEmojiMask === "true"
   }
 
   onInput(): void {
-    this.style.height = 'auto'
-    this.style.height = (this.scrollHeight) + 'px'
+    if ((this.element as HTMLElement).closest('.resize_auto')) {
+      this.style.height = 'auto'
+      this.style.height = (this.scrollHeight) + 'px'
+    }
+  }
+
+  handleEmojiInput = (): void => {
+    if (!this.hasEmojiMask()) return
+    
+    if (this.skipNextEmojiFilter) {
+      this.skipNextEmojiFilter = false
+      return
+    }
+
+    applyEmojiMask(this.element as HTMLTextAreaElement)
+  }
+
+  handleEmojiPaste = (event: ClipboardEvent): void => {
+    if (!this.hasEmojiMask()) return
+
+    const pastedText = event.clipboardData?.getData('text') || ''
+    const filteredText = stripEmojisForPaste(pastedText)
+
+    if (pastedText !== filteredText) {
+      event.preventDefault()
+      const textarea = this.element as HTMLTextAreaElement
+      const start = textarea.selectionStart || 0
+      const end = textarea.selectionEnd || 0
+      const currentValue = textarea.value
+      const newValue = currentValue.slice(0, start) + filteredText + currentValue.slice(end)
+      const newCursor = start + filteredText.length
+      
+      textarea.value = newValue
+      textarea.selectionStart = textarea.selectionEnd = newCursor
+      
+      this.skipNextEmojiFilter = true
+      
+      textarea.dispatchEvent(new Event('input', { bubbles: true }))
+    }
   }
 
   connect(): void {
-    this.element.setAttribute('style', 'height:' + (this.element.scrollHeight) + 'px;overflow-y:hidden;')
-    this.element.addEventListener('input', this.onInput, false)
+    if ((this.element as HTMLElement).closest('.resize_auto')) {
+      this.element.setAttribute('style', 'height:' + (this.element as HTMLTextAreaElement).scrollHeight + 'px;overflow-y:hidden;')
+      this.element.addEventListener('input', this.onInput, false)
+    }
+    
+    if (this.hasEmojiMask()) {
+      this.element.addEventListener('input', this.handleEmojiInput, false)
+      this.element.addEventListener('paste', this.handleEmojiPaste as EventListener, false)
+    }
+  }
+
+  disconnect(): void {
+    this.element.removeEventListener('input', this.onInput, false)
+    this.element.removeEventListener('input', this.handleEmojiInput, false)
+    this.element.removeEventListener('paste', this.handleEmojiPaste as EventListener, false)
   }
 }

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -11,6 +11,7 @@
     <%= text_area(
         :object,
         :method,
+        :data => object.textarea_options[:data],
         :max_characters => object.max_characters,
         :name => object.name,
         :onkeyup => object.onkeyup,

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -3,6 +3,8 @@
 module Playbook
   module PbTextarea
     class Textarea < Playbook::KitBase
+      prop :emoji_mask, type: Playbook::Props::Boolean,
+                        default: false
       prop :error
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
@@ -28,6 +30,12 @@ module Playbook
         max_characters && character_count ? "#{character_count} / #{max_characters}" : character_count
       end
 
+      def textarea_options
+        {
+          data: emoji_mask ? { pb_emoji_mask: true } : {},
+        }
+      end
+
     private
 
       def error_class

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 }
+}
+
+