playbook_ui 15.1.0.pre.alpha.testingtiptap11004 → 15.1.0.pre.alpha.typeaheadscss11143

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7666b6fac1ed12cd57f6e04399e9435d460a274c5d44d38216ce0ed94024cde7
-  data.tar.gz: de5912fdd691035fb02f2a92d9692309a08586ec430141ee8ed0b64ee5b3e70e
+  metadata.gz: 146b2b16a0667788778819436fdb56b04d5a5287d6f0495d3959a6462816432c
+  data.tar.gz: b8076a2e020e664f1e6765e9bc18ea8ebc7b4281046d57489952e0b040aff998
 SHA512:
-  metadata.gz: 60685d79142f02e761606168b87b47bd68384f8f112270e2a77ffd8233b02660fd949ddc288160a769dad5ce70e32a814509f90dd15b6b4cd6bcfb51088cde41
-  data.tar.gz: 3b8ceb9c5588c986fd04fcbbdf230e5d6a0a2852afd72d11d4c06685433b717e468e44ee9ec63756fbbe887812f9977a7013f87e62ca1e07108acc22aeb2eb41
+  metadata.gz: 2efcb9e518ee3d5f013522621873d38ad9a18522d59b9d2b7f6f547aed7cd88ad7694fa01d5acd9b83cd4973e6a60ecb7b291a0631a216ee4e7f8aeeb8d8983d
+  data.tar.gz: c63671f77d1ac529fa10ca7bc079e1d36ccdbb73d04b64b5b7744630edf6c8a67e53d65146044b3c4e491f8e62ad2e2a8335778583868cda38a3ddd800f0467e

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -21,6 +21,15 @@
   ]
 %>
 
+<%
+  example_typeahead_options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
 <% treeData = [{
     label: "Power Home Remodeling",
     value: "Power Home Remodeling",
@@ -89,6 +98,8 @@
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
+  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
+  <%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
   <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 
@@ -26,7 +26,7 @@ type IconCircleProps = {
     | "orange"
     | "green"
     | "lighter",
-}
+} & GlobalProps
 
 const IconCircle = (props: IconCircleProps) => {
   const {

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss

@@ -3,51 +3,45 @@
 @import "../tokens/spacing";
 @import "../pb_icon_circle/icon_circle";
 
-[class^=pb_icon_stat_value_kit]{
+.pb_icon_stat_value_kit_horizontal,
+.pb_icon_stat_value_kit_vertical
+ {
   display: flex;
   align-items: baseline;
 
-  &[class*=_vertical]  {
+  &.pb_icon_stat_value_kit_vertical {
     flex-direction: column;
 
-    &[class*=_center]  {
+    &.text_align_center {
       align-items: center;
 
-      [class^=pb_title],
-      [class^=pb_body],
-      [class^=pb_caption] {
+      .pb_title_kit,
+      .pb_body_kit,
+      .pb_caption_kit_md {
         text-align: center;
       }
     }
 
-    &[class*=_right]  {
+    &.text_align_right {
       align-items: flex-end;
 
-      [class^=pb_title],
-      [class^=pb_body],
-      [class^=pb_caption] {
+      .pb_title_kit,
+      .pb_body_kit,
+      .pb_caption_kit_md {
         text-align: right;
       }
     }
-
-    [class^=pb_icon_circle] {
-      margin-bottom: $space-xs;
-    }
   }
 
-  &[class*=_horizontal]  {
+  &.pb_icon_stat_value_kit_horizontal {
     align-items: center;
 
-    &[class*=_center]  {
+    &.text_align_center {
       justify-content: center;
     }
 
-    &[class*=_right]  {
+    &.text_align_right {
       justify-content: flex-end;
     }
-
-    [class^=pb_icon_circle] {
-      margin-right: $space-sm;
-    }
   }
 }

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -33,8 +33,7 @@ type IconStatValueProps = {
     | "yellow"
     | "orange"
     | "green"
-    | "lighter",
-}
+} & GlobalProps
 
 const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
@@ -50,13 +49,13 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
     text = '',
     unit = '',
     value = 0,
-    variant = 'lighter',
+    variant = 'default',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
+    buildCss('pb_icon_stat_value_kit', orientation), globalProps(props),
     className
   )
   const titleSize = function(size: "sm" | "md" | "lg") {
@@ -101,6 +100,8 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
       <IconCircle
           dark={dark}
           icon={icon}
+          marginBottom={orientation == 'vertical' ? 'xs' : undefined}
+          marginRight={orientation == 'horizontal' ? 'sm' : undefined}
           size={size}
           variant={variant}
       />

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -3,6 +3,8 @@
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,
         icon: object.icon,
+        margin_right: object.icon_margin_right,
+        margin_bottom: object.icon_margin_bottom,
         size: object.size,
         variant: object.variant }) %>
 

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -9,8 +9,8 @@ module Playbook
                   values: %w[sm md lg],
                   default: "sm"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue purple teal red yellow green orange lighter],
-                     default: "lighter"
+                     values: %w[default royal blue purple teal red yellow green orange],
+                     default: "default"
 
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
@@ -25,7 +25,7 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_icon_stat_value_kit", orientation, size, variant)
+        generate_classname("pb_icon_stat_value_kit", orientation)
       end
 
       def value_string
@@ -41,6 +41,14 @@ module Playbook
           3
         end
       end
+
+      def icon_margin_right
+        orientation === "horizontal" && "sm"
+      end
+
+      def icon_margin_bottom
+        orientation === "vertical" && "xs"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -18,7 +18,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_lighter")
+        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal")
     })
 
     test("renders icon", () => {
@@ -99,9 +99,10 @@ describe("IconStatValue Kit", () => {
                     value={64.18}
           />
             )
-    
+            const size = sizeProp === "sm" ? "3" : sizeProp === "md" ? "2" : "1"
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_lighter`)
+            const title = kit.querySelector(".pb_title_kit")
+            expect(title).toHaveClass(`pb_title_${size}`)
 
             cleanup()
         })
@@ -115,8 +116,7 @@ describe("IconStatValue Kit", () => {
         "teal",
         "red",
         "yellow",
-        "green",
-        "lighter"].forEach(
+        "green"].forEach(
             (colorProp) => {
             render(
                 <IconStatValue
@@ -128,9 +128,10 @@ describe("IconStatValue Kit", () => {
                     variant={colorProp}
           />
             )
-    
+
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_sm_${colorProp}`)
+            const iconCircle = kit.querySelector(`.pb_icon_circle_kit_size_sm_${colorProp}`)
+            expect(iconCircle).toBeInTheDocument()
 
             cleanup()
         }) 
@@ -149,7 +150,7 @@ describe("IconStatValue Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_lighter")
+            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical")
     })
 
 })

data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss

@@ -12,6 +12,7 @@
 }
 
 @mixin preview_tiptap_p {
+    margin: 1rem 0 0 0;
     min-height: 1rem;
 }
 
@@ -55,9 +56,13 @@
 }
 
 @mixin preview_tiptap_blockquote {
-    border-left: 3px solid $text_lt_lighter;
-    margin: 1.5rem 0;
-    padding-left: 1rem;
+    font-size: $font_larger;
+    padding: $space_sm $space_md;
+    font-style: italic;
+    margin: 1rem 0 0 0;
+    p {
+        margin: 0;
+    }
 }
 
 @mixin preview_tiptap_h1 {
@@ -65,6 +70,7 @@
     line-height: $text_larger;
     font-weight: $bolder;
     letter-spacing: $lspace_tight;
+    margin: 2.1rem 0 0 0;
 }
 
 @mixin preview_tiptap_h2 {
@@ -72,6 +78,7 @@
     line-height: $text_larger;
     font-weight: $bolder;
     letter-spacing: $lspace_tight;
+    margin: 1.9rem 0 0 0;
 }
 
 @mixin preview_tiptap_h3 {
@@ -79,6 +86,7 @@
     line-height: $text_large;
     font-weight: $bolder;
     letter-spacing: $lspace_tight;
+    margin: 1.7rem 0 0 0;
 }
 
 @mixin preview_tiptap_smaller_headings {
@@ -86,6 +94,7 @@
     line-height: $text_base;
     letter-spacing: $lspace_tight;
     font-weight: $bolder;
+    margin: 1rem 0 0 0;
 }
 
 @mixin preview_tiptap_hr {
@@ -101,6 +110,7 @@
 }
 
 @mixin preview_tiptap_ol {
+    margin: 1rem 0 0 0;
     padding-left: $space_md;
     list-style: decimal;
     li {

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -75,6 +75,16 @@
       margin-top: 0;
     }
 
+    h4,
+    h5,
+    h6,
+    ul,
+    ol,
+    blockquote,
+    p {
+      margin: 1rem 0 0 0;
+    }
+
     code {
       @include preview_tiptap_code;
     }

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -4,7 +4,7 @@
 @import "../tokens/shadows";
 @import "../tokens/positioning";
 
-[class^=pb_typeahead_kit] {
+.pb_typeahead_kit {
   .typeahead-kit-select__option {
     cursor: pointer;
   }
@@ -28,7 +28,7 @@
       transition: opacity .15s ease-in-out;
     }
   }
-  [class^=pb_text_input_kit] {
+  .pb_text_input_kit {
     .text_input_wrapper {
       .text_input {
         max-height: none;
@@ -47,7 +47,7 @@
       }
     }
   }
-  [class^=pb_list_kit] {
+  .pb_list_kit_xpadding_borderless_ {
     max-height: 18em;
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -60,15 +60,15 @@
     border-radius: $border_rad_heavier;
     transition: opacity .25s ease-in-out;
   }
-  &:focus-within [class^=pb_list_kit] {
+  &:focus-within .pb_list_kit_xpadding_borderless_ {
     display: block;
     opacity: 1;
   }
-  &:not(:focus-within) [class^=pb_list_kit] {
+  &:not(:focus-within) .pb_list_kit_xpadding_borderless_ {
     display: none;
     opacity: 0;
   }
-  [class^=pb_list_kit] {
+  .pb_list_kit_xpadding_borderless_ {
     li {
       transition: background-color .25s ease-in-out;
     }
@@ -161,7 +161,7 @@
   .typeahead-plus-icon {
     color: $text_lt_lighter;
   }
-  [class^=pb_badge_kit] span {
+  .pb_badge_kit_primary span {
     line-height: 16.5px;
     letter-spacing: normal;
   }
@@ -176,14 +176,14 @@
     }
   }
 
-  &[class*=dark] {
+  &.dark {
     .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
       color: $text_dk_light;
     }
     .pb_text_input_kit_label {
       color: $text_dk_light;
     }
-    [class^=pb_text_input_kit].dark .text_input_wrapper .text_input {
+    .pb_text_input_kit.dark .text_input_wrapper .text_input {
       display: inherit !important;
     }
     .typeahead-kit-select__menu {
@@ -227,7 +227,7 @@
     .typeahead-kit-select__option--is-focused {
       background-color: $active_dark;
     }
-    [class^=pb_list_kit] {
+    .pb_list_kit_xpadding_borderless_ {
       background-color: $bg_dark;
     }
     .pb_item_kit {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -53,6 +53,8 @@ type TypeaheadProps = {
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
   onChange?: any,
   optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
+  required?: boolean,
+  validation?: { message: string },
   searchContextSelector?: string,
   clearOnContextChange?: boolean,
   preserveSearchInput?: boolean,
@@ -94,12 +96,16 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   onChange,
   optionsByContext = {},
   searchContextSelector,
+  required = false,
+  validation,
   clearOnContextChange = false,
   preserveSearchInput = false, // Default to false to maintain backward compatibility
   ...props
 }: TypeaheadProps) => {
   // State to manage the input value when preserveSearchInput is true
   const [inputValue, setInputValue] = useState("")
+  // State to track if form has been submitted to control validation display for react rendered rails kit
+  const [formSubmitted, setFormSubmitted] = useState(false)
 
   // If preserveSearchInput is true, we need to control the input value
   const handleInputChange = preserveSearchInput
@@ -135,6 +141,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
   const selectProps = {
     cacheOptions: true,
+    required,
     components: {
       Control,
       ClearIndicator,
@@ -170,6 +177,27 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
   const [contextValue, setContextValue] = useState("")
 
+  // Add listener for form validation to track when validation should be shown (needed for react rendered rails kit)
+  useEffect(() => {
+    const handleInvalid = (event: Event) => {
+      const target = event.target as HTMLInputElement
+      const typeaheadContainer = target.closest('[data-pb-react-component="Typeahead"]')
+
+      if (typeaheadContainer) {
+        // Check if this invalid event is specifically for our typeahead by comparing names so we do not have to require ids
+        const invalidInputName = target.name || target.getAttribute('name')
+        if (invalidInputName === name) {
+          setFormSubmitted(true)
+        }
+      }
+    }
+    document.addEventListener('invalid', handleInvalid, true)
+    
+    return () => {
+      document.removeEventListener('invalid', handleInvalid, true)
+    }
+  }, [name])
+
   // Add listener for clearing
   useEffect(() => {
     const handleClear = () => {
@@ -230,6 +258,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       }
     }
 
+    // Reset form submitted state when a selection is made (this is all for react rendered rails kit)
+    if (action === 'select-option') {
+      setFormSubmitted(false)
+    }
+
     // If a value is selected and we're preserving input on blur, clear the input
     if (action === 'select-option' && preserveSearchInput) {
       setInputValue('')
@@ -268,6 +301,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
   const inlineClass = selectProps.inline ? 'inline' : null
 
+  const shouldShowValidationError = required && 
+                                   formSubmitted
+
+  const errorDisplay = error || (shouldShowValidationError ? validation?.message || "Please fill out this field." : "")
+
   return (
     <div
         {...dataProps}
@@ -276,7 +314,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     >
       <Tag
           classNamePrefix="typeahead-kit-select"
-          error={error}
+          error={errorDisplay}
           isDisabled={disabled}
           onChange={handleOnChange}
           {...selectProps}

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -101,6 +101,8 @@ module Playbook
           plusIcon: plus_icon,
           truncate: truncate,
           wrapped: wrapped,
+          required: required,
+          validation: validation,
           searchContextSelector: search_context_selector,
           optionsByContext: options_by_context,
           clearOnContextChange: clear_on_context_change,

data/dist/chunks/{_line_graph-BnK1i7QI.js → _line_graph-B-1uF3pN.js}

@@ -1 +1 @@
-import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{d as buildAriaProps,e as buildDataProps,f as buildHtmlProps,H as HighchartsReact,g as Highcharts,h as classnames,i as globalProps,j as HighchartsMore,S as SolidGauge,k as buildCss}from"./_typeahead-pbS3fEzb.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-QZuu1ltS.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{d as buildAriaProps,e as buildDataProps,f as buildHtmlProps,H as HighchartsReact,g as Highcharts,h as classnames,i as globalProps,j as HighchartsMore,S as SolidGauge,k as buildCss}from"./_typeahead-C8eN5nhR.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-QZuu1ltS.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};