playbook_ui 14.14.0.pre.alpha.play1868dependencyremovallodash6286 → 14.14.0.pre.alpha.play1872verticaltimelineresponsiveissue6409

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

@@ -0,0 +1,282 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+import { computePosition, offset, flip, shift, arrow, autoUpdate } from '@floating-ui/dom'
+
+const TOOLTIP_OFFSET = 20
+const TOOLTIP_TIMEOUT = 250
+const SAFE_ZONE_MARGIN = 1
+
+export default class PbTooltipFloatingUi extends PbEnhancedElement {
+  static get selector() {
+    return '[data-pb-tooltip-kit="true"][data-pb-tooltip-delay-open], [data-pb-tooltip-kit="true"][data-pb-tooltip-delay-close], [data-pb-tooltip-kit="true"][data-pb-tooltip-interaction="true"]'
+  }
+
+  connect() {
+    if (this.tooltipInteraction) {
+      document.addEventListener('mousemove', (e) => {
+        this.lastMouseX = e.clientX
+        this.lastMouseY = e.clientY
+      })
+    }
+    
+    this.triggerElements.forEach((trigger) => {
+      const method = this.triggerMethod
+      const interactionEnabled = this.tooltipInteraction
+
+      if (method === 'click') {
+        trigger.addEventListener('click', () => {
+          this.showTooltip(trigger)
+        })
+      } else {
+        trigger.addEventListener('mouseenter', () => {
+          clearSafeZoneListener(this)
+          clearTimeout(this.mouseleaveTimeout)
+          this.currentTrigger = trigger
+          const delayOpen = this.delayOpen ? parseInt(this.delayOpen) : TOOLTIP_TIMEOUT
+          this.mouseenterTimeout = setTimeout(() => {
+            this.showTooltip(trigger)
+            if (interactionEnabled) {
+              this.checkCloseTooltip(trigger)
+            }
+          }, delayOpen)
+        })
+
+        trigger.addEventListener('mouseleave', () => {
+          clearTimeout(this.mouseenterTimeout)
+          if (this.delayClose) {
+            const delayClose = parseInt(this.delayClose)
+            this.mouseleaveTimeout = setTimeout(() => {
+              if (interactionEnabled) {
+                this.attachSafeZoneListener()
+              } else {
+                this.hideTooltip()
+              }
+            }, delayClose)
+          } else {
+            if (interactionEnabled) {
+              this.attachSafeZoneListener()
+            } else {
+              this.hideTooltip()
+            }
+          }
+        })
+
+        if (interactionEnabled) {
+          this.tooltip.addEventListener('mouseenter', () => {
+            clearSafeZoneListener(this)
+          })
+
+          this.tooltip.addEventListener('mouseleave', () => {
+            this.attachSafeZoneListener()
+          })
+        }
+      }
+    })
+  }
+
+  attachSafeZoneListener() {
+    clearSafeZoneListener(this)
+    this.safeZoneHandler = (e) => {
+      if (!this.currentTrigger) return
+      const triggerRect = this.currentTrigger.getBoundingClientRect()
+      const tooltipRect = this.tooltip.getBoundingClientRect()
+      const safeRect = getSafeZone(triggerRect, tooltipRect, this.position, SAFE_ZONE_MARGIN)
+      if (!isPointInsideRect(e.clientX, e.clientY, safeRect)) {
+        this.hideTooltip()
+        clearSafeZoneListener(this)
+      }
+    }
+    document.addEventListener('mousemove', this.safeZoneHandler)
+  }
+
+  checkCloseTooltip(trigger) {
+    document.querySelector('body').addEventListener('click', ({ target }) => {
+      const isTooltip = target.closest(`#${this.tooltipId}`) === this.tooltip
+      const isTrigger = target.closest(this.triggerElementSelector) === trigger
+      if (isTrigger || isTooltip) {
+        this.checkCloseTooltip(trigger)
+      } else {
+        this.hideTooltip()
+      }
+    }, { once: true })
+  }
+
+  showTooltip(trigger) {
+    if (this.shouldShowTooltip === 'false') return
+
+    clearSafeZoneListener(this)
+
+    this.tooltip.style.opacity = '1'
+    this.tooltip.style.visibility = 'visible'
+    this.tooltip.style.pointerEvents = 'auto'
+
+    if (this.cleanup) {
+      this.cleanup()
+    }
+
+    const arrowElement = document.querySelector(`#${this.tooltipId}-arrow`)
+
+    this.cleanup = autoUpdate(trigger, this.tooltip, () => {
+      computePosition(trigger, this.tooltip, {
+        placement: this.position,
+        strategy: 'fixed',
+        middleware: [
+          offset({ mainAxis: TOOLTIP_OFFSET, crossAxis: 0 }),
+          flip(),
+          shift(),
+          arrow({ element: arrowElement })
+        ],
+      }).then(({ x, y, placement, middlewareData }) => {
+        Object.assign(this.tooltip.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+          position: 'fixed'
+        })
+        this.tooltip.setAttribute('data-popper-placement', placement)
+        if (arrowElement && middlewareData.arrow) {
+          const { x: arrowX, y: arrowY } = middlewareData.arrow
+          Object.assign(arrowElement.style, {
+            left: arrowX != null ? `${arrowX}px` : '',
+            top: arrowY != null ? `${arrowY}px` : '',
+            position: 'absolute'
+          })
+        }
+      })
+    })
+
+    this.tooltip.classList.add('show')
+
+    if (this.triggerMethod === 'click') {
+      clearTimeout(this.autoHideTimeout)
+      this.autoHideTimeout = setTimeout(() => {
+        this.hideTooltip()
+      }, 1000)
+    }
+  }
+
+  hideTooltip() {
+    if (!this.tooltip) return
+
+    this.tooltip.classList.add('fade_out')
+    setTimeout(() => {
+      if (this.cleanup) {
+        this.cleanup()
+        this.cleanup = null
+      }
+      this.tooltip.classList.remove('show')
+      this.tooltip.classList.remove('fade_out')
+      this.tooltip.style.opacity = '0'
+      this.tooltip.style.visibility = 'hidden'
+      this.tooltip.style.pointerEvents = 'none'
+      this.tooltip.style.position = ''
+      this.tooltip.style.top = ''
+      this.tooltip.style.left = ''
+      this.tooltip.style.transform = ''
+    }, TOOLTIP_TIMEOUT)
+  }
+
+  get triggerElements() {
+    let triggerEl
+    if (this.triggerElementId) {
+      triggerEl = document.querySelector(`#${this.triggerElementId}`)
+    } else if (this.triggerElementSelector) {
+      const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
+      triggerEl = selectorIsId
+        ? document.querySelector(this.triggerElementSelector)
+        : document.querySelectorAll(this.triggerElementSelector)
+    } else {
+      triggerEl = this.element
+    }
+    if (!triggerEl) {
+      console.error('Tooltip Kit: No valid trigger element found!')
+      return []
+    }
+    if (triggerEl.length === undefined) {
+      triggerEl = [triggerEl]
+    }
+    return triggerEl
+  }
+
+  get tooltip() {
+    return (this._tooltip = this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
+  }
+
+  get position() {
+    return this.element.dataset.pbTooltipPosition
+  }
+
+  get triggerElementId() {
+    return this.element.dataset.pbTooltipTriggerElementId
+  }
+
+  get tooltipId() {
+    return this.element.dataset.pbTooltipTooltipId
+  }
+
+  get triggerElementSelector() {
+    return this.element.dataset.pbTooltipTriggerElementSelector
+  }
+
+  get shouldShowTooltip() {
+    return this.element.dataset.pbTooltipShowTooltip
+  }
+
+  get triggerMethod() {
+    return this.element.dataset.pbTooltipTriggerMethod || 'hover'
+  }
+
+  get tooltipInteraction() {
+    return this.element.dataset.pbTooltipInteraction === 'true'
+  }
+  
+  get delayOpen() {
+    return this.element.dataset.pbTooltipDelayOpen
+  }
+  
+  get delayClose() {
+    return this.element.dataset.pbTooltipDelayClose
+  }
+}
+
+function clearSafeZoneListener(context) {
+  if (context.safeZoneHandler) {
+    document.removeEventListener('mousemove', context.safeZoneHandler)
+    context.safeZoneHandler = null
+  }
+}
+
+function getSafeZone(triggerRect, tooltipRect, placement, margin) {
+  let safeRect = {}
+  if (placement.startsWith('top')) {
+    safeRect.left = triggerRect.left - margin
+    safeRect.right = triggerRect.right + margin
+    safeRect.top = tooltipRect.bottom - margin
+    safeRect.bottom = triggerRect.top + margin
+  } else if (placement.startsWith('bottom')) {
+    safeRect.left = triggerRect.left - margin
+    safeRect.right = triggerRect.right + margin
+    safeRect.top = triggerRect.bottom - margin
+    safeRect.bottom = tooltipRect.top + margin
+  } else if (placement.startsWith('left')) {
+    safeRect.top = triggerRect.top - margin
+    safeRect.bottom = triggerRect.bottom + margin
+    safeRect.left = tooltipRect.right - margin
+    safeRect.right = triggerRect.left + margin
+  } else if (placement.startsWith('right')) {
+    safeRect.top = triggerRect.top - margin
+    safeRect.bottom = triggerRect.bottom + margin
+    safeRect.left = triggerRect.right - margin
+    safeRect.right = tooltipRect.left + margin
+  } else {
+    safeRect = {
+      left: triggerRect.left - margin,
+      right: triggerRect.right + margin,
+      top: triggerRect.top - margin,
+      bottom: triggerRect.bottom + margin,
+    }
+  }
+  return safeRect
+}
+
+function isPointInsideRect(x, y, rect) {
+  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+}

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]'
+    return '[data-pb-tooltip-kit="true"][data-pb-tooltip-interaction="false"]:not([data-pb-tooltip-delay-open]):not([data-pb-tooltip-delay-close])'
   }
 
   connect() {

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

@@ -7,6 +7,10 @@ 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,
@@ -18,15 +22,19 @@ module Playbook
       end
 
       def data
-        Hash(values[:data]).merge(
+        data = 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_trigger_method: trigger_method,
+          pb_tooltip_interaction: interaction
         )
+        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,8 +10,7 @@ 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 '../utilities/object'
-
+import { merge } from 'lodash'
 
 type TreemapChartProps = {
   chartData: {
@@ -54,7 +53,7 @@ const TreemapChart = ({
   type = "treemap",
   ...props
 }: TreemapChartProps): React.ReactElement => {
-
+  
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -63,9 +62,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

@@ -3,8 +3,7 @@ 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 '../utilities/object'
-
+import { get, isString, uniqueId } from 'lodash'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 

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

@@ -1,84 +1,3 @@
 /* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
 
-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)
-}
+export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1