playbook_ui 14.14.0 → 14.15.0.pre.alpha.PBNTR477draggabledropzone6743

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() {
@@ -152,4 +152,4 @@ export default class PbTooltip extends PbEnhancedElement {
   get triggerMethod() {
     return this.element.dataset.pbTooltipTriggerMethod || 'hover'
   }
-}
+}

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,30 +3,63 @@
 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 :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
-        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_typeahead/_typeahead.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useState, useEffect, forwardRef} 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'
 
@@ -45,8 +46,13 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => string),
   getOptionValue?: string | (() => string),
   name?: string,
+  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,
 } & GlobalProps
 
 export type SelectValueType = {
@@ -66,8 +72,7 @@ type TagOnChangeValues = {
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
-
-const Typeahead = ({
+const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   async,
   className,
   components = {},
@@ -78,9 +83,14 @@ const Typeahead = ({
   getOptionValue,
   htmlOptions = {},
   id,
+  name,
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
+  onChange,
+  optionsByContext = {},
+  searchContextSelector,
+  clearOnContextChange = false,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -115,6 +125,32 @@ const Typeahead = ({
     ...props,
   }
 
+  const [contextValue, setContextValue] = useState("")
+
+  useEffect(() => {
+    if (searchContextSelector) {
+      const searchContextElement = document.getElementById(searchContextSelector)
+
+      setContextValue((searchContextElement as HTMLInputElement)?.value)
+      const handleContextChange = (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        setContextValue(target.value);
+        if (clearOnContextChange) document.dispatchEvent(new CustomEvent(`pb-typeahead-kit-${selectProps.id}:clear`))
+      }
+
+      if (searchContextElement) searchContextElement.addEventListener('change', handleContextChange)
+
+      return () => {
+        if (searchContextElement) searchContextElement.removeEventListener('change', handleContextChange)
+      }
+    }
+  }, [searchContextSelector])
+
+  const contextArray = optionsByContext[contextValue]
+  if (Array.isArray(contextArray) && contextArray.length > 0) {
+    selectProps.options = contextArray
+  }
+
   const Tag = (
     createable
       ? (async ? AsyncCreateableSelect : CreateableSelect)
@@ -122,6 +158,15 @@ const Typeahead = ({
   )
 
   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 })
@@ -165,10 +210,11 @@ const Typeahead = ({
       />
     </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/components/MultiValue.tsx

@@ -8,15 +8,17 @@ import { SelectValueType } from '../_typeahead'
 type Props = {
   data: SelectValueType,
   multiValueTemplate: any,
+  wrapped?: boolean,
   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",
   removeProps: any,
   selectProps: any,
 }
 
+
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate } = props.selectProps
+  const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -52,6 +54,7 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text=''
             truncate={truncate}
+            wrapped={wrapped}
             {...props}
         />
       }
@@ -66,6 +69,7 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text={label}
             truncate={truncate}
+            wrapped={wrapped}
             {...props}
         />
       }

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb

@@ -0,0 +1,45 @@
+<%= pb_rails("select", props: {
+  id:"color_context_2",
+  label: "Choose a Color",
+  name: "color_name",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" }
+  ],
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  label: "Pick a Shade",
+  is_multi: false,
+  search_context_selector: "color_context_2",
+  options_by_context: {
+    "red":  [
+      { label: "Scarlet", value: "scarlet" },
+      { label: "Mahogany", value: "mahogany" },
+      { label: "Crimson", value: "crimson" }
+    ],
+    "blue": [
+      { label: "Sky Blue", value: "sky" },
+      { label: "Cerulean", value: "cerulean" },
+      { label: "Navy", value: "navy" }
+    ],
+    "green": [
+      { label: "Emerald", value: "emerald" },
+      { label: "Mint", value: "mint" },
+      { label: "Olive", value: "olive" }
+    ]
+  },
+  id: "typeahead-dynamic-options",
+}) %>
+
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md

@@ -0,0 +1,5 @@
+You can also set up a typeahead to render options dynamically based on input from a select. To achieve this:
+- The typeahead must have a unique `id`
+- Use the `search_context_selector` prop on the typeahead. The value here must match the id of the select so the Typeahead knows where to read the current "context" from.
+- Use `options_by_context` to pass in a hash whose keys match the possible values of your “context” select. Each key maps to an array of { label, value } objects. The typeahead automatically displays only the subset of options matching the current context.
+- Additionally, the optional `clear_on_context_change` prop controls whether the typeahead clears or not when a change happens in the linked select. This prop is set to true by default so that whenever a selection is made in the select, the Typeahead automatically clears its current input/selection.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("select", props: {
+  id:"color_context",
+  label: "Choose a Color",
+  name: "color_name_2",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" }
+  ],
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  label: "Pick a Shade",
+  search_context_selector: "color_context",
+  options_by_context: {
+    "red":  [
+      { label: "Scarlet", value: "scarlet" },
+      { label: "Mahogany", value: "mahogany" },
+      { label: "Crimson", value: "crimson" }
+    ],
+    "blue": [
+      { label: "Sky Blue", value: "sky" },
+      { label: "Cerulean", value: "cerulean" },
+      { label: "Navy", value: "navy" }
+    ],
+    "green": [
+      { label: "Emerald", value: "emerald" },
+      { label: "Mint", value: "mint" },
+      { label: "Olive", value: "olive" }
+    ]
+  },
+  search_term_minimum_length: 0,
+}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md

@@ -0,0 +1,3 @@
+The dynamic rendering of options for the typeahead can also be achieved with a pure Rails implementation (not react rendered). For this implementation, use all the props as above with the following additions:
+
+- `search_term_minimum_length`: this sets the minimum input in the typeahead needed to display the dropdown. This is set to 3 by default. Set it to 0 for the dropdown to always display when the typeahead is interacted with.