RubyGems - playbook_ui - Versions diffs - 14.18.0.pre.alpha.dropdownautocomplete7493 → 14.18.0.pre.alpha.play1736highchartslinegraphdefaultrebuild7431 - Mend

playbook_ui 14.18.0.pre.alpha.dropdownautocomplete7493 → 14.18.0.pre.alpha.play1736highchartslinegraphdefaultrebuild7431

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ `autocomplete` prop can also be used in conjunction with the `customDisplay` prop.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx ADDED Viewed

@@ -0,0 +1,79 @@
+import React, { useRef } from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import useDropdown from '../../pb_dropdown/hooks/useDropdown'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+const DropdownWithHook = (props) => {
+const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
+const buttonRef = useRef(null);
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "United-states"
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "canada"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
+    }
+  ];
+  return (
+  <div>
+      <CircleIconButton
+          htmlOptions={{ref: buttonRef}}
+          icon={"flag"}
+          onClick={() => setIsDropdownClosed(!isDropDownClosed)}
+          variant="secondary"
+      />
+    <Dropdown
+        isClosed={isDropDownClosed}
+        options={options}
+        triggerRef={buttonRef}
+        {...props}
+    >
+      {options.map((option) => (
+        <Dropdown.Option key={option.id}
+            option={option}
+        >
+        <>
+          <FlexItem>
+              <Flex paddingRight='md'>
+                <Icon icon={option.icon}
+                    paddingRight="xs"
+                />
+                <Body text={option.label} />
+              </Flex>
+          </FlexItem>
+              <FlexItem>
+                <Body color="light"
+                    text={option.areaCode}
+                />
+              </FlexItem>
+            </>
+        </Dropdown.Option>
+      ))}
+    </Dropdown>
+  </div>
+  )
+}
+export default DropdownWithHook

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml CHANGED Viewed

@@ -1,15 +1,12 @@
 examples:
   rails:
   - dropdown_default: Default
-  - dropdown_with_autocomplete: Autocomplete
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
-  - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
   - dropdown_with_custom_display_rails: Custom Display
   - dropdown_with_custom_trigger_rails: Custom Trigger
-  - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
@@ -18,20 +15,20 @@ examples:
   react:
   - dropdown_default: Default
-  - dropdown_with_autocomplete: Autocomplete
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
-  - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
-  - dropdown_with_external_control: useDropdown Hook
+  # - dropdown_with_autocomplete: Autocomplete
+  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
+  # - dropdown_with_external_control: useDropdown Hook
+  # - dropdown_with_hook: useDropdown Hook with Any Trigger

data/app/pb_kits/playbook/pb_dropdown/docs/index.js CHANGED Viewed

@@ -3,10 +3,11 @@ export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_di
 export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
 export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
 export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
-export { default as DropdownWithAutocompleteWithSubcomponents } from './_dropdown_with_autocomplete_with_subcomponents.jsx'
+export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
 export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
 export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
 export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
+export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
 export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
@@ -14,4 +15,3 @@ export { default as DropdownBlankSelection } from './_dropdown_blank_selection.j
 export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
 export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
 export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
-export {default as DropdownWithSearch} from './_dropdown_with_search.jsx'

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

@@ -14,8 +14,8 @@
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger", props:{autocomplete: object.autocomplete}) %>
-            <%= pb_rails("dropdown/dropdown_container", props: {searchbar: object.searchbar}) do %>
+            <%= pb_rails("dropdown/dropdown_trigger") %>
+            <%= pb_rails("dropdown/dropdown_container") do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb CHANGED Viewed

@@ -18,10 +18,6 @@ module Playbook
                      default: "default"
       prop :separators, type: Playbook::Props::Boolean,
                         default: true
-      prop :autocomplete, type: Playbook::Props::Boolean,
-                          default: false
-      prop :searchbar, type: Playbook::Props::Boolean,
-                       default: false
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen } from "../utilities/test-utils"
-import { Dropdown, Icon, IconCircle } from 'playbook-ui'
+import { Dropdown, Icon } from 'playbook-ui'
 const testId = 'dropdown'
@@ -219,48 +219,4 @@ test('show error message', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveTextContent(errorMessage)
-})
-test("autocomplete prop to render input", () => {
-  render (
-    <Dropdown
-        autocomplete
-        data={{ testid: testId }}
-        options={options}
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  const input = kit.querySelector('.dropdown_input')
-  expect(input).toBeInTheDocument()
-})
-test("searchbar prop to render TextInput in container", () => {
-  render (
-    <Dropdown
-        data={{ testid: testId }}
-        options={options}
-    >
-      <Dropdown.Trigger>
-          <IconCircle
-              cursor="pointer"
-              icon="flag"
-              variant="royal"
-          />
-      </Dropdown.Trigger>
-      <Dropdown.Container maxWidth="xs"
-          searchbar
-      >
-      {options.map((option) => (
-      <Dropdown.Option key={option.id}
-          option={option}
-      />
-    ))}
-    </Dropdown.Container>
-    </Dropdown>
-  )
-  const kit = screen.getByTestId(testId)
-  const searchbar = kit.querySelector('.pb_text_input_kit')
-  expect(searchbar).toBeInTheDocument()
 })

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

@@ -1,14 +1,4 @@
 <%= pb_content_tag do %>
-    <% if object.searchbar %>
-        <%= pb_rails("text_input", props: {padding_top:"xs", padding_x:"xs"}) do %>
-            <input
-            type="text"
-            placeholder="Search…"
-            data-dropdown-search
-            autocomplete="off"
-            />
-        <% end %>
-    <% end %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
             <% if content.present? %>
                 <%= content.presence %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb CHANGED Viewed

@@ -3,9 +3,6 @@
 module Playbook
   module PbDropdown
     class DropdownContainer < Playbook::KitBase
-      prop :searchbar, type: Playbook::Props::Boolean,
-                       default: false
       def classname
         generate_classname("pb_dropdown_container", "close", separator: " ")
       end

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

@@ -8,7 +8,7 @@
         align: "center",
         border_radius:"lg",
         classname: object.trigger_wrapper_classes,
-        cursor: object.autocomplete ? "text" : "pointer",
+        cursor: "pointer",
         justify: "between",
         padding_x:"sm",
         padding_y:"xs",
@@ -24,17 +24,7 @@
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
                     <% end %>
                 <% else %>
-                    <% if object.autocomplete %>
-                        <input
-                            data-dropdown-autocomplete
-                            class="dropdown_input"
-                            type="text"
-                            placeholder="<%= object.placeholder || 'Select…' %>"
-                            autocomplete="off"
-                        />
-                    <% else %>
-                        <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
-                    <% end %>
+                <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
                 <% end %>
             <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb CHANGED Viewed

@@ -9,8 +9,6 @@ module Playbook
                 default: ""
       prop :placeholder, type: Playbook::Props::String
       prop :custom_display
-      prop :autocomplete, type: Playbook::Props::Boolean,
-                          default: false
       def data
         Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)
@@ -25,7 +23,7 @@ module Playbook
       end
       def trigger_wrapper_classes
-        generate_classname("dropdown_trigger_wrapper", ("select_only" unless autocomplete))
+        generate_classname("dropdown_trigger_wrapper", "select_only")
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/index.js CHANGED Viewed

@@ -11,8 +11,6 @@ const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
 const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
 const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
 const DROPDOWN_INPUT = "#dropdown-selected-option";
-const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
-const SEARCH_BAR_SELECTOR = "[data-dropdown-search]";
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -27,11 +25,9 @@ export default class PbDropdown extends PbEnhancedElement {
     this.keyboardHandler = new PbDropdownKeyboard(this);
     this.setDefaultValue();
     this.bindEventListeners();
-    this.bindSearchInput();
     this.updateArrowDisplay(false);
     this.handleFormValidation();
     this.handleFormReset();
-    this.bindSearchBar();
   }
   bindEventListeners() {
@@ -49,53 +45,6 @@ export default class PbDropdown extends PbEnhancedElement {
     );
   }
-  bindSearchBar() {
-    this.searchBar = this.element.querySelector(SEARCH_BAR_SELECTOR);
-    if (!this.searchBar) return;
-    this.searchBar.addEventListener("input", (e) =>
-      this.handleSearch(e.target.value)
-    );
-  }
-  bindSearchInput() {
-    this.searchInput = this.element.querySelector(SEARCH_INPUT_SELECTOR);
-    if (!this.searchInput) return;
-    // Focus the input when anyone clicks the wrapper
-    this.element
-      .querySelector(TRIGGER_SELECTOR)
-      ?.addEventListener("click", () => this.searchInput.focus());
-    // Live filter
-    this.searchInput.addEventListener("input", (e) =>
-      this.handleSearch(e.target.value)
-    );
-  }
-  handleSearch(term = "") {
-    const lcTerm = term.toLowerCase();
-    this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
-      const label = JSON.parse(opt.dataset.dropdownOptionLabel).label
-        .toString()
-        .toLowerCase();
-      // hide or show option
-      const match = label.includes(lcTerm);
-      opt.style.display = match ? "" : "none";
-    });
-    if (this.target.classList.contains("open")) {
-      const el = this.target;
-        el.style.height = "auto";
-        requestAnimationFrame(() => {
-        const newHeight = el.scrollHeight + "px";
-          el.offsetHeight; // force reflow
-        el.style.height = newHeight;
-      });
-    }
-  }
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
     const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
@@ -110,7 +59,6 @@ export default class PbDropdown extends PbEnhancedElement {
   }
   handleDocumentClick(event) {
-    if (event.target.closest(SEARCH_BAR_SELECTOR)) return;
     if (this.isClickOutside(event) && this.target.classList.contains("open")) {
       this.hideElement(this.target);
       this.updateArrowDisplay(false);
@@ -151,11 +99,6 @@ export default class PbDropdown extends PbEnhancedElement {
       }
     }
-    const autocompleteInput = this.element.querySelector(SEARCH_INPUT_SELECTOR);
-    if (autocompleteInput){
-      autocompleteInput.value = JSON.parse(value).label;
-    }
     const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
     if (customTrigger) {
       if (this.target.classList.contains("open")) {

data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js CHANGED Viewed

@@ -1,6 +1,4 @@
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
-const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
 export class PbDropdownKeyboard {
   constructor(dropdown) {
     this.dropdown = dropdown;
@@ -9,9 +7,6 @@ export class PbDropdownKeyboard {
       this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
     );
     this.focusedOptionIndex = -1;
-    this.searchInput = this.dropdownElement.querySelector(
-      SEARCH_INPUT_SELECTOR
-    );
     this.init();
   }
@@ -20,18 +15,6 @@ export class PbDropdownKeyboard {
       "keydown",
       this.handleKeyDown.bind(this)
     );
-    if (this.searchInput) {
-      this.searchInput.addEventListener("input", () =>
-        this.openDropdownIfClosed()
-      );
-    }
-  }
-  openDropdownIfClosed() {
-    if (!this.dropdown.target.classList.contains("open")) {
-      this.dropdown.showElement(this.dropdown.target);
-      this.dropdown.updateArrowDisplay(true);
-    }
   }
   handleKeyDown(event) {
@@ -67,15 +50,6 @@ export class PbDropdownKeyboard {
         this.dropdown.updateArrowDisplay(false);
         this.resetFocus();
         break;
-      case "Backspace":
-        if (this.searchInput) {
-          setTimeout(() => {
-            if (this.searchInput.value.trim() === "") {
-              this.dropdown.resetDropdownValue();
-            }
-          }, 0);
-        }
-        break;
       default:
         break;
     }

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx CHANGED Viewed

@@ -46,6 +46,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
     inputRef,
     isDropDownClosed,
     setFocusedOptionIndex,
+    triggerRef
   } = useContext(DropdownContext);
   const ariaProps = buildAriaProps(aria);
@@ -66,7 +67,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
         id={id}
         onMouseEnter={() => setFocusedOptionIndex(-1)}
         ref={dropdownContainerRef}
-        style={{ position: "absolute"}}
+        style={triggerRef ? {} : { position: "absolute"}}
     >
       {searchbar && (
         <TextInput dark={dark}

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx CHANGED Viewed

@@ -53,6 +53,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     selected,
     setIsInputFocused,
     toggleDropdown,
+    triggerRef,
   } = useContext(DropdownContext);
   const handleKeyDown = useHandleOnKeyDown();
@@ -98,6 +99,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
         id={id}
     >
       {
+        !triggerRef && (
           children ? (
             <div
                 onClick={() => toggleDropdown()}
@@ -145,10 +147,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       <input
                           className="dropdown_input"
                           onChange={handleChange}
-                          onClick={(e) => {
-                            e.stopPropagation();// keep the wrapper’s handler from firing
-                            toggleDropdown();
-                          }}
+                          onClick={() => toggleDropdown()}
                           onFocus={() => setIsInputFocused(true)}
                           onKeyDown={handleKeyDown}
                           placeholder={
@@ -182,6 +181,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
               </Flex>
             </>
           )
+        )
       }
     </div>
   );

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

@@ -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 CHANGED Viewed

@@ -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/_line_graph_pb_styles.jsx CHANGED Viewed

@@ -37,7 +37,7 @@ const baseOptions = {
 }
 const LineGraphPbStyles = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
+  const options = Highcharts.merge({}, lineGraphTheme, baseOptions )
   return(
     <div>

data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.js ADDED Viewed

@@ -0,0 +1,49 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+const lineGraphTheme = {
+  title: { text: "" },
+  subtitle: { text: "" },
+  chart: {
+    type: "line",
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    followPointer: true,
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  plotOptions: {
+    line: {
+      dataLabels: {
+        enabled: false,
+      },
+    },
+  },
+  credits: { enabled: false },
+  legend: { enabled: false },
+  colors: [
+    colors.data_1,
+    colors.data_2,
+    colors.data_3,
+    colors.data_4,
+    colors.data_5,
+    colors.data_6,
+    colors.data_7,
+  ],
+}
+export default lineGraphTheme;

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

@@ -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 CHANGED Viewed

@@ -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 ? () => ({