playbook_ui 16.7.0.pre.rc.0 → 16.7.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1df511d9cea220056ca66936b64ebebb36c51334bcfaa7fc8f3a77d97625b05d
-  data.tar.gz: a34dd71d6896b5cd3d2c2c46dcece4c046072b584d7879b6ee8ddc48378eaf1d
+  metadata.gz: 84a662254cd2533c99982e9c3d92cf898c52aa151e267258ea4a8e5007856b44
+  data.tar.gz: ff974535354bd21c7aef9810593b5898968080539f9d7fc673acacffcb96aad0
 SHA512:
-  metadata.gz: f8cd336c91eb7498940880a19bafc7d49b16c36e4a777e547dc26dcb59e9d6b9bf527ef1763563a313fe7f4b2801b447d7f2b0b540baf830a6fa62589d34d034
-  data.tar.gz: 4f9dcad612095338451775807e0dda91a34f834f5d7153dfa08d016b56cbe53fbd24114f39a18eb19b449cc49530f053d252e75b774f5ab2cf417664a424e125
+  metadata.gz: 5bba8f8aa8b742c61dcfdf739552e920fea3c73afb647c904891737a38240c13a598c8a6a3036f73d1d85db56555b3db56bc2b418dbd0cdce2ec5067fb27d25a
+  data.tar.gz: 2716f834102e665c6975a1a80db09c6ae84a1b558a74027903f5ce7602f1e5ab2d0f1e6fb481c37199fe6cf6804cb9b79d01de8cd867c8742e071c04bfddb690

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.jsx

@@ -9,7 +9,21 @@ import ListItem from "../../pb_list/_list_item"
 import PbReactPopover from "../../pb_popover/_popover"
 import SectionSeparator from "../../pb_section_separator/_section_separator"
 import StarRating from "../../pb_star_rating/_star_rating"
-import COMPOSITION_MOCK_DATA from "./advanced_table_grouped_headers_composition_mock_data.json"
+
+const COMPOSITION_MOCK_DATA = [
+  { id: "1", year: "2015", newEnrollments: "12", scheduledMeetings: "40", attendanceRate: "62%", classCompletionRate: "28%" },
+  { id: "2", year: "2016", newEnrollments: "88", scheduledMeetings: "12", attendanceRate: "71%", classCompletionRate: "55%" },
+  { id: "3", year: "2017", newEnrollments: "34", scheduledMeetings: "67", attendanceRate: "58%", classCompletionRate: "41%" },
+  { id: "4", year: "2018", newEnrollments: "05", scheduledMeetings: "91", attendanceRate: "44%", classCompletionRate: "73%" },
+  { id: "5", year: "2019", newEnrollments: "61", scheduledMeetings: "19", attendanceRate: "83%", classCompletionRate: "36%" },
+  { id: "6", year: "2020", newEnrollments: "19", scheduledMeetings: "54", attendanceRate: "67%", classCompletionRate: "62%" },
+  { id: "7", year: "2021", newEnrollments: "73", scheduledMeetings: "08", attendanceRate: "52%", classCompletionRate: "49%" },
+  { id: "8", year: "2022", newEnrollments: "50", scheduledMeetings: "50", attendanceRate: "75%", classCompletionRate: "45%" },
+  { id: "9", year: "2023", newEnrollments: "95", scheduledMeetings: "03", attendanceRate: "69%", classCompletionRate: "81%" },
+  { id: "10", year: "2024", newEnrollments: "27", scheduledMeetings: "76", attendanceRate: "91%", classCompletionRate: "22%" },
+  { id: "11", year: "2025", newEnrollments: "41", scheduledMeetings: "33", attendanceRate: "48%", classCompletionRate: "94%" },
+  { id: "12", year: "2026", newEnrollments: "66", scheduledMeetings: "66", attendanceRate: "55%", classCompletionRate: "58%" },
+]
 
 const LEAF_COUNT = "newEnrollments"
 const LEAF_SCHEDULED = "scheduledMeetings"

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
+import INFINITE_SCROLL_MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
 
 const AdvancedTableInfiniteScroll = (props) => {
   const columnDefinitions = [
@@ -39,7 +39,7 @@ const AdvancedTableInfiniteScroll = (props) => {
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
+          tableData={INFINITE_SCROLL_MOCK_DATA}
           virtualizedRows
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx

@@ -1,8 +1,8 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import Caption from '../../pb_caption/_caption'
-import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
-import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
+import MOCK_DATA_INLINE_LOADING from "./advanced_table_mock_data_inline_loading.json"
+import MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN from "./advanced_table_mock_data_inline_loading_empty_children.json"
 
 const AdvancedTableInlineRowLoading = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import AdvancedTable from '../_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
 
 const AdvancedTableRowPinning = (props) => {
   const columnDefinitions = [
@@ -43,7 +43,7 @@ const AdvancedTableRowPinning = (props) => {
           columnDefinitions={columnDefinitions}
           maxHeight="xs"
           pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
-          tableData={MOCK_DATA}
+          tableData={MOCK_DATA_WITH_ID}
           tableProps={{sticky: true}}
           {...props}
       >

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_inline_loading_empty_children.json

@@ -0,0 +1,41 @@
+[
+  {
+    "year": "2021",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "20",
+    "scheduledMeetings": "10",
+    "attendanceRate": "51%",
+    "completedClasses": "3",
+    "classCompletionRate": "33%",
+    "graduatedStudents": "19",
+    "children": []
+  },
+  {
+    "year": "2022",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "25",
+    "scheduledMeetings": "17",
+    "attendanceRate": "75%",
+    "completedClasses": "5",
+    "classCompletionRate": "45%",
+    "graduatedStudents": "32",
+    "children": []
+  },
+  {
+    "year": "2023",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "10",
+    "scheduledMeetings": "15",
+    "attendanceRate": "65%",
+    "completedClasses": "4",
+    "classCompletionRate": "49%",
+    "graduatedStudents": "29",
+    "children": []
+  }
+]

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -4,7 +4,7 @@ import Icon from "../../pb_icon/_icon"
 import Title from "../../pb_title/_title"
 import BreadCrumbItem from '../_bread_crumb_item'
 
-const Link = (props) => <BreadCrumbItem {...props} />
+const LinkSection = (props) => <BreadCrumbItem {...props} />
 const BreadCrumbsDefault = (props) => {
   return (
     <BreadCrumbs
@@ -35,7 +35,7 @@ const BreadCrumbsDefault = (props) => {
           size="1x"
           {...props}
       />
-      <Link
+      <LinkSection
           {...props}
           href="/users"
       >
@@ -46,20 +46,20 @@ const BreadCrumbsDefault = (props) => {
             text="Users"
             {...props}
         />
-      </Link>
+      </LinkSection>
       <Icon
           icon="user"
           size="1x"
           {...props}
       />
-      <Link {...props}>
+      <LinkSection {...props}>
         <Title
             size="4"
             tag="span"
             text="User"
             {...props}
         />
-      </Link>
+      </LinkSection>
     </BreadCrumbs>
   )
 }

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -124,8 +124,7 @@ $pb_button_icon_only_dimensions: (
   // Rails: .pb_button_icon_only; React: class or :has(...) when label is empty.
   // Rails uses a truly empty .pb_button_content; React wraps text in a child span (may be empty).
   &.pb_button_icon_only,
-  &:has(.pb_button_content:empty),
-  &:has(.pb_button_content > span:empty) {
+  &:has(.pb_button_content:empty) {
     aspect-ratio: 1;
     box-sizing: border-box;
     $pb_button_icon_only_default: map-get($pb_button_icon_only_dimensions, "md");

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

@@ -16,7 +16,12 @@ export default class PbDialog extends PbEnhancedElement {
     this.domContentLoadedHandler = () => this.setupDialog()
     this.turboFrameLoadHandler = () => this.setupDialog()
     
-    window.addEventListener("DOMContentLoaded", this.domContentLoadedHandler)
+    // If DOM is already loaded, setup immediately; otherwise wait for DOMContentLoaded
+    if (document.readyState === "loading") {
+      window.addEventListener("DOMContentLoaded", this.domContentLoadedHandler)
+    } else {
+      this.setupDialog()
+    }
     window.addEventListener("turbo:frame-load", this.turboFrameLoadHandler)
 
     // Code for custom_event_type setup (can take multiple events in a string separated by commas)

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

@@ -22,7 +22,12 @@ export default class PbDraggable extends PbEnhancedElement {
     this.dragZoneType  = "";
     this.dragZoneColor = "";
 
-    document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
+    // If DOM is already loaded, bind immediately; otherwise wait for DOMContentLoaded
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
+    } else {
+      this.bindEventListeners();
+    }
   }
 
   setState(newState) {

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx

@@ -4,7 +4,28 @@ import Pagination from '../../pb_pagination/_pagination'
 import Select from '../../pb_select/_select'
 import Table from '../../pb_table/_table'
 
-import { data } from "./data";
+const data = [
+    ["Value 1", "Value 2", "Value 3", "Value 4", "Value 5"],
+    ["Value 6", "Value 7", "Value 8", "Value 9", "Value 10"],
+    ["Value 11", "Value 12", "Value 13", "Value 14", "Value 15"],
+    ["Value 16", "Value 17", "Value 18", "Value 19", "Value 20"],
+    ["Value 21", "Value 22", "Value 23", "Value 24", "Value 25"],
+    ["Value 26", "Value 27", "Value 28", "Value 29", "Value 30"],
+    ["Value 31", "Value 32", "Value 33", "Value 34", "Value 35"],
+    ["Value 36", "Value 37", "Value 38", "Value 39", "Value 40"],
+    ["Value 41", "Value 42", "Value 43", "Value 44", "Value 45"],
+    ["Value 46", "Value 47", "Value 48", "Value 49", "Value 50"],
+    ["Value 51", "Value 52", "Value 53", "Value 54", "Value 55"],
+    ["Value 56", "Value 57", "Value 58", "Value 59", "Value 60"],
+    ["Value 61", "Value 62", "Value 63", "Value 64", "Value 65"],
+    ["Value 66", "Value 67", "Value 68", "Value 69", "Value 70"],
+    ["Value 71", "Value 72", "Value 73", "Value 74", "Value 75"],
+    ["Value 76", "Value 77", "Value 78", "Value 79", "Value 80"],
+    ["Value 81", "Value 82", "Value 83", "Value 84", "Value 85"],
+    ["Value 86", "Value 87", "Value 88", "Value 89", "Value 90"],
+    ["Value 91", "Value 92", "Value 93", "Value 94", "Value 95"],
+    ["Value 96", "Value 97", "Value 98", "Value 99", "Value 100"],
+  ];
 
 const PaginationExternalControl = (props) => {
   const [totalItems, setTotalItems] = useState(20);

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx

@@ -2,8 +2,28 @@ import React, { useState } from "react";
 import Table from '../../pb_table/_table'
 import Pagination from '../../pb_pagination/_pagination'
 
-
-import { data } from "./data";
+const data = [
+  ["Value 1", "Value 2", "Value 3", "Value 4", "Value 5"],
+  ["Value 6", "Value 7", "Value 8", "Value 9", "Value 10"],
+  ["Value 11", "Value 12", "Value 13", "Value 14", "Value 15"],
+  ["Value 16", "Value 17", "Value 18", "Value 19", "Value 20"],
+  ["Value 21", "Value 22", "Value 23", "Value 24", "Value 25"],
+  ["Value 26", "Value 27", "Value 28", "Value 29", "Value 30"],
+  ["Value 31", "Value 32", "Value 33", "Value 34", "Value 35"],
+  ["Value 36", "Value 37", "Value 38", "Value 39", "Value 40"],
+  ["Value 41", "Value 42", "Value 43", "Value 44", "Value 45"],
+  ["Value 46", "Value 47", "Value 48", "Value 49", "Value 50"],
+  ["Value 51", "Value 52", "Value 53", "Value 54", "Value 55"],
+  ["Value 56", "Value 57", "Value 58", "Value 59", "Value 60"],
+  ["Value 61", "Value 62", "Value 63", "Value 64", "Value 65"],
+  ["Value 66", "Value 67", "Value 68", "Value 69", "Value 70"],
+  ["Value 71", "Value 72", "Value 73", "Value 74", "Value 75"],
+  ["Value 76", "Value 77", "Value 78", "Value 79", "Value 80"],
+  ["Value 81", "Value 82", "Value 83", "Value 84", "Value 85"],
+  ["Value 86", "Value 87", "Value 88", "Value 89", "Value 90"],
+  ["Value 91", "Value 92", "Value 93", "Value 94", "Value 95"],
+  ["Value 96", "Value 97", "Value 98", "Value 99", "Value 100"],
+];
 
 const PaginationPageChange = (props) => {
 

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

@@ -41,6 +41,7 @@ type PhoneNumberInputProps = {
   formatAsYouType?: boolean,
   strictMode?: boolean,
   countrySearch?: boolean,
+  showPlaceholder?: boolean,
 }
 
 enum ValidationError {
@@ -98,8 +99,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     formatAsYouType = false,
     strictMode = false,
     countrySearch = false,
+    showPlaceholder = false,
   } = props
 
+  const showPlaceholderRef = useRef(showPlaceholder)
+  showPlaceholderRef.current = showPlaceholder
+
+  const placeholderTemplateRef = useRef<string | null>(null)
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -186,6 +193,37 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     return formattedNumber.replace(/\D/g, "")
   }
 
+  const readInputPlaceholder = (element: HTMLInputElement) => {
+    return element.getAttribute("placeholder") || element.placeholder || ""
+  }
+
+  const cachePlaceholderTemplate = (element: HTMLInputElement) => {
+    const placeholder = readInputPlaceholder(element)
+    if (placeholder) {
+      placeholderTemplateRef.current = placeholder
+    }
+  }
+
+  const hidePlaceholderIfFocusedAndEmpty = (element: HTMLInputElement) => {
+    if (document.activeElement === element && !element.value) {
+      element.setAttribute("placeholder", "")
+      return true
+    }
+    return false
+  }
+
+  const hidePlaceholderIfEmpty = (element: HTMLInputElement) => {
+    if (!element.value) {
+      element.setAttribute("placeholder", "")
+    }
+  }
+
+  const restorePlaceholderIfEmpty = (element: HTMLInputElement) => {
+    if (!element.value && placeholderTemplateRef.current) {
+      element.setAttribute("placeholder", placeholderTemplateRef.current)
+    }
+  }
+
   const showFormattedError = (reason = '') => {
     const countryName = itiRef.current.getSelectedCountryData().name
     const reasonText = reason.length > 0 ? ` (${reason})` : ''
@@ -476,6 +514,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       countryOrder: preferredCountries,
       allowDropdown: !disabled,
       autoInsertDialCode: false,
+      autoPlaceholder: showPlaceholderRef.current ? "polite" : "off",
       initialCountry: initialCountry || fallbackCountry,
       onlyCountries,
       excludeCountries,
@@ -497,6 +536,22 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         setSelectedData(phoneNumberData)
         onChange(phoneNumberData)
         validateErrors()
+
+        if (showPlaceholderRef.current) {
+          const syncPlaceholderState = () => {
+            const el = inputRef.current
+            if (!el) return
+
+            cachePlaceholderTemplate(el)
+            if (hidePlaceholderIfFocusedAndEmpty(el)) return
+            restorePlaceholderIfEmpty(el)
+          }
+
+          // Run immediately, then once on the next tick in case intl-tel-input
+          // updates the placeholder asynchronously after countrychange.
+          syncPlaceholderState()
+          setTimeout(syncPlaceholderState, 0)
+        }
       })
 
       inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
@@ -538,7 +593,20 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     id,
     label,
     name,
+    onFocus: () => {
+      if (!showPlaceholder) return
+      const el = inputRef.current
+      if (!el || el.value) return
+      cachePlaceholderTemplate(el)
+      hidePlaceholderIfEmpty(el)
+    },
     onBlur: () => {
+      if (showPlaceholder) {
+        const el = inputRef.current
+        if (el && !el.value) {
+          restorePlaceholderIfEmpty(el)
+        }
+      }
       hasBlurredRef.current = true
       setHasBlurred(true)
       validateErrors()

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

@@ -0,0 +1,5 @@
+<%= pb_rails("phone_number_input", props: {
+  id: "phone_number_input_show_placeholder",
+  label: "Phone Number",
+  show_placeholder: true,
+}) %>

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+
+const PhoneNumberInputShowPlaceholder = (props) => (
+    <>
+        <PhoneNumberInput
+            id='phone_number_input_show_placeholder'
+            label='Phone Number'
+            showPlaceholder
+            {...props} />
+    </>
+)
+
+export default PhoneNumberInputShowPlaceholder

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

@@ -0,0 +1,3 @@
+The `showPlaceholder`/`show_placeholder` prop enables the country-specific example placeholder in the phone input.
+
+By default, the Phone Number Input does not show a placeholder. When enabled, the placeholder appears while the field is empty and unfocused, hides on focus, and returns on blur if no value is entered.

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

@@ -2,6 +2,7 @@ examples:
 
   react:
   - phone_number_input_default: Default
+  - phone_number_input_show_placeholder: Show Placeholder
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Only Countries
@@ -16,6 +17,7 @@ examples:
 
   rails:
   - phone_number_input_default: Default
+  - phone_number_input_show_placeholder: Show Placeholder
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Only Countries

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

@@ -10,3 +10,4 @@ export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
 export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
 export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
 export { default as PhoneNumberInputRequiredIndicator } from './_phone_number_input_required_indicator.jsx'
+export { default as PhoneNumberInputShowPlaceholder } from './_phone_number_input_show_placeholder'

data/app/pb_kits/playbook/pb_phone_number_input/kit.schema.json

@@ -147,6 +147,14 @@
         "rails"
       ],
       "default": false
+    },
+    "showPlaceholder": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
     }
   },
   "globalProps": true,

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

@@ -35,6 +35,8 @@ module Playbook
                            default: false
       prop :country_search, type: Playbook::Props::Boolean,
                             default: false
+      prop :show_placeholder, type: Playbook::Props::Boolean,
+                              default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -59,6 +61,7 @@ module Playbook
           requiredIndicator: required_indicator,
           value: value,
           countrySearch: country_search,
+          showPlaceholder: show_placeholder,
         }
       end
     end

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, act, within } from "../utilities/test-utils";
+import { render, screen, act, within, waitFor, fireEvent } from "../utilities/test-utils";
 import PhoneNumberInput from "./_phone_number_input";
 
 const testId = "phoneNumberInput";
@@ -188,4 +188,81 @@ test("does not render required indicator asterisk when requiredIndicator is fals
     const label = within(kit).getByText(/Phone Number/);
     expect(label).toBeInTheDocument();
     expect(kit).not.toHaveTextContent("*");
-});  
+});
+
+test("has no intl-tel example placeholder by default (showPlaceholder false)", async () => {
+    const props = {
+        id: testId,
+        initialCountry: "us",
+    };
+    render(<PhoneNumberInput {...props} />);
+    const input = screen.getByRole("textbox");
+    await waitFor(() => {
+        expect(input.closest(".iti")).toBeTruthy();
+    });
+    expect(!input.getAttribute("placeholder") || input.getAttribute("placeholder") === "").toBe(true);
+});
+
+test("optionally shows example placeholder when showPlaceholder is true; hides on focus and returns on blur if empty", async () => {
+    const props = {
+        id: testId,
+        initialCountry: "us",
+        showPlaceholder: true,
+    };
+    render(<PhoneNumberInput {...props} />);
+    const input = screen.getByRole("textbox");
+
+    await waitFor(() => {
+        expect(input.closest(".iti")).toBeTruthy();
+    });
+    await waitFor(() => {
+        expect((input.getAttribute("placeholder") || "").length).toBeGreaterThan(0);
+    });
+
+    const whenIdle = input.getAttribute("placeholder");
+
+    act(() => {
+        fireEvent.focus(input);
+    });
+    expect(input.getAttribute("placeholder") || "").toBe("");
+
+    act(() => {
+        fireEvent.blur(input);
+    });
+    expect(input.getAttribute("placeholder")).toBe(whenIdle);
+});
+
+test("restores latest placeholder on blur after country change", async () => {
+    const props = {
+        id: testId,
+        initialCountry: "us",
+        showPlaceholder: true,
+    };
+
+    render(<PhoneNumberInput {...props} />);
+    const input = screen.getByRole("textbox");
+
+    await waitFor(() => {
+        expect(input.closest(".iti")).toBeTruthy();
+    });
+
+    // Simulate focus behavior
+    act(() => {
+        fireEvent.focus(input);
+    });
+    expect(input.getAttribute("placeholder") || "").toBe("");
+
+    // Simulate library updating placeholder due to country change while focused.
+    input.setAttribute("placeholder", "+93 123 456 7890");
+    act(() => {
+        input.dispatchEvent(new Event("countrychange", { bubbles: true }));
+    });
+
+    // Blur should restore the latest country placeholder.
+    act(() => {
+        fireEvent.blur(input);
+    });
+    await waitFor(() => {
+        expect(input.getAttribute("placeholder")).toBe("+93 123 456 7890");
+    });
+});

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx

@@ -5,7 +5,82 @@ import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'
 
 import Select from '../../pb_select/_select'
-import { changelog, release } from './templates.js'
+
+const release = `
+  <div>
+    <div>
+      <strong>Story Background</strong>
+    </div>
+    <div>
+      Follow the{" "}
+      <a href='https://github.com/powerhome/playbook/wiki/Release-Team-Guide'>
+        release process
+      </a>{" "}
+      to create a new version, create a gem, and package. Create a Ninja testing
+      plan, then update Nitro with the new version.
+    </div>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Timeline / Due Date</strong>
+    </div>
+    <div>
+      <em>Release End of business Thursday</em>
+    </div>
+    <div>
+      <em>Testing on Nitro End of business Friday</em>
+    </div>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Definition of done</strong>
+    </div>
+    <ol>
+      <li>Merge all PR’s</li>
+      <li>Update the final CHANGELOG</li>
+      <li>Version up and generate NPM, and RubyGem</li>
+      <li>Create next version branch and milestone</li>
+      <li>Update default branch and branch protection rules&nbsp;</li>
+      <li>Notify Everyone of new version</li>
+      <li>
+        Generate testing plan and pages to test for Ninjas (update runway
+        ticket)
+      </li>
+      <li>Update version on Nitro and get on Demo</li>
+      <li>Send Ninjas demo and runway ticket for testing</li>
+      <li>Ninja Approved + PR Approved</li>
+    </ol>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Stakeholders / Sign-off</strong>
+    </div>
+    <ul>
+      <li>Code Owners</li>
+    </ul>
+    <div>
+      <br />
+      <strong>Cadence</strong>
+      <br />
+      Jason, Jon, Stephen, Jasper, Brendan, Cole
+    </div>
+  </div>
+`
+
+const changelog = `
+  <div>
+    <strong>Changelog:<br></strong>
+    [INSERT LINK]<br><br>
+    You can test the normal spots of Playbook rails and react on
+    dev docs plus the following:
+  </div>
+  <div>
+    <br>
+  </div>
+`
 
 const RichTextEditorAdvancedTemplates = (props) => {
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx

@@ -17,7 +17,7 @@ const languages = [
   { label: 'PHP', value: '1995', category: 'Web Development' },
 ]
 
-const colors = [
+const colorOptions = [
   { label: 'Orange', value: '#FFA500' },
   { label: 'Red', value: '#FF0000' },
   { label: 'Green', value: '#00FF00' },
@@ -51,7 +51,7 @@ const TypeaheadReactHook = (props) => {
       <Typeahead
           label="Colors"
           marginTop="lg"
-          options={colors}
+          options={colorOptions}
           {...props}
           {...register('color')}
       />