playbook_ui 12.35.0 → 12.36.0

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: 9b982d7d15691df84bc2a32b4f67b5dab67cf90ab7f9fc072ebfd4d81b800684
4
- data.tar.gz: 293f1da6a6611a18106a6f0f1a3cccf2edc2520657ff5f17f3e06a2b74de7839
3
+ metadata.gz: c0a98a2809eb8f345dd7c46ebb952d03d2e5fdc357804e70e344546ab013b8a0
4
+ data.tar.gz: e72f1812fd7f819375cc1788d6eabb2a280bd392a3fb46e2af4b1d8ce022fbd7
5
5
  SHA512:
6
- metadata.gz: 46f096f0c12c8c764ab72c44ff5fd42f0bc8c547c6807a2ae06dae1e073c055abbbfae072144524ddeeba99e2397d7deaa81b9f64cb07b904b2582b636c4da9b
7
- data.tar.gz: 992a01e77be2823afea2e8e8ece093d84114fb0e85a3e58bb1dc57a50d8ff4f86fb3ccaae38f16d8554de1334285463b155bb28b28c2bccbbb1969e21af4807e
6
+ metadata.gz: ce9e6790efcab2fce2080635bdd3331f7a9ae8af497756d5a2c6111a57ac859ce4a73d567f0c51123dcc271ee46f1b2ebc2e02e1af28bed233f860c93850a973
7
+ data.tar.gz: d6d7bcb5b2684b64a05806680f5c9129082888394d2036ef53866121a68622d3a0a01803287b08881836186983fe9f5e4641225333a36bcfbb69fad597829683
@@ -21,13 +21,17 @@ const dialogHelper = () => {
21
21
 
22
22
  // Close dialog box on outside click
23
23
  dialogs.forEach((dialogElement) => {
24
- dialogElement.addEventListener("click", (event) => {
24
+ dialogElement.addEventListener("mousedown", (event) => {
25
25
  const dialogParentDataset = dialogElement.parentElement.dataset
26
26
  if (dialogParentDataset.overlayClick === "overlay_close") return
27
27
 
28
- const clickedOutsideDialogBox = event.target.classList.contains("pb_dialog_rails")
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
29
33
 
30
- if (clickedOutsideDialogBox) {
34
+ if (clickedOutsideDialogModal) {
31
35
  dialogElement.close()
32
36
  event.stopPropagation()
33
37
  }
@@ -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