playbook_ui 14.22.0.pre.alpha.play2261highchartsbargraphimportedstyles8730 → 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8781

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d54d5b30f8aa5a3674fbcf5e138889fa5621bf8f0ce5b4fa55106804e4dbb43e
-  data.tar.gz: 5ea3e7bdd1b718cfb5a6795512874bb12b012627edd9b82b82a04f2ca27f683f
+  metadata.gz: aaa5efb301fe3d2e5fe096cc4847b47a7ef28e9adbd0edb2b42af60952f3c4a7
+  data.tar.gz: a8e3efff80e1f486b9cd5c22e8e25049253cf3c2b97d2572eebf85d7a42e281a
 SHA512:
-  metadata.gz: 9b544a9e3c00e1a0cc07bc8f676349059100aad6ed934eefe690853543695c75f13e9a422da64cdd479f9d75375c6e6eab9829e0b8da497844928652e15e195c
-  data.tar.gz: 6f03c79d01b1bd9ab12a6be7c13cda2c02ad0f5d27d18eb64975d51d26b04cfddbf7c7faf694661c7c5f76afc65d6295076237726cdca20f007c68a25e67845a
+  metadata.gz: 67538842d0766d061a241b6e505aa4bbf0235f921260ba4824012ec60114feaf2a98bd8900938d27b7ea6ac742adbe1bbd9a3400aec549c46b48680cb645d045
+  data.tar.gz: db70f14c940d42d04704b4e4342aad75407aed4566d5ab643bd74b03e5cbd2859e5f527b21f4d9581f0025e5ec220f7f3d8bb34d34abef03896b89b02cdf770b

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -5,7 +5,7 @@
 @import "../tokens/typography";
 
 [class^=pb_badge_kit] {
-  $pb_badge_height: 18px;
+  $pb_badge_height_rounded: 16px;
 
   display: inline-flex;
   align-items: center;
@@ -13,7 +13,6 @@
   border-radius: $border_rad_light;
   padding: 0 $space_xs/2;
   border-width: 1px;
-  border-style: solid;
   border-color: $card_light;
   white-space: nowrap;
 
@@ -31,10 +30,10 @@
   }
 
   &[class*=_rounded] {
-    height: $pb_badge_height;
-    min-height: $pb_badge_height;
-    min-width: $pb_badge_height;
-    border-radius: $pb_badge_height / 2;
+    height: $pb_badge_height_rounded;
+    min-height: $pb_badge_height_rounded;
+    min-width: $pb_badge_height_rounded;
+    border-radius: $pb_badge_height_rounded / 2;
   }
 
   &[class*=_notification] {

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import colors from '../../tokens/exports/_colors.module.scss'
+import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
-import barGraphTheme from '../barGraphTheme';
 
 
 const chartData = [{

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
-import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
-import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
-import barGraphTheme from '../barGraphTheme';
 
 const chartOptions = {
     chart: {

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
-import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
-import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
 import Title from "../../pb_title/_title"
 
-import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
-
+import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
-import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts"
 import HighchartsReact from "highcharts-react-official"
 
 
-import barGraphTheme from '../barGraphTheme';
 import colors from '../../tokens/exports/_colors.module.scss'
 import typography from '../../tokens/exports/_typography.module.scss'
 

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
-
+import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
-import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
-import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_popover/index.ts

@@ -1,12 +1,12 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { createPopper, Instance, Placement } from '@popperjs/core'
+import { computePosition, offset, flip, shift, autoUpdate, Placement } from '@floating-ui/dom'
 
 const POPOVER_OFFSET_Y = [0, 20]
 
 export default class PbPopover extends PbEnhancedElement {
-  popper: Instance
   _triggerElement: HTMLElement
   _tooltip: HTMLElement
+  cleanupAutoUpdate: () => void
   element: HTMLElement
   static get selector() {
     return '[data-pb-popover-kit]'
@@ -31,18 +31,15 @@ export default class PbPopover extends PbEnhancedElement {
     }
     this.moveTooltip()
 
-    this.popper = createPopper (this.triggerElement, this.tooltip, {
-      placement: this.position as Placement,
-      strategy: 'fixed',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: this.offset,
-          },
-        },
-      ],
-    })
+    // Initial position
+    this.updatePosition()
+
+    // Update position (i.e., scroll or resize)
+    this.cleanupAutoUpdate = autoUpdate(
+      this.triggerElement,
+      this.tooltip,
+      () => this.updatePosition()
+    )
 
     this.triggerElement.addEventListener('click', (event: Event) => {
       event.preventDefault()
@@ -54,11 +51,32 @@ export default class PbPopover extends PbEnhancedElement {
 
       setTimeout(() => {
         this.toggleTooltip()
-        this.popper.update()
+        this.updatePosition()
       }, 0)
     })
   }
 
+  updatePosition() {
+    computePosition(this.triggerElement, this.tooltip, {
+      placement: this.position as Placement,
+      strategy: 'fixed',
+      middleware: [
+        offset(() => {
+          const [ crossAxis, mainAxis ] = this.offset
+          return { mainAxis, crossAxis }
+        }),
+        flip(),
+        shift(),
+      ],
+    }).then(({ x, y }) => {
+      Object.assign(this.tooltip.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+        position: 'fixed',
+      })
+    })
+  }
+
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target } ) => {
       const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null

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

@@ -0,0 +1,14 @@
+<%= pb_rails("button", props: { 
+  text: "Click to Open",
+  id: "click-tooltip-trigger-1",
+  variant: "primary"
+}) %>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_selector: "#click-tooltip-trigger-1",
+  tooltip_id: "click-tooltip-1",
+  position: "top",
+  use_click_to_open: true
+}) do %>
+  Tooltip opened by click! Click trigger again to close.
+<% end %>

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

@@ -0,0 +1 @@
+Set the prop `use_click_to_open` as `true` so that the tooltip will only appear when an item is clicked rather than hovered over.

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

@@ -9,6 +9,7 @@ examples:
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
+  - tooltip_click_open: Click to Open
 
   react:
   - tooltip_default_react: Default

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

@@ -19,60 +19,75 @@ export default class PbTooltip extends PbEnhancedElement {
     }
     
     this.triggerElements.forEach((trigger) => {
-      const method = this.triggerMethod
+      const method = this.effectiveTriggerMethod
       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)
+        trigger.addEventListener('click', (e) => {
+          if (this.useClickToOpen) {
+            e.preventDefault()
+            if (this.isTooltipVisible()) {
+              this.hideTooltip()
+            } else {
+              this.showTooltip(trigger)
             }
-          }, delayOpen)
+          } else {
+            this.showTooltip(trigger)
+          }
         })
+      } else {
+        if (!this.useClickToOpen) {
+          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(() => {
+          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()
               }
-            }, delayClose)
-          } else {
-            if (interactionEnabled) {
-              this.attachSafeZoneListener()
-            } else {
-              this.hideTooltip()
             }
-          }
-        })
-
-        if (interactionEnabled) {
-          this.tooltip.addEventListener('mouseenter', () => {
-            clearSafeZoneListener(this)
           })
 
-          this.tooltip.addEventListener('mouseleave', () => {
-            this.attachSafeZoneListener()
-          })
+          if (interactionEnabled) {
+            this.tooltip.addEventListener('mouseenter', () => {
+              clearSafeZoneListener(this)
+            })
+
+            this.tooltip.addEventListener('mouseleave', () => {
+              this.attachSafeZoneListener()
+            })
+          }
         }
       }
     })
   }
 
+  isTooltipVisible() {
+    return this.tooltip && this.tooltip.classList.contains('show')
+  }
+
   attachSafeZoneListener() {
     clearSafeZoneListener(this)
     this.safeZoneHandler = (e) => {
@@ -145,7 +160,7 @@ export default class PbTooltip extends PbEnhancedElement {
 
     this.tooltip.classList.add('show')
 
-    if (this.triggerMethod === 'click') {
+    if (this.effectiveTriggerMethod === 'click' && !this.useClickToOpen) {
       clearTimeout(this.autoHideTimeout)
       this.autoHideTimeout = setTimeout(() => {
         this.hideTooltip()
@@ -224,6 +239,14 @@ export default class PbTooltip extends PbEnhancedElement {
     return this.element.dataset.pbTooltipTriggerMethod || 'hover'
   }
 
+  get useClickToOpen() {
+    return this.element.dataset.pbTooltipUseClickToOpen === 'true'
+  }
+
+  get effectiveTriggerMethod() {
+    return this.useClickToOpen ? 'click' : this.triggerMethod
+  }
+
   get tooltipInteraction() {
     return this.element.dataset.pbTooltipInteraction === 'true'
   }

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

@@ -21,6 +21,8 @@ module Playbook
       prop :trigger_method, type: Playbook::Props::Enum,
                             values: %w[hover click],
                             default: "hover"
+      prop :use_click_to_open, type: Playbook::Props::Boolean,
+                               default: false
       prop :width
 
       def classname
@@ -46,6 +48,10 @@ module Playbook
         out
       end
 
+      def effective_trigger_method
+        use_click_to_open ? "click" : (trigger_method || "hover")
+      end
+
       def data
         data = Hash(values[:data]).merge(
           pb_tooltip_kit: true,
@@ -54,8 +60,9 @@ module Playbook
           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_interaction: interaction
+          pb_tooltip_trigger_method: effective_trigger_method,
+          pb_tooltip_interaction: interaction,
+          pb_tooltip_use_click_to_open: use_click_to_open
         )
         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/dist/chunks/{_bar_graph-iq9-hk-x.js → _bar_graph-B9HqVkQv.js}

@@ -1 +1 @@
-import{jsx}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,m as mapColors,H as HighchartsReact,d as Highcharts,e as classnames,g as globalProps}from"./_typeahead-DeLOYzLb.js";import{h as highchartsTheme,m as merge,a as highchartsDarkTheme}from"./lib-GtpYwIew.js";const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:[{labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat&&axisFormat[0]?axisFormat[0].format:""},min:yAxisMin,max:yAxisMax,opposite:false,title:{text:Array.isArray(axisTitle)?axisTitle.length>0?axisTitle[0].name:null:axisTitle},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]}],xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors!==void 0&&colors.length>0?mapColors(colors):highchartsTheme.colors,plotOptions:{series:{stacking:stacking,pointStart:pointStart,borderWidth:stacking?0:"",events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(Array.isArray(axisTitle)&&axisTitle.length>1&&axisTitle[1].name){staticOptions.yAxis.push({labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat[1].format},min:yAxisMin,max:yAxisMax,opposite:true,title:{text:axisTitle[1].name},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]})}if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};export{BarGraph as B};
+import{jsx}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,m as mapColors,H as HighchartsReact,d as Highcharts,e as classnames,g as globalProps}from"./_typeahead-CiAYz-Py.js";import{h as highchartsTheme,m as merge,a as highchartsDarkTheme}from"./lib-BTYFzEXV.js";const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:[{labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat&&axisFormat[0]?axisFormat[0].format:""},min:yAxisMin,max:yAxisMax,opposite:false,title:{text:Array.isArray(axisTitle)?axisTitle.length>0?axisTitle[0].name:null:axisTitle},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]}],xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors!==void 0&&colors.length>0?mapColors(colors):highchartsTheme.colors,plotOptions:{series:{stacking:stacking,pointStart:pointStart,borderWidth:stacking?0:"",events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(Array.isArray(axisTitle)&&axisTitle.length>1&&axisTitle[1].name){staticOptions.yAxis.push({labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat[1].format},min:yAxisMin,max:yAxisMax,opposite:true,title:{text:axisTitle[1].name},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]})}if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};export{BarGraph as B};