playbook_ui 12.34.0.pre.alpha.fixdialogcloseevents1004 → 12.34.0.pre.alpha.play716popoverkitcloseonclickissue998

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8ea9cfa1c288caad17c1552fabe398a04430cb2b33bf304bbc35399b49cb9b6b
4
- data.tar.gz: 0b76cca0c4e6c1406b11cd5c3259cd9fdb51c015ae88fe117e131c1bf630cadd
3
+ metadata.gz: de8314a6b967b5e972e46892edd4fe1c7b9dfcb9ca199120cc898e92724b137a
4
+ data.tar.gz: 4f323f8d98c5219d26de002ed897bf31ab5dee71af172727559e3b1aca47b04c
5
5
  SHA512:
6
- metadata.gz: f9c59be1ef6f5a73c19fb0b9868d088f58f649f9fdb324d831fafc27815db6cc9c92396c3ce185f1e812cdf0c1de0992c95e5dffc48682699325f68df776310c
7
- data.tar.gz: fac77871341ca61a2e0908384c4cd28d24fcef7d0534a01eaca09721aeb6d1b856fd0d0de50e4edee6ce6bd82583901e09841d71f691b58a40c4c82a04d95dde
6
+ metadata.gz: 2fb6010127b3e609045f7b7b6ba41aa650ed266e00b8b0660a4b9e544568300b2a7a7722a6b43f9913bc2791ef7234522b303433a566fa52bf95345ecf13ef89
7
+ data.tar.gz: 4bf867ee4ee1ef8fa70d12a0fd5bd61efbdbab94d0a7b03f3060857eac345c75c4de7a02bb65ef200f5a5c1e801317d6e8208e55cba22f8fee32a553728860ae
@@ -21,17 +21,13 @@ const dialogHelper = () => {
21
21
 
22
22
  // Close dialog box on outside click
23
23
  dialogs.forEach((dialogElement) => {
24
- dialogElement.addEventListener("mousedown", (event) => {
24
+ dialogElement.addEventListener("click", (event) => {
25
25
  const dialogParentDataset = dialogElement.parentElement.dataset
26
26
  if (dialogParentDataset.overlayClick === "overlay_close") return
27
27
 
28
- const dialogModal = event.target.getBoundingClientRect()
29
- const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
30
- event.clientX > dialogModal.right ||
31
- event.clientY < dialogModal.top ||
32
- event.clientY > dialogModal.bottom
28
+ const clickedOutsideDialogBox = event.target.classList.contains("pb_dialog_rails")
33
29
 
34
- if (clickedOutsideDialogModal) {
30
+ if (clickedOutsideDialogBox) {
35
31
  dialogElement.close()
36
32
  event.stopPropagation()
37
33
  }
@@ -1,4 +1,4 @@
1
- import React, { useEffect } from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
  import ReactDOM from "react-dom";
3
3
  import {
4
4
  Popper,
@@ -17,6 +17,7 @@ import {
17
17
 
18
18
  import classnames from "classnames";
19
19
  import { globalProps, GlobalProps } from "../utilities/globalProps";
20
+ import _uniqueId from 'lodash/uniqueId';
20
21
 
21
22
  type PbPopoverProps = {
22
23
  aria?: { [key: string]: string };
@@ -72,6 +73,7 @@ const Popover = (props: PbPopoverProps) => {
72
73
  maxWidth,
73
74
  minHeight,
74
75
  minWidth,
76
+ targetId,
75
77
  } = props;
76
78
 
77
79
  const popoverSpacing =
@@ -123,6 +125,7 @@ const Popover = (props: PbPopoverProps) => {
123
125
  popoverSpacing,
124
126
  overflowHandling
125
127
  )}
128
+ id={targetId}
126
129
  style={widthHeightStyles()}
127
130
  >
128
131
  {children}
@@ -136,6 +139,7 @@ const Popover = (props: PbPopoverProps) => {
136
139
  };
137
140
 
138
141
  const PbReactPopover = (props: PbPopoverProps) => {
142
+ const [targetId] = useState(_uniqueId('id-'))
139
143
  const {
140
144
  className,
141
145
  children,
@@ -163,25 +167,27 @@ const PbReactPopover = (props: PbPopoverProps) => {
163
167
  "click",
164
168
  ({ target }) => {
165
169
  const targetIsPopover =
166
- (target as HTMLElement).closest("[class^=pb_popover_tooltip]") !==
170
+ (target as HTMLElement).closest("#" + targetId) !==
167
171
  null;
168
172
  const targetIsReference =
169
- (target as HTMLElement).closest(".pb_popover_reference_wrapper") !==
173
+ (target as HTMLElement).closest("#reference-" + targetId) !==
170
174
  null;
171
175
 
172
176
  switch (closeOnClick) {
173
177
  case "outside":
174
- if (!targetIsPopover || targetIsReference) {
178
+ if (!targetIsPopover && !targetIsReference) {
175
179
  shouldClosePopover(true);
176
180
  }
177
181
  break;
178
182
  case "inside":
179
- if (targetIsPopover || targetIsReference) {
183
+ if (targetIsPopover) {
180
184
  shouldClosePopover(true);
181
185
  }
182
186
  break;
183
187
  case "any":
184
- shouldClosePopover(true);
188
+ if (targetIsPopover || !targetIsPopover && !targetIsReference) {
189
+ shouldClosePopover(true);
190
+ }
185
191
  break;
186
192
  }
187
193
  },
@@ -200,6 +206,7 @@ const PbReactPopover = (props: PbPopoverProps) => {
200
206
  offset={offset}
201
207
  placement={placement}
202
208
  referenceElement={referenceElement}
209
+ targetId={targetId}
203
210
  zIndex={zIndex}
204
211
  {...props}
205
212
  >
@@ -214,6 +221,7 @@ const PbReactPopover = (props: PbPopoverProps) => {
214
221
  <PopperReference>
215
222
  {({ ref }) => (
216
223
  <span
224
+ id={"reference-" + targetId}
217
225
  className="pb_popover_reference_wrapper"
218
226
  ref={ref}>
219
227
  <reference.type {...reference.props} />
@@ -24,6 +24,7 @@ const PopoverClose = (props) => {
24
24
 
25
25
  const handleOutsideTogglePopover = () => {
26
26
  setOutsideShowPopover(!showOutsidePopover)
27
+ setAnyShowPopover(false)
27
28
  }
28
29
 
29
30
  const handleAnyShouldClosePopover = (shouldClosePopover) => {
@@ -32,6 +33,7 @@ const PopoverClose = (props) => {
32
33
 
33
34
  const handleAnyTogglePopover = () => {
34
35
  setAnyShowPopover(!showAnyPopover)
36
+ setOutsideShowPopover(false)
35
37
  }
36
38
 
37
39
  const insidePopoverTrigger = (
@@ -49,13 +49,16 @@ export default class PbPopover extends PbEnhancedElement {
49
49
  checkCloseTooltip() {
50
50
  document.querySelector('body').addEventListener('click', ({ target } ) => {
51
51
  const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
52
+ const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
52
53
 
53
54
  switch (this.closeOnClick) {
54
55
  case 'any':
55
- this.hideTooltip()
56
+ if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
57
+ this.hideTooltip()
58
+ }
56
59
  break
57
60
  case 'outside':
58
- if (!isTooltipElement) {
61
+ if (!isTooltipElement && !isTriggerElement) {
59
62
  this.hideTooltip()
60
63
  }
61
64
  break