playbook_ui 14.15.0.pre.rc.4 → 14.16.0.pre.alpha.PLAY1938completetooltipfloatinguitransition6830

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Tooltip, Flex, FlexItem } from 'playbook-ui';
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipDefaultReact = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
+import Button from '../../pb_button/_button'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipDelay = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Tooltip, Button, Flex } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
 
 const TooltipIcon = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
+    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
+    Send Email
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
+import Button from '../../pb_button/_button'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipInteraction = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Tooltip, Flex, CircleIconButton } from 'playbook-ui'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 
 const TooltipMargin = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from 'react'
-import {  Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Body from '../../pb_body/_body'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipShowTooltipReact = (props) => {
   const [showTooltip, setShowTooltip] = useState(true);

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-1", text: "Height and Width" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-1", tooltip_id: "tool-tip-sizing-1", position: "top", height: "150px", width: "100px" } do %>
+    I'm 150px high and 100px wide!
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-2", text: "max_height" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-2", tooltip_id: "tool-tip-sizing-2", position: "top", width: "250px", max_height: "100px" } do %>
+    I have a max_height of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-3", text: "max_width" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-3", tooltip_id: "tool-tip-sizing-3", position: "top", max_width: "150px" } do %>
+    I have a max_width of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-4", text: "min_width" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-4", tooltip_id: "tool-tip-sizing-4", position: "top", min_width: "300px" } do %>
+    I have a min_width of 300px!
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-5", text: "min_height" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-5", tooltip_id: "tool-tip-sizing-5", position: "top", min_height: "300px", height: "200px"  } do %>
+    I have a min_height of 300px!
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
+
+const TooltipSizing = (props) => {
+
+  return (
+   <Flex
+       flexDirection='row'
+       gap='md'
+       wrap
+   >
+    <FlexItem>
+      <Tooltip
+          height='150px'
+          placement='top'
+          text="I'm 150px high and 100px wide!"
+          width='100px'
+          {...props}
+      >
+        <Button text="Height and Width"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          maxHeight='100px'
+          placement='top'
+          text="I have a maxHeight of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit."
+          width='250px'
+          {...props}
+      >
+        <Button text="maxHeight"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          maxWidth='150px'
+          placement='top'
+          text="I have a maxWidth of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit."
+          {...props}
+      >
+        <Button text="maxWidth"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          minWidth='300px'
+          placement='top'
+          text="I have a minWidth of 300px!"
+          {...props}
+      >
+        <Button text="minWidth"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          maxWidth='150px'
+          minHeight='300px'
+          placement='top'
+          text="I have a minHeight of 300px!"
+          {...props}
+      >
+        <Button text="minHeight"/>
+      </Tooltip>
+    </FlexItem>
+   </Flex>
+  )
+}
+
+export default TooltipSizing

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.md

@@ -0,0 +1,3 @@
+You can customize the `height` and `width` of the tooltip's popover.
+
+When using `maxHeight`, be sure to set a `width` as well. The text needs to truncate within the `width` prop.

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

@@ -4,6 +4,8 @@ examples:
   - tooltip_default: Default
   - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
+  - tooltip_sizing: Tooltip Sizing
+  - tooltip_icon_rails: Tooltip with Icon
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
@@ -12,7 +14,7 @@ examples:
   - tooltip_default_react: Default
   - tooltip_interaction: Content Interaction
   - tooltip_margin: Margin
+  - tooltip_sizing: Tooltip Sizing
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
   - tooltip_show_tooltip_react: Show Tooltip
-

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

@@ -1,6 +1,7 @@
 export { default as TooltipDefaultReact } from './_tooltip_default_react'
 export { default as TooltipInteraction } from './_tooltip_interaction'
 export { default as TooltipMargin } from './_tooltip_margin'
+export { default as TooltipSizing } from './_tooltip_sizing'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
 export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'

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

@@ -1,22 +1,26 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import {
-  createPopperLite as createPopper,
-  flip,
-  offset,
-  preventOverflow,
-} from '@popperjs/core'
-
-const TOOLTIP_OFFSET = [0, 20]
+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 PbTooltip extends PbEnhancedElement {
+export default class PbTooltipFloatingUi 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() {
+    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', () => {
@@ -24,29 +28,66 @@ 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)
-            this.checkCloseTooltip(trigger)
-          }, TOOLTIP_TIMEOUT)
-
-          trigger.addEventListener('mouseleave', () => {
-            clearTimeout(this.mouseenterTimeout)
-            setTimeout(() => {
-              this.hideTooltip()
-            }, 0)
-          }, { once: true })
+            if (interactionEnabled) {
+              this.checkCloseTooltip(trigger)
+            }
+          }, delayOpen)
         })
 
-        this.tooltip.addEventListener('mouseenter', () => {
+        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()
+            }
+          }
         })
-        this.tooltip.addEventListener('mouseleave', () => {
-          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
@@ -62,27 +103,46 @@ export default class PbTooltip extends PbEnhancedElement {
   showTooltip(trigger) {
     if (this.shouldShowTooltip === 'false') return
 
-    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,
-      ],
+    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') {
@@ -94,39 +154,50 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   hideTooltip() {
+    if (!this.tooltip) return
+
     this.tooltip.classList.add('fade_out')
     setTimeout(() => {
-      if (!this.popper) return
-      this.popper.destroy()
+      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 {
+    } else if (this.triggerElementSelector) {
       const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
       triggerEl = selectorIsId
-        ? document.querySelector(`${this.triggerElementSelector}`)
-        : document.querySelectorAll(`${this.triggerElementSelector}`)
+        ? document.querySelector(this.triggerElementSelector)
+        : document.querySelectorAll(this.triggerElementSelector)
+    } else {
+      triggerEl = this.element
     }
-
     if (!triggerEl) {
-      console.error('Tooltip Kit: an invalid or unavailable DOM reference was provided!')
+      console.error('Tooltip Kit: No valid trigger element found!')
       return []
     }
-
-    if (!triggerEl.length) triggerEl = [triggerEl]
-    return (this._triggerElements = this._triggerElements || triggerEl)
+    if (triggerEl.length === undefined) {
+      triggerEl = [triggerEl]
+    }
+    return 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() {
@@ -152,4 +223,60 @@ 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,10 +1,11 @@
 <%= 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">
+      id: object.id,
+      data: object.data,
+      class: object.classname,
+      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.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
   </div>
-<% end %>
+<% end %>

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

@@ -3,24 +3,49 @@
 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 'lodash'
+import { merge } from '../utilities/object'
 
 type TreemapChartProps = {
   chartData: {

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

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