playbook_ui_docs 15.7.0.pre.alpha.PLAY2675dropdownquickpickcustomquickpickdates13330 → 15.7.0.pre.alpha.PLAY2678emojimask13284

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9413b5db7a69e4a0eea6552adc99acb08ecfd88437298aebd4b44d81bc9da222
-  data.tar.gz: c6d4be0cee23406114597f73c231763e747467c03dacd73157f4a3cbc642fc9b
+  metadata.gz: 00f66eab6af4876a7710f5dcaf9b02be43446e49c7fb04af7ebebe1ca3d56bae
+  data.tar.gz: 147d85c32bd77c89f19abfff71856bd5a437611d44347ab7df3a51d30bfa75f4
 SHA512:
-  metadata.gz: d4479f2205e53d256bd30d5acf0af85c4fc7e57c3f3286acb0a6ae9dce15f0c488f7065adb85e9ffdd3767d8f87621c0921c792b6708371266617c29ea6f565f
-  data.tar.gz: f1f8da450a0ace228ee00fc0ded896afc2a95da5eb7f336b95fb8b76c5f737e3ff1186be1f9f18b0f5b7733556da1e94ac73c5d5d182233430ca7334e71c46b2
+  metadata.gz: c0bd1b1559cd5e7f561b78a4aae161f47fd20a812414c03edd8763e221fcc29010cc7ac1cfb781ebfb2bb04ba7624d939c91a0f310d8139e4822cdfa3b3ebb55
+  data.tar.gz: 07b84eed2e2a1afbbe86f158a8722e3816d83dbb57eac0b51e6090f57db425de4d04d10a5d8008446aa9c33fa1c4e4a275ed911e2a7c03b54c295bc4902ab549

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_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/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_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'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 15.7.0.pre.alpha.PLAY2675dropdownquickpickcustomquickpickdates13330
+  version: 15.7.0.pre.alpha.PLAY2678emojimask13284
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-01-06 00:00:00.000000000 Z
+date: 2026-01-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -924,10 +924,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.md
@@ -2384,6 +2380,9 @@ files:
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.html.erb
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.jsx
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.md
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md
@@ -2413,6 +2412,9 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.jsx

@@ -1,56 +0,0 @@
-import React from "react"
-import Dropdown from "../_dropdown"
-
-const DropdownQuickpickCustom = (props) => (
-  <div>
-    <Dropdown
-        customQuickPickDates={{
-          dates: [
-            // Allow Playbook to handle the logic...
-            {
-              label: "Last 15 months",
-              value: {
-                timePeriod: "months",
-                amount: 15,
-              },
-            },
-            // Or, be explicit with an exact date range for more control...
-            {
-              label: "First Week of June 2022",
-              value: ["06/01/2022", "06/07/2022"],
-            },
-          ],
-        }}
-        label="Date Range"
-        marginBottom="sm"
-        onSelect={(selectedItem) => console.log(selectedItem)}
-        variant="quickpick"
-        {...props}
-    />
-    <Dropdown
-        customQuickPickDates={{
-          dates: [
-            {
-              label: "Last 15 months",
-              value: {
-                timePeriod: "months",
-                amount: 15,
-              },
-            },
-            {
-              label: "First Week of June 2022",
-              value: ["06/01/2022", "06/07/2022"],
-            },
-          ],
-          override: false,
-        }}
-        label="Date Range - Append to Defaults"
-        onSelect={(selectedItem) => console.log(selectedItem)}
-        variant="quickpick"
-        {...props}
-    />
-  </div>
-)
-
-export default DropdownQuickpickCustom
-

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.md

@@ -1,10 +0,0 @@
-The `customQuickPickDates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
-
-**The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
-- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
-- An object with `timePeriod` and `amount` properties for dynamic date calculations:
-  - The `timePeriod` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
-  - The `amount` property accepts any number.
-
-**The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
-

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.html.erb

@@ -1,64 +0,0 @@
-<%= pb_rails("dropdown", props: {
-  custom_quick_pick_dates: {
-    dates: [
-      # Allow Playbook to handle the logic...
-      {
-        label: "Last 15 months",
-        value: {
-          time_period: "months",
-          amount: 15
-        }
-      },
-      # Or, be explicit with an exact date range for more control...
-      {
-        label: "First Week of June 2022",
-        value: ["06/01/2022", "06/07/2022"]
-      }
-    ]
-  },
-  id: "date-range-quickpick-custom",
-  label: "Date Range",
-  margin_bottom: "sm",
-  variant: "quickpick"
-}) %>
-
-<%= pb_rails("dropdown", props: {
-  custom_quick_pick_dates: {
-    override: false,
-    dates: [
-      {
-        label: "Last 15 months",
-        value: {
-          time_period: "months",
-          amount: 15
-        }
-      },
-      {
-        label: "First Week of June 2022",
-        value: ["06/01/2022", "06/07/2022"]
-      }
-    ]
-  },
-  id: "date-range-quickpick-custom-append-to-defaults",
-  label: "Date Range - Append to Defaults",
-  variant: "quickpick"
-}) %>
-
-<script>
-  const dropdown1 = document.getElementById("date-range-quickpick-custom");
-  if (dropdown1) {
-    dropdown1.addEventListener("pb:dropdown:selected", (e) => {
-      const option = e.detail;
-      console.log("Selected option:", option);
-    });
-  }
-
-  const dropdown2 = document.getElementById("date-range-quickpick-custom-append-to-defaults");
-  if (dropdown2) {
-    dropdown2.addEventListener("pb:dropdown:selected", (e) => {
-      const option = e.detail;
-      console.log("Selected option:", option);
-    });
-  }
-</script>
-

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.md

@@ -1,10 +0,0 @@
-The `custom_quick_pick_dates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
-
-**The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
-- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
-- An object with `time_period` and `amount` properties for dynamic date calculations:
-  - The `time_period` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
-  - The `amount` property accepts any number.
-
-**The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
-