playbook_ui 14.14.0.pre.rc.5 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700

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/tokens/_display.scss

@@ -4,10 +4,12 @@ $display_inline_block: inline-block !default;
 $display_flex: flex !default;
 $display_none: none !default;
 $display_inline_flex: inline-flex !default;
+$display_grid: grid !default;
 $displays: (
   display_none:   $display_none,
   display_flex: $display_flex,
   display_inline: $display_inline,
   display_inline_block: $display_inline_block,
-  display_block: $display_block
+  display_block: $display_block,
+  display_grid: $display_grid
 );

data/app/pb_kits/playbook/utilities/_display.scss

@@ -24,13 +24,18 @@
     display: none;
 }
 
+.display_grid {
+    display: grid;
+}
+
 $display_values: (
     none: $display_none,
     flex: $display_flex,
     inline: $display_inline,
     inline_block: $display_inline_block,
     inline_flex: $display_inline_flex,
-    block: $display_block
+    block: $display_block,
+    grid: $display_grid
 );
 
 // using a grid here

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;
+  }, {})
+}

data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js

@@ -9,7 +9,7 @@ const testSubject = 'body'
 
 // %w[block inline_block inline flex inline_flex none]
 test('Global Props: returns proper class name', () => {
-  const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none"]
+  const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none", "grid" ]
   for(let x = 0, y = propValues.length; x < y; ++x) {
     const testId = `${testSubject}-${propValues[x]}`
     render(