playbook_ui 16.3.0 → 16.4.0.pre.alpha.PLAY2846reactadvancedtablecalcheaderpinnedrows15356

data/app/pb_kits/playbook/pb_popover/docs/_popover_position.html.erb

@@ -0,0 +1,128 @@
+<%= pb_rails("flex", props: { justify: "around", margin_bottom: "sm", orientation: "row", wrap: true }) do %>
+    <%= pb_rails("button", props: { text: "Top", variant: "secondary", id: "placement-popover-top" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-top",
+      tooltip_id: "placement-tooltip-top",
+      position: "top",
+      offset: true
+    }) do %>
+      Popover: top
+    <% end %>
+    <%= pb_rails("button", props: { text: "Top start", variant: "secondary", id: "placement-popover-top-start" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-top-start",
+      tooltip_id: "placement-tooltip-top-start",
+      position: "top-start",
+      offset: true
+    }) do %>
+      Popover: top start
+    <% end %>
+    <%= pb_rails("button", props: { text: "Top end", variant: "secondary", id: "placement-popover-top-end" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-top-end",
+      tooltip_id: "placement-tooltip-top-end",
+      position: "top-end",
+      offset: true
+    }) do %>
+      Popover: top end
+    <% end %>
+<% end %>
+<%= pb_rails("flex", props: { justify: "around", margin_bottom: "sm", orientation: "row", wrap: true }) do %>
+    <%= pb_rails("button", props: { text: "Bottom", variant: "secondary", id: "placement-popover-bottom" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-bottom",
+      tooltip_id: "placement-tooltip-bottom",
+      position: "bottom",
+      offset: true
+    }) do %>
+      Popover: bottom
+    <% end %>
+    <%= pb_rails("button", props: { text: "Bottom start", variant: "secondary", id: "placement-popover-bottom-start" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-bottom-start",
+      tooltip_id: "placement-tooltip-bottom-start",
+      position: "bottom-start",
+      offset: true
+    }) do %>
+      Popover: bottom start
+    <% end %>
+    <%= pb_rails("button", props: { text: "Bottom end", variant: "secondary", id: "placement-popover-bottom-end" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-bottom-end",
+      tooltip_id: "placement-tooltip-bottom-end",
+      position: "bottom-end",
+      offset: true
+    }) do %>
+      Popover: bottom end
+    <% end %>
+<% end %>
+<%= pb_rails("flex", props: { justify: "around", margin_bottom: "sm", orientation: "row", wrap: true }) do %>
+    <%= pb_rails("button", props: { text: "Left", variant: "secondary", id: "placement-popover-left" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-left",
+      tooltip_id: "placement-tooltip-left",
+      position: "left",
+      offset: true
+    }) do %>
+      Popover: left
+    <% end %>
+    <%= pb_rails("button", props: { text: "Left start", variant: "secondary", id: "placement-popover-left-start" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-left-start",
+      tooltip_id: "placement-tooltip-left-start",
+      position: "left-start",
+      offset: true
+    }) do %>
+      Popover: left start
+    <% end %>
+    <%= pb_rails("button", props: { text: "Left end", variant: "secondary", id: "placement-popover-left-end" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-left-end",
+      tooltip_id: "placement-tooltip-left-end",
+      position: "left-end",
+      offset: true
+    }) do %>
+      Popover: left end
+    <% end %>
+<% end %>
+<%= pb_rails("flex", props: { justify: "around", orientation: "row", wrap: true }) do %>
+    <%= pb_rails("button", props: { text: "Right", variant: "secondary", id: "placement-popover-right" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-right",
+      tooltip_id: "placement-tooltip-right",
+      position: "right",
+      offset: true
+    }) do %>
+      Popover: right
+    <% end %>
+    <%= pb_rails("button", props: { text: "Right start", variant: "secondary", id: "placement-popover-right-start" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-right-start",
+      tooltip_id: "placement-tooltip-right-start",
+      position: "right-start",
+      offset: true
+    }) do %>
+      Popover: right start
+    <% end %>
+    <%= pb_rails("button", props: { text: "Right end", variant: "secondary", id: "placement-popover-right-end" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-right-end",
+      tooltip_id: "placement-tooltip-right-end",
+      position: "right-end",
+      offset: true
+    }) do %>
+      Popover: right end
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_position_rails.md

@@ -0,0 +1 @@
+Use the `position` prop to control where the popover appears relative to its trigger. Valid values include `top`, `bottom`, `left`, `right`, and aligned variants such as `top-start`, `top-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end`, `right-start`, and `right-end`.

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

@@ -7,6 +7,7 @@ examples:
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
     - popover_append_to: Append To
+    - popover_position: Position
 
   react:
     - popover_default: Default
@@ -16,3 +17,4 @@ examples:
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
     - popover_append_to: Append To
+    - popover_placement: Placement

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

@@ -4,4 +4,5 @@ export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
 export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'
-export { default as PopoverAppendTo } from './_popover_append_to.jsx'
+export { default as PopoverAppendTo } from './_popover_append_to.jsx'
+export { default as PopoverPlacement } from './_popover_placement.jsx'

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

@@ -1,33 +1,12 @@
 import React, { useEffect, useState, useRef } from 'react'
 import classnames from 'classnames'
-import { TrixEditor } from 'react-trix'
 
-import inlineFocus from './inlineFocus'
-import useFocus from './useFocus'
 import Caption from '../pb_caption/_caption'
 import colors from '../tokens/exports/_colors.module.scss'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
-
-import Trix from 'trix'
-import './_dedupe_trix_toolbar'
-
-Trix.config.textAttributes.inlineCode = {
-  tagName: 'code',
-  inheritable: true,
-}
-
-import EditorToolbar from './TipTap/Toolbar'
-
-type Editor = {
-  attributeIsActive?: ([any]: string) => boolean,
-  element?: HTMLElement,
-  getSelectedDocument?: () => any,
-  getSelectedRange?: () => Array<number>,
-  insertHTML?: ([any]: string) => void,
-  loadHTML?: ([any]: string) => void,
-  setSelectedRange?: (range: Array<number>) => void,
-}
+import TipTapEditor from './_tiptap_editor'
+import TrixTextEditor from './_trix_editor'
 
 type RichTextEditorProps = {
   aria?: { [key: string]: string },
@@ -55,6 +34,8 @@ type RichTextEditorProps = {
   template: string,
   value?: string,
   maxWidth?: string
+  TrixEditor?: React.ComponentType<any>,
+  trixInstance?: any,
 } & GlobalProps
 
 const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
@@ -84,50 +65,19 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     maxWidth = "md",
     requiredIndicator = false,
     label,
+    TrixEditor,
+    trixInstance: trixInstance = undefined,
   } = props
 
   const ariaProps = buildAriaProps(aria),
     dataProps = buildDataProps(data),
-    [editor, setEditor] = useState<Editor>(),
     [showToolbarOnFocus, setShowToolbarOnFocus] = useState(false),
     containerRef = useRef<HTMLDivElement>(null)
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
   const fieldId = id ? (id as string) : null
-  const labelElementId = fieldId ? `${fieldId}-label` : null
-
-  const handleOnEditorReady = (editorInstance: Editor) => {
-    setEditor(editorInstance)
-
-    setTimeout(() => {
-      const oldId = editorInstance.element?.getAttribute("input")
-      if (!oldId) return
-
-      const hiddenInput = document.getElementById(oldId) as HTMLElement | null
-      if (!hiddenInput) return
-
-      const hiddenInputId = (inputOptions.id as string) || oldId
-
-      if (hiddenInputId !== oldId) {
-        hiddenInput.id = hiddenInputId
-        editorInstance.element?.setAttribute("input", hiddenInputId)
-      }
-
-      if (inputOptions.name) {
-        hiddenInput.setAttribute("name", inputOptions.name as string)
-      }
-
-      const editorDomId = (id as string) || `${hiddenInputId}_trix`
-      const trixLabelId = ((id as string) || hiddenInputId) + "-label"
-
-      if (label) {
-        editorInstance.element?.setAttribute("aria-labelledby", trixLabelId)
-      }
-      editorInstance.element!.id = editorDomId
-    })
-  }
-
+  const labelElementId = fieldId ? `${fieldId}-label` : undefined
   useEffect(() => {
     if (!advancedEditor || !fieldId || !labelElementId) return
 
@@ -139,34 +89,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     dom.setAttribute("aria-multiline", "true")
   }, [advancedEditor, fieldId, labelElementId])
 
-  // DOM manipulation must wait for editor to be ready
-  if (editor && editor.element) {
-    const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
-      blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
-
-    // replace default trix "block code" button with "inline code" button
-    let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]') as HTMLElement
-    if (!inlineCodeButton) {
-      inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
-      blockCodeButton.hidden = true
-      // set button attributes
-      inlineCodeButton.dataset.trixAttribute = 'inlineCode'
-      blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
-    }
-
-    if (toolbarBottom) editor.element.after(toolbarElement)
-
-    focus
-      ? (document.addEventListener('trix-focus', useFocus),
-        document.addEventListener('trix-blur', useFocus),
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useFocus())
-      : null
-
-    document.addEventListener('trix-focus', inlineFocus)
-    document.addEventListener('trix-blur', inlineFocus)
-  }
-
   //===========focus prop with advanced editor=================
   const isClickInPopover = (event: Event): boolean => {
     return !!(event.target as Element).closest('.pb_tiptap_toolbar_dropdown_popover')
@@ -203,26 +125,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   //============= end focus prop with advanced editor=================
 
-  useEffect(() => {
-    if (!editor || !template) return
-    editor.loadHTML('')
-    editor.setSelectedRange([0, 0])
-    editor.insertHTML(template)
-  }, [editor, template])
-
-  useEffect(() => {
-    if (!editor?.element) return
-    editor.element.addEventListener('click', ({ target }: Event) => {
-      const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
-      if (!trixEditorContainer) return
-
-      const anchorElement = (target as Element).closest('a')
-      if (!anchorElement) return
-
-      if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
-    })
-  }, [editor])
-
   // Generate CSS classes
   const css = classnames(
     'pb_rich_text_editor_kit',
@@ -279,35 +181,34 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
       </label>
     )}
-      {
-        advancedEditor ? (
-          <div
-              className={classnames(
-              "pb_rich_text_editor_advanced_container",
-              { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
-            )}
-          >
-            {shouldShowToolbar && (
-              <EditorToolbar editor={advancedEditor}
-                  extensions={extensions}
-                  simple={simple}
-                  sticky={sticky}
-              />
-            )}
-          { children }
-          </div>
-        ) : (
-          <TrixEditor
-              className=""
-              fileParamName={name}
-              mergeTags={[]}
-              onChange={onChange}
-              onEditorReady={handleOnEditorReady}
-              placeholder={placeholder}
-              value={value}
-          />
-        )
-      }
+      {advancedEditor ? (
+        <TipTapEditor
+            editor={advancedEditor}
+            extensions={extensions}
+            inputHeight={inputHeight}
+            inputMinHeight={inputMinHeight}
+            shouldShowToolbar={shouldShowToolbar}
+            simple={simple}
+            sticky={sticky}
+        >
+          {children}
+        </TipTapEditor>
+      ) : (
+        <TrixTextEditor
+            TrixEditor={TrixEditor}
+            focus={focus}
+            id={id}
+            inputOptions={inputOptions}
+            label={label}
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+            template={template}
+            toolbarBottom={toolbarBottom}
+            trixInstance={trixInstance}
+            value={value}
+        />
+      )}
     </div>
   )
 }

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

@@ -0,0 +1,51 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import EditorToolbar from './TipTap/Toolbar'
+
+type TipTapEditorProps = {
+    children?: React.ReactNode | React.ReactNode[],
+    editor: unknown,
+    extensions?: { [key: string]: string }[],
+    inputHeight?: 'sm' | 'md' | 'lg',
+    inputMinHeight?: 'sm' | 'md' | 'lg',
+    shouldShowToolbar: boolean,
+    simple?: boolean,
+    sticky?: boolean,
+}
+
+const TipTapEditor = ({
+    children,
+    editor,
+    extensions,
+    inputHeight,
+    inputMinHeight,
+    shouldShowToolbar,
+    simple = false,
+    sticky = false,
+}: TipTapEditorProps): React.ReactElement => {
+    return (
+        <div
+            className={classnames(
+                'pb_rich_text_editor_advanced_container',
+                {
+                    [`input_height_${inputHeight}`]: !!inputHeight,
+                    [`input_min_height_${inputMinHeight}`]: !!inputMinHeight,
+                    'toolbar-active': shouldShowToolbar,
+                }
+            )}
+        >
+            {shouldShowToolbar && (
+                <EditorToolbar
+                    editor={editor}
+                    extensions={extensions}
+                    simple={simple}
+                    sticky={sticky}
+                />
+            )}
+            {children}
+        </div>
+    )
+}
+
+export default TipTapEditor

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

@@ -0,0 +1,206 @@
+import React, { useEffect, useState } from 'react'
+
+import inlineFocus from './inlineFocus'
+import applyFocusState from './useFocus'
+import './_dedupe_trix_toolbar'
+
+type Editor = {
+	element?: HTMLElement,
+	insertHTML?: (html: string) => void,
+	loadHTML?: (html: string) => void,
+	setSelectedRange?: (range: Array<number>) => void,
+}
+
+type TrixConfig = {
+	textAttributes?: {
+		inlineCode?: {
+			tagName: string,
+			inheritable: boolean,
+		}
+	}
+}
+
+type TrixInstance = {
+	config: TrixConfig,
+}
+
+type TrixEditorComponentProps = {
+	className: string,
+	fileParamName?: string,
+	mergeTags: unknown[],
+	onChange: (html: string, text: string) => void,
+	onEditorReady: (editorInstance: Editor) => void,
+	placeholder?: string,
+	value?: string,
+}
+
+type TrixTextEditorProps = {
+	TrixEditor?: React.ComponentType<TrixEditorComponentProps>,
+	focus?: boolean,
+	id?: string,
+	inputOptions?: { [key: string]: string | number | boolean | (() => void) },
+	label?: string,
+	name?: string,
+	onChange: (html: string, text: string) => void,
+	placeholder?: string,
+	template: string,
+	toolbarBottom?: boolean,
+	trixInstance?: TrixInstance,
+	value?: string,
+}
+
+const TrixTextEditor = ({
+	TrixEditor,
+	focus = false,
+	id,
+	inputOptions = {},
+	label,
+	name,
+	onChange,
+	placeholder,
+	template,
+	toolbarBottom = false,
+	trixInstance = undefined,
+	value = '',
+}: TrixTextEditorProps): React.ReactElement => {
+	const [editor, setEditor] = useState<Editor>()
+
+	useEffect(() => {
+		const textAttributes = trixInstance?.config?.textAttributes
+		if (!textAttributes) return
+
+		textAttributes.inlineCode = {
+			tagName: 'code',
+			inheritable: true,
+		}
+	}, [trixInstance])
+
+	const handleOnEditorReady = (editorInstance: Editor) => {
+		setEditor(editorInstance)
+
+		setTimeout(() => {
+			const oldId = editorInstance.element?.getAttribute('input')
+			if (!oldId) return
+
+			const hiddenInput = document.getElementById(oldId) as HTMLElement | null
+			if (!hiddenInput) return
+
+			const hiddenInputId = (inputOptions.id as string) || oldId
+
+			if (hiddenInputId !== oldId) {
+				hiddenInput.id = hiddenInputId
+				editorInstance.element?.setAttribute('input', hiddenInputId)
+			}
+
+			if (inputOptions.name) {
+				hiddenInput.setAttribute('name', inputOptions.name as string)
+			}
+
+			const editorDomId = (id as string) || `${hiddenInputId}_trix`
+			const trixLabelId = ((id as string) || hiddenInputId) + '-label'
+
+			if (label) {
+				editorInstance.element?.setAttribute('aria-labelledby', trixLabelId)
+			}
+			if (editorInstance.element) {
+				editorInstance.element.id = editorDomId
+			}
+		})
+	}
+
+	useEffect(() => {
+		if (!editor || !editor.element) return
+
+		const toolbarElement = editor.element.parentElement?.querySelector('trix-toolbar') as HTMLElement | null
+		if (!toolbarElement) return
+
+		const blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement | null
+		if (!blockCodeButton) return
+
+		let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]') as HTMLElement | null
+		if (!inlineCodeButton) {
+			inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
+			blockCodeButton.hidden = true
+			inlineCodeButton.dataset.trixAttribute = 'inlineCode'
+			blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
+		}
+
+		if (toolbarBottom) {
+			editor.element.after(toolbarElement)
+		}
+	}, [editor, toolbarBottom])
+
+	useEffect(() => {
+		if (!focus) return
+
+		document.addEventListener('trix-focus', applyFocusState)
+		document.addEventListener('trix-blur', applyFocusState)
+		applyFocusState()
+
+		return () => {
+			document.removeEventListener('trix-focus', applyFocusState)
+			document.removeEventListener('trix-blur', applyFocusState)
+		}
+	}, [focus])
+
+	useEffect(() => {
+		document.addEventListener('trix-focus', inlineFocus)
+		document.addEventListener('trix-blur', inlineFocus)
+
+		return () => {
+			document.removeEventListener('trix-focus', inlineFocus)
+			document.removeEventListener('trix-blur', inlineFocus)
+		}
+	}, [])
+
+	useEffect(() => {
+		if (!editor || !template) return
+		editor.loadHTML && editor.loadHTML('')
+		editor.setSelectedRange && editor.setSelectedRange([0, 0])
+		editor.insertHTML && editor.insertHTML(template)
+	}, [editor, template])
+
+	useEffect(() => {
+		if (!editor?.element) return
+
+		const clickHandler = ({ target }: Event) => {
+			const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
+			if (!trixEditorContainer) return
+
+			const anchorElement = (target as Element).closest('a') as HTMLAnchorElement | null
+			if (!anchorElement) return
+
+			if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
+		}
+
+		editor.element.addEventListener('click', clickHandler)
+
+		return () => {
+			editor.element?.removeEventListener('click', clickHandler)
+		}
+	}, [editor])
+
+	if (!TrixEditor) {
+		return (
+			<div style={{ color: 'red', padding: '1em', border: '1px solid #f00', background: '#fff0f0' }}>
+				<strong>Trix Editor is not available.</strong>
+				<br />
+				Please import <code>TrixEditor</code> from <code>react-trix</code> and pass it as a prop to <code>RichTextEditor</code>.
+				<br />
+				<pre>{`import { TrixEditor } from 'react-trix';\n<RichTextEditor TrixEditor={TrixEditor} ... />`}</pre>
+			</div>
+		)
+	}
+
+	return React.createElement(TrixEditor, {
+		className: '',
+		fileParamName: name,
+		mergeTags: [],
+		onChange,
+		onEditorReady: handleOnEditorReady,
+		placeholder,
+		value,
+	})
+}
+
+export default TrixTextEditor