playbook_ui 15.4.0.pre.alpha.PLAY2582rails722112532 → 15.4.0.pre.alpha.PLAY2627requiredmultiselectdropdownbug12416

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx

@@ -6,6 +6,7 @@ import ProgressStepItem from '../_progress_step_item.tsx'
 const ProgressStepDefault = (props) => (
   <div>
     <ProgressStep
+        icon
         {...props}
     >
       <ProgressStepItem status="complete" />
@@ -18,24 +19,12 @@ const ProgressStepDefault = (props) => (
 
     <ProgressStep {...props}>
       <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-      <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
-      <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
-      <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
-      <ProgressStepItem status="inactive">{'Step 5'}</ProgressStepItem>
+      <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
+      <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
     </ProgressStep>
 
     <br />
     <br />
-
-    <ProgressStep 
-        icon
-        {...props}
-    >
-      <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-      <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
-      <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
-      <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
-    </ProgressStep>
   </div>
 )
 

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb

@@ -25,7 +25,13 @@
     Child
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
-    Child
+    <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
+  Card content
+<% end %>
+<br>
+<%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
+  Card content
+<% end %>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
     Child

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

@@ -3,7 +3,6 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
-  - progress_step_color: Color
   - progress_step_custom_icon: Custom Icon
   - progress_step_tooltip: Tooltip
 
@@ -11,6 +10,4 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
-  - progress_step_color: Color
-  - progress_step_custom_icon: Custom Icon
   - progress_step_tracker_click_events: Using State

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

@@ -2,5 +2,3 @@ export { default as ProgressStepDefault } from './_progress_step_default.jsx'
 export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
 export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'
 export { default as ProgressStepTrackerClickEvents } from './_progress_step_tracker_click_events.jsx'
-export { default as ProgressStepColor } from './_progress_step_color.jsx'
-export { default as ProgressStepCustomIcon } from './_progress_step_custom_icon.jsx'

data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js

@@ -107,44 +107,3 @@ test('should render the children elements', () => {
   expect(step2Kit).toHaveClass('pb_progress_step_item_active')
   expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
 })
-
-test('should render info color', () => {
-render( 
-        <ProgressStep
-            aria={{ label: testId }}
-            color="info"
-            data={{ testid: testId }} 
-            variant="tracker"
-        >
-          <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
-          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
-        </ProgressStep> 
-        )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker_info')
-})
-
-test('should render custom icon', () => {
-render( 
-        <ProgressStep
-            aria={{ label: testId }}
-            data={{ testid: testId }} 
-            variant="tracker"
-        >
-          <ProgressStepItem icon="exclamation-triangle" 
-              status="complete"
-          >
-            {'Step 1'}
-          </ProgressStepItem>
-          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
-          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
-        </ProgressStep> 
-        )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker')
-  const icon = kit.getAttribute('aria-label', "exclamation-triangle-icon")
-  expect(icon).toBeDefined()
-})

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -1,8 +1,6 @@
 import React from "react"
 import { useForm } from "react-hook-form"
-import Radio from "../_radio"
-import Body from "../../pb_body/_body"
-import Flex from "../../pb_flex/_flex"
+import { Radio, Flex, Body } from "playbook-ui"
 
 const RadioReactHook = () => {
   const { register, watch } = useForm({

data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx

@@ -1,8 +1,6 @@
 import React, { useState } from "react"
 import { useForm } from "react-hook-form"
-import Select from "../_select"
-import Body from "../../pb_body/_body"
-import Button from "../../pb_button/_button"
+import { Button, Body, Select } from "playbook-ui"
 
 const SelectReactHook = (props) => {
   const { register, handleSubmit, formState: { errors } } = useForm({

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -119,22 +119,21 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-left-shadow');
                     }
 
-                    const headerWidth = (header as HTMLElement).offsetWidth;
-                    accumulatedWidth += headerWidth;
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
 
-                    cells.forEach((cell) => {
-                        cell.classList.add('sticky');
-                        (cell as HTMLElement).style.left = `${accumulatedWidth - headerWidth}px`;
+                cells.forEach((cell) => {
+                    cell.classList.add('sticky');
+                    (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
-                        if (!isLastColumn) {
-                            cell.classList.add('with-border-right');
-                            cell.classList.remove('sticky-left-shadow');
-                        } else {
-                            cell.classList.remove('with-border-right');
-                            cell.classList.add('sticky-left-shadow');
-                        }
-                    });
-                }
+                    if (!isLastColumn) {
+                        cell.classList.add('with-border-right');
+                        cell.classList.remove('sticky-left-shadow');
+                    } else {
+                        cell.classList.remove('with-border-right');
+                        cell.classList.add('sticky-left-shadow');
+                    }
+                });
             });
         };
 
@@ -171,22 +170,21 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-right-shadow');
                     }
 
-                    const headerWidth = (header as HTMLElement).offsetWidth;
-                    accumulatedWidth += headerWidth;
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
 
-                    cells.forEach((cell) => {
-                        cell.classList.add('sticky');
-                        (cell as HTMLElement).style.right = `${accumulatedWidth - headerWidth}px`;
+                cells.forEach((cell) => {
+                    cell.classList.add('sticky');
+                    (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
-                        if (!isLastColumn) {
-                            cell.classList.add('with-border-left');
-                            cell.classList.remove('sticky-right-shadow');
-                        } else {
-                            cell.classList.remove('with-border-left');
-                            cell.classList.add('sticky-right-shadow');
-                        }
-                    });
-                }
+                    if (!isLastColumn) {
+                        cell.classList.add('with-border-left');
+                        cell.classList.remove('sticky-right-shadow');
+                    } else {
+                        cell.classList.remove('with-border-left');
+                        cell.classList.add('sticky-right-shadow');
+                    }
+                });
             });
         };
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Tooltip from '../_tooltip'
-import Button from '../../pb_button/_button'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
 
 const TooltipSizing = (props) => {
 

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

@@ -161,10 +161,6 @@
   .typeahead-plus-icon {
     color: $text_lt_lighter;
   }
-  .pb_badge_kit_primary {
-    margin-bottom: 2px;
-    margin-top: 2px;
-  }
   .pb_badge_kit_primary span {
     line-height: 16.5px;
     letter-spacing: normal;

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -62,7 +62,6 @@ const MultiValue = (props: Props) => {
             className={pillClassName}
             closeProps={removeProps}
             htmlOptions={{onKeyDown:handleKeyDown}}
-            marginRight="xs"
             removeIcon
             tabIndex={0}
             text={label}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
-import Typeahead from '../_typeahead'
-import Title from '../../pb_title/_title'
+import { Typeahead, Title } from 'playbook-ui'
 import { useForm } from 'react-hook-form'
 
 const languages = [

data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
 const UserFontOptions = (props) => {
   return (

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

@@ -11,8 +11,6 @@ $truncate-styles: (
   display: -webkit-box;
   -webkit-line-clamp: $number;
   -webkit-box-orient: vertical;
-  overflow-wrap: anywhere;
-  word-break: break-all;
 }
 
 @each $class, $number in $truncate-styles {

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

@@ -213,24 +213,10 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
-  const screenSizeValues = ["xs", "sm", "md", "lg", "xl"]
-  let classResult = ''
-  
-  // Handle default value separately (generates base class without size prefix)
-  if (prop.default !== undefined) {
-    const defaultValue: string = typeof(prop.default) === 'string' ? camelToSnakeCase(prop.default) : prop.default
-    classResult += `${classPrefix}_${defaultValue} `
-  }
-  
-  // Handle responsive sizes (generates classes with size prefix)
-  keys.forEach((key) => {
-    if (screenSizeValues.includes(key)) {
-      const propValue: string = typeof(prop[key]) === 'string' ? camelToSnakeCase(prop[key]) : prop[key]
-      classResult += `${classPrefix}_${key}_${propValue} `
-    }
-  })
-  
-  return classResult.trim()
+  return keys.map((size: Sizes) => {
+    const propValue: string = typeof(prop[size]) === 'string' ? camelToSnakeCase(prop[size]) : prop[size]
+    return `${classPrefix}_${size}_${propValue}`
+  }).join(" ")
 }
 
 //reusable function for top, bottom, right and left props
@@ -450,11 +436,9 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
         if (typeof zIndexEntry[1] == "number") {
           css += `z_index_${zIndexEntry[1]} `
         } else if (typeof zIndexEntry[1] == "object") {
-          const responsiveObj: {[key: string]: string} = {}
-          Object.entries(zIndexEntry[1]).forEach(([key, value]) => {
-            responsiveObj[key] = value.toString()
+          Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
+            css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
           })
-          css += getResponsivePropClasses(responsiveObj, 'z_index')
         } else if (zIndexEntry[1] === 'max') {
           css += `z_index_max `
         }
@@ -479,11 +463,9 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
         if (typeof displayEntry[1] == "string") {
           css += `display_${displayEntry[1]} `
         } else if (typeof displayEntry[1] == "object") {
-          const responsiveObj: {[key: string]: string} = {}
-          Object.entries(displayEntry[1]).forEach(([key, value]) => {
-            responsiveObj[key] = typeof value === 'string' ? value : value.toString()
+          Object.entries(displayEntry[1]).forEach((displayObj) => {
+            css += `display_${displayObj[0]}_${displayObj[1]} `
           })
-          css += getResponsivePropClasses(responsiveObj, 'display')
         } else {
           ' '
         }

data/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js

@@ -35,21 +35,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        alignContent={{ default: "spaceAround", xs: "center", sm: "spaceAround", md: "center" }}
-        data={{ testid: testId }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`align_content_space_around`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`align_content_xs_center`)
-  expect(kit).toHaveClass(`align_content_sm_space_around`)
-  expect(kit).toHaveClass(`align_content_md_center`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js

@@ -34,21 +34,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        alignItems={{ default: "end", xs: "center", sm: "end", md: "center" }}
-        data={{ testid: testId }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`align_items_end`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`align_items_xs_center`)
-  expect(kit).toHaveClass(`align_items_sm_end`)
-  expect(kit).toHaveClass(`align_items_md_center`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js

@@ -35,21 +35,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        alignSelf={{ default: "end", xs: "center", sm: "end", md: "center" }}
-        data={{ testid: testId }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`align_self_end`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`align_self_xs_center`)
-  expect(kit).toHaveClass(`align_self_sm_end`)
-  expect(kit).toHaveClass(`align_self_md_center`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js

@@ -36,21 +36,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        display={{ default: "none", xs: "block", sm: "none", md: "block" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`display_none`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`display_xs_block`)
-  expect(kit).toHaveClass(`display_sm_none`)
-  expect(kit).toHaveClass(`display_md_block`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js

@@ -62,21 +62,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        flex={{ default: "3", xs: "1", sm: "3", md: "1" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`flex_3`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`flex_xs_1`)
-  expect(kit).toHaveClass(`flex_sm_3`)
-  expect(kit).toHaveClass(`flex_md_1`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js

@@ -35,21 +35,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        flexDirection={{ default: "column", xs: "row", sm: "column", md: "row" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`flex_direction_column`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`flex_direction_xs_row`)
-  expect(kit).toHaveClass(`flex_direction_sm_column`)
-  expect(kit).toHaveClass(`flex_direction_md_row`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js

@@ -33,21 +33,3 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        flexGrow={{ default: 1, xs: 0, sm: 1, md: 0 }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`flex_grow_1`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`flex_grow_xs_0`)
-  expect(kit).toHaveClass(`flex_grow_sm_1`)
-  expect(kit).toHaveClass(`flex_grow_md_0`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js

@@ -33,21 +33,3 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        flexShrink={{ default: 0, xs: 1, sm: 0, md: 1 }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`flex_shrink_0`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`flex_shrink_xs_1`)
-  expect(kit).toHaveClass(`flex_shrink_sm_0`)
-  expect(kit).toHaveClass(`flex_shrink_md_1`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js

@@ -35,21 +35,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        flexWrap={{ default: "wrap", xs: "nowrap", sm: "wrap", md: "nowrap" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`flex_wrap_wrap`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`flex_wrap_xs_nowrap`)
-  expect(kit).toHaveClass(`flex_wrap_sm_wrap`)
-  expect(kit).toHaveClass(`flex_wrap_md_nowrap`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js

@@ -35,21 +35,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        justifyContent={{ default: "spaceBetween", xs: "start", sm: "spaceBetween", md: "start" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`justify_content_space_between`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`justify_content_xs_start`)
-  expect(kit).toHaveClass(`justify_content_sm_space_between`)
-  expect(kit).toHaveClass(`justify_content_md_start`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js

@@ -35,21 +35,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        justifySelf={{ default: "end", xs: "start", sm: "end", md: "center" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`justify_self_end`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`justify_self_xs_start`)
-  expect(kit).toHaveClass(`justify_self_sm_end`)
-  expect(kit).toHaveClass(`justify_self_md_center`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/order.test.js

@@ -33,21 +33,3 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        order={{ default: 3, xs: 1, sm: 3, md: 1 }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`flex_order_3`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`flex_order_xs_1`)
-  expect(kit).toHaveClass(`flex_order_sm_3`)
-  expect(kit).toHaveClass(`flex_order_md_1`)
-})

data/dist/chunks/_line_graph-DDvq7zE7.js

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