playbook_ui 14.18.1.pre.rc.0 → 14.19.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 676d756bcd1eb62b676282c0e74441ffade83e9b25d10e796a50bdbe822d84aa
-  data.tar.gz: 389e14aff56bbe684b8ecda79b54db9e4903142ebf20ab6a9227a36b6b12879d
+  metadata.gz: 4ae9d27af86020c669d4402b35b61ee356de6cb7a61fdbb177eac964f2765822
+  data.tar.gz: f8e3d579c5e3b29639a3b56a09c3e8e20f48a9089ab4c6a1d6cb3302ecf0119b
 SHA512:
-  metadata.gz: cf48871b90e1b69e6b52380b9af3228843758e70d1889744044bfccb80e12f2dfeb590b552489a838c13d8b04157c6ed20b84fcd50d648472fad7197c12e4b45
-  data.tar.gz: 591f7a30be8318184e0b1fe2679b04758666464a1fc3e705172530389bb6c81327b7f60083ea1607225f280b477545d3ec274f82d8eb5e978158deba63903668
+  metadata.gz: 4b142aba7e0202847db31c8e74164ba49ff77382f5ea97e173af29a3c115627b092b2872d9e82898b32432dbec1fb8b5c82dcc523ded9bea8f93f37b0ffb95fb
+  data.tar.gz: 94c8ff54d18937587afe9fa0ef51e0805686f133e2b230ca0628078cd4b26a19ca4564cb7359a37ada021c884990f16c0bf2940a07d8876386252e2cdb80829a

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

@@ -17,6 +17,5 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_drop_zones: Draggable Drop Zones
-  - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_event_listeners: Draggable Event Listeners
+

data/app/pb_kits/playbook/pb_draggable/draggable.rb

@@ -5,17 +5,9 @@ module Playbook
     class Draggable < ::Playbook::KitBase
       prop :initial_items, type: Playbook::Props::Array,
                            default: []
-      prop :drop_zone_type, type: Playbook::Props::Enum,
-                            values: %w[ghost shadow outline line],
-                            default: "ghost"
-      prop :drop_zone_color, type: Playbook::Props::Enum,
-                             values: %w[neutral primary purple],
-                             default: "neutral"
 
       def data
-        Hash(prop(:data)).merge(pb_draggable: true,
-                                drop_zone_type: drop_zone_type,
-                                drop_zone_color: drop_zone_color)
+        Hash(prop(:data)).merge(pb_draggable: true)
       end
 
       def classname

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

@@ -1,26 +1,24 @@
 import PbEnhancedElement from "../pb_enhanced_element";
 
-const DRAGGABLE_SELECTOR  = "[data-pb-draggable]";
+const DRAGGABLE_SELECTOR = "[data-pb-draggable]";
 const DRAGGABLE_CONTAINER = ".pb_draggable_container";
-const NEEDS_CLONE         = ["shadow", "outline"];   // clone only for these types
 
 export default class PbDraggable extends PbEnhancedElement {
-  static get selector() { return DRAGGABLE_SELECTOR; }
+  static get selector() {
+    return DRAGGABLE_SELECTOR;
+  }
 
   connect() {
     this.state = {
-      items:        [],
-      dragData:     { id: "", initialGroup: "" },
-      isDragging:   "",
-      activeContainer: "",
+      items: [],
+      dragData: { id: "", initialGroup: "" },
+      isDragging: "",
+      activeContainer: ""
     };
 
-    this.draggedItem   = null;
+    this.draggedItem = null;
     this.draggedItemId = null;
-    this.dragGhost     = null;
     this.hasMultipleContainers = false;
-    this.dragZoneType  = "";
-    this.dragZoneColor = "";
 
     document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
   }
@@ -28,12 +26,13 @@ export default class PbDraggable extends PbEnhancedElement {
   setState(newState) {
     this.state = { ...this.state, ...newState };
     if (newState.items) {
-      this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
+      const customEvent = new CustomEvent('pb-draggable-reorder', {
         detail: {
           reorderedItems: this.state.items,
-          containerId:    this.element.querySelector(DRAGGABLE_CONTAINER).id,
-        },
-      }));
+          containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id
+        }
+      });
+      this.element.dispatchEvent(customEvent);
     }
   }
 
@@ -44,100 +43,71 @@ export default class PbDraggable extends PbEnhancedElement {
 
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
-    this.element.querySelectorAll(".pb_draggable_item img")
-      .forEach(img => img.setAttribute("draggable", "false"));
-
-    this.element.querySelectorAll(".pb_draggable_item")
-      .forEach(item => {
-        item.addEventListener("dragstart", this.handleDragStart.bind(this));
-        item.addEventListener("dragend",   this.handleDragEnd.bind(this));
-        item.addEventListener("dragenter", this.handleDragEnter.bind(this));
-      });
+    this.element.querySelectorAll(".pb_draggable_item img").forEach(img => {
+      img.setAttribute("draggable", "false");
+    });
 
-    containers.forEach(c => {
-      c.addEventListener("dragover", this.handleDragOver.bind(this));
-      c.addEventListener("drop",     this.handleDrop.bind(this));
+    this.element.querySelectorAll(".pb_draggable_item").forEach(item => {
+      item.addEventListener("dragstart", this.handleDragStart.bind(this));
+      item.addEventListener("dragend", this.handleDragEnd.bind(this));
+      item.addEventListener("dragenter", this.handleDragEnter.bind(this));
+    });
+
+    containers.forEach(container => {
+      container.addEventListener("dragover", this.handleDragOver.bind(this));
+      container.addEventListener("drop", this.handleDrop.bind(this));
     });
   }
 
-  /* ---------------- DRAG START ---------------- */
   handleDragStart(event) {
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
-    if (event.target.tagName.toLowerCase() === "img") {
+    if (event.target.tagName.toLowerCase() === 'img') {
       event.preventDefault();
       return;
     }
 
-    const container    = event.target.closest(DRAGGABLE_CONTAINER);
-    this.draggedItem   = event.target;
+    const container = event.target.closest(DRAGGABLE_CONTAINER);
+    this.draggedItem = event.target;
     this.draggedItemId = event.target.id;
-    this.dragZoneType  = this.element.dataset.dropZoneType  || "";
-    this.dragZoneColor = this.element.dataset.dropZoneColor || "";
 
     this.setState({
-      dragData:   { id: this.draggedItemId, initialGroup: container.id },
-      isDragging: this.draggedItemId,
+      dragData: { id: this.draggedItemId, initialGroup: container.id },
+      isDragging: this.draggedItemId
     });
 
-    this.draggedItem.classList.add(
-      "is_dragging",
-      `drop_zone_${this.dragZoneType}`,
-      `drop_zone_color_${this.dragZoneColor}`,
-    );
-
+    event.target.classList.add("is_dragging");
     if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = "move";
-      event.dataTransfer.setData("text/plain", this.draggedItemId);
-
-      /* ---------- custom ghost clone (shadow + outline only) ---------- */
-      if (NEEDS_CLONE.includes(this.dragZoneType)) {
-        const ghost = this.draggedItem.cloneNode(true);
-        ghost.classList.remove(
-          "is_dragging",
-          `drop_zone_${this.dragZoneType}`,
-          `drop_zone_color_${this.dragZoneColor}`,
-        );
-        const { width, height } = this.draggedItem.getBoundingClientRect();
-        Object.assign(ghost.style, {
-          border:    "none",
-          width:     `${width}px`,
-          height:    `${height}px`,
-          position:  "absolute",
-          top:      "-9999px",
-          left:     "-9999px",
-          boxSizing: "border-box",
-          zIndex:    "9999",
-        });
-        document.body.appendChild(ghost);
-        this.dragGhost = ghost;
-        event.dataTransfer.setDragImage(ghost, width / 2, height / 2);
-      }
-      /* ---------------------------------------------------------------- */
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', this.draggedItemId);
     }
 
-    requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
+    setTimeout(() => {
+      event.target.style.opacity = '0.5';
+    }, 0);
   }
 
-  /* ---------------- DRAG ENTER ---------------- */
   handleDragEnter(event) {
     if (!this.draggedItem || event.target === this.draggedItem) return;
-    this.hasMultipleContainers
-      ? this.handleMultiContainerDragEnter(event)
-      : this.handleSingleContainerDragEnter(event);
+
+    if (this.hasMultipleContainers) {
+      this.handleMultiContainerDragEnter(event);
+    } else {
+      this.handleSingleContainerDragEnter(event);
+    }
   }
 
   handleSingleContainerDragEnter(event) {
-    const targetItem = event.target.closest(".pb_draggable_item");
-    // If we're entering a container directly or there's no target item
+    const targetItem = event.target.closest('.pb_draggable_item');
     if (!targetItem) return;
 
     const container = targetItem.parentNode;
-    const items     = Array.from(container.children);
-    const fromIdx   = items.indexOf(this.draggedItem);
-    const toIdx     = items.indexOf(targetItem);
+    const items = Array.from(container.children);
 
-    if (fromIdx > toIdx) {
+    const draggedIndex = items.indexOf(this.draggedItem);
+    const targetIndex = items.indexOf(targetItem);
+
+    if (draggedIndex > targetIndex) {
       container.insertBefore(this.draggedItem, targetItem);
     } else {
       container.insertBefore(this.draggedItem, targetItem.nextSibling);
@@ -146,113 +116,146 @@ export default class PbDraggable extends PbEnhancedElement {
 
   handleMultiContainerDragEnter(event) {
     const targetContainer = event.target.closest(DRAGGABLE_CONTAINER);
-    const targetItem      = event.target.closest(".pb_draggable_item");
+    const targetItem = event.target.closest('.pb_draggable_item');
+
     if (!targetContainer) return;
 
+    // If we're entering a container directly or there's no target item
     if (!targetItem) {
-      const last = targetContainer.querySelector(".pb_draggable_item:last-child");
-      last
-        ? targetContainer.insertBefore(this.draggedItem, last.nextSibling)
-        : targetContainer.appendChild(this.draggedItem);
+      const lastItem = targetContainer.querySelector('.pb_draggable_item:last-child');
+      if (lastItem) {
+        targetContainer.insertBefore(this.draggedItem, lastItem.nextSibling);
+      } else {
+        targetContainer.appendChild(this.draggedItem);
+      }
       return;
     }
 
-    const items = Array.from(targetContainer.children);
-    this.setState({ items: items.map(i => ({ id: i.id, container: targetContainer.id })) });
+    const container = targetItem.parentNode;
+    const items = Array.from(container.children);
+
+    const newItems = [...items].map(item => ({
+      id: item.id,
+      container: container.id
+    }));
+
+    this.setState({ items: newItems });
 
-    const midY = targetItem.getBoundingClientRect().top +
-                 targetItem.getBoundingClientRect().height / 2;
+    const rect = targetItem.getBoundingClientRect();
+    const middleY = rect.top + rect.height / 2;
 
-    if (event.clientY < midY) {
-      targetContainer.insertBefore(this.draggedItem, targetItem);
+    if (event.clientY < middleY) {
+      container.insertBefore(this.draggedItem, targetItem);
     } else {
-      targetContainer.insertBefore(this.draggedItem, targetItem.nextSibling);
+      container.insertBefore(this.draggedItem, targetItem.nextSibling);
     }
   }
 
-  /* ---------------- DRAG OVER ---------------- */
   handleDragOver(event) {
     event.preventDefault();
     event.stopPropagation();
-    this.hasMultipleContainers
-      ? this.handleMultiContainerDragOver(event)
-      : this.handleSingleContainerDragOver(event);
+
+    if (this.hasMultipleContainers) {
+      this.handleMultiContainerDragOver(event);
+    } else {
+      this.handleSingleContainerDragOver(event);
+    }
   }
 
   handleSingleContainerDragOver(event) {
     const container = event.target.closest(DRAGGABLE_CONTAINER);
-    if (container) container.classList.add("active_container");
+    if (container) {
+      container.classList.add("active_container");
+    }
   }
 
   handleMultiContainerDragOver(event) {
-    const container = event.target.matches(DRAGGABLE_CONTAINER)
-      ? event.target
-      : event.target.closest(DRAGGABLE_CONTAINER);
-    if (!container) return;
-
-    this.setState({ activeContainer: container.id });
-    container.classList.add("active_container");
-
-    const last = container.querySelector(".pb_draggable_item:last-child");
-    if (!last || event.clientY > last.getBoundingClientRect().bottom) {
-      if (this.draggedItem && this.draggedItem.parentNode !== container) {
-        container.appendChild(this.draggedItem);
+    let container;
+    if (event.target.matches(DRAGGABLE_CONTAINER)) {
+      container = event.target;
+    } else {
+      container = event.target.closest(DRAGGABLE_CONTAINER);
+    }
+
+    if (container) {
+      this.setState({ activeContainer: container.id });
+      container.classList.add("active_container");
+
+      // If dragging over empty container or below last item
+      const lastItem = container.querySelector('.pb_draggable_item:last-child');
+      if (!lastItem || (lastItem && event.clientY > lastItem.getBoundingClientRect().bottom)) {
+        if (this.draggedItem && this.draggedItem.parentNode !== container) {
+          container.appendChild(this.draggedItem);
+        }
       }
     }
   }
 
-  /* ---------------- DROP ---------------- */
   handleDrop(event) {
     event.preventDefault();
     event.stopPropagation();
 
-    const container = event.target.matches(DRAGGABLE_CONTAINER)
-      ? event.target
-      : event.target.closest(DRAGGABLE_CONTAINER);
+    let container;
+    if (event.target.matches(DRAGGABLE_CONTAINER)) {
+      container = event.target;
+    } else {
+      container = event.target.closest(DRAGGABLE_CONTAINER);
+    }
+
     if (!container || !this.draggedItem) return;
 
     container.classList.remove("active_container");
-    this.draggedItem.style.opacity = "1";
+    this.draggedItem.style.opacity = '1';
 
     // Handle empty containers
-    if (this.hasMultipleContainers && !container.querySelector(".pb_draggable_item")) {
+    if (this.hasMultipleContainers && !container.querySelector('.pb_draggable_item')) {
       container.appendChild(this.draggedItem);
     }
 
     // Updated order of items as an array of item IDs
-    const reorderedItems = Array.from(this.element.querySelectorAll(".pb_draggable_item"))
-      .map(i => ({ id: i.id, container: i.closest(DRAGGABLE_CONTAINER).id }));
-
-    container.dataset.reorderedItems = JSON.stringify(reorderedItems);
-    this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
-      detail: { reorderedItems, containerId: container.id },
+    const reorderedItems = Array.from(
+      this.element.querySelectorAll('.pb_draggable_item')
+    ).map(item => ({
+      id: item.id,
+      container: item.closest(DRAGGABLE_CONTAINER).id
     }));
 
-    this.setState({ items: reorderedItems, isDragging: "", activeContainer: "" });
-    this.draggedItem   = null;
+    // Store reordered items in a data attribute on the container
+    container.setAttribute("data-reordered-items", JSON.stringify(reorderedItems));
+
+    const customEvent = new CustomEvent('pb-draggable-reorder', {
+      detail: {
+        reorderedItems,
+        containerId: container.id,
+      }
+    });
+
+    this.element.dispatchEvent(customEvent);
+
+    this.setState({
+      items: reorderedItems,
+      isDragging: "",
+      activeContainer: ""
+    });
+
+    this.draggedItem = null;
     this.draggedItemId = null;
   }
 
-  /* ---------------- DRAG END ---------------- */
   handleDragEnd(event) {
-    event.target.classList.remove(
-      "is_dragging",
-      `drop_zone_${this.dragZoneType}`,
-      `drop_zone_color_${this.dragZoneColor}`,
-    );
-    event.target.style.opacity = "1";
-
-    if (this.dragGhost) {
-      document.body.removeChild(this.dragGhost);
-      this.dragGhost = null;
-    }
-
-    this.setState({ isDragging: "", activeContainer: "" });
+    event.target.classList.remove("is_dragging");
+    event.target.style.opacity = '1';
 
-    this.element.querySelectorAll(DRAGGABLE_CONTAINER)
-      .forEach(c => c.classList.remove("active_container"));
+    this.setState({
+      isDragging: "",
+      activeContainer: ""
+    });
 
-    this.draggedItem   = null;
+    this.draggedItem = null;
     this.draggedItemId = null;
+
+    this.element.querySelectorAll(DRAGGABLE_CONTAINER).forEach(container => {
+      container.classList.remove("active_container");
+    });
   }
 }

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

@@ -11,7 +11,6 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
-  - filter_within_turbo_frames: Within Turbo Frames
 
   react:
   - filter_default: Default

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss

@@ -23,39 +23,35 @@
 @mixin error-state-right-side-select-kit {
   &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
   &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
-    &:not(:has(.pb_phone_number_input)) {
-      align-items: flex-start;
+    align-items: flex-start;
 
-      .pb_select_kit_wrapper {
-        padding-top: $space_md;
-        margin-top: 2px;
+    .pb_select_kit_wrapper {
+      padding-top: $space_md;
+      margin-top: 2px;
 
-        .pb_select_kit_caret {
-          padding-top: $space_md;
-        }
+      .pb_select_kit_caret {
+        padding-top: $space_md;
       }
+    }
 
-      .pb_select_kit_wrapper.error {
-        padding-top: $space_md;
-        margin-top: 2px;
+    .pb_select_kit_wrapper.error {
+      padding-top: $space_md;
+      margin-top: 2px;
 
-        .pb_select_kit_caret {
-          padding-top: $space_xl;
-        }
+      .pb_select_kit_caret {
+        padding-top: $space_xl;
       }
     }
   }
 }
 
 @mixin error-state-left-side-select-kit {
-  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_text_input_kit.error) {
-    &:not(:has(.pb_phone_number_input)) {
-      align-items: flex-start;
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-start;
 
-      .pb_text_input_kit.error {
-        padding-top: $space_md;
-        margin-top: 2px;
-      }
+    .pb_text_input_kit.error {
+      padding-top: $space_md;
+      margin-top: 2px;
     }
   }
-}
+}

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

@@ -11,7 +11,6 @@ examples:
 
   react:
   - line_graph_default: Default
-  - line_graph_pb_styles: Playbook Styles
   - line_graph_legend: Legend
   - line_graph_legend_position: Legend Position
   - line_graph_legend_nonclickable: Legend Nonclickable

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

@@ -4,4 +4,3 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
 export { default as LineGraphColors } from './_line_graph_colors.jsx'
-export { default as LineGraphPbStyles } from './_line_graph_pb_styles.jsx'

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

@@ -39,9 +39,6 @@ $flag-min-resolution: 192dpi;
     color: $charcoal;
   }
 
-  .iti__country-list {
-    min-width: $dropdown-min-width;
-  }
   // iti-spacer-horizontal's default is 8px, or $space_xs 
   .iti__country-list .iti__flag, .iti__country-name {
     margin-right: $space_xs;
@@ -230,16 +227,6 @@ $flag-min-resolution: 192dpi;
     .iti__dropdown-content {
       border-radius: $space_xs; 
       border: 1px solid $border_dark !important;
-      .iti__search-input {
-        background-color: $bg_dark_card;
-        &:hover {
-          background-color: $bg_dark_card;
-        }      
-        &:active,
-        &:focus {
-          background-color: $card_dark;
-        }
-      }
     }
 
     .iti__divider {

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

@@ -37,7 +37,6 @@ type PhoneNumberInputProps = {
   required?: boolean,
   value?: string,
   formatAsYouType?: boolean,
-  countrySearch?: boolean,
 }
 
 enum ValidationError {
@@ -92,7 +91,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
-    countrySearch = false,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -244,7 +242,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       autoInsertDialCode: false,
       initialCountry: initialCountry || fallbackCountry,
       onlyCountries,
-      countrySearch: countrySearch,
+      countrySearch: false,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
       hiddenInput: hiddenInputs ? () => ({

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

@@ -9,7 +9,6 @@ examples:
   - 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
-  - phone_number_input_country_search: Country Search
 
   rails:
   - phone_number_input_default: Default
@@ -19,5 +18,4 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
   - phone_number_input_hidden_inputs: Hidden Inputs
-  - phone_number_input_country_search: Country Search
   

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

@@ -6,4 +6,3 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
 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'
-export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'

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

@@ -25,8 +25,6 @@ module Playbook
                                 default: false
       prop :hidden_inputs, type: Playbook::Props::Boolean,
                            default: false
-      prop :country_search, type: Playbook::Props::Boolean,
-                            default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -47,7 +45,6 @@ module Playbook
           preferredCountries: preferred_countries,
           required: required,
           value: value,
-          countrySearch: country_search,
         }
       end
     end

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

@@ -139,22 +139,3 @@ test("should format phone number as '555-555-5555' with formatAsYouType and 'us'
 
     expect(input.value).toBe("555-555-5555");
 });
-
-test("should pass countrySearch prop to component", () => {
-    window.intlTelInput = jest.fn(() => ({
-      getSelectedCountryData: jest.fn(() => ({})),
-      isValidNumber: jest.fn(() => true),
-      getValidationError: jest.fn(() => 0),
-    }));
-    
-    const props = {
-      id: testId,
-      countrySearch: true,
-      data: { testid: 'phone-input-with-search' }
-    };
-  
-    render(<PhoneNumberInput {...props} />);
-    
-    const wrapper = screen.getByTestId('phone-input-with-search');
-    expect(wrapper).toBeInTheDocument();
-});

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

@@ -6,7 +6,6 @@ examples:
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
-    - popover_append_to: Append To
 
   react:
     - popover_default: Default