playbook_ui 14.14.0.pre.alpha.play1853typeaheadreacthookform6461 → 14.14.0.pre.alpha.play1868dependencyremovallodash6286

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -141,6 +141,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="right"] {
     box-shadow: -8px 0 28px 0 $tooltip_shadow;
+    margin: 0 0 0 $space_sm;
     .arrow {
       left: -18px;
       right: auto;
@@ -155,6 +156,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="bottom"] {
     box-shadow: 0 -12px 28px 0 $tooltip_shadow;
+    margin: $space_sm 0 0 0;
     .arrow {
       top: -18px;
       margin-bottom: 0;
@@ -167,6 +169,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="left"] {
     box-shadow: 8px 0 28px 0 $tooltip_shadow;
+    margin: 0 $space_sm 0 0;
     .arrow {
       margin-bottom: 0;
       right: -18px;

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

@@ -2,10 +2,8 @@ examples:
 
   rails:
   - tooltip_default: Default
-  - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
-  - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
 
   react:

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -11,7 +11,7 @@ const TOOLTIP_TIMEOUT = 250
 
 export default class PbTooltip extends PbEnhancedElement {
   static get selector() {
-    return '[data-pb-tooltip-kit="true"][data-pb-tooltip-interaction="false"]:not([data-pb-tooltip-delay-open]):not([data-pb-tooltip-delay-close])'
+    return '[data-pb-tooltip-kit]'
   }
 
   connect() {

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -7,10 +7,6 @@ module Playbook
       prop :trigger_element_selector
       prop :trigger_element_id, deprecated: true
       prop :tooltip_id
-      prop :interaction, type: Playbook::Props::Boolean,
-                         default: false
-      prop :delay_open
-      prop :delay_close
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
       prop :trigger_method, type: Playbook::Props::Enum,
@@ -22,19 +18,15 @@ module Playbook
       end
 
       def data
-        data = Hash(values[:data]).merge(
+        Hash(values[:data]).merge(
           pb_tooltip_kit: true,
           pb_tooltip_position: position,
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
           pb_tooltip_show_tooltip: true,
-          pb_tooltip_trigger_method: trigger_method,
-          pb_tooltip_interaction: interaction
+          pb_tooltip_trigger_method: trigger_method
         )
-        data = data.merge(pb_tooltip_delay_open: delay_open) if delay_open
-        data = data.merge(pb_tooltip_delay_close: delay_close) if delay_close
-        data
       end
 
     private

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -10,7 +10,8 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import treemap from 'highcharts/modules/treemap'
-import { merge } from 'lodash'
+import { merge} from '../utilities/object'
+
 
 type TreemapChartProps = {
   chartData: {
@@ -53,7 +54,7 @@ const TreemapChart = ({
   type = "treemap",
   ...props
 }: TreemapChartProps): React.ReactElement => {
-  
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -62,9 +63,9 @@ const TreemapChart = ({
     dark
       ? Highcharts.setOptions(highchartsDarkTheme)
       : Highcharts.setOptions(highchartsTheme);
-  };  
+  };
   treemap(Highcharts)
-  setupTheme();  
+  setupTheme();
 
   const staticOptions = {
     title: {

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?: any,
 } & 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,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -124,15 +123,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   )
 
   const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
-    if (onChange) {
-      const isReactHookForm = onChange.toString().includes("target")
-      if (isReactHookForm) {
-        onChange({ target: { name, value: _data } })
-      } else {
-        onChange(_data)
-      }
-    }
-    
     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 })
@@ -176,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/_typeahead_with_pills_async_custom_options.jsx

@@ -49,7 +49,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You added the user: "${value.label}"`)
+    alert(`You removed the user: "${value.label}"`)
   }
 
   return (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx

@@ -56,7 +56,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You added the user: "${value.label}"`)
+    alert(`You removed the user: "${value.label}"`)
   }
 
   return (

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.ts

@@ -1,3 +1,84 @@
 /* 🛠️ 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 map = <T, U>(
+  collection: T[] | Record<string, T> | null | undefined,
+  iteratee: (value: any, key: string, collection: T[] | Record<string, T>) => U
+): U[] => {
+  if (!collection) return []
+  const coerce = (val: any) => {
+    if (val === true) return val
+    if (
+      typeof val === "number" ||
+      typeof val === "string" ||
+      typeof val === "boolean" ||
+      val === null
+    )
+      return String(val)
+    return val
+  }
+  return Array.isArray(collection)
+    ? collection.map((v, i) => iteratee(coerce(v), String(i), collection))
+    : Object.keys(collection).map(key => iteratee(coerce(collection[key]), key, collection))
+}
+
+export const isString = (str: unknown): str is string =>
+  str != null && typeof (str as any).valueOf() === "string"
+
+export const omitBy = <T extends Record<string, any>>(
+  obj: T,
+  predicate: (value: T[keyof T], key: string) => boolean
+): Partial<T> => {
+  if (obj === null || typeof obj !== 'object') return {} as Partial<T>
+  return Object.keys(obj).reduce((result, key) => {
+    const typedKey = key as keyof T
+    if (!predicate(obj[typedKey], key)) {
+      result[typedKey] = obj[typedKey]
+    }
+    return result
+  }, {} as Partial<T>)
+}
+
+export const uniqueId: (prefix?: string) => string = (() => {
+  let counter = 0
+  return (prefix = '') => `${prefix}${++counter}`
+})()
+
+type PlainObject = { [key: string]: any }
+
+const isObject = (item: any): item is PlainObject =>
+  item !== null && typeof item === 'object'
+
+export const merge = <T extends PlainObject>(
+  target: T,
+  ...sources: PlainObject[]
+): T => {
+  if (!sources.length) return target
+  const source = sources.shift()!
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach((key: string) => {
+      const typedKey = key as keyof T
+      const srcValue = source[key]
+      if (isObject(srcValue)) {
+        if (!target[typedKey]) {
+          target[typedKey] = (Array.isArray(srcValue) ? [] : {}) as unknown as T[typeof typedKey]
+        }
+        merge(target[typedKey], srcValue)
+      } else {
+        target[typedKey] = srcValue
+      }
+    })
+  }
+  return merge(target, ...sources)
+}