playbook_ui 14.14.0.pre.alpha.play1755pbcontenttag6464 → 14.14.0.pre.alpha.play1755pbcontenttag6477

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a0dfdbe65861c574c5ae3d71fe1b145da7b3242135041cb8f4dfa204fb8a1d0
-  data.tar.gz: 66ac870918f75471d9b3320be3c72cdedd1b110bbdcb520c75e2bd3850fa4740
+  metadata.gz: 8ef906cdde886008e185c13657433fa51118dcc3bfa87c710f34d9047e2d1b8f
+  data.tar.gz: b737b42a1fb810c3c03130f79ca450ef0afcc073f4c8e5118ea2ddd848fb5f8b
 SHA512:
-  metadata.gz: 6dcf36d3f70ec676e2f309170afe4e16e3a577e494a7d68c47add383970de0b5ca5ec8f33047973b936341d3bb1d025d68f8ed17984b7aec65f86828cbd0a544
-  data.tar.gz: f01907111bf029a002058b95af1c5118f539904adcf140b4d3cdebd1d0a97374d785744b9a54b1881df23e1b93333d447502c72e6261ba645af8da8bb13f7e87
+  metadata.gz: 2bb8e2859b564ab83a8043ce2cdeb03643a46f2a11de162d4d924d038669abcaee163f76e24f45ac1ecc85a047380248e77c739049f69797d53dd4d4185286c5
+  data.tar.gz: 22ffeb839f0d4e54803860e19d092002b6faa2f89710f231e704cc21142b35e70b2fb8b775b7fd0929c7f15eb9a1d116fc1f216c993cb3f39dc71add6ff60b78

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -1,8 +1,6 @@
 <%= pb_content_tag(:div,
-  aria: object.aria,
-  data: object.data,
-  class: object.classnames,
-  **combined_html_options) do %>
+  id: nil,
+  class: object.classnames ) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
       <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect} from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
@@ -45,8 +45,12 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => string),
   getOptionValue?: string | (() => string),
   name?: string,
+  options?: Array<{ label: string; value?: string }>,
   marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
+  optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
+  searchContextSelector?: string,
+  clearOnContextChange?: boolean,
 } & GlobalProps
 
 export type SelectValueType = {
@@ -81,6 +85,9 @@ const Typeahead = ({
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
+  optionsByContext = {},
+  searchContextSelector,
+  clearOnContextChange = false,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -115,6 +122,32 @@ const Typeahead = ({
     ...props,
   }
 
+  const [contextValue, setContextValue] = useState("")
+
+  useEffect(() => {
+    if (searchContextSelector) {
+      const searchContextElement = document.getElementById(searchContextSelector)
+
+      setContextValue((searchContextElement as HTMLInputElement)?.value)
+      const handleContextChange = (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        setContextValue(target.value);
+        if (clearOnContextChange) document.dispatchEvent(new CustomEvent(`pb-typeahead-kit-${selectProps.id}:clear`))
+      }
+
+      if (searchContextElement) searchContextElement.addEventListener('change', handleContextChange)
+
+      return () => {
+        if (searchContextElement) searchContextElement.removeEventListener('change', handleContextChange)
+      }
+    }
+  }, [searchContextSelector])
+
+  const contextArray = optionsByContext[contextValue]
+  if (Array.isArray(contextArray) && contextArray.length > 0) {
+    selectProps.options = contextArray
+  }
+
   const Tag = (
     createable
       ? (async ? AsyncCreateableSelect : CreateableSelect)

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb

@@ -0,0 +1,45 @@
+<%= pb_rails("select", props: {
+  id:"color_context_2",
+  label: "Choose a Color",
+  name: "color_name",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" }
+  ],
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  label: "Pick a Shade",
+  is_multi: false,
+  search_context_selector: "color_context_2",
+  options_by_context: {
+    "red":  [
+      { label: "Scarlet", value: "scarlet" },
+      { label: "Mahogany", value: "mahogany" },
+      { label: "Crimson", value: "crimson" }
+    ],
+    "blue": [
+      { label: "Sky Blue", value: "sky" },
+      { label: "Cerulean", value: "cerulean" },
+      { label: "Navy", value: "navy" }
+    ],
+    "green": [
+      { label: "Emerald", value: "emerald" },
+      { label: "Mint", value: "mint" },
+      { label: "Olive", value: "olive" }
+    ]
+  },
+  id: "typeahead-dynamic-options",
+}) %>
+
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md

@@ -0,0 +1,5 @@
+You can also set up a typeahead to render options dynamically based on input from a select. To achieve this:
+- The typeahead must have a unique `id`
+- Use the `search_context_selector` prop on the typeahead. The value here must match the id of the select so the Typeahead knows where to read the current "context" from.
+- Use `options_by_context` to pass in a hash whose keys match the possible values of your “context” select. Each key maps to an array of { label, value } objects. The typeahead automatically displays only the subset of options matching the current context.
+- Additionally, the optional `clear_on_context_change` prop controls whether the typeahead clears or not when a change happens in the linked select. This prop is set to true by default so that whenever a selection is made in the select, the Typeahead automatically clears its current input/selection.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("select", props: {
+  id:"color_context",
+  label: "Choose a Color",
+  name: "color_name_2",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" }
+  ],
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  label: "Pick a Shade",
+  search_context_selector: "color_context",
+  options_by_context: {
+    "red":  [
+      { label: "Scarlet", value: "scarlet" },
+      { label: "Mahogany", value: "mahogany" },
+      { label: "Crimson", value: "crimson" }
+    ],
+    "blue": [
+      { label: "Sky Blue", value: "sky" },
+      { label: "Cerulean", value: "cerulean" },
+      { label: "Navy", value: "navy" }
+    ],
+    "green": [
+      { label: "Emerald", value: "emerald" },
+      { label: "Mint", value: "mint" },
+      { label: "Olive", value: "olive" }
+    ]
+  },
+  search_term_minimum_length: 0,
+}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md

@@ -0,0 +1,3 @@
+The dynamic rendering of options for the typeahead can also be achieved with a pure Rails implementation (not react rendered). For this implementation, use all the props as above with the following additions:
+
+- `search_term_minimum_length`: this sets the minimum input in the typeahead needed to display the dropdown. This is set to 3 by default. Set it to 0 for the dropdown to always display when the typeahead is interacted with. 

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

@@ -12,6 +12,8 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
+    - typeahead_dynamic_options: Dynamic Options
+    - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
 
   react:
     - typeahead_default: Default

data/app/pb_kits/playbook/pb_typeahead/index.ts

@@ -20,6 +20,34 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.searchInput.addEventListener('focus', () => this.debouncedSearch())
     this.searchInput.addEventListener('input', () => this.debouncedSearch())
     this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
+
+    if (this.clearOnContextChange && this.searchContextElement) {
+      this.searchContextElement.addEventListener('change', () => {
+        this.searchInputClear()
+        this.resultsCacheClear()
+        this.clearResults()
+      })
+    }
+  }
+
+  get optionsByContext() {
+    return (this.element as HTMLElement).dataset.pbTypeaheadKitOptionsByContext
+      ? JSON.parse((this.element as HTMLElement).dataset.pbTypeaheadKitOptionsByContext)
+      : null
+  }
+
+  get searchContextElement() {
+    const selector = (this.element as HTMLElement).dataset.pbTypeaheadKitSearchContextSelector
+    if (!selector) return null
+
+    const found = this.element.parentNode?.querySelector(`#${selector}`)
+      || this.element.closest(selector)
+
+    return found || null
+  }
+
+  get clearOnContextChange() {
+    return (this.element as HTMLElement).dataset.pbTypeaheadKitClearOnContextChange === 'true'
   }
 
   handleKeydown(event: KeyboardEvent) {
@@ -40,14 +68,32 @@ export default class PbTypeahead extends PbEnhancedElement {
 
     const searchTerm = this.searchTerm
     const searchContext = this.searchContext
-    const search = {
-      searchingFor: searchTerm,
-      searchingContext: searchContext,
-      setResults: (results: Array<DocumentFragment>) => {
-        this.resultsCacheUpdate(searchTerm, searchContext, results)
-      },
+
+    if (this.optionsByContext && Object.keys(this.optionsByContext).length > 0) {
+      const contextArray = this.optionsByContext[searchContext] || []
+
+      const filteredResults = contextArray.filter((obj: { label: string, value: string }) => {
+        return obj.label
+          && obj.label.toLowerCase().includes(searchTerm.toLowerCase())
+      })
+
+       const optionFragments = filteredResults.map((obj: { label: string, value: string }) => {
+      const singleOption = document.createDocumentFragment()
+      singleOption.appendChild(document.createTextNode(obj.label))
+      return singleOption
+    })
+
+      this.resultsCacheUpdate(searchTerm, searchContext, optionFragments)
+    } else {
+      const search = {
+        searchingFor: searchTerm,
+        searchingContext: searchContext,
+        setResults: (results: Array<DocumentFragment>) => {
+          this.resultsCacheUpdate(searchTerm, searchContext, results)
+        },
+      }
+      this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
     }
-    this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
   }
 
   resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>) {
@@ -87,11 +133,15 @@ export default class PbTypeahead extends PbEnhancedElement {
     const resultOption = (event.target as Element).closest('[data-result-option-item]')
     if (!resultOption) return
 
+    const selectedText = resultOption.textContent.trim()
+
     this._validSelection = true
     this.removeValidationError()
 
+    if (this.searchContextElement) this.searchInput.value = selectedText
+
     this.resultsCacheClear()
-    this.searchInputClear()
+    if (!this.searchContextElement) this.searchInputClear()
     this.clearResults()
 
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
@@ -173,6 +223,9 @@ export default class PbTypeahead extends PbEnhancedElement {
       this.element.parentNode.querySelector(selector) ||
       this.element.closest(selector)
     ) as HTMLInputElement).value
+    else if (this.searchContextElement) {
+      return (this.searchContextElement as HTMLInputElement).value
+    }
 
     return null
   }

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -44,6 +44,12 @@ module Playbook
                       default: false
       prop :validation, type: Playbook::Props::HashProp,
                         default: {}
+      prop :clear_on_context_change, type: Playbook::Props::Boolean,
+                                     default: true
+      prop :options_by_context, type: Playbook::Props::HashProp,
+                                default: {}
+      prop :search_context_selector, type: Playbook::Props::String,
+                                     default: nil
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -58,7 +64,10 @@ module Playbook
         Hash(values[:data]).merge(
           pb_typeahead_kit: true,
           pb_typeahead_kit_search_term_minimum_length: search_term_minimum_length,
-          pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
+          pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout,
+          pb_typeahead_kit_clear_on_context_change: clear_on_context_change,
+          pb_typeahead_kit_search_context_selector: search_context_selector,
+          pb_typeahead_kit_options_by_context: options_by_context.to_json
         )
       end
 
@@ -85,6 +94,9 @@ module Playbook
           placeholder: placeholder,
           plusIcon: plus_icon,
           truncate: truncate,
+          searchContextSelector: search_context_selector,
+          optionsByContext: options_by_context,
+          clearOnContextChange: clear_on_context_change,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?