playbook_ui 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6934 → 14.16.0.pre.alpha.PBNTR924reacttablecustomheaders6846

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss

@@ -14,12 +14,12 @@
       opacity: 1;
     }
     &:not(:hover) {
-      .date-picker-inline-angle-down.cal_icon_wrapper {
+      #date-picker-inline-angle-down {
         svg {
           display: none;
         }
       }
-      .date-picker-inline-icon-plus.cal_icon_wrapper {
+      #date-picker-inline-icon-plus {
         svg {
           color: $slate;
           display: inline-block;
@@ -33,12 +33,12 @@
       [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $primary;
       }
-      .date-picker-inline-angle-down.cal_icon_wrapper {
+      #date-picker-inline-angle-down {
         svg {
           display: none;
         }
       }
-      .date-picker-inline-icon-plus.cal_icon_wrapper {
+      #date-picker-inline-icon-plus {
         svg {
           display: inline-block;
           color: $primary;
@@ -47,34 +47,32 @@
     }
     &.show-angle-down-icon {
       &:not(:hover) {
-        .date-picker-inline-angle-down.cal_icon_wrapper {
+        #date-picker-inline-angle-down {
           svg {
             display: inline-block;
             color: $text_lt_light;
           }
         }
-        .date-picker-inline-icon-plus.cal_icon_wrapper {
+        #date-picker-inline-icon-plus {
           svg {
             display: none;
           }
         }
       }
-      .date-picker-inline-icon-plus.cal_icon_wrapper {
+      #date-picker-inline-icon-plus {
         svg {
           display: none;
         }
       }
-      .date-picker-inline-angle-down.cal_icon_wrapper {
+      #date-picker-inline-angle-down {
         svg {
           display: inline-block;
           color: $primary;
         }
       }
     }
-    .date_picker_input.flatpickr-input,
-    .date_picker_input.flatpickr-input .active,
-    .text_input.flatpickr-input,
-    .text_input.flatpickr-input .active      {
+    #date-picker-inline,
+    #date-picker-inline .active {
       border: none;
       padding: 5px 5px 5px 10px;
       background-color: #FFF;
@@ -84,8 +82,8 @@
         box-shadow: none;
       }
     }
-    .date-picker-inline-angle-down.cal_icon_wrapper,
-    .date-picker-inline-icon-plus.cal_icon_wrapper {
+    #date-picker-inline-angle-down,
+    #date-picker-inline-icon-plus {
       height: 33px;
       border: none;
     }
@@ -98,12 +96,12 @@
 [class^=pb_date_picker_kit].dark {
   &.inline-date-picker {
     &:not(:hover) {
-      .date-picker-inline-angle-down.cal_icon_wrapper {
+      #date-picker-inline-angle-down {
         svg {
           display: none;
         }
       }
-      .date-picker-inline-icon-plus.cal_icon_wrapper {
+      #date-picker-inline-icon-plus {
         svg {
           display: inline-block;
           color: $white;
@@ -117,12 +115,12 @@
       [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $white;
       }
-      .date-picker-inline-angle-down.cal_icon_wrapper {
+      #date-picker-inline-angle-down {
         svg {
           display: none;
         }
       }
-      .date-picker-inline-icon-plus.cal_icon_wrapper {
+      #date-picker-inline-icon-plus {
         svg {
           display: inline-block;
           color: $white;
@@ -131,34 +129,32 @@
     }
     &.show-angle-down-icon {
       &:not(:hover) {
-        .date-picker-inline-angle-down.cal_icon_wrapper {
+        #date-picker-inline-angle-down {
           svg {
             display: inline-block;
             color: $white;
           }
         }
-        .date-picker-inline-icon-plus.cal_icon_wrapper {
+        #date-picker-inline-icon-plus {
           svg {
             display: none;
           }
         }
       }
-      .date-picker-inline-icon-plus.cal_icon_wrapper {
+      #date-picker-inline-icon-plus {
         svg {
           display: none;
         }
       }
-      .date-picker-inline-angle-down.cal_icon_wrapper {
+      #date-picker-inline-angle-down {
         svg {
           display: inline-block;
           color: $white;
         }
       }
     }
-    .date_picker_input.flatpickr-input,
-    .date_picker_input.flatpickr-input .active,
-    .text_input.flatpickr-input,
-    .text_input.flatpickr-input .active {
+    #date-picker-inline,
+    #date-picker-inline .active {
       background-color: rgba($white,.10);
       border: none;
       padding: 5px 5px 5px 10px;
@@ -168,8 +164,8 @@
         box-shadow: none;
       }
     }
-    .date-picker-inline-angle-down.cal_icon_wrapper,
-    .date-picker-inline-icon-plus.cal_icon_wrapper {
+    #date-picker-inline-angle-down,
+    #date-picker-inline-icon-plus {
       height: 33px;
       border: none;
     }

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { isEmpty, omitBy, map } from '../../utilities/object'
+import { map } from 'lodash'
+import { isEmpty, omitBy } from '../../utilities/object'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
@@ -45,12 +46,12 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                     dark={dark}
                     size={4}
                     tag="h4"
-                    text={`${name}`}
+                    text={name}
                 /> :
                 <div>
                   <Caption
                       dark={dark}
-                      text={`${name}`}
+                      text={name}
                   />
                   <Title
                       dark={dark}

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { find, partial, map } from  '../../utilities/object'
+import { map } from 'lodash'
+import { find, partial } from  '../../utilities/object'
 
 import Button from '../../pb_button/_button'
 import Icon from '../../pb_icon/_icon'
@@ -26,7 +27,7 @@ const directionIcon = (dir: Direction) => (
 
 const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (
   map(options, (label, name) => {
-    const next = nextValue(value, String(name))
+    const next = nextValue(value, name)
     return (
       <ListItem key={`option-${next.name}-${next.dir}`}>
         <Button

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -1,5 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { debounce } from '../utilities/object'
+import { debounce } from 'lodash'
 
 // Kit selectors
 const KIT_SELECTOR             = '[class^="pb_"][class*="_kit"]'

data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js

@@ -1,4 +1,4 @@
-import { debounce } from "../../utilities/object" 
+import { debounce } from 'lodash'
 import { useCallback, useMemo, useState } from 'react'
 
 export default function useVisibility(initialState = false) {

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -7,12 +7,11 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
-import { cloneDeep } from "../utilities/object";
-
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
+import { cloneDeep } from "lodash";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";
 

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -32,12 +32,11 @@ type RichTextEditorProps = {
   advancedEditor?: any,
   advancedEditorToolbar?: boolean,
   toolbarBottom?: boolean,
-  children?: React.ReactNode | React.ReactNode[],
+  children?: React.ReactNode | React.ReactNode[]
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
-  inputOptions?: { [key: string]: string | number | boolean | (() => void) },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inline?: boolean,
   extensions?: { [key: string]: string }[],
@@ -62,7 +61,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     data = {},
     focus = false,
     htmlOptions = {},
-    inputOptions = {},
     inline = false,
     extensions,
     name,
@@ -72,7 +70,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     sticky = false,
     template = '',
     value = '',
-    maxWidth = "md"
+    maxWidth="md"
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -81,28 +79,12 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const htmlProps = buildHtmlProps(htmlOptions)
   
-  const handleOnEditorReady = (editorInstance: Editor) => {
-    setEditor(editorInstance)
-    setTimeout(() => {
-      const oldId = editorInstance.element.getAttribute('input')
-      if (oldId) {
-        const hiddenInput = document.getElementById(oldId)
-        if (hiddenInput) {
-          const newId = (inputOptions.id as string) || oldId  
-          hiddenInput.id = newId
-          editorInstance.element.setAttribute('input', newId)
-
-          if (inputOptions.name) {
-            hiddenInput.setAttribute('name', inputOptions.name as string)
-          }
-        }
-      }
-    })
-  }
+  const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
+    element = editor?.element
 
   // DOM manipulation must wait for editor to be ready
-  if (editor && editor.element) {
-    const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
+  if (editor) {
+    const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
       blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
 
     // replace default trix "block code" button with "inline code" button
@@ -136,8 +118,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   }, [editor, template])
 
   useEffect(() => {
-    if (!editor?.element) return
-    editor.element.addEventListener('click', ({ target }: Event) => {
+    if (!element) return
+    element.addEventListener('click', ({ target }: Event) => {
       const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
       if (!trixEditorContainer) return
 
@@ -146,7 +128,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
       if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
     })
-  }, [editor])
+  }, [element])
 
   const richTextEditorClass = 'pb_rich_text_editor_kit',
     simpleClass = simple ? 'simple' : '',
@@ -155,7 +137,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     inlineClass = inline ? 'inline' : '',
     toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
 
-  let css = classnames(globalProps(props, { maxWidth }), className)
+  let css = classnames(globalProps(props, {maxWidth}), className)
   css = classnames(
     richTextEditorClass,
     simpleClass,

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("rich_text_editor", props: {input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>
+<%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb

@@ -1,5 +1,5 @@
 <%= react_component('RichTextEditor',
-                    object.rich_text_options,
-                    aria: object.aria,
-                    data: object.data
-                   ) %>
+  object.rich_text_options,
+  aria: object.aria,
+  data: object.data
+) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -20,7 +20,6 @@ module Playbook
       prop :value
       prop :template
       prop :placeholder
-      prop :input_options
 
       def classname
         generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
@@ -50,7 +49,6 @@ module Playbook
           value: value,
           template: template,
           placeholder: placeholder,
-          inputOptions: input_options,
         }
       end
     end

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
+}