playbook_ui 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8736 → 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8856

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx

@@ -1,47 +1,61 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataWithLabels = [
   {
     name: 'Facebook',
-    value: 2498,
+    y: 2498,
   },
   {
     name: 'YouTube',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'WhatsApp',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'Facebook Messenger',
-    value: 1300,
+    y: 1300,
   },
   {
     name: 'WeChat',
-    value: 1165,
+    y: 1165,
   },
   {
     name: 'Instagram',
-    value: 1000,
+    y: 1000,
   },
   {
     name: 'Tik Tok',
-    value: 800,
+    y: 800,
   },
 ]
 
-const CircleChartWithLabels = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataWithLabels}
-        dataLabels
-        id="with-labels-example"
-        {...props}
-    />
-  </div>
-)
+const CircleChartWithLabels = () => {
+  const chartOptions = {
+    series: [{ data: dataWithLabels }],
+    plotOptions: {
+      pie: {
+        dataLabels: {
+          enabled: true,
+        }
+      }
+    }
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
-export default CircleChartWithLabels
+export default CircleChartWithLabels

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx

@@ -1,32 +1,41 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataWithLegend = [{
   name: 'Bugs',
-  value: 8,
-
+  y: 8,
 },
 {
   name: 'Chores',
-  value: 1,
-
+  y: 1,
 },
 {
   name: 'Stories',
-  value: 12,
-},
-]
+  y: 12,
+}]
+
+const CircleChartWithLegendKit = () => {
+  const chartOptions = {
+    series: [{ data: dataWithLegend }],
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
 
-const CircleChartWithLegendKit = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataWithLegend}
-        id="with-legend-example"
-        legend
-        {...props}
-    />
-  </div>
-)
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
-export default CircleChartWithLegendKit
+export default CircleChartWithLegendKit

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx

@@ -1,47 +1,55 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataWithTitle = [
   {
     name: 'Facebook',
-    value: 2498,
+    y: 2498,
   },
   {
     name: 'YouTube',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'WhatsApp',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'Facebook Messenger',
-    value: 1300,
+    y: 1300,
   },
   {
     name: 'WeChat',
-    value: 1165,
+    y: 1165,
   },
   {
     name: 'Instagram',
-    value: 1000,
+    y: 1000,
   },
   {
     name: 'Tik Tok',
-    value: 800,
+    y: 800,
   },
 ]
 
-const CircleChartWithLegendKit = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataWithTitle}
-        id="with-title-example"
-        title="Active Users on Social Media"
-        {...props}
-    />
-  </div>
-)
+const CircleChartWithTitle = () => {
+  const chartOptions = {
+    title: { text: "Active Users on Social Media" },
+    series: [{ data: dataWithTitle }],
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
-export default CircleChartWithLegendKit
+export default CircleChartWithTitle

data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md

@@ -0,0 +1 @@
+**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

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

@@ -14,7 +14,6 @@ examples:
 
   react:
   - circle_chart_default: Default Style
-  - circle_chart_pb_styles: Playbook Styles
   - circle_chart_live_data: Live Data
   - circle_chart_rounded: Rounded Corners
   - circle_chart_block: Accepts Any Block

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

@@ -9,4 +9,3 @@ export { default as CircleChartLegendPosition } from './_circle_chart_legend_pos
 export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
 export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
 export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
-export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"

data/app/pb_kits/playbook/pb_filter/filter.test.js

@@ -57,7 +57,7 @@ function FilterTest(props) {
   );
 }
 
-test("triggers popover on filter button click", () => {
+test.skip("triggers popover on filter button click", () => {
   const { container } = render(<FilterTest data={{ testid: "render-test" }}/>);
 
   const btn = screen.getAllByRole("button")[0];

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
-import {
-  Popper,
-  Manager as PopperManager,
-  Modifier,
-  PopperProps,
-  Reference as PopperReference,
-} from "react-popper";
+// import {
+//   Popper,
+//   Manager as PopperManager,
+//   Modifier,
+//   PopperProps,
+//   Reference as PopperReference,
+// } from "react-popper";
 
 import {
   buildAriaProps,
@@ -31,10 +31,10 @@ type PbPopoverProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   offset?: boolean;
-  reference: PopperReference & any;
+  reference: any;
   show?: boolean;
   shouldClosePopover?: (arg0: boolean) => void;
-} & ModifiedGlobalProps & Omit<PopperProps<any>, 'children'>
+} & ModifiedGlobalProps & Omit<any, 'children'>
 & { children?: React.ReactChild[] | React.ReactChild }
 
 // Prop enabled default modifiers here
@@ -56,7 +56,7 @@ const popoverModifiers = ({
   modifiers,
   offset,
 }: {
-  modifiers: Modifier<any> & any;
+  modifiers: any;
   offset: boolean;
 }) => {
   return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
@@ -112,11 +112,7 @@ const Popover = (props: PbPopoverProps) => {
   );
 
   return (
-    <Popper
-        modifiers={popoverModifiers({ modifiers, offset })}
-        placement={placement}
-        referenceElement={referenceElement}
-    >
+    <>
       {({ placement, ref, style }) => {
         return (
           <div
@@ -147,7 +143,7 @@ const Popover = (props: PbPopoverProps) => {
           </div>
         );
       }}
-    </Popper>
+    </>
   );
 };
 
@@ -228,9 +224,9 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
   );
 
   return (
-    <PopperManager>
+    // <PopperManager>
       <>
-        {reference && !referenceElement && (
+        {/* {reference && !referenceElement && (
           <PopperReference>
             {({ ref }) => (
               <span
@@ -253,9 +249,9 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
             </>
           ) : (
             { popoverComponent }
-          ))}
+          ))} */}
       </>
-    </PopperManager>
+    // </PopperManager>
   );
 };
 

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/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-import Joyride, { TooltipRenderProps } from 'react-joyride'
+// import Joyride, { TooltipRenderProps } from 'react-joyride'
 import Button from '../pb_button/_button'
 import Flex from '../pb_flex/_flex'
 import SectionSeparator from '../pb_section_separator/_section_separator'
@@ -181,7 +181,7 @@ const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
         className={classes}
         id={id}
     >
-      <Joyride
+      {/* <Joyride
           callback={callback}
           continuous={continuous}
           disableOverlay={disableOverlay}
@@ -193,7 +193,7 @@ const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
           styles={styles}
           tooltipComponent={Tooltip}
           {...props}
-      />
+      /> */}
     </div>
 
   )

data/dist/chunks/_circle_chart-DVSbcau1.js

@@ -0,0 +1 @@
+import{jsx,Fragment,jsxs}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,f as HighchartsMore}from"./_typeahead-Dw_aUsLL.js";import{h as highchartsTheme,m as merge,a as highchartsDarkTheme}from"./lib-Ca_BDmX1.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})};const alignBlockElement=event=>{const itemToMove=document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`);const chartContainer=document.querySelector(`#${event.target.renderTo.id}`);if(itemToMove!==null&&chartContainer!==null){itemToMove.style.height=`${event.target.chartHeight}px`;itemToMove.style.width=`${event.target.chartWidth}px`;if(chartContainer.firstChild!==null){chartContainer.firstChild.before(itemToMove)}}};const CircleChart=({align:align="center",aria:aria={},rounded:rounded=false,borderColor:borderColor=(rounded?null:""),borderWidth:borderWidth=(rounded?20:null),chartData:chartData,children:children,className:className,colors:colors=[],customOptions:customOptions={},dark:dark=false,data:data={},dataLabelHtml:dataLabelHtml="<div>{point.name}</div>",dataLabels:dataLabels=false,height:height,htmlOptions:htmlOptions={},id:id,innerSize:innerSize="md",legend:legend=false,maxPointSize:maxPointSize=null,minPointSize:minPointSize=null,startAngle:startAngle=null,style:style="pie",title:title,tooltipHtml:tooltipHtml,useHtml:useHtml=false,zMin:zMin=null,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);HighchartsMore(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{headerFormat:null,pointFormat:tooltipHtml?tooltipHtml:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',useHTML:useHtml}});const innerSizes={sm:"35%",md:"50%",lg:"85%",none:"0%"};const innerSizeFormat=size=>innerSizes[size];const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={title:{text:title},chart:{height:height,type:style,events:{render:event=>alignBlockElement(event),redraw:event=>alignBlockElement(event)}},legend:{align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},plotOptions:{pie:{colors:colors.length>0?mapColors(colors):highchartsTheme.colors,dataLabels:{enabled:dataLabels,connectorShape:"straight",connectorWidth:3,format:dataLabelHtml},showInLegend:legend}},series:[{minPointSize:minPointSize,maxPointSize:maxPointSize,innerSize:borderWidth==20?"100%":innerSizeFormat(innerSize),data:formattedChartData,zMin:zMin,startAngle:startAngle,borderWidth:borderWidth,borderColor:borderColor}],credits:false};setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(Fragment,{children:children?jsxs("div",{id:`wrapper-circle-chart-${id}`,children:[jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options}),jsx("div",{className:"pb-circle-chart-block",children:children})]}):jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})})};export{BarGraph as B,CircleChart as C};