playbook_ui 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8781 → 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8856

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_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};