playbook_ui 15.7.0.pre.alpha.play2607setheightofeditor13370 → 15.7.0.pre.alpha.play258013248

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f960f22bca9b3635502362441b26a13583eb183fcdebab46ebbca3f5b2b64d33
-  data.tar.gz: 37dd6c333df8bc2149be578ef208c32fea70e3ebdec053a8ab180ec5bf56e1d7
+  metadata.gz: a57b87c794ebb9c526328411d074cf50c56b92e554eea530bc34ab79f009b9d7
+  data.tar.gz: 14aa366eb5f3af416b537e4d51cc70fcec656cfb5b7be7fa754f0fdf45e54cf0
 SHA512:
-  metadata.gz: 694f79e8ddf8ab1bd308e0d0f85faacbd856f66dfbb52f728074ff1721d673b0d4d32513c0aa5dd4c05f652aeb73d1ae4f5c77258fedbdb26b17f80fdcbf1e3d
-  data.tar.gz: b8cb5e6390f7a57b562a29dfa341ec33860bdee17c24df89ead92d06d01ae82bf9283600c0d0f4aedcf9b6dafc1b0cddb2eebd4bebdf5118b4fd10a356e65004
+  metadata.gz: 6b3ec5d9f16652c8cd619e3410315d7ce5559cebf78811127ebd624d33bc7987c0846fcc6c26b8daada7438c9896894b0fb4abb81816eeb98a664d725778da0d
+  data.tar.gz: d24a169b7c3712bdeb27dff6a886128a0c4c5b94f4d91a6d9beb45eaa33d9f459a262d9b80582a0e3f9d16f38f0db76586a9a26de71dfb5bf286766aeb6931bf

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -4,7 +4,7 @@ import Flex from "../../pb_flex/_flex";
 import FlexItem from "../../pb_flex/_flex_item";
 import SectionSeparator from "../../pb_section_separator/_section_separator";
 
-import EditorButton  from "./EditorButton";
+import  EditorButton  from "./EditorButton";
 import ToolbarDropdown from "./ToolbarDropdown";
 import ToolbarNodes from "./ToolbarNodes";
 import { ToolbarTypes } from "./EditorTypes";

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -44,8 +44,6 @@ type RichTextEditorProps = {
   name?: string,
   onChange: (html: string, text: string) => void,
   placeholder?: string,
-  inputHeight?: "sm" | "md" | "lg",
-  inputMinHeight?: "sm" | "md" | "lg",
   simple?: boolean,
   sticky?: boolean,
   template: string,
@@ -70,8 +68,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     name,
     onChange = noop,
     placeholder,
-    inputHeight,
-    inputMinHeight,
     simple = false,
     sticky = false,
     template = '',
@@ -218,10 +214,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       {
         advancedEditor ? (
           <div 
-              className={classnames(
-                "pb_rich_text_editor_advanced_container",
-                { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
-              )}
+              className={classnames("pb_rich_text_editor_advanced_container", { 
+              ["toolbar-active"]: shouldShowToolbar,
+              })}
           >
             {shouldShowToolbar && (
               <EditorToolbar editor={advancedEditor}

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -205,59 +205,6 @@
     }
   }
 }
-
-.pb_rich_text_editor_advanced_container.input_height_sm {
-  div {
-    .tiptap.ProseMirror {
-      height: 131px;
-      overflow: auto;
-    }
-  }
-}
-
-.pb_rich_text_editor_advanced_container.input_height_md {
-  div {
-    .tiptap.ProseMirror {
-      height: 180px;
-      overflow: auto;
-    }
-  }
-}
-
-.pb_rich_text_editor_advanced_container.input_height_lg {
-  div {
-    .tiptap.ProseMirror {
-      height: 230px;
-      overflow: auto;
-    }
-  }
-}
-
-.pb_rich_text_editor_advanced_container.input_min_height_sm {
-  div {
-    .tiptap.ProseMirror {
-      min-height: 131px;
-    }
-  }
-}
-
-.pb_rich_text_editor_advanced_container.input_min_height_md {
-  div {
-    .tiptap.ProseMirror {
-      min-height: 180px;
-    }
-  }
-}
-
-.pb_rich_text_editor_advanced_container.input_min_height_lg {
-  div {
-    .tiptap.ProseMirror {
-      min-height: 230px;
-    }
-  }
-}
-
-
 .tiptap-content {
   @include preview_tiptap_first_child;
   a {

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

@@ -29,7 +29,5 @@ examples:
   # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_advanced_inline: Advanced (Inline)
-  - rich_text_editor_advanced_height: Advanced Height
-  - rich_text_editor_advanced_min_height: Advanced Min Height
   - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview

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

@@ -16,6 +16,4 @@ export { default as RichTextEditorAdvancedFocus } from './_rich_text_editor_adva
 export { default as RichTextEditorAdvancedTemplates } from './_rich_text_editor_advanced_templates.jsx'
 export { default as RichTextEditorAdvancedAttributes } from './_rich_text_editor_advanced_attributes.jsx'
 export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_advanced_sticky.jsx'
-export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
-export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
-export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
+export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ChangeEvent, ClipboardEvent } from 'react'
+import React, { forwardRef, ChangeEvent } from 'react'
 import classnames from 'classnames'
 
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
@@ -12,7 +12,6 @@ import Icon from '../pb_icon/_icon'
 import colors from '../tokens/exports/_colors.module.scss'
 
 import { INPUTMASKS } from './inputMask'
-import { stripEmojisForPaste, applyEmojiMask } from '../utilities/emojiMask'
 
 type TextInputProps = {
   aria?: { [key: string]: string },
@@ -20,7 +19,6 @@ type TextInputProps = {
   data?: { [key: string]: string },
   dark?: boolean,
   disabled?: boolean,
-  emojiMask?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -51,7 +49,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     dark = false,
     data = {},
     disabled,
-    emojiMask = false,
     error,
     htmlOptions = {},
     id,
@@ -105,11 +102,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   const isMaskedInput = mask && mask in INPUTMASKS
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    // Apply emoji mask if enabled using centralized helper
-    if (emojiMask) {
-      applyEmojiMask(e.target)
-    }
-
     if (isMaskedInput) {
       const inputValue = e.target.value
 
@@ -142,29 +134,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     }
   }
 
-  // Handle paste event for emoji mask - updates input value, cursor position, and calls onChange
-  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
-    if (emojiMask) {
-      const pastedText = e.clipboardData.getData('text')
-      const filteredText = stripEmojisForPaste(pastedText)
-      
-      if (pastedText !== filteredText) {
-        e.preventDefault()
-        const input = e.currentTarget
-        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 newCursorPosition = start + filteredText.length
-        
-        input.value = newValue
-        input.selectionStart = input.selectionEnd = newCursorPosition
-        
-        onChange({ ...e, target: input, currentTarget: input } as unknown as ChangeEvent<HTMLInputElement>)
-      }
-    }
-  }
-
   const childInput = children ? children.type === "input" : undefined
 
   let formattedValue;
@@ -176,16 +145,10 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
 
   const errorId = error ? `${id}-error` : undefined
 
-  // Set custom handler between emoji mask and input mask
-  const shouldUseCustomHandler = isMaskedInput || emojiMask
-
-  // Filter out emojiMask from props passed to DOM element
-  const { emojiMask: _emojiMask, ...domProps } = props
-
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
-        {...domSafeProps(domProps)}
+        {...domSafeProps(props)}
         aria-describedby={errorId}
         aria-invalid={!!error}
         autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
@@ -194,8 +157,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         id={id}
         key={id}
         name={name}
-        onChange={shouldUseCustomHandler ? handleChange : onChange}
-        onPaste={emojiMask ? handlePaste : undefined}
+        onChange={isMaskedInput ? handleChange : onChange}
         pattern={isMaskedInput ? INPUTMASKS[mask]?.pattern : undefined}
         placeholder={placeholder || (isMaskedInput ? INPUTMASKS[mask]?.placeholder : undefined)}
         ref={ref}

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

@@ -11,7 +11,6 @@ examples:
   - text_input_mask: Mask
   - text_input_autocomplete: Autocomplete
   - text_input_required_indicator: Required Indicator
-  - text_input_emoji_mask: Emoji Mask
 
   
   react:
@@ -26,7 +25,6 @@ examples:
   - text_input_sanitize: Sanitized Masked Input
   - text_input_autocomplete: Autocomplete
   - text_input_required_indicator: Required Indicator
-  - text_input_emoji_mask: Emoji Mask
 
 
   swift:

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

@@ -9,4 +9,3 @@ export { default as TextInputMask } from './_text_input_mask.jsx'
 export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
 export { default as TextInputAutocomplete } from './_text_input_autocomplete.jsx'
 export { default as TextInputRequiredIndicator } from './_text_input_required_indicator.jsx'
-export { default as TextInputEmojiMask } from './_text_input_emoji_mask.jsx'

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

@@ -1,64 +1,26 @@
 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"], [data-pb-emoji-mask="true"]';
+    return '[data-pb-input-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);
   }
 
-  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;
-    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;
-    }
-
+  handleInput() {
     const maskType = this.element.getAttribute("mask");
-    let formattedValue = baseValue;
+    const cursorPosition = this.element.selectionStart;
+    const rawValue = this.element.value;
+    let formattedValue = rawValue;
 
     const maskKey = {
       currency: 'currency',
@@ -70,14 +32,13 @@ export default class PbTextInput extends PbEnhancedElement {
     }[maskType];
 
     if (maskKey && INPUTMASKS[maskKey]) {
-      formattedValue = INPUTMASKS[maskKey].format(baseValue);
+      formattedValue = INPUTMASKS[maskKey].format(rawValue);
     }
 
     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":
@@ -94,10 +55,8 @@ export default class PbTextInput extends PbEnhancedElement {
       }
     }
 
-    if (maskType) {
-      this.element.value = formattedValue;
-      setCursorPosition(this.element, cursorPosition, baseValue, formattedValue);
-    }
+    this.element.value = formattedValue;
+    setCursorPosition(this.element, cursorPosition, rawValue, formattedValue);
   }
 }
 

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

@@ -18,8 +18,6 @@ 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
@@ -119,9 +117,7 @@ module Playbook
       def validation_data
         fields = input_options.dig(:data) || {}
         fields[:message] = validation_message unless validation_message.blank?
-        fields[:pb_input_mask] = true if mask
-        fields[:pb_emoji_mask] = true if emoji_mask
-        fields
+        mask ? fields.merge(pb_input_mask: true) : fields
       end
 
       def error_class

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

@@ -360,56 +360,3 @@ 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, ChangeEvent, ClipboardEvent } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import classnames from 'classnames'
 
 import PbTextarea from '.'
@@ -14,8 +14,6 @@ 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,
@@ -23,7 +21,6 @@ type TextareaProps = {
   children?: React.ReactChild[],
   data?: {[key: string]: string},
   disabled?: boolean,
-  emojiMask?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -48,7 +45,6 @@ const Textarea = ({
   children,
   data = {},
   disabled,
-  emojiMask = false,
   htmlOptions = {},
   inline = false,
   resize = 'none',
@@ -71,37 +67,6 @@ 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}`
@@ -129,8 +94,7 @@ const Textarea = ({
         <textarea
             disabled={disabled}
             name={name}
-            onChange={emojiMask ? handleChange : onChange}
-            onPaste={emojiMask ? handlePaste : undefined}
+            onChange={onChange}
             placeholder={placeholder}
             ref={ref}
             required={required}

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

@@ -7,7 +7,6 @@ examples:
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
-  - textarea_emoji_mask: Emoji Mask
 
   react:
   - textarea_default: Default
@@ -16,7 +15,6 @@ 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,4 +4,3 @@ 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,76 +1,19 @@
 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, [data-pb-emoji-mask="true"]'
-  }
-
-  hasEmojiMask(): boolean {
-    return (this.element as HTMLElement).dataset.pbEmojiMask === "true"
+    return '.resize_auto textarea'
   }
 
   onInput(): void {
-    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 }))
-    }
+    this.style.height = 'auto'
+    this.style.height = (this.scrollHeight) + 'px'
   }
 
   connect(): void {
-    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)
+    this.element.setAttribute('style', 'height:' + (this.element.scrollHeight) + 'px;overflow-y:hidden;')
+    this.element.addEventListener('input', this.onInput, false)
   }
 }

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

@@ -11,7 +11,6 @@
     <%= 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,8 +3,6 @@
 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
@@ -30,12 +28,6 @@ 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