playbook_ui 14.15.0.pre.rc.3 → 14.15.0

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

@@ -1,9 +1,10 @@
-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'
 import AsyncCreateableSelect from 'react-select/async-creatable'
-import { get, isString, uniqueId } from 'lodash'
+import { get, isString, uniqueId } from '../utilities/object'
+
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 
@@ -45,8 +46,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 +86,9 @@ const Typeahead = ({
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
+  optionsByContext = {},
+  searchContextSelector,
+  clearOnContextChange = false,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -115,6 +123,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/components/MultiValue.tsx

@@ -8,15 +8,17 @@ import { SelectValueType } from '../_typeahead'
 type Props = {
   data: SelectValueType,
   multiValueTemplate: any,
+  wrapped?: boolean,
   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",
   removeProps: any,
   selectProps: any,
 }
 
+
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate } = props.selectProps
+  const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -52,6 +54,7 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text=''
             truncate={truncate}
+            wrapped={wrapped}
             {...props}
         />
       }
@@ -66,6 +69,7 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text={label}
             truncate={truncate}
+            wrapped={wrapped}
             {...props}
         />
       }

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,14 @@ module Playbook
                       default: false
       prop :validation, type: Playbook::Props::HashProp,
                         default: {}
+      prop :wrapped, type: Playbook::Props::Boolean,
+                     default: false
+      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,12 +66,15 @@ 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
 
       def is_react?
-        pills || !is_multi
+        pills || !is_multi || wrapped
       end
 
       def typeahead_react_options
@@ -85,6 +96,10 @@ module Playbook
           placeholder: placeholder,
           plusIcon: plus_icon,
           truncate: truncate,
+          wrapped: wrapped,
+          searchContextSelector: search_context_selector,
+          optionsByContext: options_by_context,
+          clearOnContextChange: clear_on_context_change,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?

data/app/pb_kits/playbook/utilities/object.test.js

@@ -0,0 +1,99 @@
+import { isEmpty, get, isString, uniqueId, omitBy } from './object';
+
+describe('Lodash functions', () => {
+  describe('isEmpty', () => {
+    test('returns true for empty objects', () => {
+      expect(isEmpty({})).toBe(true);
+    });
+    test('returns true for empty arrays', () => {
+      expect(isEmpty([])).toBe(true);
+    });
+    test('returns false for non-empty objects', () => {
+      expect(isEmpty({ a: 1 })).toBe(false);
+    });
+    test('returns false for non-empty arrays', () => {
+      expect(isEmpty([1])).toBe(false);
+    });
+    test('returns true for null and undefined', () => {
+      expect(isEmpty(null)).toBe(true);
+      expect(isEmpty(undefined)).toBe(true);
+    });
+    test('returns false for non-object, non-array values', () => {
+      expect(isEmpty("hello")).toBe(false);
+      expect(isEmpty(123)).toBe(false);
+    });
+  });
+
+  describe('get', () => {
+    const obj = { a: { b: { c: 42 } }, arr: [{ x: 1 }, { y: 2 }] };
+
+    test('retrieves nested properties by dot path', () => {
+      expect(get(obj, 'a.b.c')).toBe(42);
+    });
+    test('returns default value if path does not exist', () => {
+      expect(get(obj, 'a.b.d', 'default')).toBe('default');
+    });
+    test('retrieves array values using bracket notation', () => {
+      expect(get(obj, 'arr[1].y')).toBe(2);
+    });
+    test('returns default for non-existent paths', () => {
+      expect(get(obj, 'non.existent.path', null)).toBe(null);
+    });
+  });
+
+  describe('isString', () => {
+    test('returns true for string literal', () => {
+      expect(isString('test')).toBe(true);
+    });
+    test('returns true for String object', () => {
+      expect(isString(new String('test'))).toBe(true);
+    });
+    test('returns false for non-string values', () => {
+      expect(isString(123)).toBe(false);
+      expect(isString(null)).toBe(false);
+      expect(isString({ a: 1 })).toBe(false);
+      expect(isString([ 'a','b','c' ])).toBe(false);
+    });
+  });
+
+  describe('uniqueId', () => {
+    test('generates unique ids without prefix', () => {
+      const id1 = uniqueId();
+      const id2 = uniqueId();
+      expect(id1).not.toBe(id2);
+      expect(Number(id1)).toBeLessThan(Number(id2));
+    });
+    test('generates unique ids with prefix', () => {
+      const id1 = uniqueId('id_');
+      const id2 = uniqueId('id_');
+      const id3 = uniqueId('id_');
+      expect(id1).not.toBe(id2);
+      expect(id1).not.toBe(id3);
+      expect(id2).not.toBe(id3);
+      expect(id1.startsWith('id_')).toBe(true);
+      expect(id2.startsWith('id_')).toBe(true);
+      expect(id3.startsWith('id_')).toBe(true);
+    });
+  });
+
+  describe('omitBy', () => {
+    test('omits keys for which predicate returns true', () => {
+      const obj = { a: 1, b: 2, c: 3 };
+      const isEven = value => value % 2 === 0;
+      const noEvenValues = omitBy(obj, isEven);
+      expect(noEvenValues).toEqual({ a: 1, c: 3 });
+    });
+    test('returns empty object for null input', () => {
+      expect(omitBy(null, () => true)).toEqual({});
+    });
+    test('returns empty object for non-object input', () => {
+      expect(omitBy("string", () => true)).toEqual({});
+    });
+    test('returns original object if predicate returns false for all keys', () => {
+      const obj = { a: 1, b: 2 };
+      const isBiggerThanFive = value => value >= 4;
+      const objWithSmallValues = omitBy(obj, isBiggerThanFive);
+      expect(objWithSmallValues).toEqual(obj);
+    });
+  });
+});

data/app/pb_kits/playbook/utilities/object.ts

@@ -1,3 +1,31 @@
 /* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
 
-export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1
+export const isEmpty = (obj: any) => [Object, Array].includes((obj || {}).constructor) && !Object.entries((obj || {})).length;
+
+export const get = <T, R = any>(obj: T, path: string, defaultValue?: R): R | any => {
+  const travel = (regexp: RegExp): any =>
+    String.prototype.split
+      .call(path, regexp)
+      .filter(Boolean)
+      .reduce((res: any, key: string) => (res !== null && res !== undefined ? res[key] : res), obj)
+  const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/)
+  return result === undefined || result === obj ? defaultValue : result
+}
+
+export const isString = (str: unknown): str is string =>
+  str != null && typeof (str as any).valueOf() === "string"
+
+export const uniqueId: (prefix?: string) => string = (() => {
+  let counter = 0
+  return (prefix = '') => `${prefix}${++counter}`
+})()
+
+export const omitBy = (obj: Record<string, any>, predicate: (value: any, key: string) => boolean) => {
+  if (obj === null || typeof obj !== 'object') return {}
+  return Object.keys(obj).reduce((result: Record<string, any>, key: string) => {
+    if (!predicate(obj[key], key)) {
+      result[key] = obj[key];
+    }
+    return result;
+  }, {})
+}