playbook_ui 15.3.0.pre.alpha.PLAY2001selectablecarddisabledstyles11833 → 15.3.0.pre.alpha.PLAY2012currencyallownonstring11972

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d57319fd1abfd566b44b950dbb1ce2417ee14f3dca4f3f6d8e2d2976172f5e78
-  data.tar.gz: 459cbc5ae9b3a9b00e443ffcf761f166b1d1fe153c3e89d0374c7397e7af323e
+  metadata.gz: 42d45c331ca506d6fccb7e7314717f32162b05f1a731f2116b967a9ec778d033
+  data.tar.gz: 26dd29ee31ee473718cdce8a5650650b548567f9f032743094e101021540b49c
 SHA512:
-  metadata.gz: 146f79a6bca12c2806e2acf410dc602b99b5856db20b5dfb544088542ecac8f785ed0060a0f4b81595b386bee7eec341671a81e5928f2d073c1776a1f0cb4ce9
-  data.tar.gz: 732b20d194e5f62ee7ab1fd14b6185e74c6197d5c918c1d03d881fc0b0b26f16c2ca3c10b68a14125a78c5aa6a887883015bf0aa5538c8ecd4cc28775b79739f
+  metadata.gz: b29d46b6fad0bee27efc45f4a24af0d4e3771e92b162c96ad88c46dabf5802bfe4998d7d062128746a802b596d5fae29ec00b80434e33c49673477acd7c5aa54
+  data.tar.gz: 39734ec58552ba6b7ffc907ee0cb9ddb2158dbca3183cc35218d377e4d22f268d5c7cf4191b2f676837e54a893cb09301a99f58ea4efae4aa9aac97da2db0d19

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

@@ -250,6 +250,21 @@ 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_pagination_with_props.jsx

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

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

@@ -1,5 +1,6 @@
-`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:
+`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:
 
 - `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'
+- `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.

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -11,7 +11,7 @@ import Title from '../pb_title/_title'
 type CurrencyProps = {
   abbreviate?: boolean,
   align?: 'center' | 'left' | 'right',
-  amount: string,
+  amount: string | number,
   aria?: {[key:string]:string},
   className?: string,
   dark?: boolean,
@@ -59,6 +59,19 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     commaSeparator = false,
   } = props
 
+  // Convert numeric input to string format
+  const convertAmount = (input: string | number): string => {
+    if (typeof input === 'number') {
+      if (input === 0 && !nullDisplay) {
+        return ""
+      }
+      return input.toFixed(2)
+    }
+    return input
+  }
+
+  const currencyAmount = convertAmount(amount)
+
   const emphasizedClass = emphasized ? '' : '_deemphasized'
 
   let variantClass
@@ -68,7 +81,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variantClass = '_bold'
   }
 
-  const [whole, decimal = '00'] = amount.split('.')
+  const [whole, decimal = '00'] = currencyAmount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -92,19 +105,19 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
+  const getMatchingDecimalAmount = decimals === "matching" ? currencyAmount : whole
   const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
   const formatAmount = (amount: string) => {
     if (!commaSeparator) return amount;
-    
+
     const [wholePart, decimalPart] = amount.split('.');
     const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
     return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
   }
 
   const swapNegative = size === "sm" && symbol !== ""
-  const handleNegative = amount.startsWith("-") && swapNegative ? "-" : ""
+  const handleNegative = currencyAmount.startsWith("-") && swapNegative ? "-" : ""
   const getAbsoluteAmount = (amountString: string) => amountString.replace(/^-/,'')
   const getAbbrOrFormatAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
   const getAmount = swapNegative ? getAbsoluteAmount(getAbbrOrFormatAmount) : getAbbrOrFormatAmount
@@ -152,7 +165,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {handleNegative}{symbol}
               </Body>
-      
+
               <Title
                   className="pb_currency_value"
                   dark={dark}
@@ -160,7 +173,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {getAmount}
               </Title>
-      
+
               <Body
                   className="unit"
                   color="light"

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -17,8 +17,7 @@ module Playbook
       prop :symbol, type: Playbook::Props::String,
                     default: "$"
 
-      prop :amount, type: Playbook::Props::String,
-                    required: true
+      prop :amount, required: true
 
       prop :unit, type: Playbook::Props::String,
                   required: false
@@ -92,7 +91,7 @@ module Playbook
       end
 
       def negative_sign
-        amount.starts_with?("-") && swap_negative ? "-" : ""
+        currency_amount.starts_with?("-") && swap_negative ? "-" : ""
       end
 
       def body_props
@@ -117,10 +116,32 @@ module Playbook
         end
       end
 
+      def currency_amount
+        @currency_amount ||= convert_amount(amount)
+      end
+
     private
 
+      # Convert numeric input to string format
+      def convert_amount(input)
+        if input.is_a?(Numeric)
+          if input.zero? && null_display.nil?
+            ""
+          else
+            format("%.2f", input)
+          end
+        # Handle string representations of zero
+        elsif input.to_s.strip.match?(/^-?0+(\.0+)?$/) && null_display.nil?
+          ""
+        else
+          input.to_s
+        end
+      end
+
       def whole_value
-        value = amount.split(".").first
+        return "" if currency_amount.blank?
+
+        value = currency_amount.split(".").first
         if comma_separator
           number_with_delimiter(value.gsub(",", ""))
         else
@@ -129,7 +150,9 @@ module Playbook
       end
 
       def decimal_value
-        amount.split(".")[1] || "00"
+        return "00" if currency_amount.blank?
+
+        currency_amount.split(".")[1] || "00"
       end
 
       def units_element
@@ -147,7 +170,9 @@ module Playbook
       end
 
       def abbreviated_value(index = 0..-2)
-        value = amount.split(".").first.gsub(",", "").to_i
+        return "" if currency_amount.blank?
+
+        value = currency_amount.split(".").first.gsub(",", "").to_i
         abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
         abbreviated_num[index]
       end
@@ -174,9 +199,11 @@ module Playbook
 
         if decimals == "matching"
           if comma_separator
-            number_with_delimiter(amount.gsub(",", ""))
+            return "" if currency_amount.blank?
+
+            number_with_delimiter(currency_amount.gsub(",", ""))
           else
-            amount
+            currency_amount
           end
         else
           whole_value

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -133,3 +133,50 @@ test('handles negative amounts correctly', () => {
   expect(screen.getByTestId('test-negative-no-symbol')).toHaveTextContent('-400.50')
   expect(screen.getByTestId('test-negative-medium-size')).toHaveTextContent('$-500.55')
 })
+
+test('handles numeric amounts correctly', () => {
+  render(
+    <>
+      <Currency
+          amount={320}
+          data={{ testid: 'test-numeric-default' }}
+      />
+      <Currency
+          abbreviate
+          amount={3200000}
+          data={{ testid: 'test-numeric-millions' }}
+      />
+      <Currency
+          amount={123456.78}
+          commaSeparator
+          data={{ testid: 'test-numeric-comma-decimals' }}
+      />
+      <Currency
+          amount={400.50}
+          data={{ testid: 'test-numeric-no-symbol' }}
+          symbol=""
+      />
+      <Currency
+          amount={500.55}
+          data={{ testid: 'test-numeric-medium-size' }}
+          size="md"
+      />
+      <Currency
+          amount={-600.70}
+          data={{ testid: 'test-numeric-negative' }}
+      />
+      <Currency
+          amount={0.00}
+          data={{ testid: 'test-numeric-null' }}
+      />
+    </>
+  )
+
+  expect(screen.getByTestId('test-numeric-default')).toHaveTextContent('$320')
+  expect(screen.getByTestId('test-numeric-millions')).toHaveTextContent('$3.2M')
+  expect(screen.getByTestId('test-numeric-comma-decimals')).toHaveTextContent('$123,456.78')
+  expect(screen.getByTestId('test-numeric-no-symbol')).toHaveTextContent('400.50')
+  expect(screen.getByTestId('test-numeric-medium-size')).toHaveTextContent('$500.55')
+  expect(screen.getByTestId('test-numeric-negative')).toHaveTextContent('-$600.70')
+  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$.00')
+})

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -7,7 +7,7 @@
 }) %>
 
 <%= pb_rails("currency", props: {
-  amount: "342",
+  amount: 342,
   label: "Light",
   margin_bottom: "md",
   size: "sm",

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -14,7 +14,7 @@ const CurrencyVariants = (props) => {
           {...props}
       />
       <Currency
-          amount="342"
+          amount={342}
           label="Light"
           marginBottom="md"
           size="sm"

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.md

@@ -0,0 +1 @@
+**NOTE:** The value passed into the `amount` prop can be either a string or numeric value.

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

@@ -85,6 +85,8 @@ 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_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` `blue` `orange` `purple` `teal` `red` `yellow` `green`
+Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `orange` `purple` `teal` `red` `yellow` `green`

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

@@ -3,48 +3,41 @@
                                           text: "Mercury",
                                           unit: "AU",
                                           value: 0.39,
-                                          variant:"blue"
+                                          variant:"royal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-ringed",
                                           text: "Venus",
                                           unit: "AU",
                                           value: 0.723,
-                                          variant:"royal"
+                                          variant:"purple"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-moon",
                                           text: "Earth",
                                           unit: "AU",
                                           value: 1.0,
-                                          variant:"purple"
+                                          variant:"teal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "solar-system",
                                           text: "Mars",
                                           unit: "AU",
                                           value: 1.524,
-                                          variant:"teal"
+                                          variant:"red"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-americas",
-                                          text: "Jupitar",
+                                          text: "Jupiter",
                                           unit: "AU",
                                           value: 5.203,
-                                          variant:"red"
+                                          variant:"yellow"
  }) %>
  <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>
@@ -53,4 +46,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="blue"
+          variant="royal"
           {...props}
       />
       <br />
@@ -18,7 +18,7 @@ const IconStatValueColor = (props) => {
           text="Venus"
           unit="AU"
           value={0.723}
-          variant="royal"
+          variant="purple"
           {...props}
       />
       <br />
@@ -27,7 +27,7 @@ const IconStatValueColor = (props) => {
           text="Earth"
           unit="AU"
           value={1.0}
-          variant="purple"
+          variant="teal"
           {...props}
       />
       <br />
@@ -36,16 +36,16 @@ const IconStatValueColor = (props) => {
           text="Mars"
           unit="AU"
           value={1.524}
-          variant="teal"
+          variant="red"
           {...props}
       />
       <br />
       <IconStatValue
           icon="globe-americas"
-          text="Jupitar"
+          text="Jupiter"
           unit="AU"
           value={5.203}
-          variant="red"
+          variant="yellow"
           {...props}
       />
       <br />
@@ -54,15 +54,6 @@ 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_popover/_popover.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-multi-comp */
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import {
   Popper,
@@ -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 = {},
@@ -89,7 +109,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 = () => {
@@ -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 = [],
@@ -170,42 +191,56 @@ 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(() => {
-    const { closeOnClick, shouldClosePopover = noop } = props;
+    shouldClosePopoverRef.current = shouldClosePopover;
+  }, [shouldClosePopover]);
 
+  useEffect(() => {
     if (!closeOnClick) return;
 
-    document.body.addEventListener(
-      "click",
-      (e: MouseEvent) => {
-        const target = e.target as HTMLElement
+    // 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;
+      const targetIsPopover =
+        target.closest("#" + targetId) !== null;
+      const targetIsReference =
+        target.closest("#reference-" + targetId) !== null;
 
-        const shouldClose = () => {
-          setTimeout(() => shouldClosePopover(true), 0);
-        }
+      const shouldClose = () => {
+        setTimeout(() => shouldClosePopoverRef.current(true), 0);
+      }
 
-        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 }
-    );
-  }, []);
+      switch (closeOnClick) {
+        case "outside":
+          if (!targetIsPopover && !targetIsReference) shouldClose();
+          break;
+        case "inside":
+          if (targetIsPopover) shouldClose();
+          break;
+        case "any":
+          if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
+          break;
+      }
+    };
+
+    document.body.addEventListener("click", handleClick, { capture: true });
+
+    return () => {
+      document.body.removeEventListener("click", handleClick, { capture: true });
+    };
+  }, [targetId, closeOnClick]);
 
   const popoverComponent = (
     <Popover
@@ -246,10 +281,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

@@ -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;