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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b48fc113950407e6045ecd779bef70a624758ae4d2c9b542c38130a31a35c68f
-  data.tar.gz: fcd6bf8c37129585b0acca7a0d00e6ce54de65bb68fdba3395608883f7ae9011
+  metadata.gz: 5671bd3842cbc616980cca133af25a4d32013d8bcf16c2472d5e5cda9d122943
+  data.tar.gz: 0c2ce0cd5554eb290beb880f6ad0ce84207c40ceaa428b947c6b9566947388ba
 SHA512:
-  metadata.gz: c0af7f993a8f9b64c9fd73d264e7aba87f692387c5c79a798728608c9c487e106270f5e7d1352f074b34bd0523fc15a127cfad5b13c2d6349e30d63fe4e65932
-  data.tar.gz: bb66651f32b7e9b18f83fb47086580b168691b3000f23f98996a564f37f41d8d3012c5e516ab51cd8cc8843aff71a701a3d0dedf0765e5d939e5f11125bab045
+  metadata.gz: 769539b8947c986ca86ad41720be93617da036d335de3ffe9945afe26fcb05bc543d420124486ed2825b85e46ad83bb183ac922a9cbc3f70a1f318f987a5c53b
+  data.tar.gz: af02627b473d11689bf92429bf6bfe6dd7a11bfc443f641c48749ef56faeb0358f12779049e6b72ccb8b6486cca3a211ed7572113cbf65751dc2b9e96a4a7a79

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -20,23 +20,12 @@ import {
     handleClickOutside,
 } from "./utilities";
 
-type CustomQuickPickDate = {
-    label: string;
-    value: string[] | { timePeriod: string; amount: number };
-};
-
-type CustomQuickPickDates = {
-    override?: boolean;
-    dates: CustomQuickPickDate[];
-};
-
 type DropdownProps = {
     aria?: { [key: string]: string };
     autocomplete?: boolean;
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
-    customQuickPickDates?: CustomQuickPickDates;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -74,7 +63,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
-        customQuickPickDates,
         dark = false,
         data = {},
         defaultValue = {},
@@ -107,7 +95,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     // ------------- Quick Pick ---------------------------------
     // Use QuickPick options when variant is "quickpick"
     const dropdownOptions = variant === "quickpick" 
-        ? getQuickPickOptions(rangeEndsToday, customQuickPickDates) 
+        ? getQuickPickOptions(rangeEndsToday) 
         : (options || []);
     // ----------------------------------------------------------
 

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

@@ -25,7 +25,6 @@ examples:
   - dropdown_quickpick_rails: Quick Pick Variant
   - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
-  - dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
 
@@ -58,7 +57,6 @@ examples:
   - dropdown_quickpick: Quick Pick Variant
   - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
-  - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
 
 

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

@@ -26,5 +26,4 @@ export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_
 export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
 export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
 export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
-export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
-export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
+export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -15,8 +15,6 @@ module Playbook
       prop :default_value
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
-      prop :custom_quick_pick_dates, type: Playbook::Props::HashProp,
-                                     default: {}
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default subtle quickpick],
                      default: "default"
@@ -96,10 +94,7 @@ module Playbook
       end
 
       def quickpick_options
-        QuickpickHelper.get_quickpick_options(
-          range_ends_today: range_ends_today,
-          custom_quick_pick_dates: custom_quick_pick_dates
-        )
+        QuickpickHelper.get_quickpick_options(range_ends_today: range_ends_today)
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -539,125 +539,4 @@ test("quickpick option values are Date objects", () => {
   expect(endDate.getTime()).not.toBeNaN()
   
   expect(endDate.getTime()).toBeGreaterThanOrEqual(startDate.getTime())
-})
-
-test("customQuickPickDates overrides default options when override is true or undefined", () => {
-  render(
-    <Dropdown
-        customQuickPickDates={{
-          dates: [
-            {
-              label: "Last 15 months",
-              value: { timePeriod: "months", amount: 15 }
-            },
-            {
-              label: "Custom Range",
-              value: ["06/01/2022", "06/07/2022"]
-            }
-          ]
-        }}
-        data={{ testid: testId }}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  
-  expect(options.length).toBe(2)
-  expect(options[0]).toHaveTextContent("Last 15 months")
-  expect(options[1]).toHaveTextContent("Custom Range")
-})
-
-test("customQuickPickDates appends to defaults when override is false", () => {
-  render(
-    <Dropdown
-        customQuickPickDates={{
-          override: false,
-          dates: [
-            {
-              label: "Custom Option",
-              value: { timePeriod: "days", amount: 30 }
-            }
-          ]
-        }}
-        data={{ testid: testId }}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  
-  expect(options.length).toBe(11)
-  expect(options[0]).toHaveTextContent("Today")
-  expect(options[10]).toHaveTextContent("Custom Option")
-})
-
-test("customQuickPickDates with explicit date array returns correct values", () => {
-  const onSelectMock = jest.fn()
-  
-  render(
-    <Dropdown
-        customQuickPickDates={{
-          dates: [
-            {
-              label: "First Week of June 2022",
-              value: ["06/01/2022", "06/07/2022"]
-            }
-          ]
-        }}
-        data={{ testid: testId }}
-        onSelect={onSelectMock}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const option = kit.querySelector('.pb_dropdown_option_list')
-  
-  fireEvent.click(option)
-  
-  const selectedItem = onSelectMock.mock.calls[0][0]
-  
-  expect(selectedItem.label).toBe("First Week of June 2022")
-  expect(Array.isArray(selectedItem.value)).toBe(true)
-  expect(selectedItem.value.length).toBe(2)
-})
-
-test("customQuickPickDates with timePeriod calculates dates correctly", () => {
-  const onSelectMock = jest.fn()
-  
-  render(
-    <Dropdown
-        customQuickPickDates={{
-          dates: [
-            {
-              label: "Last 7 days",
-              value: { timePeriod: "days", amount: 7 }
-            }
-          ]
-        }}
-        data={{ testid: testId }}
-        onSelect={onSelectMock}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const option = kit.querySelector('.pb_dropdown_option_list')
-  
-  fireEvent.click(option)
-  
-  const selectedItem = onSelectMock.mock.calls[0][0]
-  
-  expect(selectedItem.label).toBe("Last 7 days")
-  expect(Array.isArray(selectedItem.value)).toBe(true)
-  
-  const [startDate, endDate] = selectedItem.value
-  expect(startDate instanceof Date).toBe(true)
-  expect(endDate instanceof Date).toBe(true)
-  
-  const today = new Date()
-  expect(endDate.toDateString()).toBe(today.toDateString())
 })

data/app/pb_kits/playbook/pb_dropdown/quickpick/index.ts

@@ -11,78 +11,8 @@ type QuickPickOption = {
   id?: string;
 };
 
-type CustomQuickPickDate = {
-  label: string;
-  value: string[] | { timePeriod: string; amount: number };
-};
-
-type CustomQuickPickDates = {
-  override?: boolean;
-  dates: CustomQuickPickDate[];
-};
-
-// Helper function to calculate date range from timePeriod and amount
-const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
-  const endDate = new Date();
-  const startDate = new Date();
-
-  switch (timePeriod) {
-    case 'days':
-      startDate.setDate(endDate.getDate() - amount);
-      break;
-    case 'weeks':
-      startDate.setDate(endDate.getDate() - (amount * 7));
-      break;
-    case 'months':
-      startDate.setMonth(endDate.getMonth() - amount);
-      break;
-    case 'quarters':
-      startDate.setMonth(endDate.getMonth() - (amount * 3));
-      break;
-    case 'years':
-      startDate.setFullYear(endDate.getFullYear() - amount);
-      break;
-    default:
-      throw new Error('Invalid time period');
-  }
-  return [startDate, endDate];
-};
-
-// Helper to format date for display
-const formatDate = (date: Date) => {
-  const day = String(date.getDate()).padStart(2, "0");
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const year = date.getFullYear();
-
-  return `${month}/${day}/${year}`;
-};
-
-// Helper to create a QuickPickOption from a custom date
-const createOptionFromCustomDate = (customDate: CustomQuickPickDate): QuickPickOption => {
-  let dateRange: Date[];
-  
-  if (Array.isArray(customDate.value)) {
-    // Explicit date range as string array
-    dateRange = customDate.value.map((dateStr: string) => new Date(dateStr));
-  } else {
-    // Calculate from timePeriod and amount
-    dateRange = calculateDateRange(
-      customDate.value.timePeriod,
-      customDate.value.amount
-    );
-  }
-
-  return {
-    label: customDate.label,
-    value: dateRange,
-    formattedStartDate: formatDate(dateRange[0]),
-    formattedEndDate: formatDate(dateRange[1]),
-    id: `quickpick-${customDate.label.toLowerCase().replace(/\s+/g, '-')}`,
-  };
-};
-
 // Helper to get QuickPick options with date ranges
-const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: CustomQuickPickDates): QuickPickOption[] => {
+const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
   const today = new Date();
   const yesterday = DateTime.getYesterdayDate(new Date());
 
@@ -106,7 +36,14 @@ const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: Cust
   const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date());
   const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date());
 
-  const defaultOptions: QuickPickOption[] = [
+  const formatDate = (date: Date) => {
+  const day = String(date.getDate()).padStart(2, "0")
+  const month = String(date.getMonth() + 1).padStart(2, "0")
+  const year = date.getFullYear()
+
+  return `${month}/${day}/${year}`
+}
+  return [
     { label: 'Today', value: [today, today], id: 'quickpick-today' },
     { label: 'Yesterday', value: [yesterday, yesterday], formattedStartDate: `${formatDate(yesterday)}`, formattedEndDate: `${formatDate(yesterday)}`, id: 'quickpick-yesterday' },
     { label: 'This Week', value: [thisWeekStartDate, thisWeekEndDate], formattedStartDate: `${formatDate(thisWeekStartDate)}`, formattedEndDate: `${formatDate(thisWeekEndDate)}`, id: 'quickpick-this-week' },
@@ -118,19 +55,6 @@ const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: Cust
     { label: 'Last Quarter', value: [lastQuarterStartDate, lastQuarterEndDate], formattedStartDate: `${formatDate(lastQuarterStartDate)}`, formattedEndDate: `${formatDate(lastQuarterEndDate)}`, id: 'quickpick-last-quarter' },
     { label: 'Last Year', value: [lastYearStartDate, lastYearEndDate], formattedStartDate: `${formatDate(lastYearStartDate)}`, formattedEndDate: `${formatDate(lastYearEndDate)}`, id: 'quickpick-last-year' },
   ];
-
-  // Handle customQuickPickDates and override logic
-  if (customQuickPickDates && customQuickPickDates.dates && customQuickPickDates.dates.length > 0) {
-    const customOptions = customQuickPickDates.dates.map(createOptionFromCustomDate);
-    
-    if (customQuickPickDates.override === false) {
-      return [...defaultOptions, ...customOptions];
-    }
-    
-    return customOptions;
-  }
-
-  return defaultOptions;
 };
 
 export default getQuickPickOptions

data/app/pb_kits/playbook/pb_dropdown/quickpick_helper.rb

@@ -4,31 +4,7 @@ module Playbook
   module PbDropdown
     module QuickpickHelper
       class << self
-        def get_quickpick_options(range_ends_today: false, custom_quick_pick_dates: {})
-          default_options = build_default_options(range_ends_today)
-
-          # Handle custom_quick_pick_dates
-          return default_options if custom_quick_pick_dates.blank?
-
-          dates = custom_quick_pick_dates[:dates] || custom_quick_pick_dates["dates"]
-          return default_options if dates.blank?
-
-          custom_options = dates.map { |date_config| build_custom_option(date_config) }
-
-          # Override logic
-          override = custom_quick_pick_dates[:override]
-          override = custom_quick_pick_dates["override"] if override.nil?
-
-          if override == false
-            default_options + custom_options
-          else
-            custom_options
-          end
-        end
-
-      private
-
-        def build_default_options(range_ends_today)
+        def get_quickpick_options(range_ends_today: false)
           today = Date.today
           yesterday = today - 1.day
 
@@ -66,64 +42,7 @@ module Playbook
           ]
         end
 
-        def build_custom_option(date_config)
-          label = date_config[:label] || date_config["label"]
-          value = date_config[:value] || date_config["value"]
-
-          date_range = calculate_date_range(value)
-          start_date = date_range[0]
-          end_date = date_range[1]
-
-          {
-            id: "quickpick-#{label.downcase.gsub(/\s+/, '-')}",
-            label: label,
-            value: [start_date.to_s, end_date.to_s],
-            formatted_start_date: format_date(start_date),
-            formatted_end_date: format_date(end_date),
-          }
-        end
-
-        def calculate_date_range(value)
-          # Parse date strings if value is an array
-          if value.is_a?(Array)
-            [parse_date_string(value[0]), parse_date_string(value[1])]
-          else
-            # Calculate date range from time_period and amount
-            time_period = value[:time_period] || value["time_period"] || value[:timePeriod] || value["timePeriod"]
-            amount = value[:amount] || value["amount"]
-
-            end_date = Date.today
-            start_date = calculate_start_date(time_period, amount, end_date)
-
-            [start_date, end_date]
-          end
-        end
-
-        def parse_date_string(date_str)
-          # Handle US date format (MM/DD/YYYY) because Ruby's Date.parse defaults to European format (DD/MM/YYYY)
-          if date_str.include?("/")
-            Date.strptime(date_str, "%m/%d/%Y")
-          else
-            Date.parse(date_str)
-          end
-        end
-
-        def calculate_start_date(time_period, amount, end_date)
-          case time_period.to_s
-          when "days"
-            end_date - amount.days
-          when "weeks"
-            end_date - amount.weeks
-          when "months"
-            end_date - amount.months
-          when "quarters"
-            end_date - (amount * 3).months
-          when "years"
-            end_date - amount.years
-          else
-            raise ArgumentError, "Invalid time period: #{time_period}"
-          end
-        end
+      private
 
         def format_date(date)
           date.strftime("%m/%d/%Y")

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -90,7 +90,7 @@
 
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
-  <%= form.text_field :example_text_field, props: { label: true } %>
+  <%= form.text_field :example_text_field, props: { label: "emoji mask demo text input", emoji_mask: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
@@ -98,7 +98,7 @@
   <%= form.search_field :example_search_field, props: { label: true } %>
   <%= form.password_field :example_password_field, props: { label: true } %>
   <%= form.url_field :example_url_field, props: { label: true } %>
-  <%= form.text_area :example_text_area, props: { label: true } %>
+  <%= form.text_area :example_text_area, props: { label: "emoji mask demo textarea", emoji_mask: true } %>
   <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
   <%= form.dropdown_field :example_dropdown_multi, props: { label: true, options: example_dropdown_options, multi_select: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>

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'