playbook_ui 16.7.0 → 16.8.0.pre.alpha.PLAY2935formbuilderrequiredindicatorbug16780

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -22,123 +22,144 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
   }
 }
 
-.pb_tooltip_kit {
-  ~ .tooltip_tooltip,
-  .tooltip_tooltip {
-    display: block;
-    opacity: 0;
-    position: absolute;
-    left: $offscreen;
-    top: 0;
-    animation-name: fadeIn;
-    animation-duration: 150ms;
-    animation-timing-function: linear;
-    animation-fill-mode: forwards;
-
-    &.flipped {
-      margin-top: 15px;
-      .arrow {
-        border-color: transparent transparent $white transparent;
-        transform: rotate(180deg);
-      }
-    }
+$arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
+
+@mixin tooltip-base-styles {
+  display: block;
+  opacity: 0;
+  position: absolute;
+  left: $offscreen;
+  top: 0;
+  animation-name: fadeIn;
+  animation-duration: 150ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
 
+  &.flipped {
+    margin-top: 15px;
     .arrow {
-      content: " ";
-      position: absolute;
-      top: 100%;
-      left: calc(50% - 10px);
-      border-color: $white transparent transparent transparent;
-      border-style: solid;
-      border-width: 10px;
-      margin-bottom: 50px;
+      border-color: transparent transparent $white transparent;
+      transform: rotate(180deg);
     }
+  }
 
-    &.visible,
-    &.show {
-      z-index: $z_9;
-      padding: $space_xs $space_sm;
-      box-shadow: $shadow_deeper;
-      border-radius: $border_rad_light;
-    }
+  .arrow {
+    content: " ";
+    position: absolute;
+    top: 100%;
+    left: calc(50% - 10px);
+    border-color: $white transparent transparent transparent;
+    border-style: solid;
+    border-width: 10px;
+    margin-bottom: 50px;
+  }
 
-    // react only
-    &.visible {
-      color: $white;
+  &.visible {
+    z-index: $z_max !important;
+  }
+
+  &.visible,
+  &.show {
+    z-index: $z_max;
+    padding: $space_xs $space_sm;
+    box-shadow: $shadow_deeper;
+    border-radius: $border_rad_light;
+  }
+
+  &.visible {
+    color: $white;
+    background-color: rgba($black, $opacity_9);
+
+    .arrow_bg {
+      width: 10px;
+      height: 10px;
       background-color: rgba($black, $opacity_9);
-      &.right {
-        box-shadow: -8px 0 28px 0 $tooltip_shadow;
-      }
-      &.bottom {
-        box-shadow: 0 -12px 28px 0 $tooltip_shadow;
-      }
-      &.left {
-        box-shadow: 8px 0 28px 0 $tooltip_shadow;
-      }
-      // react arrow
-      .arrow_bg {
-        width: 10px;
-        height: 10px;
-        background-color: rgba($black, $opacity_9);
-        transform: rotate(45deg);
-      }
+      transform: rotate(45deg);
     }
+  }
 
-    //rails only
-    &.show {
-      opacity: 1;
-      margin-bottom: $space_sm;
-      color: $white;
-      background-color: rgba($black, $opacity_9);
-      &.fade_out {
-        animation-name: fadeOut;
-        animation-duration: 150ms;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-      }
-      .arrow {
-        border-color: $black transparent transparent transparent;
-        opacity: $opacity_9;
-      }
+  &.show {
+    opacity: 1;
+    margin-bottom: $space_sm;
+    color: $white;
+    background-color: rgba($black, $opacity_9);
+
+    &.fade_out {
+      animation-name: fadeOut;
+      animation-duration: 150ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+
+    .arrow {
+      border-color: $black transparent transparent transparent;
+      opacity: $opacity_9;
     }
   }
+}
+
+@mixin tooltip-dark-styles {
+  &.visible {
+    color: $charcoal;
+    background-color: $white;
+  }
+
+  &.show {
+    color: $charcoal;
+    background-color: $white;
+  }
+
+  .arrow {
+    border-color: $white transparent transparent transparent;
+    opacity: $opacity_10;
+  }
+
+  .arrow_bg {
+    background-color: $white;
+  }
+
+  &.flipped {
+    .arrow {
+      border-color: transparent transparent $black transparent;
+      opacity: $opacity_9;
+    }
+  }
+}
+
+.pb_tooltip_kit {
+  ~ .tooltip_tooltip,
+  .tooltip_tooltip {
+    @include tooltip-base-styles;
+  }
 
   &.dark {
-    ~.tooltip_tooltip,
+    &.tooltip_tooltip,
+    ~ .tooltip_tooltip,
     .tooltip_tooltip {
-      //react
-      &.visible {
-        color: $charcoal;
-        background-color: $white;
-      }
-      //rails
-      &.show {
-        color: $charcoal;
-        background-color: $white;
-      }
-      .arrow {
-        border-color: $white transparent transparent transparent;
-        opacity: $opacity_10;
-      }
-      // react arrow
-      .arrow_bg {
-        background-color: $white;
-      }
-      &.flipped {
-        .arrow {
-          border-color: transparent transparent $black transparent;
-          opacity: $opacity_9;
-        }
-      }
+      @include tooltip-dark-styles;
     }
   }
 }
 
-// Right
-.pb_tooltip_kit .tooltip_tooltip {
-  $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
+.tooltip_tooltip {
+  @include tooltip-base-styles;
+}
+
+.tooltip_tooltip.dark,
+.pb_tooltip_kit.dark ~ .tooltip_tooltip,
+.pb_tooltip_kit.dark .tooltip_tooltip {
+  @include tooltip-dark-styles;
+}
 
-  &[data-popper-placement="right"] {
+.tooltip_tooltip,
+.pb_tooltip_kit ~ .tooltip_tooltip,
+.pb_tooltip_kit .tooltip_tooltip {
+  &[data-placement="right"],
+  &[data-placement="right-start"],
+  &[data-placement="right-end"],
+  &[data-popper-placement="right"],
+  &[data-popper-placement="right-start"],
+  &[data-popper-placement="right-end"] {
     box-shadow: -8px 0 28px 0 $tooltip_shadow;
     .arrow {
       left: -18px;
@@ -148,11 +169,16 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       transform: rotate(90deg);
     }
     &.flipped .arrow {
-        transform: rotate(270deg);
+      transform: rotate(270deg);
     }
   }
 
-  &[data-popper-placement="bottom"] {
+  &[data-placement="bottom"],
+  &[data-placement="bottom-start"],
+  &[data-placement="bottom-end"],
+  &[data-popper-placement="bottom"],
+  &[data-popper-placement="bottom-start"],
+  &[data-popper-placement="bottom-end"] {
     box-shadow: 0 -12px 28px 0 $tooltip_shadow;
     .arrow {
       top: -18px;
@@ -164,7 +190,12 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     }
   }
 
-  &[data-popper-placement="left"] {
+  &[data-placement="left"],
+  &[data-placement="left-start"],
+  &[data-placement="left-end"],
+  &[data-popper-placement="left"],
+  &[data-popper-placement="left-start"],
+  &[data-popper-placement="left-end"] {
     box-shadow: 8px 0 28px 0 $tooltip_shadow;
     .arrow {
       margin-bottom: 0;

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -1,7 +1,9 @@
 import React, { useRef, useState, forwardRef, ForwardedRef } from "react"
 
 import {
+  autoUpdate,
   arrow,
+  FloatingPortal,
   flip,
   offset,
   Placement,
@@ -43,6 +45,8 @@ type TooltipProps = {
   forceOpenTooltip?: boolean,
 } & GlobalProps
 
+const TOOLTIP_BOUNDARY_PADDING = 8
+
 const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): React.ReactElement => {
   const {
     aria = {},
@@ -90,17 +94,20 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     y,
   } = useFloating({
     strategy: position,
+    whileElementsMounted: autoUpdate,
     middleware: [
-      arrow({
-        element: arrowRef,
-      }),
+      offset(10),
       flip({
         fallbackPlacements: ["top", "right", "bottom", "left"],
         fallbackStrategy: "initialPlacement",
         flipAlignment: false,
+        padding: TOOLTIP_BOUNDARY_PADDING,
+      }),
+      shift({ padding: TOOLTIP_BOUNDARY_PADDING }),
+      arrow({
+        element: arrowRef,
+        padding: TOOLTIP_BOUNDARY_PADDING,
       }),
-      offset(10),
-      shift()
     ],
     open,
     onOpenChange(open) {
@@ -136,6 +143,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     right: "left",
     top: "bottom",
   }[placement.split("-")[0]]
+  const arrowPlacementStyle = staticSide ? { [staticSide]: "-5px" } : {}
 
   const tooltipSizing = () => {
     return Object.assign(
@@ -174,43 +182,48 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
         {children}
       </div>
       {(open || forceOpenTooltip) && (
-        <div
-            {...getFloatingProps({
-              className: `tooltip_tooltip ${placement} visible`,
-              ref: refs.setFloating,
-              role: "tooltip",
-              style: {
-                ...tooltipSizing(),
-                position: strategy,
-                top: y ?? 0,
-                left: x ?? 0,
-                zIndex: zIndex ?? 0,
-              },
-            })}
-        >
-          <Flex
-              align="center"
-              gap="xs"
-          >
-            {icon && (
-            <i className={`pb_icon_kit`}>
-              <Icon
-                  icon={icon}
-              />
-            </i>)}
-            {text}
-          </Flex>
+        <FloatingPortal>
           <div
-              className="arrow_bg"
-              ref={arrowRef}
-              style={{
-                position: "absolute",
-                left: arrowX != null ? `${arrowX}px` : "",
-                top: arrowY != null ? `${arrowY}px` : "",
-                [staticSide]: "-5px",
-              }}
-          />
-        </div>
+              data-placement={placement}
+              {...getFloatingProps({
+                className: classnames(`tooltip_tooltip ${placement} visible`, {
+                  dark: rest.dark,
+                }),
+                ref: refs.setFloating,
+                role: "tooltip",
+                style: {
+                  ...tooltipSizing(),
+                  position: strategy,
+                  top: y ?? 0,
+                  left: x ?? 0,
+                  ...(zIndex ? { zIndex } : {}),
+                },
+              })}
+          >
+            <Flex
+                align="center"
+                gap="xs"
+            >
+              {icon && (
+              <i className={`pb_icon_kit`}>
+                <Icon
+                    icon={icon}
+                />
+              </i>)}
+              {text}
+            </Flex>
+            <div
+                className="arrow_bg"
+                ref={arrowRef}
+                style={{
+                  position: "absolute",
+                  left: arrowX != null ? `${arrowX}px` : "",
+                  top: arrowY != null ? `${arrowY}px` : "",
+                  ...arrowPlacementStyle,
+                }}
+            />
+          </div>
+        </FloatingPortal>
       )}
     </>
   )

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -2,6 +2,17 @@ import React from "react";
 import { cleanup, render, screen, fireEvent, waitFor } from "../utilities/test-utils";
 import { Button, Tooltip } from "playbook-ui";
 
+jest.mock("@floating-ui/react", () => {
+  const actual = jest.requireActual("@floating-ui/react")
+
+  return {
+    ...actual,
+    useFloating: jest.fn(actual.useFloating),
+  }
+})
+
+const { useFloating } = require("@floating-ui/react")
+
 function TooltipTest() {
   const text = "this is a text",
     placement = "top",
@@ -35,7 +46,10 @@ test("opens on mouseenter", async () => {
 
   fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
   await waitFor(() => {
-    expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+    const tooltip = screen.queryByRole("tooltip");
+
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip?.closest("[data-floating-ui-portal]")).toBeInTheDocument();
     cleanup();
   })
 });
@@ -72,6 +86,7 @@ test("has default position absolute", async () => {
   fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
   await waitFor(() => {
     expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "absolute"});
+    expect(screen.queryByRole("tooltip")).not.toHaveStyle({"z-index": "0"});
     cleanup();
   })
 
@@ -127,4 +142,47 @@ test("doesn't display tooltip with showTooltip set to false", async () => {
   })
 
   cleanup();
-});
+});
+
+test("keeps the arrow visible when placement flips left with center offset", async () => {
+  const actual = jest.requireActual("@floating-ui/react")
+
+  useFloating.mockImplementationOnce((options) => {
+    const result = actual.useFloating(options)
+
+    return {
+      ...result,
+      middlewareData: {
+        ...result.middlewareData,
+        arrow: {
+          centerOffset: 12,
+          x: 6,
+          y: 10,
+        },
+      },
+      open: true,
+      placement: "left",
+      x: 20,
+      y: 30,
+    }
+  })
+
+  render(
+    <Tooltip
+        data={{ testid: "left-placement-arrow-test" }}
+        forceOpenTooltip
+        placement="left"
+        text="left placement"
+        zIndex="10"
+    >
+      <Button text="hover me" />
+    </Tooltip>
+  )
+
+  const tooltip = await screen.findByRole("tooltip")
+  const arrow = tooltip.querySelector(".arrow_bg")
+
+  expect(tooltip).toHaveAttribute("data-placement", "left")
+  expect(arrow).toBeInTheDocument()
+  expect(arrow).not.toHaveStyle({ opacity: "0" })
+})

data/dist/chunks/{_pb_line_graph-CIWJe3Gr.js → _pb_line_graph-BgsTI0CL.js}

@@ -1 +1 @@
-import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-CqO4Tko1.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-czQnE40X.js";import highchartsMore from"highcharts/highcharts-more";import solidGauge from"highcharts/modules/solid-gauge";const barGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"column"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],credits:{enabled:false},legend:{enabled:false,itemStyle:{color:colors.text_lt_light,fill:colors.text_lt_light,fontSize:typography.text_smaller}},xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbBarGraph=props=>{const{aria:aria={},data:data={},id:id,htmlOptions:htmlOptions={},options:options,className:className}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_bar_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbBarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbCircleChartTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},chart:{type:"pie"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{pie:{dataLabels:{enabled:false,connectorShape:"straight",connectorWidth:3,format:"<div>{point.name}</div>",style:{fontFamily:typography.font_family_base,fontSize:typography.text_smaller,color:colors.text_lt_light,fontWeight:typography.regular,textOutline:"2px $white"}},innerSize:"50%",borderColor:"",borderWidth:null,colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7]}},legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},credits:{enabled:false}};const PbCircleChart=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_circle_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbCircleChart />",options);return{}}return Highcharts.merge({},pbCircleChartTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbGaugeGraphTheme={title:{text:"",style:{fontFamily:typography.font_family_base,fontSize:typography.text_larger}},chart:{type:"solidgauge",events:{render(){this.container;const arc=this.container.querySelector("path.gauge-pane");if(arc)arc.setAttribute("stroke-linejoin","round")}}},pane:{size:"90%",startAngle:-100,endAngle:100,background:[{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane",borderColor:colors.border_light,borderRadius:"50%"}]},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},yAxis:{min:0,max:100,lineWidth:0,tickPositions:[]},plotOptions:{solidgauge:{borderColor:colors.data_1,borderWidth:20,color:colors.data_1,radius:90,innerRadius:"90%",y:-26,dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:'<span class="fix">{y:,f}</span>',style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}},credits:{enabled:false}};const PbGaugeChart=props=>{const{aria:aria={},className:className,data:data={},htmlOptions:htmlOptions={},id:id,ref:ref,options:options={}}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_gauge_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbGaugeGraphTheme,options)}),[options]);highchartsMore(Highcharts);solidGauge(Highcharts);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,ref:ref,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbLineGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"line"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{line:{dataLabels:{enabled:false}}},credits:{enabled:false},legend:{enabled:false,itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,tickPixelInterval:50,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbLineGraph=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_line_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbLineGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};export{PbBarGraph as P,PbCircleChart as a,PbGaugeChart as b,PbLineGraph as c};
+import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-DOB47YGB.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-BzglXly2.js";import highchartsMore from"highcharts/highcharts-more";import solidGauge from"highcharts/modules/solid-gauge";const barGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"column"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],credits:{enabled:false},legend:{enabled:false,itemStyle:{color:colors.text_lt_light,fill:colors.text_lt_light,fontSize:typography.text_smaller}},xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbBarGraph=props=>{const{aria:aria={},data:data={},id:id,htmlOptions:htmlOptions={},options:options,className:className}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_bar_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbBarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbCircleChartTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},chart:{type:"pie"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{pie:{dataLabels:{enabled:false,connectorShape:"straight",connectorWidth:3,format:"<div>{point.name}</div>",style:{fontFamily:typography.font_family_base,fontSize:typography.text_smaller,color:colors.text_lt_light,fontWeight:typography.regular,textOutline:"2px $white"}},innerSize:"50%",borderColor:"",borderWidth:null,colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7]}},legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},credits:{enabled:false}};const PbCircleChart=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_circle_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbCircleChart />",options);return{}}return Highcharts.merge({},pbCircleChartTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbGaugeGraphTheme={title:{text:"",style:{fontFamily:typography.font_family_base,fontSize:typography.text_larger}},chart:{type:"solidgauge",events:{render(){this.container;const arc=this.container.querySelector("path.gauge-pane");if(arc)arc.setAttribute("stroke-linejoin","round")}}},pane:{size:"90%",startAngle:-100,endAngle:100,background:[{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane",borderColor:colors.border_light,borderRadius:"50%"}]},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},yAxis:{min:0,max:100,lineWidth:0,tickPositions:[]},plotOptions:{solidgauge:{borderColor:colors.data_1,borderWidth:20,color:colors.data_1,radius:90,innerRadius:"90%",y:-26,dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:'<span class="fix">{y:,f}</span>',style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}},credits:{enabled:false}};const PbGaugeChart=props=>{const{aria:aria={},className:className,data:data={},htmlOptions:htmlOptions={},id:id,ref:ref,options:options={}}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_gauge_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbGaugeGraphTheme,options)}),[options]);highchartsMore(Highcharts);solidGauge(Highcharts);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,ref:ref,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbLineGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"line"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{line:{dataLabels:{enabled:false}}},credits:{enabled:false},legend:{enabled:false,itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,tickPixelInterval:50,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbLineGraph=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_line_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbLineGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};export{PbBarGraph as P,PbCircleChart as a,PbGaugeChart as b,PbLineGraph as c};