playbook_ui 16.12.0.pre.alpha.PLAY3072railstextinputrequiredaddonmaskingbugs18157 → 16.12.0.pre.alpha.PLAY3100adddarkborderprob18326

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 808c3d5ab3e82537f24aeac0f1cb2e402a30d4afae94e25825bfcc0cbe8feda0
-  data.tar.gz: '084bedeca9f2498f50b6cac05965995b7cc91021f4eebd6e5e149caf79583a25'
+  metadata.gz: a180c0a86cb56e3e65389829c05e8f2a80a188e736401dec91b92257b2ba8cc9
+  data.tar.gz: 616c39a14d5f72c03de3020fcc6a1ecdb4cffde6a452d922dcc8791a07b8fa3a
 SHA512:
-  metadata.gz: bca00447e61c8e7ed070c1ea0fe1fa3ade2c78d3ac3a2ecc2a294d9fb25464575f299aa231f8c4808344197e741daed75e5cd7d6b408c10fe16a39327953af13
-  data.tar.gz: 52fced873ada1be081e91b4b01dbf166ed0f41e17545e86d467a1168c0d0526660e0712c04921718db3201c540c19341403873f20fe816f0205f90ae445c1cbc
+  metadata.gz: 7d19e915b3c1c7f1b5c99307c7dcb402b30bb2852efe87a59642dc40ef56a38a305d98e97c03a9535868e077ade98df3278d73d1174af0b8b1fe46a04a19fc4d
+  data.tar.gz: bff090a80a6dc89f2d0097b38a14851d4b68f0ec417502324a144dc624c6852902b4c9072ef3710954fecf2803350d5f9fbc530dec4d2ef010ea8ccc83ab6b96

data/app/pb_kits/playbook/_playbook.scss

@@ -41,7 +41,6 @@
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
-@import 'pb_icon_button/icon_button';
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -203,7 +203,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         : undefined;
     const errorId = error ? `${selectId}-error` : undefined;
 
-    const [filterItem, setFilterItem] = useState("");
     const initialSelected = useMemo(() => {
       // Handle quickpick variant with string defaultValue (e.g., "This Month")
       if (variant === "quickpick" && typeof defaultValue === "string" && defaultValue) {
@@ -226,6 +225,13 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
       initialSelected
     );
 
+    // Autocomplete displays the selection in the input; seed from defaultValue
+    const [filterItem, setFilterItem] = useState(() => {
+      if (!autocomplete || multiSelect) return "";
+      if (Array.isArray(initialSelected)) return "";
+      return (initialSelected as GenericObject)?.label || "";
+    });
+
     const filterResetDefaultSerialized = useMemo(
         () => serializeDropdownFilterResetDefault(variant, multiSelect, defaultValue, dropdownOptions),
         [variant, multiSelect, defaultValue, dropdownOptions]
@@ -320,10 +326,17 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     }, [optionsWithBlankSelection, selectedArray, multiSelect]);
     
     const filteredOptions = useMemo(() => {
+          // When the input shows the selected label, do not filter the list down to that one option
+          const selectedLabel =
+            !multiSelect &&
+            !Array.isArray(selected) &&
+            (selected as GenericObject)?.label;
+          const filterText =
+            selectedLabel && filterItem === selectedLabel ? "" : filterItem;
           return availableOptions.filter((opt: GenericObject) =>
-            String(opt.label).toLowerCase().includes(filterItem.toLowerCase())
+            String(opt.label).toLowerCase().includes(filterText.toLowerCase())
           );
-        }, [availableOptions, filterItem]);
+        }, [availableOptions, filterItem, multiSelect, selected]);
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -460,6 +473,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setSelected({});
         onSelect && onSelect(null);
         setFocusedOptionIndex(-1);
+        setFilterItem("");
         
         // Clear linked DatePickers as well if this is a quickpick variant with controls
         if (variant === "quickpick") {
@@ -593,6 +607,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     onSelect,
                     optionsWithBlankSelection,
                     selected,
+                    setFilterItem,
                     setFocusedOptionIndex,
                     setIsDropDownClosed,
                     setIsInputFocused,

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value_with_autocomplete.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options, default_value: options.last, autocomplete: true}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value_with_autocomplete.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownDefaultValueWithAutocomplete = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ];
+
+  return (
+  <>
+    <Dropdown
+        autocomplete
+        defaultValue={options[2]}
+        options={options}
+        {...props}
+    />
+  </>
+  )
+}
+
+export default DropdownDefaultValueWithAutocomplete

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

@@ -22,6 +22,7 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
+  - dropdown_default_value_with_autocomplete: Default Value with Autocomplete
   - dropdown_blank_selection: Blank Selection
   - dropdown_with_placeholder: Placeholder
   - dropdown_separators_hidden: Separators Hidden
@@ -63,6 +64,7 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
+  - dropdown_default_value_with_autocomplete: Default Value with Autocomplete
   - dropdown_blank_selection: Blank Selection
   - dropdown_with_placeholder: Placeholder
   - dropdown_clear_selection: Clear Selection

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

@@ -37,3 +37,4 @@ export { default as DropdownDisabledOption } from "./_dropdown_disabled_option.j
 export { default as DropdownCustomDisplayDisabledOption } from "./_dropdown_custom_display_disabled_option.jsx";
 export { default as DropdownDisabled } from "./_dropdown_disabled.jsx";
 export { default as DropdownGroupedOptions } from "./_dropdown_grouped_options.jsx";
+export { default as DropdownDefaultValueWithAutocomplete } from './_dropdown_default_value_with_autocomplete.jsx'

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

@@ -350,6 +350,41 @@ test("autocomplete prop to render input", () => {
   expect(input).toBeInTheDocument()
 })
 
+test("defaultValue renders in autocomplete input", () => {
+  render(
+    <Dropdown
+        autocomplete
+        data={{ testid: testId }}
+        defaultValue={options[2]}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('.dropdown_input')
+  expect(input).toBeInTheDocument()
+  expect(input).toHaveValue(options[2].label)
+  expect(input).toHaveAttribute("placeholder", "")
+})
+
+test("autocomplete defaultValue still shows all options when opened", () => {
+  render(
+    <Dropdown
+        autocomplete
+        data={{ testid: testId }}
+        defaultValue={options[2]}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const optionEls = kit.querySelectorAll('.pb_dropdown_option_list, .pb_dropdown_option_selected')
+  expect(optionEls).toHaveLength(options.length)
+  expect(kit).toHaveTextContent(options[0].label)
+  expect(kit).toHaveTextContent(options[1].label)
+  expect(kit).toHaveTextContent(options[2].label)
+})
+
 test("searchbar prop to render TextInput in container", () => {  
   render (
     <Dropdown

data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx

@@ -6,11 +6,13 @@ export const useHandleOnKeyDown = () => {
 
 const {
   autocomplete,
+  filterItem,
   filteredOptions,
   focusedOptionIndex,
   handleBackspace,
   handleOptionClick,
   selected,
+  setFilterItem,
   setFocusedOptionIndex,
   setIsDropDownClosed,
 }= useContext(DropdownContext)
@@ -40,7 +42,22 @@ const {
   return (e: React.KeyboardEvent) => {
 
     if (e.key !== "Tab" && autocomplete && selected && selected.label) {
+      // Only when the input is showing the selected label (e.g. seeded defaultValue)
+      const replacingSelectedLabel = filterItem === selected.label;
       handleBackspace();
+
+      if (replacingSelectedLabel && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        e.preventDefault();
+        setFilterItem?.(e.key);
+        setIsDropDownClosed(false);
+        return;
+      }
+
+      if (replacingSelectedLabel && (e.key === "Backspace" || e.key === "Delete")) {
+        e.preventDefault();
+        setFilterItem?.("");
+        return;
+      }
     }
 
     switch (e.key) {
@@ -72,4 +89,4 @@ const {
         break;
   }
 }
-};
+};

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

@@ -541,6 +541,30 @@ export default class PbDropdown extends PbEnhancedElement {
     }
   }
 
+  // Keep the selected label in the autocomplete input, but do not treat it as a search filter
+  resetOptionFilterForSelectedLabel() {
+    if (this.isMultiSelect || !this.searchInput) return;
+
+    const selectedOption = Array.from(this.queryAllOptions()).find((opt) =>
+      opt.classList.contains("pb_dropdown_option_selected"),
+    );
+    if (!selectedOption) return;
+
+    try {
+      const selectedLabel = JSON.parse(
+        selectedOption.dataset.dropdownOptionLabel,
+      ).label;
+      if (this.searchInput.value !== selectedLabel) return;
+
+      this.queryAllOptions().forEach((opt) => {
+        opt.style.display = "";
+      });
+      this.removeNoOptionsMessage();
+    } catch {
+      // ignore invalid option payloads
+    }
+  }
+
   showNoOptionsMessage() {
     if (this.target?.querySelector(".dropdown_no_options")) return;
 
@@ -923,6 +947,9 @@ export default class PbDropdown extends PbEnhancedElement {
 
   showElement(elem) {
     if (this.isDisabled) return;
+
+    // When autocomplete is showing the selected label (not an active search), show all options
+    this.resetOptionFilterForSelectedLabel();
     
     this.ensureFloatingPortalConfig();
     if (this.useMenuPortal) {
@@ -1096,6 +1123,13 @@ export default class PbDropdown extends PbEnhancedElement {
       const optionData = JSON.parse(selectedOption.dataset.dropdownOptionLabel);
       this.setTriggerElementText(optionData.label);
 
+      // Autocomplete trigger has no [data-dropdown-trigger-display]; set the input value instead
+      const autocompleteInput =
+        this.searchInput || this.element.querySelector(SEARCH_INPUT_SELECTOR);
+      if (autocompleteInput) {
+        autocompleteInput.value = optionData.label;
+      }
+
       // Handle quickpick variant: populate start/end date hidden inputs and sync DatePickers
       if (optionData.formatted_start_date && optionData.formatted_end_date) {
         const startDateId = this.element.dataset.startDateId;

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -52,8 +52,15 @@ const DropdownOption = (props: DropdownOptionProps) => {
   } = useContext(DropdownContext);
 
   const isItemMatchingFilter = (option: GenericObject | undefined) => {
+    // When the input is only showing the selected label (e.g. seeded defaultValue), do not filter
+    const selectedLabel =
+      !multiSelect &&
+      !Array.isArray(selected) &&
+      (selected as GenericObject)?.label;
+    const filterText =
+      selectedLabel && filterItem === selectedLabel ? "" : filterItem;
     const label = typeof option?.label === 'string' ? option.label.toLowerCase() : option?.label;
-    return String(label).toLowerCase().includes(filterItem.toLowerCase());
+    return String(label).toLowerCase().includes(filterText.toLowerCase());
   }
 
   // When multiSelect, then if an option is selected, remove from dropdown

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

@@ -103,8 +103,9 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     "Select..."
   );
 
+  const hideJoinedLabelInBody = Boolean(autocomplete && filterItem === joinedLabels);
   const defaultDisplayPlaceholder = joinedLabels
-    ? joinedLabels
+    ? (hideJoinedLabelInBody ? "" : joinedLabels)
     : autocomplete
     ? ""
     : placeholder
@@ -252,9 +253,9 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       }}
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
                   >
-                    {(!blankSelection || selected?.value !== optionsWithBlankSelection?.[0]?.value) && (
-                      <>
-                        {clearable !== false && selectedArray.length > 0 && (
+                    {(!blankSelection || selected?.value !== optionsWithBlankSelection?.[0]?.value) &&
+                    clearable !== false &&
+                    selectedArray.length > 0 ? (
                           <div onClick={(e)=>{e.stopPropagation(); !disabled && handleBackspace()}}>
                             <Icon
                                 cursor={disabled ? "default" : "pointer"}
@@ -264,8 +265,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                                 size="sm"
                             />
                           </div>
-                        )}
-                      </>
+                    ) : (
+                      <></>
                     )}
                     <Icon
                         cursor={disabled ? "default" : "pointer"}

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

@@ -1,7 +1,6 @@
 examples:
 
   rails:
-  - form_form_with_validate_addon_currency: Validation + Add On + Currency Mask
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
   - form_form_with_validation_msg: Validation + Custom Validation Message

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

@@ -202,23 +202,37 @@
     }
   }
 
-  & > [class^=pb_typeahead_kit] {
+  & > [class^=pb_typeahead_kit],
+  & > [data-pb-react-component] > [class^=pb_typeahead_kit] {
     min-width: 200px;
   }
 
-  & > [class^=pb_typeahead_kit]:not(:last-child) {
-    [class^=pb_text_input_kit] .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-      border-right-width: 0;
+  & > [class^=pb_typeahead_kit]:not(:last-child),
+  & > [data-pb-react-component]:not(:last-child) > [class^=pb_typeahead_kit] {
+    [class^=pb_text_input_kit] .text_input_wrapper {
+      input,
+      .text_input,
+      .typeahead-kit-select__control {
+        border-bottom-right-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+    }
+
+    [class^=pb_text_input_kit] .text_input_wrapper div.text_input {
       min-height: 26px;
     }
   }
 
-  & > [class^=pb_typeahead_kit]:not(:first-child) {
-    [class^=pb_text_input_kit] .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
+  & > [class^=pb_typeahead_kit]:not(:first-child),
+  & > [data-pb-react-component]:not(:first-child) > [class^=pb_typeahead_kit] {
+    [class^=pb_text_input_kit] .text_input_wrapper {
+      input,
+      .text_input,
+      .typeahead-kit-select__control {
+        border-bottom-left-radius: 0 !important;
+        border-top-left-radius: 0 !important;
+      }
     }
   }
 

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.html.erb

@@ -1,19 +1,24 @@
 <div>
+
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
   <%= pb_rails("form_group") do %>
-    <%
-      options = [
-        { label: 'Windows', value: 'windows' },
-        { label: 'Roof', value: 'roof' },
-        { label: 'Siding', value: 'siding' },
-        { label: 'Doors', value: 'doors' },
-      ]
-    %>
-    <%= pb_rails("typeahead", props: {
-      default_options: [options.first],
-      id: "form-group-typeahead-example",
-      label: "Products",
-      options: options,
-    }) %>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "Colors",
+    name: :foo,
+    is_multi: false,
+  })
+%>
     <%= pb_rails("button", props: {
       id: "form-group-button",
       text: "Add",

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

@@ -5,7 +5,7 @@ examples:
   - form_group_button: Button
   - form_group_full_width: Full Width
   - form_group_date_picker: Date Picker
-  # - form_group_typeahead: Typeahead
+  - form_group_typeahead: Typeahead
   - form_group_select: Select
   - form_group_selectable_card: Selectable Card
   - form_group_selectable_card_icon: Selectable Card Icon
@@ -16,7 +16,7 @@ examples:
   - form_group_button: Button
   - form_group_full_width: Full Width
   - form_group_date_picker: Date Picker
-  # - form_group_typeahead: Typeahead
+  - form_group_typeahead: Typeahead
   - form_group_select: Select
   - form_group_selectable_card: Selectable Card
   - form_group_selectable_card_icon: Selectable Card Icon

data/app/pb_kits/playbook/pb_highlight/_highlight.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
-import Highlighter from 'react-highlight-words'
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { buildHtmlProps } from '../utilities/props'
+import { buildDataProps, buildHtmlProps } from '../utilities/props'
+import { findHighlightChunks } from './_highlightChunks'
 
 type HighlightProps = {
   className?: string,
@@ -26,20 +25,39 @@ const Highlight = (props: HighlightProps): React.ReactElement => {
     text = '',
   } = props
 
+  const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const highlightContent: any = text || children;
+  const highlightContent: string = (text || children || '') as string
+  const highlightClassName = classnames(globalProps(props), className)
+  const chunks = findHighlightChunks(highlightContent, highlightedText)
 
   return (
-    <Highlighter
-        autoEscape
-        data={data}
-        highlightClassName={classnames(globalProps(props), className)}
-        highlightTag="mark"
-        id={id}
-        searchWords={highlightedText}
-        textToHighlight={highlightContent}
+    <span
+        {...dataProps}
         {...htmlProps}
-    />
+        id={id}
+    >
+      {chunks.map((chunk, index) => {
+        const chunkText = highlightContent.substring(chunk.start, chunk.end)
+
+        if (chunk.highlight) {
+          return (
+            <mark
+                className={highlightClassName}
+                key={index}
+            >
+              {chunkText}
+            </mark>
+          )
+        }
+
+        return (
+          <span key={index}>
+            {chunkText}
+          </span>
+        )
+      })}
+    </span>
   )
 }
 

data/app/pb_kits/playbook/pb_highlight/_highlightChunks.ts

@@ -0,0 +1,89 @@
+type HighlightChunk = {
+  start: number,
+  end: number,
+  highlight: boolean,
+}
+
+const escapeRegExp = (value: string): string =>
+  value.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&')
+
+/**
+ * Finds all case-insensitive, literal (auto-escaped) matches for the given
+ * search terms, merges overlapping/adjacent ranges, and returns a full set of
+ * highlight and non-highlight chunks covering the text.
+ *
+ * Mirrors highlight-words-core behavior used by react-highlight-words with
+ * autoEscape enabled and caseSensitive disabled.
+ */
+export const findHighlightChunks = (
+  textToHighlight: string,
+  searchWords: string[],
+): HighlightChunk[] => {
+  const text = textToHighlight || ''
+
+  const matchRanges = searchWords
+    .filter((searchWord) => searchWord)
+    .reduce<{ start: number, end: number }[]>((chunks, searchWord) => {
+      const regex = new RegExp(escapeRegExp(searchWord), 'gi')
+      let match: RegExpExecArray | null
+
+      while ((match = regex.exec(text))) {
+        const start = match.index
+        const end = regex.lastIndex
+
+        if (end > start) {
+          chunks.push({ start, end })
+        }
+
+        // Prevent zero-length match infinite loops (e.g. Firefox)
+        if (match.index === regex.lastIndex) {
+          regex.lastIndex++
+        }
+      }
+
+      return chunks
+    }, [])
+
+  const combined = matchRanges
+    .sort((first, second) => first.start - second.start)
+    .reduce<{ start: number, end: number }[]>((processedChunks, nextChunk) => {
+      if (processedChunks.length === 0) {
+        return [nextChunk]
+      }
+
+      const prevChunk = processedChunks.pop() as { start: number, end: number }
+
+      // Merge overlapping or adjacent ranges (start <= prev end)
+      if (nextChunk.start <= prevChunk.end) {
+        processedChunks.push({
+          start: prevChunk.start,
+          end: Math.max(prevChunk.end, nextChunk.end),
+        })
+      } else {
+        processedChunks.push(prevChunk, nextChunk)
+      }
+
+      return processedChunks
+    }, [])
+
+  const allChunks: HighlightChunk[] = []
+  const append = (start: number, end: number, highlight: boolean) => {
+    if (end - start > 0) {
+      allChunks.push({ start, end, highlight })
+    }
+  }
+
+  if (combined.length === 0) {
+    append(0, text.length, false)
+  } else {
+    let lastIndex = 0
+    combined.forEach((chunk) => {
+      append(lastIndex, chunk.start, false)
+      append(chunk.start, chunk.end, true)
+      lastIndex = chunk.end
+    })
+    append(lastIndex, text.length, false)
+  }
+
+  return allChunks
+}