playbook_ui 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11607 → 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11644

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fcd436ebf1d8c2a0442f88c7bd24280b90e805a2cbf764d36e60a73bf04f8a3e
-  data.tar.gz: 57f069f6198858056e3217cd8032a03a41a78204bea676892f9cdc4ccd1fb4e8
+  metadata.gz: 89693ba1bf07627064652227df87422a5b6126af238967ceb09282f01f6d7e49
+  data.tar.gz: 667090ab12ab761b0bf84a8365bfb6d5dd31b5cdff7274583bfd620a864e4dee
 SHA512:
-  metadata.gz: 39bf03e47685ed9c93b72ca94fc4b47a3decb6de1c61b690db4f84295595a5d3375378f83c37fab02c72bbecd4feea2bb792861c19efe4ce4201901907d2b2b2
-  data.tar.gz: d95721f238cf35d91464c1efe1e6f7aa0852a5e17facd89dc03c45c45c431eb5f80924ea9e0c261955bc596860d973f11814692b711a33bc95a1a02baff033f4
+  metadata.gz: 7dd13b4e5110a7f0129d60c3fc5661b8523bbcb28f8ca42d18864acdba620fd361a03754ae7a1eebac3e26d4043e897c5313168e282fea640da11f7bf37900cf
+  data.tar.gz: 7520b324d9a37fc5463adefa742e571d41c64089f3e989829a3de42bb27f930befbee03f1fbc3dda32eb63652acf21cf8213911a400ef1aa553b02b7bff7996b

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -30,6 +30,7 @@ type TableHeaderCellProps = {
   headerChildren?: React.ReactNode | React.ReactNode[]
   isPinnedLeft?: boolean
   loading?: boolean
+  persistToggleExpansionButton?: boolean
   sortIcon?: string | string[]
   table?: Table<GenericObject>
 } & GlobalProps
@@ -58,6 +59,7 @@ export const TableHeaderCell = ({
     selectableRows,
     hasAnySubRows,
     showActionsBar,
+    persistToggleExpansionButton,
     stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
@@ -220,7 +222,7 @@ const isToggleExpansionEnabled =
               />
             )
           }
-          {isToggleExpansionEnabled && (hasAnySubRows || inlineRowLoading) && !expandByDepth && (
+          {isToggleExpansionEnabled &&  ((hasAnySubRows) || (inlineRowLoading && persistToggleExpansionButton)) && !expandByDepth && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
           {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -39,6 +39,7 @@ export const TableHeader = ({
     hasAnySubRows,
     showActionsBar,
     selectableRows,
+    persistToggleExpansionButton,
     responsive,
     headerRef,
     virtualizedRows,
@@ -92,6 +93,7 @@ export const TableHeader = ({
                   isPinnedLeft={isPinnedLeft}
                   key={`${header.id}-header`}
                   loading={loading}
+                  persistToggleExpansionButton={persistToggleExpansionButton}
                   sortIcon={sortIcon}
                   table={table}
               />
@@ -136,6 +138,7 @@ export const TableHeader = ({
                   isVirtualized
                   key={`${header.id}-header-virtualized`}
                   loading={loading}
+                  persistToggleExpansionButton={persistToggleExpansionButton}
                   sortIcon={sortIcon}
                   table={table}
               />

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -63,6 +63,7 @@ type AdvancedTableProps = {
   scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
+  persistToggleExpansionButton?: boolean,
   sortControl?: GenericObject
   tableData: GenericObject[]
   tableOptions?: GenericObject
@@ -109,6 +110,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
+    persistToggleExpansionButton = false,
     sortControl,
     stickyLeftColumn,
     tableData,
@@ -349,6 +351,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             loading={loading}
             onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}
+            persistToggleExpansionButton={persistToggleExpansionButton}
             pinnedRows={pinnedRows}
             responsive={responsive}
             rowStyling={rowStyling}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -108,6 +108,48 @@ const MOCK_DATA_WITH_ID = [
   },
 ]
 
+const MOCK_DATA_NO_SUBROWS = [
+  {
+    year: "2021",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    attendanceRate: "51%",
+    completedClasses: "3",
+    classCompletionRate: "33%",
+    graduatedStudents: "19",
+    children: [],
+  },
+  {
+    year: "2022",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "25",
+    scheduledMeetings: "17",
+    attendanceRate: "75%",
+    completedClasses: "5",
+    classCompletionRate: "45%",
+    graduatedStudents: "32",
+    children: [],
+  },
+  {
+    year: "2023",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "30",
+    scheduledMeetings: "22",
+    attendanceRate: "80%",
+    completedClasses: "7",
+    classCompletionRate: "55%",
+    graduatedStudents: "45",
+    children: [],
+  },
+]
+
 const columnDefinitions = [
   {
     accessor: "year",
@@ -509,6 +551,23 @@ test("inlineRowLoading prop renders inline loading if true", () => {
   expect(inlineLoading).toBeInTheDocument()
 })
 
+test("persistToggleExpansionButton prop shows header toggle when inlineRowLoading is true", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        enableToggleExpansion="all"
+        inlineRowLoading
+        persistToggleExpansionButton
+        tableData={MOCK_DATA_NO_SUBROWS}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const headerToggleButton = kit.querySelector(".gray-icon.toggle-all-icon")
+  expect(headerToggleButton).toBeInTheDocument()
+})
+
 test("responsive prop functions as expected", () => {
   render(
     <AdvancedTable

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx

@@ -1,6 +1,8 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Caption from '../../pb_caption/_caption'
 import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
+import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
 
 const AdvancedTableInlineRowLoading = (props) => {
   const columnDefinitions = [
@@ -41,16 +43,30 @@ const AdvancedTableInlineRowLoading = (props) => {
 
   return (
     <div>
+      <Caption>Inline Row Loading</Caption>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           enableToggleExpansion="all"
           inlineRowLoading
+          marginBottom="md"
           tableData={MOCK_DATA_INLINE_LOADING}
           {...props}
       >
         <AdvancedTable.Header />
         <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
       </AdvancedTable>
+      <Caption>Inline Row Loading with Persist Toggle Expansion Button</Caption>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          inlineRowLoading
+          persistToggleExpansionButton
+          tableData={MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md

@@ -1,5 +1,14 @@
+### inlineRowLoading
 As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
 
-In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows. 
+In the first Advanced Table in this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows. 
 
-This prop is set to `false` by default. 
+This prop is set to `false` by default. 
+
+
+### persistToggleExpansion
+The `persistToggleExpansionButton` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
+
+In the second Advanced Table in this code example, all 3 rows have empty children arrays. The toggle all button would not render (prior to an initial row expansion) without `persistToggleExpansionButton` in place. 
+
+This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.

data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading_empty_children.js

@@ -0,0 +1,42 @@
+export const MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN = [
+    {
+      year: "2021",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "20",
+      scheduledMeetings: "10",
+      attendanceRate: "51%",
+      completedClasses: "3",
+      classCompletionRate: "33%",
+      graduatedStudents: "19",
+      children: [],
+    },
+    {
+      year: "2022",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "25",
+      scheduledMeetings: "17",
+      attendanceRate: "75%",
+      completedClasses: "5",
+      classCompletionRate: "45%",
+      graduatedStudents: "32",
+      children: [],
+    },
+    {
+      year: "2023",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "10",
+      scheduledMeetings: "15",
+      attendanceRate: "65%",
+      completedClasses: "4",
+      classCompletionRate: "49%",
+      graduatedStudents: "29",
+      children: [],
+    },
+  ]
+  

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

@@ -314,14 +314,18 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     if (!hasTyped) setHasTyped(true)
+
     setInputValue(evt.target.value)
+
     let phoneNumberData
+
     if (formatAsYouType) {
       const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
       phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
     } else {
       phoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
     }
+
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
     isValid(itiRef.current.isValidNumber())
@@ -370,11 +374,26 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
       inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
       inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
-    }
-    if (formatAsYouType) {
-      inputRef.current?.addEventListener("input", (evt) => {
-        handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
-      });
+
+      // Handle formatAsYouType with input event
+      if (formatAsYouType) {
+        inputRef.current.addEventListener("input", (evt: Event) => {
+          const target = evt.target as HTMLInputElement
+          const formattedValue = target.value
+
+          // Update internal state
+          setInputValue(formattedValue)
+          setHasTyped(true)
+
+          // Get phone number data with unformatted number
+          const formattedPhoneNumberData = getCurrentSelectedData(telInputInit, formattedValue)
+          const phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
+
+          setSelectedData(phoneNumberData)
+          onChange(phoneNumberData)
+          isValid(telInputInit.isValidNumber())
+        })
+      }
     }
   }, [])
 
@@ -389,7 +408,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     label,
     name,
     onBlur: validateErrors,
-    onChange: handleOnChange,
+    onChange: formatAsYouType ? undefined : handleOnChange,
     value: inputValue
   }
 

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '../utilities/test-utils'
+import { render, screen, fireEvent, waitFor } from '../utilities/test-utils'
 import Typeahead from './_typeahead'
 
 const options = [
@@ -137,4 +137,38 @@ test('typeahead with colored pills', () => {
   const kit = screen.getByTestId('pills-color-test')
   const pill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_neutral")
   expect(pill).toBeInTheDocument()
+})
+
+test('typeahead with defaultValue with focus behavior', async () => {
+  render(
+    <Typeahead
+        data={{ testid: 'default-value-focus-test' }}
+        defaultValue={[options[1]]}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('default-value-focus-test')
+  const inputDiv = kit.querySelector(".typeahead-kit-select__single-value")
+  expect(inputDiv).toHaveTextContent("Red")
+  
+  // Test that the control can receive focus
+  const control = kit.querySelector('.typeahead-kit-select__control')
+  expect(control).toBeInTheDocument()
+  
+  // Simulate opening the menu by clicking the control
+  fireEvent.mouseDown(control)
+  
+  // Wait for menu to appear
+  await waitFor(() => {
+    const menu = kit.querySelector('.typeahead-kit-select__menu')
+    expect(menu).toBeInTheDocument()
+  })
+  
+  // Check that the correct option has the focused class
+  await waitFor(() => {
+    const focusedOption = kit.querySelector('.typeahead-kit-select__option--is-focused')
+    expect(focusedOption).toBeInTheDocument()
+    expect(focusedOption).toHaveTextContent('Red')
+  })
 })

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef} from 'react'
+import React, { useState, useEffect, forwardRef, useRef} from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
@@ -106,6 +106,8 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   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)
+  // State to track if user has made a selection (to disable defaultValue focus behavior)
+  const [hasUserSelected, setHasUserSelected] = useState(false)
 
   // If preserveSearchInput is true, we need to control the input value
   const handleInputChange = preserveSearchInput
@@ -139,6 +141,69 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       }
     : props.onBlur
 
+  // Create a ref to access React Select instance
+  const selectRef = useRef<any>(null)
+
+  // Configure focus on selected option using React Select's API
+  const handleMenuOpen = () => {
+    setTimeout(() => {
+      let currentValue = props.value || props.defaultValue
+
+      // Handle react rendered rails version which passes arrays even for single selects
+      if (Array.isArray(currentValue) && currentValue.length > 0) {
+        currentValue = currentValue[0]
+      }
+      
+      // Only apply custom focus if user has NOT made a selection yet
+      if (currentValue && selectRef.current && !hasUserSelected && !props.isMulti) {
+
+        const options = props.options
+        if (options) {
+          // Find the index of the current value
+          const focusedIndex = options.findIndex((option: any) => {
+            const optionValue = props.getOptionValue ? props.getOptionValue(option) : option.value
+            const currentOptionValue = props.getOptionValue ? props.getOptionValue(currentValue) : currentValue.value
+            return optionValue === currentOptionValue
+          })
+          
+          if (focusedIndex >= 0 && options[focusedIndex]) {
+            // Use React Select's internal state to set focused option
+            if (selectRef.current && selectRef.current.setState) {
+              const targetOption = options[focusedIndex]
+              selectRef.current.setState({
+                focusedOption: targetOption,
+                focusedValue: null
+              })
+              
+              // Handle scrolling so selected option is visible
+              setTimeout(() => {
+                if (selectRef.current && selectRef.current.menuListRef) {
+                  const menuElement = selectRef.current.menuListRef
+                  if (menuElement && menuElement.children && menuElement.children[focusedIndex]) {
+                    // Calculate the position of the selected option and scroll the menu container
+                    const optionElement = menuElement.children[focusedIndex] as HTMLElement
+                    const optionTop = optionElement.offsetTop
+                    const optionHeight = optionElement.offsetHeight
+                    const menuHeight = menuElement.clientHeight
+                    
+                    // Set the menu's scrollTop to position the selected option in the middle
+                    const scrollToMiddle = optionTop - (menuHeight / 2) + (optionHeight / 2)
+                    menuElement.scrollTop = Math.max(0, scrollToMiddle)
+                  }
+                }
+              }, 20)
+            }
+          }
+        }
+      }
+    }, 0)
+    
+    // Call original onMenuOpen if provided
+    if (props.onMenuOpen) {
+      props.onMenuOpen()
+    }
+  }
+
   const selectProps = {
     cacheOptions: true,
     required,
@@ -172,6 +237,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     ...(preserveSearchInput ? { inputValue } : {}),
     onInputChange: handleInputChange,
     onBlur: handleBlur,
+    onMenuOpen: handleMenuOpen,
     ...props,
   }
 
@@ -261,6 +327,8 @@ 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)
+      // Mark that user has made a selection to disable default value focus behavior
+      setHasUserSelected(true)
     }
 
     // If a value is selected and we're preserving input on blur, clear the input
@@ -269,7 +337,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     }
 
     if (action === 'select-option') {
-      if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
+      if (selectProps.onMultiValueClick && option) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
       document.dispatchEvent(multiValueClearEvent)
     }
@@ -317,6 +385,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
           error={errorDisplay}
           isDisabled={disabled}
           onChange={handleOnChange}
+          ref={selectRef}
           {...selectProps}
       />
     </div>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb

@@ -0,0 +1,36 @@
+<%
+  options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#1e3d1eff' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Purple', value: '#800080' },
+  { label: 'Yellow', value: '#FFFF00' },
+  { label: 'Pink', value: '#FFC0CB' },
+  { label: 'Brown', value: '#A52A2A' },
+  { label: 'Black', value: '#000000' },
+  { label: 'White', value: '#FFFFFF' },
+  { label: 'Gray', value: '#808080' },
+  { label: 'Cyan', value: '#00FFFF' },
+  { label: 'Magenta', value: '#FF00FF' },
+  { label: 'Lime', value: '#00FF00' },
+  { label: 'Maroon', value: '#800000' },
+  { label: 'Olive', value: '#808000' },
+  { label: 'Navy', value: '#000080' },
+  { label: 'Teal', value: '#008080' },
+  { label: 'Silver', value: '#C0C0C0' },
+  { label: 'Gold', value: '#FFD700' },
+  { label: 'Beige', value: '#F5F5DC' },
+  { label: 'Coral', value: '#FF7F50' }
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    default_options: [{ label: 'Gray', value: '#808080' }],
+    id: "typeahead-default-value",
+    options: options,
+    label: "Colors",
+    name: :foo,
+    is_multi: false
+  })
+%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.md

@@ -0,0 +1 @@
+The optional `default_options` prop can be used to set a default value for the kit. When a default value is set, focus will be automatically set to the selected option and the dropdown container will scroll to bring the selected option into view. 

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

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#1e3d1eff' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Purple', value: '#800080' },
+  { label: 'Yellow', value: '#FFFF00' },
+  { label: 'Pink', value: '#FFC0CB' },
+  { label: 'Brown', value: '#A52A2A' },
+  { label: 'Black', value: '#000000' },
+  { label: 'White', value: '#FFFFFF' },
+  { label: 'Gray', value: '#808080' },
+  { label: 'Cyan', value: '#00FFFF' },
+  { label: 'Magenta', value: '#FF00FF' },
+  { label: 'Lime', value: '#00FF00' },
+  { label: 'Maroon', value: '#800000' },
+  { label: 'Olive', value: '#808000' },
+  { label: 'Navy', value: '#000080' },
+  { label: 'Teal', value: '#008080' },
+  { label: 'Silver', value: '#C0C0C0' },
+  { label: 'Gold', value: '#FFD700' },
+  { label: 'Beige', value: '#F5F5DC' },
+  { label: 'Coral', value: '#FF7F50' }
+]
+
+const TypeaheadDefaultValue = (props) => {
+  return (
+    <Typeahead
+        defaultValue={options[10]}
+        label="Colors"
+        options={options}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadDefaultValue

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.md

@@ -0,0 +1 @@
+The optional `defaultValue` prop can be used to set a default value for the kit. When a default value is set, focus will be automatically set to the selected option and the dropdown container will scroll to bring the selected option into view. 

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

@@ -1,6 +1,7 @@
 examples:
   rails:
     - typeahead_default: Default
+    - typeahead_default_options: With Default Options
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
     - typeahead_without_pills: Without Pills (Single Select)
@@ -19,6 +20,7 @@ examples:
 
   react:
     - typeahead_default: Default
+    - typeahead_default_value: With Default Value
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills

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

@@ -16,3 +16,4 @@ export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.j
 export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
 export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
+export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'

data/dist/chunks/{_line_graph-BnVgr42C.js → _line_graph-D5MBnrO9.js}

@@ -1 +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-BH_dkgOy.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{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-BjYBazGq.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};