playbook_ui 14.11.1.pre.alpha.pbntr703collapsiblerowsrails5536 → 14.11.1.pre.alpha.play1724darkmodeauditmap5409

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6a968d08aaa4af48a9fac9eb0fc5191c8d738b7fd5a6514064cc864a25a1e283
-  data.tar.gz: af0da5b80ce2adb3d94a96caf5d5ed489d35a01f5b15e00a50eb6691ab9f95ff
+  metadata.gz: e83117499bb2e6cbb6cea842eca16b0ccb5e6275695a2d26de0f256d23c04071
+  data.tar.gz: 9b69eec065deee4a74d8b98ae4042152ee5662ce230cdcd8d73772a77cb48c5c
 SHA512:
-  metadata.gz: 42767c7d834ab7d1da43a081d310276dd141f23a53a9ad1a6cb48c52f57f713e802d2e490e6956ecfe6f835b10fe3bf54d953d406fd1054c05e40d55fec12b24
-  data.tar.gz: c37bd39bfbbfcafa7905258522be6c18c9d96734530a99ae7467c6a2bc427f1cca041b3efdfee89352fc99cc0d51b9fe8e6d7b96da65ec5872bbe3f3feab3bbc
+  metadata.gz: ae9fb865c35f071e2a77222453f19650f0c7de2ddae2cdd3560d1404a17ea90bbbea8c57223d17ee5e87b86561ecf65b5041546433a9d105f10ce615ae110f4f
+  data.tar.gz: a9c422d27b2373459e97a812436a86c7c91b499afc91429ca445606187e4dd2a658573936a119178b5ca41c9d462f062ea97ab16aa8bbad3bdb212fdad303447

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 direction 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 directino is `desc: true`.

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

@@ -1,5 +1,6 @@
-<%= pb_content_tag(object.tag,
-                object.tag == "button" ? object.options : object.link_options) do %>
+<%= content_tag(object.tag,
+                object.tag == "button" ? object.options : object.link_options,
+                **combined_html_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,4 +1,9 @@
-<%= pb_content_tag(:label) do %>
+<%= content_tag(:label, aria: object.aria,
+                        id: object.id,
+                        data: object.data,
+                        class: object.classname,
+                        **combined_html_options
+                ) 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,5 +1,3 @@
-<%= pb_content_tag(
-  object.tag
-) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

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

@@ -3,9 +3,6 @@
 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,5 +1,9 @@
-<%= pb_content_tag(:div,
-    class: object.classname + object.error_class) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname + object.error_class,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) 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,8 +6,14 @@
 
 ] %>
 
-<%= 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 %>
+<%= 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 %>
   <% end %>
 <% end %>

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

@@ -11,7 +11,6 @@ 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 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 more cleaner look.

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

@@ -1,14 +1,19 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) 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,15 +1,20 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) 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,10 +1,15 @@
-<%= pb_content_tag(:div, id: object.option[:id]) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.option[:id],
+    **combined_html_options) 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 %>
@@ -13,4 +18,4 @@
                 <% end %>
             </div>
     <% end %>
-<% end %>
+<% end %>

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

@@ -1,16 +1,21 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) 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 %>
@@ -18,7 +23,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"}) %>
@@ -35,3 +40,4 @@
     <% end %>
     <% end %>
 <% end %>
+      

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

@@ -1,32 +1,10 @@
-<% 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_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,18 +3,11 @@
 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,33 +1,13 @@
-<% 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 %>
+<%= 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 %>

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

@@ -7,10 +7,6 @@ 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,7 +12,6 @@ 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,
@@ -24,7 +23,6 @@ const LoadingInline = (props: LoadingInlineProps) => {
     aria = {},
     className,
     data = {},
-    dark = false,
     htmlOptions = {},
     id,
     text = ' Loading',
@@ -47,10 +45,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
         className={classes}
         id={id}
     >
-      <Body
-          color="light"
-          dark={dark}
-      >
+      <Body color="light">
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth

data/app/pb_kits/playbook/pb_map/_map.scss

@@ -3,6 +3,7 @@
 @import "../tokens/shadows";
 @import "../tokens/border_radius";
 @import "./_pb_map_button_mixin.scss";
+@import "../tokens/titles";
 
 [class*="pb_map"] {
   .pb_map-custom-button {
@@ -159,6 +160,7 @@
   }
 
   .maplibregl-popup-content {
+    @include pb_title_4;
     padding: $space_sm;
     background-color: $card_light;
     box-shadow: $shadow_deeper;
@@ -194,6 +196,7 @@
     }
 
     .maplibregl-popup-content {
+      @include pb_title_4;
       background-color: $bg_dark;
       color: $text_dk_default;
     }

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -25,12 +25,12 @@ const MapDefault = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML('Hello World!')) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll
         map.scrollZoom.disable();
-        
+
         //add attributioncontrols
         map.addControl(new maplibregl.AttributionControl({
           compact: true
@@ -49,7 +49,7 @@ const MapDefault = (props) => {
 
     }, [])
 
-return ( 
+return (
   <Map flyTo
       flyToClick={()=> {handleFlyTo(mapInstance)}}
       zoomBtns
@@ -63,7 +63,7 @@ return (
               position: 'absolute',
               left: 0,
               right: 0,
-              top: 0, 
+              top: 0,
               bottom: 0,
            }}
        />

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -25,12 +25,12 @@ const MapWithCustomButton = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML('Hello World!')) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll
         map.scrollZoom.disable();
-        
+
         //add attributioncontrols
         map.addControl(new maplibregl.AttributionControl({
           compact: true
@@ -49,8 +49,8 @@ const MapWithCustomButton = (props) => {
 
     }, [])
 
-return ( 
-  <Map 
+return (
+  <Map
       {...props}
   >
     <Map.Controls flyTo
@@ -59,10 +59,10 @@ return (
         zoomInClick={() => {handleZoomIn(mapInstance)}}
         zoomOutClick={()=> {handleZoomOut(mapInstance)}}
     >
-      <MapCustomButton icon="home" 
+      <MapCustomButton icon="home"
           onClick={() => alert("button clicked!")}
       />
-      <MapCustomButton icon="search" 
+      <MapCustomButton icon="search"
           onClick={() => alert("button clicked!")}
       />
     </Map.Controls>
@@ -72,7 +72,7 @@ return (
               position: 'absolute',
               left: 0,
               right: 0,
-              top: 0, 
+              top: 0,
               bottom: 0,
            }}
        />

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -25,7 +25,7 @@ const MapWithPlugin = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML('Hello World!')) // add popup
         .addTo(map);
 
         //add maplibre default zoom controls
@@ -48,7 +48,7 @@ const MapWithPlugin = (props) => {
         map.addControl(new maplibregl.AttributionControl({
             compact: true
         }));
-          
+
         //set map instance
         setMapInstance(map)
     }
@@ -62,8 +62,8 @@ const MapWithPlugin = (props) => {
     }, [])
 
 
-    
-return ( 
+
+return (
   <Map flyTo
       flyToClick={()=> {handleFlyTo(mapInstance)}}
       zoomBtns
@@ -77,7 +77,7 @@ return (
               position: 'absolute',
               left: 0,
               right: 0,
-              top: 0, 
+              top: 0,
               bottom: 0,
            }}
        />

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

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

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

@@ -8,12 +8,10 @@ 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_format: Format as You Type
+  - phone_number_input_validation: Form Validation