playbook_ui 14.11.1.pre.alpha.hfhbrakemanplaybook5370 → 14.11.1.pre.alpha.pbntr703collapsiblerowsrails5536

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 259282b2e2f9943f189c92148ccc724649be5679f5c6704adc2456b7ca43604d
-  data.tar.gz: f710de54b6c1695917dbbc553911c316f9c64429f9d6c1b5f028800bd013b6e2
+  metadata.gz: 6a968d08aaa4af48a9fac9eb0fc5191c8d738b7fd5a6514064cc864a25a1e283
+  data.tar.gz: af0da5b80ce2adb3d94a96caf5d5ed489d35a01f5b15e00a50eb6691ab9f95ff
 SHA512:
-  metadata.gz: 3f33c26851a92b56250bcc84f12ad93edd4b7f0454d58c55bd26bfe7a83b4d205fab1f3319941e4bfc9afe5c774c28e68b7cb4108795385d850bda38f2b0e0ae
-  data.tar.gz: 4fa4ec45bb0d50f82a261724eba15fd18290693540e91c8ab89f4101aa2eb7c315375fb3fa24dccb481a2f3da1a44ba48a130e5916f765fe60eb0a71c58f4e00
+  metadata.gz: 42767c7d834ab7d1da43a081d310276dd141f23a53a9ad1a6cb48c52f57f713e802d2e490e6956ecfe6f835b10fe3bf54d953d406fd1054c05e40d55fec12b24
+  data.tar.gz: c37bd39bfbbfcafa7905258522be6c18c9d96734530a99ae7467c6a2bc427f1cca041b3efdfee89352fc99cc0d51b9fe8e6d7b96da65ec5872bbe3f3feab3bbc

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md

@@ -1,3 +1,3 @@
-`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc. 
+`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc.
 
-The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort directino is `desc: true`.
+The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort direction is `desc: true`.

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,6 +1,5 @@
-<%= content_tag(object.tag,
-                object.tag == "button" ? object.options : object.link_options,
-                **combined_html_options) do %>
+<%= pb_content_tag(object.tag,
+                object.tag == "button" ? object.options : object.link_options) do %>
     <% if object.variant === "reaction" %>
         <% if icon && object.valid_emoji(object.icon) %>
             <%= pb_rails("flex", props:{ align: "center" }) do %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:label, aria: object.aria,
-                        id: object.id,
-                        data: object.data,
-                        class: object.classname,
-                        **combined_html_options
-                ) do %>
+<%= pb_content_tag(:label) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
     <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">

data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb

@@ -1,3 +1,5 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(
+  object.tag
+) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbCollapsible
     class Collapsible < Playbook::KitBase
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td thead col],
+                 default: "div"
       def classname
         generate_classname("pb_collapsible_kit")
       end

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,9 +1,5 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname + object.error_class,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div,
+    class: object.classname + object.error_class) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -2,4 +2,4 @@ The `defaultDate`/`default_date` prop has a null or empty string value by defaul
 
 If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
 
-
+You can leverage the `defaultDate`/`default_date` prop with custom logic in your filter or controller files where the determination of the default value changes based on user interaction. The page can load with an initial default date picker value or placeholder text, then after filter submission save the submitted values as the "new default" (via state or params).

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb

@@ -6,14 +6,8 @@
 
 ] %>
 
-<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <%= pb_rails("list", props: {ordered: false}) do %>
-        <% initial_items.each do |item| %>
-            <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-                <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
-            <% end %>
-        <% end %>
-    <% end %>
+<%= pb_rails("list", props: { enable_drag: true, items: initial_items }) do %>
+  <% initial_items.each do |item| %>
+    <%= pb_rails("list/item", props:{drag_id: item[:id]}) do %><%= item[:name] %><% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md

@@ -0,0 +1,5 @@
+For a simplified version of the Draggable API for the List kit, you can do the following:
+
+The List kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on List kit with an array of the included items AND `drag_id` prop on ListItems. You will also need to include the `items` prop containing your array of listed items for the Draggable API.
+
+An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb

@@ -0,0 +1,38 @@
+<%= pb_rails("selectable_list",
+        props: {
+          enable_drag: true,
+          variant: "radio",
+          items: [
+            { drag_id: "41",
+              text: "Task 1",
+              input_options: {
+                value: "1",
+                name: "radio-name",
+              }
+            },
+            { drag_id: "42",
+              text: "Task 2",
+              checked: true,
+              input_options: {
+                value: "2",
+                name: "radio-name",
+              }
+            },
+            { drag_id: "43",
+              text: "Task 3",
+              input_options: {
+                value: "3",
+                name: "radio-name",
+              }
+            },
+            { drag_id: "44",
+              text: "Task 4",
+              input_options: {
+                value: "4",
+                name: "radio-name",
+              }
+            }
+          ]
+        }
+    )
+%>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md

@@ -0,0 +1,3 @@
+For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
+
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.

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

@@ -11,6 +11,7 @@ examples:
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit
+  - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards
 
 

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

@@ -1 +1 @@
-For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.
+For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a cleaner look.

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -1,19 +1,14 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.label.present? %>
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input 
-            data-default-value="<%= input_default_value %>" 
-            id="dropdown-selected-option" 
-            name="<%= object.name %>" 
-            style="display: none" 
-            <%= object.required ? "required" : ""%> 
+        <input
+            data-default-value="<%= input_default_value %>"
+            id="dropdown-selected-option"
+            name="<%= object.name %>"
+            style="display: none"
+            <%= object.required ? "required" : ""%>
         />
         <% if content.present? %>
             <%= content.presence %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -1,20 +1,15 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
-            <% if content.present? %> 
+            <% if content.present? %>
                 <%= content.presence %>
-            <% else %> 
+            <% else %>
                 <%= pb_rails("list/item", props: {
-                    display: "flex", 
-                    justify_content: "center", 
-                    padding:"xs", 
-                    }) do %> 
+                    display: "flex",
+                    justify_content: "center",
+                    padding:"xs",
+                    }) do %>
                         <%= pb_rails("body", props: {text: "No option"}) %>
                 <% end %>
             <% end %>
-    <% end %>        
-<% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -1,15 +1,10 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.option[:id],
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, id: object.option[:id]) do %>
     <%= pb_rails("list/item", props: {
-        display: "flex", 
-        justify_content: "center", 
-        padding:"none", 
+        display: "flex",
+        justify_content: "center",
+        padding:"none",
         cursor: "pointer"
-        }) do %> 
+        }) do %>
             <div class="dropdown_option_wrapper">
                 <% if content.present? %>
                     <%= content.presence %>
@@ -18,4 +13,4 @@
                 <% end %>
             </div>
     <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -1,21 +1,16 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if content.present? %>
         <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
           <%= content.presence %>
         </div>
     <% else %>
     <%= pb_rails("flex", props: {
-        align: "center", 
-        border_radius:"lg", 
-        classname: object.trigger_wrapper_classes, 
-        cursor: "pointer", 
-        justify: "between", 
-        padding_x:"sm", 
+        align: "center",
+        border_radius:"lg",
+        classname: object.trigger_wrapper_classes,
+        cursor: "pointer",
+        justify: "between",
+        padding_x:"sm",
         padding_y:"xs",
         html_options: {tabindex:"0"}
         }) do %>
@@ -23,7 +18,7 @@
             <%= pb_rails("flex", props: {align: "center"}) do %>
                 <% if object.custom_display.present?  %>
                     <%= pb_rails("flex", props: {align: "center"}) do %>
-                        <div id="dropdown_trigger_custom_display" style="display: none;"> 
+                        <div id="dropdown_trigger_custom_display" style="display: none;">
                             <%= object.custom_display %>
                         </div>
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
@@ -40,4 +35,3 @@
     <% end %>
     <% end %>
 <% end %>
-      

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -1,10 +1,32 @@
-<%= content_tag(:li,
-                aria: object.aria,
-                class: object.classname,
-                data: object.data,
-                id: object.id,
-                tabindex: object.tabindex,
-                **combined_html_options
-  ) do %>
+<% if object.draggable? %>
+  <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
+    <%= content_tag(:li,
+                    aria: object.aria,
+                    class: object.classname,
+                    data: object.data,
+                    id: object.id,
+                    tabindex: object.tabindex,
+                    **combined_html_options
+      ) do %>
+      <% if object.drag_handle %>
+        <span style="vertical-align: middle;">
+          <%= pb_rails("body") do %>
+            <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
+          <% end %>
+        </span>
+      <% end %>
+      <%= content.presence %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= content_tag(:li,
+                  aria: object.aria,
+                  class: object.classname,
+                  data: object.data,
+                  id: object.id,
+                  tabindex: object.tabindex,
+                  **combined_html_options
+    ) do %>
     <%= content.presence %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/item.rb

@@ -3,11 +3,18 @@
 module Playbook
   module PbList
     class Item < Playbook::KitBase
+      prop :drag_handle, type: Playbook::Props::Boolean,
+                         default: true
+      prop :drag_id, type: Playbook::Props::String
       prop :tabindex
 
       def classname
         generate_classname("pb_item_kit")
       end
+
+      def draggable?
+        drag_id.present?
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_list/list.html.erb

@@ -1,13 +1,33 @@
-<%= content_tag(:div, class: object.list_classname) do %>
-  <%= content_tag(:"#{object.ordered_class}",
-                  aria: object.aria,
-                  class: object.classname,
-                  data: object.data,
-                  id: object.id,
-                  role: object.role,
-                  tabindex: object.tabindex,
-                  **combined_html_options
-    ) do %>
-      <%= content.presence %>
+<% if object.enable_drag %>
+  <%= pb_rails("draggable", props: {initial_items: object.items}) do %>
+    <%= pb_rails("draggable/draggable_container") do %>
+      <%= content_tag(:div, class: object.list_classname) do %>
+        <%= content_tag(:"#{object.ordered_class}",
+                        aria: object.aria,
+                        class: object.classname,
+                        data: object.data,
+                        id: object.id,
+                        role: object.role,
+                        tabindex: object.tabindex,
+                        **combined_html_options
+          ) do %>
+            <%= content.presence %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= content_tag(:div, class: object.list_classname) do %>
+    <%= content_tag(:"#{object.ordered_class}",
+                    aria: object.aria,
+                    class: object.classname,
+                    data: object.data,
+                    id: object.id,
+                    role: object.role,
+                    tabindex: object.tabindex,
+                    **combined_html_options
+      ) do %>
+        <%= content.presence %>
+    <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/list.rb

@@ -7,6 +7,10 @@ module Playbook
                         default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+      prop :enable_drag, type: Playbook::Props::Boolean,
+                         default: false
+      prop :items, type: Playbook::Props::Array,
+                   default: []
       prop :layout, type: Playbook::Props::Enum,
                     values: ["left", "right", ""],
                     default: ""

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -12,6 +12,7 @@ type LoadingInlineProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
+  dark?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text?: string,
@@ -23,6 +24,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     aria = {},
     className,
     data = {},
+    dark = false,
     htmlOptions = {},
     id,
     text = ' Loading',
@@ -45,7 +47,10 @@ const LoadingInline = (props: LoadingInlineProps) => {
         className={classes}
         id={id}
     >
-      <Body color="light">
+      <Body
+          color="light"
+          dark={dark}
+      >
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -35,6 +35,7 @@ type PhoneNumberInputProps = {
   preferredCountries?: string[],
   required?: boolean,
   value?: string,
+  formatAsYouType?: boolean,
 }
 
 enum ValidationError {
@@ -87,6 +88,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     required = false,
     preferredCountries = [],
     value = "",
+    formatAsYouType = false,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -99,8 +101,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   )
 
   const inputRef = useRef<HTMLInputElement>()
+  const itiRef = useRef<any>(null);
   const [inputValue, setInputValue] = useState(value)
-  const [itiInit, setItiInit] = useState<any>()
   const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
@@ -130,8 +132,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     }
   })
 
+  const unformatNumber = (formattedNumber: any) => {
+    return formattedNumber.replace(/\D/g, "")
+  }
+
   const showFormattedError = (reason = '') => {
-    const countryName = itiInit.getSelectedCountryData().name
+    const countryName = itiRef.current.getSelectedCountryData().name
     const reasonText = reason.length > 0 ? ` (${reason})` : ''
     setError(`Invalid ${countryName} phone number${reasonText}`)
     return true
@@ -189,12 +195,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   }
 
   const validateErrors = () => {
-    if (itiInit) isValid(itiInit.isValidNumber())
-    if (validateOnlyNumbers(itiInit)) return
-    if (validateTooLongNumber(itiInit)) return
-    if (validateTooShortNumber(itiInit)) return
-    if (validateUnhandledError(itiInit)) return
-    if (validateMissingAreaCode(itiInit)) return
+    if (itiRef.current) isValid(itiRef.current.isValidNumber())
+    if (validateOnlyNumbers(itiRef.current)) return
+    if (validateTooLongNumber(itiRef.current)) return
+    if (validateTooShortNumber(itiRef.current)) return
+    if (validateUnhandledError(itiRef.current)) return
+    if (validateMissingAreaCode(itiRef.current)) return
   }
 
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
@@ -203,10 +209,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(evt.target.value)
-    const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
+    let phoneNumberData
+    if (formatAsYouType) {
+      const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
+      phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
+    } else {
+      phoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
+    }
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
-    isValid(itiInit.isValidNumber())
+    isValid(itiRef.current.isValidNumber())
   }
 
   // Separating Concerns as React Docs Recommend
@@ -230,9 +242,11 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       onlyCountries,
       countrySearch: false,
       fixDropdownWidth: false,
-      formatAsYouType: false,
+      formatAsYouType: formatAsYouType,
     })
 
+    itiRef.current = telInputInit;
+
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
       const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
       setSelectedData(phoneNumberData)
@@ -243,7 +257,11 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
     inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
-    setItiInit(telInputInit)
+    if (formatAsYouType) {
+      inputRef.current?.addEventListener("input", (evt) => {
+        handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
+      });
+    }
   }, [])
 
   let textInputProps: {[key: string]: any} = {

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb

@@ -0,0 +1,15 @@
+<%= pb_rails("phone_number_input", props: {
+    id: "phone_number_input",
+    format_as_you_type: true
+}) %>
+
+<%= pb_rails("button", props: {id: "clickable", text: "Save Phone Number"}) %>
+
+<%= javascript_tag do %>
+    document.querySelector('#clickable').addEventListener('click', () => {
+        const formattedPhoneNumber = document.querySelector('#phone_number_input').value
+        const unformattedPhoneNumber = formattedPhoneNumber.replace(/\D/g, "")
+
+        alert(`Formatted: ${formattedPhoneNumber}. Unformatted: ${unformattedPhoneNumber}`)
+    })
+<% end %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { PhoneNumberInput, Body } from "playbook-ui";
+
+const PhoneNumberInputFormat = (props) => {
+    const [phoneNumber, setPhoneNumber] = useState("");
+
+    const handleOnChange = ({ number }) => {
+        setPhoneNumber(number);
+    };
+
+    return (
+        <>
+            <PhoneNumberInput
+                formatAsYouType
+                id="format"
+                onChange={handleOnChange}
+                {...props}
+            />
+            {phoneNumber && <Body>Unformatted number: {phoneNumber}</Body>}
+        </>
+    );
+};
+
+export default PhoneNumberInputFormat;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md

@@ -0,0 +1 @@
+NOTE: the `number` in the React `onChange` event will not include formatting (no spaces, dashes, and parentheses). For Rails, the `value` will include formatting and its value must be sanitized manually. 

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

@@ -8,10 +8,12 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
+  - phone_number_input_format: Format as You Type
 
   rails:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
-  - phone_number_input_validation: Form Validation
+  - phone_number_input_validation: Form Validation
+  - phone_number_input_format: Format as You Type

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

@@ -5,3 +5,4 @@ export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
+export { default as PhoneNumberInputFormat } from './_phone_number_input_format'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -21,6 +21,8 @@ module Playbook
                    default: ""
       prop :value, type: Playbook::Props::String,
                    default: ""
+      prop :format_as_you_type, type: Playbook::Props::Boolean,
+                                default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -32,6 +34,7 @@ module Playbook
           dark: dark,
           disabled: disabled,
           error: error,
+          formatAsYouType: format_as_you_type,
           initialCountry: initial_country,
           label: label,
           name: name,