playbook_ui 15.3.0.pre.alpha.PLAY2407daterangeinlineshowcurrentyear12138 → 15.3.0.pre.alpha.PLAY2565formkitsubmitfix11681

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React from "react"
 import { render, screen, fireEvent } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
@@ -393,150 +393,4 @@ test("applies activeStyle backgroundColor and fontColor when selected", () => {
     expect(selected).toBeInTheDocument()
     expect(selected).toHaveClass("bg-bg_light")
     expect(selected).toHaveClass("font-primary")
-  })
-
-test("renders quickpick variant with auto-generated options", () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_dropdown_quickpick')
-  
-  // Check that quickpick options are generated
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  expect(options.length).toBe(10)
-  expect(options[0]).toHaveTextContent("Today")
-})
-
-test("quickpick variant accepts string defaultValue", () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        defaultValue="This Month"
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  
-  expect(trigger).toHaveTextContent("This Month")
-})
-
-test("quickpick attaches _dropdownRef to DOM element when id is provided", () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        id="test-quickpick"
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  
-  // Check that the element has the _dropdownRef attached
-  expect(kit._dropdownRef).toBeDefined()
-  expect(kit._dropdownRef.current).toBeDefined()
-  expect(kit._dropdownRef.current.clearSelected).toBeDefined()
-})
-
-test("quickpick clears selection when clicking X icon", () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        defaultValue="This Week"
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  
-  expect(trigger).toHaveTextContent("This Week")
-  
-  const clearIcon = kit.querySelector('[aria-label="times icon"]')
-  expect(clearIcon).toBeInTheDocument()
-  
-  fireEvent.click(clearIcon.parentElement)
-  
-  expect(trigger).toHaveTextContent("Select...")
-})
-
-test("quickpick returns date array values when option selected", () => {
-  const TestComponent = () => {
-    const [selected, setSelected] = useState(null)
-    return (
-      <>
-        <Dropdown
-            data={{ testid: testId }}
-            onSelect={(item) => setSelected(item)}
-            variant="quickpick"
-        />
-        {selected && (
-          <div data-testid="selected-value">
-            {JSON.stringify({
-              label: selected.label,
-              hasValue: !!selected.value,
-              isArray: Array.isArray(selected.value),
-              valueLength: selected.value?.length
-            })}
-          </div>
-        )}
-      </>
-    )
-  }
-
-  render(<TestComponent />)
-  
-  const kit = screen.getByTestId(testId)
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  
-  fireEvent.click(options[0])
-  
-  const selectedValue = screen.getByTestId('selected-value')
-  const data = JSON.parse(selectedValue.textContent)
-  
-  expect(data.label).toBe("Today")
-  expect(data.hasValue).toBe(true)
-  expect(data.isArray).toBe(true)
-  expect(data.valueLength).toBe(2)
-})
-
-test("quickpick option values are Date objects", () => {
-  const onSelectMock = jest.fn()
-  
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        onSelect={onSelectMock}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  
-  const thisMonthOption = Array.from(options).find(opt => opt.textContent === 'This Month')
-  fireEvent.click(thisMonthOption)
-  
-  const selectedItem = onSelectMock.mock.calls[0][0]
-  
-  expect(selectedItem.label).toBe("This Month")
-  expect(selectedItem.value).toBeDefined()
-  expect(Array.isArray(selectedItem.value)).toBe(true)
-  expect(selectedItem.value.length).toBe(2)
-  
-  const [startDate, endDate] = selectedItem.value
-  
-  expect(startDate instanceof Date).toBe(true)
-  expect(endDate instanceof Date).toBe(true)
-  
-  expect(startDate.getTime()).not.toBeNaN()
-  expect(endDate.getTime()).not.toBeNaN()
-  
-  expect(endDate.getTime()).toBeGreaterThanOrEqual(startDate.getTime())
-})
+  })

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md

@@ -1 +1 @@
-Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>
+Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -22,27 +22,13 @@
 }) %>
 
 <script>
-// Hide toasts immediately
-const hideAutoToasts = () => {
-  const toastAuto = document.getElementById('toast-auto-close');
-  const toastAutoCloseable = document.getElementById('toast-auto-close-closeable');
-  if (toastAuto) toastAuto.style.display = 'none';
-  if (toastAutoCloseable) toastAutoCloseable.style.display = 'none';
-}
-hideAutoToasts();
-
-// Handle various page load/restore events
-window.addEventListener('pageshow', hideAutoToasts)
-document.addEventListener('turbolinks:load', hideAutoToasts)
-document.addEventListener('turbo:load', hideAutoToasts)
-
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize toast elements and buttons
   const toasts = {
     '#toast-auto-close': document.querySelector("#toast-auto-close"),
     '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
   }
-
+  
   const buttons = {
     '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
     '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -24,6 +24,7 @@
   horizontal: "center"
 }) %>
 
+
 <script type="text/javascript">
   const multitoasts = document.querySelectorAll(".multitoast-to-hide")
   const multibuttons = document.querySelectorAll("button[data-multitoast]")
@@ -34,15 +35,6 @@
     })
   }
 
-  // Hide toasts immediately
-  hideMultiToasts()
-
-  // Handle various page load/restore events
-  window.addEventListener('pageshow', hideMultiToasts)
-  document.addEventListener('DOMContentLoaded', hideMultiToasts)
-  document.addEventListener('turbolinks:load', hideMultiToasts)
-  document.addEventListener('turbo:load', hideMultiToasts)
-
   multibuttons.forEach((button) => {
     button.onclick = () => {
       hideMultiToasts()
@@ -54,3 +46,10 @@
     }
   })
 </script>
+
+<!-- hiding toast on page load -->
+<style>
+  #toast-long, #toast-short {
+    display: none;
+  }
+</style>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb

@@ -69,28 +69,27 @@
   const toasts = document.querySelectorAll(".toast-to-hide")
   const buttons = document.querySelectorAll("button[data-toast]")
 
-  const hidePositionToasts = () => {
+  const hideToasts = () => {
     toasts.forEach((toast) => {
       toast.style.display = "none"
     })
   }
 
-  // Hide toasts immediately
-  hidePositionToasts()
-
-  // Handle various page load/restore events
-  window.addEventListener('pageshow', hidePositionToasts)
-  document.addEventListener('DOMContentLoaded', hidePositionToasts)
-  document.addEventListener('turbolinks:load', hidePositionToasts)
-  document.addEventListener('turbo:load', hidePositionToasts)
-
   buttons.forEach((button) => {
     button.onclick = () => {
-      hidePositionToasts()
+      hideToasts()
       let toast = document.querySelector(button.getAttribute("data-toast"))
+
       if (toast) {
         toast.style.display = "flex"
       }
     }
   })
 </script>
+
+<!-- hiding toast on page load -->
+<style>
+  #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
+    display: none;
+  }
+</style>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -9,7 +9,7 @@ import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type FormPillProps = {
   className?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((event: any) => void) | any},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text: string,
   name?: string,

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md

@@ -1,3 +1,3 @@
-For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
 
 __NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md

@@ -1 +1 @@
-For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md

@@ -1 +1 @@
-Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 
+Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md

@@ -1 +1 @@
-Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `orange` `purple` `teal` `red` `yellow` `green`
+Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `blue` `orange` `purple` `teal` `red` `yellow` `green`

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb

@@ -3,41 +3,48 @@
                                           text: "Mercury",
                                           unit: "AU",
                                           value: 0.39,
-                                          variant:"royal"
+                                          variant:"blue"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-ringed",
                                           text: "Venus",
                                           unit: "AU",
                                           value: 0.723,
-                                          variant:"purple"
+                                          variant:"royal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-moon",
                                           text: "Earth",
                                           unit: "AU",
                                           value: 1.0,
-                                          variant:"teal"
+                                          variant:"purple"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "solar-system",
                                           text: "Mars",
                                           unit: "AU",
                                           value: 1.524,
-                                          variant:"red"
+                                          variant:"teal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-americas",
-                                          text: "Jupiter",
+                                          text: "Jupitar",
                                           unit: "AU",
                                           value: 5.203,
-                                          variant:"yellow"
+                                          variant:"red"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-africa",
                                           text: "Saturn",
                                           unit: "AU",
                                           value: 9.539,
+                                          variant:"yellow"
+ }) %>
+ <br>
+ <%= pb_rails("icon_stat_value", props: { icon: "globe",
+                                          text: "Uranus",
+                                          unit: "AU",
+                                          value: 19.18,
                                           variant:"green"
  }) %>
  <br>
@@ -46,4 +53,4 @@
                                           unit: "AU",
                                           value: 19.18,
                                           variant:"orange"
- }) %>
+ }) %>

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx

@@ -9,7 +9,7 @@ const IconStatValueColor = (props) => {
           text="Mercury"
           unit="AU"
           value={0.39}
-          variant="royal"
+          variant="blue"
           {...props}
       />
       <br />
@@ -18,7 +18,7 @@ const IconStatValueColor = (props) => {
           text="Venus"
           unit="AU"
           value={0.723}
-          variant="purple"
+          variant="royal"
           {...props}
       />
       <br />
@@ -27,7 +27,7 @@ const IconStatValueColor = (props) => {
           text="Earth"
           unit="AU"
           value={1.0}
-          variant="teal"
+          variant="purple"
           {...props}
       />
       <br />
@@ -36,16 +36,16 @@ const IconStatValueColor = (props) => {
           text="Mars"
           unit="AU"
           value={1.524}
-          variant="red"
+          variant="teal"
           {...props}
       />
       <br />
       <IconStatValue
           icon="globe-americas"
-          text="Jupiter"
+          text="Jupitar"
           unit="AU"
           value={5.203}
-          variant="yellow"
+          variant="red"
           {...props}
       />
       <br />
@@ -54,6 +54,15 @@ const IconStatValueColor = (props) => {
           text="Saturn"
           unit="AU"
           value={9.539}
+          variant="yellow"
+          {...props}
+      />
+      <br />
+      <IconStatValue
+          icon="globe"
+          text="Uranus"
+          unit="AU"
+          value={19.18}
           variant="green"
           {...props}
       />

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md

@@ -1 +1 @@
-Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>
+Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md

@@ -1 +1 @@
-The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.
+The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our [Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md

@@ -1 +1 @@
-All Nav variants' navItems accept our global Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!
+All Nav variants' navItems accept our [global Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -2,4 +2,4 @@ The optional `layout` prop accepts the `position` and `size` of the overlay as a
 
 The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
 
-The `size` value is `full` (100%) by default, but accepts our spacing tokens([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).
+The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

data/app/pb_kits/playbook/pb_pill/docs/_description.md

@@ -1 +1 @@
-A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/global_props/colors" target="_blank">here</a>.
+A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

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,
@@ -24,7 +24,6 @@ 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";
@@ -63,25 +62,6 @@ 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 = {},
@@ -109,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 = () => {
@@ -133,7 +113,7 @@ const Popover = (props: PbPopoverProps) => {
 
   return (
     <Popper
-        modifiers={popoverModifiers({ modifiers, offset: offset || false })}
+        modifiers={popoverModifiers({ modifiers, offset })}
         placement={placement}
         referenceElement={referenceElement}
     >
@@ -174,7 +154,6 @@ const Popover = (props: PbPopoverProps) => {
 const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
   const [targetId] = useState(uniqueId('id-'))
   const {
-    appendTo,
     className,
     children,
     modifiers = [],
@@ -191,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
@@ -281,10 +246,10 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
         {show &&
           (usePortal ? (
             <>
-                {ReactDOM.createPortal(
-                  popoverComponent,
-                  getAppendTarget(appendTo, targetId)
-                )}
+              {ReactDOM.createPortal(
+                popoverComponent,
+                document.querySelector(portal)
+              )}
             </>
           ) : (
             { popoverComponent }

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

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

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