playbook_ui 15.3.0.pre.alpha.play249512047 → 15.3.0.pre.alpha.play259311731

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89525b2c53030f64515954ae6f1badd973e456e2f2549d5f921de84530f6880c
-  data.tar.gz: 5b2f3e1c9daaef48d3b3c3286c9aaa2a081be42e1a86e11b066c1e7a8a153ddb
+  metadata.gz: ffcc9cd701358929b90b6a4de99034138c4f04b90909aaff546fa9a4c8c1c73c
+  data.tar.gz: 6728bf7227bdd1440d3b415dd561a518793fdc02ef54cda3b212f8526a237811
 SHA512:
-  metadata.gz: 6fb5b48ffb1b6074b075de87f296ee4c1b9d994335b0d4578c87e5c3697f0814e6e15e35edf8a70f883fb0aaf653b3fd4801486134d59341ae8386056d20c26a
-  data.tar.gz: 67de52130ab150e6b370f639ad9ed26a787d6c891630a5134a7459392c2d1e1be2c5ec8a5f5da5484ee4a038a23c89ffdea516635d973f6812004aadcae29edf
+  metadata.gz: 0e8fa30daf530ffa258a9a131c7eacdf6d401f5b64b47b7396752adb348a15e6612505d5c4caf65fa189fcd67eae631d6e23f21ea2111861bd696314ce1db181
+  data.tar.gz: 85a6aebcf6d61d4b75c0c556f580b1a68e17e46d9b57519636d3ca636e485aec1b0e15c7652886db25cd6aaa747dd35be6f44e25bade49e059b864a255540e54

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -250,21 +250,6 @@ export function useTableState({
     }
   }, [pagination, inlineRowLoading, paginationProps?.pageIndex, paginationProps?.pageSize]);
 
-  // Call the callback with the new page index when localPagination.pageIndex changes (with inlineRowLoading)
-  useEffect(() => {
-    if (pagination && inlineRowLoading && paginationProps?.onPageChange) {
-      paginationProps.onPageChange(localPagination.pageIndex);
-    }
-  }, [localPagination.pageIndex, pagination, inlineRowLoading, paginationProps]);
-
-  // Call the callback with the new page index when localPagination.pageIndex changes (without inlineRowLoading)
-  useEffect(() => {
-    if (pagination && !inlineRowLoading && paginationProps?.onPageChange) {
-      const currentPageIndex = table.getState().pagination.pageIndex;
-      paginationProps.onPageChange(currentPageIndex);
-    }
-  }, [table.getState().pagination.pageIndex, pagination, inlineRowLoading, paginationProps]);
-
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
   const selectedRowsLength = Object.keys(table.getState().rowSelection).length;

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

@@ -1,3 +1,3 @@
 The borders of column groups can be set to a different color using the `columnGroupBorderColor` prop.  In order for these borders to be visible, this prop must be used with `tableProps` and `verticalBorder` set to true.
 
-The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/tokens/colors).
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).

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

@@ -1,3 +1,3 @@
 The borders of column groups can be set to a different color using the `column_group_border_color` prop. In order for these borders to be visible, this prop must be used with `table_props` and `vertical_border` set to true.
 
-The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/tokens/colors).
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).

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

@@ -38,10 +38,7 @@ const AdvancedTablePaginationWithProps = (props) => {
   const paginationProps = {
     pageIndex: 1,
     pageSize: 10,
-    range: 2,
-    onPageChange: (pageIndex) => {
-      console.log('Current page index:', pageIndex);
-    }
+    range: 2
   }
   
   return (

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

@@ -1,6 +1,5 @@
-`paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with the following optional items:
+`paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with 2 optional items:
 
 - `pageIndex`: An optional prop to set which page is set to open on initial load. Default is '0'
 - `pageSize`: An optional prop to set total number of rows for each page before the Table paginates. Default is '20'
-- `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
-- `onPageChange`: A callback function that gives to access to the current page index.
+- `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'

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

@@ -1,7 +1,7 @@
 To achieve a sticky header AND sticky columns together, in addition to the `stickyLeftColumn` logic outlined above, you can:
 
 - Set `sticky: true` via `tableProps`
-- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud//global_props/max_height) global prop. 
+- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
 
 **NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the column stickiness.
 

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

@@ -1,4 +1,4 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 

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

@@ -1,4 +1,4 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
 
 **NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 

data/app/pb_kits/playbook/pb_background/docs/_background_category.md

@@ -1 +1 @@
-Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.
+Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_background.md

@@ -1 +1 @@
-Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
+Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_light.md

@@ -1 +1 @@
-Card 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>  
+Card 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_date_picker/date_picker.html.erb

@@ -70,36 +70,22 @@
   <%= javascript_tag do %>
     (function() {
       const loadDatePicker = () => {
-        const input = document.getElementById("<%= object.picker_id %>");
-        if (input && !input._flatpickr) {
-          datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
 
-          if (<%= object.selection_type == "quickpick" %>) {
-            document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
-              const startDate = document.getElementById("<%= object.start_date_id %>")
-              const endDate = document.getElementById("<%= object.end_date_id %>")
-              const splittedValue = target.value.split(" to ")
-              startDate.value = splittedValue[0]
-              endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-            })
-          }
+        if (<%= object.selection_type == "quickpick" %>) {
+          document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
+            const startDate = document.getElementById("<%= object.start_date_id %>")
+            const endDate = document.getElementById("<%= object.end_date_id %>")
+            const splittedValue = target.value.split(" to ")
+            startDate.value = splittedValue[0]
+            endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+          })
         }
       }
 
-      // Try to initialize immediately if DOM is ready
-      if (document.readyState === "loading") {
-        window.addEventListener("DOMContentLoaded", loadDatePicker)
-      } else {
+      window.addEventListener("DOMContentLoaded", () => {
         loadDatePicker()
-      }
-
-      // For dynamically added content (modals, etc.), check again after a brief delay
-      setTimeout(() => {
-        const input = document.getElementById("<%= object.picker_id %>");
-        if (input && !input._flatpickr) {
-          loadDatePicker();
-        }
-      }, 100);
+      })
 
       if (<%= !object.custom_event_type.empty? %>) {
         window.addEventListener("<%= object.custom_event_type %>", () => {

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -85,8 +85,6 @@ module Playbook
                              default: ""
       prop :sync_end_with, type: Playbook::Props::String,
                            default: ""
-      prop :cursor, type: Playbook::Props::String,
-                    default: "pointer"
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/token/colors) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md

@@ -1,4 +1,4 @@
 The `activeStyle` prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: `backgroundColor` sets the background color of the selected item (and its hover state); `fontColor` sets the font color of the selected item.
 
 `backgroundColor` **Type**: String | **Values**: bg_light | white | **Default**: (no selection) is primary
-`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/global_props/colors) | **Default**: (no selection) is white
+`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white

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_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'