playbook_ui 14.24.0 → 14.25.0.pre.alpha.PLAY2413togglefocusstate9789

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import classnames from 'classnames'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -123,6 +123,13 @@ const Pagination = ( props: PaginationProps) => {
     
     return buttons;
   };
+
+  // Sync internal state with external current prop
+  useEffect(() => {
+    if (current >= 1 && current <= total) {
+      setCurrentPage(current);
+    }
+  }, [current, total]);
   
 
   const ariaProps = buildAriaProps(aria)

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import Flex from '../../pb_flex/_flex'
+import Pagination from '../../pb_pagination/_pagination'
+import Select from '../../pb_select/_select'
+import Table from '../../pb_table/_table'
+
+import { data } from "./data";
+
+const PaginationExternalControl = (props) => {
+  const [totalItems, setTotalItems] = useState(20);
+  const [itemsPerPage, setItemsPerPage] = useState(5);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+  const limitedData = data.slice(0, totalItems);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const paginatedItems = limitedData.slice(startIndex, startIndex + itemsPerPage);
+
+  const handleTotalItemsChange = (event) => {
+    const value = Number(event.target.value);
+    setTotalItems(value);
+    setCurrentPage(1);
+  };
+
+  const handleItemsPerPageChange = (event) => {
+    const value = Number(event.target.value);
+    setItemsPerPage(value);
+    setCurrentPage(1);
+  };
+
+  return (
+    <>
+        <Flex gap="sm">
+            <Select
+                label="Total Items"
+                onChange={handleTotalItemsChange}
+                options={[
+                    { value: "5", text: "5" },
+                    { value: "10", text: "10" },
+                    { value: "20", text: "20" }
+                ]}
+                size="sm"
+                value={String(totalItems)}
+                {...props}
+            />
+
+            <Select
+                label="Items per Page"
+                onChange={handleItemsPerPageChange}
+                options={[
+                    { value: "3", text: "3" },
+                    { value: "5", text: "5" },
+                    { value: "10", text: "10" }
+                ]}
+                size="sm"
+                value={String(itemsPerPage)}
+                {...props}
+            />
+        </Flex>
+
+        <Pagination
+            current={currentPage}
+            key={`pagination-top-${currentPage}`}
+            marginBottom="xs"
+            onChange={handlePageChange}
+            range={5}
+            total={totalPages}
+            {...props}
+        />
+        <Table 
+            marginBottom="xs"
+            responsive="none" 
+            size="sm" 
+            {...props}
+        >
+            <Table.Head>
+            <Table.Row>
+                <Table.Header>{"Column 1"}</Table.Header>
+                <Table.Header>{"Column 2"}</Table.Header>
+                <Table.Header>{"Column 3"}</Table.Header>
+                <Table.Header>{"Column 4"}</Table.Header>
+                <Table.Header>{"Column 5"}</Table.Header>
+            </Table.Row>
+            </Table.Head>
+            <Table.Body>
+            {paginatedItems.map((row, index) => (
+                <Table.Row key={index}>
+                {row.map((cell, cellIndex) => (
+                    <Table.Cell key={cellIndex}>{cell}</Table.Cell>
+                ))}
+                </Table.Row>
+            ))}
+            </Table.Body>
+        </Table>
+        <Pagination
+            current={currentPage}
+            key={`pagination-bottom-${currentPage}`}
+            onChange={handlePageChange}
+            range={5}
+            total={totalPages}
+            {...props}
+        />
+    </>
+  )
+}
+
+export default PaginationExternalControl 

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md

@@ -0,0 +1,3 @@
+The Pagination component supports external control of the current page. This allows for programmatically reseting or changing the current page when filters or other criteria change, without needing to unmount and remount the component.
+
+In this example, changing the "Total Items" or "Items per Page" dropdowns will automatically reset the pagination to page 1, demonstrating how external control works. The pagination component will update its internal state to reflect the new `current` prop value.

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

@@ -6,3 +6,4 @@ examples:
   react:
   - pagination_default: Default
   - pagination_page_change: Page Change
+  - pagination_external_control: External Control

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

@@ -1,2 +1,3 @@
 export { default as PaginationDefault } from './_pagination_default.jsx'
 export { default as PaginationPageChange } from './_pagination_page_change.jsx'
+export { default as PaginationExternalControl } from './_pagination_external_control.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -197,13 +197,22 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateMissingAreaCode = (itiInit: any) => {
-    if (!required || !itiInit) return
+    if (!itiInit) return
     if (itiInit.getValidationError() === ValidationError.MissingAreaCode) {
       showFormattedError('missing area code')
       return true
     }
   }
 
+  const validateRepeatCountryCode = (itiInit: any) => {
+    if (!itiInit) return
+    const countryDialCode = itiInit.getSelectedCountryData().dialCode;
+    if (unformatNumber(inputValue).startsWith(countryDialCode)) {
+      return showFormattedError('repeat country code')
+    }
+  }
+
+
   const validateErrors = () => {
     if (!hasTyped && !error) return
 
@@ -213,6 +222,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     if (validateTooShortNumber(itiRef.current)) return
     if (validateUnhandledError(itiRef.current)) return
     if (validateMissingAreaCode(itiRef.current)) return
+    if (validateRepeatCountryCode(itiRef.current)) return
   }
 
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -7,7 +7,7 @@
     thead tr:not(:first-child) th {
       border-right: 1px solid $border_light !important;
     }
-    
+
     @media screen and (min-width: $screen-xs-min) {
       tr:hover, .pb_table_tr:hover {
         td:last-child, .pb_table_td:last-child {
@@ -15,5 +15,53 @@
         }
       }
     }
+
+    // Firefox-specific fix for sticky elements
+    @-moz-document url-prefix() {
+      // Target sticky headers
+      &.sticky-header {
+        th:not(:last-child) {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_light !important;
+        }
+
+        .pb_advanced_table_body {
+          .pinned-row {
+            td:not(:first-child):not(:last-child) {
+              border-right: none !important;
+              box-shadow: 1px 0 0 0 $border_light !important;
+            }
+          }
+        }
+      }
+
+      // Target sticky left columns
+      &.sticky-left-column {
+        td[style="left"], th[style="left"] {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_light !important;
+        }
+      }
+
+      // Target sticky right columns
+      &.sticky-right-column {
+        td[style="right"], th[style="right"] {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_light !important;
+        }
+      }
+
+      // Handle hover states in Firefox
+      @media screen and (min-width: $screen-xs-min) {
+        tr:hover, .pb_table_tr:hover {
+          td:last-child, .pb_table_td:last-child {
+            &[style="left"], &[style="right"] {
+              border-right: none !important;
+              box-shadow: 1px 0 0 0 darken($border_light, 10%) !important;
+            }
+          }
+        }
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -77,6 +77,7 @@ module Playbook
           name: mask.present? ? "" : name,
           pattern: validation_pattern || mask_pattern,
           placeholder: placeholder,
+          style: "cursor: #{cursor_style}",
           required: required,
           type: type,
           value: value,
@@ -84,6 +85,20 @@ module Playbook
         }.merge(input_options)
       end
 
+      def cursor_style
+        # If input is disabled, always use 'not-allowed'
+        return "not-allowed" if disabled
+
+        # If cursor prop is provided, convert it to kebab-case
+        if cursor.present?
+          # Convert camelCase (ex. notAllowed) to kebab-case (ex. not-allowed)
+          cursor.to_s.gsub(/([a-z\d])([A-Z])/, '\1-\2').downcase
+        else
+          # Default to 'pointer'
+          "pointer"
+        end
+      end
+
       def validation_message
         validation[:message] || ""
       end

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -46,7 +46,16 @@ $transition: .2s ease-in-out;
     }
 
     input {
-      display: none;
+      position: absolute;
+      opacity: 0;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+
+      &:focus + .pb_toggle_control {
+        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
+        outline: none;
+      }
 
       &:disabled + .pb_toggle_control {
         cursor: not-allowed;
@@ -61,7 +70,11 @@ $transition: .2s ease-in-out;
     }
 
     input:checked {
-      display: none;
+      position: absolute;
+      opacity: 0;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
 
       &:checked + .pb_toggle_control {
         border: $border_success;
@@ -73,6 +86,11 @@ $transition: .2s ease-in-out;
         }
       }
 
+      &:checked:focus + .pb_toggle_control {
+        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
+        outline: none;
+      }
+
       &:disabled + .pb_toggle_control {
         cursor: not-allowed;
         opacity: 0.5;

data/app/pb_kits/playbook/pb_toggle/_toggle.tsx

@@ -23,6 +23,7 @@ type Props = {
   name?: string,
   onChange?: InputCallback<HTMLInputElement>,
   size?: "sm" | "md",
+  tabIndex?: number,
   value?: string,
 } & GlobalProps
 
@@ -40,6 +41,7 @@ const Toggle = ({
   // Function body here
   },
   size = 'sm',
+  tabIndex,
   value,
   ...props
 }: Props): React.ReactElement => {
@@ -73,6 +75,7 @@ const Toggle = ({
               disabled={disabled}
               name={name}
               onChange={onChange}
+              tabIndex={tabIndex}
               type="checkbox"
               value={value}
           />

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.html.erb

@@ -1,9 +1,11 @@
 <%= pb_rails("toggle", props: {
-  checked: true
+  checked: true,  
+  input_options: { tabindex: 0 }
 }) %>
 
 <br>
 
 <%= pb_rails("toggle", props: {
-  checked: false
+  checked: false,
+  input_options: { tabindex: 0 }
 }) %>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -6,11 +6,12 @@ const ToggleDefault = () => {
     <>
       <Toggle
           checked
+          tabIndex={0}
       />
 
       <br />
 
-      <Toggle />
+      <Toggle tabIndex={0} />
     </>
   )
 }

data/app/pb_kits/playbook/utilities/_gap.scss

@@ -1,29 +1,17 @@
 @import "spacing";
 
-.gap_none {
-  gap: 0;
-}
+$gap_values: (
+  none: 0,
+  xxs: $space_xxs,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+);
 
-.gap_xxs {
-  gap: $space_xxs;
-}
+@include global_props_responsive_css($gap_values, 'gap', 'gap');
 
-.gap_xs {
-  gap: $space_xs;
-}
+@include global_props_responsive_css($gap_values, 'column_gap', 'column-gap');
 
-.gap_sm {
-  gap: $space_sm;
-}
-
-.gap_md {
-  gap: $space_md;
-}
-
-.gap_lg {
-  gap: $space_lg;
-}
-
-.gap_xl {
-  gap: $space_xl;
-}
+@include global_props_responsive_css($gap_values, 'row_gap', 'row-gap');

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -27,6 +27,8 @@ export default [
   "overflow",
   "order",
   "numberSpacing",
+  "rowGap",
+  "columnGap",
   "gap",
   "maxWidth",
   "minWidth",

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -112,6 +112,14 @@ type Gap = {
   gap?: string,
 }
 
+type ColumnGap = {
+  columnGap?: string,
+}
+
+type RowGap = {
+  rowGap?: string,
+}
+
 type NumberSpacing = {
   numberSpacing?: "tabular",
 }
@@ -200,7 +208,7 @@ type MinHeight = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & Width & MinWidth & MaxWidth & Gap & NumberSpacing & Order & Overflow & Padding &
+  LineHeight & Margin & Width & MinWidth & MaxWidth & Gap & ColumnGap & RowGap & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -377,9 +385,25 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     return css.trimEnd()
   },
   gapProps: ({ gap }: Gap) => {
-    let css = ''
-    css += gap ? `gap_${gap} ` : ''
-    return css.trimEnd()
+    if (typeof gap === 'object') {
+      return getResponsivePropClasses(gap, 'gap')
+    } else {
+      return gap ? `gap_${gap}` : ''
+    }
+  },
+  columnGapProps: ({ columnGap }: ColumnGap) => {
+    if (typeof columnGap === 'object') {
+      return getResponsivePropClasses(columnGap, 'column_gap')
+    } else {
+      return columnGap ? `column_gap_${columnGap}` : ''
+    }
+  },
+  rowGapProps: ({ rowGap }: RowGap) => {
+    if (typeof rowGap === 'object') {
+      return getResponsivePropClasses(rowGap, 'row_gap')
+    } else {
+      return rowGap ? `row_gap_${rowGap}` : ''
+    }
   },
   minHeightProps: ({ minHeight }: MinHeight) => {
     const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]

data/dist/chunks/{_line_graph-BLS62QjW.js → _line_graph-CiVc-Cod.js}

@@ -1 +1 @@
-import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,c as buildDataProps,d as buildHtmlProps,H as HighchartsReact,e as Highcharts,f as classnames,g as globalProps,h as HighchartsMore,S as SolidGauge,i as buildCss}from"./_typeahead-CZL6rvfn.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-DgtxnJqa.js";const mapColors=array=>{const regex=/(data)\-[1-8]/;const newArray=array.map((item=>regex.test(item)?`${colors[`data_${item[item.length-1]}`]}`:item));return newArray};const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors2,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:colors2!==void 0&&colors2.length>0?mapColors(colors2):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:colors2=[],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:colors2.length>0?mapColors(colors2):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})})};const Gauge=({aria:aria={},chartData:chartData,customOptions:customOptions={},dark:dark=false,data:data={},disableAnimation:disableAnimation=false,fullCircle:fullCircle=false,height:height=null,htmlOptions:htmlOptions={},id:id,max:max=100,min:min=0,prefix:prefix="",showLabels:showLabels=false,style:style="solidgauge",suffix:suffix="",title:title="",tooltipHtml:tooltipHtml='<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',colors:colors$1=[],minorTickInterval:minorTickInterval=null,circumference:circumference=(fullCircle?[0,360]:[-100,100]),...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);SolidGauge(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{pointFormat:tooltipHtml,followPointer:true}});const css=buildCss({pb_gauge_kit:true});const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={chart:{events:{load(){setTimeout(this.reflow.bind(this),0)}},type:style,height:height},title:{text:title},yAxis:{min:min,max:max,lineWidth:0,tickWidth:0,minorTickInterval:minorTickInterval,tickAmount:2,tickPositions:[min,max],labels:{y:26,enabled:showLabels}},credits:false,series:[{data:formattedChartData}],pane:{center:["50%","50%"],size:"90%",startAngle:circumference[0],endAngle:circumference[1],background:{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane"}},colors:colors$1!==void 0&&colors$1.length>0?mapColors(colors$1):highchartsTheme.colors,plotOptions:{series:{animation:!disableAnimation},solidgauge:{borderColor:colors$1!==void 0&&colors$1.length===1?mapColors(colors$1).join():highchartsTheme.colors[0],borderWidth:20,radius:90,innerRadius:"90%",dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:`<span class="prefix${dark?" dark":""}">${prefix}</span><span class="fix${dark?" dark":""}">{y:,f}</span><span class="suffix${dark?" dark":""}">${suffix}</span>`,style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}}};setOptions(merge(staticOptions,customOptions));if(document.querySelector(".prefix")){document.querySelectorAll(".prefix").forEach((prefix2=>{prefix2.setAttribute("y","28")}));document.querySelectorAll(".fix").forEach((fix=>fix.setAttribute("y","38")))}}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(css,globalProps(props)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const LineGraph=({aria:aria={},data:data={},align:align="center",className:className="pb_bar_graph",customOptions:customOptions={},dark:dark=false,gradient:gradient=false,type:type="line",htmlOptions:htmlOptions={},id:id,legend:legend=false,toggleLegendClick:toggleLegendClick=true,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,axisTitle:axisTitle,xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,chartData:chartData,pointStart:pointStart,subTitle:subTitle,title:title,height:height,colors:colors2=[],...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:{min:yAxisMin,max:yAxisMax,title:{text:axisTitle}},xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{pointStart:pointStart,events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};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,CircleChart as C,Gauge as G,LineGraph as L};
+import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,c as buildDataProps,d as buildHtmlProps,H as HighchartsReact,e as Highcharts,f as classnames,g as globalProps,h as HighchartsMore,S as SolidGauge,i as buildCss}from"./_typeahead-BQnvz-Ks.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-CY5ZPzic.js";const mapColors=array=>{const regex=/(data)\-[1-8]/;const newArray=array.map((item=>regex.test(item)?`${colors[`data_${item[item.length-1]}`]}`:item));return newArray};const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors2,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:colors2!==void 0&&colors2.length>0?mapColors(colors2):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:colors2=[],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:colors2.length>0?mapColors(colors2):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})})};const Gauge=({aria:aria={},chartData:chartData,customOptions:customOptions={},dark:dark=false,data:data={},disableAnimation:disableAnimation=false,fullCircle:fullCircle=false,height:height=null,htmlOptions:htmlOptions={},id:id,max:max=100,min:min=0,prefix:prefix="",showLabels:showLabels=false,style:style="solidgauge",suffix:suffix="",title:title="",tooltipHtml:tooltipHtml='<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',colors:colors$1=[],minorTickInterval:minorTickInterval=null,circumference:circumference=(fullCircle?[0,360]:[-100,100]),...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);SolidGauge(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{pointFormat:tooltipHtml,followPointer:true}});const css=buildCss({pb_gauge_kit:true});const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={chart:{events:{load(){setTimeout(this.reflow.bind(this),0)}},type:style,height:height},title:{text:title},yAxis:{min:min,max:max,lineWidth:0,tickWidth:0,minorTickInterval:minorTickInterval,tickAmount:2,tickPositions:[min,max],labels:{y:26,enabled:showLabels}},credits:false,series:[{data:formattedChartData}],pane:{center:["50%","50%"],size:"90%",startAngle:circumference[0],endAngle:circumference[1],background:{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane"}},colors:colors$1!==void 0&&colors$1.length>0?mapColors(colors$1):highchartsTheme.colors,plotOptions:{series:{animation:!disableAnimation},solidgauge:{borderColor:colors$1!==void 0&&colors$1.length===1?mapColors(colors$1).join():highchartsTheme.colors[0],borderWidth:20,radius:90,innerRadius:"90%",dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:`<span class="prefix${dark?" dark":""}">${prefix}</span><span class="fix${dark?" dark":""}">{y:,f}</span><span class="suffix${dark?" dark":""}">${suffix}</span>`,style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}}};setOptions(merge(staticOptions,customOptions));if(document.querySelector(".prefix")){document.querySelectorAll(".prefix").forEach((prefix2=>{prefix2.setAttribute("y","28")}));document.querySelectorAll(".fix").forEach((fix=>fix.setAttribute("y","38")))}}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(css,globalProps(props)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const LineGraph=({aria:aria={},data:data={},align:align="center",className:className="pb_bar_graph",customOptions:customOptions={},dark:dark=false,gradient:gradient=false,type:type="line",htmlOptions:htmlOptions={},id:id,legend:legend=false,toggleLegendClick:toggleLegendClick=true,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,axisTitle:axisTitle,xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,chartData:chartData,pointStart:pointStart,subTitle:subTitle,title:title,height:height,colors:colors2=[],...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:{min:yAxisMin,max:yAxisMax,title:{text:axisTitle}},xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{pointStart:pointStart,events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};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,CircleChart as C,Gauge as G,LineGraph as L};