RubyGems - playbook_ui - Versions diffs - 15.2.0 → 15.3.0.pre.alpha.PLAY2577reactpopoverappendToPOC11730 - Mend

playbook_ui 15.2.0 → 15.3.0.pre.alpha.PLAY2577reactpopoverappendToPOC11730

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (174) hide show

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

@@ -24,6 +24,7 @@ import { uniqueId } from '../utilities/object';
 type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 type PbPopoverProps = {
+  appendTo?: string;
   aria?: { [key: string]: string };
   className?: string;
   closeOnClick?: "outside" | "inside" | "any";
@@ -62,6 +63,25 @@ const popoverModifiers = ({
   return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
 };
+const getAppendTarget = (
+  appendTo: string | undefined,
+  targetId: string
+): HTMLElement => {
+  if (!appendTo || appendTo === "body") return document.body;
+  if (appendTo === "parent") {
+    const referenceWrapper = document.querySelector(`#reference-${targetId}`);
+    if (referenceWrapper?.parentElement) {
+      return referenceWrapper.parentElement;
+    }
+  }
+  const selectorMatch = document.querySelector(appendTo);
+  if (selectorMatch instanceof HTMLElement) return selectorMatch;
+  return document.body;
+};
 const Popover = (props: PbPopoverProps) => {
   const {
     aria = {},
@@ -113,7 +133,7 @@ const Popover = (props: PbPopoverProps) => {
   return (
     <Popper
-        modifiers={popoverModifiers({ modifiers, offset })}
+        modifiers={popoverModifiers({ modifiers, offset: offset || false })}
         placement={placement}
         referenceElement={referenceElement}
     >
@@ -154,6 +174,7 @@ const Popover = (props: PbPopoverProps) => {
 const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
   const [targetId] = useState(uniqueId('id-'))
   const {
+    appendTo,
     className,
     children,
     modifiers = [],
@@ -246,10 +267,10 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
         {show &&
           (usePortal ? (
             <>
-              {ReactDOM.createPortal(
-                popoverComponent,
-                document.querySelector(portal)
-              )}
+                {ReactDOM.createPortal(
+                  popoverComponent,
+                  getAppendTarget(appendTo, targetId)
+                )}
             </>
           ) : (
             { popoverComponent }

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx ADDED Viewed

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
+const PopoverAppendTo = (props) => {
+  const [showParentPopover, setShowParentPopover] = useState(false);
+  const [showSelectorPopover, setShowSelectorPopover] = useState(false);
+  const parentPopoverReference = (
+    <CircleIconButton
+        icon="info"
+        onClick={() => setShowParentPopover(!showParentPopover)}
+        variant="secondary"
+    />
+  );
+  const selectorPopoverReference = (
+    <CircleIconButton
+        icon="info"
+        onClick={() => setShowSelectorPopover(!showSelectorPopover)}
+        variant="secondary"
+    />
+  );
+  return (
+    <>
+      <Flex
+          marginBottom="md"
+          orientation="row"
+          vertical="center"
+          {...props}
+      >
+        <Body text="Click info for more details" />
+        &nbsp;
+        <PbReactPopover
+            appendTo="parent"
+            offset
+            placement="top"
+            reference={parentPopoverReference}
+            show={showParentPopover}
+            {...props}
+        >
+          {'I\'m a popover. I have been appended to my parent element.'}
+        </PbReactPopover>
+      </Flex>
+      <Flex
+          orientation="row"
+          vertical="center"
+          {...props}
+      >
+        <Body text="Click info for more details" />
+        &nbsp;
+        <PbReactPopover
+            appendTo=".kit-show-wrapper"
+            offset
+            placement="top"
+            reference={selectorPopoverReference}
+            show={showSelectorPopover}
+            {...props}
+        >
+          {'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
+        </PbReactPopover>
+      </Flex>
+    </>
+  );
+};
+export default PopoverAppendTo;

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `appendTo` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

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

@@ -15,3 +15,4 @@ examples:
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
+    - popover_append_to: Append To

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

@@ -4,3 +4,4 @@ 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'

data/app/pb_kits/playbook/pb_popover/popover.test.js CHANGED Viewed

@@ -159,6 +159,62 @@ const PopoverTestClicktoClose3 = () => {
   )
 };
+//Test Popover with appendTo="parent"
+const PopoverTestAppendToParent = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+  const popoverReference = (
+    <Button onClick={togglePopover}
+        text="Click Me"
+    />
+  );
+  return (
+    <div data-testid="parent-container"
+        id="parent-container"
+    >
+      <PbReactPopover
+          appendTo="parent"
+          offset
+          reference={popoverReference}
+          show={mockState}
+      >
+        {"Appended to parent"}
+      </PbReactPopover>
+    </div>
+  )
+};
+//Test Popover with appendTo CSS selector
+const PopoverTestAppendToSelector = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+  const popoverReference = (
+    <Button onClick={togglePopover}
+        text="Click Me"
+    />
+  );
+  return (
+    <div data-testid="custom-container"
+        id="custom-container"
+    >
+      <PbReactPopover
+          appendTo="#custom-container"
+          offset
+          reference={popoverReference}
+          show={mockState}
+      >
+        {"Appended to custom container"}
+      </PbReactPopover>
+    </div>
+  )
+};
   test("renders Popover", () => {
     render(<PopoverTest data={{ testid: testId}}/>)
@@ -217,4 +273,28 @@ const PopoverTestClicktoClose3 = () => {
     fireEvent.click(btn);
     expect(kit).not.toBeInTheDocument;
+  });
+  test("renders Popover with appendTo parent", () => {
+    render(<PopoverTestAppendToParent data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Appended to parent");
+    expect(kit).toBeInTheDocument();
+    // Check that the popover is rendered inside the parent container
+    const parentContainer = screen.getByTestId("parent-container");
+    expect(parentContainer).toContainElement(kit);
+  });
+  test("renders Popover with appendTo CSS selector", () => {
+    render(<PopoverTestAppendToSelector data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Appended to custom container");
+    expect(kit).toBeInTheDocument();
+    // Check that the popover is rendered inside the custom container
+    const customContainer = screen.getByTestId("custom-container");
+    expect(customContainer).toContainElement(kit);
   });

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

@@ -11,7 +11,7 @@ import { ToolbarTypes } from "./EditorTypes";
 import ToolbarHistoryItems from "./ToolbarHistory";
 import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
-const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
+const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.ReactElement => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -33,15 +33,50 @@ const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
     },
   ]
+  const simpleToolbaritems = [
+    {
+        icon: "bold",
+        text: "Bold",
+        classname:`toolbar_button ${editor.isActive('bold') ? 'is-active' : ''}`,
+        onclick:()=>editor.chain().focus().toggleBold().run(),
+    },
+    {
+        icon: "italic",
+        text: "Italic",
+        classname:`toolbar_button ${editor.isActive('italic') ? 'is-active' : ''}`,
+        onclick:() => editor.chain().focus().toggleItalic().run(),
+    },
+  ]
   return (
     <Background backgroundColor="white"
-        className="toolbar"
+        className={`toolbar ${sticky ? 'pb_rich_text_editor_tiptap_toolbar_sticky' : ''}`}
     >
       <Flex flex="0"
           justify="between"
           paddingX="sm"
           paddingY="xxs"
       >
+        {
+          simple ? (
+            <>
+              <Flex className="toolbar_block">
+                {simpleToolbaritems && simpleToolbaritems.map(
+                  ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
+                    <EditorButton
+                        classname={classname}
+                        icon={icon}
+                        key={index}
+                        onclick={onclick}
+                        text={text}
+                    />
+                  )
+                )}
+              </Flex>
+            </>
+          ) : (
+            <>
         <FlexItem className="toolbar_block"
             displayFlex
         >
@@ -69,6 +104,10 @@ const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
             }
         </FlexItem>
         <ToolbarHistoryItems editor={editor} />
+        </>
+          )
+        }
       </Flex>
     </Background>
   );

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx CHANGED Viewed

@@ -146,6 +146,7 @@ const popoverReference = (
   return (
       <PbReactPopover
+          className='pb_tiptap_toolbar_dropdown_popover'
           closeOnClick='outside'
           padding='none'
           placement="bottom"

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import classnames from 'classnames'
 import { TrixEditor } from 'react-trix'
@@ -77,7 +77,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria),
     dataProps = buildDataProps(data),
-    [editor, setEditor] = useState<Editor>()
+    [editor, setEditor] = useState<Editor>(),
+    [showToolbarOnFocus, setShowToolbarOnFocus] = useState(false),
+    containerRef = useRef<HTMLDivElement>(null)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -128,6 +130,42 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     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')
+  }
+  const isClickInContainer = (event: Event): boolean => {
+    return !!(containerRef.current && containerRef.current.contains(event.target as Node))
+  }
+  useEffect(() => {
+    if (!advancedEditor || !focus) return
+    const handleFocus = () => setShowToolbarOnFocus(true)
+    const handleClickOutside = (event: Event) => {
+      if (isClickInContainer(event) || isClickInPopover(event)) return
+      setShowToolbarOnFocus(false)
+    }
+    const editorElement = advancedEditor?.view?.dom
+    if (editorElement) {
+      editorElement.addEventListener('focus', handleFocus)
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      if (editorElement) {
+        editorElement.removeEventListener('focus', handleFocus)
+      }
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [advancedEditor, focus])
+  //============= end focus prop with advanced editor=================
   useEffect(() => {
     if (!editor || !template) return
     editor.loadHTML('')
@@ -148,41 +186,43 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     })
   }, [editor])
-  const richTextEditorClass = 'pb_rich_text_editor_kit',
-    simpleClass = simple ? 'simple' : '',
-    focusClass = focus ? 'focus-editor-targets' : '',
-    stickyClass = sticky ? 'sticky' : '',
-    inlineClass = inline ? 'inline' : '',
-    toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
-  let css = classnames(globalProps(props, { maxWidth }), className)
-  css = classnames(
-    richTextEditorClass,
-    simpleClass,
-    focusClass,
-    stickyClass,
-    inlineClass,
-    toolbarBottomClass,
-    css
+  // Generate CSS classes
+  const css = classnames(
+    'pb_rich_text_editor_kit',
+    {
+      simple: simple,
+      'focus-editor-targets': focus,
+      sticky: sticky,
+      inline: inline,
+      'toolbar-bottom': toolbarBottom,
+    },
+    globalProps(props, { maxWidth }),
+    className
   )
+  // Determine if toolbar should be shown
+  const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
   return (
     <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
         className={css}
+        ref={focus ? containerRef : undefined}
     >
       {
         advancedEditor ? (
           <div
               className={classnames("pb_rich_text_editor_advanced_container", {
-              ["toolbar-active"]: advancedEditorToolbar,
+              ["toolbar-active"]: shouldShowToolbar,
               })}
           >
-            {advancedEditorToolbar && (
+            {shouldShowToolbar && (
               <EditorToolbar editor={advancedEditor}
                   extensions={extensions}
+                  simple={simple}
+                  sticky={sticky}
               />
             )}
           { children }

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

@@ -9,6 +9,37 @@
 @import "previewer_mixin";
 [class^="pb_rich_text_editor_kit"] {
+    &.inline {
+        .toolbar {
+          opacity: 0;
+          transition: all 0.3s ease-in-out 0s;
+        }
+        &:focus-within .toolbar {
+          opacity: 100;
+        }
+        .ProseMirror {
+          border: 1px solid transparent;
+          transition: all 0.3s ease-in-out 0s;
+        }
+        &:focus-within .ProseMirror {
+          border: 1px solid $border_light;
+          border-top: none;
+        }
+        &:hover {
+          .toolbar {
+            opacity: 100;
+          }
+          .ProseMirror {
+            border: 1px solid $border_light;
+            border-top: none;
+          }
+        }
+      }
   .toolbar_button {
     display: flex;
     align-items: center;
@@ -42,6 +73,11 @@
     }
   }
+  .pb_rich_text_editor_tiptap_toolbar_sticky {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
   .toolbar {
     border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
     border: 1px solid $border_light;

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.jsx ADDED Viewed

@@ -0,0 +1,38 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+const RichTextEditorAdvancedAttributes = (props) => {
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Add your text here. You can format your text, add links, quotes, and bullets."
+    })
+      if (!editor) {
+        return null
+      }
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          aria={{ label: 'I am a rich text editor' }}
+          data={{ 'test-data': 'value', 'test-data2': 'value2' }}
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+export default RichTextEditorAdvancedAttributes

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Aria labels and data attributes can also be added to the top level div for the RichTextEditor.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx ADDED Viewed

@@ -0,0 +1,34 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+const RichTextEditorAdvancedFocus = (props) => {
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Click inside to see the toolbar. Click outside to hide it."
+    })
+    if (!editor) {
+        return null
+    }
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          focus
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+export default RichTextEditorAdvancedFocus

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ When the optional `focus` prop is set to true, the toolbar will only show once you click in to the RichTextEditor.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx ADDED Viewed

@@ -0,0 +1,37 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+const RichTextEditorAdvancedInline = (props) => {
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Add your text here. You can format your text, add links, quotes, and bullets."
+    })
+      if (!editor) {
+        return null
+      }
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          inline
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+export default RichTextEditorAdvancedInline

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ When the optional `inline` prop is set to true, the editor borders and the toolbar will only be visible when hovered or focused on.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx ADDED Viewed

@@ -0,0 +1,37 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+const RichTextEditorAdvancedSimple = (props) => {
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Add your text here. Use the simple toolbar above to format your text"
+    })
+      if (!editor) {
+        return null
+      }
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          simple
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+export default RichTextEditorAdvancedSimple