playbook_ui 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091 → 14.16.0.pre.rc.0

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

@@ -1,26 +1,22 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { computePosition, offset, flip, shift, arrow, autoUpdate } from '@floating-ui/dom'
-
-const TOOLTIP_OFFSET = 20
+import {
+  createPopperLite as createPopper,
+  flip,
+  offset,
+  preventOverflow,
+} from '@popperjs/core'
+
+const TOOLTIP_OFFSET = [0, 20]
 const TOOLTIP_TIMEOUT = 250
-const SAFE_ZONE_MARGIN = 1
 
 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() {
-    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', () => {
@@ -28,66 +24,29 @@ export default class PbTooltip extends PbEnhancedElement {
         })
       } 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)
-        })
+            this.checkCloseTooltip(trigger)
+          }, TOOLTIP_TIMEOUT)
 
-        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 {
+          trigger.addEventListener('mouseleave', () => {
+            clearTimeout(this.mouseenterTimeout)
+            setTimeout(() => {
               this.hideTooltip()
-            }
-          }
+            }, 0)
+          }, { once: true })
         })
 
-        if (interactionEnabled) {
-          this.tooltip.addEventListener('mouseenter', () => {
-            clearSafeZoneListener(this)
-          })
-
-          this.tooltip.addEventListener('mouseleave', () => {
-            this.attachSafeZoneListener()
-          })
-        }
+        this.tooltip.addEventListener('mouseenter', () => {
+          clearTimeout(this.mouseenterTimeout)
+        })
+        this.tooltip.addEventListener('mouseleave', () => {
+          this.hideTooltip()
+        })
       }
     })
   }
 
-  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
@@ -103,46 +62,27 @@ export default class PbTooltip extends PbEnhancedElement {
   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.popper = createPopper(trigger, this.tooltip, {
+      placement: this.position,
+      strategy: 'fixed',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: TOOLTIP_OFFSET,
+          },
+        },
+        {
+          name: 'arrow',
+          options: {
+            element: document.querySelector(`#${this.tooltipId}-arrow`),
+          },
+        },
+        offset,
+        preventOverflow,
+        flip,
+      ],
     })
-
     this.tooltip.classList.add('show')
 
     if (this.triggerMethod === 'click') {
@@ -154,50 +94,39 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   hideTooltip() {
-    if (!this.tooltip) return
-
     this.tooltip.classList.add('fade_out')
     setTimeout(() => {
-      if (this.cleanup) {
-        this.cleanup()
-        this.cleanup = null
-      }
+      if (!this.popper) return
+      this.popper.destroy()
       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) {
+    } else {
       const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
       triggerEl = selectorIsId
-        ? document.querySelector(this.triggerElementSelector)
-        : document.querySelectorAll(this.triggerElementSelector)
-    } else {
-      triggerEl = this.element
+        ? document.querySelector(`${this.triggerElementSelector}`)
+        : document.querySelectorAll(`${this.triggerElementSelector}`)
     }
+
     if (!triggerEl) {
-      console.error('Tooltip Kit: No valid trigger element found!')
+      console.error('Tooltip Kit: an invalid or unavailable DOM reference was provided!')
       return []
     }
-    if (triggerEl.length === undefined) {
-      triggerEl = [triggerEl]
-    }
-    return triggerEl
+
+    if (!triggerEl.length) triggerEl = [triggerEl]
+    return (this._triggerElements = this._triggerElements || triggerEl)
   }
 
   get tooltip() {
-    return (this._tooltip = this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
+    return (this._tooltip =
+      this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
   }
 
   get position() {
@@ -223,60 +152,4 @@ export default class PbTooltip extends PbEnhancedElement {
   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/tooltip.html.erb

@@ -1,7 +1,9 @@
-<%= pb_content_tag(:div,
-      style: remove_height_properties(combined_html_options[:style]) || "",
-      **combined_html_options.except(:style)) do %>
-  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.height_and_width_helper %>">
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
+  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
   </div>

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

@@ -3,49 +3,24 @@
 module Playbook
   module PbTooltip
     class Tooltip < Playbook::KitBase
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-      prop :delay_open
-      prop :delay_close
-      prop :height
-      prop :interaction, type: Playbook::Props::Boolean,
-                         default: false
-      prop :max_height
-      prop :max_width
-      prop :min_height
-      prop :min_width
       prop :position
-      prop :tooltip_id
       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,
                             values: %w[hover click],
                             default: "hover"
-      prop :width
 
       def classname
         generate_classname("pb_tooltip_kit", dark_class)
       end
 
-      def remove_height_properties(combined_html_options_style)
-        return nil if combined_html_options_style.nil?
-
-        combined_html_options_style.gsub(/\s*(height|min-height|max-height)\s*:[^;]*;?\s*/, "")
-                                   .strip
-                                   .presence
-      end
-
-      def height_and_width_helper
-        out = ""
-        out += "width: #{width};" if width.present?
-        out += "height: #{height};" if height.present?
-        out += "max-height: #{max_height};" if max_height.present?
-        out += "max-width: #{max_width};" if max_width.present?
-        out += "min-height: #{min_height};" if min_height.present?
-        out += "min-width: #{min_width};" if min_width.present?
-        out
-      end
-
       def data
         data = Hash(values[:data]).merge(
           pb_tooltip_kit: true,

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

@@ -10,7 +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: {

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

@@ -126,9 +126,6 @@
         color: $text_lt_default;
       }
       &__control {
-        &--is-disabled {
-          background-color: shade($white, 5%);
-        }
         &--is-focused {
           @include pb_textarea_focus;
           @include transition_default;
@@ -255,7 +252,6 @@
           color: $text_dk_default;
         }
         &__control {
-        
           &--is-focused {
             @include pb_textarea_focus;
             @include transition_default;

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef} 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'
@@ -38,7 +38,6 @@ type TypeaheadProps = {
   createable?: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
-  disabled?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -50,7 +49,6 @@ type TypeaheadProps = {
   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",
-  onChange?: any,
   optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
   searchContextSelector?: string,
   clearOnContextChange?: boolean,
@@ -73,23 +71,21 @@ 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 = {},
   createable,
   error = "",
   data = {},
-  disabled = false,
   getOptionLabel,
   getOptionValue,
   htmlOptions = {},
   id,
-  name,
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
-  onChange,
   optionsByContext = {},
   searchContextSelector,
   clearOnContextChange = false,
@@ -160,15 +156,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 })
@@ -207,17 +194,15 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       <Tag
           classNamePrefix="typeahead-kit-select"
           error={error}
-          isDisabled={disabled}
           onChange={handleOnChange}
           {...selectProps}
       />
     </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_async_createable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 /**
  *

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const options = [
   { label: 'Jardim', value: 'Portuguese' },

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

@@ -2,7 +2,9 @@
 
 import React, { useState } from 'react'
 
-import Button from '../../pb_button/_button'
+import {
+  Button,
+} from 'playbook-ui'
 
 import Typeahead from '../_typeahead'
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

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

@@ -4,12 +4,14 @@
 import React, { useState } from 'react'
 import { components } from 'react-select'
 
-import Avatar from '../../pb_avatar/_avatar'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import {
+  Avatar,
+  Body,
+  Flex,
+  FlexItem,
+  Title,
+  Typeahead,
+} from 'playbook-ui'
 
 const USERS = [
   {
@@ -18,18 +20,18 @@ const USERS = [
     territory: "PHL",
   },
   {
-    name: "Carlos Lima",
-    title: "Nitro Developer",
+    name: "Jason Cypret",
+    title: "Vice President of User Experience",
     territory: "PHL",
   },
   {
     name: "Stephen Marshall",
-    title: "Senior Nitro Developer",
+    title: "Senior User Experience Engineer",
     territory: "PHL",
   },
   {
     name: "Jasper Furniss",
-    title: "Lead User Experience Engineer",
+    title: "Senior User Experience Engineer",
     territory: "PHL",
   },
 ];

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const options = [
   { label: 'Windows', value: '#FFA500' },

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

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 
-import Caption from '../../pb_caption/_caption'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import User from '../../pb_user/_user'
+import {
+  Caption,
+  Typeahead,
+  User,
+} from 'playbook-ui'
 
 /**
  *

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

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 
-import Caption from '../../pb_caption/_caption'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import User from '../../pb_user/_user'
+import {
+  Caption,
+  Typeahead,
+  User,
+} from 'playbook-ui'
 
 /**
  *
@@ -47,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

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 
-import Caption from '../../pb_caption/_caption'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import User from '../../pb_user/_user'
+import {
+  Caption,
+  Typeahead,
+  User,
+} from 'playbook-ui'
 
 /**
  *
@@ -54,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/_typeahead_with_pills_color.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const options = [
   { label: 'Windows', value: '#FFA500' },

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

@@ -14,11 +14,9 @@ examples:
     - typeahead_truncated_text: Truncated Text
     - typeahead_dynamic_options: Dynamic Options
     - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
-    - typeahead_disabled: Disabled
 
   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)
@@ -33,4 +31,3 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
-    - typeahead_disabled: Disabled

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

@@ -13,5 +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'
-export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'