playbook_ui 15.3.0.pre.alpha.PLAY2322popoverconditionalrender11766 → 15.3.0.pre.alpha.PLAY2568richtexteditortiptaprails11790

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3f59d7e7c4376efeb5b93d1b598f303d41137dbf51803939bfc58fe39bf2111c
-  data.tar.gz: 7a6940c220be0ca9d18b3e2cd9a283539d66df7ee26245320d22e676b8244d93
+  metadata.gz: 16e3dd50149b3911c6d5802ac776033c73db6fc8c58fbf708290654e1fdc6ebe
+  data.tar.gz: b35ab5af0ac5b6187dfbd62aebdb04e23924e85fe8a13d1e26bf24d25cba9410
 SHA512:
-  metadata.gz: f0aff746453cdd793520c58b60da087f0ed804622f33c98b25869cfdb19bb6a601ba4488772991c9edadf3e5bfbcfa1a8be38a883280f229ef62d0c761e7a4c6
-  data.tar.gz: 807933083868d271c5d7ae0f2b3d0519ca4d35feb9ad1890cbcc3c0cd84c4e24690ee76151bafe2271eefc2683bf03f0ee396738951e77f1ec9307736135c583
+  metadata.gz: 778a8a8a0d96671e01cfd9e32e602e3c592a906243372786f616796ff43b2beda24977eaa5710c4a43f7fef41feb3e7a664157b40b80c7ea3ba676275ded2d62
+  data.tar.gz: 74230b35214bfee96cff3037d171cd9f4fca908929795812a54121bbb909482029bc88f0ddfbf525edcbfaab98004c0e4e52aefad7922c33509043f5086f1e29

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -56,15 +56,3 @@
 .pb_popover_reference_wrapper {
   display: inline-block;
 }
-
-// Temporary code to replicate bug - DO NOT MERGE
-@media (max-width: 619px) {
-  :root {
-    --is-pwa: 1;
-  }
-}
-@media (min-width: 620px) {
-  :root {
-    --is-pwa: 0;
-  }
-}

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-multi-comp */
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import {
   Popper,
@@ -89,7 +89,7 @@ const Popover = (props: PbPopoverProps) => {
   const popoverSpacing =
     filteredGlobalProps.includes("dark") || !filteredGlobalProps
       ? "p_sm"
-      : filteredGlobalProps
+      : filteredGlobalProps 
   const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
   const widthHeightStyles = () => {
@@ -170,56 +170,42 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
     minHeight,
     minWidth,
     width,
-    closeOnClick,
-    shouldClosePopover = noop,
   } = props;
 
-  // Store latest callback in a ref to avoid re-runs
-  const shouldClosePopoverRef = useRef(shouldClosePopover);
-
-  // Update ref on change
   useEffect(() => {
-    shouldClosePopoverRef.current = shouldClosePopover;
-  }, [shouldClosePopover]);
+    const { closeOnClick, shouldClosePopover = noop } = props;
 
-  useEffect(() => {
     if (!closeOnClick) return;
 
-    // Function to handle popover event listener and targetId.
-    // Ensure that whenever the component is conditionally rendered
-    // that the old listener is removed and the new listener is
-    // updated with the targetId.
-    const handleClick = (e: MouseEvent) => {
-      const target = e.target as HTMLElement
-
-      const targetIsPopover =
-        target.closest("#" + targetId) !== null;
-      const targetIsReference =
-        target.closest("#reference-" + targetId) !== null;
+    document.body.addEventListener(
+      "click",
+      (e: MouseEvent) => {
+        const target = e.target as HTMLElement
 
-      const shouldClose = () => {
-        setTimeout(() => shouldClosePopoverRef.current(true), 0);
-      }
+        const targetIsPopover =
+          target.closest("#" + targetId) !== null;
+        const targetIsReference =
+          target.closest("#reference-" + targetId) !== null;
 
-      switch (closeOnClick) {
-        case "outside":
-          if (!targetIsPopover && !targetIsReference) shouldClose();
-          break;
-        case "inside":
-          if (targetIsPopover) shouldClose();
-          break;
-        case "any":
-          if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
-          break;
-      }
-    };
+        const shouldClose = () => {
+          setTimeout(() => shouldClosePopover(true), 0);
+        }
 
-    document.body.addEventListener("click", handleClick, { capture: true });
-
-    return () => {
-      document.body.removeEventListener("click", handleClick, { capture: true });
-    };
-  }, [targetId, closeOnClick]);
+        switch (closeOnClick) {
+          case "outside":
+            if (!targetIsPopover && !targetIsReference) shouldClose();
+            break;
+          case "inside":
+            if (targetIsPopover) shouldClose();
+            break;
+          case "any":
+            if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
+            break;
+        }
+      },
+      { capture: true }
+    );
+  }, []);
 
   const popoverComponent = (
     <Popover

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx

@@ -3,14 +3,11 @@ import React, { useState } from 'react'
 import Button from '../../pb_button/_button'
 import Flex from '../../pb_flex/_flex'
 import PbReactPopover from '../../pb_popover/_popover'
-// Temporary code to replicate bug - DO NOT MERGE (Revert example when done)
-import useSmallScreenIndicator from './hook/useSmallScreenIndicator'
 
 const PopoverClose = (props) => {
   const [showInsidePopover, setInsideShowPopover] = useState(false)
   const [showOutsidePopover, setOutsideShowPopover] = useState(false)
   const [showAnyPopover, setAnyShowPopover] = useState(false)
-  const isPwa = useSmallScreenIndicator()
 
   const handleInsideShouldClosePopover = (shouldClosePopover) => {
     setInsideShowPopover(!shouldClosePopover)
@@ -62,10 +59,6 @@ const PopoverClose = (props) => {
     />
   )
 
-  if (isPwa) {
-    return null
-  }
-
   return (
     <Flex spacing="between">
       <PbReactPopover

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -96,7 +96,7 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
             <SectionSeparator orientation="vertical" />
             <ToolbarNodes editor={editor} />
             {
-              extensions && (
+              extensions && extensions.length > 0 && (
                 <>
                   <MoreExtensionsDropdown extensions={extensions}/>
                 </>

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useState, useRef } from 'react'
 import classnames from 'classnames'
 import { TrixEditor } from 'react-trix'
+// We have to import Tiptap here because it is not compatible with Rails
+import { useEditor, EditorContent, Extensions } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import Link from '@tiptap/extension-link'
 
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
@@ -30,6 +34,7 @@ type Editor = {
 type RichTextEditorProps = {
   aria?: { [key: string]: string },
   advancedEditor?: any,
+  railsAdvancedEditor?: boolean,
   advancedEditorToolbar?: boolean,
   toolbarBottom?: boolean,
   children?: React.ReactNode | React.ReactNode[],
@@ -48,13 +53,17 @@ type RichTextEditorProps = {
   sticky?: boolean,
   template: string,
   value?: string,
-  maxWidth?: string
+  maxWidth?: string,
+  tipTapOptions?: {
+    extensions?: string[]
+  }
 } & GlobalProps
 
 const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   const {
     aria = {},
     advancedEditor,
+    railsAdvancedEditor,
     advancedEditorToolbar = true,
     toolbarBottom = false,
     children,
@@ -72,7 +81,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     sticky = false,
     template = '',
     value = '',
-    maxWidth = "md"
+    maxWidth = "md",
+    tipTapOptions = {}
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -81,6 +91,40 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     [showToolbarOnFocus, setShowToolbarOnFocus] = useState(false),
     containerRef = useRef<HTMLDivElement>(null)
 
+  // POC: hypothetical link for external projects, build extensions array from tipTapOptions for railsAdvancedEditor
+  const buildExtensions = (extensionNames?: string[]) => {
+    const defaultExtensions = [StarterKit, Link]
+    
+    if (!extensionNames || extensionNames.length === 0) {
+      return defaultExtensions
+    }
+
+    // POC: not sure if will work sort of "out of the box/everything goes" like this or will need to permit each of whichever TipTap extensions we want.
+    return defaultExtensions
+  }
+
+  // Creates TipTap editor when railsAdvancedEditor is true (from Rails)
+  const internalDependencyTiptapEditor = useEditor({
+    extensions: buildExtensions(tipTapOptions?.extensions),
+    content: value || '',
+    onUpdate: ({ editor }) => {
+      const html = editor.getHTML()
+      const text = editor.getText()
+      onChange(html, text)
+      
+      // POC: Update hidden input for TipTap Rails Advanced Editor form submission
+      if (railsAdvancedEditor) {
+        const hiddenInput = document.getElementById(`hidden-input-${props.id || 'rich-text-editor'}`)
+        if (hiddenInput) {
+          (hiddenInput as HTMLInputElement).value = html ?? ''
+        }
+      }
+    },
+  }, [railsAdvancedEditor])
+
+  // Uses Internal Dependency TipTap editor if railsAdvancedEditor is true, otherwise uses passed editor instance
+  const currentEditor = railsAdvancedEditor ? internalDependencyTiptapEditor : advancedEditor
+
   const htmlProps = buildHtmlProps(htmlOptions)
   
   const handleOnEditorReady = (editorInstance: Editor) => {
@@ -140,7 +184,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   }
 
   useEffect(() => {
-    if (!advancedEditor || !focus) return
+    // POC: Updates advancedEditor to currentEditor in useEffect so focus works for Rails and React Advanced Editors
+    if (!currentEditor || !focus) return
 
     const handleFocus = () => setShowToolbarOnFocus(true)
     
@@ -149,7 +194,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       setShowToolbarOnFocus(false)
     }
 
-    const editorElement = advancedEditor?.view?.dom
+    const editorElement = currentEditor?.view?.dom
     if (editorElement) {
       editorElement.addEventListener('focus', handleFocus)
     }
@@ -162,7 +207,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       }
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [advancedEditor, focus])
+  }, [currentEditor, focus])
 
   //============= end focus prop with advanced editor=================
 
@@ -201,7 +246,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   )
 
   // Determine if toolbar should be shown
-  const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
+  const shouldShowToolbar = focus && currentEditor ? showToolbarOnFocus : advancedEditorToolbar
 
   return (
     <div
@@ -212,20 +257,32 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         ref={focus ? containerRef : undefined}
     >
       {
-        advancedEditor ? (
+        // POC: Uses currentEditor to render the editor content in return so works for Rails and React Advanced Editors
+        currentEditor ? (
           <div 
               className={classnames("pb_rich_text_editor_advanced_container", { 
               ["toolbar-active"]: shouldShowToolbar,
               })}
           >
             {shouldShowToolbar && (
-              <EditorToolbar editor={advancedEditor}
+              <EditorToolbar editor={currentEditor}
                   extensions={extensions}
                   simple={simple}
                   sticky={sticky}
               />
             )}
-          { children }
+            {/* POC: EditorContent ternary needed for TipTap editor in Rails Advanced Editors*/}
+            {railsAdvancedEditor ? <EditorContent editor={currentEditor} /> : <>{children}</>}
+            
+            {/* POC: Set up hidden input for TipTap Rails Advanced Editor form submission */}
+            {railsAdvancedEditor && (
+              <input 
+                  id={`hidden-input-${props.id || 'rich-text-editor'}`}
+                  name={name || 'content'}
+                  type="hidden" 
+                  value={currentEditor?.getHTML() ?? ''}
+              />
+            )}
           </div>
         ) : (
           <TrixEditor

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.html.erb

@@ -0,0 +1,127 @@
+ <%= pb_rails("caption", props: { text: "Advanced Default" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+  rails_advanced_editor: true,
+  margin_bottom: "md",
+  placeholder: "Start typing your content here...",
+  value: "Add your text here. You can format your text, add links, quotes, and bullets. This is the <strong>TipTap-based</strong> rich text editor rendered through Rails which requires a direct import of Tiptap into the tsx file.",
+}) %>
+
+<%= pb_rails("caption", props: { text: "AdvancedToolbar disabled" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+    rails_advanced_editor: true,
+    advanced_editor_toolbar: false,
+    margin_bottom: "md",
+    value: "<p>This advanced editor has the toolbar disabled, showing only the content area.</p>"
+}) %>
+
+<%= pb_rails("caption", props: { text: "Advanced Simple" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+  rails_advanced_editor: true,
+  margin_bottom: "md",
+  simple: true,
+  value: "<p>This is a <strong>simple</strong> version of the advanced editor with fewer toolbar options.</p>"
+}) %>
+
+<%= pb_rails("caption", props: { text: "Advanced Attributes" }) %>
+<%= pb_rails("rich_text_editor", props: {
+  aria: { label: "rich-textarea" },
+  data: { key: "value", key2: "value2" },
+  name: "textarea-label",
+  rails_advanced_editor: true,
+  margin_bottom: "md",
+  value: "<p>This advanced editor has attributes, aria, and data attributes.</p>"
+}) %>
+
+<%= pb_rails("caption", props: { text: "Advanced Focus" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+  rails_advanced_editor: true,
+  focus: true,
+  margin_bottom: "md",
+  value: "<p>This advanced editor shows the toolbar only when focused.</p>"
+}) %>
+
+<%= pb_rails("caption", props: { text: "Advanced Sticky" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+  rails_advanced_editor: true,
+  sticky: true,
+  margin_bottom: "md",
+  value: "<p>In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna.</p>"
+}) %>
+ 
+<%= pb_rails("caption", props: { text: "Advanced Templates" }) %>
+<%= pb_rails("body", props: { margin_bottom: "md", text: "Not getting into this on POC feels like more of a nice to have" }) %>
+
+<%= pb_rails("caption", props: { text: "Advanced Inline" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+  rails_advanced_editor: true,
+  inline: true,
+  margin_bottom: "md",
+  value: "<p>This advanced editor has an inline toolbar, showing all the formatting options.</p>"
+}) %>
+
+ <%= pb_rails("caption", props: { text: "Advanced Preview" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+  id: "advanced-preview-editor",
+  rails_advanced_editor: true,
+  margin_bottom: "md",
+  value: "Add text here, format it, and press \"Preview Output\" to see what your stylized output will look like on the page."
+}) %>
+
+<%= pb_rails("button", props: { id: "advanced-preview-button", text: "Preview Output", variant: "secondary" }) %>
+
+<div id="advanced-card-obfuscation" style="display:none">
+  <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
+   <div id="advanced-content-preview" class="tiptap-content">
+   </div>
+  <% end %>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    function handleAdvancedButtonClick() {
+      // Find the specific TipTap editor container by ID
+      const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
+        .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"advanced-preview-editor"'))
+
+      if (!editorContainer) {
+        console.log('Editor container not found')
+        return
+      }
+
+      // Find the TipTap editor content
+      const tiptapEditor = editorContainer.querySelector('.ProseMirror')
+      const previewArea = document.getElementById('advanced-content-preview')
+      const cardDiv = document.getElementById('advanced-card-obfuscation')
+
+      console.log('Found elements:', { tiptapEditor, previewArea, cardDiv })
+
+      if (tiptapEditor && previewArea && cardDiv) {
+        // Get the HTML content from the TipTap editor
+        const editorContent = tiptapEditor.innerHTML || ''
+        console.log('Editor content:', editorContent)
+        previewArea.innerHTML = editorContent 
+        cardDiv.style.display = 'block'
+      } else {
+        console.log('Missing elements:', { tiptapEditor: !!tiptapEditor, previewArea: !!previewArea, cardDiv: !!cardDiv })
+      }
+    }
+
+    document.getElementById('advanced-preview-button')?.addEventListener('click', handleAdvancedButtonClick)
+  })
+</script>
+
+
+<%= pb_rails("caption", props: { margin_top: "md", text: "Bonus: Advanced Extra Extensions (couldnt help thinking about this a little)" }) %>
+<%= pb_rails("body", props: { margin_bottom: "md", text: "Possibly possible: I tried to set up a tip_tap_options prop via which any extensions would need to be passed through after being impoted directly to an external propject. Look at code example for hypothetical use." }) %>
+<% tip_tap_options = {
+  extensions: []  # Extensions would be passed here as actual TipTap extension objects. Not sure if would work right away or if rich_text_editor.tsx would need to account for them.
+} %>
+<%= pb_rails("rich_text_editor", props: { 
+  rails_advanced_editor: true,
+  tip_tap_options: tip_tap_options,
+  margin_bottom: "md",
+  value: "HYPOTHETICALLY extensions can be added via tip_tap_options.extensions array.",
+}) %>
+
+<%= pb_rails("caption", props: { text: "Alt thought: some sort of stimulus or enhanced element based RTE that imports TipTap directly into Rails?" }) %>
+<%= pb_rails("body", props: {text: "If anything, may serve as an extension of the EXTENSIONS/tip_tap_options configuration. Not sure if works solo." }) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default_rails.md

@@ -0,0 +1 @@
+This is a POC for a react-rendered-rails version of the Advanced RTE, which necessarily requires we import Tiptap as an internal dependency since it is not compatible with Rails. Because of that, I'm not sure how we will be able to truly leverage Tiptap extensions/customizability to its full potential. We should be able to provide certain props/prop combos like we do now and provide them as options for customized editors - may require a few more doc examples and methods in the controller than we currently have but once it exists should be usable (for example, if there are usecases or examples of things like horizontal bar, highlight, etc. in Nitro or documented we can build those into the kit HUB request style.)

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

@@ -1,6 +1,7 @@
 examples:
 
   rails:
+  - rich_text_editor_advanced_default: Advanced Default
   - rich_text_editor_default: Default
   - rich_text_editor_simple: Simple
   - rich_text_editor_attributes: Attributes

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb

@@ -1,5 +1,13 @@
-<%= react_component('RichTextEditor',
-                    object.rich_text_options,
-                    aria: object.aria,
-                    data: object.data
-                   ) %>
+<% if object.is_rails_advanced? %>
+  <%= react_component('RichTextEditor',
+                      object.rich_text_advanced_options,
+                      aria: object.aria,
+                      data: object.data
+                     ) %>
+<% else %>
+  <%= react_component('RichTextEditor',
+                      object.rich_text_options,
+                      aria: object.aria,
+                      data: object.data
+                     ) %>
+<% end %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -22,6 +22,18 @@ module Playbook
       prop :placeholder
       prop :input_options
 
+      prop :rails_advanced_editor, type: Playbook::Props::Boolean,
+                                   default: false
+      prop :advanced_editor_toolbar, type: Playbook::Props::Boolean,
+                                     default: true
+      prop :extensions, type: Playbook::Props::HashArray,
+                        default: []
+      prop :max_width, type: Playbook::Props::Enum,
+                       values: %w[xs sm md lg xl],
+                       default: "md"
+      prop :tip_tap_options, type: Playbook::Props::HashProp,
+                             default: {}
+
       def classname
         generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
       end
@@ -53,6 +65,31 @@ module Playbook
           inputOptions: input_options,
         }
       end
+
+      def is_rails_advanced?
+        rails_advanced_editor
+      end
+
+      def rich_text_advanced_options
+        {
+          id: id,
+          inline: inline,
+          className: classname,
+          focus: focus,
+          simple: simple,
+          sticky: sticky,
+          toolbarBottom: toolbar_bottom,
+          value: value || "",
+          template: template,
+          placeholder: placeholder,
+          inputOptions: input_options,
+          railsAdvancedEditor: rails_advanced_editor,
+          advancedEditorToolbar: advanced_editor_toolbar,
+          extensions: extensions,
+          maxWidth: max_width,
+          tipTapOptions: tip_tap_options,
+        }
+      end
     end
   end
 end

data/dist/chunks/{_line_graph-BxC7m53J.js → _line_graph-BEPzmsbH.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-B1SiFvbF.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-CGxXTQ75.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-D2PJbkOa.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-DAV78mo-.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};