playbook_ui 14.14.0.pre.alpha.play1853typeaheadreacthookform6373 → 14.14.0.pre.alpha.play1868dependencyremovallodash6413

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

@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react'
+import React 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'
 
@@ -47,7 +48,6 @@ type TypeaheadProps = {
   name?: 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",
-  onChange?: (event: React.FormEvent<HTMLInputElement> | null) => void,
 } & GlobalProps
 
 export type SelectValueType = {
@@ -67,7 +67,8 @@ type TagOnChangeValues = {
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
-const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
+
+const Typeahead = ({
   async,
   className,
   components = {},
@@ -78,11 +79,9 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   getOptionValue,
   htmlOptions = {},
   id,
-  name,
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
-  onChange = () => { void 0 },
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -124,8 +123,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   )
 
   const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
-    onChange({ target: { name: name, value: _data } } as unknown as React.ChangeEvent<HTMLInputElement>)
-    
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -169,11 +166,10 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       />
     </div>
   )
-})
+}
 
 Object.keys(kitComponents).forEach((k) => {
   (Typeahead as GenericObject)[k] = (kitComponents as {[key: string]: unknown})[k]
 })
 
-Typeahead.displayName = 'Typeahead'
 export default Typeahead

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

@@ -15,7 +15,6 @@ examples:
 
   react:
     - typeahead_default: Default
-    - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
     - typeahead_with_pills_async: With Pills (Async Data)

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

@@ -13,4 +13,3 @@ export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_lis
 export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
-export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'

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