playbook_ui 14.16.0 → 14.17.0.pre.alpha.PBNTR920emojipickerpoc7141

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_picker.jsx

@@ -0,0 +1,371 @@
+import React, { useState, useEffect } from "react"
+import TextInput from '../../pb_text_input/_text_input'
+import Button from "../../pb_button/_button"
+
+// Emojis organized by category with icons for navigation and search names
+const emojiCategories = [
+    {
+      id: 'recent',
+      name: "Recent",
+      icon: '🕒',
+      emojis: [
+        { emoji: '😀', name: 'happy' },
+        { emoji: '👍', name: 'thumbs up' },
+        { emoji: '🎉', name: 'popper' },
+        { emoji: '❤️', name: 'heart' },
+        { emoji: '🔥', name: 'fire' },
+        { emoji: '✨', name: 'sparkles' }
+      ]
+    },
+    {
+      id: 'smileys',
+      name: "Smileys",
+      icon: '😊',
+      emojis: [
+        { emoji: '😀', name: 'happy' },
+        { emoji: '😂', name: 'lmao' },
+        { emoji: '🙂', name: 'smile' },
+        { emoji: '😊', name: 'smiley' },
+        { emoji: '😍', name: 'smile-heart' },
+        { emoji: '🤩', name: 'star-struck' }
+      ]
+    },
+    {
+      id: 'people',
+      name: "People",
+      icon: '👥',
+      emojis: [
+        { emoji: '👍', name: 'thumbs up' },
+        { emoji: '👎', name: 'thumbs down' },
+        { emoji: '👌', name: 'OK' },
+        { emoji: '👋', name: 'wave' },
+        { emoji: '✌️', name: 'victory' },
+        { emoji: '🙏', name: 'pray' }
+      ]
+    },
+    {
+      id: 'animals',
+      name: "Animals",
+      icon: '🐼',
+      emojis: [
+        { emoji: '🐶', name: 'dog' },
+        { emoji: '🐱', name: 'cat' },
+        { emoji: '🐼', name: 'panda' },
+        { emoji: '🦁', name: 'lion' },
+        { emoji: '🐢', name: 'turtle' },
+        { emoji: '🦋', name: 'butterfly' }
+      ]
+    },
+    {
+      id: 'food',
+      name: "Food",
+      icon: '🍔',
+      emojis: [
+        { emoji: '🍎', name: 'apple' },
+        { emoji: '🍕', name: 'pizza' },
+        { emoji: '🍦', name: 'ice cream' },
+        { emoji: '🍩', name: 'doughnut' },
+        { emoji: '🍷', name: 'wine' },
+        { emoji: '🍺', name: 'beer' }
+      ]
+    },
+    {
+      id: 'activities',
+      name: "Activities",
+      icon: '⚽',
+      emojis: [
+        { emoji: '⚽', name: 'soccer ball' },
+        { emoji: '🏀', name: 'basketball' },
+        { emoji: '🎮', name: 'video game' },
+        { emoji: '🎬', name: 'clapper board' },
+        { emoji: '🎨', name: 'artist palette' },
+        { emoji: '🎭', name: 'performing arts' }
+      ]
+    },
+    {
+      id: 'travel',
+      name: "Travel",
+      icon: '✈️',
+      emojis: [
+        { emoji: '🚗', name: 'automobile' },
+        { emoji: '✈️', name: 'airplane' },
+        { emoji: '🚲', name: 'bicycle' },
+        { emoji: '⛵', name: 'sailboat' },
+        { emoji: '🏖️', name: 'beach' },
+        { emoji: '🗽', name: 'Statue of Liberty' }
+      ]
+    },
+    {
+      id: 'symbols',
+      name: "Symbols",
+      icon: '🔣',
+      emojis: [
+        { emoji: '❤️', name: 'heart' },
+        { emoji: '🔥', name: 'fire' },
+        { emoji: '✨', name: 'sparkles' },
+        { emoji: '💯', name: 'hundred' },
+        { emoji: '⭐', name: 'star' },
+        { emoji: '💪', name: 'flex' }
+      ]
+    }
+  ]
+
+  const TextInputEmojiPicker = (props) => {
+    const [inputText, setInputText] = useState('')
+    const [showPicker, setShowPicker] = useState(false)
+    const [activeCategory, setActiveCategory] = useState('smileys')
+    const [searchQuery, setSearchQuery] = useState('')
+    const [filteredEmojis, setFilteredEmojis] = useState([])
+    const [recentEmojis, setRecentEmojis] = useState([
+      { emoji: '😀', name: 'happy' },
+      { emoji: '👍', name: 'thumbs up' },
+      { emoji: '🎉', name: 'popper' },
+      { emoji: '❤️', name: 'heart' },
+      { emoji: '🔥', name: 'fire' },
+      { emoji: '✨', name: 'sparkles' }
+    ])
+
+    // Handle emoji selection
+    const handleEmojiClick = (emojiObj) => {
+      setInputText(prevInput => prevInput + emojiObj.emoji)
+
+      // Add to recent emojis
+      if (!recentEmojis.some(item => item.emoji === emojiObj.emoji)) {
+        const updatedRecent = [emojiObj, ...recentEmojis.slice(0, 5)]
+        setRecentEmojis(updatedRecent)
+
+        // Update the recent category
+        const recentCategory = emojiCategories.find(cat => cat.id === 'recent')
+        if (recentCategory) {
+          recentCategory.emojis = updatedRecent
+        }
+      }
+
+      // Uncomment to close picker after selection
+      // setShowPicker(false)
+    }
+
+    // Handle search
+    useEffect(() => {
+      if (searchQuery.trim() === '') {
+        setFilteredEmojis([])
+        return
+      }
+
+      // Collect all emojis and filter based on search
+      const allEmojis = emojiCategories.flatMap(category =>
+        category.emojis.map(emojiObj => ({
+          ...emojiObj,
+          categoryName: category.name
+        }))
+      )
+
+      // Search by emoji name or category
+      const filtered = allEmojis.filter(item =>
+        item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        item.categoryName.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+
+      setFilteredEmojis(filtered)
+    }, [searchQuery])
+
+    return (
+      <div className="emoji-container">
+        <div className="input-wrapper">
+          <TextInput
+              id="emoji-text-input"
+              name="emojiPicker"
+              onChange={(e) => setInputText(e.target.value)}
+              placeholder="Enter some emojis here"
+              value={inputText}
+              {...props}
+          />
+          <Button
+              className="emoji-toggle-button"
+              marginRight="lg"
+              onClick={() => setShowPicker(!showPicker)}
+              variant="link"
+          >
+            😊
+          </Button>
+        </div>
+
+        {showPicker && (
+          <div className="picker-wrapper">
+            {/* Search Bar */}
+            <TextInput
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search emojis..."
+                type="text"
+                value={searchQuery}
+                {...props}
+            />
+
+            {/* Category Navigation */}
+            <div className="category-nav">
+              {emojiCategories.map(category => (
+                <button
+                    className={`category-button ${activeCategory === category.id ? 'active' : ''}`}
+                    key={category.id}
+                    onClick={() => {
+                      setActiveCategory(category.id)
+                      setSearchQuery('')
+                      document.getElementById(`category-${category.id}`)?.scrollIntoView({ behavior: 'smooth' })
+                    }}
+                    title={category.name}
+                >
+                  {category.icon}
+                </button>
+              ))}
+            </div>
+
+            {/* Emoji Content */}
+            <div className="emoji-content">
+              {searchQuery.trim() !== '' ? (
+                // Search Results
+                <div className="search-results">
+                  <div className="category-title">Search Results</div>
+                  {filteredEmojis.length > 0 ? (
+                    <div className="emoji-grid">
+                      {filteredEmojis.map((item, index) => (
+                        <Button
+                            className="emoji-button"
+                            key={`search-${index}`}
+                            onClick={() => handleEmojiClick(item)}
+                            title={item.name}
+                            variant="link"
+                        >
+                          {item.emoji}
+                        </Button>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="no-results">No emojis found</div>
+                  )}
+                </div>
+              ) : (
+                // All Categories
+                <div className="all-categories">
+                  {emojiCategories.map(category => (
+                    <div
+                        className="category-section"
+                        id={`category-${category.id}`}
+                        key={category.id}
+                    >
+                      <div className="category-title">
+                        {category.name}
+                      </div>
+                      <div className="emoji-grid">
+                        {category.emojis.map((emojiObj, index) => (
+                          <Button
+                              className="emoji-button"
+                              key={`${category.id}-${index}`}
+                              onClick={() => handleEmojiClick(emojiObj)}
+                              title={emojiObj.name}
+                              variant="link"
+                          >
+                            {emojiObj.emoji}
+                          </Button>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        <style jsx>{`
+          .emoji-container {
+            font-family: Arial, sans-serif;
+            max-width: 500px;
+            position: relative;
+          }
+
+          .input-wrapper {
+            display: flex;
+            margin-bottom: 10px;
+            position: relative;
+          }
+
+          .picker-wrapper {
+            position: absolute;
+            z-index: 100;
+            margin-top: 5px;
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 12px;
+            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+            width: 320px;
+          }
+
+          .search-container {
+            margin-bottom: 12px;
+          }
+
+          .category-nav {
+            display: flex;
+            overflow-x: auto;
+            padding-bottom: 8px;
+            margin-bottom: 12px;
+            border-bottom: 1px solid #eee;
+          }
+
+          .category-button {
+            background: none;
+            border: none;
+            font-size: 18px;
+            padding: 8px;
+            cursor: pointer;
+            margin-right: 4px;
+            border-radius: 4px;
+            min-width: 36px;
+          }
+
+          .category-button.active {
+            background-color: #f0f0f0;
+          }
+
+          .emoji-content {
+            max-height: 300px;
+            overflow-y: auto;
+            scroll-behavior: smooth;
+          }
+
+          .all-categories {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+          }
+
+          .category-section {
+            padding-top: 8px;
+            scroll-margin-top: 8px;
+          }
+
+          .category-title {
+            font-weight: bold;
+            margin-bottom: 8px;
+            color: #555;
+            font-size: 14px;
+          }
+
+          .emoji-grid {
+            display: grid;
+            grid-template-columns: repeat(6, 1fr);
+            gap: 2px;
+          }
+
+          .no-results {
+            padding: 20px;
+            text-align: center;
+            color: #999;
+          }
+        `}</style>
+      </div>
+    );
+  };
+
+export default TextInputEmojiPicker

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

@@ -18,6 +18,7 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_mask: Mask
+  - text_input_emoji_picker: Emoji Picker
 
   swift:
     - text_input_default_swift: Default

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

@@ -6,3 +6,4 @@ export { default as TextInputAddOn } from './_text_input_add_on.jsx'
 export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
 export { default as TextInputMask } from './_text_input_mask.jsx'
+export { default as TextInputEmojiPicker } from './_text_input_emoji_picker.jsx'

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