playbook_ui 15.7.0.pre.alpha.play270013292 → 15.7.0.pre.alpha.play270013367

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d476d049a0a1338ccf092061737f48c9890290f0d072b2a8f41492c74485517f
-  data.tar.gz: 51fe8f5c93875f9f3d23341a72e7a7a802ca6f98dbaa866f214a747f86c0ed94
+  metadata.gz: 73221f2b61bfb1268562ee54814653ed97086b27c106dafa2ae27249a388e8fb
+  data.tar.gz: 0410e1c396de358ed5109c7476781094aa21940b822aecd0af23c91f7d4ad319
 SHA512:
-  metadata.gz: 13095cacc73ca4e0e082871b6a8b9d9b0d8ef4999f268fbe2c1b65b853a59568ed69f980d132e1e56ea68c33a06f1cc3213f804e098c7bc0daf4c225b61e2bb5
-  data.tar.gz: 443bf90b455f43f216e1041fc384946e24a2ae9a33be62f1093bbccea715d1c8b2e930f6872b6fc28f6aa276156ab791ed5df514b620c192a0f1fbf352a7e48f
+  metadata.gz: e2e7bba900eaec32654a3b1db302ace38e29f6ed487f825084c9f61c000aae00b92d1ccc1ea7dfd8494f6ea5ab8011f90bfab34ec86da8e03d365c236ef2a87e
+  data.tar.gz: 5d512aef7687b67c7272b7be24bd7643c9a088c9e19851c52487445262e88dbb6d822d730041429dbef3654d39cad1e72b67c6e93897d504d6180a7e68277bf1

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -30,10 +30,6 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
 
-      def auto_close_class
-        auto_close.present? ? " auto_close_#{auto_close}" : ""
-      end
-
       def position_class
         horizontal && vertical ? " positioned_toast #{vertical} #{horizontal}" : ""
       end
@@ -42,6 +38,14 @@ module Playbook
         multi_line.present? ? "multi_line" : nil
       end
 
+      def auto_close_attribute
+        auto_close.present? ? { "pb-auto-close": auto_close } : {}
+      end
+
+      def data
+        Hash(prop(:data)).merge(auto_close_attribute)
+      end
+
       def icon_value
         icon || case status
                 when "success"
@@ -61,9 +65,7 @@ module Playbook
 
       def classname
         default_z_index = z_index.present? ? "" : " z_index_max"
-        # IMPORTANT: the AutoClose class must be the last class in the string for JS to read it correctly
-        # Changing the order will break the auto_close functionality
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index + auto_close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index
       end
     end
   end

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

@@ -21,17 +21,12 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
   }
 
   autoCloseToast(element) {
-    const classListValues = element.classList.value
-    const hasAutoCloseClass = classListValues.includes('auto_close')
-
-    if (hasAutoCloseClass) {
-      const classList = classListValues.split(' ')
-      const autoCloseValue = classList[classList.length - 1].split('_')[2]
-      const autoCloseIntValue = parseInt(autoCloseValue)
+    const autoCloseDataAttr = element.getAttribute('data-pb-auto-close')
 
+    if (autoCloseDataAttr) {
       setTimeout(() => {
         this.removeToast(element)
-      }, autoCloseIntValue)
+      }, parseInt(autoCloseDataAttr))
     }
   }
 }

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbBarGraph } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbCircleChart } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbGaugeChart } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbLineGraph } from 'playbook-ui/charts'
+```

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, ChangeEvent } from 'react'
+import React, { forwardRef, ChangeEvent, ClipboardEvent } from 'react'
 import classnames from 'classnames'
 
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
@@ -12,6 +12,7 @@ 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 },
@@ -19,6 +20,7 @@ type TextInputProps = {
   data?: { [key: string]: string },
   dark?: boolean,
   disabled?: boolean,
+  emojiMask?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -49,6 +51,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     dark = false,
     data = {},
     disabled,
+    emojiMask = false,
     error,
     htmlOptions = {},
     id,
@@ -102,6 +105,11 @@ 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
 
@@ -134,6 +142,29 @@ 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;
@@ -145,10 +176,16 @@ 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(props)}
+        {...domSafeProps(domProps)}
         aria-describedby={errorId}
         aria-invalid={!!error}
         autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
@@ -157,7 +194,8 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         id={id}
         key={id}
         name={name}
-        onChange={isMaskedInput ? handleChange : onChange}
+        onChange={shouldUseCustomHandler ? handleChange : onChange}
+        onPaste={emojiMask ? handlePaste : undefined}
         pattern={isMaskedInput ? INPUTMASKS[mask]?.pattern : undefined}
         placeholder={placeholder || (isMaskedInput ? INPUTMASKS[mask]?.placeholder : undefined)}
         ref={ref}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.html.erb

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

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.jsx

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

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.md

@@ -0,0 +1,2 @@
+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_text_input/docs/example.yml

@@ -11,6 +11,7 @@ examples:
   - text_input_mask: Mask
   - text_input_autocomplete: Autocomplete
   - text_input_required_indicator: Required Indicator
+  - text_input_emoji_mask: Emoji Mask
 
   
   react:
@@ -25,6 +26,7 @@ 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,3 +9,4 @@ 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,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'