playbook_ui 16.13.0.pre.rc.2 → 16.13.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d2a2e44dfde6c577166c36140a612798ecf4f3106169edd3120e744c9c962a3
-  data.tar.gz: c73ab3491df19d80e5e72ae9d790ee91ed2874c6558e04ddbf2f6d184704c719
+  metadata.gz: 064a383e9d8fb6d5bb028d1343d3f2ba9dd4bf6eaed25dba6e74761d62f972ec
+  data.tar.gz: 668a7db3525d0b9f67e4b190f07dcb5108aec8d189e1980c2ea02ba23938e71f
 SHA512:
-  metadata.gz: 6055ea0b1901f561eb1852420b5a06f8fd040f4711d3c687c21fccc3dc7504b55e6b0512f27e15ff1c94783e6a4bf2e6e09ee41a8914931249dc3e1103e804e3
-  data.tar.gz: fe309cf65d1080f4e3ee3359d9db8145778e159359eef4af5cf92630a48ac486641a4d0f462f782254ac2e0321d9f358257781f072fae921c1eedb443937d753
+  metadata.gz: 858dbdb201bb04117d664d5052fa441d057ab42ae7cf7ce76df084428e1b3cec8f3b8f64a55a77433a2d168614f55c4663e35b97310c736113d99b1e340f5688
+  data.tar.gz: 0bcec11c51a3da8a729a931da49a416d06d729de3ad508bfba63e6817857fe3a8b9faa84c982163bf8bd979979054d80f267ac514d72177695b873578805fd42

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
+}

data/app/pb_kits/playbook/pb_highlight/highlight.test.jsx

@@ -0,0 +1,263 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Highlight from './_highlight'
+import Body from '../pb_body/_body'
+import { findHighlightChunks } from './_highlightChunks'
+
+describe('findHighlightChunks', () => {
+  test('returns a single non-highlight chunk when there are no matches', () => {
+    expect(findHighlightChunks('hello world', ['missing'])).toEqual([
+      { start: 0, end: 11, highlight: false },
+    ])
+  })
+
+  test('finds a single search term case-insensitively', () => {
+    expect(findHighlightChunks('Hello World', ['world'])).toEqual([
+      { start: 0, end: 6, highlight: false },
+      { start: 6, end: 11, highlight: true },
+    ])
+  })
+
+  test('finds multiple matches of the same term', () => {
+    expect(findHighlightChunks('foo bar foo', ['foo'])).toEqual([
+      { start: 0, end: 3, highlight: true },
+      { start: 3, end: 8, highlight: false },
+      { start: 8, end: 11, highlight: true },
+    ])
+  })
+
+  test('finds multiple search terms', () => {
+    expect(findHighlightChunks('red and blue', ['red', 'blue'])).toEqual([
+      { start: 0, end: 3, highlight: true },
+      { start: 3, end: 8, highlight: false },
+      { start: 8, end: 12, highlight: true },
+    ])
+  })
+
+  test('merges overlapping matches into one highlight chunk', () => {
+    expect(findHighlightChunks('highlight', ['high', 'highlight'])).toEqual([
+      { start: 0, end: 9, highlight: true },
+    ])
+  })
+
+  test('merges adjacent matches into one highlight chunk', () => {
+    expect(findHighlightChunks('foobar', ['foo', 'bar'])).toEqual([
+      { start: 0, end: 6, highlight: true },
+    ])
+  })
+
+  test('matches regex special characters literally', () => {
+    expect(findHighlightChunks('cost is $5.00 (approx)', ['$5.00', '(approx)'])).toEqual([
+      { start: 0, end: 8, highlight: false },
+      { start: 8, end: 13, highlight: true },
+      { start: 13, end: 14, highlight: false },
+      { start: 14, end: 22, highlight: true },
+    ])
+  })
+
+  test('ignores empty search terms', () => {
+    expect(findHighlightChunks('hello', ['', 'hello'])).toEqual([
+      { start: 0, end: 5, highlight: true },
+    ])
+  })
+})
+
+describe('Highlight', () => {
+  test('highlights a single search term from the text prop', () => {
+    render(
+      <Highlight
+          data={{ testid: 'highlight-single' }}
+          highlightedText={['Highlight']}
+          text="This is the Highlight Kit."
+      />
+    )
+
+    const kit = screen.getByTestId('highlight-single')
+    const marks = kit.querySelectorAll('mark')
+
+    expect(marks).toHaveLength(1)
+    expect(marks[0]).toHaveTextContent('Highlight')
+    expect(marks[0]).toHaveClass('pb_highlight_kit')
+    expect(kit).toHaveTextContent('This is the Highlight Kit.')
+  })
+
+  test('highlights content passed via children', () => {
+    render(
+      <Highlight
+          data={{ testid: 'highlight-children' }}
+          highlightedText={['children']}
+      >
+        Content via children works.
+      </Highlight>
+    )
+
+    const kit = screen.getByTestId('highlight-children')
+    const marks = kit.querySelectorAll('mark')
+
+    expect(marks).toHaveLength(1)
+    expect(marks[0]).toHaveTextContent('children')
+    expect(kit).toHaveTextContent('Content via children works.')
+  })
+
+  test('highlights multiple search terms and multiple matches', () => {
+    render(
+      <Highlight
+          data={{ testid: 'highlight-multi' }}
+          highlightedText={['cat', 'dog']}
+          text="cat and dog and cat"
+      />
+    )
+
+    const kit = screen.getByTestId('highlight-multi')
+    const marks = Array.from(kit.querySelectorAll('mark')).map((mark) => mark.textContent)
+
+    expect(marks).toEqual(['cat', 'dog', 'cat'])
+  })
+
+  test('merges overlapping or adjacent matches into one mark', () => {
+    render(
+      <Highlight
+          data={{ testid: 'highlight-merge' }}
+          highlightedText={['foo', 'bar']}
+          text="foobar"
+      />
+    )
+
+    const kit = screen.getByTestId('highlight-merge')
+    const marks = kit.querySelectorAll('mark')
+
+    expect(marks).toHaveLength(1)
+    expect(marks[0]).toHaveTextContent('foobar')
+  })
+
+  test('renders without marks when there are no matches', () => {
+    render(
+      <Highlight
+          data={{ testid: 'highlight-none' }}
+          highlightedText={['missing']}
+          text="nothing to see"
+      />
+    )
+
+    const kit = screen.getByTestId('highlight-none')
+
+    expect(kit.querySelectorAll('mark')).toHaveLength(0)
+    expect(kit).toHaveTextContent('nothing to see')
+  })
+
+  test('matches case-insensitively', () => {
+    render(
+      <Highlight
+          data={{ testid: 'highlight-case' }}
+          highlightedText={['highlight']}
+          text="HiGhLiGhT text"
+      />
+    )
+
+    const kit = screen.getByTestId('highlight-case')
+    const marks = kit.querySelectorAll('mark')
+
+    expect(marks).toHaveLength(1)
+    expect(marks[0]).toHaveTextContent('HiGhLiGhT')
+  })
+
+  test('matches regex special characters literally', () => {
+    render(
+      <Highlight
+          data={{ testid: 'highlight-regex' }}
+          highlightedText={['a+b', '(x)', 'file.js']}
+          text="use a+b or (x) in file.js"
+      />
+    )
+
+    const kit = screen.getByTestId('highlight-regex')
+    const marks = Array.from(kit.querySelectorAll('mark')).map((mark) => mark.textContent)
+
+    expect(marks).toEqual(['a+b', '(x)', 'file.js'])
+  })
+
+  test('passes id and htmlOptions through to the wrapper', () => {
+    render(
+      <Highlight
+          data={{ testid: 'highlight-attrs' }}
+          htmlOptions={{ 'aria-label': 'highlighted content' }}
+          id="highlight-id"
+          text="highlight me"
+      />
+    )
+
+    const kit = screen.getByTestId('highlight-attrs')
+
+    expect(kit).toHaveAttribute('id', 'highlight-id')
+    expect(kit).toHaveAttribute('aria-label', 'highlighted content')
+  })
+
+  test('uses the default highlightedText of highlight when omitted', () => {
+    render(
+      <Highlight
+          data={{ testid: 'highlight-default' }}
+          text="default highlight behavior"
+      />
+    )
+
+    const kit = screen.getByTestId('highlight-default')
+    const marks = kit.querySelectorAll('mark')
+
+    expect(marks).toHaveLength(1)
+    expect(marks[0]).toHaveTextContent('highlight')
+  })
+})
+
+describe('Body with highlighting', () => {
+  test('renders Highlight for matching text via text prop', () => {
+    render(
+      <Body
+          data={{ testid: 'body-highlight' }}
+          highlightedText={['highlighted', 'Body Kit']}
+          highlighting
+          text="This is text highlighted in the Body Kit."
+      />
+    )
+
+    const kit = screen.getByTestId('body-highlight')
+    const marks = Array.from(kit.querySelectorAll('mark')).map((mark) => mark.textContent)
+
+    expect(kit).toHaveClass('pb_body_kit')
+    expect(marks).toEqual(['highlighted', 'Body Kit'])
+    expect(kit).toHaveTextContent('This is text highlighted in the Body Kit.')
+  })
+
+  test('renders Highlight for matching text via children', () => {
+    render(
+      <Body
+          data={{ testid: 'body-highlight-children' }}
+          highlightedText={['children']}
+          highlighting
+      >
+        Body with children highlight
+      </Body>
+    )
+
+    const kit = screen.getByTestId('body-highlight-children')
+    const marks = kit.querySelectorAll('mark')
+
+    expect(marks).toHaveLength(1)
+    expect(marks[0]).toHaveTextContent('children')
+  })
+
+  test('does not highlight when highlighting is false', () => {
+    render(
+      <Body
+          data={{ testid: 'body-no-highlight' }}
+          highlightedText={['highlighted']}
+          text="This is text highlighted in the Body Kit."
+      />
+    )
+
+    const kit = screen.getByTestId('body-no-highlight')
+
+    expect(kit.querySelectorAll('mark')).toHaveLength(0)
+    expect(kit).toHaveTextContent('This is text highlighted in the Body Kit.')
+  })
+})

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -1,3 +1,3 @@
 <%= pb_content_tag do %>
-     <%= helpers.will_paginate object.model, renderer: Playbook::Pagination::Rails %>
+     <%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
 <% end %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb

@@ -158,5 +158,5 @@
 
 <%# Module script: rich_text_editor_rails.js %>
 <script type="module">
-<%= ::File.read(Playbook.kit_path("rich_text_editor", "rich_text_editor_rails.js")).html_safe %>
+<%= File.read(Playbook.kit_path("rich_text_editor", "rich_text_editor_rails.js")).html_safe %>
 </script>

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -44,7 +44,8 @@
           color: $input_text_active;
         }
       }
-      .text_input {
+      // React select control only — Rails <input class="text_input"> must keep max-height: 45px
+      div.text_input {
         max-height: none;
       }
       & > input:first-child {
@@ -142,6 +143,7 @@
       &__control {
         &--is-disabled {
           background-color: $input_background_disabled;
+          border-color: $input_border_disabled;
         }
         &--is-focused {
           @include pb_textarea_focus;

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -24,6 +24,7 @@
         required_indicator: object.required_indicator,
         id: object.input_options[:id],
         dark: object.dark,
+        disabled: object.disabled,
       }) %>
       <%= pb_rails("list", props: { ordered: false, borderless: true, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
       <% end %>

data/app/pb_kits/playbook/pb_user_badge/user_badge.rb

@@ -16,7 +16,11 @@ module Playbook
 
       def display_badge
         @display_badge ||= begin
-          badge_path = Playbook.kit_path("user_badge", "badges", "#{badge}.svg")
+          badge_path = File.join(
+            File.dirname(self.class.source_location),
+            "badges",
+            "#{badge}.svg"
+          )
           File.read(badge_path).html_safe
         end
       end