playbook_ui 12.34.0.pre.alpha.play716popoverkitcloseonclickissue998 → 12.34.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: de8314a6b967b5e972e46892edd4fe1c7b9dfcb9ca199120cc898e92724b137a
-  data.tar.gz: 4f323f8d98c5219d26de002ed897bf31ab5dee71af172727559e3b1aca47b04c
+  metadata.gz: f2849c0a1962557e91163c1111e59d583658a23463c747fa5416e5f57a9a8fdb
+  data.tar.gz: 529c7267dde24349b1fe48203b2c631faeb186a74dd83021979929607b2dec51
 SHA512:
-  metadata.gz: 2fb6010127b3e609045f7b7b6ba41aa650ed266e00b8b0660a4b9e544568300b2a7a7722a6b43f9913bc2791ef7234522b303433a566fa52bf95345ecf13ef89
-  data.tar.gz: 4bf867ee4ee1ef8fa70d12a0fd5bd61efbdbab94d0a7b03f3060857eac345c75c4de7a02bb65ef200f5a5c1e801317d6e8208e55cba22f8fee32a553728860ae
+  metadata.gz: 8d88ffe25dba254906c2e9c1fe43d0f34f8fc88d7176a6f22ba50f96798aa23acb2e71dc37feb8c2d24aabd2283603987c29813473b7fcce218d6d5f137ecbd5
+  data.tar.gz: 3079579c4f39e39ba29596493995fd21eb33722368106f82fdc8e81ac0c374217a5c81823d8f8dd29d85abf70bef8adefb1efddc132e920997166615c98c77b8

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 import {
   Popper,
@@ -17,7 +17,6 @@ import {
 
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
-import _uniqueId from 'lodash/uniqueId';
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };
@@ -73,7 +72,6 @@ const Popover = (props: PbPopoverProps) => {
     maxWidth,
     minHeight,
     minWidth,
-    targetId,
   } = props;
 
   const popoverSpacing =
@@ -125,7 +123,6 @@ const Popover = (props: PbPopoverProps) => {
                     popoverSpacing,
                     overflowHandling
                   )}
-                  id={targetId}
                   style={widthHeightStyles()}
               >
                 {children}
@@ -139,7 +136,6 @@ const Popover = (props: PbPopoverProps) => {
 };
 
 const PbReactPopover = (props: PbPopoverProps) => {
-  const [targetId] = useState(_uniqueId('id-'))
   const {
     className,
     children,
@@ -167,27 +163,25 @@ const PbReactPopover = (props: PbPopoverProps) => {
       "click",
       ({ target }) => {
         const targetIsPopover =
-          (target as HTMLElement).closest("#" + targetId) !==
+          (target as HTMLElement).closest("[class^=pb_popover_tooltip]") !==
           null;
         const targetIsReference =
-          (target as HTMLElement).closest("#reference-" + targetId) !==
+          (target as HTMLElement).closest(".pb_popover_reference_wrapper") !==
           null;
 
         switch (closeOnClick) {
           case "outside":
-            if (!targetIsPopover && !targetIsReference) {
+            if (!targetIsPopover || targetIsReference) {
               shouldClosePopover(true);
             }
             break;
           case "inside":
-            if (targetIsPopover) {
+            if (targetIsPopover || targetIsReference) {
               shouldClosePopover(true);
             }
             break;
           case "any":
-            if (targetIsPopover || !targetIsPopover && !targetIsReference) {
-              shouldClosePopover(true);
-            }
+            shouldClosePopover(true);
             break;
         }
       },
@@ -206,7 +200,6 @@ const PbReactPopover = (props: PbPopoverProps) => {
         offset={offset}
         placement={placement}
         referenceElement={referenceElement}
-        targetId={targetId}
         zIndex={zIndex}
         {...props}
     >
@@ -221,7 +214,6 @@ const PbReactPopover = (props: PbPopoverProps) => {
           <PopperReference>
             {({ ref }) => (
               <span
-                  id={"reference-" + targetId}
                   className="pb_popover_reference_wrapper"
                   ref={ref}>
                 <reference.type {...reference.props} />

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx

@@ -24,7 +24,6 @@ const PopoverClose = (props) => {
 
   const handleOutsideTogglePopover = () => {
     setOutsideShowPopover(!showOutsidePopover)
-    setAnyShowPopover(false)
   }
 
   const handleAnyShouldClosePopover = (shouldClosePopover) => {
@@ -33,7 +32,6 @@ const PopoverClose = (props) => {
 
   const handleAnyTogglePopover = () => {
     setAnyShowPopover(!showAnyPopover)
-    setOutsideShowPopover(false)
   }
 
   const insidePopoverTrigger = (

data/app/pb_kits/playbook/pb_popover/index.ts

@@ -49,16 +49,13 @@ export default class PbPopover extends PbEnhancedElement {
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target } ) => {
       const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
-      const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
 
       switch (this.closeOnClick) {
       case 'any':
-        if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
-          this.hideTooltip()
-        }
+        this.hideTooltip()
         break
       case 'outside':
-        if (!isTooltipElement && !isTriggerElement) {
+        if (!isTooltipElement) {
           this.hideTooltip()
         }
         break